js学习笔记

JavaScript 编程语言（重点掌握）

介绍：
概念：客户端脚本语言
运行在客户端浏览器中的每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行

功能：
	可以来增强用户和HTML页面的交互过程，可以来控制HTML元素，让页面有一些动态效果 增强用户体验

发展史：
	1992年，nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：c-- 后来更名为：scriptEase
	1995年，Netscape（网景）公司，开发了一门客户端脚本语言：livescript。 因为当时java语言非常火，所以后来请来sun公司的专家修改livescript，命名为javascript 
	1996年，微软公司抄袭JavaScript 开发出JScript语言 出现三种语言鼎立的局面，搅乱了市场秩序
	1997年，ECMA（欧洲计算机制造协会）规范了客服端脚本语言，ECMAScript，就是所有客户端脚本语言的标准。
	JavaScript=ECMAScript + JavaScript自己特有的东西（BOM+DOM）

ECMAScript：客户端脚本语言的标准
	基本语法：
		与HTML结合方式
			内部js:一般定义在head标签内<script></script> --可以定义在HTML任意位置，标签体就是js代码
			外部js:定义<script>,通过src属性引入外部js文件
		     注意：
			script可以定义在HTML页面的任意位置，但位置影响执行的顺序
			可以定义多个
		注释
			和java一样
		数据类型
			原始数据类型（基本数据类型）
			number ：数字  整数/小数/NaN（不是数字的数字类型）
			string：字符串。单引号双引号都可以，没有字符概念。
			boolean
			null
			undefined:未定义，没有初始化值
			引用数据类型：对象
		变量
			变量：一小块储存数据的内存空间
			java是强类型的语言，而javascript是弱类型的语言
				强类型：在开辟储存空间时，定义了空间将来储存的数据类型，只能储存固定的数据类型
				弱类型：在开辟储存空间时，不定义空间将来的储存数据类型，可以储存任意的数据类型
			语法：var
				
		
	基本对象：
		Function :函数（方法）对象
			1.创建
				function 方法名（形参列表）{
				方法体；
			}
				或var=function（形参列表）{
				方法体；
			}
			2.方法：

			3.属性：
				length：代表参数的个数
			4.特点
				方法的定义，形参的类型不用写，返回值类型也不写
				方法是一个对象，如果定义名称相同的方法，会覆盖
				在js中，方法的调用只与方法的名称有关，和参数列表无关
				在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
			5.调用
				方法名称（实际参数列表）；
		Array:数组对象
			1.创建
				var arr=new Array （元素列表）；
				var arr=new Array （默认长度）；
				var arr=new Array  [元素列表]；
			2.方法：
				join（参数）：将数组中的元素按照指定的分隔符拼接为字符串。如果不写参数默认为逗号
				push（）：向数组的末尾添加一个或更多的元素，并返回新的长度。
				更多方法查看JavaScript文档
			3.属性：
			4.特点：
				在js中，数组元素的类型是可变的
				在js中，数组的长度是可变的		
		Boolean：对象就表示 两个值，略
		
		Date：日期对象
			1.创建
				var date=new Data();
			2.方法
				toLocaleString():返回当前date对象对应的本地字符串格式
				getTime（）：获取毫秒值。返回当前时期对象描述的时间到1970年1月1日零点的毫秒值差
		
		Math：数学对象
			创建：不用创建直接使用
			方法：
				random（）获取一个0-1之间的随机数，包含0不包含1
				ceil（x）对数进行上舍入,就是向上取整
				floor（x）对数进行下舍入
				round（x）把数四舍五入为最近的整数
			
			属性
				PI 圆周率
				。。。
		Number，String,原始数据类型的略
		
		RegExp：正则表达式对象
			正则表达式：定义字符串组成规则
				单个字符：[ ]
					\d单个数字字符
					\w单个单词字符
				量词符号：
					？表示出现0次或1次
					*表示出现0次或多次
					+表示出现1次或多次
					{m,n}表示数量在m和n之间，包括mn
					m如果缺省{,n}:最多n次
					n如果缺省：最少m次
				^开始符号，$结束符号
				正则对象：
					创建：var reg=new RegExp("正则表达式")；转义符用双斜线生效
						var reg=/正则表达式/;           ------一般使用这种
					方法：
						text（参数）：验证指定的字符串是否符合正则定义的规范，返回一个boolean
						
		Global
			特点：全局对象，这个对象中封装的对象直接写方法就可以调用，所以一般人不知道Global这个名字嘿嘿

			方法：
				encodeURI():url编码
				decodeURI()：url解码
				encodeURIComponent():url编码。这个方法编码比上面方法编码更多
				decodeURIComponent()：url解码
				parseInt（）:将字符串转为数字
					逐一判断每个字符是否为数字，直到不是数字为止
				isNaN():判断一个值是否为NaN
					NaN六亲不认，连自己都不认，NaN参与的==比较全部为false，所以只能用isNaN()判断
				eval（）：解析JavaScript字符串，作为代码执行

DOM：为了满足案例要求
功能：控制HTML文档的内容
代码：获取页面标签（元素）对象Element
document.getElementById(“ID值”)：通过元素的ID获取元素对象
操作Element对象：
设置属性值：
明确获取的对象是哪一个
查看API文档，找其中那些属性可以设置
修改标签体内容
属性：innerHTML
事件：
功能：某些组件被执行了某些操作后，触发某些代码的执行

如何绑定事件
	直接在HTML标签上，指定事件的属性（操作），属性值就是js代码
		事件：onclick=“js代码”缺点：直接写在HTML标签内，增加了耦合度，不利于维护。
	
		
	通过js获取元素对象，指定事件属性，设置一个函数
		例：var 对象名=document.getElementById(id);
			对象名.onclick=函数

BOM
概念：Browser Object Model 浏览器对象模型
将浏览器的各个组成封装成对象
组成：
Window：窗口对象
特点：
不需要创建直接可以使用，window也可以直接省略
方法
与弹窗有关的方法：
alert() 显示有一段消息和确认的警告框
confirm()显示有一段消息和取消按钮的对画框
如果点击确定返回true反之返回false
prompt()显示可提示用户输入的对话框
与开发关闭有关的方法
close() 关闭浏览器窗口
谁调用我，我关谁
open() 打开一个新的浏览器窗口
返回新的窗口对象
定时器：setTimeout（“执行的代码”，毫秒值）一次性定时器
clearTimeout（ID）；取消一次性定时器
setIterval() 循环定时器
clearIterval
获取定时器的时候，返回值用于取消定时器

	Navigator：浏览器对象---没用
	Screen：显示器屏幕对象---没用
	History：历史记录对象
	Location：地址栏对象
Location：地址栏对象
	创建
		window.location
		location
	方法
		reload（） 重新加载当前文档 刷新
	属性
		href   =""; 地址

DOM
概念：文档对象模型
W3C DOM 标准被分为3个不同的部分
核心 DOM- 针对任何结构化文档的标准模型
Document:文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

	Node：节点对象，其他5个的父对象


核心DOM模型：
	Document:文档对象
		创建
		方法：
			获取Element对象：
				getElementById(): 根据ID属性值获取元素对象
				getElementsByTagName():根据元素名称获取元素对象们
				getElementsByClassName()：根据Class属性值获取元素对象们
				getElementsByName()：根据name属性值获取元素对象们
			创建其他DOM对象：
				create
	Element：元素对象
	removeAttribute():删除属性
	setAttribute:设置属性
	Node：节点对象，其他5个的父对象
	     特点所有的dom对象都可以被认为是一个节点
		方法：
			appendChild():向节点的子节点列表的结尾添加新的子节点
			removeChild():删除并返回当前节点的指定子节点
			replaceChild():用新的节点替换一个子节点
		parentNode 返回节点的父节点
HTML DOM
	1.标签体的设置和获取：innerHTML
	2.使用HTML元素对象的属性
	3.控制元素样式
		使用元素的style 属性来设置
		         div1.style.border='....'
		提前定义好类的选择器样式，通过元素的className属性来设置class属性值。	

事件
概念：某些组件被执行了某些操作后，触发某些代码的执行
事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮 文本输入框。。。
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件则触发执行某个监听器代码

常见事件
	点击事件
		onclick 单击事件
	                 ondblclick:双击事件 
	焦点事件
		onblur 失去焦点
			一般用于表单验证
		onfocus 元素获得焦点


	加载事件：
		onload 一张页面或一幅图片完成加载
	
	鼠标事件：
		onmousedown：鼠标按钮被按下
			定义方法时，定义一个形参接受even对象
			even对象的button属性可以获取哪个鼠标被点击
		onmouseup:鼠标按键被松开
		onmousemove：鼠标被移动
		onmouseover：鼠标移到某元素之上
		onmouseout :鼠标从某元素移开
	键盘事件
		onkeydown  键盘被按下
			even.keyCode获取键盘，=13为回车键
		onkeyup  松开
		onkeypress  按下并松开
	选择和改变
		onchange 域的内容被改变
		onselect   文本被选中
	表单事件
		onsubmit 确认按钮被点击
		onreset    重置按钮被点击