【JS】本当によくわかるJavaScriptの教科書学習メモch.1～ch.5

本当によくわかるJavaScriptの教科書はじめての人も、挫折した人も、基礎力が必ず身に付く

posted with amazlet at 19.07.18

ENTACL GRAPHICXXX
SBクリエイティブ
売り上げランキング: 188,421

Amazon.co.jpで詳細を見る

本棚の肥やしになっていたので、引っ張り出して勉強開始。
プログラミングを全く知らない人に対してかかれており、導入が非常に丁寧。
変数、関数、if、forなど様々な言語に共通したお話も勉強できる。

学習メモを記事化する。

Chapter1：Javascriptとは

・javascriptでできること
・HTML/CSS/Javascriptとの違い
　本に例えると
　・HTMLは本に書かれている文章
　・CSSは文章の行間や装丁などの装飾
　・Javascriptはページをめくるユーザーの動作
　１つのサイト（本）はこれらの要素が加わったものをみている
・制作環境のインストール
　ブラウザ→chrome
　エディタ→brackets
　

Chapter2：Javascriptの基本

・ブラウザの開発者モード（console）の使い方
・consoleからのエラーの確認の仕方
・変数とは
　var 変数名 = 値;
・データ型
・数値型
　var x = 1; //数値として読み込み
　var x = “1”; //ダブルコーテーションorシングルコーテーションで囲むと文字として読み込み
　
・javascriptの計算/演算子
・alert (変数); →ダイアログボックスで表示
　console.log (変数); →コンソール上で表示
・文字列の結合方法
・特殊文字の使い方（エスケープシーケンスの使い方）
・配列
　var 配列名 = [値1,値2,値3…];
　アクション映画を例にしたイメージでいうと、
　・ジャンル「アクション」という箱＝配列に、
　作品＝値が格納されている。
・配列からのデータの取得方法
　配列名[データの番号]
・配列の中に入っているデータの数を取得する
　配列名.length
・ダイアログボックスの種類
　警告　alert()
　確認　confirm()
　入力　prompt()
・HTMLファイルからJSファイルを読み込む方法
　
　
　
　※JSのリンクはの直前で定義するのがベター
・HTMLファイル内に直接javascriptを記述する方法
　
　
　
・読みやすいコードの書き方のコツ
　・コメントを使用する
　・スペース、タブを活用する
　・インデント（字下げ）をつける

Chapter3：条件分岐の概要

・if else の使い方
　if (条件式){
　 true // 条件式に合致する場合に行われる処理
　}
　else {
　 false　// 条件式に合致しない場合に行われる処理
　}
・elseを定義していなければ、falseの場合何もしない
・比較演算子の種類
　データ型を考慮して、等しい→「===」
　データ型を考慮して、等しくない→「!==」
　★「==」「!=」はデータ型を考慮せずに比較
・複数条件の場合、else ifで定義を増やす
　if (条件式A) {
　条件式Aがtrueの時の処理
　}　else if (条件式B){
　条件式Aがfalse(偽)であるが、条件式Bがtrue(真)の時の処理
　} else {
　条件式AにもBにも当てはまらない時の処理
　}
・and(かつ)条件の作り方
　if (条件式A){
　}if (条件式B){
　条件式AとBが両方true（真）の時の処理
　}
　else{
　条件式Aのみがtrue(真）の時の処理
　}
　}
★複雑な条件分岐を一から作っていくときは図解を自分で組み立てて整理することがとても大切。
・論理演算子
　a && b →aかつb
　a || b　→aまたはb
　!a　→aではない
★「１つの対象」に対して「複数の分岐」がある場合に便利なのがswitch文
switch(条件) {
case 値1:
// 処理
break;

case 値2:
// 処理
break;

case 値3:
// 処理
break;

default:
// 　分岐に当てはまらない場合の処理
}

「case」の終わりには「break;」と書き、分岐の終了を明確にする。
「case」に続く値の文末には「;」ではなく、「:」を使う。

Chapter4：繰り返し

・繰り返しのイメージ
　繰り返し(繰り返し条件){
　繰り返し条件に当てはまった時の処理
　}
・繰り返しの回数が決まっているもの　→for文
・繰り返しの回数が決まっていないもの　→while文
・for文
　for (初期値;繰り返し条件式;値を増減させる式){
　カッコ内の条件に合致した時の処理
　}
・インクリメント演算子　i++ / ++i
・デクリメント演算子　i– / –i
・forと配列
　配列名.length は指定した配列のデータ数を返す
・consoleでの実行はjsファイルをドラッグアンドドロップで入れると楽
・while文
　while (繰り返し条件式){
　カッコ内の条件に合致するまで行う処理
　}
　～の間まで～を行う処理
・通常のwhile文　→　一度も処理を行わない
　do～while文　→　必ず一度処理をおこなってから条件式を判断し、
　　　　　　　　　　条件に合致すれば繰り返し処理をはじめる。
　do {
　カッコ内の条件に合致するまで行う処理
　}while(繰り返し条件式);
・ランダムな値を以下の範囲で出したいとき
　MAX＝80、MIN＝30
　Math.floor(Math.random() * (80-30)+1) + 30
・Math.random()は0から1未満の少数（0~0.999・・・）をランダムに返す。

Chapter5：関数

・関数とは
　複数の処理をまとめて定義し、いつでも呼び出せるようにする仕組みのことを指す。
・同じ処理が複数個所あるなら、関数で定義しておけば、
　わかりやすいコードにでき、修正作業の簡略化、作業ミスの減少を期待できる
・関数の構文
　function 関数名（引数１,引数２…） {
　処理
　}
　関数名（引数１,引数２…）;
・組み込み関数→JSで最初から用意されている関数
　ユーザー定義関数→ユーザー自身が定義する関数
・「引数」は関数を実行させる（呼び出す）時に、呼び出し元から値を取得し、
　その値を関数の中で使って処理を実行できるという大きな利点がある
・関数には「戻り値」（返り値）を設定できる。
　関数の中で処理を実行した後、関数の中で取得した値を呼び出し元に戻すことができる。
　function 関数名（引数１,引数２…） {
　処理
　return 戻り値;
　}
　var 戻り値を受ける変数 = 関数名（引数１,引数２…）;
　
　戻り値は処理を行った後に「return」の後ろに記述することで呼び出し元に返せる。