Posted at

JavaScriptドットインストールまとめ

More than 3 years have passed since last update.


変数を使ってみよう

変数は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のエレメントがクリックされた場合に無名関数が実行される