CS130(0) JavaScript Lab
Alainey, Iris, Valerie
What is JavaScript?
JavaScript is an object-oriented scripting language used on the client side of web browsers.
It’s used to make web pages both dynamic and interactive.
This lab aims to give a basic introduction to JavaScript topics/syntax!
LAB HANDOUT: https://tinyurl.com/y93x85a8
Printing
Let’s write our first program - Hello World!
Open up Chrome’s Developer Tools in the Google Chrome web browser.
Type the following code, then press Enter:
console.log(“Hello World!”);
Variables
The keyword you use to declare a variable gives information as to what sort of variable is being created.
“const” vs “let” vs “var”
Type (number, string, boolean, etc) is not specified in the declaration of a JavaScript variable.
Variables
To create a few Javascript variables, try typing the following code into Chrome’s console:
const name= “Jeff”;
const token = “Top Hat”;
let money = 1500;
Variables
Now, try typing the following line of code:
name = “Jeff Huang”;
After that, try typing in these two lines of code:
money -= 500;
console.log(money);
Variables
In addition to singular variables, Javascript also has variable objects.
Try typing the following code into Chrome’s console:
const player = {
name : “Jeff”,
token : “Top Hat”,
money : 1500
}
Comparing Variable Equality
Try typing the following line of code into Chrome’s console:
1 == “1”;
Then try typing this line of code:
1 === “1”;
This is the main reason why we prefer to use “===” (as opposed to the typical “==”) as an equality comparator in Javascript.
Functions
Functions are essentially objects in JavaScript. One way to declare them that you'll see in this lab is the following:
function goToJail(competitor) {
competitor.moveToJailSpace();
};
A function may take no arguments or multiple arguments and may return a variable, a function, or undefined.
To use the above function on the previously defined player variable, call: goToJail(player);
Functions
Recall functions can return a variable, a function, or undefined. Try typing this into Chrome's console:
function addTwo(num) {� let sum = num + 2;
return sum;�}
addTwo(30); // returns 32
addTwo("30"); //returns "302"
Don't forget to check the handout for more examples!
Classes
Classes in JavaScript are designed to be easy to use, and are useful in approaching JavaScript from an object-oriented perspective.
class Player {
constructor(name, token, money) {
this.name = name;
this.token = token;
this.money = money;
this.turn_order = 4;
}
}
Classes
Create instances of our Player class by typing in the following code:
const jeff = new Player(“Jeff”, “Top Hat”, 1500);
Access variables of the Jeff object by using the syntax “jeff.[variable name]” as pictured below:
console.log(jeff.name + " is a " + jeff.token + ", with " + jeff.money + "dollars.");
Exercises
We have three exercises prepared for this lab: one that focuses on variables, one that focuses on functions, and one that focuses on classes.
Stencil code for these exercises is located on our Github.
Work through the exercises detailed in the handout, and let us know if you have any questions.
Once you finish, hail down one of the TAs and we’ll check you off!
Demo
To change the color of text in Chrome’s Developer Tools:
Open Chrome’s Developer Tools and click on the upper left icon (a mouse cursor).
This will allow you to highlight html objects on the webpage and find out their id.
You can edit the style of the html objects on the page using their ids and the Developer Tools console.
Demo
Changing the color of text in Chrome’s Developer Tools:
Demo
To use breakpoints to edit the CS15 Staff page:
Go to the Elements tab in Chrome’s Developer Tools and look at the html in order to find the list of javascript scripts.
We took note of the “staff_members.js” script for this demo.
Go to the Sources tab in Developer Tools and Ctrl+P in order to find and open the staff_members.js page.
Demo
Breakpoints:
Demo
To use breakpoints to edit the CS15 Staff page (continued):
Add a breakpoint at line 2 by clicking on line number 2.
Reload the page in order to begin the debugging process - the breakpoint will stop the “staff_member.js” script from executing fully.
Edit the staff bio line!
Remove the breakpoint by clicking on it again, then resume the debugger using the blue icon above the paused webpage.
Demo
Breakpoints:
Demo
Changing the CS 15 staff bios:
Demo
Changing the CS 15 staff bios: