Class Recaps – April 2016

Session 8 – Wednesday, May 12

We discussed Cross Origin Resource Sharing (CORS) headers and browser restrictions on AJAX requests.

We updated the APOD sample from session 7 to include a date picker input so we could update the picture after selecting a new date. We then added an AJAX request to the textbook quiz app so we could retrieve the quiz questions from a web server instead of embedding them in the JavaScript.

We looked at using local storage to save the high score of the quiz game and we also looked at the web browser’s geolocation features.

Session 7 – Wednesday, May 11

We applied the previous session’s concept of JavaScript objects to the textbook’s quiz game, creating a Game object with a set of prototype functions.

AJAX concepts were introduced using Postman and we developed a simple web page that would access NASA’s Astronomy Picture of the Day through an XmlHttpRequest and display it on the page.

Session 6 – Thursday, May 5

We skipped chapters 10 and 11 for now.

Chapter 12 introduces JavaScript objects and we used the animation sample from chapter 9 as a starting point for creating a JavaScript object that could manage a single box animation. This allowed us to very easily introduce multiple box animations on a single page. During our discussion of objects, we looked at how anonymous functions can be assigned as object properties, but then looked at the use of prototype functions and how they allow us to extend all instances of a particular type of object.

When specifying object functions as callback functions, we looked at the use of bind to ensure the correct this context was used when executing the function.

Session 5 – Wednesday, May 4

From chapter 9, we looked at the window object, and the use of timers in particular. We looked at the differences between timeouts and intervals and compared them to using animation frames. We used the animation sample in the book to practice working with timers. We looked the the issues that would appear if we wanted to add a second box to the page and animate it as well. We wrapped up our timer discussion by adding a countdown timer to the quiz sample from the textbook.

Session 4 – Thursday, April 28

We started class by taking a look at how we interact with some additional form elements (checkboxes, radio buttons, password text fields). Using a password input field, we looked at how we could listen to input events for the field and validate password requirements as the user typed in a password. We could report missing password restrictions such as length and numeric requirements without submitting the form back to the web server.

We worked through a CodePen quiz to get some more practice interacting with elements on a page.

Session 3 – Wednesday, April 27

We quickly recapped our lessons from chapter 5 on interacting with the DOM and began looking at Events in chapter 6. We saw how events allow us to respond to user interactions with the page content, whether it is clicking a button, entering text, or submitting a form. We looked at an example on CodePen that showed how event capturing and bubbling work. We updated the Ninja Quiz samples in the book to respond to the user clicking a start button and submitting an answer form.

Session 2 – Thursday, April 21

After some review of functions from the previous class and a recap of our work on the Quiz Ninja site, we began to look at DOM interactions from JavaScript. Using document.getElementById(), document.getElementsByTagName(), and document.getElementByClassName(), we can begin updating our web page from JavaScript.

We looked at using an element’s innerHTML and textContent properties to modify page content and updates the Quiz Ninja site to display the quiz questions on the web page instead of using an alert.

Session 1 – Wednesday, April 20

We introduced the JavaScript language, looking at how we add JavaScript to a web page. We started working with variables and started working on the first few steps for building the quiz web site in the textbook.

We looked at how functions allow us to break up a JavaScript application into smaller operations that can be executed as needed in our JavaScript code. Functions allow us to avoid repetitive code and they make our code more readable.

As part of using functions, we started looking at how variables are scoped in JavaScript. Variables declared within a function are only visible within that function.