javascript roadtrip 1
TRANSCRIPT
-
8/9/2019 Javascript Roadtrip 1
1/46
“THE LAST GREAT UNCHARTED FRONTIER”
-
8/9/2019 Javascript Roadtrip 1
2/46
The CLIFFS OF VALUELevel 1
-
8/9/2019 Javascript Roadtrip 1
3/46
LEVEL ONE
THe Prompt & some Basic Numbers
24>
24
3.14>
3.14
The JavaScript Prompt, aka “the Console”>
What gets returned from the code
JavaScript automatically recognizes numbers
-
8/9/2019 Javascript Roadtrip 1
4/46
LEVEL ONE
Operators
10
Common Operators used in JavaScript Syntax:
> 6 + 4
12> 3 * 4
4
> 9 - 5
3> 12 / 4
addition subtraction
multiplication division
3> 43 %
Modulus returemainder aft
-
8/9/2019 Javascript Roadtrip 1
5/46
LEVEL ONE
Order of Operations: PEMDAS
36
Grouping Expressions in JavaScript
> (5 + 7) * 3 12 * 3
> (3 * 4) + 3 - 12 / 12 + 3 - 12 /
12 + 3 - 6
-16
> (-5 * 6) - 7 * -2
-30 - 7 * -2
> 4 + (8 % (3 + 1))
4 + (8 % 4 )
4 + 0-30 - -14
-
8/9/2019 Javascript Roadtrip 1
6/46
LEVEL ONE
Comparators
true
Common Number Comparators used in JavaScript Syntax:
> 6 > 4
false
> 3 == 4
false
> 9 12 != 4
greater than less than
equals not equals
“boolean” value
two equal signs! the “not” symbol
gr
> 8 >= -
> 10
-
8/9/2019 Javascript Roadtrip 1
7/46
LEVEL ONE
Strings
How JavaScript stores and processes !at text
>
>
"Raindrops On Roses"
"Raindrops On Roses" + " And " + "Whiskers On Ki
>"Whiskers On Kit
"Raindrops On Roses" "Whiskers On
"Raindrops On Roses And Whiskers On
Plus will glue Strings together
Strings need quote
-
8/9/2019 Javascript Roadtrip 1
8/46
LEVEL ONE
These are a few of my favorite...Strings
Concatenation works with numbers and their expressions, too.
>"The meaning of life is " + 42
"The meaning of life is 42"
Notice the extra space!
>"The meaning of life is" + 42
"The meaning of life is42"
Uh oh...what happConcatenation aspaces, so we neadd our own.
-
8/9/2019 Javascript Roadtrip 1
9/46
LEVEL ONE
These are a few of my favorite...Strings
Concatenation works with numbers and their expressions, too.
"Platform " + 9 + " and " + 3/4
"Platform 9 and 0.75"
Expressions get>
Make strings out expressions that want to see in theoriginal format.
"Platform " + 9 + " and 3/4">
"Platform 9 and 3/4"
-
8/9/2019 Javascript Roadtrip 1
10/46
LEVEL ONE
Special characters inside Strings
Some characters need backslash notation in JavaScript Strings
>
>
advances to the next “tab stop”"Flight #:\t921\t\tSeat:\t21C"
"Flight #: 921 SeaAdds a quotation mark but withoutending the string too early.
"Login Password:\t\t\"C3P0R2D2\""
"Login Password: "C3
-
8/9/2019 Javascript Roadtrip 1
11/46
LEVEL ONE
Special characters inside Strings
Some characters need backslash notation in JavaScript Strings
>
>
shifts the printout to a “new line”
"Origin\\Destination:\tOrlando(MCO)\\London(LHR)"
"Departure:\t09:55A\nArrival:\t14:55P"
"Origin\Destination: Orlando(MCO)\Lond
Places a backslash itself in the String
"Departure
Arrival:
-
8/9/2019 Javascript Roadtrip 1
12/46
LEVEL ONE
String Comparisons
Checking for matching strings and alphabetical ordering
>
>
"The Wright Brothers" == "Super Mario Brothers"
"The Wright Brothers" != "the wright brothers"
false
true
Case counts!
> "The Wright Brothers" == "The Wright Brothers"
true
“Double equals” will compare EXACT contents
“Not equals” returns true if there is a mismatch
-
8/9/2019 Javascript Roadtrip 1
13/46
LEVEL ONE
String Comparisons
The length of strings can be accessed with the .length property
28
> "antidisestablishmentarianism".length
39
> "One Fish, Two Fish, Red Fish, Blue Fish".length
Spaces and any non-alphabeticcharacters are counted, too!
Returns a number value
-
8/9/2019 Javascript Roadtrip 1
14/46
-
8/9/2019 Javascript Roadtrip 1
15/46
Variable ValleyLevel 2
-
8/9/2019 Javascript Roadtrip 1
16/46
Storing Our Values
JavaScript uses variables to store and manage data
> var trainWhistles = 3
variablekeyword
variablename
assignmentoperator
value to bestored
> trainWhistles
3
Calling the variable’s name now returns the value we stored
Naming Variables
-
8/9/2019 Javascript Roadtrip 1
17/46
Naming Variables
Rules and regulations
var no spaces
var 3blindmice
no spaces in the name
no digits in front
var scored_is_fine underscores are okay, but often irritat
var get$ dollar signs are also cool...but don’t be t
var $_$ slightly stupid, but technically legalvar goodName begin with lowercase, later words capit
var mortalKombat2 FATALITY!!
Changing Variable Contents
-
8/9/2019 Javascript Roadtrip 1
18/46
Changing Variable Contents
>
Want to change a Variable’s value? It’s your lucky day.
no ‘var’ keyword this time, because JavaScriptalready “knows” about the variable
> trainWhistle
>var trainWhistles = 3
>trainWhistles = 9
uses current valueto calculate new value
trainWhistles = trainWhistles + 3 > trainWhistle
> trainWhistle
Changing Variable Contents
-
8/9/2019 Javascript Roadtrip 1
19/46
Changing Variable Contents
>
Want to change a Variable’s value? It’s your lucky day.
> trainWhistle
> trainWhistle
trainWhistles += 3
same operation,different syntax
> trainWhistles = trainWhistles + 3
Changing Variable Contents
-
8/9/2019 Javascript Roadtrip 1
20/46
Changing Variable ContentsWant to change a Variable’s value? It’s your lucky day.
> trainWhistles += 3 > trainWhistl
> trainWhistles = trainWhistles * 2 > trainWhistl
> trainWhistles *= 2 > trainWhistl
same operation,different syntax
That’s, likeof whistles
Using Variables
-
8/9/2019 Javascript Roadtrip 1
21/46
Using Variables
Variable names also act as substitutes for the data they point t
>
"All of our trains have 3 whistl
>
"But the Pollack 9000 has
"But the Pollack 9000 has " + (trainWhistles * 3) + "!"
"All of our trains have " + trainWhistles + " whistles!"
> trainWhistles = 3
Using Variables
-
8/9/2019 Javascript Roadtrip 1
22/46
> trainWhistles = 3
> var pollack9000 = trainWhistles * 3
Variable names also act as substitutes for the data they point t
> "But the Pollack 9000 has " + (trainWhistles * 3) + "!"
Using Variables
> pollack9000
Using Variables
-
8/9/2019 Javascript Roadtrip 1
23/46
Variable names also act as substitutes for the data they point t
trainWhistles = 3>
> "But the Pollack 9000 has " + pollack9000 + "!"
Using Variables
"But the Pollack 900
> var pollack9000 = trainWhis
Incrementing and Decrementing
-
8/9/2019 Javascript Roadtrip 1
24/46
A simple syntax for increasing or decreasing a variable’s value
>trainWhistles = 3
Incrementing and Decrementing
>trainWhistles++
>trainWhistles
4
>trainWhistles--
>trainWhistles
Variables store Strings too!
-
8/9/2019 Javascript Roadtrip 1
25/46
JavaScript can store anything in variables.
>
>
Variables store Strings, too!
var welcome = "Welcome to the JavaScript Express Line!"
var safetyTip = "Look both ways before crossing the tracks
>"Welcome to the JavaScript Express Lin
Look both ways before crossing the tra
welcome + "\n" + safetyTip
Using variable names with Strings
-
8/9/2019 Javascript Roadtrip 1
26/46
Using variable names with Strings
Variable names can also access the length property
49
> var longString = "I wouldn't want to retype this String ev
> longString.length
If a variable holds a String, we can access thelength property directly from the variable name.
More comparisons with variables
-
8/9/2019 Javascript Roadtrip 1
27/46
More comparisons with variables
Comparing String lengths using the length property
>
false
> longWordOne.length > longWordTwo.length
Compares two numbers returned by thelength properties
var longWordOne = "antidisestablishmentarianism"
> var longWordTwo = "supercalifragilisticexpialidocious"
Finding specific characters within Strings
-
8/9/2019 Javascript Roadtrip 1
28/46
Finding specific characters within Strings
Each position in a String has a numbered “index” starting from
> var sentence = "Antidisestablishmentarianism is fun to sa
> sentence.length
0 8 28
Think of index numbers as being a “distancefrom the starting character.” Thus, thefirst character is “zero” away from itself.
Thlesch
Spaces arecharacters too!
43
Since the index starts at zero, but the length counted by number of characters, the length valalways be one more than the last index.
Finding specific characters within Strings
-
8/9/2019 Javascript Roadtrip 1
29/46
Finding specific characters within Strings
Each position in a String has a numbered “index” starting from
> var sentence = "Antidisestablishmentarianism is fun to sa
> sentence.charAt(11) sentence>sentence.charAt(31)>
"b" " "
The charAt( ) method retrieves the character at a specific index.
Variables help organize data
-
8/9/2019 Javascript Roadtrip 1
30/46
Creating a versatile message out of !exible pieces
>
>
Variables help organize data
var trainsOperational =
var operatingStatus = " trains are operational today."
>
"8 out of 12 trains are operational
trainsOperational + " out of " + totalTrains + operatingSt
> var totalTrains = 12
8
Variables help organize data
-
8/9/2019 Javascript Roadtrip 1
31/46
Creating a versatile message out of !exible pieces
>
>
Variables help organize data
var trainsOperational =
var operatingStatus = " trains are operational today."
>
"10 out of 12 trains are operational
trainsOperational + " out of " + totalTrains + operatingSt
> var totalTrains = 12
10
-
8/9/2019 Javascript Roadtrip 1
32/46
-
8/9/2019 Javascript Roadtrip 1
33/46
FILES FALLSLevel 3
-
8/9/2019 Javascript Roadtrip 1
34/46
-
8/9/2019 Javascript Roadtrip 1
35/46
-
8/9/2019 Javascript Roadtrip 1
36/46
-
8/9/2019 Javascript Roadtrip 1
37/46
-
8/9/2019 Javascript Roadtrip 1
38/46
-
8/9/2019 Javascript Roadtrip 1
39/46
-
8/9/2019 Javascript Roadtrip 1
40/46
-
8/9/2019 Javascript Roadtrip 1
41/46
-
8/9/2019 Javascript Roadtrip 1
42/46
-
8/9/2019 Javascript Roadtrip 1
43/46
-
8/9/2019 Javascript Roadtrip 1
44/46
-
8/9/2019 Javascript Roadtrip 1
45/46
-
8/9/2019 Javascript Roadtrip 1
46/46