"Comments are lines of code that your computer will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.",
"assert(editor.getValue().match(/(\\/\\*)[\\w\\W]{5,}(?=\\*\\/)/gm), 'message: Create a <code>/* */</code> style comment that contains at least five letters.');",
"Computers are not inherently smart. Hence, javascript developers made it easy for us to represent data to computer. <code>Data</code> is anything that is meaningful to the computer.",
"In computer science, <code>Data types</code> are things that represent various types of data. JavaScript has seven data types which are <code>Undefined</code>, <code>Null</code>, <code>Boolean</code>, <code>String</code>, <code>Symbol</code>, <code>Number</code>, and <code>Object</code>. For example, the <code>Number</code> data type represents numbers.",
"Now let's learn about the most basic one: the <code>Boolean</code> data type. Booleans represent a <code>true</code> or <code>false</code> value. They are basically little on-off switches.",
"Modify the <code>welcomeToBooleans</code> function so that it returns <code>true</code> instead of <code>false</code> when the run button is clicked."
"assert(typeof(welcomeToBooleans()) === 'boolean', 'message: The <code>welcomeToBooleans()</code> function should return a boolean (true/false) value.');",
"It's nice to have seven different ways of representing data. But to use them in other parts of code, we must store the data somewhere. In computer science, the placeholder where data is stored for further use is known as <code>variable</code>.",
"These variables are no different from the x and y variables you use in Maths. Which means they're just a simple name to represent the data we want to refer to.",
"Now let's create our first variable and call it \"myName\".",
"You'll notice that in <code>myName</code>, we didn't use a space, and that the \"N\" is capitalized. In JavaScript, we write variable names in \"camelCase\".",
"assert((function(){if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return true;}else{return false;}})(), 'message: <code>myName</code> should be a string that contains at least one character in it.');"
"Assignment always goes from right to left. Everything to the right of the <code>=</code> operator is resolved before the value is assigned to the variable to the left of the operator.",
"<code>myVar = 5;</code>",
"<code>myNum = myVar;</code>",
"Assigns <code>5</code> to <code>myVar</code> and then resolves <code>myVar</code> to <code>5</code> again and assigns it to <code>myNum</code>.",
"When Javascript variables are declared, they have an inital value of <code>undefined</code>. If you do a mathematical operation on an <code>undefined</code> variable your result will be <code>NaN</code> which means <dfn>\"Not a Number\"</dfn>. If you concatanate a string with an <code>undefined</code> variable, you will get a literal <dfn>string</dfn> of <code>\"undefined\"</code>.",
"Initialize the three variables <code>a</code>, <code>b</code>, and <code>c</code> with <code>5</code>, <code>10</code>, and <code>\"I am a\"</code> respectively so that they will not be <code>undefined</code>."
"assert(typeof a === 'number' && a === 6, 'message: <code>a</code> should be defined and have a value of <code>6</code>');",
"assert(typeof b === 'number' && b === 15, 'message: <code>b</code> should be defined and have a value of <code>15</code>');",
"assert(!/undefined/.test(c) && c === \"I am a String!\", 'message: <code>c</code> should not contain <code>undefined</code> and should have a value of \"I am a String!\"');",
"assert(/a = a \\+ 1;/.test(editor.getValue()) && /b = b \\+ 5;/.test(editor.getValue()) && /c = c \\+ \" String!\";/.test(editor.getValue()), 'message: Do not change code below the line');"
"<code>MYVAR</code> is not the same as <code>MyVar</code> nor <code>myvar</code>. It is possible to have multiple distinct variables with the same name but different casing. It is strongly reccomended that for sake of clarity you <em>do not</em> use this language feature.",
"<h4>Best Practice</h4><div class=\"bestpractice\">Write variable names in Javascript in camelCase. In camelCase, variable names made of multiple words have the first word in all lowercase and the first letter of each subsequent word(s) capitalized.</div>",
"Not all real numbers can accurately be represented in <dfn>floating point</dfn>. This can lead to rounding errors. <a href=\"https://en.wikipedia.org/wiki/Floating_point#Accuracy_problems\" target=\"_blank\">Details Here</a>.",
"In programming, it is common to use assignments to modify the contents of a variable. Remember that everything to the right of the equals sign is evaluated first, so we can say:",
"to add <code>5</code> to <code>myVar</code>. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step.",
"assert(a === 15, 'message: <code>a</code> should equal <code>15</code>');",
"assert(b === 26, 'message: <code>b</code> should equal <code>26</code>');",
"assert(c === 19, 'message: <code>c</code> should equal <code>19</code>');",
"assert(editor.getValue().match(/\\+=/g).length === 3, 'message: You should use the <code>+=</code> operator for each variable');",
"assert(/var a = 3;/.test(editor.getValue()) && /var b = 17;/.test(editor.getValue()) && /var c = 12;/.test(editor.getValue()), 'message: Do not modify the code above the line');"
"assert(a === 5, 'message: <code>a</code> should equal <code>5</code>');",
"assert(b === -6, 'message: <code>b</code> should equal <code>-6</code>');",
"assert(c === 2, 'message: <code>c</code> should equal <code>2</code>');",
"assert(editor.getValue().match(/-=/g).length === 3, 'message: You should use the <code>-=</code> operator for each variable');",
"assert(/var a = 11;/.test(editor.getValue()) && /var b = 9;/.test(editor.getValue()) && /var c = 3;/.test(editor.getValue()), 'message: Do not modify the code above the line');"
"assert(a === 25, 'message: <code>a</code> should equal <code>25</code>');",
"assert(b === 36, 'message: <code>b</code> should equal <code>36</code>');",
"assert(c === 46, 'message: <code>c</code> should equal <code>46</code>');",
"assert(editor.getValue().match(/\\*=/g).length === 3, 'message: You should use the <code>*=</code> operator for each variable');",
"assert(/var a = 5;/.test(editor.getValue()) && /var b = 12;/.test(editor.getValue()) && /var c = 4\\.6;/.test(editor.getValue()), 'message: Do not modify the code above the line');"
"assert(a === 4, 'message: <code>a</code> should equal <code>4</code>');",
"assert(b === 27, 'message: <code>b</code> should equal <code>27</code>');",
"assert(c === 3, 'message: <code>c</code> should equal <code>3</code>');",
"assert(editor.getValue().match(/\\/=/g).length === 3, 'message: You should use the <code>/=</code> operator for each variable');",
"assert(/var a = 48;/.test(editor.getValue()) && /var b = 108;/.test(editor.getValue()) && /var c = 33;/.test(editor.getValue()), 'message: Do not modify the code above the line');"
],
"challengeSeed":[
"var a = 48;",
"var b = 108;",
"var c = 33;",
"",
"// Only modify code below this line",
"",
"a = a / 12;",
"b = b / 4;",
"c = c / 11;",
""
],
"tail":[
"(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = \" + c; })(a,b,c);"
],
"solutions":[
"var a = 48;",
"var b = 108;",
"var c = 33;",
"",
"a /= 12;",
"b /= 4;",
"c /= 11;"
],
"type":"waypoint",
"challengeType":"1",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"56533eb9ac21ba0edf2244b3",
"title":"Convert Celsius to Fahrenheit",
"description":[
"To test your learning you will create a solution \"from scratch\". Place your code between the indicated lines and it will be tested against multiple test cases.",
"The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times 9/5, plus 32.",
"You are given a variable <code>Tc</code> representing a temperature in Celsius. Create a variable <code>Tf</code> and apply the algorithm to assign it the corresponding temperature in Fahrenheit."
"<code>\"your name\"</code> is called a <dfn>string</dfn> <dfn>literal</dfn>. It is a string because it is a series of zero or more characters enclosed in single or double quotes.",
"Create two new <code>string</code> variables: <code>myFirstName</code> and <code>myLastName</code> and assign them the values of your first and last name, respectively."
"assert((function(){if(typeof(myFirstName) !== \"undefined\" && typeof(myFirstName) === \"string\" && myFirstName.length > 0){return true;}else{return false;}})(), 'message: <code>myFirstName</code> should be a string with at least one character in it.');",
"assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return true;}else{return false;}})(), 'message: <code>myLastName</code> should be a string with at least one character in it.');"
"When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: <code>\"</code> or <code>'</code> inside of your string?",
"In JavaScript, you can <dfn>escape</dfn> a quote from considering it as an end of string quote by placing a <dfn>backslash</dfn> (<code>\\</code>) in front of the quote.",
"<code>\"Alan said, \\\"Peter is learning JavaScript\\\".\"</code>",
"This signals JavaScript that the following quote is not the end of the string, but should instead appear inside the string.",
"assert(editor.getValue().match(/\\\\\"/g).length === 4 && editor.getValue().match(/[^\\\\]\"/g).length === 2, 'message: You should use two double quotes (<code>"</code>) and four escaped double quotes (<code>\"</code>) ');"
],
"challengeSeed":[
"var myStr; // Change this line",
"",
""
],
"solutions":[
"var myStr = \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\"\";"
"<dfn>String</dfn> values in JavaScript may be written with single or double quotes, so long as you start and end with the same type of quote. Unlike some languages, single and double quotes are functionally identical in Javascript.",
"The value in using one or the other has to do with the need to <dfn>escape</dfn> quotes of the same type. If you have a string with many double quotes, this can be difficult to read and write. Instead, use single quotes:",
"<code>'This string has \"double quotes\" in it. And \"probably\" lots of them.'</code>",
"assert(editor.getValue().match(/\"/g).length === 4 && editor.getValue().match(/'/g).length === 2, 'message: You should have two single quotes <code>'</code> and four double quotes <code>"</code>');",
"assert(myStr === '<a href=\"http://www.example.com\" target=\"_blank\">Link</a>', 'message: Only remove the backslashes <code>\\</code> used to escape quotes.');"
"assert(myStr === \"\\\\ \\t \\t \\r \\n\", 'message: <code>myStr</code> should have the escape sequences for <code>backslash tab tab carriage-return new-line</code> separated by spaces');"
"In JavaScript, the <code>+</code> operator when used with a <code>String</code> value, it is called <dfn>concatenation</dfn> operator. You can build a string out of other strings by <dfn>concatenating</dfn> them together.",
"",
"<code>'My name is Alan.' + ' And I am able to concatenate.'</code>",
"Build <code>myStr</code> from the strings <code>\"This is the start. \"</code> and <code>\"This is the end.\"</code> using the <code>+</code> operator.",
"assert(myStr === \"This is the start. This is the end.\", 'message: <code>myStr</code> should have a value of <code>This is the start. This is the end</code>');",
"assert(editor.getValue().match(/\"\\s*\\+\\s*\"/g).length > 1, 'message: Use the <code>+</code> operator to build <code>myStr</code>');"
],
"challengeSeed":[
"// Example",
"var ourStr = \"I come first. \" + \"I come second.\";",
"",
"// Only change code below this line",
"",
"var myStr;",
"",
""
],
"solutions":[
"var myStr = \"This is the start. \" + \"This is the end.\";"
"We can also use the <code>+=</code> operator to <dfn>concatenate</dfn> a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines.",
"Build <code>myStr</code> over several lines by concatenating these two strings:<br><code>\"This is the first line. \"</code> and <code>\"This is the second line.\"</code> using the <code>+=</code> operator."
"assert(myStr === \"This is the first line. This is the second line.\", 'message: <code>myStr</code> should have a value of <code>This is the first line. This is the second line.</code>');",
"assert(editor.getValue().match(/\\w\\s*\\+=\\s*\"/g).length > 1 && editor.getValue().match(/\\w\\s*\\=\\s*\"/g).length > 1, 'message: Use the <code>+=</code> operator to build <code>myStr</code>');"
"Sometimes you will need to build a string, <a href=\"https://en.wikipedia.org/wiki/Mad_Libs\">Mad Libs</a> style. By using the concatenation operator (<code>+</code>), you can insert one or more variables into a string you're building.",
"Set <code>myName</code> and build <code>myStr</code> with <code>myName</code> between the strings <code>\"My name is \"</code> and <code>\" and I am swell!\"</code>"
"assert(typeof myName !== 'undefined' && myName.length > 2, 'message: <code>myName</code> should be set to a string at least 3 characters long');",
"assert(editor.getValue().match(/\"\\s*\\+\\s*myName\\s*\\+\\s*\"/g).length > 0, 'message: Use two <code>+</code> operators to build <code>myStr</code> with <code>myName<code> inside it');"
],
"challengeSeed":[
"// Example",
"var ourName = \"Free Code Camp\";",
"var ourStr = \"Hello, our name is \" + ourName + \", how are you?\";",
"",
"// Only change code below this line",
"var myName;",
"var myStr;",
"",
""
],
"solutions":[
"var myName = \"Bob\";",
"var myStr = \"My name is \" + myName + \" and I am swell!\";"
],
"type":"waypoint",
"challengeType":"1",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"56533eb9ac21ba0edf2244ed",
"title":"Appending Variables to Strings",
"description":[
"Just as we can build a string over multiple lines out of string <dfn>literals</dfn>, we can also append variables to a string using the plus equals (<code>+=</code>) operator.",
"assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2, 'message: <code>someAdjective</code> should be set to a string at least 3 characters long');",
"assert(editor.getValue().match(/\\w\\s*\\+=\\s*someAdjective\\s*;/).length > 0, 'message: Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator');"
"You can find the length of a <code>String</code> value by writing <code>.length</code> after the string variable or string literal.",
"<code>\"Alan Peter\".length; // 10</code>",
"For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string <code>\"Charles\"</code> is by using the <code>firstName.length</code> property.",
"Use the <code>.length</code> property to count the number of characters in the <code>lastName</code> variable and assign it to <code>lastNameLength</code>."
"assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), 'message: <code>lastNameLength</code> should be equal to eight.');",
"assert((function(){if(editor.getValue().match(/\\.length/gi) && editor.getValue().match(/\\.length/gi).length >= 2 && editor.getValue().match(/var lastNameLength \\= 0;/gi) && editor.getValue().match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'message: You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.');"
"title":"Use Bracket Notation to Find the First Character in a String",
"description":[
"<code>Bracket notation</code> is a way to get a character at a specific <code>index</code> within a string.",
"Computers don't start counting at 1 like humans do. They start at 0. This is refered to as <dfn>Zero-based</dfn> indexing.",
"For example, the character at index 0 in the word \"Charles\" is \"C\". So if <code>var firstName = \"Charles\"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.",
"Use <dfn>bracket notation</dfn> to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.",
"<strong>Hint</strong><br />Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck."
],
"tests":[
"assert((function(){if(typeof(firstLetterOfLastName) !== \"undefined\" && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) === \"string\" && firstLetterOfLastName === \"L\"){return true;}else{return false;}})(), 'message: The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.');"
"cannot change the value of <code>myStr</code> to \"Job\", because the contents of myStr cannot be altered. Note that this does <em>not</em> mean that <code>myStr</code> cannot be changed, just that the individual characters of a <dfn>string literal</dfn> cannot be changed. The only way to change <code>myStr</code> would be to assign it with a new string, like this:",
"title":"Use Bracket Notation to Find the Last Character in a String",
"description":[
"In order to get the last letter of a string, you can subtract one from the string's length.",
"For example, if <code>var firstName = \"Charles\"</code>, you can get the value of the last letter of the string by using <code>firstName[firstName.length - 1]</code>.",
"title":"Use Bracket Notation to Find the Nth-to-Last Character in a String",
"description":[
"You can use the same principle we just used to retrieve the last character in a string to retrieve the Nth-to-last character.",
"For example, you can get the value of the third-to-last letter of the <code>var firstName = \"Charles\"</code> string by using <code>firstName[firstName.length - 3]</code>",
"We will now use our knowledge of strings to build a \"<a href='https://en.wikipedia.org/wiki/Mad_Libs' target='_blank'>Mad Libs</a>\" style word game we're calling \"Word Blanks\". We have provided a framework for testing your results with different words.",
"The tests will run your function with several different inputs to make sure it works properly."
],
"releasedOn":"11/27/2015",
"tests":[
"assert(typeof wordBlanks(\"\",\"\",\"\",\"\") === 'string', 'message: <code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return a string');",
"assert(wordBlanks(\"\",\"\",\"\",\"\").length > 50, 'message: <code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return at least 50 characters with empty inputs');",
"assert(/dog/.test(test1) && /big/.test(test1) && /ran/.test(test1) && /quickly/.test(test1),'message: <code>wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\")</code> should contain all of the passed words.');",
"assert(/cat/.test(test2) && /little/.test(test2) && /hit/.test(test2) && /slowly/.test(test2),'message: <code>wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\")</code> should contain all of the passed words.');"
"\tresult += \"It \" + myVerb + \" \" + myAdverb + \" around the yard.\";",
"\treturn result;",
"}"
],
"type":"bonfire",
"challengeType":"5",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"bd7993c9c69feddfaeb8bdef",
"title":"Store Multiple Values in one Variable using JavaScript Arrays",
"description":[
"With JavaScript <code>array</code> variables, we can store several pieces of data in one place.",
"You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this:<br /><code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.",
"<strong>Hint</strong><br />Refer to the example code in the text editor if you get stuck."
],
"tests":[
"assert(typeof(myArray) == 'object', 'message: <code>myArray</code> should be an <code>array</code>.');",
"assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'message: The first item in <code>myArray</code> should be a <code>string</code>.');",
"assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'message: The second item in <code>myArray</code> should be a <code>number</code>.');"
],
"challengeSeed":[
"// Example",
"var array = [\"John\", 23];",
"",
"// Only change code below this line.",
"var myArray = [];",
""
],
"tail":[
"(function(z){return z;})(myArray);"
],
"solutions":[
"var myArray = [\"The Answer\", 42];"
],
"type":"waypoint",
"challengeType":"1"
},
{
"id":"cf1111c1c11feddfaeb7bdef",
"title":"Nest one Array within Another Array",
"description":[
"You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 23]]</code>. This is also called a <dfn>Multi-dimensional Array<dfn>.",
"assert(Array.isArray(myArray) && myArray.some(Array.isArray), 'message: <code>myArray</code> should have at least one array nested within another array.');"
"We can access the data inside arrays using <code>indexes</code>.",
"Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array is element <code>0</code>",
"assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return true;}else{return false;}})(), 'message: The variable <code>myData</code> should equal the first value of <code>myArray</code>.');"
"assert((function(){if(typeof(myArray) != 'undefined' && myArray[0] == 3 && myArray[1] == 2 && myArray[2] == 3){return true;}else{return false;}})(), 'message: <code>myArray</code> should now be [3,2,3].');",
"assert((function(){if(editor.getValue().match(/myArray\\[0\\]\\s?=\\s?/g)){return true;}else{return false;}})(), 'message: You should be using correct index to modify the value in <code>myArray</code>.');"
],
"challengeSeed":[
"// Example",
"var ourArray = [1,2,3];",
"ourArray[1] = 3; // ourArray now equals [1,3,3].",
"One way to think of a <dfn>multi-dimensional</dfn> array, is as an <em>array of arrays</em>. When you use brackets to access your array, the first set of bracket refers to the entries in outer-most array, and each subsequent level of brackets refers to the next level of entry in.",
"assert(myData === 8, 'message: <code>myData</code> should be equal to <code>8</code>.');",
"assert(/myArray\\[2\\]\\[1\\]/g.test(editor.getValue()), 'message: You should be using bracket notation to read the value from <code>myArray</code>.');"
"Another way to change the data in an array is with the <code>.pop()</code> function.",
"<code>.pop()</code> is used to \"pop\" a value off of the end of an array. We can store this \"popped off\" value by assigning it to a variable.",
"Any type of entry can be \"popped\" off of an array - numbers, strings, even nested arrays.",
"For example, for the code<br><code>var oneDown = [1, 4, 6].pop();</code><br>the variable <code>oneDown</code> now holds the value <code>6</code> and the array becomes <code>[1, 4]</code>.",
"Use the <code>.pop()</code> function to remove the last item from <code>myArray</code>, assigning the \"popped off\" value to <code>removedFromMyArray</code>."
"Use the <code>.shift()</code> function to remove the first item from <code>myArray</code>, assigning the \"shifted off\" value to <code>removedFromMyArray</code>."
"Not only can you <code>shift</code> elements off of the beginning of an array, you can also <code>unshift</code> elements to the beginning of an array i.e. add elements in front of the array.",
"<code>.unshift()</code> works exactly like <code>.push()</code>, but instead of adding the element at the end of the array, <code>unshift()</code> adds the element at the beginning of the array.",
"The first element in each sub-array should contain a string with the name of the item. The second element should be a number representing the quantity i.e.",
"Each time the function is called it will print out the message <code>\"Hello World\"</code> on the dev console. All of the code between the curly braces will be executed every time the function is called.",
"<ol><li>Create a function called <code>myFunction</code> which prints <code>\"Hi World\"</code> to the dev console.</li><li>Call the function.</li></ol>"
"Functions can take input in the form of <dfn>parameter</dfn>. Parameters are variables that take on the value of the <dfn>arguments</dfn> which are passed in to the function. Here is a function with two parameters, <code>param1</code> and <code>param2</code>:",
"We have passed two arguments, <code>\"Hello\"</code> and <code>\"World\"</code>. Inside the function, <code>param1</code> will equal \"Hello\" and <code>param2</code> will equal \"World\". Note that you could call <code>testFun</code> again with different arguments and the parameters would take on the value of the new arguments.",
"<ol><li>Create a function called <code>myFunction</code> that accepts two arguments and outputs their sum to the dev console.</li><li>Call the function.</li></ol>"
"In Javascript, <dfn>scope</dfn> refers to the visibility of variables. Variables which are defined outside of a function block have <dfn>Global</dfn> scope. This means, they can be seen everywhere in your JavaScript code.",
"Variables which are used without the <code>var</code> keyword are automatically created in the <code>global</code> scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with <code>var</code>.",
"Inside function <code>fun1</code>, assign <code>5</code> to <code>oopsGlobal</code> <strong><em>without</em></strong> using the <code>var</code> keyword."
"Variables which are declared within a function, as well as the function parameters have <dfn>local</dfn> scope. That means, they are only visible within that function. ",
"It is possible to have both a <dfn>local</dfn> and <dfn>global</dfn> variables with the same name. When you do this, the <code>local</code> variable takes precedence over the <code>global</code> variable.",
"If you'll recall from our discussion of <a href=\"waypoint-storing-values-with-the-equal-operator\" target=\"_blank\">Storing Values with the Equal Operator</a>, everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable.",
"assert(processed === 2, 'message: <code>processed</code> should have a value of <code>10</code>');",
"assert(/processed\\s*=\\s*process\\(\\s*7\\s*\\)\\s*;/.test(editor.getValue()), 'message: You should assign <code>process</code> to <code>processed</code>');"
"In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the <code>queue</code> and old items are taken off from the front of the <code>queue</code>.",
"Write a function <code>queue</code> which takes an \"array\" and an \"item\" as arguments. Add the item onto the end of the array, then remove and return the item at the front of the queue."
"<code>if</code> statements require a <dfn>boolean</dfn> condition to evaluate. If the boolean evaluates to <code>true</code>, the statement inside the curly braces executes. If it evaluates to <code>false</code>, the code will not execute.",
"If <code>myVal</code> is greater than <code>10</code>, the function will return <code>\"Greater Than\"</code>. If it is not, the function will return <code>\"Not Greater Than\"</code>.",
"Create an <code>if</code> statement inside the function to return <code>\"Yes\"</code> if <code>testMe</code> is greater than <code>5</code>. Return <code>\"No\"</code> if it is less than or equal to <code>5</code>."
"There are many <dfn>Comparison Operators</dfn> in JavaScript. All of these operators return a boolean <code>true</code> or <code>false</code> value.",
"The most basic operator is the equality operator <code>==</code>. The equality operator compares two values and returns <code>true</code> if they're equivalent or <code>false</code> if they are not. Note that equality is different from assignment (<code>=</code>), which assigns the value at the right of the operator to a variable in the left.",
"Add the <code>equality operator</code> to the indicated line so that the function will return \"Equal\" when <code>val</code> is equivalent to <code>12</code>"
"assert(myTest(10) === \"Not Equal\", 'message: <code>myTest(10)</code> should return \"Not Equal\"');",
"assert(myTest(12) === \"Equal\", 'message: <code>myTest(12)</code> should return \"Equal\"');",
"assert(myTest(\"12\") === \"Equal\", 'message: <code>myTest(\"12\")</code> should return \"Equal\"');",
"assert(editor.getValue().match(/val\\s*==\\s*\\d+/g).length > 0, 'message: You should use the <code>==</code> operator');"
],
"challengeSeed":[
"// Setup",
"function myTest(val) {",
" if (val) { // Change this line",
" return \"Equal\";",
" }",
" return \"Not Equal\";",
"}",
"",
"// Change this value to test",
"myTest(10);"
],
"solutions":[
"function myTest(val) {",
" if (val == 12) {",
" return \"Equal\";",
" }",
" return \"Not Equal\";",
"}"
],
"type":"waypoint",
"challengeType":"1",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"56533eb9ac21ba0edf2244d1",
"title":"Comparison with the Strict Equality Operator",
"description":[
"Strict equality (<code>===</code>) is the counterpart to the equality operator (<code>==</code>). Unlike the equality operator, strict equality tests both the <dfn>type</dfn> and <dfn>value</dfn> of the compared elements.",
"Use strict equality operator in <code>if</code> statement so the function will return \"Equal\" when <code>val</code> is strictly equal to <code>7</code>"
"The inequality operator (<code>!=</code>) is the opposite of the equality operator. It means \"Not Equal\" and returns <code>false</code> where equality would return <code>true</code> and <em>vice versa</em>. Like the equality operator, the inequality operator will convert data types of values while comparing.",
"Add the inequality operator <code>!=</code> in the <code>if</code> statement so that the function will return \"Not Equal\" when <code>val</code> is not equivalent to <code>99</code>"
"The inequality operator (<code>!==</code>) is the opposite of the strict equality operator. It means \"Strictly Not Equal\" and returns <code>false</code> where strict equality would return <code>true</code> and <em>vice versa</em>. Strict inequality will not convert data types.",
"Add the <code>strict inequality operator</code> to the <code>if</code> statement so the function will return \"Not Equal\" when <code>val</code> is not strictly equal to <code>17</code>"
"The greater than operator (<code>></code>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.<br>Like the equality operator, greater than operator will convert data types of values while comparing.",
"assert(myTest(0) === \"10 or Under\", 'message: <code>myTest(0)</code> should return \"10 or Under\"');",
"assert(myTest(10) === \"10 or Under\", 'message: <code>myTest(10)</code> should return \"10 or Under\"');",
"assert(myTest(11) === \"Over 10\", 'message: <code>myTest(11)</code> should return \"Over 10\"');",
"assert(myTest(99) === \"Over 10\", 'message: <code>myTest(99)</code> should return \"Over 10\"');",
"assert(myTest(100) === \"Over 10\", 'message: <code>myTest(100)</code> should return \"Over 10\"');",
"assert(myTest(101) === \"Over 100\", 'message: <code>myTest(101)</code> should return \"Over 100\"');",
"assert(myTest(150) === \"Over 100\", 'message: <code>myTest(150)</code> should return \"Over 100\"');\nassert(editor.getValue().match(/val\\s*>\\s*\\d+/g).length > 1, 'message: You should use the <code>></code> operator at least twice');"
],
"challengeSeed":[
"function myTest(val) {",
" if (val) { // Change this line",
" return \"Over 100\";",
" }",
" ",
" if (val) { // Change this line",
" return \"Over 10\";",
" }",
"",
" return \"10 or Under\";",
"}",
"",
"// Change this value to test",
"myTest(10);"
],
"solutions":[
"function myTest(val) {",
" if (val > 100) { // Change this line",
" return \"Over 100\";",
" }",
" if (val > 10) { // Change this line",
" return \"Over 10\";",
" }",
" return \"10 or Under\";",
"}"
],
"type":"waypoint",
"challengeType":"1",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"56533eb9ac21ba0edf2244d5",
"title":"Comparison with the Greater Than Equal To Operator",
"The greater than equal to operator (<code>>=</code>) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.<br>Like the equality operator, greater than equal to operator will convert data types while comparing.",
"The <dfn>less than</dfn> operator (<code><</code>) compares the values of two numbers. If the number to the left is less than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>. Like the equality operator, <dfn>less than</dfn> operator converts data types while comparing.",
"title":"Comparison with the Less Than Equal To Operator",
"description":[
"The <code>less than equal to</code> operator (<code><=</code>) compares the values of two numbers. If the number to the left is less than or equl the number to the right, it returns <code>true</code>. If the number on the left is greater than the number on the right, it returns <code>false</code>. Like the equality operator, <code>less than equal to</code> converts data types.",
"title":"Comparisons with the Logical And Operator",
"description":[
"Sometimes you will need to test more than one thing at a time. The <dfn>logical and</dfn> operator (<code>&&</code>) returns <code>true</code> if and only if the <dfn>operands</dfn> to the left and right of it are true.",
"The same effect could be achieved by nesting an if statement inside another if:",
"Combine the two if statements into one statement which will return <code>\"Yes\"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>\"No\"</code>."
"The <dfn>logical or</dfn> operator (<code>||</code>) returns <code>true</code> if either of<dfn>operands</dfn> is true, or false if neither is true.",
"The pattern below should look familiar from prior waypoints:",
"<blockquote>if (num > 10) { <br /> return \"No\";<br />}<br />if (num < 5) {<br /> return \"No\";<br />}<br />return \"Yes\";</blockquote>Will only return \"Yes\" if <code>num</code> is between <code>5</code> and <code>10</code>. The same logic can be written as:<blockquote>if (num > 10 || num < 5) {<br /> return \"No\";<br />}</br>return \"Yes\";</blockquote>",
"Combine the two if statements into one statement which returns <code>\"Inside\"</code> if <code>val</code> is between <code>10</code> and <code>20</code>, inclusive. Otherwise, return <code>\"Outside\"</code>."
"In the game of golf each hole has a <dfn>par</dfn> for the average number of <dfn>strokes</dfn> needed to sink the ball. Depending on how far above or below <code>par</code> your <code>stokes</code> are, there is a different nickname.",
"Your function will be passed a <code>par</code> and <code>strokes</code>. Return strings according to this table:",
"<table class=\"table table-striped\"><thead><tr><th>Stokes</th><th>Return</th></tr></thead><tbody><tr><td>1</td><td>\"Hole-in-one!\"</td></tr><tr><td><= par - 2</td><td>\"Eagle\"</td></tr><tr><td>par - 1</td><td>\"Birdie\"</td></tr><tr><td>par</td><td>\"Par\"</td></tr><tr><td>par + 1</td><td>\"Bogey\"</td></tr><tr><td>par + 2</td><td>\"Double Bogey\"</td></tr><tr><td>>= par + 3</td><td>\"Go Home!\"</td></tr></tbody></table>",
"<code>par</code> and <code>strokes</code> will always be numeric and positive."
"When a condition for an <code>if</code> statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an <code>else</code> statement, an alternate block of code can be executed.",
"<blockquote>if (num > 10) {<br /> return \"Bigger than 10\";<br />} else {<br /> return \"10 or Less\";<br />}</blockquote>",
"assert(editor.getValue().match(/if/g).length === 1, 'message: You should only have one <code>if</code> statement');",
"assert(/else/g.test(editor.getValue()), 'message: You should use an <code>else</code> statement');",
"assert(myTest(4) === \"5 or Smaller\", 'message: <code>myTest(4)</code> should return \"5 or Smaller\"');",
"assert(myTest(5) === \"5 or Smaller\", 'message: <code>myTest(5)</code> should return \"5 or Smaller\"');",
"assert(myTest(6) === \"Bigger than 5\", 'message: <code>myTest(6)</code> should return \"Bigger than 5\"');",
"assert(myTest(10) === \"Bigger than 5\", 'message: <code>myTest(10)</code> should return \"Bigger than 5\"');",
"assert(/var result = \"\";/.test(editor.getValue()) && /return result;/.test(editor.getValue()), 'message: Do not change the code above or below the lines.');"
"If you have multiple conditions that need to be met, you can chain <code>if</code> statements together with <code>else if</code> statements.",
"<blockquote>if (num > 15) {<br /> return \"Bigger then 15\";<br />} else if (num < 5) {<br /> return \"Smaller than 5\";<br />} else {<br /> return \"Between 5 and 15\";<br />}</blockquote>",
"<h4>Instructions<h4>Convert the logic to use <code>else if</code> statements."
],
"releasedOn":"11/27/2015",
"tests":[
"assert(editor.getValue().match(/else/g).length > 1, 'message: You should have at least two <code>else</code> statements');",
"assert(editor.getValue().match(/if/g).length > 1, 'message: You should have at least two <code>if</code> statements');",
"assert(myTest(0) === \"Smaller than 5\", 'message: <code>myTest(4)</code> should return \"Smaller than 5\"');",
"assert(myTest(5) === \"Between 5 and 10\", 'message: <code>myTest(5)</code> should return \"Smaller than 5\"');",
"assert(myTest(7) === \"Between 5 and 10\", 'message: <code>myTest(7)</code> should return \"Between 5 and 10\"');",
"assert(myTest(10) === \"Between 5 and 10\", 'message: <code>myTest(10)</code> should return \"Between 5 and 10\"');",
"assert(myTest(12) === \"10 or Bigger\", 'message: <code>myTest(12)</code> should return \"10 or Bigger\"');"
],
"challengeSeed":[
"function myTest(val) {",
" if(val > 10) {",
" return \"10 or Bigger\";",
" }",
" ",
" if(val < 5) {",
" return \"Smaller than 5\";",
" }",
" ",
" return \"Between 5 and 10\";",
"}",
" ",
"// Change this value to test",
"myTest(7);",
""
],
"solutions":[
"function myTest(val) {",
" if(val > 10) {",
" return \"10 or Bigger\";",
" } else if(val < 5) {",
" return \"Smaller than 5\";",
" } else {",
" return \"Between 5 and 10\";",
" }",
"}"
],
"type":"waypoint",
"challengeType":"1",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"56533eb9ac21ba0edf2244dc",
"title":"Chaining If/Else Statements",
"description":[
"<code>if...else if</code> statements can be chained together for complex logic. Here is <dfn>pseudocode</dfn> of multiple chained <code>if</code>/<code>else if</code> statements:",
"title":"Selecting from many options with Switch Statements",
"description":[
"If you have many options to choose from use a <code>switch</code> statement A <code>switch</code> statement tests a value and has many <code>case</code> statements which define that value can be, shown here in <dfn>pseudocode<dfn>:",
"<code>case</code> values are tested with strict equality (<code>===</code>). The <code>break</code> tells Javascript to stop executing statements. If the <code>break</code> is omitted, the next statement will be executed.",
"Write a switch statement to set <code>answer</code> for the following conditions:<br /><code>1</code> - \"alpha\"<br /><code>2</code> - \"beta\"<br /><code>3</code> - \"gamma\"<br /><code>4</code> - \"delta\""
"assert(myTest(1) === \"alpha\", 'message: <code>myTest(1) should have a value of \"alpha\"');",
"assert(myTest(2) === \"beta\", 'message: <code>myTest(2) should have a value of \"beta\"');",
"assert(myTest(3) === \"gamma\", 'message: <code>myTest(3) should have a value of \"gamma\"');",
"assert(myTest(4) === \"delta\", 'message: <code>myTest(4) should have a value of \"delta\"');",
"assert(!/else/g.test(editor.getValue()) || !/if/g.test(editor.getValue()), 'message: You should not use any <code>if</code> or <code>else</code> statements');",
"assert(editor.getValue().match(/break/g).length > 2, 'message: You should have at least 3 <code>break</code> statements');"
"title":"Adding a default option in Switch statements",
"description":[
"In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can use the <code>default</code> statement where a <code>case</code> would go. Think of it like an <code>else</code> statement for <code>switch</code>.",
"A <code>default</code> statement should be the last \"<code>case</code>\" in the list.",
"Write a switch statement to set <code>answer</code> for the following conditions:<br /><code>\"a\"</code> - \"apple\"<br /><code>\"b\"</code> - \"bird\"<br /><code>\"c\"</code> - \"cat\"<br /><code>default</code> - \"stuff\""
"assert(myTest(\"a\") === \"apple\", 'message: <code>myTest(\"a\") should have a value of \"apple\"');",
"assert(myTest(\"b\") === \"bird\", 'message: <code>myTest(\"b\") should have a value of \"bird\"');",
"assert(myTest(\"c\") === \"cat\", 'message: <code>myTest(\"c\") should have a value of \"cat\"');",
"assert(myTest(\"d\") === \"stuff\", 'message: <code>myTest(\"d\") should have a value of \"stuff\"');",
"assert(myTest(4) === \"stuff\", 'message: <code>myTest(4) should have a value of \"stuff\"');",
"assert(!/else/g.test(editor.getValue()) || !/if/g.test(editor.getValue()), 'message: You should not use any <code>if</code> or <code>else</code> statements');",
"assert(editor.getValue().match(/break/g).length > 2, 'message: You should have at least 3 <code>break</code> statements');"
"title":"Multiple Identical Options in Switch Statements",
"description":[
"If the <code>break</code> statement is ommitted from a <code>switch</code> statement <code>case</code>, the following <code>case</code> statement(s). If you have mutiple inputs with the same output, you can represent them in a <code>switch</code> statement like this:",
"<blockquote>switch(val) {<br /> case 1:<br /> case 2:<br /> case 3:<br /> result = \"1, 2, or 3\";<br /> break;<br /> case 4:<br /> result = \"4 alone\";<br />}</blockquote>",
"Cases for 1, 2, and 3 will all produce the same result.",
"Write a switch statement to set <code>answer</code> for the following ranges:<br /><code>1-3</code> - \"Low\"<br /><code>4-6</code> - \"Mid\"<br /><code>7-9</code> - \"High\"",
"<strong>Note</strong><br />You will need to have a <code>case</code> statement for each number in the range."
],
"releasedOn":"11/27/2015",
"tests":[
"assert(myTest(1) === \"Low\", 'message: <code>myTest(1)</code> should return \"Low\"');",
"assert(myTest(2) === \"Low\", 'message: <code>myTest(2)</code> should return \"Low\"');",
"assert(myTest(3) === \"Low\", 'message: <code>myTest(3)</code> should return \"Low\"');",
"assert(myTest(4) === \"Mid\", 'message: <code>myTest(4)</code> should return \"Mid\"');",
"assert(myTest(5) === \"Mid\", 'message: <code>myTest(5)</code> should return \"Mid\"');",
"assert(myTest(6) === \"Mid\", 'message: <code>myTest(6)</code> should return \"Mid\"');",
"assert(myTest(7) === \"High\", 'message: <code>myTest(7)</code> should return \"High\"');",
"assert(myTest(8) === \"High\", 'message: <code>myTest(8)</code> should return \"High\"');",
"assert(myTest(9) === \"High\", 'message: <code>myTest(9)</code> should return \"High\"');",
"assert(!/else/g.test(editor.getValue()) || !/if/g.test(editor.getValue()), 'message: You should not use any <code>if</code> or <code>else</code> statements');",
"assert(editor.getValue().match(/case/g).length === 9, 'message: You should have nine <code>case</code> statements');"
"If you have many options to choose from, a <code>switch</code> statement can be easier to write than many chained <code>if</code>/<code>if else</code> statements. The following:",
"You may recall from <a href=\"challenges/waypoint-comparison-with-the-equality-operator\">Comparison with the Equality Operator</a> that all comparison operators return a boolean <code>true</code> or <code>false</code> value.",
"A common <dfn>anti-pattern</dfn> is to use an <code>if/else</code> statement to do a comparison and then <code>return</code> <code>true</code>/<code>false</code>:",
"In the casino game Blackjack, a player can gain an advantage over the house by keeping track of the relative number of high and low cards remaining in the deck. This is called <a href=\"https://en.wikipedia.org/wiki/Card_counting\">Card Counting</a>. ",
"Having more high cards remaining in the deck favors the player. Each card is assigned a value according to the table below. When the count is positive, the player should bet high. When the count is zero or negative, the player should bet low.",
"You will write a card counting function. It will recieve a <code>card</code> parameter and increment or decrement the global <code>count</code> variable according to the card's value (see table). The function will then return the current count and the string <code>\"Bet\"</code> if the count if positive, or <code>\"Hold\"</code> if the count is zero or negative.",
"You may have heard the term <code>object</code> before.",
"Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.",
"Make an object that represents a dog called <code>myDog</code> which contains the properties <code>\"name\"</code> (a string), <code>\"legs\"</code>, <code>\"tails\"</code> and <code>\"friends\"</code>.",
"You can set these object properties to whatever values you want, as long <code>\"name\"</code> is a string, <code>\"legs\"</code> and <code>\"tails\"</code> are numbers, and <code>\"friends\"</code> is an array."
"assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof(z.name) === \"string\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof(z.legs) === \"number\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof(z.tails) === \"number\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.');"
"title":"Accessing Objects Properties with the Dot Operator",
"description":[
"There are two ways to access the properties of an object: the dot operator (<code>.</code>) and bracket notation (<code>[]</code>), similar to an array.",
"The dot operator is what you use when you know the name of the property you're trying to access ahead of time.",
"Here is a sample of using the <code>.</code> to read an object property:",
"assert(typeof hatValue === 'string' , 'message: <code>hatValue</code> should be a string');",
"assert(hatValue === 'ballcap' , 'message: The value of <code>hatValue</code> should be <code>\"ballcap\"</code>');",
"assert(typeof shirtValue === 'string' , 'message: <code>shirtValue</code> should be a string');",
"assert(shirtValue === 'jersey' , 'message: The value of <code>shirtValue</code> should be <code>\"jersey\"</code>');\nassert(editor.getValue().match(/testObj\\.\\w+/g).length > 1, 'message: You should use dot notation twice');"
"(function(a,b) { return \"hatValue = '\" + a + \"', shirtValue = '\" + b + \"'\"; })(hatValue,shirtValue);"
],
"solutions":[
"var testObj = {",
" \"hat\": \"ballcap\",",
" \"shirt\": \"jersey\",",
" \"shoes\": \"cleats\"",
"};",
"",
"var hatValue = testObj.hat; ",
"var shirtValue = testObj.shirt;"
],
"type":"waypoint",
"challengeType":"1",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"56533eb9ac21ba0edf2244c8",
"title":"Accessing Objects Properties with Bracket Notation",
"description":[
"The second way to access the properties of an objectis bracket notation (<code>[]</code>). If the property of the object you are trying to access has a space in it, you will need to use bracket notation.",
"Here is a sample of using bracket notation to read an object property:",
"assert(typeof entreeValue === 'string' , 'message: <code>entreeValue</code> should be a string');",
"assert(entreeValue === 'hamburger' , 'message: The value of <code>entreeValue</code> should be <code>\"hamburger\"</code>');",
"assert(typeof drinkValue === 'string' , 'message: <code>drinkValue</code> should be a string');",
"assert(drinkValue === 'water' , 'message: The value of <code>drinkValue</code> should be <code>\"water\"</code>');",
"assert(editor.getValue().match(/testObj\\[('|\")[^'\"]+\\1\\]/g).length > 1, 'message: You should use bracket notation twice');"
],
"challengeSeed":[
"// Setup",
"var testObj = {",
" \"an entree\": \"hamburger\",",
" \"my side\": \"veggies\",",
" \"the drink\": \"water\"",
"};",
"",
"// Only change code below this line",
"",
"var entreeValue = testObj; // Change this line",
"var drinkValue = testObj; // Change this line"
],
"tail":[
"(function(a,b) { return \"entreeValue = '\" + a + \"', shirtValue = '\" + b + \"'\"; })(entreeValue,drinkValue);"
],
"solutions":[
"var testObj = {",
" \"an entree\": \"hamburger\",",
" \"my side\": \"veggies\",",
" \"the drink\": \"water\"",
"};",
"var entreeValue = testObj[\"an entree\"];",
"var drinkValue = testObj['the drink'];"
],
"type":"waypoint",
"challengeType":"1",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"56533eb9ac21ba0edf2244c9",
"title":"Accessing Objects Properties with Variables",
"description":[
"Another use of bracket notation on objects is to use a variable to access a property. This can be very useful for itterating through lists of object properties or for doing lookups.",
"Here is an example of using a variable to access a property:",
"Note that we do <em>not</em> use quotes around the variable name when using it to access the property because we are using the <em>value</em> of the variable, not the <em>name</em>",
"After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update.",
"Update the <code>myDog</code> object's name property. Let's change her name from \"Coder\" to \"Happy Coder\". You can use either dot or bracket notation."
"Objects can be thought of as a key/value storage, like a dictonary. If you have tabular data, you can use an object to \"lookup\" values rather than a <code>switch</code> statement or an <code>if...else</code> chain. This is most useful when you know that your input data is limited to a certain range.",
"Here is an example of a simple reverse alphabet lookup:",
"assert(numberLookup(0) === 'zero', 'message: <code>numberLookup(0)</code> should equal <code>\"zero\"</code>');",
"assert(numberLookup(1) === 'one', 'message: <code>numberLookup(1)</code> should equal <code>\"one\"</code>');",
"assert(numberLookup(2) === 'two', 'message: <code>numberLookup(2)</code> should equal <code>\"two\"</code>');",
"assert(numberLookup(3) === 'three', 'message: <code>numberLookup(3)</code> should equal <code>\"three\"</code>');",
"assert(numberLookup(4) === 'four', 'message: <code>numberLookup(4)</code> should equal <code>\"four\"</code>');",
"assert(numberLookup(5) === 'five', 'message: <code>numberLookup(5)</code> should equal <code>\"five\"</code>');",
"assert(numberLookup(6) === 'six', 'message: <code>numberLookup(6)</code> should equal <code>\"six\"</code>');",
"assert(numberLookup(7) === 'seven', 'message: <code>numberLookup(7)</code> should equal <code>\"seven\"</code>');",
"assert(numberLookup(8) === 'eight', 'message: <code>numberLookup(8)</code> should equal <code>\"eight\"</code>');",
"assert(numberLookup(9) === 'nine', 'message: <code>numberLookup(9)</code> should equal <code>\"nine\"</code>');",
"assert(!/case|switch|if/g.test(editor.getValue()), 'message: You should not use <code>case</code>, <code>switch</code>, or <code>if</code> statements');"
"Sometimes it is useful to check of the property of a given object exists or not. We can use the <code>.hasOwnProperty([propname])</code> method of objects to determine if that object has the given property name. <code>.hasOwnProperty()</code> returns <code>true</code> or <code>false</code> if the property is found or not.",
" Modify function <code>checkObj</code> to test <code>myObj</code> for <code>checkProp</code>. If the property is found, return that property's value. If not return <code>\"Not Found\"</code>."
],
"tests":[
"assert(checkObj(\"gift\") === \"pony\", 'message: <code>checkObj(\"gift\")</code> should return <code>\"pony\"</code>.');",
"assert(checkObj(\"pet\") === \"kitten\", 'message: <code>checkObj(\"gift\")</code> should return <code>\"kitten\"</code>.');",
"assert(checkObj(\"house\") === \"Not Found\", 'message: <code>checkObj(\"house\")</code> should return <code>\"Not Found\"</code>.');"
"JavaScript Object Notation or <code>JSON</code> uses the format of Javascript Objects to store data. JSON is flexible becuase it allows for data structures with arbitrary combinations of <dfn>strings</dfn>, <dfn>numbers</dfn>, <dfn>booleans</dfn>, <dfn>arrays</dfn>, and <dfn>objects</dfn>. ",
"This is an array of objects and the object has various peices of <dfn>metadata</dfn> about an album. It also has a nested array of formats. Additional album records could be added to the top level array.",
"Add a new album to the <code>myMusic</code> JSON object. Add <code>artist</code> and <code>title</code> strings, <code>release_year</code> year, and a <code>formats</code> array of strings."
"assert(Array.isArray(myMusic), 'message: <code>myMusic</code> should be an array');",
"assert(myMusic.length > 1, 'message: <code>myMusic</code> should have at least two elements');",
"assert(typeof myMusic[1] === 'object', 'message: <code>myMusic[1]</code> should be an object');",
"assert(Object.keys(myMusic[1]).length > 3, 'message: <code>myMusic[1]</code> should have at least 4 properties');",
"assert(myMusic[1].hasOwnProperty('artist') && typeof myMusic[1].artist === 'string', 'message: <code>myMusic[1]</code> should contain an <code>artist</code> property which is a string');",
"assert(myMusic[1].hasOwnProperty('title') && typeof myMusic[1].title === 'string', 'message: <code>myMusic[1]</code> should contain a <code>title</code> property which is a string');",
"assert(myMusic[1].hasOwnProperty('release_year') && typeof myMusic[1].release_year === 'number', 'message: <code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number');",
"assert(myMusic[1].hasOwnProperty('formats') && Array.isArray(myMusic[1].formats), 'message: <code>myMusic[1]</code> should contain a <code>formats</code> property which is an array');",
"assert(typeof myMusic[1].formats[0] === 'string' && myMusic[1].formats.length > 1, 'message: <code>formats</code> should be an array of strings with at least two elements');"
],
"challengeSeed":[
"var myMusic = [",
" {",
" \t\"artist\": \"Billy Joel\",",
" \"title\": \"Piano Man\",",
" \"release_year\": 1993,",
" \"formats\": [ ",
" \"CS\", ",
" \"8T\", ",
" \"LP\" ],",
" \"gold\": true",
" }",
" // Add record here",
"];",
""
],
"tail":[
"(function(x){ if (Array.isArray(x)) { return JSON.stringify(x); } return \"myMusic is not an array\"})(myMusic);"
],
"solutions":[
"var myMusic = [",
" {",
" \t\"artist\": \"Billy Joel\",",
" \"title\": \"Piano Man\",",
" \"release_year\": 1993,",
" \"formats\": [ ",
" \"CS\", ",
" \"8T\", ",
" \"LP\" ],",
" \"gold\": true",
" }, ",
" {",
" \"artist\": \"ABBA\",",
" \"title\": \"Ring Ring\",",
" \"release_year\": 1973,",
" \"formats\": [ ",
" \"CS\", ",
" \"8T\", ",
" \"LP\",",
"\t \"CD\",",
"\t]",
" }",
"}",
" // Add record here",
"];"
],
"type":"waypoint",
"challengeType":"1",
"nameCn":"",
"nameFr":"",
"nameRu":"",
"nameEs":"",
"namePt":""
},
{
"id":"56533eb9ac21ba0edf2244cc",
"title":"Accessing Nested Objects in JSON",
"description":[
"The properties and sub-properties of JSON objects can be accessed by chaining together the dot or bracket notation.",
"Access the <code>myStorage</code> JSON object to retrieve the contents of the <code>glove box</code>. Only use object notation for properties with a space in their name."
"assert(gloveBoxContents === \"maps\", 'message: <code>gloveBoxContents</code> should equal \"maps\"');",
"assert(/=\\s*myStorage\\.car\\.inside\\[([\"'])glove box\\1\\]/.test(editor.getValue()), 'message: Use dot and bracket notation to access <code>myStorage</code>');"
"As we have seen in earlier examples, JSON objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.",
"Here is an example of how to access a nested array:",
"You are given a JSON object representing (a small part of) your record collection. Each album is identified by a unqiue id number and which has several properties. Not all albums have complete information.",
"Write a function which takes an <code>id</code>, a property (<code>prop</code>), and a <code>value</code>.",
"For the given <code>id</code> in <code>collection</code>:",
"If <code>value</code> is non-blank (<code>value !== \"\"</code>), then update or set the <code>value</code> for the <code>prop</code>.",
"If the <code>prop</code> is <code>\"tracks\"</code> and <code>value</code> is non-blank, push the <code>value</code> onto the end of the <code>tracks</code> array.",
"collection = collectionCopy; assert(update(5439, \"artist\", \"ABBA\")[5439][\"artist\"] === \"ABBA\", 'message: After <code>update(5439, \"artist\", \"ABBA\")</code>, <code>artist</code> should be <code>\"ABBA\"</code>');",
"update(2548, \"artist\", \"\"); assert(!collection[2548].hasOwnProperty(\"artist\"), 'message: After <code>update(2548, \"artist\", \"\")</code>, <code>artist</code> should not be set');",
"assert(update(1245, \"tracks\", \"Addicted to Love\")[1245][\"tracks\"].length === 1, 'message: After <code>update(1245, \"tracks\", \"Addicted to Love\")</code>, <code>tracks</code> should have a length of <code>1</code>');",
"update(2548, \"tracks\", \"\"); assert(!collection[2548].hasOwnProperty(\"tracks\"), 'message: After <code>update(2548, \"tracks\", \"\")</code>, <code>tracks</code> should not be set');"
"The <code>initialization</code> statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.",
"The <code>condition</code> statement is evaluated at the beginning of every loop iteration and will continue as long as it evalutes to <code>true</code>. When <code>condition</code> is <code>false</code> at the start of the iteration, the loop will stop executing. This means if <code>condition</code> starts as <code>false</code>, your loop will never execute.",
"The <code>final-expression</code> is executed at the end of each loop iteration, prior to the next <code>condition</code> check and is usually used to increment or decrement your loop counter.",
"In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i < 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
"A for loop can also count backwards, so long as we can define the right conditions.",
"In order to count backwards by twos, we'll need to change our <code>initialization</code>, <code>condition</code>, and <code>final-expression</code>.",
"We'll start at <code>i = 10</code> and loop while <code>i > 0</code>. We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.",
"title":"Iterate Through an Array with a For Loop",
"description":[
"A common task in Javascript is to iterate through the contents of an array. One way to do that is with a <code>for</code> loop. This code will output each element of the array <code>arr</code> to the console:",
"Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our <dfn>condition</dfn> for this loop is <code>i < arr.length</code>, which stops when <code>i</code> is at length - 1.",
"If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example:",
"This outputs each sub-element in <code>arr</code> one at a time. Note that for the inner loop we are checking the <code>.length</code> of <code>arr[i]</code>, since <code>arr[i]</code> is itself an array.",
"Another type of JavaScript loop is called a \"while loop\", because it runs \"while\" something is true and stops once that something is no longer true.",
"One of the simplest and most widely known <dfn>ciphers</dfn> is a <code>Caesar cipher</code>, also known as a <code>shift cipher</code>. In a <code>shift cipher</code> the meanings of the letters are shifted by some set amount. ",
"A common modern use is the <a href=\"https://en.wikipedia.org/wiki/ROT13\">ROT13</a> cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O' and so on.",
"Write a function which takes a <code>ROT13</code> encoded string as input and returns a decoded string. All letters will be uppercase. Do not transform any non-alphabetic character (IE: spaces, punctiation), but do pass them on.",
"The provided code transforms the input into an array for you, <code>codeArr</code>. Place the decoded values into the <code>decodedArr</code> array where the provided code will transform it back into a string."
"assert(rot13(\"SERR PBQR PNZC\") === \"FREE CODE CAMP\", 'message: <code>rot13(\"SERR PBQR PNZC\")</code> should decode to <code>\"FREE CODE CAMP\"</code>');",
"assert(rot13(\"SERR CVMMN!\") === \"FREE PIZZA!\", 'message: <code>rot13(\"SERR CVMMN!\")</code> should decode to <code>\"FREE PIZZA!\"</code>');",
"assert(rot13(\"SERR YBIR?\") === \"FREE LOVE?\", 'message: <code>rot13(\"SERR YBIR?\")</code> should decode to <code>\"FREE LOVE?\"</code>');",
"assert(rot13(\"GUR DHVPX OEBJA QBT WHZCRQ BIRE GUR YNML SBK.\") === \"THE QUICK BROWN DOG JUMPED OVER THE LAZY FOX.\", 'message: <code>rot13(\"GUR DHVPX OEBJA QBT WHZCRQ BIRE GUR YNML SBK.\")</code> should decode to <code>\"THE QUICK BROWN DOG JUMPED OVER THE LAZY FOX.\"</code>');"
"assert(editor.getValue().match(/Math\\.random/g).length >= 0, 'message: You should be using <code>Math.random</code> to generate the random decimal number.');"
"See how <code>Math.floor</code> takes <code>(Math.random() * 20)</code> as its argument? That's right - you can pass a function to another function as an argument.",
"assert(typeof(myFunction()) === \"number\" && (function(){var r = myFunction();return Math.floor(r) === r;})(), 'message: The result of <code>myFunction</code> should be a whole number.');",
"assert(editor.getValue().match(/\\(\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\*\\s*?10\\s*?\\)/g) || editor.getValue().match(/\\(\\s*?10\\s*?\\*\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\)/g), 'message: You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.');",
"assert(editor.getValue().match(/Math.floor/g).length > 1, 'message: You should use <code>Math.floor</code> to remove the decimal part of the number.');"
"Instead of generating a random number between zero and a given number like we did before, we can generate a random number that falls within a range of two specific numbers.",
"Then create a function called <code>myFunction</code> that returns a random number that's greater than or equal to <code>myMin</code>, and is less than or equal to <code>myMax</code>."
"assert(myFunction() >= myMin, 'message: The random number generated by <code>myFunction</code> should be greater than or equal to your minimum number, <code>myMin</code>.');",
"assert(myFunction() <= myMax, 'message: The random number generated by <code>myFunction</code> should be less than or equal to your maximum number, <code>myMax</code>.');",
"assert((function(){if(editor.getValue().match(/myMax/g).length > 1 && editor.getValue().match(/myMin/g).length > 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return true;}else{return false;}})(), 'message: <code>myFunction()</code> should use use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.');"
"For example, if we wanted to find the word <code>the</code> in the string <code>The dog chased the cat</code>, we could use the following <code>regular expression</code>: <code>/the/gi</code>",
"Let's try selecting all the occurrences of the word <code>and</code> in the string <code>Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it</code>.",
"assert(editor.getValue().match(/\\/and\\/gi/), 'message: Use <code>regular expressions</code> to find the word <code>and</code> in <code>testString</code>.');"
"For numbers this is often written as <code>/\\d+/g</code>, where the <code>+</code> following the digit selector allows this regular expression to match multi-digit numbers.",
"Use the <code>\\d</code> selector to select the number of numbers in the string, allowing for the possibility of multi-digit numbers."
"assert(editor.getValue().match(/\\/\\\\d\\+\\//g), 'message: Use the <code>/\\d+/g</code> regular expression to find the numbers in <code>testString</code>.');",
"We can also use regular expression selectors like <code>\\s</code> to find whitespace in a string.",
"The whitespace characters are <code>\" \"</code> (space), <code>\\r</code> (the carriage return), <code>\\n</code> (newline), <code>\\t</code> (tab), and <code>\\f</code> (the form feed).",
"The whitespace regular expression looks like this:",
"assert(editor.getValue().match(/\\/\\\\s\\+\\//g), 'message: Use the <code>/\\s+/g</code> regular expression to find the spaces in <code>testString</code>.');",
"assert(editor.getValue().match(/\\/\\\\S\\/g/g), 'message: Use the <code>/\\S/g</code> regular expression to find non-space characters in <code>testString</code>.');",
"For this we will need to generate three random numbers between <code>1</code> and <code>3</code> to represent the possible values of each individual slot.",
"Generate the random numbers by using the system we used earlier (an explanation of the formula can be found <a href=\"https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Waypoint-Generate-Random-Whole-Numbers-within-a-Range#explanation\">here</a>):",
"assert(typeof(runSlots($(\".slot\"))[0]) === \"number\" && runSlots($(\".slot\"))[0] > 0 && runSlots($(\".slot\"))[0] < 4, '<code>slotOne</code> should be a random number.')",
"assert(typeof(runSlots($(\".slot\"))[1]) === \"number\" && runSlots($(\".slot\"))[1] > 0 && runSlots($(\".slot\"))[1] < 4, '<code>slotTwo</code> should be a random number.')",
"assert(typeof(runSlots($(\".slot\"))[2]) === \"number\" && runSlots($(\".slot\"))[2] > 0 && runSlots($(\".slot\"))[2] < 4, '<code>slotThree</code> should be a random number.')",
"assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1/gi) !== null){return editor.match(/slot.*?=.*?\\(.*?\\).*?/gi).length >= 3;}else{return false;}})(), 'You should have used <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> three times to generate your random numbers.')"
"If they have, we should notify our user that they've won and we should return <code>null</code>.",
"<code>null</code> is a JavaScript data structure that means nothing.",
"The user wins when all the three numbers match. Let's create an <code>if statement</code> with multiple conditions in order to check whether all numbers are equal.",
"assert((function(){var data = runSlots();return data === null || data.toString().length === 1;})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return <code>null</code>.')"
"assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return true;}else{return false;}})(), 'You should be displaying the result of the slot numbers in the corresponding slots.')",
"assert((editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi) && editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )), 'You should have used the the selector given in the description to select each slot and assign it the value of <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code> respectively.')"
"assert((editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi) && editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi).length >= 3), 'Use the provided code three times. One for each slot.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[0\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[0]</code> at least once.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[1\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[1]</code> at least once.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[2\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[2]</code> at least once.')",
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the <code>slotOne</code> value at least once.')",
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the <code>slotTwo</code> value at least once.')",
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the <code>slotThree</code> value at least once.')"
