javascript examples
Download
Skip this Video
Download Presentation
JavaScript Examples

Loading in 2 Seconds...

play fullscreen
1 / 36

JavaScript Examples - PowerPoint PPT Presentation


  • 111 Views
  • Uploaded on

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>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' JavaScript Examples ' - oren


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>

ad