ajax day01 JS加强

<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}o\:* {behavior:url(#default#VML);}w\:* {behavior:url(#default#VML);}.shape {behavior:url(#default#VML);}</style><![endif]-->

<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL/> <w:BalanceSingleByteDoubleByteWidth/> <w:DoNotLeaveBackslashAlone/> <w:ULTrailSpace/> <w:DoNotExpandShiftReturn/> <w:AdjustLineHeightInTable/> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><![endif]--><!--[if gte mso 10]><style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;}</style><![endif]--><!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1031"/></xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1"/> </o:shapelayout></xml><![endif]-->

l       JavaScript和Java一样存在两种数据类型

•         原始值 （存储在栈Stack中简单数据）

•         引用值 （存储在堆heap中对象）

l       5种原始数据类型

•         Undefined、Null、Boolean、Number 和 String

•         JavaScript中字符串是原始数据类型

l       通过typeof运算符，查看变量类型

l       Instanceof查看变量是否属于对象实例

•         所有引用类型都是object

l       通过instanceof 运算符解决typeof对象类型判断问题

l       区分 undefined 和 null

•         变量定义了未初始化 --- undefined

•         访问的对象不存在 --- null

l       String对象 ----- 字符串类型的引用类型

•         var s = new String("itcast");==比较值

l       Number对象 ---- 数字原始类型引用类型

•         var n = new Number(100);

l       Boolean对象 ---- 布尔原始类型引用类型

•         var b = new Boolean(true);

l       Math对象 执行数学任务

l       Date对象 用于处理日期和时间

l       Array对象 数组对象，进行数组操作

JS

l       方式一

function add(a,b){

      return a + b;

}

函数无需定义返回值，可以直接返回

l       方式二

•         var add = function(a,b){return a+b;}

l       方式三

•         var add=new Function('a','b','return a+b;‘);

方法的最后一个参数是函数体，之前是可变参数

l       方式一

function add(a,b){

      return a + b;

}

函数无需定义返回值，可以直接返回

l       方式二

•         var add = function(a,b){return a+b;}

l       方式三

•         var add=new Function('a','b','return a+b;‘);

方法的最后一个参数是函数体，之前是可变参数

编解码相关的内部函数：

l       encodeURI / decodeURI   编解码URI

•         进行url跳转时可以整体使用encodeURI 对地址进行编码

l       encodeURIComponent / decodeURIComponent  编解码URI组件

•         传递参数时需要使用encodeURIComponent

l       escape / unescape  对字符串进行unicode编码

     escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z

     encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z

     encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z

其它内部函数：

l       isNaN 检查某个值是否为数字

l       parseInt / parseFloat 解析字符串为整数 / 浮点数

l       eval 计算javascript 字符串，并把它作为脚本代码来执行

定义对象

javaScript中所有对象都是Object实例

    var person = new Object();

    JavaScript对象 实际上是一个key:value 集合结构    

    person.name = “小丽”; // 定义属性

     person.setName = function(name) { // 定义方法

         this.name = name;

     }

也可以使用 { } 来直接 JavaScript对象

var company = {

     name : "中国银行",

     getName : function(){

          alert(this.name);

     }

};

company.getName();

类定义

l       function可以JavaScript函数，也可以定义JavaScript类结构

      var Person = function(name,age){  // 构造函数

           this.name = name;

           this.age = age;

           this.setName = function(name){

                  this.name = name;

           };

           this.getName = function(){

                  return this.name;

           };

      }

      var p = new Person("小丽",18);

      p.setName("小明");

      alert(p.getName());

      alert(p.age);

函数就是一个类:

function add(a,b){

    return a+b;

}

var o=new add();

o.name='小李';

o.print=function(){

    alert(o.name);

}

o.print()

修改类原型

l       通过function对象prototype属性添加类原型的属性和方法

var Car = function(){

}

var car1 = new Car();

// 通过function对象 prototype属性 

// 去定义类模板原型中属性和方法

Car.prototype.name = "保时捷";

var car2 = new Car();

alert(car1.name);

car2.name = "宝马";

alert(car1.name);

var arr=new Array(25,3,18);

arr.sort();

Array.prototype.mysort=function(){

           for(var i=0;i<this.length-1;i++)

           {

              for(var j=i+1;j<this.length;j++){

                  if(this[i]>this[j])

                  {

                     var temp=this[i];

                     this[i]=this[j];

                     this[j]=temp;

                  }

              }

           }

       }

arr.mysort();

alert(arr);

Javascript单继承

function ClassA() {

}

ClassA.prototype.color = "blue";

ClassA.prototype.sayColor = function () {

        alert(this.color);

};

function ClassB() {

}

//B和A有一样的效果

ClassB.prototype = new ClassA();

ClassB.prototype.sayColor=function(){

    alert(‘red’);

}

var b=new ClassB();

JS多继承

function A(){

    this.showinfo = function(){

       alert("A的信息");

    }

}

function B() {

    this.printMsg = function(){

        alert("B的信息");

   }

}

function C(){

// 继承A

this.newMethod = A;

this.newMethod();

delete this.newMethod;

// 继承B

this.newMethod = B;

this.newMethod();

delete this.newMethod;

// 新加的方法

this.companyinfo = function(){

    alert("c的信息");

}

}

var o=new C();

o.showinfo();

o.printMsg();

o.companyinfo();

BOM

l       DOM Window 当前浏览器窗口

l       DOM Navigator  浏览器类型

l       DOM Screen 当前屏幕

l       DOM History 浏览器历史记录

l       DOM Location浏览器导航栏

1.Window

l       Window 对象表示浏览器中打开的窗口

l       如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象

父操作子

window.frames 返回窗口中所有命名的框架

       <script type="text/javascript">

           function jump(){

              window.frames[0].location.href="http://www.baidu.com"

           }

       </script>

    </head>

    <body>

       主页面

       <input type="button" value="跳转" onclick="jump()" />

       <iframe src="2.html"></iframe>

</body>

子操作父

Window.parent得到父对象

window.parent.document.getElementById("msg").value=company

l       parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）

l       top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）

l       self是当前窗口（等价window）

l       opener是用open方法打开当前窗口的那个窗口

案例二：通过open和close 控制窗体打开和关闭  3.html

***** window对象 BOM模型中顶级对象，所有方法、属性调用省略 window.

Bom/3.html

案例三：opener使用，如果A窗口打开B窗口，在B窗口中 window.opener 获得 A窗口 window对象  4.html 5.html

使用 window. showModalDialog() 重写案例三  6.html 7.html

Js window.showModalDialog()方的使用简介  

      a.url: 弹出窗口指向哪一个页面
      b.varArgIn: 向弹出页面传递的参数
      写法如下:
         window.showModalDialog("openner3.htm",tableObj);
2.在父页面中,如何制定所需传递的常数
      在Js中,定义一个类是很简单的(类的写法,不过感觉像是个HashMap),定义方法如下
      //定义一个超级对象
      var tableObj = new Object();
      //下面的写法就是自定义属性了,"tableObj."后面的属性名可以随便写,感觉有点像key值
      //"="后面的是属性值,也是什么都行,感觉有点像value值
      tableObj.table = window.document.getElementById("myTable");
      tableObj.userName = window.document.getElementById("txtUserName").value;
      //模拟调用一下
      var tempObj = tableObj;
      //在这里,"."后的属性名与之前对象定义的属性名一直就Ok了,感觉像通过key值取value值
      //"tempObj.table.tagName"之所以这样写是因为"tempObj.table"是指向了id为"myTable"的一个Table对象,所以可以调用这个对象的"tagName"属性来查看其是什么元素
      alert(tempObj.table.tagName);
      alert(tempObj.userName);
3.在子页面中如何接收来自父页面的参数
      调用下面的方法即可:
      var comeFromFatherPageObj = window.dialogArguments;
4.子页面向父页面传递返回值(当子页面即将关闭时)
      写法如下:
      //首先在父页面调用window.showModalDialog()方法的时候做些操作,如下:
      objReturnValue = window.showModalDialog("openner3.htm",tableObj);
      //然后再子页面,即将关闭的时候加一句话,如下:
      window.returnValue = "asdad";//可以是任何东西
      window.close();

三种常用函数

window.alert(String)

Boolean window.confirm(String)

String window.prompt(String)

l       setTimeout(code,millisec)

•         code 要调用的函数后要执行的 JavaScript 代码串

•         millisec 在执行代码前需等待的毫秒数

eg:setTimeout(“showtime()”,1000)

广告漂浮

<head>

<script language=JavaScript>

function move()

{

document.getElementById("layer1").style.left= Math.random()*500;

document.getElementById("layer1").style.top= Math.random()*500;

setTimeout("move()",1000);

}

</script>

</head>

<body onload="move();">

<div  id="layer1" style="position:absolute;">

<a href="http://www.itcast.cn">

    <img src="piaofu.jpg" width="150" height="100" border="0"></a>

</div>

<h2>随机漂浮的广告</h2>

</body>

其它浏览器对象：

l       DOM History

•         History 对象包含用户（在浏览器窗口中）访问过的 URL

•         back()  加载 history 列表中的前一个 URL

•         forward()  加载 history 列表中的下一个 URL

•         go()  加载 history 列表中的某个具体页面

•         练习：返回按钮制作

DOM

l    nodeName

•       如果节点是元素节点，nodeName返回这个元素的名称

•       如果是属性节点，nodeName返回这个属性的名称

•       如果是文本节点，nodeName返回一个内容为#text 的字符串

l    nodeType

•       Node.ELEMENT_NODE    ---1    -- 元素节点

•       Node.ATTRIBUTE_NODE  ---2    -- 属性节点

•       Node.TEXT_NODE       ---3    -- 文本节点

l    nodeValue

•       如果给定节点是一个属性节点，返回值是这个属性的值

•       如果给定节点是一个文本节点，返回值是这个文本节点内容

•       如果给定节点是一个元素节点，返回值是 null

Document常用对象方法

l    每个载入浏览器的 HTML 文档都会成为 Document 对象

l    常用属性

all[] 提供对文档中所有 HTML 元素的访问

forms[]返回对文档中所有 Form 对象引用

body  提供对 <body> 元素的直接访问

l     常用方法

•       getElementById()返回对拥有指定 id 的第一个对象的引用

•       getElementsByName()返回带有指定名称的对象集合

•       getElementsByTagName()返回带有指定标签名的对象集合

•       write()向文档写 HTML 表达式或 JavaScript 代码