{"title":"JavaScript","version":"4.2","locale":"id","docname":"internals/contributing/writing-code/javascript","url":"/id/4.2/internals/contributing/writing-code/javascript/","canonical":"https://djangodocs.dev/id/4.2/internals/contributing/writing-code/javascript/","summary":"Selagi kebanyakan inti Django adalah Python, aplikasi penyumbang admin and gis mengandung kode JavaScript. Silahkan mengikuti standar pengkodean ketika menulis kode…","html":"<h1>JavaScript<a class=\"heading-anchor\" href=\"#javascript\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h1>\n<p>Selagi kebanyakan inti Django adalah Python, aplikasi penyumbang <code class=\"docutils literal notranslate\"><span class=\"pre\">admin</span></code> and <code class=\"docutils literal notranslate\"><span class=\"pre\">gis</span></code> mengandung kode JavaScript.</p>\n<p>Silahkan mengikuti standar pengkodean ketika menulis kode javaScript untuk penyertaan di Django.</p>\n<section id=\"code-style\">\n<h2>Gaya kode<a class=\"heading-anchor\" href=\"#code-style\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<ul class=\"simple\">\n<li><p>Harap konfirmasikan gaya lekukan didiktekan dalam berkas <code class=\"docutils literal notranslate\"><span class=\"pre\">.editorconfig</span></code>. Kami menganjurkan menggunakan penyunting teks dengan dukungan <a class=\"reference external\" href=\"https://editorconfig.org/\">EditorConfig</a> untuk menghindari masalah lekukan dan ruang kosong. Kebanyakan berkas-berkas JavaScript menggunakan 4 spasi untuk lekukan, tetapi ada beberapa pengecualian.</p></li>\n<li><p>Ketika memberi nama variabel, gunakan <code class=\"docutils literal notranslate\"><span class=\"pre\">camelCase</span></code> daripada <code class=\"docutils literal notranslate\"><span class=\"pre\">underscore_case</span></code>. Berkas-berkas JavaScript berbeda terkadang menggunakan gaya kode berbeda. Harap coba tegaskan pada gaya kode dari setiap berkas.</p></li>\n<li><p>Use the <a class=\"reference external\" href=\"https://eslint.org/\">ESLint</a> code linter to check your code for bugs and style errors.\nESLint will be run when you run the JavaScript tests. We also recommended\ninstalling a ESLint plugin in your text editor.</p></li>\n<li><p>Jika memungkinkan, tulis kode yang akan bekerja bahkan jika struktur halaman terakhir dirubah dengan JavaScript. Sebagai contoh, ketika mengikat sebuah penangan klik, gunakan $('body').on('click', selector, func)` daripada <code class=\"docutils literal notranslate\"><span class=\"pre\">$(selector).click(func)</span></code>. Ini membuatnya lebih mudah untuk memperpanjang perilaku awalan Django dengan JavaScript.</p></li>\n</ul>\n</section>\n<section id=\"javascript-patches\">\n<span id=\"id1\"></span><h2>Tambalan JavaScript<a class=\"heading-anchor\" href=\"#javascript-patches\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Django's admin system leverages the jQuery framework to increase the\ncapabilities of the admin interface. In conjunction, there is an emphasis on\nadmin JavaScript performance and minimizing overall admin media file size.</p>\n</section>\n<section id=\"javascript-tests\">\n<span id=\"id2\"></span><h2>Percobaan JavaScript<a class=\"heading-anchor\" href=\"#javascript-tests\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Django's JavaScript tests can be run in a browser or from the command line.\nThe tests are located in a top level <a class=\"extlink-source reference external\" href=\"https://github.com/django/django/blob/stable/4.2.x/js_tests\">js_tests</a> directory.</p>\n<section id=\"writing-tests\">\n<h3>Menulis percobaan<a class=\"heading-anchor\" href=\"#writing-tests\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>Percobaan JavasScript Django menggunakan <a class=\"reference external\" href=\"https://qunitjs.com/\">QUnit</a>. Ini adalah sebuah contoh percobaan modul:</p>\n<div class=\"code-block\" data-language=\"javascript\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">JavaScript</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"JavaScript code\"><code><span class=\"nx\">QUnit</span><span class=\"p\">.</span><span class=\"nx\">module</span><span class=\"p\">(</span><span class=\"s1\">&#39;magicTricks&#39;</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">    </span><span class=\"nx\">beforeEach</span><span class=\"o\">:</span><span class=\"w\"> </span><span class=\"kd\">function</span><span class=\"p\">()</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">        </span><span class=\"kd\">const</span><span class=\"w\"> </span><span class=\"nx\">$</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">;</span>\n<span class=\"w\">        </span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;#qunit-fixture&#39;</span><span class=\"p\">).</span><span class=\"nx\">append</span><span class=\"p\">(</span><span class=\"s1\">&#39;&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;&#39;</span><span class=\"p\">);</span>\n<span class=\"w\">    </span><span class=\"p\">}</span>\n<span class=\"p\">});</span>\n\n<span class=\"nx\">QUnit</span><span class=\"p\">.</span><span class=\"nx\">test</span><span class=\"p\">(</span><span class=\"s1\">&#39;removeOnClick removes button on click&#39;</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">assert</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">    </span><span class=\"kd\">const</span><span class=\"w\"> </span><span class=\"nx\">$</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">;</span>\n<span class=\"w\">    </span><span class=\"nx\">removeOnClick</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">);</span>\n<span class=\"w\">    </span><span class=\"nx\">assert</span><span class=\"p\">.</span><span class=\"nx\">equal</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">length</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"mf\">1</span><span class=\"p\">);</span>\n<span class=\"w\">    </span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">click</span><span class=\"p\">();</span>\n<span class=\"w\">    </span><span class=\"nx\">assert</span><span class=\"p\">.</span><span class=\"nx\">equal</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">length</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"mf\">0</span><span class=\"p\">);</span>\n<span class=\"p\">});</span>\n\n<span class=\"nx\">QUnit</span><span class=\"p\">.</span><span class=\"nx\">test</span><span class=\"p\">(</span><span class=\"s1\">&#39;copyOnClick adds button on click&#39;</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">assert</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">    </span><span class=\"kd\">const</span><span class=\"w\"> </span><span class=\"nx\">$</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">;</span>\n<span class=\"w\">    </span><span class=\"nx\">copyOnClick</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">);</span>\n<span class=\"w\">    </span><span class=\"nx\">assert</span><span class=\"p\">.</span><span class=\"nx\">equal</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">length</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"mf\">1</span><span class=\"p\">);</span>\n<span class=\"w\">    </span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">click</span><span class=\"p\">();</span>\n<span class=\"w\">    </span><span class=\"nx\">assert</span><span class=\"p\">.</span><span class=\"nx\">equal</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">length</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"mf\">2</span><span class=\"p\">);</span>\n<span class=\"p\">});</span>\n</code></pre></div>\n<p>Please consult the <code class=\"docutils literal notranslate\"><span class=\"pre\">QUnit</span></code> documentation for information on the types of\n<a class=\"reference external\" href=\"https://api.qunitjs.com/assert/\">assertions supported by QUnit</a>.</p>\n</section>\n<section id=\"running-tests\">\n<h3>Menjalankan percobaan<a class=\"heading-anchor\" href=\"#running-tests\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>Percobaan JavaScript dapat berjalan dari perambah jaringan atau dari baris perintah.</p>\n<section id=\"testing-from-a-web-browser\">\n<h4>Dicoba dari sebuah perambah jaringan<a class=\"heading-anchor\" href=\"#testing-from-a-web-browser\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<p>To run the tests from a web browser, open up <a class=\"extlink-source reference external\" href=\"https://github.com/django/django/blob/stable/4.2.x/js_tests/tests.html\">js_tests/tests.html</a> in your\nbrowser.</p>\n<p>Untuk mengukur cakupan kode ketika menjalankan percobaan, anda butuh melihat berkas itu melalui HTTP. Untuk melihat cakupan kode:</p>\n<ul class=\"simple\">\n<li><p>Menjalankan <code class=\"docutils literal notranslate\"><span class=\"pre\">python</span> <span class=\"pre\">-m</span> <span class=\"pre\">http.server</span></code> dari akar direktori (bukan dari dalam <code class=\"docutils literal notranslate\"><span class=\"pre\">js_tests</span></code>).</p></li>\n<li><p>Buka <a class=\"reference external\" href=\"http://localhost:8000/js_tests/tests.html\">http://localhost:8000/js_tests/tests.html</a> di perambah jaringan anda.</p></li>\n</ul>\n</section>\n<section id=\"testing-from-the-command-line\">\n<h4>Percobaan dari baris perintah<a class=\"heading-anchor\" href=\"#testing-from-the-command-line\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<p>Untuk menjalankan percobaan dari baris perintah, anda butuh mempunyai <a class=\"reference external\" href=\"https://nodejs.org/\">Node.js</a> terpasang.</p>\n<p>After installing <code class=\"docutils literal notranslate\"><span class=\"pre\">Node.js</span></code>, install the JavaScript test dependencies by\nrunning the following from the root of your Django checkout:</p>\n<div class=\"console\" data-console><div class=\"console-panel\" data-platform=\"unix\"><p class=\"console-label\" id=\"console-0-unix-label\">Linux / macOS</p><div class=\"code-block\" data-language=\"console\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Shell</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Shell code\"><code><span class=\"gp\">$ </span>npm<span class=\"w\"> </span>install\n</code></pre></div>\n</div><div class=\"console-panel\" data-platform=\"windows\"><p class=\"console-label\" id=\"console-0-windows-label\">Windows</p><div class=\"code-block\" data-language=\"doscon\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Windows</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Windows shell\"><code><span class=\"gp\">...\\&gt;</span> npm install\n</code></pre></div></div></div>\n<p>lalu jalankan percobaan dengan:</p>\n<div class=\"console\" data-console><div class=\"console-panel\" data-platform=\"unix\"><p class=\"console-label\" id=\"console-1-unix-label\">Linux / macOS</p><div class=\"code-block\" data-language=\"console\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Shell</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Shell code\"><code><span class=\"gp\">$ </span>npm<span class=\"w\"> </span><span class=\"nb\">test</span>\n</code></pre></div>\n</div><div class=\"console-panel\" data-platform=\"windows\"><p class=\"console-label\" id=\"console-1-windows-label\">Windows</p><div class=\"code-block\" data-language=\"doscon\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Windows</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Windows shell\"><code><span class=\"gp\">...\\&gt;</span> npm test\n</code></pre></div></div></div>\n</section>\n</section>\n</section>","rootId":"javascript","toc":[{"title":"Gaya kode","anchor":"code-style","children":[]},{"title":"Tambalan JavaScript","anchor":"javascript-patches","children":[]},{"title":"Percobaan JavaScript","anchor":"javascript-tests","children":[{"title":"Menulis percobaan","anchor":"writing-tests","children":[]},{"title":"Menjalankan percobaan","anchor":"running-tests","children":[{"title":"Dicoba dari sebuah perambah jaringan","anchor":"testing-from-a-web-browser","children":[]},{"title":"Percobaan dari baris perintah","anchor":"testing-from-the-command-line","children":[]}]}]}],"breadcrumbs":[{"docname":"internals/index","title":"Dalam Django","url":"/id/4.2/internals/"},{"docname":"internals/contributing/index","title":"Membantu untuk Django","url":"/id/4.2/internals/contributing/"},{"docname":"internals/contributing/writing-code/index","title":"Penulisan kode","url":"/id/4.2/internals/contributing/writing-code/"}],"prev":{"docname":"internals/contributing/writing-code/working-with-git","title":"Bekerja dengan Git dan GitHub","url":"/id/4.2/internals/contributing/writing-code/working-with-git/"},"next":{"docname":"internals/contributing/writing-documentation","title":"Menulis dokumentasi","url":"/id/4.2/internals/contributing/writing-documentation/"},"formats":{"html":"/id/4.2/internals/contributing/writing-code/javascript/","markdown":"/id/4.2/internals/contributing/writing-code/javascript.md","json":"/id/4.2/internals/contributing/writing-code/javascript.json"},"source":"https://github.com/django/django/blob/stable/4.2.x/docs/internals/contributing/writing-code/javascript.txt","official":"https://docs.djangoproject.com/id/4.2/internals/contributing/writing-code/javascript/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10","1.9"],"inLocales":["en","zh-hans","fr","ja","id","it","pt-br","ko","es","el","pl"]}