WEB TECHNOLOGIES
By
K.Ramesh
Assistant Professor
Dept. of Computer Science and Engineering
Aditya University
Surampalem
UNIT - 2
Javascript and XML
JAVASCRIPT
• JavaScript is a high-level, interpreted programming language.
• It is used to create dynamic and interactive web pages.
• JavaScript runs in the browser and enables client-side scripting.
• It is an essential part of web technologies alongside HTML and CSS.
• JavaScript can also be used for server-side development using environments like Node.js.
• It supports object-oriented, functional, and imperative programming paradigms.
• JavaScript is widely used in modern frameworks such as React, Angular, and Vue.js.
• It allows asynchronous programming using Promises and async/await.
Example : console.log("Welcome to JavaScript!");
Web Technologies K.Ramesh, Assistant Professor
Primitives
JavaScript has six primitive data types:
• String – Represents textual data.
Example: let name = "John";
• Number – Represents numeric values (both integer and floating-point).
Example: let age = 25;
• Boolean – Represents true or false values.
Example: let isStudent = true;
• Undefined – A variable declared but not assigned a value.
Example: let x;
console.log(x); // undefined
• Null – Represents an intentional absence of value.
Example: let y = null;
• Symbol – Unique and immutable primitive value used for object properties. Fig: JS Primitives
Example: let sym = Symbol("id");
Web Technologies K.Ramesh, Assistant Professor
Variables
• Variables store data and can be declared using var, let, or const.
• Types of Variable Declarations:
◦ var – Function-scoped, can be redeclared and reassigned.
• Example: var x = 10;
◦ let – Block-scoped, cannot be redeclared but can be reassigned.
• Example: let y = 20;
◦ const – Block-scoped, cannot be redeclared or reassigned.
• Example: const z = 30;
Key Differences:
• var is function-scoped, while let and const are block-scoped.
• const values cannot be changed after assignment.
Web Technologies K.Ramesh, Assistant Professor
Operations and Expressions
• Operations: An operation is a process that performs a
calculation or action on data using operators.
Type of Operations:
1. Arithmetic Operations
Example: console.log(10 + 5); // 15
2. Relational Operations
Example: console.log(10 > 5); // true
3. Logical Operations
Example: console.log((5 > 3) && (10 > 2)); // true
4. Bitwise Operations
Example: console.log(5 & 3); // 1 (Binary: 101 & 011)
5. Assignment Operations
Example: let x = 5; x += 5; console.log(x); // 10
6. Ternary Operation
Example: let result = (a > b) ? a : b;
• Expressions: A combination of variables, constants, and
operators that produce a value.
Example: let result = 10 + 5 * 2; // result = 20
Web Technologies K.Ramesh, Assistant Professor
Control Statements
• Control statements direct the flow of execution in a program.
Types of Control Statements:
1. Conditional Statements (Decision-Making)
if, if-else, switch
Ex: let age = 18;
if (age >= 18) console.log("Eligible to vote");
else console.log("Not eligible");
2. Looping Statements (Iteration)
for, while, do-while,for...in
In JavaScript, for...in is used to iterate over the keys
(properties) of an object.
Ex: let person = { name: "John", age: 25, city: "New
York" };
for (let key in person) {
console.log(key + ": " + person[key]);
}
3. Jump Statements (Flow Control)
break, continue
Ex: for (let i = 1; i <= 5; i++) {
if (i === 3) continue;
console.log(i);
Web Technologies K.Ramesh, Assistant Professor
}
Functions
• A function is a block of reusable code that performs a specific task.
Types of Functions in JavaScript:
1. Function Declaration (Named Function)
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Devika")); // Output: Hello, Devika
2. Function Expression (Anonymous Function)
let add = function(a, b) {
return a + b;
};
console.log(add(5, 3)); // Output: 8
3. Arrow Function (ES6)
let multiply = (a, b) => a * b;
console.log(multiply(4, 2)); // Output: 8
4. Immediately Invoked Function Expression (IIFE)
(function() {
console.log("This runs immediately!");
})();
• Functions improve code reusability and modularity.
Web Technologies K.Ramesh, Assistant Professor
Objects
1. Definition: An object is a collection of properties and methods that represent real-world entities.
2. Classification: Objects are classified into Predefined (Built-in) and User-Defined objects.
3. Predefined Objects: JavaScript provides built-in objects like String, Number, Array, Date, Math, Random
4. User-Defined Objects: Developers can create custom objects using functions, classes, and object
literals.
5.️Properties: Objects store key-value pairs, where each key is a property name, and the value is its data.
6.️Methods: Functions inside objects that perform actions.
🔹 Example: person.getName = function() { return this.name; };
7.️Accessors: get and set methods allow controlled access to properties.
🔹 Example: get fullName() { return this.first + " " + this.last; }
8.️Constructors: Special functions (function or class) used to create multiple instances of objects.
Example: function Car(brand) { this.brand = brand; }
•WebObjects are essential for structuring and
Technologies managing
K.Ramesh, data
Assistant in JavaScript programs!
Professor
Objects
Predefined (Built-in) Objects: Predefined (built-in) objects in JavaScript are ready-to-use objects provided by
the language to handle common programming tasks like working with strings, numbers, arrays, dates,
mathematical calculations, regular expressions, and random values.
Web Technologies K.Ramesh, Assistant Professor
Objects
User Defined Objects: User-defined objects in JavaScript are objects created by developers using functions,
classes, or object literals to store and manage data efficiently. Unlike built-in objects, these are customized
based on application needs.
Web Technologies K.Ramesh, Assistant Professor
Events
Definition: Events in JavaScript are actions or occurrences that happen in the browser, such as clicks, key
presses, or page loads. JavaScript allows handling these events using event listeners to execute specific code
when an event occurs.
Types of Events 3. Form Events – Triggered when interacting with
forms.
1. Mouse Events – Triggered by mouse actions. 🔹 submit, change, focus, blur
🔹 click, dblclick, mouseover, mouseout
2. Keyboard Events – Triggered by keyboard 4. Window Events – Related to the browser window.
actions. 🔹 load, resize, scroll, unload
🔹 keydown, keyup, keypress
Web Technologies K.Ramesh, Assistant Professor
Pattern Matching using Regular Expressions
Definition: Regular Expressions (RegExp) in JavaScript are patterns used to match and manipulate strings.
They help in searching, validating, and replacing text efficiently.
Regular Expression Syntax
A regular expression is enclosed in slashes /pattern/ or created using the RegExp object.
Ex: let regex = /hello/; // Regular expression literal
let regexObj = new RegExp("hello"); // Using RegExp constructor
Common Regular Expression Patterns & Examples
1. Matching a Word 3. Global Search (g flag) – Finds all matches
2. Case-Insensitive Match (i flag)
4. Digit Matching (\d) – Matches numbers
Web Technologies K.Ramesh, Assistant Professor
Pattern Matching using Regular Expressions
Useful Regular Expression Patterns
• Regular expressions make text processing powerful and efficient in JavaScript!
Web Technologies K.Ramesh, Assistant Professor
Working with XML
What is XML?
• XML (eXtensible Markup Language) is a flexible, text-based format for data storage and exchange.
• It defines structured data using tags.
🔹 Features of XML:
• Human-readable & machine-readable
• Self-descriptive with custom tags
• Platform-independent & widely used for data exchange
• Supports hierarchical data representation
Example:
Why Use XML?
• Used in web services, configuration files, data storage, and APIs.
• Works with HTML, databases, and various programming languages.
• XML simplifies data sharing across different systems!
Web Technologies K.Ramesh, Assistant Professor
Document Type Definition (DTD)
Document Type Definition (DTD):
A Document Type Definition (DTD) describes the tree structure of a document and something about its
data. It is a set of markup affirmations that actually define a type of document for the SGML family, like
GML, SGML, HTML, XML.
• Defines the structure and legal elements of an XML document.
• Ensures that XML data follows a specific format.
Web Technologies K.Ramesh, Assistant Professor
XML SCHEMAS
XML Schemas:
• Alternative to DTD, uses XML syntax to define the structure.
• Supports data types (string, integer, date, etc.).
Example:
Web Technologies K.Ramesh, Assistant Professor
XSLT
XSLT (Extensible Stylesheet Language Transformations):
• XSL (eXtensible Stylesheet Language) is a styling language for XML.
• XSLT stands for XSL Transformations.
• Used to transform XML data into another format like HTML.
Example:
Fig: Work Flow
Web Technologies K.Ramesh, Assistant Professor
XML AND CSS
• XML stores data, CSS styles it – XML is used for structuring data, while CSS is used to enhance its presentation.
• CSS applies styles to XML elements – Just like in HTML, CSS can be used to change colors, fonts, and layouts of XML
elements.
• CSS selectors work with XML – You can target specific XML elements and attributes using CSS selectors.
• XML and CSS are separate – Keeping XML and CSS separate improves maintainability and reusability.
• CSS can format XML as tables or lists – XML data can be displayed in different ways using CSS, such as lists or tables.
• CSS helps in making XML readable – Without CSS, XML appears as plain text in browsers, but with CSS, it can be
visually structured.
• Attribute-based styling is possible – CSS can style XML elements based on their attributes.
Ex:
Web Technologies K.Ramesh, Assistant Professor
Document Object Model (DOM)
Document Object Model (DOM)
The DOM represents XML as a tree structure, allowing JavaScript to access and manipulate data
dynamically.
Key Features:
• Tree Structure Representation – XML elements are organized as nodes for easy navigation.
• Accessing Elements – Methods like getElementsByTagName() retrieve XML data.
• Modifying XML – JavaScript can add, update, or delete XML elements.
• Event Handling – XML content can change dynamically based on user actions.
• Node Traversal – Use parentNode, childNodes, etc., to navigate XML.
• Creating & Deleting Nodes – Methods like createElement() and removeChild() manage XML content.
• Integration with HTML – XML data can be displayed in web pages using JavaScript.
Example:
Web Technologies K.Ramesh, Assistant Professor
XML Parsers
Parsers are used to read and process XML documents.
Two common types are DOM Parser and SAX Parser, each with different memory usage and processing
methods.
1. DOM Parser (Document Object Model Parser)
Loads the entire XML document into memory and represents it as a tree structure.
Allows random access to elements, making it easy to traverse, modify, or query XML data.
Supports methods like getElementByTagName() and createElement().
Suitable for small to medium-sized XML files but not efficient for large files due to high memory usage.
Example:
Web Technologies K.Ramesh, Assistant Professor
XML Parsers
2. SAX Parser (Simple API for XML Parser)
• Reads XML sequentially, processing one element at a time without storing the entire document in
memory.
• Works in an event-driven manner, triggering events like startElement and endElement.
• Suitable for large XML files as it consumes less memory.
• Read-only – does not support direct modifications to the XML document.
Key Features of SAX in JavaScript
• Event-driven processing: Handles XML elements one at a time.
• Efficient memory usage: Does not load the full document into memory.
• Works well for large XML files.
Key Differences:
Web Technologies K.Ramesh, Assistant Professor
