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
Last revisionBoth sides next revision
eg-259:ch14 [2013/02/27 00:42] – [Using CDN] eechriseg-259:ch14 [2013/03/05 15:58] – [What's Next?] eechris
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 137: 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 142: 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 200: 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 217: 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 270: 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 313: 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 332: 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 772: 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 782: 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 824: 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.txt · Last modified: 2013/03/05 15:59 by eechris