一、循环结构


(一)循环结构的执行步骤


1、声明循环变量;

2、判断循环条件;

3、执行循环体操作;

4、更新循环变量;

     然后循环执行2-4,直到条件不成立时,跳出循环。

var num=1;//1、声明循环变量
            while (num<=10){//2、判断循环条件
                document.write(num+"<br />");//3、执行循环体操作
                num++;//4、更新循环变量;
            }

     while循环()中的表达式,运算结果可以是各种类型。但是最终都会转为真假, 转换规则同if结构。

① Boolean:true为真,false为假;

② String:   空字符串为假,所有非空字符串为真;

③ Number:   0为假,一切非0数字为真;

④ Null/Undefined/NaN:   全为假;

⑤ Object:   全为真

while循环特点:先判断,再执行;

do-while循环特点:先执行,再判断;即使初始条件不成立,do-while循环也至少执行一次。

(二)for循环


1、for循环有三个表达式:①声明循环变量;②判断循环条件;③更新循环变量

      三个表达式之间,用;分隔;

      for循环三个表达式都可以省略,但是两个;缺一不可

2、for循环的执行特点:先判断,再执行;与while相同

3、for循环三个表达式都可以由多部分组成;第二部分多个判断条件用&& ||链接,第一三

      部分用逗号分隔

/*1-100之间求和
             * (1+100)+(2+99)+...+(50+51)=5050
             */
            for (var a=1,b=100,sum=0;a<=50&&b>=51;a++,b--) {
                sum+=a+b;
                if(a==50) document.write("("+a+"+"+b+")=");
                else document.write("("+a+"+"+b+")+");
            }
            document.write(sum);

(三)循环控制语句


1、break:跳出本层循环,继续执行循环后面的语句。如果循环有多层嵌套,则break

                   只能跳出一层。

2、continue:跳过本次循环剩余的代码,继续执行下一次循环。

① 对于for循环,continue之后执行的语句,是循环变量更新语句i++;

② 对于while、do-while循环,continue之后执行的语句,是循环条件判断;

     因此,使用这两个循环时,必须将continue放到i++之后使用。

    否则,continue将跳过i++导致死循环。

(四)循环嵌套


【循环嵌套的规律】

外层循环控制行数,内层循环控制每行中元素的个数。

[图形题做题思路]

1、确定图形一共有几行,行数即为外层循环的次数;

2、确定每行中,有几种元素组成。有几种元素即表示有几个内层循环;

3、确定每种元素的个数,这个个数即为每个内层循环的次数。

     tips:如果每种元素的个数不固定,则,找出每种元素个数,

    与行号的关系,这个关系表达式,即为内层循环的最大值。

例题:

<script type="text/javascript">
            //斐波那契数列
            var a=1;
            var b=1;
            document.write(a+" "+b+" ");
            var i=1;
            while (i<=18){
                c=a+b;
                document.write(c+" ");
                if(i%5==3) document.write("<br />");
                a=b;
                b=c;
                i++;
            }
            document.write("<br /><br /><br />")
            
            //斐波那契分数序列
            var a=1;
            var b=2;
            document.write(a+"/"+b+"、 ");
            for(var i=1;i<=19;i++){
                c=a+b;
                if(i==19) document.write(b+"/"+c);
                else document.write(b+"/"+c+"、 ")
                a=b;
                b=c;
            }
        </script>

二、JS中的函数


/**

* 文档注释:开头两个*。写在函数上方,在调用函数时,可以看到文档中的描述信息

*/

function aaa() {}

(一)函数的声明及调用


1、函数的声明格式:

function 函数名(参数1,参数2,...){
 //函数体代码;
 return 返回值;
 }

函数的调用:

① 直接调用:函数名(参数1的值,参数2的值,……);

② 事件调用:在HTML标签中,使用事件名="函数名()"

<button onclick="saySth('Hello','yellow')">点击按钮</button>

2、函数的注意事项:

     ① 函数名,必须要符合小驼峰法则!!(首字母小写,之后的每个单词首字母大写)

     ② 函数名后面的()中,可以有参数,也可以没有参数。分别称为有参函数和无参函数

     ③ 声明函数时的参数列表,称为形参列表,形式参数。(变量的名字)

        function saySth(str,color){}

       调用函数时的参数列表,称为实参列表,实际参数。(变量的赋值)

       saySth("Hello","red");

     ④ 函数的形参列表个数,与实参列表个数,没有实际关联关系。

        函数参数的个数,取决于实参列表。

        如果实参列表的个数<形参列表,则未赋值的形参,将为Undefined。

    ⑤ 函数可以有返回值,使用return返回结果;

        调用函数时,可以使用一个变量接收函数的返回结果;如果函数没有返回值,

        接收结果为Undefined。

function func(){
              return "haha";
       }
      var num=func();//num="haha"

⑥ 函数中变量的作用域:

       在函数中,使用var声明的变量,为局部变量,只能在函数内部访问;

       不使用var声明的变量,为全局变量,在函数外面也能访问;

       函数的形参列表,默认为函数的局部变量,只能在函数内部使用。

   ⑦ 函数的声明与函数的调用,没有先后之分。即,可以在声明函数前,调用函数。

func();//声明func之前调用也是可以的

        function func(){}

(二)匿名函数的声明使用


1、声明一个匿名函数,直接赋值给某一个事件;

window.onload = function( ){ }

2、使用匿名函数表达式。将匿名函数,赋值给一个变量。

var func=function  () {}
func();

    注意:使用匿名函数表达式时,函数的调用语句,必须放在函数声明语句之后!!!

             (与普通函数的区别!!!)

3、自执行函数

//可以使用多种运算符开头,但一般用!
!function(形参列表) {}(实参列表);
//使用()将函数及函数后的()包裹
(function( ){ } ) ( );//使用()只包裹函数部分;

三种写法的特点:

   ① 使用!开头,结构清晰,不容易混乱,推荐使用;

  ② 能够表明匿名函数与调用的()为一个整体,官方推荐使用;

  ③ 无法表明函数与之后的()的整体性,不推荐使用

(三)函数的内部属性


1、Arguments对象

① 作用:用于储存调用函数时的所有实参。

      >>>当调用函数,并用实参赋值时,实际上参数列表已经保存到arguments

arguments[n]的形式调用。n从0开始。

② arguments数组的个数,取决于实参列表,与形参无关。

    但是,一旦第N个位置的形参、实参、arguments都存在时,形参将与arguments

    绑定,同步变化。(即在函数中修改形参的值,arguments也会改变;反之,亦

     成立)

arguments.callee 是arguments的重要属性。表示arguments所在函数的

    引用地址;

arguments.callee()调用函数本身。

    在函数内部,调用函数自身的写法,叫做递归。

递归分为两部分:递和归。以递归调用语句为界限,可以将函数分为上下两部分

 

    递:当函数执行上半部分,遇到自身的调用语句时,继续进入内层函数,再执行

上半部分,直到执行完最内层函数。

    归:当最内层函数执行以后,再从最内层函数开始,逐渐执行函数的下半部分。

            当最外层函数执行时,遇到自身的调用语句,会进入内层函数执行,而外层函数

      的后半部分暂不执行。直到最内层函数执行完以后,再逐步向外执行。

javascript 游戏 主循环 js循环结构_javascript 游戏 主循环

(四)JS代码的执行顺序问题


JS代码在运行时,会分为两大部分。检查装载和执行阶段。

检查装载阶段:会先监测代码的语法错误,进行变量、函数的声明。

执行阶段:变量的赋值、函数的调用等,都属于执行阶段。

以下列代码为例:

console.log(num);//Undefined
var num=10;
func1();//函数可以正常执行
function func1 () {}
func2();//函数不可以正常执行,打印func2时显示Undefined
var func2= function () {}

原因:上述代码执行顺序为:

---------检查装载阶段---------

var num;
 function func1 () {}
 var func2;

---------代码执行阶段---------

console.log(num);
 num=10;
 func1();
 func2();
 var func2= function () {}

三、JS中的DOM操作


(一)DOM树节点


DOM节点分为三大类:元素节点、属性节点、文本节点;

文本节点、属性节点属于元素节点的子节点。操作时,均需要先取到元素节点,

再操作子节点;可以使用getElement系列方法,取到元素节点。

(二)查看元素节点


1、getElementById:通过id取到唯一节点。如果ID重名,只能取到第一个。

   getElementsByName():通过name属性;

getElementsByTagName():通过标签名;

通过class名;

 

获取元素节点时,一定要注意:获取节点的语句,必须在DOM渲染完成之后

        执行。可以有两种方式实现:① 将JS代码写在body之后;

                                                      ② 将代码写到window.onload函数之中

>>> 后面三个getElements,取到的是数组格式。不能直接添加各种属性,而应该

       取出数组的每一个单独操作。

getElementsByName("name1")[0].onclick=function

(三)查看/设置属性节点


1、查看属性节点:getAttribute("属性名");

2、设置属性节点:setAttribute("属性名","新属性值");

查看和设置属性节点,必须先取到元素节点,才能使用。

(四)根据层次获取节点


1、 .childNodes:获取元素的所有子节点。包括回车等文本节点。

.children:获取当前元素的所有元素节点(只获取标签)。

 

2、:获取元素的第一个字节点。包括回车等文本节点。

:获取元素的第一个字节点。不包括回车等文本节点。

:获取元素的最后一个字节点。包括回车等文本节点。

:获取元素的最后一个字节点。不包括回车等文本节点。

 

3、 .parentNode:获取当前节点的父节点。

 

4、:获取当前节点的前一个兄弟节点;包括回车等文本节点。

 

5、 .nextSibling:获取当前节点的后一个兄弟节点;包括回车等文本节点。

.nextElementSibling:

 

6、 .getAttributes:获得当前节点的所有属性节点。

(五)创建并新增节点


1、:创建节点。需要配合setAttribute设置各种新

       属性

2、):末尾追加方式插入节点

3、:在目标节点前插入新节点

4、:克隆节点

>>> 传入true:表示克隆当前节点,以及当前节点的所有子节点;

>>> 传入false:表示只克隆当前节点,而不克隆子节点;

(六)删除或替换节点


1、:删除父节点中子节点;

2、 父节点.replaceChild(新节点,老节点):使用新节点,替换到老节点。

四、HTML-DOM


( 一)表格对象


1、rows属性:返回表格中的所有行,是一个数组格式;

2、insertRow(index):在指定位置插入一行,index从0开始;

3、deleteRow(index):删除指定一行,index从0开始

(二)行对象


1、cells属性:返回这一行中的所有单元格,是一个数组格式;

2、rowIndex属性:返回这一行是表格中的第几行,从0开始;

3、insertCell(index):在这一行指定位置,插入一个单元格,index从0开始;

4、deleteRow(index):删除这一行的指定单元格,index从0开始

(三)单元格对象


1、cellIndex属性:返回这个单元格是本行的第几个,从0开始;

2、innerText  innerHTML  align  className

var table=document.getElementById("table");
        function addRow(){
            var index = table.rows.length-1;//取到倒数第二行的索引值
            var newRow=table.insertRow(index);//插入一个新行并返回
            
            var name=prompt("请输入书名");
            var cell0=newRow.insertCell(0);//插入一个新单元格并返回
            cell0.innerText=name;
            
            var money=parseFloat(prompt("请输入价格"));
            var cell1=newRow.insertCell(1);//插入一个新单元格并返回
            cell1.innerText=money.toFixed(1)+"元";//money.toFixed(1)保留一位小数。
            getSum();
        }
        
        function delRow(){
            if (table.rows.length>2) {
                table.deleteRow(table.rows.length-2);
            }else{
                alert("憋删了,没啦!");
            }
            getSum();
        }