Date post: | 19-Jan-2015 |
Category: |
Technology |
Upload: | babong |
View: | 138 times |
Download: | 1 times |
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