JavaScript Introduction
X
Title Clip 1
WOW JavaScript
Business problem
Solution, Client Scripting
Basic HTML
HTML
Replace static list
Add link to .js file
Scripting File Explained
Scripting Explained, 2
Solution in Action
Associated files
Summary
00:00
/
00:00
CC
WOW
JavaScript
Mark
DuBois
–
WOW,
Director
of
Education
Business
problem
Visit
website
to
purchase
item
Solution
–
Client
Scripting
JavaScript
Event
handler
When
page
loads/
unloads
When
a
given
item
is
clicked
Something
a
visitor
does
on
a
page
(search
suggestions)
Identify
parts
of
HTML
document
(id=)
Separate
.JS
file
to
add
interactions
which
handle
events
type=“text/javascript”
src=“file.js”
></script>
Separate
file
Can
re-use
code
(reference
one
file
in
multiple
HTML
documents)
Typically
want
HTML
to
validate
(easier
if
JS
code
in
separate
file)
Let’s
return
to
our
original
problem
(entering
credit
card
expiration
date
information)
HTML
ChallengeStart.html
(in
ChallengeStart.zip)
<select
id="years">
<option>Year</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
Replace
static
list
<select
id="years">
<option>Year</option>
</select>
<select
id="years">
<option>Year</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
type="text/javascript"
src="challenge.js">
</script>
Code
already
written
for
you
(will
explain
in
a
bit)
Scripting
File
Explained
window.onload
=
initForm;
function
initForm()
{
document.getElementById("months").selectedIndex
=
0;
document.getElementById("months
document.getElementById("months").selectedIndex
=
0;
document.getElementById("months
value="">Month</option>
<option
value="0">January</option>
…
Scripting
Explained
(2)
function
populateYears()
{
myDate
=
new
Date();
var
curYear
=
myDate.getFullYear();
document.getElementById("years"
curYear
=
myDate.getFullYear();
document.getElementById("years"
curYear
=
myDate.getFullYear();
document.getElementById("years"
id="years">
<option>Year</option>…
Solution
in
Action
http://www.webprofessionaltraining.com/examples/JSCh01.html
Associated
files
ChallengeStart.zip
(initial
HTML
file
and
completed
JS
file)
Need
to
combine
these
using
<script>
element
ChallengeEnd.zip
(completed
example)
Summary
Client
scripting
can
be
used
to
solve
many
business
problems
Example
for
credit
card
expiration
dates
Be
careful
of
placing
any
business
sensitive
calculations
Any
visitor
to
the
site
can
view
the
source
code
Any
visitor
to
the
site
can
disable
JavaScript
(or
be
malicious
and
change
it)
For
business
sensitive
calculations,
we
use
server
scripting
Subject
of
another
module