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>

更多函数知识

变量作用域

js有 全局作用域 函数作用域 块级作用域

var可声明全局作用域和函数作用域，块级作用域需要用let声明 块的定义可以理解为一个大括号

函数内部如果调用函数外同名变量，如果没有在函数里重新用var声明，则调用的是全局变量，即函数外的变量，在函数内改变这个变量，外部变量也会改变，因为改的是全局变量，是全局作用域

如果在函数内部用var重新声明了外部同名变量，这时这个变量就是函数作用域的了

用let声明的是块级作用域

this

html标签里调用时使用this，表示调用当前的标签对象，需注意的是this后加的属性需要元素拥有才能调用，否则报错，注意注意在注意

如果在js函数内部调用this，则this表示的是调用这个函数的父对象

const

用const可以声明常量，用const声明的常量，不能修改值，也不能重新用var定义，也不能重新用const定义为其他常量

箭头函数

可以理解为匿名函数的另一种简便写法

var sayHello = () => alert('hello world')

默认参数

默认参数一般放在参数列表的末尾，顺序不能错，类似py

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脚本编程