#JavaScript 所有符合的文章
前端設計應用,豐富圖片的可點擊區域與內容更新 (Image Map & SVG)
如何在一張圖片,創造出不同連結的點擊區域,達到例如地圖位置、物件連結的效果?又如何讓圖片具有互動性,藉由使用者的輸入來改變圖片?
Working With Json 使用各種程式語言玩轉 JSON 資料格式
說明讀取、使用、分析與寫入 JSON 的各種程式語言方式以及 CLI 工具的使用,讓這個資訊科技圈風靡的資料格式,助你一臂之力 😀
JavaScript Coding CheatSheet 80/20 法則的應用
筆記 JavaScript 開發前一定要複習的重要物件操作技巧,筆記精要的整理出 20% 的語法與功能,能夠活用在 80% 的使用情境。能夠減少開發時對於語法的生澀與卡卡的感覺,讓功能的簡潔實踐想得到,也活用原生語法特性做得出來 😉
JavaScript OnHashChange / Get Hash tag value
說明如何藉由 Vanilla JS 偵測 URL Hash 變化進行頁面渲染 (iframe load),從而實現迷你版本的 Hash Tag Router 路由機制 😎
Parcel 零配置打包工具入門教學 | 當代網頁開發沉浸心流之術 🐱👤
相較於 Webpack 需要繁複前置設定的缺點,同樣是打包工具的 Parcel 優點在於可以零配置馬上使用,同時不同於 WebPack 需要準備相關的 Loader,使用 Parcel 已經有內建對於 SCSS、JS Modules 以及 Babel 的處理,同時提供內建的 Dev Server 簡直是小型整合工具。對於延伸進階功能的需求,也可以透過 Plugins 來擴充。
如何快速取得數值 GroupBy 結果 (CountIf, Group-Object, Counter)
說明 SQL 常用的 Group By 資料操作,如何以其他程式語言來達到同樣的功能。包含以 Excel, PowerShell, Python (Pandas) 以及 JavaScript 作為示範 😉
CSS Properties Dom Notation (camelCase & kebab-case)
列出所有的 Chrome 瀏覽器所支援的 CSS Properties。
前端開發不能錯過的 Json Server
前端開發的路上你並不孤單,當需要後端 Rest API 的支援時,不用自己用 Asp.net Web API、Express、Django、Ruby on Rails 等後端框架慢慢刻,不僅需要額外的學習門檻,也需要不少的投入時間。Json Server 就是你在前端開發上不可或缺的好夥伴。藉由執行本機端的 server service,將 json file 直接變為 Rest API Service,讓前端開發環境更為方便。
ES20XX Modern JS 新語言特性筆記 | Closures
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來,JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash),也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。 本篇筆記為介紹 JavaScript 令人迷惑的概念 Cloures。
JavaScript Array 的瑞士刀函式 | splice
筆記從 JavaScript 令人迷惑的 slice, split 以及 splice。其中 splice 可以稱 JavaScript 中的瑞士刀函式方法,足抵數個函式方法所能提供的功能。藉由 splice 不論是要增加陣列元素、刪除特定元素,甚至是要將 Array 切段也沒有問題。
ES20XX Modern JS 新語言特性筆記 | JavaScript Cookie & LocalStorage
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來,JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash),也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。 介紹 Modern JS 如何操作 Cookie 以及 Html 5 所提供的 LocalStorage API,用以將資訊保存在用戶端。
Vanilla JavaScript | Get DOM Elements (get anchor and image with querySelector)
筆記 JS 如何使用 JS 原生語法取得 DOM 元素,包含介紹 GetElementById, GetElementByName, QuerySelector, QuerySeletorAll ,並且介紹如何應用這些語法,提供將網頁上所有的 Anchor Link 擷取的解決方案 😎
Frontend Web Developer Glossary 前端開發工具詞彙表
紀錄前端開發常見的各式詞彙表、新興工具名稱,讓這個每 18 至 24 個月學習難度都會倍增的領域能夠更平易近人。
ES20XX Modern JS 新語言特性筆記 | Modules (ES6 Modules)
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來,JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash),也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。
ES20XX Modern JS 新語言特性筆記 | Spread, Rest & Destructuring
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來,JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash),也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。
ES20XX Modern JS 新語言特性筆記 | Array
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來,JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash),也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。
加密 | 編碼 | 雜湊 🔐 crypto-js 使用方法以及與 Vue CLI 結合應用
筆記如何使用 crypto-js,用以在前端進行資料的加密、編碼與雜湊。本次的說明是以 Vue CLI 結合應用,並設計了一個線上使用 Client 端資源進行 加密、編碼與雜湊的服務。
ASP.NET MVC 最適配的 8 個前端元件 豐富應用系統設計
ASP.NET MVC 5 預設使用 Bootstrap 3 作為 CSS Framework,提供了網頁 Grid Layout 設計、RWD 設計以及各式方便的 Components 及 Helper。但仍有部分的開發需求沒有辦法被解決,而秉持 DRY 的精神,擴充使用第三方元件以解決開發需求,就是本文的目的。
如何在 ASP.NET MVC 中使用 javascript, jQuery, Ajax 來豐富互動與呈現 (AjaxHelper)
筆記關於如何在 ASP.NET MVC 中使用 , ,增進互動視覺效果的體驗。