Chapter 2 (IS245)

Modern JavaScript
Develop And Design
Instructors 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
<!DOCTYPEhtml>
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
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf8">
<title>HTML5Template</title>
<linkrel="stylesheet"href="css/styles.css?v=1.0">
<![ifltIE9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]>
</head>
<body>
<scriptsrc="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>
//ActualJavaScriptcodegoeshere.
</script>
<scriptsrc="path/to/script.js"></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 files 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
http://www.example.co
m/js/script.js
js/script.js
Web root
./js/script.js
page.html
script.js
js
Development Approaches
Graceful degradation
Progressive enhancement
Unobtrusive JavaScript
Graceful Degradation
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf8">
<title>HTML5Template</title>
<linkrel="stylesheet"href="css/styles.css?v=1.0">
<![ifltIE9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]>
</head>
<body>
<scriptsrc="js/scripts.js"></script>
<noscript>YoumusthaveJavaScriptenabled!</noscript>
</body>
</html>
Progressive Enhancement
pt
ri =
a
sc
< var xl
r
s
va (xl
if
J avaScript
Enhanced Functionality
Modern Browsers
CSS
Base Functionality
Older Browsers
Object Detection
<script>
if(/*someobjectisdefined*/){
//Usethatobject!
}
</script>
Unobtrusive JavaScript
Easier to read and maintain
Can be progressively enhanced
Does not require JavaScript to be
enabled
Obtrusive JavaScript
<ahref="javascript:createWindow();">ALink</a>
<formaction="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
<formaction="login.php"method="post"id="loginForm">
<fieldset>
<legend>Login</legend>
<div><labelfor="email">EmailAddress</label><input
type="email"name="email"id="email"required></div>
<div><labelfor="password">Password</label><input
type="password"name="password"id="password"required></div>
<div><labelfor="submit"></label><inputtype="submit"
value="Login→"id="submit"></div>
</fieldset>
</form>
<scriptsrc="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:
window.onload=init; = function
element.onevent
loginForm.onsubmit=validateForm;
Referencing Elements
varemail=document.getElementById('email');
varpassword=document.getElementById('password');
varloginForm=document.getElementById('loginForm');
Defining a Function
functionfunctionName(){
//Functioncode.
}
functioninit(){
}//Endofinit()function.
Strict Mode
functioninit(){
usestrict;
}//Endofinit()function.
Simple Validation
if((email.value.length>0)
&&(password.value.length>0)){
returntrue;
}else{
alert('Pleasecompletetheform!');
returnfalse;
}

Chapter 2 (IS245)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 2 (IS245)

Uploaded by

Copyright:

Available Formats

Modern JavaScript

Develop And Design

Even More Objectives

Short, easy to type

New HTML5 Input Types

New HTML5 Form

Adding JavaScript to HTML

The JavaScript Layer

You might also like