Uvod u JavaScript / Osnove JavaScripta

Za WebBootcamp #1
https://webbootcamp.eu/trece-predavanje-slobodan-stojanovic-osnove-javascript/

Transcript

1. JavaScript
2. Ja sam Slobodan Stojanović CTO @ Cloud Horizon Organizator JS Belgrade Meetupa github.com/stojanovic twitter.com/slobodan_
5. ŠTA JE JAVASCRIPT?
6. JavaScript je dinamičan, objektno-orijentisan i slabo tipiziran programski jezik
7. JavaScript je jedan od najpopularnijih
 programskih jezika na Svetu
8. programski ili skripting jezik?
9. Zašto je JavaScript jedan od najpopularnijih programskih jezika i gde se najčešće koristi?
10. ISTORIJA INTERNETA
11. • Predložen 1962. • Kreiran 1969. • Poznat kao ARPANET • Napravljen od strane ARPA
 (Advanced Research Projects Agency)
12. • Konektovao 4 kompjutera u SAD • 1965. uspešno konektovali 2 preko
 telefonskog sistema • Do 1972. povezano puno Univerziteta i
 kreirani su email, telnet i newsgroup
 protokoli
13. • FTP • Gopher • TCP/IP
14. ARPANET postaje Internet
15. WORLD WIDE WEB
16. Predložen marta 1989.
 u CERNu od strane
 Tim Berners-Leea
18. Kreirao je prvi pretraživač (browser) 1990.
 WorldWideWeb
19. 1993. NSCA mosaic pretraživač dodaje inline slike, boje i hiperlinkove
20. 1993. NSCA mosaic pretraživač prvi koji se
 pokreće u grafičkom interfejsu
21. Avgust 1995. Interner Explorer 1.0 baziran na Spyglass Mosaic pretraživaču
22. početak 1996. NETSCAPE 2 sa novim tehnologijama: frejmovi i JavaScript
23. ISTORIJA JAVASCRIPTA
24. Osnivač Netscapea Marc Andreessen je verovao da je HTMLu
 potreban “lepak” jezik
25. 1995. zapošljavaju Brendana Eicha da implementira Scheme programski jezik u Netscape Navigator
26. Istovremeno sarađuju sa Sun Microsystems da dodaju njihov jezik Java kako bi mogli da se takmiče sa Microsoftom
27. Kompanija odlučuje da njihov skripting jezik treba da ima sličnu sintaksu kao Java i da bude komplementaran sa njom
28. Brendan Eich kreira prototip za 10 dana u maju 1995.
30. Mocha
31. LiveWire
32. LiveScript Netscape Navigator 2.0 beta 2
33. JavaScript Netscape Navigator 2.0 beta 3
34. Način na koji manipuliše formama, linkovima i sl. postao je poznat kao DOM level 0
35. 1996. ECMAScript standard od strane European Computer Manufacturers Association
36. 1996. Netscape 3 i JavaScript 1.1
37. 1997. Netscape 4 i DHTML
38. JavaScript 1.2 [ ] i { } Layer DOM Manipulacija CSSom
39. 1997. Internet Explorer 4 dozvoljava da se gotovo bilo koji deo DOMa menja i uvodi filtere i tranzicije
40. W3C usvaja mnoge delove te sintakse i ona postaje deo naredne DOM preporuke
41. sredinom 1998. Netscape 3 postaje Open Source i implementira JavaScript 1.3 ali zbog puno bugova gubi korisnike
42. 1999. Microsoft IE5 Implementira W3C DOM 1 preporuku i dodaje još puno stvari iz IE4
43. ECMAScript 3 / JavaScript 1.5 - - - * JavaScript 1.4 je postojao samo kao server side JS na Netscapeu
44. Microsoftova ekstenzija
 JavaScripta: JScript
45. W3C DOM Drvo sa HTML elementom kao korenom
46. 2000. Opera 4
47. Pretraživači (5. generacija): Konqueror, ICEbrowser, Television…
48. 2002. Mozilla projekat objavljuje Mozilla pretraživač sa Gecko i SpiderMonkey
49. Internet Explorer 6 Opera 7
51. Flash
52. <! DOCTYPE html>
54. HTML5 Prvi draft 2008. Zvanično objavljen u Oktobru 2014.
55. “Thoughts on Flash” April 2008. Steve Jobs
56. Novembar 2011. Adobe najavljuje da odustaje od mobilne verzije Flasha
57. HTML5 donosi puno JavaScript APIja uključujući
 Canvas, WebGL, history, fileApi…
58. JAVASCRIPT BIBLIOTEKE
59. Manipulacija DOMom je teška.
 Ili je bar bila dok su različiti pretraživači na različite načine implementirali standarde
60. To nas je dovelo do prvih većih JavaScript biblioteka
61. 2004. dōjō toolkit
62. Februar 2005. Prototype $(), $F(), $$()…
63. Septembar 2006. MooTools (My Object-Oriented Tools)
64. Januar 2006. jQuery John Resig
66. function addClass(node, class) { if (!node.length) node = [node]; for (var n = 0, m = node.length; n < m; n++) { if ((" " + node[n].className + " ").indexOf(" "+class+" ") >= 0) { node.className += " " + class; } } } // apply myclass to all nodes addClass(document.getElementById("myelement"), "myclass");
67. $("#myelement").addClass("myclass");
68. document.getElementById("myelement").classList.add("myclass");
69. You might not need jQuery http://youmightnotneedjquery.com
70. JAVASCRIPT FRAMEWORKS
71. Sa razvojem samog jezika pojavile su se i ozbiljnije biblioteke
72. SPA
 Single Page Applications
73. Oktobar 2010. Backbone.js
 MVP*
 (Model-View-Presenter)
74. Oktobar 2011. Angular 1
 MVVM*
 (Model-View-Viewmodel)
75. Decembar 2011. Ember.js
 MVVM*
 (Model-View-Viewmodel)
76. Maj 2013. React
 “View library”
77. Maj 2016. Angular 2
 RC1
78. Ostali: CanJS, Meteor, Vue.js…
79. JAVASCRIPT I MOBILNE APLIKACIJE
80. “Thoughts on Flash” April 2008. Steve Jobs
81. JavaScript vs Flash
82. JavaScript vs Native
83. Septembar 2011. Mark Zuckerberg “Our biggest mistake was betting too much on HTML5”
84. Hybrid Apps
85. 2009.
 Nitobi Phonegap
86. 2011.
 Adobe Phonegap
87. Phonegap postaje
 Apache Cordova
88. 2015.
 React Native
89. SERVER SIDE JAVASCRIPT
90. Videli smo da JavaScript postaje sve moćniji u pretraživaču i na mobilnim uređajima.
 Ali to nije sve!
91. Decembar 1995. Server side JavaScript Netscape Enterprise Server
92. Maj 2009. Node.js zasnovan na V8
93. Za šta je Node.js dobar?
94. Real-time, REST APIs, Streaming, IoT…
95. Poznate biblioteke
96. Express.js Hapi.js Koa
97. socket.io
98. Grunt, Gulp, Browserify, Webpack…
99. Hoćeš da pišeš ES7?
 Nema problema.
 Babel
100. JEZICI KOJI SE KOMPAJLIRAJU U JAVASCRIPT
101. Kako popularnost JavaScripta raste tako se pojavljuje sve više jezika koji se kompajliraju u JavaScript
102. Zašto?
103. Neki od jezika koji se kompajliraju u JavaScript
104. 2009. CoffeeScript
105. 2011. Dart
106. 2012. TypeScript
107. 2012. Elm
108. 2013. PureScript
109. 2013. asm.js
110. WebAssembly
111. OK, ZA ŠTA JE JAVASCRIPT DOBAR?
112. Web aplikacije (jedini radi u svakom pretraživaču bez pluginova)
113. Server side web aplikacije Real-time, APIs, Streaming…
114. Internet Of Things Raspbery Pi, Arduino, Tessel…
115. Mobilne aplikacije Mobile web, Cordova, Ionic, React Native…
116. KAKO NAUČITI JAVASCRIPT
117. Postoji ogromna količina resursa na internetu, evo nekih od njih
118. Sajtovi sa tutorijalima i kursevima
119. FreeCodeCamp.com
120. codecademy.com
121. udemy.com
122. Knjige
123. You Don't Know JS Kyle Simpson
124. Eloquent JavaScript Marijn Haverbeke
125. JavaScript: The Definitive Guide David Flanagan
126. JavaScript: The Good Parts Douglas Crockford
127. JavaScript: The Good Parts Douglas Crockford
128. Korisni sajtovi
129. github.com
130. developer.mozilla.org
131. nodeschool.io
132. jschool.xyz
133. Ili naravno na prvom
 Web Bootcampu :)
 webbootcamp.eu
134. JS ZAJEDNICA U BEOGRADU
135. JS Belgrade
136. Mesečni meetupi
137. Coffee.js
138. Besplatne radionice: NodeSchool,
 CodeRetreat, Serverless Camp…
139. meetup.com/JS-Belgrade-Meetup
140. slack.jsbelgrade.org 400+ članova
141. PITANJA? Uživo na Web Bootcamp Facebook stranici 14. septembra u 21h