超入門JavaScritpチャレンジ

超入門 JavaScritp チャレンジ〜

　不遇にも肺の病を患う石川啄木(そうなの？)のように胸が痛くて根性係数がゼロなので、こういう時は「ダラダラやりましょ」ということで、ソフトバンク社刊「はじめてのJavaScript」升屋正人著の本を紐解いた。
　買った日付を表3に記す癖があるのだがそれは2002.9。 6年振りに真面目に開いた、という訳だ。

　病名は「肋間神経痛」で湿布して3週間で治った。
　その後すぐ肺炎になってしまい3週間の自宅療養＆通院点滴と相成って、散々な2008年の夏になってしまった。その分JavaScriptなどを勉強できたけど。

　第一章は概要で、Javascriptの歴史やバージョンやブラウザー違いによる問題点などが挙げられていて、いよいよ第二章「Javascriptの文法」のプログラミグ用語解説のところだ。

===============================
【オブジェクト】
変数と関数をまとめたものがオブジェクトです。オブジェクトにまとめられた変数をプロパティと言います。
また、オブジェクトにまとめられた関数をメソッドと言います。

【インスタンス】
オブジェクトを複製し、複製元のオブジェクトと同じプロパティ、メソッドを持つように作られたオブジェクトのことをインスタンスと言います。

【コンストラクタ】
オブジェクトを作成するためのメソッドをコンストラクタと言います。オブジェクト自身に含まれるメソッドで「オブジェクト名()」として呼び出します。
===============================

　ちょっとちょっと、升屋さん、これ日本語っすかぁ？
　この本のサブタイトル「はじめての」ってどのくらいの初めての人達を対象にしているのでしょう。
　いくらなんでもこれ、例を示さないと分からないですよ〜。

　「はじめて・・」と冠した本を読む読者レベルで上記の説明は適切と言えるのだろうか？かなり疑問だ。
　最初から意味不明のローリングストーンズだろう、これじゃ。そのページ以降、インスタンスとかオブジェクト、メソッドなどの単語が羅列していて私の頭はラビリンス〜。

　これに限らずPerlやPHPもそうだけど、殆どの執筆者は「初めての人のキモチ」を全く理解していなくて「初めての」という単語を安易に咀嚼して記してしまっているのは、この本だけに限らずパソコン業界の風習なのかもしれない。

　例外があるとすれば、結城浩著「Perl言語プログラミングレッスン入門編」ソフトバンク社刊だ。
　これはPerl(CGI)だけど、私のような超ド素人初心者には超絶対お勧めだ。
　件の本のようないきなり「なんですか、それ？」がなく、とにもかくも初心者の苦悶を良く理解して親切丁寧に記されている。
　でも結城さん、JavaのはあるけどJavascriptのはないよ〜。

　新たにJavascriptの書籍を探す前にサイトにもあるかな、と探したら、いろいろあって入門者にとっては重宝しそうなのが沢山見受けられた。
　しかし、私のような超ド素人初心者にとっては分からないところが幾つも散見した。
　ではどういうのが超ド素人初心者かと言うと、
　例えば、document.write というのがあった場合、私は「document.write」という関数があると思ってしまうしまうのだが、実は、document と write は別々で単に「 . 」で繋がっているだけで、いろいろな document.○× が存在することをこのサイトの作例から、もしかしたら？で予想できたに過ぎない。

　ということは、 document.open、document.delete などもあるのかな、と思ってしまう。
　それでも今までの拙サイトのhtmlの最下部の「BACK」は、Macromedia社のDreamweaverが作成したスクリプトを利用しているけど、いろいろなサイトのを読んでみれば、それほど大げさにスクリプトを記さなくても良いのが分かった。早速書き直し。

　こういうところをもうちょっと丁寧にお知らせしてくれれば良いのに、と個人のサイトに文句を言うのはお門違い。自分で自分に合った本を探すのが一番だ。

　胸が痛いのを我慢して県下最大の書店「書楽」へ行って新たに買ってきたのが、河西朝雄著基礎から学べる「JavaScript標準コースウェア」技術評論社刊だ。
　タイトルからしてなんか難しそうだなぁ、またこの「基礎」というのはそれなりにJavaScriptを勉強した人向けかな、と思ったら、先述のインスタンスやコンストラクタなどの難解用語等には言及しておらず、あくまでもJavaScriptで記述＆表示してみよう、と基本に忠実に終始しているのが私には嬉しかった。
　この著者、高校の教諭だそうだ。だから各章の後には必ず練習問題があり、これがまた楽しい。

　ある数字が奇数が偶数か、というのも書けるようになってちょっと嬉しい。
　親切で私にはとても合った本だと思うのだが、文字間スペースがなくて

　if((y%4=0 && y%100!=0) || y%400=0) ・・・うう、読みづらい
　　　↓
　if(( y%4 = 0 && y%100 != 0) || y%400 = 0) ・・なら嬉しいのだが、慣れるしかないのだろうな。

　記述してブラウザーで表示させたら真っ白。
　あれ、何？どうやら記述ミスらしいのだが、はて、Javascriptのデバックってどうやるの？
　「デバック+Javascript」と検索した私がバカだった。殆どが for Windows のオンパレード。
　再度「デバック Javascript MacOS」で検索したらいろいろ出てきた。

　ターミナルで以下のを入力してSafariを再起動させたら、おお「開発」という項目がメニューバーに出現した。
　defaults write com.apple.Safari IncludeDebugMenu 1

　その中の「エラーコンソールを表示」でちゃんとエラー箇所が表示された。ナイスじゃん〜。
　まだ途中だけど、以下、本に記されていたサンプルを少しアレンジしてみた。　

【画像のロールオーバー】

現在、拙サイトの各html下部の「BACK」に使っている。
別な箇所に画像を表示させるのもあるけど、そんなテクはまだ先の話。

【新規ウィンドウ】
任意な幅のhtmlを作成し、そこへリンクするとお知らせウインドウとかが表示される・・。
<input type="button" value="新規ウィンドウを開く" onClick="window.open('../../image/01.jpg','new','width=250,height=200');" name="button">

【更新日】
　なーんだ、SSIを使わなくても最終更新日などを表示させられたんだぁ。目からウロコ。
　おまけにJacaScriptでタグも表示されられる・・。

【図の作成】
　練習問題の幾つか。数学の試験のように、てこずりながらもなかなか面白かった。

1)　 var num, i, vez = 5;
document.write('<pre>');
for( num = 1; num <= vez; num++ ){
　for( i = 1; i <= vez; i++ ){
　　if( num <= (vez - i) ) document.write('　');
　　　else document.write('＊');
　}
　document.write('<br>');
}
document.write('</pre>');

2)　 var i, j, vez = 8;
document.write('<pre>');
for( i = 1; i <= vez; i++ ){
　for( j = 1; j <= vez; j++ ){
　　if( j == i || j == (vez - i) + 1 ) document.write('＊');
　　else document.write('　');
　}
　document.write('<br>');
}
document.write('</pre>');

3)　 var i, j, vez = 9;
if( vez % 2 == 0 ) vez += 1;
var centro = Math.floor(vez / 2) + 1;
document.write('<pre>');
for( i = 1; i <= centro; i++ ){
　for( j = 1; j <= vez; j++ ){
　　if( j >= ( centro - i + 1 ) && j <= ( centro + i - 1 ) ){
　　　document.write('＊');
　　}else{
　　　document.write('　');
　　}
　　if(j == vez) document.write('<br>');
　}
}
for( i = 1; i < centro; i++ ){
　for( j = 1; j <= vez; j++ ){
　　if( j <= ( centro - ( centro - i ) ) || j >= ( centro + ( centro - i) ) ){
　　　document.write('　');
　　}else{
　　　document.write('＊');
　　}
　　if(j == vez) document.write('<br>');
　}
}
document.write('</pre>');