# 一顆按鈕的故事 - 01
:::success
:beginner: **有一顆按鈕，你按按他，他會跟你說你好。**
:::

💬 首先我們先長出一顆按鈕

//這段是HTML，不是javascript，不用學。

<div id="qqid" class="qqclass">
    我是一顆小按鈕
</div>

---

💬 開始寫javascript吧

//我想要點了按鈕之後跳出一個你好的訊息。
//最直接的寫法
document.querySelector('.qqclass').addEventListener('click', function() {
    alert('你好');
},false);

💬 看不懂欸…拆解一下這段程式…

document
querySelector('.qqclass')
addEventListener('click', function(){},false)
alert('你好')

`doucment`
>HTML的最外層

`querySelector()`
>用來選擇HTML裡面的元素
>('.qqclass')或是('#qqid')或是('div')都能選到我們那顆小按鈕。
>特別注意，如果你有兩個一模一樣的按鈕，那麼querySelector()只能選到第一個喔。

`addEventListener()`
>用來判斷我們對網頁做了甚麼事情，觸發後再執行我們想要增加的東西。
>addEventListener('click',function(){
>
>},false);
>
>click = 點擊滑鼠左鍵
>function(){} = 點了滑鼠後想要增加甚麼東西就寫在這裡面
>false = 事件冒泡的時候執行這整段程式
>true = 事件捕獲的時候執行這段程式

`alert('你好')`
>跳出一個你好的訊息。
>把這句放在上面的addEventListener(‘click’,function(){ `這裡` },false);

💬 把它們組裝回去

document
querySelector('.qqclass')
addEventListener('click', function(){},false)
alert('你好')


//先透過"."來把每一個需求連在一起。
//所以我們把第一行用.來跟第二行連在一起，接著一樣用.把第三行連在一起。
document.querySelector('.qqclass').addEventListener('click', function(){},false)


//最後把第四行放進第三行的{}裡面。
document.querySelector('.qqclass').addEventListener('click', function(){alert('你好')},false)


//幫他斷行一下
document.querySelector('.qqclass').addEventListener('click', function() {
    alert('你好')
},false)


//這整段程式做了兩件事情
//1. 按了一下按鈕
//2. 跳出你好的訊息
//每件事情結尾記得都要用";"來做結束。
document.querySelector('.qqclass').addEventListener('click', function() {
    alert('你好');
},false);

---

💬 接著我們要把這段javascript改成大家比較喜歡的寫法

function qq(){
    alert('你好');
}
document.querySelector('.qqclass').addEventListener('click', qq, false);

//仔細看第一行跟第四行都有一段qq。
//試著把前三行剪下，放到第四行的qq後面，然後把qq都刪掉！
//你會發現跟我們一開始寫的長得一樣囉～

//這種寫法就是先把alert('你好')寫好，然後把他丟到滑鼠點一下的事件裡面觸發效果。
//qq則是我們自己隨便取的名字，用來把這兩件事情綁在一起。

💬 或是你也可以改成這樣

const qq = function(){
    alert('你好');
}
document.querySelector('.qqclass').addEventListener('click', qq, false);

💬 或是更懶一點…

const qq = () => {
    alert('你好');
}
document.querySelector('.qqclass').addEventListener('click', qq, false);

💬 懶還要更懶…

const qq = () => alert('你好');
document.querySelector('.qqclass').addEventListener('click', qq, false);

:::info
以上這五種寫法都可以，初學者可以先從第一種直線思考邏輯來編寫，寫完之後再把他改造成第二種或第四種，至於到底要用哪種可以依照你們團隊的習慣做調整。
:::

:::warning
:information_source: 上面有一些奇怪的名詞，甚麼事件冒泡、事件捕獲、const是殺小…？下次再告訴你！
:::