1. The document discusses JavaScript variables, data types, arithmetic and logical operators, conditional statements, functions, loops, and DOM manipulation.
2. Key JavaScript concepts covered include declaring variables with var, arithmetic and logical operators, if/else conditional statements, defining functions, for, while, and do-while loops.
3. The document also demonstrates DOM manipulation methods like getElementById to change attributes and content, and createElement to dynamically add new elements.
1. The document discusses JavaScript variables, data types, arithmetic and logical operators, conditional statements, functions, loops, and DOM manipulation.
2. Key JavaScript concepts covered include declaring variables with var, arithmetic and logical operators, if/else conditional statements, defining functions, for, while, and do-while loops.
3. The document also demonstrates DOM manipulation methods like getElementById to change attributes and content, and createElement to dynamically add new elements.
1. The document discusses JavaScript variables, data types, arithmetic and logical operators, conditional statements, functions, loops, and DOM manipulation.
2. Key JavaScript concepts covered include declaring variables with var, arithmetic and logical operators, if/else conditional statements, defining functions, for, while, and do-while loops.
3. The document also demonstrates DOM manipulation methods like getElementById to change attributes and content, and createElement to dynamically add new elements.
1. The document discusses JavaScript variables, data types, arithmetic and logical operators, conditional statements, functions, loops, and DOM manipulation.
2. Key JavaScript concepts covered include declaring variables with var, arithmetic and logical operators, if/else conditional statements, defining functions, for, while, and do-while loops.
3. The document also demonstrates DOM manipulation methods like getElementById to change attributes and content, and createElement to dynamically add new elements.
var varName = expression; var name = “Yonas”; var age = 12; var weight = 65.7; // Java script comment - this is a single line comment for java script. Arithmetic operation: var num = 5 + 4 + (5 %2 ); document.write(num); var a =2*"3"; document.write(a); var name; //undefined value for a name variable. var fname = null; // represents no value or absence of value. Logical operators: if(5<"5.0"){ document.write("True") } else{ document.write("False");} If…else statement: var x = 10; if (x%2 == 0){ document.write("Even");} else{ document.write("Odd"); } Java Script functions: JavaScript functions are defined with the function keyword followed by a name & parenthesis. function functionName () { alert(“How are you?”); } <html> <head><title>Function calling </title> <script type=“text/javascript”> function showAlert(){ alert(“ Hello World”); } </script></head> <body><h3>Click the following button to call the function</h3> <form method=“Post” action=“ “> <input type="button" onclick=" showAlert ()" value="Click"><br><br> <input type="button" onsubmit=" showAlert ()" value="Submit"><br><br> <input type="button" onreset=" showAlert ()" value="Reset"><br><br> <input type="button" onload=" showAlert ()" value="Load"><br><br> <input type="button" onmouseover=" showAlert ()" value="Mouseover"><br><br> <input type="button" onmouseout=" showAlert ()" value="Mouseout"><br></form></body></html> For loop: for(var a = 1; a<10;a++){ document.write(a);} While loop: var i = 0; while(i<10){ document.write(i); i++; } Do while loop: var j = 1; do{ document.write(j); j++;}while(j<10); Prompt box: <html><head><script type="text/javascript">function prompter() { var reply = prompt("Are you sure you want to do this? Who you are?", "") alert ( "Thank you for your response " + reply + "!")}</script></head> <body> <input type="button" onclick="prompter()" value="Submit"> </body> </html> HTML DOM Method: getElementById <html><head><title>Change attribute value</title></head> <body><img id="myImage" src="a.jpg" width="200" height="200"> <script>function change(){document.getElementById("myImage").src="b.jpg"; } </script> <form method="get"><input type="button" onclick="change()" value="Click to change image"> </form></body></html> HTML DOM property (Change value of HTML element) <html> <head><script type="text/javascript"> function sayHello(){ document.getElementById("stud").innerHTML="You will be fourth year on the coming new year."; }</script></head> <body><h3>Click the following button to call the function and change the value.</h3> <form method="Post"><input type="button" onclick="sayHello()" value="Click to change"> </form><h4 id="stud">You are third year Computer Science Students this year.</h4> </body></html> HTML DOM Add element <html><head><title> create element with java script</title> <script>function addElement(){ var add = document.createElement("h3"); var text = document.createTextNode("This HTML element is created by Java Script"); add.appendChild(text); var title = document.getElementById("description"); title.appendChild(add); add.style.backgroundColor = "yellow"; } </script></head> <body onload = "addElement()"> <!--<input type = "button" onclick = "addElement()" Value = "Click me"> --> <div id = "description"><p>Creating HTML element with java script</p></div></body></html>