Grundlegende Kenntnisse für WEB-Programmierer über das <script>-Tag-js-Tutorial-php.cn

-Tag" >

Wie Sie wahrscheinlich wissen, wird das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag verwendet, um anzugeben, welches JavaScript auf einer Webseite ausgeführt werden soll. Das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag kann JavaScript-Code direkt enthalten oder auf eine externe JavaScript-URL verweisen.

3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags werden in der Reihenfolge ausgeführt, in der sie erscheinen Der folgende Code veranschaulicht dies intuitiv:

var x = 3; alert(x); // Will alert '3'; Bei der Verwendung externer Linkressourcen gibt es keine Ladereihenfolge. Sehr intuitiv , aber immer noch wahr:

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

Wenn Sie externe Links und Inline-Links mischen. Für JavaScript gilt die gleiche Regel gilt.

Das bedeutet, dass Ihre Seite deutlich langsamer geladen wird, wenn Ihre Website über langsame Skripte verfügt, die früher auf der Seite geladen werden. Dies bedeutet auch, dass später geladene Skripte von zuerst geladenen Skripten abhängen können.

Ein Seitenelement wird erst gerendert, wenn alle Skripte davor geladen wurden. Das bedeutet, dass Sie alle möglichen verrückten Dinge auf Ihren Webseiten tun können, bevor sie geladen werden, solange Sie sich nicht um die dadurch verursachten Leistungsprobleme kümmern.

Diese Regel gilt jedoch nicht, wenn Sie das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag über Methoden wie document.appendChild zum DOM hinzufügen, nachdem die Webseite geladen wurde. Diese Tags führen die Skripte in der Reihenfolge aus, in der die Verarbeitung der Browseranforderung abgeschlossen ist, und die Ladereihenfolge ist nicht mehr garantiert.

Wenn ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag ausgeführt wird, sind die HTML-Elemente davor zugänglich (die danach jedoch noch nicht) // document.head is available // document.body is not! // document.head is available // document.body is available Sie können sich den HTML-Parser Tag für Tag vorstellen Greifen Sie mit Tags auf das Dokument zu und führen Sie beim Parsen des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags das darin enthaltene JavaScript aus. Dies bedeutet, dass im aktuellen JavaScript nur auf DOM-Knoten zugegriffen werden kann, deren Start-Tag vor dem aktuellen Skript erscheint (über querySelectorALl , jQuery usw.).

Eine nützliche Konsequenz ist, dass document.head fast immer in jedem auf einer Webseite geschriebenen JavaScript verfügbar ist. document.body ist nur verfügbar, wenn Sie das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag innerhalb oder nach dem 6c04bd5ca3fcae76e30b72ad730ca86d -Tag schreiben.

async und defer HTML5 fügt zwei Tools zur Steuerung der Ausführung von Skripten hinzu.

async bedeutet „Mach es nicht gleich“. Genauer gesagt heißt es: Es macht mir nichts aus, wenn Sie dieses Skript ausführen, nachdem die gesamte Seite geladen wurde, und es nach anderen Skripten einfügen. Dies ist für statistische Analyseskripte sehr nützlich, da kein anderer Code auf der Seite von der Ausführung des Statistikskripts abhängig sein muss. Das Definieren von Variablen oder Funktionen, die für eine Seite erforderlich sind, innerhalb des async -Codes ist nicht möglich, da Sie nicht wissen können, wann der async -Code tatsächlich ausgeführt wird. defer bedeutet „Warten Sie, bis die Seite analysiert wurde, bevor Sie sie ausführen“. Dies entspricht in etwa dem Binden Ihres Skripts an das DOMContentedLoaded -Ereignis oder der Verwendung von jQuery.ready . Wenn dieser Code ausgeführt wird, sind alle Elemente im DOM verfügbar. Im Gegensatz zu async werden alle Skripte mit defer in der Reihenfolge ausgeführt, in der sie auf der HTML-Seite erscheinen. Dies wird lediglich verschoben, bis die HTML-Seite analysiert ist. type Attribute Historisch gesehen (seit der Geburt von Netsacpe 2) spielte es keine Rolle, ob type=text/javascript auf dem 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag geschrieben wurde. Wenn Sie über type einen Nicht-JavaScript-MIME-Typ festlegen, wird dieser vom Browser nicht ausgeführt. Das ist cool, wenn Sie Ihre eigene Sprache definieren möchten:

make a social network but for cats Das tatsächliche Ausführungsergebnis dieses Codes liegt bei Ihnen, zum Beispiel:

var codez = document.querySelectorAll('script[type="text/emerald"]'); for (var i=0; i Definieren Sie die runEmeraldCode -Funktion, um Sie zu verlassen Jungs als Übung.

Wenn Sie besondere Anforderungen haben, können Sie auch den Standardwert type für das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag auf der Seite überschreiben, indem Sie ein meta -Tag übergeben:

oder eine Anfrage zurückgibt ein Content-Script-Type -Header.

Eine kurze Geschichte seltsamer Skriptsprachen im Web können Sie in diesem Artikel lesen, der detailliertere Informationen zur Verwendung von type enthält.

Attribut integrity verwenden? Das Attribut integrity ist Teil der neuen Spezifikation für die Integrität von Unterressourcen. Es ermöglicht Ihnen, einen Hash für den Inhalt bereitzustellen, den die Skriptdatei enthalten wird. Dadurch kann verhindert werden, dass Inhalte während der Übertragung verloren gehen oder böswillig verändert werden. Diese Angabe ist auch bei Verwendung von SSL sinnvoll, da es sich bei der Ressource, die Sie laden möchten, manchmal um eine externe Ressource handelt, über die Sie keine Kontrolle haben, z. B. code.jquery.com .

Wenn Sie es verwenden möchten, müssen Sie einen Hash-Typ und einen Hash-Wert in das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag einfügen, getrennt durch einen Bindestrich. Es sieht ungefähr so aus:

我还没有看到有人用了它，然而如果你知道有哪个网站用了，可以在下面评论。

还可以用 crossorigin ！ 虽然还没有完全被标准化，但是一些浏览器支持 crossorigin 属性。基本的想法是，浏览器会限制对非同源资源的使用（同源资源是指相同的协议、hostname 以及端口，例如： `http://google.com:80）。

这是为了防止你，例如，向你的竞争对手网站发请求，注销你的用户在对方网站的账号（这不好！）。这个问题牵扯到 3f1c4e4b6b16bbbd69b2ee476dc4f83a标记虽然有点意外，但如果实现了 crossorigin ，你只要加一个 handler 到 window.onerror 事件上，就能在看控制台上看到一些警告信息，提示你引入了一个不该引入的外站脚本。在安全的浏览器下， 除非 你指定 crossorigin 属性，不然加载外站脚本不会出错。

crossorgin 不是一个神奇的安全手段，它所做的只是让浏览器启用正常的 CORS 访问检查，发起一个 OPTIONS 请求并检查 Access-Control header。

document.currentScript IE 不支持的一个新奇的东西是个叫做 document.currentScript 的属性。它指向当前正在被执行的脚本。如果你想要从你嵌入的 3f1c4e4b6b16bbbd69b2ee476dc4f83a标记中拿一些属性来用，它会非常有用。我个人非常高兴它还没有被完全支持，否则它会让我们在一部分工作中渴望嵌入更复杂的代码。

onafterscriptexecute ?! 这个超没用，因为它只被 Firefox 支持。使用 onbeforescriptexecute 能让你绑定事件到每一个脚本的执行前和执行后，这很酷。

如果你对这个感到好奇，你可以研究下。event 对象包含一个被执行的脚本的引用，而 before 事件能通过 perventDefault() 取消脚本的执行。

for / event 到今天， HTML5 规范包含了一个很少见的，以前是 IE 特殊的方法来绑一段代码到一个事件。你应该能向下面这样让一段代码不被执行直到页面加载完成：

alert("Hi!") 这段代码在 Chrome 或者 Firefox 下不能实际工作，但是它依然能够在 IE 下工作。

NOSCRIPT 如同你父母一样，很难相信 JavaScript 也曾经年少过。曾经有过这样一段时间你不能确定是否一个浏览器支持 JavaScript。更糟的是，你甚至不能确定那个浏览器能识别 script 标记。而如果一个浏览器不能识别标记，它应该会将它渲染成一个 inline 元素，意味着你所有 JavaScript 代码会被作为文本渲染在页面上！

幸运地是，规范已经能足够有效地避免这个情况发生，你只需要将你的代码包在 HTML 注释里，那些不支持脚本的浏览器会把下面的文本当做注释：

<!-- to hide script contents from old browsers

// You would probably be pasting a ‘rollover’ script // you got from hotscripts.net here

// end hiding contents from old browsers --> 当然，像很多事情一样，XHTML将这变得更糟。XML用特殊的方法来转义可能包含结束标记的内容，这是 CDATA 的来历：

//<![CDATA[

// Is this the right incantation to get this to pass // the XHTML validator?

//]]> 像上面这样写，你的代码可以是一个规范的 XHTML。它对实际功能没有什么影响，但是它对你作为一个 Web 开发者的荣誉也许很重要（现在这个时代，谁还用 XHTML 啊——译者注）。

浏览器也包含一个有用的方法来让你把那些不支持 JavaScript 人赶走，通过 noscript 标记。 2b0b25ff593c5b6c03403dd6234ffb2c 标记里的内容只有浏览器不支持脚本的时候才会被渲染出来：

Please use Internet Explorer 5.5 or above. exploitInternetExplorer0Day(); 如果你有敏锐的观察力，你会意识到 noscript 不接受 type 参数，这使得那些使用别的 type 类型的脚本的页面上如果出现 noscript 会显得有点歧义。 noscript 实际行为在各个浏览器下有所不同。

3f1c4e4b6b16bbbd69b2ee476dc4f83a标记和 innerHTML 通过 DOM 动态添加到页面上的 3f1c4e4b6b16bbbd69b2ee476dc4f83a标记会被浏览器执行：

var myScript = document.createElement('script'); myScript.textContent = 'alert("✋")'; document.head.appendChild(myScript); 通过 innerHTML 动态添加到页面上的 3f1c4e4b6b16bbbd69b2ee476dc4f83a标记则不会被执行：

document.head.innerHTML += ' alert("✋") '; 为什么会是这样的原因不是很确定，但是它解决了一个小问题：“是否有一个办法让一个 3f1c4e4b6b16bbbd69b2ee476dc4f83a标记在 Chrome 代码检查器中显示但不实际执行？”你可以利用这个来对你的同事做恶作剧。