Mirochiu's coding note

這篇是寫一個簡單網頁， 搭配前一篇: GAS小程式:影像代理伺服器 cowork-with-ai ，就能顯示DataURL的影像

 在code裡面引用setGlobalOptions 函數來設定 const { setGlobalOptions } = require ( "firebase-functions/v2" ); setGlobalOptions ({ region : "asia-east1" });

 

Imgur可以使用Client ID就上傳圖檔，官方上傳圖片的文件說明在 這裡 ，這裡分享簡易的圖片上傳頁，上傳Imgur後得到的圖片網址就在回應的data.link中。 那該如何取得你的Client ID? 

 這裡簡短分享一下html5開圖檔並預覽的功能

  畫線 const ctx = canvasEle . getContext ( " 2d " ); ctx . strokeStyle = color; ctx . lineWidth = width; ctx . beginPath (); ctx . moveTo (x, y); ctx . lineTo (x1, y1); ctx . stroke (); ctx . closePath (); 畫矩形 const ctx = canvasEle . getContext ( " 2d " ); ctx . strokeStyle = color; ctx . lineWidth = width; ctx . strokeRect (x, y, w, h); 畫橢圓 const ctx = canvasEle . getContext ( " 2d " ); ctx . strokeStyle = color; ctx . lineWidth = width; ctx . beginPath (); const wrad = w / 2.0 , hrad = h / 2.0 ; ctx . ellipse (x + wrad, y + hrad, wrad, hrad, rotate, 0 , 2 * Math.PI); ctx . stroke (); ctx . closePath (); 畫字 參考:  https://stackoverflow.com/questions/14836350/ const ctx = canvasEle . getContext ( " 2d " ); ctx . font = ` ${ fontStyle } ${ size } px ${ fontFace } ` ; const metrics = ctx . measureText (text); ctx . fillStyle = color; // 讓文字位...

有感於一陣子沒碰js就會忘記陣列操作方法,這裡再次筆記複習一下 找陣列中的元素 indexOf,lastIndexOf,和find,findIndex以及includes都可以找元素,不同點在於找元素的方法與回傳的值不同 indexOf是給予元素值,回傳第一個吻合的元素所在位置,若-1就是找不到吻合的元素 selectedIds . indexOf ( obj . id ) === - 1 lastIndexOf就是反過來找而已。 這裡要注意的就是indexOf和lastIndexOf是用===來判斷是否吻合元素，所以如果你是要判斷物件就需要用到find.findIndex find是給予一個函數,用來找第一個吻合的元素本身;若null就是找不到吻合的元素 const selected = steps. find ((s) => id === s . id ); findIndex跟find參數一樣,只是回傳吻合元素的所在位置 includes是給予元素值,用來確認元素是否在陣列中 selectedIds . includes ( s . id ) 新增元素 增加元素到陣列後方 有push和concat兩種選擇, 前者是加入原本的陣列,後者是產生新的陣列 selectedIds . concat ( obj . id ) 然後我也滿常偷懶像下面這樣做 []. concat ( obj . id ) [obj.id] 以前寫C習慣則是都會寫下面這樣 let array = null ; if (null === array ) array = []; array . concat ( obj . id ); 關於哪些陣列方法是回傳新陣列,哪些是修改舊有的可以看由tsuifei所整理的" JS 從陣列 Array 尾端新增元素的 push() "中的圖片一覽無遺。 更新元素 可以用forEach,map,reduce去遍歷元素 forEach是對原本的陣列處理 map是更新元素並產生新陣列 const updated = origin . map ((o) => o . setOffset (x, y)); reduce則是可以在遍歷時增加/減少元素,簡單來說就是forEach,map都可以用redu...

因為業主希望有免費解決方案，所以就推薦了直接用google form當作資料蒐集的後端伺服器。不過說真的，這作法有很大的侷限性，在於資料的驗證與反饋上，業主覺得免費就好這些沒關係的。

使用form.submit()沒有觸發form的onsubmit事件處理

在一些純前端的環境中，如Github page和Apps Script，和我們依然會想用URL中parameter方式來完成一些事情，這時候就會需要URLSearchParams的幫忙！

像是LINE登入時會使用get來轉移到我們的網站中，若是我們後端沒有處理好，這時候就只能用前端的javascript程式來處理。

這裡分享使用jQuery unblock UI搭建簡易訊息視窗。 1. 排版設定了id為err_box與id為msg_box這兩個div，用來讓unblock顯示訊息用的。 2. 引用unblock ui跟jquery 3. ublk是隱藏顯示的block ui；blk是開啟一個預設顯示'loading'的block ui。 4. err_msg和msg_box就是方便函數，給定訊息就會顯示錯誤視窗或是訊息視窗 < div id = "err_box" style = " display:none;cursor:default;background-color:red " > < h1 class = "m" ></ h1 > < button class = "y" > 確認 </ button > </ div > < div id = "msg_box" style = " display:none;cursor:default " > < h1 class = "m" ></ h1 > < button class = "y" > 確認 </ button > </ div > <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js'></script> <script> function ublk () { ...

  標題列就是用vertical-align: middle來垂直置中, 以CSS來指定

  寫法1.把js處理函數名稱寫在html中 缺點, 如果你的框架是template view分離就會很難控制 < form onsubmit = " submitHandler ( event ); " > < label for = "normal_text" > 一般文字欄位 </ label > < input id = " normal_text " type = "text" name = "my-text" value = "12345" /> < button type = "submit" > 傳送 </ button > </ form > < script > function submitHandler ( e ){ console . log ( '收到的事件' , e ); e . preventDefault (); //避免HTML的預設傳送行為發生 console . log ( '傳送表單的處理往下寫' ); } </ script > 寫法2.給定id 缺點 id 需要寫死,處理函數無法直接套用在不同的html網頁中(你如果id都寫一樣當然沒問題) < form id = "my-form" > < label for = "normal_text" > 一般文字欄位 </ label > < input id = "normal_text" type = "text" name = "my-text" value = "12345" /> < button type = "submit" > 傳送 </ button > </ for...

最近遇到需求想要在網頁上加入按一下複製內容到剪貼簿的功能，中間還不小心遇到小雷點分享一下。 我建構一個簡單的文字input放置要給使用者拷貝的資料，以及一個按鈕讓使用者點選複製到剪貼簿

因為最近學弟有需求想要在網站上加入像APP一樣的下方導覽列，所以就在幫忙找方法處理。 以下參考 w3school的下方導覽列範例  ，並為了QDM商店的設計界面下面我們會做一點修改。

這篇示範一個實體拖曳圖片檔案顯示在網頁上。 使用上一篇: HTML5: div內文字置中與多class結果展示 ，設定一個拖曳區域。加入drop事件，使用dataTransfer取得拖曳的檔案路徑。再設定img標籤的src完成顯示圖片的功能

最近在做RN升版時發現Dayjs升到1.10.7有parse時間字串的問題，跟1.9版結果不同。所以我只能升級到1.9的最新版。 前文

最近想要移植C的一些64bit資料處理的小程式到JS上，就遭遇這個問題位元指令32bit的問題。實際上JS所有的位元操作(bitwise operation)，諸如:左移(left shift)、右移(right shift)、OR、AND、XOR等都是只能用在32位元內操作。

Promise.all及Promise.race使用筆記 all和race是一組工具函數，是幫助我們想要多個非同步工作同時進行的，使用方式是呼叫Promise.all(給Promise陣列)和Promise.race(給Promise陣列)。 all和race的差別是all會等待所有個Promise都resolve才會回傳陣列，而race是當有一個Promise已經resolve就會回傳結果。不過值得注意的是，兩著都是若有一個reject就會被中斷並返回reject的結果。 在上一篇中提到Promise和async可以混用，這裡馬上就用到，我們可以使用await等待Promise.all和Promise.race的結果，然後再對每個結果進行分析，下面會提供一個簡短的假想範例碼。