Guide

Integrate JavaScript with Drupal for Drupal 8, 9, 10, and 11

Integrate JavaScript with Drupal

Content in this guide

Integrate JavaScript with Drupal

Learn how to load JavaScript on a page:

Asset Libraries in Drupal

What will you learn

  • How JavaScript is loaded and used within Drupal
  • Using Drupal.behaviors
  • Using Drupal.theme for HTML markup
  • Passing dynamic server-side settings to JavaScript for use in client-side scripts
  • Drupal's JavaScript coding standards and ESLint

Overview

Using JavaScript in Drupal allows you to add interactive and dynamic functionalities to your site, enhancing user engagement and allowing for richer client-side experiences.

Develop with JavaScript in Drupal

Integrate JavaScript in Drupal modules or themes

This course covers the basics of loading JavaScript using asset libraries, the use of the Drupal.behaviors API to ensure proper execution of scripts, and best practices for writing maintainable and standards-compliant JavaScript. Additionally, learners will explore advanced topics such as using drupalSettings for server-side configurations, leveraging Modernizr for feature detection, and ensuring code quality with ESLint.

Theming

Using JavaScript in Drupal

Course
Theming, Module Development
Drupal 8, 9, 10, and 11
10 tutorials
Overview: JavaScript in Drupal
Load JavaScript in Drupal with Drupal.behaviors
Wrap Your Custom JavaScript in a Closure
Use Server-Side Settings with drupalSettings
String Manipulation in JavaScript
Use Drupal.theme for HTML Markup in JavaScript
Standardize Your JavaScript with ESLint
Modernizr.js in a Theme or Module
Underscore.js in a Theme or Module
Backbone.js in a Theme or Module

Other guides

We have guides on many Drupal skills and topics. See all our guides.

Module Development
Use web services modules like JSON:API to build an API for your decoupled Drupal site.

Decoupled Headless Drupal

Go to Decoupled Headless Drupal
Theming
Learn to control the look, feel, and markup of a Drupal site in a theme.

Frontend Theming

Go to Frontend Theming
Module Development
Learn to output themeable and translatable content in modules and themes.

Output and Format Data in Code

Go to Output and Format Data in Code
“Drupalize.Me has trained thousands of Drupalistas. Their video lessons help to address our constant need for more Drupal talent. Drupal needs training like this to support its growth.”
Dries Buytaert
Drupal Founder and Project Lead
Photo of Dries Buytaert
“They’re easy to understand. They’re thorough. They’re funny. They’re always entertaining, and it makes it easy to learn parts of Drupal and how you can integrate it into your workflow and learn more and have a good time doing it.”
Roger Carr
Drupalize.Me Member
Photo of Roger Carr
“The mission of the Drupal Association is to foster and support the Drupal software project, the community, and its growth. Drupal education, like that provided by Drupalize.Me, is important to this mission.”
Megan Sanicki
Former Exec. Director, Drupal Assoc.
Photo of Megan Sanicki

FAQs

Am I required to sign a contract?
No. You can purchase a membership and/or cancel any time. Drupalize.Me is a pay-as-you-go service.

Can I preview tutorials before joining?
Yes! Just navigate to our tutorial library. Our free tutorials are labeled with a green "FREE" tag.

Can I watch videos on my mobile device?
Yes! Drupalize.Me is a responsive site and can be accessed in the browser on any mobile device. More FAQs