Embed Size (px)
Citation preview
Intro to Javascript: Building a Scraper
February 2017
http://bit.ly/thinkful-javascript-scraper
About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
About us
Thinkful prepares students for web development & data science jobs through 1-on-1 mentorship programs
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?
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
• Javascript overview
• Working with HTML
• Scraper walkthrough + drills
• Email scraping demo
Clients / Servers
ClientFrontend Developer
ServerBackend Developer
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.
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
Javascript today
Javascript is the most common language on Github
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
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.
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)
HTML elements
http://bit.ly/tf-scraper
<html>
<h1 class=“hello-world”>Hello world!</h1>
</html>
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.
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 variableconsole.log(x);
Things you can assign to a variable
• String
• Number
• Boolean
• Null
• Undefined
• Object
• Array
Grabbing elements of a certain class
//grabs elements with class name “hello world”document.getElementsByClassName(“hello-world”);
Starting to put it together
//store array of elements in variable “hello”var hello = document.getElementsByClassName(“hello-world”);
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])
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 itemvar first_item = hello[0]
//print text of first_itemconsole.log(text.textContent)
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
Full demonstration
https://www.osu.edu/findpeople/
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
Our Program
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
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
