Category: Front-End JavaScript

JavsScript一些奇怪的點與我寫得時候會出現的疑問。

  • Node.js 在你家VSCode開Server


    開啟你家的VSCode 開終端機

    打入Node.js指令

    常見的問題:

    node : 無法辨識 ‘node’ 詞彙是否為 Cmdlet、函數、指令檔或可執行程式的名稱。請檢查名稱拼字是否正確,如果包含路徑的話,請確認路徑是否正確,然後再試一次。 位於 線路:1 字元:1 + node app.js + ~~~~ + CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

    通常建議!

    重新安裝Node.js 並且檢查Path!

    如果您已經安裝了 Node.js,但系統仍然無法識別 ‘node’ 命令,則可能需要手動檢查環境變量設置。

    • 在 Windows 上,搜索“環境變量”並選擇“編輯系統環境變量” -> “環境變量”。在“系統變量”中找到並選擇 Path,然後檢查是否包含 Node.js 的安裝路徑(通常是 C:\Program Files\nodejs)。
    • 在 macOS 或 Linux 上,可以在終端機中執行 echo $PATH 來檢查環境變量。確保 Node.js 的安裝路徑(通常是 /usr/local/bin)包含在內。
  • Node.js Command Prompt實際操作

    觀看本文章之前,最好先具備一些 JavaScript 的基本知識。

    教學文章:

    https://www.runoob.com/nodejs/nodejs-http-server.html

    Node.js 與瀏覽器的差別

    在瀏覽器裡面,變數是涵蓋在Global裡面

    Node.js裡面

    Global 是不能繼承各個專案的變數的

    所謂的全域物件-操作

    當你打開網頁的瀏覽器
    以下就是全域物件的屬性內容。

    當你學過JavaScript 之後,我們按照同樣的方式在上面賦予記憶體、值。


    打開你的Node.js Command Prompt

    全域範例01

    首先VS Code 創建一個app.js

    開啟你的Node.js cmd Prompt

    輸入專案位置路徑

    偵測到你專案內的全域物件!

    全域範例02


    專案改成區域變數時

    很陽春的出現1 的賦予值。

  • Node.js 是什麼?

    Node.js是革命性的伺服器端執行環境,使用JavaScript語言來操作,具有以下亮點:

    • 跨平台:Node.js適用於各種作業系統,確保應用程式的可攜性。
    • 非阻塞I/O:它處理高併發,不會導致效能問題,保持應用程式反應速度。
    • 生態系統豐富:Node.js的npm套件庫包含數萬個模組,極大簡化開發工作。
    • 統一語言:前後端都使用JavaScript,促進開發無縫衔接。

    在串接前端和後端資料方面:

    • 處理HTTP請求:使用內建HTTP模組處理前端HTTP請求,編寫路由處理程序返回數據或HTML。
    • RESTful API:Express.js等框架簡化API開發,前端透過HTTP請求訪問和更新資料。
    • WebSocket通訊:實現雙向通訊,增加應用程式互動性。
    • 數據庫連接:支援多種數據庫,使用套件連接並執行數據操作。

    如何安裝Node.js。

    步驟1:下載 Node.js 安裝檔案

    Node.js 官方網站,通常我們都是下載 長期維護版本!

    https://nodejs.org/zh-tw

    步驟2:選擇你的作業系統

    Node.js支援多個作業系統,包括Windows、macOS和Linux。點擊你所使用的作業系統版本下載連結。

    步驟3:安裝 Node.js

    步驟4:檢查安裝

    安裝完成後,你可以在終端(Windows的命令提示字元或macOS和Linux的終端)中輸入以下指令檢查Node.js是否成功安裝:

    node -v

    如果你看到顯示Node.js的版本號碼,那就代表安裝成功了!

    此外,還可以檢查npm(Node.js套件管理器)是否也安裝成功:

    npm -v

    完成!

    現在,你已經成功安裝了Node.js。你可以開始使用它來開發強大的伺服器端和應用程式。簡單吧?祝你愉快地開始編寫代碼吧!

  • JS 函式內仍可以執行函式

    在JAVASCRIPT 函式裡面,我們時常會安插其他函示的屬性資訊,所以今天來探討一下這個有趣的議題。

    這次我們會在函式內部呼叫其他不同型別內容的函式,以及探討函式內的參數呼叫順序!

    還記得火影忍者裡的配恩六道,一口氣轟掉木葉村?

    當時的鳴人知道自己匯集仙術能量的掌握度不成熟,便用了作弊的方法…

    把影分身藏在妙木山,3個影分身專注於匯集仙術能量,一旦真實的自己在戰場上沒有了查克拉或式仙術能量…

    就是直接呼叫! 可讓自己隨時瞬間充滿能量!

    然而… 我們等下說的函式內執行函式也與這個招大同小異!

    範例程式

    let varA =1;
    console.log(varA);
    
    function peparationOfWork(){
    console.log('得知需求');
    console.log('寫下項目並分析');
    
    };
    
    function DoingWork(){
    console.log('準備好工具');
    console.log('電腦既定的檔案與程式');
    console.log('電錶量測');
    }
    
    
    function DoubleCheckYourWork() {
        console.log('階段性檢點');
        console.log('階段式物理性測試');
    
      }

    將peparationOfWork() 裡面安插函式DoingWork()

    let varA =1;
    console.log(varA);
    
    function peparationOfWork(){
    console.log('得知需求');
    DoingWork();
    console.log('寫下項目並分析');
    
    };
    
    function DoingWork(){
    console.log('準備好工具');
    console.log('電腦既定的檔案與程式');
    console.log('電錶量測');
    }
    
    
    function DoubleCheckYourWork() {
        console.log('階段性檢點');
        console.log('階段式物理性測試');
    
      }
    
      console.log(peparationOfWork());

    peparationOfWork() 確實在執行了DoingWork()!


    換做把DoubleCheckYourWork() 換到最前面執行

    let varA =1;
    console.log(varA);
    
    function peparationOfWork(){
    console.log('得知需求');
    DoingWork();
    console.log('寫下項目並分析');
    
    };
    
    function DoingWork(){
    console.log('準備好工具');
    console.log('電腦既定的檔案與程式');
    console.log('電錶量測');
    }
    
    
    function DoubleCheckYourWork() {
        console.log('階段性檢點');
        console.log('階段式物理性測試');
    
      }
      DoubleCheckYourWork();
      console.log(peparationOfWork());

    呼叫Function 順序以及參數有差?

    有!

    先來測試一下 呼叫函式(para1,para2) 的陳述式。

    OrderBy()只給para1

    function OrderBy(num1,num2) { 
        console.log(num1,num2);
    }
    
    OrderBy(2);
    
    OrderBy(3);

    OrderBy()給para1,para2

    function OrderBy(num1,num2) { 
        console.log(num1);
        console.log(num2);
    }
    
    OrderBy(1,2);
    
    OrderBy(3,4);

    觀察最後給他們執行的順序,你給他們甚麼他們就式按步就班做給你。


    結論

    函式呼叫方式… 其實跟其他框架的 “插斷執行” 很類似但…不能說相同!

    我們一般提到的 “插斷執行” 是在不同運作模式下的權限之分,這一個很嚴謹的規定。

    同樣都在於… 事先宣告好內部資料型別以及演算法,再來後面執行時編排順序。

  • Javascript -JSON 格式介紹與實作

    JSON是什麼

    JSON(JavaScript Object Notation)是一種輕量級的數據交換格式, 是 Javascript Object Notation 的縮寫。

    通常先學 Javascript 再學 JSON ,因為它是 Javascript 衍生出的一項功能。 JSON 是根據 JavaScript 的物件實字 (object literal) 發展出來的。

    市面上也有另一個資料交換格式 XML,許多.Net 專案也是常常在使用。之後我在寫一篇文章介紹!

    本文章參考資料:

    https://tw.alphacamp.co/blog/json

    https://miniaspreading.github.io/guide-to-json/1-what-is-json.html

    https://blog.csdn.net/weiwei9363/article/details/117805722


    JSON 與 XML

    XML (Extensible Markup Language) 是一種描述語言。 資料的描述在本質上與 JSON 類似。 使用XML中的Tags進行描述,工作量較大。 資料不僅可以透過標籤來描述,還可以透過屬性(例如:文字)來描述。 因此,當交換資料時,發送方和接收方必須具有關協定方便非常明確的資訊。

    相較之下,JSON 中的結構非常靈活,在任何情況下都可以被接收者完全理解,並且無需事先達成任何結構協議即可轉換為物件。

    因此,XML適合定義明確的資料接口,JSON適合靈活的資料交換。

    給予支持-是我繼續寫下去的動力

    JSON格式

    Copy 過來的時候,OpenData一開始是不會這麼乾淨的!

    以下是在Javascript 整理好的畫面。

    JSON 資料來源

    以下不囉嗦,直接示範給你看看!

    https://data.kcg.gov.tw/

    開放資料的內容

    開放JSON資料

    點選進去的之前,瀏覽器建議安裝JSON View。(下方安裝連結)

    https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=zh-TW

    JSON資料-檢視網頁原始資料

    進入網頁原始資料

    你會發現官方給的資料非常不易整理,我們會需要整理工具。

    以下工具可幫助你JSON整理格式!

    https://jsoneditoronline.org/

    https://jsonformatter.curiousconcept.com/

    https://tw.piliapp.com/json/formatter/

    https://coding.tools/tw/json-formatter


    開啟VS 建立一個新的JS檔案

    新增一個空物件,等會賦予裡面的資料。

    用瀏覽器閱讀該資料

  • JS – Read the Data in Object讀取物件內屬性的另一個方法

    如題

    僅演示該方法

    讀取物件內屬性

    當你的物件建立完成後, 你可以利用 [ 中括號 ] 去讀取屬性資料!

    執行結果

  • JS Delete the Data in Object刪除物件資料

    延用物件Dynamics 的範例去解說刪除物件內的屬性!

    https://www.educative.io/answers/what-is-the-delete-operator-in-javascript

    加入刪除物件_屬性

    加入delete 語句

    執行結果

  • JS- Object is Empty 空物件/你的物件內屬性常常變動嗎?

    理解物件的概念之後, 這裡示範空物件產生

    空物件的用法, 一般是用在時常變動內部屬性的的物件名稱

    何謂空物件

    格式: Let 物件名稱 = {大括號}Object is Empty

    執行結果

    物件作用域外_新增屬性

    把該物件名稱 Dynamics

    加入其他的屬性

    • dog
    • playStation
    • food

    執行結果


    更改屬性內部值

    執行結果

  • JS-DOM (Document Object Model)文檔物件模型

    首先我們要了解DOM 的概念!

    DOM 全名為: Document Object Model

    文檔物件模型 (DOM) 是提供我們寫程式的一種介面,可讓腳本語言(如 JavaScript)訪問網頁的結構和內容。

    DOM 每一層都有自己的節點(Node),每個節點都有屬於自己的物件。

    我們能透過DOM內建的屬性與方法讀取或更改內容

    What is Document Object Model(DOM) ? How JS interacts with DOM

    我們可以看到 Document 在最上層的級別,到下面的節點都有自己的子孫。

    • Document 本身就是一個document node
    • 所有的HTML elements也都是element nodes
    • 所有的HTML attributes也都是attribute nodes
    • 在HTML element內的text內容也是text node
    • 所有的comments也都是comment nodes

    用DOM Tree 來解釋的話。

    甚麼是DOM Tree?

    當我們打開HTML 是以下範例

    範例來源

    <body>
        <div>
            <p style="color: purple;">Paragraph text</p>
        </div>
        <div>
            <ul>
                <li>First item</li>
                <li>Second item</li>
            </ul>
        </div>
    </body>

    當用樹狀圖來看的時候

    body
     \_ div
     |   \_ p
     |      \_ [text]
     |      |
     |      \_ [attribute]
     \_ div
         \_ ul
             \_ li
             |   \_ [text]
             |
             \_ li
                 \_ [text]

    DOM HTML 環境

    DOM 環境配置

    https://medium.com/vicky-notes/dom-%E9%81%B8%E5%8F%96%E7%B6%B2%E9%A0%81%E5%85%83%E7%B4%A0-2c338afd238f

    **<script src="qurey.js"></script>**
    

    以上一段程式碼,可以放在 <head> 裡,或是 <body> 裡。

    但是在 DOM 裡,此段 <script src="qurey.js"></script> 程式碼必須放在 </body> 前面。

    • 網頁瀏覽器一打開,HTML 程式碼會一行一行執行,HTML 標籤由上到下都解析成 DOM 節點,才可以使用 JavaScript 去抓取裡頭的內容。

    若把 <script src="qurey.js"></script> 程式碼放在 <head> 裡,就抓取不到 HTML 的節點。(因為 HTML 標籤節點還沒解析出來)

    <body>
    
        <h1> 這是海景第一排</h1>
        <h2 class="header"> 就是我啊! </h2>
        <a href="https://products.aspose.app/cells/zh-hant/editor/html" class="link">這個連結給它點下去!</a>
    
    
        <script src="JS\qurey.js"></script>
    </body>

    JavaScript 篩選器

    // 選取網頁上的元素  css 選擇器  .header 是層級
    const q2_head = document.querySelector('.header');
    
    
    const qh1 =document.querySelector('h1');
    
    
    const link_e = document.querySelector('.link');

    網頁瀏覽器內執行

    q2_head

    qh1

    link_e

  • JavaScript 白話物件範例

    本身是工業機電整合 背景的工程師

    喜歡土炮 + 自己架設環境的個性

    又剛剛好是機械系畢業的…

    接下來讓我用機械、機構、機件去解釋甚麼是 “物件”


    資助一下肝肝的工程師吧! A_A ETH/ERC20

    [ 物件-機械類比 ]

    我們組成機械組成單位, 由大到小去闡述: 
    1. 機件: 機構構成之最原始的構件
    2. 單位機構: 尚未達成完全機構功能要求, 卻可以達到預期的運動
    3. 合成機構: 組成大目的性的預期效果之機構
    4. 機器: 改變能量形式, 達到預期有效的功能
    5. 機械: 除了改變能量形式之外, 也可以轉移能量形式變為功
    https://coggle.it/diagram/W6taIQWWyVMDB1yL/t/%E6%A9%9F%E6%A7%8B%E6%A9%9F%E6%A2%B0%E6%A9%9F%E4%BB%B6

    在開始白話解釋物件時, 我們得先知道括號種類


    [括號分別]

    蠻多人到了我這個年紀, 卻不知道括號有哪幾種?

    這裡我幫忙整理幾個…

    https://zh.wikipedia.org/zh-tw/%E6%8B%AC%E5%8F%B7

    • 小括弧(英語:parentheses,又稱圓括弧括弧
    • 中括弧(英語:square brackets,又稱方括弧
      • 半形 []
      • 全形 []
    • 大括弧(英語:curly brackets, 又稱花括弧
      • 半形 {}
      • 全形 {}
    • 六角括弧 〔〕
    • 方頭括弧
      • 實心 【】
      • 空心 〖〗

    [物件-白話]

    let 機器 ={
    
        {
    機件1:"連桿",
    機件2:"滑塊",
    機件3:"基座",
    完全機構1:"減速機",
    
    },
    {
    
    機件1:"軸承",
    機件2:"鉚釘",
    機件3:"螺帽",
    完全機構1:"被動軸承基座",
    完全機構2:"螺桿",
    
    }
    
    }

    [物件內的括號]

    • []中括號: 陣列使用
    • {}大括號: 物件使用
    • ()小括號: 函式參數使用