SlideShare une entreprise Scribd logo
1  sur  48
jQuery Fundamentals
    rebecca@rebeccamurphey.com
         @rmurphey on Twitter
http://delicious.com/rdmey/jquery-class
Housekeeping
• ftp: [yourname].jqueryclasses.com

• username: yourname@jqueryclasses.com

• password: jquery!class
In the beginning,
there was JavaScript
             http://www.flickr.com/photos/freeparking/476376873/
Enter jQuery




               http://www.flickr.com/photos/timsnell/513274898/
• Reads   like what you mean

• Simplifies   cross-browser issues

• Huge    community & plugin ecosystem
JavaScript 101
Because there’s lots of stuff you still need to know.
Operators and logic
Objects


• Booleans, strings, numbers,
 arrays, and functions are all
 objects

• Objects are a good way of
 organizing your code



                                 http://www.flickr.com/photos/oxido1180/2685774194/
true



a boolean
Booleans (true/false)
• Lots    of things are “truthy”

  • true

  • '0'   (or any non-empty string)

  •1     (or any non-zero number)

  • any    array, even empty ones

  • any    object, even empty ones
Booleans (true/false)
•   A few things are “falsy”

    • false

    •0

    • undefined

    • null

    • ''   (an empty, zero-length string)

    • NaN      (“not a number,” the result of illegal math operations)
‘hello’



a string
42



a number
['hello', 'world']



an array
function() { }



a function
Functions
• Functions   can take arguments, but they don't have to

• Functionscan return anything, including other functions -- but
 they don't have to return anything

• Functions   can be assigned to variables

• Functions
         can be passed to other functions by name, or as
 anonymous functions

• Functions   are normally called by putting () after their name
Variable scope




                 http://www.flickr.com/photos/8/12978541/
Closures




           http://www.flickr.com/photos/gadl/272562772/
jQuery
In a nutshell


• Get   some elements

• Do    something to them




                            http://www.flickr.com/photos/exfordy/1184487050/
$()
Selectors
http://docs.jquery.com/Selectors
Chaining
           http://www.flickr.com/photos/itsgreg/315015695/
Events
        http://docs.jquery.com/Events
http://docs.jquery.com/Events/jQuery.Event
$('a.foo').click(function(e) {

 e.preventDefault();

 var $this = $(this);

 $this.css({ color : 'red' });

 console.log('You clicked a link that points to ' +

 
 $this.attr('href'));
});




when an a.foo link is clicked, prevent the default action,
color the link red, and tell the user where the link pointed to
CSS
Manipulating
          http://www.flickr.com/photos/nnova/3373350948/
Traversing
        http://www.flickr.com/photos/jenny-pics/3258777653/
Effects
          http://www.flickr.com/photos/foxypar4/2153422313/
XHR
      http://www.flickr.com/photos/timsnell/513274898/
XHR basics
• type: GET     or POST

• url: a   fully qualified or relative URL

• data: object   or query string

• dataType: text, html, xml, json, jsonp, script

• callback: function   to run when data is received
POST or GET?
• POST  when you want to
 change something on the
 server

• GET when you just want to
 get something from the
 server




                              http://www.flickr.com/photos/14511253@N04/3298001461/
POST or GET?
• POST  when you want to
 change something on the
 server

• GET when you just want to
 get something from the
 server




                              http://www.flickr.com/photos/14511253@N04/3298001461/
More options with $.ajax()
• async

• error   callback

• timeout

• cache

• header        modification

• more    ...

                              http://www.flickr.com/photos/jeet_sen/1691759831/
XHR events
• ajaxStart

• ajaxStop

• ajaxComplete

• ajaxError

• ajaxSend

• ajaxSuccess
$('#loading')

 .ajaxStart(function() {

 
 $(this).show();

 })

 .ajaxStop(function() {

 
 $(this).hide();

 });
Utility Methods
          http://www.flickr.com/photos/geoftheref/2486112196/
Plugin authoring
Plugins
• Extend   core jQuery

 • $.myPlugin()

• Extend   jQuery object methods

 • $('#foo')
   .myPlugin()
Extending object methods
• Chainability

• Options   & defaults

• Callbacks
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(

    
 jQuery.fn.myPlugin.defaults,

    
 options

    );


    return this.each(function() {

    
 // ...

    });

};




basic concept of a jQuery object method
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(

    
 jQuery.fn.myPlugin.defaults,

    
 options

    );


    return this.each(function() {

    
 // ...

    });

};




naming the plugin
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(

    
 jQuery.fn.myPlugin.defaults,

    
 options

    );


    return this.each(function() {

    
 // ...

    });

};




setting the defaults for the plugin
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(

    
 jQuery.fn.myPlugin.defaults,

    
 options

    );


    return this.each(function() {

    
 // ...

    });

};




overriding the defaults with user-defined options
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(

    
 jQuery.fn.myPlugin.defaults,

    
 options

    );


    return this.each(function() {

    
 // ...

    });

};




enabling chaining
jQuery.fn.hrefToContents = function(options) {


    return this.each(function() {

    
 $(this).text($(this).attr('href'));

    });

};




a plugin that requires iteration
jQuery.fn.hoverClass = function(c) {

 return this.hover(

 
 function() {

 
 
 $(this).addClass(c);

 
 },

 
 function() {

 
 
 $(this).removeClass(c);

 
 }

 );
};




a plugin that doesn't require iteration
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 callback : function() { alert('done'); }

 };


    var settings = $.extend(

    
 jQuery.fn.myPlugin.defaults,

    
 options

    );


    this.each(function() {

    
 // ...

    });


    jQuery.fn.myPlugin.defaults.callback();


    return this;
};



adding a callback

Contenu connexe

Tendances

Delivering a Responsive UI
Delivering a Responsive UIDelivering a Responsive UI
Delivering a Responsive UIRebecca Murphey
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony AppsKris Wallsmith
 
Doctrine For Beginners
Doctrine For BeginnersDoctrine For Beginners
Doctrine For BeginnersJonathan Wage
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeRebecca Murphey
 
Love and Loss: A Symfony Security Play
Love and Loss: A Symfony Security PlayLove and Loss: A Symfony Security Play
Love and Loss: A Symfony Security PlayKris Wallsmith
 
History of jQuery
History of jQueryHistory of jQuery
History of jQueryjeresig
 
Design how your objects talk through mocking
Design how your objects talk through mockingDesign how your objects talk through mocking
Design how your objects talk through mockingKonstantin Kudryashov
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsJarod Ferguson
 
The Origin of Lithium
The Origin of LithiumThe Origin of Lithium
The Origin of LithiumNate Abele
 
How kris-writes-symfony-apps-london
How kris-writes-symfony-apps-londonHow kris-writes-symfony-apps-london
How kris-writes-symfony-apps-londonKris Wallsmith
 
The Zen of Lithium
The Zen of LithiumThe Zen of Lithium
The Zen of LithiumNate Abele
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony AppsKris Wallsmith
 
PHP 5.3 and Lithium: the most rad php framework
PHP 5.3 and Lithium: the most rad php frameworkPHP 5.3 and Lithium: the most rad php framework
PHP 5.3 and Lithium: the most rad php frameworkG Woo
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for JoomlaLuke Summerfield
 
Backbone js
Backbone jsBackbone js
Backbone jsrstankov
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax pluginsInbal Geffen
 
Ruby/Rails
Ruby/RailsRuby/Rails
Ruby/Railsrstankov
 

Tendances (20)

Delivering a Responsive UI
Delivering a Responsive UIDelivering a Responsive UI
Delivering a Responsive UI
 
Dojo Confessions
Dojo ConfessionsDojo Confessions
Dojo Confessions
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
Doctrine For Beginners
Doctrine For BeginnersDoctrine For Beginners
Doctrine For Beginners
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery Code
 
Matters of State
Matters of StateMatters of State
Matters of State
 
Love and Loss: A Symfony Security Play
Love and Loss: A Symfony Security PlayLove and Loss: A Symfony Security Play
Love and Loss: A Symfony Security Play
 
History of jQuery
History of jQueryHistory of jQuery
History of jQuery
 
Design how your objects talk through mocking
Design how your objects talk through mockingDesign how your objects talk through mocking
Design how your objects talk through mocking
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
 
The Origin of Lithium
The Origin of LithiumThe Origin of Lithium
The Origin of Lithium
 
How kris-writes-symfony-apps-london
How kris-writes-symfony-apps-londonHow kris-writes-symfony-apps-london
How kris-writes-symfony-apps-london
 
The Zen of Lithium
The Zen of LithiumThe Zen of Lithium
The Zen of Lithium
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
PHP 5.3 and Lithium: the most rad php framework
PHP 5.3 and Lithium: the most rad php frameworkPHP 5.3 and Lithium: the most rad php framework
PHP 5.3 and Lithium: the most rad php framework
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
 
Backbone js
Backbone jsBackbone js
Backbone js
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax plugins
 
Ruby/Rails
Ruby/RailsRuby/Rails
Ruby/Rails
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 

Similaire à Jquery Fundamentals

YDN KR Tech Talk : Pipes 와 YQL 활용하기
YDN KR Tech Talk : Pipes 와 YQL 활용하기YDN KR Tech Talk : Pipes 와 YQL 활용하기
YDN KR Tech Talk : Pipes 와 YQL 활용하기Jinho Jung
 
Learning jquery-in-30-minutes-1195942580702664-3
Learning jquery-in-30-minutes-1195942580702664-3Learning jquery-in-30-minutes-1195942580702664-3
Learning jquery-in-30-minutes-1195942580702664-3luckysb16
 
Lecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdfLecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdfLê Thưởng
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejsNick Lee
 
Backbonejs for beginners
Backbonejs for beginnersBackbonejs for beginners
Backbonejs for beginnersDivakar Gu
 
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MyOverlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MySteve McMahon
 
fuser interface-development-using-jquery
fuser interface-development-using-jqueryfuser interface-development-using-jquery
fuser interface-development-using-jqueryKostas Mavridis
 
Phoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってるPhoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってるTakahiro Kobaru
 
Stop Hacking WordPress, Start Working with it - Charly Leetham - WordCamp Syd...
Stop Hacking WordPress, Start Working with it - Charly Leetham - WordCamp Syd...Stop Hacking WordPress, Start Working with it - Charly Leetham - WordCamp Syd...
Stop Hacking WordPress, Start Working with it - Charly Leetham - WordCamp Syd...WordCamp Sydney
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark Rackley
 
Backbone.js Simple Tutorial
Backbone.js Simple TutorialBackbone.js Simple Tutorial
Backbone.js Simple Tutorial추근 문
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajaxbaygross
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects WebStackAcademy
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationSean Burgess
 
Mume JQueryMobile Intro
Mume JQueryMobile IntroMume JQueryMobile Intro
Mume JQueryMobile IntroGonzalo Parra
 
20111014 mu me_j_querymobile
20111014 mu me_j_querymobile20111014 mu me_j_querymobile
20111014 mu me_j_querymobileErik Duval
 

Similaire à Jquery Fundamentals (20)

J query
J queryJ query
J query
 
YQL & Yahoo! Apis
YQL & Yahoo! ApisYQL & Yahoo! Apis
YQL & Yahoo! Apis
 
YDN KR Tech Talk : Pipes 와 YQL 활용하기
YDN KR Tech Talk : Pipes 와 YQL 활용하기YDN KR Tech Talk : Pipes 와 YQL 활용하기
YDN KR Tech Talk : Pipes 와 YQL 활용하기
 
Learning jquery-in-30-minutes-1195942580702664-3
Learning jquery-in-30-minutes-1195942580702664-3Learning jquery-in-30-minutes-1195942580702664-3
Learning jquery-in-30-minutes-1195942580702664-3
 
Lecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdfLecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdf
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Backbonejs for beginners
Backbonejs for beginnersBackbonejs for beginners
Backbonejs for beginners
 
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MyOverlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
 
fuser interface-development-using-jquery
fuser interface-development-using-jqueryfuser interface-development-using-jquery
fuser interface-development-using-jquery
 
Phoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってるPhoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってる
 
Introduction to Angular JS
Introduction to Angular JSIntroduction to Angular JS
Introduction to Angular JS
 
Stop Hacking WordPress, Start Working with it - Charly Leetham - WordCamp Syd...
Stop Hacking WordPress, Start Working with it - Charly Leetham - WordCamp Syd...Stop Hacking WordPress, Start Working with it - Charly Leetham - WordCamp Syd...
Stop Hacking WordPress, Start Working with it - Charly Leetham - WordCamp Syd...
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
Backbone.js Simple Tutorial
Backbone.js Simple TutorialBackbone.js Simple Tutorial
Backbone.js Simple Tutorial
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
Mume JQueryMobile Intro
Mume JQueryMobile IntroMume JQueryMobile Intro
Mume JQueryMobile Intro
 
20111014 mu me_j_querymobile
20111014 mu me_j_querymobile20111014 mu me_j_querymobile
20111014 mu me_j_querymobile
 

Plus de Rebecca Murphey

Getting Started with Mulberry
Getting Started with MulberryGetting Started with Mulberry
Getting Started with MulberryRebecca Murphey
 
DojoConf: Building Large Apps
DojoConf: Building Large AppsDojoConf: Building Large Apps
DojoConf: Building Large AppsRebecca Murphey
 
Lessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamLessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamRebecca Murphey
 
Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryRebecca Murphey
 

Plus de Rebecca Murphey (8)

Getting Started with Mulberry
Getting Started with MulberryGetting Started with Mulberry
Getting Started with Mulberry
 
Introducing Mulberry
Introducing MulberryIntroducing Mulberry
Introducing Mulberry
 
DojoConf: Building Large Apps
DojoConf: Building Large AppsDojoConf: Building Large Apps
DojoConf: Building Large Apps
 
Lessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamLessons from-a-rewrite-gotham
Lessons from-a-rewrite-gotham
 
Lessons from a Rewrite
Lessons from a RewriteLessons from a Rewrite
Lessons from a Rewrite
 
Modern JavaScript
Modern JavaScriptModern JavaScript
Modern JavaScript
 
Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQuery
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 

Dernier

NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Dernier (20)

NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

Jquery Fundamentals

  • 1. jQuery Fundamentals rebecca@rebeccamurphey.com @rmurphey on Twitter http://delicious.com/rdmey/jquery-class
  • 2. Housekeeping • ftp: [yourname].jqueryclasses.com • username: yourname@jqueryclasses.com • password: jquery!class
  • 3. In the beginning, there was JavaScript http://www.flickr.com/photos/freeparking/476376873/
  • 4. Enter jQuery http://www.flickr.com/photos/timsnell/513274898/
  • 5. • Reads like what you mean • Simplifies cross-browser issues • Huge community & plugin ecosystem
  • 6. JavaScript 101 Because there’s lots of stuff you still need to know.
  • 8. Objects • Booleans, strings, numbers, arrays, and functions are all objects • Objects are a good way of organizing your code http://www.flickr.com/photos/oxido1180/2685774194/
  • 10. Booleans (true/false) • Lots of things are “truthy” • true • '0' (or any non-empty string) •1 (or any non-zero number) • any array, even empty ones • any object, even empty ones
  • 11. Booleans (true/false) • A few things are “falsy” • false •0 • undefined • null • '' (an empty, zero-length string) • NaN (“not a number,” the result of illegal math operations)
  • 15. function() { } a function
  • 16. Functions • Functions can take arguments, but they don't have to • Functionscan return anything, including other functions -- but they don't have to return anything • Functions can be assigned to variables • Functions can be passed to other functions by name, or as anonymous functions • Functions are normally called by putting () after their name
  • 17. Variable scope http://www.flickr.com/photos/8/12978541/
  • 18. Closures http://www.flickr.com/photos/gadl/272562772/
  • 20. In a nutshell • Get some elements • Do something to them http://www.flickr.com/photos/exfordy/1184487050/
  • 21. $()
  • 23. Chaining http://www.flickr.com/photos/itsgreg/315015695/
  • 24. Events http://docs.jquery.com/Events http://docs.jquery.com/Events/jQuery.Event
  • 25. $('a.foo').click(function(e) { e.preventDefault(); var $this = $(this); $this.css({ color : 'red' }); console.log('You clicked a link that points to ' + $this.attr('href')); }); when an a.foo link is clicked, prevent the default action, color the link red, and tell the user where the link pointed to
  • 26. CSS
  • 27. Manipulating http://www.flickr.com/photos/nnova/3373350948/
  • 28. Traversing http://www.flickr.com/photos/jenny-pics/3258777653/
  • 29. Effects http://www.flickr.com/photos/foxypar4/2153422313/
  • 30. XHR http://www.flickr.com/photos/timsnell/513274898/
  • 31. XHR basics • type: GET or POST • url: a fully qualified or relative URL • data: object or query string • dataType: text, html, xml, json, jsonp, script • callback: function to run when data is received
  • 32. POST or GET? • POST when you want to change something on the server • GET when you just want to get something from the server http://www.flickr.com/photos/14511253@N04/3298001461/
  • 33. POST or GET? • POST when you want to change something on the server • GET when you just want to get something from the server http://www.flickr.com/photos/14511253@N04/3298001461/
  • 34. More options with $.ajax() • async • error callback • timeout • cache • header modification • more ... http://www.flickr.com/photos/jeet_sen/1691759831/
  • 35. XHR events • ajaxStart • ajaxStop • ajaxComplete • ajaxError • ajaxSend • ajaxSuccess
  • 36. $('#loading') .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });
  • 37. Utility Methods http://www.flickr.com/photos/geoftheref/2486112196/
  • 39. Plugins • Extend core jQuery • $.myPlugin() • Extend jQuery object methods • $('#foo') .myPlugin()
  • 40. Extending object methods • Chainability • Options & defaults • Callbacks
  • 41. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; basic concept of a jQuery object method
  • 42. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; naming the plugin
  • 43. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; setting the defaults for the plugin
  • 44. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; overriding the defaults with user-defined options
  • 45. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; enabling chaining
  • 46. jQuery.fn.hrefToContents = function(options) { return this.each(function() { $(this).text($(this).attr('href')); }); }; a plugin that requires iteration
  • 47. jQuery.fn.hoverClass = function(c) { return this.hover( function() { $(this).addClass(c); }, function() { $(this).removeClass(c); } ); }; a plugin that doesn't require iteration
  • 48. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { callback : function() { alert('done'); } }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); this.each(function() { // ... }); jQuery.fn.myPlugin.defaults.callback(); return this; }; adding a callback