Belajar Javascript es5 Dan es6 Part 2 Output Alert, InnerHTML dan Console log

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, om bewok akan melanjutkan Tutorial Javascript Part 2 Mengenai Output seperti innerHTML, alert, console log dan lain-lain.

Sebenarnya tutorial ini singkat, tapi ini termasuk bagian paling penting, karena fungsi ini untuk test debugging dalam menjalankan javascript dan lain-lain.

Alert

Alert ini berfungsi ketika kamu ingin menampilkan sebuah dialog, biasanya untuk peringatan atau untuk pemberitahuan. Biasanya ini untuk awal-awal dalam pembuatan website, karena ketika aplikasi sudah berjalan, biasanya akan diganti menggunakan sweetalert atau alert bootstrap atau yang lain, yang tampilanya lebih menarik karena user biasanya menginginkan aplikasi berjalan dengan baik dan tampilan design UI(User Interface) yang bagus dan tentunya UX(User Experience) nya mudah digunakan, tapi untuk menuju kesana tentunya kita harus belajar dasar dulu dong, jadi mari kita belajar alert. 

Gambar 1. Tampilan Alert

Penjelasanya kita hanya menggunakan alert("hello bewoksatukosong") dan bisa juga untuk menjumlahkan sesuatu tapi jangan pake tanda kutip, karena untuk angka biasanya number bukan string ya, kalian bisa coba dengan alert(20-12)

INNER HTML

Inner HTML fungsinya adalah untuk menampilkan html pada javascript tapi kita bisa menggunakan perintah html, maksudnya kita bisa menggunakan p, h1, h2 ,h3 ,h4, h5 dan lain-lain.

Gambar 2. Menampilkan html menggunakan javascript innerHTML

Nah untuk innerHTML sebenarnya sudah om bewok jelaskan pada tutorial sebelumnya walaupun hanya sekilas saja, dan ada perbedaan dari sebelumnya. Tutorial sebelumnya kita menggunakan 

getElementById tapi sekarang berubah menjadi querySelector, karena querySelector model kekinian, lebih mudah digunakan dan juga ga perlu ngetik panjang-panjang. Sebenarnya kalau mau singkat lagi, bisa pake jquery, tapi saat ini kita hanya belajar javascript, kalau sudah khatam javascript mau pake apa aja juga ayooo. 😁😁

Nah kenapa menggunakan #ganti ?  Karena selector yang kita gunakan menggunakan id jadi kita harus menggunakan #. 

Kalau misalnya kita menggunakan class berarti cara mengambilnya menggunakan "." (tanpa tanda kutip ya)

Kalau kalian pernah belajar css pasti tau cara tersebut

Selector ID = #

Selector Class = . 

Nah enaknya menggunakan InnerHTML kita bisa memasukan fungsi seperti h1, h2, p dan lain-lain, otomatis yang tadinya p bisa berubah huruf-Nya menjadi h1, maka terlihat lebih besar kan font-Nya.

Console Log

Nah ini yang paling sering digunakan oleh para programmer, ketika sedang test aplikasi, apakah button ini bekerja dengan baik atau tidak ? Sebelum dia akan  melakukan sesuatu pada Button-Nya. 

Gambar 3. Menampilkan console log 

Gambar 4. Tes button, jika button berhasil diklik maka muncul console.log menyatakan berhasil

Oke satu-satu ya kita bahas ya, seperti om bewok bilang sebelumnya, fungsi dari console.log untuk testing biasanya, 
Apakah fungsi tersebut bekerja dengan baik atau tidak.

Cara membuka console log tinggal klik kanan pada browser kamu lalu inspect lalu pilih console ya

Kita mulai yang pertama yaitu 2_consoleLog.html ini hanya menampilkan text dan juga menampilkan sebuah perkalian, sama seperti sebelumnya ketika menggunakan alert, bisa juga dalam penjumlahan, pengurangan dan lain-lain.

2_1consoleLog.html 
Nah  ini yang berbeda, tujuan-Nya kita hanya test button tersebut, apakah kalau kita klik , dia akan berhasil atau tidak

Pertama kita membuat button 
<button>click saya</button>
Selanjutnya kita membuat paragraph, tapi tidak ada isinya 
<p id="ganti"></p>

Nah mari kita mulai untuk javascript-Nya

Kita membuat variabel terlebih dahulu 
const btn = document.querySelector("button")
Intinya kita buat variabel dengan nama btn, lalu kita ambil selectorNya yang bernama button yang kita dapatkan dari <button>click saya</button>, nanti untuk penjelasan variabel, akan ada ditutorial selanjutnya mengenai variabel yaitu tentang var, let dan const. 

Intinya percakapan manusia-Nya seperti ini

"bro itu ada kotak namanya btn, masukin dah tuh si button ke kotak itu, biar kalau gue mau manggil si button tinggal tulis btn aja"

kalau belum ngerti sabar aja, lama-lama akan terungkap maksud dari ini semua#mukaJahat 😡😡

Selanjutnya kita tambahkan btn.addEventListener intinya btn ini kita suruh melakukan sesuatu nah caranya menggunakan addEventListener. 

btn.addEventListener("click", function() { 
   console.log("berhasil");
)};

Inti dari kodingan diatas adalah, dengan bahasa manusia seperti ini

"hallo btn, tolong ya kamu aku suruh untuk melakukan sesuatu, jadi pas kamu klik kamu tampilkan tulisan berhasil."  

Oh iya cara membuka console.log gampang kok dengan cara klik kanan pada browser kamu lalu pilih Inspect, lalu pilih Console, lalu kamu klik deh button-Nya lalu perhatikan pada console tersebut apakah ada tulisan-Nya ? Kalau misalnya ketika kamu klik button tersebut, tapi ga muncul apa-apa berarti masih ada yang error, coba perhatikan lagi kodingan-Nya. 

Setelah kita sudah melakukan perintah untuk btn dan berhasil, nah kita kasih tugas beneran-Nya yaitu menampilkan html tulisan-Nya <h1>haloooo coyyy</h1>

jadi ketika kamu klik sekarang, lihat browser kamu ada tulisan halooo coyy, artinya button kamu bekerja dengan baik.

Sampa jumpa pada tutorial selanjutnya, 

Source Code Github

Tutorial Series Belajar Javascript es5 & es6