javaScript 第四章函数

函数，事件，对象

学会使用自定义函数

知道对象的概念。并且简单使用。

掌握常用事件
核心函数函数调用方法格式

测试
已知华氏度 = 摄氏度*9/5+32；

要求：范围300度以内,以30度为间隔，页面输出华氏度与摄氏度的对照表，要求10条数据。

 var ss=0;
				document.write("<table border='1px' align='center'>")
			 	
				for(var i=1;i<=10;i++){
					 document.write("<tr>")
					 hs=ss*9/5+32;
						document.write("<td>"+i+"</td>"+"<td>"+ss+"</td>"+"<td>"+hs+"</td>");	 
					 	ss+=30;		
						 
				document.write("</tr>")	
					}

一、函数、方法
1.1什么是函数：

函数是指一段可以直接被另一段程序或代码引用的程序或代码。也叫做子程序、（OOP中）方法。
一个较大的程序一般应分为若干个程序块，每一个模块用来实现一个特定的功能。所有的高级语言中都有子程序这个概念，用子程序实现模块的功能。在C语言中，子程序的作用是由一个主函数和若干个函数构成。由主函数调用其他函数，其他函数也可以互相调用。同一个函数可以被一个或多个函数调用任意多次。
在程序设计中，常将一些常用的功能模块编写成函数，放在函数库中供公共选用。要善于利用函数，以减少重复编写程序段的工作量。
函数百度百科
函数：
一段具有特定的功能的代码块。需要时调用，调用时执行！(自己不会主动执行！)
if{}：控制代码是否执行。
for{}：控制代码执行多少次。
function（）{}：控制代码和时执行。调用时执行。

1.2函数的分类：
1库函数
s给我们提供的具有特定功能的代码块。

 			alert()   prompt()  document.write()  Number()  parseInt()  。。。
 
			这都是函数				带括号的其实都是函数
		自定义函数( 重点 )
 
		自己定义函数，根据自己的需求来定义功能。

1.3函数的定义和使用：

 定义函数的格式：
			 		参数列表和return都是可选的。可写可不写。
			 		function 函数名(参数列表){
			 		
			 		return 数据;
			 	}

 函数的调用：

方式一：函数名(参数);
函数名(参数);
alert(“1111”);

方式二：跟标签绑定调用。
事件源：绑定的标签
事件类型：触发事件的操作。
触发的操作：发生的某一件事情
点我1号

方式三：绑定匿名函数：给确定的某一个标签绑定函数
1.拿到这个标签
如何拿到这个标签：
根据id属性取到标签对象
绑定匿名函数
document.getElementById(“id值”);
2.绑定匿名函数
btnEle.onclick = function(){
alert(“111”);
}

1.4、函数的应用

绑定事件函数的函数：
触发事件的事件原，某一个标签
什么时机触发点击等
干什么函数的主体代码块；
点击按钮改变页面颜色

 <body>
		<!-- 点击按钮改变页面颜色 -->
		<button onclick="chagneColor2()">点我</button>
		<!-- <button onclick="chagneColor2()">点我</button> -->
		<script type="text/javascript">
			
			
			function chagneColor(){
				document.body.style.backgroundColor="red";
			}
			document.body.style.backgroundColor="red"
			function chagneColor2(){
				if(document.body.style.backgroundColor=="red"){
					document.body.style.backgroundColor="blue";
				}else if(document.body.style.backgroundColor=="blue"){
					document.body.style.backgroundColor="yellow"
				}else if(document.body.style.backgroundColor=="yellow"){
					document.body.style.backgroundColor="red";
				}
			}
		</script>
	</body>

猜数字1-100

 <body>
		<!-- 
		 猜数字游戏
		 一个输入的值
			定义一个按钮实现调用比较的函数
			进行比大小
			然后输出结果是猜到了还是猜大了猜小了
		 -->
		<fieldset id="">
			<legend>猜数字</legend>
			请输入数字：<input id="input" /><button type="button" onclick="a()">点击猜数字</button><br />
			<span id="tex"> </span>
			<input type="" name="" id="text" value="" />
			
		</fieldset>	
	</body>
	<script type="text/javascript">
		var i=parseInt(Math.random()*100);
		function a(){
			var a1 =document.getElementById("input").value;
			
			if(a1==i){
				document.getElementById("text").value=("猜对了");
				
			}else if(a1>i){
				
				document.getElementById("text").value=("猜大了");
			}else {
				document.getElementById("text").value=("猜小了");
			}
				
			
		}
		 
		
	</script>

1.5函数的返回值和参数；
**返回值 return ** //返回值，就表示当函数执行完毕后会得到一个确定的数值
计算器低级：

 <body>
	<fieldset id="">
			<!-- 计算器
			 两个输入的数据一个输出的数据 加减乘除四个按钮
			 
			 
			 input用value取值
			 
			 inerText ：取出标签的文本内容
			 innerHTML ： 取出标签中的1所有内容 包括标签本身
			 outHTML：
			 outerHTML：
			 eval（） 计算内部表达式的值；
			 -->
			
			
			<legend>计算器</legend>
			第一个<input  id="one" />
			第二个<input  id="two" /><br />
			<button  onclick="add()">+</button>
			<button   onclick="jian()">-</button>
			<button   onclick="cheng()">*</button>
			<button   onclick="chu()">/</button>
			<br />
			结果：<span style="border: 1px solid red;" id="result"></span>
		</fieldset>
		
		<script type="text/javascript">
			function add(){
				var oneval=document.getElementById("one").value;
				var twoval=document.getElementById("two").value;
				document.getElementById("result").innerHTML=Number(oneval)+Number(twoval);
			}
			function jian(){
				var oneval=document.getElementById("one").value;
				var twoval=document.getElementById("two").value;
				document.getElementById("result").innerHTML=Number(oneval)-Number(twoval);
			}
			function cheng(){
				var oneval=document.getElementById("one").value;
				var twoval=document.getElementById("two").value;
				document.getElementById("result").innerHTML=Number(oneval)*Number(twoval);
			}
			function chu(){
				var oneval=document.getElementById("one").value;
				var twoval=document.getElementById("two").value;
				document.getElementById("result").innerHTML=Number(oneval)/Number(twoval);
			}
			//经过观察发现 代码冗余  获取值的代码冗余，思考：可以将冗余代码抽取出来。
			
			
		</script>

另一个版本

 <fieldset id="">
	<legend>计算器</legend>
		第一个<input  id="one" />
		第二个<input  id="two" /><br />
		<button  onclick="jian(this)">+</button>
		<button   onclick="jian(this)">-</button>
		<button   onclick="jian(this)">*</button>
		<button   onclick="jian(this)">/</button>
		<br />
		结果：<span style="border: 1px solid red;" id="result"></span>
	</fieldset>
	
	<script type="text/javascript">
		function jian(a){
			var oneval=document.getElementById("one").value;
			var twoval=document.getElementById("two").value;
			document.getElementById("result").value=eval(oneval+a.innerText+twoval);

innerText 表示获取标签中的文本（内容）不包含标签
innerHTML表示获取标签中的所有内容（包含标签+本身）
outerHTML 表示获取当前标签中的所有内容包含标签本身

如果是表单元素取值用value 属性
如果是非表单元素取值用 innerText，innerHTML，outerHTML

二、对象
2.1什么是对象
在软件系统中，对象具有唯一的标识符，对象包括属性（Properties）和（行为）方法（Methods），属性就是需要记忆的信息，方法就是对象能够提供的服务。

2.2js获取对象
js对象：html中的标签。
//根据id获取元素对象获取的是一个
document.getElementById(“id”);
三、事件
3.1、什么是事件
事件是可以被控件识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。

发生的某件事情。通过html元素触发的事情。
3.2常用事件
1鼠标事件

* onclick	点击事件
ondblclick	双击事件
onmousedown	鼠标按下
onmouseup	鼠标松开
onmouseover	鼠标移入
onmouseout	鼠标移开

2键盘事件

onkeydown	按下
onkeyup	松开
onkeypress	按下并松开

*onload	页面加载完成时触发
*onunload	页面退出时触发

4.表单事件

onblur	元素失去焦点时触发	2
* onchange	该事件在表单元素的内容改变时触发( , , , 和 )	2
* onfocus	元素获取焦点时触发	2
oninput	元素获取用户输入时触发	3
onreset	表单重置时触发	2
onsearch	用户向搜索域输入文本时触发 ( <input=“search”>)
onselect	用户选取文本时触发 ( 和 )	2
* onsubmit	表单提交时触发

总结：

函数，事件，对象

总结：函数学会函数的定义和调用

调用：直接，跟标签事件绑定

对象：document.getElementById();

、
、
、
、、

练习
:4个文本框：省市县详细地址按钮触发：整体地址文本框：拼接显示在整体地址中

 <body>
		省：<input type="" name="" id="s" value="" />
		市 ：<input type="" name="" id="shi" value="" />
		县：<input type="" name="" id="x" value="" />
			<button type="button" onclick="aa()" id=" ">和体</button>
	
		详细地址<input type="" name="" id="btn" value="" />
		<script type="text/javascript">
			function aa(){
				var sval=document.getElementById("s").value;
				var shival=document.getElementById("shi").value;
				var xval=document.getElementById("x").value;
				
				document.getElementById("btn").value=(sval+shival+xval);
				
			}
		</script>
	</body>

posted @ 2021-07-19 14:47 啧啧啧|(*￣￣*) 阅读(9) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· javaScript第三章循环结构

· js笔记+练习题

· 学习js第四天函数

· 学习javascript6

· 寒假第二十一天

阅读排行：
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！

公告

昵称：啧啧啧|(*￣￣*)
园龄： 3年3个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

GAMM

javaScript 第四章函数

总结：

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

	var ss=0;
	document.write("<table border='1px' align='center'>")

	for(var i=1;i<=10;i++){
	document.write("<tr>")
	hs=ss*9/5+32;
	document.write("<td>"+i+"</td>"+"<td>"+ss+"</td>"+"<td>"+hs+"</td>");
	ss+=30;

	document.write("</tr>")
	}

	alert() prompt() document.write() Number() parseInt() 。。。

	这都是函数带括号的其实都是函数
	自定义函数( 重点 )

	自己定义函数，根据自己的需求来定义功能。

	定义函数的格式：
	参数列表和return都是可选的。可写可不写。
	function 函数名(参数列表){

	return 数据;
	}

	<body>
	<!-- 点击按钮改变页面颜色 -->
	<button onclick="chagneColor2()">点我</button>
	<!-- <button onclick="chagneColor2()">点我</button> -->
	<script type="text/javascript">


	function chagneColor(){
	document.body.style.backgroundColor="red";
	}
	document.body.style.backgroundColor="red"
	function chagneColor2(){
	if(document.body.style.backgroundColor=="red"){
	document.body.style.backgroundColor="blue";
	}else if(document.body.style.backgroundColor=="blue"){
	document.body.style.backgroundColor="yellow"
	}else if(document.body.style.backgroundColor=="yellow"){
	document.body.style.backgroundColor="red";
	}
	}
	</script>
	</body>

	<body>
	<!--
	猜数字游戏
	一个输入的值
	定义一个按钮实现调用比较的函数
	进行比大小
	然后输出结果是猜到了还是猜大了猜小了
	-->
	<fieldset id="">
	<legend>猜数字</legend>
	请输入数字：<input id="input" /><button type="button" onclick="a()">点击猜数字</button><br />
	<span id="tex"> </span>
	<input type="" name="" id="text" value="" />

	</fieldset>
	</body>
	<script type="text/javascript">
	var i=parseInt(Math.random()*100);
	function a(){
	var a1 =document.getElementById("input").value;

	if(a1==i){
	document.getElementById("text").value=("猜对了");

	}else if(a1>i){

	document.getElementById("text").value=("猜大了");
	}else {
	document.getElementById("text").value=("猜小了");
	}


	}


	</script>

	<body>
	<fieldset id="">
	<!-- 计算器
	两个输入的数据一个输出的数据加减乘除四个按钮


	input用value取值

	inerText ：取出标签的文本内容
	innerHTML ：取出标签中的1所有内容包括标签本身
	outHTML：
	outerHTML：
	eval（）计算内部表达式的值；
	-->


	<legend>计算器</legend>
	第一个<input id="one" />
	第二个<input id="two" /><br />
	<button onclick="add()">+</button>
	<button onclick="jian()">-</button>
	<button onclick="cheng()">*</button>
	<button onclick="chu()">/</button>
	<br />
	结果：<span style="border: 1px solid red;" id="result"></span>
	</fieldset>

	<script type="text/javascript">
	function add(){
	var oneval=document.getElementById("one").value;
	var twoval=document.getElementById("two").value;
	document.getElementById("result").innerHTML=Number(oneval)+Number(twoval);
	}
	function jian(){
	var oneval=document.getElementById("one").value;
	var twoval=document.getElementById("two").value;
	document.getElementById("result").innerHTML=Number(oneval)-Number(twoval);
	}
	function cheng(){
	var oneval=document.getElementById("one").value;
	var twoval=document.getElementById("two").value;
	document.getElementById("result").innerHTML=Number(oneval)*Number(twoval);
	}
	function chu(){
	var oneval=document.getElementById("one").value;
	var twoval=document.getElementById("two").value;
	document.getElementById("result").innerHTML=Number(oneval)/Number(twoval);
	}
	//经过观察发现代码冗余获取值的代码冗余，思考：可以将冗余代码抽取出来。


	</script>

	<body>
	省：<input type="" name="" id="s" value="" />
	市：<input type="" name="" id="shi" value="" />
	县：<input type="" name="" id="x" value="" />
	<button type="button" onclick="aa()" id=" ">和体</button>

	详细地址<input type="" name="" id="btn" value="" />
	<script type="text/javascript">
	function aa(){
	var sval=document.getElementById("s").value;
	var shival=document.getElementById("shi").value;
	var xval=document.getElementById("x").value;

	document.getElementById("btn").value=(sval+shival+xval);

	}
	</script>
	</body>

GAMM

javaScript 第四章 函数

总结：

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

javaScript 第四章函数