前回の続きとなります。
初めてのJavaScript その2 - Qiita
色々な関数
ローカル関数に関して
index.html
<script>
function hello() {
var local = 3 + 12 - 4 // ローカル変数
alert(local); // OK
}
alert(local); // NG エラーになる
</script>
上記の通り、関数の中で定義した変数はその関数内でしか使えません!!
即時関数
index.html
<script>
// 引数を渡す書き方
(function(name) {
// alert(name);
})("Me");
// 即時間数のメリット
(function() {
var x = 10,
y = 20;
// x , y はローカル変数となり、外部からの影響を受けなくなる
})();
</script>
上記の通り、即時に実行する関数を即時間数といいます。
主に、ローカル変数を実現するために使ってきましたが、今では代わりにletやconst(後述)を使うのが一般的な気がします。
タイマー処理の書き方
setTimeout
index.html
<script>
var i = 0;
function show() {
var t = setTimeout(function() {
show(); // 自分自身を飛び出すので結果ループ処理となる
}, 1000); // 一秒ごとに実行
if (i > 3) {
clearTimeout(tid); // clearTimeoutを使うことでsetTimeout処理を終了させることができる。
}
}
show();
</script>
ほかにsetIntervalというタイマー系の関数もありますが、使い勝手がイマイチなので、特にもし必要なければ覚えなくてもいいかもしれません。
興味ある方はこちらを見てみてください。
配列
グループ化されたデータである
index.html
<script>
// var eki_1 = "東京", eki_2 = "名古屋";
// ↑のように書くのはすこしだるいし、変数が多くて読みづらいかと思います。
// 下のように配列で書くとすっきりします。
var eki= ["東京", "名古屋", 100]; // 異なる型を入れることができる
eki[0] = "大阪"; // 東京が大阪に書き換えられます
// 下記のような配列の中に配列を書くことができます。
var m = [
[1, 2, 3],
[4, 5, 6]
];
// m[1][2]); で6という数字が取れます。
</script>
配列の添え字は**「0」**始まりであるのを忘れないでください!
オブジェクトについて
名前と値をもつ、オリジナルなまとめられたデータ
index.html
<script>
var user = {
name: "kato", // 名前はプロパティと呼ばれます(例:nameプロパティ)
age: 20
};
alert(user.name); // katoと出力される
user.age= 20; // ageを20に書き換え
alert(user.age); // 20と出力される
</script>
オブジェクト内のメソッドについて
オブジェクト内にメソッドをはやすことができます
index.html
<script>
var user = {
name: "kato", // プロパティ
age: 80,
getUserInfo: function() { // getUserInfoメソッド
alert("名前:" + this.name + "年齢:" + this.age);
}
};
user.getUserInfo();
</script>
this.hogehogeのように、thisを使うことで同じオブジェクトのプロパティにアクセスすることができます!
今日はここまで、続きは次回で!!