javascript学习随笔（编写浏览器脚本
NavigatorScripting）
blur事件在 HTML 中使⽤JavaScript
JavaScript能以两种⽅式嵌⼊HTML:
作为语句和函数使⽤时,⽤ SCRIPT 标记
作为事件处理程序使⽤时,⽤ HTML 标记
SCRIPT 标记
使⽤SCRIPT标记把脚本嵌⼊在HTML中，格式如舷:
<SCRIPT>
_ JavaScript 语句
</SCRIPT>
LANGUAGE属性作为可选项,⽤于指定脚本语⾔,⽤法如下:
<SCRIPT LANGUAGE="JavaScript">
_JavaScript 语句
</SCRIPT>
</SCRIPT>是<SCRIPT>的结束标志，之间可以包括任意多的JavaScript语句.
JavaScript是区分⼤⼩写档
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello net.")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>
例1中的页⾯显⽰:
Hello net.That's all folks.
代码隐匿
在不识别JavaScript的旧版本浏览器上，可以把脚本放置在注释域中，这样JavaScript代码就不会被显⽰出来. 把整个脚本⽤HTML的注释标记括起来:
<!-- 开始隐匿的脚本内容，不被旧版本浏览器显⽰
// 隐匿在此结束. -->
定义和调⽤函数
在页(page)被装载后，被置于SCRIPT标记之间的脚本被分析.函数被存贮起来，但并未执⾏. 函数由页内的事件调⽤执⾏.
正确理解定义函数与调⽤函数之间的区别是很重要的，定义函数仅仅是命名了这个函数和说明当此函数被调⽤时做什么,⽽调⽤函数才利⽤传来的参数真正执⾏指定的动作.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- 开始隐匿的脚本内容，不被旧版本浏览器显⽰
function square(i) {
document.write("The call passed ",i, " to the function.","<BR>")
return i*i
}
document.write("The function returned ",square(5),".")
// 隐匿在此结束. -->
</SCRIPT>
</HEAD>
<BODY>
<BR>
All done.
</BODY>
例2中的页⾯显⽰:
We passed 5 to the function.
The function returned 25.
All done.
HEAD标记
通常，应该在⽂档的HEAD部分定义页(page)的所有函数，因为HEAD被⾸先装载，这就保证了⽤户做任何可能调⽤函数的动作前，函数已全部装载.
<HEAD>
<SCRIPT>
<!--- hide script from old browsers
function bar() {
document.write("<HR ALIGN='LEFT' WIDTH=25%>")
}
function output(head,level,string) {
document.write("<H" + level + ">" + head + "</H" + level + "><p>" + string)
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!--- hide script from old browers
document.write (bar(),output("Make Me Big",3,"Make me ordinary."))
// end hiding from old browsers -->
</SCRIPT>
<P>
Thanks.
</BODY>
例3的结果:
Make Me Big
Make me ordinary.undefinedundefined
Thanks.
引号
⽤单引号(')把字符串常量括起来,⽤双引号把属性的值括起来，这样脚本能够把⼆者区分开. 在上个例⼦中, 函数bar中，常量left被
放在属性值.再举⼀个例⼦:
<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">
编写事件处理程序脚本(Scripting Event Handlers)
Navigator上的JavaScript应⽤程序⼤部分是事件驱动的，事件常常是⽤户动作的结果. 例如: 按动按钮是⼀个事件, 结果是把focus赋与⼀个form元素.Navigator能够识别⼀组特定的事件. 你可以定义event handlers脚本，这些脚本在事件发⽣时会被⾃动执⾏.
事件处理程序是作为HTML标记的属性放在⽂档中的，把要执⾏JavaScript代码赋给HTML标记. 语法如下:
<TAG eventHandler="JavaScript Code">
其中, TAG是HTML的某⼀标记, eventHandler是事件处理程序的名称.
例如, 假定已创建了⼀个名为compute的JavaScript函数，你可以把对该函数的调⽤赋给这个按钮的onClick事件处理程序，从⽽实现当⽤户按此按钮时,Navigator执⾏函数compute.
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
你可以把任何JavaScript语句放在onClick后的引号内，多个语句之间⽤分号隔开.这些语句只在当⽤户按动此按钮时才被执⾏.
⼀般说来，把⾃⼰的事件处理程序定义成函数是⼀种好习惯，因为:
这使你的代码模块化--- 同⼀个函数可以作为多个不同item的事件处理程序.
这使你的代码容易读懂.
请注意，在此例中，使⽤this.form来引⽤当前form, 关键字this⽤来引⽤当前对象，此处即指button对象，于是this.form结构被⽤来引⽤包含此button的form. 上例中onClick事件处理程序是以this.form(当前form)为参数调⽤compute()函数.
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
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form) {
if (confirm("Are you sure?"))
sult.value=pr.value)
else
alert("Please come back again")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<BR>
</FORM>
</BODY>
例4中的页⾯显⽰
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
function checkNum(str,min,max) {
if (str=="")
alert("Enter a number in the field, please.")
return false
}
for (var i=0; i<str.length;i++) {
var ch=str.substring(i,i+1)
if (ch < "0" || ch > "9") {
alert("Try a number , please.")
return false
}
}
var val=parseInt(str, 10)
if ((val <min ) || (val> max)) {
alert("Try a number from 1 to 10.")
return false
}
return true
}
function thanks() {
alert("Thank you for your input.")
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="ex5">
Enter a small number :
<INPUT NAME="num"
onChange="if (!checkNum(this.valu,1,10))
{this.focus();this.select; else thanks()}">
</FORM>
</BODY>
例5中的页⾯显⽰
Enter a number in the field and then click your mouse anywhere OUTSIDE of the field. Depending on what you enter,you will be prompted to enter another number,or thanked.
技巧与技术
本节介绍⼏种有⽤的编写脚本的技术
更新页(Updating Pages)
在Navigator上JavaScript是按从页的顶部到下的顺序⽣成结果. ⼀旦有些东西被重新设计(format)，你只能靠重新装载此页的办法来改变,⽬前，你只能更新整个页, ⽽不能只更新某⼀部分. 但是你可以单独更新frame中的"sub-window".
打印
⽬前, 还不能把⽤JavaScript产⽣的输出打印出来. 例如，若你的页上有如下内容,
<P>This is some text
<SCRIPT>document.write("<P>And some generated text")</SCRIPT>
当打印时，你只会打出"This is some text", 即使你能在屏幕上看到两⾏.
使⽤引号
⼀定要区分双引号和单引号，因为在HTML中事件处理程序必须⽤双引号括起来，参数⽤单引号，例如:
<FORM NAME="myform">
<INPUT TYPE="button" NAME="button1" VALUE="Open Sesame!"
onClick="window.open('stmtsov.html', 'newWin','toolbar=no,directories=no')">
</FORM>
另外，你可以⽤前置反斜线(\)对引号进⾏转义.
定义函数
在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 <= n; i++)
this[i] = 0
return this
}
}
这样就定义了⼀个数组，第⼀个属性length表⽰数组中元素个数(索引为0)，其余各属性初始值为0，索引为⼤于等于1的整数.
调⽤new时带上数组名和数组元素的个数，就创建了⼀个数组.
emp=new makeArray(20);
该语句创建了⼀个名为emp的数组，有20个元素，初始值为0.
操作数组(Populating an Array)
通过给数组元素赋值的办法来操作数组.如:
emp[1]="Casey Jones"
emp[2]="PHil Lesh"
emp[3]="August West"
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论