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
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"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body> <script src="js/scripts.js"></script></body></html>
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
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"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></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
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.