zoukankan      html  css  js  c++  java
  • JS中循环结构&函数

    一、循环结构
    )循环结构的执行步骤
    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
                       只能跳出一层。
    2continue跳过本次循环剩余的代码,继续执行下一次循环。
    ① 对于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(形参列表) {}(实参列表);
        ② (function( ){ }( ));//使用()将函数及函数后的()包裹
        ③ (function( ){ } ) ( );//使用()只包裹函数部分;
    三种写法的特点:
       ① 使用!开头,结构清晰,不容易混乱,推荐使用;
      ② 能够表明匿名函数与调用的()为一个整体,官方推荐使用;
      ③ 无法表明函数与之后的()的整体性,不推荐使用
     )函数的内部属性
    1、Arguments对象
    ① 作用:用于储存调用函数时的所有实参。
          >>>当调用函数,并用实参赋值时,实际上参数列表已经保存到arguments
               组中,可以在函数中,使用arguments[n]的形式调用。n从0开始。
    ② arguments数组的个数,取决于实参列表,与形参无关。
        但是,一旦第N个位置的形参、实参、arguments都存在时,形参将与arguments
        绑定,同步变化。(即在函数中修改形参的值,arguments也会改变;反之,亦
         成立)
    arguments.callee 是arguments的重要属性。表示arguments所在函数的
        引用地址;
        在函数里面,可以使用arguments.callee()调用函数本身。
        在函数内部,调用函数自身的写法,叫做递归。
       递归分为两部分:递和归。以递归调用语句为界限,可以将函数分为上下两部分
     
        递:当函数执行上半部分,遇到自身的调用语句时,继续进入内层函数,再执行
    上半部分,直到执行完最内层函数。
        归:当最内层函数执行以后,再从最内层函数开始,逐渐执行函数的下半部分。
                当最外层函数执行时,遇到自身的调用语句,会进入内层函数执行,而外层函数
          的后半部分暂不执行。直到最内层函数执行完以后,再逐步向外执行。
    (四)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():通过标签名;
        getElementsByTagName(): 通过class名;
     
    >>> 获取元素节点时,一定要注意:获取节点的语句,必须在DOM渲染完成之后
            执行。可以有两种方式实现:① 将JS代码写在body之后;
                                                          ② 将代码写到window.onload函数之中
    >>> 后面三个getElements,取到的是数组格式。不能直接添加各种属性,而应该
           取出数组的每一个单独操作。
           例如:getElementsByName("name1")[0].onclick=function
     (三)查看/设置属性节点
    1、查看属性节点getAttribute("属性名");
    2、设置属性节点setAttribute("属性名","新属性值");
    >>> 查看和设置属性节点,必须先取到元素节点,才能使用。
    (四)根据层次获取节点
    1、 .childNodes:获取元素的所有子节点。包括回车等文本节点。
           .children:获取当前元素的所有元素节点(只获取标签)。
     
    2、 .firstChild:获取元素的第一个字节点。包括回车等文本节点。
          .firstElementChild:获取元素的第一个字节点。不包括回车等文本节点。
          .lastChild:获取元素的最后一个字节点。包括回车等文本节点。
           .lastElementChild:获取元素的最后一个字节点。不包括回车等文本节点。
     
    3、 .parentNode:获取当前节点的父节点。
     
    4、 .previousSibling:获取当前节点的前一个兄弟节点;包括回车等文本节点。
           .previousElementSibling
     
    5、 .nextSibling:获取当前节点的后一个兄弟节点;包括回车等文本节点。
           .nextElementSibling
     
    6、 .getAttributes:获得当前节点的所有属性节点。
    (五)创建并新增节点
    1、 document.createElement("标签名"):创建节点。需要配合setAttribute设置各种新
           属性
    2、 父节点.appendChild(新节点):末尾追加方式插入节点
    3、 父节点.insertBefore(新节点,目标节点):在目标节点前插入新节点
    4、 被克隆节点.cloneNode(true/false):克隆节点
    >>> 传入true:表示克隆当前节点,以及当前节点的所有子节点;
    >>> 传入false:表示只克隆当前节点,而不克隆子节点;
    (六)删除或替换节点
    1、 父节点.removeChild(被删节点):删除父节点中子节点;
    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();
            }


     

  • 相关阅读:
    How To Scan QRCode For UWP (4)
    How To Crop Bitmap For UWP
    How To Scan QRCode For UWP (3)
    How To Scan QRCode For UWP (2)
    How To Scan QRCode For UWP (1)
    How to change windows applicatioin's position via Win32 API
    8 Ways to Become a Better Coder
    How to resize or create a thumbnail image from file stream on UWP
    C# winform压缩文件夹带进度条
    MS ACCESS MID函数
  • 原文地址:https://www.cnblogs.com/sin0/p/7435942.html
Copyright © 2011-2022 走看看