>>2-4のテンプレを読んだ上で質問してください。
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。(なりすまし及び煽り防止のため)
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。質問テンプレートを活用してみてください。
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
+ JavaScript の質問用スレッド vol.104 +
http://toro.2ch.net/test/read.cgi/hp/1352506660/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
http://wing2.jp/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■テンプレ案
http://jsfiddle.net/fH4cC/10/show/
■関連スレ
ECMAScript デス 4
http://toro.2ch.net/test/read.cgi/tech/1325448978/
【jQuery】JavaScript ライブラリ総合質問所 vol.2
http://toro.2ch.net/test/read.cgi/hp/1350728831/
WSH(・∀・)ｽﾚｯﾄﾞ! Part 4
http://toro.2ch.net/test/read.cgi/tech/1243095768/ →消失中 (5も過去ログ倉庫)
【WHATWG】HTML5 Part4【W3C HTML WG】
http://toro.2ch.net/test/read.cgi/hp/1329529892/
Webサイト制作初心者用質問スレ part232
http://toro.2ch.net/test/read.cgi/hp/1357950586/
CSS初心者スレッド＝12th＝
http://toro.2ch.net/test/read.cgi/hp/1343429848/
Canvasについて語ろう
http://toro.2ch.net/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://www.ecma-international.org/publications/standards/Ecma-262-arch.htm （本家PDF版アーカイブ）
http://es5.github.com/ （ECMAScript 5.1 有志HTML版）
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ （ECMAScript 3 和訳）
◆ ECMAScript compatibility table
http://kangax.github.com/es5-compat-table/ （ECMAScript 5）
http://kangax.github.com/es5-compat-table/es6/ （ECMAScript 6）
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://dom.spec.whatwg.org/ （DOM Standard (DOM4)）
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html （DOM Standard 和訳）
http://www.w3.org/TR/DOM-Level-3-Events/ （DOM3 Events）
http://www.w3.org/TR/cssom/ （CSSOM）
http://www.w3.org/TR/cssom-view/ （CSSOM View Module）
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://xhr.spec.whatwg.org/ （XMLHttpRquest）
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html （XMLHttpRequest 和訳）
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)
http://jsfiddle.net/fH4cC/17/show/
これみたら一つ上のカテゴリーが
MDN>Document Object Model (DOM)
ってなってて
それがhttps://developer.mozilla.org/en-US/docs/DOM
なんだけど
実際にここからどう辿っていったらaddEventListenerのページまでたどり着けるんですか？
https://developer.mozilla.org/en-US/docs/DOM
(view all...をクリック)
https://developer.mozilla.org/en-US/docs/tag/DOM
(3をクリック)
https://developer.mozilla.org/en-US/docs/tag/DOM?page=3
(element.addEventListenerをクリック)
https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener
遅れてやってくるマウスストーカーを作りたかったのですが
ストーカーさせたい要素がマウスに近づかず、元の位置から5px程度しか
マウスに合わせて動かなかったり、マウスを動かすと一度だけ位置が
数px更新されるだけでとまってしまったりします。
変数を中の関数から出してみたりいろいろ試しましたが解決しませんでした。
actionscriptのサンプルコードを改変したものです。
例えばmouseXをevent.clientXにという感じです。
原因と解決方法、ヒントなどが分かる方よろしくお願いします。
window.onload = function() {
var velocity = 0.3,
speed = 5;
document.onmousemove = function (event) {
var mX = event.clientX,
mY = event.clientY;
var cnvs = document.getElementById("canvas1");
var cnvsX = cnvs.style.left;
var cnvsY = cnvs.style.top;
var dX = mX - cnvsX;
var dY = mY - cnvsY;
var angle = Math.atan2(dY,dX);
cnvs.style.rotate = angle * 180 / Math.PI;
var vX = Math.cos(angle) * speed;
var vY = Math.sin(angle) * speed;
cnvs.style.left += (vX + "px");
cnvs.style.top += (vY + "px");
}
};
codepadとかideoneとかどっか別サイトにはってもらっていいので
http://codepad.org/QPimE1DO
取得した位置まで「徐々に」近づいて行く動作をするための
setIntervalで定期的に動作するコードが必要だと思うけどいかが。
//var velocity = 0.3;
cnvs = document.getElementById("canvas1");
cnvs.style.position = "absolute";
cnvs.style.top = 0 + "px";
cnvs.style.left = 0 + "px";
document.body.onmousemove = function (event) {
var mX = event.clientX;
var mY = event.clientY;
var cnvs;
if(!cnvs){
cnvs = document.getElementById("canvas1");
}
var cnvsX = cnvs.style.left;
var cnvsY = cnvs.style.top;
cnvsX = cnvsX.replace("px",'');
cnvsY = cnvsY.replace("px",'');
cnvs.style.position = "absolute";
var dX = mX - cnvsX;
var dY = mY - cnvsX;
cnvs.style.left = dX + "px";
cnvs.style.top = dY + "px";
}
}
>>7
https://developer.mozilla.org/en-US/docs/DOM
（「Gecko DOM Reference」）
↓
https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference
（「DOM element Reference」→「Methods」）
↓
https://developer.mozilla.org/en-US/docs/DOM/element#Methods
（「addEventListener」）
がほぼ埋まってからリンク先更新を依頼するようにしませう。
作るって言ってた人がいた気がしたがどうなったっけ？
もう先生たちの力しかたよれません。
ちなみに教えてgooに質問してますので問題の内容は教えての方をみてください
http://oshiete.goo.ne.jp/qa/7916158.html
そんな人いた？
http://qa.atmarkit.co.jp/
日本語版 stackoverflow
あまり流行ってはない感じ。
しかし一度bodyから剥す(jQuery#empty)とイベントが発火しなくなる。
DOMを作ってイベントを貼る
var $el = $("<div>").html("<div>click me</div>");
$el.on('click', function(){console.log('clicked')});
DOMに貼り付けるとclickイベントはちゃんと動く
$(body).append($el);//=> クリックしてclicked
DOMに再度貼り付けるとclickイベントが消えている
$(body).empty();//DOMの中身を消す
$(body).append($el);//クリックしてもイベントが発火しない
環境はChrome Mac / jQuery1.9
jQueryで作ったDOMはそのままキャッシュしていると思うんだけど、違うんでしょうか
$el[0].onclick = function(){…}と定義すれば動くけど、それは<div onclick=… に書き換えてるからやりたいことと違う
あざっす！動きました。
removeやemptyはイベントハンドラも削除してたんですね
$(body).html('')でも消えてたんで焦ってたんですが
ドキュメントよく読めば書いてあるしもうちょっと調べればよかったです…
ありがとうございます。
やっぱりif文チェックとかsetIntervalが必要そうですね。
べったりくっ付くマウスストーカーは楽勝なんですけど
早くクオリティ上げるよう勉強します
をいくつか持ってるが、このスレの内容は一部改変して使ってる。
ほかに、プログラム本のソースコードとか他人が公開したコード
を一部改造して使ってる。ネットでプログラムのネタは山のようにあるな。
品質が低そうだし、いつか著作権違反で訴えらそうだね。
ttp://kwski.net/jquery/1049/
を参考に、Chosenの導入を考えたのですが、
<script src="<layer highlight=・・・ </layer>.min.js"
の意味が理解できませんでした。
ｌａｙｅｒはページを分割するタグではなかったでしょうか？
それがｊｓファイルの指定の途中に出てきたり、
highlight= など不明な指定もあって混乱してしまいました。
ググってもなかなかこの説明をしているサイトを見つけられませんでした。
どなたご存知の方、このlayerタグの意味を教えてくださいませ。
Firefoxのアドオンsearchwpが原因だったようです！
IEにしたら短いサンプルソースが表示されました・・・・。
面目ない！
広く浅く一般的なことしか載せてないから訴訟はされないだろ。
たいしてアクセス数ないし
function movecheck_in(p){
console.log("called func in");
document.getElementById("indicator").innerHTML = "x=" + p.clientX + "; y=" + p.clientY;
}
こういうコードにあるpっていうのはイベントオブジェクトというものですか？
この場合はpとしていますが、このpはどんな名前でもいいんでしょうか
イベントオブジェクトだぜ。
p以外の名前でもいい。
pはeventとかevtとかの名前になってるサンプルコードが多いな
バレる可能性が低ければ何をやってもいいと考える小悪党ですか。
(function(ちくわ大明神){
console.log(ちくわ大明神);
})('馬鹿めヤツは死んだわ');
とかもコンパイル通るんだよな
プログラムの解説してるwebサイトとかサンプル公開してる
webサイトって似てるのばっかやんっと言ってみる
俺が他人にJS教えるときは、ネットに落ちてるコード(とくにAJAX以前)は参考にするなと言っている
John Resig(jQuery), Jeremy Ashkenas(Backbone) あたりがモダンなJS書く印象
日本だとカヤック、サイボウズ、モジラ系の連中の一部がレベル高い感じ
風呂場を清潔に保つことの方が難しいけどな。
jQueryは参考にさせたくないコードの筆頭だと思うけどなー
minify後に小さくなるようなテクニックを使ってたりするから、
一般のスクリプトを書く際の参考にはあんまりならなさそう
http://d.hatena.ne.jp/uupaa/20100730/1280502000
http://nanto.asablo.jp/blog/2013/01/28/6703606
ライブラリの基礎部分はメタプロしてもいいけど、表にそれがはみ出るやつはダサい
赤信号もみんなで渡れば怖くない、と考える小(ry
もう少しわかりやすく
白鳥が水面下で足をバタバタさせるのはいいけど
水面に波を立ててはいけない
そっちは大丈夫です
黒魔術云々の方
// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
document.write("<span class='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>");
変数はアラートで確認しましたけど、問題はなかったです。
>>57
そこがおかしいんですかね？
消去法ではclass='s"+i+"'がおかしいようなんですけど。
i:35
snowmaxsize:30
snowletter:"*"
です。
document.write("<span class='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>");
うちではIEでもfirefoxでもChromeでも普通にタグが追加される
["A", "B", "C"] より "A B C".split(" ") の方が早いの？
追加は簡単だと思うけど
こちらの環境がおかしいのかもしれないですね。
どうもありがとうございました。
ガーベジコレクトなんかを含めたオブジェクト管理の負荷が少なそう
たとえ文字列の中でも「</」はそのまま書いたらだめよ。「<\/」にしてみ。
それが定石。
これマジ? \\なら分かるが / は別にそのままでよくね?
scriptタグの中は、
<script>
この中には</が続いてはダメ
</script>
ってコーティングするルールがある。good partsとかに載ってる
コードも<\/ってなってるから読んでみな。
google map api v2でもv3でも良いのですが、
GIconまたはGMarkerを画像を使わずcssで描く方法はないでしょうか？
画像無しのアニメーションを作りたいのです。
<script\b[^>]*>([^<]*<[^\/])*[^<]*<\/(?!script)
完璧ではないが（ a = "</script" みたいなのは見逃す）
自分のコード調べてみたらいっぱい見つかったorz
データ専用の script タグ（例えば <script type=text/plain>）
の中でも </ はエスケープした方がいいのかな
<iframe src="about:blank" data-src="http://www.hoge.co.jp/"></iframe>
のようにしておき、以下のコードで「iframeがwindowの中に入ったらiframeの中身を読み込む」こと(遅延ロード)をやりたいと思いました。
$(function(){
$(window).scroll(function(){
$("iframe").each(function(){
var self = $(this);
var windowhi = $("body").scrollTop();
var windowlow = $("body").scrollTop() + $(window).height();
var iframehi = self.position().top;
var iframelow = self.position().top + self.height();
if(self.attr("data-src") && (((windowhi < iframehi) && (iframehi < windowlow)) || ((windowhi < iframelow) && (iframelow < windowlow)))){
self.attr("src", self.attr("data-src")).removeAttr("data-src");
}
});
});
});
これでiframeを遅延ロードすることはできたのですが、iframeを読み込んだ後に「戻る」ボタンなどで前のページに戻ろうとすると、iframe読み込み前になるだけで前のページに戻りません。これを解決するにはどうすればいいでしょう。
(firefox:18.0.1 jQuery:1.7.2)
JSの場合に</を<\/にエスケープしていいのはJS側で</に解釈してくれるからであって、
テキストの</を<\/に変換したら、そのテキストを読んで処理する側の対応が必要になるんじゃない？
なるほどありがとう
仰る通りで
読み込み処理が分散してなければ修正は難しいわけではないっすが
function play()
{
playSound('音楽ファイル場所');
}
としていて音楽鳴らす
タイミングをplay();を指定しています。
最盛時の音量は数字で制御出来ることはできないでしょうか？
play();
volume(80);
みたいに数字ではふかのですかね？
わかる方教えてください。
そもそもそんな質問する時点で、君は何もわかってない
おそらく HTML5 Audioを使っているものと推測するが
function playSound(){
audio = new Audio('file path');
audio.play()
}
となっているとエスパー
ならば、audio.play() の下に audio.volume = 0.5 などとする必要がある
そもそも元の関数を書き換えればいいわけでそのplay関数は不要
はい次
FILE API （ FileReader ）で画像データを読み込んでから
readAsDataURL を使うと幸せになれる
setTimeoutで再帰ループを2個作った場合、どちらが先に処理されるかという順番の保証はありますか？
また、処理内容がどちらも同じだったとして途中で順番が入れ替わるようなことも起こり得ますか？
処理の待ち行列に追加されるだけで順番とかは考慮されないんじゃないか？
以前、setTimeoutを乱発すると重くなってくるからって
ひとつに統合するのを書いた人いたよね？
やはりされてないと考えるのが普通ですよね
乱発すると重くなるのなら一つにまとめるようにして順番も決まるように書いてみます
javascriptを使ってジグソーパズルを作っています。
ピースの吸着のために座標と座標の距離を求める平方根を使おうと思っているのですが
ドラッグされているピースの座標の取り方がわからないので教えて頂けませんでしょうか。
Element.getBoundingClientRect()
要素の絶対座標ですか…すごくそれっぽいですね！
パズルと組み合わせることは難しそうですが努力します。ありがとうございました。
この中に正規表現で$を使う
})(jQuery)
において正規表現の$もjQueryオブジェクトに変わるのでしょうか？
変わらない
alert("\%31");
だとエラーが出てしまいます
alert("%2531");
とするのは正しいのでしょうか?
何のためにエスケープ？
パーセントエンコードの事？
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/encodeURIComponent
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
┣━━携帯サイト用ランキング討論会━第11弾┫ (469)
Web標準 XHTML＋CSSデザインサイト (697)
WEBディレクターの集い3 (270)
Netscape Composer でHPを作ろう ! (442)
ページランクの高い相互リンク集 (883)
【いったい】アクセシビリティ【どうしろと？】 (286)
--log9.info------------------
オリンピックテーマ曲で一番ダサい局を晒すスレ (437)
【バドミントン】前田美順★３ (678)
星野に名言を言わせるスレ (233)
青山祐子アナいい感じですね。 (319)
【バレル】ダーツ何使ってる？27セット目 (326)
ソフトダーツプロトーナメント 第19戦 (414)
大分県内ダーツ関係情報交換スレ (413)
【合法許可銃】射撃銃雑談/質問スレ3【競技・事故】 (377)
【ダーツ】調子が悪い時の言い訳【愚痴】 (877)
ダーツ勝負で負けたときの最悪だった罰ゲーム (452)
ジョン・ロウだけど何か質問ある？ (418)
弓道って (337)
京都府)ダーツ(事情 (518)
【混沌】山形事情【閑散】 (780)
ダーツが五輪公式種目になるまで投げ続けるスレ (372)
【投石紐】スリング (386)
--log55.com------------------
[負債は処分!]自動車は40年間で3396万円も無駄になる負債★2
自動車は40年間で3396万円も無駄になる負債2
事故画像・動画から車種を特定するスレ Part80
昭和の車のあるある21世紀
【高速道路】３５０円の旅【タダに近い】108周目
ドライブレコーダー映像に意見する 危険運転206件
プロ専用□□メカニックの部屋 PART83□□素人勘弁
かっこいいナンバープレートランキング1位湘南 2位品川 3位横浜と言う現実Part9