JavaScript and the DOM
Lesson 1 of 1
  1. 1
    At the beginning of this course we mentioned that JavaScript is the most widely used language on the web. So how can we use JavaScript on a website? So far, we’ve only used JavaScript in isolation…
  2. 2
    We can link a JavaScript file to HTML by including it as the src of a tag inside of an HTML file, like this: This line of code will link the file located at js/main.js. You can find thi…
  3. 3
    The Document Object Model, commonly referred to as the DOM‘, is the term for elements in an HTML file. Elements are any HTML code denoted by HTML tags, like , , or . Let’s use JavaScript t…
  4. 4
    We’ve just covered how to select HTML elements using the syntax: document.getElementsByClassName. This is verbose and clunky, however. If we were to select a lot of elements this way, our code woul…
  5. 5
    With plain JavaScript we selected an HTML element with this code: document.getElementsByClassName(‘skillset’); With jQuery we can select the same element with: $(‘.skillset’); 1. We can wrap …
  6. 6
    Now that we can select an element with jQuery, we can use built-in jQuery functions to modify it. From here on, we will start building features into our skills website. First off, it would be nice…
  7. 7
    In order to fade in the skillset element, we can use a the jQuery function named fadeIn. True to its name, fadeIn will fade an element in over a period of time in milliseconds. It looks like this:…
  8. 8
    The next feature we’d like to build is making the ‘Recent Projects’ clickable. When clicked, the button should show the individual projects, and when clicked again, it should hide the projects. In…
  9. 9
    To make our projects visible when the ‘Recent Projects’ button is clicked, jQuery provides a function named show, which is the opposite of hide. To show an element, the syntax looks as such: $(‘….
  10. 10
    When we click on a ‘Recent Projects’ button, the projects show. Next, let’s hide the projects if we click the ‘Recent Projects’ button again. jQuery provides a function named toggle that is helpfu…
  11. 11
    Let’s add one more feature: when we click the ‘Recent Projects’ button the background color and text color should change. We can toggle a CSS class with a jQuery function named toggleClass. The sy…
  12. 12
    In the last exercise, we were toggling every ‘Recent Projects’ button instead of only the one we clicked on. We can select the specific element we clicked on with the jQuery selector $(this). The…
  13. 13
    In order to toggle the projects in each section, we will need to use $(this) to select the button we clicked on. The issue is that $(this) refers to the projects-button in our current code, and not…
  14. 14
    Since we have a few areas to click on, it may be helpful to show users which sections they have viewed by changing the text inside the ‘Recent Projects’ buttons. When a user clicks on a button, we…
  15. 15
    The last feature we’d like to add is an aesthetic one. Right now when we click the ‘Recent Projects’ buttons, the projects appear instantly. Let’s instead make the projects slide onto the page whe…
  16. 16
    Nice work! jQuery is a complete library, and we’ve only covered the basics. If you’re interested in adding animations to websites and creating more dynamic elements, take our jQuery course here . …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo