< and create your own JS set of exercises.
js-lessons is based on [learnrx](http://reactivex.io/learnrx/) functional programing exercise, available in
[learnrx-repo](http://reactivex.io/learnrx/), it uses [underscore](http://underscorejs.org/) to make it eficient, and
is compatible with markdown and jekyll too. Ahh we use [my-json](http://myjson.com/) to store exercises too, but you can
remove this part if you don't want to.
### Finishing the Interactive Exercises
js-lessons is not just a "tutorial", is much more than that, js-lessons is a **series of interactive exercises that you
can fill out right in your browser!** dude! It's awesome just edit the code according to the question and hit "Run",
if the code is working you can proceed to the next question, if don't the error will appear and you just need to
correct and hit go again, until the code works, nice uh!?
** Note 1: ** Use "F4" key to toggle full screen mode in editor, and press "ESC" or "F4" to leave this mode;
** Note 2: ** You can use "CTRL + SPACE" to active autocomplete;
** Note 3: ** Every "console.log()", below each question will appear in output div;
** Note 4: ** We use jshint to check the syntax of your code, but you can disable this too;
** Note 5: ** You can choose the template of the page and the editors. We have a beta version too
[js-lessons.BETA](beta.html), with a beta version of strapdown, which is not recomended.
** ! This exercise is just for test purpose, and documentation, so don't use it for real learning. **
### Personal Configurations
<p style="margin-bottom:0;"> <b> Select a theme for CodeMirror editors </b><br>
<select style="margin-top: 5px;" onchange="selectTheme()" id="select">
<option selected="">default</option>
<option>3024-day</option>
<option>3024-night</option>
<option>abcdef</option>
<option>ambiance</option>
<option>base16-dark</option>
<option>base16-light</option>
<option>bespin</option>
<option>blackboard</option>
<option>cobalt</option>
<option>colorforth</option>
<option>dracula</option>
<option>eclipse</option>
<option>elegant</option>
<option>erlang-dark</option>
<option>hopscotch</option>
<option>icecoder</option>
<option>isotope</option>
<option>lesser-dark</option>
<option>liquibyte</option>
<option>material</option>
<option>mbo</option>
<option>mdn-like</option>
<option>midnight</option>
<option>monokai</option>
<option>neat</option>
<option>neo</option>
<option>night</option>
<option>paraiso-dark</option>
<option>paraiso-light</option>
<option>pastel-on-dark</option>
<option>railscasts</option>
<option>rubyblue</option>
<option>seti</option>
<option>solarized dark</option>
<option>solarized light</option>
<option>the-matrix</option>
<option>tomorrow-night-bright</option>
<option>tomorrow-night-eighties</option>
<option>ttcn</option>
<option>twilight</option>
<option>vibrant-ink</option>
<option>xq-dark</option>
<option>xq-light</option>
<option>yeti</option>
<option>zenburn</option>
</select>
</p><p style="margin-bottom:0;"> <b> Select a theme for this page </b><br>
<select style="margin-top: 5px;" onchange="selectThemePage(this)" id="selectpage">
<option selected="">united</option>
<option>amelia</option>
<option>cerulean</option>
<option>cyborg</option>
<option>journal</option>
<option>readable</option>
<option>simplex</option>
<option>slate</option>
<option>spacelab</option>
<option>spruce</option>
<option>superhero</option>
</select>
</p><form id="login">
<label> <b> Username </b> </label> <input type="text" name="fname"> <br>
<label> <b> Password </b> </label> <input type="password" name="fpass"> <br>
</form>
<button class="go" id="loginButton" onclick="">Login</button>
## Introduction
The Array is Javascript's only collection type. Arrays are everywhere. We're going to add the five functions to the Array type, and in the process make it much more powerful and useful. As a matter of fact, Array already has the map, filter, and reduce functions! However we're going to reimplement these functions as a learning exercise.
This section will follow a pattern. First we'll solve problems the way you probably learned in school, or on your own by reading other people's code. In other words, we'll transform collections into new collections using loops and statements. Then we'll implement one of the five functions, and then use it to solve the same problem again *without* the loop. Once we've learned the five functions, you'll learn how to combine them to solve complex problems with very little code. The first two exercises have been completed in advance, but please look them over carefully!
## Chapter 1 - Traversing an Array
### Exercise 1
#### Print all the names in an array
<div class="lesson">
<textarea class="code" rows="8" cols="80">
/*jshint esversion: 6 */
function(console) { // jshint ignore:line
var names = ["Ben", "Jafar", "Matt", "Priya", "Brian"],
counter;
for(counter = 0; counter < names.length; counter++) {
console.log(names[counter]);
}
}
</textarea>
<div class="output"></div>
<div class="output"></div>
<pre id="" class="verifier">
// Traverse array with for loop
function(str, info) {
preVerifierHook();
var fun = eval("(" + str + ")");
var items = [];
var got;
var expected = '["Ben","Brian","Jafar","Matt","Priya"]';
fun({
log:function(name) {
items.push(name);
console.log(name);
}
});
got = JSON.stringify(items.sort());
if(got === expected) {
return "Success!"
}
else {
showLessonErrorMessage(expected, JSON.stringify(items.sort(), undefined, 4), 'Order does not matter', info);
}
}
</pre>
<div class="output">
<h4> Debug Console </h4> <hr>
<div class="saida">
<!-- Output -->
<pre><code></code></pre>
</div>
<div class="command-line">
<span class="console-arrow"></span>
<textarea class="console-command-line" rows="1" data-min-rows="1"></textarea>
</div>
</div>
<button class="go">Run</button>
<button class="showDebug">Show Debug</button>
</div>
<!-- ********************** START OF EXERCISE ********************** -->
<div style="display:none;" id="START-EXERCISE"></div>
<!-- ********************** LESSON 1 - BEGIN *********************** -->
<div style="display:none;" id="lessonB1"></div>
### Exercise 2
#### Use forEach to print all the names in an array
Let's repeat the previous exercise using the forEach function.
<div class="lesson">
<textarea class="code" rows="8" cols="80">
/*jshint esversion: 6 */
function(console) { // jshint ignore:line
var names = ["Ben", "Jafar", "Matt", "Priya", "Brian"];
_.forEach(names, (el) => (console.log(el)));
}
</textarea>
<div class="output"></div>
<div class="output"></div>
<pre id="" class="verifier">
// Traverse array with for loop
function(str, info) {
preVerifierHook();
var fun = eval("(" + str + ")");
var items = [];
var got;
var expected = '["Ben","Brian","Jafar","Matt","Priya"]';
fun({
log:function(name) {
items.push(name);
console.log(name);
}
});
got = JSON.stringify(items.sort());
if(got === expected) {
return "Success!"
}
else {
showLessonErrorMessage(expected, JSON.stringify(items.sort(), undefined, 4), 'Order does not matter', info);
}
}
</pre>
<div class="output">
<h4> Debug Console </h4> <hr>
<div class="saida">
<!-- Output -->
<pre><code></code></pre>
</div>
<div class="command-line">
<span class="console-arrow"></span>
<textarea class="console-command-line" rows="1" data-min-rows="1"></textarea>
</div>
</div>
<button class="go">Run</button>
<button class="showDebug">Show Debug</button>
</div>
<div style="display:none;" id="lessonE1"></div>
<!-- *********************** LESSON 1 - END *********************** -->
<!-- ********************** LESSON 2 - BEGIN ********************** -->
<div style="display:none;" id="lessonB2"></div>
## Chapter 2 - Projecting Arrays
### Exercise 3
#### Project an array of videos into an array of {id,title} pairs using forEach()
Applying a function to a value and creating a new value is called a projection. To project one array into another, we apply a projection function to each item in the array and collect the results in a new array.
For each video, add a projected {id, title} pair to the videoAndTitlePairs array.
<div class="lesson">
<textarea class="code" rows="60" cols="80">
/*jshint esversion: 6 */
function() { // jshint ignore:line
var newReleases = [
{
"id": 70111470,
"title": "Die Hard",
"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [4.0],
"bookmark": []
},
{
"id": 654356453,
"title": "Bad Boys",
"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [5.0],
"bookmark": [{ id:432534, time:65876586 }]
},
{
"id": 65432445,
"title": "The Chamber",
"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [4.0],
"bookmark": []
},
{
"id": 675465,
"title": "Fracture",
"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [5.0],
"bookmark": [{ id:432534, time:65876586 }]
}
],
videoAndTitlePairs = [];
// ------------ INSERT CODE HERE! -----------------------------------
// Use forEach function to accumulate {id, title} pairs from each video.
// Put the results into the videoAndTitlePairs array using the Array's
// push() method. Example: videoAndTitlePairs.push(newItem);
// ------------ INSERT CODE HERE! -----------------------------------
return videoAndTitlePairs;
}
</textarea>
<div class="output"></div>
<div class="output"></div>
<pre class="verifier">
// Projection with with forEach
function(str, info) {
preVerifierHook();
var fun = eval("(" + str + ")"),
videoAndTitlePairs = fun(),
expected = '[{\"id\":675465,\"title\":\"Fracture\"},{\"id\":65432445,\"title\":\"The Chamber\"},{\"id\":70111470,\"title\":\"Die Hard\"},{\"id\":654356453,\"title\":\"Bad Boys\"}]';
// Sorting by video id
videoAndTitlePairs = _.sortBy(videoAndTitlePairs, function(video) { return video.id });
if (JSON.stringify(videoAndTitlePairs) === expected) {
return "YUPPPEEEE!";
}
else {
showLessonErrorMessage(expected, JSON.stringify(videoAndTitlePairs, undefined, 4), "", info);
}
}
</pre>
<div class="output">
<h4> Debug Console </h4> <hr>
<div class="saida">
<!-- Output -->
<pre><code></code></pre>
</div>
<div class="command-line">
<span class="console-arrow"></span>
<textarea class="console-command-line" rows="1" data-min-rows="1"></textarea>
</div>
</div>
<button class="go">Run</button>
<button class="showDebug">Show Debug</button>
</div>
<div style="display:none;" id="lessonE2"></div>
<!-- *********************** LESSON 2 - END *********************** -->
<!-- ********************** LESSON 1 - BEGIN *********************** -->
<div style="display:none;" id="lessonB3"></div>
## The end!
### Congratulations!!! :D
I hope you enjoyed use js-lessons as I enjoyed programming it!
Created By ** Jeferson Lima ** * a fan of penguins *.
</div>
<div style="display:none;" id="lessonE3"></div>
<!-- *********************** LESSON 1 - END *********************** -->
<div style="display:none;" id="END-EXERCISE"></div>
<!-- ********************** END OF EXERCISE *********************** -->
]]>