JavaScript程序结构

最新推荐文章于 2021-11-30 20:40:26 发布

CinderellaLi_

最新推荐文章于 2021-11-30 20:40:26 发布

阅读量96

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/CinderellaLi_/article/details/120719073

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

程序结构

一、`if-else`

(1)`if-else`单分支语法

基本语法

 if(条件){
     条件为true时，需要执行的代码
 }

示例：

 <script>
     var _btn = document.getElementById('del')
 
     _btn.onclick = function(){
         var sure = confirm('确定要删除吗？')
         if(sure === true){
             alert('已删除')
         }
     }
 </script>

(2)`if-else`双分支

基本语法

 if(条件){
     条件为true时，需要执行的代码
 }else{
     条件为false时，需要执行的代码
 }

示例：

 <script>
     var a = prompt("请输入你的年龄")
     if(a >= 18){
         alert("欢迎进入")
     }else{
         alert("无权进入")
     }
 </script>

(3)`if-else`多分支

基本语法

 if(条件1){ 
     条件1为true的时候执行的代码 
 } else if(条件2){ 
     条件2为true的时候执行的代码 
 } else if(条件n){
     条件n为true的时候执行的代码 
 } else { 
     所有条件都为false的时候执行的代码
 }

示例：

 <div id="box"></div>
 <script>
     var _box = document.getElementById('box')
     var a = prompt("请输入登陆角色(管理员|会员)")
 
     var myOperation = prompt("请选择您的操作(管理教师|管理学生|管理课程)：")
     if(myOperation === '管理教师'){
         _box.innerHTML = '教师资料管理'
     }else if(myOperation === '管理学生'){
         _box.innerHTML = '学生资料管理'
     }else{
         _box.innerHTML = '没有这个选项，请刷新后重试'
     }
 </script>

练习：

 <body>
     <div id="box">
         <label for="score">分数：</label>
         <input type="text" name="score" id="score">
         <button id="verify">验证</button>
         <p>您的成绩：<span id="show">待定</span></p>
     </div>
     <script>
         //获取标签
         var _score = document.getElementById('score')
         var _verify = document.getElementById('verify')
         var _show = document.getElementById('show')
         
         //点击按钮时
         _verify.onclick = function(){
             //获取分数
             var _myScore = _score.value
             _myScore = parseInt(_myScore)
             //验证分数数据
             if(0 < _myScore && _myScore < 60){
                 _show.innerText = '不合格'
             }else if(_myScore >= 60 && _myScore < 70){
                 _show.innerText = '合格'
             }else if(_myScore >= 70 && _myScore < 85){
                 _show.innerText = '良好'
             }else if(_myScore >= 85 && _myScore <= 100){
                 _show.innerText = '优秀'
             }else{
                 _show.innerText = '无效成绩'
             }
         }
         console.log(_show)
     </script>
 </body>

二、`switch-case`

选择结构，基本语法

 switch(value){
     case V1: 
         当value === V1的时候执行的代码
         break;
     case V2: 
         当value === V2的时候执行的代码 
         break; 
     case Vn: 
         当value === Vn的时候执行的代码 
         break; 
     default: 
         所有条件不匹配的时候执行的代码 
 }

需求：开发了一套在线答题系统，每个问题的答案：A/B/C/D

结论：如果是等值条件匹配，建议选择switch-case选择结构

注意：如果是范围条件，只能使用if-else选择结构

var cho = prompt("请输入你的答案")

switch(cho){
    case 'A':
        alert('错误')
        break
    case'B':
        alert("错误")
        break
    case'C':
        alert("正确")
        break
    case'D':
        alert("错误")
        break
}

三、循环结构和`for循环`

(1) 什么是循环结构

循环结构，满足某个条件的基础上，重复执行某段代码的过程！

JavaScript语法中提供了多种循环结构
for循环结构
while循环结构
do-while循环结构
for..in循环结构

(2)for循环

基本语法

for(起始数据; 判断条件; 自增/自减) { 
    判断条件为true的时候，重复执行的代码
}

示例

<script>
    for(var i = 1;i <= 10;i++){
        document.write('第' + i +'张票</br>')
    }
    for(var j = 1;j <= 10;j++){
        document.write('第' + j +'张票</br>')
        if(j === 3){
            document.write('家中有事，提前下班</br>')
            break
        }
    }

    for(var m = 1;m <= 10;m++){
        document.write('第' + m +'张票</br>')
        if(m === 3 || m === 8){
            document.write('预留座位，暂不售卖</br>')
            continue
        }
    }
</script>

四、`while`和`do-while`

基本语法

// for循环 
for(初始数据; 条件判断; 自增/自减) { 
    条件为true的情况下，重复执行的代码
}
// while循环 
初始数据 
while(条件判断) {
    条件为true的时候执行的代码 
    条件数据自增/自减
}
// do-while循环 
初始数据 
do{ 
    条件为true时执行的代码 
} while(条件判断);

示例：

var _ct = document.getElementById("chapters") 
// 1、for循环输出章节 
for(var i = 1; i <= 3; i++) {
    _ct.innerHTML += "<li><a href='#'>FOR循环-第"+i+"章</a></li>" 
}

// 2、while循环 
var m = 1 
while( m <= 3 ) {
    _ct.innerHTML += "<li><a href='#'>while循环-第"+m+"章</a> </li>"
    m++ 
}

// 3、do-while循环 
var n = 1 
do{
    _ct.innerHTML += "<li><a href='#'>do-while循环-第"+n+"章 </a></li>" 
   n++ 
  }while(n <= 3)

综合练习1：输出符号矩阵(使用for循环实现，练习的时候可以尝试使用while/do- while进行改造)

☆☆☆☆☆☆☆☆☆☆

<body>
    <div id="five"></div>
    <script>
        var _five = document.getElementById('five')

        for(var i = 1;i <=8;i++){  //八行
            for(var j =1;j <= 10;j++){   //10列
                _five.innerHTML += "☆"
            }
            _five.innerHTML += '</br>'
        }
    </script>
</body>

综合练习2：输出符号☆组成的三角形

☆

☆☆

☆☆☆

☆☆☆☆

☆☆☆☆☆

思路：第几行输出了几列，每一行输出的列的数量，和当前行号一致

<body>
    <div id="box"></div>
    <script>
        
        var _box = document.getElementById('box')
        
        for(var row = 1;row <= 5;row++){
            
            for(var col = 1;col <= row;col++){

                _box.innerHTML += '☆'
                
            }
            
            _box.innerHTML += "</br>"
            
        }
    </script>
</body>

综合练习3: 9X9乘法表

<style>
    span{
        display: inline-block;
        min-width:80px;
        color: #000;
        background: rgb(134, 131, 131);
        line-height: 30px;
        text-align: center;
        margin: 1px;
        padding: 5px 10px;
    }
</style>
</head>
<body>
    <div id="box"></div>
    <script>
        var _box = document.getElementById('box')
        for(var row = 1;row <= 9;row++){
            for(var col = 1;col <= row;col++){
                _box.innerHTML += '<span>'+row + '*' + col + "=" + (row*col) + '</span>'
            }_box.innerHTML += '</br>'
        }
    </script>
</body>

CinderellaLi_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript程序结构

程序结构一、if-else(1)if-else单分支语法基本语法if(条件){ 条件为true时，需要执行的代码}示例：<script> var _btn = document.getElementById('del') _btn.onclick = function(){ var sure = confirm('确定要删除吗？') if(sure === true){ ...
复制链接

扫一扫