質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1416閲覧

webサイト作成時のjavascriptの処理

yamaguti

総合スコア185

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/08/18 06:00

webサイト検索項目年度を以下のコードで追加したのですが、
検索後に再度指定することが、できずに困っています。
window.onload = function ()によって画面初期化時にこの処理が回るのは良いのですが
検索処理後も年度を再度指定できるようにどなたか、ご助力お願い致します。

javascript

1 <script type="text/javascript"> 2 window.onload = function () { 3 setEvent_to_OBJ("document.getElementById('year')", "change", "iniD") 4 5 ini(); 6 } 7 function setEvent_to_OBJ(objNameStr, eventTypeNameStr, fncNameStr) { 8 eval(objNameStr + ".on" + eventTypeNameStr + "=" + fncNameStr); 9 } 10 11 12 var dayT = new Date; 13 var strY = dayT.getYear(); 14 if (strY < 1900) { strY += 1900; } 15 16 function ini() { 17 iniY(); 18 } 19 function iniY() { 20 var yr = document.getElementById("year"); 21 yr.options.length = 3; 22 yr.options[0].text = strY - 1; 23 yr.options[1].text = strY; 24 yr.options[2].text = strY + 1; 25 yr.options[0].value = strY - 1; 26 yr.options[1].value = strY; 27 yr.options[2].value = strY + 1; 28 yr.options[1].selected = "selected"; 29 } 30 31 function iniD() { 32 var yr = document.getElementById("year"); 33 var d_flg = 0;//年月が現在と同じか否か 34 //月末の日数 35 36 if (yr.options[yr.selectedIndex].value == strY) { d_flg = 1; } 37 38 } 39 function uruu(year) { 40 if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) { 41 return 1; 42 } else { 43 return 1; 44 } 45 } 46 47 </script> 48 </head> 49 <body> 50 <form action="" method="post"> 51 <select name="year" id="year"> 52 <option value=""></option> 53 </select> 54

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/18 12:15

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

つまりは、リクエスト後に画面を再読み込みしたときに、あらかじめ検索項目に検索処理をする直前の情報が保持されているとよいということでしょうか。

幾つか手法があると思います。
1.具体的な実装はサーバーサイドのフレームワークにも関係してくるので言えませんが、レスポンスとして返却するHTMLがそのようになっていればよいため、デフォルトで入れ込んでおく。
2.クッキーや(モダンブラウザ対象ならば)ローカルストレージを利用してがんばる。
3.そもそも検索処理の結果、画面に更新が発生するのは検索結果の部分のみなので、Ajaxなどの技術を使って部分的に更新をする。セレクタは再読み込みしないので表示はそのままとなる。

個人的には3がお勧めです。検索結果をJSONなどで受け取るようにすれば尚よいと思います。
必要最低限の情報のみ受け渡しすることで、画面全体を更新する手間がなくなるので、ネットワーク上に流れる情報量が圧倒的にスリムになりますし、リロードで画面がちらつきません。検索押してからレスポンスを得るまで進捗状態がわかるようにするなども必要ですが。

また、本筋と関係ないのですが
・jQueryなどのライブラリを用いる。
・JavaScriptやCSSなどは別ファイルにする
・JavaScriptのコーディングはグローバル汚染などに気を付けたり、同値演算子を普段から使用
・uruu関数のリザルトはどちらも1ですがよろしいのでしょうか
・年と月末のコードはサーバーサイドで作った方が個人的にはいいと思います、リストを返す関数を作っておいてレスポンスのときに既にそういうセレクタを作っておきます。
等々注意を払うといいコードが書けると思います。

投稿2016/08/18 06:59

yuu341

総合スコア161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamaguti

2016/08/18 07:13

お世話になります。ご指摘ありがとうございます。 リザルトの数値はミスです。 サーバ側で現在年を取得しドロップダウンリストに+-1の数値を出力できるように頑張ろうと思います
yuu341

2016/08/18 07:27

サーバ側の処理で行うのであれば、やはり年度のセレクタはサーバー側で生成してしまうのがいいと思いますよ。 JavaScriptでリストを生成する方向でいくと、サーバー側でセレクタのどの項目に対してselectedを入れておけばいいのかわからないので、結局はhiddenか何かで埋め込んでおいて、onload時にそれを取得し設定するという流れになると思います。 JavaScriptとサーバーサイドで1つのリスト生成を巡って処理が行ったり来たりすると可読性や保守性が下がるので、なるべく一か所にまとめることをお勧めします。
yamaguti

2016/08/18 07:31

そうですね。
yamaguti

2016/08/18 07:31

細かくご説明頂きありがとうございます。その方向で修正を行おうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問