script

setIntervalからsetTimeoutへ

何から書こうかな

まず前回の続き

1.setIntervalで、イベントをonclickからonmouseover,onmouseoutに変更、等速から等加速運動に変更
http://sakurachiro.com/_exercise/javascript/timer/setInterval_opacity_1.html

setIntervalで呼び出す関数に引数を持たせたら動かない
これだとダメ

functionで呼び出したらok

引数はこれで解決したものの
setIntervalが同時に何個も呼ばれてしまい失敗。

2.上記に関数が動いてるかのチェックを追加
http://sakurachiro.com/_exercise/javascript/timer/setInterval_opacity_2.html

3.行き詰ったのでsetTimeoutを勉強してみる
http://sakurachiro.com/_exercise/javascript/timer/setTimeout_opacity_1.html

と、こんな感じまできた
次は、現在1個のidにしか対応してないので、対象の要素(とりあえずa?)が複数あれば勝手に全部対応できるようにさせる。

肝心のopacityは
CSS Validation Service|テキストエリアに直接入力して検証によると

プロパティ opacity は CSS レベル 2.1 に存在しませんが、[css3] に存在します

なんだけど、IE以外のブラウザ、opera/google chrome/safari/Firefox なんかはすでにopacityに対応してる。
IEは独自拡張のfilterをつかって対応

その場合hasLayoutをtrueにしておく必要があるみたい(clearfixみたいにzoom:1が影響がない?)
しかし独自拡張かぁ。
CSS3も先行実装なんだけど、いつか実装された時に修正なしで使えるのがいいおね。

.onmouseover=function()での恥ずかしい勘違い

[追記 / 20100427]
うわー、<script>や<head>を文字参照にしてなかったから途中から表示されてなかった。

id=”btn”な要素があるとして
<head>内に以下のjsを書くか読み込む

1)こちらの記述は動いて

2)こっちだと動かない

なぜだ~

続きを読む

setIntervalとclearInterval

WordPressの「ページ」を使って試しに何かを作ってみようとポートフォリオ的な何かを作った。

で、ぼんやり眺めていたら「ロールオーバーを滑らかにしたいな」と思ってしまった。

flashで言ったら、onrollover・out時にalphaをenterframeで減速処理とかかましたりするfunction作ってしまえばいいんだろうけど
javascriptでenterframeってなんだろう?

ライブラリを使えば簡単に実装できてしまうのだろうけど(幻想?)
せっかくだから最初はライブラリなしでやった方がいいだろう。

関係ないけど、こんなふう(もしくはいままでの記事の様)に物語風に書くと、後で読み返す時必要な情報にすぐアクセスしづらいかな、やっぱり。
箇条書きまではいかなくても「目的、現在の状態、目標(試行錯誤、これがいらない?)、方法・結果」みたいな部分をピックアップして書いていったほうがいいのかな。

調べてみたところjavascriptだと、どうやら setInterval を使うようだ。
どのブラウザでも使えるものなのだろうか…

とりあえず setInterval のテスト、トグルスイッチにしてみた。




次はこれを改造して、ロールオーバーしたらopacityを0.80へ、ロールアウトで1.00にすればいいのよね?

sakurachiro.com

sakurachiro.comのロゴは透過pngで作ってあるというのに、背景がグラデーションになってるわけでもなく、なんだか勿体なかった。

そこで、ちょうど前回のエントリーで動く背景を作った事だし、自分のサイトでも使いましょうと思い立ちデジカメでとった動画を加工。

先日高円寺の阿波踊りがあったことだし阿波の動画をflv化してswfにMCとして読み込む
さくらちろって屋号なのに阿波の背景もどうかな?と思いうちのさくらとチロの動画もflv化してswfに読み込む。

せっかくだからもうちょっと動画を増やしてランダムで表示させたくなる。
最初javascriptでランダムにswfを読み込むようにしようかと考えていたけど、Flash側で制御した方が適してるし楽チンなんじゃないかって事でASを書く

loader.swf
[as3]
//読み込むswfのリスト
var swf_list:Array = [
"dummy.swf",
"dummy.swf",
"dummy.swf",
"dummy.swf",
"dummy.swf"
];

//外部swfロード処理
var loader_obj:Loader=new Loader();
var loadFile = Math.floor(Math.random() * swf_list.length);
trace(swf_list[loadFile]);
var swf_url:URLRequest = new URLRequest(swf_list[loadFile]);
loader_obj.load(swf_url);

stage.addChild(loader_obj);
[/as3]

デモ|さくらちろ
外部swfのリストを外部xmlにすれば更新が楽になるんだろうけど、そこまでしなくてもいいかなと。

今回の躓いた所
loader.swfから見た読み込むswfへのパスではなく
loader.swfを呼び出してるhtmlからswfへのパスじゃないと通らない

stage.addChild(loader_obj);してなくて、表示がされなかったり。

マウス座標を取得するサンプルと引数の疑問2

input毎のidをgetElementByIdで指定せずとも辿っていけた

マウス座標を取得するサンプルと引数の疑問

1でも2でも動く、違いはなんだろう
1のfunction(e)の引数eや
2のmsMove(e)の引数eはなんだろう
いままで理解した(と思っていた)引数とは、使い方が違う気がする。

DOMとDHTML

いまさら感たっぷりですけど
DOM(Document Object Model)と
DHTML(Dynamic HTML)の違いは?
AJAX(Asynchronous JavaScript + XML)は非同期通信を利用したDHTML?

document.write()が
document.getElementById(“ID名”).innerHTML?