2015-07-07 18:54:27 -07:00
{
2015-08-13 00:21:52 +01:00
"name" : "Object Oriented and Functional Programming" ,
2015-10-06 23:11:56 -07:00
"order" : 7 ,
2015-10-12 22:56:10 -07:00
"time" : "1h" ,
2015-08-11 15:39:07 +01:00
"note" : [
2015-08-16 05:25:10 -07:00
"Methods" ,
2015-08-16 04:05:15 -07:00
"Closures" ,
"Factories" ,
"Pure Functions" ,
"Currying Functions" ,
"Functors" ,
"Currying Functions"
2015-08-11 15:39:07 +01:00
] ,
2015-07-07 18:54:27 -07:00
"challenges" : [
2015-08-11 15:39:07 +01:00
{
"id" : "cf1111c1c15feddfaeb1bdef" ,
2015-08-16 08:03:34 -07:00
"title" : "Declare JavaScript Objects as Variables" ,
2015-08-11 15:39:07 +01:00
"description" : [
2015-08-15 13:57:44 -07:00
"Before we dive into Object Oriented Programming, let's revisit JavaScript objects." ,
2015-08-18 02:05:53 -04:00
"Give your <code>motorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
2015-08-11 15:39:07 +01:00
] ,
"tests" : [
2015-09-30 18:33:32 -07:00
"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.');"
2015-08-11 15:39:07 +01:00
] ,
"challengeSeed" : [
"var car = {" ,
2015-08-16 04:05:15 -07:00
" \"wheels\":4," ,
" \"engines\":1," ,
" \"seats\":5" ,
2015-08-11 15:39:07 +01:00
"};" ,
"" ,
"var motorBike = {" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 04:05:15 -07:00
" // Only change code below this line." ,
"" ,
"" ,
"" ,
" // Only change code above this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-11 15:39:07 +01:00
"};" ,
"" ,
2015-08-27 22:18:09 +02:00
"(function() {return JSON.stringify(motorBike);})();"
2015-08-11 15:39:07 +01:00
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint" ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
"id" : "cf1111c1c15feddfaeb2bdef" ,
2015-08-16 08:03:34 -07:00
"title" : "Construct JavaScript Objects with Functions" ,
2015-08-11 15:39:07 +01:00
"description" : [
2015-08-16 04:05:15 -07:00
"We are also able to create objects using <code>constructor</code> functions." ,
2015-10-28 01:15:54 -07:00
"Here's an example of a constructor function:" ,
"<code>var Car = function() {</code>" ,
"<code>  this.wheels = 4;</code>" ,
"<code>  this.engines = 1;</code>" ,
"<code>  this.seats = 1;</code>" ,
"<code>};</code>" ,
2015-09-09 12:31:42 +08:00
"Give your <code>myMotorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
2015-08-11 15:39:07 +01:00
] ,
"tests" : [
2015-09-30 18:33:32 -07:00
"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.');"
2015-08-11 15:39:07 +01:00
] ,
"challengeSeed" : [
2015-08-16 05:25:10 -07:00
"var Car = function() {" ,
2015-08-16 04:05:15 -07:00
" this.wheels = 4;" ,
" this.engines = 1;" ,
" this.seats = 1;" ,
2015-08-11 15:39:07 +01:00
"};" ,
"" ,
2015-08-16 05:25:10 -07:00
"var myCar = new Car();" ,
"" ,
"// Only change code below this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 05:25:10 -07:00
"var MotorBike = function() {" ,
"" ,
"" ,
"" ,
"};" ,
"" ,
"var myMotorBike = new MotorBike();" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 04:05:15 -07:00
"// Only change code above this line." ,
2015-08-11 15:39:07 +01:00
"" ,
2015-08-27 22:18:09 +02:00
"(function() {return JSON.stringify(myMotorBike);})();"
2015-08-11 15:39:07 +01:00
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
"id" : "cf1111c1c15feddfaeb3bdef" ,
2015-08-16 08:03:34 -07:00
"title" : "Make Object Properties Private" ,
2015-08-11 15:39:07 +01:00
"description" : [
2015-08-16 05:25:10 -07:00
"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." ,
2015-10-28 01:15:54 -07:00
"Let's create an object with two functions. One attached as a property and one not." ,
2015-08-16 05:25:10 -07:00
"See if you can keep <code>myBike.speed</code> and <code>myBike.addUnit</code> private, while making <code>myBike.getSpeed</code> publicly accessible."
2015-08-11 15:39:07 +01:00
] ,
"tests" : [
2015-09-30 18:33:32 -07:00
"assert(typeof(myBike.getSpeed)!=='undefined' && typeof(myBike.getSpeed) === 'function', 'message: The method getSpeed of myBike should be accessible outside the object.');" ,
2015-10-15 17:12:54 -07:00
"assert(typeof(myBike.speed) === 'undefined', 'message: <code>myBike.speed</code> should be undefined.');" ,
2015-09-30 18:33:32 -07:00
"assert(typeof(myBike.addUnit) === 'undefined', 'message: <code>myBike.addUnit</code> should remain undefined.');"
2015-08-11 15:39:07 +01:00
] ,
"challengeSeed" : [
2015-08-16 05:25:10 -07:00
"var Car = function() {" ,
2015-10-28 05:13:49 -07:00
"" ,
" gear = 1;" ,
"" ,
2015-08-16 05:25:10 -07:00
" function addStyle(styleMe){" ,
2015-08-27 22:18:09 +02:00
" return 'The Current Gear Is: ' + styleMe;" ,
2015-08-16 05:25:10 -07:00
" }" ,
2015-10-28 05:13:49 -07:00
"" ,
2015-08-16 05:25:10 -07:00
" this.getGear = function() {" ,
2015-08-27 22:18:09 +02:00
" return addStyle(this.gear);" ,
2015-08-16 05:25:10 -07:00
" };" ,
2015-10-28 05:13:49 -07:00
"" ,
2015-08-11 15:39:07 +01:00
"};" ,
"" ,
2015-08-16 05:25:10 -07:00
"var Bike = function() {" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 19:34:11 -07:00
" // Only change code below this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 05:25:10 -07:00
" this.speed = 100;" ,
2015-10-28 05:13:49 -07:00
"" ,
2015-08-16 05:25:10 -07:00
" function addUnit(value) {" ,
2015-08-27 22:18:09 +02:00
" return value + \"KM/H\";" ,
2015-08-16 05:25:10 -07:00
" }" ,
2015-10-28 05:13:49 -07:00
"" ,
2015-08-16 05:25:10 -07:00
" getSpeed = function () {" ,
2015-08-27 22:18:09 +02:00
" return addUnit(speed);" ,
2015-08-16 05:25:10 -07:00
" };" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-11 15:39:07 +01:00
"};" ,
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code above this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-11 15:39:07 +01:00
"var myCar = new Car();" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-12 00:11:56 +01:00
"var myBike = new Bike();" ,
2015-08-11 15:39:07 +01:00
"" ,
2015-08-27 22:18:09 +02:00
"if(myBike.hasOwnProperty('getSpeed')){(function() {return JSON.stringify(myBike.getSpeed());})();};"
2015-08-11 15:39:07 +01:00
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
2015-08-12 00:11:56 +01:00
"id" : "cf1111c1c15feddfaeb4bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Make Instances of Objects with a Constructor Function" ,
2015-08-11 15:39:07 +01:00
"description" : [
2015-08-16 05:25:10 -07:00
"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." ,
2015-10-15 17:12:54 -07:00
"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."
2015-08-11 15:39:07 +01:00
] ,
"tests" : [
2015-10-15 17:12:54 -07:00
"assert((new Car()).wheels === 4, 'message: The property <code>wheels</code> should still be 4 in the object constructor.');" ,
2015-09-30 18:33:32 -07:00
"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.');"
2015-08-11 15:39:07 +01:00
] ,
"challengeSeed" : [
2015-08-16 05:25:10 -07:00
"var Car = function() {" ,
2015-08-11 15:39:07 +01:00
" this.wheels = 4;" ,
"};" ,
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code below this line." ,
2015-08-11 15:39:07 +01:00
"var myCar = new Car();" ,
"" ,
"" ,
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code above this line." ,
2015-08-27 22:18:09 +02:00
"(function() {return JSON.stringify(myCar);})();"
2015-08-11 15:39:07 +01:00
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
2015-08-12 00:11:56 +01:00
"id" : "cf1111c1c15feddfaeb7bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Iterate over Arrays with .map" ,
2015-08-11 15:39:07 +01:00
"description" : [
2015-10-17 23:04:37 -07:00
"The <code>map</code> method is a convenient way to iterate through arrays. Here's an example usage:" ,
"<code>var timesFour = array.map(function(val){</code>" ,
"<code>  return val*4;</code>" ,
2015-08-16 04:05:15 -07:00
"<code>});</code>" ,
2015-08-13 00:20:15 +01:00
"" ,
2015-10-17 23:04:37 -07:00
"The <code>map</code> method will iterate through every element of the array, creating a new array with values that have been modified by the callback function, and return it." ,
"In our example the callback only uses the value of the array element (the <code>val</code> argument) but your callback can also include arguments for the <code>index</code> and <code>array</code> being acted on." ,
2015-10-15 17:12:54 -07:00
"Use the map function to add 3 to every value in the variable <code>array</code>."
2015-08-11 15:39:07 +01:00
] ,
"tests" : [
2015-10-28 10:43:45 -07:00
"assert.deepEqual(newArray, [4,5,6,7,8], 'message: You should add three to each value in the array.');" ,
2015-10-17 23:04:37 -07:00
"assert(editor.getValue().match(/\\.map\\s*\\(/gi), 'message: You should be making use of the <code>map</code> method.');" ,
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with <code>map</code>.');"
2015-08-11 15:39:07 +01:00
] ,
"challengeSeed" : [
2015-10-28 10:43:45 -07:00
"var oldArray = [1,2,3,4,5];" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code below this line." ,
2015-08-13 00:20:15 +01:00
"" ,
"" ,
2015-10-28 10:43:45 -07:00
"var newArray = oldArray;" ,
2015-10-28 05:13:49 -07:00
"" ,
"" ,
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code above this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-10-28 10:43:45 -07:00
"(function() {return newArray;})();"
2015-08-11 15:39:07 +01:00
] ,
2015-10-15 20:17:29 -07:00
"MDNlinks" : [
"Array.map()"
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
2015-08-12 00:11:56 +01:00
"id" : "cf1111c1c15feddfaeb8bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Condense arrays with .reduce" ,
2015-08-11 15:39:07 +01:00
"description" : [
2015-10-17 23:04:37 -07:00
"The array method <code>reduce</code> is used to iterate through an array and condense it into one value." ,
"To use <code>reduce</code> you pass in a callback whose arguments are an accumulator (in this case, <code>previousVal</code>) and the current value (<code>currentVal</code>)." ,
"<code>reduce</code> has an optional second argument which can be used to set the initial value of the accumulator. If no initial value is specified if will be the first array element." ,
"Here is an example of <code>reduce</code> being used to sum all the values of an array:" ,
2015-10-28 05:13:49 -07:00
"<code>var singleVal = array.reduce(function(previousVal, currentVal) {</code>" ,
2015-08-27 22:18:09 +02:00
"<code>  return previousVal+currentVal;</code>" ,
2015-10-15 17:12:54 -07:00
"<code>});</code>" ,
2015-10-17 23:04:37 -07:00
"Use the <code>reduce</code> method to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
2015-08-11 15:39:07 +01:00
] ,
"tests" : [
2015-10-15 17:12:54 -07:00
"assert(singleVal == 30, 'message: <code>singleVal</code> should be equal to the sum of all items in the <code>array</code> variable.');" ,
2015-10-17 23:04:37 -07:00
"assert(editor.getValue().match(/\\.reduce\\s*\\(/gi), 'message: You should have made use of the <code>reduce</code> method.');"
2015-08-11 15:39:07 +01:00
] ,
"challengeSeed" : [
2015-08-13 00:20:15 +01:00
"var array = [4,5,6,7,8];" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-13 00:20:15 +01:00
"var singleVal = 0;" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code below this line." ,
2015-08-13 00:20:15 +01:00
"" ,
"" ,
"" ,
2015-10-28 05:13:49 -07:00
"" ,
"" ,
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code above this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-27 22:18:09 +02:00
"(function() {return singleVal;})();"
2015-08-11 15:39:07 +01:00
] ,
2015-10-15 20:17:29 -07:00
"MDNlinks" : [
"Array.reduce()"
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
2015-08-12 00:11:56 +01:00
"id" : "cf1111c1c15feddfaeb9bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Filter Arrays with .filter" ,
2015-08-11 15:39:07 +01:00
"description" : [
2015-10-17 23:04:37 -07:00
"The <code>filter</code> method is used to iterate through an array and filter out elements where a given condition is not true." ,
"<code>filter</code> is passed a callback function which takes the current value (we've called that <code>val</code>) as an argument. It can also use arguments for the <code>index</code> and <code>array</code> being acted on." ,
"Any array element for which the callback returns true will be kept and elements that return false will be filtered out." ,
"The following code is an example of using filter to remove array elements that are not even numbers:" ,
2015-08-16 04:05:15 -07:00
"<code>array = array.filter(function(val) {</code>" ,
2015-10-17 23:04:37 -07:00
"<code>  return val % 2 === 0;</code>" ,
"<code>});</code>" ,
"Use <code>filter</code> to remove all elements from <code>array</code> that are greater than 5."
2015-08-11 15:39:07 +01:00
] ,
"tests" : [
2015-10-09 11:54:56 -07:00
"assert.deepEqual(array, [1,2,3,4,5], 'message: You should have removed all the values from the array that are greater than 5.');" ,
2015-10-17 23:04:37 -07:00
"assert(editor.getValue().match(/array\\.filter\\s*\\(/gi), 'message: You should be using the <code>filter</code> 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.');"
2015-08-11 15:39:07 +01:00
] ,
"challengeSeed" : [
2015-08-13 00:20:15 +01:00
"var array = [1,2,3,4,5,6,7,8,9,10];" ,
2015-10-28 01:15:54 -07:00
"" ,
"// Only change code below this line." ,
2015-08-13 00:20:15 +01:00
"" ,
"" ,
"" ,
2015-10-28 01:15:54 -07:00
"// Only change code above this line." ,
"" ,
2015-08-27 22:18:09 +02:00
"(function() {return array;})();"
2015-08-11 15:39:07 +01:00
] ,
2015-10-15 20:17:29 -07:00
"MDNlinks" : [
"Array.filter()"
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
2015-08-12 00:11:56 +01:00
"id" : "cf1111c1c16feddfaeb1bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Sort Arrays with .sort" ,
2015-08-11 15:39:07 +01:00
"description" : [
2015-10-17 23:04:37 -07:00
"You can use the method <code>sort</code> to easily sort the values in an array alphabetically or numerically." ,
"Unlike the previous array methods we have been looking at, <code>sort</code> actually alters the array in place. However, it also returns this sorted array." ,
"<code>sort</code> can be passed a compare function as a callback. If no compare function is passed in it will convert the values to strings and sort alphabetically." ,
"Here is an example of using sort with a compare function that will sort the elements from smallest to largest number:" ,
"<code>var array = [1, 12, 21, 2];</code>" ,
"<code>array.sort(function(a, b) {</code>" ,
"<code>  return a - b;</code>" ,
"<code>});</code>" ,
2015-10-15 17:12:54 -07:00
"Use <code>sort</code> to sort <code>array</code> alphabetically."
2015-08-11 15:39:07 +01:00
] ,
"tests" : [
2015-09-30 18:33:32 -07:00
"assert.deepEqual(array, ['alpha', 'beta', 'charlie'], 'message: You should have sorted the array alphabetically.');" ,
2015-10-17 23:04:37 -07:00
"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 <code>sort</code> method.');"
2015-08-11 15:39:07 +01:00
] ,
"challengeSeed" : [
2015-08-13 00:20:15 +01:00
"var array = ['beta', 'alpha', 'charlie'];" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code below this line." ,
2015-08-13 00:20:15 +01:00
"" ,
"" ,
"" ,
2015-10-28 01:15:54 -07:00
"// Only change code above this line." ,
"" ,
2015-08-27 22:18:09 +02:00
"(function() {return array;})();"
2015-08-11 15:39:07 +01:00
] ,
2015-10-15 20:17:29 -07:00
"MDNlinks" : [
"Array.sort()"
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
2015-08-12 00:11:56 +01:00
"id" : "cf1111c1c16feddfaeb2bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Reverse Arrays with .reverse" ,
2015-08-12 00:11:56 +01:00
"description" : [
2015-10-17 23:04:37 -07:00
"You can use the <code>reverse</code> method to reverse the elements of an array." ,
"<code>reverse</code> is another array method that alters the array in place, but it also returns the reversed array." ,
2015-10-15 17:12:54 -07:00
"Add a line of code that uses <code>reverse</code> to reverse the <code>array</code> variable."
2015-08-11 15:39:07 +01:00
] ,
2015-08-12 00:11:56 +01:00
"tests" : [
2015-09-30 18:33:32 -07:00
"assert.deepEqual(array, [7,6,5,4,3,2,1], 'message: You should reverse the array.');" ,
2015-10-15 17:12:54 -07:00
"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>.');"
2015-08-11 15:39:07 +01:00
] ,
2015-08-12 00:11:56 +01:00
"challengeSeed" : [
2015-08-13 00:20:15 +01:00
"var array = [1,2,3,4,5,6,7];" ,
"" ,
2015-10-28 01:15:54 -07:00
"// Only change code below this line." ,
2015-08-13 00:20:15 +01:00
"" ,
"" ,
2015-10-28 01:15:54 -07:00
"" ,
"// Only change code above this line." ,
"" ,
2015-08-27 22:18:09 +02:00
"(function() {return array;})();"
2015-08-11 15:39:07 +01:00
] ,
2015-10-15 20:17:29 -07:00
"MDNlinks" : [
"Array.reverse()"
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
} ,
{
2015-08-12 00:11:56 +01:00
"id" : "cf1111c1c16feddfaeb3bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Concatenate Strings with .concat" ,
2015-08-12 00:11:56 +01:00
"description" : [
2015-10-17 23:04:37 -07:00
"<code>concat</code> can be used to merge the contents of two arrays into one." ,
"<code>concat</code> takes an array as an argument and returns a new array with the elements of this array concatenated onto the end." ,
"Here is an example of <code>concat</code> being used to concatenate <code>otherArray</code> onto the end of <code>array</code>:" ,
2015-10-15 17:12:54 -07:00
"<code>array = array.concat(otherArray);</code>" ,
2015-10-17 23:04:37 -07:00
"Use <code>.concat()</code> to concatenate <code>concatMe</code> onto the end of <code>array</code> and assign it back to <code>array</code>."
2015-08-11 15:39:07 +01:00
] ,
2015-08-12 00:11:56 +01:00
"tests" : [
2015-10-17 23:04:37 -07:00
"assert.deepEqual(array, [1,2,3,4,5,6], 'message: You should concatenate the two arrays together.');" ,
2015-10-15 17:12:54 -07:00
"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.');"
2015-08-11 15:39:07 +01:00
] ,
2015-08-12 00:11:56 +01:00
"challengeSeed" : [
2015-08-13 00:20:15 +01:00
"var array = [1,2,3];" ,
"" ,
"var concatMe = [4,5,6];" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code below this line." ,
2015-08-13 00:20:15 +01:00
"" ,
"" ,
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code above this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-27 22:18:09 +02:00
"(function() {return array;})();"
2015-08-11 15:39:07 +01:00
] ,
2015-10-15 20:17:29 -07:00
"MDNlinks" : [
"Array.concat()"
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-13 00:20:15 +01:00
} ,
{
"id" : "cf1111c1c16feddfaeb4bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Split Strings with .split" ,
2015-08-13 00:20:15 +01:00
"description" : [
2015-10-17 23:04:37 -07:00
"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." ,
"Here is an example of <code>split</code> being used to split an array at every space character:" ,
2015-10-15 17:12:54 -07:00
"<code>var array = string.split(' ');</code>" ,
2015-10-17 23:04:37 -07:00
"Use <code>split</code> to create an array of words from <code>string</code> and assign it to <code>array</code>."
2015-08-13 00:20:15 +01:00
] ,
"tests" : [
2015-10-28 02:20:09 -07:00
"assert(/\\.split\\(/gi, 'message: You should use the <code>split</code> method on the string.');" ,
2015-10-28 01:15:54 -07:00
"assert(typeof(array) === 'object' && array.length === 5, 'message: You should split the string by its spaces.');"
2015-08-13 00:20:15 +01:00
] ,
"challengeSeed" : [
"var string = \"Split me into an array\";" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code below this line." ,
2015-08-13 00:20:15 +01:00
"" ,
"var array = string;" ,
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code above this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-27 22:18:09 +02:00
"(function() {return array;})();"
2015-08-13 00:20:15 +01:00
] ,
2015-10-15 20:17:29 -07:00
"MDNlinks" : [
"String.split()"
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-13 00:20:15 +01:00
} ,
{
"id" : "cf1111c1c16feddfaeb5bdef" ,
2015-08-16 19:34:11 -07:00
"title" : "Join Strings with .join" ,
2015-08-13 00:20:15 +01:00
"description" : [
2015-10-17 23:04:37 -07:00
"We can use the <code>join</code> method to join each element of an array into a string separated by whatever delimiter you provide as an argument." ,
"The following is an example of using <code>join</code> to join all of the elements of an array into a string with all the elements seperated by a space:" ,
"<code>var joinedString = 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 to <code>joinedString</code>."
2015-08-13 00:20:15 +01:00
] ,
"tests" : [
2015-10-17 23:04:37 -07:00
"assert(typeof(joinedString) === 'string' && joinedString === \"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 <code>join</code> method on the array.');"
2015-08-13 00:20:15 +01:00
] ,
"challengeSeed" : [
"var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];" ,
2015-10-28 01:15:54 -07:00
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code below this line." ,
2015-08-13 00:20:15 +01:00
"" ,
2015-10-17 23:04:37 -07:00
"var joinedString = joinMe;" ,
2015-08-13 00:20:15 +01:00
"" ,
2015-08-16 19:34:11 -07:00
"// Only change code above this line." ,
2015-10-28 01:15:54 -07:00
"" ,
2015-10-17 23:04:37 -07:00
"(function() {return joinedString;})();"
2015-08-13 00:20:15 +01:00
] ,
2015-10-15 20:17:29 -07:00
"MDNlinks" : [
2015-10-17 23:04:37 -07:00
"Array.join()"
2015-10-15 20:17:29 -07:00
] ,
2015-08-16 04:05:15 -07:00
"challengeType" : 1 ,
"type" : "waypoint"
2015-08-11 15:39:07 +01:00
}
2015-07-07 18:54:27 -07:00
]
}