JavaScript第弐講　ボタンと色の変更

2.1　背景色を変更する

HTMLで指定された背景色は、JavaScriptで変更することが出来る。
前講「JavaScript第壱講　文字列の出力と日付」の記事の時と同様に、
適当なHTMLファイルを作成して保存し、
作成したHTMLファイルに、以下のソースコードを書いてみよう。

<form>
背景色を変更する：<br>
<input type="button" value="darkviolet"
 style="background-color:#9400d3;width:120px;height:40px"
 onClick="document.bgColor='#9400d3'">
<input type="button" value="gold"
 style="background-color:#ffd700;width:120px;height:40px"
 onClick="document.bgColor='#ffd700'">
<input type="button" value="orange"
 style="background-color:#ffa500;width:120px;height:40px"
 onClick="document.bgColor='#ffa500'">
<input type="button" value="yellowgreen"
 style="background-color:#9acd32;width:120px;height:40px"
 onClick="document.bgColor='#9acd32'">
</form>
すると、以下の様にブラウザ上に表示されるはずだ。
ここで、表示されているこれらのボタンを押下すると、
ページの背景色がボタンのラベルに記された色に変化する。
背景色を変更する：
<input>タグのtype属性にbuttonを指定すると、ボタンになる。
value属性に書いた値が、ボタンのラベルに表示される文字列になる。
style属性には、ボタン自身の色と縦横のサイズを指定している。
そして、onClick属性に書かれたbgColorプロパティは、
ページの背景色を参照または設定するJavaScriptの機能である。

上記のソースコードは、4色であるが、
今度は、さらに、12色を追加して、16色にしてみよう。 

<form>
背景色を変更する：<br>
<input type="button" value="black"
 style="background-color:#000000;color:#ffffff;width:120px;height:40px"
 onClick="document.bgColor='#000000'">
<input type="button" value="gray"
 style="background-color:#808080;width:120px;height:40px"
 onClick="document.bgColor='#808080'">
<input type="button" value="silver"
 style="background-color:#c0c0c0;width:120px;height:40px"
 onClick="document.bgColor='#c0c0c0'">
<input type="button" value="white"
 style="background-color:#ffffff;width:120px;height:40px"
 onClick="document.bgColor='#ffffff'">
<br>
<input type="button" value="red"
 style="background-color:#ff0000;width:120px;height:40px"
 onClick="document.bgColor='#ff0000'">
<input type="button" value="maroon"
 style="background-color:#800000;color:#ffffff;width:120px;height:40px"
 onClick="document.bgColor='#800000'">
<input type="button" value="teal"
 style="background-color:#008080;color:#ffffff;width:120px;height:40px"
 onClick="document.bgColor='#008080'">
<input type="button" value="aqua(cyan)"
 style="background-color:#00ffff;width:120px;height:40px"
 onClick="document.bgColor='#00ffff'">
<br>
<input type="button" value="lime"
 style="background-color:#00ff00;width:120px;height:40px"
 onClick="document.bgColor='#00ff00'">
<input type="button" value="green"
 style="background-color:#008000;color:#ffffff;width:120px;height:40px"
 onClick="document.bgColor='#008000'">
<input type="button" value="purple"
 style="background-color:#800080;color:#ffffff;width:120px;height:40px"
 onClick="document.bgColor='#800080'">
<input type="button" value="fuchsia(magenta)"
 style="background-color:#ff00ff;width:120px;height:40px"
 onClick="document.bgColor='#ff00ff'">
<br>
<input type="button" value="blue"
 style="background-color:#0000ff;color:#ffffff;width:120px;height:40px"
 onClick="document.bgColor='#0000ff'">
<input type="button" value="navy"
 style="background-color:#000080;color:#ffffff;width:120px;height:40px"
 onClick="document.bgColor='#000080'">
<input type="button" value="olive"
 style="background-color:#808000;width:120px;height:40px"
 onClick="document.bgColor='#808000'">
<input type="button" value="yellow"
 style="background-color:#ffff00;width:120px;height:40px"
 onClick="document.bgColor='#ffff00'">
<br>
<input type="button" value="darkviolet"
 style="background-color:#9400d3;width:120px;height:40px"
 onClick="document.bgColor='#9400d3'">
<input type="button" value="gold"
 style="background-color:#ffd700;width:120px;height:40px"
 onClick="document.bgColor='#ffd700'">
<input type="button" value="orange"
 style="background-color:#ffa500;width:120px;height:40px"
 onClick="document.bgColor='#ffa500'">
<input type="button" value="yellowgreen"
 style="background-color:#9acd32;width:120px;height:40px"
 onClick="document.bgColor='#9acd32'">
</form>
追加部分は、赤字で示している部分になる。
一部の<input>タグのソースコードが長くなっているのは、
ボタンに自身の色名を記したラベルを表示する際、
その色に応じた背景色・文字色を設定する必要がある為であり、
ここでは、ボタンの背景色が、暗色の場合は、ラベルの文字色を白字にしている。
ブラウザ上には、以下の様に、ボタンが16個並んで、表示されているはずだ。
背景色を変更する：




ちなみに、このスクリプトは、<input>タグ内に直接記述しているので、
<script language="JavaScript" type="text/javascript">
<!--
と
//-->
</script>
で挟む必要はない。

2.2　文字色を変更する

HTMLで指定された文字色も、JavaScriptで変更することが出来る。
今度は、HTMLファイル内に、以下のソースコードを書いてみよう。

<form>
文字色を変更する：<br>
<input type="button" value="darkviolet"
 style="background-color:#9400d3;width:120px;height:40px"
 onClick="document.fgColor='#9400d3'">
<input type="button" value="gold"
 style="background-color:#ffd700;width:120px;height:40px"
 onClick="document.fgColor='#ffd700'">
<input type="button" value="orange"
 style="background-color:#ffa500;width:120px;height:40px"
 onClick="document.fgColor='#ffa500'">
<input type="button" value="yellowgreen"
 style="background-color:#9acd32;width:120px;height:40px"
 onClick="document.fgColor='#9acd32'">
</form>
すると、以下の様にブラウザ上に出力されるはずだ。
ここで、表示されているこれらのボタンを押下すると、
ページの文字色がボタンのラベルに記された色に変化する。
文字色を変更する：
<input>タグのtype属性にbuttonを指定すると、ボタンになる。
value属性に書いた値が、ボタンのラベルに表示される文字列になる。
style属性には、ボタン自身の色と縦横のサイズを指定している。
そして、onClick属性に書かれたfgColorプロパティは、
文字色を参照または設定するJavaScriptの機能である。

上記のソースコードは、4色であるが、
今度は、さらに、12色を追加して、16色にしてみよう。 

<form>
文字色を変更する：<br>
<input type="button" value="black"
 style="background-color:#000000;color:#ffffff;width:120px;height:40px"
 onClick="document.fgColor='#000000'">
<input type="button" value="gray"
 style="background-color:#808080;width:120px;height:40px"
 onClick="document.fgColor='#808080'">
<input type="button" value="silver"
 style="background-color:#c0c0c0;width:120px;height:40px"
 onClick="document.fgColor='#c0c0c0'">
<input type="button" value="white"
 style="background-color:#ffffff;width:120px;height:40px"
 onClick="document.fgColor='#ffffff'">
<br>
<input type="button" value="red"
 style="background-color:#ff0000;width:120px;height:40px"
 onClick="document.fgColor='#ff0000'">
<input type="button" value="maroon"
 style="background-color:#800000;color:#ffffff;width:120px;height:40px"
 onClick="document.fgColor='#800000'">
<input type="button" value="teal"
 style="background-color:#008080;color:#ffffff;width:120px;height:40px"
 onClick="document.fgColor='#008080'">
<input type="button" value="aqua(cyan)"
 style="background-color:#00ffff;width:120px;height:40px"
 onClick="document.fgColor='#00ffff'">
<br>
<input type="button" value="lime"
 style="background-color:#00ff00;width:120px;height:40px"
 onClick="document.fgColor='#00ff00'">
<input type="button" value="green"
 style="background-color:#008000;color:#ffffff;width:120px;height:40px"
 onClick="document.fgColor='#008000'">
<input type="button" value="purple"
 style="background-color:#800080;color:#ffffff;width:120px;height:40px"
 onClick="document.fgColor='#800080'">
<input type="button" value="fuchsia(magenta)"
 style="background-color:#ff00ff;width:120px;height:40px"
 onClick="document.fgColor='#ff00ff'">
<br>
<input type="button" value="blue"
 style="background-color:#0000ff;color:#ffffff;width:120px;height:40px"
 onClick="document.fgColor='#0000ff'">
<input type="button" value="navy"
 style="background-color:#000080;color:#ffffff;width:120px;height:40px"
 onClick="document.fgColor='#000080'">
<input type="button" value="olive"
 style="background-color:#808000;width:120px;height:40px"
 onClick="document.fgColor='#808000'">
<input type="button" value="yellow"
 style="background-color:#ffff00;width:120px;height:40px"
 onClick="document.fgColor='#ffff00'">
<br>
<input type="button" value="darkviolet"
 style="background-color:#9400d3;width:120px;height:40px"
 onClick="document.fgColor='#9400d3'">
<input type="button" value="gold"
 style="background-color:#ffd700;width:120px;height:40px"
 onClick="document.fgColor='#ffd700'">
<input type="button" value="orange"
 style="background-color:#ffa500;width:120px;height:40px"
 onClick="document.fgColor='#ffa500'">
<input type="button" value="yellowgreen"
 style="background-color:#9acd32;width:120px;height:40px"
 onClick="document.fgColor='#9acd32'">
</form>
追加部分は、赤字で示している部分になる。
一部の<input>タグのソースコードが長くなっているのは、
ボタンに自身の色名を記したラベルを表示する際、
その色に応じた背景色・文字色を設定する必要がある為であり、
ここでは、ボタンの背景色が、暗色の場合は、ラベルの文字色を白字にしている。
ブラウザ上には、以下の様に、ボタンが16個並んで、表示されているはずだ。
文字色を変更する：




同様に、このスクリプトも、<input>タグ内に直接記述しているので、
<script language="JavaScript" type="text/javascript">
<!--
と
//-->
</script>
で挟む必要はない。

2.3 画面の背景色の点滅

参考文献に挙げた、「ホームページ　誰も書かなかったホントの裏技」の
101ページから102ページにかけて書かれているスクリプトに、
50ms間隔で画面の背景色を7色に点滅させるというものがあった。
作者はアニメ番組などの冒頭で「テレビを見るときは部屋を明るくして離れてみよう」の
テロップが流れる原因となった、某アニメで使われた技法「パカパカ」を意識したようだが、
これは本来青とピンクの補色の激しい光の点滅をいう。
余談だが、この事故を参考にアメリカとロシアが同様のてんかん症状を引き起こさせる
光線点滅兵器の開発に着手しているともいわれている。信憑性は定かではないが、
アメリカ側は非殺傷兵器としての研究、ロシア側はパソコンのモニター画面に
パカパカを表示させて利用者を気絶させるコンピュータウイルスの開発ということらしい。
話を元に戻すが、このスクリプトを参考にして、原点回帰の観点から「パカパカ」の再現を試みた。
但し、 背景色を点滅させるインターバルの間隔は適当である。 

<script language="JavaScript" type="text/javascript">
<!--
var color = new Array();
  color[0]="blue";
  color[1]="red";
  color[2]="blue";
  color[3]="red";
  color[4]="blue";
  color[5]="red";
  color[6]="blue";
  color[7]="red";
  color[8]="blue";
  color[9]="red";
  color[10]="blue";
  color[11]="red";
  color[12]="blue";
  color[13]="red";
  color[14]="blue";
  color[15]="red";
  color[16]="blue";
  color[17]="red";
  color[18]="blue";
  color[19]="red";
  color[20]="blue";
  color[21]="red";
  color[22]="blue";
  color[23]="red";
  color[24]="blue";
  color[25]="red";
  color[26]="blue";
  color[27]="red";
  color[28]="blue";
  color[29]="red";
  color[30]="blue";
  color[31]="black";
  color[32]=document.bgcolor;

  count=0;

  function setbgcolor(count){
    document.bgColor = color[count];
  }

  function flash() {
    if(count < color.length)
      setInterval("setbgcolor(count++)",25);
    count=0;
  }

//-->
</script>

<form>
<input type="button" value="点滅開始" onClick="flash()">
</form>
ここでは、「点滅開始」というラベルの貼られたボタンをクリックすると、
関数flashが実行され、redとblueを交互に0から31に設定し、
32番目は最初の背景色を取得して代入した。これらのインターバルの間隔は
参考文献に書かれていたスクリプトよりも短くして、25msとした。

ところで、上記では、配列を33個分直接代入しているが、
for文を使えば、以下のように、簡潔に書くことができる。

<script language="JavaScript" type="text/javascript">
<!--
var color = new Array();
for(n=0;n<=31;++n){
  color[2*n]="blue";
  color[2*n+1]="red";
}
color[64]="black";
color[65]=document.bgcolor;

count=0;

function setbgcolor(count){
  document.bgColor = color[count];
}

function flash() {
 if(count < color.length) setInterval("setbgcolor(count++)",25);
 count=0;
}
//-->
</script>

<form>
<input type="button" value="点滅開始" onClick="flash()">
</form>
或いは、配列を全く使わずに、 
var i = 0;

window.onload = function(){
  setInterval("flash()",50);
}

var flash = function(){
  if(i % 2 == 0){
    document.bgColor = "#ff0000";
  } else {
    document.bgColor = "#0000ff";
  }
  i++;
}
と書いてもいいかもしれない。
ちなみに、この書き方だと、ページが開いた瞬間に
for文が無限ループになる為、ページが開いている間、
点滅し続けるという、かなり危険な仕様となるので注意。

*注）　下のボタンを押す前に

人によっては気分を悪くする可能性がある。自己責任のもとで行うこと。
何度もやっていると、本当に気分が悪くなるかもしれないので、ほどほどに。

他にも、各自でblueをcyanにするとか、インターバルの間隔を変える等、
色々工夫をするのも面白いかも知れない。このように、スクリプトの書き方次第では、
ヤバい事も出来てしまうので、セキュリティ上問題があるともいえる。
なお、人によっては気分を悪くする可能性がある。自己責任のもとで行うこと。
何度もやっていると、本当に気分が悪くなるかもしれないので、ほどほどに。



参考文献

  1. 「ホームページ　誰も書かなかったホントの裏技」（秀和システム、2001年）
  2. 「ここまでできる！JavaScriptらくらく活用サンプル集」（秀和システム、2003年）
  3. 「詳解JavaScript辞典」（秀和システム、2007年）


Shadow Academy トップへ戻る

inserted by FC2 system