Download as PDF, PPTX
Build a game with javascript (may 21 atlanta)
- 1. April 2017 Build aGame with Javascript http://bit.ly/tf-js-game-atl
- 2. About me • AllenSmith • Analyst for City of Atlanta • Recent Thinkful Grad
- 3. About us We traindevelopers and data scientists through 1-on-1 mentorship and career prep programs
- 4. Goals • Build afunctional game – emphasis on build
- 5. What we’re building(demo) http://bit.ly/tf-sample-game
- 6. Roadmap •Context: JavaScript andthe web •Setting up our project •HTML/CSS refresher •Breaking up complex tasks into Javascript functions •Using jQuery to handle user events
- 7. What is programming? Programmingis writing instructions for a computer to execute. Programming is problem-solving.
- 8. Programming is aprocess 1. Defining problems 2. Finding solutions to those problems 3. Implementing those solutions in a language your computer can understand
- 9.
- 10.
- 11. Brief history ofJavascript • Written by Brendan Eich in 1995 for Netscape • Initial version written in 10 days • Completely unrelated to Java, named as a marketing stunt because Java was “hot” at the time • Continues to evolve under guidance of ECMA International, driven by browser makers
- 12. Javascript today • Onlyprogramming language to become standard in browsers • Huge community of developers, libraries and frameworks • Fairly easy syntax, though quirky • Lots of job opportunities
- 13. Setup (1 of3) •If you don’t have text editor, download Sublime Text: https:// www.sublimetext.com/ •Download ZIP of code: bit.ly/starter-code
- 14. Setup (2 of3) •Open Sublime Text •Go to “Project” -> “Add Folder to Project”
- 15. Setup (3 of3) •Open the HTML file in your browser by double clicking on it in Finder (Mac) / Explorer (PC) •If you’re not sure where it is, right-click on the file in Sublime text, and then reveal in “Finder” (Mac) / “Explorer” (PC)
- 16. HTML/CSS Refresher •Open index.htmlin Sublime Text •HTML is the content and structure of a webpage •Three key concepts: •Tags •Elements •Attributes
- 17. HTML tags Every tagstarts with a “less than” sign and ends with a “greater than” sign <html> #this is an HTML opening tag <body> #this is a body opening tag <h1>Hello world!</h1> #this is set of H1 tags </body> #this is a body closing tag </html> #this is an HTML closing tag
- 18. HTML elements HTML elementsusually consist of an opening tag, closing tag, and some content <html> #html element starts here <body> #body element starts here <h1>Hello world!</h1> #this is an HTML element </body> #body element ends here </html> #html element ends here
- 19. HTML attributes HTML attributesset properties on an element — the are attached in the opening tag <a href=“https://somewhere.com">This is a link</a> href is an attribute that sets the destination of a link <h1 class=“headline”>This is a headline</h1> class is one attribute that identifies element (for CSS & Javascript)
- 20.
- 21.
- 22. CSS refresher •Open style.cssin Sublime Text •CSS determines the visual presentation of your HTML webpages, including layout and visual appearance of specific elements •Key concepts: •Selectors •Property •Value
- 23. Example selectors p (selectsall paragraph tags) .name (selects HTML elements with class “name”) p.name (selects paragraph tags with class “name”)
- 24. CSS properties Determines theaspect of the element’s appearance to change • color (set the font color) • font-family (sets main typeface and backup typefaces) • background-image (sets background image) • height (sets the height of an element)
- 25. CSS values Determines theaspect of the element’s appearance we wish to change • color: red, blue, green, #CCCCCC acceptable values for the color property • font-family: helvetica, arial, sans-serif acceptable values for the font-family property • background-image: url(“imageFile.jpg") looks for a URL value for image file • height: 40px, 50% set in pixels or percentage of container height
- 26. Declaration block This isa declaration block containing two declarations p { color: red; font-size: 36px; }
- 27.
- 28. Break the gameinto steps •Start a new game on page load •Accept user guess •Give user feedback based on their guess •Allow user to start a new game •Hide / show modal if a user clicks for instructions
- 29. Start a newgame on page load •Generate a random number between 0 - 100 & store that •Print random number (to make sure it’s working) •Set “Guess counter” to 0 and display it
- 30. Translating into code Writea function that uses JavaScript’s built-in method to generate a random number and assign it to a variable. So now we need to learn about variables & functions.
- 31. Javascript variables • Declaringvariable: var firstVariable; • Assigning value: firstVariable = 6; • Retrieve value: alert(firstVariable) Example on JSBin: http://bit.ly/js-example-two
- 32. Basic functions A functionlets you separate your code into bite-sized pieces which you can use over again. When you write a function to use later, you are “declaring” it. When you use (or run) that function you are “calling” it.
- 33. Example Declaring a function functiondoSomething () { alert(“Done!”) } Calling a function doSomething()
- 34. Functions: parameter &return •We sometimes pass a parameter and return a value. Parameters let us call a function multiple times with different inputs in order to get different outputs. •return sends back a value to wherever the function was called from
- 35.
- 36. Displaying the guestcount
- 37. Putting it alltogether •Set guessCount to 0 •Display that guessCount •Run the random number generator
- 38. Putting it together:the code
- 39.
- 40. Checking how theuser did
- 41. Checking how theuser did
- 42. Homework •More specific feedback:getting warmer or colder? •Count number of guesses with each guess •Output each guess to the guess list •New game button
- 43. Ways to keeplearningLevelofsupport Learning methods
- 44. 1-on-1 mentorship enablesflexibility 325+ mentors with an average of 10 years of experience in the field
- 45. Support ‘round theclock
- 46. Our results Job Titlesafter GraduationMonths until Employed
- 47. Try us out! •Initial 2-week trial includes six mentor sessions for $50 • Learn HTML/CSS and JavaScript • Option to continue onto web development bootcamp • Talk to me (or email jasjit@thinkful.com) if you’re interested