JavaScript Notes

A clear revision book for full-stack bootcamp students

Prepared for DIT TechSpace

Purpose of these notes

These notes are written as a simple book that can be used in two ways: first, as teaching
material during a JavaScript class, and second, as a revision handbook after class. The notes
begin with the fundamentals and move gradually into the more practical and modern parts of
JavaScript that students meet in React and full-stack development.

JavaScript is one of the core languages of the web. HTML gives a page its structure, CSS gives it
style, and JavaScript gives it behavior. When you click a button, validate a form, show data
from an API, or build a modern interactive web application, JavaScript is usually involved.

1. Introducing JavaScript
JavaScript is a programming language used to make web pages interactive and dynamic.
Without JavaScript, most pages would only display static text and images. With JavaScript, a
page can react to user actions, update itself, and communicate with servers.

A useful way to remember the three main web languages is this: HTML builds the structure of
a page, CSS controls the appearance of the page, and JavaScript controls the behavior of the
page.

 Use JavaScript to respond to clicks, keyboard input, and form submissions.

 Use JavaScript to show, hide, or update content on a page.
 Use JavaScript to fetch data from APIs and display it to users.
 Use JavaScript on the frontend and, with [Link], on the backend.

Writing JavaScript
JavaScript can be written directly inside an HTML document using the <script> tag, or it can be
written in a separate file with the .js extension. In practice, separate files are better for real
projects because they keep code organized and easier to maintain.

During learning, the browser console is very important. The command [Link]() prints
values to the console and helps us see what the program is doing.
 [Link]("Hello, JavaScript!");

alert("Welcome to the class");

2. Variables and Data Types

A variable is a named container that stores a value. In JavaScript, we usually create variables
with let or const. Use let when the value may change later. Use const when the value should
stay the same.

let name = "Amina";

let age = 20;

const country = "Tanzania";

age = 21;

[Link](name, age, country);

JavaScript works with different kinds of data. A string stores text, a number stores numeric
values, and a boolean stores true or false. There are also special values such as null, which
represents an intentional empty value, and undefined, which means a value has not yet been
assigned.

 String: text such as "Hello"

 Number: whole numbers and decimals such as 10 or 3.14
 Boolean: true or false
 Null: an empty value chosen on purpose
 Undefined: a value that does not exist yet
 Array: a list of values
 Object: a collection of key-value pairs

let title = "JavaScript Basics";

 let score = 85;

let passed = true;

let result = null;

let x;

[Link](typeof title);

[Link](typeof score);

[Link](typeof passed);

[Link](x);

3. Operators
Operators are symbols that perform work on values. Arithmetic operators do calculations.
Comparison operators compare values. Logical operators combine conditions.

 Arithmetic operators: +, -, *, /, %
 Comparison operators: >, <, >=, <=, ==, ===, !=, !==
 Logical operators: &&, ||, !

let a = 10;

let b = 3;

[Link](a + b); // addition

[Link](a - b); // subtraction

[Link](a * b); // multiplication

[Link](a / b); // division

[Link](a % b); // remainder

A very important point for revision is the difference between == and ===. The operator ==
compares values loosely and may convert types automatically. The operator === compares
both value and type. In modern JavaScript, === is usually safer and preferred.

[Link](10 == "10"); // true

[Link](10 === "10"); // false

4. User Input and Output

In simple browser-based programs, prompt() can be used to ask a user for input, alert() can
show a popup message, and [Link]() can print information to the console. These are
useful for learning because they make programs interactive with very little code.

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

alert("Welcome " + userName);

[Link]("The user entered:", userName);

5. Decision Making with if Statements

Programs often need to choose between different actions. Conditional statements allow a
program to make decisions. The if statement runs code only when a condition is true. The else
block runs when the condition is false. The else if block checks another condition.

let marks = 67;

if (marks >= 80) {

[Link]("Grade A");
 } else if (marks >= 60) {

[Link]("Grade B");

} else if (marks >= 50) {

[Link]("Grade C");

} else {

[Link]("Fail");

Conditions are important in almost every real application. Login checks, pass or fail systems,
role-based dashboards, and validation rules all depend on conditional logic.

6. Loops
A loop repeats code. Instead of writing the same line many times, we use a loop to perform the
same action again and again. The most common loops at this level are the for loop and the
while loop.

for (let i = 1; i <= 5; i++) {

[Link]("Number:", i);

let count = 1;

while (count <= 5) {

[Link]("Count:", count);
 count++;

Loops are useful for tasks such as displaying list items, repeating menu options, and
processing arrays.

7. Functions
A function is a reusable block of code. We write the logic once and call it whenever we need it.
Functions help keep code clean, organized, and easier to understand.

function greet(name) {

return "Hello, " + name;

[Link](greet("Juma"));

The values written inside the function definition are called parameters. The values supplied
when calling the function are called arguments. A function may also return a value using the
return keyword.

function addNumbers(a, b) {

return a + b;

let result = addNumbers(4, 6);

[Link](result);
8. Arrays
An array stores multiple values in a single variable. Each value has a position called an index.
Indexing starts from 0, not 1. This means the first item is at index 0, the second at index 1, and
so on.

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

[Link](fruits[0]);

[Link](fruits[2]);

Arrays also have useful methods. The push() method adds a new item to the end of an array,
and pop() removes the last item.

let tasks = ["Read", "Practice"];

[Link]("Build");

[Link]();

[Link](tasks);

9. Objects
An object groups related data using key-value pairs. Objects are very useful when a single
thing has many properties, such as a student, a car, a phone, or a user account.

let student = {
 name: "Neema",

age: 21,

course: "Software Engineering"

};

[Link]([Link]);

[Link]([Link]);

Objects are one of the most important structures in JavaScript. In React, APIs, and backend
development, you will work with objects all the time.

10. The Document Object Model (DOM)

The DOM, or Document Object Model, is the browser's representation of an HTML page.
JavaScript can use the DOM to select elements, change text, update styles, create new elements,
and listen for events.

This is the bridge between JavaScript and the page itself. When JavaScript changes content on
the page, it is usually doing so through the DOM.

<h1 id="title">Hello Student</h1>

<button Me</button>

<script>

function changeTitle() {

[Link]("title").textContent = "Welcome to JavaScript";

</script>
11. Events
An event is something that happens in the browser. Common examples are clicking a button,
typing in a field, submitting a form, or moving the mouse. JavaScript can listen for events and
run code when they happen.

const button = [Link]("btn");

[Link]("click", function () {

[Link]("Button clicked");

});

Events make user interfaces interactive. Without events, a page would not react to what the
user does.

12. Scope and Modern JavaScript

Scope means where a variable can be used. A variable declared outside a function is in global
scope and can usually be used almost anywhere. A variable declared inside a function is in
local scope and can only be used inside that function.

let school = "DIT";

function showInfo() {

let course = "Computer Engineering";

[Link](school);

[Link](course);

}
Modern JavaScript also uses arrow functions. These are shorter ways of writing functions and
are especially common in React.

const multiply = (a, b) => {

return a * b;

};

[Link](multiply(3, 4));

Template literals use backticks instead of quotation marks and make it easier to insert
variables into strings.

let name = "Asha";

let message = `Hello, ${name}`;

[Link](message);

13. Destructuring and Useful Array Methods

Destructuring is a modern JavaScript feature that makes it easier to extract values from arrays
and objects.

const colors = ["red", "blue", "green"];

const [first, second] = colors;

[Link](first);
 [Link](second);

const user = {

name: "Brian",

age: 22

};

const { name, age } = user;

[Link](name, age);

Three array methods are especially important: map(), filter(), and find(). They are heavily used
in modern frontend development.

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

const doubled = [Link](num => num * 2);

const even = [Link](num => num % 2 === 0);

const firstBig = [Link](num => num > 2);

[Link](doubled);

[Link](even);

[Link](firstBig);
 map() creates a new array by transforming each item.
 filter() creates a new array containing only matching items.
 find() returns the first matching item.

14. JSON
JSON stands for JavaScript Object Notation. It is a standard way of storing and exchanging
data. When JavaScript communicates with APIs, the data is often sent and received in JSON
format.

const user = {

name: "Kevin",

age: 20

};

const jsonText = [Link](user);

[Link](jsonText);

const convertedBack = [Link](jsonText);

[Link]([Link]);

15. Error Handling

Programs sometimes fail because of invalid input, missing values, or unexpected situations.
The try...catch statement helps us handle such errors more safely.

try {

[Link](result);

} catch (error) {
 [Link]("An error occurred:", [Link]);

Error handling is important because it helps prevent the entire program from crashing and
gives the developer useful information about what went wrong.

16. Asynchronous JavaScript and APIs

Not all JavaScript tasks finish immediately. Some take time, such as getting data from a server.
This is where asynchronous programming becomes important.

The fetch() function is used to request data from an API. The response usually arrives later, so
JavaScript must wait for it.

fetch("[Link]

.then(response => [Link]())

.then(data => {

[Link](data);

});

A cleaner modern style uses async and await. This style is easier to read, especially when code
becomes larger.

async function getUsers() {

const response = await fetch("[Link]

const data = await [Link]();

[Link](data);

}
 getUsers();

Asynchronous JavaScript is one of the key concepts behind modern apps. Every time a page
loads posts, messages, products, or user profiles without refreshing the whole page,
asynchronous code is usually involved.

17. Simple Programs for Practice

The following mini programs are good practice for revision. They bring together input,
conditions, functions, and DOM manipulation.

17.1 Even or Odd Checker

let number = Number(prompt("Enter a number"));

if (number % 2 === 0) {

alert("Even number");

} else {

alert("Odd number");

17.2 Simple Calculator

let num1 = Number(prompt("Enter the first number"));

let num2 = Number(prompt("Enter the second number"));

let sum = num1 + num2;

 alert("The sum is " + sum);

17.3 Counter App

<h2 id="count">0</h2>

<button >

<script>

let count = 0;

function increase() {

count++;

[Link]("count").textContent = count;

</script>

17.4 Simple To-Do List

<input type="text" id="task" placeholder="Enter task">

<button >

<ul id="taskList"></ul>

<script>

function addTask() {
 let task = [Link]("task").value;

let li = [Link]("li");

[Link] = task;

[Link]("taskList").appendChild(li);

[Link]("task").value = "";

</script>

18. Quick Revision Questions

1. What is JavaScript and why is it important in web development?
2. What is the difference between let and const?
3. What is the difference between == and ===?
4. What is an array and how is it different from an object?
5. What is the purpose of an if statement?
6. Why do we use loops?
7. What is a function and why is it useful?
8. What does the DOM do?
9. What is an event in JavaScript?
10. What do map(), filter(), and find() do?
11. What is JSON used for?
12. Why do we need asynchronous JavaScript?

19. Final Summary

JavaScript begins with simple ideas such as variables, conditions, loops, and functions, but it
grows into a very powerful language used for frontend interfaces, API communication, and
full-stack development. For a student moving toward React and modern web applications,
JavaScript is not optional; it is a foundation.

A strong revision strategy is to practice writing small programs repeatedly. Read the concept,
type the example code yourself, change some values, and observe the output. Programming
becomes clearer when you combine theory with repetition and practice.