Day2 基本設定&插入JS程式碼

2024 iThome 鐵人賽

DAY 2

JavaScript

每天都進步一點！從零開始的JavaScript 與基礎網路知識學習系列第 2 篇

16th鐵人賽

karin0720

2024-09-02 21:55:10

110 瀏覽

分享至

晚上好，今天是Day2咳咳咳KKKarin。今天想先參考PAPAYA老師的JS基礎教學影片：
https://www.youtube.com/watch?v=0FLkwZ-PH2I&list=WL&t=910s
PAPAYA老師總是可以把看起來很困難的東西，用實際的案例還有很白話的說明去教，很喜歡看他的教學。
打算先從基本的語法大概掌握，腦中有個雛形後再去做更深入的學習。順便重拾一些對程式語言的記憶QQ

定義

HTML：定義網頁裡的內容，做出網頁的基礎架構。
CSS：排版美化，幫助在HTML內容上套用樣式。
JavaScript：是一種腳本語言，能在網站裡加入及時互動功能。

JavaScript的延伸用法：API(應用程式介面)
API是預先製作完成的程式模組，支援開發者實現困難或無法實現的功能。
API分兩類：

瀏覽器 API（Browser API）：內建於瀏覽器中，能夠依本地的電腦環境輸出資料或實現複雜的功能。

如 DOM （文件物件模型） API 讓你能操作 HTML 和 CSS，像是建立、移除或改變 HTML 元素，或動態地將新樣式套用到頁面等。每當你看到彈出視窗，或有新的內容出現在畫面上，那就是 DOM 在動作。
如 Geolocations（地理位置） API 可以取得位置資訊；Google Maps藉由這個API來取得我的位置並標示在地圖上。

第三方 API：預設不內建在瀏覽器裡，通常由網路上取得。

如 Google Maps API 能讓我在自己的網站中嵌入自訂的地圖或相關功能。(像是全家霜淇淋店鋪查詢？)

「執行環境 excution environments」

瀏覽器的每個分頁會有獨立的空間來執行程式碼。大部分情況下瀏覽器中每個分頁的程式碼是獨立運行的，不能直接影響其它分頁裡的程式或網頁。(算是一個瀏覽器的安全措施)

基本設定

<!DOCTYPE html> 
<html> 
<head> 

</head>
<body> 

</body>
</html>

說明

!DOCTYPE html ：宣告-告訴瀏覽器這是一個html的標準網頁
html /html ：一組html標籤，代表文件的開始
head ：紀錄網頁附屬資訊(如標題、內容)
body ：顯示網頁主要內容
!--這是註解方式--

練習執行看看

<!DOCTYPE html> 
<html> 
<head> 
    <title> 網頁標題 </title>
</head>
<body> 
    <h3> 段落標題 </h3> 
    <p> 內文 </p> 
</body>
</html>

說明

h3 ：第三個層級的標題
p ：文字段落

<!DOCTYPE html>
<html> 
<head> 
    <title> 網頁標題 </title>
</head>
<body>
    <h3> 段落標題 </h3>
    <p> 內文 </p>
    <script>alert("Hello");</script>
</body>
</html>

插入Javascript程式碼

方法一：將JS程式碼直接插入在網頁底部

<!DOCTYPE html>
<html> 
<head> 
    <title> 網頁標題 </title>
</head>
<body>
    <h3> 段落標題 </h3>
    <p> 內文 </p>
    <script>alert("Hello");</script>
</body>
</html>

說明

script ：將JS程式碼插入在網頁底部(body的最下面)
alert ：彈出提示框

方法二：將JS程式碼放在另一個獨立檔案

<!DOCTYPE html>
<html> 
<head> 
    <title> 網頁標題 </title>
</head>
<body>
    <h3> 段落標題 </h3>
    <p> 內文 </p>
    <script src="script.js"></script>
</body>
</html>