LotosLabo

プログラミング技術とか気になった情報を載せていきます

Javascriptについて2

ダイアログ

confirmを使う


confirm(質問文)

確認ダイアログ(OKかキャンセルを選択)を出します。
OKならtrue、キャンセルならfalseとなります。


例:

<script>

var flg; //真偽を入れる変数の宣言

flg = confirm("背景の色を変えてもいいですか?"); //真偽の代入

if (flg == true) document.bgColor = "green"; //真なら背景色変更

</script>



promptを使う

変数 = prompt("質問文","最初に表示する文字");

インプットボックスを出します。
カッコ内の最初の項目は質問文、2番目の項目は初期表示文字を指定します。



例:

<script>

var str;  //入力文字を入れる変数

//インプットボックスの表示&入力文字をstrに代入
str = prompt("お名前を教えて下さい。","");

//strが空の場合の処理
if (str == "") str = "名無し";

//名前を表示する
document.write("<center>");
document.write("ようこそ、<b>" + str + "</b>さん!");
document.write("</center>");

</script>


遷移

location.hrefを使う


location.href="URL"

指定したURLへジャンプする


例:

<script>

function jump(){
  if (confirm("トップページに戻りますか?")==true)
    //OKならヤフーページにジャンプさせる
    location.href = "http://yahoo.co.jp";
}
</script>


セレクトボックスを使う


document.form名.select名.selectedIndex

セレクトボックスの選択番号を取得する


例:

<script>
//セレクトボックスに対応するリンク先を配列に入れる
var jpURL = new Array(
"http://yahoo.co.jp",
"http://yahoo1.co.jp",
"http://yahoo2.co.jp"
);

//リンク先へジャンプさせる関数
function selectNavi(){
  var num;
  
  //何番目のoptionが選択されたか調べる
  num = document.navi.contents.selectedIndex;

  //該当するリンク先へジャンプさせる
  location.href = jpURL[num];
}
</script>


戻る・進む・更新ボタンを使う


history.back()
一つ前のページに戻ります(ブラウザの戻るボタンと同じ)


history.forward()
一つ先にページに進みます(ブラウザの進むボタンと同じ)


location.relord()
ページを更新します(ブラウザの更新ボタンと同じ)



例:

<script>
//戻る
function modoru(){
  history.back();
}

//進む
function susumu(){
  history.forward();
}

//更新
function koshin(){
  location.reload();
}
</script>


戻るを押しても戻せないようにする


履歴を残さないことでページを戻さないようにする


location.replace(URL)

履歴を残さずに、カッコ内に指定したURLに移動しま


例:

<script>
function goTop(){
  location.replace("http://yahoo.co.jp");
}
</script>



サブウインドウを表示する


window.open("URL","ウィンドウ名")

指定したウィンドウ名でサブウィンドウを表示させます



例:

<script>
function winOpen(){
window.open("../index.html","sub");
}
</script>



サブウインドウのサイズと位置

window.open("URL","ウィンドウ名","オプション")
オプションを指定したサブウィンドウを表示します。


width
ウィンドウの横幅を指定します。サンプルでは640ピクセル。


height
ウィンドウの縦幅を指定します。サンプルでは480ピクセル。


top
デスクトップ上端からの距離です。サンプルでは0ピクセル。


left
デスクトップ左端からの距離です。サンプルでは0ピクセル。


例:

<script>
function subwin(jpURL){

  window.open(jpURL,"","width=640,height=480,top=0,left=0");

}
</script>


サブウインドウの他のオプション


scrollbars=yes/no
スクロールバーの表示、非表示を指定します。

toolbar=yes/no
ツールバーの表示、非表示を指定します。

menubar=yes/no
メニューバーの表示・非表示を指定します。

status=yes/no
ステータスバーの表示・非表示を指定します。

directories=yes/no
ディレクトリバーの表示・非表示を指定します。

resizable=yes/no
ウィンドウサイズ変更の許可・不可を指定します。

コントロール関係

テキストボックスの操作


document.form名.input名.value

テキストボックスに表示されている文字列を取得します



例:

<script>
//テキストボックスの文字を取得する
function tbox1(){

  var str1=document.js.txtb.value;
  alert("ようこそ"+str1+"さん!");

}

//テキストボックスの文字を操作する
function clr(){

  document.js.txtb.value="";

}
</script>


チェックボックスの扱い


document.form名.elements.checked

チェックされていればtrue、されていなければfalseを取得します


if ( document.formのname名.elements.checked ){ 処理 }

チェックされていれば、以降の処理が実行されます


例:

<script>
function boxCheck(){

  //チェックされた項目を記録する変数
  var str="";
  
  //for文でチェックボックスを1つずつ確認
  for( i=0; i<6; i++ )
  {
    //チェックされているか確認する
    if( document.chbox.elements[i].checked )
    {
      //変数strが空でない時、区切りのコンマを入れる
      if( str != "" ) str=str+",";
      
      //チェックボックスのvalue値を変数strに入れる
      str=str+document.chbox.elements[i].value;
    }
  }  
</script>



チェックボックスがONかOFFかの確認

document.form名.elements[].checked = true/false

trueならチェックを付け、falseなら消します。

フォーカスを操作


document.form名.elements.focus()
フォーカスを合わせる


document.form名.elements.blur()
フォーカスを外す


テキストを選択状態にする

document.form名.elements[].select()

テキストを選択状態にする


文字列を数値に変換


parseInt(文字列)
文字列を整数に変換する


parseFloat(文字列)
文字列を少数に変換する



例:

<script>

function tasu()
{
  //テキストボックスの数値を変数に格納する
  var num1=document.keisan.elements[0].value;
  var num2=document.keisan.elements[1].value;
  
  //計算結果をアラートで表示
  alert(num1+num2);
}
</script>


エラー処理


try{ 処理 }catch(e){ エラーが出た時の処理 }

tryのカッコ内の処理でエラーが出た場合、catch()の中カッコ内処理を行う

try
{
  エラーが出そうな処理を記述
}
catch(e)
{
  エラーが出た時の処理を記述
}