Introduction to Programming with JavaScript
JavaScript is one of the most widely used programming languages in the
world. It is primarily used to create interactive websites, but it is also used
for server applications, mobile apps, desktop software, and even game
development.
JavaScript runs in web browsers such as Chrome, Firefox, and Edge. When
you visit a modern website, JavaScript is usually responsible for many of the
interactive elements you see, such as animations, menus, forms, and
dynamic content.
Originally created in 1995, JavaScript has grown into a powerful
programming language used by millions of developers. It is now used both
on the front end (what users see in the browser) and the back end (server-
side programming using [Link]).
Learning JavaScript is an excellent introduction to programming because it
teaches core concepts such as variables, logic, loops, functions, and data
structures. These ideas are used in almost every programming language.
In this guide you will learn the fundamentals of JavaScript programming
along with examples, exercises, and real-world applications.
Lesson 1: Your First JavaScript Program
JavaScript programs can be written inside an HTML file using the <script>
tag or in separate .js files.
One of the first commands beginners learn is [Link](). This command
prints information to the browser's developer console.
The console is a tool built into web browsers that allows developers to test
and debug their programs.
Examples
[Link]("Hello World");
[Link]("Welcome to JavaScript programming");
[Link](10 + 5);
[Link]("My name is John");
[Link](true);
Real World Applications
Developers often use console logging to debug code while building websites.
When building large applications, developers print messages to the console
to track program behavior.
Exercises
1. Write a program that prints your name.
2. Print three different messages.
3. Print the result of a math expression.
4. Print your favorite quote.
5. Print both text and numbers.
Lesson 2: Variables
Variables allow programs to store information that can be used later.
In JavaScript, variables are created using let, const, or var.
let is used for variables that may change.
const is used for values that should not change.
var is older and used less often today.
Examples
let age = 25;
const name = "Maria";
let price = 19.99;
let city = "Lisbon";
let isStudent = true;
Real World Applications
Variables are used everywhere in programming. For example:
Storing usernames
Saving user preferences
Tracking shopping cart totals
Exercises
1. Create a variable storing your name.
2. Create a variable storing your age.
3. Create a variable storing your favorite food.
4. Print a variable using [Link]().
5. Change a variable value and print it again.
Lesson 3: Data Types
JavaScript supports several types of data.
The most common data types include:
Number – numeric values
String – text values
Boolean – true or false
Array – lists of values
Object – collections of key-value pairs
Examples
let number = 10;
let text = "Hello";
let isOnline = true;
typeof 42;
typeof "JavaScript";
Real World Applications
Different data types are used for different purposes:
Numbers store prices or scores.
Strings store names and messages.
Booleans track states such as logged in or logged out.
Exercises
1. Create a number variable.
2. Create a string variable.
3. Create a boolean variable.
4. Use typeof to check a variable type.
5. Print all variables to the console.
Lesson 4: Operators and Arithmetic
JavaScript can perform mathematical calculations using operators.
Common operators include:
Addition
Subtraction
Multiplication
/ Division
% Modulus
** Exponentiation
Examples
5+3
10 - 4
6*2
8/2
2 ** 3
Real World Applications
Arithmetic operations are used in:
Shopping cart calculations
Banking software
Game scoring systems
Data analysis tools
Exercises
1. Add two numbers.
2. Multiply two numbers.
3. Divide two numbers.
4. Calculate the area of a rectangle.
5. Calculate the square of a number.
Lesson 5: Conditional Statements
Conditional statements allow programs to make decisions.
The most common conditional structure uses if, else if, and else.
Examples
if (age >= 18) {
[Link]("Adult");
}
if (score > 90) {
[Link]("Excellent");
}
if (loggedIn) {
[Link]("Welcome back");
}
if (x > y) {
[Link]("x is larger");
}
else {
[Link]("Condition not met");
}
Real World Applications
Conditional logic is used in:
Login systems
Online quizzes
Game rules
Form validation
Exercises
1. Write an if statement checking age.
2. Check if a number is positive.
3. Create an if/else statement.
4. Compare two numbers.
5. Print different messages based on a condition.
Lesson 6: Loops
Loops allow programs to repeat actions.
Two common loops are:
for loops
while loops
Examples
for (let i = 0; i < 5; i++) {
[Link](i);
}
for (let n = 1; n <= 10; n++) {
[Link](n);
}
while (x < 5) {
x++;
}
for (let letter of "hello") {
[Link](letter);
}
for (let i = 0; i < 3; i++) {
[Link]("Hi");
}
Real World Applications
Loops are used for:
Displaying lists of products
Processing large datasets
Game animation cycles
Repeating tasks automatically
Exercises
1. Print numbers from 1 to 10.
2. Print even numbers.
3. Print letters in a word.
4. Repeat a message five times.
5. Create a while loop counting to 10.
Lesson 7: Functions
Functions allow programmers to group code into reusable blocks.
Functions can accept inputs called parameters and return results.
Examples
function greet() {
[Link]("Hello");
}
greet();
function add(a, b) {
return a + b;
}
add(3,4);
function square(x) {
return x * x;
}
Real World Applications
Functions are used in:
Button click handlers
Payment calculations
User authentication systems
Exercises
1. Write a function printing your name.
2. Write a function adding two numbers.
3. Write a function multiplying numbers.
4. Call a function three times.
5. Write a function returning a value.
Lesson 8: Arrays
Arrays store multiple values in a single variable.
Examples
let numbers = [1,2,3,4];
numbers[0];
[Link](5);
[Link];
[Link]();
Real World Applications
Arrays are used for:
Product lists
User lists
Music playlists
Game inventories
Exercises
1. Create an array of five numbers.
2. Print the first item.
3. Add a new item.
4. Remove an item.
5. Loop through the array.
Lesson 9: Objects
Objects store information using key-value pairs.
Examples
let person = {
name: "Ana",
age: 25
};
[Link]
[Link]
[Link] = "Lisbon"
[Link](person)
Real World Applications
Objects are used to represent:
Users
Products
Orders
Configuration settings
Exercises
1. Create an object describing yourself.
2. Add a property.
3. Print a property.
4. Modify a value.
5. Display all keys.
Lesson 10: JavaScript and the Web (DOM)
The DOM (Document Object Model) represents the structure of a webpage.
JavaScript can modify the DOM to change content dynamically.
Examples
[Link]("title")
[Link](".menu")
[Link] = "New text"
[Link]("click", function(){})
[Link] = "blue"
Real World Applications
DOM manipulation allows developers to create:
Interactive forms
Dynamic web pages
Menus and navigation systems
Animations and games
Exercises
1. Select an element by ID.
2. Change webpage text.
3. Add a click event.
4. Change page background color.
5. Create a button that prints a message.
Lesson 11: Real World Project – Calculator
A calculator is a classic beginner programming project.
Examples
function add(a,b){
return a+b;
}
function subtract(a,b){
return a-b;
}
function multiply(a,b){
return a*b;
}
function divide(a,b){
return a/b;
}
[Link](add(5,3))
Exercises
1. Create functions for all operations.
2. Test the functions.
3. Print results in the console.
4. Add more operations.
5. Improve the calculator.
Lesson 12: Real World Project – To-Do List App
A to-do list is one of the most common beginner applications.
Examples
let tasks = [];
[Link]("Study JavaScript");
[Link]("Exercise");
[Link](tasks);
[Link](0,1);
Real World Applications
Task management tools like:
Todoist
Microsoft To Do
Notion
Google Tasks
Exercises
1. Create an array of tasks.
2. Add a new task.
3. Remove a task.
4. Display tasks.
5. Connect the program to an HTML page.