HTMLにおける大切なプログラミング知識2選。

2024年2月27日 19:12

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

診断結果を表示する部分の HTML を準備する。

前回までで作った HTML には入力を受け取る部分はありますが、表示をする部分がないので、まずはそれを作っていきましょう。
診断結果を表示する部分を作っていきす。
診断結果ボタンなど、何もない場所に、プログラムから利用できるエリアを確保するためには、div タグを利用します。

div タグ

div （ディブ）タグの div とは Division（ディビジョン）の略称で、分割されたものという意味です。
このタグは他のタグとは異なり、囲んでも多くの場合は何も起こりません。また、意味も「分割されている」「囲まれている」程度しか持ちません。
しかし JavaScript でプログラムとタグを関連付けたり CSS で装飾したりしたいときに便利なため、この div タグは非常によく使われるタグです。

ボタンをクリックしたときの動作を作成する。

次は、ボタンをクリックしたときの動作を追加していきましょう。

まず、名前の入力欄、診断するボタン、結果表示エリアなどの UI 部品を JavaScript から使えるように準備しておきます。
assessment.js に以下のコードを追加してください。

'use strict';
+
const userNameInput = document.getElementById('user-name');
+
const assessmentButton = document.getElementById('assessment');
+
const resultDivision = document.getElementById('result-area');
+
const tweetDivision = document.getElementById('tweet-area');
+

const answers = [

'###userName###のいいところは声です。###userName###の特徴的な声は皆を惹きつけ、心に残ります。',
assessment.jsPlease Type!
次は、ボタンを押したときに、なんらかの処理が動くようにしていきます。
assessment.js にボタンを押したときの処理を追加します。

const resultDivision = document.getElementById('result-area');

const tweetDivision = document.getElementById('tweet-area');

+
assessmentButton.addEventListener(
+
'click',
+
function () {
+
console.log('ボタンが押されました');
+

+
// TODO 診断結果表示エリアの作成
+
// TODO ツイートエリアの作成
+
}
+
);
+

const answers = [

'###userName###のいいところは声です。###userName###の特徴的な声は皆を惹きつけ、心に残ります。',

入力ができたら、Chrome のデベロッパーコンソールを開いて、ボタンを押してみましょう。

結果、ログに

ボタンが押されましたと表示されれば成功です。

まとめ

今回はdivタグやボタンをクリックした時の動作を追加するHTMLについて解説していきました。
HTMLだけでもこれだけの要素やタグがあるので覚えるのが大変な部分もありますが、一つ一つの意味をしっかり理解できるようにしていきたいです。