JAVASCRIPT学习总结

    1.JavaScript

      1.1.介绍:嵌入式脚本语言，浏览器执行，它是以字符串解析执行的，它是一种基于对象的语言，不具有封装,继承,多态等特点。

      1.2.核心：1.事件，2.对象(Bom,Dom).

      1.3.js是事件驱动语言：

           1.区分大小写.

           2.每句话后分号可有可无(最好有).

           3.注释和java一样.

           4.弱类型语言.

      1.4.有两种数据类型：

          1.原始数据类型：放在栈里的简单数据类型(值在变量的地址).(boolean,String,undefind,null,Number..)

          2.引用数据类型：放在堆里的复杂数据类型.

    2.Array对象-提供对创建任何数据类型的数组的支持。

      2.1.concat 方法 (Array)---返回一个新数组，这个新数组是由两个或更多数组组合而成的。

      2.2.join 方法-返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来

      2.3.pop 方法--移除数组中的最后一个元素并返回该元素

      2.4.shift 方法--移除数组中的第一个元素并返回该元素。

      2.5.unshift 方法--将指定的元素插入数组开始位置并返回该数组。

      2.6.push 方法--将新元素添加到一个数组中，并返回数组的新长度值。结束位置

      2.7.slice 方法 (2,4)--返回一个数组的一段。

      2.8.splice 方法--从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。

      2.9.toLocaleString 方法--返回一个日期，该日期使用当前区域设置并已被转换为字符串。

    3.Boolean 对象-创建新的 Boolean值。

    4.Date对象-启用基本存储器并取得日期和时间

    5.Error对象-保存有关错误的信息。

    6.Global 对象-把所有全局方法集中在一个对象中.

      6.1.escape(str) 方法---对 String对象编码以便它们能在所有计算机上可读，;

      6.2.unescape(str) 方法---解码用 escape方法进行了编码的 String对象。

      6.3.eval 方法--检查 JScript代码并执行. eval(codeString),这个字符串将由 JScript分析器进行分析和执行

      6.4.isNaN 方法---返回一个 Boolean值，指明提供的值是否是保留值 NaN（不是数字）。

    7.Math 对象-是一个固有对象，提供基本数学函数和常数。

      7.1.alert(Math.round(1.5)); //四舍五入

    8.Number 对象-代表数值数据类型和提供数值常数的对象。

    9.String 对象-可用于处理或格式化文本字符串以及确定和定位字符串

      9.1.在每个空格字符处进行分解。--var ss = s.split("-");

    10.typeof 返回原始值类型

      10.1.typeof 运算符把类型信息当作字符串返回。typeof返回值有六种可能：

      "number," "string," "boolean," "object," "function,"和 "undefined."

    11.instanceof 判断对象类型

    12.this表示:永远都指向调用它的那个对象-不加this,undefined - this .

    13.prototype原型

      13.1.prototype 属性提供对象的类的一组基本功能。对象的新实例“继承”赋予该对象原型的操作。

 

    14.定义方法的方式：结构体,对象引用(定义是私有的),通过原型(定义是公共的)

      14.1.结构体

          function pe(){...}

           1.1--pe = function(){}

           1.2--HashMap.prototype = {size :function(){

                 return this.elements.length;

           },put..}

      14.2.对象引用

          s1.q1 = function(){

           alert('I am q1.');

      }

      14.3.原型

          pe.prototype.fun1 = function(){

           alert('我是原型220');

      }

    1.constructor:对创建对象构造器的引用

      var date = new Date();

      var d = date.constructor;

      var ss = new d();

      //alert(ss.getDay());

    2.StringBuffer

      append-push(value);

      toString-join(',');

      以及在Java里面StringBuffer与String的区别

    3.className-p标签颜色改变,引用css

      p.className="oa"; --css里面.oa;

    4

       4.1--getElementsByTagName-获得目标对象.

         var img = document.getElementsByTagName("img");

       4.2--getElementById-通过id获得标签对象

         var p = document.getElementById('pa');

    5.arguments-类似于数组,但是不能用join(); length属性表示参数列表的长度.--方法重载

    6

      6.1--clearInterval 使用 setInterval 方法取消先前开始的间隔事件。

      6.2--clearTimeout 取消先前用 setTimeout 方法设置的超时事件。

      6.3--setInterval 每经过指定毫秒值后计算一个表达式。

      6.4--setTimeout 经过指定毫秒值后计算一个表达式。

 

    7.定义对象的三种方式

      //1.

      var obj = new Object();

      obj.name = '123d';

      //alert(obj.name);

 

      //2.

      var obj = {x:'123123',y:'aaa'};

      alert(obj.y);

      //3。

      function point(){}

 

    8.动态创建span对象

      document.createElement("span");

      span.innerText='..';

      span.attachEvent("onclick",fn);

      //把span对象追加到div后面

      var div = document.getElementById('sss');

      div.appendChild(span);

 

    9.图片显示

      var img = document.createElement("img");

      body.appendChild(img); //动态创建img对象

      i = window.setInterval("fun()",1000);

      定义一个变量 i进行  window.clearTimeout(i)控制暂停.

      onmouseover 当用户将鼠标指针移动到对象内时触发。

      onmouseout 当用户将鼠标指针移出对象边界时触发。

    10.计时器,HashMap.

 

    1.document.cookie -短期-关闭浏览器,cookie结束,长期-存于本地

      1.1.介绍：JavaScript中的另一个机制：cookie，则可以达到真正全局变量的要求。

      cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。

      可以由JavaScript对其进行控制.(cookie文件存储于documents and settings\userName\cookie\文件夹下)

      1.2.可以作为全局变量，这是它最大的一个优点.用于:

          1.2.1.保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了.

          1.2.2.跟踪用户行为,例如一个天气预报网站，能够根据用户选择的地区显示,当地的天气情况上次用户所在地区的天气情况.

          1.2.3.定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项.背景,分辨率...

          1.2.4.创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

      1.3.cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：

          1.3.1.cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；

          1.3.2.cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的

          1.3.3.cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；

          1.3.4.cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

      1.4.设置cookie每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：

          document.cookie="userId=828";//document.cookie =key+"="+value+";expires="+date.toGMTString();

    2.insertRow.

      主要用到的方法有：

          var tr = table.insertRow();//插入行.

          var td =  tr.insertCell();//插入列.

          td.innerText = ''+i;//置或获取位于对象起始和结束标签内的文本。

          tr.appendChild(td);//列加入指定行.

          table.appendChild(tr);//行加入指定表格.

          !!!this是button对象button.td(parentNode).tr.table .removeChild(button.td.tr); -删除指定行.

    3.new操作

      1.当解析器遇到new并操作的时候创建空对象.

      2.开始运行A()函数，并将this指针指向新建的对象.

      3.当给对象不存在的属性赋值的时，解析器就会为该对象创建该属性.这样A()函数的执行就是初始化空对象的过程.

      4.当函数执行完成以后,new操作符就会返回该对象.(早绑定,晚绑定)

    4.继承

      1.构造继承

          1.1.this.newMethod = A;//将A的地址（引用）赋给newMethod.--A为父类

           this.newMethod('admin','永州');//继承属性（方法）到this关键字里面.

           ...获取子类的实例调用父类的方法.

      2.冒充继承call

          2.1.父类.call(子类对象，parmers...);...

      3.冒充继承apply

          3.1.父类.apply(子类对象，Array)...

      4.原型继承

          4.1.E.prototype  = new A('lishi','北京');--A为父类,E为子类,...

      5.copy继承

          5.1 G.prototype.method1 = F.prototype.method1; //F为父类

          5.2 for(var par in F.prototype){ //1.1种方式.

               G.prototype[par] = F.prototype[par];

           }

          5.3 var str = 'method1';

           G.prototype[str] = F.prototype[str];

    5.计算器.

    6.冒泡排序.

         闭包

      1.介绍:调用函数,返回函数.闭包有返回,返回的是最终值.

      2.作用:闭包保护栈,保护资源.

      3.特点

          1.作为一个函数变量引用.当函数返回时,处于激活状态.

          2.闭包就是当一个函数返回时,一个没有释放资源的栈区.

    动态插入表格全JavaScript.首先调用init(随便定义的方法)方法.

 

      1.js文件压缩(http://code.google.com/p/closure-compiler/)

           压缩的时候，首先去掉空格，之后去掉注释，之后去掉长的变量名这个时候，还会有多行，不是压缩成一行，

           使用高级的那种就可以实现一行，但我们这里来不了(SIMPLE_OPTIMIZATIONS).

           java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js base.js.js --js_output_file base-debug.js

           WHITESPACE_ONLY(最简单的.),SIMPLE_OPTIMIZATIONS-简单的,ADVANCED_OPTIMIZATIONS-高级的

      2.节点(node)

          节点类型共12个常量.

           1.Node.ELEMENT_NODE (1)-元素节点

           2.Node.TEXT_NODE (3)-   文本节点

           3.Node.COMMENT_NODE (8) 注释

          克隆节点—cloneNode

           var p1 = document.getElementById("p1");

           var p2 = p1.cloneNode();

           document.body.appendChild(p2);//页面上将会多出一个段落,不过段落中什么都没有

           p2 = p1.cloneNode(true);//使用参数true表示克隆节点时包含子节点

           document.body.appendChild(p2); //克隆出来了.

      3.表单(form)

          var fm = document.formName;//可以这样来直接引用该表单对象

           document.formName.onsubmit = function () { //当表单提交的时候触发

                 if (result) {//检查表单

                      this.submit();

                 } else {

                      return false;//阻止表单提交

                 }

           };

          表单重置

           <input type ='reset' value='重置'/><br> //IE不需要注册下面的事件

           document.f.onreset = function(){  //firefox可以,也可以不注册该事件.

                 document.f.reset();//ie报堆,栈溢出

           }

          单选按钮与复选框有个共同的属性——checked，指明该按钮是否被选中  fm.sex[0].checked //返回Boolean

          select,它包含option标签(下拉框)

           alert(select.selectedIndex);//这个索引号是从0开始的

           alert(select.options[select.selectedIndex].value\(text文本内容));//输出选中项的

           document.f.age.onchange = function(){

                 alert(this.value); //输出选中的值

           }

      4.表格(table)

           <tfoot><tr><td colspan="3">脚注</td></tr></tfoot> //在最下面的.

      5.动画

          动态文字显示

           var s = document.getElementById('ss').innerText.split("");

           t = setInterval(function(){

                 s.push(s.shift());

                 sss.innerText = s.join("");

           },100);

          div动画

           animate(oDiv,'width',2,100,50,500);

           执行动画的对象:obj,执行动画的属性:attr,执行动画间隔时间:timer,增量:increment,end:结束位置

           function animate(obj,attr,increment,timer,start,end){

           var saved = start;

           setInterval(function(){

                 if(saved>=end){

                      return;

                 }

                 saved+=increment;

                 obj.style[attr]=saved;

           },timer);

 

 

}