>>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.105 +
http://toro.2ch.net/test/read.cgi/hp/1359085911/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
http://wing2.jp/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■テンプレ案
http://jsfiddle.net/fH4cC/17/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使ってますか? Part8
http://toro.2ch.net/test/read.cgi/win/1292764835/
【WHATWG】HTML5 Part4【W3C HTML WG】
http://toro.2ch.net/test/read.cgi/hp/1329529892/
Webサイト制作初心者用質問スレ part234
http://toro.2ch.net/test/read.cgi/hp/1363053050/
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)
ここでjQueryの質問してもよろしいでしょうか？
文字列の中の数字だけを抽出して足し算というようなことはできますか？
たとえば
Ａくんはりんごを 5 こもらい、Ｂくんは 3 こもらい、Ｃくんは 6 こもらいました
この合計を計算して表示するという事は可能ですか？
7はリンク先などのhtmlファイルといういみです
a.htmlでjavascript実行して遷移先のb.htmlに計算結果を表示したいのか？
パラメータとして結果を送れば可能だけど
どう説明したらいいかわからないんですが
他人のhtml（たとえばウェブサイトなどの）を（自分の表示してるhtmlの見た目を）かえるってことなんですが
あの、もうちょっと勉強してからまたきます
javascript使わなくてもブラウザの機能で出来るが
>>13
はよせえや
ありがとうございます！！
ちょっと文字数が足りないので
オンラインエディタ上にソース掲載しています
http://jsbin.com/okuxel/1/edit
jQueryを利用してプログレスバーのような物を作っているのですが
上記のソースだとHTML側一番上の10がそれ以降の4つにも反映されてしまい
5つ全て10%のプログレスバーになってしまっています。
classをbar1 bar2 bar3等にすれば簡単だとは思うんですが
それは無しでHTMLはこのままで各data-valueの値を各プログレスバーに反映したいと思っています。
どうすればいいでしょうか？ご教授お願いします。
よろしくお願いします。
ソース部分もっと具体的に書きました
http://jsbin.com/okuxel/6/watch
それぞれの要素ごとに処理しないから、percentに一番上のdata-valueが代入されて
それが全部の要素に反映されちゃってる。
だから、↓こんな感じにすればおｋ
$(function(){
progressBar($('.bar'));
});
function progressBar($elements) {
$elements.each(function(){
var element = $(this);
var percent = element.data('value');
var progressBarWidth = percent * element.width() / 100;
element.find('div')
.animate({ width: progressBarWidth }, 500)
.html(percent + " % ");
});
}
あと、linear-gradient使うんだったらプレフィックスなしのも書いとけよ
本当に本当にありがとうございます
涙が止まりません。
cssの部分のアドバイスまで
本当にありがとうございました！
$(function(){
$('.bar').each(function() {
var percent = $(this).data('value');
var progressBarWidth = percent * $(this).width() / 100;
$(this).find('div').animate({ width: progressBarWidth }, 500).html(percent + " % ");
});
});
こちらでも行けました
ありがとうございます！
俺が教えたわけじゃないけどｗ
／ ｀､
/ ヽ
/ ● ● |
／l ''''' し '''''' |
/ l ＿＿. |
l /ヽ＿ ` --' ＿ノ
＼ ￣ ヽ∩
⌒l l三 |
| ヽ.__|
a.classの属しているtrを取得する・・・というのは可能ですか
どうすればよいか教えて下さい
こんなかんじちゃう？
$("tr td a.class").click( function() {
$(this).closest("tr").after("hoge");
});
closestなんてものがあったんですね！ありがとうございます！
「comment」テキストボックス内にて左クリックをしても投稿されてしまいます。
上記の２つの動作で投稿出来ないようにしたいのですが、どのようにしたらいいですか？
投稿したいのは、「Enterが押された時」「投稿ボタンが押された時」の２パタンです。
〜JavaScript〜
$(document).ready(function(){
$('#send').click(function(){
jQuery . post(【処理】);
$("#comment").focus();
this.reset();
return false;
});
});
〜HTML〜
<FORM id="send" method="post">
<INPUT id="comment" type="text" name="comment"><INPUT type="submit" name="submit" value="投稿">
</FORM>
submitのidを"send"にしてFormのidを消す
もう片方のクラスのラジオボタンをvalue="1"にしてdisabledにしたいんですけどjavascriptの方はどう書けばいいですか？
htmlサンプル
<input type="radio" class="q1" value="1" checked>なし
<input type="radio" class="q1" value="2">あり
<input type="radio" class="q2" value="1" checked>なし
<input type="radio" class="q2" value="2">あり1
<input type="radio" class="q2" value="3">あり2
DOM操作になるからライブラリ使ったほうが楽だぞ
<p></p>
↓
<div>
<p></p>
</div>
のように
内側にしたいエレメントBとAのノードを入れ替えるだろ
AにBを挿入すれば完成よ
DOM Rangeつかうとか。
ttp://members.jcom.home.ne.jp/jintrick/Personal/DOM_Range.html#GROUPING
ありがとうございます。
それではいけなかったんですけど、解決へのヒントになりました。
ruby の p とか pp にあたるようなことをやる方法を教えてください
マイナビ社の『よくわかるJavaScriptの教科書』買っていま勉強してるんだけど、
イマイチ説明不足なままjQueryの解説に流れててよく分からん。
JavaScriptが簡単って言った奴出てこいよ、初学者にはかなり難しいわ。
いい加減検索引っかかってウザい
枝葉が変わるだけ
サイト見てても画像のスライド表示ぐらいにしか使ってなさそうなんだけど……
時代錯誤もいいとこ
Ajaxは素晴らしい技術だと思う
検索が足らんかった
レベルが知れますなｗ
そういえば他のサイトの名前はほとんど書き込まれないし
中身なんて関係ないのよ
現場でJavascriptを使わなきゃという人には便利だった（当時）
そらデザインも直せませんわ
早く消えてどうぞ
他の言語ひとつでも使えるなら基本は変わらないはずだけど
独特といえばDOM操作だけどjQueryのおかげでだいぶ簡単になった
>>54
逆や逆、今時のサイトはJavascriptだらけだよ
GmailもDropboxもFacebookもTwitterもEvernoteもiCloudのWebも
ヤフトピのタブ、２ちゃんまとめサイトも
いや簡単なスーファミレベルのゲームなら作れるから、色々便利。
http://liv2ch.s-box.net/pol/
俺のサイトだけど、chrome と safari でしか動かないけど、
スマフォゲーが専門言語使わなくても作れそうなのは夢が広がるぜ
HTML5はjsがないとAPI叩けんし今後は益々増えるな
縦でしか見れないアプリと同じように、ブラウザでも縦でしか見れないようにする方法はありますか？
（多分出来ないような気がしてますが・・・）
翻訳の勉強より母国語の勉強の方が大事
ajaxでjsonをサーバ連携させないと実感沸かない
さらにjQueryのメリットは、生JSでDOM/event操作した
経験がないと実感沸かない
さらにjQuery自体を軽量化できんかと思い立ってzeptoやjqMobiに
手を出すと、改めて本家jQueryの良さが実感できる
そこで治療を受けていると、口の中に妙なしこりがあることに気付いた
治療中で退屈していたので、舌でそのしこりをペロペロ舐めていると
先生に「それ、先生の指やで」 と言われた
歯医者にとっちゃよくあることなんだろうな
でもなんでこのスレに書いた
addEventListenerを知るまではhtmlのイベント属性使ってた
ランドスケープに成った時に
transformで90度回転させてみるとか
jsで読み込んだxmlの値で動的にリストを作りたいんですがどうしたら良いでしょうか？
先に<li>タグを作って後で削除する方法と、空の状態からliタグを作るやり方を試しましたがどちらもうまくいきませんでいた。
後半が唐突過ぎる
http://jsfiddle.net/K8fGh/
プラグインじゃなくてクロスオリジンの問題じゃないの
outerHTMLもXHRも使わず取得する方法ってありませんか？
outerHTMLはロード時にはDOMの改変がされており使用できません。
XHRはHTMLが100kB級で無駄なトラフィックが無視できないためできれば使いたくありません。
すみません(笑)
xmlに画像パスやタイトルなどのデータが入っていて、XMLHttpRequestでタグ情報を取得して
タグの数に合わせて、liタグを生成してそのなかのsrcやtitleなどの属性値に値を入れていきたいのですが、
liタグは生成されるのですがroundaboutの回転する機能が働きません。
>>78
jsでタグを生成する前にroundaboutが起動してしまうからでしょうか??
> ロード時にはDOMの改変がされており
ってどういう意味？
もし、テキストとして記述されたHTML文書のまんまのものが取りたいっていう意味なら、XHRじゃないと無理。
DOMは、ブラウザのパーサーが解釈して木構造に変換した後のものだから、
エッジケースでは解釈によって構造が変わる可能性がある。
こちらはContentScriptで使用時は結局DOMノード化するため
取得形式は問いません
対象はロードイベント発火前は構造が一定ですが付随するスクリプトが
更新が頻繁なため発火後にノードがどこに飛ぶかわかりません
ですのでリクエスト時のデータか最初期のDOM構造を取得する方法が欲しいのです
軽く使ってみたけど挿入後にroundaboutを呼び出さないと適用されない
動的な変更がしたいなら一度親(ul)ごと削除
DOMContentLoadedではだめ？
または、どのスクリプトよりも早いタイミングでloadイベントをlistenして、
一番始めにDOMを保存しとくとか。
レスありがとうございます。
同じ事を考えてイベントの制御などは試しましたが、無理でした。
(そのためouterHTMLは不可としました。)
ですので直接的に取得できるものがないか探しています。
なければ最悪XHRで対処するつもりです。
サイト内に
<a href="外部リンク">AAA</a>
というリンクがあり
当サイトに訪れたユーザーがそのURLに対してクリックしたカウントを
データベースに取りたいのですがどうすればいいのでしょうか？
phpでリダイレクトページを挟むという手法がありますが
それでは無く、javascriptでそのままのリンクのURLに対してのクリックカウントを取りたいです
ajaxを使うのかな？とは思うのですがイマイチどう調べたらいいのかわからないので
上記方法に関して参考になる記事等教えて頂けないでしょうか？
jQuery使ったものでいいかな
まずタグにオンクリックイベントを登録する。 /*jQueryを使った登録でも良い. Class指定して$(".class").on("click",function(){method();});*/
<a href="http://ink.com/" onClick="method("id_1");">AAA</a>
で、scriptタグでも.jsファイルでも良いので
function method(arg){
$.ajax({
url:"カウント用スクリプトURL(相対パスで)",
,type: "POST",
data: {linkid:"arg"}
/*
必要ならこんな感じでmethod()に引数を渡して、その引数をPOSTできるのでどのリンクがクリックされたのか区別できる1箇所だけなら不要
*/
}
}
こーんなメソッドを作っておく
テストはしてない
こうだった
むしろjQueryで知りたいと思っていたので、助かります！
まだ試してないですが、ここまで詳しく本当に有難うございます！
function load() {
edt = document.getElementById("edit").contentDocument
edt.designMode = "on";
}
$(function()
{
$("iframe").bind('keyup', function(){
alert('hoee');
});
});
</script>
<iframe id="edit"></iframe>
designModeをONとしてiframeでちょっとした編集をしようとしてるんですが、
iframe上でkeyupとかは取れないのでしょうか？
実際に上記のようにやってもalerはでませんでした。（iframe部分をtextareaに変えてみると動いたので構文が間違っているというわけでもないとは思ってます）
keyup時に自動で処理したい処理があるのでkeyupの時の処理が取れればと思ったのですがiframeをこのように使う場合はとれないのでしょうか？
contentWindowに対してイベント登録しないとだめ
早速>>87さんの回答を元に試したのですが2点ほど上手くいかないので
再度質問させてください。
フォルダ、ファイル構成
├ js - abc.js
├ index.html
└ count.php
abc.js
$(function(){
function method(arg){
$.ajax({
url: "count.php",
type: "POST",
data: {"linkid": arg}
})
};
$(".link").click(function(){
method($(this).data('linkid'));
});
});
index.html
<a href="http://www.google.co.jp" class="link" data-linkid="1">Google</a>
<a href="http://www.yahoo.co.jp" class="link" data-linkid="2">Yahoo</a>
<a href="http://www.bing.com" class="link" data-linkid="3">Bing</a>
1つ目の問題がカウント用スクリプトURLの指定なんですが
url: "count.php" もしくは url: "../count.php"
上記どちらもスクリプトファイルが無い事になってしまい、うまく動作しません
絶対URLなら動作するのですがPHP側で後々外部からPOST出来ないように設定したいので
上記フォルダ、ファイル構成の場合どのように相対URLを記述すれば良いのでしょうか？
2つ目はカウントが2〜3クリックに1回程度しかうまく行かず
POSTの処理が終わる前にリンク先へ遷移してしまってるのが問題かと思うのですが
どう対処すればいいでしょうか？
長々となってしまい申し訳ありません。
どうかよろしくお願いします。
<form id="form1" name="form1">
<input type="checkbox" name="foo[]" value="hoge" />hoge<br />
<input type="checkbox" name="foo[]" value="fuga" />fuga<br />
<input type="checkbox" name="foo[]" value="piyo" />piyo<br />
</form>
というのがあるとき、
チェックボックスのON/OFFをみるときに、
var count;
for(count = 0; count < document.form1.foo.length; count++){
document.form1.foo[count].checked = check;
}
としても、
var count;
for(count = 0; count < document.form1.foo[].length; count++){
document.form1.foo[][count].checked = check;
}
としても、取得することができません。
フォーム要素の名前が foo[] のような配列形式の時、
JavaScript側ではどのように処理すればよいでしょうか？
よろしくお願いいたします、
チェックボックスの値を配列で受け取るため name="check[]" とするとJavaScriptで値が受け取れない問題についてPHPプログラムメモ｜プログラムメモ
http://logic.moo.jp/data/archives/222.html
ですね、自己解決しました、
申し訳ありません。ありがとうございました
こちらへ改めて書き込みます
ブラウザで表示するhtmlページで
ヘッダdiv、メインdiv、フッタdiv、と３つのdivがたてに並んだ一般的な構成のとき、
それぞれのdivにボックスシャドウが適用されています。
コンテンツが少ないページのとき、フッタが途中で終了してしまってみっともないので
コンテンツの量に左右されず常にフッタdivがブラウザの底辺までのびてほしのですが
ここでネックなのが、フッタdivにボックスシャドウが適用されているという点です。
背景画像のリピートで処理できる方法などはググると見つけられますが
上記のようにボックスシャドウが適用されているdivが
常にページのしたまでのびる（※heigtの固定されたフッタdiv常にブラウザ底辺にへばりつく、のではなく、
ボックスシャドウが適用されているフッタdivがたてにのびてブラウザ底辺までのびる）
方法をご存知でしたら教えてください、宜しくお願いします
シャドウの大きさは変わらんじゃろ
それを勘定に入れて計算すればいいじゃん
box-sizing: border-box;
baseタグが設定されているとか?
どっちにしろブラウザのデバッグツールでどのファイルにアクセスしようとして404が返ってきているのか
わかるとおもう。
本来のリンククリックの動作を抑止して、javascriptの方で遷移するようにすればいいんじゃね?
count.phpの返事を待ってから遷移させれば確実だろう。
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
【XML】SVGってどうなの2【DOM】 (138)
リンクファームについて話し合うスレ (145)
【yahoo】パクリはどこまで許されるか【Livedoor】 (158)
seo対策無双 Part3【valid seoもいるよ】 (951)
【制作】山田花子の100km完走を証明しよう【依頼】 (187)
twitterブーム早く終わんねーかなー (160)
--log9.info------------------
R先生といっぱいの涙24歳新米ママの挑戦★3 (873)
芸能人更生バラエティ バナナ塾 (215)
世界行ってみたらホントはこんなトコだった！？ 2 (106)
業界トップニュース No.1 (298)
S-1グランドチャンピオン2010 (361)
田勢康弘の週刊ニュース白書 (427)
THEクイズ神 2問目 (943)
満点☆青空レストラン2 (531)
テレビを輝かせた100人 (423)
ドォーモ (835)
FNS27時間テレビ2012 真夏の超団結特大号！！ 6 (217)
笑点のつまらなさは異常 (113)
ナカイの窓 (628)
グリグリくりぃむ (118)
宝探しアドベンチャー 謎解きバトルTORE! Part2 (911)
芸人報道 ＧＮＮ 〜 GEININ NEWS NETWORK. 〜 Part2 (201)
--log55.com------------------
【速報】NVIDIA RTX2080Tiキターーーー！！！脅威の17TFLOPSで3000ドルのTITANV超えか？なお値段は899〜1000ドルの模様 [659425117]
【】西川口駅周辺、この数年で完全に中国人に乗っ取られる。団地は老人以外全員中国人、比率は50%超。中国語がわからない日本人を圧倒 [235021461]
BBC「なぜジャップは難民を受け入れないんだ？先進国では4割以上受け入れるのが普通」 [324064431]
カーナビ業界「業績低迷から抜け出せません。このままではカーナビは終わりです」★2 [808856812]
猫の里親業界にはびこる男性差別が深刻 独身男性「また猫の譲渡断られた。 女R」 [324064431]
【ラブライブ！】歩夢｢自分たちの曲発表緊張するね｣？？｢ﾄﾞﾝｳｫｰﾘｰﾄﾞﾝｳｫｰﾘｰ｣ [682599597]
この20年日本の文化レベルの停滞がヤバい CMに使われる曲は90年代リバイバル タレントは20年前と同じ顔ぶれ。誰の責任？ [324064431]
無性にシミュレーションゲームがしたい、 おすすめを教えてくれ。 [324064431]
