Category: Backen Tech.

  • Node.js 核心模組-create-server

    Node.js 核心模組-create-server

    資料參考

    Node.js – createServer 起手式 – iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 (ithome.com.tw)

    1.創建你的第一個 Node.js 伺服器

    • req (request) – 當使用者呼叫資料時所發出的請求。
    • res (response) – 回傳給使用者的資料。

    帶入 createServer 參數

    2.運行你的伺服器

    Edge瀏覽器內的操作

    3.觀看伺服器運作狀態

    4.觀看伺服器運作狀態

    檔案: node apphttp.js

    觀看Visual Studio 內的Terminal 狀態

    Edge瀏覽器內的狀態

  • Node.js require、module以及exports 模組設定

    Node.js require、module以及exports 模組設定

    An Essential Guide to Node.js Modules (javascripttutorial.net)

    1. Module(模組)

    2. require 函數

    3. exports 和 module.exports

    exports 與 module.exports 的不同!

    • module.exports 是暴露模塊的主要對象。當你將一個模塊導入另一個文件時,你實際上獲得的是 module.exports 的內容。
    • exportsmodule.exports 的一個參考,方便將多個對象或函數暴露給外部。

    通常,如果你想從一個模塊導出單一對象(如函數、類等),你可以直接使用 module.exports。如果你想導出多個對象或函數,你可以使用 exports

    使用 module.exports 導出物件內的資料:

    4. 利用Terminal Prompt 出執行檔案 app.js

    5. 模組設定_常用方法

    一般來說,我們要包裹底層商業邏輯,用module.exports 局多!

  • JSON與foreach的逐一條列應用。

    JSON與foreach的逐一條列應用。

    [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) – Cool3c

    目的

    JSON 檔案範例:

    臺北市資料大平臺 (data.taipei)


    HTML

    JavaScript

    執行結果

  • JavaScript-forEach()方法

    參考資料:

    想知道嗎:JS forEach()的 index 位置 – W.S.Wade – Medium

    Array 原型的 forEach 有多好用? 學會高階函數之後都不想寫 JavaScript 以外的程式語言了 | by realdennis | Medium


    範例Code01

    範例Code02

    範例Code03

    以上範例顯示結果

    判斷是否為偶數_範例

    顯示結果

    留一個問題給大家去思考

  • JavaScript-this呼叫的三種方法: call、apply、bind

    JavaScript-this呼叫的三種方法: call、apply、bind

    引言

    在 JavaScript 中,this 是一個特殊的Keyword,代表了現在執行代碼的目標。然而我們需要在不同的上下文中調用函,這時就會用到 callapply bind 這三種方法。

    JS-函式宣告Function Declared、函式表達Function Express、This – Hugo Habor

    This


    參考連接

    https://hsuchihting.github.io/javascript/20200804/4095833756/

    https://www.shubo.io/javascript-this/


    1. call 方法

    call 方法用於調用一個函數,並指定函數內的 this ,以及將函數的參數以參數列表的形式傳遞進去。

    2. apply 方法

    3. bind 方法

    結論

    總結,callapplybind 是 JavaScript 中用於控制函數中 this 值的三種方法。它們在不同的情境中有不同的應用,初學者可以通過這些例子更好地理解它們的使用方式。熟練掌握這些方法將有助於開發者更靈活地處理函數調用的上下文。

  • JavaScript 事件監聽addEventListener() 方法

    JavaScript中用來監聽事件的方法。這個方法可以讓你向特定的HTML元素(例如: 按鈕、表單、文檔等)添加addEventListener(),當指定的事件發生時,執行相應的 JavaScript 程式碼。

    該方法用途

    addEventListener()方法可用於監控DIY原生元件。

    可從e 原生事件中選取你要監聽的事件元素!


    參考資料

    https://www.runoob.com/jsref/met-document-addeventlistener.html

    https://www.freecodecamp.org/chinese/news/javascript-addeventlistener-example-code/


    1. addEventListener() 方法概述

    它可以接受三個參數:

    • 事件類型(event type) 要監聽的事件類型,例如 “click”、”keydown”、”submit” 等。
    • 監聽器函數(listener function) 當事件發生時要執行的函數。
    • 捕獲階段(useCapture,可選) 一個Boolean值,表示事件是否在捕獲階段處理。通常使用 false,即在冒泡階段處理事件。

    2. 使用 addEventListener() 解釋

    文法結構

    2.1 添加基本的點擊事件監聽器

    我們可能想知道關於事件的更多信息,例如什麼元素被點擊了。在這種情況下,我們需要向函數傳入一個事件參數。

    2.2 使用捕獲階段處理事件

    2.3 帶有事件對象的監聽器函數


    3. 完整的範例碼01

    HTML

    JavaScript

    4. 完整的範例碼02

    HTML

    JavaScript

    DOM監聽器的使用

  • JavaScript 核心概念-物件取值、新增、刪除

    JavaScript 核心概念-物件取值、新增、刪除

    物件裡面可以包含很多Type 的屬性,本篇主要陳述每個取值、新增、刪除的方式

    取值、新增、刪除的方式可以利用物件. 標記號(點的方式) 呼叫出來!

    https://chiangyuchi.github.io/2019/05/06/2019-05-06/

    取值的方法01

    我就用人體的組成方式,來給大家示範一下

    試試看在物件內的函式呼叫方式

    component.callFamily

    取值的方法02

    呼叫元件內屬性成員

    component.members.kidney

    取值的方法03

    用不同的方式,呼叫元件內屬性成員

    得知一個結論

    當你要呼叫屬性名稱時,屬性名稱可以為 = 數值、字串


    呼叫函式的方法


    新增屬性

    將執行視窗內的物件屬性拉下去,會看到內部的屬性。


    刪除屬性

    刪除componet 裡面的屬性

    1.deposit

    2.後來新增的[$$$]

    delete component.屬性內容;

  • JavaScript DOM-擷取HTML 表單內容

    JavaScript DOM-擷取HTML 表單內容

    參考連結:

    https://hackmd.io/@MikanS/BypCrTfkF


    網頁表單內容擷取

    HTML

    好想吃漢來海港喔~

    JavaScript

    CSS

    網頁表單畫面

    HTML Form 表單

    執行視窗

    qureyselector示範畫面

    操作執行視窗

    此時我們可以來操作看看執行視窗,將.txt 賦於其他字串資料。

    JavaScript

    執行視窗


    直接操作執行視窗_觀看互動過後的更新值

    將原本的肯德基 >> 拿坡里炸雞

    輸入 list.value

    你會得到了最新更改過的賦予值!

    https://www.lovethispic.com/image/337093/the-day-you-stop-learning-is-the-day-you-start-dying

  • My SQL -顯示資料庫及創建資料表單Show Databases & Create Database

    My SQL -顯示資料庫及創建資料表單Show Databases & Create Database

    以下操作環境: WNIDOWS10

    MySQL 建置環境方法

    MySQL :: MySQL 8.0 Reference Manual :: 2.3 Installing MySQL on Microsoft Windows

    MYSQL Workbench 下載檔案:

    https://dev.mysql.com/downloads/workbench/


    表現出Database/Show_Databases.

    當你開啟MySQL command Line

    輸入路由的密碼之後,輸入:

    show databases;


    創造DB/Create Database

    CREATE DATABASE <database_name>;
    
    CREATE DATABASE soap_store;
    

    當你Show 出來的Database

    確實創造出了 soap_store

    創造你的 DataBase /Create Database

    CREATE DATABASE chicken_coop;
  • C# 委派/事件 Delegate /Event

    C# 委派/事件 Delegate /Event

    一直以來開發C# .Net表單程式, 比較容易搞混的觀念( 對於一路寫VB.Net的人來說啦~ )

    那麼底下我們就來講解一下甚麼是委派與事件吧!

    程式範例出自: Visual C# 2015 學習經典/松崗出版

    作者做了些許的更改。

    用途:

    當你要呼叫Subroutine被呼叫Subroutine之間需要一個媒介時,委派就是很好用的方法

    範例資源:

    https://dotblogs.com.tw/joysdw12/2013/06/21/delegate-winfom?fbclid=IwAR1JCCfockFkVVn759EE9SDDVuaOEg1WC0NmT1XPk1y_7WWx_SdwfqpseAg


    概念:

    [委派] 白話說明:

    工廠裡面廠長(有主控權) 將這個禮拜的任務單據, 送給底下課長(媒介) 去指派任務給基層的操作人員(參數)去操作機器。

    必須要透過個有職位抬頭的人物, 去傳達這件事情, 這個事情包含了很多任務。

    委派的宣告結構

    以下講解的範例, 我們用國小國中數學常用的三角形, 長方形面積算法作為函式, 方法之內容。

    • [modifier] delegate [回傳型別] [委派類別] (回傳參數)
    Public delegate double DArea(int d1, int d2);
    • delegate type 本身就是一種型別, 我們宣告了一個有委派性質+自定義名稱的函式類別
    • 重點, 我們丟進委派類別裡面, 相對應的參數資料形態也要一樣。

    委派結構_對應其他方法

    • 方案內的檔案目錄架構

    Demo 畫面


    Program.cs 的程式碼

    namespace DelegatedTest
    {
        internal static class Program
        {
            /// <summary>
            /// 應用程式的主要進入點。
            /// </summary>
            [STAThread]
            static void Main()
            {
    
                Application.EnableVisualStyles();
                Application.SetCompatibleTextRenderingDefault(false);
                Application.Run(new Form1());
    
            }
    
           public delegate double DArea(int d1, int d2);
    
    
    
            public static void GetArea(int x, int y, DArea tv)
            {
                double area = tv(x, y);
    
                Console.WriteLine("高:{0}, 底:{1}, 面積:{2} \n", x, y, area);
            }
    
        }
    }
    
    

    Form1.cs的程式碼

    
    namespace DelegatedTest
    {
    
        public partial class Form1 : Form
        {
            double TriArea; // 三角形的面積(可能有小數點)
            double RecTArea; // 長方形的面積(可能有小數點)
    
            public Form1()
            {
                InitializeComponent();
            }
    
            // 三角形算式
            public static double TriA(int H, int B)
            {
                return (H * B / 2);
            }
    
            // 長房形算式
            public static double RecA(int L, int W)
            {
                return (L * W);
            }
    
    
            private void caculate_bt_Click(object sender, EventArgs e)
            {
                // 判斷三角形的
                if (!string.IsNullOrEmpty(trianHiegh_textBox.Text) && !string.IsNullOrEmpty(trianBottom_textBox.Text))
                {// 2個 TextBox都有字串資料
                    TriArea = TriA(Convert.ToInt16(trianHiegh_textBox.Text), Convert.ToInt16(trianBottom_textBox.Text));
                    TriaArea_textBox.Text = Convert.ToString(TriArea);
                }
                    else
                {
                    MessageBox.Show("至少有一個 三角形的TextBox 沒有資料");
    
                }
    
    
                if (!string.IsNullOrEmpty(RectHiegh_textBox.Text) && !string.IsNullOrEmpty(RectWidth_textBox.Text) )
                {
    
                    if (Convert.ToInt16((RectHiegh_textBox.Text))!= Convert.ToInt16((RectWidth_textBox.Text)))
                    {
                 RecTArea  = RecA(Convert.ToInt16((RectHiegh_textBox.Text)),Convert.ToInt16((RectWidth_textBox.Text)));
                 RectanArea_textBox.Text = Convert.ToString(RecTArea);
                    }
                    else
                    {
                        MessageBox.Show("至少有一個 長方形的TextBox 2邊輸入一樣的數字。");
                    }
    
                }
                else
                {
                    MessageBox.Show("至少有一個 長方形的TextBox 沒有資料");
                }
            }
    
          
            private void Form1_Load(object sender, EventArgs e)
            {
    
            }
    
    
        }
    }

    解釋

    TriA(int1,int2)方法, RectA(int1,int2)方法,

    對應委派類別函式 DArea(int1,int2)

    參數資料形態是一樣的, 這樣才能確保委派過去的資料型態是一樣

    TriA : 處理三角形面積算法。

    RectA : 處理矩形面積算法。

    <備註: >

    從檔案總管的 Program.cs 引用裡面的 method
    引用到 Windows Form 類別內做為使用.

    底下連結有討論

    1. static method 引用法
    2. non-static 引用法

    c# – accessing a function in the Program.cs that initializes my Form1 from my Form1 – Stack Overflow


    C# 中的事件處理程序:

    在C#中,事件處理程序通常使用 += 或是 -=運算子來訂閱事件,並使用 delegate 匿名方法來定義處理程序。以下第一個範例:

    No.1 創建一個按鈕事件做解釋範例

    定義了一個委託類型 EventHandlerDelegate,它將用於定義事件的類型:

    // 定義一個委託,用於處理事件
    public delegate void EventHandlerDelegate(object sender, EventArgs e);

    接下來,我們創建了一個自定義的按鈕類別 MyButton,並且宣告了一個事件 ButtonClicked,並將 EventHandlerDelegate 用作事件類型:

    //創建一個自定義的按鈕類別
    
    public class MyButton
    {
        // 宣告一個事件,使用上方的委派類型 作為我們的事件類型。
        public event EventHandlerDelegate ButtonClicked;
    
    
        // 模擬一個按鈕點擊的方法! 
        public void SimulateButtonClick()
        {
            Console.WriteLine("按鈕被點擊了!");
            
            // 檢查是否有註冊事件處理程序,然後調用它們
            if (ButtonClicked != null)
            {
    
                //包含事件資料之類別的基底類別,全部清空
                EventArgs e = EventArgs.Empty;
                ButtonClicked(this, e);
    
            }
        }
    }
    

    SimulateButtonClick() 方法中,我們模擬了按鈕的模擬點觸事件,然後使用ButtonClicked 事件來通知註冊的事件處理事件。

    最後,在 Main 方法中,我們註冊了一個事件處理程序 Button_Clicked,當按鈕點擊事件發生時,這個處理程序將被調用。使用 Invoke 方法來觸發事件處理程序也是可能的,特別是當多個執行緒涉及時,它可以更安全地調用處理程序:

    public class Program
    {
        public static void Main()
        {
            MyButton button = new MyButton();
    
            // 註冊事件處理程序
            button.ButtonClicked += Button_Clicked;
    
            // 模擬按鈕點擊
            button.SimulateButtonClick();
        }
    
        // 事件處理程序
        public static void Button_Clicked(object sender, EventArgs e)
        {
            Console.WriteLine("事件處理程序被觸發!");
        }
    }
    

    No.2 創建一個加減乘_四則運算範例

    https://www.jytek.tw/post/%E5%A7%94%E8%A8%97-delegate-%E5%92%8C%E4%BA%8B%E4%BB%B6-event?fbclid=IwAR2Yail_lC75Np82fM4BGZ_mIAgT8S2SezkaMJRqc6fwLWPKGtIzjLCw1Eo

    這範例中,先定義了一個委託 Calculate,這個委託具有兩個整數參數和一個整數返回值。接著定義了一個事件 StartEvent,這個事件使用 Calculate 委託作為事件類型。

    delegate int Calculate(int x, int y);
    static event Calculate StartEvent;

    這個部分定義了委託和事件,用於計算兩個整數之間的操作。

    接下來,在 Main 方法中,我們定義了兩個整數變數 xy,它們的值分別為 1 和 2。然後,我們註冊了兩個事件處理程序,分別是 AddMultiply,這兩個處理程序都是將兩個整數進行不同的操作。

    int x = 1;
    int y = 2;
    StartEvent += Add;
    StartEvent += Multiply;

    接著,我們使用 Invoke 方法觸發 StartEvent 事件,傳遞 xy 作為參數。這將導致兩個事件處理程序(AddMultiply)被呼叫,並分別執行加法和乘法操作。

    StartEvent.Invoke(x, y);

    最後,我們使用 Console.ReadKey() 來等待使用者的輸入,以確保控制台應用程序保持運行狀態。

    using System;
    
    delegate int CalculationOperation(int x, int y);
    static event CalculationOperation CalculationRequested;
    
    static void Main(string[] args)
    {
        int operand1 = 1;
        int operand2 = 2;
    
        // 註冊事件處理程序
        CalculationRequested += Add;
        CalculationRequested += Multiply;
    
        // 觸發事件並獲取計算結果
        int result = Calculate(operand1, operand2);
    
        Console.WriteLine("計算結果: " + result);
        Console.ReadKey();
    }
    
    static int Add(int x, int y)
    {
        return x + y;
    }
    
    static int Multiply(int x, int y)
    {
        return x * y;
    }
    
    static int Calculate(int x, int y)
    {
        if (CalculationRequested != null)
        {
            int result = 0;
            foreach (CalculationOperation operation in CalculationRequested.GetInvocationList())
            {
                result = operation(x, y);
            }
            return result;
        }
        return 0;
    }