SlideShare uma empresa Scribd logo
1 de 25
A Walk on the Client Sidewith jQueryPart 1
Rey Bango jQuery Project Team Member Community PM for Scripting & Web Client Technologies – Microsoft Ajaxian.com Writer Email: rey@reybango.com Blog: http://blog.reybango.com Twitter: @reybango
Old School JavaScript Browser Targeting “Best Viewed in ….” Inline JavaScript <a href="#whatisit" onMouseOut="MM_swapImgRestore()"   onMouseOver="MM_swapImage('Whatis','',   'whatis-active.png',1)">   <img name="Whatis" src="buttons/whatis-unactive.png"></a> 
Web Standards ,[object Object],Content, Presentation & Behavior are seperated Content Presentation Behavior Tests features, not browsers
Benefits Quick, terse syntax Simplifies interaction between HTML & JavaScript Excellent documentation & thriving community Open Source Unobtrusive from the ground up Wildly Popular
Users ,[object Object]
NBC, CBS, Newseek, Major League Baseball
Slashdot, Sourceforge
Github, Newsgator, Feedburner
Bank of America, Intuit,[object Object]
1 in 5 Sites that Use JavaScript  use jQuery
jQuery Is Wildly Popular Ref: Indeed.com
Why? Community 23 Team Members Continuously growing community of developers Support Resources Tutorials: http://docs.jquery.com/Tutorials Forums: http://forums.jquery.com IRC: freenode #jquery Microsoft Phone Support Local Groups: http://meetups.jquery.com/
Why? Documentation Official Documentation api.jquery.com (jQuery 1.4 Reference Guide) Books Learning jQuery 1.3 jQuery Cookbook jQuery in Action (2nd edition) jQuery: Novice to Ninja jQuery Enlightenment
Why? Many, many online tutorials Learningjquery.com Jqueryfordesigners.com Nettuts.com Many more… Conferences Online San Francisco – April, 2010 Boston London 500 Attendees with waiting list of 300+
Why? Communication Twitter @jquery @jqueryui @jquerysites @jquerypodcast jQueryTeam List (http://twitter.com/jquery/team) jQuery Podcast (iTunes & jQuery Blog) YayQueryVideocast (http://yayquery.com/)
Why? Availability Source: http://github.com/jquery Microsoft: http://www.asp.net/ajax/cdn/ Google: http://code.google.com/apis/ajaxlibs Download from jQuery.com
Why? jQuery is Open Source Dual-licensed: MIT and GPL Copyright (c) 2009 John Resig, http://jquery.com/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND …
Syntax jQuery Has Quick, Terse Syntax var x = $(window).width(); var y = $(window).height(); jQuery Simplifies Interaction Find Something Do Something
$( 'div' )
Selectors CSS Selectors #id {} .class {} ancestor descendant {} With jQuery $('#id') $('.class') $('ancestor descendant') Full CSS Selector 1-3 Support Better CSS Selector support than most browsers
Features Interaction plugins Draggable, droppable, resizable, sortable, selectable UI controls Accordion, autocomplete, button, date picker, slider, more… Visual effects Basic effects, transitions, animation, easing… Focus on web standards Accessible Skinnable Tested for compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome Same license as jQuery Completely open source

Mais conteúdo relacionado

Mais de reybango

Woah, You Can Test IE & Microsoft Edge on a Mac?
Woah, You Can Test IE & Microsoft Edge on a Mac?Woah, You Can Test IE & Microsoft Edge on a Mac?
Woah, You Can Test IE & Microsoft Edge on a Mac?reybango
 
A day in the life of a Developer Advocate
A day in the life of a Developer AdvocateA day in the life of a Developer Advocate
A day in the life of a Developer Advocatereybango
 
Getting into ember.js
Getting into ember.jsGetting into ember.js
Getting into ember.jsreybango
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shimsreybango
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overviewreybango
 
MAOW Berlin '09 Keynote
MAOW Berlin '09 KeynoteMAOW Berlin '09 Keynote
MAOW Berlin '09 Keynotereybango
 
AMO Barcamp Miami
AMO Barcamp MiamiAMO Barcamp Miami
AMO Barcamp Miamireybango
 

Mais de reybango (7)

Woah, You Can Test IE & Microsoft Edge on a Mac?
Woah, You Can Test IE & Microsoft Edge on a Mac?Woah, You Can Test IE & Microsoft Edge on a Mac?
Woah, You Can Test IE & Microsoft Edge on a Mac?
 
A day in the life of a Developer Advocate
A day in the life of a Developer AdvocateA day in the life of a Developer Advocate
A day in the life of a Developer Advocate
 
Getting into ember.js
Getting into ember.jsGetting into ember.js
Getting into ember.js
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
MAOW Berlin '09 Keynote
MAOW Berlin '09 KeynoteMAOW Berlin '09 Keynote
MAOW Berlin '09 Keynote
 
AMO Barcamp Miami
AMO Barcamp MiamiAMO Barcamp Miami
AMO Barcamp Miami
 

Último

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 

Último (20)

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 

jQuery - A Walk On The Client Side

  • 1. A Walk on the Client Sidewith jQueryPart 1
  • 2. Rey Bango jQuery Project Team Member Community PM for Scripting & Web Client Technologies – Microsoft Ajaxian.com Writer Email: rey@reybango.com Blog: http://blog.reybango.com Twitter: @reybango
  • 3. Old School JavaScript Browser Targeting “Best Viewed in ….” Inline JavaScript <a href="#whatisit" onMouseOut="MM_swapImgRestore()"   onMouseOver="MM_swapImage('Whatis','',   'whatis-active.png',1)">   <img name="Whatis" src="buttons/whatis-unactive.png"></a> 
  • 4.
  • 5.
  • 6.
  • 7. Benefits Quick, terse syntax Simplifies interaction between HTML & JavaScript Excellent documentation & thriving community Open Source Unobtrusive from the ground up Wildly Popular
  • 8.
  • 9. NBC, CBS, Newseek, Major League Baseball
  • 12.
  • 13. 1 in 5 Sites that Use JavaScript use jQuery
  • 14. jQuery Is Wildly Popular Ref: Indeed.com
  • 15. Why? Community 23 Team Members Continuously growing community of developers Support Resources Tutorials: http://docs.jquery.com/Tutorials Forums: http://forums.jquery.com IRC: freenode #jquery Microsoft Phone Support Local Groups: http://meetups.jquery.com/
  • 16. Why? Documentation Official Documentation api.jquery.com (jQuery 1.4 Reference Guide) Books Learning jQuery 1.3 jQuery Cookbook jQuery in Action (2nd edition) jQuery: Novice to Ninja jQuery Enlightenment
  • 17. Why? Many, many online tutorials Learningjquery.com Jqueryfordesigners.com Nettuts.com Many more… Conferences Online San Francisco – April, 2010 Boston London 500 Attendees with waiting list of 300+
  • 18. Why? Communication Twitter @jquery @jqueryui @jquerysites @jquerypodcast jQueryTeam List (http://twitter.com/jquery/team) jQuery Podcast (iTunes & jQuery Blog) YayQueryVideocast (http://yayquery.com/)
  • 19. Why? Availability Source: http://github.com/jquery Microsoft: http://www.asp.net/ajax/cdn/ Google: http://code.google.com/apis/ajaxlibs Download from jQuery.com
  • 20. Why? jQuery is Open Source Dual-licensed: MIT and GPL Copyright (c) 2009 John Resig, http://jquery.com/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND …
  • 21. Syntax jQuery Has Quick, Terse Syntax var x = $(window).width(); var y = $(window).height(); jQuery Simplifies Interaction Find Something Do Something
  • 23. Selectors CSS Selectors #id {} .class {} ancestor descendant {} With jQuery $('#id') $('.class') $('ancestor descendant') Full CSS Selector 1-3 Support Better CSS Selector support than most browsers
  • 24.
  • 25. Features Interaction plugins Draggable, droppable, resizable, sortable, selectable UI controls Accordion, autocomplete, button, date picker, slider, more… Visual effects Basic effects, transitions, animation, easing… Focus on web standards Accessible Skinnable Tested for compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome Same license as jQuery Completely open source
  • 26.
  • 30.
  • 31. Demo