HTML JavaScript

【JavaScript】入力した文字を先頭から1文字ずつ表示させる方法

【JavaScript】入力した文字を先頭から1文字ずつ表示させる方法

今回はHTMLとJavaScriptを使って「入力した文字を先頭から1文字ずつ表示させる方法」をご紹介していきます。

文章だと分かりにくいので画像で図解すると次のようになります。

感覚としては見た目をHTMLで、裏のシステムをJavaScriptで実装していくイメージです。

それでは見ていきましょう!

実装環境

  • HTML5
  • JavaScript
  • Google Chrome 85.0.4183.121

HTMLのコードを書く

まずはHTMLで簡単な入力欄とJavaScriptを呼び出すボタンを作りましょう。

それでは重要な箇所を解説していきます。

■p属性

p属性ではout_spaceというidを指定しています。

これはJavaScriptで文字を出力させる時に、書き出す場所を同期させるために指定しています。

■input属性

typeをtextにすることで入力ボックスが生成されます。

idではJavaScriptと同期させる時に用います。

valueは入力ボックスに書かれているテキストを指します。今回のコードの様にあらかじめ設定しておくことも可能です。

■button属性

onclickではボタンを押された時の処理を指定できます。

ここではstartTimer()という関数を呼び出します。

JavaScriptのプログラムを書く

続いて先程記述したHTMLのコードの下に以下のJavaScriptのプログラムを書いていきます。

ポイント

*HTMLとJavaScriptでファイルを分けても良かったのですが、今回は大した処理ではないので同ファイル内で済ませます。



それでは重要な箇所を解説していきます。

■関数の宣言

  • function word(){
    入力された文字を1文字ずつ出力する処理をまとめた関数
  • function startTimer(){
    関数word()を2.0秒ごとに実行させる関数

■変数の宣言

  • var n;
    文字を増やす処理の回数を数える変数nの宣言
  • var s = document.getElementById("input_box").value;
    HTMLの入力欄に入力された文字を取得する変数sの宣言
  • var len = s.length;
    入力された文字の変数sの文字数をカウントする変数lenの宣言

■タイマー処理

今回は指定した時間ごとに処理を実行するsetInterval関数、それを停止させるclearInterval関数を使っています。

JavaScriptには他にもいくつかタイマー処理があります。

JavaScriptのタイマー機能

  • setTimeout関数
    指定した時間経過後に処理を実行する
  • setInterval関数
    指定した時間ごとに処理を実行する
  • clearTimeout関数
    setTimeoutで設定したタイマーを取り消す
  • clearInterval関数
    setIntervalで設定したタイマーを取り消す

Javascriptのタイマー処理setIntervalとsetTimeout - Qiitaより

まとめ:JavaScriptのタイマー機能を使いこなそう

今回はHTMLとJavaScriptを使って入力した文字を先頭から1文字ずつ表示させる方法をご紹介しました。

JavaScriptにはタイマー機能を始めとした便利機能がたくさん用意されています。

またWeb言語ということもあり難易度もやさしめなのでプログラミング初心者にはおすすめです!

わからない部分があればTwitterのDMで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

▼プログラミングで行き詰まっている方はこちらの記事がオススメです▼

プログラミングを理解できないときの対処法【5つのパターンから解説します】
プログラミングを理解できないときの対処法【5つのパターンから解説します】

続きを見る

プログラミングスクールおすすめ6選【料金や口コミを徹底比較】
プログラミングスクールおすすめ6選【料金や口コミを徹底比較】

続きを見る

プログラミングでエラーが発生したときの解決方法
プログラミングでエラーが発生したときの解決方法

続きを見る

▼最新映画や漫画が無料で見れちゃう▼
▼最新ドラマや漫画が無料で見れちゃう▼

-HTML, JavaScript

Copyright © wagtechblog All Rights Reserved.