Web Development | Javascript Tutorial

Introduction to JavaScript

What is JavaScript?

JavaScript is the language that makes web pages interactive. If HTML is the structure and CSS is the style, JavaScript controls the behavior — what happens when the user interacts with the page.

When you click a button and a message appears.
When the image changes when you hover over it.
When the form automatically checks if you filled it correctly.

Writing your first JavaScript script

JavaScript is written between <script> tags. The code can be included directly on the page or in a separate file.

🔧 Live Example: First JavaScript Script

Click on the JS TAB and then on the Preview TAB!

alert("Hello world!");

The browser console – What it is and how to use it?

The console is a developer tool that shows us what happens “behind the scenes”. Here we can see messages, errors, and test JavaScript code.

How to open it:

Press F12 on the keyboard.
Or right-click on the page → Inspect → Console tab.

Example of code that writes to the console:

🔧 Live Example: Console.log

<p>Click the "Preview" TAB, press F12, and then click on the "Console" TAB to open the browser console and see the messages.</p>

body { font-family: sans-serif; font-size: 18px; padding: 20px; }

let message = "Hello John!";
let age = 33;
console.log(message);
console.log("Age: " + age);

Visual alternative: Display directly on the page

For beginners, it is more intuitive to see the result directly on the page, not just in the console.

🔧 Live Example: Display on Page

<p id="output"></p>

body { font-family: sans-serif; font-size: 18px; padding: 20px; }

let message = "Hello John!";
let age = 33;
document.getElementById("output").innerText = message + " You are " + age + " years old.";

Comments in JavaScript

Comments are explanations in the code that are not executed. We use them for clarity or to temporarily disable a part of the code.

🔧 Live Example: Comments

<p id="comment"></p>

// This is a single-line comment
/*
This is a multi-line comment
*/
document.getElementById("comment").innerText = "Comments do not execute but help understand the code.";

Data types: String and Number

JavaScript works with different types of information, called data types. The most common are:

String – text between quotes: "Hello"
Number – integers or decimals: 42, 3.14

🔧 Live Example: Data Types

<p id="types"></p>

let message = "Hello John!";
let age = 33;
document.getElementById("types").innerText = message + " You are " + age + " years old.";

Variables and naming conventions

A variable is like a box where we store a value. It is declared with let, const, or var.

🔧 Live Example: Variables

<p id="variable"></p>

let name = "John";
const country = "Romania";
document.getElementById("variable").innerText = "Hello, " + name + " from " + country + "!";

What is camelCase?

camelCase is a writing convention where:

The first word starts with a lowercase letter.
Each new word starts with an uppercase letter.

Example:

let fullName = "John Smith";

It is called “camelCase” because it looks like a camel's hump: it starts low and rises with each new word.

🔧 Live Example: camelCase

<p id="camel"></p>

let fullName = "John Smith";
document.getElementById("camel").innerText = "Full name is: " + fullName;

Special Data Types in JavaScript

Boolean – True or False

A boolean data type has only two possible values: true or false.

It is used to check conditions, control program logic, and answer "yes" or "no" questions.

let isLoggedIn = true;
let hasCorrectPassword = false;

We can use these values in conditions:

if (isLoggedIn) {
  console.log("Welcome!");
}

🔧 Live Example: Boolean

<p id="status"></p>

let isLoggedIn = true;
if (isLoggedIn) {
  document.getElementById("status").innerText = "✅ Welcome!";
} else {
  document.getElementById("status").innerText = "❌ Access denied.";
}

Null – Intentional absence of a value

null is a special value that means "nothing" or "empty", but intentionally set by the programmer.

It is used when we want to indicate that a variable does not yet have a value, but will receive one later.

let result = null; // currently no result

Later we can update it:

result = "Success!";

🔧 Live Example: Null

<p id="result"></p>

let result = null;
if (result === null) {
  document.getElementById("result").innerText = "⏳ Result is not yet available.";
}
result = "✅ Operation successful!";
setTimeout(() => {
  document.getElementById("result").innerText = result;
}, 2000);

Undefined – Declared but unassigned variable

undefined appears automatically when:

We declare a variable but do not assign a value.
We try to access a property that does not exist.

let name;
console.log(name); // will display "undefined"

It is different from null, which is intentionally set. undefined appears by default.

🔧 Live Example: Undefined

<p id="name"></p>

let name;
document.getElementById("name").innerText = "Variable value is: " + name;

Comparing Null and Undefined

Although both mean "no value", they are different:

null – value set by the programmer.
undefined – value implicit when nothing has been set.

let a = null;
let b;
console.log(a === b); // false

☞ In JavaScript, null and undefined are treated differently in strict comparisons (===).

Logical Operators in JavaScript

Logical operators are used to combine or compare boolean expressions. The result is always true or false.

The `AND` Operator – `&&`

Returns true only if both conditions are true.

let isLoggedIn = true;
let hasAccess = true;

if (isLoggedIn && hasAccess) {
  console.log("✅ Access granted");
}

🔧 Live Example: AND Operator

<p id="access"></p>

let isLoggedIn = true;
let hasAccess = true;

if (isLoggedIn && hasAccess) {
  document.getElementById("access").innerText = "✅ Access granted";
} else {
  document.getElementById("access").innerText = "❌ Access denied";
}

The `OR` Operator – `||`

Returns true if at least one of the conditions is true.

let hasInvitation = false;
let isVIP = true;

if (hasInvitation || isVIP) {
  console.log("✅ You may enter");
}

🔧 Live Example: OR Operator

<p id="entry"></p>

let hasInvitation = false;
let isVIP = true;

if (hasInvitation || isVIP) {
  document.getElementById("entry").innerText = "✅ You may enter";
} else {
  document.getElementById("entry").innerText = "❌ Access denied";
}

The `NOT` Operator – `!`

Inverts the value: !true becomes false, and !false becomes true.

let isTired = false;

if (!isTired) {
  console.log("✅ You can continue working");
}

🔧 Live Example: NOT Operator

<p id="energy"></p>

let isTired = false;

if (!isTired) {
  document.getElementById("energy").innerText = "✅ You can continue working";
} else {
  document.getElementById("energy").innerText = "😴 Take a break";
}

Combining Logical Operators

We can combine multiple operators for complex conditions:

let isLoggedIn = true;
let hasAdminRole = false;
let correctPassword = true;

if ((isLoggedIn && correctPassword) || hasAdminRole) {
  console.log("✅ Access granted");
}

☞ Parentheses help group conditions logically and avoid ambiguity.

Comparison Operators in JavaScript

Comparison operators are used to compare two values. The result is always true or false.

Loose equality – `==`

Compares two values after type conversion. That is, if the types are different, JavaScript tries to convert them.

console.log(5 == "5"); // true – automatic conversion

Strict equality – `===`

Compares both value and type. Recommended for precision.

console.log(5 === "5"); // false – different types

🔧 Live Example: Equality

<p id="equality"></p>

let a = 5;
let b = "5";

let loose = (a == b);     // true
let strict = (a === b);  // false

document.getElementById("equality").innerText =
  "== (loose): " + loose + " | === (strict): " + strict;

Difference – `!=` and `!==`

!= checks if values are different (with conversion), while !== checks difference without conversion.

console.log(5 != "5");   // false
console.log(5 !== "5");  // true

Less / Greater

The operators <, >, <=, >= compare numbers:

let x = 10;
let y = 7;

console.log(x > y);   // true
console.log(x <= y);  // false

🔧 Live Example: Interactive Numeric Comparison

<input type="number" id="x" value="10">
<input type="number" id="y" value="7">
<button id="compareBtn">Compare</button>
<p id="comparison"></p>

input, button { margin: 5px; padding: 6px; font-size: 16px; }

document.getElementById("compareBtn").addEventListener("click", function() {
  let x = parseFloat(document.getElementById("x").value);
  let y = parseFloat(document.getElementById("y").value);
  document.getElementById("comparison").innerText = "x > y: " + (x > y);
});

Recommendation

☞ Use === and !== instead of == and != to avoid errors caused by automatic conversions.

Conditional Statements in JavaScript

Conditional statements allow the code to make decisions based on certain conditions. The most common are:

if – executes code if a condition is true
else – executes code if the condition is false
else if – checks another condition if the first was false
switch – checks multiple possible cases

The `if` Statement

Checks a condition and executes code only if it is true.

let temperature = 30;

if (temperature > 25) {
  console.log("🌞 It's warm outside!");
}

🔧 Live Example: if

<p id="weather"></p>

let temperature = 30;

if (temperature > 25) {
  document.getElementById("weather").innerText = "🌞 It's warm outside!";
}

The `if...else` Statement

Executes one block of code if the condition is true, another if it is false.

let hour = 21;

if (hour < 20) {
  console.log("🕒 It\'s still early");
} else {
  console.log("🌙 It's already evening");
}

🔧 Live Example: if...else

<p id="hour"></p>

let hour = 21;

if (hour < 20) {
  document.getElementById("hour").innerText = "🕒 It's still early";
} else {
  document.getElementById("hour").innerText = "🌙 It's already evening";
}

The `if...else if...else` Statement

Allows checking multiple successive conditions.

let grade = 8;

if (grade >= 9) {
  console.log("🏆 Excellent");
} else if (grade >= 7) {
  console.log("👍 Good");
} else {
  console.log("📘 You still have more to learn");
}

The `switch` Statement

It is useful when we have multiple distinct options to check.

let day = "monday";

switch (day) {
  case "monday":
    console.log("📅 The week begins");
    break;
  case "friday":
    console.log("🎉 The weekend is near");
    break;
  default:
    console.log("⏳ Regular day");
}

🔧 Live Example: switch

<p id="day"></p>

let day = "monday";

switch (day) {
  case "monday":
    document.getElementById("day").innerText = "📅 The week begins";
    break;
  case "friday":
    document.getElementById("day").innerText = "🎉 The weekend is near";
    break;
  default:
    document.getElementById("day").innerText = "⏳ Regular day";
}

String Methods and Template Literals

In JavaScript, strings are used to represent text. We can apply useful methods to analyze, modify, or combine them.

Common string methods

Here are some of the most commonly used methods:

Method	Description	Example
`length`	Returns the length of the string	`"Hello".length` → `5`
`toUpperCase()`	Converts all letters to uppercase	`"hello".toUpperCase()` → `HELLO`
`toLowerCase()`	Converts all letters to lowercase	`"HELLO".toLowerCase()` → `hello`
`includes()`	Checks if a text is contained in the string	`"Hello world".includes("world")` → `true`
`replace()`	Replaces part of the text	`"Anna has apples".replace("apples", "pears")` → `Anna has pears`
`trim()`	Removes spaces from the start and end	`" text ".trim()` → `"text"`

🔧 Live Example: String Methods

<p id="text"></p>

let message = "  Hello, John!  ";
let result = message.trim().toUpperCase().replace("John", "friend");

document.getElementById("text").innerText = result;

Template Literals – Flexible strings with backticks

Template literals are strings enclosed with `backticks` (grave accent) that allow:

Variable interpolation using ${}
Writing across multiple lines

let name = "John";
let message = `Hello, ${name}!
Welcome to the JavaScript tutorial.`;
console.log(message);

🔧 Live Example: Template Literals

<p id="message"></p>

let name = "John";
let message = `Hello, ${name}!
Welcome to the JavaScript tutorial.`;

document.getElementById("message").innerText = message;

Recommendation

☞ Use `template literals` instead of classic concatenation (+) for clearer and easier-to-maintain code.

🧠 Quiz – JavaScript Introduction

Functions and Loops ➔

Introduction to JavaScript

What is JavaScript?

Writing your first JavaScript script

The browser console – What it is and how to use it?

Visual alternative: Display directly on the page

Comments in JavaScript

Data types: String and Number

Variables and naming conventions

What is camelCase?

Special Data Types in JavaScript

Boolean – True or False

Null – Intentional absence of a value

Undefined – Declared but unassigned variable

Comparing Null and Undefined

Logical Operators in JavaScript

The AND Operator – &&

The OR Operator – ||

The NOT Operator – !

Combining Logical Operators

Comparison Operators in JavaScript

Loose equality – ==

Strict equality – ===

Difference – != and !==

Less / Greater

Recommendation

Conditional Statements in JavaScript

The if Statement

The if...else Statement

The if...else if...else Statement

The switch Statement

String Methods and Template Literals

Common string methods

Template Literals – Flexible strings with backticks

Recommendation

🧠 Quiz – JavaScript Introduction

Cookie Policy

The `AND` Operator – `&&`

The `OR` Operator – `||`

The `NOT` Operator – `!`

Loose equality – `==`

Strict equality – `===`

Difference – `!=` and `!==`

The `if` Statement

The `if...else` Statement

The `if...else if...else` Statement

The `switch` Statement