Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (7)
Similar to Intro javascript build a scraper (3:22)
Similar to Intro javascript build a scraper (3:22) (20)
More from Thinkful
More from Thinkful (20)
Recently uploaded
Recently uploaded (20)
Intro javascript build a scraper (3:22)
- 1. Intro to Javascript: Building a Scraper February 2017 http://bit.ly/thinkful-javascript-scraper
- 2. About me • Jasjit Singh • Self-taught developer • Worked in finance & tech • Co-Founder Hotspot • Thinkful General Manager
- 3. About us Thinkful prepares students for web development & data science jobs through 1-on-1 mentorship programs
- 4. What’s your goal? • Do you want to work better with developers? • Do you want to start working as a developer? • 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 • Javascript overview • Working with HTML • Scraper walkthrough + drills • Email scraping demo
- 7. Clients / Servers Client Frontend Developer Server Backend Developer
- 8. What are we learning today? 100% of client-side code (for the web) is written in Javascript. You can also use Javascript to write server- side code thanks to Node.js.
- 9. History of Javascript • Written by Brendan Eich in 1995 for use in Netscape • Initial version written in just 10 days • Completely unrelated to Java, maybe named after it to draft off popularity • Over 10 years, became default language for browsers
- 10. Javascript today Javascript is the most common language on Github
- 11. Also… • Exceptional community of developers, libraries, and frameworks • Great place for beginners to start programming • Lots of job opportunities • Continues to evolve under guidance of Ecma International, with input from top tech companies
- 12. What is a scraper? A scraper goes around the internet for us and “scrapes” data from websites. Today we’ll make a simple scraper to grab emails from a website.
- 13. Anatomy of a webpage • HTML - defines content & structure of a page (filename: index.html) • CSS - defines visual presentation of page (filename: index.css) • Javascript - defines behavior of a page (filename: index.js)
- 14. HTML elements http://bit.ly/tf-scraper <html> <h1 class=“hello-world”>Hello world!</h1> </html>
- 15. Using Javascript to interact with HTML We can use Javascript to “grab” an HTML element, store it in a variable and do something with it.
- 16. What is a variable? A variable is a name that is attached to a value. It gives us a shorthand way to refer to values created in the program //set the variable “x” to “3” var x = 3; //print the variable console.log(x);
- 17. Things you can assign to a variable • String • Number • Boolean • Null • Undefined • Object • Array
- 18. Grabbing elements of a certain class //grabs elements with class name “hello world” document.getElementsByClassName(“hello- world”);
- 19. Starting to put it together //store array of elements in variable “hello” var hello = document.getElementsByClassName(“hello- world”);
- 20. What is an array? Arrays store multiple values in a single variable: var cars = ["Saab", "Volvo", "BMW"]; Array indexes are zero-based: The first element in the array is 0, the second is 1, and so on. What will this print? console.log(cars[0])
- 21. Using Javascript to interact with HTML //array of elements with class “hello-world” var hello = document.getElementsByClassName(“hello- world”); //set variable first_item to first item var first_item = hello[0] //print text of first_item console.log(text.textContent)
- 22. Quick drill Add this to your CodePen HTML <span class=“goodbye”>Goodbye!</span> See if you can use Javascript to print out the text in this element
- 24. 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 • We only make money when you get a job
- 25. Our Program You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor
- 26. Our Mentors Mentors have, on average, 10+ years of experience
- 27. Our Results Job Titles after GraduationMonths until Employed
- 28. Special Prep Course Offer • Three-week program, includes six mentor sessions • Covers HTML/CSS, Javascript, jQuery, Responsive Design • Option to continue into web development bootcamp • Prep course costs $500 (can apply to cost of full bootcamp) • Talk to me (or email me) about special offer
- 29. October 2015 Questions? email me at jas@thinkful.com or schedule a call through thinkful.com