lesson 06
DESCRIPTION
TRANSCRIPT
![Page 1: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/1.jpg)
Front-End Web Development
Lesson 6Introduction to Programming
![Page 2: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/2.jpg)
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)
![Page 3: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/3.jpg)
Where We Are
We have developed an understanding of the following technologies:
HTML5CSS
The final front-end development technology:JavaScript
![Page 4: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/4.jpg)
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.
![Page 5: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/5.jpg)
What is Programming?
Programming is the task of writing those instructions in a language that the computer can understand.
![Page 6: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/6.jpg)
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.
![Page 7: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/7.jpg)
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.
![Page 8: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/8.jpg)
Pseudo Code
Pseudo code is the process of writing a program without using the syntax of a programming language
![Page 9: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/9.jpg)
Pseudo Code
Example #1:
If the door is closed and I want to exit the room, then open the door.
![Page 10: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/10.jpg)
Pseudo Code
Example #1:
If the door is closed and I want to exit the room, then open the door.
![Page 11: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/11.jpg)
Pseudo Code
Example #1:
If (door is closed and I want to exit the room) {open the door
}
![Page 12: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/12.jpg)
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.
![Page 13: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/13.jpg)
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
![Page 14: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/14.jpg)
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
![Page 15: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/15.jpg)
Flow Control
JavaScript is programming
Programming is simply a series of instructions~ think recipe
![Page 16: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/16.jpg)
Flow Control
Sometimes the ingredients change~ variables
Sometimes steps are repeated~ loop
![Page 17: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/17.jpg)
Flow Control
Sometimes steps are changed or omitted~ conditional statements
Sometimes instructions are common to several recipes
~ function
![Page 18: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/18.jpg)
Pseudo Code
Simply explain what you want to happen in plain English
Example #3 (Recipe)~ explain how to make pasta
![Page 19: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/19.jpg)
Pseudo Code
Step 1: assemble ingredientsStep 2: boil waterStep 3: add pastaStep 4: heat pasta sauceStep 5: combine pasta and sauceStep 6: serve
![Page 20: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/20.jpg)
Programming Concepts
variables: [ingredients]loops : [repeated steps]conditionals: [if one thing, then do something]functions: [mini-programs]
![Page 21: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/21.jpg)
Whiteboard
Build out pseudo code for making pasta.
![Page 22: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/22.jpg)
What Can JavaScript Do?
Let’s look at a web page example:
~ Google “weather Boston”
![Page 23: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/23.jpg)
What Can JavaScript Do?
variables: [ingredients] ???loops: [repeated steps] ???conditionals: [if one thing, then do something] ???functions: [mini-programs] ???
![Page 24: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/24.jpg)
Lab
Create pseudo code for the process of ordering pizza.Whiteboard the basics.Work in teams of three.
![Page 25: Lesson 06](https://reader034.vdocuments.net/reader034/viewer/2022042714/54bc87b94a79590a388b4574/html5/thumbnails/25.jpg)
Homework
Watch What Can You Do with JavaScript?
Research Chrome Developer Tools
Create index page for your server workspace