Javascript 提升（Hoisting）
Javascript 提升（Hoisting）介紹提升（Hoisting）是在 ECMAScript® 2015 Language Specification 裡面找不到的專有名詞。它是一種釐清 JaveScript 在執行階段內文如何運行的思路（尤其是在創建和執行階段）。然而，提升一詞可能會引起誤解：例如，提升看起來是單純地將變數和函式宣告，移動到程式的區塊頂端，然而並非如此。變數和函數的宣告會在編譯階段就被放入記憶體，但實際位置和程式碼中完全一樣。 by. MDN
創造環境與執行在創造環境的時候會先將 a 變數寫入記憶體，執行環境才將 1 賦予給 a。
函式陳述式創造階段而函式陳述式在創造環境就被寫入，在執行任何程式碼前，JavaScript 會把函式宣告放進記憶體裡面，這樣做的優點是：可以在程式碼宣告該函式之前使用它。
範例範例 1函式與變數範例
// undefinedconsole.log(a);var a = 1;// 以下輸出 你好function hello() { console.log("你好");}hello();
將 ...
JavaScript 是如何運行
JavaScript 是如何運行直譯式語言JS 是直譯式語言，不須先指定型別，也就是動態的語言，例如:JavaScript、Python、Ruby 等等。也被稱作高階語言(High-level programming language)，就是被高度封裝了的程式語言，離電腦的底層比較遠，跟編譯式語言對比起來，編譯式語言就是相對低階的
編譯式 vs. 直譯式
/
直譯式語言
編譯式語言
除錯速度
快
慢
執行速度
慢
快
開發速度
快
慢
可獨立執行
否，需依賴執行環境
是
直譯式轉換過程
我們可以到Esprima查看這個過程
語法單元化將詞彙解析，在這並不會知道甚麼是變數，只會辨識一些 ketword 或是標點符號
抽象結構數到這邊才知道我們正在定義一個變數，但還沒執行，要到代碼生成之後才執行，但因執行環境不同生成過程並不一樣
LHS, RHSLHS(left-hand side)LHS 用來賦予值到左邊的變數上
此範例將 1 賦予到左邊的變數上
let num = 1;
當賦予發生錯誤Uncaught SyntaxError: Invalid ...
Laravel8 Scout Search
Laravel8 Scout Search效果懶得看詳細介紹可直接跳至簡單完整範例，但必須先安裝完成相關套件及申請Algolia專案
介紹Laravel Scout提供了一個簡單的、基於驅動程序的解決方案，用於為您的Eloquent 模型添加全文搜索。使用模型觀察器，Scout 會自動使您的搜索索引與您的 Eloquent 記錄保持同步。
目前，Scout 附帶Algolia和MeiliSearch驅動程序。此外，Scout 包含一個“集合”驅動程序，專為本地開發使用而設計，不需要任何外部依賴項或第三方服務。此外，編寫自定義驅動程序很簡單，您可以使用自己的搜索實現自由擴展 Scout。
安裝安裝 Laravel Scoutcomposer require laravel/scout
發佈配置php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"
最後，將Laravel\Scout\Searchable特徵添加到您希望使其可搜索的模型中。此特徵將註冊一個模型觀察者，該觀察者將 ...
Laravel 列排序以及分頁範例
Laravel 列排序以及分頁範例效果
安裝 kyslik/column-sortable此包可用於 Laravel 5/6/7/8
composercomposer require kyslik/column-sortable
手動安裝(laravel 5.5 之前版本)在config/app.php添加服務提供者
'providers' => [ App\Providers\RouteServiceProvider::class, /* * Third Party Service Providers... */ Kyslik\ColumnSortable\ColumnSortableServiceProvider::class,],
發佈配置php artisan vendor:publish --provider="Kyslik\ColumnSortable\ColumnSortableServiceProvider" --tag="config"
用法In Model在你想使用排 ...
Laravel-Notification-Channels-FCM
Laravel Notification Channels FCM (Firebase Cloud Messaging)初始化專案laravel new fcm_test
使用 laravel/ui 創建身分認證使用Laravel Breeze也可以
composer require laravel/ui
創建 authphp artisan ui bootstrap --auth
npm install
npm run dev
新增 user 欄位，儲存要發送裝置 tokenphp artisan make:migration add_column_device_token_to_users
<?phpuse Illuminate\Database\Migrations\Migration;use Illuminate\Database\Schema\Blueprint;use Illuminate\Support\Facades\Schema;class AddColumnDeviceTokenToUsers extends Migration{ /** ...
Javascript todolist 經典題實作
Javascript todolist 經典題實作資料初始化渲染創建一個todolist.html
<html> <head> <title>Js todolist</title> </head> <body> <input type="text" placeholder="輸入待辦事項" class="txt" /> <input type="button" class="create" value="新增待辦" /> <ul class="todo-list"></ul> <script src="index.js"></script> </body></html>
創建index.js
// 創建初始資料let data ...
laravel notification table 連接到其他資料庫
laravel notification table 連接到其他資料庫問題如下環境: laravel7
User 的 model 是連接到 A 資料庫，notification 要連接到 B 資料庫，但因為 User model 連接到 A 表所以他會去找 A 資料庫底下的 notification 資料表，導致錯誤
如何解決覆蓋掉原先包裡面程式碼，我將覆蓋的程式碼放在App\Overrides\Notifications裡面，你也可以自行定義，但要記得更改namespace
創建Notifiable.php這個檔案要覆蓋掉在 User Model 裡使用的Notifiable
<?phpnamespace App\Overrides\Notifications;use App\Overrides\Notifications\HasDatabaseNotifications;use Illuminate\Notifications\RoutesNotifications;trait Notifiable{ use HasDatabaseNotifications, ...
jQuery 監聽 enter 事件
jQuery 監聽 enter 事件監聽 input 觸發搜尋假如有一個 input tag
<input id="search" name="search" />
可以監聽如有使用者在這輸入框按下 Enter 觸發
$('#search').pressEnter(function () { // 按下enter想做的事情寫在這 alert("enter");});
全局監聽$(document).keydown(function (event) { if (event.keyCode == 13) { // 按下enter想做的事情寫在這 alert("enter"); }});
監聽其他按鍵想取得其他按鍵的 KeyCodes 可以參考以下網站
JavaScript Event KeyCodeshttps://keycode.info/
效果如下圖
JavaScript 數值型別特性
JavaScript 數值型別特性以下先附上經典圖
number 型別這就是我們常見的數值型別
let a = 100;typeof a; // 'number'
Number 物件Number 的物件，他是在 js run 起來就存在的物件被放在根物件底下window.Number
let num = new Number(100);typeof num; // 'object'
可以看到 num print 出來是一個物件，想要取得 PrimitiveValue 裡的數值可以使用num.valueOf()，在這裏面的數值被創建出來後是不易更改的。
字串轉成數值字串轉型成數值
let num = Number("100"); // 轉型成功let num = Number("100abc"); // 轉失敗變成NaN(not a number)
也可以使用+觸發型別自動轉換
let num = +"100"; // 100let num2 = +num; // 100
parseIn ...
Laravel實作第三方登入
Laravel 實作第三方登入Laravel BreezeLaravel Breeze 是 Laravel 身份驗證功能的最小、簡單實現，包括登錄、註冊、密碼重置、電子郵件驗證和密碼確認。Laravel Breeze 的默認視圖層由使用 Tailwind CSS 樣式的簡單 Blade 模板組成，利用此套件生成基本登入登出很方便。
安裝首先，創建一個新的 Laravel 應用程序，配置您的數據庫，並運行您的數據庫遷移：
laravel new examplecd examplephp artisan migrate
創建新的 Laravel 應用程序後，您可以使用 Composer 安裝 Laravel Breeze：
composer require laravel/breeze --dev
安裝完成後，可以運行 breeze:installArtisan 指令。此指令將身份驗證視圖、路由、控制器和其他資源發佈到我們的應用程序。
php artisan breeze:installnpm installnpm run devphp artisan migrate
之後執行php ar ...
