Your SlideShare is downloading. ×
Lesson 07
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 07

102

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
102
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Front-End Web Development Lesson 7 JavaScript Basics
  • 2. Agenda ● ● ● ● ● JS Basics (Syntax) Variables Arithmetic Conditionals Lab
  • 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. JavaScript Syntax ● ● ● ● Semicolon Brackets Parentheses Quotation Marks
  • 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. 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. 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. Variables Declaration Declaration: var age; Assignment: age = 21; Both at the same time: var age = 21;
  • 9. Variable Re-Assignment var name = “Aaron”; name = “Philip”; The contents of the container called “name” has changed from “Aaron” to “Philip”.
  • 10. Variable Conventions SINs are not allowed. No Spaces In Names. Options: ● camelCase ● under_scores
  • 11. Variables & Data Types What can you store in a variable?
  • 12. Data Types The types of values can be … ● strings: text ● numbers: int or float ● Boolean: true or false
  • 13. Strings Double quotes or single quotes. Gotchas: apostrophes? Examples: “It’s a beautiful day.” ‘It’s a beautiful day.’
  • 14. Arithmetic
  • 15. Code Along Continue work work on js_basics.html
  • 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. Conditionals Conditional statements are also called “If/then” statements. Syntax: if (condition) { // some action happens here }
  • 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. Conditionals Add an “else” condition: if (today is Wednesday) { document.write(“Just two more work days”); } else { document.write (“Keep working.”) }
  • 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. Compound Conditions Both conditions must be true: if (pizza is small && toppings is two) { document.write(“Price is $10.00.”); }
  • 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.

×