SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Plus 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
 

Dernier

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Dernier (20)

A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 

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