+ JavaScript の質問用スレッド vol.123 + [転載禁止]©2ch.net

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.122 +(c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1420095379/

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

■テンプレ案
http://fiddle.jshell.net/fH4cC/167/show/light/

■関連スレ
ECMAScript デス 4
http://peace.2ch.net/test/read.cgi/tech/1325448978/
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400834117/
Webサイト制作初心者用質問スレ part244 [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1421469214/
CSS初心者スレッド＝12th＝
http://peace.2ch.net/test/read.cgi/hp/1343429848/
Canvasについて語ろう
http://peace.2ch.net/test/read.cgi/hp/1305093769/

■FAQ
http://fiddle.jshell.net/vSqKr/43/show/

■開発者ツール(Developer Tools)の基本的な使い方 (全部は http://fiddle.jshell.net/vSqKr/43/show/#Browser-Developer-Tools )
◆諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- IE9- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
　 https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
◆要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
　　- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
　　- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
　　- [Properties] タブ … 選択したDOMノードのプロパティを表示
◆コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。)

■各種仕様 ( http://fiddle.jshell.net/vSqKr/43/show/#Link も参照 )
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
https://web.archive.org/web/20140715002617/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://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
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
◆ MSDN Library
https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
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 Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html

■諸注意
vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の質問はvol.116から禁止されました。
vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。
本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。
ライブラリの質問はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。

>>1
お疲れ様
これでようやく平常運転できるな

tdの中にちっちゃいtable入れるのってあり？

おつ

>>7
なんでJSスレで聞くのかわからんが別にいいんじゃない
昔はTableでレイアウトして中にTable入れるHPとかいっぱいあったろうし

"eval関数はローカルスコープ中のJavaScriptコードの文字列を実行します。"
http://bonsaiden.github.io/JavaScript-Garden/ja/#core.eval

"Indirect Call" に触れていない事を顧みるに、JavaScript Garden の説明は ES3 の規則に準じているんだな
今となっては誤解を招く気がするが、evalを使うべき理由は特にないから弊害はないか...

ごめん、忘れてくれ
文中では明確に書かれていないが、コードを読むとグローバルスコープで実行する様子が説明されているな

evalとかonclickに文字で動作を書くのはやらないのが吉

次からはスレ立てはID出してやるのがいいかも。割り込みの判断できるから

>>13に加えて下記もテンプレに加えて欲しいな
・次スレは900-950辺りで
・荒らしの立てたスレは無視
一見さんはどこに行くべきか間違いなく迷うから荒らしがスレを乱発することについても注釈があると良さそう

他のスレ荒らすなゴミ

！！！　注意　！！！
ここは荒らしが立てたスレです。
質問は以下の真の現行スレでお願いします。

+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1422084185/

このように他人を惑わす行為を平然とするので見分け方はテンプレに書いてあっても良さそう

あんまり構いすぎても喜ぶだけだから今の>>5だけでいいよ

荒らすなって言ってんだろ

！！！　注意　！！！
レス数を見れば分かるように、ここは荒らしが立てたスレです。
質問は以下の真の現行スレでお願いします。

+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1422084185/

Math.random()って偏りがあるんですか？

---
欠点
シングルトンがある場合、往々にして、システム内のモジュール同士が密結合していたり、 ロジックがコードベースのあちこちに散らばっていることを示します。
隠れた依存関係があること、複数のインスタンスを作成するのが困難なこと、依存関係をスタブで表現しにくいことなど 様々な問題により、シングルトンのせいでテストがより難しくなることがあります。
http://blog.yuhiisk.com/archive/2014/09/21/javascript-pattern5.html
---

この理屈に納得できません
「シングルトンがあるからモジュール同士の依存関係が出来る」となぜいえるのでしょうか

このスレで質問してはいけません
荒らしが立てたスレで質問する者は荒らしと見なします

線形合同法でググれ

質問が荒らしスレにコピーされてる
質問者はID出し推奨かもね

test

-[]って使い道ある？

ここは荒らしが立てたスレなのか
正しいスレで質問しなおしたのでよろ

勝手にマルチポストされているようなのでIDを出しておきます

前は回答もつけてたのに今はボロが出ないようにコピペだけかｗ

>>28
成りすますのはやめて下さい
IDを出しても何も証明されてませんから

挑発的で傲慢な態度は荒らし

>>30 >>29

このスレで回答してくれるのは恐らく荒らしだけなので、回答が付かないようであれば移動することをお勧めします。

警告ありがとうございます。
回答が付かなければあちらのスレでも質問させていただきます。

忠告は不要です
自分の判断でどうするか、決めます

逆に言えばライブラリ推奨の人はコピペだけでなく回答もまた考えればいいのに

ライブラリの勧誘に繋がらない質問には興味ないからね

>>22
それ難しい話だよな。

そこに書いてあるけど「往々にして」なんだよ。往々にして

確かにシングルトン使っても依存関係を無くすことは出来る。
だけどそもそもシングルトンにする意味がないんだよな。

つまりインスタンスを一個に制限する必要がない。。
おそらくどんなものでもインスタンスは複数作成可能になっていて問題ない。

例えば単体テストの場合はシングルトンの代わりにスタブを使う。
そのテストでは生成したスタブを使いまわしたりしない。
毎回生成することで、前の状態を持ってないクリーンな状態にする。
これがシングルトンと相性が悪い。

そしてシングルトンにすると、どうしてもグローバル変数的に使ってしまうんだよ。
どこからでもアクセスしちゃうから、あるモジュールからシングルトンオブジェクト使っちゃえと。
そうすると、各モジュールとシングルトンなオブジェクトが結合してしまう。

シングルトンを使っても正しく理解して（正しくっていうのはグローバル変数的に使わないことね）
間違わなければいいんだが、シングルトンの問題点を理解できるぐらいの人は、シングルトンを使おうと思わない。
シングルトンの問題点を理解できずにない人は、使い方を間違って依存関係を作ってしまう。

だから「往々にして」ってことなんだよ。

>>36
> 逆に言えばライブラリ推奨の人はコピペだけでなく回答もまた考えればいいのに

書いてるぞｗ

長文があったら俺だと思えｗ

>>39
長文だけで本人証明されてもね
そんなに自己主張したいならトリップを付ければいいのに

>>40
意見を言いたいだけで、
自己を主張したいとは思ってないので

>>41
その意見が信頼されたいとは思わないのね
確かな知識で同じ人が回答を続ければ、見知らぬ人が回答するよりもずっと信頼される
ボロが出たら途端に信用を失うから自信がない人には無理な芸当だけどね

その意見は全員を敵に回しかねないぞ

>>43
気楽に回答したい人もいるだろうし、敵に回すことは無いと思うけどなあ
「オレオレ俺だよ」みたいな自己主張が激しい人には>>42の感想を持つけど、全ての人がそういうわけでもないし

>>38
> そしてシングルトンにすると、どうしてもグローバル変数的に使ってしまうんだよ。
それはグローバル変数による弊害であって「シングルトンの欠点」とはいえないのでは？
インスタンスを一つしか生成できない(というより、インスタンスが存在しない)からこそ、シングルトンは制限された環境で使うべきだと私は思いましたが
グローバル変数云々の依存関係は自己管理できていない事が主理由であってシングルトンでなくても発生する問題だと思います

aが1だったらbに2を代入、aが1でなければbに3を代入、ということをしたいのですが
var b = if ( a == 1 ) {
return 2;
} else {
return 3;
}
ふわふわした感じですいませんが、こういうようなことは出来ないでしょうか
こういう時は関数を作るしか無いでしょうkあ

三項演算子？

>>47
おー！それです、ありがとうございます。三項演算子と言うんですね、記号で検索できずに困っていました。
http://ja.wikibooks.org/wiki/JavaScript_If%E6%96%87%E3%81%AE%E5%BE%A9%E7%BF%92%E3%81%A8%E3%80%81%E4%B8%89%E9%A0%85%E6%BC%94%E7%AE%97%E5%AD%90

canvasのサイズが何故か300*150固定になってしまいます。
cssなどで見た目は変わるのですが、内部的には300*150のままのようなのです。
そしてcanvasに描画などをすると、色々とずれてしまいます。
解決方法ご存知のかた、教えて下さい。

<html><head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$("canvas").width("500");
$("canvas").click(function(){alert(this.width + ", "+ this.height)});
});
</script>
</head><body>
<canvas></canvas>
</body></html>

>>49
canvasの内部サイズは作成時のwidth,height属性で決まる
jqueryでcanvasを作成しろ

>>50
なるほど、ありがとうございました。
これで行けました。
$("body").append($('<canvas width="200" height="200" ></canvas>'));

style属性だとダメでした。
$("body").append($('<canvas style="width:500"></canvas>'));

難しい

>>51
> $("body").append($('<canvas style="width:500"></canvas>'));
CSSプロパティは 0 を除いて単位を省略出来ない

>>52
それはそうだがこの件には関係無い

>>53
style属性で期待通りに動かない理由を教えただけで「関係ない」とは随分な物言いだな

>>49
まだ見てるかわからないけど、普通に
$("canvas").attr("width", "500");
でいける。

.width()はCSSの方のwidthをいじるメソッドだからできないだけ。

Canvasについて語ろう
http://peace.2ch.net/test/read.cgi/hp/1305093769/

すみません。一日中頑張ってもわかりませんでした…
レスポンシブナビゲージョンを作っておりリサイズ時に
#mobile-navigationが消えずに困っています。
resizeTimer = setTimeout(function(){
deviceWidth = $(window).width();
if (deviceWidth >= breakpoint) {
$('html').removeClass('#mobile-navigation').addClass('#site-navigation')

} else {
$('html').removeClass('#site-navigation').addClass('#mobile-navigation');

});
}
},150);
});

>>57
色々と根本的に理解できていないと見受けられる。
HTMLが提示されてないので推測になるが、普通なら以下のようになる。
$(window).on("resize", function(){
var deviceWidth = $(window).width();
if (deviceWidth >= breakpoint) {
$("#mobile-navigation").hide();
$("#site-navigation").show();
}
else {
$("#site-navigation").hide();
$("#mobile-navigation").show();
}
});

ありがとうございます。
リサイズの所だけ書いたので解りずらくてすみません。
タイマー使わないと1ピクセル変わった度に読み込まなくてはいけなくて
負荷がかかると聞いたのですが大丈夫なんですかね？
58さんと似たようなのがタイマー使う前のソースでした。が、
やはりブレイクポイント超えるとモバイルが消えませんでした。
cssの問題なかなぁ…。

ありがとうございます。
リサイズの所だけ書いたので解りずらくてすみません。
タイマー使わないと1ピクセル変わった度に読み込まなくてはいけなくて
負荷がかかると聞いたのですが大丈夫なんですかね？
58さんと似たようなのがタイマー使う前のソースでした。が、
やはりブレイクポイント超えるとモバイルが消えませんでした。
cssの問題なかなぁ…。

cssの分岐が間違ってました…
58さんので行けました。ありがとうございます。

ちょｗ 俺が見てない間にすすめないでくれよｗ
>>58で動くだろうけど、コードがまだ作りこまれていない。

まず一つ目、if 〜 show or hide っていう流れはtoggleを使えばシンプルになる

$(window).on("resize", function(){
　　var deviceWidth = $(window).width();
　　var isMobile = deviceWidth < breakpoint;
　　$("#mobile-navigation").toggle(isMobile);
　　$("#site-navigation").toggle(!isMobile);
});

そして二つ目、これ#mobile-navigation と #site-navigation の2箇所を
同じ条件で操作してるでしょ？こういうのは "一つだけ" 変えればできる。

$(window).on("resize", function(){
　　var deviceWidth = $(window).width();
　　var isMobile = deviceWidth < breakpoint;
　　$(body).toggleClass('mobile-mode', isMobile);
});

[CSS]
#site-navigation { display: block }
#mobile-navigation { display: none }
.mobile-mode #site-navigation { display: none }
.mobile-mode #mobile-navigation { display: block }

コードの量は増えているんだけれども "見た目はCSS"、"JavaScriptは状態の管理" と役目を分けることで
「他にもモバイルだと、他にもあれを表示して〜」とかCSSだけの変更でできるでしょ？

ちなみに、俺ならここまで減らすけどね。

$(window).on("resize", function(){
　　$(body).toggleClass('mobile-mode', $(this).width() < breakpoint);
});

横の文字数80文字超えてないし、コードを読む時を考えても、
「ウインドウの幅が、ブレークポイントを下回っていればモバイルモードにする」
とスムーズに読めるので、あえて変数に入れる必要はないと思う。


一つだけ懸念点があるとするなら、resizeイベントっていうのは
リサイズ時に思った以上に何回も呼びされれるので、
setTimeoutでもを使って少し遅延させたほうがいいかもしれない。

だけど、リサイズすることがそもそも少ないので
そこまでやらなくてもいいかもしれない。

まあここはお好みでｗ

>>60
> タイマー使わないと1ピクセル変わった度に読み込まなくてはいけなくて
> 負荷がかかると聞いたのですが大丈夫なんですかね？

ちゃんと書いてあるか。失敬ｗ お詫びに少しヒントを書こう

ちなみに>>57のコードが動かないのはsetTimeoutが一回しか実行されてないから。


負荷がかかるのを防ぐには、resizeイベントが発生したのをきっかけに、setTimeoutを仕込むというスタイルにする。
細かい実行タイミングの違いでやり方は色々あるけど例えばこんな感じかな。

var resizeTimer;
$(window).on("resize", function(){
　　if (resizeTimer) {
　　　　return;
　　}
　　resizeTimer = setTimeout(function() {
　　　　$(body).toggleClass('mobile-mode', $(this).width() < breakpoint);
　　　　resizeTimer = undefined;
　　}, 150);
});

この例だと、resizeTimerがグローバル変数になってしまうんで、俺ならもう少し工夫するけどね。
例えば、resizeTimerの保存先を$(window).data() にするとかresizeイベントの中身を即時関数でラップするとか。

こういう時に処理を遅延させる良い関数ってなかったかなぁ？
なんかどこかにあった気がするんだけど、jQuery以外の話だったっけ？

あー、わかったわ。

lodashにあるthrottleだ
https://lodash.com/docs#throttle
> // avoid excessively updating the position while scrolling
> jQuery(window).on('scroll', _.throttle(updatePosition, 100));

resizeみたいに頻繁に発生するイベントを抑えるやつ。

jQueryにもプラグインあるみたいだけどね。

こうかな？

$(window).on("resize", _.throttle(function() {
　　$(body).toggleClass('mobile-mode', $(window).width() < breakpoint);
}, 150));

jQuery throttle だと引数の順番が逆になるみたいだ

$(window).on("resize", $.throttle(150, function() {
　　$(body).toggleClass('mobile-mode', $(window).width() < breakpoint);
}));

テーブルでローグライク作ったんで評価よろ



セルネコの不思議なダンジョン
http://jsdo.it/jagarikin/cellneko

>>67
評価ってなんの？

絵がダサいでいいのか？

>>67
よくこんな汚いソースでここまでよく作ったなって感じ
あと爆風でアイテムが消えたように見えたけど階移動しなおしたら表示されたから多分バグ

コードは汚くて見るに耐えない
そんなもので1万行超えるとか
努力する方向を間違ってる。

これが仕事だと、メンテナンス性最悪で
他の人に迷惑をかけるレベル。
今すぐ、まともなプログラマのもとで修行をした方がいい。

努力賞だけはあげるよ。

プログラムでかすぎワロタ
暇人か

> 暇人か

ほんと、そこにびっくりするよねｗ

汚いっていうのはぱっと見でわかるが、
どこをどう直せばいいかを指摘するには
コードを読まないといけない。

だが仕事じゃあるまいし、こんなクソコード読みたくもない。

だから誰も問題点を指摘しようと思わないんだよ。

まずこんなだらだらと長いものを書く前に
小さいものを作って評価を依頼しろよ。

でかく（長い行数）を作るのが、凄いってことには
ならないんだぜ？

質の悪いものを大量に作るのが一番迷惑な人。

修正する時、作りなおす時、
大量のゴミを片付けなくちゃならない。

難読化という意味では上手く行ってるｗ

大昔のマルチステートメントで書いたBASICプログラムみたいだｗ

> 大昔のマルチステートメントで書いたBASICプログラムみたいだｗ

それが1000行程度なら「お、おう（笑）」で笑い過ごせるんだが
あれで1万行あるんだぜ？

1 + 2 + 3 + ・・・ + 9999 + 10000 の合計は何でしょう？という問題を
地道に1つずつ足し算している人を見ている気持ちだ。

ソースコードは見るものを拒む内容だからゲームの評価なのかな？
だとしたらゲーム関係の板で聞いた方がいいな

これだけの物を作れる根性だけは多分みんな認めてると思う
次からは方向性間違えずに頑張れ

× これだけの物
○ これだけの量

こんなのでもちゃんと動くjavascriptおよびjsdoを評価したいｗ

逆にこういうコードをリーディングし、ダイエット、リファクタリングしなければならないとしたら
どういうアプローチを取るのがいいんだろう？

>>80
「長すぎて読めない」っていうのが一番の障害

コード全体を把握しないことには、どういう設計に
変えていけばいいかが判断できない。
だけど、長いってだけで読めない。

なので小さい所の書き方からひたすら削っていく
というアプローチを俺は取るかな。
そうやっているうちに、何やっているかがわかってくる。

例えば、こういう意味がないもの。
> function abs(a){return Math.abs(a);}

こういうのは、さくっと消して、一行でも減らす。

dubar とか zar とか、何の略かわからんのはやめるのは当たり前として
この二つの関数はやっていることがほぼ同じなので、共通の関数に置き換えられる。

DOM操作もそれなりにあるからjQueryも使ったほうがいいな。
遅くなるかも？ という懸念の前にコードを把握するほうが重要だから
まず読まなければいけないものを減らす。

それをやりつつ、モジュールも分割していって、
読める所まで来たらそこから設計を考えて再構成する。

最初から正しい形に直そうと思ってはいけないし、直せない。
ここまで酷いものは、読むものを減らしてから、把握して再構成した方がいい。

>>80
おっと、一番最初にコード整形ツールを使って
整えるってのもやっておかなきゃならないことだなｗ

うん、js-beautifyやjshintの助けを借りて読んでみたけど、関数が極端に短いか長いかの
どちらかだねｗ

ループ変数にa,b,cとかもよくわからんｗ
初期化と宣言を一緒にしたほうがいい部分も散見された
無駄に空行が多い？
データ類は間違いなく別ファイルに追い出したほうがいい、これで半分ぐらいは減る

こんなとこかな

なんとなく、この人って、jsdo.itだけを使って
開発している気がするｗ

ローカルで開発してたらこんな事にはならんだろうし。

だとするとむしろその方がすごくね？

コードを表示するだけでもクソ重いから
もしそうだとするとすごいが、この世間との乖離感からするとそれもあり得る
ジャングルで発見された未開の民族みたいだな

英語としての綴りはもとより、ローマ字としても変な命名が多すぎる

中学生なのかな？

アンチパターンの宝庫といえる

ヘッダで許可しているサーバーへ試しにリクエストを投げる以外の方法で
WebページのJavaScriptから、それを実行しているブラウザが
XMLHttpRequset Level2のクロスドメイン通信に対応しているかを調べる方法はありますか？

「無駄に空行が多い」ってJavaScriptスレに常駐するあの人のことかと思った

>>88
機能テストする方法ではないが、サポートせざるを得ないIEに関しては XDomainRequest の存在で間接的に判定出来るな
(機能テストする方法は知らないし、私も教えて欲しいぐらいだ)
http://caniuse.com/#feat=xhr2
https://msdn.microsoft.com/en-us/library/ie/cc288060.aspx
https://developer.mozilla.org/en-US/docs/Web/API/XDomainRequest

>>90
ありがとうございます、XDomainRequestの有無は知りませんでした
IE以外ではWebkit以前のOperaやAndroid2の標準ブラウザ等でも使えないので
その辺も含めてまるっと判定したいのですが、やはり難しいものでしょうか

〜プレイさんくす〜




>>68
そもそも絵がないぜ（笑）

>>69
爆発で床のもんが変わることはないぜ？？
条件ｋｗｓｋ

>>70-75
職業プログラマじゃないからわからないけど
１万行ってそんな大仰なことだったのか・・

>>74
（解読して隠しURLを見つけちゃダメだぜ）

>>92
> 〜プレイさんくす〜
プレイはしてないｗ

> 職業プログラマじゃないからわからないけど
> １万行ってそんな大仰なことだったのか・・

わかってると思うけど「いい意味での凄い」とは誰も言ってないからねｗ

もしあんなものを仕事で出してきたら「酷い」と言われる。

どれくらいがいいかは場合によるが、
1関数 = 50行以下が望ましい。100行ぐらいでもコードに問題がなければOK
それを超えたら危険

そういう関数をいくつも作って1ファイルで1000行ぐらい。
許したとしても3000行が限界だろう。

早々にファイルを分割するべきだ。
jsdo.itでできるのかしらんけど。

>>91
俺はXMLHttpRequestオブジェクトに
withCredentialsが有るかどうかで判定しているよ。

正確に「XMLHttpRequset Level2のクロスドメイン通信」
だったかどうか忘れたが、多分あってるはず。

>>93
>jsdo.itでできるのかしらんけど。

ファイルのアップロードでも出来るしライブラリの追加のダイアログで別のjsコードを
ライブラリとして参照も出来るね

データならJSONファイル化してアップロードの方で追加だろうな

>>94
ありがとうございます、ググったらクロスドメイン用のPropとのことなので
少なくともこれが存在する場合は対応していると考えて間違いなさそうでした
XDomainRequestと合わせてかなり精度の高い判定ができそうです

mongodbっていうのがJavaScriptを使ってるみたいなんですが
使ってる人いますか？

dubar zar ネタってもう通じないのか

職業プログラマーにごめんなさいしろよ

〜プレイした人はサンクス〜



>>87
予約語とか調べるのめんどいから
ぶつからなそうな名前にしてるぜ〜


>>93
そうか〜
昔macのハイパーカードで5〜6万とか書いてたわ・・
気をつけるぜ〜


>>99
なんでだぜｗ
急に仕事ガーと言い出した人がいたから「職業プログラマ」と言っただけだぜ
それが蔑称なのは知ってるけどそんなつもりで言ったんじゃないぜ＞＜

ゲームプログラミングの雑誌には、
盤面データなども、
ソースコードの中に書いてあるものが多いが、
データは別ファイルにした方がよい

jsdo.it にはJSを使わず、
CSSだけで作ったワニワニパニックとか、
作者ができる範囲で、力技で作ったものが多いのかも


確かに、予約語は面倒だな
予約語をチェックするツールなどは無いのか？

予約語は完璧に覚えてもいいくらい数少ないし、想定するのはそんなに難しくない。
そもそも使ってしまったらエラーになるから大して問題でもないし。

>>97
主にNodeで注目を浴びているDBだよ。
ブラウザではIndexedDBが主流。それをMongo調にラップしたライブラリもあったとは思うけど。

それにしてもIDBのあの使いにくさにはまいる。
cache manifestよりはマシだが間違いなく失敗したHTML5APIランキング上位だな。

ジャガキンが結構おっさんでわろた
昔身につけたスタイルを更新せずに生きてきたから
未開人みたいになってたんだな

HyperCardおもしろかったな
あれで初めてスクリプト言語に触れたわ

>>98
> dubar zar ネタってもう通じないのか
しらない。でもつまりオッサンなんだな？

なるほど。合点がいった。あのコード、BASICなんだ。
それもN88BASICとかその頃の。
だからJavaScriptの基礎であっても、BASICに
なかったような機能を知らない。

ベーマガだっけな？ 俺は殆ど見てないんだが、
あれにもこういう3Dっぽい描画をするプログラムが乗っていた気がする。
きっとアレとか、当時の「BASICでやる3Dプログラミング」みたいな
本の内容をパクってるんだな。

そう考えると、一連の作品内容とコードレベルの差に納得がいく。
BASICを移植したコードだったんだ。

ライブラリ推奨派のみなさまチャンスですよ

こういうコード書いてる人がオブジェクト指向とか取り入れてもかえって混乱するだけだろうなあ

まずはグローバル変数を減らす事から考えた方がいいと思う

本当にそれはグローバルである必要があるのか？
ローカル変数や引数で置き換えられないか？とかね

（もちろんオブジェクトならプロパティにすればいちいち引数で持ち回る必要は無くなるのだが･･･）

strictモードやlintの活用も役に立つ

minimizeはツールに任せればよい
手動でやっていてはダメ

もちろん添削で人に見せる方はminimizeする前の方な

ペンネームをポテロングに変えるところから始めようか

>>107
むしろこういうコード書く奴ほど__proto__とか多用してJSらしいむちゃくちゃなオブジェクト指向やり倒してくれるに違いない。

>>109
ありそうｗ

配列を知ったとたん、なんでも配列を使ってやろうとする人ｗ

やり始めは皆そうだろう。
何年たってもそうじゃしょうがないが。。。

程度の差はあれ、網羅的に学ぶわけじゃないから
ちらほら知識が抜け落ちてることは良くあることだな

集中力はあるんだからちゃんと学び直せば良さそうなんだけどね

なんで評価よろって言っといて言われても直さないの

書き方じゃなくてテストプレイ、もしくはゲームとしての評価かな？

自作ゲーム板でやれ

>>114
単に褒めてもらいたいだけだからｗ
すごーいって言って欲しいんだよ。
中学生かｗ

ままごとガラパゴスコード　VS　職業プログラマ

JSはままごとガラパゴスコードのための言語だろう。
それは職業のレベルでも同じ。皆で同じルールでままごとしているだけ。
むしろサバイバル感、ワイルド感では上のヤツの方が勝ってる。

>>119
あんた何が目的なん？
荒そうとしてるの？

>>120
お前こそいきなり俺だけにいちゃもんつけてきて何様だよｗ

〜プレイした人はサンクス〜



>>104
俺もだわｗ
フリーのユーティリティーが100個くらい入ったソフトで
なんか船で殺人事件が起きるゲームをいじって遊んでたぜ

>>110
以前はなんでもチェーン配列もどきにしてたけどメリットないからやめたぜ＞＜

>>114
ちゃんと聞いてるぜ？
２ｃｈでJSの職業プログラマを自負する人の意見は参考にしてるぜ〜

>>117
えっすごかった？

>>118
別に戦ってないぜ〜
俺はままごとプログラムをわざわざ複数人で書いて紙芝居にする作業（？）を否定してないぜ？

>>121
（なんか面白くないことがあったみたいだぜ）

>>122
> ちゃんと聞いてるぜ？
2回ぐらい「グローバル変数を使うな」とアドバイスした記憶があるが、全く改善されていないのはなぜだろう？

グローバル変数を使うなと言うアドバイスが悪い。
グローバルが閉じられているES6モジュールで書けば最初から問題にならない。

> グローバルが閉じられているES6モジュールで書けば最初から問題にならない。
ES6 module で書かれていないコードに何をいってるのだろう
ES6 はまだ策定前の上に実装も追いついてないというのに

そもそも質問じゃないんだからスルーしとけばいいねん

>>67には悪いが、彼に ES6 を使いこなせるとは思えん
実力に見合ったアドバイスが必要だろうな

自分の作りたいもん作って
みんなに見せるってことは良いことだと思う

カラオケ板よりは反応あったね

汎用性の高いコードだったら見てみたいな
csv parserとか自然言語アルゴリズムのソートとかquerySelectorAllとかES5,6のPolyfillとか

助けて下さい(>_<)
このようなループの中で非同期処理を行い、ループ分の処理がすべて終わったあとで後続の処理を行うにはどうしたらよいでしょうか？

現状はループだけ先に回って、非同期処理より先に後続処理に入ってしまいます。。

for(var i＝0; i<10; i++){
funcHoge(param,{ //非同期間数
success : function(o) {
console.log(′処理中′);
},
failure : function(o,err) {
console.log(′エラー′);
}
});
}

BSONって何て呼ぶんですか？ビーソン？ブソン？

>>131
1. カウンターを用意して、処理が終わったら +1 する。
2. カウンターが10になったら後続の処理を呼び出す。
の2点をfuncHogeの最後に追加すればよい。

IEを切るならPromiseでも

>>131
jQueryのdefferedを使った実装。使えるブラウザが限られるけど、
ECMAScript 6を使った方法やPolyfillや類似ライブラリを使った実装も有る。

どちらにしろjQueryは使うだろうし、ブラウザ切り捨てたり別ライブラリ読み込んで
重くする意味は無いと思うんでそっちの例はjQuery嫌いな人に任せる。
文句ばっかり言ってないでたまには貢献してほしいね。

なお、このコードはもう少しスッキリ書きたいところだけど、funcHogeの仕様とか
引数とかの使い方がわからんので、なるべく元の形を維持する方向で手をうった。

function funcHoge(param, options) {
　　var deferred = new $.Deferred();
　　　　setTimeout(function() {
　　　　　　options.success();
　　　　　　deferred.resolve();
　　　　}, 1000);
　　return deferred;
}

var param ={}, deferreds = [];
for(var i = 0; i < 10; i++) {
　　deferreds.push(funcHoge(param, {
　　　　success : function(o) { console.log('処理中'); },
　　　　failure : function(o,err) { console.log('エラー'); }
　　}));
}

$.when.apply($, deferreds).then(function() {
　　console.log('finish');
});

>>131
安定してないが、ES6 の Promise を使う
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
現実的(クロスブラウザ)には内部の非同期処理にコールバック関数を渡して処理完了後にコールバック関数を呼び出すしかない
コードの書き方は非同期処理に依存する

>>132
動画検索を活用すべし
https://www.google.co.jp/search?tbm=vid&q=MongoDB+bson

ありがとうございます
ﾋﾞｰｻﾝでした

>>131
どうせPromiseを使うのなら、ジェネレータ+coも使いたいところだし、
そうするためにトランスレータ使うのならいっそES7で書くのがベストよ。
(async function(){
　for(var i＝0; i<10; i++){
　　await funcHoge(param).then(
　　　o => console.log(′処理中′),
　　　(o,err) => console.log(′エラー′)
　　);
　}
　console.log('完了')
})();

>>122
とてもメソッドチェーンを使えるようには見えない…

〜隠しURLみつけた？〜



>>123
本来ならあの３倍くらいになってたぜ＞＜

>>124-127
じゃあそれが標準化されてそれ使わなきゃできないことがあったら手を出すぜ〜

>>129
あそこは一応毎日反応があるぜｗ

>>140
それじゃないぜ
俺が言ったのは配列の要素に前と後ろのアドレスがあって
真ん中を高速で追加削除できるってやつ
今はタスクシステムもどきっていうの？

連結リストといえばいいだろ

ダブル(双方向)リンクでも真ん中は、高速に追加削除できない

0〜100があるとき50は、0・100どちらからたどっても、
50個たどる必要がある

ハッシュ(辞書)の方がよいかも

最初　最後　真ん中　の位置がわかってればいんじゃね

bodyにmousedownイベントを付けたんですが
bodyの雇用その上でクリックしても発火します
document.body.addEventListener('mousedown',function(){alert();}, false);
bodyの部分だけ発火させて、子要素のとこでは発火させない方法をおしえてください

「body」をこれに置換すればOK。
body.addEventListener('mousedown',e=>e.target.tagName=='BODY'&&alert());//

>>145
三章参照
ttp://uhyohyo.net/javascript/index.html

>>146
>>145ではないけど、Google先生記号検索苦手だから教えてほしいんだけどその書き方なんて名前？
てかaddEventListenerの第2引数は関数かオブジェクト書かないとダメなんじゃないの？

>>148
>>146ではないけど、アロー関数といいます。
普通の関数とほぼ同じなので、以下の式と等価です。
body.addEventListener('mousedown',function(e){e.target.tagName=='BODY'&&alert()});//
ただしこれはES6からの新仕様なので、今使うのは明らかに時期尚早です。

あと自分なら、tagNameより汎用性があるこちらの方を勧めますね。
document.body.addEventListener('mousedown',function(e){if(e.target==this/*またはe.currentTarget*/)alert();}, false);

http://stat100.ameba.jp/blog/ucs/js/common/protectimage.js

8~12行目でdocument.allかgetElementsByTagNameで振り分けているのはどの環境向けなんでしょうか？

>>149
thisは使うべきではないな。
アロー関数じゃ動かないし。

>>150
それ IE6未満 or Netscape 4あたり のコードでしょ？ｗ
古すぎる。

そして右クリック禁止とか画像保護とか
今ならどのブラウザにも付いている
開発者ツールで簡単に無意味化するというｗ

頼むからその名前を出さないでくれ、、、

ガチで心臓が痛くなる

なんでタスクシステムのメリットないの？

そもそもそれを何に使うんだよ。

〜名前欄間違えてました〜




>>143-144
消す対象がわかってれば前後がわかるから全体での位置は知る必要ないぜ
追加も一番後ろか何かの後ろだからその何かがわかってればいいぜ〜

>>154
超巨大なデータだと速度にメリットがあるぜ〜
それ以外はここでメリットで検索するといいぜ↓
http://pc11.2ch.net/test/read.cgi/gamedev/1260695466/

>>156
空行3つ入れるのは無駄に長いだけだから止めて欲しい

目立つように意図的にやってるんでしょ
荒らしが改行入れまくってレスするのと同じ

>>157-158
見やすいと思ってやってるだけだぜ＞＜


ところで気になったんだけど
職業的にプログラムしてる人は>>67みたいなターン制のローグライクで
敵の行動の間にエフェクト・効果付与・罠発動の処理を入れるのって
やるとしたら全体ではどうやって書くんだぜ？
やっぱタスクシステム？

>>159
requestAnimationFrame()でググれよ
どんなショボイゲームでもちゃんとフレーム単位で処理するようにしないと後々困ることになるだろう

タスクシステム(普通木構造になっている)は処理の順番やリソースの管理の為に使うもんだ

>>159
> 見やすいと思ってやってるだけだぜ><
スクロールを強制されてうざいから止めてくれ
空行は一つで十分だ

2ch全体に言えるがやたら空白あける奴の頭のおかしさは異常
アカンやつを認識しやすいから便利ではあるが

HNの中に☆が入ってる奴の感覚の普通じゃなさも異常

>>160
ちゃんとディスプレイの垂直同期に合わせて画像を書き換えないとチラつくよな！

マジかよリフレッシュレート取得できるWebAPI実装はよ

RAFに従っとけば問題ない。

〜改行へのレスが多くなってきました〜

>>160
requestAnimationFrame()なら知ってるぜ
他のでは使ってるぜ〜

時間の繭
http://jsdo.it/jagarikin/iLIN

でもフレーム単位で処理するにしても>>67みたいなの作るとしたら
何かが処理順を保持してるわけじゃん？
それは具体的にどうしてるんだぜ

>>161
じゃ一行にするぜ＞＜
俺へのレスでスクロールが増えてごめんだぜ〜

ワイルドだろお〜〜〜？

ごめん何故かこの言葉が浮かんできた

>>167
> でもフレーム単位で処理するにしても>>67みたいなの作るとしたら
> 何かが処理順を保持してるわけじゃん？

処理順だったら>>160でも書いてるけどタスクシステムでやればいいだろうね
シーングラフともいうけどな

そんなもの使わなくても
入力取得
キャラ移動
コリジョン判定
　→何かに当たってたらその処理(エフェクト発生、キャラモーション切り替えなど)を行う
アニメーション処理 (エフェクト、キャラなど)
　→要するに1フレーム分の見栄えを更新する
って毎フレーム順番に処理すれば大抵事足りるだろう

tubularでループの時、一瞬だけ関連動画が映るんだけど何か対策ないですか？

たいていのローグライクはシューティングの要領では書けないよ
たとえば複数範囲の敵を攻撃したらそいつらが全部くらってから
爆発したりカウンターしたりなんか発動したりすんじゃん？
そっから雪だるま式に効果が増えると…

ああいうのは事前に結果を求めて、その過程で作った効果のタスクリストを流してる。

結果作成時に（ｒｙ

>>67
は土日スレ（一週間弱でゲームを作って公開）の住人と成果物だが
そこを明示せずにややズレた批判でボコられてるのが泣ける

一週間で1万行以上書いたのか？
ならすごすぎるだろ

canvasのテキスト描画の位置がブラウザによって違うのは何とかならない？
textBaselineをいろいろ変えてみたがChrome、Firefox、IEでそれぞれ結果が違う

jsfiddleにサンプルコードをあげて

それはしょうがないよ。
サイズなんかもブラウザ設定に縛られるし。
だからネイティブのゲームなんかは内部にフォントを持ってるからね。
それくらいしないとどうしようもならない問題。

これ見つけた

この例だとbottomになっているけど文字の上にあるスペースの量がブラウザによって違う

http://codepen.io/anon/pen/BFpdz

一番結果の差が少ないのはデフォルトのalphabetic？これで何とかするしかないかも

function Foo() {
addEventListener('load', function(e) {
this.bar = 1;
});
}

Foo.prototype.piyo = function() {
console.log(this.bar);
}

var hoge = new Foo();
hoge.piyo();

とするとthis.barがundefinedになるのですが1にするにはどうすればいいのですか？

>>180
function Foo () { addEventListener('load', this, false); }
Foo.prototype.handleEvent = function (event) { this.bar = 1; };

>>181
残念ながら動かないようです。

>>180
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

target.addEventListener(type, listener [, useCapture]);

注記: useCapture は、主要なブラウザの最近のバージョンでのみ省略可能です。
例えば、Firefox 6 より前では省略できません。幅広い互換性を保つために、引数を省略すべきではありません。

>>180
古いブラウザにも対応する場合

function Foo() {
　　var self = this;
　　window.addEventListener('load', function() {
　　　　self.bar = 1;
　　}, false);
}

Foo.prototype.piyo = function() {
　　console.log(this.bar);
}

var hoge = new Foo();

setTimeout(function() {
　　hoge.piyo();
}, 3000); // loadが走った後に呼ばないといけないから待つ

そしてjQueryを使った場合

function Foo() {
　　$(window).on('load', $.proxy(function(e) {
　　　　this.bar = 1;
　　}, this));
}

Foo.prototype.piyo = function() {
　　console.log(this.bar);
}

var hoge = new Foo();

setTimeout(function() {
　　hoge.piyo();
}, 3000); // loadが走った後に呼ばないといけないから待つ

有り体に言ってしまえばMDNが省略すべきでないと言ってるのはFx5でエラーになるからだろｗ
2015年の今この記述は削除すべきだと思うね
MDNが常に公平で最新で妥当と思ってはイカンぞ。

>>182
動いたわけだが
http://jsfiddle.net/fhcu7eg1/
動かし方が悪いんじゃないか？

ありがとうございます。

>>187
ブラウザが古いのが原因でした。

>>186
それはあんたが決めることじゃないよ。

客が対応が必要だと思えば対応するしか無い。
誰でも最新のブラウザにだけ対応するだけで
いいとは限らないんだから。

>>189
動かないブラウザ名とバージョンは？

>>191

http://d.hatena.ne.jp/uupaa/20101024/1287850660
> 例により、handleEvent によるイベントハンドリングは
> IE8以下で利用できないため、そのへんは uupaa.js がちょっとだけ面倒をみています。

>>192
IE8- はそもそも、addEventListener を使えないだろう？
>>180はコード中に addEventListener を書いているのだからその条件はクリアしていると思っていたのだが
前提条件が違うなら初回質問時から全て書いて欲しいものだ

IE8なら>>180で "this.barがundefinedになる" わけがない

handleEventを使って複数のイベントをハンドルした場合、
eventオブジェクトを使って処理を分けるしか無いのでしょうか？

function Foo () {
　　addEventListener('keydown', this, false);
　　addEventListener('click', this, false);
}
Foo.prototype.handleEvent = function (event) {
　　switch(event.type) {
　　　　case 'keydown': alert(1); break;
　　　　case 'click': alert(2); break;
　　}
};


jQuerのようには書けませんか？

function Foo () {
　　$(window).on(this);
}
Foo.prototype.keydown = function (event) {
　　alert(1);
};
Foo.prototype.click = function (event) {
　　alert(2);
};

>>193
>>182,189は>>180とは別人です
>>180での環境はFirefox 36です

>>195
handleEvent を使うなら switch(event.type) で分岐処理するしかない
分岐処理しない為には Function.prototype.bind を使用する必要がある

結局、>>191には答えてもらえないのか？

>>196
成りすましを防止するため、IDかトリップを出す事をお勧めする
質の低い荒らしが常駐しているので自己防衛手段を怠ると痛い目を見る

>>198
わかりました
よく見てみると>>1にもそう書いてありましたね
今後気をつけます

どうしてもeventHandler使ったコードを書きたい場合は
古いブラウザ向けにこれで我慢しておきますかね。
一行追加しただけすみますし。

function Foo () {
　　var self = this.eventHandler.bind(this);
　　addEventListener('keydown', self);
　　addEventListener('click', self);
　　this.prop = 1;
}
Foo.prototype.eventHandler = function (event) {
　　alert(event.type + this.prop);
};

これのjQuery版

function Foo () {
　　var self = $.proxy(this.eventHandler, this);
　　$(window).on('keydown click', self);
　　this.prop = 1;
}
Foo.prototype.eventHandler = function (event) {
　　alert(event.type + this.prop);
};

jQueryプラグイン作ってこんなのもありかもｗ
$(window).on('keydown click', $.eventHandler(this));

>>200
そのコードなら handleEvent でも問題ないだろう
同じ handleEvent を使いまわしたくないからこその Function#bind であるはずだが…
それから、jQuery の話題を絡めるならライブラリ質問スレに行ったほうがいい

> 古いブラウザ向けにこれで我慢しておきますかね。
古いブラウザとは？
handleEvent が使えず、Function#bind が使える実装がある？

http://nanto.asablo.jp/blog/2007/03/23/1339502
> Safari 2 では関数オブジェクトしか EventListener として使えませんが、
> Safari のナイトリービルドでは handleEvent メソッドを
> 持つオブジェクトも EventListener として使えるようです。

http://www.tagindex.com/kakolog/q4bbs/1701/2049.html
> そこで、Firefox（Netscape 6 の頃から[*8]）、Opera（8 以降）、Safari（3 以降）では、
> 「handleEvent() メソッドを持つオブジェクト」をイベントリスナとして登録できるようになっています。
> イベントが発生すると、handleEvent() メソッドにイベントオブジェクトが渡されます。

>>202
Function#bind は Safari 5.1.4 からサポートされたわけで handleEvent の方が対応範囲が大きいわけだが
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
>>192もそうだが、まともに調べているのか？

つまり、古いブラウザのことも考えるなら、
handleEventもbindも使わないほうがいいってことかな。

>>193
> IE8- はそもそも、addEventListener を使えないだろう？
> >>180はコード中に addEventListener を書いているのだからその条件はクリアしていると思っていたのだが

addEventListenerが使えても、handleEventが使えないということがあるんだよ。

そもそも、Safari 2 をサポートするぐらいなら IE7 もサポートしてくれ
本当にそんな古いブラウザをサポートする技術があるなら難しくは無いはずだ

>>206
> addEventListenerが使えても、handleEventが使えないということがあるんだよ。
理屈はわかるが、ならばなぜ>>192で IE8 を引き合いに出した？
そして、あなたの考える対象ブラウザはどこまである？
Netscape 6, Opera 7, Safari 2 に対応することが現状に即していると本当に思っているのか？
そんな古い時代の環境まで考えるのなら、ES5 も addEventListener も使えないと思うのだが

Function#bind は Polyfill を作れないからなあ
Safari 2 でどうやって Function#bind を使うつもりだったのかな？

>>209
え？ 作れるよ？

Object.prototype.bind2 = function(self) {
　　var func = this;
　　return function() {
　　　　self._dummy_ = func;
　　　　self._dummy_();
　　};
};

function foo() {
　　alert(this.value);
}

var bar = foo.bind2({value: 1});
bar();

懐かしいなぁｗ

昔はcallはあるけどapplyが無いブラウザがあって、
callを使ってapplyをエミュレートしたこともあるよ。

できる？ｗ

>>210-211
引数が保証されていないようだけど

>>212
> 引数が保証されていないようだけど

できるんだな、これが。

それが、「callを使ってapplyをエミュレートしたこともあるよ。」って
所にもつながるんだよ。

まあ今更な話題だけど、当時の俺がよくぞ思いついたって
ネタなんでいきなり答えをばらすのも、いやなんだよね。

まあ考えてみてよ。

> Object.prototype.bind2 = function(self) {
これは酷い

どうせevalでも使ったんだろ。

>>215
はい。正解。

ね？できるでしょ？

>>207が全て
Safari 2リリース日を踏まえれば IE6 もサポートしていいぐらい
メーカサポート問わずに旧ブラウザをサポートするつもりのようだが、俺は意味があるとは思えんな
そこまでやるなら、Safari 2〜8の全版サポートしないと意味が無い
Firefox, Google Chrome も同じように頑張れ

>>216
そんな誰でもわかっている事をどうどうといわれてもねえ

> そんな誰でもわかっている事をどうどうといわれてもねえ

↓え？ この順番で、会話してきたよね？そのレスはちょっと恥ずかしい。


209 ：Name_Not_Found：2015/03/02(月) 02:24:54.18 ID:???
Function#bind は Polyfill を作れないからなあ
Safari 2 でどうやって Function#bind を使うつもりだったのかな？

212 ：Name_Not_Found：2015/03/02(月) 02:44:23.82 ID:???
>>210-211
引数が保証されていないようだけど

216 ：210：2015/03/02(月) 02:57:00.42 ID:???
>>215
はい。正解。

ね？できるでしょ？

218 ：Name_Not_Found：2015/03/02(月) 03:06:25.46 ID:???
>>216
そんな誰でもわかっている事をどうどうといわれてもねえ

>>219
もう説明するのも面倒くさいんだけど
あなたのコードで引数が保証されていなかった
あなたは出来るといったが、出来てないコードを紹介したのだから>>212は間違ってない
evalについては「バッドノウハウを使わずに作れない」という暗黙の了解を知らずに大きな顔で口を出してから釘を刺したんだよ
あと、>>210はPolyfillにすらなってないからね？
答えは自分で考えて

いちいち説明しなきゃいけないのか？

>>209がFunction#bind は Polyfill を作れないと言った

それを俺はthisをすげ替える方法を知らないんだなと思ったから、
（なぜかって？ bindのキモはthisをすげ替えることだから）
bindを使わないで、thisをすげ替える方法を提示した。

そしたら引数の問題により作れないと言い出したから、
それも出来るって言った。

当初のPolifillが作れないという話は、
作れるという結果で終わったじゃないか。

そしたら今度は、evalはバッドノウハウだだって？
そんなこと知ってるわ。今の話はbindのPolyfillが出来るかどうかだろ。

世にあるPolyfillのうちの幾つかはeval使って実現しているものだって知らないのか？
Polyfillっていうのはそういうものなんだよ。

> あと、>>210はPolyfillにすらなってないからね？

そりゃそうだろ？ 誰が完全なPolyfillコードを提示するといった？

俺は、Polyfillが可能であると説明しただけだ。

俺も作ってみた。こっちのほうが短くて良い。
Function.prototype.bind2 = function (self, ...argsA) {
　return (...argsB) => this.call(self, ...argsA, ...argsB);
}

こいつ何カリカリしてんだと思ったら、もしかして、
『Object』.prototypeな所を突っ込まれているのき気がついてない？？？

>>224
気がついてないだろうな
そして、(new Function instanceof Object) === true が保証されてないことを知らないことからしてES仕様に詳しくない

>>223
なるほど、rest parameters と spread operator か
しかし、ES5のbind()が非実装で、ES6の ... が実装済みというブラウザなんてあるか…？

それもあるし、>>210では>>200のコードが動かないよね
一体どこがPolyfillなんだか

まだやってるｗ

Function#bind の Polyfill は作れるって話なのに
関係ない所にツッコミ入れてるしｗ

>>226
ですよねーｗ 趣旨をわかってないというかｗ

>>227
だからPolyfillは作れるって説明ですが？
擬似コードじゃなくて動くコードがほしいんですか？

動的ハフマンテーブルってどうやって作ればいいんですか

出現頻度が2倍になったら符号長が1増えるように自分でアルゴリズムを考える

あんたがた

どこさ

あんたがった♪

結局、>>200の「古いブラウザ向け」とは何だったんだ？
Fuction.prototype.bind 拡張して古いブラウザ向けといいたかったのかね
それなら、addEventListener を handleEvent 対応に拡張するのと変わらないのではないか
古いブラウザ向けはprototype拡張であって>>200のどこにも古いブラウザ向けのコートが見当たらない
>>202以降の反論もあまりにも見当違い過ぎて言い返す気も起きない

などと言い返してみた（笑）

addEventListenerで実行されるイベントと実行される処理のコードってChromeのdevtoolsで
Event Listenersってタブのイベント名をクリックしてその後どこを見たらいいんですか？

>>228
趣旨をわかってないって何が？
何が何でもポリフィルが作れればいいんだろ？
お前そう言ったやん

>>237
やっぱ趣旨がわかってないね。

趣旨は、ポリフィルで書くことが可能であるという証明。
可能であることが示せるのであれば、
実際に書くまでする必要はない。

//フレームクラス
import javax.swing.JFrame;
import javax.swing.ImageIcon;

public class Frame {
public static void frame(){
JFrame frame = new JFrame("タイトル"); //タイトル
frame.setVisible(true); //表示
frame.setResizable(false); //サイズ変更不可
frame.setSize(320, 240); //大きさ
frame.setLocationRelativeTo(null); //真ん中に表示
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //×を押した時終了
ImageIcon icon = new ImageIcon("./icon.png");
setIconImage(icon.getImage());
}
}

これだと setIconImage(icon.getImage());の部分がエラー(シンボルをみつけられません)になります。どのようにすればいいでしょうか？

Javaスレで聞けばいいんじゃないかな

★★Java質問･相談スレッド172★★ [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/tech/1419490897/

ここってjavaスレじゃないんですね・・・すみません

>>237
その辺にして矛を納めなよ
この人は表面的な勝ち負けに拘ってるだけだと何となくは察してるでしょ
一度だけ言いたいことをはっきり、いったら後は言わせておけばいいんだよ
言葉の重さは見る人が見れば伝わるから

>>242
断る。徹底的に叩き潰すまでやる。

>>238
それはお前が勝手に決めた趣旨だろ？
俺は俺の趣旨で動いてるから。なんか文句ある？
↑
これお前がやってることと同じだから。
もっと自分のやってることを考えたほうがいいよ。
皆お前に困ってる。

因みに俺はできるできない言ってる奴とは別だから勘違いしないように。

じゃあbindのpolyfillはできるってことで
いいね？

bindのポリフィルってのがどういう用途のものを言ってるのかわからんが。
それこそたいていの用途であるthisbindだけならevalさえもいらんのじゃないの？
もしくは２引数までのサポートだけでも９割以上のユースケースには対応できるだろう。
そうなればMDNのObject.create並みのポリフィルと言えると思う。

HTML5
<div class="tubular">

</div>

もうどうでもいいけど、自分の趣旨は>>200のコードをSafari 2で動かす事と>>208が主張していることと同じ
相手の趣旨も読みとって欲しいもんだね

いい加減一応JavaScriptの話題だからという免罪符で、いつまでも自己満足を撒き散らすんじゃない。
お前が正解と思ってることがあるんならそれでいいじゃないか。
ここは相手の考えをねじ曲げる場ではない。

書き方の話題なら合ってる
言語によって向き不向きあるし

>>247
> もしくは２引数までのサポートだけでも９割以上のユースケースには対応できるだろう。
確かに引数の数を限定すれば実装できるね
第三引数が存在したら throw new Error を投げれば、問題が起きても bind 呼び出し時に例外に気が付けるだろう
この辺りは constellation さんの記事が詳しい
http://constellation.hatenablog.com/entry/20110113/1294846327

あと、eval を使うぐらいなら new Function の存在に気が付いて欲しかった
evalコードのようなものだけど、Strict Mode で使えるし、スコープがより安全だからね
(eval は ES5 で呼び出し方によっては安全になったけど、あれは何の為にあるんだろう)

>>250
ライブラリ厨にも言えることだな
ライブラリが悪いのではなく、自分が正義とアピールしたいせこい考えと態度が悪い

>>252
evalは別にstrictモードでも普通に使えるぞ。
evalとnew Functionが使えないのはCSP下においてだろ。

因みにevalの振る舞いが変わったのは安全云々じゃなくて、
「eval」をキーワードとして認識できることで最適化に活かすためね。

>>247
> bindのポリフィルってのがどういう用途のものを言ってるのかわからんが。

用途の話聞きたい？してもいいけど、長くなるよ。

別にbindのポリフィルは「できるんだぜーふふん♪」というネタを
話してるんじゃないよ。当時の俺が必要だったからやっただけ。

俺にとってはやったことがあることに対して、
bindのポリフィルはできないと言うやつがいたから、
いやできるしｗ って言ったのが事始め。

では、なぜ必要だったか？ 話はjQueryもPrototypeも存在しない2004年ごろ。
IEは6がでていたが、まだまだ5.5も使われていた。Firefoxは1.0がでるかでないころ。
Netscape7がまだまだメインだった。EcmaScriptは3でEcmaScript4が失敗していた。そんな時代。
bindという機能も仕様にはあったかも知れないが、当時の俺は知らなかった。

俺は自分用に、右クリック禁止対抗やポップアップ広告など「うざいJavaScript」無効化ツールを作っていた。
（そこから発展してウェブ開発ツールになりつつあったがそれは別の話）

HTML書き換えによる右クリック禁止対抗ツールはあったが、これは暗号化された右クリック禁止コードに
弱いので別の方法として、冒頭に自作JavaScriptを読み込むことで、特定の機能を無効化する方法をとった。
（ついでにそのJavaScriptはクロスブラザにしていた）

仕組み的にはGreasemonkeyと同じと知っている人にはわかるだろう。
ちなみにGreasemonkeyは2005年リリースのようだ。

「うざいJavaScript」の一つとして、何度もalertを表示するページがあった。
いまではFirefoxがダイアログ抑制機能を搭載しているが、
それと似たツールをも作っていた。

仕様としては、最初の数回は普通にalertができる。制限回数を超えたら抑制されるというもの。
やる内容としては、標準のwindow.alertを上書きし、制限回数以内ならオリジナルのalertを呼び出して
それを超えたら無効にするだけ。処理としては簡単な内容だった。単純化するとこれだけ。

var count = 0, limit = 3;
var origAlert = window.alert;
window.alert = function() { if(count < limit) {origAlert(); count++} }

このコードはIEやNetscapeで動いたが、Operaでは動かなかった。
どうやらOperaのオリジナルのwindow.alertはthis（window）を参照しているようだった。
（ちなみにOperaの当時のalertはWindows標準のダイアログではなく、
今みたいなウェブページのダイアログっぽい表示だった）

bindがあれば、windowをbindさせるだけ終わる話なのだが、当時のJavaScrptにはbindはなかったので
どうにかする必要があった。alertだけに限れば引数一つで済むのだが「うざいJavaScript」対策のため
その他の関数でも使えるよう引数がいくつでも対応したかった。
そこで作ったのが今で言うbindのポリフィル関数。

このようにbindのポリフィルは俺が必要だったから実装した。
俺が過去にやったことだからだ。だからできることを知ってる俺の前で
出来ないと言われたから「いやできるしｗ」って言った。
それだけのこと。

bindなんてオブジェクト指向言語であれば大抵ある機能
長文垂れ流してまで用途の説明は不要

聞かれたから答えただけだし？

そういう意味のないこというだけなら
レスの必要ないよ。

alertはWindow.prototype.alertだよ。だからthisを見て当然。
過去話はもういいからどうせならES7のbind演算子やAbstract Referencesについて語ろうぜ。
それらを使えば　a.f.bind(a)　を　a::f　とかけてイイね！

>>259
そっくりそのままお前に返すよ

> alertはWindow.prototype.alertだよ。だからthisを見て当然。

当時の実装はそうじゃなかったんだよ。
例えばIEは、Windowsのダイアログそのままだった。
ウインドウハンドルを持っていたんだよ。

ダイアログだけじゃなくて、フォーム要素とかもそうで、
これなんかも、それが原因。

IE6でselectタグ(プルダウン)がz-indexを無視する対策【CSS, HTML】
http://www.programming-magic.com/20071107222415/
> IE6では、selectタグはWindowsのコントロールを使用して表示されている。
> そのためか、z-indexやborder、text-alignなどいつくかのスタイルが無視される。
> 特に困るのがz-indexで、JavaScriptでdivタグをドラッグで移動できるようにした場合、
> ページ内にselectタグがあると、selectタグだけがz-indexを無視して一番上に表示されてしまう。


だからIEは重い。うちのはウインドウハンドルを消費しないから
軽いと言っていたブラウザはなんだったっけな？
Operaだっけ？

いい加減、当時の実装と、今だからこそ言える理想的な環境の違いを理解しなよ。

当時のことを語ってるのはお前だけだっていい加減気づけよ……
俺が世界の中心だって人？

まあいいじゃない。
あれだろ、これからのモダンWebに向けて過去の苦しみを最後に思い出そうっていう忘年会的なノリだろ？
じゃあそろそろ>>262が締めてくれるだろうから皆さん期待して待つように。

ん？ だからbindを実装した理由だよ。

そりゃ実装したのは過去の話なんだから
過去の話になるだろ。

そもそも実装した理由を聞かれたから
答えただけなんだけどな。

つかそれ以外にbindをポリフィルする意味なくね？
いまどき対応していないブラウザ無いでしょ。

ただいいたいのは、bindをポリフィル出来ないと言われたから
出来るって言っただけなのに、難癖つけてきたんでしょ。

素直にその方法でできますね。って言えば話は終わったんだよ？

よくわからんわ。

お前が折れればいいだけだろ
喧嘩したいならならよそでやれよアホ

>>265
あんたが相手に誤解させないことを配慮したのに相手が攻撃してきたならともかく、
むしろ相手を言い負かすことを望んだやりとりをしているから養護しようがない。
あんたがやってることは正義ではなく悪だよ。

一行ですませられたほうが正義！

タイマー作ろうと思って調べたらsettimeoutで再帰するやつをたくさんみたんだけど、あれってメモリ使用量とか大丈夫なの？

>>266
なんで俺が？？？

>>267
人を悪人呼ばわりすんなやｗ
どうもこう悪口ばかり言いたくなるみたいね。
悪口が含まれた時点で、説得力ゼロになるのわかってないの？

>>269
問題あると思えば、調べればいいだけだよ。
それに多分それ、再帰になってないから。

>>269
AlarmAPIを使った方がいい
https://developer.mozilla.org/en-US/docs/Web/API/Alarm_API

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? 16 (16) moz Not supported Not supported Not supported

http://qiita.com/takwat/items/3fc1242026afc63ede3e

で、Alarm API使えば？というツッコミもあると思うところだけど

「繰り返しの最低周期が分単位でしか指定できないじゃん、さすがに1ページ2分とかは無理がある」

お得意のポリフィルで何とかすればいいだろｗ
>>270ならやってくれるさ。
まあ実際10行くらいでできそうだが。

>>270
なんで俺がやらないといけないんだよｗ

それにしてもこのスレって使えないものを、
説明もなしに薦めてくる奴多いよな。
知識自慢でもしたいのかな？

このスレはライブラリ製作者に監視されています

>>276
呼びましたか？

lodash 3.4.0リリースされますよ。
https://github.com/lodash/lodash/commit/0d95dbbfbb454f591cba93a71e8f6e72e73eb0c7

>>276
呼びましたか？

lodash 3.4.0リリースされますよ。
https://github.com/lodash/lodash/commit/0d95dbbfbb454f591cba93a71e8f6e72e73eb0c7

>>276
呼びましたか？

lodash 3.4.0リリースされますよ。
https://github.com/lodash/lodash/commit/0d95dbbfbb454f591cba93a71e8f6e72e73eb0c7

>>276
呼びましたか？

lodash 3.4.0リリースされますよ。
https://github.com/lodash/lodash/commit/0d95dbbfbb454f591cba93a71e8f6e72e73eb0c7

そうまでされると意地でも使いたくなくなる

ワロタｗｗｗｗ

２ちゃんねるがエラー出したから
再試行してみたらこうなったｗｗｗ

また重いねんｗｗｗ

どうせエラー出るだろうけど
ちゃんと書き込めてるんだろうなｗ

さすがに笑ったわ
lodash使いってお茶目さんなんだな

>>254
> evalは別にstrictモードでも普通に使えるぞ。
申し訳ない
記憶違いしていたみたいだ
Strict Mode では eval のスコープが変化するだけで使えるね

>>255
> 因みにevalの振る舞いが変わったのは安全云々じゃなくて、
> 「eval」をキーワードとして認識できることで最適化に活かすためね。
もし、よければ詳しく聞きだい

>>285
> もし、よければ詳しく聞きだい。

evalの中であらたに「var i」とか書くことで
実行時に新たにスコープ内に変数が生まれるから
実行時になるまで参照する変数が決定できないとかじゃないの？

それよりか>>209って名乗ったからには
bindがポリフィルできると認めてほしいものだがｗ

俺がレスして悪いねｗ

え？なにいってんだこいつ？できないけど？
お前もそう思うよな？↓

できない

>>287
うん。できないよな。

できるい

彼には少なくない構ってオーラを感じる
無視するのが一番の薬になるだろうな

>>286-290
自演乙

動的ハフマンテーブル自体を保存するにはどうすればいいですか

そこを考えるのがプログラミングの醍醐味です

保存したら動的に作る意味なくね

setTimeoutとrequestAnimationFrameでループしてる時に
初回の処理だけもたつくのは何故ですか？

どういう処理でもたついてるのか知らんけど
初回の速度が通常で以後はキャッシュが効いてるんじゃない

http://localhost/?<script>alert(1);</script>#<script>alert(1);</script>

location.hash: "#<script>alert(1);</script>"
location.search:"?%3Cscript%3Ealert(1);%3C/script%3E"

なぜhashの方はエスケープされててsearchのはエスケープされてないのか？

あとhashのほうで取得した内容をinnerHTMLで流しこむと何故か何も表示されません

>>298
hash は HTTPリクエストURL の一部でないからだろう
（HTTPリクエスト時のURLからは取り除かれ、クライアントがレスポンスに対しhashを適用する）
search クエリはリクエストURL の一部なのでエスケープが必須になる

>>294
ここは質問スレッドだ。
君のようなカスが来る場所じゃない。失せろ小僧

>>293
ハフマン符合はここがわかりやすく解説されていると思う
http://michisugara.jp/archives/2013/huffman.html

ああ、保存方法か
どこに保存したいのか知らないけど、CookieやlocalStrageでも使ったら？

>>301
ただ答えを教えるだけが回答ではないわな。

指定した要素が画面上にスクロールられたら着火するようにしたいのですがどう記載したらいいのでしょうか？
教えてください。よろしくお願いします。

>>305
getBoundingClientRectで要素の絶対座標を取得し、scrollする度に座標を比較すれば良い
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

>>306
ありがとうございます。やってみます。

offsetTop