Scribd Logo
Upload

Welcome to Scribd!

  • JS Lab 1

    Uploaded by

    Elijah Ibsa
    5 views2 pages

    Original Title

    JS_lab_1

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views2 pages

    JS Lab 1

    Uploaded by

    Elijah Ibsa

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Java script lab work

    Variables are declared with the var keyword;


    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>

    You might also like