【JavaScript】滑鼠相關屬性

滑鼠相關屬性

clientX & clientY

定位基準:視窗長&寬
視窗長&寬→window.innerHeight / Width
※視窗的範圍:瀏覽器的畫面,扣掉上方網址列的部分。
如果把瀏覽器畫面,視窗也會跟著變小

▼示意圖▼

intro.addEventListener("mousemove", function(e){
   console.log(e.clientX, e.clientY);
 }
)

offsetX & offset Y

定位基準:目標元素的長&寬
目標元素的長&寬:id.clientHeight / Width

▼示意圖▼

intro.addEventListener("mousemove", function(e){
   console.log(e.offsetX, e.offsetY);
 }
)

pageX & pageY

定位基準:整個頁面的長&寬
整個頁面的長&寬:document.body.clientHeight / Width
※【沒設定頁面寬的情況】瀏覽器的寬度拉小,整個網頁頁面的寬度也會跟著變小(被壓縮了)
※【有設定頁面寬的情況】瀏覽器的寬度拉小,整個網頁頁面的寬度不會跟著變小(會出現橫向的卷軸)

▼示意圖▼

intro.addEventListener("mousemove", function(e){
   console.log(e.pageX, e.pageY);
 }
)

screenX & screenY

定位基準:電腦畫面的長&寬
電腦的長&寬:screen.height / width
※電腦整個畫面:上方有包含網址列,下方有包含工具列
※跟clientX / Y 的差別:定義的外圍是電腦畫面,所以即便拉小瀏覽器視窗,也不會有任何影響

▼示意圖▼

intro.addEventListener("mousemove", function(e){
   console.log(e.screenX, e.screenY);
 }
)

【JavaScript】load事件 網頁打開後馬上觸發

説明

網頁一載入→觸發事件
【例】表單填入網頁:頁面一打開,焦點就對準輸入格。

範例

寫法一

監聽load事件

input#input(type="text" placeholder="input something...")
window.addEventListener("load", function(){
 input.focus();
})

寫法二

使用window.load

window.onload=input.focus();

Display

【JavaScript】Event Listener 監聽事件一覽

用法

①透過特定event觸發動作

用法基礎篇

目標物.addEventListener("特定的event", 
 function(){
  //這邊寫要觸發的動作
 }
)

②操控目標元素完成某動作

用#button按鈕操控,讓超連結#theURL被點擊

a#theURL(href="ianchen.thisistap.com") 超連結
br
button(onclick="openURL()") click it and open the URL
//onclick的用法參見下方
function openURL(){
 theURL.click();
}

Display

超連結

③ON+EVENT名稱:用HTML直接呼叫 function

基礎範例

HTML用法:on+event名=”函式名()”
※如果要呼叫event的話,需要使用這種形式:on+event名=”函式名(event)”

【例如】click event & makeItBigger function
→onclick="makeItBigger()" 
//這個東西放在HTML tag裡面
//記得要另外寫makeItBigger這個函式

【上述用法等同】
id.eventListener("click", makeitBigger());

滑鼠相關監聽事件

  1. click event:滑鼠按下→觸發事件
  2. mousemove event:滑鼠移動→觸發事件
  3. mousedown event:滑鼠按下去的瞬間→觸發事件
  4. mouseout event:滑鼠離開→觸發事件
  5. mouseup event:滑鼠按下、離開的瞬間→觸發事件

打字相關監聽事件

  1. focus event:聚焦(點選到)該元素→觸發事件
    ※可以用滑鼠點選觸發focus,某些情況下也可以用鍵盤選取(Tab鍵),觸發focus
  2. blur event:focus的相反,離開該元素後→觸發事件
  3. keydown event:鍵盤按下時→觸發動作
  4. keyup event:鍵盤按下後鬆開→觸發動作
  5. input event:輸入文字→觸發動作

其他監聽事件

  1. transitionend event:漸變結束後→觸發事件
  2. change event:<input>狀態改變時→觸發事件
    【例】下拉式選單:變更選項→觸發事件
    【例】核取方塊:勾選 / 取消勾選→觸發事件

 

【JavaScript】input相關Method

value

偵測文字輸入框的內容

input#input(type="text")
br
#show
window.addEventListener("keyup", function(){
 show.textContent=`What you input is "${input.value}"`;
})

Display

What you input is

checked


監測核取方塊被點選的狀態。並且傳回布林值

input#checkbox(type="checkbox")
br
p#ckeckStatus
btn.addEventListener("click", function(){
 ckeckStatus.innerHTML=`ckecked status: ${checkbox.checked}`;
})

Display


【EXCEL】PivotTable 樞紐分析表

説明

將清單形式的資料整理成表格,
可以自訂縱軸與橫軸的欄位。

範例:研討會人數統計

原始資料名單

場次 負責業務 參加者姓名 更新日期 性別 素食 / 葷食
台北 A組 Mary 9月23日 素食
台中 B組 Moko 9月23日 素食
高雄 B組 Cherry 9月23日 素食
台北 A組 Apple 9月24日 素食
台北 A組 Banana 9月25日 素食
台中 B組 Grape 9月25日 素食
高雄 C組 Vegetable 9月25日 葷食
高雄 A組 Blue 9月25日 葷食
台中 A組 Sky 9月26日 葷食
台中 C組 Ocean 9月26日 葷食
台北 C組 Autumn 9月26日 葷食

建立樞紐分析表步驟:

    1. 選取資料範圍
    2. 標籤塊【插入】→樞紐分析表→確定
    3. 本次分析:場次與負責業務的人數相對關係
    4. 【場次】拉向列方格
    5. 【欄位】拉向欄方格
    6. 【參加者姓名】拉向値方格

※名單更新→同步更新樞紐分析表的資料

EXCEL的樞紐分析表無法即時同步更新(Google Sheet的就可以)
但是,名單更新後,可以手動點選以下路徑,更新樞紐分析表資料

樞紐分析表工具→標籤塊【分析】→重新整理

範例:業績報告(使用加總功能)

原始資料名單

日期 訂單號 客戶 産品 數量 金額
9月23日 A0001 Bank Banana 1  $        1,000
9月23日 A0002 Bank Apple 10  $        5,000
9月23日 A0003 Bank Banana 3  $        3,000
9月24日 A0004 Bank Banana 5  $        5,000
9月24日 A0005 Bakery Apple 3  $        1,500
9月26日 A0006 Bakery Banana 1  $        1,000
9月26日 A0007 Bakery Apple 1  $            500
9月26日 A0008 School Apple 1  $            500
9月26日 A0009 School Apple 2  $        1,000
9月26日 A0010 School Orange 1  $        3,000
9月26日 A0011 School Orange 3  $        9,000
9月29日 A0012 Council Orange 5  $      15,000
9月29日 A0013 Council Mango 1  $      10,000
9月29日 A0014 Council Mango 5  $      50,000

建立樞紐分析表:分析客戶、産品的銷售金額關係。

  • 【産品】拉向列方格
  • 【客戶】拉向欄方格
  • 【金額】拉向値方格
  • ※點選樞紐分析表儲存格→右鍵→摘要値方式→加總

 

【JavaScript】Contains Method

説明

  1. 判斷節點(Node)裡面有沒有含有檢索的內容。
  2. 若有,回傳true
  3. 若無,回傳false

範例

#p.hi 123
console.log(p.classList.contains("hi"));
//true

進階:防止選取子元素

母選單設定點選→觸發子選單展開・收合的function,但因為子選單包在母選單底下,所以在子選單打開的狀況下,點選子選單內容,會觸發function,造成子選單收合

解決方法:在function裡面增加contains條件(選取子選單的class),防止子選單觸發

.nav
 ul
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
.second
 max-height: 0px
 overflow: hidden
 transition-duration: 0.5s
 
.open
 max-height: 100px
// if(e.target.classList.contains("list02")==true) return;
// // 讓他不要選到children
const firsts=document.querySelectorAll(".first");

firsts.forEach(first => first.addEventListener("click", function(e){
 //讓他不要選到children
 if(e.target.classList.contains("not-choose")==true) return;
 this.children[0].classList.toggle("open")
 
 
}))

Display

Facebook Pixel

官方文件

  1. 基本用法【PageView】
  2. 轉換率追蹤【Purchasing Event】
  3. 事件與參數用法【Event & Parameter】

範例

基本用法:導入PageView

<script> 
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? 
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; 
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; 
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, 
document,'script','//connect.facebook.net/en_US/fbevents.js'); 
fbq('init', '這邊放入FB頁面的ID'); 
fbq('track', 'PageView'); 
</script> 

<noscript> 
 <img height="1" width="1" style="display:none" 
src="https://www.facebook.com/tr?id=這邊放入FB頁面的ID&amp;ev=PageView&amp;noscript=1" /> 
</noscript>

進階用法:轉換率追蹤

<script> 
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? 
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; 
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; 
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, 
document,'script','//connect.facebook.net/en_US/fbevents.js'); 
fbq('init', '這邊放入FB頁面的ID'); 
fbq('track', 'PageView');  
fbq('track', 'Purchase', {currency: '這邊放幣值', value: 這邊放金額}); 
//物件參數還可以設其他的,但是上面2個是必須指定。
//詳細參考事件與參數用法 
</script> 


<noscript> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=這邊放入FB頁面的ID&amp;ev=PageView&amp;noscript=1" />  //↓如果有2個事件的話(例如本例),就要指定2組img tag
<img height="1" width="1" border="0" alt="" style="display:none" 
src="https://www.facebook.com/tr?id=107593379985738&amp;ev=Purchase&amp;cd[value]=這邊放金額&amp;cd[currency]=這邊放幣值" />  
//【&amp;】是&的轉換字元,用來連結Purchase事件的物件資料。
//因為本例只有2組物件參數,所以用了一個&amp;連結彼此
//若使用更多物件參數,就需要追加&amp;連接
//用法請參考轉換率追蹤 </noscript>

除錯方法

  1. 準備好FB Pixel程式碼
  2. 下載Chrome外掛程式:Facebook Pixel Helper
  3. 用CODEPEN打開一個PEN,把程式碼貼在HTML的地方
  4. 用Facebook Pixel Helper檢查程式碼有沒有成功執行(成功會有綠色的勾勾)

 

【HTML】ruby tag 注音表記

説明

顯示國字的注音(或是日文的假名)

範例

基本用法

  • 文字主體ーrb tag (ruby body)
  • 注音標示ーrt tag (ruby text)
ruby
 rb 木霊 //文字主體
 rt こだま //注音標示

Display

木霊こだま

跨瀏覽器用法

有瀏覽器無法讀取ruby tag時,可以使用以下方法解決

  • rp tag (ruby parentheses)包覆rt tag
ruby
 rb 木霊
 rp (
 rt こだま
 rp )

Display

木霊(こだま)

【CSS】z-index

條件

  1. 內元素絕對定位(所有)
  2. 外元素相對定位
  3. 目標元素指定index

※z-index的數值代表優先度。
數字大,表示優先顯示的強度越強(排在前面)
數字小,表示優先顯示的強度越低(隱藏在後面)←反向操作:設負數讓元素被蓋住

範例

沒有設index的情況下,HTML下面的元素會蓋掉上面的元素

.box1
.box2
body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

.
.

 

 

 

 

 

 

綠色方塊的HTML在上面,藍色方塊的HTML在下面。
所以藍色方塊優先顯示,蓋掉綠色方塊

設定z-index,優先顯示目標元素

.box1
.box2
body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 z-index: 1
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

.
.

 

 

 

 

 

 
設定index為1,優先顯示綠色方塊