iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

JS進入新手村,我好害怕系列 第 7

Day7:終於要進去新手村了-Javascript-新手開始

  • 分享至 

  • xImage
  •  

終於寫到JS的部分了,我自己其實也是沒有很懂,所以就記錄在這裡當作是一種學習方式。

我們在使用網頁的時候,會有三個使用者上面會注意到的部分,分別是架構,樣式,以及功能特效等等,用人來比喻的話就是骨骼、樣貌、以及動作之類的三種。
HTML就像是網頁的骨骼,是網頁基本架構的部分,而CSS則是網頁外貌,就是所看到的有設計或是美化的部分,那JS所代表的就是功能了,也就是使用者在網路上操作方面或是一些動畫呈現的部分都可以使用JS完成。

好啦,以上簡介都是湊字數的(大誤),其實是我自己對於這三種網頁上所需要的語言的認知,所以如果有不正確的地方也歡迎指正,下方就來簡單介紹一下如何開始寫。

跟CSS一樣,可以直接在html內寫JS,也可以寫成獨立檔案之後,再由html這裡引入JS檔案使用:

<!doctype html>
<html>

<head>
<script>
    alert('Hello world!'); 
</script>
</head>

<body>
網頁內容
</body>
</html>

上面的程式碼是採用直接寫在HTML的方式,在script標籤內,,但是一般來說都是會使用引入檔案的方式來撰寫網站,一來是可以把不同邏輯的JS檔案分開放置,也可以比較好閱讀網頁的程式碼,方式如下:

<!doctype html>
<html>

<head>
<script src="位置/檔名.js"></script>
</head>

<body>
網頁內容
</body>
</html>

在Html4的時候,在位置前需要加上type="text/javascript"

 <script type="text/javascript" src=""位置/檔名.js"</script>
 

但是在HTML5以後,預設的樣式語言是使用CSS,script預設則是使用JS,所以type部分可寫可不寫。

參考來源:
https://www.fooish.com/javascript/basics.html
https://blog.csdn.net/a4171175/article/details/86437231


上一篇
Day6:進入新手村前先讓我複習一下QQ-CSS-flexbox-用在內容物(item)的屬性
下一篇
Day8:終於要進去新手村了-Javascript-資料型態
系列文
JS進入新手村,我好害怕30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言