Course Title: Web Technologies
Session Title: Scripting with Client-Side Processing
(NOTE: This lesson should follow the Web Forms lesson)
Lesson Duration:
4 hours
Performance Objective:
Upon completion of the lesson, students will understand and be able to create simple Scripting programs and process data entered into a web form.
Specific Objectives:
Students will be able to
 create simple scripts
 understand and utilize variables within their scripts
 output data to the screen
 create and use scripting functions
 successfully pass data from a form to a scripting function
Preparation
TEKS Correlations:

(9) The student employs knowledge of web programming to develop and maintain web applications. The student is expected to o (C) Articulate the advantages and disadvantages to client-side processing; o (D) Identify issues related to client-side processing; and o (E) Use standard scripting languages to facilitate interactivity.
Instructor / Trainer
Instructional Aids:

Scripting presentation

Scripting student files
Materials Needed:

Printout of the sample code for each student

Printout of the presentation for each student in notes format

Lab exercises 1 & 2 printed for each student

Quiz printed for each student
Equipment Needed:

Projector for the scripting presentation

Computers for each student
Learner

MI
Introduction
Introduction (LSI Quadrant I):
Search for simple online games using scripting languages . Demonstrate to the students some of the games created using a scripting language. Explain to the students that scripting languages are powerful tools for creating interactive websites.
Explain to students that scripting languages can be used for other purposes as well, such as processing forms and creating dynamic content on web pages.
MI
Outline
Outline (LSI Quadrant II):
I.
II.
Introduction to the scripting lesson
Introduction to programming a. What is Programming? b. Programming Languages
III. Examining a script program a. Objects i. Document objects ii. Object properties
IV. Variables a. Initializing variables b. Variable names c. Arithmetic operators
V. Functions a. Creating functions b. Passing values to functions
VI. Using forms with scripting software a. Event handlers b. Retrieving data from forms
VII. Creating a simple calculator
VIII. Students complete hands-on labs 1 and 2 on their own
IX. End of Lesson Quiz
Instructor Notes:
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
2

MI
Application
Guided Practice (LSI Quadrant III):
As the instructor presents the lesson, the students should be following along on their computers and entering the sample codes as demonstrated. During the presentation, guide the students through creating a simple script calculator.
MI
MI
Independent Practice (LSI Quadrant III):
Following the lecture and guided practice, the students should complete the handson lab exercises 1 & 2.
Summary
Review (LSI Quadrants I and IV):
MI
The instructor should go over the lab exercises, pointing out how the programs work and how data flows. It is important that students understand the sequence of how data flows and is passed from the forms to the script functions.
Evaluation
Informal Assessment (LSI Quadrant III):
MI
MI
As students are working on the lab exercises, observe to make sure they understand the logic of the lab and that they are creating the forms and script functions properly. During any error corrections, point out why what the student did that caused the error.
Formal Assessment (LSI Quadrant III, IV):

Following the lesson, give the students the script quiz over the concepts presented.
Extension
Extension/Enrichment (LSI Quadrant IV):
The instructor can give students more challenging exercises such as creating simple games like blackjack. In order to complete games, to the instructor should introduce students to random number generation.
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
3

Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Lecture, discussion, journal writing, cooperative learning, word origins
Problem solving, number games, critical thinking, classifying and organizing,
Socratic questioning
Mind-mapping, reflective time, graphic organizers, color-coding systems, drawings, designs, video,
DVD, charts, maps
Use music, compose songs or raps, use musical language or metaphors
Reading, highlighting, outlining, teaching others, reciting information
Organizing material logically, explaining things sequentially, finding patterns, developing systems, outlining, charting, graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing with color, mental imagery (drawing in the mind’s eye)
Use manipulatives, hand signals, pantomime, real life situations, puzzles and board games, activities, roleplaying, action problems
Reflective teaching, interviews, reflective listening,
KWL charts
Cooperative learning, roleplaying, group brainstorming, cross-cultural interactions
Creating rhythms out of words, creating rhythms with instruments, playing an instrument, putting words to existing songs
Moving while learning, pacing while reciting, acting out scripts of material, designing games, moving fingers under words while reading
Reflecting on personal meaning of information, studying in quiet settings, imagining experiments, visualizing information, journaling
Studying in a group, discussing information, using flash cards with other, teaching others
Natural objects as manipulatives and as background for learning
Socratic questions, real life situations, global problems/questions
Connecting with nature, forming study groups with like-minded people
Considering personal relationship to larger context
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
4

Name: ___________________________ Date: ___________________ Period: ____________
NOTE: Throughout this lesson, NAME (as seen here) is the name of
the scripting language you are using.
<html>
<head>
<style> body {background-color: #336699; color: #ffffff}
</style>
<title>Sample NAME Script Program 1</title>
</head>
<body>
<h2>Simple NAME Script Program</h2>
<script language=" NAME Script"> document.write("Here is my output."); document.write("<br />"); document.write(document.bgColor);
</script>
</body>
</html>
document.write("<br />"); document.write(document.bgcolor); document.write("<br />"); document.write(document.lastModified);
</script>
</body>
</html>
document.write("<br />"); document.write(document.lastModified); document.write("<br />"); document.write(document.URL);
</script>
</body>
</html>
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
5

IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
6

<html>
<head>
<title> NAME Script Program 2</title>
</head>
<body>
<h2>Using Variables</h2>
<script language=“ NAME Script”> var x; x=5; document.write("The value of x is "); document.write(x);
</script>
<p>Try changing the value of the variable x on line 8.</p>
</body>
</html>
<html>
<head>
<title> NAME Script Program 3a</title>
<script language=“ NAME Script”> function hello()
{ window.alert("Hello World");
}
</script>
</head>
<body>
<h1>Sample NAME Script Program</h1>
</body>
</html>
<body>
<h1>Sample NAME Script Program</h1>
<script language=“ NAME Script”> hello();
</script>
</body>
</html>
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
7

<body>
<h1>Sample NAME Script Program</h1>
<script language=“ NAME Script”> var visiter = “yourName”; hello( visiter );
</script>
</body>
</html>
function hello ( person )
{ window.alert("Hello "+ person );
}
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
</body>
<form name="nameUpdate">
<input type="text" name="name1"disabled="true">
<input type="text" name="name2">
</form>
</body>
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
8

<head>
<script> function update()
{ name = document.nameUpdate.name2.value; document.nameUpdate.name1.value = name;
}
</script>
</head>
</body>
<form>
<input type="text" name="name1"disabled="true">
<input type="text" name="name2" onkeyup=”update()”>
</form>
</body>
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</body>
</html>
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
9

<body>
<form name=“calculator”>
<input type=“text” name=“result” disabled=“true”><br />
First Number <input type=“text” name=“num1”><br />
Second Number <input type=“text” name=“num2”><br />
<br>
<input type=“button” value=“+” onclick=“addnum()”>
<input type=“button” value= “-” onclick=“subtract()”>
<input type=“button” value=“*” onclick=“multiply()”>
<input type=“button” value=“/” onclick=“divide()”>
<input type=“button” value=“%” onclick=“modulus()”>
</form>
</body>
<script> function addnum()
{
} function subtract()
{
} function multiply()
{
} functiondivide()
{
} functionmodulus()
{
}
<script>
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
10

function addnum()
{
//get values num1 = document.calculator.num1.value; num2 = document.calculator.num2.value;
//convert to numerical values num1 = eval(num1); num2 = eval(num2);
//calculate result result = num1 + num2;
//place result back in form document.calculator.result.value = result;
}
function subtract()
{
} function multiply()
{
} function divide()
{
} function modulus()
{
}
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
11

<body>
<form name=“calculator”>
<input type=“text” name=“result” disabled=“true”><br />
First Number <input type=“text” name=“num1” size=“5” ><br />
Second Number <input type=“text” name=“num2” size=“5” ><br />
<html>
<head>
<style>
</style>
<script>
}
<html>
<head>
<style> form { background-color: #ededed; border: solid #000000 3px; font-family: Arial;
.result {text-align: right}
.button {background-color: 000099; color: #ffffff
}
</style>
<script>
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
12

<body>
<form name=“calculator”>
<input type=“text” name=“result” disabled=“true” class=“result”
><br />
First Number <input type=“text” name=“num1” size=“5”><br />
Second Number <input type=“text” name=“num2” size=“5”><br />
<br />
<input type=“button” value=“+” onclick=“addnum()” class=“button”
>
<input type=“button” value= “-” onclick=“subtract()” class=“button” >
<input type=“button” value=“*” onclick=“multiply()” class=“button” >
<input type=“button” value=“/” onclick=“divide()” class=“button”
>
<input type=“button” value=“%” onclick=“modulus()” class=“button” >
</form>
</body>
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
13

Name: ___________________________ Date: ___________________ Period: ____________
1. Open your text editor.
2. Type the sample program shown below. NOTE: NAME should be replaced with the name of the scripting language you are using.
3. The document.write() method can be used to output HTML code as well as plain text and HTML code. Table shown between the script tags should be output using 8 document.write() methods.
4. The opening table tags, along with the table properties, should be output in the first document.write() method.
5. Each of the 6 rows of the table should then be output using separate document.write() method.
6. The closing table tag should then be output using another document.write() method.
7. The table should have a width of 600, be aligned to the center, and have a border of 1.
8. The left cells should have a width of 200.
9. Save the file as Lab1.htm
.
10. Preview the document in your web browser.
<html>
<head>
<title> Your Name </title>
</head>
<body>
<h1>Simple NAME Script Program</h1>
<script language = " NAME script"> document.write("<h3 align=\”center\”>The Document Object</h3>");
Output this table on your screen
Methods of the Document Object document.write() Writes data to the screen document.writeln() Writes data with a new line character document.open() Opens a new document stream document.close() Closes a document stream document.clear() Clears a document of its contents (not used)
</script>
</body>
</html>
NOTE:
If your table does not show up when you preview your document, check for the following common errors:
 Misspelled or omitted opening or closing script tags.
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
14

 Quotation mark out of place within the document.wirite() method.
 Capital letter where a lower case letter should be on the document.write() method.
The slashes before the quotes ( \ ” ) in the output of the document.write() method instruct the browser to ignore those particular quotes when interpreting the scripting code and to include them as part of the output. document.write("<h3 align=\”center\”>The Document Object</h3>");
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
15

Name: ___________________________ Date: ___________________ Period: ____________
1. Open your text editor.
2. Setup a basic HTML document and include both the heading and the body sections.
3. Set the background color of the document to #000000 and the text color to #ffffff.
4. In the opening body tag, add the onload event handler to call the dealer() function when the page loads.
5. Below the opening b ody tag, add “Simple BlackJack!” as a centered level 1 heading.
You will now create the form shown here inside a one-cell table. Follow the steps below very carefully so that the form is constructed properly.
6. Open a table tag, set the width of the table to 350 and the background color of the table to #00aa00, and center the table on the screen.
7. Within the cell of the table, open a form tag and name the form cardtable .
8. Add the label “Dealer Cards:” as shown above followed by two text fields. The first text field should be named dealer1 and the second should be named dealer2 . Both should be have a size of 5.
9. Add a line break.
10. Next add the label “Your Card Total:” followed by a text field named player with a size of
5.
11. Add a line break.
12. On the next line, you will create three buttons. Each button will call a function that we will define within the heading of the document.
Deal Card Button
13. The button should be named deal but display Deal Card on the button. The button should call the dealCard() function when clicked. (Use the onclick event handler).
Stand Button
14. The button should display Stand and call the stand() function when clicked.
New Game Button
15. The button should display New Game and call the dealer() function when clicked.
16. Save the file as Lab2.htm
and preview it in your browser to make sure everything shows up. Your screen should resemble the example shown here. If not, fix any errors before moving on.
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
16

17. Move into the heading section and open a set of script tags.
18. At the top of the script section, declare three variables called player, dealer1, and dealer2, and initialize all to 0.
19. Create the following stub functions within the script section. function dealer()
{
} function stand()
{
} function dealCard()
{
} Creating the dealer() Function
20. Move into the dealer function and add the following line of code. document.cardtable.deal.disabled=false;
This line of code will make sure that the deal button is enabled.
Random Number Notes (Do not type this information)
Scripts can generate random numbers; the code below will return a random floating point number (number with a decimal point) ranging from 0 to 4. (Use one number higher than you want the random number to be) var num = Math.randon()*5;
To remove the decimal and convert the number to an integer, use the Math.floor() method. num = Math.floor(num);
21. Within the dealer() function, use the Math.random() and Math.floor() methods to generate a random integer between 1 and 11 and assign it to the dealer1 variable.
NOTE: You will need to add 1 to the number generated because it starts at 0.
22. Generate another random integer between 1 and 11 and assign it to dealer2 variable.
23. Generate a third random integer, this time between 2 and 22, and assign it to the player variable.
24. The function should then place the value of dealer1 into the form field named dealer1.
25. Next, place the text “hidden” into the form field named dealer2.
26. Then place the value of player into the form field named player.
27. Move to the body tag of the document and add the onload event handler to run the dealer() function when the page loads.
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
17

Creating the stand() Function
28. Place your cursor between the curly braces of the stand() function.
29. Place the value of the dealer2 variable into the form field named dealer2.
30. Next, add the following line of code to deactivate the deal button: document.cardtable.deal.disabled=true;
Creating the dealCard() Function
31. Move your cursor to inside the curly braces of the dealCard() function.
32. Declare a variable called card and assign it a random integer between 1 and 11.
(look back up at the Random Numbers notes under Creating the dealer() Function section)
33. Increase the value of the player variable by the value of the card variable player = player + card;
34. Place the new value of player into the form field named player .
35. Resave the document and test it in your browser. Check each button to make sure each calls its appropriate functions, and make sure each function operates properly.
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
18

Name: ___________________________ Date: ___________________ Period: ____________
1. Machine language consisting of 1s and 0s
A. Script
B. Binary Code
C. ASCII
D. None of the above
2. Scripting is considered what type of language?
A. Server side scripting language
B. Compiled language
C. Client side scripting language
D. Formatting language
3. The operator separating the document and its method or property is called the
A. dot access operator
B. modules operator
C. addition operator
D. object operator
4. Which is the correct command to output content to a web page?
A. document.write()
B. document.print()
C. document.open()
D. document.display()
5. Which document property can modify the background color of the document?
A. document.fgColor
B. document.bgcolor
C. document.background
D. document.bgColor
6. Which document property can tell when the document was last updated?
A. document.lastUpdated
B. document.modified
C. document.lastModified
D. document.update
7.
A named location in the computer’s memory that can store a value is referred to as a
A. variable
B. string
C. operator
D. method
8. What scripting words have a specific purpose and cannot be used for any other purpose?
A. strings
B. reserved words
C. operators
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
19

D. properties
9. Which arithmetic operator returns the remainder only when dividing two integers?
A. Division operator
B. Overloaded operator
C. Multiplication operator
D. Modules operator
10. A grouping of code which performs a related action and can be reused is called a
A. statement
B. program
C. segment
D. function
11. The process of connecting two or more strings or variables is called
A. connecting
B. assembling
C. concatenation
D. operating
12. A tool that can call a function when a specific action occurs is called what?
A. Execution
B. Variables
C. Operator
D. Event Handler
13. A function consisting of only the function heading and opening and closing curly brace is called what?
A. An empty function
B. A stub function
C. A method
D. A segment
14. Which command will call a function when a button is pressed?
A. onClick
B. onPush
C. onButton
D. buttonPress
15. Which command will call a function when the document first loads?
A. Run
B. onLoad
C. onStart
D. onPageLoad
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
20

1. Machine language consisting of 1s and 0s.
A. Script
B. Binary Code
C. ASCII
D. None of the above
2. Scripting is considered what type of language?
A. Server side scripting language
B. Compiled language
C. Client side scripting language
D. Formatting language
3. The operator separating the document and its method or property is called the
A. dot access operator
B. modules operator
C. addition operator
D. object operator
4. Which is the correct command to output content to a web page?
A. document.write()
B. document.print()
C. document.open()
D. document.display()
5. Which document property can modify the background color of the document?
A. document.fgColor
B. document.bgcolor
C. document.background
D. document.bgColor
6. Which document property can tell when the document was last updated?
A. document.lastUpdated
B. document.modified
C. document.lastModified
D. document.update
7. A named location in the computer’s memory that can store a value is referred to as a
A. variable
B. string
C. operator
D. method
8. What scripting words have a specific purpose and cannot be used for any other purpose?
A. strings
B. reserved words
C. operators
D. properties
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
21

9. Which arithmetic operator returns the remainder only when dividing two integers?
A. Division operator
B. Overloaded operator
C. Multiplication operator
D. Modules operator
10. A grouping of code which performs a related action and can be reused is called a
A. statement
B. program
C. segment
D. function
11. The process of connecting two or more strings or variables is called
A. connecting
B. assembling
C. concatenation
D. operating
12. A tool that can call a function when a specific action occurs is called what?
A. Execution
B. Variables
C. Operator
D. Event Handler
13. A function consisting of only the function heading and opening and closing curly brace is called what?
A. An empty function
B. A stub function
C. A method
D. A segment
14. Which command will call a function when a button is pressed?
A. onClick
B. onPush
C. onButton
D. buttonPress
15. Which command will call a function when the document first loads?
A. Run
B. onLoad
C. onStart
D. onPageLoad
IT: Web Technologies: Scripting With Client Side Processing Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
22