{"title":"JavaScript","version":"1.9","locale":"id","docname":"internals/contributing/writing-code/javascript","url":"/id/1.9/internals/contributing/writing-code/javascript/","canonical":"https://djangodocs.dev/id/1.9/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>Please conform to the indentation style dictated in the <code class=\"docutils literal notranslate\"><span class=\"pre\">.editorconfig</span></code>\nfile. We recommend using a text editor with <a class=\"reference external\" href=\"http://editorconfig.org/\">EditorConfig</a> support to avoid\nindentation and whitespace issues. Most of the JavaScript files use 4 spaces\nfor indentation, but there are some exceptions.</p></li>\n<li><p>When naming variables, use <code class=\"docutils literal notranslate\"><span class=\"pre\">camelCase</span></code> instead of <code class=\"docutils literal notranslate\"><span class=\"pre\">underscore_case</span></code>.\nDifferent JavaScript files sometimes use a different code style. Please try to\nconform to the code style of each file.</p></li>\n<li><p>Use the <a class=\"reference external\" href=\"http://jshint.com/\">JSHint</a> code linter to check your code for bugs and style errors.\nJSHint will be run when you run the JavaScript tests. We also recommended\ninstalling a JSHint plugin in your text editor.</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.\nServing compressed or &quot;minified&quot; versions of JavaScript files is considered\nbest practice in this regard.</p>\n<p>To that end, patches for JavaScript files should include both the original\ncode for future development (e.g. <code class=\"docutils literal notranslate\"><span class=\"pre\">foo.js</span></code>), and a compressed version for\nproduction use (e.g. <code class=\"docutils literal notranslate\"><span class=\"pre\">foo.min.js</span></code>). Any links to the file in the codebase\nshould point to the compressed version.</p>\n<section id=\"compressing-javascript\">\n<h3>Memadatkan JavaScript<a class=\"heading-anchor\" href=\"#compressing-javascript\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>Untuk menyederhanakan pengolahan menyediakan kode JavaScript yang dioptimalkan, Django menyertakan tulisan Python berguna yang harus digunakan untuk membuat versi &quot;dipekercil&quot;. Untuk menjalankannya:</p>\n<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>pip<span class=\"w\"> </span>install<span class=\"w\"> </span>closure\n<span class=\"gp\">$ </span>python<span class=\"w\"> </span>django/contrib/admin/bin/compress.py\n</code></pre></div>\n<p>Behind the scenes, <code class=\"docutils literal notranslate\"><span class=\"pre\">compress.py</span></code> is a front-end for Google's\n<a class=\"reference external\" href=\"https://developers.google.com/closure/compiler/\">Closure Compiler</a> which is written in Java. The Closure Compiler library is\nnot bundled with Django, but you can install it using pip as done above. The\nClosure Compiler library requires <a class=\"reference external\" href=\"https://www.java.com\">Java</a> 7 or higher.</p>\n<p>Please don't forget to run <code class=\"docutils literal notranslate\"><span class=\"pre\">compress.py</span></code> and include the <code class=\"docutils literal notranslate\"><span class=\"pre\">diff</span></code> of the\nminified scripts when submitting patches for Django's JavaScript.</p>\n</section>\n</section>\n<section id=\"javascript-tests\">\n<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 <code class=\"docutils literal notranslate\"><span class=\"pre\">js_tests</span></code> 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\">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\">var</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\">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\">var</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=\"w\"> </span><span class=\"o\">===</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=\"w\"> </span><span class=\"o\">===</span><span class=\"w\"> </span><span class=\"mf\">0</span><span class=\"p\">);</span>\n<span class=\"p\">});</span>\n\n<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\">var</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=\"w\"> </span><span class=\"o\">===</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=\"w\"> </span><span class=\"o\">===</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>Silahkan rundingkan dokumentasi QUnit untuk informasi pada jenis-jenis dari <a class=\"reference external\" href=\"https://api.qunitjs.com/category/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>Untuk menjalankan percobaan dari perambah jaringan, buka <code class=\"docutils literal notranslate\"><span class=\"pre\">js_tests/tests.html</span></code> di perambah anda.</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>Jalankan <code class=\"docutils literal notranslate\"><span class=\"pre\">python</span> <span class=\"pre\">-m</span> <span class=\"pre\">http.server</span></code> (atau <code class=\"docutils literal notranslate\"><span class=\"pre\">python</span> <span class=\"pre\">-m</span> <span class=\"pre\">SimpleHTTPServer</span></code> pada Python 2) dari direktori akar (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>Setelah memasang Node.js, pasang ketergantungan percobaan JavaScript dengan menjalankan berikut dari akar dari pemeriksaan Django:</p>\n<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<p>lalu jalankan percobaan dengan:</p>\n<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</section>\n</section>\n</section>","rootId":"javascript","toc":[{"title":"Gaya kode","anchor":"code-style","children":[]},{"title":"Tambalan JavaScript","anchor":"javascript-patches","children":[{"title":"Memadatkan JavaScript","anchor":"compressing-javascript","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/1.9/internals/"},{"docname":"internals/contributing/index","title":"Membantu untuk Django","url":"/id/1.9/internals/contributing/"},{"docname":"internals/contributing/writing-code/index","title":"Penulisan kode","url":"/id/1.9/internals/contributing/writing-code/"}],"prev":{"docname":"internals/contributing/writing-code/working-with-git","title":"Bekerja dengan Git dan GitHub","url":"/id/1.9/internals/contributing/writing-code/working-with-git/"},"next":{"docname":"internals/contributing/writing-documentation","title":"Menulis dokumentasi","url":"/id/1.9/internals/contributing/writing-documentation/"},"formats":{"html":"/id/1.9/internals/contributing/writing-code/javascript/","markdown":"/id/1.9/internals/contributing/writing-code/javascript.md","json":"/id/1.9/internals/contributing/writing-code/javascript.json"},"source":"https://github.com/django/django/blob/stable/1.9.x/docs/internals/contributing/writing-code/javascript.txt","official":"https://docs.djangoproject.com/id/1.9/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","fr","ja","id","pt-br","es"]}