JavaScript Advanced Topics - Exam Theory

1. JavaScript and Objects

What is JavaScript?
JavaScript is a high-level, interpreted, object-oriented programming language primarily used for client-
side web development. It was created by Brendan Eich in 1995 at Netscape Communications.

Object-Oriented Nature of JavaScript:

JavaScript is fundamentally an object-based language where almost everything is an object or can be
treated as an object.

Key Characteristics:
Dynamic Language: Variables and objects can be modified at runtime
Prototype-based: Objects can inherit directly from other objects
Loosely Typed: Variables don't need explicit type declarations

First-class Functions: Functions are objects and can be manipulated like any other object
Event-driven: Responds to user interactions and system events

Objects in JavaScript:

Definition:

Objects are collections of key-value pairs where keys are strings (properties) and values can be any
data type including functions (methods).

Object Creation Methods:

1. Object Literal Notation:

javascript

let student = {
name: "John",
age: 20,
grade: "A",
study: function() {
return this.name + " is studying";
}
};

2. Object Constructor:
 javascript

let student = new Object();

student.name = "John";
student.age = 20;
student.study = function() {
return this.name + " is studying";
};

3. Constructor Function:

javascript

function Student(name, age, grade) {

this.name = name;
this.age = age;
this.grade = grade;
this.study = function() {
return this.name + " is studying";
};
}
let student1 = new Student("John", 20, "A");

Object Properties and Methods:

Properties: Store data/state of the object

Methods: Functions that operate on object data

Property Access:
Dot notation: object.property

Bracket notation: object["property"]

Dynamic Properties: Can add/delete properties at runtime

Object Characteristics:

Objects are reference types

Objects are mutable

Objects can contain other objects (composition)

Objects support inheritance through prototypes

2. JavaScript's Own Objects

Built-in Global Objects:

JavaScript provides several built-in objects that are available globally and provide essential
functionality.

Core Built-in Objects:

1. Object:

Purpose: Base object for all JavaScript objects

Key Methods:
Object.keys() : Returns array of object's property names

Object.values() : Returns array of object's values

Object.assign() : Copies properties from source to target

Object.create() : Creates new object with specified prototype

2. Array:

Purpose: Stores ordered collections of elements

Key Properties: length

Key Methods:
Mutating: push() , pop() , shift() , unshift() , splice()

Non-mutating: slice() , concat() , join()

Iteration: forEach() , map() , filter() , reduce()

Search: indexOf() , find() , includes()

3. String:

Purpose: Manipulates text data

Key Properties: length

Key Methods:
charAt() : Returns character at index

substring() , substr() , slice() : Extract portions

indexOf() , search() : Find text

replace() : Replace text

split() : Convert to array

toUpperCase() , toLowerCase() : Change case

4. Number:

Purpose: Handles numeric operations

 Static Properties: Number.MAX_VALUE , Number.MIN_VALUE , Number.NaN

Key Methods:
toString() : Convert to string

toFixed() : Format decimal places

parseInt() , parseFloat() : Parse strings to numbers

5. Math:

Purpose: Mathematical operations and constants

Properties: Math.PI , Math.E

Key Methods:
Math.round() , Math.floor() , Math.ceil() : Rounding

Math.max() , Math.min() : Find extremes

Math.random() : Generate random numbers

Math.pow() , Math.sqrt() : Power and square root

6. Date:

Purpose: Handle dates and times

Creation: new Date() , new Date(year, month, day)

Key Methods:
getFullYear() , getMonth() , getDate() : Get components

setFullYear() , setMonth() , setDate() : Set components

toString() , toDateString() : Convert to string

getTime() : Get timestamp

7. Boolean:

Purpose: Logical operations

Values: true , false

Methods: toString() , valueOf()

8. Function:

Purpose: Create and manipulate functions

Properties: length (number of parameters), name

Methods: call() , apply() , bind()

9. RegExp:

Purpose: Pattern matching with regular expressions

Creation: /pattern/flags or new RegExp(pattern, flags)

Methods: test() , exec()

Global Functions:
parseInt() : Parse string to integer

parseFloat() : Parse string to float

isNaN() : Check if value is NaN

isFinite() : Check if value is finite

eval() : Execute JavaScript code from string

3. The DOM and Web Browser Environment

What is DOM?
The Document Object Model (DOM) is a platform and language-neutral interface that represents
HTML/XML documents as a tree structure of objects that can be manipulated with JavaScript.

DOM Structure:
Document: Root of the DOM tree

Elements: HTML tags represented as objects

Attributes: Properties of HTML elements

Text: Content within elements

Comments: HTML comments

DOM Tree Hierarchy:

Document
└── html
├── head
│ ├── title
│ └── meta
└── body
├── div
├── p
└── script

DOM Object Types:

1. Document Object:

Purpose: Represents the entire HTML document

Key Properties: title , URL , domain

Key Methods:
getElementById() : Select element by ID

getElementsByClassName() : Select elements by class

getElementsByTagName() : Select elements by tag

querySelector() : Select first matching element

querySelectorAll() : Select all matching elements

createElement() : Create new element

write() : Write content to document

2. Element Object:

Purpose: Represents HTML elements

Key Properties: innerHTML , textContent , id , className

Key Methods:
getAttribute() , setAttribute() : Handle attributes

appendChild() : Add child element

removeChild() : Remove child element

addEventListener() : Add event listener

3. Window Object:

Purpose: Represents browser window

Key Properties: location , navigator , screen , history

Key Methods:
alert() , confirm() , prompt() : User interaction

setTimeout() , setInterval() : Timing functions

open() , close() : Window manipulation

Web Browser Environment Objects:

1. Navigator Object:

Purpose: Information about browser

Properties: userAgent , platform , language , cookieEnabled

2. Location Object:

Purpose: Information about current URL

Properties: href , hostname , pathname , search

Methods: reload() , replace()

3. History Object:

Purpose: Browser's session history

Methods: back() , forward() , go()

4. Screen Object:

Purpose: Information about user's screen

Properties: width , height , colorDepth

DOM Manipulation:

Selecting Elements:

javascript

// By ID
let element = document.getElementById("myId");

// By Class
let elements = document.getElementsByClassName("myClass");

// By Tag
let paragraphs = document.getElementsByTagName("p");

// CSS Selectors
let element = document.querySelector("#myId");
let elements = document.querySelectorAll(".myClass");

Modifying Elements:
 javascript

// Change content
element.innerHTML = "<strong>Bold text</strong>";
element.textContent = "Plain text";

// Change attributes
element.setAttribute("src", "image.jpg");
element.id = "newId";

// Change styles
element.style.color = "red";
element.style.backgroundColor = "yellow";

Creating and Adding Elements:

javascript

// Create element
let newDiv = document.createElement("div");
newDiv.textContent = "New content";

// Add to document
document.body.appendChild(newDiv);

Event Handling:
Events are actions that occur in the browser (clicks, loads, etc.)

Common Events:

Mouse Events: click , mouseover , mouseout

Keyboard Events: keydown , keyup , keypress

Form Events: submit , change , focus , blur

Window Events: load , resize , scroll

Event Handling Methods:

 javascript

// Method 1: Event handler property

element.onclick = function() {
alert("Clicked!");
};

// Method 2: addEventListener (recommended)

element.addEventListener("click", function() {
alert("Clicked!");
});

4. Forms and Validations

HTML Forms in JavaScript:

Forms are used to collect user input and send it to a server. JavaScript can validate and manipulate
form data before submission.

Form Object:
The form element is represented as a Form object in JavaScript with properties and methods for
manipulation.

Accessing Forms:

Methods to Access Forms:

javascript

// By name attribute
let form = document.forms["formName"];

// By index
let form = document.forms[0];

// By ID
let form = document.getElementById("formId");

Form Properties:
elements: Collection of all form controls

length: Number of form elements

name: Form's name attribute

action: Form's action attribute (URL)

 method: Form's method (GET/POST)

Form Methods:
submit(): Submit form programmatically

reset(): Reset form to initial values

Form Elements:

1. Input Elements:

Text Input: <input type="text">

Password: <input type="password">

Email: <input type="email">

Number: <input type="number">

Checkbox: <input type="checkbox">

Radio: <input type="radio">

Submit: <input type="submit">

2. Other Form Elements:

Textarea: <textarea></textarea>

Select: <select><option></option></select>

Button: <button></button>

Accessing Form Element Values:

javascript

// Text input
let name = document.getElementById("nameInput").value;

// Checkbox
let isChecked = document.getElementById("checkbox").checked;

// Radio button
let radioValue = document.querySelector('input[name="gender"]:checked').value;

// Select dropdown
let selectedValue = document.getElementById("selectList").value;

Form Validation:

Purpose of Validation:
 Ensure data quality and completeness
Provide immediate feedback to users

Reduce server load by catching errors early

Improve user experience

Types of Validation:

1. Client-Side Validation:

Performed using JavaScript in the browser

Immediate feedback to users

Cannot be relied upon alone (can be bypassed)

2. Server-Side Validation:

Performed on the server

More secure and reliable

Required for data integrity

JavaScript Form Validation Techniques:

1. Basic Validation Functions:

javascript

function validateRequired(field) {
return field.value.trim() !== "";
}

function validateEmail(email) {
let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email.value);
}

function validateLength(field, minLength) {

return field.value.length >= minLength;
}

2. Form Validation Example:

 javascript

function validateForm() {
let name = document.getElementById("name");
let email = document.getElementById("email");
let password = document.getElementById("password");

// Validate name
if (!validateRequired(name)) {
alert("Name is required");
name.focus();
return false;
}

// Validate email
if (!validateEmail(email)) {
alert("Please enter valid email");
email.focus();
return false;
}

// Validate password
if (!validateLength(password, 6)) {
alert("Password must be at least 6 characters");
password.focus();
return false;
}

return true;
}

Form Events:

Important Form Events:

submit: When form is submitted

reset: When form is reset

change: When form element value changes

input: When user types in input field

focus: When element receives focus

blur: When element loses focus

Event Handling:
 javascript

// Prevent form submission if validation fails

document.getElementById("myForm").addEventListener("submit", function(event) {
if (!validateForm()) {
event.preventDefault(); // Stop form submission
}
});

// Real-time validation
document.getElementById("email").addEventListener("blur", function() {
if (!validateEmail(this)) {
this.style.borderColor = "red";
} else {
this.style.borderColor = "green";
}
});

Common Validation Patterns:

1. Required Field Validation:

javascript

function isRequired(field) {
return field.value.trim() !== "";
}

2. Email Validation:

javascript

function isValidEmail(email) {
let pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return pattern.test(email);
}

3. Phone Number Validation:

javascript

function isValidPhone(phone) {
let pattern = /^\d{10}$/;
return pattern.test(phone);
}
4. Password Strength Validation:

javascript

function isStrongPassword(password) {
// At least 8 characters, one uppercase, one lowercase, one number
let pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8,}$/;
return pattern.test(password);
}

Form Validation Best Practices:

1. Validate on both client and server side
2. Provide clear error messages

3. Validate in real-time when possible

4. Use appropriate input types (email, number, etc.)

5. Focus on the first invalid field

6. Use regular expressions for pattern matching

7. Sanitize input data

8. Provide visual feedback (colors, icons)

Advantages of Form Validation:

Improves data quality
Enhances user experience

Reduces server load

Prevents common input errors

Provides immediate feedback

Limitations of Client-Side Validation:

Can be disabled by users

Can be bypassed

Should not be the only validation

Requires JavaScript to be enabled