What is JavaScript?
Object Oriented
Information is organized as properties of an object
Objects have behaviours - information can act and be treated in
different ways based on what it is. Ex: A word compared to a number
Scripting Language
It interacts with an existing structure.
In the case of JS, it interacts with HTML and CSS
HTML and CSS are declarative languages
We tell something where to appear and how to look
We declare elements and applying styling to make them look a
specific way
JS is a functional language
We tell things how they should behave
We create the ways they should behave
We tell them to behave in different ways based on different
circumstances
JS allows us to do things no one has done before
JS deals with information. We call it data
We use JS to:
Process, manipulate and create data in the background
Display data to the user
Receive data from the user
Respond to actions of the user
How does JS work:
Variables - a way to hold data
DataTypes - different kinds of data have different rules
Conditional Logic - if statements, loops, switches and various ways to
control the flow of data to get a specific result
Functions - Sets of instructions on how the data should behave
The Document Object Model
Also known as DOM
Been incorporated in the browser since 2005
The Document Object turns the page into a series of connected nodes.
A tree where the root is the node called document, then the html and
so on.
A node is an object with its own properties, such as data and styling,
and its own methods - things it can do and how it should be done
The DOM is an API - Application Programming Interface which allows JS
to interact with the Document Object nodes.
Async and Defer
Are used to tell the browser to load the JavaScript after everything
else (HTML,CSS and so on)
Displaying Content
Alert | alert("Hello World") : Can be used to see if the Javascript
document is correctly linked
The Console | console.log("Hello World") : console is an object that
has a log-method that allows users to print data into the console
Elements | document.getElementById("page-title"); : Targets specific
id on an element
Elements | document.querySelector("#page-title"); : Targets id
Elements | document.querySelector(".page-title"); : Targets class
which can also target nested classes as we do in CSS
Variables
Variables need to be declared/created before they can be used
let newVariable = "Hello new variable" | The let keyword
declares a variable whos value can be changed. The name of the
variable is typed in camelCase
const NEW_VARIABLE = "Hello new variable" | A const value
can not be changed. Try to alter it and it will cause an error. The
name of the variable is typed in UPPER_SNAKE_CASE
To access variable names inside sentences is called to concatenating |
("There are" + NEW_VARIABLE + "days in a week")
var newVariable = "var is nearly never ever used now in 2025 due to
adding let and const as new type of variables"