Week 3
3.1 Introduction To JavaScript
Embedded Files
🚀 Introduction To JavaScript
Welcome to the world of JavaScript, where we turn boring, lifeless web pages into interactive and dynamic experiences! If HTML is the skeleton of a website and CSS is the fashion designer, then JavaScript is the brain making things think, move, and react.
What is JavaScript?
JavaScript (JS) is a programming language used to create interactive and dynamic websites. Ever clicked a button that changed a webpage instantly? That’s JavaScript. Ever seen a countdown timer on a product sale? JavaScript again. It’s the superpower behind modern web applications!
Why JavaScript? 🤔
It runs in your browser—no installations required!
It's everywhere—used in web apps, games, mobile apps, and even on servers (Node.js).
It's easy to learn and has a huge community to help you.
It's one of the most in-demand skills in tech today.
A Little JavaScript History 📜
1995 – JavaScript was born! Created in just 10 days by Brendan Eich at Netscape. (Talk about a speedrun!)
1996-2000 – Microsoft, Netscape, and others played “who owns JavaScript” (spoiler: it became an open standard).
2009 – JavaScript expands beyond browsers with Node.js.
Today – JavaScript is the most used programming language in the world! 🚀
🔬 How JavaScript Works in the Browser
Every browser (Chrome, Firefox, Edge, Safari) has a JavaScript Engine that reads and runs JavaScript code.
You write JavaScript ➡️ Browser interprets it ➡️ Page updates instantly!
Chrome uses V8, Firefox has SpiderMonkey, and Safari has JavaScriptCore (fancy names, right?).
Example:
Imagine a webpage is a restaurant 🍽️.
HTML is the menu.
CSS is the decoration.
JavaScript is the chef who reacts to your order! (You order a pizza, and boom, it's served).
🛠️ Setting Up a JavaScript Development Environment
Before we start coding, let’s gear up! You need:
1️⃣ A code editor – We’ll use VS Code (it’s free and awesome!).
2️⃣ A browser – Google Chrome is recommended.
3️⃣ A way to run JavaScript – Use the browser console (press F12 in Chrome and go to "Console").
4️⃣ Live Server – Helps refresh your code changes instantly.
👉 Installing VS Code & Live Server (We did it at the beginning of the course):
Download VS Code from code.visualstudio.com
Install the Live Server extension in VS Code
Open your HTML file and right-click > Open with Live Server
🎬 Writing Your First JavaScript Script!
Let’s start simple! Open the browser, press F12 (Developer Tools), and go to the Console. Then, write:
console.log("Hello, World!");
➡️ Now see "Hello, World!" appear! 🎉
Congratulations! You just wrote your first JavaScript program! 🚀
How JavaScript Runs with HTML
JavaScript can be embedded in an HTML file in three ways:
1️⃣ Inline JavaScript
1️⃣ Inline JavaScript
Write JavaScript directly inside an HTML element using the onclick event.
<button onclick="alert('Hello, JavaScript!')">Click Me</button>
2️⃣ Internal JavaScript
2️⃣ Internal JavaScript
Write JavaScript inside <script> tags in an HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
</head>
<body>
<script>
console.log("Hello from JavaScript!");
</script>
</body>
</html>
3️⃣ External JavaScript (Best Practice)
3️⃣ External JavaScript (Best Practice)
Write JavaScript in a separate .js file and link it in the HTML.
👉 Example:
1️⃣ Create an HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>External JavaScript</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
2️⃣ Create a JavaScript file (script.js):
console.log("Hello, World from an external file!");
✅ Open the index.html file in a browser and check the Console (F12 > Console tab).
🎯 What’s Next?
Now that we know what JavaScript is and how it runs, let’s dive deeper into the basics! Up next: Variables and Data Types!
💬 Quick Challenge: Open your browser’s console and type:
alert("Welcome to JavaScript!")
Hit Enter. What happens? 😃
Page updated
Google Sites
Report abuse