Chapter 5

Chapter four
Client-Side Scripting
Language
04/16/24 1
Client-side JavaScript:
 Client-side JavaScript is the most common form of the
language. The script should be included in or referenced by
an HTML document for the code to be interpreted by the
browser.
 The JavaScript code is executed when the user submits the
form, and only if all the entries are valid they would be
submitted to the Web Server.
04/16/24 2
Advantages of JavaScript:
The merits of using JavaScript are:
 Less server interaction: You can validate user input before sending the page
off to the server. This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors: They don't have to wait for a page reload
to see if they have forgotten to enter something.
 Increased interactivity: You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.
 Richer interfaces: You can use JavaScript to include such items as drag-and-
drop components and sliders to give a Rich Interface to your site visitors.
04/16/24 3
Limitations with JavaScript:
 We can not treat JavaScript as a full fledged programming
language. It lacks the following important features:
 Client-side JavaScript does not allow the reading or writing
of files. This has been kept for security reason.
 JavaScript can not be used for Networking applications
because there is no such support available.
 JavaScript doesn't have any multithreading or multi-process
capabilities.
04/16/24 4
Java script syntax
 A JavaScript consists of JavaScript statements that are
placed within the <script>... </script> HTML tags in a web
page.
 You can place the <script> tag containing your JavaScript
anywhere within you web page but it is preferred way to
keep it within the <head> tags.
04/16/24 5
Cont’d…
 The <script> tag alert the browser
program to begin interpreting all the text
between these tags as a script. So
simple syntax of your JavaScript will be
as follows:
<script ...>
JavaScript code
</script>
04/16/24 6
Cont’d…
 The script tag takes two important attributes:
• language: This attribute specifies what scripting language you are
using. Typically, its value will be javascript. Although recent versions
of HTML (and XHTML, its successor) have phased out the use of
this attribute.
• type: This attribute is what is now recommended to indicate the
scripting language in use and its value should be set to
"text/javascript".
04/16/24 7
Cont’d…
<script language="javascript"
type="text/javascript"> JavaScript code
</script>
04/16/24 8
Cont’d…
<html>
<body>
<script language="javascript" type="text/javascript">
 </script>
</body>
</html>
04/16/24 9
Cont’d…
Semicolons are Optional:
type="text/javascript">
<!–
var1 = 10
var2 = 20
//-->
</script>
04/16/24 10
Cont’d…
But when formatted in a single line as
follows, the semicolons are required:
type="text/javascript">

</script>
04/16/24 11
JavaScript Placement in HTML File
 Script in <head>...</head> section.
 Script in <body>...</body> section.
 Script in <body>...</body> and
<head>...</head> sections.
 Script in and external file and then include in
<head>...</head> section.
04/16/24 12
Cont’d…
1.JavaScript in <head>...</head> section:
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" /> </body>
</html>
04/16/24 13
Cont’d…
2.JavaScript in <body>...</body> section:
<html>
<head></head>
<body>

</script>
<p>This is web page body </p>
</body>
</html>
04/16/24 14
Cont’d…
3. JavaScript in External File :
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body> ....... </body>
</html>
04/16/24 15
example
Function fun()
{
alert(“hi you fill fine”)
}
save as a.js
<html>
<head>
<script type="text/javascript" src=“a.js" ></script> </head>
<body> <input type="button"onclick="fun()" value="hiii"> </body>
</html>
04/16/24 Compileed By:Temesegan W. 16

Programming Basics
 Programmers use variables to store values. A variable can
hold several types of data. In JavaScript you don't have to
declare a variable's data type before using it. Any variable
can hold any JavaScript data type, including:
• String data
• Numbers
• Boolean values (T/F)
04/16/24 17
JavaScript Variables
 Before you use a variable in a JavaScript
program, you must declare it. Variables are
declared with the var keyword as follows:
var money;
var name;
</script>
04/16/24 18
JavaScript if...else Statements
 JavaScript supports conditional statements which
are used to perform different actions based on
different conditions. Here we will explain if..else
statement.
 JavaScript supports following forms of if..else
statement:
• if statement
• if...else statement
• if...else if... statement.
04/16/24 19
Cont’d…
 if statement:
-The if statement is the fundamental control statement
that allows JavaScript to make decisions and
execute statements conditionally.
if (expression)
{
Statement(s) to be executed if expression is
true
}
04/16/24 20
Cont’d…
 Example
<!–
var age = 20; if( age > 18 )
{ document.write("<b>Qualifies for
driving</b>"); } //
-->
</script>
04/16/24 21
Cont’d…
if...else statement:
The if...else statement is the next form of
control statement that allows JavaScript to
execute statements in more controlled way.
04/16/24 22
Cont’d…
 Syntax:
if (expression)
{
Statement(s) to be executed if expression is true
}
else
{
Statement(s) to be executed if expression is false
}
04/16/24 23
Cont’d…
 Example

</script>
04/16/24 24
Cont’d…
 if...else if... statement:
The if...else if... statement is the one
level advance form of control statement
that allows JavaScript to make correct
decision out of several conditions.
04/16/24 25
1. <HTML> <HEAD>
<SCRIPT type="text/javascript">
var x=prompt("enter x");
st by
var y=prompt("enter y"); te ers
a
e b
var z=prompt("enter z"); gr um ent
e
if (x>y && x>z) th e n tem
{ ds re ta
f in y th g s
alert(x+" is the largest!");
hat an kin
} t g a
m n m
else if(y>x && y>z) g ra mo ion
o a is
{ pr ber dec
a m f
alert(y+" is the largest!"); nu se i
} el
else
{
alert(z+"the largest");
}
</SCRIPT>
</HEAD> </HTML>
Switch statement
 You can use multiple if...else if
statements, as in the previous chapter,
to perform a multiway branch. However,
this is not always the best solution,
especially when all of the branches
depend on the value of a single variable.
04/16/24 27
Cont’d…
 Syntax
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
... case condition n: statement(s)
break;
default: statement(s)
}
04/16/24 28
Cont’d…
 <script type="text/javascript">
 </script>
04/16/24 30
2. <HTML> <HEAD>
var v=prompt("enter the number from 0-4");
switch(v)
{
case "0":
alert("zero"); t
breake; p rin
case "1": nt to to 4,
t eme m 0
alert("one");
h sta r fro ree
breake;
witc mbe s Th
case "2": ing s a nu ed a
alert("two"); us nt of play
m
ra ivale e dis
breake; rog u b
case "3": a p rd eq ould
alert("three"); wo . 3 sh
breake; e.g
case "4":
alert("four");
breake;
default:
alert("out of range");
}
</SCRIPT>
</HEAD> </HTML>
Class work
Write a compiled code in JavaScript that tells
student grade by receiving any mark starting
from 0 to 100
Assume mark>80 have A grade
Mark>70 have B grade
Else grade F by using switch/else if statements
JavaScript Functions
 A function is a group of reusable code which
can be called anywhere in your programme.
This eliminates the need of writing same code
again and again.
 JavaScript allows us to write our own
functions as well.

Cont’d…
Function Definition:
 Before we use a function we need to
define that function. The most common
way to define a function in JavaScript is
by using the function keyword, followed
by a unique function name,
04/16/24 34
Cont’d…
 <script type="text/javascript">
<!–
function functionname(parameter-list)
{
statements
}
//-->
</script>
04/16/24 35
Cont’d…
 Example:
A simple function that takes no parameters called
sayHello is defined here:

</script>
04/16/24 36
Cont’d…
Calling a Function:
To invoke a function somewhere later in the
script, you would simple need to write the
name of that function as follows:
<!–
sayHello();
//-->
</script>
04/16/24 37
Cont’d…
Function Parameters:
A function can take multiple parameters separated by
comma.

</script>
04/16/24 38
Cont’d…
<!–
sayHello('Zara', 7 );
//-->
</script>
04/16/24 39
Return statement
 Example:
<!—
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
//-->
</script>
04/16/24 40
Cont’d…
 Now we can call this function as follows:
<!—
var result;
result = concatenate('Zara', 'Ali'); alert(result );
//-->
</script>
04/16/24 41
JavaScript Events
What is an Event ?
JavaScript's interaction with HTML is handled
through events that occur when the user or
browser manipulates a page.
04/16/24 42
Cont’d…
 Example:
<html>
<head>
<!—
function sayHello()
{
alert("Hello World");
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello();" value="Say Hello" />
</body>
</html>
04/16/24 43
Cont’d…
04/16/24 44
JavaScript Popup Boxes
There are three basic popup boxes as follows,

1. Alert box
 An alert box is often used if you want to make
sure information comes through to the user.
 User will have to click "OK" to proceed
alert("sometext");
04/16/24 45
Cont’d…
2. Confirm box
 User will have to click either "OK" or "Cancel"
to proceed
 A confirm box is often used if you want the user
to verify or accept something.
confirm("sometext");
04/16/24 46
Cont’d…
3. Prompt box
 User will have to click either "OK" or "Cancel"
to proceed after entering an input value
 A prompt box is often used if you want the user
to input a value before entering a page.
prompt("sometext","defaultvalue");
04/16/24 47
example
1. var spec = prompt("Your species?",
"human");
2. var x = prompt("Where does the Pope
live?"); if (x === "Vatican")
{ alert("Correct!"); }

04/16/24 49
Lab exercise on JavaScript
1. Write a program to find the greatest number among three given
numbers
2. Write a program using switch statement to print word equivalent
of a number from 0 to 4, e.g. 3 should be displayed as Three.
3. Write a program to print the following output using for loops
1
22
333
4. Write a program to calculate the average of 3 numbers entered by
the visitor through a prompt
5. What will be the output of the following
JavaScript code?
for(i=1; i<=5; i++)
{
document.write(“<BR>”)
for(j=1; j<=i; j++)
document.write(“*”)}
6. Write a program using while statement to find
out the sum of first n numbers.
3. <HTML> <HEAD>
for(var i=1;i<6;i++)
{
document.write("<br>")
for(var j=0;j<i;j++)
{
document.write(i);
}
}
</SCRIPT>
</HEAD> </HTML>
4. <HTML> <HEAD>
var y=prompt("enter y");
var z=prompt("enter z");
var b=(x+y+z)/3;
alert("the average of the three num is: "+b);
</SCRIPT>
</HEAD> </HTML>
6. <HTML> <HEAD>
var s=0;
var i=0;
while(i<=x)
{
s=s+i;
i++;
}
alert("sum="+s);
</SCRIPT>
</HEAD> </HTML>

Chapter 5

Uploaded by

Copyright:

Available Formats

Chapter 5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 5

Uploaded by

Copyright:

Available Formats

Chapter four

04/16/24 Compileed By:Temesegan W. 16

04/16/24 Compileed By:Temesegan W. 33

There are three basic popup boxes as follows,

04/16/24 Compileed By:Temesegan W. 48

You might also like