JavaScript Basics, Intermediate
Concepts and API Usage
Prepared by: Yasar Ali M
Date: 16 December 2025
1. Introduction to JavaScript
Explanation
JavaScript is a high-level, interpreted programming language used to create dynamic and
interactive web applications. It works in combination with HTML and CSS. JavaScript executes
inside the browser and allows developers to handle user events, manipulate webpage content,
and communicate with servers. Modern JavaScript is also used for backend, mobile, and desktop
application development.
Example
[Link]("JavaScript is running");
Output
JavaScript is running
2. How JavaScript Executes in the Browser
Explanation
When a webpage loads, the browser first parses HTML, applies CSS, and then executes
JavaScript. JavaScript follows single-threaded execution and runs line by line. To avoid accessing
HTML elements before they load, scripts are often placed at the bottom of the body or executed
after the DOMContentLoaded event.
Example
[Link]("DOMContentLoaded", () => {
[Link]("DOM fully loaded");
});
Output
DOM fully loaded
3. Variables and Data Storage
Explanation
Variables are used to store data values. JavaScript provides let and const keywords. The let
keyword allows reassignment, while const prevents reassignment and promotes safer code
practices.
Example
let age = 21;
const name = 'Yasar';
[Link](age, name);
Output
21 Yasar
4. Data Types in JavaScript
Explanation
JavaScript supports primitive data types such as string, number, boolean, undefined, null, and
symbol. It also supports non-primitive types like objects and arrays. Understanding data types is
essential for effective programming and avoiding runtime errors.
Example
let score = 95;
let passed = true;
[Link](typeof score, typeof passed);
Output
number boolean
5. Operators
Explanation
Operators are used to perform operations on values and variables. JavaScript supports
arithmetic, comparison, logical, and assignment operators.
Example
let a = 10;
let b = 5;
[Link](a + b, a > b);
Output
15 true
6. Conditional Statements
Explanation
Conditional statements allow JavaScript to make decisions based on conditions. Common
conditional statements include if, else if, and else.
Example
let age = 20;
if (age >= 18) {
[Link]('Eligible');
} else {
[Link]('Not Eligible');
}
Output
Eligible
7. Loops
Explanation
Loops are used to repeat a block of code multiple times. JavaScript supports for, while, and do-
while loops.
Example
for (let i = 1; i <= 3; i++) {
[Link](i);
}
Output
123
8. Functions
Explanation
Functions are reusable blocks of code that perform specific tasks. They improve modularity and
reduce repetition. JavaScript supports normal and arrow functions.
Example
function greet(name) {
return 'Hello ' + name;
}
[Link](greet('User'));
Output
Hello User
9. Arrays
Explanation
Arrays store multiple values in a single variable. They are commonly used to store lists of data.
Example
const fruits = ['apple', 'banana', 'mango'];
[Link](fruits[1]);
Output
banana
10. Objects
Explanation
Objects store data in key-value pairs and represent real-world entities. They are widely used in
JavaScript applications.
Example
const user = { name: 'Yasar', age: 21 };
[Link]([Link]);
Output
Yasar
11. DOM Manipulation
Explanation
The Document Object Model allows JavaScript to access and modify HTML elements
dynamically. DOM manipulation is used to update content, styles, and structure at runtime.
Example
[Link]('title').innerText = 'Updated';
Output
The element text changes to 'Updated'
12. Events
Explanation
Events represent user actions such as clicks and key presses. JavaScript listens to events and
executes functions in response.
Example
[Link]('click', () => {
alert('Clicked');
});
Output
An alert box appears with message 'Clicked'
13. Introduction to APIs
Explanation
An API allows applications to communicate with servers. APIs commonly exchange data in JSON
format and are used for fetching external data.
Example
fetch('[Link]
.then(res => [Link]())
.then(data => [Link](data));
Output
A list of user objects is displayed in the console
14. Fetch API with Async/Await
Explanation
Async and await provide a cleaner way to handle asynchronous operations. They improve
readability when working with APIs.
Example
async function loadData() {
const res = await fetch('[Link]
const data = await [Link]();
[Link](data);
}
loadData();
Output
Post data is displayed in the console