【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

【JavaScript】transitionend event

説明

transitionend event:漸變結束後→觸發事件

#box(ontransitionend="transShow()") hover me
p#transStatus
#box
 border: 1px solid #000
 display: inline-block
 transition-duration: 0.5s
 &:hover
  font-size: 30px
function transShow(){
 transStatus.textContent="Transition is Done"
}

Display

hover me

【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

説明

  1. focus event:聚焦(點選到)該元素→觸發事件
    ※可以用滑鼠點選觸發focus,某些情況下也可以用鍵盤選取(Tab鍵),觸發focus
  2. 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

【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, lastY]=[e.offsetX, e.offsetY];
});

//滑鼠移動→繼續畫圖
canvas.addEventListener("mousemove", draw);
//滑鼠放掉→停止畫圖
canvas.addEventListener("mouseup", () => isDrawing = false);
//滑鼠離開→停止畫圖
canvas.addEventListener("mouseout", () => isDrawing = false);

Display
Try to draw it ↓↓

【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 沒有辦法直接指定相鄰元素(jQuery 的話可以使用sibling()),所以只能先回到母元素→再指定子元素

const childs=document.querySelectorAll(".child");

childs[0].parentNode.children[1]; //會選到B Box

【Git】忽略檔案

目的

更新版本的時候,讓某些檔案不要被更新上去(忽略更新)

方法

在本地數據庫新增【.gitignore】檔案。
之後用文字編輯器(Sublime / notepad)開啟【.gitignore】,
並且輸入指令。

※輸入gitignore忽略指令的方法:
①用文字編輯器打開【.gitignore】
②輸入指令
③存檔

$ touch .gitignore

//在選定的數據庫資料夾裡面,新增忽略指定檔案

【.gitignore指令】忽略檔案

直接輸入要忽略的檔案
[例]要忽略index.html這個檔案

index.html

【.gitignore指令】忽略特定類型的所有檔案

米字號【*】+副檔名
[例]忽略所有html檔案

*.html

【.gitignore指令】忽略資料夾

正斜線【/】+資料夾名稱
[例]忽略css這個資料夾

/css