客户端Javascript

 

更详细参考JavaScript手册

 

JavaScript，Netscape 跨平台基于对象的用于客户/服务器应用的脚本语言。

使用 JavaScript，你可以创建你所需要的动态 HTML 页面，用于处理用户输入及使用特殊的对象、文件和关系数据库维护稳固的数据。

服务器端和客户端 JavaScript 共享相同的核心语言。如下图:

客户端 JavaScript (或 Navigator JavaScript) 在核心语言外面还封装了额外的特性，如只与在浏览器中运行 JavaScript 有关的预定义对象。服务器端 JavaScript 则封装了只与在服务器上运行 JavaScript 有关的预定义对象和函数。

客户端JavaScript 直接嵌入 HTML 页面中，在运行时完全由浏览器解释。

服务器端JavaScript不是新生事物。1996年，在发布了首个版本的浏览器两年之后，网景（NetScape）推出了服务器端 JavaScript ，但它的影响力远不及客户端 JavaScript，于是这个概念很快隐退，JavaScript 便主要应用在浏览器上。ASP的服务器端就是用脚本语言编写的。微软的IIS中的ASP本来就可以使用JavaScript作为编程语言，虽然大多人使用VBScript。

 

下面学习客户端 JavaScript:

当浏览器(或客户)需求这样的页的时候，服务器将会将整个文档的内容(包括 HTML 和 JavaScript 语句)通过网络发送到客户那里。客户从头到尾阅读页面，显示 HTML 结果并同时执行 JavaScript 语句。

JavaScript 有下列核心对象：

Array, Boolean, Date, Function, Math, Number, Object, RegExp, String

array对象 east-liujie

var array=["1","2","3","4","5"]; 或 var array=new Array("1","2","3");  

Array array=new Array("1","2","3");是错误的

页面在加载时按照代码的顺序从上往下一行行加载,所以像这里的document.getElementById("text1");类似获取页面元素的代码必须写在要获取的页面元素代码后面,或写在方法里因为一般方法在页面加载完后等到触发时才执行

写在要获取的页面元素代码后面:

<input type="text" id="text1" onclick="getele()"/>

  <script type="text/javascript">

   var text=document.getElementById("text1");

   var array=["1","2","3","4","5"];

    function getele()

    {

       for(var i=0;i<array.length;i++)

        {

       text.value+=array[i];

        }

    }

    </script> 

写在一般方法里:

<script type="text/javascript">

   var array=["1","2","3","4","5"];

    function getele()

    {

   var text=document.getElementById("text1");

       for(var i=0;i<array.length;i++)

        {

       text1.value+=array[i];

        }

    }

    </script> 

<input type="text" id="text1" onclick="getele()"/>

写在window.onload=function()方法里:

 <script type="text/javascript">

      var text;

      window.onload=function(){

      text=document.getElementById("text1");

      }

      var array=["1","2","3","4","5"];

      function getele()

    {

        for(var i=0;i<array.length;i++)

         {

           text.value+=array[i];

         }

     }

    </script>

    <input type="text" id="text1" onclick="getele()"/>

可以看出window.onload=function()方法是在页面刚加载完后执行的

boolean对象  w3school   ztlyz

date对象  east-liujie  w3school  javaeye

Function对象( function 是 Function 的一个实例)

function不仅可以定义一个函数,还可以定义一个类,看下面第一个链接的构造函数方式定义类(内部可以用this关键字为该类添加属性和方法)

 <script type="text/javascript">

    function person(){

    this.name="王小虎";

    this.age=23;

    this.method=function(){alert("我叫"+this.name+"我今年"+this.age+"岁");};

    };

    var p=new person();       //javascript中显示声明变量用var

    p.method();

    </script>

http://blog.csdn.net/avon520/archive/2009/01/17/3819751.aspx

http://www.cnblogs.com/mapig/archive/2009/03/08/1406380.html

math对象 w3school     

Math没有构造函数,不用new创建实例,可以直接用

number对象 w3school  司徒正美

object对象

Array、Boolean、Date、Function、Number等核心对象，其实都是从Object来的，它们的祖先都是Object

birdshome  司徒正美  ggjjzhzz  

string对象

east-liujie  leadergg  w3school

regexp对象

w3school   jb51.net   javaeye

JavaScript客户端对象(即HTML DOM对象(document及其包含的对象)和浏览器对象(window及其包含的对象和navigator及其包含的对象))有：

Anchor, Applet, Area, Button, Checkbox, document, event, FileUpload, Form, Frame, Hidden, History, Image, Layer, Link, Location, MimeType, navigator, Option, Password, Plugin, Radio, Reset, screen, Select, Submit, Text, Textarea, Window

这些客户端对象的包含关系如下图:

window对象    Athrun

doument对象  小白

history对象     itzsl  and  yefei

location对象    黄刚

link对象  表示当前document对象里的所有链接的集合

天轰穿    chris25832002

相关:锚记的使用

同一个页面   作为锚记的标签id="*"     链接<a href="#*">转到</a>  

不同的页面   另一个页面作为锚记的标签id="*"      链接<a href="另一个页面的相对路径#*">转到</a>

image对象

Image对象在JavaScript 1.1 (i.e. since Netscape Navigator 3.0)引入，我们通过浏览器看到的图像都是通过一个数组显示出来的，这个数组成为images,他是document对象的一个属性。网页中的图像均会被自动看作图像对象，并依顺序，分别表示为document.images[0]，document.images[1]… 另外我们可通过给图像一个name属性来访问，如：

<img src="img.gif" name="myImage" width=100 height=100>

这样我们就可以通过document.myImage 或者document.image["myImage]来访这个对象。

image对象现在一般常用来预加载一些图片，先将其装入 DOM，等到需要的时候，直接调用，省掉等待的时间，直接显示出来。JavaScript 里的 Image 对象可以很好的实现这一需求，在 FF 下通过 alert(img对象) 可以看到“object HTMLImageElement“内容，Image 对象可以直接利用 append 添加到 body 里面去，调用十分方便。

美拓blog   abcdown   I'm DonKey(放大镜效果) ①的11

anchor对象

Anchor对象(锚记)是Link对象的一种类型。使用 HTML A 标签或调用 String.anchor 方法。JavaScript 运行时刻引擎将为文档中的每个含有 NAME 属性的 A 标签创建一个对应的 Anchor 对象。它会将这些对象放在 document.anchors 属性数组中。你可以通过该数组的索引来访问一个 Anchor 对象。 如果一个 Anchor 对象还是一个 Link 对象的话，该对象就会同时存在于 anchors 和 links 数组。

form对象

表单对象。seahorsedad

textarea对象

文本框textarea高度随内容自适应增长收缩

相关属性

scrollHeight, scrollWidth:返回元素的完整的高度和宽度(包括有滚动条后没出现的部分),以像素为单位,只读。

scrollTop, scrollLeft:返回已经滚动到元素的上边界或左边界的像素数,只读。

textarea的rows和cols属性

rows:高占几个字符

cols:宽占几个字符

overflow

文本框textarea高度随内容自适应增长收缩再加上字数限制的2

text对象

表单验证通用脚本    中国ASP之家(文中有个例子是添四个文本框,焦点自动跳动,是用的document.forms[0].elements[X]的方法获得元素,但在ASP.NET中由于ViewState也是在form里面的,并且位于第1位,所以其他元素要从elements[1]开始数)

fileupload对象

客户端验证上传文件的类型(文中用的是服务器端控件,改成客户端控件也可以)

submit对象button对象reset对象

reset对象能将当前form表单内的所有由用户设置值的控件还原回该控件的初始值   isstudy

radio对象  中国ASP之家  ASP咨询网站

客户端控件用相同的name来实现互斥

男<input id="Radio1" type="radio" checked="checked" name="sex" onclick="client_radio()"/>

女<input id="Radio2" type="radio"  name="sex" onclick="client_radio()"/>

服务器端控件使用相同的GroupName来实现互斥其到了客户端是name,ID到了客户端既是id又是value(如果没有设GroupName,该ID也是客户端的name),如下:

老<input id="RadioButton1" type="radio" name="age" value="RadioButton1" checked="checked"

onclik="server_radio();"/>

幼<input id="RadioButton2" type="radio" name="age" value="RadioButton1" onclick="server_radio();"/>

老<asp:RadioButton ID="RadioButton1" runat="server" onclick="server_radio()" Checked="true" GroupName="age" />

幼<asp:RadioButton ID="RadioButton2" runat="server" onclick="server_radio()" GroupName="age" />

 <script type="text/javascript">

    function client_radio()

    {if(document.getElementById("Radio1").checked==true)

      {alert("男");}else

      {alert("女");}

    }

    function server_radio()

    {由于javascript也是在浏览器里运行的,所以在IDE里针对服务器端控件写javascript时有些属性或方法没有智能提示,可以硬写进去,前提先用开发人员工具看看其生成的客户端代码,如此处的checked就是硬写进去的,因为上面绿色的客户端代码有checked这个属性

       if(document.getElementById("RadioButton1").checked==true)

       {alert("老");}else

       {alert("幼");}

    }

    </script>

checkbox对象  carolaif

鸭梨:<input type="checkbox" value="鸭梨" name="cb"  />

苹果:<input type="checkbox" value="苹果" name="cb" />

桃子:<input type="checkbox" value="桃子" name="cb" />

菠萝:<asp:CheckBox ID="cb" runat="server"/>     asp:CheckBox选中后value值为on,ID到了客户端为id,Name具体看①的14的补

<input type="button" value="确定" onclick="getfruit()" />

<script type="text/javascript">

    function getfruit()

     {

   document.getElementsByName返回一个数组  ①  ②

    var array=document.getElementsByName("cb");

    for(var i=0;i<array.length;i++)

       {还可以array.item(i).checked==true

          if(array[i].checked==true)

           alert(array[i].value);

       }

     }

</script>

select对象option对象   leecong  zyh-nhy  showfan  javaeye

 <asp:DropDownList ID="DropDownList1" runat="server">

            <asp:ListItem>1</asp:ListItem>

            <asp:ListItem>2</asp:ListItem>

            <asp:ListItem>3</asp:ListItem>

 </asp:DropDownList> 

 function selectoption()

    {

     var objselect=document.getElementById("DropDownList1");  这里使用的是服务器端控件,也可用客户端控件

     var item=new Option("4","4");    创建一个Option对象(value,text)

     objselect.options.add(item);        添加该项

     var itemvalue=objselect.value;    Select对象的value属性可获得当前选中项的值

     alert(itemvalue);

     Select对象的selectedIndex获得当前选中项的索引,然后通过Option对象的text属性获得选中项的文本

     objselect.options[objselect.selectedIndex].text="5";

    }