Download as PDF, PPTX
Web app with j query & javascript (5:4)
- 1. Build a Webappwith Javascript and jQuery May 2017 http://bit.ly/tf-jquery
- 2. About me • JasjitSingh • 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 preparesstudents 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
- 6.
- 7. This makes ita 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 webworks 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 learningfrontend 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 Changingbackground 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 ofjQuery • 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 intoyour project via CDN
- 15. jQuery: Some theory •DOM traversal • DOM manipulation • Events
- 16. What is aDOM? 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, selectthe 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’vetargeted 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 uscreate 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 • Eventdelegation 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 bybreaking problem down into achievable steps • Step 1: ? • Step 2: ? • Step 3: ?
- 27. Drill Walkthrough Start bybreaking 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
- 28.
- 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 •Step1: 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 learnconcepts, 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 Titlesafter 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
- 39. October 2015 Questions? jasjit@thinkful.com schedule acall through thinkful.com