JavaScript函数

奕の辰

已于 2023-03-20 19:52:56 修改

阅读量94

点赞数

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

于 2021-10-10 15:06:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51873764/article/details/120686646

版权

前端专栏收录该内容

13 篇文章

订阅专栏

JS函数20210925

JS函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//js当中定义函数的第一种方式
			/*
			function 函数名称(形参列表){
				方法体
			}
			*/
			/*
			JS当中定义函数的第二种方式
			var 函数名称 = function(形参列表){
				方法体
			}
		   */
			//只对方法进行了定义，并没有对方法进行调用
			function fun1() {
				console.log("fun1无参函数运行。")
			}

			function fun1(a, b, c) {
				console.log("fun1(a,b,c)有参函数运行。")
			}
			//1.JS没有方法重载，写在后面的同名方法，会把前面的同名方法覆盖掉
			//2.JS对方法参数的校验不严格，只要是同名方法，不会去验证传入参数的个数。
			//通过方法名，判断调用的是哪个方法
			fun1();
			fun1(1, 2, 3);

			//只对方法进行了定义，并没有对方法进行调用
			var fun2 = function(i, j) {
				console.log("fun2有参函数运行。")
				var sum = i + j;
				return sum;
			}
			//JS方法在定义后，需要调用
			fun2(1, 2);
			var a = fun2(3, 4);
			console.log(a);
		</script>
	</head>
	<body>
	</body>
</html>

			// var sum = function(a, b, c, d) {
			// 	var result = a + b + c + d;
			// 	return result;
			// }

			var sum = function() {
				//对外部传入的所有参数 进行求和计算
				//arguments:接收所有参数的数组
				var result = 0;
				for (var i = 0; i < arguments.length; i++) {
					result += arguments[i];
				}
				return result;
			}
			console.log(sum(1, 2, 3, 4));
			//实际参数比形式参数个数少，剩下的形参 值会变成undefined
			console.log(sum(1, 2, 3));
			console.log(sum(1, 2, 3, 4, 5));

JS事件

onload:加载完成事件配合window.onload使用。通常用于JS事件绑定的初始化操作。

onclick：单击事件。用于按钮的点击触发JS。

onsubmit:表单提交事件。

onblur:失去焦点事件。

onchange:下拉框和输入框内容发生改变事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//给用户名 和密码 添加焦点丢失事件，一旦焦点丢失，验证是否为空
			//给元素进行事件的注册
			// document.getElementById("username")
			window.onload = function(){
				//JS元素事件注册，只有加在这里，才能保证元素事件能够被正确注册。加在外面是有几率失败的。
				//document:JS自带的对象，代表当前页面的所有标签。
				//document.getElementById(  :通过ID名称去查找对应元素
				//document.getElementById("btn").onclick = function(){ :给id=btn的元素 绑定点击事件，一旦被点击。就执行该方法。
				//document.getElementById( ：获取的是DOM元素：文档对象模型。我们都是去操作它的属性。
				
				//以下均为JS动态事件注册
				document.getElementById("btn").onclick = function(){
					alert("提交按钮被点击");
					console.log(document.getElementById("password"));
					//直接操作属性
					//标签当中的所有属性，都可以在JS当中被.出来。获取或者赋值。
					//1.获取属性
					var div1 = document.getElementById("div1");
					console.log(div1.style);
					console.log(div1.style.width);
					console.log(div1.style.border);
					//2.设置属性
					div1.style.backgroundColor = 'red';
					//3.设置两个标签之间的纯文本
					// div1.innerText = '<h1>你好</h1>';
					//4.设置两个标签之间的HTML字符串
					div1.innerHTML = '<h1>你好</h1>';
				}

				
				//焦点移除事件绑定
				document.getElementById("password").onblur = function(){
					//1.获取当前密码框的value
					var passwordValue = document.getElementById("password").value;
					//2.验证其是否为空字符串，如果是空字符串，弹窗提示
					if(!passwordValue){
						document.getElementById("message").innerText = "请输入密码";
					}else{
						document.getElementById("message").innerText = "";
					}
				}
				
				//下拉框内容改变事件
				document.getElementById("age").onchange = function(){
					var ageElement = document.getElementById("age");
					var age = ageElement.value;
					if(age > 30){
						alert("有点老了");
					}else if(age < 30){
						alert("太年轻了");
					}else{
						alert("壮年");
					}
				}

			}
			//静态事件注册
			var fun1 = function(){
				document.getElementById("username").value = 123;
				var passwordInput = document.getElementById("password");
				passwordInput.value = 123;
				passwordInput.type = 'text';
				passwordInput.id = 'password1';
				passwordInput.className = 'password1';
			}
			
		</script>
	</head>
	<body>
		<div id="div1" style="width: 100px;height: 100px;border: 1px solid black;"></div>
		<form method="get" action="#">
			用户名:<input type="text" name="username" id="username" value="默认" /><br />
			密码:<input type="password" name="password" id="password" /><span id="message" style="color: red;"></span> <br />
			<select id="age">
				<option>10</option>
				<option>20</option>
				<option>30</option>
				<option>50</option>
				<option>90</option>
			</select>
			<button type="button" id="btn">提交</button>
			<button type="button" onclick="fun1();" id="setValue">设置默认值</button>
		</form>
	</body>
</html>