+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
・回答者同士のレスは原則禁止(>>6を参照)
・ライブラリの話題の投稿(>>6を参照)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ attachEventのことも思い出してあげて下さい >>354
メモしておきます！ありがとうございます addEventListenerやxhrの第三引数指定する人ってどう言う考えしてるんだろう?
特にaddのは関数定義の後に記述する事にもなりがちだし不格好なだけと思うけど。 useCapture Optional
捕捉フェーズを使用する場合は、 useCapture に true を指定します。
捕捉フェーズの開始後、指定されたタイプのイベントの全てが、まず、登録された listener に発送され、
その後、DOM ツリーにおいてその下に位置する任意の EventTarget に発送 されます。
ツリーをたどって上方へ浮上するイベントは、捕捉フェーズを用いるように指定されたリスナーを誘発することはありません。
詳細については、DOM Level 3 Events を参照してください。
この引数は、全てのブラウザで省略可能ではないことに注意してください。省略した場合、 useCapture は false となります。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ >特にaddのは関数定義の後に記述する事にもなりがちだし不格好なだけと思うけど。
そもそもコールバック自体が不恰好であってこの感性は理解できない fancybox3のパーツを実走することなく本家のリンクのみで動かしてる場合に、
全画面中の透明なし、背景色の指定、はできないでしょうか？どなた教えてください。
<script type="text/javascript">
$("[data-fancybox]").fancybox({
オプション
}); {a:1, b: 2} のようなリテラルで
prototype のない object（ Object.create(null) ）を作る方法はないですか？ 空を作った後にコピーすれば良いじゃん
var object = o => Object.assign(Object.create(null), o);
object({a:1, b: 2}); >>364
>Object.assign
知らなかった！ ありがとう リテラルなら__proto__:null,を含めれば良いだけだけどな __proto__も知らない奴がassignも知らない奴に教えるスレ
もはや世紀末 ボタン１を押すとボタン２が出てきてボタン２を押すとボタン３が出てくる
という処理をinnerHTMLとaddEventListnerでやろうとしているのですが
ボタン２を押してもボタン３が出てきてくれなくて困っています
innerHTMLで出力したものがイベントターゲットになっていないからだと思うのですが、どうすれば解決できるでしょうか？
プログラムを書くのが初めてなので初歩的な質問だと思いますが、よろしくお願いします innerHTMLしたあとにaddEventListenerすればいいかと
むしろまだ存在していない(innerHTML前)要素にどうやってaddEventListenerしようとしたのか >>369
ボタンの一つ上の要素にaddEventListenerしevent.targetでクリックされた要素を取得し判別する clickイベントはwindowに対して1つだけでいい
あとはevent.targetで振り分け
というかボタン2とボタン3は元々ある状態にしておいて
スタイルのdisplay:noneをdisplay:blockなりに変更するだけでいいのでは >>369
要素が存在しない時にイベントを与えているからだろうなｗ
その辺りをチェック >>369
プログラムだけではないが、
HTML + CSS + JavaScriptの世界では
見た目はCSSで制御する
最初にボタンを３つ書く
<input class="btn" type="button" value="button1" >
<input class="btn" type="button" value="button2">
<input class="btn" type="button" value="button3">
見た目をCSSで制御（最初のボタン以外は非表示）にする
.btn + .btn {
display: none;
}
.btn.clicked + .btn {
display: inline;
}
ボタンが押されたら押されたいう情報（クラス）を自分自身に設定する
（JavaScriptはjQueryを使えば簡単に書ける）
$(document).on('click', '.btn', function() {
$(this).addClass('clicked');
});
実行サンプル https://jsfiddle.net/qz5fLy9y/
ちなみに押したら押されたという状態になって、その後変わらないものは
ラジオボタンを単独で用いれば表現できる。あとは見た目をCSSでボタン風にするだけ
つまりJavaScriptなしでもできるぞ
https://jsfiddle.net/qz5fLy9y/1/ addEventListenerではなくaddEventListnerしてるというオチに期待
エラーも見てないな 皆さんありがとうございます！
cssで隠しておくのと親要素から取得するの２つともで希望の動きができました
皆さんめっちゃ心強いです(*´ω｀*) サンプルまで作ってもらって本当に感謝です
HTMLとCSSだけでもここまで動かせるなんて知りませんでした(；´Д｀)
ちゅーかjsfiddleってサイト便利ですね
私が作ってる程度のものならatomよりこっちのが使い勝手いいかも(??????)?? jsdo.it で、HTML, CSS だけで、
ワニワニパニックを作った人を知らんのか？w HTML5ムーブメントを語る上で避けては通れない
CSSプログラミングを知らないとか教養がないと言われてもしようがないな
昔っからこのスレは知ったかが多かったが
今では知ったかもできないほんまもんの無知ばかりやな んなもん知っとるわ
あのお粗末なワニワニパニックを話に出したレベルの低さに対しての反応だろ
もっと教養を身につけた方がいいぞ 何が「知らんのか？w」だよ。
聞いてもねーのに糞しょうもない知識を自慢したいだけの馬鹿は黙ってろよ。 こいつ通勤中の赤信号にもいちいちキレてそうな奴だな windows版のchrome（バージョンは最新）で
SpeechSynthesisUtteranceの
rateを上げたら、再生出来ないばかりか、
ブラウザを再起動しないとその後再生できなくなる現象が出ています
自分だけでしょうか？
仕様によるとrateの最大値は10なので値は仕様の範囲内のはずなのですが
3にするとおかしくなります
（再生可能）
https://jsbin.com/wuteqewavo/edit?js,console
（rate=3、その後再生不可能）
https://jsbin.com/viriritali/edit?js,console >>387
自分もちょこちょこ試してるけど１年前からそんな感じだよ
そのAPIはセンシティブで上手くいくかはタイミングなんかにも影響する
OSやデバイスのシステムを借りててブラウザだけで完結してる範囲が少ないから
仕方がないのかもしれない
それでも最近は随分マシになった方
最初の頃はまともに動く確率のほうが低かった [ [1, 'c'], [2, 'a'], [3, 'b'], [4, 'a'], [5, 'c'] ]から重複を除いた abc だけを取り出すにはどうすればいいでしょうか？ 1,2,3,4,5の数字のほうはどうでもいいのか？ lodash便利だよ
https://jsfiddle.net/2etnxe05/
a = _.uniq(_.map(list, i => i[1]))
もしくは
https://jsfiddle.net/2etnxe05/1/
a = _.uniq(list.map(i => i[1]))
jQuery使ってるならこっちでも良いね
https://jsfiddle.net/2etnxe05/2/
$.unique(list.map(i => i[1])) nativeでも良いじゃん
list.map(a => a[1]).filter((v, i, arr) => arr.indexOf(v)==i)
Array.from(new Set(list.map(a => a[1]))) ぶっちゃけこれだけのためにlodash丸ごと使うことは絶対にありえない
その内部実装の関数１つだけ借りてくることはあっても そういう時に使いたいのが、これ、custom build
お客さんの要望に応じて必要な分だけをチョイスできる
オトクなパッケージ
https://lodash.com/custom-builds >>392
それ遅い。
https://jsfiddle.net/2etnxe05/4/
> list.map(a => a[1]).filter((v, i, arr) => arr.indexOf(v)==i)
lodashの3倍
> Array.from(new Set(list.map(a => a[1])))
lodashの6倍 配列の中のオブジェクトの中のプロパティ値の最大値をMath.max.applyで呼び出す書き方をご教授くださいm(_ _)m
配列はこんな感じです
var scoring=[
{'male':[1,0,0,0],'female':[10,5,3,0]},
{'male':[2,5,3,0],'female':[10,5,3,0]},
{'male':[0,0,0,0],'female':[10,5,3,0]}
]; >>396
> Math.max.applyで呼び出す
ってのが意味わからん。
スコアの配列を最大値に置き換えれば良いんか？
つまりこういうことか？
https://jsfiddle.net/a1p11fLt/
var scoring=[
{'male':[1,0,0,0],'female':[10,5,3,0]},
{'male':[2,5,3,0],'female':[10,5,3,0]},
{'male':[0,0,0,0],'female':[10,5,3,0]}
];
var s = _.map(scoring, row => _.mapValues(row, (v,k) => _.max(v)))
console.table(s) あー、すまん Math.max.apply を使うんだったな。
https://jsfiddle.net/a1p11fLt/1/
var s = _.map(scoring, row => _.mapValues(row, (v,k) => Math.max.apply(null, v))) 余計なコード（変数）があったわ。訂正
https://jsfiddle.net/a1p11fLt/2/
var s = _.map(scoring, row => _.mapValues(row, v => _.max(v))) >>398
大変申し訳無いです、質問の内容に不足がありました(；´Д｀)
上記の配列から変数を使って特定の値を呼び出し、それが所属する配列の中の最大値かどうかの判定をしたいのです。
変数を使って値を呼び出すところまではできています。
例えば２列目maleの３を呼び出した時、それは[2,5,3,0]の中で最大かどうか？を判定するために、最大値である５を取得したいです。
よろしくおねがいします。
それから初心者すぎて_.mapとかその他もろもろの表現が初見で頭が沸騰してしまってます。
せっかく書いていただいたのに申し訳ないですm(_ _)m >>400
ary = scoring[num][sex] と置けば
num = 1, sex = 'male' のとき
ary が [2,5,3,0] になる
その内最大を得るには
max = Math.max.apply(Math,ary) もしくは
max = Math.max(...ary) >>401
できました！
ありがとうございます(*´ω｀*) >>394
そういう問題じゃ無いんだよね
３種類１０箇所とかなら分かるけど、ただ一つ_を使うのは変だし
それだけのためにライブラリ管理コストかけるのもね
キリも無くなるし
既に利用してる可能性が結構あるjQueryは分かるけど、
_は単発の質問にはそぐわないね >>395
コードが短いのはいいことだけども速さ求めるなら
おとなしくforと連想配列でやったらはやいんちゃう >>388
まだ不安定なんですね
ありがとうございました JSONのデータ構造を変えてから
$.getJSONで取ったデータがおかしくなるという問題に悩まされていましたが
原因はキャッシュでした
GETは通常、パラメータが同じ場合に同じものが返ってくるものですが
データ構造を変えるなどの仕様的な変更が反映されないと困ります
解決方法として、パラメータにタイムスタンプを付加するという方法がありますが
これで毎回別のGETにすることで、
キャッシュが異様に増殖してしまうのではないか、という危惧があります
どうなのでしょうか？ >>406
ブラウザのキャッシュ管理のことまで気にしなくていいとは思うが
やるなら.htaccess等でヘッダーいじれば色々出来る
キャッシュさせないよう設定するとか逆にキャッシュさせた上で毎回確認だけはして更新時のみデータ受信する等 クリックすると広告ページが新しいウィンドウで開くのを開かないようにjavascriptで制御したいんですが、
何かいい方法ないですかね？
window.openが実行された時に、すぐページを閉じるようなやつでもいいんですが、リファラは空だしどうしようかなと。
Google extensionで作ってます。 >>408
uBlock origin 使えばだいたい防げるだろ？
それで足りなければTampermonkeyを使えば良い >>409
こんなのあったんですね
ありがとうございます。
>>410
ありがとうございます
調べてみます。 Underscore は、ライブラリ全体をロードする必要があるけど、
Lodash は、使う関数だけを、include できる
ただ最近は、ES5/6 に実装している、関数も多い
ライブラリにある関数を自作するのは、
ホワイトボックステストも必要だし、品質も悪い >>407
そこまでコントロールできたのですか
ありがとうございます promiseは非同期処理を同期的に書く方法ですが
非同期処理を実際に同期的にするにはどういう方法がありますか？ >>414
取り敢えず全ての非同期関数がpromiseを返すように設計しとけばasync awaitで同期的に書ける
あと問題があるのがobservableやasync iteratorに当たるものだが
これはトランスパイラを使うか、while(await)テクニックで乗り切る
ちょっと悩ましい所 >>415
ありがとうございます
順次調べていきます ぶっちゃけpromise理解できないから騙し騙しやってるわ ローカル変数って
内部的には関数のプロパティとして実現されているのでしょうか？ >>416
概観しましたが、すごくすっきり書けていいですね
generatorで同期的に処理する方法も調べたのですが、
これは本来そのために作られた訳ではない機能をハック的に使ってる感じで
美しくないと感じましたが
それに比べるとasync/awaitはキレイだと思いました プロパティは、プロトタイプチェーンをさかのぼって探索されるけど、
ローカル変数は、さかのぼらない >>418
関数実行時やブロック文に入る度にそのコンテキストに紐付いたオブジェクトのようなもの
globalやwith文中では本当のオブジェクトが使われる 分割代入と変数宣言を同時に行うことは出来ませんか？ let [ a, b ] = ary
みたいにできるよ firefoxがshadowdomに対応してないんで似たようなことがしたいんですが
いいアイディアありませんか？
勉強のためにやるのでフレームーワークなどは使いません それって死んでもFxで動かないと駄目なの?
Fxも１年以内に実装されるだろうから、そのときには動きますで良いじゃん ES2015ではundefinedの上書きが出来なくなったようですが
属性の有無を調べるメソッドなり関数なりが追加されないのは何故ですか？ Object.getOwnPropertyDescriptor( window, 'undefined' )
// { value: undefined, writable: false, enumerable: false, configurable: false } >>427
undefinedの上書きができなくなったことがどう関係するんだ？
undefinedの上書きができれば、属性の有無を調べるメソッドが
無くてもいいってことだろ？ in演算子なんてあったんですね
ありがとうございます 画面構成が一貫したSingle Page Applicationを作っていました
ベースとなるHTMLは最初から記述されていて、
適宜要素を動的に操作していたのですが
異なる構成の画面が必要になりました
部分的な書き換えではおさまりません
そうなると最初の画面から完全に動的に書かなくてはいけないのか？
それとも今の画面をどこかに保存しておいて、処理が終わったらまた戻す？
とか色々考えていますが
こういうことが問題になったらそろそろフレームワークの導入を考えた方がいいのでしょうか？ >>431
hasOwnProperty と使い分けよう >>432
スケールしないことを実感したら切り替え時だろう >>432
もう1個 別のSPA 作って
ShareWorker で状態を共有させる方法もあるんじゃないかな chromeとIEで確認しています
下記のような形でクリックイベントリスナーを設定しましたが反応はありませんでした
どこに問題がありますでしょうか？よろしくお願いします
Hoge.prototype.foo = function(){
var button = document.createElement( "input" );
button.type = "button";
button.value = "テスト";
button.addEventListener( "click", this.bar, false );
this.div.appendChild( button );
}
Hoge.prototype.bar = function(){
alert( "click" );
}; >>437
要素が生成されていないのにイベントを与えているから >>437
途中で送信しちゃったｗ
this.bar
って第二引数に与えると、実際にクリックイベントが発火したとき
thisになるのはevent.targetであってHogeインスタンスじゃない >>440
試しに下記の様にしましたが変わりませんでした
this.div.appendChild( button );
var func = this.bar;
button.addEventListener( "click", func, false ); >>441
変わってないよ
var A = this;
button.addEventListener('click' , function(){ A.bar(); } , false);
とか
これがベストとは言わんけど >>441
そのやり方でもthisになるのはevent.targetであってHogeインスタンスじゃない Function.prototype.bind() を使う Hoge.prototype.foo = function(){
this.div.appendChild(button);
button.addEventListener( "click", function(){
console.log( "test" );
alert( "test" );
},false );
}
そもそも発火しませんでした･･･ >>445
そんな中途半端に書かれてもわからんよ
this.divってなんぞや？とかとか
全部書いておくれ
https://jsfiddle.net/ 詳しいサンプルをありがとうございます
一旦最小構成でテストしてみたら最初のままで通用してしまいました
var Hoge = function( elementId ){
this.div = document.getElementById( elementId );
};
Hoge.prototype.foo = function(){
var button = document.createElement( "input" );
button.type = "button";
button.value = "ボタン";
this.div.appendChild( button );
button.addEventListener( "click", this.bar( this ), false );
};
Hoge.prototype.bar = function( arg ){
console.log( "arg is..." ); //
console.log( arg ); // object
};
var hoge = new Hoge( "test" ); // <div id="test"></div>
hoge.foo(); >>448
>button.addEventListener( "click", this.bar( this ), false );
これは間違ってるよ
第二引数に渡すのは関数
this.bar ← これは関数
this.bar(this) ← これは関数barを実行した返り値 訂正！訂正します
先の書き方だと第2引数が意図せずに実行されてるだけで本当は下記の通りですね
button.addEventListener( "click", function(){ this.bar( this ); }, false );
// this.bar is not a function at HTMLInputElement. >>450
>button.addEventListener( "click", function(){ this.bar( this ); }, false );
おちつけｗ
そのthis.barのthisは第二引数に渡した無名関数のスコープで
無名関数の外、つまりHogeのものじゃない
んでお手軽に解決するなら、Hogeのthisをいっぺん保存してこう
var A = this;
button.addEventListener( "click", function(){ A.bar( this ); }, false );
もっと根本的に解決するなら
Function.prototype.bind()
Function.prototype.call()
Function.prototype.apply()
あたりをググると良いよ >>451
その後色んなパターンを実践していましたが
最終的には、まさに一度thisを保存する方法に落ち着きました
(関数先でクラスのプロパティを参照する必要があるので)
スコープとbind()について落ち着いて調べてみたいと思います
みなさんありがとうございました JavaScript の、this は、コロコロ変わるから難しい。
bind を使わないと、拘束できない
jQuery を使えば、悩むこともない >>453
jQueryを使ってもそこは一緒
だけどjQueryだとクロージャーを使っても循環参照になりづらいのと
DOM要素のリストとして扱うという設計思想によって扱いやすいってだけ
でさ、お前ら何やってんの？
>>437の話だろ？ なんでthisを保存とかいう話になってんの？
addEventListenerの第二引数にクロージャーなんか渡すから
話ややこしくなってるじゃん。 >>437のコードでだいたいあってるだろ
https://jsfiddle.net/rdeuvep2/
function Hoge(elementId) {
this.div = document.getElementById(elementId)
}
Hoge.prototype.foo = function() {
var button = document.createElement( "input" );
button.type = "button";
button.value = "テスト";
button.addEventListener( "click", this.bar, false );
this.div.appendChild( button );
}
Hoge.prototype.bar = function() {
alert( "click" );
};
var hoge = new Hoge("buttons");
hoge.foo(); ■ このスレッドは過去ログ倉庫に格納されています
