# 網頁前端教學 week2 ### JavaScript基本教學 --- ## 網站的基本架構 一個網站是由HTML、CSS與JavaScript組成的 ![](https://i.imgur.com/dns6kTP.png) ---- HTML：負責提供網頁的基本架構 CSS：網頁的排版及美化 JavaScript：為你的網頁提供功能 ---- ### 網頁的前端與後端 前端(顯示頁面、丟資料) > 後端(拿資料然後處理，把資料丟給資料庫或是給前端回應) > 資料庫(儲存資料) 例子(登入註冊系統): 註冊： 使用者輸入帳號密碼，寄給後端，拿這筆資料跟資料庫裡的使用者訊息比對 如果正確，則給使用者一個用來辨別使用者資訊的token，然後顯示登入成功的訊息 ---- ![](https://i.imgur.com/BTQ4pWa.jpg) --- ## 什麼是JavaScript?他跟Java有關係嗎? JavaScript(簡稱JS)是是一門基於原型、函式先行的語言，它支援物件導向編程及函式語言程式設計。它提供語法來操控文字、陣列、日期以及正規表示式等。它已經由ECMA（歐洲電腦製造商協會）透過ECMAScript實作語言的標準化。它被世界上的絕大多數網站所使用，也被主流瀏覽器（Chrome、IE、Firefox、Safari、Opera）支援。 ---- ### JavaScript與Java基本上沒什麼關係 他們之間的關係就像是熱狗跟狗 ~~(反正都是狗)~~ ~~或是桐人跟梅普露~~ 雖然如此，JavaScript的語法與C++及Java十分相像。 這是為了確保能在學習JavaScript的時候不需要學習太多新概念。 --- ## 在html中引入JS `<script>`可以放在`<html>`裡的任何地方 ### 內部使用 ``` <body> <script> console.log('Hello World!') </script> </body> ``` ### 外部引入 ``` <head> <title>測試</title> <script src='main.js'></script> //外部引入建議放在<head>裡 </head> ``` --- ## 基本語法 ### 變數 var 變數 可以被更改 const 常數 不可被更改 ---- ### 函數 #### 函數宣告式 ``` function test(){ 定義test console.log('star'); } ``` #### 具名函數 ``` var burst = function test(){ //將test傳入burst console.log('stream'); } burst(); ``` ---- #### 匿名函數 ``` function stay(callback){ //定義stay const input ='cool' callback(input); } stay(function(input){ //呼叫stay並傳入匿名函數 console.log(input); }) 匿名函數通常用會用在回傳(callback)函數中 ``` ---- ### 陣列及物件 ``` //定義一個空陣列 var player =[]; player[0] = 'kirito';//桐人 player[1] = 'asuna';//亞絲娜 console.log(player); //[kirito,asuna] //定義一個空物件 var SAO ={}; //定義一個物件 var SAO={ world:'Aincard', player:['kirito','asuna'], boss:{ floor1:'Illfang the Kobold Lord',//狗頭人之王 floor74:'The Gleam Eyes'//閃耀魔眼 } } console.log(SAO.boss.floor1);//Illfang the Kobold Lord ``` --- ### DOM 文件物件模型（Document Object Model) DOM是HTML、XML 和 SVG 文件的程式介面。它提供了一種結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。 ---- #### 盒子，盒子，與更多盒子 ``` <div class="mydiv"> <div class="title">My Title</div> <div class="content"> <p id="starburst"> My Starburst!</p> </div> </div> ``` ![](https://i.imgur.com/WiM2hqc.png) ---- ![](https://i.imgur.com/3ZrCXCu.gif) --- ### 在網頁中使用JavaScript操作DOM JavaScript是利用事件監聽來為網頁中的元素附加功能 所以如果要讓元素做事，我們就必須為這些元素做事件註冊 ---- 在行內 ``` <button onclick="alert(HI!)">click me</button> ``` ---- #### 利用id document.getElementById(id); ``` <body> <h3>按按鈕來使出星爆氣流斬</h3> <button id=starburst>按我來星爆</button> <script> const btn=document.getElementById('starburst'); btn.onclick=function(){//為btn的onclick事件註冊 console.log('哈哈騙你的啦，是垂直四方斬') } </script> </body> ``` ---- #### 利用class document.getElementsByClassName(class); ``` <body> <h3>星爆模擬器</h3> <button class=starburst>用我來星爆</button> <button class=starburst>用我來星爆</button> <button class=starburst>用我來星爆</button> <button class=starburst>用我來星爆</button> <script> //取得class叫starburst的元素，獲取的是一個陣列 const btn=document.getElementsByClassName('starburst'); var combo=0;//連擊數 for(var i=0;i<btn.length;i++){ btn[i].onclick=function(){ console.log('星爆氣流斬!!!'); combo+=16; console.log('你對閃耀魔眼共造成了'+combo+'連擊'); } } </script> </body> ``` --- ## 是不是超級麻煩? ---- ### 在此為你獻上及函式庫(Library) ---- ### 函式庫 #### 什麼是函式庫 Javascript 函式庫(JS Library) 指的是使用 JS 撰寫，具有特定目的，如簡化 JS 物件使用、操作 DOM 物件、繪圖功能的一些函式集合， JS 本來只能跑在瀏覽器前端，後來因為以 Google V8 Javascript 引擎開發的 Node.js 而成為也能跑在伺服器後端的一套超級腳本語言，學習 Javascript 函式庫能幫助我們寫更少的代碼而能做更多的功能 ---- #### 函示庫可以幹什麼 以大家最常用的JQuery來舉例 這個 ``` <script> //取得class叫starburst的元素，獲取的是一個陣列 const btn=document.getElementsByClassName('starburst'); for(var i=0;i<btn.length;i++){ btn[i].onclick=function(){ console.log('yes') } } </script> ``` ---- 可以改成這樣 ``` <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $('.starburst').click(function(){ console.log('yes') }); </script> ``` ---- ![](https://i.imgur.com/jdrOQA6.png) ---- 函式庫可以做很多事情，從像JQuery幫你簡化操作DOM，到幫你做好一些常用的界面，甚至是讓你可以輕易地在網頁上做出一些圖形 ---- ### 資源 事件列表 https://blog.xuite.net/tony835245/wretch/180962346-JavaScript+%E4%BA%8B%E4%BB%B6%E5%88%97%E8%A1%A8 JQuery https://jquery.com/ React.js 另一種現在很流行的JS函式庫 https://zh-hant.reactjs.org/ Vue.js 前端框架 https://vuejs.org/ 讓你做一些很酷的動畫的函式庫 https://animejs.com/