Basics of JavaScript – Easy Notes
1. Syntax and Structure
JavaScript has certain rules for writing code. These rules help the computer understand what
you mean.
Statements
A statement is like a single instruction.
Example:
let x = 5;
Semicolons
Semicolons end a statement.
They are optional, but using them is a good habit.
Line Breaks
You can write code on multiple lines to make it more readable.
Example:
let a = 10;
let b = 20;
Comments
Comments are notes for humans, ignored by the computer.
Single-line comment
// This is a comment
Multi-line comment
/* This is
a multi-line comment */
Example: Display variables on the webpage
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Basics</h2>
<p id="demo"></p>
<script>
// Variables
let name = "John"; // String
let age = 20; // Number
const isStudent = true; // Boolean
[Link]("demo").innerHTML =
"Name: " + name + "<br>" +
"Age: " + age + "<br>" +
"Student: " + isStudent;
</script>
</body>
</html>
2. Variables
Variables store data.
Types of variables
var – old way, mostly avoided now
let – used for values that can change
const – used for values that should NOT change
Example:
let age = 20;
const PI = 3.14;
Example: Convert string to number
<!DOCTYPE html>
<html>
<body>
<h2>Type Conversion</h2>
<p id="result"></p>
<script>
let x = "10"; // string
let y = Number(x); // convert to number
[Link]("result").innerHTML =
"Type of x: " + typeof x + "<br>" +
"Type of y: " + typeof y;
</script>
</body>
</html>
3. Primitive Data Types
These are basic types of data in JavaScript:
Type Example Meaning
String "hello" Text
Number 10, 3.14 Numerical values
Boolean true, false Yes/No values
Null null Empty value
Undefined undefined Variable declared but not given a value
Symbol Symbol("id") Unique value used internally
BigInt 12345678901234567890n Very large numbers
Example: Simple calculator
<!DOCTYPE html>
<html>
<body>
<h2>Simple Calculator</h2>
<p id="calc"></p>
<script>
let a = 10;
let b = 5;
let result = a + b; // arithmetic operator
[Link]("calc").innerHTML =
"a + b = " + result;
</script>
</body>
</html>
4. Data Types and Type Conversion
Implicit Conversion (Automatic)
JavaScript automatically converts types when needed.
Example:
"5" + 2 // "52" (number becomes string)
Explicit Conversion (Manual)
You convert types yourself.
Examples:
Number("20") // 20
String(100) // "100"
5. Type Checking
Used to find the type of a value.
typeof
Tells the data type.
typeof "hello" // "string"
typeof 10 // "number"
instanceof
Checks if an object belongs to a class.
[] instanceof Array // true
6. Operators in JavaScript
Operators perform operations.
Types of Operators
Arithmetic: +, -, *, /, %
Assignment: =, +=, -=
Comparison: ==, ===, !=, <, >
Logical: &&, ||, !
String: "Hello" + "World"
7. Control Flow Statements
Used to control how the program runs.
8. Conditionals
These help make decisions.
if
if (age > 18) {
[Link]("Adult");
}
else
if (marks >= 40) {
[Link]("Pass");
} else {
[Link]("Fail");
}
else if
if (score > 90) {
[Link]("A");
} else if (score > 75) {
[Link]("B");
} else {
[Link]("C");
}
switch
Used when you have many cases.
switch(day) {
case 1: [Link]("Monday"); break;
case 2: [Link]("Tuesday"); break;
default: [Link]("Invalid");
}
Example: Check voting age
<!DOCTYPE html>
<html>
<body>
<h2>Conditional Example</h2>
<p id="msg"></p>
<script>
let age = 16;
if (age >= 18) {
[Link]("msg").innerHTML = "You can vote!";
} else {
[Link]("msg").innerHTML = "You cannot vote yet.";
}
</script>
</body>
</html>
Example: Using switch
<!DOCTYPE html>
<html>
<body>
<h2>Switch Example</h2>
<p id="day"></p>
<script>
let num = 3;
let dayName;
switch (num) {
case 1: dayName = "Monday"; break;
case 2: dayName = "Tuesday"; break;
case 3: dayName = "Wednesday"; break;
default: dayName = "Invalid day";
}
[Link]("day").innerHTML = dayName;
</script>
</body>
</html>
9. Loops
Loops repeat a block of code.
for loop
for (let i = 0; i < 5; i++) {
[Link](i);
}
while loop
let i = 0;
while (i < 5) {
[Link](i);
i++;
}
do…while loop
Runs at least once.
let i = 0;
do {
[Link](i);
i++;
} while (i < 5);
Example: Print numbers using for loop
<!DOCTYPE html>
<html>
<body>
<h2>For Loop</h2>
<p id="nums"></p>
<script>
let text = "";
for (let i = 1; i <= 5; i++) {
text += i + " ";
}
[Link]("nums").innerHTML = text;
</script>
</body>
</html>
Example: while loop
<!DOCTYPE html>
<html>
<body>
<h2>While Loop</h2>
<p id="list"></p>
<script>
let i = 1;
let output = "";
while (i <= 5) {
output += i + " ";
i++;
}
[Link]("list").innerHTML = output;
</script>
</body>
</html>
Example: do…while loop
<!DOCTYPE html>
<html>
<body>
<h2>Do While Loop</h2>
<p id="demo"></p>
<script>
let i = 1;
let result = "";
do {
result += i + " ";
i++;
} while (i <= 5);
[Link]("demo").innerHTML = result;
</script>
</body>
</html>
10. Loop Control
Used to control loop behavior.
break
Stops the loop completely.
for (let i = 0; i < 10; i++) {
if (i === 5) break;
}
continue
Skips the current iteration.
for (let i = 0; i < 10; i++) {
if (i === 5) continue;
[Link](i);
}
11. Type Conversion
This means JavaScript changes data types automatically.
Example:
"5" - 2 // 3 (string becomes number)
This is different from "5" + 2 which gives "52".
Auto conversion by JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Type Coercion</h2>
<p id="coerce"></p>
<script>
let result1 = "5" + 2; // "52" (number → string)
let result2 = "5" - 2; // 3 (string → number)
[Link]("coerce").innerHTML =
"Result of '5' + 2 = " + result1 + "<br>" +
"Result of '5' - 2 = " + result2;
</script>
</body>
</html>
