- 締切済み
どこまでを動的に、どこまでを静的に作るか
Javascript, jQueryを用いてシステムを作っています。 例えば、データベースから取り出したデータを表に表示したり、自作のダイアログボックス(div要素など)を出したり引っ込めたりする、といった場合を考えます。 そのとき、静的な部分(表のtableタグ・ダイアログボックスなど)と動的な部分(表の内部のtrやtdなど)が分かれます。 そこで、静的な部分は極力HTMLに直接書くようにするのか、白紙のHTMLにJavascriptで全ての要素を配置していくのか迷っています。 静的な部分をHTMLで書くようにした場合、後でJavascriptから操作するための空のタグが大量発生し、結局HTMLだけを見ても意味不明ということになり、表の行数など動的に変化する部分は結局要素をJavascriptから生成しなければならず、静的に生成した要素と動的に生成した要素が混ざり合って一貫性が失われるといった問題を個人的には感じています。 逆に、すべてをJavascriptで記述した場合、全体としては記述量は増えることになりますし、読み込みも遅くなりそうに思えます。 どこまでをHTMLで書き、どこまでをJavascriptで書くのか、何か流儀のようなものがあればご教授ください。よろしくお願いします。
- hxwqt563
- お礼率44% (8/18)
- AJAX
- 回答数2
- ありがとう数19
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- think49
- ベストアンサー率59% (285/482)
データベースからデータを取り出すならサーバサイド言語で取り出すのか、クライアントサイド言語で取り出すのか、で実装法が変わると思います。 私は JavaScript はなくても動作するように実装するので 下記のように使い分けます。 - JavaScript が無効ならサーバサイドスクリプトでHTML出力 - JavaScript が有効なら初回出力時だけサーバサイドスクリプトでHTML出力し、動的変更部分はJavaScriptでDOM操作 > 静的な部分をHTMLで書くようにした場合、後でJavascriptから操作するための空のタグが大量発生し 上述のように JavaScript がなくてもサーバサイドスクリプトでHTML出力するので空タグが多量発生する事はありません。 JavaScript はあくまで動的出力に留める事で無駄なHTMLが生まれないようにしています。 これは「でしゃばらないJavaScript」や「控えめなJavaScript」と呼ばれます。 http://www.ibm.com/developerworks/jp/web/library/wa-aj-unobtrusive/ # Re: hxwqt563さん
- shockatz
- ベストアンサー率80% (153/191)
非常に悩ましい問題です。 自分はknockoutjsや、angularjsのような「UI自動制御モジュール」をテンプレートエンジンとして使い、ジレンマに終止符を打ちました。 インターフェース要素を、ユーザの入力経過に合わせてAjaxで取得し、動的に連動表示するケースなどでは大きな威力を発揮します。 モデルの定義など、一度データスキーマを作らねばいけない手間はありますが、慣れれば、バグも発生しにくく、作業を標準化しやすいのでおすすめです。 knockoutjs http://knockoutjs.com/ http://kojs.sukobuto.com/ いったん理解できれば、イベントハンドラだらけのjavascriptに戻る気はなくなるでしょう。 、
お礼
悩ましい問題な割に、調べても解決策や流儀が出てこないので困っていました。 このような問題を解決するモジュールが出ていることはとても参考になりました。有り難うございます。
関連するQ&A
- 開閉式をページ内の通常のHTMLにしたい
JavaScriptで開閉式をページ内の通常のHTMLタグにするにはどうしたらいいでしょうか? この目次を作るJavaScriptですが右上の目次を押すと開閉します。 http://www.skuare.net/test/jToc.html これを開閉式ではなく、通常のHTMLファイルのように任意の位置にタグが生成されるようにしたいのですがどこを変更すればいいでしょうか? http://www.skuare.net/test/js/jquery.jqTOC.js よろしくお願いいたします。 この質問に補足する
- ベストアンサー
- JavaScript
- jQueryでコールバック関数を呼び出すには
お世話になっております。 最近、Javascriptを使い始めたばかりの初心者です。 Jqueryを使って動的にhtmlを生成した後にコールバック関数を呼び出して処理させることはできますか? たとえば下記のようなソースで <p>動的にhtmlを生成</p>が ブラウザにレンダリングされた後、処理を行いたいのですが、どのようにすればよいでしょうか? $(function(){ $("div#box").html("<p>動的にhtmlを生成</p>"); }); <html> <divi d="box">ここにhtmlを生成</div> </html> ちなみに↓こんな書き方をしても動きませんでした。 $("div#box").html("<p>動的にhtmlを生成</p>",function(){ //コールバック関数 alert("test"); }); ご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
- table を配列で取得
HTML のtableタグで生成した表の各セルの値を、 PHPの配列で取得するやり方があるらしいのですが。 どのように記述するのでしょうか? サンプル等がありましたら、教えてください。
- ベストアンサー
- PHP
- DOMとjavascriptについて
javascriptとperlを駆使して、動的なホームページを作っています。 javascriptで動的にタグを生成してそれを参照したりするような処理を、書いていくと時々新しく生成したタグを参照できなくなったりします。ここにスクリプトを掲載することは出来ないんですが、ajax通信でサーバーとデータをやり取りし、何度もhtmlを書き換えるホームページを作っています。するとなぜだか新しく生成したタグが参照できなくなったりします。 他にはjqueryのappendメソッドで、タグを文字列として直接書き込んだ場合、タグをタグとして認識してくれないということもありました。 javascriptに原因があるのか、domに原因があるのか、それともテスト用のブラウザに使っているfirefoxの処理の仕方に原因があるのかわかりません。どなたか原因を知っている方がいらしたら是非ご教授ください。
- ベストアンサー
- JavaScript
- HTMLタグに独自属性を追加?
Webアプリに関する質問ですが、HTML規約に関係ありそうなことなので、こちらで質問させていただきます。 サーバサイドスクリプトを使ってHTMLに値を埋め込み、その値をJavascriptで使用する場合、<input type="hidden">なタグを使うのはよくある話ですが、最近、HTML生成量を減らすためかどうかはわからないのですが、タグに独自属性を追加しているケースが見られます。 <ul class="movie-incoming"> <li data-id="201254" data-status="ordered">プロメテウス</li> <li data-id="201255" data-status="unordered">ロック・オブ・エイジズ</li> <li data-id="201258" data-status="unordered">漆黒の闇で、パリに踊れ</li> </ul> コード量は小さいし、jQueryでli要素の中にクリックイベントを仕込み、イベントハンドラで、$(this).attr("data-id")などとやれば簡単に設定値を得ることができるので、非常に賢いやり方だと思っています。 問題は、このような記述方法がHTML的に正しいのか、という点と、すべてのブラウザで対応できるのか、ということです。 モバイル用のjQueryMobileなどでもさかんに使われているようですが、どうなんでしょうか?
- ベストアンサー
- CSS
- HTML5.0のCanvas要素について
サイトにグラフ(降水雨量。1時間単位)を表示したいと思っています。 そのための技術を調べてたところHTML5.0のcanvas要素 と JavaScriptに行き着きましたが、 HTML5.0のcanvas要素 と JavaScript の役割分担が理解できませんでした。 Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。*1 (参照 HTML5.JP:http://www.html5.jp/canvas/what.html) とありますが、HTML5.0を使わずにXHTMLとJavaScriptでグラフを表示してるように見えるサイトがあります。 XHTMLとJavaScriptで実現可能であるなら、canvas要素はなぜ注目しているのだろうと疑問に思いました。 具体的に聞きたいことは 1.HTML5.0 canvas要素を使わずにXHTMとJavaScriptを使い、サイトにグラフは出力できるでしょうか。 2.*1でのプラグインとはJavaScriptファイル(.js)も含むのでしょうか 3.HTML5.0で記述したサイトでグラフ表示だけはCanvas要素を使わずにJavaScriptライブラリを使い記述するのは非効率なのでしょうか。 分かる部分だけでもお答えして頂けると助かります。 知識が足りずとんちんかんな質問になってるかもしれませんが、 よろしくお願いします。 下記はHTML4.1 と JavaScriptで出力されたグラフです。 http://highcharts.com/demo/
- ベストアンサー
- HTML
- Jqueryのajaxを用いてHTMLの読み込み
こんにちは。 Jqueryのajaxで広告向けのJavaScriptが記述されたhtmlを取得し、関数【$("#ID").html(htmlソース);】を用いて、HTMLを読み込んだ際に、それに記述されているJavaScriptが動作してくれません。 読み込むHTMLに記述されているJavaScriptは以下です。 <script type="text/javascript" src="//xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js"></script> ご存知の方がいらっしゃいましたら、教えて頂きたいです。
- 締切済み
- JavaScript
- テキストボックスの文字の大きさを変更するには
タグ打ちでWebページを作っています。 テキストボックスに関する質問です。 テキストボックス本体の大きさは下のように記述すれば指定できることはわかっているのですが、 <input type="text" size=xx> テキストボックス内の「文字」の大きさを変更するにはどうすればよいでしょうか。 HTMLタグ、JavaScript、CSSでできる方法を教えてください。
- ベストアンサー
- その他(プログラミング・開発)
- POSTされた値を書き出し
perlなどにPOSTやGETされた値をscirpt要素内に安全にしたいです こんな感じのjqueryを書き出したいと思っています。 $("#hoge").animate({width: "500px", height: "500px"},1000,"linear"); 使えるjavascriptの制限がかなりかかってもいいのでperlの置換えや送られてくるコードがjqueryかどうか判定などを使って安全に使えるようにする方法はありますか? 例えば、値のみをHTMLのフォームから送信してjqueryの値に入れて表示する方法の安全性はどうでしょうか? よろしくお願いします <script type="text/javascript"> ここにPOSTやGETされた値を基にしたjqueryなどを記述したい <script>
- ベストアンサー
- JavaScript
- PHPで、指定した要素の最後にHTMLを追加したい
JavaScriptのjQueryで実現していた機能なのですが、 あるタグ内の最後に、記述を追加するのを 今度はPHPで実現したいと考えています そのような関数があれば教えていただけないでしょうか? 以下、補足です JavaScriptでの実現方法の説明ページ http://www.re-creators.jp/blog/2008/12/09_167.html JavaScriptで実現した際の記述結果 [JavaScriptでの記述] $('#test').append('<p>一行追加します。</p>').scrollTop(99999); [HTMLでの記述] <div id="test"><p>既存の一行です</p></div>
- ベストアンサー
- PHP
お礼
なるほど、Javascriptがなくても動くように実装する、目から鱗です。 適切な設計を考えれば自然と出る結論のはずが、すっかり見失っていました。 ご回答ありがとうございました。