Kegunaan Dari Javascript - Setelah pada sebelumnya saya sudah membahas 3 artikel tentang javascript, dan sekarang saya akan membahas tentang kegunaan dari javascript.
3 artikel sebelumnya :
Javascript memiliki banyak kegunaan atau implementasi, diantaranya adalah sebagai berikut :
- Pertama, Memanipulasi Element HTML
- Untuk bisa memanipulasi, anda perlu mengakses element html terlebih dahulu, Cara untuk mengakses element HTML dengan javascript adalah menggunakan method document.getElementById("id") .
- Anda bisa menggunakan atribut id untuk menentukan element HTML, Contoh kodenya sebagai berikut :
<html>
<head>
<title>Kegunaan Javascript</title>
</head>
<body>
<h1>Perubahan Text Dengan Javascript</h1>
<p id="example"><i>Text Miring</i></p>
<script>
document.getElementById("example") .innerHTML="<b>Text Tebal</b>";
</script>
</body>
</html>
Jika di buka di browser, maka "text miring" akan tidak di tampilkan, tetapi diambil alih dengan "text tebal".
Perubahan Text Dengan JavascriptText Miring |
- Kedua, Kegunaannya adalah menuliskan ke output dokumen. Misalkan contoh kode berikut yang akan menuliskan elemen <p> secara langsung ke output dokumen HTML.
<html>
<head>
<title>Pembuatan Text Dengan Javascript</title>
</head>
<body>
<h1>Membuat Text Dengan Javascript</h1>
<script>
document.write("<p>Text Javascript, By : MyCekInfo</p>");
</script>
</body>
</html>
Jika dijalankan, akan terlihat hasilnya seperti tampilan dibawah ini :
Membuat Text Dengan JavascriptText Javascript, By : MyCekInfo |
Perlu di perhatikan juga bahwa document.write("...") ini hanya digunakan untuk menulis secara langsung ke output dokumen. Jika document.write("...") di eksekusi setelah dokumen selesai di-load, maka semua halaman HTML akan di timpa. Contohnya seperti yang berikut ini :
<html>
<head>
<title>HTML akan di timpa</title>
</head>
<body>
<h1>Title : MyCekInfo</h1>
<p>Text Terpilih</p>
<input type="button" onclick="FungsiTimpa()" value="Test Timpa Text">
<script>
function FungsiTimpa() {
document.write("Konten Text Akan Di Timpa Dan Hilang");
}
</script>
</body>
</html>
Title : MyCekInfoText Terpilih |
Bagaimana ? Mudahkan ?
Posting Komentar