元スレ+ JavaScript の質問用スレッド vol.106 +
JavaScript覧 / PC版 / みんなの評価 :
103 = :
>>102
ところがWordpressは「ファイル選択」というボタンから
ファイルのアップロードができているんです。
なので出来る方法があると思ってググっているのですが、
参考となるページがないので質問した次第です
105 = :
質問させてください。
JavaScriptファイルの動的読み込みを行おうと思い、以下のようにしたのですが、
var script = document.createElement("script");
script.setAttribute("src", "testscript.js");
$("head").prepend(script);
動的読み込み自体はうまくいき、testscript.jsの中の関数の呼び出しなどもうまくいったのですが、
ブラウザの開発ツールで、ソースを確認できないという状況になっています。
たとえば、testscript.jsの中のコードにバグがあり、エラーが生じても、
コンソールのエラー行から、testscript.jsのエラー該当箇所に飛べません。
一方、RequireJSを使って動的読み込みした場合は、ソースがちゃんと確認できますし、
エラーがあった場合、
コンソールのエラー行からちゃんと該当箇所に飛ぶことができています。
RequireJSを使わずに、ソースをちゃんと確認できる状態で動的読み込みを行う
方法はないでしょうか？
106 = :
>>105
すみません。自己解決しました。
headへのscriptタグの追加をJQueryを使って行っていたのがいけなかったようです。
var head = document.getElementsByTagName('head')[0];
var script = document.createElement("script");
script.setAttribute("src", "testscript.js");
script.setAttribute("type", "text/javascript");
script.addEventListener('load', function(){ hogehoge(); }, false);
head.appendChild(script);
JQueryに依存せずに、生の関数で追加したら、開発ツールでソースを確認することができました。
108 = :
教えてください
Indexed Database APIで
objectStore.add(obj).onsuccess = function(event) {/*ここ*/};
ここでevent.target.resultにプライマリキーが代入される仕様ってどこに書いてますか？
111 = :
>>110
> $(this).parent().parent().parent()
これだと、dl.txt を指すんじゃね！？
112 = :
困っています。以下のようなコードがあったとして、
<style>
#scaleBox {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
#innerBox {
position: relative;
width: 50px;
height: 50px;
background-color: blue;
left: 50px;
top: 50px;
}
</style>
<body>
<a id="button" href="#">スケール</a>
<div id="scaleBox">
<div id="innerBox"></div>
</div>
</body>
（続きます）
113 = :
（続きです）
<script type="text/javascript">
function scaleAndGetSize() {
console.log("スケールする前の css left:" + $('#innerBox').css("left") + " css top:" + $('#innerBox').css("top"));
console.log("スケールする前の position() left:" + $('#innerBox').position().left + " position() top:" + $('#innerBox').position().top);
console.log("スケールする前の offset() left:" + $('#innerBox').offset().left + " offset() top:" + $('#innerBox').offset().top);
$('#scaleBox').css("transform-origin", "0px 0px");
$('#scaleBox').css("transform", "scale(" + 2 + ")");
console.log("スケールした後の css left:" + $('#innerBox').css("left") + " css top:" + $('#innerBox').css("top"));
console.log("スケールした後の position() left:" + $('#innerBox').position().left + " position() top:" + $('#innerBox').position().top);
console.log("スケールした後の offset() left:" + $('#innerBox').offset().left + " offset() top:" + $('#innerBox').offset().top)
}
$("#button").click(scaleAndGetSize);
</script>
transformでスケールしたあと、JQueryのposition()やoffset()が、スケールを反映した値を返してしまいます。スケールを反映させる前の値を得る（または計算する）方法はないでしょうか？
スケール処理する前の値を取得してそれを保存すればいいじゃないか、というご指摘はそうなんですが、どうしても、全体をスケールしつづけ、その中で値を取得する必要に迫られており、その方法はとれません。
よろしくお願いします。
114 = :
え、何
上3段の「スケールする前の」の部分に「スケールした後の」の値と同じのが表示されるって事？
115 = :
>>111の補足だけど、同じ要素がいくつもあるなら、prevで特定はできないだろうってことね。
やっぱり、id属性なんかで特定してやらないとダメだと思う。
116 = :
質問です、以下のように書いた場合
var a = document.createElement("input");
a.value="ボタン";
a.type="button";
a.onclick="alert('ボタン')";
最後の行だけ追加できないのはどういう理由なんでしょうか
117 = :
イベントリスナー使えってことでしょ
119 = :
>>116
DOM勉強したほうがいいよ
120 = :
お前はjquery使って作ってた方がいい
遅いとか気にするな
お前の書くコードよりマシだ
121 = :
>>114
レスありがとうございます。
えっとですね。
$('#innerBox').css("left")と$('#innerBox').css("top")については、
「スケールする前」と「スケールした後」で値は同じなんですが、
$('#innerBox').position().left、$('#innerBox').position().top、
$('#innerBox').offset().left 、$('#innerBox').offset().top
の４つについては、
「スケールする前」と「スケールした後」で値が違うんです。
で、やりたいこととしまして、
「スケールしていない状況で」position()とoffset()で得られる値を
「スケールした後も」得る方法はなにかないかなー。ということなのです。
具体的には、当方の環境ではinnerBoxはユーザーの入力に応じて常に動いていまして、
position()とoffset()で得られる値が常に変化します。で、すでにスケールがかかっている状況です。
でも、「スケールがかけられていなかった時に得られるような」 position()とoffset()の値が欲しい、ということです。
色々調べているんですが、JQueryにはそういう別の関数はなさそうですし、ほとほと困っています……。
123 = :
>>121
何やりたいのかよくわかんないけどsetTimeout("スケール実行",0)とか使えば
実行をワンテンポ遅らせるとか
124 = :
>>121
素直に値を保存しとけば良いじゃん
新しい変数を作るのが嫌なら、対象ノードのdata-*属性とかに入れておけばいい
125 = :
お二人とも、レスありがとうございます。
>>123
それが、スケールは最初から常にかかっていることが前提となっておりまして、
そのスケールがかかった状態で値を取得しなければならないという状況なのです……。
>>124
それができないのです。
位置を測る対象であるdivが、スケールのかかった親要素の中で、
常に動き回っていまして、その動いている最中の値も取りたいので、
スケールを掛ける前の最初の値だけを保存していても意味がないのです……。
127 = :
>>125
何がしたいのかよくわかんないけどたぶん無理
設計ミス
128 = :
動くたびに配列に追加で保存していけばいいだけじゃね？
129 = :
さすがにそれはメモリをめっちゃ食うし駄目だろ
スケールの逆関数を求めてその場で計算するか、
それができないならもうそれは設計ミスだと思うので
別の実装方法を考えたほうがいい。
130 = :
そういやJavascriptはあんま関係ない話かもしれないが
皆メモリリークとかで気をつけてる事とか、これ使うと良いよ的なモノある？
131 = :
>>130
基本的に最近のJavaScript実装はGCを搭載しているので、
あまり意識しなくてもメモリリークは起きにくいかと。
意識的にやる必要があるのは、
・addEventListenerしたイベントは必ずremoveEventListenerする
・DOMやクロージャ周りは循環参照が発生しやすいので注意が必要
・ブラウザのキャッシュで、ページを移動した後もメモリを確保し続ける場合があるので、大きなデータはページ遷移時にnullにしとくとよい。
・IE6以下のDOM Eventまわりのメモリリーク（http://blog.himika.com/2010/06/ie.html）
とかかな。
メモリ調査はそれ専用のツールもあるし、簡易的にはブラウザのメモリ使用状況をみればおｋ
（Firefoxのabout:memoryとか）
132 = :
deleteすら使わないなぁ
メモリとか基本放置
133 = :
>>125
そもそも、要素の高さを取得しようとするとそのたびに再描画が発生して
パフォーマンス的に最悪だから、数値を計算して内部で使いまわしたほうがいいよ。
今の実装を聞いてると、
要素のpositionを取得：再描画が発生
要素のoffsetを取得：再描画が発生
要素の位置を変更：再描画が発生
ということで1回の移動に付き最低3回は画面全体の再描画が発生してることになる。
134 = :
フォームに初期値を入れられるBookmarkletつくりたいんですが
いい参考サイトないでしょうか。
（Formが一個しかないやつならできるんですが
たくさんあるやつがつくれません）
スレチならどこに書けばいいか教えてください。
135 = :
メモリ16GB32GBが当たり前のこの時世にブラウザの少々のメモリ程度気にしたってなあ
136 = :
お前それただでさえ画像の取り扱いに苦労してるモバイル向けアプリでも同じ事言えんの？
137 :
>>135
16GBが当たり前だと思ってるなら、ちょっと考えなおしたほうがいい
138 = :
>>134
参考サイトはしらんけど、自分だけが使って公開するようなのじゃなければ
document.querySelector(フォームのアイテムを特定させるセレクタ).value = 初期値;
:
みたいなのでいいんじゃね?
後でデータを配列で渡したいとかなるだろうけど。
139 = :
なんかchromeでテーブルの色変えても変わんなくなった
140 = :
皆様、ご回答ありがとうございます。
>>127-129
設計ミス……そうかもしれませんね。
transformによるスケールはもう諦めようかと思います。
CSSのサイズ指定でremとか使って、html要素のfont-sizeを調整する方向でやってみようと思います。
>>133
再描画が発生するとは知りませんでした。情報ありがとうございます。
いや、実はposition()やoffset()を使っているのは私のコードというよりも、
使っている外部ライブラリなんですよね。
http://manos.malihu.gr/jquery-custom-content-scroller/
このライブラリが内部でposition()やoffset()を使いまくっていまして、
最終的にはこのスクロール付きのUIを拡大・縮小表示したいという話なのでした。
（最初からこのライブラリの話をすると話がややこしくなると思いまして……。
transformでスケールすると、スクロールできる範囲がおかしくなるので、
どうしてかと思ったら、内部でposition()、offset()を使っていて
取れる値がスケールの影響を受けてしまうのが原因、ということなのでした）
スケールの影響を受けない代替関数のようなものがあれば、それを使ってこの
ライブラリの内部処理を書き換えようと思っていたのですが、無理そうですね……。
141 = :
>>138
丁寧にありがとうございます。
ドシロウトなものでセレクタってのがよくわからず
いちおう
http://weboook.blog22.fc2.com/blog-entry-268.htmlとか見て
該当ページのソースを見ると
CSS＝XXXX
となっていたので
document.querySelector(.XXXX).value = 初期値;
みたいにやって見ましたがうまくいきませんでした
もう少し頑張ってみます
142 = :
>>141
inputなら
Array.prototype.forEach(document.getElementsByTagName('input'), function(element){
element.value = "初期値";
});
<input type="password"> なやつだけなら
Array.prototype.forEach(document.querySelectorAll('input[type="password"]'), function(element){
element.value = "初期値";
});
要は、初期値を設定したい要素をまとめて取ってきて、それを
forかforEachで回して初期値を設定すればいい。
まとめて取ってくるのに、条件が簡単なら getElementsByTagName や getElementsByClassName を、
複雑な条件があるなら querySelectorAll を使うと楽。
143 = :
>>141
.XXXX の部分は文字列な。' か " でくるむんだ。
各ブラウザについてくるデバッグ用のコンソールでやれば反映されるから、
いろいろ試せばいい。
業務とかで定型の部分を先に入れておきたいとかなのかね。
144 = :
初心者を言い訳になんにも勉強しないまま質問とかどうなのよ。
本の１冊くらいきちんと勉強して何が正しい構文かは分かってから来て欲しい。
145 = :
正しい構文がエンジンに依存する言語で
しかも本で勉強とは酷な話よ
146 = :
ほっといてやれw
147 = :
まあ、このぐらいはググればなんとかなるレベル。
そのキーワードを手に入れるのが大変なんだろうけれど。
セレクタでググったのはいいが、querySelectorでもググればよかったね。
148 = :
皆様ありがとうございます。
言い訳になりますが’XXXX’でやってました。（書き込みはTYPOです）
本１冊くらいきちんと勉強してというのはもちろんおっしゃるとおりだと思いますが
正直本で勉強しなくてもちょっとしたブックマークレットだから
ググレばいけるだろぐらいに思ってましたが間違いだったようです。
>>142さんの書いた奴でもダメでした。
querySelectorでググっていろいろやってもうまくいきません。
書き込みを不快に思う人もいるみたいなのであとは自分で頑張ってみます。
どうもありがとうございました。
150 = :
>>148
.XXXXってのは classを指定するもので、ページ内に複数ある可能性があり、一つに特定できていないのではないか。
初期値を入れたいinput項目に idが設定されていたら #foobar という形式で特定できるだろう。
idがない場合にはたいてい name="foo"という属性が付いていると思うので [name=foo] としてやればいい。
フォームが複数ある場合にはその nameもかぶる場合があるんだけれど、
その場合はフォームを idやnameやらで特定してから、その子である input項目を指定してやればいい。
たとえば フォームにname="gbqf" input項目に name="q" ってなってたら [name=gbqf] [name=q] とスペースを間にいれて
ならべればいい。フォームにidがついてたらそっちのほうが確実に特定できるが。
前にも書いたけどコンソールにdocument.querySelector('.XXXX') としてやればどの要素が指定されているかわかる。
document.querySelectorAll('.XXXX') とすれば複数にマッチしてしまっている場合に全部出てくるから間違いに気づくだろう。
って、もう見てないかな。
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.126 + (952) - [97%] - 2015/11/18 13:15
- + JavaScript の質問用スレッド vol.107 + (1001) - [97%] - 2013/9/7 10:16
- + JavaScript の質問用スレッド vol.116 + (1002) - [97%] - 2014/7/1 0:45
- + JavaScript の質問用スレッド vol.126 + (348) - [97%] - 2023/1/12 17:00
- + JavaScript の質問用スレッド vol.109 + (1001) - [97%] - 2013/10/7 13:16
- + JavaScript の質問用スレッド vol.108 + (1001) - [97%] - 2013/9/21 15:16
- + JavaScript の質問用スレッド vol.136 + (1001) - [97%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.105 + (1001) - [97%] - 2013/5/20 4:45
- + JavaScript の質問用スレッド vol.104 + (1001) - [97%] - 2013/1/28 4:00
- + JavaScript の質問用スレッド vol.103 + (1001) - [97%] - 2012/11/9 15:30
- + JavaScript の質問用スレッド vol.102 + (1001) - [97%] - 2012/9/11 17:30
- + JavaScript の質問用スレッド vol.101 + (1001) - [97%] - 2012/7/16 14:15
- + JavaScript の質問用スレッド vol.100 + (1001) - [97%] - 2012/6/13 22:46
- + JavaScript の質問用スレッド vol.120 + (1002) - [95%] - 2014/11/8 1:15
- + JavaScript の質問用スレッド vol.125 + (1001) - [95%] - 2015/10/7 17:45
- + JavaScript の質問用スレッド vol.124 + (1001) - [95%] - 2015/7/16 1:30
- + JavaScript の質問用スレッド vol.123 + (1002) - [95%] - 2015/4/27 23:30
トップメニューへ / →のくす牧場書庫について