記事一覧
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つです。
- オブジェクト名とプロパティ名をドットでつなぐ
- オブジェクト名のあとに角カッコ[]を記述し、その中にプロパティ名を文字列で指定
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 = :uglifierwindowオブジェクト
window.location.hrefプロパティ
現在のURLを返す。
コメント