前端與後端資源

前端與後端資源 === [MDN](https://developer.mozilla.org/zh-TW/) 實用的網頁百科全書，大大們的最愛(大大表示：W3School退散！) [W3School](https://www.w3schools.com/) 雖然很多人都很不推，但我還是覺得新手看這個網頁學得最快，所以還是放個 [Codepen](https://codepen.io/) 前端的遊樂場(? 雖然我沒怎麼用過啦～不過上面有很多神級Code OAOOO # 上學期的社課講義 [從 0 開始 HTML、CSS](https://yuren-tw.github.io/NTUOSC_HTMLandCSS/#/) by 皮皮 [JavaScript 初體驗](https://paper.dropbox.com/doc/JavaScript-in-2018-4qZ3enfLKpElOt57zAdql) by Qbane [其他社課講義](https://ntuosc.org/courses/) # Javascript Basic - Javascript 簡單語法 ## Declare Variables - 宣告變數 ```javascript= var a = 1; console.log(a); let b = 'Hello World'; console.log(b); const c = true; console.log(c); ``` ```javascript= const a = 1; a = 3; //error, you can't reset const variables. ``` ## Data Type - 資料型態 ```javascript= var a = 1; //number console.log(a); var b = 'Hello World'; //string console.log(b); var c = true; //boolean console.log(c); var d = [1, 3, 5]; //array console.log(d); var e = { //object gender: 'man' age: 20 } console.log(e); ``` ## Arithmetic - 算數 ### number ```javascript= var x = 1; // x=1 var y = 1 + 2; // y=3 var z = x + y; // z=4 x = x * 10; // x=10 y = x / 5; // y=2 z = 107 % x; // z=7 x = x ** y // x=100 ``` ### string ```javascript= var a = 'hello'; var b = 'world'; var c = a + b; ``` ## Function - 函式 ```javascript= function add(x, y) { let sum = x + y; return sum; } console.log(add(3, 5)); ``` ## If - Else ```javascript= var grade = 85; if(grade < 60) { console.log('Failed!'); } else { console.log('Passed!') } ``` ## Loop - 迴圈 ### For ```javascript= for(var i=0;i<10;i++) { console.log(i); // 0 1 2 3 4 5 6 7 8 9 } ``` ```javascript= var arr = [1, 3, 5, 7, 9]; for(i in arr) { console.log(arr[i]); } ``` ### While ```javascript= var num = 3000; while(1) { if(num % 17 == 0) { console.log(`${num} mod 17 == 0`); break; } } ``` # Javascript in Webpage - 網頁端Javascript ## How to Use Javascript in webpage - 如何在網頁中用Javascript ```htmlmixed= <html> <head> </head> <body> <script src="./index.js"></script> </body> </html> ``` ## DOM and BOM ### Webpage Javascript's components - 網頁中Javascript的組成 ![](https://i.imgur.com/AuJ85tg.png) ### DOM and BOM's relation - DOM和BOM的關係 ![](https://i.imgur.com/jqK3TRP.png) ### the html elements to DOM - HTML和DOM ![](https://i.imgur.com/lEI2xu1.png) ## KeyWord 1. ArrayMethod 2. callback 3. Prototype 4. Promise 5. Async Await 6. AJAX 7. ECMAscript 8. string template 9. nodejs 10. SPA 11. 前端三大框架 12. Sass, Scss 13. webpack

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.