JS

介绍

跨平台、面向对象的脚本语言。用来控制网页行为，能使网页可交互

JS引入方式

内部脚本：将JS代码定义在HTML页面中
- 位于<script></script>
- 可以放在任意地方
- 一般会置于<body>元素的底部可以改善速度
外部脚本：将JS定义在外部JS文件中

变量（var）

js中var关键字来声明变量
可以存放不同类型的值
命名规则与java类似

数组

[code]
/*第一种 *创建了一个空数组 new Array(); * / var arr=new Array(); arr[0]=1; console.log(arr); / *第二种 * 创建定长数组 new Array(5); * / var arr2=new Array(5); arr2[0]=”x”; arr2[4]=true; console.log(arr2) / * 第三种创建语法 * 创建时,直接指定元素值 * / var arr3=new Array(“asdf”,10,20.3,true); console.log(arr3) / *第四种语法 * 相当于第三种语法的简写 * / var arr4=[“asdf”,10,20.3,true]; console.log(arr4)
[/code]
[code]
var arr=[11,22,33]; console.log(arr) console.log(arr[0]); console.log(arr.length) / * JS中的数组是可以通过修改length属性来改变数组长度的 * / arr.length=5; console.log(arr) / * JS的数组可以通过索引改变数组的长度 * / arr[9]=99; console.log(arr);
[/code]
[code]
var arr=[5,7,3,1,6,2,4,9,8]; / * 普通for循环遍历数组 * / for(var i=0;i<arr.length;i++){ console.log(arr[i]) } / *foreach循环遍历数组 * JS 中foreach写法为 for( var i in 数组) * i 不是元素是索引 * */ for (var i in arr){ console.log(arr[i]) }
[/code]

对象

JS中常见对象有Array,String,Math,Number,Date对象

String类

Number类

Math类

Data类

自定义对象

第一种：调用系统的构造函数创建对象（Object）
[code]

[/code]

第二种：自定义构造函数创建对象（function）
[code]

[/code]

第三种：字面量的方式创建对象（JSON）
[code]

[/code]

JS原型的使用

当我们用构造方法创建一个类时，在内存会预先调用构造方法创建一个对象，这个对象完美惩治为原型对象，构造方法对象中有一个prototype属性指向该对象，原型对象中有一个constructor属性指向构造方法。获得一个类的原型对象可以通过类名。prototype的方式获得。

[code]
// 准备一个构造方法 function Person(pname,page){ this.pname=pname; this.page=page; this.eat=function(food){ console.log(this.page+”岁的”+this.pname+”正在吃”+food); } } console.log(Person)// Constructor对象构造方法对象 console.log(Person.prototype)
[/code]

当前类对象和原型的关系

当前类的每一个对象内部有一个 _proto_的一个属性,指向他们的原型, 当我们用对象获取属性和调用方法时,如果当前对象中没有,那么会去他们所对应的原型对象中去找,也就是说,我们通过对原型的操作可以实现为一个类所有的对象添加属性和方法.
[code]

[/code]

JS的原型链

一个类的原型是一个Object类的对象,也就是说,原型也有一个_proto_属性,指向Object的原型对象,那么也就是说 Person prototype中没有的属性和方法会继续向Object prototype去找,也就是说,我们在Object原型中添加的属性和方法,我们在person1和person2中也可以使用.那么这种连续的 _proto_属性指向就形成了原型链
[code]

[/code]

事件

鼠标

[code]

[/code]

键盘

[code]

[/code]

页面

[code]

[/code]

表单

[code]

[/code]

BOM和DOM编程

认识BOM和DOM

什么是BOM

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

什么是DOM

DOM是Document Object Model的简写，即文档对象模型。

DOM用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

DOM的顶层是document对象

DOM和BOM的关系

红色框内是归DOM，绿色框内归BOM；也可以说DOM也是归BOM管的

BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为

DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容

BOM 是为了操作浏览器出现的 API，window 是其根对象。

DOM 是为了操作文档出现的 API，document 是其根对象。

BOM编程

Window 对象描述

Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写 Window.alert()。

除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

简单来说，相当于java中的Object对象，直接调用

API详见开发文档

BOM其他常见对象

location对象

location对象,是window对象的一个属性,代表浏览器上URL地址栏,使用location对象可以操作地址栏
[code]

[/code]

history对象

history对象是window对象的一个属性,代表浏览器访问历史记录,通过history的操作我们可以实现翻阅浏览器历史网页
[code]
pageA
[/code]

screen和navigator

screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息
[code]

[/code]

DOM编程学习

简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

什么是document

document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。

document对象如何获取

document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

DOM节点分类node

结点对象:Node,document对象中的每一个分支点都是一个node对象,它有三个子类

元素节点 Element 如:我的链接

属性节点 Attribute 如:href=”链接地址”

文本节点 Text 如:我的链接

DOM操作的内容

1.查询元素（获取元素,进而操作元素,或者元素的属性,文本）

2.操作文本

3.操作属性

4.操作元素

5.操作CSS样式（一个特殊的属性style）

Vue框架引入

MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上