当前位置:文档之家› JavaScript详解

JavaScript详解

JavaScript详解
JavaScript详解

JavaScript 初级教程
一,JavaScript 简介 JavaScript
JavaScript 有什么特点
JavaScript 使网页增加互动性.JavaScript 使有规律地重复的 HTML 文段简化,减少下载时间.JavaScript 能 及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证.JavaScript 的特点是无穷无尽的, 只要你有创意.
Java 与 JavaScript 有什么不同
很多人看到 Java 和 JavaScript 都有"Java"四个字,就以为它们是同一样东西,连我自己当初也是这样.其 实它们是完完全全不同的两种东西.Java,全称应该是 Java Applet,是嵌在网页中,而又有自己独立的运行窗口的 小程序. Java Applet 是预先编译好的, 一个 Applet 文件 (.class) Notepad 打开阅读, 用 根本不能理解. Java Applet 的功能很强大,可以访问 http,ftp 等协议,甚至可以在电脑上种病毒(已有先例了).相比之下,JavaScript 的 能力就比较小了.JavaScript 是一种"脚本"("Script"),它直接把代码写到 HTML 文档中,浏览器读取它们 的时候才进行编译,执行,所以能查看 HTML 源文件就能查看 JavaScript 源代码.JavaScript 没有独立的运行窗 口,浏览器当前窗口就是它的运行窗口.它们的相同点,我想只有同是以 Java 作编程语言一点了.
开发 JavaScript 该用什么软件
一个 JavaScript 程序其实是一个文档, 一个文本文件. 它是嵌入到 HTML 文档中的. 所以, 任何可以编写 HTML 文档的软件都可以用来开发 JavaScript.在此我推荐大家用 FrontPage 2000 附带的 Microsoft 脚本编辑器(在 FrontPage 菜单 | 工具 | 宏 | Microsoft 脚本编辑器).它是个像 Visual Basic / C++ 一样的程序开发器,能 对正在输入的语句作出简要提示.配合 FrontPage 2000,使工作量大大减少.
二,JavaScript 语言的基础 JavaScript
在什么地方插入 JavaScript
JavaScript 可以出现在 HTML 的任意地方. 使用标记, 你可以在 HTML 文档的任意地方插 入 JavaScript,甚至在之前插入也不成问题.不过如果要在声明框架的网页(框架网页)中插入,就一定要 在之前插入,否则不会运行.
基本格式
第 1 页(共 33 页)

JavaScript 初级教程
第二行和第四行的作用,是让不懂"的标记把它嵌入到文档中.注意,一定要用 ""标记. 参考
language="javascript"表示使用 JavaScript 脚本语言,脚本语言还有 vbscript、 jsscript 等,如果没有 language 属性,表示默认使用 JavaScript 脚本。其中的...就是代 码的内容。例如:

Javascript前台捕获浏览器关闭事件,后台处理一些善后工作

Javascript前台捕获浏览器关闭事件,后台处理一些善后工作 1.使用onbeforeunload 事件捕获浏览器关闭事件 IE和火狐都支持onbeforeunload事件,但是opera不支持。 注意:不仅关闭浏览器时会触发onbeforeunload事件,刷新等事件也会触发onbeforeunload事件。 2.事件注册方法 3.使用Ajax技术向服务器异步发送需要做的善后工作 这里以登陆为例:当用户关闭浏览器时,需要把用户登陆的状态修改为‘已退出’。由于用户登陆的状态存放在服务器的数据库中,所有必需在客户端捕获浏览器关闭动作,在浏览器关闭之前,向服务器发送一个请求,当然这个的请求是异步发送的(Ajax技术);服务器收到请求后,把当前用户的登陆状态修改为‘已退出’。 function CloseBrowse()//用户关闭浏览器 { var n = window.event.screenX - window.screenLeft; var b = n > document.documentElement.scrollWidth - 20; //可以捕获点击小差和 Alt+F4 时浏览器关闭的情况,但是不能捕获在多窗口浏览模式下,用户点多窗口模式的小差关闭浏览器的情况 if (b && window.event.clientY < 0 || window.event.altKey) { var url = "Service.asmx/UpdateLoginState"; UpdateLoginState(url); } } //使用Ajax 向服务器发送异步请求,要求服务器修改登录状态 function UpdateLoginState() { var url = "Service.asmx/UpdateLoginState"; SendRequestToWebService(url); } function SendRequestToWebService(url){ createXmlhttp(); xmlhttp.open("POST", url, true); //xmlhttp.onreadystatechange = handleStateChange; xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); xmlhttp.send(); } //创建XMLHttpRequest对象 function createXmlhttp() {

Javascript基础教程

Javascript简介 (2) Javascript简介 (2) 简单的Javascript入门示例 (4) 编写Javascript 代码 (5) 语句(Statements) (5) 语句块(Blocks) (6) 注释(Comments) (7) 表达式(Expressions) (8) 赋值和等于(Assignments and Equality) (9) Javascript常用运算符(Operators) (10) 算术运算符 (10) 逻辑运算符 (11) 赋值运算符 (12) Javascript 循环语句(Javascript Loop Statements) (12) 使用for 循环语句 (13) 使用for...in 循环语句 . (15) 使用while 和do...while 循环语句 (17) 使用break 和continue 语句 (20) Javascript写在哪里 (23) Javascript在之间 (23)

Javascript在之间 (24) Javascript放在外部文件里 (25) Javascript变量(Javascript Variables) (26) 什么是变量? (26) 变量的声明(Declaring Variables) (26) 变量的命名规则 (27) Javascript条件语句(Javascript Conditional Statements) (27) 单项条件结构(if条件语句) (28) 双向条件结构(if...else条件语句) (29) 多项条件结构(switch条件语句) (31) Javascript保留字(Javascript Reserved Words) (32) Javascript未来保留字(Javascript Future Reserved Words) (33) Javascript简介 Javascript简介

Javascript鼠标触发事件大全

Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发

JavaScript事件

我的记录(JavaScript事件)JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。 二、事件冒泡有什么作用 (1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】

控制台输出: keydown keypress keyup 2、浏览器的兼容性

(1)FireFox、Opera、Chrome 事件对应的函数有一个隐藏的变量e,表示发生事件。 e有一个属性e.which指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint? 1. 2. FireFox、Opera、Chrome中输入:a 输出:按键码:97 字符:a (2)IE IE不需要e变量,window.event表示发生事件。 window.event有一个属性window.event.keyCode指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint?

关于javascript事件

A 事件流(event flow ) 事件模型分为两种:冒泡型事件、捕获型事件。 冒泡型(dubbed bubbling )事件:指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。 捕获型(event capturing )事件:它与冒泡型事件相反,指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。 捕获型事件也被称作自顶向下(DOM层次)的事件模型。 由于IE 浏览器不支持捕获型事件,因此并没有被广泛应用。 B 事件监听 i > 通用监听方法 示例一:

给浏览器添加监听方法,分为两种:IE 中的监听方法、标准DOM 的监听方法。 ii > IE 中的监听方法 在IE 浏览器中,每个元素都有两个方法来处理事件的监听。分别是:attachEvent( )和detachEvent( )。 附加事件方法:[object].atta chEvent(“事件名”,方法名); 分离事件方法:[object].detachEvent(“事件名”,方法名); 如:o_p.detachEvent(“onclick”,click_A); 示例:

●使用这种方式可以为同一元素添加多个监听函数; ●在IE 浏览器中,函数的执行顺序与函数的添加顺序相反; ●在IE 浏览器中,虽然函数有先后执行顺序,但都会同时调用; iii > 标准DOM 的监听方法 在使用标准DOM 的浏览器中,每个元素也有两个方法来处理事件的监听。分别是:addEventListener( )和removeEventListener( )。

添加事件监听方法:[object].addEventListener(“事件名”,方法名,事件模型); 移除事件监听方法:[object].removeEventListener(“事件名”,方法名,事件模型); 注意: 这里的“事件名”不能带on ,如:click(如果是onclick 则错误!) “事件模型”为boolean 类型,通常设置为false ,即“冒泡型”事件。(如果是true 则为“捕获型”事件) 示例:

11讲_JavaScript事件分析

Company name WEB 前端开发技术 HTML JavaScript CSS WEB 前端开发技术 第11章JavaScript 事件分析 计算机科学与技术系

Web前端开发技术主要内容 计算机科学与技术系 ?掌握事件、事件类型的概念 ?掌握事件处理的机制 ?掌握事件名称与句柄的关系 ?学会编写各类的事件响应程序

计算机科学与技术系 Web前端开发技术11.1 事件编程 事件编程:让用户不仅能够浏览页面中的内容,而且还可以和页面元素进行交互。 事件-事件是可以被JavaScript侦测到的行为(ACTION)。 事件源Window Form Mouse key 事件 单击事件 双击事件 事件句柄 Onclick ondblclick 编写事件 处理代码

Web 前端开发技术事件驱动案例导入 计算机科学与技术系 事件处理 你好!这是一个简单事件处理程序!

计算机科学与技术系 Web 前端开发技术 11.1 事件编程(续) 1.网页访问中常见的事件 鼠标单击:例如单击button 、选中checkbo x 和radio 等元素;鼠标进入、悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table 的范围; 键盘按键:当按下按键或释放按键时;页面或图像载入:例如页面body 被加载时;在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容;确认表单:例如当准备提交表单的内容。 事件类型:1.鼠标事件2.键盘事件3.浏览器事件

Javascript事件

获取事件对象的全家 事件对象的获取很简单,很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的,Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定 view sourceprint? 1var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式。 1,第一种添加事件的方式,直接在html的属性中写JS代码 view sourceprint? 1

Div1 Element
大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事件对象?IE中很简单,因为event是作为全局对象的,所以直接使用event即可,如下 view sourceprint? 1
Div1 Element
点击该Div后,IE中会弹出'click'字符的信息框。说明事件对象获取到了,如果在 Opera/Safari/Chrome 中也测试了,会发现效果和IE一样,说明Opera/Safari/Chrome 中也支持IE方式( window.event )获取事件对象。 Firefox中会报错,提示:window.event is undefined,说明Firefox不支持IE方式获取事件对象而是以句柄的第一个参数传入的,文章开头意见提到了。 上面的用window.event 来获取事件对象,其实window可以省略的,就像使用alert而不是window.alert一样。如 view sourceprint? 1
Div1 Element
在IE/Opera/Safari/Chrome 中测试,和刚刚不会有什么区别。在Firefox中再测,会有个惊喜,你会发现居然弹出的是"click"信息框,而不是"undefined"。 两次测试区别仅仅一个用window.event.type,一个用event.type。这个问题下面详细讨论。

javascript的三种事件模型

事件使得客户端的 JavaScript 有机会被激活,并得以运行。在一个 Web 页面装载之后,运行脚本的唯一方式,就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来,简单的事件被实现为 JavaScript 的一部分;但是大多数最近出现的浏览器都实现了强壮的事件模型,使脚本可以更加智能地处理事件。现在的问题在于:为了支持各种浏览器,您必须和多个先进的事件模型做斗争,准确地说,是三个。 这三个事件模型分别和下面的文档对象模型(Document Object Model,即 DOM)三巨头结盟:Netscape Navigator 4 (NN4),Macintosh 和 Windows 系统的Internet Explorer 4 及其更新版本(IE4+),以及在 Safari 中得到实现的 W3C DOM。尽管这些模型之间有些地方存在一些本质的差别,但是在一些简易的JavaScript 的帮助下,它们都可以同时适用于同一个文档。本文主要着眼于相互冲突的事件模型中的两个关键方面: * 把一个事件和 HTML 元素绑定起来的方法。 * 在事件被触发后如何对之进行处理。 事件绑定的方法 事件绑定是指构造一个响应系统或者用户动作的 HTML 元素的过程。在不同的浏览器版本中,有不少于五种事件绑定技术。下面我们快速地介绍一下这些技术。 事件绑定方法I:绑定元素属性 最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。尽管HTML属性并不是大小写敏感的,人们还是定义了一个规则,规定事件类型的每一个“词”的首字母大写,比如 onClick 和 onMouseOver。这些属性也被称为事件处理器,因为它们指示了元素如何“处理”特定的事件类型。

Javascript教程--从入门到精通【完整版】

Javascript教程--从入门到精通【完整版】 (作者:未知,来源:互联网整理:Alone) JavaScript教程语言概况 Internet时代,造就了我们新的工作和生活方式,其互联性、开放性和共享信息的模式,打破了传统信息传播方式的重重壁垒,为我们带来了新的机遇。随着计算机和信息时代的到来,人类社会前进的脚步在逐渐加快,每一天都有新的事情发生,每一天都在创造着奇迹。随着Internet技术的突飞猛进,各行各业都在加入Internet的行业中来。无论从管理方面,还是从商业角度来看,Internet都可以带来无限生机。通过Internet,可以实现地区、集体乃至个人的连接,从而达到一种“统一的和谐”。那么怎样把自己的或公司的信息资源加入到WWW 服务器,是广大用户日益关心的问题。采用超链技术(超文本和超媒体技术)是实现这个目标最简单的、最快速的手段和途径。具体实现这种手段的支持环境,那就是HTML超文本标识语言。通过它们可制作所需的Web网页。 通过超文本(Hyper Text)和超媒体(Hyper Media)技术结合超链接(Hyper link)的链接功能将各种信息组织成网络结构(web),构成网络文档(Document),实现Internet上的“漫游”。通过HTML符号的描述就可以实现文字、表格、声音、图像、动画等多媒体信息的检索。 然而采用这种超链技术存在有一定的缺陷,那就是它只能提供一种静态的信息资源,缺少动态的客户端与服务器端的交互。虽然可通过CGI(Common Gateway Interface)通用网关接口实现一定的交互,但由于该方法编程较为复杂,因而在一段时间防碍了Internet技术的发展。而JavaScript的出现,无凝为Internet网上用户带来了一线生机。可以这样说,JavaScript的出现是时代的需求,是当今的信息时代造就了JavaScript。 JavaScript的出现,它可以使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交式的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息,并对客户操作进行反应的Web页面的取代。JavaScript脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱的欢迎。它是众多脚本语言中较为优秀的一种,它与WWW的结合有效地实现了网络计算和网络计算机的蓝图。无凝Java家族将占领Internet网络的主导地位。因此,尽快掌握JavaScript脚本语言编程方法是我国广大用户日益关心的。 一、什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点: 脚本编写语言 JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。 它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。 基于对象的语言 JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 简单性 JavaScript的简单性主要体现在:首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。 安全性 JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 动态性 JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是

javaScript,页面自动加载事件详解

javaScript,页面自动加载事件详解 篇一:javascript 动态添加事件 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几 种方法,我们也常常混合使用。 方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属性,简单,很好理解, 但是: IE 不支持, IE 并不是不支持 setAttribute 这个函数, 而是不支持用 setAttribute 设 置某些属性, 包括对象属性、 集合属性、 事件属性, 也就是说用 setAttribute 设置 style、 onclick、 onmouseover 这些属性在 IE 中是行不通的。 LEO:在 IE6 下尝试成功 方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); } 同样也可写在一起 obj.addEventListener("click", function(){alert("测试");}, false); 注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。 顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true, 则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中 其下面的任何 EventTargets 之前指派给已注册的 EventListener。 正在通过树向上 bubbling 的 事件将不触发指定的使用捕获的 EventListener。 1 / 11

JavaScript事件处理

JavaScript事件处理,使用框架和Cookies 2008-01-04 20:53 事件处理 事件处理概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情。 指定事件处理程序 指定事件处理程序有三种方法: 方法一直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是: <标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]> 让我们来看看例子: 这样的定义标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出“再见”。 方法二编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。方法是: 例: 方法三在 JavaScript 中说明。方法: <事件主角 - 对象>.<事件> = <事件处理程序>;

javascript自定义事件模型及实现

在js世界里,事件可谓是个大课题,在此讨论的自定义事件也只是冰山一角。 试想这样的场景,页面中有A、B两个模块,B模块显示的时候,会同时隐藏A模块。按照这个流程的代码,经常会是这样的代码: 这样代码的问题在于太过于流程化,B模块内置了对A模块的依赖,耦合度高。如果要让B模块独处到另外的页面工作,就会找不到A模块而无法使用。又或者需求变化,B模块显示的时候,同时显示一个新的C模块,那又要去B模块里添加代码,最后B模块只会依赖越来越多,越陷越深,无法自拔啊。 为了让模块间解耦,通常,会把逻辑代码抽离到一个回调函数中,通过配置去指挥代码所需要的处理。

以回调的方式,实现一个原始的类似事件的订阅方式,可以把对外部依赖的代码逻辑通过配置的方式移出模块内,实现上也很简单,可以不依赖于任何机制。 但与此同时,也存在着一定的局限性,比如只能在初始化的时候配置;不能多次添加“监听”;每个需要事件回调的方法都需要添加一个回调事件。 自定义事件 如果以“写分享”这么一个事件来比喻,最开始的那种流程式的方式就好比,分享者每周写了一篇分享,并通过邮件A、B、C等N各人,分享者需要自己维护每个同学的邮件地址。要是有一天,

哪个同事离职了,还要从收件人里把他删掉,分享者跟邮件联系人耦合度很高。 而到了采用回调式的方式,就好比分享者发分享时不再需要记得有哪些人,分享者有一个收件人的群组,每次写完就往这个群组里发,不必再关心群组里有哪些人和那些人的去向。由外部去维护这么一个联系人群组。 但对于时刻想偷懒的人来说,这个还不是最方便了,于是,有了一种新的方式,写好的分享,发表到博客中,有兴趣看分享的人去加关注。于是,就有了下面的故事:

通过代码实例跟我学JavaScript ——JavaScript事件编程(第1部分)

1.1通过代码实例跟我学JavaScript ——JavaScript事件编程(第1部分)1.1.1JavaScript事件编程 1、HTML标签中的事件 (1)什么是事件? 事件可能是用户在页面中某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键,事件也还可能是Web 浏览器中发生的事情,比如说某个Web 页面加载完成,或者是用户滚动窗口或改变窗口大小、点击一个超链接等。 因此,用户对网页中的标签的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统的行为统称为事件。 (2)不同的标签有不同类型的事件 在Macromedia Dreamweaver 工具中可以利用动态帮助获得某个HTML标签的事件定义,如下图所示。 (3)事件编程 可以为不同的标签添加相关的事件响应的程序代码,称为事件编程从而可以监听特定事件的发生,并对相关的事件做出响应。 2、事件处理程序的引入——为某个标签绑定事件响应函数 如何使一段JavaScript程序和事件发生联系?一般采用“on事件名”的方式对事件处理

程序进行引入,同时它也是JavaScript规定的对应事件处理程序的句柄(Event Handler)的名字。例如onClick、onFocus、onSubmit等等。可以采用下面的方式来引入事件:(1)第一种引入方式 事件处理程序的句柄名以属性名的形式在HTML文本中某些适当的标记中出现,而对应的属性值是由网页编写者提供的JavaScript程序段(或事件处理函数名),从而实现将HTML 标签与JavaScript语言相对应起来。该方式适用于对事件处理程序的静态设置。 ; (2)第二种引入方式 将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性,该方式适用于对事件处理程序的动态设置。 document.forms[0].userAge.onchange= isNumberInput; 注意:事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标签记的属性名的松散要求是一致的。 (3)对同一个事件追加多个不同的事件响应函数 前面的两种事件绑定关联的方式,都不支持追加多事件监听响应的功能要求。例如,原本某个标签元素对象已经有了onchange事件监听了,如果还想再追加一个onchange事件监听响应函数,则无法达到。 此时,可以用attachEvent ()(针对IE浏览器)或者addEventListener(针对DOM标准的浏览器)。下面为代码示例; if (target.addEventListener) { target.addEventListener(eventTypeString , eventHandlerFunction, useCapture); } else if (target.attachEvent) { target.attachEvent(eventTypeString , eventHandlerFunction); } else{ window.alert("不能正确地进行事件绑定!"); }

JavaScript初级基础教程

JavaScript初级基础教程 一:语句、执行顺序、词法结构、标识符、关键字、变量、常量、alert语句和console控制台。 JavaScript执行顺序: step 1. 读入第一个代码块。 step 2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5。 step 3. 对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。 step 4. 执行代码段,有错则报错(比如变量未定义)。 step 5. 如果还有下一个代码段,则读入下一个代码段,重复step2。 step6. 结束。 javascript语法结构: 一:字符集 1、区分大小写 JavaScript是区分大小写的语言 所有的标识符(identifier)都必须采取一致的大小写形式 但是Html并不区分大小写(尽管Xhtml区分) 2、空格、换行符和格式控制符 JS会忽略程序中的标识(token)之间的空格。多数情况下也会忽略换行符 除了可以识别普通的空格符(\u0020),JS也可以识别如下这些表示空格的字符 *水平制表符(\u0009) *垂直制表符(\u000B) *换页符(\u000C) *不中断空白(\u00A *字节序标记(\ufeff)

JS将如下字符识别为行为结束符 三:注释 //单行 /*...*/多行 四:直接量 直接量(literal):就是程序中直接使用的数据值。 eg:12//数字 1.2//小数 “hello world” //字符串文本 ’hi‘ //字符串 ture //布尔值 false //另一个布尔值 /javascript/gi //正则表达式直接量(用做模式匹配) null //空 五:标识符和保留字 在js中标识符用来对变量和函数进行命名,或者用作Js代码中的某些循环语句中的跳转位置的标记。 JS标识符必须以字母、下划线(_)或美元符($开始) 六:类型、值和变量 js数据类型分为两类:原始类型(primitive type)和对象类型(object type)。 primitive type:原始类型包括数字、字符串和布尔值 js中有两个特殊的原始值:null和underfined(未定义) 除了上述以外就是对象了:对象(object)是属性(property)的集合 ***js除了数组(Array)类和函数(Function)类以外 还定义了其他的三种有用的类:日期(Date)类定义了代表日期的对象 正则(RegExp)类定义了表示正则表达式(y一种强大的模式匹配工具)的对象。 错误(error)类定义了那些表示Js程序中运行时错误和语法错误的对象。

相关主题
文本预览
相关文档 最新文档