Build a game with javascript (april 2017)
Transcript of Build a game with javascript (april 2017)
![Page 2: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/2.jpg)
About us
We train developers and data scientists through 1-on-1 mentorship and career prep
![Page 3: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/3.jpg)
About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
![Page 4: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/4.jpg)
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?
![Page 5: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/5.jpg)
What’s your programming background?
• First lines of code will be written tonight?
• Been self teaching for 1-3 months?
• Been at this for 3+ months
![Page 6: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/6.jpg)
Goals
• Build a functional game – emphasis on build
• Practice solving problems like real developers
• Learn JavaScript fundamentals as we use them
• Pick up a touch of jQuery
• Homework!
![Page 8: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/8.jpg)
Roadmap
•Context: JavaScript and the web
•Setting up our project
•HTML/CSS refresher
•Using jQuery to handle user events
•Breaking up complex tasks into Javascript functions
![Page 9: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/9.jpg)
What is programming?
Programming is writing instructions for a computer to execute. Programming is problem-solving.
![Page 10: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/10.jpg)
Programming is a process
1. Defining problems
2. Finding solutions to those problems
3. Implementing those solutions in a language your computer can understand
![Page 11: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/11.jpg)
Perception
![Page 12: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/12.jpg)
Reality
![Page 13: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/13.jpg)
Brief history of Javascript
• 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
![Page 14: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/14.jpg)
Javascript today
• Only programming 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
![Page 15: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/15.jpg)
How the web works
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)
![Page 16: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/16.jpg)
Clients / Servers
Client (sends requests) Frontend Developer Manages what user sees
Server (sends response) Backend Developer
Manage what app does
![Page 17: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/17.jpg)
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
![Page 18: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/18.jpg)
Setup (1 of 3)
•If you don’t have text editor, download Sublime Text: https://www.sublimetext.com/
•Download ZIP of code: bit.ly/starter-code
![Page 19: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/19.jpg)
Setup (2 of 3)
•Open Sublime Text
•Go to “Project” -> “Add Folder to Project”
![Page 20: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/20.jpg)
Setup (3 of 3)
•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)
![Page 21: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/21.jpg)
HTML/CSS Refresher
•Open index.html in Sublime Text
•HTML is the content and structure of a webpage
•Three key concepts:
•Tags •Elements •Attributes
![Page 22: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/22.jpg)
HTML tags
Every tag starts 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
![Page 23: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/23.jpg)
HTML elements
HTML elements usually 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
![Page 24: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/24.jpg)
HTML attributes
HTML attributes set 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)
![Page 25: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/25.jpg)
index.html walkthrough
![Page 26: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/26.jpg)
index.html Walkthrough
![Page 27: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/27.jpg)
CSS refresher
•Open style.css in Sublime Text
•CSS determines the visual presentation of your HTML webpages, including layout and visual appearance of specific elements
•Key concepts:
•Selectors •Property •Value
![Page 28: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/28.jpg)
Example selectors
p (selects all paragraph tags)
.name (selects HTML elements with class “name”)
#intro (selects HTML elements with id “intro”)
p.name (selects paragraph tags with class “name”)
![Page 29: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/29.jpg)
CSS properties
Determines the aspect 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)
![Page 30: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/30.jpg)
CSS values
Determines the aspect 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
![Page 31: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/31.jpg)
Declaration block
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}
![Page 32: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/32.jpg)
CSS example
![Page 33: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/33.jpg)
Break the game into 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
![Page 34: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/34.jpg)
Start a new game 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
![Page 35: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/35.jpg)
Translating into code
Write a function that uses JavaScript’s built-in method to generate a random number and assign it to a variable
![Page 36: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/36.jpg)
Examples
• Declaring variable: var firstVariable;
• Assigning value: firstVariable = 6;
• Retrieve value: alert(firstVariable)
Example on JSBin: http://bit.ly/js-example-two
![Page 37: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/37.jpg)
Basic functions
A function lets 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.
![Page 38: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/38.jpg)
Example
Declaring a function function doSomething () {alert(“Done!”)
}
Calling a function doSomething()
![Page 39: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/39.jpg)
The code!
![Page 40: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/40.jpg)
Displaying the guest count
![Page 41: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/41.jpg)
Putting it all together
•Set guessCount to 0
•Display that guessCount
•Run the random number generator
![Page 42: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/42.jpg)
Putting it together: the code
![Page 43: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/43.jpg)
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
![Page 44: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/44.jpg)
Receiving user input
![Page 45: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/45.jpg)
Checking how the user did
![Page 46: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/46.jpg)
Checking how the user did
![Page 47: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/47.jpg)
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
![Page 48: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/48.jpg)
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
![Page 49: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/49.jpg)
More about Thinkful
You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor
![Page 50: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/50.jpg)
Our mentors
Mentors have, on average, 10+ years of experience
![Page 51: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/51.jpg)
Our results
Job Titles after GraduationMonths until Employed
![Page 52: Build a game with javascript (april 2017)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f9abe41a28ab8e5b8b45d5/html5/thumbnails/52.jpg)
Try us out!
Try the 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 [email protected])