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. thinkphp

    U方法: 模板导入后,先在浏览器执行index.php文件,当出现下图时,框架中的内容才可以出现. 增加admin后台文件夹: 连接数据库:可以使用pdo的方式连接

  2. WPF绘制简单常用的Path

    写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细 ...

  3. Ubuntu 16.04安装QQ国际版图文详细教程

            因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

  4. 前端ps常用的小技巧

    一些很简单的例子,知道的就当看乐子. 1.T 是文字的  可以从矢量图中查看文字的大小 字体 颜色,具体就是T  选择一段文字,点确定,点击属性栏最后一个可以看详细信息.又字体,行高,颜色.如果要选取 ...

  5. MyBatis的foreach标签与SUM函数同时使用

    最近在项目中遇到一个,需要根据传入的存有id的list,计算值,再起别名 <if test="channelList != null and channelList.size()> ...

  6. jQuery插件 -- Cookie插件jquery.cookie.js（转）

    Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...

  7. python基础回顾1

    定义 tuple(元组), list (表) #!/usr/bin/env python # encoding: utf-8 a = 10 #定义一直变量,无需声明 s1 = (2,1.3,'love ...

  8. 精通Web Analytics 2.0 （5） 第三章：点击流分析的奇妙世界：指标

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第三章:点击流分析的奇妙世界:指标 新的Web Analytics 2.0心态:搞定它.新的闪亮系列工具:是的.准备好了吗?当然 ...

  9. iOS 分析一个支持GIF的UIImage扩展：SwiftGIF

    Github:https://github.com/bahlo/SwiftGif 这个extension代码不多,主要通过Apple的ImageIO框架进行解析GIF. 整个扩展最核心还是下面的函数, ...

  10. Problems about trees

    Problems (1) 给一棵带边权的树,求遍历这棵树(每个节点至少经过一次)再回到起点的最短路程. 答案是显然的:边权之和的两倍. (2)给一棵带边权的树,求遍历这棵树(每个节点至少经过一次)的最 ...