Front-End Web Development

Lesson 6Introduction to Programming

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)

Where We Are

We have developed an understanding of the following technologies:

HTML5CSS

The final front-end development technology:JavaScript

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.

What is Programming?

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

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.

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.

Pseudo Code

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

Pseudo Code

Example #1:

If the door is closed and I want to exit the room, then open the door.

Pseudo Code

Example #1:

If the door is closed and I want to exit the room, then open the door.

Pseudo Code

Example #1:

If (door is closed and I want to exit the room) {open the door

}

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.

Pseudo Code

Example #2 (Thermostat -- in English)get the temperatureset the target temperature to 72 degreesrepeat 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

Pseudo Code

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

Flow Control

JavaScript is programming

Programming is simply a series of instructions~ think recipe

Flow Control

Sometimes the ingredients change~ variables

Sometimes steps are repeated~ loop

Flow Control

Sometimes steps are changed or omitted~ conditional statements

Sometimes instructions are common to several recipes

~ function

Pseudo Code

Simply explain what you want to happen in plain English

Example #3 (Recipe)~ explain how to make pasta

Pseudo Code

Step 1: assemble ingredientsStep 2: boil waterStep 3: add pastaStep 4: heat pasta sauceStep 5: combine pasta and sauceStep 6: serve

Programming Concepts

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

Whiteboard

Build out pseudo code for making pasta.

What Can JavaScript Do?

Let’s look at a web page example:

~ Google “weather Boston”

What Can JavaScript Do?

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

Lab

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

Homework

Watch What Can You Do with JavaScript?

Research Chrome Developer Tools

Create index page for your server workspace