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

本文详细介绍,在HTML文档(也称为HTML页面或网页)中使用JavaScript脚本代码的多种方法。

假设要用JS生成字符☆直角三角形

html 嵌入javascript 说明如何在html中嵌入javascript?_javascript

实现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.jsa2.js,一个网页文件,文件名为:使用多个JS文件示例.html,放在同一文件夹中:

html 嵌入javascript 说明如何在html中嵌入javascript?_HTML_02

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>

运行之,效果如下图:

html 嵌入javascript 说明如何在html中嵌入javascript?_html_03

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>