スマホ/幅480px/幅640px

ガレコレ [Garage Collection]
トップページ
News,blog & history


【HTML5&CSS3&JavaScript】
 一昔前だったら<select>の値を指定する場合は、document.forms[0].elements[0].options[n].selected=true;ぐらいしかありませんでした。

 今では、要素、名前、idのいずれでもselectオブジェクトを指定できて、options[n]=trueだけではなく、selectedIndex、valueで値を指定できます。


-- HTML部分 --

<form>
<select name="month" id="id_month">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</form>
--

-- 全部 5月 --

【要素指定】
document.forms[0].elements[0].options[4].selected=true;
document.forms[0].elements[0].selectedIndex=4;
document.forms[0].elements[0].value=5;

【name指定】
document.date.month.options[4].selected=true;
document.date.month.selectedIndex=4;
document.date.month.value=5;

【id指定】document.getElementById('id_month').options[4].selected=true;
document.getElementById('id_month').selectedIndex=4;
document.getElementById('id_month').value=5;
--
 
 eval()は、()内の数式や文字列をJavaScriptの構文として実行します。

 今まで、全く使ってこなかったeval()ですが、使い道がありました。


 例として、日付に関するプログラミングで説明します。

 元々の_new_date_unix($num)関数は、引数にUNIXミリ秒を与えると、日付オブジェクト$dateおよびその日付変数群を作成してくれました。

-- プログラミング --
<script>

$week = new Array("日","月","火","水","木","金","土");

function _new_date_unix($num){
  
  if(typeof $num === "undefined"){
    // 現時刻
    $date = new Date();
  }else{
    $date = new Date($num);
  }
  
  $y = $date.getFullYear();
  $m = $date.getMonth()+1;
  $d = $date.getDate();
  $w = $week[$date.getDay()];
  $date_text = $y+"年"+$m+"月"+$d+"日("+$w+")";
  $date = new Date($y,$m-1,$d);
  $unix = $date.getTime()/1000');
}

</script>
--

 開始日付と終了日付を比較したりするために、年の変数を$start_y = $y、$end_y = $yと、わざわざ関数の外で格納していました。

 関数内で、異なる変数名を作成できないかということで、eval()の登場です。


 _new_date_unix($num,$str)は、UNIXミリ秒[$num]と頭名[$str]の2つの引数で、頭名の付いた日付オブジェクトとその日付変数を作成します。

-- プログラミング --
<script>

$week = new Array("日","月","火","水","木","金","土");

function _new_date_unix($num,$str){
  
  if(typeof $str === "undefined"){
    $str = "";
  }else{
    $str += "_";
  }
  
  if(typeof $num === "undefined"){
    // 現時刻
    eval('$'+$str+'date = new Date()');
  }else{
    eval('$'+$str+'date = new Date($num)');
  }
  
  eval('$'+$str+'y = $'+$str+'date.getFullYear()');
  eval('$'+$str+'m = $'+$str+'date.getMonth()+1');
  eval('$'+$str+'d = $'+$str+'date.getDate()');
  eval('$'+$str+'w = $week[$'+$str+'date.getDay()]');
  eval('$'+($str==""?'date_':$str)+'text = $'+$str+'y+"年"+$'+$str+'m+"月"+$'+$str+'d+"日("+$'+$str+'w+")"');
  eval('$'+$str+'date = new Date($'+$str+'y,$'+$str+'m-1,$'+$str+'d)');
  eval('$'+$str+'unix = $'+$str+'date.getTime()/1000');
}

</script>
--

 つまり、引数$strに何も指定しないと、日付オブジェクト名は$dateになりますが、"start"を指定すると、$start_dateになります。


P.S. PHPでは、変数名を別の変数で指定できる『可変変数』があって便利です。

-- PHPプログラミング -- 
<?php

$str = "$str2";
$str2 = "Hello!";

echo $$str;  // echo $str2;に同じ。

?>
--

-- 表示 --
Hello!
--

 しかし、JavaScriptにはありません。ちなみに、JavaScriptには$$メソッドというものがあります。


P.S.2 JavaScriptで『可変変数』もどきなことができますが、それは次回ということで。
 

お問い合わせ


by Network Communication Note