程式碼上色函式庫 highlight.js

功能 程式碼上色,可以用 syntax 找相關的英文資源 ,這個函式庫可以將部落格的程式碼文字依照關鍵字、註解等上不同顏色。 使用方法 引入 css 與 js 函式庫 依照規範撰寫pre tag 與 code tag 寫進指定 js 碼 ※css有各種style。 各種style展示 查詢對應CDN 一般網頁 ※外引CDN函示庫的方法 引入 js 與 css 函式庫 <head> //引入css,這裡選擇tomorrow style <link rel=”stylesheet” ref=”https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/tomorrow.min.css” /> //引入js <script src=”https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js”></script> </head> 依照規範撰寫 pre 與 code pre tag 裡面包一層 code tag <code class=”程式語言名”> //以寫css碼為例 <pre> <code class=”css”> pre […]

match() 與 test()

功能 兩者都是搭配正規表達式的Method match() 字串.match(正規表達式); //回傳比對出的部分字串結果 //若比對不到東西,則回傳null const str=”apple”; const check=/[a-c]/; str.match(check);//[“a”] test() 正規表達式.test(字串); //有比對到回傳true,沒有則回傳false const str=”apple”; const check=/[a-c]/; check.test(str);//true

setInterval

功能 設定每隔一段時間執行一次動作,可以模擬動畫效果 缺點:只能處理能夠數值化的CSS屬性(width, opacity, scale, rotate等等),不能完成顏色漸變等效果 jQuery animate 高幀率動畫函數:requestAnimationFrame button(onclick=”show()”) click me br br #box show up #box width: 200px height: 100px background-color: #aaffe2 text-align: center line-height: 100px function show(){ //pos是變動的透明度數值 var pos=0; //setInterval(動作, 毫秒)→每隔幾毫秒,執行一次動作 const id=window.setInterval(function(){ if(pos>=1){ //如果pos夠大了,清掉Interval,阻止繼續增加下去 clearInterval(id); pos=0; }else{ pos+=0.1; box.style.opacity=pos; } }, 50) } click me show up

正規表達式

説明 正規表達式,是專門用來處理字串邏輯的條件語法。 常常用在 input 表單上,檢査使用者輸入的内容有沒有符合特定格式。 諸如信用卡號格式驗證,密碼強度驗證等等。 相關方法:match(),test() 語法 宣告正規表達式 正規表達式的前後要各用1個斜線/包起來(有點像字串需要用”包起來)。 const str=”abcde”; const check=/abc/; str.match(cri);//[“abc”] //回傳 被找到的字串 if(str.match(cri)){ console.log(true); //↑通常驗證表單會寫成這個形式,裡面放通過驗證後的動作 }else{ console.log(false) }//true 尋找某區間内文字 設定檢索區間: [a-e] a為開始値,e為終止値。 const str=”apple”; const check=/[a-c]/;//尋找有沒有 a,b,c 這3個字母 //※寫成/[a-c]/g會比較好(下面會説明) //※也可以比對多重區間(下面説明) str.match(check)//[“a”] if(str.match(cri)){ console.log(true); }else{ console.log(false); }//true ←但只有 a 有被找到而已,pple並沒有被找到 /*****注意***** ※這個例子match是寬鬆尋找方法,只要有1個字元被找到,就會跑出true *************/ 尋找全部【/g】 參考這篇文章 一般情況下,match只會1次比對一個字串字元而已,所以回傳値只會吐出第1項符合的字元。 如果要叫他吐出所有,就要使用/g←放在正規表達式的最後面 ※但如果是用 if(str.match(check)) 的話不使用 /g […]

JavaScript event: transitionend

説明 觸發條件:漸變事件結束後。 當指定元素的漸變事件結束後,觸發漸變的listener。 ※可以當作動畫延遲出現效果使用 漸變屬性:propertyName propertyName,漸變改變的CSS屬性 .box2 CLICK IT .box2 width: 300px height: 200px display: flex align-items: center justify-content: center background-color: #c6fffe transition-duration: 0.5s font-size: 20px &:hover background-color: darken(#c6fffe, 45%) document.querySelector(“.box2”).addEventListener(“transitionend”, function(e){ console.log(e.propertyName);//只要漸變一停止,就會回報”background-color”←漸變的CSS屬性 }) 範例 .box .text SHOW UP .box width: 300px height: 200px background-color: #bffce8 display: flex justify-content: center align-items: center transition: background 0.5s […]

CSS first-child last-child

説明 【first-child】選擇在任何父元素下第一個出現的指定元素 【last-child】選擇在任何父元素下最後一個出現的指定元素 範例 first-child p 這是body下第1個p p body之下第2個p .parent p 這是parent下第1個p p parent下第2個p p &:first-child color: #68cccc .parent border: solid 1px #000 Display 這是body下第1個p body之下第2個p ——以下開始parent div—— 這是parent下第1個p parent下第2個p 只要是任何父元素下面的第1個p,都會被選到然後變色 last-child p 這是body下第1個p p body之下第2個p .parent p 這是parent下第1個p p parent下第2個p p &:last-child color: #148282 .parent border: solid 1px #000 Display 這是body下第1個p body之下第2個p ——以下開始parent div—— […]

CSS selector

説明 CSS Selector,用在撰寫CSS文件上的選擇器, 但是同樣也用於JavaScript的querySelector / querySelectorAll。 Greater than selector CSS【>】選擇器:用來選擇直系子元素 ※不是直接的子元素無法被選到 .parent p 這是parent下的直接子元素 .mid p 這是parent下面的mid裡面的子元素(非parent直接子元素) .parent > p color: #68cccc Display 這是parent下的直接子元素 這是parent下面的mid裡面的子元素(非parent直接子元素) ————————————————– 第一行文字是 parent 下面直接的子元素,所以被 > 選到,改變顏色; 第二行字為 parent 下面間接的子元素,無法被 > 選到,維持原本顏色 ※用空格選擇器則兩種情況都能被選到 Attribution Selector 指定的attr條件用[]包住 傳統選擇法:attr[]裡面的雙引號”要加反斜線抵銷(或是裡面的雙引號改使用單引號) ES6選擇法:整個querySelector用反引號`代替雙引號”包住,所以裡面的雙引號”不用加反斜線抵銷 .box(data-color=”red”) A br .box(data-color=”white”) B .box width: 10px height: 10px border: 1px solid […]

JavaScript Array methods 陣列相關方法1

filter()篩選 篩出符合條件的値 用 if 指定條件,若條件為真,return true回傳其値,否則忽略 //共用物件資料 const inventors = [ { first: ‘Albert’, last: ‘Einstein’, year: 1879, passed: 1955 }, { first: ‘Isaac’, last: ‘Newton’, year: 1643, passed: 1727 }, { first: ‘Galileo’, last: ‘Galilei’, year: 1564, passed: 1642 }, { first: ‘Marie’, last: ‘Curie’, year: 1867, passed: 1934 }, { first: ‘Johannes’, last: […]

JavaScript split()

方法 split(),括弧裡面放要來切割的字符,字符要用雙引號””包起來 範例 const arr=[“moko.dog”, “afro.ugly”, “ian.clever”]; const str=”moko.dog”; //split(“切割的符號”) const split=str.split(“.”); console.log(split)//[“moko”, “dog”] //指定參數可以抓到分割後的部位 const [first, last]=str.split(“.”); console.log(first); //”moko” console.log(last);//”dog” //也可以在陣列裡面做分割,但是會變成陣列中的陣列 const arrSp=arr.map(the => the.split(“.”)); console.log(arrSp);//[[“moko”, “dog”], [“afro”, “ugly”], [“ian”, “clever”]] //結合map與[]=split,只抓出的部分資料,並且排成陣列 const firstOnly=arr.map((the) => { const [f, l]=the.split(“.”); return f; }); console.log(firstOnly); //[“moko”, “afro”, “ian”] 進階:shift()  選取第一個切好的字串 【説明】moko.beauty.dog.retriever 這個字串用〔.〕切割,會得出以下結果 output[0]:moko output[1]:beauty output[2]:dog output[3]:retriever […]

JavaScript includes()

説明 檢査陣列是否包含某値 回傳結果為布林値 範例 const arr=[“moko”, “moko123”, “niko”, “mmoko”]; //用includes()檢査有沒有 var moko=arr.includes(“moko”); console.log(moko)//true //結合filter()跟includes(),可以篩出有關鍵字的陣列 var mmoko=arr.filter(the => the.includes(“moko”)); console.log(mmoko)//[“moko”, “moko123”, “mmoko”]