• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery introduction
 

jQuery introduction

on

  • 2,872 views

Basics of JavaScript & jQuery. Quick intro targeted for a more hands on CodeCamp style sessions

Basics of JavaScript & jQuery. Quick intro targeted for a more hands on CodeCamp style sessions

Statistics

Views

Total Views
2,872
Views on SlideShare
2,869
Embed Views
3

Actions

Likes
4
Downloads
0
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery introduction jQuery introduction Presentation Transcript

    • 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
    • JavaScript Basics 01
    • 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=&quot;text/javascript&quot;>
      • 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
    • jQuery Basics 02
    • 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=&quot;text/javascript&quot; src=&quot;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!
    • DOM manipulation 03
    • 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=&quot;jquery-1.6.2.min.js&quot;></script>
      • <script>
      • $(document).ready(function(){
      • $(&quot;.changeMe&quot;).append(&quot;<p>Testing append</p>&quot;);
      • });
      • </script>
      • <div class=&quot;changeMe&quot;>Text1</div>
      • <div class=&quot;dontChangeMe&quot;>Text2<div>
      • </body>
      • </html>
      • See more at: http://ejohn.org/files/javascript.pdf
    • Events 04
    • Examples
      • $(document).ready(function(){
      • $(&quot;a&quot;). click (function(event){
      • alert(“You clicked a link, but I won’t let you away&quot;);
      • event.preventDefault();
      • });
      • });
      • $(document).ready(function(){
      • $(&quot;div&quot;). hover (function () {
      • $(this).append($(&quot;<span> Selected!</span>&quot;));
      • },
      • function () {
      • $(this).find(&quot;span:last&quot;).remove();
      • });
      • });
    • $.ajax example
      • $.ajax({
      • url: 'ajax/endpoint',
      • success: function(data) {
      • $('#resultDiv').html(data);
      • alert('DONE!');
      • }
      • });
    • Animations 05
    • Animation examples
      • $(document).ready(function(){
      • $(&quot;a&quot;).click(function(event){
      • event.preventDefault();
      • $(this). hide(&quot;slow&quot;);
      • });
      • });
      • $(document).ready(function(){
      • $('div').click(function() {
      • $('#dilbert'). slideToggle ('slow', function() {});
      • });
      • });
    • jQuery UI 06
    • 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=&quot;stylesheet&quot; href=&quot;themes/base/jquery.ui.all.css&quot;>
      • <script src=&quot;jquery-1.6.2.min.js&quot;></script>
      • <script src=&quot;ui/jquery.ui.core.js&quot;></script>
      • <script src=&quot;ui/jquery.ui.widget.js&quot;></script>
      • <script src=&quot;ui/jquery.ui.accordion.js&quot;></script>
      • ...
      • $(function() {
      • $( &quot;#accordion&quot; ).accordion({
      • autoHeight: false,
      • navigation: true
      • });
      • });
    • Additional resources 07
    • 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