Where labelling stops and real programming begins
← Back to Web CodingHTML and CSS cannot count, cannot compare, cannot remember. JavaScript can. It is a real programming language, it is built into every browser, and it is what makes a page do something instead of just sitting there.
It goes inside a <script> tag:
<p>Look in the box below.</p>
<pre id="__out"></pre>
<script>
console.log("Hello from JavaScript!");
</script>
Try it — this is live
console.log(...) is JavaScript's print(). It writes a line out where a programmer can read it.
Same idea as Python, with one extra word at the front:
let — a box whose contents can change later.const — a box that is set once and never changed.let score = 10;
console.log(score);
score = score + 5;
console.log(score);
const name = "Maya";
console.log(name);
Try it — this is live
Use const unless you know the value has to change. A box that cannot change is one less thing that can go wrong — and when you read the code later, const promises you it is still what it was.
| Python | JavaScript | |
|---|---|---|
score = 10 | let score = 10; | say let or const |
print(x) | console.log(x); | same job |
# a note | // a note | two slashes |
True / False | true / false | lower case |
None | null | nothing at all |
| indentation | { } | braces group things |
The ideas are identical. Variables, text, numbers, decisions, loops — you are not learning to program twice, you are learning one thing in a second accent.
let a = 7;
let b = 2;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
Try it — this is live
Note 7 / 2 gives 3.5 — JavaScript has only one kind of number, so no whole-number division surprise.
Joining text together is done with + as well, but there is a much nicer way — backticks with ${...} holes in them:
const name = "Maya";
const age = 11;
console.log("Hi " + name + ", you are " + age);
console.log(`Hi ${name}, you are ${age}`);
Try it — this is live
2 + 3 is 5. But "2" + 3 is "23", because a piece of text next to a + turns the whole thing into joining. This catches everybody once.
const word = "dragon";
console.log(word.length);
console.log(word.toUpperCase());
console.log(word[0]);
console.log(word.includes("ago"));
Try it — this is live
word.length is a fact about the text, so no brackets. word.toUpperCase() is something you ask it to do, so it gets brackets. That difference runs all the way through the language.
<script> tags and runs in the browser.console.log() prints. // starts a comment.let for a box that changes, const for one that does not.${ } beat gluing text with +.