Web Technologies
Scripting with Client-Side Processing
1
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
What is Programming?


A program is a sequence of instructions that
makes a computer perform a desired task.
There are many different programming
languages.
2
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Programming Languages

Computers only know two basic instructions:
1 (indicating on) and 0 (indicating off)
called binary code.

The computer language first used was called
assembly language. With this new language,
the programmers could write their instructions in
a more English-like format.

The instructions were then translated into binary
code using a program called a compiler.
3
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Scripting NAME

For the purposes of this lesson, replace the
word NAME with the name of the scripting
language you are using. This applies
throughout the lesson.
4
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Enter the following code in
your text editor and save it as
program1.htm
1 <html>
2 <head>
3 <title>Sample NAMEScript Program 1</title>
4 </head>
5 <body>
6 <h2>Simple NAMEScript Program</h2>
7 <script language=“NAMEScript">
8 document.write("Here is my output.");
9 </script>
10 </body>
11 </html>
5
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Code Breakdown
1 <html>
2 <head>
3 <title>Sample NAMEScript Program 1</title>
4 </head>
5 <body>
6 <h2>Simple NAMEScript Program</h2>
7 <script language=“NAMEscript”>
8 document.write("Here is my output.");
9 </script>
10 </body>
11 </html>
•Lines 1 - 6 are standard
HTML code.
•Line 8 is the actual line of
code that performs an action.
•All statements should end
with a semicolon.
•Because there is more than one type of scripting language, you must tell
the browser the type of language you will be using in the script tag as
shown in line 7. Remember that the word NAME above should reflect the
name of the scripting language you are using.
•The semicolon tells the browser that the statement has ended.
6
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Preview the program1.htm in
your browser.
Simple NAMEScript Program
Here is my output.
7
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Object Oriented
Programming

In object oriented programming, objects are
created to represent physical parts of a
program or web document.

Object oriented programming allows for
common program code to be reused.

This scripting language is considered object
based.
8
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
8 document.write("Here is my output.");





Notice on line 8 of program 1, you see statement
document.write( ).
The object being used is the document object.
The object represents a group where the related methods
are stored.
Methods are prewritten code written within an object that
perform a specific task.
All the methods associated with the document object
perform some action on the document, such as writing text
to it, opening a document, or closing documents.
9
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Object Oriented
Programming
Document Object Methods
• document.open()
• document.close()
• document.write()
• document.writeln()
• document.clear()
To access a particular method, you indicate the
object the method is a part of and then the
method name with a dot between the two names.
This dot is called the dot access operator.
10
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Object Properties
Objects not only have methods associated with them, but
they also have properties.
The properties simply specify character traits about an
object such as its background color.
The statement below will assign a new background color to
the documents.
document.bgColor=“#009900”;
This statement will display the current background color
of the document.
document.write(document.bgColor);
11
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Return to your notepad software and add
the red code to your document.
<head>
<title>Sample NAMEScript Program 1</title>
<style>
body {background-color: #336699; color: #ffffff}
</style>
</head>
<body>
<h2>Simple NAMEScript Program</h2>
<script language=“NAMEScript">
document.write("Here is my output.");
document.write("<br />");
document.write(document.bgColor);
</script>
</body>
Scripting with Client Side Processing Lesson – Web Technologies
Sample Code 1a
Copyright © Texas Education Agency, 2013. All rights reserved.
12
Refresh your browser.
Notice the output of the rgb color code
on the screen.
Simple NAMEScript Program
Here is my output.
#336699
13
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
document.lastModified
The document.lastModified property can be used to
display when a web page was last updated. You can use the
document.write() method to display the property value.
Add the code in red to your document.
Sample Code 1b
document.write("<br />");
document.write(document.bgColor);
document.write("<br />");
document.write(document.lastModified);
</script>
</body>
14
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Resave and preview your document in your
browser. The date and time of when you
saved the file should be displayed.
Note: You can format the output of the time by using the
Date object built into your scripting language.
15
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
document.URL
The document.URL property will store the URL of the
document. You can again use the document.write() method.
Add the code in red to your document.
Sample Code 1c
document.write("<br />");
document.write(document.lastModified);
document.write("<br />");
document.write(document.URL);
</script>
</body>
16
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Resave and preview your document in your browser.
The file location where you saved the file should be
displayed.
Simple NAMEScript Program
Here is my output.
#336699
07/02/2013 09:28:15
file//C:\UNT Web Tech Curriculum 2013\Script\ScriptSampleCode.htm
17
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Variables


The computer can temporarily store data for
processing in its memory.
The computer's memory is divided into
blocks. The named blocks are knows as
variables.
.
var count;
A storage box named count is created and is
ready to store a value.
This is called declaring a variable.
18
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Initializing Variables
Before a variable can be used, it must be initialized, or
assigned a value.
20
count = 20;
20
The numeric value of 20 is placed within the
block named count.
19
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
A scripting program may create many different
variables that may be accessed many times
throughout a program’s operation.
20
undefined
undefined
undefined
undefined
undefined
Variables without assigned values hold an “undefined”
value until they are initialized.
20
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Variable Names
For the most part, you have a lot of flexibility in what you can name
variables, but some words in scripting languages are not allowed.
These are called reserved words.
Reserved Words in Scripting Languages
break
else
in
this
case
false
new
typeof
continue
for
null
var
default
function
return
while
delete
goto
switch
with
do
if
true
add
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Arithmetic Operators
Most of the arithmetic operators used in scripting
languages are the same that you would use in your
math class with some differences.
Arithmetic Operators
Addition
+
Adds values together
Subtraction
-
Subtracts numeric values
Multiplication
*
Multiplies numeric values
Division
/
Divides numeric values; cuts
off decimal of integers
Modulus
%
Divides integers and gives
only the remainder
22
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Using Variables

Variables can, and often do, change their
values throughout a program as it runs.

All you have to do to change the value of a
variable is simply reassign it a new value.

X=10 would reassign a new value to X.
23
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Open program2.htm in your text editor and
add the code shown in orange.
Sample Code 2
1 <html>
2 <head>
3 <title>NAMEScript Program 2</title>
4 </head>
5 <body>
6 <h2>Using Variables</h2>
7 <script language=“NAMEScript”>
8 var x;
9 x=5;
10 document.write("The value of x is ");
11 document.write(x);
12 </script>
13 <p>Try changing the value of the variable x on line 8.</p>
14 </body>
15 </html>
24
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Open program2.htm and preview
in your browser
Try changing the value assigned to variable x to 8. The value
displayed for X should become 8.
25
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
7 <script language=“NAMEScript”>
8 var x;
9 x=8;
10 document.write("The value of x is ");
11 document.write(x);
12 </script>




This program declares and assigns a value to the
variables on separate lines.
Line 8 declares the variable x.
Line 9 assigns the value of 8 to variable x.
You can also declare and assign a variable in a
single step: var x=8;
26
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
7 <script language=“NAMEScript”>
8 var x;
9 x=5;
10 document.write("The value of x is ");
11 document.write(x);
12 </script>

Line 10 displays a string, or a line of text, to the
screen, but line 11 will display the value of x.

Line 11 does not use quotes around the x
because x is not a string, but a value. If x was in
quotes, the output would be the character ‘x’, not
5 (the value of the variable x).
27
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Functions


A function is similar to a method.
Functions are user created and focus on
accomplishing a single task.
28
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Open program3.htm in your text
editor and add the code shown in red.
Sample Code 3a
1 <html>
2 <head>
3 <title>NAMEScript Program 3</title>
4 <script language=“NAMEScript”>
5 function hello()
6 {
7 window.alert("Hello World");
8 }
9 </script>
10 </head>
11 <body>
12 <h1>Sample NAMEScript Program</h1>
13 </body>
14 </html>
29
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
5
6
7
8




function hello()
{
window.alert("Hello World");
}
The function name created in Program 3 is
named hello( ).
The function definition begins with the word
function to indicate that a function is being
created; it is followed by the name of the
function.
Function names always include the
parameters, ( ), after them.
All the lines of code that make up the function
are contained within curly braces { }.
30
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
5
6
7
8


function hello()
{
window.alert("Hello World");
}
If you were to run this file in your browser, the
heading of the page (Sample NAMEScript
Program) would be the only thing that would
show up. However, that doesn’t mean that the
program didn’t work.
Even though you create a function, it will not
execute until you tell it to. In order to tell a
function to execute, you create a function
call.
31
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Add the code in red to Program 3
Sample Code 3b
<body>
<h1>Sample NAMEScript Program</h1>
<script language=“NAMEScript”>
hello();
</script>
</body>
</html>
When you call a function, you are essentially calling its
name. When it hears its name, it will execute. The name
of the function is hello(), so the function call is hello();.
32
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Sending values to a function
33
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
The parameters of the function add()
contain an a and a b.
Function with Arguments
function add(a, b)
{
var c = a+b;
document.write(c);
}
These are the two variables that the function will be adding
together. These variables are automatically declared when
they are included inside the functions’ parameters.
The function call add(2,2) would output 4.
34
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Add the code shown in red to the
body of your document.
Sample Code 3c
<body>
<h1>Sample NAMEScript Program</h1>
<script language=“NAMEScript”>
var visitor = “yourname”;
hello(visitor);
</script>
</body>
</html>
35
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
You can combine a variable with
another variable or literal string as
shown here.
Add the code shown in red to the hello() function of your document.
Sample Code 3d
function hello(person)
{
window.alert("Hello “ + person);
}
The + operator is also used to combine strings in addition to
adding numeric values.
The process of combining strings is called concatenation.
36
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
When you run the document, you
should get the result shown below.
37
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
User Entered Values
Add the code shown in red to the body of your
document.
<h1>Sample NAMEScript Program</h1>
<script language=“NAMEScript”>
var visitor = prompt(“Enter your name”, “”);
hello(visitor);
</script>
38
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Using Forms in Scripting


Scripting provides tools for calling functions
and methods when certain events occur,
such as when a page loads or when you
move your mouse over a specific object on
the page. These tools are called event
handlers.
Event handlers are attributes that are added
to standard HTML tags that are set equal to
the function name you want to execute.
39
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Event Handlers
onAbort
Executes code when the user aborts loading an image
onBlur
Executes code when the window loses focus
onClick
Executes code when the user clicks on a regular, radio, or
submit button
onMouseOver
Executes code when the mouse is over a particular object, area,
or link
onMouseOut
Executes code when the mouse leaves a particular object, area,
or link
onChange
Executes code when input focus exits the field after the user
modifies text
40
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Event Handlers
onError
Executes code when an error occurs while a document or image
is being loaded
onFocus
Executes code when a field comes in focus
onLoad
Executes code when a window or image finishes loading
onSelect
Executes code when the user selects some of the text within a
textarea field
onSubmit
Executes code when the form is submitted
onUnload
Executes code when a document is exited
41
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Applying Event Handlers


Below is an example of using an event handler to call
a function.
The example uses the onClick event handler.
function add(a,b)
{
alert(a+b);
}
<input type=button onClick=“add(2,9)” value=“Add 2 + 9”>
When the button is clicked, the function add is called.
42
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Retrieving Data From a Form

Much of the data used by scripting functions is
entered into a web form by a visitor to the web site.

The scripting function is able to retrieve the data from
the form by specifying the path to the value it needs.
43
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Create a new document in your
notepad software and start with the
following tags:
Sample Code 4
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
Save the file as jsforms.htm
44
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Add the following web form in the
body section of your document.
Sample Code 5
<body>
<form name=“nameUpdate”>
<input type=“text” name=“name1” disabled=“true”>
<input type=“text” name=“name2”>
</form>
</body>
45
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Add the following function to the
heading of your document between
the script tags.
Sample Code 6
<head>
<script>
function update()
{
name = document.nameUpdate.name2.value;
document.nameUpdate.name1.value = name;
}
</script>
</head>
46
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Add the event handler to the name2
field.
Sample Code 7
</body>
<form>
<input type="text" name="name1"disabled="true">
<input type="text" name="name2" onkeyup=”update()”>
</form>
</body>
The update() function will be called when the key is released
while typing in the name2 field.
47
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Resave and enter text in the right text
field. The text should be copied to the
left text field.
48
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Remove everything between the
script tags and the body tags.
Resave the file as calculator.htm
Sample Code 8
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
49
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Add the following form to your
document. Copy the code from your
handout.
Sample Code 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>
50
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Stub Functions
Stub functions are
empty functions that are
added to test code
functionality.
Add the stub functions
shown here between the
script tags of your
document.
<script>
function addnum()
{
}
function subtract()
{
}
function multiply()
{
}
function divide()
{
}
function modulus()
{
}
</script>
Sample
Code 10
51
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Save the document and preview it in
your browser. You should be able to
click each button without getting an
error.
STOP: Correct any errors before moving on.
52
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Add the following code to the
addnum() function on your document.
function addnum()
{
//get values
num1 = document.calculator.num1.value;
num2 = document.calculator.num2.value;
Sample Code 11
//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;
}
53
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Resave the document and test the +
button to make sure it calls the addnum()
function without error.
54
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Complete the code for
the remaining functions
on your own, making
sure that each works
properly without error
when called.
You can copy and paste
the code from the
addnum function to the
remaining functions and
just change the operator.
function subtract()
{
}
function multiply()
{
}
function divide()
{
}
function modulus()
{
}
Scripting with Client Side Processing Lesson – Web Technologies
Sample
Code
12
Copyright © Texas Education
Agency,
2013. All
rights reserved.
55
Customizing the Form
Appearance
Change the size of the input fields to 5.
Sample Code 13
<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 />
56
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
In the heading of the document, add an
opening and closing style tag below the
opening head tag.
Sample Code 14
<html>
<head>
<style>
</style>
<script>
57
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
<html>
<head>
<style>
form { background-color: #ededed;
border: solid #000000 3px;
font-family: Arial;
}
Sample Code 15
.result {text-align: right}
.button {background-color: #000099;
color: #ffffff
}
</style>
<script>
58
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Apply the classes to the result field and
each of the buttons.
<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>
Sample Code 16
59
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Resave and preview your calculator in your
browser. Your output should resemble the
example below.
60
Scripting with Client Side Processing Lesson – Web Technologies
Copyright © Texas Education Agency, 2013. All rights reserved.
Descargar

Document