您的位置：首页 > Web前端 > JavaScript

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

2016-05-02 09:12 411 查看
第一讲：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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript html web
相关文章推荐
新的分享
章节导航