第1章补充案例


[toc]

【案例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-1 “<script>标签放在body结束标签之前”效果展示

(2)具体实现步骤如下:

  • 在head中编写JavaScript代码查找id="context"的div元素,控制台打印出图1-1效果。
  • 在body中编写JavaScript代码查找id="context"的div元素,控制台打印出图1-2效果。

二、案例实现

根据上面的分析,通过JavaScript代码来实现1-1效果,具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title> JavaScript标识放置<Head>...</Head>头部之间</title>
 <script type="text/javascript">
 var ODiv = document.getElementById("context");
              console.log(ODiv); // 打印出null
 </script>
 </head>
 <body>
 <div id="context">你好</div> 
 </body>
</html>

保存后,在谷歌浏览器中预览,效果如图1-1所示。

图1-1 “<script>标签放在head中”效果展示

通过JavaScript代码来实现1-2效果,具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title> JavaScript标识放置<Head>...</Head>头部之间</title>
 </head>
 <body>
 <div id="context">你好</div>
 <script type="text/javascript">
 var ODiv = document.getElementById("context");
              console.log(ODiv); // 打印出<div id="context">你好</div>
 </script>
 </body>
</html>

保存后,在谷歌浏览器中预览,效果如图1-1所示。

图1-1 “<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代码,具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>嵌入式</title>
 </head>
 <body>
 <script type="text/javascript">
 alert('嵌入式')
 </script>
 </body>
</html>

根据上面的分析,通过外链式来引入JavaScript代码,具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>外链式</title>
 </head>
 <body>
 <script type="text/javascript" src="test.js"></script>    // test.js为外部.js文件
 </body>
</html>

根据上面的分析,通过行内式来引入JavaScript代码,具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>行内式</title>
 </head>
 <body>
 <div onClick="javascript:window.open('#','_blank')">打开空白页</div>
 </body>
</html>

【案例1-3】常用输出语句

一、案例描述

1.考核知识点

alert()、console.log()、document.write()

2.练习目标

  • 掌握alert()函数的应用
  • 掌握console.log()函数的应用
  • 掌握document.write()函数的应用

3.需求分析

在浏览网页时,经常会看到一些弹出的警示框,用于提醒用户当前的操作是否完成,例如,在电商网站中,当完成付款时,会弹出支付情况的警示框。

console.log()用于在控制台输出结果,可以帮助开发人员在项目开发时调试内容。

document.write()用于在HTML文档输出内容。

4.案例分析

(1)alert()效果如图所示。

“登录成功!”效果展示

(2)console.log()效果如图所示

“控制台输出”效果展示

(3)document.write()效果如图所示

“HTML文档中输出”效果展示

二、案例实现 

根据上面的分析,实现这3种方式,具体代码如下::

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>常用输出语句</title>
 </head>
 <body>
 <script type="text/javascript">
 // alert() 弹出警告框
 alert('登录成功!'); 
 // console.log() 控制台输出
 console.log('控制台输出')
 // 在HTML文档中输出
 document.write('在HTML文档中输出')
 </script>
 </body>
</html>

【案例1-4】比较两个数字的大小

一、案例描述

1.考核知识点

比较运算符

2.练习目标

  • 掌握比较运算符的用法。
  • 了解if else条件语句的使用。

3.需求分析

运用JavaScript中的运算符可以实现很多有趣的效果,本案例将带领大家使用比较运算符来判断两个数值的大小,并在控制台打印出结果。

4.案例分析

效果如图所示。

效果展示图

(2)具体实现步骤如下:

  1. 定义A,B两个数;
  2. 运用if条件语句,判断是两数之间是大于、小于还是等于的关系;
  3. 通过consloe.log()函数输出比较的结果。

二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>比较两个数字的大小</title>
 </head>
 <body>
 <script type="text/javascript">
 var A = 15;
 var B = 14;
 if(A < B){
 console.log(A + '小于' +B)
 }
 else if(A == B){
 console.log(A + '等于' +B)
 }
 else{
 console.log(A + '大于' +B)
 }
 </script>
 </body>
</html>

运行代码,在浏览器中按快捷键 “F12”,在“Console面板”即可得到图1-6所示的效果。

【案例1-5】求数的阶乘

一、案例描述

1.考核知识点

for()循环的简单使用

2.练习目标

  • 掌握for()循环的简单用法
  • 给定一个数,能运用for循环求出阶乘

3.需求分析

运用JavaScript中的for循环可以实现简单操作,本案例将带领大家使用for循环来输出4的阶乘,并在控制台打印出结果。

4.案例分析

效果如图所示。

4的阶乘结果是24

具体实现步骤如下:

  1. 定义JC初始值为1。
  2. 定义i从1开始,当i > 5时,条件不符合i<=4;所以不执行i++操作,跳出循环。

二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>求数的阶乘</title>
 </head>
 <body>
 <script type="text/javascript">
 // 求4的阶乘
 var JC = 1;
 for(var i = 1 ; i <= 4 ; i ++){
 JC *=  i;
 // console.log(i)
 }
 // JC:1*2*3*4 == 24
 console.log(JC);
 </script>
 </body>
</html>

【案例1-6】函数的定义与调用

一、案例描述

1.考核知识点

函数的定义与调用

2.练习目标

  • 掌握函数的定义。
  • 掌握函数的调用。

3.需求分析

在调用函数的时候,有些函数支持传入一个或多个参数,多个参数之间用逗号隔开。本案例将用函数调用的方式实现1~100之间的数相加求和。

4.案例分析

效果如图1-8所示。

计算1~100个数的相加和

具体实现步骤如下:

  1. 定义getSum ()函数,实现1~100数的求和计算功能。
  2. 把结果用document.write()方式输出在HTML文档中
  3. 调用getSum ()函数。

二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
   <title>计算1到100个数相加和</title>
    <script>
      /* 
       1:函数的定义
       function funName (参数1, 参数2, 参数3....) {
           //函数体
       }
       2:函数调用
       funName(1,2,3);
       */
       //1 定义一个getSum()函数
       function getSum () {
           var sum = 0;
           for (var i = 1; i <= 100; i++) {
               sum += i;
           }
           document.write('1到100个数相加和是:'+sum);
       }
       //2 调用getSum()函数
       getSum();
    </script>
</body>
</html>

【案例1-7】自定义函数与调用

一、案例描述

考核知识点

自定义函数与调用

练习目标

  • 掌握自定义函数与调用。
  • 了解实参、形参的概念。

需求分析

在JavaScript中,除了直接调用其内置的函数,用户还可以自己定义一个函数,用于封装代码,可以减少代码量,提高效率。下面我们利用自定义函数将实现n-m之间所有数的和。

案例分析

效果如图8-16所示。

“n-m之间的数相加和”效果展示

具体实现步骤如下:

  1. 自定义getSum(n,m)。
  2. for循环进行累加计算
  3. 调用getSum(5, 10)
  4. 调用getSum(100, 1000)

二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
     <script>
      /* 定义函数
       function funName (a,b) {
          函数体
        }
        在调用函数的时候,传入的参数叫做实参
        funName(5, 6);
      */
        // 求n-m之间所有数的和
        // n,m  形式参数(形参)
        function getSum(n, m) {
            var sum = 0;
            for (var i = n; i <= m; i++) {
                sum += i;
            }
            console.log(n+'-'+m+'之间的数相加为:'+sum);
        }
        getSum(5, 10); // n=5,m=10 sum=0+5+6+7+8+9+10==45
        getSum(100,1000);// n=100,m=1000 sum=0+100+101+102+...+1000=495550
      </script>
</body>
</html>

【案例1-8】改变网页皮肤

一、案例描述

  1. 考核知识点

onclick()事件

  • 练习目标
  • 掌握onclick()点击事件。
  • 了解document对象。
  • 需求分析

实现单击网页中的按钮改变网页的皮肤颜色。

  • 案例分析
  • 打开页面时,效果如图1-10所示。

  • 改变背景色之前

当点击“设为蓝色”按钮后,查看网页的皮肤变化,效果如图1-11所示。

  • 改变蓝色之后
  • 具体实现步骤如下:
  • 设置4个button按钮,并绑定点击事件onclick="color('参数')"。
  • 编写js代码,定义color()方法。

、二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变网页皮肤</title>
</head>
<body>
  <button value="设为红色"  onclick="color('red')">设为红色</button>
  <button value="设为黄色"  onclick="color('yellow')">设为黄色</button>
  <button value="设为蓝色"  onclick="color('blue')">设为蓝色</button>
  <button value="设为绿色"  onclick="color('green')">设为绿色</button>
  
  <script type="text/javascript">
    function color(e){
      document.body.style.backgroundColor = e
    }
  </script>
</body>
</html>

【案例1-9】验证用户名和密码

一、案例描述

  1. 考核知识点

prompt() window对象的方法

  • 练习目标
  • 掌握prompt()方法。
  • 需求分析

prompt()是window对象的方法,其完整写法是window.prompt(),本案例用于验证用户名和密码是否正确。

  • 案例分析
  • 效果如图1-12所示。

  • 验证用户输入的用户名

  • 验证用户输入的密码

  • 用户名和密码输入正确

  • 具体实现步骤如下:
  • 将输入的用户名与正确的用户名“admin”作比较。
  • 将输入的密码与正确的密码“123456”作比较.
  • 如果用户名和密码输入正确,则提示“登录成功”。
  • 反之输入错误,则提示“用户名或密码输入错误”

二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>验证用户名和密码</title>
</head>
<body>
 <script>
 // 输入用户名和密码,如果正确,给出弹出框提示“登录成功”,如果不对,提示“输入错误”
 var userName = prompt("请输入用户名");
 var passWord = prompt("请输入密码");
 if(userName =='admin' && passWord =='123456'){
 alert('登录成功')
 }
 else{
 alert('用户名或密码输入错误')
 }
 </script>
</body>
</html>

【案例1-10】输出用户输入的信息

一、案例描述

  1. 考核知识点

prompt()、document.write()

  • 练习目标
  • 掌握prompt()用法。
  • 掌握document.write()用法
  • 需求分析

在输入窗口中输入内容,点击“确定”按钮,把输入的内容展示在HTML完档中。

  • 案例分析
  • 效果如图1-15、1-16所示。

  • 输入的内容

  • 页面中展示输入的内容

二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>输出用户输入的信息</title>
</head>
<body>
 <script type="text/javascript">
 var msg = prompt("请输入您的信息"); // 输入框
 document.write(msg);
 </script> 
</body>
</html>

【案例1-11】计算年龄小游戏

一、案例描述

  1. 考核知识点

prompt()、if…else语句、onclick()

  • 练习目标
  • 掌握prompt()用法。
  • 掌握if…else语句用法
  • 掌握onclick()用法
  • 需求分析

点击“请输如您的出生年份”,在输入窗口中输入出生年份,点击“确定”按钮,根据你的出生年份,让2019减去出生年份,得到你的年龄。

  • 案例分析
  • 效果如图1-17、1-18所示。

  • 输入的内容

  • 页面中展示年龄

二、案例实现

根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计算年龄</title>
</head>
<body>
 <input type="button" onclick="disp_year()" value="请输入您的出生年份" />
 <script type="text/javascript">
 function disp_year(){
    var year=prompt("请输入您的出生年份","")
    if (year!=null && year!="")
    {
 document.write('您今年'+(2019-year)+'岁')
     }
   }
 </script>
</body>
</html>

标签: none

添加新评论