在HTML文档中使用JavaScript的方法详解

学习&实践爱好者

已于 2022-10-14 10:54:18 修改

阅读量1.7w

点赞数 9

分类专栏： HTML5与CSS3 JavaScrip技术前端开发文章标签： javascript html 前端

于 2022-01-03 19:22:55 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/122291073

版权

JavaScrip技术同时被 3 个专栏收录

136 篇文章 25 订阅

订阅专栏

HTML5与CSS3

87 篇文章 15 订阅

订阅专栏

前端开发

72 篇文章 4 订阅

订阅专栏

在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>标签之间，格式如下：

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脚本代码文件）格式如下：

写入位置：通常写在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>

</head>

或者，把它放在文件的底部：

</body>

</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>

附录

JavaScript简介与实验基础_cnds123的专栏-CSDN博客_javascript实验