JavaScriptからHTML画面に文字を表示

今日は、JavaScriptでHTML画面に文字を表示してみます。

1　画面に文字列を1文字ずつ増やして表示する

16の文字列があります。
これを1文字ずつ増やして行き、最終的に16文字すべてを表示します。

最終的に「今年は2021年、令和3年です。」と表示されました。
しかし、HTMLにはそのような文字列は何も書かれていないのです。

2　ソースコード

さて、上の項目1のソースコードですが･･･
＜HTMLのソースコード＞

<div id="effect"></div>

HTMLはたった1行だけで、「今年は～～です。」の文字列は何も書かれていません。
ということは、JavaScriptの方で書き込んでいるようです。

任意のidの「id="effect"」がポイントです。
※なお、CSSは使っていません。


＜JavaScriptのソース＞

const word = '今年は2021年、令和3年です。';
let i=1 ;
let element = ' ' ;
while (i <= word.length) {
  const part = word.substr(0, i) ;
  i++;
  element += `<p>${ part }</p>` ;
}
document.getElementById('effect').innerHTML = element;

たったこれだけで、最初の文字列を1文字ずつ増やして表示する作業をしているのですね。
9行目に「effect」が登場しましたね。

以下で、ソースコードの説明をします。

3　ソースコードの説明1

まずは、上のソースコードの2行目からの部分

let i=1 ;
let element = ' ' ;
while (i <= word.length) {
  const part = word.substr(0, i) ;
  i++;
  element += `<p>${ part }</p>` ;
}

この部分で何をやっているかですが･･･

変数「i」に「1」を代入しています。

変数「element」は「''」空白にしています。

そして「while」で繰り返しをさせます。

繰り返す回数は変数「i」が「word.length」(16)になるまでです。

変数「word」には文字列(今年は～～です。)が入っています、「length」でその文字列の文字数を取得します。

繰り返すたびに、変数「part」の文字列に「substr」で指定した文字列を入れていきます。

「substr」は文字列の中から文字を取り出します、「(0,i)」なので文字列の0番目から始めて「i」になるまでこの作業を行います。

そして「i++」で変数「i」の数を1つ増やします。

※「substr」の1文字目は1ではなく、「0」からカウントします。

「element +=」の「+=」は、左辺の変数(element)に右辺の文字列を追加します。
右辺の変数「part」に代入された文字列を<p></p>で囲んで、変数「element」に追加しているのですね。

<p></p>を囲んでいるのは「'」(クォート)ではありません。
似ていますが、「`」(バッククォート）といいます。

「バッククォート」で囲まれている文字列は「テンプレート文字列」といい、普通の文字列とは少し違った性質を持ちます。

テンプレート文字列の中に「${}」があると、「{}」内に書いた変数(この場合は「part」)の値が表示されます。

4　ソースコードの説明2

次に、項目2の最終行の9行目です

document.getElementById('effect').innerHTML = element;

左側半分の「document.getElementById('取得する要素のid属性')」で、HTMLからidが「effect」と書かれた部分を取得します。
HTMLに「<div id="effect">」と書かれている部分があります、ここを取得しているのですね。

右半分の「innerHTML = 挿入する要素;」で、左半分で取得した「effect」に「element」の内容を挿入します。

つまり、この1行でHTMLの「<div id="effect">」の部分に「element」の内容を表示しています。
※この画面に表示する作業が、「i」が文字数分(16)に達するまで繰り返されています。

5　ソースコードの説明3

最後に残った部分(項目2の1行目)ですが

const word = '今年は2021年、令和3年です。';

変数「word」に文字列「今年は～～です。」を代入しています。
この文字列が、画面に1文字ずつ増えて表示されています。