Project: jQuery Basics

Introduction

Now that you’ve gotten your hands dirty and learned some real jQuery, it’s time to apply it by generating an entire webpage using just Javascript and jQuery. The webpage will be a simple restaurant home page but the principle of using Javascript to dynamically (re)render the page should stick with you.

Assignment

  1. Set up a GitHub Repo for this project. Follow the instructions atop the Google Homepage project if you need help.
  2. Set up a blank HTML document with just the <html> and <body> tags to begin with plus a single div called <div id="content">. Also, remember to include the jQuery library in your document within the <head>.
  3. Go into the console (remember the developer tools at the bottom of your browser?) and manually use jQuery to add an image tag to the content div (just choose a random Internet image). Remember that you can use the up arrow in the console to access your previous command. Look at the jQuery docs for the .append() function for inspiration.
  4. Create a bare-bones home page for a restaurant. Include an image, headline, and some copy about how wonderful the restaurant is. It’s okay to hard-code these into the HTML for now just to see how they look on the page.
  5. Now remove those elements from the HTML (so leave only the <html>, <body>, and <div id="content"> tags) and instead create them by using Javascript only, e.g. by appending each new element to the div#content once the page is first loaded.
  6. Next, set up your restaurant site to use tabbed browsing to access the Contact and Menu pages. Look at #7 on this hongkiat post for visual inspiration. The key here is that each tab should NOT link to a different HTML page… it should instead trigger a Javascript function to wipe out the current page then create the desired page. It might be easiest to first create three separate HTML pages and then convert them into Javascript.
  7. Keep it simple! When you click the next tab, your Javascript should automatically remove the "Menu" elements and add in the "Home" elements.
  8. Push your project to GitHub and share the solution below.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

jQuery Forms

Introduction

Forms are the user’s window into your back end. You’ve learned a whole lot about them in previous lessons, but here we’ll focus on using jQuery to interact with your forms and in the next lesson we’ll look at actually submitting them asynchronously with AJAX.

You’ve already got all the tools you need to use Javascript to validate your user’s inputs, but you probably haven’t used them in this way before.

Learning Objectives

  • How do you select a particular form input with jQuery?
  • How do you select the currently active (focused) form input?
  • How do you activate the next form input?
  • How do you determine whether a checkbox or radio button is checked using jQuery?
  • How do you run validations on the user’s form input in real time?
  • Why is front-end form validation not sufficient to protect against malicious users?
  • How do you disable a form element?
  • How do you cause the erroneous form input to be highlighted and red?
  • How do you add an error message directly above the input field that’s wrong?
  • What is the jQuery Validate plugin and how do you include it in your project?

Study

  1. Read Smashing Magazine on Web Form Validation Best Practices and Tutorials to learn just about everything you need to know here.

  2. Browse the Documentation for the jQuery Validation Plugin to get you up and running with it, saving lots of time and effort.

  3. Read An approach to form validation using jQuery from Scratch to see this stuff in action.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

jQuery Basics

Introduction

jQuery is a library of commonly used javascript widgets and functions that has more or less taken the internet by storm. It’s written in javascript and it means that you don’t have to go through the pain of building a popup modal dialog box or a dropdown menu, for example, the long way. It also gives you the incredibly easy ability to select elements on the webpage ("DOM elements") so you can start modifying their properties, whether that’s hiding them, moving them, changing their contents… it’s all in your hands!

jQuery will let you take your javascript knowledge and start really diving into your webpages and messing with (ahem, improving) the elements.

jQuery, of course, provides a very easy-to-use model for manipulating the elements on your page. It also contains lots of helper functions and special libraries for doing things like building widgets or even mobile apps. You get to benefit from all the lazy programmers before you who build these tools to make their lives easier. Enjoy!

Learning Objectives

  • What is the DOM?
  • How can you interact with the DOM?
  • How can you add elements to the DOM?
  • How can you modify the contents of an element?
  • What is a selector?
  • What does the $ symbol mean?
  • Why is it often important to wait for the Document (DOM) to finish loading?
  • How can you select a particular element on the page?
  • How can you select only the <li> elements inside of <div> elements with class test-div?
  • How are selectors actually pretty similar to the way CSS operates?
  • What does a jQuery selector return?
  • How can you manipulate the values (e.g. html, width, height…) of a selected element or elements?
  • What does it mean that selected elements are "implicitly iterated over"? (Think if you used $("div") what would happen)
  • How can you create new elements?
  • How can you insert new elements into the DOM?
  • How can you chain jQuery selectors?
  • What happens to the elements you’ve already selected (e.g. with $("li")) if another qualifying element (e.g. a <li>gets added to the DOM later?
  • What does "traversing the DOM" mean?
  • How can you add CSS to a selected element?
  • How do you add or remove data attributes from an element?
  • What new iterators (including some familiar Ruby ones) does jQuery give you?
  • How would you add the class some-class to every <li> on the page?
  • How would you use #map to return an array listing the contents of a particular list?
  • Where can you look up any selectors you need?

Study

  1. Learn about jQuery by doing Code School’s try jQuery.
  2. Read through jQuery Fundamentals from jqfundamentals.com
  3. Browse Learning jQuery from jquery.com(see the "Chapters" below) to fill in any gaps you have and provide alternate explanations for things you’re not quite sure on.

Additional Resources

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.