Building Web Apps with JavaScript and jQuery

Build a Web App with JavaScript and jQuery 2017 DC
Tech Talent Pipeline http://bit.ly/thinkfulDC

© 2017 DC Tech Talent Pipeline. All Rights Reserved. 2
DC About me TJ Stalcup Hobby since 1996, Professional since 2002 Teaching since 2002 Mentor for Thinkful since March 2015 API Evangelist / Sr. Developer for WealthEngine in Bethesda

DC About you Why are you here? Do you want to work better with developers? Working as a developer? Want to become a developer? Have an idea that you want to build? Programming experience? First lines of JavaScript will be written tonight? Been self teaching for 1-6 months? Been at this for 6+ months

DC Today’s goals Overview of JavaScript and its role in the web Use JavaScript and jQuery to build an interactive web application Speciﬁcally, we’ll build a shopping list app Focus on building, with just enough theory to support

DC Not goals Intro to HTML/CSS Exhaustive lesson on jQuery JavaScript fundamentals Advanced topics

DC Ground rules There will be opportunities for collaboration tonight: Treat everyone with respect Be mindful of differences in experience and skill level Help build a classroom where everyone learns

DC Why learn JavaScript Most commonly used language on GitHub Details here: http://githut.info/

DC 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 (client) receives those files and renders them as a website

DC How that relates to what we’re doing 100% of client-side code is JavaScript. You can also use JavaScript to write server-side code thanks to Node.js. Great for beginners

DC What about jQuery? Every browser has its own interpreter for JavaScript, meaning you have to consider cross-browser issues jQuery helps to solve cross-browser problems JavaScript was not speciﬁcally designed for interface development jQuery simpliﬁes commonly used UI features jQuery is written in JavaScript

DC jQuery Example function changeBackground(color) { document.body.style.background = color; } onload=”changeBackground (‘red’);” $(‘body’).css (‘background’, ‘#ccc’); JavaScript jQuery Want to change the background color of the body tag?

DC Common uses for jQuery Animations UI interaction (i.e. change in appearance when user hovers over a button) Form handling Loading data without a page refresh (Ajax)

DC jQuery: Theory DOM Traversal - ﬁnd, parent, child DOM Manipulation - text, html, append Event Listeners - click, submit, hover Challenge: Shopping list

DC jQuery: Setup Including jQuery in your project via CDN Referencing jQuery: $

DC DOM Traversal and Manipulation The DOM (Document Object Model) The browser's representation of the HTML content of a page. JavaScript interacts with the DOM

DC DOM Traversal and Manipulation Example: https://jsbin.com/birokiwero/

DC DOM Traversal First, select the element you’re looking to interact with $(“.class”) $(“#id”) $(“p”) Select using element type, class, and ID names to start Full list here: https://api.jquery.com/category/ selectors/

DC DOM Traversal Often you’ll want to interact with something related to an element that you select Elements can have siblings, parents, and children .parent() $(“.shopping-list”).ﬁnd(“li”);

DC 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 ﬁrst matched element (typically a form), or sets the value for that element

DC DOM Traversal and Manipulation Example 2: https://jsbin.com/ﬁnayaf

DC Events Events let us create responses to user behavior Adding event listeners: Specify the event to listen for Write a callback function that runs when the event occurs Example: https://jsbin.com/ciqade/edit

DC 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

DC Event Delegation Event delegation allows us to attach a single event listener to a parent element that will ﬁre 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

DC 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/beyeﬁb/1/edit

DC Event Listener Drills Start by breaking problem down into achievable steps Step 1: ? Step 2: ? Step 3: ?

DC Event Listener Drills 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

DC Event Listener Drill #1 Solution

DC 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

DC Event Listener Drills Steps: 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”

DC Event Listener Drill #2 Solution

DC 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 version: https://thinkful-ed.github.io/shopping- list-solution/

DC Setup (1 of 5) Text editor If you don’t already have one, download Sublime Text: https://www.sublimetext.com/3 Download ZIP of code

DC Setup (2 of 5) Open Sublime Text Go to “Project” -> “Add Folder to Project”

DC Setup (3 of 5) Open the HTML file in your browser Find it in “Finder” (Mac) / “Explorer” (PC) and double-click index.html file Right-click the folder in sublime text sidebar and create a new file Name it app.js

DC Setup (4 of 5) Open the HTML file in your browser Find it in “Finder” (Mac) / “Explorer” (PC) and double-click index.html file Right-click the folder in sublime text sidebar and create a new file. Name it àpp.js`

DC Setup (5 of 5!) Add jQuery to the `head` section of the HTML <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.1.0/jquery.min.js"></script> Link your JavaScript ﬁle to your HTML <script src="app.js"></script> Check that everything is working Open console and type “jQuery”

DC Break down the problem into steps When “add item” is clicked, the value in the text box is retrieved, and an item is added to the end of the list with that text as the item When the “check” button is clicked, the name of the clicked item gets struck through When “delete” is clicked, the item disappears

DC Break down the problem into steps Code for add item: http://jsbin.com/bococad/edit

DC What next? Finish shopping list Next challenge: build a quiz app Structured learning Free/Cheap online resources Night classes at community college or universities Coding bootcamps (full-time or part-time)

© 2017 Thinkful. All Rights Reserved. 43 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) • $50 Special Offer: • https://www.thinkful.com/code/dcprep-50

Thank you! Email me with questions or suggestions: [email protected] [email protected]
2017

Building Web Apps with JavaScript and jQuery

Building Web Apps with JavaScript and jQuery

More Decks by Thinkful

Other Decks in Technology

Featured

Transcript