関数についてメモ
無名関数とは
関数はデータ型なので、直接代入することができる
関数名がいらない
var hello = function(name) {
}
即時関数とは
定義した後にすぐ実行させたいときとかに使用する
関数名がいらない
変数をローカル変数として使用したいときに便利
function hello() {
...
}
hello();
(function() {
...
})();
タイマー処理についてメモ
| 関数名 | 説明 |
|---|---|
| setInterval | 一定時間ごとにある処理を繰り返し実行 |
| setTimeout | 一定時間ごとにある処理を実行 |
setInterval
前の処理が終わったかを確認せずに実行する
処理が重いとクラッシュする
var i = 0;
function show() {
console.log(i++);
}
setInterval(function() {
show();
}, 1000);
setTimeout
前の処理が終わったかを確認してから実行する
繰り返し処理にはこちらが最適
setTimeout(function() {
show();
}, 1000);
setTimeoutを繰り返し処理にするには、show()を再帰的に呼び出す必要がある
var i = 0;
function show() {
console.log(i++);
setTimeout(function() {
show();
},1000);
}
show(); //最初の一回だけ呼び出す
setTimeoutを止めるには？
var tid = setTimeout(function() {
show();
},1000);
if(i > 3) {
clearTimeout(tid);
}
オブジェクトについてメモ
| 用語 | 説明 |
|---|---|
| オブジェクト | ハッシュのこと |
| プロパティ | keyとvalueのセット |
表記法
ふたつの書き方がある
user["email"] == user.email
関数をうめこんでみる
プロパティに関数が使える
{
"user": {
"greet": function() {
...
}
}
}
user.greet("Tom");
thisの使い方
thisは、オブジェクトを指す
user.email == this.email
組み込みオブジェクトについてメモ
- String
- Array
- Math
- Date
String
var s = new String("Tom"); // var s = "Tom";
s.length // 文字数を返す
s.replace("T", "r") // Tをrに置き換える
Array
var a = new Array(100, 200, 300); // var a = [100, 200, 300]
a.length // 配列の数を返す
a.push(500) // 末尾に追加
Math
Math.PI // 円周率
Math.ceil(5.3) // 切り上げ
Math.floor(5.3) // 切り捨て
Math.round(5.3) // 四捨五入
Date
var d = new Date(); // 現在時刻
var d = new Date(2014, 1, 1, 10, 20, 30); // 2014年1月1日10時20分30秒
d.getFullYear(); // 年を返す
d.getMonth(); // 月を返す
d.getTime(); // 1970年1月1日からの経過ミリ秒を返す
DOM操作についてメモ
HTMLやXMLを操作するためのAPIをDOM(Document Object Model)と言う
windowオブジェクトのdocumentプロパティに対して処理を行う
windowオブジェクト
windowオブジェクトとは
javascriptに標準で用意されているオブジェクトのこと
例えばconsole.log()やalert()は、windowオブジェクトのプロパティである
（windowは省略できる）
windowオブジェクトの中身を見てみる
console.dir(window); // windowオブジェクトの中身が表示される
windowsオブジェクトのプロパティ
たくさんある
その中にdocumentプロパティが存在する
DOM操作をしてみる
要素の書き換え
var e = document.getElementByID("msg");
e.textContent = "hello"; // 文字の置き換え
e.style.color = "red"; // 文字色の変更
e.className = "myStyle"; // クラスを適用する
要素の生成
var greet = document.createElement("p");
text = document.createTextNode("hello world");
document.body.appendChild(greet).appendChild(text);