FreeCodeCamp中文社区刷题笔记（部分答案）

FreeCodeCamp中文社区刷题笔记（部分答案）

一、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 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>

这里写图片描述

五、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 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>

这里写图片描述

六、Give your JavaScript Slot Machine some Stylish Images（加入图片）

现在给我们的老虎机加点图片。

我们已经为你准备好了图片images，我们可以通过不同的索引来获取每个图片。

现在让我们设置第一个老虎机根据随机数来显示一张图片：

$($('.slot')[0]).html('<img src = "' + images[slotOne-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('<img src="' + images[slotOne - 1] + '">');
    $($('.slot')[1]).html('<img src="' + images[slotTwo - 1] + '">');
    $($('.slot')[2]).html('<img src="' + images[slotThree - 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 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>