Wajah menggunakan javascript untuk memendekkan datestring

Question

Contoh di bawah "menemukan" elemen HTML (dengan id="demo"), dan mengubah konten elemen (innerHTML) menjadi "Hello JavaScript"

Table of Contents Show

JavaScript Dapat Mengubah Nilai Atribut HTML
Face Menggunakan Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 di JavaScript
Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 dasar
Hubungi Acara <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> _4
Menggunakan wajah <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> _5 klik di JavaScript
Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 dasar
Cara Membuat Tombol "Lebih Banyak" memberikan "Lebih Sedikit" dengan JavaScript
Video Penjelasan tentang Tombol HTML saat diklik

Contoh

dokumen. getElementById("demo"). innerHTML = "Halo JavaScript";

Cobalah sendiri "

JavaScript menerima tanda kutip ganda dan tunggal

Contoh

dokumen. getElementById('demo'). innerHTML = 'Halo JavaScript';

Cobalah sendiri "

JavaScript Dapat Mengubah Nilai Atribut HTML

Dalam contoh ini JavaScript mengubah nilai atribut src (sumber) dari tag

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>

4 ke tombol kita, lalu menulis fungsi JavaScript untuk mengubah warnanya
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;
}
3. Jadi, kita perlu menuliskannya dalam sebuah file JavaScript di 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;
}
4
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 ________11______3 kita
Pertama-tama, kita harus memilih elemen yang ingin kita olah, 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;
}
6
Dalam JavaScript, Anda 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;
}
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 bisa 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-variabel kita alih-alih 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 sebab variabelnya hanya bisa dibaca saja
const nama = document.querySelector(".nama");
Sekarang, karena kita sudah mendapatkan tulisannya, mari kita buat fungsi kita. Dalam JavaScript, fungsi sintaks 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 eksekusi. Itulah mengapa pengenal fungsinya (namanya) disetel menjadi <div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>
6. Jika namanya tidak berhubungan dengan apa yang ada di HTML, programnya tidak akan berjalan
Dalam DOM (Document Object Model atau Model Obyek Dokumen, merujuk ke 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 belakang latar, 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 mengubah 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>
_0Jadi, apa yang mau kita 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>
4 di HTML kita mengambil nilai-nilai warna untuk tulisan yang ingin kita ubah. Ini disebut dengan parameter dalam JavaScript. Fungsi yang akan kita tulis memilikinya juga. parameternya akan kita namakan "warna"
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>
_1Blok 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;
}
3 dalam tombol-tombol HTML
Menggunakan wajah <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. Seperti JavaScript sendiri telah berevolusi seiring berjalannya waktu, kita mulai memisahkan kode HTML, CSS, dan JavaScript supaya mengikuti praktek koding yang baik
Pendengar acara (pendengar peristiwa) membuat hal ini mungkin dilakukan karena mereka mengizinkan Anda untuk memisahkan JavaScript dari HTML. Kamu juga bisa melakukannya dengan onclick, tapi 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>
_2Sekarang, mari kita ubah tulisan freeCodeCamp menjadi biru menggunakan eventListener klik
Ini adalah HTML kita yang baru



<button onclick="fungsiUntukDijalankan()">Klik</button>
_3danini 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>
_4Kita juga bisa menyelesaikan fungsi kita dari 
<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>
5 dan fungsionalitasnya tetap sama
<button onclick="fungsiUntukDijalankan()">Klik</button>
5
Cara Membuat Tombol "Lebih Banyak" memberikan "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>
4 dan <div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>
5 "click" untuk membuat sesuatu
Saat kamu mengunjungi sebuah blog, kamu sering kali hanya bisa melihat sebagian artikelnya dulu. Setelah itu, baru kamu bisa mengeklik tombol "baca selengkapnya" untuk melihat sisanya. Mari kita coba membuatnya
Ini adalah HTMLnya
<button onclick="fungsiUntukDijalankan()">Klik</button>
_6Ini 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>
4. Fungsi yang mau kita jalankan adalah <script src="path-ke-file-javascript"></script>
5. Fungsi ini akan kita tulis sebentar lagi
Tanpa CSS, inilah yang kita punya
Ini ga gimana jeleknya, 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>
_7Apa yang CSS ini lakukan?
Dengan pemilih universal (
<script src="path-ke-file-javascript"></script>
_6), kita sedang menyingkirkan margin dan padding bawaan yang ditetapkan ke element-element, jadi kita bisa menambahkan margin dan padding kita sendiri
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
Elements 
<script src="path-ke-file-javascript"></script>
_7 kita, yang berisi tulisan, 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 di kiri dan kanan, dan <script>
  // Skripmu
</script>
1 di bawah
Tag paragraf di dalamnya memiliki ukuran tulisan 
<script>
  // Skripmu
</script>
2, lalu kita berikan juga tinggi maksimal <script>
  // Skripmu
</script>
3. Karena adanya tinggi maksimal pada element artikel, tidak semua tulisan akan ditampung, sebagian akan meluap (overflow). Untuk memperbaikinya, kita akan menyetel overflow menjadi tersembunyi (hidden) supaya tulisannya tidak ditampilkan dulu
Transisi properti memastikan bahwa semua perubahan terjadi setelah 1 detik. Semua tulisan dalam 
<script>
  // Skripmu
</script>
_4 dijustifikasi dan margin dibuat 20 piksel supaya tidak terlalu menempel ke halaman bagian atas
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>
5, memiliki sifat <script>
  // Skripmu
</script>
6 sebesar <script>
  // Skripmu
</script>
7. Ini berarti, untuk setiap elemen artikel yang mengandung kelas <script>
  // Skripmu
</script>
8, tinggi maksimalnya akan berubah dari <script>
  // Skripmu
</script>
3 menjadi <script>
  // Skripmu
</script>
7 untuk menunjukkan sisa artikelnya. Hal ini mungkin dilakukan karena JavaScript – sang pengubah permainan
Kita menghiasi 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");
1 supaya tombolnya memiliki tepian yang bulat
Terakhir, kita gunakan pseudo-class 
const nama = document.querySelector(".nama");
2 pada CSS untuk mengubah kursor tombol menjadi pointer (menunjuk). Warna latar belakangnya akan berubah sedikit saat pengguna karpetkan kursornya di atasnya
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>
4 dalam tag pembuka tombol kita yang siap menjalankan fungsi <script src="path-ke-file-javascript"></script>
_5, jadi, ayo kita buat fungsinya
Kita harus mendapatkan artikel kita dulu, karena nanti kita akan menampilkan sisanya
<button onclick="fungsiUntukDijalankan()">Klik</button>
_8Hal selanjutnya yang harus kita lakukan adalah menulis fungsi 
<script src="path-ke-file-javascript"></script>
_5, jadi kita bisa berpindah-pindah antara melihat sisa artikel dan menyembunyikan sisanya
<button onclick="fungsiUntukDijalankan()">Klik</button>
_9Apa yang dilakukan fungsi ini?
Kita menggunakan sandi ________28______6 di sini. Ini adalah bagian penting dari JavaScript yang membantu Anda membuat keputusan dalam kode Anda jika suatu kondisi terpenuhi
Syntaksis dasarnya seperti ini
<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>
0Di 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 dilindungi
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 menyelesaikan HTML dan JavaScript, namun tetap menggunakan 
<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>
4, karena onclick itu JavaScript. Jadi, kita bisa menulis kode ini dalam file JavaScript alih-alih memulai 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>
3Fungsionalitas kita tetap sama
Video Penjelasan tentang Tombol HTML saat diklik

Kesimpulan
Semoga tutorial ini membantumu memahami bagaimana event klik bekerja di JavaScript. Kami telah menjelajahi dua metode yang berbeda di sini, jadi sekarang Anda dapat mulai menggunakannya untuk proyek kodingan Anda
Terima kasih sudah membaca, tetaplah meng-koding
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
pengarang. Kolade Chris (Inggris)Pengembang web dan penulis teknis yang berfokus pada teknologi frontend
menerjemahkan. kevin matthewBaca lebih banyak posting
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. resume open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai