iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
2
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 27

第二十七步 - 第三層挑戰 (Javascript 基本程式規則)

  • 分享至 

  • xImage
  •  

大家好,我是喵橘,終於到了 JavaScript的章節,我先說一些簡單的程式設計規則,因為最近身體狀況不好,回去鄉下調養身體,因為是程式,先是先不要寫太多,讓大家可以先一個初步了解。

JavaScript 基本語法

我了解大家都很討厭寫程式,但沒辦法在前端的世界中,還是會碰到寫程式的工作,但我會用簡單清楚的方式讓大家可以輕鬆學習。第一步,先了解怎麼在網頁裡使用 JavaScript 的功能吧!

撰寫的方法分為三種:

  1. <body> 標籤內
  2. <head> 標籤內
  3. 外部連結方法

內部連結

<script type="text/javascript">
    程式碼撰寫
</script>

外部連結

<script type="text/javascript" src="檔案路徑">
</script>

與世界打聲招呼

第一個程式碼就是與世界打聲招呼吧,這是在學習程式都會寫這一句話。

widow.alert('Hello World !!');


範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190928/20117282gNDd2gnCql.png

陳述句(英文:statement)規則

  1. 程式撰寫的時候是有大小寫的分別,這一點是相當嚴格。
  2. 不要一行中擠多個陳述句,會造成閱讀困難。
  3. 撰寫程式碼要養成縮排的習慣,之後才能有效率的進行維護。
  4. 每一個陳述句結尾要以分號結束。
  5. 當陳述句太長可以換行或縮排,都是能合法執行。

如何插入註解?

總共可以分為3種註解方法:

  1. // 單行註解
  2. /* 多行註解 */
  3. /* * 文件註解 */

良心建議:寫每一個程式都寫一下註解,程式的簡單描述,之後才能了解這程式的功用,才能好好維護。

明天預告


今天是講解 Javascript基礎部分,明天講解 Javascript變數語常數部分,非常感謝大家閱讀。


上一篇
第二十六步 - 最後破關的條件(CSS總整理)
下一篇
第二十八步 - 宣告第三關破解方法(JavaScript 變數)
系列文
一步一腳印,探索網頁前端設計之美33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
ccutmis
iT邦高手 2 級 ‧ 2019-09-28 20:26:32

講到javascript學習或開發 會用GoogleChrome的F12(開發者工具)比較好喔
https://sweeteason.pixnet.net/blog/post/43525600-chrome-%E9%96%8B%E7%99%BC%E4%BA%BA%E5%93%A1%E5%B7%A5%E5%85%B7-%28devtools-%29%EF%BC%8C%E5%B9%BE%E5%80%8B%E7%B0%A1%E5%96%AE%E5%A5%BD%E7%94%A8

像 window.alert('hello world!');
比較建議改成
console.log('hello world!');
在程式除錯上比會更好,也不用為了確認某些js變數要一直跳alert視窗。

小小建議提供您參考,祝早日恢復健康喔!

喵橘 iT邦新手 4 級 ‧ 2019-09-28 20:41:11 檢舉

感謝ccutmis您詳細的回答,對我有相當大的幫助,我會好好的調養身體。

ccutmis iT邦高手 2 級 ‧ 2019-09-28 20:51:34 檢舉

/images/emoticon/emoticon12.gif

我要留言

立即登入留言