This document provides an agenda and overview for a lesson on JavaScript basics, including syntax, variables, arithmetic, and conditionals. It introduces JavaScript syntax rules and shows how to declare and assign variables to store values. It demonstrates how to perform arithmetic in JavaScript and use conditional statements to run code based on conditions. The lesson concludes with a lab assignment to build a simple pizza price calculator using JavaScript variables and conditional logic.

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.