課程目標

學會定義函數的基本方法

學會呼叫函數的基本方法

學會 onclick 事件的用法

課程內容

請打開這個網站,用這個網站來練習&寫作業:

https://jsfiddle.net

在學 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 屬性,弄得漂亮一點,漂亮的按鈕,會讓客戶更想點

做出這兩個按鈕,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!

按讚的人:

共有 73 則留言

交作業~拋磚引玉😆 https://jsfiddle.net/j80d9gao/17/

按讚的人:

很好!作業順利完成!

感謝帶頭交作業!後續課程也要完成、交作業喔!👍

其它補充:

為簡單起見,本課程以 ES5 語法示範

像你的作業,用 ES6 宣告函式,實務上,通常是用 const 來宣告

因為這兩個函式不太需要動態修改,用 const 可以減少意外修改到而出錯的機率

不過,程式短短的,就沒差,不太會有問題。程式很多行的時候,凡是 let 宣告的,都有可能手誤改到

交作業~ https://jsfiddle.net/birdie2019/8he51za7/66/

按讚的人:

很好!作業順利完成!

樣式也弄得很漂亮!繼續保持!後續課程也要交作業喔!👍

作業繳交 https://jsfiddle.net/yjr0otca/1/

按讚的人:

很好!動畫效果也做得很好!作業順利完成!

我來交作業囉~ 大家跟上!一起進步! https://jsfiddle.net/fy2snqkL/45/

按讚的人:

https://jsfiddle.net/yennefer/hg58q6by/5/ 感謝無私提供教學

@HankSong 很好!順利完成!

@yen 差一點,因為按鈕上的文字,作業要求是中文字

謝謝HankSong讓我學到cursor 屬性

交作業 https://jsfiddle.net/evon0306/dp6f84sa/17/

按讚的人:

差一點,「我要訂購」的按鈕,按下要跳出來歡迎訊息,不是工廠訊息

已更正,非常謝謝你

按讚的人:

很好!作業順利完成!

https://jsfiddle.net/3kqfxt9d/40/ 交作業:)

按讚的人:

@陳婷 很好!順利完成!

交作業!感謝大大的分享!https://jsfiddle.net/jared0921/3a7kc0mw/6/

按讚的人:

交作業魯~^@^~ https://jsfiddle.net/ossianwork/eyzm7Ld3/56/

按讚的人:

通過!樣式很漂亮!

繳交第一課作業~ https://jsfiddle.net/igorrrrr/sbvh0ut9/76/

按讚的人:

酷耶 分享個東西 我在jquery實戰手冊上看到 說是結構跟行為沒有分離 分離行為與結構:UJS非侵入式

第六頁:1.1.1分離結構與行為。
第十七頁1.4摘要:jquery套用了UJS的概念。

關於HTML與JS混雜這件事

剛好之前有筆記到 貼過來~ 不知道版主大大有沒有知道類似的概念 或是說有沒有相關經驗跟看法~分享一下 我自己是覺得其實這樣子寫很方便XD 很聰明XD

按讚的人:

很好的問題 結構與行為是否需要分離,取決於應用程式的複雜程度 小型應用程式,寫完即可,不用管這麼多最佳實踐 大型應用程式,實務上,因為正式開發會用 React 或 Vue html 跟 js 是不會混雜在一起的


以上簡單回答。 更完整、進階的討論,可在討論區丟一篇獨立貼文發問,讓大家一起參與討論 我也可以在那邊,給出更深入的回答

按讚的人:

作業繳交: https://jsfiddle.net/TobeyLiu/uogtdm6j/12/

謝謝您

按讚的人:

寫得很好,順利完成!

按讚的人:

有點晚才發現版大的學習課程,繳交第1課作業,陸續跟上大家腳步。 複習了一些CSS屬性,非常感謝!! https://jsfiddle.net/kazekaze/tzv8c19j/34/

按讚的人:

寫得很好,順利通過!繼續保持!

謝謝大大的無私分享! 作業繳交: https://jsfiddle.net/o1faktph/

按讚的人:

寫得很好,順利通過!繼續保持!

交作業 :D https://jsfiddle.net/j437437/5cqjt0Ly/151/

按讚的人:

寫得很好,順利通過!繼續保持!

繳交作業 感謝 https://jsfiddle.net/vcd0ak9o/4/

按讚的人:

寫得很好,順利通過!繼續保持!

交作業! 謝謝分享超讚的 https://jsfiddle.net/81ue_lan/pd2nt4af/8/

按讚的人:

寫得很好,順利通過!繼續保持!

交作業! https://jsfiddle.net/Hoce1029/tqzd8fg3/39/

按讚的人:

寫得很好,順利通過!繼續保持!

https://jsfiddle.net/johnny890118/69qrnxL1/58/ 終於到javascript了,好開心,交作業囉,麻煩站長檢查。

按讚的人:

寫得很好,順利通過!

https://jsfiddle.net/elmon/u7gvz5py/

再麻煩站長了 謝謝

按讚的人:

寫得很好,順利完成!

交作業 https://jsfiddle.net/tp655998/La704qzd/

按讚的人:

交作業,再麻煩站長了!謝謝! https://clothes-form.glitch.me

按讚的人:

https://jsfiddle.net/tsaii/p0rax1ve/25/ 交作業,終於進入js了@@

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/kg8mvh1s/44/

繳作業^^~~~~

按讚的人:

寫得很好,順利完成!

按讚的人:

https://jsfiddle.net/s1k6z280/57/ 練習作業!

按讚的人:

寫得很好,順利完成!

交作業~(´∀`) https://jsfiddle.net/ZooeyLai/owe1msk6/5/

按讚的人:

寫得很好,順利完成!

繳交作業 嗯吶~ https://jsfiddle.net/t90920012/tuLkqacj/1/

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/dfg312546/ct9ep654/9/ 交,純給自己紀錄,站長不用麻煩回

按讚的人:

https://jsfiddle.net/wimp9487/c2eoundr/41/ 交作業

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/bwj34r92/

按讚的人:

作業繳交 https://jsfiddle.net/mb2902911/06wkj73q/68/

按讚的人:

https://jsfiddle.net/B__rain/pzta6sbm/12/ 繳交作業

按讚的人:

交作業~ https://jsfiddle.net/000dd/75mech84/14/

按讚的人:

交作業 https://jsfiddle.net/CryptoMars/gke5s3mj/21/

按讚的人:

繳交作業! https://jsfiddle.net/kulimusoda/mk2ptwc5/26/

按讚的人:

交作業~ https://jsfiddle.net/NewYorkAllen/dnp5vzoa/46/

按讚的人:

交作業了~ https://jsfiddle.net/z978gwk0/5/

按讚的人:

交作業:https://jsfiddle.net/fxq0L4tn/3/

按讚的人:

作業! https://jsfiddle.net/IreneQiu/68d2L9sc/47/

按讚的人:

https://jsfiddle.net/Fanny60714/9xd3c8jk/22/

按讚的人:

2024.02.06 繳作業 https://jsfiddle.net/fuabs30L/


自己在vscode分開檔案寫,常常忘記要連結外部JS檔案🫠

按讚的人:

作業紀錄 https://jsfiddle.net/skrbomb/6oy5ec2q/

按讚的人:

done~ https://jsfiddle.net/Ls0nye8o/4/

按讚的人:

作業紀錄! https://jsfiddle.net/tzuuu/q7b5nr8o/1/

按讚的人: