JavaScript系列二：变量、数组、流程控制、函数以及事件响应

JavaScript入门内容的复习：JavaScript入门
    输出内容
        document.write("xxx");

    弹出警告窗口
        alert("xxx");
    弹出确认窗口
        confirm("xxx");
    弹出提问窗口
        prompt("xxx");
    单行注释
        //
    多行注释
        /*
        */
    函数语法格式
        function xxx()
        {
            xxxx;
        }
    引入JS外部文件的方式
    <script src="xx.js"></script>
    
进阶知识笔记：

一、你要懂的规则（JS基础语法）
    1、什么是变量

    2、给变量命名
        1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。
            开头不能用数字
            开头不能用除(_ $)外特殊符号,如(%  + /等)
            开头中间不能使用除(_ $)外特殊符号，如(%  + /等)
        2.变量名区分大小写，如:A与a是两个不同变量。
        3.不允许使用JavaScript关键字和保留字做变量名。
            关键字：break、else、new、var、case、finally、return、void、catch、for、switch、while、default、if、throw、delete、in、try、do、instanceof、typeof
            保留字：abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private、transient、debugger、implements、protected、volatile、double、import、public

    3、确定Ta的存在（变量声明)
        声明变量,找盒子的动作
        声明变量语法: var 变量名;    
        var就相当于找盒子的动作，在JavaScript中是关键字（即保留字），这个关键字的作用是声明变量，并为"变量"准备位置(即内存）
        Var还可以一次声明多个变量，变量之前用","逗号隔开 (不能中文的逗号)
        注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用

    4、多样化的变量（变量赋值)
        使用"="号给变量存储内容
            var mynum = 5 ; //声明变量mynum并赋值。
        注:这里 "="号的作用是给变量赋值，不是等于号。
            字符串需要用一对引号""括起来
            布尔值(true、false)

    5、表达出Ta的想法（表达式）
        表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。

    6、Ta还有其他用途（+号操作符）
        （1）操作符
            算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)
            注意: “=” 操作符是赋值，不是等于。
        (2) "+"操作符
            算术运算符主要用来完成类似加减乘除的工作，在JavaScript中，“+”不只代表加法，还可以连接两个字符串

    7、自加一，自减一（++和--）
        ++：在原基础上增加1
        --：在原基础上减去1

    8、较量较量（比较操作符）
        大于号">" 就是比较操作符，就是两个操作数通过比较操作符进行比较，得到值为真（true）和假(false)
            <小于
            >大于
            <=小于等于
            >=大于等于
            ==等于
            !=不等于

    9、我与你同在（逻辑与操作符
        “&&”是逻辑与操作符，只有“&&”两边值同时满足(同时为真)，整个表达式值才为真
            注意: 如果A为假，A && B为假，不会在执行B; 反之，如果A为真，要由 B 的值来决定 A && B 的值。

    10、我或你都可以（逻辑或操作符）
        "||"逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”。
            注意: 如果A为真，A || B为真，不会在执行B; 反之，如果A为假，要由 B 的值来决定 A || B 的值。

    11、是非颠倒（逻辑非操作符）
        "!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真。

    12、保持先后顺序（操作符优先级）
        除法、乘法等操作符的优先级比加法和减法高，要改变运算顺序，需添加括号的方法来改变优先级:
        操作符之间的优先级（高到低）:
            算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
        同级的运算是按从左到右次序进行,多层括号由里向外。

二、数组
    1、什么是数组
        一个数组变量可以存放多个数据
        数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。

    2、组团，并给团取个名（如何创建数组）
            var myarray=new Array();
        使用数组之前首先要创建，而且需要把数组本身赋至一个变量
        创建数组的同时，还可以为数组指定长度，长度可任意指定
        注意：
        1.创建的新数组是空数组，没有值，如输出，则显示undefined。
        2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

    3、谁是团成员（数组赋值）
        数组的表达方式：
        第一步：创建数组var myarr=new Array();
        第二步：给数组赋值
                myarr[1]=" xxx";
                myarr[2]=" xxx";
        注意：数组每个值有一个索引号，从0开始。
        创建数组和赋值
            1、var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
            2、var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
        注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）

    4、团里添加新成员（向数组增加一个新元素）
        使用下一个未用的索引，任何时刻可以不断向数组增加新元素。
            myarray[5]=88; //使用一个新索引，为数组增加一个新元素

    5、呼叫团里成员（使用数组元素）
        要得到一个数组元素的值，只需引用数组变量并提供一个索引，如：
        第一个人的成绩表示方法：myarray[0]
        第三个人的成绩表示方法: myarray[2]

    6、了解成员数量（数组属性length）
        Length属性表示数组的长度，即数组中元素的个数。
            myarray.length; //获得数组myarray的长度
        注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。
        同时，JavaScript数组的length属性是可变的，这一点需要特别注意。
            arr.length=10; //增大数组的长度
            document.write(arr.length); //数组长度已经变为10
        数组随元素的增加，长度也会改变
            var arr=[98,76,54,56,76]; // 包含5个数值的数组
            document.write(arr.length); //显示数组的长度5
            arr[15]=34;  //增加元素，使用索引为15,赋值为34
            alert(arr.length); //显示数组的长度16

    7、二维数组
        一维数组的表示: myarray[ ]
        二维数组的表示: myarray[ ][ ]
            注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
        1. 二维数组的定义方法一
            var myarr=new Array();  //先声明一维
            for(var i=0;i<2;i++){   //一维长度为2
               myarr[i]=new Array();  //在声明二维
               for(var j=0;j<3;j++){   //二维长度为3
               myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
               }
             }
        2. 二维数组的定义方法二
            var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]
        3. 赋值
            myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
            说明: myarr[0][1] ,0 表示表的行，1表示表的列。

三、流程控制语句
    1、做判断（if语句）
        if语句是基于条件成立才执行相应代码时使用的语句
            if(条件)
            { 条件成立时执行代码}
        注意：if小写，大写字母（IF）会出错！

    2、二选一（if...else语句）
        if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。
            if(条件)
            { 条件成立时执行的代码}
            else
            {条件不成立时执行的代码}        

    3、多重判断（if...else嵌套语句）
        要在多组语句中选择一组来执行，使用if..else嵌套语句。
            if(条件1)
            { 条件1成立时执行的代码}
            else  if(条件2)
            { 条件2成立时执行的代码}
            ...
            else  if(条件n)
            { 条件n成立时执行的代码}
            else
            { 条件1、2至n不成立时执行的代码}

    4、多种选择（Switch语句）
        当有很多种选项的时候，switch比if else使用更方便。
            switch(表达式)
            {
            case值1:
              执行代码块 1
              break;
            case值2:
              执行代码块 2
              break;
            ...
            case值n:
              执行代码块 n
              break;
            default:
              与 case值1 、 case值2...case值n 不同时执行的代码
            }
        Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。
        注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句

    5、重复重复（for循环）
        用循环语句来完成，循环语句，就是重复执行一段代码
            for(初始化变量;循环条件;循环迭代)
            {     
                循环语句
             }

    6、反反复复（while循环）
         while循环重复执行一段代码，直到某个条件不再满足
             while(判断条件)
             {
                 循环语句
              }

    7、来来回回（Do...while循环）
        do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
            do
            {
                循环语句
             }
            while(判断条件)

    8、退出循环break
        在while、for、do...while、while循环中使用break语句退出当前循环，直接执行后面的代码。
            for(初始条件;判断条件;循环后条件值更新)
            {
              if(特殊情况)
              {break;}
              循环代码
            }

    9、继续循环continue
        continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
            for(初始条件;判断条件;循环后条件值更新)
            {
              if(特殊情况)
              { continue; }
             循环代码
            }

四、函数
    1、什么是函数
        函数的作用，可以写一次代码，然后反复地重用这个代码。
            function add2(a,b){
            sum = a + b;
             alert(sum);
            } //  只需写一次就可以

    2、定义函数
        function  函数名( )
        {
             函数体;
        }
        function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。

    3、函数调用
        函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。
            第一种情况:在<script>标签内调用。
            第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

    4、有参数的函数
        function 函数名(参数1,参数2)
        {
             函数代码
        }
        注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。

    5、返回值的函数
        function add2(x,y)
        {
           sum = x + y;
           return sum; //返回函数值,return后面的值叫做返回值。
        }
    还可以通过变量存储调用函数的返回值
        result = add2(3,4);//语句执行后,result变量中的值为7。
        注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。

五、事件响应，让网页交互
    1、什么是事件
        JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
        onclick 鼠标单击时间   onmouseover鼠标经过事件  onmouseout 鼠标移开事件  onchange 文本框内容改变事件  onselect 文本框内容被选中事件  onfocus 光标聚集  onblur 光标离开  onload 网页导入  onunload 关闭网页

    2、鼠标单击事件（onClick）
        onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
            <input name="button" type="button" value="点击提交" onclick="add2()" />
        注意: 在网页中，如使用事件，就在该元素中设置事件属性。

    3、鼠标经过事件（onmouseover）
        当鼠标移到一个对象上时，该对象就出发onmouseover事件，并执行onmouseover事件调用的程序
            <input name="button" type="button" value="确定" onmouseover="message()" />

    4、鼠标移开事件（onmouseout）
        鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
            <input name="button" type="button" value="登录" onmouseout="message()" />

    5、光标聚焦事件（onfocus）
        当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
            <select name="career" onfocus="message()">

    6、失焦事件（onblur）
        onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
            <input name="username" type="text" value="请输入用户名！" onblur="message()">

    7、内容选中事件（onselect）
        选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
             <textarea name="summary" cols="60" rows="5" onselect="message()">

    8、文本框内容改变事件（onchange）
        通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
            <textarea name="summary" cols="60" rows="5" onchange="message()">

    9、加载事件（onload）
        事件会在页面加载完成后立即发生，同时执行被调用的程序。
        注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。
            2. 此节的加载页面，可理解为打开一个新页面时。
            如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。
                <script type="text/javascript">
                  function message(){
                    alert("加载中，请稍等…"); }
                </script>
                <body onload="message()">

    10、卸载事件（onunload）
        当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
        注意：不同浏览器对onunload事件支持不同。
            貌似F5刷新才看得到效果