This translation is incomplete. Please help translate this article from English.
ஏன் ஜாவாஸ்க்ரிப்ட் (JavaScript)?
ஜாவாஸ்க்ரிப்ட் ஒரு சக்திவாய்ந்த, சிக்கலான பயன்பாடுகளின் (Complicated Applications) பிரச்சனைகளை எளிதில் தீர்க்கக்கூடிய வல்லமை கொண்ட ஒரு நிரலாக்க மொழி (Programming Language). இதனை Java-வுடன் ஒப்பிட்டு பலரும் குழப்பிக்கொள்கின்றனர். இதன்மூலம் பயனாளர்களின் தரவு (data entered by users) பெற்று, கணினி பயன்பாடுகளை விரைவாக செய்துமுடித்து அதன் முடிவுகளை உடனடியாகவும் எளிதாகவும் பெற முடியும்.
இ.சி.எம்.ஏ ஸ்க்ரிப்ட் என்றும் அழைக்கப்படும் இந்த நிரலாக்க மொழியானது லினக்ஸ், விண்டோஸ், மற்றும் ஆப்பிள் மேக் இயங்குதலங்களை பொருட்படுத்தாது கூகுள் வரைபடம் போலவே அனைத்து பிரௌஸர்களிலும் ஒரே மாதிரியாகவே செயல் புரிகிறது. ஜவாஸ்க்ரிப்ட் லைப்ரரிகளின் சமீபத்திய வளர்ச்சி மூலம் இணைய ஆவணங்கள், டாம் எலிமென்டுகளை (DOM Elements) தேர்வு செய்யவும், அனிமேஷன் உருவாக்கவும், நிகழ்வுகளை எளிதாக கையாளவும், அஜாக்ஸ் அப்ளிக்கேஷன் உருவாக்கவும் முடிகிறது. நிஜமாகவே ப்ளாட்பார்ம் பற்றிய சிக்கல்கள் இன்றி செயல்படும் இந்த ஜாவாஸ்க்ரிப்ட் இலவசமாக பயன்படுத்த முடிவதால் உலகம் முழுவதும் பரவலாக அதிக இணைய பயன்பாடுகளில் உபயோகிக்கப்படுகிறது என்பது குறிப்பிடத்தக்கது
ஏற்கனவே தெரிந்திருக்க வேண்டியவை
ஜாவாஸ்க்ரிப்ட் மிக எளிதாக கற்றுக்கொள்ளக்கூடியது. இதற்க்கு ஒரு வெப் ப்ரௌசர் மற்றும் Notepad போன்ற டெக்ஸ்ட் எடிட்டர் போதுமானது
ஜாவாஸ்க்ரிப்ட் உடன் இதர தொழில்நுட்பங்களை சேர்த்து கூகுள் மேப் போன்ற மாபெரும் அப்ளிகேஷன்களை உருவாக்க முடியும். ஆனால் அவைகளை அறிந்துகொள்வது இந்த பகுதியின் நோக்கத்திற்க்கு அப்பாற்பட்டது.
தொடங்குவோம்
ஜாவஸ்க்ரிப்ட்-ஐ பயன்படுத்த நீங்கள் அப்ளிகேஷன் ஷெல் (shell) உபயோகம் பற்றியோ, ஒடுக்கி (compiler) பற்றியோ தெரிந்திருக்கவேண்டிய அவசியம் இல்லை. உங்கள் ஜாவாஸ்க்ரிப்ட் குறியீட்டினை தட்டச்சு செய்து அதை இணைய உலாவி (வெப் ப்ரௌஸர்) மூலம் திறக்கவும். அவ்வளவே!
உலாவி இணக்கத்தன்மை பிரச்சினை (Brower compatibility issues)
ஒவ்வொரு இணைய உலாவிகளும் ஒவ்வொரு மாதிரியான செயல்பாட்டை கொண்டுள்ளன. மொஸில்லா, க்ரோம், மைக்ரோசாஃப்ட் ஐ.இ, ஆப்பிள் சஃபாரி, ஆபரா போன்ற இணைய உலாவிகளின் செயல்பாடுகளில் ஏற்ற இறக்கங்கள் இருக்கும். இதை நாங்கள் ஆவணம் செய்துள்ளோம். இந்த சிக்கலை சில ஜாவாஸ்க்ரிப்ட் ஏ.பி.ஐ மூலம் சமன் செய்து எல்லா உலாவிகளிலும் ஒரே மாதிரியான செயல்பாட்டினை பெற முடியும்.
இந்த உதாரணங்களை முயற்சி செய்வது எப்படி
jsfiddle.net போன்ற இணையத்தில் கிடைக்கும் சில அப்ளிகேஷன்களையும் பயன்படுத்தலாம்
மாதிரி: சொடுக்கியின் செயல்பாட்டினை வரையறுத்தல்
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, 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 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
Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.
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>
function clickHandler() {
alert("Hello, World!");
}
</script>
<span onclick="clickHandler();">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>
function clickHandler(event) {
var eType = event.type;
/* the following is for compatibility */
/* 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="clickHandler(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 (creates) a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.
<body></body>
<script>
function mouseeventHandler(event) {
/* The following is for compatibility */
/* 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 onloadHandler() {
/* 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 -
notice the lowercase of the events but the free choice in the names of the handlers you replace them with.
*/
span.onmousedown = mouseeventHandler;
span.onmouseup = mouseeventHandler;
span.onmouseover = mouseeventHandler;
span.onmouseout = mouseeventHandler;
/* display the span on the page */
body.appendChild(span);
}
window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name
</script>
Example: Catching a keyboard event
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!');">
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:
<script>
function keypressHandler() {
alert ("Hello, World!");
}
</script>
<input onkeypress="keypressHandler();" />
Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:
<script type="text/javascript">
function keypressHandler(evt) {
var eType = evt.type; // Will return "keypress" as the event type
/* here we again need to use a cross browser method
mozilla based browsers return which and others keyCode.
The Conditional operator or ternary is a good choice */
var keyCode = evt.which?evt.which:evt.keyCode;
var eCode = 'keyCode is ' + keyCode;
var eChar = 'charCode is ' + String.fromCharCode(keyCode); // or evt.charCode
alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
}
</script>
<input onkeypress="keypressHandler(event);" />
Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:
<script> document.onkeypress = keypressHandler; document.onkeydown = keypressHandler; document.onkeyup = keypressHandler; </script>
Here is a complete example that shows key event handling:
<!DOCTYPE html>
<html>
<head>
<script>
var metaChar = false;
var exampleKey = 16;
function keyEvent(event) {
var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which
var keychar = String.fromCharCode(key);
if (key == exampleKey) {
metaChar = true;
}
if (key != exampleKey) {
if (metaChar) {
alert("Combination of metaKey + " + keychar)
metaChar = false;
} else {
alert("Key pressed " + key);
}
}
}
function metaKeyUp(event) {
var key = event.keyCode || event.which;
if (key == exampleKey) { metaChar = false; }
}
</script>
</head>
<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
Try pressing any key!
</body>
</html>
Browser bugs and 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 onkeyup keyCode contain 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.
Example: Dragging images around
The following example allows moving the image of Firefox around the page:
<!DOCTYPE html>
<html>
<head>
<style>
img { position: absolute; }
</style>
<script>
window.onload = function() {
movMeId = document.getElementById("ImgMov");
movMeId.style.top = "80px";
movMeId.style.left = "80px";
document.onmousedown = coordinates;
document.onmouseup = mouseup;
function coordinates(e) {
if (e == null) { e = window.event;}
// e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox
// Both properties return the HTML element the event took place on.
var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
if (sender.id=="ImgMov") {
mouseover = true;
pleft = parseInt(movMeId.style.left);
ptop = parseInt(movMeId.style.top);
xcoor = e.clientX;
ycoor = e.clientY;
document.onmousemove = moveImage;
return false;
}
return false;
}
function moveImage(e) {
if (e == null) { e = window.event; }
movMeId.style.left = pleft+e.clientX-xcoor+"px";
movMeId.style.top = ptop+e.clientY-ycoor+"px";
return false;
}
function mouseup(e) {
document.onmousemove = null;
}
}
</script>
</head>
<body>
<img id="ImgMov" src="https://placehold.it/100x100&text=JS" width="64" height="64">
<p>Drag and drop around the image in this page.</p>
</body>
</html>
Example: Resizing things
<!DOCTYPE html>
<html>
<head>
<style>
#resizeImage {
margin-left: 100px;
}
</style>
<script>
window.onload = function() {
var resizeId = document.getElementById("resizeImage");
var resizeStartCoordsX,
resizeStartCoordsY,
resizeEndCoordsX,
resizeEndCoordsY;
var resizeEndCoords;
var resizing = false;
document.onmousedown = coordinatesMousedown;
document.onmouseup = coordinatesMouseup;
function coordinatesMousedown(e) {
if (e == null) {
e = window.event;
}
var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
if (element.id == "resizeImage") {
resizing = true;
resizeStartCoordsX = e.clientX;
resizeStartCoordsY = e.clientY;
}
return false;
}
function coordinatesMouseup(e) {
if (e == null) {
e = window.event;
}
if (resizing === true) {
var currentImageWidth = parseInt(resizeId.width);
var currentImageHeight = parseInt(resizeId.height);
resizeEndCoordsX = e.clientX;
resizeEndCoordsY = e.clientY;
resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
resizing = false;
}
return false;
}
}
</script>
</head>
<body>
<img id="resizeImage" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
width="64" height="64">
<p>Click on the image and drag for resizing.</p>
</body>
</html>
Example: Drawing Lines
<!DOCTYPE html>
<html>
<head>
<script>
function linedraw(ax,ay,bx,by)
{
if(ay>by)
{
bx=ax+bx;
ax=bx-ax;
bx=bx-ax;
by=ay+by;
ay=by-ay;
by=by-ay;
}
var calc=Math.atan((ay-by)/(bx-ax));
calc=calc*180/Math.PI;
var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
}
</script>
</head>
<body onload="linedraw(200,400,500,900);"> <!-- Replace with your co-ordinate -->
</body>
</html>