Masalah Kompatibilitas Browser

There are variations between what functionality is available in the different browsers. Mozilla, Microsoft IE, Apple Safari and Opera fluctuate in the behavior. We intend on documenting these variations. You can mitigate these issues by using the various cross platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.

Bagaimana cara mencoba contoh

The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new web pages on your website.

If you do not have your own website, you can save these examples as files on your computer and open them up with the web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!

Contoh: 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:

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:

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.

Contoh: Menangkap event dari keyboard

Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.

The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:

KeyPress - issued when a key is depressed and released

KeyDown - issued when a key is depressed but hasn't yet been released

KeyUp - issued when a key is released

TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking or keyboard. This event will not be covered in this article.

In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property; never both. If the key pressed generates a character (e.g. 'a'), charCode is set to the code of that character, respecting the letter case. (i.e. charCode takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in keyCode.

The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:

<input type="text" onkeypress="alert ('Hello World!');"></input>

As with mouse events, 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:

Bug dari browser dan quirks

The two properties made available through the key events are keyCode and charCode. In simple terms, keyCode refers to the actual keyboard key that was pressed by the user, while charCode is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same keyCode, because the user presses the same key, but a different charCode because the resulting character is different.

The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support charCode. However, they give the character information in keyCode, but only onkeypress. Onkeydown and -up keyCode contains key information. Firefox uses a different word, "which", to distinguish the character.

Refer to the Mozilla Documentation on Keyboard Events for a further treatment of keyboard events.

Draft
This page is not complete.

Contoh: Memindahkan gambar

The following example allows moving the image of firefox around the page.