# Basic JavaScript 101

91-Iterate Through an Array with a For Loop

```javascript
// Example
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];
var total = 0;

for (i=0; i<myArr.length; i++){
  total += myArr[i];
}

// Only change code below this line
```

92-Nesting For Loops

```javascript
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 = 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]]);
```

93-Iterate with JavaScript While Loops

```javascript
// Setup
var myArray = [];

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

94-Profile Lookup

* 要自幹一個資料查詢系統
* 可惜自己寫出來的不是最佳解 QQ
* <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-profile-lookup/18259/6>
* 為什麼不 dot
* <https://stackoverflow.com/questions/17189642/difference-between-using-bracket-and-dot-notation>

```javascript
//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 result ;

  for(var i=0; i<contacts.length; i++){

    if(firstName==contacts[i].firstName && contacts[i].hasOwnProperty(prop)){
      result = contacts[i][prop];
      return result;
    } 
    else if(firstName==contacts[i].firstName && contacts[i].hasOwnProperty(prop)==false){
      result = "No such property";
      return result;
    }
  }

  return "No such contact";

// Only change code above this line
}

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

* 討論區的解答

```javascript
for (var x = 0; x < contacts.length; x++){
    if (contacts[x].firstName === firstName) {
        if (contacts[x].hasOwnProperty(prop)) {
            return contacts[x][prop];
        } else {
            return "No such property";
        }
    }
}
return "No such contact";
```

95-Generate Random Fractions with JavaScript

```javascript
function randomFraction() {

  // Only change code below this line.
  return Math.random();

  // Only change code above this line.
}
```

96-Generate Random Whole Numbers with JavaScript

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

function randomWholeNum() {

  // Only change code below this line.
  return Math.floor(Math.random()*10) ;
}
```

97-Generate Random Whole Numbers within a Range

```javascript
// Example
function ourRandomRange(ourMin, ourMax) {

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

ourRandomRange(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);
```

98-Sift through Text with Regular Expressions

* / for 正則表達式的開頭與結尾
* g for global，搜尋全部字串
* i for ignore，好像是忽略大小寫

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

// Example
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;
```

99-Find Numbers with Regular Expressions

* \d 代表數字
* testString.match(expression) 會返回一個陣列

```javascript
// 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;
```

100-Find Whitespace with Regular Expressions

* \s to find whitespace in a string.
* \r (the carriage return) 回車
* \n (newline) 換行
* \t (tab)
* \f (the form feed). 跳頁
* [換行 - 維基百科，自由的百科全書](https://zh.wikipedia.org/wiki/%E6%8F%9B%E8%A1%8C)

```javascript
// 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;
```

101-Invert Regular Expression Matches with JavaScript

* \S 單一字母
* ＼S+ 列出全部單字

```javascript
// 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;
```

中文版的同場加映 Give your JavaScript Slot Machine some Stylish Images

* 角子老虎機

![](http://i.imgur.com/pV7W2NS.png)

```javascript
<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"];

    // 隨機產生三個數 1~3
    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] + '">');

    // 如果三個數字相同，印出 It's A Win    
    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>
```

```markup
<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>
```