+ JavaScript の質問用スレッド vol.90 +

test.html

function hoge() {
〜
return false;
}

<a href="#" onclick="hoge();">パターン1</a>
<a href="test.html" onclick="return hoge();">パターン2</a>
<a href="test.html" onclick="hoge(); return false;">パターン3</a>
<a href="javascript:void(0)" onclick="hoge();">パターン4</a>
<a href="javascript:void(0)" onclick="return hoge();">パターン5</a>
<a href="javascript:void(0)" onclick="hoge(); return false">パターン6</a>
<a href="javascript:hoge()">パターン7</a>
<a href="javascript:void(hoge())">パターン8</a>

推奨パターンは何番？

<span id="hoge">パターン9</span>

document.getElementById("hoge").addEventListener("click", hoge, false);

function hoge(event) {}

名前空間用の変数を用意して、その直下にメソッドを付けるような書き方をした場合、
それらのメソッドの中でthisキーワードを介して同じ名前空間内の別のメソッドを呼ぶのと、
名前空間から別のメソッドを呼ぶ場合とではどちらが良いですか？
thisでやってしまうと、ローカルスコープ内でエイリアスを作った場合にthisの参照先が変わってしまって
動かなくなると思うんですが、thisでやる場合のメリットってなにかありますか？

複製した時とか？

質問です、というか疑問なんですが

要素を追加する時
var element = document.createElement('div');
element.id = "id";
element.innerHTML = "hogehoge";
element.style.backgroundColor = 'red';

とやるのが一般的ですが
innerHTML="<div id=\"id\" style=\"background-color:red;\">hogehoge</div>";
とやったほうが解りやすいと思うのですが
このやり方だと不具合があったりするのでしょうか？

それがわかりやすいと感じる範囲ならそっちでもいい。（innerHTMLが非標準だったりするけど、大抵は動くからOK）
入り組んだものを作る時スピードが必要ならcreateElementじゃないと遅かったり。
あとは、innerHTML+=〜だと再描画がかかるけど、appendChildだと再描画されない。

html5からinnerHTMLって標準になったって聞いたのですが使わないほうがいいですか？

>>957
なるほどー、そういう問題でしたか
ありがとうございます。ナットクです
確かに全部再描写するより、一つ追加させた方が早いですね

追加するときはそれでいいね、わかりやすいし
自分なら面倒だからライブラリに任せる
jQuery(document.body).append("<div>hello world</div>");

>>958
HTML5で標準になってたとして、それ以前は切り捨てOKでいいなら使えばいいんじゃないかな。

>>958,961
innerHTMLはガラケーを含む殆どのブラウザで昔から使えるしＯＫ
createElementの方がここ１年くらいでだいぶ改善されたけど基本重いから
古いブラウザやマシンのこと考えるんならそっちの方が非推奨
CREATE中はJSで負荷をかけてる分だけ描画が完全に止まるから
CREATEは簡潔に、APPEND時にブラウザエンジン側に描画と非同期にコストを払わせるinnerHTMLの方がユーザーにとっていい

Javascriptを体験しながら勉強しているのですが
エレメント.style.backgroundColorの
backgoroundColorを指定するのにbackground-colorとか全部小文字にしてて上手く行かず
backgroundColorと書けばいいと判明するのに結構時間がかかりました

皆さん、こういうのって全部覚えているのでしょうか？
それともこういうのが全部ズラーっと並んでる便利なサイトとかがあるのでしょうか？

-は引き算として扱われるから、すべての-直後の一文字を大文字にすれば解決。
あとは、style["background-color"]=もあり。

そんな法則があったんですか
だからbackground-Colorとかでダメだったんですね
ありがとうございます

×すべての-直後の一文字を大文字に
○すべての-直後の一文字を大文字にして-を削除

初めて知った。今まで全部テキトーに覚えてた

>>962
そのためにドキュメントフラグメントが用意されてるだろ？

innerHTMLはevalみたいで何かやだ

tableの内容の書き換えが面倒すぎるinnerHTML使いたい

0123456789
にinnerHTML +=0すると
もう一度01234567890って最初から全部描写するのがなぁ
今は全然問題ないけど、2000年頃のPCには結構なタイムラグが

http://javascriptist.net/docs/libraries_colorpicker.htmlで紹介されているようなカラーピッカーを作りたいのですが
これはどのように作られているのでしょうか？
rgbで
0,0,0→0,0,255
1,0,0→1,0,255
2,0,0→2,0,255
略
255,255,0→255,255,255
としてforでループしながらdivを生成して、生成したdivにスタイルで対象のrgbを指定していってますが
処理が重すぎて固まってしまいます

マウスの座標から一発で計算できるとは思いませんかそれ
divの代わりに同じように見えるグラデーション画像一枚用意すれば済むでしょ

画像用意してその要素上の座標から割り出すってのが一番いいな

>>971
それ回避する方法おしえて

>>975
>>957

でもjavascriptのライブラリに画像ファイルが見当たりません

Color picker（ADV含む）以外見たが全部画像使ってるじゃんよ

>>976
>>971(ただの文字の追加)と>>957(エレメントの追加）って同じなの？

ライブラリの中身くらい自分で見ろよと思う

流石にjQueryとかjQueryUIとかまでは解るが
そーいうメジャーとは言いがたいライブラリはちょっとなぁ

ライブラリを使ったサンプルページのソースを見てないんかい

>>979
エレメントの追加と考えるからいかん、ノードの追加なんだ
エレメントノードでもテキストノードでもやることは同じなんだ

ブラウザで右クリックしても画像を保存が出てこなかったので画像じゃないと思ってました
jQuery color pickerをダウンロードしたところライブラリをダウンロードしたら画像だったことを確認しました
失礼いたしました
そこで画像情のマウスで計算できそうですが画像の色が変わるのはcanvasでRGBを変換して作るのが妥当でしょうか？

んまーそういうライブラリってのは｢誰にでも、どんな状況でも使えるように｣してあるから
構造とかを理解して自分で１から作ると容量が1/10以下になったりするから
そーやって経験積むのもいいかな

canvasにかわる代替手段があるならそちらを優先して使えって種子じゃなかったcanvasって

>>983
>>971の例だとこんな感じ？
element.appendChild(document.createTextNode('0'));

element.childNodes[0].data+=0;

Lv足りなくて次スレ建てられません。どなたかおねがい〜。
今回はテンプレの変更は無しです。

ajaxで返事が帰ってくるのを待ってる時によく見るくるくる回るようなやつはどうやって実装されているのでしょうか？
よく見かけるので多分プラグインか何かであると思いますが。
twitterでタイムライン読み込むときや、いろんなサイトで画像や動画を読み込む時などに見かけるやつです
名前わからなくてどう調べれば良いのかわかりませんでした、よろしくお願いします。

通信開始でくるくる表示（gifアニメかな）
返事が帰ってきたらgif非表示・削除

ｊQuery prettyLoader

>>991,992
ありがとうございます！

早く誰か次スレたてろや

今レベル上げてるから待て。
専ブラ使わず、web ブラウザもころころ変えてたせいだ。

よし立ててくる

とりあえず立った
これからテンプレ各種コピる

レス番・・・

しっぱいした
くびつってくる
http://hibari.2ch.net/test/read.cgi/hp/1319633963/

まぁ、良いってことよ。

このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。