JavaScript の記述方法と動作確認方法

 

コンソールを使って JavaScript の動作確認を行う

JavaScript で書かれたコードの動作確認を行う方法は色々ありますが、最も簡単で手軽なものは Google Chrome に搭載されている JavaScript コンソールを使う方法です。お使いの PC に Chrome がインストールされていない場合には、お手数ですがダウンロードの上でインストールしてください。コンソールは便利ですので、Chrome をインストールしても損はしません。

コンソールを起動する手順は以下の通りです。

  1. Chrome を起動する。
  2. Chrome の画面上で右クリックし、出てきたメニューから検証を選択(キーボードのF12キーを押してもよい)。
  3. 表示された画面でConsoleタブを選択。
図:コンソールの起動方法
図:コンソールの起動方法

コンソールを起動したら以下のコードを入力し、キーボードのEnterキーを押してください。

alert('こんにちは')
図:アラートメッセージを表示させる
図:アラートメッセージを表示させる

上の例のように、

alert('表示したい文字列')

と記述すると、指定した文字列がアラートメッセージ(ポップアップ)として表示されます。非常に短い命令ですが、これも立派な JavaScript のコードです。

メッセージの内容を色々と入れ替えて試してみてください。例えば、Web ブラウジングしていると以下のようなメッセージによく遭遇します。

alert('お気に入り登録しますか?')

 

JavaScript を HTML ファイルに記述する

今度はコンソールを使うのではなく、HTML ファイルに JavaScript のコードを記述する方法を解説します。

以下のコードをテキストエディタなどに入力し、ファイルにindex.htmlと名前を付けて、適当な場所に保存してください。続いて、そのファイルをブラウザで開きます。先ほどと同じアラートメッセージが画面上にポップアップするはずです。



    

HTML ファイルの中に JavaScript のコードを直接記述する際には、上の例のように、コード全体をscript要素で囲みます。このscript要素ですが、上の例のようにbody要素の中に記述する必要があります。


    

 

JavaScript を JS ファイルに記述する

今度は JavaScript コードを HTML ファイルの中に直接記述するのではなく、JavaScript 専用のファイルである JS ファイル(拡張子は.js)の中に記述する方法を解説します。

以下のコードをテキストエディタなどに入力し、ファイルにalert.jsと名前を付けた上で、先ほど作成したindex.html同じ場所に保存してください。

alert('こんにちは')

今度は、先ほど作成したindex.htmlの内容を以下のように変更し(script要素の中身を削除する)、上書き保存してください。




    

この新たなindex.htmlの中にはアラートメッセージを表示させる JavaScript コードが書かれていないため、このファイルをブラウザで開いても、先ほどのようなアラートメッセージは表示されません。確認してください。

アラートメッセージを表示させるためには、HTML ファイルであるindex.htmlと JS ファイルであるalert.jsを関連付けて、index.htmlをブラウザで表示したときにalert.jsも同時に実行するように設定する必要があります。

そこで、index.htmlの内容を以下のように変更し、上書き保存してください。さらに、そのファイルをブラウザで開きます。先ほどと同じアラートメッセージが画面上に表示されるはずです。




    

HTML ファイル中で外部の JS ファイルを読み込むためには、上の例のように、script要素の開始タグにおいて、

という形で、読み込もうとする JS ファイルの場所を指定する必要があります。

お知らせ

【美容院向け】集客を実現するためのホームページデザインをリリース

美容院のためのホームページデザインをリリース。シンプルかつ柔軟なデザインを採用しているため、時間が経っても古臭さを感じさせません。集客に必要なインターネットマーケティング施策(コンテンツマーケティング・SNS・Google Map・リスティング広告)も提供します。

ブログ

【SEO事例】Google で1位を獲得・流入とお問い合わせが増加

SEO案件の成果を紹介。Google においてビッグワードの検索結果で 1 ページ目(10 位以内)に表示させることがご依頼内容。ロングテールでのコンテンツマネージメントにリソースを投入した結果、3 カ月ほどで 1 位を獲得し、ページビューとお問い合わせ件数が急増しました。

ホームページ戦略

インターネットマーケティングの重要性をデータから読み解く

インターネットマーケティング(Webマーケティング)とは、ホームページやウェブサービスを用いて行われるマーケティングのこと。インターネットマーケティングが重要な理由を、各種の調査データを利用しながら解説します。

ホームページ戦略

ホームページ戦略としてのキーワード分析

ホームページを活用して効率よく集客するためには、検索回数が多いキーワード、コンバージョン(購入・お問い合わせ・資料請求など)につながりやすいキーワードを選んだ上で、そのターゲットキーワードを中心にホームページを構成する必要があります。キーワードを選ぶ前段として、そもそもどのようなキーワードが誰によって、どれくらい検索されているかを調査する必要があります。