読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

変数の種類

変数

  • 変数」は、数値や文字などを格納しておく「箱」のようなもの
  • 変数はいくつでも使える
  • 半角英数文字と「_」「$」の組み合わせであること
  • ただし、1文字目に数字は使えない
  • 大文字小文字は区別される
  • JavaScript予約語は使えない

変数の利用

  • 値を代入して使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
/*
    変数: データにつけるラベル

    データ型
        - 文字列
        - 数値
        - 真偽値 (true / false) 
        - オブジェクト
          - 配列
          - 関数
          - 組み込みオブジェクト
        - undefined 定義されていない
        - null 何もない
*/
var msg = 'hello world!',
    x = 20,
    y = 10;
console.log(msg);
</script>
</body>
</html>

変数に値を入れるには次のようにします。



a = 2;

「a」という名前の変数に「2」という数値を入れます。
変数に値を入れることを「代入」といいます。

変数名

変数名には半角英数字と「_(アンダースコア)」と半角の「$(ドル記号)」が使えます。
 ※先頭文字が数字は使用不可。
 ※大文字小文字の区別される。


値の入っている変数に、値を代入することもできます。



a = 2;
a = 3;
 ※元の値は消えます。


数値そのものを「数値リテラル」といいます。

  • リテラルとは、プログラムのソースコードにおいて使用される、数値や文字列を直接に記述した定数のこと
  • 変数の対義語であり、変更されないことを前提とした値である

変数の型

「数値」や「文字」といったデータの種類のことを、といいます。
JavaScriptでは、変数に代入される値の型によって、変数の型が自動的に決まります。



a = 1;
整列「1」を代入



a = '1';
文字列「1」を代入

typeof演算子

「typeof演算子」を使うと、型を調べることができます。

数値型

数値が入る変数の型を「数値型」といいます。
typeof演算子では「number」で表されます。



a = 123;
b = -5;
c = 0.1;
d = -2.8;
負の値には「−」をつけます。



a = typeof(123);
document.write(a);

論理型(boolean)ブーリアン

論理型は「true(真)」または「false(偽)」のどちらかの値を持ちます。
値などを比較した結果を代入するときに使用します。
typeof演算子では「boolean」で表されます。



a = true;
b = false;



c = typeof(true);
document.write(c);

object型とnull型

object型」はオブジェクトの参照先を表す型です。
また、値がないことを表すのに「null」という特別な値を使います。
object型もnull型も、typeof演算子では「object」で表されます。



a = null;
nullは数値型の0のようなものですが、0ではありません。

  • object「オブジェクト型」


d = typeof(window);
document.write(d);

  • object「null型」


e = typeof(null);
document.write(e);

未定義型(undefined)

変数が未使用状態であることを「未定義型(undefined)」で表します。
undefinedは変数に代入できません。
typeof演算子では「undefined」で表されます。



f = typeof(undefined);
document.write(f);

delete演算子

delete演算子を使うと変数を削除し、未使用状態に戻すことができます。
削除に成功すると「true」を返し、失敗すると「false」を返します。


a = 1;
delete a;

文字列型(string)

1つ以上の文字を並べたものを「文字列型」といいます。

  • 文字列型は「"(ダブルクォーテーション)」または「'(シングルクォーテーション)」で挟む
  • typeof演算子では「string」で表される



a = 'Hello';
b = 'a';
文字列そのものを「文字列リテラル」といいます。



c = typeof( 'Hello World! ');
document.write(c);

文字列の連結

文字列を連結したいときには「+」を使って記述する。


a = '夏';
b = '休み';
c = a + b;

「"」と「'」

文字列の中で「'」を使いたいときには「"」で文字列全体を囲みます。
「"」を使いたいときには「'」で囲みます。


a = 'ようこそ"Webクラス"へ!;
b = "名前は'鈴木'です。";

エスケープシーケンス

" "の中で「"」、' 'の中で「'」を使いたいときは、文字の前に「\(エスケープ文字)」を付けて表す「エスケープシーケンス」という特殊文字を使います。
利用出来るエスケープシーケンスはブラウザにより異なりますが、次のようなものがあります。


エスケープシーケンス働き
\tタブ
\n改行
\bバックスペース
\"「"」を表示
\'「'」を表示
\\「\」を表示
\uNNNN16進数のUnicode文字



alert('ようこそ!\n\'Webクラス\'へ。');

\nをdocument.writeで使っても、<pre>を使わない限りブラウザで改行は反映されません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
/*
    文字列
        表現方法
        特殊文字
    演算子
*/
var s;
s = "hello";
s = 'hel\'lo';
// \n 改行
// \t タブ
s = 'it\'s\n a pe\tn.';

s = "hello " + "world";
s = "5" + 5; // "55"

console.log(s);
</script>
</body>
</html>

NaNとInfinity


数値型(number)には、整数と少数のほかに NaN(非数)Infinity(無限)という値があります。

NaN(Not A Number)非数

NaNは、数ではない数という意味で、数値に変換しようとして変換できないときの値です。
たとえば、次のように文字列を parseInt で整数にしようとすると、結果は NaN になります。



a = 'あいうえお';
num = parseInt(a);

Infinity 無限

Infinityはある数字を0で割ったときの値です。
JavaScriptでは、数字を0で割ってもエラーになりません。


正の数を0で割るとInfinityになる


num = 100/0;


負の数を0で割ると-Infinityになる


num = -100/0;