Tutorial HTML | Ngetik Realtime - Document Object Model

Tanggal : Wednesday, 7 January 2009 | Jam : 9 : 04 : 37 PM | GMT : +0700 | Negara : Indonesia

Posted By: I_am

Ngetik Realtime - Document Object Model

22-07-2008 | 12:50:01 | Halaman Ini dibaca 4939 kali

Pada 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

ok mungkin tutorial yang tidak seberapa ini bisa bermanfaat untuk kita semua

oleh :
nick : i_am

email : i_am.zlam@yahoo.com
web : http://fughu.com/i_am

Artikel Category => Tutorial HTML

Suka dengan artikel ini? Tambahkan pada Blog/Web anda untuk Extra Content

Untuk Pengguna Blogger tinggal Copy Code dibawah ini lalu masukkan ke postingan anda

Utk Wordpress tinggal Copy Code dibawah ini, masuk ke postingan anda gunakan mode "Code" lalu Paste
Dilarang Modifikasi Code

Comment Untuk Artikel Ini :

- JERRY
17-12-2008 | 07:06:54 | koneksi: 1.1 proxy1.local:3128 (squid/2 | ip: (67.207.148.228) | proxy: (10.19.98.14)

Wah, baru nemuin web tutorial yang ngejelasin fungsi2nya :D

- Ivandi
21-11-2008 | 10:44:13 | koneksi: | ip: (125.162.135.69) | proxy: ()

Saya suka banget dengan artikel ini...kebetulan saya juga termasuk pencinta programan...tp gini, ketikan itu bisa disimpankan?...
bisa gak tunjukin caranya gimana??

thank...

- Ady
12-11-2008 | 20:46:20 | koneksi: | ip: (125.162.123.51) | proxy: ()

Bagus..sekali..

tpi... ini digunakan buat apa....

apa cuma untuk ngetik gtu doank..??

- Irfan
12-11-2008 | 20:24:32 | koneksi: | ip: (125.161.238.164) | proxy: ()

Lumayan bagus

Statistik Situs

Visitor

: 1434976

Pages

: 5374358

Sejak 24 Januari 07

Informasi Anda:

IP:
38.103.63.55

Proxy:

Koneksi:

Live Chat

: b_scorpio

: Al-K

: Phii

: Safril

: Ivan

Shortcut

News Website

- Ilmuwebsite dan Bloger Indonesia Pro Palestina

- Kaltura merilis Module Video Editing untuk Drupal

- Ubuntu 8.10 Resmi Dirilis

Belajar PHP

- Lebih dalam dengan operasi string bag.1

- Redirect Halaman Kompleks

- Update, Delete Database with OOP

PHP Tutorials

- Membuat Password Generator

- Script pengatur waktu Session, Logout Otomatis

- Membuat Title Friendly

HTML

- Membuat Box Style Link Cantik ala dr.emi dengan CS

- Beautifull Form dr.emi with CSS

- Ngetik Realtime - Document Object Model

Ajax

- jQuery Ajax Display for Loading Content

- Tutorial Ajax

Javascript

- Membuat pertanyaan konfirmasi

- Tulisan Matrix

- Hujan Cinta

SEO Artikel

- Bagaimana Seharusnya Penggunaan Image dan Flash

- Mobile Search dan Masa Depan Search Engine 2010

- Mendapatkan Link Popularity dari Artikel Directory

SEO Tutorial

- Menghilangkan Label Google Malware Badware

- Make Over Meta Description Anda

- Pengenalan dan Panduan Google Webmaster Tools

PhotoShop

- Advance Metalic Gloss Logo

- Dynamic Energy Saver From Gigabyte

- Sony Ericsson Logo

CorelDraw

- Teknik Gambar Bentuk Lipatan Kertas

- Teknik Gambar Bentuk Bagian 1

- Membuat Butiran Air

Flash Tutorials

- Membuat Logo Animasi

- Membuat Flash Icon Animasi

- Membuat Trail Mouse

Free Domain

- Free Subdomain co.cc

- Free subdomain uni.cc

- Domain gratis Lagi... | .name |

Free Hosting

- 000webhost - Hosting gratis PHP SQL

- Free Host PHP

- AwardSpace | Free PHP MySql

Review Software

- Mengambil text dari image dengan Document Imaging

- Jalankan aplikasi windows di linux dengan CrossOver

- Opera Mini 4.2 beta - Sudah Release

Hacking

- Konsep sederhana Joomla Password Cracker

- Implementasi SQL Injection pada Joomla

- PHP Security - Cek Bug PHP Script

Banner Kami:

<center>
<a href="http://www.ilmuwebsite.com" target="_blank">
<img src="http://unair.info/img/iweb.jpg" border="0"></a><br>
<a href="http://www.ilmuwebsite.com" target="_blank">
ilmuwebsite.com</a></center>

RSS per-Kategori
News
Belajar PHP
Tutorial PHP
Hacking

Thanks For Who Link Us :.

Caranya ikut promosi?

Menu
Home
News Website
PHP Programing
Belajar PHP
Tutorial PHP
PHP Reference
Ajax Programing
Ajax
Web Basic
Tutorial HTML
Javascript
Search Engine
Artikel Search Engine
Tutorial Search Engine
Design Grafis
Tutorial Photoshop
Tutorial CorelDraw
Tutorial Flash
Free Stock Photo
Domain & Hosting
Domain Gratis
Hosting Gratis
CMS
CMS
Software
Review Software
Hacking
Tutorial Hacking
Linux
Tutorial Linux
Computer Maintenance
Tutorial Jaringan
Interaksi dengan Kami
Guest Book | Buku Tamu
Penulis & Daftar Komunitas

Web Tools

- Hosting Speed

by: websitepulse.com

- Cek Pagerank
by: prchecker.info

- Cek C Class IP by: webrankinfo.com