変数を使ってみよう
変数はvarの後に定義
var msg = "hello world"
データ型
- 文字列
- 数値
- 真偽値 (true / false)
- オブジェクト
- 配列
- 関数
- 組み込みオブジェクト
- undefined 定義されていない
- null 何もない
文字列を使ってみよう
文字列"5"と数値5を+した場合は文字列の連結となり、"55"となってしまう
if文
基本構文は
if(条件){条件が真だった場合の処理}
条件が偽だった場合の処理はelse{}の中に続ける
等しいを表す条件は
等しくないは
!==
==, !=でもできるが、上記の方が厳密に比較できる。
真偽値と三項演算子
真偽値
文字列: 空文字以外だったらtrue
数値: 0かNaN以外だったらtrue
オブジェクト: null以外だったらtrue
undefined, nullはfalse
三項演算子
if(条件){a = b;} else { a = c; }
は
a = (条件)?b : c;
とかける
switch文
変数の値によって処理を分岐させる
/*
条件分岐
switch
*/
var signal = "blue";
switch (signal) {
case "red":
console.log("stop!");
break;
case "green":
case "blue":
console.log("go!");
break;
case "yellow":
console.log("slow down!");
break;
default:
console.log("wrong signal");
break;
}
while, do ... while
/*
ループ処理
while
do ... while
*/
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
var i = 200;
do {
console.log(i);
i++;
} while (i < 10);
処理が条件判定の前に行われるか、あとに行われるかが異なる
for文
whileとやることは同じで書き方が異なる
/*
ループ処理
for
break ループ処理を抜ける
continue ループ処理を1回スキップ
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
*/
for (var i = 0; i < 10; i++) {
if (i === 5) {
// break;
continue;
}
console.log(i);
}
alert confirm prompt
alertはダイアログボックスを出して、okを押させる
confirmはダイアログボックスを出して、okを押せばtrue,キャンセルを押せばfalseを返す
promptは入力ボックスを出して、入力してokを押せばその値を返し、キャンセルを押せばnullを返す
promptの第一引数はメッセージ、第二引数は初期値
関数
function 関数名(引数) {
処理
return 返り値
}
ローカル変数
関数内で定義した変数は関数の中でのみ用いることができる
無名関数
var 変数名 = function(引数) {
処理
return 返り値
}
即時関数
(関数を定義)(引数);
とすると、直後に実行される関数を定義できる
この関数定義では関数名を省略できる(無名関数)
即時関数で変数を囲むことで、ローカル変数を定義出来る
setInterval setTimeout
var i = 0;
function show() {
console.log(i++);
}
setInterval(function() {
show();
}, 1000);
1000ミリ秒ごとにshow関数を実行する
setIntervalは前の処理が終わったかどうかは考慮せず、次の処理に進むため、クラッシュする可能性がある
setTimeoutにすると、1000ミリ秒後に1回処理を実行するが、これでループを実現することができる。これなら前の処理が上手く行かなければ止まる
var i = 0;
function show() {
console.log(i++);
var tid = setTimeout(function() {
show();
}, 1000);
if (i > 3) {
clearTimeout(tid);
}
}
show();
配列
[]
オブジェクト
{プロパティ名: 値, ・・・}
それぞれのペアをプロパティという
オブジェクト.プロパティ名
の形で、その値を取得できる
メソッド
オブジェクトのプロパティの値に関数が来た場合メソッドと呼ぶ
メソッド内のthisはそのオブジェクトを呼び出す
組み込みオブジェクト
- String
- Array
- Math
- Date
Stringオブジェクトを作成するには
var s = new String("uno")
Javascript
var s = "uno"
とすると、文字列リテラルという別のものを作成するが、メソッドを呼ぶと、文字列オブジェクトに一時的に変換されるので、同様に扱える
s.length
s.replace("", "") //
s.substra(1, 3) //部分文字列をとってくる
Array
Stringと同様に
var a = new Array()
var a = []
のどちらでも
unshift 先頭に追加
push 末尾に追加
shift 先頭を削除
pop 末尾を削除
splice(場所, 削除する要素数, 追加したいものを順番に)
Math
newする必要がなく
Math.ceil 切り上げ
Math.floor 切り捨て
Math.round 四捨五入
Math.random() ランダムな数字を生成
Date
月は0~11であることに注意
window
ブラウザをwindowオブジェクトで扱える
window.location.href = ''
で他のurlに飛ばせる
window.outerHeight
でwindowの高さを取得できる
window.document
は今開いてるページを表す
これを操作することで、動的にページの一部を書き換えたり、新しい要素を追加したりできる
windowは省略可能で、documentのみでもアクセスできる。
documentにアクセスするためのいろいろな命令を、document object model DOMという
DOMを操作する var e = document.getElementById('')
でそのidのタグをとってくることができる
document.createElement('p') pタグを作成
document.createTextNode('') テキストを作成
var greet = document.createElement('p'),
text = document.createTextNode('hello world'); document.body.appendChild(greet).appendChild(text);
イベントを設定する
document.getElementById('add').addEventListener('click', function() {
var greet = document.createElement('p'),
text = document.createTextNode('hello world');
document.body.appendChild(greet).appendChild(text);
});
addというidのエレメントがクリックされた場合に無名関数が実行される