Cara menggunakan html di javascript

Question

Panduan Referensi API AWS SDK for JavaScript V3 menjelaskan secara detail semua operasi API untuk AWS SDK for JavaScript versi 3 (V3)

Table of Contents Show

Membuat Kode JavaScript di HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> 0 Tag
Sebelum Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> _1
Sebelum Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> _2
Memanggil Kode JavaScript Eksternal dalam HTML
Sebelum Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> _1
Sebelum Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> _2
Membuat Kode JavaScript di Atribut Acara HTML
Menghasilkan Kode JavaScript di URL Tautan
Bagaimana cara menggunakan JavaScript dalam HTML?
Apakah HTML sama dengan JavaScript?
Apa hubungannya JavaScript dengan HTML?
Skrip HTML apa?

Terjemahan disediakan oleh mesin penerjemah. Jika konten yang diterjemahkan bertentangan dengan versi bahasa Inggris asli, versi bahasa Inggris yang akan berlaku

Topik ini adalah bagian dari tutorial yang membuat aplikasi AWS yang mengirim dan menerima pesan menggunakan AWS SDK for JavaScript dan Amazon Simple Queue Service (Amazon SQS). Untuk memulai di awal tutorial, lihat Membuat contoh aplikasi perpesanan

Sekarang Anda membuat file HTML yang diperlukan untuk antarmuka pengguna grafis (GUI) aplikasi. Buat file bernama index.html. Salin dan tempel kode di bawahindex.html. Referensi HTML inimain.js. Ini adalah versi bundel dari index. js, yang mencakup modul AWS SDK for JavaScript yang diperlukan

Panduan Referensi API AWS SDK for JavaScript V3 menjelaskan secara detail semua operasi API untuk AWS SDK for JavaScript versi 3 (V3)

Terjemahan disediakan oleh mesin penerjemah. Jika konten yang diterjemahkan bertentangan dengan versi bahasa Inggris asli, versi bahasa Inggris yang akan berlaku

Topik ini adalah bagian dari tutorial membuat aplikasi yang menyalin dan menampilkan pesan suara untuk pengguna yang diautentikasi. Untuk memulai di awal tutorial, lihat Membuat aplikasi transkripsi dengan pengguna yang diautentikasi

Buatindex.htmlfile, dan salin dan tempel konten di bawah ini ke dalamnya. Halaman ini menampilkan panel tombol untuk merekam pesan suara, dan tabel yang menampilkan pesan transkrip sebelumnya dari pengguna saat ini. Tag skrip di akhir elemen _______84______ memanggil _______82_______, yang berisi semua skrip browser untuk aplikasi. Anda membuat drama. js menggunakan Webpack, seperti yang dijelaskan di bagian berikut dari tutorial ini

Disini kita akan belajar dari cara-cara yang umum digunakan hingga yang jarang atau bahkan tidak disarankan untuk digunakan

Sebelum memulai, silahkan buat dulu folder atau direktori baru, kemudian buat file baru bernama

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

8 dan

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

9

Kata

<script>
  console.log('Hello World');
</script>

0 dan

<script>
  console.log('Hello World');
</script>

1 setelah titik adalah ekstensi,

<script>
  console.log('Hello World');
</script>

0 adalah ekstensi untuk file HTML sedangkan

<script>
  console.log('Hello World');
</script>

1 untuk JavaScript

Pada file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

_8 buat struktur atau tag dasar HTML, jika menggunakan Visual Studio Code ketikkan tanda seru

<script>
  console.log('Hello World');
</script>

5 kemudian tekan tombol Enter pada keyboard

Struktur direktori kita saat ini kurang lebih seperti ini

.
├── index.html
├── script.js

_

Mari kita ubah dulu file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

_8 kita, dengan menambahkan kode JavaScript yang menampilkan pesan "hello world" ke browser konsol

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

Mari buka file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

8 di browser

Jika Anda menggunakan ekstensi Live Server di Visual Studio Code, klik kanan file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

8 dan pilih opsi Open With Live Server

Jika tidak menggunakan Live Server, klik kanan file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

8 lalu pilih opsi Copy Relative Path, lalu pastekan ke address bar browser, setelah itu tekan tombol Enter

Untuk memastikan file berhasil dibuka, lihat apakah konsol browser menampilkan pesan "Hello World" atau tidak

Mari kita bahas berbagai cara membuat kode JavaScript di HTML

Membuat Kode JavaScript di HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> 0 Tag

Untuk membuat kode JavaScript di HTML kita bisa menuliskannya langsung di file HTML, namun kode JavaScript harus di tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

0

<script>
  console.log('Hello World');
</script>

Kita dapat menempatkan kode ini di tag HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

7 atau

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

8

Kita dapat menempatkannya di mana saja di tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

_7 atau

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

8, tetapi umumnya kode JavaScript ditempatkan tepat sebelum tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

1 atau

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

2

Menulis kode JavaScript di dalam file HTML dikenal sebagai Inline atau JavaScript internal

Sebelum Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> _1

Untuk menulis kode JavaScript di dalam tag HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

7, kode akan terlihat seperti ini

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

Sadarilah, kode HTML dijalankan dari atas ke bawah

Jika kita menempatkan kode JavaScript di dalam tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

_7, itu berarti kode JavaScript akan dieksekusi terlebih dahulu sebelum kode apa pun di dalam tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

8, termasuk tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

8 karena berada di bawah tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

7

Sedangkan konten di dalam tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

_8 adalah apa yang dilihat pengguna

Oleh karena itu menempatkan kode JavaScript di dalam tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

7 tidak disarankan kecuali ada alasan khusus yang mengharuskan kode JavaScript dijalankan terlebih dahulu

Selain itu, jika kode JavaScript perlu memanipulasi DOM atau HTML yang terdapat dalam tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

8, ini akan menjadi kesalahan

Mari kita buktikan, lihat kode di bawah ini

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script>
      document.getElementById('paragraf').innerHTML = 'Belajar JavaScript';
    </script>

  </head>
  <body>
    <h1 id="paragraf">Hello World</h1>
  </body>
</html>

Kode JavaScript pada tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

_7 di atas dimaksudkan untuk menggantikan teks "Hello World" pada tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>

    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

3 menjadi "Belajar JavaScript"

Namun kode ini sebenarnya error karena kode JavaScript dijalankan terlebih dahulu sebelum tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>

    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

3 dimuat

Pesan kesalahannya adalah "Uncaught TypeError. Tidak dapat mengatur properti 'innerHTML' dari null", dapat dilihat di browser konsol

Kita sebenarnya bisa mengakalinya agar kode JavaScript pada tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

7 dieksekusi setelah DOM dimuat termasuk tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

8 menggunakan event

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>

    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

7, hal ini akan kita pelajari pada materi tentang DOM

Untuk saat ini kita hanya perlu mengetahui bahwa penempatan kode JavaScript dapat mempengaruhi waktu eksekusi, karena kode pada file HTML dijalankan dari atas ke bawah.

Sebelum Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> _2

Contoh kode JavaScript di tag ________14______8

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>

    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

Karena sekarang kode HTML kita berada tepat sebelum tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

2, kita bisa memanipulasi kode HTML yang ada di dalamnya

Mari kita gunakan kode sebelumnya

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="paragraf">Hello World</h1>

    <script>
      document.getElementById('paragraf').innerHTML = 'Belajar JavaScript';
    </script>
  </body>
</html>

Kode di atas berhasil mengubah teks “Halo Dunia” pada tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>

    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

3 menjadi “Belajar JavaScript” karena tag dimuat sebelum kode JavaScript

Memanggil Kode JavaScript Eksternal dalam HTML

Memanggil atau memuat kode JavaScript yang berada di luar file HTML disebut JavaScript eksternal

Arti eksternal adalah bahwa kode JavaScript tidak berada di dalam file HTML saat ini atau memanggil

Untuk memanggil file JavaScript eksternal yang mirip dengan inline, kita dapat menggunakan tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

0

Hanya saja kita tidak perlu memasukkan kode JavaScript diantara tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

0 dan

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="paragraf">Hello World</h1>

    <script>
      document.getElementById('paragraf').innerHTML = 'Belajar JavaScript';
    </script>
  </body>
</html>

4

Kita hanya perlu menambahkan atribut

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="paragraf">Hello World</h1>

    <script>
      document.getElementById('paragraf').innerHTML = 'Belajar JavaScript';
    </script>
  </body>
</html>

_5 (sumber) untuk menyatakan lokasi file JavaScript yang ingin kita panggil

Kita dapat memanggil file JavaScript yang ada di penyimpanan lokal, kode di bawah ini memanggil file bernama

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

9 yang berada di direktori yang sama dengan file HTML yang memanggil

.
├── index.html
├── script.js

________52______

Jika berada di direktori yang berbeda tetapi direktori yang berisi file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

9 sejajar dengan file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

8

.
├── index.html
├── js
    └── script.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

0

Jika masing-masing berada di direktori yang berbeda, tetapi dua direktori yang berisi

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

9 dan

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

8 disejajarkan

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

2

Notasi titik ganda

.
├── index.html
├── script.js

_1 digunakan untuk keluar dari direktori saat ini, naik ke sana

Atau, sebut JavaScript yang tersedia di internet, jQuery misalnya

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

_3

Cara ini dianggap sebagai praktik terbaik karena kode JavaScript tidak dicampur dengan kode HTML, sehingga kode kita lebih mudah dipelihara

Apalagi jika kode JavaScript dipanggil tepat setelah tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

2, karena kode JavaScript dijalankan setelah konten HTML yang dilihat pengguna dimuat

Urutan eksekusi kode dalam file HTML diperbaiki dari atas ke bawah, perilakunya sama seperti jika kita menulis kode JavaScript sebaris

Sebelum Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> _1

Contoh pemanggilan JavaScript eksternal tepat sebelum tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

1

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

_4

Sebelum Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> _2

Contoh memanggil JavaScript eksternal tepat sebelum

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

2 tag

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

5

Membuat Kode JavaScript di Atribut Acara HTML

Kita juga bisa menyisipkan kode JavaScript pada atribut event HTML, ada banyak yang bisa kita gunakan, misalnya mari kita gunakan

.
├── index.html
├── script.js

7

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

_6

Kode html di atas akan membuat dua tombol yaitu tombol Confirm dan Log

Ketika tombol Confirm diklik, maka browser akan mengeksekusi kode JavaScript yang kita sematkan pada atribut event

.
├── index.html
├── script.js

7 dalam hal ini kode untuk menampilkan popup konfirmasi yang berisi teks "Pelajari JavaScript"

Sedangkan tombol Log, akan menuliskan pesan “Learn JavaScript” ke console browser

Kalau bisa jangan pakai cara ini karena kita bisa melakukan hal yang sama dengan menggunakan DOM, tapi lebih rapi

Menghasilkan Kode JavaScript di URL Tautan

Metode ini hanya untuk informasi, jangan pernah menggunakannya

Cara ini mungkin tidak bekerja pada beberapa browser karena sering digunakan untuk melakukan serangan XSS, beberapa browser dilengkapi dengan fitur untuk melindungi serangan ini

Untuk menulis kode JavaScript di URL, kita dapat membuat tag

.
├── index.html
├── script.js

9 dan memasukkannya ke dalam atribut

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

0, kode yang kita buat harus diawali dengan kata kunci

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

1

indeks. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

_7

Saat kita mengklik teks "Tautan", browser akan mengeksekusi kode JavaScript di atribut

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

0

Selain menyisipkan di atribut

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

_0, kita juga bisa langsung menuliskannya di address bar browser, coba ketikkan

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

4

Kesimpulan

Ada beberapa cara yang bisa kita gunakan untuk membuat JavaScript di HTML, kita bisa menulisnya langsung di file HTML (inline), memanggil file JavaScript eksternal, di event atribut tag HTML, bahkan di URL

Bagaimana cara menggunakan JavaScript dalam HTML?

Anda dapat langsung menambahkan JavaScript di HTML dengan menggunakan tag yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis . Kode JS yang dapat ditambahkan. antara tag

Apakah HTML sama dengan JavaScript?

Sederhananya HTML adalah framework dasar dari sebuah situs web atau aplikasi. Adapun JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website/aplikasi agar lebih dinamis dan interaktif selain JavaScript juga dapat digunakan untuk pemrosesan logika data.

Apa hubungannya JavaScript dengan HTML?

Pengembang web umumnya menggunakan JavaScript bersama dengan HTML dan CSS karena ketiganya bisa bekerja sama tanpa masalah. JavaScript adalah script pemrograman, HTML berfungsi untuk mengatur struktur dari website, dan CSS untuk mendesain dan menata tata letak halaman website.

Skrip HTML apa?

HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan pengguna untuk membuat dan mengatur judul, paragraf, link atau link, dan blockquotes untuk halaman website.

kode javascript