Introduction to JavaScript
What is JavaScript?
JavaScript is THE programming language of the web — it makes websites interactive and alive. While HTML builds the structure and CSS styles it, JavaScript makes everything move, respond, and think.
JavaScript runs natively in every web browser — Chrome, Firefox, Safari, Edge — with no installation needed. Every interactive element you've ever used on the web is powered by JavaScript: menus that open, forms that validate, images that slide, games you play in the browser.
The three pillars of web development work together: HTML defines content, CSS defines appearance, and JavaScript defines behavior. Mastering all three makes you a complete web developer.
A Brief History of JavaScript
JavaScript has a fascinating (and rushed) origin story. Understanding where it came from helps you understand why it behaves the way it does — including its famous quirks.
JavaScript was created by Brendan Eich in just 10 days in May 1995 while working at Netscape Communications. It was originally called Mocha, then renamed to LiveScript, and finally renamed to JavaScript — purely for marketing reasons, to capitalize on Java's popularity at the time.
Where JavaScript Runs
One of JavaScript's most powerful features is its versatility. It's not limited to websites — JavaScript now runs virtually everywhere.
How to Add JavaScript to HTML
There are three ways to include JavaScript in a webpage. Each has its place — but one is almost always the best practice for real projects.
Method 1 — Inline JavaScript (avoid)
You can write JavaScript directly inside an HTML element's event attribute. This is the quickest way to test something, but should be avoided in real code.
<!-- Inline JS — avoid in real projects --> <button onclick="alert('Hello!')">Click me</button> <button onclick="document.body.style.background='gold'">Turn gold</button>
Method 2 — Internal Script Tag
You can write JavaScript inside a <script> tag directly in your HTML file. Better than inline, but still mixes JS and HTML in one file.
<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1 id="title">Hello</h1> <script> // JavaScript inside the HTML file const title = document.querySelector('#title'); title.textContent = 'Hello from JavaScript!'; title.style.color = '#f59e0b'; console.log('Internal script loaded!'); </script> </body> </html>
Method 3 — External .js File (best practice)
The best approach: write your JavaScript in a separate .js file and link it in your HTML. This keeps code organized, reusable, and cacheable by browsers.
<!DOCTYPE html> <html lang="en"> <head> <title>My JS Project</title> </head> <body> <h1 id="greeting">Loading...</h1> <!-- Put script tag at end of body, before </body> --> <script src="app.js"></script> </body> </html>
// app.js — your external JavaScript file // This file is linked in index.html const greeting = document.getElementById('greeting'); greeting.textContent = 'Hello from an external JS file!'; greeting.style.color = '#f59e0b'; console.log('app.js loaded successfully!');
<script src="app.js"></script> right before the closing </body> tag so all HTML loads first before JS tries to access it. Alternatively, use the defer attribute: <script defer src="app.js"></script> in the <head>.console.log() — Your First JS Command
console.log() is the JavaScript equivalent of Python's print(). It outputs data to the browser's Developer Console — your best friend when writing and debugging JavaScript.
F12 or Ctrl+Shift+JMac: Press
Cmd+Option+JThen click the "Console" tab. You can type JavaScript directly here and run it instantly — no file needed!
// Basic console.log — prints any value console.log("Hello, World!"); // string console.log(42); // number console.log(true); // boolean console.log([1, 2, 3]); // array // Print multiple values at once console.log("Name:", "Ahmed", "Age:", 25); // Other console methods console.warn("This is a warning!"); // yellow warning console.error("This is an error!"); // red error console.table([ // displays a table { name: "Alice", age: 28 }, { name: "Bob", age: 32 } ]);
Your First Program: Hello World
Time to write your very first JavaScript program. We'll start with the classic Hello World, then go a step further and manipulate a webpage element.
// hello.js — Your very first JavaScript program! // This line prints a message to the console console.log("Hello, World!"); console.log("Welcome to JavaScript!"); console.log("I am learning JS on BitWithBite.");
Going Further — Manipulating the DOM
JavaScript's real power is manipulating the DOM (Document Object Model) — the live representation of your HTML page. You can change text, colors, styles, and content dynamically.
// Select an element by its ID const heading = document.getElementById('main-heading'); // Change the text content heading.innerHTML = 'Hello from JavaScript! 🎉'; // Change the style directly heading.style.color = '#f59e0b'; heading.style.fontSize = '2rem'; heading.style.fontWeight = 'bold'; // Log confirmation to the console console.log('DOM manipulation complete!');
F12 to open DevTools, click the Console tab, and type any JavaScript. Press Enter to run it. Try typing document.body.style.background = 'gold' right now on any site!Java vs JavaScript
This is one of the most common points of confusion for beginners. Let's set the record straight once and for all.
// ── JAVA ────────────────────────────────────────── // Compiled language → runs on JVM (Java Virtual Machine) // Statically typed: you must declare variable types // Used for: Android apps, enterprise backend, big systems public class HelloWorld { public static void main(String[] args) { System.out.println("Hello"); // very verbose } } // ── JAVASCRIPT ──────────────────────────────────── // Interpreted language → runs in browsers / Node.js // Dynamically typed: variables can hold any type // Used for: web frontend, web backend, mobile, desktop console.log("Hello"); // simple and concise
Lesson Summary
Let's recap everything you learned in this lesson:
console.log() prints output to the browser's DevTools Console. Open it with F12.console.log() do in JavaScript?Now it's your turn to write real JavaScript. Complete the challenge below in VS Code or any code editor.
Create a file called
bio.js. Use console.log() to print a formatted bio about yourself to the console. Include:
- Your name
- What you want to build with JavaScript
- Your favorite website
- A motivational quote
MY JAVASCRIPT BIO ⚡
========================================
Name : Ahmed Khan
Building : A full-stack web app
Fav Website : bitwithbite.com
Quote : Code is poetry.
========================================
💡 Show hints if you're stuck
- Use
console.log()for each line of output - For separator lines:
console.log("=".repeat(40))— JS repeats the character 40 times - You can use
\nfor newlines inside a string - Open DevTools (F12) and go to the Console tab to see output
- Link your bio.js in an HTML file:
<script src="bio.js"></script>