Dalam tutorial kali ini, kita akan mempelajari cara menjalankan kode program JavaScript melalui web browser.
Aplikasi Untuk Menjalankan JavaScript
JavaScript merupakan bahasa script yang berjalan pada web browser, sehingga program yang dibutuhkan untuk menjalankan JavaScript hanyalah sebuah aplikasi text editor dan sebuah web browser seperti Google Chrome atau Mozilla Firefox.
Untuk aplikasi text editor, anda bisa menggunakan aplikasi notepad bawaan Windows, atau menggunakan aplikasi khusus text editor. Salah satu aplikasi text editor sederhana yang saya gunakan adalah Notepad++ yang ringan dan bersifat gratis. Untuk menginstall aplikasi Notepad++ ini pernah saya bahas pada tutorial Memilih Aplikasi Editor HTML.
Pilihan web browser bukan sesuatu yang mutlak. Anda bebas menggunakan aplikasi web browser kesukaan. Terdapat beberapa jenis aplikasi web browser populer yang bisa diinstall dengan gratis. Anda bahkan bisa menginstall seluruhnya, seperti yang pernah saya bahas pada tutorial Mengenal Fungsi Web Browser.
Pada sesi tutorial JavaScript di duniailkom, saya menggunakan web browser Google Chrome dan Mozilla Firefox.
Cara Menjalankan kode JavaScript
Jika aplikasi Notepad++ dan web browser telah tersedia, saatnya mencoba menjalankan aplikasi JavaScript pertama anda.
Cara penulisan JavaScript mirip dengan penulisan bahasa pemograman web lainnya seperti PHP dan CSS, yakni dengan menyisipkan kode JavaScript di dalam HTML.
Silahkan buka aplikasi text editor, lalu ketikkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript di Duniailkom</title>
<script type="text/javascript">
function tambah_semangat()
{
var a=document.getElementById("div_semangat");
a.innerHTML+="<p>Sedang Belajar JavaScript, Semangat...!!!</p>";
}
</script>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di duniailkom.com </p>
Klik tombol ini untuk menambahkan kalimat baru:
<button id="tambah" onclick="tambah_semangat()">Semangaat..!!</button>
<div id="div_semangat"></div>
</body>
</html>
Savelah kode HTML diatas dengan nama: belajar_js.html. Folder tempat anda menyimpan file HTML ini tidak menjadi masalah, karena kita tidak perlu meletakkannya dalam folder web server seperti file PHP. Saya membuat sebuah folder baru di D:\BelajarHTML\Javascript. Savelah di folder tersebut.
Perhatikan bahwa nama file dari contoh JavaScript kita berakhiran .html, karena pada dasarnya kode tersebut adalah kode HTML yang ‘disiipkan’ dengan JavaScript.
Untuk menjalankan file tersebut, sama seperti HTML biasa, kita tinggal double klik belajar_js.html dan hasilnya akan tampil di dalam web browser.
Untuk menguji kode JavaScript yang telah dibuat, silahkan klik tombol “Semangaat..!!” beberapa kali, dan kalimat baru akan ditambahkan di akhir halaman web kita.
Selamat!!, anda telah berhasil menjalankan kode JavaScript.
Terlepas dari kode JavaScript yang saya tulis diatas (kita akan mempelajarinya dalam tutorial-tutorial selanjutnya), kode tersebut pada dasarnya berfungsi untuk menambahkan sebuah kalimat kedalam halaman web setelah halaman web tampil di web browser.
Fitur inilah yang membuat JavaScript menawarkan kelebihannya, dimana kita bisa merubah apapun yang terdapat dalam halaman web saat web telah dikirim ke web browser. Bahkan dengan men-klik sebuah tombol, kita bisa mengganti seluruh isi halaman web tanpa harus berpindah halaman.
Berikut tampilan akhirnya (silahkan di coba):
See the Pen Cara Menjalankan Kode Program JavaScript by duniailkom (@duniailkom) on CodePen.10206
Sebelum memulai membuat kode JavaScript, dalam tutorial berikutnya saya akan membahas tentang cara menampilkan error dan proses debugging (pencarian kesalahan) untuk JavaScript. Selanjutnya dalam tutorial javascript: Cara Menampilkan Error JavaScript (Debugging) dengan Web Browser.
tutorialnya mantap gan jadi semangat belajar lagi nih
sdh saya coba dan sdh muncul seperti gambar di atas tp kalo diklik pada kata semangaat..!! kok tdk muncul kalimat baru dibawahnya kira2 salah dimananya ya
Matur tengkyu
Wah, saya juga kurang tau salahnya dimana, saya sudah cek ulang, dan semuanya berjalan baik. Coba agan copy-paste saja kode program diatas, lalu jalankan di web browser Mozilla Firefox atau Google Chrome.
mungkin kamu lupa nambah “+” pas di a.innerHTML+=
saya jg gk bisa mas tampilan ny sih sama tapi pas klik semangat gk muncul kalimat jg saya jg udah coba copy paste tetep mas… saya nulisnya d notepad++ sama sprti d html it … mohon infony yah
Yakin sudah sama persis gan? udah di copy paste? g ada kode lain di dalam halaman itu kan?
Kalau tidak bisa juga coba test pakai web browser lain. Saya barusan coba lagi sudah langsung jalan pakai mozilla firefox. Tampilan di codepen dalam artikel ini juga lancar…
punyaku juga gitu mas padal aku cek lagi udah sama
Coba dicopy paste saja kode yang ada di halaman ini (jangan diedit2 dulu), lalu di save ke sebuah file html.
coba cek dulu smua penulisannya gan, saya awalnya coba dan belum bisa muncul kalimat tambahannya, ternyata setelah saya cek lagi., pada script saya hanya kurang pda penulisan di atribut onclik, dan saya rubah menjadi onclick :) dan hasilnya bisa gan, Mohon lebih teliti kembali saat mengcodding javascrip dan bahasa pemograman lainnya gan. Semangat…!!!
File JavaScriptnya mungkin belum dibuat
Tutorial disini semakin mantab, gk kerasa udah 1 bulan saya baru main ksini lagi.. hehehe..
btw saya tetap pelanggan setia ko mas.. :D, oiya tentang tutorial js lanjutan kapan update ya mas?.
soalnya menurut pengamatan saya hehe.. 80% programmer itu tau dasar pemrogramman seperti array, bolean, null walau implementasinya agak sedikit berbeda. namun yang membuat js terasa sulit adalah bahasanya yang terlalu flexsible yang kadang susah untuk di terka. hehe orang jadi loncat langsung ke library tanpa mau mngenal dasar. kan bingung kalau ada bug.. :v
Terimakasih untuk kunjungannya mas :)
Iya mas, tutorial JavaScript disini memang masih dasar dan belum lengkap, mudah2an tidak lama lagi saya sempatkan untuk membuat lanjutannya. Pembahasan mengenai tipe data, array, dan perulangan memang sangat dasar, dan kemungkinan besar yang ingin mempelajari JavaScript telah mengenal dasar2 ini. Mungkin bisa jadi sekedar refreshing saja.. hehe..
Perkembangan library JavaScript juga sangat cepat, selain jQuery, Angularjs, Server-side JavaScript seperti Node.js juga lagi booming, dan sangat menarik untuk dibahas.
Mantap pokokne
menyenangkan sekali tutorial disini, sangat mudah difahami sehingga nyaman untuk melakukan eksekusi coding :D ! Lanjutkan dan tingkatkan mas !!! :)
Terimakasih gan… dan selamat belajar JavaScript :)
makasih ilmunya bermanfaat mas, btw gmna cara agar tiap kalimat yg nambah berbeda2?
Kalau ingin setiap kalimatnya berbeda2, kalimat tersebut harus disimpan dalam variabel dulu mas, atau bisa digenerate sendiri, misalnya dengan “Ini kalimat 1”, “Ini kalimat 2”, dst…
Mungkin bisa lanjut dulu ke pembahasan tentang variabel :)
Terima kasih ilmunya…..saya ingin tanya mas…..fungsi nya function yg diatas untuk apa???? sepertinya tidak ada berpengaruh klw saya delete functionnya???????
Justru functionnya itu inti dari kode program JavaScriptnya mas, hehe..
Kalau dihapus, seharusnya ketika di klik tombol tidak akan keluar apa2. Mungkin setelah mas hapus, halamannya belum di-refresh lagi :)
Mas bikin website bisa tanpa beli gak, bukan pake blogger , wordpresss, dll. tapi bikin sendiri.
kalo ada tutorialnya tolong kasih tau yak
Sarannya ditampung y gan, untuk langkah awal bisa coba cek ke idhostinger.com
sangat bermanfaat sekali, terima kasih :)
gan ane mau tanya kok browser ane gak bisa nampilih habis script yang udah di buat?
Sudah dicoba pakai web browser lain gan? atau mungkin bisa diperiksa lagi kode programnya. Soalnya kalau lupa satu karakter saja, program tersebut tidak bisa berjalan.
misi tanya,kenapa ya variabel javascript yang saya tulis tidak berjalan semestinya/tidak tampil(nilainya tidak muncul pada browser)
contoh : var i = 1;
console.log (var i);
ini tidak muncul,demikian keadaan yang lainnya yang mirip dengan ini.
Kalau menggunakan perintah console.log, hasilnya memang tidak tampil di web browser sis, tetapi di tab console di menu Web Developer web browser. Untuk contohnya, bisa lanjut kesini:
Jadi,untuk menampilkan nya saya harus pakai perintah apa mas?
Console.log dan document.write sudah saya coba,tapi total tidal muncul
Setting JavaScript di browsernya juga on,Sudan saya coba di Mozilla dan chrome
Kendala saya adalah variable tidak dapat muncul din browser.tapi bila saya menulis perintah console.log("halo"); bisa.
Ini Web berat banget.
Iya gan? mudah2n dalam waktu dekat duniailkom bisa segera upgrade server :)
mksh penulis ,, semoga menjadi ilmu yg manfaat
Amiin, sama2 gan, semoga tutorialnya bermanfaat :)
Terima kasih gan. web yang sangat bermanfaat :)
selain onclick cara mengeksekusi js apa lg ya om?
Ada banyak lagi gan, misalnya onmouseover, onkeyup, onkeydown, ondblclick, onblur, onfocus dll. Hampir setiap "kejadian" yang bisa dilakukan tersedia juga event-nya. Tp untuk saat ini tutorialnya memang belum ada di duniailkom, hehe…
Keren gan ane langsung paham
Thanks for info nya gan …….. Nanti bahasa pemograman yang lain….heeeehehehehe:)
Siip, lanjut gan…
Menarik untuk dilanjutkan :)
Lanjut dulu :beer:
tutorial yg java aja mana ya ? yg belum masuk html. o.O
Saat ini belum ada gan, mudah2an nanti sempat buat tutorial khusus tentang bahasa pemrograman JAVA di duniailkom.
Mas supaya text nya tersebut muncul disebelah kanan setelah dipencet gimana caranya yaa?
{
var a=document.getElementById("div_semangat");
a.innerHTML+="<p>Sedang Belajar JavaScript, Semangat…!!!</p>";
}
Pas bagian ini kok gak bisa gan ?, itu setelah di enter di spasi ?
Copy paste saja seluruh kode yang ada di tutorial ini gan, udah langsung jalan kok…
harga bukunya berapa gan?
Untuk buku JavaScript Uncover versi eBook (softcopy) harganya 50rb. Dan sudah saya balas via email ya… terimakasih.
gan itu harus ada jquerynya atau tidak ya di dalam satu foldernya ?
Mas, kok di saya gak bisa muncul text-nya setelah klik tombol semangat.
Padahal saya pake firefox dan chrome versi terbaru.
Pas klik tombol semangat, muncul pesan error di console:
TypeError: a is null
tambah_semangat
onclick
Kodenya sudah sama persis dengan yang ada di halaman ini? bisa coba di copy paste kode programnya, takut saya ada baris yang salah ketik…
mas bagaimana cara kita menhapus data di tabel tapi di database jangan terhapus
Yang seperti ini memang harus pakai JavaScript, tapi kodenya lumayan rumit karena mesti paham konsep JavaScript secara keseluruhan, seperti DOM, event, dll.
Prinsipnya nanti data tersebut akan disembuyikan dari web browser. Contohnya bisa kesini: https://www.duniailkom.com/tutorial-belajar-jquery-cara-menghapus-elemen-html-dengan-jquery/
Makasih untuk infonya
Waaaah..! Mantep gan tutornya sangat bermaanfaat sekali meskipun saya masih agak bingung sedikit tapi saya bangga dan ttep semangat , terimakasih gan
Siip, yang penting tetap semangat untuk belajar…
Bikin komunitas mas saya juga lagi belajar … Mungkin kalo langsung bertemu di komunitas bisa lebih baik.
Siap, rencananya nanti akan ada forum duniailkom, jadi bisa diskusi disana. Mudah2an dalam beberapa bulan kedepan bisa launching.
Tp kalau ketemu langsung (gathering), kayaknya masih susah nih, hehe…
Semoga pak … Mau cari ilmu sebanyak banyak nya karena ilmu tak akan ada habisnya
kalo bs sih ketik manual aja itu semua jangan pk copy paste, biar nempel sedikit di otak haha.
btw ini work gan, tq gan. :)
Betul, sangat disarankan ketik ulang semua kode program agar paham apa saja perintah yang diketik.
Makasih min, ilmunya bermanfaat, jadi betah nongkrong di sini:v wkwkwk