JavaScript基本からやってみる
今まで適当にしかやってこなかった。
文法なんでめもっても仕方ないから、とりあえず簡単な実行方法とデバッグ方法をめも。
実行方法
とりあえず動かしてみるなら下記で。
「・・・」のところにすきなコードを書く。
ただし、Ajax、jQueryみたいにサーバとやりとりする系はちゃんと相手を用意する。（当たり前だが）
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript" src="[jsファイルをロードしたい時はここにパスを書く]" charset="utf-8"> </script> </head> <body> <script language="JavaScript"> ・・・ </script> </body> </html>
HTML5チックに書いてる。
デバッグ
ChromeとかFirefoxには開発ツールがある。
「console.debug("message");」でブラウザのコンソールにデバッグログを出力できる。
他にもいろいろ。詳細は割愛。
参考：http://www.atmarkit.co.jp/ait/articles/1302/28/news007.html
GoogleがChromeでの開発ビデオを公開してるみたい：
http://www.publickey1.jp/blog/13/chrome_devtoolsdom.html
基本構文
■ポップアップ
alert("unko"); // OKボタンだけのポップアップ confirm(""); // Yes/Noのポップアップ return true/false prompt(""); // テキストボックス付のYes/Noのポップアップ return 入力値/null
■関数
・定義
function 関数名(引数, ...) { return x; // returnは無くてもいい }
・呼び出し
関数名();
・例
function hello(name) { return "hello " + name; } var greet = hello("Tom");
■無名関数／匿名関数
var hello = function(name) { return "hoge"; }
■即時関数
(function hello(name) { console.log("hoge"); })(); // すぐ呼び出せる関数 // 関数定義にカッコをつけて直後にもカッコつけるだけ // 無名関数にもできる // 意味がないように見えるが、関数スコープ内で任意の変数を使用できるため、他人の変数との重複を防ぐことができる
■タイマー処理
setInterval(処理, 間隔); // ある時間間隔で処理を実行できる // 前の処理が終わったか判定せずに間隔毎にどんどん実行する setTimeout(処理, 時間); // ある時間後に処理を一回だけ実行できる // 前の処理が終わったことを判定してから処理を実行する
・例：1秒ごとにカウントアップされる
var i = 0; setTimeout(function() { console.log(i++); }, 1000);
・例：setTimeoutを使ったループ処理
var i = 0; function show() { console.log(i++); var tid = setTimeout(function() { show(); }, 1000); if (i > 3) { clearTimeout(tid); // タイマーIDを指定して止める。 } } show();
■オブジェクト
var user = { firstName: "Taro", age: 30, greet: function(name) { return "Hello " + name + ". I am " + this.firstName + "."; } }; // 基本JSON形式なんやね。 // プロパティの値を無名関数にするとメソッド定義ができる。 // thisでフィールド参照
・プロパティへのアクセス方法２パターン
user["name"]; user.name;
■組み込みオブジェクト
- String
- Array
- Math
- Date
- 等
・使い方
var s = new String("Taro"); // これは文字列オブジェクト var s = "Taro"; // これは文字列リテラル var a = new Array(1, 2, 3); // これは配列オブジェクト var a = [1, 2, 3]; // これは配列リテラル // Mathはnewせんで使える。 // その他詳細な使い方はMDN参照
■DOM (Docoment Object Model)
console.dir(xxx); // xxxオブジェクトの詳細が見れる
・よく使うオブジェクト
- window
- document
- 今開いているページ
・id指定で要素を取得
var e = document.getElementById('id名'); e.textContent = "hello";
・bodyタグ配下にpタグ、さらにそのpタグ配下にtextを追加する
var greet = document.createElement('p'); text = document.createTextNode('hello'); document.body.appendChild(greet).appendChild(text);
■イベント
<button id="add">Button</button>
上記で作ったボタンを押すと発生するイベントを定義してみる。
document.getElementById('add').addEventListener('click', function() { // なにか });
