Introduction to JavaScript

JavaScript is the programming language of the web. Learn what it is, where it runs, and write your first program!

What is JavaScript?

// JavaScript is a programming language
// It makes websites interactive
// It can respond to user clicks, form inputs, etc.

→

Interactive web pages with:
- Button clicks
- Form validation
- Dynamic content updates

JavaScript makes websites come alive:

HTML creates the structure
CSS makes it look good
JavaScript makes it interactive and dynamic

Where Does JavaScript Run?

// 1. In web browsers (Chrome, Firefox, Safari)
// 2. On servers (Node.js)
// 3. In mobile apps
// 4. Desktop applications

→

JavaScript is everywhere!
- Websites and web apps
- Server backends
- Mobile and desktop apps

For beginners: We'll focus on browser JavaScript where you can see results instantly!

Your First JavaScript Code

// This is a comment - it explains what the code does
console.log("Hello, World!");

→

Hello, World!

console.log(): Prints messages to the browser's console (like a digital notepad for programmers)

Basic JavaScript Syntax

// Comments start with //
console.log("Text goes in quotes");
console.log(42); // Numbers don't need quotes
// Each line ends with a semicolon ;

→

Text goes in quotes
42

Key rules: Text in quotes, numbers without quotes, semicolons at the end

Making HTML Interactive

// Find an HTML element by its ID
let element = document.getElementById("output");

// Change what it says
element.innerText = "Hello from JavaScript!";

→

The HTML element with id="output"
now displays: "Hello from JavaScript!"

getElementById(): Finds HTML elements so JavaScript can change them

Storing Information in Variables

// Variables store information
let name = "Alice";
let age = 25;
let message = "Hello, " + name + "!";

console.log(message);

→

Hello, Alice!

Variables: Like labeled boxes that hold information you can use later

Common Beginner Mistakes

// Missing quotes around text
console.log(Hello); // ❌ Error!
console.log("Hello"); // ✅ Correct

// Forgetting semicolons (can cause problems)
console.log("Hello World") // ❌ Missing ;
console.log("Hello World"); // ✅ Correct

Don't worry about mistakes - they're part of learning! The browser will show error messages to help you.

Using the Browser Console

// To see console.log() messages:
// 1. Right-click on webpage → "Inspect"
// 2. Click "Console" tab
// 3. Run your JavaScript code
// 4. See the output in the console!

→

Console shows your messages
and any error messages
(like a programmer's notepad)

Pro tip: The console is your best friend for learning and debugging!

Practical Example: Welcome Message

// Create a personalized welcome message
let userName = "Beginner Coder";
let welcomeMessage = "Welcome to JavaScript, " + userName + "!";

// Show in console
console.log(welcomeMessage);

// Show on webpage
let outputDiv = document.getElementById("output");
outputDiv.innerText = welcomeMessage;

→

Console: Welcome to JavaScript, Beginner Coder!
Webpage: Welcome to JavaScript, Beginner Coder!

Your Task: Write Your First JavaScript Program

Write JavaScript code that does the following:

Use console.log() to print "Hello, World!" to the console
Find the element with id="output" using document.getElementById()
Change its text to display a greeting message using innerText

Remember: Text goes in quotes, numbers don't, and end each line with a semicolon!

Tip: Open your browser's console (F12 → Console tab) to see your console.log() messages!

Section 1/10What is JavaScript?

What is JavaScript?

JavaScript makes websites come alive:HTML creates the structureCSS makes it look goodJavaScript makes it interactive and dynamic

Introduction to JavaScript

JavaScript is the programming language of the web. Learn what it is, where it runs, and write your first program!

What is JavaScript?

// JavaScript is a programming language
// It makes websites interactive
// It can respond to user clicks, form inputs, etc.

→

Interactive web pages with:
- Button clicks
- Form validation
- Dynamic content updates

JavaScript makes websites come alive:

HTML creates the structure
CSS makes it look good
JavaScript makes it interactive and dynamic

Where Does JavaScript Run?

// 1. In web browsers (Chrome, Firefox, Safari)
// 2. On servers (Node.js)
// 3. In mobile apps
// 4. Desktop applications

→

JavaScript is everywhere!
- Websites and web apps
- Server backends
- Mobile and desktop apps

For beginners: We'll focus on browser JavaScript where you can see results instantly!

Your First JavaScript Code

// This is a comment - it explains what the code does
console.log("Hello, World!");

→

Hello, World!

console.log(): Prints messages to the browser's console (like a digital notepad for programmers)

Basic JavaScript Syntax

// Comments start with //
console.log("Text goes in quotes");
console.log(42); // Numbers don't need quotes
// Each line ends with a semicolon ;

→

Text goes in quotes
42

Key rules: Text in quotes, numbers without quotes, semicolons at the end

Making HTML Interactive

// Find an HTML element by its ID
let element = document.getElementById("output");

// Change what it says
element.innerText = "Hello from JavaScript!";

→

The HTML element with id="output"
now displays: "Hello from JavaScript!"

getElementById(): Finds HTML elements so JavaScript can change them

Storing Information in Variables

// Variables store information
let name = "Alice";
let age = 25;
let message = "Hello, " + name + "!";

console.log(message);

→

Hello, Alice!

Variables: Like labeled boxes that hold information you can use later

Common Beginner Mistakes

// Missing quotes around text
console.log(Hello); // ❌ Error!
console.log("Hello"); // ✅ Correct

// Forgetting semicolons (can cause problems)
console.log("Hello World") // ❌ Missing ;
console.log("Hello World"); // ✅ Correct

Don't worry about mistakes - they're part of learning! The browser will show error messages to help you.

Using the Browser Console

// To see console.log() messages:
// 1. Right-click on webpage → "Inspect"
// 2. Click "Console" tab
// 3. Run your JavaScript code
// 4. See the output in the console!

→

Console shows your messages
and any error messages
(like a programmer's notepad)

Pro tip: The console is your best friend for learning and debugging!

Practical Example: Welcome Message

// Create a personalized welcome message
let userName = "Beginner Coder";
let welcomeMessage = "Welcome to JavaScript, " + userName + "!";

// Show in console
console.log(welcomeMessage);

// Show on webpage
let outputDiv = document.getElementById("output");
outputDiv.innerText = welcomeMessage;

→

Console: Welcome to JavaScript, Beginner Coder!
Webpage: Welcome to JavaScript, Beginner Coder!

Preview