---
title: Javascript基本教學
tags: web, Tutorial
slideOptions:
transition: slide
---
# 透過Javascript讓網頁有互動性
---
# Javascript
---
## 認識Javascript
JavaScript
通常縮寫為JS
被世界上的絕大多數網站所使用
也被現代的網頁瀏覽器所支援
Javasciprt是一種腳本語言
沒錯 他是程式語言
他可以讓你的網頁呈現許多複雜的功能
大部份網頁的動態功能都需要透過js來完成
---
## JS怎麼用
網頁三個基本元素包含html、css、js
----
我們可以先給定一個html
```htmlmixed=
<p>Hello: Ben</p>
```
此時它長下面這樣
:::info
<p>Hello: Ben</p>
:::
----
現在我們給他一點css 讓他好看一點
```htmlmixed=
<style>
.p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor:pointer;
}</style>
<p class="p">Hello: Ben</p>
```
現在它長這樣
<style>
.p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor:pointer;
} </style>
:::info
<p class="p">Hello: Ben</p>
:::
----
這時候我們加上一點js 讓他有點用處
```javascript=
const para = document.querySelector('btnp');
para.addEventListener('click', () => {
location=replace('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
});
```
:::warning
[<p class="p">Hello: Ben</p>](https://www.youtube.com/watch?v=dQw4w9WgXcQ'>)
:::
這時候會發現 這個元件它可以互動了
---
## 如何套用JS
我們主要透過在 HTML 檔案裡面，加入\<script>標籤來執行 JS。
而\<script>標籤又可以分為直接使用，和連結檔案兩種方式。
---
#### 直接使用
直接使用即是在\<script>標籤內寫入 JS 程式碼，如下面範例：
```htmlmixed=
<script>
(JS程式碼)
</script>
```
----
#### 連結檔案
也可以透過在\<script>標籤加入 src 屬性，連結至指定的檔案來嵌入 JS 程式碼至網頁裡。
```htmlmixed=
<script src="example.js"></script>
```
> 注意：當使用了此種方式，\<script>標籤內的任何文字將會失效。
---
## JS語法
---
### 控制台紀錄: console.log("")
老Hello World寶了
約定俗成的 學習每個程式語言第一件事
就是嘗試印出HelloWorld
----
這裡將會使用到`console.log()`
這是用來在主控台顯示文字用的函式
```javascript=
console.log("hello world");
```
在瀏覽器按下 F12可以進入開發者頁面
切換到 Console 分頁
可以看到 hello world 文字的顯示
----
### 彈窗提示：alert()
如果想要更直接的顯示訊息給使用者
可以使用`alert()`
```javascript=
alert("hello world");
```
----
### 彈窗輸入：prompt()
除了彈出視窗顯示訊息外
也可以讓使用者輸入文字給程式
```javascript=
prompt("type in something");
```
----
### 宣告變數：var
當一個程式在執行時，經常會需要記憶某些訊息（例如使用者輸入的文字），而此時變數就派上用場了。
透過var，可以宣告需要用到的變數。
範例：
```javascript=
var x = 10;
var y = 0.5;
var message = "Hi!";
```
----
### 條件判斷：if
當程式需要進行判斷時，就會使用到if語句。
if 的基本語法
在 js 中，if語句的語法：
```javascript=
if (條件式){ 陳述句; }
else if (條件式){ 陳述句; }
else { 陳述句; }
```
基本上該語法和其他語言大同小異：
----
### 條件式
```javascript=
A 條件運算子 B
```
常見的條件運算子有不外乎大於小於、等於等判斷
當條件成立時，該條件式為真（true）；
反之為假（false）。
----
### 補充： 全等 ===
js這個語言的型別相當的弱
他可以有
```javascript=
1+1=="2"
```
這種神奇的成立判斷
----
因此有一種條件運算子叫做全等於`===`
讓條件的左右需要包含型別完全相等才成真
```javascript=
1+1=="2" // false
1+1==2 // true
```
----
### 迴圈
迴圈是每個語言基本上都擁有的功能
能夠讓同一段指令在條件內重複執行
js 也不例外
而js中的迴圈和其他傳統語言也很近似
直接上例子
```javascript=
for (let i=0;i<10;i++) console.log('hello' + i);
var j=0;
while (j<10) console.log('hello' + j++);
```
----
### 函式
在一個程式中 切割成許多小功能
每個部分都只負責某個特定任務
這就是函式的作用
這部份和其他語言依然非常近似
```javascript=
function 函式名字(傳入參數1, 傳入參數1){
要做的事
return 結果
}
函式名字(傳入參數1, 傳入參數2)
```
---
### DOM
接下來就是一個js特有且很重要的功能了
----
#### DOM - **D**ocument **O**bject **M**odel
在原生js裡面 基本上是以這個方式與網頁互動
他可以以樹狀結構呈現一個HTML檔案裡tag的階層關係
----
### 選擇器
我們可以選定某個標籤種類或者class和id
接著對它上下其手
----
常見的選取方式有
- getElementsByTagName()
- getElementsByClassName()
- getElementById()
- querySelector()
- querySelectorAll()
- getElementsByName()
> 我個人喜歡直接使用querySelector()
> ~~不要用jquery~~
> [name=筆者]
----
### 事件驅動
在某件事情發生的時候
觸發某個事件的程式設計法
例如
某個按鈕被按下去的瞬間
送給你一個rick roll的頁面
----
### 監聽事件
顧名思義 監聽某一個行為
在某個事件發生的時候做出相對應的事件驅動
----
上面幾種DOM的操作可以用一個簡單的例子舉例
用法如下
```javascript=
const btn = document.querySelector('#btn')
btn.addEventListener('chick' ()=>{
location.replace('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
});
```
----
首先透過選擇器選中想要的元素
接著監聽"click"這個事件
當觸發時將頁面跳轉為Youtube影片
---
Google Drive
Gist
Clipboard
Sign in with Wallet
