Javascript函数与BOM

Kissship

已于 2023-12-19 13:41:40 修改

阅读量105

点赞数

文章标签： javascript 前端 html 学习开发语言

于 2023-03-16 11:50:59 首次发布

本文链接：https://blog.csdn.net/weixin_74263417/article/details/129581296

版权

本文详细介绍了JavaScript中的函数，包括系统函数如eval、parseInt等和自定义函数的定义与调用方式。同时，讲解了局部变量与全局变量的区别。此外，还深入探讨了BOM的概念，如window对象、location对象和history对象的常用方法，并给出了实际应用示例，如定时器的使用和页面跳转操作。

摘要由CSDN通过智能技术生成

二.JavaScript局部变量和全局变量

三、BOM编程（Browser Object Model）

3.1BOM概述

3.2BOM的构成

3.3常用方法：

🎁一.Javascript函数

👨‍🎓1.1概述

函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码块
一个 JavaScript 函数用“function“关键字定义，后面跟着函数名和圆括号。
函数：**系统函数**和**自定义函数**

✍️1.2函数分类

🏫1.2.1系统函数

常见的系统函数有：

eval：javascript中eval函数的作用是用于计算一个字符串，并将其作为脚本代码执行。如下：

eval("x=10;y=20;document.write(x*y)")//返回200
document.write(eval("2+2"))//返回4
var x=10
document.write(eval(x+17))//返回27

parseInt：

作用：从一个字符串提取整数。
提取规则：如果字符串第一个字符不是数字，就会返回NaN,它会遇到非数字就停止提取。

parseFloat：

作用：从一个字符串提取小数。
提取规则：如果字符串第一个字符不是数字，就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。

isNaN：

如果是NaN就返回true，如果不是的就是false

function 函数名（参数1，参数2）{

}

作用：先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true，如果是一个数字就得到false。如下：

document.write(isNaN(5-2)); //返回false

document.write(isNaN(0)); //返回false

document.write(isNaN("Hello")); //返回true

🏷️1.2.2自定义函数

（1）无参函数。用法如下：

function 函数名（）{

}

（2）有参函数。用法如下：

function 函数名（参数1，参数2）{

}

（3）有返无参。用法如下：

function 函数名（）{

return 返回值或变量；

}

（4）有返有参。用法如下：

function 函数名（参数1，参数2）{

return 返回值或变量；

}

🏅1.2.3自定义函数的定义方式

（1）显示定义 function 函数名（）{ }

（2）匿名定义 var method=function（）{ }

（3）function定义 var calSum3 = new Function（'num1','num2',' 'return num1 + num2'）

💯1.2.4函数的调用方式

直接调用方式。方法如下：

//直接调用方式
function a(){}
a();

函数内调用函数方式。方法如下：

//函数内调用函数方式
function a(){}
function b(){
    a();
}

事件属性调用。方法如下：

//事件属性调用
function a(){}
<button onclick = "a();">点击</button>

匿名函数通过变量调用。方法如下：

//匿名函数通过变量调用
var sb = function(){
}
console.log(sb);

这里需要提一下，如果调用函数的时候，实参个数大于形参，则只会以形参个数为准；
如果调用函数的时候，实参个数小于形参，未使用的形参值为 undefined。

📚1.2.5返回值

函数执行完毕后，只完成里边的代码，如果我们想要获取到函数运行中产生的数据，就需要用到返回值。如下：

function getResult(){
    return 666;
}
console.log(getResult());

📔二.JavaScript局部变量和全局变量

局部变量：写在方法体的里面的变量称为局部变量；
全局变量：写在方法体之外的变量称为全局变量。

📓三、BOM编程（Browser Object Model）

📘3.1BOM概述

（1）BOM（Browser Object Model）即浏览器对象模型。
（2）BOM提供了独立于内容而与浏览器窗口进行交互的对象；
（3）由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
（4）BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
（5）BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

📒 3.2BOM的构成

首先我们要知道的是，BOM 比 DOM 更大，它包含 DOM。

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
document 对象，文档对象；
location 对象，浏览器当前URL信息；
navigator 对象，浏览器本身信息；
screen 对象，客户端屏幕信息；
history 对象，浏览器访问历史信息；

📙3.3常用方法：

prompt: 显示可提示用户输入的对话框
alert: 显示带有提示信息和确定按钮的对话框
confirm: 显示一个带有提示信息、确定和取消的对话框
window.open("1.html");//打开新的指定页面【注意路径级别】
location.href("1.html");//不打开新页面的前提下直接进入新页面
location.reload();//刷新当前页面
window.close();//关闭当前页面
history.back();//返回必须有历史记录 history.go(-1)
history.forward();//前进必须有历史记录 history.go(1)
setTimeout: 指定的延迟时间之后来执行代码（一次性计时器）
setInterval: 每隔指定的时间执行代码（间隔性触发计时器）

📜1.然后现在让我们来玩一下定时器，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>BOM编程</title>
	<script type="text/javascript">
		//js组成：  ECMAScript核心，BOM，DOM
		//BOM：浏览器对象模型 属于js的三大部分组成之一
		//BOM作用：可以获取浏览器上的一些相关信息（屏幕，导航，历史记录等等操作）
		//BOM下的常用对象：window，history，location
		//1.window对象是BOM中的顶层对象.
		//2.history和location属于window对象的子对象
		//3.window对象中的常用方法：alert,confirm,prompt
		//4.自定义的所有方法和属性最终都会成为window对象的一部分。
 
		//alert(123);
		// window.alert(123);
		// window.confirm('我很喜欢你');
		// 自定义一个方法
		function akjshfdsalfjsalkjfdsadsadlkfsa(){
			alert(123);
		}
		//window.akjshfdsalfjsalkjfdsadsadlkfsa();
 
		//open方法   来源于window对象
		//作用：打开一个新窗口
		function myF(){
			window.open("http://www.baidu.com","helloworld","width=300,height=300");
		}
 
		//当网页加载完毕后，直接自动弹窗广告窗体
		//onload 加载事件
		// window.onload = myF();
		// 
		
		//window的定时器
		// 设置定时器 
		// setTimeout(一次性)   setInterval（永久性）
		// 清除定时器
		// clearTimeout(一次性) clearInterval（永久性）
 
		//需求:利用setTimeout实现3秒后输出好好学习即可。
		var timer = null;
		function myB(){
			// Timer
			timer = window.setTimeout(function(){
				console.log("好好学习");
			},3000);
		}
		
		function myC(){
			window.clearTimeout(timer);
		}
 
		var timer2 = null;
		function myG(){
			timer2 = window.setInterval(function(){
				console.log(1);
			},1000);
		}
		function myH(){
			window.clearInterval(timer2);
		}
	</script>
</head>
<body onload = "myF();">
	<!-- 需求：点击某按钮，打开新窗口 -->
	<button onclick = "myF()">点击弹出</button>
 
	<button onclick = "myB()">点击setTimeout</button>
	<button onclick = "myC()">点击取消setTimeout</button>
 
	<button onclick = "myG()">点击setInterval</button>
	<button onclick = "myH()">点击取消clearInterval</button>
</body>
</html>

📑2.之后是介绍location使用的案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- location的使用 -->
	<script type="text/javascript">
 
	function add(){
		window.location.href = "http://www.4399.com";
	}
 
	function update(){
		var aa = document.getElementById("aa");
		aa.href = "http://www.baidu.com";
	}
	</script>
</head>
<body>
	<a id = "aa" href="http://www.4399.com">小游戏</a>
	<button onclick = "add()">点击跳转到4399小游戏</button>
	<button onclick = "update();">修改超链接的地址</button>
</body>
</html>

📄3.以及用window方法实现跳转的前进与后退的例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>history对象的使用</title>
	<script type="text/javascript">
		// history对象  历史记录   
		// 作用：可以实现跳转前进和后退
		function nextDemo(){
			//能否使用history直接调用  当然
			// window.history.forward();//跳转到下一页
			window.history.go(1);
		}
 
		//回退
		function backDemo(){
			// history.back();//回退
			window.history.go(-1);
		}
 
	</script>
</head>
<body>
	<a href="2.html">下一章节</a>
	<a href="1.html">返回上一章节</a>
	<button onclick = "nextDemo();">前进</button>
	<button onclick = "backDemo();">回退</button>
 
 
</body>
</html>

🌐4.时间方法的使用：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	
	function myd(){
		
		window.setInterval(function(){
			var oDiv = document.getElementById("oDiv");
			//获取当前的系统时间
			var date = new Date();
			var year =  date.getYear()+1900;
			var month = date.getMonth()+1;
			var day = date.getDate();
			var h = date.getHours();
			var m = date.getMinutes();
			var s = date.getSeconds();
			//.innerHTML 获取非表单元素的内容
			// oDiv.innerHTML=date.toLocaleString();
			oDiv.innerHTML = year+"年"+month+"月"+day+"日 "+h+":"+m+":"+s;
		},1000);
	}
	//通过加载函数调用
	window.onload = myd();
 
	</script>
</head>
<body>
	<div id="oDiv"></div>
</body>
</html>

⚙️5.随机数的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	// Math的使用
	console.log(Math.abs(-10));
	console.log(Math.ceil(12.999));
	console.log(Math.floor(12.999));
	console.log(Math.random());//随机数   介于0-1之间。
 
	//生成随机数
	var sj = Math.random()*10;
	console.log(Math.floor(sj));
 
	var names = ["称心","陈亚神","杨瑞","增加成","黄佳程","林凡","汤圆","梨园","六元","黄锐"];
 
	var sj2 = Math.floor(Math.random()*10);
 
	console.log(names[sj2]);
 
 
	console.log(Math.sqrt(25));
 
	console.log(Math.round(12.99));
	</script>
</head>
<body>
	
</body>
</html>

🧱6.计算器

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器案例</title>
		<script type="text/javascript">
			//根据标签的id属性获取该id所在的标签上的对象
			// document.getElementById('id的属性值')
			//定义一个函数
			function add(mytype) {
				console.log(mytype);
				//获取第一个数字和第二个数字
				var a = document.getElementById('num1').value;
				var b = document.getElementById('num2').value;
				// !a.value 自动判断非空
				
				if(!a && !b){
					alert("请输入合法的数据后再参与计算");
				}else{
					//判断a和b是否为非数字
					if(!isNaN(a) && !isNaN(b)){
						var result = document.getElementById('result');
						if(mytype === '+'){
							var c = parseFloat(a)+parseFloat(b);
							result.value = c;
						}else{
//parseFloat：取小数
							eval(`result.value = parseFloat(a)${mytype}parseFloat(b)`);
						}
					}else{
						alert('数据不合法');
					}
				}
				//alert(a.value+"   "+b.value);
			}
 
 
		</script>
	</head>
	<body>
		<!-- 输入框中的内容最终会保存到input标签上的value属性 -->
		第一个数字 <input type="text" value = "" id="num1"> <br>
		第二个数字 <input type="text" value = "" id="num2"> <br>
		<button onclick="add(this.innerHTML)">+</button>
		<button  onclick="add('-')">-</button>
		<button  onclick="add('*')">*</button>
		<button  onclick="add('/')">/</button><br>
		结果: <input type="text" id="result">
	</body>
</html>

最后为了大家更方便,更有效地学习JS，给大家带来了Javascript02所有内容的思维导图：

今天的不开心就到此于止吧，明天依旧光芒万丈。加油，奥里给！

Kissship

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Javascript函数与BOM

函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码块一个 JavaScript 函数用“function“关键字定义，后面跟着函数名和圆括号。函数：**系统函数**和**自定义函数**（1）无参函数。function 函数名（）{（2）有参函数。function 函数名（参数1，参数2）{（3）有返无参。function 函数名（）{return 返回值或变量；（4）有返有参。function 函数名（参数1，参数2）{return 返回值或变量；
复制链接

扫一扫