Courses/JavaScript/Introduction to JavaScript

Lesson 1 • Beginner

Introduction to JavaScript

Welcome to JavaScript — the world's most popular programming language for creating interactive websites, apps, and even servers.

What You'll Learn in This Lesson

✓What JavaScript is and where it runs
✓3 ways to run JS on your computer
✓How HTML, CSS & JS work together
✓Your first console.log() program
✓Strings, numbers, booleans & comments
✓Why JavaScript powers the modern web

Good News: JavaScript Runs in Your Browser!

Unlike most programming languages, you do not need to install anything to run JavaScript. Every web browser (Chrome, Firefox, Safari, Edge) has JavaScript built in!

If you have a web browser, you can already run JavaScript!

You can practice directly on this website using the "Try It Yourself" sections — no setup needed!

3 Ways to Run JavaScript on Your Computer

1Browser Console (Fastest Way)

Open your browser's Developer Tools to run JavaScript instantly:

Windows / Linux:

Press F12 → Click "Console" tab

macOS:

Press Cmd + Option + J (Chrome) or Cmd + Option + C (Safari)

Now type this and press Enter:

console.log("Hello, World!");

You should see Hello, World! appear in the console!

2Create an HTML File (Recommended for Learning)

Step 1: Create a new file

Open any text editor (Notepad, TextEdit, VS Code) and save a file as:

index.html

Step 2: Add this code

<!DOCTYPE html>
<html>
<head>
  <title>My First JavaScript</title>
</head>
<body>
  <h1>Check the Console!</h1>
  
  <script>
    console.log("Hello from JavaScript!");
    alert("Welcome to JavaScript!");
  </script>
</body>
</html>

Step 3: Open in browser

Double-click the file to open it in your browser. You will see an alert popup!

3Install Node.js (For Advanced Users)

Node.js lets you run JavaScript outside the browser — useful for building servers and tools.

Step 1: Download Node.js

Visit nodejs.org and download the LTS version.

Step 2: Verify installation

Open Terminal/Command Prompt and type:

node --version

You should see something like v20.x.x

Step 3: Create and run a file

Create a file called app.js with:

console.log("Hello from Node.js!");

Run it with:

node app.js

Do not worry about Node.js for now! For this course, the browser console or HTML files are all you need. We will cover Node.js in advanced lessons.

Real-World Analogy: Think of building a webpage like putting on a play:

HTML = The stage and props (structure)
CSS = The costumes and lighting (style)
JavaScript = The actors bringing everything to life (behavior)

Without JavaScript, your webpage would be like a stage with no actors — static and unable to respond!

🌍 What is JavaScript?

JavaScript (JS) is the core language of the modern web. Every time you click a button, open a dropdown, or see a game running in your browser — JavaScript is behind it.

Technology	Role	Example
HTML	Structure	Buttons, headings, images
CSS	Style	Colors, fonts, spacing
JavaScript	Behavior	Click handlers, animations, data

Together, these three form the foundation of web development.

💡 Why Learn JavaScript?

✅ Essential for Web Developers
Every website you visit uses JavaScript for interaction — buttons, sliders, animations, and forms.
✅ Full-Stack Power
You can use JavaScript on the backend with Node.js, creating APIs and databases.
✅ Huge Ecosystem
Thousands of frameworks like React, Vue, Angular, Express make building complex apps easier.
✅ High Demand & Salary
JS developers are among the most sought-after, earning between £40,000–£120,000+ per year.
✅ Cross-Platform Language
Used for mobile apps (React Native), desktop apps (Electron), and even IoT devices.

⚙️ JavaScript in Action

When you type something into a website search bar, submit a form, or click a menu that expands — JavaScript code is what makes it happen instantly without reloading the page.

It's event-driven and can:

Respond to user actions
Fetch and display live data (e.g., YouTube comments, stock prices)
Validate input fields before sending to a server
Build games, tools, calculators, and dashboards

🚀 Your First JavaScript Program

In JavaScript, you use the console.log() function to show output (messages, results, or test results). Let's start with the classic "Hello, World!" example.

console.log("Hello, World!");

When you run this line, your output will appear in the console (the output section below).

💬 What This Does:

console — is a built-in JavaScript object that lets us send information to the browser console.
.log() — is a method that prints text, numbers, or values inside parentheses ().
"Hello, World!" — is a string, a type of text value surrounded by quotes.

Output:

Hello, World!

Congratulations — you just ran your first JavaScript program! 🎉

🧩 Key JavaScript Concepts (For Absolute Beginners)

Let's go through the most important building blocks one by one.

🟨 Comments

Comments are notes you write for yourself or other developers. They are ignored by the computer.

// This is a single-line comment

/*
This is a multi-line comment
It can span multiple lines
*/

💡 Tip: Writing good comments helps you and others understand your thought process when revisiting code later.

🟩 console.log()

Used to display output or debug your program.

console.log("Hello!"); // Outputs text
console.log(42);       // Outputs a number
console.log(true);     // Outputs a boolean

👉 Debugging means finding problems (bugs) in your code.console.log() helps track what's happening inside your program at different points.

🟧 Strings — Text in JavaScript

A string is any text enclosed in quotes. JavaScript allows:

• Double quotes "text"
• Single quotes 'text'
• Template literals `text`

console.log("Double quotes");
console.log('Single quotes');
console.log(`Template literals`);

💡 Template literals (the ones with backticks `) are the most powerful because they allow string interpolation — inserting variables directly into text.

let name = "Alice";
console.log(`Hello, ${name}!`); // Hello, Alice!

🟦 Numbers and Booleans

Numbers in JavaScript can be integers or decimals:

console.log(5);
console.log(3.14);

Booleans represent true or false values, used for conditions and logic:

console.log(true);
console.log(false);

🟥 Variables (Containers for Data)

Variables store data that can change later.

let name = "John";
let age = 25;
let isStudent = true;

console.log(name);
console.log(age);
console.log(isStudent);

• let creates a variable that can be updated later.
• const creates one that cannot change.
• var is the old style (avoid using it now).

const pi = 3.14159;
console.log(pi);

💡 Best Practice: Always use const unless you know the value will change.

🧮 Basic Arithmetic

JavaScript can perform all common math operations.

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1 (remainder)

✅ Use these for calculators, finance tools, or even game logic.

🧠 Data Types Summary

Type	Example	Description
String	`"Hello"`	Text
Number	`42`	Numeric value
Boolean	`true`	True or false
Null	`null`	Empty value
Undefined	`undefined`	Variable declared but not given a value
Object	`{ name: "Bob", age: 20 }`	Data collection
Array	`[1, 2, 3]`	Ordered list of values

Your First JavaScript Program

Try it now: Edit the code below and click 'Try it Yourself' to run it!

Try it Yourself »

JavaScript

// This is a comment in JavaScript
// Comments help explain your code

console.log("Hello, World!");
console.log("Welcome to JavaScript!");

// Try adding your own console.log below!
let myName = "Your Name";
console.log("My name is " + myName);

// Experiment with numbers
let age = 25;
console.log("I am " + age + " years old");

📜 More Key Concepts

🧰 The Role of Semicolons

Semicolons (;) mark the end of a statement. They are optional in JavaScript but strongly recommended for clarity.

console.log("With semicolon");
console.log("Also works") // Without semicolon

It's good habit to use them consistently — especially in larger apps.

⚡ Output Methods

Besides console.log(), JavaScript can display output in other ways:

alert("Hello!"); // Popup message
document.write("Hello!"); // Writes directly into webpage

alert() is good for quick tests. document.write() is rarely used in modern code but useful for learning basics.

⚙️ Case Sensitivity

JavaScript is case-sensitive, meaning Name and name are not the same variable.

let Name = "Alice";
let name = "Bob";
console.log(Name); // Alice
console.log(name); // Bob

📜 Keywords and Identifiers

Keywords are reserved words that have special meaning (like let, const, if, function). Identifiers are names you choose for variables, functions, etc.

Rules:

• Must start with a letter, _, or $
• Cannot start with a number
• Case-sensitive
• Cannot use reserved words

Good examples:

let userName = "John";
let totalPrice = 50;

Bad examples:

let 2cool = "Nope";     // ❌ Starts with number
let const = "Invalid";  // ❌ Keyword

🧭 Understanding the Execution Flow

JavaScript runs top to bottom — each line in order, unless you use loops or conditions.

console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

Output:

Step 1
Step 2
Step 3

🧩 Common Beginner Mistakes

Here are some of the most frequent errors new coders face:

❌ Missing quotes: console.log(Hello) → ✅ console.log("Hello")
❌ Forgetting parentheses: console.log "Hi" → ✅ console.log("Hi")
❌ Typo in console: consle.log() → ✅ console.log()
❌ Wrong case: Console.Log() → ✅ console.log()
❌ Using = instead of == or === in comparisons

🧠 Debugging Tip

Use the browser console to test small snippets. Open Developer Tools → Console (F12 or right-click → Inspect → Console tab) and type:

console.log("Testing...");

You can run JavaScript directly from there — perfect for practice and experimenting.

🧩 Practice Challenges

🎯 Try these exercises:

Your First Output — Print your name and favorite hobby using console.log().
Age Display — Store your age in a variable and print it with a sentence using template literals.
Quotes Practice — Print three lines using " ", ' ', and ` ` quotes.
Comments Practice — Add both a single-line and a multi-line comment explaining what your program does.
Experiment — Try printing numbers, booleans, and mix text + variables.

Example:

// My first JavaScript program
let name = "Brayan";
let age = 16;
console.log(`My name is ${name} and I am ${age} years old.`);

Output:

My name is Brayan and I am 16 years old.

⚡ What You Learned

✅ How to write your first JavaScript program
✅ What console.log() does
✅ The difference between strings, numbers, and booleans
✅ How to use comments
✅ How to avoid common syntax errors
✅ Why JavaScript is the foundation of the web

📋 Quick Reference — JavaScript Basics

Concept	Example
console.log()	`console.log("Hello!");`
String	`"hello"` or `'hello'` or `hello`
Number	`42`, `3.14`
Boolean	`true` / `false`
Comment	`// single line` or `/* multi */`

Lesson 1 Complete — Introduction to JavaScript!

You've taken your first step into JavaScript! You now know how JS runs in the browser, how to use console.log(), and the basic data types.

Up next: Variables & Data Types — how to store and name any piece of data your program needs! 📦

Introduction to JavaScript

What You'll Learn in This Lesson

Good News: JavaScript Runs in Your Browser!

3 Ways to Run JavaScript on Your Computer

1Browser Console (Fastest Way)

2Create an HTML File (Recommended for Learning)

3Install Node.js (For Advanced Users)

🌍 What is JavaScript?

💡 Why Learn JavaScript?

⚙️ JavaScript in Action

🚀 Your First JavaScript Program

💬 What This Does:

🧩 Key JavaScript Concepts (For Absolute Beginners)

🟨 Comments

🟩 console.log()

🟧 Strings — Text in JavaScript

🟦 Numbers and Booleans

🟥 Variables (Containers for Data)

🧮 Basic Arithmetic

🧠 Data Types Summary

Your First JavaScript Program

📜 More Key Concepts

🧰 The Role of Semicolons

⚡ Output Methods

⚙️ Case Sensitivity

📜 Keywords and Identifiers

🧭 Understanding the Execution Flow

🧩 Common Beginner Mistakes

🧠 Debugging Tip

🧩 Practice Challenges

⚡ What You Learned

📋 Quick Reference — JavaScript Basics

Lesson 1 Complete — Introduction to JavaScript!

Cookie & Privacy Settings