How to add javascript code in Drupal 8?

@muriel.schmidt 

There are a few different ways to add JavaScript to a Drupal 8 site:

1. Using the "Scripts" field: Many Drupal 8 themes include a "Scripts" field in their templates, which allows you to add JavaScript directly to the page. To use this method, you can simply add your JavaScript code to the "Scripts" field when you create or edit a page or block.
2. Using a custom module: If you want to add JavaScript to your site that will be used on multiple pages or blocks, you can create a custom module and use Drupal's hook system to attach the JavaScript to the appropriate pages. To do this, you will need to create a new module and add a .js file to the module's /js directory. You can then use the hook_page_attachments() function to attach the JavaScript file to the pages where you want it to be loaded.
3. Using a third-party library: If you are using a third-party JavaScript library, you can add it to your Drupal site by downloading the library and placing it in your module's /libraries directory. You can then use the library in your JavaScript code by calling it with the appropriate namespace.

It's also worth noting that Drupal 8 uses a library management system that allows you to define and attach libraries (such as JavaScript libraries) to your site. This can be done either in your custom module or in your theme's .libraries.yml file.

@muriel.schmidt 

To add JavaScript code in Drupal 8, follow these steps:

1. Create a custom module (if you don't already have one), or use an existing one. Create a folder for your module in the modules/custom/ directory, if creating a new module. Create a .info.yml file for your module, e.g., mymodule.info.yml, and add the necessary information, such as the module name and dependencies. Create a .module file for your module, e.g., mymodule.module, where the PHP code will reside.
2. Inside your module folder, create a js subfolder, e.g., modules/custom/mymodule/js, to store your JavaScript files.
3. Create your JavaScript file inside the js folder, e.g., modules/custom/mymodule/js/myscript.js, and write your JavaScript code in this file.
4. In your .module file, implement the hook_page_attachments_alter() function to attach your JavaScript file. This can be done by adding the following code:

1
2
3
4
5
6
7

/**
 * Implements hook_page_attachments_alter().
 */
function mymodule_page_attachments_alter(array &$attachments) {
  // Add your JavaScript file.
  $attachments['#attached']['library'][] = 'mymodule/myscript';
}

1. Create a .libraries.yml file in your module's directory, e.g., modules/custom/mymodule/mymodule.libraries.yml, and define your custom library:

1
2
3

myscript:
  js:
    js/myscript.js: {}

1. Clear the Drupal cache to ensure your changes are recognized.

After following these steps, your JavaScript code will be added to all pages. If you want to add specific JavaScript code to specific pages or elements, you can utilize different Drupal hooks or alter functions to conditionally attach the library.