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

new-year-5874659_1920.jpg

今日は、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文字ずつ増えて表示されています。


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 142

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス
ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!)
かわいい かわいい かわいい かわいい かわいい かわいい かわいい かわいい かわいい

この記事へのコメント