152 Working with the DOM [1.5d]

Posted Over 2 years ago. Visible to the public.

JavaScript code can access and manipulate the browser's DOM tree Show archive.org snapshot . Using JavaScript we can add interactive behavior to our interfaces that would not be possible through declarative rules in HTML and CSS alone.

Goals

Know how to use the native DOM API to do the following:

  • Selecting all elements matching a given CSS selector
  • Selecting all descendants of a given element matching a given CSS selector
  • Registering event listeners
  • Changing an element's CSS classes
  • Changing an element's attributes
  • Making the same change to a list of elements, e.g. hiding them all

Resources

Exercises

Playing with the DOM

  • Visit https://makandracards.com/makandra
  • Open your developer tools' console.
  • Use JavaScript to locate all card elements.
  • Use Javascript to read the text content of the second card.
  • Use JavaScript to remove the first card.

Movie counter

In your MovieDB, in the movies list, add a button that says "Count movies".

Once the user clicks on that button, a piece of JavaScript will count the movies in the list above and replace the button text with the number of movies counted.

Tip

We want to avoid mixing HTML, JavaScript and CSS within the same file. Therefore, don't embed your JavaScript into your view. Instead, put your JavaScript code into a .js file that is loaded by your layout.

Note that if you load your JavaScript from your <head> the DOM may not be parsed yet. You will need to delay your JavaScript until the DOMContentLoaded Show archive.org snapshot event.

Highlighting rows

In your MovieDB, write a CSS class that highlights a row in a list of records, e.g. in the index action of the movies resource.

Write some JavaScript that automatically applies that CSS class when the user's mouse hovers over a row. When the mouse pointer exits the element box, the CSS class is removed automaticallly.

Note

In a real application we would achieve this effect with a simple CSS rule.

Organize your components

Your application will eventually have a lot of JavaScripts. Putting them all into a single, giant JavaScript file is not sustainable. Instead, you should have a single short .js file for each component or concern.

For instance, it could look like this:

app/
  assets/
    application.js
    application/
      components/
        count_items.js
        highlight_rows.js  

The component files are loaded from application.js.

Tip

Entrypoints are JavaScript files that can be loaded individually from your application layout. By default your Rails application has a single entrypoint application.js, which should import all other files.

A case for multiple entrypoints would be an application that has two areas with a distinct look and feel. For instance there is (1) a visually ambitious frontend for consumers and (2) an admin area that has tightly packed data grids. Both areas would not share any CSS or JavaScript, so we would have two separate entrypoints.

Henning Koch
Last edit
About 2 months ago
Michael Leimstädtner
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra Curriculum (2021-12-23 16:16)