Web前端学习（3）_javascript

最新推荐文章于 2022-09-22 00:55:29 发布

晴天小风

最新推荐文章于 2022-09-22 00:55:29 发布

阅读量505

点赞数

分类专栏： JavaWeb笔记 Web前端笔记文章标签： javascript web前端 HTML 对象编程 js函数

本文链接：https://blog.csdn.net/Ag_nevergiveup/article/details/73478079

版权

JavaWeb笔记同时被 2 个专栏收录

41 篇文章 1 订阅

订阅专栏

Web前端笔记

31 篇文章 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>
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>
*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>
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>