Lesson 07
Upcoming SlideShare
Loading in...5

Lesson 07






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Lesson 07 Lesson 07 Presentation Transcript

  • 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 rules around how to write it. This is syntax.
  • 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 folder ● template.html
  • 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.
  • 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.
  • 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 “Aaron” to “Philip”.
  • 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 display that information. ● team names (two variables) ● points scored in each quarter (eight variables)
  • Conditionals Conditional statements are also called “If/then” statements. Syntax: if (condition) { // some action happens here }
  • 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”
  • Conditionals Add an “else” condition: if (today is Wednesday) { document.write(“Just two more work days”); } else { document.write (“Keep working.”) }
  • 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.”) }
  • 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. Bonus: Prompt for name and actual toppings and display as well. Bonus: Build sales tax of 6.25% into price.