Loading...

JavaScript Introduction

HTML gives a page structure. CSS gives it a look. A finished storefront still feels empty until something happens: a click, a typed value, a message that appears after the page loads. JavaScript is the language that makes those things happen in the browser.

What is JavaScript?

JavaScript is a programming language. You write instructions the browser executes, one statement after another. It is not markup (that is HTML) and it is not a stylesheet (that is CSS). On the web, its everyday job is behavior: update text, respond to the user, calculate a value, and — later in this course — load data.

A programming language, not a document

HTML tags name pieces of content. CSS rules describe how those pieces look. JavaScript statements tell the computer to do something: print a message, change a node on the page, or add two numbers. You already know enough HTML to hang a script on a page. This course teaches the language that runs inside that script.

📊 Static page vs a page with JavaScript

Situation Without JavaScript With a short script
The page has just loaded The heading stays exactly as written in HTML A script can rewrite that heading after load
The visitor clicks a button The button has no useful reaction by itself Later sessions: run code when the click happens
You need a total or a check HTML cannot compute; CSS cannot decide JavaScript can calculate and then show the result

Keep the three layers in your head, but do not mix their jobs. Structure stays in HTML. Look stays in CSS. This course is about the third layer: what the page does.

A first look at a statement

A statement is one instruction. The example below writes a line to the browser’s developer console — a tool programmers use, not the visible page. You will use the console often while learning.

A first statement

javascript 
console.log("Hello, JavaScript");

What this statement does

  • console.log is a built-in function that prints to the console
  • The text in quotes is a string — a piece of data
  • The semicolon ends the statement (safe habit in this course)
  • Nothing on the page changes yet; this is only a log
    Open the browser’s developer tools (often F12) and look at the Console tab after you run a script that includes this line.

Seeing JavaScript on a page

To change what visitors see, a script talks to the page. Below, an HTML paragraph starts with one sentence. An inline <script> finds that paragraph by id and replaces its text. You will study where to put scripts in the next session; here one file is enough.

HTML with an inline script

html 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>

What changed

Without the script, visitors would keep the original paragraph. With the script, the browser still reads the HTML first, then runs the statements, then shows the new sentence. Same document skeleton — different behavior after load.

JavaScript can also calculate

Because it is a programming language, JavaScript works with numbers and names, not only with tags. This tiny example has nothing to do with color or headings. It computes a total and logs it. Later sessions cover variables and types in depth; here you only need to see that code can compute.

A tiny calculation

javascript 
const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);

What this course is (and is not)

This tutorial stays in the browser: language basics, the DOM, events, forms, and fetch. It does not start with a framework, Node.js, or TypeScript. You will be able to write useful page scripts without those tools. Optional later sessions add extras; they are not required for the core path.

Try it yourself

  1. Create a file named intro.html.
  2. Paste the HTML-with-script example, save it, and open it in your browser.
  3. Confirm the paragraph shows the rewritten sentence, not the original HTML text.
  4. Change the quoted string inside textContent to a sentence of your own, save, and refresh.
  5. Optional: add console.log("Hello, JavaScript"); inside the same <script>, save, refresh, and find the line in the Console tab.

Common mistakes

  • Treating JavaScript as another way to write headings and paragraphs — keep structure in HTML; let JS change or add to it when needed
  • Expecting CSS to react to a click or to calculate a total — CSS styles; it does not run program logic
  • Putting the only copy of important text inside a script so that users without JS (or a blocked script) see an empty page
  • Confusing the console with the visible page: console.log does not replace a heading on the screen

Summary

  • JavaScript is a programming language that adds behavior to web pages in the browser
  • HTML structures content; CSS controls presentation; JavaScript decides what the page does
  • A statement is one instruction, such as console.log("Hello, JavaScript");
  • An inline script can find an element and change its textContent after the page loads
  • JavaScript can calculate values, not only touch markup
  • This course stays in the browser and does not require a framework
  • Practice by editing a small script and refreshing the browser

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 3
Javascript Tutorial