javascript入门 基础笔记

JavaScript 的历史故事

1. JavaScript语言与名称的由来（Netscape，Sun Java）

2. 微软的Explorer和JScript

JavaScript 概述

JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。

特点：

1.   交互性（它可以做的就是信息的动态交互）

2.   安全性（不允许直接访问本地硬盘）

跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript与Java不同

 

1.   JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。

2.   JS是基于对象，Java是面向对象。

3.   JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。

JS是弱类型，Java是强类型。

JavaScript与Html的结合方式

 

想要将其他代码融入到Html中，都是以标签的形式。

1.   JS代码存放在标签对<script> js code．．．</script>中。

2.   当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）

注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。

例：<script src=”test.js” type=”text/javascript”></script>

注：规范中script标签早期有一个属性language,而现在使用type属性。

<!-- js脚本片段可以写任意个,位置也是任意的，只是要注意浏览器的解析顺序 -->    <!-- js的写法1 --><script type="text/javascript">alert("hello word");</script><!-- js的写法2 -->    <script src="a.js" type="text/javascript">     </script><!-- js的写法3  这样不行 因为下面的代码被覆盖了-->    <script src="a.js" type="text/javascript">     alert("inner js");    </script>

JavaScript语法

每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。

1.  变量

通过关键字var来定义，弱类型既是不用指定具体的数据类型。

例：var x = 3; x = “hello”;

注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。

注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。

但为了符合编程规范，需要象java一样定义结束符。

而且有些情况是必须写分号的，如：var x = 3 ;var y =5 如果两条语句写在同一行，就需要分号隔开。

 // 变量：弱类型 ， 所有的变量都是用var来声明---本质上就是Java当中的Object类型    var a=3;    var b="abc";   // alert(a+b);var boo=true;   //alert(boo+1);//2 js当中的布尔类型和C一样，有0 和 非0 的概念 //4 基本数据类型    alert(typeof(1));//number    alert(typeof(1.00000000));//number    alert(typeof("a"));//string    alert(typeof('a'));//string    alert(typeof("S"));//string    alert(typeof(true));//boolean          alert(typeof(0)=='number');//true    alert(typeof(0)=="number");//true--使用单引号和双引号，效果是一样的    alert(typeof("a")=='String');//false------※※※大小写敏感※※※    alert(typeof(n)=='number');//true前面片段中定义的变量，在这里仍然是有效的    alert( typeof(X) ); //undefined--代表该变量没有定义--因为前面只定义了小写的x 

2.  运算符

Javascript中的运算符和Java大致相同。

只是运算过程中需要注意几点：

1， var x =3120/1000*1000; x = 3120;而不是3000。

2， var x =2.4+3.6 ; x = 6;而不是6.0

3， var x = “12” + 1; x = “121”; x = “12”– 1 ; x = 11;

加号对于字符串是连接符

4， &&  || 是逻辑运算符  & | 是位运算符。

5， 也支持三元运算符

6， 特殊运算符 typeof: 返回一个操作表达式的数据类型的字符串。

var x =3;

var y = “123”;

var z =false;

typeof(x);//number

typeof(y);//string

typeof(z);//boolean

   //5 运算符：算术、赋值、比较、位运算、三元运算    //5.1算术运算    /*  var a = 3710;     alert(a/1000);     alert(a/1000*1000);//3170能还原,java不能     b=2.8;     var c=3.2     alert(c+b);//6    alert("23"+11);//2311---string---加号为字符串连接    alert("23"-11);//12---字符串遇到减号，自动会转换成数值型进行运算    alert(100%3);//1    alert(100%-3);//1    alert(-100%3);//-1 如果有负数，结果和前面那个数同符号。---和Java是一样的 */        //5.2 赋值运算: =  +=  -=  *=  /=  %=   /*  var m=3;n;//和Java不同的是，变量可以重复声明    m=n++;//用法同Java    alert(m+" "+n);//3,4    var n;    alert( typeof(n));//number    alert(m+n);//3---这里没有对该变量重新赋值，所以用的还是前面的那个 */        //5.3 比较运算符    /* var j=10;    alert(j>5);//true    alert( j!=5);//其它如 ：<  >=  <= == != 等，同理 */         //5.4 逻辑运算符  && || !   /*  var k=4;    alert(k>1&&k<5)//true    alert(!(k<3));//false    alert(!k);//k是“非0”，再非一下则是flase---0 */        //5.5 位运算符  & | ^ >> <<  >>>(无符号右移) ---和Java一样    var c = 6;   //6: 110  //3: 011    alert(c&3);   //2    alert(c^1000^1000);//6    alert(c>>>1);//3 无符号位右移  1位     //5.6 三元运算符---?号表达式  ----和java一样    alert( 3>0?100:300 );    var xx;    //###    alert(xx);//undefined---如果一个变量声明之后没有赋值，那么就是该值    alert(xx==undefined);//true 这个undefined代表的是和true,false等一样的，是一个值，因此不要用引号    alert(xx=='undefined');//false

3.  语句(与Java语句格式相同)

1.   判断结构(if语句)

    注：var x = 3;

        if(x==4)//可以进行比较运算。

        if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。

        因为在Js中0或者null就是false，

非0或者非null就是true（通常用1表示）。

        所以if(x=4)结果是true；

if语句if(3>x){alert("yes");}else {alert("no");}if(x-4){//非0 即是 truealert("yes");}else {alert("no");}if(x=4){//赋值语句，非零就是truealert(x);}else{alert("no");}          var b=(3,3+4);//7//逗号表达式中的最后一个式子的值作为整个的结果，       if(b>1){        alert("a");//a    }else if (b>2) {        alert("b");    }else if (b>2) {        alert("c");    }else {        alert("d");    } 

可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。

2.   选择结构(switch语句)

//Java语言：switch表达式支持的类型：byte,int等整数,char，jdk1.7之后增加了String类型     //JavaScript语言：支持所有类型，即所有类型的数据都能用于选择     var x="a";     switch ("a") {case "b":alert("b");break;case 'a':alert("a");case "aa":alert("aa");break;default:alert("none");break;}//a aa

与java不同的是：因为弱类型，也可以对字符串进行选择。

3.   循环结构(while语句，do…while语句，for语句)。

注：不同的是，没有了具体数据类型的限制，使用时要注意。

<h1>九九乘法表表格封装</h1>  <script type="text/javascript">  document.write("<table>");for(var i=1;i<=9;i++){document.write("<tr>");for(var j=1;j<=i;j++){document.write("<td>"+i+"*"+j+"="+i*j+"</td>");}document.write("</tr>");}document.write("</table>");//和write()一样

4.   数组

    方便操作多元素的容器，可以对其中的元素进行编号。

    特点：可以存任意元素，长度是可变的。

    格式：

    var arr = new Array();

    arr[0] = “hello”;

    arr[1] = 123;

    var arr = [‘hello’,123,true,”abc”];

    通过遍历即可对数组进行基本操作。

    for(var x=0; x<arr.length; x++)

    {

        alert(arr[x]);

    }

        <pre name="code" class="java"> //※※综上,js数组的两个特点：        //1,长度是可变的        //2,元素的类型是任意的

var arr=[3,2,1]; //数组定义的方式1: 定义时直接赋初值 /* alert(typeof(arr));//object*/ for(var i=0;i<arr.length;i++){//没有增强for循环 document.write(arr[i]+" "); } document.write("<br/>"); arr[0]=1000; arr[7]=true;//数组可以自动增长，且没有赋值则是undefined
int arr3=[1,2,3];错误的声明方式，虽然不报错

//数组定义的方式2: 使用js中的Array对象来定义
var arr5=new Array();//※ 空参
   var arr6 = new Array(10); //※ 一个参数，代表的是数组的长度
        
         var arr7=new Array(3,3,2,5,6);//※ 多个参数，代表的是数组元素值

//演示多维数组    var arr=new Array(9);//9个长度    for(var i=0;i<9;i++){    arr[i]=new Array(i);    for(var j=0;j<=i;j++){    arr[i][j]=(i+1)+"*"+(j+1)+"="+(i+1)*(j+1);    }    }    document.write("<table>");     for(var i=0;i<arr.length;i++){     document.write("<tr>");    for(var j=0;j<arr[i].length;j++){    document.write("<td>"+arr[i][j]+"</td>");    }    document.write("</tr>");    }     document.write("</table>");

4. 函数

1.  一般函数

格式：

function 函数名(形式参数...)

{

    执行语句；

    return返回值；

}

<!--       ※java中函数定义的格式：    int sum(int a,int b){      ....      return s    }          ※js中函数定义的格式：    function sum(a,b){      ....      return s    }    ▲▲js中的函数可以理解成一个function类型的对象   --><script type="text/javascript">//※浏览器对js代码是边解析边执行的//注意，函数的调用  应该在浏览器解析完 该函数的定义 之后进行hello();//无效---因为浏览器解析该语句时，此函数还没有定义</script><script type="text/javascript">hello();//调用有效function hello() {//定义---无参函数alert("hello world!");}hello();//调用function add(a, b) {//定义有参数的函数alert(a + b);}add(11, 12);//23add("333", 12);//33312</script>

函数是多条执行语句的封装体，只有被调用才会被运行。

注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。

说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？

其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。

例：

function demo()//定义函数。

{

    alert(arguments.length);

}

demo(“hello”,123,true);//调用函数。

那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。

for(var x=0; x<arguments.length; x++)

{

    alert(arguments[x]);

}

               function show(a,b){alert(a+","+b);}/* show();//undefined,undefinedshow(12);//12,undefinedshow(12, 23);//12,23show(12, 23,34);//12,23后面的 一个参数函数接收了但没有用*///函数的参数全部是js内部用一个arguments数组来接收与存放的---该对象是js内部隐含帮我们做的，我们可以访问到这个数组对象function show2(a,b){arguments[0]=1000;//可以把形参x的值改掉document.write((a==arguments[0])+"<br/>");//truedocument.write(a+","+b+"<br/>");for(var i=0;i<arguments.length;i++){document.write(arguments[i]+",");}document.write("<br/>");}show2(11,22,33,44);

         //※综上，函数的技术细节：
         //1, js中的函数是没有重载，只以函数名来识别的---其实函数名就是一个function对象的引用的名字
         //2, js函数中有一个内部维护的arguments数组来接收与保存形参

为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。

函数在调用时的其他写法：

var show = demo();//show变量接收demo函数的返回值。

var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。

  //那么该函数也可以通过show()的方式运行。

 

  function getValue(a){     alert("aa");     return a+100;     }     var v=getValue(1);     alert('v='+v);    var v2=getValue; //相当于getValue把引用值传给v2，因此v2也是一个“function对象”----getValue和v2都是引用变量     alert("v2="+v2 );//其实是输出v2对象的toString()     alert("v2="+v2(300) ); //调用v2这个函数对象---调用函数

—  动态函数

    通过Js的内置对象Function实现。

    例：var demo = new Function(“x,y”;”alert(x+y);”);

       demo(4,6);

       如同：

       functiondemo(x,y)

       {

           alert(x+y);

       }

       demo(4,6);

    不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。

     <!--         ※1※ 动态函数:使用的是js中内置的一个对象---- Function         注意，小写的function是用来声明的，而大写的Function是用来new对象的               //把下面的函数写成动态函数 -->        <script type="text/javascript">            //把函数的形参用第1个参数传入，函数体中的代码用第2个参数传入----可以通过调用者动态传入函数体，因此非常灵活，该思想类似Java当中的类反射。         var add=new Function("a,b" ,"var s=a+b; return s;");         alert(add(12,23));//传字符串进去，这是一种思想        </script>        

—  匿名函数

       格式：function(){...}

        例：var demo = function(){...}

            demo();

        通常在定义事件属性的行为时较为常用。

        例：

        functiontest()

        {

            alert(“load ok”);

        }

        window.onload= test;

        可以写成匿名函数的形式：

        window.onload= function()

        {

            alert(“load ok”);

        }

        匿名函数就是一种简写格式。 

 <!-- 用匿名函数给按钮添加事件绑定  -->        <button id="btn">按钮</button>        <script type="text/javascript">                btn.onclick=function(){                    alert("按钮");                }        </script>  

6.   对象

****prototype属性

      //※※※利用prototype更改原型时，如果属性或方法已经存在那么是修改，否则就是添加。
      //※※给String原型对象添加一个属性aa

 String.prototype.aa=100;       var str = "abc123";       println( str.aa );

     //※※给String原型对象添加一个函数---以trim()为例

 //☆☆法1---用非匿名函数(this)       function trim(){      var start=0;      var end=this.length-1;      while(start<=end&&this.charAt(start)==' '){      start++;      }       while(start<=end&&this.charAt(end)==' '){      end--;      }      return this.substring(start,end+1);      }     println(  "wangjianan   ".trim());   //☆☆法2---用匿名函数      String.prototype.trim=function(){          var start=0;          var end=this.length-1;          while(start<=end&&this.charAt(start)==' '){                  start++;          }           while(start<=end&&this.charAt(end)==' '){                  end--;          }          return this.substring(start,end+1);      };

  &&&&利用prototype属性给API进行功能扩展

      属性不能改，方法可以覆盖和更改
   Array方法做栈//unshift---addFirst  concat--addLast()  shift---removeFirst()  pop---removeLast()

Js除了已经提供的内置对象外，也可以自定义对象。

例：

function Person()//很象java中的构造函数。P不一定要大写。

{

}

var p = new Person();

p.name = “zhangsan”;//定义成员变量。

p.age = 20;

//定义成员函数。

p.run = function()

{

alert(“run”);

}

p.run();

或：

    function Person(name,age)

    {

        this.name= name;

        this.age= age;

    }

    var p = new Person(“zhangsan”,20);

Js用于操作对象的语句

—  with语句。

格式：

    with(对象)

    {

    }

    应用：当调用一个对象中多个成员时，为了简化调用，避免”对象.”这种格式的重复书写。

    var p = new Person(“zhangsan”,20);

    alert(p.name+”,”+p.age);

    可以写成：

    var p = new Person(“zhangsan”,20);

    with(p)

    {

        alert(name+”,”+age);

    }

    with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。

—  for...in语句

    用于遍历对象属性。

    例：

    var p = new Person(“zhangsan”,20);

    for(x in p)

    {

        alert(x);//结果是两个对话框，一个是name，一个是age。

        alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组，要通                                  过指定的元素名获取元素的值。

自己自定义对象

<script type="text/javascript" src="out.js"></script>  <!-- 用js来描述我们自己的对象，如类似java当中的Person类 -->  <script type="text/javascript">   /*  js是基于对象的，如果要描述对象，那么可以用function。因为js中的      function功能和java中的类(模板) 本质上是差不多的---里面可以添加变量，也可以添加自定义函数  */  function Person(){  println("person");  }  var p=new Person();  //给对象添加属性，直接采用“p.属性名=”的形式赋值就行---如果没有则是添加，如果有则是修改  //※※方式1：在对象外面添加属性和方法  p.name="jack";  p.age=20;  println(p.name+" "+p.age);  //给对象添加函数  p.info=function(){  return this.name+" "+this.age;  };  println(p.info());  /* 注意：前面用“对象.prototype.属性或函数名=***”的形式，更改的是原型对象          而本例用 “对象.属性或函数名=***”的形式，更改的是当前对象(原型对象的克隆体) */  </script>  <script type="text/javascript">  //js自定义对象的构造器+属性+方法  function Person(name,age){  this.name=name;  this.age=age;  this.toString=function(){  return this.name+","+this.age;  };  this.setName=function(name){  this.name=name;  };  this.getName=function(){  return name;  };  }  var p2=new Person("Tom",10000);  println(p2);  p2.setName("Jack");  </script>

Global 对象

是一个固有对象，目的是把所有全局方法集中在一个对象中。

 Global对象中的属性和方法，调用时可以省略：Global.

Json

<script type="text/javascript" src="out.js">    </script><!-- 用js来描述我们自己的对象，如类似java当中的Person类 --><!-- 方式3 --><script type="text/javascript">   //json---在javascript中封装数据对象   //map   var pp={//"name":"张三","age":"23", //key:valuename:"张三",age:"23",  //这句和上面一句等效---key的名称可以省略引号"getName":function(){return this.name;}   };   println("<hr/>");   println(pp.name+","+pp.age);   println(pp["name"]+","+pp["age"]);//表示访问pp对象中的"name"和"age"属性，注意这里属性是名称而不是变量，所以必须用引用   println(pp.getName());   println(pp["getName"]);//显示出函数的代码   println(pp["getName"]());//调用函数      var map ={ 8:"张三", 3:"李四",5:"Jack"   };   println( map["8"]); //原理同前。json中冒号前面的那个是key，后面的是value   println( map[8]); //8是数字，不可能是变量名，因此引号省略照样能解析出来   </script><script type="text/javascript">   var myObj={ name:"张三丰",age:25      };   println(myObj.name+","+myObj["age"]);//分别用了两种读取属性的方式</script><script type="text/javascript">   var myMap = {  names:["Jack1","Jack2","Tom1","Tom2"],     nums:[10,20,30,40]   };   println( myMap.names[1]+","+ myMap.nums[1] );      var myMap = {names:[{name:"Jack111"},{name:"Jack222"},{name:"Jack333"}]      };   println( myMap.names[0].name);   println( myMap.names[0]["name"]);</script>

注意：
            全局变量: js中，直接在脚本当中定义的变量全都是全局变量。
            局部变量: 在函数中定义的变量是局部的。