ICCT Wiki

User Tools

Site Tools

Trace: • lecture3 • lecture14
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
eg-259:ch14 [2013/02/26 20:54] – [jQuery Mobile] eechriseg-259:ch14 [2013/03/05 15:59] (current) – [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 744: 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 755: 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 769: 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 779: 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 809: 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 821: Line 826:
 ===== What's Next? ===== ===== What's Next? =====
  
-**Model View Controller Frameworks (Part 1)**+**JavaScript MVC Frameworks** 
 + 
 +  * [[http://pear.ly/bZDEX|Guided Tour of Client-Side MVC Frameworks]] (Pearltrees) 
 +  * Introduction to Blackboard.js
  
-[[eg-259:lecture8|Previous Lecture]] | [[eg-259:home]] | [[eg-259:ch15|Next Lecture]]+[[eg-259:lecture8|Previous Lecture]] | [[eg-259:home]]  | [[eg-259:ch15|Next Lecture]]
eg-259/ch14.1361912048.txt.gz · Last modified: 2013/02/26 20:54 by eechris