Scribd
Upload
216 views

Java Script

JavaScript is a dynamically typed, interpreted programming language that is used to make web pages interactive. It is most commonly used for client-side scripting to validate forms, display pop-ups and alerts, and dynamically change content. JavaScript code can be placed in HTML documents between <script> tags or in external .js files. It uses variables, operators, functions, and objects to manipulate web page elements and interact with users.

Uploaded by

rajgopalsae
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
216 views

Java Script

JavaScript is a dynamically typed, interpreted programming language that is used to make web pages interactive. It is most commonly used for client-side scripting to validate forms, display pop-ups and alerts, and dynamically change content. JavaScript code can be placed in HTML documents between <script> tags or in external .js files. It uses variables, operators, functions, and objects to manipulate web page elements and interact with users.

Uploaded by

rajgopalsae
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 230

JAVASCRIPT

• HIGH LEVEL
• DYNAMICALLY TYPED
• INTERPETTED
• OBJECT ORIENTED
• FULLY PROGRAMMING LANGUAGE
• JAVASCRIPT IS NOT COMPILED BUT
TRANSLATED.
• THE JAVASCRIPT TRANSLATOR (EMBEDDED IN
BROWSER) IS RESPONSIBLE TO TRANSLATE THE
JAVASCRIPT CODE.
Where we used JavaScript
• JavaScript is used to create interactive websites.
It is mainly used for:
• Client-side validation
• Dynamic drop-down menus
• Displaying data and time
• Displaying popup windows and dialog boxes (like
alert dialog box, confirm dialog box and prompt
dialog box)
• Displaying clocks etc.
JavaScript Overview

• JavaScript is created or developed by Netscape


2.0 in 1995 with a name LiveScript.
• After joined with the Sun Microsystems and
named as JavaScript.
• Just like W3C group of peoples maintained HTML,
CSS here ECMA global committee of peoples
maintained JavaScript.
• JavaScript Core Javascript

Client-Side Javascript

Server-Side Javascript

• Javascript is a mostly using programming language


today rather than C, C++ and JAVA.
Basically JavaScript - Client-side
• 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.
• Here a web page need no longer be static HTML, but
can include programs that interact with the user,
control the browser, and dynamically create HTML
content.
• JavaScript can be used to trap user-initiated events
such as button clicks, link navigation, and other
actions that the user explicitly or implicitly initiates.
Advantages of JavaScript
• 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.
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
multiprocess capabilities.
JavaScript Syntax
• A JavaScript consists of JavaScript statements that are placed
within the <script>... </script> HTML tags in a web page.

• The script tag takes two important attributes:


– language: This attribute specifies what scripting
language you are using. Typically, its value will
be javascript.
– type: This attribute is what is now recommended to
indicate the scripting language in use and its value
should be set to "text/javascript".
First JavaScript Script Example:

Output :
JavaScript Placement in HTML File
• There is a flexibility given to include JavaScript code
anywhere in an HTML document. But there are
following most preferred ways to include JavaScript
in your 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.
JavaScript in <head>...</head> section:
JavaScript in <body>...</body> section:
JavaScript in <body> and <head> sections:
JavaScript in External File :
Whitespace and Line Breaks:
• JavaScript ignores spaces, tabs, and newlines that
appear in JavaScript programs..
• Semicolons are Optional:

• But when formatted in a single line as follows, the


semicolons are required:
Case Sensitivity:
• JavaScript is a case-sensitive language.
• This means that language keywords, variables,
function names, and any other identifiers must
always be typed with a consistent capitalization of
letters.
• So identifiers Time, TIme and TIME will have
different meanings in JavaScript.
• Care should be taken while writing your variable
and function names in JavaScript.
Comments in JavaScript:
• JavaScript supports both C-style and C++-style
comments, Thus:
– Any text between a // and the end of a line is treated as
a comment and is ignored by JavaScript.
– Any text between the characters /* and */ is treated as
a comment. This may span multiple lines.
– JavaScript also recognizes the HTML comment opening
sequence <!--. JavaScript treats this as a single-line
comment, just as it does the // comment.
– The HTML comment closing sequence --> is not
recognized by JavaScript so it should be written as //-->.
Example : Comments
JavaScript Variables
• A JavaScript variable is simply a name of storage
location.
• There are two types of variables in JavaScript :
local variable and global variable.
• 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 first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are
different variables.
• Correct JavaScript variables
var x = 10;
var _value="sonoo";
• Incorrect JavaScript variables
var 123=30;
var *aa=320;
• Example of JavaScript variable
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
• Declaring a variable

• Declaring and initializing a variable :


JavaScript Variable Scope:
JavaScript local variable
• A JavaScript local variable is declared inside block or function.
• It is accessible within the function or block only.
• For example:
<script>
function abc(){
var x=10;//local variable
}
</script>
Or,
<script>
If(10<13){
var y=20;//JavaScript local variable
}
</script>
JavaScript global variable
• A JavaScript global variable is accessible from any function.
• A variable i.e. declared outside the function or declared with window
object is known as global variable.
• For example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
Declaring JavaScript global variable
within function
• To declare JavaScript global variables inside function, you
need to use window object.
• For example:
window.value=90;
For example:
function m(){
window.value=100;//declaring global variable by window object
}
function n(){
alert(window.value);//accessing global variable from other function

}
Internals of global variable in
JavaScript
• When you declare a variable outside the function, it is added
in the window object internally.
• You can access it through window object also.
• For example:
var value=50;
function a(){

alert(window.value);//accessing global variable


}
Javascript Data Types
• JavaScript provides different data types to hold different
types of values. There are two types of data types in
JavaScript.
1.Primitive data type
2.Non-primitive (reference) data type
• 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.
• Her we use var to specify the data type.
• It can hold any type of values such as numbers, strings etc.
For example:
var a=40;//holding number
var b="Rahul";//holding string
• JavaScript allows you to work with five primitive
data types:
JavaScript non-primitive data types
JavaScript Operators
There are following types of operators in JavaScript.

• Arithmetic Operators
• Comparison (Relational) Operators
• Bitwise Operators
• Logical Operators
• Assignment Operators
• Special Operators
JavaScript Arithmetic Operators
• Arithmetic operators are used to perform arithmetic operations on
the operands. The following operators are known as JavaScript
arithmetic operators.
JavaScript Comparison Operators
• The JavaScript comparison operator compares the two operands.
The comparison operators are as follows:
JavaScript Bitwise Operators
JavaScript Logical Operators
JavaScript Assignment Operators
JavaScript Special Operators
JavaScript If-else
• The JavaScript if-else statement is used to
execute the code whether condition is true or false.

There are three forms of if statement in JavaScript.

• If Statement
• If else statement
• if else if statement
if statement:
• The if statement is the fundamental control
statement that allows JavaScript to make decisions
and execute statements conditionally.
• Syntax:

• Example :
if...else statement:
• The if...else statement is the next form of control
statement that allows JavaScript to execute
statements in more controlled way.
• Syntax:

• Example :
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.
• Syntax :
Example :
JavaScript Switch Case
• The JavaScript switch statement is used to execute
one code from multiple expressions.
• Syntax:

• The break statements indicate to the interpreter


the end of that particular case. If they were
omitted, the interpreter would continue executing
each statement in each of the following cases.
Example :
JavaScript Loops
• The JavaScript loops are used to iterate the piece
of code 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
JavaScript For loop
• The JavaScript for loop iterates the elements for the fixed number
of times. It should be used if number of iteration is known.
The syntax of for loop is given below.
for (initialization; condition; increment)
{
code to be executed
}
example
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
JavaScript while loop
• The JavaScript while loop iterates the elements for the infinite number of
times.
• It should be used if number of iteration is not known.
The syntax of while loop is given below.
while (condition)
{
code to be executed
}
example
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
JavaScript do while loop
• The JavaScript do while loop iterates the elements for the infinite
number of times like while loop.
• But, code is executed at least once whether condition is true or false.
The syntax of do while loop is given below.
do{
code to be executed
}while (condition);
example
<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
The break Statement:
• The break statement, which was briefly introduced
with the switch statement, is used to exit a loop
early, breaking out of the enclosing curly braces.
• Example:
The continue Statement:

• The continue statement tells the interpreter to


immediately start the next iteration of the loop and
skip remaining code block.
• When a continue statement is encountered,
program flow will move to the loop check
expression immediately and if condition remain
true then it start next iteration otherwise control
comes out of the loop.
Example :
JavaScript Functions
• JavaScript functions are used to perform operations. We
can call JavaScript function many times to reuse the code.

Advantage of JavaScript function

• There are mainly two advantages of JavaScript functions.


Code reusability:
We can call a function several times so it save coding.
Less coding:
It makes our program compact. We don’t need to write
many lines of code each time to perform a common task.
JavaScript Function Syntax
The syntax of declaring function is given below.

function functionName([arg1, arg2, ...argN]){


//code to be executed
}

• JavaScript Functions can have 0 or more arguments.


JavaScript Function Example
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
JavaScript Function Arguments
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
Function with Return Value
• We can call function that returns a value and use
it in our program.
<script>
function getInfo(){
return "hello javatpoint! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>
Browser Object Model
• The Browser Object Model (BOM) is used to
interact with the browser.
• The default object of browser is window means
you can call all the functions of window by
specifying window or directly.
For example:
window.alert("hello javatpoint");
is same as:
alert("hello javascript");
• You can use a lot of properties (other objects)
defined underneath the window object like
document, history, screen, navigator, location,
innerHeight, innerWidth.
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
JavaScript Screen Object

• The JavaScript screen object holds information


of browser screen. It can be used to display screen
width, height, colorDepth, pixelDepth etc.
• The navigator object is the window property, so it
can be accessed by:
window.screen
Or,
screen
Property of JavaScript Screen
Object
Example of JavaScript Screen Object
<script>
document.writeln("<br/>screen.width: "+screen.width);
document.writeln("<br/>screen.height: "+screen.height);
document.writeln("<br/>screen.availWidth: "+screen.avaiWidth);
document.writeln("<br/>screen.availHeight: "+screen.availHeight);
document.writeln("<br/>screen.colorDepth: "+screen.colorDepth);
document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth);
</script>
Document Object Model
• 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.
As mentioned earlier, it is the object of window. So
window.document
• Is same as
document
Properties of document object
Methods of document object
Accessing field value by document
object
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>

<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
Javascript -
document.getElementById() method
• The document.getElementById() method returns the element of
specified id.

<script type="text/javascript">
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
Javascript - document.getElementsByName()
method
• The document.getElementsByName() method returns all the element of
specified name.

<script type="text/javascript">
function totalelements()
{
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+allgenders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="totalelements()" value="Total Genders">
</form>
document.getElementsByTagName()
method
• The document.getElementsByTagName() method returns all the
element of specified tag name.

<script type="text/javascript">
function countpara()
{
var totalpara=document.getElementsByTagName("p");
alert("total p tags are: "+totalpara.length);
}
</script>
<p>This is a pragraph</p>
<p>Here we are going to count total number of paragraphs by getEl
ementByTagName() method.</p>
<p>Let's see the simple example</p>
<button onclick="countpara()">count paragraph</button>
Javascript - 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.
<script type="text/javascript" >
function showcommentform() {
var data="Name:<input type='text' name='name'><br>Comment:<br>
<textarea rows='5' cols='80'></textarea>
<br><input type='submit' value='Post Comment'>";

document.getElementById('mylocation').innerHTML=data;
}
</script>

<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="mylocation"></div>
</form>
Javascript - innerText
• The innerText property can be used to write the
dynamic text on the html document. Here, text
will not be interpreted as html text but a normal
text.
• It is used mostly in the web pages to generate the
dynamic content such as writing the validation
message, password strength etc.
<script type="text/javascript" >
function validate() {
var msg;
if(document.myForm.userPass.value.length>5){
msg="good";
}
else{
msg="poor";
}
document.getElementById('mylocation').innerText=msg;
}

</script>
<form name="myForm">
<input type="password" value="" name="userPass"
onkeyup="val idate()">
Strength:<span id="mylocation">no strength</span>
</form>
JavaScript Form Validation
<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>
JavaScript Retype Password Validation
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;

if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>

<form name="f1" action="register.jsp" onsubmit="return matchpass()">


Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
JavaScript Number Validation
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter
Numeric value only";
return false;
}
else{
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span>
<br/>
<input type="submit" value="submit">
</form>
JavaScript validation with image
<script>
function validate(){
var name=document.f1.name.value;
var password=document.f1.password.value;
var status=false;

if(name.length<1){
document.getElementById("nameloc").innerHTML=
" <img src='unchecked.gif'/> Please enter your name";
status=false;
}
else{
document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>";
status=true;
}
if(password.length<6)
{
document.getElementById("passwordloc").innerHTML=
" <img src='unchecked.gif'/> Password must be at least 6 char long";
status=false;
}
else{
document.getElementById("passwordloc").innerHTML=" <img src='checked.gif'/>";
}
return status;
}
</script>

<form name="f1" action="#" onsubmit="return validate()">


<table>
<tr><td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td></tr>
<tr><td>Enter Password:</td><td><input type="password" name="password"/>

<span id="passwordloc"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="register"/></td></tr>
</table>
</form>
JavaScript email validation
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){

alert("Please enter a valid e-


mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>

<input type="submit" value="register">


</form>
EVENTS
• JavaScript's interaction with HTML is handled
through events that occur when the user or the
browser manipulates a page.
Click Events
onclick - when a button is clicked.
ondblclick – when button/ text double clicked.
onclick Event Type

• This is the most frequently used event type which occurs when a user clicks the left button of his mouse. You can put your
validation, warning etc., against this event type.
• Example
<html>
<head>
<script type="text/javascript">
<!–
function sayHello() {
alert("Hello World") ;
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>
INPUT EVENTS
onblur : it triggers only when a user leaves input field.

<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("name");
x.value = x.value.toLowerCase();
}
</script>
</head>
<body>

Enter your name: <input type="text" id="name" onblur=“myFunction()">

</body>
</html>
onchange : it triggers only when a user changes the content of input field.
<html>
<head>
<script>
function nameFunction() {
var x = document.getElementById("name");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

Enter your name:


<input type="text" id="name onchange="nameFunction()">

</body>
</html>
onchange : it triggers only when a user selects dropdown values.
<html>
<head>
<script>
function preferedBrowser()
{
var prefer = document.forms[0].browsers.value;
alert("You prefer browsing internet with " + prefer);
}
</script>
</head>

<body>

<form>
Choose which browser you prefer:
<select id="browsers" onchange="preferedBrowser()">
<option value="Chrome">Chrome</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
</select>
</form>

</body>
</html>
Onfocus : inputfield get focus when user clicks input field.

<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>

Enter your name:


<input type="text" onfocus="myFunction(this)" />

</body>
</html>
Onsubmit : when the user clicks submit button.

<html>
<head>
<script>
function confirmInput() {
fname = document.forms[0].name.value;
alert("Hello " + fname + "! You will now be redirected to www.google.com");
}
</script>
</head>

<body>
<form onsubmit="confirmInput()" action="http://www.google.com/">
Enter your name: <input id="name" type="text" size="20">
<input type="submit">
</form>
</body>

</html>
Onreset : when the user clicks reset button.

<html>
<head>
<script>
function message() {
alert("This alert box was triggered by the onreset event handler");
}
</script>
</head>
<body>

<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>

</body>
</html>
Onkeydown/onkeypress : it trriggers only when user pressing or holding
key.

<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>

<p>A function is triggered when the user is pressing a key in the input field.</p>

<input type="text" onkeypress="myFunction()">

</body>
</html>
Onkeyup : it triggers when user releases a key.

<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

<p>A function is triggered when the user releases a key in the input field. The
function transforms the character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">

</body>
</html>
Onkeyup and onkeydown both
<html>
<head>
<script>
function color(color) {
document.forms[0].myInput.style.background = color;
}
</script>
</head>

<body>

<form>
Write a message:<br>
<input type="text" onkeydown="color('yellow')“ onkeyup="color('green')"
name="myInput">

</form>

</body>
</html>
Mouse Events
Onmouseover/onmouseout : it triggers when mouse
passes over an element.
<html>
<body>

<h1 onmouseover="style.color='red' "


onmouseout="style.color='black' ">Mouse over this text</h1>

</body>
</html>
Onmousedown/onmouseup : it triggers when pressing a mouse button.

<html>
<head>
<script>
function myFunction(elmnt, clr) {
elmnt.style.color = clr;
}
</script>
</head>
<body>

<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">

Click the text to change the color. A function, with parameters, is triggered when the mouse
button is pressed down, and again, with other parameters, when the mouse button is
released.

</p>

</body>
</html>
Load Events
Onload: it triggers when page loaded.

<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>
<html>
<head>
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
</head>
<body>

<img src="a.jpg" onload="loadImage()" width="100px"


height="132px">

</body>
</html>
Onerror : error occurs when image loads, liking of pages etc
<html>
<head>
<script>
function imgError() {
alert('The image could not be loaded.');
}
</script>
</head>
<body>

<img src="image.gif" onerror="imgError()">


<p>A function is triggered if an error occurs when loading the image. The function
shows an alert box with a text.
In this example we refer to an image that does not exist, therefore the onerror event
occurs.</p>

</body>
</html>
Onresize : error occurs when browser window resize.

<html>
<head>
<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>

<body onresize="myFunction()">

<p>Try to resize the browser window.</p>

<p id="demo"> </p>

</body>

</html>
Window screenX and screenY Properties
<html>
<head>
<script>
function myFunction() {
var myWindow = window.open("", "myWin", "left=700, top=350, width=200,
height=100");
myWindow.document.write("<p>This is 'myWin'");
myWindow.document.write("<br>ScreenX: " + myWindow.screenX);
myWindow.document.write("<br>ScreenY: " + myWindow.screenY + "</p>");
}
</script>
</head>
<body>

<button onclick="myFunction()">Open "myWin"</button>

</body>
</html>
Window setTimeout() Method
The setTimeout() method calls a function or evaluates an
expression after a specified number of milliseconds.
• 1000 ms = 1 second.
• The function is only executed once. If you need to repeat
execution, use the setInterval() method.
• Use the clearTimeout() method to prevent the function
from running.
Syntax
setTimeout(function,milliseconds,param1,param2,...)
<html>
<body>

<button onclick="timedText()">Display timed text</button>


<input type="text" id="txt">

<script>
function timedText() {
var x = document.getElementById("txt");
setTimeout(function(){ x.value="2 seconds" }, 2000);
setTimeout(function(){ x.value="4 seconds" }, 4000);
setTimeout(function(){ x.value="6 seconds" }, 6000);
}
</script>

</body>
</html>
<html>
<body>

<button onclick="openWin()">Open "myWindow"</button>

<script>
function openWin() {

var myWindow = window.open("", "myWindow", "width=200,


height=100");

myWindow.document.write("<p>This is 'myWindow'</p>");

setTimeout(function(){ myWindow.close() }, 3000);


}

</script>

</body>
</html>
Auto Refresh

<html>
<head>
<script type="text/JavaScript">
<!--
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
// -->
</script>
</head>
<body onload="JavaScript:AutoRefresh(4000);">
<p>This page will refresh every 4 seconds.</p>
</body>
</html>
CONFORMATION BOX
<html>
<head>
<script type="text/javascript">
<!--
function Confirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
return true;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="Confirmation();" />
</form>
</body>
</html>
PROMPT DIALOG BOX
<html>
<head>
<script type="text/javascript">
<!--
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body>
</html>
VOID
<html>
<head>
<script type="text/javascript">
<!--
function getValue(){
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</body>
</html>
PAGE PRINTING
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>
Page Re-direct
<html>
<head>

<script type="text/javascript">
<!--
function Redirect() {
window.location="http://www.google.com";
}
//-->
</script>

</head>

<body>
<p>Click the following button, you will be redirected to home page.</p>

<form>
<input type="button" value="Redirect Me" onclick="Redirect();" />
</form>

</body>
</html>
<html>
<head>

<script type="text/javascript">
<!--
function Redirect() {
window.location="http://www.google.com";
}

document.write("You will be redirected to main page in 10 sec.");


setTimeout('Redirect()', 10000);
//-->
</script>

</head>

<body>
</body>
</html>
JavaScript Objects
• A javaScript object is an entity having state
and behavior (properties and method).
• For example: car, pen, bike, chair, glass,
keyboard, monitor 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.

• By object literal
• By creating instance of Object directly (using
new keyword)
• By using an object constructor (using new
keyword)
JavaScript Object by object literal
Syntax

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:"Shyam Kumar",salary:40000}

document.write(emp.id+" "+emp.name+" "+emp.salary);


</script>
By creating instance of Object
Syntax

var objectname=new Object();

• 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;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
By using an Object constructor
• The this keyword refers to the current object.
• The 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>
Defining method in JavaScript Object
• We can define method in JavaScript object.

• But before defining method, we need to add property in the function with same name as method.

• The example of defining method in object is given below.

<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;

this.changeSalary=changeSalary;

function changeSalary(otherSalary){
this.salary=otherSalary;
}
}

e=new emp(103,"Sonoo Jaiswal",30000);


document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);
document.write("<br>"+e.id+" "+e.name+" "+e.salary);
</script>
JavaScript Array
• JavaScript array is an object that represents a
collection of similar type of elements.

There are 3 ways to construct array in JavaScript

• By array literal
• By creating instance of Array directly (using new
keyword)
• By using an Array constructor (using new keyword)
JavaScript array literal
Syntax
var arrayname=[value1,value2.....valueN];

• values are contained inside [ ] and separated by , (comma).

Example of creating and using array in JavaScript.

<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
JavaScript Array directly (new keyword)
Syntax
var arrayname=new Array();
• new keyword is used to create instance of array.
Example of creating array directly.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";

for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
JavaScript array constructor (new
keyword)

The example of creating object by array constructor is given


below.

<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
JavaScript String
• The JavaScript string is an object that represents
a sequence of characters.

There are 2 ways to create string in JavaScript

• By string literal
• By string object (using new keyword)
By string literal
• The string literal is created using double quotes.
• The syntax of creating string using string literal is
given below:
var stringname="string value";
• Simple example of creating string literal.
<script>
var str="This is string literal";
document.write(str);
</script>
By string object (using new keyword)
Syntax
var stringname=new String("string literal");

• new keyword is used to create instance of string.


Example of creating string in JavaScript by new
keyword.
<script>
var stringname=new String("hello javascript string");
document.write(stringname);
</script>
JavaScript String Methods
List of JavaScript string methods with examples.

• charAt(index)
• concat(str)
• indexOf(str)
• lastIndexOf(str)
• toLowerCase()
• toUpperCase()
• slice(beginIndex, endIndex)
• trim()
JavaScript String charAt(index) Method

• The JavaScript String charAt() method returns


the character at the given index.
<script>
var str="javascript";
document.write(str.charAt(2));
</script>
JavaScript String concat(str) Method

The JavaScript String concat(str) method


concatenates or joins two strings.
<script>
var s1="javascript ";
var s2="concat example";
var s3=s1.concat(s2);
document.write(s3);
</script>
indexOf(str)
• The JavaScript String indexOf(str) method
returns the index position of the given string.
<script>
var s1="javascript from javatpoint indexof";

var n=s1.indexOf("from");
document.write(n);
</script>
JavaScript String lastIndexOf(str) Method

The JavaScript String lastIndexOf(str) method


returns the last index position of the given string.
<script>
var s1="javascript from javatpoint indexof";
var n=s1.lastIndexOf("java");
document.write(n);
</script>
JavaScript String toLowerCase()
Method
The JavaScript String toLowerCase() method returns
the given string in lowercase letters.
<script>
var s1="JavaScript toLowerCase Example";
var s2=s1.toLowerCase();
document.write(s2);
</script>
JavaScript String toUpperCase()
Method
The JavaScript String toUpperCase() method
returns the given string in uppercase letters.
<script>
var s1="JavaScript toUpperCase Example";
var s2=s1.toUpperCase();
document.write(s2);
</script>
JavaScript String slice(beginIndex,
endIndex) Method
• The JavaScript String slice(beginIndex, endIndex)
method returns the parts of string from given
beginIndex to endIndex.
• In slice() method, beginIndex is inclusive and
endIndex is exclusive.
<script>
var s1="abcdefgh";
var s2=s1.slice(2,5);
document.write(s2);
</script>
JavaScript String trim() Method

• The JavaScript String trim() method removes


leading and trailing whitespaces from the
string.
<script>
var s1=" javascript trim ";
var s2=s1.trim();
document.write(s2);
</script>
JavaScript Date Object
• The JavaScript date object can be used to get year, month
and day.
• We can display a timer on the webpage by the help of
JavaScript date object.
• We can use different Date constructors to create date object.
It provides methods to get and set day, month, year, hour,
minute and seconds.
4 different types of Date constructor to create date object.
• Date()
• Date(milliseconds)
• Date(dateString)
• Date(year, month, day, hours, minutes, seconds, milliseconds)
JavaScript Date Methods
JavaScript Date Example
Simple example to print date object.
It prints date and time both.
Current Date and Time: <span id="txt"></span>
<script>
var today=new Date();
document.getElementById('txt').innerHTML=today;
</script>
JavaScript Current Time Example
Simple example to print current time of system.

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


<script>
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
</script>
JavaScript Digital Clock Example
Current Time: <span id="txt"></span>
<script>
window.onload=function(){getTime();}
function getTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();

// add a zero in front of numbers<10

m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
setTimeout(function(){getTime()},1000);
}

//setInterval("getTime()",1000);//another way

function checkTime(i){
if (i<10){
i="0" + i;
}
return i;
}
</script>
JavaScript Math Object
• The JavaScript math object provides several
constants and methods to perform mathematical
operation.
• Unlike date object, it doesn't have constructors.
Math.sqrt(n)
• The JavaScript math.sqrt(n) method returns the
square root of the given number.
Example
Square Root of 17 is: <span id="p1"></span>
<script>

document.getElementById('p1').innerHTML=Math.sqrt(17);

</script>
output:
• Square Root of 17 is: 4.123105625617661
Math.random()
• The JavaScript math.random() method returns
the random number between 0 to 1.
Example
Random Number is: <span id="p2"></span>
<script>

document.getElementById('p2').innerHTML=Math.random();

</script>
Output:
• Random Number is: 0.5215753003356656
Math.pow(m,n)
• The JavaScript math.pow(m,n) method returns
the m to the power of n that is mn.
Example
3 to the power of 4 is: <span id="p3"></span>
<script>
document.getElementById('p3').innerHTML=Math.pow(3,4);
</script>
Output:
3 to the power of 4 is: 81
Math.floor(n)
• The JavaScript math.floor(n) method returns the lowest
integer for the given number.
• For example 3 for 3.7, 5 for 5.9 etc.
Example
Floor of 4.6 is: <span id="p4"></span>
<script>

document.getElementById('p4').innerHTML=Math.floor(4.6);

</script>
Output:
• Floor of 4.6 is: 4
Math.ceil(n)
• The JavaScript math.ceil(n) method returns the
largest integer for the given number.
• For example 4 for 3.7, 6 for 5.9 etc.
Example
Ceil of 4.6 is: <span id="a"></span>
<script>
document.getElementById("a").innerHTML=Math.ceil(4.6);
</script>
Output:
• Ceil of 4.6 is: 5
Math.round(n)
• The JavaScript math.round(n) method returns the rounded integer
nearest for the given number. If fractional part is equal or greater
than 0.5, it goes to upper value 1 otherwise lower value 0.
• For example 4 for 3.7, 3 for 3.3, 6 for 5.9 etc.
Example
Round of 4.3 is: <span id="p6"></span><br>
Round of 4.7 is: <span id="p7"></span>
<script>
document.getElementById('p6').innerHTML=Math.round(4.3);
document.getElementById('p7').innerHTML=Math.round(4.7);
</script>
Output:
• Round of 4.3 is: 4
Round of 4.7 is: 5
Math.abs(n)
• The JavaScript math.abs(n) method returns the
absolute value for the given number.
• For example 4 for -4, 6.6 for -6.6 etc.
Example
Absolute value of -4 is: <span id="p8"></span>
<script>
document.getElementById('p8').innerHTML=Math.abs(-4);
</script>
Output:
• Absolute value of -4 is: 4
Math Methods
JavaScript Number Object
• The JavaScript number object enables you to represent a numeric
value. It may be integer or floating-point.
• JavaScript number object follows IEEE standard to represent the
floating-point numbers.
• By the help of Number() constructor, you can create number object in
JavaScript. For example:
var n=new Number(value);
• If value can't be converted to number, it returns NaN(Not a Number) that
can be checked by isNaN() method.

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
JavaScript Number Constants
JavaScript Number Methods
JavaScript Boolean
• JavaScript Boolean is an object that represents value in
two states: true or false.
• We can create the JavaScript Boolean object by Boolean()
constructor as given below.
Boolean b=new Boolean(value);
• The default value of JavaScript Boolean object is false.
JavaScript Boolean Example
<script>
document.write(10<20);//true
document.write(10<5);//false
</script>
JavaScript Boolean Properties

JavaScript Boolean Methods


Pattern Matching by Using Regular Expressions

Regular expressions are patterns used to match character combinations in strings.


OR
A regular expression is a sequence of characters that forms a search pattern

• In JavaScript, regular expressions are also objects.


• Regular expressions can be used to perform all types of text search and text
replace operations
Pattern Matching by Using Regular Expressions
Pattern Matching by Using Regular Expressions

Output:
'bits' appears in
position 3
Character and Character-Class Patterns

• The normal characters are those that are not metacharacters.


• Metacharacters are characters that have special meanings in some contexts in patterns.
➢ Metacharacters can themselves be placed in a pattern by being immediately preceded by a
backslash.

\|()[]{}^$*+?.
Character and Character-Class Patterns

• A period matches any character except newline.

the following pattern /snow./


➢ matches "snowy", "snowe", and "snowd", among others:

the pattern /3\.4/ matches == > 3.4


The pattern /3.4/ matches == > 3.4 and 374, among others.

➢ [abc] character class matches == > • 'a', 'b', or 'c’


➢ [a-h] character class matches == > • any lowercase letter from 'a' to 'h’
➢ [^aeiou] character class matches == • any character except the letters 'a', 'e',
'i', 'o', and 'u
Character and Character-Class Patterns

The following examples show patterns that use predefined character classes:
Character and Character-Class Patterns

• To repeat a pattern, a numeric quantifier, delimited by braces, is attached

/xy{4}z/ matches == > xyyyyz


asterisk (*) matches == > means zero or more repetitions
plus (+) matches == > One or more repetitions.
question mark (?) matches == > one or none

➢ /x*y+z?/ pattern matches == > • strings that begin with any number of x’s
(including zero), followed by one or
more y’s, possibly followed by z:
Character and Character-Class Patterns

➢ /\d+\.\d*/ pattern matches == > • string of one or more digits followed by a


decimal point and possibly more digits

➢ /[A-Za-z]\w*/ pattern matches == > • a letter, followed by zero or more letters,


digits, or underscores

• \b (boundary), which matches the boundary position between a word character (\w)
and a nonword character (\W), in either order.

➢ /\bis\b/ pattern matches == > • Matches "A tulip is a flower"


• but not "A frog isn't":
Anchors
• it is useful to be able to specify that a pattern must match at a particular position in a
string
• A pattern is tied to a position at one of the ends of a string with an anchor.
• It can be specified to match only at the beginning of the string by preceding it with a
circumflex (^) anchor.
• A pattern can be specified to match at the end of a string only by following the pattern
with a dollar sign anchor.

➢ /gold$/ pattern matches == > • "I like gold" but


• does not match "golden":

➢ /^pearl/ pattern matches == > • matches "pearls are pretty"


• but does not match “Those pearls are pretty":
Anchors
• Anchor characters are like boundary-named patterns:
• They do not match specific characters in the string; rather, they match positions
before, between, or after characters

➢ /$gold/ pattern matches == > • “$gold"

➢ /pearl^/ pattern matches == > • matches "pearl^ "


Pattern Modifiers
• The replace method is used to replace substrings of the String object that match the
given pattern.
• The replace method takes two parameters: the pattern and the replacement string.
• The g modifier can be attached to the pattern if the replacement is to be global in the
string, in which case the replacement is done for every match in the string.

➢ /Apple/i pattern matches == > • Perform case-insensitive matching


• i.e. ‘APPLE’, ‘apple’, ‘APPle’,

➢ /pearl/g pattern matches == > • Perform a global match (find all matches)
Pattern Modifiers
• Modifiers can be attached to patterns to change how they are used,
• The modifiers are specified as letters just after the right delimiter of the pattern.

➢ /Apple/i pattern matches == > • Perform case-insensitive matching


• i.e. ‘APPLE’, ‘apple’, ‘APPle’,

➢ /pearl/g pattern matches == > • Perform a global match (find all matches)
Other Pattern-Matching Methods of String

• The replace method is used to replace substrings of the String object that match the
given pattern.
• The replace method takes two parameters: the pattern and the replacement string.
• The g modifier can be attached to the pattern if the replacement is to be global in the
string, in which case the replacement is done for every match in the string.

• The split method of String splits its object string into substrings on the basis of a given
string or pattern.
• The substrings are returned in an array.
Other Pattern-Matching Methods of String

Write a function in javascript : that Uses pattern matching to check a given string that is
supposed to contain a phone number. In a form

777-4567
777-111-1234
Document Object Model :
• DOM is an Application Programming Interface (API) that defines an
interface between HTML documents and application programs.
• Documents in the DOM have a treelike structure, but there can be more
than one tree in a document (although that is unusual).
• Because the DOM is an abstract interface, it does not dictate that
documents be implemented as trees or collections of trees.
• JavaScript binding to the DOM, the elements of a document are
objects, with both data and operations.
• The data are called properties, and the operations are, naturally,
called methods.
For example, the following :
• HTML element would be represented as an object with two
properties, type and name, with the values "text" and "address",
respectively:
<input type = "text" name = "address">
• In most cases, the property names in JavaScript are the same as their
corresponding attribute names in HTML.
Events and Event Handling:
• Event: a notification that something specific occurred --
by browser or user.
• Event handler: a script implicitly executed in response to
event occurrence.
• Event-driven: code executed resulting to user or browser
action.
• Registration: the process of connecting event handler to
event.
• Events are JavaScript objects --> names are case sensitive, all use
lowercase only.
(Method write should never be used in event handler. May cause
document to be written over.)
• JavaScript events associated with HTML tag attributes which can be

used to connect to event-handlers

28
• JavaScript's interaction with HTML is handled through events that occur
when the user or the browser manipulates a page.

✓ When the page loads, it is called an event.


✓ When the user clicks a button, that click too is an event,
✓ Other examples include events like pressing any key, closing a window,
resizing a window, etc.
• Developers can use these events to execute JavaScript coded responses,
✓ which cause buttons to close windows,
✓ messages to be displayed to users,
✓ data to be validated, and virtually any other type of response imaginable.

• Events are a part of the Document Object Model DOM Level 3 29


• HTML element contains a set of events which can trigger JavaScript
Code.

Events, Attributes, and Tags:


• HTML4 defined a collection of events that browsers implement and with
which JavaScript can deal.
• These events are associated with HTML tag attributes, can be used to
connect the events to handlers.
*
example
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text
to upper case.</p>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
REGISTERING AN EVENT HANDLER(three ways)
• There are different ways to register an event handler in the DOM 0

First Way :
• event model. One of these is by assigning the event handler script to an event tag
attribute, as in the following example:

<input type = "button" id = "myButton“ onclick = "alert('You clicked the button!');" />

• Consider the following example of a button element:


<input type = "button" id = "myButton“ onclick ="myButtonHandler();" />
The handler consists of more than a single statement. In these cases, often a function is
used, and the literal string value of the attribute is the call to the function.
• Second way :of registering an Event Handler

• An event handler function could also be registered by assigning its name to the
associated event property on the button object, as in the following example:
• document.getElementById("myButton").onclick =myButtonHandler;
• This statement must follow both the handler function and the form element so
that JavaScript has seen both before assigning the property.
• The name of the handler function is assigned to the property—it is neither a
string nor a call to the function.
• Third way is via addevent listener
Third way is ADDEVENTLISTENER

38
Event handler
example [WE CAN REGISTER AN EVENT BY USING ON[EVENT] -EG: ONCLICK OR ADDEVENTLISTENER

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id="myBtn" onclick=”displayDate();” >Try it</button>
<input type=“radio” id =“rdclk” name=“dept” value=“1” onclick=“deptchoice();”> CSE
<p id="demo"></p>
<script>
//document.getElementById("myBtn").onclick=displayDate;
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
Event handler

• The write method of document should never be used in an


event handler.
– a document is displayed as its markup is parsed by the browser.
– Events usually occur after the whole document is displayed.
– If write appears in an event handler, the content produced by it might
be placed over the top of the currently displayed document.
Example :Handling Events from Text Box and
Password Elements:
• Text boxes and passwords can create four different events:
blur, focus, change and select.
For ex:
• Suppose JavaScript is used to compute the total cost of an order and display it to the
customer before the order is submitted to the server for processing. An unscrupulous user
may be tempted to change the total cost before submission, thinking that somehow an
altered (and lower) price would not be noticed at the server end.
• Such a change to a text box can be prevented by an event handler that blurs the text box
every time the user attempts to put it in focus.
• Blur can be forced on an element with the blur method.
• The HTMLElement.blur() method removes keyboard focus from the current element.
(Eg,this.blur())
function DeptChoice (dept) {
// Produce an alert message about the chosen airplane
switch (dept) {
case 1:
alert(" Chosen : AE ");
break;
case 2:
alert(" Chosen : CSE ");
break;
case 3:
alert(" Chosen : ECE ");
break;
case 4:
alert(“Chosen : ME");
break;
default:
alert("Error in JavaScript function ");
break;
}
42
}
example on onfocus and onclick

43
<!DOCTYPE html>
<html lang = "en">
<head>
<title> nochange.html </title>
<meta charset = "utf-8" />
<script type = "text/javascript" src = "nochange.js" >
</script>
<style type = "text/css"> td, th, table {border: thin solid black}
</style>
</head>

<body>
<form action = "">
<h3> Coffee Order Form </h3>
<!-- A bordered table for item orders -->
<table>
<!-- First, the column headings --> <tr>
<tr> <th> Colombian (1 lb.) </th>
<th> Product Name </th> <td> $4.59 </td>
<th> Price </th> <td> <input type = "text" id = "colombian“ size = "2"
<th> Quantity </th> /></td>
</tr> </tr>
<!-- Now, the table data entries --> </table>
<tr> <!-- Button for precomputation of the total cost -->
<th> French Vanilla (1 lb.) </th>
<td> $3.49 </td>
<td> <input type = "text" id = "french“ size ="2" /> </td>
</tr>
<tr>
<th> Hazlenut Cream (1 lb.) </th>
<td> $3.95 </td>
<td> <input type = "text" id = "hazlenut“ size = "2" /> </td>
</tr>
<p>
<input type = "button" value = "Total Cost“ onclick =
"computeCost();" />
<input type = "text" size = "5" id = "cost“ onfocus = "this.blur();"
/>
</p>
<!-- The submit and reset buttons -->
<p>
<input type = "submit" value = "Submit Order" />
<input type = "reset" value = "Clear Order Form" />
</p>
</form>
</body>
nochange.js:
function computeCost() {
var french = document.getElementById("french").value;
var hazlenut =
document.getElementById("hazlenut").value;
var colombian =
document.getElementById("colombian").value;
document.getElementById("cost").value =
totalCost = french * 3.49 + hazlenut * 3.95
+colombian * 4.59;
}
Example on password validation
<!DOCTYPE html> <form id = "myForm" action = "" >
<!-- pswd_chk.html <p>
A document for pswd_chk.ps <label> Your password
Creates two text boxes for passwords <input type = "password" id = "initial“ size = "10"
--> />
</label>
<html lang = "en">
<head> <br /><br />
<title> Illustrate password checking> <label> Verify password
</title>
<input type = "password" id = "second“ size =
<meta charset = "utf-8" />
<script type = "text/javascript" src "10" />
= "pswd_chk.js" > </label>
</script>
</head> <br /><br />
<input type = "reset" name = "reset" />
<body> <input type = "submit" name = "submit" />
<h3> Password Input </h3> </p>
Validating Form Input

// pswd_chk.js
// An example of input password checking using the submit event
// The event handler function for password checking
function chkPasswords() {
var init = document.getElementById("initial");
var sec = document.getElementById("second");
if (init.value == "") {
alert("You did not enter a password \n" + "Please enter one now");
return false;
}
if (init.value != sec.value) {
alert("The two passwords you entered are not the same \n" +"Please re-enter both
now");
return false;
} else
pswd_chkr.js
// Register the event handlers for pswd_chk.html

document.getElementById("second").onblur =chkPasswords;
document.getElementById("myForm").onsubmit =
chkPasswords;
• This figure shows a browser display of
pswd_chk.html after the two password
elements have been input but before Submit
Query has been clicked.

• Figure 2 shows a browser


display that results from
pressing the SubmitQuery
button on pswd_chk.html
after different passwords
have been entered
onchange Event Type
<!DOCTYPE html>
<!-- validator.html
A document for validator.js Creates text boxes for a name and
a phone number-->
<html lang = "en">
<head>
<title> Illustrate form input validation> </title>
<meta charset = "utf-8" />
<script type = "text/javascript" src = "validator.js" >
</script>
</head>
<body>
<h3> Customer Information </h3>
<form action = "">
<p>
<label>
<input type = "text" id = "custName" />Name (last name, first name,
middle initial)
</label>
onchange Event Type

<br /><br />


<label>
<input type = "text" id = "phone" /> Phone number (ddd-ddd-dddd)
</label>
<br /><br />
<input type = "reset" id = "reset" />
<input type = "submit" id = "submit" />
</p>
</form>
<script type = "text/javascript" src = "validatorr.js">
</script>
</body>
</html>
onchange Event Type
// validator.js
// An example of input validation using the change and submit events
// The event handler function for the name text box
function chkName() {
var myName = document.getElementById("custName");
// Test the format of the input name
// Allow the spaces after the commas to be optional
// Allow the period after the initial to be optional
var pos = myName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-E]\.?$/);
if (pos != 0) {
alert("The name you entered (" + myName.value + ") is not in the
correct form. \n" + "The correct form is:" + "last-name, first-name,
middle-initial \n" + "Please go back and fix your name");
return false;
} else
// validatorr.js
// Register the event handlers for validator.html
document.getElementById("custName").onchange = chkName;
document.getElementById("phone").onchange = chkPhone;
onclick Event Type
• This is the most frequently used event type which occurs when a user clicks the
left button of his mouse.

• One attribute can appear in several different tags:


e.g. onClick can be in <a> and <input>
• HTML element get focus:
1. When user puts mouse cursor over it and presses the left button
2. When user tabs to the element
3. By executing the focus method
4. Element get blurred when another element gets focus
• Event handlers can be specified two ways
1. Assigning the event handler script to an event tag attribute
onClick = "alert('Mouse click!');"

onClick = "myHandler();
1. Assigning them to properties of JavaScript object associated with HTML elements.
• The load event: the completion of loading of a document by browser
• The onload attribute of <body> used to specify event handler:
• The unload event: used to clean up things before a document is unloaded.

56
Example:onclick
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function sayHello(){}
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>
57
onSubmit Event Type:

• onSubmit is an event that occurs when you try to


submit a form. You can put your form validation
against this event type.
• The following Next slide shows how to use onsubmit.
Here we are calling a validate function before
submitting a form data to the webserver. If validate
function returns true, the form will be submitted, 58
onsubmit
<script type="text/javascript">
onsubmit

function validate(){
if ((document.example2.naming.value=="") ||
(document.example2.feed.value=="")){
alert("You must fill in all of the required fields!")
return false
} <form name="example2" onsubmit="return validate()">
else
return true <input type="text" size="20" name="naming">
} <strong>Feedback please: (*required)</strong>
<textarea name="feed" rows="3" cols="25"></textarea>
</script> <strong>Your home address (*NOT required)</strong>
<input type="text" size="35" name="address">

<input type="submit" name="B1" value="Submit">


</form>
Some very important things here:

● document.example2.naming.value=="".What is the quotation in red? That is used to indicate an


empty value- something that contains nothing. It is important that you distinguish between "" and
" " The later means "1 empty space", as opposed to "empty value". The later is a char- namely, a
space.
● What is "return true", "return false"? This is what's used to actually allow, or stop the form
from submitting, respectively. This is how JavaScript controls the submitting of a form. By default,
a form will return true. (Submit the form). This is a important point- for example, by using the
above knowledge, you can apply it to also stop a link from completing upon clicking. I'll show you
an example:
<a href="http://www.cssdrive.com" onclick="return false">Click here, it won't
work!</a>
Click here, it won't work!
By returning false, we prohibit the action from completing!
● Now, a confusing point may be-onsubmit="return validate()". Why return validate()?
Wouldn't that be like a double return? No. Function validate only returns "true/false". You need
"return true/fast" to actually manipulate whether a form submits or not. That's why we have to
return validate(), as opposed to just validate().
<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function validate()

</script>

</head>

<body>

<form method="POST" action="target.html" onsubmit="return validate()">

.......

<input type="submit" value="Submit" />

</form>

</body>

</html>
onmouseover and
onmouseout :
• These two event types will help you create nice effects with images or
even with text as well.
• The onmouseover event triggers when you bring your
mouse over any element and the onmouseout triggers
when you move your mouse out from that element.
• Try the following example.

63
<html>

<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2 id="l1"> This is inside the division </h2>
</div>

<script >
function over()
{
document.getElementById("l1").innerHTML="Welcome ABC";
}
function out()
{
document.getElementById("l1").innerHTML="";
}
</script>
</body>
</html>

64
Focus & Blur Event Example:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<h1>Hello How Are You...?</h1>
<form>
Click This Button<br/>
<input type="button" value="Click Me!"
onclick="myFun()"/><br/>
<input type="text" id="username" onfocus="this.blur()"/><br/>
</form> [fig.1 Before Click On That Button]
<script type="text/javascript">
function myFun()
{
document.getElementById("username").value="Dhruv";
}
</script>
</body>
</html>

[fig.2 After Click On That


Button]
65
Third way of registering an event
3.addEventListener:
• The Event Target method addEventListener() sets up a function that
will be called whenever the specified event is delivered to the target.
• Common targets are Element, Document, and Window, but the target may be
any object that
supports events (such as XML Http Request).
• addEventListener() works by adding a function or an object that implements
Event Listener to the list of event listeners for the specified event type on the
Event Target on which it's called.

66
The addEventListener() method attaches an event handler to the specified element.

The addEventListener() method attaches an event handler to an element without overwriting existing event
handlers.

You can add many event handlers to one element.

You can add many event handlers of the same type to one element, i.e two "click" events.

You can add event listeners to any DOM object not only HTML elements. i.e the window object.

The addEventListener() method makes it easier to control how the event reacts to bubbling.

When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better
readability and allows you to add event listeners even when you do not control the HTML markup.

You can easily remove an event listener by using the removeEventListener() method.
Syntax

target.addEventListener(type, listener[, options]);


target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]);
Example:
document.getElementById("myBtn").addEventListener("click", displayDate);

68
removeEventListener:

• The EventTarget.removeEventListener() method removes from the


EventTarget an event listener previously registered with
EventTarget.addEventListener().
• The event listener to be removed is identified using a combination of the
event type, the event listener function itself, and various optional options
that may affect the matching process; see Matching event listeners for
removal.

69
Syntax
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[,
useCapture]);

70
<!DOCTYPE html>
<html>
<head><title>Display Page</title></head> An Example of onclick
<body>
<hr color="orange" />
<center><h1 id="htag">Welcome To ADIT</h1></center>
<hr color="blue" />
<center><button type="button" onclick="Change()">Change</button>
<button type="button" onclick="Hide()">Hide</button>
<button type="button" onclick="Display()">Display</button>
<button type="button" onclick="ChangeColor()">Color Change</button></center>
<hr color="green" />
<script type="text/javascript">
function Change()
{ document.getElementById("htag").innerHTML="Welcome ABC"; }

function Display()
{ document.getElementById("htag").style.display="block"; }
function Hide()
{ document.getElementById("htag").style.display="none"; }
function ChangeColor()
{ document.getElementById("htag").style.color="blue"; }
</script>
</body>
</html>

71
Event handler example
revise :Event handler example [WE CAN
REGISTER AN EVENT BY USING ON[EVENT]
EG ONCLICK OR ADDEVENTLISTENER
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>

//<button id="myBtn" onclick=”displayDate();” >Try it</button>


<p id="demo"></p>
<script>

//document.getElementById("myBtn").onclick=displayDate;
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
using addEventListeneter calling two
functions on the element
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to add two click events to the same button.</p>
<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!");
}
function someOtherFunction() {
alert ("This function was also executed!");
}
</script>
</body>
addEventListener and removeEventListener
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>
addEventListener and removeEventListener
<div id="myDIV">
<p>This div element has an onmousemove event handler that displays a random number every time you move your mouse
inside this orange field.</p>
<p>Click the button to remove the div's event handler.</p>
<button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>
Focus and blur on EventListener
<!DOCTYPE html>
<html>
<body>
<p>When you enter the input field (child of FORM), a function is triggered which sets the background color to yellow. When you leave the
input field, a function is triggered which removes the background color.</p>
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
</body>
Output
addEventListener on window object
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method on the window object.</p>
<p>Try resizing this browser window to trigger the "resize" event handler.</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>

You might also like