在HTML文档中使用JavaScript的方法详解
本文详解在HTML文档（也称为HTML页面或网页）中使用JavaScript脚本代码的多种方式。
在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>
附录
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
9
0- 0
已为社区贡献45条内容
所有评论(0)