第7回文字列 |
|
|
● 文字列のサイズと色を設定する
文字列を表示するとき、サイズと色を設定したり、装飾することができます。
文字列.fontsize(文字のサイズ) 文字サイズを設定（文字サイズは 1〜7） 文字列.fontcolor(色名または色指定値) 文字の色を設定する 文字列.big() 文字を大きくする 文字列.small() 文字を小さくする ここをクリックしてください。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i,datA;
datB=new Array("black","gray","silver","white","blue","navy","teal","green","aqua"
,"lime","yellow","magenta","olive","purple","maroon","red");
for(i=1;i<=7;i++)
{
datA="文字サイズ"+i+"<BR>";
document.write(datA.fontsize(i));
}
document.write("文字サイズbig<BR>".big());
document.write("文字サイズsmall<BR>".small());
document.write("文字サイズ標準<BR>");
document.write("<HR>");
for(i=0;i<=15;i++)
{
datA="★★★★★文字色"+datB[i]+"<BR>";
document.write(datA.fontcolor(datB[i]));
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>この例では .fontsize() で文字サイズを1〜7まで設定、.big() と .small() での文字の大きさ設定、.fontcolor() で標準16色名に文字の色を設定しています。
文字の色は、色名以外に #rrggbb という色指定値でも設定できます。赤（Red）、緑（Green）、青（Blue）をそれぞれ、2桁の16進数（00〜ff）で指定します。ここをクリックしてください。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i,j,k,datA,datB,datC;
for(i=255;i>15;i-=32)
{
datA="#"+i.toString(16);
for(j=255;j>15;j-=16)
{
datB=datA+j.toString(16);
for(k=255;k>15;k-=8)
{
datC=datB+k.toString(16);
document.write("■".fontcolor(datC));
}
document.write("<BR>");
}
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>.toString() というのは、( )内の進数に変換するもので、ここでは、255（16進数でff）までの10進数を16進数に変換しています。なお、.toString() は古いブラウザでは動作しません。
● 全体の文字色、リンクの文字色、背景色を設定する
ページ全体の色を設定または参照することもできます。
document.fgColor=色名または色指定値 文字色を設定／参照 document.linkColor=色名または色指定値 リンクの文字色を設定／参照 document.alinkColor=色名または色指定値 リンク中の文字色を設定／参照 document.vlinkColor=色名または色指定値 訪問済リンクの文字色を設定／参照 document.bgColor=色名または色指定値 背景色を設定／参照 ここをクリックしてください。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function disp()
{
var datA,datB,datC;
datA=Math.floor(Math.random()*100)+150;
datB=Math.floor(Math.random()*100)+150;
datC="#cc"+datA.toString(16)+datB.toString(16);
document.fgColor="purple";
document.linkColor="red";
document.alinkColor="blue";
document.vlinkColor="green";
document.bgColor=datC;
}
</SCRIPT>
</HEAD>
<BODY onLoad="disp()">
普通の文字<P>
<A HREF="_kantan.html">未訪問のリンク（存在しないページへのリンク）</A><P>
<A HREF="kantan0701.htm">訪れたことがあるリンク</A><P>
</BODY>
</HTML>文字の色は、色名により設定していますが、背景色は、色指定値の設定に乱数を使用して、ページを開くたびに、ランダムな色になるようにしています。
● 文字列の装飾
.blink() 点滅 <BLINK>文字列</BLINK> .bold() 太字 <B>文字列</B> .fixed() 固定ピッチフォント <TT>文字列</TT> .italics() 斜体 <I>文字列</I> .strike() 打ち消し線 .sub() 下付き文字 <SUB>文字列</SUB> .sup() 上付き文字 <SUP>文字列</SUP> .link(URL) リンクを設定 <A HRFE="URL">文字列</A> .anchor(アンカー名) アンカーを設定 <A NAME="アンカー名">文字列</A> 左列の JavaScript の設定は、右列の HTML タグと同じ結果になります。なお、Internet Explorer は.blink() が動作しません（HTML タグも）。これらの例はここをクリックしてください。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i;
document.write("普通の文字<HR>");
document.write("点滅（Internet Explorer は点滅しません）<HR>".blink());
document.write("太字<HR>".bold());
document.write("固定ピッチフォント<HR>".fixed());
document.write("斜体<HR>".italics());
document.write("打ち消し線<HR>".strike());
document.write("普通の文字"+"上付き文字<HR>".sup());
document.write("普通の文字"+"下付き文字<HR>".sub());
document.write("八光ホームページへのリンク<HR>".link("http://www.hakko.co.jp/"));
document.write("ここはアンカー01<HR>".anchor("anchor01"));
document.write("アンカー02に移動<HR>".link("#anchor02"));
for(i=1;i<=200;i++)
document.write(i+"＊<P>");
document.write("<HR>ここはアンカー02<HR>".anchor("anchor02"));
document.write("アンカー01に移動<HR>".link("#anchor01"));
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>単純に文字列を表示するときは、document.write("<I>斜体</I><HR>") というようにしても結果は同じですが、変数に代入された文字列を装飾するときなどは、このメソッドを使用する方が簡単です。
● 大文字／小文字にする
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function tCase()
{
with(document.form01)
{
txt02.value = txt01.value.toUpperCase();
txt03.value = txt01.value.toLowerCase();
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
文字列を入力してください：<INPUT TYPE="TEXT" NAME="txt01" VALUE="AbCdEfG" SIZE="30">
<INPUT TYPE="button" VALUE="変換" onClick="tCase()"><P>
大文字：<INPUT TYPE="TEXT" NAME="txt02" SIZE="30"><BR>
小文字：<INPUT TYPE="TEXT" NAME="txt03" SIZE="30"><BR>
</FORM>
</BODY>
</HTML>ここをクリックしてください。toUpperCase() は大文字に、toLowerCase() は小文字に文字列を変換します。
● 文字列の抜き出し
文字列.charAt(文字の位置) 位置の１文字を抜き出す 文字列.slice(開始位置,終了位置) 一部分を抜き出す（終了位置は省略可） 文字列.substring(開始位置,終了位置) 一部分を抜き出す 文字列.substr(開始位置,文字数) 一部分を文字数で抜き出す 先頭の文字位置は 0 です。sliceで終了位置を省略した場合は、文字列の最後まで抜き出します。
slice と substring は、[開始位置] < [終了位置] で共に正なら、結果は同じです。slice に負の数を入れると、文字列の後ろから数えた位置になります。substring では、[開始位置] と [終了位置] が入れ代わっても、同じ結果になります。例はここをクリックしてください。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function tCase()
{
var str,start,end;
with(document.form01)
{
str = txt01.value;
start = txt02.value;
end = txt03.value;
txt04.value = str.charAt(start);
txt05.value = str.slice(start,end);
txt06.value = str.slice(start);
txt07.value = str.substring(start,end);
txt08.value = str.substr(start,end);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
文字列：<INPUT TYPE="TEXT" NAME="txt01" VALUE="ABCDEFGHIJ" SIZE="20"><BR>
A：<INPUT TYPE="TEXT" NAME="txt02" SIZE="2">
B：<INPUT TYPE="TEXT" NAME="txt03" SIZE="2">
<INPUT TYPE="button" VALUE="表示" onClick="tCase()"><HR>
文字列.charAt(A)：<INPUT TYPE="TEXT" NAME="txt04" SIZE="20"><BR>
文字列.slice(A,B)：<INPUT TYPE="TEXT" NAME="txt05" SIZE="20"><BR>
文字列.slice(A)：<INPUT TYPE="TEXT" NAME="txt06" SIZE="20"><BR>
文字列.substring(A,B)：<INPUT TYPE="TEXT" NAME="txt07" SIZE="20"><BR>
文字列.substr(A,B)：<INPUT TYPE="TEXT" NAME="txt08" SIZE="20"><BR>
</FORM>
</BODY>
</HTML>次の例は、タイマーを使用して、メッセージをテキストボックスとステータスバーに表示します。ここをクリックしてください。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var tm,i=0,j=0;
function msg()
{
var k,mes;
mes=document.form01.txt01.value;
for(k=0;k<50;k++)
mes+=" ";
mes=mes.slice(i)+mes.slice(0,i);
document.form01.txt02.value=document.form01.txt01.value.slice(0,j);
window.status=mes;
i++;
if(i>mes.length)
i=0;
j++;
if(j>document.form01.txt01.value.length)
j=0;
clearTimeout(tm)
tm=setTimeout("msg()",200);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
<INPUT TYPE="text" NAME="txt01" VALUE="メッセージを入力してください" SIZE="50">
<INPUT TYPE="button" VALUE="スタート" onClick="msg()">
<INPUT TYPE="button" VALUE="ストップ" onClick="clearTimeout(tm)"><BR>
<HR><INPUT TYPE="text" NAME="txt02" SIZE="50">
</FORM>
</BODY>
</HTML>テキストボックスには、メッセージの先頭から１文字ずつ、ステータスバーには、文字が流れて見えるように、メッセージにスペースを加えた文字列を、途中から抜いたものと、残りの部分をつなげて表示しています。
● 文字列を検索する
文字列.indexOf(検索文字列,検索開始位置)
indexOf は、[文字列] から [検索文字列] を [検索開始位置] から検索し、最初に一致した文字列の先頭位置を返します。一致する文字列がない場合は -1 を返します。検索開始位置を省略すると、0 の位置（先頭）から検索します。例はここをクリックしてください。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function disp()
{
var i,datA="";
for(i=1;i<=1200;i++)
{
datA+=Math.floor(Math.random()*10);
if(i%50==0)
datA+="\n";
}
document.form01.txt02.value=datA;
}
function idx()
{
var i=0,n=0,datA,datB,datC;
datA=document.form01.txt01.value;
datB=datA.fontcolor("magenta");
datC=document.form01.txt02.value;
while((n=datC.indexOf(datA,n))!=-1)
{
datC=datC.slice(0,n)+datB+datC.slice(n+datA.length);
n+=(datB.length-1);
i++;
}
win01=window.open("","","width=500,height=400,scrollbars=yes");
win01.document.write(datA+" が、"+i+"箇所ありました。<HR>");
win01.document.write(datC+"<HR>");
}
</SCRIPT>
</HEAD>
<BODY onLoad="disp()">
<FORM NAME="form01">
<INPUT TYPE="text" NAME="txt01" VALUE="22" SIZE="10">
<INPUT TYPE="button" VALUE="検索開始" onClick="idx()">
<HR><TEXTAREA NAME="txt02" ROWS=25 COLS=60></TEXTAREA>
</FORM>
</BODY>
</HTML>ページを読み込むと、disp() が実行され、ランダムな数字を1行に50ずつ、1200字テキストエリアに書きます。
[検索] をクリックすると、この数字から、上のテキストボックスの数字列を検索し、一致した部分を magenta にして、一致した回数と共に、新しいウインドウを開いて書き出しています。