<h2>Zero to JavaScript</h2> <img src="img/ppg-1.jpg"> <p>a8c Grand Meetup 2018</p>

A special thanks to Veselin for helping to create these slides last year.

## What are we covering? - A little history. - What can JavaScript do? - Thinking like a program. - Ways to run JavaScript. - Fundamentals: variables, functions, and loops. - The Web API. - Binding and Prototypes. - The wide world of npm modules. - Calypso!

## A Little History <p class="fragment">- Created as "LiveScript" in 1995 for Netscape 2.0 and renamed "JavaScript".</p> <p class="fragment">- Competed with other things that make websites move, like Java, Flash, and VBScript.</p> <p class="fragment">- Standardized as ECMAScript (ES) in 1997.</p> <p class="fragment">- Slowly evolved as ECMAScript 2 (1998), ES 3 (1999).</p> <p class="fragment">- Eventually ES5 (2009), then ES2015, ES2016, etc.</p>

## What can JavaScript Do? <ul> <li class="fragment">Image lightboxes</li> <li class="fragment">Form validation</li> <li class="fragment">Sliders, tabs, calendars</li> <li class="fragment">Drawing and animation</li> <li class="fragment">Single page web apps like wordpress.com</li> <li class="fragment">Desktop applications like Slack</li> <li class="fragment">Games</li> <li class="fragment">It can save the day</li> </ul>

## Let's start from the beginning <p class="fragment">How to Eat with Chopsticks</p> <p class="fragment"><img src="img/ppg-chopsticks.jpg" /></p>

## Thinking like a Program

### Thinking like a Program Computers are very fast calculators, but they are not good at understanding meaning and intent. When you write a program, you must break down every step into simple pieces.

### Thinking like a Program It's helpful to try to imagine all the steps you need to do a "simple" task. Try to come up with the steps necessary to draw a square on a piece of paper.

### How to Draw a Square 1. ... 1. ... 1. ... 1. ... 1. ... 1. ... 1. ... 1. ...

### How to Draw a Square 1. Put some paper in front of you. 1. Pick up a pencil in your hand. 1. Press the pencil gently against the paper. 1. Move your hand to the right 5 cm (2 in). 1. Stop moving your hand. 1. Move your hand down 5 cm (2 in). 1. Stop moving your hand. 1. ...

## Ways to Run JavaScript

### Ways to Run JavaScript - Web Browser Console - Online tools - HTML script tag - Node

#### Web Browser Console On any web page, open the developer tools (CMD+Opt+i, click Console). ```js 21 * 2; ```

### Ways to Run JavaScript #### Node REPL In a terminal, type `node` ([node](https://nodejs.org/en/) must be installed first). ``` $ node > 'hello world' 'hello world' > console.log( 'hello world' ); hello world undefined > let greeting = 'Hello World'; undefined > greeting; 'Hello World' > ```

#### Online tools - [codepen.io](http://codepen.io) - [jsbin.com](http://jsbin.com) - ...

#### Online tools 1. Open codepen.io 2. Click `Console` on the bottom. 3. Type this into the `JS` area: ```js let myName = 'Blossom'; alert( 'My name is ' + myName ); ```

#### HTML inline script tag ```js <div id="my-result"></div> <script> document.getElementById('my-result').innerHTML = 'Hello World!'; </script> ``` save this to a .html file and double click on it

#### HTML external script tag ```js <script src="my-javascript-file.js"></script> ```

#### Node file In a terminal, type `node` followed by the filename. ```js $ node my-javascript-file.js hello world ```

### How it works 1. The browser downloads files or they are loaded by node. 2. The engine executes the JavaScript line by line. 3. If the engine cannot understand a line, it stops and displays an error in the console.

## JavaScript Fundamentals Let's begin by using codepen or node. If you use codepen, use this URL: https://codepen.io/pen/?editors=0012

#### Statements A statement is an instruction to the computer. End each statement with a semi-colon (`;`). ```js > 'hello world'; 'hello world' ```

#### Strings Words inside quotes are called a _string_. ```js > 'hello world'; 'hello world' ```

#### Strings You can use single quotes or double quotes. ```js > "hello world"; 'hello world' ``` In modern JS you can also use backticks, but that has a special meaning.

#### Console `console.log()` is mostly used for debugging, but it's an easy way to print things out. <small>Put any expression between the parenthesis to see what it evaluates to.</small> ```js console.log( 'Hello ' + 'World' ); ```

#### Comments Words after `//` or between `/*` and `*/` are _comments_ and are ignored. ```js > console.log( 'hello world' ); // this is a comment hello world ```

#### Variables Variables are like a box that holds something. The variable name points to the box. <small>Use `let` to define one.</small> ```js let myName; ``` <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">myName ➡</text> </svg>

#### Variables Variables are like a box that holds something. The "value" of the variable is the contents of the box. ```js let myName; myName = 'Mojo Jojo'; ``` <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">myName ➡</text> <text x="100" y="45" font-family="Verdana" font-size="14" fill="black">'Mojo Jojo'</text> </svg>

#### Variables You can also define the variable and give it a value all at once. ```js let myName = 'Mojo Jojo'; ``` <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">myName ➡</text> <text x="100" y="45" font-family="Verdana" font-size="14" fill="black">'Mojo Jojo'</text> </svg>

#### Variables After it is defined, any time you use the variable name, the value will be used instead! ```js > let myName = 'Mojo Jojo'; > console.log( myName ); Mojo Jojo ``` <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">myName ➡</text> <text x="100" y="45" font-family="Verdana" font-size="14" fill="black">'Mojo Jojo'</text> </svg>

#### Variables You can change the values of exisiting variables. ```js > let myName = 'Mojo Jojo'; > console.log( myName ); Mojo Jojo ``` <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">myName ➡</text> <text x="100" y="45" font-family="Verdana" font-size="14" fill="black">'Mojo Jojo'</text> </svg> ```js > myName = 'The Mayor'; > console.log( myName ); The Mayor ``` <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">myName ➡</text> <text x="100" y="45" font-family="Verdana" font-size="14" fill="black">'The Mayor'</text> </svg>

#### Variables You can even have multiple variables pointing to the same box. ```js > let powerPuff = { name: 'Buttercup' }; > let theHero = powerPuff; > console.log( theHero.name ); Buttercup ``` <svg width="300" height="80"> <rect x="90" y="0" width="150" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">powerPuff ➡</text> <text x="0" y="50" font-family="Verdana" font-size="14" fill="white">theHero ➡</text> <text x="100" y="45" font-family="Verdana" font-size="12" fill="black">{ name: 'Buttercup' }</text> </svg>

#### Variables Other ways to define variables: `var` and `const`. `var` is an older version of `let`. `const` variables cannot have their value re-assigned. <small>(but they _can_ have their value modified; more on that later)</small> ```js > const myName = 'Mojo Jojo'; > console.log( myName ); Mojo Jojo > myName = 'The Mayor'; TypeError: Assignment to constant variable. ```

#### Variables There are other types of data besides strings. Some basics: - `Number` (a number) - `Boolean` (true or false). ```js > let numberOfIngredients = 4; > console.log( numberOfIngredients ); 4 > let usingChemicalX = true; > console.log( usingChemicalX ); true ```

#### Variables You can use arithmetic operators on Numbers (or on variables that contain Numbers). <small>`+`, `-`, `*`, `/`, `%`</small> ```js > let numberOfIngredients = 3; > console.log( numberOfIngredients ); 3 > console.log( numberOfIngredients + 1 ); 4 ```

#### Variables You can use the _concatenation_ operator on Strings to join them together! <small>It looks just like the addition operator: `+`</small> ```js > let myName = 'Mojo'; > let myFullName = myName + ' Jojo'; > console.log( myFullName ); Mojo Jojo ```

### Variable Names Choose good variable names. ```js let a = [ 'Ballio', 'Ben', 'Broke', 'Marjorie' ]; let b = [ 'Bubbles', 'Blossom', 'Buttercup', 'Mojo Jojo' ]; let c = [ 'cookies', 'candy' ]; ``` What are a, b, and c?

### Variable Names Choose good variable names. ```js let students = [ 'Erica', 'Edwin', 'Mike', 'Doug' ]; let cartoonCharacters = [ 'Bubbles', 'Blossom', 'Buttercup', 'Mojo Jojo' ]; let snacks = [ 'cookies', 'candy' ]; ```

### Meaningful Names ```js let numberOfStudents = 10; //Integer let welcomeText = 'Welcome to the GM'; // String let students = [ 'Erica', 'Edwin', 'Mike', 'Doug' ]; let teacher = { name: 'Payton', age: 38 }; // Object let isDoorOpen = false; // Boolean ```

#### Exercise for Strings Ask for a name and then display a message 'Hello [Name]' Use `prompt()` to ask for something and `alert()` to display a message. ```js let sign = prompt("What's your sign?"); alert("Cool!"); ```

#### Variables There are two other common basic types: `Array`, and `Object`. ```js let myArray = []; let myObject = {}; ```

#### Arrays Arrays are used to store more than one value in a single variable. ```js let powerPuffGirls = [ 'Bubbles', 'Buttercup' ]; ```

#### Arrays An array is like many boxes with the same name. ```js let powerPuffGirls = [ 'Bubbles', 'Buttercup' ]; ``` <svg width="400" height="100"> <rect x="130" y="0" width="80" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <rect x="210" y="0" width="80" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">powerPuffGirls ➡</text> <text x="142" y="45" font-family="Verdana" font-size="12" fill="black">'Bubbles'</text> <text x="218" y="45" font-family="Verdana" font-size="12" fill="black">'Buttercup'</text> </svg>

#### Arrays You can add things to an array by using `.push()` <small>These are "stack" methods. There is also `pop()`, `shift()`, and `unshift()`.</small> ```js > let powerPuffGirls = [ 'Bubbles', 'Buttercup' ]; > powerPuffGirls.push( 'Blossom' ); > console.log( powerPuffGirls ); [ 'Bubbles', 'Buttercup', 'Blossom' ] ```

#### Arrays You can examine the elements of an array using brackets around the _index_ of each element. The index starts at 0. ```js > let powerPuffGirls = [ 'Bubbles', 'Buttercup' ]; > console.log( powerPuffGirls[1] ); 'Buttercup' ``` <svg width="400" height="100"> <rect x="130" y="20" width="80" height="40" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <rect x="210" y="20" width="80" height="40" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="170" y="10" font-family="fixed" font-size="14" fill="white">0</text> <text x="240" y="10" font-family="fixed" font-size="14" fill="white">1</text> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">powerPuffGirls ➡</text> <text x="142" y="45" font-family="Verdana" font-size="12" fill="black">'Bubbles'</text> <text x="218" y="45" font-family="Verdana" font-size="12" fill="black">'Buttercup'</text> </svg>

#### Arrays You can see how many things are in an array by adding `.length` to the end of the array. ```js > let powerPuffGirls = [ 'Bubbles', 'Buttercup', 'Blossom' ] > console.log( powerPuffGirls.length ) 3 ```

#### Exercise on Arrays <p class="fragment">1. Create a list of students</p> <p class="fragment">2. Add a student with push</p> <p class="fragment">3. Remove the first student</p> <p class="fragment">4. Remove the last student</p> <p class="fragment">5. Remove the middle student</p> <p class="fragment">6. How many students do we have left?</p> <p class="fragment">7. [extra credit] Sort the students alphabetically</p>

#### Objects Objects store key/value pairs. ```js { leader: 'Blossom', joy: 'Bubbles', fighter: 'Buttercup' }; ``` They can contain multiple values like an Array, but each value must have a key, which is usually a string. <small>Also they do not have any order!</small> <svg width="500" height="100"> <rect x="130" y="20" width="80" height="40" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <rect x="240" y="20" width="80" height="40" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <rect x="350" y="20" width="80" height="40" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="150" y="10" font-family="fixed" font-size="14" fill="white">leader</text> <text x="260" y="10" font-family="fixed" font-size="14" fill="white">fighter</text> <text x="370" y="10" font-family="fixed" font-size="14" fill="white">joy</text> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">powerPuffGirls ➡</text> <text x="142" y="45" font-family="Verdana" font-size="12" fill="black">'Blossom'</text> <text x="248" y="45" font-family="Verdana" font-size="12" fill="black">'Buttercup'</text> <text x="358" y="45" font-family="Verdana" font-size="12" fill="black">'Bubbles'</text> </svg>

#### Objects Objects store key/value pairs, separated by commas. <small>You can put the elements on the same line or multiple lines.</small> ```js > let powerPuffGirls = { leader: 'Blossom', joy: 'Bubbles', fighter: 'Buttercup', }; > console.log( powerPuffGirls ); { leader: 'Blossom', joy: 'Bubbles', fighter: 'Buttercup' } ```

#### Objects You can find the value for an Object key (called a "property") by putting the key in brackets. <small>Note that strings must be quoted in brackets, but not quoted when defined.</small> ```js > let powerPuffGirls = { leader: 'Blossom', joy: 'Bubbles', fighter: 'Buttercup', }; > console.log( powerPuffGirls[ 'fighter' ] ); 'Buttercup' ```

#### Objects If the key is a string that has no spaces, you can also find the value of an Object key by using "dot notation". ```js > let powerPuffGirls = { leader: 'Blossom', joy: 'Bubbles', fighter: 'Buttercup', }; > console.log( powerPuffGirls.joy ); 'Bubbles' ```

#### Objects You can change the values of object properties, just like any other variable. ```js > let powerPuffGirls = { leader: 'Blossom', joy: 'Bubbles', fighter: 'Buttercup', }; > powerPuffGirls.leader = 'Brick'; > console.log( powerPuffGirls.leader ); 'Brick' ```

#### Exercise on Objects <ul> <li>Create a `classroom` object representing our classroom. It has a list students, a list of teachers, a number of tables and a number of seats</li> <li class="fragment">Add a seat, remove a table.</li> <li class="fragment">Kick out Payton. Make Mojo Jojo the only teacher.</li> </ul>

#### False, null, and undefined ```js let a = null; let b; // undefined let c = {}; console.log( a == b ); // true console.log( a === b ) // false console.log( c.hasHat ); // undefined ```

#### False, null, and undefined - `null` is intentional absence of value - `undefined` is self explanatory, but also a global variable and a primitive type ```js typeof undefined; // "undefined" ```

### Window Object In the browser console, type `window` and press enter. <p class="fragment">The `window` object contains all global variables.</p> <p class="fragment">`window` lives in the browser context. There is no window in node.</p> <p class="fragment">node, however, has `global`.</p>

### Window Object Try this in the browser console ```js window.document === document; window.alert === alert; ``` Now try it with node.

#### Functions Functions are reusable blocks of code. Use functions to repeat instructions or to make instructions easier to read. <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="100" y="20" font-family="Verdana" font-size="14" fill="black"> <tspan x="100">1. ...</tspan> <tspan x="100" dy="20">2. ...</tspan> <tspan x="100" dy="20">3. ...</tspan> </text> </svg>

#### Functions Most functions have a variable pointing to them with a descriptive name, just like any other value. (If there is no name, it's called an "anonymous" function.) <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">makeTea ➡</text> <text x="100" y="20" font-family="Verdana" font-size="14" fill="black"> <tspan x="100">1. ...</tspan> <tspan x="100" dy="20">2. ...</tspan> <tspan x="100" dy="20">3. ...</tspan> </text> </svg>

#### Exercise on Function Concepts 1 1. Write instructions on a piece of paper, describing how to fetch a cup of water. 2. Hand the paper to someone and they execute the instructions. The paper is a function and its instructions can be followed multiple times by different people. You can pass the function to others by handing them the paper.

#### Functions Functions are reusable blocks of code. To define a function, write this form: `function NAME() {}` Put the instructions inside the curly braces. ```js > function addSugar() { console.log( 'Sugar!' ); } ```

#### Functions To execute ("call") a function, write the function name followed by parenthesis. `NAME();` ```js > function addSugar() { console.log( 'Sugar!' ); } > addSugar(); Sugar! ```

#### Exercise on Function Concepts 2 1. Change instructions on paper to explain how to fetch anything (call it `THING`). 2. On another piece of paper write `THING = ` and something to fetch. 2. Hand both papers to someone and they follow the instructions, replacing `THING` with whatever the other paper says. The second paper is a function "argument". It's a variable!

#### Function Arguments Functions can have "arguments", which are values for the function to use. They are stored in variables that are put in the parenthesis when the function is defined. ```js > function addIngredient( ingredient ) { console.log( 'The Professor adds ' + ingredient + '!' ); } > addIngredient( 'Sugar' ); The Professor adds Sugar! > addIngredient( 'Spice' ); The Professor adds Spice! > addIngredient( 'Everything Nice' ); The Professor adds Everything Nice! ```

#### Function Arguments You can have multiple arguments separated by commas. ```js > function buildName( first, last ) { console.log( first + ' ' + last + ' says hi.' ); } > buildName( 'Fuzzy', 'Lumpkins' ); Fuzzy Lumpkins says hi. ```

#### Exercise on Function Concepts 3 1. Write down instructions on paper to add two numbers. 2. Have someone execute the instructions and write down the result on another piece of paper. 3. When they are done, have them give the other paper back to you. The other paper (the result) is a function "return value". It's a variable also!

#### Function return values Functions can send something back to the place where they are called using `return`. <small>You can use a function call anywhere you could use a variable. The value is what comes after `return`.</small> ```js > function buildName( first, last ) { return first + ' ' + last + ' says hi.'; } > const phrase = buildName( 'Fuzzy', 'Lumpkins' ); > console.log( phrase ); Fuzzy Lumpkins says hi. ```

#### Function Variables Functions names (without parenthesis) are just like any other variable. Their value is the function itself. ```js > function makeTea( first, last ) {} > makeTea; [Function: makeTea] ``` <svg width="200" height="80"> <rect x="90" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="0" y="20" font-family="Verdana" font-size="14" fill="white">makeTea ➡</text> <text x="100" y="20" font-family="Verdana" font-size="14" fill="black"> <tspan x="100">1. ...</tspan> <tspan x="100" dy="20">2. ...</tspan> <tspan x="100" dy="20">3. ...</tspan> </text> </svg>

#### Function Variables Like other values, you can have multiple variables pointing to the same function. ```js > function sayHi( first, last ) { console.log( first + ' ' + last + ' says hi.' ); } > sayHi( 'Fuzzy', 'Lumpkins' ); Fuzzy Lumpkins says hi. > const greet = sayHi; > greet( 'Mojo', 'Jojo' ); Mojo Jojo says hi. ``` <svg width="200" height="80"> <rect x="100" y="0" width="100" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="37" y="20" font-family="Verdana" font-size="14" fill="white">sayHi ➡</text> <text x="38" y="20" dy="20" font-family="Verdana" font-size="14" fill="white">greet ➡</text> <text x="120" y="20" font-family="Verdana" font-size="14" fill="black"> <tspan x="120">1. ...</tspan> <tspan x="120" dy="20">2. ...</tspan> <tspan x="120" dy="20">3. ...</tspan> </text> </svg>

#### Anonymous Functions Functions don't have to have a name, but you need to put them in a variable to use them. <small>This is basically the same as giving them a name.</small> ```js > const sayHi = function( first, last ) { console.log( first + ' ' + last + ' says hi.' ); }; > sayHi( 'Fuzzy', 'Lumpkins' ); Fuzzy Lumpkins says hi. ```

#### Functions as Object Properties Because object properties are just variables, they can also hold functions. ```js > let chores = { cleanRoom: function() { console.log( 'picking up clothes' ); }, takeOutTrash: function() { console.log( 'taking out the trash' ); }, }; > chores.cleanRoom(); picking up clothes ```

#### Fat-arrow Functions Anonymous functions can also be defined using a shorthand with the "fat arrow" `=>` _after_ the parenthesis instead of using the word `function`. ```js > const sayHi = ( first, last ) => { console.log( first + ' ' + last + ' says hi.' ); }; > sayHi( 'Fuzzy', 'Lumpkins' ); Fuzzy Lumpkins says hi. ```

#### Fat-arrow Functions Short fat-arrow functions can be written on one line more easily. <small>They return the result of the statement.</small> ```js > const getGreeting = ( name ) => 'Hi ' + name; > console.log( getGreeting( 'Fuzzy' ) ); Hi Fuzzy ```

#### Variable Scope Variables only exist within a "scope". This is an area of code where the function is allowed to be used. <svg width="200" height="80"> <rect x="10" y="0" width="200" height="80" style="fill:rgb(255,255,255);stroke-width:4;stroke:rgb(0,0,0)" /> <text x="20" y="20" font-family="Verdana" font-size="14" fill="black">let myName</text> <text x="20" y="40" font-family="Verdana" font-size="14" fill="black">log(myName)</text> <text text-anchor="end" x="150" y="40" font-family="Verdana" font-size="14" fill="green">✅</text> </svg>

#### Variable Scope - Variables declared _outside_ of a function can be used inside a function. - Variables declared _inside_ a function only exist within that function. <svg width="200" height="100"> <rect x="0" y="0" width="200" height="100" style="fill:rgb(255,255,255);stroke-width:2;stroke:rgb(0,0,0)" /> <rect x="10" y="30" width="180" height="60" style="fill:rgba(255,255,255,0);stroke-width:2;stroke:rgb(0,0,0)" /> <text text-anchor="end" x="190" y="27" font-family="fixed" font-size="12" fill="black">function</text> <text x="20" y="20" font-family="Verdana" font-size="14" fill="black">let myName</text> <text x="30" y="50" font-family="Verdana" font-size="14" fill="black">log(myName)</text> <text text-anchor="end" x="150" y="50" font-family="Verdana" font-size="14" fill="green">✅</text> </svg> <svg width="200" height="100"> <rect x="0" y="0" width="200" height="100" style="fill:rgb(255,255,255);stroke-width:2;stroke:rgb(0,0,0)" /> <rect x="10" y="13" width="180" height="50" style="fill:rgba(255,255,255,0);stroke-width:2;stroke:rgb(0,0,0)" /> <text text-anchor="end" x="190" y="10" font-family="fixed" font-size="12" fill="black">function</text> <text x="30" y="30" font-family="Verdana" font-size="14" fill="black">let myName</text> <text x="20" y="90" font-family="Verdana" font-size="14" fill="black">log(myName)</text> <text text-anchor="end" x="140" y="92" font-family="Verdana" font-size="14" fill="red">❌</text> </svg>

#### Variable Scope Variables declared inside a function only exist within that function. ```js > function addIngredient( ingredient ) { let alchemist = 'The Professor'; console.log( alchemist + ' adds ' + ingredient + '!' ); } > addIngredient( 'Sugar' ); The Professor adds Sugar! > let alchemist = 'Mojo Jojo'; > addIngredient( 'Spice' ); The Professor adds Spice! ```

#### Conditions You can use the `if` statement, followed by a "condition" to control what your program does. Conditions must always be true or false. ```js > if ( ingredient === 'Everything Nice' ) { console.log( 'Uh oh!' ); ingredient = 'Chemical X'; } ```

#### Conditions ```js > function addIngredient( ingredient ) { if ( ingredient === 'Everything Nice' ) { console.log( 'Uh oh!' ); ingredient = 'Chemical X'; } console.log( 'The Professor adds ' + ingredient + '!' ); } > addIngredient( 'Sugar' ); The Professor adds Sugar! > addIngredient( 'Spice' ); The Professor adds Spice! > addIngredient( 'Everything Nice' ); Uh oh! The Professor adds Chemical X! ```

#### Conditions We can use `===` to compare values in a condition. Any statement can be a condition if it is true or false. ```js > ( 'Mojo' === 'Professor' ); false > ( 5 > 3 ); true ```

#### Conditions Be careful of the difference between `=`, `==`, and `===`. - `=` assigns a value to a variable. - `==` tests equality of values. - `===` tests equality of values and types.

#### Conditions An exclamation point (`!`) means "not" and reverses the meaning of a condition. We can use `!==` to look for a false condition. ```js > ( 'Mojo' !== 'Professor' ); true > ( ! 5 > 3 ); false ```

#### Conditions The `&&` operator means "and". The `||` operator means "or". ```js > let user = 'Mojo Jojo'; > ( user === 'Buttercup' || user === 'Bubbles' || user === 'Blossom' ); false ```

#### Conditions You can use the `else` statement after an `if` to do something if the condition is false. ```js > function addIngredient( ingredient ) { if ( ingredient === 'Everything Nice' ) { console.log( 'Oh no! The Professor accidentally adds Chemical X!' ); } else { console.log( 'The Professor adds ' + ingredient + '!' ); } } ```

#### Conditions You can use `else if` to add more conditions. ```js > function addIngredient( ingredient ) { if ( ingredient === 'Everything Nice' ) { console.log( 'Oh no! The Professor accidentally adds Chemical X!' ); } else if ( ingredient === 'Broccoli' ) { console.log( 'You cannot add Broccoli to this recipe!' ); } else { console.log( 'The Professor adds ' + ingredient + '!' ); } } ```

#### Loops Loops let you repeat the same code multiple times until a condition is met. ```js let bottlesOfBeer = 99; while ( bottlesOfBeer > 0 ) { console.log( bottlesOfBeer + ' bottles of beer on the wall' ); bottlesOfBeer = bottlesOfBeer - 1; } ```

#### Loops Be careful of infinite loops! ```js let bottlesOfBeer = 99; while ( bottlesOfBeer > 0 ) { console.log( bottlesOfBeer + ' bottles of beer on the wall' ); } ```

#### Increment and Decrement ```js let bottlesOfBeer = 99; bottlesOfBeer = bottlesOfBeer + 1; bottlesOfBeer++; // this does the same thing ```

#### For Loop Exists in many languages and comes from Algol (1958) ```js for ( let index = 0; index < 10; index++ ) { console.log( index + " men on the dead man's chest --" ); console.log( 'Yo ho ho, and a bottle of rum' ); } ```

#### Exercise on for loops Edit the previous example and make it so that it outputs each number as an English word. <small>(`Seven men...` instead of `7 men...`)</small>

#### Array Iteration with .forEach() You can loop over each element of an array using built-in functions. ```js function outputName( name ) { console.log( 'The name is ' + name ); } let powerPuffGirls = ['Buttercup', 'Blossom', 'Bubbles']; powerPuffGirls.forEach( outputName ); ```

#### Array Iteration with .forEach() We can also use an anonymous function to make this shorter. ```js let powerPuffGirls = ['Buttercup', 'Blossom', 'Bubbles']; powerPuffGirls.forEach( function( name ) { console.log( 'The name is ' + name ); } ); ```

#### Array Iteration with .forEach() We can even use the anonymous function shorthand. ```js let powerPuffGirls = ['Buttercup', 'Blossom', 'Bubbles']; powerPuffGirls.forEach( ( name ) => console.log( 'The name is ' + name ) ); ```

#### Array Iteration with .map() `map` is just like `forEach` but the result is a new array with whatever the function returns. ```js let powerPuffGirls = ['Buttercup', 'Blossom', 'Bubbles'] let uppercasePowerPuffs = powerPuffGirls.map( function( name ) { return name.toUpperCase(); } ); console.log( uppercasePowerPuffs ); ```

### Exercise on loops Write a function called `getRange()` that accepts two numbers and returns an array of all the numbers between them (inclusive). ```js getRange( 3, 6 ); // [ 3, 4, 5, 6 ] ```

### Exercise on map Write a function called `getGivenName()` that accepts an array of full names and returns the first name of every string. ```js let names = [ 'Mojo Jojo', 'Fuzzy Lumpkins' ]; getGivenName( names ); // [ 'Mojo', 'Fuzzy' ] ```

### Filter `filter` works like `map`, but it does not change the array. It returns an array of all elements for which the function returns `true`. ```js let people = [ 'Buttercup', 'Blossom', 'Mojo' ]; let powerPuffGirls = people.filter( ( name ) => name !== 'Mojo' ); ```

### Excercise on Filter Write a function called `getSingleNames()` which accepts an array of full names and returns any name that contains only one word. ```js let people = [ 'Buttercup', 'Fuzzy Lumpkins', 'Blossom' ]; getSingleNames( people ); // [ 'Buttercup', 'Blossom' ] ```

## The Web API JavaScript was made to interact with web pages.

## The Web API ```js function showMojo() { const mojo = window.document.querySelector( '.mojo-jojo' ); mojo.style.visibility = 'visible'; } ``` <button onClick="showMojo()">Show Mojo</button> <div class="mojo-jojo" style="visibility:hidden"> <img src="img/mojo.gif"> </div>

## The Web API When using JavaScript inside a browser, you can access web things that are not part of the language. These are called the "Web API".

### Finding elements Many Web API functions are defined on the `window` object. Here we use `querySelector()` to find elements on the page. ```js window.document.querySelector( '.mojo-jojo' ); ```

### Finding elements If you are familiar with CSS, `querySelector()` accepts one argument: a string which is a CSS selector. Here we are asking for the first element that has the `class` (that's the period) of `mojo-jojo`. ```js window.document.querySelector( '.mojo-jojo' ); ``` Which finds this: ```html <img class="mojo-jojo" src="img/mojo.gif"> ```

### Finding elements What if the element is not found? `querySelector()` can return `null` if it fails to find an element. ```js > window.document.querySelector( '.fuzzy-lumpkins' ); null ```

### Finding elements What if you want to find multiple elements? `querySelectorAll()` returns an array-like object of all the matches. ```js > const allSpans = window.document.querySelectorAll( 'span' ); > allSpans.length; 350 ```

### Finding elements There are other functions to find elements. ```js window.document.getElementById( 'my-id' ); window.document.getElementsByTagName( 'span' ); window.document.getElementsByClassName( 'mojo-jojo' ); ```

### DOM Nodes The browser keeps an internal representation of what you see on the page. This is called the _Document Object Model_ or DOM.

### DOM Nodes Each element of the page that you access is called a "DOM Node". Here, the variable `mojo` holds a DOM Node object. ```js const mojo = window.document.querySelector( '.mojo-jojo' ); ```

### DOM Nodes DOM Node objects have properties, like `style`. `style` is an object that holds CSS as properties. ```js > const mojo = window.document.querySelector( '.mojo-jojo' ); > mojo.style.visibility; 'hidden' ```

### DOM Nodes We can change properties on DOM Nodes, and the changes usually take effect immediately. ```js > const mojo = window.document.querySelector( '.mojo-jojo' ); > mojo.style.visibility; 'hidden' > mojo.style.visibility = 'visible'; > mojo.style.visibility; 'visible' ``` <div class="fragment"> <img src="img/mojo.gif"> </div>

### DOM Nodes If you want to access a CSS property that has a hyphen in the name, change it to camelCase. ```js // This is for the CSS property `margin-top` > mojo.style.marginTop; ```

### DOM Nodes We can change HTML properties also. ```js > const mojo = window.document.querySelector( '.mojo-jojo' ); > mojo.src; 'img/mojo.gif' > mojo.src = 'img/blossom.png'; ``` <button onClick="transformMojo()">Transform!</button> <div class="mojo-jojo-transform"> <img src="img/mojo.gif"> </div>

### DOM Nodes We can actually change all the contents of an element using the `innerHTML` property. ```js > const mojo = window.document.querySelector( '.mojo-jojo' ); > mojo.innerHTML = '<em>Curses!</em>'; ``` <button onClick="changeMojoSaying()">Defeat Mojo</button> <div class="mojo-saying">I, Mojo Jojo, am your master.</div>

### DOM Nodes It's also possible to create new Nodes! <small>`window.document.body` is the Node that contains the HTML body.</small> ```js > const blossom = window.document.createElement( 'img' ); > blossom.src = 'img/blossom.png'; > window.document.body.appendChild( blossom ); ``` <button onClick="createPowerpuff()">Create Powerpuff</button> <div class="create-powerpuff" style="height:300px;"></div>

### DOM Nodes If you want to create a Node that's just text, use `createTextNode()` ```js > const bubbles = window.document.createTextNode( 'I am the joy and the laughter' ); > window.document.body.appendChild( bubbles ); ``` <button onClick="createBubbles()">Create Bubbles</button> <div class="create-bubbles"></div>

### Events When something happens on a web page (eg: when a user clicks a button), an _Event_ is created.

### Events Events are objects with information about what happened. There are two ways to listen to events: `element.addEventListener()` in JavaScript and `onClick` (and similar attributes) in the HTML.

### Events Using HTML we can register a click handler as follows: ```html <button onClick="getSnacks()">Get Snacks</button> ``` <button onClick="getSnacks()">Get Snacks</button> <div class="get-snacks" style="height:300px"></div>

### Events Here's the JavaScript for that click handler. ```js function getSnacks() { const parent = window.document.querySelector( '.get-snacks' ); const blossom = window.document.createElement( 'img' ); blossom.src = 'img/ppg-chopsticks.jpg'; parent.appendChild( blossom ); } ```

### Events You can also add the click handler function in pure JavaScript. ```js const button = window.document.querySelector( '.get-snacks-button' ); button.addEventListener( 'click', getSnacks ); ``` Notice that we are passing `getSnacks` as a variable! We are not calling it here, but sending it to be called later. This is called a "callback".

### Events Clicks are common events, but there are many others. - `mouseover`: when a cursor is moved on to an element - `mouseout`: when a cursor is moved off of an element - `keyup`: when a key is released - `load`: when the document finishes loading - `focus`: when an element gets focus - `blur`: when an element loses focus - ...

### Exercise 1. Create a page that has the word 'Bubbles' written 25 times. 1. Create a button that replaces every instance of that word with 'Buttercup'. 1. Create a button that makes every instance of that word bold.

### Form input You can use `.value` to get the input from a form field. Try this: ```html <script> function showValue() { alert( document.getElementById('myName').value ); } </script> <form> <input type="text" id="myName" value="hi" /> <input type="button" onclick="showValue()" value="click me"> </form> ```

### Form input You can also access forms by using the global `document.forms` ```html <script> function showValue() { alert( document.forms[0][0].value ); } </script> <form> <input type="text" id="myName" value="hi" /> <input type="button" onclick="showValue()" value="click me"> </form> ``` <script> </script> <form> <input type="text" id="myName" value="hi" /> <input type="button" onclick="showValue()" value="click me"> </form>

### Exercise Create a form that has a field with the label 'Age' and a submit button. When the button is clicked, verify that the Age is only a number. In case of an error, display: "You must enter a number!" next to the form field.

### Pattern matching with regexp JavaScript has access to powerful string testing using Regular Expressions. This is an example using `.match` ```js <script> console.log( 'Mojo Jojo'.match(/^[a-z ]+$/i) ); console.log( '123'.match(/^\d+$/) ); </script> ```

### Replace ```js <script> console.log( 'Jojo Jojo'.replace( 'oj', 'aj' ) ); </script> ```

### Exercise Make a page with this text: `'Mojo is the best. Mojo is the best. Mojo is the best.'` Make a button which uses `.replace` to change `Mojo` to `Buttercup`.

### Exercise Let's make a web-based to-do list! Start with this html: ```html <input type="text" id="item-field"> <input type="submit" value="Add Item" onClick="addItem()"> <ul id="item-list"> <li>Add items to this list using the form above</li> </ul> ```

### Exercise Solution Let's make a web-based to-do list! Spoilers! (This is just one solution.) https://codepen.io/sirbrillig/pen/MqMGXd?editors=1010

### Adding Deletion https://codepen.io/sirbrillig/pen/xaoQga?editors=1010

### Adding Persistence https://codepen.io/sirbrillig/pen/dqBwyP?editors=1010

### React React pioneered a simple way to update pieces of the DOM.

### React In the previous example, we re-rendered the whole list every time any part was changed. In a big application, this would destroy performance, so in pre-React times, you'd have to do a lot of work to just change a small part.

### Virtual DOM React introduced the "virtual DOM". A JS object which mirrors the actual DOM. Changing that is very fast.

### Virtual DOM Once you update the virtual DOM, React itself updates the real DOM with the smallest number of changes needed.

### Virtual DOM Because of the virtual DOM, we can (usually) safely re-render a massive application and it will only update what has changed.

### Virtual DOM The downside of the virtual DOM is that since it is a JS object, we have to write all our HTML as JS objects. ```js // <strong>Hello</strong> React.createElement('strong', null, 'Hello'); ``` To make this easier, React introduced JSX.

### JSX React usually uses JSX (although it is not required). JSX is like using HTML inside JS. ```js function renderHello() { return <strong>Hello</strong>; } ```

### JSX JS cannot read JSX natively. It needs to be translated using a "transpiler". This is a tool that reads something else (or just JS) and turns it into JS.

### JSX The `babel` transpiler converts this: ```js function renderHello() { return <strong>Hello</strong>; } ``` into this: ```js function renderHello() { return React.createElement( "strong", null, "Hello" ); } ```

### The To-Do List Using React https://codepen.io/sirbrillig/pen/BOgbjy?editors=1010

## Prototypes When you access a property on an Object, and it does not exist, JavaScript will look at the Object's _prototype_.

### Using Prototypes Here's what it looks like without a prototype: ```js > const buttercup = {}; > buttercup.fight(); TypeError: buttercup.fight is not a function ```

### Using Prototypes A _prototype_ is a special part of an Object. If set to another object, the properties of the prototype will act like "defaults" for the Object.

### Using Prototypes When you access a property on an Object, and it does not exist, JavaScript will look for that property on the Object's prototype. If the prototype also does not have the property, JavaScript will check _that object's prototype_. This is called "Prototypal Inheritance" and is the only kind of Inheritance in JavaScript.

### Using Prototypes To create an Object with a prototype, use `Object.create()` ```js > const fighter = { fight: function() { console.log( 'lazer eyes!' ); }, } > const buttercup = Object.create( fighter ); > buttercup.fight(); lazer eyes! ```

### Using Prototypes There's another, more common way to create an Object with a prototype, but it is more complex. The _mysterious_ `new` keyword. ```js > const Fighter = function() {}; > Fighter.prototype = { fight: function() { console.log( 'lazer eyes!' ); }, } > const buttercup = new Fighter(); > buttercup.fight(); lazer eyes! ```

### Using Prototypes `new` does three things and still uses prototypes exactly the same way, but it makes it look like Classical Inheritance. 1. Create a new object. 2. Assign the `prototype` property of the target as the Prototype of the new object. 3. Run the "constructor function" (don't ask about the return value).

### Using Class A the `class` keyword is a fancy way to use `new` (but it does exactly the same thing): ```js > class Fighter { fight() { console.log( 'lazer eyes!' ); } } > const buttercup = new Fighter(); > buttercup.fight(); lazer eyes! ```

## Function Binding There is a special read-only variable that any function can use called `this`. `this` is automatically set to something, depending on how the function is called.

### this <div class="center">🐉 Here be dragons 🐉</div> Until you understand `this`, be careful using it. We'll explain it anyway, but don't worry if it seems bizarre. It is.

### this It doesn't matter where the function is defined (written)! It generally only matters where and how it was called.

### this ```js function foo() { console.log( this.a ); } let obj = { a: 2, foo: foo, }; obj.foo(); // 2 ``` If a function is called after a period, then `this` inside the function will refer to the object that came before the period.

### this ```js function foo() { console.log( this.a ); } let a = 2; foo(); // undefined ``` If a function is called without a period, then `this` inside the function will be the `window` Object (in a browser).

### this When calling a function, you can use `call()` or `apply()` to explicitly set `this` to something else. ```js function foo() { console.log( this.a ); } let obj = { a: 2, }; foo.call( obj ); // 2 ```

### this When _defining_ a function, you can use `bind()` to explicitly set `this` to something else. ```js function foo() { console.log( this.a ); } let obj = { a: 2, }; const boundFoo = foo.bind( obj ); boundFoo(); // 2 ```

### this When _defining_ a function, you can use the "fat arrow" notation to automatically bind `this` to whatever `this` is where the function is defined. ```js function makeFoo() { return () => { console.log( this.a ); } } let obj = { a: 2, }; const foo = makeFoo.call( obj ); foo(); // 2 ```

## The Event Loop JS running on a web page needs to be able to respond to clicks and other events at any time. To do this, JS runs in an infinite loop called... **The Event Loop**

## The Event Loop JS may seem to be able to do many things at once, but it is actually just one process which checks for queued jobs and then runs them.

## The Event Loop Jobs are queued whenever an event occurs, like clicking a button.

## The Event Loop You can manually queue a job by using the (poorly named) `setTimeout()` function. ```js setTimeout(() => alert('hello world'), 1000); ```

## setTimeout ```js setTimeout(() => alert('hello world'), 1000); ``` This reads "after 1 second, show an alert". But _beware_! It might not actually be 1 second. It will be whenever the loop next has nothing to do after 1 second has passed.

## setTimeout ```js setTimeout(() => alert('hello world'), 0); ``` Sometimes it's useful to queue a job after the current job is done. (This is not immediate.)

## Events Other types of events are anything async, like network requests.

## Network Requests Before 1999, JS could not make its own network requests. Then IE 5 added an object called `XMLHttpRequest`

## Network Requests `XMLHttpRequest` inspired the pattern known as "AJAX" (Asynchronous JavaScript and XML) and led to the reinvigoration of JS and the first modern web apps.

## Network Requests `XMLHttpRequest` and its more modern counterpart, `fetch()`, allow making a network request and waiting for the response. Since this can take an indeterminate amount of time, the response must be handled by another job (a callback).

## Example Network Request ```js fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => console.log(json)) ``` Try it yourself (https://jsonplaceholder.typicode.com/)

## Modules To share functions with other projects, JavaScript can be packaged into _modules_. There are several ways to do this, but you will probably see a lot of this: ```js import React from 'react'; ```

### import ```js import React from 'react'; ``` This imports the "default" export from the module called `react`.

### export If you save this into a file called 'say-goodbye.js': ```js export default function sayGoodbye() { console.log( 'Once again, the day is saved!' ); } ``` Then you can import it in another file in the same directory: ```js import sayGoodbye from './say-goodbye.js'; sayGoodbye(); // Once again, the day is saved! ```

### export You can export multiple things by excluding `default`: ```js export function sayHi() { console.log( 'The city of Townsville.' ); } export function sayGoodbye() { console.log( 'Once again, the day is saved!' ); } ``` Then you can import it by name in another file in the same directory: ```js import { sayGoodbye, sayHi } from './say-goodbye'; sayGoodbye(); // Once again, the day is saved! sayHi(); // The city of Townsville. ```

### module names Notice that you can skip adding the `.js` to the file name. ```js import sayGoodbye from './say-goodbye'; ```

### npm There is a special program used to manage modules in JavaScript called `npm`. ("node package manager", although it is not only for node) To install a package named `react`, just type into your shell: ```bash npm install react ```

### npm Modules installed using `npm` are put in a directory called `node_modules`. To import a module installed using `npm`, you can skip adding the `./` at the beginning. ```js import React from 'react'; ```

### npm Anyone can publish a module on npm!

### package.json Every JavaScript project can have a special file called `package.json` which contains information about that project. You can create one automatically by typing: ```bash npm init ```

### package.json Once you have a package.json file, you can _save_ information about any module you install, so that other people using your project know that the installed module is required. ```bash npm install --save react ```

### package.json To automatically install all the saved modules in a package.json file, just type: ```bash npm install ``` You'll usually need to do this when first working on someone else's project.

## Calypso <div class="center"> https://github.com/Automattic/wp-calypso </div>

### Starting Calypso Calypso is both a web app _and_ includes a web server so that you can run it locally. ```bash npm start ``` (⌛️ this takes a while!) Then you can visit http://calypso.localhost:3000

### Components ```js import React, { PropTypes, PureComponent } from 'react'; export class VerticalMenu extends PureComponent { static propTypes = { onClick: PropTypes.func, initalItemIndex: PropTypes.number, children: PropTypes.arrayOf( PropTypes.element ) } static defaultProps = { initialItemIndex: 0, onClick: identity } constructor( props ) { super( props ); this.state = { selectedIndex: props.initialItemIndex }; } render() { const { children } = this.props; const { selectedIndex } = this.state; return ( <div className="vertical-menu"> { React.Children.map( children, ( Item, index ) => ( React.cloneElement( Item, { isSelected: index === selectedIndex, onClick: partial( this.select, index ) } ) ) ) } </div> ); } } ```

## Additional Reading - https://www.javascript.com/ - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash - https://snipcart.com/blog/javascript-beginner-intro-exercises - https://reactjs.org/tutorial/tutorial.html