JavaScriptを解説しますTOPに戻る

一文字ずつ表示させる

ではどうやって一文字ずつ文字を表示していくか?

ここでは「string」のプロパティ「length」とメソッド「substring()」を使います

 

「string」というのは簡単に言うと文字が入った変数のことです

var s="JavaScript"

↑みたいにすると変数「s」は「string」になります

「string」になると「string」専用のメソッドとプロパティが使えるようになります

この2つも簡単に説明するとメソッドが「string」専用関数、プロパティが「length」のことです

ちょっと紛らわしくなってきましたね・・

 

とにかく「string」になったとしても変数という事実は変わらないのでそのあとに他に数値を入れてりすることもできます

ただ「string」専用の関数と「length」が使えるようになるだけです

お得ですね

 

「substring(from,to)」というのは「string」専用関数のひとつです

この関数は文字列のある範囲をの文字列を抜き出す事ができます

詳しく書くと「substring(from,to)」です

「from」から「to」-1の間の文字を抜き出すことができるというわけです

では試してみましょう

<script type="text/javascript">
var s="123456789";
alert(s.substring(1,5));
</script>

予想と違う結果になったと思います

実は「string」は0から数えることになっているんです

だから1から4まで表示したい場合は「s.substring(0,5)」と記入すればOKなのです

 

では次に「length」について説明します

これは「string」の数を教えてくれます

では試してみましょう

<script type="text/javascript">
var s="123456789";
alert(s.length);
</script>

ちゃんと9と表示されましたね

では本題の一文字ずつ表示される文字を作ってみましょう↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script type="text/javascript">
//表示する文字
var mozi="JavaScriptを解説します。できるだけ簡単に。間違ってても怒らないでね・・・"
//表示する文字の数
var i=0;
//文字表示間隔
var kankaku=200;
//文字を表示する関数
function ugoke(){
if(i<=mozi.length){
document.getElementById("kokoni").innerHTML=mozi.substring(0,i);
i++;
}
else
i=0;
}
setInterval("ugoke()",kankaku);
</script>
</head>
<body>
<p id="kokoni"></p>
</body>
</html>

今回はシンプルですね

if文で「i」を文字数と同じになるまで+1して表示文字数を増やしていきます

同じ数になったらまた0に戻してやりなおしです

じゃあ今回のおさらい

変数に文字を入れると「string」になる

メソッドとプロパティはstringの後に「.」を付けて使う

以上

次回は「未定」です。

 

inserted by FC2 system