Scribd
Upload
44 views86 pages

JS 3

JavaScript, initially named LiveScript, is a powerful client-side scripting language created by Brendan Eich in 1995, primarily used to enhance user interaction on webpages. It has various features and limitations, including the inability to read/write files and lack of multithreading capabilities. JavaScript supports multiple data types, operators, control structures, and functions, making it versatile for web development.

Uploaded by

Shanu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
44 views86 pages

JS 3

JavaScript, initially named LiveScript, is a powerful client-side scripting language created by Brendan Eich in 1995, primarily used to enhance user interaction on webpages. It has various features and limitations, including the inability to read/write files and lack of multithreading capabilities. JavaScript supports multiple data types, operators, control structures, and functions, making it versatile for web development.

Uploaded by

Shanu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 86

JavaScript

JavaScript

Brendan Eich

1995
The language was initially called LiveScript and was later renamed JavaScript
What is JavaScript?
•JavaScript is a very powerful client-side scripting language.

•JavaScript is used mainly for enhancing the interaction of a


user with the webpage.

•In other words, you can make your webpage more lively and
interactive, with the help of JavaScript.
Features of Java Script
Limitations of JavaScript
Client-side JavaScript does not allow the reading
or writing of files.

It cannot be used for networking applications


because there is no such support available.

It doesn't have any multithreading or


multiprocessor capabilities.
Tools for Java Script
We can use any text editor of our choice including
 Notepad++
 Visual Studio Code
 Sublime Text
 Atom or
 any other text editor
You can use any web browser including
Google Chrome
Firefox
Internet Explorer
Microsoft Edge, etc
How to Run JavaScript?
Step -1 Open Notepad or any text Editor
Step -2 Write HTML code with Java Script
Step -3 Save the file with
extension .html
Step -4 Open file using any Web browser
SCRIPT Tag
The <SCRIPT> tag is an extension to HTML that can enclose any number
of JavaScript statements as shown here:

<SCRIPT>
JavaScript statements...
</SCRIPT>

• A document can have multiple SCRIPT tags, and each can enclose any
number of JavaScript statements.
Famous “Hello World” Program
<!DOCTYPE html>
<html>

<body>

<script language="JavaScript">

document.write(“Hello, World!”)
</script>

</body>

</html>
Script Where To use
• You can place any number of scripts in an HTML
document.
• Scripts can be placed in the <body>, or in
the <head> section of an HTML page, or in both.
– With in body section
– With in head section
– External file
JavaScript Display Possibilities
• JavaScript can "display" data in different ways:

• Writing into the HTML output using document.write().

• Writing into an alert box, using window.alert().

• Writing into an HTML element, using innerHTML.


Using innerHTML

• To access an HTML element, JavaScript can use


the document.getElementById(id) method.

• The id attribute defines the HTML element.


The innerHTML property defines the HTML
content
Comments in JavaScript
<script>
//this is a single line comment line</script>
<script>
/*this is a multiline comment
2nd line
--------
Nth line*/
</script>
Variable
• A JavaScript variable is simply a name of storage
location.
– local variable
– global variable.
• JavaScript Variables can be declared in 4 ways:
– Automatically
– Using var
– Using let
– Using const
Variable Examples
• Let’s see a simple example of JavaScript variable.
<script>
y=20;//Automatically
var x = 10; //Using var
let z=30;//Using let
const pi=3.14;//Using const
var z=x+y;
document.write(z);
</script>
Examples

Global Variable
Local Variable

<script> <script>
function abc(){ var value=50;//global variable
var x=10; //local variable function a(){ alert(value);
} }
</script> function b(){ alert(value);
}
</script>
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
Primitive data types
• There are five types of primitive data types in JavaScript.
They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
Cont..
• // Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

//undefined
let name=undefined;
//null
let name=null;
Non - Primitive data types

Data Type Description


Object represents instance through which we can access members

Array represents group of similar values


RegExp represents regular expression
Non - Primitive data types
Data Type Description

Object represents instance through which we can access members

Array represents group of similar values


Cont..
• // Object:
const person = {firstName:"John",
lastName:"Doe"};

// Array object:
const cars =
["Saab", "Volvo", "BMW"];
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands.
For example:

var sum=10+20;

Here, + is the arithmetic operator and = is the assignment operator. There are
following types of operators in JavaScript.

1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
Arithmetic Operators

Operator Description Example


+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus (Remainder) 20%10 = 0
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9
Comparison Operators

Operator Description Example


== Is equal to 10==20 = false
=== Identical (equal and of same type) 10==20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false
Bitwise Operators

Operator Description Example


& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2
Logical Operators

Operator Description Example


&& Logical AND (10==20 && 20==33) = false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true
Assignment Operators

Operator Description Example


= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0
if-else Statements

• 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
Examples <script>
var a=20; if(a==10){
<script>
var a=20; document.write("a is equal to 10");
if(a>10){
document.write("value of a is greater than 10");
}
} else if(a==15){
</script> document.write("a is equal to 15");
<script> }
var a=20; else if(a==20){
if(a%2==0){ document.write("a is equal to 20");
document.write("a is even number"); }
} else{
else{ document.write("a is not equal to 10, 15 or
document.write("a is odd number"); 20");
}
}
</script>
</script>
JavaScript Switch

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;}


}
Switch Example
<script>
var grade=‘Z'; 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>
Loop Statements

• 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

4. for-in loop
while Loop Statements
while (condition)
{
code to be executed
}

<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
Do while Loop Statements
do{
code to be executed
} while (condition);

<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
For Loop Statements
for (initialization; condition; increment)
{
code to be executed
}

• Let’s see the simple example of for loop in javascript.

<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>");
}
</script>
Break Statements
html>
<

<body>
<script type="text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
if (x == 5){
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Continue Statements
<html>
<body>
<script type="text/javascript"> var x = 1;
document.write("Entering the loop<br /> "); while (x < 10)
{
x = x + 1;
if (x == 5){
continue; // skill rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Functions in Java Script
• A function is a JavaScript procedure a set of statements that
performs a specific task.
• A function definition has these basic parts:

• The function keyword.

• A function name.

• A comma-separated list of arguments to the function in


parentheses.

• The statements in the function in curly braces.


Advantages of functions
• There are mainly two advantages of JavaScript functions.

1. Code reusability
2. Less coding
• Function Syntax
• The syntax of declaring function is given below.
function functionName([arg1, arg2, ...argN])
{
//code to be executed
}
Functions example
<script>
function msg(){
alert("hello! this is message");
}
</script>
<form>
<input type="button" onclick="msg()"/>
</form>
Function Arguments example
<script>
function getcube(number){
alert(number*number*number);
}
</script>

<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
Function with Return Value
<script>
function getInfo(){
return “Welcome to Functions”;
}
</script>
<script>
document.write(getInfo());
</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

1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)
By array literal
• The syntax of creating array using array literal is given below:
• var arrayname=[value 1,value 2,…… ,value N];
• As you can see, values are contained inside [ ] and separated by ,
(comma).
<script>
var emp=["abc", "xyz", "pqr"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
By creating instance of Array directly
• The syntax of creating array directly is given below:
• var arrayname=new Array();
• Here, new keyword is used to create instance of array. Let’s see the
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>
By using an Array constructor

• Here, you need to create instance of array by passing arguments in constructor


so that we don't have to provide value explicitly.

• 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>
Java Script Objects

• A JavaScript object is an entity having state and behaviour


(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.
Real world example

<script>
// Create an Object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display Data from the Object:


document.getElementById("demo").innerHTML =
"The car type is " + car.type;</script>
Cont..
• 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)
Creating Object by object literal
The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.propertyN:valueN}
<script>
emp={id:102,name:"Shyam
Kumar",salary:40000}
document.write(emp.id+" "+emp.name+"
"+emp.salary);</script>
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;document.write(emp.id+" "+emp.name+" "+emp.salary);


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.
<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>
By 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.

• You can use different Date constructors to create date object. It provides
methods to get and set day, month, year, hour, minute and seconds.

• Constructor
• You can use 4 variant of Date constructor to create date object.

1. Date()
2. Date(milliseconds)
3. Date(dateString)
4. Date(year, month, day, hours, minutes, seconds, milliseconds)
JavaScript date Methods

getFullYear()
getMonth() .
getDay()
getMinutes()
getSeconds()
getMilliseconds()
Examples on date Methods 1/2
• Let's see the simple example to print date object. It prints date and time both.
Current Date and Time:
<script>
var today=new Date();
document.getElementById('txt').innerHTML=today;
</script>
• Let's see another code to print date/month/year.
<script>
var date=new Date();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
document.write("<br>Date is: "+day+"/"+month+"/"+year);
</script>
Examples on date Methods 2/2
• JavaScript Current Time Example
• Let's see the 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>
By 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.

Square Root of 25 is: <span id="p1"></span>

<script>
document.getElementById('p1').innerHTML=Math.sqrt(25);
</script>
JavaScript Math Object Methods

1. Math.sqrt(n)

2. Math.random():Returns a pseudo-random number between 0 (inclusive)


and 1 (exclusive).
3. Math.pow(m,n)

4. Math.floor(n):Rounds a number down to the nearest integer.

5. Math.ceil(n):Rounds a number up to the next largest integer.

6. Math.round(n):Rounds a number to the nearest integer

7. Math.abs(-4); Returns the absolute value of a number.


Browser Object Model (BOM)
• 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 javatpoint");
• You can use a lot of properties (other objects) defined underneath the window object
like document, history, screen, navigator, location, innerHeight, innerWidth,
• Note: The document object represents an html document.
• It forms DOM (Document Object Model).
Browser Object Model Cont..

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
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.
setTimeout() performs action after specified time like calling function,
evaluating expressions etc.
setInterval() Repeatedly executes a function at specified intervals
innerHeight /innerWidth: Gets the height/width of the viewport
Examples on window object Methods

Example of alert() in Example of confirm() in javascript


It displays the confirm dialog box. It has message
javascript with ok and cancel buttons.
It displays alert dialog box. It has <script type="text/javascript">
message and ok button. function msg(){
var v= confirm("Are u sure?");
<script type="text/javascript"> if(v==true){
function msg(){ alert("ok");
alert("Hello Alert Box"); }
} else{
alert("cancel");
</script>
}
}
<input type="button" value="click"
</script>
onclick="msg()"/>
<input type="button" value="delete record"
onclick="msg()"/>
Examples on window object Methods
Example of prompt() in javascript
It displays prompt dialog box for input. It has message and textfield.
<script type="text/javascript"> function msg(){
var v= prompt("Who are you?"); alert("I am "+v);
}
</script>
<input type="button" value="click" onclick="msg()"/>
Example of open() in javascript
It displays the content in a new window.
<script type="text/javascript"> function msg(){ open(" https://www.jntuk.edu.in/ ");
}
</script>
<input type="button" value="jntuk kakinada" onclick="msg()"/>
navigator Object

• navigator Object
• The navigator object provides information about the browser and
device.
• Common navigator Properties:
• navigator.userAgent: Returns the user-agent string of the browser.
• navigator.language: Returns the language of the browser.
• navigator.platform: Indicates the platform (e.g., Windows, macOS).
• navigator.geolocation: Provides access to the device's location.
location Object
• 3. location Object
• The location object provides information about the current URL and allows
you to manipulate it.
• Common location Properties and Methods:
• location.href: Returns the full URL of the current page.
• location.hostname: Returns the domain name of the web host.
• location.pathname: Returns the path of the URL.
• location.search: Returns the query string (e.g., ?id=10).
• location.assign(url): Navigates to a new URL.
• location.reload(): Reloads the current page.
history Object
• 4. history Object
• The history object allows you to interact with the browser's
session history.
• Common history Methods:
• history.back(): Navigates to the previous page in history.
• history.forward(): Navigates to the next page in history.
• history.go(n): Navigates to a specific page in history (e.g., -1
for the previous page, 1 for the next page).
screen Object

• screen Object
• The screen object provides information about the user's screen.
• Common screen Properties:
• screen.width: Returns the width of the screen.
• screen.height: Returns the height of the screen.
• screen.availWidth: Returns the available width (excluding
taskbars).
• screen.availHeight: Returns the available height.
Document Object Model
The document object represents the whole html document.
JavaScript can access and change all the elements of an 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.

According to W3C - "The W3C 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.”
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 document.
writeln("string") writes the given string on the document
with newline character at 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.
document.getElementById(id).style.property = new style
Accessing field value by document object

To get the value of input text by user, using document.form1.name.value to get the value
of name field. Here, document is the root element that represents the html document.
form1 is the name of the form. name is the attribute name of the input text. value is the
property, that returns the value of the input text. Simple example of document object that
prints name with welcome message.

<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>
document.getElementById() method
The document.getElementById() method returns the element of specified id.
In the previous slide, we have used document.form1.name.value to get the value of the input value.
Instead of this, we can use document.getElementById() method to get value of the input text. But we
need to define id for the input field.
Simple example of document.getElementById() method that prints cube of the given number.
<script type="text/javascript"> function getcube(){
var n=document.getElementById("number").value;
alert(n*n*n);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
document.getElementByName() method
The document.getElementsByName() method returns all the element of specified name.
document.getElementsByName("name").
Example of document.getElementsByName() method
In this example, we going to count total number of genders. Here, we are using getElementsByName()
method to get all the genders.

<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">


document.getElementByTagName() method

The document.getElementsByTagName() method returns all the element of specified tag name.
The syntax of the getElementsByTagName() method is given below:
document.getElementsByTagName("name")
Example of document.getElementsByTagName() method
In this example, we going to count total number of paragraphs used in the document. To do this, we
have called the document.getElementsByTagName("p") method that returns the total paragraphs.

<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 getElementByTagName() 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.
• Example of innerHTML property
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button get the HTML content of the ul element.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
Cont..
<script>
function myFunction() {
var x =
document.getElementById("myList").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
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.
• Javascript innerText Example
In this example, we are going to display the password strength when releases the key after press.
<script type="text/javascript" >
function validate() {
var msg;
if(document.myForm.userPass.value.length>5)
{
msg="good";
}
Javascript – innerText Cont..
else
{
msg="poor";
}
document.getElementById('mylocation').innerText=msg;
}
</script>
<form name="myForm">
<input type="password" value="" name="userPass" onkeyup="validate()">
Strength:<span id="mylocation">no strength</span>
</form>
JavaScript Form Validation

• JavaScript email validation


• It is important to validate the form submitted by the user because it can have inappropriate
values. So validation is must. The JavaScript provides you the facility the validate the form on
the client side so processing will be fast than server-side validation. So, most of the web
developers prefer JavaScript form validation.
• Through JavaScript, we can validate name, password, email, date, mobile number etc fields.
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.
JavaScript Form Validation Cont..
<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>
DHTML
• DHTML is NOT a language.

• DHTML is a TERM describing the art of making dynamic and interactive web pages.

• DHTML combines HTML, JavaScript, DOM, and CSS.

• HTML/DOM events for JavaScript


• HTML or DOM events are widely used in JavaScript code. JavaScript code is executed
with HTML/DOM events.
•
1. Input Events
2. Mouse Events
3. Click Events
4. Load Events
Event handlers
 JavaScript applications in the Navigator are largely event-
driven.
 Events are actions that occur usually as a result of something the
user does. For example, clicking a button is an event, as is
changing a text field or moving the mouse over a hyperlink.
 You can define event handlers, such as onChange and onClick,
to make your script react to events.
Input Events

1. onblur - When a user leaves an input field

2. onchange - When a user changes the content of an input field


3. onfocus - When an input field gets focus

4. onselect -When input text is selected

5. onsubmit - When a user clicks the submit button


6. onreset - When a user clicks the reset button

7. onkeydown - When a user is pressing/holding down a key


8. onkeypress - When a user is pressing/holding down a key

9. onkeyup - When the user releases a key


Mouse Events

1. onmouseover/onmouseout - When the mouse passes over an element

2. onmousedown/onmouseup - When pressing/releasing a mouse button

3. onmousedown - When mouse is clicked: Alert which element

4. onmousedown - When mouse is clicked: Alert which button

5. onmousemove/onmouseout - When moving the mouse pointer over/out of an

image

6. onmouseover/onmouseout - When moving the mouse over/out of an image.


Click Events and Load Events

1. onclick - When button is clicked

2. ondblclick - When a text is double-clicked

3. onload - When the page has been loaded

4. onload - When an image has been loaded

5. onerror - When an error occurs when loading an image

6. onunload - When the browser closes the document

7. onresize - When the browser window is resized

You might also like