Skip to content
This repository has been archived by the owner on Mar 15, 2019. It is now read-only.

Javascript入門

Jump to bottom
Masumi Kawasaki edited this page Nov 30, 2017 · 53 revisions

Javascriptとは

Webブラウザ上で動かす事ができるクライアント側のプログラミング言語です。HTMLだけでは動的なWebページの作成を作る事が難しいので、Webページに「動き」を与えたい場合にJavascriptを用います。この説明だけでは良く分からないと思うので、実際にJavascriptを記述して動作を確認してみましょう。

項目内容

  1. 文字を表示してみよう！
  2. 計算をしてみよう！
  3. 格好良く計算してみよう！
  4. 配列を使ってみよう！
  5. for文 -繰り返し処理- を学ぼう！
  6. If文 -条件分岐- を学ぼう！

1. 文字を表示してみよう!

ターミナルを開いて以下を入力してください。
「example1.html」という名前のhtmlファイルを作成しましょう！

$ vim example1.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript">
      document.write("こんにちは");
    </script>
  </body>
</html>
$ open example1.html


コード解説

<script type="text/javascript">
Javascriptの始めを定義しています。「ここからJavascriptが始まるよー！」ということなので、HTML内でJavascriptを書く時にはこれを記述しなければブラウザは何の言語を入力してるのか分かりません。
document.write("こんにちは");
文字列を表示させたい場合はdocument.write()メソッドを使用します。表示させたい文字列は必ず""の間に入力してください。また、プログラムの基礎でもありますが、文の終わりを示すためにセミコロンを忘れないでください。
</script>
Javascriptの終わりを定義しています。「ここでJavascriptは終わりだよ−！」とブラウザに知らせています。

さらに変数に文字列を格納してみましょう。
以下のコードを「example1.html」に置き換えて見ましょう！

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript">
      var hello = "こんにちは";
      document.write(hello);
    </script>
  </body>
</html>

Webブラウザで開くと、先ほどと同じように画面に"こんにちは"と表示されていますね！

コード解説

var hello = "こんにちは";
これはhelloという変数を宣言し、その中に"こんにちは"という文字列を代入しています。変数を定義するにはvarを用います。
document.write(hello);
そのため、上記のようにしてもdocument.write("こんにちは");と全く同じようになるのです！

2. 計算をしてみよう!

プログラミング言語を用いれば計算が非常に安易にできます。単純なものから非常に難しいものまで簡単に計算できます。もう電卓なんぞいらん！という気持ちになるでしょう。以下は覚えてください！

計算演算子 記号 論理演算子 記号
加算　　　　　 + 　等しい　　　　　　　　　　　 ==
減算　　　　　 - 　等しくない　　　　　　　　　 !=
乗算　　　　　 * 　より大きい　　　　　　　　　 >
除算　　　　　 / 　以上（より大きいか等しい）　 >=
剰余　　　　　 % 　より小さい　　　　　　　　　 <
インクリメント ++ 　以下（より小さいか等しい）　 <=
デクリメント -- 　　　　　　　　　　　　　　　 　

上記の演算子の表はJavascriptに限らず、全てのプログラミング言語に適応されるので記憶しましょう。
それではコードを書いて行きましょう。ターミナルを開いて以下を入力してください。
「example2.html」という名前のhtmlファイルを作成しましょう！

$ vim example2.html

<html>
  <body>
    <script type="text/javascript">
      document.write(2*15);
    </script>
  </body>
</html>
$ open example2.html


計算結果が6となりましたか？このように非常に簡単に計算することが出来ます。

####難問チャレンジ (23+45)÷2×3-12×6　　答えは30となるはず！

###3. 格好良く計算してみよう！ まずはコードを書いてください。
ターミナルを開いて以下を入力してください。
「example3.html」という名前のhtmlファイルを作成しましょう！

$ vim example3.html

<html>
  <body>
    <script type="text/javascript">
      a=prompt("Aの値を入力してください","");
      b=prompt("Bの値を入力してください","");

      a=parseInt(a);
      b=parseInt(b);

      c=a+b;
      alert("答えは"+c+"です");
    </script>
  </body>
</html>
$ open example3.html

|

コード解説

prompt("説明","初期値");
文字列入力ダイアログを表示します。
parseInt("文字列")
文字列を整数値に変換します。
alert("文字列")
アラートダイアログを表示します。
今回は文字列を表示させたいので、alert("答えは"+c+"です");としています。文字列の結合を行う場合は**+**を用います。整数値同士の場合は足し算となるのですが、文字列同士では文字列の結合となります。
参考までに
"hello" + "world" = "helloworld"
"1" + "2" = "12"
1 + 2 = 3

###4. 配列を使ってみよう！ 配列とはなんぞや！と思うかも知れませんが、概念は非常にシンプルです。
例えば５人の身長を表示させたいと思った時のことを考えてみます。

var takeshi, hajime, takuya, soma, mai; //変数を一括定義

takeshi = 165; //数値(身長)の代入
hajime = 178;
takuya = 174;
soma =170;
mai = 160;

document.write(takeshi); //身長の表示
document.write(hajime);
document.write(takuya);
document.write(soma);
document.write(mai);

5人であれば安易に書けますが、例えば100人の身長を表示させたい時は相当手間がかかってしまいますよね？かなり面倒くさいです。
ここで配列を使えば簡単に表示させることが出来ます！早速配列を使ってみましょう！

var height = new Array(5); //配列heightの定義

height[0] = 165; //数値(身長)の代入
height[1] = 178;
height[2] = 174;
height[3] = 170;
height[4] = 160;

ちょっと難しくなりましたね！でもやっていることは単純なので安心してください。

###コード解説 var height = new Array(5);
変数heightを長さが5(5個の値が入りますよーとのこと)の配列として定義します。
height[0] = 165;
配列の0番目に身長の値を代入します。配列はデカい箱のようなものであり、0番目、1番目、2番目...と区切られており、その中に値が入っていると考えて大丈夫です！配列は0番目から始まり、height[0]と示します。なので、height[103]はheight配列の103番目の値となります！

先ほどのコードは以下のようにも記述することが出来ます。

var height = [165, 178, 174, 170, 160];

それではコードを書いて行きましょう。ターミナルを開いて以下を入力してください。
「example4.html」という名前のhtmlファイルを作成しましょう！

$ vim example4.html

<html>
  <body>
    <script type="text/javascript">
      var height = [165, 178, 174, 170, 160];

      for (var i = 0; i < 5; i++){
        document.write(height[i]+"<br>"); //全ての身長の表示
      }
    </script>
  </body>
</html>
$ open example4.html

###コード解説 var height = [165, 178, 174, 170, 160];
変数heightを配列として定義し、その中に値を代入します。
for (var i = 0; i < 5; i++){...}
for文を用いてループします。for文の説明に関しては5章のfor文 -繰り返し処理- を学ぼう！を参考にしてください！
document.write(height[i]+"<br>");
配列内の一つ一つの値を表示させます。*<br>は改行をするという意味です。

###5. for文 -繰り返し処理- を学ぼう！ for文は繰り返し処理の１つであり、指定した回数だけ処理を繰り返す時に使われ、以下のように定義されます。

for (初期化式; 条件式; 変化式){
  実行する文;
}

for (var i = 0; i < 3; i++){
  document.write("こんにちは");
}

###コード解説 上記の例は"こんにちは"を3回出力されるためのコードです。
この動作を順番に説明します。

  1. var i = 0によって変数iを定義し、0という初期値を与える
  2. iの値が条件式のi < 3、つまりiは3未満であると条件を満たしていることを確認する - (i=0だからOK!!)
  3. document.write("こんにちは");により、"こんにちは"という文字列を表示する
  4. i++によりiに1を足してi=1となる
  5. iの値が3未満である事を確認する - (i=1だからOK!!)
  6. "こんにちは"という文字列を表示する
  7. i++によりiに1を足してi=2となる
  8. iの値が3未満である事を確認する - (i=2だからOK!!)
  9. "こんにちは"という文字列を表示する
  10. i++によりiに1を足してi=3となる
  11. iの値が3未満である事を確認する - (i=3だからNO!!)
  12. 終了---!!!!!!!!
    これにより、3回"こんにちは"と表示出来ました！

なにも言っているのか分からないと思うので、コードを書いて見ましょう！ターミナルを開いて以下を入力してください。
「example5.html」という名前のhtmlファイルを作成しましょう！

$ vim example5.html

<html>
  <body>
    <script type="text/javascript">
      for (var i = 0; i < 5; i++){
        document.write("こんにちは" + "<br>");
      }
    </script>
  </body>
</html>
$ open example5.html

###チャレンジ 1000回"こんにちは"と表示されるようにする

###6. If文 -条件分岐- を学ぼう！ if文は条件式の評価を行って、その結果に応じて処理を行うために使われ、以下のように定義されます。

if (条件){
  処理内容
}

var number = 4;

if(number < 10){ //numberが10以下であれば下記の処理を行う
  document.write("10以下の数値ですね！");
}

この場合numberの値が4なので、"10以下の数値ですね！"と表示されます。
また、条件を満たさない場合の処理を書きたい時は以下のように定義します。

if (条件){
  処理内容
} else {
  処理内容
}

var number = 4;

if(number < 10){ //numberが10以下の場合
  document.write("10以下の数値ですね！");
} else { //numberが10以下でない場合
  document.write("10以上の数値ですね！");
}

さらに条件を増やしたい場合は以下のように定義します。

if (条件){
  処理内容
} else if (条件){
  処理内容
} else {
  処理内容
}

var number = 4;

if(number < 10){ //numberが10以下の場合
  document.write("10以下の数値ですね！");
} else if (number == 10){ //numberが10に等しい場合
  document.write("10ですね！");
} else { //numberが10以下でも、10でもない場合
  document.write("10以上の数値ですね！");
}

このように多くの条件に合わせて処理を行う事が出来ます。さらに条件がある場合はelse if(条件)を追加すれば無限に書けます！
それではコードを書いて行きましょう。ターミナルを開いて以下を入力してください。
「example6.html」という名前のhtmlファイルを作成しましょう！

$ vim example6.html

<html>
  <body>
    <script type="text/javascript">
      number = prompt("数字を入力してください","");

      if(number < 10){ //numberが10以下の場合
        document.write("10以下の数値ですね！");
      } else if (number == 10){ //numberが10に等しい場合
        document.write("10ですね！");
      } else { //numberが10以下でも、10でもない場合
        document.write("10以上の数値ですね！");
      }
    </script>
  </body>
</html>
$ open example6.html

###コード解説 number = prompt("数字を入力してください","");
数値を入力するための入力ダイアログが表示されます。

入力された数値をif文を用いて判定を行っています。
入力された数値が10以下の場合　→　"10以下の数値ですね！"と表示
入力された数値が10である場合 → "10ですね！"と表示
入力された数値が10以上の場合 → "10以上の数値ですね！"と表示

以上でJavascript入門は終わりです！お疲れ様でした！
たくさん学ぶことはありましたが、これらは非常に大事な基礎項目なので覚えましょう！

Copyright (C) Catal,Inc. All Rights Reserved.

Clone this wiki locally