読者です 読者をやめる 読者になる 読者になる

ぺーぺーSEのブログ

備忘録・メモ用サイト。

JavaScript基本からやってみる

JavaScript

今まで適当にしかやってこなかった。
文法なんでめもっても仕方ないから、とりあえず簡単な実行方法とデバッグ方法をめも。

実行方法

とりあえず動かしてみるなら下記で。
「・・・」のところにすきなコードを書く。
ただし、AjaxjQueryみたいにサーバとやりとりする系はちゃんと相手を用意する。(当たり前だが)

<!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
GoogleChromeでの開発ビデオを公開してるみたい:
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でフィールド参照

・プロパティへのアクセス方法2パターン

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() {
    // なにか
});