うにょママ 
復習をかねたプログラミング学習の記録と備忘録です。
Day1～3で学んだこと「JavaScriptの基礎」
JavaScriptでできること
JavaScriptはサイトにいろいろな動きをつけられる
- ポップアップウィンドウ
- 詳細メニューの表示
- 画像のスライド
極めれば他にもいろいろなことができる
- リアルタイムで動くグラフ(株価など)
- Web上で動くゲーム
- スマホアプリ
【Day1】JavaScriptの基本文法を学ぼう①
変数とは
数値や文字列を入れる箱。
その箱に名前（変数名）をつけ、中身のデータの代わりに変数名を書いて使い回すことで、同じ処理が簡単にできる。
中身には文字列、数値、配列など、いろいろな型を入れることができる。
【変数の書き方】
var 変数名 = “値、文字列”;
変数にはvarの他にletという宣言方法もある。
変数以外にconstを利用した定数の宣言も可能。
・var➞再宣言、書き換えが可能
・let➞再宣言が禁止
・const➞再宣言、書き換えが禁止
定数とは
- 定義時に値を入れ、それ以降書き換えができない
- 主に固定値など、誤って書き換えてはいけないものに使う
Functionの先頭やソースの先頭で定義して、クラス全体で使用することが多い。
変数同様に様々な型を入れることができるが、文字列か数値がほとんど。
関数とは
同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの
プログラム中に何度も出てくる処理のセットをまとめてどこかに記述しておき、 使うときはその関数名を書くだけで同じ動作をさせることができる機能。
関数を使えば、何度も同じ様な記述をする必要がなくなり、バグが見つかった際もこの一箇所のみを修正すればいい等、メンテナンスがとても簡単になる。
＜関数：基本のかたち＞
一番シンプルな書き方
<script>
function 関数名( ) {
処理
}
</script>
＜関数：引数や返り値を入れる場合＞
引数は幾つ入れてもよく、必要な分だけ「,」で区切って入れる。
※引数とは・・・プログラムコードが関数を呼び出すときに相手に渡す値。 呼び出された側では、この引数に応じて処理を行なう。
returnというキーワードを使い、関数のなかで処理した結果である返り値を取得できる
<script>
function 関数名(引数1,引数2,…) {
処理
return 返り値;
}
</script>
条件分岐とは
「条件によって処理を分ける」機能
(例)年齢が20歳以上ならお酒を販売する、20歳未満ならお酒を販売しないといったもの
条件分岐には、『if文』という書き方と、『switch文』という書き方がある。
if文とswitch文の違い
書式の違いによるソースコードの読みさすさと実行速度。
分岐処理には、「二分岐」と呼ばれる、2つの処理のどちらかを実行するものと、「多分岐」と呼ばれる、3つ以上の処理のどれか一つを実行するものがある。
✅二分岐の場合は、『if文』が適している
if (条件式) {
条件式が正しい(true)ときの処理
} else {
条件式が正しくない(false)ときの処理
}
✅多分岐の場合は、『switch文』が適している
switch (条件式） {
case i:
条件式がiのときの処理
break;
case j:
条件式がjのときの処理
break;
case k:
条件式がkのときの処理
break;
・・・
default:
上記以外のときの処理
break;
}
【Day2】JavaScriptの基本文法を学ぼう②
配列（Array）とは
「データのまとまり」
複数の値を代入することができる変数。(「変数」には値を１つしか代入できない)
【配列の宣言】
配列を宣言する方法は2種ある。
- 「Array（配列コンストラクタ）」を使う
- 配列リテラル「[ ]」を使う←こっちが主流
var hairetsu = ['大阪府', '兵庫県', '京都府','滋賀県'];
document.write(hairetsu);【配列の要素を取得】
「配列名[要素番号]」と記述する。
//配列リテラルを用いて配列を宣言
var hairetsu = ['大阪府', '兵庫県', '京都府','滋賀県'];
//hairetsuの０番目の要素を取得
document.write(hairetsu[0]);
//hairetsuの１番目の要素を取得
document.write(hairetsu[1]);
要素番号（インデックス）は、０番から始まる
オブジェクト（Object）とは
変数と関数の集合体、データの集まり。
配列は『連番が付けられた変数(データ)の集合体』であるが、『オブジェクト』とは『独自の名前』を持ったデータの集合体のようなもの。
(例)traffic_light（信号機）という変数を作り、色に応じてメッセージが表示されるようなプログラムを書く。
【各プロパティの呼び出し】
変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出せる。
プロパティblue: “go”を呼び出す↓
<script>
const traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop"
}
console.log(traffic_light.blue);
</script>
【Day3】Web制作初心者のためのjs基礎講座（DOM操作）
DOMとは
HTMLなどのドキュメントにJavaScriptからアクセスするための仕組み
JavaScriptを使ってHTMLの文章の色を変更したり、ボタンをクリックしたら画像が切り替わったり、そういったことをするための仕組み。
【DOMの3つの特徴】
- ツリー構造と呼ばれる階層構造がある
- それぞれの階層のことを「ノード」という
- WEBページとJavaScriptなどのプログラミング言語とを繋ぐ役割を持つ
【オブジェクトを取得する関数は5種類】
- getElementById() → ID名から取得する
- getElementsByClassName() → クラス名から取得する
- getElementsByName() → name属性から取得する
- getElementsByTagName() → タグ名から取得する
- getElementsByTagNameNS() → タグ名からNodeListを取得する
(例) img タグの src 属性だけを変えたい。
setAttribute を使う。
let element = document.getElementById("change");
element.setAttribute("src", "./images/changed.png");
// idがchangeの要素のsrc属性を"./images/changed.png"にする
まとめ
いよいよ中級編に突入！！
これまで勉強してきたHTML、CSSとは全く違う内容で少々とまどいました。
まだ自力でコードを書いていなので、ぼんやりとしか理解していない感じです。
でもいよいよプログラミング学習という感じでワクワクしています！