javascript 書き方の基礎

2013-02-06

Javascriptの書き方の基礎、ということでブログを書きながらJavascriptの勉強をしていきたいと思います。まずは基本的な書き方から。普段Web上で使われているjavascriptはDOMの操作をしていることが多いため、なにやらごちゃごちゃした関数がでてきて非常にわかりにくい、という印象でした。ここでは一度DOMは忘れて、基本文法から見ていきたいと思います。

javascriptの基礎変数の書き方

コードの書き方は言語によって多少違うのですが、javascriptの場合は型宣言がないというのが特徴。今までActionscriptをやってきたので慣れるまではちょっと違和感がありますね。書き方はこんな感じ。

//変数
var i=1;    //数値
var j=i+5;  //6
var k=j-i;  //5


//文字列
var s="文字列";
var t="を連結";
var u=s+t;      //文字列を連結
s+=t;           //こっちでも同じ


//定数
const WIDTH_X=300;

javascriptの基礎関数の書き方

関数の書き方は２種類あって、変数に入れる方法と関数名を指定する方法。どちらの方法でやっても動作はほとんど同じみたいです。ここでも型宣言は不要。引数にも返り値にも入れなくてOK。

//1.変数に代入する
var sum=function(a,b)
{
    var c=a+b;
    return c;
}


//2.関数名をつける
function sum(a,b)
{
    var c=a+b;
    return c;
}


//使うときはどちらも同じ
var d=sum(2,3);

javascriptの基礎　オブジェクトの書き方

オブジェクトは名前と値を持った、プロパティの集合。プロパティには変数だけでなく、配列やオブジェクト、関数も入れることができる。また、コンストラクタもあるしnewで生成できるのでクラスと同じ？ような感覚で使うことも可能。プロパティだけ指定して、連想配列としても使える。

//オブジェクトの生成
var obj={x:2,y:3};


//プルパティにアクセス
var x=obj.x;  //2
var key=0;
var i=obj[key];




//クラスっぽくしてみる
function MyClass(x,y){
    //プロパティ
    var _x=x;
    var _y=y;
        
        
    //メソッド
    this.writeString=function()
    {
        document.write(_x,_y);
    }
        
    this.sumPropaty=function()
    {
        var z=_x+_y;
        document.write(z);
    }
}


//クラスを使う
var obj=new MyClass(2,3);

obj.writeString();  //2 3

obj.sumPropaty();  //5

javascriptの基礎配列の書き方

次は配列の書き方と使い方。配列は順序のある値の集まり。どの言語でも似たような感じで扱えるのでここは簡単に紹介だけしておきます。多次元配列とかになるとちょっとややこしくなるかな？

//配列の作り方
var array=[1,2,3,4,5];
var array2=["文字列",1,"も入る"];

//配列の取得
var i=array[0];  //1
var j=array[2];  //3

//長さを調べる
array.lengh  //5



//多次元配列
var array3=[[1,2,3],[11,12,13]];

//多次元配列の取得
var k=array3[0][1];  //2

javascriptの基礎条件分岐の書き方

次は制御構文の書き方。これも他の言語とほぼ同じ使い方なので簡単。if~else~とswitchが条件分岐。

//if()内に条件を記述
if(i&lt;10)         //iが10より小さい場合
if(i>=10 | i=j)  //iが10以上、もしくはiとjが同じ場合
if(i>=10 & i=j)  //iが10以上、かつiとjが同じ場合


//if~else~
if(i>10)
{
  document.write("i>10");
}else if(i<10)
{
  document.write("i<10");
}else
{
  document.write("i=10");
}


//switch
var o=10;
    
switch(o){
    case o>10:
        document.write("o>10");
        break;
    
    case o=10:
        document.write("o=10");
        break;
        
    default:
        document.write("o<10");
                break;
}

javascriptの基礎繰り返しの書き方

繰り返し処理も他の言語とそれほど変わらないのでわかりやすい。使うのはfor~とfor in~がほとんど。一応while文も覚えておくと何かに使えるかもしれない・・・

//while
var i=0;    //初期化
while(i&lt;5)  //ここに条件式
{
    document.write(i);
    i++;                //値の更新
}


//for ,whileと全く同じ
for(var j=0;j<5;j++)  //ここに全て記述
{
    document.write(j);
}


//for inはプロパティの列挙に使う
//オブジェクトの列挙
var obj={a:1,b:2,c:3};

for(var k in obj)
{
    document.write(k+":"+obj[k]);
}


//配列の列挙
var array=[5,6,7,8,9,10];

for(var l in array)
{
    document.write(l+"=>"+array[l]);
    
}

以上がjavascriptの書き方の基本になります。どの言語でもだいたい同じなので基本的なところはどれも似たり寄ったりですね。

次のステップはDOMの操作。これができればWeb上ではほぼ使えるようになると思います。