SlideShare a Scribd company logo
1 of 53
Download to read offline
April 2017
Build a Game with Javascript
http://bit.ly/tf-js-game-atl
About us
We train developers and data scientists
through 1-on-1 mentorship and career
prep
About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
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?
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
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!
What we’re building
http://bit.ly/tf-sample-game
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
What is programming?
Programming is writing instructions for a computer to
execute. Programming is problem-solving.
Programming is a process
1. Defining problems
2. Finding solutions to those problems
3. Implementing those solutions in a language your
computer can understand
Perception
Reality
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
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
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)
Clients / Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manage what app does
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
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
Setup (2 of 3)
•Open Sublime Text
•Go to “Project” -> “Add Folder to Project”
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)
HTML/CSS Refresher
•Open index.html in Sublime Text
•HTML is the content and structure of a webpage
•Three key concepts:
•Tags
•Elements
•Attributes
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
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
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)
index.html walkthrough
index.html Walkthrough
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
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”)
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)
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
Declaration block
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}
CSS example
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
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
Translating into code
Write a function that uses JavaScript’s built-in
method to generate a random number and assign
it to a variable
Examples
• Declaring variable: var firstVariable;
• Assigning value: firstVariable = 6;
• Retrieve value: alert(firstVariable)
Example on JSBin: http://bit.ly/js-example-two
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.
Example
Declaring a function
function doSomething () {
alert(“Done!”)
}
Calling a function
doSomething()
The code!
Displaying the guest count
Putting it all together
•Set guessCount to 0
•Display that guessCount
•Run the random number generator
Putting it together: the code
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
Receiving user input
Checking how the user did
Checking how the user did
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
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
More about Thinkful
You’ll learn concepts, practice with drills, and build capstone
projects for your own portfolio — all guided by a personal mentor
Our mentors
Mentors have, on average, 10+ years of experience
Our results
Job Titles after GraduationMonths until Employed
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
jas@thinkful.com)
Questions?
email me at jas@thinkful.com

More Related Content

What's hot

Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Intro to javascript (6:19)
Intro to javascript (6:19)Intro to javascript (6:19)
Intro to javascript (6:19)
Thinkful
 

What's hot (20)

Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
 
Web Development Basics: HOW TO in HTML
Web Development Basics: HOW TO in HTMLWeb Development Basics: HOW TO in HTML
Web Development Basics: HOW TO in HTML
 
How the Web Works Using HTML
How the Web Works Using HTMLHow the Web Works Using HTML
How the Web Works Using HTML
 
Unit 4(it workshop)
Unit 4(it workshop)Unit 4(it workshop)
Unit 4(it workshop)
 
Web development basics (Part-3)
Web development basics (Part-3)Web development basics (Part-3)
Web development basics (Part-3)
 
Why ruby on rails
Why ruby on railsWhy ruby on rails
Why ruby on rails
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)
 
What’s New and Hot in .NET 4.0
What’s New and Hot in .NET 4.0What’s New and Hot in .NET 4.0
What’s New and Hot in .NET 4.0
 
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsSUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
 
Thinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptThinkful - Intro to JavaScript
Thinkful - Intro to JavaScript
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Xamarin.Forms or Write Once, Run Anywhere
Xamarin.Forms or Write Once, Run AnywhereXamarin.Forms or Write Once, Run Anywhere
Xamarin.Forms or Write Once, Run Anywhere
 
Intro to javascript (6:19)
Intro to javascript (6:19)Intro to javascript (6:19)
Intro to javascript (6:19)
 
#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros
 
JavaScript Workshop
JavaScript WorkshopJavaScript Workshop
JavaScript Workshop
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
HTML 5 Simple Tutorial Part 3
HTML 5 Simple Tutorial Part 3HTML 5 Simple Tutorial Part 3
HTML 5 Simple Tutorial Part 3
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jquery
 
Lecture 2: ES6 / ES2015 Slide
Lecture 2: ES6 / ES2015 SlideLecture 2: ES6 / ES2015 Slide
Lecture 2: ES6 / ES2015 Slide
 

Similar to Build a game with javascript (april 2017)

Intro to javascript (5:2)
Intro to javascript (5:2)Intro to javascript (5:2)
Intro to javascript (5:2)
Thinkful
 
Intro javascript build a scraper (3:22)
Intro javascript   build a scraper (3:22)Intro javascript   build a scraper (3:22)
Intro javascript build a scraper (3:22)
Thinkful
 
540slidesofnodejsbackendhopeitworkforu.pdf
540slidesofnodejsbackendhopeitworkforu.pdf540slidesofnodejsbackendhopeitworkforu.pdf
540slidesofnodejsbackendhopeitworkforu.pdf
hamzadamani7
 

Similar to Build a game with javascript (april 2017) (20)

Overview of PHP and MYSQL
Overview of PHP and MYSQLOverview of PHP and MYSQL
Overview of PHP and MYSQL
 
Intro to javascript (6:27)
Intro to javascript (6:27)Intro to javascript (6:27)
Intro to javascript (6:27)
 
Intro to javascript (5:2)
Intro to javascript (5:2)Intro to javascript (5:2)
Intro to javascript (5:2)
 
Introduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptxIntroduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptx
 
025444215.pptx
025444215.pptx025444215.pptx
025444215.pptx
 
How to generate customized java 8 code from your database
How to generate customized java 8 code from your databaseHow to generate customized java 8 code from your database
How to generate customized java 8 code from your database
 
Silicon Valley JUG - How to generate customized java 8 code from your database
Silicon Valley JUG - How to generate customized java 8 code from your databaseSilicon Valley JUG - How to generate customized java 8 code from your database
Silicon Valley JUG - How to generate customized java 8 code from your database
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 
Intro javascript build a scraper (3:22)
Intro javascript   build a scraper (3:22)Intro javascript   build a scraper (3:22)
Intro javascript build a scraper (3:22)
 
540slidesofnodejsbackendhopeitworkforu.pdf
540slidesofnodejsbackendhopeitworkforu.pdf540slidesofnodejsbackendhopeitworkforu.pdf
540slidesofnodejsbackendhopeitworkforu.pdf
 
Developing Lightning Components for Communities.pptx
Developing Lightning Components for Communities.pptxDeveloping Lightning Components for Communities.pptx
Developing Lightning Components for Communities.pptx
 
web development
web developmentweb development
web development
 
25444215.pptx
25444215.pptx25444215.pptx
25444215.pptx
 
web development
web developmentweb development
web development
 
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titanium
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
 
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
 
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 

More from Thinkful

LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: Fundamentals
Thinkful
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018
Thinkful
 

More from Thinkful (20)

893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
 
Itjsf129
Itjsf129Itjsf129
Itjsf129
 
Twit botsd1.30.18
Twit botsd1.30.18Twit botsd1.30.18
Twit botsd1.30.18
 
Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)
 
Baggwjs124
Baggwjs124Baggwjs124
Baggwjs124
 
Become a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionBecome a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info Session
 
Vpet sd-1.25.18
Vpet sd-1.25.18Vpet sd-1.25.18
Vpet sd-1.25.18
 
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionLA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117
 
1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop
 
LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: Fundamentals
 
(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals
 
Websitesd1.15.17.
Websitesd1.15.17.Websitesd1.15.17.
Websitesd1.15.17.
 
Bavpwjs110
Bavpwjs110Bavpwjs110
Bavpwjs110
 
Byowwhc110
Byowwhc110Byowwhc110
Byowwhc110
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tf
 

Recently uploaded

會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
中 央社
 

Recently uploaded (20)

Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
demyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptxdemyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptx
 
UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024
 
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
Đề tieng anh thpt 2024 danh cho cac ban hoc sinh
Đề tieng anh thpt 2024 danh cho cac ban hoc sinhĐề tieng anh thpt 2024 danh cho cac ban hoc sinh
Đề tieng anh thpt 2024 danh cho cac ban hoc sinh
 
How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17
 
ANTI PARKISON DRUGS.pptx
ANTI         PARKISON          DRUGS.pptxANTI         PARKISON          DRUGS.pptx
ANTI PARKISON DRUGS.pptx
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
 
How to Manage Closest Location in Odoo 17 Inventory
How to Manage Closest Location in Odoo 17 InventoryHow to Manage Closest Location in Odoo 17 Inventory
How to Manage Closest Location in Odoo 17 Inventory
 
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
 
IPL Online Quiz by Pragya; Question Set.
IPL Online Quiz by Pragya; Question Set.IPL Online Quiz by Pragya; Question Set.
IPL Online Quiz by Pragya; Question Set.
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 
MOOD STABLIZERS DRUGS.pptx
MOOD     STABLIZERS           DRUGS.pptxMOOD     STABLIZERS           DRUGS.pptx
MOOD STABLIZERS DRUGS.pptx
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024
 
Including Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdfIncluding Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdf
 

Build a game with javascript (april 2017)

  • 1. April 2017 Build a Game with Javascript http://bit.ly/tf-js-game-atl
  • 2. About us We train developers and data scientists through 1-on-1 mentorship and career prep
  • 3. About me • Jasjit Singh • 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 programming background? • First lines of code will be written tonight? • Been self teaching for 1-3 months? • Been at this for 3+ months
  • 6. 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!
  • 8. 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
  • 9. What is programming? Programming is writing instructions for a computer to execute. Programming is problem-solving.
  • 10. Programming is a process 1. Defining problems 2. Finding solutions to those problems 3. Implementing those solutions in a language your computer can understand
  • 13. 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
  • 14. 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
  • 15. 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)
  • 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 of 3) •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 of 3) •Open Sublime Text •Go to “Project” -> “Add Folder to Project”
  • 20. 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)
  • 21. HTML/CSS Refresher •Open index.html in Sublime Text •HTML is the content and structure of a webpage •Three key concepts: •Tags •Elements •Attributes
  • 22. 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
  • 23. 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
  • 24. 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)
  • 27. 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
  • 28. 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”)
  • 29. 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)
  • 30. 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
  • 31. Declaration block This is a declaration block containing two declarations p { color: red; font-size: 36px; }
  • 33. 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
  • 34. 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
  • 35. Translating into code Write a 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 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.
  • 38. Example Declaring a function function doSomething () { alert(“Done!”) } Calling a function doSomething()
  • 41. Putting it all together •Set guessCount to 0 •Display that guessCount •Run the random number generator
  • 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
  • 45. Checking how the user did
  • 46. Checking how the user 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’ll learn 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 Titles after GraduationMonths until Employed
  • 52. 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 jas@thinkful.com)
  • 53. Questions? email me at jas@thinkful.com