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

━━━本スレに書く事を許される者は以下の通り━━━━━
　一、正しい(validな)HTMLとは何か知っており書ける者
　一、JavaScriptはJavaとは別物であると知っている者
　一、自ら学んでJavaScriptコードを書く意思を持つ者
　一、ユーザに迷惑となるスクリプトを書かない者
　一、質問を分かる日本語できちんと説明できる者
　一、トラブルを再現する最小限のサンプルを貼れる者
　一、テンプレ+FAQ>>2-10/過去ログ/関連資料を読める者
━━━━━━━━━━━━━━━━━━━━━━━━━━━
自力で書く気がない人は他のスレへ(テンプレ末尾参照)。
前スレ http://hibari.2ch.net/test/read.cgi/hp/1277348045/
[必読]過去スレ全集 http://www2.atpages.jp/mirror/2ch/javascript/
　　　 　 （閲覧のみ） http://usamimi.info/~mirrorhenkan/2ch/javascript/
　　　 　 （閲覧のみ） http://wing2.jp/~mirrorhenkan/2ch/javascript/
[必読]ガイド https://developer.mozilla.org/Ja/JavaScript
(GuideをReferenceに→Netscape版言語仕様。多くの実装が準拠:ECMA-262.ed3)
FAQ・注意・過去ログ・仕様書・関連資料・関連スレ>>1-7

【質問を書く上で】
1)ユーザ(閲覧者)に迷惑がかかる性悪スクリプトは回答されない。
　例: 別窓開きまくり、閉じる/戻るのを妨害、全画面占有、etcは最悪。
　答えさせようと「分からねえんだろ」と煽っても無駄(過去スレが証明)。
2)言葉でぐだぐだ書かずにソースを貼る、ただし要点を整理して。
　そのまま貼って動かせると試してもらいやすい(ただし回答者に連結さすな!)
　長い(1レスに入らない)場合はアップロードしてURIを貼る。
3)初心者という言葉は危険なので使わない方がよい。
　初心者を言い訳に自力で調べない/考えない奴が最悪に嫌われる。
4)自分で調べたこと/試したこときちんと書く(調べもしない奴は最低)。
　ただ「動きません」「エラーです」は何も情報がないため嫌われる。
　エラーは「どの行で何のエラー」を書く(ブラウザをそのように設定すれ)。
　ブラウザの設定すらできんヤシはFFxのJavaScriptコンソールを使え!!!
　OS、ブラウザ、バージョン、うまく行かない条件を明記しエラー再現可能に。
5)特に古いバージョン限定の時は必ず明記! 回答もチグハグになり回答者に2度
　手間を食わせる可能性大
6)どういう時にどういう動作をさせたいのかを脳内にとどめずきちんと書く。
　例:「自動ポップアップしたい」←どういう場合(マウスオーバー、クリック、
　ボタン押し、select選択)に何(別窓、レイヤー、その他)が出るのか書け!
7)質問はまっとうな(他人に理解できる)日本語で。
　前項の例に限らず、他人に理解できない質問文は煽られるだけで時間の無駄

【FAQその1】
Q1. 開いた別窓/フレームの内容にアクセスできないのですが…
A1. ページ内容が別サーバの場合セキュリティ制約により絶対無理です。
Q2. JavaScriptでローカルファイルを読み/書きたいのですが…
A2. Webではセキュリティ制約により絶対無理です。できたら恐ろしいことに…
Q3. 同じタグの中でonclick="foo()"とonclick="bar()"を同時に使いたいのですが…
A3. セミコロンで複数の文を区切れます。onclick="foo();bar();"としましょう。
Q4. document.write(...)でページ内容を追加したいのですが…
A4. 一度ページ表示完了後にwrite()すると内容はクリアされちゃいます。
　 部分的に内容変更するには(1)他フレーム/iframe/別窓への表示、
　 (2)textarea等への表示、(3)DOMでノード挿入、(4)innerHTMLのどれかで。
　 innerHTMLは非標準ですがIE、Opera、Safari、Gecko(N6/N7/Firefox等)で対応済。
Q5. table/tbody/tr要素のinnerHTMLを書き換えるのがうまく行かないのですが…
A5. IEはそれらの要素のinnerHTMLは変更不能。DOMを使って書き換えるか
　 <div><table>...</table></div>とでもしてdivのinnerHTMLを書き換えましょう。
Q6. DOMでtable要素にtr要素を追加しても表示されないのですが…
A6. DOMでは(XHTML 1.x除く)tbody要素にtr要素を追加する必要があります。
　 tbody要素はtbodyタグを書いていなくても自動的に作成されます。
　 またはtable.insertRow()/tbody.insertRow()を使いましょう。
Q7. 変数w1、w2…を順にループで(番号をiに入れて)設定/参照したいのですが…
A7. グローバル変数はwindowのプロパティだからwindow['w'+i]を読み書きすれ。
Q8. フォーム部品名を変数にした「...myform.変数名.value」が動きません…
A8. 「document.forms.myform.elements[変数名].value」でどぞ。
　 JavaScriptでは一般に「obj.x」と「obj['x']」は同じ意味です。
Q9. Aタグのonclickで動作指定してるのですが時々動きません…
A9. 「onclick="...;return false"」としないとページ移動しちゃうから。

【FAQその2】
Q10. CSSで設定した背景色がe.style.backgroundColorで取得できないのですが…
A10. 取得には document.defaultView.getComputedStyle() を使う必要あり。
　　IEでは要素オブジェクトのプロパティcurrentStyleを使う。
Q11. 100*1.15の結果が114.999…998となってしまうのですが…
A11. コンピュータの実数計算は全て近似値だと思え。誤差が嫌なら整数で計算。
Q12. 任意のデータをサーバ(別鯖ではない)から取り寄せたいのですが…
A12. IE7/Gecko/Opera/Safariのnew XMLHttpRequest()、IEの
　　new ActiveXObject("Msxml2.XMLHTTP.6.0") (または"Msxml2.XMLHTTP.3.0")
　　を使えばできます。古いブラウザだと隠しフレームに読むなどのワザが必要。
Q13. setAttribute("class","foo")、setAttribute("onclick","bar()")が動きません…
A13. IEではそれは不可。「obj.className="foo"」「obj.onclick=bar」でどぞ。
　　複数の関数を呼びたいときは obj.onclick=function(){foo();bar();};
　　という風に無名関数を作りましょう。中に書かれたコードが実行されます。
Q14. タイマーやイベントハンドラに設定するコードにthisを含めたいのですが
　 「"...this..."」とか「function(){...this...}」ではうまく行きません。
A14. それらが実行されるときはthisは別のもの(window等)を指してしまってる。
　　「function(x){return function(){...x...};}(this)」のようにthisを別の変数に
　　束縛しその変数を使って。循環参照によるメモリリーク問題あり(この項記述検討中)
Q15. 文字列の置き換えをするときにコードを使いたい(Perlのs///e)のですが…
A15. string.replace(/.../,function(str,p1,p2,...,offset,s){...})としましょう。
　　正規表現にマッチした文字列がreturnで返された文字列に置き換えられます。
　　各引数はstrがマッチした部分文字列、p1,p2,...が1番目、2番目、…の()の中身、
　　offsetがマッチした位置、sが置き換え前の文字列全体になります。

【FAQその3】
Q16. input type="file"の値を設定(参照)できないのですが…
A16. セキュリティ制約のため設定は絶対に不可。参照はブラウザにより不可。
Q17. getElementById('ID名')や$('ID名')で要素が取れないのですが…
A17. コード実行時点でHTMLがそこまで読まれてない。onload中でやるとか。

【主張の対立：他人の嗜好は尊重。損得の議論は歓迎】
・仕様を読む：回答者なら仕様の該当部分は読んでいるべき。質問者でも
　仕様を読まずうだうだ書く奴は注意されて当然。読み間違いは生温く指摘。
・英文文書：翻訳の努力を惜しむべからず。 読めないなら和訳を探し、
　なければあきらめよう。翻訳サイトを知っている人はうまく誘導してあげて。
・IE専用/アンチIE/クロスブラウザ：「○○は不要」「○○だけであと
　は無視」は不毛。質問者が分かって選択していれば尊重する。無知か
　らIE専なのは指摘してあげると親切。
・標準準拠 vs 使えればよい：標準はブラウザが変わっても維持される
　可能性大。非標準機能も損得を分かった上で使うならよい。
・MS vs アンチMS：MS固有の情報はMSのサイトで見ないと分からないが、
　そこだけ見ているとIE専になる。あとは上2件と同様。
・別窓、イベント抑止など：一般には迷惑スクリプトだが質問者に正当
　な理由があることも。尋ねて分かってないようなら煽っても可（ｗ
・innerHTML vs DOM：それぞれに長所/弱点があるので理解した上で選
　択するべき。一概にどちらは駄目、とは言えない。
・on属性 vs addXXX()：ハンドラが1つだけと分かっていればon属性
　で簡単にハンドラを設定もあり。上書きが心配ならaddXXX()。

jsってもうWebProg板でいんじゃね？

jqueryとかもう中身を知りたいならエンジニアじゃなきゃ無理でしょ

ECMA-262 ed.3
→ ttp://www.ecma-international.org/publications/standards/ECMA-262.HTM
→ ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ (和訳)
W3C Document Object Model Technical Reports
→ ttp://www.w3.org/DOM/DOMTR
JavaScript 1.5 ガイド / リファレンス (Netscape/Mozilla)
→ ttp://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide (和訳)
→ ttp://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference
→ ttp://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference (和訳)
JSON (JavaScript Object Notation)
→ ttp://www.json.org/json-ja.html
→ ttp://jsgt.org/ajax/ref/test/json/test1.htm
E4X (ECMAScript for XML)
→ ttp://www.ecma-international.org/publications/standards/Ecma-357.htm
→ ttp://www.ne.jp/asahi/nanto/moon/specs/ecma-357.html (和訳)
Mozilla Gecko DOM Reference, Netscape devedge
→ ttp://developer.mozilla.org/en/docs/Gecko_DOM_Reference
→ ttp://developer.mozilla.org/ja/docs/Gecko_DOM_Reference (和訳)
→ ttp://devedge-temp.mozilla.org/central/javascript/index_en.html
MSDN Library JScript / DHTML (現在日本語版は古杉)
→ ttp://msdn.microsoft.com/ja-jp/library/z688wt03%28VS.80%29.aspx
→ ttp://msdn.microsoft.com/ja-jp/library/cc409720.aspx

【チュートリアルサイト・サンプルサイト】
規格が読めないならまずはチュートリアル。サンプルサイトも沢山ある。
(以下は精選すべきとの議論あるが進んでいないので玉石混淆)
MetaGraphic Cell
→ http://www2u.biglobe.ne.jp/~oz-07ams/prog/
どら猫本舗のリファレンスカウンター
→ http://www.doraneko.org/
はぎさんちのページ Mozilla's DOM Sample Project
→ http://cgi.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/mds.cgi
一撃必殺javascript
→ http://www.openspc2.org/JavaScript/
【関連スレ】
板違い、スレ違いに注意！サーバ側での処理はWebProg板へどぞ！
Webサイト制作初心者用質問スレ part219
→ http://hibari.2ch.net/test/read.cgi/hp/1281429437/l50
CSS初心者スレッド＝8th＝
→ http://hibari.2ch.net/test/read.cgi/hp/1273383771/l50
役に立つ書籍は？ 4冊目
→ http://hibari.2ch.net/test/read.cgi/hp/1172823674/l50
1行javascriptプログラミング　　　
→ http://hibari.2ch.net/test/read.cgi/hp/1066750037/l50
WSH(・∀・)ｽﾚｯﾄﾞ! Part 4
→ http://hibari.2ch.net/test/read.cgi/tech/1243095768/l50

Javascriptを書きやすくする開発環境ってありませんか？
EclipseやVisualStudioのような入力補完・入力ミスチェック（{ }を閉じて無いところがあるなど）があるだけでもいいのですが。

現状、普通のテキストエディタで編集してるだけなので、どこか間違えると個所を探すのが大変。

EclipseやVisualStudioじゃだめなの？
自分はEmacs+js2-modeつかってる

EclipseかNetBeans、導入が楽なのはNetBeans(インストールするだけ)

＞９
俺はAptana使ってる。

ところでjQueryクックブック買ったんですが、
オライリーのサイト見たけどサンプルコードがどこにも見あたらなくて。。
jsの部分は本に載ってるからいいんですが、cssが載ってないから
途中から進めなくなりました。。。わかる人いますか？

oreilly.comを見るとか

＞13
ありました。ありがとうございます。
俺が馬鹿でした。。

特定のページから、WEBフォームページへ移動した時に件名を自動で入れるには、どの様にしたら良いのでしょうか？
avaScript等の書き方等を色々検索してみましたが、上手くいきません。

>>15 javascriptじゃなく、CGIや、get/postについて調べてみ

>>15
つ referrer

>>15
つ 環境変数

前スレ一気に埋まったなｗ

あのさあ、 >>17 はjavascriptでできるよって言っているの。
CGIなど鯖側の技術でやりたいという質問じゃないでしょ。
>>15 「javascript referrer」で検索すれ。

>>20
ごめんなさい。
でもリファラでどうやって？つかそもそも件名ってなんだ？
GETで投げるか、クッキーを使うかぐらいしか思いつかん。

if(document.referrer.match(/特定のURL/)) elm.value = "特定ｒｙ";
確かに>>15は良く解らんな。
自作のwebPageでフォームページ作るなら鯖側でやるほうがいいんじゃないかと思う。閲覧者がjs切ってる可能性もあるし。
完全に見る側でUpロダとかのPASSを自動で入れたいとかなら回答者にはエスパーが要求されるな。user.jsとかオミトロンの領域になる。

＞色々検索してみましたが、上手くいきません。
ためしてないだろ。コードかけよ。

: ためしてないだろ。コードかけよ。
に激しく同意。自分で書く気がない奴はカエレ!

function Foo() {}
などして適当に作ったクラス（のようなもの）にメソッドを追加するのに、
Foo.prototype.hoge = "hoge";
Foo.hoge = "hoge";
の2通りあるようですが、これらの違いは何ですか？delete演算子で削除できるかどうか、しか分かりません。
また、prototypeは全てのクラスで使えるメソッドのようですが、何に使うものですか？

>>24
全く意味が違います

Foo = function() {}
Foo.hoge = "aaa"
Foo.prototype.fuga = "bbb"
foo = new Foo();

としたときに、

Foo.hoge => "aaa"
foo.hoge => undefined
Foo.fuga => undefined
foo.fuga => "bbb"

となる。foo.hoge や Foo.fuga は未定義

Foo.hoge への代入はクラスのプロパティ、
Foo.prototype.fuga への代入はインスタンスのプロパティ
をそれぞれ定義している、というと分かりやすいかな。正確な表現ではないけど

なんか、JavaScriptのプロトタイプ方式についてちゃんと説明した
本なり解説文を読むのがいいと思うよ。クラスなんて存在しないし
それをクラスがあるとか思っていると結局どこかで破綻すると思う。

>>25
なるほど、ありがとうございます。

ちゃんと解説した本て何があるよ
JavaScript第5版ですらクラスで説明してあるし

どっかでスコープチェーンの解説記事を読んで初めて納得した記憶がある

>>28
まあプロトタイプのことも説明してあるし、
クラスと呼称しているのは、分かりやすくするためなんだろうな。

SEO対策無双ってすごいよな！
http://twitter.com/creditcardmiu/status/24272923242

クレジットカードの関連キーワードでサイトを量産して、
被リンク対策はすべてSEO対策無双に任せるというやり方が効率がいいのではないかと思ったよ。

あ

テンプレから辿ったらプロトタイプについての解説有ったわ

http://www2u.biglobe.ne.jp/~oz-07ams/prog/js-notes/prototypechain.html

昨日の記事だけど
第14回　プロトタイプと継承
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0014

プロトタイプと聞くと必ず脳裏をよぎる、緑のアイツ。

プロトタイプはぜんぜんわかんね

質問させて頂きます
Google AJAX Feed APIでフィードを出力している特定のページへIE8.0でアクセスすると
エラーが頻発します。エラー詳細は

メッセージ: 'publishedDate' は Null またはオブジェクトではありません。
ライン: 97
文字: 1
コード: 0

私が運営している下記ブログ内には他にもリーダー設置していて
それぞれにエラーが出る事もたまにありますがこのURLだけが頻発
Firefox/3.6.9では問題ありません。エラー無し

このページのリーダーのみwebryblog.biglobe.ne.jp内のブログがあり、
webryblogのフィードはhttp://feedproxy.google.com/〜 と出力するので
これも何か影響があるのかもとの素人考えも

web上で公開されているコードを若干加工しているので
私の記述ミスもあるかもしれません

googleのキーが必要、他ブログのurlが記載されている、という事もあり、
コードをここに書かずに実際のURLを晒す事をお許し下さい
http://aaanimememe.blog134.fc2.com/blog-entry-24.html

アドバイスをどうか宜しくお願い致します

デザインはいいけど色が地味で再訪する気が失せるのがもったいないな

>>37
中身が存在しないフィードの投稿日を参照した結果のエラーだろう。

フィードの読み込みに失敗した場合の処理をしてないのが原因で、
たまたまIE以外のブラウザで処理が早かったか、参照する先の
回線との相性が良かったかの違いがある程度で、本来はそこの
URL以外でも、どんなブラウザでもエラーが出る可能性がある。

// 「読み込みに成功した場合」（73行目）
if (!result.error) {

ここの条件分岐が「読み取りに成功した場合」だから、その後ろに
「読み取りに失敗した場合」のelse節を追加し、処理を打ち切るなり
再読み込みするなりすれば、同様のエラーは出なくなる。

>>38
デザイン褒めて頂いて嬉しいです感謝
地味なのは私自身が地味なので・・・でも再訪されないのは寂しいので考えてみます
>>39
おおなるほど。失敗した場合の処理ですか
勉強して追加してみます
丁寧に教えて頂いて本当に有難う御座いました

質問です。トップページにjavascriptでランダムなあいつが表示されるようにしたんですが、
javascriptを切っている方にも挨拶が見えるようにしてあります。こちらは当然ランダム表示されませんが。

○トップ
<script type="text/javascript">
<!--
aisatu();
// -->
</script>
<noscript>
<p class="noscript">いらっしゃいませ</p>
</noscript>

○CSS
p.noscript { font-size: 10pt; line-height: 5.0px; }

○aisatu.js
var graphlist = new Array(
'<font style="font-size:10pt;line-height:2.3">いらっしゃいませ',
'<font style="font-size:10pt;line-height:2.3">ようこそいらっしゃいました'
);

function aisatu(){
var today = new Date();
var num = today.getSeconds() % randomlist.length;
document.write(""+randomlist[num]+"");
}

としてあるのですが、フォントの指定を揃えてもnoscriptの文章とjavascript上の文章が異なってしまいます。
上記のように直してようやくズレが小さくなるのですが、それでもコード上での噛み合って無さが気持ち悪くて仕方ありません。
なぜこのようなズレが生じてしまうのでしょうか。また、どうすればいいのでしょうか。分かりづらい質問で申し訳ありません。

失礼しました。
×var graphlist = new Array(
○var randomhlist = new Array(
です。

一行目を読んだとき、一瞬遊べる質問かと思ったけど、意味が全然分からん。

>>41
・randomlistの中身は文章だけにして、document.writeで出力する時にclass属性をつけたタグで囲む
・noscriptの中身のテキストとこのrandomlistの出力を、（pとfontのような別物ではなく）同じタグの同じclassにする
・そのclassには、font-faceも指定
・noscriptはブロック要素だから、 ブロック要素の中にaisatu()を出力する

これでもダメなら、こっちの詳しい連中に質問だな。

[CSS初心者スレッド＝8th＝]
http://hibari.2ch.net/test/read.cgi/hp/1273383771/l50

pはデフォルトで上下marginが指定されてる
そもそもnoscriptなんて使わなくても、pのテキストを書き換えれる処理を書けばいい

>>44
そのスレの住民はまともなの少ないｗ

何か質問者の言いたいことが分かったかも。

document.write で document を新規 open してるから、
事前に指定したスタイルが適用されてないとか。

やっぱそんな訳ないか。

質問です
時間毎に画像を変える方法なのですが、30分毎に変えるのは下のように書いて
出来たのですが、これを20分毎、15分毎にする事が出来ません
やり方をご存知な方はいらっしゃいますでしょうか

<!--
var msg = new Array();

msg[0] = '<IMG SRC="xxx.jpg">';
〜省略〜
msg[47] = '<IMG SRC="xxx.jpg">';

var d=new Date();
document.writeln(msg[d.getHours()*2 + (d.getMinutes()>29 ? 1 : 0)]);
// -->

メッセージの表示を img タグにコピペ改変し、更新間隔の変更を 2ch で質問。
何という他力本願。

すみません
自分では何度やっても20分後に画像が変わって
その後40分変わらずという感じになってしまいました

( ? 1 : 0)
ここを分解すると
var a = 0;
if (29 < d.getMinutes()) {
a = 1;
}

こうなるあとは考えろ

1行目訂正ｗ
( ? 1 : 0)
↓
(d.getMinutes()>29 ? 1 : 0)

画像タグの定義方法を時間と分とで分けたら、手っ取り早いと思うよ

var msg = [
　// 0時台の画像
　[
　　"<IMG SRC='XXX.jpg' />",
　　"<IMG SRC='XXX.jpg' />"
　]
　略
　// 23時台の画像
　,[
　　"<IMG SRC='XXX.jpg' />",
　　"<IMG SRC='XXX.jpg' />",
　　"<IMG SRC='XXX.jpg' />",
　　"<IMG SRC='XXX.jpg' />"
　]
];

こんな感じの定義の方が保守しやすいし、時間毎に更新間隔も変えられる

>>49
今、何分か（d.getMinutes()〜の部分）だけを変えても意味がない。

「30分ごと＝60分で2回」だから、d.getHours()の後ろに「2」をかけており、
「20分ごと」なら3を、「15分ごと」なら4をかける必要がある。

たとえば、こんな感じかな。

var ph=3;//1時間あたり、何回変更するか
document.writeln(msg[d.getHours()*ph+Math.floor(d.getMinutes()/60*ph)]);

ただ、柔軟性を考えると、条件式を書き換えて>>55 みたいにするのが無難かも。

>>52>>55>>56
アドバイスありがとうございます

>>56
d.getHours()の後ろはやはり1時間の分割で良かったんですね
ただ、ここの記述が(d.getMinutes()>29 ? 1 : 0)])、これで30分なら
どう弄ったら15分、20分と変えれるのかとずっと頓挫してましたが、
>>55の方法は分かりやすかったので、こちらでやってみようと思います
アドバイスありがとうございました

ランダムなあいつはどうなった

ランダムなあいつは、そもそもどのブラウザでチェックしてんのかね？
こういった微妙なものは、ブラウザによって見た目が変わることが
結構あるんじゃないかな。

まずは、リセットcssをやってみてはどうだろう。

【お知らせ】
Windows 2000とWindows XP SP2のサポートが終了して、
現在サポートされているすべてのWindowsでMSXML6が標準搭載になりました。

XPもなの？

ランダムなあいつです。
スレで頂いた御意見を参考に試行錯誤してたんですが、>>44さんの言うとおりhtml文での出力先でnoscriptと同じクラス指定したらあっさり解決しました。
いま考えればなんでやらなかったんだという感じです。
意味不明な質問から読み取っていただいた皆様、ありがとうございました。
あと複数のブラウザでのチェックはしてました。
本当にありがとうございました。

そもそもjavascriptで実現できるかわからないのですが・・・

�@外部のページを小窓で開き
�A外部ページにあるテキストリンクをクリックすると
�Bこちらが管理してるページの特定のテキストボックスに、そのテキストリンクの内容が入る。

jqueryとかでも無理ですかね？

無理

innerHTMLをつかってサムネイルもしくはボタンクリックで
テキストボックスの中身を入れ替えるページをつくってるんですが、
（ここで解説しているような内容です→　ttp://homepage1.nifty.com/kodayan/dhtm/dhtml/text02.htm）

ボックス内のスクロールが下にあるままボックスの内容を切り替えると
切り替わったボックスのスクロールの位置も下に下がったままです。
この対応に苦戦してます。

scrollTopの対象はどうなるのですか？
というか、どうすりゃいいのかわかりませんorz

真面目に調べてるのかねえ？
ふつうにscrollIntoViewでも使えばいいんじゃないかと思うが。

jQueryのプラグインを探しています。

小さな正方形のイメージ(20px×20px程度)が横一列に10個程度並んでいます。
左側のボタンをクリックするとイメージ一個分左にずれ、
右側のボタンをクリックするとイメージ一個分右にずれる。

こーいう動作のjQueryプラグインはないでしょうか？

もうさ、クリックしたらディスプレイずらしてもらえよ。

javascriptでペッティングできますか？

>>67
自分で作る気はないのか？

>>66
サンクス
できました。
言い方はやな奴だけど、アドバイスに感謝します。

・javascript
window.attachEvent("onload", function() {
var chg = document.getElementById('chgText');
var target = document.getElementById('eventSampleText');

chg.attachEvent("onclick", function() {
target.innerHTML = "CLICK";
});
});

・html
<input type="button" id="chgText" value="chgText">
<div id="eventSampleText">aaaiii</div>


上記のjsとhtmlで、「idがchgTextなボタンを押したら、idがeventSampleTextなdivのテキストが書き換わる」ということができるのまではいいんですが、
以下のjsを追記したとたんに動かなくなります。

var Human = function() {
this.var = "hoge";
};

this.varをthis.hoge などに書き換えると動くことから、予約語のvarを使っているのが原因だと思うのですが、

1.何故これだけで動かなくなるのでしょうか？jsを上から下へパースしていって、var Human...が現れる前までのjsにエラーは無いから、そこまでのjsは動作してもいいのでは？
2.attachEventの部分をaddEventListenerに書き換えてfirefoxで同じ検証をしたところ、var Human...が記述してあっても正常動作したのですが、やはりjsエンジンが違えば動作も異なるのでしょうか？
　SpiderMonkeyでは、jsを上から下へパースしていって、エラーがある場所の前までのjsは正常動作するとか？

firefoxのほうはエラーになってないんじゃね

"javascript 1.7" 予約語
などでｇｇｒ

twitterの公式ウィジットを設置すると他のJSが誤作動を起こすんですが
どなたか対処法知りませんか？IE限定で勝手にオブジェクトに関数を代入してくる

誤作動を起こす他のJSって何だ？

>>76
それは自作の簡単なスクリプトです。

単純にオブジェクト名（テキスト）の配列使ってるだけなんですが

そこにファンクションを強制的に代入してきます。（IEのみ）

どのタイミングで代入してくるのかも目下不明です。

オブジェクトだか変数だか詳細が分からないけど、
自分が宣言した名前がかぶってるんじゃないの？
名前変えてみたら

>>78
とりあえず自分でも解決すべく調査中です。
名前の変更をしてみましたがだめでした。

DOM関係で特定タグのオブジェクト名を配列に格納するということをやっているので

そこらへんでＤＯＭのオブジェクトをウジィットも操作していておかしくなるんじゃないかと

現状は考えています。

IE8でも同じことが起こる？
起こるんだったらIE8の開発者ツール(F12で起動)使って、
ステップ実行してみたらわかるんじゃ？

>>80
起きます。やってみます。

自作のスクリプトが誤作動を起こすのに
自作の方を原因と疑わないのがすごいなｗ

Firefoxのfirebug, Chromeのデベロッパーツール, IE8の開発者ツール は最低限知っておくべき
あ、知ってたらこのスレには来ないかｗ

>>82
最終的にドル関数かもしれないですけどね

すいませんIE9で以下のコードが動かないんですけど分かりませんか？

var i = 1;
alert(i);

HTML側がいい加減なんだろ

ＨＴＭＬはこうです

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var i = 1;
alert(i);
</script>
</head>
<body>
<div>はじめてのJavaScript</div>
</body>
</html>

ブラウザでJavaScriptの実行が制限される設定になってるとか？

http://widgets.twimg.com/j/2/widget.js

どうもウィジットのこの部分が配列に代入されるのですが

コールバック関数というのですか？これが原因？
これＩＥ関係するのかな？？？？

if(!Array.forEach){
Array.prototype.forEach=function(D,E){
var C=E||window;
for(var B=0,A=this.length;B<A;++B){D.call(C,this[B],B,this)}
};
Array.prototype.filter=function(E,F){
var D=F||window;
var A=[];
for(var C=0,B=this.length;C<B;++C){
if(!E.call(D,this[C],C,this)){continue}
A.push(this[C])
}
return A
};
Array.prototype.indexOf=function(B,C){
var C=C||0;
for(var A=0;A<this.length;++A){
if(this[A]===B){return A}
}
return -1
}
}

そこらへん拡張されて何か問題あんの？
配列でfor inとか使ってるとか？

>>90
まだよくわかりませんが、これはコールバックだからこれが直接の原因じゃないですね

もう少し考えます。

もうちょっとどういうスクリプトに対して
どういう誤作動があるのかきちんと書いてみ？
書いてることが少なすぎてわからん

>>90
たぶんご指摘のとおりだと思います。

「配列でfor in」しています。

何も入っていない配列のはずがコールバックに反応しているような

対処方法はありますか？

for in つかうな。
配列なんだからlengthまで回す

>>94
ありがとうございます。

勉強になりました。

cookieの値を取り出してinputに突っ込むスクリプトだけど3行目で&&している意味がよくわからない
$("input[type=text]").each(function(){
　　var a=$.cookie($(this).attr("name"));
　　a&&$(this).val(unescape(a));
});

&&する理由は何ですか？

aが空だったら、そもそもunescape呼ぶのが無駄だから効率のためじゃね？

>>97
色々と調べてみたら短絡評価が行われることが分かりました
空文字はunescapeしても空文字なので無駄なだけなので許容できますが
nullやfalseを入れると文字列で"null","false"が返ってくるのでおかしなことになりますね

ありがとうございました。

>>41
これってランダムになるか？
確率計算してなくね？

乱数生成器使ってないからランダムとは言えないけど
擬似ランダムとでも言うか
ユーザからすればランダムっぽくは見えるだろうね

>>98
「引数が省略されたらデフォルト値を使う」みたいな場合には
よく使うテクニックだったりする

loadURI() の第二引数の referrer はなぜ nsIURI なんだろう
第一引数の uri は string でわかりやすいのに

ランダムのアルゴリズムはなんちゃらフィッシャーで実装しちゃえばいいじゃん

質問です。
jQueryのloadでファイルを読み込むときに、対象ファイルの拡張子が.txtだと動作しません。
拡張子を.htmlや拡張子なしに変えてみるとうまく読み込めるんですが、.txtに限ってダメなようです。
参考サイトを見ると.txtでも同じように読み込めるはずなんですが、なぜうまく行かないのでしょうか。
jQueryのバージョンは1.4.2です。コードは以下のようなものです。

function load() {
　　　　$("#aaa").load("test.txt");
}

>>104
test.txt で Content-Type: text/html; を出力するようにしてください。

言語としてのJavaScriptを語るスレはどこですか？
総合的なスレが見当たらないんですが

>>106
質問に類するものなら、ここだと思うけど。


ところで、jQueryの質問は言語としてのJavaScriptとはほとんど関係ないから、
今後こっちへ誘導するようにしないか。

【誰か】jQueryのここがわからない【助けて】
http://hibari.2ch.net/test/read.cgi/tech/1229881548/

あーだこーだと言いたいだけじゃないの？

>>106
言語で語りたいならここだと思うが…
ECMAScript デス 3
http://hibari.2ch.net/test/read.cgi/tech/1190160481/

onmousemoveなどで取得したときの正確なマウス座標を取得したいのですが
テキストボックスにフォーカスが当たっている場合等はどうしてもずれてしまいます
親ノードの位置を取得して足すみたいなことをすればできるかなというところまできましたが、
全然まともなソースが作れません
できればソースを教えてください
あと、今日はもう書き込めないのでよろしくお願いします

prototype.jsにその機能あるよ。
あるいはprototypeから取り出せば？
自分で作ったソースを書き込まないやつにはこれぐらいしか言わない。

Array.prototype.slice.call(arguments)

これは、
Arrayオブジェクトのプロトタイプのsliceメソッドを呼んでいて、呼び出すときにsliceの中におけるthisをargumentsにして呼び出していて、
結果として、大元の引数を全て返している、でいいですか？
また、使いどころは引数が不定のとき、でいいですか？

>>106
語りたいなら本家開発サイトのフォーラムで語っちゃってくださいよ

>>112
「結果として」という書き方が若干曖昧だが、
そこを理解して言っているのであれば何も付け加えることはない。

最後の一行からして、何か別のところで理解が間違ってる気がしないでもない今日この頃。

>>112
Array.prototype.slice.call(hoge) はhogeが配列のときhoge.slice()と同じ
hoge.slice() は hoge をコピーした配列を返す

hogeがargumentsの時も同様で、arguments.slice()と同じ。
つまり引数をコピーした配列を返す。
けどargumentsは配列っぽいふるまいをするけど配列ではないのでsliceメソッドを持たない
だから Array.prototype.slice(arguments) という呼び出し方をする

Safariのデバッガでおすすめを教えてください。

要素をn個づつwrapする方法が分かりません。
例えば
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
を
<div>
<p>text1</p>
<p>text2</p>
</div>
<div>
<p>text3</p>
<p>text4</p>
</div>
としたいです。
$("p:nth-child(2n),p:nth-child(2n-1)").wrapAll("<div />");
等と書いてみましたが、これでは全体がwrapされてしまい無理でした。
偉い人、よろしければご教授下さい。お願いします。

二つの要素を選択してwrapする作業を二回すればいいじゃん

>>119
なるほど!!
gt,ltフィルターを使ってそうしてみます。ありがとうございます。

しかし100個とか1000個単位でやりたい時にこれがサラリと書けると便利ですよね。
CSSで頑張って凌ぐしかないですね。

>>120
うるせえはげ

evalでやるかforを要素単位で回す

>>118
wrapするライブラリがあるんだから使えばいいじゃん

>>114-116
ありがとうございますた。

>111
prototype.jsからpointerXを取り出してみましたがこれでは症状が改善できませんでした

ネットにアクセスできる環境がアクセス制限のかかったケータイしかないため、
できれば具体的なソースか具体的な解決方法を教えていただけるとうれしいです

ちなみにソースです
function onMouseMove(e){
doc=document.documentElement
body=document.body||{scrollLeft:0}
Mx=event.pageX||(event.clientX+(doc.scrollLeft||body.scrollLeft)-(doc.clientLeft||0))
My=event.pageY||(event.clientY+(doc.scrollTop||body.scrollTop)-(doc.clientTop||0))
//<img id='P' src='I/p-r.gif' style='position:absolute;left;0px;top:0px;'>
P.style.left=Mx+"px"
P.style.top=My+"px"
}

具体的な解決方法：ネットカフェにでも行けばよろしい

イベントの使い方と要素の特定方法がおかしいな。エラーログ見てみろよ

> ネットにアクセスできる環境がアクセス制限のかかったケータイしかない
じゃあ、マウス座標とか無理じゃないの

>127
他にも膨大な数あるコードから要点だけ抜き出しました
実際はonloadのあと
document.onmousemove=onMouseMove
となっています

エラーログというものは確認できませんが、エラーは起きていません
通常はちゃんとページ左上端からの座標が表示されるのですが、
マウスが<input>等のテキストボックス等の上に重なったときはその要素の左上端からの座標になってしまいます

例えば要素が(100,100)の位置にあって、(0,0)からマウスを正斜め右下に動かして行くと、
(0,0)→(1,1)→(2,2)→(3,3)→…→(99,99)→(0,0)→(1,1)→…
となってしまいます
これを
(0,0)→(1,1)→(2,2)→(3,3)→…→(99,99)→(100,100)→(101,101)→…
としたいのですがどうしたらよいのでしょうか？

わかっているテキストボックスだけのその場しのぎだけのコードならなんとか作れそうですが、
根本的に問題を解決するコードを書きたいのです
教えて下さい


>128
最近の携帯ではマウス座標を取得できます
特に私は光タッチクルーザーがついたSH-06Aを使っておりますので、かなりまともな操作もできます


ちなみに、このコードで何をやろうとしてるかと言うと、
オンラインゲーム中に相手のマウスが自分の画面に反映される
また、相手のマウスに自分のマウスが追従する(<button>移動→focus()で)
といったことをしようとしています

今日はもう書き込めないとかネットが出来る環境がないとかそんな個人的な理由が調べることを免除される交渉の手札になると思っているその思考。
スルーされてるけどネット環境ならネカフェを利用するなど自分で出来ることをやりつくして
それでもこれこれこういうキーワードなどで検索したが期待する情報が得られなかったというならまだしも。
あんまりネカフェネカフェとひとつだけ提示するとうちは田舎なのでネカフェはありませんなどと言い出しそうだけど
提示された方法以外の手段も模索してみてはどうか。
想像力のなさ応用力のなさを丸出しにすると限りなく答えに近いものを出されてもまた
「これでは症状が改善できませんでした」「具体的な答えそのものを教えてください」って言うんだろうなと思われてしまう。

答える気はないが、これってfirefoxで動くっけ？

>>129
＞わかっているテキストボックスだけのその場しのぎだけのコードならなんとか作れそうですが、
＞根本的に問題を解決するコードを書きたいのです
＞教えて下さい

自分で考えずに、ただで俺たちにコードを書かせたいってか

>>129
それと・・・

＞ちなみに、このコードで何をやろうとしてるかと言うと、
＞オンラインゲーム中に相手のマウスが自分の画面に反映される
＞また、相手のマウスに自分のマウスが追従する(<button>移動→focus()で)
＞といったことをしようとしています

FPSかなんか知らんがネトゲで不正な事しようとするな

フレームで構成したウェブページにて、あるフレーム（frame1）から呼び出したJavascriptで、
別フレーム（frame2）のフォーム内容の操作をする方法を探しています。（テキストボックスの内容を変更する、消すなど）

このサイトで解説している方法を使い、
http://homepage2.nifty.com/BASH/WWW/JavaScript/anotherpage.html

parent.frame2.document.getElementsByName("textbox").innerHTML = "ああああ";

のように、他フレームの要素にアクセスする方法を知りました。
各フレームのhtmlがローカルファイル同士や、同一サイトのものならこれで問題無いです。

しかし、片方が他サイトのものになると、この方法では内容の操作ができないようです。
parent.frame2.documentから下の階層のオブジェクトが取得できていないようです。
何か良い方法は無いですか？

そりゃ他のサイトだとできないだろ
セキュリティの問題

>>134
同一生成元ポリシーでググるよろし
解決策としては同一ドメインにCGIかなにかを設置して、他サイトとの通信をそこで行ない、
iframeからはそのCGIを呼び出すとかなんとか

http://www.logic-sunrise.com/のサイトの
中央の×で閉じれるメニューと
左側のーで閉じれて、□で並び替えができる。

これはどのようにやったらいいのでしょうか？
ソースを見てもよくわからなかった為、質問しました。

>>137
とりあえず思いつくキーワードだけ

・中央の×で閉じれるメニュー
　「アニメーション」
・□で並び替え
　「ドラッグオンドロップ」

>129
John Resigにでも聞いてみようか

>130,132　語弊がありました
PCがないから調べれないのでコードを丸ごと全部教えてくれと言っているわけではありません
「こうすれ」と日本語でヒントが貰えればもちろん後は自分で調べてコードは書きます
JavaScriptは１年半前から始めたのですが、多分今までに４、５回このようなことを思い、頑張って調べはしました
アクセス制限サイトもProxyサイト経由でおそらくググって数十件は全部見ましたが、それっぽいのは大量に見つかるのですが
探すのが大変下手なのか目が悪いのかコードの理解が低いのかで、今回の問題を解決するコードを書くことが未だにできません
>133　こちらも語弊がありました
私が今作っているオンラインゲームでの話です
今はオセロくらいしか考えてませんが、今後レースゲーム等を作ったときに相手のリアルタイムで滑らかな状態反映が必要なので
半分実験的に、相手の擬似マウスを表示して、実際に人間とプレイしている感を出そうという魂胆であります
>131　わかりませんが、
今の段階ではこのコード以外はほとんどAjaxの処理で、そこまで複雑な処理は書いていないので、きっと動いてくれると信じてます
逆に自分が書いたコードがIEで１発でまともに動いたことは１度しかないのでそちらが心配です
もう少しゲームが完成したら、いろんなブラウザを入れている友達に確かめてもらうつもりでいます
ちなみに一応言うと、最終的にｉモードブラウザ2.0で動けばいいかと思っています
私自身がｉモードかフルブラウザでしか作成できませんし、ネカフェ等はお金が０だし学生なので行かれませんですし、
図書館のPCを無断でプログラミングのために占領するほどの勇気と行動力がないので
迷惑にならない月一くらいでその友達の家に行って使わせてもらうくらいしかないといった有様ですので
それから、１日１レスしかできないのはibisの無料お試し版を使って書き込んでいるためです

今回のgoogleの大変動で分かったことを教えます。
http://twitter.com/creditcardmiu/status/25025421209

開いてもらいたいならアカウント名をもっと工夫

SEO対策なんて間違った言葉使う奴の言う事なんて

>>140
jQueryは使ってみた？
ttp://semooh.jp/jquery/api/events/mousemove/fn/

window.open("")で新しいページを開き、そこにinnarHTMLで指定した文字列を挿入する形で書き換えたいのですが、
元のページが書き換えられてしまいます
元のページでjavascriptを実行したときに、新しく開いたページを書き換えるにはどのようにするのでしょうか？

自己解決しました

せっかくだから解決策の中身も書いてけ。

ajaxで対応できました

えっ

>>149
ajaxなんか要らんけどね。
本人が対応できたと言うんだから、そっとしておいてやれ

ＨＰで画像をランダムで表セルの中に表示したいんだけど
画像でランダムはある程度わかるけど
表セルの中に表示するのはどうすればいいの？

スレチすぎるだろうｗ html

html併用なのはわかるけど
ランダムリンクと併用した場合
javaで指定するんじゃないの？

＞java

表セルの中を指定すればいいだけ。

>>155
うるせえはげ

windowのbeforeunloadイベントで
別のページに移動するのかリロードなのか閉じられようとしているのか
判断することはできますか？無理ですか？

beforeunload で prompt 出して、聞けば良いｙｏ！

迷惑極まりないなｗ

　　　　　　　　　　　　　　NO　→　【リロード】　─　YES → じゃあ死ね
　　　　　　　　　　　　／　　　　　　　　　　　　　＼
【別ページに移動？】　　　　　　　　　　　　　　　　 NO → 私は今閉じられようとしている
　　　　　　　　　　　　＼
　　　　　　　　　　　　　　 YES → 死ね

どうもありがとうございますやっぱり無理なんですね

クリックすると音声が再生されるサイトを作ったんですが、soundManagerというフリーのソフトを使って作りました。

しかし、gooの辞書の音声再生を今日初めて使ったところ、そのレスポンスの速さに驚かされました。
http://dictionary.goo.ne.jp/leaf/ej3/17838/m0u/commonly/

自分のサイトはこれに比べるとクリックした後に再生するまでの間に若干のタイムラグがあります。
（ためしにこのgoo辞書の音声をダウンロードして使って見ましたが、
同じ音声データでもタイムラグが発生していました。）

このページではどのようにflashを再生しているのでしょうか。
その仕組みがわからなかったのでわかる方いましたら教えて頂けないでしょうか。

ページを表示した時点でflashを描画、同時に音声データも受信（あるいはflashに内蔵）
クリック検知はflach側。よってJSでは音を鳴らしていない。

サウンド関係はほとんどFlash、gooも例外じゃない

Flashを使わない方法だと、HTML5でaudio要素がサポートされるのでそれを使う
<audio controls="true" autobuffer="true">
<source src="audio.ogg" /> <!-- Firefox -->
<source src="audio.mp3" /> <!-- Crome,Safari -->
</audio>

現状HTML5だと複数フォーマット用意しないといけないからイラネって感じだね
早く統一しろや

window.Hoge = {};
っていうのはnamespaceですか？

window['http://hibari.2ch.net/test/read.cgi/hp/1284091954/'] = {};
window.net.2ch.hibari.hp.1284091954 = {};

好きなのをどうぞ

ちなみになんでwindowなんだろう

後者は一気に作りすぎなのと数字で始まるやつがあるからエラーでるけどな。

数字で始まるやつがなくてもエラーだよ

namespaceは必ずしもURLである必要は無いかと
だから>>166のやり方も、被らない名前ならOK

なんでnet.2ch.hibari.hp.1284091954
こんな記述なの？
hibari.2ch.netの反対からでそのあとにディレクトリがきてるけど
そういうもんなんですかね
com.example.www

>>166
質問の意図がよくわかんないけど、
var Hoge = {};
と
window.Hoge = {};
は同じってのはOK？

グローバル領域である、windowに対する名前空間の汚染を少なくするために、
windowにオブジェクトを作った上で、そのオブジェクトに変数やら関数を宣言するのは、よくあるテクニック。

var Hoge = {};
Hoge.array1 = [2,3,4];
Hoge.func1 = function() {};

2chのURLの場合、コロコロ板移転するからnamespace向きではないな

>>172
国→都道府県→市区町村→番地、って順番で書く住所と一緒で、大きなくくり→小さなくくりの順番になってる

みなさんレスありがとうございます
やはりnamespaceだったんですね

>>173
同義だったんですね
とあるサイトを見たらそのように定義してあったので
prototype演算子使ったものと書き方がかぶりますよ
なんか混乱してきた・・・

なんか変なレスになってしまった
スルーしてください
JavaScriptややこしいorz

書き込みのハードル上げすぎ

━━━本スレに書く事を許される者は以下の通り━━━━━
　一、正しい(validな)HTMLとは何か知っており書ける者

JavaScriptの質問に、そこまでいらねーだろ

>>177
HTMLのタグに絡む質問をする奴は、最低限自分が質問する部分ぐらい知っててもらわんと

canvasのdrawImageについてですが、
最初にブラウザ開いたときはイメージが描画されず、
リロードしたらようやく表示されます。
これはImageオブジェクトを使って、
onload後にdrawImageをすることによって解決できることはわかりました。
しかしprototypeを使ってクラス化？するとどう書いたらいいかよくわからなくて困っています。
（インデントは全角スペース使ってます）
var CanvasImage = function(src) {
　this.img = new Image();
　this.img.src = src;
}
CanvasImage.prototype = {
　img: null,
　draw: function(canvasId) {
　　var ctx = document.getElementById(canvasId).getContext("2d");
　　ctx.drawImage(this.img, 0, 0);
　}
}
こんな感じになっています。
今はこれを<canvas id="test"></canvas>に対して、
window.onload = function() {
　var ci = new CanvasImage("test.png");
　ci.draw("test");
}
という感じで呼び出しています。
drawの中身を
this.img.onload = function() {
　ctx.drawImage(this.img, 0, 0);
}
のように変えたりいろいろしてみましたが、エラーが出てうまくいきません。
どなたか解決方法を教えてください。

var CanvasImage = function(src) {
this.img = new Image();
this.img.src = src;
};
CanvasImage.prototype = {
img: null,
draw: function(canvasId) {
var ctx = document.getElementById(canvasId).getContext("2d");
var that = this;
(this.img)? ctx.drawImage(this.img, 0, 0) : setTimeout(function() { that.draw(canvasId); }, 100);
}
};
window.onload = function() {
var ci = new CanvasImage("test.png");
ci.draw("test");
};

答えてくれた方々どうもありがとう御座いました。

JSを使わずにflashで直接再生するほうがレスポンスが格段にいいようですね。

>>180
レスありがとうございます。
setTimeoutを使うとは目から鱗です。
しかしそれでもリロードしないとだめでした。
ちなみに動作確認はFirefox3.6.10で行っています。
これをクリアしたら他のブラウザでも確認する予定です。

var CanvasImage = function(src) {
var that = this;
this.loaded = false;

var img = new Image();
this.img = img;
img.src = src;
img.onload = function() { that.loaded = true; };
};
CanvasImage.prototype = {
img: null,
draw: function(canvasId) {
var that = this, ctx;
if (this.loaded) {
ctx = document.getElementById(canvasId).getContext("2d");
ctx.drawImage(this.img, 0, 0);
} else {
setTimeout(function() { that.draw(canvasId); }, 100);
}
}
};
window.onload = function() {
var ci = new CanvasImage("test.png");
ci.draw("test");
};

>>183
ありがとうございます。
しっかり動きました。
少し不明な部分もありますが後は調べて頑張ります。

>>177-178
その項目は、HTMLがボロボロのinvalidなのにJavaScriptで操作
しようとして動かんとかほざいてる人が続出したので入れたもの。
そういう場合、HTML直して貰わんとどうにもならんでしょ？

headからjavascriptファイルをインクルードする条件で
htmlを全て読み込んでから実行する方法はありますか？

ありますよ。だけでいいのかな…



まあ、onloadとか調べてみたら。

window.onloadはhtmlを読み込む前に実行されてしまいました

ブラウザはchrome6です

それはダメだろ、ちょろめさん

IEだと、JSON.stringifyが使えないの？
IEでのオブジェクトのJSON化はどうやればいいのだ。。。

諦めて</body>の直前でjavascriptを呼び出します

は？Chromeってそんな仕様なの？
ありえないだろ

<input type="image"... onclick="somefunc(実引数,...);" .../>みたいなのがHTMLに書かれているとして，
getElementsByTagNameでElementを取得した後，
このsomefuncの実引数を取り出す簡単な方法はありますか？
element.onclickがfunctionオブジェクトだから，なんかできそうな気がするのだけど，
探し出せませんでした。
現在はinnerHTMLの後，正規表現で切り出してますが，スマートさに欠けるし，
メンテナンスが悪いので，お知恵を拝借。

>>188
やってみたけどそうみたいだね
でもaddEventListener使えば普通に読み込み後に動作したよ

>>193
そもそもイベントをHTML上に書くのが間違い

var a = b = 1;とか
var a,bみたいな書き方ってできませんでしたっけ？

テンプレにwindow.onloadの件入れといて

>>197
ｲﾗﾈ

>>190IEでもJSON.stringifyつかえたぞ。８，９

>>196
できるけど、前者は変数 a のみの宣言。

a={hoge:function(){任意のコード}};として
a.hoge()と書けば任意のコードが実行出来ますが、hoge()をオブジェクト定義時に書かなくても任意のコードを実行させるにはどうしたらよいのでしょうか

例えば
a.kage()//alert("kage")
a.mage()//alert("mage")
のような感じで。

>>201
a.hage = function() {
alert("fusafusa");
};

なんか見づらくなっちゃいましたね。ECMAの和訳サイト

おしえてくれ。
ajaxでデータ読み込んで動的にイメージリスト作成し、スライダーさせたい。

http://cssglobe.com/lab/easyslider/01.html
概要としてはこんな感じ。このプラグインを使おうと思ったが機能がたりない。
自作することにした。


【今試みてる方法】
・ajaxで並ばせるイメージのデータを読みこむ。
・imgをliで囲って横並びにさせる。
・親ボックスの幅を決めてoverflow:hiddenにする。
・スライドボタンクリックでulを横にずらす。

しかし、ul自体親ボックス以上の大きさにはなれないわけで、
そして、ulを横に動かす方法もイマイチぴんとこない。

なにかいい方法はないか。
よろしくたのむ。

ulでくくらなくてもインライン要素だから横並びになるでしょ
scrollLeftだったかな。

204だ。
イマイチわかりにくかったので補足。

・表示データとして150px×60pxのイメージが30個ほどある。(管理画面から登録するので固定ではない)
・スライダーのボックスは5個程度常に表示している。
・左右のボタンをクリックするとスライダーボックス内のイメージが左右にスライドし、一つのイメージが無くなり、新しく一つのイメージが挿入される。

こんな感じ

Webサイト制作初心者用質問スレとのマルチにつきスルーでおｋ

マルチじゃねぇよ。
あっちはきちんと質問閉じてるじゃねぇか。

まぁ偉そうだから答えてあげないけどね

別に偉そうにしてるわけじゃねぇよ。
元々こういう口調なだけだ。

まぁ、気に入らないなら仕方ない。
答えてもいいと言う奴だけ答えてくれ。

あるURLに対して、
閲覧済みに（リンクをクリックしたように）する方法が
あれば教えてください。

回答者＞質問者とは思ってないけど質問者＞回答者って立場はないよね
自分が分からない事は他人が知ってることもあるし、他人が知らない事を自分が知ってることもあるし
礼儀は大切だよ

>>211
:visitedと同じスタイルを適用すれば良いんじゃないの。何か問題有るの？

>>210
あんたいいこと言った!!!!!

>>190 json2.js
>>201 __noSuchMethod__ 非標準

>>199 IE8は互換モードだとJSON使えない IE9はどう?

>>213
閲覧済みのスタイルは:visitedで可能なことは分かるのですが、
閲覧済みであることをブラウザに教える方法が分からないのです。

1x1ピクセルのインラインフレームをこっそり作って
そこで「閲覧済み」にしたいURLを読み込めばいいんだよ

>>218
それいい考えです。ありがとうございます。

>>188
window.body.onloadでひとつ

>>217
defaultViewでリンクが閲覧済みかがわかる、ただし乱用はしないように

<style>a:visited { color: #800080 } </style>
<script>
e = HTML Element (<a>とか)
view = e.currentStyle || document.defaultView.getComputedStyle(e,'');
if (view.color == "rgb(128, 0, 128)") || view.color == "#800080") {
　　alert("閲覧済みだよ");
}

閲覧済みかどうかなんてブラウザとじたときにクッキーを始めほとんど情報を消す俺には無意味だぜ？

前に、楽天がこっそりリンクを訪問済かチェックして、悪用して問題になってたなぁ。

どういう部分が悪用になるわけ？
参考までに教えてほしい

ad4uでググるといいよ

別に不正でもなんでもないし
ついでにFLASHクッキーも

どんな単語で検索しているかを調べて、それを個人情報と結び付けることができるじゃん。

:visitedの判別ができるのはまずいよねってことで
Chromeではもう>>221はできなくないし、Firefoxでもできなくなる
他のブラウザも追従するだろうね

「できなくないし」じゃない「できないし」だ

サイ本でも確か、この件は脆弱性として書かれてたね。

ユーザの行動追跡とか嗜好調査って、
具体的な被害はよくわからんが、単純にキモいよね。
ブラウザを落とすときに履歴とCookieは消去してる。
あと最近いろんなとこでTポイントカードを持っているか聞かれるけど、
あれもキモいから俺は提示しない。

写真付き身分証も提示しない方がいいよ、キモいからｂ

>>218-219
正気か

JSでポップアップした子ウィンドウから親ウィンドウをアクティブにしたいと思っています
IE6のようなウィンドウが開くブラウザでは opener.focus() でいけることはわかったのですが、
例えばFireFoxのようなタブブラウザでポップアップの代わりにタブで開くような設定をしていると、
親ウィンドウをアクティブにできません。

JSでタブを操作する方法を教えていただけませんか
というかそもそもそういうことは可能なのでしょうか

>>218はウイルス配布など罠サイトに見られる手法だな
意図はなくてもそういう怪しいことをしただけでブラックリスト入れられることもあるから注意しろよ

>>216
あー互換だと使えないね。IE9
Ie8は多分通常表示で試してたわ。

なるほど、IE8で互換表示だと
JSONオブジェクト自体が使えなくなるのか。
なんだよこの仕様はｗ

IEが互換表示モードかどうかを判別する方法ってあるのかな？

>>237
まんま "JSON" in window で判定できないか？

互換か確かめてJSON使うんならJSONでいいなｗ

すみません。シンタックスシュガーって何ですか？

>>240
ぐぐれ

三項演算子と条件文の関係だな

「ぐぐれ」

これも一種のシンタックスシュガー。

>>240
簡単な書き方や省略した書き方を許す仕様のこと

>>242,244さん
それで合点がいきました。ありがとうございました。

>>220
レスありがとうございます
window.body.onloadもやはり読み終わる前に実行されました
chromeは面倒くさいです

いいからコード出せ、と

アンカーつけろ

>>248
>>248
>>248

>>248

document.createElement("img")とnew Image()で作られたものはまったく同じですか？

出力して試せばいいじゃないか

>>247
ぼくあてですか？既にコード出てると思いますが・・・

>>237,239
ブラウザのバージョンやモードを調べるよりも、
「ダックタイピング」の方が主流だぞ。

>>234
JavaScriptでタブを操作ってのはできないような気がする・・
そのあたりはFirefoxで言うとアドオンの領域じゃないだろうか。

タブ操作は出来るブラウザと出来ないブラウザがある。
出来るブラウザで、どこまで出来るかは調べてないけど。closeで思った。

>>254
どういう意味で「ダックタイピング」を使っているの？

>>238みたいなやり方を言ってるんではないかと妄想してみる

ダックタイピングのwiki見てきたけど、合ってると思ったけど。
主流っていうか常識的に考えたらそうなると思うけどね。

>>246
そりゃあ、onloadを正しく使えてたらHTMLを読み込む前に実行されるわけがないんだから、
どんな間違い方をしているのか興味はあるな。一応、
window.onload = load();
に1票

>>260 なるほど! 爆笑した ^_^;

そもそも間違えて使ったら最初に読み込まれたりするものなのか

>>260のコードを実行するとどうなるか考えるといいよ

bodyを読み込んだ後にコード実行したい話じゃないの？

現時点で、どこに focus があるか知る方法はありますでしょうか？

IE, Firefox。

http://www.google.com/search?q=javascript+focus+%E5%8F%96%E5%BE%97&btnG=%E6%A4%9C%E7%B4%A2&num=50&hl=ja&lr=lang_ja&tbs=lr:lang_1ja&sa=2

ありがとうございます！
こういうのが有ったんですね。知りませんでした・・。

質問があるので誰か教えて。

【目的】
ブログの更新情報をRSSで取得して自動で表示させるサイトを作りたいと思っていて、
下記の（１）サイトのシステムのようなものを作りたい。

（１）AKB48のブログ記事を取得して一覧表示しているアンテナサイト
ttp://antenna48.com/index.php

【現状】
調べてたどり着いた方法はブログRSSをGoogleのjavascript（２）で取得して表示させるという方法がわかった。
ただ、このやり方だとサイトのソースは後述のようになり、動的なサイトとしてGoogleに判断されるらしくSEOが弱いので別の方法を考えたい。

【質問１】
そこで質問なんだが、RSSを取得して且つ、htmlのtitleや本文にキーワードが記述され、ソースに反映される自動表示の方法を教えて欲しい。

（１）のＡＫＢサイトが手動なのか自動なのかはわからないが
この手のアンテナサイトは「2chまとめサイトまとめアンテナサイト」等もあるので
自動で出来るシステムがあるのではと考えてる。

漠然と考えているのは以下のやり方。何かもっといいやり方があったら教えて！
�@RSSの情報をphpで取得してＤＢに格納する。
�Aphpでhtmlを生成する（ブログtitleタグと記事titleタグを指定してＤＢから情報を取得するイメージ）
�B生成されたhtmlを自動でアップロード（cronとかつかうのかな？）

【質問２】
そもそも動的なままでもＳＥＯに関係ないんだったら質問１はやる必要ないんだけどＳＥＯに誰か詳しい人いない？

SEOは知らないしそもそも何を聞きたいんだか良く分からないが、
とりあえずJavaScriptじゃHTMLのソース自体を触ることはできない。
すなわちスレ違い。

あと、「静的な」ページを作りたいのであれば、別にHTMLファイル自体を
生成して置いておくようなことをする必要は必ずしもない。

８割がたスレチじゃね？

http://hibari.2ch.net/test/read.cgi/hp/1284630407/692

DOMの簡単な変更とかしかしたことないんですがステップアップしたくて
コンストラクタを使ってみたいのですが、
解説サイトを見てもどれもJAVAだかほかの言語をやってた人向けみたいで、
function Hoge(huga) { this.huga = huga; }
Hoge.prototype.piyo = function() { alert(this.huga); };
var unko = new Hoge("うんこ");
unko.piyo();
↑こんなコードだけあって、ほら簡単でしょう？みたいな説明しかなく
具体的にDOMとどう絡めて使うのかわかりません。（alertは使っているけどそういうのじゃなく）
こうときに使えば効果を発揮するよ！みたいな短い例（上記よりは長いの）を教えてください。

コンストラクタの意味はわかるの？

DOMだとこんなかんじかな
function Hoge(A){this.element = typeof A === "string" ? document.getElementById(A) : A;};
Hoge.prototype.piyo = function(A) { this.appendChild(document.createTextNode(A)) };
var unko = new Hoge("unko1");
unko.piyo("add");

これは表現の仕方が違うだけ（だと思う）だから、これで出来ることが増えるとかじゃないと考えてる。
jQueryとかこの仕組み使ってるよ。newは理解してるけど、今まででnewが必要不可欠になったことが無い(´・ω・`)
コンストラクタの意味なんて知らないけどな。

this.appendChild
↓
this.element.appendChild
だった

>>274-275
どうもありがとうございます。
function hoge(A,B) {
var element = typeof A === "string" ? document.getElementById(A) : A;
element.appendChild(document.createTextNode(B));
}
hoge("unko1","add");
hoge("unko2","add2");
みたいな感じのものとどう違いますか？
メソッドをプロトタイプ経由にすることでインスタンス毎にメモリを消費しなくなる、
とかいう話に繋がってくるのですか？
メモリがどう使われているのかとか見方がわからないのでメモリの話は実感できなくて。

コンストラクタってのはオブジェクトをインスタンス化するときに、
一番初めに呼ばれる部分のこと。
変数の初期化や設定などをそこで行う。

>>272の場合
> function Hoge(huga) { this.huga = huga; }
ここがコンストラクタ。

インスタンス化ってのはオブジェクトを実体化することで、
new演算子を使ってる部分がそう。
> var unko = new Hoge("うんこ");
この処理をしたときに上記コンストラクタが一番初めに呼ばれて、
Hogeオブジェクトのプロパティであるthis.hugaにうんこが入る。
プロパティっていうのはHogeオブジェクトの属性のことで、
この例はわかりにくいから、
例えばウンコをオブジェクトとして考えた場合、色や大きさなんかが当てはまる。
色は茶色、大きさは普通みたいなかんじで属性の状態を、
Hogeオブジェクトに属しているメンバ変数（thisを使った変数）に入れる。

メソッドってのはオブジェクトの振る舞いで、オブジェクトが何をするかを定義する。
> Hoge.prototype.piyo = function() { alert(this.huga); };
この部分はHogeオブジェクトのpiyoというメソッドを定義してて、
Hogeクラスのプロパティであるthis.hugaをalertする。
この例もウンコをオブジェクトとして考えた場合、変形するとかちぎれるとかが当てはまる。
流すのはトイレだしウンコを出すってのも動物の動作なのでこれはウンコ自体のメソッドとは言えない。

ありがとうございます。
解説サイトでは>>272みたいにメソッドひとつだけでしかもインスタンスを作ってすぐにメソッドを呼び出している例ばかりだから
>>276とどう違うんだろう？って思ってたのですが
あらかじめたくさんメソッドを定義しておいて必要になればそのつど呼び出せる・・・ってことですか
変形するとかちぎれるとかそういう

でもウンコが変形したりちぎれたりって
風力とか重力とかそういう力がかかってるからだよね
風力や重力による物と考えると・・・
オブジェクト指向って難しいね

＞Hogeオブジェクトのプロパティであるthis.huga
＞Hogeクラスのプロパティであるthis.huga

無茶言うな

>>280
そこミス上に統一しといて

OOPならJAVAとかそこらへんで勉強したほうが・・・

C#で勉強したほうがよい
あとデザインパターンを覚えるならPHP

imgタグにidを指定せずに.srcメソッドでURLを取り出す方法はありますか？

----------------------------------------
var iURL = document.getElementsById("id").src;
alert(iURL);
----------------------------------------

↑idを指定した場合alertにURLが表示されます。

----------------------------------------
var iURL = document.getElementsByTagName("img").src;
alert(iURL);
----------------------------------------

↑こちらだとalertにundefinedと表示されます。

>>284
ByIdはひとつだけImg要素を返す(Elementで複数形でない)
ByTagNameはリストで返す(Elements複数形)
後者は[0]とかが必要

>>276
その書き方のほうが分かりやすいと思ったらそっち使っていたほうがいいよ。

>>285
すごい！有難うございました！

unkoはhogeやpiyoのような意味合いで一般的に広く使われているものなのですか？

hogeはともかくunkoもpiyoも一般的じゃない
英語圏はfoo bar
日本語圏はhogeとちょっとそれをいじったhuge huga hage なんて感じのものが多い
unkoとかmankoは2chでしか使われてない（もしくは2chネラーがブログなんかで使ってるだけ）

foobar hoge hage fuga fuge moge mage あたりは良く出る
unkoは食べるものによってはあんまりでないけど、繊維の多いものとるといいと思うよ

メタ構文変数、なんて大層な名前がついてんだな。
http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E6%A7%8B%E6%96%87%E5%A4%89%E6%95%B0

piyoって一般的だったのか
見たことなかったけどな

途中で投げちゃった。

個人的にはこっちの方が馴染みが深い。
http://kmaebashi.com/programmer/hoge.html

>>289の寒いギャグ誰か触ってやれよｗｗｗｗｗｗｗｗ
スルーとか見ててかわいそうだｗｗｗｗｗｗｗｗ

皆さんありがとうございます

unkoはやはり２ちゃんだけですか
piyoがマイナーな方だったとは

閉鎖的な環境なんで他人のソース見る機会がネットくらいしかないもんで・・・

>>289==>>293乙

こういう話題は誰でも参加しやすいから仕方ない

参加しにくい話題を頼む

絡みにくいヤツラがいるな

prototype.js 1.6.1の Form.Element.EventObserver() を使って
radio / checkbox の変更イベントを設定しています。
同名name での値の変更を知るにはどうすればいいのでしょうか？
<input type="radio" name="hoge" id="hoge1" value="1" />
<input type="radio" name="hoge" id="hoge2" value="2" />
こういうフォームの場合です。

>>299
IDが違うのでIDで見る

>>300
ここってID出さないとダメなんですか？>>1は読みましたけど

　_, ,_
( ﾟдﾟ )

なかなかいいギャグ

評価する。

>>299
こんなんでどう？もっとスマートに書けるのかも。
<!DOCTYEP HTML>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
<script>
window.onload = function() {
var inpobj = $$('input[name="hoge"]');
for (var i = 0; i < inpobj.length; ++i) {

new Form.Element.EventObserver(inpobj[i],
function (element, value) {
alert(element.id+"の値が"+value+"に変更されました");
}
);
}
}
</script>
</head>
<body>
<form>
<input type="radio" name="hoge" id="hoge1" value="1" />
<input type="radio" name="hoge" id="hoge2" value="2" />
</form>
</body>
</html>

JPEGとかのEXIFの情報を表示したくてExifUtil.js http://acapulco.dyndns.org/exifutil/ 使おうと
思ってるんですが、上手くいきません。

原因調べるにはどうすればよいのでしょうか？

>>306
はー、JSでバイナリファイル読むなんてかっちょいいな！
原因は作者に聞けば。幸い日本人みたいだし。

自分でソースを追って、誤りがあれば訂正して送ってあげるのが
利用者のあるべき姿な気はするが。

>>306
作者と同じサンプルでだめなら作者に質問すれば
そうじゃなきゃ設置ミスでしょ
firebugとかそこらへんで自分が書いたコードをブレイクすればいい

>>300 >>305
ありがとうございます。
この方法ですと、初回checkedはイベントで拾えるのですが、
一度選択すると、二回目以降は拾えないんですよね…。
確かに id="hoge1" は value="1" に設定されたので
二回目に選択しなおしても変化がない…という判定にされるのは分かるのですが。

<li><a href="./"></a></li>をgetElementsByTagNameで'a'を取得し
上から順番にonmouseoverした時に0,1,2･･･と値を返していきたいけど分かりません。
お願いします。

JavaScript
--------------------------------------------------
window.onload = function() {
var aCNT = new Array();
var aEL = document.getElementsByTagName("a");
for (var i = 0; i < aEL.length; i++) {
aCNT[aCNT.length] = i;
}
for (var j = 0; j < aEL.length; j++) {
aEL[j].onmouseover = function() {
alert(aCNT[j]);　←jだと動かないが数字を入れると動く
}
}
}
--------------------------------------------------

xhtml
--------------------------------------------------
<ul>
<li><a href="./">link01</a></li>
<li><a href="./">link02</a></li>
<li><a href="./">link03</a></li>
</ul>
--------------------------------------------------

>>310
alert(j)にしたら原因が分かるんじゃないかな

var nl = document.getElementsByTagName('a');
var n;
for (var i = 0; n = nl[i]; ++i) {
  n.onmouseover = (function (count) {
    return function () {
      alert(count);
    };
  })(i);
}

>>310
わかりません。なのにコードの最後は動くってどういうこと？

for で数字が変わっていってどの要素でも最後の数しか認識しない場合は
関数でくるんでやるの>>311をよくやるんだけど、他になんか良い方法ってある？

>>312
JSの変数は関数スコープ
変数jがどこで宣言されているか（どこに属するか）を考えてみれ

＞for (var j = 0; j < aEL.length; j++) {
＞aEL[j].onmouseover = function() {
＞alert(aCNT[j]);　←jだと動かないが数字を入れると動く

そりゃうごかねえよalertの行の時点で j の中に数字ははいってないもん
理由は相棒の>>313参照

>>313
俺は>>310の何が問題かは理解してるよ？
過去にこれではまったことがあって、その時は無名関数でくくって実行ってのをやったんだ。
他にも回避のための手段あるなら知りたいなって思って312を書いた。

>>314
ちょっとちがくね？alert(j);なら4返してくれる。
jはforが回り終わったあとのだから、常に4が入ってる。
aELは長さ4だから(ここも正しくはないが)、5番目の[4]はundefined

クロージャーを使おうとして失敗する例の
よく有るパターンですねわかります

>>315
・click時に getElementsByTagName('a') を実行して一致するまで比較する
・属性値に埋め込む

自分なら属性値に埋め込むだろうけど、そもそもindex値を必要する設計にはしないなあ。

質問者＝312に見えてきた

>>318
ちょｗｗ　一応>>312の1行目の文について言い訳しておく。
「わかりません。」と書いているのに「j【alert(j)】だと動かないが数字【を返すはずのaCNT[j]】を入れると動く」ってのはどういう事
【】内だと勘違いして、動いているのにわかりませんって言っているように見えたんだ。sﾏﾝ

>>317
さんくす。IEだとforが糞だから後者のほうが良さそうですね。

>>311
関数内で実行したら、メモリリークする…。

Internet Explorer リーク パターンを理解して解決する
http://msdn.microsoft.com/ja-jp/library/bb250448%28VS.85%29.aspx

>>312
with ({j;j}) { .... } 良い方法かどうかは知らない

あとこの例には当てはまらないけど、マウスオーバーされた要素に対して
何かしたいとかだったら単にthisでいい
ttp://gihyo.jp/dev/serial/01/crossbrowser-javascript/0005?page=2

>>321
j;j 訂正→ j:j

絞り込み検索の様なものを作成したいと思っています。

複数のプルダウンメニューから選択して検索ボタンをクリック、
該当するデータをリスト化（<ul><li>〜</li><li>〜</li>・・</ul>）して
htmlに出力するような事をしたいんですが、javascriptで可能でしょうか。

データはxmlで管理するのがよいかなと考えているので、
jqueryでxmlを読み込んで、該当するデータだけを出力、
ってな感じの流れを想定しているんですが。。

余裕ですよ

>>323
可能

>>320
それはもう修正されてる…
http://support.microsoft.com/kb/929874/ja/

どっちにしろ関数でラップしてスコープを維持するんだったら
こうする方が好きだな。

for (var i = 0; n = nl[i]; ++i)(function(index,item){
    item.addEventListener("mouseover",function(evt){
        alert(index);
    },false);
})(i,n);

なにそのきんもーい書き方
JavaScriptおそろしいね

無名関数で追加したイベントって除去できるの？

>>329
できる
item.addEventListener('mouseover', function (evt) {
item.remoceEventListener('mouseover', arguments.callee, false);
}, false);

removeがremoceになってるのはおいといて
イベント発生させないとだめなのか
それはそれでどうなの

>>326
ありがとう。
IE6SP3 で修正されたのは知っていたんですが、今でもリークパターンの指摘を受けるのでまだ対応すべきと認識していました。(>>4 でもメモリリークに触れられていたり)
実際のところ、今はリークパターンを考慮しない人が大半なのかな…。

>>331
どんな方法であれ、addEventListener 時に指定した関数オブジェクトを指定できれば、removeEventListener できる。
名前付き関数を使えない理由は何なの？

>>328
ES5でもブロックスコープは定義されなかったからね・・・
letが使えればもっとスマートに書けるんだけど、クロスブラウザ不可

>>330
callee、将来的にはどうなるか不透明すぎるのだけがネック
Strict ModeだとTypeError投げるようになる（実装してる処理系ないけど）

あとはYコンビネータ実装してゴニョるとか

>>333
レスへのレスにレスしてるだから気にしないで

二次元配列の一部を共有するような配列って作れますか？

具体的には
var board = new Array(); /* データを入れる */
var boardinner = new Array(); /* boardのデータの真ん中部分を入れる */

この時、配列の中身のデータは共有されてて
boardinner[1][2]=10とかやると、board[2][3]も10になり
board[2][3]=20とやるとboardinner[1][2]も20になるような感じです。

今テトリスを作ってて、ブロックが落ちてつもるところまではできて、
これから行を消すコードを入れる段階なのですが
壁も含んだボードなので、壁を含まないboardinnerみたいなのが作れると
記述がシンプルになるなと思ったのですが
思うように作れません

class Test
var str = "xxx";
function a(){
return "[" + this.str + "]";
}
function b(){
return "<" + this.str + ">";
}

こんな感じにクラスで書きたいんですけど方法ありませんか？

var Test = function() {

};

Test.prototype = {
str: "xxx",
a: function() {
return "[" + this.str + "]";
},
b: function() {
return "<" + this.str + ">";
}
}

こんな感じで書いてください。クラスとかそういうものはありません。
クラスやらインターフェースやらの導入が計画されていた時期もありましたが、お流れになりました。

var Test = function () {
// 初期化処理
};
Test.prototype = {
str: "xxx",
a: function() { return "[" + this.str + "]" },
b: function() { "<" + this.str + ">" }
};

使い方
var test = new Test();
alert(test.a()); // => "[xxx]"

カップルになるべき

ある場所Aからある場所Bまでの間の、リンクを押すと新しいウィンドウにするという仕組みにしたいのです。
ＡとＢの間ではＪＳで外のデータを読み込んでいるのですが、そこのリンクを新しいウィンドウで表示させたいのです。
自分のサーバーの中のデータではないので、改造できないのです・・

ヘッド内に<base>を使うと、ページ全体になってしまうし

ＡＢ内のソースもいじれないので、rel="external"もできないし


何か方法はないでしょうか？

読み込んで描きだす部分でtarget=_blankに書き換えればいいだろ。
それも出来ないっていうなら仕事やめた方がいい。

>>341
CTRL+左クリックかShift+左クリックで開ける

>>341
全然意味がわからんけど、jsでiframe作成してページ内に貼っていて、
そのフレーム中のリンクをクリックすると新しいウィンドウで開くようにしたいってこと？

chromeにて、document.body.clientHeight を使ってブラウザ画面の
縦の長さを取得していますが、ページによっては、
ブラウザの長さを取得できない場合があります。
何か、条件がありますか？

doctypeとか表示モードとかかなぁ。
ぐぐったら結構出てきたよ

>>346
ありがとうございます。とりあえず、それらの単語でぐぐってみたら
document.documentElement.clientHeight
というのも使える感じです。仕組みはよくわかっていませんが。

1つめの<div>の中の<img>を1つめの<div>の中の<a>にmouseoverさせる事で変更させたいのですが、
何故か2つめの<div>の中の<img>が変更されてしまいます。よろしくお願いします。

javascript
--------------------------------------------------
window.onload = function() {

var section = new Array;
var element = document.getElementsByTagName("div");

for (var i = 0; i < element.length; i++) {
section[section.length] = element[i];
}

for (var j = 0; j < section.length; j++) {
var iEL = section[j].getElementsByTagName("img");
var aEL = section[j].getElementsByTagName("a");

for (var x = 0; x < aEL.length; x++) {
aEL[x].onmouseover = (function(count) {
return function() {
if ( iEL[0].src.match(/.\./)[0].substring(0, 1) != count) {
iEL[0].src = iEL[0].src.replace(/.\./, count + ".");
}
}
})(x + 1)
}
}

}
--------------------------------------------------

XHTML部分です。

XHTML
--------------------------------------------------
<div class="test">
<img src="001.png" width="128" height="128" />
<a>TEST1</a>
<a>TEST2</a>
<a>TEST3</a>
<a>TEST4</a>
</div>

<div class="test">
<img src="002.png" width="128" height="128" />
<a>TEST1</a>
<a>TEST2</a>
<a>TEST3</a>
<a>TEST4</a>
</div>
--------------------------------------------------

>>347
マジレスしてあげますがそれは５大ブラウザ全てに対応できないから

>>348
>>310-
ついでにimg.srcのマッチもっと厳密にしたほうがいいよ。

<script type='text/javascript'>javascript:
(function(g)
{
　for(var i=g.length ; --i>=0 ; ) with( g[i] )
　{
　　if( (width != '')||(height != '') )
　　{
　　　〜略〜
　　}
})
(document.getElementsByTagName('img'))
</script>
としたときに、widthやheightが無いエレメントまで略部分にひっかかって、
変な値がwidth/heightに入ってるんですが、何故なのでしょうか。

変なってundefinedか？
わからないならwithは使わないほうがいいよ

>>348
ループを終えた後、一周目の x ループ内の iEL が、二周目の iEL を参照し続けているから。

>>352
何その Bookmarklet？ｗ

ブラウザが算出した値が img の width プロパティに設定されているのかと。

後、その with は止めた方がいい。
仮に img に width プロパティがなくても、スコープチェーンを遡って検索される。

>>354
成程、ブラウザが算出、ですか…納得しました。

>>353-354
わかりました。withは止めておきます。ありがとうございしまた。

オートコンプリートのライブラリをいろいろ試しているのですが、
なかなか良いものがありません。

・Ajaxでサーバーからデータを取得
・日本語入力でも問題なく動作する
・ページ表示後に動的に追加したフィールドにも適用できる

このような条件に合うものをご存知の方がいましたら、教えてください。

俺の知る中では無い
作れ

>・Ajaxでサーバーからデータを取得
これはGoogleのインフラだからこそできる技だぞ
一般人がそのへんのサーバでやったらあかん

>>357
やっぱり無いですか・・・

>>358
検索用ではなく、入力画面で使う予定です。

1文字うつたびに1リクエスト発生することには変わらないんですが
まぁ結局負荷はどのくらいの人が同時に使うかによるけど

そもそも単語のリストは有るのか？

>>360
それは設計次第じゃね？

やっぱり候補リスト返すだけでも、人が増えると結構な負荷になるんですかね？

>>361
単語というか、自前のデータです。

多対多のデータの入力するさいに、
量が増えると、セレクトボックスやチェックボックスじゃ入力し辛くて・・・

別画面にするのが無難なんですかね？

人数とデータ量によるとしか。
数が少ないようであればスクリプトに直接埋め込むとか、
リストを静的なファイルに書いておいて
画面表示時に全部読み込むとかって手が使えると思うけど、
候補ってどれぐらいあるの？

12万件の郵便番号データを分割してjsでファイル読んで候補出すぐらいのものなら大して負荷かからないよ

データは五千〜一万件くらいでしょうか。
アクセス数はリリース前なんで、なんとも・・・

初回に全データを読ませる方式だと、
http://www.enjoyxstudy.com/javascript/suggest/
がありますが、このライブラリは、フリガナから候補を絞るって言うのができないんですよね・・・

>>366
技術的にはそのjsのisMatchメソッドをちょっといじって与えるリストをそれに合わせればふりがな対応可能。
ライセンス的には自分でしらべてくれ。

>>367
うーん、できれば改造はしたくないですねぇ

となるともう、左右にリストボックスがあって移動させる奴か、
インターフェース自作するしかないですかね・・・

「項目を追加」みたいなボタンでフィールドが増やせて、
オートコンプリート付きで入力できるのが理想なんですがね・・・

Webフレームワークのチュートリアルとか見て、インターフェースの参考にしようと思ったんですけど、
データが少ないときのことしか考慮してないのであまり参考にならないですね；

ajax全般に言えることだけど
鯖のTIME_WAIT設定とポーリングの頻度次第で
秒間1000リクエストぐらいいっちゃうと共有レン鯖だと止められる可能性がある

確定前のタイピングってイベント発生しないの？

するよ、googleサジェストとか使ってるし

GoogleサジェストはSetTimeIntervalで入力内容の変化を確認してるよね。
Operaは変換中のonkeydownを認識出来ないからだと思う。
YahooはSetTimeIntervalを使ってないからOperaでは日本語のサジェストが弱い。

SEO対策無双がリンクを付けてくれるブログを増やしたそうだ。
SEO対策無双が値上げするかもしれないぞ。値上げする前に申し込もうぜ。
http://hibari.2ch.net/test/read.cgi/hp/1251295826/290

今時CEO（笑）

せつこそれ最高技術責任者や
SEO(笑）

>>368
isMatch書き換えたくない理由ってなに？
ライブラリが変わったときに大変だから？

おれがisMatch使いたいからです

なんかスルーされてるのがかわいそうなのでツッコむと、
CEOは最高経営責任者な
CTO(笑)
おなかいっぱい

そこでもうひとボケしないと！

XMLHttpRequestで、GETしたファイルのContent-Typeにcharsetが指定されていなかったら
charsetを上書き指定して取得、指定されていたらそのまま何もしないで取得、ってやりたいのですが
getResponseHeader()が使えるのはonreadystatechangeのreadyStateが4になってから、
overrideMimeType()が使えるのはsend()の前で、この時点ではgetResponseHeader()が使えない
でうまくいきません。どうすればいいですか？
まずHEADでHeaderを確認してその後おもむろにGETですか？

jqueryのtoggleを使って表示・非表示を切り替えられますが、最初は非表示の状態から始める事はできますか？

CSSでdisplay:hiddenにするか画面読み込み時にhide()呼べ

http://sakuratan.biz/azlink/widget/
ここの「主な特徴」の4番目にあるjavascriptの処理待ち回避ってどうやってるのか教えてエロイ人！

>>381
idかclassにcssでdisplay:none;設定しておくのはダメ？

文字をonclickしたときに、クリップボードにコピーするにはどうしたらいいですか？

ググればいいですよ

>>381
SimpleJS使えよ

クリップボード操作はIE8からだとページごとに警告出るので
不審がられるでしょうね

>>383
固まらないように、処理をsetTimeoutで刻んでる。

Minifyかかってるから細かいことはわからんので、
詳細は作者に聞け。

え？今（setTimeout）刻んでた？ 完全に無意識だったわ

>>389
ミサワ乙

function Class(){
this.closure = (function(){
var count;
return function(){
this.meth();
}
});

this.meth = function(){}
}

クロージャ内から同じクラスのメソッドmeth()を呼びたいんですが
thisでは参照できません、どうやったら呼び出せますか？

function Class() {
var self = this;
this.closure = (function () {
var count;
return function () {
self.meth();
}
});

this.meth = function () {}
}

>>391
どうしても、クラスメソッドを呼び出したいの？
this はインスタンスを指すのだから、this.meth はインスタンスメソッドにナルト思うのだけど…。

ごめん。勘違いしてた。

function Class(){
  this.closure = (function(that){
    var count;
    return function(){
      that.meth();
    })(this);
  };

  this.meth = function () { ; }
}

# サンプルだからいいけど、"class" は予約後だから注意した方がいいかと。

>>393
書き方が悪くてすみません、インスタンスメソッドを呼び出したかったのです。

>>392
ありがとうございます。
思う通りの動作をするようになりました。

ちなみに、別の解法はありますか？

>>393
ありがとうございます。
よりソースがスマートになった気がします！

>>397
もし、コンストラクタ内で共有させたいプライベート変数がなければ、prototype の方が良い気がする。

function Hoge () {
  this.closure = (function(that){
    var count;
    return function(){
      that.meth();
    })(this);
  };
}
Hoge.prototype.meth = function () { ; };

function Class() {
　　this.closure = (function() {
　　　　var count;
　　　　return function() {
　　　　　this.meth();
　　　　};
　　}());

　　this.meth = function() { alert('called'); };
}
はい？

以下のようにすると IE6 でだけ表示が消えるのですが何故なんでしょうか？
---------------------
<html>
<body>
<script>

window.onload = function(){
　var div = document.createElement('div');
　document.body.appendChild(div);
　
　div.style.position = 'absolute';
　div.innerHTML = [
　　'<div style="position:relative; top:0; left:0;">',
　　　'<table><tbody><tr><td>',
　　　　'<div style="position:absolute; top:20px; left:0;">■■■■■■</div>',
　　　'</td></tr></tbody></table>',
　　'</div>'
　].join('');
　
　setTimeout(function(){
　　div.style.top = '1px';
　　div.style.left = '1px';
　}, 100);
};

</script>
</body>
</html>
---------------------
absolute の直下に relative があったり変ですが、実際には色々書かれてて、
再現可能な最小に絞りに絞った結果こんな感じになりました。

この前オートコンプリートの話出ててふと思い出した
ttp://labs.yaneu.com/20090307/test.html
当時はIMEだったから普通に動いたが
今Google日本語入力いれてるからうまく動作しなかったりする
JavaScriptの補完候補よりGoogle日本語入力の補完候補が優先されてる
こういう場合ってどうするんだろうね

navitimeとかね。ぐぐーるの使うと埋まっているのに空白と認識されるから、
jsのだけ使うようにした。

javascriptで正確なベンチマークを取る方法おしえて

DateオブジェクトのgetTimeかgetMillisecondsあたりのメソッド使う

>>400
table周りのinnerHTMLがreadonlyなのと関係あるのだろうか。
こうしたら動いた。

var div = document.createElement('div');
document.body.appendChild(div);

div.style.position = 'absolute';

var div2 = document.createElement("div");
div2.style.position = 'relative';
div2.style.top = 0;
div2.style.left = 0;
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");

div.appendChild(table);
table.appendChild(tbody);
tbody.appendChild(tr);
tr.appendChild(td);
td.innerHTML = '<div style="position:absolute; top:20px; left:0;border:1px solid #ff0000;" id="CCC">■■■■■■<' + '/div>';

setTimeout(function(){
    div.style.top = '1px';
    div.style.left = '1px';
}, 100);

ごめんなさい。

border:1px solid #ff0000;" id="CCC"

は無視して。

div2 が使われてないような。

JSの質問じゃないかもしれないけどJSで使えるgetBoundingClientRectみたいなものってありませんか？

>>408は
誤：JSで使える
正：テキストノード
です。すいません

□商品1 数量 [　　　　]

□→チェックボックス
[　　]→テキストフォーム

こんな感じのフォームで商品名にチェックを入れて数量に数字を入れると
合計金額を計算できるようにしたいのですが、数量がリストメニューだと

var shoukei = price1 * document.form1.volume1 .selectedIndex;

このように書いて動くのですが、これをテキストフォームに入力した
値で計算するにはどう書いたらいいんでしょうか？

試しに
var shoukei = price1 * document.form1.volume1.value;
としてみたのですが計算できませんでした。
チェックボックスのvalueには金額が入っています。

自己レスです。
document.getElementById("volume1").value
にしたらいけました。

Ajaxで商品パネルを作りたいです
・全部でアイテムが30個ある（データベースから引き出して名前を表示）
・１ページあたり10個表示
・次へ／前へをクリックして、次の10個／前の10個を（dbアクセスして）表示する
・ページ全体の更新はしない
こんな感じです。

凄くありがちだと思うんですが、どういうキーワードで検索したら良いのかわからず
困っています
すみませんが教えてください
jqueryを使うのだと嬉しいです（jqueryの勉強もしたいので）
よろしくお願いします。

とりあえず1個1個やりたい事を検索してけば？
Ajax ページ移動
とかさ
ajax 動的 コンテンツ
とか

>>412
クライアント側でやることは
・ページインデックスを保持
・次へ／前へ をクリックすると、ページインデックスの値を更新し、サーバーにクエリを投げる
・返ってきたデータからコンテンツを生成し、現在のコンテンツと差し替える
という感じかな

jquery なら load メソッド使えば簡単に出来そうだな

ttp://tanpopodan.web.fc2.com/i/G.txt
基本文はperlなのですが、JAVAでアラートを表示させています
ここにフォームの入力した文字の一文字目が0だった場合にエラーを出したいのですが、どうすればいいでしょうか？
（00100 といった様に入力されるのを防ぎたい）

コード見てないけど「正規表現」でぐぐれ。
整数だけが入力されることが前提ならこんな手も使える：

var p = ... // 入力される文字列
if (p != "" + +p) {
//エラー
}

function KinCheck(MC){
-　　if (MC.value == '' || MC.value == '0'){alert ("金額が入力されていません。");return false;}
-　　else if( MC.value.match(/[^0-9]/) ){alert ("数字以外の文字は入力できません。");return false;}
-　　else{return true;}
+　　if (MC.value && /^[1-9]\d*$/.test(MC.value) ){
+　　　　alert("金額がおかしゅいです");
+　　}
}

function KinCheck(MC){
-　　if (MC.value == '' || MC.value == '0'){alert ("金額が入力されていません。");return false;}
-　　else if( MC.value.match(/[^0-9]/) ){alert ("数字以外の文字は入力できません。");return false;}
-　　else{return true;}
+　　if (MC.value && /^[1-9]\d*$/.test(MC.value) ){
+　　　　alert("金額がおかしゅいです");
+　　　　return false;
+　　}
+　　return true;
}
bool返すの忘れてた

roop中にある変数定義「b = a;」について質問なのですが

a,bは数値リストが入ります。



function test(list){
for (k = 1; k < list.length; k++) {
var a = rotate(list, 1);
if (k == 2) {
var b = a;
}
}
return b
}

この場合、ループ２回目のbの値を返したいのですが、
（リスト長の最後までリピートが必要です）
途中、rotateという（数値を一個づつずらす）関数が入っています。
var bは、二回目以降(つまりk=2以外）のリピートでも、勝手にrotateしてしまいます。

k=2だけを取り出したいのですが、どうすればよいでしょうか？

var a;
for (k = 1; k < list.length; k++) {
a = rotate(list,1);
if (k==2) {
break;
}
}
return a;

2回目以降rotateしなくていいならこれでいい

419は要点簡略化で単純に(k==2)としていますが、
ここには別の計算式が入ります。
リストの全てのrotat関数値を試す事が要諦なのですが。。

aもbも配列の参照でしかないからでしょ
配列のコピーでググればいいんでない

こんな感じです

function test(list){
for (k = 1; k < list.length; k++) {
var a = rotate(list, 1);
if (a[0] > b[0]) {
var b = a;
}
}
return b
}

すなわち、全てのローテーションのうち、
リストの一個目の数値が一番小さいものを取り出したいのです。

だから>>422
それにその条件だと「一番小さいもの」を取り出すことはできない

あら失礼
ｘ(a[0] > b[0])
○(a[0] < b[0])

>>422
そうですね。ググって見ます。ありがとう

>>422
ありがとうございました。解決しました。

質問連投で失礼しますが、
文字列→数値変換の関数で
Number(),parseInt(),eval()これらは単数字のようです。
リストをそのまま文字列→数値列変換したいのですが良い方法ありますか？

forで回して数値化する関数を作る。
あと配列な。

>>427
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/map

>>429
map ってIEで使えないんじゃなかったっけ？

使えないよ
だからそういう場合に備えてご丁寧にprototypeに追加するコードまで書いてある

>>428
ありがとうございました。解決しました。

質問です。よろしくお願いします。objの関数で出た結果をobj2の中で反映させたいのですが、
方法がよく分かりません。

--------------------------------------------------
obj : function() {
var element = document.getElementsByTagName('a');

for (var i = 0; i < element.length; i++) {
element[i].onmouseover = (function (n) {
return function() {
alert(n); ←この結果を
}
})(i);
}
}

obj2 : function() {
alert(n); ←ここに反映させたい
}
--------------------------------------------------

もうひとつお願いします。el.addEventListener('mouseover', this.func, false)や
el.attachEvent('onmouseover', this.func)を使ってfunc : function(){ ? };の部分に
上記のようなクロージャーを入れたいのですがどうやればいいでしょうか？よろしくお願いします。

>>433
なにやりたいかようわからん

var obj = {
method1: function(){...},
method2: function(){...},
...
};
という構造だと考えると、
method1 では n が elements.length + 1 回現れるわけだが、
method2 ではどの n を反映させたいの？

下は上でもやってる通り
el.addEventListener('mouseover', (function(){...})(), false)
みたいなことがやりたいってこと？

>>433
別に配列作っておいてそれを使うのは駄目なの？

keydown等のキーボードイベント取得時、
マウスの位置座標を取得することは可能ですか？

試せよ

<a href="javascript:void(0)" onclick='func("hoge"); return false;'>
こんなリンクをjsで作るにはどう書けばいいですか？

>>438
ほい
document.write('<a href="javascript:void(0)" onclick='func("hoge"); return false;'>');

素人考えかもしれんが独禁法に抵触するような気がするな

すまん上のは誤爆だ

>>440
document.write()が独禁法違反……NAOシフト思い出してワロタｗ

素人考えなんだから許してやれよ

リンクにjavascript:void(0)って書くのと、#ってするの
どっちが好ましいと思いますか？

ステータスバーにjavascript:void(0)って出るのがマヌケだから#かな

>>437
やりかたが分からないのに試せ言われても困っちゃう

そんなら取得の仕方を教えてくださいっていえばいいだろ

リンクでもないただのトリガーをaで書くのがまぬけ

>>446

ヒント
・addEventListener / attatchEvent
・document.createElement

>>444
#だと対策しないとページの先頭にとんじゃうから気をつけろよ
理想を言えばonclickかaddEventListener

>>444
どういう使いかたをするかにもよる
現在ではjavascript:スキームを使ったほうがよい場面は少ないので、＃でいいと思う
ページ内遷移させたくないならpreventDefault()やreturnValueの設定を忘れずに

JavaScript無効時に意味を持たないアンカーはJavaScript側で生成・挿入したほうが無難だったり
a要素ライクな体裁を持たせたいがIE6対応が必要な場合にはa要素を使うしかなかったり（CSSの疑似クラス未対応問題）
単なるボタンとして使う場合は、できればWAI-ARIAのroleを持たせてやったほうがよかったり
WCAG 2.0のシングルA対応するならもっと色々考えることがあったり

そのへん全然ワカンネ、というなら最初にいった結論に戻るけど#一択が無難じゃないのかな

いまさらIE6対応は特殊技能の域だろ

:hoverとか@mediaとかのスタイルをjavascriptで追加や削除するにはどうすればいいですか？

document.styleSheetsを使う

style属性で疑似クラスを表現する方法を策定中という記事を読んだことがあるけど
あれからどうなったんだろうな

どうもありがとうございますm(_ _)m

>>454
http://www.w3.org/TR/2010/CR-css-style-attr-20101012/
履歴を追えば分かるが、2002年でストップしていたものをHTML5が引っ張り出したもの
その際、疑似クラスの部分はきれいさっぱり削ぎ落とした

<form action="#">
　　<select>
　　　　<option value="">▼選択してください</option>
　　　　<option value="apple">りんご</option>
　　　　<option value="banana">バナナ</option>
　　</select>
</form>

formタグ内を操作せずに、selectタグに
「onchange="alert(this.options[this.options.selectedIndex].text)"」を追加するには
どう記述すればよいでしょうか？
formタグはプログラムで自動生成されるので、そちらを弄ることができないのです。

サンプルでは省略しましたが、name要素はあります。

nameか・・・nameは複数につけられるからなぁ・・・
対象となるエレメントをXPathなりquerySelectorAllで取得して
それにaddEventListenerとかすればいいんでないの？

HTMLにはname要素というものはないと思うが。要素とかそういう用語が
分かってなくてDOM操作を書くのは無理な気もするけど…

document.forms.名前Ａ.elements.名前Ｂ.onchange = function() {
alert(this.options[this.selectedIndex].text); };

かなあ。試してないけど。あと関数の中身のコードは適当に推測で
変えたけど。そして名前Ａはform要素のname属性の値、
名前Ｂはselect要素のname属性の値。属性とは何か分からないなら
あきらめた方がいいと思う。あと、上記のコードを実行すると
form要素の子要素の属性を変更しているので、それが「formタグ内を
操作している」ことになるというのならやっぱりあきらめた方が
いいと思う。

下記のようにしましたが、反応してくれないです。。
ちなみにIE8です。

<SCRIPT type="text/javascript">
document.forms.form.elements.selecter.onchange = function() {
alert(this.options[this.selectedIndex].text); };

</SCRIPT>

<form name="form" action="#">
<select name="selecter">
<option value="">▼選択してください</option>
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
</select>
</form>

>>461
そりゃDOMツリーが完成してないからじゃないか？
alert(document.forms.form);

ってしてもundefinedになるでしょ。
script要素を後ろに持ってくるか、DOMContentLoadedを待とう。

SCRIPTをFORMの後ろにしたら動きました！！

でも本番環境に適用したら反応しないので調べたら、
name="form[blog]"のように[]を含んでいるのが邪魔してるようです。
よく見たらID属性もあったのですが、そちらは[]がありません。
ID属性で指定する方法も教えていただけませんか？

こんにちは、ちょっと質問があります。

元々PHPでWEBサイトを作っていました。
JavaScriptのエフェクトが気に入ったのでJavaScriptを勉強しました。

すると、PHPでもJavaScriptでもどちらでも可能な部分が出てきました。
例えばフォームの入力内容をチェックするコードなどです。

そゆときはどちらでやればいいのでしょうか。悩んでます。

どっちででもするもんじゃないの？Javascript側で即チェックするのはユーザビリティのため
PHP側で送信時にチェックするのはデータを安全に受け取るため

>>464
両方でやるべき。
手間とサーバーの負荷を考えるとJavaScriptだが、
JavaScriptがオフの環境もあるし、
パスワードなんかはJavaScriptでは無理。
どうしても二者択一ならPHPだが。

>>463
querySelectorでもgetElementByIdでも好きなの使えばいいけど、
いずれにせよ、DOMについてちょっと知っておいたほうがいいと思うよ。

PHP側でチェックしないというのはありえない
JavaScriptでのチェックをすり抜ける方法はあるからな

getElementByIdでうまくいきました。

実際はselectタグじゃなくてinputタグで行っていたのですが、
キー入力しただけでは反応しなくて、
フォーカスが移動しないと、onchangeは働かないのですね。
リアルタイムな変更に対応するにはどうすればいいですか？

document.styleSheetsって、確かブラウザ依存する定義だったよな

>>469
見張れ

>>469
漢字変換をしないならonkeyupで。するのなら定期的に中身を
取り出して前と変化したかどうか調べるしかない(ブラウザに
よって違うので、主要なブラウザどれでも動くとなるとそうなる)。

>>470
WebKitだとlink要素で指定したAlternate Stylesheetsが含まれない
xml-stylesheets命令ならOK

AEやOEのような合字やアクサン付きのアルファベット等を、
その元となった文字とマッチングさせたい（文字列比較で同一の文字として扱いたい）のですが、
一覧を自前で保持する他に、組み込み関数等を用いた適当な方法はあるでしょうか。
ブラウザ/JavaScriptエンジン依存でも構いません。
Google Chromeのページ内検索だと、欧文合字どころか〼（ます）とか〆（しめ）とかまで引っかかるので
何かうまい方法があるのかと気になって……。

望む結果を得たいなら、やはり自前しかないのでは。

運営しているサイトのユーザーさん向けにウィジェットを作ろうと思っているんですが、
こういうコードを貼りつけてもらう系のって、やっぱりjqueryとかのライブラリ使わずに
生javascript直書きで実装した方がよいでしょうか？

例えばjquery使って実装したものをユーザーさんが自分のサイトに貼り付けたとき、
そのサイトでprototypeとかゴリゴリ使っていたら衝突してしまったりするのではないかなと思いまして。

ご意見いただけると嬉しいです。

そうだね。namespaseも一つにしてできるだけ衝突する可能性を敷く苦したほうがいい

作られた変数を一覧するようなことはどうすればできますか？firebugとかそういうのを使うんですか？

>>478
たどれるスコープ内にあるものなら、
firebugがなくても、自分でループ書いて掘ることも出来よう。
逆に、たどれないスコープにあるものだったら、
firebugがあっても無理なんじゃないかね。

例えば

var a = 1;

って書いたら、window.aとしてたどれるけど、

(function(){
    var a = 1;
})();

って書いたら、手が届かないじゃん。

どうもありがとうございます
無名関数の外にあるものを取得する場合はこんな感じ？ですか？
javascript:(function(a){for(var i in window){a+=i+" : "}alert(a);})("");
もともとあるwindowのプロパティは拾わないようにするにはどうすればいいんでしょうか

>>479
Firebugのデバッガ使えばそのaも見ることできるよ

>>480
Firefoxなら 'propName' in window.__proto__ で元々持ってるプロパティを選別することができると思う
まとめると多分こんな感じ
javascript:(function(a){for(var i in window){if (!(i in window.__proto__))a+=i+" : "}alert(a);})("");

作ったものだけ表示させることができました
どうもありがとうございます

>>479
ステップ実行するかconsole.log(a)で見れるよ

初歩的な質問なんですが、お願いします。

<div class="hoge">
　<p>
　<h2>
　　<a href="http://hogehoge">リンクテキスト</a>
　</h2>
　</p>
</div>


という部分から、「リンクテキスト」という文字列を取り出したいんですけど、
何故か中々うまく行きません。

どういった方法を取るのが良いのでしょうか・・・アドバイス頂けないでしょうか

>>485
a要素のinnerHTMLでもfirstChild.nodeValueでもchildNodes[0].nodeValueでもでも。

なにをどうしたらどうなるだろうと思ってどうやったらどううまくいかなかったのか
を具体的に。

>>485
aタグにIDをつけたらどうでしょうか？

<a href="http://hogehoge" id="test">リンクテキスト</a>

<script type="text/javascript">
alert(document.getElementById('test'));
</script>

>>487
それじゃHTMLAnchorElementでtoString()実行された結果の[object HTMLAnchorElement]しか表示されんだろ
（IE6やIE7は除く）

>>485
>>486 の方法に加えてtextContent（IE は innerText）も選択肢に含められると思う

document.querySelector('div.hoge > p > h2 > a').textContent
pの中にh2とか馬鹿じゃね

>>488
すいません　間違いました
alert(document.getElementById('test').href);

これでどうでしょう？

>>488
文字列だったら
alert(document.getElementById('test').innerHTML);
ですね

例えば(C)マークを表示するつもりで
element.appendChild(document.createTextNode("©"));
とすると、実際にはelementの中身は「&copy;」になってしまいます。
本来の目的どおり「©」をappendChildするにはどうやればよいのでしょうか？

まさかinnerHTMLで確認するなんて間抜けなことをしてないだろうな

>>492
あれ？変換された？
©→&copy;
&copy;→&amp;copy;
です。

テキストノードなんだからエスケープなんかいらない
そのまま書け

>>495
明快な回答ありがとうございます。

では改めて質問なんですが、
こういうキーボードから直接入力できない文字ってどうやって入力するんですか？
いちいちコピペ？

os 依存のネタはそれ用の板で聞けよ

\uHHHH

SJISならわかるけどUnicodeでos依存もねーよｗ

あれか、漢字を直接入力できるキーボード使ってるのか、見てみたいぜ

>>500
http://googlejapan.blogspot.com/2010/04/google.html

>>501
配置覚えられるかｗｗｗと思ったが四月馬鹿ネタなのか
ネタとして買ってみたい気持ちでもあるが

>>486>>487>>488>>489>>490>>491
ありがとうございます。漠然としすぎました。

上記（>>485）のような構造（これが繰り返しある）をしているサイトのGreasemonkeyを作ろうと思っていて、
ただ、取得したいa要素にidがついておらず、またdiv、p、h2が別の場所にも散在しているため、

「hogeクラスのdivの中にある、最初のa要素（本当はhogeの中にa要素は複数ある）」のテキスト部分を
取り出そうと思ってやってみたのですが、四苦八苦してしまった、という感じです。

var hogelist = document.getElementsByClassName('hoge');
　for (var i = 0; i < hogelist.length; i++) {

とした後の、テキスト取得の部分がうまくいかないです。

hogelist[i].childNodesだったりitemだったり色々組み合わせて試してみたんですが、
動かなかったり、nullやUndefinedが返ってきたり・・・

たぶん初歩的な部分が分かってないんだと思うんですが、引き続きアドバイスお願いしたいです

とりあえずFirebugsのコンソール使ってみたら？

>>503

var x = document.getElementsByClassName("hoge");
for(var i = 0; i < x.length; i++){
　　var a = x[i].getElementsByTagName("a");
　　for(var j = 0; j < a.length; j++){
　　　　var t = a[j].firstChild.nodeValue;
　　　　if(t.nodeType == 3){
　　　　　　alert(t.nodeValue);
　　　　}
　　}
}

今からJava勉強すんのってどうよ

Javaスレで聞くのが適切だと思います

>>501
代書屋さんにある和文タイプみたいだ。

>>504
試してみます。

>>505
動かないです；；

>>509
全角スペースだからちゃんと半角に直してね

Firefox は \u3000 を White Space と解釈できるはずなんだが…。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/7_Lexical_Conventions.html#section-7.2

>>509 何で動かないのか書かないと「ああそうですか」で終わっちゃうわけで

>>510
本当に丁寧にありがとうございます。
ただ、何度やっても、Undefinedしか表示されないです；；

>>513
nodeType == 3（テキストノード）のときしかalert出ないからUndefinedは出ないはずなんだけど

>>513
ミスってたすまん

-　　　var t = a[j].firstChild.nodeValue;
+　　　var t = a[j].firstChild;

でもt.nodeTypeがnullになるからUndefinedにはならないんだよね、ちゃんと更新は反映されてるの？

>>515
ありがとうございます。書き換えてみると、今までで一番近い挙動になりました。

ただ、今回のalertは、hoge 内のa要素すべてのテキストを順番にalertするような挙動のようです。
実際には、hoge 内には、4つのa要素があり、今回のを動かしてみると、4つのa要素のテキストが順番にalertされました。

自分が取得したいのは、2番目のa要素のテキストなのですが（1つめのa要素を見逃してました）、
>>505のalert部分を、

alert(t[1].nodeValue);

とするのではいけないのでしょうか・・・？（ちなみにコレにするとalert自体がされなくなりましたorz

ちなみに本来のHTMLはこんな感じです（最初から省略しなきゃ良かったorz

<div class="hoge">
　<p>
　　<a href="http://hogehoge0">リンクテキスト0</a>
　</p>
　<h2>
　　<a href="http://hogehoge1">リンクテキスト1</a> // これのテキスト部分を取得したい
　</h2>
　<p>
　<span>
　　<a href="http://hogehoge2">リンクテキスト2</a>
　</span>
　　<a href="http://hogehoge3">リンクテキスト3</a>
　</p>
</div>

Firefoxならこれでいいんじゃない

Array.forEach(
　document.getElementsByClassName('hoge'),
　function (div) {
　　var link = div.getElementsByTagName('a')[1];
　　var text = link.textContent;
　　alert(text);
　});

>>518
ありがとうございます！無事望んだ挙動が得られました。

アドバイス頂いた皆様ありがとうございます＞＜

forEachってforループと役割が違う？書き方が違うだけ？

・ループを途中で止められない（everyかsomeなら止められる）
・ループごとにスコープが生成される（>>327はそんな感じ）

疎な配列で番号をちゃんと飛ばす

>>521
無限ループと同じでbreakすれば止められるよね

たぶんbreakじゃなくthrowな

は？

forEachはbreakできないよ

javascriptのforEach文ってfor (var i in hoge)でしょ？

<script>
var hoge = [1,4,1,4,2,1,3,5,6];
for (var i in hoge) {
document.write(hoge[i]+"<br>");
if (hoge[i] == 3) {
break;
}
}
</script>

>>518からの流れだよ
>>527はfor-in文。JSにはforEach文なんてないよ。他の言語と混同してる

Firefoxにはfor each-in文というのがあるけどね

for...inやfor each...inは配列に使っちゃ駄目ってmdcに書いてあった
あとforEachは
ttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach#Compatibility
と同等ってmdcに

ECMAScript 5で標準化されてIE9がやっと最後に実装するというのに
いまだに「JSにはforEach文なんてない」などとぬかすか

>>530 それはArray.prototype.forEach（forEachメソッド）でしょ？

流れを見ずに書き込んだ
スマンコ

>>528
こういう配列やオブジェクトの要素数すべてに対して
ループを行うものをforeach文というんですよ
JavaScriptの場合いくつかあるけど
このfor-inもforeach文の1つ

発端の>>520を確認してほしいんだが
なんで「forEach」から「多言語で言うforeach文」って話になるんだ

520がそういう意図で聞いたというのなら、>>529だね

>>533
その認識は危険
JSのfor-inはプロトタイプを辿るから他言語のforeachと違う

>>535に加え、for-inの列挙順は実装依存
以前のバージョンのOperaだったか、後方から列挙していた

for-inだけじゃなくて全てにおいて実装依存では
このスレでJavaScriptエンジンつくろうず
言語はC#で頼む

つSpiderMonkey

>>537
それはさすがに頭が悪い

ほんと池沼みたいな奴ばっかだな

function getText(n){
var strings = [];
getStrings(n, strings);
return strings.join("");

function getStrings(n, strings) {
if (n.nodeType == 3)
strings.push(n.data);
else if (n.nodeType == 1) {
for(var m = n.firstChild; m != null; m = m.nextSibling) {
getStrings(m, strings);
}
}
}
}

このコードが動きません．教科書のサンプル写しました．
だれか教えてくれませんか

>>541
あまり良いコードとは思えないけど、動くでしょ。

else if (n.nodeType == 1) { のところがうまく動いてないっぽくて．．．

まさかdocumentを与えてないよな

>>544

すみません．その通りでした．．．．

ありがとうございました

<SCRIPT LANGUAGE="JavaScript">
<!--
function Rogin(){
window.open("rogin.html","rogin","");
if(!$count2){$count++;$count2++;}
else if($count2){window.alert('本日は既にログイン済みです！');}
}
}
// -->
</SCRIPT>
<input type=submit value=ログイン onClick=\"return checkRogin()\">";

Perlで作成しているページのログインボタンについてなのですが
$countは累計ログイン数、$count2は今日ログインしたかどうかの記録です
上のようにしてみたところ上手くいかないのですが、サブルーチン内でcountを増やす処理ってどうすればよいのでしょうか？

>>546
関数の外で変数宣言すれば外でも値が保持される。
var $count;
でもページを再表示したら保持されないよ。保持したければcookieとかサーバーサイドで保存しないと。

余談ですがifの条件でcount2のfalseを評価してるからelseにはif要らない。この場合。
あと、ログインのスペルは log in だよ。
あと、JSで変数に$は要らないよ。あってもいいけど

あと、JavaScript で未定義の変数をインクリメントしてもうまくいかないよ。
最初に数値を代入しておかないと。

>>546
Perl側の処理とJavaScript側の処理を混同してるね。
Perlで生成したHTMLにあるJavaScriptから、Perlスクリプト内の変数に直接アクセスすることはできないよ。
フォームを使ってPerlスクリプトにパラメータをPOSTするか、
XMLHttpRequestでPerlスクリプトにアクセスできるようなJavaScriptをHTMLに入れておく。

sub LOGINCHECK{
if($count2){print << " -----END-----";
<SCRIPT language="JavaScript">
function checkLogin(){
window.open("rogin.html","rogin","");
if(!count2){
var count = $count + 1;
var count2 = 1;
document.all.subject.value=count;
document.all.subject.value=count2;
document.login.submit();
}if(count2){window.alert('本日は既にログイン済みです！');return false;} }
<form method="post" action="login.cgi" name="login">
<input type="hidden" name="count">
<input type="hidden" name="count2">
<input type=submit value="ログイン" onClick="return checkLogin()"></td></tr>
</form>
</script>
-----END-----
}else{print "";}
my $count = $in{'count'};
my $count2 = $in{'count2'};}
LoginとRoginのミスはお恥ずかしい・・・
PERLでの記述になっていますが上記のように作りました
Java内でPOSTで送信した値をJava終了時に取得させてみたところやはり値の取得ができていません
POSTの使い方間違ってますかね？

何を参考にしてるか知らないが、捨てて別のを見た方が早いぞ多分

>>550
なんつーか大混乱なソースだな。PERLとJSの変数を混同してるのって初めて見たよ。
まずはJS無しでPOSTの処理するサンプルでもいじって動作を理解したほうがいい。
サーバーサイド・クライアントサイドの理解をしっかり。がんばってね。
(ちなみにJavaとJavaScriptは別物で両方メジャーなのでよろしく)

というか、そもそも鯖側だけでやるような処理でしょ。
WebProg板に行けばいいんじゃないの？

まずjsとperlを分離して、すごく醜い。
そして、document.allはIEでしか使えない。使わないでくれ
> document.all.subject.value=count;
> document.all.subject.value=count2;
は
document.login.count = count;
document.login.count2 = count2;
の間違い（だと思う）
input[type=submit]にonclickつけても処理は中止できない

簡単に手直しすると
<script type="text/javascript">
　　function checkLogin(){
　　　　window.open("rogin.html","rogin","");
　　　　if(!count2){
　　　　　　var count = $count + 1;
　　　　　　var count2 = 1;
　　　　　　document.login.count = count;
　　　　　　document.login.count2 = count2;
　　　　　　return true;
　　　　}else if(count2){
　　　　　　alert('本日は既にログイン済みです！');
　　　　　　return false;
　　　　}
　　}
</script>
<form method="post" action="login.cgi" name="login" onsubmit="checkLogin">
<input type="hidden" name="count">
<input type="hidden" name="count2">
<input type="submit" value="ログイン">
</form>

教科書の詳細を

document.all は HTML5 に取り込まれたので、IE以外でも使用することは出来る。
ただし、undefined を返す特殊仕様でレガシーコードへの対応が目的。あえて、document.all を使う意味はない。

どんな教科書使ってるのか晒して欲しい

紙媒体だと書ける行数に限りがあるから詰め込もうとするとどうしてもスパゲッティになっちゃうんだよね・・・
CDがついてくるような本で、本の内容そのままのコードがCDに入ってるものは論外だけど

要点を押さえつつ簡潔に書くには知識とセンスと経験がいるからな

javascriptの勉強はまずサイ本一冊読み切ることに全力を注げ

さすがに2ヶ月程度勉強しただけでは無理でしたか・・・
本はPerlの勉強には
http://www.amazon.co.jp/3%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%81%A7%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E5%AD%A6%E3%81%B6-JavaScript
%E5%85%A5%E9%96%80-%E4%BB%8A%E3%81%99%E3%81%90%E4%BD%BF%E3%81%88%E3%82%8B%E3%81%8B%E3%82%93%E3%81%9F%E3%82%93%E3%83%97%E3%83%A9%E3%82%B9
-%E5%A4%A7%E6%B4%A5-%E7%9C%9F/dp/4774142786/ref=sr_1_15?s=books&ie=UTF8&qid=1287933405&sr=1-15
を使いPerlの勉強には
http://www.amazon.co.jp/10%E6%97%A5%E3%81%A7%E3%81%8A%E3%81%BC%E3%81%88%E3%82%8B-Perl-CGI-%E5%85%A5%E9%96%80%E6%95%99%E5%AE%A4-10%E6%97%
A5%E3%81%A7%E3%81%8A%E3%81%BC%E3%81%88%E3%82%8B%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4798109703/ref=sr_1_10?ie=UTF8&qid=1287933353&sr=8-10
を使いました

これはｗｗｗ

プログラム関係はO'Reillyの本が一番無難でまとも
英語版を訳してるものが多いから質が高い
正直、和書はなんちゃってプログラマー（ライターを業にしてる人）が書いた本が量産されてるので注意
ある程度書けるようになったら”プログラミング作法”も読むといい

>>561
改行なしで紹介してくれると有り難い。

Amazon.co.jp： 3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス): 大津 真: 本
http://www.amazon.co.jp/dp/4774142786
Amazon.co.jp： 10日でおぼえる Perl/CGI 入門教室 第2版 (10日でおぼえるシリーズ): 高橋 大吾: 本
http://www.amazon.co.jp/dp/4798109703

>>563
オライリー本は確かに良書だが、初心者が読むと挫折するような気がする。
JavaScript初心者 + 他の言語経験者なら、お勧めできるのだが…。

Amazon.co.jp： JavaScript 第5版: David Flanagan, 村上 列: 本
http://www.amazon.co.jp/dp/4873113296
Amazon.co.jp： JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス: Douglas Crockford, 水野 貴明: 本
http://www.amazon.co.jp/dp/4873113911/

good partsは信者がいてうっとうしいかもな

未読だが、『初めてのJavaScript 第2版』は初心者向きかもしれない。

Amazon.co.jp： 初めてのJavaScript 第2版: Shelley Powers, 武舎 広幸, 武舎 るみ: 本
http://www.amazon.co.jp/dp/487311425X/

Googleブックスで第一版を軽く読んでみたが、かなり丁寧に解説されている。
ただ、ねえ。丁寧すぎると読むのが面倒になったり用語がわからなくなって四苦八苦したりすることもあるので難しいところではある。
逆に説明が平易だと気をつけるべき点に触れられていないために誤解が生じる可能性があるのだが…。
何にしても根気が必要だと思う。

初めてのJavaScript - Google ブックス
http://books.google.co.jp/books?id=om2V2n9zw0oC&printsec=frontcover&dq=%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEJavaScript&hl=ja&ei=eFbETMnjNIO0vgPazoy1CA&sa=X&oi=book_result&ct=result&resnum=1&ved=0CDkQ6AEwAA#v=onepage&q&f=false

# P22 で「Unicodeエスケープシーケンスに対応していないブラウザもあるので使わない方がよい」と書かれているのがやや気になるが、第二版では修正されているだろう、多分。

初心者にオライリー本薦めるのはどうかしてると思うわ

深く理解している人ほどオライリー本を勧める傾向があるような…。(なんとなくだけど)

オライリーのJavascript 第5版はいいと思うけどサンプル少ない

オライリー本以外でお勧めって何があるんだろう？

オライリーは必要に応じて読む参考書であって
必要なことを必要なだけ教える教科書ではない

『JavaScript: The Good Parts』は参考書だと思うが、『JavaScript 第5版』は教科書的な感覚があるな。
概ね、ES3 ( http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ ), DOM ( http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/object-index.html ) に準じた解説だと思う。
Crockford氏の著書は明らかに独特の思想に基づいた説明だが…。(ES3 違反だからお勧めできない、という論調ではない)

オライリー本以外のお勧めは思いつかなかった。(最近は書籍よりも仕様を読むことが多いからなあ)
というか、皆(俺も含めて)オライリー本の話しかしないのなｗ
結局、お勧めできる入門書はないってことなのか…。

誤解を招く書き方だったので補足。

> Crockford氏の著書は明らかに独特の思想に基づいた説明だが…。(ES3 違反だからお勧めできない、という論調ではない)
Crockford氏は ES3 に適合した上で独特の思想を持っていると思う。
思想の是非はともかく、明らかに間違ったコードは書かない人なので同書がお勧めされるのも理解できる。
全てをその思想に委ねると信者と呼ばれてしまうかもしれないが…。

# ES3 を読めるようになると、Crockford氏がお勧めする理由が思想なのか ES3 に適合しているからなのか判断できて面白い。

くろちゃんは動画で見るといいさ

くろちゃんの本は二度おいしい
初心者はあれを読んで感心し、中級者はあれにつっこみを入れる

サイ本を勧める人が多いのは、体系的な記述があれしかないから
所々微妙な部分もあるが、それを訂正しつつ読めば経験値２割増し

基本的なことならMDCで十分

>>550
今すぐ使える簡単プラスがこうなったわけか

PerlとJavaはわければ合ってそうだしくっつけ方が間違ってるぞ

My UNIX Series の久野先生の本は判りやすい。
自分はこれで勉強した。

UNIX seriesのは昔から評判良いよね
見たことないんで、どんな感じか知りたい

>>578
これかな？
今から新品で手に入れるのは難しそうだね…。

Amazon.co.jp： 入門 JavaScript (My UNIX Series): 久野 靖: 本
http://www.amazon.co.jp/dp/4756138713

見本になりそうなオブジェクト指向型のjavascriptのソースコードがあったら教えてください。

>>580
これこれ。今となっては内容がちょっと古いけど。

>>579
ライブラリに頼らないDOM操作の方法を詳しく解説している。
他にも、初めての人向けに文法や標準オブジェクトの解説、
果てはLiveConnectでJavaと連携する話まで載っている。
で、小さくてそんなに厚くない。

>>581
function Mihon(){
    this.a = 0;
}
Mihon.prototype = {
    increment : function(){
        this.a++;
    }
};

var m = new Mihon();
m.add();

こんなんでいいですか…///

例は短すぎても長すぎても飲み込みにくい

ほとんどの例はオブジェクト指向ではなくただの構造体だしな

addが無い件についてｗ

>>581
var p = Object.create(Object.prototype, {
  a: {
    value: 0,
  },
  add: {
    get: function() { return this.a; },
    set: function(v) { this.a += v; },
    enumerable: false,
    configurable: false
  }
});

var m = Object.create(p);
m.a; // 0
m.add = 10;
m.a // 10;

>>587
これはないな

質問です。お願いします。xhtmlの<div>に直接書いていたeventハンドラを外部に分離しました。

JavaScript
------------------------------
function Test() {
var n = document.getElementsByTagName('div')[0];

n.onmouseover = function() {
var s = event.target||event.srcElement;
var k = s.tagName;
alert(k);
}
}

$(function() {
Test();
});
------------------------------

xhtml
------------------------------
<div>
<p><img src="001.png" width="128" height="128" /></p>
</div>
------------------------------

n.onmouseover後のfunction()ですが、FireFoxで動きません。
function()をfunction(event)にするとFireFoxで動くようになりますが、IEで動かなくなります。
FireFox、IE両方動くようにするにはどういう記述にしたらいいでしょうか？

マルチ乙
何回目か知らんがいいかげんにした方がいいぞ

いつだったかマルチ指摘したら、「今度はマルチと認識されないように質問します」ってレスして去っていった質問者がいたな…。

「別の質問をしているつもりでした」と詫びるんだよな

マルチだけど時間もないしさ回りくどい回答ばっかもらっててもしょーがないんだよね。

以後、スルーで(爆笑)

できちゃった（爆笑）

function Test() {
var d = document.getElementsByTagName('div');

for (var i = 0; i < d.length; i++) {
try {
d[i].addEventListener('mouseover', function(event) {
var t = event.target||event.srcElement;
var n = t.tagName;

alert(n);
}, false);
} catch (e) {
d[i].attachEvent('onmouseover', function() {
var t = event.target||event.srcElement;
var n = t.tagName;

alert(n);
});
}
}
}

$(function() {
new Test();
});

>>595
素晴らしい出来栄えだな(爆笑)

これで就職活動する気らしいが、俺が面接担当なら即落とすね

無駄が多すぎるコードだな

爆笑ｗｗ

良く理解しないで書いている(コピペ？)ことがわかる

ただtry, catchが使いたかっただけじゃね？

イベントハンドラを外部ファイルに分離させた時のevent.target||event.srcElement... - Yahoo!知恵袋
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1049315910

自己解決したんじゃなかったのか

いや、別の所でeventオブジェクトをちゃんと使えと言われて
数日勉強したあげくに出てきたのが、上のコード
try〜catchは最初からあったから、結局スタートに戻っただけ

こんなのを回答のコピペと言われたら、さすがに回答者の名誉に関わる(爆笑)

>>603
マルチポストするなら、マルチポスト先のURLを書いてくれ。自己中心的だぞ。

イベントハンドラを外部ファイルに分離させた時のevent.target | OKWave
http://okwave.jp/qa/q6276157.html

なぜXHTMLなのに getElementsByTagName なんだ…。

var t = event.target||event.srcElement;

Adobe MAX 2010。HTML5とjQueryに対応したWebアニメーションツール「EDGE」などを発表
http://www.publickey1.jp/blog/10/adobe_max_2010html5jquerywebedge.html

Adobe製品高いからイラネ

どれどれ

JavaScriptはスレがいっぱいあるのに
JScriptのスレが殆ど無いのは何でなんじゃろうね。

>HTML5とjQueryに対応した
どっちも仕様が固まってないか存在しないのに・・・
変更されたら買い直すかパッチ当てるかすんの？

>>611
IE9はJavaScriptエンジンって言われてたな
JScript消えんじゃね

マルチポストにストーカー並の執念を燃やしている方がいらっしゃいますね。きんもー☆

規格化して実質独占したいんだろうな
早めに発表したもん勝ちみたいな

>>612
後方互換考えると消すって選択肢はないんじゃない
IEというブランド名を捨てればまた別だけど

後方互換性という言葉ほど憂鬱なものはないよな

マルチの件も終った事だし新しい質問しまっしゅ☆
JavaScript
----------------------------------------------------------------------
orderCoverRO.prototype = {
setup : function() {
this.elem = document.getElementsByTagName('ul');
for (var i = 0; i < this.elem.length; i++) {
this.elem[i].onmouseover = function(e) {
var ev = e || window.event,n = ev.target || ev.srcElement,t = n.tagName,s = n.parentNode,m = s.parentNode,k = m.parentNode,i = 0;
if (!(t != 'A')) {
while (s = s.previousSibling) {
if (s.nodeType == 1) i++;
}
var w = i + 1;
if (k.firstChild.src.match(/.\.png/) != w) {
k.firstChild.src = k.firstChild.src.replace(/.\.png/, w + '.png');
}
}
}
}
}
}
$(function() {
var v = new orderCoverRO();
});
----------------------------------------------------------------------

>>616
せっかく忘れようとしてんのに思い出させんなよ、泣けてくるじゃねぇか・・・

【質問内容】
■気に入らない箇所
�@変数が多すぎる
�A効率化できないか
■無視しなければならない箇所
�@正規表現のゆるさ（今勉強中）
�AjQueryが入ってるとか細かいところ
お願いします☆

ドキュメント内の特定の条件に合ったノードすべてに対して処理を施す場合
forで回すのが一番いいんですか？速さ？とか

30代にもなってこんな知識もセンスもないコードしか書けないならあきらめろ

俺javascript始めて１ヶ月だから知識は当然ない☆

>>620
速さならXPathが最速と言われる
querySelectorAllは案外速くないらしい

querySelectorのほうが書きやすい
こういった要素を子に持つ要素、とか指定できないけど
あとテキストノードも取得できないんだっけ

>>612
jscript9.dll...

jQueryはセレクタを独自拡張しておきながら
接頭辞もつけずにしれっとしている所がいやらしい
バージョン上がるとまた変なのが追加されんだろきっと

嫌なら使うな

いや俺が使わないのは構わないが
実行効率とか保守性とか考えずに使いまくる馬鹿がいるんだよ

querySelectorAllで取得した値って変更反映されるんだっけ？

>>629
StaticNodeList を返すのが正式な仕様だが、実装によっては Live な NodeList を返す。

え、live NodeListを返すもんあるの？
non-live NodeList (昔のStaticNodeList) はノードがツリーから切り離されても変わらないってことで
ノードの変更自体は反映されてるが、勘違いしてないか？

>>631
ごめん。
仰るように、「StaticNodeList = not live NodeList」と勘違いしてた…。
Selectors API Level 2 準拠なら、"not-live NodeList" を返し、IE8 だけ StaticNodeList を返す動作だった。

6.1. The NodeSelector Interface
http://www.w3.org/TR/selectors-api/#nodeselector
http://www.w3.org/TR/selectors-api2/#nodeselector
StaticNodeList Collection
http://msdn.microsoft.com/en-us/library/dd347147%28v=VS.85%29.aspx
JavaScriptのDOM Core基礎 - 三等兵
http://d.hatena.ne.jp/sandai/20100823/p1#006

live な NodeList を返す実装があるというのはどこかで見たような記憶があるんだけど、あやふやだし記憶違いかも…。

どんなに探しても、live になる実装の資料が見つからなかった。
やはり、記憶違いだったみたいだ。すまなかった…。

StaticNodeListはSelectorsAPI草案途中にあったインターフェイスな
途中でliveでないNodeListに変わった

document.getElementByIdのdocumentって部分は何ていう名称なんでしょうか？
このdocumentって部分には他にもどのようなものがありますでしょうか？

>>635
グローバルオブジェクト window の document プロパティ。グローバル変数とも言う。
http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#the-window-object

>>634
補足ありがとう。
「Working Draft 21 December 2007」までは StaticNodeListインターフェース があったんだね。

2.2. The StaticNodeList Interface - Selectors API
http://www.w3.org/TR/2007/WD-selectors-api-20071221/#staticnodelist

Greasemonkeyのユーザスクリプト内にfunction test(a) {alert(a);}があって、
対象ページに<a href="javascript:test(1);void(0)">test</a>があるとき
testリンクを押してもtest()が実行されないのはそういうものなんでしょうか？
testリンクのところにidつけてaddEventListenerすればいいのですが
addEventListenerが増えてしまって困っています。
そもそもaddEventListenerが増えてはいけないのかすらわかりませんが
他にうまい方法があればおしえてください。
よろしくお願いします。

どうしても実現したいなら
(function(){
　　unsafeWindow.test = function(a){
　　　　/* expression */
　　}
})();
ただし既存のtest関数は置き換えられる

>>639
試してみたらできました。
unsafeWindow便利ですね
ありがとうございました。

その名の通りunsafeWindowは安全ではないのであまり使わない方がいい

質問なのですが、XMLHttpRequestで取ってきたHTMLに対して、
getElementByIdで要素を取得したいのですが、
隠しウィンドウや隠しFrameとかに読み込ませてdocumentから
操作するしかないのでしょうか？

単純に何かのオブジェクトを生成して読み込ませてから
Javascriptで要素を取得することはできませんか？

DOM使え

DOMで調べてみたのですが、XMLの操作やdocument前提の話しか見つかりませんでした…。

>>642
DOMParser, LSParser, createHTMLDocument, ActiveXObject

お好きな方法をどうぞ。

>>645
おお！なんか出来そうな予感が…！
ありがとうございました。

>>638
むしろ addEventListener 使うほうがいい
あとGreaseMonkeyってjQuery使えんこともないよ

つーかGreaseMonkeyって既存のページを改造するもんだから、
自分が管理してるページなら存在意義があんまりないのでは？

<head>タグに
<meta http-equiv="Content-Script-Type" content="text/javascript" />
と入れないでも
<body>
<script type="text/javascript">
alert("こんばんは")
</script>
</body>

でちゃんと表示されたのですが

<meta http-equiv="Content-Script-Type" content="text/javascript" />
って別に入力しないでもいいのでしょうか？

>>648
そのmetaないしhttpヘッダは「scriptタグでtypeを指定しない場合に
javascriptとして解釈してもらう」ためのものでは。そして大抵の
ブラウザではなんにも指定しない場合のデフォルトがjavascriptに
なっていると思う。

>>649
ってことは念のために記述したほうが良いという事ですね
ありがとうございました！

onclick属性とか用じゃないの？
type属性は必須だし

申し訳ない、なんか勘違いしていた私。 >>651

getElementByIdのように、classで要素を取得できないんですかね？

>>648
HTML4.01 ではscript要素の規定値が text/javascript でないため、その指定がないと HTML-lint ではエラーになる。
HTML5 では不要…というか未定義。

>>653
getElementsByClassName

>>655
IEだったらきかないよ

効かないも何もそれ先行実装

>>653
>>655が656のため、未対応ブラウザ用に自分で取得する機能を書くか、下のなどを導入することになる
ttp://www.html5.jp/library/dom_getElementsByClassName.html

ちなみに導入してみたら('A`)だったので、自分で書いた記憶がある

>>654
HTML-lintはscript要素もトリガになるのか
イベント属性を使わないならデフォルトスクリプト宣言は必要ないように思えるけど

>>656
IE8ならdocument.querySelectorAll('.hoge')
それ以前も対象にするなら全要素ループでチェック

>>658
一応。
・戻り値はliveなNodeListではなく、ただの配列なので注意
・IE8でも全要素ループになるから遅い

getElementsByClassName が IE8- に対応しないのはわかってるが、「getElementByIdのように、classで要素を取得するメソッド」といえば getElementsByClassName だと思う。
getElementsByClassName は IE9 からサポートされる。

Internet Explorer 9 Beta 開発者ガイド
http://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_DOM_L2_HTML

あ、querySelectorAllもliveなNodeListじゃない（>>629-）
一応。

>>660

> ・戻り値はliveなNodeListではなく、ただの配列なので注意
non-live には同意するが、配列だろうか…？

var p = document.querySelectorAll('p');
console.log(Object.prototype.toString.call(p)); // "[object NodeList]"
console.log(p instanceof Array); // false

戻り値は non-live な NodeList だと思ってた。

>>663
こうすれば良かった。

console.log(p instanceof NodeList); // true

やはり、戻り値は NodeListインターフェース のオブジェクトな気がする。

>>663
あいや、>>658のスクリプトの話＜ただの配列

>>665
申し訳ない、アンカー先を読み間違えていたようだ…。

non-liveってあとから追加や削除をしても取得したときの情報のままってこと？
変更後に再度取得しなおせば変更後の情報が得られるの？

>>667
その通り。

getElementsByClassName()の落とし穴
http://www.insuite.jp/blog/archives/80

>>668のリンク先では non-live にするために配列化しているが、live の挙動を利用すればもっと簡単に書ける気がした。

---
<style type="text/css"><!--
.change { color: #ff0000; }
--></style>
</head>
<body>
<div class="test">壱</div>
<div class="test">弐</div>
<div class="test">参</div>
<script type="text/javascript"><!--
(function () {
　var elements = document.getElementsByClassName('test');
　while (elements.length) {
　　elements[0].className = 'change';
　}
})();
//--></script>
---

>>667
ごめん。微妙に間違っていたっぽい。

---
<div class="test">壱</div>
<div class="test">弐</div>
<div class="test">参</div>
<script type="text/javascript"><!--
(function () {
　function byClassName () {
　　var elements = document.getElementsByClassName('test');
　　while (elements.length) {
　　　elements[0].style.color = '#ff0000';
　　　elements[0].className = 'change';
　　}
　}

　var elements = document.querySelectorAll('.test');
　console.log(elements[0].style.color); // ""
　byClassName();
　console.log(elements[0].style.color); // "rgb(255, 0, 0)"
})();
//--></script>
---

live か non-live かっていうのは NodeListインターフェース (わかりやすいところではlength) のみに影響するらしい。
element.style.color など Elementインターフェースの変更は即反映される。

# 自信はないので、鵜呑みにしないで欲しい。(えらい人の解説に期待…。)

>>670
NodeListからDOMが消える前提なのがおかしい。
場合によってはtestクラスを残そうとしたりすると無限ループに陥る。
素直に配列（NodeListだけど）の後ろからループ回せばいいじゃん。
要素の順序が勝手に入れ替わったりしないことは保証されてるし。

(function test() {
  var elements = document.getElementsByClassName("test");
  for (var i = elements.length - 1; i >= 0; i--) {
    var e = elements[i];
      e.className = "change";
      e.style.color = "#ff0000";
  }
})();

>>671
指摘ごもっとも。
後ろからループ回せば問題ないということに気が付かなかった…。

# デクリメントすると <!-- comment -->内に置けないので、外部スクリプト化するなり、コメントをなくすなりする必要はあるかな。

画像のうえにテキストを表示させる方法を教えてください。
一応自分でも挑戦してみたのですが、下の方法だと
画像がクリッカブルじゃなくなってしまいます。(FireFoxで動作確認しています)

function add_note(obj, note) {
var elem = document.createElement("span");
elem.innerHTML = note;
elem.style.position = "absolute";
elem.style.left = obj.offsetLeft;
elem.style.width = obj.width;
elem.style.top = obj.offsetTop;
elem.style.height = obj.height;
var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(elem);
}

<a href="..."><img src="..." onload="add_note(this, 'aaaaa')"></a>

書き忘れましたが、画像は原寸ではなくて縮小表示させたかったので、imgタグを使っています。

>>672
i-- → i-=1じゃね。

>>673
js以前の問題に見える。<a>でくくらないってのはだめなのか？

今どきJSのコードをコメントで囲う必要ってあるの？
コードを表示してしまうのって携帯ぐらいだと思ってた。

>>675
<a>でくくらずに、imgタグのonClickにopen("...") と書いてみたんだけれど
ブラウザのポップアップブロックに引っかかってちょっと上手くないですねぇ。
いい方法あるかなぁ。

>>676
5年前の携帯でもscriptとnoscriptを認識するぞ・・

あ、ごめん。
「画像がクリッカブルになってしまいます。」って読み間違えてた。

1,z-index指定。（で出来るはず。）
2,<a href="..."><span style="ほにゃらら">aaaa</span><img src="..."></a>
jsでやる必要がなければ2でいいと思うけどな。jsがoffの人とかも見れるし。

img要素にtitle属性つけとけば2,3秒で指定した文字がツールチップで出てくるよね

>>676
XHTMLに厳密に従うと、本当にコメントになってスクリプトが無い事になるから
今時ならもうやらん方がいい。

>>681
そーなのかーって思ったけど、全部jsファイルで外部化すればいんじゃね？って思った
とりあえず今後は<!--を外すことにする

>>678
ドコモ携帯はstyle要素の中身すら晒してしまうで

>>676
ブラウザとしてなら必要ないかもしれないが、他のパーサー通すときにコメントアウトしていないと困るパターンはある。
XHTMLなら外部スクリプト化するか、CDATAセクションを使うべき。
XMLパーサーを通した時にどのようなノードを生成するか考えてみるといい。

XHTML文書は <>& をエスケープしてもいいが、メンテが面倒になる。

<p>foo</p>
<script type="application/javascript">
(function () {
　var p = document.getElementsByTagName('p');
　for (var i = 0, l = p.length; i &lt; l; i++) {
　　p[i].className = 'foo';
　}
})();
</script>

# "Content-Type: text/html" を出力するなんちゃってXHTML文書はXHTMLにする意味があるのか、と思うこの頃…。

id付きの要素がスクリプトによってドキュメントに追加されるのですが
追加される以前にdocument.getElementByIdで取得しようとしてもnullになります
追加されたかどうか判断するにはどうすればいいですか？
nullじゃなくなるまでずっとループを回すんですか？

ところで、「今時 = XHTML」なのかな？
docomoなどの携帯電話で扱われるXHTML文書は XHTML 1.x や XHTML5 とかけ離れた仕様だと思っていて、それを今時というのには抵抗があるのだが…。

>>686
ちょっと何をやりたいのかよくわからない。
必要な処理を行うときに getElementById の返り値をみるだけだと思うんだけど…。

別のスクリプトによって、任意のタイミングでそのidの付いた要素がドキュメントに挿入されます
挿入されたその要素に対して何か操作をしたいので
その要素が挿入されたかどうかはどうやって判断すればいいのかなと

XHTMLはオワコン

>>686,689
getElementById は該当要素がなかったときにnull を返す。
操作時に getElementById の戻り値が null でなかったら処理をするようにすればいい。

つまりnullじゃなくなるまでループを回すってことですか？

>>690
終わってないよ！XHTML5 が残ってるよ！(HTML5 の方が注目度高いだろうけど。)
# XHTML書く人はIEなんか無視すればいいと思う。IE無視できない人はHTML書けばいいと思う。

>>692
idの付いた要素をドキュメントに挿入したタイミングで処理を行えばいいじゃなイカ。
処理のタイミングの問題としか思えないのにそれに類する情報がないので何とも言えない。
コードかURLを開示してもらうのが手っ取り早いかと。

あと、連投するならレス番をつけないと流れを追いづらい。

>>692
たとえばJavaScriptでFlashを埋め込んで、
Flashのロードが完了したらJavaScriptからFlashを操作するときとか、
俺はsetTimeoutで100〜200msごとくらいにロード状況をチェックして、
ロード完了時に操作を受け付けるようにしてる。
で、30秒〜1分くらい経ってもロードできないときは中断してエラーを吐くようにする。

どうもありがとうございます
setIntervalじゃなくてsetTimeoutを100〜200msごとくらいに使うんですね

setIntervalは時間がきたら有無を言わさず処理しちゃうから、
処理が重複するリスクがあったりする
こういう場合はsetTimeoutで一回一回チェックしたほうがいいと思うよ

どうでもいい話だが、>>693をイカ娘が打ってると思うとなごんだｗ

DOMNodeInsertedってそういう時に使うんじゃないの？

jQueryを使って文字列置換をしているのですが、

$(function(){
　var tmp = $(".class0");
　tmp.html(tmp.html().replace(/aaa/ig, "bbb"));
})

この aaa 部分を変数を使って指定するにはどうしたら良いでしょうか？

var arr = [/aaa/];
alert(arr[0]);

↑ミスりました

>>699
aaaの部分だけを指定する方法はわからないけど

$(function(){
　var tmp = $(".class0");
　var reg = /aaa/ig;　
　tmp.html(tmp.html().replace(reg, "bbb"));
})

でどうかな(動作未確認)

new RegExp("aaa")

>>699
var a = 'aaa';
var r = RegExp(a, 'ig');
$('.class0').each(function(){
var target = $(this);
target.html(target.html().replace(r, "bbb"));
});

java scriptの動作がいまいち分からないんですが。
ブラウザがhtmlの中に書かれたjava scriptを
解釈して表示するまでの流れ(?)みたいなのを教えてくれませんか?

document.write("hoge");
とかしてるときに、なにがどう動いてるんでしょうか?

ブラウザに積まれてるJavaScriptエンジンが構文解析を行いスクリプトを実行している

>>706
ブラウザの、ソースを表示するで出てくるソースと
java scriptで動いてるのとの関係がいまいちどんな感じか分からないんですが.

エスパーすぎる・・・

>>707
ブラウザは受け取ったHTMLのタグやテキストをDOMっつー構造に再解釈する。
それを元にウィンドウ上に見えるように再構築する(レンダリング)。
それと別にブラウザはJavaScriptも解釈して実行する。
JavaScriptはレンダリング前のDOMに介入できる。
DOMが変更されるとブラウザはそのDOMを元に再レンダリングする。

大雑把に言うとこんな感じかと。

>>707
ちなみにソースはレンダリングやJavaScript実行前の状態なので影響を受けてない。
Chromeの「要素を検証」とかで見れば影響後の状態も見れる。

そんな説明がわかるわけもない初心者だろう

そのレンダリングするエンジンが複数あるおかげで、俺らは困らされるんだがなｗ
Trident？　あーあー聞こえねー。

>>709
わかりました。ありがとうございます。

Last-Modifiedヘッダを返さないサーバで
XMLHttpRequestを使って更新確認するにはどうすればいいですか？
Content-Lengthヘッダも返しません

手がかりになるようなヘッダが全くないのであれば
bodyのハッシュでも取っておいて比較するしかないんじゃない
JSだけでやるのは非現実的ですな

どうもありがとうございますm(_ _)m

ちょい補足
まず目的のサーバからどんなヘッダが返されているか確認するのが先
Content-LengthだけではなくAgeやEtagが利用できる可能性もある

それがまるでないようであればbody部のハッシュ
（短いならbody部そのもの）を取っておいて比較するしかない
MD5やSHA-1ハッシュをJSだけで計算するライブラリは
ちょっと検索すれば見つかるので
どうしてもJSでやりたければそういうのを使うのも手

JavaScriptで更新確認とかする時点で
なんかヘンな気もするが

どのヘッダを使うにしても「前回の値」をどこに保存しておくかという問題はあるよね
サーバサイドの処理を挟まないのであればCookieかlocalstorageぐらいしかなさそうだけど

つかそれ以前に基本的にJavaScriptじゃ目的のサーバーが
クロスドメインなだけでアクセスすらできないでしょ？

それはまた別の問題だしXHR Level 2ではクロスドメインアクセスできるし

JSライブラリの話はここでいいの？

初歩的な質問ですまん
サムネイルオンマウスで画像をＩＤのあるとこに出す
それと同時にその画像の下に文字を出すことは可能ですか？
あとinnerTextとかinnerHTMLとか今どき使っちゃだめ？

>>723
解決しますた…
ほんとすみませんでした

>innerTextとかinnerHTMLとか今どき使っちゃだめ？
なんで？

少なくともinnerTextは無いな

個人的にはinnerHTMLは中身にテキストノードしかない場合に結構使うわ

自分もその用途にはよく使うけどいかんの？
A要素とかSPAN要素をcreateElementしてinnerHTMLってのはよくやる
（Aの中がIMG要素ならやらないけど）

まあ先行実装だし非推奨だし

マウスでの mousedown や click、mouseover などでマウスが文字列の上にあるか
どうかというのを知る方法はないでしょうか？

文字列の上でクリックされた場合などはそれを選択しようとしている時だと思うの
で余計なことをしないようにとかいった風に使いなと思っています。

ある要素の上というのではなく、そこのマウス位置に文字列が実在するのかどうか
というのをどう判断して良いのかどうかどうしても思いつかなくて。

日本語ヘンですがすみません

今時jqueryとかprototypeなんかがあるからinnerTextとかinnerHTMLで自前で実装しちゃダメって聞いてるんだろう

innerHTML を使うべきでない理由

・遅い
・テキストノード挿入時、HTMLエスケープしなければならない (予期せぬバグが混入する可能性がある)
・インラインJavaScriptとして埋め込むとき <> をUnicodeエスケープする必要がある

ちなみに innerHTML はHTML5で標準化されているので、>>3 は修正した方がいいと思う。

>>733
HTML5はまだ勧告されてないよ

>>734
勧告はとうぶん先だって言われてるが、最近の風潮は「使えるものは使っていく」というもの
勧告されていない≠使えない

そんなに心配ならWHATWGのほうのHTML5仕様にある、各ブラウザの実装対応状況を読めばいい
左側にフキダシみたく出るやつ
あれは実装が行われている場合、テストケースをパスしているかを表している
グレーアウトは未実装、赤は実装済だがテスト通過してない、緑は実装＆テスト通過

>>733
innerHTMLも、使うシチュエーションによっては利点がある
大量のテキストを一気にDOMノード化したい場合とか

>>730
mousedownとかを紐付ける要素を指定するときに、選択するようなものにしなければいいじゃん。
なんか使い方がおかしい気がする。どうしたいのか書いてみ？

勧告されてなくても主要ブラウザは実装してるからね

<a href="#" onmousedown="〜〜〜">
　　　　　　　　　　　　　　　　　↑これを実行しないようにしたいです
どうすれば良いですか？

<!-- <a href="#" onmousedown="〜〜〜">〜</a> -->

そうじゃなくて、元々HTMLに書かれているマウスイベントをJavaScriptで無効化したいんです。

>>738
element.onmousedown = null;

>>741
出来ました！ありがとうございます。

objs.snapshotItem(c).wrappedJSObject.onmousedown = null;

>>735
innerHTML を使いたくなる気持ちはわからなくもないんだけど、innerHTML は文字列処理だからあまり JavaScript に合わない気がしてる。
多量のDOMノードといっても何らかの整形フォーマットがあるわけだし、厳密にフォーマットを定義したい場合はDOMで生成する方が適切だと思える。
(思想の違いだから、他人に押しつけることは出来ないけど)

ただ、もっと簡単にノードを生成できるメソッドは用意されてもいいと思う。
createElement, cloneNode, insertRow ... といろいろあるけど、querySelectorAll のような革新的なメソッドはないんだよね。
出来れば、こんなコードを書いてみたい。

var p = document.createNodeByQuery('p>span.hoge');

それぐらいならすぐできるけど、他の属性やtextがめんどくさいな。

ってかそういえば前にelement作成用の関数作ったことあったわ。
MakeElement('test', ['table', ['border', '1'],
['tbody', ['id', 'tst_1', 'style.color', 'black'],
〜
みたいな感じ。

>>744
属性に関しては属性セレクタがあるし、http://www.w3.org/TR/css3-syntax/ に Syntax があるから作れないことはないと思うけど、「すぐできる」ってすごいな。
師匠と呼ばせてもらってもいいですか？ｗ

テキストノードはCSSセレクタの泣き所だよね。
XPath式 にすれば一気に解決しそうだけど…。

>>743
ZenCodingでそんなセレクタ指定のコーディング方法あったな
ul.tes>li*4ってタイプすると<ul class="tes"><li></li><li></li>・・・</ul>と展開される

おっといいアイディアが思い浮かんだぞ

>>742
wrappedJSObjectってことはMozillaだろ
だったら直接removeAttribute使えよ
わざわざラップされてるのをはがすなよ

>>747
removeAttributeで出来ました。ありがとうございます。

>>744
jsでzencodingチックにDOM作成するプラグイン作った人はすでにいたよ
http://sakuratan.biz/jquery/zencoding/


ところでFireFoxもしくはChromeで、JSで作成したファイルを名前つけて保存させるには
location.href = 'data:application/octet-stream,'+encodeURIComponent(text);
みたいにするしかないっすか？
デフォルトのファイル名も付けられると便利なんだけど…

javascriptの関数実行タイミングが意図したタイミングで動作しません。

<head>
<script language=javascript>
<!--
function send(){
(DBに書き込む処理@asp)
}
-->
</script>
<body>
<form>
<input type=button name=btn onClick="send()" value="次へ" >
</form>
</body>
</html>

「DBに書き込む処理」が、ページを開いたときに実行されていました。
(Page開いた時点でmdb開いてみると既に書き込まれている)

「次へ」ボタンを押したときに初めて実行されて欲しいのですが、
どのように直せばよいのでしょうか。ご教示下さい。

あなたは実行される順番が分かっていない。「ASPが処理」→「結果のHTML＋
JavaScriptができる」→「ブラウザに送られる」→「表示、JavaScript実行」
という順番だからそのように書いたらASP側がまず実行されるのは当たり前。
JavaScriptからサーバに結果を送信して、サーバ側でそれを受け取って
結果を書き込む、というふうにしないと。あとは自力で勉強してね。

特定の要素が生成されるタイミングで関数を実行したり出来ますか？

その要素が「どうやって」生成されるかによるんでは。

>>751
理解のあやふやだった部分でした。＜サーバ側の処理、クライアント側の処理
submit()し、次ページで書き込み処理することで意図通りに動かすことが出来ました。
どうもありがとうございました。

>>752
onload

XMLHttpRequestの戻り値として、バイナリデータを受け取って
ブラウザ側でダウンロードダイアログを表示させて
取得したバイナリデータをダウンロードさせることって可能でしょうか

現在YUIのConnection ManagerでXMLHttpRequestを
サーバに投げてバイナリデータを取得する所まで
確認できたのですが、ブラウザ側にコレを認識させる事ができない状態です。

getComputedStyleで特定のElementのCSS情報を取得できることを
知りましたが、実際に画面に表示されている背景色を取得することはできますか？

>>757
なにがわからんの？

>>758
要素の重なり等を考慮すると、最終的に表示されている色は、
スタイルシートの情報からは取得できないですね。
質問内容が無謀でした。

rgba ブレンドファクタ

>>759
background-imageになっちゃうとアレだけど、
background-colorとopacityでの重なりあいだったら、
計算すれば出るんじゃないかな。

あ

JavaScript + jQuery + localStorage ってブラウザ間の挙動の違いは大きいですか？
Firefoxで開発したのがChromeで動かなくて凄くショックだったんですが・・・
挙動の違いを解説してるページとかあったら教えてください

自己解決しましtあ＾＾

要素を削除するとき
obj.parentNode.removeChild(obj);
以外の簡単な方法はありますか？

>>765
単一ならそれでいいと思う。
複数ノード入れ替えたいときは replaceChild で入れ替える、とか。

>>645
こういうのを使えるならXMLHttpRequestで取得してからこいうのを使ってDOM操作するほうがいいの？
iframeに読み込むのはよくないの？
jetpackもHTMLをDOM操作するためにiframeに読み込む仕組みを採用しているっぽいですが
> SCRAPBLOG : Jetpack SDK 0.4 の Page Worker API
> ttp://www.xuldev.org/blog/?p=792

http://gist.github.com/658148

質問です。
リンクにaddEventListener('click',〜
とイベントを追加したのですが、関数の中でreturn false;してもリンク先へ移動してしまいます。
どうすればリンクの本来の動作を止めることが出来ますか？

>>767
Jetpack のAPIを利用することが前提にあるようだが、違うのだろうか。
他に適切なAPIがあるのであれば、勿論それでも構わない。

が、標準の DOM, ECMAScript メソッドを利用することが前提としてあるなら iframe に読み込むのはお勧めしない。
iframe に読み込むということはDOMを document に結びつけるということ。当然、それに関わる処理も働く。
ドキュメントに挿入しなくて済む処理なら、わざわざ iframe に読み込む必要はないと思う。

すいません。自己解決しました。

>>769
return false; はIEが独自実装した仕様で HTML5 もそれに追従しているが、DOM 本来のやり方ではない。
DOM では event.preventDefault() を規定している。

>>771
自己解決したなら、解決法を書いてほしい。

>>770
iframeだと再レンダリングされて
それが問題ってことですか
わかりました
どうもありがとうございます

>>773
>>772さんの仰られた方法で解決しました。

http://www.moondakota.com/archives/2004/09/23/rss_javascript.html
↑のツールを使い、HPにblogを載せたのですが
文字化けしてしまいます
charsetというのが原因かと思い変更してみたのですが
HP全体が化けてしまいます。対処方を教えてください
http://onlinegamenavii.web.fc2.com/index.html

スレチ

スレチでしたか、失礼しました

まぁ、charset の値を UTF-8 に変更したけど、
ファイルを UTF-8 で保存し直していないとかいうオチじゃないかな。

>>776

Webサイト制作初心者用質問スレ part221
http://hibari.2ch.net/test/read.cgi/hp/1286969289/309n

ループ内で関数を定義するコードを書いたところ、JSLint に Don't make function within a loop.
と怒られてしまいました
どういう理由があってこのエラーが出るのでしょうか

コードは以下の通りです
Function.prototype.createClass = function(class_name, proto){
proto = proto || {};
var c = class_name.split('::');
var target = this;
for(var i = 0; i < c.length; i++){
if(!target[c[i]]){
target[c[i]] = function(){};
}
target = target[c[i]];
}
target.prototype = proto;
};

ループ中にfunctionを作ってはならないってそのまんまじゃないか

for(var i = 0; i < c.length; i++){
if(!target[c[i]]){
target[c[i]] = function(){}; //←ここ
}

>>782
ですので、なぜ作ってはいけないのかその理由が知りたいのです

ループ内で作れるならループ外でも作れるでしょって事じゃねーの

自己解決しました

>>784
全然違います

var t = {};
for(var i = 0; i < 10; i++){
t[i] = function(){
alert(i);
}
}

としたときに、
t[0] を呼び出しても t[1] を呼び出しても常に 9 が表示されます
どうやらクロージャ内でうまくインデックスの値を参照できないようです

そんな書いてないコードの事なんかわかんねーよ
for (var i=0;i < 10;i++) {
　t[i] = (function(index){alert(index)})(i);
}
ほれ

あ、すまんそのままだと参照というか実行されるな
でもまぁクロージャで参照したいならそんな感じで書けば良い
どちらにせよ同じエラーは出ると思うがな

>>785
だからクロージャが参照している変数「i」は1個でしょ。
そのiは変更していっているんだから、t[1]でもt[0]でも
変更された現在のiを参照するに決まっているじゃない。
クロージャってそういうもののためにあるわけで。自分で
勝手に書いた時点のiで固定されて欲しいとか思っても
そう書かなかったらそうなるわけがない。
そもそもアンタはFAQのQ14/A14を読んだのか。読んでない
のならどっかよそに行って欲しいね。読んだけど理解でき
ないとかなら説明するけどさー。

>>786
JSLintご存知ない？
質問の意図は「JSLintで静的に解析したとき、このエラーが出るのはどんな落とし穴があるためか」でしたが、
これを知らなかったが故に変に解釈されてしまった気がします
申し訳ないです

>>788
Q14. タイマーやイベントハンドラに設定するコードにthisを含めたいのですが
　 「"...this..."」とか「function(){...this...}」ではうまく行きません。
A14. それらが実行されるときはthisは別のもの(window等)を指してしまってる。
　　「function(x){return function(){...x...};}(this)」のようにthisを別の変数に
　　束縛しその変数を使って。循環参照によるメモリリーク問題あり(この項記述検討中)

この情報からクロージャと変数のスコープの関係を類推して
更に今回の落とし穴になりうる条件を類推するのは無理があるかとｗ

<head>
<script type="text/javascript">
function func1(str) {　　　　　　　　　　　　　　　　　　　　　　　←ココ
alert(str + "がクリックされました");
}

function init() {
alert("ドキュメントがロードされました");
}
window.onload = init;
</script>
</head>

<body>
<form id="myForm" name="myForm"><p>
<input type="button" value="ボタン1"
name="button1" onclick="func1('ボタン1');">
</p></form>
</body>

とあるのですが
このfunc1(str)のstrって何なのでしょうか？
strにonclickの'ボタン1'が格納される事はわかるのですが、変数でもないようですし、初心者ですみません

>>790
引数の1番目に指定されたものが入ってる変数だよ

>>789
まずJSLint関係ないと思うぞ？
Don't make function within a loop.
これの訳を考えてみろよ

で、君が原因だと思ってるiの参照を解決できる方法はこんな感じだけど
for (var i=0;i < 10;i++) {
　t[i] = (function(index){
　　　　　　return function () {
　　　　　　　　　　　alert(index);
　　　　　　};
　　　　　})(i);
}
これでやっても同じメッセージは出る

>>790
<input type="button" value="ボタン1"
name="button1" onclick="func1('ボタン1');">
の onclick="func1('ボタン1');"にあるボタン1

>>785
で、>>781の原因はなんだったんだ？
そのコードを実際にブラウザで動かしたらエラーをはかないから、俺はJSLintがおかしいと思ったけど。
>>792も言っているけど、その問題は>>785のクロージャ関係と無関係だと思うよ。
function(){};の中身がわからないから確かではないけど、普通のforで回すだけなら、target = this;はいらないとおもうよ。

だからt[0]とかが呼ばれる時はiは別のものをさしてしまっている。
t[i]=(function(x){return function(){alert(x);}})(i);
とすればt[i]に入れた時のiの値が関数が呼ばれる時に作られる
環境のxに渡されて保持され、それをクロージャから参照している
からiその時点のiの値が取れると。

>>791
varで宣言しなくても変数になると言う事なんでしょうか？
入門書やってる程度なので、ちょっとよくわからんとです

>>795
関数の引数(strの事)に関してはvarはいらない
関数と引数について勉強すれば良いと思う

>>792
最初に提示した例ではそもそもクロージャになっていないので問題なく動くはずです
JSLintでメッセージが出る部分は落とし穴となる可能性の高い部分
メッセージの内容については「してはいけない」としか書かれていないです
なぜこのようなメッセージを出さなければいけないか、どんな落とし穴があるのかを知りたく質問したのです
原因さえはっきりしていればそのメッセージをスルーするという選択肢もあるでしょう

>>793
問題はJSがブロック単位の変数のスコープを持っていないことです
なので、

var t = {};
for(var i = 0; i < 10; i++){
t[i] = function(){
alert(i);
}
}
t[0]();

は

var t = {};
var i = 0;
for(; i < 10; i++){
t[i] = function(){ alert(i) };
}
t[0]();

と解釈され、t[0] を呼び出している部分では i = 9 となり、9が出力されるわけです
これを解決するには >>792 のようにクロージャで変数をバインドする必要があります
JSLintは落とし穴になりそうな部分を警告してくれているだけなのでおかしくはないとです
target = this は 普段 jQuery 書いているのでその癖ですｗ

なんだJSLintはエラーじゃなくて注意だったのか。
>>797
いや、スコープの事なんか知ってるよ。

てか>>781から>>785の変化が大きすぎだろｗ
書いてないことで「違います（ｷﾘｯ」なんて言われてもねぇ・・・

キチ

>>797
最初に示した例でも同じ警告は出るわけだが・・・
難しく考えすぎだろ
こういうLint系って落とし穴以外にも
オーバーヘッドが発生する場合等も警告だすよ
もうちょっと単純なテストからしてみたらどうよ
結局どこが原因か切り分けできてないんでしょ？

因みに>>781のコードでfunctionを外部化し、>>781のコードの前に持って行き
その関数を代入するとその警告は消える

>>798
JSLintについて知らなかったんですよね？
だから >>789 で解釈が違うのだろうと推察したのです
そして私は始終一貫してエラーを吐く「理由」を質問していたハズですが、
そのレスは解答の方向性が全く違っていたのでドヤ顔で高らかに「違います」と宣告させていただきました
そのように解釈されず大変残念です

>>800
すみません、ありがとうございます
ちなみに私のレスは >>781 >>785 >>789 >>797 で、>>785 の時点でこの問題は解決しております

キチガイが湧いてるなｗ

こうして間違った解釈が広まるのは残念な限りだ

781が馬鹿すぎて笑えない

コミュ力があれば起きないような誤解と不快感を招いてるな。

varなんか使うからいけないのだ
letが標準化されればいいのに

またeval厨か

ループ内で関数作ると外で作れば一個で済むのに、全く同じような定義を何個も作って無駄なんじゃねえのみたいなことなんじゃないの

本人が説明してるんだからおれおれ解釈の余地はない　上：ビデオ　下：スライド(73ページ)
ttp://developer.yahoo.com/yui/theater/video.php?v=crockonjs-3
ttp://www.slideshare.net/douglascrockford/crockford-on-javascript-act-iii-function-the-ultimate

補足すると、上に出てるように無駄っていうのと後は紛らわしいから

誤解が起こるのは、紛らわしいっていうのがクロージャが必要な場面のことだからだと思うけど
でもその場合でも同じで「関数を返す関数」自体を外に置こうっていう話

こんにちは。
初めてJSLintを使ってみましたが
if (hoge == 0)
if (hoge == true)
というように書いた行で、それぞれ以下のようなエラーが出ました。

Use '===' to compare with '0'.
Use '===' to compare with 'true'.

== では好ましくないということなのでしょうか。
何故 === を使えといちいち強要されるのか理由が理解できません。
教えてください。

0==="0" false
0=="0" true

0 == false -> true
0 === false -> false

こういう違いがある
他にも
'' == false -> true
'' === false -> false

とかね
組み込み関数にも0をかえしたり空白を返すものがあったはず（忘れた
そういうのでの誤った判断をしないためにって感じかな
型をも含めた厳密な比較をしましょうって事です

"自分で"JSLintを使っといて、理由も調べないでいちいち強要されるとか馬鹿じゃねーの

>>812
自分の使い方だと、0=="0" の場合でもtrueを返して欲しいんですが。

a が false , 0 , -1 , "" , "0" , "-1" の時にtrue

if( Number(a) < 1 )

>>815
そのJSLintの結果はエラーっていうよりお知らせ・注意くらいに思ったほうがいいね。
挙動を理解してるなら問題ない。

>>797
端から見ている私には >>781 が >>785 で解決できているように見えない。
>>781 と同じ結果を >>785 で得られていないから。

あなたが解決できたのは実際にやりたいことが >>781 ではなく別にあってそれが >>785 で解決できただけ。
そしてあなたの疑問である「どういう理由があってこのエラーが出るのでしょうか」の解が >>785 で出ているようには見えない。

だから、皆口を揃えて「そんな書いてないことなんかわかんねーよ」といっているわけです。
JSLint云々の問題ではなく、質問の仕方が悪いとしかいえない。

・ブロックスコープ云々と「Don't make functions within a loop.」は全く関係がない。
・JSLint はCrockford氏が信じる Good Parts でないコードに警告を出す。よって、ECMAScript文法に準拠しているか否かは全く関係ない。

「Don't make functions within a loop.」のメッセージを出す理由はわからないが、少なくともあなたの論拠はちぐはぐとしか思えない。

>>815
そういう場合は明示的に型変換してやればいい。
Number('0') === 0

=== and !== Operators.
It is almost always better to use the === and !== operators. The == and != operators do type coercion. In particular, do not use == to compare against falsy values.
http://javascript.crockford.com/code.html

>>818
> ・JSLint はCrockford氏が信じる Good Parts でないコードに警告を出す。よって、ECMAScript文法に準拠しているか否かは全く関係ない。
これは言い過ぎた。
ECMAScript に準拠していることが前提にあり、その上で独自の解釈をすると認識していいと思う。
例えば、var num = parseInt(08); で「Missing radix parameter.」のエラーを返す。

>>819
全部そう書き換える必要があるってことですか？

>>822
間違いが起こりにくいコーディングのテクニックとして、
文字列になる可能性がある数値は、きちんと数値に変換してから扱う。
parseInt(num)してから、if (num === 0)って感じで。

parseInt("0hoge")とかに注意だな

parseInt と Number の違い
http://ideone.com/x7oVl

parseInt の注意すべき点として、

・第二引数を省略すると 8進数, 16進数として扱う場合がある。(JSLintでは「Missing radix parameter.」のエラーを返します)
・数値は前方一致で検索される (後方に数値以外の文字があったとしてもエラーにならない)

があるかと。parseFloat には前者の性質がないですね。

>>822
必要なら、全て型変換を行った方がいいと思います。
同じ値を使い回すなら始めにNumber型に変換するとか。

function foo (num) {
　num = Number(num);
　if (num === 0) {
　　// 処理1
　} else {
　　// 処理2
　}
}

＞・第二引数を省略すると 8進数, 16進数として扱う場合がある
この動作は誰が得するのか分からん。
ECMAScript3ですら非推奨なのに、
ブラウザの実装が5に準拠するのはいったいいつになるんだ。

>第二引数を省略すると 8進数, 16進数として扱う場合がある。
これってどういうコード（環境？）だと再現するのかな。

先頭が"0x"または"0X"から始まってたら16進数、"0"から始まってたら8進数
たとえばparseInt("018")はまず8進数と見なされ、
末尾の"8"は8進数では使えないゴミとして無視されるので1になる
これJSの基本な

追記。
この動作はECMAScript3では非推奨。5では明確に禁止。

あーそういうことか、サンクス。
16進数はたまに使うけど、0x付きだし間違えることはないかな。
8進数の場合は、日付データとかを数値化するときに危ないね。しかし8進数の使い道がわからんw

Javascriptで並列処理、複数スレッドを立てる事ができるのでしょうか？

Workerでぐぐれ

マウス座標を取得するメソッドって種類ありすぎじゃないですか
なんで一つ、二つに統一しないんですか

その違いを言ってみろ

>>833
マウス座標を取得するメソッドなんてあったかな。
event.screenX はプロパティだし、いろいろプロパティがあっても役目が違うから何とも。

>>833
そのメソッドの名前は？

>>818
最初から何度も言うように結果を求めてたわけではなく理由を求めてたわけです

>>785での解答としては、Don't make functions within a loop. のメッセージは
他の主な言語と違ってJSがブロックスコープをサポートしていないが故に、
書いた通りのクロージャしか作れずバグの温床になるから
(>>809-810 でも説明して頂いている通り無駄があるという問題もあるようですが、こちらの方がより問題だと感じます)

なので、
＞・ブロックスコープ云々と「Don't make functions within a loop.」は全く関係がない。
これは否定させていただきたいと思います

>>781 のコードでは不具合が起こらなかったので、なぜこのメッセージが出るのかを模索したところ、
>>785 のような事例で意図とは違う動作をする可能性を見つけたので、問題となるコードを例示し解決済みとしたわけです

つまりJSLintの作者よりオレオレ解釈が正しいtという事を言いたいのだな？

>>838
どこらへん？
今ビデオ見てるけど該当箇所がよくわからん

シークバー10分の9くらいの位置だな。最後のほう

>>837
「どこかに原因があるはずだ -> >>785で不具合になった -> そうだったのか」ということか。
仮にそうだとしても、>>785 が原因と結論づけるのは強引なのでは？

function foo () {
　var a = new Array(5);
　for (var i = 0, l = a.length; i < l; i++) {
　　a[i] = (function (i) { return function () { alert(i); }; })(i);
　}
}

このコードは JSLint でエラーは出るが、正しく動く。
for文で function を代入してエラーが出るのは書き方が間違っているだけだ。
この点は >>786 で指定されていると思うのだが、試してないのだろうか？
間違った書き方をしているケースをとりあげて「for文で function を代入すべきではない」と主張するのはおかしいと思うのだが…。

あなたの主張は「Crockford氏は >809-810 と説明されていますが、私は別の問題を発見しました。それが >>785 です。」と読める。
それは JSLint がエラーを返す理由ではないよ。エラーを返す理由は JSLint 作者であるCrockford氏がよくご存じのはず。
私にはCrockford氏の説明を疑うだけの正当性が >>785 からは読み取れなかった。

以下、>809 の「Crockford On JavaScript: Act III: Function the Ultimate」より。

--- (P73) ---
Don't make functions in a loop.
- It can be wasteful because a new function object is a created on every iteration.
- It can be confusing because the new function closes over the loop's variables, not over their current values.
-------------

--- (P74) ---
Creating event handlers in a loop

for (i ...) {
　div_id = divs[i].id;
　divs[i].onclick = function () {
　　alert(div_id);
　};
}
----
function make_handler (div_id) {
　return function () {
　　alert(div_id);
　}
}
for (i ...) {
　div_id = divs[i].id;
　divs[i].onclick = make_handler(div_id);
}
-------------