私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.141 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
getElementsByClassNameってdocumentとelementあるけど
要素の場所絞れてる場合element使う方がよいですか？
cssみたいに子要素から探していく仕様なら狭い方が多少は早い可能性ありそうかなと。
要素の場所絞れてる場合element使う方がよいですか？
cssみたいに子要素から探していく仕様なら狭い方が多少は早い可能性ありそうかなと。
> cssみたいに子要素から探していく仕様なら狭い方が多少は早い可能性ありそうかなと。
まったくないよ
まったくないよ
少なくとも早いかどうかを気にするのではなくて
複数同名のclassが出て来るかもしれないから要素起点にするかとか
その要素下でなくなるかもしれないからルート起点にするかとか
そういうことを打ち込む直前に無意識にさっと考えて
自然で妥当なコードを書いていくもの
それとquerySelectorが遅いだろうと決めつけるのはダメ
エンジンはよく使われる機能をよく使われるように最適化されていく
単純に考えたらgetElementsByClassNameの方が早いはずだが
セレクタ探索は複雑だからこそ最適化しないといけないので
キャッシュを効かせたりだとかもされている
今はgetElements早いかもしれないが、今後もそうだという保証はない
そして速度の最適化は最後、実際に足を引っ張っている部分があれば
きちんと分析して改善していくというのが基本
複数同名のclassが出て来るかもしれないから要素起点にするかとか
その要素下でなくなるかもしれないからルート起点にするかとか
そういうことを打ち込む直前に無意識にさっと考えて
自然で妥当なコードを書いていくもの
それとquerySelectorが遅いだろうと決めつけるのはダメ
エンジンはよく使われる機能をよく使われるように最適化されていく
単純に考えたらgetElementsByClassNameの方が早いはずだが
セレクタ探索は複雑だからこそ最適化しないといけないので
キャッシュを効かせたりだとかもされている
今はgetElements早いかもしれないが、今後もそうだという保証はない
そして速度の最適化は最後、実際に足を引っ張っている部分があれば
きちんと分析して改善していくというのが基本
>>258
わかりみのよいレスありがとうございます
現状若干getElementsClassNameの方が速いのと
動的・静的で使い分けろとあったので、思考停止で動的のがいいでしょ
ってことでclassNameを選んでしまいました。
昔querySelectorで組んだやつをメンテナンスがてら
書き直してみようと思ってましたけど止めますわｗ
わかりみのよいレスありがとうございます
現状若干getElementsClassNameの方が速いのと
動的・静的で使い分けろとあったので、思考停止で動的のがいいでしょ
ってことでclassNameを選んでしまいました。
昔querySelectorで組んだやつをメンテナンスがてら
書き直してみようと思ってましたけど止めますわｗ
素人・・・速いって聞いたからこっちに書き換えよう
プロ・・・速い？ならどのくらいか計測するべきだ。1ミリ秒以下？
誰がそんな違いわかるんだ？そんなことのためにお前は無駄な人件費を使うのか？
損してるだけだろ
プロ・・・速い？ならどのくらいか計測するべきだ。1ミリ秒以下？
誰がそんな違いわかるんだ？そんなことのためにお前は無駄な人件費を使うのか？
損してるだけだろ
Image オブジェクトについてお聞きしたいのですが
単純に、inputタグの file で選択した画像情報をFileReaderに読ませて、
Imageオブジェクトに設定し、読み込み完了したら～というコードをだいぶ端折ってますが簡単に書いてみました。
iObj = new Image();
iObj.onload = function() {
console.log( "読み込まれた" );
};
iObj.src = FileReaderで読み込んだ画像情報;
これ、PCのブラウザとAndroidのChromeではすべて正常に動くんですけど、
少し大きい画像(3MBくらい)の画像で試すと、
AndroidのFirefoxだけ、Imageオブジェクト関連が正常に動作しません。
setIntervalなどで、completeを監視しても false しか返してくれません。
小さい画像だと問題なく動くのですが…
他の手持ちのブラウザは全部試して動作確認出来たのですが、AndroidのFirefoxだけダメでした。
調べても同じ症状の人がおらず、原因がつかめないので困ってます。
なにか画像サイズの制限でもあるのでしょうか？
よろしくお願い致します。
単純に、inputタグの file で選択した画像情報をFileReaderに読ませて、
Imageオブジェクトに設定し、読み込み完了したら～というコードをだいぶ端折ってますが簡単に書いてみました。
iObj = new Image();
iObj.onload = function() {
console.log( "読み込まれた" );
};
iObj.src = FileReaderで読み込んだ画像情報;
これ、PCのブラウザとAndroidのChromeではすべて正常に動くんですけど、
少し大きい画像(3MBくらい)の画像で試すと、
AndroidのFirefoxだけ、Imageオブジェクト関連が正常に動作しません。
setIntervalなどで、completeを監視しても false しか返してくれません。
小さい画像だと問題なく動くのですが…
他の手持ちのブラウザは全部試して動作確認出来たのですが、AndroidのFirefoxだけダメでした。
調べても同じ症状の人がおらず、原因がつかめないので困ってます。
なにか画像サイズの制限でもあるのでしょうか？
よろしくお願い致します。
自己解決しました。
海外の掲示板に同じ人がいました…
AndroidのFirefoxはバージョンが古い上に、URLの文字数の制限が極端に短いらしく
blob形式に変換する事でうまく行きました。
海外の掲示板に同じ人がいました…
AndroidのFirefoxはバージョンが古い上に、URLの文字数の制限が極端に短いらしく
blob形式に変換する事でうまく行きました。
fetch(url).then(response=>response.json()); // 実際はasync/awaitを付けています
こんな感じのコードなんですがpendingがコンソールに出力されています
でも特にエラー等なくデータを取得できており動作も兼々期待通りなのですが
これはどういうことなのでしょう？
こんな感じのコードなんですがpendingがコンソールに出力されています
でも特にエラー等なくデータを取得できており動作も兼々期待通りなのですが
これはどういうことなのでしょう？
>>263
コンソール出力してるコードはどこ？
コンソール出力してるコードはどこ？
あー、コンソールに直接打ち込んでるのかな？
関数定義にはasync/await付けてるけど実行時にawaitつけてないからじゃない？
async function foo() {
return await fetch(url).then(response=>response.json)
}
foo()
//=> Promise {<pending>}
await foo()
//=> json
関数定義にはasync/await付けてるけど実行時にawaitつけてないからじゃない？
async function foo() {
return await fetch(url).then(response=>response.json)
}
foo()
//=> Promise {<pending>}
await foo()
//=> json
iframeでonmouseoverは動作したけど
document.createElement("iframe");で作ったiframeではonmouseoverが動作しませんでした
どうすれば動作しますか？
document.createElement("iframe");で作ったiframeではonmouseoverが動作しませんでした
どうすれば動作しますか？
ブラウザが同期的に出力してるだけなんですね
勉強になりましたありがとうございました
勉強になりましたありがとうございました
>>270
まず最初に問題が再現できるコードを提出しましょう
まず最初に問題が再現できるコードを提出しましょう
>>274
恥ずかしいこと書いちゃったねw
恥ずかしいこと書いちゃったねw
イベントリスナーって設置しっぱなしでよいものでしょうか？
イベントを設置している間はそれに伴う変数などが保持されたままになってたりしますか？
解除できるタイミングがあれば解除しておく方が良いのですかね・・・・・・？
イベントを設置している間はそれに伴う変数などが保持されたままになってたりしますか？
解除できるタイミングがあれば解除しておく方が良いのですかね・・・・・・？
>>279
という自演でしょw
という自演でしょw
XHRでwgetみたいにクロスドメインで公開しているjsonファイルをGETしようとすると、エラーになります
開発者ツールでネットワークを見ると応答は200で内容も戻ってはいます(読める)
しかし、受信結果としてはCORS違反としてエラーにされてしまいます
xhr.open("GET", url);
xhr.onreadystatechangeにハンドラ設定
xhr.send(null);
ブラウザのJavaScriptでは別のドメインのファイルは取れないのでしょうか？
単純リクエストにしたいのですが……
開発者ツールでネットワークを見ると応答は200で内容も戻ってはいます(読める)
しかし、受信結果としてはCORS違反としてエラーにされてしまいます
xhr.open("GET", url);
xhr.onreadystatechangeにハンドラ設定
xhr.send(null);
ブラウザのJavaScriptでは別のドメインのファイルは取れないのでしょうか？
単純リクエストにしたいのですが……
>>283
GETでヘッダを返すようにしたらCORS違反は消えました
ありがとうございました
S3とGCPは設定したけど……apacheの静的ファイルにも設定しなきゃ……調べるの面倒
いや、XHRでのGETのCORSを誤解していました
XHRでは単純リクエストでGETできないとは思いませんでした
普通に静的ファイルとして公開しているファイルならば、クロスドメインで取得不可にするほうが稀のはず
だから、GET応答にCORS関連のヘッダが無い場合には*扱いに倒すだろう、という思い込みです
GETでヘッダを返すようにしたらCORS違反は消えました
ありがとうございました
S3とGCPは設定したけど……apacheの静的ファイルにも設定しなきゃ……調べるの面倒
いや、XHRでのGETのCORSを誤解していました
XHRでは単純リクエストでGETできないとは思いませんでした
普通に静的ファイルとして公開しているファイルならば、クロスドメインで取得不可にするほうが稀のはず
だから、GET応答にCORS関連のヘッダが無い場合には*扱いに倒すだろう、という思い込みです
最近は指定無しだと制限が厳しいほうに倒されるよ。chromeに限らず。
>>288
他で使ってもらう場合にはポップアップ禁止を解除しなきゃダメなのね。
私のブラウザは以前他の用事で解除してたのを忘れてました、注意しないと駄目ですね。
あと、ブラウザというかアプリのリサイズフリーソフトはPCを変えるたびに消失してるのと、
Windowsのアプデで使えなくなるソフトが多すぎて、
ソフトはなるべく増やさない方向で考えてます。
他で使ってもらう場合にはポップアップ禁止を解除しなきゃダメなのね。
私のブラウザは以前他の用事で解除してたのを忘れてました、注意しないと駄目ですね。
あと、ブラウザというかアプリのリサイズフリーソフトはPCを変えるたびに消失してるのと、
Windowsのアプデで使えなくなるソフトが多すぎて、
ソフトはなるべく増やさない方向で考えてます。
>>287
Ruby みたいに、HTML エスケープ出来ないの？
html = <<'HTML'
<!DOCTYPE html>
<html lang='ja'>
</html>
HTML
require "cgi/escape"
puts CGI.escapeHTML( html )
出力
<!DOCTYPE html>
<html lang='ja'>
</html>
Ruby みたいに、HTML エスケープ出来ないの？
html = <<'HTML'
<!DOCTYPE html>
<html lang='ja'>
</html>
HTML
require "cgi/escape"
puts CGI.escapeHTML( html )
出力
<!DOCTYPE html>
<html lang='ja'>
</html>
これで動くかね？
let aHeadInrHTML = document.getElementsByTagName('head');
let aBodyInrHTML = document.getElementsByTagName('body');
let sCloneHTML = `
<!DOCTYPE html>
<html lang='ja'>
<head>
${ aHeadInrHTML[0].innerHTML }
</head>
<body>
${ aBodyInrHTML[0].innerHTML }
</body>
</html>
`;
let aHeadInrHTML = document.getElementsByTagName('head');
let aBodyInrHTML = document.getElementsByTagName('body');
let sCloneHTML = `
<!DOCTYPE html>
<html lang='ja'>
<head>
${ aHeadInrHTML[0].innerHTML }
</head>
<body>
${ aBodyInrHTML[0].innerHTML }
</body>
</html>
`;
vueスレが死んでたのでお願いします
ちょっと興味があるのでどんな風に使われてるのか調べてみたんですが
使ってるらしいサイトのソースを見てもそれっぽい痕跡がありません
痕跡というのはvue.js読み込んだりvueインスタンス作成したり
html中に{{var}}みたいなテンプレート変数のようなものやv-forみたいな属性がありません
チュートリアルの最初のほうに書かれてるやつしかまだ見てないのですが
本当にvue.jsを採用してるサイトのソースを見てるとしたら
なんか思ってるのと違うのかな？という感じなんですが
確実にここはゴリゴリにvue.js使ってるよ！ソース見ればわかるだろ？
というようなサイトあったら教えていただけませんか？
ちょっと興味があるのでどんな風に使われてるのか調べてみたんですが
使ってるらしいサイトのソースを見てもそれっぽい痕跡がありません
痕跡というのはvue.js読み込んだりvueインスタンス作成したり
html中に{{var}}みたいなテンプレート変数のようなものやv-forみたいな属性がありません
チュートリアルの最初のほうに書かれてるやつしかまだ見てないのですが
本当にvue.jsを採用してるサイトのソースを見てるとしたら
なんか思ってるのと違うのかな？という感じなんですが
確実にここはゴリゴリにvue.js使ってるよ！ソース見ればわかるだろ？
というようなサイトあったら教えていただけませんか？
ソシャゲのサイトで申し訳ないけど
http://kirafan5ch.info (ビルドされてない)
と
http://wiki.kirafan.moe/#/ (ビルドされてるけどソースマップファイルあるしそもそもオープンソース)
がある
http://kirafan5ch.info (ビルドされてない)
と
http://wiki.kirafan.moe/#/ (ビルドされてるけどソースマップファイルあるしそもそもオープンソース)
がある
申し訳ないと思うのであれば、別のサイトを用意していただけませんか？
イベントハンドルをグローバル変数にしてイベントを追加した場合は
イベントの重複登録が起こっても、重複にならないようです。
逆にローカル変数だと重複が起こるのですが何故でしょうか？
var handle = {
obj: hoge;
handleEvent: hage
};
window.addEventListener('resize', handleObj);
イベントの重複登録が起こっても、重複にならないようです。
逆にローカル変数だと重複が起こるのですが何故でしょうか？
var handle = {
obj: hoge;
handleEvent: hage
};
window.addEventListener('resize', handleObj);
それはグローバルかどうかじゃなく
同じインスタンスを登録してるのか
異なるインスタンスを登録してるかの違いでしょ
中途半端なコードじゃなく
問題が再現できる最小限のコードを出してね
同じインスタンスを登録してるのか
異なるインスタンスを登録してるかの違いでしょ
中途半端なコードじゃなく
問題が再現できる最小限のコードを出してね
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.141 + (1001) - [100%] - 2019/9/22 23:15
- + JavaScript の質問用スレッド vol.142 + (984) - [97%] - 2020/8/27 19:15
- + JavaScript の質問用スレッド vol.131 + (1004) - [97%] - 2018/3/7 13:30
- + JavaScript の質問用スレッド vol.121 + (1001) - [97%] - 2015/1/1 18:30
- + JavaScript の質問用スレッド vol.121 + (1001) - [97%] - 2022/11/29 16:30
- + JavaScript の質問用スレッド vol.131 + (1000) - [97%] - 2017/1/25 8:01
- + JavaScript の質問用スレッド vol.144 + (288) - [97%] - 2020/5/17 20:00
- + JavaScript の質問用スレッド vol.111 + (1001) - [97%] - 2013/11/4 6:00
- + JavaScript の質問用スレッド vol.142 + (926) - [97%] - 2019/12/23 13:15
- + JavaScript の質問用スレッド vol.143 + (753) - [97%] - 2020/4/19 5:00
- + JavaScript の質問用スレッド vol.101 + (1001) - [97%] - 2012/7/16 14:15
- + JavaScript の質問用スレッド vol.140 + (1001) - [97%] - 2019/9/19 10:45
- + JavaScript の質問用スレッド vol.102 + (1001) - [95%] - 2012/9/11 17:30
- + JavaScript の質問用スレッド vol.123 + (966) - [95%] - 2020/10/20 2:30
- + JavaScript の質問用スレッド vol.122 + (116) - [95%] - 2018/5/2 18:30
- + JavaScript の質問用スレッド vol.122 + (1004) - [95%] - 2015/2/14 4:45
- + JavaScript の質問用スレッド vol.100 + (1001) - [95%] - 2012/6/13 22:46
トップメニューへ / →のくす牧場書庫について