参考にした動画
学んだこと
・関数 | MDN
・無名関数
・アロー関数
関数
・変数に代入できる。
・複数の処理をまとめて実行するためのブロック。
・関数は名前を持っていて、必要なときに呼び出すことや再利用ができる。
・関数を修正する必要がある場合、関数単位で変更を行うことができてメンテナンスし易い。
<html>
<body>
<button id="id-button">my button</button>
</body>
<script>
btn = document.getElementById("id-button")
btn.addEventListener("click",clickedButton)
function clickedButton(){
alert("clicked button")
}
</script>
</html>
ブラウザ
無名関数（名前の無い関数）
・無名関数は必要な箇所で直接定義するので、コードがコンパクトになり、コードの見通しがよくなる。
・変数に代入できる。
・無名関数はその場限りの使用が主な役割のため、他の場所で再利用することができない。
・無名関数に名前が無いので、エラーメッセージに具体的な情報が表示されないことがあり、デバッグやテストが困難になる場合がある。
<html>
<body>
<button id="id-button">my button</button>
</body>
<script>
btn = document.getElementById("id-button")
btn.addEventListener("click",function(){
alert("test")
})
//clickedButton関数は動かない
function clickedButton(){
alert("clicked button")
}
</script>
</html>
アロー関数
・関数のシンタックスシュガー（省略記法）である。
<html>
<body>
<button id="id-button">my button</button>
</body>
<script>
//リロードするとclickedbutton,testの順番でアラートが出力される。
clickedButtonHennsuu = () => alert("test")
function clickedButton(hensuu){
alert("clicked button")
hensuu()
}
clickedButton(clickedButtonHennsuu)
</script>
</html>
やりたいことメモ
リロードではなくてボタンをクリックしたらアラートを出す方法を知りたい