Thursday, July 17, 2014

Kegunaan Dari Javascript : Tutorial Javascript For beginner

Kegunaan Dari Javascript

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>
Untuk mentesting anda bisa langsung menyalin kode di atas dan menyimpannya dengan ekstensi .html ,Hasil Dari Kode Di Atas.
Jika di buka di browser, maka "text miring" akan tidak di tampilkan, tetapi diambil alih dengan "text tebal".

Perubahan Text Dengan Javascript

Text 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 Javascript

Text 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>
Hasilnya seperti dibawah ini, Jika tombol di tekan maka javascript akan meng-overwrite tampilan text di bawah ini :

Title : MyCekInfo

Text Terpilih

Bagaimana ? Mudahkan ?

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.


EmoticonEmoticon