ITコラム

colmun_main8438

JavaScript

2017.12.15

JavaScript【 サンプル 】1 ~ 記述方法の基本

つい忘れがちな JavaScript のサンプルを挙げてみます。
今回は、JavaScript の 基本的な記述方法についてのサンプルを紹介します。

目次

 
1.script タグの書き方
2.noscript タグ
3.コメントの書き方
4.実行方法

1.script タグの書き方

 
HTML ファイルに JavaScript を記述する場合には、script 要素内( <script> ~ </script> )に記述します。

script タグは、HTML ファイル内の body 要素内( <body> ~ </body> )に記述します。

<body>

<script type="text/javascript">
<!--

    // ここに JavaScript のソースコードを記述する

//-->
</script>

</body>

 
script タグの内側の「 <!– 」と「 //–> 」は、script タグに非対応のブラウザ対策です。

「 <!– 」と「 //–> 」を記述していると、ユーザーが script タグに非対応のブラウザを使用した場合に、スクリプト要素内のソースコードが テキストとして表示されるのを防ぎます。

▲目次へ戻る

 

2.noscript タグ

 
ブラウザが JavaScript に対応していない場合は、script タグは読み込まれず、script タグ内の javaScript コードは通常「 <!– ~ //–> 」内に記述するため、何も表示されません。

このような事態を想定して、ブラウザが JavaScript に対応していない場合に 何らかのメッセージを表示させたい時は、noscript タグを使用します。

<body>

<script type="text/javascript">
<!--
    // JavaScript のソースコード
//-->
</script>

<noscript>

    // JavaScript に対応していない場合に表示させたい内容を記述する

</noscript>

</body>

 
noscript タグ内の内容は、ブラウザが JavaScript に対応している場合は表示されず、JavaScript に非対応のブラウザの場合のみ表示されます。

▲目次へ戻る

 

3.コメントの書き方

 
ソースコードの説明や注意書きなど、Webページには表示させず、ファイル上にのみ残しておきたい情報があります。
このような内容は、コメントアウトを使って記述します。

<script type="text/javascript">
<!--

//この行がコメントアウトされる

alert("Hello!"); //この行のこのエリアがコメントアウトされる

/*
スラッシュとアスタリスクで囲まれた部分
全てがコメントアウトされる
*/

//-->
</script>

 
「 // 」を記述すると、それ以降の 1 行がコメントアウトされます。
それより前の部分はスクリプトとして実行されるので、スクリプトの後ろにコメントを残すことができます。

複数行をコメントアウトする場合は、コメントを「 /* ~ */ 」で囲みます。

▲目次へ戻る

 

4.実行方法

 

ページの読み込みと同時に実行

script タグ内に JavaScript の命令を記述することで、ページの読み込みと同時に実行されます。

<script type="text/javascript">
<!--

document.getElementById("msg").innerHTML = "Welcome!";

//-->
</script>

 
 

ボタンをクリックした時に実行

ボタンをクリックした時に実行したい場合は、次のように記述します。

<script type="text/javascript">
<!--
function disp() {
    alert("Hello!");
}
//-->
</script>

<form>
   <input type="button" value="実行" onClick="disp()">
</form>

 
実際にボタンをクリックしてみて下さい。

 

 
ボタンをクリックするというイベント( 動作 )をきっかけにスクリプトを呼び出すため、「 onClick 」というイベント処理を使用しています。

onClick イベントによって、ボタンがクリックされたら実行する という ユーザーの動きに合わせた処理が可能になります。
 
 
ユーザー定義関数を使用せず、次のように スクリプトを直接記述することもできます。

<form>
   <input type="button" value="実行" onClick="alert('Hello!')">
</form>

直接記述する場合は、引用符の使い方に注意をします( 外側をダブルコーテーションで囲んだら、内側はシングルコーテーションを使用。逆も可 )。
 
 

リンクをクリックした時に実行

リンクをクリックした時に実行したい場合は、次のように記述します。

<script type="text/javascript">
<!--
function disp() {
    alert("Hi!");
}
//-->
</script>

<a href="javascript:disp()">実行</a>

 
実際にリンクをクリックしてみて下さい。

実行
 
 
ユーザー定義関数を使用せず、次のように スクリプトを直接記述することもできます。

<a href="javascript:alert('Hi!')">実行</a>

直接記述する場合は、引用符の使い方に注意をします( 外側をダブルコーテーションで囲んだら、内側はシングルコーテーションを使用。逆も可 )。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.