JavaScript(クリックしたら動く)
ブラウザを動かすことができるJavaScriptを勉強します。
HTMLやCSSで作られたものを動かします。
・四角をクリックしたら、回転したら丸になる。
いってみましょう。
HTMLとCSS記入
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>四角と丸</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
boxというクラスを作り、サイズと色をつけて、後で動きをつけていくので、「cursor: pointer;」としておきます。
クリックしたら背景が変わるようにしたい
・スクリプトタグをbodyの一番下に作る。
・「'use strict';」でブラウザが間違いをチェックしてくれる。
・JavaScriptから要素を指定する際に利用する、idをつける。
・この中⬇️にクリックされた動作を書く。
document.getElementById('target').addEventListener('click',() =>{
ここ
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>四角と丸</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="target"></div>
<script>
'use strict';
document.getElementById('target').addEventListener('click',() =>{
document.getElementById('target').style.background = 'pink';
});
</script>
</body>
</html>
「EventListener」は何かが起きると何かをするというときに使う。
() => {} :アロー関数
document.getElementById('target').style.background = 'pink';
document.getElementById('target').style.borderRadius= '50%';
・background = 'pink'; で背景色がピンクに変わる。
・borderRadius= '50%' で円になる。(追加)
クリックした後の動作をCSSに移動させる
headのstyleタグの中に追加
.maru{
background-color: pink;
border-radius: 50%;
}
<script>
'use strict';
document.getElementById('target').addEventListener('click',() =>{
document.getElementById('target').classList.add('maru')
});
</script>
先程の動作が同じになることを確認する。
アニメーションを追加する
・transition: 0.9s;
アニメーションにかける時間をboxプロパティに追加
・transform: rotate(360deg);
回転をmaruプロパティに追加
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>四角と丸</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
cursor: pointer;
transition: 0.9s;
}
.maru{
background-color: pink;
border-radius: 50%;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box" id="target"></div>
<script>
'use strict';
document.getElementById('target').addEventListener('click',() =>{
document.getElementById('target').classList.add('maru')
});
</script>
</body>
</html>
もう一度クリックしたら元に戻したい。
add⇨toggleに変更
document.getElementById('target').classList.toggle('maru')
定数にする
document.getElementById('target') を定数にする。
const target = document.getElementById('target');
target.addEventListener('click',() =>{
target.classList.toggle('maru')
});
動きが同じになるか、念の為に確認しておきます。
今の段階でこうなっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>四角と丸</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
cursor: pointer;
transition: 0.9s;
}
.maru{
background-color: pink;
border-radius: 50%;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box" id="target"></div>
<script>
'use strict';
const target = document.getElementById('target');
target.addEventListener('click',() =>{
target.classList.toggle('maru')
});
</script>
</body>
</html>
きょうは、ここまで!
なにとぞ なにとぞー