Scribd Logo
Upload

Welcome to Scribd!

  • 10 views

    WE Lab 5 Huzaifa 015

    Uploaded by

    Huzaifa Arshad
    This lab journal summarizes Huzaifa Arshad's work on an introduction to JavaScript lab. The lab involved 3 tasks - 1) using JavaScript to dynamically generate a multiplication table, 2) creating a sphere volume calculator using JavaScript, and 3) adding click handlers to buttons. The tasks demonstrated understanding of JavaScript variables, loops, DOM manipulation, and event handling. Completing the tasks helped achieve the objectives of learning about JavaScript, loops, variables, and DOM manipulation.

    Copyright:

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

    You might also like

    WE Lab 5 Huzaifa 015

    Uploaded by

    Huzaifa Arshad
    10 views7 pages
    This lab journal summarizes Huzaifa Arshad's work on an introduction to JavaScript lab. The lab involved 3 tasks - 1) using JavaScript to dynamically generate a multiplication table, 2) creating a sphere volume calculator using JavaScript, and 3) adding click handlers to buttons. The tasks demonstrated understanding of JavaScript variables, loops, DOM manipulation, and event handling. Completing the tasks helped achieve the objectives of learning about JavaScript, loops, variables, and DOM manipulation.

    Original Description:

    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
    This lab journal summarizes Huzaifa Arshad's work on an introduction to JavaScript lab. The lab involved 3 tasks - 1) using JavaScript to dynamically generate a multiplication table, 2) creating a sphere volume calculator using JavaScript, and 3) adding click handlers to buttons. The tasks demonstrated understanding of JavaScript variables, loops, DOM manipulation, and event handling. Completing the tasks helped achieve the objectives of learning about JavaScript, loops, variables, and DOM manipulation.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    10 views7 pages

    WE Lab 5 Huzaifa 015

    Uploaded by

    Huzaifa Arshad
    This lab journal summarizes Huzaifa Arshad's work on an introduction to JavaScript lab. The lab involved 3 tasks - 1) using JavaScript to dynamically generate a multiplication table, 2) creating a sphere volume calculator using JavaScript, and 3) adding click handlers to buttons. The tasks demonstrated understanding of JavaScript variables, loops, DOM manipulation, and event handling. Completing the tasks helped achieve the objectives of learning about JavaScript, loops, variables, and DOM manipulation.

    Copyright:

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

    Web Engineering

    LAB JOURNAL# 05

    Name: Huzaifa Arshad


    Enrollment No: 01-131182-015
    Class: BSE-6A
    Lab Instructor: Aamir Suhail
    Date Submitted: March 29, 2021

    DEPARTMENT OF SOFTWARE ENGINEERING

    BAHRIA UNIVERSITY
    ISLAMABAD CAMPUS
    Problem Statement:
    Introduction to the JavaScript

    Introduction:
    JavaScript is a language that we used to design the websites

    Objectives:
    To know about the JavaScript, loops, variables, how to manipulate DOM.

    Tools Used:
    Visual Studio Code
    Lab Tasks

    Task 1:
    Design the website.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="task1.css">
        <title>Task 1</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <td>N</td>
                    <td>N*10</td>
                    <td>N*100</td>
                    <td>N*1000</td>
                </tr>
            </thead>
            <tbody id="table_body">
            </tbody>
        </table>
        <script src="task1.js"></script>
    </body>
    </html>

    CSS Code:
    table,th,td{
        border:1px solid gray;
    }
    JS Code:
    window.onload=()=>{
        var tbody=document.getElementById('table_body');
        for(let i=1;i<=6;i++){
            var tr=`<tr>
            <td>`+i+`</td>
            <td>`+i*10+`</td>
            <td>`+i*100+`</td>
            <td>`+i*1000+`</td>
            </tr>`;
        tbody.innerHTML+=tr;
        }
    }

    Output Screenshot:
    Task 2:
    Design the website.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="task2.css">
        <title>Task 2</title>
    </head>
    <body>
        <div class="sphere_calculator">
            <h1>Sphere Volume Caluclator</h1>
            <label for="radius" id="radius_label">Enter Radius</label>
            <input type="number" id="radius"><br><br>
            <button type="button" id="btn_radius" onClick="sphereVolume();">Calcualt
    e</button>
            <p id="result">Sphere of Volume is: </p>
        </div>
        <script src="task2.js"></script>
    </body>
    </html>

    JS Code:
    'use strict'
    function sphereVolume(){
        let radius=document.getElementById('radius').value;
        let result=document.getElementById('result');
        let sphere=(4.0/3.0)*Math.PI*Math.pow(radius,3);
        result.innerHTML= `Sphere of Volume is: `+sphere;
        document.getElementById('radius').value='';
    };
    Output Screenshot:

    Task 3:
    Design the website.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Task 3</title>
    </head>
    <body>
        <div id="display">
            <h1>WE Lab Task 3</h1>
            <button onClick="myFunction();">Click Me!</button>
            <button onClick="location.reload();">Reload</button>
        </div>
        <script src="task3.js"></script>
    </body>
    </html>

    Output Screenshot:

    Conclusion:
    In this lab, we have learned about the JavaScript, How to manipulate DOM using JavaScript.

    You might also like