ウェブページ実験室

　このページでは、HTMLやJavaScriptの練習をしたいと思っています。DOMやCSSを用いたDynamicHTMLの習得を目指しておりますが、適当にサンプルを作って動作確認を行うのが主になりそうです。

ここからAjaxの実験

7、Ajaxツール（フレームワーク）を使ってみた(spry編)

　「Ajaxを使ってみた」の２回目です。今回はこれまたフリーで入手できる、アドビのSpryというAjaxフレームワークを使ってみました。視覚効果以外にもいろいろな機能があるようなのですが、とりあえず見た目に変化する方がおもしろそうだし、サンプルを使えば簡単に搭載できそうだったので。

フリーのAjaxフレームワークを使うことで、このような視覚効果が得られます。ダウンロード、解凍後、Samplesフォルダーにあるサンプルのソースを参考に（ほとんどコピーして）設定しました。

フェード　シェイク　スカッシュ　ハイライト

ここからYUIの実験

6、Ajaxツール（フレームワーク）を使ってみた(YUI編)

　Ajaxとは、HTML、CSSを基に「４、テキストの変更」で紹介したDOMを使って動的に表示を変化させたり、XMLHttpRequestを用いてサーバから非同期でデータを取得する技術の総称のようです。これらの制御はJavaScriptで行いますので、サーバの制約は受けずにすみます。フリー（無料）のツール（Ajaxフレームワーク）がいくつも登場して、初心者でも動的コンテンツを作ることができます。
　今回は「Yahoo! User interface Library=YUI」（もちろんフリー）を利用した画像のアニメーションに挑戦してみました。

　ヤフーといえども英語のページなので詳細はよくわからんのですが、animation.js、event.js、dom.js、yahoo.jsの４つを読み込めば動作するみたいです。

ここから日付計算

5、日付計算

　カレンダーをみてたら、日付の計算をするのを思いつきました。何日前は、何日後は何月何日か？自分が生まれてから何日経ったか？定年退職を迎えるまで、あと何日か？など、今日を基準にして計算できます。
ただし日付の入力が、日本式の「yyyy/mm/dd」の形式にできずでした。米国式に入力して下さい。

ここからDOMの実験

4、テキストの変更

一度表示されたテキストの変更は、ＤＯＭを使えば可能です。今回はあらかじめ表示したいテキストを二種類用意しておいて、getElementById("id名")でどちらを表示するか選択しています。ボタンをクリックしてみて下さい

3、乱数による背景色変更

　とりあえず、見た目を変化させたいってことで、背景色を変更するようにしてみました。乱数を発生させて４種類の色がランダムに変化します。ここまでを関数で用意して、<form>エレメントによるボタンで切り替えています。

２、ＯＳチェッカー

　このページが読み込まれたパソコンのＯＳを＜navigator.platform＞オブジェクトで判定し、ｉｆ文による条件分岐で、アラート表示を切り替えています。

1、時計のチェック

　パソコン内蔵時計の現在時刻を取り出し、表示しています。狂っていませんか？

2/11/2007

トップページに戻る