Dasar-Dasar Javascript

Pengantar

Saat tulisan ini dibuat, Javascript merupakan bahasa pemrograman yang paling banyak digunakan (sumber : github). Hal tersebut tidak lepas dari massive-nya penggunaan Javascript pada berbagai platform. Pada awal perkembangannya, Javascript merupakan bahasa pemrograman untuk platform web. Namun demikian, seiring dengan perkembangan zaman, bahasa ini telah menjelma menjadi bahasa multiplatform (tentu dengan berbagai modifikasi).

Banyak orang mengira bahwa Javascript merupakan evolusi dari bahasa java, atau bahkan masih banyak yang mengira kedua bahasa tersebut adalah sama. Padahal pada faktanya, kedua bahasa tersebut merupakan bahasa yang berbeda.

Pada tutorial kali ini, kita akan mencoba untuk mempelajari dasar-dasar dari Javascript. Sebagaimana disebut sebagai dasar, maka kita akan menggunakan Javascript pada platform awal dia dilahirkan, yaitu pada website.

Sebelum dijelaskan lebih lanjut, mari kita coba terlebih dahulu potongan kode program berikut

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 

Potongan kode tersebut diambil dari laman w3school, sebagai pengantar untuk ujicoba kita lebih lanjut. Perhatikan pada tag <button>!. Jika diperhatikan dengan seksama, maka kita akan sadar bahwa kita telah menyisipkan fungsi onclick. Fungsi tersebut di eksekusi dengan perintah JavaScript berupa “document.getElementById(‘demo’).innerHTML = date()”. Apa maksud dari kode program tersebut, mari kita bahas satu persatu.

  • document.getElementById(‘demo’), memiliki arti bahwa kita telah memberikan perintah pada Javascript untuk mendapatkan tag html dengan id = demo. Ketika perintah tersebut dieksekusi, maka Javascript akan menjadi id demo di seluruh halaman web.
  • innerHTML, memilliki fungsi untuk mengisi konten dari sebuah tag html dengan id=”demo”. Artinya setelah dicari dengan perintah document.getElementById(‘demo’), langkah berikutnya adalah kontennya diisi.
  • date(), apa maksudnya? date disana merupakan salah satu fungsi Javascript yang berguna untuk mendapatkan waktu komputer. Sampai, titik ini Anda tidak perlu tahu lebih banyak tentang fungsi date. Yang Anda wajib pahami adalah bahwa suatu tag HTML bisa diisi nilainya dengan perintah innerHTML, dan isinya tentu saja bebas. Salah satu yang bisa jadi isinya adalah nilai date tersebut.

Dimana menempatkan JavaScript?

Sama seperti halnya CSS, Javascript juga memiliki beberapa cara untuk penempatannya. Ditempatkan pada file html-nya, disisipkan pada tag, serta file external. Istilah umumnya adalah internal, ekternal dan juga inline. Pada tutorial ini, kita tidak akan membahas lebih lanjut tentang penempatan Javascript, karena prinsipnya masih sama dengan CSS yang bisa Anda pelajari kembali pada materi CSS.

Untuk menempatkan menyisipkan Javascript pada suatu halaman web, kita biasanya menggunakan tag <script>. Jika javascript tersebut berapa di file eksternal, kita bisa menggunakan perintah berikut

<script src="nama_file_javascript.js"></script>

Kelebihan Penempatan Javascript Eksternal

Penempatan Javascript secara eksternal memiliki beberapa kelebihan, diantaranya adalah:

  1. Memisahkan HTML dan kode program Javascript
  2. Membuat HTML dan Javascript lebih mudah untuk dibaca dan dipelihara
  3. Javascript yang telah di cache, akan lebih cepat diload oleh browser

Keluaran Javascript

Setiap belajar bahasa pemrograman baru, rasanya tidak afdol kalau belum mengetahui bagaimana cara untuk menampilkan sebuah luaran (output). Pada Javascript, sebuah output bisa disajikan dengan beberapa cara

  1. Menggunakan innerHTML, yang bermanfaat agar kita bisa menyisipkan dokumen output diantara tag-tag html
  2. Menggunakan perintah document.write(). Perintah ini berfungsi untuk menampilkan sebuah keluaran langsung pada body html, bukan diantara disisipkan diantara tag-tag html yang ada.
  3. Menggunakan perintah window.alert(). Ketika ada menggunakan perintah tersebut, maka output dari Javascript-nya akan disajikan melalui pop up windows

Untuk lebih memahami cara kerjanya, mari kita coba satu-satu.

innerHTML

<!DOCTYPE html>
<html>
<body>

<p id="ptiumtas"></p>

<script>
document.getElementById("ptiumtas").innerHTML = "Kita masukan teks ke tag p, dengan id = ptiumtas";
</script>

</body>
</html> 

Keluaran dari html tersebut adalah

Kita masukan teks ke tag p, dengan id = ptiumtas

document.write()

<!DOCTYPE html>
<html>
<body>

<p>Teks ini akan tetap ada disini</p>

<script>
document.write("Dan teks ini dihasilkan oleh Javascript");
</script>

</body>
</html> 

Keluaran dari html tersebut adalah

Teks ini akan tetap ada disini

Dan teks ini dihasilkan oleh Javascript

window.alert()

<!DOCTYPE html>
<html>
<body>

<p>Coba klik tombol dibawah</p>

<button type="button" onclick="window.alert('Saya Jadi Alert')">Klik Saya</button>

</body>
</html> 

Keluaran dari kode HTML diatasa adalah

Setelah, tombol klik saya di klik. Maka akan muncul alert seperti pada gambar berikut

About the Author

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You may also like these

Mulai Chat
Butuh Bantuan?
Hi, selamat datang di Prilude Academy. Ada yang bisa kami bantu?

Kami siap membantu Anda pada jam kerja :)