js入门经典学习小结

简介

js是解释型语言，虽然名字有java，但和java，c等编译型语言不同，它是解释型的，类似perl，py

历史

90年代最早js 1.0版本是网景navigator2引入的

然后欧洲计算机制造商协会（ECMA）制定ECMASript规范

然后微软开发自己的javascript： jScript

90年代后期网景navigator4和IE4都支持js，但各自的实现方式不同，规范也不同，让开发者感到复杂。然后W3C通过DOM规范各厂商对界面操作的规范

dom

浏览器加载页面，有一个页面结构的内部体系存在内存里，叫DOM，是树形结构，可通过js方便操作dom。

树形结构顶层对象是window对象，它也是全局对象，具有全局作用域，window四个子对象是document， location，history，navigator。html界面都在document对象下，document对象用的也比较多，如果需要对document对象操作，直接执行document.getElementByNames(...)，也可以带全局对象操作：window.document.getElementByNames(...)

document有属性document.write('text')，但这个好像会覆盖document下其他元素，不推荐，推荐用dom操作页面对象

如何定义js脚本

两种方法，一种是写到html标签里，一种是写在js文件里，然后在html里用script标签的src属性引入自定义的js文件

// test/test.js
function () {alert('hello world');}

<script>function() {alert('hello world');}</script>
<script src="/test/test.js"></script>

注意，如果用src引入外部js文件，则html的script标签里不能有任何内容

虽然js文件后缀是.js，但浏览器其实可以无视后缀，即你后缀不对但文件内容对也能加载出来

创建简单脚本

思考1 js定义在html还是js脚本

js如果在html定义，放在head还是body？

如果放在body，会解释执行，但是是按顺序的，如果dom没加载出来但js访问了那就会报错，所以如果要定义在body，需要把script放在body末尾

如果放在head，当在body调用时，body肯定都已经加载完了，放在head更易读，也避免了放在body元素未加载完调用js报错问题

思考2 js关于大小写

html不区分大小写 js区分大小写 xhtml区分大小写

注释

单行注释：// this is a note

多行注释: /* this is \n another note */

文件大小

带注释的js文件会稍微大点，一般生产环境部署会压缩js文件，压缩后文件后缀一般是xxx.min.js

关于事件

js用事件处理器处理事件，常见的有onClick，onMouseOver，onMouseOut等，这三个几乎可以用于任何html元素

关于空行

html不会处理空行，除非你用转义字符表示空行

函数

尝试一下

<script>
function buttonReport(buttonId, buttonName, buttonValue) {
	var a = "button id: " + buttonId + "\n";
	var b = "button name: " + buttonName + "\n";
	var c = "button value: " + buttonValue + "\n";
	alert(a + b + c);
}
</script>
<div class="testb"><input id="abc" name="def" value="ghi" onclick="buttonReport(this.id, this.name, this.value)"/>test</div>

返回值

函数没返回值的话则是undefined

匿名函数

看个例子

<script>
var sayHello = function () {alert("hello world");};
</script>
<div class="testb"><p onclick="sayHello()">test</p></div>

dom对象和内置对象

常见用户交互对象方法

alert 类似py的print

confirm 弹出一个模态框有ok cancel按钮文本是confirm传入的参数

var sayHello = () => {confirm('hello world');};

prompt 和confirm类似，弹出一个模态框，有一个输入框，最后的值是你输入的值，还提供第二个参数作为输入框里的默认值

var sayHello = () => {prompt('hello world');};

var sayHello = () => {prompt('hello world', "hello kitty");};

常用元素属性方法

根据id或name访问元素：即document.getElementById 注意该方法和document.getElementsByName的区别，一个获取的是单元素，一个获取的是多元素，多元素拿到要再通过下标访问

interHTML：闭合标签夹着的内容可通过修改元素的interHTML属性来修改实现

window.history

可通过history的方法forward backward go三个方法访问历史url，三个方法执行结果分别为前进，后退，按执行参数前进或后退n个页面

window.location

该属性包含了当前页面url信息

应用：

href可以设为location.href实现访问

location.reload()表示刷新页面

window.navigator

保存浏览器本身数据这个数据长让人捉摸不透感觉书里不很建议用这个属性

日期和时间

var abc = new Date();

var year = abc.getFullYear();

var month = abc.getMonth();

var date = abc.getDate();

var day = abc.getDay();

var hour = abc.getHours();

var minutes = abc.getMinutes();

var seconds = abc.getSeconds();

with

类似py，例如调用某个模块（math）的方法，使用with，省去了对模块名的访问

数字和字符串

全局方法

toString

将一个数字转化为字符串

toFixed

将数组按指定小数位返回

toExponential

将数字按指数表示法返回

Number.isNaN

Number.parseFloat Number.parseInt

将字符串解析为整数或浮点数，还可以指定数字的基，默认是十进制，也可以指定解析为八进制十六进制等

Number.isFinite

判断数字是否无穷

字符串操作

可以用单引号或双引号定义字符串，类似于py，单引号字串可以包含双引号，反之亦然

length属性

length属性表示字符串长度，这是一个只读属性，无法给他赋值，即使赋值了，length也保持不变

模板字符串

类似py 或 perl的模板字符串，用反引号定义，反引号内的转义字符无需加反斜杠表示

数组

创建数组

两种方法：1 var test = new Array(); 2 var test = [];

一个注意点，超过列表范围的赋值，前面会自动填充undefined，类似py，但py会报错

常用方法

遍历数组

foreach

map

for of

三点操作符

类似py的解包可能都是解释型语言吧

js事件处理

常见事件

鼠标事件

onclick onmousedown onmouseenter onmouseleave onmousemove onmouseover oncontextmenu ondblclick

键盘事件

onkeydown onkeypress onkeyup

dom事件

onerror onload onresize onscroll

表单事件

onblur onchange onfocus onreset onselect onsubmit

事件处理器

内联事件处理器

即内联在html元素里的事件处理器，需要注意不同元素支持的事件不同，内联定义需要定义元素支持的事件处理器

事件处理函数作为dom属性赋值给事件处理器

即先获取元素，再元素.onclick = function () {alert(9);}这种形式

addEventListener

先获取元素，再element.addEventListener('click', function () {alert(666);})

删除事件监听器：element.removeEventListener('click', func_name)

注意，如果需要对一个事件添加多个处理器，如果

element.onclick = funca; element.onclick = funcb，funcb会覆盖funca

如果用addEventListener，则不会覆盖

event对象

addEventListener时，监听处理函数需要定义一个参数，表示事件对象。事件对象有很多方法不知道不提供事件参数可不可以没试过

阻止默认行为

e.preventDefault()阻止事件的默认行为，如果只alert，事件还是会正常发生

事件冒泡与捕获

addEventListener第三个参数接受布尔值参数，表示是否事件冒泡捕获。一般事件触发先出发内层元素事件然后逐步触发外层元素事件，这个默认第三个参数是false会有这现象，如果为true，当事件产生时，会先触发和最外层元素关联的事件处理器，最后触发和最内层元素相关的事件处理器

通过e.stopPropagation()方法可组织事件进一步冒泡

通过e.target属性可看到事件最早是再哪个元素触发的

这个属性可用于事件捕获你想这个元素事件触发了，但最先触发的是内层元素的事件，最后才会触发本元素事件如果想本元素先触发就需要捕获模式第三个参数设为true

思考1 鼠标事件顺序？

先后：mousedown mouseup click

思考2 匿名事件处理器如何删除

删除不了如果要删必须具名函数

控制语句

==只判断值是否相等 ===判断值和类型是否同时相等

循环

while, do...while, for, for... in四种

定时器

setTimeout用来在指定时间后执行动作，从动作触发到动作发生这段事件，如果想取消动作，可以调用cleartimeout方法，参数传递用setTimeout的返回值

setInterval是周期任务，如果想取消，也是先保存setinterval的值，调用clearInterval取消定时任务

面向对象编程

创建对象几种方法：1 new Object() 2 定义函数function test() {this.info = "666"}; var a = new test() 3 通过prototype继承或扩展。注意继承，让子类的prototype等于一个父类对象新建的实例即可

对象进阶

和上一章相比，可以用关键字class代替函数式创建实例。区别：class省去了很多function关键字，用属性和方法取而代之，可以理解为一种语法糖，class还有构造函数constructor，产生对象的调用方式一样，直接new

constructor构造函数在class不可缺省 constroctor构造函数也不支持多态只能有一个

getter和setter

symbol

一种js数据类型，特点是独立，比如12==12为true，但Symbol(12)==Symbol(12)为false

class继承

class关键字继承语法为class son extends parent {constroctor...}

子类调用父类方法直接用super关键字

功能检测

可使用if来检测函数是否存在，判别条件为document.func_name就行，用自身的逻辑值

或者也可以用typeof document.func_namea == 'function'判别

dom脚本编程

常用属性

节点类型：元素有个属性nodeType可查看元素类型，值范围1-12，常见的类型是123

子节点属性：childNodes，是子元素的集合表示，集合也可以用下标访问，但有些数组方法不能用

可以通过firstChild和lastChild属性访问元素的首个/末个子节点

parentNode可访问父节点

nextSibling和previousSibling可访问下一个前一个兄弟节点

nodeName可查看元素标签名

nodeValue可查看元素值，可用于获取元素内的text值，目前有两种方法，innerHTML或childnodes[0]

应用

可以通过document.getElementsByxxx等方法结合上述属性进行逻辑判断选择dom进行dom操作

常用方法

element.getAttribute

创建节点

var nodea = document.createElement("div")

var nodeb = document.createTextNode("your text")

var nodec = nodea.cloneNode(true) 参数true/false表示是否复制节点下的所有子节点

注意元素的id是唯一的，复制的元素id会重复，所以复制完需要修改元素id

将节点放入dom树

nodea.appendChild(nodeb) 将新节点添加到父节点的最后一个子节点，所以新增元素总是lastChild

nodea.insertBefore(nodeb, nodec) 将nodeb添加到nodea下nodec前面

nodea.replaceChild(nodeb, nodec) 将nodea下的nodec用nodeb代替

注意，添加p元素，除了var p = createElement("p")如果希望p有文字还需要var text = createTextNode("your text")，然后p.appendChild(text)把文本节点加到p元素

nodea.removeChild(nodeb) 删除nodea下的nodeb，如果不方便引用父元素，可以用parentNode属性代替：nodea.parentChild.removeChild(nodeb)

动态加载js文件：思路新增script元素，然后改script节点的src属性，值是你要加载的js文件路径，然后将元素加到head dom里

json

基础

类似py字典，直接定义就行

可使用JSON.parse解析字符串为json对象

可用JSON.stringify将json对象变成字符串

html js css

可通过className改变元素的类名

通过document.styleSheets可访问页面上全部样式表，length查看样式表数量

启用，禁用样式表：document.styleSheets[0].disabled= true/false

厂商前缀

css3在各浏览器未完全支持前，每个厂商会有前缀，个浏览器完全支持后，这些前缀则可省略了

使用前缀时，在属性前加前缀即可

边框

边框阴影：box-shadow 参数是阴影长，阴影款，模糊距离，颜色等

背景

background-size

background-origin 见css揭秘-学习小结-CSDN博客

多背景：通过background-image实现，逗号分隔多个图像即可，第一个在最上层，逐层往下

js中使用css3

css3属性名在js中转换，js中如果使用属性操作符（即一个点）需要将css属性连字符去掉，然后驼峰属性写法来引用

document.getComputedStyle用来获取元素经过最终计算得到的属性：getComputedStyle(document.getElementById("abc")).getPropertyValue("borderRadius")