Tribhuwan University

Institute of Science and Technology

2076

Bachelor Level / Third Year / Fifth Semester / Science

B.Sc in Computer Science and Information Technology (CSC329)

(Web Technology)

Full Marks: 60

Pass Marks: 24

Time: 3 Hours

Candidates are required to give their answers in their own words as for as practicable.

The figures in the margin indicate full marks.

Section A

Long Answers Questions

Attempt any TWO questions.
[2*10=20]
1.
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.[10]

How to Create Objects in JavaScript + Event Handling Example

Ways to Create Objects in JavaScript

An object in JavaScript is a collection of key-value pairs (properties and methods) that represents a real-world entity.

There are several ways to create objects in JavaScript:


A. Using Object Literal

The simplest and most common way to create an object.

var student = {
    name: "John",
    age: 20,
    display: function() {
        document.write(this.name);
    }
};

B. Using new Object()

Creates an empty object and adds properties one by one.

var student = new Object();
student.name = "John";
student.age = 20;

C. Using Constructor Function

A reusable template to create multiple objects of the same type.

function Student(name, age) {
    this.name = name;
    this.age = age;
}
var s1 = new Student("John", 20);
var s2 = new Student("Alice", 22);

D. Using Object.create() Method

Creates a new object with a specified prototype object.

var person = { greet: function() { return "Hello"; } };
var student = Object.create(person);
student.name = "John";

E. Using ES6 Class Syntax

class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
var s1 = new Student("John", 20);

HTML Page with onmouseover and onmouseout Events

The onmouseover event fires when the mouse pointer enters an element, and onmouseout fires when it leaves.

<!DOCTYPE html>
<html>
<head>
    <title>Image Description Changer</title>

    <script type="text/javascript">
        function changeDescription() {
            document.getElementById("desc").innerHTML = 
                "You are hovering over the image! This is a beautiful flower.";
        }

        function restoreDescription() {
            document.getElementById("desc").innerHTML = 
                "This is an image of a flower. Move your mouse over it to know more.";
        }
    </script>

</head>
<body>

    <div id="myDiv" style="text-align:center; border:1px solid black; padding:20px;">

        <img src="flower.jpg" 
             alt="Flower Image" 
             width="300" height="200"
             onmouseover="changeDescription()" 
             onmouseout="restoreDescription()" />

        <p id="desc">
            This is an image of a flower. Move your mouse over it to know more.
        </p>

    </div>

</body>
</html>

Explanation of the Code

  • Division (<div>) — Contains the image and paragraph together as a block
  • Image (<img>) — Displays the flower image with event attributes attached
  • onmouseover="changeDescription()" — Calls the function when mouse enters the image
  • onmouseout="restoreDescription()" — Calls the function when mouse leaves the image
  • document.getElementById("desc") — Accesses the paragraph element by its ID
  • .innerHTML — Changes the text content of the paragraph dynamically

Conclusion

JavaScript provides multiple ways to create objects (literal, constructor, Object.create(), class). Combined with DOM manipulation and event handling (onmouseover, onmouseout), JavaScript enables dynamic and interactive web pages where content changes based on user actions.

2.
How positioning of HTML elements can be done using CSS? Create a HTML page with a div with some content and two paragraph with some contents having id p1 and p2. Write external CSS for the div tag having fixed position with border style solid and width 2px. the p1 should have relative position. The font type of p1 should be Arial and color should be red. The p2 have absolute position with top 0px and left 200px.[10]
3.
Create web form for book search catalog. The form should contain a dropdown defining search type, a text box for search keyword, a radio button for download type true or false, now write PHP script to store data from the form into database table and also retrive the results from stored table in a new page.[10]
Section B

Short Answers Questions

Attempt any Eight questions.
[8*5=40]
4.
What is HTTP protocol? Define HTTP Request and Response. [5]
5.
How jQuery animate can be used to create custom animation? Write syntax with sample script. [5]
6.
What is the use of JSON? How can you parse a JSON, illustrate with an example. [5]
7.
What is XML? Create an XML file containing records of employee having elements of simple and complex types. [5]
8.
How XSD of a XML file is created? Illustrate with an example. [5]
9.
How can you define variables in PHP? Define any two variable of string types and display their results after concatenation. [5]
10.
How web pages can be made responsive using media queries? Illustrate with an example. [5]
11.
Create a HTML page with tags header, article and footer. Insert alink containing mail to info@iost.edu.np in the footer tag. Set the keywords 'iost', 'csit' using Meta tag in the page. [5]
12.
Why inline frames are used? Create a HTML page containing iframe within a paragraph. The iframe have source to http://www.tuiost.edu.np and its height and width are 200px and 400px respectively. [5]