前後端？？ - HackMD

## 今晚我想來點 ## 「Web Intro&前端微入門」 ###### Jimmy --- ![](https://i.imgur.com/hDoiNbV.jpg =241x331) ### 謝孟憲_aka麵線aka總務組aka系統組 #### From 四電子二Ａ --- # 前後端？？ ### 好吃ㄇ？ --- ## 前端(Frontend) 眼睛所看到的網頁內容 ---- ## ＊前端三巨頭 ![](https://i.imgur.com/eESHQqC.png =1024x526) --- ## 後端(Backend) 提供/儲存前端網頁資料（資料庫處理） ---- * 應用程式介面(API)--Google API. Restful API  * 資料庫(DataBase)--Mysql * 伺服器(Server) --- ![](https://i.imgur.com/yV51XLT.jpg) --- # Let's talk about "Frontend" --- ## HTML ---- ### HTML是HyperText Marked Languageㄉ縮寫定義網頁的內容 ```htmlembedded= <!DOCTYPE html> <div> <button onclick="AddNum()">ADD</button> <h1>Num = <span id=num class=num1>0</span> </h1> </div> ``` --- ## CSS ---- ### CSS是Cascading Style Sheetsㄉ縮寫為HTML的元素套用樣式(style)，ex:color ```css= span{ color:red; } 選擇器{ 屬性:屬性值; } ``` --- ## JavaScript(JS) ---- ### JavaScript是一種腳本 ### 也可說是程式語言透過JS讓使用者與網頁可以互動 ```javascript= let a = document.querySelector('.num1'); let num = parseInt(a.textContent); function AddNum(){ a.textContent = num++; } ``` --- 誒～JS可以讓user跟網頁互動？ ---- 認真講起來，JS並沒有提供一個所謂的「網頁操作方法」<br> 這個操作方法主要是「瀏覽器」(JSㄉ執行平台)提供給JS的 ---- ### 瀏覽器上面的JS實際上包含了 * JS核心 * BOM * DOM<br> 前端開發者透過JS呼叫BOM&DOM提供的API ，控制瀏覽器的行為與網頁的內容 ---- ![](https://i.imgur.com/pCbxVDN.png) --- ## BOM(Browser Object Model) ## 瀏覽器物件模型它是瀏覽器所有功能的核心，與網頁內容無關，主要核心為window物件 ---- 瀏覽器的window物件扮演著兩種角色： * ECMAScript 標準裡的「全域物件」(Global Object) * JavaScript 用來與瀏覽器溝通的窗口 ---- Set global variables ```javascript= var apple = "iphone", console.log(window.apple); //印出iphone到console ``` ---- Communication with browser ```javascript= window.alert("Hi, apple");//跳出視窗訊息 window.confirm("要不要");//跳出選項視窗訊息 window.prompt("輸入一些東東");//跳出輸入文字視窗訊息 window.history.back();//＝點瀏覽器ㄉ上一頁 ``` 除了這些API以外，想知道更多就點[這個](https://developer.mozilla.org/zh-CN/docs/Web/API/Window) --- ## DOM(Document Object Model) ## 文件物件模型將HTML文件以**樹狀**結構來表示的模型，所組合起來的樹狀圖，我們稱之為「DOM Tree」 ---- 當網頁被載入時，瀏覽器會先解析HTML檔案並轉換成"DOM" ---- ```htmlmixed= <html> <head> <title>一個簡單的網頁</title> </head> <body> <h1>這是標題</h1> <p>這是一個<i>簡單</i>的網頁</p> </body> </html> ``` ---- ![](https://i.imgur.com/AGVfLXG.png) ---- ### *BOM跟DOM是瀏覽器的執行環境所提供的，也就是說 ### 它們*不會* 存在於"node"環境中 --- 那接下來我們就來講一下個別的語法ㄅ~ ---- ### 首先先註冊一下[這個](https://codepen.io/) ---- ### 再來點開[這個](https://codepen.io/kzjnqteu/pen/KKvjVXB) --- ### 好，接下來我要來講一點比較複雜的 ### 東東囉點開[這個](https://hackmd.io/@JimmyHsieh-0129/BJzkFNbtK#HTML) --- ## 不知道各位吸收到了多少呢？ --- ## 好那我們今天社課就到... ## 誒等等！！！我們還有一件事情要做^^ ---- ## Vue Installion-- ---- ### Vue Introduce * 漸進式框架根據需要選擇必要的框架來使用 ---- #### 直接引入 ```htmlmixed= <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> ``` [這是例子](https://codepen.io/kzjnqteu/pen/YzrPpvw) ---- #### 透過指令安裝 ---- **npm**(Node Package Manager) & **yarn** both are **JS package manager** 透過它們可以下載各種JS套件來用<br> 基本上，現在yarn基本可以取代掉npm(就功能來說) ---- Check npm status. ```shell= npm -v ``` **If not install npm(Powered by Nodejs).**<br> Linux ```shell= sudo apt-get update sudo apt install nodejs ``` macOS ```shell= brew install node ``` [Windows](https://nodejs.org/zh-tw/download/)[Download Link] ---- Check node/npm Ver. ```shell= node -v npm -v ``` ---- Check yarn version ```shell= yarn --version ``` If not installed yarn<br> *Install by npm.* ```shell= npm install --global yarn ``` ---- 好那我們再來就是要安裝vueㄌ ---- npm ```shell= npm i -g @vue/cli ``` yarn ```shell= yarn global add @vue/cli vue -V ``` ** -V or --version都可以 --- ## 最後的最後，讓各位玩個[遊戲](https://hexschool.github.io/flexbox-pirate/index.html#/)ㄅ --- ## 今天的社課真的到這邊ㄌ ### BYE~~ #### 但是如果你想知道更多info，可以[點這ㄍ](https://hackmd.io/NAfxH-SpRe2UC5vNgVCopg?view)