Unit 2.4

Web Technology ECS-604
Lecture No. 13
JavaScript
JavaScript is the most popular scripting language on the internet, and works in all major
browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
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
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
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
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
Put a JavaScript into an HTML page
The example below shows how to use JavaScript to write text on a web page:
Example
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
JavaScript Where To

JavaScripts can be put in the body and in the head sections of an HTML page.
Where to Put the JavaScript
JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always
what we want. Sometimes we want to execute a script when a page loads, or at a later event, such as when
a user clicks a button. When this is the case we put the script inside a function, you will learn about
functions in a later chapter.
Scripts in <head>
Scripts to be executed when they are called, or when an event is triggered, are placed in functions.
Put your functions in the head section, this way they are all in one place, and they do not interfere with
page content.
Scripts in <body>
If you don't want your script to be placed inside a function, or if your script should write page content, it
should be placed in the body section.
Example
<html>
<head>
</head>
<body>
document.write("This message is written by JavaScript");
</script>
</body>
</html>
Try it yourself »
Scripts in <head> and <body>
You can place an unlimited number of scripts in your document, so you can have scripts in both the body
and the head section.
Example
<html>
<head>
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
document.write("This message is written by JavaScript");
</script>
</body>
</html>
Using an External JavaScript
If you want to run the same JavaScript on several pages, without having to write the same script on every
page, you can write a JavaScript in an external file.
Save the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script></script> tags!
To use the external script, point to the .js file in the "src" attribute of the <script> tag:
Example
<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>
»
Note: Remember to place the script exactly where you normally would write the script!
JavaScript Variables
Variables are "containers" for storing information.
JavaScript Variables
As with algebra, JavaScript variables are used to hold values or expressions.
A variable can have a short name, like x, or a more descriptive name, like carname.
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
A variable's value can change during the execution of a script. You can refer to a variable by its name to
display or change its value.

Declaring (Creating) JavaScript Variables
Creating variables in JavaScript is most often referred to as "declaring" variables.
You can declare JavaScript variables with the var statement:
var x;
var carname;
After the declaration shown above, the variables are empty (they have no values yet).
Assigning Values to Undeclared JavaScript Variables
If you assign values to variables that have not yet been declared, the variables will automatically be
declared.
Redeclaring JavaScript Variables
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 Arithmetic
As with algebra, you can do arithmetic operations with JavaScript variables:
y=x-5;
z=y+5;
JavaScript Operators
The assignment operator = is used to assign values to JavaScript variables.
The arithmetic operator + is used to add values together.
y=5;
z=2;
x=y+z;
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:

Operator 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
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
JavaScript Comparison and Logical Operators
Comparison and Logical operators are used to test for true or false.
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables
or values.
Given that x=5, the table below explains the comparison operators:
Operator Description 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

Logical Operators
Logical operators are used to determine the logic between variables or values.
Given that x=6 and y=3, the table below explains the logical operators:
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true
Conditional Statements
Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
if statement - use this statement to execute some code only if a specified condition is true
if...else statement - use this statement 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 to select one of many blocks of code to be
executed
switch statement - use this statement to select one of many blocks of code to be executed
JavaScript Switch Statement
Conditional statements are used to perform different actions
based on different conditions.
The JavaScript Switch Statement
Use the switch statement to select one of many blocks of code to be executed.
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.
Example
//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;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
Lecture No. 14
Objects in JavaScript
JavaScript Popup Boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes
through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
alert("sometext");
Example
<html>
<head>
function show_alert()
{
alert("I am an alert box!");

}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html>
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax
confirm("sometext");
Prompt Box
A prompt box is often used if you want the user to input a value before
entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed
after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box
returns null.
Syntax
prompt("sometext","defaultvalue");
Example
<html>
<head>
function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>

</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box" />
</body>
</html>
JavaScript Functions
A function will be executed by an event or by a call to the function.
JavaScript Functions
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 the function.
You may call a function from anywhere within a 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 a function is read/loaded by the browser before it is called, it could
be wise to put functions in the <head> section.
How to Define a Function
Syntax
function functionname(var1,var2,...,varX)
{
some code
}
Example
<html>
<head>
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
Example
<html>
<head>
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
document.write(product(4,3));
</script>
</body>
</html>
The do...while Loop
The do...while loop is a variant of the while loop. This loop will execute the block of code
ONCE, and then it will repeat the loop as long as the specified condition is true.
Syntax
do
{
code to be executed
}
while (var<=endvalue);

The example below uses a do...while loop. The do...while loop will always be executed at
least once, even if the condition is false, because the statements are executed before the
condition is tested:
Example
<html>
<body>
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>
JavaScript Break and Continue Statements
The break Statement
The break statement will break the loop and continue executing the code that follows after
the loop (if any).
Example
<html>
<body>
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}

}
</script>
</body>
</html>
The continue Statement
The continue statement will break the current loop and continue with the next
value.
Example
<html>
<body>
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
}
</script>
</body>
</html>

Unit 2.4

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Unit 2.4 (20)

More from Abhishek Kesharwani (20)

Unit 2.4