What we need to learn:
- Control flow: else-if
- Arrays
- Loops (for)
Arrays
A foundational concept of programming is how to organize and store data.
One way we organize data in real life is to make lists. Let’s make one here:
New Year’s Resolutions:
1. Rappel into a cave
2. Take a falconry class
3. Learn to juggle
Let’s now write this list in JavaScript, as an array:
let newYearsResolutions = [‘Rappel into a cave’, ‘Take a falconry class’, ‘Learn to juggle’];
Arrays are JavaScript’s way of making lists. These lists can store any data types (including strings, numbers, and booleans) and they are ordered, meaning each item has a numbered position.
push Method
JavaScript has built in methods for arrays that help us do common tasks. Let’s learn some of them.
First, .push() allows us to add items to the end of an array. Here is an example of how this is used:let newYearsResolutions = [‘item 0’, ‘item 1’, ‘item 2’];
newYearsResolutions.push(‘item 3’, ‘item 4’);
The method .push() would make the newYearsResolutions array look like:
[‘item 0’, ‘item 1’, ‘item 2’, ‘item 3’, ‘item 4’];
How does .push() work?
- It connects to newYearsResolutions with a period.
- Then we call it like a function. That’s because .push() is a function and one that JavaScript allows us to use right on an array.
Another array method, .pop(), is similar to .push(). This method removes the last item of an array.
let newYearsResolutions = [‘item 0’, ‘item 1’, ‘item 2’];
newYearsResolutions.pop();
console.log(newYearsResolutions);
// Output: [ ‘item 0’, ‘item 1’ ]
In the example above, calling .pop() on the newYearsResolutions array removed item 2 from the end.
Loops
One of a computer’s greatest abilities is to repeat a task multiple times. Loops let us tell the computer to loop over a block of code so that we don’t have to write out the same process over and over.
There are two kinds of loops we will learn in this lesson:
- for loops, which let us loop a block of code a known amount of times.
- while loops, which let us loop a block of code an unknown amount of times.
If we want to throw dice three times in a game we can use a for loop
<HTML>
<head>
<script>
for (let i = 0; i < 3; i++) {
alert (“You have thrown dice “+i+” times. Throw dice!”);
}
</script>
</head>
<body></body>
</HTML>
Note that in the example above, we used i and j as the iterator variables to make the structure of the code easier to see, but it is a better practice to use descriptive variable names.
Loops are a useful tool for improving the functionality of our programs. However, loops can also cause us problems if we aren’t careful.
Both for loops and while loops need explicit instructions on when to terminate. Infinite loops are more common in while loops because they don’t have an iterator built into their syntax. When writing a while loop, be sure to write the code that will guarantee the condition will eventually be met.
for loops require a start condition, a stop condition, and an iterator. The iterator should bring the loop from the start condition to the stop condition.
for (let i = 0; i < array.length; i–) {
//some code
}
- The loop begins with i = 0.
- After one iteration through the loop, i is equal to -1. This is because i begins at 0 and 1 is subtracted from i each loop.
Do you see the problem? i is decreasing each time. It will never equal the length of the array. This code will execute forever.
for (let i = 0; i < array.length; i++) {
//some code
}
We changed the iterator to i++ which means i will eventually equal the length of the array. We have eliminated the infinite loop!
Note: While completing this exercise, you may run into an infinite loop if you do not find the correct answer. If that happens, you may need to refresh the page.
06 Restaurant
<HTML>
<head>
<script>
let order = [];
const addOrder = () => {
for (let nextCourse= prompt(“Do you want to order a course? Y/N”);nextCourse==”Y” || nextCourse==”y”;){
if (nextCourse==”Y”|| nextCourse==”y”){
let course= prompt(“Write your next course”);
order.push(course);
nextCourse= prompt(“Do you want to order a course? Y/N”);
}
else {
alert(“You have finished your order”)
}
}
}
addOrder();
alert (order);
</script>
</head>
<body></body>
</HTML>
Sé el primero en comentar