Intro to Javascript

Transcript

1. 1.

   JS

2. 2.

   @yurivictor

3. 3.

   WHAT IS JAVASCRIPT?

4. 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. 5.

   NO!

6. 6.

   THAT’S SCARY

7. 7.

   JAVASCRIPT LET’S YOU DO COOL STUFF ON THE WEB* *AND

   BEYOND
8. 8.

   YES!

9. 9.

   LET’S DO THAT

10. 10.

    LET’S TALK TUTORIALS

11. 11.

    HERE’S A SECRET

12. 12.

    TUTORIALS SUCK

13. 13.

    alert( 'Hello SND' );

14. 14.

    NO!

15. 15.

    PROGRAMMING TUTORIALS SUCK BECAUSE THEY TEACH PROGRAMMING

16. 16.

    NO!

17. 17.

    LET’S LEARN HOW TO BUILD COOL STUFF

18. 18.

    YES!

19. 19.

    THREE THINGS

20. 20.

    ADDING

21. 21.

    REMOVING

22. 22.

    MOVING

23. 23.

    LET’S TALK JAVASCRIPT

24. 24.

    JAVASCRIPT IS STRANGE

25. 25.

    JAVASCRIPT IS POWERFUL

26. 26.

    HERE’S A SECRET

27. 27.

    USE GOOGLE

28. 28.

    YOU ARE GOING TO

29. 29.

    10 LINES OF CODE

30. 30.

    10 NEXT APPS

31. 31.

    5 MINUTES PER LINE

32. 32.

    WE’RE GOING TO LEARN

33. 33.

    VARIABLES

34. 34.

    FUNCTIONS

35. 35.

    IF/ELSE

36. 36.

    JQUERY

37. 37.

    LET’S GET IT STARTED(HA)

38. 38.

    OPEN YOUR TEXT EDITOR

39. 39.

    SAVE A NEW FILE AS awesome.html

40. 40.

    DRAG THE FILE INTO YOUR BROWSER

41. 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>
42. 42.

    None
43. 43.

    SAME CODE AS

44. 44.

    None
45. 45.

    None
46. 46.

    SAME CODE AS

47. 47.

    None
48. 48.

    WHAT’S NEXT

49. 49.

    ANIMATION

50. 50.

    DATA

51. 51.

    WORLD DOMINATION

52. 52.

    HOW TO KEEP GOING

53. 53.

    READ OTHER’S CODE wapo.st/ThoL6P

54. 54.

    BUILD REAL THINGS

55. 55.

    BREAK STUFF

56. 56.

    LEARN JS PROPERLY bit.ly/TwAwZr

57. 57.

    None