418 lines
18 KiB
JSON
418 lines
18 KiB
JSON
{
|
|
"name": "Object Oriented and Functional Programming",
|
|
"order": 7,
|
|
"time": "1h",
|
|
"note": [
|
|
"Methods",
|
|
"Closures",
|
|
"Factories",
|
|
"Pure Functions",
|
|
"Currying Functions",
|
|
"Functors",
|
|
"Currying Functions"
|
|
],
|
|
"challenges": [
|
|
{
|
|
"id":"cf1111c1c15feddfaeb1bdef",
|
|
"title": "Declare JavaScript Objects as Variables",
|
|
"difficulty":0,
|
|
"description":[
|
|
"Before we dive into Object Oriented Programming, let's revisit JavaScript objects.",
|
|
"Give your <code>motorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
|
|
],
|
|
"tests":[
|
|
"assert(typeof(motorBike.engines) === 'number', 'message: <code>motorBike</code> should have a <code>engines</code> attribute set to a number.');",
|
|
"assert(typeof(motorBike.wheels) === 'number', 'message: <code>motorBike</code> should have a <code>wheels</code> attribute set to a number.');",
|
|
"assert(typeof(motorBike.seats) === 'number', 'message: <code>motorBike</code> should have a <code>seats</code> attribute set to a number.');"
|
|
],
|
|
"challengeSeed":[
|
|
"//Here is a sample Object",
|
|
"var car = {",
|
|
" \"wheels\":4,",
|
|
" \"engines\":1,",
|
|
" \"seats\":5",
|
|
"};",
|
|
"",
|
|
"//Now Let's make a similar Object called motorBike",
|
|
"//Give it two wheels, one engine and one seat",
|
|
"var motorBike = {",
|
|
" // Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"};",
|
|
"",
|
|
"(function() {return JSON.stringify(motorBike);})();"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint",
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c15feddfaeb2bdef",
|
|
"title": "Construct JavaScript Objects with Functions",
|
|
"difficulty":0,
|
|
"description":[
|
|
"We are also able to create objects using <code>constructor</code> functions.",
|
|
"Give your <code>myMotorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
|
|
],
|
|
"tests":[
|
|
"assert(typeof((new MotorBike()).engines) === 'number', 'message: <code>myMotorBike</code> should have a <code>engines</code> attribute set to a number.');",
|
|
"assert(typeof((new MotorBike()).wheels) === 'number', 'message: <code>myMotorBike</code> should have a <code>wheels</code> attribute set to a number.');",
|
|
"assert(typeof((new MotorBike()).seats) === 'number', 'message: <code>myMotorBike</code> should have a <code>seats</code> attribute set to a number.');"
|
|
],
|
|
"challengeSeed":[
|
|
"// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers.",
|
|
"var Car = function() {",
|
|
" this.wheels = 4;",
|
|
" this.engines = 1;",
|
|
" this.seats = 1;",
|
|
"};",
|
|
"",
|
|
"var myCar = new Car();",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"var MotorBike = function() {",
|
|
"",
|
|
"",
|
|
"",
|
|
"};",
|
|
"",
|
|
"var myMotorBike = new MotorBike();",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function() {return JSON.stringify(myMotorBike);})();"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c15feddfaeb3bdef",
|
|
"title":"Make Object Properties Private",
|
|
"difficulty":0,
|
|
"description":[
|
|
"Objects have their own attributes, called <code>properties</code>, and their own functions, called <code>methods</code>.",
|
|
"In the previous challenge, we used the <code>this</code> keyword to reference <code>public properties</code> and <code>public methods</code> of the current object.",
|
|
"We can also create <code>private properties</code> and <code>private methods</code>, which aren't accessible from outside the object.",
|
|
"To do this, we omit the word <code>this</code> from the <code>property</code> or <code>method</code> declaration.",
|
|
"See if you can keep <code>myBike.speed</code> and <code>myBike.addUnit</code> private, while making <code>myBike.getSpeed</code> publicly accessible."
|
|
],
|
|
"tests":[
|
|
"assert(typeof(myBike.getSpeed)!=='undefined' && typeof(myBike.getSpeed) === 'function', 'message: The method getSpeed of myBike should be accessible outside the object.');",
|
|
"assert(typeof(myBike.speed) === 'undefined', 'message: <code>myBike.speed</code> should be undefined.');",
|
|
"assert(typeof(myBike.addUnit) === 'undefined', 'message: <code>myBike.addUnit</code> should remain undefined.');"
|
|
],
|
|
"challengeSeed":[
|
|
"//Let's create an object with two functions. One attached as a property and one not.",
|
|
"var Car = function() {",
|
|
" this.gear = 1;",
|
|
" function addStyle(styleMe){",
|
|
" return 'The Current Gear Is: ' + styleMe;",
|
|
" }",
|
|
" this.getGear = function() {",
|
|
" return addStyle(this.gear);",
|
|
" };",
|
|
"};",
|
|
"",
|
|
"var Bike = function() {",
|
|
" // Only change code below this line.",
|
|
" this.speed = 100;",
|
|
" function addUnit(value) {",
|
|
" return value + \"KM/H\";",
|
|
" }",
|
|
" ",
|
|
" getSpeed = function () {",
|
|
" return addUnit(speed);",
|
|
" };",
|
|
" ",
|
|
"};",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"var myCar = new Car();",
|
|
"var myBike = new Bike();",
|
|
"",
|
|
"if(myBike.hasOwnProperty('getSpeed')){(function() {return JSON.stringify(myBike.getSpeed());})();};"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c15feddfaeb4bdef",
|
|
"title":"Make Instances of Objects with a Constructor Function",
|
|
"difficulty":0,
|
|
"description":[
|
|
"Sometimes you'll want to be able to easily create similar objects.",
|
|
"Objects have their own attributes, called <code>properties</code>, and their own functions, called <code>methods</code>.",
|
|
"A function that creates objects is called a <code>constructor</code>.",
|
|
"You can create <code>instances</code> of an object using a <code>constructor</code>.",
|
|
"Each new <code>instance</code> of this object <code>inherits</code> all the <code>properties</code> and <code>methods</code> of your original object.",
|
|
"Once an <code>instance</code> has been created you can add <code>properties</code> to that <code>instance</code> individually.",
|
|
"Add an <code>engines</code> property with a number value to the <code>myCar</code> instance."
|
|
],
|
|
"tests":[
|
|
"assert((new Car()).wheels === 4, 'message: The property <code>wheels</code> should still be 4 in the object constructor.');",
|
|
"assert(typeof((new Car()).engines) === 'undefined', 'message: There should not be a property <code>engines</code> in the object constructor.');",
|
|
"assert(myCar.wheels === 4, 'message: The property <code>wheels</code> of myCar should equal 4.');",
|
|
"assert(typeof(myCar.engines) === 'number', 'message: The property <code>engines</code> of myCar should be a number.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var Car = function() {",
|
|
" this.wheels = 4;",
|
|
"};",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"var myCar = new Car();",
|
|
"",
|
|
"//Add the property \"engines\" to myCar, and make it a number.",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"(function() {return JSON.stringify(myCar);})();"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c15feddfaeb7bdef",
|
|
"title":"Iterate over Arrays with .map",
|
|
"difficulty":0,
|
|
"description":[
|
|
"The map method is one of the easiest ways to iterate through an array or object there is. Let's use it now.",
|
|
"<code>array = array.map(function(val){</code>",
|
|
"<code>  return val+1;</code>",
|
|
"<code>});</code>",
|
|
"",
|
|
"Use the map function to add 3 to every value in the variable <code>array</code>."
|
|
],
|
|
"tests":[
|
|
"assert.deepEqual(array, [4,5,6,7,8], 'message: You should add three to each value in the array.');",
|
|
"assert(editor.getValue().match(/\\.map\\s*\\(/gi), 'message: You should be making use of the map method.');",
|
|
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with <code>.map</code>.');"
|
|
],
|
|
"challengeSeed":[
|
|
"//Use map to add three to each value in the array",
|
|
"var array = [1,2,3,4,5];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"(function() {return array;})();"
|
|
],
|
|
"MDNlinks":[
|
|
"Array.map()"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c15feddfaeb8bdef",
|
|
"title":"Condense arrays with .reduce",
|
|
"difficulty":0,
|
|
"description":[
|
|
"Reduce can be useful for condensing an array of numbers into one value.",
|
|
"<code>var singleVal = array.reduce(function(previousVal, currentVal){</code>",
|
|
"<code>  return previousVal+currentVal;</code>",
|
|
"<code>});</code>",
|
|
"Use the <code>reduce</code> function to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
|
|
],
|
|
"tests":[
|
|
"assert(singleVal == 30, 'message: <code>singleVal</code> should be equal to the sum of all items in the <code>array</code> variable.');",
|
|
"assert(editor.getValue().match(/\\.reduce\\s*\\(/gi), 'message: You should have made use of the reduce method.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var array = [4,5,6,7,8];",
|
|
"var singleVal = 0;",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"(function() {return singleVal;})();"
|
|
],
|
|
"MDNlinks":[
|
|
"Array.reduce()"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c15feddfaeb9bdef",
|
|
"title":"Filter Arrays with .filter",
|
|
"difficulty":0,
|
|
"description":[
|
|
"Filter is a useful method that can filter out values that don't match a certain criteria",
|
|
"Let's remove all the values greater than five",
|
|
"<code>array = array.filter(function(val) {</code>",
|
|
"<code>  return val <= 5;</code>",
|
|
"<code>});</code>"
|
|
],
|
|
"tests":[
|
|
"assert.deepEqual(array, [1,2,3,4,5], 'message: You should have removed all the values from the array that are greater than 5.');",
|
|
"assert(editor.getValue().match(/array\\.filter\\s*\\(/gi), 'message: You should be using the filter method to remove the values from the array.');",
|
|
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7\\,8\\,9\\,10\\]/gi), 'message: You should only be using <code>.filter</code> to modify the contents of the array.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var array = [1,2,3,4,5,6,7,8,9,10];",
|
|
" // Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"(function() {return array;})();"
|
|
],
|
|
"MDNlinks":[
|
|
"Array.filter()"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c16feddfaeb1bdef",
|
|
"title": "Sort Arrays with .sort",
|
|
"difficulty":0,
|
|
"description":[
|
|
"You can use the method <code>sort</code> to easily sort the values in the array alphabetically or numerically.",
|
|
"<code>var array = [1, 3, 2];</code>",
|
|
"<code>array = array.sort();</code>",
|
|
"<code>array</code> is now <code>[1, 2, 3]</code>.",
|
|
"Use <code>sort</code> to sort <code>array</code> alphabetically."
|
|
],
|
|
"tests":[
|
|
"assert.deepEqual(array, ['alpha', 'beta', 'charlie'], 'message: You should have sorted the array alphabetically.');",
|
|
"assert(editor.getValue().match(/\\[\\'beta\\'\\,\\s\\'alpha\\'\\,\\s'charlie\\'\\];/gi), 'message: You should only be using <code>.sort</code> to modify the array.');",
|
|
"assert(editor.getValue().match(/\\.sort\\s*\\(\\)/gi), 'message: You should have made use of the sort method.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var array = ['beta', 'alpha', 'charlie'];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"(function() {return array;})();"
|
|
],
|
|
"MDNlinks":[
|
|
"Array.sort()"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id": "cf1111c1c16feddfaeb2bdef",
|
|
"title": "Reverse Arrays with .reverse",
|
|
"description": [
|
|
"You can use the <code>reverse</code> function to reverse the contents of an array.",
|
|
"Add a line of code that uses <code>reverse</code> to reverse the <code>array</code> variable."
|
|
],
|
|
"tests": [
|
|
"assert.deepEqual(array, [7,6,5,4,3,2,1], 'message: You should reverse the array.');",
|
|
"assert(editor.getValue().match(/\\.reverse\\s*\\(\\)/gi), 'message: You should use the <code>reverse</code> method.');",
|
|
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7/gi), 'message: You should only be using <code>revserse</code> to modify <code>array</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var array = [1,2,3,4,5,6,7];",
|
|
" // Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"(function() {return array;})();"
|
|
],
|
|
"MDNlinks":[
|
|
"Array.reverse()"
|
|
],
|
|
"challengeType": 1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id": "cf1111c1c16feddfaeb3bdef",
|
|
"title": "Concatenate Strings with .concat",
|
|
"description": [
|
|
"<code>.concat()</code> can be used to merge the contents of two arrays into one.",
|
|
"<code>array = array.concat(otherArray);</code>",
|
|
"Use <code>.concat()</code> to concatenate <code>concatMe</code> onto the end of <code>array</code> and assign it back to array."
|
|
],
|
|
"tests": [
|
|
"assert.deepEqual(array, [1,2,3,4,5,6], 'message: You should concat the two arrays together.');",
|
|
"assert(editor.getValue().match(/\\.concat\\s*\\(/gi), 'message: You should be using the <code>concat</code> method to merge the two arrays.');",
|
|
"assert(editor.getValue().match(/\\[1\\,2\\,3\\]/gi) && editor.getValue().match(/\\[4\\,5\\,6\\]/gi), 'message: You should only be using <code>concat</code> to modify the arrays.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var array = [1,2,3];",
|
|
"",
|
|
"var concatMe = [4,5,6];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"(function() {return array;})();"
|
|
],
|
|
"MDNlinks":[
|
|
"Array.concat()"
|
|
],
|
|
"challengeType": 1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c16feddfaeb4bdef",
|
|
"title":"Split Strings with .split",
|
|
"difficulty":0,
|
|
"description":[
|
|
"You can use the <code>.split()</code> method to split a string into an array.",
|
|
"<code>.split()</code> uses the argument you pass in as a delimiter to determine which points the string should be split at.",
|
|
"<code>var array = string.split(' ');</code>",
|
|
"Use <code>.split()</code> to create an array of words from <code>string</code> and assign it to <code>array</code>."
|
|
],
|
|
"tests":[
|
|
"assert(typeof(array) === 'object' && array.length === 5, 'message: You should split the string by its spaces.');",
|
|
"assert(/\\.split\\(/gi, 'message: You should use the split method on the string.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var string = \"Split me into an array\";",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var array = string;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"(function() {return array;})();"
|
|
],
|
|
"MDNlinks":[
|
|
"String.split()"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
},
|
|
{
|
|
"id":"cf1111c1c16feddfaeb5bdef",
|
|
"title":"Join Strings with .join",
|
|
"difficulty":0,
|
|
"description":[
|
|
"We can use the <code>.join()</code> method to join each element in an array into a string separated by whatever delimiter you provide as an argument to the join operation.",
|
|
"<code>var joinMe = joinMe.join(\" \");</code>",
|
|
"Use the <code>.join()</code> method to create a string from <code>joinMe</code> with spaces in between each element and assign it back to <code>joinMe</code>."
|
|
],
|
|
"tests":[
|
|
"assert(typeof(joinMe) === 'string' && joinMe === \"Split me into an array\", 'message: You should join the elements of the array with spaces.');",
|
|
"assert(/\\.join\\(/gi, 'message: You should use of the join method on the array.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"joinMe = joinMe;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"(function() {return joinMe;})();"
|
|
],
|
|
"MDNlinks":[
|
|
"Array.join()"
|
|
],
|
|
"challengeType":1,
|
|
"type": "waypoint"
|
|
}
|
|
]
|
|
}
|