JavaScript Tutorial: Dynamic Web Programming

Learn JavaScript from basics to advanced concepts to create interactive and dynamic web applications.

18 Topics

35 min read

Introduction to JavaScript

JavaScript is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a language that is also characterized as dynamic, weakly typed, prototype-based, and multi-paradigm.

JavaScript was initially created to "make web pages alive". The programs in this language are called scripts. They can be written right in a web page's HTML and run automatically as the page loads.

Quick Tip

JavaScript is not related to Java. The similar name was inspired by marketing considerations rather than good judgment.

Why Learn JavaScript?

JavaScript is essential for web development for several reasons:

It's the only programming language that runs natively in web browsers
It allows you to create interactive and dynamic web pages
It's used for both front-end and back-end development (Node.js)
It's one of the most popular programming languages in the world
It has a vast ecosystem of libraries and frameworks
It's constantly evolving with new features and improvements

How to Include JavaScript in HTML

There are three ways to include JavaScript in an HTML document:


<button onclick="alert('Hello, World!')">Click Me</button>


<script>
  alert('Hello, World!');
</script>


<script src="script.js"></script>

The recommended approach is to use external JavaScript files as it separates HTML and JavaScript, making your code more maintainable.

JavaScript Basics

Let's start with the fundamental concepts of JavaScript.

Syntax & Comments

JavaScript syntax is the set of rules that define how JavaScript programs are constructed:

// This is a single-line comment

/* This is a
   multi-line comment */

// Statements end with a semicolon (optional but recommended)
let greeting = 'Hello, World!';
console.log(greeting);

// JavaScript is case-sensitive
let name = 'John';
let Name = 'Jane'; // name and Name are different variables

Variables & Data Types

Variables are containers for storing data values. JavaScript has three ways to declare variables:

// Using var (older way, function-scoped)
var oldVariable = 'I am old-school';

// Using let (block-scoped, can be reassigned)
let name = 'John';
name = 'Jane'; // This is allowed

// Using const (block-scoped, cannot be reassigned)
const PI = 3.14159;
// PI = 3.14; // This would cause an error

JavaScript has several data types:

// Primitive data types
let string = 'Hello';         // String
let number = 42;              // Number
let decimal = 3.14;           // Number (decimal)
let boolean = true;          // Boolean (true or false)
let nullValue = null;        // Null (intentional absence of value)
let undefinedValue;           // Undefined (variable declared but not assigned)
let symbol = Symbol('id');    // Symbol (unique identifier)
let bigInt = 1234567890123456789012345678901234567890n; // BigInt

// Reference data types
let object = { name: 'John', age: 30 };  // Object
let array = [1, 2, 3, 4, 5];                // Array
let func = function() { console.log('Hello'); }; // Function
let date = new Date();                    // Date
let regex = /pattern/g;                    // RegExp

Type Checking

You can check the type of a variable using the typeof operator:

console.log(typeof 'Hello');  // "string"
console.log(typeof 42);       // "number"
console.log(typeof true);     // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (this is a known bug in JavaScript)
console.log(typeof {});       // "object"
console.log(typeof []);       // "object" (arrays are objects in JavaScript)
console.log(typeof function() {}); // "function"

Operators

JavaScript has various types of operators for performing operations on values:

// Arithmetic operators
let sum = 5 + 3;      // Addition: 8
let difference = 5 - 3; // Subtraction: 2
let product = 5 * 3;    // Multiplication: 15
let quotient = 5 / 3;   // Division: 1.6666...
let remainder = 5 % 3;  // Modulus (remainder): 2
let exponent = 5 ** 3;   // Exponentiation: 125

// Assignment operators
let x = 10;
x += 5;  // x = x + 5 (x is now 15)
x -= 3;  // x = x - 3 (x is now 12)
x *= 2;  // x = x * 2 (x is now 24)
x /= 4;  // x = x / 4 (x is now 6)
x %= 4;  // x = x % 4 (x is now 2)

// Comparison operators
console.log(5 == 5);    // Equal to: true
console.log(5 == '5');  // Equal to (with type conversion): true
console.log(5 === 5);   // Strict equal to (no type conversion): true
console.log(5 === '5'); // Strict equal to: false
console.log(5 != 8);    // Not equal to: true
console.log(5 !== '5'); // Strict not equal to: true
console.log(5 > 3);     // Greater than: true
console.log(5 < 3);     // Less than: false
console.log(5 >= 5);    // Greater than or equal to: true
console.log(5 <= 3);    // Less than or equal to: false

// Logical operators
console.log(true && true);   // Logical AND: true
console.log(true && false);  // Logical AND: false
console.log(true || false);  // Logical OR: true
console.log(false || false); // Logical OR: false
console.log(!true);        // Logical NOT: false
console.log(!false);       // Logical NOT: true

Conditional Statements

Conditional statements are used to perform different actions based on different conditions.

// if statement
let age = 18;

if (age >= 18) {
  console.log('You are an adult');
}

// if...else statement
if (age >= 18) {
  console.log('You are an adult');
} else {
  console.log('You are a minor');
}

// if...else if...else statement
let score = 85;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else if (score >= 60) {
  console.log('D');
} else {
  console.log('F');
}

// Ternary operator (shorthand for if...else)
let message = age >= 18 ? 'You are an adult' : 'You are a minor';
console.log(message);

// switch statement
let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = 'Monday';
    break;
  case 2:
    dayName = 'Tuesday';
    break;
  case 3:
    dayName = 'Wednesday';
    break;
  case 4:
    dayName = 'Thursday';
    break;
  case 5:
    dayName = 'Friday';
    break;
  case 6:
    dayName = 'Saturday';
    break;
  case 7:
    dayName = 'Sunday';
    break;
  default:
    dayName = 'Invalid day';
}

console.log(dayName); // "Wednesday"

Result:

Loops

Loops are used to execute a block of code multiple times.

// for loop
for (let i = 0; i < 5; i++) {
  console.log('Iteration ' + i);
}

// while loop
let j = 0;
while (j < 5) {
  console.log('Iteration ' + j);
  j++;
}

// do...while loop
let k = 0;
do {
  console.log('Iteration ' + k);
  k++;
} while (k < 5);

// for...of loop (for iterating over iterable objects like arrays)