[go: up one dir, main page]
Scribd
Upload
21 views40 pages

Webtechnology 1

Uploaded by

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

Webtechnology 1

Uploaded by

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

Function in JavaScript

• A function is self-contained block of codes to perform some specific well-defined task.


• Function is executed when
 Function is invoked from another JS function..
 Function is attached with some event and event occurs.
• The code can be reused in many places within the program.
• Script inside function is not executed until function is invoked.
• Function may return a value using keyword return.
• Function can only return one value at a time.
• Once a function returns a value, control returns back to the caller.

Prepared by: Govind Bhat


Types of Function in JavaScript
• Mainly, a function is categorized into two types:
• Library function
• User defined function
• A library function is built-in function. Example: alert(), confirm(), prompt(), etc.
• A user defined is defined by user as per user requirement.
• A user defined function can be declared either globally or locally.
• A global function is declared within the <HEAD> tag and it can be accessed within entire
program.
• A local function can be declared within the <BODY> part of any specific scripts and it can be
accessed only within the script where it is declared.

Prepared by: Govind Bhat


Syntax to declare Function in JavaScript

function functionName(parameters)
{
variable declaration;
Statement 1;
Statement 2;
……………….
Statement n;
return statement;
}

Prepared by: Govind Bhat


Function in JavaScript
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Local Function</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b)
{
return a+b;
}
var s=sum(8,9);
document.write("<br>Sum of 8 and 9="+s);
</script>
</body></html>

Prepared by: Govind Bhat


Function in JavaScript
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Global Function</title>
<script type="text/javascript">
function sum(a,b)
{
return a+b;
}
</script>
</head>
<body><script type="text/javascript">
var s=sum(8,9);
document.write("<br>Sum of 8 and 9="+s);
</script>
</body></html>
Prepared by: Govind Bhat
Control Structures in JavaScript
Control Structure refers to program statement which control the flow of program. It also
specifies the order of statements in program.
Types of control statements:
 Branching Statements
 Looping Statements

In branching statement, the selection is made based on condition. The execution of program
statements is totally directed by the result obtained from checking condition. The branching
statements are mainly of three types:
 If…….else statement
 If…….else if statement
 switch case statement

Prepared by: Govind Bhat


Control Structures in JavaScript
if…….else statement
This is the simple form of conditional statement in which statements are executed based on
given condition. When condition is true, if part(first statement) is executed otherwise else part is
executed(second part).
Syntax:
if(condition)
first statement;
else
second statement;

Prepared by: Govind Bhat


Control Structures in JavaScript
if…….else statement
Example:
<!DOCTYPE html>
<html>
<head>
<title>if condition</title>
</head>
<body>
<script type="text/javascript">
var n=prompt("Enter a number.");
if (n>0)
document.write(n+" is positive numebr");
else
document.write(n+" is negative numebr");
</script>
</body>
</html>
Prepared by: Govind Bhat
Control Structures in JavaScript
if…….else if statement
This is the control statement used when we have two or more conditions to be executed.
Syntax:
if(condition1)
statement1;
else if(condition2)
statement2;
………………………….
else
else statement;

Prepared by: Govind Bhat


Control Structures in JavaScript
if…….else if statement
Example: <!DOCTYPE html>
<html>
<head>
<title>if….else if condition</title>
</head>
<body>
<script type="text/javascript">
var a=10,b=23,c=11;
if(a>b&&a>c)
document.write(a+" is greater number");
else if (b>a&&b>c)
document.write(b+" is greater number");
else
document.write(c+" is greater number");
</script>
</body></html>
Prepared by: Govind Bhat
Control Structures in JavaScript
Switch case statement
The switch case statement is a multi-way decision statement. It is used when we have multiple
options and we need to perform different task for each option. A switch statement compares the
value of a variable to the values specified in case statements. When a case statement is found whose
value matches that of the variable, the code in that case statement is run.
Syntax:
switch (variable/exp.)
{ case “1”: statements;
break;
case “2”: statements;
break;
…………………………………..
case “n”: statements;
break;
default:
default statement;
}
Prepared by: Govind Bhat
Control Structures in JavaScript
Switch case statement
<html>
<head> case "5": document.write("<br>Thusday");
<title>switch case statement</title> break;
</head> case "6": document.write("<br>Friday");
<body> break;
<script > case "7": document.write("<br>Saturday");
var day=prompt("Enter a number"); break;
switch(day) default:
{ document.write("<br>Invalid entry!");
case "1": document.write("<br>Sunday");
break; }
case "2": document.write("<br>Monday"); </script>
break; </body>
case "3": document.write("<br>Tuesday"); </html>
break;
case "4": document.write("<br>Wednesday");
break;

Prepared by: Govind Bhat


Control Structures in JavaScript
Looping Statement
Looping is the process of executing the same program statement or block of program
statements repeatedly for specified number of times or till the given condition is satisfied.
Types of looping:
 while loop
 Do....while loop
 for loop

Prepared by: Govind Bhat


Control Structures in JavaScript
while loop:
In this loop, it first checks the condition, if it is found true then it executes the statements
written in its body part otherwise, control will come out of the loop body.
Syntax:
initialization;
while(condition)
{
statements;
increment/decrement;
}

Prepared by: Govind Bhat


Control Structures in JavaScript
while loop:
Example:
<!DOCTYPE html>
<html>
<head>
<title>while loop</title>
</head>
<body>
<script >
var n=1;
while(n<=10)
{
document.write("<br>"+n);
n++;
}
</script>
</body></html>
Prepared by: Govind Bhat
Control Structures in JavaScript
do….while loop:
In this loop, it first execute statements written inside the body part and then checks the
condition, if the condition is true then the loop will continue otherwise, control will come out of
the loop body.
Syntax:
initialization;
do
{
statements;
increment/decrement;
} while(condition);

Prepared by: Govind Bhat


Control Structures in JavaScript
do......while loop:
Example:
<!DOCTYPE html>
<html>
<head>
<title>do……while loop</title>
</head>
<body>
<script >
var n=1;
do {
document.write("<br>"+n);
n++;
} while(n<=10);
</script>
</body></html>

Prepared by: Govind Bhat


Control Structures in JavaScript
for loop:
The for loop is most used loop in programming. The initialization, condition and counter are
defined at the same line within the loop. These expression are separated by semicolon.
Syntax:
for(initialization; condition; counter)
{
statements;
}

Prepared by: Govind Bhat


Control Structures in JavaScript
for loop:
Example:
<!DOCTYPE html>
<html>
<head>
<title>for loop</title>
</head>
<body>
<script >
var i;
for(i=1; i<=10; i++)
{
document.write("<br>"+i);
}
</script>
</body></html>
Prepared by: Govind Bhat
Object Oriented Programming in JavaScript
Object-oriented programming (OOP) is a style of programming characterized by the identification of
classes of objects closely linked with the methods (functions) with which they are associated.
An object is defined as people, person, thing etc which exists in the real world. Every object has two
fundamental characteristics: the collection of properties and set of behaviors (functions).
A class is defined as collection of similar types of objects whereas as object is instance of the respective
class.
In JavaScript, users can define their own set of objects by defining common template also known as class.
JavaScript also provides some built-in objects are known as Document Object Model (DOM). Examples of
DOM objects are window, frame, form, document, etc.
Let us consider an object car which has properties like make, model, year, color, plate_number, etc. The
set of behaviors like start(), run(), stop(), break(), turn(), reverse(), etc. Finally, the properties and the
methods are encapsulated with a single unit car as an object.

Prepared by: Govind Bhat


Object Oriented Programming in JavaScript
Assessing Properties
Properties of an object can be accessed by using syntax: objectName.propertyName
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Object</title>
</head>
<body>
<h2>JavaScript Object</h2>
<script type="text/javascript">
var car={
make:"Toyota",
model:"RAV4",
year:2022,
Number:"BA20PA-2020"
};
document.write(car.make+"--"+car.model+"--"+car.year+"--"+car.Number);
</script>
</body></html>

Prepared by: Govind Bhat


Object Oriented Programming in JavaScript
Assessing Methods
The methods of an object can be accessed by using the syntax: objectName.methodName()
In object-oriented programming this operator is used to access the properties of respective objet within
the scope of the object.
Example:
<!DOCTYPE html>
<html> return this.make+"--"+this.model+"--"+this.year+"--"+this.Number;
<head> }
<title>JavaScript Object</title> };
</head> document.write(car.display());
<body> </script>
<h2>JavaScript Object</h2> </body></html>
<script type="text/javascript">
var car={
make:"Toyota",
model:"RAV4",
year:2022,
Number:"BA20PA-2020“,
display:function(){

Prepared by: Govind Bhat


Event Handling
Event Handling is the mechanism that controls the event and decides what should happen if an
event occurs. This mechanism have the code which is known as event handler that is executed
when an event occurs. In web programming, event is useful mechanism to communicate
between HTML with JavaScript. When a user accesses a webpage in browser the page loads on
the browser, it is called and event, when user clicks a button, it is also event. Events are a part of
the Document Object Model(DOM) of JavaScript. Following are some popular events of HTML5:

Attribute Examples Description


onoffline script Triggers when the page goes offline
onafterprint script Triggers after the page is printed
onbeforeprint script Triggers before the document is printed
onbeforeunload script Triggers when the document is about to be unloaded
onblur script Fires the moment that the element loses focus
onfocus script Fires the moment when the element gets focus

Prepared by: Govind Bhat


Attribute Values Description
oninput script Script to be run when an element gets user input
oninvalid script Script to be run when an element is invalid
onreset script Fires when the Reset button in a form is clicked
onselect script Fires after some text has been selected in an element
onsubmit script Fires when a form is submitted
onkeydown script Fires when a user is pressing a key
Onkeypress script Fires when a user presses a key
Onkeyup script Fires when a user releases a key
Onclick script Fires on a mouse click on the element
ondblclick script Fires on a mouse double-click on the element
onmouseover script Fires when the mouse pointer moves over an element
onscroll script Triggers when an element's scrollbar is being scrolled

Prepared by: Govind Bhat


Event Handling
Example1:
<!DOCTYPE html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">
<p>These events triggers when page is online/offline.</p>

<script>
function onFunction() {
alert ("Your browser is working online.");
}
function offFunction() {
alert ("Your browser is working offline.");
}
</script>
</body></html>

Prepared by: Govind Bhat


Event Handling
Example2:
<!DOCTYPE html>
<html>
<body onafterprint="myFunction()">

<h1>Try to print this document</h1>

<script>
function myFunction() {
alert("This document is now being printed");
}
</script>

</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example3:
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window to invoke the onbeforeunload event.</p>

<script>
function myFunction() {
return "Are you sure you want to leave this page?";
}
</script>

</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example4:
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" name="fname" 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() {
let x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example5:
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()">
<script>
// Focus = Changes the background color of input to yellow
function focusFunction() {
document.getElementById("myInput").style.background = "yellow";
}
// No focus = Changes the background color of input to red
function blurFunction() {
document.getElementById("myInput").style.background = "red";
}
</script>
</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example6:
<!DOCTYPE html>
<html>
<body>
<p>Write something in the text field to trigger a function.</p>

<input type="text" id="myInput" oninput="myFunction()">

<p id="demo"></p>
<script>
function myFunction() {
let x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "You wrote: " + x;
}
</script>

</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example7:
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="get">


Name: <input type="text" oninvalid="alert('You must fill out the form!');" name="fname" required>
<input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field, an alert message will occur.</p>

</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example8:
<!DOCTYPE html>
<html>
<body>
<p>When you reset the form, a function is triggered which alerts some text.</p>

<form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset">
</form>

<script>
function myFunction() {
alert("The form was reset");
}
</script>
</body>
</html>
Prepared by: Govind Bhat
Event Handling
Example9:
<!DOCTYPE html>
<html>
<body>

Name: <input type="text" value=“Enter name" onselect="myFunction()">

<p>The function myFunction() is triggered when some text is selected in the input field. The function
shows a message.</p>

<script>
function myFunction() {
alert("You have selected some text!");
}
</script>

</body>
</html>
Prepared by: Govind Bhat
Event Handling
Example10:
<!DOCTYPE html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>

<form action="/action_page.php" onsubmit="myFunction()">


Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</body>
</html>
Prepared by: Govind Bhat
Event Handling
Example11:
<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example12:
<!DOCTYPE html>
<html>
<body>
<p>Press and hold down a key inside the text field to set a red background color. Release the key to set a
green background color.</p>
<input type="text" id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()">

<script>
function keydownFunction() {
document.getElementById("demo").style.backgroundColor = "red";
}

function keyupFunction() {
document.getElementById("demo").style.backgroundColor = "green";
}
</script>
</body></html>
Prepared by: Govind Bhat
Event Handling
Example13:
<!DOCTYPE html>
<html>
<body>

<p onclick="myFunction()“ id=“demo”>Click me to change color.</p>

<script>
function myFunction() {
document.getElementById("demo").style.color = “red";
}
</script>

</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example14:
<!DOCTYPE html>
<html>
<body>

<p ondblclick="myFunction()“ id=“demo”>Click me to change color.</p>

<script>
function myFunction() {
document.getElementById("demo").style.color = “green";
}
</script>

</body>
</html>

Prepared by: Govind Bhat


Event Handling
Example15:
<!DOCTYPE html>
<html>
<body>
<center><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0"
src=“lba_logo.jpg" alt=“LBA logo" width="32" height="32"></center>
<script>
function bigImg(x) {
x.style.height = “128px";
x.style.width = “128px";
}
function normalImg(x) {
x.style.height = “64px";
x.style.width = “64px";
}
</script>
</body>
</html>
Prepared by: Govind Bhat
Event Handling
Example16:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;}
</style>
</head>
<body>
<div id="myDIV" onscroll="myFunction()">Little Buddha Academy </div>
<script>
function myFunction() {
document.getElementById("myDIV").style.color = "red";}
</script></body></html>
Prepared by: Govind Bhat

You might also like