JavaScript学习笔记（内容丰富），快来看看吧！

Bertha 。 2022-10-11 01:12 198阅读 0赞

### 文章目录 ###

*  Javascript基础知识
 *   *  JS脚本执行的三种方式
     *   *  1.脚本块
         *  2.事件发生后执行
         *  3.引入js文件
     *  JS变量
     *  JS函数
     *  JS的数据类型
     *   *  1.Undefined
         *  2. Number
         *  3. IsNaN()函数
         *  4.parseInt（）函数
         *  5.parseFloat（）函数
         *  6.Math.ceil（）函数
         *  7.Boolean
         *  8.String
         *   *  indexOf()
             *  lastIndexOf（）
             *  replace()函数
             *  substr()函数和substring()函数
         *  9.Object类型
     *  JS中的事件
     *   *  JS常见事件
         *  注册事件的方式
         *   *  1. 回调函数
             *  2. 利用纯JS代码完成事件的注册
         *  JS代码捕捉回车键
         *  JS的void运算符
         *  JS的控制语句
     *  DOM
     *   *  设计和获取文本框中value
         *  innerHTML和innerText属性
         *  正则表达式
         *  拓展字符串trim函数
         *  复选框全选和取消全选
         *  获取下拉列表选中的value
         *  周期函数
         *  内置支持类Array
     *  BOM
     *   *  open和close
         *  弹出消息框和确认框
         *  将当前窗口设置成顶级窗口
         *  history和location对象
     *  JSON
     *   *  eval函数

# Javascript基础知识 #

## JS脚本执行的三种方式 ##

### 1.脚本块 ###

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		 <script type="text/javascript">
    		 	alert('holle')
    		 </script>
    	</body>
    </html>

1.  javascript脚本块可以出现在任何位置，都可以执行。
2.  暴漏在脚本中的程序，在页面打开的时候执行，至上而下。

### 2.事件发生后执行 ###

点击按钮有弹窗“hello”。

### 3.引入js文件 ###

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript" src="js/hello.js">
    	     ///此次的语句不执行
    		</script>
    	</body>
    </html>

## JS变量 ##

JS变量不用声明变量的类型，全由后面的值的类型决定，声明一个变量 “var i；”。  
当一个变量没有手动赋值时，系统会默认赋值undefined。  
局部变量和全局变量：  
全局变量的周期为从游览器页面打开到游览器页面关闭，耗费内存空间，能使用局部变量尽量使用局部变量。  
局部变量是在函数内部声明的变量，生命周期是函数的开始到结束。  
如果一个变量前没用var声明，那么无论这个变量在哪都视为是全局变量。

## JS函数 ##

定义函数的两种方式  
第一种：

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript" >
    	      function sum(a,b){
        
    	      alert(a+b);	
    	      }
    	      sum(20,10);
    	    
    		</script>
    	</body>
    </html>

第二种：

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript" >
    	    
    	      say=function(name){
        
    	      	alert('我是'+name);
    	      }
    	     
    	      say("小明");
    		</script>
    	</body>
    </html>

JS函数与c语言函数相同，只有调用了才能执行。  
当有两个同名函数出现，后一个函数会覆盖掉前一个，JS函数中不存在重载的现象。

## JS的数据类型 ##

JS数据类型有原始类型和引用类型  
原始类型:Undefined,Number,String,Boolean,Null.  
引用类型：Object与Object的子类。  
JS中有一个typeof运算符，这个运算符可以在程序运行阶段动态的获取变量的数据类型。  
typeof的运算符的语法格式：  
typeof 变量名；  
typeof运算符的运算结果是以下6个字符串之一；注意全部都是小写。  
“undefine”  
" number"  
“string”  
“boolean”  
“object”  
“function”  
在JS中比较相等时用“==”，没有equal。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript" >
    	      
    	     var i;
    	     alert(typeof i);
    	     var j=10;
    	     alert(typeof j);
    	     var k="abc"
    	     alert(typeof k);
    	     var a=null;
    	     alert(typeof a);
    	     var b=false;
    	     alert(typeof b);
    	     var c=new Object();
    	     alert(typeof c);
    	     function d(){
        
    	     	
    	     }
    	     alert(typeof d);
    		</script>
    	</body>
    </html>

### 1.Undefined ###

当一个变量没有手动赋值时，系统默认是undefined。  
也可以手动赋值为undefined。

### 2. Number ###

Number包含数的所有类型，NaN和Infinite。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    		var a=100;
    		var b="你好";
    		alert(a/b) //除号运算后应该是一个数字，但不是数字，那么最后的结果是NaN。
    		var c="abc";
    		var d=10;
    		alert(c+d); //结果为字符拼接 abc10.
    		var e=10;
    		var f=0;
    		alert(e/f); //结果是无穷大，所以是Infinite。 但10/3会显示3.333333
    		
    	   </script>
    		
    	</body>
    </html>

### 3. IsNaN()函数 ###

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    		function sum(a,b){
        
    			if(isNaN(a)||isNaN(b)){
        
    			alert("参与运算的必须是数字！")
    			return;
    		}
    		alert(a+b);
    		}
    		sum(1,2)
    	   </script>
    		
    	</body>
    </html>

### 4.parseInt（）函数 ###

parseInt()函数： 将字符串自动转换为数字，并且取整数。

### 5.parseFloat（）函数 ###

parseFloat函数：将字符串自动转化为数字。

### 6.Math.ceil（）函数 ###

Math.ceil（）函数：将字符串自动转换为数字，向上取整。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    		
    		alert(parseInt(3.9999)) //取3
    		alert(parseFloat("3.99")+1)//取4.99
    		alert(Math.ceil("2.1")) //取3
    	   </script>
    		
    	</body>
    </html>

### 7.Boolean ###

布尔类型只有两个值：true 和 false。  
布尔函数和布尔类型都一样，有就为真，没有就为假

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			var name='';
    		if(name){
        
    			alert('姓名为'+name);
    		}else{
        
    			alert('请输入姓名');
    		}
    		alert(Boolean(0))
    		alert(Boolean(1))
    	  </script>
    	</body>
    </html>

### 8.String ###

对与JS中的字符串可以用单引号也可以用双引号  
创建字符串对象的方式：

1. var str ="abc"
    2. var str1 =new String("abc");//使用Js内置的支持类String。

常用函数：

#### indexOf() ####

获取字符串中对象第一次出现的索引。

#### lastIndexOf（） ####

获取字符串中对象最后一次出现的索引。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			alert("abcdb".indexOf("b"));
    			alert("abcd".indexOf("a")>=0? "包含字母":"不包含")
    			alert("abcdb".lastIndexOf("b"));
    		  </script>
    	</body>
    </html>

#### replace()函数 ####

替换函数，一次只能替换一个，想要全部替换需要用到正则表达式。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			alert("abcdb".replace('b','a'));
    			
    		  </script>
    	</body>
    </html>

#### substr()函数和substring()函数 ####

都是截取字符串的某一段。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			alert("abcdb".substr(2,4));
    			//截取部分包括结束位置
    			alert("abcdb".substring(2,4))
    			//截取部分不包括结束位置
    		  </script>
    	</body>
    </html>

### 9.Object类型 ###

1.  Object是所有类型的超类，自定义的任何类型，默认继承Object。
2.  Object包括哪些属性？  
    prototype属性（常用的，作用是给类动态的扩展属性和函数）  
    constructor属性
3.  Object包含哪些函数？  
    toString（）  
    valueof（）  
    toLocaleString（）  
    4.JS当中怎么创建类？怎么new一个对象？  
    定义类的语法：  
    第一种方法：  
    function 类名（形参）\{  
    \}  
    第二种方法：  
    类名 = function（形参）\{  
    \}  
    创建类的写法：  
    new 构造方法名（实参）//构造方法名和类名一致。

用法决定它是函数还是类。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			function stu(){
        
    			alert('我是一名学生')
    			}
    			
    			stu(); //引用函数
    			
    			new stu();   //创建一个类
    		  </script>
    	</body>
    </html>

JS中类的定义，又是构造函数的定义，类的定义是和函数的定义一起完成的。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			function stu(a,b,c){
        
    				this.id = a;
    				this.name = b;
    				this.age = c;
    				
    			}
    			var s1 =new stu(123,"小明",20);
    			alert(s1.age)
    			alert(s1.id)
    			alert(s1.name)
    			
    			
    	 		//另一种写法
    	 		var s2 = new stu(124,"小军",20);
    			alert(s2["age"]);
    			alert(s2["id"]);
    			alert(s2["name"]);
    		
    		  </script>
    	</body>
    </html>

可以通过prototype 这个属性来给类动态扩展属性和函数

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			function stu(a,b,c){
        
    				this.id = a;
    				this.name = b;
    				this.age = c;
    				
    			}
    			var s1 =new stu(123,"小明",20);
    			alert(s1.age)
    			alert(s1.id)
    			alert(s1.name)
    			
    	 		stu.prototype.getName = function(){
        
    	 			
    	 			return this.name;
    	 		}
    	 		var s =s1.getName();
    	 		alert(s)
    	 		
    		  </script>
    	</body>
    </html>

同样的可以给String类型扩展函数

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			String.prototype.b =function(){
        
    				alert('这是给String拓展的函数')
    			}
    			"abc".b()
    		  </script>
    	</body>
    </html>

## JS中的事件 ##

### JS常见事件 ###

1. blur   失去焦点
     2. focus 获得焦点
     3. click  鼠标单击
     4. dblclick 鼠标双击
     5. keydown 键盘按下
     6. keyup  键盘弹起
     7. change 下拉列表选中项改变，或文本框选中改变
     8. load 页面加载完毕
     9. mousedown 鼠标按下
     10. mouseover 鼠标经过
     11. mousemove 鼠标移动
     12. mouseout  鼠标离开
     13. mouseup 鼠标弹开
     14. reset 表单重置
     15. select 文本被选定
     16. submit 表单提交

### 注册事件的方式 ###

#### 1. 回调函数 ####

回调函数的特点： 自己不调用这个函数，由其他程序负责调用。

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			function say(){
        
    				alert("hello")
    			}
    			
    		  </script>
    		  <input type="button" value="按钮" onclick="say()" /> //另外一个程序调用函数
    	</body>
    </html>

#### 2. 利用纯JS代码完成事件的注册 ####

第一步： 先获取这个按钮对象（document是全部小写，内置对象，可以直接拿来用，document就代表整个HTML页面）  
var btt =document.getElementById(“bt”)  
第二部给按钮的对象的属性赋值  
btt.onclick = say;

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		
    		  <input type="button" value="按钮" id="bt" />
    		  <script type="text/javascript">
    		  	function say(){
        
    		  		alert("hello,Js!")
    		  		
    		  	}
    		  	var btt =document.getElementById("bt")
    		  	btt.onclick = say;   ///无需加小括号
    		  	         
    		  	 //也可以使用匿名内部类
    		  	document.getElementById("btt").onclick = function(){
        
    		  		alert("hello,world")
    		  	}
    		  </script>	
    	</body>
    </html>

页面加载完毕之后，onload才执行，所以可以用onload来注册事件

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		
    		  <script type="text/javascript">
    		  	window.onload=function(){
        
    		  		document.getElementById("btt").onclick =function(){
        
    		  			alert("hellwo.....")
    		  		}
    		  	}
    		  </script>
    		  <input type="button" value="按钮1" id="btt"/>
    	</body>
    </html>

### JS代码捕捉回车键 ###

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		
    		  <script type="text/javascript">
    		  	window.onload=function(){
        
    		  	//用onkeydown来捕捉键位
    		  		document.getElementById("btt").onkeydown =function(a){
        
    		  			//keycode可以获取键值
    		  			//Esc为27，回车键为13
    		  			
    		  		      if(a.keyCode==13){
        
    		  		      	alert("正在验证中......")
    		  		      }
    		  		      alert(a.keyCode)
    
    		  		}
    		  	}
    		  </script>
    		  <input type="text" value="" id="btt"/>
    	</body>
    </html>

### JS的void运算符 ###

void运算符的语法：void（表达式）  
运算原理：执行表达式，但不返回任何结果。  
Javascript：void（0）  
其中javascript ：作用是告诉游览器后面是一段JS代码.  
例：  
保留超链接的样式，同时点击超链接的时候执行一段JS代码，但页面还不能跳转。

假如href后引号内为空，默认为是当前页面Url，一样会跳转网页。

### JS的控制语句 ###

JS中的控制语句大多和Java相同,且用法相同。

<table> 
 <thead> 
  <tr> 
   <th>Java</th> 
   <th>新增</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>if</td> 
   <td>for…in语句</td> 
  </tr> 
  <tr> 
   <td>switch</td> 
   <td>with语句</td> 
  </tr> 
  <tr> 
   <td>while</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>do…while…</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>for循环</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>break</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>continue</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

下面只讲一下新增的内容  
for…in…

1.  可以用来遍历
2.  可以用来显示数组元素的下标

<html>
    		<head>
    			<meta charset="UTF-8">
    			<title></title>
    		</head>
    		<body>
    		<script type="text/javascript">
    			User =function(name,password){
        
    				this.name=name;
    				this.Password=password;
    				
    			}
    			var u= new User("张三","123");
    			for(var s in u){
        
    				alert(u[s]);
    			}
    			var arr=["ll","aa","bb",123,true];
    			for(var i in arr){
        
    				alert(i);
    			}
    		</script>	
    		</body>
    	</html>

with()

<html>
    		<head>
    			<meta charset="UTF-8">
    			<title></title>
    		</head>
    		<body>
    		<script type="text/javascript">
    			User =function(name,password){
        
    				this.name=name;
    				this.Password=password;
    				
    			}
    			var u= new User("张三","123");
    			alert(u.name);
    			with(u){
        
    				alert(name);
    			}
    		
    		</script>	
    		</body>
    	</html>

## DOM ##

Document Object Model(文档对象模型)：对网页中的节点进行增删改的过程，HTML被当作一棵DOM树来看待，具有许多的节点。  
例如上文用到的： var domObj = document.getElementbyId(“id”);

### 设计和获取文本框中value ###

例：点击按钮，将第一个文本框中的内容复制到第二个文本框中

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<hr>
    		<script type="text/javascript">
    			window.onload=function(){
        
    				document.getElementById("but").onclick=function(){
        
    					document.getElementById("tx2").value=document.getElementById("tx1").value;
    				}
    			}
    		</script>
    		
    		<input type="text" id="tx1" />
    		<br>
    		<input type="text" id="tx2" />
    		<br>
    		<input type="button" value="将第一个文本框中的内容复制到第二个文本框中" id="but"/>
    	</body>	
    </html>

### innerHTML和innerText属性 ###

两者之间有什么区别和联系？  
相同点：都是设计元素内部的内容  
不同点：innerHTML会把后面的”字符串“当中HTML代码来执行。  
innerText会把HTML代码当成普通的字符串。

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    	  <script type="text/javascript">
    	  	window.onload =function(){
        
    	  		var btt = document.getElementById("btn").onclick=function(){
        
    	  			var di =document.getElementById("div1")
    	  			di.innerHTML= "用户名不能为空"
    	  			//di.innerHTML = "<font color='red'>用户名不能为空</font>"
    	  			//di.innerText = "<font color='red'>用户名不能为空</font>"
    	  			//可以通过逐个取消注销来观察区别
    	  		}
    	  	}
    	  </script>
    	
    	  <input type="button"  value="按钮" id="btn"/>
    	  <div id =div1> </div>
    	</body>	
    </html>

### 正则表达式 ###

正则表达式：regular expression  
判断邮箱格式是否合法

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    	  <script type="text/javascript">
    	  	window.onload =function(){
        
    	  		document.getElementById("btn").onclick = function(){
        
    	  			var email=document.getElementById("tex1").value	
    	  			var emailRegExp=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    	  			var ok =emailRegExp.test(email)
    	  			if(ok){
        
    	  				document.getElementById("emailError").innerText="邮箱合法";
    	  			}else{
        
    	  				document.getElementById("emailError").innerText="邮箱不合法";
    	  			}
    	  			
    	  		}
    	  		document.getElementById("tex1").onfocus=function(){
        
    	  			document.getElementById("emailError").innerText="";
    	  		}
    	  	}
    	  </script>
    	
    	  <input type="text" id="tex1"/>
    	  <span id="emailError" style="color: red;font-size: 12px;"></span>
    	  <br>
    	  <input type="button"  value="确定" id="btn"/>
    	  
    	</body>	
    </html>

### 拓展字符串trim函数 ###

trim函数：去除前后的空白。

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    	  <script type="text/javascript">
    	  	window.onload =function(){
        
    	  		document.getElementById("btn").onclick = function(){
        
    	  			var username = document.getElementById("tex1").value;
    	  			username =username.trim();
    	  			alert("--->"+username+"<---");
    	  		}
    	  	}
    	  </script>	  
    	  <input type="text" id="tex1" />
    	  <input type="button" value="获取用户名" id="btn"/>
    	</body>	
    </html>

使用效果：  
使用前  
![在这里插入图片描述][20210707142100372.png]  
使用后  
![在这里插入图片描述][20210707142006382.png]

### 复选框全选和取消全选 ###

点击全选，实现全选，当三个复选框被选中时，全选复选框自动选中。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			window.onload = function() {
        
    				var ahs = document.getElementsByName("ah");
    				document.getElementById("qx").onclick = function() {
        
    					for(var i = 0; i < ahs.length; i++) {
        
    						ahs[i].checked = qx.checked;
    					}
    				}
    				var all = ahs.length
    				for(var i = 0; i < ahs.length; i++) {
        
    					ahs[i].onclick = function() {
        
    						var cou = 0;
    
    						for(var i = 0; i < ahs.length; i++) {
        
    							if(ahs[i].checked) {
        
    								cou++;
    							}
    						}
    						qx.checked = (all == cou)
    					}
    				}
    			}
    		</script>
    		<input type="checkbox" id="qx" />全选<br>
    		<input type="checkbox" name="ah" id="cy" />抽烟<br>
    		<input type="checkbox" name="ah" id="hj" />喝酒<br>
    		<input type="checkbox" name="ah" id="tt" />烫头<br>
    	</body>
    
    </html>

![在这里插入图片描述][20210707152231179.png]

### 获取下拉列表选中的value ###

获取下拉列表中的value，有两种方法，如下

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	    
    		   
    		
    		
    		<script type="application/javascript">
    			window.onload =function(){
        
    				var provinceListElt =document.getElementById("provinceList")
    				provinceListElt.onchange =function(){
        
    					alert(provinceListElt.value)
    				}
    			}
    		</script>
    		<select id="provinceList">
    			<option value="">--请选择省份--</option>
    			<option value="01">河南省</option>
    			<option value="02">河北省</option>
    			<option value="02">山西省</option>
    			<option value="02">江苏省</option>
    		</select>
    	</body>
    </html>

### 周期函数 ###

获取当前时间

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="application/javascript">
    			var nowTime =new Date();
    			nowTime =nowTime.toLocaleDateString();
    			document.write(nowTime);
    		</script>
    	</body>
    </html>

getFullYear() 获取现在的年份（这里的月份是0-11）  
getMonth() 获取现在的月份 （这里的周是0-6）  
getDate() 获取日的信息  
getTime() 获取从1970年1月1日到现在的毫秒数 （一般会用毫秒数当中时间戳）

例：  
点击显示时间按钮，在网页上显示不停变化的时间，点击结束时间，时间停止。

<html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<body>
    		<script type="text/javascript">
    			function displayTime() {
        
    				var time = new Date();
    				var strTime = time.toLocaleString();
    				document.getElementById("bok").innerHTML = strTime
    			}
    
    			function start() {
        
    				v=window.setInterval("displayTime()", 1000)
    			}
    			function over(){
        
    				window.clearInterval(v)
    			}
    		</script>
    		<input type="button" value="显示时间" onclick="start()" />
    		<input type="button" value="终止时间" onclick="over()" />
    		<div id="bok"></div>
    	</body>
    
    </html>

### 内置支持类Array ###

一般使用数组，对于Array类和数组比较相似，可以了解一下。

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			//创建长度为0的数组
    			var arr=[]
    			alert(arr.length)
    			
    			//数据类型任意
    			var arr2 =[1,2,3,false,"abc",3.14]
    			alert(arr2.length)
    			
    			//自动扩充
    			arr2[7]="test"
    			document.write("<br>")
    			
    			
    			for(var i=0;i<arr2.length;i++){
        
    				document.write(arr2[i]+"<br>");
    			}
    			
    			var a=new Array();
    			alert(a.length)		//0
    			
    			var a1 =new Array(3)
    			alert(a1.length)	//3
    			
    			
    			var a2 =new Array(2,3)
    			alert(a2.length)	//2 内容为2和3
    			
    			
    		</script>
    		
    	</body>
    </html>

对于数列的部分函数

<html>
    		<head>
    			<meta charset="UTF-8">
    			<title></title>
    		</head>
    		<body>
    			<script type="text/javascript">
    				
    				var b= [1,2,3,4]
    				var c= b.join("-")		//join函数是在每个数之间加上一个元素
    				alert(c)
    				
    				b.push(10)			//在末尾添加一个元素10（数组长度+1）
    				alert(b.join("-"))
    				
    				var endElt =b.pop()		//将数组末尾元素弹出（数组长度-1）
    				alert(endElt);
    				alert(b.join("-"))
    				
    			 	//注意： Js中的数组可以自动模拟栈数据结构：后进先出，先进后出的原则
    			 	//push压栈
    			 	//pop弹栈
    			 
    				b.reverse();
    				alert(b.join("-"))
    			</script>
    			
    		</body>
    	</html>

## BOM ##

Browser Object Model(游览器对象模型):关闭，打开一个游览器窗口，后退，前进，游览器地址上的地址等，都是Bom编程。  
DOM与BOM的区别：  
BOM的顶级对象：window  
DOM的顶级对象： document  
其实BOM是包含DOM的！

### open和close ###

关于一些开启窗口的方式和关闭窗口函数的使用方法

### 弹出消息框和确认框 ###

消息框只有确定一个按钮，而确认框有确定和取消两个按钮，可以根据选择不同处理事件

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			function del(){
        
    				if(window.confirm("确定删除数据？")){
        
    					alert("删除中......")
    				}
    			}
    		</script>
    		<input type="button" value="弹出消息框" onclick="window.alert('这是消息框！')" />
    		
    		<input type="button" value="弹出确认框" onclick="del()" />
    	</body>	
    </html>

### 将当前窗口设置成顶级窗口 ###

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		我是005
    		<script type="text/javascript">
    			function tas(){
        
    				if(window.top!=window.self){
        
    					window.top.location=window.self.location
    					
    				}
    			}
    			
    		</script>
    	</body>
    	<input type="button"  value="将当前窗口转换为顶级窗口" onclick="tas()" />
    </html>

### history和location对象 ###

前进

后退

设置游览器上的url

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			function wz(){
        
    				var ww =window.location
    				ww.href ="http://baidu.com"
    			}
    		    
    		</script>
    		<input type="button" value="百度" onclick="wz()" />
    	</body>
    </html>

## JSON ##

JavaScript Object Notation JS对象标记，数据交换格式  
一种标准的数据交换格式。（目前非常的流行，百分之九十以上的系统，数据A与数据B进行交换数据的话，都是采用JSON）  
JSON是一种标准的轻量型的数据交换格式，特点是：体积小，易解析。  
在数据的开发中有两种数据交换格式，使用最多是，其一是JSON，另一个是XML。XML体积大，解析麻烦，但语法严谨，一般银行用XML。

HTML和XML都有相同的父亲：SGML（标准通用的标记语言）  
HTML主要做页面展示：所以语法松散，很随意。  
XML主要做数据存储和数据描述的：所以语法相当严格。

JSON的语法格式  
var js =\{  
“属性名”：属性值，  
“属性名”：属性值，  
“属性名”：属性值，  
…  
\}；

<html>
    
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    
    <body>
    	<script type="text/javascript">
    		var stu = {
        
    			"son": "110",
    			"sname": "张三",
    			"sex": "男",
    		};
    		alert(stu.son + "," + stu.sex + "," + stu.sname)
    		var stus = [{
        
    				"son": "110",
    				"sname": "李四",
    				"sex": "男",
    			},
    			{
        
    				"son": "110",
    				"sname": "王二",
    				"sex": "男",
    			},
    			{
        
    				"son": "110",
    				"sname": "麻子",
    				"sex": "男",
    			}
    		]
    		for(var i = 0; i < stus.length; i++) {
        
    			var stu = stus[i]
    			alert(stu.son + "," + stu.sex + "," + stu.sname)
    		}
    	</script>
    
    </body>
    
    </html>

### eval函数 ###

eval的作用：用于在前端取数据，把字符串当中一段JS代码来执行  
用法：

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			 var fromJava ="{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java发来的JSON格式的字符串
    			 //将以上的JSON格式的字符串转换成JSON对象
    			 window.eval("var jsonobj =" +fromJava);
    			 //
    			 alert(jsonobj.name+","+jsonobj.password);
    			 
    		</script>
    	</body>
    </html>

[20210707142100372.png]: /images/20221005/0b9ba15dd0f948f08948476625d5d8a9.png
[20210707142006382.png]: /images/20221005/a223efa6b65a49c88be015ac978d09e1.png
[20210707152231179.png]: /images/20221005/238624e36d2d4a4798ce1b47efd51f2b.png