ホームページ > ウェブフロントエンド > htmlチュートリアル > JavaScriptについてHTMLの

JavaScript を Web ページに組み込む場合、Web の中核言語である HTML を関与させる必要があります。 JavaScript が最初に開発されたとき、Netscape が解決しなければならなかった重要な問題は、他のブラウザでのページのレンダリングに影響を与えずに、JavaScript を HTML ページと共存させる方法でした。試行錯誤と議論を経て、最終決定は、統一スクリプトのサポートを Web に追加することでした。 Web の初期の頃からの慣例の多くは保持されており、HTML 仕様に正式に組み込まれています。

<script> 要素<h3 style="font-family:Tahoma,Arial,'Microsoft Yahei'; font-weight:500; line-height:1.1; color:rgb(51,51,51); margin-top:20px; margin-bottom:10px; font-size:24px"></h3> HTML ページに JavaScript を挿入する主な方法は、<script> 要素を使用することです。この要素は Netscape によって作成され、Netscape Navigator2 で最初に実装されました。その後、この要素は公式の HTML 仕様に追加されました。 HTML4.01 では、<scripth> に対して次の 6 つの <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px">属性<a href="http://www.php.cn/wiki/169.html" target="_blank"> が定義されています。 </a><br></p> <ul class=" list-paddingleft-2" style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"> <li>非同期: オプション。スクリプトをすぐにダウンロードする必要があるが、他のリソースのダウンロードや他のスクリプトがロードされるのを待つなど、ページ上の他の操作を妨げないことを示します。外部スクリプトに対してのみ有効です。 <p style="margin-top:0px; margin-bottom:10px"></p> </li> <li>文字セット: オプション。 src 属性で指定されたコードの<p style="margin-top:0px; margin-bottom:10px">文字セット<a href="http://www.php.cn/code/225.html" target="_blank">を表します。ほとんどのブラウザはその値を無視するため、この属性はほとんど使用されません。 </a></p> </li> <li>延期: オプション。ドキュメントが完全に解析されて表示されるまで、スクリプトの実行を遅らせることができることを示します。外部スクリプトに対してのみ有効です。 <p style="margin-top:0px; margin-bottom:10px"></p> </li> <li>言語: 非推奨になりました。 <p style="margin-top:0px; margin-bottom:10px"></p> </li> <li>src: オプション。実行されるコードを含む外部ファイルを表します。 <p style="margin-top:0px; margin-bottom:10px"></p> </li> <li>タイプ: オプション。コードの記述に使用されるスクリプト言語のコンテンツ タイプ (MIME タイプとも呼ばれます) を示す、言語の置換属性と考えることができます。 <p style="margin-top:0px; margin-bottom:10px"></p> </li> </ul> <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"><br></p> <script> 要素を使用するには、JavaScript コードをページに直接埋め込む方法と、外部 JavaScript ファイルを含める方法があります。 <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"></p> <script> 要素を使用して JavaScript コードを埋め込む場合、<script> の type 属性を指定するだけです。次に、次のように JavaScript コードを要素内に直接配置します。 <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"><br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false" style="overflow:auto; font-family:Menlo,Monaco,Consolas,&#39;Courier New&#39;,monospace; font-size:13px; padding:9.5px; margin-top:0px; margin-bottom:10px; line-height:1.42857; color:rgb(51,51,51); word-break:break-all; word-wrap:break-word; border:1px solid rgb(204,204,204); background-color:rgb(245,245,245)">&lt;script type=&quot;text/javascript&quot;&gt; function sayHi(){ alert(&quot;Hi!&quot;); } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div></p> <script> 要素内に含まれる JavaScript コードは上から下に解釈されます。前の例で言えば、インタープリターは<p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,&#39;Microsoft Yahei&#39;; font-size:15.4px; line-height:27.72px">関数<a href="http://www.php.cn/wiki/145.html" target="_blank">の定義を解釈し、その定義を独自の環境に保存します。インタプリタが <script> 要素内のすべてのコードを評価すると、ページの残りの部分はブラウザによってロードまたは表示されなくなります。 </a></p> <script> 要素を通じて外部 JavaScript ファイルを含める場合は、src 属性が必要です。この属性の値は、外部 JavaScript ファイルへのリンクです。例: <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,&#39;Microsoft Yahei&#39;; font-size:15.4px; line-height:27.72px"><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false" style="overflow:auto; font-family:Menlo,Monaco,Consolas,&#39;Courier New&#39;,monospace; font-size:13px; padding:9.5px; margin-top:0px; margin-bottom:10px; line-height:1.42857; color:rgb(51,51,51); word-break:break-all; word-wrap:break-word; border:1px solid rgb(204,204,204); background-color:rgb(245,245,245)">&lt;script type=&quot;text/javascript&quot; src=&quot;example.js&quot;&gt;&lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,&#39;Microsoft Yahei&#39;; font-size:15.4px; line-height:27.72px">在这个例子中，外部文件example.js将被加载到当前页面中。外部文件只须包含通常要放在开始的<script>和结束的</script>中间的那些javascript代码即可。与解析嵌入式javascript代码一样，在解析外部javascript文件（包括下载该文件）时，页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略前面示例代码中结束的标签，例如：

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

以上がJavaScriptについてHTMLの