【案例 1-1 htmlresource.ityxb.com/uploads/book/js2/file/bcal.pdf11 掌握alert()用法...
12
1 第 1 章补充案例 【案例 1-1】 <script>标签在 html 中书写位置 一、案例描述 1、 考核知识点 <script>标签可以放在 html 中什么位置 2、 练习目标 掌握<script>标签放在页面中不同位置的区别。 3、 需求分析 将 JavaScript 标识放置<Head>... </Head>在头部之间，使之在主页和其余部分代码之前预先 装载，从而可使代码的功能更强大；代码放在<head>区在页面载入的时候，就同时载入了代码， 在<body>区调用时就不需要再载入代码了，速度提高了，合适运行很大很复杂的程序时。 将 JavaScript 标识放置在<Body>... </Body>主体之间用以实现某些部分动态地创建文档，例 如，图片淡入淡出效果，鼠标跟随事件等。 引入的外部.js 文件，放在<Head>... </Head>中，则页面加载前就运行；放在<Body>... </Body> 中，则先加载，后运行 js 代码；所以在 head 中的代码先执行。 我们一般将<script>标签放置在</Body>结束标签之前。 4、 案例分析 1) 效果如图 1-1 所示。 图1-1 “<script>标签放在 head 中”效果展示 图1-2 “<script>标签放在 body 结束标签之前”效果展示 2) 具体实现步骤如下： a) 在 head 中编写 JavaScript 代码查找 id="context"的 div 元素，控制台打印出图 1-1 效果。 b) 在 body 中编写 JavaScript 代码查找 id="context"的 div 元素，控制台打印出图 1-2 效果。
Transcript of 【案例 1-1 htmlresource.ityxb.com/uploads/book/js2/file/bcal.pdf11 掌握alert()用法...
1
第 1 章补充案例
【案例 1-1】 <script>标签在 html 中书写位置
一、案例描述
1、 考核知识点
<script>标签可以放在 html 中什么位置 2、 练习目标
掌握<script>标签放在页面中不同位置的区别。
3、 需求分析
将 JavaScript 标识放置<Head>... </Head>在头部之间，使之在主页和其余部分代码之前预先
装载，从而可使代码的功能更强大；代码放在<head>区在页面载入的时候，就同时载入了代码，
在<body>区调用时就不需要再载入代码了，速度提高了，合适运行很大很复杂的程序时。
将 JavaScript 标识放置在<Body>... </Body>主体之间用以实现某些部分动态地创建文档，例
如，图片淡入淡出效果，鼠标跟随事件等。
引入的外部.js 文件，放在<Head>... </Head>中，则页面加载前就运行；放在<Body>... </Body>
中，则先加载，后运行 js 代码；所以在 head 中的代码先执行。
我们一般将<script>标签放置在</Body>结束标签之前。
4、 案例分析
1) 效果如图 1-1 所示。
图1-1 “<script>标签放在 head 中”效果展示
图1-2 “<script>标签放在 body 结束标签之前”效果展示
2) 具体实现步骤如下：
a) 在 head 中编写 JavaScript 代码查找 id="context"的 div 元素，控制台打印出图 1-1 效果。
b) 在 body 中编写 JavaScript 代码查找 id="context"的 div 元素，控制台打印出图 1-2 效果。
2
二、案例实现
根据上面的分析，通过 JavaScript 代码来实现 1-1 效果，具体代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title> JavaScript标识放置<Head>...</Head>头部之间</title>
6 <script type="text/javascript">
7 var ODiv = document.getElementById("context");
8 console.log(ODiv); // 打印出 null
9 </script>
10 </head>
11 <body>
12 <div id="context">你好</div>
13 </body>
14 </html>
保存后，在谷歌浏览器中预览，效果如图 1-1 所示。
图1-1 “<script>标签放在 head 中”效果展示
通过 JavaScript 代码来实现 1-2 效果，具体代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title> JavaScript标识放置<Head>...</Head>头部之间</title>
6 </head>
7 <body>
8 <div id="context">你好</div>
9 <script type="text/javascript">
10 var ODiv = document.getElementById("context");
11 console.log(ODiv); // 打印出<div id="context">你好</div>
12 </script>
13 </body>
14 </html>
保存后，在谷歌浏览器中预览，效果如图 1-2 所示。
3
图1-2 “<script>标签放在 body 结束标签之前”效果展示
【案例 1-2】 JavaScript 代码书写位置
一、案例描述
1、 考核知识点
JavaScript 的几种引入方式 2、 练习目标
掌握 JavaScript 的引入方式。
3、 需求分析
在网页中编写 JavaScript 时，分别演示通过内嵌式、外部式、行内式 3 种方式来引入 JavaScript 代码。
4、 案例分析
1) 内嵌式
直接使用<script>标签包裹 JavaScript 代码，直接编写到 HTML 文件中。
2) 外部式
将 JavaScript 代码保存在一个单独的.js 文件中，然后使用<script>标签的 src 属性来引入文件。
3) 行内式
将 JavaScript 代码作为 HTML 标签的属性值使用。
二、案例实现
根据上面的分析，通过内嵌式来引入 JavaScript 代码，具体代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>内嵌式</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 alert('内嵌式')
10 </script>
11 </body>
4
12 </html>
根据上面的分析，通过外部式来引入 JavaScript 代码，具体代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>外部式</title>
6 </head>
7 <body>
8 <script type="text/javascript" src="test.js"></script> // test.js为外部.js文件
9 </body>
10 </html>
根据上面的分析，通过行内式来引入 JavaScript 代码，具体代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>行内式</title>
6 </head>
7 <body>
8 <div onClick="javascript:window.open('#','_blank')">打开空白页</div>
9 </body>
10 </html>
【案例 1-3】常用输出语句
一、案例描述
1、 考核知识点
alert()、console.log()、document.write() 2、 练习目标
掌握 alert()函数的应用。
掌握 console.log()函数的应用。
掌握 document.write()函数的应用。
3、 需求分析
在浏览网页时，经常会看到一些弹出的警示框，用于提醒用户当前的操作是否完成，例如，在电商网
站中，当完成付款时，会弹出支付情况的警示框。
console.log()用于在控制台输出结果，可以帮助开发人员在项目开发时调试内容。
document.write()用于在 HTML 文档输出内容。
4、 案例分析
1) alert()效果如图 1-3 所示。
5
图1-3 “登录成功！”效果展示
2) console.log()效果如图 1-4 所示
图1-4 “控制台输出”效果展示
3) document.write()效果如图 1-5 所示
图1-5 “HTML 文档中输出”效果展示
二、案例实现
根据上面的分析，实现这 3 种方式，具体代码如下：：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>常用输出语句</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 // alert() 弹出警告框
10 alert('登录成功！');
11 // console.log() 控制台输出
6
12 console.log('控制台输出')
13 // 在 HTML文档中输出
14 document.write('在 HTML文档中输出')
15 </script>
16 </body>
17 </html>
【案例 1-4】输出用户输入的信息
一、案例描述
1、 考核知识点
prompt()、document.write() 2、 练习目标
掌握 prompt()用法。
掌握 document.write()用法
3、 需求分析
在输入窗口中输入内容，点击“确定”按钮，把输入的内容展示在 HTML 完档中。
4、 案例分析
1) 效果如图 1-6、1-7 所示。
图1-6 输入的内容
图1-7 页面中展示输入的内容
7
二、案例实现
根据上面的分析，可以通过简单的 JavaScript 代码来实现这一效果，具体代码如下：
1 <!DOCTYPE html>
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8">
4 <title>输出用户输入的信息</title>
5 </head>
6 <body>
7 <script type="text/javascript">
8 var msg = prompt("请输入您的信息"); // 输入框
9 document.write(msg);
10 </script>
11 </body>
12 </html>
【案例 1-5】验证用户名和密码
一、案例描述
1、 考核知识点
prompt() window 对象的方法 2、 练习目标
掌握 prompt()方法。
3、 需求分析
prompt()是 window 对象的方法,其完整写法是 window.prompt()，本案例用于验证用户名和密码是否正
确。
4、 案例分析
1) 效果如图 1-8 所示。
图1-8 验证用户输入的用户名
8
图1-9 验证用户输入的密码
图1-10 用户名和密码输入正确
2) 具体实现步骤如下：
a) 将输入的用户名与正确的用户名“admin”作比较。
b) 将输入的密码与正确的密码“123456”作比较.
c) 如果用户名和密码输入正确，则提示“登录成功”。
d) 反之输入错误，则提示“用户名或密码输入错误”
二、案例实现
根据上面的分析，可以通过简单的 JavaScript 代码来实现这一效果，具体代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>验证用户名和密码</title>
6 </head>
7 <body>
8 <script>
9 // 输入用户名和密码，如果正确，给出弹出框提示“登录成功”，如果不对，提示“输入错误”
10 var userName = prompt("请输入用户名");
1 var passWord = prompt("请输入密码");
2 if(userName =='admin' && passWord =='123456'){
3 alert('登录成功')
9
4 }
5 else{
6 alert('用户名或密码输入错误')
7 }
8 </script>
9 </body>
10 </html>
【案例 1-6】计算年龄小游戏
一、案例描述
1、 考核知识点
prompt()、if…else语句、onclick() 2、 练习目标
掌握 prompt()用法。
掌握 if…else语句用法
掌握 onclick()用法
3、 需求分析
点击“请输如您的出生年份”，在输入窗口中输入出生年份，点击“确定”按钮，根据你的出生年份，
让 2019 减去出生年份，得到你的年龄。
4、 案例分析
1) 效果如图 1-11、1-12 所示。
图1-11 输入的内容
10
图1-12 页面中展示年龄
二、案例实现
根据上面的分析，可以通过简单的 JavaScript 代码来实现这一效果，具体代码如下：
1 <!DOCTYPE html>
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8">
4 <title>计算年龄</title>
5 </head>
6 <body>
7 <input type="button" onclick="disp_year()" value="请输入您的出生年份" />
8 <script type="text/javascript">
9 function disp_year(){
10 var year=prompt("请输入您的出生年份","")
11 if (year!=null && year!="")
12 {
13 document.write('您今年'+(2019-year)+'岁')
14 }
15 }
16 </script>
17 </body>
18 </html>
【案例 1-7】简单加法器计算
一、案例描述
1、 考核知识点
prompt()、alert()、parseFloat ()、变量 2、 练习目标
掌握 prompt()用法。
11
掌握 alert()用法
掌握变量的用法
3、 需求分析
在弹出的两个输入窗口中分别输入两个数字，把用户输入的数字利用变量存储起来，弹出警告框，并
把两个数相加的计算结果输出来。
4、 案例分析
1) 效果如图 1-13、1-14、1-15 所示。
图1-13 输入第一个数
图1-14 输入第二个数
图1-15 输出的计算结果
12
二、案例实现
根据上面的分析，可以通过简单的 JavaScript 代码来实现这一效果，具体代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>计算年龄</title>
6 </head>
7 <body>
8 <input type="button" onclick="disp_year()" value="请输入您的出生年份" />
9 <script type="text/javascript">
10 function disp_year(){
11 var year=prompt("请输入您的出生年份","")
12 if (year!=null && year!="")
13 {
14 document.write('您今年'+(2019-year)+'岁')
15 }
16 }
17 </script>
18 </body>
19 </html>
