SlideShare a Scribd company logo
1 of 39
Download to read offline
Build a Webapp with Javascript and jQuery
May 2017
http://bit.ly/tf-jquery
About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
My lovely assistant
• Connor Ericson
• Current Thinkful student
About us
Thinkful prepares students for web development & data
science jobs with 1-on-1 mentorship programs
Goals for tonight
• Overview of Javascript and it’s role in the web
• Use Javascript and jQuery to build a web app
• Next steps
Why learn Javascript?
This makes it a good place to start
• Has large community of developers, libraries and
frameworks
• Lots of job opportunities
• Also the syntax is easier to understand for first-time
developers
How the web works
Type a URL from a client (e.g. google.com)
Browser communicates with DNS server to
find IP address
Browser sends an HTTP request asking
for specific files
Browser receives those files and renders
them as a website
Clients / Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manage what app does
Are we learning frontend or backend?
100% of client-side web development is in Javascript.
You can also use Javascript to write server-side code
thanks to Node.js. So technically both!
What is jQuery?
• jQuery solves cross-browser issues with Javascript
• Javascript not designed for UI features, jQuery is
• At least 50% of all websites (in 2012) used jQuery
• jQuery is written in Javascript
A Quick Example
Changing background color of a “body” element. With
jQuery you’ll use a “$” before your line of code
Javascript
document.body.style.background = “red”
jQuery
$(body).css(‘background’, ‘red’)
Common uses of jQuery
• Animations
• UI interaction (i.e. change in appearance when user
hovers over a button)
• Form handling
• Loading data without a page refresh (Ajax)
jQuery setup
Import into your project via CDN
jQuery: Some theory
• DOM traversal
• DOM manipulation
• Events
What is a DOM?
The DOM (Document Object Model) is the browser's
representation of the HTML content of a page. JavaScript
interacts with the DOM
“Grabbing” an element
Example: https://jsbin.com/birokiwero/
“Grabbing” an element
First, select the element you’re looking to interact with
• Select using element type: $(“p”)
• Select using class: $(“.class”)
• Select using id’s: $(“#id”)
Full list here: https://api.jquery.com/category/selectors/
DOM traversal
First, select the element you’re looking to interact with.
Elements can have siblings, parents, and children
•$(“.shopping-list”).parent();
•$(“.shopping-list”).find(“li”);
DOM manipulation
Once you’ve targeted the correct element, you then want to
create some effect
•.addClass() adds a CSS class to selected elements
•.after() insert content after selected content
•.val() gets the value of the first matched element
(typically a form), or sets the value for that element
Quick example
Example 2: https://jsbin.com/finayaf
Events
Events let us create responses to user behavior. When we
add an event listener we specify the event to listen for and
write a “callback function” that runs when the event occurs
Example: https://jsbin.com/ciqade/edit
Special note: this
• this refers to the element targeted with an event. Often
used to refer to a button that was clicked
• Note that this can have other meanings, but that’s
beyond scope of tonight’s discussion
• Example: https://jsbin.com/zufere/2/edit
Event delegation
• Event delegation allows us to attach a single event
listener to a parent element that will fire for all
descendants matching a selector, whether those
descendants exist now or are added in the future.
• Example 1: https://jsbin.com/geheji/3/edit
• Example 2: https://jsbin.com/lecome/2/edit
Event Listener Drill #1
• Write jQuery code such that when a user clicks on one
of the thumbnail images, that image is displayed in the
full size image container at the top (no need to change
HTML or CSS)
• Code here: https://jsbin.com/beyefib/1/edit
Drill Walkthrough
Start by breaking problem down into achievable steps
• Step 1: ?
• Step 2: ?
• Step 3: ?
Drill Walkthrough
Start by breaking problem down into achievable steps
• Step 1: Add an event listener such that when a
thumbnail is clicked, a callback function runs
• Step 2: Get the URL for the image that was clicked
• Step 3: Set the URL for the top image
Solution
Event Listener Drill #2
• Use event listeners to detect when users click on a
lightbulb. When that happens, that bulb should turn on
(use the CSS class .bulb-on), and any other bulb that is
on should turn off. No need to change HTML CSS.
• Code here: https://jsbin.com/moyasum/1/edit
Drill #2 Walkthrough
•Step 1: Add an event listener such that when a lightbulb
is clicked, a callback function is run
•Step 2: Remove the relevant CSS class for all lightbulbs
•Step 3: Add the relevant CSS class for the clicked
lightbulb
Hint: Not sure how to remove a CSS class? Google
“jquery remove CSS class”
Take Home Challenge: Shopping List App
Create an application that allows users to add, check,
uncheck, and remove items from a shopping list
•https://github.com/Thinkful-Ed/shopping-list
•Live: https://thinkful-ed.github.io/shopping-list-solution/
Learning to learn
• Google is your friend!
• Practice at the edge of your abilities
• Ignore the hot new thing. Instead go deep with one
technology
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
•Our incentives are aligned with our students
Our Program
You’ll learn concepts, practice with drills, and build
capstone projects — all guided by a personal mentor
Web Development Syllabus
• Frontend Development (HTML, CSS, Javascript)
• Backend Development (Node.js)
• Frontend Frameworks (React.js)
• Electives (Python, Ruby, Swift, Angular, UX)
• Computer Science Fundamentals
• Technical interviews + Career prep
Our Mentors
Mentors have, on average, 10+ years of experience
Our Results
Job Titles after GraduationMonths until Employed
Special Introductory Offer
• Two-week program, includes six mentor sessions for $50
• Starts with HTML/CSS/Javascript
• Option to continue into full web development bootcamp
• Talk to me (or email me) if you’re interested
October 2015
Questions?
jasjit@thinkful.com
schedule a call through thinkful.com

More Related Content

What's hot

jQuery Foundation Keynote
jQuery Foundation KeynotejQuery Foundation Keynote
jQuery Foundation Keynote
Richard Worth
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
The Final Frontier
The Final FrontierThe Final Frontier
The Final Frontier
Domenic Denicola
 

What's hot (19)

jQuery Foundation Keynote
jQuery Foundation KeynotejQuery Foundation Keynote
jQuery Foundation Keynote
 
Smooth Animations for Web & Hybrid
Smooth Animations for Web & HybridSmooth Animations for Web & Hybrid
Smooth Animations for Web & Hybrid
 
Memorial Sloan Kettering: Adventures in Drupal 8
Memorial Sloan Kettering: Adventures in Drupal 8Memorial Sloan Kettering: Adventures in Drupal 8
Memorial Sloan Kettering: Adventures in Drupal 8
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
Redhat.com: An Architectural Case Study
Redhat.com: An Architectural Case StudyRedhat.com: An Architectural Case Study
Redhat.com: An Architectural Case Study
 
Mozilla webmaker
Mozilla webmakerMozilla webmaker
Mozilla webmaker
 
SXSW Interactive 2012 (According to Chelsey)
SXSW Interactive 2012 (According to Chelsey)SXSW Interactive 2012 (According to Chelsey)
SXSW Interactive 2012 (According to Chelsey)
 
Mozcafe, Hyderabad, India, December, 2012
Mozcafe, Hyderabad, India, December, 2012Mozcafe, Hyderabad, India, December, 2012
Mozcafe, Hyderabad, India, December, 2012
 
Real World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptReal World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScript
 
Google docs
Google docsGoogle docs
Google docs
 
2018 03-09 bruce lee driven development - confoo
2018 03-09 bruce lee driven development - confoo2018 03-09 bruce lee driven development - confoo
2018 03-09 bruce lee driven development - confoo
 
The New Design Workflow
The New Design WorkflowThe New Design Workflow
The New Design Workflow
 
HTML5shim
HTML5shimHTML5shim
HTML5shim
 
The Final Frontier
The Final FrontierThe Final Frontier
The Final Frontier
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
Remix
RemixRemix
Remix
 
Google Drive & Google Docs: A Blended Learning Workshop
Google Drive & Google Docs:  A Blended Learning WorkshopGoogle Drive & Google Docs:  A Blended Learning Workshop
Google Drive & Google Docs: A Blended Learning Workshop
 
Etec697
Etec697Etec697
Etec697
 
Google Docs Presentation
Google Docs PresentationGoogle Docs Presentation
Google Docs Presentation
 

Similar to Web app with j query & javascript (5:4)

Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Thinkful
 
J query presentation
J query presentationJ query presentation
J query presentation
akanksha17
 
J query presentation
J query presentationJ query presentation
J query presentation
sawarkar17
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin
 

Similar to Web app with j query & javascript (5:4) (20)

Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
 
Javascript libraries
Javascript librariesJavascript libraries
Javascript libraries
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
J query presentation
J query presentationJ query presentation
J query presentation
 
J query presentation
J query presentationJ query presentation
J query presentation
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
Getting the-native-feel
Getting the-native-feelGetting the-native-feel
Getting the-native-feel
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
JQuery
JQueryJQuery
JQuery
 
JQuery
JQueryJQuery
JQuery
 
Jquery
JqueryJquery
Jquery
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 
SummerTerm_PPT.pptx
SummerTerm_PPT.pptxSummerTerm_PPT.pptx
SummerTerm_PPT.pptx
 
Web works hol
Web works holWeb works hol
Web works hol
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 

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

SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
Peter Brusilovsky
 
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lessonQUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
httgc7rh9c
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
EADTU
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
CaitlinCummins3
 

Recently uploaded (20)

AIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptAIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.ppt
 
e-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopale-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopal
 
How to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxHow to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptx
 
Play hard learn harder: The Serious Business of Play
Play hard learn harder:  The Serious Business of PlayPlay hard learn harder:  The Serious Business of Play
Play hard learn harder: The Serious Business of Play
 
Details on CBSE Compartment Exam.pptx1111
Details on CBSE Compartment Exam.pptx1111Details on CBSE Compartment Exam.pptx1111
Details on CBSE Compartment Exam.pptx1111
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 
OS-operating systems- ch05 (CPU Scheduling) ...
OS-operating systems- ch05 (CPU Scheduling) ...OS-operating systems- ch05 (CPU Scheduling) ...
OS-operating systems- ch05 (CPU Scheduling) ...
 
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lessonQUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
QUATER-1-PE-HEALTH-LC2- this is just a sample of unpacked lesson
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
 
What is 3 Way Matching Process in Odoo 17.pptx
What is 3 Way Matching Process in Odoo 17.pptxWhat is 3 Way Matching Process in Odoo 17.pptx
What is 3 Way Matching Process in Odoo 17.pptx
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
Observing-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxObserving-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptx
 
dusjagr & nano talk on open tools for agriculture research and learning
dusjagr & nano talk on open tools for agriculture research and learningdusjagr & nano talk on open tools for agriculture research and learning
dusjagr & nano talk on open tools for agriculture research and learning
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Graduate Outcomes Presentation Slides - English (v3).pptx
Graduate Outcomes Presentation Slides - English (v3).pptxGraduate Outcomes Presentation Slides - English (v3).pptx
Graduate Outcomes Presentation Slides - English (v3).pptx
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17
 
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...
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
PUBLIC FINANCE AND TAXATION COURSE-1-4.pdf
PUBLIC FINANCE AND TAXATION COURSE-1-4.pdfPUBLIC FINANCE AND TAXATION COURSE-1-4.pdf
PUBLIC FINANCE AND TAXATION COURSE-1-4.pdf
 
Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17
 

Web app with j query & javascript (5:4)

  • 1. Build a Webapp with Javascript and jQuery May 2017 http://bit.ly/tf-jquery
  • 2. About me • Jasjit Singh • Self-taught developer • Worked in finance & tech • Co-Founder Hotspot • Thinkful General Manager
  • 3. My lovely assistant • Connor Ericson • Current Thinkful student
  • 4. About us Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
  • 5. Goals for tonight • Overview of Javascript and it’s role in the web • Use Javascript and jQuery to build a web app • Next steps
  • 7. This makes it a good place to start • Has large community of developers, libraries and frameworks • Lots of job opportunities • Also the syntax is easier to understand for first-time developers
  • 8. How the web works Type a URL from a client (e.g. google.com) Browser communicates with DNS server to find IP address Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website
  • 9. Clients / Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manage what app does
  • 10. Are we learning frontend or backend? 100% of client-side web development is in Javascript. You can also use Javascript to write server-side code thanks to Node.js. So technically both!
  • 11. What is jQuery? • jQuery solves cross-browser issues with Javascript • Javascript not designed for UI features, jQuery is • At least 50% of all websites (in 2012) used jQuery • jQuery is written in Javascript
  • 12. A Quick Example Changing background color of a “body” element. With jQuery you’ll use a “$” before your line of code Javascript document.body.style.background = “red” jQuery $(body).css(‘background’, ‘red’)
  • 13. Common uses of jQuery • Animations • UI interaction (i.e. change in appearance when user hovers over a button) • Form handling • Loading data without a page refresh (Ajax)
  • 14. jQuery setup Import into your project via CDN
  • 15. jQuery: Some theory • DOM traversal • DOM manipulation • Events
  • 16. What is a DOM? The DOM (Document Object Model) is the browser's representation of the HTML content of a page. JavaScript interacts with the DOM
  • 17. “Grabbing” an element Example: https://jsbin.com/birokiwero/
  • 18. “Grabbing” an element First, select the element you’re looking to interact with • Select using element type: $(“p”) • Select using class: $(“.class”) • Select using id’s: $(“#id”) Full list here: https://api.jquery.com/category/selectors/
  • 19. DOM traversal First, select the element you’re looking to interact with. Elements can have siblings, parents, and children •$(“.shopping-list”).parent(); •$(“.shopping-list”).find(“li”);
  • 20. DOM manipulation Once you’ve targeted the correct element, you then want to create some effect •.addClass() adds a CSS class to selected elements •.after() insert content after selected content •.val() gets the value of the first matched element (typically a form), or sets the value for that element
  • 21. Quick example Example 2: https://jsbin.com/finayaf
  • 22. Events Events let us create responses to user behavior. When we add an event listener we specify the event to listen for and write a “callback function” that runs when the event occurs Example: https://jsbin.com/ciqade/edit
  • 23. Special note: this • this refers to the element targeted with an event. Often used to refer to a button that was clicked • Note that this can have other meanings, but that’s beyond scope of tonight’s discussion • Example: https://jsbin.com/zufere/2/edit
  • 24. Event delegation • Event delegation allows us to attach a single event listener to a parent element that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. • Example 1: https://jsbin.com/geheji/3/edit • Example 2: https://jsbin.com/lecome/2/edit
  • 25. Event Listener Drill #1 • Write jQuery code such that when a user clicks on one of the thumbnail images, that image is displayed in the full size image container at the top (no need to change HTML or CSS) • Code here: https://jsbin.com/beyefib/1/edit
  • 26. Drill Walkthrough Start by breaking problem down into achievable steps • Step 1: ? • Step 2: ? • Step 3: ?
  • 27. Drill Walkthrough Start by breaking problem down into achievable steps • Step 1: Add an event listener such that when a thumbnail is clicked, a callback function runs • Step 2: Get the URL for the image that was clicked • Step 3: Set the URL for the top image
  • 29. Event Listener Drill #2 • Use event listeners to detect when users click on a lightbulb. When that happens, that bulb should turn on (use the CSS class .bulb-on), and any other bulb that is on should turn off. No need to change HTML CSS. • Code here: https://jsbin.com/moyasum/1/edit
  • 30. Drill #2 Walkthrough •Step 1: Add an event listener such that when a lightbulb is clicked, a callback function is run •Step 2: Remove the relevant CSS class for all lightbulbs •Step 3: Add the relevant CSS class for the clicked lightbulb Hint: Not sure how to remove a CSS class? Google “jquery remove CSS class”
  • 31. Take Home Challenge: Shopping List App Create an application that allows users to add, check, uncheck, and remove items from a shopping list •https://github.com/Thinkful-Ed/shopping-list •Live: https://thinkful-ed.github.io/shopping-list-solution/
  • 32. Learning to learn • Google is your friend! • Practice at the edge of your abilities • Ignore the hot new thing. Instead go deep with one technology
  • 33. 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 •Our incentives are aligned with our students
  • 34. Our Program You’ll learn concepts, practice with drills, and build capstone projects — all guided by a personal mentor
  • 35. Web Development Syllabus • Frontend Development (HTML, CSS, Javascript) • Backend Development (Node.js) • Frontend Frameworks (React.js) • Electives (Python, Ruby, Swift, Angular, UX) • Computer Science Fundamentals • Technical interviews + Career prep
  • 36. Our Mentors Mentors have, on average, 10+ years of experience
  • 37. Our Results Job Titles after GraduationMonths until Employed
  • 38. Special Introductory Offer • Two-week program, includes six mentor sessions for $50 • Starts with HTML/CSS/Javascript • Option to continue into full web development bootcamp • Talk to me (or email me) if you’re interested