De la Vega’s School of JavaScript

Teacher: Dr. Lyra de la Vega · Student material: Michael’s suspicious examples
Course status: WIP · beginning from the beginning
Protocol status: PENDING REVIEW

Archive Summary

This lesson introduces JavaScript from the ground up: what it is, where it is used, what it can and cannot do alone, and how variables, values and basic types work.

The method is simple: Michael writes code that looks reasonable, JavaScript responds with either output or betrayal, and De la Vega explains what happened.

“If the console is screaming, it is probably trying to teach you something.” — De la Vega’s School of Code

1. What is JavaScript?

JavaScript is the programming language that makes web pages react. HTML gives a page structure. CSS gives it visual style. JavaScript gives it behaviour.

If a button opens a menu, a radio player updates the current track, a form checks your input, or Tennar FM changes song without reloading the whole page, JavaScript is probably involved.

2. Where is JavaScript used?

3. What JavaScript cannot do alone

Browser JavaScript cannot freely read and write files on your computer. It cannot directly scan an MP3 folder and build tennarfm.json by itself. It cannot replace a database or server when data must be stored safely.

For those jobs, we may use Python, PHP, a server, a database, or a build script. JavaScript is powerful, but it still has borders.

4. How do we start JavaScript?

The easiest place to begin is the browser console. Open Developer Tools, find the Console tab, and try small examples.

console.log("Tennar FM is operational mostly.");

Expected output:

Tennar FM is operational mostly.

5. Lesson 001: Values and variables

A variable is a named place where JavaScript can store a value. A value can be text, a number, true/false, or something more complex.

let stationName = "Tennar FM";
let frequency = 69.0;
let isBroadcasting = true;

console.log(stationName);
console.log(frequency);
console.log(isBroadcasting);

Expected output:

Tennar FM
69
true

6. let, const and var

Modern JavaScript usually uses let and const. Use let when the value may change. Use const when the value should stay the same.

const stationName = "Tennar FM";
let currentTrack = "Turn the Dial to the Void";

currentTrack = "Molotov & Malibu";

console.log(stationName);
console.log(currentTrack);

var is the older way. It still exists, but for new code, we usually avoid it until we understand why it behaves differently.

7. Michael Horror Example: The Shoe Incident

let stilettos = "24511";
let boots = 1202;

console.log(stilettos + boots);

Michael expected:

25713

JavaScript produced:

245111202

JavaScript did not add the numbers. It joined text together. Because "24511" has quotation marks, JavaScript treats it as text. The + operator then becomes “glue these together” instead of “add these numbers”.

8. De la Vega Correction

let stilettos = 24511;
let boots = 1202;

console.log(stilettos + boots);

Correct output:

25713

9. Michael Horror Example: The Tax Incident

const price = "100";
const tax = 48.5;

console.log(price + tax);

Unexpected output:

10048.5

Again, "100" is text because it has quotation marks. JavaScript joins the string and the number instead of doing addition.

10. De la Vega Correction

const price = 100;
const tax = 48.5;

console.log(price + tax);

Correct output:

148.5

11. Tiny Exercise

Try changing the values below. What happens if you put quotation marks around one of the numbers?

let ads = 15;
let songs = 43;

console.log(ads + songs);

“If it has quotation marks, JavaScript may treat it as text, even when it looks like a number.” — Lesson 001 field note