Lessons 130 & 133 – Complete 2020 Web Development Bootcamp

Lesson 130 – Control Statements: For Loops

A for loop works similarly to a while loop. Instead of testing a condition like a while loop does, a for loop specifies the number of times we want the loop to run.

The syntax for a For loop looks like this:

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

This is the code from the while loop we wrote in this lesson for the fizzBuzz function.

var output = [];
var count = 1;

function fizzBuzz() {

    while (count <= 100) {
    
    if (count % 3 === 0 && count % 5 === 0) {
        output.push("FizzBuzz")
    }

    else if (count % 3 === 0) {
        output.push("Fizz")
    }

    else if (count % 5 === 0) {
        output.push("Buzz")
    }

    else {
        output.push(count);
    }

    count = count + 1;
  }
    console.log(output);

 }

fizzBuzz();

This code can be written as a for loop and will produce the same result. This is the code written as a for loop.


var output = [];

function fizzBuzz() {

    for  (var count = 1; count <= 100;  count = count + 1) {
    
    if (count % 3 === 0 && count % 5 === 0) {
        output.push("FizzBuzz")
    }

    else if (count % 3 === 0) {
        output.push("Fizz")
    }

    else if (count % 5 === 0) {
        output.push("Buzz")
    }

    else {
        output.push(count);
    }
}
    console.log(output);
}
fizzBuzz();

While loops check for a state and run the code while that state exists.

For loops iterate through the code and you use the for loop to define how many times the code iterates.

The challenge for the lesson was to code a Fibonacci generator that outputs an array of numbers where every number after the first two numbers is the sum of the preceding two numbers.

This is my solution, It works when I run it in google chrome developer tools console but the solution checker after this lesson doesn’t accept it. I am not sure why that is.

function fibonacciGenerator(n) {
    var a = 0;
    var b = 1;
    var result = b;
    var output = [a, b];

    for (var i=2; i<n; i++) {
        
        result = a + b;
        a = b;
        b = result;
        output.push(result);
    }
  console.log(output);
}

fibonacciGenerator(30);

Lesson 133 – Adding Javascript to Websites

You can add inline javascript by adding an attribute to the html tag. This is the online attribute added to the html body tag –

<body onload="">

The effect of the onload attribute is that whenever the body is loaded then whatever Javascript is inside the quotation marks will run.

Inline Javascript isn’t very modular and is difficult to debug. It is best practice to avoid using inline Javascript.

The next way to incorporate Javascript is by using internal Javascript.

Internal Javascript is added by using a script tag. For example –

<script type="text/javascript">
	

</script>

You place any Javascript that you want to use within the script tag.

So for example, an alert can be called within the script tag like this –

<script type="text/javascript">
	
	 alert('Hello');

</script>

The final way to incorporate Javascript is as an external file.

Instead of having a script tag in the body html tag, a link to an external Javascript file is placed in the html body tag like this –

<body>
	<h1>Hello</h1>

<script type="text/javascript" src="index.js"></script>

</body>

The Javascript code is then written in the external index.js file.

The link to the external Javascript file should be placed just before the body ending tag. The reason is that if you place it in the head tag and the external Javascript file contains code changing at html element the code will fail because it is attempting to change an html element that hasn’t been loaded yet by the browser.