JavaScriptで画面上の表示を変える方法

はじめに

今回はJavaScriptで画面上の表示を変える方法についてアウトプットしてみようと思います！

script要素とは、実行できるコードを埋め込んだり参照したりするため、に称されるHTMLです！

一般的には、JavaScriptのコードの埋め込みや参照に使用されます！

JavaScriptは「何かが起きたらコードを実行する」という概念に基づいて設計されています！

ブラウザ上で、何かが起きたらに応じて動くよおうに記述します！

この何かが起きたらは、イベントを呼ばれています！

JavaScriptにおけるイベントとは、HTMLに対して行われた処理の要求のことを言います！

例えば、ユーザーがブラウザ上のボタンをクリックしたなどがあります！

また、イベントを認識してJavaScriptのコード、特に関数が動き出すことをイベント発火と言います！

代表的なイベントは以下のようなものです！

addEventListenerとは、イベント発火の際に実行する関数を定義するためのメソッドです！

以下のように記述します！

要素.addEventListener('イベント名', 関数)

インラインスタイルとは、HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法です！

setAttributeを用いることで、指定した要素上に新しい属性をついた、または既存の属性の値を変更します！

要素.setAttribute(name, value)

removeAttributeを用いることで、指定した要素から、特定の属性を削除します！

要素.removeAttribute(name, value)

関数の中でthisを使うと、イベント発火元となった要素を取得することができます！

要素上の指定した属性の値を戻り値として返します！

要素.getAttribute('属性名')

debuggerを用いることで、ソースコードに処理を一旦停止させる場所を指名することができます！

指定したブレークポイントまで処理が進むことで、処理を一時的に停止することができます！

幅広いデバックが可能になります！

innerHTMLを使用すると、HTML要素の取得や書き換えを行うことができます！