HTML Scripts

JavaScripts
Scripts
 In computer programming, a script is a program or sequence
of instructions that is interpreted or carried out by another
program rather than by the computer processor (as a
compiled program is).
 Some languages have been conceived expressly as script
languages. Among the most popular are Perl, Rexx (on IBM
mainframes), JavaScript, and Tcl/Tk.
 In the context of the World Wide Web, Perl, VBScript, and
similar script languages are often written to handle forms
input or other services for a Web site and are processed on
the Web server.
 A JavaScript script in a Web page runs "client-side" on the
Web browser.
There are two very popular scripts that are
commonly used in HTML to make web pages
come alive. HTML javascript and HTML
vbscript are very useful scripting languages.
HTML Scripts (cont)
 With HTML scripts you can create dynamic
web pages, make image rollovers for really
cool menu effects, or even validate your
HTML form's data before you let the user
submit. However, javascript and vbscript are
very complicated compared to HTML. It may
be simpler just to download someone elses
scripting code and use it on your web page.
HTML Javascript Code
 If you want to insert javascript code into your
HTML you are going to use the script tag.
 Below is the correct code to insert embedded
javascript code onto your site.
<script type="text/javascript">
<!--script ***Some javascript code should go here*** -->
</script>
HTML Vbscript
 To insert vbscript code onto your website you
must once again make use of the script tag.
 Below is the correct code to insert vbscript
code onto your site.
<script type="text/vbscript">
<!—script ***The vbscript code should go in this spot*** -->

</script>
The Name "JavaScript"
 The name JavaScript is owned by Netscape.
 Microsoft calls its version of the language
JScript.
 The generic name of the language is
EcmaScript.
The HTML DOM
 The HTML Document Object Model (DOM)
is the browser's view of an HTML page as an
object hierarchy, starting with the browser
window itself and moving deeper into the
page, including all of the elements on the
page and their attributes.
Simplified Version of HTML DOM
The HTML DOM (cont)
 As shown, the top-level object is window.
The document object is a child of window and
all the objects (i.e, elements) that appear on
the page (e.g, forms, links, images, tables,
etc.) are descendants of the document object.
These objects can have children of their own.
For example, form objects generally have
several child objects, including textboxes,
radio buttons, and select menus.
Introduction to JavaScript
 JavaScript is used in millions of Web pages to
improve the design, validate forms, detect
browsers, create cookies, and much more.
 JavaScript is the most popular scripting
language on the internet, and works in all
major browsers, such as Internet Explorer,
Mozilla, Firefox, Netscape, and Opera.
 Before you continue you should have a basic
understanding of HTML
What is JavaScript?
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming language
 A JavaScript consists of lines of executable computer code
 A JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
 Everyone can use JavaScript without purchasing a license
Are Java and JavaScript the Same?
 NO!
 Java and JavaScript are two completely
different languages in both concept and
design!
 Java (developed by Sun Microsystems) is a
powerful and much more complex
programming language - in the same category
as C and C++.
What can a JavaScript Do?
 JavaScript gives HTML designers a programming tool -
HTML authors are normally not programmers, but JavaScript
is a scripting language with a very simple syntax! Almost
anyone can put small "snippets" of code into their HTML
pages
 JavaScript can put dynamic text into an HTML page - A
JavaScript statement like this: document.write("<h1>" +
name + "</h1>") can write a variable text into an HTML
page
 JavaScript can react to events - A JavaScript can be set to
execute when something happens, like when a page has
finished loading or when a user clicks on an HTML element
 JavaScript can read and write HTML elements - A
JavaScript can read and change the content of an HTML
element
What can a JavaScript Do? (cont)
 JavaScript can be used to validate data - A JavaScript can
be used to validate form data before it is submitted to a
server. This saves the server from extra processing
 JavaScript can be used to detect the visitor's browser - A
JavaScript can be used to detect the visitor's browser, and -
depending on the browser - load another page specifically
designed for that browser
 JavaScript can be used to create cookies - A JavaScript can
be used to store and retrieve information on the visitor's
computer
JavaScript Basic Rules
 JavaScript statements end with semi-colons.
 JavaScript is case sensitive.
 JavaScript has two forms of comments:
 Single-line comments begin with a double slash
(//).
 Multi-line comments begin with "/*" and end
with "*/".
Comment Syntax
 Syntax
// This is a single-line comment

/* This is
a multi-line
comment. */
Dot Notation
 In JavaScript, objects can be referenced using dot
notation, starting with the highest-level object (i.e,
window). Objects can be referred to by name or id or
by their position on the page. For example, if there is
a form on the page named "loginform", using dot
notation you could refer to the form as follows:
 Syntax
window.document.loginform
 Another example is:
document.write // write is a method for document
Document Object Methods
Method Description

close() Closes an output stream opened with the

document.open() method, and displays the collected
data
getElementById() Returns a reference to the first object with the specified
id
getElementsByName() Returns a collection of objects with the specified name
getElementsByTagName() Returns a collection of objects with the specified
tagname
open() Opens a stream to collect the output from any
document.write() or document.writeln() methods
write() Writes HTML expressions or JavaScript code to a
document
writeln() Identical to the write() method, with the addition of
writing a new line character after each expression
write method
 <html>
 <body>

 <script type="text/javascript">
 document.write("Hello World!");
 </script>
Output
 </body> Hello World!
 </html>
Example Explained
 To insert a JavaScript into an HTML page, we use
the <script> tag. Inside the <script> tag we use the
"type=" attribute to define the scripting language.
 So, the <script type="text/javascript"> and </script>
tells where the JavaScript starts and ends.
 The word document.write is a standard JavaScript
command for writing output to a page.
write method (cont)
 <html>
 <body>

 <script type="text/javascript">
 document.write("<h1>This is a header</h1>");
 </script>
Output
 </body>
 </html> This is a header
write method (cont)
<html>
<body>

<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

</body>
</html>
JavaScript Variables
 Variables are "containers" for storing
information.
 Variables can be used to hold values
 Example:
x=5; length=66.10;
JavaScript Variables (cont)
 A variable can have a short name, like x, or a more
describing name like length.
 A JavaScript variable can also hold a text value like
in carname="Volvo".
 Rules for JavaScript variable names:
 Variable names are case sensitive (y and Y are two
different variables)
 Variable names must begin with a letter or the
underscore character
 NOTE: Because JavaScript is case-sensitive,
variable names are case-sensitive.
JavaScript Variables (cont)
<html>
<body>

<script type="text/javascript">
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br />");
firstname="Tove";
document.write(firstname);
</script>

<p>The script above declares a variable, assigns a value to it, displays the value,
change the value, and displays the value again.</p>

</body>
</html>
Assigning Values to Undeclared
JavaScript Variables
 If you assign values to variables that has not yet
been declared, the variables will automatically be
declared.
 If you redeclare a JavaScript variable, it will not lose
its original value.
 var x=5;
 var x;
 After the execution of the statements above, the
variable x will still have the value of 5. The value of
x is not reset (or cleared) when you redeclare it.
JavaScript Operators
 The assignment operator = is used to assign
values to JavaScript variables.
 Arithmetic operators are used to perform
arithmetic between variables and/or values.
JavaScript Operators (cont)
 Given that y=5, the table below explains the
arithmetic operators:
SIgn Description Example Result
+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4
JavaScript Assignment Operators
 Assignment operators are used to assign values to JavaScript
variables.
 Given that x=10 and y=5, the table below explains the
assignment operators:
Operator Example Same As Result
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
The + Operator Used on Strings
 The + operator can also be used to add string
variables or text values together.
 To add two or more string variables together, use the
+ operator.
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
 After the execution of the statements above, the
variable txt3 contains "What a verynice day".
Adding Strings and Numbers
 Look at these examples:
x=5+5;
document.write(x);
x="5"+"5";
document.write(x);
10
x=5+"5"; 55
document.write(x); 55
x="5"+5;
document.write(x); 55
 The rule is:
 If you add a number and a string, the result will be a string.
JavaScript Comparison and Logical
Operators
 Comparison and Logical operators are used to
test for true or false.
 Comparison operators are used in logical
statements to determine equality or difference
between variables or values.
JavaScript Comparison and Logical
Operators (cont)
 Given that x=5, the table below explains the
comparison operators:
SignDescription Example
== is equal to x==8 is false
=== is exactly equal to (value and type) x==5 is true
x==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true
How Can it be Used
 Comparison operators can be used in
conditional statements to compare values and
take action depending on the result:
if (age<18) document.write("Too young");
Logical Operators
 Logical operators are used in determine the logic
between variables or values.
 Given that x=6 and y=3, the table below explains the
logical operators:

Sign Description Example

&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true
Conditional Operator
 JavaScript also contains a conditional operator that
assigns a value to a variable based on some
condition.
 Syntax
variablename=(condition)?value1:value2
 Example
greeting=(visitor=="PRES")?"Dear President
":"Dear ";
 If the variable visitor has the value of "PRES",
then the variable greeting will be assigned the
value "Dear President " else it will be assigned
"Dear".
JavaScript If...Else Statements
 Conditional statements in JavaScript are used to perform
different actions based on different conditions.
 In JavaScript we have the following conditional statements:
 if statement - use this statement if you want to execute some
code only if a specified condition is true
 if...else statement - use this statement if you want to execute
some code if the condition is true and another code if the
condition is false
 if...else if....else statement - use this statement if you want to
select one of many blocks of code to be executed
 switch statement - use this statement if you want to select
one of many blocks of code to be executed
If Statement
 You should use the if statement if you want to
execute some code only if a specified condition is
true.
 Syntax
if (condition)
{
code to be executed if condition is true
}
 Note that if is written in lowercase letters. Using
uppercase letters (IF) will generate a JavaScript
error!
If Statement Example 1
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>
If Statement Example 2
<script type="text/javascript">
//Write "Lunch-time!" if the time is 11
var d=new Date();
var time=d.getHours();
if (time==11)
{
document.write("<b>Lunch-time!</b>");
}
</script>
If...else Statement
 If you want to execute some code if a condition is true and
another code if the condition is not true, use the if....else
statement.
 Syntax
if (condition)
{
code to be executed if condition is true }
else
{
code to be executed if condition is not true
}
If...else Statement Example
<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting. //Otherwise you will get a
"Good day“greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
JavaScript Switch Statement
 You should use the switch statement if you want to select one
of many blocks of code to be executed.
 Syntax
switch(n)
{
case 1: execute code block 1
break;
case 2: execute code block 2
break;
default: code to be executed if n is different from case 1
and 2
}
JavaScript Switch Statement (cont)
 This is how it works: First we have a single
expression n (most often a variable), that is
evaluated once. The value of the expression is
then compared with the values for each case
in the structure. If there is a match, the block
of code associated with that case is executed.
Use break to prevent the code from running
into the next case automatically.
Switch Statement Example
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5: document.write("Finally Friday");
break;
case 6: document.write("Super Saturday");
break;
case 0: document.write("Sleepy Sunday");
break;
default: document.write("I'm looking forward to this weekend!");
}
</script>
JavaScript Functions
 A function is a reusable code-block that will be executed by
an event, or when the function is called.
 To keep the browser from executing a script when the page
loads, you can put your script into a function.
 A function contains code that will be executed by an event or
by a call to that function.
 You may call a function from anywhere within the page (or
even from other pages if the function is embedded in an
external .js file).
 Functions can be defined both in the <head> and in the
<body> section of a document. However, to assure that the
function is read/loaded by the browser before it is called, it
could be wise to put it in the <head> section.
How to Define a Function
 The syntax for creating a function is:
function functionname(var1,var2,...,varX)
{
some code
}
 var1, var2, etc are variables or values passed
into the function. The { and the } defines the
start and end of the function.
How to Define a Function (cont)
 Note: A function with no parameters must include
the parentheses () after the function name:
function functionname()
{
some code
}
 Note: Do not forget about the importance of capitals
in JavaScript! The word function must be written in
lowercase letters, otherwise a JavaScript error
occurs! Also note that you must call a function with
the exact same capitals as in the function name.
The return Statement
 The return statement is used to specify the value that is returned from the
function.
 Example
 The function below should return the product of two numbers (a and b):
function prod(a,b)
{
x=a*b;
return x;
}
 When you call the function above, you must pass along two parameters:
 product=prod(2,3);
 The returned value from the prod() function is 6, and it will be stored in
the variable called product.
The Lifetime of JavaScript Variables
 When you declare a variable within a function, the
variable can only be accessed within that function.
When you exit the function, the variable is
destroyed. These variables are called local variables.
You can have local variables with the same name in
different functions, because each is recognized only
by the function in which it is declared.
 If you declare a variable outside a function, all the
functions on your page can access it. The lifetime of
these variables starts when they are declared, and
ends when the page is closed.
Sample
<SCRIPT>
function Circle_calc_ii()
{
var CircleRadius = document.MyCircleForm.Circle_radius.value;
if (CircleRadius >= 0)
{
document.MyCircleForm.Circle_circumference.value = 2 * Math.PI *
CircleRadius ;
document.MyCircleForm.Circle_area.value = Math.PI * Math.pow(CircleRadius,
2) ;
}
else
{
document.MyCircleForm.Circle_circumference.value = "";
document.MyCircleForm.Circle_area.value = "";
}
}
</SCRIPT>
Continuation
<FORM NAME="MyCircleForm">

radius: <INPUT NAME="Circle_radius" SIZE=4>

<INPUT TYPE=BUTTON OnClick="Circle_calc_ii(this.form);"
VALUE="calculate">
<BR>

circumference: <INPUT NAME="Circle_circumference"

SIZE=9><BR>
area: <INPUT NAME="Circle_area" SIZE=9>

</FORM>
Output

radius: calculate

circumference:
area:
Alternative Continuation
<FORM NAME="MyCircleForm">
<TABLE BORDER CELLPADDING=3>
<TR>
<TD>radius: <INPUT NAME="Circle_radius" SIZE=4></TD>
<TD><INPUT TYPE=BUTTON OnClick="Circle_calc_ii(this.form);"
VALUE="calculate"></TD>
<TD ALIGN=RIGHT BGCOLOR="#AACCFF">
circumference: <INPUT NAME="Circle_circumference" SIZE=9><BR>
area: <INPUT NAME="Circle_area" SIZE=9></TD>
</TR>

</TABLE>
</FORM>
Output

circumference:
radius: 5 calculate area: