JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptをHTMLドキュメントに組み込む方法をわかりやすく解説

JavaScriptをHTMLに組み込む基本：scriptタグの使い方

HTMLドキュメントにJavaScriptを組み込むには、<script>タグを使用します。JavaScriptは、<script>タグと</script>タグの間に記述されたJavaScriptの文（ステートメント）によって実装されます。

scriptタグを配置できる場所

JavaScriptを含む<script>タグは、Webページ内のどこにでも配置できます。ただし、一般的には<head>タグ内に記述することが推奨されています。

サンプルコードで学ぶ：文字列を表示する方法

それでは、実際に文字列を画面に表示するサンプル例を見てみましょう。ここでは、JavaScriptコードをHTMLコメントで囲む記述をオプションとして追加しています。これは、JavaScriptに対応していない古いブラウザからコードを保護するための手法です。コメントは「//-->」で終わります。

「//」はJavaScriptにおけるコメントを表す記号です。ブラウザがHTMLコメントの終了部分をJavaScriptコードとして誤って読み込まないようにするために、このように記述します。その後、document.write関数を呼び出し、HTMLドキュメントに文字列を書き出しています。

ライブデモ

<html>
   <body>
      <script>
         <!--
            document.write("Tutorialspoint")
         //-->
      </script>
   </body>
</html>

このコードを実行すると、ブラウザの画面に「Tutorialspoint」という文字列が表示されます。

補足：モダンブラウザではコメントによる保護は不要

なお、JavaScriptコードをHTMLコメントで囲むこの手法は、JavaScript非対応の古いブラウザ向けのものです。現在主流のモダンブラウザはすべてJavaScriptに対応しているため、今日の開発ではこの記述はほとんど使われなくなっています。基本的な仕組みを理解するための知識として覚えておくと良いでしょう。

  1. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  2. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">