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

时间：2015-01-17 13:56:51 阅读：168 评论：0 收藏：0 [点我收藏+]

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刷新才看得到效果

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

标签：javascript 流程控制函数事件响应

原文地址：http://blog.csdn.net/mengwuyoulin/article/details/42804851

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行