Recommended
More Related Content
Similar to GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
Similar to GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹 (20)
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
- 1. 前端新手村1 餅乾 Herman Lee HTML. CSS, JavaScript
- 3. 網頁如何運作
- 6. id或class可以協助css或js找到這個標籤在哪裡 HTML的標籤與屬性 <img src="images/cat.png" alt="My test image"> 有些標籤也有自訂的屬性
- 9. CSS 選擇器 參考
- 10. CSS Box-Model
- 12. Flex - 現代最常用排版方法
- 13. Flex 包含三個屬性 flex-grow、flex-shrink 和 flex-basis ● flex-grow: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的 伸展性，預設值為 0，如果設置為 0 則不會縮放。 ● flex-shrink: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時 的當前元件的收縮性，預設值為 1，如果設置為 0 則不會縮放。 ● flex-basis: 元件的基準值，可使用不同的單位值。
- 14. 美化成自己喜歡的樣子 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
- 15. JavaScript and EMCAScript JavaScript是一個直譯式語言，它的引擎裝在瀏覽器中 ECMAScript 是 JavaScript 的標準，目的是讓不同瀏覽器之間能根據 spec 來實作 JavaScript 和 ECMAScript 都是程式語言，但不是一樣的東西。JavaScript 通常縮寫 為 JS，是一種符合 ECMAScript spec 的程式語言。 ES6/ES2015 : 最常聽到的一個版本
- 16. Javascript 網頁的動態行為與效果 動態語言 分號可加可不加 console.log(), alert() 變數型態 宣告 : let, const, var == vs === Template literals ` ` JavaScript Datatypes 1. String 2. Number 3. Boolean 4. Undefined 5. Null 6. Object The object data type can contain: 1. An object 2. An array 3. A date
- 18. Array 沒甚麼特別，什麼都可以塞 array.push() array.pop() array.length array.slice(start, end) //return new array array.splice(start, deleteCount, item1, item2, ...) spread operator
- 19. Object 什麼都可以塞，跟其他語言的「物件」有點不同，在js中至少87%東 西都是物件，有點像Python的dict Create an Object Get and set object value Destructing an Object
- 20. Function In JavaScript, functions are first-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
- 21. this let name = "Sandy"; let obj1 = { name: "cookie", getName() { console.log(this.name); }, }; obj1.getName(); //cookie JS的this相比其他程式語 言來說比較複雜，但最簡 單的用法就是Object中可 以取得該Object內的屬性
- 22. JS小練習 建立一個array，裡面存了許多Object，每個object裡面有name和gender屬性。 建立一個arrow function，輸入為array，輸出一個gender等於female的array filter((element, index, array) => { /* … */ }) const data = [ { name: "cookie", gender: "male", }, { name: "sandy", gender: "female", }, { name: "frank", gender: "male", }, { name: "mandy", gender: "female", }, ];
- 23. Asynchronous vs Synchronous and Callback function JS的許多 Web API 功能都是採用非同步的用法 例如一個網頁會同時渲染畫面跟讀取資料 不可能讀資料等的時候，全部人等他讀 但是某些情況下我們就是要確保A完成再做B 就可以使用callback functuin解決 當然有更方便的方法來處理這個，我們第三堂再來講
- 24. Javascript是不是物件導向的? JavaScript 不像 Java 或是其他物件導向的程式語言，它是沒有 class 的 但是他還是一種OOP語言 只是採用Prototype的方式，與其他語言有所不同 ES6之後有推出了class關鍵字，但只是語法糖 如果是寫Vue的話基本上不需要寫這個，所以知道就好
- 26. Event 在JS中，event非常重要，我們在網 頁中的每一個動作都會發出事件， 例如點擊, 滑動, 甚至是滑鼠的移動 ，我們可以捕捉到他們，並做對應的 操作。 var btn = document.getElementById('btn'); // 參數 e 就是上面說的事件物件 (Event Object) // 因為是參數，當然也可以自己定義名稱 btn.addEventListener('click', function(e){ console.log(e); }, false);
- 27. 在前端儲存資料的方法 localstorage.setItem(“key”, “value”) localstorage.getItem(“key”) JSON介紹 JSON.stringify() ：物件變 JSON JSON.parse()：JSON 變物件
- 29. 使用Netlify 把你的網站 放到網路上 Develop and deploy websites and apps in record time | Netlify cookie-todo.netlify.app