Tag: JS

  • 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);

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


    結論

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

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

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

  • 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-同步(Sync)與非同步(Async)-SetTimeout-SetInterval

    JS-執行緒與同步(Sync)非同步(Async)概念 這一篇有概述了同步(Sync)與非同步(Async)。

    所以我們得把以前學得執行堆疊概念拿出來套用一下

    接下來要繼續說明一下, 同步(Sync)與非同步(Async)的應用

    [2022_11_02 新增SetInterval ]

    參考資料: 六角學院

    參考連結: 
    談談JavaScript SetTimeout/SetInterval

    給予小肝肝工程師支持吧'v': ETH/ERC20

    JavaScript

    SetTimeout() 用法

    在講解執行順序之前, 我們會先說明事件佇列

    在你執行到SetTimeout()所在的Function, 內部的陳述式會儲存到事件佇列

    先記起來!

    SetTimeout()方法1

    1. SetTimeout() 的delaytime單位(ms)
    2. SetTimeout() 要整個程式順序跑完以後才會執行
    3. SetTimeout() 只執行一次就會結束!
    4. SetTimeout( 非字串,delaytime ) 用這種方式, 主控台的執行效率會比較好

    SetTimeout()方法2

    不同在於

    SetTimeout( 字串,delaytime) 裡面陳述, 我們用純字串

    這種方式在主控台的執行效率較不好


    執行順序

    執行結果

    SetInterval 用法

    setInterval() 固定延遲了某段時間之後,才去執行對應的程式碼,然後「不斷循環」

    SetInterval 結構

  • JS-Not Defined VS undefined 還有Null

    當看完JS-提升之後, 為了加深記憶體區塊”空的”概念, 我們來探討一下

    下方有一篇原文網站GeeksforGeeks, 內容講述此現象:

    https://www.geeksforgeeks.org/javascript-referenceerror-variable-is-not-defined/

    給予肝肝的工程師小額捐款'V': ETH/ERC20
    0xd20c50c82450ee288711bf5e3f9238bc816c168a

    主要區分以下

    • Not Defined
    • Undefined

    <Not Defined >

    // let a;  
    console.log(a);
    console.log(typeof a);
    

    解釋:

    當你的記憶體區塊 let a , 並沒有宣告時

    你的瀏覽器將抓不到”a”

    這就是所謂的: Not Defined

    <Undefined >

    let b;
    console.log(b);

    解釋:

    當你的記憶體區塊 let b 存在時

    你的瀏覽器將抓到的是這個 記憶體區塊

    但是你並沒有賦予值

    所以只會有: Undefined

    *那你會想問… null 的特性怎麼跟undefined那麼像??

    <Null > 空值

    一般我們在VB.Net、C#JAVA 這些程式語言裡面…

    VB.Net :

    Dim C As Interger = 32

    C#:

    Int C =32; 

    JAVA:

    Int C =32;

    你會發現, 以上語言都必須先“宣告型態”,也就是我們本文章所講的記憶體區塊.

    後面按照需求, 賦予該記憶體區塊一個.

    但是 Javascript不一樣, Javascript本身是一種需要被解釋的語言, 而且不用宣告型態就可以直接賦予值

    let a ;
    a=1;
    c=null;
    d=11;
    
    console.log(a);
    console.log(c);
    console.log(d);

    解釋

    你會發現… c 被賦予 null(空值), 通常這個變數內有值時, 就可以用這個方式清空.

    d 沒有記憶體區塊, 卻照樣可以直接被賦予值

    為求謹慎, 我們來看看 c、d 的Type 是甚麼好了

    let a ;
    a=1;
    c=null;
    d=11;
    
    console.log(a);
    console.log(c);
    console.log(d);
    console.log(typeof c);
    console.log(typeof d);

    解釋

    c 的型態為object (物件)

    d 單純就是變量

    結語

    看似很簡單, 講起來卻很繞口…

    藉由探討 Javascript語言特性記憶體區塊 對後續優化網站有很大的幫助.

    希望這樣看到文章的Programmer 能夠有所幫助喔!

  • JS 作用域探討

    語法作用域 = 靜態作用域

    靜態作用域 及 動態作用域 之間的差別牽涉直譯語言的解譯及運行流程。
    • 資料參考: 六角學院 JavaScript 核心篇

    變數作用域也會依據宣告的方式不同,產生不同的作用域:
    未宣告:全域變數
    var 宣告:作用域在 函式 中
    letconst 宣告:作用域在 {} 中

    JS 採用的是語法作用域, 只要確定你的作用域, 就不會再改變。

    範例1

    範例1 測試結果如下:

    利用全域console.log() 去測試, 可否顯示函式 callname()作用域的值。

    顯示出來的結果

    callname()作用域的變數value, 用外層console.log 去讀取會得到: Uncaught ReferenceError value is not defined

    原因:

    全域console.log() 無法去 callname() 作用域去讀取該變數!

    範例2

    此範例我們加入全域變數 let name =’張小姐’

    我們會知道最後被執行的call2()函式

    原因:

    call2()函式內部有呼叫 callname() 函式, 而callname()函式作用域內並沒有宣告name變數, 所以callname() 函式會去全域變數查找name值(綠色箭頭部分) 。

    顯示出來的結果

    以上就是不同的作用域之間的關係, 希望大家不要搞混了。