Presentation is loading. Please wait.

Presentation is loading. Please wait.

Jquery is totally awesome.

Similar presentations


Presentation on theme: "Jquery is totally awesome."— Presentation transcript:

1 Eric.Steinborn@dcjs.state.ny.us Jquery is totally awesome.
I hate how expensive trainings are. So I wanted to give you all training here today that’s priceless. I really like to learn things at meetings

2 Poll Who uses javascript on their sites Who uses JavaScript everyday
who uses frameworks (mootools, Dojo, prototype etc) Who uses jQuery

3 Just Thought you should know

4 Eric Steinborn NYS Division of Criminal Justice Services since 2006 15+ years experience with web technologies Work in a group of 3 Maintain our intranet (DCJSnet) Help with internet and extranet sites A few things I'm awesome at are: CSS, JavaScript, Interactivity, Prog Enhancement, UX, SEO, Accessibility I do what I love -> I love my job! Me

5 A Little Bit About jQuery
What is jQuery? jQuery is an Open-Source JavaScript framework that simplifies cross-browser client side scripting. Animations DOM manipulation AJAX Extensibility through plugins jQuery was created by John Resig and released 01/06 Most current release is (2/19/10) Open Source JavaScript framework. Jquery was created by John Resig in 2006 and since then has exploded into popularity in the web community.

6 A Little Bit About jQuery
Why should you use it? Easy to learn! It uses CSS syntax for selection Its tiny 71KB (24KB, minified and Gzipped) Documented api.jquery.com & Supported forum.jquery.com Cross browser compatibility: IE 6+, FF 2+ It is the most used JavaScript library on the web today 39% of all sites that use JavaScript use jQuery. trends.builtwith.com/javascript/JQuery <- See, I'm not a liar.. It uses CSS rules to grab DOM elements that's why its so easy to use, because we all know how to address com elements with css already. Its really small, it loads really fast in most browsers. The community is great. I had a question once about how to do something for the new homepage. I asked the question before i left work and had a response by my ride home. And its compatible with most major browsers. If you make something that works in FF itll work in IE6 guaranteed.

7 I <3 The jQuery Community
I created this awesome idea to display missing children information on our home page when there was a missing child alert. I just couldn’t figure out how to parse the data I was getting from the page with the kid info on it. So I asked the forums. and

8 Adam J Sontag from the yayQuery podcast answered my question in 13 minutes.
yayQuery podcast has an explicit tag for sparse foul language, nothing terrible. Just if you don’t want your kids hearing the f or s words then use headphones.

9 PWNS All Other Frameworks
Swf object is for putting flash on a page, the closest actual pure JavaScript framework is prototype. And don’t forget that jQueryUI, a part of jQuery is included in this list, above even mootools.

10 Who Uses jQuery? docs.jquery.com/Sites_Using_jQuery Google Amazon IBM
Microsoft Twitter Dell You can see this list on their website. Microsoft just announced that they are going to be dedicating coder time and resources to improving jQuery core, and its plugins. This is HUGE. Mention anti microsoft sentiment, and the fact that even microsoft wants IE6 to die. docs.jquery.com/Sites_Using_jQuery

11 Alcoholism & Substance Abuse
Who Uses jQuery In NY? Alcoholism & Substance Abuse CIO OFT Criminal Justice Labor MTA Port Authority This is just a couple of agencies across NY that use jQuery

12 What is the DOM? Document Object Model (DOM): noun
So I mentioned the DOM before, what exactly is the DOM? Document Object Model (DOM): noun Blah blah blah long definition that makes little sense….

13 What Is The DOM? Long story short, the DOM is your html document code. From the <!DOCTYPE> to the </html> The DOM is loaded top to bottom, so include your scripts at the bottom of the page for best performance. The DOM is "ready" when everything on the page has loaded. Stylesheets JavaScripts Images The Document Object Model. The DOM is everything you write in your html documents, images, css, all your tags, everything. The DOM is a mess. There are a million different ways to accomplish things within it and many different doctypes and uppercase and lowercase are allowed attributes that sometimes need quotes, and othertimes don’t. jQuery is coded around all those inconsistencies. jQuery can modifiy the DOM, but it cant do so untill the DOM is ready.

14 Wait!! $(document).ready(function(){
In order to make sure that jQuery can find the element you asked it for, your browser needs to have loaded it (the DOM needs to be ready). Q. How can I be sure my code runs at DOM ready? A. Wrap all your jQuery code with the document ready function: $(document).ready(function(){ // insert sweet, sweet jQuery code here… }); So we wrap all our jQuery code inside some code. Its called the document ready function, and it is only run after all your page has loaded. Shorthand is $(function(){ });

15 And What If I Don't Wanna, Huh?
1 of 3 things will happen: Code doesn't work, throws an error (90%) Code works… this page load, next page load see #1. (~9%) Code opens a worm hole that transports your page back to 1990 revolutionizing the Web as we know it. While seemingly great, it also creates a paradox and destroys the universe. * (<1%) *(has yet to be fully verified) #1 is closer to 99%

16 We get it Eric, you're a geek… Get to the jQuery already!
Your about ta get a wedgie NERD!* *spelling intentional

17 Loading jQuery In order to use jQuery you need to load it.
You can include it locally on your own server: <script src="/js/jquery.js"> Or use one of the CDN's made available: ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js ajax.microsoft.com/ajax/jquery/jquery js CDN's are Gzipped and minified Loading from the CDN’s is usually the fastest way, because if you are downloading from one place, you can be downloading from another place at the same time. We usually load it on our servers.

18 Load Scripts At The Bottom
Problem: When scripts are downloading they block everything else in almost all browsers! Solution: Best practice: Load your scripts at the bottom of your page so they don't interrupt page content downloads. Load at the bottom f the page because when the browser is downloading javascripts it blocks everything else So lets light the fuse now…

19 And BOOM! Goes The Dynamite.
jsbin.com/ecayo3/18#slide19 Html: <p>Hello World! I'm Eric</p> Script: $(function(){ $("p").addClass("isCool"); //keep telling yourself that.. }); Resulting html: <p class="isCool">Hello World! I'm Eric</p> So lets see what we’re up against. We begin with a plain P tag and end with a p tag with a class of isCool Lets break it down on the next page DEMO

20 Break It Down Now! $ ("p") .addClass("isCool");
$(function(){// = $(document).ready(function(){ $ ("p") .addClass("isCool"); Initiates the jQuery function Grabs a DOM element using a CSS selector. Built in method that adds a class to the jQuery Collection We check for the DOM to be ready by the $(function() wrapper We use the $ to initialize a jquery function Then we surround a CSS selector with parenthesis and quotes (all P’s will be selected) Then I initiate a jquery method called addClass and tell it what class to add. It's a good thing to note that I don't add a . Before isCool when adding removing classes. Most methods are alike in how they are called, be careful to check to api to see how to use each method. I end with a semicolon just like most lines of javascript code And then close the document ready wrapper Double quotes can be swapped with single quotes. Same rules apply as normal html or javascript, if you use one you have to end one before switching to the other. Selector is in quotes. Class is in quotes. $ = jQuery Creates a jQuery “Collection” ends with a semicolon. <p> });

21 All Your Basic Selectors Are Belong To Us
Uses the same syntax you use to style elements in CSS! $("p") <p> $("div") <div> $("#foo") id="foo" $(".foo") class="foo" Here you can see some of the basic css selectors supported by jquery Simple things that you've seen a lot before. Div p classes etc In order to not select everything, make sure to be specific with your CSS selector api.jquery.com/category/selectors/

22 Get Classy <p> $("p").addClass("sophisticated"); <p>
jsbin.com/ecayo3/18#slide22 jQuery: $("p").addClass("sophisticated"); Before: <p> After: <p class="sophisticated"> I want to make this p tag classy, So I’m going to use the addClass method on it and add the sophisticated class to it you see the before and after html Note the lack of . Before the class name, that’s only needed for selection

23 This <p> Has No Class At All!
jsbin.com/ecayo3/18#slide22 jQuery: $("p").removeClass("sophisticated"); Before: <p class="sophisticated"> After: <p class=""> I remove classes with a different method, but the way in which I do it stays the same. If there were other classes on the p tag they would stay intact DEMO

24 <div> Hide and Seek
jsbin.com/ecayo3/18#slide24 jQuery: $("div").show(); Before: <div style="display:none;"> After: <div style="display:block;"> You can show a div by running the show method. There is a hide method as well. DEMO

25 I’m Not Lame, Am I? $("#eric").text("Is Cool");
jsbin.com/ecayo3/18#slide25 jQuery: $("#eric").text("Is Cool"); Before: <p id="eric">Is Lame</p> After: <p id="eric">Is Cool</p> Text will change the inner text of a DOM element DEMO.

26 You Can Chain Most Methods Together
jsbin.com/ecayo3/18#slide26 $("p") .addClass("sophisticated") .text("Hello World!") .show(); Methods can be separated across multiple lines. Or kept on the same line This is a best practice for code readability Make sure you end your chain with a semicolon; DEMO

27 Click Events Are Awesome!
jsbin.com/ecayo3/18#slide27 $("#eric").click(function(){ $(this).text("Is Cool"); // this = #eric alert("Take that High School!"); }); $("#eric").click(function(event){ event.preventDefault(); //Prevents default action Click events are a bit different. In order to have code run when you click you need to declare a function to encapsulate the code you want to run We create an anonymous function that calls this element (#eric) And it changes the text to Is Cool and throw a javascript alert If we wanted to prevent the default action, say href=“index.html” Then we call event inside the parenthesis after the function and call event.preventDefault() to prevent the default action of the button

28 .wrap("<a></a>")
Some of Basic Methods .show() Show a hidden element .wrap("<a></a>") wrap an element with <a> .parent("p") Select parent <p> .html() Get/Set innerHTML .val() Get/Set Value Plenty of examples of basic methods within jQuery. api.jquery.com/

29 Getters and Setters

30 Dual Purpose Methods $("#foo").text(); $("#foo").text("foo");
Getters and setters. These are jquery methods that can give you a value or set a value. You can set a variable to any of these getters Text can get a value or set a value

31 Use jQuery To Get <p>Eric</p> === "Eric" myVar === "Eric"
$("p").text(); === "Eric" To get a value you call a method with empty parens. Some functions are different, please check api ex css uses a different syntax Normally youd set a variable equal to a value of a jquery method getter. Both of these functions do the same myVar = $("p").text(); myVar === "Eric"

32 Use jQuery To Set <p>Eric</p> <p>BoBeric</p>
$("p").text("BoBeric"); <p>BoBeric</p> Set a value by including the new value in quotes is how u set it to a literal value Or reference a variable by not using quotes. Both do the same thing myVar = "BoBeric"; $("p").text(myVar); myVar === "BoBeric" <p>BoBeric</p>

33 Questions? Questions so far about 15 minutes

34 Plugins Lets get into the meat of jQuery for beginners

35 Viva Variety! plugins.jquery.com
“If you want to create an animation, effect or UI component, chances are pretty good that someone has done your work for you already.” -Eric Steinborn 2010 plugins.jquery.com Trust me on this

36 I Will Be Covering These Plugins
ColorBox Slideshow plugin tablesorter Table formatting & row sorting ListNav Filter long lists Left out qTip due to timing constraints

37 That's Just Typical.. Download the plugin from its site.
Depending on the plugin you can have 1 or more files to install. Copy the plugin, and any of its dependencies to your server. If needed call css <link href="plugincss.css" /> Call jQuery <script src="jQuery.js"> Call the plugin <script src"jQuery.pluginname.js"> Initialize plugin $("#mypluginContainer").pluginInit(); This is your typical plugin installation

38 Go-Go-Get ColorBox! Go to colorpowered.com/colorbox/ This is what you'll get Colorbox = js Content = demos Examples = themes Inclused the illustrator file for creating your own custom theme READ THE README

39 Go-Go-Install ColorBox!
Extract min.js to my "/js/plugins/" folder I like example 2 so I'll extract These to my /css/ folder First img is of the /colorbox/ Second is the /example3/ Colorbox references images in the folder that’s in direct relation to the placement of the css file.

40 Go-Go-Prep ColorBox! In the <head> type:
<link rel="stylesheet" href="css/colorbox.css" media="screen" /> In the <body> type: <a href="unicorn.jpg" rel="colorbox"><img src="unicorn-t.jpg" /></a> <a href="rainbows.jpg" rel="colorbox"><img src="rainbows-t.jpg" /></a> <a href="sparkles.jpg" rel="colorbox"><img src="sparkles-t.jpg" /></a> Before the ending </body> type: <script type="text/javascipt" src="js/jquery.js"></script> <script type="text/javascipt" src="js/jquery.colorbox-min.js"></script> <script type="text/javascipt"></script> Head Body Script – empty, next page

41 Go-Go-Gadget ColorBox!
Inside the empty <script> tag I just entered I'll init ColorBox <script> $(function(){ $("a[rel='colorbox']").colorbox(); }); </script> Now anytime I click on a thumbnail, I’ll see a ColorBox with my image in it. A rel= is an advanced CSS3 selector.

42 Go-Go-Cut It Out Already!
jsbin.com/ecayo3/18#slide41 Set custom options for ColorBox like this: $("a[rel='colorbox']").colorbox({ slideshow: true, // shows all your images in sequence slideshowSpeed: 5000, // set the speed of the slideshow in MS transition: "fade",// set the transition between images speed: 1000 // set the speed of the transition in MS }); Download colorpowered.com/colorbox/ Here are some of the options that can be set for colorbox. Check the full list on their website DEMO

43 tablesorter Head: <link href="css/tablesorter.css" /> HTML: <table id="ericsDreams"><!-- full table code --></table> Foot: <script src="js/jquery.tablesorter.min.js"></script> <script> $(function(){ $("#ericsDreams").tablesorter(); }); </script>

44 tablesorter Options Set custom options for tablesorter like this: $("#ericsDreams").tablesorter({ widgets: ['zebra'] // Zebra stripes alternating rows }); Download tablesorter.com/docs/ DEMO

45 ListNav Head: <link href="css/listnav.css" /> HTML: <div id="ericsDreams-nav"></div> <!--needed for nav list--> <ul id="ericsDreams"><!-- lots of li's --></ul> Foot: <script src="js/jquery.listnav.min.2.1.js"></script> <script> $(function(){ $("#ericsDreams").listnav(); }); </script>

46 ListNav Options jsbin.com/ecayo3/18#slide45 Set custom options for ListNav like this: $("#ericsDreams").listnav({ showCounts: false, // Don’t show counts above letters noMatchText: "Fail!", // Custom text for invalid selections cookieName: "Dreams", // Selection saved in Cookie includeOther: true // Include an Other option }); // include cookie plugin for cookieName to function Download ihwy.com/Labs/jquery-listnav-plugin.aspx DEMO

47 Great References John Resig's introduction slides jQuery 1.4 Cheat Sheet jQuery API jQuery Forums YAYquery Podcast (explicit) DEMOS: jsbin.com/ecayo3/18 All demos are on JS Bin. It’s a javascript sandbox that allows you to edit my code examples directly.

48 I Like Plugins! Show Us More!


Download ppt "Jquery is totally awesome."

Similar presentations


Ads by Google