2. Jquery
▪ jQuery is a fast and concise JavaScript
Library that simplifies HTML document
traversing, event handling, animating, and
Ajax interactions for rapid web
development. (jQuery.com)
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
3. Documentation & Support
API: api.jquery.com
Forum: forum.jquery.com
IRC: irc.freenode.net, #jquery
http://www.codecademy.com/en/courses/you-
and-jquery/0/1
https://www.codeschool.com/courses/try-
jquery
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
4. Simple Concept
▪ Find something
▪ Do something
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
7. Find something
// id selector
var elem = $("#myid");
// group selector
var elems = $("#myid p");
// context selector
var elems = $("#myid > div p");
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
8. jQuery / javascript comparison
Javascript jquery
getElementById(“id”) $(“#id”)
getElementByClassName(“class”) $(“.class”)
getElementByName(“somename”) $(“[name=„somename‟]”)
getElementByTagName(“tag”) $(“tag”)
querySelector(“selector”) $(“selector”)
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
10. 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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
11. Do something
2.… and then do something
Manipulate elements
Animate elements
Communicate with the server
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
13. Text Editors
▪ Eclipse / Aptana
▪ Notepad++
▪ Visual Studio
▪ NetBean
▪ and so on.
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
14. Firefox: firebug
▪ Console
▪ DOM Viewer
▪ JavaScript debugger
▪ Net view
▪ Lots of extensions
http://getfirebug.com/wiki/index.php/Firebug
_Extensions
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
15. 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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
17. The basic
▪ Strings: textual content. wrapped in
quotation marks (single or double).
▪ Numbers: integer (2) or floating point
(2.4)
▪ Booleans: true or false
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
18. The basic
▪ 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']}
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
19. The basic
▪ Always declare your variables!
▪ If you don't, they will be placed in the
global scope .
–bad: myName = 'Karl';
–good: var myName = 'Karl';
–still good: var myName = 'Karl‟,
myName = 'Joe';
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
21. The basic
LOOP
▪ 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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
23. function
▪ 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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
24. function
▪ You can define functions with
parameters
–function myFunction(param1, param2 )
{ /* code goes here */ }
▪ You can call functions with arguments:
–myFunction('one', 'two')
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
28. Tips
▪ Store selectors used more than once in variables
▪ Use length property to check existence
– ...but often no need for the check
▪ var listItems = $('li');
▪ var numItems = $listItems.length
//no need for length check
$listItems.addClass('pretty');
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
29. Tips
Concatenate to pass in a variable
$('#menu li').each(function(index) {
$(this).click(function() {
$('#footer li:eq(' + index + ')').addClass('active');
});
});
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
30. Tips
▪ Avoid jQuery's custom selectors when possible
// bad
$(':checkbox')
// better
$('input:checkbox')
// best
$('input[type="checkbox"]')
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City