文章列表 頁1

教學

[Alpine.js] 魔法屬性

關於 Alpine.js 中魔法屬性的用法。

教學

[Alpine.js] 指示詞 (Directive)應用之二

Alpine.js 指示詞 (Directive)的應用之二。

教學

[Alpine.js] 指示詞 (Directive)應用之一

說明 Alpine.js 可用的指示詞 (Directive)用法。

教學

[Alpine.js] 極輕量的 javascript 框架,初始化教學

這幾年三大框架(React, Vue.js, Angular.js) 席捲前端界,不過如果為了寫一些小功能就要去使用這些框架的話總是有點大材小用,於是像 Alpine.js 這種打著極簡 js 風格的框架就這樣誕生了。

教學

[PHP] 遞迴函式

php 使用遞迴函式的方法。

教學

[PHP] Session 使用說明- 建立與刪除 Session

之前介紹過在 php 使用 cookie,不過 cookie 比較有安全性上的問題,加上可以儲存的內容有限,所以這邊來介紹另一個也可以用來記錄一些資訊的 session。

教學

[PHP] Cookies 使用說明- 建立與刪除Cookie

cookie 是用來在網站內溝通資料的方法,他存在網站和瀏覽器之間,也就是即使是同一台電腦,只要是不同瀏覽器就無法存取同一個 cookie。

教學

[CSS] counter- 讓 css 幫你計數

來講一個有趣的 CSS 屬性,這個可以幫我們在各種 HTML 元素加上計數的功能,要使用的話首先必須要像 ul, ol 和 li 的關係一樣要有子母的元素,像這樣:

教學

[CSS] 當畫面捲動到超過畫面時讓元素固定在頁面某處- position: sticky

做網站有一個常見的需求是當我們把內容捲動到超過畫面時,希望讓某個區塊固定在畫面上某處,以往我們可以使用 js 偵測頁面捲動到元素時設定 position: fixed 來固定,不過這個畢竟是用 js 搭配 css,第一個會有可能有延遲的狀況,另一個則是需要再調整樣式,不過在 CSS3 後來有 position: sticky 之後,就方便多了。

教學

透過 Google Apps Script 抓取 Google 試算表資料

Google 試算表是一個很方便的工具,讓我們可以在線上使用類似 excel 的功能,還可以分享給其他人協作,而這邊我們要來講的就是透過 Google Apps Script 讀取 Google 試算表的資料,讓我們即使不用資料庫也能更新網頁資料。

教學

使用 moment.js 製作計算倒數時間的功能

moment.js 是一個滿老牌的跟時間有關的 js 函式庫,如果在網站上有需要做倒數功能的話,也可以考慮使用它延伸的 plugin countdown.js 來製作,這邊講一下做法。

教學

透過 js 或 jQuery 取得 HTML data-* 的值

介紹一下如何使用 js 與 jQuery 取得 data-* 的值。

教學

水平線 hr 標籤的樣式化方法

hr 是 html 裡面用來製作水平線的標籤,我們也可以用 css 來樣式化,不過有點特別的是想要樣式化的話只要直接修改 border 就可以了。

教學

CSS 的列表樣式(list-style-type)設定與 ::marker

透過使用 ::marker 來調整列表的樣式。

教學

使用 CSS 的 mix-blend-mode 製作隨滑鼠移動改變樣式的效果

使用滑鼠移動與 CSS 的 mix-blend-mode 來製作隨滑鼠移動的變換樣式效果。

教學

javascript 的立即呼叫的函式表示式-Immediately Invoked Functions Expressions(IIFE)

在程式裡面看到 () 就會自動執行,也就是在 function 後面加上 () 後就會自動執行那個 function,這個就叫所謂的 Immediately Invoked Functions Expressions(IIFE) ,中文一般稱為立即呼叫的函式表示式。

教學

註銷(uninstall)service worker

如果要註銷(uninstall)PWA 的 service worker,可以用以下的方法。

教學

javascript ++i 和 i++ 的差別

在 javascript 裡面使用 ++i 或 i++ 都可以代表原始值加一,不過還是有一點差別。