網頁設計大禮包

Outline

Sublime Text 4 / Sublime Merge
HTML
Javascript
React
Express
Material-UI

Why so important

最簡單的方法做出「有介面」的程式
每種裝置都可以使用
適合部建服務

Sublime Text 4

https://www.sublimetext.com/

優點

輕量
多功
客製化

縮排控制

上色語言

CTRL+F	搜尋
CTRL+H	取代
CTRL+Shift+P	開啟指令介面
Esc	離開目前功能
CTRL+Click	multiple selection

插件們

material theme

工具們

build system

snippet

terminus

build system

Tools > Build System > New Build System

snippets

Tools > Developer > New Snippet

material theme

CTRL+Shift+P >

Package Control: Install Package > material theme

Sublime Mege

https://www.sublimemerge.com/

mighty git tool

優點

美觀
視覺化
簡單直白
操作方便
與Sublime Text並用

HTML

HyperText Markup Language

超文字

標記

語言

標記語言
非程式語言
宣告物件排版
最容易做成介面的方法

基本語法

<TAGNAME>EXAMPLE</TAGNAME>

<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph</p>
  </body>
</html>

基本語法

<TAGNAME>

<img src="https://user-images.githubusercontent.com/30186107/29488525-f55a69d0-84da-11e7-8a39-5476f663b5eb.png" />
<input />
<br />
<a href="https://www.w3schools.com/html/default.asp" />
<link />
<meta />

All Tags

<!DOCTYPE>
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<h4>heading4</h4>
<h5>heading5</h5>
<h6>heading6</h6>
<p>paragraph</p>

<!DOCTYPE>
<h1 style="color: red;">heading1</h1>
<h2 style="color: orange;">heading2</h2>
<h3 style="color: yellow;">heading3</h3>
<h4 style="color: green;">heading4</h4>
<h5 style="color: blue;">heading5</h5>
<h6 style="color: purple;">heading6</h6>
<p style="color: #808080;">paragraph</p>

基本語法

<TAGNAME ATTRIBUTE="VALUE"></TAGNAME>

<!DOCTYPE>
<h1 style="color: red;text-align: center;border-style: solid;">heading1</h1>
<h2 style="color: orange;text-align: center;border-style: solid;">heading2</h2>
<h3 style="color: yellow;text-align: center;border-style: solid;">heading3</h3>
<h4 style="color: green;text-align: center;border-style: solid;">heading4</h4>
<h5 style="color: blue;text-align: center;border-style: solid;">heading5</h5>
<h6 style="color: purple;text-align: center;border-style: solid;">heading6</h6>
<p style="color: gray;text-align: center;border-style: solid;">paragraph</p>

<!DOCTYPE>
<style>
  .text{
    text-align: center;
    border-style: solid;
  }
  .round{
    border-radius: 100px;
  }
</style>
<h1 class="text round" style="color: red;">heading1</h1>
<h2 class="text" style="color: orange;">heading2</h2>
<h3 class="text round" style="color: yellow;">heading3</h3>
<h4 class="text" style="color: green;">heading4</h4>
<h5 class="text round" style="color: blue;">heading5</h5>
<h6 class="text" style="color: purple;">heading6</h6>
<p class="text round" style="color: gray;">paragraph</p>

最熟悉的工具—Chrome

F12

Cascading Style Sheets

CSS

設定每個元素、類別的style
將style與html分離
類似「呈現與內容分離」的理念
讓排版變漂亮

selector 語法

/* select by element name */
h1 {font-weight: 1000;}
/* select by class */
.center {text-align: center;}
/* select by id */
#box {background-color: red;}
/* select all */
* {font-family: 'Noto Sans TC';}

border

margin

padding

display

position

JavaScript

讓物件動起來
邏輯處理
是程式語言

基本語法跟C++很像

宣告變數用 \(\texttt{const}\) / \(\texttt{let}\)
弱型別
\(\texttt{String}\)
\(\texttt{Number}\)
\(\texttt{Array}\)
\(\texttt{Object}\)

```
print用console.log
```
```
任何東西都是Object
```
```
函式宣告用function NAME(ARGS){}
```

簡化版function宣告（類似lambda function）
```
const func = in => out;
```
```
const square = x => x * x;
```

Arrow function

const func = (a, b, c) => {
  a += b;
  return a + c;
}

function func(a, b, c){
  a += b;
  return a + c;
}

HTML DOM

更改HTML網頁的內容
處理網頁發生事件

document.getElementById

document.getElementsByTag

document.getElementsByClassName

<h1 id="test">Testing Page</h1>
<script>
let ele = document.getElementById('test');
ele.innerHTML = `
  <span style="color: red">
    RED TEXT
  </span>
`;
</script>

<button onclick="add()">Add</button>
<ol id="list"></ol>
<script>
function add(){
  const ele = document.getElementById('list');
  ele.innerHTML += `<li>item</li>`;
}


</script>

<button id="add">Add</button>
<ol id="list"></ol>
<script>
function add(){
  const ele = document.getElementById('list');
  ele.innerHTML += `<li>item</li>`;
}
document.getElementById('add')
  .addEventListener('click', add);
</script>

React

設計網頁時建議選擇一種

framework / library下手

結構明確
物件導向
開發方便
額外工具

JS library
single-page application
「非常」方便的開發工具
OOP (components)
用狀態（states）控制元素
提供JSX語法擴充
邏輯和呈現綁在一起

React

Install node.js https://nodejs.org/en/download/
```
npx create-react-app my-app
```
```
cd my-app
```
```
npm start
```
可以看到預設的react頁面

Get Started

檔案架構

node_modules/	套件安裝的目的（不會動到）
public/	meta data（不會動到）
src/	網頁主體
package.json	管理套件的檔案

src/App.js

一個js檔就是一個component
一個component是一個function
JSX：把html元素寫在js裡

function App() {
  return (
    <>
      <h1>My First Heading</h1>
      <p>My first paragraph</p>
    </>
  );
}

export default App;

嵌入變數

function App() {
  const name = 'INFOR';
  return (
    <>
      <h1>Hello {name}</h1>
    </>
  );
}

export default App;

變數也可以是元素

function App() {
  const greeting = <h1>Hello INFOR</h1>;
  return (
    <>
      <ol>
        <li>{greeting}</li>
      </ol>
    </>
  );
}

export default App;

變數也可以是陣列

function App() {
  const people = [
    <li>thomaswang</li>,
    <li>casperwang</li>,
    <li>ericxiao</li>,
  ];
  return (
    <>
      <ol>
        {people}
      </ol>
    </>
  );
}

export default App;

變數也可以是陣列

function App() {
  const people = [
    'thomaswang',
    'casperwang',
    'ericxiao',
  ];
  return (
    <>
      <ol>
        {people.map(name => <li key={name}>{name}</li>)}
      </ol>
    </>
  );
}

export default App;

Key

識別「相同的元素」
效能考量

without key

with key

1,2,3 \(\longrightarrow\) 2,3,4

delete 1
delete 2
delete 3
insert 2
insert 3
insert 4

delete 1
insert 4

styling

function App() {
  const people = [
    'thomaswang',
    'casperwang',
    'ericxiao',
  ];
  return (
    <>
      <ol style={{ color: 'red' }}>
        {people.map(name => <li>{name}</li>)}
      </ol>
    </>
  );
}

export default App;

HTML

<div style="color: #fff; font-size: 20px;">

React

<div style={{ color: '#fff', fontSize: '20px' }}>

```
flex-direction
```
```
text-align
```

```
flexDirection
```
```
textAlign
```

使用自定義component

function Button() {
  return (
    <button>click me</button>
  );
}
function App() {
  return (
    <>
      <Button />
      <Button />
    </>
  );
}

export default App;

傳入properties

function Button({ name }) {
  return (
    <button>{name}: click me</button>
  );
}
function App() {
  return (
    <>
      <Button name="A" />
      <Button name="B" />
    </>
  );
}

export default App;

特殊property——children

function Button({ children }) {
  return (
    <button>{children}</button>
  );
}
function App() {
  return (
    <>
      <Button>A</Button>
      <Button>B</Button>
    </>
  );
}

export default App;

特殊property——onClick

function Button({ children }) {
  return (
    <button onClick={() => console.log(children)}>{children}</button>
  );
}
function App() {
  return (
    <>
      <Button>A</Button>
      <Button>B</Button>
    </>
  );
}

export default App;

目前為止我們做到了什麼？創造自己的tag

寫程式的精神：減少重複！

function Button({ children }) {
  return (
    <button style={{
      background: 'red',
      cursor: 'pointer',
    }} onClick={() => console.log(children)}>
      {children}
    </button>
  );
}
function App() {
  const btns = [
    'btn-1',
    'btn-2',
    'btn-3',
    'btn-4',
    'btn-5',
    'btn-6',
    'btn-7',
    'btn-8',
  ]
  return (
    <>
      {btns.map(x => <Button key={x}>{x}</Button>)}
    </>
  );
}

export default App;

<button
  style="background: red;cursor: pointer;"
  onclick="console.log('btn-1')">
  btn-1
</button>
<button
  style="background: red;cursor: pointer;"
  onclick="console.log('btn-2')">
  btn-2
</button>
<button
  style="background: red;cursor: pointer;"
  onclick="console.log('btn-3')">
  btn-3
</button>
<button
  style="background: red;cursor: pointer;"
  onclick="console.log('btn-4')">
  btn-4
</button>
<button
  style="background: red;cursor: pointer;"
  onclick="console.log('btn-5')">
  btn-5
</button>
<button
  style="background: red;cursor: pointer;"
  onclick="console.log('btn-6')">
  btn-6
</button>
<button
  style="background: red;cursor: pointer;"
  onclick="console.log('btn-7')">
  btn-7
</button>
<button
  style="background: red;cursor: pointer;"
  onclick="console.log('btn-8')">
  btn-8
</button>

以上，我們簡化了排版部分

state

react的design pattern
相同的state對應到相同的畫面狀態
state = 畫面背後記錄的資料

Example：計數器

plain JavaScript

<h1 id="counter">0</h1>
<button onclick="add()">++</button>
<script>
let cnt = 0;
function add(){
  cnt++;
  document.getElementById('counter').innerText = cnt;
}
</script>

cnt其實就是state
缺點：state改變後要手動改變畫面（line 7）

React

import { useState } from 'react';

function App() {
  const [cnt, setCnt] = useState(0);
  function add(){
    setCnt(cnt + 1);
  }
  return (
    <>
      <h1>{cnt}</h1>
      <button onClick={add}>++</button>
    </>
  );
}

export default App;

cnt真的就是state
state改變後會直接反應在畫面上

每次state改變，react就會重新計算一次畫面的元素
react做好了各式各樣的優化
只有跟變動的state有關的部分才會重算

Simple Design, High Efficiency

我們做到了什麼？使用state設計程式邏輯

more to learn

useEffect
// making change to non-state things

useMemo
// states computed from other states

useCallback
// specialized useMemo for function

react-router-dom
// handle route (url) change

```
context
// global state
```

build

npm start開的是開發伺服器（development server）
開發伺服器並不適合做為產品
事實上我們做的都是靜態網頁，而靜態網頁不需要伺服器
要將所有react設計編譯、最佳化成靜態檔案

npm run build

front-end / back-end

Express

node.js 後端套件

JS async/await

「岔開來做某件事」

一般程式都是一行一行執行
「同步」

若要「等待」某些東西跑完再繼續計算
JS使用Promise來實現
async / await 為 Promise 的簡化版

某些函式是非同步的（需要等待時間）
例如 HTTP request、計算hash、檔案讀取
通常使用外部資源的函式都是非同步的
要使用非同步函式就必須搭配async/await

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
}

console.log('before');
asyncCall();
console.log('after?');

async function asyncCall() {
  console.log('calling');
  let res = await fetch('http://localhost:5000');
  res = await res.text();
  console.log(`localhost:5000 says: ${res}`);
}

console.log('before');
asyncCall();
console.log('after?');

express

```
npm install express
```
```
node index.js
```

const express = require('express');
const app = express();
const port = 5000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`listening on port ${port}`);
});

basics

app.get('/:name', (req, res) => {
  res.send(`Hello ${req.params.name}!`);
});

URL with parameters

cnt = {};
app.get('/:name', (req, res) => {
  const name = req.params.name;
  if(cnt[name] === undefined)
    cnt[name] = 0;
  res.send(cnt[name].toString());
});

more functionality

cnt = {};
app.get('/:name', (req, res) => {
  const { name } = req.params;
  if(!(name in cnt))
    cnt[name] = 0;
  res.send(`${cnt[name]}`);
});

more functionality

app.post('/add', (req, res) => {
  const { name } = req.body;
  cnt[name]++;
  res.send(cnt[name].toString());
});

POST with extra data

app.post('/add', (req, res) => {
  const { name } = req.body;
  if(!(name in cnt))
    return res.sendStatus(400);
  cnt[name]++;
  res.send(cnt[name].toString());
});

POST with extra data

work with React

import { useState, useEffect } from 'react';

function App() {
  const [cnt, setCnt] = useState(false);
  const [name, setName] = useState("");
  const [value, setValue] = useState("");

  async function add(){
    let res = await fetch(`http://localhost:5000/add`, {
      method: 'POST',
      body: JSON.stringify({ name: name }),
      headers: {
        'Content-Type': 'application/json',
      }
    });
    res = await res.text();
    setCnt(Number(res));
  }
  function change(event){
    setValue(event.target.value);
  }

  useEffect(() => {
    if(name.length === 0) return;
    (async () => {
      let res = await fetch(`http://localhost:5000/${name}`);
      res = await res.text();
      setCnt(Number(res));
    })();
  }, [name]);

  return (
    <>
      <input type="text" value={value} onChange={change}/>
      <button onClick={() => setName(value)}>OK</button>
      <p>
        {cnt !== false ?
          <>
            {cnt}<button onClick={add}>++</button>
          </> : ""}
      </p>
    </>
  );
}

export default App;

even cooler

import { useState, useEffect } from 'react';

function App() {
  const [cnt, setCnt] = useState(false);
  const [value, setValue] = useState("");

  async function add(){
    let res = await fetch(`http://localhost:5000/add`, {
      method: 'POST',
      body: JSON.stringify({ name: value }),
      headers: {
        'Content-Type': 'application/json',
      }
    });
    res = await res.text();
    setCnt(Number(res));
  }
  function change(event){
    setValue(event.target.value);
    setCnt(false);
  }

  useEffect(() => {
    if(value.length === 0){
      setCnt(false);
      return;
    }
    const id = setTimeout(async () => {
      let res = await fetch(`http://localhost:5000/${value}`);
      res = await res.text();
      setCnt(Number(res));
    }, 500);
    return () => clearTimeout(id);
  }, [value]);

  return (
    <>
      <input type="text" value={value} onChange={change}/>
      <p>
        {cnt !== false ?
          <>
            {cnt}<button onClick={add}>++</button>
          </> : ""}
      </p>
    </>
  );
}

export default App;

網頁設計大禮包

Outline

Why so important

Sublime Text 4

優點

插件們

工具們

build system

Tools > Build System > New Build System

snippets

Tools > Developer > New Snippet

material theme

CTRL+Shift+P >

Package Control: Install Package > material theme

Sublime Mege

mighty git tool

優點

HTML

基本語法

基本語法

All Tags

基本語法

最熟悉的工具—Chrome

F12

CSS

selector 語法

border

margin

padding

display

position

JavaScript

基本語法 跟C++很像

Arrow function

HTML DOM

React

設計網頁時建議選擇一種

framework / library下手

React

Get Started

檔案架構

src/App.js

嵌入變數

變數也可以是元素

變數也可以是陣列

變數也可以是陣列

Key

styling

HTML

React

使用自定義component

傳入properties

特殊property——children

特殊property——onClick

目前為止我們做到了什麼？創造自己的tag

state

Example：計數器

plain JavaScript

React

我們做到了什麼？使用state設計程式邏輯

more to learn

build

front-end / back-end

Express

JS async/await

express

basics

URL with parameters

more functionality

more functionality

POST with extra data

POST with extra data

work with React

even cooler

more to learn

網頁大禮包

More from thomaswang2003

基本語法跟C++很像