---
tags: JS 直播班 - 2022 秋季班
---
# 第三週小組任務 - JS班 14 組
> 討論日期及時間 > 2022/10/15 20:00-21:30
>
**組員參與名單(08/09)：**
* christina#6185
* hungya#0773
* DoraHuang#8223
* Winnie Wu#5468
* Potatolee#7749
* Nathan James#8120
* Sonia Wu#7154
<!-- * Tuhacrt#0008 -->
* CrystalD#6007

## 問題

### 第一題 請挑選想討論的主題

請各組員在以下，挑選您不知道但想瞭解的 JS 主題或語法，並寫 2~3 個範例程式碼，以方便瞭解您有掌握該知識，並分享給其他組員：

1. [JS w3school](https://www.w3school.com.cn/)
2. [JavaScript 菜鳥教學](https://www.runoob.com/js/js-tutorial.html)
3. [Kuro 重新認識 JavaScript](https://ithelp.ithome.com.tw/users/20065504/ironman/1259)
4. [邁向 JavaScript 勇者之路](https://ithelp.ithome.com.tw/users/20083608/ironman/1354)

答：
1. ### 同步(Sync)與非同步(Async)

* 同步(Sync)： 一次只做一件事情，例如：堆疊(Call Stack)、JavaScript
* 非同步(Async)：同時做很多件事情，例如：向 API 發送請求、setTimeout、document、Node.js
#### 同步 Sync 範例： Call Stack

function fun1() {
  console.log('fun1')
}
function fun2() {
  console.log('fun2')
}
function fun3() {
  console.log('fun3')

}
// 一次只做一件事情
fun1();
fun2();
fun3();

#### 非同步 Async 範例： setTimeout

setTimeout(() => {
  console.log("延遲3秒出現");
}, 3000)

#### 非同步 Async 範例: Primise、Async/ Await

// 製作漢堡
const makeHamburger = function() {
  return new Promise(function(resolve, reject){
    window.setTimeout(function(){
      console.log('已準備好「超級大麥海洋珍珠堡」');
      resolve('已準備好「超級大麥海洋珍珠堡」');
    }, (Math.random() + 1)*1000);  //Math.random() + 1 : 隨機產生亂數
  });
}

// 製作沙拉
const makeSalad = function() {
  return new Promise(function(resolve, reject){
    window.setTimeout(function(){
      console.log('已準備好「夏威夷鮮蔬沙拉」');
      resolve('已準備好「夏威夷鮮蔬沙拉」');
    }, (Math.random() + 1)*1000);  //Math.random() + 1 : 隨機產生亂數
  });
}

// 製作飲料
const makeDrink = function() {
  return new Promise(function(resolve, reject){
    window.setTimeout(function(){
      console.log('已準備好「台東紅烏龍茶」');
      resolve('已準備好「台東紅烏龍茶」');
    }, (Math.random() + 1)*1000);  //Math.random() + 1 : 隨機產生亂數
  });
}

// 餐點準備完成，提供給客人
const giveCustomer = function() {
  console.log('所有餐點準備完成，提供給客人');
}

//依照順序執行函式
/*
async function completed(){ 
	// 餐點依順序完成
  let done;
  done = await makeHamburger();
  done = await makeSalad();
  done = await makeDrink();
  done = await giveCustomer();
}
*/

//依照順序執行函式
async function completed(){ 
	// 餐點不依順序完成
  // Promise.all() : 全部任務完成，才會往下執行
  let done = await Promise.all([makeHamburger(),makeSalad(),makeDrink()]);
  done = await giveCustomer();
}

completed();

> [重新認識 JavaScript: Day 18 Callback Function 與 IIFE](https://ithelp.ithome.com.tw/articles/10192739)
> (剛好都想了解這個 XD)

#### 立即被呼叫的函式 (Immediately Invoked Function Expression, IIFE)
* window.setTimeout 帶有兩個參數，第一個是要做的事情，用一個函式來代表，第二個則是時間 (1/1000 秒, milliseconds)。 而第一個參數的函式也是 Callback function 的一種：「在經過了某段時間之後，才執行的函式」。

* 切分變數有效範圍的最小單位是 "function"~ for 迴圈並不會等待 window.setTimeout 結束後才繼續，所以當 window.setTimeout 內的 Callback Function 執行時，拿到的 i 已經是跑完 for() 迴圈的 5。

| Name | link |
| -------- | -------- |
| hungya#0773 | [Link](https://eggplant-form-7a1.notion.site/Javascript-Primise-Async-Await-064698b8d16a472f9755c0297de013b7) |
| DoraHuang#8223 | [Link](https://codepen.io/mwebwvuq-the-flexboxer/pen/KKREQvZ) |
| christina#6185 | [Link](https://codepen.io/chrisc0210/pen/MWGxrRv) |

---

2. ### 閉包(Closure)
> 11/2更新：可以從內部函式訪問外部函式的作用域（變數）
* 讓函數有各自的變數，不會因為使用的變數名稱相同互相污染
* 可用匿名函式(return)的方式直接把值回傳出來

#### 範例 closure + return

//相同變數名稱 var count = 0;
function redBoxs() {
  var count = 0;
  // 把原本函式改成匿名函式直接放進來
  return function () {
    count += 1;
    console.log(count + 'red');
  };
}

function blueBoxs() {
  var count = 0;
  // 把原本函式改成匿名函式直接放進來
  return function () {
    count += 1;
    console.log(count + 'blue');
  };
}
//
const redFunc = redBoxs();
const blueFunc = blueBoxs();
//
redFunc();
blueFunc();

---

3. ### 如何用 javaScript 顯示今日的日期

> [參考連結(Potatolee#7749提供)](https://www.runoob.com/js/js-obj-date.html)

//create date
new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

//setting date
var myDate=new Date();
myDate.setFullYear(2010,0,14);

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

> [參考連結(如何顯示在HTML上)](https://www.delftstack.com/zh-tw/howto/html/html-todays-date/)

  <div>
    <script>
      date = new Date().toLocaleDateString();
      document.write("Today: " + date);
    </script>
  </div>

---

4. ### JavaScript 是「傳值」或「傳址」
* pass by value (傳值)

//基本型別
var priceMilk = 60;  //牛奶價錢
var priceTea = priceMilk;  //茶水價錢
priceMilk = 100; //重新賦予牛奶價錢

console.log(priceMilk);  //100
consoel.log(priceTea); //60

* pass by reference (傳址)

//物件型別
var objCarA = { color: 'red'}
var objCarB = { color: 'red'};
var objCarC = objCarA;

console.log(objCarA === objCarB);  //false (如 0x001 === 0x003 => false)
console.log(objCarA === objCarC);  //true  (如 0x001 === 0x001 => true)

| Name | link |
| -------- | -------- |
| hungya#0773 | [Link](https://eggplant-form-7a1.notion.site/JavaScript-JavaScript-5ce09317cba34184bc26a755191d2530) |

---

## 討論紀錄



---

> 謝謝今天有參與的同學們 :100:
<iframe src="https://giphy.com/embed/SL2TwiZJAvOhO" width="480" height="330" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/cat-funny-SL2TwiZJAvOhO"></a></p>