公開日: 2017年8月28日

【初心者向け】JavaScriptを使って可能な6つの基本的なこと

当初Webサイトの装飾として利用されていたJavaScriptですが、HTML5の仕様がJavaScriptにも及んだことから、JavaScriptはWebシステムの一環を担う言語となりました。

また、JavaScriptはほとんどすべてのブラウザで表示できるため、最近では人気のプログラム言語上位にランキングされるほどです。

最近はより進化し、ブラウザで動作する範囲を超え、サーバーサイドでデータ処理システムにも応用されるほどになりました。iOSやAndroid用のスマートフォンアプリの制作も可能になっています。

今回は、このようなJavaScriptでどのようなことが出来るのかを、事例を交えながら解説していきたいと思います。サーバーサイドの処理は、今回は取り扱っておりません。クライアントサイドで動作するJavaScriptの事例の紹介です。

JavaScriptの特徴
どんな場合に利用されるか？
Internet ExplorerやChromeなどブラウザだけで動くということ
大文字と小文字の区別
JavaScriptでできること
JavaScriptを記述する場所
JavaScriptの活用事例
ポップアップウインドウ
ボタンクリックでポップアップウインドウを表示してみよう
新しいウインドウを開く
ボタンクリックで画像を切り替える
サムネイルから画像を選択する
一文字ずつ表示する
まとめ

JavaScriptの特徴

どんな場合に利用されるか？

JavaScriptはWebデザイナーがWebページにコードを挿入できるようにする、クライアント側のスクリプト言語です。 JavaScriptは、通常、HTMLファイルまたはASPファイルに配置され、Webページから直接実行されます。これは、時間と日付の印刷、カレンダーを作成したりする場合などに利用されます。

Internet ExplorerやChromeなどブラウザだけで動くということ

前述もしておりますが、JavaScriptは、ほとんどすべてのブラウザで動作します。そして、動作させるために、ブラウザ以外には何も必要ありません。Internet ExplorerやFireFox、Chrome、Opera、Safariなどのブラウザがあれば、JavaScriptの動作が可能です。

大文字と小文字の区別

JavaScriptは大文字と小文字を区別します。例えば「var myData;」と「var mydata;」は別物として扱われますので、書き間違いのないように十分注意しましょう。

また、コードの最後には「;（セミコロン）」を記述します。

JavaScriptでできること

まず、事例の解説に移る前に、JavaScriptの基本的なルールについて解説しておきます。

JavaScriptを記述する場所

HTML内に埋め込んで記述します。書式は下記のようになります。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript活用事例1</title>
  </head>
  <body>
    <script>
    //ここにJavaScriptを記述する
    </script>
  </body>
</html>

ファイルに記述して読み込みます。書式は下記のようになります。

HTMLの記述は1に同じです。

<script src=”JavaScriptのファイル名”></script>

scriptタグのsrc属性にJavaScriptのファイル名を指定します。

今回は1の方法で解説していきます。

では、どのようなことが出来るかを解説していきましょう。

JavaScriptの活用事例

ポップアップウインドウ

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript活用事例1</title>
  </head>
  <body>
    <script>
      alert('Hello JavaScript!');
    </script>
  </body>
</html>

これを、拡張子を.htmlまたは.htmとして、適当な名前を付けて保存してブラウザで開くと、「Hello JavaScriptt!」とポップアップウインドウが開きます。ポップアップウインドウはalertメソッドで書くことが出来ます。

ボタンクリックでポップアップウインドウを表示してみよう

次はフォーム上にボタンを配置しておいて、ボタンクリックでポップアップウインドウを表示します。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript活用事例2</title>
  </head>
  <body>
    <script>
　　　function showMessage()
      {
            alert('Hello JavaScript!');
　　　　　}
    </script>
   <form>
      <input type="button" value="Click!" onclick="showMessage()" />
  </form>
 </body>
</html>

scriptタグ内にfunctionを使ってshowMessage()という関数を作ります。その関数内では、「Hello JavaScript!」と表示させるようにしておきます。

formタグを配置して、type属性に「ボタン」を表示させるために「button」と指定します。valueにはボタンの表面に表示させる文字を指定します。onclickイベントで、ボタンがクリックされたときにshowMessage()関数が実行されるようにしておきます。

buttonを指定しているtype属性には、button以外にもいろいろな値を指定できます。詳細についてはこちらを参照してください。

適当な名前を付けて保存し、ブラウザで開いてください。

新しいウインドウを開く

フォーム上に配置されたボタンをクリックして、新しいウインドウを開いてメッセージを表示させます。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript活用事例3</title>
  </head>
  <body>
    <script>
     function openNewWindow()
     {
        var myWindow=window.open('','新しいウインドウ','');
        myWindow.document.write('<h1>Hello JavaScript!</h1>');
        myWindow.document.close();
     }
    </script>
  <form>
    <input type="button" value="Open Window" onclick="openNewWindow()" />
  </form>
  </body>
</html>

Webページ上に配置されたフォームボタンをクリックすると、inputタグのonclickイベントハンドラでopenNewWindow関数が呼び出されます。

そして、新しく開いたウインドウには「Hello JavaScript!」と表示されます。h1タグを使用して重要度の高い文字として表示します。新しいWindowを開くにはwindowオブジェクトのopenメソッドを使います。書式は下記のようになります。

window.open(‘URL’,’ウインドウ名’,’スタイル’)

このサンプルでは、「ウインドウ名」だけを指定して、他は省略しています。「URL」には、新しく開かれるウインドウでロードされるURLを指定できます。

「スタイル」は任意です。「スタイル」に指定可能な値についてはこちらを参照してください。

適当な名前で保存してブラウザで開いてください。

ボタンクリックで画像を切り替える

JavaScriptを使用すると、Webページを読み込んだ後に、フォームに配置したボタンクリックで、画像だけを切り替えることができます。Webページ全体を読み込むことなく、画像だけを切り替えることが出来ますので、大変に効率がいいです。

これを実行するには、.htmlまたは.htmを保存した同じフォルダにimagesというフォルダを作成して、各自の画像を配置しておいてください。今回のコードの画像名の箇所は各自の画像名と差し替えてください。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript活用事例4</title>
  </head>
  <body>
   <form>
    <input type="button" value="揚巻うどん" onclick="myImage.src='images/agemaki_mini.png'" /><br />
    <input type="button" value="でか盛りうどん" onclick="myImage.src='images/dekamori_mini.png'" /><br />
    <input type="button" value="えび天うどん" onclick="myImage.src='images/ebiten_mini.png'" /><br />
    <input type="button" value="じゃこてんうどん" onclick="myImage.src='images/jakoten_mini.png'" /><br />
    <input type="button" value="月見うどん" onclick="myImage.src='images/tsukimi_mini.png'" /><br />
  </form>
   <br />
   <img src="" name="myImage" />（A）
  </body>
</html>

このサンプルでは、Webページに5つのフォームボタンが配置されています。それらのボタンをクリックすると画像が表示されます。（A）の部分の画像を表示するためのimgタグには、name属性でmyImageという名前を付けています。

ここで指定した名前は、このImageオブジェクトを参照したり属性を設定する場合に使用されます。

5つのフォームボタンのonclickイベントハンドラによって、ボタンがクリックされたときの動作が指定されています。

onclick="myImage.src='images/agemaki_mini.png'"

と記述しているmyImageは、先ほどname属性で指定した名前です。これによって、myImageプロパティの1つであるsrcプロパティが設定されて、画像が表示されます。

サムネイルから画像を選択する

画像を表示させる場合、最初から画像サイズの大きい画像を配置してしまうと、Webページが重くなる可能性があります。また見た目もあまりよくありません。このような場合は、最初は縮小したサムネイル画像を表示させておいて、ユーザーに表示したい画像のサムネイルを選択させるとよいでしょう。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript活用事例5</title>
  </head>
    <body>
　　<script>
       function changeImage(imageName)
       {
         document.targetImage.src=imageName
        }
    </script>
    <hr />
   <img src="" name="targetImage" /><br />
   <br />
  選択してください<br />
<img src="images/すすき_s.jpg" onclick="changeImage('images/すすき.jpg')" />
<img src="images/枯れ木_s.jpg" onclick="changeImage('images/枯れ木.jpg')" />
<img src="images/光_s.jpg" onclick="changeImage('images/光.jpg')" />
<img src="images/森林_s.jpg" onclick="changeImage('images/森林.jpg')" /> 
  </body>
</html>

このサンプルでは下方にサイズの小さな画像がサムネイルで表示されます。任意のサムネイル画像をクリックするとサイズの大きな画像が表示されます。

画像をクリックするとimgタグに指定されているonclickイベントハンドラにより、changeImage関数が呼び出されます。クリックした画像によって、changeImage関数に渡す引数が変わります。この引数で表示する画像を指定しています。

changeImage関数内では、変数imageNameを使って画像を変更しています。

最初に表示している小さな画像のサムネイルは画像名に_sを付けてサイズを実物の半分のサイズの画像を使用しています。画像の処理にはPaintShopを使用しています。画像は、各自の画像と差し替えてください。

一文字ずつ表示する

一文字ずつ表示されていくスクリプトです。タイプライターで入力しているような感じになります。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript活用事例6</title>
  </head>
  <script>
    var i=0;
    var printString;
    var message="Welcom to JavaScript World";

   function printMoji()
   {
             document.getElementById("sText").innerText=message.substring(0,i++);
            if(i<=message.length)
            {
                setTimeout("printMoji()",200);　　　　　
　　　　　　 }
    }

  </script>
   <body onload="printMoji()">
   <div id="sText" style="position:absolute"></div>
  </body>
</html>

Substring()メソッドで、変数messageに格納されている文字列からi++でインクリメントされる文字列を、sTextという名前を付けたdiv要素内に表示していきます。

インクリメントは、setTimeout()で繰り返し実行されていますので、実行されるたびに変数iがインクリメントされて一文字づつ取り出されて、表示されていきます。

<body onload="printMoji()">

と記述して、最初にonloadイベントハンドラでprintMoji()を読み込みます。文字を表示させる位置は、

<div id="sText" style="position:absolute"></div>

と記述してdiv要素のname属性にsTextと指定し、この名前をgetElementById(“sText”).innerTextで取得して表示します。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

まとめ

今回はこれで終わりです。いかがだったでしょうか？全部で6個のJavaScriptの例を紹介しました。このほかにも、もっともっといろいろなことがJavaScriptでは実現可能です。JavaScriptの情報はWebにあふれていますので、各自がいろいろ調査して、面白い処理を実現してみるといいでしょう。