Unit - III

Advanced JavaScript:
Definition: JavaScript is a high-level, versatile programming language primarily used for client-
side web development. It allows you to add interactivity and dynamic content to web pages.
Features:
Object-oriented: JavaScript is object-oriented, meaning it uses objects as its core building blocks.
Objects are instances of classes and can have properties and methods.
Interpreted language: It is an interpreted language, executed by web browsers on the client-side,
making it accessible for creating interactive web pages.
Event-driven: JavaScript supports event-driven programming, responding to user actions like
clicks or keypresses.
Scripts in JavaScript:
Definition: Scripts in JavaScript refer to sets of instructions or code written to perform a specific
task. These scripts can range from simple operations to complex functionalities.
Usage: JavaScript is commonly used to create client-side scripts that run within web browsers. It
can also be used on the server-side (with platforms like Node.js) for server scripting.
Objects in JavaScript:
Definition: In JavaScript, objects are complex data types that allow you to store and organize
data. Objects can have properties and methods.
Properties: These are key-value pairs that hold data values associated with the object.
Methods: Functions that are associated with objects, allowing them to perform actions.
Example:
// Creating an object
let car = {
brand: 'Toyota',
model: 'Camry',
year: 2022,
start: function() {
console.log('Engine started');
}
};
// Accessing properties
console.log(car.brand); // Output: Toyota

// Calling a method
car.start(); // Output: Engine started
Advanced Scripting:
Definition: Advanced scripting in the context of JavaScript usually involves more sophisticated
programming techniques, design patterns, and utilization of advanced language features.
Examples:
Asynchronous programming: Using features like Promises or async/await for managing
asynchronous operations.
Design patterns: Implementing design patterns like Singleton, Observer, or Module patterns for
more maintainable and scalable code.
Functional programming: Leveraging functional programming concepts for cleaner and more
concise code.
Advanced algorithms and data structures: Implementing complex algorithms and data structures
for optimized performance.
Creating Objects:
Object Literal:
The simplest way to create an object is by using an object literal, which is a comma-separated list
of key-value pairs enclosed in curly braces {}.
let person = {
name: 'John',
age: 30,
profession: 'Developer'
};
Constructor Function:
You can create objects using constructor functions. Constructor functions are regular functions
that are used with the new keyword to create instances of objects.
function Person(name, age, profession) {
 this.name = name;
this.age = age;
this.profession = profession;
}
let person = new Person('John', 30, 'Developer');
Object.create:
The Object.create() method creates a new object, using an existing object as the prototype.
let personPrototype = {
greet: function() {
console.log('Hello, I am ' + this.name);
}
};
let person = Object.create(personPrototype);
person.name = 'John';
person.age = 30;
Adding Properties and Methods:
You can add properties and methods to objects in different ways:
// Adding properties
person.city = 'New York';
// Adding methods
person.sayHello = function() {
console.log('Hello!');
};
Accessing Object Properties and Methods:
console.log(person.name); // Output: John
console.log(person['age']); // Output: 30
person.sayHello(); // Output: Hello!
Prototypes and Inheritance:
JavaScript objects are linked to a prototype object from which they inherit properties and
methods. You can use prototypes to implement inheritance.
function Employee(name, age, profession, role) {
// Inheriting from the Person prototype
Person.call(this, name, age, profession);
this.role = role;
}
// Setting up prototype chain
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
let employee = new Employee('Jane', 25, 'Engineer', 'Team Lead');
This way, employee inherits properties and methods from both Person and Employee prototypes.
DOM (Document Object Model):
The Document Object Model (DOM) is a programming interface for web documents. It
represents the structure of a document as a tree of objects, where each object corresponds to a
part of the document, such as elements, attributes, and text. The DOM provides a way for
programs to manipulate the structure, style, and content of web documents dynamically.
Key features of the DOM:
Tree Structure:
The DOM represents the HTML or XML document as a tree structure. Each element, attribute,
and piece of text is a node in the tree.
Dynamic Interaction:
JavaScript can be used to interact with the DOM dynamically, allowing for the creation,
modification, and deletion of elements and attributes.
Event Handling:
The DOM allows you to attach event listeners to elements, enabling the handling of user
interactions such as clicks, keypresses, and form submissions.
Cross-Browser Compatibility:
The DOM provides a standardized interface for interacting with web documents, ensuring cross-
browser compatibility.
Web Browser Environments:
Web browsers provide an environment for executing client-side code (usually written in
JavaScript) and rendering web pages. The browser environment includes:
Rendering Engine:
Responsible for parsing HTML, applying styles, and rendering the web page on the screen.
JavaScript Engine:
Executes JavaScript code, enabling dynamic behavior on web pages.
DOM (Document Object Model):
Represents the structured document and allows JavaScript to interact with and manipulate the
document dynamically.
CSS Engine:
Applies styles to HTML elements based on the CSS rules defined.
Networking:
Handles requests and responses, allowing the browser to fetch resources like images, stylesheets,
and scripts.
Forms and Validations:
Forms:
HTML forms provide a way to collect user input. They consist of various form elements such as
text inputs, radio buttons, checkboxes, and buttons.
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Submit">
</form>
Form Validation:
Form validation ensures that user input meets specified criteria before submitting the form. This
can be done using client-side validation (using JavaScript) and server-side validation.
Client-Side Validation Example:
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "" || password === "") {
alert("Both username and password are required");
return false;
}
// Additional validation logic...
return true;
}
</script>
<form action="/submit" method="post" onsubmit="return validateForm()">
<!-- Form fields... -->
<input type="submit" value="Submit">
</form>
In this example, the validateForm function is called when the form is submitted. It checks if the
username and password fields are not empty and can include additional validation logic.