Week 7 - Events, Nested Loops, Callbacks and Closures

Nested Loops

It is a common thing for data structures to have Arrays inside an Array. Visually, you can think of this as a grid or table of data. There will be rows and columns.

To write loops that will traverse over the whole data structure, we can use nested loops. The outer loop looks at the rows. The inner loop looks at the columns.

Learn how to use nested loops

XML and JSON Validation

After you have created your XML or JSON files, you should ALWAYS validate your data.

You want to be sure that you have properly followed the standards.

Here are a couple websites that you can use to validate your data files.

XML validation

JSON validation

Callback Functions

In JavaScript, functions are considered to be first-class Objects. This means you can treat them like any other variable or Object. You can pass them to a function or return them from a function.

This affords us the ability to pass functions to other functions and let it decide if and when it wants to call the function being passed in.

Learn about Callback functions

Closures

Closures are a very important concept in Javascript. They have to do with how scope works in connect with functions and variables.

To really understand the value being saved or updated in a variable you need to understand its scope. To fully understand scope you need to understand what a closure is.

Learn about Closures

Chrome Dev Tools

Chrome comes with an extensive set of Developer Tools, built into the browser.

Here is the link to the official supporting guides

There are also excellent developer tools in MS Edge and Firefox, and to a lesser extent in Safari.

Adding and Removing Events

An Event is something that happens which can be tracked by the browser. It can be used to trigger functions to run. Here are some example situations.

1. The page finishes loading => run a function to fetch some data.
2. User clicked a button => run a function to toggle the visibility of a menu.
3. User typed a letter => run a function to do a search for content starting with that letter.
4. User swiped on their phone screen => run a function to see if that girl likes you too.

Learn how to add Event tracking to a page

Loading Events

Loading events happen with every file that a browser loads. Images, Stylesheets, Scripts and HTML files will all trigger load events.

How to listen for loading events

Mouse and Touch Events

There are quite a few mouse and touch events.

click, mousedown, mouseup, mousemove, mouseover, mouseout, focus, blur, dblclick, contextmenu, touchstart, touchmove, touchcancel

Learn more about Mouse and Touch events

Keyboard and Form Events

The keyboard events allow you to trigger code when the user is typing. You can wait for specific keys, keyboard controls for games, and handle form validation when the values of form fields changes.

Learn more about keyboard and form events

TODO

TODO Before next class

• If you have not read all these notes and watched the videos from this week, do that first.
• Finish and submit Hybrid 8 by Monday at 5pm.
• Finish and submit the exercises Exercise 11 - JS to JSON before 5pm on this Tuesday and Exercise 12 - Data Manipulation before 5pm on this Thursday.
  • Exercises page
• Complete Assignment 1 before this Friday at 11pm.
  • Assignments page
• Use the reading week as a chance to take a breath. Look back at everything you have learned so far. Next week we don't have classes. Take some time to look back at concepts you think you missed or didn't really understand at the time.