JavaScript From Scratch: Writing Java Script Applications
-
Upload
michael-girouard -
Category
Technology
-
view
6.607 -
download
3
description
Transcript of JavaScript From Scratch: Writing Java Script Applications
![Page 1: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/1.jpg)
JavaScript From Scratch“Writing JavaScript Applications”
1
![Page 2: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/2.jpg)
Agenda
• Planning
• Developing
• Deploying
2
![Page 3: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/3.jpg)
Planning JavaScript Applications
• Is JavaScript really needed?
• What functionality is JavaScript helping you to achieve?
• What events will trigger code to run?
• What happens when an error occurs?
3
![Page 4: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/4.jpg)
How does it work naked?
• Never make JavaScript a requirement
• It doesn’t matter how many people have it enabled
4
![Page 5: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/5.jpg)
How Can the UE Improve?
• JavaScript has the ability to progressively enhance the user experience
• How can it become more interactive?
• How can it become more responsive?
5
![Page 6: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/6.jpg)
Consider Another Editor
• Don’t get sucked into the “One IDE to Rule Them All” mentality
• There’s nothing wrong with using multiple editors
6
![Page 7: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/7.jpg)
Script Tags
<script type=“text/javascript” src=“/path/to/foo.js”></script>
7
![Page 8: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/8.jpg)
External vs Internal
• JavaScript should be external wherever possible
• Internal scripts:
• Should be short and simple
• Wrap in <![CDATA[ ... ]]>
8
![Page 9: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/9.jpg)
Location of Scripts
• Script tags can go in the <head> or <body>
• You should always put them as close to </body> as possible
9
![Page 10: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/10.jpg)
Deferred Execution
• Wait until the page loads before you execute your code
• window.onload is good, but...
• DOMContentReady is better (or something similiar)
10
![Page 11: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/11.jpg)
Deferred Execution
window.onload = function () { var loginForm = document.getElementById(‘foo’); loginForm.onsubmit = function () { // code ... };};
A bare-bones example
11
![Page 12: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/12.jpg)
Deferred Execution
mcd.dom.ready(function () { var loginForm = document.getElementById(‘foo’); loginForm.onsubmit = function () { // code ... };});
Using mcd-js
12
![Page 13: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/13.jpg)
Deferred Execution
$(function () { var loginForm = document.getElementById(‘foo’); loginForm.onsubmit = function () { // code ... };});
Using jQuery
13
![Page 14: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/14.jpg)
Nomenclature
• Use a semantic naming convention
• Variables and functions should say exacltly what they are/do
• Don’t be afraid of long names!
14
![Page 15: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/15.jpg)
Problem: Print Buttons
<a href=“#important-information”> Print Important Information</a>
15
![Page 16: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/16.jpg)
Solution: Print Buttons
<a onclick=“window.print()” href=“#important-information”> Print Important Information</a>
The Wrong Way
16
![Page 17: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/17.jpg)
Solution: Print Buttons
<a id=“print” href=“#important-information”> Print Important Information</a>
The Right Way (Part 1)
17
![Page 18: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/18.jpg)
Solution: Print ButtonsThe Right Way (Part 2)
var printTrigger = document.getElementById(‘print’);
printTrigger.onclick = function () { window.print();}
18
![Page 19: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/19.jpg)
Solution: Print Buttons
• Setting event handlers in markup is a bad idea. Don’t do it.
• Unobtrusive JavaScript is more semantic, scalable, and you’ll be a better person because of it.
19
![Page 20: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/20.jpg)
Solution: Print Buttons
• FYI: Pure JavaScript controls should not be in markup
• They should be generated entirely through JavaScript
• We’ll talk more when we get to the DOM
20
![Page 21: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/21.jpg)
Problem: Form Validation
• Make Sure the user is 21 or older
<form ...> <input type=“text” name=“age” /> <input type=“submit” name=“submit” value=“Check Age” /></form>
21
![Page 22: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/22.jpg)
Solution: Form Validation
<form id=“age-checker” ...> <input type=“text” name=“age” id=“age” /> <input type=“submit” name=“submit” id=“submit” value=“Check Age” /></form>
22
![Page 23: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/23.jpg)
Solution: Form Validation
var ageChecker = document .getElementById(‘age-checker’);
var ageInput = document.getElementById(‘age’);
var submitButton = document.getElementById(‘submit’);
23
![Page 24: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/24.jpg)
Solution: Form Validation
var ageValidator = function () { if (ageInput.value < 21) { alert(‘Sorry. Too young’); return false; } else { return true; }};
24
![Page 25: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/25.jpg)
Solution: Form Validation
ageChecker.onsubmit = ageValidator;
25
![Page 26: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/26.jpg)
The Pattern
• Get ahold of all your elements ahead of time
• Write functions to handle your desired behavior
• Apply the event handlers
26
![Page 27: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/27.jpg)
JSLint
• Analyzes JavaScript code
• Offers suggestions for improvement
• Will hurt your feelings
• Will make you a better programmer
• http://jslint.com
27
![Page 28: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/28.jpg)
Code Compression
• Minification:
• Strips all comments
• Strips most whitespace
• Indentation/Newlines
• Sometimes between operators
• http://www.jsmin.com/
28
![Page 29: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/29.jpg)
Code Compression
• Obfuscation:
• Minifies JavaScript
• Refactors your code to be shorter
• Can be regressive
• Dean Edwards’ Packer
29
![Page 30: JavaScript From Scratch: Writing Java Script Applications](https://reader033.fdocuments.net/reader033/viewer/2022061219/54b9eb1d4a7959e4478b4626/html5/thumbnails/30.jpg)
Don’t Get Tempted...
• There is no excuse for these in production applications
• document.write()
• alert()
• eval()
30