JavaScript

訓練内容まとめ。その弐!

More than 3 years have passed since last update.

 さて、あれから訓練も進み、まとめが出来るくらいの内容になりましたので、若干のタイムラグはあるのですが、まとめていきたいと思います。

 この訓練はどちらかというと、習うより慣れろ、みたいなとこがありまして、座学というものはあるのですが、聞く前に実際にコードを書いて、試してみるということの方が多いです。

 本当はその方が覚えるのだとは分かっているのですが、基礎からしっかり覚えていきたい私には、どうも苦手な分野です(´・ω・`)

プログラミング基礎

・プログラミング

プログラムを書き始める前に、どんなものを作りたいのかフローチャートで絵にしてみる

・alert(    );

ブラウザにアラートを出す

・Boolean?

true or falseの二つで判断する

・四則演算









先に計算するときは()で囲む

1+2+3*4←先に3*4が計算される

(1+2)+3*4←先に(1+2)が計算される

インクリメント a++

デクリメント  a--

・文字列の扱い String

" "または' 'で囲む。" "内で更に" "を使う場合、エスケープシーケンスの「バックスラッシュ"」で囲む

 " "文字" "←これは正確に認識されない

 " \"文字\" "←これは認識される

もしも' 'で囲んでいたら' "文字" '←認識される

・エスケープシーケンス

改行 \n

タブ \t

・比較演算子(全角になってます)

==  左右の値が同じなら

===  左右の値が厳密に同じなら

!=  左右の値が異なるなら

!==  左右の値が厳密に異なるなら

〉  超える、~より上

<  未満、~より下

〉=  以上

<=  以下

・変数 variable

var @@@

変数の宣言。メモリの一部を使用すると宣言する

変数とは箱のようなもの

var @@@ = ^;

「変数@@@という箱の中に、^と値が格納されている」

・if文

if(条件式){

 実行する処理;

}

//もしも条件式があっているのなら、処理を実行する。

if(条件式){

 実行する処理;

}else{

 実行する処理2;

}

//もしも条件式があっているのなら、処理を実行

//条件式があっていないのなら、処理2を実行

if(条件式){

 実行する処理;

}else if(条件式2){

 実行する処理2;

}else{

 実行する処理3;

}

//もしも条件式があっているのなら、処理を実行

//条件式には当てはまらないが、 条件式2にはあてはまるなら処理2を実行

//どちらにも当てはまらなければ、処理3を実行

if(条件式){

 if(条件式2){

  実行する処理;

 }else{

  実行する処理2;

 }

}

//条件式にあてはまり、さらに条件式2にあてはまれば、処理を実行

//それ以外の場合は処理2を実行

if(条件式1 || 条件式2){

 実行する処理;

}

//条件式1または条件式2にあてはまるなら、処理を実行

if(条件式1 && 条件式2){

 実行する処理;

}

//条件式1かつ条件式2にあてはまれば、処理を実行

・while文…falseがないと無限ループ

var i = 0;

 while(条件式){

  実行する処理;

 }

//whileの条件式がtrueの間は処理を実行、falseになったら終了

 ex)

 var flg = true;

 var i = 0;

 while(flg) {

  i++;

   if( i>10 ) {

     flg = false;

   } else{

     console.log(i);

   }

 }

//変数flgはtrue、変数iには0が入っている

//iに1ずつ足していく

//もしもiが10より大きければflgをfalseにする

//iが10より小さければ出力

・for文

for(条件式1;条件式2;条件式3){

 実行する処理;

}

 ex)

 var owari = 10;

 for( i = 0; i < owari; i++){

  console.log(i);

 }

//変数owariには10が入っていて、iは0、iが10より小さければiに1を足す。その結果を出力する

*ループから抜けるとき、break

・関数

function 関数名(引数){ //関数の定義

 実行する処理;

}

関数名(); //関数の呼び出し

*結果を返す、return

 ex)

 function adf(){

  var a = 10;

  var b = 20:

  var result = a+b;

  console.log(result);

 }

//addという関数を作った。

 ・aという変数には10が入っている

 ・bという変数には20が入っている

 ・resultという変数にはa+bの答えを入れる

//コンソールに出力する処理

 ex2)

 function popup(){

  var element = document.getElementById("@@@");

  console.log(element.value);

 }

//popupという関数を作った

//elementという変数に、document内の@@@というIdの中にあるものを参照して格納する

//コンソールにelementに格納された内容(value)を出力

*document 文章 html文のこと

*element  要素 タグのこと

・グローバル変数

var @@@;

 function 関数名(){

  実行する処理;

 }

プログラム全体でスコープ可能

・ローカル変数

function 関数名(){

 var @@@;

  実行する処理;

}

その関数内でのみスコープ可能

*varを省略するとグローバル変数になるので、ほかでも使える

・配列 array

1 配列名 = new array(要素名);

 配列名[0] = "要素1";

2 配列名 = new array("要素1", "要素2", "要素3",..."要素n");

3 配列名 = ["要素1", "要素2", "要素3",..."要素n"];

 ex)

 bar hairetsu = ["要素1", "要素2"];

 hairetsu.push("要素3");

//配列を宣言、要素1と要素2が箱の中に入っている

//pushで箱庭要素3を追加

インデックス

配列のそれぞれに振られる通し番号。「0」から始まる

length

文字列→文字の数

配列 →箱の数

 ex)

 for( i=0; i<hairetsu.length; i++){

  console.log(hairetsu[i]);

 }

//iがhairetsuより小さければiに1を足していく

・ハードコーディング

特定の動作や環境を決めうちして、その動作環境で動作することを前提とした処理やデータをソースコード内に書き込んでしまうプログラミング方式

・マジックナンバー

製作者がプログラミング中に書かれた具体的な数値の意図を把握しているが、他のプログラマーやその製作者が意図を忘れたとき、コードを閲覧すると、数字の意味は分からないのに、なぜかプログラミングが正しく動くという皮肉

・フルスクラッチ

既存のものをいっさい流用せず、全くの新規に開発すること