Night小课堂11 JavaScript函数及BOM

Night-Zzz

已于 2023-05-20 15:19:12 修改

阅读量83

点赞数 1

文章标签： javascript

于 2023-05-20 15:17:37 首次发布

本文链接：https://blog.csdn.net/NoNight_Zzz/article/details/130781426

版权

函数

1.函数定义

（1）函数定义：是完成特定任务时的代码语句块

（2）函数的使用方式：可以直接使用

（3）函数的分类：系统函数（JavaScript 内置函数），自定义函数

（4）自定义函数分类：匿名函数和有名函数

（5）函数的别名：方法

2.常用系统函数

（1）parselnt（）将字符串类型转换成数值类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a ="30"//定义一个字符串类型的变量
			
//			alert(typeof(a)); 获取变量a的类型 string类
			
			var b = parseInt(a);//利用javascript中的parseInt（）方法
								//将a变量转换为数值类型的变量，并赋值给变量b
			alert(typeof(b));//获取变量b的类型，为number	
		</script>
	</body>
</html>

（2）parseFloat（）将字符串转换为浮点类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = "32.4";
			var b = parseFloat(a);
			alert(b);
			
		</script>
	</body>
</html>

（3）isNaN（）判断参数是否为非数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script  type="text/javascript">
//			var a = 12;
//			alert(typeof(a));
//			alert(isNaN(a));
			
//			var b ="123";
//			alert(typeof(b));
//			alert(isNaN(b));
//			
			var c = "name"
			alert(typeof(c));
			alert(isNaN(c));
		</script>
	</body>
</html>

3.自定义函数

（1）有名函数

特点1：定义：有名函数名称的函数

特点2：定义函数的语法结构：

特点3:调用有名函数的语法结构：

1）直接调用

2）html调用

（2）匿名函数

特点1：函数无名称

特点2：调用匿名函数需要借助变量

4.无参函数

5.有参函数

BOM

1.BOM定义及组成部分

定义：BOM：浏览器对象模型 (Browser Object Model)

BOM核心组成部分（对象）：

window

history

document

location

2.window对象

常用方法

（1） confirm（）

特点1：确认框

特点2：当确认框弹出时，用户可以点击“确认”或者“取消”来确定用户操作。

当你点击“确认”，确认框返回true，如果点击“取消”，确认框返回false

特点3：window.confirm（）可缩写为confirm（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button onclick="show()">触发</button>
		<script type="text/javascript">
			function show(){
				var flag = window.confirm("需要帮助吗");
				if(flag){
					alert("好的");
				}else{
					alert("goodbye");
				}
			}
		</script>

	</body>
</html>

（2）open( )

特点1：用于打开一个新的浏览器窗口

特点2：window.open（）可简写为open（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function show(){
				window.open("index.html");
			}
		</script>
		<input type="button" onclick="show()" value="点我" />
	</body>
</html>

（3）prompt( )

特点1：prompt( )用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串

特点2：prompt( )返回值就是输入值

特点3：window.prompt( )可以简写为prompt( )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="点我" onclick="show()" />
		<script type="text/javascript">
			function show(){
			var flag = prompt("你叫什么","Night");
				if(flag=="小A"){
					alert("goodluck");
					}else if(flag=="小B"){
					alert("happy")
					}else{
						alert("很高兴认识你")
					}
				}
		</script>
	</body>
</html>

（4）alert( )

特点1：alert( )方法用于显示带有一条指定消息和一个确认按钮的警告框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var show = function(a){
				window.alert("show(a)"+a);
			}
			var show1 = function(a){
				window.alert("show1(a)"+a);
			}	
			var show2 = function(a,b){
				window.alert("show1(a)"+(a*b));
			}	
		</script>//相同show需要用到arguments.length来解决，但是不能传参数了
		<input type="button" value="show" onclick="show(1)" />
		<input type="button" value="show1" onclick="show1(2)" />
		<input type="button" value="show2" onclick="show2(2,3)" />
		
		<input type="button" value="show2" onclick="javascript:alert('name')" />		
	</head>
	<body>
	</body>
</html>

3.history对象

特点1：history.back（）跳转到上一个URL界面

特点2：history.forward（）跳转到下一个URL界面

特点3：history.back( )-->history.go(-1)

history.forward )-->history.go(1)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="index06.html">go</a>
		<input type="button" value="跳转到下一个页面" onclick="show()" />
		<script type="text/javascript">
			function show(){
//				window.history.forward();
				history.go(1);
			}
		</script>
	</body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>欢迎</h1>
		<input type="button" value="跳转到上一个页面" onclick="show()" />
		<script type="text/javascript">
			function show(){
//				window.history.back();
				window.history.go(-1);
			}
		</script>
	</body>
</html>

4.location对象

特点1：location.href 跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:window.location.href='index06.html'">跳转到index06.html</a>
	</body>
</html>

document.referrer

定义：判断当前的文档是否通过链接访问的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var flag = document.referrer;
			if(flag==""){
				alert("未由其他页面跳转，直接访问")
			}else{
				alert("由其他页面跳转的")
			}
		</script>
	</body>
</html>