2011年1月27日木曜日

リベンジだい

おはようございます。
 昨日までの2日間は、jQueryにほとんど跳ねとばされてしまって、ほとほと疲れてしまいました。jQueryごときに負け続けるのも癪にさわります。本日から気を取り直してjQueryに再チャレンジです。負けていられません。こうなれば基礎から徹底的にやってみます。
 ということで本日からに備えて昨夜も晩酌もほどほどにして、万全の体調で本日は2時に起きました。どうせ1週間や2週間ではこのショボイ頭では覚えきれないだろうから、長期戦を覚悟しています。たぶんこの2,3日は撥ね付けられてばかりだろうけども、決してメゲナイ諦めないの精神です。
 なあに簡単なことです。できるまでやればいいだけのことです。まったく歯が立たないというほどのことでもないのですから。
 これまでソースを読んでも理解できない部分が多かったのは、動的にHTMLをいじると同時にCSSも同時にいじることができるというのを理解してなかったから、わからなかったのだと思う。それにタグのid属性とかclass属性も重要な要素だということですね。id属性とかclass属性なんていうのはCSSだけで利用するもんだと頭から思いこんでいたものですから。これまでJavaScriptをかなり馬鹿にしていたような気がします。深く反省しました。ゴメンゴメン

 JavaScriptの良いところは、ブラウザーとテキストエディターがあれば、どこでも開発できるということですね。特別なものは何もいらない。その場でコードを書けば結果がすぐにわかる。手軽でいいんですけれども。せめてトレースができればいいんですけれども。もっともトレースするほど複雑なものはまだ書きようもないのですが。

 と、いろいろ書いていたのですが、このブログでjQueryを試せないかと思ったのです。以下のボタンがjQueryを動作させています。ただし、どのボタンも1回だけ動作します。再度試すにはブラウザーの再読込をしなければなりません。まだfalseかtrureなのかの判断の仕方を知らないからです。元のテキスト文に戻せないから1回しか動作しないのです。
 ここでたくさんの事を学びました。いや発見しました。このブログはgoogleが運営しているものです。だからgoogleが提供している"http://www.google.com/jsapi"をデフォルトで読み込んであるのかと思いましたが、どうも違うようで動作しませんでした。そこでこの文章の最後で以下の2行を書き込んでおきました。この2行は通常ヘッダ部分に書き込むようですけど、場所はどこでもいいんですね。

これらのコードはjQuery入門 (ver 1.3)様のサイトを参考にさせていただきました。このサイトの説明は初心者には実にわかりやすいです。ここ数日はこのサイトサンプルを全て自分で書いて検証していこうと思っています。他にも優れもののサイトがたくさんあります。Web制作の現場で使えるjQuery UIデザイン入門というサイトもわかりやすく説明されています。感謝です。

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.4");</script>

またJavaScriptの関数部分もこの本文中に埋め込みました。これもどの場所に書き込んでおいても動作するんですね。以下はその一部です。
<script type="text/javascript">
        function changeText(){
               $("#about").html("<b>軽量/高速</b>なライブラリです");
        }
    </script>




jQueryサンプル


jQueryとは?

jQueryとは?





まとめて書き換え

ここを書き換える

ここも書き換える

ここは書き換わらないよ。class属性が指定されてないから



0 件のコメント: