ICCT Wiki

User Tools

Site Tools

Trace: • ch14 • 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/27 00:42] – [Using CDN] eechriseg-259:ch14 [2013/03/05 15:59] (current) – [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.1361925754.txt.gz · Last modified: 2013/02/27 00:42 by eechris