Download JavaScript Fundamentals: Guide to Data Types, Operators, Loops, Control Statements and more Summaries Javascript programming in PDF only on Docsity!
Chapter 4: Java Script
Defination of Java Script:-
JavaScript (JS) is a programming language used to create interactive and dynamic
content on websites. It allows web pages to respond to user actions, update content without
reloading, and handle complex web applications.
Key Features of JavaScript:
1. Client-Side Scripting – Runs in a web browser.
2. Interactivity – Used for animations, form validation, and dynamic updates.
3. Event-Driven – Responds to user actions like clicks and keystrokes.
4. Lightweight & Fast – Executes quickly in the browser.
5. Cross-Platform – Works on all major browsers and devices.
6. Versatile – Can be used for web development, game development, server-side scripting
(Node.js), and more.
Examples of JavaScript in Action:
Showing/hiding elements when clicking a button.
Validating forms before submission.
Creating slideshows and animations.
Fetching and displaying data from a server dynamically.
JavaScript Data Types
JavaScript has different types of data that can be stored and manipulated. These are broadly
categorized into Primitive and Non-Primitive (Reference) Data Types.
1. Primitive Data Types
Primitive types are immutable and store only a single value.
1. Number – Stores numeric values (integers and floating-point numbers).
let num = 42 ;
let price = 99.99;
2. String – Stores text (characters inside quotes).
let name = "John";
let greeting = 'Hello, World!';
3. Boolean – Stores true or false values.
let isLoggedIn = true;
let hasPermission = false;
4. Undefined – A variable that has been declared but not assigned a value.
let x; // Undefined
5. Null – Represents an intentional absence of a value.
let emptyValue = null;
6. Symbol (ES6) – Unique and immutable value, mostly used as object property keys.
let uniqueKey = Symbol("id");
7. BigInt (ES11) – Used for very large numbers beyond Number type limits.
let bigNumber = 9007199254740991n;
2. Non-Primitive (Reference) Data Types
These types store references to memory locations.
1. Object – A collection of key-value pairs.
let person = { name: "Alice", age: 25 };
2. Array – A list of values stored in square brackets.
let colors = ["red", "green", "blue"];
3. Function – A block of reusable code.
function greet() {
return "Hello!";
4. Date – Represents date and time.
let today = new Date();
Operat
or
Description Example
-- Decrement
(subtracts 1)
let x = 5; x-- → 4
2. Assignment Operators
Used to assign values to variables.
Operat
or
Examp
le
Equivalen
t To
= x = 5 x = 5 += x += 3 x = x + 3 -= x -= 3 x = x - 3 *= x *= 3 x = x * 3 /= x /= 3 x = x / 3 %= x %= 3 x = x % 3 **= x **= 2 x = x ** 2
3. Comparison Operators
Used to compare values and return true or false.
Operat
or
Description Example
== Equal to (checks value only) 5 == "5" → true
=== Strict equal to (checks value
& type)
5 === "5" → false
!= Not equal to 5 != 3 → true
!== Strict not equal to 5 !== "5" → true
Operat
or
Description Example
> Greater than 10 > 5 → true
< Less than 10 < 5 → false
>= Greater than or equal to 10 >= 10 → true
<= Less than or equal to 10 <= 5 → false
4. Logical Operators
Used for logical operations, mostly in conditions (if statements).
Operat
or
Description Example
AND (Both conditions must
be true)
(5 > 3 && 10 > 5) → true
! NOT (Reverses the
condition)
!(5 > 3) → false
5. Bitwise Operators
Used to perform operations at the binary level.
Operat
or
Descript
ion
Example (Binary
Calculation)
& AND 5 & 1 → 1
^ XOR 5 ^ 1 → 4
~ NOT ~5 → -
<< Left Shift 5 << 1 → 10
Example:
for (let i = 1 ; i <= 5 ; i++) { console.log("Iteration: " + i); }
Output:
Iteration: 1 Iteration: 2 Iteration: 3 Iteration: 4 Iteration: 5
2. while Loop
Used when the number of iterations is unknown, and the loop should continue while a condition
is true.
Syntax:
while (condition) { // Code to be executed }
Example:
let i = 1 ; while (i <= 5 ) { console.log("Iteration: " + i); i++; }
3. do...while Loop
Executes the block at least once, then checks the condition.
Syntax:
do { // Code to be executed } while (condition);
Example:
let i = 1 ; do { console.log("Iteration: " + i); i++; } while (i <= 5 );
4. for...in Loop
Used to iterate over the properties of an object.
Syntax:
for (key in object) { // Code to be executed }
Example:
let person = { name: "John", age: 25 , city: "New York" }; for (let key in person) { console.log(key + ": " + person[key]); }
Output:
name: John age: 25 city: New York
5. for...of Loop
Used to iterate over values of an iterable (array, string, etc.).
Syntax:
for (value of iterable) { // Code to be executed }
Example (Array):
Example (continue):-
for (let i = 1 ; i <= 5 ; i++) { if (i === 3 ) { continue; // Skips iteration when i is 3 } console.log(i); }
Output:
JavaScript Control Statements
Control statements in JavaScript are used to control the flow of execution in a program. They
help in making decisions, repeating tasks, and controlling code execution.
1. Conditional Statements
These statements execute different code blocks based on conditions.
a) if Statement
Executes a block of code only if the condition is true.
let age = 18 ; if (age >= 18 ) { console.log("You are an adult."); }
Output:
sql CopyEdit You are an adult. b) if...else Statement
Executes one block if the condition is true, otherwise executes another block.
let age = 16 ; if (age >= 18 ) { console.log("You can vote."); } else { console.log("You cannot vote."); }
Output:
You cannot vote. c) if...else if...else Statement
Checks multiple conditions.
let marks = 85 ; if (marks >= 90 ) { console.log("Grade: A"); } else if (marks >= 75 ) { console.log("Grade: B"); } else if (marks >= 50 ) { console.log("Grade: C"); } else { console.log("Fail"); }
Output: Grade: B
d) Ternary Operator (? :)
Shorthand for if...else.
let age = 20 ; let message = (age >= 18 )? "Adult" : "Minor"; console.log(message);
Output:
Adult e) switch Statement
Used for multiple condition checks instead of multiple if...else statements.
Iteration: 2 Iteration: 3 Iteration: 4 Iteration: 5
3. Jump Statements (Control Flow Statements)
These statements are used to alter the flow of loops.
a) break Statement
Stops the loop immediately.
for (let i = 1 ; i <= 5 ; i++) { if (i === 3 ) { break; } console.log(i); }
Output:
b) continue Statement
Skips the current iteration and moves to the next.
for (let i = 1 ; i <= 5 ; i++) { if (i === 3 ) { continue; } console.log(i); }
Output:
4. Exception Handling (try...catch Statement)
Used to handle errors gracefully without stopping the program.
try { let result = 10 / 0 ; // Division by zero (allowed in JS but can be an issue) console.log(result); } catch (error) { console.log("An error occurred: " + error.message); } finally { console.log("Execution completed."); }
Output:
Infinity Execution completed. Summary of JavaScript Control Statements
Type Statement Purpose
Conditional
Statements
if, if...else, switch
Decision-making based on
conditions.
Looping
Statements
for, while, do...while, for...in,
for...of
Repeating tasks.
Jump
Statements
break, continue Altering loop execution.
Exception
Handling
try...catch...finally Handling errors safely.
JavaScript DOM (Document Object Model)
The Document Object Model (DOM) is a programming interface for web pages. It represents
the structure of an HTML document as a tree of objects , allowing JavaScript to manipulate
HTML and CSS dynamically.
3. External JavaScript (Separate .js File)
Write JavaScript in an external file (.js) and link it using .
Step 1: Create an external file (script.js) js CopyEdit function greet() { alert("Hello from external JavaScript!"); } Step 2: Link the file in HTML html CopyEdit
External JS Example
Click Me
4. Adding JavaScript Dynamically
JavaScript can add scripts dynamically using document.createElement("script").
Load Script ing with Local and Global Variables in JavaScript
In JavaScript, variables can be either local or global based on their scope. The scope of a
variable determines where it can be accessed in a program.
1. Global Variables
A global variable is declared outside of any function and can be accessed from anywhere in the
script.
Example: Global Variable js let message = "Hello, World!"; // Global variable function greet() { console.log(message); // Accessible inside function } greet(); // Output: Hello, World! console.log(message); // Accessible outside function
2. Local Variables
A local variable is declared inside a function and can only be accessed within that function.
Example: Local Variable js function showMessage() { let localMessage = "Hello from function"; // Local variable console.log(localMessage); } showMessage(); // Output: Hello from function console.log(localMessage); // Error: localMessage is not defined
JavaScript Arrays
An array in JavaScript is a special variable that can store multiple values in a single variable.
1. Creating an Array
You can create an array in JavaScript using two methods :
1.1 Using [] (Recommended) js
8. Multidimensional Arrays (Arrays Inside Arrays) js let matrix = [ [ 1 , 2 , 3 ], [ 4 , 5 , 6 ], [ 7 , 8 , 9 ] ]; console.log(matrix[ 1 ][ 2 ]); // Output: 6
Event Handling in JavaScript
In JavaScript, event handling allows us to execute code when a user interacts with a webpage,
such as clicking a button, submitting a form, hovering over an element, or pressing a key.
1. What is an Event?
An event is an action or occurrence detected by JavaScript. Some common events include:
Event Description
click When a user clicks an
element
mouseover When a user hovers over an
element
mouseout
When a user moves the
mouse away
keydown When a key is pressed
keyup When a key is released
change When an input value changes
submit When a form is submitted
load
When the page finishes
loading
