Wednesday, 28 April 2010   1
What are we talking about




Wednesday, 28 April 2010              2
What are we talking about
                           client side scripting implemented as part of a
                      ...
What are we talking about
                           client side scripting implemented as part of a
                      ...
What are we talking about
                           client side scripting implemented as part of a
                      ...
Why should I care?
                           “JavaScript sucks”




Wednesday, 28 April 2010                         3
Why should I care?
                           “JavaScript sucks”
                             it’s different - prototypal ...
Why should I care?
                           “JavaScript sucks”
                             it’s different - prototypal ...
Why should I care?
                           “JavaScript sucks”
                             it’s different - prototypal ...
Why should I care?
                           “JavaScript sucks”
                             it’s different - prototypal ...
Demo




Wednesday, 28 April 2010                                                           4

DOM selection and Cross Bro...
What is jQuery?

                           "jQuery is a fast and concise JavaScript
                           Library th...
What is jQuery?




Wednesday, 28 April 2010                     6
What is jQuery?

                           A fast concise library with an OO interface




Wednesday, 28 April 2010      ...
What is jQuery?

                           A fast concise library with an OO interface

                           Featur...
CSS3 Compliant???




Wednesday, 28 April 2010                       7
CSS3 Compliant???
                           We really mean “selectors” as in DOM
                           selection



...
CSS3 Compliant???
                           We really mean “selectors” as in DOM
                           selection

  ...
CSS3 Compliant???
                           We really mean “selectors” as in DOM
                           selection

  ...
CSS Selector
                                                                    Demo
                                    ...
CSS3 Compliant???
                           We really mean “selectors” as in DOM
                           selection

  ...
jQuery Core Concepts
                           $()

                           Get then Act

                           C...
$() = jQuery()
                           $ is a jquery object.

                           $ is used to keep the code sho...
Chainability
                           Get then Act

                           Chainability

                           ...
Hello world
                                                     Demo




Wednesday, 28 April 2010                        ...
BrightTALK Conventions




Wednesday, 28 April 2010                    14

Check time
BrightTALK Conventions
                           $.bt




Wednesday, 28 April 2010                    14

Check time
BrightTALK Conventions
                           $.bt

                           filenames




Wednesday, 28 April 2010  ...
BrightTALK Conventions
                           $.bt

                           filenames

                             ...
BrightTALK Conventions
                           $.bt

                           filenames

                             ...
BrightTALK Conventions
                           $.bt

                           filenames

                             ...
BrightTALK Conventions
                           $.bt

                           filenames

                             ...
BrightTALK Conventions
                           $.bt              Reasons

                           filenames

        ...
BrightTALK Conventions
                           $.bt              Reasons

                           filenames          ...
BrightTALK Conventions
                           $.bt              Reasons

                           filenames          ...
$.bt




Wednesday, 28 April 2010          15

PS take over
$.bt
                     namespace - globals are evil




Wednesday, 28 April 2010                            15

PS take...
$.bt
                     namespace - globals are evil

                     static functions




Wednesday, 28 April 2010...
$.bt
                     namespace - globals are evil

                     static functions

                     public...
$.bt
                     namespace - globals are evil

                     static functions

                     public...
$.bt
                     namespace - globals are evil

                     static functions

                     public...
$.bt
                     namespace - globals are evil

                     static functions

                     public...
$.bt
                                                   Demo




Wednesday, 28 April 2010                                 ...
.bind() & custom events

                           The .bind() method is the primary means of
                           ...
Creating custom event

                           Creating custom event.
            $(document).bind('foo', function() {
...
Custom Event
                                                         Demo



Wednesday, 28 April 2010                    ...
jQuery plugins
                           Learn how to write plugins

                             http://docs.jquery.com/...
Plugin
                                            Demo



Wednesday, 28 April 2010                             21
Check t...
Upcoming SlideShare
Loading in...5
×

Jquery Introduction

826

Published on

A brown bag presentation we did at BrightTALK about jQuery, covers the basics and how we use it.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
826
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jquery Introduction

  1. 1. Wednesday, 28 April 2010 1
  2. 2. What are we talking about Wednesday, 28 April 2010 2
  3. 3. What are we talking about client side scripting implemented as part of a browser to provide: Wednesday, 28 April 2010 2
  4. 4. What are we talking about client side scripting implemented as part of a browser to provide: enhanced UI Wednesday, 28 April 2010 2
  5. 5. What are we talking about client side scripting implemented as part of a browser to provide: enhanced UI dynamic websites Wednesday, 28 April 2010 2
  6. 6. Why should I care? “JavaScript sucks” Wednesday, 28 April 2010 3
  7. 7. Why should I care? “JavaScript sucks” it’s different - prototypal inheritance Wednesday, 28 April 2010 3
  8. 8. Why should I care? “JavaScript sucks” it’s different - prototypal inheritance DOM is key BUT “sucks” Wednesday, 28 April 2010 3
  9. 9. Why should I care? “JavaScript sucks” it’s different - prototypal inheritance DOM is key BUT “sucks” Element selection sucks Wednesday, 28 April 2010 3
  10. 10. Why should I care? “JavaScript sucks” it’s different - prototypal inheritance DOM is key BUT “sucks” Element selection sucks x-Browser DOM sucks Wednesday, 28 April 2010 3
  11. 11. Demo Wednesday, 28 April 2010 4 DOM selection and Cross Browser DOM selection code demo var objById = getElementById('id'); var objById = $('#id'); var firstParagraph = getElementByTagName('p')[0]; var firstParagraph = $('p:first'); /////////// example cross browser functions //// /********************************************************************* * Get an object, this function is cross browser * Usage: * var object = get_object(element_id); * @Author Hamid Alipour http://blog.code-head.com/ **/ function get_object(id) { var object = null; if (document.layers) { // Mozilla 4.0 based browsers object = document.layers[id]; } else if (document.all) { // IE6 object = document.all[id]; } else if (document.getElementById) { // Modern browsers object = document.getElementById(id); } return object; } /*********************************************************************/ var obj = get_object('id'); // jquery var obj = $('#id');
  12. 12. What is 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 is designed to change the way that you write JavaScript." http://jquery.com “Write less, do more” Wednesday, 28 April 2010 5
  13. 13. What is jQuery? Wednesday, 28 April 2010 6
  14. 14. What is jQuery? A fast concise library with an OO interface Wednesday, 28 April 2010 6
  15. 15. What is jQuery? A fast concise library with an OO interface Features Lightweight Cross-browser CSS3 Compliant Wednesday, 28 April 2010 6
  16. 16. CSS3 Compliant??? Wednesday, 28 April 2010 7
  17. 17. CSS3 Compliant??? We really mean “selectors” as in DOM selection Wednesday, 28 April 2010 7
  18. 18. CSS3 Compliant??? We really mean “selectors” as in DOM selection Starts with CSS2 Wednesday, 28 April 2010 7
  19. 19. CSS3 Compliant??? We really mean “selectors” as in DOM selection Starts with CSS2 Id, Class, Type, Universal, Grouping, Descendant, Child, Adjacent Sibling, Attribute, etc. Wednesday, 28 April 2010 7
  20. 20. CSS Selector Demo Id, Class, Type, Universal, Grouping, Descendant, Child, Adjacent Sibling, Attribute, etc. Wednesday, 28 April 2010 8 CSS Selector Demo with CSS code From to http://www.w3.org/TR/CSS2/selector.html Id #idvalue { font-family: sans-serif; } Class .classname { font-family: Sans-Serif; } .classone.classtwo { font-family: Sans-Serif; } Grouping h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } is equivalent to: h1, h2, h3 { font-family: sans-serif } Descendant For example, consider the following rules: h1 { color: red } em { color: red } Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as: <H1>This headline is <EM>very</EM> important</H1> We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1: h1 { color: red } em { color: red } h1 em { color: blue } The third rule will match the EM in the following fragment: <H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1> Child The following rule sets the style of all P elements that are children of BODY: body > P { line-height: 1.3 }
  21. 21. CSS3 Compliant??? We really mean “selectors” as in DOM selection Start with CSS2 More at http://api.jquery.com/category/selectors/ http://www.w3.org/TR/CSS2/selector.html http://www.w3.org/TR/css3-selectors/ http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ http://www.w3schools.com/css/css_examples.asp Wednesday, 28 April 2010 9
  22. 22. jQuery Core Concepts $() Get then Act Chainability $("p.neat").addClass("ohmy").show("slow"); Wednesday, 28 April 2010 10 KS take over here
  23. 23. $() = jQuery() $ is a jquery object. $ is used to keep the code shorter, javascript is downloaded $(selector) is how you get an element as a jQuery object. Wednesday, 28 April 2010 11
  24. 24. Chainability Get then Act Chainability jQuery has chainablity of commends you can link one commend to an other $("p.neat").addClass("ohmy").show("slow"); $('#boo').filter(':funny').addClass('funny').css('color', 'red').show(); Wednesday, 28 April 2010 12
  25. 25. Hello world Demo Wednesday, 28 April 2010 13 jQuery DOM selection (get) then act (PS do) http://jquery.com - show this demo do a couple different things ask what is the code going to do, discuss and run, then ask for do something different?
  26. 26. BrightTALK Conventions Wednesday, 28 April 2010 14 Check time
  27. 27. BrightTALK Conventions $.bt Wednesday, 28 April 2010 14 Check time
  28. 28. BrightTALK Conventions $.bt filenames Wednesday, 28 April 2010 14 Check time
  29. 29. BrightTALK Conventions $.bt filenames bt.XXX.js Wednesday, 28 April 2010 14 Check time
  30. 30. BrightTALK Conventions $.bt filenames bt.XXX.js jquery.XXX.js Wednesday, 28 April 2010 14 Check time
  31. 31. BrightTALK Conventions $.bt filenames bt.XXX.js jquery.XXX.js custom events Wednesday, 28 April 2010 14 Check time
  32. 32. BrightTALK Conventions $.bt filenames bt.XXX.js jquery.XXX.js custom events plugins Wednesday, 28 April 2010 14 Check time
  33. 33. BrightTALK Conventions $.bt Reasons filenames bt.XXX.js jquery.XXX.js custom events plugins Wednesday, 28 April 2010 14 Check time
  34. 34. BrightTALK Conventions $.bt Reasons filenames reusable bt.XXX.js jquery.XXX.js custom events plugins Wednesday, 28 April 2010 14 Check time
  35. 35. BrightTALK Conventions $.bt Reasons filenames reusable bt.XXX.js maintable jquery.XXX.js custom events plugins Wednesday, 28 April 2010 14 Check time
  36. 36. $.bt Wednesday, 28 April 2010 15 PS take over
  37. 37. $.bt namespace - globals are evil Wednesday, 28 April 2010 15 PS take over
  38. 38. $.bt namespace - globals are evil static functions Wednesday, 28 April 2010 15 PS take over
  39. 39. $.bt namespace - globals are evil static functions public / private conventions Wednesday, 28 April 2010 15 PS take over
  40. 40. $.bt namespace - globals are evil static functions public / private conventions $.bt.publicFunction Wednesday, 28 April 2010 15 PS take over
  41. 41. $.bt namespace - globals are evil static functions public / private conventions $.bt.publicFunction $.bt._privateFunction Wednesday, 28 April 2010 15 PS take over
  42. 42. $.bt namespace - globals are evil static functions public / private conventions $.bt.publicFunction $.bt._privateFunction common way to extend bt object Wednesday, 28 April 2010 15 PS take over
  43. 43. $.bt Demo Wednesday, 28 April 2010 16 extension demo (PS) examples - discuss good and bad good - doesn’t pollute global name space bad - still global static functions just namespaced - leads to tight coupling early prototype jquery.btuser better example bt.operations.js
  44. 44. .bind() & custom events The .bind() method is the primary means of attaching behavior to a document. All JavaScript event types, such as focus, mouseover, and resize, are allowed for eventType. With the help of .bind we can create our custom events. Wednesday, 28 April 2010 17 KS take over
  45. 45. Creating custom event Creating custom event. $(document).bind('foo', function() { alert('hello world'); }) Calling custom event $(document).trigger("foo"); Wednesday, 28 April 2010 18
  46. 46. Custom Event Demo Wednesday, 28 April 2010 19 Custom event - login handler vs registration, date time locale conversion (KS DO) $(document).bind("myCustomEvent", function(e, myName, myValue){       $(this).text(myName + ", hi there!");       $("span").stop().css("opacity", 1)                .text("myName = " + myName)                .fadeIn(30).fadeOut(1000);     });  $("button").click(function () {     $(document).trigger("myCustomEvent", [ "John" ]);   }); /// BRIGHTTALK  $(document).bind('localiseDate', function(e) {    $.btTimeZone.updateDateItem(0, e.target);  });  $('#csv-report-date', $('#report-XXX')).trigger("localiseDate", jQuery(this));
  47. 47. jQuery plugins Learn how to write plugins http://docs.jquery.com/Plugins/Authoring Find plugins at http://plugins.jquery.com/ Custom plugins on the platform csvreport Benefits vs static functions Wednesday, 28 April 2010 20
  48. 48. Plugin Demo Wednesday, 28 April 2010 21 Check time (prob not time for this) Walkthrough CSVreport or jquery docs authoring page??

×