ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:ch14

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
eg-259:ch14 [2013/02/26 19:40] – [Events] eechriseg-259:ch14 [2013/02/28 20:23] – [What's Next?] eechris
Line 22: Line 22:
 ---- ----
  
-JavaScript is a small language that can be covered in about two weeks worth of lectures if you already know a c-like programming language. Unlike technologies like .NET, Java and Cocoa, it doesn't come with large numbers of libraries and objects that we can use to develop we applications. Unfortunately, even for the limited requirement of manipulating the DOM, differences between browsers make JavaScript more challenging than it should be. Fortunately, many of the problems can be solved using JavaScipt itself, and even better, solutions have been made into open source libraries that have been shared on the Internet.+JavaScript is a small language that can be covered in about two weeks worth of lectures if you already know a c-like programming language. Unlike technologies like .NET, Java and Cocoa, it doesn't come with large numbers of libraries and objects that we can use to develop web applications. Unfortunately, even for the limited requirement of manipulating the DOM, differences between browsers make JavaScript more challenging than it should be. Fortunately, many of the problems can be solved using JavaScipt itself, and even better, solutions have been made into open source libraries that have been shared on the Internet.
          
          
Line 43: Line 43:
   * [[eg-259:ch14#jQuery|jQuery]]   * [[eg-259:ch14#jQuery|jQuery]]
   * [[eg-259:ch14#Example|Example]]   * [[eg-259:ch14#Example|Example]]
-  * [[eg-259:ch14#jQuery_UI Components|jQuery UI Components]]+  * [[eg-259:ch14#jQuery_UI Components|jQuery UI Components and jQuery Mobile]]
   * [[eg-259:ch14#Using_CDN|Using CDN]]   * [[eg-259:ch14#Using_CDN|Using CDN]]
- 
  
 ===== Learning Outcomes ==== ===== Learning Outcomes ====
Line 74: Line 73:
   - Give an example of jQuery's animation method.   - Give an example of jQuery's animation method.
   - What widgets does the standard JQuery UI library contain?   - What widgets does the standard JQuery UI library contain?
 +  - What advantages does jQuery mobile offer the developer of mobile web apps?
   - Why is jQuery code usually embedded in an anonymous function passed as a parameter to the ''jQuery("document").ready()'' function?   - Why is jQuery code usually embedded in an anonymous function passed as a parameter to the ''jQuery("document").ready()'' function?
   - What advantage does loading a JavaScript library from a CDN have?   - What advantage does loading a JavaScript library from a CDN have?
Line 136: Line 136:
 ===== Using Libraries ===== ===== Using Libraries =====
  
 +Load [[http://localhost:4567/eg-259/examples/lecture10/template_4js.html|template_4js.html]]
 <code html> <code html>
 <!DOCTYPE html> <!DOCTYPE html>
Line 141: Line 142:
   <head><meta charset="utf-8" />   <head><meta charset="utf-8" />
     <title> Loading JavaScript libraries</title>     <title> Loading JavaScript libraries</title>
 +    <!-- Modernizr loaded first so that it can do it's job -->
 +    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
   </head>   </head>
   <body>   <body>
     <p>According to current best practice, you should load your scripts last.</p>     <p>According to current best practice, you should load your scripts last.</p>
     <p>Order is important!</p>     <p>Order is important!</p>
-    <script src="some_library.js"></script> +    <script src="js/vendor/some_library.js"></script> 
-    <script src="useful_functions.js"></script> +    <script src="js/useful_functions.js"></script> 
-    <script src="app_scripts.js"></script>+    <script src="js/app_scripts.js"></script>
     <script>     <script>
       // custom per page scripts here       // custom per page scripts here
Line 199: Line 202:
   * Elements returned can be further //filtered//   * Elements returned can be further //filtered//
   * Elements returned can all be manipulated by chaining functions   * Elements returned can all be manipulated by chaining functions
- 
-===== Fiddle with jQuery ===== 
- 
-**Play with this example on [[http://jsfiddle.net/cpjobling/pvknH/10/|jsFiddle]]** 
  
 ===== jQuery Features ===== ===== jQuery Features =====
Line 216: Line 215:
 ---- ----
 The best place to find out about these is by following the links to the jQuery API Documentation on the main [[http://docs.jquery.com/Main_Page|Documentation Page]]. The best place to find out about these is by following the links to the jQuery API Documentation on the main [[http://docs.jquery.com/Main_Page|Documentation Page]].
 +
 +===== Fiddle with jQuery =====
 +
 +**Play with this example on [[http://jsfiddle.net/cpjobling/pvknH/12/|jsFiddle]]**
 +
 ===== jQuery Selection ===== ===== jQuery Selection =====
  
Line 269: Line 273:
  
   * Filtering by equivalent of CSS pseudo classes   * Filtering by equivalent of CSS pseudo classes
-  * See this example on [[http://jsfiddle.net/cpjobling/45Uw6/2/|jsFiddle]]+  * See this example on [[http://jsfiddle.net/cpjobling/45Uw6/3/|jsFiddle]]
  
 <code javascript> <code javascript>
Line 312: Line 316:
 Functions that help you move around the selection set: Functions that help you move around the selection set:
 <code javascript> <code javascript>
-jQuery('p').add('<span>A Span</span>');+jQuery('p').append('<span>A Span</span>');
 var children = jQuery('p').children(); var children = jQuery('p').children();
 jQuery('li').each(function(index) { jQuery('li').each(function(index) {
Line 331: Line 335:
 jQuery('p').hide().css({'border', '3px solid red'}).fadeIn(2000); jQuery('p').hide().css({'border', '3px solid red'}).fadeIn(2000);
 </code> </code>
-To play with this example see  this [[http://jsfiddle.net/cpjobling/Ms6L4/1/|jsFiddle]]+To play with this example see  this [[http://jsfiddle.net/cpjobling/Ms6L4/7/|jsFiddle]]
  
 See [[http://api.jquery.com/category/manipulation/|jQuery Manipulation]] for more DOM manipulation functions and examples. See [[http://api.jquery.com/category/manipulation/|jQuery Manipulation]] for more DOM manipulation functions and examples.
Line 427: Line 431:
   5000, function() { alert('Animation complete') });   5000, function() { alert('Animation complete') });
 </code> </code>
 +
 +Play with animation using this [[http://jsfiddle.net/cpjobling/gBgW8/7/|jsFiddle]]
  
 For more information and examples see [[http://api.jquery.com/category/effects/|jQuery Effects]] For more information and examples see [[http://api.jquery.com/category/effects/|jQuery Effects]]
Line 485: Line 491:
  
   * [[http://localhost:4567/eg-259/examples/lecture10/jquery_events.html|jquery_events.html]]   * [[http://localhost:4567/eg-259/examples/lecture10/jquery_events.html|jquery_events.html]]
 +
 +----
 +The Markup:
 +<code html>
 +<!DOCTYPE html>
 +<!-- validator.html
 +An example of input validation using the change and submit
 +events
 +-->
 +<html class="no-js" lang="en">
 +  <head>
 +    <meta charset="utf-8">
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +    <title>Illustrate form input validation</title>
 +    <meta name="viewport" content="width=device-width">
 +
 +    <link rel="stylesheet" href="css/bootstrap.min.css">
 +    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
 +    <link rel="stylesheet" href="css/main.css">
 +
 +    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
 +  </head>
 +  <body>
 +    <div class="container">
 +         <h1>Illustrating jQuery</h1>
 +
 +        <section>
 +             <h2> jQuery Events </h2>
 +
 +            <form id="myForm" action="/cgi-bin/echo_params.cgi">
 +                <fieldset>
 +                    <legend>Types of Plane</legend>
 +                    <div class="control-group">
 +                        <label class="radio">
 +                            <input type="radio" name="planeButton" value="152" />Model 152</label>
 +                        <label class="radio">
 +                            <input type="radio" name="planeButton" value="172" />Model 172 (Skyhawk)</label>
 +                        <label class="radio">
 +                            <input type="radio" name="planeButton" value="182" />Model 182 (Skylane)</label>
 +                        <label class="radio">
 +                            <input type="radio" name="planeButton" value="210" />Model 210 (Centurian)</label>
 +                    </div>
 +                </fieldset>
 +            </form>
 +        </section>
 +        <section>
 +             <h2>Simplified Event Regsitration</h2>
 +
 +            <ol>
 +                <li>Add an event listener to button labelled "Target" that shows an alert
 +                    when it is clicked</li>
 +                <li>Add an event listener to button labelled "Other" that clicks the "Target"
 +                    button.</li>
 +                <div class="control-group">
 +                    <button id="target" class="btn">Target</button>
 +                    <button id="other" class="btn">Other</button>
 +                </div>
 +            </ol>
 +        </section>
 +        <section>
 +             <h2>The jQuery event object</h2>
 +
 +            <div id="outer">
 +                <p>The event will bubble out from the button in the inner div. It should
 +                    stop bubbling before it reaches the outer div and the form should not submit.</p>
 +                <div
 +                id="inner">
 +                    <form name="myForm" action="http://www.google.co.uk/#hl=en" class="form-search">
 +                        <div class="input-append">
 +                            <input type="text" placeholder="type something" name="q" class="span2 search-query"
 +                            />
 +                            <button class="btn" type="submit">Search</button>
 +                        </div>
 +                    </form>
 +            </div>
 +            <!-- inner -->
 +    </div>
 +    <!-- outer -->
 +    </section>
 +    </div>
 +    <!-- /container -->
 +
 +    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 +    <script src="js/vendor/bootstrap.min.js"></script>
 +    <script src="js/plugins.js"></script>
 +    <!-- Any external JS loaded here -->
 +    <script src="jquery_events.js"></script>
 +  </body>
 +</html>
 +</code>
 +
 +The JavaScript:
 +<code javascript>
 +$(document).ready(function() {
 +    // The event handler for a radio button collection
 +
 +    var planeChoice = function (plane) {
 +
 +        // Produce an alert message about the chosen airplane
 +
 +        switch (plane) {
 +            case "152":
 +                alert("A small two-place airplane for flight training");
 +                break;
 +            case "172":
 +                alert("The smaller of two four-place airplanes");
 +                break;
 +            case "182":
 +                alert("The larger of two four-place airplanes");
 +                break;
 +            case "210":
 +                alert("A six-place high-performance airplane");
 +                break;
 +            default:
 +                alert("Error in JavaScript function planeChoice");
 +                break;
 +        }
 +    };
 +
 +    var describeEvent = function(event, source) {
 +        console.log("Handler caught " + event.type + " event from " + source);
 +        console.log("Original target")
 +        console.log(event.target);
 +        console.log("Current target");
 +        console.log(event.currentTarget);
 +        console.log("Mouse coordinates: [" + event.pageX + ", " + event.pageY + "]");
 +    };
 +
 +    // Register event handlers for radio buttons
 +    $('[name="planeButton"]').on("click", function(event) {
 +        console.log(describeEvent(event,"planeButton"));
 +        plane = $(this).val();
 +        console.log("Button " + plane + " clicked");
 +        planeChoice(plane);
 +    });
 +
 +    // Simplified event registration
 +    $('#target').click(function(event) {
 +        console.log(describeEvent(event,"Target Button"));
 +        alert("Target button clicked");
 +    });
 +
 +    $('#other').click(function(event) {
 +        console.log(describeEvent(event,"Other Button"));
 +        alert("Other button clicked ... now clicking 'target'");
 +        $('#target').click();
 +    });
 +
 +
 +    // The jQuery event object - allows us to explore bubbling
 +    jQuery('button[type="submit"]').on("click", function(event) {
 +        describeEvent(event, "'Search' button");
 +        // stop form being submitted
 +        event.preventDefault();
 +    });
 +
 +    jQuery('#inner').on("click", function(event) {
 +        describeEvent(event, "'#inner' div");
 +        // stop bubbling here
 +        event.stopPropagation();
 +    });
 +
 +    jQuery('#outer').on("click", function(event) {
 +        // should never fire!
 +        describeEvent(event, "'#outer' div");
 +    });
 +
 +});
 +</code>
 ===== The Form Validator Again ===== ===== The Form Validator Again =====
  
Line 557: Line 732:
   * Too many to describe here.   * Too many to describe here.
   * See [[http://jqueryui.com/home|jQuery UI]]   * See [[http://jqueryui.com/home|jQuery UI]]
 +
 +===== jQuery Mobile =====
 +
 +> "Query Mobile is a touch-optimized HTML5 UI framework designed to make sites and apps that are accessible on all popular smartphone, tablet and desktop devices." -- [[http://jquerymobile.com/|jQuery Mobile]]
 +
 +  * A set of widgets
 +  * Events optimised for touch interfaces provided by tablets and mobile phones
 +  * Designed for responsive web design
 +  * Built on HTML5
 +
 +See the [[http://jquerymobile.com/|demos on the home page]].
 ===== Using CDN ===== ===== Using CDN =====
  
Line 562: Line 748:
   * E.g. using the Google API Code CDN   * E.g. using the Google API Code CDN
 <code javascript> <code javascript>
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> +  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
-  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
   <script src="script.js"></code>   <script src="script.js"></code>
 </code> </code>
 +
 +(Versions 1.9.1 of jQuery and 1.10.1 were the latest stable versions at time of last delivery of this session.)
  
 ---- ----
Line 573: Line 761:
 If you have an encrypted site, you need to download your resources from an encrypted source to avoid complaints from your browser. If you use If you have an encrypted site, you need to download your resources from an encrypted source to avoid complaints from your browser. If you use
 <code javascript> <code javascript>
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> +  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
-  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>+  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
   <script src="script.js"></code>   <script src="script.js"></code>
 </code> </code>
  
-The protocol will match whatever the enclosing page was. So if you access the page from ''%%http://...%%'' it will get ''http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'' if your page was encypted it will have used ''%%https://...%%'' and the library will be loaded using ''https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js''+The protocol will match whatever the enclosing page was. So if you access the page from ''%%http://...%%'' it will get ''http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'' if your page was encypted it will have used ''%%https://...%%'' and the library will be loaded using ''https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js''
 ===== Summary of this Session ===== ===== Summary of this Session =====
  
Line 587: Line 775:
   * [[eg-259:ch14#jQuery|jQuery]]   * [[eg-259:ch14#jQuery|jQuery]]
   * [[eg-259:ch14#Example|Example]]   * [[eg-259:ch14#Example|Example]]
-  * [[eg-259:ch14#jQuery_UI Components|jQuery UI Components]]+  * [[eg-259:ch14#jQuery_UI Components|jQuery UI Components and jQuery Mobile]]
   * [[eg-259:ch14#Using_CDN|Using CDN]]   * [[eg-259:ch14#Using_CDN|Using CDN]]
 ===== References ===== ===== References =====
Line 597: Line 785:
  
   - For a free alternative to the lynda.com tutorials see Buck Rogers, //jQuery Tutorial (200 videos)//, __thenewboston.com__, URL: [[http://thenewboston.org/list.php?cat=32]], last accessed 18 February 2012.   - For a free alternative to the lynda.com tutorials see Buck Rogers, //jQuery Tutorial (200 videos)//, __thenewboston.com__, URL: [[http://thenewboston.org/list.php?cat=32]], last accessed 18 February 2012.
-  - The [[http://jquery.com|jQuery]] and [[http://jquery-ui.com|jQuery UI]] sites are themselves a rich source of tutorial, documentation and demonstrations. +  - The [[http://jquery.com|jQuery]], [[http://jquery-ui.com|jQuery UI]] and [[http://jquerymobile.com/|jQuery Mobile]] sites are themselves a rich source of tutorials, documentation and demonstrations. 
- +  - Codecademy offers a [[http://www.codecademy.com/tracks/jquery|free jQuery course]] and there is an //official// jQuery self-learning resource creaded by [[http://www.codeschool.com/|codeschool.com]] at [[http://try.jquery.com|try.jquery.com]].
 ===== Learning Outcomes ==== ===== Learning Outcomes ====
  
Line 627: Line 814:
   - Give an example of jQuery's animation method.   - Give an example of jQuery's animation method.
   - What widgets does the standard JQuery UI library contain?   - What widgets does the standard JQuery UI library contain?
 +  - What advantages does jQuery mobile offer the developer of mobile web apps?
   - Why is jQuery code usually embedded in an anonymous function passed as a parameter to the ''jQuery("document").ready()'' function?   - Why is jQuery code usually embedded in an anonymous function passed as a parameter to the ''jQuery("document").ready()'' function?
   - What advantage does loading a JavaScript library from a CDN have?   - What advantage does loading a JavaScript library from a CDN have?
- 
  
  
Line 639: Line 826:
 ===== What's Next? ===== ===== What's Next? =====
  
-**The Rest of HTML5**+**Model View Controller Frameworks (Part 1)**
  
-A guided tour+On Blackboard only at the moment!
  
-[[eg-259:lecture8|Previous Lecture]] | [[eg-259:home]] | [[eg-259:ch15|Next Lecture]]+[[eg-259:lecture8|Previous Lecture]] | [[eg-259:home]] 
eg-259/ch14.txt · Last modified: 2013/03/05 15:59 by eechris