Download to read offline
Build a game with javascript (april 2017)
- 1. April 2017 Build aGame with Javascript http://bit.ly/tf-js-game-atl
- 2. About us We traindevelopers and data scientists through 1-on-1 mentorship and career prep
- 3. About me • JasjitSingh • Self-taught developer • Worked in finance & tech • Co-Founder Hotspot • Thinkful General Manager
- 4. What’s your goal? •Do you want to work better with developers? • Do you want to start working in tech? • Do you have an idea that you want to build?
- 5. What’s your programmingbackground? • First lines of code will be written tonight? • Been self teaching for 1-3 months? • Been at this for 3+ months
- 6. Goals • Build afunctional game – emphasis on build • Practice solving problems like real developers • Learn JavaScript fundamentals as we use them • Pick up a touch of jQuery • Homework!
- 7.
- 8. Roadmap •Context: JavaScript andthe web •Setting up our project •HTML/CSS refresher •Using jQuery to handle user events •Breaking up complex tasks into Javascript functions
- 9. What is programming? Programmingis writing instructions for a computer to execute. Programming is problem-solving.
- 10. Programming is aprocess 1. Defining problems 2. Finding solutions to those problems 3. Implementing those solutions in a language your computer can understand
- 11.
- 12.
- 13. 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
- 14. Javascript today • Onlyprogramming language to become standard in browsers • Continues to evolve under guidance of ECMA International, driven by browser makers • Huge community of developers, libraries and frameworks • Lots of job opportunities • Fairly easy syntax, though quirky
- 15. How the webworks Type a URL from a client (e.g. google.com) Browser communicates with DNS server to find IP address Browser uses the protocols HTTP and IP to send a request for specific “files” Browser receives those files and renders them as a website (HTML and CSS)
- 16. Clients / Servers Client(sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manage what app does
- 17. Example: facebook.com HTML, CSS,& Javascript render interactive newsfeed Algorithm determines what’s in your feed Request Get data about your friends and their posts Open browser and navigate to facebook.com Application Logic Database Response Client Server
- 18. 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
- 19. Setup (2 of3) •Open Sublime Text •Go to “Project” -> “Add Folder to Project”
- 20. 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)
- 21. HTML/CSS Refresher •Open index.htmlin Sublime Text •HTML is the content and structure of a webpage •Three key concepts: •Tags •Elements •Attributes
- 22. 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
- 23. 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
- 24. 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)
- 25.
- 26.
- 27. 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
- 28. Example selectors p (selectsall paragraph tags) .name (selects HTML elements with class “name”) #intro (selects HTML elements with id “intro”) p.name (selects paragraph tags with class “name”)
- 29. 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)
- 30. 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
- 31. Declaration block This isa declaration block containing two declarations p { color: red; font-size: 36px; }
- 32.
- 33. 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
- 34. Start a newgame on page load •Generate a random number between 0 - 100 •Print random number (to make sure it’s working) •Set “Guess counter” to 0 and display it
- 35. Translating into code Writea function that uses JavaScript’s built-in method to generate a random number and assign it to a variable
- 36. Examples • Declaring variable:var firstVariable; • Assigning value: firstVariable = 6; • Retrieve value: alert(firstVariable) Example on JSBin: http://bit.ly/js-example-two
- 37. 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.
- 38. Example Declaring a function functiondoSomething () { alert(“Done!”) } Calling a function doSomething()
- 39.
- 40. Displaying the guestcount
- 41. Putting it alltogether •Set guessCount to 0 •Display that guessCount •Run the random number generator
- 42. Putting it together:the code
- 43. 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
- 44.
- 45. Checking how theuser did
- 46. Checking how theuser did
- 47. 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
- 48. More about Thinkful •Anyone who’s committed can learn to code • 1-on-1 mentorship is the best way to learn • Flexibility matters — learn anywhere, anytime • Thinkful only makes money when you get a job
- 49. More about Thinkful You’lllearn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor
- 50. Our mentors Mentors have,on average, 10+ years of experience
- 51. Our results Job Titlesafter GraduationMonths until Employed
- 52. Try us out! Trythe program for two weeks, includes six mentor sessions - $50 Learn HTML/CSS/JavaScript Option to continue onto web development bootcamp Come talk to me if you’re interested (or email me at jas@thinkful.com)
- 53. Questions? email me atjas@thinkful.com