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.