front end web development

Brett Haymaker, JavaScript Consultant & Educator

Warm-up

15 MINUTES

Review the site below:

http://www.brett-haymaker.com

1. Inspect the page and identify 1-2 things you suspect are using JavaScript
2. Discuss with your partner
3. Investigate how those things are being achieved.
4. Share one thing that you uncovered.

Learning Objectives:

• Practice programmatic thinking by writing pseudo code to solve a basic problem.

• Define web site behavior and the practical uses of JavaScript.

• Predict DOM output / changes by reading JS code.

Thinking programmatically

Psuedo code - what is it? Why do we use it?

Let's psuedo code together. Let's build a 'thermostat' together.

Possible thermostat

Rock, Paper, Scissors LAB

20 MINUTES

Use psuedocode, drawing from the thermostat example, to program a computer to play the rock, paper, scissors game.

Be prepared to share your solution with the class on Slack and explain your choices.

Reading JavaScript

Let's look at a simple example of JavaScript dynamically changing a page.

Practice reading the JavaScript in the JS column. Even though we haven't covered any JS syntax yet - try to reason about what is happening.

https://codepen.io/TheHaymaker/pen/BJYeVN

Traffic Light LAb

20 MINUTES

1. visit the traffic light codepen
2. Take a few moments to read to code
3. Interact with the traffic light
4. Experiment with the JS code to make the slow light yellow and the go light green

Variables + Data Types

Some common data types:

• numbers
• boolean
• string

EXIT TICKET

Class Survey

Class name: FEWD 15