1 of 66

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

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

2 of 66

JavaScript If statement

<html>

<body>

<script>

var a=20;

if(a>10){

document.write("value of a is greater than 10");

}

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

3 of 66

JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of JavaScript if-else statement is given below.

  1. if(expression){  
  2. //content to be evaluated if condition is true  
  3. }  
  4. else{  
  5. //content to be evaluated if condition is false  
  6. }  

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

4 of 66

<html>

<body>

<script>

var a=20;

if(a%2==0){

document.write("a is even number");

}

else{

document.write("a is odd number");

}

</script>

</body>

</html>

a is even number

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

5 of 66

JavaScript If...else if statement

It evaluates the content only if expression is true from several expressions. The signature of JavaScript if else if statement is given below.

if(expression1){  

//content to be evaluated if expression1 is true  

}  

else if(expression2){  

//content to be evaluated if expression2 is true  

}  

else if(expression3){  

//content to be evaluated if expression3 is true  

}  

else{  

//content to be evaluated if no expression is true  

}  

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

6 of 66

<html>

<body>

<script>

var a=20;

if(a==10){

document.write("a is equal to 10");

}

else if(a==15){

document.write("a is equal to 15");

}

else if(a==20){

document.write("a is equal to 20");

}

else{

document.write("a is not equal to 10, 15 or 20");

}

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

7 of 66

Window prompt() Method

<!DOCTYPE html>

<html>

<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

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

<script>

function myFunction() {

var person = prompt("Please enter your name", "Harry Potter");

if (person != null) {

document.getElementById("demo").innerHTML =

"Hello " + person + "! How are you today?";

}

}

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

8 of 66

<!DOCTYPE html>

<html>

<body>

<p>I'm thinking of a letter. Guess which: a, b, c, d or e?</p>

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

<button onclick="myFunction()">Try it</button>

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

<script>

function myFunction() {

var letter = document.getElementById("myInput").value;

var text;

// If the letter is "c"

if (letter === "c") {

text = "Spot on! Good job!";

// If the letter is "b" or "d"

} else if (letter === "b" || letter === "d") {

text = "Close, but not close enough.";

// If the letter is anything else

} else {

text = "Waaay off..";

}

document.getElementById("demo").innerHTML = text;

}

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

9 of 66

<!DOCTYPE html>

<html>

<body>

<p>Please input a number between 1 and 10:</p>

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

<button type="button" onclick="myFunction()">Submit</button>

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

<script>

function myFunction() {

var x, text;

// Get the value of input field with id="numb"

x = document.getElementById("numb").value;

// If x is Not a Number or less than one or greater than 10, output "input is not valid"

// If x is a number between 1 and 10, output "Input OK"

if (isNaN(x) || x < 1 || x > 10) {

text = "Input not valid";

} else {

text = "Input OK";

}

document.getElementById("demo").innerHTML = text;

}

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

10 of 66

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display a dialog box which will ask for your favorite drink.</p>

<button onclick="myFunction()">Try it</button>

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

<script>

function myFunction() {

var text;

var favDrink = prompt("What's your favorite cocktail drink?", "Daiquiri");

switch(favDrink) {

case "Martini":

text = "Excellent choice. Martini is good for your soul.";

break;

case "Daiquiri":

text = "Daiquiri is my favorite too!";

break;

case "Cosmopolitan":

text = "Really? Are you sure the Cosmopolitan is your favorite?";

break;

default:

text = "I have never heard of that one..";

}

document.getElementById("demo").innerHTML = text;

}

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

11 of 66

JavaScript Switch

  • The JavaScript switch statement is used to execute one code from multiple expressions. It is just like else if statement that we have learned in previous page. But it is convenient than if..else..if because it can be used with numbers, characters etc.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

12 of 66

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;  

}  

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

13 of 66

<!DOCTYPE html>

<html>

<body>

<script>

var grade='B';

var result;

switch(grade){

case 'A':

result="A Grade";

break;

case 'B':

result="B Grade";

break;

case 'C':

result="C Grade";

break;

default:

result="No Grade";

}

document.write(result);

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

14 of 66

<!DOCTYPE html>

<html>

<body>

<script>

var grade='B';

var result;

switch(grade){

case 'A':

result+=" A Grade";

case 'B':

result+=" B Grade";

case 'C':

result+=" C Grade";

default:

result+=" No Grade";

}

document.write(result);

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

15 of 66

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.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

16 of 66

Method

Description

write("string")

writes the given string on the doucment.

writeln("string")

writes the given string on the doucment with newline character at the end.

getElementById()

returns the element having the given id value.

getElementsByName()

returns all the elements having the given name value.

getElementsByTagName()

returns all the elements having the given tag name.

getElementsByClassName()

returns all the elements having the given class name.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

17 of 66

Accessing field value by document object�

  • In this example, we are going to get the value of input text by user. Here, we are 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.
  • Let's see the simple example of document object that prints name with welcome message.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

18 of 66

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

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

19 of 66

Javascript - document.getElementById() method

  • The document.getElementById() method returns the element of specified id.
  • In the previous page, 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.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

20 of 66

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

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

21 of 66

Javascript - document.getElementsByName() method�

  • The document.getElementsByName() method returns all the element of specified name.
  • The syntax of the getElementsByName() method is given below:

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

22 of 66

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

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

23 of 66

Example of confirm() in javascript

<script type="text/javascript">  

function msg(){  

var vconfirm("Are u sure?");  

if(v==true){  

alert("ok");  

}  

else{  

alert("cancel");  

}  

  

}  

</script>  

  

<input type="button" value="delete record" onclick="msg()"/> 

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

24 of 66

Example of prompt() in javascript

<script type="text/javascript">  

function msg(){  

var vprompt("Who are you?");  

alert("I am "+v);  

  

}  

</script>  

  

<input type="button" value="click" onclick="msg()"/>  

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

25 of 66

Example of open() in javascript

It displays the content in a new window.

<script type="text/javascript">  

function msg(){  

open("http://www.iicsindia.com");  

}  

</script>  

<input type="button" value="javatpoint" onclick="msg()"/>  

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

26 of 66

Example of setTimeout() in javascript�

<script type="text/javascript">  

function msg(){  

setTimeout(  

function(){  

alert("Welcome to IICS after 2 seconds")  

},2000);  

  

}  

</script>  

  

<input type="button" value="click" onclick="msg()"/> 

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

27 of 66

JavaScript Arrays

  • JavaScript arrays are used to store multiple values in a single variable.

<h2>JavaScript Arrays</h2>

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

<script>

var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

28 of 66

What is an Array?

An array is a special variable, which can hold more than one value at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

var car1 = "Saab";�var car2 = "Volvo";�var car3 = "BMW";

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The solution is an array!

An array can hold many values under a single name, and you can access the values by referring to an index number.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

29 of 66

Converting Arrays to Strings

The JavaScript method toString() converts an array to a string of (comma separated) array values.

<h2>JavaScript Array Methods</h2>

<h2>toString()</h2>

<p>The toString() method returns an array as a comma separated string:</p>

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

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits.toString();

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

30 of 66

Popping

The pop() method removes the last element from an array:

<h2>JavaScript Array Methods</h2>

<h2>pop()</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits;

fruits.pop();

document.getElementById("demo2").innerHTML = fruits;

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

31 of 66

The pop() method returns the value that was "popped out":

<h2>JavaScript Array Methods</h2>

<h2>pop()</h2>

<p>The pop() method removes the last element from an array.</p>

<p>The return value of the pop() method is the removed item.</p>

<p id="demo1"></p>

<p id="demo2"></p>

<p id="demo3"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits;

document.getElementById("demo2").innerHTML = fruits.pop();

document.getElementById("demo3").innerHTML = fruits;

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

32 of 66

Pushing

The push() method adds a new element to an array (at the end):

<h2>JavaScript Array Methods</h2>

<h2>push()</h2>

<p>The push() method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

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

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits;

function myFunction() {

fruits.push("Kiwi");

document.getElementById("demo").innerHTML = fruits;

}

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

33 of 66

Changing Elements

Array elements are accessed using their index number:

Array indexes start with 0. [0] is the first array element, [1] is the second, [2] is the third ...

<h2>JavaScript Array Methods</h2>

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits;

fruits[0] = "Kiwi";

document.getElementById("demo2").innerHTML = fruits;

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

34 of 66

The length property provides an easy way to append a new element to an array:

var fruits = ["Banana""Orange""Apple""Mango"];fruits[fruits.length] = "Kiwi";  

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

35 of 66

Deleting Elements

Since JavaScript arrays are objects, elements can be deleted by using the JavaScript operator delete:

<h2>JavaScript Array Methods</h2>

<p>Deleting elements leaves undefined holes in an array.</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML =

"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =

"The first fruit is: " + fruits[0];

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

36 of 66

The join() method also joins all array elements into a string.

It behaves just like toString(), but in addition you can specify the separator:

<h2>JavaScript Array Methods</h2>

<h2>join()</h2>

<p>The join() method joins array elements into a string.</p>

<p>It this example we have used " * " as a separator between the elements:</p>

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

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits.join(" * ");

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

37 of 66

JavaScript For Loop

Loops can execute a block of code a number of times.

JavaScript Loops

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Often this is the case when working with arrays:

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

38 of 66

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For Loop</h2>

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

<script>

var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];

var text = "";

var i;

for (i = 0; i < cars.length; i++) {

text += cars[i] + "<br>";

}

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

39 of 66

var i;

for(i=1;i<=10;i++)

{

document.write(i+"<br>")

}

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

40 of 66

<script type="text/javascript">

// program to generate a multiplication table

// take input from the user

var number = parseInt(prompt('Enter an integer: '));

//creating a multiplication table

for(var i = 1; i <= 10; i++) {

// multiply i with number

var result = i * number;

// display the result

document.write(number+" * "+i+" = "+result+"<br>");

}

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

41 of 66

<script type="text/javascript">

// program to generate a multiplication table

// take input from the user

var number = parseInt(prompt('Enter an integer: '));

var range = parseInt(prompt('Enter a range: '));

//creating a multiplication table

for(var i = 1; i <= range; i++) {

// multiply i with number

var result = i * number;

// display the result

document.write(number+" * "+i+" = "+result+"<br>");

}

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

42 of 66

Different Kinds of Loops

JavaScript supports different kinds of loops:

  • for - loops through a block of code a number of times
  • for/in - loops through the properties of an object
  • for/of - loops through the values of an iterable object
  • while - loops through a block of code while a specified condition is true
  • do/while - also loops through a block of code while a specified condition is true

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

43 of 66

The For Loop

The for loop has the following syntax:

for (statement 1; statement 2; statement 3) {�  // code block to be executed}�

Statement 1 is executed (one time) before the execution of the code block.

Statement 2 defines the condition for executing the code block.

Statement 3 is executed (every time) after the code block has been executed.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

44 of 66

for(i=1;i<=10;i++)

{

var res =i*num;

document.write(num+" * "+i+" = "+res+"<br>");

}

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

45 of 66

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For Loop</h2>

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

<script>

var text = "";

var i;

for (i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";

}

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

  • From the example above, you can read:
  • Statement 1 sets a variable before the loop starts (var i = 0).
  • Statement 2 defines the condition for the loop to run (i must be less than 5).
  • Statement 3 increases a value (i++) each time the code block in the loop has been executed.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

46 of 66

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For Loop</h2>

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

<script>

var cars = ["BMW", "Volvo", "Saab", "Ford"];

var i, len, text;

for (i = 0, len = cars.length, text = ""; i < len; i++) {

text += cars[i] + "<br>";

}

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

47 of 66

JavaScript For In

The JavaScript for/in statement loops through the properties of an Object:

Syntax

for (key in object) {�  // code block to be executed}

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

48 of 66

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For/In Loop</h2>

<p>The for/in statement loops through the properties of an object.</p>

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

<script>

var txt = "";

var person = {fname:"John", lname:"Doe", age:25};

var x;

for (x in person) {

txt += person[x] + " ";

}

document.getElementById("demo").innerHTML = txt;

</script>

</body>

</html>

Example Explained

  • The for in loop iterates over a person object
  • Each iteration returns a key (x)
  • The key is used to access the value of the key
  • The value of the key is person[x]

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

49 of 66

For/In Over Arrays

The JavaScript for/in statement can also loop over the properties of an Array:

Syntax

for (variable in array) {�  code�}

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

50 of 66

<!DOCTYPE html>

<html>

<head>

<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">

</head>

<body>

<h2>JavaScript For In</h2>

<p>The for/in statement can loops over Array values.</p>

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

<script>

var txt = "";

var numbers = [45, 4, 9, 16, 25];

var x;

for (x in numbers) {

txt += numbers[x] + "<br>";

}

document.getElementById("demo").innerHTML = txt;

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

51 of 66

JavaScript While Loop

  • Loops can execute a block of code as long as a specified condition is true.

The While Loop

The while loop loops through a block of code as long as a specified condition is true.

Syntax

while (condition) {�  // code block to be executed�}

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

52 of 66

<body>

<h2>JavaScript While Loop</h2>

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

<script>

var text = "";

var i = 0;

while (i < 10) {

text += "<br>The number is " + i;

i++;

}

document.getElementById("demo").innerHTML = text;

</script>

</body>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

53 of 66

The Do/While Loop

The do/while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

Syntax

do {�  // code block to be executed�}�while (condition);

Example

The example below uses a do/while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

54 of 66

<body>

<h2>JavaScript Do/While Loop</h2>

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

<script>

var text = ""

var i = 0;

do {

text += "<br>The number is " + i;

i++;

}

while (i < 10);

document.getElementById("demo").innerHTML = text;

</script>

</body>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

55 of 66

Comparing For and While

If you have read the previous chapter, about the for loop, you will discover that a while loop is much the same as a for loop, with statement 1 and statement 3 omitted.

The loop in this example uses a for loop to collect the car names from the cars array:

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

<script>

var cars = ["BMW", "Volvo", "Saab", "Ford"];

var i = 0;

var text = "";

for (;cars[i];) {

text += cars[i] + "<br>";

i++;

}

document.getElementById("demo").innerHTML = text;

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

56 of 66

The loop in this example uses a while loop to collect the car names from the cars array:

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

<script>

var cars = ["BMW", "Volvo", "Saab", "Ford"];

var i = 0;

var text = "";

while (cars[i]) {

text += cars[i] + "<br>";

i++;

}

document.getElementById("demo").innerHTML = text;

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

57 of 66

JavaScript Break and Continue

The break statement "jumps out" of a loop.

The continue statement "jumps over" one iteration in the loop.

<h2>JavaScript Loops</h2>

<p>A loop with a <b>continue</b> statement.</p>

<p>A loop which will skip the step where i = 3.</p>

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

<script>

var text = "";

var i;

for (i = 0; i < 10; i++) {

if (i === 3) { continue; }

text += "The number is " + i + "<br>";

}

document.getElementById("demo").innerHTML = text;

</script>

The Continue Statement

The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.

This example skips the value of 3:

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

58 of 66

The Break Statement

You have already seen the break statement used in an earlier chapter of this tutorial. It was used to "jump out" of a switch() statement.

The break statement can also be used to jump out of a loop:

<h2>JavaScript Loops</h2>

<p>A loop with a <b>break</b> statement.</p>

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

<script>

var text = "";

var i;

for (i = 0; i < 10; i++) {

if (i === 3) { break; }

text += "The number is " + i + "<br>";

}

document.getElementById("demo").innerHTML = text;

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

59 of 66

JavaScript eval() Function

The eval() function evaluates or executes an argument.

If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

60 of 66

<!DOCTYPE html>

<html>

<body>

<p>Click the button to evaluate/execute JavaScript code/expressions.</p>

<button onclick="myFunction()">Try it</button>

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

<script>

function myFunction() {

var x = 10;

var y = 20;

var a = eval("x * y") + "<br>";

var b = eval("2 + 2") + "<br>";

var c = eval("x + 17") + "<br>";

var res = a + b + c;

document.getElementById("demo").innerHTML = res;

}

</script>

</body>

</html>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

61 of 66

JavaScript Functions

  • A JavaScript function is a block of code designed to perform a particular task.
  • A JavaScript function is executed when "something" invokes it (calls it).

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

62 of 66

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation, and returns the result:</p>

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

<script>

function myFunction(p1, p2) {

return p1 * p2;

}

document.getElementById("demo").innerHTML = myFunction(4, 3);

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

63 of 66

JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas:�(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3) {  // code to be executed}

Function parameters are listed inside the parentheses () in the function definition.

Function arguments are the values received by the function when it is invoked.

Inside the function, the arguments (the parameters) behave as local variables.

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

64 of 66

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation and returns the result:</p>

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

<script>

var x = myFunction(4, 3);

document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {

return a * b;

}

</script>

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

65 of 66

<html>

<head>

<h1> Javascript Events </h1>

</head>

<body>

<script language="Javascript" type="text/Javascript">

<!--

function mouseoverevent()

{

alert("This is JavaTpoint");

}

//-->

</script>

<p onmouseover="mouseoverevent()"> Keep cursor over me</p>

</body>

</html>

MouseOver Event

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com

66 of 66

<html>

<head> Javascript Events</head>

<body>

<h2> Enter something here</h2>

<input type="text" id="input1" onkeydown="keydownevent()"/>

<script>

<!--

function keydownevent()

{

document.getElementById("input1");

alert("Pressed a key");

}

//-->

</script>

</body>

</html>

Keydown Event

This presentation uses a free template provided by FPPT.com

www.free-power-point-templates.com