Lecture 03 - JQuery.pdf

JavaScript
MSc. Hoang Ngoc Long

Outline
• Philosophy of jQuery and API Walkthrough
• Dev Tools
• Bare-bones JavaScript
• jQuery Selectors and Traversing

DOM Scripting
•Based on web standards
•Tests features, not browsers
•Unobtrusive

Unobtrusive
custom.js
Behavior Content
index.html
Presentation
style.css

DOM Scripting
•Verbose
if (!document.getElementsByTagName) { return false; }
var quotes =
document.getElementsByTagName("blockquote");
for (var i=0; i<quotes.length; i++) {
var source = quotes[i].getAttribute("cite");
if (source) {
var link = document.createElement("a");
link.setAttribute("href",source);
var text = document.createTextNode("source");//!?
link.appendChild(text);
var para = document.createElement("p");
para.className = "attribution";
para.appendChild(link);
quotes[i].appendChild(para);
}
}

jQuery
Interaction for the Masses

Just a few of jQuery's
Benefits
•Lets you move quickly from beginner to advanced
•Improves developer efficiency
•Excellent documentation // pats self on back
•Unobtrusive from the ground up
•Reduces browser inconsistencies
•At its core, a simple concept

Unobtrusive
jquery.js
custom.js
Behavior Content
index.html
Presentation
style.css

Reduces browser
inconsistencies
•Example:
Get the height of the viewport…

var x,y;
if (self.innerHeight) { // all except Explorer
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement &&
document.documentElement.clientHeight) {
// Explorer 6 Strict Mode
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) { // other Explorers
x = document.body.clientWidth;
y = document.body.clientHeight;
}
DOM Scripting

var x = $(window).width();
var y = $(window).height();
jQuery

Documentation &
Support
– API: api.jquery.com
– Forum: forum.jquery.com
– IRC: irc.freenode.net, #jquery
– Coming Soon: learn.jquery.com

Download
• Download at https://jquery.com/download/
• Or using jQuery with CDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js></script>

Simple Concept
• Find something
• Do something

Find Something
"Select" elements in the document

Do Something
1. Let elements "listen" for something to happen …
• the document is ready
• user does something
• another "listener" acts
• a certain amount of time elapses

Do Something
2. … and then do something
a. Manipulate elements
b. Animate elements
c. Communicate with the server

Dev Tools
• up to five browsers to test against
• Firefox
• Chrome
• Internet Explorer
• Safari
• Opera
• developer tools can make your life much easier

Browser Support
• Modernizr
• http://www.modernizr.com
• Can I Use?
• http://caniuse.com

Code Sharing
• jsfiddle
• http://jsfiddle.net/
• jsbin
• http://jsbin.com

• TextMate
• jQuery Bundle:
http://github.com/kswedberg
• JavaScript Tools Bundle:
http://github.com/subtleGradient
• Sublime Text 2
• MacVim
• Espresso
• jQuery Sugar:
• code.google.com/p/espresso-jquery-sugar
Text Editors
Mac OS X

• E
• jQuery Bundle:
http://github.com/kswedberg
• Eclipse / Aptana
• Notepad++
• Visual Studio
• and so on.
Text Editors
Windows

• Console
• DOMViewer
• JavaScript debugger
• Net view
• Lots of extensions
http://getfirebug.com/wiki/index.php/Firebug_Extensions
Firefox: Firebug

Chrome Developer
Tools
• In many ways, leapfrogging Firebug
• Live debugging, code changing
• Lots of "hidden" goodies
• http://code.google.com/chrome/devtools/
• Paul Irish screencast: http://youtu.be/nOEw9iiopwI

• Included since Safari 3.1
• Similar to Chrome Dev Tools, but not as advanced
• Activate via Preferences > Advanced
Safari: Developer Menu

• Much, much better than in previous versions.
• Finally includes a console.
Internet Explorer 8+:
Developer Tools

• CompanionJS:
tinyurl.com/companionjs
• IETester:
tinyurl.com/dbtester
• MS Developer Toolbar:
tinyurl.com/msdevtoolbar
• Script Debugger:
tinyurl.com/msscriptdebug
• None of them comes even close to the tools available in other
browsers
Internet Explorer <= 7

The Basics
• Strings: textual content. wrapped in quotation marks (single
or double).
• 'hello, my name is Karl'
• "hello, my name is Karl"
• Numbers: integer (2) or floating point (2.4) or octal (012) or
hexadecimal (0xff) or exponent literal (1e+2)
• Booleans: true or false
In JavaScript, you can work with the following things:

The Basics
• Arrays: simple lists. indexed starting with 0
• ['Karl', 'Sara', 'Ben', 'Lucia']
• ['Karl', 2, 55]
• [ ['Karl', 'Sara'], ['Ben', 'Lucia']]
• Objects: lists of key, value pairs
• {firstName: 'Karl', lastName: 'Swedberg'}
• {parents: ['Karl', 'Sara'], kids: ['Ben', 'Lucia']}
In JavaScript, you can work with the following things:

Variables
• Always declare your variables!
• If you don't, they will be placed in the global scope
(more about that later).
• bad: myName = 'Karl';
• good: var myName = 'Karl';
• still good: var myName = 'Karl';
// more stuff
myName = 'Joe';

Variable Scoping
• All var statements hoisted to
top of scope
function foo() {
var x;
x = 2;
// Same as:
function foo() {
x= 2
var x;
§ Two scopes: Global and function local
var globalVar;
function() {
var localVar;
if (globalVar > 0) {
var localVar2 = 2;
}
// localVar2 is valid here
}
localVar2 is hoisted
here but has value
undefined

Conditionals and
Operators
• conditionals:
• if, else
• switch
• operators:
• +, -, *, %, ++, --
• >, <, ==, !=, >=, <=, ===, !==
• !, &&, ||

Loops
• Loops iterate through a list of some kind.
• A common pattern in JavaScript is to build a list, or collection,
and then do something with each item in that list.

Loops
• CSS uses implicit iteration.
• div { color: red; } /* applies to ALL divs */
• JavaScript relies on explicit iteration. Must explicitly loop
through each div
• jQuery allows for both (because it does the looping for you)

Loops
• The two most common loops...
• for loops — for general-purpose iteration. Used with
arrays or array-like objects)
• for-in loops — used with arrays or objects (but don't use
with arrays)
• The other two are...
• while loops
• do-while loops

for (initial value; condition; increment) {
// code block
}
for Loops
• three statements and a code block
1. initial value
2. condition
3. increment

for Loops
for (var i = 0; i < 3; i++) {
alert(i+1);
}
This is your variable, so
it can be anything!
(but developers often
use “i”)

for Loops
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
// do something with each div individually
divs[i].style.color = 'red';
}

for Loops
// better to store length in variable first
var divCount = divs.length
for (var i = 0; i < divCount; i++) {
}

for Loops
// can store it directly in the initializer
for (var i=0, divCount=divs.length; i < divCount; i++) {
}

for-in Loops
var family = {
dad: 'Karl',
mom: 'Sara',
son: 'Benjamin',
daughter: 'Lucia'
}
for (var person in family) {
alert('The ' + person + ' is ' + family[person]);
}
This is your variable, so
it can be anything!

while and do-while
var i = 1;
while (i < 4) {
alert(i);
i++;
}
var j = 1;
// code block always executed at least once
do {
alert(j);
j++;
} while (j < 4)

The Basics: Functions
• Functions allow you to define a block of code, name that block, and
then call it later as many times as you want.
• function myFunction( ) { /* code goes here */ } // defining
• myFunction( ) // calling the function myFunction
• You can define functions with parameters
• function myFunction(param1, param2 ) { /* code goes here */ }
• You can call functions with arguments:
• myFunction('one', 'two')
In JavaScript, you can also work with functions:

Functions
// define a function
function doSomething() {
alert('I am something');
}
// call the function
doSomething();

Functions
function sumThing(a, b) {
return a + b;
}
alert( sumThing(1, 2) );

Functions
return a + b;
}
var mySum = sumThing(1, 2);
alert( mySum );

The arguments Object
• Every function has an arguments object
• a collection of the arguments passed to the function when
it is called
• an "array-like object" in that it is indexed and has a length
property but can't attach array methods to it
• can be looped through
• allows for variable number of arguments

Functions
function logThing() {
for (var i=0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
logThing(1, 2, 'three');
/* prints to the console:
>> 1
>> 2
>> three
*/

Exercise
Convert the sumThing function to allow for
variable number of arguments.
return a + b;
}
Use a for loop to loop through the arguments object, adding to a
"sum" variable with each iteration.
After the loop, return sum.

(Simple) Solution
function sumThing() {
var sum = 0,
countArgs = arguments.length;
for (var i = 0; i < countArgs; i++) {
sum += arguments[i];
}
return sum;
}
console.log( sumThing(1, 2, 4 ) );

function multiple(n) {
function f(x) {
return x * n;
}
return f;
}
var triple = multiple(3);
var quadruple = multiple(4);
console.log( triple(5) ); // 15
console.log( quadruple(5) ); // 20
console.log( multiple(4)(5) ); // 20
Returning Functions
• Functions can return other functions

Named vs.Anonymous
Functions
• Named:
• function foo() { } // function declaration
• var foo = function foo() { }; // function expression
• Anonymous:
• var foo = function() { }; // function expression

Anonymous Functions
• Prevalent in jQuery
• Good for creating closures
• Used as "callback" functions
• Can be used as object properties (methods)
• let’s take a look ...

$(document).ready(function() {
});
Anonymous Functions
• Prevalent in jQuery

function() {
// variables are defined within this scope
// avoid name collisions
}
Anonymous Functions

(function() {
// variables are defined within this scope
// avoid name collisions
})();
Anonymous Functions
• Can be defined and then immediately invoked: “immediately
invoked function expression,” ( a.k.a. IIFE; pronounced “iffy”)

(function($) { // "$" is the function's param
})(jQuery); // function is called with "jQuery"
Anonymous Functions
• Used by plugins to keep jQuery safe.

$('p').slideDown('slow', function() {
// code in here is not executed
// until after the slideDown is finished
// jQuery calls the code in here when effect
ends
});
Anonymous Functions
• Used as "callback" functions

Objects
• Objects are objects : { }
• Arrays are objects : [ ]
• even Functions are objects : function( ) { }
• jQuery is an object
• Numbers, strings, and booleans (true/false) are primitive data
types, but they have object wrappers.
In JavaScript, everything is an object. Well, almost everything.

Global Object
• location
• parseInt(); parseFloat()
• isNaN()
• encodeURI(); decodeURI()
• setTimeout(); clearTimeout()
• setInterval(); clearInterval()
In the browser environment, the global object is window
It collects all functions and variables that are global in scope.
Usually implied.
Comes with some useful properties and methods:

Date Object
var now = new Date(); // current date and time
var then = new Date('08/12/2000 14:00');
console.log( then.getTime() ); // 966103200000
console.log( then.toString() );
// Sat Aug 12 2000 14:00:00 GMT-0400 (EDT)
console.log( then.getMonth() ); // 7 !!!!

RegExp Object
Regular Expression
• Object constructor
• var re = new RegExp('hello');
• Regular expression literal
• var re = /hello/;

Creating a RegExp
• Object constructor
• var re = new RegExp('hello');
• Regular expression literal
• var re = /hello/;

Using a RegExp
var text = 'The quick brown fox';
var re = new RegExp('quick');
console.log( re.test(text) ); // true
console.log( /brown/.test(text) ); // true
console.log( /red/.test(text) ); // false

RegExp Syntax
• Most characters (incl. all alphanumerics) represent themselves
• Special characters can be escaped with a backslash ()

Character Classes
• /t.p/ matches 'tap' and 'tip' and 'top'
• /t[ai]p/ matches 'tap' and 'tip', not 'top'
• /t[a-k]p/ matches 'tap' and 'tip', not 'top'
• /t[^m-z]p/ matches 'tap' and 'tip', not 'top'

Repetition
• /frog*/ matches 'fro', 'frog', 'frogg', ...
• /frog+/ matches 'frog', 'frogg', ...
• /frog?/ matches 'fro' or 'frog'
• /frog{2,3}/ matches 'frogg' or 'froggg'

Grouping
• Grouping
• /(frog)*/ matches "frog" or "frogfrog"
• Alternation
• /th(is|at)/ matches "this" and "that"

Anchor Points
• ^ matches the beginning of a string
• $ matches the end of a string
• b matches word boundaries

Exercises
Write a regular expression that matches any word that starts
with a vowel.
Write a regular expression that matches any HTML tag.

String RegExp Methods
• str.search(re)
• str.match(re)
• str.replace(re, replacement)
• str.split(re)

String Replacement
var str =
'The quick brown fox jumps over the lazy dog.';
console.log(str.replace(/[aeiou]/, '*'));
// Th* quick brown fox jumps over the lazy dog.

RegExp Flags
• Placed after closing / character
• Global (g): find as many as possible
• Case insensitive (i)
• Multiline (m): ^ and $ work with newlines

String Replacement
var str =
'The quick brown fox jumps over the lazy dog.';
console.log(str.replace(/[aeiou]/g, '*'));
// Th* q**ck br*wn f*x j*mps *v*r th* l*zy d*g.
console.log(str.replace(/the/gi, 'a'));
// a quick brown fox jumps over a lazy dog.

Backreferences
var str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.replace(/r(.)/g, '$1x'));
// The quick boxwn fox jumps ove xthe lazy dog.

Replacement Functions
var str = 'Kill 5+9 birds with 2+5 stones.';
function add(match, first, second) {
return parseInt(first, 10) + parseInt(second, 10);
}
str = str.replace(/([0-9]+)+([0-9]+)/g, add);
console.log(str);
// Kill 14 birds with 7 stones.

Exercises
Write a function that uppercases all the vowels in a
string.
Write a function that strips the angle brackets from
around any HTML tags in a string.

Greediness
• Repeat operators usually match as much of the string as
possible; they are greedy
• JavaScript supports reluctant repetition as well
• Append ? to the repeat operator

And Much More
• JavaScript supports most Perl regular expression extensions
• POSIX character classes
• Unicode character escapes
• Look-ahead assertions

Math Object
• Not a constructor, a singleton
• Gathers useful methods and properties
• Math.PI
• Math.abs(), Math.sin(), Math.pow(),
Math.random(),
• Math.max(), Math.min()
• Math.round(), Math.floor(), Math.ceil()

CSS:
h3 {
font-size: 1.2em;
line-height: 1;
}
JS:
var h3 = {
fontSize: '1.2em',
'line-height': 1
};
CSS Tip
• Object literal notation looks a lot like CSS style rule notation!

var person = {
firstName: 'Karl',
lastName: 'Swedberg',
hello: function() {
return 'Hello, my name is ' +
this.firstName + ' ' + this.lastName;
}
};
Object Literals
• person is the object
• firstName and lastName are properties
• hello is a method (a property that is a function)

var person = {
firstName: 'Karl',
hello: function() {
},
interests: {
athletic: ['racquetball', 'karate', 'running'],
musical: ['rock', 'folk', 'jazz', 'classical']
}
};
Object Literals
• interests is a property and an object

Object Literals
var person = {
firstName: 'Karl',
hello: function() {
} // ⬅ notice, no comma here!
};

Object Literals
“dot” notation
var person = {
firstName: 'Karl',
hello: function() {
}
};
// "dot" notation
person.firstName; // 'Karl'
person.lastName; // 'Swedberg'
person.hello() // 'Hello, my name is Karl Swedberg'

Object Literals
array notation
var person = {
firstName: 'Karl',
hello: function() {
}
};
// array notation
person['firstName']; // 'Karl'
person['lastName']; // 'Swedberg'
person['hello']() // 'Hello, my name is Karl Swedberg'

var person = {
firstName: 'Karl',
hello: function() {
},
interests: {
athletic: ['racquetball', 'karate', 'running'],
musical: ['rock', 'folk', 'jazz', 'classical']
}
};
// person['interests']['musical'][1] == ??
// == person.interests.musical[1]
Object Literals

Object Literals
var person = {
firstName: 'Karl',
hello: function() {
}
};
person.firstName = 'Karl';
var prop = 'firstName';
person[ prop ]; // 'Karl'
prop = 'lastName';
person[ prop ]; // 'Swedberg'

Object Literals
var blah;
var person = {
firstName: 'Karl',
hello: function() {
}
};
for (var el in person) {
blah = typeof person[el] == 'function' ?
person[el]() :
person[el];
console.log( blah );
}

doSomething({
speed: 'fast',
height: 500,
width: 200,
somethingElse: 'yes'
});
doSomething({width: 300});
Object Literals
• Great as function arguments
• single argument allows flexibility when calling the function

JSON
JavaScript Object Notation
• a data interchange format. In other words, a format for passing
data back and forth
• “discovered” and popularized by Douglas Crockford
• a subset of JavaScript Object Literal Notation
• a tree-like structure of object(s) and/or array(s)
• no functions
• all strings, including object keys, take double quotes

JSON
{
"firstName": "Karl",
"lastName": "Swedberg",
"age": 24,
"interests": {
"athletic": [
"racquetball",
"karate"
]
}
}

JSON
{"firstName":"Karl","lastName":"Swedberg","age":24,"intere
sts":{"athletic":["racquetball","karate"]}}

Referencing Scripts
in the HTML
browser slides

At the heart of jQuery...
• Find something
• Do something

CSS Selectors
• element {}
• #id {}
• .class {}
• selector1, selector2 {}
• ancestor descendant {}
• parent > child {}
• :nth-child() {}

CSS Selectors
• $('element')
• $('#id')
• $('.class')
• $('selector1, selector2')
• $('ancestor descendant')
• $('parent > child')
• $(':nth-child(n)')
(jQuery Equivalents)

CSS Selectors
• $('element')
• $('#id')
• $('.class')
• $('selector1, selector2')
• $('ancestor descendant')
• $('parent > child')
• $(':nth-child(n)')
(jQuery Equivalents)
• and others …
• $('prev + selector')
• $('prevAll ~
selector')$(':nth-
child(an+b')$(':not(selector)
')
• $(':checked')
• $(':disabled')

CSS Attribute Selectors
• $('input[name=firstname[]]')
• $('[title]') has the attribute
• $('[attr="val"]') attr equals val
• $('[attr!="val"]') attr does not equal val
• $('[attr~="val"]') attr has val as one of space-sep. vals
• $('[attr^="val"]') attr begins with val
• $('[attr$="val"]') attr ends with val
• $('[attr*="val"]') attr has val anywhere within

Custom Form Selectors
• $('div.myclass :checkbox')
• $(':input') <input>, <textarea>, <select>,
<button>
• $(':text') <input type="text">
• $(':radio') <input type="radio">
• $(':button') <input type="button">, <button>
• $(':selected') <option selected="selected">
• etc.

Custom Misc. Selectors
• $(':animated')
• $(':has(descendant)')
• $(':eq(n)')
• $(':lt(n)')
• $(':gt(n)')
• $(':even')
• $(':odd')
• $(':visible')
$(':hidden')$(':header')$(':
contains(string)')

Selectors
• List of all selectors on the jQuery API site
• http://api.jquery.com/category/selectors

Traversal Methods
• Move Up
• Move Sideways
• Move Down
• Filter
• Context
• Check

<ul> <li>level 1 <ul class="foo"> <li>level 2
<ul> <li class="bottom"><span>level</span>
3</li> </ul> </li> </ul> </li></ul>
Move Up
• parent() : up one level $('li.bottom').parent();
• parents() : up multiple levels $('span').parents('ul');
• parentsUntil() : possibly multiple $('span').parentsUntil('ul');

<ul> <li>level 1 <ul> <li>level 2 <ul>
<li class="bottom"><span>level</span> 3</li>
</ul> </li> </ul> </li></ul>
Move Up
• .closest(selector) : up 0 or more levels
• $('span').closest('ul');
• $('.bottom').closest('li');

Move Sideways
• .siblings()
• .next()
• .nextAll()
• .nextUntil()
• .prev()
• .prevAll()
• .prevUntil()

Move Down
• .children()
• .find()

Filter
• .filter(selector)
• .filter('.some-class')
• .filter(function)
• .filter(function() {
• return $(this).parents('li').length >=
2;
• });

Filter
• .not(selector)
• .not('.some-class')
• .not(function)
• .not(function() {
• return $(this).parents('li').length >=
2;
• });

Filter
• .slice()
• .slice(2)
• .slice(-2)
• .slice(3, 6)
• .slice(2, -1)
• .eq()
• .eq(2)
• .eq(-2)

Context
• $('selector', 'context')
• Different from "or" selector – $('selector1, selector2')
• Same as $('context').find('selector')
• Not worth using; too confusing.
• .add()
• .andSelf()
• .end()

Check
• .hasClass(class)
• .is(selector)
** returns a boolean

Traversal Methods
• List of all traversal methods on the jQuery API site
• http://api.jquery.com/category/traversing

Chaining
• JavaScript has chaining built in.
• 'swap this text'.replace(/w/, 'n').replace(/this/,'that');
• '616-555-1212'.split('-').join('.');
• jQuery takes advantage of this concept by having almost all
methods return the jQuery object.

$('a').parent('li').siblings().find('a')
Chaining
• Chain traversal methods together

$('a').removeClass('old').addClass('new');
Chaining
• Attach multiple behaviors.

$('a').addClass('foo').parent('li').removeClass('foo')
Chaining
• DOM Traversal methods are different from other jQuery chaining
methods!
• New jQuery instance is created with each one.

var lis = $('.container li:first')
.addClass('first-li')
.next()
.addClass('second-li')
.end()
.nextAll()
.addClass('not-first-li')
.end(); // unnecessary; added for symmetry
Chaining
• JavaScript ignores white space, so use it to your advantage.

$('li').removeClass('myclass'); //implicit
$('li').each(function(index) { //explicit
$(this).append( ' #' + (index+1) );
});
Looping
• Implicit Iteration
• Explicit Iteration (Looping)

$('li').each(function() {
console.log( this ); // DOM element
console.log( $(this) );
});
this Keyword
• Refers to the current object
• jQuery sets this to matched elements in the jQuery object.

var $listItems = $('li');
var numItems = $listItems.length
//no need for length check
$listItems.addClass('pretty');
if (numItems) {
// do something with other elements
}
Tips
• Store selectors used more than once in variables
• Use length property to check existence
• ...but often no need for the check

$('#menu li').each(function(index) {
$(this).click(function() {
$('#footer li:eq(' + index + ')')
.addClass('active');
});
});
Tips
• Concatenate to pass in a variable

// bad
$(':checkbox')
// better
$('input:checkbox')
// best
$('input[type="checkbox"]')
Tips
• Avoid jQuery's custom selectors when possible

// uncool
$('div:first')
// cool
$('div').first();
Tips

// slower
$('li:eq(3)')
$('li:lt(3)')
// faster
$('li').eq(3)
$('li').slice(0, 3)
Tips

$(document).ready(function(){
//…
});
When the DOM is ready…
• Fires when the document is ready for
programming.
• Uses advanced listeners for detecting.
• window.onload() is a fallback.

// execute always
$(“div”).bind(“click”, fn);
// execute only once
$(“div”).one(“click”, fn);
Attach Event
Possible event values:
blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick,
mousedown, mouseup, mousemove, mouseover, mouseout,
mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
(or any custom event)

jQuery.Event object
https://api.jquery.com/category/events/

$(“div”).unbind(“click”, fn);
Detaching Events
(Unique ID added to every attached function)

$(“div”).trigger(“click”);
Events Triggering
Triggers browser’s event action as well.
Can trigger custom events.
Triggered events bubble up.

// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()
Events Helpers
And many others…

// use different triggering function
$(“div”).triggerHandler(“click”);
Preventing Browser Default Action
// prevent default action in handler
function clickHandler(e) {
e.preventDefault();
}
// or just return false
function clickHandler(e) {return false;}

// stop bubbling, keep other handler
e.stopPropagation();
}
Preventing Bubbling
// stop bubbling and other handlers
e.stopImmediatePropagation();
}
// or just return false
function clickHandler(e) {return false;}

Lecture 03 - JQuery.pdf

More Related Content

Similar to Lecture 03 - JQuery.pdf (20)

More from Lê Thưởng (18)

Recently uploaded (20)

Lecture 03 - JQuery.pdf