nodeList轉array

説明

querySelectorAll() 呼叫的元素形式是 nodeList ,
所以不能直接在 JavaScript 做一般的運算。
但可以轉成 Array ,再去做運算。

方法一:Object Spread Operator

ES6 方法,簡潔的寫法

li Ian
li Afro
li Moko
const li=document.querySelectorAll("li");

//turn to array
const arr=[...li];
const fullNames=arr.map(name => name.textContent+" CHEN"); //提取出文字 + 後綴

console.log(fullNames);//["Ian CHEN", "Afro CHEN", "Moko CHEN"]

方法二 Array.from()

const li=document.querySelectorAll("li");

//turn to array
const arr2=Array.from(li);
const fullNames=arr2.map(name => name.textContent+" CHEN"); //提取出文字 + 後綴

console.log(fullNames);//["Ian CHEN", "Afro CHEN", "Moko CHEN"]

 

JavaScript if述句簡寫

簡寫規則

  • 不用寫 if
  • 條件句不用括起來
  • 【?】若為真,後面放條件為真的動作
  • 【:】若為否,後面放條件為否的動作

範例

//原本的複雜版寫法
const a=5;
const b=10;
var result;

if(a<b){
 result="a great than b";
}else{
 result="a less than b";
}

console.log(result); //"a great than b"

//簡寫版
a<b ? result2="a great than b" : result2="a less than b";

console.log(result2); //"a great than b"

conosle 開發者工具常用功能

console.log

一般的偵測功能

console.log("hi") //"hi"

字詞置換【%s】

能把【%s】的部分置換成別的内容

console.log("Hello I am a %s string!", "☆★☆"); //Hello I am a ☆★☆ string!

樣式變更【%c】

字串開頭加上【%c】,能夠調整CSS

console.log("%c Hello I am some great text!", "font-size: 40px;background: red; text-shadow: 10px 10px 0 blue");

Display

Hello I am some great text!

 

console.warn 警告訊息

跳出警告訊息

console.warn("OH NOOO");

Display

OH NOOO

console.error 錯誤訊息

跳出錯誤訊息

console.error("SHIT");

Display

SHIT

console.info 提示訊息

跳出提示訊息

console.info("Crocodiles eat 3-4 people per year");

Display

Crocodiles eat 3-4 people per year

console.assert 驗證

檢査陳述的是否正確

若陳述為真,不回傳後面的訊息。
若陳述為否,回傳後面的訊息。

p(onClick="makeGreen()") ×BREAK×DOWN×
/**********基本用法*********/
console.assert(1 === 1, "That is wrong"); //Nothing
console.assert(1 === 2, "That is wrong");

/**********進階用法*********/

const p=document.querySelector("p");

console.assert(p.classList.contains("ouch"), "That is wrong");

console.clear 清除

清除以上的所有console

console.clear();

//以上的所有console都會被清除
//但是下面的console不會被清掉

console.dir 檢視屬性

跳出該元素的所有屬性

若陳述為真,不回傳後面的訊息。
若陳述為否,回傳後面的訊息。

p(onClick="makeGreen()") ×BREAK×DOWN×
const p=document.querySelector("p");

console.log(p);
//"<p onclick='makeGreen()'>×BREAK×DOWN×</p>"

console.dir(p);
//跳出該元素的所有屬性

Grouping 資料群組

群組呈現物件資料【展開版】(但是可以點成收合)

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

dogs.forEach(dog => {
 
 console.group(`${dog.name}`);
 console.log(`This is ${dog.name}`);
 console.log(`${dog.name} is ${dog.age} years old`);
 console.log(`${dog.name} is ${dog.age * 7} dog year old`);
 console.groupEnd(`${dog.name}`);
 

 
})

Display

▼ Snickers

This is Snickers
Snickers is 2 years old
Snickers is 14 dog year old

▼ hugo

This is hugo
hugo is 8 years old
hugo is 56 dog year old

 

群組呈現物件資料【收合版】(但是可以點成展開)

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

dogs.forEach(dog => {
 
 console.groupCollapsed(`${dog.name}`);
 console.log(`This is ${dog.name}`);
 console.log(`${dog.name} is ${dog.age} years old`);
 console.log(`${dog.name} is ${dog.age * 7} dog year old`);
 console.groupEnd(`${dog.name}`);
 

 
})

Display

▼ Snickers
▼ hugo

console.count  計算次數

計算字串出現的次數

console.count("Wes");
console.count("Wes");
console.count("Steve");
console.count("Wes");
console.count("Wes");
console.count("Steve");
console.count("Wes");
console.count("Steve");
console.count("Steve");
console.count("Steve");
console.count("Steve");

Display

Wes: 1
Wes: 2
Steve: 1
Wes: 3
Wes: 4
Steve: 2
Wes: 5
Steve: 3
Steve: 4
Steve: 5
Steve: 6

console.time  計算執行需要的時間

計算某項動作執行需要多久時間

console.time("fetching data");//定義名字

fetch("https://gist.githubusercontent.com/ianchen0419/d499e572044655814f38aaf56c779823/raw/9876407c12b1e6bc5c31fe6e9f875ccfb82af43b/schedule.json")
 .then(data => data.json())
 .then(data => {
  console.timeEnd("fetching data"); //計算該動作要多少時間
  console.log(data); 
});

Display

fetching data: 36.5849609375ms

console.table

將物件資料轉成表格,顯示於 console 上面

var obj=[
 {ch: "草莓",
 jp: "いちご",
 en: "strawberry"},
 {ch: "藍莓",
 jp: "ブルーベリー",
 en: "blueberry"},
 {ch: "香蕉",
 jp: "バナナ",
 en: "banana"}
];

console.table(obj);

Display

(Index) ch jp en
0 草莓 いちご “strawberry“
1 藍莓 ベルーベリー “blueberry“
2 香蕉 バナナ “banana“

inspect

跳到Elements,找到指定的元素

#myElement Hi
//Console Panel
inspect(myElement);
//跳到Elements Panel,並且幫你找到這個元素在哪裡

JavaScript children 選擇子元素

注意

使用 children 呼叫子元素後,會傳來一個集合 (HTMLCollection)
因此需要指定陣列 index ,才能夠鎖定子元素

範例

ul
 li first
 li second
//JavaScript 寫法
var fst=document.querySelector("ul").children[0];
//↑就算裡面只有一個 li ,也要用[0]
console.log(fst); //<li>first</li>

//jQuery 寫法
var fst2=$(".ul").find("li")[0];
console.log(fst2); //<li>first</li>

 

去背效果:mix-blend-mode

圖層混和模式 mix-blend-mode ,可以用來達成去背效果

他色底 + 黑内容:multiply

multiply 色彩增値

圖片色與背景色相乘,替換圖片的顏色

替換規則:

  • 他色*黑色=黑色
  • 他色*白色=他色

範例

<div>
 <img src="https://goo.gl/lZvsBv" />
</div>
div
 background-color: #ff96a7
 width: 500px
 padding: 20px
img
 mix-blend-mode: multiply

Display

▼原圖片

 

▼色彩增値後

 

所以圖片本來白色的地方變成他色(粉紅色),黑色則維持黑色

白色底 + 他色内容:screen

screen濾色

圖片色與背景色的補値相乘
替換規則

  • 他色*黑色=他色
  • 他色*白色=白色

※就是 multiply 的相反

範例

<div>
 <img src="https://goo.gl/lZvsBv" />
</div>
div
 background-color: #ff96a7
 width: 500px
 padding: 20px
img
 mix-blend-mode: screen

Display

▼原圖片

 

▼濾色後

圖片本來白色的地方維持白色,黑色則變成他色(粉紅色)

視差滾動

説明

文字隨著卷軸滾動,但背景圖片不動。
背景圖片利用 background-attachment: fixed 固定。

範例

.img
 h3 MO美女
body
 height: 2000px

.img
 width: 400px
 height: 300px
 background-image: url(https://goo.gl/HtiAOY)
 text-align: center
 background-attachment: fixed
 background-size: 50%
 h3
  color: white
  font-family: 微軟正黑體
  position: relative
  top: 150px

Display

MO美女

點擊添加&關閉class classList.toggle()

jQuery版寫法

功能

點一下添加class,再點一下移除class。
適合用在選單收合設計上。

範例

button#switch click it
.hidden Hidden Mssage !!
.hidden
 color: #11c1a4
 opacity: 0
 transition-duration: 0.5s
 
.show
 opacity: 1
document.querySelector("#switch").addEventListener("click", function(){
 document.querySelector(".hidden").classList.toggle("show");
})

Display

使用外部CSS與JS引入函式庫或框架

CSS 使用外部函示庫・框架

※link tag 寫在 head tag 裡面

外部CSS

<head>
 <link rel="stylesheet" href="這邊貼上CDN" />
</head>

外部JS

<head>
 <script src="這邊貼上CDN"></script>
</head>

本機開發:外部檔案

使用時機:

  • HTML, CSS, JS想要分別寫在3個不同的檔案。
  • 本機端開發
  • HTML, CSS, JS 3者在同一資料夾底下

外部CSS檔案

<head>
 <link rel="stylesheet" href="這邊貼上CSS檔名.css">
</head>

外部JS檔案

<head>
 <script src="這邊貼上JS檔名.js"></script>
</head>

ATTR + JS 語系切換

原理

  1. 把其他語言 + 本來的語言存在屬性 attr 裡面
  2. 用 JS 的 dataset 將文字改為屬性的資料

範例

h3(data-en="Languages Changing", data-jp="言語を選択", data-ch="語系切換") Languages Changing
p(data-en="some text", data-jp="テキストです", data-ch="一段文字") some text
button#ch CH
button#en EN
button#jp JP
//選取有文字的元素
var texts=document.querySelectorAll("[data-en]");

//轉換語言函數
function changeLang(par,lan){
 par.innerHTML=lan;
}

document.querySelector("#ch").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.ch));
 }
)

document.querySelector("#jp").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.jp));
 }
)

document.querySelector("#en").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.en));
 }
)

Display

Languages Changing

some text

Skrollr

概要

  • 卷軸滾動觸發動畫
  • Github 技術文件
  • CDN: https://cdn.jsdelivr.net/skrollr/0.6.30/skrollr.min.js

定位方式

  • 絶對定位
    //動畫由頂部到高度200的情況
    data-0="指定CSS (始値) ",
    data-200="指定CSS (終値) "
  • 相對定位(參考文件)※方便RWD
    //動畫由從視窗底部開始,隨著卷軸滾動到元素中心停止
    data-bottom-top="指定CSS (始値)"
    data-center="指定CSS (終値) "

注意事項

  1. 顏色只能指定 rgb() 或是 rgba()
  2. 屬性的CSS,必須要有對應的初始値與終値
  3. JavaScript 要加入一行初始値設定
  4. var s=skrollr.init();

範例

絶對定位

.fixed-center
 .box(
 data-0="transform: scale(1) rotate(0deg);background-color: rgb(0,0,0)"
 data-200="transform: scale(4) rotate(0deg);background-color: rgb(255,0,0)"
 data-450="transform: scale(4) rotate(45deg);background-color: rgb(255,0,0)"
 data-650="transform: scale(8) rotate(360deg);background-color: rgb(255,255,0); border: solid 1px rgba(0,0,0,0); border-radius: 0%"
 data-850="transform: scale(8) rotate(360deg);background-color: rgb(255,255,0); border: solid 1px rgba(0,0,0,1); border-radius: 100%"
 )
body
 height: 2000px

.fixed-center
 position: fixed
 left: 50%
 top: 50%
 transform: translateX(-50%)
 transform: translateY(-50%)

.box
 width: 50px
 height: 50px
 background-color: #222
var s=skrollr.init();

Display

CODPEN

相對定位

h3(data-bottom-top="opacity: 0; color: rgb(144, 169, 85)", data-center="opacity: 1; color: rgb(36, 38, 15)") 動畫由從視窗底部開始,隨著卷軸滾動到元素中心停止。<br>適合用在位於網頁中下方的元素
var s=skrollr.init();

Display

動畫由從視窗底部開始,隨著卷軸滾動到元素中心停止。
適合用在位於網頁中下方的元素