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. 1.认识EJB

    什么是EJB?1. Enterprice JavaBeans(EJB)是一个用于分布式业务应用的标准服务端组件模型. . 采用EJB架构编写的应用是可伸的.事务性的.多用户安全的. . 采用EJB编写 ...

  2. [No00007F]2016-面经[下] 英文简历写作技巧

    一.简历种类 1.中式 中式简历中,常包括政治面貌,性格及身高体重等.如果中英文简历一起递交,建议中文不写政治面貌,因为如果去外企工作,背景中的政治色彩越少越好,起码没有必要让老外知道. 性格是一个主 ...

  3. LoadLibrary加载动态库失败的解决办法

    from:http://blog.sina.com.cn/s/blog_62ad1b8101017qub.html 若DLL不在调用方的同一目录下,可以用LoadLibrary(L"DLL绝 ...

  4. mysql 有两种数据库引擎发音

    mysql 有两种数据库引擎 一种是 MyISAM,一种是 InnoDB MyISAM 发音为 "my-z[ei]m"; InnoDB 发音为 "in-no-db&quo ...

  5. iOS Run_time

    Runtime是想要做好iOS开发,或者说是真正的深刻的掌握OC这门语言所必需理解的东西.最近在学习Runtime,有自己的一些心得,整理如下,一为 查阅方便二为 或许能给他人一些启发,三为 希望得到 ...

  6. JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的eac ...

  7. ubuntu14.04 python3.*连接mysql

    先下载pymysql文件,http://webscripts.softpedia.com/script/Database-Tools/PyMySQL-71606.html 我下载的是:PyMySQL- ...

  8. 【OpenJudge 1793】矩形覆盖

    http://noi.openjudge.cn/ch0405/1793/ 好虐的一道题啊. 看数据范围,一眼状压,然后调了好长时间QwQ 很容易想到覆盖的点数作为状态,我用状态i表示至少覆盖状态i表示 ...

  9. Mac上更新Ruby

    因为准备在项目中使用bootstrap,在安装bootstrap过程中提示需要Ruby的版本在1.9.2以上,而目前使用的Ruby版本是Mac系统自带的1.8.7.所以需要对Ruby进行升级.这里使用 ...

  10. ORB-SLAM（四）追踪

    最近在读ORB-SLAM的代码,虽然代码注释算比较多了,但各种类和变量互相引用,看起来有点痛苦.索性总结了一下Tracking部分的代码结构,希望能抓住主要思路,不掉坑里. 追踪 追踪部分的主要思路是 ...