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 Specifically, we’ll build a shopping list app Focus on building, with just enough theory to support
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 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 specifically designed for interface development jQuery simplifies 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 - find, parent, child DOM Manipulation - text, html, append Event Listeners - click, submit, hover Challenge: Shopping list
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 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”).find(“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 first matched element (typically a form), or sets the value for that element
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 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
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/beyefib/1/edit
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 #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 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 (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 `app.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 file 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 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)
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
thinkful
masayaaoyama
nek0128
matsuji
uhyo
zozotech
teru0x1
magicpod
thkt
plaidtech
vtryo
ts020
miyake
tessaabrams
thoeni
honnibal
michielstock
.jpg){kind=avatar}
cargoodrich
lemiorhan
aleyda
techseoconnect
cassininazir
jnunemaker
trishagee
auna
![Thank you! Email me with questions or suggestions: [email protected] [email protected]](https://files.speakerdeck.com/presentations/17c6722a84fd4b68b235a00c0074bb62/slide_44.jpg){kind=link}