前端與後端資源

前端與後端資源 === [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 ``` ### 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. Prototype 3. Promise 4. Async Await 5. AJAX 6. ECMAscript 7. string template 8. nodejs 9. SPA 10. 前端三大框架 11. Sass, Scss 12. webpack

Example
Header	# Header
Unordered List	- Unordered List
Ordered List	1. Ordered List
Todo List	- [ ] Todo List
Blockquote	> Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th	19^th^
H₂O	H~2~O
Inserted text	++Inserted text++
Marked text	==Marked text==
Link	[link text](https:// "title")
Image	![image alt](https:// "title")
`Code`	`Code`
`var i = 0;`	```javascript var i = 0; ```
	:smile:
Externals	{%youtube youtube_id %}
L^aT_eX	$L^aT_eX$
This is a alert area.	:::info This is a alert area. :::