JavaScript学习(二)

使用<script>元素的方式:

①在<script>元素中直接嵌入JavaScript代码,且为<script>指定type属性

<script type="text/javascript">

    function sayHi() {

        alert("Hi!");

    }

</script>

在解释器对<script>元素内部的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。

②包含外部JavaScript文件

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

在解析外部JavaScirpt文件(包括下载文件)时,页面的处理也会暂时停止。

如果是在XHTML文档中,也可以省略前面示例代码中的结束的</script>标签。

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

但是不能在HTML文档使用这种语法,得不到某些浏览器(尤其是IE)的正确解析。

带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。

src属性可以是指向当前HTML页面所在域之外的某个域的URL,如:

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

 代码解析顺序:只要不存在defer和async属性,浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。

标签位置:一般都把全部JavaScript引用放在<body>元素中页面的内容后面。

延迟脚本:

defer属性:表明脚本在执行时不会影响页面的构造。脚本会延迟到整个页面都解析完毕后再运行。在<script>元素中设置defer属性,就相当于告诉浏览器立即下载,但延迟执行。遇到</html>标签后再执行。在实际中,延迟脚本不一定会按顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。HTML5忽略此属性。

<!DOCTYPE html>

<html>

   <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>

</body>

</html>

async属性:只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行。因此,确保两者间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容,为此,建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。

<!DOCTYPE html>

<html>

   <title>Example HTML Page</title>

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

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

</head>

<body>

</body>

</html>

<noscript>元素

 用以在不支持JavaScript的浏览器中显示替代的内容。

①浏览器不支持脚本;

②浏览器支持脚本,但脚本被禁用;

符合上述任何一个条件,浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下,浏览器不会呈现<noscript>中的内容。

评论

© 完全感觉Dreamer | Powered by LOFTER