【日常学习】最全JavaScript使用详解

JavaScript使用

1、JavaScript历史

Netscape 发明了 JavaScript

​ JavaScript由Netscape 在1995年发明。早期的主要目的是处理一些用户的输入验证操作。而在JavaScript语言出现之前客户端的页面时需要提交到服务器端，由服务器去检测的。在刚刚普及的电话线调制解调器时代，对用户是一种考验，著名的Netscape Navigator（早期浏览器） 通过引入JavaScript来解决该问题

​ 随着互联网的流行，网页已经不断变得更大和复杂，如果用户想要注册表单，需要直接将表单提交到服务器进行验证，需要和服务器进行多次的往返交互，例如，用户注册一个表单，点击提交按钮，等待30秒服务器返回处理后，返回的是用户名不符合规则。这种用户体验是很不友好的。此时的Netscape（网景）开始着手解决这个问题。

​ Netscape在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。后来Netscape和Sun公司合作，所以最后Netscape 与 Sun 及时完成 LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇，此后JavaScript 从此变成了因特网的必备组件。

三足鼎立

​ 微软进军微软决定进军浏览器，发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）。

​ 在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。

标准化

​ 1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义” 。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。随后，国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准。

从此，Web 浏览器就开始努力将 ECMAScript 作为 JavaScript 实现的基础。

​ JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。

注：

javascript运行必须依赖于宿主环境语言，即页面语言HTML。

是解释型的语言，解释型：不需要编译，解释器程序会每读取一条语句就执行。运行速度慢，浏览器中默认内置了javascript的解释器程序。

浏览器中默认内置了javascript的解释器程序。

常见的脚本语言：

​ ECMASCRIPT主要进行所有脚本语言的标准制定。

​ JavaScript

​ JScript

​ VBScript

​ ActionScript

JavaScript是基于对象和事件的脚本语言。

2、JavaScript特点

1. 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。

2. 跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）

3、JavaScript与java不同

1. JS是Netscape公司的产品，Java是Sun公司的产品

2. JS是基于对象，Java是面向对象。

3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。

4. JS是弱类型，Java是强类型。

注：Ÿ 强类型语言，当你定义一个变量是某个类型，如果不经过代码显式转 换（强制转化）过，它就永远都是这个类型，如果把它当做其他类 型来用，就会报错

Ÿ 弱类型语言，你想把这个变量当做什么类型来用，就当做什么类型来用，语言的解析器会自动（隐式）转换。

4、JavaScript内容

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FT5H4Fn4-1648519686886)(D:\资料\日常笔记\img\wps8D71.tmp.jpg)]

目前我们学习JavaScript也就是需要学习：

​ JavaScript语法基础

​ 使用JS操作网页（DOM）

​ 使用JS操作浏览器（BOM）

5、与HTML和CSS的不同

html: 负责了一个页面的结构.

css: 负责了一个页面的样式。

​ javascript： 负责与用户进行交互。

6、JavaScript基础

6.1 JavaScript历史以及引入方式

如何编写javascript的代码。

方式1：可以使用<script>标签体内进行编写。

 	格式：
     	<script type="text/javascript">

         		js代码;;

         </script>	

方式2：引入外部的javascript文件。

 	格式：	

     	<script src="1.js" type="text/javascript"></script>      

 	注意： 

     	1.<script>是有开始标签与结束标签的，千万不要在一个标签中结束了。

 		2.如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了，

javascript常用的函数：

 alert("显示的内容..") ; 弹出框       

 document.write("数据") ; //向页面输出数据...

页面的注释：

 html <!--  注释的内容-->

 css的注释  /* 注释的内容*/  

 javascript：  //注释的内容  单行注释  		/* 注释的内容*/ 多行注释

<script src="js/demo.js" type="text/javascript"> 

</script>

<script type="text/javascript">

    //alert("弹框");

	//confirm("确认删除吗?");//点击确定返回true否则返回false

	//prompt("请输入你的名字");//点击确定返回输入的内容否则返回null

    //document.write("今天学习js")

</script>

图解：

6.2 声明变量

<script>
			/*
			javascript的变量声明：
				格式：
					var 变量名 = 数据;
					
					
				声明变量要注意的事项：
					1. 在javascript中声明变量是 使用var关键字声明
的，javascript中的变量可以存储任意的数据类型数据.
					2. javascript中变量数据类型是根据存储的值决定
的，可以随时更改存储数据的类型。
					3. 定义了多个同名的变量是，后定义的同名变量是覆盖前
面定义的同名变量。
					4. 声明变量的时候可以省略var关键字，但是不建议省略。


			javascript的数据类型：
				
				typeof 查看变量的数据类型。
				
				使用格式：
						
						typeof 变量名		
				
			javascript的数据类型：

				number 小数与整数
				
				string 字符串 注意： javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中。
				
				boolean 布尔数据类型，
				undefined  undefined代表该变量没有定义。
				
			*/
			document.write("10数据类型是" + (typeof 10) + "<br/>");
			document.write("3.14数据类型是" + (typeof 3.14) + "<br/>");
			document.write("a数据类型是" + (typeof 'abc') + "<br/>");
			document.write("abc数据类型是" + (typeof "abc") + 
"<br/>");
			document.write("abc数据类型是" + (typeof true) + "<br/>");

			document.write("a变量数据类型是" + (typeof a) + "<br/>");
		</script>

6.3 字符串转化成数字

<script type="text/javascript">
			/*
				字符串转数字
					parseInt()  可以把一个字符串转换成整数。
					parseFloat() 可以把一个字符串转换成小数。
			*/
			var a = "12";
			a = 12.64;

			a = "123abc123"; 
var b = parseInt(a);
			document.write("结果：" + b + "<br/>");/* parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字， */
			

			var c = "3.14";
			c = parseFloat(c);
			document.write("结果：" + c + "<br/>");

			/*
				 javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。
				
				  is not a  number  不是一个数字。
				  
				  不是一个数字返回true，是一个数字返回false.
			*/

			document.write(isNaN(123) + "<br/>");

			document.write(isNaN("abc123"));
		</script>

6.4 运算符

<script type="text/javascript">
		/* 用法与java大致相同 */

			逻辑运算符:
			
			//没有单与的。
			document.write((true&&true)+"<br/>");
			document.write((true&&false)+"<br/>");
			document.write((false&&true)+"<br/>");
			document.write((false&&false)+"<br/>");
			
			
			document.write((true||true)+"<br/>");
			document.write((true||false)+"<br/>");
			document.write((false||true)+"<br/>");
			document.write((false||false)+"<br/>");


		三目运算符	

			布尔表达式?值1:值2;
		*/

		var age = 10;

		document.write(age >= 18 ? "成年人" : "未成年人");
	</script>

6.5 流程控制语句

<script type="text/javascript">
		/*
		控制流程语句

			if语句
			
			格式：
				if(判断条件){
					符合条件执行的代码	
				}	
			
			if语句的特殊之处： 
				1. 在javascript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据。
				
				number  非0为true, 0为false.
				string  内容不为空是true， 内容为空的时候是false。
				undefined：false
		    	NaN:    false
			   Null:   false
			
			
			var workAge = 0;
			var str ="";
			var b;
			if(b){
				document.write("明天过来面试！！");
			}else{
				document.write("不要在投我们公司了，不要你！");	
			}
			

		选择语句： 
			switch语句
			
				switch(变量){
					case 值1:&nbsp;
						
						break;
					case 值2：
						
						break;
					case 值3:
						
						break;
						
					.....
						
					default：
						
						break;
					
				}
				
			特殊之处：
				1. 	在javascript中switch后面可以跟其他类型	
		*/

		var option = "A";

		switch (option) {
			case "A":
				document.write("java");
				break;
			case "B":
				document.write("html");

			case "C":
				document.write("javascript");
				break;
			case "D":
				document.write("css");
				break;
		}
	</script>

6.6 循环语句

<script type="text/javascript">
/*
		循环语句：
			
			while
				
				格式：
					while(判断的条件){
						循环体内容	
					}
					
			var count = 0 ; 
			while(count<5){
				document.write("hello world<br/>");
				count++;
			}

		需求： 计算1~100的总和。

			var num = 1;
			var result = 0;
			while(num<=100){
				result +=num;	
				num++;
			}
			
			document.write("结果："+result);

		do-while循环语句

			do{
				循环语句；
			}while(判断条件);
			
		需求；计算1~100奇数的总和。

			var num = 1;
			var result = 0;
			do{
				if(num%2!=0){
					result +=num;
				}
				num++;
			}while(num<=100);

			document.write("结果："+result);


		for循环语句:
			
			格式：
				for(初始化语句; 判断的条件 ; 循环后的语句){
					循环体语句；	
				}


		需求；计算1~100偶数的总和。
		*/

		var result = 0;
		for (var i = 1; i <= 100; i++) {
			if (i % 2 == 0) {
				result += i;
			}
		}

		document.write("结果：" + result);
	</script>

6.7 循环语句练习

<script type="text/javascript">

		//打印九九乘法表
		for (var i = 1; i <= 9; i++) {
			for (var j = 1; j <= i; j++) {
				document.write(i + "*" + j + "=" + (i * j) + "&nbsp;&nbsp;");
			}
			document.write("<br/>");
		}
	</script>

6.8 函数的定义

<script type="text/javascript">
		/*
		函数:


		函数的定义格式：
			
			function 函数名(形参列表){
				函数体 ;	
			}

		javascript的函数要注意的细节：
			1. 在 javascript中函数 定义形参时是不能使用var关键字声明变量 的。
			2. 在javascript中 的函数是没有 返回值类型 的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回。
			3. 在 javascript中是没有函数 重载 的概念 的，后定义的同名函数会直接覆盖前面定义同名函数。
			

		需求：定义一个函数做两个参数的加法功能。
		*/
		function add(a, b) {
			var sum = a + b;
			document.write("两个参数的总和：" + sum);
			//return sum;
		}

		//调用函数
		add(11, 21, 13, 14);
	</script>

6.9 函数的练习

<script>
		function showDay() {
			//找到对应 的标签对象。
			var inputObj = document.getElementById("month");
			//获取input标签数据
			var month = inputObj.value;
			/*
			if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
				alert("本月是31天");	
			}else if(month==4||month==6||month==9||month==11){
				alert("本月是30天");	
			}else if(month==2){
				alert("本月是28天");	
			}else{
				alert("没有该月份");	
			}
			*/

			month = parseInt(month);
			switch (month) {
				case 1:
				case 3:
				case 5:
				case 7:
				case 8:
				case 10:
				case 12:
					alert("本月是31天");
					break;
				case 4:
				case 6:
				case 9:
				case 11:
					alert("本月是30天");
					break;
				case 2:
					alert("本月是28天");
					break;
				default:
					alert("没有该月份");
					break;

			}

		}
	</script>

	<body>
			月份:<input id="month" type="text" />
			<input type="button" value="查询" onclick="showDay()" />
	</body>

6.10 string对象

<script type="text/javascript">
		/*
			var str1 = new String("hello");
			var str2 = new String("hello");
			document.write("两个字符串的对象一样吗？"+(str1.toString()==str2.toString()));

		创建一个字符串的方式：
		方式1：
			new String("字符串的内容");
			
		方式2：
			var str = "字符串的内容";

		字符串常用的方法：
			anchor（）   生产锚点 
			charAt()     返回指定索引位置处的字符。
			fontcolor()  把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端
			
			indexOf()    返回 String 对象内第一次出现子字符串的字符位置
			italics()    把 HTML <I> 标记放置在 String 对象中的文本两端。 
			
			link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
			
			replace()      返回根据正则表达式进行文字替换后的字符串的复制
			
			split()        切割   
			
			Substr(a,b)       截取子串，第一个参数表示下标，第二个参数表示长度
			toUpperCase()  转大写
			toLowerCase    转小写
		*/
		document.write("第五章".anchor("five") + "<br/>"); //给该字符串添加一个a标签，并且添加name属性，属性值为five
		document.write("abc".charAt(1) + "<br/>");
	//chatCodeAt返回的是索引值对应的字符的码值。 
		document.write("第六章".fontcolor("red") + "<br/>"); //fontcolor() 给字符串添加font标签，然后设置color的属性值。
		document.write("abchellohehehello".indexOf("hello") + "<br/>"); //返回指定字符串第一次出现的索引值。
		document.write("第五章".italics() + "<br/>"); //给文本添加一个i标签，把文本内容设置成斜体。
		document.write("百度".link("http://www.baidu.com") + "<br/>"); // 给文本添加一个a标签，
		document.write("明天讲html".replace("html", "DOM编程") + "<br/>"); // 给文本添加一个a标签，
	  //第一个参数表示下标，第二个参数表示长度
		document.write("abcdefg".substr(1,3));
		//第一个参数表示开始下标，第二个参数表示结束下标（包前不包后）
		document.write("abcdefg".substring(1,3));

		var str = "我们-大家-好";
		var arr = str.split("-");
		for (var index = 0; index < arr.length; index++) {
			document.write(arr[index] + ",");
		}
		document.write("<br/>");
		document.write("abc".toUpperCase() + "<br/>"); //转大写
		document.write("ABC".toLowerCase() + "<br/>"); //转小写
	</script>

6.11 Date对象

<script type="text/javascript">
		/*
		日期对象（Date）
		*/
		var date = new Date(); //获取到当前的系统时间
		document.write("年：" + date.getFullYear() + "<br/>");
		document.write("月：" + (date.getMonth() + 1) + "<br/>");
		document.write("日：" + date.getDate() + "<br/>");

		document.write("时：" + date.getHours() + "<br/>");
		document.write("分：" + date.getMinutes() + "<br/>");
		document.write("秒：" + date.getSeconds() + "<br/>");

		//xxxx年yy月dd日  hh:mm:ss

		//document.write("当前时间是："+date.toLocaleString());
		document.write("当前时间是：" + date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
			date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
	</script>

12.显示当前系统时间
<body>
		当前系统时间：<span id="time"></span>
	</body>

	<script type="text/javascript">
		function getCurrentTime() {
			//获取到当前的系统时间
			var date = new Date();
			//把当前系统时间拼装成我指定的格式。
			var timeInfo = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
				date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

			//找span对象
			var spanObj = document.getElementById("time");
			//设置span标签体的内容
			spanObj.innerHTML = timeInfo.fontcolor("red");
		}

		getCurrentTime();

		//定时方法.
		window.setInterval("getCurrentTime()", 1000); /* setInterval   定时方法，第一个参数要指定调用的代码，第二参数是每                                                隔指定的毫秒数调用指定的代码。*/
	</script>

6.13 Math对象

<script type="text/javascript">
			/*
			Math对象常用的方法：
			 ceil 		向上取整
			 floor（）   向下取整
			 random()  随机数方法 //  产生的伪随机数介于 0 和 1 之间（含 0，不含 1），
			 round     四舍五入
			*/
			document.write("向上取整：" + Math.ceil(3.14) + "<br/>");
			document.write("向下取整：" + Math.floor(3.14) + "<br/>");
			document.write("随机数：" + Math.random() + "<br/>");
			document.write("四舍五入：" + Math.round(3.75) + "<br/>");
		</script>

6.14 数组对象

<script type="text/javascript">
			/*
			Array数组对象:
				创建数组的方式1：
					var 变量名 = new Array();  创建一个长度为0的数组。
				
				方式2：
					var 变量名= new Array(长度) 创建一个指定长度的数组对象。
					
				方式3：
			 		var 变量名 = new Array("元素1","元素2"...);  给数组指定元素创建数组 的对象。
					
				方式4： 
					var 变量名 = ["元素1","元素2"...];
						

			数组要注意的细节：
				1.  在javascript中数组的长度是可以发生变化的。
						
				
			*/

			var arr = new Array(3); //创建了一个长度为3的数组对象。
			arr[100] = 10;
			document.write("arr长度：" + arr.length + "<br/>");

			var arr2 = new Array("狗娃", "狗剩", "铁蛋");
			arr2 = ["狗娃", "狗剩", "铁蛋", "张三"];
			document.write("arr2长度：" + arr2.length + "<br/>");
		</script>

6.15 数组常用的方法

<script type="text/javascript">
		var arr1 = ["狗娃", "狗剩", "铁蛋"];
		
		//pop ：移除数组中的最后一个元素并返回该元素。
	
		document.write("删除最后的一个元素并返回："+arr1.pop()+"<br/>");
	
		document.write("<br />");
	
		arr1.push("永康"); // 将新元素添加到一个数组中，并返回数组的新长度值。
	
		arr1.reverse(); //翻转数组的元素
	
		document.write("删除第一个元素并返回："+arr1.shift()+"<br/>"); //移除数组中第一个元素，并且返回。
	
	</script>

6.16 自定义对象

<script type="text/javascript">
			/*
			自定义对象:
				
			在javascript没有类的概念，只要有函数即可创建对象。

				
				自定义对象的方式1： 使用无参的函数创建对象。
				
				例子：
					
					function Person(){}
					var p = new Person(); //创建了一个Person对象了
					p.id = 110;
					p.name = "狗娃";
				
				方式2：使用带参的函数创建对象。
					
					function Person(id,name){
						this.id = id;
						this.name = name;	
						this.say = function(){
							alert(name+"呵呵");	
						}
					}
				
				var p = new Person(110,"狗剩");	//创建对象
				方式3： 使用Object函数创建对象
					
					var p = new Object();
					p.id = 110;
					p.name = "铁蛋";
				
				方式4：使用字面量的方式创建.
					
					var p = {
						id:110,
						name:"狗娃",
						say:function(){
							alert(this.name+"呵呵");	
					}	
				}		
					
			*/
			var p = {
				id: 110,
				name: "狗娃",
				say: function() {
					alert(this.name + "呵呵");
				}
			}

			document.write("编号：" + p.id + " 姓名：" + p.name);
			p.say();
		</script>

6.17 js中!=,,!,===的用法和区别

<script type="text/javascript">	    
		var num = 1;
		var str = '1';
		var test = 1;
		
		document.write(test == num); //true　相同类型　相同值
		document.write(test === num);//true　相同类型　相同值
		document.write(test !== num);//false test与num类型相同，其值也相同,　非运算肯定是false
		 
		 
		document.write(num == str);  //true 　把str转换为数字，检查其是否相等。
		document.write(num != str);  //false  == 的 非运算
		document.write(num === str); //false  类型不同，直接返回false
		document.write(num !== str); //true   num 与 str类型不同 意味着其两者不等　非运算自然是true
		
		//== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。
		//而=== 和 !== 只有在相同类型下,才会比较其值。
	</script>

s.name + “呵呵”);

  		}
  	}

  	document.write("编号：" + p.id + " 姓名：" + p.name);
  	p.say();
  </script>

6.17 js中!=,,!,===的用法和区别

<script type="text/javascript">	    
		var num = 1;
		var str = '1';
		var test = 1;
		
		document.write(test == num); //true　相同类型　相同值
		document.write(test === num);//true　相同类型　相同值
		document.write(test !== num);//false test与num类型相同，其值也相同,　非运算肯定是false
		 
		 
		document.write(num == str);  //true 　把str转换为数字，检查其是否相等。
		document.write(num != str);  //false  == 的 非运算
		document.write(num === str); //false  类型不同，直接返回false
		document.write(num !== str); //true   num 与 str类型不同 意味着其两者不等　非运算自然是true
		
		//== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。
		//而=== 和 !== 只有在相同类型下,才会比较其值。
	</script>