+ JavaScript の質問用スレッド vol.123 +
>>2-4のテンプレを読んだ上で質問してください。
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
+ JavaScript の質問用スレッド vol.122 +(c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1420095379/
（ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです）
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■前スレ
+ JavaScript の質問用スレッド vol.122 +(c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1420095379/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■関連スレ
ECMAScript デス 4
http://peace.2ch.sc/test/read.cgi/tech/1325448978/
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
Webサイト制作初心者用質問スレ part241
http://peace.2ch.sc/test/read.cgi/hp/1408512894/
CSS初心者スレッド＝12th＝
http://peace.2ch.sc/test/read.cgi/hp/1343429848/
Canvasについて語ろう
http://peace.2ch.sc/test/read.cgi/hp/1305093769/
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 中でやるとか。
◆ 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)
vol.116で一人の心ない人が勝手に決めたライブラリ禁止は撤回されました。
今後はライブラリに関する質問も受け付けます。
ライブラリ禁止を叫ぶやからはスルーしてください。
【JavaScript】gruntとかタスクランチャー専用スレ [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1422024305/
【JavaScript】backbone専用スレ [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1422023660/
JavaScript開発ワークフローツール専用スレ yeoman [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1422027369/
【JavaScript】angulerjs専用スレ [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1422023699/
【javadcript・jQuery】動作が軽くて効率的なコード
http://peace.2ch.sc/test/read.cgi/hp/1400322316/
backboneとかangulerjsとかのフレームワークスレ [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1422023732/
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400834117/
くだすれjavascript(超ｳﾙﾄﾗ初心者用) その1 [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1419839086/
JavaScript Tips コレクション
http://peace.2ch.sc/test/read.cgi/hp/1070611524/
1行javascriptプログラミング
http://peace.2ch.sc/test/read.cgi/hp/1066750037/
W3C DOM仕様の話題・質問スレ (JavaScript以外もOK)
http://peace.2ch.sc/test/read.cgi/hp/1403285840/
【DOM】ブラウザ上で動くJavaScriptスレ【jQuery】
http://peace.2ch.sc/test/read.cgi/hp/1403286918/
純粋JavaScript（ECMAScript）専用質問スレ
http://peace.2ch.sc/test/read.cgi/hp/1400502900/
ブラウザ搭載JavaScriptスレ (Ajax,DOM含む)
http://peace.2ch.sc/test/read.cgi/hp/1409614555/
くだすれjavascript(超初心者用) その1(c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1419789660/
Angulerはオワコン★WebComponents & polymerｽﾚ [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1422023928/
Webサイト制作初心者用質問スレ part244 [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1421469214/
【jQuery】演出系サイト制作
http://peace.2ch.sc/test/read.cgi/hp/1399741497/
くだすれAjax（超初心者用）
http://peace.2ch.sc/test/read.cgi/hp/1127340053/
HTML5はなぜ失敗したのか
http://peace.2ch.sc/test/read.cgi/hp/1349593918/
Javascriptで「戻る」を作るのやめてくれない？
http://peace.2ch.sc/test/read.cgi/hp/1104788634/
HTML5が2つのバージョンに分裂、どちらで開発する？
http://peace.2ch.sc/test/read.cgi/hp/1343143088/
JavaScriptでパスメを作る
http://peace.2ch.sc/test/read.cgi/hp/1206110183/
JavaとかActiveX使ってホームページ作ってる奴って
http://peace.2ch.sc/test/read.cgi/hp/1166089001/
JavaScriptは難しすぎ
http://peace.2ch.sc/test/read.cgi/hp/1132400636/
JavaScript使ってるサイトは糞
http://peace.2ch.sc/test/read.cgi/hp/1093711210/
jQuery
http://jquery.com/
jQuery UI
http://jqueryui.com/
jQuery Mobile
http://jquerymobile.com/
Lo-Dash
https://lodash.com/
Backbone.js
http://backbonejs.org/
Underscore.js
http://underscorejs.org/
AngularJS
https://angularjs.org/
Knockoutjs
http://knockoutjs.com/
RequireJS
http://requirejs.org/
D3.js
http://d3js.org/
threejs
http://threejs.org/
おかげさまでシステムが完成して300万円で飛ぶように売れてますｗ
教えてくれてありがとうございましたｗ
どう致しまして。
http://peace.2ch.sc/test/read.cgi/hp/1410603104/l50
http://peace.2ch.sc/test/read.cgi/hp/1418395948/l50
毎回そうだけど、現行スレでライブラリ禁止の話が出ると次スレを乗っ取ろうとしてフライングして立てる人が出てくる
いつもの事ながら呆れる
この状態が何年続くのかね
JavaScriptは全部一つにまとめろって。
解答になってません
JavaScriptの質問なのにCSSでしか解答しない人には用はありません
テンプレを全く読んでないんだろうな
タブごと死ぬのです
JavaScriptが原因でブラウザが落ちるってヤバくないですか？
つまりJavaScriptが原因じゃないってことです。
http://qiita.com/koba04/items/4d13caf5ab4507974bf0
React.jsではJavaScript内にVIRTUAL DOMとしてDOM Treeのような構造体を持っています。
rerenderされる際に、その構造体の前後の状態を比較し、最小限の変更で実際のDOMに反映します。
この機能がいいと思います
どうですか？
JavaScriptで死ぬことも当然あるし、他の原因で死ぬこともある
ところで質問は？
ヤバくないですか？
って聞いてるのが分からないんですか？
それが質問だったのか
別に普通です
あなたがそう思うならヤバいんだろうね
頑張ってね
function f(window){
"use strict";
var global = (0,eval)("this");
}
f();
なぜこの方法で行けるのですか？
eval("this")だと確かにグローバルオブジェクトが取得できないのですが、上の方法でなぜ取得できるのか分かりません。
window.eval
(function () {
'use strict';
console.log(eval('this')); // undefined
console.log((0,eval)('this')); // [object window]
}());
Strict Mode 影響下にあるのだから this === undefined になるべきだと思うが、考え違いをしているのだろうか
なぜ後者だけグローバルオブジェクトを参照できるのか理解できない
そもそも、こういう場合はスコープの関係上、Function を使うものだと思っていたのだが…
(function(){
console.log(this);
})()
何がいいたい？
「Function を使ってグローバルオブジェクトを取得する方法を教えてくれ」という質問だと勘違いしてるんじゃない？
荒らしの立てたスレだから誰かが前スレで作られたテンプレ通りに立て直すものだと思っていたんだけど
(自分は制限ホストの為、立てられない)
>>36が触れているように実行するスコープが違うだけ。strict mode自体はあまり関係ない。
>>34の例だと、evalのコードはグローバルスコープで実行されるので、this===windowとなる。
説明すると結構ややこしいけど…もし興味があるなら、以下の説明をどうぞ。
evalの実行には"Direct Call"と"Indirect Call"の2種類の方法がある。
前者はローカルスコープで実行され、後者はグローバルスコープで実行される。
（他の関数には存在しない特性なので、要注意）
http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2
"Direct Call"になる（＝ローカルスコープで実行される）条件は、以下の全てを満たすとき。
(1) CallExpression の形で実行されること
(2) CallExpression を構成する MemberExpression の型が Reference であること
(3) Reference の base が environment record であること
(4) base の reference name が "eval" であること
逆に、(1)～(4)のどれか一つでも満たさない場合は、"Indirect Call"（＝グローバルスコープ）になる
http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.2.1.1
(1)～(4)を全部説明すると長くなるので、自分で調べるか、分からなかったら言ってくれ。
eval("this") だと(1)～(4)すべてを満たすので、ローカルスコープで実行される。
(0,eval)("this") だと(2)以降を満たさないので、グローバルスコープで実行される。
ありがとう
完全ではないが、理解した
("Indirect Call" は Function('return this;')(); と何も変わらないわけでバッドノウハウに留まる感じだが、知識として覚えておきたかった)
(function () {
'use strict';
var globalEval = eval;
console.log(eval('this')); // undefined
console.log(globalEval('this')); // [object window]
}());
> strict mode自体はあまり関係ない。
Strict Mode でなければ "Direct Call"と"Indirect Call" のいずれも this === window となるのだから無関係とはいえないのでは？
>>34は Strict Mode でもグローバルオブジェクトを参照する方法を求めて質問したのだと想像するが…
ES3 には存在しなかった
http://bclary.com/2004/11/07/#a-15.1.2.1
https://web.archive.org/web/20140802211018/http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/15-1_Global_Object.html#section-15.1.2.1
クロスブラウザの観点から考えると 2016/01/12 までは Function を使用するコードが無難になるのか
「Strict Mode 自体はあまり関係ない」と言ったのは、this に限らず他の変数にも言えることなのでそう記述した。
var hoge = "global";
(function(){
var hoge = "local";
console.log( eval("hoge") ); // local
console.log( (0,eval)("hoge") ); // global
})();
それに、非Strict Mode でも this が window 以外のことはいくらでもあるから、Strict Modeが関係あるというのは語弊があると思った。
まあこの辺は言い方の問題なので、あまり突っ込まないでほしいｗ
おっしゃる通り、"Indirect Call" は ES5 からの仕組みなので、例えば IE8 以前では上のコードは local,local になる。
この方法を用いるのは時期尚早だし、>>42の指摘のある通りそもそもバッドノウハウの部類なのであまりお勧めできないだろう。
https://github.com/lodash/lodash/wiki/Changelog
またいくつか関数が増えているようだ。
荒らしが立てたスレでも通常通り進行できるなら問題なくね
ちゃんとしたテンプレでスレ立てたところで、そこに荒らしが来るのは分かり切ってるし
それよりもスレが乱立しすぎてそれぞれが過疎ってしまうことの方が恐ろしい
http://peace.2ch.sc/test/read.cgi/hp/1410603104/
http://peace.2ch.sc/test/read.cgi/hp/1418395948/
http://peace.2ch.sc/test/read.cgi/hp/1422084185/
あくまで避難先にしてテンプレ固まり次第早々に建てたほうがいいよ
そしたらまた建てなおされるだけだぞ。
それが嫌だって言ってるんだが。
document.title = 'a'ってやれば勿論上書き輪出来るんですが取得だけできないようで・・・
どういう仕組みで出来るようになるのでしょうか？
configData.translatedStrings.title
新しく立てられても放置すれば問題ない
title要素がないんだから仕様通りでしょ
なんか笑えてくる
お前は放置するんだよな。
うん。
で、お前だけが書き込むのか？
今まで放置され続けてきたのに今更何を言ってるのか
そんなに使いまわしたいなら君が率先して>>11の若いスレから使ってきなよ
JS側にそういう仕様があるわけではない
Chromeにそういう機能が付いてる
> それに、非Strict Mode でも this が window 以外のことはいくらでもあるから、Strict Modeが関係あるというのは語弊があると思った。
> まあこの辺は言い方の問題なので、あまり突っ込まないでほしいw
了解した
荒らしの立てたスレを使うから荒らしが調子に乗って新スレを立てる
多分、近いうちにvol.124も立つだろう
使われると分かれば間違いなく立てる
立てても無駄だと理解させないと駄目
ホスト制限ない人が立ててくれれば有難い。
http://fiddle.jshell.net/fH4cC/167/show/
http://fiddle.jshell.net/vSqKr/43/show/
ありがとうございます
知らないうちにそんな機能が付いてたんですね
http://peace.2ch.sc/test/read.cgi/hp/1423910471/
荒らしが重複スレを立ててるな
立てた本人が責任を持って消化しろよ
何個もこの板に乱立すんな
http://qb5.2ch.sc/test/read.cgi/saku/1297500681/
■現行スレ
+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1423915644/
■荒らしが立てたスレ
http://peace.2ch.sc/test/read.cgi/hp/1410603104/ (vol.121)
http://peace.2ch.sc/test/read.cgi/hp/1418395948/ (vol.122)
http://peace.2ch.sc/test/read.cgi/hp/1422084185/ (vol.123)
http://peace.2ch.sc/test/read.cgi/hp/1423913913/ (vol.123)
http://peace.2ch.sc/test/read.cgi/hp/1423910471/ (vol.123)
とにかくお疲れさま
ネトウヨかよ
あるスレを淡々と消化していけよ
しょうもない
スレを立てる時に間に余計なテンプレを挟まれたらしい
http://peace.2ch.sc/test/read.cgi/hp/1423913913/12n
「荒らしが関与したスレ」にすれば御幣がなかったかもしれないな
じゃねーよクズが
スレ立て権を無駄に消費すんな
先に立ったスレに優先権があるんだからそのスレを粛々と使っていけばいいだけ
次スレはいくつできるだろうかね？ｗ
vol.124でも無駄に新スレ立てるんだろうな
手間かかるし、混乱と喧嘩が絶えないし、良いこと無いように見えるけど。
2chに要望を出すか、2chに代わる掲示板システムを君が開発してくれ
たてるなよ。たてるなよ。
ダチョウ倶楽部ですね？
それに新規に建てる事なんていくらでも出来るし自動で建てる事のメリットはほぼ皆無
精々スレ番がちゃんとインクリメントされるぐらいだ
同じスレグループは同一リストに入れる事も出来るし
スレ立てボタンを押す。いいね。面白いｗ
こっちを先に使えよ
アホかよ
+ JavaScript の質問用スレッド vol.121 +
http://peace.2ch.sc/test/read.cgi/hp/1410603104/
一時的にwindow.hogeに値を入れて削除したい場合はwindow.hogeにundefinedを代入すればいいんですか？
それともdelete window.hogeしたほうがいいですか？
+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1423915644/
値を代入する前と同じ状態にしたいなら、delete
var hoge = 1;
(function(){
'use strict';
console.log(window.hoge);
delete window.hoge;
console.log(window.hoge);
}());
これ実行すると Uncaught TypeError: Cannot delete property 'hoge' of [object global]って出てdelete出来ないんですがなぜですか？
ちなみに'use strict';を消すとdeleteしたら２番めのconsole.logでundefinedになってくれました
なんでstrictモードだとこれでhogeを削除できないんですか？
質問は下記スレッドへ
+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1423915644/
荒らしいい加減にしろ
http://peace.2ch.sc/test/read.cgi/hp/1423915644/21
欠点
シングルトンがある場合、往々にして、システム内のモジュール同士が密結合していたり、 ロジックがコードベースのあちこちに散らばっていることを示します。
隠れた依存関係があること、複数のインスタンスを作成するのが困難なこと、依存関係をスタブで表現しにくいことなど 様々な問題により、シングルトンのせいでテストがより難しくなることがあります。
http://blog.yuhiisk.com/archive/2014/09/21/javascript-pattern5.html
---
この理屈に納得できません
「シングルトンがあるからモジュール同士の依存関係が出来る」となぜいえるのでしょうか
http://peace.2ch.sc/test/read.cgi/hp/1423915644/
↑のスレのタイムマシンみたいですね
オリジナルの質問は↑にしかないのでここは過去に戻りたい方向けのようです
こっちで質問し直しただけですが？
変な言いがかりはやめてもらえますかね
-[]って使い道ある？
回答はあちらにスレにお願いします
なりすましをやめて下さい
あなたがなりすましかもしれないね
特に困った記憶がありません
なぜgotoがなくても問題ないのでしょうか？
無理やりスパゲッティコードでも
文脈の外へgoto また文脈の中へ gotoくらいなら
callback関数でなんとかなるからかな
goto文が複雑に入り乱れたコードになると
さすがにほぐすのは大変だろうけど
違う違う
breakとcontinueにラベルを付けられるからでしょ
実質gotoと同じ機能だ
continue は行き先が決まってるし
break は元のブロックの内部に戻れないぞ
実質同じって事は仕様的に一緒って言う事じゃなくて通常使いの範疇で役割が一緒って事だ
(要するにネストしたループ内からの脱出)
ブロックの中に戻るなんてCでもまず間違いなくやらんぞ
それとcontinueもbreakと同じようにラベル使えるけど
1000円分のビットコインがもらえます！
https://bitflyer.jp/gift/fn0tlipl
外部ウォレットに送金できるので、とにかく一応もらっておくといいです。
C だったら long_jump 使うことはあるんじゃね？
setjmp, longjmpだな
それは基本的にブロックどころか関数外に飛ぶ為のもんだ (スタックポインタをいじる為のもん)
> ふと思ったのですがjavascriptにはgotoがありませんが
> 特に困った記憶がありません
> なぜgotoがなくても問題ないのでしょうか？
gotoの代わりになるものが存在するから。
1. 関数呼び出し、return
2. continue、break
3. for
4. if ～ else
5. try ～ catch （throw）
こんな所かね？
これらの機能がない言語っていうのもあって
例えばアセンブリ言語なんか、3, 4, 5 が無いし
C言語でも5がない。
実はgotoは1～5の機能を実装できる万能機能。
しかも1～5では不可能な、どこにでもジャンプできるという高機能な点もある。
じゃあgotoだけがあればいいじゃん？って思うかもしれないけど
歴史的にはgotoが先に生まれて、そのあとgotoの「どこにでもジャンプできる」というのは
コードを著しく複雑にするというのが判明した。
「どこにでもジャンプできる」というのは欠点とみなされたわけ。
そののち制限されたgotoとして1～5の機能が生まれた。
gotoが無いと困る言語っていうのは、1～5の機能が無いか、
あってたとしても少し機能が足りないから。
随分適当だな…
gotoの代わりになってるのは2.5.だぞ
> 実はgotoは1～5の機能を実装できる万能機能。
ジャンプ出来るのは関数内だけだ
そう考えると関数を越えられる5も違うと言える
ようするに2だけ
俺が言ってるGOTOっていうのは、
C言語のGOTOじゃなくて、BASICのGOTOだよ。
もちろんVBとかじゃなく、初期のBASICね。
BASIC・・・1964年生まれ
C言語・・・1973年生まれ
> ジャンプ出来るのは関数内だけだ
BASICのGOTOは本当にコードのどこにでもジャンプできた。
行番号指定でどこにでもね。
関数の呼び出し（そもそも関数がなかったが）の代わりとしても使えたし、
当然returnもGOTOで実装。
3と4はBASICにもあったと思うが、
これもGOTOで実装しようと思えば出来る。
2はBASICにあったかな？ なかった気もするが。
GOTOの元をたどれば機械語のジャンプ命令に相当するんだよ。
その流れからBASICにもC言語にもgotoという名前で実装された。
その時にgoto（ジャンプ）の代わりになるものが追加された。
それが>>119で書いた内容。
だけどまだ足りなかった。特に5の例外ができるのはかなり後だったね。
C言語では今でも例外がないからgotoが使われることがある。
エラーが発生した時にgotoで関数の後ろに飛ばすんだよ。
そのほうがスッキリかけるから。
最近の言語はほぼ全て例外をサポートしてるんで、
JavaScriptだけでなく最近の言語はgotoなくても困らないよ。
アドバイス欲しいんですがファイルをアップしたら見てもらえますか？
ダメそうならもうちょっと考えます
でおｋ
ｊQueryのスクロールはscrollTopの場合、ブラウザ依存があるから注意な
http://less.carbonfairy.org/post/941824993
jQueryは役割終了しているけれど、これを有料で布教して食っている、非技術系デザイナーのクズが少なからず存在しているからな。
因みに、ここ2年のJS実装では、匿名関数が本当に無名関数になった。jQuery布教者どもが匿名関数を何故か無名関数無名関数とほざいていたからか、JSが折れた形ｗ
テンプレ見てなかった
すんません
でもjqueryは書くほどのレベルじゃないっていうかホントに初心者用参考書のレベルなんです
コードは間違ってないと思うんだけど…
とりあえず後で書いてみます
>>124
ありがとうございます
ちなみに使用してるブラウザはchromeです
後でコード書きますんでよかったらご指導お願いします
>>125
正直この業界に足を踏み入れたばかりなので無理関数とかわからないです
jqueryって嫌われてるんですかね？やっぱjsのが現場で使いますかね？
一番使われてるライブラリだよ。
原理主義者はどの世界でも意味不明だなｗ
いや、マジわからんｗ
それも似ているがやや違うと言った物が多いので、jQueryを使い続けることは混乱の元になる。
その冴えたる例がProxy。いくらネイティブでProxyがThenableを考慮してくれたからといって、
同期/非同期の差で躓くことは多い。
もういい加減標準機能のポリフィルに切り替えていった方がいい。
標準で書くのとjQueryで書くの
標準で書いたほうが短くなる例
一つでもありましたっけ？ｗ
というレベルだよな。
探せば見つかるかもしれないレベルだ。
明らかにjQueryの方が上だよ。
なにを言ってるんだ？？？
Q.DefferdとPromise、Q.ajaxとfetch、animeteはanimateだし、
長さはほぼ変わらないよ。
でも機能的には標準のほうが上だし、後から出た分APIとしてもちゃんとしてる。
だからこそjQueryを使う意味は無い。
まだ標準で不足してるのはDOMの比較部分の一部などだが、そこだけjQueryのサブセットか何かを使えばいい。
ワロタｗ
単語の長さじゃないよ。
同じことをやるのにどちらが短いかだよ。
$(document).on('click', '.class', function() {
$(this).toggleClass('state', 'active');
})
例えばこれと同じことを標準だけで書いてみてよ。
そういうニュアンスで言ったつもりだが。
DOM操作周りはまだ標準が不足してるからライブラリを使えばいいと言っている。
ただしClassのtoggleは標準機能を使うべき。
だがjQueryを使うとどうしても全体、不要なとこさえがjQuery流になってしまいがち。
だからポリフィル＋最低限のライブラリでないといけない。
document.queryAll('.class').map(e=>
e.onclick = e => e.classList.toggle('state', true)
)
ちょっと違うね。
それだと.classの要素が動的に増えた時に対応できない。
onclick属性を使ってるから複数のイベントハンドラに対応できない。
toggleClassの所は俺が間違えたから訂正しておく
$(document).on('click', '.class', function() {
$(this).toggleClass('state');
})
$(function() {
var nav = $('#nav');
nav.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
nav.fadeIn();
} else {
nav.fadeOut();
}
});
});
画面をスクロールするとnavが表示されるようにしたいのですがうまくいきません。
先輩曰くcssのpositionのせいで動かないらしいんですが具体的に何がどうなったら動かないっていうのは説明できない(わからない)そうです
ブラウザはchromeです
よかったら知恵を貸してください
display: block;
width:100%;
height:40px;
background-color:rgba(0,0,0,0.5);
position: fixed;
top:90%;
z-index: 255;
overflow-x: hidden;
}
こんな感じです
先輩が言ってたpositionはnavじゃなくてサイト全体でposition使いまくっているからうんぬんだそうです
マジでわからん......
$(document).ready(function() {
$("#me").click(function () {
$("#nav").fadeIn();
});
});
ちなみにクリックでのnavの表示は上手くいきました
さらにscrollTopが動いているかどうかを同様に確認する
そこから原因を推測して修正する
断片的なのでこれくらいしかアドバイスできない
もしピンポイントの指摘が欲しいなら>>2のサイトに再現コードを貼ることだね
もはやjQueryの機能を標準で再現できるかという話になってないか？
そこまで拘るのならもっと一般的なユースケースを挙げてほしいね。
まあそれはいいよ。
結局jQueryを前提にしたようなものしか出してこないだろうし。
ありがとうございます
とりあえず書いてみました
制作途中なんで凄く汚いですがお願いします
http://jsdo.it/test_joy/cTjA
https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode
確かにその先輩の言う通り、サイト全体を position: absolute; にしてるのが良くないね
本当ならサイト全体の構成を直すべきだけど、とりあえず
「$(window).scroll」 → 「$("#wrapper").scroll」
にすればいける
ありがとうございます！
時間的に全体をなおすのは難しいので#wrapperにつけることにします
ユースケースの話をするなら「古いブラウザでも動くようにしたい」も
立派なユースケースだと思うけどね。
それは置いといてなんかユースケース出せるわけないみたいなこと言ってるし、
想像力のないあなたに一般的なユースケースを。
ページ上にフォームがある。このフォームでsubmit（input,button関係なく）が
押された時に、二度押しを防ぐために、そのフォームに含まれるinput要素全てを
disabledにしたい。そして色も変えたい。
ただし、ページ上にフォームは複数あることもあるし一つもないこともある。
全てのページ、すべてのフォームでこのような処理を行いたい。
2度押し防止のdisabledをやったことがない人はいないと思うんで。
jQueryはブラウザ間の誤差を埋めて貧弱な標準機能を補完するために生まれたと思うが。
<INPUT TYPE="text" NAME="fugafuga">
<INPUT TYPE="hidden" ID="hogehoge" NAME="hogehoge" value="">
<INPUT TYPE="SUBMIT" VALUE="送信" ID="pekepeke" NAME="pekepeke">
</FORM>
<script>
document.forms.enq.hogehoge.value="saitama";
</script>
上記では、enq.hogehogeの中をJavaScriptでsaitamaにしておりますが、
enq.fugafugaの中で入力した値を、「送信」ボタンを押したタイミングで、
enq.hogehogeの中の中に入れるようにするには、どのようにしたらよいでしょうか？
例えば、fugafugaに「日本」と入れて送信した場合、hogehogeにも「日本」が入ってるような感じです。
たしかにそうですね。
だけど古いブラウザでも動くと言うのは事実なので、
少しいい方を変えて「特定のブラウザの固有の問題を回避して」
っていうのがよりよい言い方かもしれないですね。
ブラウザ固有の問題というのは、ブラウザのバグだけでなく単にその機能がない
っていうのも含まれるわけですが、ポリフィルはその足りない機能を埋めるのに対して
jQueryは埋めるのではなく、代わりになる機能をDOM標準よりも
もっといい形で提供したもの。
どんなにHTMLやJavaScriptが発展して標準化されたとしても
ブラウザ固有の問題は無くならないでしょうしね。
最新のSafari2.1.3が、新し目のSafariバグ対策がされているのも記憶に新しい話。
http://blog.jquery.com/2014/12/18/jquery-1-11-2-and-2-1-3-released-safari-fail-safe-edition/
こういうのは正しい書き方をしているのに、ブラウザのバグで動かないわけで
見つけづらいバグになる可能性が高い。
ブラウザ固有のバグに比べたら少ないかもしれないが、だからと言ってjQueryを盲信すべきではない
2.modelを変更
3.modelのイベントを、viewがハンドリング
4.viewが自分を変更
みたいな処理がありますが、
viewは1の時点で4の処理が想定出来ます
なので
1.viewでdomイベントをハンドリング
2.modelを変更
3.viewが自分を変更
という処理も出来ると思いますが
何故viewはmodelのイベントをハンドリングするのでしょうか？👀
modelを変えるのは、そのviewだけとは限らないからだよ。
modelは色んな物から書き換える。
例えばカレンダーに新しいスケジュールを登録したら
カレンダービューが変わるのは当然として、
今日の予定ビューも変わるだろうし、
TODOリストも更新するかもしれない。
日付が変わったら今日の表示も変えないといけないし
スマホから登録したら、PCでみたブラウザのリアルタイムで変えたいかもしれない。
ビューがモデルを変えた時にビューを更新するだけだと
それ以外のビューが同じモデルを参照している時の処理が面倒になる。
モデルはいろんな処理によってどこからでも変わる可能性があるという前提で
変わったらそのイベント通知がきてビューを更新とすることで
何をきっかけに変わったとしても対応できるようになる。
ありがとうございました
そもそもこの先はObservableの時代だと思う。
var mouseDowns = document.queryAll('.class').mouseDowns;
for ( evt on mouseDowns ) evt.target.classList.toggle('state');
とES7の時代では書けるらしい
入力を受け取るのはControlでViewはその橋渡しをするだけだ
それは本来のMVCじゃなくて
ウェブ用にへんに歪められたMVC2
それはJavaScriptのフレームワークを知らない人の意見
何か良い方法は無いでしょうか。
chromeで動作を見てみたのですがlocation.reload()だと画像もリロードしてしまいます。
location.href=location.hrefでも同様です。
クエリの部分に変更を加えた場合
（たとえばexample.com/reload.phpでリロードを行う場合、location.href="example.com/reload.php?time="+Date.now();などとする）
目的の動作になるのですが、この方法以外で実現可能でしたら
教えていただけないでしょうか
試してはいないが
img の srcをロード後にスクリプトからあてがうようにすれば
htmlがリロードされても画像はローカルキャッシュが効くのではないか？
chromeのスーパーリロードは Ctrl + Shift + R で意識的にしないとできなかった気がするが
ほんとにそれキャッシュからではなくサーバーからデータ受信してる？
本来のMVCは
入力→C→M→V→出力
だよ
目的はModelからその他を分離させることだから、Modelが中心
というはアリなのでしょうか？
そういう例が「backbone.jsアプリケーション開発ガイド」にあるのですが。
英語になりますがここに書籍と同内容のサイトがあります
http://addyosmani.github.io/backbone-fundamentals/#application-view
AppViewのfilterOneメソッドの中で、
todo.trigger('visible');
と、todoモデルに対してイベントを発行。
そのイベントをTodoViewがハンドリングして、toggleVisibleメソッドを実行。
つまり異なるビュー同士が、モデルを介してメッセージをやりとりしている形です。
しかしモデルに対してvisibleというカスタムイベントを発行するのは何となく違和感があります。
でもモデル自体はvisibleの処理内容に関しては何一つ関知していないので、
こういう使い方はいいのでしょうか？
それだとModelControllerになってしまう。
でもMVCではなくView層とそれ以外の分離と考えれば変ではない。
ですね、ただリロードのためだけの特殊な事は余りしたくないのです
（クエリの変更を避けたいのもそれが理由です
>>165
すみません、コンソール見直したのですが間違っていました。
location.reload()などの方法だと画像などはキャッシュを全く使わないわけではなく
if-modified-sinceやif-none-matchなどを吐き更新を確認しているようです
ただ、更新のための通信自体は行われているので
クエリの変更によるリロードよりも遅く感じます
（developer toolsのNetworkタブで確認しても時間がかかっています）
サーバー側から吐くキャッシュコントロールのヘッダの種類も含めてもう少し見直してみます
これによって、それぞれのTodo項目の表示と非表示が切り替えられます。
という文章も出てきました。コレクションというのはbackboneではモデルの集合のことです。
JavaScriptがクライアントサイドである以上、
モデルに対しても表示まわりのイベント発行は許されるのでしょうか
そこまで分離してないというか
> 本来のMVCは
> 入力→C→M→V→出力
それはSmallTalkを知らない奴の意見。
本当のMVCは
Model ←→ View ←→ Controler
↑ │
└───────────┘
http://csis.pace.edu/~bergin/papers/mvcnew.gif
> 入力→C→M→V→出力
これはMVC2
JavaScriptの時代になってようやく本当のMVCの話が出てきただけ。
WindowsなどでGUIアプリを作っていた人間なら、本当のMVCを知っている。
その後でウェブが出てきて、MVC2をみて、なんじゃこりゃ？って思ってた。
そして、やっと本当のMVCができるようになったのかよって苦笑してる。
http://csis.pace.edu/~bergin/papers/ModelViewController.html
> Modelが入力イベントに対して反応するのはMVC的には変。
MVC的にはおかしくない。ウェブアプリで歪められたMVC2的におかしいだけ。
最近のJavaScriptはようやくデスクトップGUI波のことが出来るようになったから
本当の意味のMVCができるようになった。
本当のMVCではビューがモデルを変更する
> それはSmallTalkを知らない奴の意見。
ま、Smalltalk をうっかり SmallTalk と書いちゃう人の場合
自分も Smalltalk のことはろくすぽ知らないけどな！って自己紹介しているようなもんだから、
この人が書いていることも、どこまで信用してよいやら…
この資料が比較的簡潔でわかりやすくまとめられていてお薦め。
（最後の方すこし RoR ユーザー向けだけど、前半は一般論で参考になる）
「あの日見たMVCを僕たちはまだ知らない for RoR」
http://www.slideshare.net/shinnosukekugimiya/mvc-for-ror/7
その変化はそのControllerに付随するViewだけでなく
全てのViewに通知されるべき。
というのは参考になりました
そういうmodelのパブリッシュ性から、
>>167のように視覚的イベントもmodelで発行するという発想になっているのかもしれません
個人的には視覚的要素が絡むならviewがイベントを発行するべきじゃないのかと思ったのですが
viewがviewをobserveするというのはMVC的にないのかも
modelのイベントをトリガーしているのは実際にはCがしているということになるのでしょう
ModelとViewの関連性を疎結合にする必要がなければコントローラは
いらないって事なんだろう
これが理想に近い気がしてきました
どうしてもVがVMになってしまうというか、してしまいたくなるというか。
> なんだやっぱり>>166 の概念が正しいんじゃん。
だからそれはMVC2だって言ってるじゃん。
MVC2としては正しいよ。
SmallTalkを知ってる奴はやっぱり違うな
http://itjoho.atna.jp/
> Viewは視覚的なすべてを扱う。
> モデルにデータをリクエストして、それを表示する。
モデルにデータをリクエストして！
モデルにデータをリクエストして！
モデルにデータをリクエストして！
モデルにデータをリクエストして！
RailsとかJavaScriptとか
1998年に既にJavaで通った道に
やっとたどり着いただけなんだよな。
最先端のつもりでいるのに、15年以上前だったｗ
他のハンドラを反応させるためにイベントを起こすけど
そのイベントが誰に何をさせようとしているのか、
イベントを見るだけでは分からないので
プログラムの流れが読み取りにくい
デザインしたいだけの一般スクリプターには数字の計算が早くなるだけならあまり恩恵なさそうだが
ViewとModelの関係がリクエスト-アンサー型かオブザーバー型かその他かはMVCの本質的に関係ない
マイクロソフトがサポートを表明したばかりだね
すぱるタンに搭載されるかは不明
確かにゲームや画像処理などcanvas使う以外ではあまり恩恵がなさそう
５択のセレクトボックスを作る
選択によって１０点から５０点まで点数をつける
そのセレクトボックスを複数作り合計値を出力する
http://jsfiddle.net/
まずは自分で書いてみる
どうしてもわからない所があればまた聞きにくれば？
asm.jsは直接使うものではなくC,C++で作ったプログラムをそのままブラウザで動かすためのもの
文字通りアセンブラみたいなもの。あまり人が直接書けるようなものではない。
人が書くことを考えればSaneScriptが現実的。
バイトコードやネイティブコードになるわけじゃない
速度を最大限だそうとするとArrayBufferまみれになってとても常人が手を出せるものではない。
いちいちそんなのに合わせて書いてられないわ
http://d.hatena.ne.jp/jovi0608/20150219/1424322335
どう落ち着くかはまだまだ先の話みたいだ
昔のBASICコンパイラみたいに「ここだけ実数演算いらねーから速くしてくれ」
みたいに使えれば楽なんだが
・オブジェクトの拡張不可→連想配列が必要ならMapを使う
・任意静的形付け
・クラスベース（＋プロトタイプベース）
・配列の特殊化
・その他strict modeの強化版のような制限
となるもよう。
これだけでも相当速くなりそう
今だって十分に整理されたコードでは型推論が効いてる。
Aの場合、Bの場合、そうでない場合のフォールバックとなっていたネイティブコードが
Aでなければ即ランタイムエラーにできて、何分の１にもなるのと、チェックを省けるケースも増えるだろうけど全く要らなくなるわけではないから。
基本的にCPUのキャッシュや投機にヒットしやすくなる程度の効果だと思う。
console.log(t);
setTimeout(f, t);
}
f(1000);
1秒待機して実行したいんですが、これ2回目以降はundefinedが出力されるのはなぜですか？
console.log(t);
setTimeout(f, t, t);
}
f(1000);
setTimeoutのfは引数が無いでしょ
こんなの？
http://homepage3.nifty.com/iromono/hardsf/ctccomp.html
やっと動かせたRGB→HSV色変換関数のasm.js版
Firefoxは122ms→374msで3倍遅くなったのにChromeでは241ms→62msに4倍速くなって驚いた
まだ変数とかそのままだから>>199のようにすれば高速化できるのか
一般に小さくてとても軽い関数では効果はでない。asm.jsで書くなら書けるところ全部をそうしないと。それが罠。
+ JavaScript の質問用スレッド vol.121 +
http://peace.2ch.sc/test/read.cgi/hp/1410603104/
サーバサイドをやるのはちょっと怖いです
みんなやってるんですか？
はい次の人
ここを見てやったらひな形サイトがすぐに表示できました
expressの使い方はまだ分かりませんが
publicの中にindex.htmlを作成したら、それが表示されました
動的要素のないサイトならすぐにサーブできますね
Chromeは既存のV8のエンジン内でasm.jsのコードを高速に動かす最適化がかなり進んでる
Firefoxの場合はAOTの別エンジンで実行するから、コードの一部だけをasm.js化しても
オーバーヘッドの方がデカくなってしまう
ゲームみたいに全部asm.jsだと超高速に動くようになる
現状asm.jsで早くなるのは汎用的な最適化によるもの。
他言語→javascript初心者なのですが、記述方法がいろいろありすぎて困っております。
例えば
Web上に入力されたキャラクタの名前を取得したく、
初期実装が(id=character-name)の中身で今後は取得先の変更を考慮するとして、
const charname = (function getCharacterName(){return jQuery('#character-name').val();})();
const charname2 = (function(){return jQuery('#character-name').val();})();
const charname3 = jQuery('#character-name').val(); //入力から取得
const charname4 = getCharacterName(); //詳細は別で記述
上4つはすべて同じ処理を指定ますが、一般的、もしくはこれがわかりやすい、もしくは何もわかってない！というのはどれでしょうか？
あとconstはまだ使うべきではありませんか？
まず全体に言えること
> jQuery('#character-name')
ではなく $('#character-name') と書く方がいい。
理由はそのほうが短いから。
もう一つ。constは対応していないブラウザが多いから注意
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
> const charname = (function getCharacterName(){return jQuery('#character-name').val();})();
これは無駄な処理をしているだけ。一回しか使われない関数を作って呼び出してる。
> const charname2 = (function(){return jQuery('#character-name').val();})();
これも上と同じ。ただ関数に名前をつけてないだけ。
> const charname3 = jQuery('#character-name').val(); //入力から取得
問題なし。（ただし「全体に言えること」は除く）
> const charname4 = getCharacterName(); //詳細は別で記述
中身とどういう考えで関数にしたかによる。
中身が「return jQuery('#character-name').val()」だけであるなら
俺は多分関数にはしない。
古典的なonとoffを切り替えるパターンです
$function() {
$("img[src*='_on']").addClass("current");
$(".human img").hover(function(){
if ($(this).attr("src")){
$(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
}
},function(){
if ($(this).attr("src") && !$(this).hasClass("current") ){
$(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
}
});
});
記述的におかしい部分はありますか？
ご指導いただければと思います
&はjsファイル上では"&"です
よろしくお願いします
回答有難うございます
>$('#character-name')
こちらの環境(wordpress)で何故か$記述だとうまくいかなかったのでjQueryと記述してました。
単純に理解不足＆設定ミスだと思われます。解決次第$で記述します。
処理に関しては将来的にデータベースから受け取ったり、他人がネットを介して入力した情報を何らかの方法で受け取ったりと
する可能性を考慮しております。複雑化した場合行数的には1～20行程度の処理を想定しております。
1行で済ませされる間は変数名に気を使ってやれば
3の記述がすっきりしますね。constは外します。未来の自分がやらかさないか不安ではありますが・・・。
アウトラインの可能なエディタを使い、複数行化したら2に変更すれば良さそうですね。
別のところに記述するのはソース内ツリー化に対応してるエディタが増えてきている昨今だと
別の所で呼ばない以上離れて記述するのは意味なさそうですね。
ありがとうございました。
> 記述的におかしい部分はありますか？
$function() {
↑これ
自分のことながら見た瞬間笑ってしまいました
書き直したのですがやっぱりうんともすんとも言いません
正直お手上げです
wordpressの使用忘れたけど、標準でjQuery入っていたはず。
使えないとしたら、wordpressが互換性のために、noConflictを使って
$を削除しているのだろう。そういう時は以下のようにすればOK
jQuery(function($) {
あなたのコードを全てこの中に書く
});
場合によってはこっちのほうがいいかもしれないけど
(function($) {
あなたのコードを全てこの中に書く
}(jQuery));
この二つは実行されるタイミングが違う。jQueryのready()とかを調べると良い。
> constは外します。未来の自分がやらかさないか不安ではありますが・・・。
外すのはいいけど、代わりにvarをつけるようにｗ
古いブラウザに対応する必要があるならこれ。
その間で変なところを見つけましたら修正してから上げますのでご指導お願いします
currentを何のために使いたいのかのかよくわからん。
先に細かい所を指摘しておくと、
$(".human img[src]").hover(function(){
と書けば、余計な
if ($(this).attr("src")){ がなくせる。
あと、attrの第二引数に関数を使えばもっとすっきりする。
$(function() {
$("img[src*='_on']").addClass("current");
$(".human img[src]").hover(function(){
$(this).attr("src", function(index, attr) { attr.replace("_off.", "_on.") });
}, function(){
if (!$(this).hasClass("current") ) {
$(this).attr("src", function(index, attr) { attr.replace("_off.", "_on.") });
}
});
});
とりあえず途中だが、ここまで書いてcurrentの使い方に違和感を覚えた。
じゃあ課題として、とりあえず
8000行まで減らしてみ。
JavaScript入門書を見ながらさ。
最小限の知識しか持ってないのがバレバレ
違和感っていうのは、この例だとhover使わずに
mouseenterとmouseleaveに分けたほうが良さそうに見えるから
if ($(this).attr("src") と同じで、分ければ、下の
if (!$(this).hasClass("current") ) { はなくせる。
だがそもそも処理が対称になっていない。
対称でない処理はバグの可能性が高い。
あと、こういう画像切り替えは
一般的にsrc書き換えではなくCSSで行う。
JavaScriptではclassのみを変更し、
そしてCSS側でクラスに応じた画像を表示する
すまんｗｗｗ
自分のなかでまとめた結果ですが
jqueryでの処理はクラスの付与、削除をメインに
CSSにてクラスの有無でdisplay: none;とdisplay: block;を切り替える
というやり方のほうが簡単そうですかね？
まだ出先ですので家に帰りましたらこのパターンで書いて見たいと思います
無知の初心者にアドバイスいただきありがとうございます
24時くらいまでスレを見れませんがアドバイスありましたらよろしくお願いします
ぶっちゃけ典型的な画像入れ替えならこれだけでいいはず。
$(function() {
$(".human img").hover(function(){
$(this).toggleClass("hover");
});
});
.human img { background-img: url('・・・_off.gif') }
// とするよりimg毎に画像違うから、#img1 とかになるはず
.human img.hover { background-img: url('・・・_on.gif') }
・・・・いやｗ 普通CSSだけでやるかｗ
JavaScript無し
.human img { background-img: url('・・・_off.gif') }
.human img:hover { background-img: url('・・・_on.gif') }
URLをCSSにずらずら書きたくないにしても、
onとoffを入れ替える関数（正規表現で一行でできるはず）を作れば
このレスの一番上に書いたコード + 1行でできるはずなんだよな。
ここはjQueryスレじゃない。
消え失せろ。
過去のjsスレを検索したい時はどうすればいいんですか？
以前見た気がするから検索したいということもあるんですが
2chが西村以上の金の亡者に生まれ変わるので、過去ログはJIMという豚野郎
に金払わないと見られなくなります。おまけに専ブラも限定されます。
> 必要もないのにjQueryを乱用するのはやめい
必要かどうかを判断するのはお前じゃない。
自分のやり方を押し付けるな。
君がここで jQueryの話をさせたくないって必死なのはわかるが
君が来るまで、ここは平和に進行していたんだ。
荒らすような真似はやめてくれ。
せめて、jQueryを使わない実装でも書いてくれ。
君のレスは何の役にもたっていない。
>>247
字が読めなかったようだな
ここはjQueryスレじゃない。
消え失せろ。
やり方を押し付けるな？お前は全力でjQuery押し付けてるわけだが？
カス野郎
何も禁止じゃない
あえて言うなら禁止とか言うの禁止
http://peace.2ch.sc/test/read.cgi/hp/1423915644/ + JavaScript の質問用スレッド vol.123 +
http://peace.2ch.sc/test/read.cgi/tech/1404146244/ + JavaScript の質問用スレッド vol.117 +
ライブラリの作法なんかの話題はスレチになる。
ちょっとまてｗ
回答もだめなのか？ｗｗｗ
サーバで最初から埋め込んだ方がいいと本に書いてあったのですが
何故ですか？
処理がややこしくなるのでajaxで読んだ方がいいように思います
スクロールをスムーズにするにはどうしたらいいでしょうか？
ご教示お願い致します
> 処理がややこしくなるのでajaxで読んだ方がいいように思います
そこで処理がややこしくなると思う人は
アーキテクチャを考えられるレベルに来てないね。
初期データをajaxで読むか埋め込むか
どちらでも違いを意識しないような
作り方をすればいい。
それを考えるのがアーキテクトの仕事。
> スクロールをスムーズにするにはどうしたらいいでしょうか？
スクロールをスムーズにするっていうのが、アニメーションのことなら
標準のDOM APIにはそういう機能がないよ。
頑張りたい人（車輪の再発明）をしたい人なら自力で実装すればいいが、
まあ普通はjQueryのanimate()メソッドなどを使うね。
> もうhttp2の時代になっていくしバッドノウハウだよ。
確かに、IE11の時代に慣ればそうだが、
その時代は一体いつ来るんだ？
インライン関数（即時関数）の名前付けがどのあたりのブラウザからサポートしているか教えてください
全てのブラウザでサポートされてる
訂正。IE11がサポートしてるのはSDPY
HTTP2は将来的には問題を解決することができるかもしれんが
今すぐできる技術じゃないんで、現実的ではない。
サーバとブラウザでいい具合に調整してくれるんじゃないの？
その知識がないと、サーバーを選ぶことが出来ない。
ちょっと違うな
現行スレはこちら
http://peace.2ch.sc/test/read.cgi/hp/1423915644/ + JavaScript の質問用スレッド vol.123 +
（ム板はLRでjavascriptが禁止されてるので違います）
+ JavaScript の質問用スレッド vol.121 +
http://peace.2ch.sc/test/read.cgi/hp/1410603104/l50
+ JavaScript の質問用スレッド vol.122 + [転載禁止]©2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1418395948/l50
+ JavaScript の質問用スレッド vol.123 + [転載禁止]©2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1423910471/l50
その時代はいつかは来るだろう。
必要度が減少していっているものを新たに使わない、学ばないというのは原則。
誰も学ばないなんて言ってないんだが？
はい論破
今はajaxの結果もきちんと拾ってくれるっつうのに
jQueryもここで答えていいと思うんですけど
こっちの人が丁寧に答えてくれるよって誘導するのもありかもね
え、まじで？
たしかにサーバサイドJSがもはや一般的だから
そんなことも出来そうだけど
そんな時代になってたか
今のクローラっていうのはどちらかと言うとサーバでのスクレイピングというより自動化ブラウザに近い存在だぞ。
ありがとうございます
scrollTopメソッドをanimeteする方法はわかりましたが、これをscrollByに転用するのがうまくできなかったので諦めす
ありがとう
ありがとう！
現行スレはこちら
http://peace.2ch.sc/test/read.cgi/hp/1423915644/
そもそも、ライブラリはどこまで行っても簡単にする為のライブラリ。
それが１種類っていうならともかく、現在は山ほど出ているわけで、
jQueryで回答されるのは、迷惑なのだよ。jQueryわかってない奴に
とっては、余計なライブラリを読み込ませた上に、そこだけそんな
コードを押し付けられてるわけで。
他の奴の場合には、Prototype.jsで回答されましたなんてのが出てきた
りしたらもはや収集つかない。
この手の回答掲示板では、可能な限りライブラリを使わずにコードを書く
ことが定石。回答者の信奉してるライブラリだの書き方なんてのは、それ
こそ押し付けでしかない。
なるほど、では>>280のためにコードを書いてやってくれませんか
document.querySelectorAllでいいところにわざわざ$を使ってるのを見るとイラッとくるが、
document.querySelectorAllと書くのは煩わしい。
IE8では使えないわけで、俺にとっては毎回
（IE8では動かないコード）
querySelectorAll
と書いているようにしか見えないんだわ。
> IE8では使えないわけで、
？？？
IE7では動かないの間違いでした。
例えばこういうのは、querySelectorAllではダメな例。
$('.class').on('click', function() { });
そして質問者がどのコードが最もいいか判断すればいい
http://backbonejs.org/#FAQ-bootstrap
Instead of firing an extra AJAX request to fetch them,
a nicer pattern is to have their data already bootstrapped into the page.
ナイサーなパターンと言っているだけで理由は書いてないようです
やはりリクエスト数が減るからでしょうか
var input = document.getElementById("input1");
console.log(input.value);
って言う書き方は遅いからvar a = input.value;みたいに別の変数に格納しろって話を効いたことがあるんですが
var a = {
ago: 10
}
console.log(a.ago);
これもvar b = a.goみたいに入れないとだめってことでしょうか？
えとさ、1マイクロ秒速くして
意味があると思ってる？
意味があるときだけやんなさい。
殆どの場合ないでしょ？
最適化するなら、可読性に対して最適化した方がいい。
どうせ速度を最適化した所で誰も得しない。
>>295
一般論として速度のための最適化を人間の手でするべきではない
プログラム工程で一番重要なのはデバッグと保守なので、速度のために読みやすさを犠牲にしてはいけない
だから「入れないとだめ」って事はない
295や296の意見は正しい
ただこれはあくまで一般論で、最適化が重要になってくる局面もある
そういうレアケースに備えて話をするとドット演算子は遅いので、
オブジェクトで受けてやった方が良い
Hogeインスタンスと呼ぶのは変ですか？
DOMでは「input.value」と何度も書くのであればキャッシュした方が早い。
JSの生オブジェクトでは自然とインラインキャッシュが働くので気にしなくていい。
また、ChromeではDOM実装もどんどんBlink-in-JS構想でJS化されていってるから、一部では自然と最適化が効く。
おまえみたいなROMってるだけのやつが、単発で書く内容のほうが
スレの邪魔だよ
誰も拒絶してない件についてｗｗｗ
ここはjQueryのスレではない。ソレ以上でもソレ以下でもない。
jQueryで書く奴はお呼びではない。わかったか？
このスレにおいてjQueryは韓国と同じ
そもそも言語仕様の質問にリーディングの内容は関係ない
お前が言いたいことはわかっている。
わかってないのはお前のほうだよ。
知ったことじゃない。質問者によって
それがいいことだと思えば、jQueryで書く。
質問者はjQueryを知らないが故にそういう
コードを書いているのかもしれないわけだから。
jQueryを使わないコードがほしいという人は、
そのように言うだろう。
> IE8だとDOMの値を取得すると重いし変数に入れるべきだろ
重いかどうかを判断するのはお前じゃない。
実行してみて数十ミリ秒以下のような体感できないほどの
短い時間の差しかでない処理なら、速くするためだけの
コードは必要ないだろうという言う俺の意見を参考に
質問者が決めればいいだけの話。
お前の仲間が立てた方のスレに籠っとけ
こっちはリベラルな方のスレだ
お前がいるとスレのクオリティが下がるんだよ
願ったり叶ったりだｗ
もしくはHogeというクラスのインスタンスということを短く示したければhogeを使う。
ありがとうございました
W3C 仕様書とかだと「Hoge オブジェクト」は
「Hoge インターフェースを実装するオブジェクトのインスタンス」
の略である、みたいなことを書いてたりするから
「Hoge オブジェクト」が普通なのかな
var Hoge = function(){};
Hogeオブジェクトというと、
コンストラクタとしての関数オブジェクトHogeのことなのか
Hogeのインスタンスなのかが分かりにくい
Hogeインスタンスというと一瞬で伝わる
Hogeインスタンスというと、
コンストラクタとしての関数インスタンスHogeのことなのか
Hogeのインスタンスなのかが分かりにくい
fugaというと一瞬で伝わる
var a = new Hoge();
var b = {};
a＝Hogeオブジェクト
b＝オブジェクトb
厳密にはクラスが無いし
だからHogeオブジェクトになる。
ただし、Hogeオブジェクトをクラスにように使うことを想定している場合、
つまりnewを使って生成する場合、Hogeクラス（のようにみなして）
Hogeクラスのインスタンスを生成するという言い方をする。
実体と抽象という関係のオブジェクトとクラスではないということだろう。
もしくは上から下の継承ではなく、下から上の譲渡という考え。
[[Call]]を持ってるオブジェクトなだけだから。
var cr = [Array, RegExp, Date, Number, String, Error];
return Object.create(cr[Math.random()*cr.length|0].prototype);
}
var hoge = new Hoge;
このhogeもHogeオブジェクトと呼ぶの？
言い換えれば、hoge のプロトタイプチェーンに Hoge.prototype が含まれているなら、hoge は Hoge のインスタンス。
なので>>327の hoge は Hoge のインスタンスとは言えないだろう。
仕様書でも instance という単語はそういう意味で使われている
ES6からは@@hasInstanceを使って何をインスタンスとするか自由に決められる。
「オブジェクト instanceof 関数」である必要もない
「プリミティブ instanceof オブジェクト」も許容されるよう改善された。
>>329はなかったことにしてくれ
なのもどうかと思ってたが
null instanceof Null // true
とか
x instanceof StringOrNumber
みたいなのもできるようになるな
なにそれ怖い
const Base = {
[Symbol.hasInstance](o) { return Object.getPrototypeOf(o) === this },
new() { return Object.create(this) }
};
const Vehicle = { __proto__: Base,
new(kind) { return Object.assign(super.new(), {kind}) }
};
const Car = { __proto__: Vehicle,
new(name, type, maker) { return Object.assign(super.new('Car'), {name, type, maker}) }
};
let car = new Car('CX-5', 'minivan', 'mazda'); //Object {kind: "Car", name: "CX-5", type: "minivan", maker: "mazda", new: function…}
car instanceof Car //true
2つのjsファイルをwebpackにて一つのbundle.jsへとパックし、
devtoolオプションにてsource-mapを指定してソースマップを出力、
元のファイル構成が
app.js
foo.js
index.html
webpack後が
bundle.js
bundle.js.map
index.html
となり、ChromeでSettings -> General -> Enable JavaScript source mapsを有効化し、
index.htmlからbundle.jsをロードし、ソースマップから参照出来るパック前のapp.jsコード、foo.jsコードそれぞれにbreakpointを貼った所、
Chromeで再読み込みするとapp.js側のbreakpointが外れた状態でbreakpointが止まる為、再度の再読み込みをする前にbreakpointを貼り直す必要が出ています。
このような問題の解決方法はないでしょうか。
Chromeはバージョン 40.0.2214.115 m
webpackはgulp-webpack 1.2.0
です、ちなみにbrowserify 9.03でもbreakpointが上手く機能しませんでした。
ソースマップではなくdevtoolでevalを指定したらbreakpointが上手く機能しました
その後ファイルを増やすとbreakpointを設定しているのに止まってくれない箇所が発生しました
ただ、あとは自力で解決してみようと思います、ありがとうございました
同じドメインでのページ移動では何もしないのですが、
別ドメインへのページの移動、もしくはブラウザを閉じた時にイベントを発生させたいです。
unload系のイベントだと思いますが、そのような都合のいいことは出来ますか？
最も良い方法はServiceWorkerとセッションを結んでおき、切れたらログアウトさせること。
ありがとうございます。
ServiceWorkerは触ったことないので早速見てみます。
this.value="";だとリセットされたあとに1回Enterが押されて改行された状態になってしまいます
form1.addEventListener("keypress", function(e){
if (e.keyCode==13){
this.value="";
}
},false);
どうしたら改行あかないようにできますか？
keypress が DOMが更新される前に生じるのが理由だろうから
DOMが更新された後のタイミングでリセットすればいいだろう
input イベントか keyup イベント（ input イベントの後）
おー出来ました！ありがとうございます
こんなんでいいのかわかりませんが
form1.addEventListener("keypress", function(e){
if (e.keyCode==13){
this.addEventListener("keyup", function(){
this.value="";
}, false);
}
},false);
変なコード晒してすみません
最終的にWebStormだとちゃんとbreakpointが機能しました、参考にしたurlです
https://github.com/webpack/webpack/issues/238
Chromeのデバッグ機能だと、
devtoolがevalはwebpackのrequireを使用したソースだとbreakpointが機能せず
devtoolがsource-map(とinline-source-map)だと2ソース以上でbreakpointを貼った際に1ソースのbreakpointしか機能しない
となった為、Chromeのデバッグ機能はまだ発展途上だと言う事で諦め、WebStormを使う事に落ち着きました。
前に似た質問したときは消さない親要素にリスナ付けてtarget判定入れろろって言われたな
querySelectorAllで、sectionタグ下のimgタグは対象としたい。
→ document.querySelectorAll('section img')
しかし一方でsectionタグ下でもIDがexceptのdivに含まれるimgタグは除外したい
（section div#except img は対象外）。
このようなときにセレクタはどのように記述すればよいですか？
→ document.querySelectorAll('section img:not(section div#except img)')
では（案の定）ダメでした。
sectionの下のimgが必ず何らかのdivに囲まれてるとは限りません。
よろしくお願いします。
とか？
と
"abc".lastIndexOf("abc", 2);
の結果が同じなんですけど、どうして前者は-1にならないんですか？
文字列の後方から検索して特定のインデックスより前に存在しないかどうやって確認したらいいですか？
"cba".indexOf("cba", 2);
じゃだめなのかね
"abc".split("").reverse().join("")
jQuery ライブラリ 総合質問所 vol.4でも書きましたが、
jQueryでいいなら
jQueryならこれでいいだろう。
$('section img').not('section div#except img')
ただ、IDは一個しか無いのが普通だから、これでいいはずだし、
$('section img').not('#except img')
exceptは普通幾つもありそうだからこっちのほうが良さそうだが
$('section img').not('.except img')
document.querySelectorAll('section:not(#except) img')
だろ。
そのセレクタ指定は実は正しい。
取得できないのは:not()の中に子孫セレクタを使う方法にブラウザが対応していないから。
https://developer.mozilla.org/ja/docs/Web/CSS/:not
一方jQueryは:not()の中に子孫セレクタを使う方法に対応しているので、>>350のセレクタをそのまま書くだけでオッケー。
jQueryを使わずに一発で取得できる方法はないと思う。
(>>351だと<section><div id="except"><div><img>にもマッチするので不可)
ループを回して一つずつ確認するしかないだろう。
質問しても変な方向に切り返してきていちいち訂正するのが面倒くさいです
無視したら誠実さを疑われるのでスルーするわけにもいかないですし
たくさんの間違った知識で答える回答よりも確かな知識でjQueryで回答してくれる方が何倍も価値があります
Implement CSS4 Selectors #237
https://github.com/jquery/sizzle/issues/237
前方一致、後方一致、部分一致とかはあるけど、正規表現は無理
で対応できるんじゃないの？
jQueryがなきゃできないと誘導するための質問をあちこちに拡散して投じるというミエミエの工作なw
そんなもん、今はcontains()がIEだけのものじゃないから、誰でも簡単にフィルターできるんだよ、馬鹿が。
jQueryは終わってんだよ。いつまでも使ってんじゃねえよ、公害。
ただ使わないコードで肥大化するのは頂けないが
ライブラリスレ行っても同じ事やってる奴って一体なんなの？ｗ
>>357で言ったように、それは<section><div id="except"><div><img>にもマッチするので不可
>>364
自演と言われるのは心外だな。
自演でもないしjQueryを不必要に勧めているわけではない。既にあるjQueryでの回答が若干ズレてたので指摘しただけだ。
あと恥ずかしながら、.contains()を使う方法は知らなかった。できたらそれを使った方法を教えてくれるとありがたいが、可能だろうか？
細かなAPIはポリフィルじゃね。
あとは従来通りにやるならAngelerか、
Polymerとか使ってそもそも作り方を大幅に変えるって手もある。
> DOM操作系はReact的なもの。
ReactはDOM操作というより、フレームワークだから
HTMLページの一部にちょっとだけ取り入れたいって時に
不便なんだよな。ページ全体の再設計が必要になる。
将来的にはWeb Componentsでコンポーネントを作り
そのコンポーネント同士を結びつける（コンポーネント内部じゃなくてね）のに
DOM APIを使う。そのよりベターなAPIとして簡単に記述できるjQueryを
使うって方向に戻るんじゃないか？って思ってる。
こんな感じ？
var itr = document.evaluate('//section//img[not(section//div[@id="except"]//img)]',document,null,XPathResult.ANY_TYPE,null);
var res=[];while(e=ret.iterateNext()){a.push(e);};
>>373
要するにAngeler.jsに入っているようなjQueryのミニマムサブセットがいいんじゃないの？
ちょっと取り入れたいだけなら別もそれも要らなくて、自前で関数数個書けばいいだけと思うけど。
あれこれ、自前で関数作っていくと、
jQueryでいいんじゃね？ってことになるんだよ。
もちろんあんたがそうであることまで否定したりはしないよ。
でも今はちょっとだけ何かがほしい時大きなライブラリは不便っていう一般的な話をしているんだよ。
だから大きなフレームワークの導入じゃなくて、jQueryのような小さな
ライブラリを使おうって話をしているんだが。
だから隔離スレができたというのに
ふざけるのもいいかげんにしろ
圧縮とミニファイの区別をつけてくれ。
古いブラウザにも対応した、jquery-1.11.2.min.js で94KB
最新だけで良ければ、jquery-2.1.3.min.js で83KB
これはミニファイで、圧縮した状態なら32.6KB
jquery-2.1.3.min.js 29KB だよ。
もちろんキャッシュが効くから、最初の一回目にしか転送は必要にならないし、
GoogleなどのCDNが使えるから、速くてサーバーの負担にもならない。
本質的なコードの量を削減して転送量を減らすか。
ライブラリを使わずに、長いコードを書いて
転送量を増やすかの違い。
単に自分もjqueryじゃない回答も書けばいいだけだろ
質問者にしてみればいろんなケースの回答があった方が便利なのは当たり前
はい論破
便利なスレの方が隔離スレかよ
不便なスレ方が隔離されてるだろ常識で考えて
誰の得にもならない愚行だよ。
隔離スレの存在意義は、質問者がライブラリを使用した回答を期待している場合と、
多少のライブラリの良し悪しについての雑談のため。
布教は誇示は対象外だから他所でやってくれ。
どうやったら押しつけられるんだよ
超能力者かよ
ライブラリの話題が出ようが、使うも使わないも自由
当たり前のことだろ
書くも書かかないも自由だし使うも使わないも自由
簡単なことです
現にVirtualDOMと競合してるわ、よりコンパクトなlodashの利用に移ってるわで縮小傾向にある
過去の資産が多いか利用者が多いのならそれが選択の一つにはなると思うがjQueryは
資産も多いし利用者も多いし実際便利だから使っても良いなと思いました
jqueryとはまた別じゃないの
というか想像力がない。
jQuery前提の設計思考ばかりしてるとこうなるんだな。
こわっ
ブラウザ側で本DOMを操作するとメモリ上の仮想DOMとずれてしまい上手く差分書き出しが出来なくなるのよ。
jQueryは本DOMを操作するライブラリだから、操作自体がVirtualDOMと競合してしまい併用が出来なくなる。
あと、VirtualDOMにしたからと言って仮想DOM構築にはコストかかるよ、
まあブラウザ側の本DOM構築コストよりは遥かに安いから気にしなくても良くなるけど。
一応ReactにはshouldComponentUpdateっていう仮想DOMの再構築をするかの判定メソッドを使ってさらにチューニング出来る。
なるほど
併用自体が駄目になるのか
実際に表示してみないと計測できなくない？
ブラウザごとに変わる可能性あるから。
バーチャルドムはそのへんどうしてるんだろ
それどころか通常のDOM APIも併用できないよ。
React使うなら、React経由でしかDOMをい
じれないと思った方がいい。
React使ったらこんなにコード長くなるわけ？
http://blog.zigomir.com/react.js/jquery/2015/01/11/jquery-versus-react-thinking.html
ライブラリと違ってフレームワークはこれが怖いんだよな。
完全にフレームワークにのっとった開発にしないといけないから混ぜるのが難しくなる。
React本当に普及するの？すぐに廃れるんじゃ？っていう感じ。
それよりかWeb Componentsの方が期待できるんだよな。DOM標準だし。
単に要素を拡張して新しい要素を追加するだけだから、
新しいタグが増えたぐらいの感覚でいい。
そこから発生したイベントは、前と同じくDOM APIやjQuery APIでつなげていく。
シンプル・イズ・ベストだと思うな。
var width = $('#hoge').width();
をバーチャルドムでできるの？
Reactは構造上一つのクラスでView・Controllerを持つから、クラスの肥大化を防ぐのがユーザの手に委ねられたのが開発時に気を付けたい所
>>395
componentDid(Update | Mound)でjQueryで取得しても良いし、
Reactの作りに従って
render: function() {
var width = this.hogeTxt.length;
return ( <div id="hoge">{this.hogeTxt}</div> );
}
としても良い、最適化するならjQueryは毎回のselectorが冗長かつ重いからReact風にした方が良いかも
jQueryなら83KBでいいのに
小規模でReactはFramework部分の記述率が多い印象、
逆に規模大きくなるとjQueryだけだとカバーしきれないから今までもBackbone(& Marionette)やKnockoutを使うようになってたし
ウェブサイトやウェブページに使うぐらいなら
jQueryで十分だと思う。
っていってるけど>>357=>>350なの？
>>350の条件はそれが不可なんて言ってないと思うんだけど
・sectionタグの中のimgが対象である
・div id="except"中のimgは除外する
・全てのimgがdivに囲まれているわけではない（他の要素に囲まれてるとは言っていない）
つまり＞<section><div id="except"><div><img>
これは条件に合致してると思うのだけど
質問者も解決できたでしょ。
http://dsuket.hatenablog.com/entry/2014/12/02/125230
> ん？ちょとまて！ React も Virtual DOM使ってるんじゃなかったのかよ。
> Backboneに負けるのかよ！！
こんな程度らしい。
そのBackboneとjQuery。比較するまでもないよね？
どう考えてもライブラリの話題禁止とか言ってる場合じゃない
時代に取り残されるわ
全くライブラリらしい物から、ES7やHTML.nextで標準に入りそうな機能の物まで挙がってるし話は複雑だよ。
今のいろんな機能はライブラリを元に書かれることも多いしね。
そうなればライブラリというよりただ先行実装版やポリフィルを使ってますということになる。
ただし時が流れ標準のほうが熟成してくるとライブラリが取り残されることになる。
今その状況なのがjQuery。
2017年にはVistaのサポートが終わってIE9も切れる
このスレの意味が無いｗ
ウェブサイトの作り方じゃない。
ウェブアプリを作るならそれでもいいけど、
いわゆるホームページ＋α的なものだとやり過ぎ。
だから、
ウェブアプリ＝フレームワークを使う（jQueryもDOM APIも使わない）
ウェブサイト＝jQueryを使う。
の二極化していくんじゃないかな？
フレームワーク or jQuery
どちらにしろDOM APIはもう使わないよ。
HTMLの差分を計算して勝手に適用してくれるのか
ゲームに例えればわかりやすいよ。
ゲームは一秒間に30フレームだとか
60フレームだとか毎回画面を書き換えている。
毎回書き換えて処理速度大丈夫なのか？って思うかもしれないが、
それを減らすために、書き換える必要があるところだけ書き換えてる。
そのゲームで使われていた技術を持ち込んだのがVirtualDOM
ウェブアプリならその方法でいいんだけどな。
例えばWikipediaのようなサイトにVirtualDOMは
似合わないかな。そもそもそこまでJavaScript必要じゃないし。
たいていの情報系サイトはそうじゃないかな？
このスレで見たよ
backboneでもvirtualdomを使えるみたいですね
既存フレームワークとの親和性は高いのかな？
diffDOMの説明を読むと、DOMとDOMのdiffを取るもののようですが
こういうのもvirtualDOMっていうんでしょうか・・？
http://www.amazon.co.jp/dp/4837957552
長引く痛みの原因は、血管が9割 (奥野祐次 ワニブックスPLUS新書 2015/2/7)
http://www.amazon.co.jp/dp/4847060792
http://www.wani.co.jp/event.php?id=4606
あなたの不調、実は「脳脊髄液減少症」かも!?
http://i.imgur.com/0NSOYDs.jpg
http://i.imgur.com/7F0FC8r.jpg
すべての不調は首が原因だった！
http://i.imgur.com/1A6Mlx6.jpg
http://i.imgur.com/suxOFYT.jpg
http://i.imgur.com/PTTTnPh.jpg
その不調は遅延型フードアレルギーです！
http://i.imgur.com/JeFV27f.jpg
http://i.imgur.com/X1qpw5n.jpg
http://i.imgur.com/YCNj1tJ.jpg
http://i.imgur.com/KUk7fZ2.jpg
食品容器に多用されるビスフェノール(BPA)が脳の発達に異常をもたらすとの新研究
http://i.imgur.com/4irq8qS.jpg
腸でセロトニン 鬱病
http://i.imgur.com/JxwJP4v.jpg
http://i.imgur.com/qxLPW1b.jpg
ダダモ博士のNEW血液型健康ダイエット(集英社文庫)
Ｏ型とＢ型は小麦粉、とうもろこし、蕎麦を食べると体調が悪くなり太ります
http://www.amazon.co.jp/dp/4087604330
ワロタｗ
「健康が悪い人の9割は一週間以内にパンを食べていた」
「犯罪者の9割は一週間以内にパンを食べていた」
みたいなネタをリアルでやってるｗ
ネトウヨみたいに洗脳されてそう
マッチ対象のグループ化数が不明の時に、正規表現によってグループ一覧を取得する方法はないでしょうか
例えば、
matches = "aaaBBBaaaBBB".match(/(([a-z]+) | ([A-Z]+))/)
としたら、
["aaa", "BBB", "aaa", "BBB"]
という結果を取り出したいです
例えば11時3分にタイマーをスタートしたら11:10 11:20 と通知を出したいのです。
(window.alert は使いません)
今考えてるのは↓これなんですがアドバイスお願いします。
開始ボタン
↓
直近の10分までsetTimeout
↓
10分間隔でsetInterval
/([a-z]+|[A-Z]+)/g
>>425
ブラウザのタイマーを信用するならそれでいい。
var matches = "aaaBBBaaaBBB".split(/([a-z]+)/);
→[ '', 'aaa', 'BBB', 'aaa', 'BBB' ]
空文字列が出ちゃうな
まぁfilterに掛けるなりすればいいし、そんな感じでやればいいと思う
gフラグ
match(/regex/g)
>>425
動けばなんでもいいんじゃね
まぁちょっとずつずれるし
10分おきに時間計算しなおしてsetTimeoutしなおしたほうがいいんじゃね
力技ですが、下記のようにorマッチ部分を分解して、再帰的にいずれかのマッチ結果を取り出すにして対応出来ました
// CoffeeScript
str = 'aaaBBBaaaBBB'
a = []
while true
matched = str.match(/^([a-z]+)(.*)/)
if (matched)
a.push(matched[0])
str = matched[1]
continue
matched = str.match(/^([A-Z]+)(.*)/)
if (match)
a.push(matched[0])
str = matched[1]
continue
break # マッチ完了
console.log(a) # ['aaa', 'BBB', 'aaa', 'BBB']
>>426-428
ありがとうございます！
ありがとうこざいます！
全部setTimeoutの方が楽そうなのでとりあえずそっちでやってみます
流石に>>429みたいなのは解決とは呼べない
おっしゃる通りです、最終的に/gを付けて解決する事が出来ました
600秒-《現在時刻の分の1の位》*60-《現在時刻の秒》
ちっとは頭使え。
1分が何秒かも知らんのか
https://www.google.co.jp/search?q=10%E5%88%86+%E4%BD%95%E7%A7%92&ie=UTF-8
数学は苦手で条件分岐6個書くとこだった
ありがとう!!
プログラミングってのは算数からは逃げられないぜ。
条件分岐6個に興味があるんだけど、
どんなアルゴリズムを思い付いたんだ？
ってのは有りだと思う
正時から10分ごとっていう仕様が変わらなければ一つの計算で出してもいいけど
if (分 == 0) {}
if (分 == 10) {}
if (分 == 20) {}
if (分 == 30) {}
if (分 == 40) {}
if (分 == 50) {}
だろ？
プログラミングには、算数は小学生レベルでいいけど、語学力と歴史学は修士レベルが必要だよ。
算数と言うより数学の方だな
英語は公式のドキュメント読む時は必須
ロジカルシンキングがあればいいだろ。
それはそうなんだが絵的な美的感覚とも違うんだよな
論理性の美しさって言うか問題解決の簡潔さや無駄の無さ
メモリ管理とか圧縮とか
数学なんか要らない、特にこういったC系言語には。
数学は必要な人と必要ない人がいるから一概に必要とも言えない
プログラミングセンスはﾊｶｰ的な考えに似ている相当マニアックなもの
いや違うかな
プログラミングセンスは兎に角目的のものを瞬時に実装できる力に似ているな
気付いたら実装しちゃってるみたいな
だから手段を選ばないからソースが糞ソースになってたりする
そういう人は企業の歯車として働くには向いてないだろうね
だいたい嫌われる
プログラマーじゃなくてSEと呼ばれる所以
Web方面に攻め入って来てからずいぶん経ったような気がするけど
まだそんなレベルのものでも通用させられるんだｗ
バカは自分のスレに帰ってやってね（笑）
> だから手段を選ばないからソースが糞ソースになってたりする
じゃあだめじゃんｗ
いきあたりばったりにコード書いてるからそうなるんだよ。
優れた人っていうのは頭の中で動くコードはできあがってるんだよ。
検証のための捨てるコードを書くことはあるけど。
頭の中で動くコードが出来上がった状態で
それをどのように表現すればシンプルになるかを考えながら書く。
お前がやってるのは、頭の中で書いた動くコードをそのまま書いているだけ。
もしくは書きながら動くコードに仕上げてるかのどちらかだ
重要なのはそこじゃないし、自分の事を言ってるわけじゃないぞ…
とにかく難しいと思ってるような事でも実装が速いって事だ
まぁ常に糞コードだったらいつか破綻するってのはあるかもね
逆に変にこだわってるのか知らんが、実装遅いやつはずっと遅いままで速くなる事はないな
そういう奴の割合が多いとデスマーチ化しやすいと思われる(完全に主観だが)
MVCフレームワークも知ってるかどうかで沿った書き方を出来るか変わってくるし、
鯖との通信はJSONで行い、蔵との密結合を緩和するって方向になってる
ロジック部分も、今は関数型言語を学ぶのがトレンドだけど、
結局のところはコードの再利用性を上げてシンプルに、
冗長性を排除して書くって事を目的にしてるわけだし、
その一つがC#のLINQの様々な言語への移植だったりする。
何が言いたいかというと、毎回arrayを作り直すmapやfilterはクソ
だからクソコードの時点でダメだって言ってんだよ。
クソコードになる時点でセンスが無いってこと
たぶん、あんたの基準が低すぎるんじゃないだろうか？
まずほぼ素人の人。コードを書けないから
クソコードを増やすこともないｗ
で、次は頑張って動くコードを書ける人。だけど書くコードはクソコード。
俺にとってはこれはまだ一人前に到達してないレベルなんだが、
書けない人よりかは、速いだろうね。
おそらく、あんたはこれぐらいの人しか知らない。
間をいくつか飛ばして。
そして一人前のプログラマは動くコードをかけるのは当たり前の話で
それを正しい設計でパフォーマンスやメンテナンス性まで考えてコードを書く。
このレベルになるとコードを書くことよりも書かないで同じことが実現できないか？って考える。
自分で実装する力にこだわっているような感じをするから、
動くコードを書くのが精一杯の人しか知らないんだろうね。
> 何が言いたいかというと、毎回arrayを作り直すmapやfilterはクソ
なんで？
実行速度が遅くなるからっていうだけの
どうでもいい理由ですか？
コンパイラに任せるはずの最適化を手動で行う方法を長々と本に書いてるような言語で何を言う
長過ぎるな…
> 逆に変にこだわってるのか知らんが、実装遅いやつはずっと遅いままで速くなる事はないな
↑これに近いよ、長文書く人って
リテラルの推奨、use strictの使用(これは今までの動的型付けが悪いだけな気がする)
思いつくのはこれくらい
あと、mapやfilterの多様はGC無駄に走らせるからチューンは必要よ、モバイルだと特に
えとさぁ、それだけしか言うことが出来ないなら
レスしなくていいよ。
>>466
あー、やっぱりだｗ
技術的に未熟だから、メリットとデメリットを
比較して考えることができてない。
視野が狭いよ。一方的な点からしか見えていない。
を長々と本に書いてるような言語
という話だったね？
その本の名前は？
http://d.hatena.ne.jp/end0tknr/20130808/1375953351
特殊な変化をする単語の場合どうするんですか？
datum→dataみたいなやつです
特殊な単語は辞書(ActiveSupport::Inflector::Infelctions)から、
それ以外は機械的な変換って振り分けてる
ありがとうございます
そういうのはエスパーしなければならなくなる
興味深い。
どんな単語？
indexes がデータベースインデックスの複数形
indicies が添字の複数形
のように使い分けられてる気がするが
公に認められたものかどうかはちょっと怪しいかも
というコードがありました
defaultに関数をセットして、インスタンス生成時に呼び出すという処理です
このようなことが出来ると言うことは、
Date.nowの内部ではthisを使ってDateにアクセスしていないということなのでしょう
しかし内部でthisを使っていないということが何故分かるのでしょうか？
仕様を見れば、thisを使ってないことが分かる。まあビルトインオブジェクトのメソッドに普通thisは使わないよね
http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.4.4
thisを使うのであれば明示的に書いてある。ご存知の通り、インスタンスのメソッドは一般的にthisを使う
http://www.ecma-international.org/ecma-262/5.1/#sec-15.5.4.4
ありがとうございました
var para = { "parame" : paraValue };
このように書かれている宣言で
para ってどのように使えばいいのですか？
調べ方がよくわからなくて、、、
2chのスレ複数ブラウザで開いててもこれあれば専ブラみたいな事全部出来ちゃいそうなんだけど
できることは今までと変わらんよ。
でもドメイン違っても一つのjsで管理できるって凄くない？
共有してる全ページ閉じたらクリアされるけど、それまで変数とか残ってるから
タブで開きまくってもshareworkerで統括してコントロール出来るってマジすげぇ
拡張機能でもないのに
これの話？
http://javascript-api.sophia-it.com/reference/%E5%85%B1%E6%9C%89%E3%83%AF%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%A8%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E3%82%84%E3%82%8A%E5%8F%96%E3%82%8A%E3%81%99%E3%82%8B%E3%82%92%E3%81%AB%E3%81%AF%EF%BC%9F
指定するファイルはセキュリティ上、urlの生成元（オリジン）が起動側と同じものに限定されます。
オリジンとは、スキーム（urlの「http://」の部分）、ドメイン（urlの「www.example.com」の部分）、
ポート（urlの「:8080」の部分）を合わせたもののことです。
オリジンは超えられない
それとあえて挙げるならServiceWorkerの方でしょ
こっちはSharedWorkerの機能に加え、管理しているURL化のアクセスを全て横取りして任意のデータに差し替えられる
これでオフライン時のキャッシュ周りだとか、いろんなことが可能になる
更にページが全て閉じられても残って、プッシュ通知もできるような方向で策定が進められている
canvasとaudioだけじゃないんだな
底なし沼のようにも思える
「HTML」じゃあわかりにくいし、Web3.0にするか？
そしてWhatWGはHTMLをLSにした。つまり永遠に完成しない状態なわけ。
HTML5ってのは単にそこからW3Cが適当に切り出してバージョン付けしただけ。
HTML5は「バージョン付けした」ということのみが意味があって中身の仕様はベンダーが見ることもないし価値はない。
結局ブラウザのバージョンを見て処理を切り替えるコードは捨てられない・・・
いまはAPIの存在で分岐するのが主流だと思うが
その通り
なんであそこだけ異常に遅いの
ただ常時機能がアップデートされないからリリースから年月が立つごとに遅れていくだけ。
Win10ではIEとは別にSpartanが搭載されるみたいだから、IEの方が企業向けの役割を担って、
Spartanの方はモダンブラウザになってくれることを期待してる。
このツールチップがテキストフォームに重なって邪魔です
アホなのでしょうか？
contenteditableを使っているので変なところで改行して欲しくないんですが
前はこんな挙動じゃなかったですよね？
http://www.hp-workshop.com/image/0103server.gif
ローカルＰＣ①→http://peace.2ch.sc/1ch.html
ローカルＰＣ②→http://peace.2ch.sc/2ch.html
ローカルＰＣ③→http://peace.2ch.sc/2ch.html
みたいに開いてて
webサーバー→http://peace.2ch.sc/main.js
みたいな感じでmain.jsが指令出してアレやれコレやれみたいにして
main.jsはいくら開いても全部重複しないで1個開いてる時と変わらないみたいな
すぐ上の方で話してたんですか、恥ずかしい
ありがとうございます
これはライブラリとかDOMの扱いにだいぶ影響をあたえるだろうな。
proxyだろうがなんだろーがｌローカルストレージ使えないのが嫌だ
複数の派閥がある紛争地帯で右往左往してるような感覚だよ
忘れてた。ありがとう。
最終的には荒らしスレの方が伸びるんだな
localstorage利用して全部のhtmlでwindow.addEventListener('storage',っての使えばlocalstorageの変更をキャッチできるんで連携出来ると思ったんですけど
もっと他の方法とかあるんですかね？
yahooとかgoogleから飛んできた時windowに名前つけることできないんでこれしか思いつかなかったんですが
+ JavaScript の質問用スレッド vol.124 + [転載禁止]©2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1427008867/
少し上で答えが出てるだろいいかげんにしろ
new BroadcastChannel
var a = 0, b = 0, c = 0; とするしかないんでしょうか？
は
var a
a = b = c = 0;
と同じだぞ
そんな書き方ありえないだろ
var a, b, c;
a = b = c = 0;
か
var [a, b, c] = [0, 0, 0]
としろ
これはC言語の時代からの書き方なんですが？
http://jp.techcrunch.com/2015/03/26/20150325google-will-not-integrate-its-dart-programming-language-into-chrome/
こうやってすぐポイ捨てするからgoogleは信用ならん
捨てるのを怖がってたら新しい物は作れない。
せめて何が駄目だったか言うべきだろ
そんなの使ってる奴おらんやろw
捨ててないよ
DartのSIMDAPIなんかはJSに引き継がれるし、
型付き周りの概念もSoundScriptで引き継荒れる。
ようは新しい言語としてじゃなくてJSでuse～とすることでの新しいモードとして生まれ変わるだけ。
生まれ変わるって言ってるじゃんｗ
死なないと生まれ変われないよ？
それとJSに大きな影響を与えた話は別。
「新しい自分に生まれ変わる！」って言う人は、一度死んでるの？
JavaScriptに生まれ変わるなら、
Dartは死んだってことだろうｗ
JSに引き継げるのなら死んでも捨ててはない
test.html
var worker = new SharedWorker('sex.js');
var port = worker.port;
port.postMessage("送信データ");
port.onmessage =function(event){
console.log(event.data);
}
sex.js
onconnect = function(event){
var port = event.ports[0];
port.onmessage = function(event){
port.postMessage(event.data)
}
}
って書いてあるhtmlをF5で更新すると
接続できる→F5→接続できない→F5→接続できる→以下ループ
ってなります
new SharedWorker('sex.js');の接続するタイミングをページ読み込みから1000ms後ぐらいにすると発生しないんですが
何か良い解決方法ないんでしょうか？
new SharedWorker('sex.js');で接続してないのにworker側から先に送るなんてこと出来るんですか？
２つのセレクトボックスを用意し、片方（Ａ）で選択した要素をもう片方（Ｂ）に移動させたいです。
もちろん、その逆（Ｂ→Ａ）も行えるように、ボタンは２つ用意しました。
option要素の移動自体は、いろいろ調べたところ実装できたのですが、
Ａのセレクトボックスにoptgroup要素を使用してグループ化しています。
■ Ａのリスト
hogehoge
・hoge
・fuga
foobar
・foo
・bar
このとき、Ａからhogeを選択してＢに移動させたあと、
再度ＢからhogeをＡに移動させる時、元々の場所（hogehogeのoptgroup要素内）に
移動させる方法はないでしょうか。
ブラウザはIE10以降/Firefox/Chromeで実行したいです。
よろしくお願いします。
更新だとhtml読み込んだ後に終了するぐらいの遅さ
対処法はワカラン
移動元要素は削除せず、不可視にしてはどうでしょう？
var worker = new SharedWorker('sex.js');
var port = worker.port;
ってまたやればいいだけやん
返答有難うございます。
選択した要素をdisplay:none;で非表示にしたところ、
FirefoxとChromeでは正しく動作しましたが、IE11では非表示になりませんでした。
IEでも動作する方法はないのでしょうか・・・
やめるんだったら簡単な方法が沢山出てくる。
var str ='PON-CON-PON-CON'
って文字列があってそれのPONとONだけに1回ずつヒットさせたいです
/PON|ON/ってやるとPONがヒットしただけで終わっちゃうし
/PON|ON/gってなると今度はPON,ON,PON,ONって2回ずつヒットしちゃいます
どうすればいいんでしょうか
/(PON|ON).*(PON|ON)/
うっわ頭良い
それならON PONもPON ONも大丈夫ですね！
感動しました！
説明不足でした
PONは1回まで、ONも1回までです
本当に申し訳ないです
idとかdata-numberとか適当なところにA01～、B01～みたいな番号を振っておいて
戻すときにループで自身の番号と対象の番号を比較し適切な位置に挿入させるか
入れ替えたときにoptionsの参照を入れた配列をidなどを見てソート、その順番を反映させるかだと思う
/(PON|ON)[\s\S]*(?!\1)(PON|ON)/
はい。作ったよ。
http://jsfiddle.net/L2p6zkux/
下手な小細工しないで、動かしたい通りに普通に作ればいいのに・・・。
よく考えてみて。
「一回ずつヒットさせる」ということが目的ではないでしょ。
「両方１つだけ含まれているか否か」が分かればいいんでしょ？
自分で問題を難しくしちゃいけないよ。
質問者も回答者の配慮をすべき
おかしいよ。ワザと手抜きかね？
そういう誤動作(元の位置に戻せない)をどう解決したらよいか分からないと質問しているのではないのかね？
ならあんたが実装しろってｗ
元々の場所（hogehogeのoptgroup要素内）って書いてあるとおりだろ？
もしかして順番も維持しろって話か？
それは元のレスに書いてないし、元の質問者がレスしたら考えるよ。
お前は偉そうに言う立場にはない。
> 元々の場所（hogehogeのoptgroup要素内）
って書いてあるのだから、hogehogeのoptgroup要素内であれば
それは元々の場所である。
jQueryを使ってたり、option[value] が未定義なのはどうなんだ
> option[value] が未定義なのはどうなんだ
問題無いですよね。HTMLの仕様読めば？
ありがとうございます
普通に考えて最初に言われてた(PON|ON)ってのをreplace(REGEXP,function(str){
if()
})
ってやればよかっただけでした
一度冷静になって１から考え直すべきでしたすみません
存在確認だけのためになぜ replace を使うのだろう
RegExp#test で十分なのでは？
http://jsfiddle.net/5yvyunwd/1/
確かにHTML5でmultiple属性の値は自由だから正しいが、
それはそもそも横暴なルール違反が多すぎて収集つかないからHTML5で正しいことにしてあげただけ。
正しいことにしてあげたHTML5でも、さすがに例示ではHTML4.01に則った書き方をしているのが笑うところ。
そもそも。
<select multiple>
このmultipleは、値だって知らないだろ。これは属性値。つまり、省略されているのは名、属性名。
属性名がmultipleの属性は、択一式(選択肢は1つだけだが)の属性値しか許容されなかった。
その属性値がmultiple。つまり、名も値も同じ。
択一式かつアルファベットだけなので、属性名も等号も引用符も省略できる条件を満たす。
name="value" → value ということ。
multiple="multiple" → multiple ということ。
(XML(XHTML)では省略できなかった。)
15年前にXHTMLへの移行が進まなかった理由の一つに、属性名省略を止めるとIEがスルーしたバグがあった。
HTML5の中の人は当時二十歳前後だったが、当然それを経験していて知っている。
だから、<select multiple="multiple"> とは書けない体質になっているのかもしれないと思われる。
だから、無難な <select multiple> を例示に採用したのだろうと思われる。
> multiple="true" はHTML5では正しいが違和感あり。
そこは単に間違えただけだよ。
揚げ足取るしか能がないのか？
良い事だけど
> <select multiple>
> このmultipleは、値だって知らないだろ。
いや、普通に属性名だから（笑）
XHTMLだけが異端で失敗しただけで、HTMLはXHTMLじゃないから。
XML Validにする意味はなかったという結論によって
元のHTMLに戻っただけ。そして正しいHTMLで書いているだけの話。
> 属性名省略を止めるとIEがスルーしたバグがあった。
聞いたこと無いね。おそらく>>582の間違い。
multiple か multiple="" か multiple="multiple" しか正しいのはない
だから書き間違いだって言ったろ？
そして、揚げ足取るしか能がないのか？とも言ったろ？
もともと>>557の話だろうが？
なんでJavaScriptのスレで>>557の話と関係ない
HTMLの些細なミスを指摘してるのさ。
JavaScriptの話をしろよ。
そう怒るなよ
了解した。
このスレにはコードを書かないで文句ばかり言う奴が多くてな。
スルーしとけ
昨日からちょくちょく見て待ってんだけどｗ
>>570
ありがとうございます！
ただ、>>574でご指摘あるとおり、「元々の場所（並び順も同じ）に戻したい」が理想でした。
最初の質問に記入し忘れていて申し訳ありませんでした。
>>568
ありがとうございます。
戻す際にループを行ってソートする方法も考えてはいたのですが、
実環境で使用するコンボボックスが200件近く表示される可能性もあり、
もしかしたら少し時間がかかってしまうのではないか、と思った次第です。
嘘は良くないよ。
https://html.spec.whatwg.org/multipage/forms.html#the-multiple-attribute
>>The multiple attribute is a boolean attribute
だからmultiple="true"は正しい。
multiple="false"は間違い。
頂いた回答と、optgroup内のソート処理を組み合わせることで、
意図した動作をIE/Firefox/Chromeのそれぞれで確認することが出来ました。
http://jsfiddle.net/fw1e85vy/1/
HTML規約的に妙な部分ことになっているかもしれないですが、
data-sort -> id にしても問題なさそうですかね・・・
丸っとカスタムエレメントにすべきだよ。
煽った上に嘘を言うとはとことん使えない野郎だな
https://html.spec.whatwg.org/multipage/infrastructure.html#boolean-attribute
> The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
英語が読めないならせめてvalidatorでも使って調べてから書け
俺はHTML5がわざわざ正しいことにしてくれたから正しいと言っている。
バカは >>598 だな。
multiple="true" は現行HTMLで正しいことにしてくれたから正しい。
しかし、過去においてその間違いを犯していた大量のアホがいたから、ふつうは格好悪くて書けない。
(だからHTML5仕様の例示にも属性名省略で書いてある。)
(そして、そもそも、仕様を読めなかった大多数の低脳は省略が名であることを知らないから、過去において大量に間違えていた。)
まず、multiple="true"は仕様に沿っておらず、validatorではエラーになる。
これは分かってるよな？
>>598にも書いたし、validatorでも確認できるから、先入観を持たずに確認してくれ。
次に、>>599は、仕様に沿ってなくても、自分の思い通りになれば「正しいことにしてくれる」って思ってるのか？
それなら、<select multiple="on">も<select multiple="yes">も>>599にとっては「正しい」のか？
HTML5では何でもいい。
しかし、JSのDOMでは、最初から真偽値だった。
当時のその現状を参考にしてDOM仕様がまとめられた。
HTMLの属性値で文字列としてしか取得できないのだが、見た目にtrueと書いてあると、JSを書く者には親近感が湧くのかもしれない。とにかくこの過去の仕様に照らしての間違いを過去においていたるところで見た。
なんと、HTML5で、何でも良いことにしてくれたw
HTML5での、属性名省略そのものの崩壊とtfootの位置、この2つが代表例だと思っているが、さすがにたまげたわ、馬鹿に合わせてここまで敷居を下げないと実情に合わないんだなって。笑うしかない。
ところで、お前は馬鹿だから現行HTMLでは何でもいいってどういうことか分かってないんだろ、どうせ。
multiple=""
multiple="false"
multiple="true"
multiple="multiple"
multiple
これらがぜんぶ同じ。笑うしかないわなw
お前みたいな馬鹿のせいでこうなったんだよ。
やっときたかｗ
> ただ、>>574でご指摘あるとおり、「元々の場所（並び順も同じ）に戻したい」が理想でした。
まあそうだろうと思って、あれからすぐに作っていたのだが
レスがあるまで待ってた。
http://jsfiddle.net/L2p6zkux/3/
補足するならば、ソート使ってないのでデータが増えても問題ないのと
HTML Validにしている。
>>597
> そこまでやるなら要素の外にごちゃごちゃくっつけるんじゃなくて
> 丸っとカスタムエレメントにすべきだよ。
>>596のコードの場合、data-sort=を減らすためだけに
カスタムエレメントにしろって話？ それはやり過ぎだろう。
それ以前に俺のコードの場合は、data-sortという特殊な属性も必要なく
HTMLの標準のごく普通のselectだけを使ってるから
新たに要素を作るカスタムエレメントのする意味ないけどね。
で、一つ引っかかるんだけど、「そこまでやる」というけど、
たった14行だよ？ （無理やり書けば4行ぐらいに収めることは可能）
たった14行で作れる小さな機能ためにカスタムエレメント導入するほうが、
そこまでやることじゃないって思うけど。
外部に分離する前に、まずんなの大したこと無い。簡単に短いコードで
実現できる。と思いつけるようにならないと。
> (だからHTML5仕様の例示にも属性名省略で書いてある。)
multipleは値じゃなくて属性だよ。
http://www.w3.org/TR/REC-html32#select
> multiple
> The presence of this attribute signifies that the
> users can make multiple selections. By default only one selection is allowed.
HTML3やHTML4の仕様を見てみれば、昔から属性だってのはわかると思うんだが。
XHTMLだけが異端で、気の迷いでHTMLをXMLの仕様に歪めたために
multiple="multiple"などという変な表記が生まれた。
XHMTLはXMLだから厳格なんだ。故に正しいんだって思っているのかもしれないけど、
HTMLは（XHTMLを除いて）XMLではなく、例えば一部の終了タグとかも省略できるのが
正しい仕様。multipleはHTMLの仕様では昔から値無しの属性。
XHTMLの方が例外なんでもうなかったことにした方がいい。
> ところで、お前は馬鹿だから現行HTMLでは何でもいいってどういうことか分かってないんだろ、どうせ。
> multiple=""
> multiple="false"
> multiple="true"
> multiple="multiple"
> multiple
> これらがぜんぶ同じ。笑うしかないわなw
> お前みたいな馬鹿のせいでこうなったんだよ。
そんなに不思議なことじゃない。というかおそらくHTML3とかの時代から
挙動は変わってない。
なぜならmultipleは属性であって、その属性があれば有効になるから
値が何であろうと、それを参照していない。
これは知らないものは無視するというHTMLの動きの原則にあっているし
昔からの挙動だと思う。
別に煽ってるつもりはないし、相変わらず何も分かってないのはそっちでしょ。
>>The values "true" and "false" are not allowed on boolean attributes.
ってのはあくまでNoteであって、"true"/"false"を使ってはいけないという仕様があるのではなく、
"true"/"false"にboolean attributesとしての特別の意味はないから気をつけてね程度のもの。
実際は属性値として設定しておくことは可能でその場合はtrueとみなされる。
嘘は良くないよ。
煽ってるつもりがないなら悪かった
だが誤解しているのはそちらなので、譲りたくない気持ちは分かるがもう一度考えてくれ
> "true"/"false"を使ってはいけないという仕様があるのではなく、
断言する。ある。
NOTEのすぐ上にこう書いてある
https://html.spec.whatwg.org/multipage/infrastructure.html#boolean-attribute
> If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
『属性が存在するなら、その値は「空の文字列」か「大文字小文字を区別せず属性名に一致する文字列」（前後に空白文字は認めない）である必要がある』
と、明記してある。
つまり、<select multiple>も<select multiple="">も<select multiple="multiple">も<select multiple="MuLtIpLe">もいい。
しかし、<select multiple="true">や<select multiple="hoge">や<select multiple="ok">はダメだ。
ちなみに「NOTE」は日本語の「ノート」という意味もあるが、「重要/注目/注記」という意味もある。
multiple="true"は君に限らず多くの人が間違えることなので、わざわざ注記してくれてるんだよ。
横から失礼、それはあんたの勘違い。よく読み直そう。
スレ汚しすまなかった
なんで勘違いって言ってるくせに
その勘違いの場所を具体的に指摘できないの？ｗ
もうそれで勝負付いているんだけど、
気づいているかな？
どこが勘違いしてるか指摘してやって恥かかせてやろうぜ
仕様書読むからちょっと待ってろ
https://html.spec.whatwg.org/multipage/forms.html#the-multiple-attribute
>>The multiple attribute is a boolean attribute
この部分の行間を読めばわかるでしょ？
boolean attributeって書いているってことは
論理的に考えるとtrueでもいいはずだ
あ、それが行間を読むってことなんですねｗ
書いてないけど、お前ん中ではそうなんだろうな理論ですねｗ
横だけど、
"true"が許されないってどういう意味で言ってる？
getAttributeでは当然"true"が帰ってくる
値は何でもいいので属性があれば有効というのが正式な動作だよ
(X)HTML/CSS/Dreamweaverの質問に優しく答えるｽﾚ18
http://peace.2ch.sc/test/read.cgi/hp/1424788106/
【WHATWG】HTML5 Part6【W3C HTML WG】
http://peace.2ch.sc/test/read.cgi/hp/1393153279/
> "true"が許されないってどういう意味で言ってる？
HTMLの正しい仕様の話に決まってるだろｗ
> getAttributeでは当然"true"が帰ってくる
JavaScriptは無関係ないので他所でやれｗ
おおお・・・シンプルかつ読みやすい方法、ありがとうございます。
これは元リスト側の選択したoptionを、別のタグ(template)に置き換えている、
という認識でしょうか。
自分の拙い頭脳では、どうやって元の場所と認識しているのか、まだピンときていませんが・・・
>>596でまとめた方法より見やすいので、こちらを採用させて頂きたいと思います。
ありがとうございました。
・・・あれ、jQuery 2.1.3を使用したら動かなくなりました(´・ω・｀)
Ａ→Ｂは動作しますが、Ｂ→Ａが反応しないようです。
> これは元リスト側の選択したoptionを、別のタグ(template)に置き換えている、
> という認識でしょうか。
あってます。
>>627
> ・・・あれ、jQuery 2.1.3を使用したら動かなくなりました(´・ω・｀)
あれ、ほんとだ。
edgeは正式版の最新版だと思ってたら3.0.0.preだったよ。
一応修正した。
http://jsfiddle.net/L2p6zkux/9/
ぐぐるとreplaceWithするとdataが消えるとかあるけど
仕様なのかバグなのかよくわからない。
少なくとも3.0.0 preでは挙動が変わってるようだ。
位置を覚えておく必要があるから、optionを別のものに
置き換えてその場所をポインタにする。
置き換えるのはいいとしてなにに？ template
（HTMLの使用上許されている物はこれしか無いから）
置き換えるのはreplaceWithでできるけど、
元に戻すための情報が必要だね。data()で保存。
保存する値は要素ごとに違うから、replaceWithは
関数を引数にして新しい要素を作ってdata()で保存させる。
戻すときはその情報を使って戻す。
まあこんな感じ。
考え方のコツは、要素（複数のoption）を一つ一つ
処理していくんじゃなくて、「複数のoption」という一つの塊をみて
どばっと置換。どばっと戻す。って考えることかな。
塊で処理したいけど、一つ一つの要素で微妙に違いがある場合は
このようにreplaceWithの引数に関数を指定すれば良い。
不具合のせいでreplaceWithがbefore & detachになってしまったけど。
.remove()は仕様通りDataやイベントリスナを削除するので、.replaceWith()でもDataが消えちゃうみたいだね。
要素のプロパティに直接保存した時は問題なかったのか。
replaceWithした時に残る情報、残らない情報とがあって
統一されてないから3.0でバグとして修正されたのかな。
覚えておこう。
ソースを見たところ、別に内部的に.remove()が使われているわけではなく、
.replaceWith()自体でDataの削除をしていた。
削除の挙動的には.remove()と同等みたいだけど。
あと、ドキュメントに該当の記述があったので参考までに。
http://api.jquery.com/replacewith/
Additional Notes:
The .replaceWith() method removes all data and event handlers associated with the removed nodes.
勉強になった
正しいではなく上品な使い方の間違いでは？
HTMLは道具なんだからそれを意図的に使えれば正しいといえる。
HTML5はいろいろな場合における細かい挙動まで整備されたんだから、
HTML4以前のように上品に使わないと動作が保証されないということはない。
今回"true"を何が何でも使っちゃいけないという合理的な理由は見つからないし、
仕様に則っても間違いではない。
自分に無駄にルールを作って、道具に使われちゃいけないと思うよ。
それを意味もなく人に強制するのはもっとよくない。
早く誤ちを認めたらどう？
"正しい" であってるよ。
HTMLには仕様書があって
その仕様書に書かれていることだから。
ありがとうございます！
わかりやすい解説も助かります！
それでは名無しに戻ります。
色々とありがとうございました。
仕様書が読めるようになってからまた来てね
それがjQueryのもっとも重要な所で、これをわかっているかどうかで
jQueryに対しての評価が違う。
時々document.querySelectorAllがあるからjQueryは
もう要らないっていう人がいるけどこれはわかってない人。
セレクタからDOM要素を取得することはできるけど、
その取得した要素に対して簡単に操作する方法をDOMは提供していない。
$('.class').remove(); 例えばこんなの
jQueryは.classに当てはまる要素全てを塊として、.remove()メソッドを実行できるが
DOMでやるならば、ループして一個づつ処理しないといけない。
DOM標準にjQueryのような仕様が入る気配はないし、
jQueryに変わるライブラリなら出来る可能性があるが、
.remove()、.add()、.attr()、.data()、.on()、・・・
必要なのを全部書いていたら、それjQueryでよくね？ってなっちゃう。
VirtualDOMを使うライブラリのように、jQueryどころか、
document.querySelectorAllを含むDOM操作がまったく必要ない
ライブラリを使うならば話は別だが、DOM APIを使うよりもjQueryの方が
良いという事実は今後も揺らぐことはないだろう。
document.queryAll('.class').forEach(el => el.remove());程度の記述量で済むわけだし、
逆にただそれを省くために色々な不要な処理も入った半ばブラックボックス化してるライブラリを勉強して使った方がいいとは思えない。
jQueryの良いところはDefferdとかAnimationとかAjaxとかひと通り必要なものが揃ってたことであって、
それらが潰れた今となっては、もう必ずしも必要な存在ではないというか、使わない方が良い存在になってきているのは事実。
>>640が言ってるのは結局はまだほんの少し使える部分もあるよってことでしかない。
DOM操作だけのサブセットを使うというんならまだアリだと思う。けしてベストではないけど。
動かないだろｗ
わかってない証拠、
jQueryはよく絞り込まれてるよ。どのメッソドもほしいもの。
どこがどう分かってないのか説明よろ。
>>643
それちきんとコード比でも見て言ってるの？
を正しく書くなら
Array.prototype.forEach.call(document.querySelectorAll('.class'), el => el.parentNode.removeChild(el));
だな
議論に参加しようと思ったら突っ込まれるところを作ってはいけない
> どこがどう分かってないのか説明よろ。
せめて動くコードを書けって言ってる。
想像の中で動くであろうコードを書いて、ほら短いといっても、
それはお前の頭んなかの想像の話だろｗってことだ。
この書き方は現状Firefoxでしか動かないから、これが現実的なところだろうね。
Array.prototype.forEach.call(document.querySelectorAll('.class'), function(el) { el.parentNode.removeChild(el) });
この後、メソッドチェーンしたいんだけど？と言われたら（笑）
話の流れ的に紛らわしかったかもしれないけど、よく見て。
NodeListを返すquerySelectorAllじゃなくて、Elementsを返すqueryAllを使った。
ElementsはArrayを継承してるからforEachが直に使えるでしょ？
メソッドチェーンしたければmapを使えばいいよ。
え？ remove()は？
もしかして、お前の想像の世界ではあるって
ことになっんの？
想像の世界の技術で反論（笑）
そんな感じで、さまざまなメソッドを
オレオレライブラリで作るんだろう？ｗ
だったらjQueryでいいじゃんってなるって
最初から言ってる。
だから動くコードを書けって言ってる。
結局書くと、ばれるのが怖いんだよ。
だから、擬似コード書いて
勝った気になってる。
Array.prototype.forEach.call(document.querySelectorAll('.class'), el => el.parentNode.removeChild(el));
可読性が大きく違いすぎるｗ
Elementはremove()を持ってるよ。
適当なこと言ってすまなかった
DOMのLS見てきたけど、今までとかなり変わってて驚いた
勉強し直してくる
> オブジェクトは 'remove' プロパティまたはメソッドをサポートしていません。
説明してくれるかい？
ライブラリが必要だな！
jQuery（ボソッ）
queryAllはまだどのブラウザにも実装されていないけど、モダンブラウザかIE11以降でエミュ可能。
removeはChromeとFirefoxで入ってるのを確認した。
ES6の構文は必要ならトランスパイラを使えばいい。
自分が問題視しているのは、学習コストとそれが古いものになることでの無駄。
もう標準が用意されるってわかった時点で、その機能はポリフィルに切り替えて行くべきだと思ってる。
結局お前が示したコードよりも、
さらにjQueryの方が短くて、
どのブラウザでも動くんだし。
DOMの進化が10年遅すぎた。
その10年の間にjQueryは誰もが持ってる必須の知識となってしまったし、
DOMを使った結果、jQueryより劣ることしかできないんじゃ
なんのためにDOM使うのか理由がない。
せめてこれぐらいは、DOMでも25文字ぐらいでできてもらわないとね。
$('.class').remove();
それは当然大事。
ただ、jQueryが生まれた当初と比べて、互換性がまだまだ取れないという点は未だ残っているが、
そもそも標準機能が不足してるという点は改善されてきてる。
各機能の有り様について標準が提供されているときは、それに従うべきだと思う。
そうするとライブラリというよりポリフィル的なものになる。
そういう意味ではjQueryはとりあえず使っとけと言うものでは無くなった。
特にjQueryは標準にかなり影響を与えていて、標準がjQueryを改善した、
似てるけれど少し違うものを用意しているという問題もある。
つまりjQueryのAPIは腐ってきてるということ。
ただしDOMAPIもそれほど豊富なわけではないのでまだまだDOM操作のフレームワークやライブラリは必要。
とはいえ比較的基礎的なAPIを提供するjQueryをわざわざ使う価値と、合うケースは減ってきてると思う。
on → ES7を先取りしてObserableに切り替える
でいいんじゃない
そういうスタイルで書くならやっぱり同期メソッドもチェーンで書きたいよね
でもObservableとjQueryを組み合わせるのは難しそう
ここを標準に期待するのは無理だから、おそらくまたどこかのいいライブラリがデファクトスタンダードになって
それを標準が追いかけるようになるんだろうね
いつまでたってもライブラリからは逃れられずに時代は繰り返される
Elements.prototype.__proto__ = new Proxy(Array.prototype, {
get(aryProto, key, elems) { return (key in aryProto) ? aryProto[key] : (...args) => elems.map(el => el[key](...args)) }
});
http://dev.w3.org/csswg/cssom-view/#enumdef-scrollbehavior
Chでようやく認識するようになった段階で動くのはFxくらいだが。
原因を調べるとどうやらprototypeとproxyを組み合わせると上手く動かない。
var o = Object.create(new Proxy({ hoge: 1 }, {
get(){ return 2; }
}));
console.log(o.hoge); // 2
console.log(o.fuga); // なぜかundefined???
これはバグ？
少なくともNightlyでは直ってる
https://bugzilla.mozilla.org/show_bug.cgi?id=914314
サンクス
標準化される前に、標準のprototypeを拡張するのはよくないよ。
あとから標準化された時に名前がかぶっていたら互換性の問題が発生する。
Prototype.jsがそれで痛い目にあってる。
http://qiita.com/jwhaco/items/b5b474883d3020f6dc5f
標準のprototypeを拡張するぐらいなら、
独自のオブジェクトでラップした方がいいと思う。
それがjQueryでやってることでも有る。
まあサブクラスを作るのが一番筋がいいと思うけどな。
それを実現しようと思ったら、document.getElementsByNameの
戻り値をサブクラスにするってことになるんだけど、
getElementsByNameはdocumentだけにあるものじゃない。
すべての要素に、getElementsByNameがあるわけだから
Elementsを拡張するのであれば、Elementを拡張しなければならなくなる。
もちろんgetElementsByNameだけじゃないね。getElementsByTagNameとかもそう
サブクラスを作るって言えば簡単に思えるかもしれないが、
実際には標準のDOMのElementのメソッドを書き換えまくることをしないといけない。
それで安定して動くのか？って考えると難しい話なんだよ。
だから現実には標準のprototypeを書き変えることをしない。
ブラウザという実行環境がユーザーの手にあって開発者の自由にできないものは、
開発者が自由に実行環境を決めることが可能なデスクトップアプリや
サーバーサイドアプリと同じやり方でやったらだめなんだよ。
例えば、
function A(x) {
this.piyo = new B(x);
this.C = x;
};
A.prototype.do = function() {
this.piyo.do.call(this); //(1)
};
function B(x) {
this.B = x;
};
B.prototype.do = function() {
console.log(this.B); // undefined
console.log(this.C); // 10
};
var hoge = new A("10");
hoge.do();
というコードがあったとします。
この時、(1)でthisをhogeとして呼び出したのでthis.Bがundefinedになりますが、
this.Bの時だけthisをpiyoとして呼び出したいのです。
(1)をthis.piyo.do();として、console.log(this.C);をconsole.log(B.C);とすると、クラス変数ではないのでundefinedとなります。
頭が硬いね。
別にそうしなくてもSub.from(hoge)としてラップすればいいんだよ。
jQueryみたいな１から作るのと違うのはElementsのメソッドを活かしながら必要な機能のみを安全に拡張できるところ。
onは必要だしattrやpropやdataも必要
addもremoveも、insertもbeforeもafterもreplaceWithもだし、
eachやgrepも必要だろう。
もちろんメソッドチェーンも必要だし、
逆に必要じゃない機能ってなんだ？
結局jQueryの再実装をしているだけなんだが。
標準のDOM要素に標準化されてないメソッドを追加すると
あとで同じメソッドが標準のDOM要素に追加された時困るから
やるべきじゃないよ。
継承しても一緒。継承元に有る標準のメソッドを
オーバーライドしてしまうことになる。
オーバーライドしてしまうのなら問題ないよ。
>>664が問題なのはオーバーライドしないことで、同名の標準ができた時に壊れることだから。
それに標準のものには追加してないでしょ。
別個体のサブクラスに明示的にラップするという操作を伴うものだから、他への影響はないよ。
誰かがしちゃいけませんって言ったことを理由も考えずに信じ続けるのは良くない。
> オーバーライドしてしまうのなら問題ないよ。
おいおいｗ 問題を認識してないのかよ。
DOM非標準のものならば、自分しか使わないから問題ないが
DOM標準の場合は、オーバーライドしてしまったら
他のライブラリが改変された関数を使ってしまうかもしれないだろ。
だからjQueryなどはDOMとは全く別のオブジェクトで
ラッピングするという手法をとっているのだが。
話をまとめるか？
1. 標準のElementsにはattr()というメソッドはありませんでした。
2. だから標準のElementsを拡張してattr()を追加しました。
3. このattr()は当然オレオレ実装です。
4. あるときElementsに標準仕様でattr()が追加されました。
5. オレオレattr()と標準attr()で仕様が違いました。
6. 他のライブラリは標準attr()だと思ってるのにオレオレattr()が呼び出されて困りました。
こういう話なんだが。これprototype.jsで実際に起きた話な。
で、お前はサブクラスなら問題無いと言っているわけだが、
サブクラスでも問題有るんだよ。なぜならElementsを返すのは誰？って話。
例えばdocument.getElementsByTagName()だけじゃなくて
全ての要素.getElementsByTagName() やその他多くの全て。
すべての要素のgetElementsByTagName()だけでなく、
createElement('div') で作られた要素のgetElementsByTagName()も
サブクラスを返すように改変しないといけない。
そうすると、DOMのElementのprototypeを改編する話だってのはわかるな？
＞＞サブクラスを返すように改変しないといけない
だからそうじゃないって言ってるだろ。
>>674を見たのか？
逐一Elementsをサブクラスにラップして使うやり方について言ってるの。
だからElementsを利用してる他のものに影響を与えることはない。
まず人の話をよく聞いてから批判しような。
あんたたサブクラスとラップという用語を
ちゃんとわかってないって言うことがよくわかったよｗ
ラップするならばサブクラスにする必要はないし普通はしない。
jQueryはDOM要素郡（そこでいうElements）をラップしたもの。
正確に言うならば、jQueryの$()などで返すjQueryオブジェクトは
DOM要素郡（そこでいうElements）をラップしたもの。
ちゃんとわかってるなら○クラスのサブクラスにするって
具体的に言えるはずだ。 ぜひ○の中身を答えて欲しい。
先回りしていっておくと、世の中には○クラスを引数にする
関数が存在するが、○クラスを互換性がない形に改変すると
その関数の引数に入れられなくなる。（本当にサブクラスなら入れられる）
だが改変しないとメソッドチェーンが使えなくなる。
分かってないのはあんた。
Elementsに元々あるメソッドを使うためにもそうするのが一番自然、
言い訳見苦しいよ。負けを認めなさい。
> Elementsに元々あるメソッドを使うためにもそうするのが一番自然、
Elementsに元々あるメソッドって何のことだよｗ
なんのサブクラスにしたいわけ？
答えられてないよね？
> 言い訳見苦しいよ。負けを認めなさい。
ワロタｗ
勝ったつもりでいるんだｗ
固定観念を持っているんだろうね。
jQueryのeachではなく、
Elements.forEach（Array.forEach）を使ったほうが
いいはずだって思ってるのだろうけど、
forEachではメソッドチェーンが出来無くなってしまうわけで
元々のメソッドを使うとjQueryからすると劣化してしまう。
劣化しないように作るとなると元々のメソッドはほぼ全て使えなくなってしまう。
ここまで考えずに、元々のメソッドを使う方が絶対にいいはずだって
固定観念を持っているんだろうね。 👀
Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f)
queryAllとかあるでしょ。
それらを一々再実装するの？
元からあるのを使った方がいいに決まってる。
>>686
mapを使えばmapはthisのコンストラクタを見て、
きちんとサブクラスのインスタンスに結果を追加していってくれる。
他のArrayのメソッドでも同じ。
そういう意味でもサブクラスにするのは正しい。
> それらを一々再実装するの？
君はライブラリを使うってことを覚えようよｗ
jQueryが実現しているから使うだけ。
それにqueryAllが返すElementsの話だろ？
Elementsをサブクラスにしろっていう話なんだから。
queryAllがあるのはElementであってElementsじゃない。
mapがあるのはArrayであってElementにはない。
Elementsにも無い。（queryAllが返す要素の配列は、本当の配列じゃないから）
それらを一々サブクラスに再実装するの？ｗ
ライブラリを使えばいいというのはそのとおりだよ。ライブラリはダメとか言ってないだろう。
そういう話ではなく、どういう手法がいいかということで、
jQueryのように丸っと世界を構築するよりも、>>664のようにするよりも、サブクラスを用意するのが一番折り合いがとれてるという話をしてるんだ。
なにを勘違いして一人で苛立ってるんだ？
そしてElements.prototype.__proto__ == Array.prototypeだし、
queryAllが返すのだって列記としたArray exotic objectだから。
ES6からはビルトインコンストラクタはnewTargetを見て適切なプロトタイプを持ったインスタンスを作ってくれるでしょ？
継承するというのはそういうことだよ。
もうホントにね、人の話は聞かない、仕様も読まない知らない、考える力もない、反省もしない。
君と話してると呆れて疲れるね。
焦点がずれてるな。サブクラスにする危険性をわかってない。
まずElementsがArrayだとしてjQueryに比べれば大幅にメソッドが足りない。
onとかattrとかきりがないから全部言わないよ？
そこでElementsのサブクラスを作ってメソッド追加しろって言いたいんだろ？
それが危険だという話。
ElementsのサブクラスはArrayでは無くなってしまうから。
なぜなら、
Elementsのサブクラスにhogeというメソッドを作った。
将来のArrayが拡張してhogeというメソッドを作った。
ElementsのサブクラスのhogeとArrayのhogeは別物
つまり、ElementsのサブクラスのはArrayではなくなる。
型あり言語なら型とシグネチャで正しくディスパッチしてくれるが
JavaScriptのような言語では無理
そして問題はまだある。
Elementsのサブクラスを作ったからといって、
queryAllがElementsのサブクラスを返してくれるわけじゃない。
DOMのあらゆるAPIがElementsの代わりに、
Elementsのサブクラスを返すようにモンキーパッチしまくらないといけない。
何かを忘れていると、よくわからないエラーが発生することになる。
危険性があるうえに、既存のメソッドを間違いなく修正するという大変な作業が必要。
サブクラスの仕様を考えただけで全てがうまくいくって考えてるようだが経験と想像力が足りないよ。
実際の動くコード書きなさい。
jsfiddleって知ってるかい？
論点がずれてるのはあんた。
オーバーライドは問題にならないという話はもう上でしただろ。
想像力がないのか？
もし万が一新しいメソッドがArrayやElementsに追加され、
それがサブクラスと被ったら、ライブラリをバージョンアップすればいいだけ。
サブクラスは元クラスのプロトタイプ拡張と違って、明示的に使ってない周りへ影響を与えないし、
環境が新しくなっても、古いバージョンのライブラリに依存してる古いコードが壊れることもない。
それと、queryAllがサブクラスを返したりすることはやらないと言ってるでしょ。
一度ラップしてやれば、例えばmapなんかはArrayではなくきちんとサブクラスのインスタンスを返してくれるように
ES6では設計されているので、何度もラップしたりすることなくチェーンできる。
似て非なる物だが最近は右辺をカンマで長々しく区切るコードを少なからず目にする。
他人にはテストし難くてやや理解困難だから引き継ぐ時には丸ごと捨てられてやり直されるのだろうな。
但し非同期も同期もあらゆる処理をチェーンで書くメソッドが不足してる
JSの表現力からしたら可能だけど、世界が追いついてない
Observableとそれと共に現れるであろうフレームワークにはかなり期待してる
> オーバーライドは問題にならないという話はもう上でしただろ。
それに対するレスを>>691で書いただろ
ホントお前人の話し聞かないなｗ
言った所で今は使えないわけで、
将来は！将来は！って繰り返し言ってもなぁ
あと10年後にまたおいで。
> 細かくconsole.log()したいから無意味にチェーンしないさせない。
もしかしてチェーンしたらconsole.logできないと思ってる？
そのための有名なメソッドがtapなんだけど。
残念ながらjQueryでは標準対応してないから、
たった4行だけ書かないといけないけど
$.fn.tap = function (callback) {
callback.apply(this);
return this;
};
これであっという間に、console.logができる。
function log() {
console.log(this);
}
$('#id').children().tap(log).children()
ElementsがElementのメソットを使えるようにするにはどうするのがいいかの話をしているんだろ。
ElementsはES6前提だし、今更何言ってるの？
もう知らないのなら無理に話に入ってこなくていいから。
勉強して出なおしてね。
全部再実装するんだろ？
で、あとからその実装したメソッドと同じ名前で
新たに標準追加されて大混乱ｗ
既に過去に起きた事件だ
そのElementsのサブクラスを使ってる部分だけで閉じてるんだから。
新規で使う上で気になるのならライブラリを更新すればいいだけだし、
古い物に依存してる場合も問題は起きない。
全てのDOM APIが、Elementsの代わりに
Elementsのサブクラスを返すようにするって
言ったばかりじゃんかｗ
>>679が見えないのかな？
Arrayとかネイティブの奴はES6できちんと継承が考慮がされた設計にされたけど
DOMの継承を利用した奴はこれから実装される段階だしおそらくissueになると思う
まあ例えElementsのままでもサブクラス側では機能を実装する必要はなくて
queryAll{return new SubClass(super.queryAll())}みたいなのでいいだろうし
全てのメソッドをオーバーライドするのが面倒臭ければそれこそProxyをプロトタイプに挟めばいいか
なんにせよこれは重大な問題提起だと思うね
jQueryオブジェクトをコンソールで見ると配列形式で表示されますが、これはどのようにしているのでしょうか？
http://i.imgur.com/lX94ne4.png
> $("body")
> [ <body></body>] ←これのことです
配列という訳でもないみたいですし…なにか条件があるのでしょうか？
すみません説明不足でした。
配列というのはArrayのインスタンスという意味です。
Array.isArray($("body")) が false であることから分かるように、Arrayのインスタンスではありません。
Arrayのインスタンスでもないのに、なぜ配列形式で表示されるのか？という疑問です。
そしてその方法を使って、自分で定義したArrayのインスタンスでないオブジェクトにも同様のことをしたいと思っています。
「配列のようなオブジェクト」で検索してみたら、こんな感じだった
{
"0": "0番目の内容",
"1": "1番目の内容",
"length": 2
}
返信ありがとうございます。すみませんが解決しました。
lengthプロパティとspliceメソッドがあることが条件らしいです…。
http://stackoverflow.com/questions/6599071/array-like-objects-in-javascript
http://i.imgur.com/1xycIt2.png
結局それ、jQueryの実装そのものじゃないかｗ
結論はそれかもしれないけど、各ブラウザのデバッグ機能は
jQueryに対して特別な対応をしていたはず。
NightlyのFirefoxではDOM要素にどんなjQueryイベントが紐付いているか見ることができる！
http://blog.mah-lab.com/2014/08/30/nightly-firefox-dev-tool/
http://www.buildinsider.net/web/chromedevtools/01
> ConsoleパネルからはDOM操作でページを直接編集できる。documentオブジェクトなどの
> 基本的なJavaScript機能を操作できるだけでなく、jQuery構文も利用できるようになっている。
ありがとうございます！
ブラウザ自体がjQueryに対して特別な配慮をしてるんですね。
spliceの件もその配慮の一環なんですかね。
ただGoogleChromeの方は、ただ単にページにjQueryが使われているから使えるだけなのでは…？
about:blankでも表示される。
そしてページにjQueryが使われているのであれば
$.fn.jqueryでjQueryのバージョンが表示されるが
それがない。
あれ、そうなんですか？
すくなくとも手元のGC41のabout:blankではjQuery方式の書き方はできませんでした。
なにかフラグとか必要なのでしょうか？
$("body") === document.body; // true
$("body").text("hoge"); // Uncaught TypeError: string is not a function
ただコンソールにおいて$がdocument.querySelectorAll相当になってるだけじゃん
それ以上でも以下でもない
https://developer.chrome.com/devtools/docs/commandline-api#selector
Build Insiderのような非公式サイトを参考にするから間違いが起きる
あと、こんな荒らしが立てたスレで質問するよりライブラリ総合質問スレで質問した方が有用だと思うけどね
自分もほとんどここ見てないし
やはりそうですよね。
記憶違いかと焦りました。
ありがとうございます！
715 自分：Name_Not_Found[sage] 投稿日：2015/04/13(月) 23:04:47.09 ID:???
jQueryじゃなくて、$が使えるだけかも＾＾
質問者を助けるスレだ
思い上がらないように
かも、とか可能性レベルの話で回答する前にちゃんと確認しろよ
Aかもしれないし、Bかもしれないなんて回答にならん
このスレには質問と回答しかいらない
ツーチャンネルの技術板の価値は宗教論争だけ。
他の場所で宗教論争なんて本質に突っ込む議論を始めたら単なるキチガイだから。
回答になってないから指摘されてるんだろ
+ JavaScript の質問用スレッド vol.124 + [転載禁止]©2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1429873274/l50
if(document.chbox3 && document.chbox3.elements[0]){
small_option = document.chbox3.elements[0].checked ? 1 : 0;
}
って書いてますが、この場合、存在チェックって、
document.chbox3 && document.chbox3.elements[0]でよろしいでしょうか？
何かいい手がありますでしょうか？
document.chbox3 && document.chbox3.elements && document.chbox3.elements[0]
jQuery使っていいのなら
var small_option = $('[name="chbox3"]').prop('checked') ? 1 : 0;
（「? 1 : 0 」はいらん気もするが）
要素がなければundefinedになってくれる。
0個以上の要素として扱うと、こういう風にシンプルに書くことが出来る。
ありがとうございます。
small_optionはajaxで、php側に投げるデータで、php側でpostで受け取り、
1か0でないなら「small_optionが不正」ってエラーメッセージを出す仕様なので、
undefinedだとまずいです。
var small_option = $('[name="chbox3"]').prop('checked') || 0;
もしくはこれ。（checkboxのvalueの1が設定されている前提）
var small_option = $('[name="chbox3"]').val() || 0;
存在チェックの話だったね。
jQueryを使えば存在チェックそのものが不要になる。ということで。
一部分だけjQueryのセレクタ使ってるようなコードに違和感がないならいいが
え？ どこが？？？
jQueryって存在しないchbox3に対して
$('[name="chbox3"]').～ってやっていいのでしょうか？
問題ないように作られている。
NULLオブジェクトパターンとでも言えばいいかな？
コレクションだから少し違う気もするが、要素がなくても（NULLでも）
何も効果がないだけでコードは動くように作れる。
jQueryを使ったプログラミングでは「要素があるか？」という
条件文をなくすことが出来る。（これはNULLオブジェクトパターンの特徴でもある）
> $('[name="chbox3"]')
これだと分かりにくいかもしれないからちょっと変えて、
$(':checkbox ').prop('checked', true) を実行すると
すべてのチェックボックスのチェックをONにする。
言い換えると、0個以上のチェックボックスをONにする。
0個以上なので、0個の場合でもOK
反対にこれは、$(':checkbox ').prop('checked')見つかったようその内
最初の要素のcheckedを取得する。見つからなければundefined。
そのように作られている。
これでJS書いてる人はいますか？
sublimeの未登録アラートがうざいので乗り換えもありかと思ってます
どうですか？
基本的にJavascriptで書いてますが、皆さんjQuery等って使ってますか？
使うときは基本的にバージョン固定にするよ
jQueryの欠陥を指摘させて、吐く毒に紛れて見え隠れする次世代のアイデアをパクろうとしてないか？w
ソース読んでみたら？マズイ所ばかりでウンザリさせられるよ。
> jqueryって仕様が変わるたびに
JavaScriptだって仕様が変わるたびに、見直し必要だろうｗ
もちろん滅多に仕様は変わらないが。あ、jQueryの話しね。
> 皆さんjQuery等って使ってますか？
それに関してなら、どれくらい使われているかのデータが有る
http://w3techs.com/
JavaScript Libraries
Most popular JavaScript libraries
1. JQuery 63.8% +0.7% 95.1% +0.1%
2. Modernizr 8.1% +0.2% 12.1% +0.3%
3. Bootstrap 7.2% +0.4% 10.8% +0.5%
4. MooTools 4.1% -0.1% 6.1% -0.2%
5. Prototype 2.3% 3.5%
63.8%の人が使ってる一番使われているライブラリだそうだ。
閲覧者サイドで一番便利なスマホページとは、スクリプトを使っていないページ。まさに10年以上前のPCページと相似な状況。
http://demon-uploader.rosepink.us/small.html?img=2015050308253711382.JPG
jQuery使わないとキツイとこはライブラリ使ってますが、
idクリックして関数実行とかはjQueryなしで実装できるので、使ってません。
Ajaxでphpにデータ送るとかは、ブラウザ毎の対策が面倒なのでjQuery使ってます。
なにいってるんだ？
JavaScriptが動いてないところでは
jQuery使っていたって関係ねーよ。
まあ素人さんが嘘をついたらこうなるという実例ｗ
爆発するという映像表現を信じているとか？
みたいなニュースが最近あったので
ニュー速あたりで謎知識を聞きかじってしまったのではないかと
winがおかしくなったのでosxで作業してます
chromeの場合は同じアプリがosxでも使えるのでありがたいですが
tweetdeckが、winと比べるとクッソ重いことに気づきました
jsの実行速度はOSによってかなり違うのでしょうか？
func();
で実行するのと
function(){func();};
で実行するのと何が違うんですか?
後者は無名関数だったりしない？
リアルタイムに更新されるのはJavaScriptですか？
ああいったものを使いたいのですが難しいですか？
Amazonを使うだけなら、JavaScriptの知識は無用だよ。
アスペ？
簡単だよ。
JavaScriptを普通に使えるプログラマなら簡単
+ JavaScript の質問用スレッド vol.125 + [転載禁止]©2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1436910657/
+ JavaScript の質問用スレッド vol.125 + [転載禁止]©2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1436910657/
お願いします
スクロールしてもヘッダ（とcaption）は固定表示のtableを作りたいのですが、
・tableのwidthはパーセント指定
・theadのセルはwidth指定無し（可変）
・border-collapse: collapse
この条件だと、色々なチュートリアルサイトの方法やjQueryプラグイン等を試してもどうもレイアウトが崩れてしまいます
どうかアドバイスいただきたいです
お願いします！
申し訳ありません、現行スレに書き込みます
.
板違い（？）の上に、話をさえぎってしまいゴメンナサイ！(*_ _)人
でも、この板のユーザーさんにも有意義な告知かと思うのでカキコませてください。
★ 謝礼は十分いたします ★ アメブロなどのサイト制作ができる方！！
アメブロなどを使用してのサイト制作のできる方を早急に求めています！
私はリケジョやPC女子からはほど遠く、サイト作成にはまったく疎いのでとても不自由しています…(> <；)
そこで私に代わりサイトを作成してくださる方を求めてこの場をお借りしました。
■サイトの内容…
アダルト系、違法性、その他公序良俗に反するものではありませんのでご安心ください。
■サイト制作の仕様ベース…
アメーバブログで十分です。願わくばwordpressなどのブログ形式のサイトを希望します。
それに準ずるもので使い慣れたものがあれば別のものでも構いません。
■条件はありません…
技術さえお持ちでしたら、学歴・職歴等は一切問いません。
フリーター、ニート、高齢ニート、コミュニケーション障害をお持ちの方、引きこもりの方、中年失業者、長期無職等、歓迎！
■作業形態…
作業は在宅でやって頂くことになりますので、時間の指定は一切ありません。別のお仕事の傍らに…でもOKです。
■詳細をお知りになりたい方は…
下記メールアドレスまでご連絡ください。詳しく書いた返信文を差し上げます。
※真剣な告知です。冷やかしはご遠慮ください。
井 上
inoue1952w★gmail.com
迷惑メール対策のため＠部分を★にしてあります。
実際に送信する際には★を＠マークに変えてください。
.
.
http://www.infocart.jp/e/34707/58078/
<!--
function show_hide(id) {
disp = document.all(id).style.display;
if(disp == "block")
document.all(id).style.display = "none";
else
document.all(id).style.display = "block";
}
//-->
</SCRIPT>
クリックすると隠れていた文字列が表示されるスクリプトですが、
パカッと表示されるのではなく、スルッと表示されるようにできませんか？
+ JavaScript の質問用スレッド vol.129 +
http://echo.2ch.sc/test/read.cgi/hp/1456250334/l50
よくあるhoverのmouseoutで子孫要素は無視するやーつの関連なんですが
<div>
<input type="text">
</div>
<div>には十分なpaddingがあるとして
<input>をダブルクリックとかしたときに出るブラウザUIの入力補完サジェストに
マウスを乗せると<div>でmouseoutイベントが発火するのだけれど
これを検知して除外するにはどうしたら良いでしょうか？
event.relatedTargetはnullでした
jQueryのhover()メソッドではmouseout扱いでした
下記に移動しました
http://mevius.2ch.sc/test/read.cgi/hp/1456242505/882
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
HVY0TJD7SU
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
D13NS
【環境】IE9以上、他最新で動けば可。
【エラー】なし。
【期待する結果】結果は現状通り。コードの整理。
【サンプルコード】下記。
fanc-中1(){
fanc-中1の処理
fanc-下1(); fanc-下2(); fanc-下3();
}
fanc-中2(){
fanc-中2の処理
fanc-下1(); fanc-下2();
}
fanc-上(){
fanc-中1(); fanc-中2();
}
で結果は正常ですが下1と2が2回呼ばれてしまいます。
下は再描画など処理後の後処理なので最後に各1回実行すればいいものです。
fanc-中1(); fanc-中2();
fanc-下1(); fanc-下2(); fanc-下3();
}
としたいのですが、すると中用にもう1つづつfuncが必要になります。
fanc-中1(){
fanc-中1の処理
}
fanc-中2(){
fanc-中2の処理
}
fanc-中3(){
fanc-中1();
fanc-下1(); fanc-下2(); fanc-下3();
}
fanc-中4(){
fanc-中2();
fanc-下1(); fanc-下2();
}
これでもいいのですが、もっとスマートな書き方があれば
教えてください。
部分適用やカリー化の記事を見ましたが今ひとつ理解しきれません（そもそも関係ない？）。
よろしく願いします。
中1未満の恥ずかしいレスだな
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12193781232
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。
今でも2Dならそこそこ動くだろう
ストリートファイター３はさすがに無理だよね？
あと、Unreal.jsって何なんだよ。
もっと本格的なjavascript用のゲーム開発ツールを作ってほしい。