SlideShare una empresa de Scribd logo
1 de 33
Descargar para leer sin conexión
Designveloper
JQUERY
Write less, do more
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
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
Simple Concept
▪ Find something
▪ Do something
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
FIND SOMETHING
“select” elements in document
Find something
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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
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
Do something
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
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
Dev Tools
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
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
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
The Basic
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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
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
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
The basic
▪ conditionals:
– if, else
– switch
▪ operators:
– +, -, *, %, ++, --
– >, <, ==, !=, >=, <=, ===, !==
– !, &&, ||
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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
function
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
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
Install
Download
http://jquery.com/download/
<script src="//code.jquery.com/jquery-
1.11.0.min.js"></script>
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Tips
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
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
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
Tips
// uncool
$('div:first')
// cool
$('div').first();
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Tips
// slower
$('li:eq(3)')
$('li:lt(3)')
// faster
$('li').eq(3)
$('li').slice(0, 3)
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
The end
Thank you for listening
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Más contenido relacionado

Destacado

Client side vs server side
Client side vs server sideClient side vs server side
Client side vs server sideabgjim96
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery BasicsKaloyan Kosev
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jqueryUmar Ali
 
jQuery basics
jQuery basicsjQuery basics
jQuery basicsKamal S
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery PresentationRod Johnson
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutesSimon Willison
 

Destacado (9)

Client side vs server side
Client side vs server sideClient side vs server side
Client side vs server side
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jquery
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 

Similar a Jquery

Introduction to Foundation
Introduction to FoundationIntroduction to Foundation
Introduction to FoundationDesignveloper
 
Creating a CSS layout from scratch
Creating a CSS layout from scratchCreating a CSS layout from scratch
Creating a CSS layout from scratchDesignveloper
 
Javascript template engine
Javascript template engineJavascript template engine
Javascript template engineDesignveloper
 
BACKBONE.JS & UNDERSCORE.JS
BACKBONE.JS & UNDERSCORE.JSBACKBONE.JS & UNDERSCORE.JS
BACKBONE.JS & UNDERSCORE.JSDesignveloper
 
Spsct15 power shell_csom - amit vasu
Spsct15 power shell_csom - amit vasuSpsct15 power shell_csom - amit vasu
Spsct15 power shell_csom - amit vasuamitvasu
 
Building high performance
Building high performanceBuilding high performance
Building high performanceRoy Sheinfeld
 
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example Anna Klepacka
 
Building Flexible SharePoint Solutions with AngularJS
Building Flexible SharePoint Solutions with AngularJSBuilding Flexible SharePoint Solutions with AngularJS
Building Flexible SharePoint Solutions with AngularJSbgerman
 
How to Build a Serverless Chatbot for $0?
How to Build a Serverless Chatbot for $0?How to Build a Serverless Chatbot for $0?
How to Build a Serverless Chatbot for $0?Mobile Monday Srbija
 
RoR Workshop - Web applications hacking - Ruby on Rails example
RoR Workshop - Web applications hacking - Ruby on Rails exampleRoR Workshop - Web applications hacking - Ruby on Rails example
RoR Workshop - Web applications hacking - Ruby on Rails exampleRailwaymen
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsChris Love
 
SPSToronto 2015 - Managing Office365 with PowerShell and CSOM
SPSToronto 2015 - Managing Office365 with PowerShell and CSOMSPSToronto 2015 - Managing Office365 with PowerShell and CSOM
SPSToronto 2015 - Managing Office365 with PowerShell and CSOMamitvasu
 
Robert polak candidate coversheet-2018-3
Robert polak   candidate coversheet-2018-3Robert polak   candidate coversheet-2018-3
Robert polak candidate coversheet-2018-3Robert Polak
 
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...Reuven Lerner
 
Modern Web Technologies — Jerusalem Web Professionals, January 2011
Modern Web Technologies — Jerusalem Web Professionals, January 2011Modern Web Technologies — Jerusalem Web Professionals, January 2011
Modern Web Technologies — Jerusalem Web Professionals, January 2011Reuven Lerner
 
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirstBuilding CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirstJun-ichi Sakamoto
 
SharePoint Silverlight Sandboxed solutions
SharePoint Silverlight Sandboxed solutionsSharePoint Silverlight Sandboxed solutions
SharePoint Silverlight Sandboxed solutionsPhil Wicklund
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to ElevenEmily Lewis
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQueryMark Rackley
 

Similar a Jquery (20)

Introduction to Foundation
Introduction to FoundationIntroduction to Foundation
Introduction to Foundation
 
Creating a CSS layout from scratch
Creating a CSS layout from scratchCreating a CSS layout from scratch
Creating a CSS layout from scratch
 
Javascript template engine
Javascript template engineJavascript template engine
Javascript template engine
 
BACKBONE.JS & UNDERSCORE.JS
BACKBONE.JS & UNDERSCORE.JSBACKBONE.JS & UNDERSCORE.JS
BACKBONE.JS & UNDERSCORE.JS
 
Express JS
Express JSExpress JS
Express JS
 
Spsct15 power shell_csom - amit vasu
Spsct15 power shell_csom - amit vasuSpsct15 power shell_csom - amit vasu
Spsct15 power shell_csom - amit vasu
 
Building high performance
Building high performanceBuilding high performance
Building high performance
 
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
 
Building Flexible SharePoint Solutions with AngularJS
Building Flexible SharePoint Solutions with AngularJSBuilding Flexible SharePoint Solutions with AngularJS
Building Flexible SharePoint Solutions with AngularJS
 
How to Build a Serverless Chatbot for $0?
How to Build a Serverless Chatbot for $0?How to Build a Serverless Chatbot for $0?
How to Build a Serverless Chatbot for $0?
 
RoR Workshop - Web applications hacking - Ruby on Rails example
RoR Workshop - Web applications hacking - Ruby on Rails exampleRoR Workshop - Web applications hacking - Ruby on Rails example
RoR Workshop - Web applications hacking - Ruby on Rails example
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
 
SPSToronto 2015 - Managing Office365 with PowerShell and CSOM
SPSToronto 2015 - Managing Office365 with PowerShell and CSOMSPSToronto 2015 - Managing Office365 with PowerShell and CSOM
SPSToronto 2015 - Managing Office365 with PowerShell and CSOM
 
Robert polak candidate coversheet-2018-3
Robert polak   candidate coversheet-2018-3Robert polak   candidate coversheet-2018-3
Robert polak candidate coversheet-2018-3
 
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
 
Modern Web Technologies — Jerusalem Web Professionals, January 2011
Modern Web Technologies — Jerusalem Web Professionals, January 2011Modern Web Technologies — Jerusalem Web Professionals, January 2011
Modern Web Technologies — Jerusalem Web Professionals, January 2011
 
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirstBuilding CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
 
SharePoint Silverlight Sandboxed solutions
SharePoint Silverlight Sandboxed solutionsSharePoint Silverlight Sandboxed solutions
SharePoint Silverlight Sandboxed solutions
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to Eleven
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
 

Más de Designveloper

Let us take care of your brand image
Let us take care of your brand imageLet us take care of your brand image
Let us take care of your brand imageDesignveloper
 
5 java script frameworks to watch in 2017
5 java script frameworks to watch in 20175 java script frameworks to watch in 2017
5 java script frameworks to watch in 2017Designveloper
 
Happy international women's day!
Happy international women's day!Happy international women's day!
Happy international women's day!Designveloper
 
Typing racer game - a nice break from work
Typing racer game  - a nice break from workTyping racer game  - a nice break from work
Typing racer game - a nice break from workDesignveloper
 
Should we work remotely?
Should we work remotely?Should we work remotely?
Should we work remotely?Designveloper
 
Meet song nhi your virtual financial assistance
Meet song nhi   your virtual financial assistanceMeet song nhi   your virtual financial assistance
Meet song nhi your virtual financial assistanceDesignveloper
 
Why pair programming is a good idea
Why pair programming is a good idea Why pair programming is a good idea
Why pair programming is a good idea Designveloper
 
5 worst mistakes of diy websites
5 worst mistakes of diy websites5 worst mistakes of diy websites
5 worst mistakes of diy websitesDesignveloper
 
Basic glossary of web design terms for non designers (part 2)
Basic glossary of web design terms for non designers (part 2)Basic glossary of web design terms for non designers (part 2)
Basic glossary of web design terms for non designers (part 2)Designveloper
 
Single page web application development using meteor js
Single page web application development using meteor jsSingle page web application development using meteor js
Single page web application development using meteor jsDesignveloper
 
Multiplayer game with unity3 d and meteor
Multiplayer game with unity3 d and meteorMultiplayer game with unity3 d and meteor
Multiplayer game with unity3 d and meteorDesignveloper
 
Awesome free resources for learning javascript
Awesome free resources for learning javascriptAwesome free resources for learning javascript
Awesome free resources for learning javascriptDesignveloper
 
What is the best java script frameworks to learn?
What is the best java script frameworks to learn?What is the best java script frameworks to learn?
What is the best java script frameworks to learn?Designveloper
 
Travelling forms a young man
Travelling forms a young manTravelling forms a young man
Travelling forms a young manDesignveloper
 
5 compelling reasons your website should be responsive
5 compelling reasons your website should be responsive5 compelling reasons your website should be responsive
5 compelling reasons your website should be responsiveDesignveloper
 
Reactive programming with tracker
Reactive programming with trackerReactive programming with tracker
Reactive programming with trackerDesignveloper
 
Benefits of using single page websites
Benefits of using single page websitesBenefits of using single page websites
Benefits of using single page websitesDesignveloper
 
What is the best programming language for beginner?
What is the best programming language for beginner?What is the best programming language for beginner?
What is the best programming language for beginner?Designveloper
 
No sql injection in meteor.js application
No sql injection in meteor.js applicationNo sql injection in meteor.js application
No sql injection in meteor.js applicationDesignveloper
 
How to deploy and scale your meteor apps
How to deploy and scale your meteor appsHow to deploy and scale your meteor apps
How to deploy and scale your meteor appsDesignveloper
 

Más de Designveloper (20)

Let us take care of your brand image
Let us take care of your brand imageLet us take care of your brand image
Let us take care of your brand image
 
5 java script frameworks to watch in 2017
5 java script frameworks to watch in 20175 java script frameworks to watch in 2017
5 java script frameworks to watch in 2017
 
Happy international women's day!
Happy international women's day!Happy international women's day!
Happy international women's day!
 
Typing racer game - a nice break from work
Typing racer game  - a nice break from workTyping racer game  - a nice break from work
Typing racer game - a nice break from work
 
Should we work remotely?
Should we work remotely?Should we work remotely?
Should we work remotely?
 
Meet song nhi your virtual financial assistance
Meet song nhi   your virtual financial assistanceMeet song nhi   your virtual financial assistance
Meet song nhi your virtual financial assistance
 
Why pair programming is a good idea
Why pair programming is a good idea Why pair programming is a good idea
Why pair programming is a good idea
 
5 worst mistakes of diy websites
5 worst mistakes of diy websites5 worst mistakes of diy websites
5 worst mistakes of diy websites
 
Basic glossary of web design terms for non designers (part 2)
Basic glossary of web design terms for non designers (part 2)Basic glossary of web design terms for non designers (part 2)
Basic glossary of web design terms for non designers (part 2)
 
Single page web application development using meteor js
Single page web application development using meteor jsSingle page web application development using meteor js
Single page web application development using meteor js
 
Multiplayer game with unity3 d and meteor
Multiplayer game with unity3 d and meteorMultiplayer game with unity3 d and meteor
Multiplayer game with unity3 d and meteor
 
Awesome free resources for learning javascript
Awesome free resources for learning javascriptAwesome free resources for learning javascript
Awesome free resources for learning javascript
 
What is the best java script frameworks to learn?
What is the best java script frameworks to learn?What is the best java script frameworks to learn?
What is the best java script frameworks to learn?
 
Travelling forms a young man
Travelling forms a young manTravelling forms a young man
Travelling forms a young man
 
5 compelling reasons your website should be responsive
5 compelling reasons your website should be responsive5 compelling reasons your website should be responsive
5 compelling reasons your website should be responsive
 
Reactive programming with tracker
Reactive programming with trackerReactive programming with tracker
Reactive programming with tracker
 
Benefits of using single page websites
Benefits of using single page websitesBenefits of using single page websites
Benefits of using single page websites
 
What is the best programming language for beginner?
What is the best programming language for beginner?What is the best programming language for beginner?
What is the best programming language for beginner?
 
No sql injection in meteor.js application
No sql injection in meteor.js applicationNo sql injection in meteor.js application
No sql injection in meteor.js application
 
How to deploy and scale your meteor apps
How to deploy and scale your meteor appsHow to deploy and scale your meteor apps
How to deploy and scale your meteor apps
 

Último

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
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
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 
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
 
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
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
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
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
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
 

Último (20)

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
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
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 
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
 
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
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
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
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
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
 

Jquery

  • 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
  • 6. Find 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
  • 16. The Basic 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
  • 20. The basic ▪ conditionals: – if, else – switch ▪ operators: – +, -, *, %, ++, -- – >, <, ==, !=, >=, <=, ===, !== – !, &&, || 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
  • 27. Tips
  • 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
  • 31. Tips // uncool $('div:first') // cool $('div').first(); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  • 32. Tips // slower $('li:eq(3)') $('li:lt(3)') // faster $('li').eq(3) $('li').slice(0, 3) Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  • 33. The end Thank you for listening Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City