跟我学JavaScript--1.HTML调用JavaScript

最新推荐文章于 2024-06-10 20:53:57 发布

Junezm

最新推荐文章于 2024-06-10 20:53:57 发布

阅读量1.3k

点赞数 1

分类专栏：跟我学JavaScript 文章标签： javascript html web

本文链接：https://blog.csdn.net/Junezm/article/details/51295128

版权

跟我学JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一讲：HTML调用JavaScript

相信开始学JavaScript的同学都已经有了HTML和CSS的基础。如果没学，建议回头去学习。

1.1 <script>元素

JS（对JavaScript的简称，以下都用JS代替）插入HTML的主要方法就是使用<script>标签。它有5个属性：

（1）type（language）：脚本语言的内容类型（同调用CSS的type=“text/css”类似），type="text/javascript"；

（2）src ：导入外部的JS文件,src="example.js"；

（3）charset：用来设置script元素包含的脚本的字符编码，默认是utf-8编码（只针对外部脚本）；

（4）defer：设置脚本延迟执行（只针对外部脚本）；

（5）async：在加载HTML文件的同时异步加载脚本（只针对外部脚本）。

1.2 嵌入<script>的方式

（1）直接在页面嵌入JS代码：可以在head和body标签中，位置的不同只会影响加载脚本的时间，通常可以忽略。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript脚本语言</title>
	<script type="text/javascript">    //在head标签中插入
		function sayHi{
			alert("Hi");
		}
	</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>

</head>
<body>
    <script type="text/javascript">     //在body中插入
		function sayHi{
			alert("Hi");
		}
    </script>
</body>
</html>

（2）在head标签中添加外部JS文件：注意外部文件以 .js后缀结尾，在JS文件中去掉<script>标签直接写函数。

html文件

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>
    <script type="text/javascript" src="example.js"></script>  //在head标签插入JS文件
</head>
<body>
   
</body>
</html>

//JS文件 example.js
function sayHi(){
	alert("Hi");
}

1.3 <noscript>标签

早期的浏览器都不支持JS，<noscript>标签就是在不支持JS的浏览器中显示替代的内容

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>
    <script type="text/javascript" src="example.js"></script>  //在head标签插入JS文件
</head>
<body>
   <noscript>
   	 <p>本页面需要浏览器支持(启用)JavaScript.</p>  //支持JS的浏览器永远不会显示
   </noscript>
</body>
</html>

注：不必把所有的JS写到一个<script>标签中，如果想区分JS里面函数，可以加入多个<script>标签，但为了以后维护的方便，建议都采用外部添加JS文件，可以创建多个标签添加多个JS文件。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>
    <script type="text/javascript" src="example01.js"></script>  //在head标签插入多个JS文件
    <script type="text/javascript" src="example02.js"></script>
    <script type="text/javascript" src="example03.js"></script>
</head>
<body>
   
</body>
</html>