Lesson7「実践!入力文字数をカウントしよう!」

この練習は本入部生のみ閲覧できます。

本入部はこちら

学習概要

イベント処理を使って、実際にホームページに動きをつけてみます!今回は、フォームに入力された時に自動で文字数がカウントされるアレ!

補足

ログインが必要です

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson7「実践!入力文字数をカウントしよう!」の内容※SEO用のため読めません

すねの入力フォームに入力した文字の文字数を数えるといった機能 JavaScript で作っていきたいと思います送っていくなこちらですねこんなふうに文字を入力するために下の方に今入力されてる文字の数字が出てきます昨日今回作っていきたいと思います今回作っていくファイルは三つになりますインデックスを呈してみるとメインですというものはスタイルですねと CSS とよみつのファイルを作ってありますそのファイルを JS という花ですねデスクトップに JS というディレクトリですね作ってあげてその中にプラクティス01という色名前を付けてます名前はなんでもいいです実際のための中身がこちらになります本当は愛と夢というエディターを使ってますよ実際の中身を見ていきましょうねしている CSS HTML CSS 部の方であった内容をそのまま使ってますまずはどくタイプの宣言ですねしてあげて名刺のタグで最後囲ってあげると8択ですねメタタグというもので文字コードというものを指定してあげてますタイトルタグですねリンクタグで CSS を今回作った CSS を読み込んでますそしてもう一つ Google フォントというものですねと Web フォントと呼ばれものですインターネット上からダウンロードして読み込んで使える6時の本当になります CS 7をやりましたねその後に BODY タグで実際に画面に表示するものですねその中身を変えて森田剛の中身がこっからここまでですねまずは減ったです阿部部活のロゴですねほらここの部分です後はメインのみのとこですねこれがこのなるというタグで囲まれたところ俺が減ったのですね上の所が減ったのよねあなたは下の子のホームのお店の人ですねそれが実際のリブで参り属するメインとしてたんですけどそこの部分コンタクトというタイトルがついてねそんな彼にホームとよく出かけています実際の入力のできるエリアの方はこのテキストエリアですね俺がこの内容を好む俺実際入力できるねこのテキストエリアに行く名前何でもいいんですけど今回カウントテキストという名前をつけてこの ID 属性を使って JavaScript の方でもこのテキストエリアをするという形ですねもう一つは女性のカウンターの部分です百聞の今0ですけど腕にかけてますね九文も実際入力したリアルタイムで入力タイミングによってカウントして表示してそれにさっき送ったんですけどいいですけどボディの自宅ですねを直前でこれが女の連帯ですねどうしたんですが グラセフの方でやった内容と同じになりますのでは説明省略しちゃいます実際にですねメイン JS と名前を付けました LINE . JS と JS ファイルですねこの中身を見ていきたいと思います今回ですね JavaScript の方でどういった処理をするかというとまず一つ目ですねか下のテキストでありましたここの部分ですねこれはまず入力があった日にその情報を取得する必要があります何文字入力したかという情報ですねなのでまずは時すでに入力があった場合ですねこのイベントを取得します入力のイベントですね入力があった場合にこのテキストエリアの文字数をしときますそして最後にトークした文字数これをここのカウンターのところですねここに表示させてあげるという形になります JavaScript で今回処理する内容ってなこの三つですねテキスト入力があった場合といったイベントを取ってあげてそのイベントの場合入力があった場合に適するの文字数というものを取得しますその文字数を取得したらそれをカウンターに表示させるこの三つですねそれやってるのが心になります今やってあげるのが前回もありましたね Windows イベントリスナーという形でイベントをセットしてあげますそんなイベントかというとイベントは第一キスでしてるんですねまず指定してあげてるのがどのコントロールとというものですブラウザでドームが読み込まれ終わったときねその時に第2引数で指定した距離俺を行うという形の描き方になります第三にはゴルフというものはこれを見たのですねお決まりという形で指定してありますかをつけなくても大丈夫ですこっちは問題ありません引数で指定してあげてるのは function という関数ですね距離の塊取りの塊を指定したりてますを渡してあげてるとですねヴェントリスなと言うか細かいところ後でまた説明しますけれどもまずはイベントあるイベントである処理をさせたいそういった場合には Windows イベントリスナを使ってあげて第一キスでイベント名ですね俺を否定したお決まりのイベントはいくつかありますクリックとか今回の場合はドームコントロールトヨタその時に第2引数で指定した処理を行うどんな処理をするかと言うとそれがこんなかですねここまでのが処理しているのはドキュメントもっと Get ELEMENT by ID 喜多方市で ID 属性 ID 属性の名前を指定してその道を戻ることができますこれも限界までやりましたねあり属性何してるしてるかと言うとカウントテキストという者ですごめん愛してるの方で変えたのですね指定した者です ID を連れて来たしてカウントテキストという名前今回つけたりてますのでこの名前でこのテキストで何度もトルコで常要素を取ることができて JavaScript Node ELEMENT と言ったがそれをですねスーパーカーで濃度という変数にしてあげてますがこの弟に変数の中に子供を入れてあげてるねその濃度ですねお願いしてまた後イベントリスナーというものを使ったりてますイベントをセットした人ですねこのノートにテキストですね月にイベントをセットしてセットしてあげてるかと言うといいアップイベントですよというのはキーボードの木 OK を押して話した時ですねあなたとした時その時のイベントということです一文字一文字ですねキーボードのキーを離した時その時になりにキスで指定した後の処理俺が行われるイベントイベントイベントありますので JavaScript イベント名とかってかとして調べてもらえればそういったイベントが他にあるのかというのが分かるとドレスにアップした時にどんなイベントどんな処理をするのかと言うとそれはこれですねヒストリアでキーボード入力して胃がアップした時その時に何を行うかとまず捨てるものを使ってますが自分自身という意味なんですけどちょっとややこしいんですけどイベントが発火しましたと実際ですねこのきりアップのイベントが行われた時イベントが発火したハッカといった言い方をするんですけどこの keymap イベントが行わた時ですね作家した時テキストエリアのイベントテキストエリアの駅アップのイベントが行われた時このときのこの中身のリストにはこのテキストレオニスになりますので this . Value とやるとそのテキストエリアテキストエリアの Value たいですねこれを取ることはできるんですねこのアップイベントリスナの中でリスを使った場合にはこのイベントが発火したドームですねこの度の地震を表すことになります今回の場合のイベントリスナーイベントを設定したのはセットしたのはこのノードテニスこの音編集には何が入ってるかと言うと顔とテキストカウントテキストという ID 属性をつけたのですねすなわちテキストエリアテキストと思いますのでそのディスというのは適正な実施になりますエクセルの Value ですねこれを取ってますさらにそのバリューのフレンズをやってとなんとかとなんとかという形でメソッドチェーンですねの形でつなげて書くことができますかできるのは JavaScript の結構特徴になります他のプログラム言語をいただき片思いですね的にする予定が何かと言うと例えばたいあいうえおと入力しましたが実際にはそれぞれアート入力した時いいと入力した時に良いお話してるのでその度にこの処理が中身が走ってる形になってますけどそのためにですね this . Value という形で値を取ってますなのであと26とまず上がって糸いい歳と今ですね俺が valu という形で文字列として取得することができますその文字列のレングス長さですねこれを今度取得してますあいうえおだったらいつですね午後にいたので号というものが返ってきます通知の方ですね数字ではなくて数値です咽頭型ですねそれ味方でいてその値を取って今度何をするかと言うとまたドキュメントとっとってってくれる人の体締める5ですね俺スタイルセレクターを使ってます今度紹介のとテキストやってまー CSS 同じような感じですねちょっとやると+属性はこれがシャープであれば ID 属性ですねフランスの曲で評判とテキストという名前これのドームを取得することですこれがこれですねこのカウントのとこですこっからここまでこの絵してみようということそれほど適当な名前をつけてそんな彼に入れてあげてますそれのものですね今度インナーテキストをやるとと望むの中身のテキストこれを変えることできます熱海のテキスト何かって言うと最初に入ってるの0ですねこの中身を文字を変えることできるね 文字にするとカウントとこの中には通知が入ってんでしたね5とか6とかそれ入れてあげてるってこと文字数がその中に入って表示されるという形エヴァ1が空いていればにが実際にこの中からですねをすることで後入力すればいいを離した時に火傷の処理で走っておの入力フォームの値ですねその後ストレングスですねモリスそれを取得します1ですそれを取得して今度ここの様子ですね5個の要素を取得してあげてこの位置ですねこの部分までを取得してあげて何を書きたい1というバイオ1という値で書き換えてあげるけどねそれを毎回毎回キーを離されるたびに行っているという形これがリアルタイムで文字数をカウントするやり方