[JavaScript知识库]JavaScript

学习目标：

学习内容：

学习时间：

学习产出：

JavaScript概述

JavaScript历史

原名：LiveScript 是美国的网景公司开发的一种脚本语言

网景公司和Sun公司合作 改名为JavaScript

脚本语言：例如sql 不需要编译，由某种解释器解释执行

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

JavaScript作用

? 1.响应网页中产生的事件

? 2.进行客户端表单验证

? 3.动态改变标签样式

JavaScript、HTML、CSS之间的关系

HTML：网页基本结构，内容

CSS：修饰网页样子

JavaScript：网页的行为和动态操作

基础语法

第一个js程序

		<!-- 导入外部的js脚本文件 -->
		<script src="js/out.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		    //window.alert()
			alert("hello javaScript");//消息提示框
		</script>

对话框

? alert(‘welcome!’); 提示对话框

变量

? 声明变量 var 关键字
? JavaScript是弱类型语言
? java是强类型

		/* var a = 10;
			    a = "aa";
			alert(a);
			var b = "abc"; */

数据类型

		/* 1.数值型  整数  浮点*/
		  var a = 10;
		  var b = 10.5;
		  
		  /* 2.布尔型  true  false*/
		  var c = true;
		  var d = false;
		  //alert(a==b);
		  
		  /* 3.字符串  "" '' 都表示字符串*/
		  var e = "abc";
		  var f = 'abcdefg';
		  //alert(e+f);
		  //alert(typeof(f)); typeof(变量) 获取变量的类型
		  
		  /* 4. undefined类型   声明未初始化赋值的变量*/
		  var g;
		  //alert(g);
		  
		  /*5.Object类型  对象型*/
		  var date = new Date();
		  date.getFullYear();
		  date.getMonth();
		  date.getDate();

算数运算符

			 /* 算术运算符  
			    + - * / % ++ --
				
				+ 加法运算
				+ 字符串连接
			 */
			var b = "b";
			var c = 10;
			var d = 10.5;
			/* console.log(a+b);
			console.log(c+d);
			console.log(a+c); 字符串+数值=字符串  连接 */
			
			console.log(a-c); /* - * / % 数值字符串(隐式转换)-数值 = 数值  */
			console.log(d-c);
			console.log(b-c);/* 尝试将字符串转为数值,如果不能转换返回 NaN  not a number */
			
			console.log(a*c);
			console.log(a/c);

赋值运算

			/* 赋值运算 */
			var a = "10";
			var b = 10;
			var c = 5;
			
			/* console.log(a+=b);
			console.log(c+=b); */
			//console.log(a-=b);

比较运算符

		/*  =(赋值) ==(比较值是否相等) ===(比较值和类型是否相等  全等) */
			console.log(a==b); //比较值 也会发生隐式转换
			console.log(a===b); //比较值和类类型是否相等
			
			console.log(a>b);

逻辑运算符

&& || !

条件运算符

var result = (条件表达式)?结果1:结果2

控制语句

第一种是选择结构

? 1.单一选择结构（if）

? 2.二路选择结构（if/else）

? 3.多路选择结构（switch）

第二种类型的程序控制结构是循环结构。

? 1.由计数器控制的循环（for）

? 2.在循环的开头测试表达式（while）

? 3.在循环的末尾测试表达式（do/while）

条件语句

基本格式

? if（表述式）

? 语句段１；

? else

? 语句段２；

多路选择

		var e = "2";
			switch(e){//注意类型一致
				case "2": console.log("aaaaaa");
			}	

循环语句

for（初始化；条件；增量）{

? 语句集；

}

while（条件）{

? 语句

}

break和continue语句

? 使用break语句使得循环从for或while中跳出，

? continue使得跳过循环内剩余的语句而进入下一次循环

do{

? ……

}while(条件);

函数

		/* 声明函数 */
           function test(){
			   console.log("test()被调用了");
		   }
		//调用函数
		   test();

		function test2(a,b){
			  return a+b;
		  }
		  var  res = test2(10,4);

全局函数

		//全局函数
		  var a = 10.5;
		  var b = "10";
		  var c = "15a1";
		  var d = "a15a1";
		  console.log(parseInt(a));//浮点数 转为 整数
		  console.log(parseInt(b)+a);
		  console.log(parseInt(c)+a);
		  console.log(parseInt(d)+a);
		  //parseInt() 将浮点数转为 整数  将字符串数字转为 整数  将字符串数字开头部分转为整数, 字母开头返回NaN
		  console.log(a+b*1);
		  
		  var x = 10.5;
		  var y = "a10.8a1";
		  console.log(parseFloat(x));
		  console.log(parseFloat(y));
		  
		  //typeof(变量) 返回变量的数据类型
		  console.log(typeof(a));
		  console.log(typeof(b));
		  console.log(typeof(true));
		  
		  //eval() 课运算某个字符串   可以把一段字符串当做js脚本运行
		  
		 /* var r = "alert(2+3)";
		  eval(r); */
		  
		  var r = "2+3*2";
		  console.log(eval(r));

内置对象

String

属性

length 用法：返回该字符串的长度.

方法

charAt(n)：返回该字符串位于第n位的单个字符.

indexOf(char)：返回指定char首次出现的位置.

lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.

substring(start,end) ：返回原字符串的子字符串，substring(开始位置,结束位置(上一位))

substr(start,length) ：返回原字符串的子字符串，substr(开始位置,截取的长度)

. split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔 符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

例如：‘1&2&345&678’.split(’&’)返回数组：1,2,345,678。

Array数组

		//Array 数组对象
			//数组创建方式1:
			/* var array = new  Array();
			    array[0] = 1;
				array[1] = "2";
				array[3] = true;
				console.log(array); */
			//创建方式2
			/* var array = new Array(1,2,"abc",true);
			console.log(array); */
			//方式3:
			/* var array  = [1,2,"abc",true];
			console.log(array); */

属性

length ：数组的长度，即数组里有多少个元素。

方法

concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,…,arrayX)

pop() 删除并返回最后一个元素

push() 向末尾添加n个元素,并返回新数组长度

shift() 删除并返回第一个元素

slice() 从数组中截取 slice(开始位置,结束位置(上一位))

splice() 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。

splice(index(删除的位置),howmany(数量,为0不删除),item1,…,itemX(插入的元素))

join(<分隔符>) ：用指定的字符,将数组的每个元素连接为一个字符串

reverse() 使数组中的元素顺序反过来。

		//排序
			/* var x = ["b","c","a","d"];
			console.log(x.sort()); */
			
			var x = [2,11,3,4];
			          //将numberSort()函数作为参数,传入到sort()中
			console.log(x.sort(numberSort));
			
			//需要定义一个排序函数,然后将排序函数传入到sort()方式中
			function numberSort(a,b){
				return b-a;
			}

日期

获取日期

new Date() 返回当日的日期和时间

getFullYear() 返回四位数字年份

getDate() 返回一个月中的某一天 (1 ~ 31)

getMonth() 返回月份 (0 ~ 11)

getDay() 返回一周中的某一天 (0 ~ 6)

getHours() 返回 Date 对象的小时 (0 ~ 23)

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

设定日期

setDate() 设置 Date 对象中月的某一天 (1 ~ 31))

setMonth() 设置 Date 对象中月份 (0 ~ 11))

setYear() 设置 Date 对象中的年份（两位或四位数字）

Math

Math 对象，提供对数据的数学计算。

属性

PI 返回π（3.1415926535…)。

方法

Math.abs(x) 绝对值计算；

Math.pow(x,y) 数的幂；x的y次幂

Math.sqrt(x) 计算平方根；

Math.ceil(x) 对一个数进行上舍入

Math.floor(x) 对一个数进行下舍入。

Math.round(x) 把一个数四舍五入为最接近的整数

Math.random() 返回 0 ~ 1 之间的随机数

Math.max(x,y) 返回 x 和 y 中的最大值

Math.min(x,y) 返回 x 和 y 中的最小值

事件

标签可以产生事件
事件会触发函数
鼠标左键单击事件 onclick 事件
鼠标左键双击事件 ondblclick 双击事件
输入框获得鼠标焦点时触发 onfocus 聚焦事件
输入框失去鼠标焦点时触发 onblur 失焦事件
鼠标移入到标签上触发 onmouseover 移入事件
鼠标移出标签触发 onmouseout 移出事件
键盘按下时触发 onkeydown
键盘抬起时触发 onkeyup
当网页加载后自动触发 onload
当输入框失去鼠标焦点 且 内容发生改变时触发. onchange

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
			function test(){
				console.log("test被调用了");
			}
			
		</script>
	</head>
	<body onload="test()">
		<input type="button"  value="单击" onclick="test()"/>
		<div onclick="test()">div</div>
		<input type="button"  value="双击" ondblclick="test()"/>
		<br/>
		<input type="text" onfocus="test()" />
		<br/>
		<input type="text" onblur="test()" />
		<div style="background-color: aqua;width: 200px; height: 50px;" onmouseover="test()" onmouseout="test()">
		</div>
		<br/>
		<input type="text" onkeydown="test()" />
		<br/>
		<input type="text" onkeyup="test()" />
		<br/>
		<input type="text" onchange="test()" />
	</body>
</html>

事件对象

Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。

type 事件类型

Button 被点击的鼠标键位

altKey 按下altKey返回true

ctrlKey 按下ctrlKey返回true

shiftKey按下shiftKey返回true

keyCode 返回被按下的键位编码

offsetX 当前标签内的鼠标X轴

offsetY 当前标签内的鼠标Y轴

clientX 鼠标在浏览器内部X轴

clientY鼠标在浏览器内部Y轴

screenX 鼠标在显示器内的X轴

screenY鼠标在显示器内的Y轴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(a,e){
				//console.log(e.offsetX+"---"+e.offsetY);
				//console.log(e.screenX+"---"+e.screenY);
				
				console.log(e.keyCode);
				console.log(e.ctrlKey);
				console.log(e.altKey);
				console.log(e.shiftKey);
				

			}
		</script>
	</head>
	<body>
		<!--  
		  οnclick="test(1,event)"  事件产生的同时,会创建一个event事件对象,此对象中可以包含事件的一些信息.
		          event.button 鼠标标记位 0-左键  1-滚轮  2-右键
				  event.type 事件的类型
				  e.offsetX+"---"+e.offsetY 获得鼠标在当前标签中的坐标
				  e.clientX+"---"+e.clientY 获得鼠标在浏览器中的坐标
				  e.screenX+"---"+e.screenY 获得鼠标在显示器中的坐标
		          
				  e.keyCode 获得按键的编码 
				  e.altKey 按下alt键返回true
				  e.ctrlKey
				  e.shiftKey
		 -->
		<input type="button" value="测试" onmousedown="test(1,event)" />
		<div onclick="test(1,event)" style="background-color: antiquewhite; width: 200px; height: 200px; margin-top: 100px;">
			
		</div>
		
		<input type="text" onkeydown="test(1,event)"/>
		
	</body>
</html>

HTML DOM

DOM是Document Object Model文档对象（网页中的标签）模型的缩写

通过html dom，可用javaScript操作html文档的所有标签.

js要对网页中的标签进行操作,那么js认为网页中每个标签都是一个对象(dom对象)

操作网页就可以认为是操作对象.

那么我们想要在js中对网页中的标签进行操作,
首先要获得网页中的标签, 要操作,先得到
如何获得网页中的标签:
document对象: 表示整个html文档,当浏览器加载网页时,会创建一个document对象
通过 id 找到 HTML 标签

document.getElementById(“id");

通过标签名找到 HTML 标签

document.getElementsByTagName(“p”);

通过类名找到 HTML 标签

document.getElementsByClassName(“p”);

通过name找到 HTML 标签

document.getElementsByName(“name");

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		   前面讲完了js的基本语法  变量,数据类型,运算符,控制语句,函数,内置对象.
		   又讲了标签可以产生事件,事件可以调用(触发)函数. 本质就是在js函数中又反过来对网页上的标签进行操作.
		   
		   html DOM对象 是一类对象的统称
		   DOM是Document Object Model文档对象（网页中的标签）模型的 缩写
		   
		   js要对网页中的标签进行操作,那么js认为网页中每个标签都是一个对象(dom对象)
		   操作网页就可以认为是操作对象.
		   
		   那么我们想要在js中对网页中的标签进行操作,
		   首先要获得网页中的标签,  要操作,先得到
		   如何获得网页中的标签:
		    document对象: 表示整个html文档,当浏览器加载网页时,会创建一个document对象
			通过id获得: document.getElementById("id");  返回对应id的标签对象
		
			操作网页:
			 	1.标签体中的内容 innerHTML  = 
			 	2.操作css obj.style.属性
				3.操作标签数性  obj.属性
				4.事件的其它用法
		 -->
		 <script type="text/javascript">
		 	
			function oper(){
			   var div1obj = document.getElementById("div1");
			   var div2obj = document.getElementById("div2");
			     //操作1: 对标签体中的内容进行操作
			       div2obj.innerHTML = div1obj.innerHTML+"aaaaaaaaaa";
			    //操作2: 操作标签的css
				     div1obj.style.display = "none";
					 div2obj.style.backgroundColor = "red";
					 div2obj.style.width="200px";
			}
			
			function oper1(){
				//操作3: 标签属性
				var textObj1 = document.getElementById("text1");
				var textObj2 = document.getElementById("text2");
				    textObj2.value = textObj1.value;
					 textObj1.value= "";
					 textObj1.type="button";
			}
			
			function changeColor(c){
				var bodyobj = document.getElementById("bodyId");
				bodyobj.style.backgroundColor = c;
			}
		 </script>
	</head>
	<body id="bodyId">
		<input type="button" value="隐藏" onclick="oper()" />
		<div id="div1">
			<b>div1</b>
		</div>
		<div id="div2">
		</div>
		
		<input  type="text" id="text1"  value=""/>
		<input type="text" id="text2"  value=""/>
		<input type="button" value="测试" onclick="oper1()" />
		
		<!-- 写三个按钮,分别是 绿色,红色,蓝色点击时改变网页的背景颜色 -->
		<input type="button" value="红色"  onclick="changeColor('red')"/>
		<input type="button" value="绿色"  onclick="changeColor('green')"/>
		<input type="button" value="蓝色"  onclick="changeColor('blue')"/>
	</body>
</html>

html dom 使javaScript有能力对html事件做出反应。

		<script type="text/javascript">
		 	/* function test(){
				 
			 } */
			               //匿名函数
			 window.onload=function(){  //在js中为onload事件 绑定一个处理函数
				 
				 var btn1 = document.getElementById("btn1");
				 //在js代码为标签事件绑定处理函数,将js函数从html中分离出来
				     btn1.onclick = function(){
				 					 alert(111);
				 				 }
								 
			 }
		 </script>

根据标签名获取指定名称的标签对象, 得到的是一个集合, 哪怕满足条件的只有一个

		<script type="text/javascript">
		 	 
			 function test(){
				 
				 //var objs = document.getElementsByTagName("input");
				 //var objs = document.getElementsByClassName("h");
				 var objs = document.getElementsByName("c");
			     for (var i = 0; i < objs.length; i++) {
			     	    objs[i].checked = true;
			     }
			 }	 
			 
			 window.onload=function(){
				 var objs1 = document.getElementsByClassName("c1");
				 for (var i = 0; i < objs1.length; i++) {
					objs1[i].onclick = function(){
						  alert(this.value); //批量为多个标签的事件绑定处理函数
					}
				 }
			 }
 	
		 </script>

浏览器对象

window

window它表示浏览器窗口

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员.

? 全局变量是 window 对象的属性。

? 全局函数是 window 对象的方法。

? 甚至 html dom 的 document 也是 window 对象的属性之一。

? window.document.getElementById(“header”);

Window对象常用的属性：

? window.innerHeight 浏览器窗口的内部高度

? window.innerWidth 浏览器窗口的内部宽度

? window.parent获得父级窗口对象(父子级之间调用)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			//console.log(window.innerWidth+"::"+window.innerHeight);
			
			//子窗口内容传递给父窗口
			 function show(msg){
				 var msgdiv = document.getElementById("msgshow");
				  msgdiv.innerHTML  = msg;
			 } 
			 
			 //打开新窗口
			 function openNewWin(e){
				 var x = e.screenX;
				 var y = e.screenY;
				 //window.open(‘url’, ‘name’,’features’) - 打开新窗口 
				 //features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。
				 window.open("child.html","child","width=400,height=400,left="+x+",top="+y);
			 }
		</script>
	</head>
	<body>
		父
		<div id="msgshow"></div>
		 <iframe src="child.html" name="aa"></iframe>
		 
		 <input type="button" value="打开新窗口" onclick="openNewWin(event)" />
		 
		 <a href="http://www.baidu.com" target="child">百度</a>
	</body>
</html>

Location

location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新

的页面。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		     //alert(location.href); 获得当前窗口中的页面地址
			 //location.href =  'child.html';  重新设置新的地址  重定向
			
			function assigndemo(){
				location.assign("child.html"); //加载新页面,保留原来的（可后退）
			}
			
			function reloaddemo(){
				location.reload();//刷新当前页面
			}
			
			function replacedemo(){
				location.replace("child.html"); //加载新页面 替换当前页面
			}
		</script>
	</head>
	<body>
	   <input type="button"  value="assign" onclick="assigndemo()"/>
	   <input type="button"  value="reload" onclick="reloaddemo()"/>
	   <input type="button"  value="replace" onclick="replacedemo()"/>
	</body>
</html>

计时

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件

<script type="text/javascript">
			
			function test(){
				alert();
			}
			
			//在指定的时间后,调用指定的函数,只调用一次
			// var t = setTimeout("test()",5000);
			
			//每隔指定的时间,调用一次指定的函数
			 var t = setInterval("test()",3000);
			
			function clearTime(){
			   //clearTimeout(t);//取消指定的定时器
			   clearInterval(t);
			}
		</script>