Introduction to JS (JavaScript)
Browser Dev Tools - Console
Open the Browser Dev Tools Console panel using the shortcut Command + Option + j
for MacOS or Control + Shift + j
for Linux or Windows.

Running JavaScript in a Web Page
Add a JavaScript file to any html file using a script
tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<script src="script.js"></script>
</body>
</html>
Built-in Functions for "Printing" Things
alert
alert('Hello World')
console.log
console.log('Hello World')
Comments
Commented out lines of code will not be executed. In addition to temporarily preventing some lines of code from running, comments are also used to annotate your code.
// This is a single line comment
/*
This is
a multi-line
comment
*/
// This is
// also
// a "multi-line"
// comment
In VSCode, you can quickly toggle comments by using the shortcut Command + /
for MacOS or Control + /
for Linux or Windows.
Data Types - Primitives
string
Any number of characters enclosed in backticks or single/double quotes.
number
Any numerical value (whole number or decimal),
Infinity
, orNaN
boolean
The values
true
andfalse
undefined
The value of an uninitialised variable.
null
Represents a missing object value (Objects are a complex data type that will be discussed later).
To check the type of a value, use the typeof
operator.
console.log(typeof "what am i?") // -> "string"
console.log(typeof 42) // -> "number"
console.log(typeof 42.1) // -> "number"
console.log(typeof true) // -> "boolean"
console.log(typeof undefined) // -> "undefined"
// Gotcha
console.log(typeof null) // -> "object"
// Not A Number is a number
console.log(typeof NaN) // -> "number"
Variables
Variables are a way to store values for reuse later in your code or for labeling data with descriptive names.
JavaScript has three ways to create variables: const
, let
, and var
. The latter is a much older syntax and is rarely, if ever, used in modern JavaScript.
Variable Naming Rules
A variable can be made up of letters, numbers, underscores (
_
), and dollar signs ($
).It cannot start with a number.
Case sensitive
Use camelCase for multi-word variable names (not a rule per se but a strong convention)
const firstName = 'Tonto'
const breed = 'German Shepherd'
const age = 5
const
vs let
Once initialised with a value const
variables cannot be reassigned while let
can.
const lunch = 'Cold pizza'
lunch = 'burger' // -> TypeError
let lunch = 'Cold pizza'
lunch = 'burger'
console.log(lunch) // -> "burger"
Because const
's can't be reassigned later on, you have to always initialise it with a value. let
variables can be declared first, then initialised with a value later.
const dinner // -> SyntaxError
let dinner
console.log(dinner) // -> undefined
dinner = 'Soup'
console.log(dinner) // -> "Soup"
The convention in JavaScript is to use const
unless you know you need to reassign the variable at some other point in your code, in which case you use let
.
Number & String Operations
Mathematical Operators
+
Addition
-
Subtraction
*
Multiplication
/
Division
%
Modulo
**
Exponent
Note Operator precendence is the same as in your Math class in school (PEMDAS).
String Concatenation & Interpolation
The +
operator when used with strings concatenates (or "glues") strings together.
const praise = 'Good boy'
const dogName = 'Tonto'
console.log(praise + ' ' + dogName)
Alternatively, you can use backtick strings (Template literals) to interpolate the variables in the string.
const praise = 'Good boy'
const dogName = 'Tonto'
console.log(`${praise} ${dogName}`)
Template literal interpolation isn't limited to variables, it can be any expression that produces a value.
const firstNum = 36
const secondNum = 6
console.log(`The sum of ${firstNum} and ${secondNum} is ${firstNum + secondNum}`)
Control Flow - Conditional Statements
Control flow is simply applying conditional logic to how your code is run. You may want to run certain blocks of code but not others, or you might want to run certain code blocks over and over again. We probably wouldn't want to show a user account page to a user who isn't logged in, since there would be no data to display!
Types of Control Flow
We're going to learn about two new forms of control flow you already know one!
The first form of control flow is: linear.
Linear control flow simply means that our data flows through our code, one line after the next. Execution starts at the first line of code, moves on to the second, then the third, and so on until the end of the file, when execution stops.
The second form of control flow is: conditional.
We will often run in to scenarios where we want one block of code to run if, and only if, a particular condition is met. Perhaps we're asking a user for their age and we want to ensure that the value they give us is a number greater than 0. Conditional execution in JavaScript is achieved with the if
statement:
if (age >= 16) {
console.log('You can drive!')
}
In the above snippet of code, we will only see the message 'you can drive!'
if the age
variable is 16
or greater. Later, we'll explore else
and else if
- ways for us to test other conditions or run code specifically when our condition is not met. We'll dive into this pattern more in a few minutes!
The third form of control flow is: looping. We'll get into that next time.
Comparison Operators
>
Greater than
<
Less than
>=
Greater than or equal
<=
Less than or equal
==
Equality
!=
Inequality
===
Strict Equality
!==
Strict Inequality
Strict vs Non-strict Equality Comparisons
It is best practice to use strict equality unless you have a very good reason to not use it. It is more likely that you will get some unexpected results with using non-strict equality comparisons. Compare the equality tables of both and you'll see that strict comparisons are more straightforward and predictable.
Logical Operators
&&
AND
||
OR
Conditionals
Conditionals are a common feature of programming languages because it's handy to execute different blocks of code depending on whether a condition is met.
Conditionals follow this pattern:
if (condition) {
// code writen here will run if
// the condition evaluates to true
}
The above is a simple conditional statement, with only a single condition. We can add a negative condition (code that will run if the condition is false
) and we can add additional positive conditions.
If we have code we want to run if our condition is false, we use else
:
if (condition) {
// code here will run if the condition evaluates to true
} else {
// code here will run if the condition evaluates to false
}
If we want to test multiple conditions, we can do so by combining else
and if
:
if (condition) {
// code here will run if the condition evaluates to true
} else if (anotherCondition) {
// code here will run if the second condition evaluates to true
} else {
// code here will run if none of the conditions evaluate to true
}
We can add as many else
/if
statements as we want, one for each condition we want to check, but after a while our code becomes hard to read:
const assignmentCompletion = 0
if (assignmentCompletion === 0) {
console.log("Work on your homework!")
} else if (assignmentCompletion === 1) {
console.log("Good work, still more to go")
} else if (assignmentCompletion === 2) {
console.log("Almost there!")
} else {
console.log("You are done!")
}
If you want to test two conditions without using and else
/if
you can do so by using the logical operators (&&
and ||
):
if (condition && condition) {
// this code will run if both conditions are true
}
if (condition || condition) {
// this code will run if one of the conditions is true
}
const customerAge = 20
if (customerAge >= 18 && customerAge <= 22) {
console.log('student discount')
}
const num = 42
if (num % 2 === 0 || num % 3 === 0) {
console.log(`divisible by either 2 or 3`)
}
We can also add nested if/else statements:
const assignmentCompletion = 0
const checkpointScore = 100
if(assignmentCompletion === 0) {
console.log("Work on your homework!")
if(checkpointScore === 100) {
console.log("Well you did great on the quiz at least")
} else if(checkpointScore < 60) {
console.log("Time for a retake!")
}
} else if( assignmentCompletion > 80 ) {
console.log("You're doing great!")
} else {
console.log("Keep on truckin")
}
There's no (practical) limit to the depth of if / else statements. But you can imagine that this gets difficult to read and understand fairly quickly. Simpler is better!
Changing Content in a Webpage
We'll dive deeper into this topic in the next few weeks. For now, here's a quick code snippet that shows you how to manipulate the content in a webpage "live".
<h1 id="heading">Lorem Ipsum Dolor Sit Amet</h1>
const name = prompt('Nu fone hu dis?')
const heading = document.querySelector('#heading')
heading.textContent = 'Hello ' + name
Last updated
Was this helpful?