はじめに

こんにちは。のりべんと申します。
この度プログラミング学習のoutputの場（兼文書作成の練習）を設けるために
Qiitaを開設しました。
自分の学習内容が後の初学者のお供になれるような、
誰が見ても分かりやすい記述
を心がけていこうと思います。よろしくお願いします。

投稿主詳細

• （一応）理系大学院卒
• システムエンジニア1年目
• 後々はマネジメントに携わるより永遠とプログラム組んでスペックを上げたい
• paiza:Aランク（確かCで取ったけどコーディングはお察し）
• python使って画像処理したりunityでc#かじったり（鼻くそ程度）

JavaScriptの振り返り

ここからは教材で学習した内容をoutputしていきます。
使用した教材はこちら
それでは以下常体。

JavaScriptって何？

簡潔に言うとHTMLやCSSだけでできないことを補うブラウザ操作のためのプログラム言語。
webページは基本的にHTMLとCSSで構成される。
しかしHTMLとCSSだけでは静的（一度ブラウザに読み込まれたら変化しない）なwebページとなる。
webページをその場で書き換えて動的（リアルタイムに書き換えて動きをつける）にすることを可能にするのがJavaScriptなのである。

キーワード

• ブラウザを操作することができる
• HTMLやCSSだけではできないことを補うために使う
• HTMLやCSSをリアルタイムに書き換えられる

↑この小計が

↑数量を変更した時、ページ読み込み無しで表示が変化するのが動的なwebサイトと言える

JavaScriptでHTMLやCSSを書き換える

では具体的にどのような書き換えを行っているのか？
HTMLやCSSの書き換えには大きく分けて4パターンある。
これらの書き換えはブラウザの表示に即座に反映される。
（ページの再読み込みは必要ない。）
これにより
ホームページではない、アプリらしい動きのwebページを作ることができる。

パターン１　タグに囲まれたテキストの書き換え

例）タグ内の書き換え

<p>こんにちは</p>

↑これを

<p>さようなら</p>

↑にJavaScriptが書き換えてくれる

パターン2　要素の追加、削除

例）タグの追加

<ul>
   <li>こんにちは</li>
</ul>

↑これに

<ul>
   <li>こんにちは</li>
   <li>元気ですか？</li>
</ul>

↑liタグで「元気ですか？」とJavaScriptが追加してくれる

例）タグの削除

<ul>
   <li>おはようございます</li>
   <li>寒くなってきましたね</li>
</ul>

↑このliタグの寒くなってきましたねを

<ul>
   <li>おはようございます</li>
</ul>

↑JavaScriptで削除できる

パターン3　タグの属性を変更

例）srcタグの属性の値を変更

<img src = "noriben.jpg">

↑この場合noriben.jpgというファイル名がsrcタグの属性の値となる。これを

<img src = "karaben.jpg">

↑JavaScriptでkaraben.jpgに値の変更ができる

パターン4　CSSの値を変更

例）CSSのの背景色の変更

body{
   background:#ffffff;
}

↑CSSでwebサイトの背景色を設定しているところを

body{
   background:#fff100;
}

↑JavaScriptで中身を変更することができる

JavaScriptの基本的で重要な役割

JavaScriptの重要な役割は次の2点

• ブラウザに表示されているHTMLやCSSを書き換える
• ブラウザに表示されているHTMLやCSSから情報を読み取る

上記では書き換えに関する内容を説明したが、実際には情報の読み取りも可能である。
例）住所などの入力フォームに入力された内容の読み取りなど

JavaScriptの仕組み

では、実際にJavaScriptがどのような書き換えを行っているのかを具体的な例で見ていきます。

例）ネットでポケモンカード拡張パックを買う場合（消費税は考慮しない）
※ポケモンカードは1パック150円とする。
ネット通販なんかで購入しようとするとおそらくこのようなフォームが想像できるでしょう。
（数量はユーザーが書き換え可能）

品名　　　　　　　　　　｜単価　｜数量 ｜小計
ポケモンカード拡張パック｜     ｜    ｜
列空の覇者　　　　　　　｜150  ｜1   ｜150

これは単価と数量によって小計が変化するため、JavaScriptでは単価と数量を取得する。
そこから取ってきた値を掛け合わせた数を小計として出力していく。

品名　　　　　　　　　　｜単価　｜数量 ｜小計
ポケモンカード拡張パック｜     ｜    ｜
列空の覇者　　　　　　　｜150  ｜3   ｜450

↑単価と数量をJavaScriptで取得して小計を出力している

この処理は4つのステップに分けることができる。

1. 単価をHTMLから取得
2. 数量をHTMLから取得
3. 単価×数量で小計を計算する
4. 計算結果を使ってHTMLを書き換える

1、2に関しては必要なデータを取得するこのステップはインプットのステージ
3に関してはインプットされたデータを加工して結果を得るステージ
4に関しては加工して得られた結果を出力するアウトプットのステージ
ということができる。
JavaScriptでは
インプット → 加工 → アウトプット
という流れが共通する処理の流れとなる。

JavaScriptのイベント

インプット → 加工 → アウトプットはJavaScriptの処理の一連の流れである。
ではこの処理はどのタイミングで発生するのか？
今回の例であれば「パックの数量が変更された時」である。
数量の変更されたタイミングで
単価と数量がHTMLから取得され（インプット）
→単価と数量が掛け合わされ（加工）
→小計として合計値が出力される（アウトプット）
が行われ、数量を変更するたびに描画が繰り返される。
この処理のきっかけのことをJavaScriptではイベントと呼ばれている。

終わりに

今回はJavaScriptがどのような場面で使われるか、どのような働きをするか、その仕組みについて取り上げていきました。
次回からはJavaScriptのアウトプットについて触れていきます。
以上となります。お疲れ様でした。