What is Java Script
⮚ JavaScript is a lightweight, interpreted programming language. It is designed for
creating network-centric applications. It is complimentary to and integrated with
Java. JavaScript is very easy to implement because it is integrated with HTML. It is
open and cross-platform.
⮚ JavaScript is a dynamic computer programming language. It is lightweight and most
commonly used as a part of web pages, whose implementations allow client-side
script to interact with the user and make dynamic pages. It is an interpreted
programming language with object-oriented capabilities.
1
Why learn Java Script
▪ JavaScript is a lightweight, interpreted programming language.
▪ Designed for creating network-centric applications.
▪ Complementary to and integrated with Java.
▪ Complementary to and integrated with HTML.
▪ Open and cross-platform
2
ECMA Script 2024
ECMA script is a fundamental component of JavaScript. Since the middle of the
1990s, ECMAScript has evolved to provide developers with new capabilities, enriching
the dynamic and user-friendly nature of web experiences. From simple scripts to
intricate frameworks, it influences the digital landscape and fuels creativity and
innovation in web development
New Features in ES2024
• [Link]()
• [Link]()
• [Link]()
• [Link]()
• [Link]()
• [Link]()
3
</script>
JavaScript can be implemented using JavaScript statements that are placed within the
<script>... </script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within you
web page, but it is normally recommended that you should keep it within the <head>
tags.
The script tag takes two important attributes
Language
Type
<script language="javascript" type="text/javascript">
JavaScript code
</script>
4
Writing first JavaScript code: “Hello World”
<html>
<body>
<script language="javascript" type="text/javascript">
<!—
[Link]("Hello World!")
//-->
</script>
</body>
</html>
5
Declaring Variables in JavaScript
JavaScript allows you to work with three primitive data types −
Numbers, eg. 123, 120.50 etc.
Strings of text e.g. "This text string" etc.
Boolean e.g. true or false.
Note − Java does not make a distinction between integer values and floating-point
values. All numbers in JavaScript are represented as floating-point values.
6
Variable declaration using var
1. var
Variable declaration using var
•Scope: var is function-scoped or globally scoped. If declared outside a function, it's
available globally. Inside a function, it's available throughout the function.
•Hoisting: var declarations are hoisted to the top of their containing function or global
scope. This means the variable can be referenced before its declaration, but its value
will be undefined until the line of code where it's defined is executed.
•Re-declaration: Variables declared with var can be re-declared in the same scope
without any error.
•Example:
[Link](a); // undefined (due to hoisting)
var a = 5;
[Link](a); // 5
7
Variable declaration using let
2. let
•Scope: let is block-scoped. This means that a variable declared with let is only
accessible within the block (denoted by {}) in which it is declared.
•Hoisting: Similar to var, let declarations are hoisted, but they cannot be accessed
before the declaration (known as the "temporal dead zone").
•Re-declaration: Variables declared with let cannot be re-declared in the same scope.
However, they can be updated.
Example:
{
let b = 10;
[Link](b); // 10
}
[Link](b); // ReferenceError: b is not defined
8
Variable declaration using const
3. Const
•Scope: const is also block-scoped, similar to let.
•Hoisting: const declarations are hoisted but are subject to the same "temporal dead
zone" as let.
•Re-declaration: Variables declared with const cannot be re-declared or updated.
const is used for variables that are meant to remain constant. However, if the variable
holds an object or an array, the properties or elements of that object or array can still
be modified.
•Example
const c = 20;
[Link](c); // 20
// c = 25; // TypeError: Assignment to constant variable.
const obj = { name: 'Alice' };
[Link] = 'Bob'; // This is allowed
[Link]([Link]); // Bob
9
Java Script Data types
JavaScript allows you to work with following primitive data types −
Numbers, eg. 123, 120.50 etc.
Strings of text e.g. "This text string" etc.
Boolean e.g. true or false.
Null let y = null;
Undefined let x; // x is undefined
Symbol const sym = Symbol('description');
BigInt const bigInt = BigInt(1234567890123456789012345678901234567890);
10
Java Script Data types
Non-Primitive (Reference) Data Types
Non-primitive data types are more complex types that can hold collections of values or
more complex entities. They are mutable (can be changed) and are stored by
reference.
Object: A collection of key-value pairs. Objects can store multiple values as properties
let person = {
name: "Alice",
age: 25,
isStudent: false
};
Array: A special type of object used to store ordered collections of values. Arrays can
hold multiple items of any type.
let fruits = ["apple", "banana", "cherry"];
Function: Functions are first-class objects in JavaScript. They can be assigned to
variables, passed as arguments, and returned from other functions.
function greet() {
[Link]("Hello!");
}
11
Operators in JavaScript
JavaScript provides a variety of operators that allow you to perform different operations on variables
and values. These operators can be categorized into several types:
1. Arithmetic Operators
These operators are used to perform basic mathematical operations.
Operator Description Example
+ Addition 5 + 3 // 8
- Subtraction 5 - 3 // 2
* Multiplication 5 * 3 // 15
/ Division 5 / 3 // 1.67
Modulus
% 5 % 3 // 2
(remainder)
** Exponentiation 2 ** 3 // 8
12
Operators in JavaScript Continued
2. Assignment Operators
These operators are used to assign values to variables.
Operator Description Example
= Assignment let a = 5;
Addition a += 3; // a = a
+=
assignment +3
Subtraction a -= 3; // a = a
-=
assignment -3
Multiplication a *= 3; // a = a
*=
assignment *3
Division a /= 3; // a = a
/=
assignment /3
Modulus a %= 3; // a =
%=
assignment a%3
Exponentiation a **= 3; // a =
**=
assignment a ** 3
13
Operators in JavaScript Continued
3. Comparison Operators
These operators are used to compare values.
Operator Description Example
Equal to (value
== 5 == '5' // true
only)
Strict equal to 5 === '5' //
===
(value and type) false
Not equal to
!= 5 != '5' // false
(value only)
Strict not equal
!== to (value and 5 !== '5' // true
type)
> Greater than 5 > 3 // true
< Less than 5 < 3 // false
Greater than or
>= 5 >= 5 // true
equal to
Less than or
<= 5 <= 3 // false
equal to
14
Operators in JavaScript Continued
4. Bitwise Operators
These operators perform operations on binary representations of numbers
Operator Description Example
& Bitwise AND 5 & 3 // 1
| OR 5 | 1 // 5
^ Bitwise XOR 5 ^ 3 // 6
~ Bitwise NOT ~5 // -6
<< Left shift 5 << 1 // 10
>> Right shift 5 >> 1 // 2
Unsigned right
>>> 5 >>> 1 // 2
shift
15
Operators in JavaScript Continued
5. Logical Operators
These operators are used to perform logical operations, typically with boolean values
Operator Description Example
&& Logical AND true && false // false
|| Logical OR True||False // true
! Logical NOT !true // false
6. Ternary (Conditional) Operator
This is a shorthand way to write an if-else statement.
Operator Description Example
?: Ternary operator let result = (a > b) ? a : b;
16
Operators in JavaScript Continued
7. typeof Operator
This operator is used to determine the type of a variable or value.
Operator Description Example
typeof Returns the type of a variable typeof "hello" // "string"
8. Instanceof Operator
This operator is used to check if an object is an instance of a particular class or constructor
function.
Operator Description Example
Checks if an object is an
instanceof [] instanceof Array // true
instance of a constructor
17
Writing statements in JavaScript
.
1. Variable declaration
2. Assignment Statements
3. Conditional Statements
• If statements
• Switch Statements
4. Looping statements
• For loop
• While loop
• Do-while loop
5. Function Statements
• Function Declaration
• Function Expression
• Arrow Function (ES6)
6. Exception Handling
7. Return Statements
8. Break and Continue Statements
• Break Statement
• Continue Statement
9. Import and Export Statements
• Exporting
• Importing
18
Conditional Statements using If-else
let score = 85; var book = "maths";
if( book == "history" )
if (score >= 60) { {
[Link]("You passed!"); [Link]("<b>History
} else { Book</b>");
[Link]("You failed."); }
} else if( book == "maths" )
{ [Link]("<b>Maths
Book</b>");
}
else if( book == "economics" )
{
[Link]("<b>Economics
Book</b>");
}
else
{
[Link]("<b>Unknown
Book</b>");
}
19
Conditional Statements using Switch
let day = 3;
let dayName;
switch (day) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
default:
dayName = "Invalid day";
}
[Link](dayName); // Wednesday
20
looping constructs : for
The For Loop
The for statement creates a loop with 3 optional expressions:
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.
Instead of writing:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
You can write:
for (let i = 0; i < [Link]; i++) {
text += cars[i] + "<br>";
} 21
looping constructs : While
Syntax
while (condition) {
// code block to be executed
}
Example
while (i < 10) {
text += "The number is " + i;
i++;
}
22
looping constructs : do…while
Syntax
do {
code block to be executed
}
while (condition);
Example
Execute a code block once, an then continue if condition (i <
5) is true:
let text = "";
let i = 0;
do {
text += i + "<br>";
i++;
}
while (i < 5);
23
Arrays
An array is a special variable, which can hold more than one value:
const cars = [“Honda", “Tata", "BMW"];
Syntax:
const array_name = [item1, item2, ...];
Why Use Arrays?
If you have a list of items (a list of car names, for example), storing the cars in single
variables could look like this:
let car1 = “Honda";
let car2 = “Tata";
let car3 = "BMW";
However, what if you want to loop through the cars and find a specific one? And what
if you had not 3 cars, but 300?
The solution is an array!
An array can hold many values under a single name, and you can access the values by
referring to an index number.
24
Objects
What is an Object?
An object in JavaScript is a collection of key-value pairs where keys are strings (or Symbols) and
values can be any data type, including other objects, arrays, or functions. Objects allow you to
group related data and functionality.
Creating Objects
There are several ways to create objects in JavaScript:
[Link] Literal Syntax
const person = {
name: "Alice",
age: 30,
isStudent: false
};
[Link] the new Object() Syntax
const car = new Object();
[Link] = "Toyota";
[Link] = "Camry";
[Link] = 2020;
25
Objects Continued
3. Using a Constructor Function
function Dog(name, breed) {
[Link] = name;
[Link] = breed;
}
const myDog = new Dog("Buddy", "Golden Retriever");
4. Using the class Syntax (ES6)
class Animal {
constructor(name, type) {
[Link] = name;
[Link] = type;
}
}
const myCat = new Animal("Whiskers", "Cat");
26
Functions
What is a Function?
A function is a block of code designed to perform a particular task. It can take inputs (parameters),
perform actions, and return a value.
Defining Functions
You can define functions in several ways:
[Link] Declaration
function greet(name) {
return "Hello, " + name + "!";
}
Function Expression
const square = function(x) {
return x * x;
};
Arrow Function (ES6)
const add = (a, b) => a + b;
27
Array of Objects
In JavaScript, an array of objects is a collection of objects stored in an array. Each
object can represent a complex entity with multiple properties. This is a powerful feature
that allows for the organization and management of related data. Here’s a more detailed
overview, including how to create, manipulate, and use arrays of objects.
Creating an Array of Objects
You can create an array of objects using array literal syntax. Here’s an example:
const employees = [
{ id: 1, name: "Alice", position: "Developer", salary: 60000 }, In this example, employees is an
{ id: 2, name: "Bob", position: "Designer", salary: 55000 }, array that contains three
{ id: 3, name: "Charlie", position: "Manager", salary: 75000 objects, each
} representing an employee with
]; properties such as id, name,
position, and salary.
Accessing Objects in the Array
You can access individual objects or their properties using index notation and dot notation.
// Access the first employee object
[Link](employees[0]); // { id: 1, name: "Alice", position: "Developer", salary: 60000 }
// Access a specific property
[Link](employees[1].name); // "Bob"
28
Math Objects
The Math namespace object contains static properties and methods for mathematical constants
and functions.
[Link] properties:
Math.E
Math.LN10
Math.LN2
Math.LOG10E
Math.LOG2E
[Link]
Math.SQRT1_2
Math.SQRT2
2. Static methods:
[Link]()
[Link]()
[Link]()
[Link]()
Math.clz32()
[Link]()
[Link]()
[Link]()
Math.expm1()
[Link]() 29
String Objects
The String object is used to represent and manipulate a sequence of characters.
There are 2 ways to create string in JavaScript
1) By string literal
The string literal is created using double quotes. The syntax of creating string using string
literal is given below:
var stringname="string value";
2) By string object (using new keyword)
The syntax of creating string object using new keyword is given below:
var stringname=new String("string literal");
30
