10-Mark Questions

Definition: Presenting XML (Extensible Markup Language) involves transforming and displaying XML data in a user-friendly format, typically on web browsers, using technologies like CSS, XSLT (Extensible Stylesheet Language Transformations), or JavaScript to style and render the structured data.

Purpose:

  • Converts raw XML data into readable formats (e.g., tables, lists).
  • Enhances user experience with styled presentations.
  • Enables dynamic rendering of XML content in web applications.
  • Separates content (XML) from presentation (CSS/XSLT).

Techniques for Presenting XML:

  1. Using CSS: Apply styles directly to XML elements for simple formatting.
    • XML elements are styled like HTML with CSS properties.
    • Limited to static styling; less powerful than XSLT.
  2. Using XSLT: Transform XML into HTML or other formats for complex presentations.
    • XSLT is a language for transforming XML documents.
    • Converts XML to HTML, which browsers render with CSS.
  3. Using JavaScript: Parse XML and dynamically create HTML elements.
    • Uses DOM methods or libraries (e.g., jQuery, AJAX).
    • Suitable for dynamic, interactive presentations.

Complete Example: Presenting an XML file of student data using XSLT to generate an HTML table.

XML File (students.xml):




    
        Sudarshan
        101
        A
    
    
        Priya
        102
        B

XSLT File (students.xsl):






    Student Data
    


    
Student Records

    
            

        

            Name
            ID
            Grade

Output: When `students.xml` is opened in a browser, it displays a styled HTML table with columns for Name, ID, and Grade, showing “Sudarshan, 101, A” and “Priya, 102, B” in alternating row colors.

Steps to Run:

  1. Save both files in the same directory.
  2. Ensure the XML file references the XSLT file.
  3. Open `students.xml` in a modern browser (e.g., Chrome).

Conclusion: Presenting XML using CSS, XSLT, or JavaScript makes data accessible and visually appealing. The XSLT example demonstrates transforming XML into a styled HTML table, a key skill for web applications and exam success.

Definition: The Document Object Model (DOM) is a programming interface provided by browsers that represents an HTML or XML document as a tree structure, where each node is an object (e.g., element, attribute, text), enabling dynamic manipulation using languages like JavaScript.

Key Features:

  • Tree Structure: Represents document as nodes (root: ``, children: ``, ``, etc.).
  • Dynamic Access: Allows scripts to read, modify, add, or delete elements.
  • Cross-Platform: Standardized by W3C, works across browsers.
  • Event Handling: Supports events (e.g., click, keypress) for interactivity.

DOM Components:

  1. Nodes: Types include element (<div>), text, attribute, comment.
  2. Properties: Access node details (e.g., innerHTML, className).
  3. Methods: Manipulate DOM (e.g., getElementById(), appendChild(), removeChild()).
  4. Events: Trigger actions (e.g., onclick, onchange).

DOM Methods:

  • document.getElementById(id): Selects element by ID.
  • document.querySelector(selector): Selects first matching element.
  • element.innerHTML: Gets/sets HTML content.
  • element.setAttribute(name, value): Sets attribute value.
  • element.addEventListener(event, function): Attaches event handler.

Complete Example: Manipulating a webpage to add, modify, and remove list items.

<html>
<head>
    <title>DOM Example</title>
    <style>
        li { padding: 5px; background: #f0f9ff; margin: 2px; }
        button { background: #10b981; color: white; padding: 5px 10px; }
    </style>
</head>
<body>
    <h2>Task List</h2>
    <ul id="taskList">
        <li>Task 1</li>
    </ul>
    <input type="text" id="taskInput" placeholder="Enter task">
    <button onclick="addTask()">Add Task</button>
    <button onclick="removeTask()">Remove Last Task</button>
    <script>
        function addTask() {
            const input = document.getElementById("taskInput");
            const task = input.value.trim();
            if (task === "") {
                alert("Enter a task!");
                return;
            }
            const ul = document.getElementById("taskList");
            const li = document.createElement("li");
            li.textContent = task;
            li.addEventListener("click", function() {
                this.style.textDecoration = "line-through";
            });
            ul.appendChild(li);
            input.value = "";
        }
        function removeTask() {
            const ul = document.getElementById("taskList");
            const lastTask = ul.lastElementChild;
            if (lastTask) {
                ul.removeChild(lastTask);
            } else {
                alert("No tasks to remove!");
            }
        }
    </script>
</body>
</html>

Output: Displays a list with “Task 1”. Users can add tasks via input (e.g., “Task 2”), which appear as list items. Clicking a task strikes it through; the “Remove Last Task” button deletes the last item. Alerts show for empty input or no tasks.

Conclusion: The DOM enables dynamic web page manipulation, as shown in the task list example. Understanding its structure, methods, and event handling is crucial for interactive web development and scoring high in exams.

Definition: Web services are standardized applications or software components that communicate over the internet using protocols like HTTP, enabling interoperability between different systems, platforms, or devices to share data or perform functions.

Characteristics:

  • Interoperability: Works across languages (e.g., Java, Python) and platforms (e.g., Windows, Linux).
  • Standard Protocols: Uses HTTP, SOAP, REST, or gRPC.
  • Loose Coupling: Independent components communicate via defined interfaces.
  • Reusability: Services can be reused in multiple applications.

Types of Web Services:

  1. SOAP (Simple Object Access Protocol):
    • XML-based, uses WSDL for service description.
    • Secure, reliable, suited for enterprise applications.
    • Example: Banking transaction services.
  2. REST (Representational State Transfer):
    • Uses HTTP methods (GET, POST, PUT, DELETE).
    • Lightweight, JSON/XML data, widely used in APIs.
    • Example: Social media APIs (e.g., Twitter API).
  3. GraphQL:
    • Allows clients to request specific data.
    • Flexible, efficient for complex queries.
    • Example: GitHub API.

Components:

  • Service Provider: Hosts the web service.
  • Service Consumer: Client accessing the service.
  • Service Registry: Directory (e.g., UDDI) for discovering services.

Example: A REST API fetching user data.

// Server (Node.js with Express)
const express = require('express');
const app = express();
app.get('/api/users', (req, res) => {
    res.json([
        { id: 1, name: 'Sudarshan' },
        { id: 2, name: 'Priya' }
    ]);
});
app.listen(3000, () => console.log('Server on port 3000'));

// Client (JavaScript)
fetch('http://localhost:3000/api/users')
    .then(response => response.json())
    .then(data => {
        const ul = document.createElement('ul');
        data.forEach(user => {
            const li = document.createElement('li');
            li.textContent = `ID: ${user.id}, Name: ${user.name}`;
            ul.appendChild(li);
        });
        document.body.appendChild(ul);
    })
    .catch(error => console.error('Error:', error));

Output: Displays a list: “ID: 1, Name: Sudarshan” and “ID: 2, Name: Priya” on the webpage.

Conclusion: Web services, like SOAP, REST, and GraphQL, enable seamless data exchange across systems. The REST example illustrates their practical use, ensuring clarity for exam answers and real-world applications.

5-Mark Questions

Definition: XML (Extensible Markup Language) is a flexible, text-based markup language used to store, transport, and structure data in a hierarchical format, designed to be both human-readable and machine-readable.

Key Features:

  • Extensible: Users define custom tags.
  • Hierarchical: Data organized in a tree-like structure.
  • Platform-Independent: Works across systems.
  • Self-Descriptive: Tags describe data content.

Basic Syntax:

  • Declaration: <?xml version="1.0" encoding="UTF-8"?>
  • Root Element: Single top-level element (e.g., <data>).
  • Tags: Paired (<tag>content</tag>), case-sensitive.
  • Attributes: Provide metadata (e.g., <tag id="1">).
  • Nesting: Elements can contain child elements.

Example:

<?xml version="1.0" encoding="UTF-8"?>
<library>
    <book id="101">
        <title>Web Technology</title>
        <author>Sudarshan</author>
        <year>2025</year>
    </book>
    <book id="102">
        <title>JavaScript Basics</title>
        <author>Priya</author>
        <year>2024</year>
    </book>
</library>

Output: Represents a library with two books, each with an ID, title, author, and year, viewable in text editors or browsers.

Uses: Data storage (e.g., configuration files), data exchange (e.g., APIs), document structuring (e.g., XHTML).

Conclusion: XML’s flexibility and structure make it ideal for data representation, as shown in the library example. Mastering its basics is essential for web development and exam success.

Definition: A Document Type Definition (DTD) is a set of rules that defines the structure, elements, attributes, and content allowed in an XML document, ensuring its validity and consistency.

Purpose:

  • Validates XML structure against defined rules.
  • Ensures data consistency across applications.
  • Facilitates data sharing with standardized formats.

Components:

  • Elements: Define tags (e.g., <!ELEMENT name (#PCDATA)>).
  • Attributes: Specify properties (e.g., <!ATTLIST element attr CDATA #REQUIRED>).
  • Entities: Define reusable content (e.g., <!ENTITY name "value">).
  • Content Models: Specify child elements or data (e.g., (child1, child2) for sequence).

Types:

  • Internal DTD: Defined within XML file.
  • External DTD: Defined in a separate .dtd file.

Example: Internal DTD for a book XML.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE book [
    <!ELEMENT book (title, author)>
    <!ELEMENT title (#PCDATA)>
    <!ELEMENT author (#PCDATA)>
    <!ATTLIST book id CDATA #REQUIRED>
]>
<book id="101">
    <title>Web Technology</title>
    <author>Sudarshan</author>
</book>

Output: Defines a valid book with required ID attribute, title, and author elements. Invalid XML (e.g., missing title) would fail validation.

Conclusion: DTD ensures XML document validity, as shown in the book example. Understanding its syntax and use is key for structured data and exam answers.

Definition: Defining data for web applications involves structuring and storing data in formats that are easily accessible, interoperable, and efficient, using technologies like JSON, XML, or databases to support application functionality.

Methods:

  • JSON (JavaScript Object Notation): Lightweight, used in APIs, human-readable.
    • Example: {"name": "Sudarshan", "id": 101}
  • XML: Structured, used for complex data with DTD/Schema validation.
    • Example: <student><name>Sudarshan</name></student>
  • Databases: Store data persistently (e.g., MySQL, MongoDB).
    • Example: Table with columns “id”, “name”.
  • Local Storage/Session Storage: Browser-based storage for client-side data.
    • Example: localStorage.setItem("user", "Sudarshan");

Steps:

  1. Identify data requirements (e.g., user profiles, products).
  2. Choose format (JSON for APIs, XML for documents).
  3. Define structure (e.g., fields, relationships).
  4. Validate data (e.g., JSON Schema, XML DTD).
  5. Store and access (e.g., database queries, AJAX).

Example: Defining student data in JSON for a web app.

<html>
<body>
    <h2>Student Data</h2>
    <ul id="studentList"></ul>
    <script>
        const students = [
            { id: 101, name: "Sudarshan", grade: "A" },
            { id: 102, name: "Priya", grade: "B" }
        ];
        const ul = document.getElementById("studentList");
        students.forEach(student => {
            const li = document.createElement("li");
            li.textContent = `ID: ${student.id}, Name: ${student.name}, Grade: ${student.grade}`;
            ul.appendChild(li);
        });
    </script>
</body>
</html>

Output: Displays a list: “ID: 101, Name: Sudarshan, Grade: A” and “ID: 102, Name: Priya, Grade: B”.

Conclusion: Defining data using JSON, XML, or databases ensures efficient web application functionality, as shown in the JSON example. This approach is vital for exams and practical development.