Theming
Topic

JavaScript

JavaScript (JS) is an interpreted programming language that is widely used on the web to control web page behavior and interactivity. Drupal core has several JavaScript libraries included, and many websites today use JavaScript in some capacity to improve the website experience.

Example tasks

  • Learn how to use JavaScript to provide client side animation and functionality
  • Understand how to incorporate a third party JavaScript library into a Drupal site
  • Learn about the JavaScript libraries included in Drupal

Confidence

While JavaScript frameworks and utilities are released at a rapid pace, JavaScript itself is a foundational technology. Drupal’s interface for working with JavaScript asset libraries and the API provided by Drupal for working with JavaScript are unlikely to change substantially in the near future.

Drupalize.Me resources

Theming

Get Started Using React and Drupal Together

Course
Theming, Module Development
Drupal 8, 9, and 10
14 tutorials
Introduction to React and Drupal Free
React Basics
Decoupled vs. Progressively Decoupled
Connect React to a Drupal Theme or Module Free
Create a React Component
Add Webpack and React Fast Refresh to a Drupal Theme
Retrieve Data from an API with React
Use React to List Content from Drupal
Create, Update, and Delete Drupal Content with JavaScript
Build an Interface to Edit Nodes with React
Create a Fully Decoupled React Application Free
Use create-react-app to Start a Decoupled React Application
Make API Requests with OAuth
Use Fetch and OAuth to Make Authenticated Requests
Theming

JavaScript in Drupal

Topic
Theming, Module Development
Drupal 7, 8, 9, and 10
More information

JavaScript files are included by a module or a theme by creating an asset library. Using this asset library system you can selectively choose which files to load, overwrite existing files, or customize them to suit your needs.

Theming

Overview: JavaScript in Drupal

Theming
Drupal 8, 9, 10, and 11
More information

JavaScript is used and loaded in special ways within a Drupal site. JavaScript is loaded via asset libraries and Drupal core provides a bunch of different JavaScript libraries that you can load and use in your module or theme. This tutorial provides a brief orientation to some of the JavaScript included in core.

In this tutorial we'll:

  • Preview the JavaScript ecosystem in Drupal
  • Find pointers to tutorials where you can learn more about adding JavaScript to a theme or module
  • Learn about examples of JavaScript in Drupal core that are useful to review for learning purposes

By the end of this tutorial you should have a good overview of how JavaScript is used throughout Drupal core.

Guides

Not sure where to start? Our guides provide useful learning tracks for all skill levels.

Navigate guides

External resources

  • The Modern JavaScript Tutorial (javascript.info/)
    • How it's done now. From the basics to advanced topics with simple, but detailed explanations.
  • MDN JavaScript (developer.mozilla.org)
    • Tutorials for beginners through advanced, along with a wealth of reference materials.
  • Learn JavaScript (codecademy.com)
    • Interactive tutorial site where you can code in the browser as you work through the lessons.
  • HTMLDog JavaScript Tutorials (htmldog.com)
    • A whole set of tutorials for beginner through advanced. They have a full suite of HTML and CSS tutorials as well.
  • Superhero.JS (superherojs.com)
    • A best practice collection of articles, videos, and presentations to help you learn JavaScript.
  • JavaScript for PHP Geeks (symfonycasts.com)
    • A series of video tutorials on JavaScript, specifically with a PHP developer audience in mind. From our friends at SymfonyCasts.

jQuery

JSX

Learn more about JSX: