Learning JavaScript with Chrome Dev Tools (ng-club session 2, week 7)

For the first 6 weeks of ng-club this session we have been using the ngclub app which combines a visual programming block interface with generated JavaScript. We will jump back to that interface next session after I have time to make a few upgrades, but for now we want to push the kids further into “real” code. Before we get into a fresh Stackblitz project (next week), we are going to spend some time playing in with the Chrome Dev Tools.

What are Chrome Dev Tools?

In the Chrome browser, you can right click on any website and select “Inspect”. This will launch a side window that contains an interface that you can utilize to interact with the code on that website. This is a very powerful interface with many more features than we have time to go over. If you want a general overview, watch this video.

We are going to focus on using this interface to learn more about web development. Specifically we will do this by inspecting this page and making a few modifications to the code.

Quick Crash Course on Web Programming

There are two very important things you need to know before we get started in this exercise:

Important #1: The Triumvirate of Web Technologies

There are three primary technologies used to create a web page:

HTML – Defines the static structure and content for a web page.

CSS – Used to alter the style of the page which includes size, positioning and color.

A described in this GA post, making a website is like building a house. The HTML is the framing.

OLYMPUS DIGITAL CAMERA

With HTML you can see the overall shape of the house and how it is divided into different rooms. CSS is the styling which includes things like paint, decorations, placement of furniture in the rooms, etc.

JavaScript is the thing that reacts to things you do in the house.

For example, when you flip a switch, a light goes on or off. When you click the doorbell, a sound alerts everyone that you are at the front door. Anything that makes a smart house “smart” is JavaScript.

Important #2: The DOM

Truth be told, the visitors to your website don’t actually interact directly with your HTML, CSS or JavaScript code. The centerpiece of the web is actually the DOM (Document Object Model). HTML is translated into the DOM. CSS alters the DOM. JavaScript can both manipulate the DOM and handle events from the DOM. What the user actually sees on the screen comes from the DOM.

OK, so what the heck is the DOM? Well, let’s go back to our metaphor for variables:

Variables are like boxes in that you can give a box a name (or you can give the box different names if you want) and you can put stuff in the box. A variable called “foo” could have the value 56,345. A variable called “moomoo” could have the value “Hi, my name is Jeff”.

A static JSON object is like a box within a box.

Where you can name the entire larger box and you can give names to each of the smaller boxes which exist inside the larger box. The one additional complexity to this analogy is that JavaScript objects can also have functions within objects. If you remember, our metaphor for functions are recipes:

So, a JavaScript object is one big box that can contain both smaller boxes as well as recipes. And, as we have discussed in the past, the smaller boxes can contain even smaller boxes with them and so on. In a similar way, a recipe can point to smaller recipes (ex. a recipe for Stuffed Zucchini can point to a separate smaller receipt for tomato sauce which is then served with the Stuffed Zucchini).

OK, so that is a recap of all our metaphors to date. Now, let’s apply those to what we see on a web page:

The first image above contains what I see when I go to the Google Express website. In the second image, I have taken a version of this site and highlighted some of the elements on the page. The key concept to understand with the DOM is that everything you see can be broken down into smaller and smaller boxes (even more so than what I highlight above). Each box has its own properties and functions as we will see in the exercises below.

Hacking with Dev Tools

OK, so let’s get started. For these exercises we are going to use the following simple set of elements:

Hi, Jeff

Hi, Mady

Hi, Angie

As you can see, each element has a visible border around it. Note that most elements on a web page don’t have a visible border around it, but we are using borders to illustrate the point of how elements are nested inside elements on the page. In the class, we are going to do the following:

Related Posts

This is going to be a fun week at ng-club! We are going to work on creating a “Choose Your Own Adventure” game. This exercise will specifically highlight the use of conditional statements in code. Read more…

This upcoming week we will start the 2nd session of ng-club at Roosevelt Elementary School in Melrose, MA. During the first session, we focused mostly on building games in Scratch. This session will be with Read more…