Beruflich Dokumente
Kultur Dokumente
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
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>
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>
email
number
range
search
tel
url
<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.
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(){
varloginForm=document.getElementById('loginForm');
loginForm.onsubmit=validateForm;
}//Endofinit()function.
Strict Mode
functioninit(){
usestrict;
varloginForm=document.getElementById('loginForm');
loginForm.onsubmit=validateForm;
}//Endofinit()function.
Simple Validation
if((email.value.length>0)
&&(password.value.length>0)){
returntrue;
}else{
alert('Pleasecompletetheform!');
returnfalse;
}