Learn to Code with JavaScript - Choose Your Own Adventures
•Download as PPTX, PDF•
1 like•2,018 views
content inspired by Galvenize from Lee Ngo :) Going over the basics of JavaScript by building a Choose Your Own Adventures App
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
Similar to Learn to Code with JavaScript - Choose Your Own Adventures
Similar to Learn to Code with JavaScript - Choose Your Own Adventures (20)
More from Tessa Mero
More from Tessa Mero (20)
Recently uploaded
Recently uploaded (20)
Learn to Code with JavaScript - Choose Your Own Adventures
- 1. LEARN TO CODE WITH JAVASCRIPT BY CHOOSING YOUR OWN ADVENTURES By Tessa Mero Follow me on Twitter: @tessamero
- 6. Review ◦Basic Syntax of JavaScript ◦ Variables and Functions ◦Conditional Statements (if, else if, else) ◦Build a “Choose Your Own Adventure” application
- 8. Thanks to Lee Ngo ◦github.com/lee-ngo ◦medium.com/@leepngo
- 9. Setting Up Your Computer ◦Text Editor: atom.io ◦Updated Web Browser : Google Chrome
- 10. 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
- 12. 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!
- 13. =, ==, and === What? = is the assignment operator. Sets variables equal to a specific value. == is the abstract equality comparison === is the strict equality comparison
- 14. Examples: = == === Var foo = 1 “1” == 1 => True Null = undefined => True “1” === 1 => False Null === undefined => False
- 15. Functions ◦Blocks of Code ◦Syntax: Declare, Define, and Call
- 16. 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
- 17. 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
- 18. Conditional Statements – if, else If you want it to do something else besides nothing if False…. Add else!
- 19. 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?
- 20. TIME TO MAKE OUR “CHOOSE YOUR OWN ADVENTURES” APP!
- 21. Clone the GitHub Repo ◦https://github.com/GalvanizeOpenSource/l earn-to-code-javascript-2 ◦Short URL: http://bit.ly/choose-adventure
- 22. Open index.html in web browser
- 23. 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
- 24. 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!
- 25. Create function goldOrPotion() Open the custom.js file and add code starting at line 2
- 26. Add a response variable
- 28. Break down of the condition:
- 29. What if you type something else?
- 31. Type in ‘TAKE GOLD’ - Results
Editor's Notes
- * What is a Developer Evangelist or Developer Advocate? An advocate means to go out and tell others about your company or tools and teach others. We demo code and help developers improve their work flow by showing them the Dev tools we have. * I do not sell anything. I only teach and help developers. What is Cisco DevNet? Founded 3 years ago. Developer Community 450,000+ devs using our APIs. Over 200 APIs. Cisco is now a software applications company. I work specifically on the Cisco Spark team What is Cisco Spark? Chat/Calls/Video/ Chat bots which us to discussing ChatOps
- This photo was taken in Brazil in the summer of 2016. I was at the BrazilJS JavaScript conference in Porto Alegre, which is also the largest JavaScript conference in the world, holding 2000 attendees. I taught college before I got a job at Cisco. I was teaching web development including frontend and backend web. During this time I took on a volunteer role to mentor students and people who are new to the web development field. I assist others with resumes, cover letters, job interview processes, and job searches. I have helped countless people find jobs and get hired.
- Board of Director member of Joomla Production Leadership Team member Organizer of Meetup for Joomla Meetup and Conference for PHP in my city Meetup and Conference for APIs in my city My city is one of the major tech cities in the USA, Seattle, WA.
- In this course, we'll be going over the following! Basic syntax of JavaScript Variables and Functions Conditional statements (if, else if, else) Build a “Choose Your Own Adventure” application
- This is the what the website looks like. You can fork the repo here. You can follow along as this can also be designed like a workshop or you can watch and try it out later. The link to the slides will be on the last slide. You can also find the content of the slides on the github repo I will provide.
- Thank you to Lee Ngo
- Install a text editor! We recommend Atom.io Have an updated web browser! We recommend Google Chrome
- For those who are brand new to JavaScript: Making its first appearance in 1995, JavaScript was created by an engineer at Netscape to provide a user-friendly, lightweight programming language Now, with HTML and CSS, it is one of the core languages of the Internet and is growing quickly to accommodate beyond the client-side. JavaScript allows web pages to do more than just “sit there." You can animate, calculate, etc. - you can do it all! It is a great programming bridge between “design” and “development” that allows for endless creativity. Common confusion: JavaScript is NOT Java. They are largely different programming languages and should not be confused with one another. Twitter: Opening up a tweet in a bigger window. Any action below a tweet is using JavaScript. Reply, Favoriting JavaScript is not just for programming on browsers. Can be used for Servers, game programming, databases, and robots!
- So if you are brand new to JavaScript, the first step you’ll need to know is the very basics. Variables are created by using the word “var” and then putting a word or word and number afterwards and setting a value. What is the value of the variable total?
- With the ” = “ operator, you are assigning a value to a variable. With the “ == “ abstract equality comparison operator, it compares two items to see if they are of equal value, but ignores if they are the same exact type of data With the ” === “
- With the ” = “ operator, you are assigning a value to a variable.
- Functions are blocks of code that can perform a task. In JS, you follow the general syntax: 1) declare 2) define 3) call (invoke) Think about the value that is produced by this function.
- Parameters - (a,b,c) - hypothetically what passes through the function Arguments - real values of the parameters the function affects Block - {...} - the function’s operational code Return command - the output of the function
- If statements by themselves are to be true.
- What if you wanted the code to do something else besides nothing if it’s False? Make it an ”if else” statement
- Add an “else if” between the ”if” and the “else” Recap of Conditional Rules If statements perform an action if the statement is True Else statements perform an action if the statement is False Else if statements perform an action if the first is False but the second is True Is there any other way to do this?
- You can clone the GitHub repo so you can try it now or later. You can also just download the zip file if you are not familiar with using Git commands. Open the text editor Atom that you installed or whatever favorite text editor you have. Before we get started into looking at the code, we first need to go over JavaScript basics.
- The first thing we’ll do is create a function that runs everything on click.
- Create a variable called “response” that captures whatever the player types into the field. This function retrieves the value in the webpage that is submitted with is associated with the id of the field called “response”. That value is stored in JavaScript for the next move.
- There are 3 possible outcomes: 1) Player types TAKE GOLD 2) Player types DRINK POTION 3) if anything else is typed You would then create an if, else if, and else conditional to indicate to the player that the interactions worked.
- JavaScript finds element with ID ‘gold’ in the HTML and change current setting of class ‘hidden’. Same with ‘intro’ class. Creates the illusion you’re advancing in the story In the else if conditional scenario, the player typed 'DRINK POTION', then the 'intro' block would also disappear, but the 'potion' block would appear instead. ********* In other words, if the player typed 'TAKE GOLD', two things will happen: -JavaScript will find an element with the ID 'gold' in the HTML and change the current setting of class 'hidden' -JavaScript will find an element with the ID 'intro' in the HTML and channge the current setting of class 'hidden' The 'intro' block is by default not hidden from the player - you get to see that in the HTML The 'gold' block is by default hidden - the class 'hidden' and its attributes make it that way. This will make one block of HTML appear and another block disappear, creating the illusion that you're advancing in the story.
- If you do not type in ‘TAKE GOLD’ or ’DRINK POTION’, you have your else statement in the code. This adds a new value to the HTML page that says 'Sorry, I do not understand.' This last bit of code is helpful for knowing that the JavaScript does work, but it's looking for a particular answer.