一、正しい(validな)HTMLとは何か知っており書ける者
一、JavaScriptはJavaとは別物であると知っている者
一、自ら学んでJavaScriptコードを書く意思を持つ者
一、ユーザに迷惑となるスクリプトを書かない者
一、質問を分かる日本語できちんと説明できる者
一、トラブルを再現する最小限のサンプルを貼れる者
一、テンプレ+FAQ/過去ログ/関連資料を読める者
━━━━━━━━━━━━━━━━━━━━━━━━━━━
自力で書く気がない人は他のスレへ(テンプレ末尾参照)。
前スレ ttp://hibari.2ch.net/test/read.cgi/hp/1277348045/
[必読]過去スレ全集
ttp://www2.atpages.jp/mirror/2ch/javascript/ （閲覧のみ）
ttp://usamimi.info/~mirrorhenkan/2ch/javascript/ （閲覧のみ）
ttp://wing2.jp/~mirrorhenkan/2ch/javascript/ [必読]ガイド
ttps://developer.mozilla.org/Ja/JavaScript (GuideをReferenceに→Netscape版言語仕様。多くの実装が準拠:ECMA-262.ed3)
FAQ・注意・過去ログ・仕様書・関連資料・関連スレ
1)ユーザ(閲覧者)に迷惑がかかる性悪スクリプトは回答されない。
例: 別窓開きまくり、閉じる/戻るのを妨害、全画面占有、etcは最悪。
答えさせようと「分からねえんだろ」と煽っても無駄(過去スレが証明)。
2)言葉でぐだぐだ書かずにソースを貼る、ただし要点を整理して。
そのまま貼って動かせると試してもらいやすい(ただし回答者に連結さすな!)
長い(1レスに入らない)場合はアップロードしてURIを貼る。
3)初心者という言葉は危険なので使わない方がよい。
初心者を言い訳に自力で調べない/考えない奴が最悪に嫌われる。
4)自分で調べたこと/試したこときちんと書く(調べもしない奴は最低)。
ただ「動きません」「エラーです」は何も情報がないため嫌われる。
エラーは「どの行で何のエラー」を書く(ブラウザをそのように設定すれ)。
ブラウザの設定すらできんヤシはFFxのJavaScriptコンソールを使え!!!
OS、ブラウザ、バージョン、うまく行かない条件を明記しエラー再現可能に。
5)特に古いバージョン限定の時は必ず明記! 回答もチグハグになり回答者に2度
手間を食わせる可能性大
6)どういう時にどういう動作をさせたいのかを脳内にとどめずきちんと書く。
例:「自動ポップアップしたい」←どういう場合(マウスオーバー、クリック、
ボタン押し、select選択)に何(別窓、レイヤー、その他)が出るのか書け!
7)質問はまっとうな(他人に理解できる)日本語で。
前項の例に限らず、他人に理解できない質問文は煽られるだけで時間の無駄
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"」としないとページ移動しちゃうから。
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が置き換え前の文字列全体になります。
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とかもう中身を知りたいならエンジニアじゃなきゃ無理でしょ
→
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
→
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ どら猫本舗のリファレンスカウンター
→
ttp://www.doraneko.org/ はぎさんちのページ Mozilla's DOM Sample Project
→
ttp://cgi.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/mds.cgi 一撃必殺javascript
→
ttp://www.openspc2.org/JavaScript/ 【関連スレ】
板違い、スレ違いに注意！サーバ側での処理はWebProg板へどぞ！
Webサイト制作初心者用質問スレ part219
→ ttp://hibari.2ch.net/test/read.cgi/hp/1281429437/l50
CSS初心者スレッド＝8th＝
→ ttp://hibari.2ch.net/test/read.cgi/hp/1273383771/l50
役に立つ書籍は？ 4冊目
→ ttp://hibari.2ch.net/test/read.cgi/hp/1172823674/l50
1行javascriptプログラミング
→ ttp://hibari.2ch.net/test/read.cgi/hp/1066750037/l50
WSH(・∀・)ｽﾚｯﾄﾞ! Part 4
→ ttp://hibari.2ch.net/test/read.cgi/tech/1243095768/l50
EclipseやVisualStudioのような入力補完・入力ミスチェック（{ }を閉じて無いところがあるなど）があるだけでもいいのですが。
現状、普通のテキストエディタで編集してるだけなので、どこか間違えると個所を探すのが大変。
自分はEmacs+js2-modeつかってる
俺はAptana使ってる。
ところでjQueryクックブック買ったんですが、
オライリーのサイト見たけどサンプルコードがどこにも見あたらなくて。。
jsの部分は本に載ってるからいいんですが、cssが載ってないから
途中から進めなくなりました。。。わかる人いますか？
ありました。ありがとうございます。
俺が馬鹿でした。。
avaScript等の書き方等を色々検索してみましたが、上手くいきません。
つ referrer
つ 環境変数
CGIなど鯖側の技術でやりたいという質問じゃないでしょ。
「javascript referrer」で検索すれ。
ごめんなさい。
でもリファラでどうやって？つかそもそも件名ってなんだ？
GETで投げるか、クッキーを使うかぐらいしか思いつかん。
確かには良く解らんな。
自作のwebPageでフォームページ作るなら鯖側でやるほうがいいんじゃないかと思う。閲覧者がjs切ってる可能性もあるし。
完全に見る側でUpロダとかのPASSを自動で入れたいとかなら回答者にはエスパーが要求されるな。user.jsとかオミトロンの領域になる。
＞色々検索してみましたが、上手くいきません。
ためしてないだろ。コードかけよ。
に激しく同意。自分で書く気がない奴はカエレ!
などして適当に作ったクラス（のようなもの）にメソッドを追加するのに、
Foo.prototype.hoge = "hoge";
Foo.hoge = "hoge";
の2通りあるようですが、これらの違いは何ですか？delete演算子で削除できるかどうか、しか分かりません。
また、prototypeは全てのクラスで使えるメソッドのようですが、何に使うものですか？
全く意味が違います
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第5版ですらクラスで説明してあるし
まあプロトタイプのことも説明してあるし、
クラスと呼称しているのは、分かりやすくするためなんだろうな。
ttp://twitter.com/creditcardmiu/status/24272923242 クレジットカードの関連キーワードでサイトを量産して、
被リンク対策はすべてSEO対策無双に任せるというやり方が効率がいいのではないかと思ったよ。
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/js-notes/prototypechain.html 第14回 プロトタイプと継承
ttp://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のフィードは
ttp://feedproxy.google.com/～ と出力するので これも何か影響があるのかもとの素人考えも
web上で公開されているコードを若干加工しているので
私の記述ミスもあるかもしれません
googleのキーが必要、他ブログのurlが記載されている、という事もあり、
コードをここに書かずに実際のURLを晒す事をお許し下さい
ttp://aaanimememe.blog134.fc2.com/blog-entry-24.html アドバイスをどうか宜しくお願い致します
中身が存在しないフィードの投稿日を参照した結果のエラーだろう。
フィードの読み込みに失敗した場合の処理をしてないのが原因で、
たまたまIE以外のブラウザで処理が早かったか、参照する先の
回線との相性が良かったかの違いがある程度で、本来はそこの
URL以外でも、どんなブラウザでもエラーが出る可能性がある。
// 「読み込みに成功した場合」（73行目）
if (!result.error) {
ここの条件分岐が「読み取りに成功した場合」だから、その後ろに
「読み取りに失敗した場合」のelse節を追加し、処理を打ち切るなり
再読み込みするなりすれば、同様のエラーは出なくなる。
デザイン褒めて頂いて嬉しいです感謝
地味なのは私自身が地味なので・・・でも再訪されないのは寂しいので考えてみます
おおなるほど。失敗した場合の処理ですか
勉強して追加してみます
丁寧に教えて頂いて本当に有難う御座いました
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(
です。
・randomlistの中身は文章だけにして、document.writeで出力する時にclass属性をつけたタグで囲む
・noscriptの中身のテキストとこのrandomlistの出力を、（pとfontのような別物ではなく）同じタグの同じclassにする
・そのclassには、font-faceも指定
・noscriptはブロック要素だから、 ブロック要素の中にaisatu()を出力する
これでもダメなら、こっちの詳しい連中に質問だな。
[CSS初心者スレッド＝8th＝]
ttp://hibari.2ch.net/test/read.cgi/hp/1273383771/l50
そもそもnoscriptなんて使わなくても、pのテキストを書き換えれる処理を書けばいい
そのスレの住民はまともなの少ないｗ
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)]);
// -->
何という他力本願。
自分では何度やっても20分後に画像が変わって
その後40分変わらずという感じになってしまいました
ここを分解すると
var a = 0;
if (29 < d.getMinutes()) {
a = 1;
}
こうなるあとは考えろ
( ? 1 : 0)
↓
(d.getMinutes()>29 ? 1 : 0)
// 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' />"
]
];
こんな感じの定義の方が保守しやすいし、時間毎に更新間隔も変えられる
今、何分か（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)]);
ただ、柔軟性を考えると、条件式を書き換えて みたいにするのが無難かも。
アドバイスありがとうございます
d.getHours()の後ろはやはり1時間の分割で良かったんですね
ただ、ここの記述が(d.getMinutes()>29 ? 1 : 0)])、これで30分なら
どう弄ったら15分、20分と変えれるのかとずっと頓挫してましたが、
の方法は分かりやすかったので、こちらでやってみようと思います
アドバイスありがとうございました
こういった微妙なものは、ブラウザによって見た目が変わることが
結構あるんじゃないかな。
まずは、リセットcssをやってみてはどうだろう。
Windows 2000とWindows XP SP2のサポートが終了して、
現在サポートされているすべてのWindowsでMSXML6が標準搭載になりました。
スレで頂いた御意見を参考に試行錯誤してたんですが、さんの言うとおりhtml文での出力先でnoscriptと同じクラス指定したらあっさり解決しました。
いま考えればなんでやらなかったんだという感じです。
意味不明な質問から読み取っていただいた皆様、ありがとうございました。
あと複数のブラウザでのチェックはしてました。
本当にありがとうございました。
①外部のページを小窓で開き
②外部ページにあるテキストリンクをクリックすると
③こちらが管理してるページの特定のテキストボックスに、そのテキストリンクの内容が入る。
jqueryとかでも無理ですかね？
テキストボックスの中身を入れ替えるページをつくってるんですが、
（ここで解説しているような内容です→
ttp://homepage1.nifty.com/kodayan/dhtm/dhtml/text02.htm） ボックス内のスクロールが下にあるままボックスの内容を切り替えると
切り替わったボックスのスクロールの位置も下に下がったままです。
この対応に苦戦してます。
scrollTopの対象はどうなるのですか？
というか、どうすりゃいいのかわかりませんorz
ふつうにscrollIntoViewでも使えばいいんじゃないかと思うが。
小さな正方形のイメージ(20px×20px程度)が横一列に10個程度並んでいます。
左側のボタンをクリックするとイメージ一個分左にずれ、
右側のボタンをクリックするとイメージ一個分右にずれる。
こーいう動作のjQueryプラグインはないでしょうか？
自分で作る気はないのか？
サンクス
できました。
言い方はやな奴だけど、アドバイスに感謝します。
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は正常動作するとか？
などでｇｇｒ
どなたか対処法知りませんか？IE限定で勝手にオブジェクトに関数を代入してくる
それは自作の簡単なスクリプトです。
単純にオブジェクト名（テキスト）の配列使ってるだけなんですが
そこにファンクションを強制的に代入してきます。（IEのみ）
どのタイミングで代入してくるのかも目下不明です。
自分が宣言した名前がかぶってるんじゃないの？
名前変えてみたら
とりあえず自分でも解決すべく調査中です。
名前の変更をしてみましたがだめでした。
DOM関係で特定タグのオブジェクト名を配列に格納するということをやっているので
そこらへんでＤＯＭのオブジェクトをウジィットも操作していておかしくなるんじゃないかと
現状は考えています。
起こるんだったらIE8の開発者ツール(F12で起動)使って、
ステップ実行してみたらわかるんじゃ？
起きます。やってみます。
自作の方を原因と疑わないのがすごいなｗ
あ、知ってたらこのスレには来ないかｗ
最終的にドル関数かもしれないですけどね
var i = 1;
alert(i);
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var i = 1;
alert(i);
</script>
</head>
<body>
<div>はじめてのJavaScript</div>
</body>
</html>
ttp://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とか使ってるとか？
まだよくわかりませんが、これはコールバックだからこれが直接の原因じゃないですね
もう少し考えます。
どういう誤作動があるのかきちんと書いてみ？
書いてることが少なすぎてわからん
たぶんご指摘のとおりだと思います。
「配列でfor in」しています。
何も入っていない配列のはずがコールバックに反応しているような
対処方法はありますか？
配列なんだからlengthまで回す
ありがとうございます。
勉強になりました。
$("input[type=text]").each(function(){
var a=$.cookie($(this).attr("name"));
a&&$(this).val(unescape(a));
});
&&する理由は何ですか？
色々と調べてみたら短絡評価が行われることが分かりました
空文字はunescapeしても空文字なので無駄なだけなので許容できますが
nullやfalseを入れると文字列で"null","false"が返ってくるのでおかしなことになりますね
ありがとうございました。
これってランダムになるか？
確率計算してなくね？
擬似ランダムとでも言うか
ユーザからすればランダムっぽくは見えるだろうね
「引数が省略されたらデフォルト値を使う」みたいな場合には
よく使うテクニックだったりする
第一引数の uri は string でわかりやすいのに
jQueryのloadでファイルを読み込むときに、対象ファイルの拡張子が.txtだと動作しません。
拡張子を.htmlや拡張子なしに変えてみるとうまく読み込めるんですが、.txtに限ってダメなようです。
参考サイトを見ると.txtでも同じように読み込めるはずなんですが、なぜうまく行かないのでしょうか。
jQueryのバージョンは1.4.2です。コードは以下のようなものです。
function load() {
$("#aaa").load("test.txt");
}
test.txt で Content-Type: text/html; を出力するようにしてください。
総合的なスレが見当たらないんですが
質問に類するものなら、ここだと思うけど。
ところで、jQueryの質問は言語としてのJavaScriptとはほとんど関係ないから、
今後こっちへ誘導するようにしないか。
【誰か】jQueryのここがわからない【助けて】
ttp://hibari.2ch.net/test/read.cgi/tech/1229881548/
言語で語りたいならここだと思うが…
ECMAScript デス 3
ttp://hibari.2ch.net/test/read.cgi/tech/1190160481/
テキストボックスにフォーカスが当たっている場合等はどうしてもずれてしまいます
親ノードの位置を取得して足すみたいなことをすればできるかなというところまできましたが、
全然まともなソースが作れません
できればソースを教えてください
あと、今日はもう書き込めないのでよろしくお願いします
あるいはprototypeから取り出せば？
自分で作ったソースを書き込まないやつにはこれぐらいしか言わない。
これは、
Arrayオブジェクトのプロトタイプのsliceメソッドを呼んでいて、呼び出すときにsliceの中におけるthisをargumentsにして呼び出していて、
結果として、大元の引数を全て返している、でいいですか？
また、使いどころは引数が不定のとき、でいいですか？
語りたいなら本家開発サイトのフォーラムで語っちゃってくださいよ
「結果として」という書き方が若干曖昧だが、
そこを理解して言っているのであれば何も付け加えることはない。
Array.prototype.slice.call(hoge) はhogeが配列のときhoge.slice()と同じ
hoge.slice() は hoge をコピーした配列を返す
hogeがargumentsの時も同様で、arguments.slice()と同じ。
つまり引数をコピーした配列を返す。
けどargumentsは配列っぽいふるまいをするけど配列ではないのでsliceメソッドを持たない
だから Array.prototype.slice(arguments) という呼び出し方をする
例えば
<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されてしまい無理でした。
偉い人、よろしければご教授下さい。お願いします。
なるほど!!
gt,ltフィルターを使ってそうしてみます。ありがとうございます。
しかし100個とか1000個単位でやりたい時にこれがサラリと書けると便利ですよね。
CSSで頑張って凌ぐしかないですね。
うるせえはげ
wrapするライブラリがあるんだから使えばいいじゃん
ありがとうございますた。
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"
}
じゃあ、マウス座標とか無理じゃないの
他にも膨大な数あるコードから要点だけ抜き出しました
実際は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()で)
といったことをしようとしています
スルーされてるけどネット環境ならネカフェを利用するなど自分で出来ることをやりつくして
それでもこれこれこういうキーワードなどで検索したが期待する情報が得られなかったというならまだしも。
あんまりネカフェネカフェとひとつだけ提示するとうちは田舎なのでネカフェはありませんなどと言い出しそうだけど
提示された方法以外の手段も模索してみてはどうか。
想像力のなさ応用力のなさを丸出しにすると限りなく答えに近いものを出されてもまた
「これでは症状が改善できませんでした」「具体的な答えそのものを教えてください」って言うんだろうなと思われてしまう。
＞わかっているテキストボックスだけのその場しのぎだけのコードならなんとか作れそうですが、
＞根本的に問題を解決するコードを書きたいのです
＞教えて下さい
自分で考えずに、ただで俺たちにコードを書かせたいってか
それと・・・
＞ちなみに、このコードで何をやろうとしてるかと言うと、
＞オンラインゲーム中に相手のマウスが自分の画面に反映される
＞また、相手のマウスに自分のマウスが追従する(<button>移動→focus()で)
＞といったことをしようとしています
FPSかなんか知らんがネトゲで不正な事しようとするな
別フレーム（frame2）のフォーム内容の操作をする方法を探しています。（テキストボックスの内容を変更する、消すなど）
このサイトで解説している方法を使い、
ttp://homepage2.nifty.com/BASH/WWW/JavaScript/anotherpage.html parent.frame2.document.getElementsByName("textbox").innerHTML = "ああああ";
のように、他フレームの要素にアクセスする方法を知りました。
各フレームのhtmlがローカルファイル同士や、同一サイトのものならこれで問題無いです。
しかし、片方が他サイトのものになると、この方法では内容の操作ができないようです。
parent.frame2.documentから下の階層のオブジェクトが取得できていないようです。
何か良い方法は無いですか？
セキュリティの問題
同一生成元ポリシーでググるよろし
解決策としては同一ドメインにCGIかなにかを設置して、他サイトとの通信をそこで行ない、
iframeからはそのCGIを呼び出すとかなんとか
ttp://www.logic-sunrise.com/のサイトの 中央の×で閉じれるメニューと
左側のーで閉じれて、□で並び替えができる。
これはどのようにやったらいいのでしょうか？
ソースを見てもよくわからなかった為、質問しました。
とりあえず思いつくキーワードだけ
・中央の×で閉じれるメニュー
「アニメーション」
・□で並び替え
「ドラッグオンドロップ」
John Resigにでも聞いてみようか
PCがないから調べれないのでコードを丸ごと全部教えてくれと言っているわけではありません
「こうすれ」と日本語でヒントが貰えればもちろん後は自分で調べてコードは書きます
JavaScriptは１年半前から始めたのですが、多分今までに４、５回このようなことを思い、頑張って調べはしました
アクセス制限サイトもProxyサイト経由でおそらくググって数十件は全部見ましたが、それっぽいのは大量に見つかるのですが
探すのが大変下手なのか目が悪いのかコードの理解が低いのかで、今回の問題を解決するコードを書くことが未だにできません
>133 こちらも語弊がありました
私が今作っているオンラインゲームでの話です
今はオセロくらいしか考えてませんが、今後レースゲーム等を作ったときに相手のリアルタイムで滑らかな状態反映が必要なので
半分実験的に、相手の擬似マウスを表示して、実際に人間とプレイしている感を出そうという魂胆であります
>131 わかりませんが、
今の段階ではこのコード以外はほとんどAjaxの処理で、そこまで複雑な処理は書いていないので、きっと動いてくれると信じてます
逆に自分が書いたコードがIEで１発でまともに動いたことは１度しかないのでそちらが心配です
もう少しゲームが完成したら、いろんなブラウザを入れている友達に確かめてもらうつもりでいます
ちなみに一応言うと、最終的にｉモードブラウザ2.0で動けばいいかと思っています
私自身がｉモードかフルブラウザでしか作成できませんし、ネカフェ等はお金が０だし学生なので行かれませんですし、
図書館のPCを無断でプログラミングのために占領するほどの勇気と行動力がないので
迷惑にならない月一くらいでその友達の家に行って使わせてもらうくらいしかないといった有様ですので
それから、１日１レスしかできないのはibisの無料お試し版を使って書き込んでいるためです
ttp://twitter.com/creditcardmiu/status/25025421209 jQueryは使ってみた？
ttp://semooh.jp/jquery/api/events/mousemove/fn/ 元のページが書き換えられてしまいます
元のページでjavascriptを実行したときに、新しく開いたページを書き換えるにはどのようにするのでしょうか？
ajaxなんか要らんけどね。
本人が対応できたと言うんだから、そっとしておいてやれ
画像でランダムはある程度わかるけど
表セルの中に表示するのはどうすればいいの？
ランダムリンクと併用した場合
javaで指定するんじゃないの？
うるせえはげ
別のページに移動するのかリロードなのか閉じられようとしているのか
判断することはできますか？無理ですか？
／ ＼
【別ページに移動？】 NO → 私は今閉じられようとしている
＼
YES → 死ね
しかし、gooの辞書の音声再生を今日初めて使ったところ、そのレスポンスの速さに驚かされました。
ttp://dictionary.goo.ne.jp/leaf/ej3/17838/m0u/commonly/ 自分のサイトはこれに比べるとクリックした後に再生するまでの間に若干のタイムラグがあります。
（ためしにこのgoo辞書の音声をダウンロードして使って見ましたが、
同じ音声データでもタイムラグが発生していました。）
このページではどのようにflashを再生しているのでしょうか。
その仕組みがわからなかったのでわかる方いましたら教えて頂けないでしょうか。
クリック検知はflach側。よってJSでは音を鳴らしていない。
Flashを使わない方法だと、HTML5でaudio要素がサポートされるのでそれを使う
<audio controls="true" autobuffer="true">
<source src="audio.ogg" /> <!-- Firefox -->
<source src="audio.mp3" /> <!-- Crome,Safari -->
</audio>
早く統一しろや
っていうのはnamespaceですか？
window.net.2ch.hibari.hp.1284091954 = {};
好きなのをどうぞ
だからのやり方も、被らない名前ならOK
こんな記述なの？
hibari.2ch.netの反対からでそのあとにディレクトリがきてるけど
そういうもんなんですかね
com.example.www
質問の意図がよくわかんないけど、
var Hoge = {};
と
window.Hoge = {};
は同じってのはOK？
グローバル領域である、windowに対する名前空間の汚染を少なくするために、
windowにオブジェクトを作った上で、そのオブジェクトに変数やら関数を宣言するのは、よくあるテクニック。
var Hoge = {};
Hoge.array1 = [2,3,4];
Hoge.func1 = function() {};
国→都道府県→市区町村→番地、って順番で書く住所と一緒で、大きなくくり→小さなくくりの順番になってる
やはりnamespaceだったんですね
同義だったんですね
とあるサイトを見たらそのように定義してあったので
prototype演算子使ったものと書き方がかぶりますよ
なんか混乱してきた・・・
スルーしてください
JavaScriptややこしいorz
━━━本スレに書く事を許される者は以下の通り━━━━━
一、正しい(validな)HTMLとは何か知っており書ける者
JavaScriptの質問に、そこまでいらねーだろ
HTMLのタグに絡む質問をする奴は、最低限自分が質問する部分ぐらい知っててもらわんと
最初にブラウザ開いたときはイメージが描画されず、
リロードしたらようやく表示されます。
これは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);
}
のように変えたりいろいろしてみましたが、エラーが出てうまくいきません。
どなたか解決方法を教えてください。
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で直接再生するほうがレスポンスが格段にいいようですね。
レスありがとうございます。
setTimeoutを使うとは目から鱗です。
しかしそれでもリロードしないとだめでした。
ちなみに動作確認はFirefox3.6.10で行っています。
これをクリアしたら他のブラウザでも確認する予定です。
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");
};
ありがとうございます。
しっかり動きました。
少し不明な部分もありますが後は調べて頑張ります。
その項目は、HTMLがボロボロのinvalidなのにJavaScriptで操作
しようとして動かんとかほざいてる人が続出したので入れたもの。
そういう場合、HTML直して貰わんとどうにもならんでしょ？
htmlを全て読み込んでから実行する方法はありますか？
まあ、onloadとか調べてみたら。
ブラウザはchrome6です
IEでのオブジェクトのJSON化はどうやればいいのだ。。。
ありえないだろ
getElementsByTagNameでElementを取得した後，
このsomefuncの実引数を取り出す簡単な方法はありますか？
element.onclickがfunctionオブジェクトだから，なんかできそうな気がするのだけど，
探し出せませんでした。
現在はinnerHTMLの後，正規表現で切り出してますが，スマートさに欠けるし，
メンテナンスが悪いので，お知恵を拝借。
やってみたけどそうみたいだね
でもaddEventListener使えば普通に読み込み後に動作したよ
そもそもイベントをHTML上に書くのが間違い
var a,bみたいな書き方ってできませんでしたっけ？
ｲﾗﾈ
できるけど、前者は変数 a のみの宣言。
a.hoge()と書けば任意のコードが実行出来ますが、hoge()をオブジェクト定義時に書かなくても任意のコードを実行させるにはどうしたらよいのでしょうか
例えば
a.kage()//alert("kage")
a.mage()//alert("mage")
のような感じで。
a.hage = function() {
alert("fusafusa");
};
ajaxでデータ読み込んで動的にイメージリスト作成し、スライダーさせたい。
ttp://cssglobe.com/lab/easyslider/01.html 概要としてはこんな感じ。このプラグインを使おうと思ったが機能がたりない。
自作することにした。
【今試みてる方法】
・ajaxで並ばせるイメージのデータを読みこむ。
・imgをliで囲って横並びにさせる。
・親ボックスの幅を決めてoverflow:hiddenにする。
・スライドボタンクリックでulを横にずらす。
しかし、ul自体親ボックス以上の大きさにはなれないわけで、
そして、ulを横に動かす方法もイマイチぴんとこない。
なにかいい方法はないか。
よろしくたのむ。
scrollLeftだったかな。
イマイチわかりにくかったので補足。
・表示データとして150px×60pxのイメージが30個ほどある。(管理画面から登録するので固定ではない)
・スライダーのボックスは5個程度常に表示している。
・左右のボタンをクリックするとスライダーボックス内のイメージが左右にスライドし、一つのイメージが無くなり、新しく一つのイメージが挿入される。
こんな感じ
あっちはきちんと質問閉じてるじゃねぇか。
元々こういう口調なだけだ。
まぁ、気に入らないなら仕方ない。
答えてもいいと言う奴だけ答えてくれ。
閲覧済みに（リンクをクリックしたように）する方法が
あれば教えてください。
自分が分からない事は他人が知ってることもあるし、他人が知らない事を自分が知ってることもあるし
礼儀は大切だよ
:visitedと同じスタイルを適用すれば良いんじゃないの。何か問題有るの？
あんたいいこと言った!!!!!
__noSuchMethod__ 非標準
閲覧済みのスタイルは:visitedで可能なことは分かるのですが、
閲覧済みであることをブラウザに教える方法が分からないのです。
そこで「閲覧済み」にしたいURLを読み込めばいいんだよ
それいい考えです。ありがとうございます。
window.body.onloadでひとつ
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("閲覧済みだよ");
}
参考までに教えてほしい
ついでにFLASHクッキーも
Chromeではもうはできなくないし、Firefoxでもできなくなる
他のブラウザも追従するだろうね
具体的な被害はよくわからんが、単純にキモいよね。
ブラウザを落とすときに履歴とCookieは消去してる。
あと最近いろんなとこでTポイントカードを持っているか聞かれるけど、
あれもキモいから俺は提示しない。
正気か
IE6のようなウィンドウが開くブラウザでは opener.focus() でいけることはわかったのですが、
例えばFireFoxのようなタブブラウザでポップアップの代わりにタブで開くような設定をしていると、
親ウィンドウをアクティブにできません。
JSでタブを操作する方法を教えていただけませんか
というかそもそもそういうことは可能なのでしょうか
意図はなくてもそういう怪しいことをしただけでブラックリスト入れられることもあるから注意しろよ
あー互換だと使えないね。IE9
Ie8は多分通常表示で試してたわ。
JSONオブジェクト自体が使えなくなるのか。
なんだよこの仕様はｗ
IEが互換表示モードかどうかを判別する方法ってあるのかな？
まんま "JSON" in window で判定できないか？
ぐぐれ
これも一種のシンタックスシュガー。
簡単な書き方や省略した書き方を許す仕様のこと
それで合点がいきました。ありがとうございました。
レスありがとうございます
window.body.onloadもやはり読み終わる前に実行されました
chromeは面倒くさいです
ぼくあてですか？既にコード出てると思いますが・・・
ブラウザのバージョンやモードを調べるよりも、
「ダックタイピング」の方が主流だぞ。
JavaScriptでタブを操作ってのはできないような気がする・・
そのあたりはFirefoxで言うとアドオンの領域じゃないだろうか。
出来るブラウザで、どこまで出来るかは調べてないけど。closeで思った。
どういう意味で「ダックタイピング」を使っているの？
主流っていうか常識的に考えたらそうなると思うけどね。
そりゃあ、onloadを正しく使えてたらHTMLを読み込む前に実行されるわけがないんだから、
どんな間違い方をしているのか興味はあるな。一応、
window.onload = load();
に1票
IE, Firefox。
ttp://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で取得してＤＢに格納する。
②phpでhtmlを生成する（ブログtitleタグと記事titleタグを指定してＤＢから情報を取得するイメージ）
③生成されたhtmlを自動でアップロード（cronとかつかうのかな？）
【質問２】
そもそも動的なままでもＳＥＯに関係ないんだったら質問１はやる必要ないんだけどＳＥＯに誰か詳しい人いない？
とりあえずJavaScriptじゃHTMLのソース自体を触ることはできない。
すなわちスレ違い。
あと、「静的な」ページを作りたいのであれば、別にHTMLファイル自体を
生成して置いておくようなことをする必要は必ずしもない。
コンストラクタを使ってみたいのですが、
解説サイトを見てもどれもJAVAだかほかの言語をやってた人向けみたいで、
function Hoge(huga) { this.huga = huga; }
Hoge.prototype.piyo = function() { alert(this.huga); };
var unko = new Hoge("うんこ");
unko.piyo();
↑こんなコードだけあって、ほら簡単でしょう？みたいな説明しかなく
具体的にDOMとどう絡めて使うのかわかりません。（alertは使っているけどそういうのじゃなく）
こうときに使えば効果を発揮するよ！みたいな短い例（上記よりは長いの）を教えてください。
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.element.appendChild
だった
どうもありがとうございます。
function hoge(A,B) {
var element = typeof A === "string" ? document.getElementById(A) : A;
element.appendChild(document.createTextNode(B));
}
hoge("unko1","add");
hoge("unko2","add2");
みたいな感じのものとどう違いますか？
メソッドをプロトタイプ経由にすることでインスタンス毎にメモリを消費しなくなる、
とかいう話に繋がってくるのですか？
メモリがどう使われているのかとか見方がわからないのでメモリの話は実感できなくて。
一番初めに呼ばれる部分のこと。
変数の初期化や設定などをそこで行う。
の場合
> 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する。
この例もウンコをオブジェクトとして考えた場合、変形するとかちぎれるとかが当てはまる。
流すのはトイレだしウンコを出すってのも動物の動作なのでこれはウンコ自体のメソッドとは言えない。
解説サイトではみたいにメソッドひとつだけでしかもインスタンスを作ってすぐにメソッドを呼び出している例ばかりだから
とどう違うんだろう？って思ってたのですが
あらかじめたくさんメソッドを定義しておいて必要になればそのつど呼び出せる・・・ってことですか
変形するとかちぎれるとかそういう
風力とか重力とかそういう力がかかってるからだよね
風力や重力による物と考えると・・・
オブジェクト指向って難しいね
＞Hogeクラスのプロパティであるthis.huga
無茶言うな
そこミス上に統一しといて
あとデザインパターンを覚えるならPHP
----------------------------------------
var iURL = document.getElementsById("id").src;
alert(iURL);
----------------------------------------
↑idを指定した場合alertにURLが表示されます。
----------------------------------------
var iURL = document.getElementsByTagName("img").src;
alert(iURL);
----------------------------------------
↑こちらだとalertにundefinedと表示されます。
ByIdはひとつだけImg要素を返す(Elementで複数形でない)
ByTagNameはリストで返す(Elements複数形)
後者は[0]とかが必要
その書き方のほうが分かりやすいと思ったらそっち使っていたほうがいいよ。
すごい！有難うございました！
英語圏はfoo bar
日本語圏はhogeとちょっとそれをいじったhuge huga hage なんて感じのものが多い
unkoとかmankoは2chでしか使われてない（もしくは2chネラーがブログなんかで使ってるだけ）
unkoは食べるものによってはあんまりでないけど、繊維の多いものとるといいと思うよ
ttp://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E6%A7%8B%E6%96%87%E5%A4%89%E6%95%B0 見たことなかったけどな
個人的にはこっちの方が馴染みが深い。
ttp://kmaebashi.com/programmer/hoge.html スルーとか見ててかわいそうだｗｗｗｗｗｗｗｗ
unkoはやはり２ちゃんだけですか
piyoがマイナーな方だったとは
閉鎖的な環境なんで他人のソース見る機会がネットくらいしかないもんで・・・
radio / checkbox の変更イベントを設定しています。
同名name での値の変更を知るにはどうすればいいのでしょうか？
<input type="radio" name="hoge" id="hoge1" value="1" />
<input type="radio" name="hoge" id="hoge2" value="2" />
こういうフォームの場合です。
IDが違うのでIDで見る
ここってID出さないとダメなんですか？は読みましたけど
( ﾟдﾟ )
こんなんでどう？もっとスマートに書けるのかも。
<!DOCTYEP HTML>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="
ttp://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>
ttp://acapulco.dyndns.org/exifutil/ 使おうと 思ってるんですが、上手くいきません。
原因調べるにはどうすればよいのでしょうか？
はー、JSでバイナリファイル読むなんてかっちょいいな！
原因は作者に聞けば。幸い日本人みたいだし。
自分でソースを追って、誤りがあれば訂正して送ってあげるのが
利用者のあるべき姿な気はするが。
作者と同じサンプルでだめなら作者に質問すれば
そうじゃなきゃ設置ミスでしょ
firebugとかそこらへんで自分が書いたコードをブレイクすればいい
ありがとうございます。
この方法ですと、初回checkedはイベントで拾えるのですが、
一度選択すると、二回目以降は拾えないんですよね…。
確かに id="hoge1" は value="1" に設定されたので
二回目に選択しなおしても変化がない…という判定にされるのは分かるのですが。
上から順番に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>
--------------------------------------------------
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);
}
わかりません。なのにコードの最後は動くってどういうこと？
for で数字が変わっていってどの要素でも最後の数しか認識しない場合は
関数でくるんでやるのをよくやるんだけど、他になんか良い方法ってある？
JSの変数は関数スコープ
変数jがどこで宣言されているか（どこに属するか）を考えてみれ
＞aEL[j].onmouseover = function() {
＞alert(aCNT[j]); ←jだと動かないが数字を入れると動く
そりゃうごかねえよalertの行の時点で j の中に数字ははいってないもん
理由は相棒の参照
俺はの何が問題かは理解してるよ？
過去にこれではまったことがあって、その時は無名関数でくくって実行ってのをやったんだ。
他にも回避のための手段あるなら知りたいなって思って312を書いた。
ちょっとちがくね？alert(j);なら4返してくれる。
jはforが回り終わったあとのだから、常に4が入ってる。
aELは長さ4だから(ここも正しくはないが)、5番目の[4]はundefined
よく有るパターンですねわかります
・click時に getElementsByTagName('a') を実行して一致するまで比較する
・属性値に埋め込む
自分なら属性値に埋め込むだろうけど、そもそもindex値を必要する設計にはしないなあ。
ちょｗｗ 一応の1行目の文について言い訳しておく。
「わかりません。」と書いているのに「j【alert(j)】だと動かないが数字【を返すはずのaCNT[j]】を入れると動く」ってのはどういう事
【】内だと勘違いして、動いているのにわかりませんって言っているように見えたんだ。sﾏﾝ
さんくす。IEだとforが糞だから後者のほうが良さそうですね。
関数内で実行したら、メモリリークする…。
Internet Explorer リーク パターンを理解して解決する
ttp://msdn.microsoft.com/ja-jp/library/bb250448%28VS.85%29.aspx with ({j;j}) { .... } 良い方法かどうかは知らない
あとこの例には当てはまらないけど、マウスオーバーされた要素に対して
何かしたいとかだったら単にthisでいい
ttp://gihyo.jp/dev/serial/01/crossbrowser-javascript/0005?page=2 j;j 訂正→ j:j
複数のプルダウンメニューから選択して検索ボタンをクリック、
該当するデータをリスト化（<ul><li>～</li><li>～</li>・・</ul>）して
htmlに出力するような事をしたいんですが、javascriptで可能でしょうか。
データはxmlで管理するのがよいかなと考えているので、
jqueryでxmlを読み込んで、該当するデータだけを出力、
ってな感じの流れを想定しているんですが。。
可能
それはもう修正されてる…
ttp://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おそろしいね
できる
item.addEventListener('mouseover', function (evt) {
item.remoceEventListener('mouseover', arguments.callee, false);
}, false);
イベント発生させないとだめなのか
それはそれでどうなの
ありがとう。
IE6SP3 で修正されたのは知っていたんですが、今でもリークパターンの指摘を受けるのでまだ対応すべきと認識していました。( でもメモリリークに触れられていたり)
実際のところ、今はリークパターンを考慮しない人が大半なのかな…。
どんな方法であれ、addEventListener 時に指定した関数オブジェクトを指定できれば、removeEventListener できる。
名前付き関数を使えない理由は何なの？
ES5でもブロックスコープは定義されなかったからね・・・
letが使えればもっとスマートに書けるんだけど、クロスブラウザ不可
callee、将来的にはどうなるか不透明すぎるのだけがネック
Strict ModeだとTypeError投げるようになる（実装してる処理系ないけど）
あとはYコンビネータ実装してゴニョるとか
レスへのレスにレスしてるだから気にしないで
具体的には
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みたいなのが作れると
記述がシンプルになるなと思ったのですが
思うように作れません
var str = "xxx";
function a(){
return "[" + this.str + "]";
}
function b(){
return "<" + this.str + ">";
}
こんな感じにクラスで書きたいんですけど方法ありませんか？
};
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]"
ＡとＢの間ではＪＳで外のデータを読み込んでいるのですが、そこのリンクを新しいウィンドウで表示させたいのです。
自分のサーバーの中のデータではないので、改造できないのです・・
ヘッド内に<base>を使うと、ページ全体になってしまうし
ＡＢ内のソースもいじれないので、rel="external"もできないし
何か方法はないでしょうか？
それも出来ないっていうなら仕事やめた方がいい。
CTRL+左クリックかShift+左クリックで開ける
全然意味がわからんけど、jsでiframe作成してページ内に貼っていて、
そのフレーム中のリンクをクリックすると新しいウィンドウで開くようにしたいってこと？
縦の長さを取得していますが、ページによっては、
ブラウザの長さを取得できない場合があります。
何か、条件がありますか？
ぐぐったら結構出てきたよ
ありがとうございます。とりあえず、それらの単語でぐぐってみたら
document.documentElement.clientHeight
というのも使える感じです。仕組みはよくわかっていませんが。
何故か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
--------------------------------------------------
<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>
--------------------------------------------------
マジレスしてあげますがそれは５大ブラウザ全てに対応できないから
>>310-
ついでにimg.srcのマッチもっと厳密にしたほうがいいよ。
(function(g)
{
for(var i=g.length ; --i>=0 ; ) with( g[i] )
{
if( (width != '')||(height != '') )
{
～略～
}
})
(document.getElementsByTagName('img'))
</script>
としたときに、widthやheightが無いエレメントまで略部分にひっかかって、
変な値がwidth/heightに入ってるんですが、何故なのでしょうか。
わからないならwithは使わないほうがいいよ
ループを終えた後、一周目の x ループ内の iEL が、二周目の iEL を参照し続けているから。
何その Bookmarklet？ｗ
ブラウザが算出した値が img の width プロパティに設定されているのかと。
後、その with は止めた方がいい。
仮に img に width プロパティがなくても、スコープチェーンを遡って検索される。
成程、ブラウザが算出、ですか…納得しました。
わかりました。withは止めておきます。ありがとうございしまた。
なかなか良いものがありません。
・Ajaxでサーバーからデータを取得
・日本語入力でも問題なく動作する
・ページ表示後に動的に追加したフィールドにも適用できる
このような条件に合うものをご存知の方がいましたら、教えてください。
作れ
これはGoogleのインフラだからこそできる技だぞ
一般人がそのへんのサーバでやったらあかん
やっぱり無いですか・・・
検索用ではなく、入力画面で使う予定です。
まぁ結局負荷はどのくらいの人が同時に使うかによるけど
それは設計次第じゃね？
単語というか、自前のデータです。
多対多のデータの入力するさいに、
量が増えると、セレクトボックスやチェックボックスじゃ入力し辛くて・・・
別画面にするのが無難なんですかね？
数が少ないようであればスクリプトに直接埋め込むとか、
リストを静的なファイルに書いておいて
画面表示時に全部読み込むとかって手が使えると思うけど、
候補ってどれぐらいあるの？
アクセス数はリリース前なんで、なんとも・・・
初回に全データを読ませる方式だと、
ttp://www.enjoyxstudy.com/javascript/suggest/ がありますが、このライブラリは、フリガナから候補を絞るって言うのができないんですよね・・・
技術的にはそのjsのisMatchメソッドをちょっといじって与えるリストをそれに合わせればふりがな対応可能。
ライセンス的には自分でしらべてくれ。
うーん、できれば改造はしたくないですねぇ
となるともう、左右にリストボックスがあって移動させる奴か、
インターフェース自作するしかないですかね・・・
「項目を追加」みたいなボタンでフィールドが増やせて、
オートコンプリート付きで入力できるのが理想なんですがね・・・
Webフレームワークのチュートリアルとか見て、インターフェースの参考にしようと思ったんですけど、
データが少ないときのことしか考慮してないのであまり参考にならないですね；
鯖のTIME_WAIT設定とポーリングの頻度次第で
秒間1000リクエストぐらいいっちゃうと共有レン鯖だと止められる可能性がある
Operaは変換中のonkeydownを認識出来ないからだと思う。
YahooはSetTimeIntervalを使ってないからOperaでは日本語のサジェストが弱い。
SEO対策無双が値上げするかもしれないぞ。値上げする前に申し込もうぜ。
ttp://hibari.2ch.net/test/read.cgi/hp/1251295826/290
SEO(笑）
isMatch書き換えたくない理由ってなに？
ライブラリが変わったときに大変だから？
CEOは最高経営責任者な
CTO(笑)
おなかいっぱい
charsetを上書き指定して取得、指定されていたらそのまま何もしないで取得、ってやりたいのですが
getResponseHeader()が使えるのはonreadystatechangeのreadyStateが4になってから、
overrideMimeType()が使えるのはsend()の前で、この時点ではgetResponseHeader()が使えない
でうまくいきません。どうすればいいですか？
まずHEADでHeaderを確認してその後おもむろにGETですか？
ttp://sakuratan.biz/azlink/widget/ ここの「主な特徴」の4番目にあるjavascriptの処理待ち回避ってどうやってるのか教えてエロイ人！
idかclassにcssでdisplay:none;設定しておくのはダメ？
SimpleJS使えよ
不審がられるでしょうね
固まらないように、処理をsetTimeoutで刻んでる。
Minifyかかってるから細かいことはわからんので、
詳細は作者に聞け。
ミサワ乙
this.closure = (function(){
var count;
return function(){
this.meth();
}
});
this.meth = function(){}
}
クロージャ内から同じクラスのメソッドmeth()を呼びたいんですが
thisでは参照できません、どうやったら呼び出せますか？
var self = this;
this.closure = (function () {
var count;
return function () {
self.meth();
}
});
this.meth = function () {}
}
どうしても、クラスメソッドを呼び出したいの？
this はインスタンスを指すのだから、this.meth はインスタンスメソッドにナルト思うのだけど…。
this.closure = (function(that){
var count;
return function(){
that.meth();
})(this);
};
this.meth = function () { ; }
}
# サンプルだからいいけど、"class" は予約後だから注意した方がいいかと。
書き方が悪くてすみません、インスタンスメソッドを呼び出したかったのです。
ありがとうございます。
思う通りの動作をするようになりました。
ちなみに、別の解法はありますか？
ありがとうございます。
よりソースがスマートになった気がします！
もし、コンストラクタ内で共有させたいプライベート変数がなければ、prototype の方が良い気がする。
function Hoge () {
this.closure = (function(that){
var count;
return function(){
that.meth();
})(this);
};
}
Hoge.prototype.meth = function () { ; };
this.closure = (function() {
var count;
return function() {
this.meth();
};
}());
this.meth = function() { alert('called'); };
}
はい？
---------------------
<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日本語入力の補完候補が優先されてる
こういう場合ってどうするんだろうね
jsのだけ使うようにした。
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"
は無視して。
誤：JSで使える
正：テキストノード
です。すいません
□→チェックボックス
[ ]→テキストフォーム
こんな感じのフォームで商品名にチェックを入れて数量に数字を入れると
合計金額を計算できるようにしたいのですが、数量がリストメニューだと
var shoukei = price1 * document.form1.volume1 .selectedIndex;
このように書いて動くのですが、これをテキストフォームに入力した
値で計算するにはどう書いたらいいんでしょうか？
試しに
var shoukei = price1 * document.form1.volume1.value;
としてみたのですが計算できませんでした。
チェックボックスのvalueには金額が入っています。
document.getElementById("volume1").value
にしたらいけました。
・全部でアイテムが30個ある（データベースから引き出して名前を表示）
・１ページあたり10個表示
・次へ／前へをクリックして、次の10個／前の10個を（dbアクセスして）表示する
・ページ全体の更新はしない
こんな感じです。
凄くありがちだと思うんですが、どういうキーワードで検索したら良いのかわからず
困っています
すみませんが教えてください
jqueryを使うのだと嬉しいです（jqueryの勉強もしたいので）
よろしくお願いします。
Ajax ページ移動
とかさ
ajax 動的 コンテンツ
とか
クライアント側でやることは
・ページインデックスを保持
・次へ／前へ をクリックすると、ページインデックスの値を更新し、サーバーにクエリを投げる
・返ってきたデータからコンテンツを生成し、現在のコンテンツと差し替える
という感じかな
jquery なら load メソッド使えば簡単に出来そうだな
ttp://tanpopodan.web.fc2.com/i/G.txt 基本文はperlなのですが、JAVAでアラートを表示させています
ここにフォームの入力した文字の一文字目が0だった場合にエラーを出したいのですが、どうすればいいでしょうか？
（00100 といった様に入力されるのを防ぎたい）
整数だけが入力されることが前提ならこんな手も使える：
var p = ... // 入力される文字列
if (p != "" + +p) {
//エラー
}
- 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("金額がおかしゅいです");
+ }
}
- 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返すの忘れてた
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だけを取り出したいのですが、どうすればよいでしょうか？
for (k = 1; k < list.length; k++) {
a = rotate(list,1);
if (k==2) {
break;
}
}
return a;
2回目以降rotateしなくていいならこれでいい
ここには別の計算式が入ります。
リストの全てのrotat関数値を試す事が要諦なのですが。。
配列のコピーでググればいいんでない
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
}
すなわち、全てのローテーションのうち、
リストの一個目の数値が一番小さいものを取り出したいのです。
それにその条件だと「一番小さいもの」を取り出すことはできない
ｘ(a[0] > b[0])
○(a[0] < b[0])
そうですね。ググって見ます。ありがとう
ありがとうございました。解決しました。
文字列→数値変換の関数で
Number(),parseInt(),eval()これらは単数字のようです。
リストをそのまま文字列→数値列変換したいのですが良い方法ありますか？
あと配列な。
ttps://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/map map ってIEで使えないんじゃなかったっけ？
だからそういう場合に備えてご丁寧にprototypeに追加するコードまで書いてある
ありがとうございました。解決しました。
方法がよく分かりません。
--------------------------------------------------
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(){ ? };の部分に
上記のようなクロージャーを入れたいのですがどうやればいいでしょうか？よろしくお願いします。
なにやりたいかようわからん
var obj = {
method1: function(){...},
method2: function(){...},
...
};
という構造だと考えると、
method1 では n が elements.length + 1 回現れるわけだが、
method2 ではどの n を反映させたいの？
下は上でもやってる通り
el.addEventListener('mouseover', (function(){...})(), false)
みたいなことがやりたいってこと？
別に配列作っておいてそれを使うのは駄目なの？
マウスの位置座標を取得することは可能ですか？
こんなリンクをjsで作るにはどう書けばいいですか？
ほい
document.write('<a href="javascript:void(0)" onclick='func("hoge"); return false;'>');
document.write()が独禁法違反……NAOシフト思い出してワロタｗ
どっちが好ましいと思いますか？
やりかたが分からないのに試せ言われても困っちゃう
ヒント
・addEventListener / attatchEvent
・document.createElement
#だと対策しないとページの先頭にとんじゃうから気をつけろよ
理想を言えばonclickかaddEventListener
どういう使いかたをするかにもよる
現在ではjavascript:スキームを使ったほうがよい場面は少ないので、＃でいいと思う
ページ内遷移させたくないならpreventDefault()やreturnValueの設定を忘れずに
JavaScript無効時に意味を持たないアンカーはJavaScript側で生成・挿入したほうが無難だったり
a要素ライクな体裁を持たせたいがIE6対応が必要な場合にはa要素を使うしかなかったり（CSSの疑似クラス未対応問題）
単なるボタンとして使う場合は、できればWAI-ARIAのroleを持たせてやったほうがよかったり
WCAG 2.0のシングルA対応するならもっと色々考えることがあったり
そのへん全然ワカンネ、というなら最初にいった結論に戻るけど#一択が無難じゃないのかな
style属性で疑似クラスを表現する方法を策定中という記事を読んだことがあるけど
あれからどうなったんだろうな
ttp://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タグはプログラムで自動生成されるので、そちらを弄ることができないのです。
対象となるエレメントをXPathなりquerySelectorAllで取得して
それにaddEventListenerとかすればいいんでないの？
分かってなくて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>
そりゃDOMツリーが完成してないからじゃないか？
alert(document.forms.form);
ってしてもundefinedになるでしょ。
script要素を後ろに持ってくるか、DOMContentLoadedを待とう。
でも本番環境に適用したら反応しないので調べたら、
name="form[blog]"のように[]を含んでいるのが邪魔してるようです。
よく見たらID属性もあったのですが、そちらは[]がありません。
ID属性で指定する方法も教えていただけませんか？
元々PHPでWEBサイトを作っていました。
JavaScriptのエフェクトが気に入ったのでJavaScriptを勉強しました。
すると、PHPでもJavaScriptでもどちらでも可能な部分が出てきました。
例えばフォームの入力内容をチェックするコードなどです。
そゆときはどちらでやればいいのでしょうか。悩んでます。
PHP側で送信時にチェックするのはデータを安全に受け取るため
両方でやるべき。
手間とサーバーの負荷を考えるとJavaScriptだが、
JavaScriptがオフの環境もあるし、
パスワードなんかはJavaScriptでは無理。
どうしても二者択一ならPHPだが。
querySelectorでもgetElementByIdでも好きなの使えばいいけど、
いずれにせよ、DOMについてちょっと知っておいたほうがいいと思うよ。
JavaScriptでのチェックをすり抜ける方法はあるからな
実際はselectタグじゃなくてinputタグで行っていたのですが、
キー入力しただけでは反応しなくて、
フォーカスが移動しないと、onchangeは働かないのですね。
リアルタイムな変更に対応するにはどうすればいいですか？
見張れ
漢字変換をしないならonkeyupで。するのなら定期的に中身を
取り出して前と変化したかどうか調べるしかない(ブラウザに
よって違うので、主要なブラウザどれでも動くとなるとそうなる)。
WebKitだとlink要素で指定したAlternate Stylesheetsが含まれない
xml-stylesheets命令ならOK
その元となった文字とマッチングさせたい（文字列比較で同一の文字として扱いたい）のですが、
一覧を自前で保持する他に、組み込み関数等を用いた適当な方法はあるでしょうか。
ブラウザ/JavaScriptエンジン依存でも構いません。
Google Chromeのページ内検索だと、欧文合字どころか〼（ます）とか〆（しめ）とかまで引っかかるので
何かうまい方法があるのかと気になって……。
こういうコードを貼りつけてもらう系のって、やっぱりjqueryとかのライブラリ使わずに
生javascript直書きで実装した方がよいでしょうか？
例えばjquery使って実装したものをユーザーさんが自分のサイトに貼り付けたとき、
そのサイトでprototypeとかゴリゴリ使っていたら衝突してしまったりするのではないかなと思いまして。
ご意見いただけると嬉しいです。
たどれるスコープ内にあるものなら、
firebugがなくても、自分でループ書いて掘ることも出来よう。
逆に、たどれないスコープにあるものだったら、
firebugがあっても無理なんじゃないかね。
例えば
var a = 1;
って書いたら、window.aとしてたどれるけど、
(function(){
var a = 1;
})();
って書いたら、手が届かないじゃん。
無名関数の外にあるものを取得する場合はこんな感じ？ですか？
javascript:(function(a){for(var i in window){a+=i+" : "}alert(a);})("");
もともとあるwindowのプロパティは拾わないようにするにはどうすればいいんでしょうか
Firebugのデバッガ使えばそのaも見ることできるよ
Firefoxなら 'propName' in window.__proto__ で元々持ってるプロパティを選別することができると思う
まとめると多分こんな感じ
javascript:(function(a){for(var i in window){if (!(i in window.__proto__))a+=i+" : "}alert(a);})("");
どうもありがとうございます
ステップ実行するかconsole.log(a)で見れるよ
<div class="hoge">
<p>
<h2>
<a href="
ttp://hogehoge">リンクテキスト</a> </h2>
</p>
</div>
という部分から、「リンクテキスト」という文字列を取り出したいんですけど、
何故か中々うまく行きません。
どういった方法を取るのが良いのでしょうか・・・アドバイス頂けないでしょうか
a要素のinnerHTMLでもfirstChild.nodeValueでもchildNodes[0].nodeValueでもでも。
なにをどうしたらどうなるだろうと思ってどうやったらどううまくいかなかったのか
を具体的に。
aタグにIDをつけたらどうでしょうか？
<a href="
ttp://hogehoge" id="test">リンクテキスト</a> <script type="text/javascript">
alert(document.getElementById('test'));
</script>
それじゃHTMLAnchorElementでtoString()実行された結果の[object HTMLAnchorElement]しか表示されんだろ
（IE6やIE7は除く）
の方法に加えてtextContent（IE は innerText）も選択肢に含められると思う
pの中にh2とか馬鹿じゃね
すいません 間違いました
alert(document.getElementById('test').href);
これでどうでしょう？
文字列だったら
alert(document.getElementById('test').innerHTML);
ですね
element.appendChild(document.createTextNode("©"));
とすると、実際にはelementの中身は「©」になってしまいます。
本来の目的どおり「©」をappendChildするにはどうやればよいのでしょうか？
あれ？変換された？
©→©
©→&copy;
です。
そのまま書け
明快な回答ありがとうございます。
では改めて質問なんですが、
こういうキーボードから直接入力できない文字ってどうやって入力するんですか？
いちいちコピペ？
ttp://googlejapan.blogspot.com/2010/04/google.html 配置覚えられるかｗｗｗと思ったが四月馬鹿ネタなのか
ネタとして買ってみたい気持ちでもあるが
ありがとうございます。漠然としすぎました。
上記（）のような構造（これが繰り返しある）をしているサイトの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が返ってきたり・・・
たぶん初歩的な部分が分かってないんだと思うんですが、引き続きアドバイスお願いしたいです
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);
}
}
}
代書屋さんにある和文タイプみたいだ。
試してみます。
動かないです；；
全角スペースだからちゃんと半角に直してね
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/7_Lexical_Conventions.html#section-7.2 本当に丁寧にありがとうございます。
ただ、何度やっても、Undefinedしか表示されないです；；
nodeType == 3（テキストノード）のときしかalert出ないからUndefinedは出ないはずなんだけど
ミスってたすまん
- var t = a[j].firstChild.nodeValue;
+ var t = a[j].firstChild;
でもt.nodeTypeがnullになるからUndefinedにはならないんだよね、ちゃんと更新は反映されてるの？
ありがとうございます。書き換えてみると、今までで一番近い挙動になりました。
ただ、今回のalertは、hoge 内のa要素すべてのテキストを順番にalertするような挙動のようです。
実際には、hoge 内には、4つのa要素があり、今回のを動かしてみると、4つのa要素のテキストが順番にalertされました。
自分が取得したいのは、2番目のa要素のテキストなのですが（1つめのa要素を見逃してました）、
のalert部分を、
alert(t[1].nodeValue);
とするのではいけないのでしょうか・・・？（ちなみにコレにするとalert自体がされなくなりましたorz
<div class="hoge">
<p>
<a href="
ttp://hogehoge0">リンクテキスト0</a> </p>
<h2>
<a href="
ttp://hogehoge1">リンクテキスト1</a> // これのテキスト部分を取得したい </h2>
<p>
<span>
<a href="
ttp://hogehoge2">リンクテキスト2</a> </span>
<a href="
ttp://hogehoge3">リンクテキスト3</a> </p>
</div>
Array.forEach(
document.getElementsByClassName('hoge'),
function (div) {
var link = div.getElementsByTagName('a')[1];
var text = link.textContent;
alert(text);
});
ありがとうございます！無事望んだ挙動が得られました。
アドバイス頂いた皆様ありがとうございます＞＜
・ループごとにスコープが生成される（はそんな感じ）
無限ループと同じでbreakすれば止められるよね
<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>
はfor-in文。JSにはforEach文なんてないよ。他の言語と混同してる
Firefoxにはfor each-in文というのがあるけどね
あとforEachは
ttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach#Compatibility と同等ってmdcに
いまだに「JSにはforEach文なんてない」などとぬかすか
スマンコ
こういう配列やオブジェクトの要素数すべてに対して
ループを行うものをforeach文というんですよ
JavaScriptの場合いくつかあるけど
このfor-inもforeach文の1つ
なんで「forEach」から「多言語で言うforeach文」って話になるんだ
520がそういう意図で聞いたというのなら、だね
その認識は危険
JSのfor-inはプロトタイプを辿るから他言語のforeachと違う
以前のバージョンのOperaだったか、後方から列挙していた
このスレでJavaScriptエンジンつくろうず
言語はC#で頼む
それはさすがに頭が悪い
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);
}
}
}
}
このコードが動きません．教科書のサンプル写しました．
だれか教えてくれませんか
あまり良いコードとは思えないけど、動くでしょ。
すみません．その通りでした．．．．
ありがとうございました
<!--
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を増やす処理ってどうすればよいのでしょうか？
関数の外で変数宣言すれば外でも値が保持される。
var $count;
でもページを再表示したら保持されないよ。保持したければcookieとかサーバーサイドで保存しないと。
余談ですがifの条件でcount2のfalseを評価してるからelseにはif要らない。この場合。
あと、ログインのスペルは log in だよ。
あと、JSで変数に$は要らないよ。あってもいいけど
最初に数値を代入しておかないと。
Perl側の処理とJavaScript側の処理を混同してるね。
Perlで生成したHTMLにあるJavaScriptから、Perlスクリプト内の変数に直接アクセスすることはできないよ。
フォームを使ってPerlスクリプトにパラメータをPOSTするか、
XMLHttpRequestでPerlスクリプトにアクセスできるようなJavaScriptをHTMLに入れておく。
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の使い方間違ってますかね？
なんつーか大混乱なソースだな。PERLとJSの変数を混同してるのって初めて見たよ。
まずはJS無しでPOSTの処理するサンプルでもいじって動作を理解したほうがいい。
サーバーサイド・クライアントサイドの理解をしっかり。がんばってね。
(ちなみにJavaとJavaScriptは別物で両方メジャーなのでよろしく)
WebProg板に行けばいいんじゃないの？
そして、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>
ただし、undefined を返す特殊仕様でレガシーコードへの対応が目的。あえて、document.all を使う意味はない。
CDがついてくるような本で、本の内容そのままのコードがCDに入ってるものは論外だけど
本はPerlの勉強には
ttp://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の勉強には
ttp://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
を使いました
英語版を訳してるものが多いから質が高い
正直、和書はなんちゃってプログラマー（ライターを業にしてる人）が書いた本が量産されてるので注意
ある程度書けるようになったら”プログラミング作法”も読むといい
改行なしで紹介してくれると有り難い。
Amazon.co.jp： 3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス): 大津 真: 本
ttp://www.amazon.co.jp/dp/4774142786 Amazon.co.jp： 10日でおぼえる Perl/CGI 入門教室 第2版 (10日でおぼえるシリーズ): 高橋 大吾: 本
ttp://www.amazon.co.jp/dp/4798109703 オライリー本は確かに良書だが、初心者が読むと挫折するような気がする。
JavaScript初心者 + 他の言語経験者なら、お勧めできるのだが…。
Amazon.co.jp： JavaScript 第5版: David Flanagan, 村上 列: 本
ttp://www.amazon.co.jp/dp/4873113296 Amazon.co.jp： JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス: Douglas Crockford, 水野 貴明: 本
ttp://www.amazon.co.jp/dp/4873113911/ Amazon.co.jp： 初めてのJavaScript 第2版: Shelley Powers, 武舎 広幸, 武舎 るみ: 本
ttp://www.amazon.co.jp/dp/487311425X/ Googleブックスで第一版を軽く読んでみたが、かなり丁寧に解説されている。
ただ、ねえ。丁寧すぎると読むのが面倒になったり用語がわからなくなって四苦八苦したりすることもあるので難しいところではある。
逆に説明が平易だと気をつけるべき点に触れられていないために誤解が生じる可能性があるのだが…。
何にしても根気が必要だと思う。
初めてのJavaScript - Google ブックス
ttp://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エスケープシーケンスに対応していないブラウザもあるので使わない方がよい」と書かれているのがやや気になるが、第二版では修正されているだろう、多分。
必要なことを必要なだけ教える教科書ではない
概ね、ES3 (
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ ), DOM ( ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/object-index.html ) に準じた解説だと思う。 Crockford氏の著書は明らかに独特の思想に基づいた説明だが…。(ES3 違反だからお勧めできない、という論調ではない)
オライリー本以外のお勧めは思いつかなかった。(最近は書籍よりも仕様を読むことが多いからなあ)
というか、皆(俺も含めて)オライリー本の話しかしないのなｗ
結局、お勧めできる入門書はないってことなのか…。
> Crockford氏の著書は明らかに独特の思想に基づいた説明だが…。(ES3 違反だからお勧めできない、という論調ではない)
Crockford氏は ES3 に適合した上で独特の思想を持っていると思う。
思想の是非はともかく、明らかに間違ったコードは書かない人なので同書がお勧めされるのも理解できる。
全てをその思想に委ねると信者と呼ばれてしまうかもしれないが…。
# ES3 を読めるようになると、Crockford氏がお勧めする理由が思想なのか ES3 に適合しているからなのか判断できて面白い。
初心者はあれを読んで感心し、中級者はあれにつっこみを入れる
サイ本を勧める人が多いのは、体系的な記述があれしかないから
所々微妙な部分もあるが、それを訂正しつつ読めば経験値２割増し
今すぐ使える簡単プラスがこうなったわけか
PerlとJavaはわければ合ってそうだしくっつけ方が間違ってるぞ
自分はこれで勉強した。
見たことないんで、どんな感じか知りたい
これかな？
今から新品で手に入れるのは難しそうだね…。
Amazon.co.jp： 入門 JavaScript (My UNIX Series): 久野 靖: 本
ttp://www.amazon.co.jp/dp/4756138713 これこれ。今となっては内容がちょっと古いけど。
ライブラリに頼らないDOM操作の方法を詳しく解説している。
他にも、初めての人向けに文法や標準オブジェクトの解説、
果てはLiveConnectでJavaと連携する話まで載っている。
で、小さくてそんなに厚くない。
function Mihon(){
this.a = 0;
}
Mihon.prototype = {
increment : function(){
this.a++;
}
};
var m = new Mihon();
m.add();
こんなんでいいですか…///
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;
これはないな
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();
});
素晴らしい出来栄えだな(爆笑)
ttp://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1049315910 自己解決したんじゃなかったのか
数日勉強したあげくに出てきたのが、上のコード
try～catchは最初からあったから、結局スタートに戻っただけ
こんなのを回答のコピペと言われたら、さすがに回答者の名誉に関わる(爆笑)
マルチポストするなら、マルチポスト先のURLを書いてくれ。自己中心的だぞ。
ttp://okwave.jp/qa/q6276157.html ttp://www.publickey1.jp/blog/10/adobe_max_2010html5jquerywebedge.html JScriptのスレが殆ど無いのは何でなんじゃろうね。
どっちも仕様が固まってないか存在しないのに・・・
変更されたら買い直すかパッチ当てるかすんの？
IE9はJavaScriptエンジンって言われてたな
JScript消えんじゃね
早めに発表したもん勝ちみたいな
後方互換考えると消すって選択肢はないんじゃない
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();
});
----------------------------------------------------------------------
せっかく忘れようとしてんのに思い出させんなよ、泣けてくるじゃねぇか・・・
■気に入らない箇所
①変数が多すぎる
②効率化できないか
■無視しなければならない箇所
①正規表現のゆるさ（今勉強中）
②jQueryが入ってるとか細かいところ
お願いします☆
forで回すのが一番いいんですか？速さ？とか
速さならXPathが最速と言われる
querySelectorAllは案外速くないらしい
こういった要素を子に持つ要素、とか指定できないけど
あとテキストノードも取得できないんだっけ
jscript9.dll...
接頭辞もつけずにしれっとしている所がいやらしい
バージョン上がるとまた変なのが追加されんだろきっと
実行効率とか保守性とか考えずに使いまくる馬鹿がいるんだよ
StaticNodeList を返すのが正式な仕様だが、実装によっては Live な NodeList を返す。
non-live NodeList (昔のStaticNodeList) はノードがツリーから切り離されても変わらないってことで
ノードの変更自体は反映されてるが、勘違いしてないか？
ごめん。
仰るように、「StaticNodeList = not live NodeList」と勘違いしてた…。
Selectors API Level 2 準拠なら、"not-live NodeList" を返し、IE8 だけ StaticNodeList を返す動作だった。
6.1. The NodeSelector Interface
ttp://www.w3.org/TR/selectors-api/#nodeselector ttp://www.w3.org/TR/selectors-api2/#nodeselector StaticNodeList Collection
ttp://msdn.microsoft.com/en-us/library/dd347147%28v=VS.85%29.aspx JavaScriptのDOM Core基礎 - 三等兵
ttp://d.hatena.ne.jp/sandai/20100823/p1#006 live な NodeList を返す実装があるというのはどこかで見たような記憶があるんだけど、あやふやだし記憶違いかも…。
やはり、記憶違いだったみたいだ。すまなかった…。
途中でliveでないNodeListに変わった
このdocumentって部分には他にもどのようなものがありますでしょうか？
グローバルオブジェクト window の document プロパティ。グローバル変数とも言う。
ttp://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#the-window-object 補足ありがとう。
「Working Draft 21 December 2007」までは StaticNodeListインターフェース があったんだね。
2.2. The StaticNodeList Interface - Selectors API
ttp://www.w3.org/TR/2007/WD-selectors-api-20071221/#staticnodelist 対象ページに<a href="javascript:test(1);void(0)">test</a>があるとき
testリンクを押してもtest()が実行されないのはそういうものなんでしょうか？
testリンクのところにidつけてaddEventListenerすればいいのですが
addEventListenerが増えてしまって困っています。
そもそもaddEventListenerが増えてはいけないのかすらわかりませんが
他にうまい方法があればおしえてください。
よろしくお願いします。
(function(){
unsafeWindow.test = function(a){
/* expression */
}
})();
ただし既存のtest関数は置き換えられる
試してみたらできました。
unsafeWindow便利ですね
ありがとうございました。
getElementByIdで要素を取得したいのですが、
隠しウィンドウや隠しFrameとかに読み込ませてdocumentから
操作するしかないのでしょうか？
単純に何かのオブジェクトを生成して読み込ませてから
Javascriptで要素を取得することはできませんか？
DOMParser, LSParser, createHTMLDocument, ActiveXObject
お好きな方法をどうぞ。
おお！なんか出来そうな予感が…！
ありがとうございました。
むしろ addEventListener 使うほうがいい
あとGreaseMonkeyってjQuery使えんこともないよ
つーかGreaseMonkeyって既存のページを改造するもんだから、
自分が管理してるページなら存在意義があんまりないのでは？
<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" />
って別に入力しないでもいいのでしょうか？
そのmetaないしhttpヘッダは「scriptタグでtypeを指定しない場合に
javascriptとして解釈してもらう」ためのものでは。そして大抵の
ブラウザではなんにも指定しない場合のデフォルトがjavascriptに
なっていると思う。
ってことは念のために記述したほうが良いという事ですね
ありがとうございました！
type属性は必須だし
HTML4.01 ではscript要素の規定値が text/javascript でないため、その指定がないと HTML-lint ではエラーになる。
HTML5 では不要…というか未定義。
getElementsByClassName
IEだったらきかないよ
が656のため、未対応ブラウザ用に自分で取得する機能を書くか、下のなどを導入することになる
ttp://www.html5.jp/library/dom_getElementsByClassName.html ちなみに導入してみたら('A`)だったので、自分で書いた記憶がある
HTML-lintはscript要素もトリガになるのか
イベント属性を使わないならデフォルトスクリプト宣言は必要ないように思えるけど
IE8ならdocument.querySelectorAll('.hoge')
それ以前も対象にするなら全要素ループでチェック
一応。
・戻り値はliveなNodeListではなく、ただの配列なので注意
・IE8でも全要素ループになるから遅い
getElementsByClassName は IE9 からサポートされる。
Internet Explorer 9 Beta 開発者ガイド
ttp://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_DOM_L2_HTML 一応。
> ・戻り値は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 だと思ってた。
こうすれば良かった。
console.log(p instanceof NodeList); // true
やはり、戻り値は NodeListインターフェース のオブジェクトな気がする。
あいや、のスクリプトの話＜ただの配列
申し訳ない、アンカー先を読み間違えていたようだ…。
変更後に再度取得しなおせば変更後の情報が得られるの？
その通り。
getElementsByClassName()の落とし穴
ttp://www.insuite.jp/blog/archives/80 ---
<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>
---
ごめん。微妙に間違っていたっぽい。
---
<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インターフェースの変更は即反映される。
# 自信はないので、鵜呑みにしないで欲しい。(えらい人の解説に期待…。)
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";
}
})();
指摘ごもっとも。
後ろからループ回せば問題ないということに気が付かなかった…。
# デクリメントすると <!-- 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>
i-- → i-=1じゃね。
js以前の問題に見える。<a>でくくらないってのはだめなのか？
コードを表示してしまうのって携帯ぐらいだと思ってた。
<a>でくくらずに、imgタグのonClickにopen("...") と書いてみたんだけれど
ブラウザのポップアップブロックに引っかかってちょっと上手くないですねぇ。
いい方法あるかなぁ。
5年前の携帯でもscriptとnoscriptを認識するぞ・・
「画像がクリッカブルになってしまいます。」って読み間違えてた。
1,z-index指定。（で出来るはず。）
2,<a href="..."><span style="ほにゃらら">aaaa</span><img src="..."></a>
jsでやる必要がなければ2でいいと思うけどな。jsがoffの人とかも見れるし。
XHTMLに厳密に従うと、本当にコメントになってスクリプトが無い事になるから
今時ならもうやらん方がいい。
そーなのかーって思ったけど、全部jsファイルで外部化すればいんじゃね？って思った
とりあえず今後は<!--を外すことにする
ドコモ携帯はstyle要素の中身すら晒してしまうで
ブラウザとしてなら必要ないかもしれないが、他のパーサー通すときにコメントアウトしていないと困るパターンはある。
XHTMLなら外部スクリプト化するか、CDATAセクションを使うべき。
XMLパーサーを通した時にどのようなノードを生成するか考えてみるといい。
<p>foo</p>
<script type="application/javascript">
(function () {
var p = document.getElementsByTagName('p');
for (var i = 0, l = p.length; i < l; i++) {
p[i].className = 'foo';
}
})();
</script>
# "Content-Type: text/html" を出力するなんちゃってXHTML文書はXHTMLにする意味があるのか、と思うこの頃…。
追加される以前にdocument.getElementByIdで取得しようとしてもnullになります
追加されたかどうか判断するにはどうすればいいですか？
nullじゃなくなるまでずっとループを回すんですか？
docomoなどの携帯電話で扱われるXHTML文書は XHTML 1.x や XHTML5 とかけ離れた仕様だと思っていて、それを今時というのには抵抗があるのだが…。
ちょっと何をやりたいのかよくわからない。
必要な処理を行うときに getElementById の返り値をみるだけだと思うんだけど…。
挿入されたその要素に対して何か操作をしたいので
その要素が挿入されたかどうかはどうやって判断すればいいのかなと
getElementById は該当要素がなかったときにnull を返す。
操作時に getElementById の戻り値が null でなかったら処理をするようにすればいい。
終わってないよ！XHTML5 が残ってるよ！(HTML5 の方が注目度高いだろうけど。)
# XHTML書く人はIEなんか無視すればいいと思う。IE無視できない人はHTML書けばいいと思う。
idの付いた要素をドキュメントに挿入したタイミングで処理を行えばいいじゃなイカ。
処理のタイミングの問題としか思えないのにそれに類する情報がないので何とも言えない。
コードかURLを開示してもらうのが手っ取り早いかと。
あと、連投するならレス番をつけないと流れを追いづらい。
たとえばJavaScriptでFlashを埋め込んで、
Flashのロードが完了したらJavaScriptからFlashを操作するときとか、
俺はsetTimeoutで100～200msごとくらいにロード状況をチェックして、
ロード完了時に操作を受け付けるようにしてる。
で、30秒～1分くらい経ってもロードできないときは中断してエラーを吐くようにする。
setIntervalじゃなくてsetTimeoutを100～200msごとくらいに使うんですね
処理が重複するリスクがあったりする
こういう場合はsetTimeoutで一回一回チェックしたほうがいいと思うよ
$(function(){
var tmp = $(".class0");
tmp.html(tmp.html().replace(/aaa/ig, "bbb"));
})
この aaa 部分を変数を使って指定するにはどうしたら良いでしょうか？
alert(arr[0]);
aaaの部分だけを指定する方法はわからないけど
$(function(){
var tmp = $(".class0");
var reg = /aaa/ig;
tmp.html(tmp.html().replace(reg, "bbb"));
})
でどうかな(動作未確認)
var a = 'aaa';
var r = RegExp(a, 'ig');
$('.class0').each(function(){
var target = $(this);
target.html(target.html().replace(r, "bbb"));
});
ブラウザがhtmlの中に書かれたjava scriptを
解釈して表示するまでの流れ(?)みたいなのを教えてくれませんか?
document.write("hoge");
とかしてるときに、なにがどう動いてるんでしょうか?
ブラウザの、ソースを表示するで出てくるソースと
java scriptで動いてるのとの関係がいまいちどんな感じか分からないんですが.
ブラウザは受け取ったHTMLのタグやテキストをDOMっつー構造に再解釈する。
それを元にウィンドウ上に見えるように再構築する(レンダリング)。
それと別にブラウザはJavaScriptも解釈して実行する。
JavaScriptはレンダリング前のDOMに介入できる。
DOMが変更されるとブラウザはそのDOMを元に再レンダリングする。
大雑把に言うとこんな感じかと。
ちなみにソースはレンダリングやJavaScript実行前の状態なので影響を受けてない。
Chromeの「要素を検証」とかで見れば影響後の状態も見れる。
Trident？ あーあー聞こえねー。
わかりました。ありがとうございます。
XMLHttpRequestを使って更新確認するにはどうすればいいですか？
Content-Lengthヘッダも返しません
bodyのハッシュでも取っておいて比較するしかないんじゃない
JSだけでやるのは非現実的ですな
まず目的のサーバからどんなヘッダが返されているか確認するのが先
Content-LengthだけではなくAgeやEtagが利用できる可能性もある
それがまるでないようであればbody部のハッシュ
（短いならbody部そのもの）を取っておいて比較するしかない
MD5やSHA-1ハッシュをJSだけで計算するライブラリは
ちょっと検索すれば見つかるので
どうしてもJSでやりたければそういうのを使うのも手
なんかヘンな気もするが
サーバサイドの処理を挟まないのであればCookieかlocalstorageぐらいしかなさそうだけど
クロスドメインなだけでアクセスすらできないでしょ？
サムネイルオンマウスで画像をＩＤのあるとこに出す
それと同時にその画像の下に文字を出すことは可能ですか？
あとinnerTextとかinnerHTMLとか今どき使っちゃだめ？
解決しますた…
ほんとすみませんでした
なんで？
A要素とかSPAN要素をcreateElementしてinnerHTMLってのはよくやる
（Aの中がIMG要素ならやらないけど）
どうかというのを知る方法はないでしょうか？
文字列の上でクリックされた場合などはそれを選択しようとしている時だと思うの
で余計なことをしないようにとかいった風に使いなと思っています。
ある要素の上というのではなく、そこのマウス位置に文字列が実在するのかどうか
というのをどう判断して良いのかどうかどうしても思いつかなくて。
・遅い
・テキストノード挿入時、HTMLエスケープしなければならない (予期せぬバグが混入する可能性がある)
・インラインJavaScriptとして埋め込むとき <> をUnicodeエスケープする必要がある
ちなみに innerHTML はHTML5で標準化されているので、 は修正した方がいいと思う。
HTML5はまだ勧告されてないよ
勧告はとうぶん先だって言われてるが、最近の風潮は「使えるものは使っていく」というもの
勧告されていない≠使えない
そんなに心配ならWHATWGのほうのHTML5仕様にある、各ブラウザの実装対応状況を読めばいい
左側にフキダシみたく出るやつ
あれは実装が行われている場合、テストケースをパスしているかを表している
グレーアウトは未実装、赤は実装済だがテスト通過してない、緑は実装＆テスト通過
innerHTMLも、使うシチュエーションによっては利点がある
大量のテキストを一気にDOMノード化したい場合とか
mousedownとかを紐付ける要素を指定するときに、選択するようなものにしなければいいじゃん。
なんか使い方がおかしい気がする。どうしたいのか書いてみ？
↑これを実行しないようにしたいです
どうすれば良いですか？
element.onmousedown = null;
出来ました！ありがとうございます。
objs.snapshotItem(c).wrappedJSObject.onmousedown = null;
innerHTML を使いたくなる気持ちはわからなくもないんだけど、innerHTML は文字列処理だからあまり JavaScript に合わない気がしてる。
多量のDOMノードといっても何らかの整形フォーマットがあるわけだし、厳密にフォーマットを定義したい場合はDOMで生成する方が適切だと思える。
(思想の違いだから、他人に押しつけることは出来ないけど)
ただ、もっと簡単にノードを生成できるメソッドは用意されてもいいと思う。
createElement, cloneNode, insertRow ... といろいろあるけど、querySelectorAll のような革新的なメソッドはないんだよね。
出来れば、こんなコードを書いてみたい。
var p = document.createNodeByQuery('p>span.hoge');
ってかそういえば前にelement作成用の関数作ったことあったわ。
MakeElement('test', ['table', ['border', '1'],
['tbody', ['id', 'tst_1', 'style.color', 'black'],
～
みたいな感じ。
属性に関しては属性セレクタがあるし、
ttp://www.w3.org/TR/css3-syntax/ に Syntax があるから作れないことはないと思うけど、「すぐできる」ってすごいな。 師匠と呼ばせてもらってもいいですか？ｗ
テキストノードはCSSセレクタの泣き所だよね。
XPath式 にすれば一気に解決しそうだけど…。
ZenCodingでそんなセレクタ指定のコーディング方法あったな
ul.tes>li*4ってタイプすると<ul class="tes"><li></li><li></li>・・・</ul>と展開される
おっといいアイディアが思い浮かんだぞ
wrappedJSObjectってことはMozillaだろ
だったら直接removeAttribute使えよ
わざわざラップされてるのをはがすなよ
removeAttributeで出来ました。ありがとうございます。
jsでzencodingチックにDOM作成するプラグイン作った人はすでにいたよ
ttp://sakuratan.biz/jquery/zencoding/ ところでFireFoxもしくはChromeで、JSで作成したファイルを名前つけて保存させるには
location.href = 'data:application/octet-stream,'+encodeURIComponent(text);
みたいにするしかないっすか？
デフォルトのファイル名も付けられると便利なんだけど…
<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開いてみると既に書き込まれている)
「次へ」ボタンを押したときに初めて実行されて欲しいのですが、
どのように直せばよいのでしょうか。ご教示下さい。
JavaScriptができる」→「ブラウザに送られる」→「表示、JavaScript実行」
という順番だからそのように書いたらASP側がまず実行されるのは当たり前。
JavaScriptからサーバに結果を送信して、サーバ側でそれを受け取って
結果を書き込む、というふうにしないと。あとは自力で勉強してね。
理解のあやふやだった部分でした。＜サーバ側の処理、クライアント側の処理
submit()し、次ページで書き込み処理することで意図通りに動かすことが出来ました。
どうもありがとうございました。
onload
ブラウザ側でダウンロードダイアログを表示させて
取得したバイナリデータをダウンロードさせることって可能でしょうか
現在YUIのConnection ManagerでXMLHttpRequestを
サーバに投げてバイナリデータを取得する所まで
確認できたのですが、ブラウザ側にコレを認識させる事ができない状態です。
知りましたが、実際に画面に表示されている背景色を取得することはできますか？
なにがわからんの？
要素の重なり等を考慮すると、最終的に表示されている色は、
スタイルシートの情報からは取得できないですね。
質問内容が無謀でした。
background-imageになっちゃうとアレだけど、
background-colorとopacityでの重なりあいだったら、
計算すれば出るんじゃないかな。
Firefoxで開発したのがChromeで動かなくて凄くショックだったんですが・・・
挙動の違いを解説してるページとかあったら教えてください
obj.parentNode.removeChild(obj);
以外の簡単な方法はありますか？
単一ならそれでいいと思う。
複数ノード入れ替えたいときは replaceChild で入れ替える、とか。
こういうのを使えるならXMLHttpRequestで取得してからこいうのを使ってDOM操作するほうがいいの？
iframeに読み込むのはよくないの？
jetpackもHTMLをDOM操作するためにiframeに読み込む仕組みを採用しているっぽいですが
> SCRAPBLOG : Jetpack SDK 0.4 の Page Worker API
>
ttp://www.xuldev.org/blog/?p=792 ttp://gist.github.com/658148 リンクにaddEventListener('click',～
とイベントを追加したのですが、関数の中でreturn false;してもリンク先へ移動してしまいます。
どうすればリンクの本来の動作を止めることが出来ますか？
Jetpack のAPIを利用することが前提にあるようだが、違うのだろうか。
他に適切なAPIがあるのであれば、勿論それでも構わない。
が、標準の DOM, ECMAScript メソッドを利用することが前提としてあるなら iframe に読み込むのはお勧めしない。
iframe に読み込むということはDOMを document に結びつけるということ。当然、それに関わる処理も働く。
ドキュメントに挿入しなくて済む処理なら、わざわざ iframe に読み込む必要はないと思う。
return false; はIEが独自実装した仕様で HTML5 もそれに追従しているが、DOM 本来のやり方ではない。
DOM では event.preventDefault() を規定している。
自己解決したなら、解決法を書いてほしい。
iframeだと再レンダリングされて
それが問題ってことですか
わかりました
どうもありがとうございます
さんの仰られた方法で解決しました。
ttp://www.moondakota.com/archives/2004/09/23/rss_javascript.html ↑のツールを使い、HPにblogを載せたのですが
文字化けしてしまいます
charsetというのが原因かと思い変更してみたのですが
HP全体が化けてしまいます。対処方を教えてください
ttp://onlinegamenavii.web.fc2.com/index.html ファイルを UTF-8 で保存し直していないとかいうオチじゃないかな。
Webサイト制作初心者用質問スレ part221
ttp://hibari.2ch.net/test/read.cgi/hp/1286969289/309n
と怒られてしまいました
どういう理由があってこのエラーが出るのでしょうか
コードは以下の通りです
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;
};
for(var i = 0; i < c.length; i++){
if(!target[c[i]]){
target[c[i]] = function(){}; //←ここ
}
ですので、なぜ作ってはいけないのかその理由が知りたいのです
全然違います
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);
}
ほれ
でもまぁクロージャで参照したいならそんな感じで書けば良い
どちらにせよ同じエラーは出ると思うがな
だからクロージャが参照している変数「i」は1個でしょ。
そのiは変更していっているんだから、t[1]でもt[0]でも
変更された現在のiを参照するに決まっているじゃない。
クロージャってそういうもののためにあるわけで。自分で
勝手に書いた時点のiで固定されて欲しいとか思っても
そう書かなかったらそうなるわけがない。
そもそもアンタはFAQのQ14/A14を読んだのか。読んでない
のならどっかよそに行って欲しいね。読んだけど理解でき
ないとかなら説明するけどさー。
JSLintご存知ない？
質問の意図は「JSLintで静的に解析したとき、このエラーが出るのはどんな落とし穴があるためか」でしたが、
これを知らなかったが故に変に解釈されてしまった気がします
申し訳ないです
Q14. タイマーやイベントハンドラに設定するコードにthisを含めたいのですが
「"...this..."」とか「function(){...this...}」ではうまく行きません。
A14. それらが実行されるときはthisは別のもの(window等)を指してしまってる。
「function(x){return function(){...x...};}(this)」のようにthisを別の変数に
束縛しその変数を使って。循環参照によるメモリリーク問題あり(この項記述検討中)
この情報からクロージャと変数のスコープの関係を類推して
更に今回の落とし穴になりうる条件を類推するのは無理があるかとｗ
<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'が格納される事はわかるのですが、変数でもないようですし、初心者ですみません
引数の1番目に指定されたものが入ってる変数だよ
まず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);
}
これでやっても同じメッセージは出る
<input type="button" value="ボタン1"
name="button1" onclick="func1('ボタン1');">
の onclick="func1('ボタン1');"にあるボタン1
で、の原因はなんだったんだ？
そのコードを実際にブラウザで動かしたらエラーをはかないから、俺はJSLintがおかしいと思ったけど。
も言っているけど、その問題はのクロージャ関係と無関係だと思うよ。
function(){};の中身がわからないから確かではないけど、普通のforで回すだけなら、target = this;はいらないとおもうよ。
t[i]=(function(x){return function(){alert(x);}})(i);
とすればt[i]に入れた時のiの値が関数が呼ばれる時に作られる
環境のxに渡されて保持され、それをクロージャから参照している
からiその時点のiの値が取れると。
varで宣言しなくても変数になると言う事なんでしょうか？
入門書やってる程度なので、ちょっとよくわからんとです
関数の引数(strの事)に関してはvarはいらない
関数と引数について勉強すれば良いと思う
最初に提示した例ではそもそもクロージャになっていないので問題なく動くはずです
JSLintでメッセージが出る部分は落とし穴となる可能性の高い部分
メッセージの内容については「してはいけない」としか書かれていないです
なぜこのようなメッセージを出さなければいけないか、どんな落とし穴があるのかを知りたく質問したのです
原因さえはっきりしていればそのメッセージをスルーするという選択肢もあるでしょう
問題は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が出力されるわけです
これを解決するには のようにクロージャで変数をバインドする必要があります
JSLintは落とし穴になりそうな部分を警告してくれているだけなのでおかしくはないとです
target = this は 普段 jQuery 書いているのでその癖ですｗ
いや、スコープの事なんか知ってるよ。
てかからの変化が大きすぎだろｗ
書いてないことで「違います（ｷﾘｯ」なんて言われてもねぇ・・・
最初に示した例でも同じ警告は出るわけだが・・・
難しく考えすぎだろ
こういうLint系って落とし穴以外にも
オーバーヘッドが発生する場合等も警告だすよ
もうちょっと単純なテストからしてみたらどうよ
結局どこが原因か切り分けできてないんでしょ？
因みにのコードでfunctionを外部化し、のコードの前に持って行き
その関数を代入するとその警告は消える
JSLintについて知らなかったんですよね？
だから で解釈が違うのだろうと推察したのです
そして私は始終一貫してエラーを吐く「理由」を質問していたハズですが、
そのレスは解答の方向性が全く違っていたのでドヤ顔で高らかに「違います」と宣告させていただきました
そのように解釈されず大変残念です
すみません、ありがとうございます
ちなみに私のレスは で、 の時点でこの問題は解決しております
letが標準化されればいいのに
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" true
0 === false -> false
こういう違いがある
他にも
'' == false -> true
'' === false -> false
とかね
組み込み関数にも0をかえしたり空白を返すものがあったはず（忘れた
そういうのでの誤った判断をしないためにって感じかな
型をも含めた厳密な比較をしましょうって事です
自分の使い方だと、0=="0" の場合でもtrueを返して欲しいんですが。
if( Number(a) < 1 )
そのJSLintの結果はエラーっていうよりお知らせ・注意くらいに思ったほうがいいね。
挙動を理解してるなら問題ない。
端から見ている私には が で解決できているように見えない。
と同じ結果を で得られていないから。
あなたが解決できたのは実際にやりたいことが ではなく別にあってそれが で解決できただけ。
そしてあなたの疑問である「どういう理由があってこのエラーが出るのでしょうか」の解が で出ているようには見えない。
だから、皆口を揃えて「そんな書いてないことなんかわかんねーよ」といっているわけです。
JSLint云々の問題ではなく、質問の仕方が悪いとしかいえない。
・ブロックスコープ云々と「Don't make functions within a loop.」は全く関係がない。
・JSLint はCrockford氏が信じる Good Parts でないコードに警告を出す。よって、ECMAScript文法に準拠しているか否かは全く関係ない。
「Don't make functions within a loop.」のメッセージを出す理由はわからないが、少なくともあなたの論拠はちぐはぐとしか思えない。
そういう場合は明示的に型変換してやればいい。
Number('0') === 0
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.
ttp://javascript.crockford.com/code.html > ・JSLint はCrockford氏が信じる Good Parts でないコードに警告を出す。よって、ECMAScript文法に準拠しているか否かは全く関係ない。
これは言い過ぎた。
ECMAScript に準拠していることが前提にあり、その上で独自の解釈をすると認識していいと思う。
例えば、var num = parseInt(08); で「Missing radix parameter.」のエラーを返す。
全部そう書き換える必要があるってことですか？
間違いが起こりにくいコーディングのテクニックとして、
文字列になる可能性がある数値は、きちんと数値に変換してから扱う。
parseInt(num)してから、if (num === 0)って感じで。
ttp://ideone.com/x7oVl parseInt の注意すべき点として、
・第二引数を省略すると 8進数, 16進数として扱う場合がある。(JSLintでは「Missing radix parameter.」のエラーを返します)
・数値は前方一致で検索される (後方に数値以外の文字があったとしてもエラーにならない)
があるかと。parseFloat には前者の性質がないですね。
必要なら、全て型変換を行った方がいいと思います。
同じ値を使い回すなら始めにNumber型に変換するとか。
function foo (num) {
num = Number(num);
if (num === 0) {
// 処理1
} else {
// 処理2
}
}
この動作は誰が得するのか分からん。
ECMAScript3ですら非推奨なのに、
ブラウザの実装が5に準拠するのはいったいいつになるんだ。
これってどういうコード（環境？）だと再現するのかな。
たとえばparseInt("018")はまず8進数と見なされ、
末尾の"8"は8進数では使えないゴミとして無視されるので1になる
これJSの基本な
この動作はECMAScript3では非推奨。5では明確に禁止。
16進数はたまに使うけど、0x付きだし間違えることはないかな。
8進数の場合は、日付データとかを数値化するときに危ないね。しかし8進数の使い道がわからんw
なんで一つ、二つに統一しないんですか
マウス座標を取得するメソッドなんてあったかな。
event.screenX はプロパティだし、いろいろプロパティがあっても役目が違うから何とも。
そのメソッドの名前は？
最初から何度も言うように結果を求めてたわけではなく理由を求めてたわけです
での解答としては、Don't make functions within a loop. のメッセージは
他の主な言語と違ってJSがブロックスコープをサポートしていないが故に、
書いた通りのクロージャしか作れずバグの温床になるから
( でも説明して頂いている通り無駄があるという問題もあるようですが、こちらの方がより問題だと感じます)
なので、
＞・ブロックスコープ云々と「Don't make functions within a loop.」は全く関係がない。
これは否定させていただきたいと思います
のコードでは不具合が起こらなかったので、なぜこのメッセージが出るのかを模索したところ、
のような事例で意図とは違う動作をする可能性を見つけたので、問題となるコードを例示し解決済みとしたわけです
どこらへん？
今ビデオ見てるけど該当箇所がよくわからん
「どこかに原因があるはずだ -> で不具合になった -> そうだったのか」ということか。
仮にそうだとしても、 が原因と結論づけるのは強引なのでは？
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 を代入してエラーが出るのは書き方が間違っているだけだ。
この点は で指定されていると思うのだが、試してないのだろうか？
間違った書き方をしているケースをとりあげて「for文で function を代入すべきではない」と主張するのはおかしいと思うのだが…。
あなたの主張は「Crockford氏は >809-810 と説明されていますが、私は別の問題を発見しました。それが です。」と読める。
それは JSLint がエラーを返す理由ではないよ。エラーを返す理由は JSLint 作者であるCrockford氏がよくご存じのはず。
私にはCrockford氏の説明を疑うだけの正当性が からは読み取れなかった。
--- (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);
}
-------------
thx 見つけました
一番最初に取り上げられてる具体例は 「Creating event handlers in a loop」 ですね
で、この問題はクロージャから起こる混乱と明言してるわけですが
確かに類推の部分はありましたが、ビデオを紹介して頂いたおかげで確証に変わりました
ありがとうございます
Crockford氏の主張する「新しく関数オブジェクトを生成するのが無駄になるから」という理由が良くわかりません。
P74 下段のコードでも新しく関数オブジェクトを生成していることに代わりはないはずで、>786 と原理は変わらないと思うのですが…。
無名関数で関数オブジェクトを生成するか名前付き関数で関数オブジェクトを生成するか、の違いでしかありません。
もし、本当に関数オブジェクトの数を減らしたかったのならば、
document.addEventListener('click', function () { ; }, false);
と一つだけ定義すれば良かったんじゃないかと。(click はバブリングします)
ちなみに最初に例示したコードでは動作には何も問題がないですが、ループ内でクロージャ作成関数を呼ぶように修正すると無駄が生じます
誤解されているようですが、私は原因さえはっきりと把握できているならJSLintでエラーが出ようが気にしないというスタンスです
ループのたびに無名関数を返す無名関数を作成するから無駄となるのだと思います
クロージャはもちろんループぶん作られるわけだけど
クロージャを返す関数自体をループぶん作ってるじゃん
ありがと
ありがとうございます。合点がいきました。
しかし、これはかなり特殊なケースですね。
ループの度に変化する変数に参照する状況限定で再現される不具合なので、この警告を無視できるケースはかなりありそう。
P74 下段のコードは、上段のコード(クロージャの失敗例)に対する正しい例というだけでしょ。
ループの中で関数を生成さえしなければ、混乱を起こさず、間違いを防止しやすい、と。
「新しく関数オブジェクトを生成するのは無駄」というのは、また別のケースでしょう。
ん？
この一行だけでエラーになるのですが、どうしてでしょうか？。
jsファイルはちゃんと作っています。
もしかしてHTMLに直接書かないとだめとかいう制約とかあります？。
Tennent's Principle of Correspondence
--- (P75) ---
function factorial (n) {
var result = 1; // result: variable
while (n > 1) {
result *= n;
n -= 1;
} return result;
}
----
function factorial (n) {
return (function (result) { // result: parameter
while (n > 1) {
result *= n;
n -= 1;
} return result;
})(n);
}
-------------
仰るように無駄が生じるのは別のケースみたいですね。ありがとうございます。
alert(typeof Worker);
new Worker('data:application/javascript,onmessage=function(e){console.log(e.data);}');
undefinedでした！
つまり激しく環境依存なわけでしょうか？
間違いの元だと指摘しているだけで、間違いそれ自体ではない
写し間違えてますよ。resultには1を渡さないと
そして使っている環境が見事にIEでした
いくらシェアが低下して来ているとは言ってもまだIEを外すわけには行きませんね
var a = [];
for (var i = 0; i < 2; ++i) a[i] = function () {};
alert(a[0] === a[1]); // true
その意味を理解できる人がここにいるかな
読むだけの人なら何を主張しても変わらないかと。
以前テンプレにあった体系的なjavascript解説は消えちゃってるならな
の解説もテンプレから辿れたんだけど(今はもう要らないが)
だから反動でgood partsみたいのを変にありがたがる奴が出てきたんだろ
ttp://www5e.biglobe.ne.jp/access_r/hp/javascript/js_001.html こういうの恥ずかしくないのだろうか
あの本に書いてあること「だけ」を信じてしまうと、
「そう解釈しても問題はないけど本質的にはこう」みたいなことが
理解出来ない箇所があるから、かなあ。
<form name="set">
<INPUT type="radio" onclick="sakana()">魚<br>
<INPUT type="radio" onclick="yasai()">野菜<br>
<select name="sentaku">
<option>選択してね</option>
</select>
<INPUT type="button" value="計算" onClick="keisan()">
JavaScript
function sakana()
{document.set.sentaku.length=2;
document.buki_set.buki_sentaku.options[0].text="サンマ";
document.buki_set.buki_sentaku.options[1].text="イワシ";
function ono()
{document.buki_set.buki_sentaku.length=3;
document.buki_set.buki_sentaku.options[0].text="斧";
document.buki_set.buki_sentaku.options[1].text="ヘルガットル";
document.buki_set.buki_sentaku.options[2].text="輪廻";}
function keisan()
{document.write
}
HTML
<form name="set">
<INPUT type="radio" onclick="sakana()">魚<br>
<INPUT type="radio" onclick="yasai()">野菜<br>
<select name="sentaku">
<option>選択してね</option>
</select>
<INPUT type="button" value="計算" onClick="keisan()">
JavaScript
function sakana()
{document.set.sentaku.length=2;
document.buki_set.buki_sentaku.options[0].text="サンマ";
document.buki_set.buki_sentaku.options[1].text="イワシ";
function yasai()
{document.buki_set.buki_sentaku.length=2;
document.buki_set.buki_sentaku.options[0].text="ニンジン";
document.buki_set.buki_sentaku.options[1].text="大根";
とあって
function keisan(){}
で計算したいのですが、サンマとイワシに100と110という値を持たせ、ニンジンとダイコンに60と70という値を持たせて
計算するにはどのようにすればいいのでしょうか？
計算というのは1.05をかけて消費税出す事です・・・。
HTMLも違うっぽいし
var items = {
fish : [
{name:"サンマ",price:100},
{name:"イワシ",price:110},
],
vegetable : {
{name:"ニンジン",price:60},
{name:"大根",price:70},
}
};
俺ならこんな感じでデータを作ってなんとかする
phpと違ってJavaScriptは複雑で難しいです
やはり配列とかって重要なんですか？
8^3を8+8+8+･･8って512回やるようなもの
のitemsを多次元配列と考えれば良い(正確には違うが)
phpでいうところの
$items["fish"] = array(
array("name" => "サンマ","price" =>"100"),
);
って感じ
HTMLやPHPには無いものだし
最初はなんでこんなややこしい物作ったんだ！って思ってたけど
理解してみると納得
document.buki_set.buki_sentaku.options[0].value="70";
で値を出すように考えてたのですが
document.buki_set.buki_sentaku.options[0].text="ニンジン"value="70"；
みたに出来たらなーと思ってたのですが、自分にそうやって値を持たせる知識がありませんでした
ｊQueryにはDOM要素事態に値を持たせられる jQuery.data(elem) ってのがあるね
var option = document.forms['buki_set'].elements['buki_sentaku'].options[0];
option.text = 'ニンジン';
option.value = '70';
with (document.forms['buki_set'].elements['buki_sentaku'].options[0]) {
text = 'ニンジン'; value = '70';
}
jQuery('[name="buki_sentaku"] > option:first-child').text('ニンジン').val('70');
{
document.buki_set.buki_sentaku.options[0].value="70";
document.buki_set.buki_sentaku.options[0].text="ニンジン"
document.buki_set.buki_sentaku.options[1].value="80";
document.buki_set.buki_sentaku.options[1].text="大根"
}
ってやるかな
実際俺のが一番スッキリしてて解りやすいと思う
var opts = document.forms['buki_set'].elements['buki_sentaku'].options;
opts[0].value = '70';
opts[0].text = 'ニンジン';
opts[1].value = '80';
opts[1].text = '大根';
気持ちはわからなくもないんだけど、本来はGood Parts信者に向けるべき嫌悪感だよね…。
buki_sentakuにニンジンや大根とはこれイカに
大して変わんねーよ
何でそう書くの？と聞くと大量の引用ばっかり返ってくるけど
己の体験や意見としては何一つ返っちゃこない
あと、ダメ信者にありがちなのが、
「それは汚いコードですね」とか年上のベテランを挑発する奴w
JavaScriptはガイドライン的なものがほとんどないから、
フォーマットのひとつとしてGood Parts形式を採用するのはアリなんじゃない。
でも、それは Good Parts に限らない話だと思う。
「Good Parts 信者が嫌い」から「Good Parts が嫌い」に転ずるのは筋違いなんじゃないかな。
>809 のスライドの P75 の～、P45の～はこういう理由で間違っている。
だから、Good Parts は嫌い。
これならわかるんだけどね…。
んな話をしてんじゃねーのに
var b = 100;
var c = false;
var d = [1,2];
var e = {"aaa":"bbb"};
var f = document.getElementById("f");
function test() {
alert(a);
alert(b);
alert(c);
alert(d[1]);
alert(e.aaa);
alert(e["aaa"]);
alert(f.innerHTML);
}
これでfがアラートされないのは何故ですか？
test()の中に
alert(document.getElementById("f").innerHTML);
とするとちゃんとアラートされますが
document.getElementByIdは何かスコープの制限があるのでしょうか？
ちなみに
var f = document.getElementById("f").innerHTML;
として、alert(f)とすると
document.getElementById("f") is nullとエラーが出てJavaScriptが実行されません
のQ17を参照すべし。
要素が読み込まれなければ、getElementById は null を返す。
>894 が何をいっているのかさっぱりわからないが、この人とはそりが合わなそうだな…。
オブジェクト名は覚えなくちゃならないと思うのですが
メソッド名、プロパティ名も全部覚えなくちゃならないんですかね？
なるほどありがとうございます
確かにscriptをhtmlの最後に持ってきたら動作しました
onloadはhtmlのコードの前でも実行されるんですね
仕組みはまだよくわかりませんが精進します
覚えてるに越した事はないけど誰も全部は覚えてないんじゃないかな
文法覚えた後は組み込みオブジェクトやDOM・イベントの概念と、それで何ができるかだけ覚えて、
書きながら学習していくのが早いと思う
C言語に全く触れた事無いからかもしれないのですが上の質問とか見てて
document.getElementById("f").innerHTML
とか
document.forms['buki_set'].elements['buki_sentaku'].options;
の何がオブジェクトで何がメソッドで何がプロパティなのかよくわかんなかったのですが
どうすればそのような見分けがつくようになるのかなと
javascriptは慣れれば見分けつくようになるけど
Firebugなどの開発者ツールで調べるか、DOM,HTML5 のリファレンスを読むか、の2沢かな。
Object Index
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/object-index.html HTML5 (including next generation additions still in development)
ttp://www.whatwg.org/specs/web-apps/current-work/multipage/ 個人的には、この辺りはテンプレに入れても良いと思う。
そのルールさえわかれば、メソッド/プロパティの見分けは付くかと。
document.forms['buki_set'].elements['buki_sentaku'].options;
これらは全てプロパティ。
そのformsのsとoptionsのsって何よ、ややこしいよ
なるほど！オトクなテクニックありがとうございます！
これだけ見ればhogeがfunctionだとは思わない
それぞれ HTMLCollection型, HTMLOptionsCollection型。
これらは複数のノードを含むから "s" を付ける。
formsはformの擬似配列、optionsはoptionの擬似配列なんだから自然じゃね
applyなんて使わないと出来ないなんて事はないから最初は問題ないんじゃね。
documentのformのselectのoptionだよ！ってさ
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/15-3_Function_Objects.html#section-15.3.4.3 Function.prototype.apply, Function.prototype.call あたりは使われることもあるからそれなりに疑ってもいい。
よくわからなかったら、typeof演算子で判断する。
あと >7,903 の ES3, DOM のリファレンスは読むべきだよ。
余力があれば、HTML5, ES5 も読んでおくと良い。
どの様なコードを書けばよいでしょうか？
出切ればjQueryと連動させたコードで教えていただけないでしょうか。
var tb = $('#TextBox');
setTimeout(function(){
tb.val(tb.val().replace(/[^0-9]/, ''));
setTimeout(arguments.calee, 0);
}, 0);
こんな感じでおｋ？
if (event.keyCode < 48 || 57 < event.keyCode) {
event.stopPropagation();
return;
}
})
event.stopPropagation();
↓
event.preventDefault();
だった
DOM追加にフェードインしながら流れるようなエフェクトを出したり
COOL!なサイトを作りたいです
自分がサイトを作るとどうも10年前ぐらいのサイトになってしまって最近とても悲しいです
JavaScriptでCOOLなサイトを作るためにはjQueryを極めればいいのでしょうか？
内容をCOOLにしてください
あなたにはJavaScriptは必要ありません
ナイスなご解答どうもありがとうございました。
sorry COOLでない解答はignoreさせてもらうよ
_ﾉ ∠＿__＿＿＿＿＿＿＿＿＿＿ ／ .|
/＼ ＼ | |
.＼ ＼ ＼ | |
○ / ＼ ＼ ＼ | /
／> / / ＼ ＼ ＼ , "⌒ヽ /
／／/ ./ / .＼ ＼ ＼ i .i ./
./＼＼＼ / / ＼ ＼ ＼ .ヽ､＿ノ /
/ .＼＼ ./ / ∧∧ ＼ ＼ ＼ .| /
＼ ＼＼ ./ （ ・ω・） ／.＼ ＼ ＼ | / /
＼ ＼＼ ∪ ノ ' ＼ ＼ ＼ .| /| ./
o .＼ ＼＼⊂ノ ／ ＼ ＼ ＼ | / | /
"⌒ヽ . ＼＼ ／ ＼ ＼ ＼| / | /
i i ＼＼ ○ ＼ ＼／|/ | ./
○ ヽ ＿.ノ .＼ ＼＼ _,. - ''",, - ￣ ＿| /
＼ ＼＼_,. - ''",. - '' o ￣ .|/
＼ ＼＼ '' ￣ヘ ＿ ／￣￣￣￣￣
○ ＼ ＼＼／／｡ ＼ 寒いと思ったら・・・
ﾟ o ｡ .＼ ＼／ |
｡ ￣￣￣ ＼＿＿＿＿＿＿＿＿＿＿
return falseってIEの独自実装とかじゃなかったっけ？
いや、jQueryでbindのコールバック関数内でreturn falseで返したらデフォルトの挙動をオフするって意味じゃなかったっけ？
ってこと
undefined以外の返り値がある場合はチェックしてるみたいね
ありがとう
jQueryでこういう書き方を見かけるんですが、
先頭のセミコロンと、引数$の意味がわかりません。
それぞれ何ていうキーワードでググればいいのか教えてください。
必要性が全く感じられないのですがどのようなときに使うとよいのでしょうか
- 変数の値をプロパティにする時
- 数値のプロパティにする時
- DOMのプロパティと区別したい時
DOMNodeInserted って便利だなー。
AutoPagerizeで継ぎ足された部分に自分のスクリプトを適用する方法あれこれ - 0xFF
ttp://d.hatena.ne.jp/os0x/20090829/1251556449 先頭セミコロンは知らないけど、
(function ($){
// prototype.js と競合せずに $ を使える。
})(jQuery);
先頭のセミコロンは質の悪いコードを前方に置いても SyntaxError を返さないための配慮らしい。なにこのバッドノウハウｗ
JQuery ui.core.js - efreedom
ttp://ja.efreedom.com/Question/1-1052229/JQuery-ui-core-js 調べてみます。
どうもありがとうございました。
Date()オブジェクトの前にはなぜnweという演算子が必要なんでしょうか？
オブジェクトを生成するときに使用すると書いてあるのですが生成するの意味がよくわかりません
document.write()とかとはどー違うのでしょうか？
インスタンスが要るから。
new付けたほうが気持ちイイから。
document.write()と並列に比較してしまうレベルだとちょっと説明してもわからないかもね
Java（JavaScriptじゃない）のサイトを巡ってくるといいかも
なるほど、オブジェクト指向について勉強してきます
ご指摘ありがとうございます。初歩的なミスでした。
--- (P75) ---
function factorial (n) {
var result = 1; // result: variable
while (n > 1) {
result *= n;
n -= 1;
} return result;
}
----
function factorial (n) {
return (function (result) { // result: parameter
while (n > 1) {
result *= n;
n -= 1;
} return result;
})(1);
}
-------------
私は CodeZine で勉強しました。
『JavaScript 第5版』の第9章 (P151) も参考になるかと。
プロトタイプ（prototype）によるJavaScriptのオブジェクト指向：CodeZine
ttp://codezine.jp/article/detail/222 15.9 Date オブジェクト (Date Objects)
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/15-9_Date_Objects.html しょうがないよね？既に異論なしで決まっていることが何か
あったっけ？
ありがとうございます！
試しに読んでみますー
個人的な意見ですが、ES5, DOM, HTML5 を入れるのはどうでしょう？
私の場合、DOM Level 0 系は HTML5 を参照することが多く、ES5 の拡張メソッドを読んだり、DOMの邦訳を読んだりします。
あと、jQueryの質問が多いようなので、jQuery API とか。
Annotated ES5
ttp://sideshowbarker.github.com/es5-spec/ DOM L2 Object Index
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/object-index.html DOM L2 Core
ttp://www.y-adagio.com/public/standards/tr_dom2_core/expanded-toc.html DOM L2 Events
ttp://www.y-adagio.com/public/standards/tr_dom2_events/expanded-toc.html HTML5
ttp://whatwg.org/html5 XMLHttpRequest
ttp://www.w3.org/TR/XMLHttpRequest/ XMLHttpRequest Level 2
ttp://www.w3.org/TR/XMLHttpRequest2/ jQuery API
ttp://api.jquery.com/ > Q1. 開いた別窓/フレームの内容にアクセスできないのですが…
> A1. ページ内容が別サーバの場合セキュリティ制約により絶対無理です。
XMLHttpRequest Level 2 や window.postMessage で回避可能…と説明を入れるのは時期早々でしょうか。
> innerHTMLは非標準ですがIE、Opera、Safari、Gecko(N6/N7/Firefox等)で対応済。
WHATWG にリンクするべきかどうか。
ttp://www.whatwg.org/specs/web-apps/current-work/multipage/apis-in-html-documents.html#innerhtml > JSON (JavaScript Object Notation)
JSON は ES5 で取り込まれたので、MDC や ES5 にリンクがあってもいいんじゃないでしょうか。
Annotated ES5
ttp://sideshowbarker.github.com/es5-spec/#x15.12.2 ネイティブ JSON を使う - MDC
ttps://developer.mozilla.org/ja/Using_native_JSON # ひょっとして、次スレを立てるのは >940 の役目だったりしますか…？
aから[abc]という文字を得る方法を教えてください。
String(a).match(/^function (.+)\(\)/);
print(RegExp.$1);
ttp://ideone.com/Cxjqs 何でいちいちそんな事すんだよ
a = function abc(){};
var name = "["+a.name+"]";
了解です。
面白い方法ですね。Function#name を使わないのは独自拡張だから(IE で使えない)からかな？
name - MDC
ttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/name 他言語での経験から.nameしてみたけどIE8だったので見事に無理でした。
一般公開を目的としたサイトでIEで動かないような構築をしている人ってそんなに多いの？。
function getFunctionName (func) {
var functionBody;
functionBody = /^function\s+([^\s(]+)/.exec(func.toString());
return functionBody ? functionBody[1] : functionBody; // Function#name || null
}
var a = function abc () { ; };
console.log(a.name || getFunctionName(a));
Function#name を得る標準的な方法はないので独自拡張に頼るしかないんだと思います。
IE8- はまともな方法では得られないんじゃないかな…。(IE9 はわかりませんが)
# Function.prototype.name を拡張できたら面白そうではありますが。
参考になります
匿名関数の Function#name は空文字を返すようです。(Google Chrome 7 で確認)
var a = function () { ; };
console.log('"' + a.name + '"'); // ""
というわけで、>954の修正版。
function getFunctionName (func) {
var functionBody;
functionBody = /^function\s+([^\s(]*)(?=\()/.exec(func.toString());
return functionBody ? functionBody[1] : null; // Function#name || null
}
var a = function () { ; };
console.log('"' + getFunctionName(a) + '"'); // ""
本来は IdentifierName 生成規則に沿った方がいいと思いますが、解読に時間がかかりそうだったので省略しました。
ttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/7_Lexical_Conventions.html#Identifier ttp://sideshowbarker.github.com/es5-spec/#x7.6 # Function.prototype.name を拡張するためにはFunctionコンストラクタを置き換えなくてはならず…、かなり面倒ですね。
次回回しということでお願いしたいです。次スレは975超えたら。
ここらへんは？
あと、vol.77あたりであったのは、無かったことでいいのかな。
+ JavaScript の質問用スレッド vol.77 +
ttp://pc11.2ch.net/test/read.cgi/hp/1268206233/841-
ttps://developer.mozilla.org/ja/DOM/windowに掲載されているwindowオブジェクトってw3cでは掲載されてないのでしょうか？ alertとかnavigatorとかそういうメソッドも見当たりませんでした
ttp://www.w3.org/DOM/Activityからたどれる所は全て見たのですが探し方が悪いのでしょうが見当たりませんでした DOMの本家の情報は他にあるのでしょうか？
alert(function/*(*/name(){})
結局結論出なかったのかなんかで現状があるんでは。とりあえず
今スレと同じにしておいて次スレ早々に確認しませんか。
HTML5のドラフトを見るんだ。
例えば、window.alert は MDC では "DOM Level 0" と説明されています。
---
仕様
DOM Level 0。どの標準にも属しません。
ttps://developer.mozilla.org/ja/DOM/window.alert ---
---
"DOM Level 0"
"DOM Level 0" は W3C が DOM の標準化を始める前にブラウザ間で共通だったオブジェクトモデルです。
・Netscape の クライアントサイド JavaScript ガイド（Javascript と "DOM Level 0" を扱います）
・Netscape の クライアントサイド JavaScript リファレンス（Javascript と "DOM Level 0" を扱います）
・JavaScript スクリプティングリソース - "ダイナミック HTML" と JavaScript に関するさまざまなサイトへのリンク
ttp://www.mozilla-japan.org/docs/web-developer/#scripting ---
"DOM Level 0" は DOM 仕様としては策定されていませんが、デファクトスタンダードとして確立されている仕様を指します。
(実際には window.open を IE が独自拡張していたりしますが、概ね全てのブラウザで同じ挙動を示します。)
この辺りの曖昧さは HTML5 で標準化される予定です。
W3C の HTML5 は
ttp://www.w3.org/TR/html5/ にありますが、まだ最終草案段階なので WHATWG ( ttp://whatwg.org/html5 ) の方が最新の情報が手に入ります。 6.2 The Window object
ttp://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#the-window-object HTML5 はAudioオブジェクトなど新しい技術が注目されがちですが、実際にはデファクトスタンダードとして確立された仕様を改めて標準化しているものも数多く含んでいます。
少し前に話題になった innerHTML もそうです。innerHTML は標準化こそされていませんでしたが多くのブラウザで(ほぼ)同じ振る舞いをします。
これらは既にあるブラウザの実装に合わせて HTML5 で標準化されているので、未だ最終草案段階とはいえ勧告までに大きな変更があるとは思えません。
簡潔に書け
IEはコメント除去しないどころじゃない
function A, B(){
}
alert([A,B]);
function A.prototype.a(){
}
alert(new A().a);
IEだと動くんだぜコレ
いいですね。テンプレ議論をスレ最後でやるから間に合わなくなるっぽいですしね。
Window Object 1.0 (W3C Working Draft)
それを判断するのは質問者なのでは？
詳しい回答が冗長に感じる人がいれば、簡潔な回答では物足りない人もいるでしょう。
それがわからない以上、簡潔に書いても詳しく書いても同じだと私は思いますが。
var a = function abc(){1};
alert(abc); // "function abc(){1}"
独自研究は他所でやれ
ttp://okwave.jp/profile/u1456502.html lol
いかにも初心者同士が教えあうって空気が
なってしまうのですがこれはどうしてでしょうか？。
function load(url, async, callback, arguments) {
alert(arguments);//
m_xmlhttp.open("GET", url, async);
m_xmlhttp.onreadystatechange = function() {
if (m_xmlhttp.readyState == 4 && m_xmlhttp.status == 200) {
alert(arguments);//
callback(m_xmlhttp.responseText, arguments);
}
}
m_xmlhttp.send();
}
argumentsは予約語では無いが関数を呼び出した時に
関数内で自動的に生成されるオブジェクト
生成されたオブジェクトでは呼び出し元とか引数の値等が入ってる
そういう事でしたか、納得しました。
ありがとうございます。
もう言葉じゃ表現出来ないほどの感謝の気持ちで一杯です
本当にありがとうございました
var a = $(document.createElement("div"));
with({i:i}){
a.click = function(){ alert(i); };
}
a.text("Withのてすと");
$("body").append(a);
}
>>781-あたりでブロックスコープについての話題があったから調べてみたらwithで値を束縛できることを知ったのだけど、
使わないほうがいいという事も書いてあったけど使わないほうがいい理由って何かあったりするの？
どなたかお願いします。テンプレの変更は今回はなしですので…
型によるオーバーロードができないのでディスパッチ部分の記述がどうしても汚くなってしまいそうです
なにか良い方法はないでしょうか
結論からいうとVisitorパターンなんて使わないっすよね
なるほど
なら別に実装方法を考える必要はなさそうですね
ありがとうございました
JSについてはこの人の言うこと聞いておいていいと思うよ
ttp://blog.livedoor.jp/dankogai/archives/51066288.html んじゃトイレ行って一休みしたら次スレ立ててくる
+ JavaScript の質問用スレッド vol.81 +
ttp://hibari.2ch.net/test/read.cgi/hp/1289130738/
乙
with は指定したオブジェクトをスコープチェインの先頭に追加するだけだから、
・変数の名前解決の効率低下の原因になり得る
・読むときに、変数がどの時点で解決されるか分かりにくい
それに加えて、
・ES5 の strict mode では使用できない
かな。
なるほどありがとう
ま、ループのたびに$("body")する時点で速度は度外視なんだろうが
|Д｀) ﾀﾞﾚﾓｲﾅｲ･･ｵﾄﾞﾙﾅﾗ ｲﾏﾉｳﾁ
|⊂
|
♪ Å
♪ ／ ＼ ﾗﾝﾀ ﾀﾝ
ヽ(´Д｀;)ﾉ ﾗﾝﾀ ﾀﾝ
( へ) ﾗﾝﾀ ﾗﾝﾀ
く ﾀﾝ
♪ Å
♪ ／ ＼ ﾗﾝﾀ ﾗﾝﾀ
ヽ（;´Д｀）ﾉ ﾗﾝﾀ ﾀﾝ
(へ ) ﾗﾝﾀ ﾀﾝﾀ
> ﾀﾝ
ttp://hibari.2ch.net/test/read.cgi/hp/1289130738/
もう書けないので、新しいスレッドを立ててくださいです。。。
