Session 4: Basics Refresher JS ctd.

Web Coding

Intro to Web Development and Game Prototyping

Andrea Ida Malkah Klaura @ dieAngewandte

Last session

Data types
Operators
Conditionals
Functions
Events
logging things to the console
prompting the user for input
create event handlers
selecting elements
changing content

This session

Simple loops
Scope
Experimentation & consolidation

Simple loops

Introductory reference guide @ MDN web docs: Looping code

while


              var i = 0;
              while (i < 100) {
                // doing some stuff here
                console.log(i);
  
                // increasing the loop condition
                i++;
              }

do-while


              var i = 0;
              do {
                // doing some stuff here
                console.log(i);
  
                // increasing the loop condition
                i++;
              } while (i < 100);

for


              for (var i=0; i<100; i++) {
                // doing some stuff here
                console.log(i);
              }

Looping through an array

the classical way


              var myArr = ['This', 'is', 'an', 'array', 'full', 'of', 'words'];

              for (var i = 0; i < myArr.length; i++) {
                console.log( i, myArr[i] );
              }

being annoying with loops


              var answer;
              do {
                answer = prompt('Tell me a little more about you.');
              } while (!answer || answer.toLowerCase() !== 'no');

`break`ing out of a loop


              for (var i=0; i<50; i++) {
                // doing some stuff here
                console.log(i);
                // check for a condition to end the loop
                if (i > 0 && i % 42 === 0) {
                  break;
                }
              }

`continue`ing the loop iteration


              for (var i=0; i<50; i++) {
                // only do stuff every other time
                if (i % 2) continue;
                // doing some stuff here
                console.log(i);
              }

experimentation break

try out what you've learned so far

Scope

3 types of scope in JS, which determine the visibility/accessibility of variables

global scope
function scope
block scope (since ES6)

scope with `var`


            var x = 23;  // global scope

            function doSomething () {
              // a function always has access to parent scope
              console.log('doing something with x:', x);  // 23
            }

            function doSomeMore () {
              var x = 'WTF?!?';  // function scope masks the parent/global scope
              var y = 42;        // function scope
              console.log('x inside something:', x);  // 'WTF?!?'
              console.log('y inside something:', y);  // 42
            }

            doSomething();
            doSomeMore();

            console.log('x in global scope:', x);  // 23
            console.log('y in global scope:', y);  // throws error, existed only in doSomeMore()

            if ( true ) {
              var x = 'block23';  // no block scope available with var -> global scope
              var z = 'mimimi';   // no block scope available with var -> global scope
            }
            console.log('x after assignment in block:', x);  // 'block23'
            console.log('z outside of scoped block:', z);    // 'mimimi'

block scope and `let`


            let x = 23;  // global scope

            // doSomething() and doSomeMore() work similar with let than in the var example
            // only let does not let you redeclare a variable if it was already
            // declared once, in the scope (var would let you do that)

            // but now for the block scope thingy
            if ( true ) {
              let x = 'block23';  // block scope
              let z = 'mimimi';   // block scope
            }
            console.log('x after assignment in block:', x);  // 23, the 'block23'-x only existed in block
            console.log('z outside of scoped block:', z);    // throws error, existed only in block

in-class exercise

Add the following functionality to the page developed in session 3:

After the user entered their name, start a loop that counts from 0 to 100 and print each number to the console.
Create an array containing several short sentences. Then create a loop that walks through this array and prints every sentence to the console, except when the sentence has less than 10 characters (spaces included). If the loop encounters an empty string, instead of a sentence, it should be stopped immediately.