JavaScript快速上手

2022/5/10 11:00:28

编程Tag： javascript 代码函数按钮 html 背景快速

本文主要是介绍JavaScript快速上手，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

任务说明：

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快速上手的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！