Connaissances essentielles pour les programmeurs WEB sur la balise <script>-js tutoriel-php.cn

" >

Comme vous le savez probablement, la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a est utilisée pour spécifier quel JavaScript exécuter sur une page Web. La balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a peut contenir du code JavaScript directement ou pointer vers une URL externe JavaScript.

Les balises3f1c4e4b6b16bbbd69b2ee476dc4f83a sont exécutées dans l'ordre dans lequel elles apparaissent Le code suivant illustre cela de manière intuitive :

var x = 3; alert(x); // Will alert '3'; Il n'y a pas d'ordre de chargement lors de l'utilisation de ressources de liens externes Tellement intuitif , mais toujours vrai :

Recommandations d'apprentissage associées : Tutoriel vidéo javascript

Si vous mélangez liens externes et inline Pour JavaScript, même règle s'applique.

Cela signifie que si votre site contient des scripts lents qui se chargent plus tôt dans la page, le chargement de votre page sera nettement plus lent. Cela signifie également que les scripts chargés ultérieurement peuvent dépendre des scripts chargés plus tôt.

Un élément de page ne sera rendu que lorsque tous les scripts qui le précèdent auront été chargés. Cela signifie que vous pouvez faire toutes sortes de choses folles sur vos pages Web avant qu'elles ne se chargent, tant que vous ne vous souciez pas des problèmes de performances que cela provoque.

Cependant, cette règle ne s'applique pas lorsque vous ajoutez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a au DOM via des méthodes telles que document.appendChild après le chargement de la page Web. Ces balises exécuteront les scripts dans l'ordre dans lequel le traitement des requêtes du navigateur est terminé, et l'ordre de chargement n'est plus garanti.

Lorsqu'une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a est exécutée, les éléments HTML qui la précèdent sont accessibles (mais ceux qui la suivent ne le sont pas encore) // document.head is available // document.body is not! // document.head is available // document.body is available Vous pouvez imaginer l'analyseur HTML balise par balise Accédez à la balise de document et, lorsqu'elle analyse la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, exécutez le code JavaScript qu'elle contient. Cela signifie que seuls les nœuds DOM dont la balise de début apparaît avant le script actuel sont accessibles dans le JavaScript actuel (via querySelectorALl , jQuery, etc.).

Un corollaire utile est que document.head est presque toujours disponible dans n'importe quel JavaScript écrit sur une page Web. document.body n'est disponible que si vous écrivez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a à l'intérieur ou après la balise 6c04bd5ca3fcae76e30b72ad730ca86d .

async et defer HTML5 ajoute deux outils pour contrôler l'exécution des scripts.

async signifie "ne le fais pas tout de suite". Plus précisément, il dit : Cela ne me dérange pas si vous exécutez ce script après le chargement de la page entière, en le plaçant après d'autres scripts. Ceci est très utile pour les scripts d'analyse statistique car aucun autre code sur la page ne doit dépendre de l'exécution du script de statistiques. Définir des variables ou des fonctions requises par une page dans le code async n'est pas possible car vous n'avez aucun moyen de savoir quand le code async sera réellement exécuté. defer signifie "attendre que la page soit analysée avant de l'exécuter". Cela équivaut à peu près à lier votre script à l'événement DOMContentedLoaded ou à utiliser jQuery.ready . Lorsque ce code est exécuté, tous les éléments du DOM sont disponibles. Contrairement à async , tous les scripts avec defer seront exécutés dans l'ordre dans lequel ils apparaissent dans la page HTML, il est simplement reporté jusqu'à ce que la page HTML soit analysée. type Attributs Historiquement (depuis la naissance de Netsacpe 2), peu importe que type=text/javascript soit écrit sur la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Si vous définissez un type MIME non JavaScript via type , le navigateur ne l'exécutera pas. C'est cool quand vous voulez définir votre propre langage :

make a social network but for cats Le résultat réel de l'exécution de ce code dépend de vous, par exemple :

var codez = document.querySelectorAll('script[type="text/emerald"]'); for (var i=0; i Définissez la fonction runEmeraldCode pour vous quitter les gars comme exercice.

Si vous avez des besoins particuliers, vous pouvez également remplacer le type par défaut de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a sur la page en passant une balise meta :

ou une demande de retour. un en-tête Content-Script-Type .

Vous pouvez lire un bref historique des langages de script étranges sur le Web dans cet article pour plus de détails sur l'utilisation de type .

Utiliser l'attribut integrity ? L'attribut integrity fait partie de la nouvelle spécification pour l'intégrité des sous-ressources. Il vous permet de fournir un hachage pour le contenu que le fichier script contiendra. Cela signifie que le contenu peut être empêché d'être perdu ou modifié de manière malveillante pendant la transmission. Cette spécification a du sens même lorsque vous utilisez SSL, car parfois la ressource que vous souhaitez charger est une ressource hors site sur laquelle vous n'avez aucun contrôle, comme code.jquery.com .

Si vous choisissez de l'utiliser, vous devez inclure un type de hachage et une valeur de hachage dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, séparés par un trait d'union. Cela ressemble à ceci :

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

还可以用 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 代码检查器中显示但不实际执行？”你可以利用这个来对你的同事做恶作剧。