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

Embora a maior parte do núcleo do Django seja escrito em Python, alguns apps como o `admin` e `gis` contém código JavaScript.

Por favor siga esses padrões de código quando estiver escrevendo código em JavaScript para inclusão no Django.

## Estilo de código

- Por favor adapte-se ao estilo de identação ditado no arquivo `.editorconfig`. Nós recomendamos usar o editor de textos com suporte a [EditorConfig](https://editorconfig.org/) para evitar problemas com identação e espaços em branco. A maioria dos arquivos JavaScript usam 4 espaços para identação, mas existem algumas exceções.
- Quando estiver nomeando variáveis, use `camelCase` ao invés de `underscore_case`. Arquivos JavaScript diferentes algumas vezes usam estilos de código diferentes. Por favor tente se adequar aos padrões de estilo de cada arquivo.
- Use the [ESLint](https://eslint.org/) code linter to check your code for bugs and style errors.
  ESLint will be run when you run the JavaScript tests. We also recommended
  installing a ESLint plugin in your text editor.
- Where possible, write code that will work even if the page structure is later
  changed with JavaScript. For instance, when binding a click handler, use
  `$('body').on('click', selector, func)` instead of
  `$(selector).click(func)`. This makes it easier for projects to extend
  Django’s default behavior with JavaScript.

## Patches JavaScript

O admin do Django usa o framework jQuery para aumentar as capacidades da interface de administração. Além disso, existe uma ênfase na performance do JavaScript do admin e em minimizar o tamanho de arquivos de media do admin. Servir versões comprimidas ou “minificadas” dos arquivos JavaScript é considerado uma boa prática nesse quesito.

Por isso, patches para arquivos JavaScript devem incluir tanto código original para futuro desenvolvimento (e.g. `foo.js`), quanto uma versão comprimida para uso em produção (e.g. `foo.min.js`). Quaisquer links para o arquivo no projeto devem apontar para a versão comprimida.

### Comprimindo JavaScript

Para simplificar o processo de fornecimento de código JavaScript otimizado, O Django inclui um script Python extremamente útil que deve ser utilizado na criação da versão “minificada”. Para executá-lo:

```console
$ python django/contrib/admin/bin/compress.py
```

*Windows*

```doscon
...\> 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 will be installed automatically by `npm`. The
Closure Compiler library requires [Java](https://www.java.com) 7 or higher.

Por favor não se esqueça de rodar o `compress.py` e incluir o `diff` dos scripts minificados  quando estiver enviando os seus patches para o JavaScript do Django.

## Testes JavaScript

Os testes para o JavaScript do Django podem ser rodados em um browser ou diretamente da linha de comando. Os testes estão localizados no diretório `js_tests`.

### Escrevendo testes

Os testes em JavaScript do Django utilizam [QUnit](https://qunitjs.com/). Segue um exemplo de teste de um módulo.

```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);
});
```

Please consult the QUnit documentation for information on the types of
[assertions supported by QUnit](https://api.qunitjs.com/assert/).

### Rodando testes

Os testes JavaScript pode ser executados de um browser ou diretamente da linha de comando.

#### Testando a partir de um navegador web

Para executar os testes através de um browser, abra o arquivo `js_tests/tests.html` dentro do seu browser.

Para medir a cobertura de código quando estiver executando os testes, você precisará visualizar o arquivo através de um servidor HTTP. Para ver a cobertura de código:

- Execute `python -m http.server` from the root directory (not from inside
  `js_tests`).
- Acesse o endereço [http://localhost:8000/js\_tests/tests.html](http://localhost:8000/js_tests/tests.html) no seu browser.

#### Testando a partir da linha de comando

Para executar os testes da linha de comando, você precisará ter o [Node.js](https://nodejs.org/) instalado.

After installing `Node.js`, install the JavaScript test dependencies by
running the following from the root of your Django checkout:

```console
$ npm install
```

*Windows*

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

E então rode os testes com:

```console
$ npm test
```

*Windows*

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