learnxinyminutes-docs/ta_in/javascript.html.markdown

---
language: javascript
contributors:
    - ['Adam Brenecki', 'http://adam.brenecki.id.au']
    - ['Ariel Krakowski', 'http://www.learneroo.com']
translators:
  - ["Rasendran Kirushan", "https://github.com/kirushanr"]
filename: javascript.js
lang:in-ta
---

javascript 1995 ஆம்  ஆண்டு Netscape இல் பணிபுரிந்த Brendan Eich
என்பவரால் உருவாக்கபட்டது.ஆரம்பத்தில் மிகவும் எளிமையான
ஸ்க்ரிப்டிங் மொழியாக இணையதளங்களில் பயன்படுத்தபட்டது.
இது ஜாவா (java ) வில் உருவாக்கபட்ட மிகவும் சிக்கலான இணைய செயலிகளுக்கு 
உதவும் முகமாக உருவாக்கபட்டது. எனினும் இணையதள பக்கங்களில் இதன் முழுதான பயன்பாடு 
மற்றும் உலாவிகளில்   பயன்படுத்த கூடிய வகையில் இருந்தமையாலும் Java வை விட 
இணையதளகளின் முகப்பு உருவாக்கத்தில் இன்றளவில் முன்னிலை பெற்றுள்ளது.

உலாவிகளுக்கு மட்டும் மட்டுபடுத்தபடவில்லை , Node.js மூலமாக 
மிகவும் பிரபல்யமடைந்து வருகின்றது , உதாரணமாக கூகிள்க்ரோம் உலாவியின் 
V8 JavaScript engine Node .js உதவியுடன் இயங்குகிறது .

உங்கள் கருத்துக்கள் மிகவும் வரவேற்கபடுகின்றன , என்னுடன் தொடர்புகொள்ள 
[@adambrenecki](https://twitter.com/adambrenecki), or
[adam@brenecki.id.au](mailto:adam@brenecki.id.au).

```js
// குறிப்புக்கள் C நிரலாக்கத்தை ஒத்தது .ஒரு வரி குறிப்புக்கள்  "//" குறியீடுடன் ஆரம்பமாகும் 

/* பலவரி குறிப்புக்கள் "/*" ஆரம்பமாகி "/*" இல் முடிவடையும்  */

// ஒரு கூற்று முற்றுபெற செய்ய ; இடல் வேண்டும் .
doStuff();

// ...ஆனால் அரைபுள்ளி இட வேண்டும் என்று அவசியம் இல்லை ஏன்  எனில் 
// ஒரு வரி புதிதாக இடப்படும் போது அரைபுள்ளிகள் தானாகவே இடப்படும் ஆனால் சில தருணங்களை தவிர .
doStuff()

// ஆனால் அவ்வாறான தருணங்கள் எதிர்பாராத முடிவுகளை தரலாம் 

// எனவே நாம் தொடர்ந்து ஒரு கூற்று நிறைவடையும் போது அரைபுள்ளி ஒன்றை இடுவோம் .

///////////////////////////////////
// 1. எண்கள்(Number) ,சரம் (String),செயற்குறிகள்(Operators) 

// JavaScript ஒரே ஒரு எண்வகை காணப்படுகிறது  தசமி  (which is a 64-bit IEEE 754 double).
// தசமி எண்வகை  (Doubles) 2^ 52 வரை சேமிக்க கூடியது
// முழு எண்வகையின் 9✕10¹⁵ சேமிக்க போதுமானது .
3; // = 3
1.5; // = 1.5

// அடிப்படை கணித பொறிமுறைகள் 
1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7

// வகுத்தல்
5 / 2; // = 2.5


//bitwise பொறிமுறையை உபயோகிக்கும் போது 
//உங்கள் தசம எண்ணின் பெறுமானமானது ஒரு நேர் அல்லது மறை அல்லது பூசியமாகவுள்ள முழு எண்ணாக 
//மாற்றம் பெறுகிறது  இது 32 இருமம்(bit) வரை செல்லலாம் 

1 << 2; // = 4

// நிரலாக்கத்தில் செயலியை அமுல்படுத்தும் வரிசைமுறையில் அடைப்பு குறிக்கு முன்னிலை வழங்கபடுகிறது 
(1 + 3) * 2; // = 8

// மெய் எண்  அல்லாத மூன்றுபெறுமானங்கள் உள்ளன :
Infinity; // result of e.g. 1/0
-Infinity; // result of e.g. -1/0
NaN; // result of e.g. 0/0, இது எண்  அல்ல என்பதை  குறிக்கும் 

// தர்க ரீதியில் ஆன கட்டமைப்பு காணப்படுகிறது .
true;
false;

// சரம் (string) ' அல்லது "  குறியீட்டினால்  உருவாக்கபடுகிறது 
'abc';
"Hello, world";

// ஒரு boolean பெறுமானத்தின் எதிர்மறை பெறுமானத்தை பெற ! குறியீடு பயன்படுத்தபடுகிறது 
!true; // = false
!false; // = true

//  சமமா என பார்க்க  ===
1 === 1; // = true
2 === 1; // = false

// சமனற்றவையா  என பார்க்க  !==
1 !== 1; // = false
2 !== 1; // = true

// மேலும் சில ஒப்பீடுகள் 
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true

// இரண்டு சரங்களை(Strings) ஒன்றாக இணைப்பதற்கு +
"Hello " + "world!"; // = "Hello world!"

// இரண்டு மாறிகளை/பெறுமானங்களை  ஒப்பிட  < and >
"a" < "b"; // = true

// இரண்டு பெறுமானங்கள் / மாறிகள்  ஒரேவகையை சேர்ந்தவையா என பார்க்க 
"5" == 5; // = true
null == undefined; // = true

// ...இல்லாவிடின்  ===
"5" === 5; // = false
null === undefined; // = false 

// ...கிழே உள்ள கூற்றுகள் எதிர்பாராத 
வெளியீடுகளை தரலாம் ...
13 + !0; // 14
"13" + !0; // '13true'

// ஒரு சரத்தில்(string ) உள்ள எழுத்தை பெற  `charAt`
"This is a string".charAt(0);  // = 'T'


//... ஒரு சரத்தை(string )  சொற்களாக பிரிக்க (substring) `substring
"Hello world".substring(0, 5); // = "Hello"

// `length` ஒரு சரத்தில்(string) உள்ள சொற்களின் எண்ணிக்கை அல்லது நீளத்தை(length)அறிய 
"Hello".length; // = 5

// `null` மற்றும்  `undefined` இரு பெறுமானங்கள் உள்ளன  .
null;      // மதிப்பு அற்ற ஒரு பெறுமானத்தை குறிக்கும் 
undefined; // பெறுமானம் இன்னும் நிர்ணயிக்க படவில்லை என்பதை குறிக்கும்  (
           // `undefined` இருப்பினும் இதுவும் ஒரு பெறுமானமாக கருதபடுகிறது )

// ஆகியன  தர்க்க ரீதியாக பிழையானவை(false) , மற்றவை யாவும் சரியானவை (true).
// 0 மானது பிழையை (false) குறிக்கும்  "0" சரியை (true) குறிக்கும் எனினும் 0 == "0".

///////////////////////////////////
// 2. மாறிகள்  (Variables),அணிகள் (Arrays) மற்றும் பொருட்கள் (Objects)

// மாறிகளை உருவாக்க `var ` என்னும் குறியீட்டு சொல் (keyword ) பயன்படுகிறது .
//உருவாக்கப்படும் மாறிகள் எந்த வகையை சார்ந்தன என்பதை  JavaScript 
//தானாகவே நிர்ணயிக்கும் . மாறிக்கு  ஒரு பெறுமானத்தை வழங்க  `=` பாவிக்க 
var someVar = 5;

// //நீங்கள் மாறிகளை  நிறுவ  'var' குறியீட்டு சொல்லை பயன்படுத்தா விடினும் 
//அது தவறில்லை ...
someOtherVar = 10;

// ...ஆனால் நீங்கள் நிறுவிய மாறி(variable) எல்லா உங்கள் ப்ரோக்ராம் இன் சகல இடங்களிலும் 
//அணுக கூடியதாய் அமையும் , இல்லாவிடின் அது ஒரு குறிபிட்ட இடத்திற்கு மட்டும் 
//மட்டுபடுத்தபடும் .

//பெறுமானம் வழங்கபடாத மாறிகளுக்கு ,இயல்பாக/தானாக undefined என்ற பெறுமானம் 
//வழங்கப்படும் 
var someThirdVar; // = undefined

// மாறிகளில் கணித செயல்பாடுகளை நடத்த சுருக்கெழுத்து முறைகள் காணப்படுகின்றன :
someVar += 5; // இது  someVar = someVar + 5; ஐ  ஒத்தது someVar இன் பெறுமானம் இப்போது  10
someVar *= 10; //  someVar இன் பெறுமானம் இப்போது  100

//மிகவும் சுருக்கமான சுருகேழுத்து முறை கூட்டல்  அல்லது  கழித்தல் செயன்முறையை 
//மேற்கொள்ள    
someVar++; // someVar இன் பெறுமானம் இப்போது is 101
someVar--; // someVar இன் பெறுமானம் இப்போது 100

// அணிகள்(Arrays) எல்லாவகையான  பெறுமானங்களையும் உள்ளடக்க கூடியது 
var myArray = ["Hello", 45, true];

// அணிகள்(Arrays) உறுப்பினர்கள் சதுர அடைப்புக்குறிக்குள் அதன் தான இலக்கத்தை கொண்டு 
//அணுகமுடியும் .
// அணிகளில் உள்ள உறுப்புகள் 0 இருந்து  ஆரம்பமாகும் .
myArray[1]; // = 45

// அணிகள் உள்ள உறுப்புகளை மாற்றமுடியும்  அத்துடன் உறுப்புகளின் எண்ணிக்கையும் மாறலாம் .
myArray.push("World");
myArray.length; // = 4

// அணியில்(Array)  ஒரு குறிப்பிட்ட இடத்தில உள்ள பெறுமானத்தை மாற்ற .
myArray[3] = "Hello";

// JavaScript's பொருள் (objects) அகராதியை ஒத்தன  
// ஒழுங்கு படுத்த படாத சேகரிப்பு (collection) ஆகும் இதில் ஒரு சாவியும்(key) 
//அதுக்குரிய பெறுமானமும்(value) காணப்படும் .
var myObj = {key1: "Hello", key2: "World"};

// விசைகள் சரங்களை, ஆனால் அவர்கள் சரியான என்றால் மேற்கோள் அவசியம் இல்லை
//சாவிகளை உ.ம் : "key" என நிறுவலாம் ஆனால் , மேற்கோள்  ஆனது சாவி முன்பே நிறுவபட்டிருப்பின்
//அவசியம் இல்லை   
// சாவிகளுக்குரிய பெறுமானங்கள் எந்த வகையாகவும் இருக்கலாம் 
var myObj = {myKey: "myValue", "my other key": 4};

//பொருள் பண்புகளை சதுர அடைப்புக்குறிக்குள் அதன் சாவியின் பெயரை (key) கொண்டு 
//அணுகமுடியும் ,
myObj["my other key"]; // = 4

// ... அல்லது புள்ளி குறியீட்டை பயன்படுத்தி ,சாவியின் (key is a valid identifier)
//பெயர் மூலம் அணுக முடியும் 
myObj.myKey; // = "myValue"

// பொருட்கள்(ஒப்ஜெக்ட்ஸ்) மாற்றபடகூடியான சாவிகளின் பெறுமதிகளை மாற்ற முடியும் அத்துடன் புதிய 
//சாவிகளை(keys) இடவும் முடியும் 
myObj.myThirdKey = true;

//பெறுமதி வரையறுக்கபடாத ஒரு சாவியினை அணுகும் போது 
//அது வெளியிடும் பெறுமதி `undefined`.
myObj.myFourthKey; // = undefined

///////////////////////////////////
// 3. Logic and Control Structures

// The syntax for this section is almost identical to Java's.

// The `if` structure works as you'd expect.
var count = 1;
if (count == 3){
    // evaluated if count is 3
} else if (count == 4){
    // evaluated if count is 4
} else {
    // evaluated if it's not either 3 or 4
}

// As does `while`.
while (true){
    // An infinite loop!
}

// Do-while loops are like while loops, except they always run at least once.
var input;
do {
    input = getInput();
} while (!isValid(input))

// The `for` loop is the same as C and Java:
// initialisation; continue condition; iteration.
for (var i = 0; i < 5; i++){
    // will run 5 times
}

//The For/In statement loops iterates over every property across the entire prototype chain
var description = "";
var person = {fname:"Paul", lname:"Ken", age:18}; 
for (var x in person){
    description += person[x] + " ";
}

//If only want to consider properties attached to the object itself, 
//and not its prototypes use hasOwnProperty() check
var description = "";
var person = {fname:"Paul", lname:"Ken", age:18}; 
for (var x in person){
    if (person.hasOwnProperty(x)){
        description += person[x] + " ";
    }
}

//for/in should not be used to iterate over an Array where the index order is important.
//There is no guarantee that for/in will return the indexes in any particular order

// && is logical and, || is logical or
if (house.size == "big" && house.colour == "blue"){
    house.contains = "bear";
}
if (colour == "red" || colour == "blue"){
    // colour is either red or blue
}

// && and || "short circuit", which is useful for setting default values.
var name = otherName || "default";


// The `switch` statement checks for equality with `===`.
// use 'break' after each case
// or the cases after the correct one will be executed too.
grade = 'B';
switch (grade) {
  case 'A':
    console.log("Great job");
    break;
  case 'B':
    console.log("OK job");
    break;
  case 'C':
    console.log("You can do better");
    break;
  default:
    console.log("Oy vey");
    break;
}


///////////////////////////////////
// 4. Functions, Scope and Closures

// JavaScript functions are declared with the `function` keyword.
function myFunction(thing){
    return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"

// Note that the value to be returned must start on the same line as the
// `return` keyword, otherwise you'll always return `undefined` due to
// automatic semicolon insertion. Watch out for this when using Allman style.
function myFunction()
{
    return // <- semicolon automatically inserted here
    {
        thisIsAn: 'object literal'
    }
}
myFunction(); // = undefined

// JavaScript functions are first class objects, so they can be reassigned to
// different variable names and passed to other functions as arguments - for
// example, when supplying an event handler:
function myFunction(){
    // this code will be called in 5 seconds' time
}
setTimeout(myFunction, 5000);
// Note: setTimeout isn't part of the JS language, but is provided by browsers
// and Node.js.

// Function objects don't even have to be declared with a name - you can write
// an anonymous function definition directly into the arguments of another.
setTimeout(function(){
    // this code will be called in 5 seconds' time
}, 5000);

// JavaScript has function scope; functions get their own scope but other blocks
// do not.
if (true){
    var i = 5;
}
i; // = 5 - not undefined as you'd expect in a block-scoped language

// This has led to a common pattern of "immediately-executing anonymous
// functions", which prevent temporary variables from leaking into the global
// scope.
(function(){
    var temporary = 5;
    // We can access the global scope by assiging to the "global object", which
    // in a web browser is always `window`. The global object may have a
    // different name in non-browser environments such as Node.js.
    window.permanent = 10;
})();
temporary; // raises ReferenceError
permanent; // = 10

// One of JavaScript's most powerful features is closures. If a function is
// defined inside another function, the inner function has access to all the
// outer function's variables, even after the outer function exits.
function sayHelloInFiveSeconds(name){
    var prompt = "Hello, " + name + "!";
    // Inner functions are put in the local scope by default, as if they were
    // declared with `var`.
    function inner(){
        alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout is asynchronous, so the sayHelloInFiveSeconds function will
    // exit immediately, and setTimeout will call inner afterwards. However,
    // because inner is "closed over" sayHelloInFiveSeconds, inner still has
    // access to the `prompt` variable when it is finally called.
}
sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s

///////////////////////////////////
// 5. More about Objects; Constructors and Prototypes

// Objects can contain functions.
var myObj = {
    myFunc: function(){
        return "Hello world!";
    }
};
myObj.myFunc(); // = "Hello world!"

// When functions attached to an object are called, they can access the object
// they're attached to using the `this` keyword.
myObj = {
    myString: "Hello world!",
    myFunc: function(){
        return this.myString;
    }
};
myObj.myFunc(); // = "Hello world!"

// What this is set to has to do with how the function is called, not where
// it's defined. So, our function doesn't work if it isn't called in the
// context of the object.
var myFunc = myObj.myFunc;
myFunc(); // = undefined

// Inversely, a function can be assigned to the object and gain access to it
// through `this`, even if it wasn't attached when it was defined.
var myOtherFunc = function(){
    return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"

// We can also specify a context for a function to execute in when we invoke it
// using `call` or `apply`.

var anotherFunc = function(s){
    return this.myString + s;
}
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"

// The `apply` function is nearly identical, but takes an array for an argument
// list.

anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"

// This is useful when working with a function that accepts a sequence of
// arguments and you want to pass an array.

Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (uh-oh!)
Math.min.apply(Math, [42, 6, 27]); // = 6

// But, `call` and `apply` are only temporary. When we want it to stick, we can
// use `bind`.

var boundFunc = anotherFunc.bind(myObj);
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"

// `bind` can also be used to partially apply (curry) a function.

var product = function(a, b){ return a * b; }
var doubler = product.bind(this, 2);
doubler(8); // = 16

// When you call a function with the `new` keyword, a new object is created, and
// made available to the function via the this keyword. Functions designed to be
// called like that are called constructors.

var MyConstructor = function(){
    this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5

// Every JavaScript object has a 'prototype'. When you go to access a property
// on an object that doesn't exist on the actual object, the interpreter will
// look at its prototype.

// Some JS implementations let you access an object's prototype on the magic
// property `__proto__`. While this is useful for explaining prototypes it's not
// part of the standard; we'll get to standard ways of using prototypes later.
var myObj = {
    myString: "Hello world!"
};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){
        return this.myString.toLowerCase()
    }
};

myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

// This works for functions, too.
myObj.myFunc(); // = "hello world!"

// Of course, if your property isn't on your prototype, the prototype's
// prototype is searched, and so on.
myPrototype.__proto__ = {
    myBoolean: true
};
myObj.myBoolean; // = true

// There's no copying involved here; each object stores a reference to its
// prototype. This means we can alter the prototype and our changes will be
// reflected everywhere.
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

// We mentioned that `__proto__` was non-standard, and there's no standard way to
// change the prototype of an existing object. However, there are two ways to
// create a new object with a given prototype.

// The first is Object.create, which is a recent addition to JS, and therefore
// not available in all implementations yet.
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

// The second way, which works anywhere, has to do with constructors.
// Constructors have a property called prototype. This is *not* the prototype of
// the constructor function itself; instead, it's the prototype that new objects
// are given when they're created with that constructor and the new keyword.
MyConstructor.prototype = {
    myNumber: 5,
    getMyNumber: function(){
        return this.myNumber;
    }
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6

// Built-in types like strings and numbers also have constructors that create
// equivalent wrapper objects.
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

// Except, they aren't exactly equivalent.
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
    // This code won't execute, because 0 is falsy.
}

// However, the wrapper objects and the regular builtins share a prototype, so
// you can actually add functionality to a string, for instance.
String.prototype.firstCharacter = function(){
    return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

// This fact is often used in "polyfilling", which is implementing newer
// features of JavaScript in an older subset of JavaScript, so that they can be
// used in older environments such as outdated browsers.

// For instance, we mentioned that Object.create isn't yet available in all
// implementations, but we can still use it with this polyfill:
if (Object.create === undefined){ // don't overwrite it if it exists
    Object.create = function(proto){
        // make a temporary constructor with the right prototype
        var Constructor = function(){};
        Constructor.prototype = proto;
        // then use it to create a new, appropriately-prototyped object
        return new Constructor();
    }
}
```

## Further Reading

The [Mozilla Developer
Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) provides
excellent documentation for JavaScript as it's used in browsers. Plus, it's a
wiki, so as you learn more you can help others out by sharing your own
knowledge.

MDN's [A re-introduction to
JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
covers much of the concepts covered here in more detail. This guide has quite
deliberately only covered the JavaScript language itself; if you want to learn
more about how to use JavaScript in web pages, start by learning about the
[Document Object
Model](https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core)

[Learn Javascript by Example and with Challenges](http://www.learneroo.com/modules/64/nodes/350) is a variant of this reference with built-in challenges.

[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/) is an in-depth
guide of all the counter-intuitive parts of the language.

[JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527/) is a classic guide / reference book.

In addition to direct contributors to this article, some content is adapted
from Louie Dinh's Python tutorial on this site, and the [JS
Tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
on the Mozilla Developer Network.