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

深夜课堂：JavaScript在HTML中的使用

2016-04-24 07:13 369 查看

1.HTML中的script元素

现上栗子：

<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>

其实，script元素有6个属性：

async：表示立即下载脚本，但是不妨碍页面中的其它操作。

charset：通过src属性指定的代码的字符集。很少使用。

defer：延迟到文档被完全解析和显示之后执行。

language：已经废弃不用…

src：外部文件地址。

type：表示编写代码使用的脚本语言的类型。如果没有写，默认是text/javascript。

需要注意的是，在代码中不要出现

</script>

，否则会报错：

<script type="text/javascript">
function sayScript(){
alert("</script>");
}
</script>

应该写成：

<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script>

这样就不会遇到问题了。

将js代码放在外部文件中时，页面引入js则需要：

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

浏览器会按先后顺序依次解析这些嵌入的文件（不包含defer、async属性时）。

标签的位置：

第一种，可以放在head标签里：

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!--       -->
</body>
</html>

但是，这样意味着所有的js代码都被加载解析完成后，才开始加载页面，在解析js代码的过程中，页面将会是一片空白的。为了解决这个问题：

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!--       -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

这样，在解析js代码之前，页面就可以先呈现出来。

defer属性：

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

加入了该属性，则脚本会被延迟到整个页面解析完成后执行。相当于告诉浏览器：立即下载，但是延迟执行。规定两个defer文件执行的顺序是按照它们的先后次序的。（但是现实中，两个defer文件则不一定会按顺序执行，因此最好只包含一个defer文件）

另外，defer属性只适用于外部文件。

async，异步脚本：

与defer相同，async只适用于外部js文件。

与defer不同的是，两个async文件执行的顺序不一定。

async属性的作用是不让页面等待js文件的下载和执行，去异步的加载其它内容，因此，最好不要在async的js文件中修改DOM对象。

另外，建议js文件最好都可以写成外部文件的形式，如下优点是人们一直强调的：

1、可维护性好。

2、可缓存，这样就加快了页面的加载速度。

3、适应XHTML。

还有一点是我个人比较喜欢外部嵌入js文件的原因：在外部嵌入js可以在浏览器的控制台方便的进行调试，然而在jsp中写入js文件则不方便使用断点调试的功能。

noscript元素：

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持JavaScript </p>
</noscript>
</body>
</html>

当浏览器不支持JavaScript的时候，使用noscript元素可是为用户提供提示，使页面平稳的退化。

入上面这个例子：当浏览器不支持脚本，或者脚本被禁用的时候，p元素中的内容就会被现实出来了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航