Web前端学习（3）_javascript

悠悠 2022-06-14 11:49 128阅读 0赞

**Web前端学习（3）\_javascript**

> 这篇来写关于JavaScript的相关内容。

1.Javascript入门

> 1.1 引入
> 
> html：负责网页结构
> 
> css： 负责网页美观
> 
> javascript：负责用户与浏览器交互
> 
>   
> 
> 
> 1.2 scirpt的语法：
> 
> 1）基础语法（ECMA规范）
> 
> 2）BOM编程（没有统一）
> 
> 3）DOM编程（没有统一）
> 
>   
>

2.javascript使用（关于注释，不做过多演示，比较简单）

> javascript的注释：单行 //   多行  /\* \*/
> 
> css的注释：css  多行注释  /\* \*/
> 
> html的注释：
> 
>   
> 
> 
> 常用的函数：
> 
> alert("提示框");
> 
> document.write("向浏览器输出内容");
> 
>     <script type="text/javascript">	
>     	alert("hello");	
>     	document.write("hello");
>     </script>
> 
> ![Center][]  
> 
> 
> javascript的使用方法：
> 
> 1）内部javacript
> 
> a)在html页面中使用<script>标签，在<script>标签体中写js内容
> 
> b)弊端：和html代码混杂在一起，不好维护，不好重用
> 
>   
> 
> 
> 2）外部javascript（推荐使用）
> 
> 注意： 不能使用<script src="01.js"/> 空标签方式导入
> 
>   
>

3.变量和数据类型

> 1）定义和赋值变量：var 变量名=值;
> 
>     //定义变量
>     	var a = 100;
>     	var b = 12.24;
>     	var c = 'f';
>     	var d = "abc";
>     	var e = true;
>     	var f = new Object();
> 
> 注意：
> 
> a）使用var关键词定义变量，var可以省略的，但是不建议省略var
> 
> b) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。
> 
> c) js是弱类型语言，使用var来定义任何数据类型
> 
> d）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用
> 
> typeof(变量)： 查看变量的数据类型
> 
>     //查看每一个变量的类型
>     	document.write(typeof(a));
> 
>   
> 
> 
> 2)js的数据类型分类：
> 
> a）number： 无论整数还是小数，都是number类型
> 
> b) string:  无论字符还是字符串，都是string类型
> 
> c) boolean
> 
> d) object  对象类型
> 
>   
>

4.类型转换函数

> string->number(整数) :  parserInt(变量)
> 
> string->number(小数):  parserFloat(变量)
> 
>     var a = "100";
>     	var b = "12.34";
>     	
>     	document.write("a转换之前的类型"+typeof(a)+"<br>");
>     	document.write("a转换之后的类型"+typeof(parseInt(a))+"<br>");
>     	
>     	document.write("b转换之前的类型"+typeof(b)+"<br>");
>     	document.write("b转换之后的类型"+typeof(parseFloat(b))+"<br>");
> 
>   
>

5.运算符(类似于java中运算符)

> 1)算术运算符： + - \* /  %
> 
> 2)比较运算符： > <  >=  <= ==
> 
> 3)逻辑运算符： &&  ||   !
> 
> 4)三目运算符:  表达式 ? true的结果 : false的结果 
> 
>   
>

6.流程控制语句

> 主要就是：if-else语句，for循环，switch，do-while语句，与java都是类似的，但是变量的定义一定要用var，不能用int。
> 
>     <script type="text/javascript">
>     	if(1){
>     		document.write("成立");
>     		}else{
>     			document.write("不成立");
>     			}
>     	document.write("<hr>");
>     	for(var i=0;i<5;i++){
>     		document.write("hello");
>     		document.write("<br>");	
>     		}
>     	document.write("<hr>");
>     	var j=0;
>     	while(j<5){
>     		document.write("hello");
>     		document.write("<br>");	
>     		j++;
>     		}
>     	document.write("<hr>");	
>     	var j2=0;
>     	do{
>     		document.write("hello");
>     		document.write("<br>");	
>     		j2++;
>     		}while(j2<5)
>     </script>
> 
>   
>   
> 
> 
> （1）if语句注意事项：
> 
> 条件可以是：
> 
> 布尔值：true：成立 ； false:不成立  
> number：非0：成立； 0： 不成立  
> string: 非空字符串： 成立 ； 空字符串： 不成立  
> object: 非null: 成立；  null：不成立  
> 
> 
> （2）switch语句注意:
> 
> 在js中的switvch语句中的case选项的值:  
> A.可以选择常量,String类型或者number类型  
> B.case选项中的值还可以是变量  
> C.在java中case选项中的值只能是常量不能是变量  
> D.case选项还可以是表达式  
> 
> 
>   
> 
> 
> 这里简单的演示一个利用for语句的嵌套，打印99乘法表：
> 
>     <script type="text/javascript">
>     	//打印99乘法表（作业）
>     	for(var i=1;i<=9;i++){
>     		for(var j=1; j<=i;j++){
>     			document.write(j+"x"+i+"="+i*j+" ");
>     			}
>     			document.write("<br>");
>     	}
>     </script>
> 
> ![Center 1][]
> 
> \*with语句：方便函数的调用  
> with(对象)\{  
> 直接写对象的方法，无需写对象的名称  
> \}  
> 
> 
>     <script type="text/javascript">
>     
>     	with(document){
>     		for(var i=1;i<=9;i++){
>     		for(var j=1; j<=i;j++){
>     			write(j+"x"+i+"="+i*j+" ");
>     			}
>     			write("<br>");
>     			}
>     	}
>     	
>     </script>
> 
> 实现的效果和上述是一样的。  
>   
>

7.函数

> 7.1 函数定义：  
> function 函数名称(形式参数列表)\{  
> 语句  
> \}  
> 7.2 调用函数:函数名称(实际参数列表);
> 
> 简单演示一个减法以及调用，后面会有使用：  
> 
> 
>     <script type="text/javascript">
>     
>     	//减法
>     	function sub(a,b){
>     		var result;
>     		result = a-b;
>     		return result
>     		}
>     		
>     	document.write(sub(4,1));
>     </script>
> 
>   
> 注意：   
> 1）js的函数使用function定义，但是形式参数列表不能使用var关键词  
> 2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型  
> 3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。  
> 4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。  
> 5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。  
> 6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数
> 
>   
> 注意：  
> 实际参数<形式参数： NaN  
> 实际参数>形式参数： 取前面的实际参数，后面的参数丢失
> 
>   
> 
> 
> 7.3案例：使用函数调用，实现输入月份，打印该月份的天数：
> 
>     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>     <html xmlns="http://www.w3.org/1999/xhtml">
>     <head>
>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>     <title>无标题文档</title>
>     <script type="text/javascript">
>     	function check(){
>     		var month = parseInt(document.getElementById("month").value);
>     		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("该月分不存在！");
>     			}
>     		
>     		}
>     </script>
>     </head>
>     
>     <body>
>     	请输入要查询的月份：
>         <input type="text" id="month" />
>         <input type="button" value="查询" οnclick="check()" />
>     </body>
>     </html>
> 
>   
>

8.基于对象编程

> 内置对象：

> 8.1 String对象  
> 方式一：定义String对象  
> var str1 = new String("hello");  
> var str2 = new String("hello");  
> document.write("结果："+(str1==str2)+"<br/>");
> 
>   
> valueOf（）:该方法返回对象的内容  
> document.write("结果："+(str1.valueOf()==str2.valueOf()));  
>   
> 方式二：  
> var str1 = "hello";  
> var str2 = "hello";  
> document.write("结果："+(str1==str2)+"<br/>");  
> 
> 
>     var s1 = new String("hello");
>     	var s2 = new String("hello");
>     	document.write(s1==s2);
>     	document.write("<br>");
>     	
>     	//valueOf(),这个方法是取出对象中的内容
>     	document.write(s1.valueOf()==s2.valueOf());
>     	document.write("<br>");
>     	
>     	//创建字符串的方式2:直接赋值
>     	var s3 = "hello";
>     	var s4 = "hello";
>     	document.write(s3==s4);
>     	document.write("<br>");
> 
>   
> 常用方法：  
> charAt(索引): 返回指定索引的内容  
> indexOf(字符串): 返回首次出现指定字符的索引位置  
> lastIndexOf(字符串): 返回最后出现指定字符的索引位置  
> fontcolor("red"): 直接给字符串添加颜色  
> split("字符串"): 使用指定字符串切割字符串，返回字符串数组  
> substring(start,end); 截取字符串，start：开始索引， end:结束索引  
> substr(strat,\[length\]) 截取字符串， start：开始索引 length: 截取的字符串长度  
> 
> 
>     <script type="text/javascript">
>     
>     	var s1 = "abcdefgfedcba";
>     	//charAt(索引): 返回指定索引的内容
>     	document.write(s1.charAt(1));
>     	document.write("<br>");
>     
>     	//indexOf(字符串): 返回首次出现指定字符的索引位置
>     	document.write(s1.indexOf("e"));
>         document.write("<br>");
>     
>     	//lastIndexOf(字符串): 返回最后出现指定字符的索引位置
>     	document.write(s1.lastIndexOf("b"));
>     	document.write("<br>");
>     	
>     	//fontcolor("red"): 直接给字符串添加颜色
>     	s1 = s1.fontcolor("red");
>     	document.write(s1);
>     	document.write("<br>");
>     	
>     	var s2 = "to be or not to be";
>     	//split("字符串"): 使用指定字符串切割字符串，返回字符串数组
>     	var arr = s2.split(" ");
>     	for(var i =0;i<arr.length;i++){
>     		document.write(arr[i]);
>     		document.write("<br>");
>     		}
>     	document.write("<br>");
>     	
>     	//substring(start,end); 截取字符串，start：开始索引， end:结束索引
>     	document.write(s2.substring(0,2));
>     	document.write("<br>");
>     	
>     	//substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
>     	document.write(s2.substr(0,2));
>     </script>
> 
>   
> 8.2 Number对象（和String对象类似）  
> 
> 
>     <script type="text/javascript">
>     	
>     	//Number对象
>     	var n1 = new Number(10);
>     	//document.write(n1);
>     	var n2 = new Number(10);
>     	document.write(n1==n2);
>     	document.write("<br>");
>     	document.write(n1.valueOf()==n2.valueOf());
>     
>     </script>
> 
> 8.3 Boolean对象  
> 
> 
>     <script type="text/javascript">
>     	//Boolean对象
>     	var b1 = new Boolean(true);
>     	var b2 = new Boolean(true);
>     	document.write(b1==b2);
>     	document.write("<br>");
>     	document.write(b1.valueOf()==b2.valueOf());
>     	document.write("<br>");
>     </script>
> 
>   
> 
> 
> 8.4 Math对象
> 
> 常用的方法：
> 
> 1）ceil()： 向上取整。 如果有小数部分的话，直接+1
> 
> 2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位  
> 3) round(): 四舍五入取整  
> 4）random(): 生成一个随机的0-1的小数 .包含0，不包含1  
> 5）max(): 返回最大值  
> 6）min(): 返回最小值 
> 
> 分析：这些方法都比较简单，这里给出一个猜数字的游戏案例，其中就用到了Math的方法：
> 
>     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>     <html xmlns="http://www.w3.org/1999/xhtml">
>     <head>
>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>     <title>无标题文档</title>
>     <script type="text/javascript">
>     	var n = Math.floor((Math.random()*100+1));
>     	//alert(n);
>     	function guess(){
>     		
>     		var num = document.getElementById("d1").value;
>     		num = parseInt(num);
>     		if(num>n){
>     			alert("大了");
>     		}else if(num<n){
>     			alert("小了");
>     		}else if(num==n){
>     			alert("对了！");
>     		}
>     	
>     	}
>     
>     </script>
>     </head>
>     
>     <body>
>     	请输入你猜的数字：<input type="text" id="d1" />
>         <input type="button" value="猜猜猜!" οnclick="guess()" />
>     </body>
>     </html>
> 
>   
> 
> 
> 8.5 Date对象  
> 分析：创建Date对象，调用它的一些方法，可以得到当前时间的年月日，时分秒，这里给出一个案例练习：网页时钟，利用定时器，时间动态变化：
> 
>     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>     <html xmlns="http://www.w3.org/1999/xhtml">
>     <head>
>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>     <title>无标题文档</title>
>     </head>
>     
>     <body>
>     <span id="s1"></span>
>     </body>
>     <script type="text/javascript">
>     	function getTime(){
>     		var span = document.getElementById("s1");
>     		//创建日期对象
>     		var date = new Date();
>     		
>     		var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"   "+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();
>     		
>     		
>     		span.innerHTML=time;
>     		}
>     		
>     	window.setInterval("getTime()",1000);
>     </script>
>     </html>
> 
> ![Center 2][]  
>   
> 
> 
> 8.6 Array数组对象
> 
> 方式一：创建数组  
> 1.1 指定数组长度  
> var arr = new Array(3);  
>   
> 1.2 不指定数组长度、默认0个元素
> 
> var arr = new Array();  
>   
> 1.3 指定具体内容  
> var arr = new Array(10,"hello",true);  
>   
> 方式二： 不需要new，直接指定内容  
> var arr = \[10,"java",false\];  
>   
>   
> 注意：  
> 1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。  
> 2) js的数组可以存放任意类型的元素。  
>   
> 常用的方法：  
> join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串  
> reverse(): 反转数组中的元素  
>   
> 常用的属性：length 数组的长度  
> 
> 
>     <script type="text/javascript">
>     
>     	//1.1:var arr = new Array(3);
>     	var arr1 = new Array(3);
>     	arr1[0] = 1;
>     	arr1[1] = 2;
>     	arr1[2] = 3;
>     	arr1[3] = 4;
>     	
>     	//1.2 var arr = new Array(); 创建数组不指定长度
>     	var arr2 = new Array();
>     	arr2[0] = 10;
>     	arr2[1] = true;
>     	arr2[2] = "hello";
>     	
>     	
>     	//1.3 var arr = new Array("hello",100,200);
>     	var arr3 = new Array(11,12,13);
>     	
>     
>     	//方式2:创建数组,并给数组直接赋值不需要new
>     	var arr4 = [15,22,"w"];
>     	
>     	//join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符
>     	var arr5 = ["001","002","003"];
>     	var str = arr5.join("&&");
>     	document.write(str);
>     	
>     	document.write("<br>");
>     	
>     	//reverse(): 反转数组中的元素
>     	arr5 = arr5.reverse();
>     	for(var i=0;i<arr5.length;i++){
>     	document.write(arr5[i]);
>     	document.write("<br>");
>     	}
>     	
>     
>     </script>
> 
>   
>

[Center]: /images/20220614/06e37e6b44fb4b85b09f95e8477dbeca.png
[Center 1]: /images/20220614/7a9fd6bd14fd4ca4882c537e3e55ce38.png
[Center 2]: /images/20220614/b9e2ef82b32943aabbc0b93986403daa.png