Chapter 4
Client side script (Java script)
Prepared by :Yenesew Abebay@Abg2017
Email:yenu2121@[Link]
Introduction to JavaScript
JavaScript that is interpreted within the reader’s browser is called
client-side java script.
•JavaScript is a scripting language Designed to add
interactivity to HTML pages
•A scripting language, i.e. a lightweight programming language
•Usually embedded directly in HTML pages
•Lines of executable computer code
•An interpreted language (not compiled)
• Freely available i.e. no need license
•Supported by all major browsers, like NN and IE
•JavaScript enables you to enhance static web applications,
by providing dynamic, personalized, and interactive content
Java Vs. JavaScript?
Java and JavaScript are two completely different languages
but have some similarities depending on how you look at them.
Similarity
Both are Object Oriented Programming (OOP) languages.
Many of their programming structures are similar. Both
will create great Web page events.
Both can offer interaction between the user and your Web
page.
But they are not created equally by any means
Differences
Java can stand on its own to create full program "standalone"
applications or special type mini application called applets while
JavaScript is text that resides inside HTML documents.
Java is a powerful and very complex programming language - in
the same category as C and C++ while
JavaScript contains a much smaller and simpler set of commands
than does Java.
Java must be compiled into a "machine language" before it can be
run on the Web.
JavaScript is text-based "interpreted" language.
What can a JavaScript Do?
JavaScript is the Programming Language for the Web.
JavaScript can update and change both HTML and CSS. JavaScript can calculate,
manipulate and validate data.
JavaScript interacts with users:
JavaScript can put dynamic text into an
HTML page
JavaScript can react to events
JavaScript can read and write HTML elements
JavaScript can be used to validate data
How to Put a JavaScript into an HTML Page
<html>
<body>
<script language="javascript" type="text/javascript">
[Link]("Hello World!")
</script>
</body>
</html>
The code above will produce this output on an HTML page:
Hello World!
The JavaScript command for writing some output to a page is
[Link]("Hello World!")
Then the <script> tag has to be closed with the end
Comments in java script
<script type="text/javascript">
<!--
some statements
//-->
</script>
The two forward slashes at the end of comment line (//) are a JavaScript
comment symbol.
This prevents the JavaScript compiler from compiling the line.
Integrating JavaScript into HTML code
Scripts in the head section will be executed when CALLED.
Scripts in the body section will be executed WHILE the page
loads.
1. Scripts in the head section
Incorporate the source code into the header of the HTML file to access later
using one of the two other possibilities Scripts to be executed when they are
called, or when an event is triggered
Example
<html>
<head>
<script type="text/javascript">
function hello()
{
alert("Greetings")}
</script>
</head>
</html>
Scripts in the body section
Scripts to be executed when the page loads go in the body
section.
When you place a script in the body section it generates the
content of the page.
Example
<html>
<body>
<script type="text/javascript">
some code
</script>
</body>
</html>
JavaScript Variables
A variable is a space in your computer’s memory
that is reserved for your JavaScript application.
A variable's value can change during the script.
You can refer to a variable by name to see its value
or to change its value.
Rules for Variable names:
Variable names are case sensitive
They must begin with a letter or the underscore character
Variable can hold a number or text, but can not be
switched between these two types of information.
Declare a Variable
you can declare variable by using var key word
As
Var x=5
By assignment as
txt1=hellow
txt2=world
Txt3=txt1+txt2
JavaScript Operators
Arithmetic Operators
Operator Description Example Result
+ Addition x=2 4
y=2
x+y
- Subtraction x=5 3
y=2
x-y
* Multiplication x=5 20
y=4
x*y
/ Division 15/5 3
5/2 2,5
% Modulus (division 5%2 1
remainder)
10%8 2
10%2 0
++ Increment x=5 x=6
x++
-- Decrement x=5 x=4
x--
Assignment Operators
Operator Example Is The Same As
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
Comparison Operators
Operator Description Example
== is equal to 5==8 returns false
=== is equal to (checks for both value x=5
and type)
y="5"
x==y returns true
x===y returns false
!= is not equal 5!=8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false
<= is less than or equal to 5<=8 returns true
Logical Operators
Operator Description Example
&& and x=6
y=3
(x < 10 && y > 1) returns true
|| or x=6
y=3
(x==5 || y==5) returns false
! not x=6
y=3
!(x==y) returns true
JavaScript Conditional Statements
Conditional statements in JavaScript are used to perform
different actions based on different conditions.
In JavaScript we has 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
Switch statement - use this statement if you want to select one of
many sets of lines to execute.
if (condition)
{
code to be executed if condition is true
}
……………………………………………..
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
…………………………………………………………….
switch (condition)
{
case 0:
code to be executed if condition is case 0
break:
Case1:
code to be executed if condition is case 1
Break:
default:
code to be executed if condition is not case 1&2
……………………………………………………………..
JavaScript Popup Boxes
JavaScript has three kinds of popup boxes: Alert box, Confirm
box, and Prompt box
Methods Description
alert(msg) Displays an Alert dialog box with the desired
message and OK button.
confirm(msg) Displays a Confirm dialog box with the
specified
message and OK and Cancel buttons.
prompt(msg, [input]) Displays a Prompt dialog box with message
and Input field
Some practical example
example1
<script>
s1=12
s2=28
sum=s1+s2
sub=s1-s2
prod=s1*s2
divid=s1/s2
[Link]("<br>arithmetic operation<br>")
[Link]("<br>the sum is: "+sum)
[Link]("<br>the difference is: "+sub)
[Link]("<br>the product is : "+prod)
[Link]("<br>the result is: "+divid)
alert("these are the basic arithematic operators!")
</script >
Syntax
With out argument
function function name ()
{
some code
}
Example2
Write java script program calculate factorial of a number
<html>
<head> <title>ip</title></head>
<body>
<script language="JavaScript">
var m=prompt("inter")
function factorial()
{
fact=1;
i=1;
for(i=1;i<=m;i++)
{
fact=fact*i;
}
}
factorial();//calling function
[Link](fact)
alert("this is the factorial")
</script></body></html>
with argument
function function name (var1,var2…varn)
{
some code
}
Example
<html>
<head> <title>function</title></head>
<body>
<script language="JavaScript">
Function add(x,y);
{
Sum=x+y;
Alert(“sum”)
}
add(x,y)</script></body></html>