1 / 36

JavaScript Examples

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>

oren
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Examples By: ErfanAghasian

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  22. 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"; }

  23. If...else if...else Statement else { x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script>

  24. 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;

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

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

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

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

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

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

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

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

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

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

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

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

More Related