Introduction to JavaScript

Introduction to JavaScript

JavaScript is the programming language of the web. Originally created by Brendan Eich in just ten days in 1995 for Netscape Navigator, JavaScript has evolved from a simple scripting language for adding interactivity to web pages into a versatile, full-stack programming language that powers everything from websites and mobile apps to server-side applications and even machine learning models. Today, JavaScript is the most widely used programming language in the world according to Stack Overflow surveys, and it is supported by every modern web browser without any plugins.

Where JavaScript Runs

JavaScript was originally designed to run only in web browsers, but with the creation of Node.js in 2009, it can now run on servers, desktops, and IoT devices. In the browser, JavaScript interacts with the Document Object Model (DOM) to manipulate web page content, styles, and behavior. On the server side, Node.js provides access to the file system, networking, and databases, making JavaScript a true full-stack language.

// Running JavaScript in the browser console
console.log("Hello from the browser!");

// In an HTML file
// <script>
//   document.getElementById("greeting").textContent = "Hello, World!";
// </script>

// Running JavaScript with Node.js
// Save as hello.js and run: node hello.js
console.log("Hello from Node.js!");

// JavaScript can also run in:
// - React Native (mobile apps)
// - Electron (desktop apps like VS Code)
// - Deno and Bun (modern runtimes)

Adding JavaScript to HTML

There are three ways to include JavaScript in a web page: inline scripts, internal scripts, and external files. The external file approach is the best practice for maintainability and caching.

<!-- Method 1: Inline (avoid for anything complex) -->
<button onclick="alert('Hello!')">Click Me</button>

<!-- Method 2: Internal script -->
<script>
  console.log("This runs when the page loads");
</script>

<!-- Method 3: External file (recommended) -->
<script src="app.js" defer></script>

<!-- The 'defer' attribute loads the script after HTML is parsed -->
<!-- Place scripts before </body> or use defer/async -->

Basic Syntax

// Single-line comment
/* Multi-line
   comment */

// Statements end with semicolons (optional but recommended)
let message = "Hello, World!";
console.log(message);

// JavaScript is case-sensitive
let myVariable = 10;
// let myvariable = 20; // This is a DIFFERENT variable

// Basic output methods
console.log("Regular log");       // Standard output
console.warn("Warning message");  // Yellow warning
console.error("Error message");   // Red error
console.table([{name: "Alice", age: 30}, {name: "Bob", age: 25}]);

// Basic input (browser only)
// let name = prompt("What is your name?");
// alert("Hello, " + name + "!");

The Developer Console

Every modern browser includes Developer Tools (DevTools) with a JavaScript console. Open it with F12 or Ctrl+Shift+J (Cmd+Option+J on Mac). The console is your best friend for testing code snippets, debugging, and exploring APIs. You can type JavaScript directly into the console and see results immediately, similar to Python's REPL.

// Try these in your browser's console:
2 + 2                           // 4
"Hello" + " " + "World"        // "Hello World"
Math.random()                   // Random number 0-1
document.title                  // Current page title
document.querySelectorAll("p")  // All paragraph elements

Pro tip: Use console.table() to display arrays of objects in a formatted table in the browser console. It is much easier to read than console.log() for structured data. Also explore console.time() and console.timeEnd() for quick performance measurements.

Key Takeaways

• JavaScript is the language of the web, running in browsers and on servers via Node.js.
• Add JavaScript to HTML using external files with the defer attribute for best performance.
• Use the browser's Developer Console (F12) to test and debug JavaScript interactively.
• JavaScript is case-sensitive, uses semicolons (optional), and supports both single-line and multi-line comments.
• JavaScript is the only programming language that runs natively in web browsers, making it essential for web development.