前端隨便聊
阿貴
阿貴
前端工程師
React
SASS
gulp
canvas
pixijs
threejs
jade
Vue
TweenMax
CSS
Webpack
HTML
Flash AS3
EaselJS
前端入門
先對 HTML + CSS 有初步認識
再了解 Javascript 可以對 HTML + CSS 做什麼
HTML 超文本標記語言
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="xxx.css">
</head>
<body>
<!-- 內容 -->
</body>
</html><p> <a> <div> <img>
前端入門
前端入門
前端入門
前端入門
CSS 樣式表
body {
font-size: 16px;
font-family: "微軟正黑體";
}
.redText {
color: #FF0000;
}display
position
margin
padding
版面構成影響最大的屬性
前端入門
前端入門
Javascript(JQuery)
原本 HTML 和 CSS 寫的東西都是寫死的
Javascript可以操作這些東西，變成活的
學習方式
按F12偷看別人的網站
官方文件通常都是最完整的教學
後端串接
API
Server Side Render
常見的合作方式大概有兩種
伺服器端渲染
應用程序接口
前後端合作
Server Side Render
前後端合作
<body>
<div>
<img src="xxxx.jpg" />
<a href="xxxx">鈦合金潛水帥錶</a>
<a href="xxxx">勞力士霸氣新款</a>
<a href="xxxx">NB新款螢光鞋</a>
<a href="xxxx">PUMA出清殺</a>
</div>
<div>
<img src="xxxx.jpg" />
<a href="xxxx">鈦合金潛水帥錶</a>
<a href="xxxx">勞力士霸氣新款</a>
<a href="xxxx">NB新款螢光鞋</a>
<a href="xxxx">PUMA出清殺</a>
</div>
...
</body>前後端合作
<body>
<div>
<img src="xxxx.jpg" />
<a href="xxxx">鈦合金潛水帥錶</a>
<a href="xxxx">勞力士霸氣新款</a>
<a href="xxxx">NB新款螢光鞋</a>
<a href="xxxx">PUMA出清殺</a>
</div>
<div>
<img src="xxxx.jpg" />
<a href="xxxx">鈦合金潛水帥錶</a>
<a href="xxxx">勞力士霸氣新款</a>
<a href="xxxx">NB新款螢光鞋</a>
<a href="xxxx">PUMA出清殺</a>
</div>
...
</body><body>
<?php
for ($i = 0; $i < 6; $i++) {
echo '<div>
<img src="xxxx.jpg" />
<a href="xxxx">'+$data[i]['name1']+'</a>
<a href="xxxx">'+$data[i]['name2']+'</a>
<a href="xxxx">'+$data[i]['name3']+'/>
<a href="xxxx">'+$data[i]['name4']+'</a>
</div>';
}
?>
</body>前端
後端
前後端合作
API
送出值
回傳值
姓名
電話
電子信箱
成功
失敗 原因: 沒有輸入姓名
失敗 原因: 信箱格式不正確
...
前後端合作
API
送出值
回傳值
{
name: "阿貴",
phone: "0912345678",
email: "abc@gmail.com"
}
{
code: 200,
message: "恭喜參加抽獎"
}
{
code: 400.1,
message: "信箱格式不符"
}
閒聊
VUE.JS
Canvas
從新手到神手
Javascript
前端隨便聊
By 蔡阿貴
