Love at First Language

How I fell in love with programming - pretty late in life
Held at MediterranéaJS, Barcelona, June 2015
http://mediterraneajs.eu/

Transcript

1. Love at first language why JavaScript is an excellent choice to begin with programming twitter @viddity
2. how I fell in love with programming pretty late in life
3. this is where I come from
4. I have studied medicine
5. worked as MD
6. transitioned into Neuroscience
7. that was exciting
8. had to deal with huge amounts of data
9. EXCEL
10. my programming capable colleagues who were like
11. I was like ...
12. I want to do that too!
13. instead of learning MatLab
14. I stumbled over HTML CSS
15. 4 years later this is where I am:
16. how come?
18. * encouraged to take my obsession serious * overcome the fear to be too late, not smart enough * to go for it professionally
19. I went for Ruby on Rails
20. I learned a lot
21. but not how to manage frustration
22. got lost with all these things I thought I needed to know
23. but, but, but
24. the fascination still hadn't stopped
25. what language?
26. "it doesn't matter really..." 1 Some random counselor
27. "Well, what is it you really want to do?" 1 A wiser counselor
28. someone serves beautiful design
29. i am allowed to tackle with the mechanics
31. I want to be a Frontend Developer
32. this is where finally the JS Love Story begins
33. why is JS good for beginners?
34. easy to get started with fast results
35. the THING to learn if you want to become a webdevolper
36. it has all the BASICS
37. but doesn't leave out the FUN
38. no need for complex environment
39. so many TOOLS available
41. heard experienced programmers say:
42. "JS is a pain"
43. "JS is unlogic"
44. "JS is excentric"
45. ?
46. JS shares concepts common to other languages, but does some things differently
47. got an idea of that when i approached the concept of SCOPE
48. what is SCOPE?
49. a set of rules where and how variables can be looked up
50. VARIABLES: are in scope from the point declared to end of function declared in FUNCTIONS: are in scope throughout their ecompassing function
51. let's play
52. Test Suite function assert(value, desc) { var li = document.createElement('li'); li.className = value ? 'pass' : 'fail'; li.appendChild(document.createTextNode(desc)); document.getElementById('results').appendChild(li); } .pass {color: green;} .fail {color: red;}
53. Test Suite function assert(value, desc) { var li = document.createElement('li'); li.className = value ? 'pass' : 'fail'; li.appendChild(document.createTextNode(desc)); document.getElementById('results').appendChild(li); } .pass {color: green;} .fail {color: red;} assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope");
54. code example function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
55. assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
56. assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
57. function outer() { assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
58. function outer() { assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
59. function outer() { var a = "nerveous?"; var b = "terribly!"; assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
60. function outer() { var a = "nerveous?"; var b = "terribly!"; assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
61. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
62. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } outer();
63. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); var c = a + " " + b; console.log(c); } } inner(); } outer();
64. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); var c = a + " " + b; console.log(c); } } inner(); } outer();
65. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); } } inner(); } outer();
66. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); } } inner(); } outer();
67. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); } inner(); } outer();
68. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); } inner(); } outer();
69. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); inner(); } outer();
70. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); inner(); } outer();
71. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); outer();
72. function outer() { var a = "nerveous?"; var b = "terribly!"; function inner() { if (a === "nerveous?") { var c = a + " " + b; console.log(c); } } inner(); } assert(typeof outer === "function", "outer in scope"); assert(typeof inner === "function", "inner in scope"); assert(typeof a === "string", "a in scope"); assert(typeof b === "string", "b in scope"); assert(typeof c === "string", "c in scope"); outer();
73. more JS scope rules
74. * SCOPE "bubbles" in JS defined by functions * SCOPE "look-up" direction: inside to outside * the "look-up" stops at first match found
75. * a function's SCOPE can be used to hide variables from other SCOPES * other blocks don't end SCOPE - usually ...
76. I hope the point was made ...
77. first serious steps are hard
78. hearing every once in a while from a pro:
79. "it stays hard at any moment"
80. "but it also keeps being fun"
81. helps!
82. thanks <3
83. Some of the online learning resources that helped me: 4 https://www.codeschool.com/ 4 http://www.codecademy.com/ 4 http://leveluptuts.com/tutorials/javascript- tutorials
84. Books I enjoye(d): 4 Secrets of a JavaScript Ninja 4 A Smarter Way to Learn JavaScript 4 You Don't Know JS Series: https://github.com/getify/ You-Dont-Know-JS