IEF|零基礎學院|16天：javascript【1】

@(IEF筆記)[javascript, IEF]

百度前端學院課程：第十六天，開始感受JS的樂趣

1. 課程目標

從今天開始，我們要開始學習在Web開發中使用 JavaScript/ECMAScript 來實現各種各樣的交互邏輯及數據處理，今天的目標是初步瞭解 JavaScript/ECMAScript 是什麼，開始學習基本的語法，並通過幾個小例子的練習，來初步感受語言的魅力。

2. 學習總結

學習資料：
JavaScript基礎 - 學習 Web 開發 | MDN
JavaScript 第一步 - 學習 Web 開發 | MDN

概念：

javascript概念，作用，是一種解釋代碼，動態代碼，目前學習客戶端代碼；
- 解釋代碼 vs 編譯代碼；
- 服務端代碼vs客戶端代碼；
- 動態代碼 vs 靜態代碼；
- JavaScript/ECMAScript的差別；
- API概念；

編程：

js基本結構和語法，通過<script>標籤添加，分成外部和內部；
- js從上到下按順序運行
- js程序員思維；
- js程序基本結構：
- 添加腳本，
- 初始化變量（網頁對象object，數組array，計數器···），
- 函數（函數內變量，初始化，判斷條件，操作網頁對象/變量，還原），
- 事件（監聽器，響應器），
- 循環（條件，用在字符串，數組處理爲多）
- 完善邏輯
- js常見錯誤
- 語法錯誤（有報錯）常見：
  - 拼寫錯誤，大小寫
  - 變量爲null，可能是對象名寫錯，對象還沒創建
- 邏輯錯誤（無報錯）常見：
  - 運算符用錯，計算式寫錯；
  - 運行順序
  - 有些操作語句要賦值才能起作用
- js運算符
- js字符串
- 轉義字符
- 連接字符串
- 檢索字符串，替換，分割，提取
- 大小寫
- 字符串長度
- 數字與字符串的連接，轉化，區分
- js數組
- 創建數組。添加push、unshift，刪除pop、shift，訪問，修改數組項；
- 數組長度。length
- 字符串與數組的轉換split 、join
- js基礎練習

3. 任務

3.1 任務一：簡易計算器的實現

任務：第十六天，開始感受JS的樂趣
demo演示：簡易計算器的實現
源代碼地址：簡易計算器的實現-github

任務要求：

點對應加減乘除按鈕的時候，將兩個輸入框中的數字做對應的算術，並將結果顯示在id爲result的p標籤內。
暫時不用做任何異常處理

效果：

js代碼：

首先onlod函數確保文檔加載完畢；
定義元素變量；
四個按鈕的監聽器；
四個運算函數：先把獲取的數值字符轉變成數字！！否則不能進行運算；然後把結果輸出到頁面上；
注意！！除法函數要先判斷除數是否爲0，爲0時拋出異常，使用try-catch結構拋出異常，記住不要在結果元素上輸出異常，用彈窗輸出。因爲除數爲0時計算結果有值：infinity（無窮大），結果值會覆蓋掉異常。

        <script>
            window.onload = function () {
                //variation
                var add = document.getElementById('add-btn');
                console.log(add);
                var minus = document.getElementById('minus-btn');
                var times = document.getElementById('times-btn');
                var divide = document.getElementById('divide-btn');
                var firstNumber = document.getElementById('first-number');
                console.log(typeof firstNumber.value);
                var secondNumber = document.getElementById('second-number');
                var result;
                var resultText = document.getElementById('result');
                console.log(resultText);

                //事件監聽器
                add.addEventListener('click', addTwo);
                minus.addEventListener('click', minusTwo);
                times.addEventListener('click', timesTwo);
                divide.addEventListener('click', divideTwo);

                //function
                function addTwo() {
                    result = Number(firstNumber.value) + Number(secondNumber.value);
                    resultText.innerHTML = '運算結果: ' + result;
                    console.log(firstNumber.value);
                    console.log(typeof firstNumber);
                    console.log(secondNumber.value);
                    console.log(result);
                    console.log(resultText.textContent);

                }

                function minusTwo() {
                    result = Number(firstNumber.value) - Number(secondNumber.value);
                    resultText.textContent = '運算結果: ' + result;
                    console.log('-' + result);
                }

                function timesTwo() {
                    result = Number(firstNumber.value) * Number(secondNumber.value);
                    resultText.textContent = '運算結果: ' + result;
                    console.log('*' + result);
                }

                function divideTwo() {
                    var divisor = Number(secondNumber.value);
                    // 如果輸入除數爲0，拋出異常
                    try {
                        if (divisor == 0) {
                            throw '除數不能爲0！';
                        }
                    } catch (err) {
                        alert(err + '請重新輸入除數。');
                        // resultText.textContent = err + '請重新選擇除數';
                        console.log(err);

                    }
                    result = Number(firstNumber.value) / Number(secondNumber.value);
                    resultText.textContent = '運算結果: ' + result;
                    console.log('/' + result);
                }
            }
        </script>

3.2 任務二：通過JS簡歷中加入簡易彩蛋

任務: 第十六天，開始感受JS的樂趣
demo演示：通過JS簡歷中加入簡易彩蛋
源代碼地址：通過JS簡歷中加入簡易彩蛋-github

效果：

js代碼：

定義元素變量，指向兩個按鈕和彈出信息段落；
監聽按鈕是否被按下；
響應函數：清空信息-信息段落可見-改變信息內容；
注意！！一定要先清空信息段落，否則來回切換按鈕時上一個的信息會亂入；
可以在段落<p>裏面插入<li>元素；
用嵌套函數的方式在新增按鈕裏觸發超鏈接

        window.onload = function () {

        //元素變量
        var hello = document.querySelector('.helloButton');
        var hobbies = document.querySelector('.hobbyButton');
        var message = this.document.querySelector('.message');

        //按鈕的監聽器
        hello.addEventListener('click', sayHello);
        hobbies.addEventListener('click', myHobbies);

        //響應函數
        function sayHello() {
            message.textContent = '';
            message.style.visibility = 'visible'
            message.textContent = '很高興 : ) 能遇見你！';
            message.style.backgroundColor = 'yellow';
        }
        function myHobbies() {
            message.style.visibility = 'visible'
            message.textContent = '';
            var hobbiesArray = ['電影','美食','舞蹈','單機遊戲']
            for(var i = 0; i < hobbiesArray.length; i++) {
                var listItem = document.createElement('li');
                listItem.textContent = hobbiesArray[i];
                message.appendChild(listItem);
                    }
                var more = document.createElement('button');
                more.textContent = '還不夠？點我';
                message.appendChild(more);
                more.addEventListener('click',openUrl);
                function openUrl() {
                    window.location.href='https://github.com/juwuyu';
                }
                 message.style.background = '#9966CC' ;
        }

    }

3.1 任務三：蠢萌故事生成器（MDN)

任務：蠢萌故事生成器 - 學習 Web 開發 | MDN
demo演示：蠢萌故事生成器
源代碼地址：蠢萌故事生成器-github

任務要求：

當用戶按下“Generate random story”按鈕時，生成一則笑話。
當且僅當在按鈕被按下前用戶在“Enter custom name”中輸入了其名字的情況下，將默認的名字變成用戶的名字。
當用戶在按下生成按鈕之前點擊了UK radio按鈕時，將默認的US重量和溫度單位換成英式的。
如果用戶再次按下生成按鈕，則隨即生成另一則笑話（如果用戶願意的話，他可以一直按生成按鈕）

效果：

js代碼：

首先！！一定要把js代碼放在window.onload函數裏面，文檔對象加載完成之後再執行js，否則可能出現object變量爲空（還沒被瀏覽器創建）；
然後創建一些變量來定義文檔中的按鈕，輸入框，單選框，段落等元素；
再然後定義一個返回數組隨機項的函數，用Math.floor(Math.random() * array.length)的方法生成數組長度內的隨機數，幫助生成故事裏隨機的關鍵詞；
把故事主體和關鍵詞數組放入變量；
按鈕監聽器，按下觸發result函數；
result函數：
- 把故事主體賦值給一個新變量！！調用一次函數在初始故事的基礎上生成一個新故事，這樣不會改變初始故事的內容；
- 生成隨機關鍵詞並替換，注意！！出現多次的關鍵詞要替換多次，不然只會替換第一個詞；
- 用輸入的名字替換默認名字，條件：輸入不爲空；
- 轉換單位，替換體重和溫度，條件：uk被選中；
- 更改文檔元素內容，並設置該元素可見；
- 注意！！每次修改字符串變量之後，要賦值，不然修改不生效。

    window.onload = function () {//文檔對象加載完成之後再執行js

        //定義文檔變量
        //COMPLETE VARIABLE AND FUNCTION DEFINITIONS
        var customName = document.getElementById('customname');
        console.log(customName.value);
        var randomize = document.querySelector('.randomize');
        console.log(randomize);
        console.log(document.querySelector('.randomize'));
        var story = document.querySelector('.story');

        //定義函數，返回數組中的隨機項
        function randomValueFromArray(array) {
            return array[Math.floor(Math.random() * array.length)];
        }

        //定義故事中的字符串
        //RAW TEXT STRINGS
        var storyText = 'It was 94 farenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.';
        var insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas'];
        var insertY = ['the soup kitchen', 'Disneyland', 'the White House'];
        var insertZ = ['turned into a slug and crawled away', 'spontaneously combusted', 'melted into a puddle on the sidewalk'];

        //事件監聽器與主函數
        //EVENT LISTENER AND PARTIAL FUNCTION DEFINITION
        randomize.addEventListener('click', result);

        function result() {
            //把storyText傳給新變量，對新變量進行替換[賦值！！]
            var newStory = storyText;
            var xItem = randomValueFromArray(insertX);
            var yItem = randomValueFromArray(insertY);
            var zItem = randomValueFromArray(insertZ);
            newStory = newStory.replace(':insertx:', xItem);
            newStory = newStory.replace(':insertx:', xItem);
            newStory = newStory.replace(':inserty:', yItem);
            newStory = newStory.replace(':insertz:', zItem);

            //檢測輸入是否爲空，替換名字
            if (customName.value != '') {
                var name = customName.value;
                newStory = newStory.replace('Bob', name);
            }
            //檢測uk是否被選中，替換溫度重量
            if (document.getElementById('uk').checked) {
                var weight = Math.round(300 * 0.0714286) + ' stone';
                var temperature = Math.round((94 - 32) / 1.8) + ' centigrade';
                newStory = newStory.replace('94 farenheit', temperature);
                newStory = newStory.replace('300 pounds', weight);

            }
            //生成隨機故事

            story.textContent = newStory;
            story.style.visibility = 'visible';

        }
        document.querySelector('html').style.backgroundColor = 'red';
    }

百度前端學院：第十六天，開始感受JS的樂趣【計算器，簡歷代碼】

IEF|零基礎學院|16天：javascript【1】

1. 課程目標

2. 學習總結

3. 任務

3.1 任務一：簡易計算器的實現

任務要求：

效果：

js代碼：

3.2 任務二：通過JS簡歷中加入簡易彩蛋

效果：

js代碼：

3.1 任務三：蠢萌故事生成器（MDN)

任務要求：

效果：

js代碼：

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

再談23種設計模式（3）：行爲型模式（學習筆記）

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

js中的錯誤監控（一）【promise，async，generator異步+內置錯誤類型】的錯誤捕獲與上報

【前端js】算法全歸納（七）運算符：常用運算問題及解決方案

【前端js】一分鐘掌握undefined，not defined,null和NaN的區別

js中的錯誤監控（二）【網絡+資源加載】的錯誤捕獲與上報

百度前端學院：第十六天，開始感受JS的樂趣【計算器，簡歷代碼】

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結