Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lesson 07


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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.