eg-259:ch14
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-259:ch14 [2013/02/26 20:50] – [jQuery UI Components] eechris | eg-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' | + | 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' |
| | ||
| | ||
Line 43: | Line 43: | ||
* [[eg-259: | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
- | * [[eg-259: | + | * [[eg-259: |
* [[eg-259: | * [[eg-259: | ||
- | |||
===== Learning Outcomes ==== | ===== Learning Outcomes ==== | ||
Line 74: | Line 73: | ||
- Give an example of jQuery' | - Give an example of jQuery' | ||
- 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 '' | - Why is jQuery code usually embedded in an anonymous function passed as a parameter to the '' | ||
- 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:// | ||
<code html> | <code html> | ||
< | < | ||
Line 141: | Line 142: | ||
< | < | ||
< | < | ||
+ | <!-- Modernizr loaded first so that it can do it's job --> | ||
+ | <script src=" | ||
</ | </ | ||
< | < | ||
< | < | ||
< | < | ||
- | <script src=" | + | <script src="js/vendor/some_library.js"></ |
- | <script src=" | + | <script src="js/useful_functions.js"></ |
- | <script src=" | + | <script src="js/app_scripts.js"></ |
< | < | ||
// custom per page scripts here | // custom per page scripts here | ||
Line 199: | Line 202: | ||
* Elements returned can be further // | * Elements returned can be further // | ||
* 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:// | ||
===== 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:// | The best place to find out about these is by following the links to the jQuery API Documentation on the main [[http:// | ||
+ | |||
+ | ===== Fiddle with jQuery ===== | ||
+ | |||
+ | **Play with this example on [[http:// | ||
+ | |||
===== 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:// | + | * See this example on [[http:// |
<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(' | + | jQuery(' |
var children = jQuery(' | var children = jQuery(' | ||
jQuery(' | jQuery(' | ||
Line 331: | Line 335: | ||
jQuery(' | jQuery(' | ||
</ | </ | ||
- | To play with this example see this [[http:// | + | To play with this example see this [[http:// |
See [[http:// | See [[http:// | ||
Line 737: | Line 741: | ||
* Designed for responsive web design | * Designed for responsive web design | ||
* Built on HTML5 | * Built on HTML5 | ||
+ | |||
+ | See the [[http:// | ||
===== Using CDN ===== | ===== Using CDN ===== | ||
Line 742: | Line 748: | ||
* E.g. using the Google API Code CDN | * E.g. using the Google API Code CDN | ||
<code javascript> | <code javascript> | ||
- | <script src=" | + | <script src=" |
- | <script src=" | + | <script src=" |
<script src=" | <script src=" | ||
</ | </ | ||
+ | |||
+ | (Versions 1.9.1 of jQuery and 1.10.1 were the latest stable versions at time of last delivery of this session.) | ||
---- | ---- | ||
Line 753: | 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="// | + | <script src="// |
- | <script src="// | + | <script src="// |
<script src=" | <script src=" | ||
</ | </ | ||
- | The protocol will match whatever the enclosing page was. So if you access the page from '' | + | The protocol will match whatever the enclosing page was. So if you access the page from '' |
===== Summary of this Session ===== | ===== Summary of this Session ===== | ||
Line 767: | Line 775: | ||
* [[eg-259: | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
- | * [[eg-259: | + | * [[eg-259: |
* [[eg-259: | * [[eg-259: | ||
===== References ===== | ===== References ===== | ||
Line 777: | Line 785: | ||
- For a free alternative to the lynda.com tutorials see Buck Rogers, //jQuery Tutorial (200 videos)//, __thenewboston.com__, | - For a free alternative to the lynda.com tutorials see Buck Rogers, //jQuery Tutorial (200 videos)//, __thenewboston.com__, | ||
- | - The [[http:// | + | - The [[http:// |
- | + | - Codecademy offers a [[http:// | |
===== Learning Outcomes ==== | ===== Learning Outcomes ==== | ||
Line 807: | Line 814: | ||
- Give an example of jQuery' | - Give an example of jQuery' | ||
- 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 '' | - Why is jQuery code usually embedded in an anonymous function passed as a parameter to the '' | ||
- What advantage does loading a JavaScript library from a CDN have? | - What advantage does loading a JavaScript library from a CDN have? | ||
- | |||
Line 819: | Line 826: | ||
===== What's Next? ===== | ===== What's Next? ===== | ||
- | **Model View Controller | + | **JavaScript MVC Frameworks** |
+ | |||
+ | * [[http:// | ||
+ | | ||
- | [[eg-259: | + | [[eg-259: |
eg-259/ch14.txt · Last modified: 2013/03/05 15:59 by eechris