2012年6月17日日曜日

Javascript

公式サイト: https://developer.mozilla.org/ja/JavaScript
コンソール出力:  console.log(i);
コンソール表示(Chrome): ctrl+shift+j

■関数定義
 function func1(a,b){
  return (a+b);
}

■配列
var array = [1,2,3];
console.log(array[2]); // 3が表示される

■連想配列

var array2 = { 'year1000':1,'year2000':2,'year3000':3  };

■Javascriptのオブジェクト
 オブジェクト = プロパティ(属性)とメソッド(処理)

 var v =  new String("sample"); //new オブジェクトの種類();
 console.log(v.length); //文字列の長さを表示

一定時間後に何かする
setTimeout(処理の内容 , 処理までの時間をミリセカンドで)

一定周期ごとに何かする
setInterval(処理の内容 , 処理までの時間をミリセカンドで)


// 学習ソースファイル1 ☆★☆★☆★☆★☆★☆★☆★


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptの勉強</title>
</head>
<body>
    <h1>JavaScriptの勉強</h1>
    <script>
        // ループ(while)

function sum(a,b){
return (a+b);
}
       

var array = [1,2,3];
var array2 = {'year2000':100,'year2001':200,'year2002':300,};

var obj1 = new String("this is a pen.");
console.log(obj1.substr(2,2));

console.log(obj1.replace("pen","pencil"));

var obj2 = new Array(12,33,44,55);
console.log(obj2.join("|"));
console.log(obj2.reverse());
       
var obj3 = new Date(); // 月:0~11
console.log(obj3.getMonth());


console.log(Math.PI); // プロパティ
var x = 5.332;
console.log(Math.floor(x)); // メソッド
console.log(Math.random(x)); // メソッド

// Browser Object Model(BOM)
// JavaScriptではブラウザのウィンドウ自体もオブジェクトとして扱うことができます
console.log(window.innerHeight);
//window.location.href = "http://google.com";

// Document Object Model (DOM)
// ブラウザ内の文書を操作するためのDOM
console.log(document.width);
document.body.bgColor = 'red';


    </script>
</body>
</html>




// 学習ソースファイル2 ☆★☆★☆★☆★☆★☆★☆★
<!DOCTYPE html>
<html lang="ja">
<head>
   
    <title>JavaScriptの勉強</title>
</head>
<body>
    <h1>JavaScriptの勉強</h1>
    <p>僕の名前は<span id="myName">@taguchi</span>です!</p>
    <p>価格: <input type="text" id="price">円</p>
    <p><input type="button" value="クリック!" id="myButton"></p>


    <script>
        // DOM
        var e = document.getElementById('myName');
        e.innerHTML = 'たぐち';
       
        var n = document.getElementById('price');
        n.value = 500;


// イベント処理
        var e = document.getElementById('myButton');
        e.onclick = function () {
            alert("クリックされました!");
        }
       

        // タイマー処理
        // setTimeout: 一定時間後になにかする
        setTimeout(function () {
            console.log("2秒たちました!");
        }, 2000);
       
        // setInterval: 一定周期ごとに何かする
        var i = 0;
        setInterval(function () {
            console.log(i);
            i++;
        }, 1000);
    </script>


</body>
</html>