課程目標
學會定義函數的基本方法
學會呼叫函數的基本方法
學會 onclick 事件的用法
課程內容
請打開這個網站，用這個網站來練習＆寫作業：
在學 html/css 時，我們會給元素一些屬性，例如 id 與 class 屬性，連結的 href 屬性，圖片的 src 屬性
同樣的語法，還可以用來做一些互動式效果、功能
例如，可以這樣在按鈕上做出「點擊後」觸發的效果
<button onclick="myFunction()">Click me</button>onclick 我們叫「事件屬性」。也是屬性的一種，語法跟一般屬性相同
屬性內容是去執行 myFunction，後面的小括號 () 代表執行的意思
這邊的 myFunction 是所謂的「函數」。名稱是隨便命名的。根據互動的內容，取一個自己看得懂的名稱就行了
小括號裡面可以傳參數，這邊我們沒用到參數，所以直接小括號包起來 () 就可以
如何定義 myFunction 函數的內容呢？這樣即可
function myFunction()
{
alert('你點擊了按鈕！');
alert('這是很好的開始！');
}這個函數中，使用了 JavaScript 在瀏覽器中內建的 alert 函數。這函數會根據參數，跳出小視窗，把參數顯示在畫面上
在 JavaScript 中，一段動作的結尾都會加上分號 ; 用來代表這段結束
分號其實可以省略不寫，程式一樣會正常執行，但加上分號，看起來更清楚一點點
有點像寫文章時結尾的「句點」，有人習慣寫，有人經常不寫，但加了比較清楚
請在 jsfiddle 試試看上面的範例，把按鈕寫在 html 區塊，把函數定義寫在 JavaScript 區塊，實驗一下、玩玩看！
課後作業
假設你家裡是開成衣批發工廠的，你用 html/css 寫了一個工廠的介紹網頁
在「線上下單」頁面，你希望引導客戶聯絡你，你親口介紹、聊過才報價、提高成交率
你不想把商品報價、聯絡方式直接顯示在畫面上，你希望是點擊按鈕之後，才顯示聯絡資訊
這次作業，需要你實作這個功能。
請使用 jsfiddle，做一個「我要訂購」按鈕
點擊這個按鈕，會跳出 alert 訊息顯示「謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！」
接著做一個「認識工廠」按鈕
點擊這個按鈕，會跳出 alert 訊息顯示「我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！」
請稍微替這兩個按鈕加一點 css 屬性，弄得漂亮一點，漂亮的按鈕，會讓客戶更想點
做出這兩個按鈕，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
很好！作業順利完成！
感謝帶頭交作業！後續課程也要完成、交作業喔！👍
其它補充：
為簡單起見，本課程以 ES5 語法示範
像你的作業，用 ES6 宣告函式，實務上，通常是用 const 來宣告
因為這兩個函式不太需要動態修改，用 const 可以減少意外修改到而出錯的機率
不過，程式短短的，就沒差，不太會有問題。程式很多行的時候，凡是 let 宣告的，都有可能手誤改到
我來交作業囉～
大家跟上！一起進步！
https://jsfiddle.net/fy2snqkL/45/
謝謝HankSong讓我學到cursor 屬性
交作業！感謝大大的分享！https://jsfiddle.net/jared0921/3a7kc0mw/6/
酷耶 分享個東西 我在jquery實戰手冊上看到 說是結構跟行為沒有分離
分離行為與結構:UJS非侵入式
第六頁：1.1.1分離結構與行為。
第十七頁1.4摘要：jquery套用了UJS的概念。剛好之前有筆記到 貼過來~
不知道版主大大有沒有知道類似的概念 或是說有沒有相關經驗跟看法~分享一下
我自己是覺得其實這樣子寫很方便XD 很聰明XD
很好的問題
結構與行為是否需要分離，取決於應用程式的複雜程度
小型應用程式，寫完即可，不用管這麼多最佳實踐
大型應用程式，實務上，因為正式開發會用 React 或 Vue
html 跟 js 是不會混雜在一起的
以上簡單回答。
更完整、進階的討論，可在討論區丟一篇獨立貼文發問，讓大家一起參與討論
我也可以在那邊，給出更深入的回答
有點晚才發現版大的學習課程，繳交第1課作業，陸續跟上大家腳步。
複習了一些CSS屬性，非常感謝!!
https://jsfiddle.net/kazekaze/tzv8c19j/34/
謝謝大大的無私分享!
作業繳交：
https://jsfiddle.net/o1faktph/
繳交作業 感謝
https://jsfiddle.net/vcd0ak9o/4/
交作業! 謝謝分享超讚的
https://jsfiddle.net/81ue_lan/pd2nt4af/8/
https://jsfiddle.net/johnny890118/69qrnxL1/58/
終於到javascript了，好開心，交作業囉，麻煩站長檢查。
https://jsfiddle.net/elmon/u7gvz5py/
再麻煩站長了 謝謝
https://jsfiddle.net/tsaii/p0rax1ve/25/
交作業，終於進入js了＠＠
https://jsfiddle.net/kg8mvh1s/44/
繳作業^^~~~~
交作業~拋磚引玉😆
https://jsfiddle.net/j80d9gao/17/