Front-End Web
Development
Lesson 7
JavaScript Basics
Agenda
●
●
●
●
●

JS Basics (Syntax)
Variables
Arithmetic
Conditionals
Lab
JavaScript Basics Syntax
Syntax: Spelling and grammar rules of a
programming language
Like any language, there are formal ...
JavaScript Syntax
●
●
●
●

Semicolon
Brackets
Parentheses
Quotation Marks
Code Along
Start with a folder and a template
● desktop folder (07_js_basics)
● css folder > normalize.css, style.css
● js...
Variables
●

●

●

We can tell our program to remember values
for us to use later on.
The action of saving a value to memo...
Variables
●

●

The action of getting the value from a
variable is called accessing the variable.
We will use the above te...
Variables Declaration
Declaration: var age;
Assignment: age = 21;
Both at the same time: var age = 21;
Variable Re-Assignment
var name = “Aaron”;
name = “Philip”;
The contents of the container called “name”
has changed from “...
Variable Conventions
SINs are not allowed.
No Spaces In Names.
Options:
● camelCase
● under_scores
Variables & Data Types
What can you store in a variable?
Data Types
The types of values can be …
● strings: text
● numbers: int or float
● Boolean: true or false
Strings
Double quotes or single quotes.
Gotchas:
apostrophes?
Examples:
“It’s a beautiful day.”
‘It’s a beautiful day.’
Arithmetic
Code Along
Continue work work on js_basics.html
Assignment
Google “New England Patriots” or “Boston Celtics”
Use JavaScript to capture box score information
and then disp...
Conditionals
Conditional statements are also called “If/then”
statements.
Syntax:
if (condition) {
// some action happens ...
Conditionals
“condition” must be “true” for that code block to
execute.
if (today is Wednesday) {
document.write(“Just two...
Conditionals
Add an “else” condition:
if (today is Wednesday) {
document.write(“Just two more work days”);
} else {
docume...
Conditionals
if (today is Wednesday) {
document.write(“Just two more work days.”);
} else if (today is Thursday) {
documen...
Compound Conditions
Both conditions must be true:
if (pizza is small && toppings is two) {
document.write(“Price is $10.00...
Lab
Build a simple page that prompts the visitor for
size of pizza and number of toppings; then
display the correct price....
Upcoming SlideShare
Loading in …5
×

Lesson 07

180 views
144 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
180
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 07

  1. 1. Front-End Web Development Lesson 7 JavaScript Basics
  2. 2. Agenda ● ● ● ● ● JS Basics (Syntax) Variables Arithmetic Conditionals Lab
  3. 3. JavaScript Basics Syntax Syntax: Spelling and grammar rules of a programming language Like any language, there are formal rules around how to write it. This is syntax.
  4. 4. JavaScript Syntax ● ● ● ● Semicolon Brackets Parentheses Quotation Marks
  5. 5. Code Along Start with a folder and a template ● desktop folder (07_js_basics) ● css folder > normalize.css, style.css ● js folder ● template.html
  6. 6. Variables ● ● ● We can tell our program to remember values for us to use later on. The action of saving a value to memory is called assignment. The entity we use to store the value is called a variable.
  7. 7. Variables ● ● The action of getting the value from a variable is called accessing the variable. We will use the above techniques to store values into variables, and generate new values using existing variables.
  8. 8. Variables Declaration Declaration: var age; Assignment: age = 21; Both at the same time: var age = 21;
  9. 9. Variable Re-Assignment var name = “Aaron”; name = “Philip”; The contents of the container called “name” has changed from “Aaron” to “Philip”.
  10. 10. Variable Conventions SINs are not allowed. No Spaces In Names. Options: ● camelCase ● under_scores
  11. 11. Variables & Data Types What can you store in a variable?
  12. 12. Data Types The types of values can be … ● strings: text ● numbers: int or float ● Boolean: true or false
  13. 13. Strings Double quotes or single quotes. Gotchas: apostrophes? Examples: “It’s a beautiful day.” ‘It’s a beautiful day.’
  14. 14. Arithmetic
  15. 15. Code Along Continue work work on js_basics.html
  16. 16. Assignment Google “New England Patriots” or “Boston Celtics” Use JavaScript to capture box score information and then display that information. ● team names (two variables) ● points scored in each quarter (eight variables)
  17. 17. Conditionals Conditional statements are also called “If/then” statements. Syntax: if (condition) { // some action happens here }
  18. 18. Conditionals “condition” must be “true” for that code block to execute. if (today is Wednesday) { document.write(“Just two more work days”); } Google: “javascript string to lowercase”
  19. 19. Conditionals Add an “else” condition: if (today is Wednesday) { document.write(“Just two more work days”); } else { document.write (“Keep working.”) }
  20. 20. Conditionals if (today is Wednesday) { document.write(“Just two more work days.”); } else if (today is Thursday) { document.write(“Just one more work day.”) } else { document.write(“Just keep working.”) }
  21. 21. Compound Conditions Both conditions must be true: if (pizza is small && toppings is two) { document.write(“Price is $10.00.”); }
  22. 22. Lab Build a simple page that prompts the visitor for size of pizza and number of toppings; then display the correct price. Bonus: Prompt for name and actual toppings and display as well. Bonus: Build sales tax of 6.25% into price.

×