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

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

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

変数と演算子の使い方

変数の表示

  • 変数の中身を表示するには、「console.log」や「alert」の丸括弧()内に変数名を指定します
  • 変数名をシングルクォートまたはダブルクォートで囲むと、囲まれた範囲は単純な文字列となり、変数名がそのまま表示されてしまいます


《変数の中身の表示》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>変数の中身の表示</title>
</head>
<body>
<script>
  var a = 10;
  console.log(a);
</script>
</body>
</html>

《実行結果》


変数名はシングルクォートまたはダブルクォートで囲まない!

データ型

  • データ型とは、変数に入っているデータの種類のことです
  • 文字列と数値とは、異なる種類のデータ型になります
  • データ型が異なると、実行できる処理内容も異なります
  • 文字列型のデータに対しては文字列の検索や置換などの処理ができます
  • 数値型のデータは計算処理に利用できます


JavaScriptのデータ型》

データ型 説明
数値 整数や実数 10

0.5
文字列 シングルクォートまたはダブルクォートで囲まれた文字の並び 'abc'

"こんにちは"
論理値

・真(条件を満たす)の意味をもつ「true」

・偽(条件を満たさない)の意味をもつ「false」

true

false
配列 複数のデータの集合体 [10, 20, 30]
連想配列

(オブジェクト)
キーと値の集合体 { width : 90,

height : 50 }
null値 オブジェクトが存在しないことを表す特殊なデータ型 null

undefined値

変数が初期化されていない、あるいはプロパティが定義されていないことを表す特殊なデータ型 undefined
NaN値 数値でないことを表す特殊なデータ型 NaN

  • JavaScriptはデータ型について厳密なチェックを行わないため、数値型の値が入っていた変数を文字列型の値で上書きすることも可能


  • スクリプト中で扱うデータは変数に入れる
  • 変数に入れるデータの種類のことをデータ型と呼ぶ

演算子の挙動の違い

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>+演算子の挙動の違い</title>
</head>
<body>
<script>
  var x = 123 + 456;
  var y = '123' + '456';
  console.log(x);
  console.log(y);
</script>
</body>
</html>

《実行結果》

複合代入演算子

インクリメント、デクリメント
  • 変数の値を1増やすこと
  • 「++」はインクリメント演算子
デクリメント
  • 変数の値を1減らすこと
  • 「--」はデクリメント演算子
  • 以下の2つは、まったく同じ処理をします
<script>
  var a = 10;
  a = a + 5;
  console.log(a);
</script>
<script>
  var a = 10;
  a += 5;
  console.log(a);
</script>

《実行結果》


  • 以下の3つは、まったく同じ処理をします
<script>
  var a = 10;
  a = a + 1;
  console.log(a);
</script>
<script>
  var a = 10;
  a += 1;
  console.log(a);
</script>
<script>
  var a = 10;
  a++;
  console.log(a);
</script>

《実行結果》


  • 演算でデータの計算や代入、比較などの処理を行う