Introduction to JavaScript
What JavaScript does, where it runs, how to add it to a page and how to see its output in the console.
What is JavaScript?
HTML is the structure, CSS is the look, and JavaScript is the behaviour. It is a real programming language: it can remember things, make decisions, repeat work and react when people click or type.
Adding JavaScript to a page
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Hello</h1>
<!-- Best: an external file, at the end of the body -->
<script src="app.js"></script>
</body>
</html>// app.js
console.log('JavaScript is running!');
alert('Welcome to the class');The console
console.log() prints messages for you, the developer. Open the browser console with F12 (or right-click → Inspect → Console) to see them. The console also shows errors, so keep it open while you learn.
JavaScript is running!
Statements and comments
// A single-line comment
/* A comment
over several lines */
console.log('One statement per line');
console.log('Each ends with a semicolon');Check your understanding
Quick check
Which of these adds behaviour to a web page?
Why: JavaScript handles behaviour.
Quick check
Where does console.log() output appear?
Why: Open it with F12.
Quick check
Where is the usual place for the <script> tag?
Why: By then the page above it has loaded.