FreeCodeCamp中文社区刷题笔记（部分答案）
FreeCodeCamp中文社区刷题笔记（部分答案）
-
-
- 一、Profile Lookup(通讯录问题)
- 二、Generate Random Whole Numbers within a Range(随机数)
- 三、Sift through Text with Regular Expressions（正则表达式）
- 四、Add your JavaScript Slot Machine Slots （老虎机问题）
- 五、Bring your JavaScript Slot Machine to Life（老虎机完整）
- 六、Give your JavaScript Slot Machine some Stylish Images（加入图片）
-
一、Profile Lookup(通讯录问题)
for循环问题
我们有一个对象数组，里面存储着通讯录。
函数 lookUp 有两个预定义参数：firstName值和prop属性 。
函数将会检查通讯录中是否存在一个与传入的 firstName 相同的联系人。如果存在，那么还需要检查对应的联系人中是否存在 prop属性。
如果它们都存在，函数返回prop属性对应的值。
如果firstName 值不存在，返回 “No such contact”。
如果prop 属性不存在，返回 “No such property”。
代码如下：
//初始化变量
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){
// 请把你的代码写在这条注释以下
/* 判断给出的参数firstname是否==[0,1,2,3]中的一个，若存在，还要检查给出的参数prop是否对应contacts[i]数组中的任一个属性，若存在，则返回prop属性对应的值
* 如果prop属性不存在，则返回“No such property”
*/
for(var i = 0; i < contacts.length; i++) {
if(contacts[i].firstName == firstName && contacts[i].hasOwnProperty(prop)){
return contacts[i][prop];
}else if(contacts[i].firstName == firstName && !contacts[i].hasOwnProperty(prop)){
return "No such property";
}else if(i==contacts.length-1){ //如果firstName不存在，则返回“No such contact”
return "No such contact";
}
}
// 请把你的代码写在这条注释以上
}
// 你可以修改这一行来测试你的代码
lookUp("Akira", "likes");二、Generate Random Whole Numbers within a Range(随机数)
生成[min, max]间的随机数
我们之前生成的随机数是在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) {
return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin; // 请修改这一行
}
// 你可以修改这一行来测试你的代码
var myRandom = randomRange(5, 15);
三、Sift through Text with Regular Expressions（正则表达式）
Regular expressions 正则表达式被用来根据某种匹配模式来寻找strings中的某些单词。
举例：如果我们想要找到字符串The dog chased the cat中单词 the，我们可以使用下面的正则表达式: /the/gi
我们可以把这个正则表达式分成几段：
/ 是这个正则表达式的头部
the 是我们想要匹配的模式
/ 是这个正则表达式的尾部
g 代表着 global(全局)，意味着返回所有的匹配而不仅仅是第一个。
i代表着忽略大小写，意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。
任务
用全局、忽略大小写的模式选取字符串 testString中所有的单词 and。
你可以尝试把 . 替换成 and。
// 初始化变量
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;
// 请只修改这条注释以下的代码
var expression = /and/gi; // 请修改这一行
// 请只修改这条注释以上的代码
// 用 andCount 存储 testString 中匹配到 expression 的次数
var andCount = testString.match(expression).length;
四、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) {
$(".logger").append(" It's A Win");
return slotOne;
}else {
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;
}
.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>
五、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>