├── EXPERIMENTAL.md └── README.md /EXPERIMENTAL.md: -------------------------------------------------------------------------------- 1 | # Practical JavaScript notes 2 | 3 | ## Intro 4 | 5 | * Through programming, you can work on three core life skills: logic, communication, and health (especially mental health). 6 | * The Watch and Code approach has three distinct stages: beginning, middle, and late. 7 | * The beginning stage is focused on teaching you the mechanics of programming from the computer's perspective. 8 | * The middle stage helps you understand existing programs through methodically reading code. 9 | * The late stage is where you'll contribute to a large existing software project. The objectives are to learn through independent action in a team environment. 10 | * Try to set up a system where you code as often as possible (ideally every day). Focus your energy on being consistent. Don't worry about how much you get done on any given day. The goal is not to be the hero of a random day, week, or month, but to be a hero over the span of a long career. 11 | 12 | ## Language considerations 13 | 14 | * There are four aspects that make a programming language good for learning. The language is ideally (1 easy to read), has a (2 compact syntax), is (3 easy to set up), and is (4 clearly useful). 15 | * JavaScript does reasonably well in (1 easy to read), very poorly in (2 compact syntax). It does exceptionally well in the last two aspects (3 easy to set up) and (4 clearly useful). 16 | * We can make JavaScript very nearly the perfect language for learning by teaching only the essential features of the language at the beginning. In doing so, we force the language to have a compact syntax. Later on, we can layer on the optional features of the language. 17 | 18 | ## Support 19 | 20 | * Office hours on Mondays. 21 | * If you continue beyond this intro course, you'll have access to a Slack group and daily Zoom meetings where you can get help. 22 | 23 | ## Get ready 24 | 25 | * Use Google Chrome and VS Code. 26 | * Make sure that you set up VS Code *exactly* the way I do it. 27 | * Don't worry about HTML and DO NOT UNDER ANY CIRCUMSTANCES WASTE TIME MEMORIZING STUFF. 28 | * Make sure your HTML file is structured exactly like mine too. If not, you will fail. 29 | * The computer is a harsh taskmaster. Character level precision matters. If you can't get this right, you will fail. 30 | * This is the easy part. Do not fail at the easy part. 31 | 32 | ## Todo lists are so f**king lame. Or are they? 33 | 34 | * You can learn more than you think from building a todo list. 35 | * Almost every site is a todo list. There are exceptions, but not many. 36 | * Our todo list is gonna be ugly because we are purposely ignoring visual style. 37 | 38 | ## V1 - Getting started 39 | 40 | * Arrays are lists: `['Item 1', 'Item 2', 'Item 3']`. 41 | * Variables are nicknames for data: `var todos = ['Item 1', 'Item 2', 'Item 3']`. 42 | * Semicolons act sort of like periods do in English. They don't appear at the end of every line though. 43 | * Proper semicolon usage is particularly important when you are saving to a file, so pay close attention to how I use semicolons in `todoList.html`. I'll note exceptions as we get to them. 44 | * You can ignore my semicolon usage in the console since I treat that environment like a temporary scratchpad/whiteboard. 45 | * Use `console.log` to display data in the console. Example: `console.log('hi hi hi!')`. 46 | * Computers start counting from 0, not 1. 47 | * On an array, use `.push` to add data to the end of the array. Example: `myArray.push('new data')`. 48 | * Get an element at a certain position: `array[position]`. 49 | * Change an element at a certain position: `array[position] = 'changed!`. 50 | * Remove an element at a certain position: `array.splice(position, 1)`. 51 | 52 | ## Functions - Interlude 53 | 54 | * Characteristic 1: Functions group multiple lines of code together under a single name. 55 | 56 | ```javascript 57 | // Declaring a function. 58 | function functionName() { 59 | // Body of function. You can put 0 or more 60 | // lines of code between the curly braces. 61 | } 62 | 63 | // To run the function, add a set of parentheses to the function name. 64 | functionName(); 65 | ``` 66 | 67 | * Characteristic 2: When you a run a function, you can provide the function with data. 68 | 69 | ```javascript 70 | // myData is a parameter. Parameters differ from variables in two ways: 71 | // 1. Parameters are declared at the same time a function is created. 72 | // 2. Parameters are assigned a value only when the function is run. 73 | function demoFunction(myData) { 74 | console.log(myData); 75 | } 76 | 77 | demoFunction('gordon'); // myData = 'gordon' 78 | demoFunction('watch and code'); // myData = 'watch and code' 79 | 80 | // Notice that we do NOT use semicolons after the opening 81 | // and closing curly braces in function declarations. 82 | ``` 83 | 84 | ## V2 - Using functions 85 | 86 | * Functions can have 0, 1, or *more* parameters. 87 | 88 | ```javascript 89 | function edit(position, newValue) { 90 | todos[position] = newValue; 91 | console.log(todos); 92 | } 93 | ``` 94 | 95 | ## The computer's perspective - Interlude 96 | 97 | * To understand the computer's perspective, you need to understand every little thing that happens in each line of code. To do this, you must learn how to use the debugger effectively. 98 | * When I see the "Step over" button, I think "step over to next line of code that's about to run". 99 | * When you hit "Step over", you will not necessarily go to the next line of code in the file. You have to think about what will happen. 100 | * The "Resume script execution" is sorta of like an unpause button. It'll exit the debugger or go to the next breakpoint (if there is one). 101 | * Delusional thinking is not compatible with success (programming or otherwise). 102 | * Use the expectations/reality framework (along with the debugger) to improve the quality of your thinking. 103 | * Use "Step into" to go into any function call *except* built-in functions. 104 | * Use the `debugger` statement to set breakpoints in the console without writing to a file. 105 | 106 | ## Questions and quality - Interlude 107 | 108 | * Ask high quality questions. How you approach this will be a deciding factor in how good you will be. 109 | * Throughout your journey learning to program (or with anything really), you will be faced with choices like this. One path leads to high ability, the other path leads to low ability. Choose wisely. 110 | 111 | ## Functions and variables - Interlude 112 | 113 | * If you're inside of a function, you can look out and see data, but the opposite isn't true. If you're outside, you can't look in. 114 | * Whenever you're in doubt, draw circles and arrows. Arrows can only exit circles; they can never go in. 115 | * "Scope" is a fancy term for describing variable visibility. 116 | 117 | ## V3 - Using objects 118 | 119 | * `true` and `false` are boolean values. 120 | * Use objects to group related data together 121 | 122 | ```javascript 123 | var todo = { 124 | todoText: 'Get groceries', 125 | completed: false 126 | }; 127 | 128 | // Access properties with dot notation. 129 | console.log(todo.todoText); // 'Get groceries' 130 | console.log(todo.completed); // false 131 | ``` 132 | 133 | ## V4 - Toggling 134 | * Comparisons: Use `===` to see if two things are equal to each other. 135 | * Use if statements to conditionally run chunks of code. 136 | ```javascript 137 | if (true) { 138 | console.log('This line of code will run.'); 139 | } 140 | 141 | if (false) { 142 | console.log('This line of code will not run.'); 143 | } 144 | 145 | // Notice that we do NOT use semicolons after the opening 146 | // and closing curly braces in if statements. 147 | 148 | ``` 149 | * `if/else` statements offer another way to structure conditional logic. 150 | ```javascript 151 | if (condition) { 152 | // Will run if condition is true. 153 | } else { 154 | // Will run if condition is false. 155 | } 156 | ``` 157 | 158 | ## Data types and comparisons - Interlude 159 | 160 | * JavaScript has two broad types of data, objects and primitives. 161 | * Objects can be as complex as you want. Examples include arrays and functions. 162 | * Primitives are the simple building blocks of the language. 163 | * There are five main primitives: strings, numbers, booleans, undefined, and null. 164 | * Comparisons with primitives work how most people would expect (like math class). 165 | * Comparisons with objects work very differently. 166 | * Make sure you understand why `[1, 2, 3] === [1, 2, 3]` is `false`. 167 | 168 | ## V5 - Displaying data better 169 | 170 | * Use a for-loop to repeat a piece of code any number of times. 171 | 172 | ```javascript 173 | for (var i = 0; i < 5; i++) { 174 | console.log(i); 175 | // 0 176 | // 1 177 | // 2 178 | // 3 179 | // 4 180 | } 181 | 182 | // Notice that we do NOT use semicolons after the opening 183 | // and closing curly braces in for-loops. 184 | ``` 185 | 186 | ## V6 - Toggle all 187 | 188 | * Boolean logic can be complicated. Make sure that you carefully think about different situations before you start coding. 189 | 190 | ## V7 - Buttons! 191 | 192 | * HTML syntax for buttons: ``. 193 | * Vocab lesson: A function on an object is called a "method". 194 | ```javascript 195 | var gordon = { 196 | name: 'Gordon', // property 197 | city: 'San Francisco', // property 198 | myMethod: function sayHi() { // method 199 | console.log('Hi'); 200 | } 201 | }; 202 | ``` 203 | * Use the `document` object to access the webpage in your JavaScript. 204 | * Use the `document.getElementById` method to grab an element by id. 205 | ```javascript 206 | var displayTodosButton = document.getElementById('display-todos-button'); 207 | ``` 208 | * Elements have a `addEventListener` method, which can be used to respond to events. 209 | ```javascript 210 | // The first argument is an event type. 211 | // The second argument is a function that'll run 212 | // whenever the event occurs on the element. 213 | // In this example, whenever the displayTodosButton is clicked, 214 | // the displayTodos function will run. 215 | displayTodosButton.addEventListener('click', displayTodos); 216 | ``` 217 | 218 | ## Experimenting with functions - Interlude 219 | * You need to get to the point where the results of these experiments are obvious and familiar to you. 220 | ```javascript 221 | function demoFunction() {} 222 | 223 | var experiment1 = demoFunction; // ? 224 | var experiment2 = demoFunction(); // ? 225 | 226 | function demoFunctionThatReturnsAString() { 227 | return 'a string'; 228 | } 229 | 230 | var experiment3 = demoFunctionThatReturnsAString; // ? 231 | var experiment4 = demoFunctionThatReturnsAString(); // ? 232 | 233 | function demoFunctionThatReturnsUndefined() { 234 | return undefined; 235 | } 236 | 237 | var experiment5 = demoFunctionThatReturnsUndefined; // ? 238 | var experiment6 = demoFunctionThatReturnsUndefined(); // ? 239 | 240 | function logThis(thing) { 241 | console.log(thing); 242 | } 243 | 244 | // Experiment 7 245 | logThis(demoFunctionThatReturnsAString); // ? 246 | 247 | // Experiment 8 248 | logThis(demoFunctionThatReturnsAString()); // ? 249 | ``` 250 | 251 | ## V8 - Getting data from inputs 252 | 253 | * In your HTML, use `` to get user input. 254 | * In your JavaScript, use `input.value` to get/set an input's value. 255 | 256 | ## V9 - Escape from the console 257 | 258 | * In HTML, use `ul`s and `li`s for listing data. 259 | ``` 260 | 265 | ``` 266 | * Use `document.createElement` to create elements in JavaScript. 267 | ```javascript 268 | var todoLi = document.createElement('li'); 269 | ``` 270 | * Use the `appendChild` method to add elements to the page. 271 | ```javascript 272 | var todosUl = document.getElementById('todos-ul'); 273 | todosUl.appendChild(todoLi); 274 | ``` 275 | * Use the `innerHTML` property to get/set an element's html. 276 | * Use the `innerText` property to get/set an element's text. 277 | * Use `+` to combine strings. 278 | 279 | ## V10 - Click to delete 280 | * Went through the pros/cons of different ways to access the remove button that was clicked. Making informed tradeoffs is one of the most important skills that you will learn. 281 | * Functions passed to `addEventListener` are called with an event object, which describes the event that occurred. 282 | ```javascript 283 | function remove(event) { 284 | // We used event.currentTarget to access the remove button element that was clicked. 285 | // Elements have an id property we can use to get/set the id. 286 | var position = event.currentTarget.id; 287 | todos.splice(position, 1); 288 | displayTodos(); 289 | } 290 | ``` 291 | 292 | ## V11 - Click to toggle 293 | 294 | * Element ids should be unique. 295 | * Practiced thinking through the pros/cons of different ways to extract position from ids. 296 | ```javascript 297 | // We ended up choosing this technique. 298 | var idString = 'todo-0'; 299 | var position = idString.split('-')[1]; 300 | ``` 301 | 302 | ## V12 - Click to edit 303 | 304 | * `prompt()` is a simple way to get user input. 305 | * Use `!==` to test for inequality. 306 | * Use `&&` to combine comparisons. 307 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cheatsheet-js 2 | A super condensed JavaScript reference for [Watch and Code](https://watchandcode.com/) students. 3 | 4 | # Required resources 5 | 6 | - [Watch and Code](http://watchandcode.com/p/premium) 7 | - [How to be great at asking coding questions](https://medium.com/@gordon_zhu/how-to-be-great-at-asking-questions-e37be04d0603#.y2roq84t7) 8 | 9 | # How to read source code 10 | 11 | ### Why it’s important 12 | 13 | 1. Most of your time will be spent reading, not writing. 14 | 2. Simulates working at a company or open source project. 15 | 3. It's the fastest way to learn and improve. 16 | 5. Learn how to ignore large parts of a codebase and get a piece-by-piece understanding. 17 | 18 | ### Before you start 19 | 20 | 1. Read the docs (if they exist). 21 | 2. Run the code. 22 | 3. Play with the code to see how it behaves. 23 | 4. Think about how the code might be implemented. 24 | 5. Get the code into an editor so that you can modify it. 25 | 6. Look at the file structure. 26 | 27 | ### The process 28 | 29 | 1. Get a sense for the vocabulary. 30 | 2. Make note of any unfamiliar concepts that you might need to research later. 31 | 3. Do a quick read-through without diving into concepts from #2. 32 | 4. Test one feature with the debugger. 33 | 5. Document and add comments to confusing areas. 34 | 6. Research items in #2 only if required. 35 | 7. Repeat steps 4-6 if you want to understand more. 36 | 37 | ### Next level 38 | 39 | 1. Replicate parts of the app by hand (in the console). 40 | 2. Make small changes and see what happens. 41 | 3. Add a new feature. 42 | 43 | # Understanding `this` 44 | 45 | There isn't a single word that describes `this` well, so I just think of it as a special variable that changes depending on the situation. Those different situations are captured below. 46 | 47 | ### Case 1: In a regular function (or if you're not in a function at all), `this` points to `window`. This is the default case. 48 | 49 | ```javascript 50 | function logThis() { 51 | console.log(this); 52 | } 53 | 54 | logThis(); // window 55 | 56 | // In strict mode, `this` will be `undefined` instead of `window`. 57 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode 58 | ``` 59 | 60 | ### Case 2: When a function is called as a method, `this` points to the object that's on the left side of the dot. 61 | 62 | ```javascript 63 | 64 | /* 65 | * You can also think of this as the "left of the dot" rule. 66 | * For example, in myObject.myMethod(), `this` will be myObject 67 | * because myObject is to the left of the dot. 68 | * 69 | * Of course, if you're using this syntax myObject['myMethod'](), 70 | * technically it would be the "left of the dot or bracket" rule, 71 | * but that sounds clumsy and generally terrible. 72 | * 73 | * If you have multiple dots, the relevant dot is the one closest 74 | * to the method call. For example, if you have one.two.hi(); 75 | * `this` inside of hi will be two. 76 | */ 77 | 78 | var myObject = { 79 | myMethod: function() { 80 | console.log(this); 81 | } 82 | }; 83 | 84 | myObject.myMethod(); // myObject 85 | 86 | ``` 87 | 88 | ### Case 3: In a function that's being called as a constructor, `this` points to the object that the constructor is creating. 89 | 90 | ```javascript 91 | function Person(name) { 92 | this.name = name; 93 | } 94 | 95 | var gordon = new Person('gordon'); 96 | console.log(gordon); // {name: 'gordon'} 97 | ``` 98 | 99 | ### Case 4: When you explicitly set the value of `this` manually using `bind`, `apply`, or `call`, it's all up to you. 100 | 101 | ```javascript 102 | function logThis() { 103 | console.log(this); 104 | } 105 | 106 | var explicitlySetLogThis = logThis.bind({name: 'Gordon'}); 107 | 108 | explicitlySetLogThis(); // {name: 'Gordon'} 109 | 110 | // Note that a function returned from .bind (like `boundOnce` below), 111 | // cannot be bound to a different `this` value ever again. 112 | // In other words, functions can only be bound once. 113 | var boundOnce = logThis.bind({name: 'The first time is forever'}); 114 | 115 | // These attempts to change `this` are futile. 116 | boundOnce.bind({name: 'why even try?'})(); 117 | boundOnce.apply({name: 'why even try?'}); 118 | boundOnce.call({name: 'why even try?'}); 119 | ``` 120 | 121 | ### Case 5: In a callback function, apply the above rules methodically. 122 | 123 | ```javascript 124 | 125 | function outerFunction(callback) { 126 | callback(); 127 | } 128 | 129 | function logThis() { 130 | console.log(this); 131 | } 132 | 133 | /* 134 | * Case 1: The regular old default case. 135 | */ 136 | 137 | outerFunction(logThis); // window 138 | 139 | /* 140 | * Case 2: Call the callback as a method 141 | * (You'll probably NEVER see this, but I guess it's possible.) 142 | */ 143 | 144 | function callAsMethod(callback) { 145 | var weirdObject = { 146 | name: "Don't do this in real life" 147 | }; 148 | 149 | weirdObject.callback = callback; 150 | weirdObject.callback(); 151 | } 152 | 153 | callAsMethod(logThis); // `weirdObject` will get logged to the console 154 | 155 | /* 156 | * Case 3: Calling the callback as a constructor. 157 | * (You'll also probably never see this. But in case you do...) 158 | */ 159 | 160 | function callAsConstructor(callback) { 161 | new callback(); 162 | } 163 | 164 | callAsConstructor(logThis); // the new object created by logThis will be logged to the console 165 | 166 | /* 167 | * Case 4: Explicitly setting `this`. 168 | */ 169 | 170 | function callAndBindToGordon(callback) { 171 | var boundCallback = callback.bind({name: 'Gordon'}); 172 | boundCallback(); 173 | } 174 | 175 | callAndBindToGordon(logThis); // {name: 'Gordon'} 176 | 177 | // In a twist, we give `callAndBindToGordon` a function that's already been bound. 178 | var boundOnce = logThis.bind({name: 'The first time is forever'}); 179 | callAndBindToGordon(boundOnce); // {name: 'The first time is forever'} 180 | ``` 181 | --------------------------------------------------------------------------------