Cara menggunakan TMPL pada JavaScript

Tautan-tautan membawa kamu ke suatu bagian dari sebuah halaman, ke halaman lain dari suatu situs web, atau ke situs web yang lain. Di sisi lain, tombol biasanya dimanipulasi oleh event (peristiwa) JavaScript sehingga mereka bisa memicu fungsionalitas tertentu.

Dalam tutorial ini, kita akan mengeksplorasi dua cara yang berbeda untuk mengeksekusi event klik di JavaScript menggunakan dua metode yang berbeda.

Pertama-tama, kita akan melihat cara tradisional

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Cara Menggunakan Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 di JavaScript

Event

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Kamu menempatkan fungsi JavaScript yang ingin kamu jalankan di dalam tag pembuka tombolnya.

Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 dasar

<elemen onclick="fungsiUntukDijalankan()">Klik</elemen>

Contohnya

<button onclick="fungsiUntukDijalankan()">Klik</button>

Ingatlah bahwa atribut

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Dalam JavaScript, kamu memanggil fungsi dengan menggunakan namanya, lalu menambahkan tanda kurung setelah pengenal fungsinya (namanya).

Contoh Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4

Saya sudah mempersiapkan sedikit kode HTML sederhana dengan sedikit hiasan supaya kita bisa berlatih menggunakan event

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Dan di sini ada CSSnya juga, supaya jadi keren, bersamaan dengan semua sisa kode contohnya:

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

Jadi, di halaman web, inilah yang kita punya:

Tujuan kita adalah untuk mengubah warna teks menjadi biru saat kita mengeklik tombolnya. Jadi, kita perlu menambahkan atribut

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Jadi, kita perlu membuat sedikit perubahan pada HTML kita:

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

Fungsi yang ingin kita jalankan adalah

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

Kalau kamu ingin menulis skrip kamu dalam file JavaScript, kamu harus menghubungkannya ke HTML menggunakan sintaksis di bawah ini:

<script src="path-ke-file-javascript"></script>

Kalau kamu mau menulis skripnya dalam file HTML, simpan saja dalam tag script:

<script>
  // Skripmu
</script>

Sekarang, ayo kita tulis fungsi

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

Pertama-tama, kita harus memilih elemen yang ingin kita manipulasi, yaitu tulisan freeCodeCamp dalam tag

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

Dalam JavaScript, kamu bisa melakukannya dengan metode DOM

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

Dalam tutorial ini, saya akan menggunakan

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

const nama = document.querySelector(".nama");

Sekarang, karena kita sudah mendapatkan tulisannya, mari kita buat fungsi kita. Dalam JavaScript, sintaksis fungsi dasarnya seperti ini:

function namaFungsi () {
    // Hal yang akan dilakukan
} 

Jadi, mari kita buat fungsi kita:

function ubahWarna() {
    nama.style.color = "blue";
}

Apa yang sedang terjadi?

Ingatlah,

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

Dalam DOM (Document Object Model atau Model Obyek Dokumen, merujuk kepada semua HTMLnya), untuk mengubah semua yang berkaitan dengan hiasan, kamu harus menulis “style” diikuti dengan titik (.). Dia diikuti dengan apa yang ingin kamu ubah, mungkin warna tulisannya, warna latar belakangnya, ukuran tulisan, dan lain-lain.

Jadi, di dalam fungsi kita, kita akan mengambil nama variabel yang kita deklarasikan untuk mendapatkan tulisan freeCodeCampnya, kemudian kita akan ubah warnanya menjadi biru.

Warna tulisan kita menjadi biru setiap kali tombolnya diklik:

Kode kita berhasil!

Kita bisa membuatnya lebih keren lagi dengan mengubah tulisan kita menjadi berwarna-warni:

<button onclick="fungsiUntukDijalankan()">Klik</button>

Jadi, apa yang kita mau lakukan sekarang adalah mengubah tulisannya menjadi biru, hijau, dan jingga.

Sekarang, fungsi-fungsi

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Halaman web kita berubah sedikit:

Jadi, mari kita ambil tulisan freeCodeCamp kita dan tulis fungsi untuk mengubah warnanya menjadi biru, hijau, dan jingga:

<button onclick="fungsiUntukDijalankan()">Klik</button>

Blok kode pada fungsi mengambil nama variabel (tempat kita menyimpan tulisan freeCodeCamp kita), kemudian menyetel warnanya menjadi warna apa saja sesuai warna yang kita berikan kepada fungsi-fungsi

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

Cara Menggunakan <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 click di JavaScript

Dalam JavaScript, ada beberapa cara untuk melakukan hal yang sama. Seperti JavaScript sendiri telah berevolusi seiring berjalannya waktu, kita mulai memisahkan kode HTML, CSS, dan JavaScript supaya mengikuti praktek koding yang baik.

Event listener (pendengar peristiwa) membuat hal ini mungkin dilakukan karena mereka mengizinkan kamu untuk memisahkan JavaScript dari HTML. Kamu juga bisa melakukannya dengan onclick, tetapi ayo kita coba pakai cara lain untuk saat ini.

Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 dasar

<button onclick="fungsiUntukDijalankan()">Klik</button>

Sekarang, mari kita ubah tulisan freeCodeCamp menjadi biru menggunakan eventListener klik.

Ini adalah HTML kita yang baru:

<button onclick="fungsiUntukDijalankan()">Klik</button>

Dan ini hasilnya:

Untuk skrip yang sekarang, kita perlu mengambil tombolnya juga (bukan hanya tulisan freeCodeCampnya saja). Ini dilakukan karena tidak ada JavaScript di tag pembuka tombol kita, keren kan?

Jadi, skrip kita sekarang terlihat seperti ini:

<button onclick="fungsiUntukDijalankan()">Klik</button>

Kita juga bisa memisahkan fungsi kita dari

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

<button onclick="fungsiUntukDijalankan()">Klik</button>

Cara Membuat Tombol "Lebih Banyak" dan "Lebih Sedikit" dengan JavaScript

Salah satu cara belajar terbaik adalah dengan membuat proyek, jadi mari kita gunakan apa yang sudah kita pelajari tentang

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Saat kamu mengunjungi sebuah blog, kamu sering kali hanya bisa melihat sebagian artikelnya dulu. Sesudah itu, baru kamu bisa mengeklik tombol "baca selengkapnya" untuk melihat sisanya. Mari kita coba membuatnya.

Ini adalah HTMLnya:

<button onclick="fungsiUntukDijalankan()">Klik</button>

Ini adalah HTML sederhana dengan beberapa fakta mengenai freeCodeCamp. Ada juga tombol yang sudah kami sisipkan

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

<script src="path-ke-file-javascript"></script>

Tanpa CSS, inilah yang kita punya:

Ini ga gimana jelek, tapi kita bisa membuatnya menjadi lebih keren dan bekerja sesuai dengan apa yang kita mau. Jadi, kita punya sedikit CSS yang akan saya jelaskan di bawah ini:

<button onclick="fungsiUntukDijalankan()">Klik</button>

Apa yang CSS ini lakukan?

Dengan pemilih universal (

<script src="path-ke-file-javascript"></script>

Kita juga punya box sizing (ukuran kotak) yang diisi dengan border-box jadi kita bisa memasukkan padding dan border dalam lebar dan tinggi total elemen.

Kita juga membuat semua yang ada di body menjadi di tengah menggunakan Flexbox dan membuat warna latar belakangnya menjadi abu-abu cerah.

Elemen

<script src="path-ke-file-javascript"></script>

<script src="path-ke-file-javascript"></script>

<script src="path-ke-file-javascript"></script>

<script src="path-ke-file-javascript"></script>

<script>
  // Skripmu
</script>

Tag paragraf di dalamnya memiliki ukuran tulisan

<script>
  // Skripmu
</script>

<script>
  // Skripmu
</script>

Properti transition memastikan bahwa semua perubahan terjadi setelah 1 detik. Semua tulisan dalam

<script>
  // Skripmu
</script>

Karena kita sudah menyingkirkan margin bawaan, semua paragraf kita tertekan. Jadi, kita buat margin bawahnya menjadi 16 piksel supaya paragraf-paragrafnya terpisah satu sama lain.

Penyeleksi kita,

<script>
  // Skripmu
</script>

<script>
  // Skripmu
</script>

<script>
  // Skripmu
</script>

<script>
  // Skripmu
</script>

<script>
  // Skripmu
</script>

<script>
  // Skripmu
</script>

Kita hias tombol kita dengan latar belakang gelap dan membuat warna tulisannya menjadi putih. Kita atur bordernya menjadi tidak ada (none) untuk menyingkirkan border HTML bawaan pada tombol, lalu kita berikan radius border

const nama = document.querySelector(".nama");

Terakhir, kita gunakan pseudo-class

const nama = document.querySelector(".nama");

Sudah selesai – itulah CSSnya.

Halaman kita sekarang lebih cantik:

Hal selanjutnya yang harus kita lakukan adalah menulis JavaScript supaya kita bisa melihat sisa artikel yang disembunyikan.

Kita punya atribut

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

<script src="path-ke-file-javascript"></script>

Kita harus mendapatkan artikel kita dulu, karena kita nanti akan menampilkan sisanya:

<button onclick="fungsiUntukDijalankan()">Klik</button>

Hal selanjutnya yang harus kita lakukan adalah menulis fungsi

<script src="path-ke-file-javascript"></script>

<button onclick="fungsiUntukDijalankan()">Klik</button>

Apa yang dilakukan fungsi ini?

Kita menggunakan pernyataan

const nama = document.querySelector(".nama");

Sintaksis dasarnya seperti ini:

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Di sini, jika nama kelas artikel sama dengan open (berarti kita ingin menambahkan kelas open di sini, yang sebelumnya disetel tinggi maksimalnya menjadi 1000px di CSS), maka kita ingin melihat sisa artikelnya. Sebaliknya, kita ingin artikelnya mengembalikan keadaannya menjadi seperti semula, yaitu sebagian tulisannya disembunyikan.

Kita bisa melakukannya dengan menerapkan kelas open pada artikel di blok else, yang akan membuatnya menampilkan sisa artikelnya. Kemudian, kita setel kelasnya menjadi string kosong (none) di blok if, yang akan mengembalikannya ke kondisi semula.

Kode kita sekarang bekerja dengan transisi yang mulus:

Kita bisa memisahkan HTML dan JavaScript, namun tetap menggunakan

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Kita juga bisa menggunakan eventListener:

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Fungsionalitas kita tetap sama!

A Video Explanation of HTML Button onclick

Kesimpulan

Semoga tutorial ini membantumu memahami bagaimana event klik bekerja dalam JavaScript. Kita telah mengeksplorasi dua metode yang berbeda di sini, jadi sekarang kamu bisa mulai menggunakannya untuk proyek-proyek kodingan kamu.

Terima kasih sudah membaca, tetaplah meng-koding.

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Author: Kolade Chris (English)

Web developer and technical writer focusing on frontend technologies.

Translator: Kevin Matthew

Read more posts.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Bagaimana cara penggunaan JavaScript dalam HTML?

Apa hubungan JavaScript dengan HTML?

Apakah HTML sama dengan JavaScript?

Dalam element HTML Apakah kita meletakkan JavaScript *?