Overview of Our Class and JavaScript Programming :: Instructor Videos

• Welcome and Introduction to our Class (16:00)
  Overview and introduction to our class website, syllabus, and materials.
• What is JavaScript? (12:28)
  What is JavaScript? Where did it come from? What can you do with it?

• The Language of Programming (8:56)
  What is a program? The JavaScript language versus the English language

Hello World

• Where To Put Your Code (14:20)
  Hello world, <script tags>, inline vs. external code
• Output and Console (14:56)
  Hello World x 4 (alert, console.log(), document.write, innerHTML) and the browser console

---

Exercise #1 - Canvas Drawing - Instructor Videos

• Introduction to Exercise #1, Algorithms, and Thinking in Code (17:45)

• Introduction to Canvas (5:48)
• Setup and Basic Lines (13:56)
• Creating Rectangles - Fill and Stroke (10:32)
• Color and Alpha (17:30)
• Line Widths and Properties (13:49)
• Circles, Arcs, Radians (19:01)
• Creating Custom Functions for Drawing (30:20)

---

Introduction to Exrercise #2, my videos, the codeLibrary

• Introduction to the codeLibrary, Exercise #2, + more (10:13)
  Introduction to the Craps Game Exercise and how to engage with videos

Linting and JavaScript Linting Errors in Dreamweaver

• Introduction to Linting and Linting Errors (7:12)
  Linting, linting errors, and getting rid of unwanted errors such as no-console by configuring Dreamweaver preferences

Variables and Values

• Variables and Values, Part 1 (10:29)
  Variable declaration, initialization, and naming
• Variables and Values, Part 2 (15:32)
  Data types, variable scope, constants
• Variables and Values: let vs. var (16:18)
  The let statement vs. the var statement

Numbers and Math

• Numbers and Math, Part 1 (15:13)
  The Number data type, arithmetic operators, modulus, increment/decrement
• Numbers and Math, Part 2 (25:20)
  Operator precedence, Number methods, NaN, converting between strings and numbers
• Numbers and Math, Part 3 (24:32)
  Math object methods, Math.random(), simulating dice rolling

Conditional Logic and Decision Making

• Conditionals - If Else Statements, Part 1 (21:00)
  If, else if, else conditional statements, program flow, comparison operators
• Conditionals - If Else Statements, Part 2 (15:50)
  Logical operators, compound/complex logic, what evaluates to true and false
• Conditionals - The Conditional (?) Operator, Part 3 (optional) (12:50)
  The conditional operator (aka ternary opearator) shorthand, plus using Date() and setting page background colors through JS

---

Working with Functions

• Functions, Part 1 (11:12)
  Introduction to functions. Declaring and calling functions.
• Functions, Part 2 (12:23)
  Using parameters and passing arguments. Working with multiple arguments (examples including a keepScore() function and a madLibs() generator)
• Functions, Part 3 (17:06)
  Returning values from functions (examples including functions for inserting copyright dates and Celsius to Fahrenheit converters)
• Functions, Part 4 (19:39)
  Function expressions, immediately invoked function expressions (iife), recursive functions.

Simulating a Game of Craps

• Craps, Part 1 (6:13)
  Variables and Math.random() to simulate a dice roll
• Craps, Part 2 (19:47)
  Visualizing the output of the dice with text and image (image.src). Random images.
• Craps, Part 3 (15:24)
  Visualizing output with sprite sheet image and CSS background position (setAttribute)
• Craps, Part 4 (21:17)
  Understanding the game logic, using if conditional statements and a rollDice() function
• Craps, Part 5 (19:51)
  Making the game interactive so the user can play, using addEventListener to add click events
• Craps, Part 6 (15:08)
  Adding user feedback, creating win() and lose() functions.
• Craps, Part 7 (8:08)
  Tracking bets and the chip stack using variables.
• Craps, Part 8 (19:41)
  Using an input field to enable the user to change the bet amount and exacting and validating the value of this field (value, paseInt, isNaN).

• Craps, Part 9 - Bonus (24:37)
  Creating a better UX. Animating the dice roll with setInterval().

• Craps, Part 10 - Bonus (9:17)
  Audio output with the Web Speech API.
• Craps, Part 11 - Bonus - Improving the UI (12:01)
  Improving the user Interface with Photoshop for visual design and CSS for style and formatting.

---

Looping and Iteration

• Loops, Part 1 - While Loops (16:10)
  Introduction to looping and iteration. The while loop.
• Loops, Part 2 - Do While Loops (10:42)
  Do while loops.
• Loops, Part 3 - For Loops, Break and Continue (23:45)
  The for loop. The break and continue keywords. Infinite loops.
• Loops - Code Challenge/Example (18:54)
  Using a nested loop to create a times table.

---

On Computational Thinking and Problem Solving

• Problem Solving and Computational Thinking (18:09)
  Discussion of programming process, problem solving, pseudocode, and flowcharts.
• Review - An Introduction to Computational Thinking - BBC
• Review - What is Computational Thinking - Google Ed including watching the first video on Solving Problems at Google Using Computational Thinking (3:43)

Generative Art — Drawing to <canvas> using JavaScript Variables, Loops, Functions, Conditionals, and Randomization

• Generative Art, Part 1 (18:10)
  Using variables and loops to draw to lines to canvas.
• Generative Art, Part 2 (20:08)
  Using randomization and functions.
• Generative Art, Part 3 (25:10)
  Adding complexity, conditional logic, rectangles.
• Generative Art, Part 4 (31:54)
  Adding color palettes, half circles, increasing sophistication, refresh on click.
• To follow along with these videos tutorials, you are welcome to use this starter file and code (generative.zip)

---

Strings and String Methods

• Strings, Part 1 - Basics (22:33)
  String basics, escaping, concatenation, type conversion.
• Strings, Part 2 - Properties and Methods (20:51)
  Length, toUpperCase(), toLowerCase(), charAt(), indexOf(), and replace().
• Strings, Part 3 - Methods (18:18)
  splice(), substr(), trim(), search(), split(), and other string manipulation methods.
• Strings, Part 4 - ES6 Updates - Template Strings and New Methods (25:23)
  Template literals, using the ${ } syntax, startsWith(), endsWith(), includes(), repeat().

Working with Arrays

• Arrays, Part 1 - Introduction (12:13)
  Introduction to arrays. Accessing array data. Arrays with values of varying types. Short intro to multidimensional arrays.
• Arrays, Part 2 - Creating (11:26)
  Creating arrays. Array Constructors and Array Literals. Accessing array elements by their index.
• Arrays, Part 3 - Looping (14:38)
  The array length property. Looping through arrays with the for loop and for in loop.
• Arrays, Part 4 - Methods (16:41)
  Array methods including toString(), join(), sort(), reversw(), concat(), and slice().
• Arrays, Part 5 - Methods (16:37)
  Array methods including push(), pop(), shift(), unshift(), and splice().

Interactive Quiz Example using Arrays, Loops, and Functions (and Prompt)

• Quiz Example, Part 1 (10:42)
  Using prompt() for output/input and basic quiz logic.
• Quiz Example, Part 2 (20:23)
  Using arrays and multidimensional arrays to store quiz questions, for loops to access the questions, and a custom function to ask the questions and check the answer logic.

Interactive Guessing Game Example

• Guess The Number, Part 1 (22:00)
  The set up, number randomization, getting the value of an input field, and basic game logic.
• Guess The Number, Part 2 (24:01)
  Finalizing game logic, tracking guesses, and adding and visualizing output.
• Download sample HTML, CSS and image files for this example (.zip)

---

The Document Object Model (DOM)

• The DOM and the DOM Tree, Part 1 - Introduction (10:10)
  Introduction to the Document Object Model, DOM Tree structure, and terminology.
• The DOM, Part 2 - Accessing and Manipulating Single Objects (13:01)
  Working with getElementById() and querySelector(). Setting attributes and CSS (including textContent, color, fontSize).
• The DOM, Part 3- Accessing Multiple Objects (20:10)
  getElementsByTagName(), getElementsByClassName(), and querySelectorAll(). Working with items in HTML collections/node list arrays using array operators and the item() method. Setting attributes and CSS, including className.
• The DOM, Part 4 - Looping through and Manipulating Multiple Objects (14:08)
  Using for loops to loop through and affect all items in a node list/array. Setting and testing for attributes.

Events and Event Handling

• Events and Event Handling, Part 1 - Introduction (11:06)
  Introduction to Events, Event Handlers, and Listeners.
• Events and Event Handling, Part 2 - Methods (13:18)
  Event Handling Methods, including HTML Event Handlers, Traditional DOM Event Handlers, and Event Listeners using the addEventListener() method.
• Events and Event Handling, Part 3 - The Event Object (e) (14:35)
  Using AddEventListener with the Event Object. Listening for events on 'parents' and using the event object target (e.target) to determine the targeted child of the event.
• Events and Event Handling, Part 4 - Looping through Objects on a Click (5:47)
  Looping through objects to add and/or remove classes (className).
• Events and Event Handling, Part 4B - Quiz Exploration (34:39)
  A sample quiz of sorts that extends part 4 by adding a submit button that checks which boxes have a "selected" class assigned and using that information to increment score/personality variables.
• Events and Event Handling, Part 5 - Event Propagation (15:13)
  Understanding event propagation, the useCapture parameter, capturing and bubbling on the event chain, and stopPropagation() and preventDefault().
• Events and Event Handling, Part 6 - Mouse Events (17:11)
  Exploring mouse events including click, dblclick, mousedown, mouseup, mouseover, mouseout, and mousemove. Also, generating random color.
• Events and Event Handling, Part 7 - Keyboard Events (14:54)
  Exploring keyboard events including keydown and keyup as well as keyCodes. Also, the removeEventListener method .

---

Interactive Quiz - Mobile Application Example

• Interactive Quiz Application, Part 1 (9:10)
  Introduction to Quiz Application. Review of HTML and CSS provided.
• Interactive Quiz Application, Part 2 (11:55)
  Beginning the JavaScript. A Q&A array. Populating question and answers.
• Interactive Quiz Application, Part 3 (16:18)
  Creating a multidimensional array with all questions. Creating an askQuestion() function.
• Interactive Quiz Application, Part 4 (15:07)
  Adding event listeners on answer choices. Evaluating right and wrong answers and providing visual feedback via classes styled with CSS.
• Interactive Quiz Application, Part 5 (17:15)
  Moving on to next questions. Tracking score.
• Interactive Quiz Application, Part 6 (16:22)
  Ending the quz, outputting results, retaking the quiz, and final code review.
  
  
• Download sample HTML, CSS and image files for this quiz example (.zip)

 

JavaScript Bell Choir Interactive Quiz Game - Bonus Example

• JavaScript Bell Choir Quiz Game, Part 1 (2:39)
  Overview and introduction to what we will be building.
• JavaScript Bell Choir Quiz Game, Part 2 (14:52)
  HTML5 <audio> and JavaScript. Triggering audio with mouse and keyboard events. Working with keyCodes to determine keys pressed.
• JavaScript Bell Choir Quiz Game, Part 3 (22:43)
  Playing multiple sounds. Working with conditional statements. Getting the className of the currentTarget to determine the notes that should be played. Using window[“property”].
• JavaScript Bell Choir Quiz Game, Part 4 (27:59)
  Adding visual output for each bell. Adding and removing classes. Animating using CSS transitions. Responding to the transitionend event.
• JavaScript Bell Choir Quiz Game, Part 5 (26:40)
  Adding the quiz game logic. Tracking notes in arrays. Looping through and comparing arrays to see if they match.
• JavaScript Bell Choir Quiz Game, Part 6 (15:10)
  Visual output to indicate current song, errors, and scores. Working with the setTimeout method.
• JavaScript Bell Choir Quiz Game, Part 7 (24:35)
  Making our code more modular to allow for additional questions/songs. Final code review.

• Download: Sample HTML, CSS, audio, and image files for this example (.zip)

---

jQuery

• jQuery - Introduction (7:10)
  What is jQuery and why use it.
• jQuery - Basics (15:34)
  Including the jQuery library. jQuery syntax. Executing when the DOM is ready.
• jQuery - Selectors (25:09)
  Working with CSS selectors and other advanced jQuery-specific selectors.
• jQuery - HTML (29:07)
  Getting and setting HTML content and atrributes, including text(), html(), val(), attr(), and wrap().
• jQuery - CSS (16:23)
  Getting and setting CSS properties using the css() method.
• jQuery - Adding and Remove Classes (13:23)
  Exploring CSS styles by using addClass(), removeClass(), and toggleClass().
• jQuery - Events (26:34)
  jQuery event handling methods, on(), event objects, and preventDefault().
• jQuery - Effects and Animation (21:35)
  Show/hide, sliding, fading, toggling, and custom animation() of CSS properties.
• jQuery - More Advanced Effects and Animation (29:12)
  More animation(), chaining, callback functions, easing, animating color, and other jQuery UI library enhancements.

---

jQuery Interactive Slideshow Example #1 with Thumbnails and Foward/Next Buttons - Execise #5A Demos

• Slideshow Example - Part 1 (27:02)
  Cross-fading between images in an animation loop.
• Slideshow Example - Part 2 (13:48)
  Adding pause/play interactivity.
• Slideshow Example - Part 3 (19:00)
  Adding previous and next interactive buttons.
• Slideshow Example - Part 4 (37:24)
  Adding interactive thumbnails.

jQuery Slideshow Example #2 with Pause/Play Interactivity - Execise #5A Demos

• Simple Slideshow - Part 1 - Animation (27:11)
  Cross-fading between images in an animation loop; DOM traversal and manipulation with advanced selectors, next(), end(), and append().
• Simple Slideshow - Part 2 - Interactivity (18:32)
  Adding pause/play interactivity to the slideshow.

---

Applying jQuery to Create a List-Making Web App (Exercise #6 Demos)

• List-O-Mania - Overview and Introduction - Part 1 (9:34)
  Introduction to the List-O-Mania jQuery web app exercise, including requirements and options.
• List-O-Mania - HTML Setup - Part 2 (11:52)
  HTMl setup and needed tags. Including the jQuery libary.
• List-O-Mania - Adding and Removing List Items with jQuery - Part 3 (20:35)
  Adding event listeners to append() or remove() list items. Review of $(this). Review of the val() method for getting or setting the value of input fields.
• List-O-Mania - CSS Styling - Part 4 (18:28)
  Review of CSS for styling the list and app.
• List-O-Mania - Adding UI Animations - Part 5 (11:11)
  Adding UI animations when adding or removing items - using animate() and slideDown().
• List-O-Mania - Adding a Delete button - Part 6 (20:48)
  Appending a delete button. Adding special characters via JS.
• List-O-Mania - Selecting List Items - Part 7 (15:47)
  Adding the ability to select (or check off) list items.
• List-O-Mania - Drag and Drop and jQuery UI - Part 8 (15:06)
  Using the jQuery UI library and the sortable() function to add drag and drop functionality to the list items. Using Touch Punch for mobile optimization of jQuery UI components.

The HTML5 Web Storage APIs (localStorage) and the List-O-Mania App

• List-O-Mania - Overview of using the HTML5 Web Storage APIs - Part 9 (18:56)
  Using the Web Storage API to remember information. Local Storage vs. Session Storage. Getting and setting items with localStorage.
• List-O-Mania - JSON, Arrays, and Local Storage - Part 10 (25:58)
  Using JSON to stringify() and parse() arrays in order to store more complex information using localStorage. Using arrays from storage to populate list content.
• List-O-Mania - Applying local Storage to the List-O-Mania App - Part 11 (13:59)
  Code tour and overview of applying localStorage to the List-O-Mania web app.

---

Generating Sprite Sheets for Animation (for Exercise #7)

• Generating a Sprite Sheet with Photoshop (9:34)
  Generating a .png sprite sheet from Photoshop layers.
• Generating a Sprite Sheet with Animate/Flash (15:29)
  Generating a sprite sheet from a Flash movieclip animation.

---

Drawing Images and Animating Sprites with HTML5 Canvas and JavaScript (Exercise #7 Demos)

• Sprite Sheet Animation - Part 1 - Drawing to Canvas (17:48)
  Using the drawImage() method and its parameters.
• Sprite Sheet Animation - Part 2 - Working with a Sprite Sheet (13:55)
  Rendering sprite sheet frames and creating a click-based animation to cycle frames.
• Sprite Sheet Animation - Part 3 - requestAnimationFrame (7:42)
  Creating an animation loop with the requestAnimationFrame() method.
• Sprite Sheet Animation - Part 4 - Controlling Sprite Animation Speed (8:06)
  Using a "Frame Factor" and modulo to control sprite animation speed/updates.
• Sprite Sheet Animation - Part 5 - Moving the Sprite (10:17)
  Moving the x, y position of the sprite on the canvas and changing the speed.
• Sprite Sheet Animation - Part 6 - Using a New Sprite (12:33)
  Adjusting parameters and creating additional variables to animate a game sprite with alpha transparency.
• Sprite Sheet Animation - Part 7 - Direction and Bounding (19:42)
  Exploring direction and animation bounds.
• Sprite Sheet Animation - Part 8 - Keyboard Controls (29:25)
  Adding interactivity and keyboard controls to the character animation/movement.

Sprite Sheet Image Files Used in Above Examples:

• spriteImageAssets.zip

---

Drawing Images, Animating Sprites, and HTML5 Gaming with Canvas and JavaScript (Demos for turning Exercise #7 into more of a Final Project)

• Sprite/Game Animation - Part 9 - Overview and Objects (17:06)
  Picking up where we left off, but moving towards more modular and efficient game code with the use of objects.
• Sprite/Game Animation - Part 10 - Creating a Sprite Object Prototype (20:01)
  Creating a constructor function for a sprite object prototype that will make it easier to animate multiple objects/characters.
• Sprite/Game Animation - Part 11 - Sprites Array (14:08)
  Creating and looping through a sprites array to draw all objects to canvas. Using the array to determine depth/stacking order.
• Sprite/Game Animation - Part 12 - Interactivity and Movement (24:51)
  Adding keyboard event listeners and interactive controls for animation and movement, including speed and friction.
• Sprite/Game Animation - Part 13 - Flying, Gravity, Jumping (14:50)
  Animating on the y access too with gravity for flying or jumping.
• Sprite/Game Animation - Part 14 - Bounding, Background Animation (24:21)
  Bounding the characters to the screen or returning to the other side. Animating backgrounds, looping backgrounds, and creating parallax scrolling effects.
• Sprite/Game Animation - Part 15 - Bullets and Shooting (29:57)
  Adding and animating multiple bullets by using and looping through a bullets array.
• Sprite/Game Animation - Part 16 - Removing Bullets and Hit Testing (30:02)
  Removing bullets and hit testing against other sprite objects.

Sprite Sheet Image Files Used in Above Examples:

• spriteImageAssets.zip