GDSC FCU 第1堂前端新手村 - HTML, CSS, JavaScript介紹

前端新手村1
餅乾
Herman Lee
HTML. CSS, JavaScript

Join at slido.com
#2985855
https://app.sli.do/event/e31Kp7RcdxSWuiCXHQ9p4i

環境準備
Live server
https://marketplace.visualstudio.com/items?itemName=ritwick
dey.LiveServer
程式碼
https://codesandbox.io/s/qian-duan-xin-shou-cun-p1hrrw?ﬁle
=/index.html

按!直接生成
基本的HTML結構

id或class可以協助css或js找到這個標籤在哪裡
HTML的標籤與屬性
<img src="images/cat.png" alt="My test image">
有些標籤也有自訂的屬性

順便介紹一下今天會做到小小小專案
實際寫寫看
開發環境測試
開發工具介紹

開始美化之前，先學著怎麼找到目標
CSS - 美化網頁

CSS Display Type
每個元素都有自己的type

Flex - 現代最常用排版方法

Flex
包含三個屬性 flex-grow、flex-shrink 和 flex-basis
● flex-grow: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的
伸展性，預設值為 0，如果設置為 0 則不會縮放。
● flex-shrink: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時
的當前元件的收縮性，預設值為 1，如果設置為 0 則不會縮放。
● flex-basis: 元件的基準值，可使用不同的單位值。

美化成自己喜歡的樣子
https://cssgenerator.org/box-shadow-css-generator.html
https://fonts.google.com/
Fast-track-Frontend-Guide/6-beautiful.html at main ·
cookieopjax/Fast-track-Frontend-Guide · GitHub

JavaScript and EMCAScript
JavaScript是一個直譯式語言，它的引擎裝在瀏覽器中
ECMAScript 是 JavaScript 的標準，目的是讓不同瀏覽器之間能根據 spec 來實作
JavaScript 和 ECMAScript 都是程式語言，但不是一樣的東西。JavaScript 通常縮寫
為 JS，是一種符合 ECMAScript spec 的程式語言。
ES6/ES2015 : 最常聽到的一個版本

Javascript
網頁的動態行為與效果
動態語言
分號可加可不加
console.log(), alert()
變數型態
宣告 : let, const, var
== vs ===
Template literals ` `
JavaScript Datatypes
1. String
2. Number
3. Boolean
4. Undeﬁned
5. Null
6. Object
The object data type can contain:
1. An object
2. An array
3. A date

for loop
while
if
switch
跟C語言差不多
小練習 :
把1~100之間的偶數印出來

Array
沒甚麼特別，什麼都可以塞
array.push()
array.pop()
array.length
array.slice(start, end) //return new array
array.splice(start, deleteCount, item1, item2, ...)
spread operator

Object
什麼都可以塞，跟其他語言的「物件」有點不同，在js中至少87%東
西都是物件，有點像Python的dict
Create an Object
Get and set object value
Destructing an Object

Function
In JavaScript, functions are ﬁrst-class objects, because they can be passed to other
functions, returned from functions, and assigned to variables and properties. They can also
have properties and methods just like any other object.
簡單來說，在其他語言你不可能把一個function當作變數傳來傳去，但js可以
function declaration
function expression
arrow function
function in object

this
let name = "Sandy";
let obj1 = {
name: "cookie",
getName() {
console.log(this.name);
},
};
obj1.getName(); //cookie
JS的this相比其他程式語
言來說比較複雜，但最簡
單的用法就是Object中可
以取得該Object內的屬性

JS小練習
建立一個array，裡面存了許多Object，每個object裡面有name和gender屬性。
建立一個arrow function，輸入為array，輸出一個gender等於female的array
ﬁlter((element, index, array) => { /* … */ })
const data = [
{
name: "cookie",
gender: "male",
},
{
name: "sandy",
gender: "female",
},
{
name: "frank",
gender: "male",
},
{
name: "mandy",
gender: "female",
},
];

Asynchronous vs Synchronous
and
Callback function
JS的許多 Web API 功能都是採用非同步的用法
例如一個網頁會同時渲染畫面跟讀取資料
不可能讀資料等的時候，全部人等他讀
但是某些情況下我們就是要確保A完成再做B
就可以使用callback functuin解決
當然有更方便的方法來處理這個，我們第三堂再來講

Javascript是不是物件導向的?
JavaScript 不像 Java 或是其他物件導向的程式語言，它是沒有 class 的
但是他還是一種OOP語言
只是採用Prototype的方式，與其他語言有所不同
ES6之後有推出了class關鍵字，但只是語法糖
如果是寫Vue的話基本上不需要寫這個，所以知道就好

JS如何與HTML互動
DOM是HTML文檔的一種表示方式，它將文檔解析成一棵樹狀結構，並且
可以通過JavaScript來操作和修改文檔中的元素和內容
window
document
change element attribue with JS

Event
在JS中，event非常重要，我們在網
頁中的每一個動作都會發出事件，
例如點擊, 滑動, 甚至是滑鼠的移動
，我們可以捕捉到他們，並做對應的
操作。
var btn = document.getElementById('btn');
// 參數 e 就是上面說的事件物件 (Event Object)
// 因為是參數，當然也可以自己定義名稱
btn.addEventListener('click', function(e){
console.log(e);
}, false);

在前端儲存資料的方法
localstorage.setItem(“key”, “value”)
localstorage.getItem(“key”)
JSON介紹
JSON.stringify() ：物件變 JSON
JSON.parse()：JSON 變物件

把先前的To-do-list網頁加以優化
加入JS使得輸入代辦事項時可以新
增到頁面上，這些資料可以被儲存
在瀏覽器，可以的話也加入編輯和
刪除
今日練習

使用Netlify
把你的網站
放到網路上
Develop and deploy websites and apps in record
time | Netlify
cookie-todo.netlify.app

GDSC FCU 第1堂前端新手村 - HTML, CSS, JavaScript介紹

Recommended

More Related Content

Featured (20)