JavaScript Unlocked - Bringing Web Pages to Life

📘 Table of Contents

• 1. Introduction to JavaScript
• 2. Adding JavaScript to a Webpage
• 3. Basic Syntax & Variables
• 4. Data Types
• 5. Operators
• 6. Functions
• 7. Conditionals & Loops
• 8. Arrays & Objects
• 9. DOM Manipulation
• 10. Events
• 11. ES6+ Features
• 12. Debugging & Console
• 13. Best Practices
• 14. Mini Project
• 15. Conclusion

1. Introduction to JavaScript

JavaScript (JS) is the programming language of the web. It allows developers to make web pages interactive — from simple animations to complex web apps.

• HTML — Structure
• CSS — Style
• JavaScript — Behavior

Tip: JavaScript runs directly in the browser — no installation needed!

2. Adding JavaScript to a Webpage

You can include JavaScript in 3 ways:

1. Inline: Inside an HTML tag
2. Internal: Inside a <script> tag
3. External: Linking a separate .js file

<!-- Internal Script -->
<script>
  alert("Hello, World!");
</script>

Note: Always place scripts before </body> for faster loading.

3. Basic Syntax & Variables

JavaScript statements end with a semicolon and are case-sensitive.

let name = "John";
const age = 25;
var country = "Nigeria";

console.log(name, age, country);

Tip: Use let and const instead of var for cleaner, modern code.

4. Data Types

Type	Example
String	"Hello"
Number	42, 3.14
Boolean	true, false
Array	[1, 2, 3]
Object	{name: "John", age: 25}
Null	null
Undefined	undefined

5. Operators

JavaScript supports arithmetic, comparison, and logical operators:

let x = 10, y = 5;

console.log(x + y);  // 15
console.log(x > y);  // true
console.log(x === 10 && y < 10); // true

6. Functions

Functions are reusable blocks of code:

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Alice"));

Note: Arrow functions are a shorter way to write functions in ES6.

const greet = name => `Hello, ${name}!`;

7. Conditionals & Loops

let score = 80;

if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else {
  console.log("C");
}

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

8. Arrays & Objects

let fruits = ["apple", "banana", "mango"];
console.log(fruits[1]); // banana

let person = { name: "John", age: 25 };
console.log(person.name); // John

9. DOM Manipulation

JavaScript can interact with HTML elements through the DOM (Document Object Model):

document.getElementById("demo").innerText = "Hello, JS!";

Tip: Try this in your browser console!

10. Events

Respond to user interactions like clicks or key presses:

<button onclick="sayHello()">Click Me</button>

<script>
function sayHello() {
  alert("Button clicked!");
}
</script>

11. ES6+ Features

• let & const — Block scoping
• Template literals — `Hello ${name}`
• Destructuring — const {name, age} = person;
• Arrow functions — () => {}
• Promises & async/await

12. Debugging & Console

Use the browser’s Developer Tools (F12) for debugging:

console.log("Hello");
console.warn("Warning!");
console.error("Error!");

13. Best Practices

• Always use const and let — avoid var.
• Write meaningful variable names.
• Keep functions small and focused.
• Use comments to explain logic.
• Test code in browser console frequently.

14. Mini Project: Interactive Counter

Try this small project combining HTML and JavaScript:

<h2>Counter</h2>
<p id="count">0</p>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>

<script>
let count = 0;
function increment() {
  count++;
  document.getElementById("count").innerText = count;
}
function decrement() {
  count--;
  document.getElementById("count").innerText = count;
}
</script>

Challenge: Add a reset button and style it with CSS.

15. Conclusion

JavaScript brings web pages to life. By learning variables, functions, events, and DOM manipulation, you can create dynamic and interactive web experiences.

Next, combine it with HTML and CSS to build full-fledged web applications!