• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

1.3 JavaScript在HTML中的引用方式

学习了HTML入门教程之后,我们都知道HTML页面是静态的,要实现某些动态效果,就要引入JavaScript。本节课就来给大家讲解一下怎样在HTML页面中引入JavaScript。这节课不涉及太多编程方面的知识,先给大家说一下引用方式,这样大家至少都知道在哪编程,然后再在后面章节跟大家促膝长谈编程方面的知识。

JavaScript在HTML的引用共有4种:

  • (1)页头引入(head标签内);
  • (2)页中引入(body标签内);
  • (3)元素事件中引入(标签属性中引入);
  • (4)引入外部JS文件;

By the way,这4种引入方式都very very 常用,大家一定要好好理解一下喔。

一、页头引入JS

在页头引入JS,指的就是在<head></head>标签内编写JavaScript。

语法:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //这里编写JavaScript程序
    </script>
</head>
<body>
</body>
</html>

说明:

<script type="text/javascript">……</script>格式是固定的,JavaScript代码必须在<script></script>标签内编写,并且必须设置type属性值为“text/javascript”。

<script type="text/javascript">……</script>这句语句要记忆的喔,别到时候写个JavaScript程序连这句都要回来这里复制代码过去呀。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        document.write("绿叶学习网JavaScript入门教程");
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下:

JavaScript在HTML中的引用方式

分析:

“document.write()”表示在页面输入某一个内容,大家记住这个语句,后面经常用喔。

二、页中引入JS

在页中引入JS,指的就是在<body></body>标签内编写JavaScript。

语法:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        //这里编写JavaScript程序
    </script>
</body>
</html>

说明:

body标签内引入JavaScript跟在head标签引入JavaScript语法格式类似,在此不再重复讲解。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        document.write("绿叶学习网JavaScript入门教程");
    </script>
</body>
</html>

在浏览器预览效果如下:

页中引入JavaScript

三、元素事件中引入JS

在元素事件中引入JS,就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数,这个属性指的是元素的“事件属性”。

举例1:(在元素事件属性中直接编写JavaScript)

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input type="button" onClick="alert('绿叶学习网')" value="按钮"/>
</body>
</html>

在浏览器预览效果如下(点击按钮效果):

元素事件中引入JavaScript

举例2:(元素事件属性调用JavaScript函数)

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function alertMessage()
        {
            alert("绿叶学习网");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMessage()" value="按钮"/>
</body>
</html>

在浏览器预览效果如下(点击按钮效果):

四、引入外部JS文件

引入外部JS文件,说白了就是把JavaScript程序存放在一个后缀名为.js的文件中,然后使用script标签来引用。此外,引用外部JS文件的script标签可以放在head标签内,也可以放在body标签中。

语法:

<script src="js/index.js" type="text/javascript"></script>

可能大家刚刚开始很难去深入理解并记忆这4种JS引用方式,不过没关系,以后大家忘了再回来这里看看,编程这种东西一回生二回熟,写多了自然就会记得。

总结

1、JavaScript在HTML的引用共有4种:

(1)页头引入(head标签内);

(2)页中引入(body标签内);

(3)元素事件中引入(标签属性中引入);

(4)引入外部JS文件;

这四种引用方式都非常重要,没有哪一种不重要的。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部