Modern JavaScript Develop And Design Instructor’s Notes Chapter 2- JavaScript in Action Modern JavaScript Design And Develop Copyright © 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

HTML5 The next logical HTML standard Not yet standardized Lots of new useful features, especially in forms Many features are usable today

HTML5 Template HTML5 Template

New HTML5 Input Types number range search tel url

New HTML5 Form Attributes autofocus placeholder required maxlength on textareas novalidate (on entire form)

Adding JavaScript to HTML // Actual JavaScript code goes here.

Understanding Paths Absolute Start at a fixed location, such as the Web root directory Normally begin with 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 Example Including script.js from page.html /js/script.js s/script.js js/script.js./js/script.js

Development Approaches Graceful degradation Progressive enhancement Unobtrusive JavaScript

Graceful Degradation HTML5 Template You must have JavaScript enabled!

Progressive Enhancement

Object Detection if (/* some object is defined */) { // Use that object! }

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

Obtrusive JavaScript A Link

A Basic Example Start with the HTML Establish baseline functionality Add a JavaScript layer, unobtrusively Add enhanced functionality, when supported

An HTML Form Login Address Password

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 = function window.onload = init; loginForm.onsubmit = validateForm;

Referencing Elements var = document.getElementById(' '); 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 Validation if ( ( .value.length > 0) && (password.value.length > 0) ) { return true; } else { alert('Please complete the form!'); return false; }