JavaScript 快速入门之第二章 函数&BOM课程

于 2022-03-17 21:03:24 发布
阅读量811 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61313896/article/details/123558560
版权

一：函数的概念

  • 函数就是一个封装代码的容器，一次编写，多次利用

二：函数的分类

  • 系统函数：eval,parseInt,parseFloat,isNaN

  • eval函数   专门执行js代码（js代码是字符串形式） 

          //运行字符串形式的js脚本 通过eval
			eval('alert(你好 时间)');

  •  parseInt     将字符串转换为int类型

  • parseFloat  将字符串转换为Float类型

               var a = '123';
			console.log(typeof(a));//string
			 var b = parseInt(a);
			 console.log(typeof(b));//int

  • isNaN  判断是否是非数字(只注重内容)   

  • 如果给定的值能被转换为数字，则返回false；如果不能转换为数字，则返回true；

            var str = 'a123';
			 console.log(isNaN(str)); //true

  • 自定义函数:与java类似，通过"function"定义

  • 自定义函数的类型：

      1.无返回无参数的函数

             function 函数名称(){}

       2.无返回有参数的函数  参数定义  不需要var定义

             function 函数名称(参数1,参数2){}

       3. 有返回无参数的函数
             function 函数名称(){return 返回结果}

        4. 有返回有参数的函数
             function 函数名称(参数1,参数2){return 返回结果}

  • 调用自定义函数的步骤：

  1. 直接方法名调用即可  例如    add(); 

  2. 可以借助js的事件来触发调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义函数</title>
		<!-- js代码区域-->
		<script type="text/javascript">				
			//定义一个函数，计算2个数字的和进行打印输出
			function add1(){
				var a = 1;
				var b = 1;
				console.log(a+b);
			}
			//调用方法
			// add();
			
			function add2(a,b){
				console.log(a+b);
			}
			add2(1,2);
			
			function add3(){
				return '123';
			}
			
			console.log(add3());
			
		</script>
	</head>
	<!-- onload="add()" js加载函数，在网页执行全部加载完毕后才会出发onload事件去运行其中的代码 -->
	<body >
		
	</body>
</html>

二：BOM编程

  • BOM的概念：浏览器对象模型 属于js的三大部分组成之一

  • BOM作用：可以获取浏览器上的一些相关信息（屏幕，导航，历史记录等等操作）

  • BOM下的常用对象：window，history，location

  1. window对象是BOM中的顶层对象.

  2. history和location属于window对象的子对象

  3.  window对象中的常用方法：alert,confirm,prompt

  4. 自定义的所有方法和属性最终都会成为window对象的一部分。

  • window的定时器

  • 设置定时器 

       setTimeout(一次性)   setInterval（永久性）

  •  清除定时器

        clearTimeout(一次性) clearInterval（永久性）
 

  • 案例：window的使用操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>BOM编程</title>
	<script type="text/javascript">
		// 自定义一个方法
		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();
		 
		
		//需求:利用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>

  • history对象  历史记录   

 作用：可以实现跳转前进和后退

方法属性：

               1. forward()/go(1) 跳转到下一页

               2.back()/go(-1)回退

  • 案例：history对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>history对象的使用</title>
	<script type="text/javascript">
		function nextDemo(){
			// 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>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.html</title>
</head>
<body>
	<h1>我的网站</h1>
	<a href="historyDemo.html">跳转至主页</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.html</title>
</head>
<body>
	<h1>这是2.html首页</h1>
	<a href="historyDemo.html">返回</a>
</body>
</html>

  • location对象

常用属性和方法:

  1. window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。 

  2. window.location 对象在编写时可不使用 window 这个前缀。

  3. href 当前窗口正在浏览的网页地址

  4. replace(url) 转向到url网页地址

  5. reload() 重新载入当前网址，如同按下刷新按钮
     

  • 案例：location对象(当前的位置)的使用 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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>

三：Date类的使用

  • Date   日期类

//当前系统时间
var date = new Date();

//获取当前日期对象的年份(四位数字年份)
console.log(date.getFullYear());

//获取当前日期对象的月份(0 ~ 11)
console.log(date.getMonth());

//获取当前日期对象的日数(1 ~ 31)
console.log(date.getDate());

//获取当前日期对象的小时(0 ~ 23)
console.log(date.getHours());

//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getMinutes());

//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getSeconds());

//获取当前日期对象的毫秒(0 ~ 999)
console.log(date.getMilliseconds());

四：Math类的使用

  • Math   数学类


/*正数*/
//可以用来计算一个数的绝对值
console.log(Math.abs(1));  

//可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.ceil(1.1)); 

//可以对一个数进行向下取整，小数部分会被舍掉  
console.log(Math.floor(1.99));  

//可以对一个数进行四舍五入取整
console.log(Math.round(1.4));    

/*负数*/
 //可以用来计算一个数的绝对值
console.log(Math.abs(-1));    

//可以对一个数进行向上取整，小数部分会被舍掉 
console.log(Math.ceil(-1.1)); 

 //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.floor(-1.99)); 

//可以对一个数进行四舍五入取整
console.log(Math.round(-1.4));  
 
/*随机数*/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)

 //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * 10));

 //生成一个1-10之间的随机数          
console.log(Math.round(Math.random() * (10 - 1) + 1));

/*数学运算*/
//Math.pow(x,y)：返回x的y次幂
console.log(Math.pow(12, 3));  

//Math.sqrt(x) ：返回x的平方根
console.log(Math.sqrt(4));

  • 案例：时钟效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时钟效果</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>

渊婉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值