網頁第三大核心技術 — Javascript

###### tags: `前端技能樹` # 網頁第三大核心技術 — Javascript ### What is Javascript？ JavaScript (簡稱JS)是一種直譯式(Interpreter)程式語言，程式碼會由上到下立即執行，**它與HTML、CSS並列網頁三大核心技術，HTML代表網頁的架構、CSS負責網頁的視覺外觀，而JavaScript則是用來控制網頁的各種互動與操作**，並且不只可以用於網頁，也可以用來開發後端伺服器上的應用程式。 ## 引入Javascript 跟CSS一樣，要使用Javascript就需要將程式碼連結套用到HTML上，總共會有三種方法：Internal JavaScript、External JavaScript和Inline JavaScript，其中External JavaScript 是最常見而且最適合的JS引入方法。 ### External JavaScript 使用 ```<script>``` 連結 JS 檔案，比起其他兩種方法較不會破壞 HTML 結構。 ```html <script type="text/javascript" src="檔名.js"></script> ``` ### < script >放哪裡？ Javascript 可以被放在 ```<head></head>``` 和 ```<body></body>``` 區塊中： - **放在 ```<body></body>``` 的最底下**：瀏覽器先載完網頁內容元件，才會執行 Javascript，如果程式碼中有需要取得網頁元素，就需要等待網頁內容元件加載完才讀取得到。 ```html= <body>  <script type="text/javascript" src="檔名.js"></script> </body> ``` - **放在 ```<head></head>``` 中**：瀏覽器先執行 Javascript 再往下讀取 ```<body>``` 的內容，通常會用在不需要等待網頁內容載完才運行的時候。 ```html= <head> <script type="text/javascript" src="檔名.js"></script> </head> ``` ## Javascript基本功能接著就讓我們開始來了解 Javascript 的語法和基本功能，除了簡單介紹觀念與用法之外，會搭配一些實作小範例，讓讀者更清楚如何撰寫Javascript。 ### 宣告變數你可以把變數當作是一個容器，可隨意儲存指定的值(資料)。指定值之前要先進行變數宣告來創立變數，會透過 ```var``` 或是 ```let``` 來進行宣告。另外還可以用 ```const``` 宣告一個只可讀取不能修改的常數。 ```javascript= let name = "May"; //let 用來宣告只作用在當前區塊的變數 var score = 80; //var 宣告的變數會是全域變數，或是作用在整個function const isPass = true; //const 宣告的常數不能修改值 ``` ### 資料型別 (Data types) 如果尚未指定數值給該變數，該變數的值會是 ```undefined```，你可以指定各種資料值給變數或常數，比如字串(String)、數字(Number)、布林值(Boolean) ...。 ```javascript= let value; //typeof value is undefined let name = "May"; let score = 80; let isPass = true; ``` ### 流程控制 — 條件陳述式條件陳述式讓我們指定要在哪些情況下分別執行不同的程式碼，在 JavaScript 中可以使用 ```if...else``` 和 ```switch``` 來進行條件執行。以 ```if...else``` 來說明，指定一個不是 ```true``` 就是 ```false``` 的條件給 ```if```，當邏輯判斷為真時執行```if```內的區塊，邏輯判斷為否則執行```else```內的區塊。 ```javascript= if(指定條件){ //當指定條件為true時執行 } else{ //當指定條件為false時執行 } ``` 而指定的邏輯條件，通常會透過運算子來輔助。運算子有算術運算子、比較運算子...等等，算數運算子包含加```+```、減```-```、乘```*```、除```/```，比較運算包含小於```<```、大於```>```、不等於```!==```、嚴格等於```===```，可以讓我們進行數值比較、運算、連接字符串等。 ```javascript= 'Bingo'+' says hello!' //'Bingo says hello!' 5 * 3 //15 10 < 6 //false 'Chris' === 'Ch' + 'ris' //true ``` ## 小結直接利用一個小範例來當作結尾，複習今天提到的一些觀念。現在我們想要判斷一個學生的成績是否及格，總共會需要姓名、成績、判斷結果三個資料，指定學生叫做May、成績為90分： ```javascript= let name; let score; let result; name = "May"; score = 90; ``` 利用 ```if...else``` 進行成績及格判斷，成績大於60分就是及格，反之則不及格，將結果儲存在 ```result``` 內： ```javascript= if(score >= 60){ result = "PASS" } else{ result = "FAIL" } ``` 印出判斷的結果，這樣就完成了今天的內容囉！ ```javascript= console.log(`${name}的成績結果是${result}`) //"May的成績結果是PASS" ``` 👉 如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️ ### 參考資料 - [MDN - Javascript](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.