jQuery introduction

jQuery Introduction Twitter: @tomijuhola Tomi Juhola, 29.8.2011 Versio: | Status: | Updated: 0.1 Draft Tomi Juhola, 29.8.2011

Motivation? Target? jQuery is not much educated technology We have a need with people having JavaScript & jQuery skills, as well as an idea how it should be used Target: Familiarize you with the JavaScript and jQuery library Get to know the mostly used parts of jQuery Give guidance on the first steps towards client-side scripting mastery

Agenda JAVASCRIPT BASICS JQUERY BASICS DOM MANIPULATION EVENTS ANIMATIONS JQUERY UI ADDITIONAL RESOURCES

What is JavaScript? Scripting language Dynamic (e.g. objects can be extended during run-time) Weakly-typed (No type needed for variables) Multiparadigm: Object-oriented Imperative (statements that change program state) Functional (more mathematical model of imperative programming) Prototype based (uses object cloning instead of inheritance) First-class functions (passing functions as parameters to other functions etc.) Implementation of ECMAScript language standard Used mainly on client-side web interfaces

JavaScript syntax JS syntax is C-style, so also close to Java However, JavaScript has really nothing else to do with Java.. Basic statements for ( var i = 0; i < 3; i++ ) { // DO SOMETHING } for ( var i in array) { // DO SOMETHING USEFUL } while ( true ) { // DO SOMETHING FOREVER } If (a == b+2)

More simple code examples var variable = ”String”; Variables scoped to the function, not just the block: function isTen(a){ if (a==10) { var result = ”Success!” } return result; }

Even more simple code examples var myFirstObject = {name: ”Peter”, age: 12}; myFirstObject.name = ”Pete”; if (myFirstObject.age <18) return ”no fun allowed”; Oh, and how to use? <script type="text/javascript"> document.write('Hello World!'); </script> <noscript> <p>No JS Support!.</p> </noscript>

Issues Cross-browser support DOM (Document Object Model) might be too complicated So HTML page structure No compile time checking No compile time at all :) Can be easily disabled Security: XSS (Cross-site scripting), CSRF (Cross-site request forgery) Not easily testable code

What is jQuery? JavaScript library Cross-browser support Aimed for client-side scripting Released in 2006 Most popular JS library today FOSS (Free and Open Source Software) Licensed under MIT license and GPLv2 Under active development, industry support www.jquery.com You’ll only need the jquery-1.2.6.min.js file and one line: <script type="text/javascript" src="jquery-1.2.6.min.js“></script> to enable all the goodness!

jQuery features DOM elements: select, modify Events CSS handling Flashy effects Ajax Plugin framework Some utility functions (browser version) Very easy to use! And still everything should be cross-browser supported!

The Focus of jQuery Thanks to John Resig (JavaScript and jQuery, ACM Northeastern University) jQuery object $ (also valid: jQuery(”div”)… )

Examples $(”div”) Selects all divs $(”.myClass”) Selects all items with myClass class $(”#myId”) Selects all items with myId id (should be just one!) $(”div.myClass”) Selects all divs with myClass class $(”div.myClass”).append(”<p>Text text text</p>”); Appends paragrahps to selected divs $(”#myId”).css({font-weight: ”bold”});

Test page <!DOCTYPE html> <head> <title>jQuery test</title> </head> <body> <script src="jquery-1.6.2.min.js"></script> <script> $(document).ready(function(){ $(".changeMe").append("<p>Testing append</p>"); }); </script> <div class="changeMe">Text1</div> <div class="dontChangeMe">Text2<div> </body> </html> See more at: http://ejohn.org/files/javascript.pdf

Examples $(document).ready(function(){ $("a"). click (function(event){ alert(“You clicked a link, but I won’t let you away"); event.preventDefault(); }); }); $(document).ready(function(){ $("div"). hover (function () { $(this).append($("<span> Selected!</span>")); }, function () { $(this).find("span:last").remove(); }); });

$.ajax example $.ajax({ url: 'ajax/endpoint', success: function(data) { $('#resultDiv').html(data); alert('DONE!'); } });

Animation examples $(document).ready(function(){ $("a").click(function(event){ event.preventDefault(); $(this). hide("slow"); }); }); $(document).ready(function(){ $('div').click(function() { $('#dilbert'). slideToggle ('slow', function() {}); }); });

jQuery UI http://jqueryui.com/ Built on top of the jQuery library Includes Widgets Effects Animations All including theme support , cross browser support, styling, internationalization etc.

Using e.g. accordion widget <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script src="jquery-1.6.2.min.js"></script> <script src="ui/jquery.ui.core.js"></script> <script src="ui/jquery.ui.widget.js"></script> <script src="ui/jquery.ui.accordion.js"></script> ... $(function() { $( "#accordion" ).accordion({ autoHeight: false, navigation: true }); });

Web resources http://jquery.com/ http://jqueryui.com/ http://www.w3schools.com/js/default.asp http://www.learningjquery.com/ http://woorkup.com/2011/05/12/jquery-visual-cheat-sheet-1-6/ http://net.tutsplus.com/tutorials/javascript-ajax/simple-draggable-element-persistence-with-jquery/ https://developer.mozilla.org/en/JavaScript

Further reading jQuery in Action by Bear Bibeault and Yehida Kayz (Manning) Learning jQuery 1.3 by Jonathan Chaffer and Karl Swedberg (Packt) jQuery Cookbook by Cody Lindley (O’Reilly) jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie (SitePoint) JavaScript, A Beginner’s Guide by John Pollock (McGraw-Hill) JavaScript: The Definitive Guide by David Flanagan (O’Reilly)

www.lindorff.fi Thank you! Tomi Juhola Development Lead mobile: +358 44 033 8639 [email_address] www.lindorff.fi Joukahaisenkatu 2 FI-20100 Turku

jQuery introduction

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to jQuery introduction (20)

Recently uploaded (20)

jQuery introduction