JavaScript交互式网页设计第二章 JS函数与事件

最新推荐文章于 2024-07-09 10:38:13 发布

peaceandjoy123

最新推荐文章于 2024-07-09 10:38:13 发布

阅读量337

点赞数

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

本文链接：https://blog.csdn.net/tan_tantan123456/article/details/128136829

版权

函数的定义：

<script type="text/javascript">
			function 函数名(形参1,形参2,…形参n){
				语句;
			}
		</script>

定义函数有4个规则：

1.function是关键字。function后面是函数名，js中的函数不必说明返回值类型

2.函数的命名规则与变量名的命名规则相同

3.函数名的()可以包括若干参数，也可以选择不带任何参数

4.最后是一对{ },包含具体实现程序中的某些特定功能的若干语句

示例:

<script type="text/javascript">
			//具名函数
			//计算长方形的面积
			//形参和实参的个数可以不一样，当形参多了，直接忽略掉
			
			Function getArea(width,height){//形参
				var area=width*height;
				document.write("面积为"+area);
			}
</script>

函数的返回值：

return 返回值；

匿名函数：

<script type="text/javascript">
			(function  (width,height) {
				console.log("匿名函数",width*height)
			})(9,9);
			
			var getMm=function  (width,height) {
				console.log("匿名函数",width*height)
			};
			getMm(7,7);
</script>

箭头函数：

<script type="text/javascript">
			((width,height)=>{
				console.log("箭头函数",width*height);
			})(6,6);
</script>

变量的作用域：

变量的作用域主要分为全局变量和局部变量两种。全局变量是在函数体外部声明的，可以在任何地方，包括函数的内部使用。局部变量是在函数体内声明的，只能在函数体内部使用。局部变量随着函数的结束而消失。

系统函数：

parseInt()函数：将字符串转换为整数，如果不是以整数开头，将返回NaN（非数字值）

parseFloat()函数：返回的是一个浮点数

isNaN()函数：用于判断参数是否是NaN。如果是NaN，那么isNaN()函数返回true

eval()函数：是以字符串形式表示的js代码串，并返回执行代码串后的结果

<h2>
			<input type="text"id="txt"/>
			<input type="button"value="计算" onclick="caculate"/>
			<script type="text/javascript">
				function caculate(){
					var innerT=document.getElementById("txt").value;
					var rs=eval(innerT);
					alert("计算结果是："+rs);
				}
			</script>
</h2>

js事件：

<body>
		<!-- 方式一 -->
		<p onclick="this.style.fontSize='30px'">事件与处理程序的绑定</p>
		<!-- 方式二 -->
		<p id="tex" onclick="changeSize()">事件与处理程序的绑定</p>
		<p id="text">事件</p>
		<script type="text/javascript">
			function changeSize(){
				var obj=document.getElementById("tex");
				obj.style.fontSize='30px';
			}
			function changeSize1(){
				var obj=document.getElementById("text");
				obj.style.fontSize='30px';
			}
			document.getElementById("text").onclick=changeSize1;
		</script>
</body>

js常用事件

鼠标点击事件：

性别：
		<input type="radio" name="gender" id="man" value="男生" onclick="showGender(this)">男
		<input type="radio" name="gender" id="woman" value="女生" onclick="showGender(this)">女 <!-- ctrl+alt+r复制上一行 -->
	<script type="text/javascript">
		//onclick鼠标点击事件
		function showGender(obj){
			alert("您的性别是："+obj.value);
		}
	</script>

onmouseover事件和onmouseout事件

<marquee behavior="" direction="right" onmouseover="stop()" onmouseout="start()">
		<h1 id="sanshuo">哈哈哈</h1>
		<img src="img/img_1.jpg" alt="">
</marquee>

onmousemove事件：

    <!-- onmousemove鼠标移动事件 -->
	鼠标移动了<span id="sp">0</span>像素
	<div style="width: 200px; height: 200px; background-color: paleturquoise;"         onmousemove="moveCount()"></div>
	<script type="text/javascript">
		var count=0;
		function moveCount(){
			document.getElementById("sp").innerHTML=++count;
		}
	</script>

onload事件

    <!-- onload事件 -->
	<script type="text/javascript">
		window.onload=function(){
		 	alert("加载完成");
		}
		//用箭头函数做加载完成
		// window.onload=()=>{alert("马卡");}
	</script>

onblur事件

    <!-- onblur事件 鼠标或光标离开之后的事件-->
	<fieldset id="" style="width: 400px;">
		<legend>用户登录</legend>
		用户名：<input type="text" name="userName" id="userName" onblur="checkUser(this)">
		<span id="error" style="color: red;"></span>
	</fieldset>
	<script type="text/javascript">
		function checkUser(obj){
			if(obj.value.length<=6){
				// alert("输入不合法，请重新输入");
				document.getElementById("error").innerHTML="*输入不合法，请重新输入";
			}
		}
	</script>

onchange事件

    <!-- onchange事件 -->
	个人介绍：
	<select name="" id="" onclick="changeLink(this)">
		<option value="请选择">请选择</option>
		<option value="http://www.baidu.com">百度</option>
		<option value="http://www.taobao.com">淘宝</option>
	</select>
	<script type="text/javascript">
		function changeLink(obj){
			if(obj.value!="请选择"){
				window.open(obj.value);
			}
		}
	</script>

表单事件

onkeypress 键盘按键事件

keycode=13 回车键

keycode=9 Tab键

peaceandjoy123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript交互式网页设计第二章 JS函数与事件

全局变量是在函数体外部声明的，可以在任何地方，包括函数的内部使用。局部变量是在函数体内声明的，只能在函数体内部使用。function后面是函数名，js中的函数不必说明返回值类型。parseInt()函数：将字符串转换为整数，如果不是以整数开头，将返回NaN（非数字值）eval()函数：是以字符串形式表示的js代码串，并返回执行代码串后的结果。3.函数名的()可以包括若干参数，也可以选择不带任何参数。
复制链接

扫一扫