JavaScriptちゃんと学習中。
今回はイベントを使ってフォームの入力内容を取得とDateオブジェクトについてです。
ほぼ自分の勉強メモです。
過度な期待はしないでください。
フォームの入力内容を読み取り出力する
- 先ずは、HTMLでフォーム部分の作成
<form action="#" id="form">
<input type="text" name="word">
<input type="submit" value="検索">
</form>
<p id="result"></p>
- action属性は、データを送信する先のURLを指定するものだが、何処にも送信しない場合は、URLの代わりに「#」を指定する（「#」はページの最上部を指す）
-
<p id="output"></p>は、入力内容を読み取ったものを出力する場所 - name属性の値は、入力されたデータがサーバーに送信される時に、そのデータにつく「名前」となる。フォーム部分にname属性の名前が付いていないと、受信したサーバー側のプログラムで処理されない。
- 続いて、name属性を使って送信ボタンがクリックされたら入力内容を読み取るプログラムを作成
'use strict';
document.getElementById('form').onsubmit = function(event) {
event.preventDefault();
const search = document.getElementById('form').word.value;
document.getElementById('result').textContent = `取得結果：「${search}」`;
};
-ここで先ず重要なのが、preventDefault( )
preventDefault( ) は、ブラウザが最初から持っているアクションをキャンセルするメソッドになる
つまり、ここでこれがないと、送信ボタンがクリックされたらデータを送ると同時に、action属性で指定した
ページに遷移してしまう為、取得結果が表示されない。
なので、preventDefault( )を使って、データが送信される、次のページに遷移するという
フォームの基本動作自体をキャンセルさせる。
-書き方について
関数の引数にeventと追記、イベント内の関数の第一引数に自動でイベントオブジェクトが渡される。
イベントオブジェクトには、イベントの発生元の要素や押されたキーの情報などが入っている。
ここで取得したイベントオブジェクトに対して、event.preventDefault( )を使用することで
要素のイベントをキャンセルすることが出来る。
-入力内容を読み取る部分、document.getElementById('form').word.valueについて
書き方は、取得した要素.読み取りたいフォーム部分のname属性.valueとなる。
要素の取得は、今迄使用して来たgetElementByIdメソッドを使用して取得する。
そして、今回読み取りたいname属性は、<input type="text" name="word">のwordを指定する。
これでテキストフィールドの取得が出来たので、次にそこに入力された内容を調べる為にvalueプロパティを使用する。
valueプロパティには、フォーム部分に入力された内容が保存されている。
これで、フォームの入力内容を読み取り出力させる事が出来る。
こんな感じで。
Dateオブジェクト
- Dateオブジェクトとは
日時をを扱う為のオブジェクトで、現在の日時を取得する事が出来る。
コード例がこちら。
<p>最終アクセス日時：<span id="time"></span></p>
'use strict';
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const date = now.getDate();
const hour = now.getHours();
const min = now.getMinutes();
const output = `${year}/${month + 1}/${date} ${hour}:${min}`;
document.getElementById('time').textContent = output;
-Dateオブジェクトを使いたい時、先ず最初にインスタンスの生成する必要がある。そのコードがnew Date();
newはオブジェクトをインスタンスの生成の為のキーワードで、これをつける事でオブジェクトはインスタンス出来る。
インスタンスについてはこちらを参照
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
これで、Dateオブジェクトを使い日時の出力や計算が出来るようになる。そして、その計算の基準日と
なっているのが現在日時です。なので現在の日時を記憶したDateオブジェクトを使い日時の出力や計算が出来るようになる。
-続いて、現在の日時を記憶したDateオブジェクトから年月日を取得する為のメソッドが、
getFullYear( )、getMonth( )、getDate( )、getHour( )、getMinutes( )
| メソッド | 説明 |
|---|---|
| getFullYear( ) | 年を取得する |
| getMonth( ) | 月を０〜１１の数値で取得する（なので０が1月になる） |
| getDate( ) | 日を取得する |
| getHour( ) | 時を取得する |
| getMinutes( ) | 分を取得する |
その他にも、
| メソッド | 説明 |
|---|---|
| getSeconds( ) | 秒を取得する |
| getDay( ) | 曜日を０〜６の数値で取得する（なので０が日曜日になる） |
| getTimezoneOffset( ) | 時差を取得する |
などがある。
そして注意しなければいけないのは、getMonth( )メソッド。
このメソッドを使うと「実際に月-１」の数字が取得される。つまり、1月なら「０」、2月なら「１」、12月なら「１１」
といった具合に取得されるので、所得出来た数字に１を足す必要がある。
${month + 1}という書き方になる。
後は、それぞれ定数に代入し、getElementByIdメソッドとtextContentプロパティを使い
取得した要素のコンテンツを書き換えれば完了。
こんな感じで出力される。
過去投稿記事
【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~Mathオブジェクト~】勉強メモ12