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. 错误提示：LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt 的解决方法

    最近在win7 系统下,打算利用 cmake 生成项目文件,然后用vs2010进行编译.但是在cmake的时候出现错误弹窗:

  2. [技术分享] centos如何挂载Windows共享文件

    http://www.iyunv.com/thread-294209-1-1.html 最为linux的初学者,自我感觉都会使用Windows中的文件.在Windows与linux之间互传文件是一个问 ...

  3. 《如何在大学里脱颖而出(How to Win at College)》读书笔记

    <如何在大学里脱颖而出(How to Win at College)>读书笔记 图书简介 中文版: 英文版: 作者卡尔·纽波特(Cal Newport)于 2004 年6月以优等生荣誉学会 ...

  4. 2016-2017-2 《Java程序设计》预备作业2总结

    2016-2017-2 <Java程序设计>预备作业2总结 古希腊学者普罗塔戈说过:「头脑不是一个要被填满的容器,而是一束需要被点燃的火把.」 在对计算机系的学生情况的调查中,我说: 最近 ...

  5. LeetCode-9-Palindrome Number

    Determine whether an integer is a palindrome. Do this without extra space. 判断一个整数是否是回文数. 思路:求出数字abcd ...

  6. Learning to rank 特征抽取

    http://blog.csdn.net/puqutogether/article/details/42124491 http://www.microsoft.com/en-us/research/p ...

  7. sql特殊语句

    1.联表查询 select * from zongyi zongyiitem where zongyi.id=zongyiitem.id 2.联表删除 delete from zongyi ,zong ...

  8. Tornado 结合memcached缓存页面

    原因 Blog是一个更新并不很频繁的一套系统,但是每次刷新页面都要更新数据库反而很浪费资源,添加静态页面生成是一个解决办法,同时缓存是一个更好的主意,可以结合Memcached添加少量的代码进行缓存, ...

  9. Asp.Net MVC<三> : ASP.NET MVC 基本原理及项目创建

    MVC之前的那点事儿系列 解读ASP.NET 5 & MVC6系列 MVC模拟(摘自ASP.NET MVC5框架揭秘) Asp.net中,通过HttpModule的形式定义拦截器,也就是路由表 ...

  10. Linux操作系统中，*.zip、*.tar、*.tar.gz、*.tar.bz2、*.tar.xz、*.jar、*.7z等格式的压缩与解压

    zip格式 压缩: zip -r [目标文件名].zip [原文件/目录名] 解压: unzip [原文件名].zip 注:-r参数代表递归 tar格式(该格式仅仅打包,不压缩) 打包:tar -cv ...