---
title: "JavaScript"
version: 3.0
locale: fr
source: https://docs.djangoproject.com/fr/3.0/internals/contributing/writing-code/javascript/
canonical: https://djangodocs.dev/fr/3.0/internals/contributing/writing-code/javascript/
---
# JavaScript

Même si la majorité du code Django est en Python, les applications contribuées `admin` et `gis` contiennent du code JavaScript.

Veuillez respecter ces standards de codage lorsque vous écrivez du code JavaScript destiné à faire partie de Django.

## Style de code

- Veuillez respecter le style d’indentation défini dans le fichier `.editorconfig`. Nous recommandons d’utiliser un éditeur de texte avec prise en charge de [EditorConfig](https://editorconfig.org/) pour éviter des problèmes d’indentation et d’espace. La plupart des fichiers JavaScript utilisent 4 espaces pour l’indentation, mais il y a quelques exceptions.
- Lors du nommage des variables, utilisez la notation `camelCase` plutôt que la `séparation_par_soulignement`. Il peut arriver que certains fichiers JavaScript utilisent un style de code différent. Merci de vous conformer au style de code de chaque fichier.
- Utilisez le vérificateur de code [ESLint](https://eslint.org/) pour contrôler si votre code contient des bogues ou des erreurs de style. ESLint est lancé en même temps que les tests JavaScript. Nous recommandons également d’installer un greffon ESLint dans votre éditeur de texte.
- Lorsque c’est possible, écrivez du code qui fonctionnera même si la structure de la page est modifiée plus tard par du JavaScript. Par exemple, lors de l’inscription d’une fonction de clic, écrivez `$('body').on('click', sélecteur, fonction)` plutôt que `$(sélecteur).click(fonction)`. Cela simplifie l’extension du comportement par défaut de Django avec JavaScript par d’autres projets.

## Correctifs JavaScript

Django’s admin system leverages the jQuery framework to increase the
capabilities of the admin interface. In conjunction, there is an emphasis on
admin JavaScript performance and minimizing overall admin media file size.
Serving compressed or « minified » versions of JavaScript files is considered
best practice in this regard.

To that end, patches for JavaScript files should include both the original
code for future development (e.g. `foo.js`), and a compressed version for
production use (e.g. `foo.min.js`). Any links to the file in the codebase
should point to the compressed version.

### Compressing JavaScript

To simplify the process of providing optimized JavaScript code, Django
includes a handy Python script which should be used to create a « minified »
version. To run it:

```console
$ python -m pip install closure
$ python django/contrib/admin/bin/compress.py
```

*Windows*

```doscon
...\> py -m pip install closure
...\> py django\contrib\admin\bin\compress.py
```

Behind the scenes, `compress.py` is a front-end for Google’s
[Closure Compiler](https://developers.google.com/closure/compiler/) which is written in Java. The Closure Compiler library is
not bundled with Django, but you can install it using pip as done above. The
Closure Compiler library requires [Java](https://www.java.com) 7 or higher.

Please don’t forget to run `compress.py` and include the `diff` of the
minified scripts when submitting patches for Django’s JavaScript.

## Tests JavaScript

Les tests JavaScript de Django peuvent être lancés dans un navigateur ou à partir de la ligne de commande. Les tests sont situés dans un répertoire `js_tests` au premier niveau.

### Écriture de tests

Les tests JavaScript de Django utilisent [QUnit](https://qunitjs.com/). Voici un exemple de module de test :

```javascript
QUnit.module('magicTricks', {
    beforeEach: function() {
        const $ = django.jQuery;
        $('#qunit-fixture').append('<button class="button"></button>');
    }
});

QUnit.test('removeOnClick removes button on click', function(assert) {
    const $ = django.jQuery;
    removeOnClick('.button');
    assert.equal($('.button').length, 1);
    $('.button').click();
    assert.equal($('.button').length, 0);
});

QUnit.test('copyOnClick adds button on click', function(assert) {
    const $ = django.jQuery;
    copyOnClick('.button');
    assert.equal($('.button').length, 1);
    $('.button').click();
    assert.equal($('.button').length, 2);
});
```

Consultez la documentation de QUnit pour des informations sur les types d”[assertions prises en charge par QUnit](https://api.qunitjs.com/assert/).

### Lancement des tests

Les tests JavaScript peuvent être lancés à partir d’un navigateur Web ou de la ligne de commande.

#### Tests à partir d’un navigateur Web

Pour lancer les tests à partir d’un navigateur Web, ouvrez `js_tests/tests.html` dans votre navigateur.

Pour mesure la couverture de code lors de l’exécution des tests, vous devez afficher ce fichier par HTTP. Pour voir la couverture de code :

- Exécutez `python -m http.server` à partir du répertoire racine (pas depuis le répertoire `js_tests`).
- Ouvrez [http://localhost:8000/js\_tests/tests.html](http://localhost:8000/js_tests/tests.html) dans votre navigateur Web.

#### Tests à partir de la ligne de commande

Pour lancer les tests à partir de la ligne de commande, il est nécessaire que [Node.js](https://nodejs.org/) soit installé.

Après l’installation de `Node.js`, installez les dépendances de tests JavaScript en exécutant ce qui suit à partir de la racine du dépôt Django :

```console
$ npm install
```

*Windows*

```doscon
...\> npm install
```

Puis, lancez les tests avec :

```console
$ npm test
```

*Windows*

```doscon
...\> npm test
```