公告版位
1. 發現有錯誤, 請留言告知. (或者你 '覺得' 不對也行)
2. 用字措辭不當, 請留言告知.
3. 有看沒有懂? 幫到忙也好, 幫倒忙也罷, 總之留個言吧.
目前分類:JavaScript (6)
- Oct 28 Mon 2024 18:53
asm51 test
- Sep 30 Mon 2024 17:54
JavaScript: 客製化 highligh.js
由於我在 pixnet 部落格裡撰寫程式及網頁技術的文章, 給程式上色這個需求一直都是使用套件 highlight.js. 不過有幾個地方總是不那麼滿意: 像是用於 linux 指令或批次檔的 <code class="language-bash"> 或者用於 Windows 命令提示字元 (CMD 指令或批次檔) 的 <code class="language-dos">, 它們總是會少幾個指令沒有上到色. 下面幾個方法是我這幾年來自己琢磨出來的修正 bash 和 dos 這二類程式區塊上色問題的辦法, 在此分享給有需要的朋友.
方法一: 直接修改上色的部份
這個方法適合用於補足少量 highlight.js 沒有上色的部份. 這是最直觀的方法, 而且不限制被上色的語言, 我們只要將想要上色的部份用 <span> tag 括住, 並加上需要的 style 即可. 或者也可以用預設 display 為 inline 的元素 (<b>, <i>...等) 修改字型變化, 請看下例的 HTML 上色片斷:
一般文字 <i style="color:red">text_to_use_red_color</i> 一般文字
一般文字 <span class="hljs-built_in">text_to_use_as_built_in</span> 一般文字
- Sep 22 Thu 2016 00:55
JavaScript: 如何轉換 Regular Expression 變成 RegExp() 的參數
本篇假設你已經學過一些正規表示式 (regular expression), 如果你對 regular expression 完全沒概念, 或者有些式子看不懂, 就要麻煩你先讀一下 JavaScript 的 regular expression 的說明.
在運用 regular expression 時, 表示式中如果有特殊義意的字元 (以下簡稱特殊字元) 需要跳脫其特殊義意回歸為不具備特殊義意的字元時, 必需在該字元前面加上脫逸字元\. 這樣已經夠麻煩了, JavaScript 還支援了二種生成 regular expression (RegExp) 物件的方法, 二個方法用的表示式字串還長得不一樣, 這使得多數人在第一次運用 regular expression 時經常時, 錯! 錯! 錯! 一錯再錯, 就是試不出來, 最後只好放棄.
這二種方法一種是表示式固定已知的字面 (literal) 表示式; 另一種則把表示式轉換為字串, 可以進行字串處理, 處理完後再拿來建立 RegExp 物件:
- Aug 02 Tue 2016 14:02
Javascript: 移除 styleSheets 中不合適的樣式設定
前言
會寫這一篇, 說真的有點無奈, 並非針對痞客邦惡搞來的 (畢竟他提供了一個免費的部落格, 讓我不用花錢就有個人網站, 高興的時候隨時可以發表一下). 寫這一篇純粹只是想要記錄及分享如何克服痞客邦網站上一些不是那麼恰當的設定而已.
本文
事情是這樣子: 我寫了一篇有關 "UART 接收同步機制及鮑率誤差計算" 的貼文, 文章中有些地方用到了分數 (幾分之幾), 剛開始就很直覺的只用 '除號' 來表示 (如: 7/16), 也沒想過到底好不好? 有什麼優缺點? 反正也不會有人有意見.
後來在一個偶然的機會下找到了一個專門用來展現 (render) 數學式的 javascript library: MathJax, 想說就拿上面那一篇來小試一下, 看看效果如何? 果然在 PC 版本一切如預期效果不錯, 分子分母上下分開一目了然. 當下以為一切搞定, 很放心的就 "儲存文章" 把修改的部份發表了出去.
- Aug 07 Fri 2015 10:27
Tryit Editor 雛型 (HTML/CSS/Javascript 測試程式)
- Jul 22 Wed 2015 16:15
使用 Javascript 修改 stylesheet
下面範例中的 setStyleRule() 可以用來動態增加 stylesheet 中的項目(selector), applyClass() 則可以用來為物件刪除/附加新的 CSS Style Class (只能是 class).
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="ext_style.js"></script>
<script type="text/javascript">
function fnInit() {
setStyleRule("", "#id1", "color:blue;");
}
window.addEventListener('load', fnInit);
</script>
</head>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
載入的 javascript "ext_style.js" 檔案內容如下: