我們可以先給定一個html

<p>Hello: Ben</p>

此時它長下面這樣

現在我們給他一點css 讓他好看一點

<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>

現在它長這樣

這時候我們加上一點js 讓他有點用處

const para = document.querySelector('btnp');
 
para.addEventListener('click', () => {
  location=replace('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
});

這時候會發現 這個元件它可以互動了

連結檔案

也可以透過在<script>標籤加入 src 屬性，連結至指定的檔案來嵌入 JS 程式碼至網頁裡。

<script src="example.js"></script>

注意：當使用了此種方式，<script>標籤內的任何文字將會失效。

這裡將會使用到console.log()
這是用來在主控台顯示文字用的函式

console.log("hello world");

在瀏覽器按下 F12可以進入開發者頁面
切換到 Console 分頁
可以看到 hello world 文字的顯示

彈窗提示：alert()

如果想要更直接的顯示訊息給使用者
可以使用alert()

alert("hello world");

彈窗輸入：prompt()

除了彈出視窗顯示訊息外
也可以讓使用者輸入文字給程式

prompt("type in something");

宣告變數：var

當一個程式在執行時，經常會需要記憶某些訊息（例如使用者輸入的文字），而此時變數就派上用場了。

透過var，可以宣告需要用到的變數。

範例：

var x = 10;
var y = 0.5;
var message = "Hi!";

條件判斷：if

當程式需要進行判斷時，就會使用到if語句。

if 的基本語法
在 js 中，if語句的語法：

if (條件式){ 陳述句; }
else if (條件式){ 陳述句; }
else { 陳述句; }

基本上該語法和其他語言大同小異：

條件式

A 條件運算子 B

常見的條件運算子有不外乎大於小於、等於等判斷
當條件成立時，該條件式為真（true）；
反之為假（false）。

補充： 全等 ===

js這個語言的型別相當的弱
他可以有

1+1=="2"

這種神奇的成立判斷

因此有一種條件運算子叫做全等於===

讓條件的左右需要包含型別完全相等才成真

1+1=="2" // false
1+1==2 // true

迴圈

迴圈是每個語言基本上都擁有的功能
能夠讓同一段指令在條件內重複執行
js 也不例外
而js中的迴圈和其他傳統語言也很近似

直接上例子

for (let i=0;i<10;i++) console.log('hello' + i);
 
var j=0;
while (j<10) console.log('hello' + j++);

函式

在一個程式中 切割成許多小功能
每個部分都只負責某個特定任務
這就是函式的作用
這部份和其他語言依然非常近似

function 函式名字(傳入參數1, 傳入參數1){
    要做的事
    return 結果
}
函式名字(傳入參數1, 傳入參數2)

DOM - Document Object Model

在原生js裡面 基本上是以這個方式與網頁互動
他可以以樹狀結構呈現一個HTML檔案裡tag的階層關係

選擇器

我們可以選定某個標籤種類或者class和id
接著對它上下其手

常見的選取方式有

• getElementsByTagName()
• getElementsByClassName()
• getElementById()
• querySelector()
• querySelectorAll()
• getElementsByName()

我個人喜歡直接使用querySelector()
不要用jquery
筆者

事件驅動

在某件事情發生的時候
觸發某個事件的程式設計法

例如
某個按鈕被按下去的瞬間
送給你一個rick roll的頁面

監聽事件

顧名思義 監聽某一個行為
在某個事件發生的時候做出相對應的事件驅動

上面幾種DOM的操作可以用一個簡單的例子舉例

用法如下

const btn = document.querySelector('#btn')
btn.addEventListener('chick' ()=>{
    location.replace('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
});

首先透過選擇器選中想要的元素
接著監聽"click"這個事件
當觸發時將頁面跳轉為Youtube影片