CS2 Lab 4 2024, JavaScript 🎰

<<< Back to main site

Due Date: Thursday, October 31, 2024

Need help? Remember to check our Edstem and our Website for TA assistance.

Introduction

Recall from the previous two labs that HTML defines the structure of the webpage, while CSS defines the style and appearance of the webpage. In this lab, we will be working with JavaScript (JS). JavaScript defines the behavior of the webpage and allows your webpage to change and interact with users, adding a level of sophistication to what you have been working on previously.

Lab Goals ♣

• Understand the syntax of JavaScript (JS) as well as functions, variables, and callbacks
• Understand what the Document Object Model (DOM) is and how JavaScript interacts with it
• Learn simple JavaScript events: onclick, onmouseover, onmouseout

Getting Started ♠️

You will be writing your JavaScript files in your VSCode, like you've done with your HTML and CSS files. Once you have finished writing your JS files, you will open the template HTML file in a web browser, which will take care of interpreting what you have written and turn it into an interactive web page.

This is a harder lab compared to previous labs (based on student feedback) because it is the first time we introduce concepts like variables, conditionals, and programming logic, so start early! However, understanding JavaScript and specifically functions and variables will help immensely with Python and future programming.

Learning Javascript ♦

Just like learning any language, it's always best to start with syntax. Here we will briefly talk about how to write a JavaScript program. Below will show you how to declare variables, do arithmetic, and write functions. Some important things to note beforehand:

• All lines (with the exception of those that end with curly braces) end with semicolons
• Be sure to read the documentation and use the links mentioned

Variables

Sometimes we want to store data for later use. We can do this by declaring a variable. A common way to do this is using the var keyword. For example, we could create a variable a with the value 5, and then easily change the value once the variable is created (for example, below we store the value 7 in the variable a we previously created).

var a = 5;
a = 7;

Capitalization matters in JavaScript:

var a = 6;
var A = 3;

In the code block above, a and A refer to different variables.

Arithmetic

JavaScript allows you to quickly perform basic arithmetic operations. Some of these operations are:

• + → addition
• - → subtraction
• * → multiplication
• / → division
  For example,

var a = 7;
var b = 6;
console.log(a + b)

would print the value 13. (console.log() just prints out whatever is inside for us to see).

Link to resources: https://www.w3schools.com/js/js_arithmetic.asp

Conditionals

Depending on different conditions, we might want our website to behave differently. For example, if it's nighttime we might want to shift our website to night mode. To do this, we can use a conditional if-else statement like below. The if-else statement uses a condition, something that’s either true or false, to determine what will happen.

if (<condition>) {
   // if the condition is true do this
} else {
   // if the condition is false do this
}

if (<condition>) is true, then the portion of code between the first two curly brackets in the first section is run. else, the code in the second portion between the second set of curly brackets is run.

The following syntax is used for comparisons that you might want to make:

Example 1:

var a = 5;
var b = 7;
if ( a <= b) {
    console.log("a is less than or equal to b");
} else {
    console.log("a is not less than or equal to b");
}

In this example, the if condition (less than or equal to) is true for the two variables a and b so the first portion of the code is run and "a is less than or equal to b" is printed to the console:

Example 2:

var a = 5;
var b = 7;
if ( a === b) {
    console.log("a is equal to b");
} else {
    console.log("a is not equal to b");
}

In this example, the condition would evaluate to false because a and b are not equal. Therefore only the code within the brackets for the else block will run and print "a is not equal to b".

Link to resources: https://www.w3schools.com/js/js_if_else.asp

Functions

When we write code, there are sometimes chunks of code that we want to use multiple times in different places, but it would be a pain to copy and paste what you’ve already written EVERY time you want to re-use that chunk of code. That’s where functions come in. A function is a block of code that is meant to be called and executed in multiple places.

Example 1:
A function can have an input and an output. For example, we can have an add function that adds two numbers x and y, and returns their output. Consider the following code:

function add(x,y) {
    return x + y;
}
var z = add(1,2);

The function definition, line 1, is what defines the name and parameters of the function. This function name is add and it needs two parameters, x and y. We can also think of parameters as inputs to our function (so we input x and y, and output x+y).

The function body, line 2, is what the function actually does. In this case, the function calculates the sum of the given parameters (x and y) and returns it.

The function call, line 4, is outside of the function itself, and it’s what actually tells the browser to execute the function. If you don’t have a function call, your function body won’t be executed! In this case, we are calling the function add, passing in 1 as x and 2 as y.

Example 2:
A function can also take no input and return nothing:

function hello() {
    console.log(“hello world”);
}
hello(); 

This function takes in no arguments (still needs the parenthesis) and just prints out "hello world". It doesn’t return anything either. Again, line 4 above is the function call.

When you write a function, whether it returns something depends on what you need it for. If you want to use the result of the function later in your program, you should include a return statement to save and use that result.

Link to resources: https://www.w3schools.com/js/js_functions.asp

Tasks ♥️

Writing JavaScript

For this lab, we will be using both Visual Studio Code (VSCode) and Google Chrome. To write JavaScript in the Google Chrome console:

This console is an area where you can write code. While this lab will take you through the steps of how to code in JavaScript, a few general things to keep in mind are:

• When you hit enter, your code will be run. If you need to write code that takes more than one line, you can press shift+enter to use a new line without running what you have currently written.
• When you run your code by pressing enter, you might see another line appear that says undefined. This is not an error. It refers to the return value of what you just ran. If a function does not return anything after being called, the console prints undefined.
• The console remembers what you have written. To clear the console, either:
  • Exit out of the tab, OR
  • Right click on the console and press “Clear Console History” (“Clear” only removes output on screen)

Printing

To print something in JavaScript, we use console.log(). For example,

console.log(3);

would print the number 3 (as seen below).

Now it's your turn!

function hello(){
    console.log("Hello World!");
}
hello();

Now, let's move on to working with JavaScript within VSCode.

<script src="./lab4.js"></script>

The Document Object Model

Now that we understand JavaScript, we can use it to change the way our website behaves. An important thing to remember from the HTML lab is the concept of nested tags. When structuring an HTML document, tags are nested within each other. This nested structure is called the document object model (DOM).

The DOM is important because it gives us a way of accessing specific elements within the file. We are going to use the DOM to practice changing elements of the website. In JS, the function:

allows you to get an element with a given id. Once you get an element with the id, you are able to make changes to its properties (such as text color, background color, etc.).

For example, if the first paragraph has id="first_paragraph" in our HTML file (recall a paragraph uses the <p> tag) and we want to change the color of the first paragraph text to blue, we can write in our JS file:

Now it's your turn!

Events

Now that we understand how we can change elements using JS, let’s add some interaction with our site!

We can add event listeners to different ids to have something happen when they are clicked (click), the mouse is moved (mousemove), the mouse is hovered (mouseover), etc. Here is a more comprehensive list of events. For this lab, we are going to be focusing on click events, but the general idea applies to using other events.

If we want a function to occur every time an element with a given id is clicked, we can use:
document.getElementById(“<id>”).addEventListener('click', <function>);
Note that the id should again be passed in in quotes and the function should just be passed in by name. For example, we can define a function changeBackgroundColor that is called every time a button with id=“button” is clicked:

document.getElementById(“button”).addEventListener('click', changeBackgroundColor);

Note we just use the NAME of the function, we don't put the () after it (which calls the function). This is a reference to a function.

if (document.getElementById("<id>").style.visibility === "hidden") {
    // do something
} else {
    // do something else
}

Hand-In 🎲