Cara menggabungkan html dan javascript

Question

Mungkin menggunakan tag (html)?

Table of Contents Show

3. Menulis Javascript pada Atribut
4. Skrip Javascript pada URL
Di mana elemen HTML ditempatkan JavaScript?
Di mana tempat yang tepat untuk memasukkan JavaScript?
Apa itu Prompt dalam JavaScript?
Apa yang dimaksud dengan skrip HTML?

Misalnya

Kalau di javascript saya kurang tahu, tapi kalau pakai php bisa pakai fungsi include()
Semoga membantu

Berikut isi file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

4

document.write("Kode Javascript dari File Eksternal");

Maka isi dari

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

_5 adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

_

Hasil

Cobalah untuk memperhatikan

Pada kode HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

_5, kita masih menggunakan tag

document.write("Kode Javascript dari File Eksternal");

1. Namun, tag ini tidak kami isi dengan kode Javascript. Kecuali jika kita menggunakan atribut

<script src="kode-script.js">

_0 untuk menggunakan kode Javascript dalam file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

4

Oh ya, perlu diperhatikan juga

Tag

document.write("Kode Javascript dari File Eksternal");

1 harus tetap ditutup dengan

<script src="kode-script.js">

3 walaupun tidak ada isinya

Salah. ❌

<script src="kode-script.js">

BENAR. ✅

<script src="kode-script.js"></script>

Lalu bagaimana jika kode Javascript berada di folder yang berbeda dengan dokumen HTML?

Atau apakah Javascript ada di internet?

Bagaimana itu?

Untuk kode Javascript yang berada di folder yang berbeda, kita tuliskan mengikuti alamat path folder tersebut

Misalnya struktur foldernya seperti ini

Karena file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

_4 ada di dalam folder

<script src="kode-script.js">

5, maka kita harus menuliskannya

<script src="js/kode-script.js"></script>

Giaman mengerti kan?

Nah, untuk kode Javascript yang diambil dari internet, kita cukup menuliskan alamat URL dari Javascript tersebut

Contoh

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

3. Menulis Javascript pada Atribut

Penulisan Javascript pada atribut biasanya dilakukan pada atribut event

Contoh

<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>

Dalam contoh ini, kami membuat elemen

<script src="kode-script.js">

_6 dan memiliki atribut

<script src="kode-script.js">

7 yang berisi kode Javascript

Nantinya, kode javascript pada atribut

<script src="kode-script.js">

_7 akan dieksekusi ketika event klik terjadi pada elemen

<script src="kode-script.js">

6

Bisakah Javascript hanya ditulis pada atribut

<script src="kode-script.js">

7?

<script src="kode-script.js">

_7 atribut adalah salah satu atribut event di HTML, kode Javascript dapat ditulis di semua atribut event

Ingat atribut acara

Bukan atribut normal

Jika Anda ingin melihat semua atribut acara, silakan periksa di Referensi Acara

Penulisan atribut event pada HTML dimulai dengan

<script src="kode-script.js"></script>

2, misalnya untuk event

<script src="kode-script.js"></script>

3, maka pada atribut HTML ditulis

<script src="kode-script.js">

7

Contoh lain untuk pemahaman yang lebih baik

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penulisan Javascript di Atriibut</title>
</head>

<body>
    <textarea onkeyup="document.getElementById('counter').innerText = this.value.length" cols="30" rows="10"></textarea>
    <p>Panjang: <span id="counter">0</span> karakter</p>
</body>

</html>

Pada contoh ini kita menggunakan event

<script src="kode-script.js"></script>

5, sehingga dituliskan

<script src="kode-script.js"></script>

6. Kejadian ini terjadi saat kita melepaskan tombol pada keyboard

Jadi nanti ketika kita mengetikkan elemen

<script src="kode-script.js"></script>

_7, kode Javascript di

<script src="kode-script.js"></script>

6 akan dieksekusi

Kode Javascript berfungsi untuk menampilkan jumlah karakter yang diketik

Hasil

4. Skrip Javascript pada URL

Nah cara ini yang menurut saya cukup aneh

Cara ini jarang digunakan dan hampir tidak ada yang menggunakannya dalam aplikasi

Tapi masih mungkin

Caranya adalah dengan menggunakan

<script src="kode-script.js"></script>

_9 di URL diikuti dengan kode Javascript yang ingin dieksekusi

Contoh

javascript:alert("Nah! ini Javascript")

Ini diketik di bilah alamat browser

Jadi hasilnya

Catatan. Cara ini tidak bekerja di web browser versi terbaru, karena ini adalah celah yang bisa digunakan untuk serangan XSS

Jadi, bagaimana kita menggunakan metode ini dalam HTML?

Cara ini bisa kita gunakan pada tag

<script src="js/kode-script.js"></script>

_0, lalu isikan dengan atribut

<script src="js/kode-script.js"></script>

1

Contoh

document.write("Kode Javascript dari File Eksternal");

0

Hasil

Jadi ketika link

<script src="js/kode-script.js"></script>

_0 di klik maka akan membuka URL

<script src="kode-script.js"></script>

9 dan menjalankan kode Javascript yang ada disana

Di mana elemen HTML ditempatkan JavaScript?

Posisikan JavaScript Di Dalam Beri Tag . Posisi penempatan ini akan memengaruhi cara urutan kode JavaScript berjalan. Halaman HTML diproses oleh browser web dari atas ke bawah secara berurutan.