Tutorial Javascript Dasar #01 – Pengenalan Javascript untuk Pemula
Tutorial Javascript Dasar Bagian 1
Pada artikel ini, kita akan belajar bersama tentang tutorial Javascript dasar, mulai dari pengenalan Javascript hingga membuat program pertama dengan Javascript tersebut. Mari kita mulai pembahasannya.
Peralatan untuk Belajar Javascript
Sebelum memulai program pertama, tentunya kita perlu menyiapkan peralatannya. Nah berikut ini peralatan yang harus disiapkan untuk belajar Javascript?
- Web Browser (Google Chrome, Firefox, Opera, dll)
- Teks Editor (rekomendasi: VS Code)
Sudah itu saja? Ya itu saja sudah cukup. Bila kalian ingin belajar Javascript dari Node JS, kalian bisa menonton video dari Trainer kami di Xsis Academy berikut ini Belajar Node JS Dari Dasar Bersama Instruktur xsis. Untuk kalian yang penasaran ingin mencoba belajar Node JS kami sangat lebih menyarankan belajar Javascript dari sisi client dulu. Setelah memahami tentang dasar-dasar JavaScript barulah nanti memulai mencoba Node JS.
Mengenal Console JavaScript
Banyak yang mengatakan belajar JavaScript sulit karena pesan error yang sering tidak muncul. Sebetulnya hal tersebut bisa kita selesaikan dengan cara memunculkan pesan error atau mencari error tersebut menggunakan console.
Console Javascript dapat kita buka melalui Inspect Element->Console.
Gambar di atas adalah contoh bagaimana code yang sudah diesekusi dan cara mencetak (menampilkan) sebuah error dan juga rangkaian kata di console. Pada gambar tersebut ada tulisan console.log() dimana fungsinya sebagai berikut :
- Untuk menampilkan teks ke console JS.
- Digunakan untuk debugging maka penting untuk kalian mengetahui cara penggunaannya, sebagai contoh kita ingin mencetak “Hallo Xsis”, kita dapat menulis
console.log("hello xsis");
Maka hasilnya :
Cara Memberi Komentar Pada Code
Komentar berguna untuk memberikan catatan dan menjelaskan kode, sebagai pengingat pada saat kita mau memperbaikinya ataupun untuk mempermudah tim dalam melanjutkan code.
Menulis komentar dapat menggunakan // di awal baris akan menjadikan baris tersebut sebagai komentar. Artinya, baris ini akan diabaikan saat code dijalankan. Berikut ini contoh menggunakan komentar dan ketika dijalankan komentar tidak akan memunculkan apapun atau merubah apapun pada console.log()
Menulis Kode JavaScript pada HTML
Kalau tadi kita sudah mengetahui console, sekarang kita akan mencoba menulis kode JavaScript. Buka teks editor kalian, kemudian buat file baru bernama hello_world.html dan isi dengan kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>Hello World JS!</title>
</head>
<body>
<script>
console.log("Sedang belajar JavaScript Nih!");
document.write("Hello World!");
</script>
</body>
</html>Kemudian silahkan disimpan, selanjutnya buka file tersebut dengan web browser kalian.
Maka hasilnya :
Seperti yang kalian ketahui tentang console di atas perintah atau fungsi console.log() akan menampilkan pesan ke dalam console javascript sedangkan document.write() berfungsi untuk menulis ke dokumen HTML, maka tulisan yang berada di dalam console.log() tidak akan tampil dan yang akan tampil adalah tulisan yang berada di dalam document.write() yang akan ditampilkan ke HTML tersebut.
Sekarang kita coba buka console javascript-nya. Nah kalau teman-teman perhatikan kita menulis baris kode berikut ini :
console.log("Sedang belajar JavaScript Nih!");Maka kita akan melihat script console.log()nya berjalan seperti berikut ini :
Bagaimana Cara Menulis Kode Javascript di HTML?
Pada contoh di atas kita sudah mengetahui bahwa tulisan di dalam console.log() tidak dapat tampil di HTML terus bagaimana kalau kita ingin menulis javascript di HTML? Kita bisa menggunakan cara penulisan embeded atau ditempel, pada cara penulisan script di atas tadi kita dapat menggunakan tag <script> untuk menempel kode JavaScript pada HTML.Tag ini dapat ditulis di dalam tag <head> dan <body>, tetapi banyak yang merekomendasikan menaruhnya di tag <body> karena proses load lebih cepat dan masih ada beberapa cara lagi untuk menulis JavaScript seperti contoh berikut ini :
Penulisan kode JavaScript Inline.
Pada cara ini, kita akan menulis kode JavaScript di dalam atribut HTML. Cara ini biasanya digunakan untuk memanggil suatu fungsi pada event tertentu. Contohnya : Saat link di klik
<a href="#" onclick="alert('Hallo Winners')">Click me!</a>atau
<a href="javascript:alert('Hallo Winners')">Click me!</a>Maka hasilnya :
Coba perhatikan, pada atribut onclick dan href kita menuliskan fungsi alert di sana. Atribut onclick merupakan atribut HTML untuk menyatakan fungsi yang akan dieksekusi saat elemen itu diklik. Fungsi ini digunakan untuk menampilkan dialog.
Lalu pada atribut href sebenarnya digunakan untuk mengisi alamat link atau URL, kerena kita ingin memanggil code javascirpt di sana, maka alamat link tersebut kita ubah menjadi javascript: lalu diikuti dengan fungsi yang akan dipanggil.
Penulisan Kode javascript Eksternal
Nah sekarang, kita akan mencoba menulis kode javascriptnya secara terpisah dengan file HTML. Biasanya cara ini paling sering digunakan, karena diyakini dengan cara ini dapat lebih mudah untuk mengelola kode-nya. Buatlah file berekstensi .js file ini nanti yang akan menyimpan kode JavaScript kita. Sebagai contoh, saya akan membuat file eksternal dengan nama index.js di file folder file hello_world.html kita tadi.
Dan isi dari file index.js adalah kode javascript yang akan kita tulis, misalnya
Maka hasilnya sebagai berikut :
Pada contoh diatas, kita berhasil menulis kode javascript terpisah dengan kode HTML. Lalu, pada kode HTML kita menyisipkannya dengan atribut src pada tag <script>. Maka kode yang ada di dalam file index.js akan dapat dibaca dari file hello_world.html
Bagaimana kalau filenya di dalam folder tersendiri atau terpisah? Maka kita bisa menulis alamat lengkap dari folder tersebut seperti contoh berikut ini kita coba pindahkan index.js ke folder js :
Maka untuk menyisipkan index.js ke dalam HTML, kita bisa menuliskannya seperti ini :
<script src="js/index.js"></script>Selain itu, kita juga bisa menyisipkan kode javascript yang ada di internet dengan cara cukup tuliskan url dari file js tersebut. Contohnya :
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Demikian pembahasan kita kali ini, tentu ini belum cukup karena kita akan melanjutkan pembahasan tentang javascript pada artikel berikut ya. Jika kalian berminat untuk belajar lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya bisa coba kunjungi social media Xsis Academy untuk info lebih lanjut mengenai Bootcamp Xsis Academy.
Selain itu kalian yang penasaran kenapa harus belajar javascript? Kalian bisa baca pada artikel sebelum tentang beberapa alasan mengapa kita harus belajar javaScript?
Temukan video tutorial lainnya dari Tim Trainer Xsis Academy pada channel ETG berikut ini Youtube Equine Technologies Group
———–
Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama
Tutorial JavaScript Dasar Lainnya
