跳至主要内容

Frontend 1(Web架構 跟基本前端)

信息

原始 MD by 孟憲

今晚我想來點​

「Web Intro&前端微入門」​

Jimmy​

謝孟憲_aka麵線aka總務組aka系統組​

From 四電子二Ａ​

前後端？？

好吃ㄇ？​

前端(Frontend)​

眼睛所看到的網頁內容

＊前端三巨頭​

後端(Backend)​

提供/儲存前端網頁資料（資料庫處理）

  • 應用程式介面(API)--Google API. Restful API
  • 資料庫(DataBase)--Mysql
  • 伺服器(Server)

Let's talk about "Frontend"

HTML​

HTML是HyperText Marked Languageㄉ縮寫​

定義網頁的內容

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

span{
  color:red;
}

選擇器{
    屬性:屬性值;
}

JavaScript(JS)​

JavaScript是一種腳本​

也可說是程式語言​

透過JS讓使用者與網頁可以互動 

let a = document.querySelector('.num1');
let num = parseInt(a.textContent);

function AddNum(){
  a.textContent = num++;  
}

誒～JS可以讓user跟網頁互動？

認真講起來，JS並沒有提供一個所謂的「網頁操作方法」
這個操作方法主要是「瀏覽器」(JSㄉ執行平台)提供給JS的

瀏覽器上面的JS實際上包含了​

  • JS核心
  • BOM
  • DOM
    前端開發者透過JS呼叫BOM&DOM提供的API ，控制瀏覽器的行為與網頁的內容

BOM(Browser Object Model)​

瀏覽器物件模型​

它是瀏覽器所有功能的核心，與網頁內容無關 ，主要核心為window物件

瀏覽器的window物件扮演著兩種角色：

  • ECMAScript 標準裡的「全域物件」(Global Object)
  • JavaScript 用來與瀏覽器溝通的窗口

Set global variables

var apple = "iphone",
console.log(window.apple); //印出iphone到console

Communication with browser

window.alert("Hi, apple");//跳出視窗訊息
window.confirm("要不要");//跳出選項視窗訊息
window.prompt("輸入一些東東");//跳出輸入文字視窗訊息
window.history.back();//＝點瀏覽器ㄉ上一頁

除了這些API以外，想知道更多就點這個

DOM(Document Object Model)​

文件物件模型​

將HTML文件以樹狀結構來表示的模型，所組合起來的樹狀圖，我們稱之為「DOM Tree」

當網頁被載入時，瀏覽器會先解析HTML檔案並轉換成"DOM"

<html>
  <head>
    <title>一個簡單的網頁</title>
  </head>

  <body>
    <h1>這是標題</h1>
    <p>這是一個<i>簡單</i>的網頁</p>
  </body>

</html>

*BOM跟DOM是瀏覽器的執行環境所提供的，也就是說​

它們不會 存在於"node"環境中​

那接下來我們就來講一下個別的語法ㄅ~

首先先註冊一下這個​

再來點開這個​

好，接下來我要來講一點比較複雜的​

東東囉​

點開這個

不知道各位吸收到了多少呢？​

好那我們今天社課就到...​

誒等等！！！​

我們還有一件事情要做^^

Vue Installion--​

Vue Introduce​

  • 漸進式框架 根據需要選擇必要的框架來使用

直接引入​

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

這是例子

透過指令安裝​

npm(Node Package Manager) & yarn both are JS package manager 透過它們可以下載各種JS套件來用
基本上，現在yarn基本可以取代掉npm(就功能來說)

Check npm status.

npm -v

If not install npm(Powered by Nodejs).
Linux

sudo apt-get update
sudo apt install nodejs

macOS

brew install node

Windows[Download Link]

Check node/npm Ver.

node -v
npm -v

Check yarn version

yarn --version

If not installed yarn
Install by npm.

npm install --global yarn

好那我們再來就是要安裝vueㄌ

npm

npm i -g @vue/cli

yarn

yarn global add @vue/cli
vue -V

** -V or --version都可以

最後的最後，讓各位玩個遊戲ㄅ​

今天的社課真的到這邊ㄌ​

BYE~~​

但是如果你想知道更多info，可以點這ㄍ​