javascript巩固加强（一）

一.JS使用语法规范

1.在html代码里边引入js语言

       <script  type=”text/javascript”>具体js代码</script>

       <script  type=”text/javascript” src=”js文件”></script>

2. 代码大小敏感

       true/false

       TRUE/FALSE

3.结束符号

   每个简单语句使用”;”结束，与php类似

   在javascript里边，该分号不是必须，但是推荐使用

4. 注释

       //  单行注释

       /*多行注释*/

5.变量

       其值可以发生改变的量就是变量。

变量名字命名规则：

       php里边：字母、数字、下划线组成，开始有$符号标志，数字不能作为开始内容

       js里边：字母、数字、下划线、$符号、汉字 等5个组成部分，数字不能作为名字的开始内容。

6. 数据类型

       php：int  float  string  boolean  array  object  null   resource

       javascript(6种):  number(int/float)  string   boolean   null   undefined   object

       (数组是对象的一部分)

       null类型：空对象类型;

       var name = "";             //声明一个变量，后期要使用一个“字符串”进行赋值

       var age = 0;           //声明一个变量，后期要使用一个“数字”进行赋值

       var obj = null;     //声明一个变量，后期要使用一个“对象”进行赋值

       undefined未定义类型

       使用一个没有声明的变量

       object对象类型：window  document

      

二.数值数据类型

 1.各种进制数表示

      十进制：  var  age = 23;

      八进制：  var  score = 023;  2*8+3=19的十进制数

      十六进制：  var  color = 0x25;  2*16+5=37的十进制数

                         10:A   11:B   12:C  13:D  14:E   15:F

//console.log()是浏览器调试工具(firebug)的输出工具
//对信息的输出比较全面，例如可以输出对象的成员属性、成员方法等

//十进制数
var age = 20;
//alert(age);
//document.write(age);
console.log(age);
//八进制数
console.log(032);       //3*8+2 = 26
console.log(0524);      //5*8*8+2*8+4 = 340
console.log(07415);     //7*8*8*8+4*8*8+1*8+5 = 3853
console.log(059);       //59  保持原值
console.log(081);       //81  保持原值
//十六进制
console.log(0x24);  //2*16+4 = 36
console.log(0xC6);  //12*16+6 = 198
console.log(0xFD5);  //15*16*16+13*16+5 = 4053

2. 浮点数

//浮点数
console.log("-------------");
console.log(12.345);   //12.345
console.log(0.87);      //0.87
console.log(.87);       //0.87
console.log(34.0);      //34
//计算不准确
console.log(0.1+0.2);//0.30000000000000004

 3.最大数、最小数

console.log("-------------");
//1.7976931348623157e+308    等于 1.79*10的308次方
console.log(Number.MAX_VALUE);
//5e-324 等于 5*10的-324次方(5除以10的324次方  0.000..005)
console.log(Number.MIN_VALUE);

4.无穷大的数

//无穷大的数
console.log(Number.MAX_VALUE + Number.MAX_VALUE);//Infinity
console.log(10/0);//Infinity

三 运算符

1.算术运算符

        //i++  ++i在没有赋值的时候没有区别
        // var score = 90;
        //score++;
        //++score;
        //console.log(score); //91
        //i++  ++i 有赋值的时候，使用区别如下：
        var age = 20;
        //var new_age = age++;          //先返回信息，再++计算
        //console.log(new_age+"---"+age); //20---21    
        var new_age = ++age;            //先++计算，再把结果返回
        //console.log(new_age+"---"+age); //21---21

2.比较运算符

•     >
•    >=
•    <
•    <=
•    !=
•   ==           值大小的比较
•   ===         值大小和数据类型都比较
•  ！==

3.逻辑运算符

   3.1 && 逻辑与

         两边结果都为真，结果为真

   3.2 || 逻辑或

         两边结果只要有一个为真，结果为真

    3.3 ！逻辑取非

         真既假，假既真

注意点：

1）逻辑运算符最终结果

      在php里边，最终结果是“布尔”结果

      在javascript里边，&&和||是其中一个操作数，!是布尔结果、

2） 短路运算

     只给执行一个操作数，不执行另一个操作数，不被执行的操作数就被短路。

<script type="text/javascript">
        var a = 10;
        var b = 20;
        var c = 30;
        var name = "tom";
        var age = 23;
        var money = 0;
        //字符串和数值信息进行逻辑运算符
        //期间它们要进行数据类型转换
        //0  ""  array()   null 等信息都被转换为false信息
        //① &&和||的结果是其中一个操作数
        console.log(name && age);  //23  决定整体结果的操作数作为最终结果体现
        console.log(age && money); //0
        console.log(name || money); //tom
        console.log(a>5 && b>10);//true，是b>10的结果
        //② !取非最终是布尔结果
        console.log(!name); //false
        console.log(!money); //true
        </script>

四 流程控制

       顺序结构

       分支选择结构:if  elseif  switch

       循环结构:while()   do{}while()   for()

1. 条件表达式switch用法

         switch(){

              case  表达式:

              分支;

              case  表达式：

             分支;

        }

<script type="text/javascript">
    //switch
    age=50;
    switch(true)
    {
        case age>1&&age<=10: 
            console.log('children');
            break;
        case age>10&&age<=20:
            console.log('teenagers');
            break;
        case age>20:
            console.log('young man');
            break;
        default:
            console.log('old man');
            break;
    }
</script>

2. 两个关键字break和continue

          break：在循环、switch里边有使用

                       跳出当前的本层循环

          continue：在循环里边使用

                       跳出本次循环，进入下次循环

                       多个循环嵌套使用：

          标志flag：

                 for1

                      red:

                      for2

                            for3

                                  break/continue;  //把for3给跳出 / 跳出本次的for3

                                 //break  3;

                          //php语法

                           break flag;   //continue flag;   把标志对应的for循环给做跳出操作

                           break red;    //continue red;

script type="text/javascript">
   //id with go over
   //a decrease variable
   var i=1;
   //a id
   passage:
   while(true)
   {
        ++i;
        switch(i)
        {
            case 5:
                console.log("stop:"+i+"\n");
                break;
            case 10:
                console.log("stop:"+i+"\n");
                break;
            case 15:
                console.log("at the movement,it will exit wholely");
                break passage;
        }
   }

</script>

五 函数

1. 什么是函数

     有一定功能代码体的集合。

2. 函数的封装

2.1 传统方式

     function  函数名(){}

     该方式的函数有“预加载”过程，允许我们先调用函数、再声明函数

     预加载：代码先把函数的声明放入内存。代码看起来是先调用、后声明，本质是先声明、后调用的。

     函数名();

     function  函数名(){}

     函数先调用、后声明的条件是，全部代码在一个”<script>”标记里边。

<script type="text/javascript">
   //use function in front
   displayInfo();
   function displayInfo()
   {
       console.log("use firstly,declare lately,but not indeed");
   }

</script>

2.2 变量赋值方式声明函数(匿名函数使用)

     var  函数名 = function(){ }

     该方式没有“预加载”，必须先声明、后调用。

<script type="text/javascript">
   //declare function by giving value to variable
   var displayInfo = function(){
       console.log("give anonymous function to the variable");
   }
   displayInfo();

</script>

3. 函数的参数

     function  函数名(形参1,形参2，形参3=’abc’){}

     函数名(‘tom’,23,’beijing’);//传递实参信息

3.1 实参和形参的对应关系

    没有默认值情况：

    在php里边：实参的个数小于形参是不允许的

    在javascript里边：实参与形参没有严格的对应关系

<script type="text/javascript">
   //a function with many variables
   function displayInfo(name,age,addr)
   {
       console.log("people's specific information: name="+name+" age="+age+" addr="+addr);

   }
   //use it with different amount of variables
   displayInfo('maylia',18,'USA');
   displayInfo('tom',20);
   displayInfo('Li Ming');

</script>

总结:

1. 数据类型：Number   String  Boolean   Null  Undefined   Object

         console.log(typeof  信息);   判断信息的数据类型

     2.运算符

         算术、比较、逻辑、连接

     3.流程控制

         switch

         break/continue

    4.函数

        封装

        参数

3.2 关键字arguments

       function  函数名(){ }  //函数声明没有形参

       函数名(实参，实参);  //调用的时候有传递实参

       利用arguments可以在函数里边接收实参信息。

<script type="text/javascript">
   //a function with many variables
   function displayInfo(name,age,addr)
   {
       //we can specific variables' amount by arguements 
       var len = arguments.length;
       if(len==3)
       { 
           console.log("people's specific information: name="+name+" age="+age+" addr="+addr);
       }
       else if(len==2)
       {
           console.log("people's specific information: name="+name+" age="+age);
       }
       else if(len==1)
       {
            console.log("people's specific information: name="+name);
       }
       else if(len==0)
       {
            console.log('no variable');
       }
       else
       {
            console.log("we don't need so many variables!");
       }

   }
   //use it with different amount of variables
   displayInfo('maylia',18,'USA');
   displayInfo('tom',20);
   displayInfo('Li Ming');
   displayInfo();

</script>

4. callee关键字

      意思：在函数内部使用，代表当前函数的引用。

      function f1(){

              xxxx具体执行代码

              arguments.callee();   //调用本函数（或者f1()）

             //都可以使得本函数执行，我们选择callee,其可以降低代码的耦合度。

              xxxx执行代码

       }

      f1();

     耦合：一处代码的修改会导致其他代码也要发生改变。

     在程序项目里边要开发低耦合度的代码。

<script type="text/javascript">
    //exampe: callee can reduce intrconnection
    // solve the function of n rank
    function solveRank(n)
    {
        if(n==1)
        {
            return 1;
        }
        else
        {
            return n*arguments.callee(n-1);
        }
    }
    console.log("the result of solveRank(6):"+solveRank(6));
    //give "solveRank" to other variable
    var solveRank_copy=solveRank;
    //unset the original "solveRank",otherwise,it will infect follow function
    solveRank=null;
    console.log("the result of solveRank_copy(6):"+solveRank_copy(6));

</script>

5. 函数返回值

      一个函数执行完毕需要返回具体的信息，使用return关键字返回信息。

      在一定层度上看，全部的数据类型(数值、字符串、布尔、对象、null)信息都可以返回

      return本身还可以结束函数的执行。

      在函数内部返回一个函数出来。

       在javascript里边，一切都是对象

      在一个函数内部，可以声明数值、字符串、布尔、对象等局部变量信息，言外之意就还可以声明函数(函数内部还要嵌套函数)，因为函数是对象，并且函数可以被return给返回出来。

<script type="text/javascript">
    //return a function
    function f1()
    {
        //global variable
        name="tom";
        age="18";
        function f2()
        {
            console.log("name="+name+" age="+age);
        }
        return f2;
    }

    var f2=f1();
    f2();
</script>

6. 函数调用

6.1 传统方式函数调用

        函数名();

6.2 匿名函数自调用

       (function( ){})( );

<script type="text/javascript">
    //use a anonymous function
    //no variable
    (function(){
        console.log("anonymous function usage with no argument!");
    })();
    (function(name){
        console.log(name+" is used in the intersting function");
    })("tom");
    
</script>

7.全局/局部变量

7.1 全局变量

      php里边：

      ① 函数外部声明的变量。

       ② 在函数内部也可以声明全局变量(函数调用之后起作用)

    <?php
        function f1()
        {
            global $name;
            $name="tom";
            $age=18;
        }
        f1();
        //display the difference
        echo "name:".$name;
        echo "age:".$age;
    ?>

 

         javascript里边：

              ① 在函数外部声明的变量

              ② 函数内部不使用“var”声明的变量(函数调用之后起作用)

<script type="text/javascript">
    addr="USA";
    function f1()
    {
        //global variable
        name="tom";
        var age="18";
    }
    console.log("name:"+name);
    console.log("addr:"+addr);
    console.log("age:"+age);
</script>

7.2 局部变量

           php里边：在函数内部声明的变量

           javascript里边：在函数内部声明的变量，变量前边有”var“关键字。

 

六 数组

1.什么是数组

   有许多变量,它们的变量和数据类型都是一致的.

2.数组声明

   var arr = [元素,元素,元素......]

  var arr = new Array(元素,元素,元素......)

  var arr = new Array( )

         arr[0] = 元素;

         arr[1] = 元素;

<script type="text/javascript">
    //在javascript中,数组的下标就是数字",没有关联的说法
    //如果一个数组的下标是"自定义",那么该元素就是对象的成员(非数组)
    //第一种声明方式
    var color=["red","blue","green"];
    console.log(color);
    console.log(color[1]);
    
    //第二种声明方式
    var animal = new Array("cat","dog","tiger");
    console.log(animal[2]);
    
    //第三种声明方式
    var food=new Array(3);
    food[0]="bread";
    food[1]="drink";
    food[2]="milk";
    food[3]="fruit";
    food['longyan']="龙眼";
    for(i=0;i<3;i++)
    {
        console.log(food[i]);
    }
    console.log(food.longyan);
    console.log(food['longyan']);
    
</script>

3.获取数组长度

<script type="text/javascript">
   
    var food=new Array(3);
    food[0]="bread";
    food[1]="drink";
    food[2]="milk";
    food[3]="fruit";
    food['longyan']="龙眼";
    console.log(food.length);
</script>

4.数组遍历

     沿着一定的顺序对数组内部的元素进行读取,就是遍历;

     形式一: for  循环   遍历

     形式二: for----in  遍历

<script type="text/javascript">
    var color = new Array("red","blue","yellow");
    for(var k in color)
        console.log("position of "+k+" is "+color[k]);
</script>

5.数组常用方法

<script type="text/javascript" >
    //instanceof 判断对象是否是指定构造器的实例化
    var color = ["red","blue","green"];
    console.log(color instanceof Array);
    console.log(color instanceof Date);
    
    //push() unshift() 给数组元素的"结尾/开始"追加元素
    //pop() shift()    给数组元素的"结尾/开始"删除元素
    color.push("pink","gold","yellow"); //追加多个元素
    console.log(color.pop());
    console.log(color.pop());
    console.log(color.pop());
    console.log(color);
    
    //indexOf() lastIndexOf()在数组的"左边/右边"开始查找"第一次出现的指定字符串的位置
    var addr = new Array("a","b","c","d","e");
    console.log(addr.indexOf("a"));
    console.log(addr.lastIndexOf("e"));
    console.log(addr.lastIndexOf("c"));    
</script>

七 字符串

        在javascript里边,字符串可以调用一些成员.

<script type="text/javascript" >
    /*
        javascript中,普通字符串也可调用成员方法,该特点与php迥然不同
        js里边一切都是对象
        表面上看上去是字符串调用方法,本质不然,在js解释引擎内部把字符串转化为一个"临时对象"
        进行方法的调用,输出调用结果,之后再把该临时对象给销毁,给外部用户的感觉就是字符串进行
        方法的调用
    */
    var str = "hello world";
    //调用字符串的转换大写方法
    console.log(str.toUpperCase());
    
    //通过实例化方法创建一个字符串
    var title1 = new String("javascript学习");
    var title2 = new Array("javascript学习");
    console.log(title1);
    console.log(title2);
</script>

八 神奇的eval的用法

        eval( ):接受一个字符串参数,将这个字符串作为代码

                    在上下文环境中执行,并返回一个执行结果.

<script type="text/javascript">
    var a=10;
    var b=10;
    console.log(a+b);
    //"a+b"不会进行运算
    console.log("a+b");
    //"a+b"字符串通过eval当做表达式在上下文运行起来
    console.log(eval("a+b"));
    console.log("alert(123)");
    eval("alert(\"12345\")");
    //eval内部参数字符串必须符合javascript语法规则
    //eval的作用是接受外部传递的"字符串"信息给当前javascript语言使用
</script>

---

下节将巩固学习 DOM操作 ,事件操作