まとめ（2）関数

あらゆるものには然るべき場所がある

  • スクリプトはデータを格納できます
  • ウェブブラウザが内蔵するJavaScriptインタープリターは、JavaScriptのデータのために記憶領域を確保します
  • そのデータが何でありそれをどのように使うつもりであるか正確に記述するのは、あなたの仕事です
  • スクリプトは格納されたデータを使って計算を実行したりユーザーに関する情報を記憶します
スクリプトはデータ型で考える
  • 現実世界のデータは名前、数値、音声といった「型」で分類されます
  • JavaScriptもデータを「データ型」で分類します
  • 「データ型」は頭の中にある情報をJavaScriptに関連づけるカギになります

JavaScriptの３つの基本データ

  • データ型は、JavaScriptコードにあるデータを扱う方法に直接影響します
  • たとえば警告ダイアログボックスには数値ではなくテキストを表示します
  • そのため画面の裏で数値はテキストに変換されてから表示されています
文字列
  • 文字データは文字のシーケンス（順番に並んでいる）にすぎません
  • JavaScriptの文字データは「文字列」と呼ばれます
  • 文字列は、単一引用符(' ') や二重引用符(" ") で囲みます
数値
  • 数値はものの量などの数値で表せるものを格納します
論理値
  • 論理値データは常に値が「true：１」か「false：０」のどちらかになります
  • スイッチのオン／オフのように二つの値を持つものは論理値で表現できます
  • 論理値は常に白黒がハッキリしているので、何かを決定するのに役立ちます

定数は一定ですが変数は変化します

  • JavaScriptでデータを格納するとき「データ型」だけではなくその目的も重要です
  • そのデータを使って何をしたいのか
  • スクリプトの実行をとおしてデータが変化するか
定数は変更しようとしても変更できません
  • 変数はスクリプトの実行をとおして値が変わりますが、定数は値が変わりません
  • データ断片の値を変更できないように格納するには「定数」にする必要があります
  • 定数は変数と区別するために「すべて大文字」で書く
  • 定数は初期化された変数と同じように作成できますが、使用するキーワードは「const」になります
  • 「CONSTant：不変のもの」 の略



　　　　　このデータは変更できません
　　　　　　　　　　　↓　　
　const TAXRATE = 0.08;


※定数名はすべて大文字にしておくと、一目で変数と区別できます。

変数は値がなくても作成できる
  • 変数はメモリ領域に確保される場所であり、一意的な名前をもっています
  • ちょうど物を収納する箱にラベルが貼ってあるのと同じです
  • 変数の初期化は変数の最初の値を設定するだけです
  • 変数の値は後から変えることができます
  • 変数を作成するときには、特別なキーワード「var」を使い、varの後に変数名を続けます
  • 「VARiable：変化する」 の略
  • キーワードとはJavaScriptの予約語で、変数を作成するといった特別なタスクを実行します
  • 変数名には一意であり、意味のある名前をつける

ダイアログボックスを表示

  • ダイアログ（dialog）は、ブラウザに書かれてプログラムで対話をすること
  • ユーザーに確認したり、値を入力してもらいます
  • メソッドが返す値のことを「戻り値」と呼びます
メッセージを表示する
  • alert()メソッド
  • 引数で指定した文字列をダイアログボックスに表示します
ユーザーに確認を求める
  • confirm()メソッド
  • 引数で指定した文字列と、[OK]ボタン・[キャンセル]ボタンが表示されたダイアログボックスを表示します
  • confirm()メソッドの「戻り値」は、[OK]ボタンを押すと「true」となり[キャンセル]ボタンを押すと「false」となります
  • 「true」と「false」、つまり真と偽の２つの値だけをとるデータ型を、一般的に「ブーリアン（boolean）型」
ユーザーにデータを入力してもらう
  • prompt()メソッド
  • 第１引数で指定した文字列が表示され、第２引数で指定した文字列がテキスト入力フィールドに入力例として表示されます
  • ユーザーが入力した値を「文字列」として戻します（半角数字を入力しても、文字列になります）
  • このとき、何も入力されていない場合は、空文字「''」が代入されます
  • [キャンセル]ボタンを押すと「null」という値が代入されます
文字列を数値に変換する
  • parseInt()関数

関数とは

  • たとえば信号機は繰り返し点灯しますが、そのつど色は異なります
  • そんな風に、動作の主たる目的は変わらずとも、ちょっと条件を付加して動作の枝葉の部分を自由に変更したいというとき、「関数」という考え方を使います
「食事をする」という関数を作る
  • 関数：食事をする
  • 条件：いつ（時刻）、何を（和洋中）、誰といっしょ
  • 結果：…
  • 関数とは、このパターンを見つけて条件を変更するだけで多くのバリエーションを作れないか整理することです
  • また、条件は関数で導きたい結果に基づき設定します
  • 固定の条件であれば、わざわざ条件を入れずに目的として定義してしまえばよいということになります


functionの特徴
  • 関数を１つのプログラムの「かたまり」として定義することができます
  • 「関数名()」だけ記述すれば、引数も戻り値もなく、処理を実行するだけになります
  • 引数が複数必要な場合は、「,カンマ」で区切って並べます
  • 引数がない場合は、記入は不要です
  • 戻り値は、１つだけ返すことができます
  • 返す必要のない場合は、returnの行ごと記入が不要です
メソッドと関数の違い
  • 結論から言えば、違いはありません
  • オブジェクト自身を操作する場合に使うもの、手続きをメソッド
  • それ以外を関数（非オブジェクト指向言語）と呼びます

例題

  • 消費税合算後の金額を表示するスクリプトを記述しなさい
  • 警告ダイアログボックスに「金額」を入力してOKボタンを押すと、ブラウザに元の金額と消費税合算後の金額を表示するようにする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>消費税合算後の値段</title>
<script>
function total() {
  const TAXRATE = 0.08;
  var price = prompt('金額を半角数字で整数を入力してください。', '例：1000');
  price = parseInt( price );

  var totalPrice = price + price*TAXRATE;

  document.write( '<h1>' );
  document.write( '金額' + price + '円の商品の消費税合算後の値段は、' + totalPrice + '円です。' );
  document.write( '</h1>' );
}
</script>
</head>
<body>
<h1>消費税合算後の値段</h1>
<p><button onClick="total()">試算する</button></p>
</body>
</html>