Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learn to Code with JavaScript - Choose Your Own Adventures

811 views

Published on

content inspired by Galvenize from Lee Ngo :)
Going over the basics of JavaScript by building a Choose Your Own Adventures App

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Learn to Code with JavaScript - Choose Your Own Adventures

  1. 1. LEARN TO CODE WITH JAVASCRIPT BY CHOOSING YOUR OWN ADVENTURES By Tessa Mero Follow me on Twitter: @tessamero
  2. 2. Developer Relations
  3. 3. Instructor / Mentor
  4. 4. Community Leader
  5. 5. Mother of Two
  6. 6. Review ◦Basic Syntax of JavaScript ◦ Variables and Functions ◦Conditional Statements (if, else if, else) ◦Build a “Choose Your Own Adventure” application
  7. 7. Thanks to Lee Ngo ◦github.com/lee-ngo ◦medium.com/@leepngo
  8. 8. Setting Up Your Computer ◦Text Editor: atom.io ◦Updated Web Browser : Google Chrome
  9. 9. What is JavaScript? ◦First appearance 1995 ◦Created by Netscape engineer ◦Most core language available ◦Can do more than just a static page – Animate, calculate, any actions! Think of it as a BEHAVIOR ◦Bridges ”design” and “development” ◦JavaScript != Java
  10. 10. First Step? Variables
  11. 11. Variables and Data Types • Strings – “Hello! My name is Tessa.” • Numbers – 40, 0.15, 150, 15000000 • Boolean – True or False • Null – nothing • “ “ – undefined value • Functions – hmmm show me!
  12. 12. =, ==, and === What? = is the assignment operator. Sets variables equal to a specific value. == is the abstract equality comparison === is the strict equality comparison
  13. 13. Examples: = == === Var foo = 1 “1” == 1 => True Null = undefined => True “1” === 1 => False Null === undefined => False
  14. 14. Functions ◦Blocks of Code ◦Syntax: Declare, Define, and Call
  15. 15. Syntax of Functions ◦Parameters – (a, b, c) – passes through functions ◦Arguments – real values of the parameters the function affects ◦Block - { … } the function’s operational code ◦return command – the output of the function
  16. 16. Conditional Statements - if ◦ Remember Choose Your Own Adventure books? ◦ Format: if, else, else if ◦ If - If what is in the parameter is True, then a block of code will run. If False, will not run
  17. 17. Conditional Statements – if, else If you want it to do something else besides nothing if False…. Add else!
  18. 18. Conditional Statements – if, else if, else Have more scenarios? Add ”else if” to it if (name == “Tessa”) {name = “My name is Tessa.”;) else if (name ==“John”;) {name = “My name is John.”;) else {name = “This person does not have a name.”;} Can you figure out the error below?
  19. 19. TIME TO MAKE OUR “CHOOSE YOUR OWN ADVENTURES” APP!
  20. 20. Clone the GitHub Repo ◦https://github.com/GalvanizeOpenSource/l earn-to-code-javascript-2 ◦Short URL: http://bit.ly/choose-adventure
  21. 21. Open index.html in web browser
  22. 22. 4 Steps to Building This App: ◦Start with an initial prompt ◦Create two possibilities for responding to that prompt ◦Connect everything to your HTML & CSS! ◦Test it out and see if it works
  23. 23. Player Selects an Option Player must choose ‘TAKE GOLD’ or ’DRINK POTION’ to move on to the next phase Time to create a Function to make things happen!
  24. 24. Create function goldOrPotion() Open the custom.js file and add code starting at line 2
  25. 25. Add a response variable
  26. 26. Create Conditional Statement
  27. 27. Break down of the condition:
  28. 28. What if you type something else?
  29. 29. custom.js File results
  30. 30. Type in ‘TAKE GOLD’ - Results
  31. 31. Twitter: @tessamero slides: http://bit.ly/choose- adventure-preso

×