X

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

■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2014/09/13(土) 19:11:44.98ID:???
JavaScript に関する何でも質問スレです。
お気軽にどうぞ。
0750Name_Not_Found
垢版 |
2021/08/11(水) 00:02:48.47ID:???
comfirmのダイアログにidが無い場合、
SeleniumでもjQueryでもcomfirmのダイアログを指定するには何オブジェクトなのでしょうか・・？
windowでイケます・・？
0752Name_Not_Found
垢版 |
2021/08/11(水) 10:52:26.99ID:???
id, class, タグ名などを組み合わせて、特定できないの？
0753Name_Not_Found
垢版 |
2021/08/11(水) 15:37:59.62ID:???
>>752
無理のようですね。ダイアログが表示されている時はF12でソースすら確認出来ない状態ですし
confirmするのにidもclassもHTMLも不要ですし、、
0754Name_Not_Found
垢版 |
2021/08/12(木) 00:47:58.26ID:???
<ul id="img_set" style="display:flex">
<li><img src="test1.png"></li>
.
.
<li><img src="test5.png"></li>
</ul>
このような横並びの画像があったとしてその幅を取得したいけど
chromeだとgetpropertyでulのwidthを取得できたけどIE11だと
ちゃんとした幅が取得できませんでした。
どうすればIEでもちゃんとした幅が取得できますか？
0756Name_Not_Found
垢版 |
2021/08/12(木) 08:28:31.44ID:???
>>755
釣りじゃないよ
chromeとedgeはwidth2000だったけど
IEだと1000くらいだった
0757Name_Not_Found
垢版 |
2021/08/12(木) 11:23:44.53ID:???
さすがにもうIEをフォローするのは止めちゃってもいいんじゃないかな
0758Name_Not_Found
垢版 |
2021/08/12(木) 11:40:30.00ID:???
？？？「社のえらい人がIE使いなので対応してください」
？？？「官公庁です。根幹システムがIEのみなので従ってください」

これが日本
0759Name_Not_Found
垢版 |
2021/08/12(木) 12:17:13.81ID:???
そういう人はここには来ない
0761Name_Not_Found
垢版 |
2021/08/16(月) 00:10:17.57ID:???
var img_url_list = ["./aaa.png","./bbb.png","./ccc.png"];
var img_kosuu = img_url_list.length;
var img_obj_list = [];

for(var n=1;n<=img_kosuu;n++){

img_obj_list[n-1] = new Image();
img_obj_list[n-1].src = img_url_list[n-1];

}
var img_load_count = 0;

for(var n=1;n<=img_kosuu;n++){
img_obj_list[n-1].onload = function(){
img_load_count++;
}
}
var msg = img_load_count + "個の画像を読み込みました。";
alert(msg);

ちゃんと３個の画像を読み込んでも「０個の画像を読み込みました」って表示されてしまいます。
img_load_countはちゃんとカウントされているはずだけどどうしてですか？
どうすれば読み込んだ画像の数を表示できますか？
0762Name_Not_Found
垢版 |
2021/08/16(月) 02:52:21.51ID:???
一つ目のループの最後にappendChildを入れてみるとか
document.body.appendChild(iimg_obj_list[n-1]);
0763Name_Not_Found
垢版 |
2021/08/16(月) 03:18:06.79ID:???
>>761
どのタイミングでload eventが発生するのか考えたら？
0764Name_Not_Found
垢版 |
2021/08/16(月) 08:06:13.76ID:???
>>761
読込完了前にalert出してるから0個で正解
雑に対応するなら時間差を付ける
setTimeout(function(){
var msg = img_load_count + "個の画像を読み込みました。";
alert(msg);
},3000);
0765Name_Not_Found
垢版 |
2021/08/16(月) 12:47:43.04ID:???
Promise化してPromise.allで待つ
0766Name_Not_Found
垢版 |
2021/08/17(火) 12:42:11.34ID:???
>>761
最後のalertを全ての画像を読み終わったときにしたいなら
onloadの関数内でlengthとcountを見て最後だったらalert出す
にしたらいいんじゃないかな
0767Name_Not_Found
垢版 |
2021/08/18(水) 13:33:32.55ID:???
Promise.all で良いのでは？
0768Name_Not_Found
垢版 |
2021/08/23(月) 03:40:06.83ID:0irl4Nx0
今djangoメインでウェブアプリを作ってるんですが、どこまでの計算処理をjavascriptに任せてどこからをバックエンドのpythonで処理すべきかよくわかりません。

できる限りブラウザ側に計算処理させた方がいいと思うので出来る限りjavascripjで処理するようにするという基本思想で間違ってないでしょうか？

ほんとにバックエンドサーバー側で必要な処理だけをpythonで書くというのであってますか？
0769Name_Not_Found
垢版 |
2021/08/23(月) 04:41:21.50ID:???
Ruby on Rails の基本は、HTML をサーバーで作って返す。
JSON を返す、API モードもある。
さらに最近は、GraphQL もある

個人の起業用には、Rails, Bootstrap を使う。
または、それにReact も加える

YouTube で有名な、雑食系エンジニア・KENTA のサロンでは、
さらに、Vue.js, TypeScript も加える。
これは大企業用
0770Name_Not_Found
垢版 |
2021/08/23(月) 09:37:49.47ID:???
>>768
採用してるアーキテクチャとメンテナンス性やUXを考慮した役割分担方針によるので
一概にできるだけブラウザ側で処理したほうがいいというわけでもない

APIサーバーじゃなくDjangoのテンプレートエンジンつかってViewを返してるんなら
明らかにUXが向上する箇所だけクライアント側で処理するという方針も十分ありえる
0771Name_Not_Found
垢版 |
2021/08/23(月) 12:04:41.00ID:???
>>768
お節介だとは思うけど数字を誤魔化されるとマズいアプリだと計算はサーバ側で必要な処理になるからね＞ゲームとかショップとかバリデートしなきゃならない
一言で「必要な処理」と言ってもアプリそれぞれだから注意しといてね
0772Name_Not_Found
垢版 |
2021/08/25(水) 17:38:24.41ID:???
webに関してなんですが
greasemonkeyで本来宣言されていない変数名を定義すると
web管理側が対策をしようとすればわかっちゃうものなんでしょうか
var test;
ほにゃらら処理行
test = undefined;
としておけばわからないのでしょうか
Firefoxのコンソールで見ると宣言前に
test で ReferenceError: test is not defined と表示され
test = undefined;後にtest を入力すると undefined と表示されます。
未宣言か未定義かの違いだと思うんですが
これの区別ってjsでできますか？
また使った変数を未宣言の状態に戻すことは可能でしょうか？
0773Name_Not_Found
垢版 |
2021/08/25(水) 18:20:51.22ID:???
基本見えないし自分が管理者ならそんな無駄な努力はしない
あと余所に見せたくないなら基本let,constで宣言すべき
0774Name_Not_Found
垢版 |
2021/08/25(水) 18:52:04.35ID:???
グリモンは全体を無名関数でくるめばサイト側から見えなくなるという話はどうなんでしょうか
0775Name_Not_Found
垢版 |
2021/08/25(水) 19:13:32.43ID:???
ありがとうございます
とあるサイトに
if(typeof(emergecy_xxx_brake_flg) !== undefined && emergecy_xxx_brake_flg == true){ ぬけあな }
みたいなコードを見つけかつ
emergecy_xxx_brake_flg をみると未定義でしたので
greasemonkeyでぬけあなを見つからないように使おうかなと思った次第です
あとでundefinedを入れておけば見つからないようですね
0776Name_Not_Found
垢版 |
2021/08/25(水) 19:26:19.06ID:???
ユーザースクリプトは無名関数で囲む書き方が一般的だけど
しなくても主要なユーザースクリプト拡張は
ページ側の変数や関数名とバッティングさせない、GM API等のために関数でラップされて注入されてるのでページ側のスクリプトからは見えない
0777Name_Not_Found
垢版 |
2021/08/25(水) 19:28:31.43ID:???
ということはemergecy_xxx_brake_flgをgreasemonkeyで定義しても元のscriptからは見えないし
ぬけあなを利用できないってことか
ありがとうございます
0778Name_Not_Found
垢版 |
2021/08/25(水) 19:36:12.89ID:???
ゲームのデバッグ用フラグっぽい雰囲気だけど
オンラインゲームなら変数定義云々関係なくチート行為はいずれバレるぞ
0779Name_Not_Found
垢版 |
2021/08/25(水) 19:46:45.57ID:???
広義のチートかもしれませんがフラグが立ってると
google IMA の動画広告を見ないで特定のページに行けるようになります
(postでパラメータを渡していてURLは同じなのでURL入力では飛べない。そのフラグでもIMAのあとのルーチンでも読んでる関数は同じ。)
0780Name_Not_Found
垢版 |
2021/08/25(水) 22:22:25.60ID:???
本来宣言されてない変数名が存在するかどうかなんてチェックしないよ
チート対策はもっと違うアプローチでやる

ユーザー数の少ないゲームだとチート対策にかけられる予算も少ないから
よほどナイーブなやり方じゃなければ検出されない
0781Name_Not_Found
垢版 |
2021/08/26(木) 01:41:30.42ID:???
もうチートだけ続くんじゃ
0782Name_Not_Found
垢版 |
2021/08/26(木) 09:09:45.78ID:???
それはアクセス解析で簡単に検出されるパターンな気がするな

まあYoutubeでも広告見ないでコンテンツだけ見るのも普通にできるから
検出されても対処されるかどうかは運営次第
0783Name_Not_Found
垢版 |
2021/08/26(木) 13:22:24.12ID:???
広告見ないでコンテンツだけ見る方法のがむしろ知りたいｗ
0784Name_Not_Found
垢版 |
2021/08/26(木) 21:57:31.25ID:???
ublock Originみたいなアドブロッカー使う
詳細はググってくれ
0785Name_Not_Found
垢版 |
2021/08/26(木) 22:13:09.83ID:???
ES2015 以降は、var は使わない。
var は、バグるだけ

let, const の時代

Webpack, Babel。
Ruby on Rails でも、そう
0786Name_Not_Found
垢版 |
2021/08/27(金) 18:21:16.16ID:???
<input type="text" id="aaa" onkeyDown="test()">

function test(){
var str = document.getElementById("aaa").value;
alert(str);
}

このようにやって
入力した文字列を表示したいんだけど１つ前に入力した文字列が表示されてしまいます
どうすれば入力した文字を表示できますか？
0788Name_Not_Found
垢版 |
2021/08/28(土) 14:12:13.59ID:M9yJQx4l
jQueryの質問です。
各タグ内から数字テキストのみを抜き出して、それらを数値として合算（足し算）し、
その合計値をテキストで出力したいのですが、どのように書いたら良いでしょうか？

<div>hoge1</div>
<div>hoge2</div>
<div>hoge3</div>

→「6」と出力したいです。

宜しくお願いします(>_<)
0789Name_Not_Found
垢版 |
2021/08/28(土) 16:37:35.57ID:???
vanillaで

Array.from(document.querySelectorAll('div'))
.map(x=>Number(x.innerText.match(/[0-9]+/)))
.reduce((acc, curr)=>acc+curr);
0790Name_Not_Found
垢版 |
2021/08/28(土) 17:21:02.00ID:???
>>789
ありがとうございます！
でも
初心者すぎて結果の確認方法がわかりません・・・
cosole.log();やテキストなどでどうやって確認したらよいのでしょうか。。。
0791790
垢版 |
2021/08/28(土) 17:26:41.82ID:???
すいません、変数宣言したらconsole.logで確認できました
>>789
ありがとうございます_(._.)_


jQueryでもわかる方いらっしゃると助かります。。
試したこと
.map() →文字列扱いされてしまい合計できない。
0792Name_Not_Found
垢版 |
2021/08/28(土) 18:39:11.22ID:???
横からだけど勉強になります。
>>791
jQueryはしらないけどFirefoxで単純なサイトを開いてコンソールにそれを入れれば
いけましたね
0793Name_Not_Found
垢版 |
2021/08/28(土) 19:43:44.73ID:???
>>791
配列とjQueryオブジェクトのmapは全く別物
let sum = 0;
$("div").each(function() { sum += Number($(this).text().match(/[0-9]+/)) });
0794Name_Not_Found
垢版 |
2021/08/28(土) 20:29:35.08ID:???
>>793
ありがとうございます！
ただ、やはり結果の出力方法がわからないのですが、、

let sum = 0;
const total = $("div").each(function() { sum += Number($(this).text().match(/[0-9]+/)) });
console.log(total);
で
k.fn.init(3) [div, div, div, prevObject: k.fn.init(1)]
となってしまうのですが「6」と出力するためにはどのようにしたらよいのでしょうか・・初心者質問ですみません
0795Name_Not_Found
垢版 |
2021/08/28(土) 20:32:15.32ID:???
totalはどこから出て来たんだよ
sumを出力しろ
0796Name_Not_Found
垢版 |
2021/08/28(土) 20:35:25.05ID:???
>>795
ぬお！できました。　　　お恥ずかしい。。
ありがとうございます！！！！
0797Name_Not_Found
垢版 |
2021/08/28(土) 20:47:59.34ID:???
加算代入 (+=)なんてものがあるとは・・・
0798Name_Not_Found
垢版 |
2021/08/28(土) 21:22:19.02ID:???
割って掛ける除乗算演算子と
掛けて割る乗除算演算子もあるぞ
a = 4 /* 2;
a = 4 */ 2;
console.log(a);
//=> 4
0799Name_Not_Found
垢版 |
2021/08/28(土) 21:33:12.98ID:???
Ruby など、たいていの言語に、複合代入演算子がある
0800Name_Not_Found
垢版 |
2021/08/28(土) 23:32:57.67ID:???
ありがたいスレです(>_<)
0802Name_Not_Found
垢版 |
2021/09/03(金) 21:02:01.45ID:???
ここでの質問なのかわからないですが
アナリティクスなどで、訪問者のiPhoneのバージョンがわかるようにしたり、集計ってできますか？
例えばiPhone12が○○アクセス、全体シェア○○％のように
0804Name_Not_Found
垢版 |
2021/09/03(金) 21:44:48.13ID:???
const $el = document.getElementById('hoge');
let func = () => {
console.log($el);
}
setInterval('func()',1000);

としたところ、$elはnullになってしまいます。

let func = () => {
const $el = document.getElementById('hoge');
console.log($el);
}
setInterval('func()',1000);

とすれば$elには値が入りますが、setIntervalを実行する度にconstをセットするのが
どうもスマートでないように思います

JSの作法的に正しくて、スマートに書こうと思ったら
どう改善したら良いでしょうか？
0806Name_Not_Found
垢版 |
2021/09/03(金) 21:56:16.09ID:???
>>804
setIntervalの気持ち悪い書き方を直すだけ
setInterval(func,1000);
0807Name_Not_Found
垢版 |
2021/09/03(金) 22:07:25.41ID:???
スマートな書き方を聞くやつはスマートじゃないの法則
0809Name_Not_Found
垢版 |
2021/09/07(火) 05:43:43.55ID:???
Firefox のコンソールで　0/-2　など　0を-xで割ると -0と出るのですが
プログラミングでは一般的なのでしょうか
0と出てきて欲しいんですが
0811Name_Not_Found
垢版 |
2021/09/07(火) 07:50:22.49ID:???
>>809
>プログラミングでは一般的なのでしょうか

そこそこ一般的
0812Name_Not_Found
垢版 |
2021/09/07(火) 09:51:01.19ID:???
ありがとうございます。
よく考えれば今回は-0でも問題ありませんでしたのでそのまま処理しました。
0814Name_Not_Found
垢版 |
2021/09/13(月) 12:36:49.23ID:???
<style>
#test{
filter:sepia(50%);
}
</style>

<ul id="test">
<li><img src="./img1.png"></li>
<li><img src="./img2.png"></li>
</ul>
<input type="button" value="クリック" オンクリック="aaa()">

<スクリプト>
function aaa(){
var elm_list = document.querySelectorAll("#test li");
elm.list[1].style.filter = "sepia(0%)";
elm_list[1].style.border="Solid 3px #0000ff";
}
</スクリプト>
セピアを０にして画像を元の色にしたいんだけど色が変わりません
borderの方は線が表示されたのでセレクタは正しいと思うけど
どうしてでしょうか？どうすれば元の色にできますか？
0815Name_Not_Found
垢版 |
2021/09/13(月) 13:31:13.85ID:???
elm.list になってるからでは
0817Name_Not_Found
垢版 |
2021/09/13(月) 14:28:45.90ID:???
ulに対してsepia(50%)設定してるのにliを0%にしたところで変わらんよ
見た目は子孫に影響するけど、プロパティ値は継承しないのでdisplayやopacityなんかと一緒で親の効果を上書きできるわけではないよ
#test li {
filter: sepia(50%);
}
0818Name_Not_Found
垢版 |
2021/09/13(月) 18:38:27.91ID:???
スコープみたいなものですか？
0820Name_Not_Found
垢版 |
2021/09/14(火) 13:43:26.00ID:???
特定の要素から特定のイベントのイベントリスナーを削除することは可能でしょうか？
関数への参照を保持していない状態です。

具体的にはwindow.addEventListener("storage",function(){〜})の形で登録されているようなものです。
ピンポイントで上記だけ削除するのが難しいようであれば、window要素に紐づくstorageイベント全てを一括削除という形でも問題ないです。
0821Name_Not_Found
垢版 |
2021/09/14(火) 19:34:00.52ID:???
chromeはできるかわからないけど
firefoxならublock originで
yahoo.co.jp##+js(aeld, storage,/functionの中身を正規表現で/)
でいけそうだけど
0822Name_Not_Found
垢版 |
2021/09/14(火) 20:32:24.79ID:???
>>820
要素のイベントを全て削除
elm.replaceWith(elm.cloneNode(true))
windowはアキラメロン
0823Name_Not_Found
垢版 |
2021/09/14(火) 22:56:39.52ID:???
イベント登録前に割り込めるならEventTarget.prototype.addEventListenerあたりをフックするとか
0824Name_Not_Found
垢版 |
2021/09/15(水) 11:19:42.58ID:???
addEventListenerをフックするのが一番現実的なんですかね？

しかし、要素に紐づくイベントリスナーや、管理している全てのイベントリスナーを出力するみたいな関数は存在しないんですね……
ありそうなものだけど、というか無いならどこでどうやって管理してるんだろう……
0826Name_Not_Found
垢版 |
2021/09/15(水) 12:45:18.50ID:???
>>825
自分で書く部分ならもちろんそうするんですが、Chromeの拡張で特定のページの邪魔な動作をシャットアウトしたいんですよね。
0827Name_Not_Found
垢版 |
2021/09/15(水) 16:46:22.85ID:???
X軸方向のスクロールを常に禁止にし、常にスクロールをゼロの位置にする事って可能でしょうか？
cssでスクロールバーを出さない方法はありますが、要素が自由に動いてしまうのでスクロールしてしまう事が多々あります
0828Name_Not_Found
垢版 |
2021/09/15(水) 17:55:31.30ID:???
>>822 に一票
クローンして差し替えることによりelmとその子孫のイベントリスナーが消え、その他の属性は残る
0829Name_Not_Found
垢版 |
2021/09/15(水) 19:03:27.68ID:???
スクレイピングすると地獄へ落ちるって本当ですか？
0830Name_Not_Found
垢版 |
2021/09/15(水) 19:21:25.96ID:???
>>826
キャプチャリングフェーズでstopPropagation
0831Name_Not_Found
垢版 |
2021/09/16(木) 12:37:19.77ID:???
#test li{
background:#0000ff;
}
#test li:hover{
background:#00ff00;
}
というcssがある場合hoverのbackgroundを取得したいんだけど
querySelectorAll("#test li:hover")とやっても取得できませんでした。
どうやればいいんですか？
0832Name_Not_Found
垢版 |
2021/09/16(木) 14:04:33.43ID:???
取得しようとした部分を書いて
0833Name_Not_Found
垢版 |
2021/09/16(木) 14:47:41.06ID:???
:hoverはquerySelectorAllで取得できません
ちなみにgetComputedStyle(element, ":hover")もできない
0834Name_Not_Found
垢版 |
2021/09/16(木) 15:15:39.66ID:???
どうやったらできるかを考えるのが、
あなたたちの仕事です
0835Name_Not_Found
垢版 |
2021/09/16(木) 15:27:53.95ID:???
hoverのプロパティ自体を見たければstyleエレメントを見ればいいんじゃないかな
いまカーソルがのってるかを見たいなら
mouseoverイベントか対象にtransition入れておいてtransitionのイベントを見ればいいんじゃないかな
0836Name_Not_Found
垢版 |
2021/09/16(木) 15:47:02.52ID:???
仕事と言われると対価が欲しくなる
0837Name_Not_Found
垢版 |
2021/09/16(木) 18:11:46.09ID:???
>>832
<ul id="test">
<li>aaa</li>
<li>bbb</li>
</ul>
var element_list = document.querySelectorAll("#test li:hover");
var st = getComputedStyle(element_list[0]);
var val = st.getPropertyValue("background");
alert(val);

こうやっても取得できなかった
他に方法はないんですかね
0839Name_Not_Found
垢版 |
2021/09/16(木) 18:36:24.59ID:???
クエリーセレクターにホバーは入れられないって言ってるだろ
0841Name_Not_Found
垢版 |
2021/09/16(木) 21:45:16.33ID:???
>>835
それは
var element = document.getElementById("test");
element.styleということですか？
0842Name_Not_Found
垢版 |
2021/09/17(金) 06:20:01.48ID:???
jQuery には、hover 時のイベントがあるけど
0843Name_Not_Found
垢版 |
2021/09/17(金) 09:12:27.75ID:???
>>841
>>835は意味不明
style要素といってるから、まずはstyle要素でスタイルを定義するところからなんじゃない？
0845Name_Not_Found
垢版 |
2021/09/17(金) 12:48:54.07ID:???
>>844
style要素だよな？
link要素で外部CSS定義していたら、style要素に書き換える必要がある
何のためにそんなことする？
内容からCSS記述をパースさせるのか？
0846Name_Not_Found
垢版 |
2021/09/17(金) 17:57:46.99ID:???
>>845
element.onmouseover = function(){
element.style.background = cssのhoverから取得したbackground;
}
というふうにしたかった
0847Name_Not_Found
垢版 |
2021/09/17(金) 19:02:09.68ID:???
>>846
それは「styleプロパティ」という
>>835は「styleエレメント」といっていたから意味不明だった
そして、styleプロパティでは>>831定義のCSSを取得出来ない
0848Name_Not_Found
垢版 |
2021/09/17(金) 19:23:45.68ID:???
>>Array.from(document.styleSheets).map(e=>Array.from(e.rules).map(e=>e.cssText).join()).join().includes(":hover")
←true
0850Name_Not_Found
垢版 |
2021/09/17(金) 19:44:13.42ID:???
取得できないって人がいたので
■ このスレッドは過去ログ倉庫に格納されています
ニューススポーツなんでも実況