JavaScript First Steps

## JavaScript!

### What? Why? How?

### What is JS?

```js
					let js = {
						name: "JavaScript",
						abbreviation: "JS",
						isAwesome: true,
						officialSpec: "ECMAScript",
						birthYear: 1995,
						creator: "Brendan Eich"
					};

if (js.isAwesome) {
						shout("hell yes JS!");
					}
					```

### Why do we need JS?

## HTML & CSS & JS: BFFs!

<img src="https://media4.giphy.com/media/3o6gE8sp8lYiUBgx8Y/giphy.gif?cid=ecf05e47qgttnhw10sv7okbd6osgrjh1kb2pubtrdazuwtoi&rid=giphy.gif&ct=g" alt="Hamilton GIF by Tony Awards via Giphy" width=700 />
					
					--

### How do we write JS?

### ~~How~~ *Where* do we write JS?

- **The browser's JS `console`**
					- Local text file in editor, e.g. TextEdit, [VS Code](https://code.visualstudio.com/)
					- Online playground e.g. [CodePen](https://codepen.io), [CodeSandbox](https://codesandbox.io)

## Let's do it!

1. Open [1-tictactoe.html](./1-tictactoe.html) in your browser<br>(`File` > `Open file...`)
					1. Inspect the page to open DevTools<br>(Right click > `Inspect`)
					1. Click on `Console` tab

## The DOM

### Document Object Model

--
					
					### A simple `document`
					
					```html [ 2-8 | 3 | 4-7 | 5-6]
					<!DOCTYPE html>
					<html lang="en-US">
						<head>...</head>
						<body>
							<header>...</header>
							<div id="board">...</div> 
						</body>
					</html>
					```

Let's draw the DOM tree!

### Reading the DOM with JS

Let's dig into this `document`!

```js
					document
					```

<p class="fragment">the entire HTML document</p>

```js
					document.title
					```

<p class="fragment">the page (document) title</p>

```js
					document.body
					```

<p class="fragment">the <code>body</code> element</p>

```js
					document.body.children
					```

<p class="fragment">all the elements within the <code>body</code></p>

```js
					document.getElementById("board")
					```

<div class="fragment" data-fragment-index="2"><pre class="js hljs"><code>document.querySelector("#board")</code></pre></div>

<p class="fragment" data-fragment-index="1">the (first) element with <code>id="board"</code></p>

```js
					document.getElementsByTagName("h1")
					```

<div class="fragment" data-fragment-index="2"><pre class="js hljs"> <code>document.querySelectorAll("h1")</code></pre></div>

<p class="fragment" data-fragment-index="1">all the <code>h1</code> elements</p>

```js
					document.getElementsByClassName("player")
					```

<div class="fragment" data-fragment-index="2"><pre class="js hljs"><code>document.querySelectorAll(".player")</code></pre></div>

<p class="fragment" data-fragment-index="1">all the elements with <code>class="player"</code> </p>
					
					--

<pre class="r-fit-text js hljs"><code>document.getElementsByClassName("player").length</code></pre>

<pre class="r-fit-text js hljs"> <code>document.querySelectorAll(".player").length</code></pre>

<p class="fragment" >the number of elements with <code>class="player"</code> </p>
					
					--

<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").textContent</code></pre>

<p class="fragment">the text inside the element with <code>id="p1-name"</code></p>

### *Do you expect me to remember all this!?!??!*

The three most important letters in web development:

# ✨MDN✨

[developer.mozilla.org](https://developer.mozilla.org)

## Exercise

Type commands in the console to retrieve: 
					1. all the `p` elements 
					1. the text "X"
					1. the number of squares in the board
					1. the text "A game you know"

### Editing the DOM with JS

```js
					document.title = "My Page"
					```

<p class="fragment">change the page title</p>
					<p class="fragment" style="font-style:italic;">note the double-quotes</p>

--
					
					<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").textContent = "Sofia"</code></pre>

<p class="fragment">replace the text of the <code>#p1-name</code> element</p>

<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").append(" & friends")</code></pre>

<p class="fragment">add to the end of the element's current text</p>

## Exercise

1. Change the player names to you & neighbor
					1. Swap the player symbols
					1. Change subtitle to "A game you know and love"

## Values & Data Types

### What are these?

`"Tic Tac Toe"`

`9`
					
					`"#board"`

# Values

<p class="fragment">chunks of information we want to work with</p>

<p class="fragment">that information (data) can be of different types</p>

## text data

e.g. `"Tic Tac Toe"` or `"#board"`

## strings

All of these are strings:
					- `"Hello!"`
					- `'I like single-quotes'`
					- <code>\`I ❤️ backticks\`</code>
					- `'867-5309'`
					- `"42"`

## `"42"` vs. `42`

*are these the same thing?*

## `typeof`

tells you the type of a value

Try it!

```js
					typeof "42"
					```

```js
					typeof 42
					```

## numbers

All of these are numbers:

- `9`
					- `525600`
					- `-3.45`
					- `1.21e9`
					- `Infinity`

### JS has two kinds of data: 
					- Primitive types (e.g. strings, numbers)
					- Objects (e.g. `document` & friends)

## Primitive data types

- `string`
					- `number`
					- `boolean`
					- `undefined`
					- `null`
					- A couple [others](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#primitive_values) we don't need yet

## booleans

## `undefined` & `null`

<div style="display:flex;">
						<div style="display:flex; flex-direction:column;">
							<code>undefined</code>
							<img height=250 src="http://campusriot.com/wp-content/uploads/2013/06/I-Want-It-That-Way-Backstreet-Boys-Gif.gif" alt="Gif of Backstreet Boys singing 'Tell my why, Ain't nothin but a mistake...'" />
							accidental nothing
						</div>
						<div style="display:flex; flex-direction:column;">
							<code>null</code>
							<img height=250  src="https://c.tenor.com/AzSrhbW1nYcAAAAC/tenor.gif" alt="Gif of Backstreet Boys singing 'I want it that way'" />
							deliberate nothing
						</div>
					</div>

### Exercise

Which data type is each of these values? 
					- `false`
					- `"true"`
					- `document.title`
					- `"some string".length`
					- `null`
					
					(guess first, then use `typeof` to check!)

## Working with Strings

<img width=500 src="https://i0.wp.com/www.muffinchanel.com/wp-content/uploads/2020/09/how-to-make-letter-bead-word-alphabet-bead-bracelets-inspired-by-pura-vida-bracelets-muffinchanel-diy-step-by-step-10.png?w=632&ssl=1" alt="Image of unfinished beaded bracelet spelling 'ALOHA' with text 'Step 13' in corner, via MuffinChanel " />
					
					--

What are strings made of?

![](https://m.media-amazon.com/images/W/WEBP_402378-T1/images/I/61PIxWCLaFL._AC_SY450_.jpg)
				
					<h4 class="fragment">characters</h4>

How many characters are in this string?				
					
					<pre class="js">
						<code>"supercalifragilisticexpialidocious".length</code>
					</pre>

```js
					"super".length
					```

Characters are in a specific order
					
					Each gets a number, starting at `0`

<p class="fragment">aka an "index"</p>
				
					--

What's the first character in the string?

```js
					"ALOHA"[0]
					```

What's the third character in the string?

```js
					"ALOHA"[2]
					```

What's the index of a specific character?

<pre class="fragment"><code>"ALOHA".indexOf("L")</code></pre>
					<pre class="fragment"><code>"ALOHA".indexOf("A")</code></pre>
					<pre class="fragment"><code>"ALOHA".indexOf("Q")</code></pre>

Does this string contain some other string?

<pre class="fragment"><code>"ALOHA".includes("HA")</code></pre>
					<pre class="fragment"><code>"ALOHA".includes("LOL")</code></pre>

Does this string start with some other string?

<pre class="fragment"><code>"ALOHA".startsWith("AL")</code></pre>
					<pre class="fragment"><code>"ALOHA".startsWith("HA")</code></pre>

At what index does this substring begin?

<pre class="fragment"><code>"ALOHA".indexOf("HA")</code></pre>
					<pre class="fragment"><code>"ALOHA".indexOf("LOL")</code></pre>

Connecting strings together

```js
					"ALOHA" + "!"
					```

```js
					"ALOHA".toLowerCase()
					```

### Exercise

Use our new string superpowers to:
					- Add your last name in the players listing
					- Retrieve the first "T" in the page title
					- Answer whether the page title contains the string "JavaScript"
					- Capitalize the heading "Tic Tac Toe"

There is a lot more we can do with strings...

Remember ✨MDN✨ is your friend!

[JavaScript > Standard built-in objects > String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

## Operators

We've already seen a couple of operators:

- `"ALOHA" + "!"`
					- `typeof "value"`

`+` is an operator with several different uses:

<ul>
						<li class="fragment">What does it do when operating on strings?</li>
						<li class="fragment">Any guess what else it can operate on? </li>
						<li class="fragment">How many values does it operate on at a time?</li>
					</ul>

### Arithmetic operators

- `+` add
					- `-` subtract
					- `*` multiply
					- `/` divide

### Order of operations

`4 + 1 * 2 * 4 + 2`

same as in math, use `()` to group

`((4 + 1) * 2 * 4) + 2`

## Exercise

Use arithmetic operators to compute:
					- The total number of siblings of your parents
					- The average number of hours you slept this week
					- The number of dogs you'd pet in a week if you pet 1 dog per hour while awake

### Comparison operators

- `>` greater than
					- `<` less than
					- `>=` greater than or equal to
					- `<=` less than or equal to

`5 > 4`

What type of value will this return?

### Equality operators

strict | loosey-<br>goosey | meaning
					--- | --- | ---
					`===` | `==` | equals
					`!==` | `!=` | does not equal

Do these differ? How?

strict | vs. | loosey-goosey
					--- | --- | ---
					`1 === 1` | vs. | `1 == 1`
					`"1" === "1"` | vs. | `"1" == "1"`
					`1 === "1"` | vs. | `1 == "1"`

<p class="fragment">You should almost always use the <b>strict</b> version</p>

### JS has lots of operators!

<p class="fragment">Any guesses what else is out there?</p>

<p class="fragment">Where can you find them all?</p>

✨MDN✨

[JavaScript > Expressions & Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)

## Variables

Variables let us **remember** values

```js
					let remember = "Sept. 21";
					```

What do you notice about the line of code above?

### Declaring a variable

```js
					let bankruptcy;
					```

What do you think is the value of `bankruptcy`?

### Assigning a variable

```js
					let myDeclaredVariable;
					myDeclaredVariable = "so value, much wow";
					```

### Declaring & assigning at once

```js
					let myAssignedVariable = "such efficient, amaze";
					```

### Declaring & assigning forever

`const` declares & assigns a "constant" 
					
					aka a variable that can't be changed

```js
					const myUnchangeableVariable = "Never gonna give you up";
					```
					
					*we'll talk more about this later*

### Using a variable

`answerToLife - 10`

`myDeclaredVariable.toUpperCase()`

### Variable names

- `validVariable`
					- `also_valid_but_less_common`
					- `Oddbut_Technicallyfine2`
					- ~`0chanceThisWillWork!`~

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/CamelCase_new.svg/640px-CamelCase_new.svg.png" alt="Illustration of a camel with the word 'camelCase' positioned so that the captial C is the camel's hump" />
						
					--

## Exercise

Declare & assign variables to remember: 
					- Your name
					- The combined age of your parents
					- The `#board` element on the page

What really **are** variables though??

variables *contain* values?

variables ~contain~ *point to* values

What happens when this code runs?

```js
					let answerToLife = ((4 + 1) * 2 * 4) + 2;
					```

What happens when this code runs?

```js
					let scrub = "guy that thinks he's fly";
					let busta = scrub;
					scrub = "guy that can't get no love from me";
					```

## Arrays

Arrays let us keep multiple values together in a single collection

```js
					let synonyms = ["plethora", "array", "cornucopia"];
					```

Like strings, arrays have a `length`
					
					```js
					synonyms.length
					```

And each value has an index

```js
					synonyms[1]
					synonyms.indexOf("cornucopia")
					```

Also like strings, we can check if an array contains a certain value

```js
					synonyms.includes("plethora")
					synonyms.includes("variety")
					```

Unlike strings, we can modify arrays

```js
					synonyms[1] = "variety";
					let lastItem = synonyms.pop();
					synonyms.push("multitude");
					```

What does each of these lines do? Try it out!

After this code runs, what is `synonyms`? `lastItem`?

Arrays can be empty, or hold a single item

```js
					let emptyArray = [];
					let oneItemArray = ["lonely"];
					```

Arrays can hold any type of items, or mix and match!

```js
					let mixedArray = ["pop", 6, "squish", false, document];
					```

Arrays can do lots of useful tricks!

What do you think each of these does? (Try it!)
					
					```js
					["c", "a", "d", "b"].sort()
					```
					
					<pre class="r-fit-text js hljs"><code>["lions", "tigers", "bears oh my!"].join(" & ")</code></pre>
					
					```js
					[1, 2, 3].concat([4, 5, 6])
					```
					
					--

Remember ✨MDN✨ is your friend!

[JavaScript > Standard built-in objects > Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

## Mutating data

Do these do the same thing?

```js
					let abcArray = ["a", "b", "c"];
					abcArray[1] = "d";
					abcArray;
					```

```js
					let abcString = "abc";
					abcString[1] = "d";
					abcString;
					```

### mutable vs. immutable

"Mutable" data can be edited (e.g. Arrays)

"Immutable" data always stays the same (e.g. strings & other primitives)

Do these do the same thing?

```js
					let numbers1 = [1, 2, 3];
					let result1 = numbers1.push(4);
					numbers1;
					```

```js
					let numbers2 = [1, 2, 3];
					let result2 = numbers2.concat([4]);
					numbers2;
					```

Some actions "mutate" an array (e.g. `oldArray.push(newValue)`)

...aka change the array *in-place*

Other actions do *not* mutate the original array, but instead create a new copy (e.g. `oldArray.concat(otherArray)`)

(you can always use MDN to check which is which!)

Variables themselves can also be (im)mutable

What happens in each case? (Try it!)

```js
					let letVariable = "original value";
					letVariable = "new value";
					```

```js
					const constVariable = "original value";
					constVariable = "new Value";
					```

### immutable *variable* with mutable *value*

What happens when we use `const` with a mutable value like an array?

```js [1-2|4-5]
					const operands = [4, 6];
					const sum = operands[0] + operands[1];

operands[0] = 5;
					const newSum = operands[0] + operands[1];
					```

If you have the choice...

#### Using *immutable* data & variables is usually best

Why might that be?

## Objects

We saw an object earlier:

```js
					const js = {
						name: "JavaScript",
						abbreviation: "JS",
						isAwesome: true,
						officialSpec: "ECMAScript",
						birthYear: 1995,
						creator: "Brendan Eich"
					};
					```

Objects collect multiple values together to describe more complex data

Similar to how we can *point at* different values using *variables* in our code,

objects let us *point at* related values using *properties* in the object.

### Getting property values

```js
					js.name
					```

```js
					js.isAwesome
					```

### Using property values

```js
					js.name.startsWith("Java")
					```

```js
					let age = 2022 - js.birthYear;
					```

### Setting property values

```js 
					const indecisive = {
						lunch: "sandwich"
					};

indecisive.lunch = "tacos";
					indecisive.snack = "chips";
					```

### Exercise

Create an object representing you!

Add properties for facts important to you, e.g.:

```js
					const anjana = {
						name: "Anjana",
						home: "San Francisco",
						languages: ["English", "German", "French"],
						pet: null,
						vehicle: "Vespa",
						hobbies: ["travel", "climbing", "gaming", "lindy hop"]
					};
					```

### Methods

Properties can point to functions too

We call function-properties "methods" on objects

```js
					const dog = {
						name: "Ein",
						breed: "Corgi",
						speak: function () {
							console.log("woof woof");
						}
					}

dog.speak();
					```

`this` in a method lets us reference other properties on the object

```js
					anjana.speak = function () {
						console.log("Hi my name is", this.name);
					}

anjana.speak();
					```

But be careful with `this`!

Its behavior is complicated & can be tricky

MDN: [JS > Operators > `this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

### Nested objects

```js
					const menu = {
						lunch: {
							appetizer: "salad",
							main: "spaghetti",
							dessert: "tiramisu"
						},
						dinner: {
							appetizer: "samosa",
							main: "saag paneer",
							dessert: "gulab jamun"
						}
					};

const tiramisu = menu.lunch.dessert;
					```

### Objects in Arrays & Objects

```js
					const spices = [
						{name: "Emma", nickname: "Baby"},
						{name: "Geri", nickname: "Ginger"},
						{name: "Mel B", nickname: "Scary"},
						{name: "Mel C", nickname: "Sporty"},
						{name: "Victoria", nickname: "Posh"}
					];

const spiceGirls = {
						albums: ["Spice", "Spiceworld", "Forever"],
						motto: "Girl Power",
						members: spices
					};
					```

### Exercise

From the `spiceGirls` object, how can we retrieve: 
					- `"Girl Power"`
					- The object representing Ginger Spice
					- `"Spiceworld"`
					- `"Victoria"`

### Built in objects

Have we worked with any complex objects already?

What properties & methods have we used already?

### `document`

```js
					document.title = "Tic Tac Toe";
					document.querySelector("h2").append(" and love");				
					```

What other properties does `document` have?

How can you find out?

<a class="fragment" href="https://developer.mozilla.org/en-US/docs/Web/API/Document">✨MDN✨ Web APIs > Document</a>

### `console`

```js [1-2|4-5|7]
					console.log("hello coder!");
					console.log(document.querySelector("h1").textContent);

console.warn("something seems iffy");
					console.error("oh no, it broke!");

console.clear();
					```

<a class="fragment" href="https://developer.mozilla.org/en-US/docs/Web/API/Console">✨MDN✨ Web APIs > console</a>

### `Math`

```js
					let randomNumber = Math.random();
					const pi = Math.PI;
					const five = Math.abs(-5);
					```

<a class="fragment" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">✨MDN✨ JS > Standard built-in objects > Math</a>

### strings?

Strings are *primitive values* (not objects)

but JS automatically wraps them in `String` objects

```js
					const hello = "hello";
					console.log(hello.length);
					const yello = hello.toUpperCase();
					```

[✨MDN✨ JS > Standard built-in objects > String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

### ...and many more!

Remember ✨MDN✨ is your friend!

[JavaScript > Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)