Tribhuvan University

Faculty of Management

Office of the Dean

2080 BS / Regular Examination

Course: ITM 202 · Web Programming I

Level: Bachelor of Information Technology Management (BITM / BIM) (BITM / BIM) · Semester 3

Full Marks: 60

Time: 3 hrs.

Candidates are required to give their answers in their own words as far as practicable. Figures in the margin indicate full marks.

What is DNS and why is it used?

[1]
View model solution
What is DNS and Why is it Used?

The Domain Name System (DNS) serves as the phonebook of the Internet. It translates human-friendly domain names (e.g., fomeed.edu.np) into machine-readable numerical IP addresses (e.g., 192.0.2.1), allowing browsers to locate and load Internet resources.
Differentiate between HTML elements and tags.

[1]
View model solution
HTML Elements vs. Tags
- HTML Tag: The individual syntax markers enclosed in angle brackets used to begin or end an element (e.g., <p> is an opening tag and </p> is a closing tag).
- HTML Element: The complete unit consisting of the start tag, any attributes, inner content, and end tag (e.g., <p class="lead">Hello World</p>).
What is the difference between relative and absolute URLs?

[1]
View model solution
Relative vs. Absolute URLs
- Absolute URL: Contains the complete Internet address including protocol and domain (e.g., https://example.com/images/logo.png).
- Relative URL: Points to a file relative to the current directory or site root (e.g., images/logo.png or /about).
What is the use of meta tags in HTML?

[1]
View model solution
Use of Meta Tags in HTML

Meta tags provide structured metadata about the HTML document inside the <head> tag, configuring character sets (UTF-8), responsive viewports, SEO descriptions, and author information.
List the different types of CSS selectors.

[1]
View model solution
Different Types of CSS Selectors
1. Universal Selector (*)
2. Element/Type Selector (p, h1)
3. Class Selector (.btn)
4. ID Selector (#header)
5. Attribute Selector (input[type="text"])
6. Pseudo-classes & Pseudo-elements (:hover, ::before)
What is CSS box model?

[1]
View model solution
CSS Box Model

The CSS Box Model is a conceptual container wrapping every HTML element, composed from inside out of four sequential layers: Content, Padding, Border, and Margin.
What is the difference between client-side and server-side scripting?

[1]
View model solution
Client-Side vs. Server-Side Scripting

Client-side scripting (JavaScript) runs locally inside the user’s browser for UI events and interactivity; server-side scripting (PHP/Node) executes on the backend server for business logic and database access.
How do you declare variables using let, const, and var in JavaScript?

[1]
View model solution
Declaring Variables: let, const, and var
- var: Function-scoped, hoisted, re-declarable (legacy).
- let: Block-scoped, re-assignable.
- const: Block-scoped, immutable variable binding (cannot be reassigned).
What is DOM in JavaScript?

[1]
View model solution
Document Object Model (DOM)

The DOM is an object-oriented, in-memory tree representation of the HTML document created by the browser, allowing programming languages like JavaScript to dynamically read, modify, add, or delete nodes and styles.
What is an event handler in JavaScript?

[1]
View model solution
Event Handler in JavaScript

An event handler is a callback function invoked automatically by the browser when a specific event (such as click, submit, keydown, or load) occurs on a target DOM element.

Explain the HTTP request and response cycle between client and web server.

[4]
View model solution
HTTP Request and Response Cycle
1. DNS Lookup: Browser resolves domain name into the destination server IP address.
2. TCP 3-Way Handshake & TLS Negotiation: Client initiates connection on port 80/443.
3. HTTP Request: Client transmits HTTP verb, path, headers, and optional body.
4. Server Processing: Web server processes request, routes to handler/database, and generates output.
5. HTTP Response: Server sends back status code (200 OK), headers, and document payload.
6. Browser Rendering: Browser parses HTML, constructs DOM/CSSOM, and paints pixels to screen.

Create an HTML form for student registration with validation for email, password, and date of birth.

[4]

View model solution

Student Registration Form with Validation

<form action="/register" method="POST">
  <p>
    <label for="email">Student Email:</label><br>
    <input type="email" id="email" name="email" required placeholder="student@tu.edu.np">
  </p>
  <p>
    <label for="password">Password (min 8 chars):</label><br>
    <input type="password" id="password" name="password" minlength="8" required>
  </p>
  <p>
    <label for="dob">Date of Birth:</label><br>
    <input type="date" id="dob" name="dob" max="2008-01-01" required>
  </p>
  <button type="submit">Complete Registration</button>
</form>

Differentiate between CSS Grid and Flexbox with code snippets.

[4]
View model solution
CSS Grid vs. Flexbox
- Flexbox (1-Dimensional): Designed for layout along a single axis (either row or column).
  .nav-bar { display: flex; justify-content: space-between; align-items: center; }
- CSS Grid (2-Dimensional): Designed for simultaneous control of both rows and columns.
  .photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

Write a JavaScript function to validate a contact form and verify phone number format.

[4]

View model solution

JavaScript Contact Form Phone Validation

function validateContactForm(e) {
    const phoneInput = document.getElementById("phone").value.trim();
    // Validates 10-digit mobile number starting with 97 or 98 (standard in Nepal)
    const phoneRegex = /^(98|97)\d{8}$/;

    if (!phoneRegex.test(phoneInput)) {
        alert("Invalid phone number! Must be a 10-digit number starting with 98 or 97.");
        e.preventDefault();
        return false;
    }
    return true;
}

Explain CSS media queries and how they are used for responsive web design.

[4]

View model solution

CSS Media Queries for Responsive Web Design

Media queries apply conditional CSS rule blocks depending on device viewport dimensions:

/* Base Desktop Layout (3 columns) */
.container { display: grid; grid-template-columns: repeat(3, 1fr); }

/* Tablet Breakpoint (<= 768px: 2 columns) */
@media (max-width: 768px) {
  .container { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile Breakpoint (<= 480px: 1 stacked column) */
@media (max-width: 480px) {
  .container { grid-template-columns: 1fr; }
}

Describe event bubbling and event capturing in JavaScript.

[4]
View model solution
Event Bubbling vs. Event Capturing
1. Capturing Phase (Trickling): The event travels down from window through ancestors towards the target element.
2. Target Phase: The event arrives at the clicked target element.
3. Bubbling Phase: The event bubbles up from the target element through all parent ancestor nodes to window.
Use addEventListener(type, listener, true) for capturing, or default false for bubbling. Call event.stopPropagation() to prevent bubbling.

Design a complete responsive landing page layout using semantic HTML5 and CSS3 (header, navigation, hero banner, features grid, and footer).

[10]

View model solution

Complete Responsive Landing Page Layout (HTML5 & CSS3)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BITM Academic Portal</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
    body { background: #fdfbf7; color: #1e293b; line-height: 1.6; }
    header { background: #ffffff; border-bottom: 1px solid #e2e8f0; padding: 16px 24px; }
    .nav-container { max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center; }
    .logo { font-size: 22px; font-weight: bold; color: #0f172a; }
    .nav-links { display: flex; gap: 20px; list-style: none; }
    .nav-links a { text-decoration: none; color: #475569; font-weight: 500; }
    .hero { text-align: center; padding: 60px 20px; background: #faf5ff; }
    .hero h1 { font-size: 36px; margin-bottom: 16px; color: #581c87; }
    .features-grid { max-width: 1200px; margin: 40px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; padding: 0 20px; }
    .card { background: #ffffff; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    footer { background: #0f172a; color: #cbd5e1; text-align: center; padding: 24px; margin-top: 40px; }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hero h1 { font-size: 28px; }
    }
  </style>
</head>
<body>
  <header>
    <div class="nav-container">
      <div class="logo">Paper Khoj BITM</div>
      <ul class="nav-links">
        <li><a href="#courses">Courses</a></li>
        <li><a href="#papers">Papers</a></li>
        <li><a href="#solutions">Solutions</a></li>
      </ul>
    </div>
  </header>
  <main>
    <section class="hero">
      <h1>Tribhuvan University BITM Past Papers</h1>
      <p>Official verified question archives and academic solutions.</p>
    </section>
    <section id="courses" class="features-grid">
      <article class="card">
        <h3>ITM 201 Architecture</h3>
        <p>Microprocessor 8085, assembly language, and computer organization.</p>
      </article>
      <article class="card">
        <h3>ITM 202 Web Tech I</h3>
        <p>HTML5 semantics, responsive CSS Grid, and dynamic JavaScript DOM.</p>
      </article>
      <article class="card">
        <h3>ITM 252 Data Structures</h3>
        <p>Algorithms, binary trees, AVL balancing, and graph traversals.</p>
      </article>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 Tribhuvan University Faculty of Management Archive. Unofficial & Independent.</p>
  </footer>
</body>
</html>

Write a JavaScript program that manipulates the DOM dynamically: creating list elements, deleting items on click, and updating item count.

[10]

View model solution

Dynamic DOM Manipulation Program in JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Task List</title>
  <style>
    .task-item { display: flex; justify-content: space-between; padding: 8px; margin: 4px 0; background: #e2e8f0; border-radius: 4px; }
    .del-btn { background: #ef4444; color: white; border: none; padding: 4px 8px; cursor: pointer; border-radius: 3px; }
  </style>
</head>
<body>
  <h2>Course Topic Checklist</h2>
  <input type="text" id="taskInput" placeholder="Enter topic...">
  <button id="addBtn">Add Topic</button>
  <p>Total Items: <span id="count">0</span></p>
  <ul id="taskList"></ul>

  <script>
    const taskInput = document.getElementById("taskInput");
    const addBtn = document.getElementById("addBtn");
    const taskList = document.getElementById("taskList");
    const countSpan = document.getElementById("count");

    function updateCount() {
      countSpan.textContent = taskList.children.length;
    }

    addBtn.addEventListener("click", () => {
      const text = taskInput.value.trim();
      if (!text) return;

      // 1. Create <li> element
      const li = document.createElement("li");
      li.className = "task-item";

      const span = document.createElement("span");
      span.textContent = text;

      // 2. Create Delete button
      const delBtn = document.createElement("button");
      delBtn.className = "del-btn";
      delBtn.textContent = "Delete";
      delBtn.addEventListener("click", () => {
        li.remove();
        updateCount();
      });

      li.appendChild(span);
      li.appendChild(delBtn);
      taskList.appendChild(li);

      taskInput.value = "";
      updateCount();
    });
  </script>
</body>
</html>

Explain JSON and AJAX. Write an asynchronous JavaScript code using fetch API to retrieve and display user data from a remote endpoint.

[10]

View model solution

Asynchronous JavaScript: Fetch API and JSON

JSON (JavaScript Object Notation) is the standard data serialization format, while AJAX (Asynchronous JavaScript and XML) allows web applications to exchange data with a remote server in the background without refreshing the page.

Modern Implementation with `fetch()` and `async/await`:

<!DOCTYPE html>
<html>
<body>
  <h2>Remote Users Directory</h2>
  <button id="loadBtn">Fetch Users</button>
  <div id="status"></div>
  <ul id="userList"></ul>

  <script>
    async function loadUserData() {
      const statusDiv = document.getElementById("status");
      const userList = document.getElementById("userList");

      statusDiv.textContent = "Loading data from remote API...";
      userList.innerHTML = "";

      try {
        // Fetch JSON from REST API endpoint
        const response = await fetch("https://jsonplaceholder.typicode.com/users");

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const users = await response.json();
        statusDiv.textContent = `Successfully loaded ${users.length} users:`;

        // Render dynamic DOM items
        users.forEach(user => {
          const li = document.createElement("li");
          li.innerHTML = `<strong>${user.name}</strong> (${user.email}) - <em>${user.company.name}</em>`;
          userList.appendChild(li);
        });

      } catch (error) {
        statusDiv.textContent = "Failed to load data: " + error.message;
        statusDiv.style.color = "red";
      }
    }

    document.getElementById("loadBtn").addEventListener("click", loadUserData);
  </script>
</body>
</html>

Web Programming I

Syllabus