This document provides an introduction to programming concepts through front-end web development lessons. It discusses what a program and programming are, how computers process instructions sequentially, and introduces pseudo code as a way to outline program logic without a specific syntax. Examples are provided to demonstrate pseudo code for a thermostat application and making pasta. Programming concepts like variables, loops, conditionals, and functions are mapped to these examples. Students are instructed to work in teams to write pseudo code for the process of ordering a pizza.

1. Front-End Web
Development
Lesson 6
Introduction to Programming

2. Agenda
●
●
●
●
●
●
●
Review (10 minutes)
Team Presentations (20 minutes)
Intro to Programming (10 minutes)
Pseudo Code(20 minutes)
Examples: Thermostat & Pasta (40 minutes)
Boston Temperature (20 minutes)
Lab: Pizza Ordering (45 minutes)

3. Where We Are
We have developed an understanding of the
following technologies:
HTML5
CSS
The final front-end development technology:
JavaScript

4. What is a Program?
A program is a set of instructions to tell a
computer what to do
A computer will only do what you tell it to do.

5. What is Programming?
Programming is the task of writing those
instructions in a language that the computer
can understand.

6. Becoming a Programmer
It isn’t about the programming language. It is
about changing how you think.
We have to know how the computer thinks to
change how we think.

7. How Computers “Think”
The short answer is that they don’t think.
Computers act as if they think by sequentially
executing simple instructions.
The only things a computer know are the things
we tell it.

8. Pseudo Code
Pseudo code is the process of writing a
program without using the syntax of a
programming language

9. Pseudo Code
Example #1:
If the door is closed and I want to exit the room,
then open the door.

10. Pseudo Code
Example #1:
If the door is closed and I want to exit the
room, then open the door.

11. Pseudo Code
Example #1:
If (door is closed and I want to exit the room) {
open the door
}

12. Pseudo Code
Example #2 (Thermostat)
Outline pseudo code for an application that
would monitor the room temperature and adjust
it so that the room remains a certain
temperature.

13. Pseudo Code
Example #2 (Thermostat -- in English)
get the temperature
set the target temperature to 72 degrees
repeat these steps:
get the current temperature
if target temperature > (current temperature + 5), then
turn on the heater
if target_temperature <= current temperature, then
turn off the heater

14. Pseudo Code
Example #2 (Thermostat -- more code-like)
get target_temprature
target_temperature = 72
repeat forever,
current_temperature = get_sensor_reading
if target_temperature > (current_temperature + 5),
turn_on_heater
if target_temperature <= current_temperature,
turn_off_heater

15. Flow Control
JavaScript is programming
Programming is simply a series of instructions
~ think recipe

16. Flow Control
Sometimes the ingredients change
~ variables
Sometimes steps are repeated
~ loop

17. Flow Control
Sometimes steps are changed or omitted
~ conditional statements
Sometimes instructions are common to several
recipes
~ function

18. Pseudo Code
Simply explain what you want to happen in
plain English
Example #3 (Recipe)
~ explain how to make pasta

19. Pseudo Code
Step 1: assemble ingredients
Step 2: boil water
Step 3: add pasta
Step 4: heat pasta sauce
Step 5: combine pasta and sauce
Step 6: serve

20. Programming Concepts
variables: [ingredients]
loops : [repeated steps]
conditionals: [if one thing, then do something]
functions: [mini-programs]

21. Whiteboard
Build out pseudo code for making pasta.

22. What Can JavaScript Do?
Let’s look at a web page example:
~ Google “weather Boston”

23. What Can JavaScript Do?
variables: [ingredients] ???
loops: [repeated steps] ???
conditionals: [if one thing, then do something] ???
functions: [mini-programs] ???

24. Lab
Create pseudo code for the process of ordering
pizza.
Whiteboard the basics.
Work in teams of three.

25. Homework
Watch What Can You Do with JavaScript?
Research Chrome Developer Tools
Create index page for your server workspace