Category: javascript

JSON UTC 時間轉 yyyy-MM-mm HH:mm:ss 格式本地時間之香草 JavaScript 極簡解法

2023-07-26 10:30 PM

8,372

生活與工作上遇過多次，從後端接到 2023-07-25T23:30:00Z JSON 格式的 UTC 時間字串，new Date('2023-07-25T23:30:00Z') 轉成 Date 物件後，不想為此引用程式庫，如何用原生 API 再轉成本地時間的 yyyy-MM-mm HH:mm:ss ...

Coding4Fun - 為 MS Learn 加上中英文快速切換鈕

2023-07-07 10:37 PM

1,244

使用微軟相關產品、平台時，最權威的參考資料來源莫過 MS Learn 網站。老一輩開發者更熟悉應是它的前前身 - MSDN 文件，MSDN 在 2016 時改版為 docs.microsoft.com，2018 時再更名為 Microsoft Learn，彙集 Microsoft 所有產品與服務相...

HTML Script 載入小技巧：defer 與 async

2023-06-11 08:35 AM

4,838

這篇適合技能停在 jQuery 及 WebForm + AJAX 時代的老人。依我從小學到的傳統概念，要存取 DOM 元素必須把程式寫進 $(function() ) 或 window.onload 事件（二者差別在於前者發生在載入 DOM 後，後者需等圖檔等資源載入完成)以確保程式執行時 DOM...

HTML 單檔文件挑戰 - 內嵌 .js GZIP 壓縮檔

2023-05-28 09:23 AM

2,340

繼續我的 HTML 文件檔計劃。封裝文件檔的另一項重點是把所有內容打包成單一 .html 檔 (高年級同學可能還記得 IE 時代有個 .mht，差不多的概念)，把要引用的第三方程式庫、CSS、圖檔都嵌進 .html 是較可行的做法，若包成 ZIP 閱讀時要在本機解壓縮，應該沒人能接受吧？網頁 HTM...

用 JavaScript 執行 AES 加解密 - 香草口味

2023-05-27 11:53 AM

4,076

最近突發奇想，想將系統查詢結果嵌入網頁匯出成 .html，概念上像 Excel 或 Word 一樣是個文件檔，方便 Email 轉寄、歸檔保存，而採用網頁的好處是免裝軟體，用瀏覽器就能開啟，透過 JavaScript 可實現極佳的互動操作體驗。但我馬上想到一個問題，針對機敏資料，Excel/Wor...

CSS 雜記：父元素未指定高度時 height 100% 無效

2022-11-14 08:40 PM

5,052

學會 CSS Flexbox 時超開心，以為人生從此不必再為佔滿剩餘網頁寬/高度煩惱，豈知還是會踩到小石頭。有個需求是希望 IFrame/DIV 佔滿 TD 全部高度，IFrame/DIV 有設 height: 100%，但因父容器未指定高度時，不會發生效果。用範例解說。table 透過 fle...

JavaScript 小技 - XML 字串縮排顯示與互動檢視

2022-10-27 10:03 PM

1,568

這些年在 JavaScript 處理 XML 的機會愈來愈少，但從事古蹟翻新與維護難免遇到。最近想為老系統增加一個編輯及檢視 XML 的小工具，有兩個小需求：想讓 <textarea> 輸入的 XML 內容依標準縮排規則排版提供可以展開、縮合 XML 節點的互動式 XML 檢視器 ...

JavaScript 範例 - scrollIntoView 實現清單自動捲動

2022-10-04 09:39 PM

4,487

分享一個 JavaScript 小技巧，假設有個很多項目的清單，靠 CSS overflow-y: scroll 啟用垂直捲軸，除了由使用者操作上下捲動，也能用程式控制捲動到指定的一筆嗎？用講的不容易理解，看示範就清楚吧! 在以下展示中，我用 div 當清單容器放入 16 個項目 div，清單高度...

來自微軟官方的 Vue.js 手把手入門教學

2022-09-25 08:03 AM

10,469

隨著微軟擁抱開源，微軟官網出現 .NET/C# 以外的語言教學已不是新鮮事(之前就出過 Python 教學影片)，這回輪到 Vue.js 了! 如果你還不知道 Vue.js 是什麼，這裡簡單科普一下。 Vue.js 是當今(2022 年)的前端三大框架 - VAR (Vue.js、Angular、R...

跨站台設定 Cookie 的另類解法 - window.open()

2022-09-24 12:05 PM

3,044

瀏覽器禁止跨站台 Cookie 傳送是老問題，尤以 IFrame 內嵌跨站台網頁最明顯，在 IE 時代還有「信任的網站」這招大絕，但隨著 IE 走入歷史，加上瀏覽器對於跨站台 Cookie 限制日趨嚴格，這類老寫法用起來愈來愈吃力。先來簡單展示，假設有個設定及顯示 Cookie 的 cookie....

JavaScript 另開新視窗定位技巧 - 開在指定元素位置與完整覆蓋原視窗

2022-09-21 08:42 PM

2,867

大部分的情況下，我們設計網頁只需關心可見元素在網頁文件(document.body)上的座標就好，不需要知道它在電腦螢幕的絕對座標，但有一種情況例外 - window.open()，傳入的 top 及 left 參數會以電腦螢幕為基準。我有個冷門需求，想在指定元素下方用 window.open()...