javaScript简介

JAVASCRIPT（JavaScript简写js，文件的后缀名也是 demo.js）

javaScript的简介

	1. js是基于对象和事件驱动的脚本语言，作用在客户端（浏览器）上。
	2. js的特点：
			* 交互性
			* 安全性：（不可以访问本地的硬盘）
			* 跨平台性：因为浏览器就可以解析js的文件。
	3. javaScript和java不同（一点关系没有）
		* Netscape（网景），静态的效果。livescript（javaScript的前身）
		* java诞生了，升级了，改名javaScript。
		* 巨头：自己开发一套（jscript）
		* 找一些公司推出的标准：	SUN	微软	ECMA（欧洲计算机制造协会），联合推出现在的标准。
		* ECMAScript：标准。基础上扩展。
	4. javaScript和java的区别
		* js的基于对象，java是面向对象。
		* js解析就可以执行，java先编译再执行。
		* js是弱类型的语言，java是强类型语言。

javaScript语言的组成

		* ECMAScript	标准（js的语法，变量，函数）
		* BOM			（Browser Object Model）	浏览器对象模型
		* DOM			（Document Object Model）	文档对象模型				

javaScript的语法

		* 把js和HTML的结合一起。（2两种方式）
			1.  js和HTML的结合
				* HTML的文件提供了一个标签	<script type="text/javascript">js的代码</script>，标签可以放在HTML文件的任意位置上。
            2. 引入外部的文件，有一个外部的文件。编写js文件。
				* <script src="引入js文件（相对路径）" >
				* 如果script通过src的属性引入了外部的文件，里面的js代码就不会执行了。	
				* </script>，标签可以放在HTML文件的任意位置上。	
		    3.  关键字
			 	* var	声明变量		
			4. 标示符
				* 和java一样
			5.  注释
				* 和java一样
			6. 变量		
				* 声明变量，只使用一个关键字	var num = 123;  var str = "abcde"; 
			7. 5种基本数据类型
				* Undefined、Null、Boolean、Number 和 String 
					* String		字符串类型
						* js中双引号和单引号都代表的是字符串
					* Number		数字类型
						* 不区分整数和小数
					* Boolean		布尔类型
					* Null			空，给引用赋值的
					* Undefined		未定义（声明变量，没有赋值）					
			8.  声明变量，使用var关键字	
				* typeof() 判断当前变量是什么类型的数据		
			9. 运算符
				* js的运算符
					* 算术运算符
						* 0或者null是false，非0或者非null是true，默认用1表示。
						var num = 3710;
						alert(num/1000*1000);
							* 不区分整数和小数
					* 赋值运算符
						* 和java是一样的
					* 比较运算符
						* ==	比较值是否相同
						* ===	比较值和类型是否相同
					* 逻辑运算符
						* 和java中一样	
					* 三元运算符
						条件?值1:值2
			10. js的数组
				* js的数组
				* java	String [] str = {};
				* 声明数组
					* var arr = [11,33,55];
					* var arr = new Array(4);		声明数组，长度是4
					* var arr = new Array(1,2,3,4);	声明数组，元素是1 2 3 4					
				11.  数组的属性
					* 长度：length
					* 数组的长度是可变的。

js的方法

			* java中	public String 方法名称(参数列表(int num,String str)){
							方法体;
							return null;
						}			
			* js中，通过关键字function	声明方法。
				function 方法名称(参数列表 (num,str)){
					方法体;
					return;
				}
				* 参数列表：不能使用var关键字
				* 返回值：可写可不写的，如果有写返回值，如果没有，返回值可以省略不写。
			* 调用执行。	
			* 在函数的内部，有一个数组，装传过来的参数的
				arguments

js的动态函数和匿名函数

		* js的动态函数和匿名函数
			* 动态函数
				function getSum(){
					return 50;
				}
				js提供了内置对象	Function
			* 匿名函数
				* 没有名称的函数

js的全局变量和局部变量

		* 全局变量：在<script>标签内部定义的变量，全局变量。
		* 局部变量：在函数的内部定义的变量，局部变量。													

javaScript的对象和API

		* String 对象
			* 声明
				var str = "abc";
				var str = new String("abc");	
			* 属性：length：字符串的长度	
			* 方法：
				* 和HTML相关的方法（书写没有提示）
					* bold()			使用粗体显示显示字符串
					* fontcolor(color)		参数是必须的，设置字体的颜色
					* fontsize(size)		设置字体的大小（1-7）
					* italics()				斜体
					* link(url)				设置链接
					* sub()					下标
					* sup()					上标
					
				* 和java中String对象类似的
					* charAt(index)				返回指定位置的字符
					* indexOf(str,fromIndex)	检索字符串，没有返回-1
					* lastIndexOf(str,fromIndex)	从后向前检索字符串
					* replace(要替换的字符串,替换成什么)		
					* substring(start,stop)				截取字符串
					* substr(start,length)				截取字符串，从哪开始，截取多长

			* 定义一个方法：可以去掉字符串两边的空格。	
				var str = "  ab c     ";
				var newStr = mytrim(str);
				newStr = "ab c";
			* Array对象
				* 声明数组
					var arr = [12,33];
					var arr = new Array(4,4);
				* 属性：length：长度
				* 方法：
					* concat(元素，数组);	返回新的数组
					* join(s)			通过s标识（-），进行分隔，返回字符串
					* pop()				删除末尾的元素，返回最后一个元素
					* push()			向末尾添加元素，返回新数组的长度
					* sort()			排序的方法	
			* Date日期对象
				var date = new Date();	当前的日期
					* Date日期对象
				var date = new Date();	当前的日期				
				* toLocaleString()	转换本地的日期格式
				* toLocaleDateString()	只包含日期
				* toLocaleTimeString()	只包含时间
				* getDate()			返回一个月中的某一天（1-31）
				* getDay()			返回一周中的某一天(0-6)
				* getMonth()		返回月份（0-11）	+1
				* getFullYear()		返回年份
				* getTime()			返回毫秒数
				* setTime()			通过毫秒数获取日期
					* var date3 = new Date(1415937050973);
				* parse(str)		解析字符串，返回毫秒数
					Date.parse(str);
					str：	
						2014-11-14	解析不了
						11/14/2014	可以解析
						2014,11,14	可以解析	
			* Math 和数学相关的对象
				* math对象（静态的方法）
				* ceil(x)		上舍入
				* floor(x)		下舍入
				* round(x)		四舍五入
				* random()		0-1的随机数
			* RegExp对象
				* 正则表达式对象
				* 应用：编写注册的表单，对表单输入的内容进行校验。
					* var reg = new RegExp("表达式");（开发中不经常使用）
					* var reg = /表达式/			开发中经常使用
						* var reg = /^表达式$/		开发中经常使用
						* exec(string)		不经常使用
							* 如果匹配，返回匹配的结果
						* test(string)		经常使用
							* 如果匹配，返回是true，如果不匹配，返回是false
						if(reg.test("abc")){
							// 匹配上了
						}else{
						}	

全局函数

			* 使用全局函数，不需要任何的对象。
			* 全局函数可以拿过来使用。
			* global帮着管理全局函数。
			
			* 全局函数
			* eval()		可以解析字符串，执行字符串中间的js代码
			* isNaN()		判断是否是非数字值
			* parseInt()	解析字符串，返回整数
			
			* encodeURI()	进行编码
			* decodeURI()	解析解码
			
			* encodeURIComponent()
			* decodeURIComponent()
			
			* escape()
			* unescape()

BOM 浏览器对象模型(Brower Object Model)

			Window  		窗口对象
			Navigator 		和浏览器版本相关的对象
				* userAgent	获取浏览器的相关的信息
				* window.navigator.userAgent	window可以省略不写
			Screen 			和屏幕相关的对象
			History 		和浏览器历史相关
				* back()		返回上一个页面
				* forward()		去下一个页面
				* go()
					* 传参数	go(1)	等于forward()	
							go(-1)	等于back()
			Location 		和浏览器地址相关的对象
			* href	获取和设置浏览器的路径
			Document		文档对象

事件

		* onclick	点击事件
		* 值的写法：	
		* document对象	
			* alert()		弹出提示框
			* confirm("参数")		询问框
				* 提供俩按钮，确定和取消
				* 如果点击是确定，返回true，如果点击取消，返回false
				
			* moveBy()			移动浏览器
				
			* setInterval("函数",毫秒值)		定时相关的
				* 每隔毫秒值执行一次函数
				* 返回唯一的id值
				
			* setTimeout("函数",毫秒值)		
				* 到了毫秒值后执行一次函数
				* 返回唯一的id值
				
			* 清除定时
				clearInterval(id的值)		
				clearTimeout()
				
			* close()	关闭浏览器的窗口
			* open()	打开浏览器窗口
			
			* 属性：
				* opener 返回对创建此窗口的窗口的引用。 
				* win  open()	弹出baidu的窗口
					
					在baidu窗口中  baidu.opener	得到了win的引用。
					
			* document对象方法
				* document.getElementById("nameId"); 获取到是input标签的对象	

DOM 文档对象模型(Document Object Model)

	* 文档：标记型文档	（HTML/XML）
	* 对象：封装属性和行为（方法）
	* 模型：共性特征的体现
	* DOM解析HTML
		* 通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。
			<span id="spanId">文本</span>
		* DOM想要操作标记型文档先解析。（解析器）
			* DOM解析HTML（浏览器就可以HTML）
	* DOM的三个级别：
	* DHTML不是一种编程语言。
		* html		：封装数据。	<span>展示给用户的数据</span>
		* css		：设置样式（显示效果）
		* dom		：操作HTML（解析HTML）
		* js		：提供逻辑（判断语句，循环语句）
		
	* Document：代表整个文档。
		* 方法：
			getElementById("id的值");			通过元素的id的属性获取元素（标签）对象。
			getElementsByName("name属性值");		通过名称获取元素对象的集合（返回数组）
			getElementsByTagName("标签名称");	通过标签名称获取元素对象的集合（返回数组）
			* write("文本的内容（html的标签）")		把文本内容写到浏览器上。
			* createElement("元素名称");		创建元素对象
			* createTextNode("文本内容")		创建文本对象
			* appendChild("子节点")				添加子节点
			<span id=""></span>
	* Element对象
		* 获取元素对象
			* getAttribute("属性名称");	获取属性的值
			* setAttribute("属性名称","属性的值");	设置或者修改属性的值
			* removeAttribute("属性名称");		删除属性
		* 获取元素下的所有子节点
			* ul.getElementsByTagName();
	* Node：节点对象
		* nodeName		：节点名称
		* nodeType		：节点类型
		* nodeValue		：节点的值
		* parentNode	获取父节点（永远是一个元素节点）
		
		IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox
		firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点
		lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点
		nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点
		previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点
		例：
			<ul>
				<li>北京</li>
			</ul>	
		* 如果通过ul获取北京的子节点，使用是	ul.firstElementChild;	获取北京的子节点（IE9-11 Chrome FireFox）
			* 但是如果IE6-8，需要使用firstChild;	
		<span id="spanId">
			文本内容
		</span>	
		* 使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）
		* 方法
			* hasChildNodes()		检查是否包含子节点
			* hasAttributes()		检查是否包含属性
			* appendChild(node)			父节点调用，在末尾添加子节点
			* insertBefore(new,old)		父节点调用，在指定节点之前添加子节点
			* replaceChild(new,old)		父节点调用，替换节点
			* removeChild(node)			父节点调用,删除节点
			* cloneNode(boolean)		不是父节点调用,复制节点
				* boolean	：如果是true，复制子节点
							：如果是false，不复制子节点，默认是false
		* innerHTML	：获取和设置文本内容。
		* innerHTML属性：
			* 获取文本内容
			* 设置文本内容
		* 事件：
			onclick		点击事件
			onload		加载事件
			onfocus		获取焦点事件
			onblur		失去焦点事件
		* 全选/全不选/反选的练习
			<input type="checkbox" />
			* 指定默认值：checked	只要出现在<input type="checkbox" />,对号就勾上了。
		* 鼠标移动的事件
			onmousemove
			onmouseout			
			onmouseover			
		* 鼠标点击事件
			onclick			单击
			ondblclick		双击
		* 加载和卸载
			* onload		加载
			* onunload		卸载
		* 获取焦点和失去焦点
			* onfocus		获取焦点
			* onblur		失去焦点
		* 键盘
			* onkeyup		按下抬起
		* 改变事件
			* onchange

控制表单的提交

	* onsubmit事件
	* 控制表单提交。	需要把onsubmit作用在表单上		<form  onsubmit="">
	* 值的写法：onsubmit="return run()"
	* run()必须要有返回值，必须返回true或者false。
	* 如果返回是true，表单可以提交，如果返回false，表单不能提交。如果没有返回值，默认是表单提交。
	* run()的逻辑写什么？
		* 表单的校验。
	* 可以通过js提交表单。
			// 通过id获取form
			// var form = document.getElementById("formId");
			// 通过form的name的属性获取表单
			var form = document.form1;
			//var name = document.form1.username.value;
			//alert(name);
			// 设置提交的路径
			form.action = "success.html";
			form.method = "get";
			// 提交表单
			form.submit();