`
webdev2014
  • 浏览: 683001 次
文章分类
社区版块
存档分类
最新评论

JavaScript常用内置对象(window、document、form对象)

 
阅读更多

由于刚开始学习B/S编程,下面对各种脚本语言有一个宏观的简单认识。

脚本语言(JavaScript,Vbscript,JScript)介于HTMLC,C++,Java,C#等编程语言之间。它的优势在于代码执行时不用像编程语言那样必须经过“编译”,先生成二进制机器码再执行,而是由其所对应的解释器(或称虚拟机)直接解释执行。程序代码既是脚本程序,亦是最终可执行文件。

历史:

JavaScript是一种脚本语言。前身为LiveScript,是Netscape开发的一种描述式语言。自Sun公司推出Java之后,Netscape公司引入了Java中面向对象的一些概念,重新进行设计,并取名为JavaScript。

虽然它里面还有一个“Java”,但其实和Java并无多大关系。Java是一种面向对象的语言,而Javascript是基于对象以及事件的。Javascript是运行在浏览器端的解释性语言,用于产生一些动态效果或者用于对HTML表单进行验证等。

在HTML中,使用<Script>标记的language属性指定脚本语言的类别。例:<Script language=”javascript”> ……</Script>。Language可以为“JavaScript”、“VBScript”或者“JScript”中的一种。

VBScript是微软以VB为蓝本开发的一种脚本语言,它目前主要用在服务器端作为ASP的脚本语言;JScript是微软在JavaScript基础上做了一些扩充后的一种脚本语言,它只可以在MS IE中被使用;JavaScript是最为通用的,如果没有指定language属性,则默认为“JavaScript”。

下面对最常用的JavaScrip常用内置对象t做一些介绍:

常用内置对象:


Window对象:

是所有其它对象的“祖先”,对一个window对象的引用方法取决于它与当前位置的关系。这个对象最常用的地方在于从一个窗口中新开一个窗口。

基本语法为:[new window=]window.open(url,windowName[,windowPros]);其中表示这个新开窗口对象的变量名称;windowName是这个新开窗口的名称;windowPros是这个新开窗口的属性(用于设置新开窗口的外观);注:如果没有指定新开窗口的属性,那么新开窗口的属性就按照父窗口的属性设置。

例如:

    <script language="javascript">
            window.open("JStest1.htm", "newwindow", "height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");
    </script>


Document对象:

document对象包含当前文档的信息,例如:标题、背景、颜色、表格等。

常用方法:

(1) 通过write()/writeln()方法在浏览器中显示内容。

(2) 获得当前文档中的元素、属性和节点信息(例如:通过“document.formName”来获得表示页面中的表单名称为fromName的表单对象)。

(3) getElementById()和getElementByTagName()。这两个方法会忽略文档的结构,可查找整个HTML文档中的任何元素(不论它们在文档中所处的位置,例如通过getElementByTagName()可以把文档中所有的<p>元素找到)。

举例:


<html>
<head>
<script type="text/javascript">
    function message() {
        var label = document.getElementById("test")
        label.innerText = "kobe bryant"
    }
</script>
</head>

<body>
    <input id="test" type="text" style="border-color:Red"/><br />
    <input type="button" value="确定" onclick="message()"/>
</body>
</html>



From对象:

Form对象是document下的一个子对象,表示表单对象。一个文档中的每一个表单都是独立的、互不关联的对象。可以使用document.formName或者document.forms[index]的方式来获得对某个form的引用(index的值在0到此文档中form个数减一之间)。得到form对象后,就可以用它来获得form中各个表单元素。

例:当用户点击确定按钮时,document.frm.userName.value将把表单元素userName文本框的值传给checkuserName函数的参数。


测试效果图:



<html>
<head>
    <title>访问HTML元素</title>
</head>
   <script language="javascript" type="text/javascript">
       function checkuserName(username) {
           var label = document.getElementById("errorMsg");
           if (username.length < 6) {
               label.innerText = "用户名的长度必需大于6位";
           } else {
               label.innerText = "";
           }
       }
    </script>
<body>
     <form name="frm" method="post" action="">
      用户名:<input type="text" name="userName"/><label id="errorMsg"></label><br/>
      密码:<input type="password" name="password"/><br>
       <input type="button" value="确定" onclick="script:checkuserName(document.frm.userName.value)"/>  
       <input type="reset" value="取消"/>  
     </form>
</body>
</html>



分享到:
评论

相关推荐

    javaScript常用事件

    document对象常用的方法: 1.document.getElementById():通过id获得唯一的一个HTML元素,没有id时,通过name查找 2.document.getElementByName():获取相同名称的一组元素。主要用于表单中的复选框 Date对象常用...

    javascript完全学习手册2 源码

    第2篇 JavaScript内置对象篇 第3章 JavaScript内置对象 3.1 JavaScript对象概述 3.1.1 对象的概念 3.1.2 使用JavaScript对象基础知识 3.2 Array对象 3.2.1 创建Array对象 3.2.2 Array对象属性 3.2.3 ...

    javascript完全学习手册1 源码

    第2篇 JavaScript内置对象篇 第3章 JavaScript内置对象 43 3.1 JavaScript对象概述 43 3.1.1 对象的概念 43 3.1.2 使用JavaScript对象 基础知识 44 3.2 Array对象 46 3.2.1 创建Array对象 46 3.2.2 Array对象属性 ...

    js对象层次• navigator •screen•window

    • window o history o location o frames[]; Frame o document  anchors[]; links[]; Link  applets[]  embeds[]  forms[]; Form  Button  Checkbox  elements[]; Element  Hidden ...

    JavaScript Bible 6th Edition

    The JavaScript classic Target Audience ... Window And Document Objects; Forms And Form Elements; Strings, Math, And Dates; Scripting Frames And Multiple Windows; Images And Dynamic HTML

    JavaScript笔记.doc

    6、内置的JavaScript对象: 3 7、处理对象的内置方法: 3 8、用户自定义对象: 4 9、使用IE的Scriptlet: 4 三、Form元素:文本框和按钮 5 1、文本框: 5 2、按钮: 5 3、文本区: 6 4、口令密码: 6 5、确认按钮和...

    JavaScript详解(第2版)

     11.4 JavaScript与form对象   11.4.1 为表单及其输入类型(控件)命名   11.4.2 表单中的传统DOM   11.4.3 为表单及按钮命名   11.4.4 提交填写完成的表单   11.4.5 this关键字   11.4.6 submit...

    107个常用javascript语句

    var form = window.document.forms[0] for (var i = 0; i&lt;form.elements.length;i ){ if (form.elements.type == "text"){ form.elements.value = ""; } } 31.复选按钮在JS中判断是否选中:document.forms[0].check...

    JS提交form表单实例分析

    本文实例讲述了JS提交form表单。分享给大家供大家参考,具体如下: 一、javascript 页面加裁时自动提交表单: Form表单: &lt;form method="post" id="myform" action="a.php"&gt; &lt;input type="submit" value=...

    JavaScript语言参考手册

    这一章对应于 Window 对象和客户端与之相关的对象:Frame,Location 和 History。 Window 属性 方法 Frame Location 属性 方法 History 属性 方法 screen 属性 第七章 表单 这一章对应于使用表单,表单是出现在...

    JavaScript王者归来part.1 总数2

     7.5 JavaScript的内置对象   7.5.1 Math对象   7.5.2 Date对象--创建一个简单的日历   7.5.3 Error对象   7.5.4 其他内置对象   7.5.5 特殊的对象--全局对象与调用对象   7.6 总结   第8章 集合  ...

    javascript函数的解释

    var form = window.document.forms[0] for (var i = 0; i&lt;form.elements.length;i++){ if (form.elements[i].type == "text"){ form.elements[i].value = ""; } } 31.复选按钮在JS中判断是否选中:document.forms...

    JavaScript权威指南

    JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...

    JavaScript中文参考手册

    本书已经更新于 JavaScript 1.2 的新特性,其它包括了 JavaScript 支持层和样式单的属性和对象。要获得关于这些主题的详细信息,请参看 Netscape Communicator 中的动态 HTML。 目录 此参考中包含的内容 此参考...

    JavaScript_DOM编程

    3.form对象 submit方法:该方法不会触发onsubmit事件 item方法:返回某字段元素值(不能返回type=image类型) onsubmit事件:在程序提交前触发,若其值为true则提交,若为false则不提交给服务器 三、script标签...

    JavaScript完全自学宝典 源代码

    示例描述:学习JavaScript中的document对象。 8.1.html 得到文档锚点对象数组。 8.2.html 获取并设置cookie信息。 8.3.html 获取文档标记的数组及相关操作。 8.4.html 获取location对象的属性值并...

    107个常用Javascript语句.doc

    4.一个浏览器窗口中的DOM顺序是:window- &gt;(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById( "表单中元素的ID號 ").name(或value) 6.一个小写转大写的JS: ...

    Serialize-javascript.zip

    Serialize-javascript 能够序列化 JavaScript 库成含有正则表达式和功能的 JSON 包。示例:var serialize = require('serialize-javascript'); serialize({  str : 'string',  num : 0,  obj : {foo: ...

    JavaScript 圣经第5版-Javascript编程宝典--黄金版 .rar

    Chapter 8: Window and Document Objects. Chapter 9: Forms and Form Elements. Chapter 10: Strings, Math, and Dates. Chapter 11: Scripting Frames and Multiple Windows. Chapter 12: Images and Dynamic ...

    javascript经典年月日三级联动

    var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[str - 1]; if (str ==...

Global site tag (gtag.js) - Google Analytics