This is a heading"); document.write ("

This is a paragraph.

");

">

Javascript examples
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

JavaScript Examples PowerPoint PPT Presentation


  • 77 Views
  • Uploaded on
  • Presentation posted in: General

JavaScript Examples. By: Erfan Aghasian. Writing Into HTML Output. <html> <body> <p>JavaScript can write directly into the HTML output stream:</p> <script> document.write ("<h1>This is a heading</h1>"); document.write ("<p>This is a paragraph.</p>"); </script> <p>

Download Presentation

JavaScript Examples

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Javascript examples

JavaScript Examples

By: ErfanAghasian


Writing into html output

Writing Into HTML Output

<html>

<body>

<p>JavaScript can write directly into the HTML output stream:</p>

<script>

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph.</p>");

</script>

<p>

You can only use <strong>document.write</strong> in the HTML output.

If you use it after the document has loaded (e.g. in a function), the whole document will be overwritten.

</p>

</body>

</html>


Javascript reacting to events

JavaScript: Reacting to Events

<html>

<body>

<h1>My First JavaScript</h1>

<p>JavaScript can react to events. Like the click of a button: </p>

<button type="button“ onclick="alert('Welcome!')">Click Me!</button>

</body>

</html>


Changing html content

Changing HTML Content

<html>

<body>

<h1>My First JavaScript</h1>

<p id="demo“> JavaScript can change the content of an HTML element. </p>

<script>

function myFunction()

{

x=document.getElementById("demo"); // Find the element

x.innerHTML="Hello JavaScript!"; // Change the content

}

</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>

</html>


Changing html styles

Changing HTML Styles

<html>

<body>

<h1>My First JavaScript</h1>

<p id="demo">

JavaScript can change the style of an HTML element.

</p>

<script>

function myFunction()

{

x=document.getElementById("demo") // Find the element

x.style.color="#ff0000"; // Change the style

}

</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>

</html>


Validate input

Validate Input

<html>

<body>

<h1>My First JavaScript</h1>

<p>Please input a number.</p>

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

<script>

function myFunction()

{

var x=document.getElementById("demo").value;

if(x==""||isNaN(x))

{

alert("Not Numeric");

}

}

</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>

</html>


A javascript function in head

A JavaScript Function in <head>

<html>

<head><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script>

</head>

<body>

<h1>My Web Page</h1>

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

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

</body>

</html>


External javascripts

External JavaScripts

<html>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

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

<p><strong>Note:</strong> myFunction is stored in an external file called "myScript.js".</p>

<script src="myScript.js"></script>

</body>

</html>


Manipulating html elements

Manipulating HTML Elements

  • To access an HTML element from JavaScript, you can use the document.getElementById(id) method.

    <html>

    <body>

    <h1>My First Web Page</h1>

    <p id="demo">My First Paragraph.</p>

    <script>

    document.getElementById("demo").innerHTML="My First JavaScript";

    </script>

    </body>

    </html>


Warning

Warning

  • Use document.write() only to write directly into the document output.

    <html>

    <body>

    <h1>My First Web Page</h1>

    <p>My First Paragraph.</p>

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

    <script>

    function myFunction()

    {

    document.write("Oops! The document disappeared!");

    }

    </script>

    </body>

    </html>


Declaring creating javascript variables

Declaring (Creating) JavaScript Variables

<html>

<body>

<script>

var pi=3.14;

var person="John Doe";

var answer='Yes I am!';

document.write(pi + "<br>");

document.write(person + "<br>");

document.write(answer + "<br>");

</script>

</body>

</html>


Javascript strings

JavaScript Strings

<html>

<body>

<script>

var carname1="Volvo XC60";

var carname2='Volvo XC60';

var answer1="It's alright";

var answer2="He is called 'Johnny'";

var answer3='He is called "Johnny"';

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

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

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

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

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

</script>

</body>

</html>


Javascript arrays

JavaScript Arrays

<html>

<body>

<script>

vari;

var cars = new Array();

cars[0] = "Saab";

cars[1] = "Volvo";

cars[2] = "BMW";

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

{

document.write(cars[i] + "<br>");

}

</script>

</body>

</html>


Javascript objects

JavaScript Objects

<html>

<body>

<script>

var person={

firstname : "John",

lastname : "Doe",

id : 5566

};

document.write(person.lastname + "<br>");

document.write(person["lastname"] + "<br>");

</script>

</body>

</html>


Creating javascript objects

Creating JavaScript Objects

<html>

<body>

<script>

var person=new Object();

person.firstname="John";

person.lastname="Doe";

person.age=50;

person.eyecolor="blue";

document.write(person.firstname + " is " + person.age + " years old.");

</script>

</body>

</html>


Calling a function with arguments

Calling a Function with Arguments

<html>

<body>

<p>Click the button to call a function with arguments</p>

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>

function myFunction(name,job)

{

alert("Welcome " + name + ", the " + job);

}

</script>

</body>

</html>


Calculate the product of two numbers

Calculate the product of two numbers

<html>

<body>

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

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

<script>

function myFunction(a,b)

{

return a*b;

}

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

</script>

</body>

</html>


Javascript arithmetic operators

JavaScript Arithmetic Operators

<html>

<body>

<p>Given that y=5, calculate x=++y, and display the result.</p>

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

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

<script>

function myFunction()

{

var y=5;

var x=++y;

vardemoP=document.getElementById("demo")

demoP.innerHTML="x=" + x + ", y=" + y;

}

</script>

<p><strong>Note:</strong> Both variables, x and y, are affected.</p>

</body>

</html>


Javascript assignment operators

JavaScript Assignment Operators

<html>

<body>

<p>Given that x=10 and y=5, calculate x%=y, and display the result.</p>

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

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

<script>

function myFunction()

{

var x=10;

var y=5;

x%=y;

vardemoP=document.getElementById("demo")

demoP.innerHTML="x=" + x;

}

</script>

</body>

</html>


Comparison operators

Comparison Operators

<html>

<body>

<p>Given that x=5, return the value of the comparison x!=="5".</p>

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

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

<script>

function myFunction()

{

var x=5;

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

}

</script>

</body>

</html>


Conditional operator

Conditional Operator

<html>

<body>

<p>Click the button to check the age.</p>

Age:<input id="age" value="18" />

<p>Old enough to vote?</p>

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

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

<script>

function myFunction()

{

varage,voteable;

age=document.getElementById("age").value;

voteable=(age<18)?"Too young":"Old enough";

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

}

</script>

</body> </html>


If else if else statement

If...else if...else Statement

<p>Click the button to get a time-based greeting.</p>

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

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

<script>

function myFunction()

{

var x="";

var time=new Date().getHours();

if (time<10)

{

x="Good morning";

}

else if (time<20)

{

x="Good day";

}


If else if else statement1

If...else if...else Statement

else

{

x="Good evening";

}

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

}

</script>


Switch statement

Switch Statement

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

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

<script>

function myFunction()

{

var x;

var d=new Date().getDay();

switch (d)

{

case 0:

x="Today it's Sunday";

break;

case 1:

x="Today it's Monday";

break;

case 2:

x="Today it's Tuesday";

break;


Switch statement cont d

Switch Statement (Cont’d)

case 3:

x="Today it's Wednesday";

break;

case 4:

x="Today it's Thursday";

break;

case 5:

x="Today it's Friday";

break;

case 6:

x="Today it's Saturday";

break;

}

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

}

</script>


The for loop

The For Loop

<html>

<body>

<p>Click the button to loop through the properties of an object named "person".</p>

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

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

<script>

function myFunction()

{

var x;

var txt="";

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

for (x in person)

{

txt=txt + person[x];

}

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

}

</script>

</body> </html>


While statement

While Statement

<html>

<body>

<p>Click the button to loop through a block of as long as <em>i</em> is less than 5.</p>

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

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

<script>

function myFunction()

{

var x="",i=0;

while (i<5)

{

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

i++;

}

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

}

</script>

</body>

</html>


Break statement

Break Statement

<html>

<body>

<script>

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

list:

{

document.write(cars[0] + "<br>");

document.write(cars[1] + "<br>");

document.write(cars[2] + "<br>");

break list;

document.write(cars[3] + "<br>");

document.write(cars[4] + "<br>");

document.write(cars[5] + "<br>");

}

</script>

</body>

</html>


Continue statement

Continue Statement

<html> <body>

<p>Click the button to do a loop which will skip the step where i=3.</p>

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

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

<script>

function myFunction()

{

var x="",i=0;

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

{

if (i==3)

{

continue;

}

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

}

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

}

</script>

</body> </html>


Loop with a break

loop with a break

<p>Click the button to do a loop with a break.</p>

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

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

<script>

function myFunction()

{

var x="",i=0;

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

{

if (i==3)

{

break;

}

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

}

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

}

</script>


Complete js ex

Complete JS Ex.

<script>

function myFunction()

{

var y=document.getElementById("mess");

y.innerHTML="";

try

{

var x=document.getElementById("demo").value;

if(x=="") throw "empty";

if(isNaN(x)) throw "not a number";

if(x>10) throw "too high";

if(x<5) throw "too low";

}

catch(err)

{

y.innerHTML="Error: " + err + ".";

}

}

</script>


Complete js ex cont d

Complete JS Ex. (Cont’d)

<h1>My First JavaScript</h1>

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

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

<button type="button" onclick="myFunction()">Test Input</button>

<p id="mess"></p>


Js email validation

JS Email Validation

<html>

<head>

<script>

function validateForm()

{

var x=document.forms["myForm"]["email"].value;

varatpos=x.indexOf("@");

vardotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

{

alert("Not a valid e-mail address");

return false;

}

}

</script>

</head>


Js email validation1

JS Email Validation

<body>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">

Email: <input type="text" name="email">

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

</form>

</body>

</html>


Field validation

Field Validation

<html>

<head>

<script>

function validateForm()

{

var x=document.forms["myForm"]["fname"].value;

if (x==null || x=="")

{

alert("First name must be filled out");

return false;

}

}

</script>

</head>


Field validation1

Field Validation

<body>

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">

First name: <input type="text" name="fname">

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

</form>

</body>

</html>


  • Login