Author: lioajimzen

  • 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.屬性內容;

  • WPF-好用的Dependency Property And Callback相依性屬性

    WPF-好用的Dependency Property And Callback相依性屬性

    WPF之所以後續越來越多人使用,就是因為它的Dependency Property And Callback,甚至拉動Flex Windows的時候也不會讓圖片與元Dpi跑掉,以前的經驗表示… 在A端IDE跑得好好的外觀屬性,換到B端時…外觀屬性跑掉是家常便飯,一時之間會不知道是內層還是外部的設定屬性造成的(這個就會與WPF-Dependency Property有很大的關係)。

    以前的NetFramework 沒有Dpi適應以及元件外觀沒有相依性可以跟著整個Solutioni走,所以開發WPF(Windows Presentation Foundation)的大神也肯定有察覺到這個超級不方便的地方。

    今天我們就是要講這其中的一個重要元素 – Dependency Property。

    資料來源:

    https://skychang.github.io/2011/12/15/WPF-Dependency-Property-%E6%B7%B1%E5%85%A5%E6%8E%A2%E8%A8%8E/

    表單資料架構

    以前的 Property寫法

    你如果使用這種動態的方式,還得去定義FontChangedEvent 再去RaiseEvent … 真的很痛苦!

    WPF不需要這樣子搞了!


    在Visual Studio中添加Dependency Property

    在Visual Studio中的Dependency Class中加入一個靜態Dependency Property。

    DependencyProperty只能被封裝在繼承DependencyObject的物件中,幾乎在WPF或是Silverlight中看得到的控制項都繼承了DependencyObject,這跟我們之前用的 CLR屬性相差非常地多。


    Dependency Property Callback 示範

    當我們必須操控Form 裡面的原件屬性,需按照我們定義的方式做變化時,我們可以在Dependency Property 註冊的地方新增一個…

    內部可以多載實體 PropertyMetadata ( Boolean,PropertyChangedCallBack, CoreceValueCallBack)

    *可以想像它是被包裹在Dependency Property裡面的實體物件

    Boolean

    預先設定布林值

    PropertyChangedCallBack

    可改變實體元件的屬性值

    CoreceValueCallBack

    讀取目前元件底下的屬性值

    建立靜態DependencyProperty

    Dependency Property 宣告與新增其CLR屬性

    當你建立完了MLStackPanel Class之後,我們會將這個Property加到我們的自訂控制項中(MainForm的XAML碼),讓我們更容易理解。

    我們需要一個偵測背景顏色的副程式


    WPF頁面

    該專案目的:

    我們得把專案挪用到任何VS的環境,它都能幫助我且準確的保留上一個開發者的外觀樣式。

    設定控制項內部的 裝飾屬性

    XAML

    當你一開啟表單頁面時

    當你一開啟表單頁面,試驗你新增的CheckBox

  • WPF-CustomClass 客製Class


    新增Class

    右鍵點擊 “Add” -> “Class”

    範例Class

    範例來源: Advanced Windows Presentation Foundation (WPF) Course

    頁面 WPF- Form

    看到這個東西,會讓我想到HTML

    可以把樣式在按鈕上設定基本屬性Attribute

    然後把Button 當作一個Property 1

    範例使用 XAML 建立按鈕:

    https://learn.microsoft.com/zh-tw/dotnet/desktop/wpf/controls/walkthrough-create-a-button-by-using-xaml?view=netframeworkdesktop-4.8

    WPF-畫面示範

  • 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

  • JavaScript DOM 擷取方法-getAttribute, innerHTML and textContent

    JavaScript DOM 擷取方法-getAttribute, innerHTML and textContent

    本篇介紹如何透過 JavaScript 來控制或修改 DOM Tree 上面的節點元素。

    忘記了可以看這一篇

    這些元素可以是標籤、屬性或文本內容。

    讓我們討論如何使用getAttributeinnerHTML textContent 方法

    參考資料:

    https://hackmd.io/@5LnhTJLgQHyOZgGrp8n55g/SJMDAXp5Y

    https://tsuifei.github.io/blog/DOM_Methodes/


    DOM-Tree

    https://javascript.plainenglish.io/the-dom-of-javascript-848506ebf386


    1. HTML 取用元素標籤

    首先,我們看以下HTML元素。

    HTML文檔由各種不同的元素組成,這些元素可以是標籤、屬性或文本內容。

    在我們的討論中,我們將專注於一些常見的HTML元素。

    a. <h1><h2> 標籤

    <h1><h2> 標籤通常用於標題,其中<h1> 表示主標題,而<h2> 表示次要標題。

    我們可以藉由使用getAttribute 方法來獲取這些標籤的屬性值,例如idclass

    b. <a> 標籤

    <a> 標籤用於創建超連結,其中href 屬性指定連結的URL。我們可以使用getAttribute 方法來獲取href 屬性的值

    c. <span> 標籤

    <span> 標籤通常用於包裹內容以便進行樣式化或JavaScript操作。我們可以使用innerHTML textContent 方法來獲取或設置<span> 元素的內容。


    DOM 環境配置

     <script src="JS\all.js"></script>

    HTML 文本內容

    我們先把HTML 文本內容寫好,內部元素<a>、<span>、<h1>、<h2>

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

    JS檔案建立

    檔案名稱: all.js

    JS-getAttribute方法

    getAttribute 方法用於獲取HTML元素的特定屬性的值。

    如果我們想要獲取上面 <a> 元素href 屬性的值,以下可以這樣做。

    const myLink=document.querySelector("a");
    console.log(myLink.getAttribute("href"));
    console.log(myLink.getAttribute("class"));
    console.log(hrefurl_data); // 輸出: 連結的URL

    JS-innerHTML方法

    innerHTML 方法用於擷取設置元素內部HTML內容,包括所有子元素和文本。這方法允許我們直接操作元素的HTML結構。例如:

    console.log(myLink.innerHTML);

    JS-innerHTML、textContent混用方法

    textContent 方法 ,它會自動過濾掉HTML標籤。這對於獲取純文本非常有用。

    // 給與一個賦予值 content
    let content = myLink.innerHTML;
    console.log(content);

    執行結果顯示

  • 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;
    }
    
  • 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。你可以開始使用它來開發強大的伺服器端和應用程式。簡單吧?祝你愉快地開始編寫代碼吧!