###### 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)