---
title: "JavaScript"
version: 2.0
locale: pt-br
source: https://docs.djangoproject.com/pt-br/2.0/internals/contributing/writing-code/javascript/
canonical: https://djangodocs.dev/pt-br/2.0/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](http://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.
- Utilize o [JSHint](http://jshint.com/) code linter para verificar bugs e erros de estilo no seu código. JSHint irá rodar quando você executar os testes JavaScript. Nós também recomendamos instalar o JSHint no seu editor de textos.
- 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
$ pip install closure
$ python django/contrib/admin/bin/compress.py
```

Por trás das cortinas, `compress.py` é um front-end para o [Compilador Closure \`\_ do Google que é escrito em Java. A biblioteca do Compilador Closure não é distribuída com o Django, mas você pode instalá-la usando pip como feito acima. A biblioteca do Compilador Closure requer \`Java](https://developers.google.com/closure/compiler/) 7 ou versões maiores.

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() {
        var $ = django.jQuery;
        $('#qunit-fixture').append('<button class="button"></button>');
    }
});

QUnit.test('removeOnClick removes button on click', function(assert) {
    var $ = 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) {
    var $ = 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 de um browser

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 da linha de comando

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

Depois de instalar o Node.js, instale as dependências dos testes em JavaScript executando o comando seguinte do diretório raiz no qual o código fonte do Django foi baixado:

```console
$ npm install
```

E então rode os testes com:

```console
$ npm test
```