JavaScript

JavaScriptとは

JavaScriptは、HTMLとCSSを操作するための言語。

scriptタグでJavaScriptを埋め込む方法は2つ。
scriptタグの中に直接JavaScriptを記述する方法と、外部ファイルを読み込む方法。
外部ファイルを読み込むにはsrc属性で読み込むJavaScriptファイルのパスを指定する。

<body>
  <script src="script.js"></script>
</body>
<body>
  <script>
    window.alert('こんにちは');
  </script>
</body>

基本的なルール

JavaScriptでは行の最後にセミコロン(;)をつける。
文字列はシングルクォート(’)かダブルクオート(”)で囲む。
文字列同士は+で連結できる。

'Hello' + 'World';

変数の定義 var

var name = 'hogehoge';

条件式

if (条件式1) {
  処理
} else if (条件式2) {
  処理
} else {
  処理
}

配列

var list = ['Ruby', 'Ruby on Rails'];

配列要素の取得

var item = list[0];

配列に要素を追加する push()

配列の一番後ろに要素を追加する。引数には追加したい要素を渡す。

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

配列の要素を削除する pop(), shift()

popは配列の一番後ろの要素を削除する。
shiftは一番最初の要素を削除する。

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

オブジェクト

オブジェクトはデータのまとまりのこと。
オブジェクトは名前と値をセットにしてデータを管理する。(rubyでいうハッシュ)
オブジェクトを作成するには波カッコ{}を使う。

var obj = { name: 'TECH::CAMP' };

プロパティ

プロパティとはオブジェクトの属性値。オブジェクトは複数のプロパティを持てる。
プロパティは必ず属性名である”プロパティ名”とデータである”値”をセットで持つ。

var obj = { プロパティ名1: 値1, プロパティ名2: 値2 };

プロパティの値を取得する

取得する方法は以下の2つです。

  1. オブジェクト名とプロパティ名をドットでつなぐ
  2. オブジェクト名のあとに角カッコ[]を記述し、その中にプロパティ名を文字列で指定
obj.プロパティ名
obj['プロパティ名']

繰り返し for文

for (var i = 0; i < 10; i = i + 1) {
  console.log(i);
}

forEachメソッド

配列に含まれる各要素に対して一度ずつ呼び出して処理をする。

products.forEach(function(product){
  appendProduct(product);
});

空文字とundefined

var string = “” と var string; は別のものである。
左は空文字であるが、右はundefinedである。
undefinedとは初期値を持たない変数や何も返さない関数のこと。nullとは違う。
nullは返す値のないことをさす。JavaScriptで両者は区別されるが、実際に区別が必要な状況は少ない。

文字連結

+を使う。array.joinは処理が重いので避けたほうが無難。

特定のページのみjavaを起動させる

if(document.URL.match(pattern)) {
}

turbolinksでちょっと問題あり。jQueryをturbolinks loadでアクションを起こすようにしていると、その後に無関係なページに飛んでもif文の中が再評価されずに実行されてしまう。
対策は模索中。

関数

JavaScriptで関数を定義するにはfunction文を使う。

function hello(name) {
  window.alert(name + 'さん、こんにちわ!');
}

返り値を持たすにはreturnする。

function square(num1) {
  return num1 * num1;
}
console.log(square(3));

テンプレートリテラル記法

バックティック文字で囲むことで、複数行文字列や文字列内挿入機能を使用できる。

  function buildHTML(comment){
    var html = `<p>
                  <strong>
                    <a href=/users/${comment.user_id}>${comment.user_name}</a>
                    :
                  </strong>
                  ${comment.text}
                </p>`
    return html;
  }

較的新しい記述の仕方のため、アプリケーションをデプロイする際にエラーになる。
その場合、config/environments/production.rb
の下記の設定をコメントアウトする。

config.assets.js_compressor = :uglifier
↓
# config.assets.js_compressor = :uglifier

windowオブジェクト

window.location.hrefプロパティ

現在のURLを返す。

コメント