Hai programmmer… Kali ini kita akan melanjutkan pembahasan kita sebelumnya tentang Pengenalan Javascript Lengkap. Silahkan dibaca terlebih dahulu karena artikel ini sangat berkaitan dengan artikel pembelajaran javascript part-1 sebelumnya. Kita akan coba memahami apa itu javascript output, statement, syntax juga comment, sehingga nantinya kita akan lebih mudah lagi memahami materi selanjutnya tentang Tutorial Javascript Indonesia.
Artikel pembelajaran kali ini sudah saya buat terpisah dengan harapan memudahkan kita memahami dasar-dasar javascript yang wajib kita ketahui. Silahkan anda simak dan perhatikan dengan seksama pembahasan javascript di bawah ini yang menjelaskan tentang Output, Statement, Syntax dan Comments pada javascript.
Javascript Output
Javascript dapat menampilkan data dengan bebagai cara, ialah sebagai berikut :
Baca Juga
- Menulis menjadi elemen HTML, menggunakan innerHTML.
- Menulis ke dalam output HTML menggunakan document.write().
- Menulis ke dalam kotak peringatan, menggunakan window.alert().
- Menulis ke konsol browser, menggunakan console.log().
Masih bingung? akan saya jelaskan satu persatu.
1. Menggunakan innerHTML
Untuk mengakses elemen HTML, JavaScript dapat menggunakan metode document.getElementById(id). Atribut id mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML. Perhatikan contoh di bawah ini.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <body> <h1>Percobaan Pertama</h1> <p>Halaman percobaan pertama</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body> </html> |
2. Menggunakan document.write()
Sebenarnya, saat kita sedang developing aplikasi, lebih mudah menggunakan document.write() saat pengkodean aplikasi kita untuk debuging. Perhatikan contoh berikut ini.
Contoh pertama :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <h1>Halaman pertama saya</h1> <p>Halaman pertama saya.</p> <script> document.write(5 + 6); </script> </body> </html> |
Contoh kedua :
| 1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <h1>Halaman saya</h1> <p>Halman saya</p> <button type="button" onclick="document.write(5 + 6)">Coba</button> </body> </html> |
penggunaan document.write() sebaiknya digunakan hanya untuk kebutuhan testing.
3. Menggunakan window.alert()
Anda juga bisa menggunakan window.alert() untuk menampilkan data. Perhatikan contoh berikut.
| 1 2 3 | <script> window.alert(5 + 6); </script> |
Juga anda bisa menghilangkan window saat untuk menampilkan alert. Dalam JavaScript, alert adalah objek lingkup global, yang berarti bahwa variabel, properti, dan metode secara default adalah milik si alert. Ini juga berarti bahwa menggunakan sintax window adalah opsional. Perhatikan contoh berikut :
| 1 2 3 | <script> alert(5 + 6); </script> |
4. Menggunakan console.log()
Saat anda developing, anda bisa menggunakan console.log() untuk debugging sehingga bisa menampilkan data pada browser. Perhatikan contoh berikut ini :
| 1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <script> console.log(5 + 6); </script> </body> </html> |
Javascript Statements (Pernyataan Javascript)
Javascript Statements (Pernyataan JavaScript) terdiri dari Values, Operators, Expressions, Keywords, dan Comments.
Sebagian besar program JavaScript berisi banyak pernyataan JavaScript. Pernyataan dieksekusi, satu per satu, dalam urutan yang sama seperti yang tertulis. Penjelasan tentang Javascript Statements ini saya buat terpisah agar memudahkan kita mempelajari bagian-bagian dari Pernyataan Javascript tersebut.
1. Semicolons (Titik Koma)
Titik koma memisahkan pernyataan JavaScript. Tambahkan tanda titik koma di akhir setiap pernyataan yang dapat dieksekusi:
| 1 2 3 4 | var a, b, c; // menyatakan 3 variable a = 5; // menetapkan nilai a adalah 5 b = 6; // menetapkan nilai b adalah 6 c = a + b; // menetapkan menjumlahan antara a dan b |
Ketika dipisahkan oleh titik koma, beberapa pernyataan pada satu baris juga diperbolehkan. Perhatikan contoh berikut :
| 1 | a = 5; b = 6; c = a + b; |
2. Javascript Code Blocks
Pernyataan JavaScript dapat dikelompokkan bersama dalam blok kode, di dalam kurung keriting {…}. Tujuan dari blok kode adalah untuk mendefinisikan pernyataan yang akan dieksekusi bersama. Beberapa penggunaan pada penerapan ini, anda terkadang akan menemukan pernyataan yang dikelompokkan bersama dalam blok, dalam fungsi JavaScript tersebut. Lihat contoh berikut :
| 1 2 3 4 | function myFunction() { document.getElementById("demo1").innerHTML = "Hai wak!"; document.getElementById("demo2").innerHTML = "Sehat kan?"; } |
3. Javascript Keyword
Pernyataan JavaScript sering dimulai dengan keyword untuk mengidentifikasi tindakan JavaScript yang harus dilakukan. Berikut adalah daftar beberapa keyword yang dapat anda pelajari di tutorial kali ini.
| Keyword | Description |
|---|---|
| break | Mengakhiri switch atau loop (perulangan) |
| continue | Melompat keluar dari lingkaran dan mulai di atas |
| debugger | Menghentikan eksekusi JavaScript, dan memanggil (jika ada) fungsi debugging |
| do … while | Mengeksekusi blok pernyataan, dan mengulangi blok, sementara kondisi benar |
| for | Menandai blok pernyataan yang akan dieksekusi, selama syaratnya benar |
| function | Deklarasi function |
| if … else | Menandai blok pernyataan yang akan dieksekusi, tergantung pada suatu kondisi |
| return | Exits a function |
| switch | Menandai blok pernyataan yang akan dieksekusi, tergantung pada kasus yang berbeda |
| try … catch | Menerapkan penanganan kesalahan pada blok pernyataan |
| var | Deklarasi variable |
Javascript Syntax
Sintaks JavaScript mendefinisikan dua jenis nilai: Nilai tetap dan nilai variabel. Nilai tetap disebut literal. Nilai variabel disebut variabel.
1. JavaScript Literals
Aturan paling penting untuk menulis nilai tetap adalah:
Angka ditulis dengan atau tanpa desimal:
| 1 2 3 | 10.50 1001 |
String adalah teks, ditulis dalam tanda kutip ganda atau tunggal:
| 1 2 3 | "John Doe" 'John Doe' |
2. JavaScript Variables
Dalam bahasa pemrograman, variabel digunakan untuk menyimpan nilai data. JavaScript menggunakan kata kunci var untuk mendeklarasikan variabel. Tanda yang sama juga digunakan untuk menetapkan nilai ke variabel.
Dalam contoh ini, x didefinisikan sebagai variabel. Kemudian, x diberikan (diberi) nilai 6 :
| 1 2 3 | var x; x = 6; |
Javascript Comments (Komentar pada Javascript)
Komentar JavaScript dapat digunakan untuk menjelaskan kode JavaScript, dan membuatnya lebih mudah dibaca. Komentar JavaScript juga dapat digunakan untuk mencegah eksekusi, saat menguji kode alternatif.
1. Single Line Comments
Komentar satu baris dimulai dengan //. Teks apa pun antara // dan akhir baris akan diabaikan oleh JavaScript (tidak akan dieksekusi).
Contoh ini menggunakan komentar satu baris sebelum setiap baris kode :
| 1 2 3 4 5 | // Ganti heading: document.getElementById("myH").innerHTML = "Halaman Pertamo"; // Ganti paragraf: document.getElementById("myP").innerHTML = "Halaman pertamo saya."; |
Contoh ini menggunakan komentar satu baris di akhir setiap baris untuk menjelaskan kode :
| 1 2 | var x = 5; // Deklarasi x, memberikannya nilai 5 var y = x + 2; // Deklarasi y, memberikannya nilai x + 2 |
2. Multi-line Comments
Komentar multi-baris dimulai dengan /* dan diakhiri dengan */.
Teks apa pun antara /* dan */ akan diabaikan oleh JavaScript.
Contoh ini menggunakan komentar multi-baris (blok komentar) untuk menjelaskan kode:
| 1 2 3 4 5 6 7 | /* Contoh kode ini dan itu Menampilkan data komentar hanya terlihat di dalam kodingan */ document.getElementById("myH").innerHTML = "Halaman saya"; document.getElementById("myP").innerHTML = "Halaman kita semua."; |
3. Menggunakan Komentar untuk Mencegah Eksekusi
Menggunakan komentar untuk mencegah eksekusi kode cocok untuk pengujian kode. Menambahkan // di depan baris kode mengubah baris kode dari baris yang dapat dieksekusi ke komentar.
Contoh ini menggunakan // untuk mencegah eksekusi salah satu baris kode :
| 1 2 | //document.getElementById("myH").innerHTML = "Halaman Gendeng"; document.getElementById("myP").innerHTML = "Halaman Waw mantapu."; |
Contoh ini menggunakan blok komentar untuk mencegah eksekusi beberapa baris :
| 1 2 3 4 | /* document.getElementById("myH").innerHTML = "Halaman gendeng"; document.getElementById("myP").innerHTML = "Halaman Waw mantapu."; */ |
Semoga artikel ini bermanfaat untuk memahami dasar-dasar yang wajib anda ketahui sebelum melanjutkan pembelajaran javascript lebih lengkap. Silahkan beri komentar anda jika terdapat hal-hal yang belum anda mengerti.
