デイトラWeb制作 中級編『JavaScript学習編 Day1~3』学習記録

WEB制作
うにょママ
うにょママ

復習をかねたプログラミング学習の記録と備忘録です。

スポンサーリンク

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)とは

「データのまとまり」

複数の値を代入することができる変数。(「変数」には値を1つしか代入できない)

参照:【JavaScript】配列とは?初心者向けに3分で解説

配列の宣言】

配列を宣言する方法は2種ある。

  • Array(配列コンストラクタ)」を使う
  • 配列リテラル「[ ]」を使う←こっちが主流
var hairetsu = ['大阪府', '兵庫県', '京都府','滋賀県'];

document.write(hairetsu);

配列の要素を取得】

「配列名[要素番号]」と記述する。

//配列リテラルを用いて配列を宣言
var hairetsu = ['大阪府', '兵庫県', '京都府','滋賀県'];

//hairetsuの0番目の要素を取得
document.write(hairetsu[0]);

//hairetsuの1番目の要素を取得
document.write(hairetsu[1]);
注意

要素番号(インデックス)は、0番から始まる

オブジェクト(Object)とは

変数と関数の集合体、データの集まり。

配列は『連番が付けられた変数(データ)の集合体』であるが、『オブジェクト』とは『独自の名前』を持ったデータの集合体のようなもの。

(例)traffic_light(信号機)という変数を作り、色に応じてメッセージが表示されるようなプログラムを書く。

オブジェクトはプロパティを持つ
参照:JavaScriptでオブジェクトを使う方法【初心者向け】

各プロパティの呼び出し

変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出せる。

プロパティ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などのプログラミング言語とを繋ぐ役割を持つ
スクリーンショット 2020-06-03 21.36.46
参照:JavaScript入門講座③ – DOMを理解してページを操作しよう

オブジェクトを取得する関数は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とは全く違う内容で少々とまどいました。

まだ自力でコードを書いていなので、ぼんやりとしか理解していない感じです。

でもいよいよプログラミング学習という感じでワクワクしています!

コメント

タイトルとURLをコピーしました