Posted 11 months ago. Visible to the public.

Working with the DOM [1.5d]

JavaScript code can access and manipulate the browser's DOM tree Archive . Using JavaScript we can add interactive behavior to our interfaces that would not 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 a HTTP request ("AJAX request")
  • 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 Archive 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:

Copy
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.

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Avatar
Henning Koch
Last edit:
6 months ago
by Michael Leimstädtner
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra Curriculum
This website uses short-lived cookies to improve usability.
Accept or learn more