W3CSchool实战闯关笔记（JavaScript）

 //handsome
 /**
 *ugly
 **/

第一关注释

 // 举例
 var myName;

 // Define myName below this line

第二关声明变量

 // Setup
 var a;
 var b = 2;

 // Only change code below this line
 var a = 7;
 var b = a;

第三关变量赋值

 // 举例
 var ourVar = 19;

 // Only change code below this line

 var a = 9;

第四关赋初值

 // Initialize these three variables
 var a = 5;
 var b = 10;
 var c = "I am a";

 // Do not change code below this line

 a = a + 1;
 b = b + 5;
 c = c + " String!";

第五关未定义变量

 // Declarations
 var studlyCapVar;
 var properCamelCase;
 var titleCaseOver;

 // Assignments
 studlyCapVar = 10;
 properCamelCase = "A String";
 titleCaseOver = 9000;

第六关大小写敏感

 var sum = 10 + 10;

第七关加法

 var difference = 45 - 33;

第八关减法

 var product = 8 * 10;

第九关乘法

 var quotient = 66 / 33;

第十关除法

 var myVar = 87;

 // Only change code below this line
 myVar++;

第十一关自增

 var myVar = 11;

 // Only change code below this line
 myVar--;

第十二关自减

 var ourDecimal = 5.7;

 // Only change code below this line

 var myDecimal = 5.7;

第十三关浮点数

 var product = 2.0 * 2.5;

第十四关小数乘法

 var quotient = 4.4 / 2.0;

第十五关小数除法

 // Only change code below this line

 var remainder = 11 % 3;

第十六关取余

 var a = 3;
 var b = 17;
 var c = 12;

 // Only modify code below this line

 a += 12;
 b += 9;
 c += 7;

第十七关+=

 var a = 11;
 var b = 9;
 var c = 3;

 // Only modify code below this line

 a -= 6;
 b -= 15;
 c -= 1;

第十八关 -=

 var a = 5;
 var b = 12;
 var c = 4.6;

 // Only modify code below this line

 a *= 5;
 b *= 3;
 c *= 10;

第十九关 *=

 var a = 48;
 var b = 108;
 var c = 33;

 // Only modify code below this line

 a /= 12;
 b /= 4;
 c /= 11;

第二十关 /=

 function convert(celsius) {
 // Only change code below this line
 var fahrenheit = 32 + celsius * 9 / 5;

 // Only change code above this line
 return fahrenheit;
 }

 // Change the inputs below to test your code
 convert(30);

第二十一关基本运算综合

 // 举例
 var firstName = "Alan";
 var lastName = "Turing";

 // Only change code below this line
 var myFirstName = "zhong";
 var myLastName  = "liu";

第二十二关声明字符串

 var myStr = "I am a \"double quoted\" string inside \"double quotes\""; // Change this line

第二十三关转义字符串中的引号

 var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

第二十四关单引号

 var myStr = "\\ \t \r \n";

第二十五关转义特殊符号

 // 举例
 var ourStr = "I come first. " + "I come second.";

 // Only change code below this line

 var myStr = "This is the start. " + "This is the end.";

第二十六关字符串连接

 // 举例
 var ourStr = "I come first. ";
 ourStr += "I come second.";

 // Only change code below this line

 var myStr = "This is the first sentence. ";
 myStr += "This is the second sentence.";

第二十七关 +=字符串

 // 举例
 var ourName = "Free Code Camp";
 var ourStr = "Hello, our name is " + ourName + ", how are you?";

 // Only change code below this line
 var myName = "edward";
 var myStr = "My name is " + myName + " and I am swell!";

第二十八关变量连接字符串

 // 举例
 var anAdjective = "awesome!";
 var ourStr = "Free Code Camp is ";
 ourStr += anAdjective;

 // Only change code below this line

 var someAdjective = "happy";
 var myStr = "Learning to code is ";
 myStr += someAdjective;

第二十九关追加变量到字符串

 // 举例
 var firstNameLength = 0;
 var firstName = "Ada";

 firstNameLength = firstName.length;

 // Setup
 var lastNameLength = 0;
 var lastName = "Lovelace";

 // Only change code below this line.

 lastNameLength = lastName.length;

第三十关获取字符串的长度

 // 举例
 var firstLetterOfFirstName = "";
 var firstName = "Ada";

 firstLetterOfFirstName = firstName[0];

 // Setup
 var firstLetterOfLastName = "";
 var lastName = "Lovelace";

 // Only change code below this line
 firstLetterOfLastName = lastName[0];

第三十一关获取字符串中的第一个字符

 // Setup
 var myStr = "Jello World";

 // Only change code below this line

 myStr = "Hello World"; // Fix Me

第三十二关字符串的不可变性

 // 举例
 var firstName = "Ada";
 var secondLetterOfFirstName = firstName[1];

 // Setup
 var lastName = "Lovelace";

 // Only change code below this line.
 var thirdLetterOfLastName = lastName[2];

第三十三关索引查找字符串中的第N个字符

 // 举例
 var firstName = "Ada";
 var lastLetterOfFirstName = firstName[firstName.length - 1];

 // Setup
 var lastName = "Lovelace";

 // Only change code below this line.
 var lastLetterOfLastName = lastName[lastName.length - 1];

第三十四关索引查找字符串中的最后一个字符

 // 举例
 var firstName = "Ada";
 var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];

 // Setup
 var lastName = "Lovelace";

 // Only change code below this line
 var secondToLastLetterOfLastName = lastName[lastName.length - 2];

第三十五关索引查找字符串中倒数第N个字符

 function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
 var result = "";
 // Your code below this line
 result = myAdjective + " " + myNoun + " " + myVerb + " " + myAdverb;
 // Your code above this line
 return result;
 }

 // Change the words here to test your function
 wordBlanks("dog", "big", "ran", "quickly");

第三十六关字符串操作综合

 // 举例
 var array = ["John", 23];

 // Only change code below this line.
 var myArray = ["Edward",23,"China","173cm"];

第三十七关数组

 // 举例
 var ourArray = [["the universe", 42], ["everything", 101010]];

 // Only change code below this line.
 var myArray = [["quan",24],["Edward",23]];

第三十八关多维数组

 // 举例
 var ourArray = [1,2,3];
 var ourData = ourArray[0]; // equals 1

 // Setup
 var myArray = [1,2,3];

 // Only change code below this line.

 var myData = myArray[0];

第三十九关查找数组中的数据

 // 举例
 var ourArray = [1,2,3];
 ourArray[1] = 3; // ourArray now equals [1,3,3].

 // Setup
 var myArray = [1,2,3];

 // Only change code below this line.

 myArray[0] = 3;

第四十关修改数组中的数据

 // Setup
 var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];

 // Only change code below this line.
 var myData = myArray[2][1];

第四十一关操作多维数组

 // 举例
 var ourArray = ["Stimpson", "J", "cat"];
 ourArray.push(["happy", "joy"]);
 // ourArray now equals ["Stimpson", "J", "cat", ["happy", "joy"]]

 // Setup
 var myArray = [["John", 23], ["cat", 2]];

 // Only change code below this line.

 myArray.push(["dog",3]);

第四十二关push()函数追加数组数据

 // 举例
 var ourArray = [1,2,3];
 var removedFromOurArray = ourArray.pop();
 // removedFromOurArray now equals 3, and ourArray now equals [1,2]

 // Setup
 var myArray = [["John", 23], ["cat", 2]];

 // Only change code below this line.
 var removedFromMyArray = myArray.pop();

第四十三关pop()函数弹出数组最后数据

 // 举例
 var ourArray = ["Stimpson", "J", ["cat"]];
 removedFromOurArray = ourArray.shift();
 // removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]].

 // Setup
 var myArray = [["John", 23], ["dog", 3]];

 // Only change code below this line.
 var removedFromMyArray = myArray.shift();

第四十四关shift()函数移出数组第一个数据

 // 举例
 var ourArray = ["Stimpson", "J", "cat"];
 ourArray.shift(); // ourArray now equals ["J", "cat"]
 ourArray.unshift("Happy");
 // ourArray now equals ["Happy", "J", "cat"]

 // Setup
 var myArray = [["John", 23], ["dog", 3]];
 myArray.shift();

 // Only change code below this line.

 myArray.unshift(["Paul",35]);

第四十五关unshift()函数移入数据到数组第一位

 var myList = [["soap",3],["toothbrush",2],["tissue",3],["shoes",2],["wallet",1]];

第四十六关创建购物清单

 // 举例
 function ourFunction() {
 console.log("Heyya, World");
 }

 ourFunction();

 // Only change code below this line
 function myFunction(){
     console.log("Hi World");
 }

 myFunction();

第四十七关函数

 // 举例
 function ourFunction(a, b) {
 console.log(a - b);
 }
 ourFunction(10, 5); // Outputs 5

 // Only change code below this line.
 function myFunction(a,b){
     console.log(a + b);
 }

 myFunction(3,4);

第四十八关带参数函数

 // Declare your variable here
 var myGlobal =10;

 function fun1() {
 // Assign 5 to oopsGlobal Here
 oopsGlobal = 5;
 }

 // Only change code above this line
 function fun2() {
 var output = "";
 if (typeof myGlobal != "undefined") {
 output += "myGlobal: " + myGlobal;
 }
 if (typeof oopsGlobal != "undefined") {
 output += " oopsGlobal: " + oopsGlobal;
 }
 console.log(output);
 }

第四十九关函数全局变量

 function myFunction() {
 var myVar = 'use strict';

 console.log(myVar);
 }
 myFunction();

 // run and check the console
 // myVar is not defined outside of myFunction

 // now remove the console log line to pass the test

第五十关函数局部变量

 // Setup
 var outerWear = "T-Shirt";

 function myFunction() {
 // Only change code below this line

 var outerWear = "sweater";

 // Only change code above this line
 return outerWear;
 }

 myFunction();

第五十一关全局变量与局部变量差异

 // 举例
 function minusSeven(num) {
 return num - 7;
 }

 // Only change code below this line

 function timesFive(number){
     return number * 5;
 }

第五十二关函数使用return返回值

 // 举例
 var changed = 0;

 function change(num) {
 return (num + 5) / 3;
 }

 changed = change(10);

 // Setup
 var processed = 0;

 function process(num) {
 return (num + 3) / 5;
 }

 // Only change code below this line

 processed = process(7);

第五十三关使用返回值进行赋值

 function queue(arr, item) {
 // Your code here
 arr.push(item);
 item = arr[0];
 arr.shift();
 return item;// Change this line
 }

 // Test Setup
 var testArr = [1,2,3,4,5];

 // Display Code
 console.log("Before: " + JSON.stringify(testArr));
 console.log(queue(testArr, 6)); // Modify this line to test
 console.log("After: " + JSON.stringify(testArr));

第五十四关队列

 function welcomeToBooleans() {

 // Only change code below this line.

 return true; // Change this line

 // Only change code above this line.
 }

第五十五关布尔boolean

 // 举例
 function ourFunction(isItTrue) {
 if (isItTrue) {
 return "Yes, it's true";
 }
 return "No, it's false";
 }

 // Setup
 function myFunction(wasThatTrue) {

 // Only change code below this line.
 if(wasThatTrue == true){
     return "That was true";
 }else{
     return "That was false";
 }

 // Only change code above this line.

 }

 // Change this value to test
 myFunction(false);

第五十六关if

 // Setup
 function myTest(val) {
 if (val == 12) { // Change this line
 return "Equal";
 }
 return "Not Equal";
 }

 // Change this value to test
 myTest(10);

第五十七关==

 // Setup
 function myTest(val) {
 if (val === 7) { // Change this line
 return "Equal";
 }
 return "Not Equal";
 }

 // Change this value to test
 myTest(10);

第五十八关===

 // Setup
 function myTest(val) {
 if (val != 99) { // Change this line
 return "Not Equal";
 }
 return "Equal";
 }

 // Change this value to test
 myTest(10);

第五十九关!=

 // Setup
 function myTest(val) {
 // Only Change Code Below this Line

 if (val !== 17) {

 // Only Change Code Above this Line

 return "Not Equal";
 }
 return "Equal";
 }

 // Change this value to test
 myTest(10);

第六十关!==

 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";
 }

 // Change this value to test
 myTest(10);

第六十一关>

 function myTest(val) {
 if (val >= 20) {// Change this line
 return "20 or Over";
 }

 if (val >= 10) {// Change this line
 return "10 or Over";
 }

 return "9 or Under";
 }

 // Change this value to test
 myTest(10);

第六十二关>=

 function myTest(val) {
 if (val < 25) {// Change this line
 return "Under 25";
 }

 if (val < 55) {// Change this line
 return "Under 55";
 }

 return "55 or Over";
 }

 // Change this value to test
 myTest(10);

第六十三关<

 function myTest(val) {
 if (val <= 12) {// Change this line
 return "Smaller Than or Equal to 12";
 }

 if (val <= 24) {// Change this line
 return "Smaller Than or Equal to 24";
 }

 return "25 or More";
 }

 // Change this value to test
 myTest(10);

第六十四关<=

 function myTest(val) {
 // Only change code below this line

 if (val <= 50 && val >=25) {

 return "Yes";

 }

 // Only change code above this line
 return "No";
 }

 // Change this value to test
 myTest(10);

第六十五关&&

 function myTest(val) {
 // Only change code below this line

 if (val<10 || val >20) {
     return "Outside";
 } else {
     return "Inside";
 }
 // Only change code above this line
 }

 // Change this value to test
 myTest(15);

第六十六关 ||

 function myTest(val) {
 var result = "";
 // Only change code below this line

 if (val > 5) {
 result = "Bigger than 5";
 } else {
 result = "5 or Smaller";
 }

 // Only change code above this line
 return result;
 }

 // Change this value to test
 myTest(4);

第六十七关 else

 function myTest(val) {
 if (val > 10) {
 return "Greater than 10";
 } else if (val < 5) {
 return "Smaller than 5";
 } else {
 return "Between 5 and 10";
 }
 }
 // Change this value to test
 myTest(7);

第六十八关 else if

 function myTest(val) {
 if (val < 5) {
 return "Less than 5";
 } else if (val < 10) {
 return "Less than 10";
 } else {
 return "Greater than or equal to 10";
 }
 }

 // Change this value to test
 myTest(7);

第六十九关if、else if语句中代码的执行顺序

 function myTest(num) {
 // Only change code below this line
 if (num < 5) {
     return "Tiny";
 } else if(num < 10){
     return "Small";
 } else if(num < 15){
     return "Medium";
 } else if(num < 20){
     return "Large";
 } else {
     return "Huge";
 }
 // Only change code above this line
 }

 // Change this value to test
 myTest(7);

第七十关同时使用if、else if 语句

 function golfScore(par, strokes) {
 // Only change code below this line
     if (strokes == 1) {
         return "Hole-in-one!";
     } else if(strokes <= par-2 ){
         return "Eagle";
     } else if(strokes == par-1){
         return "Birdie";
     } else if(strokes == par){
         return "Par";
     } else if(strokes == par+1){
         return "Bogey";
     } else if(strokes == par+2){
         return "Double Bogey";
     } else {
         return "Go Home!";
     }
 // Only change code above this line
 }

 // Change these values to test
 golfScore(5, 4);

第七十一关逻辑运算综合

 function myTest(val) {
 var answer = "";
 // Only change code below this line
 switch (val) {
     case 1:
         answer = "alpha";
         break;
     case 2:
         answer = "beta";
         break;
     case 3:
         answer = "gamma";
         break;
     default:
         answer = "delta";
         // code
 }

 // Only change code above this line
 return answer;
 }

 // Change this value to test
 myTest(1);

第七十二关 switch

 function myTest(val) {
 var answer = "";
 // Only change code below this line
 switch (val) {
     case 'a':
         answer = "apple";
         break;
     case 'b':
         answer = "bird";
         break;
     case 'c':
         answer = "cat";
         break;
     default:
         answer = "stuff";
 }

 // Only change code above this line
 return answer;
 }

 // Change this value to test
 myTest(1);

第七十三关在switch语句中添加default语句

 function myTest(val) {
 var answer = "";
 // Only change code below this line
 switch (val) {
     case 1:
     case 2:
     case 3:
         answer = "Low";
         break;
     case 4:
     case 5:
     case 6:
         answer = "Mid";
         break;
     case 7:
     case 8:
     case 9:
         answer = "High";
         break;
     default:
         // code
 }

 // Only change code above this line
 return answer;
 }

 // Change this value to test
 myTest(1);

第七十四关switch语句中的多个相同选项判断

 function myTest(val) {
 var answer = "";
 // Only change code below this line
 switch (val) {
     case 'bob':
         answer = "Marley";
         break;
     case 42:
         answer = "The Answer";
         break;
     case 1:
         answer = "There is no #1";
         break;
     case 99:
         answer = "Missed me by this much!";
         break;
     case 7:
         answer = "Ate Nine";
         break;
     default:
 }

 // Only change code above this line
 return answer;
 }

 // Change this value to test
 myTest(7);

第七十五关使用switch语句替换串联的if、else if语句

 function isLess(a, b) {
 // Fix this code
 return a<b;
 }

 // Change these values to test
 isLess(10, 15);

第七十六关直接在函数中返回boolean值

 // Setup
 function abTest(a, b) {
 // Only change code below this line
 if ( a<0 || b<0 ) {
     return undefined;
 }

 // Only change code above this line

 return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
 }

 // Change values below to test your code
 abTest(2,2);

第七十七关使用return跳出函数

 var count = 0;

 function cc(card) {
 // Only change code below this line
 switch (card) {
     case 2:
     case 3:
     case 4:
     case 5:
     case 6:
         count++;
         break;
     case 10:
     case 'J':
     case 'Q':
     case 'K':
     case 'A':
         count--;
         break;
     default:
 }

 if (count > 0) {
     return count+" Bet";
 } else {
     return count+" Hold";
 }

 // Only change code above this line
 }

 // Add/remove calls to test your function.
 // 提示: Only the last will display
 cc(2);

第七十八关条件判断算法综合

 // 举例
 var ourDog = {
 "name": "Camper",
 "legs": 4,
 "tails": 1,
 "friends": ["everything!"]
 };

 // Only change code below this line.

 var myDog = {
 "name" : "Laffy",
 "legs" : 4,
 "tails" : 1,
 "friends" :["edward","viola"]

 };

第七十九关对象操作

 // Setup
 var testObj = {
 "hat": "ballcap",
 "shirt": "jersey",
 "shoes": "cleats"
 };

 // Only change code below this line

 var hatValue = testObj.hat;// Change this line
 var shirtValue = testObj.shirt;// Change this line

第八十关使用点操作符.读取对象属性

 // Setup
 var testObj = {
 "an entree": "hamburger",
 "my side": "veggies",
 "the drink": "water"
 };

 // Only change code below this line

 var entreeValue = testObj["an entree"]; // Change this line
 var drinkValue = testObj["the drink"];// Change this line

第八十一关使用[]读取对象属性

 // Setup
 var testObj = {
 12: "Namath",
 16: "Montana",
 19: "Unitas"
 };

 // Only change code below this line;

 var playerNumber = 16; // Change this Line
 var player = testObj[playerNumber]; // Change this Line

第八十二关使用变量访问对象属性

 // 举例
 var ourDog = {
 "name": "Camper",
 "legs": 4,
 "tails": 1,
 "friends": ["everything!"]
 };

 ourDog.name = "Happy Camper";

 // Setup
 var myDog = {
 "name": "Coder",
 "legs": 4,
 "tails": 1,
 "friends": ["Free Code Camp Campers"]
 };

 myDog.name = "Happy Coder";
 // Only change code below this line.

第八十三关更新对象属性

 // 举例
 var ourDog = {
 "name": "Camper",
 "legs": 4,
 "tails": 1,
 "friends": ["everything!"]
 };

 ourDog.bark = "bow-wow";

 // Setup
 var myDog = {
 "name": "Happy Coder",
 "legs": 4,
 "tails": 1,
 "friends": ["Free Code Camp Campers"]
 };

 // Only change code below this line.

 myDog.bark = "woof";

第八十四关给对象添加属性

 // 举例
 var ourDog = {
 "name": "Camper",
 "legs": 4,
 "tails": 1,
 "friends": ["everything!"],
 "bark": "bow-wow"
 };

 delete ourDog.bark;

 // Setup
 var myDog = {
 "name": "Happy Coder",
 "legs": 4,
 "tails": 1,
 "friends": ["Free Code Camp Campers"],
 "bark": "woof"
 };

 // Only change code below this line.

 delete myDog.tails;

第八十五关删除对象属性

 // Setup
 function phoneticLookup(val) {
 var result = "";

 // Only change code below this line
 var lookup = {
     "alpha"     :   "Adams",
     "bravo"     :   "Boston",
     "charlie"   :   "Chicago",
     "delta"     :   "Denver",
     "echo"      :   "Easy",
     "foxtrot"   :   "Frank"
 }

 result = lookup[val];

 // Only change code above this line
 return result;
 }

 // Change this value to test
 phoneticLookup("charlie");

第八十六关使用对象进行查找值

 // Setup
 var myObj = {
 gift: "pony",
 pet: "kitten",
 bed: "sleigh"
 };

 function checkObj(checkProp) {
 // Your Code Here
 if (myObj.hasOwnProperty(checkProp)) {
     return myObj[checkProp];
 }
 return "Not Found";
 }

 // Test your code by modifying these values
 checkObj("gift");

第八十七关检查对象属性

 var myMusic = [
     {
     "artist"        : "Billy Joel",
     "title"         : "Piano Man",
     "release_year"  : 1973,
     "formats"       : [
             "CS",
             "8T",
             "LP" ],
     "gold"          : true
       },
 // Add record here
     {
     "artist"        : "Jay",
     "title"         : "依然范特西",
     "release_year"  : 2008,
     "formats"       : [
         "Fang",
         "Cai"],
     "gold"          : false
     }
 ];

第八十八关JSON操作

 // Setup
 var myStorage = {
 "car": {
 "inside": {
 "glove box": "maps",
 "passenger seat": "crumbs"
  },
 "outside": {
 "trunk": "jack"
 }
 }
 };

 // Only change code below this line

 var gloveBoxContents = myStorage.car.inside["glove box"]; // Change this line

第八十九关获取JSON属性值

 // Setup
 var myPlants = [
 {
 type: "flowers",
 list: [
 "rose",
 "tulip",
 "dandelion"
 ]
 },
 {
 type: "trees",
 list: [
 "fir",
 "pine",
 "birch"
 ]
 }
 ];

 // Only change code below this line

 var secondTree = myPlants[1].list[1]; // Change this line

第九十关获取JSON数组值

 // Setup
 var collection = {
 2548: {
 album: "Slippery When Wet",
 artist: "Bon Jovi",
 tracks: [
 "Let It Rock",
 "You Give Love a Bad Name"
 ]
 },
 2468: {
 album: "1999",
 artist: "Prince",
 tracks: [
 "1999",
 "Little Red Corvette"
 ]
 },
 1245: {
 artist: "Robert Palmer",
 tracks: [ ]
 },
 5439: {
 album: "ABBA Gold"
 }
 };
 // Keep a copy of the collection for tests
 var collectionCopy = JSON.parse(JSON.stringify(collection));

 // Only change code below this line
 function update(id, prop, value) {

 if (value !== '' && prop != 'tracks') {
     collectionCopy[id][prop] = value;
 } else if(value !== '' && prop == 'tracks'){
     collectionCopy[id][prop].push(value);
 } else {
     delete collectionCopy[id][prop];
 }

 return collection;
 }

 // Alter values below to test your code
 update(5439, "artist", "ABBA");

第九十一关JSON集合操作

 // 举例
 var ourArray = [];

 for (var i = 0; i < 5; i++) {
 ourArray.push(i);
 }

 // Setup
 var myArray = [];

 // Only change code below this line.
 var a;
 for(a = 1;a < 6;a++){
     myArray.push(a);
 }

第九十二关 for循环

 // 举例
 var ourArray = [];

 for (var i = 0; i < 10; i += 2) {
 ourArray.push(i);
 }

 // Setup
 var myArray = [];

 // Only change code below this line.
 for (var i = 1; i < 10; i += 2) {
     myArray.push(i);
 }

第九十三关 for语句循环按奇数顺序迭代

 // 举例
 var ourArray = [];

 for (var i = 10; i > 0; i -= 2) {
 ourArray.push(i);
 }

 // Setup
 var myArray = [];

 // Only change code below this line.
 for (var i = 9; i > 0 ; i -= 2) {
     myArray.push(i);
 }

第九十四关for循环逆向迭代

 // 举例
 var ourArr = [ 9, 10, 11, 12];
 var ourTotal = 0;

 for (var i = 0; i < ourArr.length; i++) {
 ourTotal += ourArr[i];
 }

 // Setup
 var myArr = [ 2, 3, 4, 5, 6];

 // Only change code below this line
 var total = 0;
 for (var i = 0; i < myArr.length; i++) {
     total += myArr[i];
 }

第九十五关for循环迭代输出数组

 function multiplyAll(arr) {
 var product = 1;
 // Only change code below this line
     for (var i = 0; i < arr.length; i++) {
         for(var j = 0; j < arr[i].length; j++){
             product *= arr[i][j];
         }
     }
 // Only change code above this line
 return product;
 }

 // Modify values below to test your code
 multiplyAll([[1,2],[3,4],[5,6,7]]);

第九十六关循环语句综合

 // Setup
 var myArray = [];

 // Only change code below this line.
 var i = 0;
 while(i <= 4){
     myArray.push(i);
     i++;
 }

第九十七关while语句循环

 //Setup
 var contacts = [
 {
 "firstName": "Akira",
 "lastName": "Laine",
 "number": "0543236543",
 "likes": ["Pizza", "Coding", "Brownie Points"]
 },
 {
 "firstName": "Harry",
 "lastName": "Potter",
 "number": "0994372684",
 "likes": ["Hogwarts", "Magic", "Hagrid"]
 },
 {
 "firstName": "Sherlock",
 "lastName": "Holmes",
 "number": "0487345643",
 "likes": ["Intriguing Cases", "Violin"]
 },
 {
 "firstName": "Kristian",
 "lastName": "Vos",
 "number": "unknown",
 "likes": ["Javascript", "Gaming", "Foxes"]
 }
 ];

 function lookUpProfile(firstName, prop){
 // Only change code below this line
 var hasName = false;
 for (var i = 0; i < contacts.length; i++) {
     if (contacts[i].firstName == firstName) {
         hasName = true;
         if (contacts[i].hasOwnProperty(prop)) {
             return contacts[i][prop];
         } else {
             return "No such property";
         }
     }
 }

 if(!hasName){
     return "No such contact";
 }
 // Only change code above this line
 }

 // Change these values to test your function
 lookUpProfile("Akira", "likes");

第九十八关使用循环语句查找通讯录

 function randomFunction() {

 // Only change code below this line.

 return Math.random();

 // Only change code above this line.
 }

第九十九关random()

 var randomNumberBetween0and19 = Math.floor(Math.random() * 20);

 function myFunction() {

 // Only change code below this line.

 return Math.floor(Math.random() * 10);
 }

第一百关random()生成随机数

 // 举例
 function ourFunction(ourMin, ourMax) {

 return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;
 }

 ourFunction(1, 9);

 // Only change code below this line.

 function randomRange(myMin, myMax) {

 return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin; // Change this line

 }

 // Change these values to test your function
 var myRandom = randomRange(5, 15);

101关random()在一个范围内生成随机数

 // Setup
 var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";

 // 举例
 var expressionToGetSoftware = /software/gi;
 var softwareCount = testString.match(expressionToGetSoftware).length;

 // Only change code below this line.

 var expression = /and/gi;// Change this Line

 // Only change code above this line

 // This code counts the matches of expression in testString
 var andCount = testString.match(expression).length;

102关正则表达式操作字符串

 // Setup
 var testString = "There are 3 cats but 4 dogs.";

 // Only change code below this line.

 var expression = /\d+/g;// Change this line

 // Only change code above this line

 // This code counts the matches of expression in testString
 var digitCount = testString.match(expression).length;

103关正则表达式选取数值

 // Setup
 var testString = "How many spaces are there in this sentence?";

 // Only change code below this line.

 var expression = /\s+/g;// Change this line

 // Only change code above this line

 // This code counts the matches of expression in testString
 var spaceCount = testString.match(expression).length;

104关正则表达式选取空白字符

 // Setup
 var testString = "How many non-space characters are there in this sentence?";

 // Only change code below this line.

 var expression = /\S/g;// Change this line

 // Only change code above this line

 // This code counts the matches of expression in testString
 var nonSpaceCount = testString.match(expression).length;

105关正则表达式反转匹配

106

 <script>
 function runSlots() {
 var slotOne;
 var slotTwo;
 var slotThree;

 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];

 // Only change code below this line.
 slotOne = Math.floor(Math.random() * 3) + 1;
 slotTwo = Math.floor(Math.random() * 3) + 1;
 slotThree = Math.floor(Math.random() * 3) + 1;

 // Only change code above this line.

 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {
 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
 }

 $(".logger").append(" Not A Win")
 return [slotOne, slotTwo, slotThree];
 }

 $(document).ready(function() {
  $(".go").click(function() {
  runSlots();
  });
  });
 </script>

 <div>
  <div class = "container inset">
  <div class = "header inset">
  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
  <h2>FCC Slot Machine</h2>
  </div>
  <div class = "slots inset">
  <div class = "slot inset">

  </div>
  <div class = "slot inset">

  </div>
  <div class = "slot inset">

  </div>
  </div>
  <br/>
  <div class = "outset">
  <button class = "go inset">
  Go
  </button>
  </div>
  <br/>
  <div class = "foot inset">
  <span class = "logger"></span>
  </div>
  </div>
 </div>

 <style>
  .container {
  background-color: #4a2b0f;
  height: 400px;
  width: 260px;
  margin: 50px auto;
  border-radius: 4px;
  }
  .header {
  border: 2px solid #fff;
  border-radius: 4px;
  height: 55px;
  margin: 14px auto;
  background-color: #457f86
  }
  .header h2 {
  height: 30px;
  margin: auto;
  }
  .header h2 {
  font-size: 14px;
  margin: 0 0;
  padding: 0;
  color: #fff;
  text-align: center;
  }
  .slots{
  display: flex;
  background-color: #457f86;
  border-radius: 6px;
  border: 2px solid #fff;
  }
  .slot{
  flex: 1 0 auto;
  background: white;
  height: 75px;
  margin: 8px;
  border: 2px solid #215f1e;
  border-radius: 4px;
  }
  .go {
  width: 100%;
  color: #fff;
  background-color: #457f86;
  border: 2px solid #fff;
  border-radius: 2px;
  box-sizing: none;
  outline: none!important;
  }
  .foot {
  height: 150px;
  background-color: 457f86;
  border: 2px solid #fff;
  }

  .logger {
  color: white;
  margin: 10px;
  }

  .outset {
  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  }

  .inset {
  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  }
 </style>

综合运用开发游戏

 <script>
 function runSlots() {
 var slotOne;
 var slotTwo;
 var slotThree;

 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];

 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;

 // Only change code below this line.
 if (slotOne === slotTwo && slotTwo === slotThree){
     $(".logger").html(slotOne + "It's A Win");
 } else {
     return null;
 }

 // Only change code above this line.

 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
 }

 $(".logger").append(" Not A Win");

 return [slotOne, slotTwo, slotThree];
 }

 $(document).ready(function() {
  $(".go").click(function() {
  runSlots();
  });
  });
 </script>

 <div>
  <div class = "container inset">
  <div class = "header inset">
  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
  <h2>FCC Slot Machine</h2>
  </div>
  <div class = "slots inset">
  <div class = "slot inset">

  </div>
  <div class = "slot inset">

  </div>
  <div class = "slot inset">

  </div>
  </div>
  <br/>
  <div class = "outset">
  <button class = "go inset">
  Go
  </button>
  </div>
  <br/>
  <div class = "foot inset">
  <span class = "logger"></span>
  </div>
  </div>
 </div>

 <style>
  .container {
  background-color: #4a2b0f;
  height: 400px;
  width: 260px;
  margin: 50px auto;
  border-radius: 4px;
  }
  .header {
  border: 2px solid #fff;
  border-radius: 4px;
  height: 55px;
  margin: 14px auto;
  background-color: #457f86
  }
  .header h2 {
  height: 30px;
  margin: auto;
  }
  .header h2 {
  font-size: 14px;
  margin: 0 0;
  padding: 0;
  color: #fff;
  text-align: center;
  }
  .slots{
  display: flex;
  background-color: #457f86;
  border-radius: 6px;
  border: 2px solid #fff;
  }
  .slot{
  flex: 1 0 auto;
  background: white;
  height: 75px;
  margin: 8px;
  border: 2px solid #215f1e;
  border-radius: 4px;
  }
  .go {
  width: 100%;
  color: #fff;
  background-color: #457f86;
  border: 2px solid #fff;
  border-radius: 2px;
  box-sizing: none;
  outline: none!important;
  }
  .foot {
  height: 150px;
  background-color: 457f86;
  border: 2px solid #fff;
  }

  .logger {
  color: white;
  margin: 10px;
  }

  .outset {
  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  }

  .inset {
  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  }
 </style>

107进一步完善小游戏项目

 <script>
 function runSlots() {
 var slotOne;
 var slotTwo;
 var slotThree;

 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];

 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;

 // Only change code below this line.
 $($(".slot")[0]).html(slotOne);
 $($(".slot")[1]).html(slotTwo);
 $($(".slot")[2]).html(slotThree);

 // Only change code above this line.

 if (slotOne === slotTwo && slotTwo === slotThree) {
 $(".logger").html(" It's A Win")
 return null;
 }

 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
 }

 $(".logger").append(" Not A Win");

 return [slotOne, slotTwo, slotThree];
 }

 $(document).ready(function() {
  $(".go").click(function() {
  runSlots();
  });
  });
 </script>

 <div>
  <div class = "container inset">
  <div class = "header inset">
  <img src="/statics/codecamp/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
  <h2>FCC Slot Machine</h2>
  </div>
  <div class = "slots inset">
  <div class = "slot inset">

  </div>
  <div class = "slot inset">

  </div>
  <div class = "slot inset">

  </div>
  </div>
  <br/>
  <div class = "outset">
  <button class = "go inset">
  Go
  </button>
  </div>
  <br/>
  <div class = "foot inset">
  <span class = "logger"></span>
  </div>
  </div>
 </div>

 <style>
  .container {
  background-color: #4a2b0f;
  height: 400px;
  width: 260px;
  margin: 50px auto;
  border-radius: 4px;
  }
  .header {
  border: 2px solid #fff;
  border-radius: 4px;
  height: 55px;
  margin: 14px auto;
  background-color: #457f86
  }
  .header h2 {
  height: 30px;
  margin: auto;
  }
  .header h2 {
  font-size: 14px;
  margin: 0 0;
  padding: 0;
  color: #fff;
  text-align: center;
  }
  .slots{
  display: flex;
  background-color: #457f86;
  border-radius: 6px;
  border: 2px solid #fff;
  }
  .slot{
  flex: 1 0 auto;
  background: white;
  height: 75px;
  margin: 8px;
  border: 2px solid #215f1e;
  border-radius: 4px;
  text-align: center;
  padding-top: 25px;
  }
  .go {
  width: 100%;
  color: #fff;
  background-color: #457f86;
  border: 2px solid #fff;
  border-radius: 2px;
  box-sizing: none;
  outline: none!important;
  }
  .foot {
  height: 150px;
  background-color: 457f86;
  border: 2px solid #fff;
  }

  .logger {
  color: white;
  margin: 10px;
  }

  .outset {
  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  }

  .inset {
  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  }
 </style>

108小游戏项目运作起来

 <script>
 function runSlots() {
 var slotOne;
 var slotTwo;
 var slotThree;

 var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];

 slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
 slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;

 // Only change code below this line.
 $($('.slot')[0]).html('<img src = "' + images[slotOne - 1] + '">');
 $($('.slot')[1]).html('<img src = "' + images[slotTwo - 1] + '">');
 $($('.slot')[2]).html('<img src = "' + images[slotThree -1 ] +
 '">');
 // Only change code above this line.

 if (slotOne === slotTwo && slotTwo === slotThree) {
 $('.logger').html("It's A Win");
 return null;
 }

 if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
 $(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
 }

 $('.logger').append(" Not A Win");

 return [slotOne, slotTwo, slotThree];
 }

 $(document).ready(function() {
  $('.go').click(function() {
  runSlots();
  });
  });
 </script>

 <div>
  <div class = 'container inset'>
  <div class = 'header inset'>
  <img src='/statics/codecamp/images/freecodecamp_logo.svg' alt='learn to code JavaScript at Free Code Camp logo' class='img-responsive nav-logo'>
  <h2>FCC Slot Machine</h2>
  </div>
  <div class = 'slots inset'>
  <div class = 'slot inset'>

  </div>
  <div class = 'slot inset'>

  </div>
  <div class = 'slot inset'>

  </div>
  </div>
  <br/>
  <div class = 'outset'>
  <button class = 'go inset'>
  Go
  </button>
  </div>
  <br/>
  <div class = 'foot inset'>
  <span class = 'logger'></span>
  </div>
  </div>
 </div>

 <style>
  .slot > img {
 margin: 0!important;
 height: 71px;
 width: 50px;
  }
  .container {
  background-color: #4a2b0f;
  height: 400px;
  width: 260px;
  margin: 50px auto;
  border-radius: 4px;
  }
  .header {
  border: 2px solid #fff;
  border-radius: 4px;
  height: 55px;
  margin: 14px auto;
  background-color: #457f86
  }
  .header h2 {
  height: 30px;
  margin: auto;
  }
  .header h2 {
  font-size: 14px;
  margin: 0 0;
  padding: 0;
  color: #fff;
  text-align: center;
  }
  .slots{
  display: flex;
  background-color: #457f86;
  border-radius: 6px;
  border: 2px solid #fff;
  }
  .slot{
  flex: 1 0 auto;
  background: white;
  height: 75px;
  width: 50px;
  margin: 8px;
  border: 2px solid #215f1e;
  border-radius: 4px;
  text-align: center;
  }
  .go {
  width: 100%;
  color: #fff;
  background-color: #457f86;
  border: 2px solid #fff;
  border-radius: 2px;
  box-sizing: none;
  outline: none!important;
  }
  .foot {
  height: 150px;
  background-color: 457f86;
  border: 2px solid #fff;
  }

  .logger {
  color: white;
  margin: 10px;
  }

  .outset {
  -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
  }

  .inset {
  -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
  }
 </style>

109为小游戏项目添加图片