Scribd Logo
Upload

Welcome to Scribd!

  • Lab5 JavaScript Intro - HTML PDF

    Uploaded by

    funny videos
    9 views3 pages

    Original Title

    Lab5_JavaScript_Intro.html.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views3 pages

    Lab5 JavaScript Intro - HTML PDF

    Uploaded by

    funny videos

    Copyright:

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

    06/03/2019 Lab5_JS_Intro.

    html

    LAB 5: WORKING WITH JAVAS CRIP T

    In this lab we will create some simple HTML pages that use JavaScript to implement dynamic behaviour in the
    web page.

    TASK 1: CHANGING HTM L E L E M E NT S CONT E NT, AT T R I B U T E A N D S T Y L E


    In this task you will create a simple HTML page, which has a heading element, an image element, and a
    paragraph element. The page will show three buttons which the user can click to change each of these three
    elements:

    The first button replaces the content of the heading with the current date and time
    The second button changes the image from triangle to circle
    The third button changes the paragraph alignment from left to right

    This is how the page looks when first loaded:

    W 1 :

    W 2 :

    file:///C:/Users/bisha/Desktop/iict/itec-518-web-systems-technologies/labs/lab5/Lab5_JS_Intro.html 1/3
    06/03/2019 Lab5_JS_Intro.html

    W 3 :

    E T 1

    <!DOCTYPE html>
    <html>
    <body>

    <h2 id="timestamp">Today's date and time</h2>

    <img id="myimg" src="triangle.png" />

    <p id="mypara" style="max-width:400px">This is a paragraph. </p>

    <button type="button"
    onclick="document.getElementById('timestamp').innerHTML = Date()">
    Show datetime in heading</button><br>

    <button onclick="document.getElementById('myimg').src='circle.png';">
    Change image</button><br>

    <button onclick="document.getElementById('mypara').style.textAlign='right';">

    file:///C:/Users/bisha/Desktop/iict/itec-518-web-systems-technologies/labs/lab5/Lab5_JS_Intro.html 2/3
    06/03/2019 Lab5_JS_Intro.html

    Right align paragraph</button>

    </body>
    </html>

    TASK 2: MAKING A SIMP L E ADDIT ION CAL CUL ATOR

    In this task you will create an HTML page which allows the user to enter two numbers and display their sum.
    We'll use JavaScript functions to implement this task.

    Output for Task 1 when the page is first loaded:

    Output for Task 1 when user enters two numbers and clicks the button:

    E T 1

    <!DOCTYPE html>
    <html>

    <head>
    <script>
    function add(field1id, field2id) {
    var a = document.getElementById(field1id).value;
    var b = document.getElementById(field2id).value;

    return parseInt(a) + parseInt(b);


    }

    function showResult(elementId, value) {


    document.getElementById(elementId).innerHTML = value;
    }
    </script>
    </head>

    <body>

    Number 1: <input id="num1" /><br>


    Number 2: <input id="num2" /><br>
    Result: <div id="result">Show result here ...</div>
    <button onclick="showResult('result', add('num1', 'num2')); ">Add and show result</button>

    </body>
    </html>

    file:///C:/Users/bisha/Desktop/iict/itec-518-web-systems-technologies/labs/lab5/Lab5_JS_Intro.html 3/3

    You might also like