HTML+CSS+JS-第11章 JavaScript条件和循环结构

其他 2019-06-25 09:10:46 阅读次数: 0

HTML+CSS+JS-第10章 JavaScript基础语法

 

第一阶段（A）（前端） 20天 120学时

第11章 JavaScript条件和循环结构（12）

[学习课时] 本章共需要学习  12  课时

[目的要求] 

  1. 掌握JavaScript条件结构语句的使用
  2. 掌握JavaScript获取和修改HTML元素的简单方法
  3. 掌握JavaScript常用事件的用法
  4. 掌握JavaScript循环结构语句的使用

[教学内容]

JavaScript条件语句

在 JavaScript 中，我们可使用以下条件语句：

 

  • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

 

  1. if 语句

只有当指定条件为 true 时，该语句才会执行代码。

 

语法：

if (condition) {

当条件为 true 时执行的代码
}

实例：demo01

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <script type="text/javascript">

        var age = 10;

        if (age > 3) {

            //下面这句话会弹出警告框，显示内容“我不是3岁小孩”

            alert('我不是3岁小孩');

        }

    </script>

 

    <body>

 

    </body>

 

</html>

效果图

  1. if...else 语句

语法

if (condition) {

当条件为 true 时执行的代码
}

else{

当条件不为 true 时执行的代码
}

实例：demo02

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <script type="text/javascript">

        var age = 1;

        if (age > 3) {

            //下面这句话会弹出警告框，显示内容“我不是3岁小孩”

            alert('我不是3岁小孩');

        }else{

            //下面这句话会弹出警告框，显示内容“我是3岁小孩”

            alert('我是'+age+'岁小孩');

        }

    </script>

 

    <body>

 

    </body>

 

</html>

效果图

  1. if...else if...else 语句

语法

if (condition1) {
    当条件 1 为 true 时执行的代码
}
else if (condition2) {
    当条件 2 为 true 时执行的代码
}
else{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

实例：demo03

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <script type="text/javascript">

        var mark = 90;

        if (mark < 60) {

            //下面这句话会弹出警告框，显示内容“差”

            alert('差');

        }else if(mark >= 60 && mark < 70){

            //下面这句话会弹出警告框，显示内容“及格”

            alert('及格');

        }else if(mark >= 70 && mark < 80){

            //下面这句话会弹出警告框，显示内容“良好”

            alert('良好');

        }else if(mark >= 80 && mark < 90){

            //下面这句话会弹出警告框，显示内容“优秀”

            alert('优秀');

        }else{

            //下面这句话会弹出警告框，显示内容“完美”

            alert('完美');

        }

    </script>

 

    <body>

 

    </body>

 

</html>

效果图

  1. JavaScript switch 语句

使用 switch 语句来选择要执行的多个代码块之一。

语法：

Var n=1;

switch(n) {

case 1: //如果n=1，则执行这里的代码

        alert(‘n=1’); //弹窗提示

break; //执行到这里就停止，不再执行下面的代码

case 2: //如果n=2，则执行这里的代码

alert(‘n=2’); //弹窗提示

break; //执行到这里就停止，不再执行下面的代码

default: //如果n不等于1也不等于2，则执行这里的代码

}

实例：demo04

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

 

    <body>

    </body>

    <script type="text/javascript">

        var d = 0;

        switch(d) {

            case 0:

                alert("今天是星期日");

                break;

            case 1:

                alert("今天是星期一");

                break;

            case 2:

                alert("今天是星期二");

                break;

            case 3:

                alert("今天是星期三");

                break;

            case 4:

                alert("今天是星期四");

                break;

            case 5:

                alert("今天是星期五");

                break;

            case 6:

                alert("今天是星期六");

                break;

        }

    </script>

 

</html>

效果图

JavaScript获取和设置HTML元素

通过ID属性获取HTML元素，只能获取第一个

document.getElementById('name')

 

通过CLASS属性获取HTML元素，可以获取多个，用item(n)来获取第n个

document.getElementsByClassName('text').item(0)

 

通过标签名获取HTML元素，可以获取多个，用item(n)来获取第n个

document.getElementsByTagName('button').item(0)

 

使用“.value”来设置或者获取HTML输入框元素的值

Var val = document.getElementById('name').value;

document.getElementById('name').value = "JavaScript修改的内容";

 

使用“.innerHTML”来设置或者获取HTML双边元素内部的所有子元素和文字

Var val = document.getElementsByClassName('text').item(0).innerHTML;

document.getElementsByClassName('text').item(0).innerHTML = "<h1>你好</h1>";

 

使用“.innerText”来设置或者获取HTML双边元素内部的所有文字

Var val = document.getElementsByTagName('button').item(0).innerText;

document.getElementsByTagName('button').item(0).innerText = '搜索';

 

实例;demo05

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div class="text">

            HTML的文字内容

        </div>

        <input type="text" id="name" />

        <button>按钮</button>

    </body>

    <script type="text/javascript">

        //通过ID属性获取HTML元素

        //通过value设置和获取HTML输入框的值

        document.getElementById('name').value = "JavaScript修改的内容";

        //通过CLASS属性获取HTML元素

        //通过innerHTML设置和获取HTML普通标签的内部元素和文字

        document.getElementsByClassName('text').item(0).innerHTML = "<h1>你好</h1>";

        //通过标签名属性获取HTML元素

        //通过innerText设置和获取HTML普通标签的文字

        document.getElementsByTagName('button').item(0).innerText = '搜索';  </script>

</html>

效果图

JavaScript常用事件

文档加载事件

window.onload = function(){ /*里面谢代码*/ }

 

元素点击事件

document.getElementById('name').onclick = function(){ /*里面写代码*/ }

 

元素获取焦点时的事件

document.getElementById('name').onfocus = function(){ /*里面写代码*/ }

 

元素失去焦点时的事件

document.getElementById('name').onblur = function(){ /*里面写代码*/ }

 

案例：登录

实例：demo06  +  HTML

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/style.css"/>

        <script src="js/js.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

        <div id="content">

            <form>

                <div id="title">用户登录</div>

                <input type="text" id="name" placeholder="请输入用户名" />

                <input type="text" id="pswd" placeholder="请输入密码" />

                <button type="button" id="buttom">登录</button>

            </form>

        </div>

    </body>

 

</html>

实例：demo06  +  CSS

body {

    background: -webkit-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);

    background: -moz-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);

    background: -o-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);

    background: linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);

}

 

#content {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    width: 400px;

    height: 200px;

    border-radius: 10px;

    padding: 50px;

    background-color: rgba(0, 0, 0, 0.4);

}

 

#content:hover {

    background-color: rgba(0, 0, 0, 0.7);

}

 

form {

    height: 100%;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

}

 

#title {

    width: 360px;

    font-size: 22px;

    text-align: center;

    margin-bottom: 20px;

    color: white;

    font-weight: bold;

}

 

input {

    position: relative;

    display: block;

    width: 360px;

    height: 40px;

    margin: auto;

    border-radius: 5px;

    font-size: 18px;

    outline: 0;

    border: 0;

}

 

input:not([type=button]) {

    width: 300px;

    margin-bottom: 20px;

    padding: 0 30px;

}

input[type=text]:focus{

    font-size: 20px;

}

button[type=button]{

    width: 360px;

    height: 40px;

    margin: auto;

    border-radius: 5px;

    font-size: 18px;

    outline: 0;

    border: 0;

    background-color: rgba(0,200,200,0.6);

    color: white;

}

button[type=button]:hover{

    background-color: rgba(0,200,200,0.8);

    color: white;

}

button[type=button]:active{

    background-color: rgba(20,200,200,0.4);

    color: white;

}

实例：demo06  +  JS

function nameBlur(){

    //用户名输入框失去焦点时的事件

    document.getElementById('name').onblur = function(){

        var name = document.getElementById('name').value;

        if (!name) {

            document.getElementById('name').style.backgroundColor = 'rgba(255,100,100,0.8)';

        }

    }

}

function nameFocus(){

    //用户名输入框获得焦点时的事件

    document.getElementById('name').onfocus = function(){

        this.style.backgroundColor = 'white';

    }

}

 

function pswdBlur(){

    //密码输入框失去焦点时的事件

    document.getElementById('pswd').onblur = function(){

        var pswd = document.getElementById('pswd').value;

        if (!pswd) {

            document.getElementById('pswd').style.backgroundColor = 'rgba(255,100,100,0.8)';

        }

    }

}

function pswdFocus(){

    //密码输入框获得焦点时的事件

    document.getElementById('pswd').onfocus = function(){

        this.style.backgroundColor = 'white';

    }

}

效果图

JavaScript循环语句

  1. JavaScript while 循环

先判断条件，只要指定条件为 true，循环就可以一直执行代码块。

语法：

while (条件) {

需要执行的代码
}

实例：demo07

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="test"></div>

    </body>

    <script type="text/javascript">

        var i = 1;

        while (i <= 6){

            document.getElementById('test').innerHTML+='<h'+i+'>'+'第'+i+'级标题';

            i++;

        }

    </script>

</html>

效果图

  1. JavaScript do/while 循环

do/while 循环是 while 循环的变体。

先执行一次代码，然后判断条件，如果条件为真的话，就会重复这个循环。；；

 

语法：

do{

需要执行的代码
}while (条件);

实例：demo08

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="test"></div>

    </body>

    <script type="text/javascript">

        var i = 1;

        do{

            document.getElementById('test').innerHTML+='<h'+i+'>'+'第'+i+'级标题';

            i++;

        }while (i >= 6)

    </script>

</html>

效果图

JavaScript for 循环

常用于已知循环次数的情况。

语法：

for (语句 1; 语句 2; 语句 3) {
    被执行的代码块
}

语句 1:在循环开始执行之前做的操作

语句 2:（循环的条件）判断循环条件是否满足，true：执行循环；flase：不执行

语句 3:每次循环结束后，下雨次循环开始前，执行的操作

实例：demo09

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

 

    <body>

        <div id="test"></div>

    </body>

    <script type="text/javascript">

        for(var i = 0; i < 5; i++) {

            document.write("第" + i + "循环<br>");

        }

    </script>

 

</html>

效果图

JavaScript Break 和 Continue 语句

break 语句用于跳出整个循环。

continue 用于跳过循环中的某一次。

实例：demo10

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

 

    <body>

        <div id="test"></div>

    </body>

    <script type="text/javascript">

        for(i = 0; i < 10; i++) {

            if(i == 3) {

                break;

            }

            document.write("第：" + i + "次循环<br>");

        }

    </script>

 

</html>

效果图

实例：demo11

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

 

    <body>

        <div id="test"></div>

    </body>

    <script type="text/javascript">

        for(i = 0; i <= 10; i++) {

            if(i == 3) continue;

            document.write("第" + i + "循环<br>");

        }

    </script>

 

</html>

效果图

[作业实验]

  1. HTML中有两个数字输入框和一个按钮，点击按钮的时候求最大值

要求：

使用方法function完成如下功能：

  1. 获取两个输入框的数字值，并保存到变量a和b中
  2. 判断a和b的大小
  3. 使用alert弹窗提示最大值

  1. 使用双层循环实现9*9乘法表，分别使用while和for循环

  1. 实现如下功能：

  1. 实现如下功能：

  1. 求出所有“水仙花数”，所谓“水仙花数”是指一个3位数，其各位数立方和等于该数本身。如：153(x) = 1*1*1 + 5*5*5 + 3*3*3

思路： 1，水仙花数是一个三位数，所以设置三个变量，分别保存百位a、十位b、个位c数字

               2，这三个变量的立方相加等于这三个变量自由组合的数字。

  1. 求两个数的公约数

  1. 输入任意一个数字，求其最高位的数字

  1. 使用循环输入如下日历。

要求：一个月30天，当前日期是17号

 

HTML+CSS+JS-第12章 JavaScript数组

  1. HTML+CSS+JS精细化教程（新）适合学习和巩固基础（必掌握技能）
  2. JAVA语言（面向对象都不是事，重点是多线程、反射、网络编程、界面编程、设计模式、工程架构、文件系统）
  3. JAVA WEB（MySQL、JDBC、JSP、JSTL、EL、Servlet、Spring、Struts、MyBatis、SpringData等）
  4. Spring Boot2（新版2.X、底层原理深入剖析、更有点餐系统、大型博客系统、商铺平台等完整项目开始视频和源码）
  5. Python（小白基础语法、RESTfull API开发、爬虫、Django、Linux系统、制作小工具）
  6. Photoshop（CS5、CS6、CC2018视频教程、海量素材、酷炫特效制作、经典案例几百集）
  7. Unity2D/3D（手游开发、脚本开发、3D人物模型设计、3D动画、3D塔防游戏、第一人称游戏案例视频跟着做）
  8. Android原生开发（大型OA系统、游戏开发、物联网开发、3D模型显示、单机游戏开发）
  9. IOS原生开发（各种收费应用、游戏开发、工具开发、物联网开发）
  10. PHP（HTML+CSS+JS+PHP+MySQL+MVC+ThinkPHP+Linux+Nginx+Redis）

猜你喜欢

转载自blog.csdn.net/starzhangkiss/article/details/83000735
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022