JavaWeb---Day 04

小麦穗呀

已于 2023-04-28 18:10:13 修改

阅读量107

点赞数

分类专栏： JavaWeb 文章标签：前端 html java javascript

于 2023-04-28 17:49:05 首次发布

本文链接：https://blog.csdn.net/qq_49544301/article/details/130430736

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：明天就是五一假期了，小编在这里祝大家节日快乐。不过在休息的同时也不要忘了回顾以前所学的知识，及时进行查漏补缺。

一、js函数

function 函数名(传参){
函数体
return 返回值;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function f1(){
				console.log("嗨嗨嗨，我是第一个函数")
			}
			f1();
			
			function f2(){
				var b = 2;
				console.log("嗨嗨嗨，我是第二个函数")
				return b;
			}
			var c = f2();
			console.log("c="+c);
			
			function f3(a,b){
				console.log("嗨嗨嗨，我是第三个函数")
				return a*b;
			}
			var c = f3(2,3);
			console.log("c="+c);
		</script>
	</head>
	<body>
	</body>
</html>

二、函数的声明方式

<script type="text/javascript">
// 三种方式，创建函数，实现传入i,j，返回i+j
			function test1(i,j){
				return i+j;
			}
			var sum = test1(2,3);
			console.log("sum="+sum);
			var sum = function(i,j){
				return i+j;
			}
			console.log(sum(3,4));
			var sum2 = new Function("i","j","return i+j");
			console.log(sum2(1,2));
</script>

三、js类型转换&局部变量

<script type="text/javascript">
// 类型转换string和number
			var num = 10;
			var str = num.toString();
			console.log(typeof(str));
			var num2 = parseInt(str);
			console.log(typeof(num2));
			// 验证局部变量
			function test2(){
				var gg1 = "111";
				gg2 = "222";
			}
			test2();
			//console.log(gg1);
			console.log(gg2);
</script>

四、js对象

js对象分为自定义对象及系统对象

（一）自定义对象

<script type="text/javascript">
// 三种方式定义自定义对象
			var teacher = {
				"t-name" : "张三",
				"age" : "23",
				"sex" : "男",
				address:{
					"shi" : "西安市",
					"qu" : "雁塔区"
				},
				test3:function(i,j){
					return i+j;
				}
			}
			document.write(teacher["t-name"]);
			document.write(teacher.address.shi);
			document.write(teacher.test3(4,5));
			
			function test4(){};
			var t = new test4();
			t.name = "王五";
			t.age = 33;
			t.sex = "男";
			console.log(t.name);
			console.log(t.age);
			
			function teacher2(name,age,sex){
				this.name = name;
				this.age = age;
				this.sex = sex;
				this.test5 = function(){
					alert("嗨嗨嗨");
				}
			}
			var teacher2 = new teacher2("赵六",24,"女");
			console.log(teacher2.name);
			teacher2.test5();
		</script>

五、js常用内置对象及方法

（一）Math对象

方法	描述
abs()	绝对值
random()	随机数
ceil()	向上取整
floor()	向下取整
round()	四舍五入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Math</title>
		<script type="text/javascript">
			document.write(Math.abs(-10));
			document.write("<br / >");
			document.write(Math.ceil(2.4));
			document.write("<br / >");
			document.write(Math.floor(2.6));
			document.write("<br / >");
			document.write(Math.round(4.3));
			document.write("<br / >");
			document.write(Math.round(4.7));
			document.write("<br / >");
			
			document.write(parseInt(Math.random()*46 + 5));
			
		</script>
	</head>
	<body>
	</body>
</html>

（二）Date对象：需要创建实例

方法	描述
getFullYear()	返回年份
getMonth()	返回月份的索引，从0开始，需要+1
getDate()	返回当前月份的第几天
getHours()	返回小时数
getMinutes()	返回分钟
getSeconds()	返回秒数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Date</title>
		<script type="text/javascript">
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth()+1;
		var day = date.getDate();
		var hour = date.getHours();
		var minute = date.getMinutes();
		var second = date.getSeconds();
		document.write("当前时间为："+"<br />"+hour+":"+minute+":"+second+"<br />"+year+"/"+month+"/"+day);
		</script>
	</head>
	<body>
	</body>
</html>

（三）string对象

方法	描述
charAt()	返回字符串中指定位置的字符
concat()	连接多个字符串
indexOf()	返回指定字符的位置
replace()	替换指定字符
split()	将字符串分割成数组
subStr( 数字 1 ，数字 2)	从第数字1个索引开始，截取数字2的长度
subString( 数字 1 ，数字 2)	从数字1开始截取，截取到数字2，但是不包含数字2
toUpperCase()	转大写
toLowerCaser()	转小写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String</title>
		<script type="text/javascript">
			var str = "chensen";
			var str1 = "dage";
			var str2 = "a,b,c,d,e,f,g"
			var str3 = "ABCDEFG";
			document.write(str.charAt(2)+"<br / >");
			document.write(str.concat(str1)+"<br / >");
			document.write(str.indexOf("h")+"<br / >");
			document.write(str1.replace("dage","erge")+"<br / >");
			console.log(str2.split(","));
			console.log(str.substr(1,3));
			console.log(str.substring(1,3));
			console.log(str.toUpperCase());
			console.log(str3.toLowerCase());
			
		</script>
	</head>
	<body>
	</body>
</html>

（四）Array对象

数组：一组数据的集合，在内存中是一段连续的空间

数组的特点

1.存储数据时，无需指定数据类型

2.在定义数组时，无需指定数组长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三种方式创建数组</title>
		<script type="text/javascript">
			// 第一种
			var arr = new Array();
			arr[0] = "张三";
			arr[1] = "李四";
			arr[2] = "王五";
			console.log(arr);
			// 第二种
			var arr1 = new Array("陈森",28,"男");
			console.log(arr1);
			// 第三种
			var arr2 = ["老大","老二","老三"];
			console.log(arr2);
		</script>
	</head>
	<body>
	</body>
</html>

（五）常用方法

方法	描述
push()	往数组尾部添加元素，并且返回数组的长度
pop()	删除尾部的元素，并且返回被删除的元素
unshift()	往数组头部添加元素，并且返回数组的长度
shift()	删除头部的元素，并且返回被删除的元素
concat()	多个数组合并，并且返回拼接的结果
splice()	返回被删除的数据，一个参数，从当前索引开始，删除后面所有的数据，两个参数：从参数1 的索引开始，删除参数 2 数量的数据，三个及三个以上的参数：从参数 1 的索引开始，替换至参数2 索引的数据为第三个参数及以后的数据
join()	将数组转换为字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组常用方法</title>
		<script type="text/javascript">
			var arr = [1,2,3,4,5,6,7,8,9];
			var result = arr.push(10,11);
			document.write(arr+"<br />");
			document.write(result+"<br />");
			document.write("========================"+"<br />");
			var result1 = arr.pop();
			document.write(arr+"<br />");
			document.write(result1+"<br />");
			document.write("========================"+"<br />");
			var result2 = arr.unshift(0);
			document.write(arr+"<br />");
			document.write(result2+"<br />");
			document.write("========================"+"<br />");
			var result3 = arr.shift();
			document.write(arr+"<br />");
			document.write(result3+"<br />");
			document.write("========================"+"<br />");
			var result4 = arr.concat([11,12],13,14);
			document.write(arr+"<br />");
			document.write(result4+"<br />");
			document.write("========================"+"<br />");
			var result5 = arr.splice(8);
			document.write(arr+"<br />");
			document.write(result5+"<br />");
			document.write("========================"+"<br />");
			var result6 = arr.splice(6,2);
			document.write(arr+"<br />");
			document.write(result6+"<br />");
			document.write("========================"+"<br />");
			var result7 = arr.splice(4,2,12,13,14);
			document.write(arr+"<br />");
			document.write(result7+"<br />");
			document.write("========================"+"<br />");
			var result8 = arr.join();
			document.write(arr+"<br />");
			document.write(result8+"<br />");
			document.write(typeof(result8)+"<br />");
			document.write("========================"+"<br />");
		</script>
	</head>
	<body>
	</body>
</html>