# Django 6.0.5 documentation

# JavaScript-kod

Medan det mesta av Django-kärnan är Python, innehåller Contrib-apparna `admin` och `gis` JavaScript-kod.

Följ dessa kodningsstandarder när du skriver JavaScript-kod för inkludering i Django.

## Kod för stil

- Följ den indragningsstil som anges i filen `.editorconfig`. Vi rekommenderar att du använder en textredigerare med stöd för EditorConfig för att undvika problem med indrag och blanksteg. De flesta JavaScript-filer använder 4 blanksteg för indragning, men det finns några undantag.

- När du namnger variabler, använd `camelCase` istället för `underscore_case`. Olika JavaScript-filer använder ibland en annan kodstil. Försök att följa kodstilen för varje fil.

- Använd ESLint code linter för att kontrollera din kod för buggar och stilfel. ESLint kommer att köras när du kör JavaScript-testerna. Vi rekommenderar också att du installerar ett ESLint-plugin i din textredigerare.

- Om möjligt, skriv kod som fungerar även om sidstrukturen senare ändras med JavaScript. Till exempel, när du binder en klickhanterare, använd `$('body').on('click', selector, func)` istället för `$(selector).click(func)`. Detta gör det enklare för projekt att utöka Djangos standardbeteende med JavaScript.

## JavaScript-uppdateringar

Djangos adminsystem utnyttjar jQuery-ramverket för att öka funktionerna i admingränssnittet. I samband med detta läggs tonvikten på JavaScript-prestanda för admin och minimering av den totala filstorleken för adminmedia.

## JavaScript-tester

Djangos JavaScript-tester kan köras i en webbläsare eller från kommandoraden. Testerna finns i en katalog på högsta nivån js_tests.

### Skriva tester

Djangos JavaScript-tester använder QUnit. Här är ett exempel på en testmodul:

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

Se dokumentationen för `QUnit` för information om vilka typer av assertions som stöds av QUnit.

### Genomföra tester

JavaScript-testerna kan köras från en webbläsare eller från kommandoraden.

#### Testning från en webbläsare

Om du vill köra testerna från en webbläsare öppnar du js_tests/tests.html i din webbläsare.

Om du vill mäta kodtäckningen när du kör testerna måste du visa filen via HTTP. Så här visar du kodtäckning:

- Kör `python -m http.server` från rotkatalogen (inte inifrån `js_tests`).

- Öppna http://localhost:8000/js_tests/tests.html i din webbläsare.

#### Testning från kommandoraden

För att köra testerna från kommandoraden måste du ha Node.js installerat.

När du har installerat `Node.js` installerar du JavaScript-testberoendena genom att köra följande från roten till din Django-kassakontroll:

/ 

    $ npm install

    ...\> npm install

Kör sedan testerna med:

/ 

    $ npm test

    ...\> npm test