【確かな力が身につくJavaScript「超」入門】を読んだので、まとめてみた

JavaScript

この本の目的

JavaScriptで書かれたプログラムを理解することができる。
既存のプログラムを少しアレンジし、新しいプログラムを作ることができる。
いざとなったら自分でゼロから書ける。

Chapter1 イントロダクション

JavaScriptはブラウザを操作するためのプログラミングで、HTMLやCSSだけではできないことをするために使う。

ブラウザを操作するとは？

HTML・CSSの特徴として、一度ブラウザに読み込まれたらもう変化しない。不変で、静止したデータと言える。

JavaScriptを使うと、静止データのHTMLやCSSをリアルタイムで書き換えることができる。

JavaScriptの基本的な処理の流れ

  1. イベント発生：いつ実行するかを指示
  2. インプット：情報の取得
  3. 加工：計算など
  4. アウトプット(出力)：HTML・CSSを書き換え

Chapter2 アウトプットの基本

JavaScriptの基本文法

何かを実行させたいときは「〇〇は▲▲を✖︎✖︎しなさい」と命令する。

// 例 
console.log('おうむ返し');

// 解釈すると
// console は 'おうむ返し' を log(出力) しなさい

「○○は」に当たる部分は、オブジェクトと呼ぶ。　例：console、windowなど

オブジェクトはいろいろあり、ブラウザ上でのオブジェクトは5つある。

「✖︎✖︎しなさい」に当たる部分は、メソッド と呼ぶ。　例：log()など

メソッドはオブジェクトにさせたいことを指示する。

それぞれオブジェクトには、あらかじめ使用できるメソッドが用意されている。

メソッドには最後に必ず()が付く。これは「しなさい」を意味している。

「▲▲を」に当たる部分は、パラメーターと呼ぶ。　例：’おうむ返し’、2など

メソッドの()内に文字列や数字を記載する。

JavaScriptはどこに書く？

  1. HTMLに直接書く方法
<script>
ここにコードを書く
</script>

2. 外部のJavaScriptファイルを読み込む(一般的な方法)

<script src="HTMLファイルからのパス"></script>

外部ファイルを読み込む際は<script>タグの間に何も記載しないこと。

HTMLとJavaScriptのプログラムを別々にした方が管理しやすく、見やすいコードになる。

オブジェクト・メソッド・プロパティ

アラートダイアログを表示する

window.alert(出力したいテキストや計算式);

windowオブジェクトのalertメソッドを使用している。

HTMLを書き換える

  1. HTMLの要素の取得 document.getElementById('id名')
  2. 取得した要素を書き換える textContent
document.getElementById('id名').textContent = 書き換えたい文字列、数式;

textContentのことを「プロパティ」と呼ぶ。プロパティはオブジェクトの状態を表す。

全てのオブジェクトは、メソッド以外に「プロパティ」を持っている。

わかりやすく言い換えると「〇〇オブジェクトの□□は☆☆である/にする」

□□は「プロパティ」、☆☆は「プロパティの値」を表す。

プロパティの値は読み取り書き換えが可能である。

確認ダイアログを表示する

window.confirm(メッセージ);

confirmメソッドは返り値にtrueかfalseを返す。

プロンプトを表示

window.prompt(メッセージ);

プロンプトは、テキストフィールドを持つダイアログボックスを表示します。

ダイアログの「OK」をクリックすると、テキストフィールドに入力した値を返り値として保存。

「キャンセル」だと何もおこらない。

Chapter3 JavaScriptの文法と基本的な機能

この本で使用するコードをダウンロードできます。

『確かな力が身につくJavaScript「超」入門 第2版』サンプルデータ | SBクリエイティブ
本書の学習で使用するサンプルデータです。 下記リンクからダウンロードし、ローカル環境上に解凍してお使いください
www.sbcr.jp

数当てゲーム

3-04_comparisonフォルダにプログラムがある。

実装の流れ

  1. Math.random()メソッドでランダムな数値を作成
  2. window.prompt()で入力した値を受け取る
  3. 受け取った値をif~else if条件分岐で当たりかハズレか判断
  4. window.alert()で当たり、ハズレを表示

ポイント

Math.floor()で少数点以下の数値を切り捨てし、整数のみ受け取るようにする。

window.prompt()で受け取った値は文字列なので、paraseInt(変換したい文字列)で数値に変換。

コンソールでモンスターを倒せ

3-07_monsterフォルダにプログラムがある。

実装の流れ

  1. モンスターの体力を変数で定義
  2. あなたの攻撃力をMath.random()で決定
  3. console.log()で与えたダメージを表示
  4. 与えたダメージをモンスターの体力から引く
  5. 2〜4をwhileで体力が0になるまで繰り返し実行
  6. 体力が0以下になったら、console.log()で「モンスターを倒した」と表示

ポイント

while(モンスター体力 > 0)で体力が0以下になるまで繰り返し処理を実行する。

while文の中で定義した変数、定数は1回繰り返しが終了すると消去され、参照できなくなる。

‘文字列' + 変数 か `文字列${変数}` で文字列と変数の値を連結できる。

無限ループに注意する。

項目をリスト表示する(配列)

3-10_arrayフォルダにプログラムがある。

実装の流れ

  1. let 変数名 = [データ1,データ2,、、、]で配列を定義
  2. 配列の項目を読み取るために、for....of文を使用する
  3. for....of文の処理に、項目を表示する処理を書く

ポイント

// for....of文
for(let 変数名 of 対象となる配列名) {
  処理内容
}

配列にデータを追加・削除するメソッド

メソッド名意味
配列.pop()配列の最後のデータを削除
配列.push(データ)配列の最後にデータを追加
配列.shift()配列の最初のデータを削除
配列.unshift(データ1,データ2)配列の最初にデータを追加

まとめ

  • JavaScriptは、ブラウザを操作するためのプログラミング
  • JavaScriptの処理の流れは、イベント発生→インプット（入力）→加工→アウトプット（出力）
  • 実行させたいときは「〇〇は▲▲を✖︎✖︎しなさい」
    • 〇〇は「オブジェクト」、▲▲は「パラメーター」、✖︎✖︎は「メソッド」
  • 読み取り書き換えさせたいときは「〇〇オブジェクトの□□は☆☆である/にする」
    • □□は「プロパティ」、☆☆は「プロパティの値」
  • 一般的に外部のJavaScriptファイルを読み込む方法を使う
  • アラートダイアログを表示する window.confirm(メッセージ);
  • 特定のid名を持つ要素を丸ごと取得する document.getElementById('id名');
  • 取得した要素のコンテンツを書き換える document.getElementById('id名').textContent = 書き換えたい文字列;
  • 確認ダイアログを表示する window.confirm(メッセージ);
  • プロンプトを表示する window.prompt(メッセージ);

とりあえず第3章までまとめました。

コメント

タイトルとURLをコピーしました