1. 在HTML中编写JavaScript脚本代码:
1)script元素可以在文档中包含一段JavaScript脚本代码。并且该元素可以在HTML中出现任意次,可以位于head元素中,也可以位于body元素中。
script元素的语法格式:
<script defer=”defer” type=”内容类型” language=”语言标识符” src=”文档的URL地址” charset=”字符集”>
客户端JavaScript脚本代码
</script>
defer=”defer”: 该属性通知浏览器,这段脚本不会产生任何文档内容,例如javascript代码document.write方法不会起作用。浏览器遇到这样代码将会忽略掉,并继续执行后面代码。属性值只能是defer,与属性名相同。也允许不定义属性值,而不使用属性名。
<script defer type=”text/javascript” >
客户端JavaScript脚本代码
</script>
type=”内容类型” :指定元素内容使用的脚本语言,属性值是W3C标准定义的内容类型,例如text/tcl、text/javascript、text/vbscript。没有默认值,如果使用JavaScript就必须指定属性type为text/javascript。如上例
language=”语言标识符” :指定元素内容使用的脚本语言,它的值是这个语言的标识符,并且可以指定语言的版本,例如:
<script defer type=”text/javascript” language=”javascript1.5”>
客户端JavaScript脚本代码
</script>
大多数情况下不需要指定版本号
src=”文档的URL地址” :保存了脚本代码的外部文件的位置,如下代码:
<script defer type=”text/javascript” language=”javascript1.5” src=”../myFunc.js”>
客户端JavaScript脚本代码
</script>
脚本被保存到myFunc.js文件中,然后被引入到当前文档。
注意:脚本可以在script元素中,也可以在外部文件中,如果src属性设定了url值,用户浏览器必须从文件中加载脚本,忽略script元素中的内容。没有被设定url值,则必须把元素内容作为脚本来解释。
大多数情况下都不使用元素内部的脚本。如:
<script defer type=”text/javascript” src=”../myFunc.js”></script>
charset=”字符集”:用于指定src属性指定的外部脚本代码所使用的字符编码,而不是script元素内的脚本代码。
2) 第二种定义方式:
将脚本代码定义在事件属性值中,事件包括的属性如下:
οnlοad=”script” 浏览器完成页面或所有的框架集后触发,在body和frameset中都可以使用
οnunlοad=”script”浏览器从一个视窗或一个框架集中删除一个文档时出发,在body和frameset中使用
οnclick=”script”定位设备(鼠标等)在一个元素上单击是触发
ondbclick=”script”定位设备(鼠标等)在一个元素上双击是触发
οnmοusedοwn=”script”定位设备(鼠标等)在一个元素上按下时触发
οnmοuseup=”script”定位设备(鼠标等)在一个元素上释放时触发
οnmοuseοver=”script”定位设备(鼠标等)在一个元素上划过时触发
οnmοusemοve=”script” 定位设备(鼠标等)在一个元素上移动时触发
οnmοuseοut=”script”定位设备(鼠标等)在一个元素上移出时触发
οnfοcus=”script”一个元素获取焦点时触发
οnblur=”script”失去焦点时触发
οnkeypress=”script”一个按元素上按键,并放开时触发
οnkeydοwn=”script”一个键在一个元素上按下时触发
οnkeyup=”script”一个键在一个元素上弹起是触发
οnsubmit=”script”提交一个表单时触发
οnreset=”script”重置一个表单时触发
οnselect=”script”文本框中选择了文本时触发
οnchange=”script”控件失去焦点,并且内容被修改的情况下就触发
这些内建事件都可以触发一个脚本,无论何时只要事件被触发,这个脚本就会被执行,脚本的语法要看具体的使用的是什么脚本语言而定。
例如userName是一个必须输入文本的的文本框,用户不行在这个文本框中输入数据时,onblur事件调用一个JavaScirpt函数确定userName中内容是否是一个可被接受的值。
<inputname=”userName” οnblur=”javascript:validUserName(this.value)”>
使用JavaScript的例子:
<inputname=”num” οnchange=”javascript: if(!checkNum(this.value, 1, 10))
{this.focus(); this.select();} else {thanks()}” value=”0”>
2. 使用noscript元素:
noscript元素允许创作者在脚本无法运行时,提供其他的内容。Noscript元素的内容只能在可以被识别脚本的用户浏览器上被浏览器渲染,仅能在如下情况下渲染:
用户浏览器被设置为不能执行脚本
Script元素出现在一个文件较前部分,用户浏览器不支持这个script元素调用的脚本语言。
例如:
<scripttype=”text/javascript”>
客户端脚本代码
</script>
<noscript>
<p>浏览器不支持javascirpt脚本,请访问<a href=”http://www.baidu.com”>这个网页</a>
</noscript>
3. 注意事项:
默认脚本语言,使用meta元素声明,如:
<metahttp-equiv=”Content-Script-Type” content=”type”>
Type值则为text/tcl、text/javascript、text/vbscript等值
在内建事件中定义的JavaScript脚本,必须使用“javascript:”前缀。
如下例子,默认的脚本语言声明为text/tcl, 文档中包含了两个script元素:一个位于头部,使用vbscript脚本,另一个位于body部分,使用javascirpt脚本:
<!doctypehtml public “-//w3c//dtdhtml 4.01 // en” “http://www.w3.org/tr/html4/strict.dtd”>
<html>
<head>
<title>包含了多种脚本语言代码</title>
<metahttp-equiv=”content-script-type” content=”text/tcl”>
<scripttype = “text/vbscript” scr=”http://someplace.com/progs/vbcalc”></script>
</head>
<body>
<scripttype=”text/javascript”>
客户端JavaScript脚本代码
</script>
</body>
</html>
4. 在脚本中引用HTML元素:
JavaScript可以引用HTML文档中的HTML元素,根据HTML元素分配的名称指向元素。元素的ID属性和name属性都可以表示该元素,因此通过两者都可以引用元素。
在Javascript脚本代码中,不能出现”</”,因为HTML依靠<></>开始标签和结束标签来识别脚本代码。一旦出现上述的符号,将会解析错误。
5. JavaScript中的注释:
JavaScript中的注释方法灵活,可以使用双斜线<//>或者使用斜线加星号的方式</* */>与C语言的注释类似。
也可以使用HTML的注释方式,例如:<!-- 注释 -->。注意<! 和 –中间不能有空格,否则解释错误。