Web Development 102

Transcript

1. Web Development 102
2. Karl Li Back-end Developer @killtw http://about.me/killtw
3. Javascript
4. JS is not JAVA
5. » ECMAScript » DOM » BOM » Weak typing
6. alert('Hello World');
7. Variables var text = 'String'; var number = 1; var boolean = false; var pi = 3.1415926;
8. Arrays var array = ['Karl', 'Dylan', 'Jimmy', 'Anderson']; console.log(array[0]);
9. Objects var developer = { firstname: 'Karl', lastname: 'Li', age: 24 }; console.log(developer.firstname);
10. Functions function test() { console.log('test'); } test(); var log; log = function(text) { console.log(text); } log('something wrong');
11. function log(text) { console.log(text); } function transform(number) { return '$' + number; } log(transform(1234));
12. function welcome(name, title) { console.log('Welcome ' + name + ', the ' + title); } welcome('Bill Gates', 'CEO');
13. If else function welcome(age) { if (age > 30) { console.log('Welcome'); } else { console.log("Hey, boy. what's up"); } } welcome(31);
14. function welcome(age) { if (age > 30) { console.log('Welcome'); } else if (age > 60) { console.log('Hello, old man.'); } else { console.log("Hey boy, what's up?"); } } welcome(50);
15. Loops var person = ['Karl', 'Dylan', 'Jimmy', 'Anderson']; for (var i = 0; i < person.length; i ++) { console.log(person[i]); }
16. Everything in JS is an Object var text = 'Hello World'; console.log(text.length); console.log(text.indexOf('o')); console.log(text.toUpperCase()); console.log(text.toLowerCase());
17. Date var now = new Date(); console.log(now);
18. jQuery
19. Markdown
20. Title # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
21. Link [flyingV](https://www.flyingv.cc) <a href="https://www.flyingv.cc">flyingV</a> flyingV
22. Image  <img src="https://www.flyingv.cc/images/logo2x.png" alt="Logo">
23. Unsorted List * Karl + Jimmy - Dylan <ul> <li>Karl</li> <li>Jimmy</li> <li>Dylan</li> </ul> » Karl » Jimmy » Dylan
24. Sorted List 1. Karl 4. Jimmy 2. Dylan <ol> <li>Karl</li> <li>Jimmy</li> <li>Dylan</li> </ol> 1.Karl 2.Jimmy 3.Dylan
25. Font *text* _text_ **text** __text__ _**text**_ <em>text</em> <strong>text</strong> <strong><em>text</em></strong> text text text text text
26. Codecademy http://www.codecademy.com/ Markdown http://markdown.tw/ jQuery http://jquery.com/
27. One more thing...
28. SITCON http://sitcon.org/2014/ COSCUP http://coscup.org/2014/zh-tw/