FreeCodeCamp
- Record 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];。
记住：函数返回的永远是整个对象。
// 初始化变量
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;
}
else if(value !=='' && prop == 'tracks' ){
collectionCopy[id][prop].push(value);
}
else if( value === ''){
delete collectionCopy[id][prop];
}
return collection;
}
// 你可以修改这一行来测试你的代码
update(5439, "artist", "ABBA");-
-
Iterate Odd Numbers With a For Loop
for循环可以按照我们指定的顺序来迭代，通过更改我们的 计数器，我们可以按照偶数顺序来迭代。
初始化 i = 0，当 i < 10 的时候继续循环。
i += 2 让 i 每次循环之后增加2。
var ourArray = [];
for (var i = 0; i < 10; i += 2) {
ourArray.push(i);
}
循环结束后，ourArray 的值为 [0,2,4,6,8]。
改变 计数器，这样我们可以用奇数来数。
任务
写一个 for 循环，把从1到9的奇数添加到 myArray。
// 举例
var ourArray = [];
for (var i = 0; i < 10; i += 2) {
ourArray.push(i);
}
// 初始化变量
var myArray = [];
// 请把你的代码写在这条注释以下
for(var i = 1; i <= 9; i += 2){//这里是 i+= 2, 不是 i + 2
myArray.push(i);
}- Nesting For Loops
如果你有一个二维数组，可以使用相同的逻辑，先遍历外面的数组，再遍历里面的子数组。下面是一个例子：
var arr = [
[1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
一次输出 arr 中的每个子元素。提示，对于内部循环，我们可以通过 arr[i] 的 .length 来获得子数组的长度，因为 arr[i] 的本身就是一个数组。
任务
修改函数 multiplyAll，获得 arr 内部数组的每个数字相乘的结果 product。
function multiplyAll(arr) {
var product = 1;
// 请把你的代码写在这条注释以下
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < arr[i].length; j++){
product = product * arr[i][j];//这里是arr[i][j]
}
}
// 请把你的代码写在这条注释以上
return product;
}
// 你可以修改这一行来测试你的代码
multiplyAll([[1,2],[3,4],[5,6,7]]);**
-
-
Profile Lookup
**
我们有一个对象数组，里面存储着通讯录。
函数 lookUp 有两个预定义参数：firstName值和prop属性 。
函数将会检查通讯录中是否存在一个与传入的 firstName 相同的联系人。如果存在，那么还需要检查对应的联系人中是否存在 prop属性。
如果它们都存在，函数返回prop属性对应的值。
如果firstName 值不存在，返回 “No such contact”。
如果prop 属性不存在，返回 “No such property”。
Run tests (ctrl + enter)
//初始化变量
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 lookUp(firstName, prop){
// 请把你的代码写在这条注释以下
for(var i = 0; i < contacts.length; i++){
if(firstName == contacts[i].firstName){
if(contacts[i].hasOwnProperty(prop)){
return contacts[i][prop];
}
else{
return "No such property";
}
}
}
return "No such contact";
// 请把你的代码写在这条注释以上
}
// 你可以修改这一行来测试你的代码
lookUp("Akira", "likes");小结：
1. 不需要两个for，contacts[i].firstName可以直接定位到子数组。
2. 判断有没有属性，记得用.hasOwnProperty（）函数。
3. 最后一个return不需要else语句。
**
-
-
Generate Random Whole Numbers within a Range
**
我们之前生成的随机数是在0到某个数之间，现在我们要生成的随机数是在两个指定的数之间。
我们需要定义一个最小值和一个最大值。
下面是我们将要使用的方法，仔细看看并尝试理解这行代码到底在干嘛：
Math.floor(Math.random() * (max - min + 1)) + min
任务
创建一个叫randomRange的函数，参数为myMin和myMax，返回一个在myMin(包括myMin)和myMax(包括myMax)之间的随机数。
// 举例 function ourFunction(ourMin, ourMax) {
return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin; }
ourFunction(1, 9);
// 请把你的代码写在这条注释以下
function randomRange(myMin, myMax) {
var num = Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
return num; // 请修改这一行
}
// 你可以修改这一行来测试你的代码 var myRandom = randomRange(5, 15);
小结：
Math.floor(Math.random() * (myMax - myMin + 1)) + myMin; 解释这一行的意思：
1. (myMax - myMin + 1)可以理解成放大系数。
2. myMin可理解成被Math.floor（）向下取整以后的补差。
例如：
1. myMax = 6， myMin = 2；
2. myMax - myMin + 1 = 5. //放大系数为5.
3. 因为Math.random()的范围是[0, 1)，所以Math.random() * (myMax - myMin + 1)的范围是[0, 5).
4. 所以Math.floor(Math.random() * (myMax - myMin + 1))的范围是[0, 4] //因为Math.random()永远取不到1，所以乘以放大系数以后最大就是4.999999·····,向下取整以后最大是4。
5. 最后用myMin补差，最大范围可以取到myMin + 4 = 6. //即范围是[2, 6]
**
-
-
Create a JavaScript Slot Machine
**
现在把我们之前的所学的知识点结合起来完成一个老虎机游戏。
这次我们生成3个随机数，范围在1到3之间。
分别用 slotOne、slotTwo、slotThree来存储着3个随机数。
用我们之前的所学来生成随机数)：
Math.floor(Math.random() * (3 - 1 + 1)) + 1;
<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;
// 请把你的代码写在这条注释以上
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>小结：
1. slotOne已经定义过。不需要重新var。
2. 赋值语句用一个等号
**
-
-
Add your JavaScript Slot Machine Slots
**
现在我们的老虎机每次生存3个随机数，我们得去检查随机数是否全部相等的情况。
如果全部相等，我们应该提示用户他们赢了，并返回中奖号码，否则我们应该返回null。
null 是JavaScript中的一种数据类型，意味着空。
当这3个随机数相等的时候，判定用户赢。让我们创建一个if statement，用多个条件按顺序来检查它们是否相等。类似于：
if (slotOne === slotTwo && slotTwo === slotThree){
return slotOne;
} else {
}
当3个随机数都一样的时候，我们把 “It’s A Win” 追加到class logger的html中。
<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;
// 请把你的代码写在这条注释以下
if((slotOne !== slotTwo) || (slotTwo !== slotThree) || (slotThree !== slotOne))
return null;
// 请把你的代码写在这条注释以上
if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
$(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
}
$(".logger").append(" It's 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">res()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>小结：
1. append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
**
-
-
Bring your JavaScript Slot Machine to Life
**
让我们用 jQuery 选择器 $(“.slot”) 获得所有老虎机。
一旦获取到所有老虎机，我们可以通过中括号操作符获取到每一个老虎机：
( (“.slot”)[0]).html(slotOne);
jQuery将会获取到第一个老虎机，并更新它的HTML为正确的数字。
任务：分别更新每个老虎机上的HTML为对应的数字。
<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(slotOne);
$($(".slot")[1]).html(slotTwo);
$($(".slot")[2]).html(slotThree);
// 请把你的代码写在这条注释以上
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>
.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>**
-
-
Give your JavaScript Slot Machine some Stylish Images
**
现在给我们的老虎机加点图片。
我们已经为你准备好了图片images，我们可以通过不同的索引来获取每个图片。
现在让我们设置第一个老虎机根据随机数来显示一张图片：
$($('.slot')[0]).html('
1] + '">');任务：设置所有的老虎机根据随机数来显示对应的图片，最后点击RUN。
<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>