本篇主要備註、紀錄 Angular component 的生命週期，方便之後查詢。 component生命週期Angular 元件生命週期中從 建立、渲染、更新、銷毀過程中，會觸發一些事件，這些事件可以讓我們在元件生命週期中做一些事情，例如：在元件建立時，可以做一些初始化的動作，或是在元件銷毀時，可以做一些清除的動作。 參考下圖生命週期以及程式範例。 Will保哥-範例程式 一、生命週期階段元件的生命週期在Angular中被分為八種主要階段，每個階段都對應著特定的生命週期鉤子方法。這些階段按照順序依次發生，從元件的創建到銷毀。 1-1 建立階段（Creation Phase） constructor: 元件類的建構子。通常是當元件被建立時，會先執行建構子，並且只會執行一次。 1-2 渲染階段（Render Phase） ngOnChanges: 當元件的輸入屬性發生變化時，會觸發此鉤子方法。 ngOnInit: 當元件初始化完成時，會觸發此鉤子方法。通常是當元件初始化完成後，會執行一些初始化的動作，例如：呼叫API取得資料、訂閱事件等等。 1-3 更新階段（Update Ph ...

何謂 ES6ECMAScript 2015（簡稱ES6）是JavaScript語言的一個重要版本，於2015年正式發布。它帶來了許多新的功能、語法和增強的功能，以改進JavaScript的可讀性、可維護性和功能性。ES6的主要目標之一是使JavaScript更現代化且更容易使用，以滿足不斷增長的Web應用程式需求。 以下是ES6中一些重要的功能和變化： let 和 const 宣告： ES6引入了 let 和 const 關鍵字，以取代 var 來宣告變數。它們具有區塊級作用域，可以解決 var 所帶來的一些問題。 箭頭函式： 箭頭函式是一種新的函式宣告語法，可以簡化函式的定義和上下文綁定。這有助於減少程式碼量，並改進了函式內部的 this 行為。 模板字串： 模板字串允許您在字串中插入表達式，以更方便地創建多行字串和字串模板。 解構賦值： ES6引入了解構賦值語法，使您可以輕鬆地從陣列和物件中提取值並賦給變數，以減少重複性的程式碼。 Promise： Promise是處理異步操作的新方式，有助於更清晰和可維護的異步程式碼編寫。 類別： ES6引入了類別和類別繼承，使面向物 ...

javascript 是前端必備之一的工具，開發過程中，有時候會遇到一些問題、驗證資料，這時候就需要使用到debugger來幫助我們找出問題。 除錯(debugger)的使用方式javascript 除錯方式比較常見為 console、alert()，以下介紹常見的javascript 除錯方式。 console : 這功能比較常見為 log()、warn()、error()，可以快速知道錯誤、問題內容。 alert : 這功能期初是用來提示使用者的，但也可以用來除錯，但是會有一個缺點，就是會中斷程式的執行，操作上也會綁手綁腳。 debugger : 這功能是javascript內建的除錯功能，可以在瀏覽器中直接使用，不需要額外安裝套件，也不會中斷程式的執行，操作上也比較方便。 try...catch : 這功能是javascript內建的除錯功能，可以在瀏覽器中直接使用，不需要額外安裝套件，也不會中斷程式的執行，操作上也比較方便。 一、console基本上比較少人使用 warn()、error()，通常都是使用 log() ，呈現效果如下方顯示。 補充一點 console 其實 ...

這篇是多年前要製作電子簽名的時候，找到的一個套件，剛好文章沒有紀錄，所以就在這邊紀錄一下。 官方範例 : Signature Pad demo Npm : signature_pad signature pad這裡範例只使用 signature_pad.umd.js 並用javascript 去實作。 html 製作這邊我分別使用了兩個 div 來製作，一個是用來放置簽名的區域，另一個是用來放置簽名的畫布。 1234567<div id="signature-pad" class="signature-pad"> <div class="signature-pad--body"> <canvas></canvas> </div> <!--功能列區塊 --> <!--..... --></div> 功能部份我切分成兩個區塊，一個是功能列，另一個是存檔列。 123456789101112131 ...

Content-boxcontent-box這是根據 CSS 標準的起始值和預設值。 width 與 height 只包括內容本身的寬和高， 不包括邊框（border）、內邊距（padding）、外邊距（margin）。注意：內邊距、邊框和外邊距都在這個盒子的外部。例如，如果 .box {width: 350px}; 而且 {border: 10px solid black;} ，那麼在瀏覽器中的渲染該容器的實際寬度將是370px，; 簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。 Border-boxwidth 和 height 屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的盒模型。注意，內邊距和邊框都將在盒子內 ，例如，.box {width: 350px; border: 10px solid black ...

CSS的構成與規則 CSS(Cascading Style Sheets) 使用方式如下 1選取器 { 屬性 : 值;} 說明 選取器 : 使用在html 中的地方，ex : class 、 id 、object 屬性 : 設定哪個屬性，ex： 背景、大小、寬度 值 : 設定什麼值，ex : #ddd ， px，1s 選取器 Class 選取器 123.title{ background: yellow;} ID 選取器 123#title{ background: yellow;} 後代選取器 123.list1 li{ list-style: decimal; } 屬性選取器 123.img-resp[alt]{ border-color:#000;} 擬態選取器 123a:hover{ color: #000;}

為什麼要用CSS -Reset在 W3C 制訂 HTML 與 CSS 規格時，並沒有強制規定各家瀏覽器應該怎樣實作每一個 HTML tag 的 CSS 預設樣式，只有提供資訊參考的範例[1]，加上IE 獨霸的時期，那時候還沒有其他瀏覽器， CSS Reset 的需求主要落在 IE 各版本之間的調整，後來 Firefox、safari、Chrome 陸續出現，網頁設計師必須要針對每個瀏覽器去做調整，因此 CSS Reset 的需求漸漸增加。 CSS Reset有幾套常見的 CSS Reset Reset CSS，此為 Eric Meyer 的版本 HTML5 Reset Stylesheet，HTML5 Doctor 網站修改自 Eric A. Meyer 的版本。 CSS Reset - YUI Library ，由 Yahoo UI Library v3 所提供的 CSS Reset 版本。 MeyerWeb-[CSS Reset]是Eric整理出來一個解決方案[CSS Reset]，強制把所有地方強制歸零，可以看到最一開始一大串的html標籤都設為0。缺點則是必須要重做設定，比 ...

備註這問題以前紀錄過，因為壓縮檔其實是自己登入過的電腦取出來的，文章內壓縮檔就是 C:\Users\Users\AppData\Local\Microsoft\VSCommon 資料夾，將版本以及OnlineLicensing都要複製過去，就可以使用了。 解決說明VS 2019 comunity是免費的，但是需要登錄微軟帳戶，不登錄只能使用30天，30天之後就無法使用了，如下圖： 操作清單使用前，可以使用下方壓縮檔，完成此作業。 下載註冊碼 複製註冊碼檔案到~\AppData\Local\Microsoft\VSCommon 打開登入註冊編輯程式尋找以下路徑HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\VisualStudio 找到VisualStudio_(隨機碼) 更改隨機碼 使用步驟1. 確認檔案找到註冊檔，路徑：C:\Users\{系統登錄使用者}\AppData\Local\Microsoft\VSCommon 2. 複製檔案到該路徑將兩個資料夾複製到需要註冊的電腦上，路徑： C:\Users\ ...

2FA 雙重驗證 URL格式2FA URL 格式如下方。透由 Scheme、Type、Label、Parameters 組成。 1otpauth://TYPE/LABEL?PARAMETERS 一、Schemeotpauth 期初由Google提出，用於將帳號與雙重驗證綁定，大多驗證格式都會用optauth，例如Google、Microsoft 等等。 二、TypeType 代表驗證類型，目前有兩種驗證類型，分別為 HOTP 與 TOTP。 HOTPHOTP 是基於 HMAC-based One-Time Password Algorithm，是一種基於 HMAC 的一次性密碼演算法，主要是透過一個密鑰與計數器產生一個一次性密碼，並且透過驗證計數器是否一致來驗證是否正確。 參考文件 -> 基於雜湊訊息驗證碼的一次性密碼演算法 TOTPTOTP 是基於 Time-based One-Time Password Algorithm，是一種基於時間的一次性密碼演算法，主要是透過一個密鑰與時間產生一個一次性密碼，並且透過驗證時間是否一致來驗證是否正確。 參考文件 -> 基於 ...

在當今的數位世界中，我們的生活日益依賴於互聯網和數位資產。從社交媒體帳戶到銀行賬戶，我們的重要資訊和數據都存儲在網絡上。然而，這種方便也伴隨著安全風險，因為網絡黑客和網絡犯罪分子不斷尋找機會來入侵我們的帳戶並竊取我們的數位資產。為了應對這種威脅，雙重認證（2FA）已經成為保護個人和組織數位資產的最佳方式之一。 什麼是雙重認證（2FA）？雙重認證（2FA）是一種安全措施，要求用戶在登錄或訪問他們的帳戶時提供兩種或多種不同類型的識別驗證。通常，這兩種驗證方式包括： 知識驗證：這是您知道的事情，例如密碼或PIN碼。 物理驗證：這是您擁有的物品，例如智能卡、USB密鑰或手機。 為什麼需要2FA？2FA的主要目的是增加帳戶的安全性。它使黑客更難入侵您的帳戶，因為他們不僅需要知道您的密碼，還需要擁有您的物理設備或其他驗證因素。以下是一些2FA的優點： 防止密碼泄露：即使您的密碼被盗，黑客仍然無法訪問您的帳戶，除非他們擁有額外的驗證因素。 降低帳戶風險：對於具有重要資訊的帳戶，如銀行帳戶或電子郵件，2FA可以額外保護您的數據，避免潛在的金融損失或信息洩露。 提高安全性：2FA可以幫助您確保 ...