运行jsp项目一片空白第4节应用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属性中：

运行jsp项目一片空白第4节应用Javascript Vue.js

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

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