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>

javascript基础04的更多相关文章

  1. javaScript基础-04 对象

    一.对象的基本概念 对象是JS的基本数据类型,对象是一种复合值,它将很多值(原始值或者对象)聚合在一起,可通过名字访问这些值,对象也可看做是属性的无序集合,每个属性都是一个名/值对.对象不仅仅是字符串 ...

  2. JavaScript基础04——数组的创建及方法

    数组的概念及定义 数组的概念:         一组数据,数据的组和         哪些数据的组和,只要是数据(所有数据),就可以放在数组中 数组的意义:         可以同时操作多个数据 数组 ...

  3. JavaScript基础入门04

    目录 JavaScript 基础入门04 JavaScript 对象 介绍 关于键名 对象的引用 语句和表达式需要注意的地方 对象属性常见的操作 with语句 JSON 特点 语法规则 JSON合法示 ...

  4. JavaScript基础第04天笔记

    JavaScript基础第04天笔记 1 - 数组 1.1 数组的概念 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式. 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以 ...

  5. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  6. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  7. javascript基础部分

    javascript基础部分 1  数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...

  8. javaScript基础之闭包

    不管是Jquery还是EXTJS,现代的js框架中大量应用了js的一些特性,比如:匿名函数,闭包等等,导致源代码非常难以阅读. 不过要想真正的使用好前台的UI技术,还是需要去深入的理解这些概念.   ...

  9. 第三篇：web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...

随机推荐

  1. NYOJ 461

    Fibonacci数列(四) 描述  数学神童小明终于把0到100000000的Fibonacci数列(f[0]=0,f[1]=1;f[i] = f[i-1]+f[i-2](i>=2))的值全部 ...

  2. mybatis缓存

    mybatis缓存http://www.cnblogs.com/QQParadise/articles/5109633.htmlhttp://www.mamicode.com/info-detail- ...

  3. call和apply求最大和最小值

    ,取最大值 var arr = [1,3,7,22,677,-1,2,70]; Math.max.apply(Math, arr);//677 Math.max.call(Math, 1,3,7,22 ...

  4. JS组件系列——封装自己的JS组件，你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  5. Dump中查看DataTime时间方法

    例如: 步骤一:根据DumpVC命令获取时间对象信息.需要MT 和 Value参数. 步骤二:根据得到上上面值,执行:? & 0x3FFFFFFFFFFFFFFF.注意:0n 签名是零,不是英 ...

  6. MODI与VB6

    作者:马健邮箱:stronghorse_mj@hotmail.com主页:http://www.comicer.com/stronghorse发布:2016.12.16 在我写的<用MODI O ...

  7. DayPilot 7.9.3373 去掉DEMO

    更新升级倒是蛮快的,多了Gantt图,此处下载先: http://files.cnblogs.com/files/pccai/DayPilot_2.0_4.0_7.9.3373.rar

  8. SharePoint远程发布Solution

    1.在本地修改好代码,选择publish,将.wsp文件保存到本地: 2.将wsp文件上传到目标网站,停止原解决方案并删除,上传新解决方法并且激活: 停止原来的解决方案 上传解决方案 3.激活Solu ...

  9. ajax 多个表单值问题，表单序列化加其它表单值

    $.ajax({ type: "post", url: "{:u('cart/totalByCard')}?t="+Math.random(9999), dat ...

  10. 黄聪：phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...