


在 HTML 中使用JavaScript
JavaScript能以两种方式嵌入HTML:
- 作为语句和函数使用时,用 SCRIPT 标记
- 作为事件处理程序使用时,用 HTML 标记
SCRIPT 标记
使用SCRIPT标记把脚本嵌入在HTML中,格式如舷:
<script> <BR>_ JavaScript 语句<BR></script>
LANGUAGE属性作为可选项,用于指定脚本语言,用法如下:
是<script>的结束标志,之间可以包括任意多的JavaScript语句.</script>
JavaScript是区分大小写档
例1 一个简单的脚本
That's all, folks.
例1中的页面显示:
Hello net.That's all folks.
代码隐匿
在不识别JavaScript的旧版本浏览器上,可以把脚本放置在注释域中,这样JavaScript代码就不会被显示出来. 把整个脚本用HTML的注释标记括起来:
定义和调用函数
在页(page)被装载后,被置于SCRIPT标记之间的脚本被分析.函数被存贮起来,但并未执行. 函数由页内的事件调用执行.
正确理解定义函数与调用函数之间的区别是很重要的,定义函数仅仅是命名了这个函数和说明当此函数被调用时做什么,而调用函数才利用传来的参数真正执行指定的动作.
例2 一个带有函数和注释的脚本
All done.
例2中的页面显示:
We passed 5 to the function.
The function returned 25.
All done.
HEAD标记
通常,应该在文档的HEAD部分定义页(page)的所有函数,因为HEAD被首先装载,这就保证了用户做任何可能调用函数的动作前,函数已全部装载.
例3 有两个函数的脚本.
<script><BR><!--- hide script from old browsers <BR>function bar() {<BR> document.write("<HR ALIGN='LEFT' WIDTH=25%>")<BR>}<BR>function output(head,level,string) {<BR> document.write("<H" + level + ">" + head + "" + level + "><p>" + string)<BR>}<BR>// end hiding from old browsers --><BR></script>
<script><BR><!--- hide script from old browers<BR>document.write (bar(),output("Make Me Big",3,"Make me ordinary."))<BR>// end hiding from old browsers --><BR></script>
Thanks.
例3的结果:
Make Me Big
Make me ordinary.undefinedundefined
Thanks.
引号
用单引号(')把字符串常量括起来,用双引号把属性的值括起来,这样脚本能够把二者区分开. 在上个例子中, 函数bar中,常量left被放在属性值.再举一个例子:
编写事件处理程序脚本(Scripting Event Handlers)
Navigator上的JavaScript应用程序大部分是事件驱动的,事件常常是用户动作的结果. 例如: 按动按钮是一个事件, 结果是把focus赋与一个form元素.Navigator能够识别一组特定的事件. 你可以定义event handlers脚本,这些脚本在事件发生时会被自动执行.
事件处理程序是作为HTML标记的属性放在文档中的,把要执行JavaScript代码赋给HTML标记. 语法如下:
其中, TAG是HTML的某一标记, eventHandler是事件处理程序的名称.
例如, 假定已创建了一个名为compute的JavaScript函数,你可以把对该函数的调用赋给这个按钮的onClick事件处理程序,从而实现当用户按此按钮时,Navigator执行函数compute.
你可以把任何JavaScript语句放在onClick后的引号内,多个语句之间用分号隔开.这些语句只在当用户按动此按钮时才被执行.
一般说来,把自己的事件处理程序定义成函数是一种好习惯,因为:
- 这使你的代码模块化--- 同一个函数可以作为多个不同item的事件处理程序.
- 这使你的代码容易读懂.
请注意,在此例中,使用this.form来引用当前form, 关键字this用来引用当前对象,此处即指button对象,于是this.form结构被用来引用包含此button的form. 上例中onClick事件处理程序是以this.form(当前form)为参数调用compute()函数.
能用于HTML标记中的事件如下:
- Focus, Blur, Change事件: 文本域,文本区和选择
- Click事件: 按钮,无线按钮,核对框,递交按钮,复位按钮,链接
- Select事件: 文本域,文本区
- MouseOver事件: 链接
如果一事件可用在HTML标记里, 则可以给它定义事件处理程序.通常事件处理程序的名称是以on开头,后跟事件名称. 如, Focus的处理程序名为onFocus.
许多对象有模拟事件的方法(method).如,button有一个名为click的方法能模拟按钮被按下. 注意: 模拟事件的方法不能触发事件处理程序.如方法click并不能触发事件处理程序onClick. 但是,你可以直接调用事件处理程序(如,在脚本中,显式调用onClick).
事件 | 何时发生 | 事件处理程序 |
blur | 用户将input focus从form元素上移去 | onBlur |
click | 用户在form元素或连接上接动鼠标 | onClick |
change | 用户改变了文本,文本区或选择元素的值 | onChange |
focus | 用户把input focus赋给form元素 | onFocus |
load | 用户把页装入Navigato | onLoad |
mouseover | 用户把鼠标光标从link或anchor上移过 | onMouseOve |
select | 用户选择了form元素的输入域 | onSelect |
submit | 用户提交了一个form | onSubmit |
unload | 用户退出此页 | onUnload |
例4 有一个form和一个event handler属性的脚本
例4中的页面显示
技巧与技术
本节介绍几种有用的编写脚本的技术
更新页(Updating Pages)
在Navigator上JavaScript是按从页的顶部到下的顺序生成结果. 一旦有些东西被重新设计(format),你只能靠重新装载此页的办法来改变,目前,你只能更新整 个页, 而不能只更新某一部分. 但是你可以单独更新frame中的"sub-window".
打印
目前, 还不能把用JavaScript产生的输出打印出来. 例如,若你的页上有如下内容,
This is some text
<script>document.write("<P>And some generated text")</script>
当打印时,你只会打出"This is some text", 即使你能在屏幕上看到两行.
使用引号
一定要区分双引号和单引号,因为在HTML中事件处理程序必须用双引号 括起来,参数用单引号,例如:
onClick="window.open('stmtsov.html', 'newWin','toolbar=no,directories=no')">
另外,你可以用前置反斜线(\)对引号进行转义.
定义函数
在HTML页的HEAD部分定义全部函数是一个好习惯.这样,在显示任何内容之前, 所有函数均已定义.否则在页还在装载时,用户可能做一些事情触发事件处理程序, 调用了未定义函数,将导致错误.
创建数组
数组是一个有序的值的集合,利用数组名和索引来引用.例如,一个名为emp的数组存放着雇员的名字,并按雇员编号索引.于是,emp[1]是1号雇员,emp[2]是2号雇员, 依次类推.
JavaScript中没有明确的数组数据类型,但由于数组与对象有类似之处(见 JavaScript Object Model),在JavaScript中,很容易创建数组.你可以定义一个 数组对象类型如下:
function MakeArray(n) {
this.length=n;
for (var i=1; i this[i] = 0
return this
}
}
这样就定义了一个数组,第一个属性length表示数组中元素个数(索引为0),其余各属性初始值为0,索引为大于等于1的整数.
When you call new with the array name and the number of array elements, an array is created.
emp=new makeArray(20);
This statement creates an array named emp with 20 elements and an initial value of 0.
Populating an Array
Operate arrays by assigning values to array elements. For example:
emp[1]="Casey Jones"
emp[2]="PHil Lesh"
emp[3]="August West"
Wait.
You can also create an array of objects. For example, define an object type named Employees:
function Employee(empno,name,dept) {
this.empo= empno;
this.name= name;
this.dept= dept;
}
The following statement creates an array of this object:
emp=new MakeArray(3)
emp[1]=new Employee(1,"Casey Jones", "Engineering")
emp[2]=new Employee(2,"Phil Lesh", "Music")
emp[3]=new Employee(3,"August",""Admin)
At this time, use the function show_props (defined in JavaScript Object Model ) to display the objects in the array, as follows:
for (var n=1; n document.write(show_props(emp[n],"emp") "");
}

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Zend Studio 13.0.1
Powerful PHP integrated development environment

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Notepad++7.3.1
Easy-to-use and free code editor

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
