Scribd
Unggah
13 tayangan

Javascript Where To

Diunggah oleh

galaxyamiruddin
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
13 tayangan

Javascript Where To

Diunggah oleh

galaxyamiruddin
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

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>

Document.write(“Ini adalah teks dari JavaScript.”);

</script>

</body>

</html>

Penjelasan:
Kode di dalam tag <script> tersebut akan dieksekusi saat halaman
dimuat. Pada contoh ini, fungsi document.write() 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=”script.js”></script>

</body>

</html>

Pada contoh di atas:

Src=”script.js”: Menunjukkan lokasi file JavaScript eksternal yang akan


dimuat. Kode JavaScript dalam file script.js akan dieksekusi saat halaman
dimuat.

Isi file script.js:

Document.write(“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=”script.js”></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=”script.js” 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=”script.js” 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=”script.js”></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=”script.js”></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:

Document.getElementById(“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=”script.js” 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, script.js.

Contoh isi file script.js:

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=”script.js”></script>

</head>

<body>

<h1>Halo Dunia!</h1>

<button onclick=”tampilkanPesan()”>Tampilkan Pesan</button>

</body>

</html>

Penjelasan Contoh:

File script.js: Berisi fungsi JavaScript tampilkanPesan() yang menampilkan


pesan saat dipanggil.

Tag <script>: Menggunakan atribut src untuk menunjuk ke file script.js. 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=”script1.js”></script>

<script src=”script2.js”></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 script.js dan menautkannya ke
setiap halaman:
<!DOCTYPE html>

<html>

<head>

<script src=”script.js”></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=”style.css”>

</head>

<body>

<h1>Halo Dunia!</h1>

</body>

</html>

Di sini, href=”style.css” 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=”script.js”></script>

</head>

<body>

<h1>Halo Dunia!</h1>

<button onclick=”tampilkanPesan()”>Tampilkan Pesan</button>

</body>

</html>

Di sini, src=”script.js” 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 (style.css)
dan satu file JavaScript (script.js), kemudian menghubungkannya ke kedua
halaman.

File style.css:

Body {

Background-color: lightblue;

H1 {

Color: white;

}
File script.js:

Function tampilkanPesan() {

Alert(“Ini adalah pesan dari file JavaScript eksternal.”);

File page1.html:

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<script src=”script.js”></script>

</head>

<body>

<h1>Halo Dunia dari Halaman 1!</h1>

<button onclick=”tampilkanPesan()”>Tampilkan Pesan</button>

</body>

</html>

File page2.html:

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<script src=”script.js”></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=https://example.com/js/myScript.js></script>
</head>

<body>

<h1>Halo Dunia!</h1>

</body>

</html>

Dalam contoh ini, file myScript.js 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/myScript.js”></script>

</head>

<body>

<h1>Halo Dunia!</h1>

</body>

</html>

Di sini, myScript.js 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=”myScript.js”></script>

</head>

<body>

<h1>Halo Dunia!</h1>

</body>

</html>

Dalam contoh ini, file myScript.js 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.

Anda mungkin juga menyukai