SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
5.
変数/関数の命名規則
• 基本
var fistName; (キャメルケース)
• コンストラクタ
var calendar = new CalenderCtrl();
(先頭が大文字)
• this (現在の名前空間)
var that = this;
• 定数
var GENERAL_API_KEY = "4fh5cv$sp";
• プライベート
var _userName = "user01";
7.
変数を宣言する場所
•関数の先頭
•すべての変数
function myFunc(){
var shopName;
var address;
var phone;
var catchCopy;
・
・
function myFunc(){
var shopName,
address,
phone,
catchCopy;
・
・
8.
スコープ (1/2)
• JavaScript の変数スコープは関数単位
//変数 i と fullName のスコープは for 文内に閉じていな
い
for (var i = 0; i < length; i++) {
var fullName = items[i].firstName + " "
items[i].lastName;
:
//以下は期待どおりの動作とならない
for (var i=0; i<5; i++) {
console.log("Outer loop " + i);
for (var i=0; i<10; i++) {
console.log("Inner loop " + i);
}
}
15.
DOM アクセスについて
• DOM ツリーを探すのでアクセスにはコストがかかる
• 2 回以上アクセスする際はインスタンスを変数に
//一般的に使用される DOM エレメントのインスタンスの取得法
var element = document.getElementById("エレメントの
ID");
.getElementByName("エレメントの名前");
.querySelector("CSS セレクタ");
.activeElement();
.all();
16.
DOM アクセスの例
//非常に効率が悪い例
for(var i=0; i < document.getElementById(“itemList”).childNodes.length; i++){
document.getElementById("itemList").childNodes[i].innerText = "アイテム" +
i;
}
//ロスを減らした例
var nodes = document.getElementById("itemList").childNodes;
var length = nodes.length;
for(var i=0; i< length; i++){
nodes[i].innerText = "アイテム" + i;
}