如果使用JavaScript，在哪里使用JavaScript？这节课我们来研究这些知识点。

在哪里使用：

在<script>中嵌入，向HTML页面中插入Javascript的主要方法；

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

在外部的js文件中：

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

在HTML元素的事件属性中：

<p onmouseover="document.getElementById('mydiv').style.display='block';" 
onmouseout="document.getElementById('mydiv').style.display='none';">Web前端开发</p>
<div id="mydiv" style="width: 200px;height:50px;border:solid 1px; display: none;">零点网络-王唯</div>

在超接的href属性中：

<script>
function show(){
    var msg = window.confirm("你确定打开吗？");
    if(msg){
        alert("打开了");
        window.location = "https://www.zeronetwork.cn/";
    }
}
</script>
<p><a href="javascript:show()">零点网络</a></p>

推荐使用外部文件：

在HTML中嵌入Javascript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含Javascript代码；不过，并不存在必须使用外部文件的硬性规定，但使用外部文件很如下优点：

a.可维护性：在HTML页面不同的位置插入Javascript代码，体现不了代码分享的思想；如果使用外部文件，维护起来也非常方便；而且开发人员可以在不触及HTML的情况下，集中精力编写Javascript代码；

b.可缓存：浏览器能够根据具体的设置缓存链接的所有外部Javascript文件；也就是说，如果有两个页面都使用同一个文件，那么这个文件只需要*载下**一次；因此，最终结果就是能够加快页面加载的速度；

如何触发：

代码从上向下解析，会自动触发；事件触发；

如何输出：

网页输出：document.write(“str”);

弹出框：alert(“str”)；

控制台输出：console.log(“str”);

代码位置：

按照传统的做法，所有<script>元素都应该放在页面的<head>元素中；这种做法的目的就是把所有外部文件（包括CSS和Javascript文件）的引用都放在想上同的地方；可是，在文档的<head>元素中包含所有JavaScript，意味着必须等到全部Javascript代码都被*载下**、解析和执行完成以后，才能开始呈现页面的内容；对于那些需要很多Javascript代码的页面来说，会导致浏览器在呈现页面时出现明显的延迟，而延迟期间，浏览器窗口中将是一片空白；为了避免这个问题，Web应用程序一般都会把全部Javascript引用放在<body>页面内容的后面，这样，在解析包含的Javascript代码之前，页面的内容就完全呈现在浏览器中，而用户也会感到页面打开的速度加快了；

注：如果load事件的话，可以放到任何位置；

<script>元素：

HTML5为<script>定义了6个属性：

async：可选，异步，表示立即*载下**脚本，但不应妨碍页面中的其他操作，比如*载下**其他资源或等待加载其他脚本，只对外部脚本文件有效；

defer：可选，表示脚本可以延迟到文档完全被解析和显示之后再执行；只对外部脚本文件有效；

charset：可选，表达通过src属性指定的代码的字符集；由于大多数浏览器会忽略它的值，因此这个属性很少使用；

language：已废弃，于表示编写代码使用的脚本语言，如：Javascript、Javascript1.2或VBScript；大多数浏览器会忽略这个属性值，因此没有必要再使用了；

src：可选，表示包含要执行代码的外部文件；

type：必选，可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）；MIME 类型包括两部分：media type 和 subtype，如：对于JS，MIME 类型是 "text/javascript"；虽然text/javascript和text/ecmascript都已经不被推荐使用，但人们一直以来使用的都还是text/javascript；

常用的有：

text/javascript (默认)

text/ecmascript

application/ecmascript

application/javascript

text/vbscript

考虑到约定俗成和最大限度的浏览器兼容，目前type属性的值依旧还是text/javascript；不过，这个属性并不是必需的，如果没有指定这个属性，是其默认值仍为text/javascript。

注：在嵌入代码时，不能在代码中的任何地方出现</script>字符串，如：alert(“</script>”);会产生错误，因为按解析嵌入式代码的规则，当浏览器遇到字符串</script>时，就会认为那是结束的</script>标签；可以通过转义字符“\”解决，如：alert("<\/script>");

如果要通过<script>元素来包含外部Javascript文件，src属性就是必须的；该属性指向一个外部的Javascript的链接，如：

与解析嵌入式Javascript代码一样，在解析外部Javascript文件（包括*载下**该文件）时，页面的处理也会暂时停止。

按照惯例，外部Javascript文件带有js扩展名；但这个扩展名不是必需的，因为浏览器不会检查包含Javascript文件的扩展名；这样一来，使用JSP、PHP或者其他服务器端语言动态生成Javascript代码也就成为了可能；但是，服务器通常还是需要看扩展名决定为响应应用哪种MIME类型；如果不使用js扩展名，请确保服务器返回正确的MIME类型；

注：在使用src引用外部Javascript文件的<script>中，不能包含嵌入式的代码；如果包含了，则只会*载下**并执行外部脚本文件，嵌入的代*会码**被忽略；

注：使用src可以包含来自外部域的Javascript文件；这一点即让<script>元素倍显强大，又让它备受争议；在这一点上，<script>与<img>元素非常相似，如引用一个在线的jQuery库等；使用外域的Javascript文件也可以正常加载和解析，就像这些代码位于自身页面中一样；但是，使用这种方式，要小心，如果遇到了怀有恶意的程序员，那他们随时都可能替换该文件中的代码；因此，使用不同域的代码，那么那个域的所有者值得依赖。

注：无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析；换句话说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析等。

异步延迟：

1.延迟脚本：

HTML4.01为<script>定义了defer属性，该属性表明脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完毕后再运行；如：

说明：以上的js文件会被延迟到</html>标签后执行；HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行；但在现实场景中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本，并且放在页面底部是最好的选择。

defer属性只适用于外部脚本文件，这一点在HTML5中已经明确规定了，因此支持HTML5的会忽略在嵌入式脚本中设置的defer属性；

2.异步脚本：

HTML5为<script>元素定义了async属性，其目的是不让页面等待脚本*载下**和执行，从而异步加载页面其他内容，该属性与defer属性类似，都用于改变处理脚本的行为；同defer一样，async只适用于外部脚本文件，并告诉浏览器立即*载下**文件；但与defer不一样的是，async的脚本并不保证按照指定它们的先后顺序执行，如：

说明：第二个脚本有可能先与第一个脚本文件之前执行；因此，确保两者之间互不依靠非常重要。

注：异步加载的脚本不要在加载期间修改DOM；

注：异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

<noscript>元素：

如：浏览器不支持脚本或者浏览器支持，但脚本被禁用；其一般放置在body内；如：

<noscript><p>不支持JS</p></noscript>

javascript第三章,javascript第四章

Web前端开发之JavaScript-零点程序员-王唯

javascript第3章 (javascript入门知识点4)