# Javascript 亂數抽籤語法學習日誌
`javascript` `randomnumber` `math.floor`
### 目錄
[toc]
## 一、課程摘要
#### 1.複習陣列基本語法
#### 2.亂數抽籤系統 思考如何做出差異化
#### 3.結合語音朗讀系統說出中獎人名單
### 成果展示:
[https://wastu01.github.io/Javascript-Random-from-array/](https://wastu01.github.io/Javascript-Random-from-array/)
```css!
(請忽略奇怪的排版 )
.container{
display: flex;
justify-content: center;
align-items: flex-end;
height: 90vh;
}
```
## 二、課程網路資源
#### 線上網頁程式編輯器 Codepen: https://codepen.io/
#### W3Cschool 中文版：https://www.w3school.com.cn/js/index.asp
#### Math.random()語法說明：
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/random
#### 如何讀本地文字檔進入JS
https://www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/?ref=gcse
另一個是課堂所教
`<script id="text" src="data.txt"> `
https://stackoverflow.com/questions/30944764/javascript-create-array-from-local-file-txt
https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html
```
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
```
https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file
## 三、重要指令語法
Javascript
### Math.random()
會回傳介於0到1之間(包含 0，不包含1) 的偽隨機數字
大致符合數學與統計上的均勻分佈
```
function getRandom() {
return Math.random();
}
```
//此方法不符合加密學安全性要求。請勿使用於任何加密、資安相關領域。
//**https://zhuanlan.zhihu.com/p/205359984**
### 隨機取出兩數值之間值（不包含最大值）
**The returned value is no lower than (and may possibly equal) min, and is less than (and not equal) max.**
**返回的值大於等於 最小值，且小於 最大值**
e.g A, B, C, D, E, F, G
回傳數值區間包含A，不包含G
```javascript=
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
```
### Math.floor()
將所有的小數無條件捨去到比該值小的最大整數
有點繞口但其實就是高斯符號的取底
```
console.log(Math.floor(5.9999));
// expected output: 5
console.log(Math.floor(-5.05));
// expected output: -6
```
所以結合起來 Math.floor(Math.random()*7-0 + 0);
// 回傳 0 到 6 其中一個『整數』
> 每個數字選中機率都一樣，所以可以拿來做抽籤
> 那個七也就代表陣列的長度
> 第幾位抽到就是 `回傳值+1`
### Math.ceil()
取大於的最小整數
```
console.log(Math.ceil(.95));
// expected output: 1
console.log(Math.ceil(4));
// expected output: 4
```
### 首尾數值都包含且取整數
> 例如取得 4.9 到 9.9 之間的一個整數
> 5,6,7,8,9
整數用 floor, 包含最大值 +1
```javascript=
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
// min = 5
max = Math.floor(max);
// max = 9
return Math.floor(Math.random() * (max - min + 1) + min);
// Math.floor(Math.random()*5 + 5
}
```
假設有一陣列
```
array=[one,two,three,four];
```
隨機取出一位
```htmlmixed=
<p id="demo0"></p>
<p id="demo1"></p>
randomData()
function randomData(){
let x = Math.floor(Math.random() * 陣列.length);
let y = x + 1;
document.getElementById("demo0").innerHTML = "第幾位：" + y;
document.getElementById("demo1").innerHTML = "中獎人：" + array[x];
}
```
## 四、學習心得
上週的書籍登入系統完成了 localstorage 的完整功能，雖然作業有基本架構即可，但對自己的挑戰以及最後有完成做出來，雖然還是有Bug但有成就感蠻開心的。
書籍登入系統儲存資料實作：[點我前往](https://wastu01.github.io/Javascript-LocalStorage/)
* 本來規劃點選文字前方『X』icon 可以手動刪除特定項目
( 下方使用 ChatGPT4 重構後的版本 )
```javascript=
const input = document.querySelector("#input");
const ul = document.querySelector("#list");
const btns = document.querySelectorAll(".btn");
const renderDiv = document.getElementById("render");
const countSpan = document.getElementById("Count");
let books = localStorage.getItem("data") ? JSON.parse(localStorage.getItem("data")) : [];
function updateList() {
ul.innerHTML = books.map((book, index) => `<li><a data-num=${index}><i class='fa-solid fa-circle-xmark'></i>${book}</a></li>`).join("");
countSpan.innerHTML = books.length;
localStorage.setItem("data", JSON.stringify(books));
}
updateList();
btns.forEach((btn, index) => {
btn.addEventListener("click", () => {
switch (index) {
case 0: addBook(); break;
case 1: toggleList(); break;
case 2: loadDefaultData(); break;
case 3: removeLastBook(); break;
case 4: sortBooks(); break;
case 5: clearBooks(); break;
}
});
});
function addBook() {
const text = input.value.trim();
if (text) {
books.push(text);
input.value = '';
updateList();
} else {
alert("請輸入書籍名稱");
}
}
function toggleList() {
renderDiv.style.display = renderDiv.style.display === "none" ? "block" : "none";
btns[1].innerText = renderDiv.style.display === "none" ? "顯示資料" : "隱藏";
}
function loadDefaultData() {
const original = ["網頁設計", "物聯網設計", "CSS版型設計", "數位學習系統"];
books = [...books, ...original];
updateList();
}
function removeLastBook() {
if (books.length > 0) {
books.pop();
updateList();
} else {
alert("沒有可刪除的書籍");
}
}
function sortBooks() {
books.sort();
updateList();
}
function clearBooks() {
books = [];
updateList();
}
```
---
本週心得：
這週主要是在學習製作亂數抽籤功能，有同學超前進度上課前把所有課堂練習做完了(所以也沒來上課?)，所以就直接把程式碼下載看看是怎麼做到的再搭配院長的說明，還不錯的學習方式，~~希望下次同學也能先做完~~。不過這週還沒進到 blockly 的部分哦
另外，蠻重要的概念是，要怎麼做出差異化，技術跟語法其實大同小異，或者是善用網路資源即可獲得解答，像是外連 txt 檔案就是個不錯的方式，以及抽籤結合語音的方式，蠻特別的想法。
> 後來有找到用 `FileReader` 語法
> 使用者只要匯入一行一行的名單即可
> https://zh.javascript.info/file
https://github.com/wastu01/Javascript-LocalFile-to-array
課後複習再把課程教學資源看過一遍，整理到上面的指令語法說明，唯有自己整理筆記才能內化知識，就這樣，這堂課蠻好的讓我有動力學習的東西。
> 下週課程：[隨機抽籤語音系統 物聯網系統與研究學習日誌](/wRMBYbFzTF-NCJ5BQYf7Pw)
Sign in with Wallet
Connect another wallet