JavaScript From Scratch: Writing Java Script Applications

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


<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


• 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


• 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


var ageChecker = document .getElementById(‘age-checker’);

var ageInput = document.getElementById(‘age’);

var submitButton = document.getElementById(‘submit’);

23


var ageValidator = function () { if (ageInput.value < 21) { alert(‘Sorry. Too young’); return false; } else { return true; }};

24


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

Technology

JavaScript From Scratch: Writing Java Script Applications