javascript roadtrip 1

8/9/2019 Javascript Roadtrip 1

1/46

“THE LAST GREAT UNCHARTED FRONTIER”


2/46

The CLIFFS OF VALUELevel 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


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


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


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


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/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.


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"


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


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:


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


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


14/46


15/46

Variable ValleyLevel 2


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


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


18/46


>

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



19/46


>

Want to change a Variable’s value? It’s your lucky day.

> trainWhistle

> trainWhistle

trainWhistles += 3

same operation,different syntax

> trainWhistles = trainWhistles + 3



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


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


22/46

> trainWhistles = 3

> var pollack9000 = trainWhistles * 3


> "But the Pollack 9000 has " + (trainWhistles * 3) + "!"

Using Variables

> pollack9000

Using Variables


23/46


trainWhistles = 3>

> "But the Pollack 9000 has " + pollack9000 + "!"

Using Variables

"But the Pollack 900

> var pollack9000 = trainWhis

Incrementing and Decrementing


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!


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


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


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


28/46


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.



29/46


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


30/46

Creating a versatile message out of !exible pieces

>

>


var trainsOperational =

var operatingStatus = " trains are operational today."

>

"8 out of 12 trains are operational

trainsOperational + " out of " + totalTrains + operatingSt

> var totalTrains = 12

8



31/46

Creating a versatile message out of !exible pieces

>

>


var trainsOperational =

var operatingStatus = " trains are operational today."

>

"10 out of 12 trains are operational

trainsOperational + " out of " + totalTrains + operatingSt

> var totalTrains = 12

10


32/46


33/46

FILES FALLSLevel 3


34/46


35/46


36/46


37/46


38/46


39/46


40/46


41/46


42/46


43/46


44/46


45/46


46/46

javascript roadtrip 1

Documents