Basic JavaScript Program
[Link]("Hello, World!");
Line-by-Line Explanation
[Link]("Hello, World!");
console
A built-in JavaScript object.
Used for debugging and output.
Think of it like a toolbox.
.log()
A method/function inside console.
Displays output in the browser console.
Example:
[Link]("Hi");
Output:
Hi
"Hello, World!"
A string (text value).
Strings are written inside:
" " double quotes
or
' ' single quotes
Example:
"JavaScript"
'Hello'
;
Semicolon.
Marks end of statement.
JavaScript can work without it sometimes, but using it is recommended.
Variables
let name = "John";
let age = 20;
let
Declares a variable.
Variables store data.
Think of variables as labeled boxes.
name
Variable name.
Assignment operator.
Stores value into variable.
Example:
let x = 5;
means:
“Store 5 inside x”
"John"
String value.
20
Number value.
JavaScript does not separate integer and float types like Python.
Printing Variables
[Link](name);
[Link](age);
Output:
John
20
Data Types
String
let city = "Dubai";
Used for text.
Number
let price = 19.99;
Used for integers and decimals.
Examples:
10
5.5
-3
Boolean
let isActive = true;
Only two values:
o true
o false
Used in conditions.
Undefined
let value;
Variable declared but no value assigned.
Output:
undefined
Taking User Input
let name = prompt("Enter your name");
prompt()
Displays input box in browser.
Takes user input.
Example popup:
Enter your name
Combining Strings
[Link]("Hello " + name);
If:
name = "Alex";
Output:
Hello Alex
Joins strings together.
Called concatenation.
Template Literals
[Link](`Hello ${name}`);
` `
Backticks create template literals.
${}
Inserts variable into string.
Example:
let age = 20;
[Link](`Age is ${age}`);
Output:
Age is 20
Math Operations
let a = 10;
let b = 5;
Addition
[Link](a + b);
Output:
15
Subtraction
[Link](a - b);
Output:
5
Multiplication
[Link](a * b);
Output:
50
Division
[Link](a / b);
Output:
Comments
Single-line Comment
// This is a comment
Ignored by JavaScript.
Used for notes.
Multi-line Comment
/*
This is
multi-line comment
*/
If Condition
let age = 18;
if (age >= 18) {
[Link]("Adult");
}
if
Checks condition.
( )
Condition written inside parentheses.
>=
Greater than or equal to.
Examples:
10 >= 5 // true
3 >= 8 // false
{ }
Curly braces define code block.
Else Condition
if (age >= 18) {
[Link]("Adult");
} else {
[Link]("Minor");
}
else
Runs when condition is false.
Loops
For Loop
for (let i = 0; i < 5; i++) {
[Link](i);
}
Output:
0
1
2
3
4
for
Repeats code multiple times.
let i = 0
Starting value.
i < 5
Loop continues while condition true.
i++
Increases value by 1.
Equivalent to:
i = i + 1;
While Loop
let count = 1;
while (count <= 3) {
[Link](count);
count++;
}
Output:
1
2
3
while
Repeats while condition is true.
Functions
function greet() {
[Link]("Hello");
}
function
Defines reusable code.
greet
Function name.
Calling Function
greet();
Output:
Hello
Function with Parameters
function greet(name) {
[Link]("Hello " + name);
}
name
Parameter.
Receives value.
Example:
greet("Sam");
Output:
Hello Sam
Arrays
let fruits = ["Apple", "Banana", "Orange"];
Stores multiple values.
Access Array Items
[Link](fruits[0]);
Output:
Apple
Indexes
Index Value
0 Apple
1 Banana
2 Orange
Adding Array Items
[Link]("Mango");
Adds item to end.
Objects
let student = {
name: "John",
age: 20
};
Stores data using key-value pairs.
Access Object Values
[Link]([Link]);
Output:
John
DOM Manipulation
[Link]("title").innerHTML = "Hello";
document
Represents webpage.
getElementById()
Finds HTML element by ID.
Example:
<h1 id="title"></h1>
innerHTML
Changes HTML content inside element.
Events
[Link]("click", function() {
[Link]("Button clicked");
});
addEventListener()
Waits for event.
"click"
Event type.
Examples:
"mouseover"
"keydown"
Classes
class Person {
constructor(name) {
[Link] = name;
}
}
class
Blueprint for objects.
constructor
Runs automatically when object created.
this
Refers to current object.
Creating Object
let p1 = new Person("Alex");
new
Creates object from class.
Accessing Object Data
[Link]([Link]);
Output:
Alex
Important JavaScript Concepts Summary
Concept Meaning
Variable Stores data
Function Reusable code
Array Multiple values
Object Key-value data
Loop Repeats code
Condition Decision making
DOM Webpage structure
Event User interaction
Class Blueprint for objects
Console Debug/output tool