file. If you look at the
file, you'll see this line of code in the
tag does for CSS. It tells the browser to apply the code in script.js to the HTML file.
Note: Make sure the
comes right before the closing
tag! This ensures that the rest of the document elements have been loaded before the script is run.
⭐️ Step 0: Show an alert message
In script.js, add the following line of code. Feel free to replace "Hello, world!" with a message of your choosing.
For those of you who already know a programming language like Java or Python, feel free to skim this section or skip to the "Make your webpage interactive" section.
is something that can change. We use a variable to store a value that can change, and we can access the current value of a variable at different points in our program.
: If we're programming a game, a variable could keep track of the player's current score.
In this example, we have declared the variable named
for now. We can easily assign a value to it:
Alternatively, we can define a variable with a starting value:
Now, we've declared
and it starts off with value 10. Later on in our program, we can access
and use its current value. For example, we can do:
This is effectively the same as doing
because the value of
is 5 when we read its value.
We can change the value of our variables at any time during the program. For example, this is how we would increase the value of
// The following two lines of code are equivalent.
Whenever we access variables, we'll always get their most current value.
You can store different types of data using variables.
is a data structure that represents a collection of elements. You can store all sorts of data types in an array. You can have an array of numbers, an array of strings, etc.
: If we're programming a grocery list app, then we could use an array to keep track of all the grocery items that the user wants to buy.
= [1, 4, 9, 16];
Now we have a variable
whose type is an array of numbers.
We can read an individual element in the array using the syntax
. Each element in an array has an
that is their numerical position in the array. The first element has an index of 0; the second element has an index of 1; etc. So, if we want to read the first element of
, we can get that by doing
. We can
into an array using any number between the square brackets, but if we try to access an index that does not exist in the array, the value returned will be
We can overwrite any element in the array.
Above, we described how to read an element in the array. Similarly, we can overwrite an element in the array using its index. To replace the second value in
, we can do
myArray = 25
We can get the number of elements in the array.
Every array has a
property. For our example,
will evaluate to 4.
We can add an element to the array.
Every array has a
function that lets us add an element. If we do
then our array will now be length 5, and 36 will be the fifth element.
is a list of instructions that always runs together. Functions are the building blocks of programming. Similar to a math function, like f(x) = x + 5, these programming functions can take input(s) and can return an output. Functions are useful because they simplify programs and allow programmers to reuse their code.
In Step 0, you used the
function without needing to the details of how it was implemented!
: In my game, if I needed to calculate the distance between two points in multiple places in my code, I can write a
function that takes the coordinates of the two points as the inputs and returns the calculated distance. This way, I only have to write the distance code once, but I can call the
function in multiple places.
// The code below will be run every time we call this function.
Now, we have defined a function named
There are several key points to note in this example:
In our code, we reference our function using its name,
The function's inputs are within the parentheses next to
: in this case, our function takes only one input,
. The function then returns
When we want to use our
function, we must give the expected input, which is 1 number.
In our code, when we can call our
function, it will be the same as replacing that function call with the value returned by the function. What this means is
is the same as doing
is equal to 16.
A conditional is a statement that says
a certain condition is true,
run some code.
our "score" variable is less than or equal to 0,
tell the user "You Lost!".
The expression within the parentheses next to
is called the
. Conditions must be
expressions (i.e. they must evaluate to true or false).
Notice that in our first conditional, the condition is
score <= 0
that means "is less than or equal to".
Here are some of the useful comparison operators to know:
equal to (without type checking)
equal to (with type checking)
There are no rows in this table
The difference here between the two equality operators is that === performs type checking, meaning that the operator will return false if the left and right sides are not of the same data type, whereas == will convert the left and right sides before checking equality, if they are not yet of the same data type.
Another useful concept is the
block. Sometimes, you want to run some code if a condition is true, and run different code if the condition is false. We can do that like this:
// playerIsReady is a boolean value
// playerIsReady is true, so we run this code
// playerIsReady is false (i.e. not true), so we run this code instead
A loop is a way for us to repeatedly run code.
One type of loop is a
. When we use a for-loop, we specify exactly how many times we want to repeat the code inside the loop.
: We could use a for-loop in our grocery list app to send a reminder to the user for each item on their list. The number of repetitions is the number of items on their grocery list.
loop in several ways. Here is the basic structure:
code block to be executed
is executed once before running the code block.
defines the condition for running the code block.
is executed every time after running the code block.
In the example below, we use the
variable as a counter that begins with value 0. As long as
i < 5
we will run the code block. After each iteration, we increase the value of
// The code below will be run 5 times
alert('Your dinner is ready!');
We can also use a
loop to iterate through all the elements in an array.
= ['apple', 'banana', 'chili'];
alert('Don't forget to buy ' +
The first time the code block is run, the value of
. The second time the code block is run, the value will be
and the third time it will be
Make your webpage interactive
⭐️ Step 1: Access your HTML document
Add the following code to your script.js (feel free to remove anything there that you no longer want). This line of codes tells the browser to print the document model to the console.
If you open up the "Console" tab in the developer tools and click "Run" in Repl, you'll see the document object printed to the console. You can interact with it to see the contents of your web page.
⭐️ Step 2: Access specific HTML elements
object has several functions that can help you access specific HTML elements on the page.
The notation that we use to call a function that "belongs" to some object is
body = document.
div = document.
divs = document.
You can even grab elements using CSS selectors.
div = document.
divs = document.
Once you have a reference to a specific HTML element, you can access its different properties.
The notation that we use to get the value of an object's property is
For example, if I have a
with id "my-text-input", then I can get the user input by accessing the
property of the text input element.
input = document.
I can also update the text in one of my
elements like so:
myTextElement = document.
= "Here is the updated text!";
Use one or more of the functions above to assign a specific HTML element on your page to a variable. A variable that corresponds to your button element would be a useful 😉
If your code is not returning the correct HTML elements, make sure the
element in your index.html file comes right before the closing
tag. This ensures that the other document elements have been loaded before the script is run.
⭐️ Step 3: Add an event listener
button = document.getElementById(
When a user clicks on the button with id
, an alert message will pop up saying "Surprise!".
Add your event listener to an element on your page.
is a list of other events you can add to your web page. Keyboard and mouse events are the most commonly used.
🍦Challenge: Respond to user input
Add some form elements and a
to your web page if you haven't already. Make your webpage do something interesting when the user clicks on the button. Here are some ideas:
Have the user enter their name into a text box and show an alert that says "Hello, [name]!" when they click the button.
Make a multiple choice personality quiz (like the ones from BuzzFeed)
Create an educational game where people guess the answer to questions about some topic (e.g. how to save the environment)
Make a typing quiz that calculates your words typed per minute
🍦Challenge: Respond to user input
No results from filter