SlideShare a Scribd company logo
1 of 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

More Related Content

More from 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
 

More from 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
 

Recently uploaded

Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 

Recently uploaded (20)

Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 

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