首页 > 编程语言> 文章详细

JavaScript快速上手

2022-05-10 08:31:38 阅读：146 来源： 互联网

标签：函数背景代码 JavaScript HTML 按钮快速

任务说明：

JavaScript语言有许多语法概念，如函数、事件等。本篇内容只是快速入门介绍，将完成一个网页基础交互性功能的实现，以此对JavaScript进行一个基础认知。

在学习本内容之前，应该已经掌握了一些基础HTML和CSS知道，如各种标签的使用，简单的网页布局等。

任务描述：

在页面上放置3个按钮，分别为“换红背景”、“换绿背景”、“换蓝背景”，单击对应按钮后，页面背景更换为对应的背景颜色。

任务分解

在HTML页面上放置4个按钮
对4个按钮分别进行点击事件监听
分别完成4个按钮点击后换背景颜色的业务代码

任务实施

任务一:在HTML页面上放置4个按钮

创建一个HTML文件
完成以下HTML代码编写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速入门</title>
	</head>
	<body>
		<button type="button">换红背景</button>
		<button type="button">换绿背景</button>
		<button type="button">换蓝背景</button>
	</body>
</html>

任务二：对每个按钮分别进行点击事件监听

在HTML文件中，使用script标签包裹JavaScript代码

<head>
	<meta charset="utf-8">
	<title>快速入门</title>
		
	<script type="text/javascript">
		// 在这里面编写JavaScript代码
	</script>
</head>

JavaScript的引入共有3种不同方式，这里我们用的是嵌入式（直接在HTML中使用Script标签，在里面编写JavaScript代码）。别外还有行内式和外链式。

script标签可以放在head内（如上），也可以放在body内，或者放在body后面皆可，只是放在不同位置，执行的时间、先后顺序是不同的（HTML是自上而下解析运行的）。

增加按钮的onclick属性

<head>
	<meta charset="utf-8">
	<title>快速入门</title>
	<script type="text/javascript">
		function toRed(){
			alert("换红背景?")
		}
		function toGreen(){
			alert("换绿背景?")
		}
		function toBlue(){
			alert("换蓝背景?")
		}
	</script>
</head>
<body>
	<button type="button" onclick="toRed()">换红背景</button>
	<button type="button" onclick="toGreen()">换绿背景</button>
	<button type="button" onclick="toBlue()">换蓝背景</button>
</body>

函数

当程序代码量达到一定数量时，当一段(2行以上就可认为是段)代码要重复使用时，为了便于阅读和维护，我们可以将代码模块化、组件化。因此会将一些常用的、重复的功能模块代码编写为函数，之后通过调用一个个的函数来完成指定任务，即减少了重复性代码，又能使代码更加清晰、有条理。

JavaScript提供了一些常用的内置函数，如对话框、日志输出等等，这些内置函数我们可以直接使用即可。如以上代码中 6、9、12行 的代码：

alert("换红背景?"); // （内置函数）弹出警告提示框

除了这些内置函数，我们在完成一些功能代码时，还需要根据具体情况自定义函数，如以上代码中的 5-13行，就共自定义了3个函数。自定义函数的基础语法如下：

function 函数名(){
	// 函数体...
}

事件

事件是指可以被JavaScript侦测到的行为，如在网页中移动或单击鼠标、键盘等。可以通过触发事件来执行特定代码，实现交互效果。例如，用户单机页面上的按钮，触发单击事件后打开一个提示框。如以上代码中的第 17、18、19行 代码，就是在指定onclick事件触发后，将执行的对应函数。

<!-- 单击事件如触发，将执行toRed()函数 -->
<button type="button" onclick="toRed()">换红背景</button>

任务三：完成按钮点击后换背景颜色的业务代码

<script type="text/javascript">
	function toRed(){
		document.body.style.backgroundColor = 'red';
	}
	function toGreen(){
		document.body.style.backgroundColor = 'green';
	}
	function toBlue(){
		document.body.style.backgroundColor = 'blue';
	}
</script>

标签：函数,背景,代码,JavaScript,HTML,按钮,快速
来源： https://www.cnblogs.com/yxchao/p/16245820.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9