Intro to Javascript

Intro to Javascript

From Society for News Design iPad workshop.

4fa1c18bc3a13c65525f3abd3cf96f08?s=128

Yuri Victor

May 25, 2013
Tweet

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>
  42. None
  43. SAME CODE AS

  44. None
  45. None
  46. SAME CODE AS

  47. None
  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

  57. None