iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

程式設計師大冒險系列 第 35

[35/150]Day05牽起HTML和JavaScript 中間的紅線

  • 分享至 

  • xImage
  •  

連結JavaScript是為了和使用者作互動,在這個分頁可以寫很多函式。如果Css是化妝師,美化Html外表;那麼JavaScript就是操偶師,控制著Html的一舉一動。

大綱

  • 學習內容
    • 連結JavaScript
    • 善用網頁工具
  • 輸出結果
  • 學習心得

學習內容

連結JavaScript

Yes
不想看影片的話,下面有懶人包。

<!Doctype>
<html>
	<head>
        <!--這是用來連結Css-->
		<link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
	</body>
    <!--這是用來連結JavaScript-->
	<script src="js/main.js"></script>
</html>

另外同層資料夾要新增下列二個資料夾
https://ithelp.ithome.com.tw/upload/images/20181104/20091910u5bv9ARCem.jpg
裡面各要新增一個text文檔。
然後Css資料夾,裡面的text文檔連同副檔名改名為style.css。
會跳出警告,但是不要怕點確定就對了。

js資料夾,則是改名成main.js。
同樣會跳警告,一樣按確定。

善用網頁工具

HTML CheatSheet
這個工具熟了,應該很好用。
先設計樣式,再檢視程式碼。

輸出結果

https://ithelp.ithome.com.tw/upload/images/20181104/20091910o5r5GHw0Bw.jpg
新增:按鈕連結網址
修改:按鈕樣式
修改:thinnk錯字

學習心得

每天貼網頁程式碼文章會變得太過冗長,所以改成下週起每週日貼程式碼,
除非有重大改版才會多貼一次。

JavaScript看網頁範例有些吃力,目前先專心於CSS樣式。
網頁是拿來求職用,所以風格以炫技為主,將學會的技巧都塞進去。

截至發文,瀏覽數486,訂閱9。
很感謝各位願意花時間,看新手轉職的文章。


上一篇
[34/150]Day04牽起HTML和CSS中間的紅線
下一篇
[36/150]Day06第六週計畫檢討
系列文
程式設計師大冒險115
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言