Menyisipkan Javascript ke HTML Bagian 5

Menyisipkan Javascript ke HTML dan Menampilkannya

(Bagian 5)

Cara 5

Menggunakan perintah 

document.querySelector("  ").innerText = ".  ";

Langkah-langkahnya

Tidak saya jelaskan di sini, silahkan dicoba sendiri sebagai latihan otak-atik coding di halaman posting Blogger di bagian Tampilan HTML

Kode selengkapnya berikut :

<p class="cobalahsendiri"> </p>

<script type="text/javascript">

document.querySelector(".cobalahsendiri").innerText = "Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali";

</script>

Bisa juga begini

<p class="ikhsan"></p>

<script>

document.querySelector(".ikhsan").innerText = "Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali";

</script>

Read More

Menyisipkan Javascript ke HTML Bagian 4

Menyisipkan Javascript ke HTML dan Menampilkannya

(Bagian 4)

Cara 4

Menggunakan perintah document.getElementsByClassName("  ");

Langkah-langkahnya

Tidak saya jelaskan di sini, silahkan dicoba sendiri sebagai latihan otak-atik coding di halaman posting Blogger di bagian Tampilan HTML

Perintah ini dipakai untuk mengambil banyak elemen dalam satu kumpulan kelas, lalu menampilkannya.

Elemen pertama diberi simbol [0].

Elemen kedua diberi simbol [1].

Elemen ketiga diberi simbol [1].

Begitu seterusnya untuk elemen berikutnya.

Pemakaian angka di sini mengacu ke bilangan cacah, bukan bilangan bulat juga bukan bilangan asli. 

Namun teks yang ditulis di antara kode <p class="cobalahsendiri"> dan kode </p> tidak ditampilkan, justru yang ditampilkan adalah teks di antara kode innerText = " dan kode ”;

Untuk 1 elemen 

Kode selengkapnya berikut :

<p class="cobalahsendiri"></p>

<script type="text/javascript">

let elemen = document.getElementsByClassName("cobalahsendiri");

elemen[0].innerText = "Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali";

</script>

Untuk 3 elemen, 

Kode selengkapnya berikut :

<p class="sendiri"></p>

<p class="sendiri"></p>

<p class="sendiri"></p>

<script>

let elemen = document.getElementsByClassName("sendiri");

elemen[0].innerText = "Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali";

elemen[1].innerText = "Semangat menulis coding";

elemen[2].innerText = "Berlatihlah hingga bisa";

</script>

Hasil tampilannya berikut:

Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali

Semangat menulis coding

Berlatihlah hingga bisa

Perhatikanlah:

Untuk teks KAU, AKU, dan IA tidak ditampilkan pada kode Javascript berikut

<p style="color: blue;" class="sendiri">AKU</p>

<p style="color: darkred;" class="sendiri">KAU</p>

<p style="color: green;" class="sendiri">IA</p>

<script type="text/javascript">

let elemen = document.getElementsByClassName("sendiri");

elemen[0].innerText = "Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali";

elemen[1].innerText = "Semangat menulis coding";

elemen[2].innerText = "Berlatihlah hingga bisa";

</script>

Yang ditampilkan di halaman postingan Blogger adalah

Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali

Semangat menulis coding

Berlatihlah hingga bisa

Read More