WT Unit 5

UNIT - V Client-side Scripting: Introduction to Javascript, Javascript language – declaring
variables, scope of variables, functions. event handlers (onclick, onsubmit etc.), Document
Object Model, Form validation.
Prepared By
A.Kiran kumar
Assistant Professor
CMRTC
JavaScript
• JavaScript is a client-side, object-oriented scripting language that is used to handle
and validate client-side data before submitting it to the server.
• JavaScript is used to create client-side dynamic pages.
• It executes on the browser and therefore reduces the load on the server.
• JavaScript is a lightweight scripting language.
• Javascript is an interpreted language.
• JavaScript is Platform Independent language.
• Java script is a Dynamically typed language.
History:
• JavaScript, formerly known as LiveScript, has been developed by Netscape and Sun
Microsystems.
• JavaScript was developed by Brendan Eich in 1995, and appeared in Netscape, a
popular browser of that time.
Browsers use their own JavaScript Engines to execute the JavaScript code. Some
commonly used browsers are listed below:
•Chrome uses a V8 engine.
•Firefox uses the SpiderMonkey engine.
•Microsoft Edge uses the ChakraCore engine.
•Safari uses the SquirrelFish engine.
• Client-side Scripting:
•A client-side script is a program that is processed within the client browser.
• These kinds of scripts are small programs that are downloaded, compiled, and run by the
browser.
• JavaScript is an important client-side scripting language and is widely used in dynamic
websites.
JavaScript Features
Light Weight: JavaScript is a lightweight scripting language because it is made for data
handling at the browser level only.
Dynamic Typed: JavaScript supports dynamic typing which means types of the variable
are defined based on the stored value.
For example, if you declare a variable x then you can store either a string or a Number type
value. This is known as dynamic typing.
Object-Based Language: JavaScript is an object-based scripting language that provides
built-in objects like String, Math, Date, etc.
Functional Style: This implies that JavaScript uses a functional approach, even objects are
created from the constructor functions.
Platform Independent: This javascript is platform-independent means that you can simply
write the script once and run them on any platform or any browser
Prototype-based: JavaScript is a prototype-based scripting Language. This means
javascript uses prototypes instead of classes.
Interpreted: JavaScript is an interpreted language which means the script written inside
javascript is processed line by line and is not compiled before execution.
Advantages of JavaScript
1.JavaScript makes the webpage more interactive and dynamic.
2.JavaScript can save server traffic by validating the user inputs before sending data to
the server.
3.JavaScript can be used to store client-side cookies to store data on the client-side and
then read or delete them.
4.JavaScript is lightweight object-based Scripting language.
Disadvantages or Limitations:
• JavaScript is not capable to write multi-threading or multiprocessor code.
• JavaScript can't be used for developing networking applications.
• JavaScript can only be used on the client side i.e. for frontend development.
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
•Client-side validation,
•Dynamic drop-down menus,
•Displaying date and time,
•Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box
and prompt dialog box),
•Displaying clocks etc.
Frameworks of JS:
• Angular JS
• JQuery
• React
• Meteor
• Polymer etc
Syntax of JS:
JS code can be embedded in HTML using Script tag inside head tag
<html>
<head>
<script language="javascript" type="text/javascript">
//JS code
</script>
</head>
<body> </body>
</html >
Note:
Script tag has language and type attributes
The language attribute specifies that we are using JavaScript.
The text/javascript is the content type that provides information to the browser about the
data.
How to run Java Script
The browser is responsible for running JavaScript code
Ex:
Internet Explorer, Google Chrome, Firefox or any other browser.

JavaScript runs on any operating system including Windows, Linux or Mac.
Comment in JavaScript
Comment is nothing but it is a statement which is not display on browser window. it is
useful to understand the which code is written for what purpose.
It is used to add information about the code, warnings or suggestions so that the end user
or other developer can easily interpret the code.
Types of JavaScript Comments
There are two types of comments are in JavaScript
•Single-line Comment
•Multi-line Comment
Single-line Comment
Ex:
It is represented by double forward slashes //. It can be used before any statement.
<script>
•// It is single line comment
•document.write("Hello Javascript");
•</script>
Multi-line Comment
It can be used to add single as well as multi line comments.
It is represented by forward slash / with asterisk * then asterisk with forward slash.
Ex:
<script>
/* It is multi line comment.
It will not be displayed */
document.write("Javascript multiline comment");
</script>
JavaScript Variable
A JavaScript variable is the name of the storage location used to store the data. It can
store any type of data.
There are some rules while declaring a JavaScript variable (also known as identifiers).
1.Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2.After the first letter we can use digits (0 to 9), Ex: value1.
3.JavaScript variables are case-sensitive Ex: x and X are different variables.
Variable Declaration
Java script did not provide any data types for declaring variables and a variable in
javascript store any type of value. Hence We can use a variable directly without declaring it.
var keyword are used before the variable name to declare any variable.
Syntax
var x;
var x = 10; // Valid
var _value="porter"; // Valid
var 123=20; // Invalid
Example of Variable declaration in JavaScript
<script>
var a=10;
var b=20;
var c=a+b;
document.write(c);
</script>
There are two types of variables in JavaScript :

local variable and global variable.
Types of Variable in JavaScript or Scope of variable in JavaScript
Local Variable
Global Variable
Local Variable
A variable which is declared inside block or function is called local variable.
It is accessible within the function or block only.
For example:
<script>
function loc()
{
var x=10; //local variable
document.write(x);
}
</script>
global variable
A global variable is accessible from any function. A variable i.e. declared outside the
function or declared with a window object is known as a global variable.
Ex:
<script>
var value=10;//global variable
function glob()
{
alert(value);
}
function b()
{
alert(value);
}
</script>
Declaring JavaScript global variable within function
To declare JavaScript global variables inside function, you need to use window object.
Ex window.value=90;
<script>
function m()
{
window.value=100;
}
function n()
{
alert(window.value);
}
</script>
JavaScript in HTML
The JavaScript code can be inserted in an HTML file by using the HTML <script> tag.
The script tag can contain either scripting statements or refer to an external JavaScript file.
JavaScript is the default scripting language for most of browsers.
<script src="JS_FILE_URL" type="..."></script>
or
<script type="text/javascript">
// JS code here
</script>
The type attribute specifies what type of script we are using Ex:
text/javascript ,text/vbscript.
The src attribute that allows us to add a reference to an external script file.It specifies the
(URL) of a file that contains the script.
JavaScript in HTML Webpage
3 Places to put JavaScript code
In the HEAD element (<head>...</head>)
In the BODY element (<body>...</body>)
To include an External JavaScript File
1. Java Script Code In the HEAD element (<head>...</head>)
<html>
<head>
function msg()
{
document.write("Hello Javascript");
}
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
2.In the BODY element (<body>...</body>)
place a script tag inside the body element of an HTML document.
Ex:
<html>
<head>
</head>
<body>
document.write(“This is java script");
</script>
</body>
</html>
3.External JavaScript file
• We can create external JavaScript file and embed it in many html page.
• It provides code re usability because single JavaScript file can be used in several html
pages.
• An external JavaScript file must be saved by .js extension.
• It is recommended to embed all JavaScript files into a single file. It increases the speed
of the webpage.
create an external JavaScript file that prints Hello Javascript in a alert dialog box.
Ex:hello.js
function msg()
{
document.write("Hello Javatscript");
}
Include the JavaScript file into Html page.
It calls the JavaScript function on button click.
index.html
<html>
<head>
<script type="text/javascript" src=“hello.js"></script>
</head>
<body>
<form>
</form>
</body>
</html>
output: Hello JavaScript
Welcome to JavaScript
Types of JavaScript:
1. Internal Javascript/Embedded JS
2. External Javascript
1. Internal JS:
Both html code and JavaScript code will be written in the same with .html extension
Adv:
• Easy to understand
• No confusion of multiple file
Dis adv:
• If the code size increases, programmer may get confusion
Ex Internal JavaScript
Java Script Code and html code the in same document
<html>
<head>
function msg()
{
document.write("Hello Javascript");
}
</script>
</head>
<body>
<form>
</form>
</body>
</html> output: Hello Javascript
Welcome to Javascript
2. External Javascript:
• HTML code will be written in html file.
• JavaScript code will be written in separate file with extension .js.
• We can include the javascript code Html with help of the src attribute othe f script tag.
Adv:
• Even though the code increases, the programmer can understand the code easily
• Reusability of one JS file in multiple Html files
Dis adv:
• No.of file will be increased
Ex to illustrate External JavaScript
Ex:hello.js
function msg()
{
document.write("Hello Javatscript");
}
Include the JavaScript file into Html page.
It calls the JavaScript function on button click.
index.html
<html>
<head>
<script type="text/javascript" src=“hello.js"></script>
</head>
<body>
<form>
</form>
</body>
</html>
output: Hello JavaScript
Welcome to JavaScript
JAVA SCRIPT DATA TYPES
Data type:The Data type specifies what type of data the variable can hold.
JavaScript is a dynamic type language, means you don't need to specify type of the variable
because it is dynamically used by JavaScript engine.
You need to use var here to specify the data type. It can hold any type of values such as
numbers, strings etc.
JavaScript has dynamic types. This means that the same variable can be used to hold
different data types:
For example:
var a=10;//holding number
var b="cherry";//holding string
There are two types of data types in JavaScript.
1.Primitive data type
1. Strings
A string is a sequence of characters
Strings are written with quotes. You can use single or double quotes:
Ex: var sname=“cherry”;
2. Numbers
JavaScript has only one type of numbers.
Numbers can be written with, or without decimals:
Ex : var x=10;
var x=10.5;
3.Booleans: Booleans are often used in conditional testing.
Booleans can only have two values: true or false.
var x = 5;
var y = 6;
if(x == y) // Returns true

4. Null: Null represents null i.e. no value at all.
5. Undefined: represents an undefined value.
2. Non-primitive (reference) data type

1. Array: Array is a collection of similar types of elements. It can be a group of an integer
or It can be a group of strings etc.
An array is a special variable, which can hold more than one value.
Creating an Array
Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
Var =[ , , ...];
var cars = ["Santro", "Volvo", "BMW"];
Using javascript new keyword we can create an array
var cars = new Array("Santro", "Volvo", "BMW");
Accessing Array Elements
You access an array element by referring to the index number:
var cars = ["Santro", "Volvo", "BMW"];
var car = cars[0];
2. object: An object is an entity that has a state and behavior. It should exist in the world.
• In real life, a car is an object.
• A car has properties like weight and color, and methods like start and stop:
JavaScript object can be created with an object literal:

Syntax:
object={property1:value1,property2:value2.....propertyN:valueN}
car = {type: "Fiat", model:"500", color:"white"};
Accessing Object Properties
You can access object properties in two ways:
<script>
emp={id:102,name:"cherry",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
3.RegExp:It represents regular expression.
Difference between
var vs let:
• var and let are both for variable declaration in JS but the difference i.e that
• var is function scoped
• let is block scoped
var:
{
var x=2;
}
// x can be accessed here
let:
{
let x=2;
}
//x cannot be accessed here
Java Script Operators
What is an Operator?
In JavaScript, an operator is a special symbol used to perform operations on operands
(values and variables).
Operands are the input values that we pass to the operator to perform operation.
For example, var sum=19+7;
Here + is an operator that performs addition, and 19 and 7 are operands.
There are following types of operators in JavaScript.
1.Arithmetic Operators
2.Assignment Operators
3.Comparison (Relational) Operators
1.Bitwise Operators
2.Logical Operators
3.Special Operators
1.Arithmetic Operators:
Arithmetic operators are used to perform arithmetic operations on the operands.
Operator Meaning
+ Addition
- Subtraction
* Multiplication
/ Division
% Remainder
Ex:
2.Assignment operators
Assignment operators are used to assign values to variables.
For Ex: var x = 5;
Here, the = operator is used to assign value 5 to variable x.
LHS=RHS
LHS should be variable
RHS may be a variable, value or expression
Operator Meaning
= Assigns to
+= add and assign to
-= subtract and assign to
*= multiply and assign to
/= divide and assigns to
%= modulus and assigns to
3.Relational Operators
Relational Operators are used to check relation between two variables.
Mainly used for the purpose of comparing.
Ex: a>b; Relational Operators returns “Boolean” value .i.e it will return true or false.
Operator Meaning
< less than
<= less than or equal to
> greater than
>= greater than or equal to
== equal to
!= not equal to
4. Logical Operators: are used when we want to check multiple conditions together.
Used to construct compound conditions.
The logical operators are
Operator Meaning
&& Logical AND (Both conditions must be true)
|| Logical OR (Atleast One Condition true)
! Logical Not (Given condition will be reversed )
5.JavaScript Bitwise Operators
The bitwise operators perform bitwise operations on operands
Operator Description
& Bitwise AND
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
<< Bitwise Left Shift
>> Bitwise Right Shift
6.String Operators
In JavaScript, you can also use the + operator to concatenate (join) two or more strings.
+ Combine two strings
num+num=addition
string+num=concatenation
num+string=concatenation
string+string=concatenation
Control statements
Control statements that can be used to control the flow of the program. Such statements
are called control statements.
Control statements are statements that are executed randomly and repeatedly.
They are useful to write better and more complex programs.
By default, all the statements execute in sequential order (top-to-bottom)

In order to change (control) the execution flow of the statements, we have to use control
statements
Types of Control Statements:
1. Conditional Statements
2. Looping Statements
Conditional Statements are two types
if statement
switch statement
There are three forms of if statement in JavaScript.
1.If Statement
2.If else statement
3.if else if statement
If statement
It evaluates the content only if expression is true.
Syntax:
if(expression)
{
//content to be evaluated
}
2.If...else Statement
It evaluates the content whether condition is true of false
Syntax:
if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}
3.If...else if statement
It evaluates the content only if expression is true from several expressions or conditions
Syntax:
if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else{
//content to be evaluated if no expression is true
}
Ex: if else if
<script>
var =20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==20){
document.write("a is equal to 20");
}
else{
document.write("a is not equal to 10 and 20");
}
</script> OUTPUT: a is equal to 20
4.Nested if: if block present inside in another if block is called nested if
Syntax:
if(condition)
{
statements
if(condition)
{
statements
}
}
else
{
statements
}
Ex to illustrate nestedif
<html>
<head>
</head>
<body>
<script>
var a=10,b=5;
if(a>=b)
{
if(a==b)
{
Document.write("a is equals to b");
}
else
{
Document.write("a is greater than b");
}
output: a is greater then b
Switch:
JavaScript Switch
The JavaScript switch statement is used
switch(expression)
{
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
default:
code to be executed if above values are not matched;
}
<script> Ex to illustrate switch case
var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
document.write(result);
</script> output: B Grade
Loops:
• If you want to repeat a particular statement many times then use loops.
• The JavaScript loops are used using for, while, do while or
for-in loops. It makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1.for loop
2.while loop
3.do-while loop
4.for-in loop
1.while:
• It is used to execute the code repeatedly, while the condition is TRUE
• It checks the condition and execute the code; again it repeats the same process as
long as the condition is TRUE, once the condition is false, it stops the loop.
• It is also called entry called loop.
Syntax:
while(condition)
{
statements
}
Ex to illustrate while loop
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
Output:
11
12
13
14
15
11
12
13
14
15
2.dowhile
• It is also same as while loop, to execute the code repeatedly as long as the condition is TRUE
• But, code is once whether condition is true or false. It is also called exit loop
syntax
do{
code to be executed
}while (condition);
Ex: to illustrate dowhile
<script>
var i=21;
do{ output:
document.write(i + "<br/>"); 21
i++; 22
}while (i<=25); 23
</script> 24
25
3.forloop:
• It is used to execute the code repeatedly, while the condition is TRUE
• It is also same as while, but we will write the loop related statements (initialization,
condition and inc/dec) in a single line so that it will be easy to understand.
Syntax:
for(initialization; condition; increment/decrement)
{
statements
}
Ex: to illustrate for loop
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
JavaScript Functions
Function: Function is a block of code to perform a specific task or operations.
JavaScript function can be call many times to reuse the code.
In Javascript we create new functions within <script> and </script> tag.
Declare a function in JavaScript using function keyword.
The keyword function precedes the name of the function.
The body of function is written within {}.
Syntax
function functionName([arg1, arg2, ...argN])
{
//code to be executed
}
Calling a Function: we can call a function directly with functionname
functionname();
Advantage of JavaScript function
1.Code reusability: We can call a function several times so it save coding.
2.Less coding: It makes our program compact. We don’t need to write many lines of code
each time to perform a common task.
•Function makes the program easier as each small task is divided into a function.
•Function increases readability.
Example of function in JavaScript that does not has Parameters.
<html>
<head>
</head>
<body>
<script>
function msg()
{
document.write("javascript is popular scripting language");
}
msg();
</script>
</body>
</html> output: javascript is popular scripting language
JavaScript Function Parameters
A function can also be declared with parameters. A parameter is a value that is passed when
declaring a function. We can call function by passing arguments.
Example of function that has one parameter.
<html>
<head>
<script>
function sum(x,y)
{
document.write(x+y);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="sum(5,5)"/>
</body>
</html> output:10
Java Script Function with Return Value
We can call a function that returns a value and use it in our program.The return statement
can be used to return the value to a function call.
Example of function that returns value
funret.html
<html>
<head> </head>
<body>
<script>
function add(x,y)
{
return(x+y);
}
</script>
<script>
document.write(add(10,5));
</script>
</body> </html> output:15
Java Script objects
object
String
Array
Number
Date
Boolean
Window
JavaScript Objects
1.Object:
A JavaScript object is an entity having state and behavior (properties and method).
For example : Student,car, pen, bike, etc.
• JavaScript is an object-based language. Everything is an object in JavaScript.
• JavaScript is template based not class based. Here, we don't create class to get the
object. But, we direct create objects.
Creating Objects in JavaScript
There are 3 ways to create objects.
1.By object literal
2.By creating instance of Object directly (using new keyword)
3.By using an object constructor (using new keyword)
1) JavaScript Object by object literal
The syntax of creating an object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}
property and value is separated by : (colon).
Example of creating object in JavaScript.

<script>
emp={id:102,name:"cherry",salary:40000}
</script>
2) By creating instance of Object
The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create object.
Example of creating object directly.
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
</script>
3.By using an Object constructor
Here, you need to create function with arguments. Each argument value can be assigned
in the current object by using this keyword. The this keyword refers to the current object.
example of creating object by object constructor is given below.
<script>
function emp(id,name,salary
){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
2.String Object
String: JavaScript string is an object that represents a sequence of characters.
There are 2 ways to create string in JavaScript
1.By string literal
2.By string object (using new keyword)
1) By string literal:The string literal is created using double quotes.
syntax:
var stringname="string value";
Ex:
<script>
var str="This is JavaScript";
document.write(str);
</script>
2.By string object (using new keyword):Here, new keyword is used to create object of
string.
syntax:
var stringname=new String(“Java Script");
Ex:
<script>
var lang=new String("hello javascript");
document.write(lan);
</script>
JavaScript String Methods:
• Length(): It finds the length of the given string
• charAt(): This method returns the character at the given index.
• concat(str): This method concatenates or joins two strings.
• indexOf(str): This method returns the index position of the given string.
• replace(): It replaces a given string with the specified replacement.
• substr() : It is used to fetch the part of the given string on the basis of the specified
starting position and length.
• toLowerCase(): It converts the given string into a lowercase letter.
• toUpperCase(): It converts the given string into an uppercase letter.
• split(): It splits a string into a substring array, then returns that newly created array.
• trim(): It trims the white space from the left and right side of the string.
• slice(beginIndex, endIndex):This method returns the parts of the string from the given
beginIndex to endIndex.
Ex1 : charAt() Ex3: indexOf()
<script>
var str="javascript";
document.write(str.charAt(2));
</script>
output:
V
Ex2: concat()
Ex4: trim()
<script>
var s1="java";
var s2="script";
var s3=s1.concat(s2);
document.write(s3);
</script>
output:
javascript
Ex5: toLowerCase() Ex7: slice()
<script>
var s1="JAVASCRIPT";
var s2=s1.toLowerCase();
document.write(s2);
</script>
output:
Javascript
Ex6: toUpperCase() Ex8: split()
<script>
var s1="javascript";
var s2=s1.toUpperCase();
document.write(s2);
</script>
output:
JAVASCRIPT
3.Array:
JavaScript array is an object that represents a collection of similar type of elements.
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
There are 3 ways to construct array in JavaScript

1.By array literal
2.By creating instance of Array directly (using new keyword)
3.By using an Array constructor (using new keyword)
1.JavaScript array literal
The syntax of creating array using array literal is given below:
var arrayname=[value1,value2.....valueN];
Ex:
<script>
var emp=[“sita",“cherry","Raja"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
Output: sita cherry raja
2.JavaScript Array directly (new keyword)
The syntax of creating array directly is given below:
var arrayname=new Array();
3.JavaScript array constructor (new keyword)
Here, you need to create instance of array by passing arguments in constructor so that we
don't have to provide value explicitly.
Ex:
<script>
var emp=new Array(“sita",“cherry",“ram");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
Output: sita cherry ram
4.JavaScript Date Object
The JavaScript date object can be used to get year, month and day. You can display a
timer on the webpage by the help of JavaScript date object
JavaScript Date Methods
The important methods of date object are as follows:
getMonth(): returns the month in 2 digits from 0 to 11.
getDate(): returns the date in 1 or 2 digits from 1 to 31.
getDay(): returns the day of the week in 1 digit from 0 to 6.
getHours(): returns all the elements having the given name value.
getMinutes(): returns all the elements having the given class name.
getSeconds(): returns all the elements having the given class name.
JavaScript Date Example
simple example to print date object. It prints date and time both.
date.html
Current Date and Time: <span id="txt"></span>
<script>
var today=new Date();
document.getElementById('txt').innerHTML=today;
</script>
Output:
Current Date and Time: Sun Apr 16 2017 12:37:28 GMT+0530 (India Standard Time)
5.JavaScript Boolean
• JavaScript Boolean is an object that represents value in two states: true or false. You
can create the JavaScript Boolean object by Boolean() constructor as given below.
Boolean b=new Boolean(value);
JavaScript Boolean Example
<script>
document.write(10<20);//true
document.write(10<5);//false
</script>
6.JavaScript Number Object
• The JavaScript number object . It may be an
integer or floating-point.
• By the help of the Number() constructor, you can create a number object in JavaScript.
For example:
1.var n=new Number(value);
If the value can't be converted to a number, it returns NaN(Not a Number) that can be
checked by isNaN() method.
You can direct assign a number to a variable also.
For example:
var x=102;//integer value
var y=102.7;//floating point value
var z=13e4;//exponent value, output: 130000
var n=new Number(16);//integer value by number object
Output: 102 102.7 130000 16
7.Window Object
The window object represents a window in browser. An object of window is created
automatically by the browser.
Window is the object of browser, it is not the object of javascript. The javascript objects
are string, array, date etc.
Methods of window object
The important methods of window object are as follows:
Method Description
alert() displays the alert box containing message
with ok button.
confirm() displays the confirm dialog box containing
message with ok and cancel button.
prompt() displays a dialog box to get input from the
user.
open() opens the new window.
close() closes the current window.
Example of alert() in javascript
It displays alert dialog box. It has message and ok button.
alertbox.html
function msg(){
alert("Hello Alert Box");
}
</script>
Example of confirm() in javascript
It displays the confirm dialog box. It has message with ok and cancel buttons.
Confirm.html
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
Example of prompt() in javascript
It displays prompt dialog box for input. It has message and text field.
Prompt.html
function msg(){
var v= prompt("Who are you?");
alert("I am "+v);
}
</script>
<input type="button" value="click"
onclick="msg()"/>
Java Script Events(Event Handlers)
• The change in the state of an object is known as an Event.

• In HTML, there are various events that represent that some activity is performed by the
user or by the browser.
• When javascript code is included in HTML, javascript reacts over these events allows
the execution. This process of reacting to events is called Event Handling.
• Events are a part of the Document Object Model (DOM)
• Javascript handles the HTML events via Event Handlers.
some of the examples of HTML events
• When the page loads, it is called an event.
• when the user clicks a button, it is called an event.
• An HTML input field was changed
• Other examples include events like pressing any key, closing a window, resizing a window, etc.
What are event handlers?
• Event handlers are scripts,which programmer using to handle events.
• Event handlers can be used to handle and verify user input, user actions, and browser
actions
• The following are some of the event handlers
onclick
onload
onunload
onsubmit
Onmouseover
Onfocus
Onmouseout
onblur
Some of the HTML Events And Event Handlers
Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse
comes over the element
mouseout onmouseout When the cursor of the mouse
leaves an element
mousemove onmousemove When the mouse movement takes
Window events: place.
load onload When the browser finishes the

loading of the page
unload onunload When the visitor leaves the current

webpage, the browser unloads it
resize onresize When the visitor resizes the window

Form events:

focus onfocus When the user focuses on an
element
submit onsubmit When the user submits the
form
blur onblur When the focus is away from
a form element
change onchange When the user modifies or
changes the value of a form
element
Event Handlers:
1.Onclick()
• The onclick event generally occurs when the user clicks on an element. This event is
associated with the button click.
• It allows the programmer to execute a JavaScript's function when an element gets
clicked. This event can be used for validating a form, warning messages and many
more.
• In HTML, we can use the onclick attribute and assign a JavaScript function
to it. We can also use the JavaScript's addEventListener() method and pass a click event
to it for greater flexibility.
Syntax
<element onclick = "fun()">
Ex:
<button onclick = "fun()">Click me</button>
Ex to illustrate onclick event
In the following javascript Ex we are calling a function myfun() as soon as a button is clicked
click.html
<html>
<head>
function myfun()
document.write("This is on click event");
</script> </head> output: This is onclick event

2.onsubmit():
• The onsubmit is one such event that occurs when we click some submit button.
• The onsubmit event occurs when a form is submitted.
• The JavaScript onsubmit is one of the event-handling function used for performing the
operations of web-based applications.
• It is used to validate the data at the client side before form dis ata submitted to the
server and mainly used HTML form controls
• If suppose the user forgets to submit the required fields in form they can be cancelled
the submission within the onsubmit event.
Syntax
< onsubmit=" ">
Ex to iilustrate onsubmit() event:
onsubmit.html
<html>
<head>
function myfun()
{
Alert("you have entered" +form1.text1.value);
}
</script>
</head>
<body>
<form name="form" onsubmit=myfun();>
3.onmouseover(): When the cursor of the mouse comes over the element
Onmouse.html
<html>
<head>
</head>
<body>
<script language="Javascript" type="text/Javascript">
function mouseoverevent()
{
alert("This is Mouseover Event");
}
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
4.onload:This event occurs when an object has been loaded.
It is most often used with in the body element to execute a script once a web page has
completely loaded.
Ex: onload.html
<html><head>
<script type=”text/javascript”>
function page_load()
{
alert(“ page loaded successfuly”);
}
</script></head>
<body onload=”page_load()”>
<p> to load the page refresh or reopen</p>
</body> </html>
Document Object Model, Form validation.
Document Object Model
Document Object Model(DOM)
• The document object represents the whole html document.
• When html document is loaded in the browser, it becomes a document object.
• It is the root element that represents the html document.
• It has properties and methods. By the help of document object, we can add dynamic
content to our web page.
• The DOM defines a standard for accessing Html and xml documents.
• The Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure,
and style of a document.
• In the DOM, all HTML elements are defined as objects.
Methods of document object
• We can access and change the contents of document by its methods.
• The important methods of document object are as follows:
Method Description
write("string") writes the given string on the doucment.
writeln("string") writes the given string on the doucment with

newline character at the end.
getElementById() returns the element having the given id value.
getElementsByName() returns all the elements having the given name

value.
getElementsByTagName() returns all the elements having the given tag
name.
Ex1: Accessing field value by document object:
doc.html
<html>
<head>
function printvalue()
{
var name=document.form1.name.value;
alert(“Welcome:"+name);
}
</script>
</head><body>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
</body> </html>
Ex2: document.getElementById() method
docid.html
<html>
<head>
function getcube()
{
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
</head>
<body>
<form>
Enter No:<input type="text" id="number" name="number"/>
<br/>
<input type="button" value="cube" onclick="getcube()"/>
</form></body></html>
Ex: document.getElementsByName() method
Docname.html
<html><head>
function totelements()
{
var allgen=document.getElementsByName("gender");
alert("Total Genders:"+allgen.length);
}
</script>
<head><body><form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="totelements()" value="TotalGenders">
</form></body></html>
HTML DOM Properties:
properties: A property is a value that you can get or set (like changing the content
of an HTML element).
These are some typical DOM properties:
• x.innerHTML - the inner text value of x (a HTML element)
• x.nodeName - the name of x
• x.nodeValue - the value of x
• x.parentNode - the parent node of x
• x.childNodes - the child nodes of x

innerHTML
• The innerHTML property can be used to write the dynamic html on the html document.
• It is used mostly in the web pages to generate the dynamic html such as registration
form, comment form, links etc.
The following example changes the content (the innerHTML) of the <p> element with
id="demo":
innerex.html
<html>
<body>
<p id="demo">Inner html</p>
<script>
document.getElementById("demo").innerHTML = "Hello Javascript!";
</script>
</body> output: Hello Javascript
</html>
JS Form Validation:
• It is important to validate the form submitted by the user because it can have
inappropriate values. So, validation is a must to authenticate user.
• JavaScript provides facility to validate the form on the client side so data processing
will be faster than server-side validation.
• Most of the web developers prefer JavaScript form validation.
• Through JavaScript, we can validate name, passwords, email, date, mobile numbers
and more fields.
• Java script is used to validate forms, that means checking the proper information are
entered to the users in the form fields before submission.
Java script is used to validate following
• To check user entered text has the current no of characters
• To check user Enter emaild id valid or not
• To validate user entered fields length valid or not
• To check user entered valid date and format.
• If the selected item from drop down valid or not
JavaScript form validation example
• In this example, we are going to validate the name and password. The name can’t be
empty and password can’t be less than 6 characters long.
• Here, we are validating the form on form submit. The user will not be forwarded to the
next page until given values are correct.
validation.html
<html>
<head>
<script>
function validateform()
{
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}
else if(password.length<6)
{
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()"
>
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
JavaScript email validation
We can validate the email with the help of JavaScript.
There are many criteria that need to be follow to validate the email id such as:
•email id must contain the @ and . character
•There must be at least one character before and after the @.
•There must be at least two characters after . (dot).
email.html Ex to illustrate email validation by using javascript
<html >
<head>
<script>
function validateEmail(emailId)
{
var mailformat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(emailId.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert("Invalid email address.");
document.form1.text1.focus();
return false;
} }
</script>
</head>
<body>
<div>
<h2>JavaScript email validation</h2>
<form name="form1" action="#">
Email: <input type='text' name='email'/></br></br>
<input type="submit" name="submit" value="Submit"
onclick="validateEmail(document.form1.email)"/>
</form>
</div>
</body>
</html>

WT Unit 5

Uploaded by

Copyright:

Available Formats

WT Unit 5

Uploaded by

Document Information

Original Title

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

WT Unit 5

Uploaded by

Copyright:

Available Formats

UNIT - V Client-side Scripting: Introduction to Javascript, Javascript language – declaring

Internet Explorer, Google Chrome, Firefox or any other browser.

There are two types of variables in JavaScript :

if(x == y) // Returns true

2. Non-primitive (reference) data type

JavaScript object can be created with an object literal:

By default, all the statements execute in sequential order (top-to-bottom)

Example of creating object in JavaScript.

There are 3 ways to construct array in JavaScript

Current Date and Time: <span id="txt"></span>

var today=new Date();

• The change in the state of an object is known as an Event.

click onclick When mouse click on an element

Event Performed Event Handler Description

load onload When the browser finishes the

unload onunload When the visitor leaves the current

resize onresize When the visitor resizes the window

Event Performed Event Handler Description

document.write("This is on click event");

</script> </head> output: This is onclick event

write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name

• x.innerHTML - the inner text value of x (a HTML element)

• x.nodeName - the name of x

• x.nodeValue - the value of x

• x.parentNode - the parent node of x

• x.childNodes - the child nodes of x

You might also like