JavaScript进阶

xiongᥫᩣ

已于 2022-02-28 00:18:54 修改

阅读量203

点赞数 9

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

于 2022-02-27 23:59:18 首次发布

本文链接：https://blog.csdn.net/weixin_65474399/article/details/123172650

版权

昨天给大家分享了JavaScript的基本语法，今天就继续来给大家分享一下JS的进阶。

一，函数

1.函数的定义

类似于java中的方法，可以被调用，但是调用的形式不一样。是完成特定任务的代码语句块。

2.函数的类型

(1)系统函数

顾名思义系统函数就是系统自带的函数，不需要自己编写。

例如：parseInt 将字符串转换为整数

parseFloat 将字符串转化内为小数

isNaN 表示非数字类型，可以用来检查是否是非数字

(2)自定义函数

-----1.无参函数

代码中的a1是函数名字括号中无需传参，所以称无参函数中间放置自己需要的代码

function a1(){
	  console.log("123");
	}

-----2.有参函数

在括号中传入两个参数(a,b) 函数的参数不限类型，可以是number,string等

function a2(a,b){
	    console.log(a);
        console.log(b);
	}

-----带返回类型的函数

第一种是没有参数的函数，第二种是有参数的函数

function a3(){
	    return 0;
	}

function a3(a){
	    return 0;
	}

-----普通函数

-----匿名函数

-----高阶函数

-----箭头函数

二，函数的参数特点

	
		//传参的特点
		console.log(dj(1,2,3,4))//传入的参数没有个数限制
		console.log("a")//传入非数字类型时，必须要打上引号
		console.log("a",3,"b,4");//传入的参数也不限制类型

三，window对象

1.常用属性

history: 有关客户访问过的URL的信息，相当于历史记录

	
			//1.history 历史记录
			function back(){//返回
				history.back()
			}
			
			function forward(){//前进
				history.forward()
			}
			
			function go(){//万能油
				history.go(-1)//在go里面放-1，表示后退一格
				history.go(1)//在go里面放1，表示前进一格
			}

location: 有关当前URL的信息

          //2.location
			function f1(){
				//跳转百度,将本地路径改为"https://www.baidu.com"
				location.href="https://www.baidu.com"
			}
			
			function f2(){
				//相当于刷新界面
				location.reload();
			}

2.常用方法

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)

	        //window.XX(windos的方法)
			//window默认可以不用写
			alert("aaa");
			window.alert("aaa");
			
			//window对象常用函数(window可以不写)
			
			//1.输入框
			window.prompt("window")
			
			//2.询问框
			window.confirm("window")
			
			//3.提示框
			window.alert("window")
			
			//4.新开窗口
			window.open("https://www.baidu.com")
			
			//5.关闭当前窗口
			// window.close()
			
			//6.设置定时器
			window.setTimeout(function(){
				alert("爆炸")
			},1000)//后面这1000代表的是毫秒数 代表1秒爆炸 但是只有一次
			
			//7.设置循环定时器,及清除定时器
			var a=0;
			var i=window.setInterval(function(){
				a++;
				console.log("循环爆炸")
				//if判断 让它只爆炸10次
				if(a==10){
					window.clearInterval(i);
				}
			},1000)//i是定时器的编号

3.时间对象---Date

格式：

括号中还可以传入参数，如果不传参数，则代表获取当前时间。

参数的形式是：MM DD,YYYY,hh:mm:ss:ms

格式：
			    var date1=new Date()

Date对象的方法：

setXxx：设置时间
getXxx：得到时间

具体方法：

四，有趣小工具

最后再给大家分享一个有趣的自制小工具，一个简单的计算器，如果非数字则会提示错误，数字就会显示运算结果，感兴趣的也可以一起动手来做哦，原理很简单，都是用的今天分享的小知识，一起来动手制作吧！

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有趣的计算机</title>
	</head>
	<body>
		<!-- p 段落标签 占一整行  -->
		<!-- input 输入框标签 -->
		<p>第一个值：<input type="text"  id="a1"  /></p>
		<p>第二个值：<input type="text"  id="a2"  /></p>
		<!-- disabled 禁用 里面放false表示不可使用 放true 表示可以使用 -->
		<p>结果：<input type="text"  id="a3" disabled="false" /></p>
		<!-- 四个运算按钮 -->
		<p>
			<button type="button" onclick="plus()">+</button>
			<button type="button"onclick="subtract()">-</button>
			<button type="button"onclick="multiply()">*</button>
			<button type="button"onclick="divide()">/</button>
		</p>
		<script type="text/javascript">
		//定义函数
		//1.首先得到两个输入框的值
		//2.进行相应的计算
		//3.将结果显示在表示结果的输入框中
			//加法函数
			function plus(){
				var a=a1.value;
				var b=a2.value;
				var c=parseInt(a)+parseInt(b);
				if(isNaN(c)){
					a3.value="输入错误"
				}
			}
			
			//减法函数
			function subtract(){
				var a=a1.value;
				var b=a2.value;
				var c=parseInt(a)-parseInt(b);
				if(isNaN(c)){
					a3.value="输入错误"
				}
			}
			
			//乘法函数
			function multiply(){
				var a=a1.value;
				var b=a2.value;
				var c=parseInt(a)*parseInt(b);
				if(isNaN(c)){
					a3.value="输入错误"
				}
			}
			
			//除法函数
			function divide(){
				var a=a1.value;
				var b=a2.value;
				var c=parseInt(a)/parseInt(b);
				if(isNaN(c)){
					a3.value="输入错误"
				}
			}
			
		</script>
	</body>
</html>

今天的JS进阶就分享到这啦，精彩下期继续。