Scribd Logo
Upload

Welcome to Scribd!

  • JS Lab

    Uploaded by

    Magarsa Bedasa
    26 views5 pages

    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
    26 views5 pages

    JS Lab

    Uploaded by

    Magarsa Bedasa

    Copyright:

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

    Internet Programming I JavaScript Lab Manual

    JavaScript Outputs

    Using window.alert()
    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>


    <p>My first paragraph.</p>

    <script>
    window.alert(“Hello JavaScript!”);
    </script>

    </body>
    </html>

    Using document.write()

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>


    <p>My first paragraph.</p>

    <script>
    document.write(“Hello JavaScript”);
    </script>
    </body>
    </html>

    Using innerHTML
    To access an HTML element, JavaScript can use, the
    document.getElementById(id) method.The id attribute defines the HTML
    element. The innerHTML property defines the HTML content:

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>


    <p>My First Paragraph</p>
    Internet Programming I JavaScript Lab Manual

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

    <script>
    document.getElementById("demo").innerHTML = “Writing in to an html
    element”;
    </script>

    </body>
    </html>

    Using console.log()

    Activate the browser console with F12, and select "Console" in the menu.

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>


    <p>My first paragraph.</p>

    <script>
    console.log(“writing in to the console”);
    </script>

    </body>
    </html>

    JavaScript Objects
    <!DOCTYPE html>

    <html>

    <body>

    <p>Creating and using an object method. </p>

    <p> An object method is a function definition, stored as a property value.


    </p>

    <p id="demo"></p>
    Internet Programming I JavaScript Lab Manual

    <script>

    var person = {

    firstName: "John",

    lastName : "Doe",

    id : 5566,

    fullName : function() {

    return this.firstName + " " + this.lastName;

    };

    document.getElementById("demo").innerHTML = person.fullName();

    </script>

    </body>

    </html>

    JavaScript String Operations


    <!DOCTYPE html>
    <html>
    <body>
    <p id="p1">Please locate where 'locate' occurs!. </p>
    <button onclick="myFunction()">Find Index</button>
    <p id="demo"></p><br/>
    <button onclick="slice()">Try Slice</button>
    <p id="demo2"></p>
    <button onclick="toupper()">To Upper Case</button>
    <p id="demo3"> </p>
    <script>
    function myFunction() {
    var str = document.getElementById("p1").innerHTML;
    var pos = str.indexOf("locate");
    document.getElementById("demo").innerHTML = pos;}
    function slice(){
    var str=document.getElementById("p1").innerHTML;
    var slc=str.slice(7,13);
    Internet Programming I JavaScript Lab Manual

    document.getElementById("demo2").innerHTML = slc;}
    function toupper(){
    var str=document.getElementById("p1").innerHTML;
    document.getElementById("demo3").innerHTML=str.toUpperCase();
    }
    </script>
    </body>
    </html>

    JavaScript Array Operations


    <!DOCTYPE html>
    <html>
    <body>
    <p>The valueOf() method returns an array as a comma separated string. </p>
    <p> fruits = ["Banana", "Orange", "Apple", "Mango"].
    fruits array will be changed to string. </p>
    <button onclick="func1()">value of</button>
    <p id="demo"></p>
    <button onclick="func2()">delete the last item</button>
    <p id="demo2"></p>
    <button onclick="func3()">Add Strawberry to the array</button>
    <p id="demo3"></p>
    <button onclick="func4()">Sort array</button>
    <p id="demo4"></p>
    <script>
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    function func1(){
    document.getElementById("demo").innerHTML = fruits.valueOf();
    }
    function func2() {
    fruits.pop()
    document.getElementById("demo2").innerHTML = fruits;
    }
    function func3(){
    fruits.push("Strawberry");
    document.getElementById("demo3").innerHTML=fruits;
    }
    function func4(){
    fruits.sort();
    document.getElementById("demo4").innerHTML=fruits;
    }
    </script>
    </body>
    </html>
    Internet Programming I JavaScript Lab Manual

    You might also like