# 透過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影片 ---