模块五使用JavaScript添加动态效果本模块通过5个案例的实现，介绍使用JavaScript添加网页动态效果的方法。这5个案例包括输出信息、表单验证、简单计算器、限时促销和轮播图等，通过这些案例的实现掌握使用JavaScript的基本使用方法。知识目标：掌握将JavaScript引入网页的方式；掌握JavaScript的基本语法；掌握JavaScript的事件与事件调用；掌握BOM对象的常用方法和属性；掌握DOM对象的常用方法和属性。能力目标：会编写简单的JavaScript程序；能阅读并理解简单的JavaScript程序；使用

JavaScript

html>

charset="utf-8"

/>

type="text/css">

h1{

color:#F00;

text-align:center;

}

type="text/javascript">

var

name=prompt("请输入您的姓名");

//弹出输入对话框，输入姓名,存入变量name

alert(name+"您好！");

//弹出显示信息对话框

document.write("

欢迎学习JavaScript!

//在网页上输出信息

……

*/（多行注释）。三、JavaScript的引入方式（20分钟）1．直接将JavaScript代码嵌入HTML中（内嵌式）

JavaScript语句例20-1

alert("李华，欢迎来到JavaScript的世界！");

//在弹出的对话框中显示信息

2．链接外部的JavaScript代码（外链式）例20-2

charset="utf-8">

src="js/01.js"

type="text/javascript">

3．直接在HTML标记中使用（行内式）（1）使用“javascript:”调用。

欢迎来到JavaScript世界！（2）结合事件调用。

type="button"

value="显示信息"

onclick="alert('Hello,

Welcome!');"

action=""

method="get"

class="register"

onsubmit="validate()">

小米用户注册

"required"

type="password"

id="txtPwd1"

class="pwd"

placeholder="密码"

required="required"/>

type="submit"

class="sub"

value="注册"

/>

validate()

{var

userID

=

document.getElementById('txtID').value;//获取输入的小米IDif

(userID.length

<

6

||

userID.length

>

20)

{

//判断小米ID的长度

alert("小米ID必须为6～20个字符，请重新输入！");

//在警示对话框中显示提示信息

return

false;

password1

document.getElementById('txtPwd1').value;

//获取输入的密码

if

(password1.length

password1.length

10)

alert("密码必须为6～10个字符，请重新输入！");

password2

document.getElementById('txtPwd2').value;

//获取输入的确认密码

if(password1!==password2){

alert("两次输入密码不一致！");

name;

name,gender,age;

name="李华";

name="李华",gender="男",age;

a,

type_a;

a

100;

type_a

typeof

a;

document.write(a

+

"的类型是："

"

/>");

true;

"hello";

null;

2023

"明天会更好";

typeof(a);

三、运算符例21-2：判断输入的年份是否是闰年四、函数1．定义函数function函数名（[参数1,参数2…]）{

函数体；

[return表达式]}2．调用函数函数名（[参数1,参数2…]）；例

function

printStr()

//定义函数

alert("苟日新，日日新。");

printStr();

//调用函数

id="box">

简单计算器

请输入第一个数：

id="num1"

type="text">

请输入第二个数：

id="num2"

运算符：

id="opt">

value="+"

selected>+

value="-">-

value="*">*

value="/">/

value="计算"

onclick="calc()">

结果：

id="result"