ちょっとした視覚効果:JAVAスプリクト初心者入門講座


JavaScript初心者さんの入門書です

ちょっとした視覚効果

JAVAスプリクトを使って本当にちょっとした視覚効果をやってみましょう。視覚効果といっても、たいした物ではありません。視覚効果と一口にいっても色々ありますが、今回は、 文字が実際に入力しているかのように段々と入力されていく効果をやってみようと思います。

理論としては、上で言ったとおりで、あらかじめ用意されている文章を、時間ごとに徐々に表示させていくだけです。

それでは、サンプルプログラムです。 まずは関数部分です。<head>タグ内に記述して下さい。

<script type="text/javascript">
<!--
ShowMsg = "JAVAスプリクトの世界へようこそ!";
CntHensu = 0;
function ShowMessage(){
document.myForm.myFormMessage.value = ShowMsg.substring( 0 , CntHensu )+"_";
CntHensu = ( CntHensu == ShowMsg.length ) ? 0 : CntHensu+1;
}
//-->
</script>

ここから下は<body>タグ内に記述しましょう。

<form name="myForm">
<input type="text" size="30" name="myFormMessage">
</form>
<script type="text/javascript">
<!--
setInterval("ShowMessage()",200);
// -->
</script>

以上です。このサンプルを実行してみて下さい。画面には、テキストボックスが現れ、その中には「JAVAスプリクトの世界へようこそ!」と、徐々に入力されていったはずです。

よりリアルにするために、入力課程においては文末に"_"を表示するようにしています。

余力がある人は、最初はひらがなで入力して、ある一定のラインまで行ったら変換するような効果を作ってみましょう。 ヒントとしては、表示テキストを配列に入れて、変換ポイントまで来たら条件分岐をしてそのときにテキストボックスの表示内容を変える、といったところでしょうか。

カテゴリー:応用編

「ちょっとした視覚効果」は参考になりましたか?

ちょっとした視覚効果:関連記事

簡単な電卓を作ってみる
JAVAスプリクトでは、なんと電卓も作ることが出来ます。その気になれば、皆さんがよく目にする数字の...

お気に入りに追加する機能を作る
皆さんは、Webページを巡回しているときに、ふと「お気に入りに追加」などというボタンをみかけたこと...

ページの移動時にメッセージを表示してみる
普通、というかほとんどのページではそうですが、ページを移動するときには、リンクをクリックすればすぐ...

おみくじを作ってみる
さて、JAVAスプリクトでおみくじを作ってみましょう。ビジターは、ページを訪れる度に、大吉から大凶...

マウスクリックで画像を変えてみる
何かをクリックしたら、何かの処理が起こる、という手法は、様々な場面で使われます。多くの場合、そのク...

簡単なパスワード認証
会員制サイトや、HPやブログの管理者ページでは、パスワード認証をして初めて見られるようになるという...

外部ファイルの読み込み
例えばC言語においては、関数の定義などを、外部ファイルに定義して、それをプログラム中の#inclu...

プルダウンメニューの表示
リンクの多いページによっては、そのリンク先をプルダウンメニューなどを使って選ばせて、そうしてリンク...

右クリックの禁止
右クリックの禁止の設定は、画像を載せていたり、MIDIを流すようなサイト等に多いですが、そういった...

文字の解説を表示
Webサイトを見ていたときに、ふと気になった単語にマウスカーソルを当てると、その言葉の注釈のような...

時間のカウント
アップローダーからファイルをダウンロードするとき、残り何秒お待ち下さい、などという表示がでて、その...

モニタの大きさを取得
モニタの大きさを取得することは、Webページを作る上では重要なことです。たとえば、ある画像を表示さ...

ブラウザ別にメッセージを表示
InternetExplorerやFirefoxなど、皆さんが使っているブラウザのほとんどは、OS...

アラートを使った簡単なクイズ
JAVAスプリクトは、応用次第ではゲームも作ることが出来ます。今回は、ボタンとアラートを使って簡単...

ボタンを押してアラートを表示させる
皆さんは既に、ブラウザのソースに記述して、ページを開いたらそれが実行されるタイプのJAVAスクリプ...