JavaScript: Introduction

Learn what JavaScript is, where it runs, how to include it in a page, and the core basics every developer needs from day one.

What is JavaScript?

JavaScript is a lightweight, interpreted programming language that runs in the browser and on the server. It is the only language natively understood by web browsers, making it the foundation of interactive web experiences.

`JavaScript`

A high-level, dynamic language built into every web browser.

HTML: structures the content
CSS: styles the content
JavaScript: adds behavior and interactivity
Runs client-side (browser) and server-side (Node.js)

JavaScript Basics

Run this to confirm JavaScript is executing and see dynamic typing in action.

JavaScript vs Other Languages

Unlike compiled languages (C++, Java), JavaScript is interpreted at runtime. Unlike Python which is mainly server-side, JavaScript uniquely runs natively in the browser without any installation.

`Key Differences`

JavaScript occupies a unique role no other language fills out of the box.

Interpreted: no compile step needed
Dynamically typed: variable types are resolved at runtime
Event-driven: built around responding to user actions
Can run both in the browser and on Node.js (server)

Feature	JavaScript	Python	Java
Runs in browser	✅ Native	❌ No	❌ No
Typing	Dynamic	Dynamic	Static
Execution	Interpreted	Interpreted	Compiled (JVM)
Primary use	Web / Full-stack	Data / Backend	Enterprise / Android

Where JavaScript Runs

JavaScript was created for the browser, but Node.js (released 2009) brought it to the server, making full-stack JavaScript development possible.

`JavaScript Environments`

The two main places JavaScript executes.

Browser: Chrome, Firefox, Safari each include a JS engine (V8, SpiderMonkey, JavaScriptCore)
Node.js: runs JS outside the browser, used for servers, CLIs, and build tools
Browser JS has access to the DOM; Node.js has access to the file system

Detecting the Runtime Environment

window exists only in browsers: Node.js has no DOM.

How to Integrate JavaScript

There are three ways to add JavaScript to an HTML page: inline (inside an HTML attribute), internal (a <script> block in the file), and external (a separate .js file). External is the standard for real projects.

`Three Integration Methods`

Each method has specific use cases.

Inline: JS inside an HTML attribute: onclick="...", avoid for anything beyond trivial
Internal: a <script> block inside the HTML file
External: a separate .js file linked via src, preferred for maintainability

Inline vs Internal JavaScript

Both work, but internal script blocks are easier to maintain than inline handlers.

<p>Inline JS: handler lives in the HTML attribute:</p>
<button onclick="alert('Hello from inline JS!')">Click me</button>

<p>Internal JS: handler lives in a script block:</p>
<button id="btn">Click me too</button>
<script>
  document.getElementById('btn').onclick = function() {
    alert('Hello from internal JS!');
  };
</script>

The <script> Tag and Placement

Where you place your <script> tag affects when JavaScript runs relative to the HTML being parsed. The wrong placement can access elements that haven't loaded yet.

`<script> Placement`

Placement controls load order: wrong placement blocks page rendering or causes errors.

Bottom of <body>: classic approach, all HTML loads first
defer: loads script in parallel, runs after HTML is fully parsed (recommended)
async: loads in parallel, runs as soon as ready (for independent scripts)
Avoid a bare <script> in <head>: it blocks HTML parsing

Script Tag Placement

defer in <head> and bottom-of-body both guarantee HTML is loaded before the script runs.

<!DOCTYPE html>
<html>
  <head>
    <!-- defer: loads in parallel, runs after HTML is parsed -->
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1 id="title">Hello</h1>
    <!-- Bottom of body: old approach, same safe result as defer -->
    <script>
      document.getElementById('title').textContent = 'JS ran safely!';
    </script>
  </body>
</html>

Developer Console Basics

The browser DevTools console is your primary debugging tool. Open it with F12 or Ctrl+Shift+I and click the Console tab.

`Console Methods`

The console object provides several logging methods.

console.log(): general output
console.warn(): yellow warning message
console.error(): red error message
console.table(): displays arrays/objects as a table

Console Methods in Action

Run this to see the different output styles in the console panel.

Writing Your First Program

console.log() is the simplest way to output data. It accepts any value: strings, numbers, objects, and prints them to the console.

`console.log()`

The standard way to inspect values during development.

Accepts multiple arguments: console.log("x =", x)
Works with any data type: string, number, array, object
Does not affect the visible page: output appears only in DevTools

Hello World

The classic first program: four different value types logged to the console.

Comments

Comments are ignored by the JavaScript engine. Use them to explain non-obvious logic: not to describe what the code obviously does.

`Comment Syntax`

Two styles of comments in JavaScript.

//: single-line comment, everything after it on that line is ignored
/* */: multi-line comment, spans as many lines as needed
Good comments explain WHY, not WHAT
Avoid leaving commented-out dead code in production

Comment Styles

Neither comment affects what gets executed: run it and verify.

JavaScript Versions and ECMAScript

ECMAScript (ES) is the official standard that defines the JavaScript language. Each version adds new features: ES6 (2015) was the largest update and introduced most modern JS syntax.

`ECMAScript Versions`

JavaScript evolves through annual ECMAScript specification releases.

ES5 (2009): baseline supported everywhere
ES6 / ES2015: arrow functions, let/const, classes, modules, template literals
ES2017+: async/await, Object.entries, and more added yearly
Modern browsers support ES2020+ natively

ES5 vs ES6 Syntax

Template literals (backticks) replace messy string concatenation.

Strict Mode

Adding 'use strict' at the top of a file or function opts that code into strict mode, turning silent mistakes into thrown errors.

`'use strict'`

A string directive that enables stricter JavaScript parsing and error handling.

Prevents using undeclared variables
Disallows duplicate parameter names
Makes this undefined in plain functions (instead of defaulting to window)
ES6 modules and classes are always in strict mode by default

Strict Mode Catching an Error

Run this to see strict mode turn a silent bug into a visible error.

Knowledge Check

1. What is JavaScript primarily used for?

2. Which HTML tag is used to include JavaScript in a page?

3. Where is the recommended placement for a <script> tag?

4. Which method outputs a message to the browser console?

5. What does 'use strict' do?

6. Which of the following is a valid single-line comment in JavaScript?

7. ECMAScript is best described as: