View
6.607
Download
3
Category
Preview:
DESCRIPTION
Citation preview
JavaScript From Scratch“Writing JavaScript Applications”
1
Agenda
• Planning
• Developing
• Deploying
2
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
How does it work naked?
• Never make JavaScript a requirement
• It doesn’t matter how many people have it enabled
4
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
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
Script Tags
<script type=“text/javascript” src=“/path/to/foo.js”></script>
7
External vs Internal
• JavaScript should be external wherever possible
• Internal scripts:
• Should be short and simple
• Wrap in <![CDATA[ ... ]]>
8
Location of Scripts
• Script tags can go in the <head> or <body>
• You should always put them as close to </body> as possible
9
Deferred Execution
• Wait until the page loads before you execute your code
• window.onload is good, but...
• DOMContentReady is better (or something similiar)
10
Deferred Execution
window.onload = function () { var loginForm = document.getElementById(‘foo’); loginForm.onsubmit = function () { // code ... };};
A bare-bones example
11
Deferred Execution
mcd.dom.ready(function () { var loginForm = document.getElementById(‘foo’); loginForm.onsubmit = function () { // code ... };});
Using mcd-js
12
Deferred Execution
$(function () { var loginForm = document.getElementById(‘foo’); loginForm.onsubmit = function () { // code ... };});
Using jQuery
13
Nomenclature
• Use a semantic naming convention
• Variables and functions should say exacltly what they are/do
• Don’t be afraid of long names!
14
Problem: Print Buttons
<a href=“#important-information”> Print Important Information</a>
15
Solution: Print Buttons
<a onclick=“window.print()” href=“#important-information”> Print Important Information</a>
The Wrong Way
16
Solution: Print Buttons
<a id=“print” href=“#important-information”> Print Important Information</a>
The Right Way (Part 1)
17
Solution: Print ButtonsThe Right Way (Part 2)
var printTrigger = document.getElementById(‘print’);
printTrigger.onclick = function () { window.print();}
18
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
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
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
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
Solution: Form Validation
var ageChecker = document .getElementById(‘age-checker’);
var ageInput = document.getElementById(‘age’);
var submitButton = document.getElementById(‘submit’);
23
Solution: Form Validation
var ageValidator = function () { if (ageInput.value < 21) { alert(‘Sorry. Too young’); return false; } else { return true; }};
24
Solution: Form Validation
ageChecker.onsubmit = ageValidator;
25
The Pattern
• Get ahold of all your elements ahead of time
• Write functions to handle your desired behavior
• Apply the event handlers
26
JSLint
• Analyzes JavaScript code
• Offers suggestions for improvement
• Will hurt your feelings
• Will make you a better programmer
• http://jslint.com
27
Code Compression
• Minification:
• Strips all comments
• Strips most whitespace
• Indentation/Newlines
• Sometimes between operators
• http://www.jsmin.com/
28
Code Compression
• Obfuscation:
• Minifies JavaScript
• Refactors your code to be shorter
• Can be regressive
• Dean Edwards’ Packer
29
Don’t Get Tempted...
• There is no excuse for these in production applications
• document.write()
• alert()
• eval()
30
Recommended