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:

  1. HTML – Defines the static structure and content for a web page.
  2. CSS – Used to alter the style of the page which includes size, positioning and color.
  3. JavaScript – Code used to enable dynamic functionality and handle custom events.

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:

  1. Change styles using Dev Tools.
    1. Right click on “Hi, Jeff” above and select “Inspect”
    2. In the styles section unselect the border style
    3. In the styles section modify other values like the color
  2. Use console to select individual elements with querySelector
    1. Right click on “Hi, Jeff” above and select “Inspect”
    2. Click on the “console” tab
    3. Type in: document.querySelector('#jeffbox').style.color = 'green'
    4. Change other values
  3. Use console to modify all boxes
    1. Right click on “Hi, Jeff” above and select “Inspect”
    2. Click on the “console” tab
    3. Type in: document.querySelectorAll('#playground div').style.color = 'green'
    4. Change other values
  4. Add click handler so we can click on a box and get a pop up using addEventListener()
    1. Right click on “Hi, Jeff” above and select “Inspect”
    2. Click on the “console” tab
    3. Type in: function sayHi() { window.alert('hi, you'); }
    4. Type in: document.querySelector('#jeffbox').addEventListener('click', sayHi);
    5. Add other handlers
Categories: Uncategorized

Jeff Whelpley

CTO at GetHuman, Google Developer Expert, AI and Angular Boston meetup organizer

Leave a Reply

Your email address will not be published. Required fields are marked *