tags: js

js code

基本

push

var data=[10,20] data.push(30) //data=[10,20,30]

unshift

var data=[10,20] data.unshift(0) //data=[0,10,20]

長字串

document.getElementsByClassName("in_text")[0].value='{\ "test":{\ "google":"",\ "some":{\ "not":"",\ "ok":""\ },\ "facebook":"",\ "aws":{\ "face":"",\ "youtube":{\ "channl":"",\ "file":""\ }\ }\ }\ }';

js request

XMLHttpRequest get

var xhr = new XMLHttpRequest() var url="https://cors-anywhere.herokuapp.com/"+"https://daan-course.herokuapp.com/api/data?class=%E7%B6%9C%E9%AB%98109%E6%84%9B" xhr.open('GET',url); xhr.onload = function() { var data=JSON.parse(this.responseText) console.log(data) } xhr.send()

fetch get

var url="https://daan-course.herokuapp.com/api/data?class=%E8%B3%87%E8%A8%8A109%E7%94%B2" fetch(url, { "referrer": "https://daan-course.herokuapp.com/", "referrerPolicy": "no-referrer-when-downgrade", "body": null, "method": "GET", "mode": "cors", "credentials": "omit" }).then(function(response) { return response.json(); }).then(function(res) {console.log(res)})

fetch post

var url="" var send_data={text:"hello"} fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(send_data) });

js html 操作

創造html 元素

var div= document.createElement("div") var textarea=document.createElement("textarea") var input= document.createElement("input") var buttun=document.createElement("button") var img=document.createElement("img")

加入html 元素

var div= document.createElement("div") document.body.appendChild(div)

去除document中html 元素

var div= document.createElement("div") document.body.appendChild(div) div.remove()

html 元素中的元素(也可以是字串)

var div= document.createElement("div") div.innerHTML="some text" console.log(div.innerHTML)

html 元素事件聆聽

var div= document.createElement("div") div.addEventListener("click",function(){ console.log("clicked") })

html 元素 用id 搜尋

var div= document.createElement("div") div.id="content" var getElements= document.getElementsById("content") console.log(getElements)

html 元素 用class 搜尋

var div= document.createElement("div") div.className="content" var getElements= document.getElementsByClassName("content") console.log(getElements) //輸出為array

滑鼠事件

var div= document.createElement("div") div.onmouseover = function(){console.log("mouse over")}

js物件導向

function create_jsclass() { var obj = {}; var data= { "name":"data", "text":"ok?" } obj.data["text"]="1" obj.some_function=function(indata) { console.log(indata) console.log(obj.data["text"]) } return obj } var new_class=create_jsclass() new_class.some_function("hello") /* will console.log("hello") and console.log("1") */ new_class.data["text"]="2" new_class.some_function("world") /* will console.log("hello") and console.log("2") */

callback

常用於非同步function 像是fetch

function get_data(url,callback) { fetch(url, { "method": "GET", "mode": "cors" }).then(function(response) { return response.json(); }).then(function(res) { console.log(res) callback(res) }) }

()=> 是啥

程序員連function 都懶得打的產物

()中應該也是可以打參數(我沒試過

正常function

var div= document.createElement("div") div.addEventListener("click",function(){ console.log("clicked") })

使用()=>

var div= document.createElement("div") div.addEventListener("click",()=>console.log("clicked"))

this 是啥

event function 中

var image=document.createElement("img") var url="https://instagram.ftpe7-4.fna.fbcdn.net/v/t51.2885-15/e35/121593136_754756898405361_6091500234112087097_n.jpg?_nc_ht=instagram.ftpe7-4.fna.fbcdn.net&_nc_cat=109&_nc_ohc=vjyw0iwQyjMAX898eAW&_nc_tp=18&oh=1449a911bcb4bb25bc7e0772039b41bf&oe=5FB3D671" image.src=url image.onclick = function() { var iw = this.width, ih = this.height; console.log(this) console.log(iw) }

輸出為img html tag 和600

function 中

var image=document.createElement("img") var url="https://instagram.ftpe7-4.fna.fbcdn.net/v/t51.2885-15/e35/121593136_754756898405361_6091500234112087097_n.jpg?_nc_ht=instagram.ftpe7-4.fna.fbcdn.net&_nc_cat=109&_nc_ohc=vjyw0iwQyjMAX898eAW&_nc_tp=18&oh=1449a911bcb4bb25bc7e0772039b41bf&oe=5FB3D671" image.src=url function call(e) { console.log(this) } image.addEventListener("click",call,false); document.body.appendChild(image)

輸出為window

總結

一般function中為window
event function 為觸發該 event的物件

e 是啥

var image=document.createElement("img") var url="https://instagram.ftpe7-4.fna.fbcdn.net/v/t51.2885-15/e35/121593136_754756898405361_6091500234112087097_n.jpg?_nc_ht=instagram.ftpe7-4.fna.fbcdn.net&_nc_cat=109&_nc_ohc=vjyw0iwQyjMAX898eAW&_nc_tp=18&oh=1449a911bcb4bb25bc7e0772039b41bf&oe=5FB3D671" image.src=url function call(e) { console.log(e) } image.addEventListener("click",call,false); document.body.appendChild(image)

輸出為MouseEvent
e 通常用來讓 function 擷取該 event 的資料

xpath

通常長這樣
/html/body/div[1]/div[2]/div/img

function get_xpath(para,xpath,runtime) { let count=0; let tag=xpath.split("/")[runtime+1] let tagname=tag.split("[")[0] let number=1; if (tag.split("[").length!=1) { number=tag.split("[")[1].split("]")[0] number=parseInt(number) } for (let index = 0; index < para.children.length; index++) { const element = para.children[index]; if (element.localName==tagname){ count++; } if (count==number) { if (runtime+1 == xpath.split("/").length-1) { return element } return get_xpath(element,xpath,runtime+1) } } }

get_xpath(docment,"/html/body/div[1]/div[2]/div/img",0)