HTMLを使ってWebサイトにJavaScriptを組み込む方法

共同執筆者 wikiHow編集チーム

このwikiHowでは、HTMLを使ってWebサイトのプログラミングコードにJavaScriptを組み込む方法をご紹介します。

ステップ

  1. 1
    テキストエディタを開く Windowsのメモ帳またはMacのテキストエディットなど、オペレーティングシステムに標準搭載されたテキストエディタを使うことができます。
    • Windowsの場合、パソコンのスタートメニューの検索フィールドにメモ帳(または「Notepad」)と入力し、検索結果に表示される「メモ帳」をクリックします。
    • Macの場合、画面の右上角にある虫眼鏡をクリックし、検索フィールドにテキストエディット(またはTextEdit)と入力し、検索結果に表示される「テキストエディット」をクリックします。
  2. 2
    一番外側のブロックであるHTML要素を記述する HTML開始タグと終了タグの間に、<head>開始タグと</head>終了タグのペア、および<body>開始タグと</body>終了タグのペアを入力します。これらのタグは、Webページの構造を定義するためにすべて必要となり、以下に示すように記述します。
      <html>
      <head>
      </head>
      <body>
      </body>
      </html>
      
  3. 3
    HTMLのhead要素内にscriptタグを追加する head開始タグと終了タグの間に、<script language="javascript"> タグを挿入します。これにより、JavaScriptを使用してHTMLのJavaScript「プログラム」が記述されていることを、テキストエディタが認識します。以下の例では、alertを使ってユーザーに対してメッセージを表示させています。
    • 自分のWebサイトのHTMLのhead要素内にscriptタグを入力し、JavaScriptを追加します。
    • Webサイトを読み込んだときに自動的にJavaScriptを実行させたい場合は、以下のように関数を用いずに記述します。自分でJavaScriptを呼び出したい場合は、関数を用いて記述します。
    • <html>
      <head>
      <script language="javascript">
      alert("Hi there, and welcome.")
      </script>
      </head>
      <body>
      </body>
      </html>
      
  4. 4
    JavaScriptの関数を使って別のJavaScriptを呼び出す スクリプトファイルの在りかが分かっている場合は、scriptタグにsrc=属性を追加して、その属性値としてJavaScripファイルの正確なWebアドレスを記述します。
    • 自分のWebサイトでスクリプトを呼び出す際には、JavaScriptを呼び出しているURLやページにリンクを張るのではなく、JavaScriptファイルに直接リンクを張りましょう。
    • <html>
      <head>
      <script type="text/javascript" src="http://www.cpagrip.com/script_include.php?id=2193">
      </script>
      </head>
      <body>
      </body>
      </html>
      
  5. 5
    メニューバーにあるファイルをクリックし、続けて名前を付けて保存…(Windows)または保存(Mac)をクリックする
  6. 6
    ファイル名の末尾に拡張子.htmlを入力する
  7. 7
    文書名を入力して、保存をクリックする
  8. 8
    保存した文書をダブルクリックしてWebブラウザで開く

注意事項

  • HTML4では、タグのMIMEタイプを指定する必要があります。<script>タグ内に、次の属性及び属性値「type='text/javascript'」を挿入します。HTML5では、このtype属性を指定する必要はありません。
  • HTML3では、「type='text/javascript'」と記述する代わりに、「language='javascript'」と記述します。

記事の情報

この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

カテゴリ: インターネット

他言語版:

English: Add JavaScript to Your Website Using HTML, Español: agregar JavaScript a tu sitio web usando HTML, Português: Adicionar JavaScript ao seu Site Usando HTML, Русский: добавить Javascript на сайт посредством HTML, 中文: 使用HTML向你的网站添加脚本, Nederlands: JavaScript toevoegen aan je website met HTML, ไทย: วาง JavaScript ของเว็บใน HTML, Tiếng Việt: Thêm JavaScript vào website HTML, Deutsch: JavaScript via HTML in deine Webseite einfügen, Français: ajouter JavaScript dans un site internet sous HTML, العربية: إضافة جافا سكريبت إلى موقعك الإلكتروني باستخدام لغة اتش تي ام ال, हिन्दी: HTML की सहायता से अपने वेबसाइट में जावास्क्रिप्ट जोड़ें (Add JavaScript to Your Website Using HTML)

このページは 155 回アクセスされました。
この記事は役に立ちましたか?