【JavaScript】change event

説明 <input>狀態改變時→觸發事件 【例】下拉式選單:變更選項→觸發事件 【例】核取方塊:勾選 / 取消勾選→觸發事件 label Choose a color select#sel(name=”colors” onchange=”selShow()”) option(value=”Nothing”) Select One… option(value=”red”) RED option(value=”blue”) BLUE option(value=”green”) GREEN #changeStatus function selShow(){ changeStatus.textContent=`You selected ${sel.value}` } Display Choose a color Select One…REDBLUEGREEN

【JavaScript】keydown and keyup event

説明 keydown event:鍵盤按下時→觸發動作 keyup event:鍵盤按下後鬆開→觸發動作   p Press any key p#pressStatus window.addEventListener(“keydown”, function(e){ pressStatus.textContent=`Key code of ${e.keyCode} is pressed`; }) window.addEventListener(“keyup”, function(){ pressStatus.textContent=`Now you left the key` }) Display Press any key

【JavaScript】focus and blur event

説明 focus event:聚焦(點選到)該元素→觸發事件 ※可以用滑鼠點選觸發focus,某些情況下也可以用鍵盤選取(Tab鍵),觸發focus blur event:focus的相反,離開該元素後→觸發事件 input#getText(type=”text”) button(onclick=”getFocus()”) Get focus button(onclick=”loseFocus()”) Lose focus function getFocus(){ getText.focus(); } function loseFocus(){ getText.blur(); } Display Get focus Lose focus

【JavaScript】mouse event series

説明 mousedown:滑鼠按下去的瞬間→觸發事件 mouseout:滑鼠離開→觸發事件 mouseup:滑鼠按下、離開的瞬間→觸發事件   p Try to draw it ↓↓ canvas#canvas(width=”300″, height=”300″) #canvas width: 300px height: 300px border: 1px solid #000 let isDrawing=false; let lastX=0; let lastY=0; const ctx=canvas.getContext(“2d”); function draw(e){ if(!isDrawing){ return; } ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.strokeStyle=”#000000″; [lastX, lastY]=[e.offsetX, e.offsetY]; ctx.stroke(); } //滑鼠按下→開始畫圖,計算起始座標 canvas.addEventListener(“mousedown”, (e) => { isDrawing = true; [lastX, […]

【JavaScript】mousemove event

説明 滑鼠移動→觸發事件 #screenBox Hover me #locate #screenBox width: 300px height: 200px background-color: #eee text-align: center line-height: 200px color: rgba(0,0,0,0.5) screenBox.addEventListener(“mousemove”, function(e){ locate.textContent=`Mouse locate is (${e.offsetX}, ${e.offsetY})` }) Display Hover me

【JavaScript】Parent, Children, Silbing

選取母元素 #parentBox .child A Box .child B Box #parentBox width: 500px height: 500px background-color: #eee text-align: center line-height: 500px .child width: 100px height: 100px display: inline-block line-height: 100px background-color: #beddcd const childs=document.querySelectorAll(“.child”); childs[0].parentNode; //會選到parentBox 選取子元素 ※HTML, CSS 沿用上例 children Method 是 NodeList 形式(即便只有一個子元素),所以要向使用 querySelectorAll 的時候一樣,指定 index parentBox.children[0]; //會選到A Box 選取相鄰元素 ※HTML, CSS 沿用上例 Native JavaScript […]

【Git】忽略檔案

目的 更新版本的時候,讓某些檔案不要被更新上去(忽略更新) 方法 在本地數據庫新增【.gitignore】檔案。 之後用文字編輯器(Sublime / notepad)開啟【.gitignore】, 並且輸入指令。 ※輸入gitignore忽略指令的方法: ①用文字編輯器打開【.gitignore】 ②輸入指令 ③存檔 $ touch .gitignore //在選定的數據庫資料夾裡面,新增忽略指定檔案 【.gitignore指令】忽略檔案 直接輸入要忽略的檔案 [例]要忽略index.html這個檔案 index.html 【.gitignore指令】忽略特定類型的所有檔案 米字號【*】+副檔名 [例]忽略所有html檔案 *.html 【.gitignore指令】忽略資料夾 正斜線【/】+資料夾名稱 [例]忽略css這個資料夾 /css