JavaScript II
INFO 253A: Front End Web Architecture
Kay Ashaolu
More JavaScript!
- We're now going to go to more loops, data structures, and control flow
- The goal is to provide a foundation of understanding how to express yourself in JavaScript
- This will take time dependent on your experience. That's okay
Conditionals
- Computers execute commands line by line
- But what if you don't want to execute every line
- Have the computer make a decision?
function getGenerationalCohort(yearBorn) {
let generationalCohort = ""
if (yearBorn > 1900 && yearBorn <= 1926) {
generationCohort = "GI Generation";
}
else if (yearBorn > 1926 && yearBorn <= 1945) {
generationalCohort = "Silent Generation";
}
else if (yearBorn > 1945 && yearBorn <= 1964) {
generationalCohort = "Baby Boomers";
}
else if(yearBorn > 1964 && yearBorn <= 1980) {
generationalCohort = "Generation X";
}
else if(yearBorn > 1980 && yearBorn <= 2001) {
generationalCohort = "Millennium";
}
else if(yearBorn > 2001 && yearBorn < 2020) {
generationalCohort = "Generation Z";
}
else {
generationalCohort = "Outside of our named generations";
}
return generationalCohort;
}
let year = parseInt(prompt("Enter your year of birth"));
let cohort = getGenerationalCohort(year);
alert("The generational cohort of someone born in " +
year + " is: " + cohort + ".");
What did that do?
- We ask the user their year of birth
- We take that value and check to see which generation cohort the user is
- We print it to the screen
For Loops
What are For Loops?
- What computers are good at are doing the same thing over and over again very fast.
- With a for loop, we can define how many times we want something to happen over and over again
What are For Loops?
- The key to the for loop is the expression that evaluates to a Boolean (true or false)
- While that Boolean is true, the for loop keeps going
- The moment when that Boolean is false, the loop terminates
Let's use a For Loop!
function countToX(x) {
let message = "";
for(let i = 0; i <= x; i = i+1) {
message = message + i + " ";
}
return message;
}
let limit = parseInt(prompt("Enter a number"));
let output = countToX(limit);
alert(output);
What did that do?
- We created the variable message with an empty string
- We created a loop that will start at 0, and end while it is less than or equal to x
- For each iteration we will add 1 to i
What did that do (2)
- So for the first iteration, i = 0, for the next one, i = 1, the next i = 2, and so on
- For each iteration, the expression i <= x is evaluated
- First it figures out if 1 <= 3, and the boolean that results from that (True) tells the loop to keep going
What did that do? (3)
- Within that loop, at each iteration we then added the number i, and then a space to message
- Note that message is getting longer each iteration. Why do think that is?
What did that do? (4)
- Once i becomes less than or equal to x, the for loop terminates
- The function returns the message
- We then ask the user for a number, and pass it to the countToX function, and then print out the output to the console
While Loops
What are While Loops?
- For loops are good at repeating an action over and over again a set amount of times
- But what if we don't know when to stop repeating an action?
- This is a key opportunity to use while loops in
What are While Loops
- A while loop executes as long as a condition is true
- The statements inside the loop should (eventually) make that condition false to end the loop
- Let's start with an action
Let's use a While Loop!
let answerQuestion = function() {
let answer = prompt("What is 4 + 4");
if (answer == "8") {
return true;
}
else {
return false;
}
}
let answer = false;
while (answer != true) {
answer = answerQuestion();
}
alert("Correct Answer!");
What did that do?
- The answerQuestion function asks the user what is the answer to the math question
- If it's correct, return true, if not, return false
- We then execute a while loop that continues until answerQuestion returns true
Arrays and Objects
Arrays and Objects
- Up to now we have been using single variables
- Sometimes you want to store a list of variables
- Perhaps you want to represent something more complicated in code
- You can use Arrays and Objects for this purpose
Let's start with a compound example
let student = {
name: "Kay Ashaolu",
id: 232324,
lab_grades: [1, 1, 1],
assignment_grades: [87, 98, 82]
};
alert(student);
alert(student.name);
alert(student["lab_grades"]);
alert(student.assignment_grades[2]);
What did that do?
- We created an object and stored it in the variable "student"
- We then attempted to display the object
- Then we printed the student's name
- Then the student's lab grades
- Then the student's third assignment grade
- Array indexes start from 0
One more example
let student = {};
student.name = prompt("Enter your name");
student.attempts = [];
let answer = false
while(answer != true) {
value = prompt("What is 8+8?");
student.attempts.push(value);
if(value == "16") {
answer = true;
}
else {
answer = false;
}
}
alert(student.name + " answers: " + student.attempts);
What did that do?
- We created an object (student) where you can store her name and her attempts to the question "What is 8+8?"
- In a while loop, we store the results in an array
- We then print the previous attempts that she made
Questions?
JavaScript II - Frontend Webarch
By kayashaolu
JavaScript II - Frontend Webarch
Course Website: https://www.ischool.berkeley.edu/courses/info/253a
- 691