javascript覚書

基本

'use strict'; //厳密なコードチェック
console.log('it\'s me!'); //カンマを使いたい場合
console.log('hell\no wor\tld'); //改行 タブ
console.log('hello' + 'world'); //くっつける場合

数値の計算

console.log(10 + 3); // 13
console.log(10 - 3); // 7
console.log(10 * 3); // 30
console.log(10 / 3); // 3.333....
console.log(10 % 3); // 1
console.log(10 ** 3); // 1000

console.log(2 + 10 * 3); // 32
console.log((2 + 10) * 3); // 36

定数

・数値だけだと何の値かパッと見わからないが、「price」とすることでわかりやすくなる。
・一か所だけ変更すればOKなので、ミスが減る。

const price = 150;

console.log(price * 140);
console.log(price * 160);

変数

・varは色々と問題があるので、あまり使わない方が良い。
・なるべくconstを使う。どうしても必要な時だけletを使う。

変数・定数の命名規則

// 定数 const
// 変数 let var

let price = 150;
console.log(price * 140);
console.log(price * 160);

price = 170;
console.log(price * 140);
console.log(price * 160);

変数を使った計算

// 変数 let

let price = 500;

// price = price + 100;
price += 100; // 600

price *= 2; // price = price * 2 // 1200

// price = price + 1;
// price += 1;
price++; // 1201

price--; // price -= 1 // 1200

console.log(price);

データ型

・undefined 定義されていない
・null 値がない
・typeof 判定をする時に使う

console.log(typeof 'hello');
console.log(typeof 5);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

数値のような文字列

・NaN…Not a Number の略

console.log('5' * 3); //文字列にもかかわらず計算される
console.log('5' - '3'); //文字列にもかかわらず計算される

console.log('5' + 3); //例外として、プラスの場合は53となり文字列がくっつく
console.log(parseInt('5', 10) + 3); //10というのは十進数の整数値にしてください という意味。こうすると8になる

console.log(parseInt('hello', 10)); //NaN になる

#12 ifで条件分岐をしてみよう

・>=  ●●以上

// if

const score = 40;

if (score >= 80) {
  console.log('Great!');
} else if (score >= 60) {
  console.log('Good');
} else {
  console.log('OK');
}

#13 条件演算子を使ってみよう

・構文を短縮できる。
・わかりづらいので、積極的に使わなくてもよい。他の人が使っていることがあるので、覚えておくと良い。

const score = 85;

// if (score >= 80) {
//   console.log('Great!');
// } else {
//   console.log('OK...!');
// }

score >= 80 ? console.log('Great!') : console.log('OK...!');

#14 論理演算子を使ってみよう

・論理演算しを使うと、コードがスッキリする。

const score = 60;
const name = 'taguchi';

// && なおかつ(AND)
// || もしくは(OR)
// ! 〜ではない(NOT)

// if (score >= 50) {
//   if (name === 'taguchi') {
//     console.log('Good job!');
//   }
// }

if (score >= 50 && name === 'taguchi') {
  console.log('Good job!');
}

#15 switchで条件分岐をしてみよう

・switchを使うとコードがスッキリする。

const signal = 'pink';

// if (signal === 'red') {
//   console.log('stop!');
// } else if (signal === 'yellow') {
//   console.log('caution!');
// } else if (signal === 'blue'){
//   console.log('go!');
// }

switch (signal) {
  case 'red':
    console.log('stop!');
    break;
  case 'yellow':
    console.log('caution!');
    break;
  case 'blue':
  case 'green':
    console.log('go!');
    break;
  default:
    console.log('wrong signal!');
    break;
}

#16 forを使ってループ処理をしよう

・バッククォートは shift+@。
・`${ }`

// for

for (let i = 1; i <= 10; i++) {
  // console.log('hello');
  // console.log(i + ' hello');
  console.log(`${i} hello`);
}

#17 whileによるループ処理をしよう

・whileで無限ループになると、ブラウザを再起動する必要が出てくることがある。
・whileのかわりにforで書き換えることもできる。

// while

// let hp = 200;
//
// while (hp > 0) {
//   console.log(`${hp} HP left!`);
//   hp -= 15;
// }

for (let hp = 200; hp > 0; hp -= 15) {
  console.log(`${hp} HP left!`);
}

・continue スキップする。
・実行を止めたい時は break

for (let i = 1; i <= 10; i++) {
  // if (i === 4) {
  // if (i % 3 === 0) { //3の倍数はスキップ
  //   continue;
  // }
  if (i === 4) {
    break;
  }
  console.log(i);
}

#19 関数で処理をまとめてみよう

// 関数

function showAd() {
  console.log('----------');
  console.log('--- AD ---');
  console.log('----------');
}

showAd();
console.log('Tom is great!');
console.log('Bob is great!');
showAd();
console.log('Steve is great!');
console.log('Rich is great!');
showAd();

#20 引数を使ってみよう

// 関数

function showAd(message = 'AD') { // 仮引数
  console.log('----------');
  console.log(`--- ${message} ---`);
  console.log('----------');
}

showAd('Header AD'); // 実引数
console.log('Tom is great!');
console.log('Bob is great!');
// showAd('AD');
showAd();
console.log('Steve is great!');
console.log('Rich is great!');
showAd('Footer Ad');

#21 returnで値を返してみよう

// 関数

function sum(a, b, c) {
  // console.log(a + b + c);
  return a + b + c;
}

// sum(1, 2, 3);
// sum(3, 4, 5);

const total = sum(1, 2, 3) + sum(3, 4, 5);
// const total = 6 + 12; // 18

console.log(total);



この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL