Content updated
By the end, you can…
- HTML describes content, CSS styles it, and JavaScript can respond and change it.
- Predict the example's result, change one part, and verify the behavior in your own script.
One idea at a time
JavaScript is a programming language: you write instructions that an engine, the part of the browser that runs JavaScript, executes. In a browser it can read a form, respond to a button, calculate a total, and update a page. JavaScript also runs outside browsers, for example on a server, but this path starts with browser scripts. Java and JavaScript are different languages.
Start with output before interaction. A statement is an instruction. console.log sends a value to the developer-tools Console; it does not add a paragraph to your page. Our output panel mirrors these messages so you can try the example here. It is a teaching preview, not the full browser Console. Errors in your own file appear in the real Console.
What to remember first
HTML describes content, CSS styles it, and JavaScript can respond and change it.
Read the code before trying it
console.log(value)Inspect a value- The dot accesses log on console; parentheses call it with the value inside.
"Hello, web!"Write a string- A string is text surrounded by matching quotes. The quotes are syntax, not part of the displayed greeting.
;End a statement- Use semicolons consistently as you learn. Each line in this example is a separate instruction.
// commentLeave a note- JavaScript ignores everything after // on that line. Comments explain intent without running.
<script src="script.js" defer></script>Load a separate script- src names your JavaScript file. defer lets this external script run after the browser has read the HTML and created its page elements.
Walk through an example
console.log("Hello, web!");
console.log(2 + 3);The first statement logs a string. The second evaluates addition before logging its numeric result, 5. Read from top to bottom. A page can look unchanged even though its script ran correctly: these instructions send output to the Console. Later lessons will select HTML elements and change their visible text.
See it happen: try a small change
Predict the result, choose a version, then compare the code and output. Try the controls when the example has them. Each version starts fresh.
Code to notice
console.log("Hello, web!");
console.log(2 + 3);Live result
What changed: Text is logged first; addition produces the number 5 second.
Look a little closer
Create script.js beside your complete index.html from the HTML path. Add the external script tag shown above inside head. Put only JavaScript in script.js, without script tags. Save both files, open index.html, open Developer Tools from your browser menu, and select Console. Reload to run the saved script again.
You can also type console.log into the Console and press Enter. The Console may show undefined after a log because the call does not return a useful value; your logged message still ran. Avoid alert for these exercises: its dialog blocks interaction until dismissed. If no message appears, check the filename and the Console for a loading or syntax error.
Try it in your own project
Create script.js beside index.html and link it using the deferred script tag above. Put only JavaScript in script.js. Open the HTML file, then your browser menu’s Developer Tools and Console. Save and reload after each edit; expect the greeting followed by the number. The page itself does not change.
The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.
A common wrong turn
Quotes must match, and names are case-sensitive: Console is not console. HTML, CSS, and JavaScript do not always finish in a simple fixed order; use defer for an external script that needs the page elements. Change one line, save, and reload rather than guessing whether the browser has read your edit.
Your turn: meet JavaScript and run your first script
Make your own script introduce you and calculate how many minutes are in two hours.
Try this in your own HTML and JavaScript files, then open the page in a browser. There is no separate checked practice for this task yet.
- Create and link script.js using the setup above.
- Log a short greeting, then log 2 * 60. The * operator means multiplication.
- Reload and check that the greeting and 120 appear in order. Change the greeting and confirm the new text appears.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.