WEBプログラマー向けの<script>タグに関する必須知識-jsチュートリアル-php.cn

タグに関する必須知識" >

ご存知のとおり、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは、Web ページ上で実行する JavaScript を指定するために使用されます。 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグには、JavaScript コードを直接含めることも、JavaScript の外部 URL を指すこともできます。

3f1c4e4b6b16bbbd69b2ee476dc4f83aタグは出現順に実行されます 次のコードはこれを直観的に示しています:

var x = 3; alert(x); // Will alert '3'; 外部リンクを使用する場合、読み込み順序はありません。リソース 非常に直感的ですが、それでも真実です:

関連する学習の推奨事項: JavaScript ビデオ チュートリアル

外部リンクとインライン リンクを混合する場合 JavaScript の場合、同じルールが適用されます。

これは、Web サイトにページの前半で読み込まれる遅いスクリプトがある場合、ページの読み込みが大幅に遅くなるということを意味します。これは、後でロードされたスクリプトが、以前にロードされたスクリプトに依存する可能性があることも意味します。

ページ要素は、それ以前のすべてのスクリプトが読み込まれるまでレンダリングされません。これは、Web ページが読み込まれる前に、それによって引き起こされるパフォーマンスの問題を気にしない限り、あらゆる種類のクレイジーな操作を Web ページ上で行うことができることを意味します。

ただし、このルールは、Web ページが読み込まれた後に document.appendChild などのメソッドを使用して DOM に 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを追加する場合には適用されません。これらのタグは、ブラウザーのリクエスト処理が完了した順序でスクリプトを実行しますが、読み込み順序は保証されません。

3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが実行されると、その前の HTML 要素にアクセスできます (ただし、その後の要素はまだ利用できません) // document.head is available // document.body is not! // document.head is available // document.body is available HTML パーサーが 1 つのタグを処理すると想像できます。一度にドキュメントにタグ付けしてアクセスし、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを解析すると、その中の JavaScript を実行します。これは、現在のスクリプトの前に開始タグが表示される DOM ノードのみが、現在の JavaScript でアクセスできることを意味します ( querySelectorALl 、jQuery などを介して)。

有益な結果として、 document.head は、Web ページ上に記述された JavaScript でほぼ常に使用できるということになります。 document.body は、 6c04bd5ca3fcae76e30b72ad730ca86d タグ内または後に 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを記述した場合にのみ使用できます。

async と defer HTML5 には、スクリプトの実行を制御する 2 つのツールが追加されています。

async は、「すぐには実行しない」という意味です。より具体的に言うと、ページ全体が読み込まれた後でこのスクリプトを他のスクリプトの後に実行しても問題ありません。ページ上の他のコードが統計スクリプトの実行に依存する必要がないため、これは統計分析スクリプトに非常に役立ちます。 async コードが実際にいつ実行されるかを知る方法がないため、ページに必要な変数や関数を async コードで定義することはできません。 defer は、「実行する前にページが解析されるまで待機する」ことを意味します。これは、スクリプトを DOMContentedLoaded イベントにバインドすること、または jQuery.ready を使用することとほぼ同じです。このコードが実行されると、DOM 内のすべての要素が使用可能になります。 async とは異なり、 defer を持つすべてのスクリプトは HTML ページに表示される順序で実行され、HTML ページが解析されるまで延期されるだけです。 type 属性 歴史的に (Netsacpe 2 の誕生以来)、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの text/ に type= を記述するかどうかjavascript は関係ありません。 type を介して非 JavaScript MIME タイプを設定すると、ブラウザはそれを実行しません。これは、独自の言語を定義したい場合に便利です:

make a social network but for cats このコードの実際の実行結果はあなた次第です。たとえば:

var codez = document.querySelectorAll('script[type="text/emerald"]'); for (var i=0; i Definition runEmeraldCode 関数は演習として残されています。

特別なニーズがある場合は、 meta タグを渡すことで、ページ上の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグのデフォルトの type をオーバーライドすることもできます。

または、リクエストは Content-Script-Type ヘッダーを返します。

この記事では、Web 上の奇妙なスクリプト言語の簡単な歴史を読んで、 type の使用法について詳しく知ることができます。

integrity 属性を使用しますか? integrity 属性は、サブリソースの整合性に関する新しい仕様の一部です。これにより、スクリプト ファイルに含まれるコンテンツのハッシュを提供できます。これは、送信中にコンテンツが失われたり、悪意を持って変更されたりするのを防ぐことができることを意味します。 SSL が使用されている場合でも、ロードしたいリソースが、 code.jquery.com など、制御できないオフサイト リソースである場合があるため、この仕様は依然として意味があります。

これを使用する場合は、ハッシュ タイプとハッシュ値をハイフンで区切って 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに含める必要があります。次のようになります:

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

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