HTML JavaScript

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

更新日 :

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

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

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

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

【迷ったらココ!】HTMLやJavaScriptが学べるプログラミングスクール3選

テックアカデミー
テックアカデミー
デイトラ
デイトラ
侍エンジニア
侍エンジニア(SAMURAI ENGINEER)
講師は全員現役エンジニア
週2回のマンツーマンメンタリング
無料の転職サポートあり
課題レビュー&チャット質問し放題
1年間のエンジニアサポート
カリキュラムは無期限閲覧可能
専用チャットコミュニティ参加
Webセミナー勉強会に参加

累計指導45,000人&転職成功率98%
オーダーメイドカリキュラム対応
無料の転職サポートあり
専属マンツーマンレッスン方式

当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。

HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】

HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい!でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...

更新日:2024年1月29日

実装環境

  • 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言語ということもあり難易度もやさしめなのでプログラミング初心者にはおすすめです!

JavaScriptやHTML/CSSの学習でつまづいた時、独学に限界を感じた時はこちらの記事もオススメです。

JavaScriptが学べるプログラミングスクールおすすめ8選

JavaScriptを学習して挫折したからプログラミングスクールに入塾したい!でもどのスクールが良いんだろう... JavaScriptを学びたいけどまず何から始めたら良いのか分からない...プログラ ...

更新日:2024年1月29日

HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】

HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい!でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...

更新日:2024年1月29日

無料体験できるプログラミングスクールおすすめ10選を解説
無料体験できるプログラミングスクールおすすめ10選を解説

プログラミングスクールって思ったより高いからなかなか決められない... 無料体験できるプログラミングスクールを知りたい! せっかくプログラミングスクールに入るなら、無料体験に参加して自分に合うスクール ...

更新日:2024年1月29日

プログラミングスクールの口コミ投稿フォーム
  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-HTML, JavaScript

Copyright © wagtechblog All Rights Reserved.