Chinaunix首页 | 论坛 | 博客
  • 博客访问: 159556
  • 博文数量: 27
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 701
  • 用 户 组: 普通用户
  • 注册时间: 2013-02-22 17:14
个人简介

诚信打天下

文章分类

全部博文(27)

文章存档

2013年(27)

我的朋友

分类: JavaScript

2013-02-24 22:16:52

    javascript第一部分记录了 javascript 基础语法,知道了基础语法告诉我怎样来组织、描述程序。第二部分的记录了客户端web的组成并告诉我怎样将javascript代码嵌入都Hhtml 文档中等。重要的两部分记录完后我对javascript和WEB客户端的元素有了一个简单的了解。后面将深入HTML DOM 各个对象 ,记录 javascript基础规则结合DOM规则进行HTML DOM 客户端编程

    本文围绕着下面两点大体讲了 什么是DOM标准???DOM标准存在的意义?什么是HTML文档??什么是HTML DOM(HTML 文档对象模型)??javascript程序的驱动模型是什么?????怎么在HTML文档中运行javascript?????

 

 

1.       Web浏览器中的程序设计环境

2.       HTML嵌入Javascript

 

web浏览器中的程序设计环境

javascript分为2部分。第一部分主要讲程序的基本语法,它告诉我们如何用javascript所具备的功能和的规则来组织代码。第一部分建立了一套基本规则,第二部分是浏览器这里称为宿主。基础规则依赖于宿主服务于宿主,宿主利用这两个特性轻易的操纵它来完成宿主自身想做的事,其实宿主本身也提供一套强大DOM规则,下面有说。宿主如何用那套javascript基础规则来操作自己,浏览器对javascript脚本语言专门提供了程序设计环境,它们是javascript脚本的接入点,javascript基础规则与宿主强大的DOM结合才能发挥javascript的主要作用。接下来将介绍程序设计环境的3个重要特性:

  • 全局window对象
  • 什么是DOM 标准
  • HTML 结构化的文档、HTML DOM(HTML 文档对象模型)
  • 事件驱动程序模型设计

 

1.1 全局window对象

window对象说是全局,因为它是文档对象模型(DOM)的顶层对象也可是浏览器的对象。每个浏览器再打开时都将会创建一个window对象,如果定义了多个框架,还将同时为另外的每个框架都创建window对象。 


1.2.1 什么是DOM 标准

DOM标准 W3C定义的一套 方法 属性和事件 用于访问和操纵HTML文档,Document.getelementById() 就是W3C所定义DOM标准的一员。web 浏览器中,DOM主要的作用就是结合javascript来修改 增加甚至重构整个HTML文档,HTML文档下面也将介绍。DOM 十分强大 它可以操作html文档中的任何元素图片?表格?type=”text”>?。对于每个HTML元素,它都有特定的方法 属性或事件来操纵,就拿html文档中的table表格标签,相对于DOM 来讲 它是一个对象,没错,它是一个Table对象,既然是对象,属性方法也必不可少,使用tableobject.insertRow(index)方法就可轻易并且动态的增加一行。这就是DOM,这就是体现javascript面向对象的特性之处!DOM 实际上细分3部分Core DOM(通用DOM) HTML DOM XMLDOM,每种DOM专门相应的层次结构化的文档,Core DOMW3C定义较为通用的DOM 使用它可以操作 XML文档 HTML文档,通用的和专用的不言而喻,肯定没用专用的提供的全面。 最后补充一点,必须要等到html加载完才可以使用DOM


1.3.1 HTML结构化的文档

HTML 文档就是DOM一直想要驾驭的东西之一,之二是xml文档HTML文档是一组按树形结构组织成的文档,有根节点,有父节点、兄弟节点、子节点等,这些节点的老大就是document文档对象,它是每个html文档特有的对象,位于整个html结构化文档的顶层。下面上文档层次结构图一张:

1.

 

1.3.2 HTML DOM(HTML 文档对象模型)


    HTML DOM 是以树组成的对象集合。她包括窗口 window对象 、文档 document 对象 A 标签Links数组对象 等等。HTML 文档摇身一变HTML DOM:

第一节说过一个窗体可以定义多个框架,每个框架都会创建一个window对象。从上图可以发现window是一个forms数组对象,通过索引可以引用各个框架的window 


1.4 事件驱动程序设计模型

    早期在时代交互有限,随着图形界面的逐渐发展,产生新一代事件驱动人机交互模型,该模型可以动态的实现程序交互,javascript客户端中 提供很多类型的事件,例如鼠标事件、键盘事件。比如我们按了某一个键后触发某个编写好的任务,这些事件都是基于HTML文档对象的。事件驱动模型是被动形式,作为设计者只需要预先编写好事件,等待用户的操作触发。




HTML中嵌入javascript

html中嵌入javascript脚本有多种方法,下面来:

  • 嵌入

    2.3 嵌入html元素事件中

    在这小段说下javascript中的事件都是以on开头。如果是二句以下简单代码使用这种方式还行,多了就不推荐使用了,另外该种机制javascript代码方式支持有限。使用方法是在直接在元素事件中嵌入javascript代码,多句小代码使用分号分隔,2句以上建议另建一个函数。使用方式,如果想单击一个文本框时,触发单击事件并在文本框中填写一段文字:

    1. <input type="text" id="txtName" onclick="this.value='xxx'" />


    并且改变文本框中的字体颜色: 

    1. <input type="text" id="txtName" onclick="this.value='xxx';this.style.color='blue'" />



    2.4 特殊的URL

        事件中嵌入javascript脚本不奇怪,没想到URL中叶可以嵌入javascript脚本,这意味着URL不光是javascript嵌入的一种方式也是事件触发的一种方式。要使用这种方式,必须要遵守已定的规则:javascript:。这种嵌入方式javascript内容可以是任意类型,语句之间用分号分号。她还有个特点,javascript最后一条语句的返回值,都在在URL加载文档中格式化成字符串显示出来,如果不想改变当前文档,就要确保特殊URL的 javascript嵌入方式的最后一条语句没有返回值,可以使用void(0) 操作符返回一个空值:

    1. <a href=”javascript:open()>a标签</a>

    1. <a href="javascript:window.open();void(0)">a标签2</a>

    URL嵌入方式还有一个最大的用处就是形成一个死链接,像某些情况使用a标签本意是指向当前页面,但他却指向了首页,像这种情况使用特殊的URL,让他真正的形成一个死链接:
    1. <a href=”javascript:void(0)></a>

阅读(1334) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~