Belajar Javascript Dasar

Cara Menulis Javascript

Kali ini kita langsung menulis kode Javascript pertama kita. Pertama kita tuliskan dahulu HTML Boilterplate. Kita beri isikan title Belajar Javascript. Dan di dalam tag body, kita tambahkan tag h1 dengan konten Belajar Javascript juga.

Seperti biasa, setiap kali kita mempelajari bahasa pemograman baru, maka tugas pertama kita adalah menuliskan “Hello World” menggunakan bahasa pemograman tersebut. Kita coba ya. Di sebelum tag penutup head, kita tambahkan tag script. Bisa dilihat disini ada attribute type dengan nilai text/javascript atau application/javascript. Dulunya browser sempta mendukung banyak jenis bahasa pemograman sehingga kita harus memberitahukan secara spesifik bahasa apa yang sedang kita gunakan. Namun sekarang semua browser secara default sudah menggunakan Javascript, sehingga kita boleh menghapus attribute ini.

Untuk menuliskan Hello World, kita bisa menggunakan fungsi alert. Kita bisa tuliskan nama fungsinya alert, diikuti dengan tanda kurung, dan diakhiri dengan tanda titik koma. Di dalamnya kita bisa menuliskan menuliskan kata-kata yang hendak kita tampilkan di dalam kutip ganda. Misalkan kita tuliskan “Hello World”.

Kita buka kode kita di browser. Dan browser langsung menampilkan Hello World. Selamat. Kita telah berhasil melakukan tugas pertama kita. Selanjutnya kita akan membahas bagaimana cara yang lebih baik untuk menuliskan kode Javascript.

Oke, kita review kembali kode Javascript yang barusan kita tulis. Tag Script kita tulis di dalam tag Head. Mengapa dalam tag Head? Karena standart dari HTML meminta kita untuk menaruh semua informasi meta dan script di dalam Head. Script disini termasuk CSS dan Javascript. Jadi pada saat ini kita mengikuti standart tersebut.

Sama seperti CSS, Javascript juga bisa pindahkan ke file external. Sebagai contoh, kita tambahkan dahulu file baru misalkan dengan nama latihan.js. Nama file boleh terserah, yang penting belakangnya .js ya. Kita taruh di folder yang sama dengan index.html.

Isi dari file bisa kita ambil dari isi tag script. Yaitu memanggil fungsi Alert dengan nilai parameter Hello World. Jadi isi dari file latihan.js ini keseluruhannya hanya Javascript saja. Dan isi dari file index.html pun menjadi murni HTML saja.

Selanjutnya kita perlu menghubungkan antara HTML dengan Javascriptnya. Caranya adalah dengan menambahkan attribute src atau source pada tag script. Berhubung file javascript berada di folder yang sama dengan index.html, maka kita bisa langsung menuliskan nama filenya yaitu latihan.js. Dan berhubung tag script ini tidak ada isinya, maka langsung kita sambungkan dengan tag penutupnya.

Kita simpan dan refresh browser. Kita mendapatkan hasil yang sama seperti sebelumnya. Yaitu popup dengan tulisan Hello World. Dan pada saat popup ini kita tutup, barulah keluar tulisan konten Belajar Javascript.

Dalam perkembangannya, cara menulisan javascript di dalam tag Head semakin tidak disukai oleh programmer. Penyebabnya adalah karena browser bekerja dari atas ke bawah. Jadi pada saat browser diminta untuk mengunduh kode Javascript, browser belum menemukan konten sama sekali. Akibatnya tampilan browser blank, sampai seluruh kode Javascript berhasil di unduh. Semakin besar dan banyak file javascript, maka tampilan blank tersebut menjadi semakin lama. Hal ini dapat menyebabkan pengunjung bosan menunggu dan berpindah ke halaman lain.

Dan sebagai solusinya, para programmer pun membuat standart baru. Tag Script dipindahkan ke bagian bawah, sebelum tag penutup Body. Kita coba lakukan ya. Dan kita lihat hasilnya di browser. Hasilnya tetap sama seperti sebelumnya.

Nah, ini adalah cara menuliskan Javascript yang terbaik saat ini. Tag Script dituliskan di dalam tag body, atau lebih tepatnya berada tepat sebelum tag penutup Body. Dan kita menggunakan file external latihan.js, untuk memisahkan antara kode HTML dengan kode Javascript. Yang perlu diingat disini adalah nama attributenya adalah src ya. Disini sering terjadi kesalahan tipo dengan menuliskan scr, sehingga halaman HTML menjadi tidak connect ke Javascript.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.