eg-259:ch14
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-259:ch14 [2013/02/26 19:39] – [The jQuery Event Object] eechris | eg-259:ch14 [2013/02/27 08:31] – [DOM Manipulation] 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 371: | Line 375: | ||
* They are used to register behaviors that take effect when the user interacts with the browser, and to further manipulate those registered behaviors. | * They are used to register behaviors that take effect when the user interacts with the browser, and to further manipulate those registered behaviors. | ||
- | To play with events, try this [[http:// | + | To play with events, try this [[http:// |
For a full list of events and event properties see [[http:// | For a full list of events and event properties see [[http:// | ||
Line 427: | Line 431: | ||
5000, function() { alert(' | 5000, function() { alert(' | ||
</ | </ | ||
+ | |||
+ | Play with animation using this [[http:// | ||
For more information and examples see [[http:// | For more information and examples see [[http:// | ||
Line 485: | Line 491: | ||
* [[http:// | * [[http:// | ||
+ | |||
+ | ---- | ||
+ | The Markup: | ||
+ | <code html> | ||
+ | < | ||
+ | <!-- validator.html | ||
+ | An example of input validation using the change and submit | ||
+ | events | ||
+ | --> | ||
+ | <html class=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta http-equiv=" | ||
+ | < | ||
+ | <meta name=" | ||
+ | |||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | |||
+ | <script src=" | ||
+ | </ | ||
+ | < | ||
+ | <div class=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | <form id=" | ||
+ | < | ||
+ | < | ||
+ | <div class=" | ||
+ | <label class=" | ||
+ | <input type=" | ||
+ | <label class=" | ||
+ | <input type=" | ||
+ | <label class=" | ||
+ | <input type=" | ||
+ | <label class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | |||
+ | <ol> | ||
+ | < | ||
+ | when it is clicked</ | ||
+ | < | ||
+ | button.</ | ||
+ | <div class=" | ||
+ | <button id=" | ||
+ | <button id=" | ||
+ | </ | ||
+ | </ol> | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | |||
+ | <div id=" | ||
+ | < | ||
+ | stop bubbling before it reaches the outer div and the form should not submit.</ | ||
+ | <div | ||
+ | id=" | ||
+ | <form name=" | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | /> | ||
+ | <button class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | <!-- inner --> | ||
+ | </ | ||
+ | <!-- outer --> | ||
+ | </ | ||
+ | </ | ||
+ | <!-- /container --> | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <!-- Any external JS loaded here --> | ||
+ | <script src=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 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 " | ||
+ | alert(" | ||
+ | break; | ||
+ | case " | ||
+ | alert(" | ||
+ | break; | ||
+ | case " | ||
+ | alert(" | ||
+ | break; | ||
+ | case " | ||
+ | alert(" | ||
+ | break; | ||
+ | default: | ||
+ | alert(" | ||
+ | break; | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | var describeEvent = function(event, | ||
+ | console.log(" | ||
+ | console.log(" | ||
+ | console.log(event.target); | ||
+ | console.log(" | ||
+ | console.log(event.currentTarget); | ||
+ | console.log(" | ||
+ | }; | ||
+ | |||
+ | // Register event handlers for radio buttons | ||
+ | $(' | ||
+ | console.log(describeEvent(event," | ||
+ | plane = $(this).val(); | ||
+ | console.log(" | ||
+ | planeChoice(plane); | ||
+ | }); | ||
+ | |||
+ | // Simplified event registration | ||
+ | $('# | ||
+ | console.log(describeEvent(event," | ||
+ | alert(" | ||
+ | }); | ||
+ | |||
+ | $('# | ||
+ | console.log(describeEvent(event," | ||
+ | alert(" | ||
+ | $('# | ||
+ | }); | ||
+ | |||
+ | |||
+ | // The jQuery event object - allows us to explore bubbling | ||
+ | jQuery(' | ||
+ | describeEvent(event, | ||
+ | // stop form being submitted | ||
+ | event.preventDefault(); | ||
+ | }); | ||
+ | |||
+ | jQuery('# | ||
+ | describeEvent(event, | ||
+ | // stop bubbling here | ||
+ | event.stopPropagation(); | ||
+ | }); | ||
+ | |||
+ | jQuery('# | ||
+ | // should never fire! | ||
+ | describeEvent(event, | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | </ | ||
===== The Form Validator Again ===== | ===== The Form Validator Again ===== | ||
Line 557: | Line 732: | ||
* Too many to describe here. | * Too many to describe here. | ||
* See [[http:// | * See [[http:// | ||
+ | |||
+ | ===== 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." | ||
+ | |||
+ | * 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:// | ||
===== 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=" | + | <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 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="// | + | <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 587: | Line 775: | ||
* [[eg-259: | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
- | * [[eg-259: | + | * [[eg-259: |
* [[eg-259: | * [[eg-259: | ||
===== References ===== | ===== References ===== | ||
Line 597: | 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 627: | 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 639: | Line 826: | ||
===== What's Next? ===== | ===== What's Next? ===== | ||
- | **The Rest of HTML5** | + | **Model View Controller Frameworks (Part 1)** |
- | + | ||
- | A guided tour | + | |
[[eg-259: | [[eg-259: |
eg-259/ch14.txt · Last modified: 2013/03/05 15:59 by eechris