JavaScript知识提要

javascript笔记

一、js的简介

1、js是什么
	js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言
	特点：
		(1)交互性
		(2)安全性：js不能访问本地磁盘
		(3)跨平台：浏览器中都具备js解析器
2、js能做什么
	(1)js能动态的修改(增删)html和css的代码
	(2)能动态的校验数据
	
3、js历史及组成
	ECMAScript	BOM(浏览器对象模型)  DOM(文档对象模型)	
4、js被引入的方式
	(1)内嵌脚本
		<input type="button" value="button" onclick="alert('xxx')" />			
	(2)内部脚本
		<script type="text/javascript">
			alert("xxx");
		</script>
	(3)外部脚本
		首先先创建一个js文件
		其次在html中引入
			<script type="text/javascript" src="demo1.js"></script>
	
	js代码放在哪？
		放在哪都行 但是在不影响html功能的前提下 越晚加载越好

二、js基本语法

1、变量
	(1)
	var x = 5;
	x = 'javascript';
	var y = "hello";
	var b = true;
	(2)
	x = 5;

2、原始数据类型
	(1)number:数字类型
	(2)string：字符串类型
	(3)boolean:布尔类型
	(4)null:空类型
	(5)underfind:未定义
	
	注意：number、boolean、string是伪对象
	
	类型转换：
		number\boolean转成string
			toString();
		string\boolean转成number
			parseInt()
			parseFloat()
			boolean不能转
			string可以将数字字符串转换成number 如果“123a3sd5” 转成123
		强制转换
			Boolean() 	强转成布尔
				数字强转成布尔  非零就是true   零就是false
				字符串强转成布尔  非“”(空字符串)就是true   空字符串“”就是false
			Number()	强转成数字
				布尔转数字 true转成1  false转成0
				字符串转数字 不能强转

3、引用数据类型
	java:	Object obj = new Object();
	js:		var obj = new Object();
			var num = new Number();	

4、运算符
	(1)赋值运算符
		var x = 5;
	(2)算数运算符
		+ - * / %
		+: 遇到字符串变成连接
		-：先把字符串转成数字然后进行运算
		*: 先把字符串转成数字然后进行运算
		/: 先把字符串转成数字然后进行运算
	(3)逻辑运算符
		&&	||
	(4)比较运算符
		<	>	>=	<=	!=	==
		===:全等：类型与值都要相等
	(5)三元运算符
		3<2?"大于":"小于"
	(6)void运算符
		<a href="javascript:void(0);">xxxxxx</a>
	(7)类型运算符
		typeof:判断数据类型 返回我的数据类型
		instanceof：判断数据类型 是否是某种类型
		var obj = new Object();
		alert(typeof obj);//object
		alert(obj instanceof Object);//true


5、逻辑语句
	(1)if-else
		//条件:
		//数字非0 字符串非空====true
			if(9){
				alert("true--");
			}else{
				alert("false--");
			}
	(2)switch
		var x = "java";
		switch(x){
			case "css":
				alert("css");
				break;
			case "js":
				alert("js");
				break;
			case "java":
				alert("java");
				break;
			default:
				alert("def");
		}
	
	(3)for
		 for(var i = 0;i<5;i++){
			alert(i);
		 }
		 注：这里的 i 也是要申明的；
	(4)for in
		var arr = [1,3,5,7,"js"];
		 for(index in arr){//index代表角标
			//alert(index);
			alert(arr[index]);
		 }

三、js内建对象

(1)Number
	创建方式：
		var myNum=new Number(value);
		var myNum=Number(value);
	属性和方法：
		toString():转成字符串
		valueOf()：返回一个 Number 对象的基本数字值
(2)Boolean
	创建方式：
		var bool = new Boolean(value);	
		var bool = Boolean(value);
	属性和方法：
		toString():转成字符串
		valueOf()：返回一个 Boolean 对象的基本值(boolean)			
(3)String
	创建方式：
		var str = new String(s);
		var str = String(s);
	属性和方法：
		length:字符串的长度
		charAt():返回索引字符
		charCodeAt:返回索引字符unicode
		indexOf():返回字符的索引
		lastIndexOf();逆向返回字符的索引
		split();将字符串按照特殊字符切割成数组
		substr():从起始索引号提取字符串中指定数目的字符
		substring():提取字符串中两个指定的索引号之间的字符
		toUpperCase();转大写
	示例：
(4)Array
	创建方式：
		var arr = new Array();//空数组
		var arr = new Array(size);//创建一个指定长度的数据
		var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
		var arr = [];//空数组
		var arr = [1,2,5,"java"];//创建数组直接实例化元素
	属性和方法：
		length:数组长度
		join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
		pop():删除并返回最后元素
		push()：向数组的末尾添加一个或更多元素，并返回新的长度
		reverse();反转数组
		sort();排序
(5)Date
	创建方式：	
		var myDate = new Date();
		var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
	属性和方法
		getFullYear():年
		getMonth():月 0-11
		getDate():日 1-31
		getDay()：星期 0-6
		getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数
		toLocalString();获得本地时间格式的字符串
		
(6)Math
	创建方式：	
		Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，
		不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
	属性和方法
		PI：圆周率
		abs():绝对值
		ceil():对数进行上舍入
		floor():对数进行下舍入
		pow(x,y)：返回 x 的 y 次幂
		random():0-1之间的随机数
		round():四舍五入
(7)RegExp
	创建方式：	
		var reg = new RegExp(pattern);
		var reg = /^正则规则$/;
	规则的写法：
		[0-9] 
		[A-Z]
		[a-z]
		[A-z]
		\d 代表数据
		\D	非数字
		\w	查找单词字符
		\W	查找非单词字符
		\s	查找空白字符
		\S	查找非空白字符
		n+	出现至少一次
		n*	出现0次或多次
		n?	出现0次或1次
		{5} 出现5
		{2,8} 2到8次
	方法：	
		test(str):检索字符串中指定的值。返回 true 或 false
	需求：
		校验邮箱：
		var email = haohao_827@163.com
		var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
		reg.test(email);

四、js的函数

1、js函数定义的方式
	(1)普通方式
		语法：function 函数名(参数列表){函数体}
		示例：
			function method(){
				alert("xxx");
			}
			method();
	(2)匿名函数
		语法：function(参数列表){函数体}
		示例：
			var method = function(){
				alert("yyy");
			};
			method();
	(3)对象函数
		语法：new Function(参数1,参数2,...,函数体);
		注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
		示例：
			var fn = new Function("a","b","alert(a+b)");
			fn(2,5);
2、函数的参数
	(1)形参没有var去修饰
	(2)形参和实参个数不一定相等
	(3)arguments对象 是个数组 会将传递的实参进行封装
	function fn(a,b,c){
		//var sum = a+b+c;
		//alert(sum);
		//arguments是个数组 会将传递的实参进行封装
		for(var i=0;i<arguments.length;i++){
			alert(arguments[i]);
		}
	}
	fn(1,2,4,8);
	
3、返回值
	(1)在定义函数的时候不必表明是否具有返回值
	(2)返回值仅仅通过return关键字就可以了 return后的代码不执行
	function fn(a,b){
		return a+b;
		//alert("xxxx");
	}
	alert(fn(2,3));

4、js的全局函数
	(1)编码和解码
		encodeURI()   decodeURI()
		encodeURIComponet()	  decodeURIComponent()
		escape()	unescape()
		三者区别：
			进行编码的符号范围不同吧，实际开发中常使用第一种
	(2)强制转换
		Number()
		String()
		Boolean()
	(3)转成数字
		parseInt()
		parseFloat()
	(4)eval()方法	
		将字符串当作脚本进行解析运行
		//var str = "var a=2;var b=3;alert(a+b)";
		//eval(str);
		function print(str){
			eval(str);
		}
		print("自定义逻辑");

五、js的事件

事件
事件源
响应行为
1、js的常用事件
	onclick:点击事件
	onchange:域内容被改变的事件
		需求：实现二级联动
		<select id="city">
			<option value="bj">北京</option>
			<option value="tj">天津</option>
			<option value="sh">上海</option>
		</select>
		<select id="area">
			<option>海淀</option>
			<option>朝阳</option>
			<option>东城</option>
		</select>
		<script type="text/javascript">
			var select = document.getElementById("city");
			select.onchange = function(){
				var optionVal = select.value;
				switch(optionVal){
					case 'bj':
						var area = document.getElementById("area");
						area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
						break;
					case 'tj':
						var area = document.getElementById("area");
						area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
						break;
					case 'sh':
						var area = document.getElementById("area");
						area.innerHTML = "<option>浦东</option><option>杨浦</option>";
						break;
					default:
						alert("error");
				}
			};				
			
		</script>
	onfoucus:获得焦点的事件
	onblur:失去焦点的事件
		需求：	当输入框获得焦点的时候，提示输入的内容格式
				当输入框失去焦点的时候，提示输入有误
		<label for="txt">name</label>
		<input id="txt" type="text" /><span id="action"></span>
		<script type="text/javascript">
			var txt = document.getElementById("txt");
			txt.onfocus = function(){
				//友好提示
				var span = document.getElementById("action");
				span.innerHTML = "用户名格式最小8位";
				span.style.color = "green";
			};
			txt.onblur = function(){
				//错误提示
				var span = document.getElementById("action");
				span.innerHTML = "对不起 格式不正确";
				span.style.color = "red";
			};
		</script>
		
	onmouseover:鼠标悬浮的事件
	onmouseout:鼠标离开的事件
		需求：div元素 鼠标移入变为绿色 移出恢复原色
		#d1{background-color: red;width:200px;height: 200px;}
		<div id="d1"></div>
		<script type="text/javascript">
			var div = document.getElementById("d1");
			div.onmouseover = function(){
				this.style.backgroundColor = "green";
			};
			div.onmouseout = function(){
				this.style.backgroundColor = "red";
			};
		</script>
	

	onload:加载完毕的事件
		等到页面加载完毕在执行onload事件所指向的函数
		<span id="span"></span>
		<script type="text/javascript">
			window.onload = function(){
				var span = document.getElementById("span");
				alert(span);
				span.innerHTML = "hello js";
			};
		</script>
		
2、事件的绑定方式
	(1)将事件和响应行为都内嵌到html标签中
		<input type="button" value="button"  onclick="alert('xxx')"/>
	(2)将事件内嵌到html中而响应行为用函数进行封装
		<input type="button" value="button" onclick="fn()" />
		<script type="text/javascript">
			function fn(){
				alert("yyy");
			}
		</script>
	(3)将事件和响应行为 与html标签完全分离
		<input id="btn" type="button" value="button"/>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				alert("zzz");
			};
		</script>
	
	****this关键字
		this经过事件的函数进行传递的是html标签对象
		<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
		<script type="text/javascript">
			function fn(obj){
				alert(obj.name);
			}
		</script>

3、阻止事件的默认行为
	IE：window.event.returnValue = false;
	W3c: 传递过来的事件对象.preventDefault();
	//ie：window.event.returnValue = false;
	//W3c：传递过来的事件对象.preventDefault();
	//W3c标准
	if(e&&e.preventDefault){
		alert("w3c");
		e.preventDefault();
	//IE标签
	}else{
		alert("ie");
		window.event.returnValue = false;
	}
	
	
	//通过事件返回false也可以阻止事件的默认行为
	<a href="demo11.html" onclick="return false">点击我吧</a>

4、阻止事件的传播
	IE：window.event.cancelBubble = true;
	W3c: 传递过来的事件对象.stopPropagation();
	if(e&&e.stopPropagation){
		alert("w3c");
		e.stopPropagation();
	//IE标签
	}else{
		alert("ie");
		window.event.cancelBubble = true;
	}	

六、js的bom

(1)window对象
	弹框的方法：
		提示框：alert("提示信息");
		确认框：confirm("确认信息");
			有返回值：如果点击确认返回true  如果点击取消 返回false
			var res = confirm("您确认要删除吗？");
			alert(res);
		输入框：prompt("提示信息");
			有返回值：如果点击确认返回输入框的文本 点击取消返回null
			var res =  prompt("请输入密码？");
			alert(res);
	open方法：
		window.open("url地址");			
		open("../jsCore/demo10.html");
		
	定时器：
		setTimeout(函数,毫秒值);
			setTimeout(
				function(){
					alert("xx");
				},
				3000
			);
		clearTimeout(定时器的名称);
			var timer;
			var fn = function(){
				alert("x");
				timer = setTimeout(fn,2000);
			};
			var closer = function(){
				clearTimeout(timer);
			};
			fn();
		setInterval(函数,毫秒值);
		clearInterval(定时器的名称)
			var timer = setInterval(
			function(){
				alert("nihao");
			},
			2000
		);
		var closer = function(){
			clearInterval(timer);
		};
		
	需求：注册后5秒钟跳转首页
	恭喜您注册成功，<span id="second" style="color: red;">5</span>秒后跳转到首页，如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
	<script type="text/javascript">
		var time = 5;
		var timer;
		timer = setInterval(
			function(){
				var second = document.getElementById("second");
				if(time>=1){
					second.innerHTML = time;
					time--;
				}else{
					clearInterval(timer);
					location.href="../jsCore/demo10.html";
				}
			},
			1000
		);
	</script>
	
(2)location	
	location.href="url地址";
(3)history
	back();
	forward();
	go();
	<a href="demo7.html">后一页</a>
	<input type="button" value="上一页" onclick="history.back()">
	<input type="button" value="下一页" onclick="history.forward()">
	
	<input type="button" value="上一页" onclick="history.go(-1)">
	<input type="button" value="下一页" onclick="history.go(1)">

七、js的dom

1、理解一下文档对象模型
	html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
	在dom树当中 一切皆为节点对象
2、dom方法和属性
	笔记见代码