Cara menggunakan SOCUMENT di JavaScript

Question

Tautan membawa Anda ke bagian halaman, ke halaman lain di situs web, atau ke situs web lain. Di sisi lain, tombol biasanya dimanipulasi oleh peristiwa JavaScript sehingga dapat memicu fungsionalitas tertentu

Table of Contents Show

Cara Menggunakan Acara <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> _4 di JavaScript
Sintaks <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 dasar
Contoh Acara <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> _4
Cara Menggunakan <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 klik di JavaScript
Sintaks <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 dasar
Cara Membuat Tombol "Lebih Banyak" dan "Lebih Sedikit" dengan JavaScript
Video Penjelasan Tombol HTML onclick
Apa itu dokumen dalam javascript?
Apa cara yang benar untuk menggunakan file javascript dalam HTML?
Bagaimana javascript berjalan?
Apa itu innerHTML dalam javascript?

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

Pertama-tama, kita akan melihat

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

4 cara tradisional yang dapat Anda terapkan di halaman HTML. Nanti, kita akan melihat cara kerja "klik"

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

5 yang lebih modern, yang memungkinkan Anda memisahkan HTML dari JavaScript

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

Acara

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

_4 menjalankan fungsionalitas saat tombol diklik. Misalnya saat pengguna mengisi formulir, saat Anda mengubah konten tertentu di halaman web, dan dalam situasi lain seperti itu

Anda menempatkan fungsi JavaScript yang ingin Anda jalankan di dalam tag pembuka tombol

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

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

Sebagai contoh

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

_

Ingatlah bahwa atribut

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

4 adalah JavaScript murni. Nilai yang diterima jelas, yaitu fungsi yang ingin Anda jalankan, karena disebut di tag pembuka

Dalam JavaScript, Anda memanggil fungsi dengan menggunakan namanya, lalu menambahkan tanda kurung setelah pengidentifikasi fungsi (namanya)

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

Saya sudah menyiapkan beberapa kode HTML sederhana dengan sedikit hiasan agar kita bisa berlatih menggunakan event

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

4 di dunia nyata

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

Dan ini CSSnya juga, jadi keren, beserta semua kode lainnya misalnya

 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 kami miliki

Tujuan kami adalah mengubah warna teks menjadi biru saat kami mengklik tombol. Jadi, kita perlu menambahkan atribut

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

_4 ke tombol kita, lalu menulis fungsi JavaScript untuk mengubah warnanya

Jadi, kita perlu membuat beberapa perubahan pada HTML kita

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

Fungsi yang ingin kita lakukan 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;
}

3. Jadi, kita perlu menuliskannya di file JavaScript dengan 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;
}

4

Jika Anda ingin menulis skrip Anda dalam file JavaScript, Anda harus menautkannya ke HTML menggunakan sintaks di bawah ini

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

Jika Anda ingin menulis skrip dalam file HTML, simpan saja di tag skrip

<script>
  // Skripmu
</script>

Sekarang, mari 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;
}

3 kita

Pertama-tama, kita harus memilih elemen yang ingin kita manipulasi, yaitu teks freeCodeCamp di 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;
}

6

Dalam JavaScript, Anda dapat 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;
}

7,

 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;
}

8, atau

 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;
}

9. Kemudian, Anda dapat menyimpannya dalam sebuah variabel

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;
}

_9 karena dia lebih modern dan cepat. Saya juga akan menggunakan

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

_1 untuk mendeklarasikan variabel kita daripada menggunakan

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

2 dan

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

3, karena menggunakan

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

1 lebih aman karena variabel hanya dapat dibaca

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

Sekarang, karena kita sudah mendapatkan skripnya, mari buat fungsi kita. Dalam JavaScript, sintaks fungsi pada 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?

Ingat,

 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;
}

_3 adalah fungsi yang akan kita jalankan. Itulah mengapa pengidentifikasi fungsi (namanya) disetel ke

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

6. Jika nama tidak sesuai dengan yang ada di HTML, program tidak akan berjalan

Di DOM (Model Objek Dokumen atau Model Objek Dokumen, mengacu pada semua HTML-nya), untuk mengubah semua yang berhubungan dengan dekorasi, Anda harus menulis "gaya" diikuti dengan titik (. ). Dia diikuti oleh apa yang ingin Anda ubah, mungkin warna teks, warna latar belakang, ukuran teks, dll

Jadi, pada fungsi kita, kita akan mengambil nama variabel yang kita deklarasikan untuk mendapatkan teks freeCodeCamp nya, kemudian kita ubah warnanya menjadi biru

Warna teks kita menjadi biru setiap kali tombol diklik

Kode kami berfungsi

Kita bisa membuatnya lebih keren dengan mengubah tulisan kita menjadi berwarna

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

_0

Jadi, yang ingin kita lakukan sekarang adalah mengubah tulisan menjadi biru, hijau, dan oranye

Sekarang, fungsi

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

4 di HTML kita mengambil nilai warna untuk teks yang ingin kita ubah. Ini disebut parameter dalam JavaScript. Fungsi yang akan kita tulis juga memilikinya. parameter yang akan kita beri nama "warna"

Situs web kami telah berubah sedikit

Jadi, mari ambil skrip freeCodeCamp dan tulis fungsi untuk mengubah warnanya menjadi biru, hijau, dan oranye

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

_1

Blok kode dalam fungsi mengambil nama variabel (tempat kami menyimpan teks freeCodeCamp kami), lalu mengatur warna ke warna apa pun sesuai dengan warna yang kami berikan pada 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;
}

3 di tombol HTML

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

Dalam JavaScript, ada beberapa cara untuk melakukan hal yang sama. Karena JavaScript sendiri telah berkembang dari waktu ke waktu, kami telah mulai memisahkan kode HTML, CSS, dan JavaScript untuk mengikuti praktik pengkodean yang baik.

Pendengar acara memungkinkan ini karena memungkinkan Anda memisahkan JavaScript dari HTML. Anda juga dapat melakukannya dengan onclick, tetapi mari kita coba cara lain untuk saat ini

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

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

_2

Sekarang, mari ubah teks freeCodeCamp menjadi biru menggunakan click eventListener

Ini adalah HTML baru kami

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

_3

dan inilah hasilnya

Untuk skrip saat ini, kita perlu mengambil tombolnya juga (bukan hanya skrip freeCodeCamp). 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>

_4

Kami juga dapat memisahkan fungsi kami dari

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

5 dan fungsinya tetap sama

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

5

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

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

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

4 dan

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

5 "klik" untuk membuat sesuatu

Saat Anda mengunjungi sebuah blog, seringkali Anda hanya dapat melihat beberapa artikel terlebih dahulu. Setelah itu, Anda dapat mengklik tombol "baca lebih lanjut" untuk melihat sisanya. Mari kita coba membuatnya

Ini HTMLnya

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

_6

Ini adalah HTML sederhana dengan beberapa fakta tentang freeCodeCamp. Ada juga tombol yang telah kita sisipkan

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

4. Fungsi yang ingin kita jalankan adalah

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

5. Kami akan segera menulis fungsi ini

Tanpa CSS, inilah yang kami miliki

Ini tidak jelek, tapi kita bisa membuatnya lebih keren dan bekerja sesuai dengan yang kita inginkan. Jadi, kami memiliki beberapa CSS yang akan saya jelaskan di bawah ini

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

_7

Apa yang dilakukan CSS ini?

Dengan pemilih universal (

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

_6), kita menyingkirkan margin default dan padding yang ditetapkan ke elemen, sehingga kita dapat menambahkan margin dan padding kita sendiri

Kami juga memiliki ukuran kotak yang diisi dengan kotak pembatas sehingga kami dapat menyertakan padding dan batas dalam total lebar dan tinggi elemen.

Kami juga membuat semua yang ada di body berada di tengah menggunakan Flexbox dan membuat warna background menjadi abu-abu muda

Elemen

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

_7 kita, yang berisi teks, memiliki lebar

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

_8, latar belakang putih (#fff), dan padding

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

9 di atas,

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

9 kiri dan kanan, dan

<script>
  // Skripmu
</script>

1 di bawah

Tag paragraf di dalamnya memiliki ukuran teks

<script>
  // Skripmu
</script>

2, kemudian kami juga memberikan tinggi maksimum

<script>
  // Skripmu
</script>

3. Karena tinggi maksimum elemen artikel, tidak semua tulisan akan tertampung, sebagian akan meluap (meluber). Untuk memperbaikinya, kita akan mengatur overflow menjadi tersembunyi (hidden) agar teks tidak ditampilkan terlebih dahulu

Properti transisi memastikan bahwa semua perubahan terjadi setelah 1 detik. Semua tulisan di

<script>
  // Skripmu
</script>

_4 dibenarkan dan margin atas dibuat 20 piksel agar tidak terlalu menempel di halaman atas

Karena kami telah menghilangkan margin default, semua paragraf kami dikompresi. Jadi, kami membuat margin bawah 16 piksel sehingga paragraf terpisah satu sama lain

Pemilih kami,

<script>
  // Skripmu
</script>

5, memiliki properti

<script>
  // Skripmu
</script>

6 dari

<script>
  // Skripmu
</script>

7. Artinya, untuk setiap elemen artikel yang mengandung kelas

<script>
  // Skripmu
</script>

8, tinggi maksimum akan berubah dari

<script>
  // Skripmu
</script>

3 menjadi

<script>
  // Skripmu
</script>

7 untuk menampilkan artikel lainnya. Ini dimungkinkan karena JavaScript - pengubah permainan

Kami menghias tombol kami dengan latar belakang gelap dan membuat warna teks menjadi putih. Kami menyetel batas menjadi tidak ada untuk menghilangkan batas HTML bawaan pada tombol, lalu kami memberikan radius batas

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

1 sehingga tombol memiliki tepi yang membulat

Terakhir, kami menggunakan pseudo-class

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

2 pada CSS untuk mengubah kursor tombol menjadi pointer. Warna latar belakang akan sedikit berubah saat pengguna mengarahkan kursor ke atasnya

Selesai – itulah CSS

Halaman kami sekarang lebih indah

Hal berikutnya yang harus kita lakukan adalah menulis JavaScript sehingga kita dapat melihat artikel tersembunyi lainnya

Kami memiliki atribut

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

_4 di tag pembuka tombol kami yang siap menjalankan fungsi

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

5, jadi, mari buat fungsi

Kami harus mendapatkan artikel kami terlebih dahulu, karena kami akan menampilkan sisanya nanti

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

_8

Hal berikutnya yang harus kita lakukan adalah menulis fungsi

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

5, sehingga kita dapat beralih antara melihat sisa artikel dan menyembunyikan sisanya

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

_9

Apa yang dilakukan fungsi ini?

Kami menggunakan pernyataan

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

_6 di sini. Ini adalah bagian penting dari JavaScript yang membantu Anda membuat keputusan dalam kode Anda jika suatu kondisi terpenuhi

Sintaks dasarnya seperti ini

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

0

Di sini, jika nama kelas artikel sama dengan open (artinya kita ingin menambahkan kelas terbuka di sini, yang sebelumnya diatur ke tinggi maksimum 1000px di CSS), maka kita ingin melihat artikel selanjutnya. Di sisi lain, kami ingin artikel kembali ke keadaan semula, yaitu sebagian tulisan disembunyikan

Kita dapat melakukannya dengan menerapkan kelas terbuka ke artikel di blok else, yang akan membuatnya menampilkan sisa artikel. Kemudian, kami menyetel kelas ke string kosong (tidak ada) di blok if, yang akan mengembalikannya ke kondisi semula

Kode kami sekarang berfungsi dengan transisi yang mulus

Kita dapat memisahkan HTML dan JavaScript, tetapi tetap menggunakan

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

4, karena onclick adalah JavaScript. Jadi, kita bisa menulis kode ini di file JavaScript alih-alih mulai dari HTML

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

1

Kita juga bisa menggunakan eventListener.

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

2

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

3

Fungsi kami tetap sama

Video Penjelasan Tombol HTML onclick

Kesimpulan

Semoga tutorial ini membantu Anda memahami cara kerja acara klik di JavaScript. Kami telah menjelajahi dua metode berbeda di sini, jadi sekarang Anda dapat mulai menggunakannya untuk proyek pengkodean Anda

Terima kasih telah membaca, terus coding

Pengarang. Kolade Chris (Inggris)

Pengembang web dan penulis teknis yang berfokus pada teknologi frontend

Penerjemah. Kevin Matius

Baca lebih banyak posting

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Apa itu dokumen dalam javascript?

objek DOM di javascript bernama dokumen . Objek ini berisi semua yang kita butuhkan untuk memanipulasi HTML.

Apa cara yang benar untuk menggunakan file 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 . Kode JS yang dapat ditambahkan. antara tag

Bagaimana javascript berjalan?

Javascript cenderung sangat cepat karena dijalankan langsung di browser . Selain itu, sebagian besar browser utama mendukung kompilasi JIT (Just In Time), yang berarti tidak perlu mengompilasi kode sebelum menjalankannya.

Apa itu innerHTML dalam javascript?

innerHTML adalah properti yang digunakan untuk mendapatkan atau mengubah konten elemen itu sendiri . Dengan innerHTML, kita dapat menampilkan keluaran ke elemen yang lebih spesifik dengan menggunakan metode dokumen. getElementById(id).

kode javascript