CIS 111

Introduction to Web Programming

Lab 4 – Scope, Logging, and Timers
1. Introduction
The purpose of this lab is to study and practice concepts related to:

• Identifier scope
• Console logging
• Understand timing events

2. Identifier Scope
A variable is a named container used for storing values. Once I declare a variable, where can I
use it? In what parts of the code is it visible? In this lab, you will practice those concepts. The
following code snippet shows how to declare and initialize a variable (in this class, we will only
use let and const to declare and initialize a variable.)
// declare and initialize the variable username
let username = "ForrestG";
//We can use that identifier after being declared
if (username === "ForrestG") {
console.log("Rightful user: ForrestG");
}

In JavaScript, every identifier (e.g., variable or function) not defined inside a function
has global scope. That identifier will be visible within the whole JavaScript program. On
the other hand, an identifier declared inside a function is considered local to that
function and is only visible within that function.

// blockLocalVar cannot be used here

for(…) { Ü enclosing block starts here
…
let blockLocalVar = “testing”;
…
// blockLocalVar can be used here
}Ü enclosing block ends here
// blockLocalVar cannot be used here

More generally, we can talk about block locality. An identifier is local to the block
where it is declared; the block it belongs to is delimited by the opening curly brace
before and the closing one after its declaration.
A variable that is local to a block is visible within that block, which includes other
blocks within that block.

// blockLocalVar cannot be used here

for(…) { Ü enclosing block starts here
…
let blockLocalVar = “testing”;
if (condition) { Ü nested block starts here
// blockLocalVar can be used here
…
} Ü nested block ends here
…
// blockLocalVar can be used here
} Ü enclosing block ends here
// blockLocalVar cannot be used here

We recommend avoiding using global variables to the best of your programming

abilities.

What is the output of the following code snippet? Discuss with your lab assistant and
your classmates the reasons for that result. What variables are local, and which ones
are global?

function foo(a) {
let b = a*2;

function bar(c) {
console.log(a, b, c);
}
bar(b*3);
}

foo(2);

An essential difference between var and let is that var is not block-scoped; it is
function-scoped. Again, use let, not var.

3. Console logging
console.log(param) by default logs at the INFO level - however, you also have three other
logging levels at your disposal, which you should use – console.debug(), console.warn(),
and console.error(). Besides formatting differences (notice the different colors?), the
browser's developer console lets you filter out logs at different levels easily with a convenient
dropdown to declutter your logs.
Type the following instructions in Google Developers Console:
The console.debug() method outputs a message at the "debug" log level. Google Developer
Tools displays the message if the console is configured to display debugging output.

When we study objects and arrays, you will see how practical these methods are to inspect the
data your programs manipulate.
Google Developers Console allows you to choose what messages to display on the console.
Click on the Custom levels selector to inspect the different types of messages.

4. Timers

There are two main mechanisms to time the execution of events in JavaScript:

• setTimeout(function, period)
Executes a function after a period (specified in milliseconds)
• setInterval(function, period)
Same as setTimeout(), but it repeats the execution of the function continuously after
a period
5. Delayed Execution
The following example illustrates how setTimeout sets a timer and when the specified time
has elapsed, it executes the given function. The function we send to setTimeout is known as a
callback function (we will study callback functions in more detail later in this class.) If you need
to send arguments to the function, you can include them after the delay argument. Here is an
example of its usage. (The third argument to setTimeout is the argument to myFunction.)

Type the following instructions in the Google Chrome console:

setTimeout(myFunction, 5000, "call #1");

setTimeout(myFunction, 3000, "call #2");
setTimeout(myFunction, 1000, "call #3");

Comment with your classmates and the lab instructor about the order of execution of
those lines. Why did you get that output sequence on the browser?
6. Repeated interval execution
The setInterval() method repeats a given function at every given time interval
(also specified in milliseconds.) The following code fragment illustrates how to
update a portion of your web page every second (it replaces the date on a given
HTML element.)

Comment with your classmates and the lab instructor about marking an HTML element
and how the JavaScript finds it in the document and replaces its content.
The toLocaleTimeString() function (formally a method – we will study that later in
the class) returns a string with a language-sensitive representation of the time portion
of this date.
Save the HTML code developed in this lab section in a file called lab-4.html. That file
will be deliverable products for project 2.

7. Upload Lab Products to Coding Rooms

Remember that this lab's products are deliverables in Project 2. You may copy and paste the
content of your files or upload them directly to Coding Rooms. The file to be uploaded to
Coding Rooms is lab-4.html.
Make sure your functions pass all the unit tests.