bocoup - Programming with Javascript

Concepts Covered

• Values and Variables
• Arithmetic Operators and the Math Object
• Strings
• Arrays
• Control Flow
• Functions
• Browser and DOM Manipulation

Setup Instructions

1. Download the class folder and place it on your Desktop.
   Unzip the file by double-clickling it.
2. Open your terminal and navigate to inside the class folder.
   If you are on a Mac, type cd ~/Desktop/class-folder
3. In your terminal, type npm install.
4. In your terminal, type npm install -g grunt-cli.
5. Start auto-reloading web-server for your exercise by typing grunt into your terminal.
6. Open http://localhost:8000 or http://localhost:8000/test in your browser.

Exercises

• 00- Game Loop

  Download

  Students will write a method to update the game board continuously.

• 01- Random Word

  Download

  Students will write logic to select a random element from an array.

• 02- Guess Letter

  Download

  Students will write logic to validate and record a guess.

• 03- Game State

  Download

  Students will write logic to determine if the game is in a winning, losing, or playing state.

• 04- Game State: Refactor

  Download

  Students will improve the logic for determining the state of the game by refactoring one method into discreet methods with a single responsibility that provide the same functionality with more flexibility.

• 05- Input

  Download

  Students will prompt the user for a guess and register it with the game.

• 06- Drawing

  Download

  Students will draw a hangman in the browser representing the current state of the game.

• 07- Complete

  Download

• 08- Capstone Projec't

  Download

• 09- Multifile

  Download

• 10- MVC

  Download

• 11- MVC Complete

  Download

Learning Objectives

Values and Variables

• store values in variables (01)
• store the return value of a function call in a variable (01)
• use comparison operators to store booelan values in variables (02)

Arithmetic Operators and the Math Object

• Use Math.random()to generate a random number (00)
• use the floormethod of theMath Objectto round a number (01)
• use arithmetic operators on variables (01)
• use the ++ shorthand to increment a value (03)

Strings

• call the toLowerCase method on String (02)
• call the indexOf method on a String (02)
• use regular expressions to validate user input (02)

Arrays

• create an empty array object (01)
• access the property length on an array (01)
• access a value in an array using bracket notation and an index (01)
• add elements to an array using the push function (03)
• use sliceto create a new array by selecting a portion of another array (06)
• use join to build a string from an array (06)

Control Flow

• use comparisons to change control flow using if...else statements (02)
• iterate over an array using a for loop (03)
• nest statements and loops to properly execute game logic (03)

Functions

• Call a function with a parameter (00)
• return a value from a function (01)
• define a function that takes an argument (04)
• define a function that returns a value (04)
• refactor a function into multiple functions to improve flexibility (04)

Browser and DOM Manipulation

• Select an element in the DOM with the getElementByIdfunction (00)
• Add content to the DOM using the innerHTML function (00)
• use alert to deliver information to the user in the browser (05)
• use prompt to receive user input in the browser (05)