Java Script

A. Sekilas tentang JavaScript Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

B. Struktur JavaScript Struktur dari JavaScript adalah sbb : Keterangan : Kode umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.

C. JavaScript sebagai bahasa berorientasi pada obyek Properti Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil. Penulisan : Nama_objek.nama_properti = nilai window.defaultStatus = ”Selamat Belajar JavaScript”; Metode Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisan : Nama_objek.nama_metode(parameter) document.write (”Hallo”) D. Letak JavaScript dalam HTML Skrip Javascript dalam dokumen HTML dapat diletakkan pada : 1. Bagian Head 2. Bagian Body (jarang digunakan).

Download Ebook tutorial javascript

kebetulan pada kesempatan hari ini saya akan memberikan ebook
tutorial javascript, di dalam ebook ini terdiri dari 49 halaman
ebook ini di ciptakan oleh mas Desrizal
ebook ini saya ambil dari  "Codingwear"

• BAB 1 (Pengenalan Javascript)

Dalam bab ini berisi tentang apa itu javascript, dari sintaks, javascript, variable, operator, statemant
dan fungsinya 

• BAB 2 (Penanganan Event)

Berisi tentang apa itu penanganan event, contoh-contoh penanganan event.

• BAB 3 (Objek String)

Memformat teks dengan javascript, penangangan objek string dan parse string ke integer dan float.

• BAB 4 (Objek Windows)

Membuka window di javascript, mereload, menutup, meloading halaman baru; print, komunikasi 
antar window, alert, confim dan prompt

• BAB 5 (Array)

Pengenalan aray, metode untuk manipulasi array.

• BAB 6 (Tanggal dan Waktu)

Metode tanggal dan waktu, javascript timer, membuat jam digital.

• BAB 7(Dynamic HTML)

Mengakses dan manipulasi objek HTML, memanipulasi style atau CSS Objek HTML.

• BAB 8 (Penanganan From)

Penanganan checkbox di javascript, penanganan input radio di javascript dan penanganan select box
di javascript

Menangkap Event Klik Mouse

The specifics of event handling (event types, handler registration, propagation, etc) are too extensive to be fully covered in this simple example. However this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here to read more about the JavaScript event system.

'Mouse' events are a subset of the total events issued by a web browser in response to user actions. The following is a list of the the events emitted in response to a user's mouse action:

• Click - issued when a user clicks the mouse
• DblClick - issued when a user double-clicks the mouse
• MouseDown - issued when a user depresses a mouse button (the first half of a click)
• MouseUp - issued when a user releases a mouse button (the second half of a click)
• MouseOut - issued when the mouse pointer leaves the graphical bounds of the object
• MouseOver - issued when the mouse pointer enters the graphical bounds of the object
• MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object
• ContextMenu - issued when the user clicks using the right mouse button

The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:

<span onclick="alert('Hello World!');">Click Here</span>

The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:

<script type="text/javascript">
  function onclick_callback () {
     alert ("Hello, World!");
  }
</script>
<span onclick="onclick_callback();">Click Here</span>

Additionally, the event object which is issued can be captured and referenced; providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:

<script type="text/javascript">
  function onclick_callback(event) {
    var eType = event.type;
    /* the following is for compatability */
    /* Moz populates the target property of the event object */
    /* IE populates the srcElement property */
    var eTarget = event.target || event.srcElement;

    alert( "Captured Event (type=" + eType + ", target=" + eTarget );
  }
</script>
<span onclick="onclick_callback(event);">Click Here</span>

In addition to registering to receive events in your HTML you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates a span object, appends it to the page body, and registers the span object to recieve mouse-over, mouse-out, mouse-down, and mouse-up events.

<script type="text/javascript">
  function mouseevent_callback(event) {
    /* The following is for compatability */
    /* IE does NOT by default pass the event object */
    /* obtain a ref to the event if one was not given */
    if (!event) event = window.event;

    /* obtain event type and target as earlier */
    var eType = event.type;
    var eTarget = event.target || event.srcElement;
    alert(eType +' event on element with id: '+ eTarget.id);
  }

 function onload () {
   /* obtain a ref to the 'body' element of the page */
   var body = document.body;
   /* create a span element to be clicked */
   var span = document.createElement('span');
   span.id = 'ExampleSpan';
   span.appendChild(document.createTextNode ('Click Here!'));

   /* register the span object to receive specific mouse events */
   span.onmousedown = mouseevent_callback;
   span.onmouseup = mouseevent_callback;
   span.onmouseover = mouseevent_callback;
   span.onmouseout = mouseevent_callback;

   /* display the span on the page */
   body.appendChild(span);   
}
</script>