Beginner’s Guide to JavaScript

Contents
1 Lesson 1: Introduction to JavaScript 3
1.1 What is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Example: Simple JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 1.2 Taking Inputs and Outputs in JavaScript . . . . . . . . . . . . . . . . 3
1.3.1 Output Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.2 Input Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 1.3 JavaScript Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4.1 Rules for Naming Variables . . . . . . . . . . . . . . . . . . . . . 4
1.4.2 Reserved Keywords in JavaScript . . . . . . . . . . . . . . . . . . 5
1.4.3 Difference Between var, let, and const . . . . . . . . . . . . . . . . 5
1.4.4 Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5.1 String Data Type . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2 JavaScript Operators 6
2.1 Arithmetic Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Assignment Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Comparison Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.4 Logical Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.5 Increment and Decrement . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.6 Type Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.7 Conditional Statements (If-Else, Else If, Switch) . . . . . . . . . . . . . . 8
2.7.1 Simple if Statement . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.7.2 else if Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.7.3 4. switch Statement . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.7.4 Switch Without Break (Fall-through Example) . . . . . . . . . . . 10
2.7.5 Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.8 1.6 Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 Lesson 2: JavaScript Arrays 11

3.1 Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 Creating Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.1 A. Array Literal (Recommended) . . . . . . . . . . . . . . . . . . 11
3.2.2 B. Array Constructor . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3 Accessing Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.4 Modifying Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.5 Built-in Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1
 3.5.1 Adding and Removing Elements . . . . . . . . . . . . . . . . . . . 12
3.5.2 Searching Methods . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.5.3 Slicing and Splicing . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.6 Iteration Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.7 Multidimensional Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2
1 Lesson 1: Introduction to JavaScript
1.1 What is JavaScript?
JavaScript is a programming language that makes web pages interactive. It works with
HTML (structure) and CSS (style). JavaScript can run in any web browser.
Applications:

• Form validation

• Interactive buttons

• Games

• Web applications

• Multimedia control

1.2 Example: Simple JavaScript

<! DOCTYPE html >
< html >
< body >

< script >

alert (" Welcome to JavaScript !") ;
</ script >

</ body >

</ html >

This code shows a popup message in the browser.

—

1.3 1.2 Taking Inputs and Outputs in JavaScript

JavaScript can interact with users using the following methods:

1.3.1 Output Methods

• alert(): Displays a popup.

• [Link](): Prints to the console.

• [Link](): Writes directly to the webpage.

alert (" Hello World !") ;

console . log (" This is console output ") ;
document . write (" This appears on the webpage ") ;

3
1.3.2 Input Methods
• prompt(): Takes input from the user.

• confirm(): Shows OK/Cancel box and returns true/false.

let name = prompt (" Enter your name :") ;

alert (" Hello " + name ) ;

let isSure = confirm (" Are you sure ?") ;

console . log ( isSure ) ;

1.4 1.3 JavaScript Variables

Variables are containers used to store data values. In JavaScript, variables can be declared
using var, let, or const.
let age = 20;
const country = " Bangladesh ";
var name = " Rahim ";

1.4.1 Rules for Naming Variables

• Variable names cannot start with a number.

• Variable names are case-sensitive (age and Age are different).

• Names can contain letters, digits, underscores ( ), and dollar signs ($).

• Cannot use spaces in variable names.

• Cannot use JavaScript reserved keywords.

• Should use meaningful names (e.g., studentName instead of x).

Valid Examples:
let studentName = " Karim ";
let _totalMarks = 90;
let $price = 500;

Invalid Examples:
let 1 name = " Rahim "; // Cannot start with number
let user name = " Ali "; // Cannot contain space
let let = 5; // Reserved keyword

4
1.4.2 Reserved Keywords in JavaScript
Reserved keywords cannot be used as variable names.
Common Reserved Keywords:
var , let , const , if , else , for , while ,
break , continue , function , return ,
switch , case , default , try , catch ,
class , new , this , delete

1.4.3 Difference Between var, let, and const

Feature var let const
Scope Function Block Block
Redeclare Yes No No
Reassign Yes Yes No
Hoisting Yes Yes Yes
—

1.4.4 Best Practices

• Use let for variables that change.

• Use const by default.

• Avoid using var in modern JavaScript.

• Always use meaningful variable names.

1.5 Data Types

Common JavaScript data types:

• String: Text data. Example: ”Hello”

• Number: Numeric values. Example: 25

• Boolean: true or false

• Undefined: Variable declared but not assigned

• Null: Represents no value

let name = " Rahim ";

let marks = 85;
let passed = true ;
let score ; // undefined
let data = null ;

5
1.5.1 String Data Type
A string is used to store text. Strings can be written using:

• Double quotes: “Hello”

• Single quotes: ‘Hello’

1. String Immutability Strings in JavaScript are immutable. This means once a

string is created, its characters cannot be changed.
let text = " Hello ";
text [0] = " Y ";
console . log ( text ) ; // Still " Hello "

To modify a string, you must create a new string:

let text = " Hello ";
text = " Y " + text . slice (1) ;
console . log ( text ) ; // Yello

2. Accessing String Elements You can access characters using index (starts from
0).
let word = " JavaScript ";
console . log ( word [0]) ; // J
console . log ( word [4]) ; // S

3. String Length Use [Link]

let message = " Hello ";
console . log ( message . length ) ; // 5

4. Common String Methods More built in methods

let str = " JavaScript ";

console . log ( str . toUpperCase () ) ; // JAVASCRIPT

console . log ( str . toLowerCase () ) ; // javascript
console . log ( str . includes (" Script ") ) ; // true
console . log ( str . indexOf (" a ") ) ; // 1
console . log ( str . slice (0 ,4) ) ; // Java

2 JavaScript Operators
Operators are symbols used to perform operations on values and variables.

6
2.1 Arithmetic Operators
• + (Addition)

• - (Subtraction)

• * (Multiplication)

• / (Division)

• % (Modulus)

• ** (Exponentiation)

let a = 10;
let b = 3;

console . log ( a + b); // 13

console . log ( a - b); // 7
console . log ( a * b); // 30
console . log ( a / b); // 3.33
console . log ( a % b); // 1
console . log ( a ** 2) ; // 100

2.2 Assignment Operators

let x = 5;
x += 3; // x = x + 3
x -= 2;
x *= 2;
x /= 3;

2.3 Comparison Operators

Used to compare values (returns true or false).

• == (Equal value)

• === (Equal value and type)

• != (Not equal)

• !== (Not equal value or type)

• >, <, >=, <=

console . log (5 == "5") ; // true

console . log (5 === "5") ; // false
console . log (10 > 5) ; // true

Note: Always prefer === for strict comparison.

7
2.4 Logical Operators
• && (AND)

• ||(OR)

• ! (NOT)

• != (NOT Equal)

let age = 20;

let hasID = true ;

console . log ( age > 18 && hasID ) ; // true

console . log ( age < 18 || hasID ) ; // true
console . log (! hasID ) ; // false

2.5 Increment and Decrement

let num = 5;
num ++; // 6
num - -; // 5

2.6 Type Operators

let value = 10;
console . log ( typeof value ) ; // number

typeof is used to check data type.

—

2.7 Conditional Statements (If-Else, Else If, Switch)

Conditional statements are used to execute different blocks of code based on different
conditions.

2.7.1 Simple if Statement

Used when you want to execute code only if a condition is true.
let age = 18;
// If the condition is false , nothing happens .
if ( age >= 18) {
console . log (" You can vote ") ;
}

8
2.7.2 else if Statement
Used when you have multiple conditions.
let marks = 75;

if ( marks >= 80) {

console . log (" Grade A ") ;
} else if ( marks >= 60) {
console . log (" Grade B ") ;
} else if ( marks >= 40) {
console . log (" Grade C ") ;
} else {
console . log (" Fail ") ;
}

JavaScript checks conditions from top to bottom. When one condition becomes true,
it stops checking.
—

2.7.3 4. switch Statement

Used when you want to compare one value with multiple exact cases.
Syntax:
switch ( expression ) {
case value1 :
// code
break ;
case value2 :
// code
break ;
default :
// code
}

Example:
let day = 2;

switch ( day ) {
case 1:
console . log (" Monday ") ;
break ;
case 2:
console . log (" Tuesday ") ;
break ;
case 3:
console . log (" Wednesday ") ;
break ;
default :
console . log (" Invalid day ") ;
}

9
 Important: The break statement prevents execution from continuing to the next
case.
—

2.7.4 Switch Without Break (Fall-through Example)

let fruit = " apple ";

switch ( fruit ) {
case " apple ":
case " mango ":
console . log (" This is a fruit ") ;
break ;
default :
console . log (" Unknown item ") ;
}

Both ”apple” and ”mango” execute the same block.

—

2.7.5 Best Practices

• Use if-else when conditions involve ranges or complex logic.

• Use switch when comparing one variable to many fixed values.

• Always use break in switch to avoid unintended execution.

2.8 1.6 Loops

Loops allow repeating a block of code multiple times.
For Loop:
for ( let i = 1; i <= 5; i ++) {
console . log ( i ) ;
}

While Loop:
let i = 1;
while ( i <= 5) {
console . log ( i ) ;
i ++;
}

Break Statement: Stops the loop completely when a condition is met.

for ( let i = 1; i <= 5; i ++) {
if ( i === 3) {
break ; // exits loop when i is 3
}

10
 console . log ( i ) ;
}
// Output : 1 2

Continue Statement: Skips the current iteration and continues with the next one.
for ( let i = 1; i <= 5; i ++) {
if ( i === 3) {
continue ; // skip when i is 3
}
console . log ( i ) ;
}
// Output : 1 2 4 5

3 Lesson 2: JavaScript Arrays

3.1 Definition
An Array in JavaScript is a special data structure used to store multiple values in a
single variable.

• Arrays are ordered.

• Arrays are zero-indexed.

• Arrays can store mixed data types.

• Arrays are mutable.

let fruits = [" Apple " , " Mango " , " Banana " , 2026 , 2027 , null ];

3.2 Creating Arrays

3.2.1 A. Array Literal (Recommended)

let numbers = [1 , 2 , 3 , 4];

3.2.2 B. Array Constructor

let arr = new Array (5) ; // Creates empty array of length 5

Note: new Array(5) creates empty slots, not actual numbers.

—

11
3.3 Accessing Elements
• Index starts from 0.

• Last index = length - 1.

let fruits = [" Apple " , " Mango " , " Banana "];

console . log ( fruits [0]) ; // Apple

console . log ( fruits [2]) ; // Banana
console . log ( fruits [ fruits . length - 1]) ; // Banana

3.4 Modifying Elements

Arrays are mutable, elements can be changed directly.
let fruits = [" Apple " , " Mango " , " Banana "];

fruits [1] = " Orange ";

console . log ( fruits ) ;
// Output : [" Apple " , " Orange " , " Banana "]

3.5 Built-in Methods

3.5.1 Adding and Removing Elements

// Add to end
fruits . push (" Guava ") ;

// Remove from end

fruits . pop () ;

// Add to beginning
fruits . unshift (" Lemon ") ;

// Remove from beginning

fruits . shift () ;

3.5.2 Searching Methods

// Find index
console . log ( fruits . indexOf (" Mango ") ) ;

// Check existence
console . log ( fruits . includes (" Apple ") ) ;

12
3.5.3 Slicing and Splicing
slice(start, end) – Returns a portion of the array without modifying the original array.
// Original array
let fruits = [" Apple " , " Mango " , " Banana " , " Orange " , " Guava "];

// Get first two elements

let firstTwo = fruits . slice (0 , 2) ;
console . log ( firstTwo ) ; // [" Apple " , " Mango "]

// Get elements from index 2 to end

let fromTwo = fruits . slice (2) ;
console . log ( fromTwo ) ; // [" Banana " , " Orange " , " Guava "]

// Using negative indices ( count from end )

let lastTwo = fruits . slice ( -2) ;
console . log ( lastTwo ) ; // [" Orange " , " Guava "]

// Original array remains unchanged

console . log ( fruits ) ; // [" Apple " , " Mango " , " Banana " , "
Orange " , " Guava "]

—
splice(start, deleteCount, items...) – Modifies the original array by removing
and/or adding elements.
// Remove 1 element at index 1
fruits . splice (1 , 1) ;
console . log ( fruits ) ; // [" Apple " , " Banana " , " Orange " , " Guava "]

// Insert elements at index 2 without removing

fruits . splice (2 , 0 , " Papaya " , " Kiwi ") ;
console . log ( fruits ) ; // [" Apple " , " Banana " , " Papaya " , " Kiwi " , "
Orange " , " Guava "]

// Replace 2 elements starting at index 3

fruits . splice (3 , 2 , " Mango " , " Lemon ") ;
console . log ( fruits ) ; // [" Apple " , " Banana " , " Papaya " , " Mango " , "
Lemon " , " Guava "]

// Remove elements from end

fruits . splice ( -2 , 2) ;
console . log ( fruits ) ; // [" Apple " , " Banana " , " Papaya " , " Mango "]

3.6 Iteration Techniques

let fruits = [" Apple " , " Mango " , " Banana " , " Orange " , " Guava "];

// Using traditional for loop

13
for ( let i = 0; i < fruits . length ; i ++) {
console . log ( fruits [ i ]) ;
}

3.7 Multidimensional Arrays

let matrix = [
[1 , 2] ,
[3 , 4]
];

console . log ( matrix [0][1]) ; // 2

14