JavaScript学习笔记之数组、函数、事件

数组

1. 创建数组语法：

   var myarray=new Array();

2.  我们创建数组的同时，还可以为数组指定长度，长度可任意指定。

   var myarray= new Array(8); //创建数组，存储8个数据。 

   注意：
   1.创建的新数组是空数组，没有值，如输出，则显示undefined。
   2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

3. 注意：数组每个值有一个索引号，从0开始。

   我们还可以用简单的方法创建上面的数组和赋值：

   第一种方法：

   var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

   第二种方法：

    var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）

   注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）

4. 如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。

   语法：

   myarray.length; //获得数组myarray的长度

   注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。

   var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr 
   document.write(arr.length); //显示数组长度8
   document.write(arr[7]); //显示第8个元素的值54

   同时，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

5. 二维数组

   一维数组，我们看成一组盒子，每个盒子只能放一个内容。

   一维数组的表示: 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. function  函数名( )
   {
        函数体;
   }

2. 函数调用

   函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。

   第一种情况:在

   第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

   
   
   
   
   
   
     //按钮,onclick点击事件，直接写函数名
   
   
   

3. 有参数的函数

   function 函数名(参数1,参数2)
   {
        函数代码
   }

   注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。

   按照这个格式，函数实现任意两个数的和应该写成：

   function add2(x,y)
   {
      sum = x + y;
      document.write(sum);
   }

   x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。

   例如，add2(3，4)会求3+4的和，add2(60,20)则会求出60和20的和。

4. 返回值的函数

   function add2(x,y)
   {
      sum = x + y;
      return sum; //返回函数值,return后面的值叫做返回值。
   }

   还可以通过变量存储调用函数的返回值，代码如下:

   result = add2(3,4);//语句执行后,result变量中的值为7。

   注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。 

事件

1. 什么是事件

   JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

   比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

   主要事件表:

   

2. 鼠标单击事件( onclick ）

   onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

   比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：

   注意: 在网页中，如使用事件，就在该元素中设置事件属性。

3. 鼠标经过事件（onmouseover）

   鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

   现实鼠标经过"确定"按钮时，触发onmouseover事件，调用函数info()，弹出消息框，代码如下:

   

   运行结果:

   

4. 鼠标移开事件（onmouseout）

   鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

   当把鼠标移动到"登录"按钮上，然后再移开时，触发onmouseout事件，调用函数message()，代码如下:

   

   运行结果:

    

5. 光标聚焦事件（onfocus）

   当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

   如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。

   

   运行结果：

   

6. 失焦事件（onblur）

   onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

   如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。

   

   运行结果：

   

7. 内容选中事件（onselect）

   选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

   如下代码,当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。

   

   运行结果：

   

8. 文本框内容改变事件（onchange）

   通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

   如下代码,当用户将文本框内的文字改变后，弹出对话框“您改变了文本内容！”。

   

   运行结果：

   

9. 加载事件（onload）

   事件会在页面加载完成后，立即发生，同时执行被调用的程序。
   注意：1. 加载页面时，触发onload事件，事件写在标签内。

         2. 此节的加载页面，可理解为打开一个新页面时。
   如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

   

   运行结果：

   

10. 卸载事件（onunload）

    当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

    注意：不同浏览器对onunload事件支持不同。

    如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。

    

    运行结果：（IE浏览器）

    

编程练习

编程练习

使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；

任务

第一步： 创建构建运算函数count()。

第二步： 获取两个输入框中的值和获取选择框的值。

提示：document.getElementById( id名 ).value 获取或设置 id名的值。

第三步： 获取通过下拉框来选择的值来改变加减乘除的运算法则。

提示：使用switch判断运算法则。

第四步：  通过 = 按钮来调用创建的函数，得到结果。

注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。

 
    
   
  
 
    
   
    	+
		-
		*
		/