【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 […]

【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 超連結 click it and open the URL ③ON+EVENT名稱:用HTML直接呼叫 function 基礎範例 HTML用法:on+event名=”函式名()” ※如果要呼叫event的話,需要使用這種形式:on+event名=”函式名(event)” 【例如】click event & makeItBigger function →onclick=”makeItBigger()” //這個東西放在HTML tag裡面 //記得要另外寫makeItBigger這個函式 【上述用法等同】 id.eventListener(“click”, makeitBigger()); 滑鼠相關監聽事件 click event:滑鼠按下→觸發事件 mousemove event:滑鼠移動→觸發事件 […]

【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 Ckecked Status

【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日 女 葷食 […]

【JavaScript】Contains Method

説明 判斷節點(Node)裡面有沒有含有檢索的內容。 若有,回傳true 若無,回傳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 […]

Facebook Pixel

官方文件 基本用法【PageView】 轉換率追蹤【Purchasing Event】 事件與參數用法【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″ /> […]

【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

條件 內元素絕對定位(所有) 外元素相對定位 目標元素指定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 […]