效果图:
案例分析:
有时候,当我们打开某一个网页的时候,会弹出对话框出来。
案例目的:
通过本此案例学习,你将会收获:
- 如何在html中插入javascript代码。
- 了解alert()函数的用法。
开发工具
- HBuilderX
注:开发工具可以选择vscode .webstrom等
闯关难度:容易
操作步骤:
- 创建html模板文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
- 引入javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 此处开始 -->
<script type="text/javascript">
</script>
<!-- 此处结束 -->
</body>
</html>
在html文件中引入javascript有多种方法,这里,我们选择在body标签内使用script标签引入js代码。在script标签内有一个type属性,type是类型的意思,这个属性的作用是用来告诉浏览器,当前文本类型是javascript,要求浏览器使用javascript语法去识别script标签里面的内容呐。
- 添加alert()函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
<!-- 此处开始 -->
alert("木马来啦");
<!-- 此处结束 -->
</script>
</body>
</html>
alert() 是函数,是javascript里面的一种数据类型,那么,什么时候函数呢?我们可以理解函数为一种工具,可以帮助我们快速完成某一种功能的函数。
函数是由三部分组成的,英文+括号+括号里面的东西。英文是用来区分是什么函数,也可以理解为是有什么作用的工具,不同的英文代表不同的函数,就好比不用的工具有不同的作用,举个例子,面包机是专门用来做面包的,割草机是专门用来割草的。而alert()就是具有弹窗功能。而参数就相当于原材料,比如,面包机的材料就是面粉,我们只需要在面包机的口内传入面粉等原材料,最后就可以一个个包子。而我们函数这个工具的口就是括号,只需要在括号内加入原材料,在js中,我们把原材料称作为参数。就可以获取到想要的效果了。
函数在这里,我们先作了解,往后会详解析,小伙伴们只需要了解什么是函数,函数由哪几部分组成既可以啦。
好的嘞,到此,我们第一个案例就完成了哦,是不是很简单呀?下一关会难一点哦,你准备好了吗?我们继续努力坚持往下做吧!Let`s Go!