Enviar pesquisa
Carregar
Building a game with JavaScript (March 2017, washington dc)
•
0 gostou
•
257 visualizações
D
Daniel Friedman
Seguir
Intro to JavaScript
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 61
Baixar agora
Baixar para ler offline
Recomendados
Build a Game With JavaScript (May 2017, DTLA)
Build a Game With JavaScript (May 2017, DTLA)
Thinkful
Building a Game With JavaScript (Thinkful LA)
Building a Game With JavaScript (Thinkful LA)
Thinkful
Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)
TJ Stalcup
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Stephen Hay
March 2017 classroom tool
March 2017 classroom tool
Thinkful
Thinkful DC - Intro to Data Science
Thinkful DC - Intro to Data Science
TJ Stalcup
Recomendados
Build a Game With JavaScript (May 2017, DTLA)
Build a Game With JavaScript (May 2017, DTLA)
Thinkful
Building a Game With JavaScript (Thinkful LA)
Building a Game With JavaScript (Thinkful LA)
Thinkful
Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)
TJ Stalcup
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Stephen Hay
March 2017 classroom tool
March 2017 classroom tool
Thinkful
Thinkful DC - Intro to Data Science
Thinkful DC - Intro to Data Science
TJ Stalcup
Intro javascript build a scraper (3:22)
Intro javascript build a scraper (3:22)
Thinkful
Build tic tac toe with javascript (3:28)
Build tic tac toe with javascript (3:28)
Thinkful
Let’s talk about JavaScript - WebElement
Let’s talk about JavaScript - WebElement
Marian Rusnak
CSS Inlining in Email: What It IS + How To Do It
CSS Inlining in Email: What It IS + How To Do It
Litmus
Building a rockstar portfolio (3:22)
Building a rockstar portfolio (3:22)
Thinkful
DC Nonprofit Salesforce User Group Welcome 3-20-14
DC Nonprofit Salesforce User Group Welcome 3-20-14
DC Nonprofit Salesforce User Group
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
CSS3 Introduction
CSS3 Introduction
Jaeni Sahuri
Fleet & transport policy - Envision International (Conf 2010)
Fleet & transport policy - Envision International (Conf 2010)
Andre Knipe
Fuel Up JavaScript with Functional Programming
Fuel Up JavaScript with Functional Programming
Shine Xavier
Drive Business Results with MediaMath Retail
Drive Business Results with MediaMath Retail
MediaMath
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
Adam Paxton
Basic Transport & Fleet Mngt - AK2015
Basic Transport & Fleet Mngt - AK2015
Andre Knipe
Vehicle Management Software
Vehicle Management Software
Tracey Billings
Introduction to CSS3
Introduction to CSS3
Doris Chen
IVR Best Practices: Is your IVR Good? Bad? or Ugly
IVR Best Practices: Is your IVR Good? Bad? or Ugly
Communications Products, Inc.
Fleet management system
Fleet management system
Shree Deepam Infotech Pvt. Ltd.
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
Shay Howe
Vehicle Information System
Vehicle Information System
Rajan Kandel
Golden key - Sweden 2017
Golden key - Sweden 2017
Mathew Sweezey
Intro to JavaScript - Thinkful LA
Intro to JavaScript - Thinkful LA
Thinkful
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkful
Mais conteúdo relacionado
Destaque
Intro javascript build a scraper (3:22)
Intro javascript build a scraper (3:22)
Thinkful
Build tic tac toe with javascript (3:28)
Build tic tac toe with javascript (3:28)
Thinkful
Let’s talk about JavaScript - WebElement
Let’s talk about JavaScript - WebElement
Marian Rusnak
CSS Inlining in Email: What It IS + How To Do It
CSS Inlining in Email: What It IS + How To Do It
Litmus
Building a rockstar portfolio (3:22)
Building a rockstar portfolio (3:22)
Thinkful
DC Nonprofit Salesforce User Group Welcome 3-20-14
DC Nonprofit Salesforce User Group Welcome 3-20-14
DC Nonprofit Salesforce User Group
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
CSS3 Introduction
CSS3 Introduction
Jaeni Sahuri
Fleet & transport policy - Envision International (Conf 2010)
Fleet & transport policy - Envision International (Conf 2010)
Andre Knipe
Fuel Up JavaScript with Functional Programming
Fuel Up JavaScript with Functional Programming
Shine Xavier
Drive Business Results with MediaMath Retail
Drive Business Results with MediaMath Retail
MediaMath
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
Adam Paxton
Basic Transport & Fleet Mngt - AK2015
Basic Transport & Fleet Mngt - AK2015
Andre Knipe
Vehicle Management Software
Vehicle Management Software
Tracey Billings
Introduction to CSS3
Introduction to CSS3
Doris Chen
IVR Best Practices: Is your IVR Good? Bad? or Ugly
IVR Best Practices: Is your IVR Good? Bad? or Ugly
Communications Products, Inc.
Fleet management system
Fleet management system
Shree Deepam Infotech Pvt. Ltd.
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
Shay Howe
Vehicle Information System
Vehicle Information System
Rajan Kandel
Golden key - Sweden 2017
Golden key - Sweden 2017
Mathew Sweezey
Destaque
(20)
Intro javascript build a scraper (3:22)
Intro javascript build a scraper (3:22)
Build tic tac toe with javascript (3:28)
Build tic tac toe with javascript (3:28)
Let’s talk about JavaScript - WebElement
Let’s talk about JavaScript - WebElement
CSS Inlining in Email: What It IS + How To Do It
CSS Inlining in Email: What It IS + How To Do It
Building a rockstar portfolio (3:22)
Building a rockstar portfolio (3:22)
DC Nonprofit Salesforce User Group Welcome 3-20-14
DC Nonprofit Salesforce User Group Welcome 3-20-14
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)
CSS3 Introduction
CSS3 Introduction
Fleet & transport policy - Envision International (Conf 2010)
Fleet & transport policy - Envision International (Conf 2010)
Fuel Up JavaScript with Functional Programming
Fuel Up JavaScript with Functional Programming
Drive Business Results with MediaMath Retail
Drive Business Results with MediaMath Retail
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
Basic Transport & Fleet Mngt - AK2015
Basic Transport & Fleet Mngt - AK2015
Vehicle Management Software
Vehicle Management Software
Introduction to CSS3
Introduction to CSS3
IVR Best Practices: Is your IVR Good? Bad? or Ugly
IVR Best Practices: Is your IVR Good? Bad? or Ugly
Fleet management system
Fleet management system
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
Vehicle Information System
Vehicle Information System
Golden key - Sweden 2017
Golden key - Sweden 2017
Semelhante a Building a game with JavaScript (March 2017, washington dc)
Intro to JavaScript - Thinkful LA
Intro to JavaScript - Thinkful LA
Thinkful
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkful
Introjs10.5.17SD
Introjs10.5.17SD
Thinkful
Choice of programming language for web developing.
Choice of programming language for web developing.
Mohammad Kamrul Hasan
Fecrash10:3:17 sd
Fecrash10:3:17 sd
Thinkful
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB
Web development intership Presentation.pptx
Web development intership Presentation.pptx
bodepallivamsi1122
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)
Thinkful
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
Thinkful
Feccphx9:25
Feccphx9:25
Thinkful
The Language of the Web - HTML and CSS
The Language of the Web - HTML and CSS
kcasavale
introduction to html
introduction to html
codetech2
PSD to HTML Conversion
PSD to HTML Conversion
Darryl Sherman
ashish ppt webd.pptx
ashish ppt webd.pptx
ashishsaini773461
ppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptx
ManojKumar297202
Fecc 12517-sd
Fecc 12517-sd
Thinkful
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB
Web designing course
Web designing course
mandeep Singh
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
learnEnglish51
Web Designing Training In Chandigarh
Web Designing Training In Chandigarh
Excellence Academy
Semelhante a Building a game with JavaScript (March 2017, washington dc)
(20)
Intro to JavaScript - Thinkful LA
Intro to JavaScript - Thinkful LA
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Introjs10.5.17SD
Introjs10.5.17SD
Choice of programming language for web developing.
Choice of programming language for web developing.
Fecrash10:3:17 sd
Fecrash10:3:17 sd
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
Web development intership Presentation.pptx
Web development intership Presentation.pptx
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
Feccphx9:25
Feccphx9:25
The Language of the Web - HTML and CSS
The Language of the Web - HTML and CSS
introduction to html
introduction to html
PSD to HTML Conversion
PSD to HTML Conversion
ashish ppt webd.pptx
ashish ppt webd.pptx
ppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptx
Fecc 12517-sd
Fecc 12517-sd
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
Web designing course
Web designing course
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
Web Designing Training In Chandigarh
Web Designing Training In Chandigarh
Último
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
rafiqahmad00786416
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Deepika Singh
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
Zilliz
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
MIND CTI
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Nanddeep Nachan
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
The Digital Insurer
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
Último
(20)
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Building a game with JavaScript (March 2017, washington dc)
1.
Building a game
with JavaScript March 2017 bit.ly/js-game
2.
© 2017 Thinkful.
All Rights Reserved. 2 About me Dan Friedman Founder of Thinkful, an online school for programming where we’ve taught over 7,000 students Worked as a front-end developer and product manager at an agency in New York
3.
© 2017 Thinkful.
All Rights Reserved. 3 About you Why are you here? 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? Programming experience? First lines of code will be written tonight? Been self teaching for 1-3 months? Been at this for 3+ months
4.
© 2017 Thinkful.
All Rights Reserved. 4 Today’s 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
5.
© 2017 Thinkful.
All Rights Reserved. 5 What we’re building Here’s what we’ll build: http://bit.ly/2gfeIDR http://jeya.io/ThinkFul/projects/hotORcold/
6.
© 2017 Thinkful.
All Rights Reserved. 6 Roadmap Context: JavaScript and the web Setting up our project Working with HTML/CSS Using jQuery to handle user events like button clicks and form submission Breaking up complex behaviors into distinct, short JavaScript functions
7.
© 2017 Thinkful.
All Rights Reserved. 7 What is Programming? Programming is writing instructions for a computer to execute
8.
© 2017 Thinkful.
All Rights Reserved. 8 What is Programming? Programming is problem-solving
9.
© 2017 Thinkful.
All Rights Reserved. 9 What is Programming? Programming is a process: 1. Defining problems 2. Finding solutions to those problems 3. Implementing those solutions in a language your computer can understand
10.
© 2017 Thinkful.
All Rights Reserved. 10 Perception
11.
© 2017 Thinkful.
All Rights Reserved. 11 Reality
12.
© 2017 Thinkful.
All Rights Reserved. 12 JavaScript: a brief history Written by Brendan Eich in 1995 for use in Netscape Initial version written in 10 days Completely unrelated to Java, but maybe named after it to draft off its popularity Over 10 years, became default programming language for browsers
13.
© 2017 Thinkful.
All Rights Reserved. 13 JavaScript: today Has an exceptional community of developers, libraries and frameworks. A partial list: https://en.wikipedia.org/wiki/ List_of_JavaScript_libraries Continues to evolve under guidance of Ecma International, with input from top tech companies Great place for beginners to start programming
14.
© 2017 Thinkful.
All Rights Reserved. 14 Most commonly used language on GitHub Details here: http://githut.info/ JavaScript: today
15.
© 2017 Thinkful.
All Rights Reserved. 15 Why learn JavaScript Most popular language means job opportunities Good starting place to see if coding is for you Coding as a medium of expression
16.
© 2017 Thinkful.
All Rights Reserved. 16 How the web works You type a URL: facebook.com (your computer is the client) The browser communicates with the DNS server to find the IP address The browser sends an HTTP request to the server asking for specific files The browser receives those files and renders them as a website
17.
© 2017 Thinkful.
All Rights Reserved. 17 Client / Server Front-end developer Back-end developer Client Server
18.
© 2017 Thinkful.
All Rights Reserved. 18 Client / Server Client: UI Logic Server: Business logic Request Response Database server
19.
© 2017 Thinkful.
All Rights Reserved. 19 Example: Facebook HTML/CSS/ JavaScript determine layout of news feed, how you can interact with it Algorithm determines what’s in your feed Request Response Database serves photos, videos, status updates Navigate to facebook.com
20.
© 2017 Thinkful.
All Rights Reserved. 20 Which are we learning? 100% of client-side code is written in JavaScript. You can also use JavaScript to write server-side code thanks to Node.js. If you want to work with a database, learn SQL.
21.
© 2017 Thinkful.
All Rights Reserved. 21 Context: Modern use of JavaScript Used for both client and server programming Has an exceptional community of developers, libraries and frameworks. A partial list: https://en.wikipedia.org/wiki/ List_of_JavaScript_libraries Great place for beginners to start programming
22.
© 2017 Thinkful.
All Rights Reserved. 22 Setup (1 of 3) Text editor If you don’t already have one, download Sublime Text: https://www.sublimetext.com/3 Download ZIP of code: bit.ly/starter-code
23.
© 2017 Thinkful.
All Rights Reserved. 23 Setup (2 of 3) Open Sublime Text Go to “Project” -> “Add Folder to Project”
24.
© 2017 Thinkful.
All Rights Reserved. 24 Setup (3 of 3) Open the HTML file in your browser Double click 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)
25.
© 2017 Thinkful.
All Rights Reserved. 25 Working with other’s code Take a tour of your starting point Open each of the files in sublime text Notice how the files are organized into folders This is what it’s like to work on a team
26.
© 2017 Thinkful.
All Rights Reserved. 26 A dash of HTML Open index.html in Sublime Text HTML is the content and structure of a webpage Three key concepts: Tags Elements Attributes
27.
© 2017 Thinkful.
All Rights Reserved. 27 index.html walkthrough Head Header Modal Guessing section
28.
© 2017 Thinkful.
All Rights Reserved. 28 HTML Tags Every tag starts with a less than sign and ends with a greater than sign <html> This is an HTML tag <body> This is a body tag <h1>Hello world!</h1> This line has two H1 tags, one opening and one closing </body> </html>
29.
© 2017 Thinkful.
All Rights Reserved. 29 HTML Elements HTML elements usually consist of an opening tag, closing tag, and some content. <html> <body> This HTML element starts on this line and ends two lines below <h1>Hello world!</h1> This is an HTML element </body> </html> Some consist of just a self-closing tag <img src=“http://i.imgur.com/Th5404r.jpg">
30.
© 2017 Thinkful.
All Rights Reserved. 30 HTML Attributes HTML attributes are for setting properties on an HTML element. Here are three common attributes worth remembering: <a href=“https://somewhere.com">This is a link</a> href is an attribute for setting the destination of a link <h1 class=“headline”>This is a headline</h1> class is an attribute that doesn’t show up in the rendered webpage, but will be important when we start talking about CSS <h1 id=“headline”>This is a headline</h1> id is an attribute that doesn’t show up in the rendered webpage, but will be important when we start talking about CSS
31.
© 2017 Thinkful.
All Rights Reserved. 31 A dash of CSS 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
32.
© 2017 Thinkful.
All Rights Reserved. 32 style.css walkthrough reset.css Background color on html and body elements Modal
33.
© 2017 Thinkful.
All Rights Reserved. 33 CSS Selectors CSS selectors determine which HTML elements are targeted for specific styles: p This selects all paragraph tags .header This selects HTML elements with the class “header” #navigation This selects HTML elements with the ID navigation p.header This selects paragraph tags with the header class
34.
© 2017 Thinkful.
All Rights Reserved. 34 CSS Properties CSS properties determine what about the appearance you’re setting: color This determines the font color font-family This lets you set the typeface as well as backup typefaces background-image This lets you set a background image for an element height This lets you set the height of an element
35.
© 2017 Thinkful.
All Rights Reserved. 35 CSS Values Each property has a set of acceptable values that you can set: color: red, blue, green, #CCCCCC These are all acceptable values for the color property font-family: helvetica, arial, sans-serif These are all acceptable values for the font-family property background-image: url("imageFile.jpg") This property looks for a URL value that points to a specific image file height: 40px 50% Height can be set as an explicit width or as a percentage of the containing box Click on a property to see the acceptable values: http:// www.htmldog.com/references/css/properties/
36.
© 2017 Thinkful.
All Rights Reserved. 36 CSS Example h1 { color: red; font-size: 36px; }
37.
© 2017 Thinkful.
All Rights Reserved. 37 Breaking the problem into steps
38.
© 2017 Thinkful.
All Rights Reserved. 38 Breaking the problem 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
39.
© 2017 Thinkful.
All Rights Reserved. 39 Breaking the problem into sub-steps Write pseudocode that summarizes the steps we need to implement
40.
© 2017 Thinkful.
All Rights Reserved. 40 Start a new game on page load What needs to be done to set up the game?
41.
© 2017 Thinkful.
All Rights Reserved. 41 Start a new game on page load Generate a random number between 0 - 100 console.log random number (to make sure it’s working) Set “Guess counter” to 0 and display it
42.
© 2017 Thinkful.
All Rights Reserved. 42 Starting to translate that to code Write a function that uses JavaScript’s built-in method to generate a random number and assign it to a variable
43.
© 2017 Thinkful.
All Rights Reserved. 43 JavaScript variables Declaring a variable var firstVariable; Assigning a value to it firstVariable = 6; Retrieving that value alert(firstVariable); Causes a popup to appear with the alert message "6"
44.
© 2017 Thinkful.
All Rights Reserved. 44 Functions A function describes a repeatable process or behavior. JavaScript has some built-in functions, and in writing a complex program, you’ll write many, many functions that handle sub-sets of the behavior you’re creating. type in the console: alert(‘Hello from JavaScript land’);
45.
© 2017 Thinkful.
All Rights Reserved. 45 The code!
46.
© 2017 Thinkful.
All Rights Reserved. 46 Displaying the guess count
47.
© 2017 Thinkful.
All Rights Reserved. 47 Displaying the guess count
48.
© 2017 Thinkful.
All Rights Reserved. 48 Putting it all together: newGame() Set guessCount to 0 Display that guessCount Run the random number generator
49.
© 2017 Thinkful.
All Rights Reserved. 49 Putting it all together: newGame()
50.
© 2017 Thinkful.
All Rights Reserved. 50 Functions: parameter and 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
51.
© 2017 Thinkful.
All Rights Reserved. 51 Receive user input
52.
© 2017 Thinkful.
All Rights Reserved. 52 Receive user input
53.
© 2017 Thinkful.
All Rights Reserved. 53 Check how the user did
54.
© 2017 Thinkful.
All Rights Reserved. 54 Check how the user did: checkTemperature()
55.
© 2017 Thinkful.
All Rights Reserved. 55 Check how the user did: checkTemperature()
56.
© 2017 Thinkful.
All Rights Reserved. 56 What’s left? More specific feedback: getting warmer or colder? Count number of guesses with each guess Output each guess to the guess list New game button
57.
© 2017 Thinkful.
All Rights Reserved. 57 What is Thinkful? Online coding bootcamp with 1-on-1 mentorship — learn anytime & anywhere & get a job, guaranteed
58.
© 2017 Thinkful.
All Rights Reserved. 58 1-on-1 mentorship
59.
© 2017 Thinkful.
All Rights Reserved. 59 Results Bhaumik Liz
60.
© 2017 Thinkful.
All Rights Reserved. 60 Special offer • Try the program for two weeks – includes six mentor sessions – for $50 • Learn HTML/CSS/JavaScript • Option to continue into web development bootcamp • Come talk to me if you’re interested (or email me at dan@thinkful.com)
61.
Thank you! Email me
with questions or suggestions: dan@thinkful.com March 2017
Baixar agora