こんにちは、ススムです。
JavaScriptの入力フォーム・DOM操作とは何なのか？
そんな方向けの記事内容となります。
この記事を書いた人はこんな感じです。⇩
著者
- スポーツの専門学校卒業
- オーストラリアへ語学留学/スシレストランで就労
- JICA海外協力隊にてミャンマーで2年間生活
- Webデザイナー/動画クリエイター/Webエンジニア/Webライター
- オンラインスポーツコーチ
- オンライン日本語講師
- オンラインミャンマー語講師
- ミャンマー人向けオンラインコミュニティ運営
※この記事を書いている私について詳しくはこちらで紹介しています。
本記事の内容
・JavaScriptの入力フォームとは
・JavaScriptのDOM操作とは
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
JavaScriptの入力フォームについて
入力フォームを作成するにあたってHTMLでフォームを作成します。
name=”mail”の部分は、javascriptで値を取得するのに必要です。
仕組みとしてはHTMLで送信ボタンがクリックされると、javascriptの処理が始まります。
続いて送信ボタンのクリックイベントを作成します。
onClick()でユーザー操作を取得します。 check()の処理内容を書いていきます。
もし何も入力されていなかったらalertでエラー表記をしています。 mail_form.mail.valueでは、mail_formというフォームの中のmailという入力欄の値 (value)を取得しています。
イベントハンドラ
javascriptには、今回使用したonClick()以外にも様々なイベントハンドラあります。
・onClick..クリックした時に発動
・onDbClick..ダブルクリックした時に発動
・onChange..フォームの入力値や選択値を変更した時に発動
・onFucus..フォーカスが当たった時に発動
・onSelect..入力フォームの値をマウスドラッグなどで選択した時に発動
・onSelectStart..入力フォームの値をマウスドラッグなどで選択しようとした時 に発動
・onSubmit..submitボタンをクリックした時に発動 ・onReset..resetボタンをクリックした時に発動
JavaScriptのDOM操作とは
DOMとはHTMLなどのドキュメントにJavascriptからアクセスするための仕組みの事 で、HTMLにはツリー構造があり、パソコンのファイルを整理する「フォルダ構造」のよ うなものです。
DOMを用いてHTML要素を取得してみます。
p要素のid(test)をscript内で取得しました。 続いてHTML要素をjavascriptから書き換えるやり方を見てみます。 以前の記事でも紹介しましたが、innerHTML要素を使用します。
div要素を取得して、innerHTMLでh1要素を代入しました。 HTML要素をjavascriptから作成するやり方を見ていきましょう。
ここでは、document.createElement(HTML要素)を使用します。
h1要素を作成してtextContent()メソッドでテキストを追加しました。 body.appendChild(h1)でbody要素の中にh1要素を配置しました。
イベント処理
DOMによってオブジェクト化された後に処理を実行する方法としてonloadイベントを用います。
普通に書くとエラーになる可能性がありますが、onloadイベントをしようすれば正常に処理されます。
Web画面にHTML要素を出力するDOMレンダリングの効率化について紹介します。
ul要素を追加する事で、1回の処理で画面に出力します。
プログラミング学習ツール
https://prog-8.com/languages
https://dotinstall.com/
私は、エンジニアの学習にあたってこちらの資料を参考にしました。
http://www5e.biglobe.ne.jp/aji/3min
https://ping-t.com/
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
【IT・プログラミング関連記事】
また、何かあったら紹介したいと思います。
質問などがあれば気軽にコメント下さい。
仕事の依頼などがあればメールまたはSNSにてお問い合わせ下さい。
以上が今回のブログとなります。
読んで頂きありがとうございます。
また次回お会いしましょう。
※0円で受けれるプログラミング説明会
今話題のテックキャンプ。
実績、知名度ともに業界最大級の未経験を対象としたテクノロジースクールです。 受講期間中はいつでもメンター(講師)に質問ができ、目的達成のためにトレーナーが徹底的にサポートします。
【ミャンマー写真集】
【ミャンマー語学習教材３選】
※ミャンマー語のテスト問題集作成しました。詳しくはこちらから
※ミャンマースポーツコミュニティ⏩【Myanmar Sports/ISPE】
※ミャンマー✖️日本コミュニティー⏩【MyanJapa Life】
企業の方、プレスの方、個人の方など、仕事の依頼に関するお問い合わせは以下の
フォームからお気軽にご連絡下さい
コメント