JavaScript basics in twenty minutes: variables to DOM

Key points

• Variables are containers declared with let and assigned with =, and a value like 16 has the type number while text needs quotation marks to become a string. 0:36
• Conditions let code choose between paths: an if block runs when its condition is true, else if checks cases in order, and the AND, OR and NOT operators combine or flip true/false checks. 3:31
• A while loop needs a starting value, a condition and a changing counter, or it runs forever; a for loop puts start, condition and increase on one line, which is why it is preferred for counting. 7:33
• A function is defined once and called by name with parentheses, takes parameters as inputs, and uses return to send a value back so the program can keep working with it, while console.log only displays it. 10:05
• Arrays hold lists and count positions from zero, and forEach runs a function once per item, with the current item passed in automatically, replacing a manual index loop. 12:19

Terms the lesson explains

• console.log — console.log prints the output of whatever is placed inside its parentheses to the console. 1:19
• variable — A variable is a container for data: it has a name, holds a value, and the value can be reused later in the program. 1:31
• string — Text is called a string, and quotation marks are needed to create a string. 2:08
• boolean — Values such as true or false are called booleans. 2:12
• data type — A data type describes what kind of value something is. 2:15
• operator — Operators are symbols that let us do something with values. 2:49
• logical operator — Logical operators are used to combine multiple conditions. 3:09
• if statement — An if statement lets a program make a decision. 3:31
• condition — A condition is an expression that is either true or false. 4:06
• code block — A code block is the part of code enclosed by curly braces. 4:26
• i (index) — i is the usual name for a for-loop counter because it stands for index. 9:33
• function — A function is a reusable block of code that you put in one place and run whenever you need it, instead of repeating the same code. 10:05
• parameter — A parameter is an input that a function receives when it is defined. 10:40
• array — An array stores multiple values in one place. 12:19
• index — Each item in an array has a position called its index. 12:32
• forEach method — The forEach method is called directly on an array and iterates over it one item at a time. 16:55
• alert — Alert is a built-in browser function that displays a message box. 18:59
• document.getElementById — document.getElementById searches the whole document for the element with a given ID and returns it. 19:19
• Return value — The value a function sends back to where it was called, so the program can use it. 11:27
• Array index — The position of an item in an array, starting at zero. 12:36
• forEach — An array method that calls a function once for each item in the array. 16:53
• DOM manipulation — Using JavaScript to find and change elements on a web page. 18:23

Look closer on screen

• technologies.push line — The editor shows technologies.push("React") above technologies.pop(), with the array printed on the right.
• Click Me button — The HTML file has a button with id myButton and the text Click Me.
• Ticket Price Calculator exercise — A web page titled EXERCISE: Ticket Price Calculator describes a cinema pricing script.

Value and data type

• : 16 · : number
• : "Hello" · : string
• : true · : boolean

Logical operators

• : && · : and · : both sides must be true
• : || · : or · : at least one must be true
• : ! · : not · : flips true and false

Questions to check yourself