JAVASCRIPT WHERE TO
Materi <script> Tag dari W3Schools menjelaskan bahwa tag <script>
digunakan untuk menyisipkan atau menjalankan kode JavaScript di dalam
halaman HTML. Tag ini merupakan cara utama untuk menambahkan
fungsionalitas interaktif ke dalam sebuah situs web menggunakan
JavaScript.
Fungsi Tag <script>
Tag <script> memungkinkan Anda untuk:
1. Menyisipkan kode JavaScript langsung di dalam dokumen HTML.
2. Memuat file JavaScript eksternal ke dalam dokumen HTML.
Sintaks Dasar:
<script>
// Kode JavaScript di sini
</script>
1. Menyisipkan Kode JavaScript di Dalam Tag <script>
Anda dapat menuliskan kode JavaScript langsung di dalam elemen
<script> yang terletak di antara tag pembuka dan penutup <script>.
Contohnya:
<!DOCTYPE html>
<html>
<body>
<h1>Halo Dunia!</h1>
<script>
[Link](“Ini adalah teks dari JavaScript.”);
</script>
</body>
</html>
Penjelasan:
Kode di dalam tag <script> tersebut akan dieksekusi saat halaman
dimuat. Pada contoh ini, fungsi [Link]() menampilkan teks “Ini
adalah teks dari JavaScript.” Di halaman web.
2. Memuat JavaScript dari File Eksternal
Selain menulis kode JavaScript langsung di dalam dokumen HTML, Anda
juga dapat memuat kode JavaScript dari file eksternal. Ini membantu
menjaga agar HTML tetap bersih dan memudahkan pemeliharaan kode.
Contoh penggunaan file eksternal:
<!DOCTYPE html>
<html>
<body>
<h1>Halo Dunia!</h1>
<script src=”[Link]”></script>
</body>
</html>
Pada contoh di atas:
Src=”[Link]”: Menunjukkan lokasi file JavaScript eksternal yang akan
dimuat. Kode JavaScript dalam file [Link] akan dieksekusi saat halaman
dimuat.
Isi file [Link]:
[Link](“Ini adalah teks dari file eksternal JavaScript.”);
Atribut Penting dari Tag <script>:
1. Src (source): Atribut ini digunakan untuk memuat file JavaScript
eksternal. Jika digunakan, Anda tidak perlu menulis kode JavaScript
di antara tag <script>.
Contoh:
<script src=”[Link]”></script>
2. Defer: Atribut ini digunakan untuk menunda eksekusi JavaScript
sampai seluruh halaman HTML selesai dimuat. JavaScript dengan
defer akan tetap dijalankan secara berurutan.
Contoh:
<script src=”[Link]” defer></script>
3. Async: Atribut ini memungkinkan skrip JavaScript untuk dijalankan
secara asinkron, artinya skrip tidak akan menunggu pemuatan
halaman selesai sebelum dijalankan. Skrip dengan async dapat
dijalankan segera setelah dimuat, tanpa menunggu skrip lainnya.
Contoh:
<script src=”[Link]” async></script>
Lokasi Tag <script>
Tag <script> dapat ditempatkan di beberapa lokasi dalam dokumen
HTML:
1. Di dalam <head>: Menempatkan skrip di dalam tag <head>
biasanya digunakan untuk skrip yang harus dijalankan sebelum
halaman dimuat. Namun, ini bisa memperlambat pemuatan
halaman karena JavaScript akan dieksekusi sebelum konten
halaman tampil.
<head>
<script src=”[Link]”></script>
</head>
2. Di bagian bawah <body>: Cara yang lebih umum adalah
meletakkan tag <script> di bagian bawah tag <body>, sehingga
HTML halaman dimuat terlebih dahulu, dan JavaScript dijalankan
setelahnya.
<body>
<!—Konten HTML
<script src=”[Link]”></script>
</body>
Poin Penting:
Menyisipkan kode secara langsung atau eksternal: Anda bisa menulis kode
langsung di dalam tag <script> atau memuat file eksternal.
Atribut async dan defer: Digunakan untuk mengontrol waktu eksekusi
skrip agar tidak mengganggu pemuatan halaman.
Lokasi: Menempatkan tag <script> di bagian bawah halaman atau
menggunakan atribut defer dapat meningkatkan kinerja halaman karena
JavaScript tidak memperlambat pemuatan konten utama.
Dengan memahami cara kerja tag <script>, Anda dapat mengontrol
kapan dan bagaimana kode JavaScript dieksekusi di halaman web, yang
sangat penting dalam membangun situs yang interaktif dan efisien.
Berikut adalah ringkasan materi JavaScript Functions dan Events yang
dapat ditemukan di W3Schools:
JavaScript Functions
1. Definisi: Fungsi dalam JavaScript adalah blok kode yang dirancang
untuk melakukan tugas tertentu. Fungsi didefinisikan menggunakan
kata kunci function, diikuti dengan nama fungsi dan parameter
dalam tanda kurung.
Contoh sintaks:
Function namaFungsi(parameter1, parameter2) {
// kode yang akan dieksekusi
2. Parameter dan Argumen: Parameter adalah nilai yang diterima
fungsi saat dipanggil. Ketika fungsi dipanggil, argumen (nilai aktual)
diberikan kepada parameter tersebut. Di dalam fungsi, parameter
berfungsi sebagai variabel lokal.
3. Menjalankan Fungsi: Fungsi dijalankan dengan menyebutkan
namanya diikuti dengan tanda kurung, yang dapat berisi argumen.
4. Fungsi Anonim: Anda juga bisa menggunakan fungsi tanpa nama,
yang sering digunakan dalam konteks callback atau event handler.
5. Return Value: Fungsi dapat mengembalikan nilai menggunakan
pernyataan return. Jika tidak ada nilai yang dikembalikan, fungsi
akan secara otomatis mengembalikan undefined
Untuk informasi lebih lengkap, kunjungi JavaScript Functions di
W3Schools.
JavaScript Events
1. Definisi: Event adalah tindakan yang dilakukan oleh pengguna,
seperti mengklik tombol atau memindahkan mouse. JavaScript
dapat bereaksi terhadap event ini melalui event handlers.
2. Event Handling: Anda dapat menambahkan event handler ke
elemen HTML untuk mendeteksi dan merespons tindakan pengguna.
Salah satu cara untuk melakukannya adalah dengan menggunakan
metode addEventListener().
Contoh penggunaan:
[Link](“myBtn”).addEventListener(“click”, function()
{
Alert(“Tombol diklik!”);
});
3. Bubbling dan Capturing: Event di JavaScript dapat ditangani dengan
dua cara, yaitu bubbling (di mana event dimulai dari elemen paling
dalam dan mengalir ke luar) dan capturing (di mana event dimulai
dari elemen paling luar dan mengalir ke dalam).
4. Menghapus Event Listener: Anda dapat menghapus event listener
dengan menggunakan metode removeEventListener() jika tidak lagi
diperlukan.
Untuk informasi lebih lengkap tentang event, Anda bisa mengunjungi
JavaScript Events di W3Schools.
Dengan memahami fungsi dan event, Anda dapat membuat interaksi
dinamis dalam aplikasi web Anda.
Materi “JavaScript in <head> or <body>” dari W3Schools menjelaskan
tentang lokasi penempatan kode JavaScript di dalam dokumen HTML,
khususnya apakah lebih baik menempatkan kode tersebut di dalam tag
<head> atau di bagian bawah tag <body>. Pilihan ini dapat
mempengaruhi waktu eksekusi dan pemuatan halaman.
Penempatan JavaScript di <head>
Menempatkan tag <script> di dalam bagian <head> berarti bahwa skrip
akan dieksekusi sebelum konten halaman sepenuhnya dimuat. Ini dapat
menyebabkan halaman tampak lambat bagi pengguna, terutama jika
skrip memerlukan waktu untuk dimuat dan dieksekusi sebelum tampilan
konten muncul.
Contoh:
<!DOCTYPE html>
<html>
<head>
<script>
// Kode JavaScript di sini
Alert(“Skrip di dalam <head> dieksekusi sebelum konten halaman
muncul.”);
</script>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>
Penempatan JavaScript di <body>
Menempatkan tag <script> di bagian bawah tag <body> adalah praktik
yang lebih umum. Ini memungkinkan konten HTML dimuat terlebih dahulu
sebelum JavaScript dijalankan. Hal ini memberikan pengalaman pengguna
yang lebih baik karena pengguna dapat melihat konten halaman lebih
cepat, sementara JavaScript memuat di latar belakang.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h1>Halo Dunia!</h1>
<script>
// Kode JavaScript di sini
Alert(“Skrip di dalam <body> dieksekusi setelah konten halaman
muncul.”);
</script>
</body>
</html>
Kelebihan dan Kekurangan:
1. JavaScript di <head>:
Kelebihan: Cocok untuk skrip yang perlu dijalankan segera, seperti
pengaturan awal atau konfigurasi yang diperlukan sebelum konten
ditampilkan.
Kekurangan: Dapat memperlambat pemuatan halaman karena pengguna
mungkin menunggu skrip selesai dimuat sebelum melihat konten.
2. JavaScript di <body>:
Kelebihan: Pengalaman pengguna lebih baik karena konten terlihat lebih
cepat. Skrip berjalan setelah semua elemen halaman dimuat.
Kekurangan: Jika ada skrip yang perlu dijalankan sebelum konten
ditampilkan, Anda harus mempertimbangkan cara lain.
Praktik Terbaik:
Menggunakan defer: Jika Anda ingin menempatkan JavaScript di <head>
tetapi tidak ingin menghalangi pemuatan halaman, Anda bisa
menggunakan atribut defer. Skrip dengan defer akan dieksekusi setelah
konten halaman dimuat.
Contoh:
<head>
<script src=”[Link]” defer></script>
</head>
Menggunakan async: Jika Anda ingin skrip dimuat secara asinkron (tanpa
menghalangi pemuatan halaman), Anda bisa menggunakan atribut async.
Namun, tidak ada jaminan urutan eksekusi jika ada beberapa skrip.
Kesimpulan
Menempatkan JavaScript dengan bijaksana di dalam <head> atau
<body> dapat mempengaruhi kinerja halaman web. Untuk kebanyakan
kasus, menempatkan skrip di akhir tag <body> adalah praktik terbaik,
tetapi Anda juga dapat menggunakan atribut defer atau async untuk
menyesuaikan bagaimana dan kapan skrip dijalankan. Dengan
pemahaman ini, Anda dapat mengoptimalkan pemuatan halaman dan
meningkatkan pengalaman pengguna.
Materi “External JavaScript” dari W3Schools menjelaskan tentang cara
menggunakan file JavaScript eksternal untuk memisahkan kode JavaScript
dari HTML. Ini membantu dalam menjaga struktur kode yang lebih rapi
dan membuat pemeliharaan kode lebih mudah.
Apa itu External JavaScript?
External JavaScript adalah file JavaScript yang disimpan terpisah dari file
HTML. Dengan menggunakan file eksternal, Anda dapat menghindari
pengulangan kode dan meningkatkan organisasi proyek Anda. Ini juga
memungkinkan beberapa halaman HTML untuk menggunakan skrip
JavaScript yang sama, yang mengurangi ukuran file dan mempermudah
pengelolaan.
Cara Menggunakan External JavaScript
1. Buat File JavaScript: Pertama, buat file JavaScript baru dengan
ekstensi .js. Misalnya, [Link].
Contoh isi file [Link]:
Function tampilkanPesan() {
Alert(“Ini adalah pesan dari file JavaScript eksternal.”);
}
2. Sisipkan File JavaScript dalam HTML: Anda dapat menyisipkan file
JavaScript eksternal ke dalam dokumen HTML dengan menggunakan
tag <script> dan atribut src.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh External JavaScript</title>
<script src=”[Link]”></script>
</head>
<body>
<h1>Halo Dunia!</h1>
<button onclick=”tampilkanPesan()”>Tampilkan Pesan</button>
</body>
</html>
Penjelasan Contoh:
File [Link]: Berisi fungsi JavaScript tampilkanPesan() yang menampilkan
pesan saat dipanggil.
Tag <script>: Menggunakan atribut src untuk menunjuk ke file [Link]. Ini
memungkinkan file eksternal dimuat dan dieksekusi.
Tombol: Ketika tombol diklik, fungsi tampilkanPesan() dari file eksternal
akan dieksekusi dan pesan akan ditampilkan.
Keuntungan Menggunakan External JavaScript:
1. Organisasi yang Lebih Baik: Memisahkan kode JavaScript dari HTML
membuat file lebih mudah dibaca dan dikelola.
2. Reuse Kode: Anda dapat menggunakan file JavaScript yang sama di
banyak halaman HTML, mengurangi pengulangan kode.
3. Meningkatkan Kinerja: Browser dapat menyimpan file JavaScript
eksternal dalam cache, sehingga mempercepat pemuatan halaman
yang menggunakan skrip yang sama.
Poin Penting:
Anda dapat menyisipkan beberapa file JavaScript eksternal di dalam
dokumen HTML dengan menambahkan beberapa tag <script> dengan
atribut src yang berbeda.
Pastikan untuk memuat file JavaScript di bagian bawah tag <body> atau
menggunakan atribut defer agar tidak menghalangi pemuatan konten
halaman.
Contoh Menggunakan Beberapa File JavaScript Eksternal:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Beberapa External JavaScript</title>
<script src=”[Link]”></script>
<script src=”[Link]”></script>
</head>
<body>
<h1>Halo Dunia!</h1>
<button onclick=”fungsiDariScript1()”>Panggil Fungsi dari Script
1</button>
<button onclick=”fungsiDariScript2()”>Panggil Fungsi dari Script
2</button>
</body>
</html>
Kesimpulan
External JavaScript merupakan cara yang efisien untuk mengelola dan
mengorganisir kode JavaScript dalam pengembangan web. Dengan
memisahkan kode JavaScript dari HTML, Anda dapat membuat kode yang
lebih bersih, terstruktur, dan lebih mudah untuk dipelihara. Ini juga
membantu dalam meningkatkan kinerja aplikasi web dengan
memungkinkan penggunaan kembali kode di berbagai halaman.
Materi “External JavaScript Advantages” dari W3Schools menjelaskan
berbagai keuntungan menggunakan JavaScript eksternal dalam
pengembangan web. Menggunakan file JavaScript yang terpisah dari
HTML dapat memberikan banyak manfaat. Berikut adalah beberapa
keuntungan utama:
1. Pemeliharaan yang Lebih Mudah
Dengan memisahkan JavaScript dari HTML, Anda dapat dengan mudah
mengedit dan memelihara kode. Jika ada perubahan yang perlu dilakukan,
Anda hanya perlu mengedit satu file (file eksternal) alih-alih mengubah
banyak file HTML.
2. Reuse Kode
Anda dapat menggunakan file JavaScript yang sama di beberapa halaman
web. Ini mengurangi pengulangan kode dan mempermudah pengelolaan,
karena Anda tidak perlu menulis ulang kode yang sama di setiap halaman.
3. Pengurangan Ukuran Halaman HTML
Menggunakan file JavaScript eksternal membantu menjaga ukuran file
HTML tetap kecil dan bersih. Dengan tidak menyimpan kode JavaScript
langsung di dalam file HTML, Anda dapat memisahkan logika program dari
struktur halaman, membuatnya lebih mudah dibaca.
4. Kinerja yang Lebih Baik
File JavaScript eksternal dapat disimpan dalam cache oleh browser. Ketika
pengguna membuka halaman yang sama lagi, browser dapat memuat file
dari cache daripada mengunduhnya lagi, yang mempercepat waktu
pemuatan halaman.
5. Organisasi yang Lebih Baik
Menggunakan file eksternal memungkinkan pengorganisasian kode yang
lebih baik. Anda dapat memisahkan kode berdasarkan fungsi atau modul,
sehingga lebih mudah untuk memahami dan mengelola proyek yang lebih
besar.
6. Kolaborasi yang Lebih Mudah
Dalam proyek besar, di mana beberapa pengembang terlibat,
menggunakan file JavaScript eksternal memungkinkan setiap
pengembang untuk fokus pada bagian tertentu dari kode. Ini membantu
dalam kolaborasi dan mengurangi risiko konflik saat mengedit file.
7. Fleksibilitas
Anda dapat dengan mudah menambahkan atau menghapus file JavaScript
dari proyek tanpa mengubah HTML. Ini memberi Anda fleksibilitas dalam
pengembangan dan pengujian aplikasi web.
Contoh Penggunaan:
Misalkan Anda memiliki beberapa halaman HTML yang memerlukan fungsi
JavaScript yang sama. Alih-alih menyalin dan menempelkan kode ke
setiap halaman, Anda dapat membuat file [Link] dan menautkannya ke
setiap halaman:
<!DOCTYPE html>
<html>
<head>
<script src=”[Link]”></script>
</head>
<body>
<h1>Halo Dunia!</h1>
<button onclick=”fungsiUmum()”>Klik Saya</button>
</body>
</html>
Kesimpulan
Menggunakan External JavaScript memberikan banyak keuntungan dalam
pengembangan web, termasuk kemudahan pemeliharaan, pengurangan
ukuran file HTML, dan peningkatan kinerja. Dengan memanfaatkan file
JavaScript eksternal, Anda dapat membuat kode yang lebih terorganisir,
efisien, dan mudah dikelola, serta meningkatkan pengalaman pengguna
secara keseluruhan.
Materi “External References” dari W3Schools menjelaskan tentang
bagaimana cara menggunakan referensi eksternal dalam HTML,
khususnya untuk menghubungkan file JavaScript dan CSS ke dalam
halaman web. Dengan menggunakan referensi eksternal, Anda dapat
memisahkan konten, presentasi, dan perilaku dari halaman web Anda,
sehingga meningkatkan keterbacaan dan pemeliharaan kode.
Apa itu Referensi Eksternal?
Referensi eksternal merujuk pada penggunaan file terpisah (seperti file
JavaScript atau CSS) yang dapat dihubungkan ke halaman HTML Anda. Ini
memungkinkan Anda untuk menyimpan logika dan gaya di tempat
terpisah daripada menyimpannya langsung dalam file HTML.
Cara Menggunakan Referensi Eksternal
1. Referensi File CSS Eksternal: Untuk menghubungkan file CSS
eksternal, Anda menggunakan tag <link> di dalam bagian <head>
dari dokumen HTML. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Referensi CSS Eksternal</title>
<link rel=”stylesheet” type=”text/css” href=”[Link]”>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>
Di sini, href=”[Link]” menunjukkan lokasi file CSS eksternal yang akan
diterapkan pada halaman.
2. Referensi File JavaScript Eksternal: Untuk menghubungkan file
JavaScript eksternal, Anda menggunakan tag <script> dengan
atribut src. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Referensi JavaScript Eksternal</title>
<script src=”[Link]”></script>
</head>
<body>
<h1>Halo Dunia!</h1>
<button onclick=”tampilkanPesan()”>Tampilkan Pesan</button>
</body>
</html>
Di sini, src=”[Link]” menunjuk ke file JavaScript yang akan dimuat dan
dijalankan di halaman.
Keuntungan Menggunakan Referensi Eksternal
1. Organisasi Kode yang Lebih Baik:
Memisahkan HTML, CSS, dan JavaScript ke dalam file terpisah membuat
kode lebih mudah dibaca dan dikelola.
2. Reuse Kode:
Anda dapat menggunakan file CSS dan JavaScript yang sama di berbagai
halaman, sehingga mengurangi duplikasi kode.
3. Kinerja yang Lebih Baik:
Browser dapat menyimpan file CSS dan JavaScript dalam cache. Ini berarti
saat pengguna mengunjungi halaman yang sama, file tersebut dapat
dimuat lebih cepat dari cache daripada mengunduh ulang dari server.
4. Pemeliharaan yang Mudah:
Jika ada perubahan yang perlu dilakukan, Anda cukup mengedit satu file
eksternal daripada memperbarui kode di banyak halaman.
Contoh Penggunaan Referensi Eksternal
Misalkan Anda memiliki dua halaman HTML yang memerlukan gaya dan
fungsionalitas yang sama. Anda dapat membuat satu file CSS ([Link])
dan satu file JavaScript ([Link]), kemudian menghubungkannya ke kedua
halaman.
File [Link]:
Body {
Background-color: lightblue;
H1 {
Color: white;
}
File [Link]:
Function tampilkanPesan() {
Alert(“Ini adalah pesan dari file JavaScript eksternal.”);
File [Link]:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”[Link]”>
<script src=”[Link]”></script>
</head>
<body>
<h1>Halo Dunia dari Halaman 1!</h1>
<button onclick=”tampilkanPesan()”>Tampilkan Pesan</button>
</body>
</html>
File [Link]:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”[Link]”>
<script src=”[Link]”></script>
</head>
<body>
<h1>Halo Dunia dari Halaman 2!</h1>
<button onclick=”tampilkanPesan()”>Tampilkan Pesan</button>
</body>
</html>
Kesimpulan
Menggunakan External References untuk menghubungkan file CSS dan
JavaScript ke halaman HTML Anda adalah praktik yang baik dalam
pengembangan web. Ini meningkatkan organisasi, efisiensi, dan
pemeliharaan kode, serta memberikan pengalaman pengguna yang lebih
baik. Dengan memahami cara menggunakan referensi eksternal, Anda
dapat membangun aplikasi web yang lebih terstruktur dan mudah
dikelola.
Materi “External References” menjelaskan cara merujuk file JavaScript
eksternal dalam HTML. Ada tiga cara untuk mengaitkan skrip eksternal,
yaitu:
1. Menggunakan URL Penuh
Anda dapat merujuk ke skrip JavaScript menggunakan URL penuh (alamat
web lengkap). Ini berguna jika skrip berada di server atau domain lain.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh URL Penuh</title>
<script src=[Link]
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>
Dalam contoh ini, file [Link] diambil dari URL lengkap yang
ditentukan.
2. Menggunakan Jalur File
Anda dapat merujuk ke skrip JavaScript dengan jalur file, misalnya, jika file
berada dalam folder tertentu dalam proyek Anda.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Jalur File</title>
<script src=”/js/[Link]”></script>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>
Di sini, [Link] diambil dari folder js di direktori root server Anda.
3. Tanpa Jalur
Jika skrip JavaScript berada dalam direktori yang sama dengan file HTML
Anda, Anda dapat merujuknya tanpa jalur.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tanpa Jalur</title>
<script src=”[Link]”></script>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>
Dalam contoh ini, file [Link] diharapkan berada di direktori yang
sama dengan file HTML.
Kesimpulan
Dengan ketiga cara ini, Anda dapat dengan mudah merujuk ke skrip
JavaScript eksternal dalam dokumen HTML. Pilihan metode tergantung
pada struktur proyek Anda dan lokasi file skrip. Menggunakan referensi
eksternal membantu dalam menjaga kode lebih terorganisir dan
meningkatkan pemeliharaan aplikasi web Anda.