Javascript adalah bahasa pemrograman yang sangat populer dan powerfull yang digunakan dalam pengembangan aplikasi berbasis web. Javascript termasuk ke dalam bahasa pemrograman client-side, yaitu program berbasis web yang dijalankan pada sisi client / oleh browser. Perlu diketahui, Javascript berbeda dengan Java.
Javascript memiliki banyak fungsi dalam membangun aplikasi berbasis web. Javascript harus dibuat dan disisipkan ke dalam aplikasi web kita jika ingin membuat website yang dinamis.
Beberapa contoh fungsi javascript antara lain:
– Mengubah isi konten, atribut HTML, maupun style (CSS).
– Membuat validasi data.
– Membuat efek.
– Dan masih banyak lagi.
Javascript tidak membutuhkan compiler sehingga dapat ditulis menggunakan text editor biasa, misalnya notepad.
Untuk menuliskan kode Javascript, kita perlu menyisipkannya ke dalam kode html dan ditempatkan di dalam tag <body> atau <head>. Kemudian, dalam membuat kode Javascript harus dimulai dengan tag <script> dan ditutup dengan </script>.
Contoh:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Hello Javascript</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script type="text/javascript"> document.writeln("<h1>Hello Javascript!</h1>"); </script> </head> <body> </body> </html> |
Kemudian simpan dengan ekstensi *.html, contohnya hello.html, kemudian jalankan di browser.
Hasilnya sebagai berikut:
Pada kode di atas, kita menuliskan kode Javascriptnya seperti ini:
|
1 2 3 |
<script type="text/javascript"> document.writeln("<h1>Hello Javascript!</h1>"); </script> |
Selain contoh di atas, kita juga bisa menuliskannya tanpa atribut type=”text/javascript” karena Javascript adalah bahasa scripting standar (default) pada HTML, sehingga dapat kita tulis seperti ini:
|
1 2 3 |
<script> document.writeln("<h1>Hello Javascript!</h1>"); </script> |
External Javascript
Pada contoh di atas, kita menuliskan kode javascriptnya di dalam kode HTML. Penulisan kode javascript itu dinamakan dengan Internal Javascript. Lalu bagaimana jika kode javascript kita sudah sangat banyak dan panjang, tentu akan sangat berat ketika dijalankan karena hanya disimpan dalam 1 file html. Untuk mengatasinya, kita bisa membuat External Javascript, yaitu kode javascript disimpan pada file yang berbeda, kemudian disimpan dengan ekstensi *.js.
Contoh:
|
1 2 |
document.writeln("<h1>Hello Javascript!</h1>"); document.writeln("<h2>Contoh External Javascript</h2>"); |
Kemudian simpan, misalnya dengan nama hello.js
Selanjutnya untuk memanggilnya, buat file html seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <script src="hello.js"></script> </body> </html> |
Kemudian simpan, misalnya dengan nama hello1.html
Ketika dijalankan, hasilnya sebagai berikut:
*Untuk memanggil file *.js, pada tag <script>, tambahkan atribut src dan masukkan nama file javascriptnya.
Untuk tutorial dan pembahasan javascript selanjutnya akan saya tulis pada tutorial selanjutnya. 😀
Studi Kasus: Membuat Kuis Sederhana Menggunakan Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html> <head> <title>Membuat Kuis Sederhana Menggunakan Javascript</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script type="text/javascript"> var soal; var jawaban; var jumlahSoal = 0; var benar = 0; var salah = 0; var pesan; document.writeln("<h1>Membuat Kuis Sederhana Menggunakan Javascript</h1><hr />"); while (jumlahSoal<3) { if (jumlahSoal==0) { soal = window.prompt("Berapa hasil 2 + 2:"); jawaban = "4"; } if (jumlahSoal==1) { soal = window.prompt(pesan + "\n\n" + "Berapa jumlah hari dalam seminggu?"); jawaban = "7"; } if (jumlahSoal==2) { soal = window.prompt(pesan + "\n\n" + "Apa kependekan Cascading Style Sheet?"); soal = soal.toLowerCase(); jawaban = "css"; } if (soal==jawaban) { benar += 1; pesan = "Jawaban Anda Benar"; } else { salah += 1; pesan = "Jawaban Anda Salah"; } jumlahSoal += 1; } document.writeln("<p>Anda menjawab : <b>" + benar + "</b> dari <b>" + jumlahSoal + "</b> soal dengan benar!</p>"); </script> </head> <body> </body> </html> |
Ketika dijalankan, hasilnya sebagai berikut:
Sekian pos kali ini, semoga bermanfaat, mohon maaf bila ada kekeliruan. 🙂
Terima kasih.
Erik Gunawan
Latest posts by Erik Gunawan (see all)
- Mudahnya Menggunakan Git di Android Studio [Part 1] - March 28, 2017
- [HackerRank Solutions] [Java] Introduction – Java Loops - May 15, 2016
- [HackerRank Solutions] [Algorithms] Warmup – Diagonal Difference - May 14, 2016
Related posts
February 12, 2015 Pertemuan 01, 09 Feb 2015: Web 2.0 Technology (0)- November 16, 2014 Java: Mengenal Method-Method dalam Class String [Bagian 7] (0)
July 20, 2014 Mudahnya Sorting Data di Java (0)- July 30, 2014 Java: Mengenal Method-Method dalam Class String [Bagian 1] (2)
- August 5, 2014 Java: Mengenal Method-Method dalam Class String [Bagian 4] (0)
March 3, 2015 Android: Siklus Hidup Activity (Activity Lifecycle) (0)
