Introduction to JavaScript

JavaScript is a versatile programming

language primarily used for web
development.

It allows developers to create

interactive and dynamic web pages.

Initially developed by Netscape, it has

become an essential technology
alongside HTML and CSS.
History of JavaScript

JavaScript was created in 1995 by

Brendan Eich while working at
Netscape.

Initially named Mocha, it was later

renamed to LiveScript before finally
becoming JavaScript.

The language has evolved

significantly, with major updates
including ECMAScript standards.
JavaScript and the Web

JavaScript is an integral part of web

technology, enabling rich user
interfaces.

It can be executed in the browser,

allowing for immediate feedback and
interaction.

Modern frameworks and libraries, like

React and Angular, enhance
JavaScript's capabilities.
 JavaScript Syntax
JavaScript syntax is the set of rules that define
a correctly structured program.

It is case-sensitive, meaning variable names like

'myVar' and 'myvar' are treated differently.

Proper syntax is crucial for the code to run

without errors.

There are two types of values defined in JavaScript

Syntax:

● Fixed Values: These are known as the literals.

● Variable values: These are called variables
 Data Types in JavaScript

JavaScript has several built-in data

types, including Number, String, and
Boolean.

Objects and Arrays are also

fundamental data structures used in
JavaScript.

Understanding data types is essential

for effective variable declaration and
manipulation.
What are Variables?

Variables in JavaScript are containers

for storing data values.

They can hold various data types,

making them flexible and versatile.

Declaring variables correctly is crucial

for maintaining clean and efficient
code.
Declaring Variables

Variables can be declared using the

keywords 'var', 'let', or 'const'.

'var' is function-scoped, while 'let' and

'const' are block-scoped.

Choosing the right declaration

keyword is important for variable
scope management.
Using 'var' for Variables

The 'var' keyword has been used since

the inception of JavaScript.

Variables declared with 'var' can be

re-declared and updated within the
same scope.

However, 'var' can lead to unexpected

behavior due to its function-scoping.
Using 'let' for Variables

The 'let' keyword was introduced in

ECMAScript 6 (ES6) to improve
variable declaration.

Variables declared with 'let' are

limited to the block scope in which
they are defined.

This helps prevent issues related to

hoisting and redeclaration that arise
with 'var'.
Using 'const' for Constants

The 'const' keyword is also introduced

in ES6 for declaring constants.

A variable declared with 'const' must

be initialized at the time of
declaration.

Unlike 'let', the value of a 'const'

variable cannot be reassigned,
promoting immutability.
The Temporal Dead Zone (TDZ) is a concept in JavaScript that relates to the hoisting of the
variables and the visibility of variables declared with let and const . In the TDZ, a variable exists
but it cannot be accessed until it is not declared.
 Global Variables

Global variables are accessible from

anywhere in the code.

They are declared outside of any

function or block.

Excessive use of global variables can

lead to code that is hard to maintain.
Function Scope

Variables declared within a function

are only accessible inside that
function.

This encapsulation helps preserve

variable integrity.

Function scope prevents interference

from variables declared outside.
Block Scope

Block scope is created by curly braces

`{}` in control structures like `if`,
`for`, and `while`.

Variables declared with `let` and

`const` are block-scoped.

Block scope allows for more granular

control over variable lifetimes.
Naming Conventions for Variables

Variable names must begin with a

letter, underscore, or dollar sign.

They can include letters, numbers,

underscores, and dollar signs, but
cannot contain spaces.

Following naming conventions helps

improve code readability and
maintainability.
Variable Scope

Scope refers to the visibility of

variables within different parts of the
code.

Global variables are accessible from

anywhere, while local variables are
confined to their function.

Understanding scope is key to

avoiding conflicts and bugs in larger
codebases.
Hoisting in JavaScript

Hoisting is a concept or behavior in

JavaScript where the declaration of a
function, variable, or class goes to
the top of the scope they were
defined in.

This allows you to use variables

before they are declared, but can lead
to confusion.

Only the declaration is hoisted, not

the initialization, which can result in
undefined values.
“Function hoisting, Variables hoisting”
Dynamic Typing

JavaScript is a dynamically typed

language, meaning variable types can
change at runtime.

You can assign a number to a variable

and later assign a string to the same
variable.

This flexibility can lead to powerful

programming techniques but may
introduce bugs.
Variable Assignment

Variables can be assigned values

using the assignment operator (=).

You can assign different types of data

to the same variable over time.

Assignment can also involve

expressions and calculations for more
complex data handling.
 Template Literals
Template literals allow for easier string
interpolation and multi-line strings.

They are enclosed by backticks (` `) instead of

quotes.

You can embed expressions within template literals

using the ${expression} syntax.

Template literals provide an easy way to

interpolate variables and expressions into strings.

The method is called string interpolation (${...})

Template Literals Cont.

Template literals allow variables in

strings
let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, $

{lastName}!`;
Best Practices for Variables

Use 'let' and 'const' instead of 'var' to

avoid scope-related issues.

Choose meaningful names for

variables to improve code readability.

Keep variable declarations organized

and grouped together to enhance
maintainability.
Common Errors with Variables

Common mistakes include using

undeclared variables or redeclaring
them improperly.

Being mindful of scope can help

prevent accidental global variables.

Staying aware of hoisting behavior

can also reduce unexpected
outcomes.
 <!DOCTYPE html>
<html>
Javascript Functions <body>
<h1>JavaScript Functions</h1>

<p>Call a function which performs a

A JavaScript function is a block of code calculation and returns the
designed to perform a particular task. result:</p>

A JavaScript function is executed when <p id="demo"></p>

"something" invokes it (calls it).
(function <script>
function myFunction(p1, p2) {
keyword)
return p1 * p2;
}

let result = myFunction(4, 3);

document.getElementById("demo").i
JavaScript Functions nnerHTML = result;
</script>
Call a function which performs a calculation and returns the
result: </body>
</html>
12
 Javascript Functions (parameters &
invocation)
Function parameters are listed inside the parentheses () in the function definition.

Function arguments are the values received by the function when it is invoked.

Inside the function, the arguments (the parameters) behave as local variables.

FUNCTION INVOCATION :

The code inside the function will execute when "something" invokes (calls) the function:

● When an event occurs (when a user clicks a button)

● When it is invoked (called) from JavaScript code
● Automatically (self invoked)
 Javascript Functions (return)
When JavaScript reaches a return statement, the function will stop
executing.

If the function was invoked from a statement, JavaScript will "return" to

execute the code after the invoking statement.

Functions often compute a return value. The return value is "returned"

back to the "caller":

// Function is called, the return value will end up in x

let x = myFunction(4, 3);

function myFunction(a, b) {

// Function returns the product of a and b

return a * b;
 Why Functions?
You can write code that can be used many times.

You can use the same code with different arguments, to produce different
results.

The () operator
The () operator invokes (calls) the function:

Accessing a function with incorrect parameters can return an incorrect answer:

Accessing a function without () returns the function and not the function result:

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

Function used as variable values
Functions can be used the same way as you use variables, in all types
of formulas, assignments, and calculations.
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";
or
let text = "The temperature is " + toCelsius(77) + " Celsius";

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function.

Since local variables are only recognized inside their functions, variables with the same name
can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.
What is an Object?

An object in JavaScript is a standalone

entity, similar to real-life objects.

Objects can contain properties and

methods, providing functionality and
data storage.

The flexibility of objects allows

developers to create complex data
structures.
Javascript objects
Objects are variables too. But objects can
contain many values.
const car = {type:"Fiat", model:"500",
color:"white"};
It is a common practice to declare objects with
the const keyword.
An object literal is a list of name:value pairs
inside curly braces {}.
Spaces and line breaks are not important. An object initializer can span multiple lines

The named values, in JavaScript objects, are called properties.

Accessing Object Properties

Object properties can be accessed

using dot notation or bracket notation.

Dot notation is cleaner but requires

the key to be a valid identifier.

Bracket notation is more flexible,

allowing access to keys with special
characters.

You can access object properties in two ways:

objectName.propertyName objectName["propertyName"]

4
Object Methods

Methods are functions that belong to

an object and can manipulate its
properties.

They enable objects to perform

actions and respond to events.

Understanding methods is key to

utilizing objects effectively in
JavaScript.
Javascript objects methods
Methods are function definitions stored as property
values.
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};

this refers to the person object:

this.firstName means the firstName property of person.

this.lastName means the lastName property of person.

Object Syntax

JavaScript objects are defined using

curly braces, containing key-value
pairs.

Each key is a string, and the value can

be of any data type, including
functions.

Correct syntax is crucial for creating

valid objects and avoiding errors.
Object Display
// Create an Object
Some solutions to display JavaScript objects are: const person = {
name: "John",
● Displaying the Object Properties by name age: 30,
city: "New York"
● Displaying the Object Properties in a Loop };
● Displaying the Object using Object.values()
● Displaying the Object using JSON.stringify() // Display Properties by name
document.getElementById("demo")
.innerHTML =
person.name + "," + person.age
+ "," + person.city;
 Object.values() creates an array from the property values:

Object Display // Create an Object

const person = {
name: "John",
The properties of an object can be collected in a loop: age: 30,
city: "New York"
// Create an Object };
const person = {
name: "John", // Create an Array
age: 30, const myArray = Object.values(person);
city: "New York"
}; // Display the Array
document.getElementById("demo").innerHTML = myArray;
// Build a Text
let text = "";
for (let x in person) { Object.entries() makes it simple to use objects in loops:
text += person[x] + " ";
const fruits = {Bananas:300, Oranges:200,
};
Apples:500};
// Display the Text
let text = "";
document.getElementById("demo")
for (let [fruit, value] of Object.entries(fruits)) {
.innerHTML = text;
text += fruit + ": " + value + "<br>";
}
 Object Display
JavaScript Object Notation (JSON) is a standard text-based format for representing
structured data based on JavaScript object syntax. It is commonly used for transmitting
data in web applications (e.g., sending some data from the server to the client, so it can be
displayed on a web page, or vice versa).

JavaScript objects can be converted to a string with JSON method JSON.stringify().

// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};

// Stringify Object
let myString = JSON.stringify(person);

// Display String
document.getElementById("demo").innerHTML = myString;
 Object Constructors
Sometimes we need to create many objects of the same type.

To create an object type we use an object constructor function.

It is considered good practice to name constructor functions with an

upper-case first letter.
function Person(first, last, age, eye) { built-in javascript constructors
this.firstName = first;
this.lastName = last;
this.age = age; new Object() // A new Object
this.eyeColor = eye; object
} new Array() // A new Array
A constructor function can also have methods object
new Map() // A new Map object
In the constructor function, this has no value new Set() // A new Set object
new Date() // A new Date
const myFather = new Person("John", "Doe", 50, "blue"); object
const myMother = new Person("Sally", "Rally", 48, "green"); new RegExp() // A new RegExp
const mySister = new Person("Anna", "Rally", 18, "green"); object
const mySelf = new Person("Johnny", "Rally", 22, "green"); new Function() // A new Function
object
Object Constructors

Use object literals {} instead of new Object().

Use array literals [] instead of new Array().

Use pattern literals /()/ instead of new

RegExp().

Use function expressions () {} instead of new

Function().
What are Strings?

Strings are sequences of characters

used to represent text in JavaScript.

They can be defined using single

quotes, double quotes, or backticks.

Strings are immutable, meaning their

values cannot be changed once
created.
Creating Strings

You can create strings by enclosing

text in quotes.

Template literals, defined with

backticks, allow for multi-line strings.

String concatenation can be

performed using the '+' operator or
template literals.
 <!DOCTYPE html>
<html>
<body>
String Properties
<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

Strings in JavaScript have several <p>The length property returns the length of a
built-in properties. string.</p>

<p>Find the length of "Hello World!":</p>

The `length` property returns the
<p id="demo"></p>
number of characters in a string.
<script>
let text = "Hello World!";
Properties provide useful information let length = text.length;
for manipulating and processing text.
document.getElementById("demo").innerHTML
= length;
</script>
JavaScript Strings
</body>
</html>
The length Property
The length property returns the length of a string.

Find the length of "Hello World!":

12
String Methods

JavaScript offers numerous methods

for string manipulation.

Common methods include `charAt()`,

`indexOf()`, and `slice()`.

These methods enhance the ability to

work with strings effectively.
String Template Literals

Template literals allow for easier

string interpolation and multi-line text.

You can embed expressions within

template literals using `$
{expression}`.

This feature improves readability and

maintainability of code.
What are Numbers?

Numbers in JavaScript are used to

represent both integers and floating-
point values.

JavaScript does not differentiate

between different types of numbers.

The `Number` object can be used for

additional numerical operations.
Number Properties

JavaScript provides several properties

for working with numbers.

The `Number.MAX_VALUE` and

`Number.MIN_VALUE` constants
define boundaries.

The `isNaN()` function checks if a

value is not a number.
Number Methods

There are several useful methods for

number manipulation in JavaScript.

Common methods include `toFixed()`,

`toPrecision()`, and `parseInt()`.

These methods help format and

convert number representations
effectively.
Special Numeric Values

JavaScript has special numeric values

such as `Infinity` and `NaN`.

`Infinity` represents values that

exceed the maximum limit.

`NaN` stands for "Not-a-Number" and

is returned for invalid calculations.
What are Arrays?

Arrays are ordered collections of items

in JavaScript.

They can hold values of any type,

including strings, numbers, and
objects.

Arrays are mutable, allowing for

modification of their contents.
const array_name = [item1, item2, ...];

const cars = new Array("Saab", "Volvo",

"BMW");//new keyword

“the above two do the exactly same

thing”
Creating Arrays

You can create arrays using the array

literal syntax, `[]`.

The `Array` constructor can also be

used to create arrays.

Arrays can be initialized with

predefined values or left empty.
Accessing Array Elements

Array elements are accessed using

zero-based indexing.

You can retrieve or modify an element

using its index number.

The `length` property returns the total

number of elements in an array.
Array Methods

JavaScript provides many built-

in methods for array
manipulation.

Common methods include

`push()`, `pop()`, `shift()`, and
`unshift()`.

These methods allow adding or

removing elements from arrays
easily.
Multidimensional Arrays

Arrays can contain other arrays,

creating multidimensional structures.

This feature is useful for representing

matrices or grids.

Accessing elements in
multidimensional arrays requires
multiple indices.
Multidimensional Arrays definition ways
1st, need to define some 1D let salary = [ // Remove last element from 4th
array sub-array
["ABC", 24, 18000],
let arr1 = ["ABC", 24, 18000]; // That is 28000 indexing
["EFG", 30, 30000], starts from 0
let arr2 = ["EFG", 30, 30000];
["IJK", 28, 41000], salary[3].pop();
let arr3 = ["IJK", 28, 41000];
["EFG", 31, 28000],
let arr4 = ["EFG", 31, 28000];
]; // Removes last sub-array
let arr5 = ["EFG", 29, 35000];
salary.push(["MNO", 29, // That is "["EFG", 31, 28000]"
// "salary" defines like a 1D 33300]);
array but it already contains salary.pop();
some 1D array // This row added after the
last row in the "salary" array
let salary = [arr1, arr2, arr3,
arr4, arr5];
 let salary = [
["ABC", 24, 18000],

Multidimensional Arrays ["EFG", 30, 30000],

["IJK", 28, 41000],
["EFG", 31, 28000],
Original array :
];
ABC, 24, 18000
// Prints first array
EFG, 30, 30000 //output console.log("Original array :<br>");
for (let i = 0; i < salary.length; i++) {
IJK, 28, 41000
console.log(salary[i]);
EFG, 31, 28000 }

after adding "India" at the 4th array : // Adding "India" at the 4th index of 4th sub array
salary[3][3] = "India";
ABC, 24, 18000

EFG, 30, 30000 console.log("<br>after adding \"India\" at the 4th

array :<br>");
IJK, 28, 41000 for (let i = 0; i < salary.length; i++) {
console.log(salary[i]);
EFG, 31, 28000, India
}
after adding "USA" and "Canada" at the 3rd array using "push()"
method : console.log("<br>after adding \"USA\"
and \"Canada\" "
ABC, 24, 18000 + "at the 3rd array using \"push()\" method :");
salary[2].push("USA", "Canada");
EFG, 30, 30000

IJK, 28, 41000, USA, Canada // Adding "USA" and "Canada" in the 2nd sub-array
for (let i = 0; i < salary.length; i++) {
EFG, 31, 28000, India console.log(salary[i]);
Array Destructuring

Array destructuring allows unpacking

values from arrays into distinct
variables.

You can assign values to variables in a

concise and readable manner.

This feature enhances code clarity

and reduces redundancy.
if else elseif switch
● Use if to specify a block of code to be executed, if a specified condition is true
● Use else to specify a block of code to be executed, if the same condition is false
● Use else if to specify a new condition to test, if the first condition is false
● Use switch to specify many alternative blocks of code to be executed

if (condition) {
// block of code to be if (condition1) {
executed if the condition is // block of code to be executed if
true condition1 is true
} } else if (condition2) {
// block of code to be executed if the
if (condition) { condition1 is false and condition2 is true
// block of code to be executed if the } else {
condition is true // block of code to be executed if the
} else { condition1 is false and condition2 is false
// block of code to be executed if the }
condition is false
}
switch
● The switch expression is evaluated once.
● The value of the expression is compared with the values of each case.
● If there is a match, the associated block of code is executed.
● If there is no match, the default code block is executed.

switch(expression) { If the break statement is omitted then, the next case will be executed even if the
case x: evaluation does not match the case.
// code block
break; The default keyword specifies the code to run if there is no case match
case y:
// code block
If default is not the last case in the switch block, remember to end the
break;
default case with a break.
default:
// code block
} The default case does not have to be the last case in a switch block

If no default label is found, the program continues to the statement(s) after

the switch.
 javascript loops
for (let i = 0; i < 5; i++) { const array = [10, 20, 30];
console.log(i); // Outputs: 0, 1, 2, 3, 4 for (const value of array) {
} console.log(value); // Outputs: 10,
20, 30
}
let i = 0;
while (i < 5) {
console.log(i); // Outputs: 0, 1, 2, const obj = { a: 1, b: 2, c: 3 };
3, 4 for (const key in obj) {
i++; console.log(`${key}: $
} {obj[key]}`); // Outputs: a: 1, b: 2,
c: 3
let i = 0; }
do {
const array = [1, 2, 3];
console.log(i); // Outputs: 0, 1, 2,
array.forEach((value) => {
3, 4
console.log(value); // Outputs: 1,
i++;
2, 3
} while (i < 5);
});
javascript loops
● for - loops through a block of code a number of times
● for/in - loops through the properties of an object
● for/of - loops through the values of an iterable object
● while - loops through a block of code while a specified condition is true
● do/while - also loops through a block of code while a specified condition is true

for (expression 1; expression 2; expression 3) {

// code block to be executed

Expression 1 is executed (one time) before the execution of the code block.

Expression 2 defines the condition for executing the code block.

Expression 3 is executed (every time) after the code block has been executed.
 Do not use for in over an Array if the index
order is important.
javascript loops
The index order is implementation-dependent,
and array values may not be accessed in the
const person = {fname:"John", lname:"Doe", age:25}; order you expect.
let text = ""; It is better to use a for loop, a for of loop, or
for (let x in person) {
Array.forEach() when the order is important.
text += person[x];
}

● The for in loop iterates over a person object

● Each iteration returns a key (x)
● The key is used to access the value of the key
● The value of the key is person[x]
 Javascript Loops
The JavaScript for of statement loops through the values of an iterable object.

It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more:

for (variable of iterable) {

// code block to be executed The while loop loops through a block of code as long as a
} specified condition is true.

for (variable of iterable) { while (condition) {

// code block to be executed // code block to be executed
} }
 Javascript Break
The break statement is used to exit a loop or switch statement immediately. When break is
encountered, the control flow jumps to the next statement following the loop.

for (let i = 0; i < 10; i++) {

if (i === 5) {
break; // Exit the loop when i equals 5
}
console.log(i); // Outputs: 0, 1, 2, 3, 4
}
Javascript Continue
The continue statement skips the current iteration of a loop and continues with the next iteration. This
means the rest of the code inside the loop for that particular iteration is not executed.

for (let i = 0; i < 10; i++) {

if (i % 2 === 0) {
continue; // Skip even numbers
}
console.log(i); // Outputs: 1, 3, 5, 7, 9
}
Introduction to JavaScript Regex

Regular expressions (regex) are

patterns used to match character
combinations in strings.

They provide a powerful way to

search, replace, or validate text within
strings.

JavaScript offers a built-in RegExp

object to create and manage regex
patterns.
Basic Syntax of Regex

The basic syntax for regex includes

special characters like `.`, `

`, and `?` for matching.

Character classes, defined by square

brackets `[]`, allow for matching
specific sets of characters.
Common Regex Methods

The `test()` method checks if a

pattern exists within a string and
returns true or false.

The `exec()` method executes a

search for a match and returns an
array of matched results.

The `match()` method is used on

strings to retrieve matches against a
given regex pattern.
Regex Flags

Flags modify regex behavior and can

be added after the closing delimiter.

The `g` flag enables global searching,

allowing multiple matches in a string.

The `i` flag makes the search case-

insensitive, ignoring uppercase and
lowercase differences.
Introduction to JavaScript Classes

JavaScript classes provide a blueprint

for creating objects with shared
properties and methods.

They were introduced in ES6 to

simplify object-oriented programming
concepts in JavaScript.

A class can have a constructor that

initializes object properties when an
instance is created.
 class ClassName {
Creating a Class }
constructor() { ... }

A JavaScript class is not an object.

To define a class, use the `class`
keyword followed by the class name It is a template for JavaScript objects.
and curly braces. The constructor method is a special
method:

Inside the class, the constructor ● It has to have the exact name
method is defined using the "constructor"
`constructor` keyword. ● It is executed automatically
when a new object is created
● It is used to initialize object
Class methods can be added directly
properties
within the class body without needing
the `function` keyword. If you do not define a constructor
method, JavaScript will add an empty
constructor method.
 <script>
class Car {
Class constructor method constructor(name, year) {
this.name = name;
this.year = year;
class ClassName {
constructor() { ... }
method_1() { ... } }
method_2() { ... } age() {
method_3() { ... } const date = new Date();
} return date.getFullYear() - this.year;
}
}
Class methods are created with the
same syntax as object methods.
const myCar = new Car("Ford", 2014);
document.getElementById("demo").inner
Use the keyword class to create a HTML =
class. "My car is " + myCar.age() + " years old.";
</script>
Always add a constructor()
method.

Then add any number of methods.

Inheritance in Classes

JavaScript supports inheritance

through the `extends` keyword,
allowing one class to inherit from
another.

The `super()` function is used to call

the constructor of the parent class.

This promotes code reusability and a

cleaner structure in object-oriented
programming.
 Inheritance in Classes
Single Inheritance: A class inherits from one
parent class only.

Multilevel Inheritance: A class inherits from

another class, forming a chain (e.g., A → B →
C).

Hierarchical Inheritance: Multiple classes

inherit from a single parent class (e.g., A → B, A
→ C).

Multiple Inheritance: JavaScript does not

support multiple inheritance directly, but it can
be simulated using mixins or by combining
properties from multiple sources into a single
object.
JavaScript Errors Overview

JavaScript errors can occur during

development and execution,
impacting application functionality.

Common types of errors include

syntax errors, reference errors, and
type errors.

Understanding error types is crucial

for effective debugging and improving
code quality.
Handling Errors with Try/Catch

The `try` block allows you to test a

block of code for errors.

If an error occurs, the `catch` block

can handle it gracefully without
crashing the application.

This method enhances user

experience by providing fallback
options in case of failures.
Throwing Custom Errors

Developers can create custom error

messages using the `throw`
statement.

This allows for more meaningful error

handling tailored to specific
application logic.

Custom errors can improve debugging

by providing context about what went
wrong.
 <!DOCTYPE html>
<html>
<body>

example of error handling <h2>JavaScript try catch</h2>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">

<button type="button" onclick="myFunction()">Test
Input</button>
<p id="p01"></p>

<script>
function myFunction() {
const message = document.getElementById("p01");
message.innerHTML = "";
let x = document.getElementById("demo").value;
try {
if(x.trim() == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>

</body>
</html>
Debugging Techniques Overview
Debugging is the process of
identifying and resolving
bugs in code to ensure
smooth functionality.

Common techniques include

using console logs,
breakpoints, and step-
through debugging.

Effective debugging improves

code reliability and user
satisfaction by minimizing
errors.
Using the Console for Debugging

The console in browsers offers tools to

log messages, view errors, and
inspect objects.

`console.log()` is widely used to print

variable values and track program
flow.

Other console methods like

`console.error()` and `console.warn()`
help categorize outputs.
Breakpoints in Debugging

Setting breakpoints allows you to

pause code execution at specific lines
to inspect variable states.

Most browsers' developer tools

support adding breakpoints to analyze
code behavior step-by-step.

This technique is invaluable for

tracking down complex bugs and
understanding program flow.
Using Debugging Tools

Modern browsers come equipped with

built-in debugging tools for
developers.

These tools allow for inspecting

elements, monitoring network
requests, and profiling performance.

Familiarizing yourself with these tools

can significantly enhance your
debugging efficiency.
Best Practices for Debugging

Systematically isolate the problem by

narrowing down the code to the
smallest failing part.

Write clear, descriptive error

messages to make debugging easier
for you and your team.

Regularly refactor code to improve

readability and reduce the likelihood
of bugs.
Xml : Processors , DOM And SAX
Introduction to XML

XML stands for eXtensible Markup

Language, which is designed to store
and transport data.

It is both human-readable and

machine-readable, making it versatile
for various applications.

XML enables users to define their own

tags, allowing customization of data
representation.
Importance of XML

XML is widely used because it

facilitates data sharing across diverse
systems.

It serves as a standard format for web

services, enabling interoperability.

Many industries utilize XML for

configuration files, data storage, and
document formats.
Structure of XML

An XML document consists of a

prolog, elements, attributes, and
optional comments.

Elements are defined by opening and

closing tags, encapsulating the data.

Attributes provide additional

information about elements,
enhancing data description.
XML Prolog

The XML prolog defines the version

and encoding of the document.

It typically starts with `<?xml

version="1.0" encoding="UTF-8"?>`.

Including a prolog is essential for XML

parsers to interpret the document
correctly.
XML Elements

An element can contain text, other

elements, or a combination of both.

Elements can be nested, allowing for

the creation of complex data
structures.

Each element must have a unique

name within its parent element to
maintain hierarchy.
XML Elements
XML Attributes

Attributes provide additional details

about an element, appearing within
the opening tag.

They are defined as name-value pairs,

e.g., `attributeName="value"`.

Unlike elements, attributes should be

used sparingly to avoid cluttering the
XML structure.
XML Comments

Comments in XML are used to include

notes or explanations without
affecting the data.

They are enclosed within `<!--` and

`-->`, ensuring they are ignored by
parsers.

Proper use of comments can greatly

enhance the readability of complex
XML documents.
What is XML Schema?

XML Schema defines the structure,

content, and semantics of XML
documents.

It enables validation of XML

documents to ensure they conform to
defined rules.

Schemas help in enforcing data types,

element occurrences, and
relationships among elements.
Types of XML Schema

The two primary schema languages

are DTD (Document Type Definition)
and XSD (XML Schema Definition).

DTD is older and less powerful, while

XSD supports data types and
namespaces.

Choosing the right schema language

depends on the complexity and
requirements of the XML document.
Types of XML Schema examples
Types of XML Schema examples
Benefits of Using XML Schema

XML Schema enhances data integrity

by validating the structure and
content of XML documents.

It allows for better collaboration

across different systems by ensuring
consistent data formats.

Schemas can be reused and

referenced, promoting modular design
in XML documents.
Introduction to DOM

The Document Object Model (DOM) is

a programming interface for XML
documents.

It represents the structure of the XML

document as a tree of objects,
allowing easy manipulation.

Using DOM, developers can

dynamically access and modify
elements, attributes, and content.
DOM Structure

The DOM tree consists of nodes, with

each node representing a part of the
XML document.

Nodes include elements, attributes,

text, comments, and document itself.

This hierarchical structure enables

efficient navigation and data
manipulation within the XML.
Working with DOM in JavaScript

JavaScript provides built-in support for JavaScript can change all the HTML elements
DOM manipulation through the in the page
`document` object. JavaScript can change all the HTML attributes
in the page
Developers can use methods like
JavaScript can change all the CSS styles in the
`getElementById`, `createElement`, page
and `appendChild`.
JavaScript can remove existing HTML elements
and attributes
This allows for real-time updates of
XML data in web applications. JavaScript can add new HTML elements and
attributes

JavaScript can react to all existing HTML

events in the page

JavaScript can create new HTML events in the

page
Working with XML <?xml version="1.0"
encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this
weekend!</body>
</note>
Introduction to XML Processors

XML processors are software tools

that read, manipulate, and validate
XML documents.

They can be categorized into two

types: parsers and transformers.

Parsers read XML documents and

convert them into a usable format,
while transformers work on
modifying the document structure.
Introduction

• A parser is a program that interprets and processes input

data.

• It plays a crucial role in programming languages and data

processing.
Types of Parsers

• Top-down parsers, such as Recursive Descent, analyze input

from the top.

• Bottom-up parsers, like Shift-Reduce, build the parse tree

from the leaves.

• Each type has its own advantages and disadvantages in

parsing.
Components of a Parser

• Lexical analysis is responsible for tokenizing the input data.

• Syntax analysis involves constructing parse trees from

tokens.

• Both components are essential for effective parsing.

○ A lexical token is a sequence of characters that can be treated as a unit in the
grammar of the programming languages.
lexical analysis example
Step-by-Step Tokenization

1. Input Stream: 3 + 5 * (10 - 4)

2. Token Extraction:
○ 3 → Token: NUMBER
○ + → Token: PLUS
○ 5 → Token: NUMBER
○ * → Token: MULTIPLY
○ ( → Token: LEFT_PAREN
○ 10 → Token: NUMBER
○ - → Token: MINUS
○ 4 → Token: NUMBER
○ ) → Token: RIGHT_PAREN
• f characters that can be treated as a unit in the grammar of the programming
languages.
Introduction to XML Processors
Types of XML Parsers

There are two main types of XML

parsers: DOM parsers and SAX
parsers.

DOM parsers load the entire XML

document into memory, allowing for
random access.

SAX (Simple API for XML) parsers read

the document sequentially and are
more memory-efficient for large files.
Using XSLT for Transformation

XSLT (eXtensible Stylesheet Language

Transformations) is used for
transforming XML documents.

It allows for conversion of XML into

different formats, such as HTML or
another XML structure.

XSLT can apply templates and rules to

manipulate XML data flexibly and
powerfully.
XML Validation Tools
Validation tools ensure
that XML documents
conform to the defined
schema or DTD.

These tools can provide

feedback on errors,
helping developers
maintain data integrity.

Examples of validation
tools include XMLSpy,
Xerces, and online
validators.
Common XML Applications

XML is extensively used in web

services for data exchange between
applications.

It is also utilized in configuration files

for software applications, providing a
structured format.

Many document formats, such as SVG

and XHTML, are based on XML,
showcasing its versatility.
Common XML Applications