Help us understand the problem. What is going on with this article?

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

はじめに

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

サイトURL

https://sin2cos21.github.io/day3.html

やったこと

テキストのコピペで文字数を数えられるシステムを作りました。
使った言語は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は基礎が分かりやすいのでオススメです。

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした