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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/basic-javascript/basic-javascript-101.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.