javascript基础04

1、循环语句

1.While

语句：

while (exp) {
    //statements;
}

var i = 1;

    while(i < 3){
        alert(i);
        i++;
    }

2.do while

do { 需执行的代码 } while (变量<=结束值)

var i = 1;
    do {
        alert(i);
        i++;
    }while(i < 3);

3.for 循环

for (变量=开始值;变量<=结束值;变量=变量+步进值) {
         需执行的代码 
    }

for(var count = 1; count < 11; count++){
        alert(count);
    }

4.break 语句和 continue 语句

break 语句可以立即退出循环;
continue 语句只是退出当前循环;

var n = 0;

    for(var i = 1; i < 10; i++){
        if(i == 4){
            continue;
        }

        n++;
    }

    alert(n);

var n = 0;

    for(var i=1; i < 10; i++){
        if( i > 5){
           break;
        }

        n++;
    }

    alert(n);

5.for in

枚举数组和类数组对象（即json格式的）

枚举出window对象下的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript">
        for(var attr in window){
            console.log(attr+":"+window[attr]);
        }
    </script>
</body>
</html>

2.函数

函数就是完成某个功能的一组语句，函数由关键字 function + 函数名 + 一组参数定义; 函数在定义后可以被重复调用，通常将常用的功能写成一个函数，

利用函数可以使代码的组织结构更多清晰。

基本语法：

function funName (arg0, arg1, … argN){
        //statements
    }

注意：
    1.位于return 语句之后的任何代码都永远不会执行！
    2.在JavaScript中，不一定要指定返回值！
    3. 定义函数的参数时，如果调用函数时没有传进参数，并不会报错，但可以在函数里面判
断一下是否有传进参数，例如可以这样判断:
    if(variable == 'undefined‘ || variable == null){
        variable=‘1’;            //可以给他一个默认值
    }

作业题：

纯javascript写出来的；

九九乘法表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9*9表格</title>
    <script type="text/javascript">
        window.onload=function(){

            var str="<table>";
            for(var i=1;i<10;i++){
                str+="<tr>";
                for(var j=1;j<=i;j++){
                    str+="<td>"+i+"*"+j+"="+i*j+"</td>";
                }
                str+="</tr>";
            }
            str+="</table>";
            document.body.innerHTML=str;
        }
    </script>
    <style>
        table td{
            border:1px solid #000;
        }
        table td:hover{
            background: #00FF00;
            color: #fff;
            cursor: default;
        }
    </style>
</head>
<body>
</body>
</html>

国际象棋的棋盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>国际象棋</title>
</head>
<body>
    <script>
        var offOn=true;
        var num=65;
        var str='<div class="clearfix container">';
        var str01='<ul class="t-b">';
        var str02='<ul class="l-r fl">';
        for(var i=0;i<8;i++){
            str02+=    '<li class="l-r-fl">'+(i+1)+'</li>';
            str01+='<li class="fl t-b-fl">'+String.fromCharCode(num)+'</li>';
            num++;
        }
        str01+='</ul>';
        str02+='</ul>';
        str+=str01;
        str+="<div class='clearfix'>"+str02;
            str+="<table cellspacing='0' cellpadding='0' class='fl'>";
            for(var i=0;i<8;i++){
                str+="<tr>";
                for(var j=0;j<8;j++){
                    if(offOn){
                    offOn=!offOn;
                        str+="<td class='td01'></td>";
                    }else{
                        offOn=!offOn;
                        str+="<td class='td02'></td>";
                    }
                }
                offOn=!offOn;
                str+="</tr>"
            }
            str+="</table>";
            str+=str02+"</div>";
            str+=str01+"</div>";

            document.body.innerHTML=str;
    </script>
    <style>
    ul{
        list-style: none;
        padding:0;
        margin:0;
    }
    .clearfix:after{
        display: block;
        content: " ";
        visibility: hidden;
        clear: both;
    }
    .container{
        background: #FFDAB9;
        border:3px solid #000;
        display: inline-block;
    }
    .t-b{
        padding-left: 32px;
    }
    .t-b:after{
        clear: both;
        content: " ";
        visibility: hidden;
        display: block;
    }
    .fl{
        float: left;    
    }
    .t-b-fl{
        width: 55px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }
    .l-r-fl{
        width: 32px;
        height: 55px;
        line-height: 55px;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }
    table{
            border:2px solid #000;
        }
        table td{
            width: 55px;
            height: 55px;
        }
        .td01{
            background: #D2691E;
        }
        .td02{
            background: #FFDAB9;
        }
    </style>
</body>
</html>