□技術メモ - JavaScript ※管理人の個人的な技術メモです。サンプルソースを実行した結果について 管理人はいかなる責任も負いかねますのでご自身の責任でお試しください。 ----------------------------------------------------------- このページではWebアプリの開発にJavaScriptを使用する際の Sampleを記載しています。 ○疑問・保留・未確認 ----------------------------------------------------------- ○JavaScriptを記述する JavaScriptに対応していないブラウザの場合を考慮して以下のような記述をすることが多い。 ... ----------------------------------------------------------- ○外部JavaScriptファイルを読み込む ・外部ファイルを読み込んだ場合は間のコードは無効になる。 ・外部ファイルを取り込んだ上で、html内にJavaScriptのコードを書く場合は、 別の ----------------------------------------------------------- ○外部CSSファイルを読み込む ----------------------------------------------------------- ○CSSを定義する フォントサイズは20pxです。 フォントサイズは30pxです。 ----------------------------------------------------------- ○ボタンがクリックされた際に関数を呼び出す ----------------------------------------------------------- ○ボタンが通過した時にボタンのイメージを変える img1.pngに暗いイメージ、img2.pngに明るいイメージを設定すると マウスオーバーした時にボタンが使用可能であることを知らせることができる ----------------------------------------------------------- ○複数の関数を連続して実行する ・関数の間には ; が必要。最後の関数の後に ; があっても問題ない。 ----------------------------------------------------------- ○フォーム上のすべてのtextの値を取得する ○ＯＫ／キャンセル ダイアログを表示する ○キャンセルでSubmitを中断できるようにする <説明> ・actionの指定がない場合はsubmitボタンの押下により現在の画面が再表示される。 その際、フォーム上の情報（ボタン等も含めて）は、パラメータととしてURLに設定される。 ・onClickの指定では、return + 関数名 とする。 戻り値がfalseの場合はactionは実行されない。 ・document.フォーム名.elements[i] でフォーム上のエレメントを全て取得できる。 ・console.log(str)で、javaScriptのコンソールに出力できる。 コンソールの開き方は以下の通り。 fireFox : ctrl + shift + K chrome : F12 IE : F12(別ダイアログで表示される) ・下記の場合、OKを選択した場合のコンソール出力は画面更新が起きてしまうため確認できない。 ・javaScriptのコンソールに出力する場合はcharsetの指定（漢字等を含む場合はutf-8）、およびDOCTYPEの指定が必要になる。 DOCTYPEの最短の記述は test.html (文字コードはutf-8) --------
X=
Y=
Z=
-------- ----------------------------------------------------------- ○IDを指定してエレメントを参照する。 var objElm = document.getElementById('id_x'); ----------------------------------------------------------- ○URLのパラメータの値をデコードする ・URLで使用できるのはLatin1なので、個々のパラメータを取得した後にデコードが必要になる。 var strVal = decodeURIComponent(paramValue); ----------------------------------------------------------- ○連想記憶に登録する var objReq = new Object(); //Object型は連想記憶が可能 var strName = decodeURIComponent(strName); //URLから取得した場合はデコードが必要 objReq[strName] = decodeURIComponent(strValue); //名前を付けて値を登録する ----------------------------------------------------------- ○URL全体、もしくはパラメータを取得する var strURL = windows.location.href; //URL全体 var strPara = windows.location.search.substring(1); // URLの ? より右側を取得 ----------------------------------------------------------- ○URLのパラメータを分解してオブジェクトに格納する ・関数とその使用例は以下の通り。 function getObjReq(objReq){ var strPara = windows.location.search.substring(1); // ? より右側を取得 var saPara = strPara.split('&'); // & で分割 for(i in saPara) { var saElement = saPara(i).split('='); var strName = decodeURIComponent(saElement[0]); var strVal = decodeURIComponent(saElement[1]); objReq[strName] = strVal; } return objReq; } var objReq = new Object(); //newで宣言する objReq = getObjReq(objReq); //使用例 ----------------------------------------------------------- ○パラメータの値をTEXTにセットする function initText(){ var strInit = "X,Y,Z"; var saNames = strInit.split(','); var objReq = new Object(); //newで宣言する for(i in saNames) { objReq[ saNames[i] ] = ""; //NAMEをすべて登録 } objReq = getObjReq(objReq); //パラメータ取得 document.getElementById('id_x').value = objReq["X"]; document.getElementById('id_y').value = objReq["Y"]; document.getElementById('id_z').value = objReq["Z"]; } ----------------------------------------------------------- ○起動時の関数の実行について ・起動時の自動実行の指定は、window.onload= による指定と、body onload= による指定がある。 ・下記のtest2.htmlをchromeで実行した場合の実行手順は以下の通り。 ----------------------------------------------------------- ○起動時に関数を実行する（body onload による指定） ----------------------------------------------------------- ○起動時に関数を実行する（実行手順の確認） ・実行時ログが、変数gsLogに追加されていく。 ・「実行手順を表示します」ボタンを押下すると、gsLogの内容が表示されます。 ・変数の初期化 → window.onLoad → body onload の順で実行されるが、 window.onLoad は実行されないことがあるので注意すること。 test2.html (文字コードはSJIS) --------
-------- -----------------------------------------------------------