JS30 Day 5 - Flex Panel Gallery 用CSS與JS來製作一個點擊後會動畫展開的圖片展示效果， 運用到了CSS的flex、transform、transition.. 這篇比較偏向css知識！ 特別運動 transitionend event 來觸發 className ，讓動畫面更流暢 // <div class="panels"> // <div class="panel panel1"> // ...

開發過中程常常會有上傳檔案的功能，上傳完之後也要可以馬上去 preview image 的情況，此時我們可以透過 files來作到我們想要的效果 ↓ <form> <input @change="getFile($event)" type="file" id='upload_file'/> <img v-if='url' :src="url" /> </form> 在 input onchange 的時候觸發的事件，在此事件中取得 files export default {

在其他以類別為基礎的程式語言中，this指的是目前使用類別進行實體化的物件。而JavaScript語言中因為在設計上並不是以類別為基礎的物件導向，設計上不一樣，所以this的指向的是目前呼叫函式或方法的擁有者(owner)物件，也就是說它與函式如何被呼叫或調用有關，雖然是同一函式的呼叫，因為不同的物件呼叫，也有可能是不同的this值。 函式的呼叫 不論是在物件中的方法，或是一般的函式，每個函式中都有this值。以下是一個很簡單的範例，一個是我們所認知的普通函式，一個是在物件中的方法: function func(param1, param2){ console.log(this) } const objA = {

初次見面 JavaScript 的正規式是一個內建的物件，其建構函數（Construction functoin）為 RegExp，典型用法如下： re = new RegExp("pattern", "flag") 上述用法也可以寫成： re = /pattern/flag 其中，pattern 代表以正規表示法來顯示的字串，flag 則是比對的方式。flag 的值可能有三種，分別解釋如下：

Program/Process/Thread 是作業系統(Operating System)很重要的概念，同時也是新鮮人面試時經常會被問到的題目。 Program(程式) 相同 Program 的 Process 可以多個同時存在。 Program 意旨軟體工程師在 IDE、editor等所寫的程式碼(code)，也就是說還尚未load入記憶體的 code，我們稱之為Program。我們也可以想像成軟體開發者就如同建築師，要設計一座工廠，而這座工廠要如何建造、規劃的藍圖就是 Program。 Process ( 程序、進程 ) Process 意旨已經執行並且 load 到記憶體中的 Program ，程序中的每一行程式碼隨時都有可能被CPU執行。在實際生活中，點開應用程式就是將 Program 活化成 Process ，因此我們可以在活動監控器(mac)中看到PID，也就是執行中的Process 。連結 Program 的想像，Process 就是實體的工廠，照著 Program 這張設計藍圖所完成的工廠。

|| 和 ?? 的比較 主要是差別在 0 和 false 是你想要取得的值的話，就會需要用 ?? 不然用 || 的話，會變成後面的值。 0 || 3 // 3 0 ?? 3 // 0 false || 3 // 3 false ?? 3 // false 至於其它的 null, undefined, 就都沒有差別了

IIFE (Immediately Invoked Function Expression) 是一個定義完馬上就執行的 JavaScript function (en-US)。使用Grouping Operator (en-US) () 包起來的 anonymous function。這樣的寫法可以避免裡面的變數污染到 global scope。 Function 轉換為 expression 形式，並且馬上執行，function scope 內的變數在外面是無法存取的。 const result = (function () { var name = "Barry"; return name; })(); // Immediately creates the output: console.log(result); // "Barry"

const formData = new FormData() formData.append('image', evt.target.files[0]) formData.append('directory', '/users') const data = { formData, token: this.$cookies().get('auth').access_token } const img = await this.uploadImage(data) evt.target.value = ''

本方法在 IE 的支援度很差，真的逼不得已，不建議使用 // demo 1 <div id="div"></div> <script> var elem = document.querySelector('#div'); var event = document.createEvent('Event');

transitionend 這個是在 css transition 結束時會觸發的 event /* html => <div class='hover'>Hover Dom</div> */ .hover{ width: 100px; min-height: 40px; background-color: #2dd4bf; border-radius: 4px; text-align:center;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString JavaScript Date UTC() Method https://www.geeksforgeeks.org/javascript-date-utc-method/

通常如果一樣東西需要編碼，說明這樣東西並不適合傳輸。原因多種多樣，如 Size 過大，包含隱私資料，對於 Url 來說，之所以要進行編碼，是因為 Url 中有些字元會引起歧義。 例如，url 引數字串中使用 key=value 鍵值對這樣的形式來傳參，鍵值對之間以&符號分隔，如/s?q=abc&ie=utf-8。如果你的 value 字串中包含了=或者&，那麼勢必會造成接收 Url 的伺服器解析錯誤，因此必須將引起歧義的&和=符號進行轉義，也就是對其進行編碼。 又如，url 的編碼格式採用的是 ASCII 碼，而不是 Unicode，這也就是說你不能在 Url 中包含任何非 ASCII 字元，例如中文。否則如果客戶端瀏覽器和服務端瀏覽器支援的字符集不同的情況下，中文可能會造成問題。 url 編碼的原則：就是使用安全的字元（沒有特殊用途或者特殊意義的可列印字元）去表示那些不安全的字元。 預備知識：URI 是統一資源標識的意思，通常我們所說的 URL 只是 URI 的一種。 典型 URL 的格式如下所示。下面提到的 URL 編碼，實際上應該指的是 URI 編碼。