2025年10月3日 星期五

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

1.認識DOM(Documnet Object Model)標籤
documnet
Elemnet : <a></a>  
Attribute : "href"
Text : <a>mylink</a> (mylink)
2.網頁解析由上而下
<script></script>
JS建議放於網頁下面等DOM解析完成使用才不會有問題
3.querySelector(選取第一個符合元素)
    <h1 class="header">1234</h1>     
    <script>        
        const el = document.querySelector('.header');        
        console.log(el);//<h1 class="header">1234</h1>
    </script>
4.元素修改或插入文字
    <h1 class="header">1234</h1>
    <script>
        const el = document.querySelector('.header');
        el.textContent = "5678";
        console.log(el);  
        //簡短寫法
        document.querySelector('.header').textContent ="01010";
        console.log(el); //<h1 class="header">01010</h1>
    </script>
5.元素加入HTML標籤(innerHTML刪除內容後再加入)
    <main></main>
    <script>
       const main =  document.querySelector('main');
       main.innerHTML =`<h1>1234</h1>`;//加入html標籤
       const h1 = document.querySelector('h1');
       console.log(h1);//<h1>1234</h1>
    </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.setAttribute加入屬性,getAttribute取得屬性,innerHTML取得html,textContent取得文字
    <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");
        //取出設定Attribute
        console.log(myLink.getAttribute("href"));//https://www.google.com
        console.log(myLink.getAttribute("target"));//_blank
        console.log(myLink.innerHTML);//<span>Google</span>
        console.log(myLink.textContent);//google
    </script>
8.querySelectorAll,回傳NodeList陣列
    <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>
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.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>
11.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>
參考資料
JS直播班 - 上課白板

筆記 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]
參考資料
JS直播班 - 上課白板
第四堂:函式設計之術