Intro to Javascript

From Society for News Design iPad workshop.

Transcript

1. JS
2. @yurivictor
3. WHAT IS JAVASCRIPT?
4. JAVASCRIPT IS A MULTI-PARADIGM, WEAKLY TYPED, PROTOTYPE-BASED INTERPRETED PROGRAMMING LANGUAGE ORIGINALLY INTENDED FOR WEB BROWSERS SO CLIENT-SIDE SCRIPTS COULD INTERACT WITH THE USER, CONTROL THE BROWSER, COMMUNICATE ASYNCHRONOUSLY AND ALTER THE DOCUMENT CONTENT
5. NO!
6. THAT’S SCARY
7. JAVASCRIPT LET’S YOU DO COOL STUFF ON THE WEB* *AND BEYOND
8. YES!
9. LET’S DO THAT
10. LET’S TALK TUTORIALS
11. HERE’S A SECRET
12. TUTORIALS SUCK
13. alert( 'Hello SND' );
14. NO!
15. PROGRAMMING TUTORIALS SUCK BECAUSE THEY TEACH PROGRAMMING
16. NO!
17. LET’S LEARN HOW TO BUILD COOL STUFF
18. YES!
19. THREE THINGS
20. ADDING
21. REMOVING
22. MOVING
23. LET’S TALK JAVASCRIPT
24. JAVASCRIPT IS STRANGE
25. JAVASCRIPT IS POWERFUL
26. HERE’S A SECRET
27. USE GOOGLE
28. YOU ARE GOING TO
29. 10 LINES OF CODE
30. 10 NEXT APPS
31. 5 MINUTES PER LINE
32. WE’RE GOING TO LEARN
33. VARIABLES
34. FUNCTIONS
35. IF/ELSE
36. JQUERY
37. LET’S GET IT STARTED(HA)
38. OPEN YOUR TEXT EDITOR
39. SAVE A NEW FILE AS awesome.html
40. DRAG THE FILE INTO YOUR BROWSER
41. <h1>0</h1> <h2>AWESOMENESS</h2> <button id="decrease">-</button> <button id="increase">+</button> <script src="jquery.min.js"></script> <script> var awesomeness = 0; // We suck $( 'button' ).click( function() {! ! if ( $( this ).attr( 'id' ) === 'increase' ) { ! ! awesomeness = awesomeness + 10; ! } else { ! ! awesomeness = awesomeness - 1; ! } ! $( 'h1' ).text( awesomeness ); } ); </script>
43. SAME CODE AS
46. SAME CODE AS
48. WHAT’S NEXT
49. ANIMATION
50. DATA
51. WORLD DOMINATION
52. HOW TO KEEP GOING
53. READ OTHER’S CODE wapo.st/ThoL6P
54. BUILD REAL THINGS
55. BREAK STUFF
56. LEARN JS PROPERLY bit.ly/TwAwZr