忘備録 JavaScriptの書き方 - ガジェット好きアザラシ「shin」のブログ

こんにちは、ガジェット好きアザラシの「shin」です。

今回は、自分の忘備録として、JavaScriptの書き方を残して置こうと思います。

＊またそのうち追加します。

・引数をwebページに出力document.write("");

・タイトルの変更document.title="";

・文字の色を変更する。document.body.style.color="green";

・背景の色を変更する。document.body.styel.backgroundColor="yellow";

・アラートに出力する。alert();

・変数の宣言var

・ユーザーからの入力フォームをつかう

var height;
height = prompt("身長を入力してください。")
*変数、heightにユーザーからの入力された情報を使う。*promptの情報は文字列として処理

・条件分岐if

if (条件式)

{

　処理

}

else if(条件式2)

{
　処理

}

else

{

　処理
}

・switch文switch(num)

{
　case 1: //numが1の時の処理 break;
　case 2: break;
　default:　//デフォルトの時の処理
}

・繰り返し for

for(初期値;条件式;制御変数の更新)

{

　処理

}

・条件が成立している間繰り返す　while

while(条件)

{

　処理

}

*途中でループを抜けるときはifとbreakを使う
if(条件式)break;

・関数の定義の仕方

function 関数名 (引数)

{

　return ;

}

*例var yen1=zisakufunction(100,90);

関数をちゃんと定義した後、こんな風にしたら、関数の中身を受け取ることができる。

・Mathオブジェクト　（インスタンスを生成する必要はない）

var num1 = Math.max(1,2,5);

num1の中身は5

var num2 = Math.random();

num2の中身はランダムに決まる

・linkメソッドとanchorメソッド・linkメソッドとanchorメソッド
linkメソッド
var url = "http://google.co.jp";var text = "Google".link(url) + "で検索";document.write("<h1>", text ,"</h1>");これで画面に「Googleで検索」という文字が出て、「Google」の部分にリンクが設定される。

anchorメソッド
var title1 ="ページの先頭";var anchor1 = title1.anchor("pTop"); ←変数にアンカーを設置document.write("<h1>",anchor1,"</h1>");
var toAnchor1 = "ページのトップへ".link("#pTop");document.write("<h2>",toAnchor1,"</h2>");

・配列

配列の作り方
JavaScriptでは、配列をArrayオブジェクトというオブジェクトとして扱う
var names; ←配列名names = new Array(100); ←new演算子とArrayコンストラクタを用意し要素数を設定する

配列の中身をすべて出力する
var names;names = new Array(4);
names[0]="hogehoge0";names[1]="hogehoge1";names[2]="hogehoge2";names[3]="hogehoge3";
var i;
for (i=0 ; i<=(names.length-1); i++) ←names.length-1で要素数-1、今回は3になるのでiが3以下なら繰り返す{ document.write("<h2>",names[i],"</h2>");}

＊他にも、var heiretu = new Array("hare","kumori","ame");

　としても配列は作れる。

・連想配列

var colors = new Object();

//JavaScriptでは連想配列はObjectというオブジェクトとして扱う。

colors["white"]="shiro";

colors["red"]=["aka"];

document.write("<h2>",colors["red"],"</h2>");

＊次のように書いてもよい

var colors = {white:"shiro",red:"aka"};

＊for ~ inの利用

for (変数 in 連想配列)

{

処理

}

この構文では、連想配列のすべてのキーが変数に順番に格納されていきます。

例

for (var eigo in colors)

{

　　　document.write("<h2>",eigo + " " + colors[eigo],"</h>")

}

・onclick イベントハンドラ

<!DOCTYPE html><!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <title>JavaScriptサンプル</title>
<script>

function func1(str)

{

　alert(str + "がクリックされました。");

}

</script>
</head>
<body><h1>ようこそJavaScriptの世界へ・・・</h1>
<form id="myForm" name="myForm">

<p>

＊onclickの後ろ全体を""で囲むのでその内部は''で囲む

</p>
</form>

</body>

</html>

・グーグルクロームを用いたデバック

　グーグルクロームでテキストを開き、右クリックで検証を押すとデバックできる。