JavaScript I – Day 6

Geekwise Academy

 

 

Instructors:

Corey Shuman

Aaron Lurz

 

 

Slack Channel:

https://geekwise-js1.slack.com

Github:

https://github.com/coreyshuman/Geekwise-JavaScript-I

Lesson plans:

http://coreyshuman.github.io/Geekwise-JavaScript-I/html/

 

 

Today’s Topics

·         Review from Day 5

o   Arrays

o   Functions

·         New Topics: Control Flow – Loops!

o   While loops

o   Do while loops

o   For loops

·         Assignment

 

 

 

Function Challenge Review from Day 5

In a new JavaScript file, complete the following set of tasks:

·         Create a function that will return the square of a number (power of 2).

·         If a non-number argument is passed into the function, return NaN

·         Create a function that will capitalize the first letter of a string and add a period (.) to the end of the string if it doesn't already end with a period.

·         If a non-string argument is passed into the function, return a blank string

·         Create a string that will flip the position of the first and second half of a string. For example, the string “abcdef” would be returned as “defabc”. Hint: use substring.

·         If a non-string argument is passed into the function, return a blank string

·         If a string with less than 2 characters or an odd number of characters is passed into this function, return a blank string. Hint: use modulus (%) operator.

·         Bonus: how can this function be modified to work with odd-length strings, such as converting “abc1efg” to “efg1abc”?

·         Create a function that accepts an array of 4 numbers and returns the average

·         If a non-array is passed into the function, return NaN. Remember arrays are considered objects in JS.

·         If any of the 4 values in the array are not a number, return NaN.

 

 

 

 

 

                                                             


Control Flow: Loops

 

Looping is the act of repeating a block of code based on a given condition. When the conditions ceases to be truthy, the loop stops.

We'll talk about 3 kinds of loops tonight:

1.      while loops

2.      do / while loops

3.      for loops

First, we'll cover while loops. while loops work by evaluating a condition, if the condition is true, the loop "fires", executing all code it contains. The function will keep looping back to the top and executing until the condition becomes false, then loop stops.

One important concept with while loops is that you must write the code that will make the condition false, otherwise you get an infinite loop.

Try it: Create a loop that will log the numbers 1 - 10 to the console.

    
var a = 0;
while (a < 10) {
    console.log(a);
    a++;
}
   

 

The do / while loop is less commonly used, however it's a useful tool to have once you understand how it differs from the while loop.

The do / while loop will always run at least once, then it evaluates its condition. If the condition is still true, it will continue the loop.

    
var i = 1;
 
do {
    console.log(i);
    i++;
} while (i < 10);
   

 

Your turn. How would you use one of the above loops to output each even number from 2 to 20? How about 100 to 0 in intervals of 10?

 

Finally, we reach the for loop, the most common loop we'll use in class and that you will encounter as a programmer.

A for loop looks like this:

 
for (statement1; statement2; statement3) {
         // code block to be executed
}

 

The 3 statements used in the loop define the conditions under which the loop runs.

Statement 1 is executed before the loop (the code block) begins. This allows us to set up or initial state.

Statement 2 defines the condition for running the loop.

Statement 3 is executed each time after the loop has executed. This is where we update our conditional variable. For example, increment or decrement a variable.

This type of loop is nice because you do not need to manage the conditional variable in your normal code execution because it's built into the loop structure. This makes the for loop inherently safer to use.

    
for (var i = 0; i < 10; i++) {
    console.log(i);
}
   

 

Fantastic, so now I can loop, but, what if I want a loop to stop early?

JavaScript provides two ways of controlling the flow of a loop, the continue and break keywords.

continue will immediately reset the loop to the next iteration, and continue on with the loop. It's basically just saying, disregard the rest of this loop and go to the next loop.

Try it: Create a loop (for or while) that will loop 10 times, and skip the 5th and 7th loop. All other loops should log the loop number to the console.

    
var i = 0;
 
while (i < 10) {
    if (i === 5 || i === 7) {
        i++;
        continue;
    }
 
    console.log(i);
    i++;
}
   

 

The break keyword will, when encountered, immediately stop the loop AND all subsequent loops.

Create a for loop that will loop ten times, each time logging the current loop number, but terminate the loop on the seventh loop.

    
for (var i = 0; i < 10; i++) {
    console.log(i);
 
    if (i === 6) {
        break;
    }
}
   

Looping & Arrays, a perfect match

So all our work with arrays up to this point has been retrieving array indexes one at a time using a numbered bracket notation, IE fruits[3]. This is useful, but what if your application requirements were such that you needed to do something to every element in the array?

This where were the power of loops really becomes apparent. A for loop is a perfect mechanism for iterating over each element in an array.

Try it: How would you create a for loop and log all the items in our fruit array to the console? Hint...you may find the length property of an array useful here.

    
var fruits = ["cherry", "apple", "peach", "plum"];
 
for (var i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
   

 

Assignment

·         Use Assignment Template from the class GitHub account under Day 6 here:

https://github.com/coreyshuman/Geekwise-JavaScript-I/tree/master/Day%206/Assignment%20Template

 

·         Create an empty array at the top of the file (right after the intro comment)

·         Create a function that takes the text from Input 1 and pushes it into the array

·         Use the function domInput1() to do this

·         When the user clicks the “Go!” button, call your function you created that adds the Input 1 text to your array. Do this by calling your function inside handleGoButtonClick().

·          You should also clear the contents of Input 1 by calling domInput1("");

·         Print the contents of you array to the Text Output window using domTextOutput(text);

·         To print an array as a string, call the .toString() function on the array.

·         If you get the above to work, add a function to your script that will add the contents of Input 2 to the BEGINNING of the array

·         You can use loops to accomplish this, or you can some built-in array functions.