Menulis Program JavaScript Pertama Anda – HTML tidak dapat menghitung, tidak dapat mengetahui apakah seseorang telah mengisi formulir dengan benar. HTML membiarkan orang membaca teks, menonton video, melihat gambar, dan mengklik tautan. Anda memerlukan JavaScript untuk menambahkan kecerdasan ke halaman web Anda sehingga dapat merespons pengunjung situs Anda. Jadi JavaScript memungkinkan Anda membuat situs web Anda lebih menarik, efektif, dan bermanfaat.
Menulis Program JavaScript Pertama Anda
javascriptoo.com – JavaScript lebih kompleks daripada HTML atau CSS, tujuan utama buku ini adalah membantu Anda berpikir lebih seperti seorang programmer. Program JavaScript memiliki simbol semacam ini ({ } [ ] ; , () !=) dan banyak kata asing (var, null, else if). Dapat dikatakan, bahwa mempelajari bahasa pemrograman sangat mirip dengan mempelajari bahasa lain. Anda perlu mempelajari kata-kata baru dan memahami cara menyatukannya.
Tentang Program Komputer?
Menambahkan JavaScript ke halaman web berarti Anda sedang menulis program komputer. Banyak program JavaScript jauh lebih sederhana daripada program yang Anda gunakan untuk membaca email, membuat halaman web. Tetapi meskipun program JavaScript, yang juga skripnya lebih sederhana dan lebih pendek, dan berbagi banyak properti yang sama dari program yang lebih rumit.
Baca Juga : Fungsi JavaScript: Konsep Pengembangan Web Anda
Jika Anda ingin menampilkan pesan selamat datang menggunakan nama pengunjung halaman web: “Welcome, John Doe!”, Anda perlu melakukan beberapa hal:
- Tanyakan nama pengunjung;
- Dapatkan balasan pengunjung;
- Cetak pesan di halaman web.
Saat Anda ingin membuat program JavaScript, Anda harus menentukan langkah-langkah yang diperlukan untuk mencapai tujuan Anda. Setelah mengetahui langkah-langkahnya, Anda akan menerjemahkan ide-ide Anda ke dalam kode pemrograman – kata-kata dan karakter yang membuat browser web berfungsi seperti yang Anda inginkan.
Cara Menambahkan JavaScript ke Halaman
Browser web dapat memahami HTML dan CSS dan mengubah bahasa tersebut menjadi tampilan visual di layar. Peramban web mengharapkan HTML, jadi Anda harus menginstruksikan peramban dengan jelas saat JavaScript datang dengan menggunakan tag <script>.
Setelah membuka konsol pilihan Anda (seperti Node.js), Anda hanya perlu melampirkan skrip ke halaman web. Untuk menautkan Javascript ke halaman HTML, Anda perlu menggunakan elemen <script>, tag mana yang membantu kami memasukkan program Javascript ke bagian mana pun dari dokumen HTML. Misalnya:
Mari kita bahas pembukaan dan penutupan tag <script>. Jika Anda ingin menambahkan skrip ke halaman Anda, Anda harus mulai dengan menyisipkan tag, yang menyertakan skrip itu sendiri atau tautan ke file eksternal, yang berisi skrip. Dalam banyak kasus, Anda akan meletakkan tag <script> di <head> halaman untuk menjaga agar kode JavaScript Anda tertata rapi di satu bagian halaman web.
Elemen <script> memiliki beberapa atribut, yang jarang kita gunakan saat ini. Tapi kita masih bisa bertemu dengan mereka di kode lama:
Atribut tipe: <script type=…>
Untuk memiliki tipe HTML lama – HTML4, diperlukan skrip. Sebelumnya itu type=”text/javascript”, yang tidak diperlukan saat ini. Kecuali itu, standar HTML modern benar-benar mengubah arti dari atribut ini. Hari ini kita dapat menggunakannya untuk modul JavaScript. Tetapi kita akan berbicara tentang modul nanti, karena ini adalah topik lanjutan.
Atribut bahasa: <script language=…>
Atribut yang disajikan di atas dimaksudkan untuk menunjukkan bahasa naskah. Tetapi karena JavaScript adalah bahasa default, tidak perlu menggunakannya.
File JavaScript Eksternal
Seperti yang kami sebutkan sebelumnya, menggunakan tag <script> memungkinkan Anda menambahkan JavaScript ke satu halaman web. Tetapi Anda juga perlu membuat skrip yang ingin Anda bagikan dengan semua halaman di situs Anda. Tetapi hanya menyalin dan menempelkan kode JavaScript yang sama ke setiap halaman bukanlah ide yang bagus, terutama bila Anda memiliki situs dengan ratusan halaman.
Singkatnya, kami menggunakan skrip eksternal saat kami memiliki banyak kode JavaScript. Dengan begitu kita mendapatkan penggunaan kembali kode, karena satu file JavaScript dapat digunakan di beberapa halaman html. Ekstensi untuk file JavaScript adalah .js. Jika kita ingin menggunakan skrip eksternal, kita harus meletakkan nama file skrip di atribut src (sumber) dari tag <script>:
<script src=”W3DocsScript.js”></script>
Dengan bantuan atribut src, kita dapat melampirkan file skrip ke HTML.
Dalam contoh ini /path/W3DocsScript.js adalah jalur absolut untuk skrip, yang juga dapat memberikan beberapa jalur relatif dari halaman yang sama. Misalnya, src=”W3DocsScript.js” berarti file “W3DocsScript.js”.
Jika kami ingin melampirkan beberapa skrip, kami harus menggunakan beberapa tag:
<script src=”/W3DocsScript1.js”></script>
<script src=”/W3DocsScript2.js”></script>
Jika src disetel, konten skrip akan diabaikan. Artinya, satu tag <script> tidak boleh memiliki atribut src dan kode di dalamnya secara bersamaan. Itu tidak akan berhasil:
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script…</p>
<script src=”W3DocsScript.js”>
alert(“Hello, world!”); // the content is ignored, because src is set
</script>
<p>…After the script.</p>
</body>
</html>
Kita harus memilih <script> eksternal <script src=”…”>atau reguler dengan kode. Baru setelah itu, kita dapat membagi contoh ini menjadi dua skrip agar berfungsi:
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script…</p>
<script src=”W3DocsScript.js”></script>
<script>
alert(“Hello, world!”);
</script>
<p>…After the script.</p>
</body>
</html>
Program JavaScript Pertama Anda
Mari mulai memprogram, program pertama Anda akan sangat sederhana:
Buka file test1.html di editor teks favorit Anda.
Sebelum tag penutup </head> klik baris kosong dan ketik: <script>
Tekan tombol Return untuk membuat baris kosong baru, dan ketik: alert(‘Welcome to W3Docs’);
Selamat! Anda telah mengetik baris pertama kode JavaScript.
Kemudian ketik </script>. Kode akan terlihat seperti ini:
<!DOCTYPE HTML>
<html>
<head>
<link href=”../_css/style.css” rel=”stylesheet”>
</head>
<body>
<p>Before the script…</p>
<script>
alert(‘Welcome to W3Docs’);
</script>
</body>
</html>
Aktifkan browser web dan buka file test1.html untuk mempratinjaunya. Perhatikan bahwa halaman kosong saat peringatan muncul.
Dengan mengklik tombol OK pada kotak Peringatan, Anda akan menutupnya. Setelah kotak Peringatan menghilang, halaman web akan muncul di jendela browser.
Menulis Teks di Halaman Web
Skrip di bagian sebelumnya muncul di tengah monitor Anda. Tetapi jika Anda ingin mencetak pesan langsung ke halaman web menggunakan JavaScript, Anda dapat membuat perintah JavaScript bawaan:
Buka file test2.html di editor teks Anda.
Meskipun tag <script> muncul di <head> halaman web, Anda dapat menempatkannya dan program JavaScript langsung di badan halaman.
Di bawah <h1> Menulis ke jendela dokumen </h1>, ketikkan kode ini:
<!DOCTYPE HTML>
<html>
<head>
<link href=”../_css/style.css” rel=”stylesheet”>
</head>
<body>
<p>Before the script…</p>
<script>
document.write(‘<p>Welcome to W3Docs!</p>’);
</script>
</body>
</html>
Document.write() adalah perintah JavaScript seperti fungsi alert(), ia menulis apa pun yang Anda tempatkan di antara tanda kurung buka dan tutup. Dalam contoh ini HTML <p>Hello world!<p> ditambahkan ke halaman: tag paragraf dan dua kata.
Sekarang simpan halaman dan buka di browser web.
Seperti yang Anda lihat halaman terbuka dan “Welcome to w3Docs” muncul di bawah judul.
Konsol JavaScript Chrome
Banyak pengembang web lebih suka menggunakan browser Google Chrome. Atribut DevTools-nya memberi Anda banyak cara untuk memperbaiki dan menyeimbangkan masalah HTML, CSS, dan JavaScript. Konsol JavaScript adalah tempat yang bagus untuk melacak kesalahan dan kesalahan dalam kode Anda. Itu juga mengenali baris dalam kode Anda di mana setiap kesalahan terjadi.
Klik tombol Sesuaikan menu untuk membuka konsol JavaScript dan pilih Alat → Konsol JavaScript. Atau gunakan pintasan keyboard Ctrl+Shift+J (Windows) atau ⌘-Option-J (Mac) dll.
Kami biasanya menggunakan komentar JavaScript untuk menjelaskan kode JavaScript dan membuatnya lebih mudah dibaca. Mereka juga dapat digunakan untuk mencegah eksekusi selama pengujian kode alternatif.
Ada dua jenis komentar: komentar satu baris dan komentar multi-baris. Contoh yang Anda lihat di sini menggunakan komentar satu baris sebelum setiap baris kode:
<!DOCTYPE HTML>
<html>
<body>
<p>Javascript comments: //</p>
<script>
// console.log(‘Welcome to w3Docs!’);
</script>
</body>
</html>
Kami menggunakan komentar satu baris untuk menulis catatan kecil. Anda hanya perlu menambahkan // sebelum kode atau teks Anda. Perhatikan bahwa segala jenis teks antara // dan akhir baris akan diabaikan oleh JavaScript.
Mengenai komentar multi-baris, ada segmen panjang kode yang biasa kami nonaktifkan. Anda perlu menambahkan /* sebelum kode Anda dan */ setelahnya. Mulailah dengan /* dan akhiri dengan */ . Ingat, bahwa setiap teks antara /* dan */ akan diabaikan oleh JavaScript.
