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. java多线程系类：JUC线程池：03之线程池原理（二）（转）

    概要 在前面一章"Java多线程系列--"JUC线程池"02之 线程池原理(一)"中介绍了线程池的数据结构,本章会通过分析线程池的源码,对线程池进行说明.内容包 ...

  2. 上海闪酷成为京东商城第一批独立软件开发商(ISV)

    闪酷信息技术(上海)有限公司一直致力于为品牌企业提供电子商务软件及其服务,为其拓展电商渠道保驾护航.上海闪酷依据多年的行业经验和技术积累,与中国 最大的B2C商城达成战略合作,为其2万多家品牌供应商提 ...

  3. rpc框架之 thrift连接池实现

    接前一篇rpc框架之HA/负载均衡构架设计 继续,写了一个简单的thrift 连接池: 先做点准备工作: package yjmyzz; public class ServerInfo { publi ...

  4. 利用缓存实现APP端与服务器接口交互的Session控制

    与传统B/S模式的Web系统不同,移动端APP与服务器之间的接口交互一般是C/S模式,这种情况下如果涉及到用户登录的话,就不能像Web系统那样依赖于Web容器来管理Session了,因为APP每发一次 ...

  5. orcle form 传数据乱码

    在jsp顶部加入<%@ page contentType="text/html; charset=utf-8" language="java" impor ...

  6. 使用MEF实现通用参数设置

    通用后台管理系统必备功能模块包含日志管理,权限管理,数据字典,参数配置等功能.参数设置主要用于设置系统运行所需的一些基础性配置项,比如redis缓存,mq消息队列,系统版本等信息.好的参数设置需要达到 ...

  7. Asp.Net MVC3 简单入门详解过滤器Filter(转)

    前言 在开发大项目的时候总会有相关的AOP面向切面编程的组件,而MVC(特指:Asp.Net MVC,以下皆同)项目中不想让MVC开发人员去关心和写类似身份验证,日志,异常,行为截取等这部分重复的代码 ...

  8. Android LitePal 神一般的数据库框架 超级好用

    参考: Android数据库高手秘籍(一)--SQLite命令 Android数据库高手秘籍(二)--创建表和LitePal的基本用法 Android数据库高手秘籍(三)--使用LitePal升级表 ...

  9. 教你一招：Win10切换输入法与Win7一样（Ctrl + 空格）

    对于win10的朋友,大部分人对输入法都不习惯,如果你把英语输入法删除了,在中文输入法里没有美式键盘,让ctrl+空格与ctrl+Shift都能在搜狗输入法和美式键盘切换.下面小编就教你怎么让Win1 ...

  10. String、StringBuilder 与 StringBuffer

    1. 在执行速度方面的比较:StringBuilder > StringBuffer 2. StringBuffer与StringBuilder,他们是字符串变量,是可改变的对象,每当我们用它们 ...