JavaScript Tutorial
JavaScript Introduction
JavaScript is the language that makes a page respond: clicks, forms, lists, and live updates in the browser.
What is JavaScript?
JavaScript is a programming language that runs in the browser. HTML describes structure. CSS describes appearance. JavaScript describes behavior: what happens when someone clicks, types, or submits a form.
You already use JavaScript every day. A menu that opens, a total that updates, a quiz that scores itself — those are scripts talking to the page.
A first script
This page writes a line into the document and prints the same line in the console. Copy it into the JavaScript editor and click the heading.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello JavaScript</title>
</head>
<body>
<h1 id="title">Hello, JavaScript</h1>
<script>
console.log("The script ran.");
document.getElementById("title").textContent = "The page just changed.";
</script>
</body>
</html>Click Try it in JavaScript under the example. That opens /javascript/try — a live page on the right and a console under it.
What JavaScript is for
- Respond to clicks, typing, and form submit
- Change text, styles, and lists on the page without reloading
- Store small values in the browser with localStorage
- Load JSON from a URL with fetch
It is not HTML. It is not CSS. A page can exist without JavaScript. JavaScript cannot draw a page without HTML to attach to.
console.log vs the page
console.log writes to the console pane in the StudyGrid editor. ChangingtextContent writes onto the page. Beginners mix these up: they log a message and wonder why the heading did not change.
Example
console.log("This is the console.");
document.body.textContent = "This is the page.";
JavaScript vs the other StudyGrid tracks
| Python | HTML | JavaScript | |
|---|---|---|---|
| Dashboard | /tutorial | /html | /javascript |
| Editor | /try | /html/try | /javascript/try |
| Result | Prints and plots | A rendered document | A page plus a console |
| File | .py | .html | .js inside .html |
What you will cover
- Variables, types, strings, numbers, and arrays
- Functions, objects, if/else, and loops
- The DOM, events, storage, and fetch
- Ten small apps you can finish in the editor
Next: where to put a script in a page, then how to print a result.