【Webデザイン勉強7日目】〜Part2〜

はいどうも！

今日も作業を行いました！

今日は、JavaScriptの勉強をしました！

ずっと気になっていたけど手を出せていなかったJavaScript！

動きが出せると楽しいですね〜♪

今日はhtmlファイルにstyleとscriptを記述して一つのファイルでできる指示を行いました！

四角を作成し、クリックすると丸にする記述です。

【コード】

【クリック前】

【クリック後】

.boxで四角を表示させて、クリックした後の表示を.circleで記述しています。

transition = 秒数

transform = 回転の角度

JavaScriptはbodyタグの一番下に記述するのが一般的ということでした！

最初は記述になれないかもしれないですが、何度か書いていれば慣れそうです。

const target = document.getElementById('target');

　conts＝定数であり、置換の意味です。　この記述だと【document.getElementById('target')】　＝　target　と置換できるので、記述のミスや追加・編集に強くなるという特性があります。

以下の　target　＝　代入されています。

target.addEventListener('click') , () => {

    target.classList.toggle('circle');

}); 

↑id名のtargetをクリックしたときに、class名＝circleの指示を出すという意味です。

つまり、styleに記述したcircleの指示（円にして360度回転する）が実行されるという意味です。

今日は、ここまで！