Interface and Abstract class

JavaScript Powerful features for Web design

Brief Overview:

In the previous posts I explained how javascript will be used to create the programs for the dynamic web application . I used the word dynamic , because it makes the web page interactive.

In this section , I want to discuss two important features known as ,DOM and Event Handling. These features make the javascript differ from regular programming language.

DOM:

DOM full form is Document Object Modelling

The JavaScript DOM defines a standard for accessing documents in the web page:

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

There are 3 types of DOM :

  • Core DOM – standard model for all document types
  • XML DOM – standard model for XML documents
  • HTML DOM – standard model for HTML documents

Each type is given by the following diagrams :

HTML DOM

XML DOM

DOM

The above diagrams illustrates the DOM of above three types.

Event Handling is another powerful feature of Javascript ,which enables the web page dynamic for programming the html elements .

What is Event Handling?

For example consider a mouse click , this is an HTML event , The javascript will react to these events. It is called handling the event . For ex: onclock() is an event is used on clicking a button , we need to define the function ,when the click on the button done. It is called handling the event .This is employed by Javascript DOM

The different events supported by Javascript is as follows:

The events are classified into Input events ,Mouse Events ,click events and Other events.

the different events supported in Javascript is as follows:

Event and it’s Description Table

EventDescriptionBelongs To
abortThe event occurs when the loading of a media is abortedUiEventEvent
afterprintThe event occurs when a page has started printing, or if the print dialogue box has been closedEvent
animationendThe event occurs when a CSS animation has completedAnimationEvent
animationiterationThe event occurs when a CSS animation is repeatedAnimationEvent
animationstartThe event occurs when a CSS animation has startedAnimationEvent
beforeprintThe event occurs when a page is about to be printedEvent
beforeunloadThe event occurs before the document is about to be unloadedUiEventEvent
blurThe event occurs when an element loses focusFocusEvent
canplayThe event occurs when the browser can start playing the media (when it has buffered enough to begin)Event
canplaythroughThe event occurs when the browser can play through the media without stopping for bufferingEvent
changeThe event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>)Event
clickThe event occurs when the user clicks on an elementMouseEvent
contextmenuThe event occurs when the user right-clicks on an element to open a context menuMouseEvent
copyThe event occurs when the user copies the content of an elementClipboardEvent
cutThe event occurs when the user cuts the content of an elementClipboardEvent
dblclickThe event occurs when the user double-clicks on an elementMouseEvent
dragThe event occurs when an element is being draggedDragEvent
dragendThe event occurs when the user has finished dragging an elementDragEvent
dragenterThe event occurs when the dragged element enters the drop targetDragEvent
dragleaveThe event occurs when the dragged element leaves the drop targetDragEvent
dragoverThe event occurs when the dragged element is over the drop targetDragEvent
dragstartThe event occurs when the user starts to drag an elementDragEvent
dropThe event occurs when the dragged element is dropped on the drop targetDragEvent
durationchangeThe event occurs when the duration of the media is changedEvent
endedThe event occurs when the media has reach the end (useful for messages like “thanks for listening”)Event
errorThe event occurs when an error occurs while loading an external file ProgressEventUiEventEvent
focusThe event occurs when an element gets focusFocusEvent
focusinThe event occurs when an element is about to get focusFocusEvent
focusoutThe event occurs when an element is about to lose focusFocusEvent
fullscreenchangeThe event occurs when an element is displayed in fullscreen modeEvent
fullscreenerrorThe event occurs when an element can not be displayed in fullscreen modeEvent
hashchangeThe event occurs when there has been changes to the anchor part of a URLHashChangeEvent
inputThe event occurs when an element gets user inputInputEventEvent
invalidThe event occurs when an element is invalidEvent
keydownThe event occurs when the user is pressing a keyKeyboardEvent
keypressThe event occurs when the user presses a keyKeyboardEvent
keyupThe event occurs when the user releases a keyKeyboardEvent
loadThe event occurs when an object has loadedUiEventEvent
loadeddataThe event occurs when media data is loadedEvent
loadedmetadataThe event occurs when meta data (like dimensions and duration) are loadedEvent
loadstartThe event occurs when the browser starts looking for the specified mediaProgressEvent
messageThe event occurs when a message is received through the event sourceEvent
mousedownThe event occurs when the user presses a mouse button over an elementMouseEvent
mouseenterThe event occurs when the pointer is moved onto an elementMouseEvent
mouseleaveThe event occurs when the pointer is moved out of an elementMouseEvent
mousemoveThe event occurs when the pointer is moving while it is over an elementMouseEvent
mouseoverThe event occurs when the pointer is moved onto an element, or onto one of its childrenMouseEvent
mouseoutThe event occurs when a user moves the mouse pointer out of an element, or out of one of its childrenMouseEvent
mouseupThe event occurs when a user releases a mouse button over an elementMouseEvent
mousewheelDeprecated. Use the wheel event insteadWheelEvent
offlineThe event occurs when the browser starts to work offlineEvent
onlineThe event occurs when the browser starts to work onlineEvent
openThe event occurs when a connection with the event source is openedEvent
pagehideThe event occurs when the user navigates away from a webpagePageTransitionEvent
pageshowThe event occurs when the user navigates to a webpagePageTransitionEvent
pasteThe event occurs when the user pastes some content in an elementClipboardEvent
pauseThe event occurs when the media is paused either by the user or programmaticallyEvent
playThe event occurs when the media has been started or is no longer pausedEvent
playingThe event occurs when the media is playing after having been paused or stopped for bufferingEvent
popstateThe event occurs when the window’s history changesPopStateEvent
progressThe event occurs when the browser is in the process of getting the media data (downloading the media)Event
ratechangeThe event occurs when the playing speed of the media is changedEvent
resizeThe event occurs when the document view is resizedUiEventEvent
resetThe event occurs when a form is resetEvent
scrollThe event occurs when an element’s scrollbar is being scrolledUiEventEvent
searchThe event occurs when the user writes something in a search field (for <input=”search”>)Event
seekedThe event occurs when the user is finished moving/skipping to a new position in the mediaEvent
seekingThe event occurs when the user starts moving/skipping to a new position in the mediaEvent
selectThe event occurs after the user selects some text (for <input> and <textarea>)UiEventEvent
showThe event occurs when a <menu> element is shown as a context menuEvent
stalledThe event occurs when the browser is trying to get media data, but data is not availableEvent
storageThe event occurs when a Web Storage area is updatedStorageEvent
submitThe event occurs when a form is submittedEvent
suspendThe event occurs when the browser is intentionally not getting media dataEvent
timeupdateThe event occurs when the playing position has changed (like when the user fast forwards to a different point in the media)Event
toggleThe event occurs when the user opens or closes the <details> elementEvent
touchcancelThe event occurs when the touch is interruptedTouchEvent
touchendThe event occurs when a finger is removed from a touch screenTouchEvent
touchmoveThe event occurs when a finger is dragged across the screenTouchEvent
touchstartThe event occurs when a finger is placed on a touch screenTouchEvent
transitionendThe event occurs when a CSS transition has completedTransitionEvent
unloadThe event occurs once a page has unloaded (for <body>)UiEventEvent
volumechangeThe event occurs when the volume of the media has changed (includes setting the volume to “mute”)Event
waitingThe event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)Event
wheelThe event occurs when the mouse wheel rolls up or down over an elementWheelEvent

I conclude here for this post , if you have any queries please comment below , I will come up another post with event handling mechanism with code.