- Javascript是一种面向对象，动态类型，区分大小的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
- 以前的服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
- JavaScript 的正式名称是 “ECMAScript”。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。
- JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等。
（1）ECMAScript：是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序语言。
简单点说，ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。
（2）DOM：把整个页面规划成由节点层构成的文档，它不与浏览器、平台、语言相关，为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM编程可以实现网页内容校验和动态变化的效果。
（3）BOM：是浏览器的一种特性，它可以对浏览器窗口进行访问和操作，例如移动、关闭窗口，调整窗口的大小，支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果。
注意：简单归纳:
ECMAScript可以理解为JS的基础语法部分
DOM可以简单理解为,使用document对象操作文档内容的编程
BOM可以理解为,使用window对象操作浏览器行为的编程
- JavaScript的特点：
JS是运行在浏览器上的一种脚本语言
1.脚本语言
脚本语言是一种简单的程序，规模小,不需要编译,运行快,是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。
2.基于对象的语言
面向对象有三大特点（封装，继承，多态）缺一不可。通常"基于对象"是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。没有了继承的概念也就无从谈论"多态"
3.事件驱动：
在网页中执行了某种操作的动作，被称为"事件"(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
4.简单性
变量类型是采用弱类型，并未使用严格的数据类型。var a,b,c; a=123; b=“abc”; a=b;
5.安全性
JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
6.跨平台性
JavaScript依赖于浏览器本身，与操作平台无关， 只要计算机安装了支持JavaScript的浏览器（装有JavaScript解释器），JavaScript程序就可以正确执行。
缺点：
各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。
7.JS 和java的区别
区别1：公司不同，前身不同
JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发； Java的前身是Oak语言。
区别2：基于对象和面向对象
JavaScript是脚本语言，是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用，但不支持继承和多态。Java是面向对象的，是一种真正的面向对象的语言，支持封装、继承和多态。
区别3：变量类型强弱不同
Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。
区别4: 运行的位置不同
Java是运行在服务器端的大型编程语言, JS是运行于客户端(浏览器)一种小规模脚本语言
8.HTML和CSS和JS这之间的关系
HTML和CSS和JS都是前端的主要技术,三者各有分工.HTML可以用于制作网页的主体结构,CSS用于给网页做美化,JS用于在网页上添加动态效果。
- 缺点:
（1）我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低
（2）JS代码和HTML代码混合在一个文件中,可阅读性差
将JS代码放入外部JS文件中,通过script标签引入
- 优点:
代码复用度高,更易于维护代码 - 注意事项:
（1）在一个页面上可以同时引入多个JS文件
（2）每个JS文件的引入都要使用一个独立的script标签
（3）内嵌式和链接式的引入不能使用同一标签
（1）数值型：
number整数和浮点数统称为数值。例如85或3.1415926等。
（2）字符串型：
String由0个,1个或多个字符组成的序列。在JavaScript中，用双引号或单引号括起来表示，如"您好"、‘学习JavaScript’ 等。
（3）逻辑（布尔）型：
boolean用true或false来表示。
（4）空（null）值：
表示没有值，用于定义空的或不存在的引用。要注意，空值不等同于空字符串""或0。
（5）未定义（undefined）值：
它也是一个保留字。表示变量虽然已经声明，但却没有赋值。
（6）除了以上五种基本的数据类型之外，JavaScript还支持复合数据类型Object，复合数据类型包括对象和数组两种。
3.2 运算符号
JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号
JS中,数字类型都是number,除法的结果中如果没有小数位,直接就是一个整数,如有小数位,才是浮点数
JS中如果出现除零,那么结果是 infinity,而不是报错
JS取余数运算对于浮点数仍然有效,如果和0取余数,结果是NaN(not a number)
3.2.2 +符号- 同时也是连接运算符,看两端的变量类型,如果都是number那么就是算数中的加法 如果有字符串,那么就是连接符号,如果是布尔类型和number相加,那么会将true转化为1 将false 转化为0
3.2.3 == 等值符
先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为number再比较内容
3.2.4 ===等同符
数据类型不同 直接返回false如果类型相同 才会比较内容
3.3 流程控制 3.3.1 分支结构 if switch
3.3.2 循环结构 while do_while for
3.4 函数
- 类似于java中的方法,JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多。
- 主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表
- 函数定义的三种语法
- 函数参数和返回值
4 JS中数组的使用
4.1 创建方式
4.2 元素和长度
4.3 遍历方式
4.4 常用方法
5 JS中的对象
5.1 常用对象
- JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态，Java script 中有一些浏览器直接识别并使用的对象,常见的对象有Array，String，Math，Number，Date对象等等.
- String和java中的String很类似.
- String的常用方法
5.1.2 Number的常用属性和方法(包装类)
5.1.3 Math对象
5.1.4 Date对象
Date 对象用于处理日期与时间。
创建 Date 对象语法： new Date()
以下四种方法同样可以创建 Date 对象：
var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
5.2 自定义对象
- JS除了一些常用方法和类以外,允许我们自己定义对象,在JS中自定义对象有三种可用的语法格式,分别为:
（1）调用系统的构造函数创建对象
（2）自定义构造函数创建对象
（3）字面量的方式创建对象
5.2.2 自定义构造函数创建对象(function)
5.2.3 字面量的方式创建对象(JSON)
5.3 原型
- 当我们用构造方法创建一个类时,在内存会预先调用构造方法创建一个对象,这对象我们称之为原型对象,构造方法对象中有一个prototype属性指向该对象,原型对象中有一个constructor属性指向构造方法.获得一个类的原型对象可以通过类名.prototype的方式获得.
- 构造方法和原型的关系
// 准备一个构造方法
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)
- 当前类对象和原型的关系
当前类的每一个对象内部有一个 _proto_的一个属性,指向他们的原型, 当我们用对象获取属性和调用方法时,如果当前对象中没有,那么会去他们所对应的原型对象中去找,也就是说,我们通过对原型的操作可以实现为一个类所有的对象添加属性和方法.
5.4 原型链
- 一个类的原型是一个Object类的对象,也就是说,原型也有一个_proto_属性,指向Object的原型对象,那么也就是说 Person prototype中没有的属性和方法会继续向Object prototype去找,也就是说,我们在Object原型中添加的属性和方法,我们在person1和person2中也可以使用.那么这种连续的 _proto_属性指向就形成了原型链。
6 JS中的事件
- 什么是事件？
事件式可以被浏览器侦测到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么事,JS可以根据不同行为。绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互 - 事件的绑定和触发：给页面上的元素先绑定事件 然后通过行为去触发
6.2 键盘事件
6.3 表单事件
6.4 页面加载事件
7 BOM编程学习
7.1 BOM和DOM
（1）什么是BOM
BOM是Browser Object Model的简写，即浏览器对象模型。
BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象
（2）什么是DOM
DOM是Document Object Model的简写，即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象
（3）DOM和BOM的关系
红色框内是归DOM，绿色框内归BOM；也可以说DOM也是归BOM管的。
BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为。
DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容。
BOM 是为了操作浏览器出现的 API，window 是其根对象。
DOM 是为了操作文档出现的 API，document 是其根对象。
- 什么是window对象
Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写 Window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。 - Window 对象属性
- Window 对象方法
- Window 三种弹窗方式
- 定时器的使用
- open和close方法
7.3 BOM中其他常见对象
- location对象
location对象,是window对象的一个属性,代表浏览器上URL地址栏,使用location对象可以操作地址栏
- history对象
history对象是window对象的一个属性,代表浏览器访问历史记录,通过history的操作我们可以实现翻阅浏览器历史网页
- screen和navigator
screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息
8 DOM编程学习
8.1 DOM介绍
- 简单来说，DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
- document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
- document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点，document对象本身是一种树形结构的文档对象。
-
DOM节点分类node
结点对象Node：document对象中的每一个分支点都是一个node对象,它有三个子类
（1）元素节点Element： 如:我的链接
（2）属性节点Attribute： 如:href="链接地址"
（3）文本节点Text： 如:我的链接 -
DOM操作的内容
（1）查询元素（获取元素,进而操作元素,或者元素的属性,文本）
（2）操作文本
（3）操作属性
（4）操作元素
（5）操作CSS样式（一个特殊的属性style） -
例子
页面分析
x
1a
hello
2b
thank you
3c
thank you very much
4d
y
上面HTML页面代码的树形结构图如下
- Node节点常用的属性和方法
8.3 节点属性操作
8.4 节点样式操作
8.5 节点标签文本操作
（1）innerHtml 操作双标签中间的HTML
（2）innerText 操作双标签中间的 Text
（3）value 操作表单标签值
8.6 增加和删除节点
创建元素createElement()
增加元素appendChild()
删除元素removeChild()
