筆記 JavaScript 工程師養成直播班 第九堂

1.postman使用

2.有api key或token時(六角api)

3.簡易說明

authorization:有些驗證的資料會放於此
headers:描述性的資料
body:主要傳送的資料

4.前端暫存資料方式(建議無重要性才使用)

1.localStorage
2.cookie

參考來源
六角學院直播課

筆記 前端開發簡易使用https方法 VS Code + mkcert + Vite

情境如果已經拿到一個網站是"資料夾類型"例如剛切好html + css + javascript，測試時想使用https開啟瀏覽器，Live Server雖然也可以，但是比較麻煩複雜，以下方式AI提供測試改良，蠻簡單的。
PS.已經是vite專案的話1>5>6即可
1.下載mkcert，一般windows選mkcert-v1.4.4-windows-amd64.exe，下載後重新命名"mkcert.exe"，放於C:\Windows或C:\Windows\System32底下
2.新增vite.config.js package.json .gitignore到專案底下，內容如下

vite.config.js

import { defineConfig } from 'vite';
import fs from 'fs';

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./localhost-key.pem'),
      cert: fs.readFileSync('./localhost.pem')
    },
    port: 3000,
    open: true
  }
});

package.json

{
  "name": "yourname",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "vite": "^7.1.12"
  }
}

.gitignore

node_modules/
dist/
.vite/
npm-debug.log*
.yarn-debug.log*
.yarn-error.log*
.pnpm-debug.log*
.vscode/
.DS_Store
Thumbs.db

# mkcert local certificates
localhost.pem
localhost-key.pem

3.改package.json裡的name變成你的專案名稱
4.vs code > 終端機(termainal) > npm install -y
5.vs code > 終端機(termainal) > mkcert localhost(產生憑證)
6.vs code > 終端機(termainal) > npm run dev

筆記 JavaScript 工程師養成直播班 第八堂

1.API

全名:Application Programming Interface

端點(Endpoints)
網址(get/products)

請求(Requests)
Method:Get Post ...
Path:/products
Query Parameters: ?q=abc&g=123
Request Body:

回應(Responses)
Status Code: 200
Reponse Body :[{...}]

2.API制定

通常由後端制定
postman 如無介面可用來測試

資料內容
METHOD:GET/POST/PUT/Delete
來源:url
內容:
格式:JSON

3.API KEY (金鑰)/ Token (令牌)

認證機制
1.放在網址上
2.放在request headers裡面

4.API種類

1.無須註冊申請 (練習、政府公開資料)
2.需申請帳號 (Google Map apk key)
3.只能從後端伺服器讀取 (在官網可以看、不能跨網域CORS)
4.需申請後端取得資料

cache-control
response headers Access-Control-Allow-Origin

參考來源
六角學院直播課

筆記 JavaScript 工程師養成直播班 第七堂

1.c3.js圖表 d3要用5版的

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>

2.選用套件

 1.是否有持續維護
 2.測試功能是否好套用
 3.使用文件

3.js套件使用方式

1.下載到本端或參考cdn
2.在使用前先加入js參考

參考來源
六角學院直播課
C3.js

筆記 JavaScript 工程師養成直播班 第六堂

1.HTTP 回應狀態碼

資訊回應（100——199）
成功回應（200——299）
重新導向訊息（300——399）
用戶端錯誤回應（400——499）
伺服器錯誤回應（500——599）

2.常見回應狀態碼

200 OK
請求成功。「成功」的結果含義取決於 HTTP 方法：
GET：資源已被擷取並在訊息主體中傳送。
Headers：回應中包含表示標頭，但沒有任何訊息主體。

PUT 或 POST：描述操作結果的資源在訊息主體中傳送。
TRACE：訊息主體包含了伺服器接收到的請求訊息。

304 Not Modified
記憶體有快取未被修改

404 Not Found
只不到網頁

500 Internal Server Error
後端程式有問題

3.request(請求)

Clinet > Server > DB
request header content-type:解析格式
request data

3.reponse(回傳)

DB > Server > Clinet
response header content-type:解析格式
response data

4.Javascript 原生寫法

1.XMLhttpRequest
2.Fetch

5.axios(底層用XMLhttpRequest)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

6.同步、非同步

同步:順序性執行A -> B -> C
非同步:同時執行不會卡住，網路請求、計時器、檔案讀取，處裡須等待佳
A ->
B ->
C ->

7.處理非同步問題

非同步不會等待，所以有可能沒有資料時就跑下面的js，處理方式可以包在函式中

8.HTTP Method

get 獲取
post 新增
delete 刪除
put 更新
patch 修改一部分

差別除Get以外其他可傳送資料給伺服器

9.傳遞資料正確API才有用

傳送
1.Method
2.URL
3.資料正確
接收
1.看規格

10.常用的資料請求格式Content-Type:

1.application/x-www-form-urlencoded form表單
2.application/json JSON
3.multipart/form-data 檔案、圖片、影片
4.text/plain 純文字

11.axios.get

	console.log(axios);//可以看看有沒有載入成功
	axios.get('網址')
	.then(function (response) {
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	})
	.finally(function () {
		// 均會執行
	});

12.開發除錯概念

POST網址可能會跑兩次 
F12開發工具 > NetWork > preflight-先驗證是否為跨網域 > xhr-可跨網域才送出請求 
F12開發工具 > NetWork > 網頁 > Headers 傳送的狀態
F12開發工具 > NetWork > 網頁 > Payloads 傳送的資料
F12開發工具 > NetWork > 網頁 > Response 回傳的資料

13.直播補充

舊方式:Form
缺點:整頁刷新 > 中斷使用者操作 > 短暫空白

新方式:AJAX
支援非同步機制 > 頁面局部更新 > 不必重整整個頁面 
伺服器回傳資料 > 不會轉址 > 決定可更新哪個畫面
優點:減少data傳輸，載入速度，使用者操作更順暢
缺點:無法預期完成順序

一定走非同步:均須等待時
1.網路請求
2.計時器 setTimeout(function(){},1000);
3.檔案讀取

參考來源
六角學院直播課
HTTP 回應狀態碼

筆記 JavaScript 工程師養成直播班 第五堂

1.認識DOM(Documnet Object Model)標籤

documnet
Elemnet : <a></a>  
Attribute : "href"
Text : <a>mylink</a> (mylink)

2.網頁解析由上而下

<script>javascript 語法</script>
JS建議放於網頁下面等DOM解析完成使用才不會有問題

3.querySelector(選取第一個符合元素)(沒符合null)

    <h1 class="header">1234</h1>     
    <script>        
        const el = document.querySelector('.header');        
        console.log(el);//<h1 class="header">1234</h1>
    </script>
    
    <div class="targetBElementP">
 	 <p>請選取我</p>
    </div>    
    <script> 
    	//取得child
    	const targetBElementP = document.querySelector(".targetBElementP > p");
    </script>
    
    //以下較舊可不使用
    getElementsByClassName('.class');
    getElementsByTagName('tag');
    getElementById('#id');

4.元素加入HTML或文字(innerHTML刪除內容後再加入)

    <main>123</main>
    <script>
       const main =  document.querySelector('main');
       main.innerHTML =`<h1>546</h1>`;//加入html標籤
       const h1 = document.querySelector('h1');
       console.log(h1);//<h1>456</h1>
    </script>

5.元素插入html或文字(prepend、append、appendChild)

    <ul>
        <li>hihi</li>
    </ul>
    <script>
        const ul = document.querySelector('ul');         
        const liappendChild = document.createElement('li');
        liappendChild.textContent = "我是appendChild加入的我會新增在後面";
        ul.appendChild(liappendChild);
        const liprepend = document.createElement('li');
        liprepend.textContent = "我是prepend加入的我會新增在最前面";
        ul.prepend(liprepend);
         const liappend = document.createElement('li');
        liappend.textContent = "我是aappend加入的我會新增在後面";
        ul.append(liappend);
    </script>

6.innerHTML、textContent差異

    <main></main>
    <script>
       const main =  document.querySelector('main');
       main.innerHTML =`<h1>123</h1>`;//html標籤
       main.textContent=`<h1>123</h1>`;//會是文字
    </script>

7.querySelectorAll，回傳NodeList陣列(沒符合null)

    <a>Google</a>
    <a>Yahoo</a>
    <script>
        const myLinks = document.querySelectorAll('a');//會回傳NodeList陣列
        console.log(myLinks);
        myLinks[0].setAttribute("href", "https://www.google.com");
        myLinks[1].setAttribute("href", "https://tw.yahoo.com");
    </script>

8.setAttribute加入屬性，getAttribute取得屬性

    <a></a>
    <script>
        const myLink = document.querySelector('a');
        myLink.innerHTML = "<span>Google</sapn>";
        //設定Attribute
        myLink.setAttribute("href", "https://www.google.com");
        myLink.setAttribute("target", "_blank");
        myLink.setAttribute("id", "x123");
        //取出設定Attribute
        console.log(myLink.getAttribute("href"));//https://www.google.com
        console.log(myLink.getAttribute("target"));//_blank
        //刪除Attribute
        myLink.removeAttribute("id");
    </script>

9.表單元素取值、賦值

    <input type="text" class="txt" value="早安" />
    <select class="list">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <script>
        const txt = document.querySelector('.txt');
        console.log(txt.value);//早安
        txt.value = "晚安"; //賦值
        console.log(txt.value);//晚安

        const list = document.querySelector('.list');
        console.log(list);//<select class="list"><option value="1">1</option><option value="2">2</option></select>
        console.log(list.value);//1
        list.value = 2; //賦值
        console.log(list.value);//2
    </script>

10.classList+style應用

    <style>
        main {
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .active {
            width: 250px;
            height: 250px;           
        }
    </style>
    
    <main>
        <div id="div1">JS加入Class</div>
    </main>
    <script>
        const main = document.querySelector('main');
        const div1 = document.querySelector('#div1');
        //add加入
        div1.classList.add('box1');

        //remove移除
        //div1.classList.remove("box1");
        
        //replace替換
        div1.classList.replace("box1", "box2");

        //toggle切換
        div1.classList.toggle('active');
        //div1.classList.toggle('active');

        //有多少個 class
        console.log(div1.classList.length);

        //contains包含
        if (div1.classList.contains("box2")) {
            console.log("有box2");
        } else {
            console.log("沒有box2");
        }

        //直接修改 style    
        div1.style.backgroundColor = 'green';
        div1.style.color = 'white';
        div1.style.fontWeight = 'bold';
        div1.style.fontSize = '64px';
    </script>

11.data attribute (setAttributeget、getAttribute也可做到)

     <main>
          <div id="div1" data-username="John"> JS加入 data attribute 建議小寫</div>
     </main>
     <script>
          const main = document.querySelector('main');
          const div1 = document.querySelector('#div1');
          //取得 data attribute        
          //div1.setAttribute('data-username', 'Tom');// set tom
          console.log(div1.dataset.username);//john

          //修改 data attribute
          div1.dataset.username = 'Mary';
          //console.log(div1.getAttribute('data-username'));//Mary
          console.log(div1.dataset.username);//Mary

          //設定 data attribute (特殊字元時為小駝峰)
          div1.dataset.userId = 123; //dataset.userId => data-user-id
          console.log(div1.dataset.userId); //123

          //刪除 data attribute，可用delete or removeAttribute
          //delete div1.dataset.userId;//dataset.userId => data-user-id
          div1.removeAttribute('data-user-id');
          console.log(div1.dataset.userId); //undefined

     </script>

12.addEventListener註冊監聽事件
是否有註冊監聽，chrome > F12 > 元素上檢查 > Even Listeners

    <ul class="list">
        <li><span>hihi</span></li>
        <li>hihi <input type="button" value="按鈕" class="btn"></li>
    </ul>
    <h1></h1>
    <script>
        const btn = document.querySelector('.list');
        //const btn = document.querySelector('.btn');        
        const h1 = document.querySelector('h1');
        let count = 0;
        btn.addEventListener('click', function (e) {
            if (e.target.nodeName == "INPUT") {
                //btn.addEventListener('click', function (e) {
                count++;
                h1.textContent = `手速測試，您點擊了${count}次`;
            } else {
                console.log(e);//捕捉當下元素資訊
                console.log(e.clientX);
                console.log(btn.nodeName);//INPUT 目前的元素tag
                console.log(e.target);//偵測到目前點擊是哪個元素
                console.log(e.target.nodeName);//INPUT          
                console.log(e.target.innerHTML);
                console.log(e.target.textContent);
                h1.textContent = `點到${e.target.nodeName}`;
            }
        });
    </script>

13.preventDefault取消預設觸發行為

    <a href="http://tw.yahoo.com">yahoo</a>
    <script>
        const myLink = document.querySelector('a');
        myLink.addEventListener('click', function (e) {
            e.preventDefault();
            console.log('有點點到,但不會轉址');
        });
    </script>

參考資料
六角學院直播課
你需要注意的 console.log 問題

筆記 JavaScript 工程師養成直播班 第四堂

1.函式(function)宣告方式及用法

//函式屬於物件型別
//程式碼重複使用
function 函式名稱(參數){
	//要執行的程式碼
}
函式名稱(參數);

2.執行順序

happy();
holiday();
先執行happy()程式碼法，後再執行holiday()內程式碼

3.函式包函式順序

        function first() {
            console.log('first');
            third();
        };
        function second() {
            console.log('second');
        };
        function third() {
            console.log('third');
        };

        first();
        second();
        third();

        //  first
        //  third
        //  second
        //  third

4.函式帶入參數，只會在大括號裡面使用，執行完就消失

        function callNum(num) {
            console.log(`呼叫${num}號`)
        }
        callNum(5); // 呼叫5號
        console.log(`呼叫${num}號`); // num is not defined

5.函式可帶入多個參數

        function addNum(num1, num2) {
            console.log(num1 + num2);//3
        }
        addNum(1, 2);

6.return可回傳值

        function addNum(num1, num2) {
            return num1 + num2; 
        }
        const result = addNum(1, 2);
        console.log(result);//3

7.return 會中斷函式

        function addNum(num1, num2) {
            console.log(1);//1
            return num1 + num2;
            console.log(2);//沒跑
        }
        const result = addNum(1, 2);
        console.log(result);//3

8.return 多個值，回傳array或物件

        function addNum(num1, num2) {
            return [num1 , num2];
        }
        const result = addNum(1, 2);
        console.log(result); //[1,2]

9.函式種類

        console.log(numA(3));
        //函式陳述式(不管放在哪裡都可以執行)
        function numA(x) {
            return x * x;
        }

        //函式表達式
        //console.log(numB(3)); //變數numB賦值前就使用，無法讀取該變數
        const numB = function (x) {
            return x * x;
        }
        console.log(numB(3)); //必須在賦值後才能使用

        //箭頭函式       
        //函式表達式(function (x))、箭頭函式((x) =>)一樣的
        const numC = (x) => {
            return x * x;
        }
        console.log(numC(3));

        //箭頭函式更精簡寫法
        //必須有retrun，大括號及return可不寫
        //只有一個參數時可省略(x)=>變成x =>
        //如果沒有參數時寫()=>
        const numD = (x) => x * x;
        console.log(numD(3));

參考資料
六角學院直播課

筆記 JavaScript 工程師養成直播班 第三堂

1.陣列 (物件型別)

        //[]陣列
        //只有值，可包任何型別
        //取值用索引，順序很重要因為要知道第幾個才能取
        const colors = ["yellow", "red", "blue"];
        const any = [123, true, "Tom"];//可混合 
        //length 長度
        console.log(`colors陣列共用${colors.length}筆`);
        //讀取陣列，陣列從從0開始算 
        let myColor = colors[2];
        console.log(myColor); // "blue"
        myColor = colors[3]; //陣列從0開始 
        console.log(myColor); // undefined
 
        //陣列資料應用
        let colors = [];
        colors[0] = "blue";
        colors[1] = "yellow";
        colors[3] = "red";
        console.log(colors);//["blue","yellow", null,"red"]
        console.log(`colors陣列共用${colors.length}筆`); //colors陣列共用4筆       

        //unshift 加入第一筆
        colors.unshift("green");
        console.log(colors);//["geeen","blue","yellow",null,"red"];

        //push 加入最後一筆
        colors.push("black");
        console.log(colors);//["geeen","blue","yellow",null,"red","black"];        

        //shift 刪除第一筆
        colors.shift();
        console.log(colors);//["blue","yellow",null,"red","black"];

        //pop 刪除最後一筆
        colors.pop();
        console.log(colors);//["blue","yellow",null,"red"];

        //splice 刪除指定資料
        //splice(1 , 2) splice(起始位置(陣列從0開始) , 2(往後刪除幾筆)) 
        colors.splice(1, 2);
        console.log(colors);//["blue","red"];    

        //splice 插入指定資料 第二參數為0
        colors.splice(1, 0, "gold");
        console.log(colors);//["blue","gold","red"]; 

        //splice 修改指定資料 第二參數為1
        colors.splice(1, 1, "white");
        console.log(colors);//["blue","white","red"]; 

        const data = [1, 3, 9, 5, 7, 9];
        //map() 方法會建立一個新的陣列(不影響原始資料)
        const arr1 = data.map(x => x * x);
        console.log(arr1);//[1,9,81,25,49,81]

        //forEach() 不會回傳值
        data.forEach(function(item,index,array){
            //item 目前資料
            //index 目前索引
            //array 目前所有陣列
            console.log(item,index,array);
        });
        const arr2 = [];
        data.forEach(x => { arr2.push(x * x); });
        console.log(arr2);//[1,9,81,25,49,81]

        //filter() 篩選出符合條件回傳新的陣列(不影響原始資料)，查無空陣列
        const arr3 = data.filter(x => x >= 5);
        console.log(arr3);//[9,5,7,9]

        //find() 由前往後符合的第一筆，查無undefined
        const obj4 = data.find(x => x >= 5);
        console.log(obj4);//9 

        //indexOf 由前往後符合的第一筆，-1查無
        const i5 = data.indexOf(9);
        console.log(i5);//2 [1 3 9這筆, 5, 7, 9]

        //lastIndexO 由後往前符合的第一筆，-1查無
        const i6 = data.lastIndexOf(9);
        console.log(i6);//5 [1, 3, 9, 5, 7, 9這筆]

        //reduce() 方法將一個累加器及陣列中每項元素（由左至右），將陣列化為單一值。
         const i7 = data.reduce((a, b) => {
            //console.log(a,b);//a 累加後的值 b目前進來運算的值
            return a + b;
        }, 0); //'0' 是累加器的初始值
        console.log(i7);//34
        console.log ( data.reduce((a, b) => a + b, 0));//簡寫
        
        //sort() 排序
        //reverse() 反排序        
        //join() 變字串     
        //some() 一個值符合條件回傳true
        //every() 陣列完全符合條件true   
        //slice() 淺拷貝至新物件
        //concat() 合併

2.物件 (物件型別)

        //物件{}
        //屬性:值
        //取值用屬性，順序不重要只要知道屬性就能取值
        const family = {
            myFather: "David",//屬性 : 值
            myMonther: "Mary",//屬性 : 值
            dogs: 3
        };
        console.log(family.myFather); //讀取物件中屬性
 
        //物件資料應用
        let home = {};
        //新增、修改        
        //點記法 (Dot notation)
        home.myMonther = "May";
        home.myFahter = "Kevin";
        home.cats = 4;
        console.log(home);  //{"myMonther": "May","myFahter": "Kevin", "cats": 4}
        home.cats += 1;
        home.myMonther = "Tom";
        console.log(home);  //{"myMonther": "Tom","myFahter": "Kevin", "cats": 5}
        //刪除
        delete home.cats;
        console.log(home);  //{"myMonther": "Tom","myFahter": "Kevin"}
        console.log(home.cats); //undefined
        //讀取方式
        //括弧記法 (Bracket notation)，屬性特殊字元時必須使用
        let f = "001";//特殊開頭為數字時
        home[f] = "1234"       
        console.log(home[f]);//"Kevin"

3. ... Spread Operator Rest Operator

     <script>

          // ...用法
          //展開運算符 Spread Operator 
          //1.淺拷貝及合併    
          const arr1 = [1, 2, 3];
          const arr2 = [...arr1];
          arr2.push(4);
          console.log(arr1, arr2);//[1, 2, 3] , [1, 2, 3, 4]
          const arr3 = ["Good", "Morning"];
          const arr4 = [...arr3, "Teacher"];
          console.log(arr4); //['Good', 'Morning', 'Teacher']
          //2.直接傳入函式中，
          function sum(a, b) {
               return a + b;
          }
          const arr5 = [1, 2, 3];//函式如果只有兩個參數傳入第三個時會忽略
          console.log(sum(...arr5)); // 3
          //3.可迭代(iterable)物件轉陣列，String、Array、TypedArray、Map、Set物件
          const str1 = "Today in Monday";
          const arr6 = [...str1];
          console.log(arr6);//[ "T","o","d","a","y"," ", "i", "n", " ", "M", "o", "n", "d", "a", "y"]

          //其餘運算符 Rest Operator        
          function sumAll(...numbers) {
               return numbers.reduce((a, b) => a + b, 0);
          }
          console.log(sumAll(1, 2, 3, 4)); // 10
          console.log(sumAll(5, 10, 15));  // 30   
     </script>

4.JSON(Javascript Object Notaion)(JS物件表示法)

1.屬性都是字串 "data" : [] ;
2.沒辦法放函式
3.不能註解
4.最後一個值後面不能加入逗號
5.目前前後端常用資料傳遞格式

5.補充

陣列第幾筆用[]中間數字
物件找值用.屬性

6.chrome擴充套件

JSONView

參考資料
六角學院直播課
Day 09: ES6篇: Spread Operator & Rest Operator(展開與其餘運算符)

未分類 威力導演365無法匯出

直接點選.pds副檔名開啟專案後，點選匯出都沒反應，網路找了解決方式
1.檔案 > 開新專案
2.將要使用的影音檔都拉進媒體櫃如下圖

3.如果出現下列錯誤的話，整個軟體關掉或電腦重開，從1開始重作，如果沒錯就直接跳4

4.檔案 > 開啟專案 > 選擇您的.pds
參考網址:
Cyberlink PowerDirector 2025 不讓你匯出影片

筆記 JavaScript 工程師養成直播班 第二堂

1.比較運算子

>(大於)
>=(大於等於)
==(等於)
<=(小於等於)
<(小於)
!=(不等於)
===(嚴格等於型，別跟值完全一樣)
!==(嚴格不等於，型別跟值有一個不同為true)

2.邏輯運算子

&& 且(and)
|| 或(or)
! 不是(not)

3.邏輯判斷

if(){
}else if(){
}else{
}

4.三元運算

condition ? exprIfTrue : exprIfFalse
var age = 26;
var beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"

5.Falsy、Truthy

左 && 右：左真 → 回右，左假 → 回左  
左 || 右：左真 → 回左，左假 → 回右 

"前者 && 後者，如果前者為假值回傳前者、否則回傳後者"
"前者 || 後者，如果前者為真值回傳前者、否則回傳後者"
何謂假值(falsy)如下連結
https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy
何謂真值(Truthy除假值外都是真值)
https://developer.mozilla.org/en-US/docs/Glossary/Truthy

舉例如果val不是""時進行篩選
前者(真值)執行後者
(val != "") && (products = products.filter(x => x.category === val));
前者(假值)執行後者
(val == "") || (products = products.filter(x => x.category === val));

參考資料
六角學院直播課
條件運算子

筆記 JavaScript 工程師養成直播班 第一堂

1.let const var

	作用區域	重複宣告	重新賦值	變數提升
var	函式作用域	可	可	可
let	區塊作用域	不可	可	無
const	區塊作用域	不可	不可	無

1.const實際上是指到記憶體位址，不能改變的是記憶體位址
2.重新賦值會改變記憶體位址，這樣就不行
3.但可以改值
 const color = "yellow";
//color ="red"; 重新賦值不行
console.log(color);

const colors = ["yellow", "blue", "red"];
colors[0] = "green";//改值可以
console.log(colors);

AI 摘要

「變數提升」（Hoisting）是指在編譯階段，
JavaScript 引擎會將 var 宣告的變數提升（移動）到其作用域的頂端，
但只提升宣告本身，不會執行初始化（賦值）動作。 
因此，在變數實際被賦值之前呼叫它，值會是 undefined，而不是執行時期報錯。

函式作用域（Function Scope）指的是變數的可存取範圍被限制在某個函式內部，
僅在該函式執行時有效。 在JavaScript 中，
使用 var 關鍵字宣告的變數就具有函式作用域的特性。 
這表示在函式外部宣告的變數是全域的，而函式內部的變數則被限制在該函式內部，
無法在外部存取。 

2.typeof(用來顯示型別)

        let a = 1 ;
        console.log(typeof a); //number
        let b = "哈" ;
        console.log(typeof b);  //string

3.數字 number (原始型別)，可用typeof === 或是 NaN(Not a Number)

        let a = 0;
        a = a + 50 ;
        a += 50 ; //等同於上方算式

        let a = 0 ;
        a += 1;
        a ++ ; //等同於上方算式

        //直播:後綴++ -- ** 運算後做
        let x = 3;
        let y  = x++; //先給y值後再運算x=x+1
        //x = 4 , y = 3

        //直播:前綴++ -- ** 運算先做
        let a = 2;
        let b  = ++a; //先運算a=2+1後再給b值
        //a = 3 , b = 3

4.字串 string (原始型別)

        let s1 = 's1' ; //單引號
        let s2 = "s2" ; //雙引號
        let go = "let's go"; //基本上一樣，看需求使用
        let name = "Marco" ;
        let content = "Hello";
        console.log(name + content);//字串相加

        let name = " Maroco ";
        console.log(name.length); //字串長度
        name =  name.trim(); //濾掉前後空白
        console.log(name.length);

        let name = "Maroco";
        let age = 19;
        console.log(`您好我叫${name}，今年${age}歲`);

        let a = 1 ;
        let b = "哈" ;
        let c =  a + b ;
        console.log(c); // 1哈
        console.log(typeof c); //字串跟數字相加會變成字串 

        let a = 1 ;
        let b = "哈" ;
        let d = a * b ; 
        console.log( d);//NaN 非數字進行運算 
        console.log(typeof d);// number

5.布林 (原始型別)

        let is = 2 > 3; // ture or false
        console.log(is); // false
        console.log(typeof is); // boolean

6.undefined 尚未被賦於值 (原始型別)

        let u;
        console.log(u); // undefined 
        console.log(typeof u); // undefined 

7.null 有被賦於值，後清空，(直播:確定未來有值，但還沒確定) (原始型別)

        let n = [];//內容假裝很多
        n = null;//清空記憶體

8.字串轉文字parseInt、parseFloat

        let s1 = "哈哈";  
        s1 = parseInt(s1);
        console.log(s1); // NaN  

        let s2 = "123"; //從表單抓取資料都是字串所以要轉型
        s2 = parseInt(s2); //parseFloat()有小數點
        console.log(s2); // 123

9.數字轉字串

        let s3 = 123;  
        s3 = s3.toString();
        console.log(s3); // 123  
        console.log(s3 + 9); // 1239 字串+數字= 字串
        console.log(typeof s3) //string 

10.直播補充

1.基本型別"傳值":將原始值複製一份，放到新的記憶體上給新變數用
2.物件型別"傳址":將原變數參考的記憶體位置給到新變數，所以被傳的有修改原來的也會變更

參考資料
六角學院直播課
JS 宣告變數， var 與 let / const 差異

未分類 開發好用套件

VS Code

Visual Studio Live Share: 即時程式碼共同作業工具

Live Server

Live Sass Compiler

Chrome插件

JSONView

手機模擬器 - 測試響應式網站

Responsively App Downloads

Visual Studio

Automatic Versions 2(自動版編號)

ResXManager 多國語言

網頁

AJAX:AJAX:axios

圖表:c3.js d3.js chart.js

輪播:swiper

地圖:leafletjs google map

動畫:Animate.css aos wow.js gsap parallax.js

瀑布流:masonry

3d圖:three.js

時間:mement.js

alert:sweetalert sweetalert2

表單:validatejs、vee validate

eslint檢查 code 風格

多國:i18n

日曆:full calendar

分頁:

Git make sure you configure your 'user.name' and 'user.email' in git

VS Code Commit時出現的錯誤
make sure you configure your 'user.name' and 'user.email' in git
開啟終端機輸入以下指令

git config --global user.name "你git上面的名稱"
git config --global user.email 你git註冊的mail

筆記 網頁切版直播班

1.將容器設定成flex

<div class="container"></div>
.container{
  display: flex;
}

2.外層容器屬性
2-1 主軸 justify-content

justify-content: center; 
justify-content: flex-start;
justify-content: flex-end; 
justify-content: space-between;左右"不"留白等距
justify-content: space-around; 左右留白等距

2-2 主軸方向 flex-direction

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

2-3 主軸換行 flex-wrap

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

2-4 交錯線 align-items

常用如下更多請看下方參考資料
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;

補充容器內容分離，容器僅負責定位
補充搭配以下語法可減少計算失誤

*{
 box-sizing: border-box;
}

*,*::before,*::after {
    box-sizing: border-box;
}

3.如果為顯示類似購物車，可多一個col div來當容器

.col-1{
 width:calc(100%/12);
 padding-left:10px;
 padding-right:10px;
}

.col-2{
 width:calc(100%/12*2);
 padding-left:10px;
 padding-right:10px;
}

.col-12{
 width: 100%;
 padding-left:10px;
 padding-right:10px;
}

4.變數共用 + SCSS

css
:root {
    --text-green: #57A203;
}
.cgreen {
    color: var(--text-green);
}
scss  
$text-green: #57A203;

input : checked + span {
} // 點選物後方第一個元件套用 css

}

input : checked ~ span {
} // 點選物後方所有元件套用 css

.header{
   
  &-title{
    & 代表父元素
  }
}

5.手機板禁用X軸(下方左右卷軸)，設定了固定的width就會產生此問題
6.max-width取代width，最好在最外層的container要設一下，解決補充5方法

1.如果父元素比較寬時，保持既有寬度
2.如果父元素比較窄時，依父元素寬度自動調整

7.Flex依比例調整寬度，下為左占2右邊占3

.left{
	flex:2;
}
.right{
	flex:3;
}

8.格線系統響應式小方法

@media screen and(max-width: 768px){	
	[class*="col-"]{
    	width:100%;
	}
}

9.權重

HTML 標籤：1 分
class 選擇器：10 分
ID 選擇器：100 分
inline style：1000 分
!important：10000 分

html body .container .box{22分}
.box.box.box{30分}

10.圖片改變大小時換圖

<picture>
  <!-- 當螢幕寬度少於992px時，替換圖片 -->
  <source srcset="./images/M2.png" media="(max-width: 992px)">
  <!-- 預設圖片，通常是桌面版本 -->
  <img src="./images/M1.png" alt="Logo">
</picture>

11.line-height

行高計算方式 = 文字大小 * 行高倍數（ex：font-size: 20px * line-height: 1.5 = 30px 行高）

12.background-image

background-image: 用來設定元素的背景圖片。最常見的用法是 url()，後面接圖片的路徑。
範例：
background-image: url('images/your-image.png');
background-repeat: 控制背景圖片是否重複。
space;四角。
no-repeat：圖片只顯示一次。
repeat：圖片在 X 和 Y 軸上重複 (預設值)。
repeat-x：圖片只在 X 軸上重複。
repeat-y：圖片只在 Y 軸上重複。
background-position: 設定背景圖片的位置。
可以使用關鍵字 (如 center, top right) 或座標值 (如 50% 50%, 10px 20px)。
background-size: 設定背景圖片的大小。
cover：圖片會盡可能地縮放以覆蓋整個背景區域，但可能會裁剪圖片一部分。
contain：圖片會盡可能地縮放以完全顯示在背景區域內，但可能會留下空白。

13.偽元素

 /* 用 ::before 在文字前面加東西 */
.class::before {
  content: "前面加";  
}

/* 用 ::after 在文字後面加東西 */
.class::after {
  content: "後面加";   
}

14.media query breakpooints

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

15.bootstrap常用英文

s => start (由左至右故 start 為左邊)
e => end (由左至右故 end 為右邊)
t => top
b => bottom
x => x 軸（左右）
y => y 軸（上下）

16.bootstrap $spacer

基礎值 $spacer 預設為 16px
1： $spacer * 0.25 ＝ 4px
2： $spacer * 0.5 ＝ 8px
3： $spacer ＝ 16px
4： $spacer * 1.5 ＝ 24px
5： $spacer * 3 ＝ 48px

範例：
.mx-1 即為
margin-left: 4px; margin-right: 4px;

17.transform

1.以物件自身為基準
2.每個class一個
3.順序會影響結果
4.位置不會變
5.外層套用內層也會

18.bootstrap row col 兩種寫法

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
  <div class="row row-cols-lg-4">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
    <div class="col">Column D</div>
  </div>
</div>

參考資料
六角學院直播課
flex
Meaning of relative weights
SASS ( CSS / SCSS ) 常見符號
AOS
swiperjs
animate css

未分類 Nas 對接電腦傳輸速度變慢

使用網路芳鄰時跑的速度很慢
1.檢查網路線是否接好
2.網路線品質cat?
3.先檢查Nas跟PC或筆電的網路速度
4.透過 Windows (SMB / CIFS) 傳輸檔案時速度緩慢，該如何解決？或[網路芳鄰 (SMB)] 如何解決Windows 11無法使用SMB功能的問題?
5.通常會需要關閉SMB簽名要求，用管理員開啟Power Shell

Set-SmbClientConfiguration -RequireSecuritySignature $false

參考資料
透過 Windows (SMB / CIFS) 傳輸檔案時速度緩慢，該如何解決？
[網路芳鄰 (SMB)] 如何解決Windows 11無法使用SMB功能的問題?

Windows chkdsk

最近常遇到磁碟無法讀取或是USB隨身硬碟讀LAG很久
微軟有個命令chkdsk嘗試後不錯用記錄一下

chkdsk /f /r /x d:

/f	修正磁碟上的錯誤。 磁碟必須鎖定。 如果 chkdsk 無法鎖定磁碟機，則會出現一則訊息，詢問您是否要在下次重新啟動電腦時檢查磁碟機。
/r	找出損毀的磁區並復原可讀取的資訊。 磁碟必須鎖定。 /r 包含 /f 的功能，以及實體磁碟錯誤的額外分析。
/x	如有必要，強制磁碟區先卸除。 磁碟機的所有開啟控點都會失效。 /x 也包含 /f 的功能。

試過之後USB隨身硬碟問題解決了 參考資料
chkdsk

IIS At least one other site is using the same HTTPS binding and the binding is configured

一台Server IIS使用多網站憑證問題
At least one other site is using the same HTTPS binding and the binding is configured

解決方式

勾選Require Server Name Indication

中文版請參考下方參考資料
參考資料
IIS 多站台使用 HTTPS 憑證的設定方式

Git npm : 因為這個系統上已停用指令碼執行，所以無法載入

1.開啟PowerShell
2.執行

get-executionpolicy

3.如為Restricted執行

set-executionpolicy remotesigned

4.如有例外改執行

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

參考資料
VSCode 執行 npm install 失敗

SQL Server 無法修改強制執行密碼原則

新增SQL使用者時，強制密碼原則未勾選時錯誤
"The CHECK_POLICY and CHECK_EXPIRATION options cannot be turned OFF when MUST_CHANGE is ON"

USE Master
GO
ALTER LOGIN UserName WITH PASSWORD = 'password'
GO
ALTER LOGIN UserName WITH
      CHECK_POLICY = OFF,
      CHECK_EXPIRATION = OFF;

參考資料
Can't Alter Login

SQL Server provider: Named Pipes Provider, error: 40

這問題新手時常遇到所以大概解法
1.開啟 Sql Server Configuation Manager，啟用具名管道

2.防火牆設定輸入規則1433 port
通常這樣就解決了，但我問題還是沒解決
後來詢問主機廠商才知道1433 port常被駭，所以主機商先鎖了，所以需要在Server上使用另一個Port
以下為解決方法
1.開啟 Sql Server Configuation Manager，修改TCP/IP > 改port > 重啟服務
2.防火牆設定輸入規則"自訂的"port
最後專案或程式碼修改連線字串
連線字串比較特別，例如自訂的port為9527，原"192.168.1.100",要改成"192.168.1.100,9527"