Web Technology - Old Questions

2. How can you create objects in Javascript? Create a HTML page containing a division with image and its description in paragraph. Write a javascript function to change the value of description in the paragraph during onmouseover and mouseout event on the image.[4+6]

10 marks | Asked in 2076(new)

A javaScript object is an entity having state and behavior (properties and method). For example: car, pen, bike, chair, glass, keyboard, monitor etc. There are different ways to create new objects:

1. By using object literal: The syntax of creating object using object literal is given below:

        object={property1:value1, property2:value2.....propertyN:valueN}

    Example: const person = { name: 'Nisha', age: 22, hobbies: ['reading', 'singing', 'coding']};

2. By creating instance of Object directly (using new keyword): The syntax of creating object directly is given below:

        objectname = new Object(); 

    Example: const person = new Object ( { name: 'Nisha', age: 22, hobbies: ['reading', 'singing', 'coding']});

3. By using an object constructor (using new keyword): Here, we need to create function with arguments. Each argument value can be assigned in the current object by using this keyword.

    Example: 

    function Person(name, age) {

        this.name = name;

        this.age = age;

    }

    const person = new Person("Nisha", 22);


Second part:

index.html

<!DOCTYPE html>

<html>

<head>

    <title>TU</title>

    <script type="text/javascript" src="web.js"></script>

</head>

<body>

  <div>

    <img src="images/tu.jpg" onmouseover="changeText()" onmouseout="defaultText()">

    <div id="description">

      <p>Department of CSIT, Tribhuvan University</p>

    </div>

  </div>

</body>

</html>

web.js

function changeText()

{

    var display = document.getElementById('description');

    display.innerHTML = "";

    display.innerHTML = "Department of Computer Science and Informtion Technology, TU!! (Changed Text)";

}

function defaultText()

{

    var display = document.getElementById('description');

    display.innerHTML = "";

    display.innerHTML = "Department of CSIT, Tribhuvan University";

}