● 文字列のサイズと色を設定する
文字列を表示するとき、サイズと色を設定したり、装飾することができます。
文字列.fontsize(文字のサイズ) |
文字サイズを設定(文字サイズは 1~7) |
文字列.fontcolor(色名または色指定値) |
文字の色を設定する |
文字列.big() |
文字を大きくする |
文字列.small() |
文字を小さくする |
ここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
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)で指定します。ここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
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=色名または色指定値 |
背景色を設定/参照 |
ここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
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>
文字の色は、色名により設定していますが、背景色は、色指定値の設定に乱数を使用して、ページを開くたびに、ランダムな色になるようにしています。
● 文字列の装飾
.bold() |
太字 |
<b>文字列</b> |
.fixed() |
固定ピッチフォント |
<tt>文字列</tt> |
.italics() |
斜体 |
<i>文字列</i> |
.strike() |
打ち消し線 |
|
.sub() |
下付き文字 |
<sub>文字列</sub> |
.sup() |
上付き文字 |
<sup>文字列</sup> |
.link(URL) |
リンクを設定 |
<a href="URL">文字列</a> |
.anchor(アンカー名) |
アンカーを設定 |
<a name="アンカー名">文字列</a> |
左列の JavaScript の設定は、右列の HTML タグと同じ結果になります。これらの例はここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
var i;
document.write("普通の文字<hr>");
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("https://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>") というようにしても結果は同じですが、変数に代入された文字列を装飾するときなどは、このメソッドを使用する方が簡単です。
● 大文字/小文字にする
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
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(文字の位置) |
位置の1文字を抜き出す |
文字列.slice(開始位置,終了位置) |
一部分を抜き出す(終了位置は省略可) |
文字列.substring(開始位置,終了位置) |
一部分を抜き出す |
文字列.substr(開始位置,文字数) |
一部分を文字数で抜き出す |
先頭の文字位置は 0 です。sliceで終了位置を省略した場合は、文字列の最後まで抜き出します。
slice と substring は、[開始位置] < [終了位置] で共に正なら、結果は同じです。slice に負の数を入れると、文字列の後ろから数えた位置になります。substring では、[開始位置] と [終了位置] が入れ代わっても、同じ結果になります。例はここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
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>
次の例は、タイマーを使用して、メッセージをテキストボックスとステータスバーに表示します。ここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
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>
テキストボックスには、メッセージの先頭から1文字ずつ、ステータスバーには、文字が流れて見えるように、メッセージにスペースを加えた文字列を、途中から抜いたものと、残りの部分をつなげて表示しています。
● 文字列を検索する
文字列.indexOf(検索文字列,検索開始位置)
indexOf は、[文字列] から [検索文字列] を [検索開始位置] から検索し、最初に一致した文字列の先頭位置を返します。一致する文字列がない場合は
-1 を返します。検索開始位置を省略すると、0 の位置(先頭)から検索します。例はここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
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 にして、一致した回数と共に、新しいウインドウを開いて書き出しています。