Replace $.each with Array.prototype.forEach in JS3 (#339)

* Switch $.each with Array.prototype.forEach
and so dropping support for ie8

* Clarify the location of the forEach function

Author: trevorah

coaches/lesson-guide.md

@@ -147,7 +147,7 @@ of a tutorial the student should be focussing on.
   * changing elements with `text`, `val`, and `addClass`
   * adding event handlers with `on`
   * changing css properties with `css`
-  * `$.each`
+  * `Array.prototype.forEach`
   * `$(document).ready`
 * Know how to write event handlers for keyboard and mouse events
 * Know how to change web pages in response to events

examples/tv-schedule/script.js

@@ -23,7 +23,7 @@ function getGenres() {
     url: "http://www.bbc.co.uk/tv/programmes/genres.json"
   }).done(function(data) {
     console.log(data);
-    $.each(data.categories, function(index, item) {
+    data.categories.forEach(function(item) {
       $('#genres').append("<li id='"+ item.key +"'>" + item.title + "</li>");
     })
   }).fail(function() {
@@ -42,7 +42,7 @@ function getTomorrowsSchedule(genre) {
   }).done(function(data) {
     $(".spinner").remove();
     if (data.broadcasts.length > 0) {
-      $.each(data.broadcasts, function(index, episode) {
+      data.broadcasts.forEach(function(episode) {
         $("#programmes").append(processEpisode(episode));
       })
     } else {
@@ -63,7 +63,7 @@ function getUpcomingEpisodes(pid) {
   }).done(function(data) {
     $(".spinner").remove();
 
-    $.each(data.broadcasts, function(index, episode) {
+    data.broadcasts.forEach(function(episode) {
       $("#programmes").append(processEpisode(episode));
     })
   }).fail(function() {

examples/wishlist/script.js

@@ -15,7 +15,7 @@ function updateTotal() {
 }
 
 $(document).ready(function(){
-  $.each(wishes, function(index, element) {
+  wishes.forEach(function(element) {
     addToList(element);
   });
   updateTotal();

js/lesson3/tutorial.md

@@ -444,26 +444,22 @@ button. Make it do the following things:
 
 ### Try it out
 
-For this next part, we're going to use a feature of jQuery that isn't
-related to changing web pages. Open the javascript console. Start by
-defining an array:
+For this next part, we're going to use a function that belongs to arrays.
+Open the javascript console. Start by defining an array:
 
 ```js
 var words = ['these', 'are', 'some', 'words'];
 ```
 
-We're going to use the jQuery `$.each` function. This isn't related to
-the `$()` function, it takes an array and a function and calls the
-function once for each thing in the array. Try this:
+We're going to use your array's `forEach` function. You can use it to call another function once for each thing in the array. Try this:
 
 ```js
-$.each(words, function(index, word) {
-   console.log('Position ' + index + ': ' + word)
+words.forEach(function(word) {
+   console.log(word)
 });
 ```
 
-See how the function got called with `(0, 'these')`, then with `(1,
-'are')`, and so on? Make sure you understand what's happening
+See how the function got called with `'these'`, then with `'are'`, and so on? Make sure you understand what's happening
 here. Experiment with it, or ask your coach, if there's anything
 you're unsure about.
 
@@ -493,7 +489,7 @@ Pick a few colour codes you like and store them in an array:
 var colors = [ '22ac5e', 'd68236', '770077' ];
 ```
 
-Now you can use a `$.each` inside your `ready` function to call
+Now you can use a `colors.forEach` inside your `ready` function to call
 `addBox` for each color in this array. When you reload the page, you
 should see that all these colours have been added, without you needing
 to click on anything.
@@ -652,7 +648,7 @@ Here are the things you learned about in exercise 2:
 3. $(document).ready() lets you write code that runs after your page
    has loaded.
 
-4. $.each() lets you run some code for each thing in an array.
+4. forEach() lets you run some code for each thing in an array.
 
 # Links
 

js/lesson4/tutorial.md

@@ -289,7 +289,7 @@ function retrieveGenres() {
 
 > You can use `<title>` to display a humanly readable format of the Genre
 
-As you can see from the console, the resulting objects are returned inside an Array. We want to iterate over the list using the `$.each( )` function and add each item to the `#genres` list, as a **list item**. As we need to have access to the `key` as well, we can set that as the list item's `id`.
+As you can see from the console, the resulting objects are returned inside an Array. We want to iterate over the list using the native Array `forEach( )` function and add each item to the `#genres` list, as a **list item**. As we need to have access to the `key` as well, we can set that as the list item's `id`.
 
 Now that we have all the available genres, we can move on to making calls to the API using the genre to retrieve tomorrow's schedule!!