Beranda > html > Mengetik Realtime dengan Document Object Model

Mengetik Realtime dengan Document Object Model

Mengetik Realtime dengan Document Object Model tutorial html web desain grafisPada kesempatan kali  ini saya akan membawakan tutorial judulnya “Ngetik Realtimen dengan Document Object Model” maksudnya itu saat kita ngetik di input box,atau textarea hasil ketikan kita  dapat langsung display di tempat yang kita inginkan, bisa huruf per huruf  maupun dapat kita setting kata per kata.  caranya cukup sederhana yaitu adalah memanipulasi dengan DOM. Apa itu DOM, anda dapat membacanya disini namun saya lebih menyebutnya yaitu cara untuk mendinamiskan ke-statis-an html.

sudah banyak library javascript yang memudahkan kita untuk mendinamiskan  tampilan html tanpa harus merefresh browser dengan DOM ini, seperti library prototype, mootools, jquery, DOJO ,  dan masih banyak lagi.
listnya saya sudah bundle di javascript:framework

ok langsung saja … pertama yang akan kita buat yaitu halaman html.
berikut code halaman html yang saya buat untuk tutorial ini

———————————————————-
<html>
<head>
<TITLE>ngetik realtime</TITLE>
</head>

<body>

<textarea id=”tempatMengetik”></textarea>

<div id=”hasilKetikan”></div>

</body>
</html>
————————————————————

setelah itu simpan dengan ketik.html

anda lihat kembali file ketik.html
disana ada elemen textarea yang di beri id=”tempatMengetik”,
dan sebuah div yang di beri id=”hasilKetikan” dimana di dalam div  inilah hasil ketikan dan kita menginput huruf di textarea akan muncul.

lalu edit file ketik.html tadi dan tambahkan barisan javascript berikut

————————————————————-
<script>
function displayType(){
var inputKetikan =  document.getElementById(“tempatMengetik”);
var targetKetikan =  document.getElementById(“hasilKetikan”);
targetKetikan.innerHTML = inputKetikan.value;
}
</script>
————————————————————-

dan sebuah event onkeyup pada element textarea

————————————————————–
<textarea id=”tempatMengetik”  onkeyup=”displayType()”></textarea>
————————————————————-

maka hasil terakhir dari file ketik.html menjadi seperti ini

————————————————————
<html>
<head>
<TITLE>ngetik realtime</TITLE>
</head>
<script>
function displayType(){
var inputKetikan =  document.getElementById(“tempatMengetik”;);
var targetKetikan =  document.getElementById(“hasilKetikan”;);
targetKetikan.innerHTML = inputKetikan.value;
}
</script>

<body>
<textarea id=”tempatMengetik”  onkeyup=”displayType()”></textarea>

<div id=”hasilKetikan”>     </div>

</body>
</html>
————————————————————

simpan file tersebut dan anda buka dengan browser kesayangan anda, dan mulailah  memasukan beberapa huruf kedalam textarea tersebut dan lihatlah apa yang  terjadi.
tiap huruf yang anda masukan di sana akan langsung muncul di browser anda tanpa  harus merefresh browser tersebut.

penjelasannya adalah :
maksud dari function displayType() adalah kita membuat variabel inputKetikan  yang menyimpan element yang kita beri id=”tempatMengetik”, dan
variabel targetKetikan yang menyimpan element yang kita beri  id=”hasilKetikan”.

lalu baris
targetKetikan.innerHTML =  inputKetikan.value;
menugaskan variabel targetKetikan meng-outputnya berupa HTML dari nilai yang di  input dalam variabel(element) inputKetikan.

untuk memunculkan huruf per huruf di halaman web tersebut untuk itulah di  elemen textarea kita beri event onkeyup.

sederhana bukan !, code javascript sederhana ini adalah dasar dari membuat  halaman web lebih dimanis tanpa harus merefresh kembali browser anda.
untuk melihat hasilnya ada dapat mengunjungi link ini.

sumber: http://www.ilmuwebsite.com/

Kategori:html Tag:
  1. 17 Juli 2013 pukul 15:23

    Having read this I thought it was rather informative.
    I appreciate you spending some time and effort to put
    this short article together. I once again find myself personally spending a significant amount
    of time both reading and commenting. But so what, it was still worthwhile!

  2. 20 Juli 2013 pukul 18:15

    Eating mountains prevent hair going white of fried catfish.
    Every player did the best first audition we saw. Grey hair and wrinkles happen.

    I squirm under her gaze. After the misfire of Ali, this
    burnished nocturne revisits the milieu Mann knows best,
    the glittering anonymity of Los Angeles eight years ago.
    The most common mistakes women make when applying makeup are
    not applying it in the summer–as does surfing and swimming in our
    beautiful, briny Blue–but that’s just a bonus of my geography.

  3. 30 September 2013 pukul 09:45

    Piece of writing writing is also a excitement, if you know afterward you can
    write otherwise it is complex to write.

  4. 6 Januari 2014 pukul 02:13

    Paragraph writing is also a excitement, if you know afterward you
    can write or else it is complex to write.

  5. 18 Mei 2014 pukul 17:58

    No matter if some one searches for his essential thing, so he/she needs to
    be available that in detail, therefore that thing is maintained over
    here.

  6. 30 September 2016 pukul 15:23

    体毛が濃くて悩んでいる人は、すぐにでも体質改善を行いましょう。大豆等に入っているイソフラボンは女性ホルモンと同じようなものなので、ムダ毛が薄くなる効果があります。豆乳や納豆、豆腐を積極的に摂取して、ムダ毛の生えにくくなる体質を目標に頑張っていきましょう。

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: