{"id":6805,"date":"2018-09-11T18:11:21","date_gmt":"2018-09-11T18:11:21","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=6805"},"modified":"2025-03-14T10:19:27","modified_gmt":"2025-03-14T03:19:27","slug":"apa-itu-javascript","status":"publish","type":"post","link":"\/id\/tutorial\/apa-itu-javascript","title":{"rendered":"Apa itu JavaScript: definisi, fungsi, dan perbedaannya dengan Java"},"content":{"rendered":"<p>JavaScript adalah skrip pemrograman ringan yang umumnya digunakan oleh web developer untuk menciptakan interaksi yang lebih dinamis saat membuat halaman web, aplikasi, server, atau game.<\/p><p>Web developer biasanya menggunakan JavaScript bersama <span class=\"\">HTML<\/span><span class=\"\">&nbsp;dan&nbsp;<\/span><span class=\"\">CSS<\/span> karena ketiganya bisa bekerja sama tanpa masalah.&nbsp;JavaScript adalah skrip pemrogramannya, HTML berfungsi untuk menyusun struktur website, dan CSS untuk mendesain serta mengatur layout halaman website.<\/p><p>JavaScript digunakan pada web, aplikasi seluler, dan game development sehingga menjadi salah satu yang layak Anda pelajari.&nbsp;Nah, kami akan menjelaskan apa itu JavaScript, cara kerjanya, serta perbedaan Java dan JavaScript. Simak sampai selesai, ya!<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/ID-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noopener\">Download Istilah-Istilah Web Development untuk Pemula<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-apa-itu-javascript-dan-sejarahnya\">Apa Itu JavaScript dan Sejarahnya<\/h2><p>JavaScript adalah bahasa skrip yang digunakan untuk membuat konten halaman web dinamis, berfungsi untuk membuat elemen yang mampu meningkatkan interaksi pengunjung seperti menu drop-down, animasi, dan warna background dinamis.<\/p><p>Sejarah JavaScript dimulai pada tahun 1995, diciptakan oleh Brendan Eich di Netscape Communications. Awalnya, JavaScript hanya digunakan untuk keperluan internal dengan web browser perusahaan tersebut, Netscape Navigator.<\/p><p>Dulunya, JavaScript bernama LiveScript, yang kemudian diubah menjadi JavaScript agar bisa menjadi &ldquo;teman&rdquo; bagi bahasa pemrograman Java milik mitra mereka, Sun Microsystems. Kami akan menjelaskan perbedaan Java dan JavaScript nanti.<\/p><p>JavaScript terus berkembang bersama browser web baru seperti <strong>Mozilla Firefox<\/strong> dan <strong>Google Chrome<\/strong> sejak saat itu.&nbsp;Bahkan, saat ini sedang dikembangkan mesin JavaScript modern pertama, yaitu&nbsp;<strong>V8<\/strong>, yang bertugas untuk mengompilasi bytecode menjadi kode mesin asli.<\/p><h2 class=\"wp-block-heading\" id=\"h-apa-fungsi-javascript\">Apa Fungsi JavaScript?<\/h2><p>Fungsi JavaScript yang paling umum adalah untuk pengembangan aplikasi web dan mobile, membangun web server dan aplikasi server, membuat website yang interaktif, serta game development.<\/p><p>Bahasa pemrograman JavaScript sekarang memiliki banyak framework dan library yang bisa membantu mempercepat proses, seperti <strong>AngularJS<\/strong>,&nbsp;<a href=\"\/id\/tutorial\/apa-itu-jquery\">jQuery<\/a>, and&nbsp;<a href=\"\/id\/tutorial\/apa-itu-react\">ReactJS<\/a>.<\/p><p>Meskipun umumnya melayani program berbasis web, fitur pemrograman JavaScript memiliki implementasi lain di area yang berbeda. Untuk lebih jelasnya, berikut kegunaan JavaScript:<\/p><h3 class=\"wp-block-heading\" id=\"h-1-efisiensi-pengembangan-aplikasi-web-dan-seluler\">1. Efisiensi Pengembangan Aplikasi Web dan Seluler<\/h3><p>Pengembangan framework JavaScript, yang terdiri dari library kode JavaScript, memungkinkan developer menggunakan kode JS siap pakai dalam proyek mereka.&nbsp;Proses yang harus dilalui pun menjadi lebih cepat dan efisien karena mereka tidak perlu menulis kode dari nol.<\/p><p>Setiap framework JavaScript memiliki fitur yang berfungsi untuk menyederhanakan proses development dan debugging.<\/p><p>Misalnya, framework front-end seperti jQuery dan ReactJS bisa membantu meningkatkan efisiensi desain.&nbsp;Developer bisa menggunakan ulang dan memperbarui komponen kode tanpa memengaruhi satu sama lain, baik dari segi fungsi maupun nilai.<\/p><p>Sementara itu, framework pengembangan aplikasi mobile seperti <a data-wpel-link=\"external\" href=\"https:\/\/cordova.apache.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Cordova<\/a> dan <a href=\"https:\/\/titaniumsdk.com\/\" target=\"_blank\" rel=\"noopener\">Titanium<\/a> bisa digunakan untuk membuat&nbsp;<a data-wpel-link=\"external\" href=\"https:\/\/medium.com\/@inverita\/mobile-native-vs-cross-platform-what-to-choose-in-2020-1f8500171856\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">aplikasi native atau hybrid<\/a>.<\/p><p>Implementasi kode JS di <strong>Node.js<\/strong> juga berperan penting dalam <a href=\"\/id\/tutorial\/cara-menjadi-web-developer\">web development<\/a>.&nbsp;<strong>Node.js<\/strong> bisa mengurangi waktu respons server karena sifatnya yang single-threaded dan memiliki arsitektur non-blocking.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-membangun-web-server-dan-aplikasi-server\"><span id=\"2_Building_Web_Servers_and_Server_Applications\" class=\"ez-toc-section\"><\/span>2. Membangun Web Server dan Aplikasi Server<\/h3><p>Melalui Node.js, JavaScript memungkinkan developer membangun web server dan infrastruktur back-end sehingga akan menghemat waktu dan tenaga dalam hal pembuatan web server.<\/p><p>Modul HTTP built-in pada bahasa pemrograman ini memungkinkan Anda mengembangkan server HTTP basic yang menampilkan teks biasa saat pengunjung mengakses halaman web.<\/p><p>Anda bisa menggunakan web server Node.js sendiri,&nbsp;<a data-wpel-link=\"external\" href=\"https:\/\/node-os.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Node-OS<\/a>, atau milik pihak luar seperti Microsoft Internet Information Services (IIS) dan&nbsp;<a data-wpel-link=\"external\" href=\"https:\/\/httpd.apache.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Apache<\/a>&nbsp;untuk menangani permintaan HTTP.<\/p><p>Node-OS bekerja paling baik di sistem operasi Linux karena dikembangkan berdasarkan&nbsp;<a data-wpel-link=\"external\" href=\"https:\/\/www.educative.io\/edpresso\/what-is-linux-kernel\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">kernel Linux<\/a>.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-membuat-website-yang-interaktif\"><span id=\"3_Interactive_Behavior_on_Websites\" class=\"ez-toc-section\"><\/span>3. Membuat Website yang Interaktif<\/h3><p>Fungsi JavaScript berikutnya adalah untuk menciptakan halaman web yang dinamis,&nbsp;seperti untuk menampilkan animasi, mengubah visibilitas teks, dan membuat menu drop-down.<\/p><p>Meskipun Anda bisa menggunakan HTML dan CSS saja untuk membuat website, halaman yang dihasilkan hanya akan memiliki tampilan statis tanpa adanya JavaScript. Bahasa pemrograman ini memungkinkan pengunjung berinteraksi dengan halaman web, dan Anda pun bisa menyajikan user experience yang lebih baik.<\/p><p>Selain itu, JavaScript memungkinkan Anda mengubah konten dan nilai atribut HTML tanpa harus merefresh halaman web dulu.&nbsp;Sebab, JavaScript mendukung tipe data berikut:<\/p><ul class=\"wp-block-list\">\n<li><strong>String<\/strong> &#8210; terdiri dari data teks yang ditulis di dalam tanda kutip.&nbsp;Misalnya, <strong>&ldquo;Hello World&rdquo;<\/strong>, <strong>&lsquo;Hello World&rsquo;<\/strong>, dan <strong>&ldquo;Display &lsquo;Hello world&rsquo; text<\/strong>&ldquo;.<\/li>\n\n\n\n<li><strong>Number<\/strong>&nbsp;&#8210; mencakup bilangan bulat dan floating-point antara (2^53 &ndash; 1) dan -(2^53 &ndash; 1).<\/li>\n\n\n\n<li><strong>Boolean<\/strong>&nbsp;&#8210; tipe data logis dengan nilai <strong>true <\/strong>dan <strong>false<\/strong>.<\/li>\n\n\n\n<li><strong>BigInt<\/strong>&nbsp;&#8210; merepresentasikan data bilangan bulat (integer) dengan panjang arbitrer.<\/li>\n\n\n\n<li><strong>Null<\/strong>&nbsp;&#8210; berisi nilai nol.<\/li>\n\n\n\n<li><strong>Undefined<\/strong>&nbsp;&#8210; termasuk variabel yang dideklarasikan, tapi tidak ditetapkan.<\/li>\n\n\n\n<li><strong>Symbol<\/strong>&nbsp;&#8210; menyediakan identifier unik untuk objek.<\/li>\n\n\n\n<li><strong><strong>Object<\/strong><\/strong>&nbsp;&#8210; untuk struktur data kompleks yang ditulis dengan kurung kurawal.&nbsp;Misalnya, <strong><strong>{item:&rdquo;Buku&rdquo;, information:&rdquo;biografi&rdquo;}<\/strong><\/strong>.<\/li>\n<\/ul><p>Tipe data primitif, yang terdiri dari semua tipe data kecuali <strong>object<\/strong>, hanya bisa menyimpan satu data. Sementara itu, tipe data <strong>object<\/strong> bisa berisi sekumpulan nilai.<\/p><p>Dengan JavaScript, Anda juga bisa meningkatkan pengalaman browsing pengunjung menggunakan cookie. Untuk membuat, membaca, dan menghapus cookie dalam JavaScript, diperlukan properti <strong>document.cookie<\/strong> yang berfungsi sebagai &ldquo;getter and setter&rdquo; nilai cookie.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-memudahkan-pengembangan-game\"><span id=\"4_Game_Development\" class=\"ez-toc-section\"><\/span>4. Memudahkan Pengembangan Game<\/h3><p>JavaScript juga bisa membantu Anda membuat game kalau digunakan dengan HTML5 dan <a href=\"\/id\/tutorial\/api-adalah\">Application Programming Interface<\/a> (API) seperti <a data-wpel-link=\"external\" href=\"https:\/\/get.webgl.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">WebGL<\/a>. Ada banyak game engine berbasis JavaScript seperti <a data-wpel-link=\"external\" href=\"https:\/\/phaser.io\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Phaser<\/a>, <a data-wpel-link=\"external\" href=\"https:\/\/docs.gdevelop-app.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GDevelop<\/a>, dan&nbsp;<a data-wpel-link=\"external\" href=\"https:\/\/www.kiwijs.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Kiwi.js<\/a>&nbsp;yang tersedia untuk rendering grafis, daur ulang kode, dan aplikasi lintas platform.<\/p><p>Beberapa contoh game yang dibuat dengan JavaScript antara lain&nbsp;adalah <strong>Angry Birds<\/strong>, <strong>The Wizard<\/strong>, dan <strong>2048<\/strong>.<\/p><figure class=\"wp-block-image\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/08\/angry-birds.webp\" rel=\"lightbox[10466] follow\"><img decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/02\/homepage-website-99designs.png\/public\" alt=\"Halaman arahan Angry Birds.\" class=\"wp-image-33952\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/02\/homepage-website-99designs.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/02\/homepage-website-99designs.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/02\/homepage-website-99designs.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/02\/homepage-website-99designs.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-perbedaan-java-dan-javascript\">Perbedaan Java dan JavaScript<\/h2><p>Setelah memahami apa itu JavaScript beserta fungsinya, di bagian ini kami akan membahas perbedaannya dengan Java. Sebab, walaupun namanya mirip dan sama-sama digunakan dalam konteks pemrograman, keduanya tidaklah sama.<\/p><p>Menurut informasi dari <a href=\"https:\/\/www.java.com\/en\/download\/help\/java_javascript.html\" target=\"_blank\" rel=\"noopener\">website resmi Java<\/a>, bahasa pemrograman JavaScript yang dikembangkan oleh Netscape, Inc. bukanlah bagian dari platform Java yang dikembangkan oleh Sun Microsystems (sebelum diakuisisi Oracle).<\/p><p>Perbedaan Java dan JavaScript adalah, Java merupakan <strong>bahasa pemrograman<\/strong>, sedangkan JavaScript merupakan <strong>skrip pemrograman<\/strong>. Kode JavaScript ditulis dalam teks dan bisa langsung diinterpretasikan browser, sedangkan Java harus di-compile menjadi bytecode yang bisa dipahami dan dijalankan komputer.<\/p><p>Apa bedanya scripting language dan <a href=\"\/id\/tutorial\/bahasa-pemrograman\">bahasa pemrograman<\/a>?<\/p><p>Nah, bahasa scripting termasuk ke dalam bahasa pemrograman, tapi digunakan untuk memanipulasi, menyesuaikan, dan mengotomatiskan apa yang sudah ada di sistem. Sedangkan bahasa pemrograman biasanya digunakan untuk membuat program dari nol.<\/p><p>Kemudian, Java digunakan untuk membuat aplikasi di perangkat atau browser, sedangkan JavaScript umumnya digunakan pada dokumen HTML.&nbsp;Plugin yang digunakan untuk menggunakan Java dan JavaScript pun berbeda.<\/p><p>Untuk lebih jelasnya, ini perbedaan Java dan JavaScript:<\/p><figure tabindex=\"0\" class=\"wp-block-table aligncenter is-style-regular\"><table><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Java<\/th><th class=\"has-text-align-center\" data-align=\"center\">JavaScript<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Java mengharuskan variabel dideklarasikan lebih dulu.&nbsp;Jenis variabel diperiksa saat compile.<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>JavaScript memiliki sintaksis dan aturan yang lebih santai.<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Java adalah bahasa pemrograman &ldquo;berorientasi&rdquo; objek.<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>JavaScript adalah bahasa scripting &ldquo;berbasis&rdquo; objek.<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Aplikasi bisa berjalan di virtual machine (JVM) atau semua browser.<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong><span><b>Sebelumnya, k<\/b>ode<\/span> hanya bisa dijalankan di browser, sekarang bisa di server melalui Node.js.<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Objek berbasis class, tidak bisa untuk membuat program tanpa membuat class.<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Objek berbasis prototipe.<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Ekstensi filenya adalah &ldquo;.Java&rdquo;, menerjemahkan source code menjadi bytecode yang dijalankan oleh JVM.<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Ekstensinya adalah &ldquo;.js&rdquo;, diinterpretasikan tapi tidak di-compile. Setiap browser punya interpreter untuknya.<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Merupakan bahasa pemrograman standalone.<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Ada di halaman web, terintegrasi dengan konten HTML.<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Menggunakan metode berbasis thread untuk konkurensi.<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Menggunakan metode berbasis event untuk konkurensi.<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Mendukung multithreading.<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Tidak mendukung multithreading.<\/strong><\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-kelebihan-dan-kekurangan-javascript\">Kelebihan dan Kekurangan JavaScript<\/h2><p>JavaScript memiliki sejumlah keunggulan yang membuatnya menjadi pilihan yang lebih baik daripada bahasa pemrograman lainnya. Antara lain, berikut kelebihan JavaScript:<\/p><ul class=\"wp-block-list\">\n<li><strong>Struktur yang sederhana<\/strong>.&nbsp;Strukturnya yang sederhana membuat JavaScript lebih mudah dipelajari dan diterapkan, serta lebih cepat daripada sejumlah bahasa lain.&nbsp;Error juga mudah diidentifikasi dan diperbaiki.<\/li>\n\n\n\n<li><strong>Eksekusi lebih cepat.<\/strong>&nbsp;JavaScript mengeksekusi skrip langsung di browser web tanpa harus konek ke server atau menggunakan compiler.&nbsp;Selain itu, sebagian besar browser memungkinkan JavaScript meng-compile kode pada saat eksekusi program.<\/li>\n\n\n\n<li><strong>Fungsi yang serbaguna<\/strong>.&nbsp;JavaScript kompatibel dengan bahasa pemrograman lain seperti <a href=\"\/id\/tutorial\/apa-itu-php\/\">PHP<\/a>, Perl, dan Java.&nbsp;Bahasa ini juga menjadikan data science dan machine learning bisa diakses oleh developer.<\/li>\n\n\n\n<li><strong>Cukup populer dan banyak digunakan.<\/strong>&nbsp;Ada berbagai resource dan forum yang bisa membantu pemula mempelajari bahasa scripting ini.<\/li>\n\n\n\n<li><strong>Mengurangi beban server<\/strong>.&nbsp;karena berjalan di sisi klien, JavaScript bisa mengurangi permintaan yang dikirim ke server.&nbsp;Validasi data bisa dilakukan melalui browser, dan update hanya berlaku pada bagian halaman web tertentu.<\/li>\n\n\n\n<li><strong>Selalu diperbarui dan dikembangkan.<\/strong>&nbsp;Tim developer JavaScript dan ECMA International terus memperbarui serta merancang framework dan library baru sehingga bisa terus relevan.<\/li>\n<\/ul><p>Namun, JavaScript juga memiliki beberapa batasan yang perlu Anda pertimbangkan. Berikut adalah beberapa kekurangan JavaScript:<\/p><ul class=\"wp-block-list\">\n<li><strong>Terkadang memiliki masalah kompatibilitas.<\/strong>&nbsp;Beberapa web browser menginterpretasikan kode JS dalam cara yang berbeda, sehingga terkadang tidak konsisten.&nbsp;Jadi, Anda harus menguji skrip JavaScript di semua web browser utama, termasuk versi lamanya agar tidak mengganggu user experience.<\/li>\n\n\n\n<li><strong>Keamanan kurang terjaga.<\/strong>&nbsp;Kode JavaScript yang berjalan secara client-side rawan terkena eksploitasi oleh pengguna yang tidak bertanggung jawab.<\/li>\n\n\n\n<li><strong>Debugging kurang efisien.<\/strong>&nbsp;Meskipun beberapa editor HTML mendukung debugging, fungsinya masih kurang efisien dibanding editor lain.&nbsp;Karena browser tidak menampilkan peringatan error, Anda mungkin akan kesulitan mengidentifikasi masalah.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/id\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29634\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-cara-kerja-javascript-pada-website\">Cara Kerja JavaScript pada Website<\/h2><p>JavaScript di-embed langsung ke halaman web atau direferensikan melalui file .js terpisah.&nbsp;Saat pengunjung membuka halaman web, browser akan menjalankan skrip beserta kode HTML dan CSS untuk membuat halaman fungsional yang disajikan melalui tab browser.<\/p><p>Skrip kemudian didownload dan diproses di perangkat pengunjung.&nbsp;Yap, seperti yang kami jelaskan tadi, JavaScript adalah bahasa sisi klien. Jadi tidak seperti bahasa server side di mana server memproses skrip sebelum dikirim ke browser.<\/p><p>Saat menemukan blok kode JavaScript, browser web akan memprosesnya dari atas ke bawah.&nbsp;Karena urutan akan diperhitungkan, pastikan Anda mereferensikan objek atau variabel di dalam blok lebih dulu sebelum memodifikasinya.&nbsp;Apabila memiliki variabel tanpa nilai, error undefined akan muncul.<\/p><h2 class=\"wp-block-heading\" id=\"h-cara-menggunakan-javascript-pada-html\">Cara Menggunakan JavaScript pada HTML<\/h2><p><span class=\"\">Ada dua cara menggunakan JavaScript pada HTML, yaitu secara internal dan eksternal.<\/span> JavaScript internal menggunakan tag <strong>&lt;script&gt;<\/strong> pada body script HTML untuk mencakup semua kode JavaScript.<\/p><p>Berikut contoh JavaScript internal dengan tag&nbsp;<strong>&lt;script&gt;<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;Inline JavaScript&lt;\/title&gt;\n  &lt;script type=\"text\/javascript\"&gt;\n    alert(\"Hello World\");\n  &lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Anda juga bisa meng-embed skrip pada atribut event HTML, meminta browser untuk mengeksekusinya saat sebuah event dipicu. Jenis skrip ini disebut <strong>inline JavaScript<\/strong> (hapus tanda &ldquo;*&rdquo; pada &ldquo;onclick&rdquo; untuk menggunakan kode):<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button *onclick*=\"alert('Click for more details')\"&gt;Click&lt;\/button&gt;<\/pre><p>Di sisi lain, <strong>JavaScript eksternal<\/strong> dilakukan dengan menyimpan kode dalam file <strong>.js<\/strong>&nbsp;terpisah, lalu memanggilnya kembali di halaman HTML.&nbsp;Developer sering menggunakan metode ini saat mengerjakan proyek besar, karena akan membuat skripnya lebih teratur.<\/p><p>Anda juga bisa menggunakan lagi skrip JavaScript eksternal di beberapa halaman HTML, yang tentunya akan sangat membantu.<\/p><p>Misalnya, menambahkan skrip berikut ke halaman HTML memungkinkan Anda memanggil kembali file JavaScript eksternal bernama <strong>script.js<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"script.js\" defer&gt;&lt;\/script&gt;<\/pre><p>Ini adalah contoh cara mereferensikan file JavaScript eksternal:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n&lt;title&gt;Time right now:&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;button type=\"button\" onclick=\"myFunction()\"&gt;Select&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;script src=\"js\/script.js\"&gt;&lt;\/script&gt;\n&lt;\/html&gt;<\/pre><p>Anda bisa membuat dan memodifikasi kode JavaScript menggunakan text editor. Aplikasi text editor yang bisa digunakan juga bermacam-macam, silakan lihat rekomendasi <a href=\"\/id\/tutorial\/html-editor-terbaik\">HTML text editor terbaik<\/a>&nbsp;kami untuk memilih mana yang paling sesuai kebutuhan.<\/p><p>Perlu diingat bahwa ada dua jenis text editor, yaitu WYSIWYG (what-you-see-is-what-you-get) dan editor tekstual.&nbsp;Editor WYSIWYG lebih cocok untuk pemula karena menampilkan tampilan blok kode pada halaman.<\/p><p>Contohnya,&nbsp;<a data-wpel-link=\"external\" href=\"https:\/\/www.tiny.cloud\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">TinyMCE<\/a>&nbsp;adalah text editor WYSIWYG populer yang digunakan di WordPress.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"482\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/tiny-content-solutions.png\/public\" alt=\"\" class=\"wp-image-16882\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/tiny-content-solutions.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/tiny-content-solutions.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/tiny-content-solutions.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/tiny-content-solutions.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Di sisi lain, editor berbasis teks memberi Anda kebebasan untuk menyesuaikan kode, tapi membutuhkan skill HTML.&nbsp;Beberapa text editor yang paling populer mencakup <a data-wpel-link=\"external\" href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Sublime Text<\/a>, <a data-wpel-link=\"external\" href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Atom<\/a>, dan&nbsp;<a data-wpel-link=\"external\" href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Notepad++<\/a>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"482\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/sublime-text.png\/public\" alt=\"\" class=\"wp-image-16883\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/sublime-text.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/sublime-text.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/sublime-text.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/03\/sublime-text.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Mau tahu selengkapnya? Silakan lihat tutorial kami tentang <a href=\"\/id\/tutorial\/cara-membuat-javascript-di-html\">cara membuat JavaScript di HTML<\/a>.&nbsp;Di tutorial tersebut, kami memberikan contoh dan penjelasan lengkap tentang implementasi JavaScript. <a data-wpel-link=\"external\" href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Website resmi<\/a>&nbsp;JavaScript&nbsp;juga menyediakan banyak tutorial demo bagi pemula dan para fans JavaScript.<\/p><h2 class=\"wp-block-heading\" id=\"h-jadi-apa-itu-javascript\">Jadi, Apa Itu JavaScript?<\/h2><p>Selesai! Di artikel ini kami sudah menjelaskan apa itu JavaScript, fungsi dan manfaatnya, serta perbedaan Java dan JavaScript yang umumnya terletak pada segi kegunaan.<\/p><p>Jadi, JavaScript adalah bahasa pemrograman (lebih tepatnya bahasa penulisan skrip) berbasis objek, umumnya digunakan untuk membuat halaman web interaktif. JavaScript juga sering digunakan bersama HTML dan CSS.<\/p><p>Kemudian, JavaScript memiliki beberapa keunggulan, di antaranya:<\/p><ul class=\"wp-block-list\">\n<li>Mudah dipelajari dan diimplementasikan pada elemen atau event halaman web<\/li>\n\n\n\n<li>Punya komunitas developer yang luas<\/li>\n\n\n\n<li>Mengurangi request ke server<\/li>\n\n\n\n<li>Kompatibel dengan banyak bahasa lain<\/li>\n\n\n\n<li>Lebih cepat dan ringan dibanding bahasa pemrograman lainnya<\/li>\n<\/ul><p>Semoga artikel ini bisa membantu Anda memahami apa itu JavaScript serta fungsinya untuk website dan aplikasi.&nbsp;Apabila ingin mempelajari JavaScript, silakan lihat panduan kami tentang&nbsp;<a href=\"\/id\/tutorial\/belajar-coding-online-gratis\">belajar coding<\/a>.<\/p><p>Masih punya pertanyaan? Silakan sampaikan pada kolom komentar di bawah ini, ya. Terima kasih sudah membaca. ?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript adalah skrip pemrograman ringan yang umumnya digunakan oleh web developer untuk menciptakan interaksi yang lebih dinamis saat membuat halaman web, aplikasi, server, atau game. Web developer biasanya menggunakan JavaScript bersama HTML&nbsp;dan&nbsp;CSS karena ketiganya bisa bekerja sama tanpa masalah.&nbsp;JavaScript adalah skrip pemrogramannya, HTML berfungsi untuk menyusun struktur website, dan CSS untuk mendesain serta mengatur layout [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/apa-itu-javascript\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":6808,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Apa Itu JavaScript? Pengertian dan Perbedaannya dengan Java","rank_math_description":"Sedang mencari tahu apa itu JavaScript atau perbedaan Java dan JavaScript? Yuk, baca penjelasan lengkapnya di artikel ini!","rank_math_focus_keyword":"apa itu javascript, javascript adalah","footnotes":""},"categories":[7890],"tags":[5553],"class_list":["post-6805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-glosarium","tag-javascript"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-javascript","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-javascript","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/qu-est-ce-que-javascript","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-javascript-introduccion-basica","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-javascript","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-javascript","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-javascript","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-javascript","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-javascript","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-javascript","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-javascript","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-javascript","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-javascript","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-javascript","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-javascript","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-javascript","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/6805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=6805"}],"version-history":[{"count":25,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/6805\/revisions"}],"predecessor-version":[{"id":43518,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/6805\/revisions\/43518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media\/6808"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=6805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=6805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=6805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}