Scribd Logo
Upload

Welcome to Scribd!

  • 01 135222 048 117300100311 13032024 092503am 22032024 083224am

    Uploaded by

    zainm7032
    2 views9 pages

    Original Title

    01-135222-048-117300100311-13032024-092503am-22032024-083224am

    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
    2 views9 pages

    01 135222 048 117300100311 13032024 092503am 22032024 083224am

    Uploaded by

    zainm7032

    Copyright:

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

    Web Systems & Technologies

    ITL 226

    Lab Journal 6
    Student Name: MUHAMMAD ABDULLAH WASEEM
    Enrolment No: 01-135222-048
    Class and Section : BS(IT) -5A

    Department of Computer Science


    BAHRIA UNIVERSITY, ISLAMABAD
    Lab # 6: JavaScript

    Objectives:
     To Learn how to apply JavaScript arrays and objects.

    Tools Used:

    Submission Date:

    Evaluation: Signatures of Lab Engineer:


    Task # 1:

    Using JavaScript print your name, University, Degree and Occupation as paragraph and on console.
    Procedure/Program:

    1) <!DOCTYPE html>

    <html>

    <body>

    <script>

    document.write("<p>Name: Muhammad Abdullah Waseem</p>");

    document.write("<p>University: BUIC</p>");

    document.write("<p>Degree: IT</p>");

    document.write("<p>Occupation: Student</p>");

    </script>

    </body>

    </html>

    2)

    <!DOCTYPE html>

    <html>

    <body>

    <script>

    console.log("Name: Muhammad Abdullah Waseem");

    console.log("University: BUIC");

    console.log("Degree: IT");

    console.log("Occupation: Student");
    </script>

    </body>

    </html>

    Task # 2:

    Write JS code to get the length of a JavaScript array and length of Javascript object.
    Procedure/Program:

    1) const fruits = ["apple", "banana", "orange", "grape"];

    const arrayLength = fruits.length;

    console.log(`Array length: ${arrayLength}`);

    2) const person = {

    name: "John Doe",

    age: 30,

    occupation: "Software Engineer"

    };

    const objectKeys = Object.keys(person);

    const objectLength = objectKeys.length;


    console.log(`Object length: ${objectLength}`);

    Task # 3:

    Write JS code to alphabetically sort, concatenate and add elements to an array in Javascript.
    Procedure/Program:

    1) const fruits = ["banana", "apple", "orange", "grape"];

    fruits.sort((a, b) => a.localeCompare(b));


    console.log(fruits);

    2) const fruits1 = ["apple", "banana", "orange"];

    const fruits2 = ["grape", "mango", "pineapple"];

    const allFruits = fruits1.concat(fruits2);

    console.log(allFruits);

    Task # 4:

    Write JS code showing coordinates (in a div/textbox/any container) of mouse pointer changing its
    position in browser. (Hint: Use Mouse Event for it).
    Procedure/Program:

    HTML:

    <!DOCTYPE html>

    <html>

    <body>

    <h2>Mouse Pointer Coordinates</h2>

    <p>Move the mouse over the canvas to see the coordinates.</p>

    <canvas id="canvas" width="500" height="200" style="border:1px solid #d3d3d3;">

    Your browser does not support the HTML5 canvas tag.

    </canvas>

    </body>

    </html>
    JAVASCRIPT:

    const canvas = document.getElementById('canvas');

    const ctx = canvas.getContext('2d');

    canvas.addEventListener('mousemove', function(event) {

    const x = event.clientX;

    const y = event.clientY;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillText(`X: ${x}, Y: ${y}`, 10, 20);

    });

    Task # 5:

    Suppose you have following paragraph. Add following CSS attributes to modify the paragraph using
    JavaScript.

    <p id="demo">Hello World!</p>

    <script>

    // Add code here

    </script>

    a. Use the HTML DOM to add an orange background color to <p>.

    b. Use the HTML DOM to left-align the text of <p>.

    c. Use the HTML DOM to change the text size of <p> to 30 pixels.

    d. Use the HTML DOM to hide / unhide the <p> element when a “toggle” button is clicked.

    Procedure/Program:
    HTML:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    p{

    text-align: center;

    font-size: 20px;

    </style>

    </head>

    <body>

    <p id="myParagraph">This is a paragraph.</p>

    <button onclick="toggleParagraph()">Toggle</button>

    <script src="script.js"></script>

    </body>

    </html>

    JAVASCRIPT:

    const para = document.getElementById('myParagraph');


    // a. Use the HTML DOM to add an orange background color to <p>.

    para.style.backgroundColor = 'orange';

    // b. Use the HTML DOM to left-align the text of <p>.

    para.style.textAlign = 'left';

    // c. Use the HTML DOM to change the text size of <p> to 30 pixels.

    para.style.fontSize = '30px';

    // d. Use the HTML DOM to hide / unhide the <p> element when a “toggle” button is clicked.

    function toggleParagraph() {

    if (para.style.display === 'none') {

    para.style.display = 'block';

    } else {

    para.style.display = 'none';

    You might also like