JavaScript交互式网页设计——函数与事件

最新推荐文章于 2024-09-30 09:39:16 发布

讨厌睡不着

最新推荐文章于 2024-09-30 09:39:16 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_62296995/article/details/121939146

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了JavaScript中的函数定义、调用和返回值，包括匿名函数和变量作用域。还介绍了JavaScript系统函数如parseInt和parseFloat。接着讲解了事件的概念，如点击、移入移出等，以及事件与处理程序的绑定方法。最后，列举了一些常见的JavaScript事件，如onclick、onmouseover等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<1>.函数的定义

函数：为完成特定的功能而定义的一段程序代码

函数的定义： function 函数名（参数列表）{ 程序代码 }

1.JavaScript函数不必说明返回值类型，列表参数不用var

2.函数名的命名规则与变量一致

3.参数列表可以传若干参数，也可以不传，传入的实际参数会被函数内部实际获取，无关参数会被放入argument数组中

<script>
		//定义一个计算面积的方法
		function getArea(width,height){
			var area = width*height;
			document.write("面积为："+area);
		}
	</script>

<2>.函数的调用

函数的调用需要通过函数名来完成调用，并且括号中需传入所需要的参数值；

<3>.函数的返回值

函数的返回值通过return关键字来完成，可以将函数内部语句的结果返回给外部语句，函数外部语句通过参数来与函数内部进行信息传递,return关键字返回结果值之后，return以下的代码则不会再执行，函数不一定需要返回值，但返回值可以停止后续的代码的执行

<script>
     function getArea(width,height){
      return width*height;    
     }
    var result = getArea(3,4);
    document.write("面积为："+result);
</script>

<4>.匿名函数

匿名函数顾名思义为没有名字的函数也被称为拉姆达函数，如下

     <script>
			(function(width,height){
				document.write("面积为："+height*width);
			})(3,4);
	</script>

JavaScript中，函数也是一种数据类型，即function型，其也可以赋值给变量，如下

     <script>
			var area =  function(width,height){
				return width*height;
			};
			document.write(area(3,4));
    </script>

<5>.变量的作用域

变量分为全局变量和局部变量，全局变量为函数外声明的变量，整个script脚本中都可以使用，局部变量为函数内部的变量，只能在函数内部中使用，如果函数输出名变量名称相同的全局变量和局部变量，函数优先输出局部函数

    <script>
		var result =10;
		function getResutlt(){
			var result = 20;
			document.write(result);
		}
		getResutlt();
	</script>

<6>.JavaScript系统函数

1.parseInt（）函数：将字符串转换整数，从字符串开头开始解析，在第一个非整数的位置停止解析并返回前面读到的所有整数，若开头不是整数，则返回NAN；

2.parseFloat（）函数：与parseInt函数相同，不过返回的是浮点数

3.isNaN（）函数：判断字符串是否不是数字，不是返回true，否则返回false，NaN即为not a number(不是数字) , isNaN("空格")返回为false,即空格默认为数字

4.eval () 函数：即返回执行代码串的结果，例如输入文本框的值为5+1*3,则eval（）函数返回8，即返回的是计算结果

<7>.事件

事件（event）：通过鼠标或按键在浏览器窗口或页面元素的操作。

例如：鼠标在按钮上进行了点击，这就是一个鼠标点击事件，按钮就是事件源。将一段程序代码与事件进行绑定，触发事件时将自动执行代码程序，整个过程叫做事件驱动（event driver），对事件绑定的代码程序或函数称为事件处理程序（event handler）

<8>.事件与处理程序的绑定

1.在元素标签内增加一个处理事件的属性，属性值为函数名（带参数列表

<body>
	<h3 onclick="getFont()">点击改变颜色</h3>
	<script>
		function getFont(){
			document.getElementsByTagName("h3")[0].style.color = "red";
		}
	</script>
	</body>

）

2.在脚本代码中设置元素的事件属性，属性值为函数名（不带参数列表）

<body>
	<h3>点击改变颜色</h3>
	<script>
		//获取页面元素对象
		var h3 = document.getElementsByTagName("h3")[0];
		//定义一个改变颜色的函数
		function changeColor() {
			h3.style.color ="red";
	};
	h3.onclick = changeColor; 
	console.log(changeColor());
	console.log(changeColor);
	</script>
	</body>

说明：changeColor()有()表示函数的调用，而changeColor没有()表示函数的代码语句，h3.onclick是一个点击事件，需要绑定的是代码程序而不是函数的调用

<body>
	<h3>点击改变颜色</h3>
	<script>	
		//定义一个改变颜色的函数
		function changeColor() {
			h3.style.color ="red";
	};
	 document.getElementsByTagName("h3")[0].onclick = function(){
	 	this.style.color ="red";
	 };

	</script>
	</body>

3.页面元素的事件直接绑定一段代码程序

<9>.常用的事件

1.鼠标点击事件 onclick

2.鼠标的移入和移出事件 onmouseover(移入) onmouseout(移出)

3.鼠标移动事件，以像素为单位 onmousemove

4.页面加载完成的监听事件 onload

5.鼠标聚焦离焦事件,常用于表单验证 onblur(离焦) onfocus(聚焦)

6.输入框或下拉框值发生改变触发的事件 onchange

7.表单提交事件 onsubmit return一个boolean型的值给浏览器，表示浏览器是否对表单进行默认处理，而表单的默认处理是跳转至action的指定页面

<body>
		<form action="info.html" onsubmit="return avlid()">
			<input type="submit" value="提交" />
		</form>
	<script>
		function avlid(){
			return true;
		}
	</script>
	</body>