分室の分室

【223】JavaScript の予約語

javascript

【追記】04/08 Sun 20:29(明らかなバグを修正…)
04/08 23:50(記事も一部修正)

			
制作メモ
　そうだ。予約語を表示してみよう、と思った。

　js を覚えきれていない現状では、コーディング中によく手が止まる。 変数名
を決める時に、

    これは予約語だっけ ?

となるので。そこで


    1.  テキストボックスに 英字1文字 を入力すると、
        その文字から始まる予約語を表示する。

    2.  テキストボックスに 英単語 (2文字以上)を入力すると、
        その文字列が予約語にマッチするかどうかを調べる。


…というのを作ってみる(英字は大文字と小文字を区別する)。


    予約語については、次のページを参考にしました。↓

    http://www.ajaxtower.jp/js/ini/index5.html
    (AjaxTower - 予約語：buzzword 氏のページ)


　上記の資料をまるごと変数 heredoc に格納した。 あとは入力単語と heredoc
を照合する。さほど難しいことではないかと。実現するために必要なことは…

    ・入力文字列が何文字かを特定(単語 or 1文字)

    ・1文字ならば、その文字から始まる予約語を探し、配列 reserve に格納
    ・具体的には、 /\s文字[a-zA-Z]+\s/gm  にマッチする予約語を探す
    ・配列要素を sort() で並べ替え、join() で連結して表示
    ・配列が null なら『"文字" から始まる予約語はありません』…となる

    ・単語の場合は、 /単語/m  にマッチする予約語があるかを探す
    ・単語の場合は、 /\s単語\s/m  にマッチする予約語があるかを探す
    ・マッチしたら    『"単語" は予約語です』          …となる
    ・マッチしなければ『"単語" は予約語ではありません』…となる

　Perl だったら、ここまで仕様が固まれば、もう出来たも同然なんだけど、js
の場合、さらに html フォームとか、色々と面倒くさい…


　とまあ、こんな感じでやってみた。ソースは『サンプル置場』に


    http://blue.zero.jp/foussin/cgi/sjis-src/trial-run/js/

    reserved_words0.html .......... オリジナル
    reserved_words0_hatena.html ... はてなブログ用に書き直したもの

    reserved_words1.html .......... オリジナル
    reserved_words1_hatena.html ... はてなブログ用に書き直したもの


…を置いてある。今回のサンプルでは、正規表現、sort、join、innerHTML など、
js でよく使うと思われる構文を一通り試した。これでやっと『じゃじゃ馬 js 』
を乗りこなせた気がする。乗れただけで、走らすには至っていないが、コイツを
疾走させるのはプロに任せて、当方としてはのんびりゆったりと歩を進めたい。

			
はてなブログでプチトラブル…
　今回はちゃんと表示できた。フォームから起動させれば動くようだ。ブログの
記事の中で js を動かす場合、ヘッダではなく、ボディに記述することになる。
body 内では、html のレンダリングが終わるまで待つ…ということができないの
で、js コードを最後に記述する。これで良いみたい。

　しかし、ちょっとしたトラブルが発生した。前回に投稿した時計の時刻が、今
回の記事のテキスト窓に表示されてしまった。

　JavaScript の時計は、こんなソースだった。↓


<FORM METHOD="post">
ただいま<INPUT NAME="watch" SIZE=15>です。
</FORM>
<SCRIPT LANGUAGE="JavaScript">
function watch() {
    now = new Date();
    :
    : (中略)
    :
    document.forms[0].elements[0].value = hour+":"+min+":"+sec;
    setTimeout('watch()', 999); // 1000msec = 1sec
}
watch();
</SCRIPT>
 

　これは、とある有名な Webサイトからコピペしただけのものなんだけど、今回
これが問題なのは、

    『名無しの <form> 』を使っている
    『document.forms[0].elements[0].value』…抽象的に指定している

…ここが問題だった。で、次のように修正した。↓


<form method="post" name="fwatch">
ただいま<input type="text" name="iwatch" size="15" />です。
</form>
<script type="text/javascript">// <![CDATA[
function watch() {
    now  = new Date();
    hour = now.getHours();
    min  = now.getMinutes();
    sec  = now.getSeconds();
    if (hour < 10) {
        hour = "0" + hour;
    }
    if (min < 10) {
        min = "0" + min;
    }
    if (sec < 10) {
        sec = "0" + sec;
    }
    document.fwatch.iwatch.value = hour + ":" + min + ":" + sec;
    setTimeout('watch()', 999); // 1000msec = 1sec
}
watch();
// ></script>
 

…このように修正し、再読込で表示したら正常に戻った。ところで、


    コメントの  <!--  …  -->   が、

    // <![CDATA[  …  // >    に


変換されているのは『はてなブログ』の自動化によるもの。
詳細はわかんない…。


　ブログで JavaScript するなら、name 属性、id 属性が重複しないように管理
する必要がある。『通し番号』とか『年月日』とかで区別する必要があるな。


　今日は、これでおしまい。

Permalink | コメント(0) | トラックバック(0) | 17:22