---
# System prepended metadata

title: Javascript基本簡介

---

# Js 基本介紹
###### tags: `NKFW 網頁設計入門`

---

## 基本介紹:
Javascript 是用來建立互動式網頁的程式語言，而程式語言就是可以進行運算。簡單來說就是讓網站可以有特效、效果和使用者互動，比如像網頁按鈕點擊、圖片移動等等。

---

而在剛開始要先建立一個html檔案，需用`<script>`來包起來，如下圖
```html1=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>dd</p>
    <script>
        //程式寫在這//
    </script>
</body>
</html>
```

---

:::info
Javascript也能夠獨立於一份檔案中，方便管理，類似於CSS。
:::

---

## 輸出到螢幕上

使用alert會跳出一個視窗，會顯示你輸入的內容，範例如下：

```xml!
<script>
    alert("ddd");
</script>
```

---

結果如下

![](https://i.imgur.com/E5KwErx.png)

---

## 輸出到控制台

使用console.log則會把內容輸出到控制台，範例如下

```xml!
<script>
    console.log("Hello world");
</script>
```

運行程式之後，可以按F12打開開發人員選項，找到console或是控制台，會出現：

![](https://i.imgur.com/MNE5Jwr.png)

---
## 直接輸出到網頁上
使用document.write可以直接輸出到網頁上

```xml!
<script>
    document.write("Hello world");
</script>
```

## 讀取資訊

使用prompt會在畫面跳出視窗，讓使用者輸入文字，範例如下：

```javascript!
name = prompt("Please enter your name:");
console.log(name);
```

---

## 確認事項

confirm會在畫面跳出視窗，並給予使用者「確認」及「取消」兩個選項，範例如下：

```javascript!
name = prompt("Please enter your name:");
confirm("Is your name " + name);
```

---

## 註解格式

當你要為你寫的程式碼寫上一些註解的時候，可以使用

* 單行註解
* 多行註解

註解中的程式或文字不會被執行，範例如下

```xml!
<script>
    // 內文
</script>
```

```xml!
<script>
    /*
       內文
     */
</script>
```










