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

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く
ENTACL GRAPHICXXX
SBクリエイティブ
売り上げランキング: 188,421

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

学習メモを記事化する。

スポンサーリンク




Chapter1:Javascriptとは

・javascriptでできること
・HTML/CSS/Javascriptとの違い
 本に例えると
 ・HTMLは本に書かれている文章
 ・CSSは文章の行間や装丁などの装飾
 ・Javascriptはページをめくるユーザーの動作
 1つのサイト(本)はこれらの要素が加わったものをみている
・制作環境のインストール
 ブラウザ→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ではない
★「1つの対象」に対して「複数の分岐」がある場合に便利なのが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 関数名(引数1,引数2…) {
 処理
 }
 関数名(引数1,引数2…);
・組み込み関数→JSで最初から用意されている関数
 ユーザー定義関数→ユーザー自身が定義する関数
・「引数」は関数を実行させる(呼び出す)時に、呼び出し元から値を取得し、
 その値を関数の中で使って処理を実行できるという大きな利点がある
・関数には「戻り値」(返り値)を設定できる。
 関数の中で処理を実行した後、関数の中で取得した値を呼び出し元に戻すことができる。
 function 関数名(引数1,引数2…) {
 処理
 return 戻り値;
 }
 var 戻り値を受ける変数 = 関数名(引数1,引数2…);
 
 戻り値は処理を行った後に「return」の後ろに記述することで呼び出し元に返せる。

・変数は2種類ある
 ローカル変数→関数内で定義する変数。定義された関数内でのみ使用できる。
 グローバル変数→関数の外で定義する変数。記述しているJavaScript全体で使用できる変数となる

・関数化のコツ
 プログラムの中で行われている細かな処理(機能)をそれぞれ関数にまとめる
 
 関数化する際には、まず「引数」「戻り値」が必要かを考える
 ・引数は機能を処理するのに必要な値
 ・戻り値は機能を処理した後に返すべき値があった場合に必要
 

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする