Webデザイン・マーケティング課 授業29日目

1〜3時間目 javascript（jQuery）演習
オリジナル教材

今日は、if文の続きや配列、オブジェクト、繰り返し処理の話。

■if文の続き

うるう年を計算できるif文を作る。

if (year % 400 == 0) {
    console.log(year + '年はうるう年');
} else if (year % 100 == 0) {
    console.log(year + '年はうるう年じゃない');
} else if (year % 4 == 0) {
    console.log(year + '年はうるう年');
} else {
    console.log(year + '年はうるう年じゃない');
}

基本的には満たされにくい順に書けば処理がおかしくなることは少ない。（ただしリソース的に考えると逆の方が良いが。。）

■配列について

配列は、「[」と「]」で括り、一つ一つのデータは、「,」で区切ってデータを入れていく。

//配列hairetsuを定義して、データを格納する
const hairetsu = ['データ1', 'データ2', 'データ3', 'データ4'];

//配列を出力
console.log(hairetsu[1]);
->データ2

また、使い方の一例として今日の日付を出力した。この時に、曜日のデータを配列にして、getDay()の値を添字(番号のこと)にする事で曜日を取得できる。

//配列weekを定義して、日〜土までのデータを格納する
const week = ['日', '月', '火', '水', '木', '金', '土'];
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const day = today.getDay();

//変数now_dateを作成し、年月日と曜日を結合
const now_date = year + '年' + month + '月' + date + '日' + '（' + week[day] + '）';

console.log(now_date);

■繰り返し処理

for文、for of文、 for in文を説明。（for in文はオブジェクトの説明の後に説明した）

for文を分解すると以下の様な順番で動いている事を説明。

配列を使った繰り返しの時は、for of文が便利。

//配列drinkを定義して、適当に飲み物の名前を格納
const drinks = [
    'ビール',
    'ウィスキー',
    '日本酒',
    '麦焼酎'
];

//for of文で繰り返し処理
for (drink of drinks) {
    console.log(drink);
}

オブジェクトを全部出力する時は、for in文が便利。

//オブジェクトcatを定義し、データを格納
const cat = {
    'name': 'みけ',
    'type': 'ミックス',
    'age': '4',
    'seibetsu': 'オス',
    'color': '黒'
}

//for in文で出力
for (key in cat) {
    console.log(key + 'は、' + cat[key]);
}

■オブジェクトについて

オブジェクトは、「{」と「}」で括り、「キー:値」の組みを「,」で繋いで複数指定する。

//オブジェクトcatを定義し、データを格納
const cat = {
    'name': 'みけ',
    'type': 'ミックス',
    'age': '4',
    'seibetsu': 'オス',
    'color': '黒'
}

■まとめ

今日でjavascript2日目。

とりあえず一緒に書き進めることはできるけど、その一つ一つが何に使えるのかまでは多分わからない。

なるべく一つ一つ、仕事で使う例を説明しながら進めた。