Using JQuery to allow JavaScript to interact with your HTML


Slides

Today's Lecture


Additional Info


In Class Exercises (ICEs)

Part 1: Adding jQuery to a file

  1. Start by opening an HTML file that contains some JavaScript from a prior lecture.
  2. Download a local copy of jQuery and store that .JS file in the same directory as your .HTML file
  3. Within the HTML file, add the code needed to load jQuery from EITHER the Google CDN OR your local backup.
  4. In order to check that your code works, add the following into the head of your html page:

    <script>
     
    $(document).ready(function() {

          // your JavaScript/jQuery code goes here

          alert('Gadzooks! It  worked!');

      });
    </script>

  5. You can check if there are errors using Chrome's developer tools. 
    1. You should first show the developer tools.  I'm going to link the 'JavaScript Console' section on this page to explain it, but be aware that Chrome changes frequently and this page may (or may not) be good.
    2. Within there, click on the 'Console' tab, and see if there are any error messages.
      1. For example, if you typed in the CDN address wrong you'll get this 404 error:
      2. If you type the CDN URL correctly then the browser will never attempt to load the local copy, so remove (or comment out) the line that loads the CDN copy and try it again.
      3. If you remove the CDN-loading line and don't have the jquery-3.2.1.js file in the right spot, you might get an error like this:

Part 2: jQuery: Using the ID selector to change the text of an element

  1. Building on the file that you created for the previous exercise, make sure that you can add several more paragraph elements to the page and that you can change them all (using jQuery) when the page is loaded.
  2. Once you've got that done experiment some - try putting other elements on the page (H1, H2, UL, OL, etc), and try changing those, too.

Part 3: jQuery: Responding to a button being clicked

  1. Building on the file that you created for the previous exercise, add a button to the page.  When the button is clicked make sure that you change a paragraph (or other element) so that you can see the effects visually.

Part 4: jQuery: When a button is clicked, copy text from the textbox into a paragraph

  1. Start over using a fresh copy of a JavaScript-enabled .HTML page.  Add whatever HTML and JavaScript that you need to so that when the user clicks on the button the page will take whatever the user writes into a textbox and then displays
    WASSSSSUUUUUUP <text>
     on the page (in a paragraph), where <text> in the above example should be replaced by whatever text the user typed into the textbox.