Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@70days_js

年末まで毎日webサイトを作り続ける大学生 〜3日目 文字数カウンターを作る〜

More than 1 year has passed since last update.

はじめに

初めまして。
年末まで毎日webサイトを作っている者です。
今日は文字数カウンターを作りました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は3日目。(2019/10/21)
よろしくお願いします。

サイトURL

やったこと

テキストのコピペで文字数を数えられるシステムを作りました。
使った言語はJavaScriptです。
昨日やった文字列操作(空白・改行取り除きシステム)が面白かったので今日も文字列系で作ってみました。こんな感じです↓
スクリーンショット 2019-10-21 22.16.06.png

こだわったところ

文字数に空白・改行を入れるか入れないか選べるようにしました。
空白・改行込みで文字数を知りたいなら「空白あり」ボタン
空白・改行なしで文字数だけ知りたいなら「空白なし」ボタンを押します。

html部分は入力欄をform+textarea、出力部分をbutton+divで作りました。

JavaScriptも昨日作ったものを少しアレンジした程度です↓

 <script>
        function text() {
            var text = document.forms.form1.input_text.value;
            var text11 = text.length;
            var target = document.getElementById("output");
            target.innerText = text11;
        }

        function text2() {
            var text2 = document.forms.form1.input_text.value;
            var text22 = text2.replace(/\s+/g, "");
            var target2 = document.getElementById("output2");
            target2.innerText = text22.length;
        }
    </script>

空白・改行ありの方は入力情報を受け取ってlengthメソッドで長さを図ります。
空白・改行なしの方は入力情報を受け取って、空白・改行を除いてからlengthメソッドで長さを図りました。

感想

文字列操作にはまってしまいました。
次はハイライトやったり、もっと驚くようなものを作っていきたいですね。
文字数をカウントするのってもっと難しいと思ってたんですけど実際はとてもシンプルでした。
これもメソッド作ってくれた方のおかげですね。
あと、相変わらずソースツリーを使ってのgit操作がうまくいきません。直接のアップロードはできるのでサイトは見れるものの、モヤモヤする...

参考

String - JavaScript | MDN
↑MDNは基礎が分かりやすいのでオススメです。

最後までお読みいただきありがとうございました。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
70days_js
スキルアップのために年末まで毎日webサイトを作ります。 開始: 2019/10/19~

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?