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

nodeName	String	节点的名字；根据节点的类型而定义
nodeValue	String	节点的值；根据节点的类型而定义
nodeType	Number	节点的类型常量值之一
ownerDocument	Document	指向这个节点所属的文档
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点的列表
parentNode	Node	返回一个给定节点的父节点。
previousSibling	Node	指向前一个兄弟节点；如果这个节点就是第一个兄弟节 点，那么该值为null
nextSibling	Node	指向后一个兄弟节点；如果这个节点就是最后一个兄弟节 点，那么该值为null
hasChildNodes()	Boolean	当childNodes包含一个或多个节点时，返回真
attributes	NamedNodeMap	包含了代表一个元素的特性的Attr对象；仅用于Element节点
appendChild(node)	Node	将node添加到childNodes的末尾
removeChild(node)	Node	从childNodes中删除node
replaceChild (newnode, oldnode)	Node	将childNodes中的oldnode替换成newnode
insertBefore (newnode, refnode)	Node	在childNodes中的refnode之前插入newnode

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 代码