Free Code Camp 知识点整理：Basic JavaScript
Free Code Camp
第二节 Front End Development
四、Basic JavaScript
1.Comment your JavaScript Code
//这是一个单行注释
/**
* Your output will go here.
* Any console.log() -type
* statements will appear in
* your browser's DevTools
* JavaScript console.
*/- 注释的代码块在JavaScript之中是不会运行的。注释是一个非常好的方式让你自己以及其他人明白这段代码是怎么运行的。
- JavaScript中的注释方式有以下两种：
- 使用
//来告诉JavaScript来忽略当前行的代码：// This is an in-line comment. - 你也可以使用多行注释来注释你的代码，以/开始，用/来结束，就像下面这样：
JavaScript
> /* This is a
> multi-line comment */
> - 最佳实践：你应该给你写的代码添加注释，来让你的代码看起来更加地清晰易懂。良好的注释能够清晰地传达你写的代码的意图—对于那些读你的代码的人来说以及未来你看到它的时候，还能理解这段代码的意图。
- 使用
2.Declare JavaScript Variables
var myName;- 在计算机科学中, data(数据)就是一切，因为它对于计算机的意义重大。JavaScript提供七种不同的data types(数据类型)，它们是
undefined（未定义）,null（空）,boolean（布尔型）,string（字符串）,symbol(符号),number（数字）,andobject（对象）。 - 举个例子, 计算机能够分辨不同的数字, 例如数字
12和strings，"12"和"dog", 或"123 cats", 都是字母的集合。 计算机能够精确地操作数字， 但是对于字符串却无能为力。 - Variables（变量）允许计算机以一种动态的形式来存储和操作数据，通过操作指向数据的指针而不是数据本身来避免了内存泄露，以上的七种数据类型都可以存储到一个变量（variable）中。
- Variables 非常类似于你在数学中使用的x,y变量, 这意味着它们都是以一个简单命名的名字来代替我们赋值给它的数据。计算机中的variables（变量）与数学中的变量不同的是，计算机可以在不同的时间存储不同类型的变量。
- 通过在变量的前面使用关键字var，我们告诉 JavaScript 来创建或者 declare（声明）一个变量,就像这样：
var ourName; - 上面代码的意思是创建一个名为ourName的variable（变量），在JavaScript中我们使用分号来结束一段声明。
Variable（变量）的名字可以由数字、字母、$或者_组成，但是不能包含空格或者以数字为首。- [x] 任务：使用
var关键字来创建一个名为myName的变量。
3.Storing Values with the Equal Operator
var a = 7;
var b = a;- 在JavaScript中，你可以通过assignment(分配)操作符把一个值存储到变量中。
myVariable = 5;把Number数字5赋给变量myVariable。- 赋值过程是从右到左进行的。所有
=操作符右边的值都会被赋到左边的变量。
Javascript
> myVar = 5;
> myNum = myVar;
>
数值5被赋给变量myVar中， 然后变量myVar又赋给变量myNum，这样子myNum变量中的值也是5了。 - [x] 任务: 把数值
7赋给变量a。把变量a中的内容赋给变量b。
4.Initializing Variables with the Equal Operator
var a = 9;- 通常地我们会在initialize开始声明变量的时候就会给变量赋一个初始值。
var myVar = 0;创建一个名为myVar的变量并指定一个初始值0。
任务
通过关键字 var 定义一个变量 a 并且给它一个初始值 9。
5.Understanding Uninitialized Variables
// 初始化变量
var a = 5;
var b = 10;
var c = "I am a";
// 请只修改这条注释以上的代码
a = a + 1;
b = b + 5;
c = c + " String!";- 当 JavaScript 中的变量被声明的时候，程序内部会给它一个初始值
undefined。当你对一个值为undefined的变量进行运算操作的时候，算出来的结果将会是NaN，NaN的意思是”Not a Number”。当你用一个没有定义的变量来做字符串连接操作的时候，它会如实的输出”undefined”。
任务
定义3个变量 a、b、c ，并且分别给他们赋值：5、10、”I am a” ，这样它们就不会是 undefined（未定义的了）。
6.Understanding Case Sensitivity in Variables
// 初始化变量
var studlyCapVar;
var properCamelCase;
var titleCaseOver;
// 给变量赋值
studlyCapVar = 10;
properCamelCase = "A String";
titleCaseOver = 9000;- 在 JavaScript 中所有的变量都是大小写敏感的。这意味着你要区别对待大写字母和小写字母。
MYVAR与MyVar和myvar是截然不同的变量。这就有可能导致多个截然不同的变量却有着有相似的名字。正是由于以上原因所以强烈地建议你, 不要使用这一特性。（以免给自己带来麻烦）- 最佳实践: 使用
驼峰命名法来书写一个 Javascript 变量，在驼峰命名法中，变量名的第一个单词的首写字母小写，后面的单词的第一个字母大写。 - 举个栗子:
javascript
> var someVariable;
> var anotherVariableName;
> var thisVariableNameIsTooLong;
>
任务
修正声明的变量，让它们的命名符合 驼峰命名法 的规范。
7.Add Two Numbers with JavaScript
var sum = 10 + 10;8.Subtract One Number from Another with JavaScript
var difference = 45 - 33;9.Multiply Two Numbers with JavaScript
var product = 8 * 10;10.Divide One Number by Another with JavaScript
var quotient = 66 / 33;11.Increment a Number with JavaScript
myVar++;12.Decrement a Number with JavaScript
myVar--;13.Create Decimal Numbers with JavaScript
var ourDecimal = 5.7;
var myDecimal = ourDecimal;14.Multiply Two Decimals with JavaScript
var product = 2.0 * 2.5;15.Divide one Decimal by Another with JavaScript
var quotient = 4.4 / 2.0;16.Finding a Remainder in JavaScript
var remainder = 11 % 3;17.Assignment with Plus Equals
a += 12;
b += 9;
c += 7;18.Assignment with Minus Equals
a -= 6;
b -= 15;
c -= 1;19.Assignment with Times Equals
a *= 5;
b *= 3;
c *= 10;20.Assignment with Divided by Equals
a /= 12;
b /= 4;
c /= 11;21.Convert Celsius to Fahrenheit
function convert(celsius) {
fahrenheit = celsius*9/5+32;
return fahrenheit;
}
convert(30);- 为了测试你的学习效果，我们来做一个摄氏度转华氏度的小应用。
从Celsius摄氏度转换为Fahrenheit华氏度的算法是：摄氏度的温度乘于9除于5，再加上32。
创建一个变量 fahrenheit，然后计算出摄氏度对应的华氏度。
22.Declare String Variables
var myFirstName = "Vincente";
var myLastName = "Liang";23.Escaping Literal Quotes in Strings
var myStr = "I am a \"double quoted\" string inside \"double quotes\"";24.Quoting Strings with Single Quotes
var myStr = '<a href="http://www.example.com" target="_blank">Linka>';25.Escape Sequences in Strings
var myStr = "\\ \t \b \r \n";- 字符串中的转义序列
- 引号不是字符串中唯一的可以被转义字符。下面是常见的转义序列列表:
|Code|Output|
|:—:|:—:|
|\'|单引号|
|\"|双引号|
|\\|反斜杠符|
|\n|换行符|
|\r|回车符|
|\t|制表符|
|\b|退格符|
|\f|换页符|
注意：如果你想要显示一个反斜杠就必须要转义它。 - [x] 任务：按照下面的顺序，并且用空格来分割：反斜杠 制表符 退格符 回车符 换行符 并把它赋值给变量
myStr。
26.Concatenating Strings with Plus Operator
var myStr = "This is the start. " + "This is the end.";27.Concatenating Strings with the Plus Equals Operator
var myStr = "This is the first sentence. ";
myStr += "This is the second sentence."28.Constructing Strings with Variables
var myName = "Vincente";
var myStr = "My name is " + myName + "and am swell!"29.Appending Variables to Strings
var someAdjective = "cool";
var myStr = "Learning to code is ";
myStr += someAdjective;30.Find the Length of a String
var lastNameLength = 0;
var lastName = "Lovelace";
lastNameLength = lastName.length;- 你可以通过在字符串变量或字符串后面写上
.length来获得字符串变量字符串值的长度:"Alan Peter".length; // 10
31.Use Bracket Notation to Find the First Character in a String
firstLetterOfLastName = lastName[0]- []叫中括号，{}叫大括号，()叫小括号。
- JavaScript中只有字符串类型，没有字符类型。那么如何获取到字符串中的某个字符呢？
- 我们通过
[索引]来获得对应的字符。 - 大多数现代编程语言，如JavaScript，不同于人类从1开始计数。它们是从0开始计数，这被称为
基于零的索引。 - 例如, 在单词 “Charles” 中索引0上的字符为 “C”，所以在
var firstName = "Charles"中，你可以使用firstName[0]来获得第一个位置上的字符。 - [x] 任务: 使用[索引]来得到变量
lastName中的第一个字符，并赋给变量firstLetterOfLastName。
32.Understand String Immutability
var myStr = "Jello World";
myStr = "Hello World";- 理解字符串的不可变性！当你搞懂不可变性后immutable.js对于你就是小菜一碟了。
- 在 JavaScript 中，
字符串的值是不可变的，这意味着一旦字符串被创建就不能被改变。 - 例如，下面的代码：
javascript
> var myStr = "Bob";
> myStr[0] = "J";
>
是不会把变量myStr的值改变成"Job"的，因为变量myStr是不可变的。
注意，这 并不 意味着myStr永远不能被改变，只是字符串字面量string literal的各个字符不能被改变。改变myStr中的唯一方法是重新给它赋一个值，就像这样：
javascript
> var myStr = "Bob";
> myStr = "Job";
> - [x] 任务: 把
myStr的值改为Hello World。
33.Use Bracket Notation to Find the Nth Character in a String
var thirdLetterOfLastName = lastName[2];34.Use Bracket Notation to Find the Last Character in a String
var lastLetterOfLastName = lastName[lastName.length - 1];35.Use Bracket Notation to Find the Nth-to-Last Character in a String
var secondToLastLetterOfLastName = lastName[lastName.length - 2];36.Word Blanks
function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
var result = myNoun + " " + myVerb + " " + myAdjective + " things " + myAdverb + ".";
return result;
}
wordBlanks("I", "great", "do", "easily");- 现在，我们来用字符串的相关知识实现一个造句函数。
- 通过使用提供的变量参数：名词
myNoun、形容词myAdjective、动词myVerb、副词myAdverb，来创建一个新的句子result。
37.Store Multiple Values in one Variable using JavaScript Arrays
var myArray = ["Vincente",20];- 使用
数组，我们可以在一个地方存储多个数据。 你以左方括号
[开始定义一个数组，以右方括号]结束定义，并把每个条目之间用逗号隔开，就像这样：var sandwich = ["peanut butter", "jelly", "bread"]。[x] 任务: 创建一个包含
字符串和数字的数组myArray。
38.Nest one Array within Another Array
var myArray = [[1,2],[3,4]];- 你也可以在数组中包含其他数组，就像这样:
[["Bulls", 23], ["White Sox", 45]]。这被称为一个多维数组。 - [x] 任务: 创建一个名为
myArray的多维数组。 - [ ] 错误：注意内层数组间的逗号。
39.Access Array Data with Indexes
var myArray = [1,2,3];
var myData = myArray[0];- 我们可以像操作字符串一样通过数组索引
[index]来访问数组中的数据。
40.Modify Array Data With Indexes
var myArray = [1,2,3];
myArray[0] = 3;41.Access Multi-Dimensional Arrays With Indexes
var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];
var myData = myArray[2][1];42.Manipulate Arrays With push()
var myArray = [["John", 23], ["cat", 2]];
myArray.push(["dog",3]);- 一个简单的方法将数据追加到一个数组的末尾是通过
push()函数。 .push()接受把一个或多个参数，并把它“推”入到数组的末尾:
javascript
> var arr = [1,2,3];
> arr.push(4);
> // 现在arr的值为 [1,2,3,4]
>- [x] 任务: 把
["dog", 3]“推”入到myArray变量的末尾。
43.Manipulate Arrays With pop()
var removedFromMyArray = myArray.pop();- 改变数组中数据的另一种方法是用
.pop()函数。 .pop()函数用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来。- 数组中任何类型的条目（数值，字符串，甚至是数组）可以被“抛出来” 。
- 举个例子, 对于这段代码
var oneDown = [1, 4, 6].pop();现在oneDown的值为6，数组变成了[1, 4]。 - [x] 任务: 使用
.pop()函数移除myArray中的最后一条，并且把“抛出”的值赋给removedFromMyArray。
44.Manipulate Arrays With shift()
var removedFromMyArray = myArray.shift();pop()函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢？- 这就是
.shift()的用武之地。它的工作原理就像.pop()，但它移除的是第一个元素，而不是最后一个。 - [x] 任务: 使用
.shift()函数移出myArray中的第一项，并把“移出”的值赋给removedFromMyArray。
45.Manipulate Arrays With unshift()
myArray.unshift(["Paul",35]);- 你不仅可以
shift（移出）数组中的第一个元素，你也可以unshift（移入）一个元素到数组的头部。 .unshift()函数用起来就像.push()函数一样, 但不是在数组的末尾添加元素，而是在数组的头部添加元素。- [x] 任务: 使用
unshift()函数把["Paul",35]加入到myArray的头部。
46.Shopping List
var myList = [["1",1],["2",2],["3",3],["4",4],["5",5]];- 创建一个名叫
myList的购物清单，清单的数据格式就是多维数组。 - 每个子数组中的第一个元素应该是购买的物品名称，第二个元素应该是物品的数量，类似于：
["Chocolate Bar", 15] - [x] 任务：你的购物清单至少应该有5个子数组。
47.Write Reusable JavaScript with Functions
function myFunction() {
console.log("Hi World");
}
myFunction();- 在 JavaScript 中，我们可以把代码的重复部分抽取出来，放到一个
函数（functions）中。 - 这是一个函数（function）的例子：
javascript
> function functionName() {
> console.log("Hello World");
> }
> - 你可以通过函数名称
functionName加上后面的小括号来调用这个函数（function），就像这样：functionName(); 每次调用函数时它会打印出消息的“Hello World”到开发的控制台上。所有的大括号之间的代码将在每次函数调用时执行。
[x] 任务:
- 创建一个名为
myFunction的函数，这个函数可以打印“Hi World”到开发控制台上。 - 调用这个函数。
- 创建一个名为
48.Passing Values to Functions with Arguments
function myFunction(a,b) {
console.out(a+b);
}
myFunction(1,1);- 函数的参数
parameters在函数中充当占位符(也叫形参)的作用，参数可以为一个或多个。调用一个函数时所传入的参数为实参，实参决定着形参真正的值。简单理解：形参即形式、实参即内容。 - 这是带有两个参数的函数，
param1和param2：
javascript
> function testFun(param1, param2) {
> console.log(param1, param2);
> }
>
接着我们调用testFun：
javascript
> testFun("Hello", "World");
>
我们传递了两个参数，"Hello"和"World"。在函数内部，param1等于“Hello”，param2等于“World”。请注意，testFun函数可以多次调用，每次调用时传递的参数会决定形参的实际值。 - [x] 任务:
- 创建一个名为myFunction的函数，它可以接收两个参数，计算参数的和，将结果输出到控制台。
- 调用这个函数。
49.Global Scope and Functions
var myGlobal = 10;
function fun1() {
oopsGlobal = 5;
}
function fun2() {
var output = "";
if (typeof myGlobal != "undefined") {
output += "myGlobal: " + myGlobal;
}
if (typeof oopsGlobal != "undefined") {
output += " oopsGlobal: " + oopsGlobal;
}
console.log(output);
}- 在 JavaScript 中，
作用域涉及到变量的作用范围。在函数外定义的变量具有全局作用域。这意味着，具有全局作用域的变量可以在代码的任何地方被调用。 - 这些没有使用
var关键字定义的变量，会被自动创建在全局作用域中，形成全局变量。当在代码其他地方无意间定义了一个变量，刚好变量名与全局变量相同，这时会产生意想不到的后果。因此你应该总是使用var关键字来声明你的变量。 - [x] 任务:
- 在函数外声明一个
全局变量myGlobal，并给它一个初始值10 - 在函数
fun1的内部，不使用var关键字来声明oopsGlobal，并赋值为5。 - [ ] 错误：在函数外用
var声明也为全局变量。
- 在函数外声明一个
50.Local Scope and Functions
function myFunction() {
'use strict';
var myVar;
console.log(myVar);
}
myFunction()- 在一个函数内声明的变量，以及该函数的参数都是局部变量，意味着它们只在该函数内可见。
- 这是在函数
myTest内声明局部变量loc的最佳例子：
javascript
> function myTest() {
> var loc = "foo";
> console.log(loc);
> }
> myTest(); // "foo"
> console.log(loc); // "undefined"
>
在函数外，loc是未定义的。 - [x] 任务: 在函数 myFunction 内部声明一个局部变量 myVar，并删除外部console.log。
51.Global vs. Local Scope in Functions
var outerWear = "T-Shirt";
function myFunction() {
var outerWear = "sweater";
return outerWear;
}- 一个程序中有可能具有相同名称的
局部变量和全局变量。在这种情况下，局部变量将会优先于全局变量。 - 下面为例：
javascript
> var someVar = "Hat";
> function myFun() {
> var someVar = "Head";
> return someVar;
> }
>
函数myFun将会返回"Head"，因为局部变量优先级更高。 - [x] 任务: 给
myFunction添加一个局部变量来覆盖outerWear的值为"sweater"。 - [ ] 错误：函数内声明局部变量要加
var。
52.Return a Value from a Function with Return
function timesFive(num) {
return 5*num;- 我们可以把数据通过函数的
参数来传入函数，也可以使用return语句把数据从一个函数中传出来。
53.Assignment with a Returned Value
var processed = 0;
function process(num) {
return (num + 3) / 5;
}- 如果你还记得我们在 Storing Values with the Equal Operator 这一节的讨论，赋值之前，先完成等号右边的操作。这意味着我们可把一个函数的返回值，赋值给一个变量。
54.Stand in Line
function queue(arr, item) {
arr.push(item);
item = arr.shift();
return item;
}- 在计算机科学中
队列（queue）是一个抽象的数据结构，队列中的条目都是有秩序的。新的条目会被加到队列的末尾，旧的条目会从队列的头部被移出。
写一个函数queue，用一个数组arr和一个数字item作为参数。数字item添加到数组的结尾，然后移出数组的第一个元素，最后队列函数应该返回被删除的元素。
55.Understanding Boolean Values
function welcomeToBooleans() {
return true;- 另一种数据类型是布尔（Boolean）。
布尔值要么是true要么是false。它非常像电路开关，true是“开”，false是“关”。这两种状态是互斥的。 - 注意:
Boolean值绝不会写作被引号包裹起来的形式。字符串的"true"和"false"不是布尔值，在 JavaScript 中也没有特殊含义。 - [x] 任务: 修改 welcomeToBooleans 函数，让它返回 true 而不是 false。
56.Use Conditional Logic with If Statements
function myFunction(wasThatTrue) {
if(wasThatTrue)
return "That was true";
return "That was false";
}- If语句用于在代码中做条件判断。关键字
if告诉 JavaScript 在小括号中的条件为真的情况下去执行定义在大括号里面的代码。这种条件被称为Boolean条件，因为他们只可能是true（真）或false（假）。
57.Comparison with the Equality Operator
function myTest(val) {
if (val == 12) {
return "Equal";
}
return "Not Equal";
}- 在 JavaScript 中，有很多
相互比较的操作。所有这些操作符都返回一个true或false值。
58.Comparison with the Strict Equality Operator
function myTest(val) {
if (val === 7) {
return "Equal";
}
return "Not Equal";
}- 严格相等运算符（
===）是相对于相等操作符（==）的一种操作符。与相等操作符不同的是，它会同时比较元素的值和数据类型。
59.Comparison with the Inequality Operator
function myTest(val) {
if (val != 99) { // 请修改这一行
return "Not Equal";
}
return "Equal";
}- 不相等运算符（!=）与相等运算符是相反的。这意味着不相等运算符中，如果“不为真”并且返回 false 的地方，在相等运算符中会返回true，反之亦然。与相等运算符类似，不相等运算符在比较的时候也会转换值的数据类型。
例如
1 != 2 // true
1 != “1” // false
1 != ‘1’ // false
1 != true // false
0 != false // false –>
- [x] 任务: 在if语句中，添加不相等运算符!=，这样函数在当val不等于99的时候，会返回"Not Equal"。
60.Comparison with the Strict Inequality Operator
function myTest(val) {
if (val !== 17) {
return "Not Equal";
}
return "Equal";
}- 严格不相等运算符（
!==）与全等运算符是相反的。这意味着严格不相等并返回false的地方，用严格相等运算符会返回true，反之亦然。严格相等运算符不会转换值的数据类型。
61.Comparison with the Greater Than Operator
function myTest(val) {
if (val > 100) {
return "Over 100";
}
if (val > 10) {
return "Over 10";
}
return "10 or Under";
}62.Comparison with the Greater Than Or Equal To Operator
function myTest(val) {
if (val >= 20) {
return "20 or Over";
}
if (val >= 10) {
return "10 or Over";
}
return "9 or Under";
}63.Comparison with the Less Than Operator
function myTest(val) {
if (val < 25) {
return "Under 25";
}
if (val < 55) {
return "Under 55";
}
return "55 or Over";
}64.Comparison with the Less Than Or Equal To Operator
function myTest(val) {
if (val <= 22) {
return "Smaller Than or Equal to 12";
}
if (val <= 24) {
return "Smaller Than or Equal to 24";
}
return "25 or More";
}65.Comparisons with the Logical And Operator
function myTest(val) {
if (val <= 50 && val >= 25) {
return "Yes";
}
return "No";
}66.Comparisons with the Logical Or Operator
function myTest(val) {
if (val < 10 || val > 20) {
return "Outside";
}
return "Inside";
}67.Introducing Else Statements
function myTest(val) {
var result = "";
if (val > 5) {
result = "Bigger than 5";
}
else {
result = "5 or Smaller";
}
return result;
}68.Introducing Else If Statements
function myTest(val) {
if (val > 10) {
return "Greater than 10";
}
else if (val < 5) {
return "Smaller than 5";
}
else
return "Between 5 and 10";
}69.Logical Order in If Else Statements
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";
}
}- if、else if语句中代码的执行顺序是很重要的。在条件判断语句中，代码的执行顺序是从上到下，所以你需要考虑清楚先执行哪一句，后执行哪一句。
- 这有两个例子。
第一个例子：
javascript
> function foo(x) {
> if (x < 1) {
> return "Less than one";
> } else if (x < 2) {
> return "Less than two";
> } else {
> return "Greater than or equal to two";
> }
> }
>
第二个例子更改了代码的执行顺序：
javascript
> function bar(x) {
> if (x < 2) {
> return "Less than two";
> } else if (x < 1) {
> return "Less than one";
> } else {
> return "Greater than or equal to two";
> }
> }
>
这两个函数看起来几乎一模一样，我们传一个值进去看看它们有什么区别。
javascript
> foo(0) // "Less than one"
> bar(0) // "Less than two"
> - [x] 任务: 更改函数的逻辑顺序以便通过所有的测试用例。
70.Chaining If Else Statements
function myTest(num) {
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";
}if/else语句串联在一起可以实现复杂的逻辑，这是多个if/else if语句串联在一起的伪代码：
javascript
> if (condition1) {
> statement1
> } else if (condition2) {
> statement2
> } else if (condition3) {
> statement3
> . . .
> } else {
> statementN
> }
>- [x] 任务: 把
if/else if语句串联起来实现下面的逻辑：
javascript
> num < 5 - return "Tiny"
> num < 10 - return "Small"
> num < 15 - return "Medium"
> num < 20 - return "Large"
> num >= 20 - return "Huge"
>
71.Golf Code
function golfScore(par, strokes) {
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 if(strokes >= par + 3)
return "Go Home!";
}- 在高尔夫
golf游戏中，每个洞都有自己的标准杆数par，代表着距离。根据你把球打进洞所挥杆的次数strokes，可以计算出你的高尔夫水平。 - 函数将会传送2个参数，分别是标准杆数
par和挥杆次数strokes，根据下面的表格返回正确的水平段位。
|Strokes|Return|
|:—:|:—:|
|1|”Hole-in-one!”|
|<= par - 2|”Eagle”|
|par - 1|”Birdie”|
|par|”Par”|
|par + 1|”Bogey”|
|par + 2|”Double Bogey”|
|>= par + 3|”Go Home!”| - par 和 strokes 必须是数字而且是正数。
- [ ] 错误：判断条件要用
==而不是=！
72.Selecting from many options with Switch Statements
function myTest(val) {
var answer = "";
switch(val) {
case 1:
answer = "alpha";
break;
case 2:
answer = "beta";
break;
case 3:
answer = "gamma";
break;
case 4:
answer = "delta";
break;
}
return answer;
}- 如果你有非常多的选项需要选择，可以使用
switch语句。根据不同的参数值会匹配上不同的case分支，语句会从第一个匹配的case分支开始执行，直到碰到break就结束。 - 这是一个伪代码案例：
javascript
> switch (num) {
> case value1:
> statement1;
> break;
> case value2:
> statement2;
> break;
> ...
> case valueN:
> statementN;
> break;
> }
> - 测试
case值使用严格相等运算符进行比较，break关键字告诉javascript停止执行语句。如果没有break关键字，下一个语句会继续执行。 - [x] 任务: 写一个测试
val的switch语句，并且根据下面的条件来设置不同的answer：
1- “alpha”
2- “beta”
3- “gamma”
4- “delta”
73.Adding a default option in Switch statements
function myTest(val) {
var answer = "";
switch(val) {
case "a":
answer = "apple";
break;
case "b":
answer = "bird";
break;
case "c":
answer = "cat";
break;
default:
answer = "stuff";
break;
}
return answer;
}- 在
switch语句中你可能无法用case来指定所有情况，这时你可以添加default语句。当再也找不到case匹配的时候default语句会执行，非常类似于if/else组合中的else语句。 default语句应该是最后一个case。
74.Multiple Identical Options in Switch Statements
function myTest(val) {
var answer = "";
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:
answer = "4 alone";
}- 如果
switch语句中的case分支的break语句漏掉了，后面的case语句会一直执行直到遇到break。
75.Replacing If Else Chains with Switch
function myTest(val) {
var answer = "";
switch (val) {
case 1:
answer = "There is no #1";
break;
case 7:
answer = "Ate Nine";
break;
case 42:
answer = "The Answer";
break;
case 99:
answer = "Missed me by this much!";
break;
case "bob":
answer = "Marley";
}- 如果你有多个选项需要选择，
switch语句写起来会比多个串联的if/if else语句容易些.
76.Returning Boolean Values from Functions
function isLess(a, b) {
return a < b;
}- 你可能会回想起Comparison with the Equality Operator ，所有的比较操作符返回的都是一个
boolean值，要么是true要么是false。 - 使用
if/else语句来做比较然后返回true或false已经成为大家的共识:
JavaScript
> function isEqual(a,b) {
> if (a === b) {
> return true;
> } else {
> return false;
> }
> }
>
因为===总是返回true或false，所以我们可以直接返回比较的结果：
JavaScript
> function isEqual(a,b) {
> return a === b;
> }
> - [X] 任务: 移除
isLess函数的if/else语句但不影响函数的功能。
77.Return Early Pattern for Functions
// 定义 abTest
function abTest(a, b) {
if(a < 0 || b < 0)
return;
else
return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}- 当代码执行到
return语句时，函数返回一个结果就结束运行了，return后面的语句根本不会执行。
78.Counting Cards
var count = 0;
function cc(card) {
var action;
switch(card) {
case 2:
case 3:
case 4:
case 5:
case 6:
count += 1;
break;
case 10:
case "J":
case "Q":
case "K":
case "A":
count -= 1;
break;
}
if(count > 0)
action = " Bet";
if(count <= 0)
action = " Hold";
return count+action;
}79.Build JavaScript Objects
var myDog = {
"name": "Dog",
"legs": 4,
"tails": 1,
"friends": ["cat","bird"]
};- 你之前可能听说过对象
object。 - 对象和数组很相似，数组是通过索引来访问和修改数据，对象是通过属性来访问和修改数据的。
- 这是一个示例对象：
JavaScript
> var cat = {
> "name": "Whiskers",
> "legs": 4,
> "tails": 1,
> "enemies": ["Water", "Dogs"]
> };
> - 对象适合用来存储结构化数据，就和真实世界的对象一模一样，比如一只猫。
- [X] 任务: 创建一个叫做
myDog的对象，它里面有这些属性： 名称"name"、腿"legs"、尾巴"tails"、朋友"friends"。你可以设置对象属性为任何你想要的值，只要"name"是字符串、"legs"和"tails"是数字、"friends"是数组。
80.Accessing Objects Properties with the Dot Operator
var testObj = {
"hat": "ballcap",
"shirt": "jersey",
"shoes": "cleats"
};
var hatValue = testObj.hat;
var shirtValue = testObj.shirt;- 有两种方式访问对象属性，一个是点操作符(
.)，一个是中括号操作符([])。 - 当你知道属性的名称的时候，使用点操作符。
- 这是一个使用点操作符读取对象属性的例子：
JavaScript
> var myObj = {
> prop1: "val1",
> prop2: "val2"
>};
> var prop1val = myObj.prop1; // val1
> var prop2val = myObj.prop2; // val2
> - [X] 任务: 通过点操作符读取对象
testObj，把hat的属性值赋给变量hatValue，把shirt的属性值赋给shirtValue。
81.Accessing Objects Properties with Bracket Notation
var testObj = {
"an entree": "hamburger",
"my side": "veggies",
"the drink": "water"
};
var entreeValue = testObj["an entree"];
var drinkValue = testObj["the drink"];- 第二种访问对象的方式就是中括号操作符(
[])，如果你想访问的属性的名称有一个空格，这时你只能使用中括号操作符([])。 - 这是一个使用中括号操作符(
[])读取对象属性的例子：
JavaScript
> var myObj = {
> "Space Name": "Kirk",
> "More Space": "Spock"
> };
> myObj["Space Name"]; // Kirk
> myObj['More Space']; // Spock
> - 提示：属性名称中如果有空格，必须把属性名称用单引号或双引号包裹起来。
- [X] 任务: 用中括号操作符读取对象
testObj的属性"an entree"值和属性"the drink"值。 -
- [ ] 错误：注意中括号内要加双引号
""。
- [ ] 错误：注意中括号内要加双引号
82.Accessing Objects Properties with Variables
var testObj = {
12: "Namath",
16: "Montana",
19: "Unitas"
};
var playerNumber = 16;
var player = testObj[playerNumber];- 中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时，这种方式极为有用。
- 这有一个使用变量来访问属性的例子：
JavaScript
> var someProp = "propName";
> var myObj = {
> propName: "Some Value"
> }
> myObj[someProp]; // "Some Value"
>
还有更多：
JavaScript
> var myDog = "Hunter";
> var dogs = {
> Fido: "Mutt",
> Hunter: "Doberman",
> Snoopie: "Beagle"
> };
> var breed = dogs[myDog];
> console.log(breed)// "Doberman"
> - 提示：当我们通过变量名访问属性的时候，不需要给变量名包裹引号。因为实际上我们使用的是变量的值，而不是变量的名称。
- [X] 任务: 使用变量
playerNumber，通过中括号操作符找到testObj中playerNumber 为 16 的值。 - [ ] 错误：看提示。
83.Updating Object Properties
var myDog = {
"name": "Coder",
"legs": 4,
"tails": 1,
"friends": ["Free Code Camp Campers"]
};
myDog.name = "Happy Coder";- 当你创建了一个对象后，你可以用点操作符或中括号操作符来更新对象的属性。
- 举个例子，让我们看看 ourDog:
JavaScript
> var ourDog = {
> "name": "Camper",
> "legs": 4,
> "tails": 1,
> "friends": ["everything!"]
> };
>
让我们更改它的名称为"Happy Camper"，这有两种方式来更新对象的name属性：
JavaScript
> ourDog.name = "Happy Camper";
> ourDog["name"] = "Happy Camper";
> - [X] 任务: 更新
myDog对象的name属性，让它的名字从"Coder"变成"Happy Coder"。
84.Add New Properties to a JavaScript Object
myDog.bark = "wang";- 你也可以像更改属性一样给对象添加属性。
- 看看我们是如何给ourDog添加 “bark”属性：
ourDog.bark = "bow-wow";或者ourDog["bark"] = "bow-wow"; - [X] 任务: 给
myDog添加一个"bark"属性，设置它的值为狗的声音，例如："woof"。
85.Delete Properties from a JavaScript Object
delete myDog.tails;- 我们同样可以删除对象的属性，例如：
delete ourDog.bark; - [X] 任务: 删除
myDog对象的"tails"属性。
86.Using Objects for Lookups
function phoneticLookup(val) {
var lookup = {
alpha: "Adams",
bravo: "Boston",
charlie: "Chicago",
delta: "Denver",
echo: "Easy",
foxtrot: "Frank"
};
return lookup[val];
}- 对象和字典一样，可以用来存储键/值对。如果你的数据跟对象一样，你可以用对象来查找你想要的值，而不是使用switch或if/else语句。当你知道你的输入数据在某个范围时，这种查找方式极为有效。
- 这是简单的反向字母表：
JavaScript
> var alpha = {
> 1:"Z",
> 2:"Y",
> 3:"X",
> 4:"W",
> ...
> 24:"C",
> 25:"B",
> 26:"A"
> };
> alpha[2]; // "Y"
> alpha[24]; // "C"
>
> var value = 2;
> alpha[value]; // "Y"
> - [X] 任务: 把
switch语句转化为一个叫做lookup的对象。 - 错误：
- [ ] 对象赋值时用等号
=， - [ ] 字符串要加双引号
"" - [ ] 最后的分号放在大括号外面而不是里面。
- [ ] 通过变量名访问属性只能用中括号。
87.Testing Objects for Properties
var myObj = {
gift: "pony",
pet: "kitten",
bed: "sleigh"
};
function checkObj(checkProp) {
if(myObj.hasOwnProperty(checkProp))
return myObj[checkProp];
else
return "Not Found";
}- 有时检查一个对象属性是否存在是非常有用的，我们可以用
.hasOwnProperty(propname)方法来检查对象是否有该属性。如果有返回true，反之返回false。 - 举例:
JavaScript
> var myObj = {
> top: "hat",
> bottom: "pants"
> };
> myObj.hasOwnProperty("top"); // true
> myObj.hasOwnProperty("middle"); // false
> - [X] 任务: 修改函数
checkObj检查myObj是否有checkProp属性，如果属性存在，返回属性对应的值，如果不存在，返回"Not Found"。 - 注意：如果你需要通过变量来访问对象的属性值，请用中括号操作符，点操作符不支持变量。
- [ ] 错误：函数中也是通过变量的值来访问对象的属性，所以
checkProp不加双引号。
88.Introducing JavaScript Object Notation (JSON)
var myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
},
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ]
}
];- JavaScript Object Notation 简称
JSON，它使用JavaScript对象的格式来存储数据。JSON是灵活的，因为它允许数据结构是字符串，数字，布尔值，字符串和对象的任意组合。 - 这里是一个JSON对象的示例：
JavaScript
> var ourMusic = [
> {
> "artist": "Daft Punk",
> "title": "Homework",
> "release_year": 1997,
> "formats": [
> "CD",
> "Cassette",
> "LP" ],
> "gold": true
> }
> ];
>
这是一个对象数组，并且对象有各种关于专辑的详细信息。它也有一个嵌套的formats的数组。附加专辑记录可以被添加到数组的最上层。 - 提示: 数组中有多个 JSON 对象的时候，对象与对象之间要用逗号隔开。
- [X] 任务: 添加一个新专辑到
myMusic的JSON对象。添加artist和title字符串，release_year数字和formats字符串数组。
89.Accessing Nested Objects in JSON
var myStorage = {
"car": {
"inside": {
"glove box": "maps",
"passenger seat": "crumbs"
},
"outside": {
"trunk": "jack"
}
}
};
var gloveBoxContents = myStorage.car.inside["glove box"];- 通过串联起来的点操作符或中括号操作符来访问JSON对象的嵌套属性。
- 下面是一个嵌套的JSON对象：
JavaScript
> var ourStorage = {
> "desk": {
> "drawer": "stapler"
> },
> "cabinet": {
> "top drawer": {
> "folder1": "a file",
> "folder2": "secrets"
> },
> "bottom drawer": "soda"
> }
> }
> ourStorage.cabinet["top drawer"].folder2; // "secrets"
> ourStorage.desk.drawer; // "stapler"
> - [X] 任务: 检索JSON对象
myStorage中嵌套属性glove box的值。因为属性的名字带有空格，请使用中括号操作符来访问属性的值。
90.Accessing Nested Arrays in JSON
var myPlants = [
{
type: "flowers",
list: [
"rose",
"tulip",
"dandelion"
]
},
{
type: "trees",
list: [
"fir",
"pine",
"birch"
]
}
];
var secondTree = myPlants[1].list[1];- 正如我们在前面的例子所见，JSON对象可以嵌套对象和数组。与访问嵌套对象一样，用中括号操作符同样可以访问嵌套数组。
- 下面是如何访问嵌套数组的例子：
JavaScript
> var ourPets = {
> "cats": [
> "Meowzer",
> "Fluffy",
> "Kit-Cat"
> ],
> "dogs": [
> "Spot",
> "Bowser",
> "Frankie"
> ]
> };
> ourPets.cats[1]; // "Fluffy"
> ourPets.dogs[0]; // "Spot"
> - [X] 任务: 使用点操作符和中括号操作符来检索变量
myPlants的第二棵树。 - [ ] 错误：注意数组编号从
0开始，对象也不例外。
91.Record Collection
// 初始化变量
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"
}
};
// 深拷贝 collection，用于测试
var collectionCopy = JSON.parse(JSON.stringify(collection));
// 请只修改这条注释以下的代码
function update(id, prop, value) {
if(value !== '' && prop != 'tracks')
collectionCopy[id][prop]=value;
if(value !== '' && prop == 'tracks')
collectionCopy[id][prop].push(value);
if(value === '')
delete collectionCopy[id][prop];
return collection;
}- 右边有一个JSON对象，代表着你的专辑集。每一张专辑由一个唯一的
id标识，并具有多种属性。但并非所有的专辑都有完整的信息。 - 写一个函数，它有个三个参数，
id、prop、value。
- 如果
value !=''而且prop != 'tracks'，collectionCopy[id][prop]=value;。 - 如果
value !=''而且prop == 'tracks'，collectionCopy[id][prop].push(value);。 - 如果
value == ''，delete collectionCopy[id][prop];。
- 如果
- 记住：函数返回的永远是整个对象。
92.Iterate with JavaScript For Loops
var myArray = [];
for (var i = 1; i <= 5; i++) {
myArray.push(i);
}- 一个条件语句只能执行一次代码，而一个循环语句可以多次执行代码。
- JavaScript 中最常见的循环就是“
for循环”。
93.Iterate Odd Numbers With a For Loop
var myArray = [];
for (var i = 1; i < 10; i += 2) {
myArray.push(i);
}for循环可以按照我们指定的顺序来迭代，通过更改我们的计数器，我们可以按照偶数顺序来迭代。
94.Count Backwards With a For Loop
var myArray = [];
for (var i = 9; i > 0; i -= 2) {
myArray.push(i);
}for循环也可以逆向迭代，只要我们定义好合适的条件。
95.Iterate Through an Array with a For Loop
var myArr = [ 2, 3, 4, 5, 6];
var total = 0;
for (var i = 0; i <= ourArr.length; i++) {
total += myArr[i];
}- 迭代输出一个数组的每个元素是JavaScript中的常见需求，
for循环可以做到这一点。
96.Nesting For Loops
function multiplyAll(arr) {
var product = 1;
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
product *= arr[i][j];
}
}
return product;
}
multiplyAll([[1,2],[3,4],[5,6,7]]);- 如果你有一个二维数组，可以使用相同的逻辑，先遍历外面的数组，再遍历里面的子数组。下面是一个例子：
- [X] 任务: 修改函数multiplyAll，获得arr内部数组的每个数字相乘的结果product。
97.Iterate with JavaScript While Loops
var myArray = [];
var i = 0;
while(i < 5) {
myArray.push(i);
i++;
}- 另一种类型的 JavaScript 循环被称为
while循环，因为它规定，当（while）条件为真，循环才会执行，反之不执行。
- [X] 任务: 通过一个while循环，把从0到4的值添加到myArray中。
98.Profile Lookup
function lookUp(firstName, prop){
var i = 0;
for (i=0;i<=3;i++){
if(contacts[i].firstName == firstName)
break;
}
if(i==4)
return "No such contact";
else if(contacts[i].hasOwnProperty(prop))
return contacts[i][prop];
else
return "No such property";
}- 我们有一个对象数组，里面存储着通讯录。
- 函数
lookUp有两个预定义参数：firstName值和prop属性 。 - 函数将会检查通讯录中是否存在一个与传入的
firstName相同的联系人。如果存在，那么还需要检查对应的联系人中是否存在prop属性。 - 如果它们都存在，函数返回
prop属性对应的值。 - 如果
firstName值不存在，返回"No such contact"。 - 如果
prop属性不存在，返回"No such property"。 - [ ] 错误：注意循环体，大小写；
99.Generate Random Fractions with JavaScript
function myFunction() {
return Math.random();
}- 计算机的行为只有两种：确定性和随机性。当你一步步地闯关来到这里就是确定行为，当你随意点了个链接就来到这里就是随机行为。
- 而随机数最适合用来创建这种随机行为。
Math.random()用来生成一个在0(包括0)到1(不包括1)之间的随机小数，因此Math.random()可能返回0但绝不会返回1。- 提示: 随后的函数都会在
return执行前调用，所以我们可以直接返回Math.random()的值。 - [X] 任务: 更改
myFunction来生成一个随机数取代0。
100.Generate Random Whole Numbers with JavaScript
function myFunction() {
return Math.floor(10*Math.random());
}- 生成随机小数很棒，但随机数更有用的地方在于生成随机整数。
- 用
Math.random()生成一个随机小数。 - 把这个随机小数乘以
20。 - 用
Math.floor()向下取整 获得它最近的整数。 - 记住
Math.random()永远不会返回1。同时因为我们是在用Math.floor()向下取整，所以最终我们获得的结果不可能有20。这确保了我们获得了一个在0到19之间的整数。
- 用
- [X] **任务**: 生成一个`0`到`9`之间的随机整数。
101.Generate Random Whole Numbers within a Range
function randomRange(myMin, myMax) {
return Math.floor(Math.random() * (myMax -myMin + 1)) + myMin;
}- 我们之前生成的随机数是在0到某个数之间，现在我们要生成的随机数是在两个指定的数之间。
- 我们需要定义一个最小值和一个最大值。
- 下面是我们将要使用的方法，仔细看看并尝试理解这行代码到底在干嘛：
Math.floor(Math.random() * (max - min + 1)) + min - [X] 任务: 创建一个叫randomRange的函数，参数为myMin和myMax，返回一个在myMin(包括myMin)和myMax(包括myMax)之间的随机数。
102.Sift through Text with Regular Expressions
var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";
var expression = /and/gi;
var andCount = testString.match(expression).length;Regular expressions正则表达式被用来根据某种匹配模式来寻找strings中的某些单词。- 举例：如果我们想要找到字符串
The dog chased the cat中单词the，我们可以使用下面的正则表达式:/the/gi - 我们可以把这个正则表达式分成几段：
/是这个正则表达式的头部the是我们想要匹配的模式/是这个正则表达式的尾部g代表着global(全局)，意味着返回所有的匹配而不仅仅是第一个。i代表着忽略大小写，意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。- [X] 任务: 用全局、忽略大小写的模式选取字符串 testString中所有的单词 and。
103.Find Numbers with Regular Expressions
var testString = "There are 3 cats but 4 dogs.";
var expression = /\d+/g;
var digitCount = testString.match(expression).length;- 我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。
- 特殊选择器中的一种就是数字选择器
\d，意思是被用来获取一个字符串的数字。 - 在JavaScript中, 数字选择器类似于:
/\d/g。 - 在选择器后面添加一个加号标记(
+)，例如：/\d+/g，它允许这个正则表达式匹配一个或更多数字。 - 尾部的
g是’global’的简写，意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。 - [X] 任务: 用
\d选择器来选取字符串中的所有数字。
104.Find Whitespace with Regular Expressions
var testString = "How many spaces are there in this sentence?";
var expression = /\s+/g;
var spaceCount = testString.match(expression).length;- 我们也可以使用正则表达式选择器
\s来选择一个字符串中的空白。 - 空白字符有
" "(空格符)、\r(回车符)、\n(换行符)、\t(制表符) 和\f(换页符)。 - 空白正则表达式类似于：
/\s+/g - [X] 任务: 用 \s 选取句子中的所有空白字符。
105.Invert Regular Expression Matches with JavaScript
var testString = "How many non-space characters are there in this sentence?";
var expression = /\S/g;
var nonSpaceCount = testString.match(expression).length;- 你可以用正则表达式选择器的大写版本 来转化任何匹配。
- 举个例子：
\s匹配任何空白字符，\S匹配任何非空白字符。 - [X] 任务: 用
/\S/g来匹配字符串testString中的所有非空白字符。
106.Create a JavaScript Slot Machine
<script>
function runSlots() {
var slotOne;
var slotTwo;
var slotThree;
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;
}
</style>- 现在把我们之前的所学的知识点结合起来完成一个老虎机游戏。
- 这次我们生成3个随机数，范围在1到3之间。
- 分别用
slotOne、slotTwo、slotThree来存储着3个随机数。 - 用我们之前的所学来生成随机数)：
Math.floor(Math.random() * (3 - 1 + 1)) + 1;
107.Add your JavaScript Slot Machine Slots
if (slotOne === slotTwo && slotTwo === slotThree){
return slotOne;
} else {
return null;
}- 现在我们的老虎机每次生存3个随机数，我们得去检查随机数是否全部相等的情况。
- 如果全部相等，我们应该提示用户他们赢了，并返回中奖号码，否则我们应该返回
null。 null是JavaScript中的一种数据类型，意味着空。- 当这3个随机数相等的时候，判定用户赢。让我们创建一个
if statement，用多个条件按顺序来检查它们是否相等。类似于：
javascript
> if (slotOne === slotTwo && slotTwo === slotThree){
> return slotOne;
> } else {
> }
> - 当3个随机数都一样的时候，我们把
"It's A Win"追加到class logger的html中。
108.Bring your JavaScript Slot Machine to Life
$($(".slot")[0]).html(slotOne);
$($(".slot")[1]).html(slotTwo);
$($(".slot")[2]).html(slotThree);- 让我们用 jQuery 选择器
$(".slot")获得所有老虎机。 - 一旦获取到所有老虎机，我们可以通过中括号操作符获取到每一个老虎机：
$($(".slot")[0]).html(slotOne); - jQuery将会获取到第一个老虎机，并更新它的HTML为正确的数字。
- [X] 任务: 分别更新每个老虎机上的HTML为对应的数字。
109.Give your JavaScript Slot Machine some Stylish Images
<script>
function runSlots() {
var slotOne;
var slotTwo;
var slotThree;
var images = ["//i.imgur.com/9H17QFk.png", "//i.imgur.com/9RmpXTy.png", "//i.imgur.com/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;
$($('.slot')[0]).html('
1] + '">');
$($('.slot')[1]).html('
1] + '">');
$($('.slot')[2]).html('
1] + '">');
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='/images/freecodecamp_logo.svg' alt='learn to code JavaScript at Free Code Camp logo' class='img-responsive nav-logo'>
<h2>FCC Slot Machineh2>
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>- 现在给我们的老虎机加点图片。
- 我们已经为你准备好了图片
images，我们可以通过不同的索引来获取每个图片。 - 现在让我们设置第一个老虎机根据随机数来显示一张图片：
$($('.slot')[0]).html('');
- [X] 任务: 设置所有的老虎机根据随机数来显示对应的图片，最后点击RUN。
注：资料整理自FCC中文站