JavaScriptの基礎

JavaScriptの基礎を学習したので、備忘も兼ねて記事に残しておこうと思います。

やること：JavaScriptの基礎をアウトプット
意識すること：この手の記事は溢れているが、自分が後で見返したときにわかりやすく復習できるようにする

window.alert('表示させたいテキスト');

ウェブページを開いたときにアラートを表示させる。
引数として、表示させたいテキストを渡すことでページを開いたときに下のような感じでアラートが表示される。

入力したコードはこんな感じ

window.alert('こんにちは');

console.log('表示させたいテキスト');

コンソールへテキストを表示させたいときに使用する。
コンソールへ表示させるため、ユーザがこのテキストを見る機会はほとんでありません。
開発者がデバッグのために用います。主な用途としては変数の中身や関数が呼ばれているかを確認するために用いることが多いです。

if(条件式){実行する処理}

他の言語で出てくるifとやることはほとんど一緒。
Rubyとの違いはRubyは条件式を追加するときに'elsif'と書きますが、JavaScriptは'eilse if'と省略せず書くことかと思っています。

if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}

配列[]

配列を定義するときは、'[]'を利用します。
変数を定義して、'[]'の中に要素を追加していけばよいです。

var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];

配列は定義するだけでは利用価値はほぼないのでよく使う以下の処理のやり方を見ていきましょう。
・配列の要素を取得する
・配列の要素数を取得する
・配列の要素を追加する
・配列の要素を削除する

配列の要素を取得する

配列の要素を取得するには配列[取得したい要素の順番]と指定します。
一番目の要素を取得するためには以下の通りです。

var item = list[0];

プログラミングの数字は０から始まるので、取得したい要素は０と指定します。

配列の要素を取得する

配列の中に要素がいくつ入っているかを知るために、lengthを使用します。

var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.length; // 5が取得できる

配列の要素を追加する

配列に要素を追加するには'push()'を使用。
配列の一番後ろに要素を追加します。

var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.push('jQuery');
list[list.length - 1]; // jQueryが取得できる

配列の要素を削除する

配列の一番後ろを削除するには'pop()'を使用します。

var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.pop();
list[list.length - 1]; // HTMLが取得できる

配列の一番初めを削除したい場合には'shift()'を使用

繰り返し処理　for

繰り返し処理をするためには'for'を使用します。
定義の方法は以下の通りです。

for (var i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

i = i + 1の部分は変数iを1増やすという意味です。この部分は処理が一回繰り返すごとに呼ばれます。つまり、変数iは処理が1回呼ばれると1増えるということです。

for文は簡単なようで、ネストが深くなりやすいのでこんがらがりやすいものの一つと思っているので、後日for文だけの記事をだそうと思います。

作成後リンク

まとめ

今日はJavaScriptの基礎を超簡単にまとめてみました。
これらの知識を使った練習問題の記事を作りましたのでそちらもご覧ください。
練習問題