Front-End Web
Development
Lesson 6
Introduction to Programming
Agenda
●
●
●
●
●
●
●

Review (10 minutes)
Team Presentations (20 minutes)
Intro to Programming (10 minutes)
Pseudo Code(20...
Where We Are
We have developed an understanding of the
following technologies:
HTML5
CSS
The final front-end development t...
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 ...
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...
How Computers “Think”
The short answer is that they don’t think.
Computers act as if they think by sequentially
executing ...
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 adj...
Pseudo Code
Example #2 (Thermostat -- in English)
get the temperature
set the target temperature to 72 degrees
repeat thes...
Pseudo Code
Example #2 (Thermostat -- more code-like)
get target_temprature
target_temperature = 72
repeat forever,
curren...
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
...
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 ingredients
Step 2: boil water
Step 3: add pasta
Step 4: heat pasta sauce
Step 5: combine pas...
Programming Concepts
variables: [ingredients]
loops : [repeated steps]
conditionals: [if one thing, then do something]
fun...
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 some...
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 workspac...
Upcoming SlideShare
Loading in …5
×

Lesson 06

479 views
263 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
479
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 06

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

×