大体こんな感じ。javascript日和
今日はみどりの日なので、javascriptの学習でもしてみよう。当方のスペックは
適当な書籍ないかなーと思って調べていたら、最初は初心者用のサイト見ればいいと思うよ、とのことなので幾つか見てみる事にしました。まずはこちら。
http://www.red.oit-net.jp/tatsuya/java/index.htm
たぬきでも分かるのかしら。以下、感想を書きながら学習していった様子です。特に作りたいページがあるわけじゃなく、javascriptで遊んでみようという感覚ですので、サイト作りに有用そうなところもコメントだけで飛ばしています。長いので、続きを読む記法を使います。興味がある人だけどうぞ。
成果物：javascript日和の成果物 - たぬきのねどこ
※なんかコードがうまく表示されていないらしいんで、直しました。
準備
まず、練習用のhtmlファイルを作ろう。
<html> <body> <script language="JavaScript"> <!-- ここにjavascriptを書く // --> </script> </body> </html>
「ここにjavascriptを書く」の所に
document.write(navigator.appName);
と書き、test.htmlという名前で保存。開いたら、きちんと自分のブラウザの名前が表示されることを確認。おー動いた動いた。
配列（step2と3）
<!-- myArray=new Array(2); myArray[0]=256; myArray[1]="いち"; document.write(myArray[1]); // -->
MyArray=new Array(N);で作製。型が違うものでも入れられるみたい。
関数（step4）
function 関数名(){}っすね。普通はHEADの中に書くらしいけど、とりあえずBODY内に作る。
<!--
function sayHello(){document.write("hello");}
sayHello();
// -->引数についてはこの後出てくるのかな。
後記：型が無いんだから引数宣言も戻り値宣言もいらなかった。step27
フォーム（step5-7）
フォームはあまり使ったことない。えっと、フォームを描画したあとに数値を突っ込むという理解でいいのかな。setInterval("関数名",ミリ秒);でミリ秒ごとに関数を呼び出して、フォームに数字を突っ込ませると。
時間経過を示すものを作ってみよう。getFirstTime()でページを開いたときに時間をゲット。getNowTime()で現在時間とFirstTimeとの差をフォーム内の数値に突っ込む。面倒なので○時の境目には未対応。
<html>
<body>
<script language="JavaScript"><!--
function getFirstTime(){fDate=new Date();}
function getNowTime(){
nDate=new Date();
passageSeconds=nDate.getSeconds()-fDate.getSeconds();
passageSeconds+=60*(nDate.getMinutes()-fDate.getMinutes());
document.myForm.pSeconds.value=passageSeconds;
}
// -->
</script>
<form name="myForm">
現在
<input type="text" size="10" name="pSeconds">
秒過ぎました
</form>
<script language="JavaScript"><!--
getFirstTime();
setInterval("getNowTime()",1000);
//-->
</script>
</body>
</html>もしかしてと思ってやったけど、fDate()はグローバルになるんだなぁ。と思ったら、step6で解説が。varを付けて宣言すればfunction内でローカルになるらしい。
あと、秒数カウントもstep6の方法の方がいいな。step6では算術式にも少し触れてる。step7ではフォームにダイレクトにjavascriptを書いてますよ、と。
閑話休題（step8-20）
新しい関数とか出てくるけど、新しい概念は出てこない。練習にはいい感じ。location.href="http//...";とかwindow.open("http//...");は使用頻度高いのかな？
step14では、formに以下を加えると繰り返し問題を出すことが出来る。あとは時間制限とか作ってみても面白いかもしれない。
<input type="button" value="next" onclick="mySet()">
htmlタグをjavascriptで作る(step21)
これは便利。javascriptでhtmlを書いて、それを表示するという感じなのかな。以下の例ではアスタリスクで階段を作っているが、改行タグ(br)をjavascriptで毎回入れている。
<script language="JavaScript"><!--
for(var i=1;i<10;i++){
for(var j=0;j<i;j++){document.write("*");}
document.write("<br>");
}
//-->
</script>試してみたら同様にフォームも作れた。(プルダウンについてはstep25,26)
<form name="myForm">
<select name="myMenu">
<script language="JavaScript"><!--
for(var i=1;i<10;i++){
var adress="page"+i+".html";
var selectName="ページ"+i;
document.write("<option value="+adress+">"+selectName);
}
//-->
</script>
</select>
</form>
閑話休題２（step22-）
22-26は飛ばして27で引数と戻り値を使う関数。電卓とか出てたりする28以降。32のページを開いたときと閉じたときの操作は知らなかった。
<BODY onload="init()" onunload="end()">
あと、33ではハンドラに画像を読み込んでおくという話。これ以降もサイト作りには使えそうな話が続く。ページ読み込み中だけ違う言葉を表示する(step39)とかは「へー」と思った。
スクリプトを別ファイルに(step40)
長いスクリプトは一部を.jsファイルにして外部に保存しておき、読み込める。なんだか保守するの大変そうだ。なお、呼び出しscriptの間に書いたスクリプトは実行されない。また、script内に呼び出しscriptを導入しても反応なかった。以下の例ではtest.jsにはa=2;と書いてテストした。
<script language="JavaScript"><!--//ダメな例 a=1; <script language="JavaScript" src="test.js"></script> document.write(a); //--></script>
<script language="JavaScript"><!--//OKな例 a=1; //--></script> <script language="JavaScript" src="test.js"></script> <script language="JavaScript"><!-- document.write(a);//2と表示される //--></script>
41以降
ざっくり見た感じではjavascriptに関してはここまでで基礎終了という感じ。このあとはDHTMLになる。DHTMLについても学習したいと思うけど、とりあえずjavascriptでの成果物を何か作ってみようと思う。
Googleガジェットがはてなダイアリーには貼り付けられるらしいので調べてみます。
