Modern JavaScript Develop And Design Instructor’s Notes Chapter 2- JavaScript in Action Modern JavaScript Design And Develop Copyright © 2012 by Larry

Modern JavaScriptDevelop And Design

Instructor’s NotesChapter 2- JavaScript in Action

Modern JavaScript Design And DevelopCopyright © 2012 by Larry Ullman

Objectives

• Explain what a DOCTYPE is and why it matters to Web pages

• Identify the two browser operating modes

• Write the HTML5 DOCTYPE• Create an HTML5 template• Use the new HTML5 form elements

and attributes

More Objectives

• Embed JavaScript in HTML• Understand how to properly write file

paths• Define and demonstrate key

JavaScript development approaches• Learn the basics of event handling• Retrieve a reference to a page

element

Even More Objectives

• Recognize when the browser window is ready for dynamic behavior

• Define a simple user function.• Perform basic validation of an

HTML form

Document Type Declaration

• Should be the first line of an HTML page

• Tells the browser what kind of HTML to expect, and therefore what kind of features to support

• Impacts how the page looks and behaves

• Provides instruction to validators

Older DOCTYPEs

• HTML (2.0, 3.2, 4.01)• XHTML (1.0, 1.1)• Strict, Transitional, Frameset

Browser Modes

• Browser modes are dictated by the DOCTYPE

• Two modes: Standards and Quirks• Invalid DOCTYPEs and improper

HTML can trigger Quirks mode

HTML5 DOCTYPE

•Short, easy to type•Supported by all major browsers•Automatically triggers Standards mode•Allows you to begin using HTML5 features

<!DOCTYPE html>

HTML5

• The next logical HTML standard• Not yet standardized• Lots of new useful features,

especially in forms• Many features are usable today

HTML5 Template<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>HTML5 Template</title> <link rel="stylesheet" href="css/styles.css?v=1.0"> </head><body> <script src="js/scripts.js"></script></body></html>

New HTML5 Input Types

• email• number• range• search• tel• url

New HTML5 Form Attributes

• autofocus• placeholder• required• maxlength on textareas• novalidate (on entire form)

Adding JavaScript to HTML

<script></script>

<script src="path/to/script.js"></script>

<script>// Actual JavaScript code goes here.</script>

Understanding Paths

Absolute• Start at a fixed

location, such as the Web root directory

• Normally begin with http:// or just /.

• The same absolute path is correct regardless of where the including file is.

Relative• Start at the current

location (i.e., the current file’s location).

• Begin with a file name, a folder name, or a period.

• A relative path is only correct for files with the same relative positions.

Paths ExampleIncluding script.js from page.html

• /js/script.js• http://

www.example.com/js/script.js

• js/script.js• ./js/script.js

js

Web root

page.html

script.js

Development Approaches

• Graceful degradation• Progressive enhancement• Unobtrusive JavaScript

Graceful Degradation

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>HTML5 Template</title> <link rel="stylesheet" href="css/styles.css?v=1.0"> </head><body> <script src="js/scripts.js"></script> <noscript>You must have JavaScript enabled!</noscript></body></html>

Progressive Enhancement

<script

var

a=

var xl

if(xls

Base Functionality

J avaScript

CSS

Modern Browsers

Older Browsers

Enhanced Functionality

Object Detection

<script>if (/* some object is defined */) { // Use that object!}</script>

Unobtrusive JavaScript

• Easier to read and maintain• Can be progressively enhanced• Does not require JavaScript to be

enabled

Obtrusive JavaScript

<a href="javascript:createWindow();">A Link</a>

<form action="somepage.php" method="post" onsubmit="return validateForm();">

A Basic Example

• Start with the HTML• Establish baseline functionality• Add a JavaScript layer,

unobtrusively• Add enhanced functionality, when

supported

An HTML Form

<form action="login.php" method="post" id="loginForm"> <fieldset> <legend>Login</legend> <div><label for="email">Email Address</label><input type="email" name="email" id="email" required></div> <div><label for="password">Password</label><input type="password" name="password" id="password" required></div> <div><label for="submit"></label><input type="submit" value="Login →" id="submit"></div> </fieldset></form><script src="js/login.js"></script>

Baseline Functionality

• By default, the form gets submitted to a server-side script.

• That functionality works on any device that can load an HTML form.

The JavaScript Layer

• Hijack the form submission.• Validate the form data.• If valid, allow the submission to go

through to the server.• If invalid, display errors.

Handling Events

• Event handler = call this function when this event occurs on this element.

• In JavaScript code: element.onevent = functionwindow.onload = init;

loginForm.onsubmit = validateForm;

Referencing Elements

var email = document.getElementById('email');var password = document.getElementById('password');var loginForm = document.getElementById('loginForm');

Defining a Function

function functionName() { // Function code.}

function init() { var loginForm = document.getElementById('loginForm'); loginForm.onsubmit = validateForm;

} // End of init() function.

Strict Mode

function init() { ‘use strict’; var loginForm = document.getElementById('loginForm'); loginForm.onsubmit = validateForm;

} // End of init() function.

Simple Validationif ( (email.value.length > 0) && (password.value.length > 0) ) { return true;} else { alert('Please complete the form!'); return false;}

Documents

Modern JavaScript Develop And Design Instructor’s Notes Chapter 2- JavaScript in Action Modern JavaScript Design And Develop Copyright © 2012 by Larry