├── README.md ├── adder.js ├── arrayMethods.js ├── arrays.html ├── arrays.js ├── arrow1.html ├── arrow2.html ├── arrow3.html ├── bark.js ├── bark2.js ├── bark5.html ├── bark6.html ├── battleship ├── battleship.html ├── battleship.js ├── battleship1.html ├── battleship1.js ├── battleship2.html ├── battleship2.js ├── battleship3.html ├── battleship3.js ├── battleship4.html ├── battleship4.js ├── battleship5.html ├── battleship5.js ├── battleship6.html ├── battleship6.js ├── board.jpg ├── miss.png └── ship.png ├── bottles.html ├── car.js ├── car2.js ├── code.js ├── conditionals.js ├── crackCode.html ├── dogObject.html ├── dogObject2.html ├── dogObject3.html ├── emot.js ├── first.html ├── first.js ├── first2.html ├── first3.html ├── first4.html ├── generic.html ├── generic2.html ├── guess.html ├── guess2.html ├── loops.js ├── myFunctions.js ├── org.html ├── org2.html ├── org3.html ├── parseGuess.js ├── planets.html ├── planets2.html ├── planets3.html ├── planets4.html ├── prompt.html ├── prompt2.html ├── punc.js ├── scope.html ├── shadow.html ├── tf.js ├── timer.html └── timer.js /README.md: -------------------------------------------------------------------------------- 1 | # JavaScriptBootcamp 2 | Code for O'Reilly Learning online course 3 | -------------------------------------------------------------------------------- /adder.js: -------------------------------------------------------------------------------- 1 | function createAdder(num) { 2 | return function(n) {return num + n}; 3 | } 4 | 5 | const add3 = createAdder(3); 6 | console.log(add3(1)); 7 | 8 | -------------------------------------------------------------------------------- /arrayMethods.js: -------------------------------------------------------------------------------- 1 | let numArray = [2, 7, 7, 3, 9, 0, 1, 6, 8, 3, 8, 4, 7, 9]; 2 | 3 | // concatenate 2 arrays 4 | let array1 = [1, 2]; 5 | let array2 = [3, 4]; 6 | let array3 = array1.concat(array2); 7 | console.log("Concatenation of array1 and array2:", array3); 8 | 9 | // find the index of an item in the array 10 | let days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; 11 | let dayIndex = days.indexOf("Wed"); 12 | console.log("Index of Wed:", dayIndex); 13 | 14 | // push new items onto an array 15 | let temps = [59, 62, 65, 73, 68]; 16 | temps.push(72); 17 | temps.push(65); 18 | console.log("Temps:", temps); 19 | 20 | // does an array include a value? 21 | let locations = ["C3", "D3", "E3"]; 22 | let isIncluded = locations.includes("D3"); 23 | console.log("Is D3 in locations?", isIncluded); 24 | 25 | // forEach, an alternative to for loop 26 | locations.forEach((loc) => console.log("Location:", loc)); 27 | 28 | // is every item in an array a match for a test? 29 | let nums = [10, 11, 12, 13]; 30 | let isEvery = nums.every((v) => v > 9); 31 | console.log("Is every num > 9?", isEvery); 32 | 33 | // which is the first number > 3? 34 | let big3 = numArray.find((v) => v > 3); 35 | console.log("First number bigger than 3:", big3); 36 | 37 | // create a new array by adding 1 38 | let newArray = []; 39 | numArray.forEach((v) => newArray.push(v + 1)); 40 | console.log("Num array:", numArray); 41 | console.log("New array:", newArray); 42 | 43 | // reverse the array 44 | numArray.reverse(); // modifies original array 45 | 46 | 47 | -------------------------------------------------------------------------------- /arrays.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Arrays 6 | 7 | 8 | 9 |

Arrays

10 | 11 | 12 | -------------------------------------------------------------------------------- /arrays.js: -------------------------------------------------------------------------------- 1 | let temps = [56, 58, 59, 61, 61]; 2 | let flavors = ["vanilla", "chocolate", "strawberry"]; 3 | let didScore = [true, true, false, true, false, false]; 4 | let tictactoe = [ ["X", "O", "X"], ["O", "X", "O"], ["X", "O", ""] ]; 5 | 6 | console.log(`My favorite is ${flavors[0]}`); 7 | 8 | // getting and setting values 9 | let tempOnMonday = temps[0]; 10 | console.log("The temp on Monday was ", tempOnMonday); 11 | console.log("The temp on Tuesday was ", temps[1]); 12 | 13 | let i = 2; 14 | console.log("The temp on Wednesday was ", temps[i]); 15 | console.log("The temp on Saturday (i=6) was ", temps[i+4]); 16 | 17 | 18 | flavors[3] = "rocky road"; 19 | flavors[100] = "sparse vanilla"; 20 | console.log("Flavors: ", flavors); 21 | 22 | console.log("Top row of the Tic Tac Toe board", tictactoe[0]); 23 | console.log("Center play:", tictactoe[1][1]); 24 | 25 | // length property 26 | console.log("Length of temps array:", temps.length); 27 | 28 | // Creating an array 29 | let cats = ["Fluffy", "Pickles", "Oliver"]; 30 | // or.... 31 | let dogs = []; 32 | dogs[0] = "Fido"; 33 | dogs[1] = "Rover"; 34 | dogs[2] = "Spot"; 35 | console.log("Dogs:", dogs); 36 | 37 | // Arrays are Objects too 38 | temps.length; // returns 5 39 | temps[temps.length - 1]; // last element of temps 40 | temps.sort(); //sorts array, destructive 41 | 42 | let moreFlavors = ["spice", "curry"]; 43 | flavors.push("lemon"); 44 | flavors.indexOf("lemon"); // 3 45 | flavors.includes("orange"); // false 46 | flavors.concat(moreFlavors); 47 | 48 | // Iterate with an array 49 | for (let i = 0; i < flavors.length; i++) { 50 | if (flavors[i] == "vanilla") { 51 | console.log("We have vanilla!"); 52 | } 53 | } 54 | 55 | for (let i in flavors) { 56 | if (flavors[i] == "vanilla") { 57 | console.log("We have vanilla!"); 58 | } 59 | } 60 | 61 | // sort the flavors - modifies the original array!! 62 | flavors.sort(); 63 | 64 | 65 | -------------------------------------------------------------------------------- /arrow1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Arrow functions 6 | 7 | 8 |

Arrow functions

9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /arrow2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rewrite bark as an arrow function 6 | 7 | 8 |

Make your dog bark

9 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /arrow3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Arrow functions with array methods 6 | 7 | 8 |

Arrow functions with array methods

9 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /bark.js: -------------------------------------------------------------------------------- 1 | let fidoBark = bark("Fido"); 2 | console.log(fidoBark); 3 | 4 | function bark(dogName) { 5 | let sound = "woof woof"; 6 | return `${ dogName } says ${ sound }`; 7 | } 8 | -------------------------------------------------------------------------------- /bark2.js: -------------------------------------------------------------------------------- 1 | let fidoBark = bark("Fido"); 2 | console.log(fidoBark); 3 | 4 | let bark = function(dogName) { 5 | let sound = "woof woof"; 6 | return `${ dogName } says ${ sound }`; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /bark5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Variable shadowing and block scope 6 | 7 | 8 |

Make your dog bark

9 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /bark6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rewrite bark as an assignment 6 | 7 | 8 |

Make your dog bark

9 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /battleship/battleship.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship 6 | 55 | 56 | 57 |

58 |

59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

89 | 93 |

94 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /battleship/battleship.js: -------------------------------------------------------------------------------- 1 | // Final version with extra code for guesses and 2 | // handling "return" for form entry 3 | class Ship { 4 | constructor() { 5 | this.locations = [0, 0, 0]; 6 | this.hits = ["", "", ""]; 7 | } 8 | fire(location) { 9 | let index = this.locations.indexOf(location); 10 | if (index >= 0) { 11 | this.hit(location); 12 | return true; 13 | } else { 14 | this.miss(location); 15 | return false; 16 | } 17 | } 18 | hit(location) { 19 | let index = this.locations.indexOf(location); 20 | if (this.hits[index] === "hit") { 21 | displayMessage("Oops, you already hit that location!"); 22 | } else { 23 | displayMessage("HIT!"); 24 | } 25 | this.hits[index] = "hit"; 26 | displayHit(location); 27 | if (this.isSunk()) { 28 | displayMessage("You sank my battleship!"); 29 | shipsSunk++; 30 | } 31 | } 32 | miss(location) { 33 | displayMiss(location); 34 | displayMessage("You missed"); 35 | } 36 | isSunk() { 37 | return this.hits.every((v) => v === "hit"); 38 | } 39 | // Ready Bake 40 | doesCollide(locations) { 41 | for (let i = 0; i < locations.length; i++) { 42 | if (this.locations.includes(locations[i])) { 43 | return true; 44 | } 45 | } 46 | return false; 47 | } 48 | } 49 | 50 | // Global variables 51 | const boardSize = 7; 52 | const numShips = 3; 53 | const shipLength = 3; 54 | let shipsSunk = 0; 55 | let guesses = 0; 56 | const ships = [ new Ship(), new Ship(), new Ship() ]; 57 | 58 | function fire(location) { 59 | for (let i = 0; i < numShips; i++) { 60 | let ship = ships[i]; 61 | let hit = ship.fire(location); 62 | if (hit) { 63 | return true; 64 | } 65 | } 66 | return false; 67 | } 68 | 69 | 70 | function displayMessage(msg) { 71 | let messageArea = document.getElementById("messageArea"); 72 | messageArea.innerHTML = msg; 73 | } 74 | 75 | function displayHit(location) { 76 | let cell = document.getElementById(location); 77 | cell.setAttribute("class", "hit"); 78 | } 79 | 80 | function displayMiss(location) { 81 | let cell = document.getElementById(location); 82 | cell.setAttribute("class", "miss"); 83 | } 84 | 85 | function processGuess(guess) { 86 | let location = parseGuess(guess); 87 | if (location) { 88 | guesses++; // Extra! 89 | let hit = fire(location); 90 | if (hit && (shipsSunk === numShips)) { 91 | displayMessage(`You sank all my battleships, in ${guesses} guesses`); 92 | } 93 | } 94 | } 95 | 96 | // Parse a guess from the user 97 | function parseGuess(guess) { 98 | const alphabet = ["A", "B", "C", "D", "E", "F", "G"]; 99 | 100 | if (guess === null || guess.length !== 2) { 101 | alert("Oops, please enter a letter and a number on the board."); 102 | } else { 103 | let firstChar = guess.charAt(0); 104 | let row = alphabet.indexOf(firstChar); 105 | let column = guess.charAt(1); 106 | 107 | if (isNaN(row) || isNaN(column)) { 108 | alert("Oops, that isn't on the board."); 109 | } else if (row < 0 || row >= boardSize || 110 | column < 0 || column >= boardSize) { 111 | alert("Oops, that's off the board!"); 112 | } else { 113 | return row + column; // location 114 | } 115 | } 116 | return null; 117 | } 118 | 119 | 120 | // Event handler to handle a click on the Fire button 121 | function handleFireButton() { 122 | let guessInput = document.getElementById("guessInput"); 123 | let guess = guessInput.value.toUpperCase(); 124 | 125 | processGuess(guess); 126 | 127 | guessInput.value = ""; 128 | } 129 | 130 | 131 | // init - called when the page has completed loading 132 | window.onload = init; 133 | 134 | function init() { 135 | // Fire! button onclick handler 136 | let fireButton = document.getElementById("fireButton"); 137 | fireButton.onclick = handleFireButton; 138 | 139 | // handle "return" key press (READY BAKE) 140 | let guessInput = document.getElementById("guessInput"); 141 | guessInput.onkeypress = handleKeyPress; 142 | 143 | // place the ships on the game board (READY BAKE) 144 | generateShipLocations(); 145 | } 146 | 147 | 148 | // READY BAKE 149 | function generateShipLocations() { 150 | let locations; 151 | for (let i = 0; i < numShips; i++) { 152 | do { 153 | locations = generateShip(); 154 | } while (collision(locations)); 155 | ships[i].locations = locations; 156 | } 157 | console.log("Ships array: ", ships); 158 | } 159 | 160 | function generateShip() { 161 | let direction = Math.floor(Math.random() * 2); 162 | let row, col; 163 | 164 | if (direction === 1) { // horizontal 165 | row = Math.floor(Math.random() * boardSize); 166 | col = Math.floor(Math.random() * (boardSize - shipLength + 1)); 167 | } else { // vertical 168 | row = Math.floor(Math.random() * (boardSize - shipLength + 1)); 169 | col = Math.floor(Math.random() * boardSize); 170 | } 171 | 172 | let newShipLocations = []; 173 | for (let i = 0; i < shipLength; i++) { 174 | if (direction === 1) { 175 | newShipLocations.push(`${row}${(col + i)}`); 176 | } else { 177 | newShipLocations.push(`${(row + i)}${col}`); 178 | } 179 | } 180 | return newShipLocations; 181 | } 182 | 183 | function collision(locations) { 184 | for (let i = 0; i < numShips; i++) { 185 | let ship = ships[i]; 186 | if (ship.doesCollide(locations)) { 187 | return true; 188 | } 189 | } 190 | return false; 191 | } 192 | 193 | function handleKeyPress(e) { 194 | let fireButton = document.getElementById("fireButton"); 195 | 196 | if (e.keyCode === 13) { 197 | fireButton.click(); 198 | return false; 199 | } 200 | } 201 | 202 | -------------------------------------------------------------------------------- /battleship/battleship1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship 6 | 55 | 56 | 57 |

58 |

59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

89 | 93 |

94 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /battleship/battleship1.js: -------------------------------------------------------------------------------- 1 | 2 | // Global variables 3 | const boardSize = 7; 4 | 5 | // displayHit, displayMiss, displayMessage 6 | function displayHit(location) { 7 | let cell = document.getElementById(location); 8 | cell.setAttribute("class", "hit"); 9 | } 10 | function displayMiss(location) { 11 | let cell = document.getElementById(location); 12 | cell.setAttribute("class", "miss"); 13 | } 14 | function displayMessage(msg) { 15 | let messageArea = document.getElementById("messageArea"); 16 | messageArea.innerHTML = msg; 17 | } 18 | 19 | // Parse a guess from the user 20 | function parseGuess(guess) { 21 | if (guess === null || guess.length !== 2) { 22 | alert("Oops, please enter a letter and a number on the board."); 23 | } else { 24 | let firstChar = guess.charAt(0); 25 | let row; 26 | if (firstChar === "A") { 27 | row = 0; 28 | } else if (firstChar === "B") { 29 | row = 1; 30 | } // and so on 31 | let column = guess.charAt(1); 32 | 33 | if (isNaN(row) || isNaN(column)) { 34 | alert("Oops, that isn't on the board."); 35 | } else if (row < 0 || row >= boardSize || 36 | column < 0 || column >= boardSize) { 37 | alert("Oops, that's off the board!"); 38 | } else { 39 | return row + column; // location 40 | } 41 | } 42 | return null; 43 | } 44 | 45 | 46 | // Event handler to handle a click on the Fire button 47 | function handleFireButton() { 48 | let guessInput = document.getElementById("guessInput"); 49 | let guess = guessInput.value.toUpperCase(); 50 | 51 | let location = parseGuess(guess); 52 | displayMessage(`You tried to hit a ship at location ${ location }`); 53 | 54 | guessInput.value = ""; 55 | } 56 | 57 | 58 | // init - called when the page has completed loading 59 | window.onload = init; 60 | 61 | function init() { 62 | // Fire! button onclick handler 63 | let fireButton = document.getElementById("fireButton"); 64 | fireButton.onclick = handleFireButton; 65 | } 66 | 67 | 68 | -------------------------------------------------------------------------------- /battleship/battleship2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship 6 | 55 | 56 | 57 |

58 |

59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

89 | 93 |

94 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /battleship/battleship2.js: -------------------------------------------------------------------------------- 1 | 2 | // Global variables 3 | const boardSize = 7; 4 | const shipLength = 3; 5 | const ships = [ [0, 0, 0], ["", "", ""] ]; 6 | 7 | // fire, hit, miss, isSunk all new this step 8 | function fire(location) { 9 | let index = ships[0].indexOf(location); 10 | if (index >= 0) { 11 | hit(location); 12 | return true; 13 | } else { 14 | miss(location); 15 | return false; 16 | } 17 | } 18 | function hit(location) { 19 | let index = ships[0].indexOf(location); 20 | if (ships[1][index] === "hit") { 21 | displayMessage("Oops, you already hit that location!"); 22 | } else { 23 | displayMessage("HIT!"); 24 | } 25 | ships[1][index] = "hit"; 26 | displayHit(location); 27 | if (isSunk()) { 28 | displayMessage("You sank my battleship!"); 29 | } 30 | } 31 | function miss(location) { 32 | displayMiss(location); 33 | displayMessage("You missed"); 34 | } 35 | function isSunk() { 36 | let isSunk = true; 37 | for (let i = 0; i < ships[1].length; i++) { 38 | if (ships[1][i] != "hit") { 39 | isSunk = false; 40 | break; 41 | } 42 | } 43 | return isSunk; 44 | } 45 | 46 | function displayMessage(msg) { 47 | let messageArea = document.getElementById("messageArea"); 48 | messageArea.innerHTML = msg; 49 | } 50 | // displayHit and displayMiss new this step 51 | function displayHit(location) { 52 | let cell = document.getElementById(location); 53 | cell.setAttribute("class", "hit"); 54 | } 55 | function displayMiss(location) { 56 | let cell = document.getElementById(location); 57 | cell.setAttribute("class", "miss"); 58 | } 59 | 60 | // new this step 61 | function processGuess(guess) { 62 | let location = parseGuess(guess); 63 | 64 | if (location) { // if location != null 65 | let hit = fire(location); 66 | // more here later 67 | } 68 | } 69 | 70 | // Parse a guess from the user 71 | // Updated in this step 72 | function parseGuess(guess) { 73 | const alphabet = ["A", "B", "C", "D", "E", "F", "G"]; 74 | if (guess === null || guess.length !== 2) { 75 | alert("Oops, please enter a letter and a number on the board."); 76 | } else { 77 | let firstChar = guess.charAt(0); 78 | // updated in this step 79 | let row = alphabet.indexOf(firstChar); 80 | let column = guess.charAt(1); 81 | 82 | if (isNaN(row) || isNaN(column)) { 83 | alert("Oops, that isn't on the board."); 84 | } else if (row < 0 || row >= boardSize || 85 | column < 0 || column >= boardSize) { 86 | alert("Oops, that's off the board!"); 87 | } else { 88 | return row + column; // location 89 | } 90 | } 91 | return null; 92 | } 93 | 94 | 95 | // Event handler to handle a click on the Fire button 96 | function handleFireButton() { 97 | let guessInput = document.getElementById("guessInput"); 98 | let guess = guessInput.value.toUpperCase(); 99 | 100 | processGuess(guess); 101 | 102 | guessInput.value = ""; 103 | } 104 | 105 | 106 | // init - called when the page has completed loading 107 | window.onload = init; 108 | 109 | function init() { 110 | // Fire! button onclick handler 111 | let fireButton = document.getElementById("fireButton"); 112 | fireButton.onclick = handleFireButton; 113 | 114 | generateShipLocations(); 115 | } 116 | 117 | 118 | // new this step 119 | function generateShipLocations() { 120 | ships[0] = generateShip(); 121 | console.log("Ship:", ships); // cheater for testing 122 | } 123 | 124 | // READY BAKE 125 | function generateShip() { 126 | let direction = Math.floor(Math.random() * 2); 127 | let row, col; 128 | 129 | if (direction === 1) { // horizontal 130 | row = Math.floor(Math.random() * boardSize); 131 | col = Math.floor(Math.random() * (boardSize - shipLength + 1)); 132 | } else { // vertical 133 | row = Math.floor(Math.random() * (boardSize - shipLength + 1)); 134 | col = Math.floor(Math.random() * boardSize); 135 | } 136 | 137 | let newShipLocations = []; 138 | for (let i = 0; i < shipLength; i++) { 139 | if (direction === 1) { 140 | newShipLocations.push(`${row}${(col + i)}`); 141 | } else { 142 | newShipLocations.push(`${(row + i)}${col}`); 143 | } 144 | } 145 | return newShipLocations; 146 | } 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /battleship/battleship3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship 6 | 55 | 56 | 57 |

58 |

59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

89 | 93 |

94 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /battleship/battleship3.js: -------------------------------------------------------------------------------- 1 | // ship is new this step 2 | let ship = { 3 | locations: [0, 0, 0], 4 | hits: ["", "", ""], 5 | 6 | fire: function(location) { 7 | let index = this.locations.indexOf(location); 8 | if (index >= 0) { 9 | this.hit(location); 10 | return true; 11 | } else { 12 | this.miss(location); 13 | return false; 14 | } 15 | }, 16 | hit: function(location) { 17 | let index = this.locations.indexOf(location); 18 | if (this.hits[index] === "hit") { 19 | displayMessage("Oops, you already hit that location!"); 20 | } else { 21 | displayMessage("HIT!"); 22 | } 23 | this.hits[index] = "hit"; 24 | displayHit(location); 25 | if (this.isSunk()) { 26 | displayMessage("You sank my battleship!"); 27 | } 28 | }, 29 | miss: function(location) { 30 | displayMiss(location); 31 | displayMessage("You missed"); 32 | }, 33 | isSunk: function() { 34 | let isSunk = true; 35 | for (let i = 0; i < this.hits.length; i++) { 36 | if (this.hits[i] != "hit") { 37 | isSunk = false; 38 | break; 39 | } 40 | } 41 | return isSunk; 42 | // challenge solution 43 | //return !(this.hits.includes("")); 44 | } 45 | }; 46 | 47 | // Global variables 48 | const boardSize = 7; 49 | const shipLength = 3; 50 | const ships = [ ship ]; // just one for now, more later! 51 | 52 | function displayMessage(msg) { 53 | let messageArea = document.getElementById("messageArea"); 54 | messageArea.innerHTML = msg; 55 | } 56 | function displayHit(location) { 57 | let cell = document.getElementById(location); 58 | cell.setAttribute("class", "hit"); 59 | } 60 | function displayMiss(location) { 61 | let cell = document.getElementById(location); 62 | cell.setAttribute("class", "miss"); 63 | } 64 | 65 | function processGuess(guess) { 66 | let location = parseGuess(guess); 67 | 68 | if (location) { // if location != null 69 | let hit = ships[0].fire(location); // new 70 | // more here later 71 | } 72 | } 73 | 74 | // Parse a guess from the user 75 | // Updated in this step 76 | function parseGuess(guess) { 77 | const alphabet = ["A", "B", "C", "D", "E", "F", "G"]; 78 | if (guess === null || guess.length !== 2) { 79 | alert("Oops, please enter a letter and a number on the board."); 80 | } else { 81 | let firstChar = guess.charAt(0); 82 | // updated in this step 83 | let row = alphabet.indexOf(firstChar); 84 | let column = guess.charAt(1); 85 | 86 | if (isNaN(row) || isNaN(column)) { 87 | alert("Oops, that isn't on the board."); 88 | } else if (row < 0 || row >= boardSize || 89 | column < 0 || column >= boardSize) { 90 | alert("Oops, that's off the board!"); 91 | } else { 92 | return row + column; // location 93 | } 94 | } 95 | return null; 96 | } 97 | 98 | 99 | // Event handler to handle a click on the Fire button 100 | function handleFireButton() { 101 | let guessInput = document.getElementById("guessInput"); 102 | let guess = guessInput.value.toUpperCase(); 103 | 104 | processGuess(guess); 105 | 106 | guessInput.value = ""; 107 | } 108 | 109 | 110 | // init - called when the page has completed loading 111 | window.onload = init; 112 | 113 | function init() { 114 | // Fire! button onclick handler 115 | let fireButton = document.getElementById("fireButton"); 116 | fireButton.onclick = handleFireButton; 117 | 118 | generateShipLocations(); 119 | } 120 | 121 | 122 | function generateShipLocations() { 123 | ships[0].locations = generateShip(); 124 | console.log("Ship:", ships[0]); // cheater for testing 125 | } 126 | 127 | // READY BAKE 128 | function generateShip() { 129 | let direction = Math.floor(Math.random() * 2); 130 | let row, col; 131 | 132 | if (direction === 1) { // horizontal 133 | row = Math.floor(Math.random() * boardSize); 134 | col = Math.floor(Math.random() * (boardSize - shipLength + 1)); 135 | } else { // vertical 136 | row = Math.floor(Math.random() * (boardSize - shipLength + 1)); 137 | col = Math.floor(Math.random() * boardSize); 138 | } 139 | 140 | let newShipLocations = []; 141 | for (let i = 0; i < shipLength; i++) { 142 | if (direction === 1) { 143 | newShipLocations.push(`${row}${(col + i)}`); 144 | } else { 145 | newShipLocations.push(`${(row + i)}${col}`); 146 | } 147 | } 148 | return newShipLocations; 149 | } 150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /battleship/battleship4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship 6 | 55 | 56 | 57 |

58 |

59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

89 | 93 |

94 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /battleship/battleship4.js: -------------------------------------------------------------------------------- 1 | let ship = { 2 | locations: [0, 0, 0], 3 | hits: ["", "", ""], 4 | 5 | fire: function(location) { 6 | let index = this.locations.indexOf(location); 7 | if (index >= 0) { 8 | this.hit(location); 9 | return true; 10 | } else { 11 | this.miss(location); 12 | return false; 13 | } 14 | }, 15 | hit: function(location) { 16 | let index = this.locations.indexOf(location); 17 | if (this.hits[index] === "hit") { 18 | displayMessage("Oops, you already hit that location!"); 19 | } else { 20 | displayMessage("HIT!"); 21 | } 22 | this.hits[index] = "hit"; 23 | displayHit(location); 24 | if (this.isSunk()) { 25 | displayMessage("You sank my battleship!"); 26 | } 27 | }, 28 | miss: function(location) { 29 | displayMiss(location); 30 | displayMessage("You missed"); 31 | }, 32 | isSunk: function() { 33 | return this.hits.every((v) => v === "hit"); // new this step 34 | } 35 | }; 36 | 37 | // Global variables 38 | const boardSize = 7; 39 | const shipLength = 3; 40 | const ships = [ ship ]; // just one for now, more later! 41 | 42 | function displayMessage(msg) { 43 | let messageArea = document.getElementById("messageArea"); 44 | messageArea.innerHTML = msg; 45 | } 46 | function displayHit(location) { 47 | let cell = document.getElementById(location); 48 | cell.setAttribute("class", "hit"); 49 | } 50 | function displayMiss(location) { 51 | let cell = document.getElementById(location); 52 | cell.setAttribute("class", "miss"); 53 | } 54 | 55 | function processGuess(guess) { 56 | let location = parseGuess(guess); 57 | 58 | if (location) { // if location != null 59 | let hit = ships[0].fire(location); 60 | // more here later 61 | } 62 | } 63 | 64 | // Parse a guess from the user 65 | // Updated in this step 66 | function parseGuess(guess) { 67 | const alphabet = ["A", "B", "C", "D", "E", "F", "G"]; 68 | if (guess === null || guess.length !== 2) { 69 | alert("Oops, please enter a letter and a number on the board."); 70 | } else { 71 | let firstChar = guess.charAt(0); 72 | // updated in this step 73 | let row = alphabet.indexOf(firstChar); 74 | let column = guess.charAt(1); 75 | 76 | if (isNaN(row) || isNaN(column)) { 77 | alert("Oops, that isn't on the board."); 78 | } else if (row < 0 || row >= boardSize || 79 | column < 0 || column >= boardSize) { 80 | alert("Oops, that's off the board!"); 81 | } else { 82 | return row + column; // location 83 | } 84 | } 85 | return null; 86 | } 87 | 88 | 89 | // Event handler to handle a click on the Fire button 90 | function handleFireButton() { 91 | let guessInput = document.getElementById("guessInput"); 92 | let guess = guessInput.value.toUpperCase(); 93 | 94 | processGuess(guess); 95 | 96 | guessInput.value = ""; 97 | } 98 | 99 | 100 | // init - called when the page has completed loading 101 | window.onload = init; 102 | 103 | function init() { 104 | // Fire! button onclick handler 105 | let fireButton = document.getElementById("fireButton"); 106 | fireButton.onclick = handleFireButton; 107 | 108 | generateShipLocations(); 109 | } 110 | 111 | 112 | function generateShipLocations() { 113 | ships[0].locations = generateShip(); 114 | console.log("Ship:", ships[0]); // cheater for testing 115 | } 116 | 117 | // READY BAKE 118 | function generateShip() { 119 | let direction = Math.floor(Math.random() * 2); 120 | let row, col; 121 | 122 | if (direction === 1) { // horizontal 123 | row = Math.floor(Math.random() * boardSize); 124 | col = Math.floor(Math.random() * (boardSize - shipLength + 1)); 125 | } else { // vertical 126 | row = Math.floor(Math.random() * (boardSize - shipLength + 1)); 127 | col = Math.floor(Math.random() * boardSize); 128 | } 129 | 130 | let newShipLocations = []; 131 | for (let i = 0; i < shipLength; i++) { 132 | if (direction === 1) { 133 | newShipLocations.push(`${row}${(col + i)}`); 134 | } else { 135 | newShipLocations.push(`${(row + i)}${col}`); 136 | } 137 | } 138 | return newShipLocations; 139 | } 140 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /battleship/battleship5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship 6 | 55 | 56 | 57 |

58 |

59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

89 | 93 |

94 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /battleship/battleship5.js: -------------------------------------------------------------------------------- 1 | // Ship is new this step 2 | class Ship { 3 | constructor() { 4 | this.locations = [0, 0, 0]; 5 | this.hits = ["", "", ""]; 6 | } 7 | 8 | fire(location) { 9 | let index = this.locations.indexOf(location); 10 | if (index >= 0) { 11 | this.hit(location); 12 | return true; 13 | } else { 14 | this.miss(location); 15 | return false; 16 | } 17 | } 18 | hit(location) { 19 | let index = this.locations.indexOf(location); 20 | if (this.hits[index] === "hit") { 21 | displayMessage("Oops, you already hit that location!"); 22 | } else { 23 | displayMessage("HIT!"); 24 | } 25 | this.hits[index] = "hit"; 26 | displayHit(location); 27 | if (this.isSunk()) { 28 | displayMessage("You sank my battleship!"); 29 | } 30 | } 31 | miss(location) { 32 | displayMiss(location); 33 | displayMessage("You missed"); 34 | } 35 | isSunk() { 36 | return this.hits.every((v) => v === "hit"); 37 | } 38 | } 39 | 40 | // Global variables 41 | const boardSize = 7; 42 | const shipLength = 3; 43 | const ships = [ new Ship() ]; // just one for now, more later! 44 | 45 | function displayMessage(msg) { 46 | let messageArea = document.getElementById("messageArea"); 47 | messageArea.innerHTML = msg; 48 | } 49 | function displayHit(location) { 50 | let cell = document.getElementById(location); 51 | cell.setAttribute("class", "hit"); 52 | } 53 | function displayMiss(location) { 54 | let cell = document.getElementById(location); 55 | cell.setAttribute("class", "miss"); 56 | } 57 | 58 | function processGuess(guess) { 59 | let location = parseGuess(guess); 60 | 61 | if (location) { // if location != null 62 | let hit = ships[0].fire(location); 63 | // more here later 64 | } 65 | } 66 | 67 | // Parse a guess from the user 68 | // Updated in this step 69 | function parseGuess(guess) { 70 | const alphabet = ["A", "B", "C", "D", "E", "F", "G"]; 71 | if (guess === null || guess.length !== 2) { 72 | alert("Oops, please enter a letter and a number on the board."); 73 | } else { 74 | let firstChar = guess.charAt(0); 75 | // updated in this step 76 | let row = alphabet.indexOf(firstChar); 77 | let column = guess.charAt(1); 78 | 79 | if (isNaN(row) || isNaN(column)) { 80 | alert("Oops, that isn't on the board."); 81 | } else if (row < 0 || row >= boardSize || 82 | column < 0 || column >= boardSize) { 83 | alert("Oops, that's off the board!"); 84 | } else { 85 | return row + column; // location 86 | } 87 | } 88 | return null; 89 | } 90 | 91 | 92 | // Event handler to handle a click on the Fire button 93 | function handleFireButton() { 94 | let guessInput = document.getElementById("guessInput"); 95 | let guess = guessInput.value.toUpperCase(); 96 | 97 | processGuess(guess); 98 | 99 | guessInput.value = ""; 100 | } 101 | 102 | 103 | // init - called when the page has completed loading 104 | window.onload = init; 105 | 106 | function init() { 107 | // Fire! button onclick handler 108 | let fireButton = document.getElementById("fireButton"); 109 | fireButton.onclick = handleFireButton; 110 | 111 | generateShipLocations(); 112 | } 113 | 114 | 115 | function generateShipLocations() { 116 | ships[0].locations = generateShip(); 117 | console.log("Ship:", ships[0]); // cheater for testing 118 | } 119 | 120 | // READY BAKE 121 | function generateShip() { 122 | let direction = Math.floor(Math.random() * 2); 123 | let row, col; 124 | 125 | if (direction === 1) { // horizontal 126 | row = Math.floor(Math.random() * boardSize); 127 | col = Math.floor(Math.random() * (boardSize - shipLength + 1)); 128 | } else { // vertical 129 | row = Math.floor(Math.random() * (boardSize - shipLength + 1)); 130 | col = Math.floor(Math.random() * boardSize); 131 | } 132 | 133 | let newShipLocations = []; 134 | for (let i = 0; i < shipLength; i++) { 135 | if (direction === 1) { 136 | newShipLocations.push(`${row}${(col + i)}`); 137 | } else { 138 | newShipLocations.push(`${(row + i)}${col}`); 139 | } 140 | } 141 | return newShipLocations; 142 | } 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /battleship/battleship6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship 6 | 55 | 56 | 57 |

58 |

59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

89 | 93 |

94 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /battleship/battleship6.js: -------------------------------------------------------------------------------- 1 | class Ship { 2 | constructor() { 3 | this.locations = [0, 0, 0]; 4 | this.hits = ["", "", ""]; 5 | } 6 | 7 | fire(location) { 8 | let index = this.locations.indexOf(location); 9 | if (index >= 0) { 10 | this.hit(location); 11 | return true; 12 | } else { 13 | this.miss(location); 14 | return false; 15 | } 16 | } 17 | hit(location) { 18 | let index = this.locations.indexOf(location); 19 | if (this.hits[index] === "hit") { 20 | displayMessage("Oops, you already hit that location!"); 21 | } else { 22 | displayMessage("HIT!"); 23 | } 24 | this.hits[index] = "hit"; 25 | displayHit(location); 26 | if (this.isSunk()) { 27 | displayMessage("You sank my battleship!"); 28 | shipsSunk++; 29 | } 30 | } 31 | miss(location) { 32 | displayMiss(location); 33 | displayMessage("You missed"); 34 | } 35 | isSunk() { 36 | return this.hits.every((v) => v === "hit"); 37 | } 38 | 39 | // READY BAKE - new this step 40 | doesCollide(locations) { 41 | for (let i = 0; i < locations.length; i++) { 42 | if (this.locations.includes(locations[i])) { 43 | return true; 44 | } 45 | } 46 | return false; 47 | } 48 | } 49 | 50 | // Global variables 51 | const boardSize = 7; 52 | const shipLength = 3; 53 | const numShips = 3; // new this step 54 | let shipsSunk = 0; // new this step 55 | const ships = [ new Ship(), new Ship(), new Ship() ]; // updated for this step 56 | 57 | function fire(location) { 58 | for (let i = 0; i < numShips; i++) { 59 | let hit = ships[i].fire(location); 60 | if (hit) { 61 | return true; 62 | } 63 | } 64 | return false; 65 | } 66 | 67 | function displayMessage(msg) { 68 | let messageArea = document.getElementById("messageArea"); 69 | messageArea.innerHTML = msg; 70 | } 71 | function displayHit(location) { 72 | let cell = document.getElementById(location); 73 | cell.setAttribute("class", "hit"); 74 | } 75 | function displayMiss(location) { 76 | let cell = document.getElementById(location); 77 | cell.setAttribute("class", "miss"); 78 | } 79 | 80 | function processGuess(guess) { 81 | let location = parseGuess(guess); 82 | if (location) { 83 | let hit = fire(location); 84 | if (hit && (shipsSunk === numShips)) { 85 | displayMessage(`You sank all my battleships`); 86 | } 87 | } 88 | } 89 | 90 | // Parse a guess from the user 91 | // Updated in this step 92 | function parseGuess(guess) { 93 | const alphabet = ["A", "B", "C", "D", "E", "F", "G"]; 94 | if (guess === null || guess.length !== 2) { 95 | alert("Oops, please enter a letter and a number on the board."); 96 | } else { 97 | let firstChar = guess.charAt(0); 98 | // updated in this step 99 | let row = alphabet.indexOf(firstChar); 100 | let column = guess.charAt(1); 101 | 102 | if (isNaN(row) || isNaN(column)) { 103 | alert("Oops, that isn't on the board."); 104 | } else if (row < 0 || row >= boardSize || 105 | column < 0 || column >= boardSize) { 106 | alert("Oops, that's off the board!"); 107 | } else { 108 | return row + column; // location 109 | } 110 | } 111 | return null; 112 | } 113 | 114 | 115 | // Event handler to handle a click on the Fire button 116 | function handleFireButton() { 117 | let guessInput = document.getElementById("guessInput"); 118 | let guess = guessInput.value.toUpperCase(); 119 | 120 | processGuess(guess); 121 | 122 | guessInput.value = ""; 123 | } 124 | 125 | 126 | // init - called when the page has completed loading 127 | window.onload = init; 128 | 129 | function init() { 130 | // Fire! button onclick handler 131 | let fireButton = document.getElementById("fireButton"); 132 | fireButton.onclick = handleFireButton; 133 | 134 | generateShipLocations(); 135 | } 136 | 137 | // READY BAKE 138 | function generateShipLocations() { 139 | let locations; 140 | for (let i = 0; i < numShips; i++) { 141 | do { 142 | locations = generateShip(); 143 | } while (collision(locations)); 144 | ships[i].locations = locations; 145 | } 146 | console.log("Ships array: ", ships); 147 | } 148 | 149 | function generateShip() { 150 | let direction = Math.floor(Math.random() * 2); 151 | let row, col; 152 | 153 | if (direction === 1) { // horizontal 154 | row = Math.floor(Math.random() * boardSize); 155 | col = Math.floor(Math.random() * (boardSize - shipLength + 1)); 156 | } else { // vertical 157 | row = Math.floor(Math.random() * (boardSize - shipLength + 1)); 158 | col = Math.floor(Math.random() * boardSize); 159 | } 160 | 161 | let newShipLocations = []; 162 | for (let i = 0; i < shipLength; i++) { 163 | if (direction === 1) { 164 | newShipLocations.push(`${row}${(col + i)}`); 165 | } else { 166 | newShipLocations.push(`${(row + i)}${col}`); 167 | } 168 | } 169 | return newShipLocations; 170 | } 171 | 172 | function collision(locations) { 173 | for (let i = 0; i < numShips; i++) { 174 | let ship = ships[i]; 175 | if (ship.doesCollide(locations)) { 176 | return true; 177 | } 178 | } 179 | return false; 180 | } 181 | 182 | -------------------------------------------------------------------------------- /battleship/board.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bethrobson/JavaScriptBootcamp_OLD/ad4e86fe33ba95a8ec9046711f632b82d32de3a7/battleship/board.jpg -------------------------------------------------------------------------------- /battleship/miss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bethrobson/JavaScriptBootcamp_OLD/ad4e86fe33ba95a8ec9046711f632b82d32de3a7/battleship/miss.png -------------------------------------------------------------------------------- /battleship/ship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bethrobson/JavaScriptBootcamp_OLD/ad4e86fe33ba95a8ec9046711f632b82d32de3a7/battleship/ship.png -------------------------------------------------------------------------------- /bottles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 99 Bottles of Beer 6 | 24 | 25 | 26 |

99 Bottles of Beer

27 | 28 | 29 | -------------------------------------------------------------------------------- /car.js: -------------------------------------------------------------------------------- 1 | let chevy = { 2 | make: "Chevy", 3 | model: "Bel Air", 4 | year: 1957, 5 | color: "red", 6 | passengers: 2, 7 | convertible: false, 8 | mileage: 1021 9 | }; 10 | 11 | console.log("Car make:", chevy.make); 12 | 13 | // change the passengers property to 4 14 | chevy.passengers = 4; 15 | 16 | // add a new property, horsepower 17 | chevy.horsepower = 140; 18 | 19 | console.log(chevy); 20 | 21 | const mini = { 22 | make: "Mini", 23 | model: "Mark I", 24 | year: 1959, 25 | color: "red", 26 | passengers: 4, 27 | convertible: false, 28 | mileage: 998 29 | }; 30 | 31 | // mini = 3; // error! can't reassign a const 32 | 33 | // ...but we can change properties and add new properties 34 | mini.color = "blue"; 35 | mini.horsepower = 180; 36 | 37 | function changeCar(car) { 38 | console.log(car); 39 | car = 10; 40 | console.log(car); 41 | } 42 | 43 | function changeMileage(car) { 44 | car.mileage = car.mileage + 100; 45 | } 46 | 47 | let fiat = { 48 | make: "Fiat", 49 | model: "500", 50 | year: 1957, 51 | color: "Medium Blue", 52 | passengers: 2, 53 | convertible: false, 54 | mileage: 88000, 55 | drive: function() { 56 | alert("zoom zoom"); 57 | } 58 | }; 59 | 60 | // fiat with more methods... 61 | let fiat = { 62 | make: "Fiat", 63 | model: "500", 64 | year: 1957, 65 | color: "Medium Blue", 66 | passengers: 2, 67 | convertible: false, 68 | mileage: 88000, 69 | started: false, 70 | start: function() { 71 | started = true; 72 | }, 73 | stop: function() { 74 | started = false; 75 | }, 76 | drive: function() { 77 | if (started) { 78 | alert("zoom zoom"); 79 | } else { 80 | alert("You need to start the engine first."); 81 | } 82 | } 83 | }; 84 | 85 | fiat.drive(); // error! Uncaught reference error, started 86 | 87 | 88 | // corrected fiat, using this 89 | let fiat = { 90 | make: "Fiat", 91 | model: "500", 92 | year: 1957, 93 | color: "Medium Blue", 94 | passengers: 2, 95 | convertible: false, 96 | mileage: 88000, 97 | started: false, 98 | start: function() { 99 | this.started = true; 100 | }, 101 | stop: function() { 102 | this.started = false; 103 | }, 104 | drive: function() { 105 | if (this.started) { 106 | alert("zoom zoom"); 107 | } else { 108 | alert("You need to start the engine first."); 109 | } 110 | } 111 | }; 112 | 113 | 114 | -------------------------------------------------------------------------------- /car2.js: -------------------------------------------------------------------------------- 1 | let chevy = { 2 | make: "Chevy", 3 | model: "Bel Air", 4 | year: 1957, 5 | color: "red", 6 | passengers: 2, 7 | convertible: false, 8 | mileage: 1021, 9 | started: false, 10 | start: function() { 11 | this.started = true; 12 | }, 13 | stop: function() { 14 | this.started = false; 15 | }, 16 | drive: function() { 17 | if (this.started) { 18 | alert("zoom zoom"); 19 | } else { 20 | alert("You need to start the engine first."); 21 | } 22 | } 23 | }; 24 | 25 | let cadi = { 26 | make: "GM", 27 | model: "Cadillac", 28 | year: 1955, 29 | color: "tan", 30 | passengers: 5, 31 | convertible: false, 32 | mileage: 12892, 33 | started: false, 34 | start: function() { 35 | this.started = true; 36 | }, 37 | stop: function() { 38 | this.started = false; 39 | }, 40 | drive: function() { 41 | if (this.started) { 42 | alert("zoom zoom"); 43 | } else { 44 | alert("You need to start the engine first."); 45 | } 46 | } 47 | }; 48 | 49 | let taxi = { 50 | make: "Webville Motors", 51 | model: "Taxi", 52 | year: 1955, 53 | color: "yellow", 54 | passengers: 4, 55 | convertible: false, 56 | mileage: 281341, 57 | started: false, 58 | start: function() { 59 | this.started = true; 60 | }, 61 | stop: function() { 62 | this.started = false; 63 | }, 64 | drive: function() { 65 | if (this.started) { 66 | alert("zoom zoom"); 67 | } else { 68 | alert("You need to start the engine first."); 69 | } 70 | } 71 | }; 72 | 73 | let fiat = { 74 | make: "Fiat", 75 | model: "500", 76 | year: 1957, 77 | color: "Medium Blue", 78 | passengers: 2, 79 | convertible: false, 80 | mileage: 88000, 81 | started: false, 82 | start: function() { 83 | this.started = true; 84 | }, 85 | stop: function() { 86 | this.started = false; 87 | }, 88 | drive: function() { 89 | if (this.started) { 90 | alert("zoom zoom"); 91 | } else { 92 | alert("You need to start the engine first."); 93 | } 94 | } 95 | }; 96 | 97 | cadi.start(); 98 | cadi.drive(); 99 | cadi.stop(); 100 | 101 | chevy.start(); 102 | chevy.drive(); 103 | chevy.stop(); 104 | 105 | taxi.start(); 106 | taxi.drive(); 107 | taxi.stop(); 108 | 109 | -------------------------------------------------------------------------------- /code.js: -------------------------------------------------------------------------------- 1 | let access = document.getElementById("code9"); 2 | let code = access.innerHTML; 3 | code = code + " midnight"; 4 | alert(code); 5 | 6 | -------------------------------------------------------------------------------- /conditionals.js: -------------------------------------------------------------------------------- 1 | let price = 5.00; 2 | 3 | if (price < 5.00) { 4 | console.log("Item on sale!"); 5 | } else if (price == 5.00) { 6 | console.log("Item is regular price."); 7 | } else { // price > 5.00 8 | console.log("Item is expensive!"); 9 | } 10 | 11 | price = 7.00; 12 | 13 | if (price <= 5.00) { 14 | console.log("Item on sale!"); 15 | } else { 16 | console.log("Item is full price."); 17 | } 18 | -------------------------------------------------------------------------------- /crackCode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dr. Evel's Secret Code Page 6 | 7 | 8 |

The eagle is in the

9 |

The fox is in the

10 |

snuck into the garden last night.

11 |

They said it would rain

12 |

Does the red robin crow at

13 |

Where can I find Mr.

14 |

I told the boys to bring tea and

15 |

Where's my dough? The cake won't

16 |

My watch stopped at

17 |

barking, can't fly without umbrella.

18 |

The green canary flies at

19 |

The oyster owns a fine

20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /dogObject.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Objects 6 | 7 | 8 |

Objects

9 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /dogObject2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Objects from literals and classes 6 | 7 | 8 |

Objects from literals and classes

9 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /dogObject3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Object Methods 6 | 7 | 8 |

Object Methods

9 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /emot.js: -------------------------------------------------------------------------------- 1 | let emot = "XOxxOO"; 2 | let hugs = 0; 3 | let kisses = 0; 4 | 5 | emot = emot.trim(); 6 | emot = emot.toUpperCase(); 7 | 8 | for (let c in emot) { 9 | if (emot.charAt(c) === "X") { 10 | hugs++; 11 | } else if (emot.charAt(c) === "O") { 12 | kisses++; 13 | } 14 | } 15 | console.log(`${hugs} hugs and ${kisses} kisses`); 16 | 17 | -------------------------------------------------------------------------------- /first.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | First JavaScript 6 | 10 | 11 | 12 |

Playing with JavaScript

13 |

We'll add some things here later...

14 | 15 | 16 | -------------------------------------------------------------------------------- /first.js: -------------------------------------------------------------------------------- 1 | alert("Hi! I'm an alert from JavaScript"); 2 | console.log("Hi! I'm a console message from JavaScript"); 3 | 4 | -------------------------------------------------------------------------------- /first2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | First JavaScript 6 | 7 | 8 | 9 |

Playing with JavaScript

10 |

We'll add some things here later...

11 | 12 | 13 | -------------------------------------------------------------------------------- /first3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | First JavaScript 6 | 9 | 10 | 11 |

Playing with JavaScript

12 |

We'll add some things here later...

13 | 14 | 15 | -------------------------------------------------------------------------------- /first4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | First JavaScript 6 | 9 | 10 | 11 |

Exploring the console

12 | 13 | 14 | -------------------------------------------------------------------------------- /generic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Just a Generic Page 6 | 7 | 8 |

Just a generic heading

9 |

10 | Not a lot to read about here. I'm just an obligatory paragraph living in an example in a JavaScript course. I'm looking for something to make my life more exciting. 11 |

12 | 13 | 14 | -------------------------------------------------------------------------------- /generic2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Just a Generic Page 6 | 12 | 13 | 14 |

Just a generic heading

15 |

16 | Not a lot to read about here. I'm just an obligatory paragraph living in an example in a JavaScript course. I'm looking for something to make my life more exciting. 17 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /guess.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship Guess 6 | 8 | 9 | 10 |

Battleship Guess

11 |

Get the guess from the user and test

12 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /guess2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Battleship Guess 6 | 7 | 19 | 20 | 21 |

Battleship Guess

22 |

Get the guess from the user and test

23 |

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /loops.js: -------------------------------------------------------------------------------- 1 | let scoops = 0; 2 | while (scoops < 3) { 3 | scoops = scoops + 1; 4 | console.log("adding a scoop of icecream", scoops); 5 | } 6 | console.log(`total of ${scoops} scoops`); 7 | 8 | scoops = 3; 9 | for (let i = 0; i < scoops; i++) { 10 | console.log("adding a scoop of icecream", i); 11 | } 12 | console.log(`total of ${i} scoops`); // error! i is not defined outside the loop 13 | console.log(`total of ${scoops} scoops`); 14 | 15 | scoops = 0; 16 | while (scoops < 3) { 17 | scoops = scoops + 1; 18 | console.log("adding a scoop of icecream", scoops); 19 | if (scoops == 3) { 20 | let msg = "We're done"; 21 | console.log(msg); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /myFunctions.js: -------------------------------------------------------------------------------- 1 | // use constants for function expressions 2 | const exclamation = function(str) 3 | { return str + "!" ; }; 4 | console.log(exclamation("Hello")); 5 | 6 | exclamation = "!"; // error! 7 | 8 | // Zero parameters 9 | function bark() { 10 | let dogName = "Fido"; 11 | console.log(`${ dogName } says woof woof`); 12 | } 13 | bark(); 14 | 15 | // One parameter 16 | function barkOne(dogName) { 17 | console.log(`${ dogName } says woof woof`); 18 | } 19 | barkOne("Fido"); 20 | 21 | // Multiple parameters 22 | function dogsBark(dogName1, dogName2, dogName3) { 23 | console.log(`${ dogName1 } says woof woof`); 24 | console.log(`${ dogName2 } says woof woof`); 25 | console.log(`${ dogName3 } says woof woof`); 26 | } 27 | dogsBark("Fido", "Rover", "Spot"); 28 | 29 | // Pass by value 30 | let fido = "Fido"; 31 | let rover = "Rover"; 32 | let spot = "Spot"; 33 | function dogsChange(fido, rover, spot) { 34 | fido = "Good dog"; 35 | rover = "Bad dog!"; 36 | spot = "Sweet dog"; 37 | } 38 | dogsChange(fido, rover, spot); 39 | console.log(`Dog names: ${ fido }, ${ rover }, ${ spot }`); 40 | 41 | function barkReturn(dogName) { 42 | let sound = "woof woof"; 43 | let result = `${ dogName } says ${ sound }`; 44 | return result; 45 | } 46 | let fidoBark = barkReturn("Fido"); 47 | console.log(fidoBark); 48 | 49 | // Multiple parameters with one or more arguments 50 | function dogsBarkRest(...dogNames) { 51 | for (let i = 0; i < dogNames.length; i++) { 52 | console.log(`${ dogNames[i] } says woof woof`); 53 | } 54 | } 55 | dogsBarkRest("Fido", "Rover", "Spot"); 56 | 57 | // default values 58 | function dogBarkDefault(dogName = "Fido", dogAge = 3) { 59 | console.log(`${ dogName } is ${ dogAge } years old and says woof woof`); 60 | } 61 | dogBarkDefault(); 62 | dogBarkDefault("Rover"); 63 | dogBarkDefault("Spot", 5); 64 | 65 | let result; 66 | // return a value 67 | function circleArea(r) { 68 | let area = Math.PI * r * r; 69 | return area; 70 | } 71 | result = circleArea(3); 72 | console.log("Area:", result); 73 | 74 | // or a value from an expression 75 | function circleArea(r) { 76 | return Math.PI * r * r; 77 | } 78 | result = circleArea(3); 79 | console.log("Area:", result); 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /org.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Organizing Scripts 6 | 14 | 15 | 16 |

A Dog's Bark

17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /org2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Organizing Scripts 6 | 7 | 8 | 9 |

A Dog's Bark

10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /org3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Organizing Scripts 6 | 7 | 13 | 14 | 15 |

A Dog's Bark

16 |

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /parseGuess.js: -------------------------------------------------------------------------------- 1 | function parseGuess(guess) { 2 | if (guess === null || guess.length !== 2) { 3 | // alert the user 4 | alert("Oops, please enter a letter and a number on the board."); 5 | } else { 6 | let rowStr = guess.charAt(0); 7 | let row; 8 | // for now, do a simple test and convert, handle only A & B 9 | if (rowStr === "A") { 10 | row = 0; 11 | } else if (rowStr === "B") { 12 | row = 1; 13 | } // we'll handle all rows A-G later! 14 | let colStr = guess.charAt(1); 15 | let col = parseInt(colStr); 16 | // if row is still undefined, or col couldn't be parsed.... 17 | if (isNaN(row) || isNaN(col)) { 18 | alert("Oops, that isn't on the board."); 19 | } else { 20 | return `Row: ${ row }, Col: ${ col }`; 21 | } 22 | } 23 | return null; 24 | } 25 | -------------------------------------------------------------------------------- /planets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Planets 6 | 7 | 8 |

Green Planet

9 |

All is well

10 |

Red Planet

11 |

Nothing to report

12 |

Blue Planet

13 |

All systems A-OK

14 | 15 | 16 | -------------------------------------------------------------------------------- /planets2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Planets 6 | 11 | 12 | 13 |

Green Planet

14 |

All is well

15 |

Red Planet

16 |

Nothing to report

17 |

Blue Planet

18 |

All systems A-OK

19 | 20 | 21 | -------------------------------------------------------------------------------- /planets3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Planets 6 | 13 | 14 | 15 |

Green Planet

16 |

All is well

17 |

Red Planet

18 |

Nothing to report

19 |

Blue Planet

20 |

All systems A-OK

21 | 22 | 23 | -------------------------------------------------------------------------------- /planets4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Planets 6 | 9 | 20 | 21 | 22 |

Green Planet

23 |

All is well

24 |

Red Planet

25 |

Nothing to report

26 |

Blue Planet

27 |

All systems A-OK

28 | 29 | 30 | -------------------------------------------------------------------------------- /prompt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Prompt 6 | 8 | 9 | 10 |

Get a guess from the user

11 |

12 | Try the following: 13 |

14 |

A1
22
click Cancel
click OK without entering anything

20 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /prompt2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Prompt: Convert a number to a string 6 | 8 | 9 | 10 |

Get a guess from the user

11 |

12 |

13 |

A1
22
click Cancel
click OK without entering anything

19 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /punc.js: -------------------------------------------------------------------------------- 1 | const exclamation = function(str) { 2 | return str + "!" ; 3 | }; 4 | 5 | const question = function(str) { 6 | return str + "?" ; 7 | }; 8 | 9 | const quote = function(str) { 10 | return '

' + str + '

'; 11 | }; 12 | 13 | function punctuate(sentence, punctuation) { 14 | return punctuation(sentence); 15 | } 16 | 17 | console.log(punctuate("Carpe diem", quote)); 18 | 19 | 20 | -------------------------------------------------------------------------------- /scope.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scope 6 | 35 | 36 | 37 |

Variable scope

38 |

Global, or block (function, or statement)

39 | 40 | 41 | -------------------------------------------------------------------------------- /shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Shadowed variables 6 | 7 | 8 |

Shadowed variables

9 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /tf.js: -------------------------------------------------------------------------------- 1 | // try for 0, 1, "hi", "", null, undefined, true, false, and NaN 2 | if (true) { 3 | console.log("It's truthy"); 4 | } else { 5 | console.log("It's falsey"); 6 | } 7 | -------------------------------------------------------------------------------- /timer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Just a Generic Page 6 | 21 | 22 | 23 |

Just a generic heading

24 |

25 | Not a lot to read about here. I'm just an obligatory paragraph living in an example in a JavaScript course. I'm looking for something to make my life more exciting. 26 |

27 | 28 | 29 | -------------------------------------------------------------------------------- /timer.js: -------------------------------------------------------------------------------- 1 | setTimeout(wakeUpUser, 5000); 2 | function wakeUpUser() { 3 | alert("Are you going to stare at this boring page forever?"); 4 | } 5 | --------------------------------------------------------------------------------