在HTML文档中使用JavaScript的方法详解
本文详细介绍,在HTML文档(也称为HTML页面或网页)中使用JavaScript脚本代码的多种方法。
假设要用JS生成字符☆直角三角形
实现JavaScript代码为:
function RightTriangle(){
for(var j=1;j<6;j++)
{
for(var i=1;i<=j;i++)
{
document.write("☆");
}
document.write("<br/>");
}
}
依此为例,演示如何在HTML文档中嵌入JavaScript的方法
1.内嵌,放置在<script>和</script>标签之间,格式如下:
<Script>
JavaScript 语句
</Script>
例子如下【保存文件名为:用JS生成字符☆直角三角形本(内嵌).html】:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>内嵌</title>
<script >
function RightTriangle(){
for(var j=1;j<6;j++)
{
for(var i=1;i<=j;i++)
{
document.write("☆");
}
document.write("<br/>");
}
}
RightTriangle(); //调用函数
</script>
</head>
<body>
</body>
</html>
2.放置在有<script>标签的src属性指定的外部文件中,即调用JavaScript文件方法,
也叫外联式(在HTML网页文件中通过script标签的 src 属性链接外部的JavaScript脚本代码文件)格式如下:
<script src = "JavaScript脚本文件"></script>
写入位置:通常写在head标签之间或者写在结束body标签之前。
将纯JavaScript的语句另外保存在一个文件名后缀为js的文件中,再调用之。这种方法需要注意被调用文件的路径。
使用src属性时,<script src = "JavaScript脚本文件"> </script>标签之间的任何内容都会被忽略。
例子如下
使用两个文件:网页文件和它调用的JavaScript文件,在此放在同一文件夹(目录)中,否者需要指明JavaScript文件的路径。
(1)网页文件【文件名为:用JS生成字符☆直角三角形本(调用JS文件).html】源码如下:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>调用JS文件</title>
<script src="TriangleFile.js">
alert('呵呵'); //使用src属性时,此处内容被忽略
</script>
<script>
RightTriangle(); //调用TriangleFile2.js中的函数
</script>
</head>
<body>
</body>
</html>
(2)JavaScript文件【文件名为:TriangleFile.js】源码如下:
function RightTriangle(){
for(var j=1;j<6;j++)
{
for(var i=1;i<=j;i++)
{
document.write("☆");
}
document.write("<br/>");
}
}
【特别说明:html页面中允许使用多个js文件,引入的js文件位置和单个文件一样:
可以将所有js文件放在Head部分:
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
或者,把它放在文件的底部:
</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>
下面给出一个具体的例子,有两个JS文件,文件名为:a1.js和a2.js,一个网页文件,文件名为:使用多个JS文件示例.html,放在同一文件夹中:
a1.js文件源码如下:
function getSum(num1,num2){ //定义求和函数getSum
sum = num1 + num2;
return sum;
}
a2.js文件源码如下:
function getMultiply(num1,num2){ //定义求积函数getMultiply
product = num1 * num2;
return product;
}
使用多个JS文件示例.html文件源码如下:
<html>
<head>
<title>调用多个JS文件</title>
<script src = "a1.js"></script>
<script src = "a2.js"></script>
<script>
var sum = getSum(10,20); //调用a1.js中的getSum()
var Multiply = getMultiply(10,20); //调用a2.js中的getMultiply()
//alert("和为:"+sum);
document.write("和为:" + sum);
document.write("<br>");
document.write("积为:" + Multiply);
</script>
</head>
<body>
</body>
</html>
运行之,效果如下图:
】
3.放置自HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定它。HTML事件属性一般以on开头。
格式如下:
<标签名 事件名 = "JavaScript代码或函数"></标签名>
例子如下【用JS生成字符☆直角三角形本(在HTML事件中).html】:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>在HTML事件中</title>
<script >
window.onload=function RightTriangle(){
for(var j=1;j<6;j++)
{
for(var i=1;i<=j;i++)
{
document.write("☆");
}
document.write("<br/>");
}
}
</script>
</head>
<body>
</body>
</html>
4.放在一个URL里,这个URL使用特殊的协议”javascript“协议,这种方式很少使用。
这种情况,常会用在两种属性身上:href和onclick等事件上,可用于触发要执行的操作——JavaScript函数(包括内置函数、自定义函数)或对象固有的方法(即对象的函数)。
格式如下:
javascript: 要执行的操作
其中javascript后面要紧跟英文冒号,两边带英文引号。
例子如下【用JS生成字符☆直角三角形本(在URL中).html】:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>在URL中</title>
<script >
function RightTriangle(){
for(var j=1;j<6;j++)
{
for(var i=1;i<=j;i++)
{
document.write("☆");
}
document.write("<br/>");
}
}
</script>
</head>
<body onload="javascript:RightTriangle()">
</body>
</html>