- ベストアンサー
外部jsファイル参照での正しい文法について
- 現在、外部jsファイルを使用して<select>タグのオプション項目を作成しています。
- しかし、この方法は文法的には正しくないため、正しい文法で記述する方法を知りたいです。
- また、文法チェックのサイトを使用して確認した結果、違反が指摘されました。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こうなると、具体例に合わせて工夫していく段階かと思います。 ですから、下記は一般的でも主流でもなく、例えばこんな感じでどうでしょう、という例です。 (もっと簡潔な例もあり得ると思います。) --- <html> <head> <script type="text/javascript"> window.onload = function(){ var form = document.getElementById('f0'); appendSelect(form); appendSelect(form); function appendSelect(parent) { var sel = document.createElement('select'); appendOption(sel, '0', '項目', true); appendOption(sel, '1', '項目A'); appendOption(sel, '2', '項目B'); parent.appendChild(sel); } function appendOption(parent, value, txt) { var op = document.createElement('option'); op.setAttribute('value', value); op.appendChild(document.createTextNode(txt)); if (arguments[3]) op.setAttribute('selected','selected'); parent.appendChild(op); } } </script> </head> <body> <form id="f0"></form> </body> </html>
その他の回答 (2)
推奨と一言に言っても、人によって大きく意見が分かれる部分ではないかと思います。 動くことが重要、から、原理主義まで。 ご質問にあるようなソースは「私は」お奨めしません。文法上も、実用上も。 ソースがもっと長く大きくなっていく過程のごく初期の段階で管理が大変になるでしょう。 文法に関しては、いくつかの文法チェッカーを試してみるとよいのではないでしょうか。 多数決が正しい結果を与えるというつもりはありませんが、同じように直されるポイントは やはり直した方がよいポイントと考えていいと思います。 ただ、文法が完璧ならそれで全部OKかというと、それだけではないわけで・・・。 Javascriptの書き方の主流は、writeln を使って内容を明示的に書いていく方法よりも、 DOMを使って要素とその内容を指定していく方法だと思います。(私がNo.1で出した例は、 後者の方法です。) この後者の方法では、スクリプトによって生成される内容が入るその場所にscript要素を 置く必要は無くなります。したがって、select要素の内部にscript要素を入れる必要も無く、 HTML的にもすっきりとしたものができますね。
お礼
再度のご回答ありがとうございます。 たしかに質問のやり方だと複数のselectを使うと 乱雑になっていました。 こちらの過去質問などを調べてwritelnを使っていたのですが 古いやり方?のようには思っていたのですが、 現在しようしている他のscriptと整合性もない書き方だったので 何とかしたいなと思って質問させて頂きました。 おかげで勉強になりました。 ありがとうごいました。 それで当初の質問からそれる内容なんですが、 現在使用してるのが、同一のオプション項目なのですが 複数のセレクトが存在しています。 その場合、No.1で教えてもらったDOMを使う方法では 's0'もしくは1つずつ指定して参照しないといけないですよね? そういう場合は一般的にはどんなやり方があるのでしょうか? 文法に固執するつもりはないので、文法チェッカー対策等無くても かまわないのですが主流の思われる基本的な方法があれば教えてもらいたいです。 以前から他の事でも、同一の複数ある場合はどうやって簡潔に省力するかが、ちょっとした疑問であったので^ ^; 主題からずれるので、もしよろしければで結構なのでよろしくお願いします。
文法チェッカーは、javascriptを実行して得られた結果に対してチェックをするわけではありません。渡したhtmlファイルに書かれた静的な内容だけをチェックします。したがって、静的な内容は文法的に正しくても、動的に生成された部分は(等価なものを静的に記述した場合)文法的に滅茶苦茶ということも簡単にできるわけです。いわば、静的に記述された部分で文法チェッカーを騙す、というわけです。ですから、javascriptで動的に内容を生成する場合、文法チェッカーを使用して高い点数を得ることの意味を最初に検討される方がよいかと思います。 ・・・というのを前置きとしてご理解いただいたうえで、「騙す」のであれば下記のような方法があるかと思います。文法チェッカーによる警告が少なくなるように静的な部分を書いておき、後からjavascriptでそれを書き換えてしまうという例になっています。 --- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>test</title> <script type="text/javascript"><!-- window.onload = function(){ var sel = document.getElementById('s0'); var dummy = sel.getElementsByTagName('option')[0]; dummy.parentNode.removeChild(dummy); appendOption(sel, '0', '項目'); appendOption(sel, '1', '項目A'); appendOption(sel, '2', '項目B'); sel.getElementsByTagName('option')[0].setAttribute('selected','selected'); } function appendOption(parent, value, txt) { var op = document.createElement('option'); op.setAttribute('value', value); op.appendChild(document.createTextNode(txt)); parent.appendChild(op); } // --></script> </head> <body> <form action="#"> <fieldset> <select id="s0"> <option selected="selected">dummy</option> </select> </fieldset> </form> </body> </html>
お礼
早速の回答ありがとうございます。 やっぱり、この文法チェッカーは静的なもののみなんですね。 なるほど、静的と動的両方用意しておくと言う手もあるんですね。 参考にさせていただきます。 文法チェッカーで満点を目指してる訳ではないのですが、 ほぼ独学で知識にバラツキがあるので、動作するだけでなく 現在推奨されてる文法を出来る限り覚えておきたいなと 思って質問させて頂きました。 その場合、質問のような文法はどうなんでしょう? 非推奨な一般的ではない文法なんでしょうか?
お礼
なるほど。 こういった流れにすればhtmlもスッキリとできるんですね。 再々のご回答いただきありがとうございました。 参考にさせていただきます。