目次

オブジェクトなJavaScriptの基礎講座

初めの一歩

◆ はじめに

初めの一歩として、ブラウザに "Hello! Chaichan!" と表示するプログラムを書いてみましょう。

◆ Hello! Chaichan!

まず、メモ帳(Windows)などの適当なエディターで、以下をタイプ(カット&ペースト)して、Hello.htmというファイル名で保存し、そのファイルをブラウザに読み込んでみてください。

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html lang="ja">
 <head>
 <title>Hello! Chaichan! のサンプル</title>
 </head>
 <body>
 <script type="text/javascript">
 	document.write( "Hello! Chaichan!" );
 </script>
 </body>
 </html>

すると、ブラウザに以下のように表示されます。

 Hello! Chaichan!

◆ 解説

JavaScript を記述する場所

単純なJavaScriptのコードはhtml要素中に記述します。

<script type="text/javascript"> から </script> までがJavaScriptであることを示しています。 html要素中でJavaScriptを使うためには必ずこの2つのタグでスクリプト部分を挟まなければなりません。

長くなりそうな JavaScript のコードや、ライブラリ化して再利用したい場合は、HTMLの外部に 「 〜.js 」というファイルを作成して、そこに JavaScript を記述し、それをHTMLファイルからインクルードします。

 <html lang="ja">
   ・・・・・・
 <script type="text/javascript" src="〜.js"></script>
   ・・・・・・
 </html>

JavaScript の基礎的な文法

  1. JavaScriptの一つの処理の終りには ; (セミコロン)をつけます。

    document.write( "Hello! Chaichan!" );
    

    一つの行にいくつもの処理を書いてもかまいません。また一つの処理が複数の行にまたがってもかまいません。

  2. document.write( )は括弧でくくられた中身を、HTMLとして出力します。

  3. 文字の出力は必ず " (ダブルクオーテーション) か ' (シングルクオーテーション) で囲みます。
    クオーテーションマークで囲まれた内側では改行できません。

  4. " (ダブルクオーテーション) や、' (シングルクオーテーション) を文字として出力するには、エスケープ記号 \ を直前に付けて、 \" , \' とします。

  5. 数字を出力する際は、とくに " で囲む必要はありません。

    document.write(123456);
    
  6. 文字列を連結させて出力させるには 「 + 」 を使います。

    document.write( "こんにちは、" + "ちゃいちゃん" + "今日は元気ですか?");
    
  7. 文字列を連続させて出力させるには 「 , 」 を使います。

    document.write( "こんにちは、" , "ちゃいちゃん" , "今日は元気ですか?" );
    

    連結と連続で、どう違うかというと、前者は、文字列を連結後document.writeが実行され、後者は、document.writeの 内部で連結されます。数字の場合は、以下の様に振る舞いが異なりますので注意してください。

    document.write( 1 + 3 );
    とすると、 4 が出力されてしまうのに対して、
    document.write( 1 , 3 );
    ならば、13 と出力されます。

補足 document.writeln

document.write に似たものに、document.writelnがあります。
これは出力した後に改行コードを一緒に出力するものです。

ただし、HTMLでは<br>以外での改行はただのスペースと見なされるため、pre タグなどを使わない限り、document.writelnが出力する改行コードは見た目にはスペースになってしまいます。では、どういう利点があるかというと、そのHTMLソースをエディターで表示した時に見やすくなるということです。

目次