JavaScript IM Intro

ugliestharrasSoftware and s/w Development

Nov 4, 2013 (3 years and 1 month ago)

56 views

J I.
1

Instructor’s Materials to accompany

J
AVA
S
CRIPT

INTRODUCTION

I
NTRODUCTION TO
J
AVA
S
CRIPT
P
ROGRAMMING

LESSON PLAN

OBJECTIVES

Students will have mastered the material in this project when they can:



Describe JavaScript



Define HTML and explain the use of
HTML t
ags



Define attribute



Differentiate between JavaScript and
VBScript



Define JavaScript cookies and variables



Define string, numeric, and Boolean
JavaScript variable types



Discuss the rules for naming variables



Differentiate between variables and
literals



Dis
cuss special codes and how they are
used in a literal



Discuss the advantages and
disadvantages of using JavaScript



Define expression and describe the
arithmetic operators



Discuss the order of precedence in an
expression



Define concatenation



Define conditio
nals and the use of If and
While statements



Discuss the use of JavaScript functions



Discuss If, If . . . Else, and While
statements and loops



Define objects, properties, methods, and
events



Describe how event handlers and forms
are used



Define frames and a
rrays

INTRODUCTION OVERVIE
W

This introduction provides an overview of JavaScript and its components: attributes, tags,
variables, expressions, operators, codes, functions, objects (Window, Document), properties,
methods, events, event handlers, frames, an
d arrays. Students learn about the basic concepts of
how HTML tags are used and how to incorporate JavaScript into HTML code.

J I.
2

Introduction to JavaScript Programming

LESSON PLAN

Project Outline

Page

Teacher Notes and Activities


I.

Introduction

J I.2

Define JavaScript and HTML (hypertext
markup

language). Ask students about their
use of both. JavaScript is a simple, interpreted
programming language, which can be used to
enhance your HTML code. Review the Web
page features and enhancements described on
page J I.2 that are part of HTML and
JavaScr
ipt. Locate examples of each on Web
pages and present these pages to students,
asking them to identify which elements are
the products of HTML code and which are the
products of JavaScript statements. Explain
what Java is and discuss the differences
betwee
n Java and JavaScript. Correct students
who assume that JavaScript is a simplified
version of Java. Though Java and JavaScript
both deliver executable content over the
Internet, they are different. Java and
JavaScript, however, do compliment each
other wel
l; JavaScript can control the actions
of a browser but cannot do graphics or
networking, while Java lacks control over the
browser, but can do graphics, networking, and
multi
-
threading. Ask students' about their
experiences with full
-
fledged programming
la
nguages, in particular object
-
oriented
languages like C++. Define applet. Explain
the function of an interpreter. Discuss the
connection between the version of a browser
and the version of JavaScript.


II.

JavaScript and HTML
tags

J I.3

The text assumes
the students have a basic
knowledge of HTML. Nevertheless, redefine

JavaScript Inst
ructor’s Materials J I.
3

Project Outline

Page

Teacher Notes and Activities

for students the terms tag and attribute. Ask
students to brainstorm examples of tags and
attributes from their experience with HTML.
Review the syntax of the BODY tag and its
accompanying

attributes in Figure I
-
1.
Discuss More About Tags and Attributes.
Discuss the tag and attributes shown in Figure
I
-
2.


A.

SCRIPT tags

J I.4

Explain the function and typical placement of
the SCRIPT tag in an HTML document. Use
Figure I
-
3 to discuss the s
yntax of the
SCRIPT tag and LANGUAGE attribute.
Mention that a document can have multiple
<SCRIPT>

tags, and that each tag can enclose
any number of JavaScript statements. Point
out the use of an HTML comment to hide the
code from a browser in case the bro
wser does
not support JavaScript. Ask students about
their experience with frames and if the use of
an HTML comment in frames is familiar. This
technique is not required, though it is
considered good etiquette so that your pages
do not generate unformatted

script statements
for those using browsers that do not support
JavaScript. Discuss the notion that the version
of JavaScript used is dependent on what
browsers the users are expected to have.
Discuss the importance of avoiding a version
of JavaScript that

is incompatible with the
browser your users have.


III.

JavaScript versus
VBScript

J I.4

Explain what VBScript is and how it is
different from JavaScript. Based on the Visual
Basic programming language, but much
J I.
4

Introduction to JavaScript Programming

Project Outline

Page

Teacher Notes and Activities

simpler than Visual Basic, VBScript is sim
ilar
to JavaScript. VBScript enables Web authors
to include interactive controls like buttons and
scroll bars on their Web pages. Mention the
syntactical differences between VBScript and
JavaScript as outlined in the text. Point out
More About Scripting La
nguages. For more
information about VBScript, students can visit
http://msdn.microsoft.com/scripting/default.ht
m.


IV.

Why use JavaScript?

J I.5

Explain what a CGI (Common Gateway
Interface) script is. Explain that a CGI
program is intended to accept and
return data
that conforms to the CGI specification, and
can be written in C, Perl, Java, Visual Basic,
etc. CGI programs are a common way for
Web servers to interact dynamically with
users (e.g., the processing of forms submitted
by visitors to a Web page)
. The alternative
means of providing feedback for Web users is
to include ActiveX controls or Java applets
that are processed on the user's machine rather
than the Web server. CGI programs are
referred to as server
-
side solutions, while
ActiveX controls an
d Java applets are referred
to as client
-
side solutions. A significant
drawback to CGI is that each execution of a
new CGI script starts a new process and for
Web sites

that receive a lot o
f hits, this can
compromise the server's performance
considerably. Give instances in which a CGI
script is a useful tool and instances in which
JavaScript statements, ActiveX controls, or
Java applets are a better choice. Point out

JavaScript Inst
ructor’s Materials J I.
5

Project Outline

Page

Teacher Notes and Activities

More About CGI Scripts.


A.

JavaScript cookies

J I.5

Define cookie. Discuss the functions of
cookies in the creation of personal start pages
and e
-
commerce. Explain what a cookie can
and cannot do. Discuss the user's options in
terms of blocking cookies. Explain that the
origin
al intent of cookies was to facilitate
users' accessing their favorite Web sites
without having to go through the lengthy
process of identifying themselves on each
visit. A portal like Yahoo!, for example, may
place a cookie containing personal identifying

information on your system and when you
return it will request information based on the
cookie to determine who you are and whether
you have authorization to access the site.
Privacy activists and others recognize that this
original intent has been co
-
opt
ed by some
who are using the power of the cookie
technology to track your Web activity. Used
in this method, cookies can help to build
detailed profiles of your interests, spending
habits, and lifestyle. Some argue that the
worst that can come of this is t
he creation of
advertising campaigns carefully targeted to
you, but others balk at the relative ease
information about your personal habits can be
accessed using cookies. Define dead
-
end.
Point out More About Cookies and encourage
students to visit the Web

page mentioned. For
more information students can visit
http://www.cookiecentral.com/
.


V.

JavaScript basics


J I.5

Define variable and the variable types
J I.
6

Introduction to JavaScript Programming

Project Outline

Page

Teacher Notes and Activities

variables, literals, and
expressions

numeric, stri
ng, and Boolean. Give examples
of each data type.


A.

Rules for naming
variables

J I.6

Review the rules for naming variables.
Mention More About Reserved Words and
require students to visit the Web site
mentioned to learn the reserved words in
JavaScript.

Define what case sensitive means
and discuss the difference between the
variable names State and STATE in
JavaScript. Point out the valid and invalid
variable names in Table I
-
1.


B.

Literals

J I.6

Define literal. Literals are fixed values that
you use l
iterally in your code; they are
constant values that do not change throughout
the script. JavaScript has four literal types:
integer, floating point, Boolean, and string.
Integer literals are whole numbers that have
no decimal point or fractional part. The
y can
be positive, negative, or zero. Decimal
integers are written with 10 digits, 0 through
9. Except for the number 0, a decimal integer
cannot have a leading 0 digit. Boolean literals
are true and false. String literals are enclosed
in either single or
double quotes. Use Figure
I
-
4 to display a variable defined with a
numeric literal value. Use Figure I
-
5 to
display a variable defined with a string literal.
Use Figure I
-
6 to display the use of the special
\
" character in order to use quotation marks as
p
art of the string literal. Review the other
special characters/codes in Table I
-
2. Mention
the write() and alert() methods. Discuss the
More About Case Sensitive.


JavaScript Inst
ructor’s Materials J I.
7

Project Outline

Page

Teacher Notes and Activities


C.

Expressions and
operators

J I.7

Define expression. Use Figure I
-
7a to display
an express
ion at work and Figure I
-
7b to
demonstrate the initializing of a variable to
zero. Define arithmetic operator. Use Table I
-
3 to review arithmetic operators. Every
expression consists of at least one operand
(i.e., values) and one or more arithmetic
operato
rs (i.e., symbols signifying particular
mathematical actions, like addition or
division). In the expression n*4, n and 4 are
operands, and * is an operator. Introduce the
increment (++) and decrement (
--
) operators,
and use Table I
-
4 to display their funct
ions.
Ask students who have familiarity with C or
C++ if these operators are familiar. Review
the equivalent expressions in each column in
Table I
-
5. The concept of order of operations
will be familiar to students with experience in
mathematics and certain

software
applications, like Microsoft Excel; use Table
I
-
6 to review the order in which expressions
are evaluated. Point out More About Modulus
on page J I.8. Define concatenation and point
out More About Concatenation on page J I.9.
Use Figure I
-
8 to dis
play concatenation at
work.


VI.

Conditionals

J I.9

Define conditional. Review the function of the
If and While statements. Discuss each of the
conditional results shown in Table I
-
7.


A.

If and If…Else
statements

J I.10

Use Figure I
-
9 to discuss the syn
tax of the If
statement. Explain the use of the Else clause.


B.

While loop

J I.10

Define loop and While loop. Loops are a very
significant programming concept. In
J I.
8

Introduction to JavaScript Programming

Project Outline

Page

Teacher Notes and Activities

programming, a loop is a series of instructions
that is repeated until a certain condition

is
met. Each repetition through the loop is
referred to as an iteration. Use Figure I
-
10 to
review the basic form of the While statement.


VII.

Functions

J I.11

Define function. Use Figure I
-
11 to display a
sample function; point out the placement and
di
rection of the braces. Use Figure I
-
12 to
display the same function adjusted slightly so
that it can manipulate a potentially changeable
value that it receives, instead of having the
value set as it does in Figure I
-
11.


VIII.

Objects, properties, and
met
hods

J I.11

Define object, object oriented (OO), and
object
-
oriented programming (OOP). Point
out More About Object
-
Oriented
Programming and encourage students to visit
the Web site mentioned. Object
-
oriented
programming techniques allow programmers
to cre
ate modules that do not need to be
changed when a new type of object is added.
A programmer can create a new object that
inherits many of its features from existing
objects, making object
-
oriented programs
easier to modify. Define properties, methods,
and
arguments. Use Figure I
-
13 to display an
example of the write() method with the
argument <CENTER><B>PLEASE READ
THE FOLLOWING</B></CENTER>.
Define object instance. Define document.
Explain what the Window object is. Use
Figure I
-
14 to explain what the hier
archy of
the JavaScript object means.


IX.

Events

J I.13

Define event. Before showing students Table

JavaScript Inst
ructor’s Materials J I.
9

Project Outline

Page

Teacher Notes and Activities

I
-
8, ask them to brainstorm about what events
in an application might include. Then review
the event handlers and descriptions in Table I
-
8. Define what
is meant by triggering an
event.


A.

Forms

J I.14

Explain what a form is. Introduce the CGI
language Perl. Point out More About Perl,
encouraging students to visit the Web page
mentioned. Review each of the code snippets
in Figures I
-
15 and I
-
16 and ask
students to
explain the role of each keyword and
punctuation mark. Define focus and blur.
Discuss the code in Figure I
-
17, including the
function and the event handler.


X.

Frames and arrays

J I.15

Define frame. Ask students about their
experiences either

viewing or developing
frames Web pages. Explain the function of the
SRC attribute and ask students to sketch the
frameset created by the first line of code in
Figure I
-
18. Mention More About Frames.


A.

Arrays

J I.16

Define array. Ask students about the
ir
experience working with arrays. Explain what
it meant by the length of an array. Review the
JavaScript syntax associated with an array in
Figure I
-
19. Discuss the recommendation
about leaving array element [0] empty.


XI.

Summary

J I.16

Briefly review
the material presented in this
introduction.


XII.

Test your knowledge

J I.17

These exercises test students on their mastery
of the material presented in this project.
Exercises 1 through 4 can be reviewed and
assigned at this time.

J I.
10

Introduction to JavaScript Programming

Project Outline

Page

Teacher Notes and Activities


XIII.

Apply your kno
wledge

J I.19

This exercise gives students a chance to apply
their knowledge to a document on the
JavaScript Data Disk. Exercise 1 can be
reviewed and assigned at this time.


XIV.

In the lab

J I.21

These exercises provide students with practice
in using t
he skills developed in this project.
Exercises 1 through 3 can be reviewed and
assigned at this time.


J I.
11

Instructor’s Materials to accompany

J
AVA
S
CRIPT

INTRODUCTION

I
NTRODUCTION TO
J
AVA
S
CRIPT
P
ROGRAMMING

ANSWER MANUAL

TEST YOUR KNOWLEDGE

1

True/False

1.

F

2.

T

3.

T

4.

F

5.

F

6.

T

7.

T

8.

F

9.

T

10.

F


2

Multiple Choice

1.

c

2.

c

3.

a

4.

c

5.

a

6.

b

7.

c

8.

d

9.

c

10.

a

J I.
12

Introduction to JavaScript Programming



3

Understanding Variable Names and Types



VALID

TYPE

1.

Valid

String

2.

Invalid


3.

Valid

Numeric

4.

Valid

String

5.

Invalid


6.

Valid

Numeric

7.

Invalid



4

Understanding Arithmetic Expre
ssions


1.

M = 4


2.

Cost = 15


3.

Total_Cost = 48


4.

j = 6


5.

Sum = 8


6.

counter = NaN (not defined)


7.

t = 25


8.

c = 3


9.

t = 12


10.

dist = 165

APPLY YOUR KNOWLEDGE

1

Add a Greeting to a Web Page Based on the Time of Day


8.

The completed projec
t for this assignment is supplied on the Teaching Tools CD
-
ROM as
the
carboncopysolution.htm

file. Students should submit a printout of the Web page and
HTML file for this exercise.



JavaScript Instructor’s Materials J I.
13


IN THE LAB

1

Using Mouse Event Handlers to Show Images


11.

The completed
project for this assignment is supplied in the Instructor’s Solutions section
on the Instructor’s Resource Kit CD
-
ROM as the

pinewoodsolution.htm

file. Students
should submit a printout of the Web page and HTML file for this exercise.

2

Displaying a Messag
e when a Web Page is Opened


6.

The completed project for this assignment is supplied in the Instructor’s Solutions section
on the Instructor’s Resource Kit CD
-
ROM as the

littlepcsolution.htm

file. Students
should submit a printout of the Web page and HTML

file for this exercise.

3

Correcting the Errors on a JavaScript Web Page


7.

The completed project for this assignment is supplied in the Instructor’s Solutions section
on the Instructor’s Resource Kit CD
-
ROM as the

paulspaintsolution.htm

file. Students
s
hould submit a printout of the Web page and HTML file for this exercise.



J I.
14

Instructor’s Materials to accompany

J
AVA
S
CRIPT

INTRODUCTION

I
NTRODUCTION TO
J
AVA
S
CRIPT
P
ROGRAMMING

TEST BANK



Test Bank Answers are on page J I.
19
.

Multiple Choice

1.


Using JavaScript, you can enhance a Web page by adding
__________.

a.

pop
-
up windows

b.

interactive quizzes

c.

data input forms

d.

all of the above

2.


The __________ translates each line of a language and converts it, line by

line, into
machine code as it is executed.

a.

executor

b.

interpreter

c.

converter

d.

language translator

3.


__________ are sections on the Web site a user visits, which apparently cause them to
leave the Web site for lack of interest.

a.

Tunnels

b.

Dead
-
ends

c.

Repellents

d.

Disengagers

4.


JavaScript uses __________ type variables that represent a state or condition as being
True or False (Yes or No).

a.

Boolean

b.

literal

c.

object
-
based

d.

value
-
paired



JavaScript Instructor’s Materials J I.
15


5.


__________ words are predefined words that ha
ve special meaning to JavaScript.

a.

Status

b.

Title

c.

Menu

d.

Reserved

6.


__________ is a valid variable name.

a.

*Major

b.

Continue

c.

idnumber

d.

All of the above

7.


The __________ method is used to display messages in a dialog box.

a.

alert()

b.

dis
play()

c.

write()

d.

dialog()

8.


__________ is used to join string literals or variables together as one variable.

a.

Amalgamation

b.

Character reoperation

c.

Incrementing

d.

Concatenation

9.


To validate data, you compare or test the data entered to a de
sired value; this test is called
a(n) __________.

a.

index

b.

operation

c.

conditional

d.

prevarication

10.


A(n) __________ is a way to write several lines of script and use them repeatedly as
needed.

a.

method

b.

function

c.

argument

d.

instance

11.


An
object __________ is the actual object used.

a.

instance

J I.
16

Introduction to JavaScript Programming

b.

document

c.

actuality

d.

usage

12.


When you execute the code associated with an event handler, you are __________ the
event.

a.

triggering

b.

agenting

c.

incrementing

d.

launching

13.


Focus mean
s that a(n) __________ has attention drawn to it.

a.

check box

b.

text box

c.

option button

d.

all of the above

14.


The ___________ attribute in the FRAMESET tag identifies the HTML document you
want to load.

a.

FILE

b.

DOC

c.

SRC

d.

INPUT

15.


The ______
____ of an array indicates the number of items stored, not how many
characters are being stored.

a.

width

b.

resolution

c.

dimension

d.

length

True/False

T

F

16.

Unlike an applet, which is embedded in the HTML document, a JavaScript
statement is sent to the br
owser as a separate file alongside an HTML document.

T

F

17.

You can use JavaScript to create applets and stand
-
alone applications.

T

F

18.

Unlike Java, JavaScript is an interpreted language, meaning that it does not end
up as an executable file.



JavaScript Instructor’s Materials J I.
17


T

F

19.

HTML tags
and attributes are case sensitive.

T

F

20.

To use JavaScript or any scripting language, in the HTML code, the browser
needs to be told that a script language is being used.

T

F

21.

A CGI script is any program that runs on a Web server for the purpose of
processi
ng data.

T

F

22.

2000 is a valid variable name.

T

F

23.

The result of the JavaScript statement
var answer

= "3" + "2" is "32".

T

F

24.

A document is an object on its own and cannot be a property of the Window
object.

T

F

25.

The Document object is the top
-
level object

in the hierarchy.

T

F

26.

If you have ever filled out a request for information on a Web site, you have
worked with a form.

T

F

27.

Blur means that the attention has moved from a given object to another object.

T

F

28.

Frames actually are created with the HTML tag
s <FRAME> and </FRAME>.

T

F

29.

It is recommended always to leave element [0] of an array empty and start with
element [1].

T

F

30.

Unique to JavaScript arrays is that you can add more items to the array than
originally defined.

Short Answer

31.

A(n) ______________

is a small program designed to execute within another application.

32.

A(n) ______________ is an instruction that is surrounded by less than (<) and greater
than (>) symbols.

33.

______________ are characteristics of a tag that have values assigned to them.

34.

In th
e ______________ attribute of the SCRIPT tag, the word JavaScript with no version
number indicates version 1.0.

35.

______________ are pieces of data sent and stored in files on the user's computer.

36.

A(n) ______________ represents a value stored in memory for u
se by the script.

J I.
18

Introduction to JavaScript Programming

37.

A(n) ______________ is an actual number or character text, rather than a calculated
result or value input from a keyboard.

38.

A(n) ______________ is a formula or a way to assign values to variables.

39.

A(n) ______________ is a set of JavaScript

codes that are to be executed repeatedly.

40.

______________ are attributes that help differentiate one object from another.

41.

A(n) ______________ is a function or action you want the object to perform.

42.

A(n) ______________ is a value given to a method.

43.

Onclick
is an example of an event ______________.

44.

A(n) ______________ is a feature that allows a browser window to be split into smaller
units.

45.

A(n) ______________ is a collection of data items that is identified by a singular name.



JavaScript Instructor’s Materials J I.
19


TEST BANK ANSWERS FO
R INTRODUC
TION

I
NTRODUCTION TO
J
AVA
S
CRIPT
P
ROGRAMMING

Multiple Choice

1.

d [J I.2]

2.

b [J I.3]

3.

b [J I.5]

4.

a [J I.5]

5.

d [J I.6]

6.

c [J I.6]

7.

a [J I.7]

8.

d [J I.9]

9.

c [J I.9]

10.

b [J I.11]

11.

a [J I.12]

12.

a [J I.13]

13.

d [J I.14]

14.

c [J I.15]

15.

d [J I.16]

True/False

16.

F [J I.2]

17.

F [J I.3]

18.

T [J I.3]

19.

F [J I.3]

20.

T [J I.4]

21.

T [J I.5]

22.

F [J I.6]

23.

T [J I.9]

24.

F [J I.12]

25.

F [J I.12]

26.

T [J I.14]

27.

T [J I.15]

28.

F [J I.15]

29.

T [J I.16]

30.

T [J I.16]

Short Answer

31.

applet [J I.2]

32.

tag [J I.3]

33.

Attributes [J I.3]

34.

LANGUAGE [J I.4]

35.

Cookies [J I
.5]

36.

variable [J I.5]

37.

literal [J I.6]

38.

expression [J I.7]

39.

loop [J I.10]

40.

Properties [J I.11]

41.

method [J I.12]

42.

argument [J I.12]

43.

handler [J I. 14]

44.

frame [J I.15]

45.

array [J I.16]