JavaScript基础

一、页面中引入js代码

    在HTML主体代码最底端插入<script>标签即可。不在上面加入，是因为网页根据HTML自上而下加载，如果放在头部，会导致无法获取元素；而且网页的加载速度会变慢，要先让用户看到基本网页，再加载js效果。js是单线程的，如果某个节点错了，那么整个链就错了。
    网页加载完主体代码后，将会执行js里面的函数。如果有多个js文件，源函数文件放在上面，下面的文件可以直接使用上面文件的函数。
    如果想用js进行网络编程（与服务器交流），那么只需要一个HTML框架，其他的可以用js函数解决（插入元素，获取数据（源数据和输入数据），最主要的是输入数据的提交，也是GET或POST方法）。

二、js基础

规范：class以class开头，id以id开头；
一句话结束后，可以使用也可以不适用“；”，true和false为小写；
1.单行和多行注释：// 或 /* */
2.变量没有类型，在使用前通过var修饰定义：var a = 1
3.单行字符串使用普通引号：“''”，多行使用：“``”；
4.函数的定义
调用函数时，参数可多可少，不会报错，但多出来的参数会显示undefined；

// 方式一：
var myfunction = function(){
        ...
}
// 方式二：
var myfunction():
        ...

**// 前端编程也需要打log函数，在console里查看结果
var log = function(){
        console.log.apply(console, arguments)
}**

5.数据的操作
数组：

var arr = [1,2,3,4,5,]
arr.push(5)            // 增加，不同于python的append
arr.length              // python length(arr)

字典：
js的字典就是对象，key的引号可以省略，取值可以用点语法。

var dic = {
        key:'value',
        name:'majun'
}

6.js页查找元素
document.querySelector()
返回找到的第一个元素，querySelectorAll() 返回所有
    document包含整个文档，也就是html的父元素。其也可以是一小块的父元素，在这小块里面查找子元素。
选择器：元素的查找依赖于选择器（三种）

class    ： .class-name
id          ：  #id-name
element：body、p、a等

7.获取和设置属性值

1.先获取这个元素
var ele = document.querySelector('.commentInput')
2.获取属性值
input元素有个特定的value属性，代表输入的内容
value = ele.value
// 其他元素的是innerText属性：span  p  button等
或者：
ele.getAttribute('value')    // input里面如果设置了value，将拿到默认值；.拿到的是更新值；
3.设置属性值
ele.value = 'inputValue'
ele.setAttribute('attrname','attrvalue')

8.操作元素（增、删、查、该）

<div class='input-form'>
</div>

1.查
全局查：（document相当于html的父元素，也可以换成其他父元素）
var inputForm = document.querySelector('.input-form')
查找父元素
ele.parentElement()
2.增（beforeBegin、afterBegin、beforeEnd、afterEnd）
inputForm.insertAdjacentHTML('beforeEnd', '<h3 class='h1-form'>请输入<h3>')
相当于以前的三部（创建、赋值、插入）：

h1 = document.createElement('h3')
h1.insertText('请输入')
inputForm.appendChild(h1)

    也可以用innerHTMLt和innerText（不会被渲染）属性
inputForm.innerHTML = "<h3 class='h1-form'>请输入<h3>" inputForm.innerText = "<h3 class='h1-form'>请输入<h3>"
3.删
inputForm.remove()
4.改
    前面已经讲过属性的更改，现在讲讲元素内文本的更改：p、span、button等。直接用innerText：
p.innerText = '这是更改后的文本'

三、js事件

click、dbclick、浏览器加载前后、键盘等；
步骤：
1.获取元素
2.定义事件响应的函数
3.绑定事件（也可以在绑定事件的时候定义函数）

inputForm.addEventListener('click', function(){
        log('哈哈，被点击到了')
})

四、事件委托

    一个父元素下有很多子元素，其中某个子元素要进行某个事件，那么现在可以将这个父元素绑定该事件，那么子元素就都有该事件了，再通过class或id找到该子元素，编写相关事件函数即可。
    事件的操作都是一个套路，查找到父元素，父元素绑定事，定义事件函数，参数为event，利用var self = event.target获取点击的当前元素，再用if语句判断是不是该元素执行事件（条件：self.classList.contains('classname')），再执行相关事件函数。

五、序列化和反序列化（用于数据交换）

‘字典 / 数组’ 与 字符串 之间的转换
JSON：互联网数据交换的事实标准；JavaScript Object Notation--js对象标记
python也有内置的标准库进行相应转换：inport json （dumps和loads）
序列化：‘字典 / 数组’ 转换为 字符串
JSON.stringify([1,2,3])
反序列化：字符串 转换为 ‘字典 / 数组’
JSON.parse(s)
可以使用typeof查看数据类型；
利用JavaScript的异步进行网络编程时，需要用到序列化与反序列化，这个下面一章会具体讲到。

六、ajax异步

通过回调函数实现异步
    下一章用例子详细讲。
    张三去超市买火腿，超市没货，所以超市告知张三，你先留个电话号码，我进货后给你打电话，你再过来拿。
    那么张三现在就可以回去了，超市也正常营业。等进货后，超市给张三打电话，张三过来取货，然后回家。
那么后面这个过程就完成了一次回调。

2.流程：
    打开index界面的时候，服务器响应给浏览器index.html，浏览器解析index.html
    发现了最末尾的两个js文件，那么再向服务器进行请求。
    服务器获得请求后，会执行这两个文件里面的代码：
首先：
    在todo.js里面有个__main()函数，那么执行它包裹的两个函数bindEvents()和loadTodos(),由于没有触发点击事件，所以执行loadTodos()函数。
    在loadTodos()函数里面先执行调用的apiTodoAll()函数，它里面有个参数，即为回调函数，回调函数暂且不执行。
    执行apiTodoAll()，函数里面有个函数，为回调函数（待会执行），而且定义了path，调用了ajax函数，将path传递给ajax函数，执行ajax函数代码；
ajax函数流程
    先实例化一个XMLHttpRequest（），然后设置请求方法和请求地址，然后下面有个回调函数，暂且不执行，继续往下走，通过r发送数据。现在服务器获得了数据，那么响应请求，当readyState为4的时候，开始执行回调函数，将实例r的response作为参数传递给回调函数；
    现在往回走，执行apiTodoAll里面的回调函数，发现没有，那么继续往回走，到了loadTodos里面，找到了回调函数，参数r为ajax里面的响应r.response，通过解码以及遍历，将数据插入到html里面。那么，到此就结束了。

回调函数

    函数a有一个参数，这个参数是个函数b，当函数a执行完以后执行函数b。那么这个过程就叫回调。”，这句话的意思是函数b以一个参数的形式传入函数a并执行，顺序是先执行a ，然后执行参数b,b就是所谓的回调函数。

在JavaScript中，如果有元素的属性设置格式为data-attr = ''，则可以通过元素的dataset.attr获得；