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

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止ではありませんが、ライブラリスレで聞くとより回答を得やすいかもしれません。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

■前スレ
+ JavaScript の質問用スレッド vol.112 +
http://toro.2ch.net/test/read.cgi/hp/1383465702/

■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)

■テンプレ案
http://jsfiddle.net/fH4cC/31/show/

■関連スレ
ECMAScript デス 4
http://toro.2ch.net/test/read.cgi/tech/1325448978/
【jQuery】JavaScript ライブラリ総合質問所 vol.3
http://toro.2ch.net/test/read.cgi/hp/1369444026/
【WHATWG】HTML5 Part4【W3C HTML WG】
http://toro.2ch.net/test/read.cgi/hp/1329529892/
Webサイト制作初心者用質問スレ part237
http://toro.2ch.net/test/read.cgi/hp/1380819516/
CSS初心者スレッド＝12th＝
http://toro.2ch.net/test/read.cgi/hp/1343429848/
Canvasについて語ろう
http://toro.2ch.net/test/read.cgi/hp/1305093769/

■主要FAQ (全部は http://fiddle.jshell.net/vSqKr/33/show/ )
Q1. 別窓・フレーム内容やローカルファイルを読み書きしたいのですが…
A1. 別サーバのページやファイルの内容はセキュリティ制約でアクセス不可です。
Q2. document.write()でページ内容を追加したいのですが…
A2. 一度表示完了後にwriteするとページ内容が消去されます。DOM等別手段を。
Q3. table内容のinnerHTMLやDOMでの変更がうまく行かないのですが…
A3. IEではtable/tbody/trのinnerHTML書き換え不可です。DOMを使いますが、
　　DOMの場合tableの直下にはtbody要素が(作らなくても)あることに注意。
Q4. フォーム部品名を変数にした「...myform.変数名.value」が動きません…
A4. 「document.forms.myform.elements[変数名].value」でどぞ。
　 JavaScriptでは一般に「obj.x」と「obj['x']」は同じ意味です。
　 グローバル変数はwindowのプロパティなので「x」と「window['x']」も。
Q5. CSSで設定した背景色がe.style.backgroundColorで取得できないのですが…
A5. 取得には document.defaultView.getComputedStyle() を使う必要あり。
　　IEでは要素オブジェクトのプロパティcurrentStyleを使う。
Q6. setAttribute("class","foo")、setAttribute("onclick","bar()")が動きません…
A6. IEではそれは不可。「obj.className="foo"」「obj.onclick=bar」でどぞ。
Q7. タイマーやイベントハンドラに設定するコードにthisを含めたいのですが
　　「"...this..."」とか「function(){...this...}」ではうまく行きません。
A7. 実行時にthisが別のものを指してしまってる。以下のようにthisを束縛保存。
　　「function(x){return function(){...x...};}(this)」
Q8. input type="file"の値を設定(参照)できないのですが…
A8. セキュリティ制約のため設定は絶対に不可。参照はブラウザにより不可。
Q9. getElementById('ID名')や$('ID名')で要素が取れないのですが…
A9. コード実行時点でHTMLがそこまで読まれてない。window.onload 中でやるとか。

■各種仕様 ( http://fiddle.jshell.net/vSqKr/33/show/#Link も参照 )
◆ Standard ECMA-262
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ （ECMAScript 3 和訳）
http://www.ecma-international.org/ecma-262/5.1/ （ECMAScript 5.1 HTML版）
http://people.mozilla.org/~jorendorff/es6-draft.html （ECMAScript 6 有志HTML版）
http://kangax.github.io/es5-compat-table/ （ECMAScript 5 compatibility table）
http://kangax.github.io/es5-compat-table/es6/ （ECMAScript 6 compatibility table）
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html （HTML5.1 部分訳）
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html （Web Storage 和訳）
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html （DOM Standard (DOM4) 和訳）
http://www.w3.org/TR/DOM-Level-3-Events/ （DOM3 Events）
http://www.w3.org/TR/uievents/ （UI Events）
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html （CSSOM 和訳）
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html （CSSOM View Module 和訳）
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ （DOM Parsing and Serialization - innerHTML等）
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html （XMLHttpRequest 和訳）
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html （File API 和訳）
http://www.whatwg.org/specs/ （WHATWGの仕様一覧）
◆ MDN (Netscape/Mozilla)
https://developer.mozilla.org/ja/docs
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html
◆ MSDN Library
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)

javascriptってbeep音みたいなのできる？

無理ぽ

そうなんだ

　

粒子法で炎の描画って可能でしょうか

知りません

>>10
作ったよ〜

本能寺の変
http://jsdo.it/jagarikin/r2NU

無関係なもんを貼付けるな

　

　

　

　

　

　

　

>>12
波とか水面のキラキラするやつってどうやります？

>>21
作ったよ〜

http://jsdo.it/jagarikin/o9Ja

キラキラはしてないけど志村けんが夢から覚める時のやつ

例え的確すぎﾜﾛﾀ

--------html--------

<div>
<a href="#">
<img src="hoge.png" id="3" onclick="test(this.id)" />
</a>
</div>

<div>
<script type="text/javascript">
document.write("ここは" + hallid + "階です");
</script>
</div>

-----javascript-------
var hallid;
function test(id){
hallid = id;
......;
.........;.
........;
}

画像をクリックするとそのidを別の場所に表示させたいために、上のようなコードをかいたのですが、undifiedとなってしまいます。
解決策お願いします。
OS:windws7　ブラウザ:firefox

>>24
解決策は教えない。

質問があるならどうぞ。

>>25
少し内容を変えます

<a href="#">
__<img src="hoge1.png" id="1" />
</a>
<a href="#">
__<img src="hoge2.png" id="2" />
</a>

と２つ画像があったとして、例えばhoge1.pngの画像をクリックした場合

<table>
__<c:forEach var="m" items="${hallList}">
____<c:if test="${m.hallNum == 70}">
______<tr>
________<td>${f:out(m.floorNum)}</td>
________<td>${f:out(m.placeName)}</td>
______</tr>
____</c:if>
__</c:forEach>
</table>

この70となっているところを画像のid（１）にしたいのですが、何を入れればいいでしょうか。

>>26
なんでJavaScriptじゃないもののことを
ここで聞くんですか？

>>27
htmlでした
すいません
では何度もすみませんが、
>>24
の場合何をすればundifinedではなくちゃんとした値を
表示できるでしょうか。

>>24>>28
コードが実行される順序を考えろよ。

Web制作版じゃこの程度だよ。

>>26
JSPはサーバで動くじゃん
JSはクライアントで動くじゃん
手遅れじゃん

jsから動的にhtml要素を追加する時の方法について質問です。

簡単にリンクを追加するだけ等であれば、createElement("a").setAttribute("href","http://〜");と手動でdomを作ってもいいのでしょうが
複雑なhtml要素を動的に追加し、かつ追加した要素にイベントをセットする方法はどうすればよいでしょうか？

例えばjqueryを使うとして
$("<div>〜〜〜</div>");で要素を内部的に作り
内部的な要素にfind("span.box>div.image>span.delButton>span,label").click(callback);
といった感じでイベントを追加したりし、対象にappendするのが正しいやり方なのでしょうか？


自分の中では
jsの中にhtmlコードを直接書くと、文字列のhtmlからdom解析をする必要があるのでコストが悪い。(のでcleateElement等を使って直接DOMを作るのが正しいはずだ)
そもそもjsの変数だとエスケープとか面倒だからしたくない
という理由ですっきりしないのですが、それはもうそういうものなのでしょうか？

時間が気になるのなら時間計測してみればいいじゃん。コードでもたもた作るより
innerHTMLに文字列食べさせる方が速いことが多いのでは。HTML解析はブラウザの
速度に直接効くところだからかなりチューニングされてるよ。

m.ha = function(a) {
__return "array" == (0, m.fa)(a)
};

・m.faはオブジェクトの型を返す関数
・aは何らかのオブジェクト

(0, *)(a)というイディオムがよくわからないんだけど
この場合(0, m.fa)(a)の 0 でまずオブジェクトaを初期化してm.faで評価する
という意味なのかな？

>>34
カンマ演算子
カンマの右側が評価される。なので
(0,m.fa) は m.fa になる。だからこの場合の右辺は m.fa(a) になるね

>>35
youtubeのwww_base_mod.jsに(0, m.fa)(a)みたいなイディオムがたくさんあるんだけど
(0,*)という評価にどういう意味があるんだろう？
なんらかのおまじないなんだろうけど、*がnullでもundefinedでも評価に関係なさそうだし
http://s.ytimg.com/yts/jsbin/www-vfllENEkm/www_base_mod.js

>>36
わからん。

わかった

nodeにて実行

var m = {}, a;
m.a = a = (function(){console.log(this)});

------------------------
> a()
{ ArrayBuffer: [Function: ArrayBuffer],
Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },
略

------------------------
> m.a()
{ a: [Function] }

------------------------
> (m.a)()
{ a: [Function] }

------------------------
> (0, m.a)()
{ ArrayBuffer: [Function: ArrayBuffer],
Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },
略

俺もわからんから勉強してきた
http://stackoverflow.com/questions/6577812/calling-function-with-window-scope-explanation-0-function


この例よりも、こうしたほうが俺はわかりやすかったわ
http://jsfiddle.net/AJ7K9/

m.fa(); ってするとオブジェクトmのメソッドとして実行されてるわけだが
(0,m.fa)() とすることにより、野良関数として実行してる、であってるかな？

なんか勉強になった。使わないだろうけど。

good partsに、特殊文字を文字参照するメソッドの作り方が載ってますが、

String.method('entityify',function(){
var character = {
'<' : '&lt;',
'>' : '&gt;',
'&' : '&amp;',
'"' : '&quot;'
};
return function(){
return this.replace(/[<>&"]/g, function (c) {return character[c];});
};
}());
これって
//特殊文字を文字参照に変換する
String.method('entityify',function(){
var character = {
'<' : '&lt;',
'>' : '&gt;',
'&' : '&amp;',
'"' : '&quot;'
};
return this.replace(/[<>&"]/g, function (c) {return character[c];});
});
でも動くんですが、何かダメでしょうか？

毎回オブジェクトイニシャライザ { ... } を実行するのが
気持ち悪くなければ/重くなければいいんじゃない?

>>42
どこが違うのかわからない

よく見たらわかった。スレ汚しごめん。

>毎回オブジェクトイニシャライザ { ... } を実行するのが

すいません。わかりません。
var character = {
'<' : '&lt;',
'>' : '&gt;',
'&' : '&amp;',
'"' : '&quot;'
};
オブジェクトcharacterへのアクセス回数のことなのでしょうか？

>>46
42の前半の書き方だと、characterオブジェクトはメソッド定義時に一回だけ作られて、メソッドを何回呼び出しても毎回同じオブジェクトが使われる。
42の後半の書き方だと、メソッドを呼び出すたびに毎回characterオブジェクトが作られて使い捨てられる。

>>47
そのような挙動をするのですか、わかりました。
ありがとうございます。

Highstockの下の部分みたいに、ユーザにドラッグで大雑把に期間選択だけさせたい。グラフは要らない。簡単なライブラリありませんか？
ttp://www.highcharts.com/stock/demo/

>>39,>>40
なるほど、そういう事なのね。　ありがとう！

>>40の解説読むと、メモリ消費量の最適化になってるのかな

window.addEventListenerはwindowを省略してaddEventListnerと書いちゃってもいいんですか？

>>51
あ、た、り、ま、え
面倒だからwindow系は省略する人がほとんどだろう

location.href='http://tts-api.com/tts.mp3?q='+prompt('Enter').split(" ").join("+")
英語の発音の確認に使えるブックマークレット作ったけど、連想配列って便利すぎやな。喋ってくれるAPIのURLに文字列ぶち込むだけだけど、空白を+に置き換えるのがわかりにくかった。

最近良く見かける、無名関数を変数に入れて使うのってなんかメリットあるの？
普通に関数定義して呼び出すのでよくね？

>>54
var a=function(){};ってやつ？
functin a(){}は巻き上げが行われ、だらしないコードを
書いてしまう原因になるから、var a=function(){};を使えって
good partsに書いてあった。

>>51
>>52
それは違う。たまたまグローバルオブジェクトがwindowなだけ。
未定義の変数を直接参照するとエラーになるけど、
windowオブジェクトのプロパティとして参照するとundefinedが返る。
つまり、hogeが定義されていなければ、
alert(hoge); //エラーになる
alert(window.hoge); //undefinedと表示される

>>55
var aも巻き上げられるじゃん？

関数は全部先頭にかけってことでしょ?

>>53
encodeURIComponent(prompt('Enter'))
?とか他にもエンコードしなきゃ駄目な文字は有るしencodeURIComponent使っとけ。
ていうかそんだけならreplace(/ /g,"+")でいいし、そもそも特に連想配列使ってねぇだろソレ

>>58
意味がわからん。

そもそも多くの言語で関数はどこに書いてもいいものだよね？

>>50　圧縮の時ネームスペースmに勝手にバインドされることで悪影響が出ないことを保証するためのもので、良いものではない
>>51　OK

>>60
good partsはだいぶ古い情報だから今は当てにしなくていい
あれはJSにコーディングスタイルというものが根付いてなかったときに、根付かせようとしたものだから
「道で人に出会ったら挨拶しましょう」みたいなもので、良い悪いの基準が違う

もう一つ言えばブロック文(ifなんか)中の関数宣言の挙動が定義されてなかったというか、
本来ESの仕様では出来ないはずなのに実装では独自に出来るようにして、挙動差があったりもしてた
そういう少しでも怪しい物には触らないようにして、JSをきっちり書いていこうというスタンスがgood parts

因みにその件はES5のstrict modeで一旦禁止され(形だけ)、ES6で『ブロックスコープ内(let)』の『全域(var)』で有効になった、つまり
function func() {} は　var func = 〜 でも let func = 〜 でもなく、その中間の挙動を取る
Chromeはもうその通りの挙動をする、Firefoxは無茶苦茶、他は知らん

>>51
>>52
>>61
addEventListnerと書きたい場所で参照されるスコープのどこかでaddEventListnerを定義して無ければOK
addEventListnerが定義されてたらwindow.addEventListenerとかにしないとそっちを参照してしまうからNG
被せて定義してくる方が悪いって大抵は言われると思うし普通は気にしなくてもいいんだけどな

今世紀最大のバカｗｗｗｗｗｗｗ
addEventListnerなんかよりwindowの方がよっぽど定義され得るだろｗｗ
どうしてそっちは考えないんだよワロスプゲラｗ

JavaScriptにはfromCharCode()という関数がありますが、
文字列をコード配列に変換する関数(逆方向の関数)は無いのでしょうか？

>>63
windowは上書き禁止
今世紀最大のバカとか、いきり立つのも程々に

>>64
String.prototype.charCodeAt
http://es5.github.io/#x15.5.4.5

>>65
windowは上書き禁止だが、スコープチェーンにのせることは出来る
それはそうと気の触れた人にはあまり触らないほうがいい

>>66
配列にしたかったら、文字数分ループして、code[]=charCodeAt(i);すれば良いということですか？

× code[]=charCodeAt
○ code[]=string.charCodeAt
です、ごめんなさい

>>68-69
JavaScript では "code[]=..." の書き方はできないが、ロジックは合ってる

"abc".split('').map(function(ch) {return ch.charCodeAt()})

"abc".split('').map(ch => ch.charCodeAt())

ロジックは合ってるがそんな冗長なコードは書かない。

パフォーマンス重視でfor文にしてる

function toStringCodes (string) {
　for (var i = 0, l = string.length, array = []; i < l; ++i) {
　　array.push(string.charCodeAt(i));
　}

　return array;
}

toStringCodes('abc'); // [97, 98, 99]

String.prototype.map は未定義なんだね。
String.prototype.replace で代用可能だけど、いまひとつスマートじゃないなあ。

スリムな方は>>72、パフォーマンス重視は>>73ですね。
>>69,71-74の皆さんありがとうございました！

また間違えました、>>68,70-74の皆さんです、ごめんなさい
本当にありがとうございました。

>>76
別にいいんだけど、レスアンカーは>>66,70-74が正しいんじゃない？

めんどくせーから、>>78さんありがとうございました！ でいいだろ。

>>78さんありがとうございました！

var
　foo = tonikaku.nagai.namae,
　bar = foo.puropati,
　nullpo = (function(){ return bar * 10; })(),
　gatxu = (function(){ return nullpo * 100; })(),
　.....

↑こんな風に変数の宣言を
カンマでどんどん繋げる書き方って問題ですか？
なんか書きやすいので、こうしているのですが・・・。

window.onresize = function() {
window.alert("hellow")
}

この構文なんて名前ですか？
window.onresizeはonclick, onmouseover とかのイベントと何か違いますか

>>81
構文じゃない
違わない

>>80
jQueryとか更にひどいし、
そういうふうにしろって言ってる人もいる。

個人的にはあまり多すぎるとシンタックスエラー出た時に
場所がよくわからなくなるから、数個程度にしたり
複雑なコードは書くなって思うが。

var hoge,
hoge2,
hoge3;
こっちのが見やすくないか？

var hoge, hoge2, hoge3;

こっちの方がいい。無意味にコードの行数増やすなよ。
スクロールする必要が増えてあっちこっち見なくちゃいけなくなるだろ？

>>82 thank

>>85
見る人のエディタの横幅にもよる
必ずしも横に長く縦に短くが良いわけでもない
難しいところじゃが

>>80 の書き方、
jQueryも使ってるって事は何かメリットあるのかな？
少しだけ処理が速いとか・・・。
そうでもなかったら一行ずつ var いれた方が見やすい気がする。

速度は変わらん
こればかりは好みの問題だな
jQuery作者がああ書くのをコーディングルールにしたんだろうさ

>>88
１行ずつ var を入れたら行数文だけ VariableStatement が増えるので遅くなる。
理論上は VariableStatement が一つだけの方が処理速度は速い。

>>80 の書き方はシンプルでいいと思うけど、カンマ忘れてもエラーにならないのがな…
安全策として先頭にvar入れていった方がいいと思う

初期化がいらない場合は、>>85 を使う

セミコロン付け忘れはJSLintでチェックできるので>>80を使う

>>91
カンマ忘れたらエラーになったが…。

var hoge,
hoge2
hoge3; // ReferenceError: hoge3 is not defined

>>93
var hoge = 1,
hoge2 = 1
hoge3 = 1

こういうことじゃろ

>>94
なるほど。
その問題は JSLint や Strcit Mode で回避できるな…。

失礼。
>>93 === >>95

>>80
最初に全部代入せずに宣言するのが至高

宣言と宣言＆代入を混ぜて書いていた時には、どこまでを宣言に含めるか悩んでいたものだけど
至高の宣言に辿り着いてからはそんな悩みなど無縁
使う直前に代入するから分かりやすい

>>84
var foo
, bar
, baz;

のようなスタイルもある
見てすぐ行の継続が判るのと、行末のカンマを打ち忘れない所がよい

textareaだとCSSの属性を揃えてもブラウザ間の見た目が変わるので
contenteditable=trueでtextareaを実現しようと思うのですが
どうやればいいですか？

>>100
自分で答え書いてるじゃん…
要素のcontenteditableをtrueにすればいいよ

はい
overflow: autoにすると、かなり見た目はtextareaになります
しかしブラウザ画面間でコピーペーストすると
書式情報までコピーされてしまいます

>>102
それで

自分ではどうすれば良いと思って
どのように試してみたが
どの辺がわからん

のように書いてくれるとレスもつきやすい

>>100
> textareaだとCSSの属性を揃えてもブラウザ間の見た目が変わるので
未指定のプロパティがあるだけだろう

pasteイベントをハンドルして文字列だけをペーストしたいです

しかしブラウザ画面間でコピーペーストすると
↓
しかしブラウザ画面上でコピーすると

か？

コピペなら便利なツールがあるので探してみて

>>104
まったく同じにしても、たとえば改行の発生状況など変わってきますよ

>>106
コピー＆ペーストです

コピーした段階で書式情報付いてんじゃねーの？って話

テキストボックスの中に書式付きテキストがある時点で色々あれだが、
function(){this.innerHTML=this.innerText;}
とかをcopyイベントで走らせてプレインテキストに差し替えておけばいいと思う。
改行とかを残すならreplace(/\n/g,"<br/>");とかで適当に繕う。
書式を維持するなら
var _this=this,oldHTML=this.innerHTML;〜setTimeout(function(){_this.innerHTML=oldHTML;},0);
とかにして後から戻す。Chromeで試したけど他のは知らん。

これで弄っても選択範囲とかがズレたり面倒くさいし、
そもそも最初から書式情報付けるべきじゃねーと思う。

innerHTMLから/<[^>]+>/を削るという大雑把な方法でもまあまあいけた

textareaはこのようにchromeとfirefoxで改行位置が変わります
http://jsbin.com/OQILaVaJ/1/edit
もし同じにする方法があれば教えて下さい

>>110
ありがとうございます
clipboardオブジェクトを使ったらプレーンテキストで挿入できました

>>113
110を参考にして解決したようには全く見えないけど解決したようで何より

回答に対してのお礼です
見た時には解決していたので

textareaですがchromeでは等幅フォントっぽいことに気付きました
それでfont-familyを指定したら、見た目が同じになったようです

MS ゴシックPなら同じに見えたのですが、
MSゴシックだとやはり変わりました
http://jsbin.com/OQILaVaJ/4/edit

>>65 即時関数内でvar windowとか

>>64-79 まだ環境限られるけどEncodingAPI使うのがスマートかつ高速でかなりオススメ
http://encoding.spec.whatwg.org/

new TextEncoder().encode('abc') // [97, 98, 99]
new Uint16Array(new TextEncoder('utf-16').encode('あいう').buffer) // [12354, 12356, 12358]

>>80 好みの問題、自分は適度varを入れて適宜つめた方がいいと思う
まあ無理して先頭につめ込むくらいなら、適宜その場その場で宣言した方がよっぽどいいと思う
でもあんまりハイブリットにしちゃうと規約にならないってのはあるね

余談だけどES6の分割代入もスマートさを上げるために適宜使えると思う
var [l, m, n] = [1, 2, 3]
みたいな感じでなかなかいいと思う

>>117
試してないけど、word-spacing, letter-spacing あたりじゃない？
Developer Tool を使って Computed Style を片っ端から指定してみては？

var obj = {
timer: null,

hoge: function(){
this.timer = setTimeout(...);
},

この中のtimer: null,ってどういう意味があるんですか？
これを書かなくても一応動きますよね

>>120
timerプロパティが存在する事が明示的にわかるから

>>120
「timer: null」はオブジェクトを期待しているようにも見えるし、JITの型推論を動揺させるので良くない。
一度や二度ならいいが関数単位で何度も脱最適化を起こさせるとその関数は永続的に最適化されなくなってしまう。
もしインライン化されてた場合には影響範囲は更に広がる。

きちんとした形で各慣習に従うのなら、DOM0(whatwg-web-apps)仕様では正の数を返すことになってるので、
「timerId: 0」とか「handle: -1」なんかがより良いと思う。

<script type="text/javascript">に直接書いたプログラムは、いつ実行されるのですか？
onLoad()と同じ？

なぜお礼を言わない単発質問を繰り返すのですか？

>>122
nullを使ってるコードのほうが多かったのでなんとなくnullにしてましたが
勉強になりました

Googlemapのルート検索と人型アイコンを連動させることはできますか？

ルート検索を実装すると現在地・目的地にアイコンが表示されますが、
これを現在地のみ人型アイコンにして、かつ人型をドラッグすると、
ルートも更新されるということは可能でしょうか？

js勉強中です、方法があれば教えてください

JSONPモドキでPHPを通してとWebサイト(具体的に言うと2chの板一覧)を取得しようとしているのですが、
関数を作ってもエラーで上手く取得できません。
URL: http://2cher.imakita.0zed.com/sample.html
に、再現したサンプルを置いているのですが、

1行目(function include)は、「JavaScript include」でググると出てくる関数を一行にしたもの
2行目(function getfile)は、include()と
http://2cher.imakita.0zed.com/2cherRelay.php
を使ってWebサイトを取得する関数
4行目は、getfile()を使って
http://menu.2ch.net/bbsmenu.html
を取得してalert()
です(3行目は空欄)。

http://2cher.imakita.0zed.com/2cherRelay.php?url=http%3a%2f%2fmenu%2e2ch%2enet%2fbbsmenu%2ehtml
のソースを見れば分かるかもしれませんが、
JSONPモドキというのは
PHPのarray('body'=>データ)をJSONに変換したものです。

どうすれば良いでしょうか？よろしくお願いします。

>>124
誰に言ってんの？統合失調症か？

>>119
ありがとうございました
試してみましたが無理でした
フォーム系部品はブラウザごとにかなり異なるのが普通なので、
テキストエリアも同じには出来ないのかもしれません

>>123
HTMLの処理がその<script>...</script>に到達した時点ですべて実行される。
つまりonloadよりずっと前。でなかったらdocument.writeでその位置にHTMLを
挿入できないでしょ？（まあ、無理すればできなくもないか、、、)

contenteditable=trueのエンターキー入力時の処理がchrome,firefox,ieで違いますが
差を吸収させる時の定石ってありますか？

http://stackoverflow.com/questions/2057881/avoid-ie-contenteditable-element-to-create-paragraphs-on-enter-key
contenteditableな要素でエンターを押した時に
IEではパラグラフ挿入になるのを
document.selection.createRange().pasteHTML("<br/>")
で防いでいます
動作させると実際に防げるのですが、どういう原理で防げるのかがよく分かりません
何がどうなって
<p>文章</p>が
文章<br/>に置き換わるのでしょうか？

そもそも何も選択されていない時のdocument.selectionがなにを意味するのかが分かりません

フラグを有効にしたChromeで使えるWeb Animations APIはいつフラグ無しで使えるようになりそうですか？教えて下さい

また新し目の日本語情報サイトをご存知でしたらそれも合わせて是非教えて下さい

こういうやつです
elem.animate([
{ color: 'red' },
{ color: 'blue' },
{ color: 'green' },
], 5);

>>127は方法を変える(Base64にする)ことで自己解決しました。

それで、もう一つ質問があるのですが、
setinterval(function(){},1000);を関数の中で
使いたいのですが、このsetintervalの中でreturnすると、setintervalの中の関数のreturnをしてしまいます。
setintervalの中から外の関数のreturnを実行する方法はありませんか？

>>135
非同期のイベントを受け取りたいならPromiseでも使え

function func() {
　......
　......
　return new Promise(function (res) {
　　setInterval(function () {
　　　......
　　　......
　　　res(returnValue)
　　}, 1000);
　})
}


func().then(function (returnValue) {
　......
　......
})

受け取れるのは最初の一回だけな

>>136 ググってみましたが、少し違います、ごめんなさい

getfile()という関数を作って、動的に外部JSファイルをインクルードして、
そのJSに書いてある
var TEMP_webResBody="hoge";
が実行される、つまり変数TEMP_webResBodyがundefinedでなくなったら
getfile()はその変数の内容を返す(PHPのfile_get_contentsのように取得し終わるまでは続きを実行しない)というものにしたいのですが、
TEMP_webResBodyがundefinedでなくなるまで待つ、という所で躓いています。
先ほどの質問の後、setTimeoutのループでの巡回でなんとかしようと思い、

駅前で全裸で叫んでみた。

//JavaScriptでもインクルード
function include(astrFile){var script = document.createElement('script');script.src = astrFile;script.type = 'text/javascript';script.defer = true;document.getElementsByTagName('head').item(0).appendChild(script);}

function getfile(url){function intervalRun(){alert('hi gig');}include(localStorage.getItem('relayServer'),'http://2cher.imakita.0zed.com/2cherRelay.php'+'?url='+encodeURI(url));setTimeout('intervalRun');}

上のようにテストコードを作ってみましたが、実行すると
「変数intervalRunが見つからない」とエラーが出ます。
どうすればいいでしょうか？

>>139
()省略してもよかったけ？

実際のテストではちゃんとintervalRun()になっています…

>>139
RequireJSを使えば、includeは簡単に出来るよ。

オライリーのJavaScript第六版にも
selectionオブジェクトについてはほとんど書いてません

Selection オブジェクトと Range オブジェクトには、
ひととおりの API が定義されていますが、あまり使われていません。本書でも解説しません。
IE にも別の API が定義されていますが、こちらも本書では解説しません。

しろよ（`o´）

SelectionってまだFPWDも出てないんじゃ

SelectionとRange周りの仕様は一応ここ
https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#selections
http://dom.spec.whatwg.org/#ranges
http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#textFieldSelection


>>137,139
長くなったのでこっちに書いた
http://ideone.com/xqKBNL

でもこういうことをしようと思ったのって、そのJSファイルが別ドメインだからだよね？
同じドメインならもっといい方法あると思う

そのジェネレータの使い方面白いけど、ややこしいな。

ダブルコーテーションを使わずにタブコードを記述することはてきますか？
String.fromCharCode(9)
だと長すぎます

'\t'っていう書き方が出来ました
エスケープできるのはダブルコーテーションだけと思ってました
失礼しました

>>145
ごめんなさい、iPhoneとPCのSafariで使ってみて「出来ない…？」と思ってググってみたら
MozillaのMDNに「Safari/Not Supported」と書いてありました…
iPhone用なので、Mobile Safariが対応していれば何でもいいんですが…無理ですか？
よろしくお願いします

質問です。
見ている人のIPアドレスを取得する方法分かりますか？
PHPなどを使わずにやりたいのですが、、、

無理

>>149
そういうことは早く言った方がいいね
Promiseはライブラリでも提供されてるからそれ使うといいよ

>>150
WebRTCを使うとか？

function getIPAddress() {
　return new Promise(function (res) {
　　var rtc = new webkitRTCPeerConnection({iceServers: []})
　　rtc.onicecandidate = function (evt) { evt.candidate && res(evt.candidate.candidate.split(' ')[4]) }
　　rtc.createOffer(function (desc) { rtc.setLocalDescription(desc) })
　})
}

getIPAddress().then(alert)

WebRTCってP2P通信で相手のIPアドレスを取得する方法じゃないの？

var is_array = function (value) {
return value && typeof value === 'object' && value.constructor === Array;};
「異なるグローバルオブジェクトで作成した配列を識別することができない」
とgoodpartsに載っていますが、この関数に、
異なるグローバルオブジェクトで生成された配列を渡せばobjectと判定
されるらしいのですが、
異なるグローバルオブジェクトで生成された配列ってどうな例があるのですか？
教えてください。

>>152
最初のコードを参考にして、jQueryのDeferredを使うようにすれば
完璧に考えた事が出来ました。本当にありがとうございます！

忘れてました
>>145
今はテストなので同じドメインに中継PHPスクリプトを置いていますが、負荷分散の為に別サーバにも置くつもりです

このコードなどを参考にして時間があればプログレスバーなども作れるXHRにも手を出すかもしれません。
その時などで躓いて、質問する時があれば、またよろしくお願いします。
ありがとうございました！

localstorageを使おうとしてうまく動きません
ユーザーの任意でページを保存して、保存したものを呼び出そうとしているのですが
うまく保存されていません
テスト環境はFirefox20です

http://ideone.com/6cRClz

jsbinでtabを入力した時、タブの位置にかかわらず必ず4スペース入ることに気付きました
位置を揃えるのがタブの目的なのだから、
1スペース既に入力されていたら3スペースになるのが普通だと思うのですがどう思いますか？

>>153
違う。WebRTCがやってくれるのは自分のIPアドレス取得と接続の段取り。

いきなりP2P接続は出来ないので、まず相手とWebSocket中継とか別の手段でやり取りしないといけない。
https://speakerdeck.com/feross/webrtc-data-black-magic?slide=19
http://tjun.org/blog/2013/12/webrtc_p2p/

APIは何を相手に送ったらいいかを教えてくれて、相手から受け取った情報を与えれば手続きを進めてくれる。
で、APIがアドレス候補を相手に伝えて欲しいときに呼ばれるのがonicecandidate。
その中のcandidateには最初はOSから取得した自分のIPアドレスが含まれてるのを>>152では利用してる。


>>157
ちょっと修正不能。そもそも何を保存してどう復元させたいのかがよく分からない。
もし要素丸ごとを保存しようと思ってるのならあまりよろしくない。

せいぜいテキストエリアの文章（文字列）を記録して復元するとか、
ドラッグ可能な特定の要素の位置（数値）を記録して復元するとか、
変化する値に絞って保存することを考えた方がいい。

>>154
<iframe name="hoge"></iframe>

var a = new hoge.Array(1,2,3);
console.log(is_array(a)); // false
var b = new Array(1,2,3);
console.log(is_array(b)); // true

ってことじゃないの?
異なるグローバルオブジェクトってのはちょっとわからないけど、
手元の本(原書の電子書籍版) では in a different window or frame ってなってるな。

>>154
異なるグローバルオブジェクトとは
別の window, frame, worker 環境のグローバルオブジェクト

したがって
異なるグローバルオブジェクトで生成された配列とは
その環境で実行されたスクリプトが生成した配列になる

>>159
それで「IPアドレス取得」を実装すると、同じページを見ている人同士でIPがわかる事になるのか。
そしてそれは>>150が本当に求めてることなのか…

>>159
保存させようとしているのは
draggable:trueにしたstickyクラスのdiv要素のみです
それぞれの位置を記録させようとしています
言葉足らずで申し訳ありません

switchについて質問です

switch(2){
case 1: console.log(false); break;
case 2: console.log(true);
case 1: console.log(false); break;
case 2: console.log(true); break;
}

この場合はcase2の後にbreakがないため
続くcase3もラベルの一致を問われず実行されるのがしっくりきません
不一致な場合に実行されないようにする書き方はないもんでしょうか

case2にbreakを置かない理由は何？
こういう場合は論理的に、case2にbreakを置かない方がおかしいと思うけど。

document.selection.createRange().pasteHTML('<br>');
という行で、IEで
HTML1114: (UNICODE バイト オーダー マーク) からのコードページ unicode は、(12) からの競合するコードページ shift_jis を上書きします
という謎の警告が表示されます
しかしググっても一件も出てきません
これはどういう意味で、どうやれば消えますか？

ちなみにshiftjisと書いていますが、
HTMLもJSもUTF-8で記述していてSJISは使っていません

>>165
レスありがとうございます
始まりは一致するラベルのcaseを全て実行したいと思ったことでした
switch(2){
case 1: console.log(false);
case 2: console.log(true);
case 1: console.log(false);
case 2: console.log(true);
}
としたらcase2とcase4が実行されればいいなと考えて
いざ試したら今回の疑問に突き当たった次第です

case4なんてどこにあるのよ

>>168
ttp://www9.plala.or.jp/sgwr-t/c/sec06-5.html
switch-case文は、一度に複数の分岐を処理する構文じゃないです。

並び順変えればいいじゃん
つか昇順にしとかないと最適化抑制がかかるんだっけ

実体参照を実体に戻す処理を書いていますが
&amp;
&lt;
&gt;
&quot;
&nbsp;
以外にありますか？

私女なんだけど助けてください・・・。
nameが同じinputが複数存在しているformで、任意のN番目に値を入れたいいんだけどどうしたらいいですか？＞＜
eachでループさせるやり方しか思いつかないんですが、スマートでかっこいいやり方があれば教えてください＞＜

<input name="help">
<input name="help">
<input name="help">　←３番目のhelpに入れたいの。
<input name="help">

>>173
document.getElementsByName("help")[2].value = "a";

>>172
いっぱいあるよ
目的は？
xss危険文字だけならnbspはいらないしaposを追加するといいかも

>>175
フォームコントロールの代わりに
contenteditable=trueのdivを使うので、
HTMLをプレーンな文字列にする必要があります
http://w-d-l.net/html__entities/
一覧がありました
こんなにあったんですね
ありがとうございました

よく見たらこれも一部で、フルリストはこれでした
http://www.freeformatter.com/html-entities.html

>>169-171
レスありがとうございます
例えのcase4はラベルではなく4つ目のcase文のつもりでした
本来の用途ではないとの事なので別の方法を探そうと思います

正規表現を使う関数の中では
一度作成した正規表現オブジェクトをキャッシュしてべきでしょうか？

その正規表現がリテラルなら定数扱いとして最適化が働くから同じになるだろう

質問です

値TypeAとTypeBがあり、
その2つは計算式によって相互に連動変換されます。

-----------------
<!--
function ConvertParam(kind) {

　TypeA⇔TypeB形式変換処理〜

　if (kind == 'TypeA') {
　　document.getElementsByName('TypeB')[0] = 変換結果;
　} else {
　　document.getElementsByName('TypeA')[0] = 変換結果;
　}
}

<input type="range" name="TypeA" value="" onChange="javascript:ConvertParam('A');">
<input type="range" name="TypeB" value="" onChange="javascript:ConvertParam('B');">
-------------------

こんな感じに、スライダーを動かすとonchangeで
お互いの結果を反映するようなツールを作りたいんですが、
実際実装したらonchangeが永久に発生してブラクラめいたものになってしまいました。
JavaScript内で設定した値をonchangeイベントが拾ってしまっているせいだと思うのですが、
これを回避する方法、手法はありますでしょうか。

x='hoge';
z=s.indexOf(x);

のように引数は直接ダメですか？
やり方教えてください

>>182
わかりましたすんません

>>181
自己解決しました

ちょっと気持ち悪いですがグローバル関数で編集中フラグを作り、解決しました

属性に特に初期値が必要なくてもコンストラクタで初期設定した方がいいですか？

コンストラクタで初期値設定
→属性が途中でいらなくなる
→コンストラクタの初期値設定を消し忘れる

あるある

>>186
そんなもの、コンパイルエラーですぐに分かるじゃんって
思ったら、ここJavaScriptスレか。

まあ動的型付け言語は仕方ないよね。
そういうミスを検出できない言語だから。

コンストラクタでの初期化は最適化に重要です
http://1000ch.net/2013/01/04/JavaScriptPerformanceTechniqueByGoogle/

※2014年改定※
3.『31bit（仮数部30bit＝約+-10億）』→『x64環境では53bit（仮数部52bit＝約+-9千兆）までの最適化が進行中』
数値の最適化は年々進化しているのであまり気にしないでください

5.『64,000個』→『100,000個』
配列周りの最適化パラメータは最も頻繁に変わる部類なのであまり気にしないでください

重要なのは、変わったことをしないということです
ロジック的なことは勿論、「その時その時の一般的な書き方」から外れないことが、最適化の恩恵を受けるために重要です

また、ES6で導入された機能はまだ最適化が不十分なものも多いです
どうしても気になったら積極的に各エンジンにissueを投げましょう

それから、増設されたMath関数やsimdやtyped objectやparallelsなど、抜群にJSを高速化する要素がES6,7に沢山控えています
最適化する必要があるときは、最新の方法として常にasm.jsを指標とするとよいでしょう

ふーむ
初期化しておくにこしたことはないのですね
ありがとうございました

前スレで、chromeでシフトキーを押しながらホイールスクロールしたら
スクロール方向が縦になる件で文句を書いた者ですが
このたびのバージョンアップでこのスイッチ機能がなくなっていました
伝えてくれた方ありがとうございました

すみません、質問させて下さい

HP上での音楽ファイル再生について教えて頂けないでしょうか？
以下のような機能はJavascriptで可能でしょうか？

イメージとしては目覚まし時計なんですが時間をユーザが指定しません
HTML上に記述されている特定の時間を予めセットしてその時間になると音楽が流れるようにしたいです
１０：００　という文字列にリンクを張ってこれをクリックするとその時間にアラームをセットするといったイメージです

出来ればスヌーズ機能もつけたいんですが
（これは停止した時間+５分でもう一度音楽再生
（停止ボタンをおしたらアラームが解除という具合がよさそうなのですがやりかたがわかりません・・

>>191
audioタグ使えば？

>>１９２
レス有難うございます
audioタグの属性を調べてみたのですが、指定時間に再生する項目が見つかりませんでした
何かうまいやりかたはあるのでしょうか？
もしこういうやり方があるってのがあれば教えて頂けると助かります

javascriptフレームワークで一番学習コストが低くて
作業効率がいいのってなんですか？

>>194
お前が今何が出来るのかによる

質問です、配列に数値を記録して後から『あるかなー？』って調べる場合なんですが
var hoge=[100,109,111････,10000]
という配列を作ってからindexOfで検索すればいいのかと思ったんですがindexOfメソッドは遅いような事が書かれてました
もっと速くて良い方法とかあるんでしょうか？

その数値をキーにすればいい

ありがとうございますその場合キーは数値のままでいいんでしょうか？
var hoge[1]=1;
hoge[10000]=1;
とか入れると[1,,,,,,,,,,,,,,,,,,,,,,,10000]と表示されるので取り出す時1,2,3と順番に調べていないか不安で

見た目の長さが10000になるだけ。容量も速度も問題ない
そして配列は0〜4294967294までしか数える事ができない

>>191
時間になればiframeが読み込まれるようにし
そのiframeはページが表示されるとすぐに音楽なるようにすればいいのでは。
スヌーズは時差でiframeつぎつぎ読み込ませる

>>191 こんな感じでやればいいと思う

var MS_PER_DAY = 24*60*60*1000
var tid = -1
var snoozeTimes = 5

function setAlerm(h, m) {
　clearTimeout(tid)
　var d = new Date, n = +d; d.setHours(h); d.setMinutes(m)
　tid = setTimeout(playAlerm, (d - n + MS_PER_DAY) % MS_PER_DAY, snoozeTimes)
}

function playAlerm(sn) {
　new Audio('alerm.mp3').play()
　if (sn) tid = setTimeout(playAlerm, 5 * 60 * 1000, --sn)
}

stopElem.onclick = function () { clearTimeout(tid) }



>>196
indexOfでOK
というか変に凝るのは良くない

>>196
何が速いかは一般的に言えない
例えば値をキーにすれば後々の参照は速くなるけど、書き込み時は遅くなるし、その他手間もかかる
順序は大切なのか、とか数値だけなのかとかでも手段は変わる

少なくとも連想配列にする方法は速いかもしれないが良い方法ではない
パフォーマンス上深刻な問題が出て初めて検討するようなこと
indexOfは速くはないかもしれないが良い方法だよ

まあES6のSetが満足に使えれば一番スマートなんだけどね

>>200
所定時間でページを読み込むという方法ですね、考えてみます

>>201
詳しいスクリプトありがとうございます
まだjavascriptそんなに詳しくないので書いてくれた記述を調べながらやってみます

お二人とも親切にありがとうございました！

>>194
フレームワークを利用するより自作するほうが為になる。Jqとかのソースでもみとき。

PUREっていうヤホー謹製のCSS Framework勉強中だけどかなりいい感じ
BootstrapでjQueryが使われてるようにPUREにはYUIが使用されてる
YUIって今まで知らなかったんだけど、jQueryと比べてどんな違いがあるんだろ
jQueryの方がデザイナー向け、YUIが技術者向けと解説してるブログもあった

jQueryも$(".class")とかやるとめっちゃ遅くなるから
大体理解しとけばそれなりに

今のブラウザなら速いだろ。

なんとなくchromeのJS速度が遅くなった気がします
ドラッグにモッサリ感が出てきたような
そんな感じしませんか？

>>208
ドラッグとJS速度の関係性について詳しく

いつかここの住民と一緒に最強フレームワークを作れたらいいいな

匿名多くして舟山に登る

>>196
レガシーブラウザは非サポートだけどArray.some()というずばりのメソッドがあるよ

改行が\n以外になるブラウザってありますか？
たとえば\r\nとか\rとか

>>213
例えばテキストエリアの場合
内部的なデータは違うかも知れんが入力されたテキストが
js 側からどう見えるかなら

FF はOS関係なしに問答無用で \n に正規化？
IE だけ 9 までは \r\n で IE10 は \n ？

らしいが、
手入力で改行を入力した場合
\r 入りのテキストをコピペした場合
\r\n 入りのテキストをコピペした場合
\n 入りのテキストをコピペした場合
\r\n と \n と \r が入り乱れたテキストをコピペした場合
でも違ってくるかもしれない

>>212
それは範囲をもたせて当てはまる値の存在を知りたい時に使うもの
厳密等価の値があるかを調べるのにはあまり適さない


>>213
textContentから取得した文字が\r\nとかはブラウザ関係なく普通にありえるよ
ただしtextareaのvalue経由で扱う値では\n、\r、\r\nは\nに置換されることになってる
http://www.whatwg.org/specs/web-apps/current-work/#concept-textarea-api-value

ただ仕様の怪しい物もあって、例えばalertの仕様では
「例えば\nで段落分けすることを含む、高度な表現をサポートすることが期待される」としかされてない

実装はChはJSの「改行文字４種」で改行して、Fxは\nだけでするとかバラバラ
「改行文字４種」とは\nと\rと\u2028と\u2029のこと、それに\r\nを加えた５つをJSでは改行のトークンとして扱うことになってる
（だから例えば"1\r1"は11に見えるかも知れないけどeval("1\r1")は1になる）

でも基本的にHTMLのNewlinesの定義に従うべきだとするなら、\rと\nと\r\nを１改行と扱うのが適当だと思う
とすると、Fxでは\rのサポートが足りてないし、Chでは\r\nを２改行として表示してしまうのが良くない

また厳密に言うとalertはただの文字列ではなくメッセージを表示するものだから、ただの改行ではなく段落分けされる方が好ましい

すごく詳しくありがとうございます

>>212
Array#indexOf で遅いといっている人に Array#indexOf より遅い Array#some を薦めるのは…。

Array#indexOf が標準的な書き方で最適だと思うが、関数コストが重いと感じる環境なら for 文で回せばいいと思う。
最も、そこまでパフォーマンスに不満がある状況なら実装方法を変えたほうがいいかもしれないが。

contenteditable=trueで
スペースを入力した時のタグ化のアルゴリズムはどういうものでしょうか
必ず&nbsp;に変換する、だと思っていたのですが、違うようです
http://jsbin.com/EzaloQO/1/edit
ここでスペースを入力すると、コンソールにhtmlソースを出力するので確かめられます
何故必ず&nbsp;に変換しないのかが分かればアルゴリズムも分かると思うのですが

文末と行頭は&nbsp;に変換する
その後、連続するスペース二つはスペース+&nbsp;に変換する
で、chromeの場合のアルゴリズムは再現できました。
しかし何故こんな変なやり方をしているのでしょうか？

×文末
○行末
でした

当分前にChromeのバグの件で質問した者ですが、４年かかってようやく直ったみたいです
https://code.google.com/p/v8/issues/detail?id=691

obj = { get fn() { alert(1) } }
obj.fn( alert(2) )

がChromeだけ2、1となってしまう例のアレです

あのときは分かって貰えず色々言われて"ちょっと"悔しい思いをしてましたが、まあ直ってほっとしました
"ちょっと"遅かったですけどね、、、

文字置き換えだけで新言語が作れそうな気がする。
$ onload(txt)_log(txt)_
function onload(txt){console.log(txt)}
こんなことしてみたい。

[
{name:"a",ikioi:500},
{name:"b",ikioi:600},
{name:"c",ikioi:400}
]

こんな感じになっている(連想配列が要素として入っている)配列を

[
{name:"b",ikioi:600},
{name:"a",ikioi:500},
{name:"c",ikioi:400}
]

という感じに、勢い昇順でソートしたいのですが、
勢いを親配列のキーにする(配列の中に連想配列ではなく連想配列の中に連想配列にする)
以外で何か良い方法ありませんか？

>>223
Array.prototype.sort

>>222
Stephen Bourne乙。

>>224
ありがとうございます！

divAの中にdivB,dicC,divDが入っていて
Aとそのコンテンツとの間にCSS適用用のdivを挟み込んだり、また抜いたりしたいです
どうするのが一番いいですか？
一番簡単なのは、innerHTMLをdivで挟んでまた代入、みたいなのだと思いますが

何がしたいのか解読に時間がかかったが、
わざわざ要素をその都度入れ替えするくらいなら、
最初からそのCSS適用用のdivとかやらを作っておいて、classの値を付け外しする方が良い。

>>228
その方法は既存ページに手を加えずに機能を付け足す場合には通用しない
その種の divA が大量にある場合も動的な方がいいかもしれない

>>227
=======挟み込む
var div1 = document.createElement('div');
var range = document.createRange();
range.selectNodeContents(divA);
range.surroundContens(div1);

=======抜く
range.selectNodeContents(div1);
divA.appendChild(range.extractContents());
divA.removeChild(div1);

残念ですがその方法はケータイのブラウザでは対応してないようです
世の中には簡易なJSに対応している数千万台のフィーチャーフォンがあることを意識して回答してくださいね

textareaで秀丸のような矩形編集がやりたいです
既存ライブラリではないようなので自作しようと思いましたが
複数位置選択のやり方がわかりません
もしかして出来ないのでしょうか?

バブリングするイベントは上のほうでまとめて監視しろとか言いますが
どこに登録するのがいいんですか？
window？document？document.documentElement？document.body？
理由も教えてください
たとえばclickイベントなどElement、Document、Windowをターゲットにとるイベント

>>230
なにそれ？シティーフォン？

var {hoge} = nanntara;
っていう風に変数名を{}で囲ってるのを見るんですが
これはどういう意味なんですか？

>>231
今のトレンドはcanvasで全部自前実装

>>230
あなたはまず、動作環境を開示して質問する事を覚えて下さいね。
>>2にテンプレがありますから。

chromeにコントロールキーを押しながらクリックすると
カーソルを動かしてスクロールできる機能が付きましたが
この機能の名前は何ですか？

>>232
document
理由はほぼ全て受け取れるから

>>235
すごく大変そうですが本当にトレンドなんですか？
エディタをフルスクラッチで作るようなものでは？

たしかcanvasの仕様書にそんなことやめろとか
１０個か２０個かやたらしつこく理由が挙げられていたような…

chromeでcontenteditbleを使った時
URLを書くと勝手にリンクされてしまいます
これを防ぐにはどうしたらいいでしょうか？

皆さんは折りたたみをどうやって作っていますか？

var MYAPP = MYAPP || {};
MYAPP.utilities = (function (){
var util = {};

util.start = function() {
console.log("スタート！");
};

util.end = function() {
console.log("おわり！");
};
return util;
})();
とした場合
MYAPP.utilities.start(); // スタート！
のように使えますが、

別のファイルからstart()やend()を呼びたいときは
var utilities = new MYAPP.utilities();
utilities.start();
って↓に書いてあるのですが、別ファイルから呼ぶって
ttp://takanamito.hateblo.jp/entry/2013/04/12/000357
どういったときを想定しているのでしょうか？

>>234
これわからないからどこで見たのか教えてください

>>244
分割代入
https://developer.mozilla.org/ja/docs/Web/JavaScript/New_in_JavaScript/1.7

>>232 HTML5ではグローバルまで伝播するのでwindowだが、そもそもまとめる必要なし
>>233 au以外のガラケーはほとんどJS有効
>>234 {hoge}というのはES6において{hoge:hoge}の省略でvar hoge = nantara.hoge;と同じ
>>242 details要素

>>231,239,241 そもそも実現手段から考えなおせ。そこにこだわるのは無理筋

chromeでctrl+clickをした時、
スクロール状態になるのを防ぐ方法ありますか？
clickイベントをpreventしたら防げると高をくくっていましたが、
ctrlを押しながらclickすると、
clickイベント自体が発生しないようです
イベントがすべてスルーされた結果としてデフォルトの特殊機能が発動するのが
マトモな実装だと思いますが、そうはなっていないようで・・。

http://jsbin.com/sejuj/1/edit
実証コードを書いていて気付きましたが
jsbinでoutputを一体型にしている時は、ctrl+clickの機能が発動しないみたいです
outputを別画面にした時は発動します

とんでもないことに気付きました
autoscrollとかいうエクステンションのせいでした・・
chromeのバージョンアップから現象が発生したので、
chromeのせいと思い込んでいました・・
スレ汚しすみません
googleも疑ってすみません

ページで使用するjQueryセレクタを
全てグローバル変数でキャッシュしている

$com.hoge.www = {
　'selector1': $( '#id1' ),
　'selector2': $( '.class2' ),
　'selector3': $( '.class3' ).children(),
　・・・
}

のですが、
これって何か問題ありますでしょうか？
メモリ使いすぎとか、大して速くならないとか・・・・

jquery objectを生成した後には
そのクエリに該当する要素をDOMに追加してもjquery objectには含まれない
くらいかな

>>250
グローバル変数は使うな。
コードが無駄に複雑になるというか
使う必要がある時点で複雑な証拠でもある。

そのコードが問題かどうかという以前に
そういうコードが必要になってしまっているのが問題。

var str0 = new String('foo');
var name = new String('foo');
alert(str0 instanceof String); // true
alert("str0=" + str0 instanceof String);//false★1
alert(name instanceof String); //★2

質問します
★1で何故trueでなくfalseになるのは何故なのでしょうか？
(IE11とクローム(32.0.1700.107 m)で試したところfalseでした。)
★2の結果は、
IE11はtrue、クローム32.0.1700.107 mではfalseでした。
何故ブラウザで動作が違うのでしょうか？
教えてください。

>>253
"str0=" + str0 はObject型ではないから。
name instanceof String === false は Google Chrome のバグとしか思えない。

>window.name は String型 のプロパティとして規定されているので、初期化される値は全て String型 に変換されます

>>255
ありがとう、そういうことか。
グローバルスコープでテストしたのかいけなかったのね。

(function () {
var name = new String('foo');
console.log(name instanceof String); // true
}());

var str0 = new String('foo');
var name = new String('foo');

alert(typeof str0);//object
alert(typeof name);//★1
★1はIE11はobject、クローム32.0.1700.107 mではstringでした。
クロームではnameがstring型になるのが原因ということですか。

>>241
この件ですが、これもText URL Linkerというエクステンションのせいでした・・
開発時はエクステンションを外せばいいですが
エクステンションを入れている環境にどう対応すべきか、
と考えると難しい問題です・・

オートリンク系エクステンションって定期的にHTML全体をパースしてるんだよな
結構処理が重そう

>>251
なるほどーそれは意識していませんでした。
気をつけるようにします。

>>252
やりたい事は２つです
　1.jQueryセレクタ変数を生成する回数を減らしたい
　2.色々な関数内で生成したjQueryセレクタ変数を使いたい
　
グローバル変数する以外で良い方法があるのでしょうか？
もしかして、コードはすべて

$(document).ready(function() {
　こーど
}

の中に記入しろ。という事？

$(document).ready(function() {

　var $selector =$( '#id1' );
　var func = function(){ $selector.removeClass('hoge'); };

　$(document).on('click', 'img', function(event) {
　　func();
　});
}

こうやれと

そういや最近は背景色とかの指定までjqでやるキチガイ多いよな。CSSでやれよ。

動的に変更できるのがいいのでは？

selectionやrangeについて詳しく書いているJavaScriptの本があれば教えて下さい

>>261
ほらもっと短くなった。

$(function() {
　$(document).on('click', 'img', function(event) {
　　 $('#id1').removeClass('hoge');
　});
});

えー遅くなりましたが、要するに現状矩形編集をする方法は事実上ない、ということでよろしいのでしょうか
あまりニーズがないのでしょうかね? あると地味に便利なのですが

>>264
これ、onclick が呼ばれる度に
セレクタ生成処理が発生しますよね？
違うのかな

それでなにか深刻な問題が？
jQuery使っておいてパフォーマンスが〜とか言わないでよね

そもそもグローバルでもなんでもいいから
そんなことで一々質問すな

最近どうでもいいことに病的に凝るやつ大杉
Chrome君とテキスト君はいい加減迷惑

>>266
コードを長くする「すごく大きなデメリット」と比較しろって話。

クリック処理はクリックした時だけしか発生しないから少しくらいパフォーマンス悪くても問題ない
タイミング的にシビアな処理、
ユーザーを待たせるバッチ的な処理ではチューンすべきだけど

>>266
パフォーマンスを気にするなら

event.target.ownerDocumtent.getElementById('IdName')

とするけどね。
そもそも、キャッシュするにしてもグローバル変数にキャッシュするのはない。
ローカルスコープに閉じ込めればいいのに、なぜ最も遅いグローバルスコープにするのか。

キャッシュは色んなところからアクセスするんだからグローバルで問題ない
ローカルにキャッシュすることもあるけど、したいのはそういうことじゃないだろう

キャッシュするためにグローバルしているわけだよね。
そのグローバルってだけでデメリット。

安易なキャッシュはコードを複雑化させるだけだからやめた方がいい。
本当にそれをやる価値があるかどうかを見極めてからやるべき。

それに、キャッシュっていうのは合ってもなくても同じように動くのが理想。
$('#id')をclickイベントが起きてから取得するのと、clickイベントが発生する前に
取得しておくのとでは動きが違っている。
一般的な使い方を考えると、clickイベントが起きてから取得するべきだろう。

グローバルというだけで教条的に忌避するのはC級プログラマ
自分ならグローバル空間を汚すのが気持ち悪いから名前空間に閉じ込めるけど、
本質的にはグローバルと大差ないし、
それでパフォーマンスが上がるということはなく、スコープを辿る数が増えるからむしろ下がる
だから好きにすればいい

JSでクラス・メソッドのネスト化ってどうやんの？
function func1(){
func1.prototype.func2 %3d function func2(){
func2.prototype.func3 %3d function func3(){

}
}
}

がエラーになるんだが
共通ライブラリとかまとめたいんだよな

>>273
お前のほうがグローバル変数をわかってないんじゃね？

どこからでもアクセスできるのが、いけないんじゃないんだよ。
どこからアクセスされてるかわからないのが、いけないんだよ。

名前空間に入れておけば、少なくともその名前空間を利用していないものは
アクセスしないだろうってことが予想できる。
これが大差ないわけがないだろ。

privateという概念がない言語もあるが、そういう言語でも
_をつけることでprivateを意味するという慣習があることが多い。
これは実質publicなのだが、外部からアクセスされないということに
なってることが大きな意味を持っている。

>>273
> グローバルというだけで教条的に忌避するのはC級プログラマ
この場合、画一的にグローバルを避けているわけじゃない。
パフォーマンスを気にする人がグローバル変数にキャッシュするのは明らかに目的に合致してない。
スコープの浅い場所にキャッシュする方が明らかにパフォーマンス上有利。
プロパティアクセス演算子を複数回使うのもパフォーマンス上不利になる。

>>275
>>273ではないけど「本質的にはグローバルと大差ない」を意訳すると多分こういうことだと思う。

「プロパティアクセス演算子による擬似名前空間」はコーディング規約によって制限を加えているのであって完全に参照を阻止しているわけじゃない。
関数スコープに変数を閉じ込める手法なら原理的に参照を阻止しているわけだから、プロパティアクセス演算子による擬似名前空間よりも明らかに安全性は上となる。

>>276
スコープが浅くてもそこまで辿るのに一旦そのコンテキスト上の最上位空間まで上がる必要がある
hoge.hoge.cacheにキャッシュを持たせたら
最上位空間からhogeを探す→hogeを探す→cacheを探す
となる
最上位空間に持たせた場合は
最上位空間からcacheを探す
となる。
キャッシュという性質上グローバルアクセスが出来ないと意味がないのだから
「グローバル変数にキャッシュするのがおかしい」という言説は頓珍漢

アクセス速度で言えば一番速いのがローカル変数
次に速いのがグローバル変数
スコープチェーンは上位から辿って行くのだから
非グローバル変数へのアクセスでもグローバル空間の探査は行なわれる

でもクロージャの場合はどうなるんかな？
一つ外のクロージャへのアクセスとグローバルアクセスはどっちが速いだろう

いずれにしろ、
キャッシュで浮かせるコスト >>>>>>>> スコープチェーン走査コスト
なのでキャッシュなのにグローバル変数云々はおかしいけど

http://jsperf.com/closure-vs-global-variable
クロージャの方が速いね
てか、クロージャの性格を考えたら当たり前かw

DOMについてですが、
childNodesを持ち、なおかつdataも持つような要素って存在しますか？

まったく、その些細な速度の違いを
あーだーこーだいうのをやめろって言ってんだよ。

そんな1ミリ秒も差がでないようなことのために
コードを複雑にするなよ。

複雑なコードというのは開発している間
ずっと違いを感じることになるんだぞ？

windows8のアプリはJavaScriptで開発できるのは非常に便利

>>284
そうやって過度の一般化をするのはC級プログラマ
そもそもキャッシュは対して複雑でもない

>>283
HTMLObjectElementとか？

>>286
キャッシュが複雑だって話しなんかしてねーよ。
意味が無いことするなって話だ。

お前のほうが一般化しなくていいぞ。
この場合は意味が無いって話をしてるんだから。

本当にあほだな。

When in doubt, use brute-force.

>>264,267,284,288 ← こいつはアホだから無視でおｋ。
jQueryを使うときは一般的に>>260のように書く。
ただし .ready() はもう使わなくて $(function () {}) と書く。

>>278
> キャッシュという性質上グローバルアクセスが出来ないと意味がないのだから
意味がわからない。
キャッシュは共有できればいいだけなのだから、グローバルアクセスする必要は全くない。

jQuery(function($) {
　var id1 = $('#id1');
　$(document).on('click', 'img', function() {
　　id1.removeClass('hoge');
　});
});

これで何の不都合が生まれるというのか。

>>290
無視って言うなら勝手に無視してろよｗ
お前は何も言うな。

> jQueryを使うときは一般的に>>260のように書く。
>>260のように書くという意味とは？
>>260には二種類のコードがあるがどっちなんだよ？

ああ、そうそうお前は何も言うなｗ

>>291
これでよくね？ わざわざid1に入れる理由ないでしょ？

jQuery(function($) {
　$(document).on('click', 'img', function() {
　　$('#id1').removeClass('hoge');
　});
});

別にこんなのキャッシュした所で早くはならないし。
単にグローバル変数を使わないで出来るという例ならいいんだけど。

一般的にキャッシュなんて言うものはベンチマークをしてからやるもの。

キャッシュのためにコードを増やすのはちょっとの事に
見えるかもしれないが見通しが悪くなる。あとから
修正する必要がでたとき余計なコードがあると面倒になる。

一行、二行コードが増えることが問題じゃない
メンテナンス性が落ちるということが問題。

だから、キャッシュしたほうが早くね？なんか良くね？なんて
程度の考えなら、やらないほうが何倍も良い。

Jqueryで出来ることは生のJavaScriptで出来る。

うん。効率が違うだけ。

それはJavaScriptでやれることは
C言語でもアセンブラでもやれると言ってるようなもの。
重要なのは、できるかどうかではなく効率。

自転車で行ける所は、歩いてでも行ける！
日本横断。

枠組みを自分で作ればいい。世界でたった一つフレームワークさ。クロスブラウザで。

機械語からやればいいじゃん

デタラメな知識を押し付けようとするキチガイに注意
よく使い回すDOMは変数に入れておいた方がいいし一般的にそうする
>>260 のように書いておけばいい

>>292
質問者がパフォーマンスを気にしているようだったので>>291を推奨しただけで、キャッシュしないならそれでいいと思う。
原理的にはキャッシュすることで速くなるはずだからキャッシュが無意味には同意できないが。
付け加えるなら jQuery(function($) { は不要。
jQuery(function($) { はキャッシュする為に書いたのであってキャッシュしないのなら DOMContentLoaded を待つ必要はない。

キャッシュの必要性は質問者が判断する事なので口を挟むつもりはないが、そこまで細かなパフォーマンス差を気にするようならグローバル変数を避けるべきだし、ネイティブ実装の関数を使うべきだとは思った。
拘るなら徹底的に拘れといいたい。
「何となく」という理由でパフォーマンス差が気になるようなら大した差はないから気にするな、ってのは同意。
せいぜい同じ関数内で同じ要素を二度呼ぶ場合にローカル変数に格納するといいぐらいか。
というか、パフォーマンスが気になるなら質問者が自分でベンチマークをとるべきなんだよな。
自分にとって有意な差があるかを確かめる確かな手段が用意されているんだから、もっと積極的にテストしてもらいたい。

jQuery使ってる時点で生JavaScriptと大差のコスト掛かってるって知ってるのかね？
そんなにパフォーマンス気にするならjQueryなんて使っちゃ意味ない

var $={
id:function(a){
jid=document.getElementById(a);return this},
edit:function(a){jid.innerHTML=a;return this},
click:function(a){jid.addEventListener('touchend',a)}
};

$.id("text").edit('touch').click(function(){
$.id('text').edit('touched')
})
もどきをがんばって作ったんだけど、俺には無理。

>>301
勿論、知っているからこそ「ネイティブ実装の関数を使うべき」と主張している。
本当に拘るのなら getElementById でも使えばいい。

>>302
prototypeでも使えば実装できると思うが、なぜ $ を使いたがるんだろうか。
間違いにく可読性は下がるのに $ を使いたがる人が多くて悲しい。
(ES3の機械的に生成された云々の規約はどうしてなくなったんだろうなあ)

jQueryオブジェクトの生成はコストがかかるから変数に保持しておくというのがjQueryのTipsだよ。
jQueryは重いからパフォーマンスなんて気にしなくていいなんてのはバカの暴論。

excelの「縮小して全体を表示」のようにボックスにテキストが納まりきらないときは
縮小して全てのテキストを表示したいんだけど、widthをテキストの文字数で割った値
をfont-sizeに設定してみたら文字が小さくなりすぎてしまう。
$(function() {
var s = $("div").css("width").match(/\d+/)/$("div").text().length;
$("div").css("font-size", s + "px");
});

パララックスページスクロールについて質問です

こんにちは。
下記のコードはJQUERYコードをコピペしたもので、ド素人です。
ナビをクリックすると、各コンテンツBOX(idに#つけてます)にいきますが、下のコードだとTOPの一番上まで来てしまいます、
クリック→ページトップから下へ85pxのところに来るように設定したいのですが。
ド素人なので、すぐコピペできるようコードを書いていただけますでしょうか。
http://jsdo.it/rrryo719719/uK8O
宜しくお願い致します。

function g(id){
if(!(this instanceof g)) return new g(id);
this.elm = document.getElementById(id);
}
g.prototype.edit = function(text){
this.elm.innerText=text;
};
g.prototype.tap=function(event){
this.elm.addEventListener('touchend',event)
};
g.prototype.add=function(text){
this.elm.innerText+=text
};

var count=0
g("e").tap(function(){
if(count>5){count=0}
g('t').add(list[count])
g('e').edit(count);count++
})

改良

>>305
お前のほうが読解力のない馬鹿の暴論だろ
パフォーマンス第一に考えるならjQueryは不利って話を
jQuery使うならパフォーマンスは捨てろなんて解釈脳味噌腐ってるね

ベンチマークしてみた。

jQueryオブジェクトの生成に1msもかからなかった。

jQueryを使うのだからパフォーマンスを考えないと、重くなる。それだけのことだよ。

パフォーマンス気にするならjQueryなんて使っちゃ意味ない
対偶 jQueryを使うならパフォーマンスを気にするな

論理学の基礎もわからん奴と議論は無理ですな。

ボトルネックの所だけネイティブ関数
他はjQueryというのもありだろう

ボトルネックの部分をネイティブ関数にしたら
jQuery使う意味が無くなるなら話は別だが

>>311
それ対偶になってないから。

ごめん、待遇にはなってるけど、

・パフォーマンスを第一に考えるならjQueryを使うべきでない
・jQueryを使うときもパフォーマンスに気をつけなければならない

この2つは両立するの。わかる？

>>310
セレクタの中にjQuery独自の物が含まれてたら遅くなると思う。querySelector()に任せられないから。
でも要素数が少ないと違いがわからないかもな。

とは言え、キャッシュを一回のハンドラ呼び出しを超えて保持するのには反対するが。

普通に考えて、変数にとっておいた方がいいだろ
これで複雑とか言ってるのは知的障害者か

>>316みたいな必死なのが出る時点で
意味が無いってのがわかるだろう？

>>314
そもそも「パフォーマンスを第一に考えること」がダメなんだよね。

たとえば1分頑張って1ミリ秒速くしました！って言っても
60000回実行して初めて時間の節約になる。

仕事だと1分間の人件費をかけるぐらいなら
1ミリ秒遅いほうがマシじゃんってことになる。

>>318
だから第一に考えることがアホだと言ってるんだって
誰もjQuery使うななんて言ってねえよ

ライブラリ開発者とかならともかく
どうせそうじゃねーんだろうから
この程度でキャッシュなんかすんなや。

したいならすればいいし、したくないならしなきゃいいだろ
何を不毛な議論をしているのか

キャッシュの仕方を聞いているのに
キャッシュなんてすんなとか言い出す奴が一番馬鹿だな
あるケースの時にキャッシュをした方がいいかしない方がいいか、という判断はあり得るが
そうじゃないなら質問自体に集中しろよ
だからC級プログラマーなんだよ

jsbinのライブラリ追加フォームに
WIPというのがありますが、これはどういう意味ですか？

>>322
誰がキャッシュの仕方なんか聞いてるんだよ？
勝手に違う話始めるな。

キャッシュ否定派はローカル変数へのキャッシュもしないのか？
くそみたいなコード書いてそう

>>325
そうやって過度の一般化をするのはC級プログラマ
jQueryオブジェクトをあの例示された使い方で
キャッシュしないという話。

指定したノードの次のテキストノードを取得したいです
階層の上下を無視し、コードで見たときの「次」です
つまり兄弟ノードとは限りません
これを一番簡単にやるにはどうしたらいいでしょうか

ifの結果returnする時
elseを書くべき？書かないべき？

>>328
elseの後 returnだけなら書く

テキストノードの指定した位置に文字列を挿入するにはどうしたらいいのでしょうか？
insertNodeなどノード単位の挿入しかないようですが
文字列を挿入したいです

文字列を別の変数に入れて、いじって、元に戻す

ありがとうございます
dataに再代入したら、動いているようですが
dataでいいのでしょうか

data でok

CharacterData インタフェースには
insertData(offset, string)
とかもあるけどな（多少高速かもしれない）

>>328
俺書かないわ

>>328
else を書かなくて済むなら書かない。
当たり前だと思うが、何を迷っているのか良くわからん。
状況が曖昧すぎて答えようがないのが正直なところ。
コードを例示した方が具体的なアドバイスをもらえると思われる。
出口を一つにする考え方としては returnValue を変数にしておいて最後に return する。

>>305
> jQueryオブジェクトの生成はコストがかかるから変数に保持しておくというのがjQueryのTipsだよ。
Tipsとしてはわからなくもないが、わずかな速度向上の為にメモリを消費するのはどうか、と個人的には思う。
「最近のPCは高スペックだからメモリはガンガン使っていいんだよ」という風潮なのかもしれないが、消費メモリ増加は訪問者に優しいコーディングとは言い難い。

>>291の手法は確実に #id1 への参照速度を向上させるが、代償として「メモリ消費量が増加」し、「メモリリークのバグを誘発しやすい循環参照パターン」になってしまっている。
IE6は希少種だからいいだろうと思われるかもしれないが、バグを誘発しやすいといわれる循環参照パターンのコードはお勧めしない。
一応、jQueryはremoveEventListenerまで実行する作法のあるライブラリではあるが、循環参照パターンは回避できるなら回避したほうが良いと思う。

---
パフォーマンスを向上させる場合はボトルネックとなる部分を見つけてそこから解消させていくのが基本。
jQueryオブジェクトをキャッシュさせることによる速度向上、jQueryをやめることによる速度向上、...etc
を比較してボトルネックとなる部分を見つけ出さなきゃ意味がない。
だから、「jQueryをやめることによる速度向上」が「キャッシュすることによる速度向上」を上回るのであればjQueryをやめることを選択すべきだといえる。
そういう意味でjQueryを使用することに疑問視する声があると思うのだが。
作法としてこのコードの方がいい云々の話であれば、「メモリ消費量増加」「循環参照パターンの使用」と「わずかながらの速度向上」を秤にかけて判断する必要がある。

長くてすまない。

>>305
jQueryオブジェクトの生成コストを気にするならこういう方法もあるが、どうだろうか。

jQuery(document).on('click', 'img', function(event) {
　jQuery(event.target.ownerDocumtent.getElementById('IdName')).removeClass('hoge');
});

循環参照パターンでもなく、メモリ消費量も増加しないのでどうしても生成コストが気になるなら自分はこちらをお勧めする。
ただ、jQuery() は最近のブラウザなら querySelectorAll に丸投げのはずなので IE7- が対象ブラウザでなければ生成コストはさほど高くない気はする(未検証なので断言はしない)。
getElementById の方がコストが安いことは確かだが、そこまで気にする程の差異が見られるかどうか…。

コードだけ読むと「classList.remove を使えよ」という声が聞こえそうだ…。
そもそも論としてjQueryオブジェクトの生成コストを気にするなら、jQueryをやめる選択肢も考慮すべきだと思う。
jQueryオブジェクトを使わずにjQueryは使えないわけで、jQueryオブジェクトの生成を毎回気にする事はjQueryを使っている意味が小さい上に自己矛盾。
jQueryオブジェクトの生成コストを気にせず、積極的に使うほうがjQueryを有意義に使えると思う。

jq使ってイベント追加するより
tap('element',function(){})
みたいな方が読みやすくね？

みなさんはES6のアローファンクションをどう思います？
初見では短くて素敵、と思う半面コードが見難くなるなあと思ったのですが、そういう議論はないのでしょうか

function tap(id,func){
document.getElementById(id).addEventListener('touchend',func)
}
function edit(id,txt){
document.getElementById(id).innerHTML=txt;
}

//ここから
tap('txt',function(){
edit('txt','This element was changed by JavaScript')
})

>>333
ありがとうございました

>>339
扱いがむずかしくて普及しないだろうな
単純にfunctionの代替として使えればいいのに

>>342
（俺には）扱いが難しくて（俺の中では）普及しないだろうな。

es6を平気で使えるようになるのなんて4年後くらいだろ
今使えないものになんて興味ないね

userChromeJSで使ってる

Professional JavaScript for Web developerの日本語版をオライリーは出すのです
JavaScript第六版じゃまだ足りない

>>344
今から4年前は2010年なんだが、
2010年のころ、まだ使えなかったものが
もう使えるようになったんだよね。
4年なんて短いな。

一応ついさっきV8にパッチが上がったよ
https://chromiumcodereview.appspot.com/160073006/
まあコミットされるのにはちょっと時間がかかりそうだけど
Nodeでは数ヶ月後には--harmonyで使えるようになるんじゃないかな
Noderにとってはホントありがたい存在になると思う

Chrome安定版でフラグ無しで使えるのはもう１年はかかるだろうね
まあIE12はサポートしてくるだろうから、
IE12がリリースされた日から平気で使えるようになったって言えると思う
まあES6も部分的にはNumber.isNaNや__proto__みたいにもう十分使えるものもあるんだけどね

jqueryでtext()を使うとHTMLエスケープできますが
HTMLエスケープだけしたい時はどうしたらいいですか

tiny mceで、
・クリックしたらそのdivを編集可能にする
・フォーカスを外したらそのdivを普通のdivに戻す
・URLが記述されたらリンクに変換する
これらを実現できますか？
tiny mceに詳しい方お願いします

http://jsbin.com/talim/2/edit

contenteditableなdivの中に、
hogeというリンクを設定しておきます
この文字をすべて削除します
そして再び文字を入力すると、
chromeだけですが、
入力した文字が何故か<u>タグで挟まれてしまいます
これは訳の分からない奇妙な挙動だと思います
これを防ぐにはどうしたらいいのでしょうか？

http://jsbin.com/talim/3/edit

ふと思いついて、aタグのスタイルを
text-decoration: none;
にしたら、uタグを付ける奇妙な挙動が消えました
これはバグですよね・・

http://jsbin.com/soxal/2/edit

aタグは関係ありませんでした
文字に色々なスタイルを適用しておいて、
それをすべて削除→文字入力
とすると、それまでのスタイルを再現しようとします
まったくひどい実装です
このスタイルの再現をJavaScriptでリセットすることは出来るのでしょうか？

Professional JavaScript for Web developersには
DOMの説明が詳細に書かれていますが
日本語の書籍でこのレベルのものはありますか？

The cloneNode() method doesn’t copy JavaScript properties that you add to
DOM nodes, such as event handlers. This method copies only attributes and,
optionally, child nodes. Everything else is lost. Internet Explorer has a bug
where event handlers are also cloned, so removing event handlers before cloning
is recommended.

とありましたが、
cloneNodeで同時にイベントハンドラもクローンされるということは、
イベントハンドラはDOM要素のプロパティということでしょうか？

まずは英語の勉強からだな。

JavaScript propertiesと書いてますが、そうは思ってませんでした
プロパティーならイベントリスナーをリスト的に読めたりすると思うのですが
そういう形で扱えませんよね？

>Internet Explorer has a bug where event handlers are also cloned
なんでここ無視するん?

しまった他のとこのが名前に残ってた
俺231じゃないから

IEにバグがあろうがなかろうが
イベントリスナーがDOMのプロパティーという事実には変わりないので
バグは本質じゃないでしょう

DOMノードを親から切り離して、別の親に付けることはできますか？
クローン作成→それまでのノードを削除
で、結果的に移動させることはできそうですが
既にあるものをそのまま移動できたらコスト的にも一番いいと思います

一時変数にコピーして突っ込んで元のにはnullじゃあかんのか

http://jsbin.com/xesav/1/edit

一度配列にコピーして、他の親にappendChildすれば、移動出来ました
ありがとうございました

>>363
ちょっと無駄が多すぎるので修正してあげたよ。参考にしてね。

http://jsbin.com/xesav/5/edit

>>364
ライブラリを使ったコードに修正されているようだけど、元々がライブラリなしなので意味がないのでは。

>>365
DOMライブラリだって、JavaScriptの仕様じゃなくて
ブラウザが持ってるライブラリだし。

だいたいライブラリを使わないという条件なんて書いてないし
目的はDOMノードの移動なんだから問題ないでしょ。

目的を見失っちゃいかんよ。

>>365に同意
ライブラリ自体がお荷物で比べ物にならないほど無駄
南極にごみを全部集めて地球はキレイになりましたって言ってるようなもの
良い悪いが言いたいのではなくて>>364の主張がおかしいということを言っている
本質（）云々ではなくそれ以前の論理的思考が変だねってこと

わかりやすい釣りだなｗ

無駄かどうかは、自分で書いたコードの
行数で判断しろよ。どちらが時間がかかったか。

そこらへんは環境次第ってことで沈静しませう

まあ蛇足だけどいいんじゃね?

>>368　なんか周りと噛み合ってなくない？
ソースコードそのものじゃなくて、ライブラリーを当然のように使って、
使わないのが無駄と言うかのような態度が悪いって言われてるんだと思うよ。
多分。

そもそもロジック的な内容の質問なんだから、
ライブラリーを使って示すこと自体がアレだと思うし、
それで単純化できたとしても質問の本質的に適さないと思わない？

そんなことより、配列を for-in で参照しているところが気になる。

プログラマーってロジックってよく言う

配列よりDocumentFlagment使った方がいいの？

そもそも変数に退避させる必要がないよ

じゃあこれで
document.append.apply(test1, test.childNodes)

>>364
なるほど、jqueryで書き直すと簡単ですね
ありがとうございました

>>374
それはどうやるんですか？
>>375
childNodesをループさせながらappendすると
その時点で移動元の配列が短くなるので、変になります。
いい方法がありますか？

そういう時は添字不要のfirstChild又はlastChildあたりがお手軽なのでは
あるいはchildNodesを後ろからループさせてinsertBeforeとかね

こんな感じで

while( source.firstChild ){
destination.appendChild( source.firstChild )
}

なるほど〜
firstChildとか微妙に使い道が分からなかったのですが
こういう使い方が出来るんですね
ありがとうございました

>>380
その方法はノードの数だけリフローが発生するのでDocumentFlagmentに入れて一度にappendChildする方がいいと思う。

このJSはわかる人が見たら簡単なスクリプトなんでしょうか？
timers = []; の役割が全然わからないです。試しにこの配列の中を["あ", "い", "う"];にしても何も変わらず動きます。

あと、関数とは海水を真水に変える装置と考えると引数は海水で戻り値が真水という例えを見ました。
function runSlot(n) の処理部分はわかるのですが、ここでのnの意味がわかりません。なぜhtmlのid="num0" id="num1" id="num2"を
JSの("num"+n)でnの部分が自動で数字になって、それぞれを取得できるのか、なぜtimers[n]と書いているのかnは何の役割になっているのか

何度見返してもこの部分だけがわかりません。どなたか幼稚園児にでも理解できるくらいにかみ砕いて教えてもらえませんか？
他の部分はわかっても、その部分がわからないので「なんで動いているのか？」が理解できません。詳しい人助けてください・・


var timers;

function startSlot () {
timers = [];
runSlot(0);
runSlot(1);
runSlot(2);
}

function runSlot (n) {
document.getElementById("num"+n).innerHTML = Math.floor(Math.random() * 10);
timers[n] = setTimeout(function () {
runSlot(n);
}, 50);
}

startSlot();

なあにその喩え

> あと、関数とは海水を真水に変える装置と考えると引数は海水で戻り値が真水という例えを見ました。
これか
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1315948363

とてもわかりにくかったです
本当にありがとうございました

スクリプトはすごく簡単なのに
質問文が長文すぎて読むのがつらい

引数を勉強するといい

>>383
クロージャがわからないのか、timeoutID がわからないのか。

timeoutID は clearTimeout の為に定義される。それ以外の活用法はない。
例示コードでは timeoutID は活用されてないので無意味。事後処理として clearTimeout を使ったほうがいい。
https://developer.mozilla.org/ja/docs/Web/API/window.setTimeout

ところで、runSlot で実行順が保障されないのは大丈夫なのか。
本題とは関係なさそうたが、若干気になる。

>>382
現実の実装はループ内で（実行単位の中で）リフローを要するような処理
（要素の座標やスクロール位置へのアクセスなど）
を行わない限り、いちいちリフローさせないだろう
（それができないブラウザはたぶん淘汰されている）

DOM Range を使えば除去も追加も一括してできるが、実験してみたら
>>380 より却って遅いか（ FF）または大体同じ（Chrome）だった
（Range の実行速度自体は両ブラウザとも大体同じ）

>>389
appendChildはリフローを発生させる処理だと思ったが、違ったのだろうか。

ブラウザは複数のリフロー処理をキャッシュするから問題ないという意味ならブラウザに負荷をかけるだけなので極力避けるべきだと思うのだが…。
(速い遅い以前に必要以上にCPUを消費する)

chromeでselectionオブジェクトの中を見ると
extentNodeというプロパティがありますが
これは何でしょうか？
https://developer.mozilla.org/en-US/docs/Web/API/Selection
ここにも載っていません

挿入位置がバラバラな時は逐一appendChildしてたけど
最悪bodyごとDocumentFlagmentにcloneNodeして弄ってから
replaceChildした方がマシなのかな

僕の脳内ベンチでは
DocumentFragmentの生成と貼り付けで二行も増えるからむしろ遅くなる
最適化されたネイティブコードさんに任せた方が速い

selectionとかrange関係のところが複雑怪奇すぎます
JavaScriptでもっとも分かりにくいところではないでしょうか
このあたりを分かっている日本人はほとんどいないのでは？

仕様そのものよりブラウザ間の差異のほうがよっぽど厄介だよ

親指シフト入力ソフトを使っていると、
ある条件でkeyupが発生しないことを発見しました
条件とはATOKとchromeを使い、文節確定した時です
keyupでフォームコントロールの変化を検知しているので、困ります
keyupの代わりに検知する方法はありますか？

DOM要素をremoveChildしてもその要素への参照は切れないの？

どこからの参照を問題にしているのだ？
切れる切れないのどこが問題にされているのだ？

removeChildした要素をスクリプトの変数に代入してれば
その変数から参照されている、
という至極当たり前の話にしかならないし
代入していなければ、そのうちガーベジコレクトされる
という至極当たり前の話にしかならない

異言語間の循環参照を断ち切るためDOM→JSは弱参照で実装するノウハウが有る
だからルートから切り離されて、JSが離したノードは問答無用で捨てられる
実はこのせいで開放されるべきではないところで開放されてしまうケースもあるが目をつぶられてる
通常ハマることはないが一応知っておいた方がいい

removeChildして切り離された要素をaddChildしたら復活するの？

別ページから要素(今回はDL)部分を引き抜きたいです。
その別HTMLを同じ階層に置けば、下記でできるのはわかりました。

$(document).ready(function(){
$("#TARGET_ID").load("test.html #yomikomi-block dl");
});

このtest.htmlは別階層にありこれは同じ場所に移動させることができません。

../sample/test.html

と指定すると、test.htmlは読み込んでくれません。

ここはどのようにすればよいのでしょうか？

Firefox, Chrome, Sneipnirで試してどれも同じ結果です。
ググると、Firefox特有でそうなるっていう場合もあるようですが、
今回は他のブラウザでも指定できません。

よろしくお願いします。

>>397
クロージャで参照を持っている場合は参照が切れない

>>400
addChild は ActionScript では？
DOM にありましたっけ？

とりあえず全て===で書いていますが
==でいい場合は==の方がいいですか？
判別が面倒なので全部===にしています

>>404
> ==でいい場合は==の方がいいですか？
どんな判断基準で「いい」のですか？
とりあえず、=== の方が高速です。

型の自動変換を亜為に入れてあり、自動変換処理を期待するいる場合は == しか選択肢がありません。
型の自動変換を期待しないなら === を選択します。
…という当たり前の回答しか出来ません。

>>402
ということはremoveChildする前に参照しているノードにnullを設定してあげればいいってことかな

==も===も型が同じ場合踏むステップは同じだからES6まではどちらが原理的に高速だとかはない
個人的にはどちらかというと===を使うのに凝る方がハマりやすいから、==がオススメ
あとはES7でValue Objectsと演算子オーバーロードが入ることを考慮する時期になってきた
別クラスや別参照同値のValue Objectsは===だとfalseになってしまうだろう

例えば良く特に0と等価評価するときは===を使えというが
function isZero(n) {return n === 0}だと
isZero(0L)のように別型の数値を渡した時、今の流れの仕様だと
typeof 0L === "int64" よりfalseになってしまうようになりそうなのでマズイかもしれない

関数に渡される範囲を把握してるつもりでも、
例えばuse 〜が他所のスクリプトによってグローバルトップで使われた時
Float32Arrayがnumberではなくfloatを返すようになったりもろもろあるかもしれない

今はそういう流れ、一応誤解無いように言うと
将来も動くスクリプトであるためそうした方がいいというのではなく、
今早そうだから、みたいなのより
もっと将来に渡って通用しそうな感覚の方がいいでしょって感じ

>>406
クロージャを使ってるなら removeChild してから null 代入では？
先に null 代入したら removeChild できない

>>407
なぜ型が同じ場合に限定して話をするのだろうか
型が違うなら厳密等価演算子が高速なのは明白だろう

"0" == 1; // false
"0" === 1; // false

当然ながら === の方が高速だ。
== は型変換処理が発生するが、=== は型変換しないので速い。

"0" == 0; // true
"0" === 0; // false

=== が高速だが、結果が異なる。
型が異なる場合に true を返して欲しいから == がいいとあなたは判断するが、逆の結果を期待する人は === が望ましい。
ようするに、等価演算子に型変換を期待するか、によって使用する演算子を選択すればいいだけの話。

個人的には変数に格納される型を限定した方が安全性が増すから ==== しか使わない。
必要なら事前に型変換しておくから typeof 演算子をほとんど使わない、というのもある。

>>387
引数でいくつか検索したんですがどれも要領を得ないというか
わざわざ難しく説明してあるので理解できませんでした

>>388
http://jsbin.com/wajelale/1/edit
これが完成版です。これなら>>383の質問もわかりやすくなるでしょうか？

>>410
呼び出し元で実引数に 0, 1, 2 を指定しているからとしか言いようがない。
timeoutID は>>388で説明した。

>>410
たぶん難しく考えすぎてるだけだと思う

timer = setTimeout( fn , interval ); // 開始
clearTimeout( timer ); // 終了

これはわかってるんでしょ？
問題のコードでは、3つのタイマーを動かして止めるから

var timer1;
var timer2;
var timer3;

でも別に構わんのよ。ただこれを書いた人は
止めるボタン、タイマーID、数字を表示する要素をセットにするのに
引数nを使うって方針を建てたため、変数timerも配列になったってだけ

オブジェクトにすればいいのにね

>>412
> オブジェクトにすればいいのにね
いや、クロージャなんだから変数は一つでいいと思うんだが…
このコードを書いた人はクロージャを理解してないとしか思えない
それから、timeoutID を使わないなら変数を使用する必要もないし、使用するなら clearTimeout しないと意味ないし、改善点がいろいろある

>>383
>timers = []; の役割が全然わからないです。
timers = [];は配列の初期化

>なぜtimers[n]と書いているのかnは何の役割になっているのか
nは配列の添字
3つのスロットの情報を配列に格納して引数のnでどのスロットかを判別してる


>>413
>>410の完成版だとclearTimeoutしてる

>>412
その部分は引数を除けばわかります
全体の流れや個別の部品の意味はわかるのですが引数の部分が何をやってるのかがわかりません


>>414
timers = []; と書くと配列（中身は未定だが）の中身は今の時点では空
というような使い方ができるということですか？

＞3つのスロットの情報を配列に格納して引数のnでどのスロットかを判別してる
これです。その意味がわからなかったんです
参考書を見ても引数を指定することで具体的にどう動くのかがわかりません

引数は必要個数分書く（個数より少なくてもエラーにはならない）と覚えたのですが
このスクリプトではスロット分を書いているわけではなく、ただのnの1つだけです
これだけで、なぜ自動で振り分けられるのでしょうか？そういう機能だと言われればそれまでですが
この辺の仕組みがどう調べてもわからないです
関数を海水を真水に変える装置と考えると引数は海水という例えは間違っているのでしょうか？

検索しても、どなたの情報が合っているのかわからず、とても詳しそうな方の情報を見ても
わかりにくい言葉を使って論文のような書き方をしていることが多く、私の頭では理解できていません

このスロットにおける引数の動きを馬鹿にでもわかるような言葉で教えていただける方はいないでしょうか？

>>415

runSlot(0); // runSlot の最初の引数 = 0 の状態で runSlot を実行しますよ〜
runSlot(1); // runSlot の最初の引数 = 1 の状態で runSlot を実行しますよ〜
runSlot(2); // runSlot の最初の引数 = 2 の状態で runSlot を実行しますよ〜

function runSlot( n
/*
「runSlot の最初の引数」なんていちいち書くのはとても面倒だから
この関数の中ではそれを n という名前で呼ぶことにしますよ〜
*/
){

}

ということが知りたかった？

JSONと、Jquery、Kimonolabsを使った、データスクレイピングの仕組みを勉強中の者です。

うまくkimonoを設定して、以下のJSONを返してくれる所まで行けました。
下記の中で、
"src": "http://XXXXX.XXX/XXX.jpeg",
のURLを、<img>タグで表示させたいのですが...
どのように参照すれば良いでしょう？


読み込みURL:
http://www.kimonolabs.com/api/XXXXXX?apikey=XXXXXX&callback=?

レスポンス:
{
"name": "TargetImageUpdate",
"lastrunstatus": "success",
"lastsuccess": "Mon Feb 17 2014 11:38:36 GMT+0000 (UTC)",
"nextrun": "Tue Feb 18 2014 11:38:36 GMT+0000 (UTC)",
"frequency": "daily",
"newdata": false,
"results": {
"collection1": [
{
"TargetImage": {
"src": "http://XXXXX.XXX/XXX.jpeg",
"alt": "Target"
}
}
]
}
}

>>415

これを

function runSlot (n) {
　　document.getElementById("num"+n).innerHTML = Math.floor(Math.random() * 10);
　　timers[n] = setTimeout(function () {
　　　　runSlot(n);
　　}, 50);
}

こうしてしまったら

function runSlot (n) {
　　document.getElementById("num"+n).innerHTML = Math.floor(Math.random() * 10);
　　timers = setTimeout(function () {
　　　　runSlot(n);
　　}, 50);
}

区別できなくなっちゃうじゃん

>>410
いつものようにjQueryになおしてあげようと思ったけど、
単にそれだけではつまらないので、jQueryを使わずに書きなおしてあげたよ

http://jsbin.com/wajelale/3/edit

>>419
循環参照してる

>>419
無駄が多すぎるね
・nums[0] == nums[1] を2回評価してる
・バブリングするclickを3回も定義してる
・innerHTMLを使用してる

すいません、自分で辿りつけた所の参照コードは下記のような物です

<script>
var kimonoAPI = "http://www.kimonolabs.com/api/XXXXXX?apikey=XXXXXX&callback=?";
$.getJSON(kimonoAPI,
{
// 全てが対象
},
function(data){
alert ( data.results.collection1 );
});
</script>

このテストコードを実行すると、「object Object」が戻り値として表示されます

他にも
alert ( data.name );
alert ( data.results );

等は参照出来るのですが、

alert ( data.results.collection1.TagetImage.src );

とするとUndefinedになってしまう...

横から失礼
「バブリングするclickを3回も定義してる」の意味がわかりません
リスナー内で定義せず外で定義しておけってことですか？

>>422
collection1は配列だから最初の要素を取り出すならこうなる
data.results.collection1[0].TagetImage.src

>>423
バブリングするイベントは上位ノードでイベントを検知することが出来る。
>>419であれば、document.body 以上であればclickイベントを拾える。
http://www.tagindex.com/kakolog/q4bbs/1601/1871.html

>>424

出来ました！！！ありがとうございます！！！

配列の基礎からじっくり学びたいと思いますが、
これで今まで手動でやってた更新が完全に自動化出来る喜びにふるえてます！

感謝感激です。424さんに明日良いことがありますように。

>>420-421
元々書いてあったところの指摘は
全部元の人に言ってくれよｗ

まあ一応指摘しておくか

>>421
> ・nums[0] == nums[1] を2回評価してる
この例の場合は、コードの量が少なすぎるので、2回評価する方法を1回で評価が終わる方法に変えても意味が無い。

意味が無いというのは、
・速度の点で意味が無い。誤差レベルでマイクロ秒単位の違いしか生まれない。書き方によっては遅くなる。
・コードの記述量の点で意味が無い。無駄か無駄でないかは、速度よりもこっちのほうが重要だが
この例の場合では、1回の評価で済む方法を使ったらコードの記述量が増える。
・複雑さの点で意味が無い。評価が1回ですませて、なおかつ速度が落ちない方法を書こうとすると
コードが複雑になる。記述量よりも重要な点。

よってこの程度で「2回の評価」を問題にして、書きなおすことは逆に多くの無駄を作ることになる。
評価の方法を1回で済む方法に変えました。でもその為の準備処理で遅くなったり、コードが複雑になりました。
じゃ、それこそ無駄だからね。わからなければ書いてみればわかると思うよ。

便乗質問なんだけど
スロットが3個なら一個いっこみてけばいいけど
スロットがn個だった場合、m個合致しました
ってのはどうしたら良いのん？

>>421
>・バブリングするclickを3回も定義してる
素直にjQueryを使うべきだね。

親で捉えると下位から来たイベントが、どの要素で
発生したクリックか？って判断する処理が必要になる。

たとえば、document.body 以上であればclickイベントを拾えるが、
ボタン以外のクリックも拾うことになる。

jQueryであれば $(document).on('click', 'input', function() {・・・});
というように、簡単かつ見通しがよく書くことができるから問題ないが、
これをjQueryを使わないで書くと、いちいちどこからの要素から発生したか？って
比較をしないといけないから、コードが複雑になる。これも書いてみればわかると思うよ。

あと、document.body で捉えるよりも、一つdivかなにかでボタン類を囲って
そっちでイベントとらえたほうがいいよ。

>>429
いい指摘だね。>>419では（手間もコード量も大差ないから）
ボタンの数は変えやすいように書きなおしているが、
その点は一致した数の判定方法はそのまま残すという判断をした時に考えた。

まずどう書くかではなく「スロットがn個だった場合、m個合致しました 」
というのが間違いなんだ。

何が間違いかというと、4個だった場合[1][1][2][2]ということがあり得る。
この場合、「2個合致した」ではなく「2個合致したものが、2組ありました」となる。
つまり「n個だった場合、m個」という表現では足りないわけだよ。

そこはもう仕様の問題であり、それが決まらないのに4個以上に対応するのは無駄。
だから3個限定のコードのまま残した。3個限定であればあの書き方が一番
コード記述量が短くシンプルだろう。
なんでも重複を省いたり比較の回数を減らせばいいってもんじゃないんだよ。

ということで>429、どうしたら良いの？という問いに答えるには、
まずどうしたいの？という質問に答えてもらわないといけない。

まあ一番汎用的（どんな仕様にも耐えやすい）のは、ボタンの種類は有限だから
1がn個、2がm個・・・というハッシュをあらかじめ作っておくことかな。
それはボタンの数だけループしてその数を計上すればいい。

そうしておけば、仕様に最適化したコードにはならないが、そのあとの処理が楽になると思う。

>>421
>・innerHTMLを使用してる

なにか悪いん？

元々のコードがそうだったから、残しただけだけど
表示する時にHTMLを使いたいと考えているのであれば
innerHTMLでいいでしょ？ 速い方法だし。

>>420
循環参照は、インスタンスを削除する時に
気をつける必要があるってだけで
やってはいけないことではないよ。

>>431
すまぬ。合致した組み合わせのうち最大の数を返せばいいと思ってた

> 1がn個、2がm個・・・というハッシュをあらかじめ作っておくことかな。
> それはボタンの数だけループしてその数を計上すればいい

これもなんとなくそうすればいいのかと思ってたけど
もっとスマートな方法があるのかにゃー、と聞いてみました

> もっとスマートな方法があるのかにゃー、と聞いてみました
lodashあたりにメソッドありそうだけど
今は時間ないので。

あるノードが親の何番目のchildNodeかを調べるには
親のchildNodesをループさせて調べるしかないですか？

>>428
どうして意味がないのさ
1回だけ評価するほうが論理的にわかりやすいと思うけどね
2回同じ評価をするほうがわかりづらい

今はこれから更に改良されてて循環参照で特に気をつけなくてもいいと思うけど
http://steps.dodgson.org/b/2012/12/19/dom-and-gc-or-what-happend-at-eden/

ID:N3YK+MBc が偉そうなのが癇に障るな
突っ込みどころは多々あるが、思い込みの激しい反論されるのは目に見えてるからどうしようもない

>>430
バブリングだけの為になぜjQueryを使う必要があるの？
普通に書けばいいじゃない

nodeListはindexOf使えないのか

>>427
「修正してあげた」にしては未修正部分が多すぎるから指摘を受けるんじゃない？
君は他人を怒らせる書き方しかしてないから気をつけたほうがいいよ

>>438
循環参照を避けるべき理由は実装がメモリリークのバグを生み出しやすいためといわれる
今はバグがないかもしれないが、将来的にバグが発生する可能性を踏まえるなら避けたほうがいい

>>>430
全然複雑じゃないぞ
偉そうな割にはいうことがいちいち的外れすぎなんだが

document.addEventLIstener('click', function (event) {
　var target = event.target;
　
　if (target.className === 'stop') {
　　// 処理
　}
}, false);

うん。
途中で止まるかもしれないし、
Nodeが開放されてもリスナが溶けないので絶対にやめた方がいいねそれ。
凝る割にメリットがあるのはごく一部のケースのときだけ。しかも今回ではない。
カッコつけないで素直が一番よ。

>>445
> 途中で止まるかもしれないし、
止まる理由がないし、「止まるかもしれない」って止まる理由をお前は説明できるのか？

> Nodeが開放されてもリスナが溶けないので絶対にやめた方がいいねそれ。
unload 時に removeEventListner する処理を入れれば済む話だと思うが
ただ、グローバルコードには循環参照は発生しないはずなんだが

自分の知らない書き方を「複雑」で「普通じゃない」として一蹴する人がいるようだけど、勉強の機会を逃していてとても勿体ないと思うのです

>>425
ありがとう
前から点と線が繋がらない感覚だったけど理解できた気がする
event.currentTargetの使いかたがわかったよ

ところで
var trg = event.target;
if (trg === event.currentTarget) {
処理
}
というのと
var trg = event.currentTarget;
if (trg) {
処理
}
という風に書いてるのを見るんだけど違いってあるのかな

オブジェクトがプロパティを持っていないときに
新たに値を指定してそのプロパティを持たせることを考えています

var obj = {key1:true , key2:false , key3:true}

obj.key4 || obj.key4 = true;
obj.key4 = obj.key4 || true;
obj.key4 ? null : obj.key4 = true;
のようにして存在しないプロパティなら意図通りにできるのですが
obj.key2 || obj.key2 = true;
のように既に存在していて値がfalseなプロパティも引っ掛かってしまいます

obj.key2 === undefined ? obj.key2 = true : null;
として今はやっているのですが、どう書くのがベストなんでしょうか

>>432
HTMLを代入してるわけじゃないから、textContentが適切ってことでは

>>441
仕様上は可能だから、polyfillってことでprototype拡張しちゃっても問題ないと思う

>>441 [].indexOf.call(nodeList, node)
>>449 obj.key4 || (obj.key4 = true); じゃないとエラーになるよ
>>450 NodeListがArrayインタフェースを持つかはまだ確定してないんじゃないの？

指定id以下の要素をremoveChildしたいんですが可能でしょうか

どうやらプロパティ in objectでシンプルに書けそうです
>>449は取り下げます、ありがとうございました

>>451
指摘ありがとうございます
短絡評価というのは知りませんでした、気を付けたいと思います

>>437
> どうして意味がないのさ
> 1回だけ評価するほうが論理的にわかりやすいと思うけどね
> 2回同じ評価をするほうがわかりづらい

うん、じゃあ書いてみて。

このコードの、nums[0] == nums[1]の評価を1回にするコードを。

if (nums[0] == nums[1] && nums[0] == nums[2]) {
alert("全部そろった！");
} else if (nums[0] == nums[1] || nums[1] == nums[2]) {
alert("2つそろった！");
} else {
alert("残念");
}

>>444
このコードが複雑。
なぜなら、今回はstopだけでいいかもしれないが、
その他の処理も扱おうとしたらどうなる？

document.addEventLIstener('click', function (event) {
　var target = event.target;
　
　if (target.className === 'stop') {
　　// 処理
　}
　if (target.className === 'a') {
　　// 処理
　} 　
　if (target.className === 'b') {
　　// 処理
　} 　
　if (target.className === 'c') {
　　// 処理
　}
}, false);

こうなるのは目に見えてるよね？
この時問題になるのは、新しい要素の新しいイベントを扱う処理を増やした時、
無関係であるはずのコード（つまり上のクロージャー部分）を修正しなければいけないということ。
無関係なはずなののに依存関係を作ってしまっている。
こういうのはコードが増えるにつれて、追加しづらく修正しづらく削除しづらいコードになる。

>>442
> 「修正してあげた」にしては未修正部分が多すぎるから指摘を受けるんじゃない？

俺の言い方が気に食わない人は、俺がどんなコード書いたっていちゃもんつけるよｗ

俺の修正は、コードの量を減らす（もちろん可読性は犠牲にしない）ことを
目的としているのでもっと良い書き方があるのなら、
そんな口でわーわーいわないで、訂正したコードを書いてくれ。

>>454
２つそろったときのnums[0] == nums[2]のパターンが抜けてる

>>455
>444ではないが、俺もよくそう書いてもやもやしてるわ・・・
typeごと振り分けた上でさらにidで分岐とかくそ面倒くさくなってくる
JQuery使えじゃなくて、もう少しいい方法はないものか

>>434

> すまぬ。合致した組み合わせのうち最大の数を返せばいいと思ってた
ポーカーで言うスリーカードとフルハウスでは
どちらも合致した組み合わせの最大は3だけどポイントは違うわけで
仕様次第だけど、最大の数を返すだけじゃダメだろうね。


> もっとスマートな方法があるのかにゃー、と聞いてみました

lodashにあったよ。

var nums = ['A','B','C','A','B','D','E'];
console.log(_.countBy(nums));

出力結果 { A: 2, B: 2, C: 1, D: 1, E: 1 }

仮に、合致した組み合わせのうち、最大の数を返すならこうなるね。
var max = _(nums).countBy().values().max().value();

>>457
ほんとだねｗ コピペしてよく見ていなかった。

それで、比較を一回にするコードに直すことで、
どうシンプルになるだろうか。早く見てみたい。

>>458
> JQuery使えじゃなくて、もう少しいい方法はないものか

「JQueryと同じ仕組みを作れ。」じゃない？ｗ

まあ車輪の再発明するぐらいなら、
jQuery使えって話だよ。

そうだ。今気づいたが、

> 　if (target.className === 'stop') {
> 　　// 処理
> 　}

これ、classが"stop button"なんてなっている時に問題になるね。
class属性なんてのはデザインの都合で追加されうるので
ちゃんと扱おうと思えば意外と大変だよ。

だからjQueryを（ｒｙ

>>458
{'stop':function (){}}みたいな、テーブルつかえばいい

>>463
idとclassの二つで分岐ってことを忘れてるよ。

まあそれは、たとえば"id/class"という単一の値に結合して
テーブルで振り分けでいいと思うけど、
classの値が複数ある場合はどうするの？

ビット演算

>>465
興味深いね。

具体的なコードを教えて下さい。

みんなjQuery以前に自分でquerySelectorっぽいもの作ったじゃろ？
その時のことを思い出そう

いろいろ考れば、無駄は省いていけるけど
NodeListを篩に掛けるコスト自体はなくならない

>>454

var result;

if (nums[0] === nums[1]) {
　result = nums[1] === nums[2] ? '全部そろった！' : '2つそろった！';
} else {
　result = (nums[0] === nums[2] || nums[1] === nums[2]) ? '2つそろった！' : '残念';
}

alert(result);

>>455
switch文か配列を使えばいいだろう
それでも複雑だと思うなら内部処理を関数に分ければいい
あるいは、addEventListner を複数定義してもいい

逆に聞くが、あなたが好むjQueryではこの場合はどうする？
バブリングするなら当然一つのハンドラに集約するのが効率的だが、一つに集約するのか？
あなたがイベントを分けるほうがいいと思うなら、addEventListenerでも分ければいいだけ
難しく考えすぎなんじゃないか？

>>462
classListを使えばいいだけでしょ
jQｕｅｒｙばかり使ってるから標準APIを覚えないんだよ

classListがなかった頃はこんな書き方もあった。

(' ' + element.className + ' ').indexOf(' hoge ') !== -1

しかし、ID:N3YK+MBc は本当にjQueryしか知らないんだな。
こんなのちょっと考えればわかるし、今までの経験からコードが蓄積されているのが普通だと思うんだが。

>>471
classNameがhogehogeとかだと詰むんじゃ？

>>472
なぜ詰むのかわからないので理由を詳しく

> indexOf(' hoge ')

両サイドにスペース入ってんの気づかんかった
すまんこすまんこ

documentでイベントを一括管理するのって良くないと思う
関数の登録／解除ができないし、要素が削除された時もリスナが削除されないから
逆にそれを整備するなら個別に設定するのと結局変わらない

一括管理はターゲットが不定で、要素を区別しなくていい時にすべきで
要素で区別する必要があるなら個別に設定した方が間違いなくスマート
また、その場合でもdocumentではなくてターゲットの１つ親要素にした方がいいね

どっちかっていうと、要素を追加した時にハンドラの設定のし直しをしなくてすむってのが目的じゃね?

まあ適材適所でいいじゃん
あとjQuery使う・使わないも、ケースによるだろうし
いつでもjQuery使うべきって言う論は原理主義者みたいで嫌いだな

selectionオブジェクトの
anchorOffsetは、anchorNodeが非テキストノードの場合は、
anchorNode.childNodesに対する添字として機能すると思っていたのですが
IEで、contenteditableな要素でshift+enterを使ってBRを入力すると、
anchorOffsetはanchorNode.childNodesをはみ出てしまいます。
childNodesが1つしかない（つまり最大添え字は0）のに、
anchorOffsetが1になります
これはバグでしょうか？
それともこの動作が正しいのでしょうか？

ちなみにfirefoxでは、enterを入力した時、
<BR><BR>が入力され、anchorOffsetは一つ目のbrを指します
これは分かりやすい動作だと思います
しかしブラウザによってanchorNode, anchorOffsetの挙動が変わるとすれば
非常にやっかいになると思います

ブラウザのデバッガのキー操作が
F10,F11,F12あたり統一されているのは何故ですか？

偶然

selectionやrangeを抽象化するライブラリrangy
https://code.google.com/p/rangy/
を使ってみても、
IEでのanchorNodeとanchorOffsetの値は同じでした

javascript系ブログでこいつのコードは綺麗だなって人いますか？

配列の統合はconcatを使えば行えますが
連想配列の場合はfor inでチマチマやるしかないんでしょうか

lodashで出来る
はい論破

http://jsperf.com/variables-local-cache/2
なんでキャッシュしないほうが高速なんだろう

>>486 withCacheはcalがグローバル変数になってる

>>471
そういうのをバッドノウハウっていうんだよ。

クラス名が、'hoge' and 'bar' の場合はどうするの？

バッドノウハウの何がダメかっていうのは、

なんで「最初からそのコードを書かなかったのか？」
の一言で説明できる。

そのコードはわかりにくいから書かなかった。
わかりにくいコードは悪。
後から後から対応に追われることになる。
何度も同じ間違いをすることになる。

そういうのを防ぐ仕組みを作りなさい。

仕組みを作る（自作ライブラリ）ぐらいなら
jQueryを普通に使えばいいだろう。

なんで他人の成果を利用することを
極端に嫌がるんだ？

>>468
ひどいコードだねｗ
日本語の部分を隠して、穴埋め問題にでもしてみようか。

var result;

if (n0 === n1) {
　result = n1 === n2 ? ○: ☆;
} else {
　result = (n0 === n2 || n1 === n2) ? △ : □;
}


このコードは何をしているのか答えなさい。
△には下記の三つのうちなにが当てはまるか答えなさい。
「全部そろった」「2つそろった！」「残念」

>>478の件ですが
anchorNode.childNodes[anchorOffset]がnullなら
offsetを-1するようにしたら、
プログラムが動くようにはなりました
MSDNにも情報は少ないし、仕様なのか何なのかは分かりませんが・・

>>469
> 逆に聞くが、あなたが好むjQueryではこの場合はどうする？
> バブリングするなら当然一つのハンドラに集約するのが効率的だが、一つに集約するのか？

>>455をjQueryにすればいいんだよね？

$(document).on('click', '.stop', function(event) {
　//処理
});
$(document).on('click', '.a', function(event) {
　//処理
});
$(document).on('click', '.b', function(event) {
　//処理
});
$(document).on('click', '.c', function(event) {
　//処理
});

補足しておくと、

イベントハンドラを4つ、つまり document.addEventLIstener を
4回実行していると思うかもしれないがしていない。
jQueryが内部で一つだけイベントハンドラを割り当てて振り分けている。

そしてonメソッドの第二引数の、.stop というのは当然 "stop button" にも当てはまるし、
CSSセレクタなので、.sotp.buttonという書き方もできる。
もちろん#id.classとかtag[name=hoge]とかいう書き方もできるから
idが〜で、さらにクラスが〜とかタグが〜とかにも対応できる。

>>444は訂正して欲しい。

document.addEventLIstener('click', function (event) {
　var target = event.target;
　
　if ((' ' + element.className + ' ').indexOf(' stop ') !== -1 ) {
　　// 処理
　}
}, false);

と同等のjQueryコード

$(document).on('click', 'stop', function (event) {
　　// 処理
});

この二つを比べてみよう。と>>444に言って欲しいｗ

>>484
> 配列の統合はconcatを使えば行えますが
> 連想配列の場合はfor inでチマチマやるしかないんでしょうか

>>485が正解。lodashでできる。
http://lodash.com/docs#merge

var names = {
'characters': [
{ 'name': 'barney' },
{ 'name': 'fred' }
]
};

var ages = {
'characters': [
{ 'age': 36 },
{ 'age': 40 }
]
};

_.merge(names, ages);
// → { 'characters': [{ 'name': 'barney', 'age': 36 }, { 'name': 'fred', 'age': 40 }] }

>>495
それ、前者の方が速いよね？

>>497
0.0001秒ぐらい速いんじゃない？

開発速度であれば後者のほうが圧倒的に速いけど。
前者は長い上に柔軟性もなく間違いやすい。
まず多くの人がclassName=〜って書き方をするだろうしね
実際に>>444がやらしかしてしまったように。

>>416
そこがわからないです。function startSlotの中で
runSlot(0);
runSlot(1);
runSlot(2);
と呼び出していますが何故それで function runSlot(n)が実行されるのでしょうか？
0, 1, 2 と n の関係がわからないです

>>418
timers[n] を timers と書いてしまったら [n] がないので区別がつかない（一致しない）のはわかりますが
私には書いている文字が違うから区別がつかないという認識しかありません
なんと言えばいいのかわかりませんが、添え字の[n] がないと何がどういう風に一致しなくなるのでしょうか？

>>419
書いていただいて申し訳ないのですが、どこを見ればいいのでしょうか？

あと、引数の例えで海水の話が出てきましたがこれは合っているのでしょうか？

>>498
あ、いやそういう話じゃなくてさ

$の中にはいっぱい関数があるじゃん
だから>>495みたいな二つを比べてみるなら
見たままじゃなくて、$の中のコードと比較しないと

>>488
それはclassが3つあるし、普通に指定できると思うが

>>499
そこからかー

runSlot が関数なのはわかるでしょ？
関数に()つけて、runSlot() って書くと実行されるのもOK?

この()の中に書いた値は、引数と呼ぶんだけど
その関数が実行されるスコープで参照できる変数になるんさ

function runSlot( n ){ ... }

って書いて関数 runSlot を定義したばあい、実行時に渡された引数は
この関数の中ではnっていう変数名で参照できるんだよ

だから、例えば runSlot(1) って書いて実行した時には
関数runSlotの中では n っていう変数に1がセットされた状態になる

たぶん、まだ>>383のようなコードを見たり書いたりするレベルにないようだから
もっと簡単なコードをたくさん書いて慣れる方が先だと思うよ

>>495
あえて訂正するなら、名前付き関数にしてunload時にremoveEventListenerしてclassListを使うぐらいかな

>500も指摘しているが、君が勧めるjQueryでも内部的には同じ処理をしている事を理解した方がいい
jQueryの内部コードをブラックボックスのまま 理解したつもりで「jQueryが至高だ」と唱えているような危うさを感じる

function myFunc( str ){
　　alert( str );
}

myFunc( 'おはよう' );
myFunc( 'こんにちは' );
myFunc( 'こんばんは' );

こんな感じの

ドットインストール見るのを勧める

>>500
> 見たままじゃなくて、$の中のコードと比較しないと

その目的は？

俺が目的にしているのは
開発時間、そして柔軟性やバグの少なさ。
つまり開発で一番重要なことだね。

君は何を目的に比較してるの？

>>506
そりゃあ、誰のためにプログラム書くのかって考えれば
出来たアプリケーションを使う人のためなんだから
速くて軽くて堅牢なのが一番だと思うよー

開発時間とか、柔軟性とか、そういうのは
その前提をクリアした上での話なんだよ、理想的には

ただそれで稼ごうと思うと、そうも言ってられないところがあるのは認める

>>503
変な人だね。

俺はブラックボックスのまま理解したつもりで
jQuery至高だなんて言っていない。


jQueryを使うメリット、そのコード自体に反論できないから、
人格批判、つまり俺は「理解せずに至高だと言っている人」
呼ばわりしているようにしか見えない。

俺がどうとかいう的外れな指摘ではなく、
ソースコードについて指摘しなよ。

ときどきいるらしい。

頭が固くて、他人が作ったライブラリなんか信じられるか、
バグがあったらどうする？自分で全部作るべきだと言ってる人。

>>508
>ソースコードについて指摘

目的に対してオーバーヘッドが多い

jQuery使ってる連中の中には、内部動作もろくに理解しないで使ってる奴が多いんだよ
そういうレベルの差を意識しないで猫も杓子もjQueryって勧めるのはどうかと
そもそもライブラリというのは常にprototype.jsの時のような危うさを抱えている

>>491
君は論理的に物事を考えられない人なんだね

みんなもちつけ。ここはJavaScriptのスレだ。

>>502
渡された引数は関数内では変数として扱われるんですか！やっと理解できました！
「この関数内では」ということですが、それはこの場合 function runSlot(n) の中では
ということじゃなく一番最初に囲った無名関数内では使えるということでしょうか？

>>508
あなたの要望通り、訂正したんだが酷い言われようだな

> 俺はブラックボックスのまま理解したつもりで
> jQuery至高だなんて言っていない。
jQueryと同じことをしているのに「その書き方はひどい」「jQueryを使ったほうがいい」と指摘しているからそう思ったまで
矛盾してるとは思わないのか？

>>510
オーバーヘッドって何のこと？具体的に。

速度が0.0001秒遅くなるとか？

ライブラリってものは、ごく僅かな速度低下で大幅に開発効率を上げるものだよ。
速度低下があるのは当たり前だから単に遅くなるというだけなら言わなくていい。
最低でもどれくらい遅くなるかを言わないと意味が無い。

そしてメリットがわかっているなら、デメリットだけを言うのはダメ。
メリットとデメリット、両方言わなきゃダメ
「メリットがわからない人」と言われちゃうよ。

>>514
いいやrunSlotの中
このような変数が生きていける範囲のことをスコープっていう
関数の中と外で同じ名前の変数を定義してみるといいかも

var a = 1;

function fn(){
var a = 2;
alert(a);
}

fn();

>>509
ずいぶんと穿った見方だな
このスレ見てると、jQueryを使う人は

「自分が書いたものよりjQueryの方が信用できる」
「自分でいろいろ考えるのが面倒くさい」

こんなタイプだとは思った
「jQuery以外は悪だ」ぐらいの勢いの人がいるのは手に余る

個人的には、こんな単純な事にjQueryを使うのは無駄が多すぎると思うし、勉強目的でJavaScriptを書いてる人にjQueryを薦めるのは取捨選択がおかしいとは思う
それを複雑だと一生懸命に主張してjQueryを薦める人が煽るからおかしなことになっているんじゃないかね
難しいか簡単かは人それぞれの考え方があるんだから、強制するのはよくない

>>516
もうjQueryスレ立ててそっちでやれよお前
あと連投しすぎ

>>515
> jQueryと同じことをしているのに「その書き方はひどい」「jQueryを使ったほうがいい」と指摘しているからそう思ったまで

同じことというのは結果が同じなだけで、
その過程が違っているだろう？

その仮定に対して、その書き方はひどいって
言ってるんだが？

まずはっきりさせておくべきところは、
「自分で書いたところはどこか？」という所。
自分で書いたコード同士を比べよう。

jQueryを使ったコードでは、jQueryのコード部分は「自分で書いた所」ではない。
自分で書いた所は、>>495を例に出せば、前者の6行 VS 後者の3行。

>>516
もうその辺にしとけば？
みんなそんなことはわかってるし、書いたやつもわかって書いてるだろ？

>>518
> 「自分が書いたものよりjQueryの方が信用できる」
> 「自分でいろいろ考えるのが面倒くさい」

jQueryよりも自分で書いたほうが信用できる。
といいたいの？

その根拠は？

jQueryがどこれだけ多くの環境でテストされているのか
知らないわけじゃあるまい？

客観的に見て、信用できるのはどっちなのか
そんなの言わなくてもわかるでしょう？

それから、自分で考えるのが面倒くさいってのはあんたの方では？
自分でコードをガシガシ書くほうが考えることは少なくて楽なんだよ？
既存のライブラリを使って、シンプルに無駄なく書くほうがよっぽど難しい。

言い返したいのであればまず、jQuery使っていいから俺よりもシンプルに書いてみなよ。
実力が伴わなきゃ、何を言っても説得力はない。

>>522
そんなに力説するほど万全でもないけどなｗ
俺程度でもバグレポート送ったくらいだし

力説する程でもないとかどうでもいいよ。
それ、反論じゃないでしょ？

どうでもいい議論。

なぜ自分でコードを書くほうが「自分で色々考えるのが面倒くさい」になるのかというと
自分が知っている技術だけで解決しようとしているから。

つまり新しいことを知ろうとせずに、
努力で解決しようとしているから。

そこで新しいものを使えば簡単に解決するのに、勉強しようとしない。
いわく、楽に解決する方法なんてダメなんだ。

>>522
> jQueryよりも自分で書いたほうが信用できる。
なぜそう穿った見方をするかな
あなたを責めているわけではないし、あなたと議論するつもりもない
客観的に見て思ったことを口にしただけだ
(「jQuery以外は悪だ」の部分は皮肉が入っていたので反省はしてる)

> 自分でコードをガシガシ書くほうが考えることは少なくて楽なんだよ？
jQueryとJavaScript APIを両方習得しているのなら、jQueryを利用したほうがコード量が少なくて考える時間も少なくて済むと俺は思うが、あなたがそう考えるのならあなたにとってはそうなんだろう

出来ればの話なんだが、その自分の考え方と違う人に不必要に煽る振る舞いは何とかならないか
自分と相容れない考え方に出会ったときに否定から入るか肯定的に受け止めるか、で相手の態度が全く違う
あなたがそういう態度を続けるから、あなたと有意義な議論を出来るとは到底思えない事実を認識して欲しい

俺が勉強して知識をつけて理解して、じっくり考えて出したシンプルな答え。

それを見ると何故か、そういう短いコードは
何も考えていない。何も理解していない。
と早とちりするバカが居る。

これだからプログラマーって・・・

> 客観的に見て思ったことを口にしただけだ

矛盾してるってｗ

「思ったこと」である以上、それは主観だ。

どうも自分が正しいと思い込んでるみたいだね？
いいから人の言動にいちゃもんつけるのではなく、
コードそのもので語れよ、プログラマだろ？

人の言動にいちゃもんつけてばかりで
コードについて話をしないから、有意義な議論にならないんだろ？

これからコード以外についての指摘は無しだ。
これなら有意義な議論になるぞ。

たぶんこういう制約をつけると、
言い返せなくなって話が終わるだろうけどね。

言っておくけど、俺は続けるよ。この話題でも別の話題でも。
コードの話しかするつもりはないけど。

この全方位に噛み付く説教くさい人に
ものすごいデジャヴを感じます…

ほらまた、コードの話をしない。
がっかりだｗ

>>364 === >>419 ですね。わかります。

>>534
隠してるつもりはないけど？

見抜いてやってぜ、どうだ参ったか？といいたいわけじゃあるまいし
そのレスをした意味がわからないｗ

ちょっとでも自分が否定されたと感じると全力で守りに入る人の模様
少なからず、その人の為を思ってアドバイスしてくれた人がいただけにご愁傷様です…

>>517
やっとモヤモヤが無くなりました
ということは、あらかじめ引数を与えてやらないと runSlot(1) のような呼び出し方はできないということですね

あと1つお聞きしたいです>>383の関数の中で timers[n] と書かれているのは
timers = []; オブジェクトのことだと思うのですが
ここで n と書かれているのは引数の n と関係があるのでしょうか？
startSlot 関数の中で timers = []; のように空白で宣言する意味も含めて教えていただけると嬉しいです

>>536
だからコードの話をしろよ。

>>522
議論に参加しているわけじゃないんだが、そんなに連投するならトリップを付けてくれないか
どれが誰かわからなくて読みづらい
あなたが連投するせいで他の人のログも流れるし、正直迷惑

>>537
関係あるも何も、引数で受け取ったnそのものだよ

スロットが3個あって、それぞれidの中の数字で区別してるでしょ？
その数字をタイマーで動かすわけだから、タイマーIDも3個必要なのはわかるよね？
だったらタイマーIDも、htmlのidと同じ数字で管理できればわかりやすいでしょ？

数字で区別できる変数って言えば、配列じゃん？
だから、タイマーIDを入れるための容器として、配列timersが定義されてる

timersばかりに目がいっているようだけど
関数runSlotの1行目を見ると
getElementByIdのところでも、同じように変数nを使っているのにも注目して欲しい

startSlotの方でやっているのは、配列の初期化
二回目以降に動かす場合、すでに前に使った時のタイマーIDが入っちゃってるから
これをからの状態に戻してる

俺はトリップ不要だと思ってる。
これで会話出来てるし、同じ人のレスであろうと
違う人のレスであろうと問題なかろう？

いや問題になってるからお願いしてるんだが

実際に話がこじれてるし、そこまで確かな自分があるなら名前があった方が議論しやすいと思うんだけどな

言ってることは正しいとしても性格が糞だから皆表立って同意しにくいし無駄に反論を浴びてるってことが分からないんだろうか
本当に人間社会生きてるのかこいつ？

ちょっと書き込むぐらいならともかく、連投するなら名前があった方が読者に親切ではあるね

てゆうか、ワロス先輩ですよね？

トリップじゃなくても、430前後のようにID出してくれるといいな

そんなに言うのならIDだしてもいいけど。

俺のことが嫌いな奴がレスしてこなくなるって
メリットもあるしね。

（どうしてかというと、あぼーんしてくれるから。
番号が飛んでる所から俺がレスしているのはわかっても
内容はわからない、だから反論もできなくなる）

>>548
ありがとう、助かるよ

フレームワークなどの便利なものはどんどん使え派と
しっかり基礎を理解してから使え派が争うのを見るのは実に楽しい

>>540
ありがとうございました、勉強になりました！

>>550
どっちも「使え派」じゃんｗ

しっかり理解してから使えってのは当たり前の話で
そんな話はしてなく、俺が普通に使ったら、
なぜか、俺が理解してないで使ってる呼ばわりするんだよなｗ

っていうか、なんだろう。初心者には使わせたくない派がいるんだよな。
「お前は初心者だ。だから使うな。（俺は上級者だから使うけどな）初心者に使い方を教えるやつは敵だ」
みたいな印象をうける。初心者にこそバッドノウハウではない
実用的なプログラミングを教えるべきだと思うが。

jQueryやlodashで使われてる関数型風のプログラミングは
クラスリストに対応するために前後に空白を入れてindexOfで検索するなんて
一箇所でしか使わないバッドノウハウよりも、重要で基礎的なプログラミング技術なんだがね。

>>546
誰かと思って過去ログググっちゃった
確かにそっくりだなｗｗワロタ先輩ｗｗｗ

C++でいうところのMFCと似てるな
便利なんだけど、変な機構に縛られるしちょっと外れたことしようとすると途端に行き詰る

行き詰るプログラマが多い

jqueryが内部でどうやってるかを知りながらjqueryを使うのがA級プログラマー

指定した要素がブロックレベル要素かインライン要素かを知るには
どこを見ればいいのでしょうか？

おかしな挙動に合わせてコードを書いたら
いつかその挙動が修正された時に動かなくなるという問題がありますが
どうしたらいいですか

判定するコードいれとけ

　　　　　　　　　　　 _,ノ‐''''''^^^¨¨¨⌒￣⌒^^''¬-､,_
　　　　　　　　._v-''¨｀　　 .,,vｰ─-､　　　 .,,vｰ─-､ .¨'ｰu_
　　　　　　_ノ'″　　 　　./′　　　 ¨┐ .／　　　　 ﾞ┐　 .ﾞ'┐
　　　　 ,／′　　　　　 ./￣''''-¬,,,,__.ﾐ .i |,,,,＿＿_　..）　　　ﾞ＼
　　　 ,/′　　　　 λ 　|　　　　 （ ･ )|　｝　.¨'ｰu,,　　|　　　　　＼
　　 ./′　　 　　　八,､-ﾐ.ノ‐''''''^^￣./¨ﾚ　　　 　　 .人,_　　　　　ミ
　 .,ﾉ′　　　 　._ノＵ'　　 ＼_　　 ._,rlﾄ冖へy　　　_／　 ¨'‐u　　　.ﾞlr
　.,i′　　　　　／ｰ-v､.,,_　　 ¨^^¨´〔　　　 〕.¨^^¨′　　__.,､ ﾞ＼.　 ｛
　〕　　　　　 ./′　　　　.⌒'''''　　　 ＼,,,,,,ノ′　 v-ｰ'''¨　.λ　　ﾞ┐ ｝　　　　＿＿＿＿＿＿＿＿＿＿
　|　　　　　 ﾉ　 .λ───ｰ　　　　　　｝　　　　　 __,,.,､v;（_）ｰ''　 ｛..］　　／
　|　　　　　:|　　 | |　　　　　　　　　　　　.!　　　　　 ｀　　　 　　　　 .｝｝ ＜　きがるにいってくれるなあ。
　｝　　　　 .|　　 .Ｕ-:;:冖^￣　　　　　　 .|　　　　　 ¨¨¨¨¨￣¨¨′ ﾐ｝　　＼
　.|　 　　　.｝　　　　　　　_,,,,,ｖｖl''''¨¨|^^⌒|¨¨''''lｖｖ,_　　　　　　　　 ｝　　　　￣￣￣￣￣￣￣￣￣￣
　 ).　.　　　〕　　　 ,,､-v~|　　 .|　　　|　　 |　 　|''Ｔ＾i-,,_　　　　　　/
　 .｛　 　　　). ., r'z::''''~ﾞ(~~￣￣￣￣￣￣~~~`^^^^''''¬;;;＿　　 ﾉ
　　 ﾐ.　　　 `i,　　　　　　 　　　　　　　　　　　　　　　　　 ,　`''　/
　　　ﾞ).　　　 `i,　　　　　　 　 　　　　　　　　　　　　　　 　　　.,ﾉ　　λ
　　　　＼　　　 },　　　　　′　　　　　　　　　　　　　　　.　　／　　　| |
　　　　 .　＼　　＼　　 　　　　　　　　　　　　　　　　.　　,／　　　　 ∪
　　　　　　 （¨¨¨¨¨¨¨¨¨¨¨¨¨¨ﾞソ冖干ｱ^^^^^^^^^^^^^ｒ'′
　　　 　　／~~~~~~~~i¬冖'''''7′　　　∨¬ｰｰz─-―「＼
　　　　　/　　　　　_ﾉ　　　　　厂¨丁¨¨ﾌ　　　　.ﾐ､　　　　ﾞ＼

>>557
言葉通りに受け取るなら自前でデータリストを作成して判定するしかない
インラインボックス、ブロックボックスの判定という意味ならComuputedStyleを見ればいい

>>>>560
回答する気が失せるのでAA控えてくれないですかね
あなたは適当な回答と思ったのかもしれないが、普通に考えれば>>559しかないと思うがね
あなたの知識範囲でそれが実現できないと思うなら具体的に質問したら？

jQueryとthree.jsを合体させたライブラリ作ったんだけど
こういう場合でも「俺が開発したライブラリ」って言っていいのでしょうか？

他人のふんどしで相撲をとっただけとみられるのか
車輪の新しい価値を見出したと捉えてもらえるものなのか。

合体するためのコードがjQuery、three.jsとはきっちり分離されているのなら、
両者を合体して利用するためのオリジナルライブラリでいい。

分離できてなくて取り込んで修正してる場合は、jQueryとthree.jsのライセンスに従う必要がある。
jQueryとthree.js両方ともMITライセンスなので両者のコピーライト等をきっちり明示しなければいけない。
俺が開発したライブラリと主張するのは苦しいな。

ワロタ先輩はここより知恵袋の方が合ってるんだろうな…

varとletが混在してるのは良くないと聞くのですが
どういう理由でそう言われてるんですか？

なんかはっきり言っておかないといけないのかも知れないから
言っておくと、俺はそのワロタ先輩じゃないよ。
ここで初めて聞いた名前だし。

>>562
jQueryとthree.jsを合体って、何をどう合体させたんだ？
それで何ができるようになるんだ？

当たり前だが、単純にjQueryとthree.jsのファイルをくっつけただけでは
あなたの開発したライブラリにならない。

そして、重要な事だが、jQueryとthree.jsを合体させるときに、
jQueryとthree.jsのコードを修正してはいけない。（例外はあるが）
これはライセンスとかいう話ではなく設計の問題。

モジュール同士の結合度は緩くするのが正しい設計。
元々分離された別々のものなんだから分離できるはず。だから

jQuery ⇔ 結合させる何か ⇔ three.js

という形で結合させるのが正しい。
この「結合させる何か」は通常（jQuery）プラグインと呼ばれるだろう。

そして「結合させる何か」を開発したのは君でいいが、
jQuery と three.js は開発していない。

ﾌﾟｰｸｽｸｽ

>>563
> 合体するためのコードがjQuery、three.jsとはきっちり分離されているのなら、
> 両者を合体して利用するためのオリジナルライブラリでいい。

three.jsのラッパーライブラリとしてthree.jsは修正しました。
著作者表記は残してあります。
jQueryは「jQueryをプラグインとして」使う設計になっていて
完全分離されてます。

>>567
> jQueryとthree.jsを合体って、何をどう合体させたんだ？
> それで何ができるようになるんだ？

WebGLに表示される3Dオブジェクトの生成から操作まで
あらゆることがjQueryと全く同じ記述でできるようになりました。
アニメーションも、イベントも、プラグイン開発も。

あと、JSライブラリとしては多分世界で初めて非同期読込を可能にしました。
つまり、関連ファイル全てのscriptタグにasync属性を付けられます。

> そして「結合させる何か」を開発したのは君でいいが、
> jQuery と three.js は開発していない。

jQueryには直接触れないからいいとして、この
「three.jsのラッパーライブラリ」を開発したと主張するのは
>>563の言うとおり苦しいですか？

> あと、JSライブラリとしては多分世界で初めて非同期読込を可能にしました。

これはよくわからないな。
たとえば、有名なRequireJSは非同期読み込みをするが
それと何が違うんだい？

JSライブラリの非同期読み込みはAMD対応してればできるんじゃないの？

>>569
それラッパーライブラリって言うのか？
three.jsをforkして独自改造版を作ったことだよね？

自分だったら「jquery.three.jsこさえった」って言うかも

そしてとても興味があります
できたら公開して欲しいなー

まあともかく、君が作ったのは、
「WebGLに表示される3Dオブジェクトの生成から操作まで
あらゆることがjQueryと全く同じ記述でできる」ライブラリだよ。

言うまでもないが、jQueryやthree.jsを作ったわけじゃない。
できれば、three.jsは修正しないで実現して欲しいところだが難しいのだろう。

three.jsをフォークして作ったライブラリというべきか。

>>569
three.jsに対する修正とjQueryプラグインの二つの部分から構成されてるのかな？
three.jsに対する修正が必須なのなら、修正を最小限にまとめて本家にとりこんでもらうべく動くべきかもしれない
github上でとりあえずforkして修正した部分を公開して本家にPR投げてみるとか
それで、PR受け入れを拒否されたとしても、その修正版three.jsを前提にしたjQueryプラグインの方を
自分のものだとして公開するのは全然問題無いと思う

>>570
> たとえば、有名なRequireJSは非同期読み込みをするが
> それと何が違うんだい？

RequireJSの場合、RequireJSの読み込み完了後に各ファイルを文字列で非同期取得、依存順で実行
自分のライブラリはライブラリ本体、ライブラリプラグイン、jQuery、JSファイルの全てを
それぞれasync属性を付けたscriptタグで同時にリクエストできて、どの順番で実行されても動作します。

>>572
> それラッパーライブラリって言うのか？
> three.jsをforkして独自改造版を作ったことだよね？

確かに独自改造版です。ラッパーライブラリとは呼べませんか？

>>573
興味を持っていただけて嬉しいです。ただ、リファレンスができてないのでここで紹介しても迷惑をかけてしまいます。
とはいえ、jQueryができる人ならタグ名のチートシートさえあればすぐに使えるのですが。
.click()とか.animate()とか.insertAfter()とかjQueryのメソッドの95%くらいが期待したとおりに動作します。
こんな感じで。
$( "mesh:eq( 1 )" ).click( function() {
$( this ).animate( { … }, 2000 );
} );

>>574
three.jsの修正なしにはjQueryのセレクターエンジンとの連携が難しかったのです。
単に自分に技術が足りないだけかもしれませんが。

>>575
エンジンにthree.jsを使っていますがコードの見た目・動作は完全にjQueryそのものなので本家に取り込んでもらうのは難しいと思います。
jQueryのSizzleエンジン使えることが大きな魅力ですし。

みなさんのレスを見る限り「ただのフォークライブラリ」なんですが、WebGLプログラミングの全く新しい手段であるということが売りにならないですかね？

>>576
売りになるとかならないなんか勘違いしてるんじゃないの？機能が優れてれば自分のものにできるってこと？
three.jsの機能拡張改造版として公開するのは別に問題無いと思うよ
でも、それは丸ごとあなたの著作物ではないってだけのこと

three.jsに対する修正部分とjQueryプラグインの部分すらも分離できてないような感じだけど、
なるべくならそこは分離しとけば、jQueryプラグイン部分の方は自分の著作物だよって主張できると思うんだけどね

>>576
依存関係にしたがってロードしてくれないと逆に使いにくくない？
JSファイルを動かすには、そのライブラリが必要になるだろうし、
そのライブラリを動かすためにはjQueryが必要になるでしょ？

ああ、ロード自体の順番はどうでもいいんだな
自分が依存するライブラリのロードが完了した時点で
自分のコールバックが呼ばれるような仕組みになってればいいわけか

>>577
イメージとしてはjQueryがSizzleエンジンをインクルードした新たなライブラリであるように
このライブラリもthree.jsをエンジンとしてインクルードした新たなライブラリという具合です。
そこにさらに外部のjQueryを必要とするという制約がありますが。

>>579
察しが良いですね。
各JSファイルに非同期対応のおまじない66バイトを記述しておくのです。
ライブラリ本体が読み込まれた時点で依存関係を解消する仕組みです。
jQueryだけはポーリングする以外に方法が思いつきませんでした。

ん？ だからそれがRequireJSでしょ？
ロードの順番は非同期で、
全てが読み終わってから処理が始まる。

RequireJSの優れたところは、
開発時は、ファイルを小さく分けておき、
運用時は、結合して一つないし小数のファイルに
結合することで、読み込み速度をあげられるところだよ。
そこまでやらないとRequireJSよりも優れているとは言えないな。

>>580
読めば読むほどRequireJSの劣化版にしか思えないんだが？
RequireJSを使った場合、AというモジュールがB、C、Dに依存している時、
B、C、Dは非同期で並列に読み込まれて
全てが読み込まれた後にAが実行されるんだよ。

ちなみに、さらにBがCに依存している時、Bは読み込まれるが
Cが読み込まれた後で実行され、そしてCはAとBに2箇所から
参照されていても一回しか読み込まれない。

>>580
sizzle.jsはjQuery Foundation自身が著作権保持者だからああいう形で問題無いんでしょ
three.jsはアンタの物じゃないし、直接中身を修正しちゃってるんでしょ？全然意味が違う。

>>581
RequireJSの場合。（本体を同期取得する場合）
�@RequireJSを同期的にリクエスト
�ARequireJSを実行しRequireJSに依存するJSファイルを同期的にリクエスト
�B �Aを実行しライブラリやJSファイルを非同期で取得・実行　←ここでやっと非同期にできる
�@と�Aをまとめるか、他のプログラムによって非同期処理できれば高速化できますね。

自分のライブラリの場合。
�@ 本体からjQuery、JSファイル、プラグインまでasync属性でいきなり非同期リクエスト

>>582>>583自分のライブラリは本体が依存関係を解消し、jQueryに依存するのは自明なので、各モジュールが「どのプラグインを必要とするのか」という宣言を記述するだけです。
必要とするプラグインが揃った順に実行されていきます。参照元がいくつあってもスクリプトタグが読み込まれるのは当然1回だけです。

RequireJS
優位点　�@汎用性が高い、というか何でも非同期にできる
�AHTMLに記述するscriptタグを減らせる
�B依存されるプログラムが依存するプログラムすらも指定できる
�Cどのモジュールからも利用されないファイルのリクエストは送らない
劣位点　�@本体と依存関係を宣言するファイルをまとめるか他のプログラムに頼らない限り同期処理が必要
�A非同期処理対応で本体圧縮後で15.2KBは重い
�Brequireオブジェクトを扱う記述が冗長

自分のライブラリ
優位点　�@同期処理が基本的に不要
�Aおまじないは66バイト、プラグイン依存関係の宣言はプラグイン識別IDを配列で渡すだけと簡単
�B本体内蔵の非同期処理部分のコードは圧縮前でも1.6KB
�Cおまじないさえ書けば全く関係ないプログラムも非同期処理できる
劣位点　�@プラグインが他のプラグインに依存している場合、プラグイン側で対応が必要
�Aおまじないを書けないjQuery依存のプログラムが他に存在する場合、jQueryのみ同期処理にする必要がある

>>584著作者表記さえ残せばそれを問題なく可能にするのがMITライセンスの魅力です。引用・改変・転売・商用利用なんでもアリです。そして自分のライブラリもthree.jsの著作者表記を残し、MITライセンスで公開します。

非同期通信で画面Aを書き換え、その後submitで画面Bに遷移
遷移先の画面Bからhistory.backで画面Aに戻った場合に
非同期通信で書き換えた部分が元に戻ってしまうのです

history.backで画面を戻した場合、非同期通信で書き換えた画面に
戻る事は出来るんでしょうか？
また戻すにはどうすればいいんでしょうか？

ここを見ろ！見たいなサイトがもしあるようなら、誘導してもらえるだけでも助かります。
よろしくお願いします。

pushStateでググれ

pushState関係ないやん

どこぞの画面から戻って来た時に
画面をJSがごにょごにょした離脱する直前の状態に戻したい
ってことじゃろ？

テキストノードじゃない普通のノードのことを何と言いますか？

>>589
node

ごめんちょっとおかしいか
nodeのなかでもテキストはtextNode、要素はelementNode

エレメントノードですか
ありがとうございました

これはnodeTypeのお話なので
詳しくはおググりください

>>585
こんなとこにごちゃごちゃ書いてないで、まずは公開したまえ。
ライセンスは守ってね。

>>587
>>588
ありがとうございます。
submit前にcookieに変更条件を入れて対応する方法で出来ました。

折角なのでpushStateについても調べてみます。

>>595
最近ブラウザではlocalStorage,sessionStorageがある

http://guron.net/document/content/javascript/tokei3.php
この時計コードの秒を消して、『０３：４８』と、用意した数字画像で表示できる様になりましたが、
最初の『０』を消すのと、AMPMを消す方法が分かりません。

追記です
『０』を消す場合、代わりの画像か何かで、その分の幅を維持したいです。
『　３：４８』になる様に出来たらと思います。

>>598
ちゃんとコードまでは見てないですが

数字を<img>要素を直接貼るんじゃなくて

<span class="number-0">0</span>

のような要素にして、CSSの背景画像で貼るようにする
ほんで、10の位のnumber-0は0の画像ではなく、空白画像にすればいい

AMPMも同様に画像を空白に変えてしまってもいいし
そもそも出力しないようにしてもいい

すいません、難しくて分かりません・・・。
AMPMは削除できました。

書き忘れてましたが、時の先頭の０だけの削除なので、分の先頭の０は残します。
『　３：０１』

>>600
まずこういうのをやるときは1個1個別の画像にしないで0〜9までつながった画像にするんさ

<span class="number number-0">0</span>

.number{
　　display: inline-block;
　　/display: inline;
　　/zoom: 1;
　　background: url(数字の画像のパス);
}
.number-0{ background-position: 0px 0px; }
.number-1{ background-position: 0px -35px; } /* 数字一個の高さ分ずつずらす */
.number-2{ background-position: 0px -70px; }
　　　　　　　　：
こんな風にすれば、<span>要素のclassを書き換えるだけで、<img>と同じように使えるでしょ
そんで、時の10の位のところだけ

<p class="h-10"><span class="number-0">0</span></p><!-- 時の10の位 -->
<p class="h-1"><span class="number-0">0</span></p><!-- 時の1の位 -->
<p class="m-10"><span class="number-0">0</span></p><!-- 分の10の位 -->
<p class="m-1"><span class="number-0">0</span></p><!-- 分の1の位 -->
<p class="s-10"><span class="number-0">0</span></p><!-- 秒の10の位 -->
<p class="s-1"><span class="number-0">0</span></p><!-- 秒の1の位 -->

みたいにして、CSSで

.h-10 .number-0{
　　background-position: /* 空白になる座標 */;
}

ってすれば、時の10の位がゼロの時だけ、空白に出来るっしょ

>>597
http://jsfiddle.net/dE5fU/4/
DOMContentLoadedで呼ぶ

>>585
まあ別にいいけど、それ使う気おきないよ。

ファイルサイズを気にしているみたいだけど、
パフォーマンスに大きく影響するのは数十KB程度の差よりも
ファイルの数＝HTTPリクエストの数なんだ。
だからファイルを結合できなければ意味が無い。
結合したら非同期であることの意味は殆ど無くなる。

最終的に一つになるとして、そしたらscriptタグは一つになる。
scriptタグが複数ある方法である時点で結合できないということであり、
パフォーマンス上のメリットはない。

君はファイルが分割される前提で出来る限りのパフォーマンスを目指しているのかもしれないが、
RequireJSは、最終的に結合される前提で、最高のパフォーマンスを目指している。
その上で開発に便利な機能、たとえば複数のバージョンを同居させるだとか
グローバルを汚さないだとか、AMDモジュールでないものを修正なしに
使えるようにするだとかいった機能をサポートしている。

数字画像を横に０から９まで繋げたものを用意し、
CSSに.numberと.number-0から.number-9までを設定、
二つ目の数値をそれぞれ-24ずつ増やしました。
h-10 .number-0も加えました。

<p class="h-10">〜などはどこに記述すればよろしいのでしょうか？

<script type="text/javascript">
<!--
document.write('<IMG src="0.gif" name="p1"><IMG src="0.gif" name="p2">');
document.write('<IMG src="ten.gif" name="p7"><IMG src="0.gif"name="p3"><IMG src="0.gif" name="p4">');
function jikoku3(){
data = new Date();
hour = data.getHours();
if((hour >= 12)){
hour = hour - 12;
hour2 = hour % 10;
hour1 = (hour-hour2) / 10 ;
}else{
hour2 = hour % 10;
hour1 = (hour-hour2) / 10 ;
}
mine = data.getMinutes();
mine2 = mine % 10;
mine1 = (mine - mine2) / 10;
document.p1.src = hour1 + ".gif";
document.p2.src = hour2 + ".gif";
document.p3.src = mine1 + ".gif";
document.p4.src = mine2 + ".gif";
document.p7.src = "ten.gif";
}
setInterval("jikoku3()",1000);
// -->
</script>

>>603さん
すいません、不慣れなもので、専門用語とかが分かりません・・・・。

ID:LT0eRMxA はID出さなくなったのかな

バカしかいねーな！

YouTubeのページのscriptが一行づつ<script></script>と入れられてるんだけど何のメリットがあるの？

>>604
なぜかみんな「非同期で」という部分ばかりみるけどこれはあくまでオマケ。
このライブラリのポイントは「世界中のjQueryユーザーがそのままのスキルで3DCGコンテンツを作れるようになる」ということ。

当然そうなれば巨大なマーケットが誕生する。何億円ではなく何兆円規模の。
MITライセンスでの公開だから早い者勝ち。
世界中で普及させるのはモチロンだけど特に日本においてはMMDのデータファイルを直接取り込めることが売りになる。
このMMD対応機能はもう１、２ヶ月かかる予定ですがミクをWeb上で躍らせるだけでなくフィールドを歩かせたり戦わせたりできる未来が来るのです。

カメラワークもプラグインがすでに完成しているので簡単に操作できます。
$.flyView( "rdr" );
これだけでマウスが空間を自由に飛び回るコントローラーに変わる。
FPSやエースコンバットのようなカメラワークすらたったの1行で完結するのです。

今日からプログラミングを始める人でもすぐに本格的なコンテンツを作れるから爆発的にWebGLコンテンツが普及するでしょう。
そうなればスマホのWebGL対応も進み、スマホアプリはJavaやObjective-Cではなくこのライブラリを駆使したHTML5・JavaScriptが主流になります。

jQueryとthree.jsを合体させただけだけど、three.jsだと数十行もかかるコードが１行で実現できます。
そもそもthree.jsでは実装が難しかったことも簡単にこなせます。
勝手な妄想と言われるかも知れませんがWebGL・HTML5が当たり前になる未来が来ると思いませんか？

>>611
お前が公開して世に認められるまではここで何を言っても妄想だよ

>>605
どこにって、HTMLの好きなところに書けばいいよ
あとはJSで、もともとのコードが<img>要素を書き換えていたように
<span>要素のクラスを書き換えていけばいい

>>607
わからない言葉はまずググろう
その手間まで教えてくれる人に負わせる必要はないよ

>>611
なぜって、おまえが、「世界で初めて非同期読込を可能にしました」なんて書くからだろ。
公開するときに恥ずかしいことにならないよう、みんな指摘してくれてるんだ。
この辺はRequireJSが有名だけど、非同期読込のためのライブラリっていっぱいあるから
チェックしてみたほうがいい。

>>615
それは素直に申し訳ないです。
みなさんありがとうございました。

「本体含めて依存関係のある全てのスクリプトタグにasync属性を指定できる初めてのライブラリ」ということを言いたかったのです。
情報の伝え方が不正確りでした。本当にすみません。
もしかしてこのテクニックすらすでに存在しますか？

>>613さん
何度か試してみたけどテキストの『0』が縦に並ぶだけなのでギブアップします。
お付き合いいただいて有難う御座いました。

一般的にリリースもしないで云々かんぬん言ってる奴は
眉唾だと思って良い。

>>616
> 「本体含めて依存関係のある全てのスクリプトタグにasync属性を指定できる初めてのライブラリ」ということを言いたかったのです。

本体含めて依存関係のある全てのスクリプトを修正しないと動かないんだろ？
それじゃ使えねーよ。

>>616
存在するよ。

お前は何も出さないけど、
どんなコードかはわかるからな。

>>618
ここでは晒しませんがサイトにて公開しております。
ただ、zipファイルをダウンロードできるだけでリファレンスすらできてません。
プラグイン等の開発協力者と運よく見つけた人向けですね。
MMD（PMXファイル）を取り込めるようになったあたりから宣伝を始める予定です。

>>619
確かに使えないものかもしれませんね。
デザイナーさん達の評価を参考にしながら修正していきます。

>>620
存在するんですか！
実態はどうあれこっちのコードがパクリに見えるようなら戦略を変える必要があるのでそのライブラリを教えていただけませんか？

>>621
まずはお前が最初に出せ。
そしたらそれと同じようなものを言ってやるから。

>>622
要するにスクリプトタグを以下のように記述できるライブラリです。

<head>
<script async src="script/index.js"></script> ←ユーザーのプログラム
<script async src="plugin/plugin.js"></script> ←本体に依存するプラグイン
<script async src="script/webgl_library.js"></script> ←ライブラリ本体
<script async src="script/jquery.js"></script> ←本体が依存するjQuery
</head>

これと同じことができるライブラリが本当に存在するのでしょうか？

>>623
それってさ、各スクリプトがキャッシュに入ってると、
bodyのレンダリング前に各スクリプトの実行が始まっちゃって、普通はあんまりよろしく無いんじゃないの？
スクリプトで描画要素全部作成するとかの用途ならいいかもしれないけど

で、スクリプトで描画要素全部作成する場合ならば有効か？と言われると、
今時のブラウザならasyncとかなくてもscript並べとくだけで
読み込むのは非同期で実行は記述順でやってくれるみたいだから、
はっきり言って意味無いんじゃない？

>>624
> 今時のブラウザならasyncとかなくてもscript並べとくだけで
> 読み込むのは非同期で実行は記述順でやってくれる

おお！これは知りませんでした。
Ironで確認したところ一辺にリクエストを送っているようですね。
これなら全く意味がありません！
重要な情報をありがとうございました！
「一応asyncつけられますよ〜」と軽く解説する程度に留め、独自機能としての宣伝はしない方向で検討します。
この機能はほぼ全てのブラウザが実装していてもおかしくないですね。

>>624含め今までレスしてくれたみなさんのおかげで世界中に大恥を晒さずに済みました。
>>615の言うとおりですね。

> bodyのレンダリング前に各スクリプトの実行が始まっちゃって
ここはjQueryと同じようなDOM構築待機関数を利用してます。

>>625
three.jsはよく知らんけど、jQueryとかけっこうデカイからさ、
DOM構築待機関数を呼び出す前のjQuery自身の定義の処理だってそれなりに時間がかかる
できればその辺もbodyのレンダリング後に動いたほうがいいんじゃないの？

>>626
確かにそれがベストです。WebGLが今まで通りの使われ方をすると想定するならば。
このライブラリで手軽に作れるようになると1ページにおけるWebGLのコンテンツ比率は大きく下がると考えています。

つまり、全画面WebGLが当たり前ではなくなり3D版アニメーションGIFぐらいのノリで使われるようになるということです。
ブログ記事の途中に埋め込まれたり、オークションの出品画像が3Dになったりするでしょう。
極端ですが、自分はFlashに代わってWebGLの小さなブログパーツが公開配布される状況を想定して仕様を決めています。

サイト・ブログのデザインに使われているスクリプトを一切変更しなくて済むように「jQueryの動作については干渉しない」ことを基本方針としています。
ただ、jQueryの用途がWebGLに限られている場合、>>626の処理を選択できるという機能はあってもいいかもしれませんね。

余談ですが、three.jsは圧縮後410KB、自分のライブラリはthree.jsの一部機能を削り圧縮後256KB+jQueryで公開しました。

オークションの画像が3DはWebGLの役目ではない
設計図があるもので組み立て予想図を3Dにということであればまだ可能性はある
そして単純な3D版アニメーションはCSSのカスタムシェーダーを静的に用意しとくもの
毎回作るものではない

あと依存関係解決は既存のものを流用せよ
１つのライブラリに毛色が違う機能を載せるべきではない
ES6モジュールも待ってるし、もう新しいものは必要ない

最後に、構って欲しいんなら最初から
自作ライブラリを評価してもらいたいのですがといってソースを公開しろ
それをしないとお話にならない

あと仮に素晴らしいものであったとしても
ライブラリの宣伝は１００％スレチだから
質問者なんだから意見を真摯に受け止めるだけにしろ

うざいから誰も聞いてない、聞きたくもないことまでペラペラ喋らなくていい
ここは質問スレだから、雑談ならプログラミング技術板のJSスレでやれ

>>628
> １つのライブラリに毛色が違う機能を載せるべきではない
この言葉で何だか目が覚めました。
WebGL関連はどれもファイルが重いので苦肉の策として編み出した小細工がいつの間にか自分の中で大きな意味を持つようになっていました。
純粋にWebGLライブラリとしての道を歩かせることにします。
ありがとうございました。

みなさん色々構っていただき感謝してます。ネットでもコミュニケーションが取れると嬉しいものですね。
それではまた。

>>609
クレタ人乙。

>>630
なに貰ったの？

画像だらけのデザインよりもフラットデザインの方が良いと思うが、何かと視覚効果付け足して重くすんのやめとくれ。

JavaScriptをブラウザを介さずに直接ネイティブアプリを作りたい。

そういうときに使うのが、node-webkit

HTAって呼ばれたオワコンもあるで

htmlを使わずにCとかJavaのごとくアプリケーションを作りたい

HTMLつかわんのならCとかJavaでええやん

>>636
それできるよ。
CLIでいいのならnodeなどでできるし
GUIアプリであってもたとえばGTKとか
JavaScriptバインディングが存在する。

サイト上の画像全てのリンクを貼るブックマークレットが上手く書けません。2つ目の画像からリンクが貼れず、サイトのhtmファイルがDLされます

/* NodeList取得 */
var imgs = document.images;
/* URL用配列 */
var urls = [];
/* URLをNodoListから取得 */
for(var i=0; i<imgs.length; i++) { urls[i] = imgs[i].src; }
/* aタグのonclickで呼ぶ関数を返す */
function Memorise() { var i = 0; return function() { document.getElementById('download').href = urls[i++]; }; };
/* 上の関数を代入 */
var Download = Memorise();

/* 各URLを貼る */
for(var j=0; j<urls.length; j++) {
var a = document.createElement("a");
var str = document.createTextNode("image" + j);
a.appendChild(str);
a.setAttribute("download", "image" + j);
a.setAttribute("href", "#");
a.setAttribute("id", "download");
a.setAttribute("onclick", "Download()");
document.body.appendChild(a);
var br = document.createElement("br");
document.body.appendChild(br);
}

話は変わるけどさ、ブラウザの開発者ツールで
ページ上の画像全部見れるじゃん？
あれ、まとめてダンロードできないのかな？

主なブラウザでCtrl+SでWebページ完全を選ぶとファイルを全部落とせる
>>639
setAttribute使うな。idが同じ要素を2個作るな。イベントを文字列で貼るな。
for(var a="",b=document.images,c=0,d=document.createElement("div");c<b.length;c++)a+='<a href="'+b[c].src+'">image'+c+"</a><br>";d.innerHTML=a;document.body.appendChild(d);

>>641
そういうのとは違うんだよね。

まとめてって言っちゃったから俺が悪いんだけど、
必要な物だけ選択して簡単に落としたい。

Chromeの開発者ツールで、画像リストを表示して
移動しながらドラッグ＆ドロップでもかなり簡単だけどさ。

昔の開発者ツールが貧弱だった頃は
ひどかったな。

サイト側が意地でも画像落とさせないように
右クリック禁止してURLに直接アクセスしても
だめなように、リファラーみたいりクッキー使ったり。

今は開発者ツールで解析し放題だけど。

>>641
setAttribute使っちゃいけない理由ってなんですか？

JSONファイルの読み込みと参照について質問です。
以下の様なコードを書き、JSONで読み込んだ値を配列にして
取得したいのですが、上手く出来ません。

onload内で取得しているから外部参照出来ないのだと思いますが、
出来る方法があれば教えて下さい。


obj = new XMLHttpRequest();
obj.open("get", "json.txt", true);
obj.onload = function(){
var names = [];
var myData = JSON.parse(this.responseText);
for (var i=0; i<myData.item.length; i++){
names[i] = myData.item[i].name;
}
alert(names[0]);//表示される
}
obj.send(null);
alert(names[0]);//表示されない

>>645
loadではなくreadyStateChangeで

というか、Ajaxのやり方でググればそのへんのサンプルはうじゃうじゃあるから
うまくやってるところを参考にしてくだされ

>>645
同期処理にすればお望みの動作になりますが、読み込み完了するまで処理がとまるので良い実装とはいえません。
通常はcallback関数内で処理します。

非同期処理ではまるひとおおいよね

>>646-647
朝からずっとやってるのですが、全く理解できずにいます。
「javascript XMLHttpRequest Ajax」とかでもググったのですが、
理解が全く追いつかず、頭がパンクしそうです・・。

もう限界に近いので諦めます。アドバイスありがとうございました。

>>649
obj.onloadに渡した関数が実行されるのは
最後の行のalert(names[0]);が実行されるのより
はるかにはるかに後なのだよ

>>646
readyStateChangeで解決する問題ではないのでは？

>>649
下記参照
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest#open()
http://ossforum.jp/node/753

IEはどのバージョンから対応させたらいいですか？
8？9？10？

>>651
誤解を生む書き方ですまぬ…すまぬ…

調べたらいまだにIE8が最大のシェアなんですね
あほかと

XPが8までだからね
しかたないね

JavaScriptポケットリファレンス第五版には
rangeやselectionの説明もありますか？
今持っている第四版にはないようです

>>654
一般的な統計はあくまで参考値じゃろう
サイトごとにアクセス解析した結果を重要視したほうがいい

javascriptを一から勉強したいのですがおすすめの書籍とかホームページとかってありますか？

何のためにjs勉強するの？

さっき紀伊國屋行ったらJSの本がすごく減ってた
JSはオワコンなのか？

エロ画像を落とすブックマークレットつくるとか？

その手の本はすぐ古くなるし
ネットで調べた方が新しくかつ充実した情報が手に入る場合が多いので
売れなくなってるんだろう

>>658
ドットインストールっていうサイトの動画を見る
ここで基本は学べる
あとhttp://uhyohyohyo.sakura.ne.jp/javascript.htmlとかもいいかな

文章をおすすめする。長いコードを読めるようになるには長い文章から読めばいいんじゃないかな。コピペして改造を繰り返すのも簡単。最初のうちはエラーに気づきにくいしね。

IE8ってindexOf使えないんだ・・（呆れ

>>658
http://www.codecademy.com/learn

英語に抵抗無かったら、実際にタイプしながら覚えるサイト
凄く良い

>>660
> さっき紀伊國屋行ったらJSの本がすごく減ってた

売れてるってことじゃないの？
逆に流行ってる証拠だと思うけど。

本なんて絶版にならないかぎり
無くなるわけないんだし。
本屋にないのならそれは売り切れってこと。

売れたら補充されるだろ
置き場所自体が減ってるんだよ

>>659
chromeの拡張を作ってみたくて調べた所javascriptの知識が必要なようなのでこちらから勉強しようかと
他にも色々使えるようなので覚えていてそんはないだろうと思いまして

>>663
ドットインストールは前に使った事がありますがほんとに基礎の基礎だけ理解するならいいですよね
下のURLのページいいですね
ありがとうございました

>>666
英語にはとくに抵抗ないので参考にさせてもらいます

selectionオブジェクトを見ていると
複数の文字列を同時選択できるようですが
この機能は使われているのでしょうか？
今までそんなの見たことがありませんが

>>667
紀伊國屋くらいの大きな本屋だと、普通の書店とは法則が違うのだけど
「JSの本を本屋で買う人が減った」というのが正しいかもしれないね

Amazonで買う奴が大半だと思うが

>>670
Firefoxは対応してる
addRangeで複数の範囲を選択できるし、
ユーザー操作ならCtrlキーを押しながらドラッグ
検索エンジンに投げるときに便利

ただ単に2000年代後半からのJS再入門ブームが終わっただけ
その代わり今は中級者向けのスタイルやアルゴリズム本が結構出てきてる
WebAnimationAPIとかが揃ってHTML5が名実共にしっかりしてくる
＆ES6が思う存分使える2010年代後半からまた出るようになるよ

>>668
> 売れたら補充されるだろ
補充されるまでにはタイムラグがあるよ。
マンガじゃないんだから、そんなに大量に
仕入れたりしない。

>>673
ありがとうございます
実際に使われているんですね
選択をサポートする場合対応すべきか、悩ましいところです

range操作の結果が自動的にselectionに反映することはない、で合ってますか？
どうもこの二つの関係がいまひとつ分かりません

>>677
rangeは単にDOMツリー内の範囲を表すオブジェクト
selectionに追加することでUIに反映される
selectionに追加されているrangeを操作したら、UIにも自動的に反映される
getSelection().getRangeAt(0).selectNodeContents(document.body); // 全選択

こうか
var range = document.createRange();
getSelection().addRange(range);
range.selectNodeContents(document.body);

どっちにしろ動くのFirefoxだけだった
「selectionに追加されているrangeを操作したら、UIにも自動的に反映される」は間違いか

jsbin、URLの発行がなくなってる
これじゃ人に見せられないじゃん

セーブしたらでけた

>>680
確認しました
chromeではならないんですね
ありがとうございました

でもオブジェクトは参照渡しなのだし、
自動的に反映されないのならreflesh的なメソッドが必要ですね
このいまいち完成度低い感じが分かりにくい原因かと

参照の値渡しな
参照渡しだったら大事

何故かfirefoxだけdebuggerが効きません
console.logを入れたら関数自体は実行されていることが確認出来ますが、
debuggerで止まらないのです。
ただ、debuggerを関数の外に起動します。
しかし、デバッガで見たいのはイベントハンドラの中なのです。
どんな原因が考えられるでしょうか？

関数の外に起動します。
→関数の外に出したら起動します
でした

下記のようなソースで「Index」の値を
「BBB」にも使用したい場合はどのようにしたら良いでしょうか？
どなたかアドバイスお願いします

function AAA(index) {
Index = (Length + index) % Length;
var p = itemWidth * curIndex;

}
function BBB() {

}

function AAA(index) {
Index = (Length + index) % Length;
var p = itemWidth * curIndex;
function BBB() {
}
BBB();
}

>>686
そりゃ、イベントが発生してないんじゃろ

すみません
688です。
下記のようにソースを使用したいです。
わかりにくくて申し訳ありません

function AAA(index) {
Index = (Length + index) % Length;
var p = itemWidth * curIndex;

}
function BBB() {
if(Index == 1){
setInterval(function(){
AAA(Index + 1);
}, 1000);
}else{
setInterval(function(){
AAA(Index + 1);
}, 1000);
}
}

var Index;
function AAA(index){
//省略
}
function BBB(){
//省略
}

var Index;

ではいかんの？
あと、Indexとindexはなかなか凶悪な間違いやすさ

idxって略したりするね俺は

>>685
「参照の値渡し」とは何でしょうか。
「参照渡し」は理解できますが、両者の違いがわかりません。

>>691
Length とか Index とかグローバル変数を多量に使う実装は予期せぬ不具合を生むので好ましくないと思う
普通に引数で渡せばいい気がする

>>695
「参照渡し」を本当に理解してるのかな。参照渡しを採用してるFORTRANの場合。
integer x
call sub(x)
stop
end
subroutine sub(y)
y = 10
return
end
これで変数xに10が入る。つまり呼ばれた側で引数を書き換えると
呼んだ側の変数が書き変わってる。JavaScriptではこれはできないよね。

>>696
こんなふうに閉じ込めればよくね？

var hoge = {
　　Index : 0,
　　Length : 1,
　　AAA : function(idx){
　　　　略
　　},
　　BBB : function(){
　　　　略
　　}
};

686の件ですが、
読み込んでいるライブラリでエラーがあったようで色々いじってるうちに治りました
ただ外部ライブラリのエラーメッセージは表示されなかったような？
なんかfirefoxのデバッガはよく分かりません
ありがとうございました

Firebugは使いやすいと思うけどなー
あと、レス番号の前には「>>」をつけてくれるとおじさん嬉しい

JavaScript初心者用のおすすめ教本ってありませんか？
今読んでる本はgetElementByIdなどの説明がかなりおざなりなので…

はじめはMDN読んどきゃまず間違いない

getElementByIdについてのおざなりな説明が全く想像つかない

innerHTML以外にHTML書き換えの方法はありますか？どのサイトもinnerHTMLばかりのっけちゃってて

DOMで書き換えるのがふつうで、innerHTMLは後から来たお気楽という印象。

getElementByIdなんてほとんど説明することないだろ
そのまんまやん

要素idを取得します
これで十分

>>697
申し訳ありませんが、FORTRANは読めません。
私の理解ではECMAScriptではプリミティブ型は値渡し、Object型(参照型)は参照渡しになります。

どちらかが「参照の値渡し」をさすのでしょうか。
参照渡しがないということなら、参照渡しの理解が間違いで 「参照の値渡し」が正しいのでしょうか。

>>707
間違ってるやん

使えるようになるタイミングが
jquery標準のonReadyより遅いライブラリがあります
どうしたらいいですか？

var a = { value:1 };

function foo(x){
var y = { value:2 };

}

var a = { value:1 };

function foo(x){
x = { value:2 };
}

foo(a);
console.log(a);
参照渡しだったらこれでvalue:2が出力される

エンジン内部的には小さい整数以外は全部イミュータブルなオブジェクト扱いだよ
メモリ配置もそうなってる

A:値渡し （ラベル付き）[Number:Smi]
B:参照の値渡し [Object]
C:複製後参照の値渡し [その他]

つまり本当に値渡しなのはSmiだけだけど、外からはCとAは同じように見える

もしvalue:2を出力したかったらこう書く
var a = { value:1 };

function foo(x){
x.value = 2;
}

foo(a);
console.log(a);

参照渡しの場合
変数aが参照しているデータ({value:1})を変更できる。
変数aが違うデータ（{value:2})を参照するように変更できる。

参照の値渡しの場合
変数aが参照しているデータを変更できる。
変数aが違うデータを参照するように変更できない。

質問した人とは違うけど分かったぞ
参照渡しは、たとえばaという変数自体の参照を渡す
だからaという変数の内容を書き換えることができる
参照の値渡しは、aという変数が指しているオブジェクトの参照を渡す
だからオブジェクトを書き換えることはできるが、変数aの内容を書き換えることは出来ない
こういうことだろう

参照の値渡しって言葉おかしくね
値の参照渡しと言うべきでは？

あるオブジェクトを指す変数aのメモリ内内容
名前＝a
値＝オブジェクトのアドレス

i) 参照渡し
変数aの「値」のアドレスを渡す

ii) 参照の値渡し
オブジェクトのアドレスを渡す

こんな感じだろ
「オブジェクトのアドレス」は参照に他ならないから
参照の値渡しでいいのかなぁ。。

てか値の参照渡し＝普通の参照渡しか
だから参照の値渡しでいいんだ
＼(^o^)／ﾊﾞﾝｻﾞｰｲ

参照って言葉が紛らわしい
c言語でポインタの説明を見たほうがいいと思う

>>718
こうじゃね？
i) 参照渡し
変数a自身のアドレスを渡す

ii) 参照の値渡し
変数aの値を渡す

要するにJSではポインタのポインタを引数渡しできないって話だろ
C的ポインタ概念導入するとあちこち破綻しそうだから無理じゃね
クロージャで何とかするしか無さ気

ボインのボインは渡せないんや

おまえら釣られんなよ
参照の値渡しなんて言葉はない

wikipediaにあるけど？はい論破

wikipedia で参照の値渡しで検索しても出てこなかった
はいロンパールーム

引数の項にあるよ
はい論破

英語だと
pass by objectとか
pass by sharingとか
pass by value(of reference)だな

引数の項にあったよ
はいダンガンロンパ

rangeオブジェクトの内容をプレーンテキストにし、
その際<BR>タグは改行にしたいのですが
どうやればいいでしょうか

>>478
この件ですが、ここを読んでいると、
http://uhyohyohyo.sakura.ne.jp/javascript/8_1.html
offsetというのはchildNodesのインデックスを示すのではなく、
ノードとノードの間の点を示すと書いてありました
だから要素の添え字範囲をoffsetがはみ出るのはバグではありませんでした

このサイトは非常に分かりやすくていいです
オライリーより分かりやすいのではないでしょうか

>>730
具体例がないと意図が伝わらないと思います

ようは、そのHTMLが表示された時のテキストを得たいということです

hoge<div>moge</div>poge<br>page

だったら

hoge
moge
poge
page

というように

>>734
rangeオブジェクトは関係ないってこと？

よく考えたら関係ありませんでした

IEのinnerTextがそんな感じなんだっけ？

divタグとbrタグを正規表現使って改行コードに置き換える

あるdom要素を引数にその子要素を探索して文字列を拾って返す再帰関数を書くとか

herlockてどうなの？monacaはwebviewだてどhrelockはOpenGLと音楽やらのAPIが充実してる

bootstrapってどのくらいjQueryに依存関係あるの？

30%くらい

なるほどサンクス

buttonを押すとtable（2行*3列）の2行目を表示/非表示というものを作っています。
そしてtable2行目の左のセルにはcolspan="3"を設定しています。

しかしJSで再度2行目を表示した時にcolspan="3"が無効になるようで、
setAttributeで対処しようと思いましたがうまく行きません。
コンソールログにも何も表示されません。
どのようにすればよいでしょうか？
chrome、firefox、ieで試しましたがどれもダメでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<script>
function toggle(){
if(document.getElementById("tr1").style.display=="none"){
document.getElementById("tr1").style.display="block";
document.getElementById("td1").setAttribute("colspan","3"); //これが効かない、エラーも出ない
} else{
document.getElementById("tr1").style.display="none";
}
}
</script>
</head><body>
<button onClick="toggle()">toggle</button>
<table border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr id="tr1"><td id="td1" colspan="3">4</td></tr>
</table>
</body></html>

>>744
trはblockじゃない

>>745
以下でできました！ずっと違うとこを見ててハマってしまっていました。ありがとうございました。
document.getElementById("tr1").style.display="table-row";

function toggle(){
　if(document.getElementById("tr1").style.display=="none"){
　　document.getElementById("tr1").style.display="";
　} else{
　document.getElementById("tr1").style.display="none";
　}
}

>>747
指定なしだとデフォルトになるんですね…何も指定しなくてよかったんですね…
勉強になりました、ありがとうございました。

var elem = document.getElementById("tr1").style;としましょうね

>>734の件ですが、再帰でパースするようにしたらうまくできました
ありがとうございました

JavaScriptオブジェクトにeasterEggというメソッドを発見した。ネット上で調べたけど出てこない。
これは誰が仕込んだんだろうか？・・
構文:
easterEgg: function () {console.log("IF YOU SEE THIS, YOU MUST BE AN AWESOME JAVASCRIPT HACKER!");},
結果:
> console.easterEgg()
IF YOU SEE THIS, YOU MUST BE AN AWESOME JAVASCRIPT HACKER!

画像 http://i.imgur.com/VEY6nnJ.jpg

console.dirでオブジェクトを調べた

chromeにはないけど？

Firefoxにもなかった

iOSのJS Consoleっていうアプリの中だけ？Safariでコンソールは使えないから確かめようがない

アプリが実装してるんだろうね
JSエンジンを一社が独占で作ってるわけじゃないし
仕様書にないものを入れ込むわけない
PHPにも昔イースターエッグがあったな

>>756
なるほど。やっぱりそうゆうことあるんだ。

まあコード見てて分かったけどJSの内部もほとんどJsで構成されてるんだな。そりゃ自由度が高いわけだ。

確かにconsole.dirでgoogleのシステムを見学させてもらうと暇つぶしにはなるな。googleっていうオブジェクトの中に色々な処理をぶっこんでる。

>>751
おめでとう！
AWESOME HACKER のお墨付きだね

http://jsperf.com/createinputbutton
innerHTML+=がめちゃくちゃ遅いのは書き方が悪いんでしょうか

>>761
innerHTML+=は実行する度に対象の要素の子孫要素を破棄、
innerHTMLを再パース→要素作成が行われるから、圧倒的に遅くなる

>>762
こんな時間にありがとうございます
さっそく+=で書いていた部分を改めようと思います

+=よりjoinの方が早いと聞いたことがあるような・・

普通は文字列を完成させた後に最後に一回だけinnerHTMLに突っ込むんだよ

>>1
オブジェクト指向は愚かな考え。排便メソッドを実装した人間クラスから美少女クラスが作れない。
http://toro.2ch.net/test/read.cgi/tech/1393660194/49

再帰関数の中でそれが最初に呼ばれたものなのか、
再帰で呼ばれたものなのかを判定するいい方法はありませんか？

>>767

function a() { // ← 最初
　function b() { // ←二回目以降
　　b();
　}
　b();
}

>>767
>>768が解だと思いますが、それは再帰する必要がありますか？
for, while 文で十分ではないですか？

再帰はループに書き直せるってのは常識
ループで書くよりわかりやすい場合に再帰を使う

>>767
そういうときは最初に呼ばれるのと再起用のを分けて書けばいいんじゃない？

再帰呼出し時には引数を付けて判定したらいい
function hoge(a,b,recursive){
if (!recursive){
//1回目
} else {
// 2回目以降
}
}

>>772
再帰回数にもよるが、毎回判定コストが発生するのでお勧めしない

毎回関数生成のほうがコスト高くないか

>>774
毎回関数生成する必要はないと思うが、何の話？

元関数を呼ぶたび毎回生成されるが？はい論破

元関数を呼ぶたび毎回生成されません。はい論破

>>776
それは「関数呼び出し」のコストなのでは？
関数生成コストというなら「new Function」や「var fn = function () {};」を想定する。

768のコードだとaを呼び出す度にbが実体化される
bの定義を外に出せばいい

おまえらみんなロンパールームに行ってろ

>>779
そういう意味か
理解した、ありがとう

>>774が「>>768の毎回関数生成のほうがコスト高くないか」ならもう少し考えたんだが、>>772だけ読んで判断してた
bの定義を外に出せば、>>768の方がコストが安いのは明らかだから意見としては変えないけどね

対象を省略するのは最近の文化なのか
ゆとり世代に「もう少しちゃんと説明しろよ」と思うことはよくあるが、エスパー力を試されているようでいい気はしない

毎回関数生成すると思ってるなら
こう書けば安心するだろ。

function a() { // ← 最初
　var b = function () { // ←二回目以降
　　b();
　}
　b();
}

っつーか説明の為に簡潔に書いてるんだから、実践するには適宜読み取れって話でしょ。

適宜読み取った結果、関数呼び出しコストと勘違いされたんだろ

生成コストがとかいいたいなら
まずベンチマークでもして証拠を出さないとダメでしょ。
遅いかもしれませんじゃ誰も信用しない。

>>767
1回目を判定したいなら、これで十分だと思うが…。

function a() {
　b();
　while (条件) {
　　b();
　}
}
function b() {
　// 処理
}

・>>768における function b の生成コストは発生するとしても1回だけ
・>>772は毎回判定コストを払う上に function hoge の生成コストは初回に払ってる

しっくりこないのでベンチマーク待ち

再帰に関する話題は別に js に限った話じゃないよね
js に特有の再帰を最適化するための機能ってあるの？

for, while はJITで最適化されているという話を聞いたことがあるが、再帰も最適化されてるのだろうか

再帰と言えばスタック消費というイメージだけど素人っぽいかな