Menyisipkan Javascript ke HTML Bagian 7

Menyisipkan Javascript ke HTML dan Menampilkannya

(Bagian 7)

Cara 7

Ini menjalankan Javascript langsung dari atribut HTML seperti onclick, onmouseover, dan lain-lain.

Ini lebih sederhana dan sangat cocok untuk efek cepat. 

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 :

<button onclick="this.innerText='Ikhsan Falihi Penyair Pinggir Kali Adalah Wisudawan Terbaik Universitas Negeri Surabaya (UNESA) Pada Wisuda XLVI Tahun 2000'">Klik saya</button>

Ingatlah tanda petik ‘    ‘ dan “    “ tidak boleh miring karena javascript tidak mau membacanya.

onclick="..." itu menjalankan JavaScript ketika tombol diklik.

this itu Mengacu ke elemen yang diklik (yaitu tombol).

innerText itu sebagai properti untuk mengubah isi teks dari elemen HTML.

'ikhsan'  itu string teks yang ditampilkan pada tombol

Kalau sudah ditampilkan di halaman Blogger, maka tampaklah tampilan kotak bertuliskan Klik saya.

Bila kotak Klik saya ditombol (diklik), maka muncullah teks berikut

Ikhsan Falihi Penyair Pinggir Kali Adalah Wisudawan Terbaik Universitas Negeri Surabaya (UNESA) Pada Wisuda XLVI Tahun 2000

Bisa juga begini

<button id="btn">Klik saya</button>

<script>

  document.getElementById("btn").onclick = function() {

    this.innerText = "Ikhsan Falihi Penyair Pinggir Kali Adalah Wisudawan Terbaik Universitas Negeri Surabaya (UNESA) Pada Wisuda XLVI Tahun 2000";

  };

</script>

Read More

Menyisipkan Javascript ke HTML Bagian 6

 

Menyisipkan Javascript ke HTML dan Menampilkannya

(Bagian 6)

Cara 6

Menggunakan pop-up alert(" ");

Langkah-langkahnya

1. Mulailah dengan menulis perintah 

alert(" "); secara manual di halaman Google Docs.

Perhatikanlah spasinya ada atau tidak, huruf demi huruf, tanda demi tanda, dan huruf besar (kapital) huruf kecilnya pada perintah tersebut. Dalam penulisan perintah huruf besar berbeda dengan huruf kecil.

2. Tulislah pesan yang anda suka di dalam tanda kutip "   ";

Tanda kutip "   " tidak boleh miring.

Misalnya saya menulis begini 

Ikhsan Yang Dikenal Dengan Sebutan Ikhsan Falihi Penyair Pinggir Kali Adalah Wisudawan Terbaik Universitas Negeri Surabaya (UNESA) Pada Wisuda XLVI Tahun 2000

sehingga kode menjadi

<script type="text/javascript">

alert("Ikhsan Yang Dikenal Dengan Sebutan Ikhsan Falihi Penyair Pinggir Kali Adalah Wisudawan Terbaik Universitas Negeri Surabaya (UNESA) Pada Wisuda XLVI Tahun 2000");

</script>

3. Seluruh kode tersebut diawali dengan perintah <script type="text/javascript"> dan diakhiri dengan </script>

sehingga kode menjadi

<script type="text/javascript">

alert("Ikhsan Yang Dikenal Dengan Sebutan Ikhsan Falihi Penyair Pinggir Kali Adalah Wisudawan Terbaik Universitas Negeri Surabaya (UNESA) Pada Wisuda XLVI Tahun 2000");

</script>

4. Copy-lah seluruh kode tersebut

5. Beralih ke Blogger.

Pilihlah menu +POSTINGAN BARU untuk membuka halaman baru.

Pilihlah menu <>

Pilihlah menu Tampilan HTML

Kemudian semua kode yang sudah di-copy dari Google Docs sekarang harus di-paste ke halaman Tampilan HTML di Blogger, bukan di Tampilan Menulis. 

6. Pilihlah Publikasikan

7. Pilihlah KONFIRMASI

8. Kembali ke menu Blogger, pilihlah (tombollah) menu Lihat Blog (yang berada di paling bawah) untuk melihat hasil tampilan kode yang terpublikasikan ke seluruh semesta raya, yang bisa dibaca oleh seluruh manusia di semua jagat raya.

Kode selengkapnya berikut :

<script type="text/javascript">

alert("Ikhsan Yang Dikenal Dengan Sebutan Ikhsan Falihi Penyair Pinggir Kali Adalah Wisudawan Terbaik Universitas Negeri Surabaya (UNESA) Pada Wisuda XLVI Tahun 2000");

</script>

Hasil tampilannya berikut:

Ikhsan Yang Dikenal Dengan Sebutan Ikhsan Falihi Penyair Pinggir Kali Adalah Wisudawan Terbaik Universitas Negeri Surabaya (UNESA) Pada Wisuda XLVI Tahun 2000

Read More