javascript总结

编程处理页面：
    客户端代码：动态效果、动态的安排页面元素等-----代码的运行由浏览器搞定
    服务器端代码：提交-----由服务器解决
页面脚本代码：嵌入页面上，由浏览器运行---JavaScript、vbScript

一、JavaScript概述
    1、什么是JavaScript：一种基于对象和事件驱动的解释性语言，嵌入在页面上，有浏览器运行
    2、历史和特征：JS---和 JAVA 没有关系
        CoreJAVA：面向对象、编译性
        js：语法上类似 java，不一样的地方
    3、怎么写js 代码 ***
        a、代码和事件关联：代码直接写在事件里
        b、script块：head里添加一个script，中间添加代码（以方法封装）
        c、js文件：单独定义一个js文件，在html页面的head里用script 引入
二：基础语法：
   1、语法规范：大小写敏感，以;表示结束
   2、变量***
      var sss="hello";
      alert(sss);
      var n=12;
      var b=ture;
    --使用var声明变量，变量的类型以赋值为准
   3、标示符的规则
     --一字母，数字，下划线，$组成，不以数字开头 不能与关键字重名
   4、数据类型
      简单类型：string、number、bool
      特殊类型：null、undefined
      复杂类型：Array，Date等
   5、string类型：
     a、‘’ 或“”但要匹配
     b、特殊字符：'' ""转义\' \" \n
   6、number类型
       var n=123；
       var n1=12.23；
   7、bool类型：
        var b=true/false --1/0
   8、数据类型之间的转换***
       a、隐式转换：直接转，按照规则：
          string+number=string
          string+bool=string/true
          number+bool=number
          bool+bool=number
         能加则加，不能加则转
       b、显示转换：使用响应的方法转换
         xxx.toString();
         parseInt(xxx);
         paseFloat(xx);
         typeof(xxx);
   9、运算符；
         a、算术、比较、逻辑 。。。
         b/**
         a==b:值。可能发生隐式类型转换
         a===b:严格相等，值以及类型
         c/三目运算 表达式?value1:value2；
   10、流程控制
     if/else、switch/case for while
     eg:
        var sum=0;
        for(var i=1;i<100;i++){
           sum=sum+i;
        }
三：常用的内置对象
    1、对象：封装功能、使用（创建，属性，方法）
    2、string对象：提供了可以操作字符串的方法
     创建：var s="sasd";
            var s1=new String("a");--String S大写
    
     属性：s.length

     方法：toUpperCase/toLowerCase() subString()
    
     indexOf/lastIndex() charAt() splite()
   
     replace()/match()/search();--结合正则表达式应用 match匹配，返回数组，search返回匹配结果的下标
      
     正则表达式：g：全局  i：忽略大小写 m：多行
     3、数组
     var name="mary";多个人的姓名则需要使用数组来存储了
     创建：var a=new Array();
           a[0]="aa"
           a[1]=12;
           a[2]=true;
或：
          var a=new Array("aa",12,true);
或          
          var a=new Array("aa",12,true);
           a[3]=34;
二维数组
        a[0]={"aa","bb"}
属性：a.length()

方法：对数组的操作灵活
      a.toString()--数组的内容以“，”连接输出
      a.join("|");--以“1”字符连接输出
      a.concat(b);--小数组相加
      a.slice(start,end)--截取子数组
      a.reverse();--反向数组
      a.sort();--默认按照字符串比较

   4.Math对象
     用：Math.xxx
     属性：Math.pi
     方法：Math.abs/round/rand/floor/ceil()...     
      random()--->=0 <1的随机的小数

   5、Number 对象
      var n=12.3578;
      n.toFixed(2);--保留小数点n位
   6、正则表达式对象
      应用一：结合string对象的方法，直接对字符串进行操作
      应用二：验证
        var r=/[a-z]{3,5}/；--正则表达式对象
          r.test(str);--true/false
  7、Date对象：日期和时间
   创建：
      var b=new Date()；当前
      var b=new Date(2013-12-12);
  方法：
     getXXX();getMonth()--获得日期中的各详细信息
     setXXX();setMonth()
     toXXX();toString()--转换为字符串，格式有浏览器决定
 
          toXXX():toString()---转换为字符串，格式由浏览器决定
    8、方法
        a、定义： function name(x,y)
              {
                //方法体
                return xxx;
              }
        b、调用
            var r = name(10,20);
        c、变量：局部变量、全局变量

        d、重载：js中没有传统意义上的重载---方法名称相同，则后定义的覆盖先前的定义
        e、提供了 arguments 的关键字：表示方法中被传入的参数（数组形式）---模拟重载
            arguments.length
            arguments[index]

        f、方法的其它定义方式
     //其它方式一：声明一个 Function 对象--最后一个参数是方法体，其它的参数是方法的参数，以字符          串的形式传入
                

                var f = new Function("x","y","alert(x+y);");
                f(10,80);//90

          //其它方式二：匿名函数（匿名方法）
        var f1 = function(x,y){
         alert(x+y);
        };
         f1(11,22);//33

  9、全局函数
    
     isNaN;
     parseInt();
     parseFloat();
     encodeURI/decodeURI（）
     eval;--传入字符串作为参数，计算结果
 四、DHTML应用
      1、DHTML对象
             window***
                location:URl地址栏**
                scree：屏幕*
                history：历史访问记录*
                navigator：浏览器*
                event：事件***
                document：文档***
      2、window：表示整个窗口，窗口间的操作
            window.alert();
            window.confirm()://
            弹出窗口：
            window.open(url);
            window.open(url,"name");
            window.open(url,"name","width=200,height=300");-没有用
            定时器：动态时钟,周期性的执行某端代码
               window.setInterval
               window.clearInterval
              
               window.setTimeout(f,10);
               window.clearTimeout(timer);
     3、document对象
           a、代表整个html文档，动态的操作页面，必须使用它
           b、找到元素

       方式一：document.getElementById()
       方式二：根据元素层次结构查找
               obj.parentNode--付节点
               Obj.childNodes--所有的子节点，包括标签和空白
               obj.lastChild/firstChild
       方式三：document.getElementByTagName("input")
               obj.getElementBy

           c、读取或修改
      规则一：将HTML标签对象化
       <img src="a.jpg" > obj.src
       <a href="a.html">click</a> obj.href
      规则二：如果要操作的是标记中间的文本
          ---obj.innerHTML
      规则三：修改样式
         obj.style.color
         obj.style.backgroundColor class--className
         obj.syle.fontSize
      规则四：修改复杂样式
      规则五：节点类型未知
          obj.nodeName--得到节点的名称，全大写的形式

    onxxxx = "return false;"---取消当前事件






第二个常用：表格相关
var row =table.inertRoe(index);
var cell=row.insertCell(index);


4、screen对象 提供了属性，一获取屏幕相关的信息
        width/height(只读)
        var n=screen.width;//ok
        screen.width=400;//error
5、history:表示历史访问记录
        history.back();
        history.forward();
6、location 对象：表示地址栏
       location.href="";--保留历史记录
       location.replace("url");--不会保留，新的页面替换掉先前的页面
     区别：
 
多种从页面a去往页面b的方式
      a--静态的，写死的url
      window.open; --在新窗口中打开
      history.xxx;--历史记录
      location.href;--保留历史记录
      location.repalce(url);--不保留历史记录

7、navigator对象：表示浏览器软件以及操作系统的相关信息--封装了很多属性,不用记忆，用遍历的方式了解
 --遍历某个对象的所有属性
 var r1= location.href;
 var r2=location["href"]

--遍历navigator所有的属性
function testNavi(){
 var str="";
 for(var r in navigator){
  str+=r+":"+navigator[r]+"\n";
 }
  alert(str);
}

8、event对象
   a、事件的类别
          鼠标事件
          onclick/ondblclick
          onmouseover/onmouseout
        键盘事件：
           onkeydown
           onkeyup
        状态事件
           onblur
           onfocus
           onchange
           onload
           onunloads
       b、事件的定义
          html:onxxx="ff();";--静态为元素定义事件
          code：obj.onxxx=function --动态定义
       c、事件被取消
           onxxx="return false;"              
       d、事件有冒泡机制；当层次包含的元素定义了相同的事件，触发事件时，从底层开始，层层向上，逐一触       发--当大量相同事件时，为其父元素定义事件，简化代码
       e、event事件：当页面发生任何一个事件，将事件相关的信息写入event对象
            event.x/y
            event.srcElement--封装的是引发事件的对象

       f、浏览器兼容问题
             其他浏览器：js和html页面都可以认识event，通过srcElement属性得到源对象
             火狐：js中不认识event;当在html中认识 使用这种方式0nlick=“cal（event）;”
             target属性得到源对象
         怎么解决兼容性问题：1、写标准的代码 2、对于不同的浏览器区别对待，如上的例子使用||