JavaScript
2013.06.12
久しぶりにJavaScriptを書いていて少し迷ったところ。
setInterval()やsetTimeout()についてです。
var sample = setInterval( intervalEvent, 1000);
例えば上記のようなsetInterval関数で、
実行する関数「intervalEvent」に引数を渡したい場合、
var sample = setInterval( intervalEvent(data1), 1000);
と普段通り書いても上手くいきません。
次のように書くことで引数を渡すことができます。
1.無名関数内で改めて関数実行
無名関数の中でなら普段通りの記述ができます。
var sample = setInterval( function(){ intervalEvent(data1); }, 1000);
2.文字列で指定
「'intervalEvent()'」と文字列での指定もできます。なので、
var sample = setInterval('intervalEvent('+ data1 +')', 1000);
setInterval()やsetTimeout()についてです。
var sample = setInterval( intervalEvent, 1000);
例えば上記のようなsetInterval関数で、
実行する関数「intervalEvent」に引数を渡したい場合、
var sample = setInterval( intervalEvent(data1), 1000);
と普段通り書いても上手くいきません。
次のように書くことで引数を渡すことができます。
1.無名関数内で改めて関数実行
無名関数の中でなら普段通りの記述ができます。
var sample = setInterval( function(){ intervalEvent(data1); }, 1000);
2.文字列で指定
「'intervalEvent()'」と文字列での指定もできます。なので、
var sample = setInterval('intervalEvent('+ data1 +')', 1000);
JavaScript , メモ
2012.02.20
以前このグラビカでも「DD_belatedPNG」を紹介する記事を紹介していました、
pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。
CSSでマウスオーバーを表現させたい場合、
通常時とオーバー時の画像をつなげて、aタグの背景に指定し、
hoverで画像をスライドさせる方法があります。
png画像を使用した場合、IE6で正しく表示されないため
DD_belatedPNGを使用します。
が、、、、
上記のような場合、aタグの縦幅（height）が、奇数だと、
IE6で、オーバー画像が1px余分にスライドしてしまい、
画像がずれたような表現になってしまいます。
背景の位置指定では調節できないようです。
なんでか全くわかりませんが、
縦幅を偶数にすることで解決できます。
きみのために入れてるのにわがまま言うなよ。。。（;´_`;） ハァ・・
pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。
CSSでマウスオーバーを表現させたい場合、
通常時とオーバー時の画像をつなげて、aタグの背景に指定し、
hoverで画像をスライドさせる方法があります。
png画像を使用した場合、IE6で正しく表示されないため
DD_belatedPNGを使用します。
が、、、、
上記のような場合、aタグの縦幅（height）が、奇数だと、
IE6で、オーバー画像が1px余分にスライドしてしまい、
画像がずれたような表現になってしまいます。
背景の位置指定では調節できないようです。
なんでか全くわかりませんが、
縦幅を偶数にすることで解決できます。
きみのために入れてるのにわがまま言うなよ。。。（;´_`;） ハァ・・
2012.02.15
JavaScript内に相対パスを記述すると、
そのJavaScriptが読み込まれるHTMLからの相対パスになります。
同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。
そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。
こちらのサイトで紹介されています。
Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する
そのJavaScriptが読み込まれるHTMLからの相対パスになります。
同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。
そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。
こちらのサイトで紹介されています。
Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する
JS：自身の設置URLを取得の続きを読む
2012.01.18
以前書いた、
Flash：ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。
JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。
修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。
・デモ
・ダウンロード
取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。
Flash：ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。
JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。
修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。
・デモ
・ダウンロード
取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。
2011.11.16
リンクをクリックしてページ移動をする際、
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。
iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。
今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。
JSで以下のように書くことで、「戻る」の効かないリンクになります。
<a href="test.html">リンクです</a>
↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました
URLを2箇所に書く点に注意です。
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。
iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。
今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。
JSで以下のように書くことで、「戻る」の効かないリンクになります。
<a href="test.html">リンクです</a>
↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました
URLを2箇所に書く点に注意です。
2010.07.15
JavaScript（jQuery）を使って画像をフェードさせていたところ、
フェード中のいくつかの画像に白い点々が出ているのを見つけました。
（ディスプレイのドット落ちのような・・）
調べてみたところIEのバグのようです。
いろいろな方の記事で書かれているのを見ると、
発生条件は以下のような感じ。
・JavaScript の filter:alpha(opacity); を使用
・JPEG画像を使用
・#02050a の色を使用
要するに、#02050a を含むJPEG画像をJSで透過させると、
#02050a の箇所だけが完全に透過JPEGになってしまう、
というバグのようです。IEのみ。
解決策としては
1. PNG画像などにする
2. #02050a を使わない
3. 背景色を #02050a にする
となりますが、
何故かPNG画像にしただけでは直らず・・
結局、PNG画像 ＋ #02050a の部分を別の色で塗りつぶすことで
解決しました。
ちなみにIE6の頃からあったようですが、IE8でも確認しました。。
フェード中のいくつかの画像に白い点々が出ているのを見つけました。
（ディスプレイのドット落ちのような・・）
調べてみたところIEのバグのようです。
いろいろな方の記事で書かれているのを見ると、
発生条件は以下のような感じ。
・JavaScript の filter:alpha(opacity); を使用
・JPEG画像を使用
・#02050a の色を使用
要するに、#02050a を含むJPEG画像をJSで透過させると、
#02050a の箇所だけが完全に透過JPEGになってしまう、
というバグのようです。IEのみ。
解決策としては
1. PNG画像などにする
2. #02050a を使わない
3. 背景色を #02050a にする
となりますが、
何故かPNG画像にしただけでは直らず・・
結局、PNG画像 ＋ #02050a の部分を別の色で塗りつぶすことで
解決しました。
ちなみにIE6の頃からあったようですが、IE8でも確認しました。。
2010.03.25
ページ内のアンカーリンクをスムーズにスクロールさせる
JavaScriptのメモです。
ページの組み方のせいか、普段から使っているsmooth.pack.jsが思うように動作しなかったので、他の使いやすそうなJSを探してみました。
■smoothScroll.js
使い方はsmooth.pack.jsと同じで、＜head＞＜/head＞内で読み込むだけ。
動作の問題も回避できました。
スクロールの挙動が違うので好みの問題になると思いますが、
様子を見て使い分けて見ようと思います。
JavaScriptのメモです。
ページの組み方のせいか、普段から使っているsmooth.pack.jsが思うように動作しなかったので、他の使いやすそうなJSを探してみました。
■smoothScroll.js
使い方はsmooth.pack.jsと同じで、＜head＞＜/head＞内で読み込むだけ。
動作の問題も回避できました。
スクロールの挙動が違うので好みの問題になると思いますが、
様子を見て使い分けて見ようと思います。
2009.06.04
先日少し話題になったのでまとめてみました。
JavaScriptのバージョンについてです。
実は自分はあまり気にしたことがなかったんですが、JavaScriptにもちゃんとバージョンがあります。
（自分でコードを書いたりしないので、あまり意識していなかった・・。）
JavaScriptのバージョンが新しいからといって、古い機能がなくなるということはほとんどないそうです。
普段使うように、
<script language="javascript" src="aaa.js" ></script>
と書く分には、特にバージョンを気にする必要はないですしね。
ですが、実際はブラウザごとにサポートしているバージョンは異なっていて、
それよりも新しいバージョンの機能を使うとエラーが出てしまいます。
先ほどのタグの「 language="javascript" 」の部分、ここにバージョンを書くことで、
それより新しい機能を無視することができます。
（例）<script language="javascript1.5" src="aaa.js" ></script>
エラーが出ないように書いておくといいかもしれません。
ブラウザごとの対応バージョンはこちら、DIASPARさんのところでまとめられています。
参考にさせていただきました。
JavaScriptのバージョンについてです。
実は自分はあまり気にしたことがなかったんですが、JavaScriptにもちゃんとバージョンがあります。
（自分でコードを書いたりしないので、あまり意識していなかった・・。）
JavaScriptのバージョンが新しいからといって、古い機能がなくなるということはほとんどないそうです。
普段使うように、
<script language="javascript" src="aaa.js" ></script>
と書く分には、特にバージョンを気にする必要はないですしね。
ですが、実際はブラウザごとにサポートしているバージョンは異なっていて、
それよりも新しいバージョンの機能を使うとエラーが出てしまいます。
先ほどのタグの「 language="javascript" 」の部分、ここにバージョンを書くことで、
それより新しい機能を無視することができます。
（例）<script language="javascript1.5" src="aaa.js" ></script>
エラーが出ないように書いておくといいかもしれません。
ブラウザごとの対応バージョンはこちら、DIASPARさんのところでまとめられています。
参考にさせていただきました。
2009.01.07
lightboxを使って画像をポップアップさせたとき、エリアの外はデフォルトでは半透明の黒が敷かれるのですが、そこを変えてみました。
カラーは、lightbox.css内にある「 #overlay 」の背景色を変更することで変えることができます。
同じようにして、不透明度も変えられるだろうと思ったのですが・・
どうやら、ここでは設定できないようです。
不透明度のほうは、lightbox.jsの320行目にある
new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
最後の to: の部分で設定できました。
この場合は0.8なので不透明度80%です。
カラーは、lightbox.css内にある「 #overlay 」の背景色を変更することで変えることができます。
同じようにして、不透明度も変えられるだろうと思ったのですが・・
どうやら、ここでは設定できないようです。
不透明度のほうは、lightbox.jsの320行目にある
new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
最後の to: の部分で設定できました。
この場合は0.8なので不透明度80%です。
