Tag: Javascript

  • 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-運算元Operands、運算子Operator、優先性Precedence、相依性Associativity

    參考資料: MDN Web, 六角學院

    運算子優先序(Operator precedence)決定了運算子彼此之間被語法解析的方式,優先序較高的運算子會成為優先序較低運算子的運算元(operands)。

    請給予肝肝的工程師一些支持! 'W'

    <運算式與運算子/條件運算子>

    摘錄:

    條件 (三元) 運算子 是 JS唯一用到三個運算元的運算子:在一個條件後面會跟著一個問號 (?),如果條件是 true,在冒號(:)前的表達式會被執行,如果條件是 false,在冒號後面的表達式會被執行,這個運算子常常被用來當作 if 的簡潔寫法.

    function getSalary(isMember) {
      return (isMember ? '$3600.0' : '$4000.0');
    }
    
    console.log(getSalary(true));
    // expected output: "$3600.0"
    
    console.log(getSalary(false));
    // expected output: "$4000.0"
    
    console.log(getSalarye(null));
    // expected output: "$4000.0"

    3600.0 //運算元

    4000.0 //運算元

    運算子語法結構>>

    condition ? exprIfTrue : exprIfFalse

    參數

    condition
    • 值用來做為條件的表達式
    exprIfTrue
    • 如果 condition = trueexprIfTrue 會被執行
    exprIfFalse
    • 如果 condition =falseexprIfFalse 也會被執行

    <優先性>

    先乘除後加減->>

    var valueA =3*2 + 4*3
    var valueB =4*(3*8)
    console.log(valueA,valueB);
    
    // output: 18,96
    
    console.log(3 + 4 * 5); // 3 + 20
    // output: 23
    
    console.log(4 * 3 ** 2); // 4 * 9
    // output: 36
    
    let a;
    let b;
    
    console.log(a = b = 5);
    // expected output: 5

    相依性-由左邊到右邊判斷>>>

    剛剛我們說到了Javascript 遵從先乘除後加減規格, 但我們仍然試圖找尋這些奇怪的地方。這裡很需要各位的拆解能力。
    console.log(1>2>3);
    console.log(3>2>1);

    不要急, 慢慢想!

    不要這麼輕易的就看答案!

    .

    .

    .

    .

    .

    .

    .

    答案揭曉

    神奇的事情發生了~

    console.log(1>2>3);
    console.log(3>2>1);
    // true 
       false
    3>2  //這裡就會變成true
    true > 1 // 按照通識觀念, 這一定會是false。

    表達式賦予值>>

    Object.defineProperty() 用法參考這!

    • The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
    // 物件
    var b = {};
    
    //宣告物件.屬性
    Object.defineProperty(b,'a',{
    
    value: 2,
    writable:false
    
    });
    
    b.a =3; //賦予值 3
    console.log(b.a);
    
    var a=3;
    
    a=b.a =1; //奇怪的地方喔! 
    
    console.log(a,b.a);
    // Output
       2
       1,2

    b.a =3 賦予值, 但是 Object.defineProperty 屬性內是不可更改 = “writable: false”

    a=b.a =1; //奇怪的地方喔!

    走啊! 回去翻翻 JS表達式的特性 文章, 你將會知道答案。
    // 物件
    var b = {};
    
    //宣告物件.屬性
    Object.defineProperty(b,'a',{
    
    value: 2,
    writable:false
    
    });
    
    b.a =3; //賦予值 3
    console.log(b.a);
    
    var a=3;
    
    a=b.a =1; //奇怪的地方喔! 
    
    console.log(a,b.a);
    // Output
       2
       1,2

    我們再建立另外一個物件.屬性

    Object.defineProperty() 用法參考這!

    var b = {};
    Object.defineProperty(b,'a',{
    value: 2,
    writable:false
    });
    
    Object.defineProperty(b,'d',{
        value: 3,
        writable:false
        });
    
    console.log(b);
    
    var a=3;
    
    a=b.d=b.a =1;// 主要是這個地方需要探討
    
    console.log(a);

    程式執行的結果如下:

  • JS-陳述式Statement、表達式Expression

    這篇其實就是簡單表達的方式, 記住陳述式 vs 表達式這兩著不同即可。

    參考資料: MDN_Web 定義 , [JavaScript] Javascript 的表達式 (Expressions)和陳述式 (Statements):一個用說的,一個用做的

    Statement陳述式

    用於命令執行指定的一系列操作最大的特徵則是不會回傳結果。

    • 宣告(var、function)
    • 流程控制(block、if…else)
    • 迴圈(for、for…in)
    • 其它(import, export)
    • 流程控制 (Control flow):if…else, switch, break
    • 變數宣告 (Declarations): var, let, const
    • 函式宣告與類別 (Functtions and classes):function, async function, return, class
    • 其他:debugger, export, import, label
    var a;
    var b;
    let StudentA;
    let StudentB;
    
    if (StudentA > StudentB) {
    console.log(a);
    
    }else (StudentA < StudentB);{
    console.log(b);
    }
    
    function* generator(i) {
      yield i;
      yield i + 10;
    }
    
    const gen = generator(10);
    
    console.log(gen.next().value);
    // expected output: 10
    
    console.log(gen.next().value);
    // expected output: 20
    

    Expression表達式

    稱作表示式、運算式,經常透過一些符號結合上下語句並運算及回傳結果。白話: 只要你輸入數字進函示, 會判斷、會輸出結果來 = 表達式

    var b =1;
    let mine;
    mine ='我的啦'; //後方有運算子, 即是表達式。
    //具名函式表達式
    var myNameSpace =function getName(x){
    console.log(x); 
    }
    
    //不具名函式表達式
    var getNumSpace =function(x){
    console.log(x); 
    }
    function getSalary(isMember) {
      return (isMember ? '$3600.0' : '$4000.0');
    // 這是Javascript 唯一有的三元判斷式, 也屬於 表達式的一種
    }