`

客户端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";
    }
分享到:
评论

相关推荐

    c#客户端 javascript style 颜色计算器

    在这个特定的场景中,我们讨论的是一个C#客户端程序,它结合了JavaScript和CSS(Style)的概念,用于创建一个颜色计算器。这涉及到将Web技术应用于桌面应用,为用户提供更丰富的交互体验。 首先,让我们深入理解C#...

    asp.net中TextBox获得焦点和失去焦点——客户端JavaScript事件

    本文将详细讨论如何利用客户端JavaScript事件来实现这些需求。 首先,我们要理解JavaScript事件。JavaScript是一种运行在客户端浏览器上的脚本语言,它能监听用户行为和页面状态的变化,然后触发相应的函数。在...

    为每个人生成客户端JavaScript PDF.zip

    这个名为"为每个人生成客户端JavaScript PDF.zip"的压缩包显然聚焦于利用JavaScript在浏览器环境中生成PDF文档的能力。JavaScript库jsPDF是实现这一功能的核心工具。 首先,我们需要了解jsPDF。jsPDF是一个开源的...

    利用客户端JavaScript脚本制作自测型教学网页.pdf

    【标题】:利用客户端JavaScript脚本制作自测型教学网页 【描述】:本文主要讨论如何利用客户端JavaScript脚本创建自测型教学网页,包括网页试卷的制作、JavaScript脚本的嵌入以及设置指向本地计算器的超链接。 ...

    浏览器客户端JavaScript生成随机验证码.html

    浏览器客户端JavaScript生成随机验证码

    wiki-client, 联合wiki客户端javascript作为npm模块.zip

    wiki-client, 联合wiki客户端javascript作为npm模块 wiki客户端联合wiki客户端javascript作为npm模块。目标最早的两年,最小的联邦 Wiki ( SFW ) 项目探索了一个Wiki可以以接受HTML5和相关技术的。 在这里,我们将...

    dicomweb-client:DICOMweb客户端JavaScript实现

    JavaScript客户端实现。 有关更多详细信息,请参考 。 目标 这是正在进行的工作,不应在临床实践中使用。 该项目的主要动机是: 支持分别使用RESTful服务STOW-RS,QIDO-RS和WADO-RS通过Web存储,查询和检索DICOM...

    CookiesjsJavaScript客户端的Cookie操作库

    "CookiejsJavaScript客户端的Cookie操作库" 指的是一种JavaScript库,专门用于在客户端(即用户浏览器)进行Cookie的操作。Cookiejs是这个库的名称,它提供了一组简单易用的API,帮助开发者方便地管理用户的Cookie。...

    Client-Side JavaScript Guide1.3

    ### 客户端JavaScript指南1.3版知识点详解 #### 一、客户端JavaScript概述 **客户端JavaScript**是一种脚本语言,被广泛应用于网页开发中,主要用于实现网页的动态功能和与用户的交互。随着互联网技术的发展,...

    ship:客户端Javascript以帮助隐藏https

    2. **客户端JavaScript的角色**:JavaScript可以在用户浏览器中运行,可以用于构建动态和交互式的Web应用。在安全场景下,它可以用来动态生成HTTPS请求,或者对请求数据进行加密,以增强安全。 3. **隐藏HTTPS链接*...

    datawriterclient-js:DataWriter Web客户端JavaScript库

    DataWriter Web客户端JavaScript库 一个用JavaScript开发的DataWriter客户端,用于通过Web浏览器对RFID / NFC卡进行编码和打印。 入门 将DataWriterClient.js脚本添加到页面后,可以将其用于: 包含JavaScript文件...

    《JavaScript》课程标准

    3. 客户端 JavaScript:了解客户端 JavaScript 的起源和背景;掌握客户端 JavaScript 的工作方式;掌握客户端 JavaScript 的应用。 六、项目(或学习情境)设计 1. 用户注册验证:掌握常用网页登录技巧,用户名...

    .net动态显示当前时间(客户端javascript)

    在本文中,将介绍如何利用客户端JavaScript在网页上动态显示当前时间。具体实现方式是通过Ajax技术与JavaScript结合,创建一个类似时钟的动态效果。虽然作者在文章中提到了使用Ajax实现,但同时也提到了对于使用Ajax...

    blunder:现代客户端 JavaScript 错误处理程序

    现代客户端 JavaScript 错误处理程序 安装 下载 、 、 版本或通过 NPM 安装: npm install @ryanmorr/blunder 用法 Blunder 提供了在浏览器中增强、分派、捕获和报告 JavaScript 错误的能力。 import { monitor ...

    clientside-unittest-template:简单的客户端JavaScript单元测试环境

    简单的客户端JavaScript单元测试环境使用Karma + PhantomJS + Mocha + power-assert的客户端JavaScript单元测试环境。测试代码也可以用ES2015编写。模板配置src 将ES6编写的代码放在哪里LIB src文件夹中代码的输出...

    wiki-client:联合Wiki客户端javascript作为npm模块

    联合Wiki客户端javascript作为npm模块。 目标 在最初的两年中,最小联合Wiki(SFW)项目探索了Wiki可以采用HTML5和相关技术的多种方式。 在这里,我们将谨慎地将这项工作重组为有利于持续创新的小型独立模块。 我们...

    通过PrototypeJS的Apache Click Framework PickList控制客户端JavaScript

    标题中的“通过PrototypeJS的Apache Click Framework PickList控制客户端JavaScript”揭示了我们即将探讨的核心技术栈,主要包括三部分:PrototypeJS、Apache Click框架以及PickList控件在客户端JavaScript中的应用...

    proclaim:服务器和客户端JavaScript的简单断言库

    服务器和客户端JavaScript的简单断言库。 Proclaim可以用于大多数测试框架。 const proclaim = require ( 'proclaim' ) ; proclaim . equal ( true , false ) ; // throws 目录 执照 安装 您可以在服务器端将...

Global site tag (gtag.js) - Google Analytics