javascript inner HTML- codecall ~ .::Cyberal13nated|Free Download Software::.

Minggu, 28 Februari 2010

javascript inner HTML- codecall

Hello world....

Berbicara tentang pemrograman web memang tak ada habisnya. Kali ini saya ingin berbagi tentang inner HTML pada anda. InnerHTML memungkinkan Anda untuk mengubah bagian-bagian dari suatu halaman web secara dinamis. Menggunakan innerHTML, kami akan melakukannya tanpa me-refresh halaman. Dan, di lain tutorial, saya akan menunjukkan cara menggunakan ajax dan innerHTML untuk dapat melakukan hal-hal seperti menarik informasi dari database dan kemudian menggunakan innerHTML untuk menunjukkan hal itu.

Pertama, kita perlu men-setup halaman kami dengan sebuah textbox dan tombol normal. Saya telah menjelaskan beberapa hal ini dalam tutorial sebelumnya, namun, jika anda tidak tahu cara mengatur bit-bit ini, saya sarankan Anda berhenti dan kembali ke HTML. Saya telah menahan diri dari menggunakan elemen bentuk, hanya karena tidak diperlukan.

Code:

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title></title>
</head>
<body>
<input name="name" id="name"><br>
<input name="Submit" value="Submit" type="button">
</body>
</html>

Sekarang, kita perlu men-setup tempat di mana kita akan meletakkan teks kami. Dalam kode javascript kita, kita akan menemukan spot dengan id, jadi kita perlu menambahkan ID ke tag HTML. Dalam contoh ini, kita akan menggunakan tag

dengan id dari namehere. Kami juga akan menambahkan aktivitas klik tombol kami, yang akan memanggil (belum dibuat) fungsi javascript.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title></title>
</head>
<body>
<p id="namehere"></p>
<input name="name" id="name"><br>
<input name="Submit" value="Submit"
 onclick="javascript:changename()" type="button"></body>
</html>

Sekarang, kita harus melaksanakan fungsi javascript. Dalam fungsi ini kita tetapkan properti innerHTML dari elemen id namehere "Hello," dan kemudian tambahkan pada nilai nama textbox.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title></title>
</head>
<body>
<script type="text/javascript">function changename() { document.getElementById('namehere').innerHTML = "Hello, " + document.getElementById('name').value; } </script>
<p id="namehere"></p>
<input name="name" id="name"><br>
<input name="Submit" value="Submit"
 onclick="javascript:changename()" type="button"></body>
</html>

Jalankan halaman, dan Anda akan menemukan bahwa setelah Anda memasukkan nama dan tekan submit, kata-kata "Hello, Whatevernnameyouputin" tepat di atas textbox. Aku akan memiliki live demo di subdomain codecall saya singkat.

If this tutorial was helpful, please +rep me