mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
Merge pull request #1599 from Kirushanr/css-translation-ta
[CSS/ta] CSS Tamil Translation
This commit is contained in:
ven
commit
903ec29a3d
254
ta_in/css.html.markdown
Normal file
254
ta_in/css.html.markdown
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
---
|
||||||
|
language: css
|
||||||
|
contributors:
|
||||||
|
- ["Mohammad Valipour", "https://github.com/mvalipour"]
|
||||||
|
- ["Marco Scannadinari", "https://github.com/marcoms"]
|
||||||
|
- ["Geoffrey Liu", "https://github.com/g-liu"]
|
||||||
|
- ["Connor Shea", "https://github.com/connorshea"]
|
||||||
|
- ["Deepanshu Utkarsh", "https://github.com/duci9y"]
|
||||||
|
translators:
|
||||||
|
- ["Rasendran Kirushan", "https://github.com/kirushanr"]
|
||||||
|
filename: learncss.css
|
||||||
|
lang:in-ta
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
இணையத்தின் ஆரம்ப காலத்தில் முழுமையாக உரைகளை மட்டுமே கொண்டிருந்தன.
|
||||||
|
ஆனால் உலாவிகளில் கொண்டு வரப்பட்ட மாற்றங்களில் முழுமையான காட்சிபடுத்தல்களுடன்
|
||||||
|
கூடிய இணையதளங்கள் உருவாகின.
|
||||||
|
|
||||||
|
|
||||||
|
CSS ஆனது HTML மற்றும் அதன் அழகுபடுத்கூடிய காரணிகளையும் வேறுபடுத்த உதவியது.
|
||||||
|
|
||||||
|
ஒரு html இல் உள்ள உறுப்புகளை(elements) வெவ்வேறு வகையான காட்சி பண்புகளை வழங்க உதவுகிறது.
|
||||||
|
|
||||||
|
இந்த வழிகாட்டி CSS2 உக்கு எழுதப்பட்டுள்ளது, இருப்பினும் தற்போது CSS 3 வேகமாக பிரபல்யமாகி வருகிறது.
|
||||||
|
|
||||||
|
**குறிப்பு:**
|
||||||
|
CSS ஆனது முற்று முழுதாக visual(காட்சி) மாற்றங்களை தருவதால் அதை நீங்கள் முயற்சிக்க
|
||||||
|
இதை உபயோகபடுத்தலாம் [dabblet](http://dabblet.com/).
|
||||||
|
இந்த வழிகாட்டியின் பிரதான நோக்கம் CSS இன் syntax மற்றும் மேலும் சில வழிமுறைகளை
|
||||||
|
உங்களுக்கு கற்று தருவதாகும்
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* css இல் குறிப்புகளை இப்படி இடலாம் */
|
||||||
|
|
||||||
|
/* ####################
|
||||||
|
## SELECTORS
|
||||||
|
#################### */
|
||||||
|
|
||||||
|
/* ஒரு HTML பக்கத்தில் இருக்கும் உறுப்பை நாம் selector மூலம் தெரிவு செய்யலாம்
|
||||||
|
selector { property: value; /* more properties...*/ }
|
||||||
|
|
||||||
|
/*
|
||||||
|
கிழே ஒரு உதாரணம் காட்டப்பட்டுள்ளது:
|
||||||
|
|
||||||
|
<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* நீங்கள் அந்த உறுப்பை அதன் CSS class மூலம் தெரியலாம் */
|
||||||
|
.class1 { }
|
||||||
|
|
||||||
|
/* அல்லது இவ்வாறு இரண்டு class மூலம் தெரியலாம்! */
|
||||||
|
.class1.class2 { }
|
||||||
|
|
||||||
|
/* அல்லது அதன் பெயரை பாவித்து தெரியலாம் */
|
||||||
|
div { }
|
||||||
|
|
||||||
|
/* அல்லது அதன் id ஐ பயன்படுத்தி தெரியலாம்*/
|
||||||
|
#anID { }
|
||||||
|
|
||||||
|
/* அல்லது ஒரு உறுப்பின் பண்பு ஒன்றின் மூலம்! */
|
||||||
|
[attr] { font-size:smaller; }
|
||||||
|
|
||||||
|
/* அல்லது அந்த பண்பு ஒரு குறிப்பிட்ட பெறுமானத்தை கொண்டு இருப்பின் */
|
||||||
|
[attr='value'] { font-size:smaller; }
|
||||||
|
|
||||||
|
/* ஒரு பெறுமதியுடன் ஆரம்பமாகும் போது (CSS 3) */
|
||||||
|
[attr^='val'] { font-size:smaller; }
|
||||||
|
|
||||||
|
/* அல்லது ஒரு பெறுமதியுடன் முடிவடையும் போது (CSS 3) */
|
||||||
|
[attr$='ue'] { font-size:smaller; }
|
||||||
|
|
||||||
|
/* அல்லது காற்புள்ளியால் பிரிக்கப்பட்ட பெறுமானங்களை கொண்டு இருப்பின் */
|
||||||
|
[otherAttr~='foo'] { }
|
||||||
|
[otherAttr~='bar'] { }
|
||||||
|
|
||||||
|
/* அல்லது `-` பிரிக்கப்பட்ட பெறுமானங்களை கொண்டு இருப்பின், உ.ம்:-, "-" (U+002D) */
|
||||||
|
[otherAttr|='en'] { font-size:smaller; }
|
||||||
|
|
||||||
|
|
||||||
|
/* நாம் இரண்டு selectors ஐ ஒன்றாக உபயோகித்தும் ஒரு உறுப்பை அணுக முடியும் ,
|
||||||
|
அவற்றுக்கு இடயே இடைவெளி காணப்படகூடாது
|
||||||
|
*/
|
||||||
|
div.some-class[attr$='ue'] { }
|
||||||
|
|
||||||
|
/*அல்லது ஒரு உறுப்பினுள் இருக்கும் இன்னொரு உறுப்பை (child element) அணுக */
|
||||||
|
div.some-parent > .class-name { }
|
||||||
|
|
||||||
|
/* ஒரு ஒரு பிரதான உறுப்பில் உள்ள உப உறுப்புகளை அணுக*/
|
||||||
|
div.some-parent .class-name { }
|
||||||
|
|
||||||
|
/* மேலே குறிபிட்ட அணுகுமுறையில் இடைவெளி காணப்படாது விடின்
|
||||||
|
அந்த selector வேலை செய்யாது
|
||||||
|
*/
|
||||||
|
div.some-parent.class-name { }
|
||||||
|
|
||||||
|
/* அல்லது ஒரு உறுப்புக்கு அடுத்துள்ள */
|
||||||
|
.i-am-just-before + .this-element { }
|
||||||
|
|
||||||
|
/* or அல்லது அதற்கு முந்தய உறுப்பின் மூலம் */
|
||||||
|
.i-am-any-element-before ~ .this-element { }
|
||||||
|
|
||||||
|
/*
|
||||||
|
சில selectors ஐ pseudo class மூலம் அணுக முடியும் , எப்போது எனில் அவை
|
||||||
|
குறித்த ஒரு நிலையில் இருக்கும் போது ஆகும்
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* உதாரணமாக நாம் ஒரு உறுப்பின் மீதாக cursor ஐ நகர்த்தும் போது */
|
||||||
|
selector:hover { }
|
||||||
|
|
||||||
|
/* அல்லது ஒரு
|
||||||
|
பார்வையிட்ட இணைப்பு */
|
||||||
|
selector:visited { }
|
||||||
|
|
||||||
|
/* அல்லது ஒரு பார்வையிடபடாத இணைப்பு */
|
||||||
|
selected:link { }
|
||||||
|
|
||||||
|
/* அல்லது ஒரு element ஐ focus செய்யும் போது */
|
||||||
|
selected:focus { }
|
||||||
|
|
||||||
|
/*
|
||||||
|
எல்லா elementகளையும் ஒரே நேரத்தில் அணுக `*`
|
||||||
|
*/
|
||||||
|
* { } /* all elements */
|
||||||
|
.parent * { } /* all descendants */
|
||||||
|
.parent > * { } /* all children */
|
||||||
|
|
||||||
|
/* ####################
|
||||||
|
## பண்புகள்
|
||||||
|
#################### */
|
||||||
|
|
||||||
|
selector {
|
||||||
|
|
||||||
|
/* நீளத்தின் அலகுகள் absolute அல்லது relative ஆக இருக்கலாம். */
|
||||||
|
|
||||||
|
/* Relative units */
|
||||||
|
width: 50%; /* percentage of parent element width */
|
||||||
|
font-size: 2em; /* multiples of element's original font-size */
|
||||||
|
font-size: 2rem; /* or the root element's font-size */
|
||||||
|
font-size: 2vw; /* multiples of 1% of the viewport's width (CSS 3) */
|
||||||
|
font-size: 2vh; /* or its height */
|
||||||
|
font-size: 2vmin; /* whichever of a vh or a vw is smaller */
|
||||||
|
font-size: 2vmax; /* or greater */
|
||||||
|
|
||||||
|
/* Absolute units */
|
||||||
|
width: 200px; /* pixels */
|
||||||
|
font-size: 20pt; /* points */
|
||||||
|
width: 5cm; /* centimeters */
|
||||||
|
min-width: 50mm; /* millimeters */
|
||||||
|
max-width: 5in; /* inches */
|
||||||
|
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
color: #F6E; /* short hex format */
|
||||||
|
color: #FF66EE; /* long hex format */
|
||||||
|
color: tomato; /* a named color */
|
||||||
|
color: rgb(255, 255, 255); /* as rgb values */
|
||||||
|
color: rgb(10%, 20%, 50%); /* as rgb percentages */
|
||||||
|
color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 < a < 1 */
|
||||||
|
color: transparent; /* equivalent to setting the alpha to 0 */
|
||||||
|
color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */
|
||||||
|
color: hsla(0, 100%, 50%, 0.3); /* as hsla percentages with alpha */
|
||||||
|
|
||||||
|
/* Images as backgrounds of elements */
|
||||||
|
background-image: url(/img-path/img.jpg); /* quotes inside url() optional */
|
||||||
|
|
||||||
|
/* Fonts */
|
||||||
|
font-family: Arial;
|
||||||
|
/* if the font family name has a space, it must be quoted */
|
||||||
|
font-family: "Courier New";
|
||||||
|
/* if the first one is not found, the browser uses the next, and so on */
|
||||||
|
font-family: "Courier New", Trebuchet, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
ஒரு css file ஐ save செய்ய `.css`.
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<!-- உங்கள் css file ஐ <head>. உள் குறிப்பிட வேண்டும்
|
||||||
|
சரியான முறையை பார்க்க http://stackoverflow.com/questions/8284365 -->
|
||||||
|
<link rel='stylesheet' type='text/css' href='path/to/style.css' />
|
||||||
|
|
||||||
|
<!-- நீங்கள் css ஐ html உள்ளும் எழுத முடியும் -->
|
||||||
|
<style>
|
||||||
|
a { color: purple; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- அல்லது css ஐ நேரடியாக அந்த element இல் எழுத முடியும் -->
|
||||||
|
<div style="border: 1px solid red;">
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Precedence அல்லது Cascade
|
||||||
|
|
||||||
|
ஒரு element ஆனது ஒன்றுக்கு மேற்பட்ட selectors மூலம் அணுகபடலாம் ,இவ்வாறான சந்தர்பங்களில்
|
||||||
|
ஒரு குறிபிட்ட விதிமுறையை பின்பற்றுகிறது இது cascading என அழைக்கபடுகிறது, அதனால் தன
|
||||||
|
இது Cascading Style Sheets என அழைக்கபடுகிறது.
|
||||||
|
|
||||||
|
|
||||||
|
கிழே தரப்பட்டுள்ள css இன் படி:
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* A */
|
||||||
|
p.class1[attr='value']
|
||||||
|
|
||||||
|
/* B */
|
||||||
|
p.class1 { }
|
||||||
|
|
||||||
|
/* C */
|
||||||
|
p.class2 { }
|
||||||
|
|
||||||
|
/* D */
|
||||||
|
p { }
|
||||||
|
|
||||||
|
/* E */
|
||||||
|
p { property: value !important; }
|
||||||
|
```
|
||||||
|
|
||||||
|
அத்துடன் கிழே தரப்பட்டுள்ள கட்டமைப்பின்படியும்:
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<p style='/*F*/ property:value;' class='class1 class2' attr='value' />
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
css முன்னுரிமை பின்வருமாறு
|
||||||
|
* `E` இதுவே அதிக முக்கியத்துவம் வாய்ந்தது காரணம் இது `!important` பயன்படுத்துகிறது. இதை பயன்படுத்துவதை தவிர்க்கவும்
|
||||||
|
* `F` இது இரண்டாவது காரணம் இது inline style.
|
||||||
|
* `A` இது மூன்றவதாக வருகிறது, காரணம் இது மூன்று காரணிகளை குறிக்கிறது : element(உறுப்பு) பெயர் `p`, அதன் class `class1`, an அதன் பண்பு(attribute) `attr='value'`.
|
||||||
|
* `C` இது அடுத்த நிலையில் உள்ளது கடைசி.
|
||||||
|
* `B` இது அடுத்தது.
|
||||||
|
* `D` இதுவே கடைசி .
|
||||||
|
|
||||||
|
## css அம்சங்களின் பொருந்தகூடிய தன்மை
|
||||||
|
|
||||||
|
பெரும்பாலான css 2 வின் அம்சங்கள் எல்லா உலாவிகளிலும் , கருவிகளிலும் உள்ளன. ஆனால் முன்கூட்டியே அந்த அம்சங்களை பரிசோதிப்பது நல்லது.
|
||||||
|
|
||||||
|
## வளங்கள்
|
||||||
|
|
||||||
|
* To run a quick compatibility check, [CanIUse](http://caniuse.com).
|
||||||
|
* CSS Playground [Dabblet](http://dabblet.com/).
|
||||||
|
* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
||||||
|
* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/)
|
||||||
|
|
||||||
|
## மேலும் வாசிக்க
|
||||||
|
|
||||||
|
* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
|
||||||
|
* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/)
|
||||||
|
* [QuirksMode CSS](http://www.quirksmode.org/css/)
|
||||||
|
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
|
||||||
|
* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing
|
||||||
|
* [CSS-Tricks](https://css-tricks.com)
|
||||||
594
ta_in/javascript.html.markdown
Normal file
594
ta_in/javascript.html.markdown
Normal file
@ -0,0 +1,594 @@
|
|||||||
|
---
|
||||||
|
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. தர்க்கம் மற்றும் கட்டுப்பாட்டு கட்டமைப்பு
|
||||||
|
|
||||||
|
// கீழே காட்டப்பட்டுள்ள தொடரியல் ஜாவா வை ஒத்தது
|
||||||
|
|
||||||
|
// The `if` ஒரு குறித்த தர்க்கம் சரியாயின்
|
||||||
|
//அல்லது என்ற வடிவமைப்பை
|
||||||
|
var count = 1;
|
||||||
|
if (count == 3){
|
||||||
|
// count இன் பெறுமானம் 3 சமமா என பார்க்கபடுகிறது
|
||||||
|
} else if (count == 4){
|
||||||
|
// count இன் பெறுமானம் 4க்கு சமமா என பார்க்கபடுகிறது
|
||||||
|
} else {
|
||||||
|
// count ஆனது 3 அல்ல 4 அல்ல எனின்
|
||||||
|
}
|
||||||
|
|
||||||
|
// ஒரு குறிப்பிட்ட ஒப்பீடு உண்மையாக இருக்கும் வரை `while`.
|
||||||
|
while (true){
|
||||||
|
// இந்த இருக்கும் கூற்றுகள் முடிவிலி தடவை மறுபடி செயற்படுத்தப்படும் !
|
||||||
|
}
|
||||||
|
|
||||||
|
// while போல் அல்லாது do-while ,அவை ஒரு தடவையேனும் அதனுள் உள்ள கூற்றுகள் செயற்படுத்தபடும்
|
||||||
|
var input;
|
||||||
|
do {
|
||||||
|
input = getInput();
|
||||||
|
} while (!isValid(input))
|
||||||
|
|
||||||
|
// for (loop /சுற்று ) C , ஜாவாவை ஒத்தது
|
||||||
|
//மாறிக்கு பெறுமானத்தை வழங்கல் , மாறியானது தர்க்கத்தை பூர்த்தி செய்கிறதா என பார்த்தல் ,
|
||||||
|
//சுற்றுக்குள் இருக்கும் கூற்றை செயற்படுதல்
|
||||||
|
|
||||||
|
for (var i = 0; i < 5; i++){
|
||||||
|
// இந்த சுற்று 5 தடவைகள் தொடர்ந்து செயற்படுத்தபடும்
|
||||||
|
}
|
||||||
|
|
||||||
|
//for /In சுற்றுகள் prototype சங்கிலியில் உள்ள சகல காரணிகள் ஊடகவும் செல்லும்
|
||||||
|
var description = "";
|
||||||
|
var person = {fname:"Paul", lname:"Ken", age:18};
|
||||||
|
for (var x in person){
|
||||||
|
description += person[x] + " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
//ஒரு பொருளில் (Object) இடப்பட்ட பண்புகளை (properties) கருத்தில் கொள்ளும் போது
|
||||||
|
//குறிப்பிட்ட பண்புகளை அந்த Object கொண்டுள்ளதா என பார்க்க
|
||||||
|
var description = "";
|
||||||
|
var person = {fname:"Paul", lname:"Ken", age:18};
|
||||||
|
for (var x in person){
|
||||||
|
if (person.hasOwnProperty(x)){
|
||||||
|
description += person[x] + " ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//for /in ஆனது அணியில் உள்ள பண்புகள் ஒழுங்குபடுத்தப்பட்டவிதம் முக்கியம்
|
||||||
|
//ஆயின் பாவிப்பதை தவிர்க்கவும் ஏனெனில் அது சரியான ஒழுங்கில்
|
||||||
|
//வெளியீட்டை தரும் என்பது ஐயம் ஆகும்
|
||||||
|
|
||||||
|
// && 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";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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 நிறுவ `function` keyword.பயன்படும்
|
||||||
|
function myFunction(thing){
|
||||||
|
return thing.toUpperCase();
|
||||||
|
}
|
||||||
|
myFunction("foo"); // = "FOO"
|
||||||
|
|
||||||
|
//ஒரு பெறுமானத்தை return செய்ய வேண்டும் எனின் இரண்டும் ஒரே வரியில்
|
||||||
|
//இருக்க வேண்டும் இல்லாவிடின் return ஆனது `undefined ` return செய்யும்
|
||||||
|
//காற் புள்ளி தானாகவே இடப்படும் , நீங்கள் Allman style உபயோகிக்கும் போது
|
||||||
|
//அவதானமாக இருக்கவும்
|
||||||
|
function myFunction()
|
||||||
|
{
|
||||||
|
return // <- semicolon automatically inserted here
|
||||||
|
{
|
||||||
|
thisIsAn: 'object literal'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
myFunction(); // = undefined
|
||||||
|
|
||||||
|
// JavaScript functions ஆனது first class objects ஆகும் ,எனவே அவற்றை மாறிகளுக்கு
|
||||||
|
//assign செய்ய முடியும் அதுமட்டும் அல்லது functions களில் arguments ஆக அனுப்பமுடியும்
|
||||||
|
// உதாரணமாக ஒரு event handler:
|
||||||
|
function myFunction(){
|
||||||
|
//இந்த code 5 செக்கன்களில் செயற்படுத்தப்படும்
|
||||||
|
}
|
||||||
|
setTimeout(myFunction, 5000);
|
||||||
|
// Note: setTimeout ஆனது ஜாவஸ்க்ரிப்ட் சேர்ந்தது அன்று , ஆனால் அந்த வசதி
|
||||||
|
//உலாவிகளிலும் ,Node .js காணப்படுகிறது
|
||||||
|
|
||||||
|
// Function objects கட்டாயம் பெயரிடப்பட வீண்டும் என்று அவசியம் இல்லை
|
||||||
|
// அவை anonymous(பெயரிடப்படாமல்) உருவாக்கபடலாம்
|
||||||
|
setTimeout(function(){
|
||||||
|
//இந்த code 5 செக்கன்களில் செயற்படுத்தப்படும்
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
// JavaScript function ஒரு குறிப்பிட்ட scope(எல்லை) கொண்டுள்ளது ;
|
||||||
|
//functions தமக்கென ஒரு scope கொண்டுள்ளன .
|
||||||
|
|
||||||
|
if (true){
|
||||||
|
var i = 5;
|
||||||
|
}
|
||||||
|
i; // = 5 - //இது undefined அல்ல
|
||||||
|
|
||||||
|
// இதன் காரணமாக anonymous functions உடனடியாக செயற்படுத்தபடுகின்றன
|
||||||
|
//இதன் மூலம் தற்காலிக மாறிகள்(variable) குளோபல் scope
|
||||||
|
//இற்கு மாறுவதை தவிர்க்கலாம் .
|
||||||
|
(function(){
|
||||||
|
var temporary = 5;
|
||||||
|
//நாங்கள் ஒரு மாறியை எங்கிருந்தும் அணுக (access) அதை "global object"
|
||||||
|
//ஒன்றுக்கு வழங்க வேண்டும் உலாவியில் அது எப்போதும் `window` ஆகும் .
|
||||||
|
//உலாவி அல்லாத சூழலில் (Node.js) வேறு பெயருடன் இருக்கும்
|
||||||
|
window.permanent = 10;
|
||||||
|
})();
|
||||||
|
temporary; // raises ReferenceError
|
||||||
|
permanent; // = 10
|
||||||
|
|
||||||
|
//JavaScript's மிகவும் சக்தி வாய்ந்த ஒரு வசதி closures ஆகும்
|
||||||
|
//ஒரு function இன்னொரு function உள் உருவாக்கபடின்
|
||||||
|
//அது உருவாகப்பட்ட function இன் மாறிகளை அணுக முடியும்
|
||||||
|
function sayHelloInFiveSeconds(name){
|
||||||
|
var prompt = "Hello, " + name + "!";
|
||||||
|
// Inner functions ஆனது local scope இல் காணப்படும்
|
||||||
|
//அது `var ` என்ற குறியீட்டு சொல்லால் நிறுவப்படும்
|
||||||
|
function inner(){
|
||||||
|
alert(prompt);
|
||||||
|
}
|
||||||
|
setTimeout(inner, 5000);
|
||||||
|
//setTimeout ஆனது background இல் இயங்கும் , எனவே sayHelloInFiveSeconds function,
|
||||||
|
//செயற்பாடு முடிவடைய ,setTimeout ஆனது inner function call செய்யும்.
|
||||||
|
|
||||||
|
}
|
||||||
|
sayHelloInFiveSeconds("Adam"); // //இது ஒரு popup ஐ ஐந்து செக்கன்களில் காட்டும்
|
||||||
|
|
||||||
|
///////////////////////////////////
|
||||||
|
// 5. Objects; Constructors and Prototypes பற்றி மேலும்
|
||||||
|
|
||||||
|
// Objects functions ஐ கொண்டிருக்கலாம்
|
||||||
|
var myObj = {
|
||||||
|
myFunc: function(){
|
||||||
|
return "Hello world!";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
myObj.myFunc(); // = "Hello world!"
|
||||||
|
|
||||||
|
//functions ஆனது objects உடன் இணைக்கப்பட்டுள போது அவை object ஐ அணுக முடியும்
|
||||||
|
//அவை this என்ற குறியீட்டு சொல்லை பயன்படுத்தி இணைக்கபடுகின்றன
|
||||||
|
myObj = {
|
||||||
|
myString: "Hello world!",
|
||||||
|
myFunc: function(){
|
||||||
|
return this.myString;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
myObj.myFunc(); // = "Hello world!"
|
||||||
|
|
||||||
|
//எங்கள் function ஆனது தொழிற் படாமல் போகலாம் அது context(அமைப்பு ) of the object call செய்யபடவிடின்
|
||||||
|
var myFunc = myObj.myFunc;
|
||||||
|
myFunc(); // = undefined
|
||||||
|
|
||||||
|
|
||||||
|
//function ஆனது ஒரு object உக்கு assign செய்யலாம் பிறகு அதை நாம் அணுகமுடியும்
|
||||||
|
//`this` மூலம்
|
||||||
|
var myOtherFunc = function(){
|
||||||
|
return this.myString.toUpperCase();
|
||||||
|
}
|
||||||
|
myObj.myOtherFunc = myOtherFunc;
|
||||||
|
myObj.myOtherFunc(); // = "HELLO WORLD!"
|
||||||
|
|
||||||
|
//ஒரு function ஒரு அமைப்பை நாம் உருவாக்க முடியும்
|
||||||
|
//அதை நாம் `call` அல்லது `apply` மூலம் செயல்படுத்த முடியும்
|
||||||
|
|
||||||
|
var anotherFunc = function(s){
|
||||||
|
return this.myString + s;
|
||||||
|
}
|
||||||
|
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"
|
||||||
|
|
||||||
|
//apply செயற்பாட்டளவில் ஒத்தன ,ஆனால் அது array (அணி) argument
|
||||||
|
//ஆக எடுக்கிறது.
|
||||||
|
|
||||||
|
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"
|
||||||
|
|
||||||
|
//இது தொடர்ச்சியான arguments ஐ நாம் function ஒன்றுக்குள் pass பண்ண
|
||||||
|
//வேண்டும் எனில் மிகவும் உபயோகமானது
|
||||||
|
|
||||||
|
Math.min(42, 6, 27); // = 6
|
||||||
|
Math.min([42, 6, 27]); // = NaN (uh-oh!)
|
||||||
|
Math.min.apply(Math, [42, 6, 27]); // = 6
|
||||||
|
|
||||||
|
//ஆனால் `call ` ,`apply ` இரண்டும் தற்காலிகமானவை
|
||||||
|
//அவற்றை நிரந்தரமாக்க bind function ஐ பயன்படுத்தவும்
|
||||||
|
|
||||||
|
var boundFunc = anotherFunc.bind(myObj);
|
||||||
|
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"
|
||||||
|
|
||||||
|
//`bind ` ஐ உபயோகித்து ஒரு function ஐ பகுதியாக apply செய்ய முடியும்
|
||||||
|
|
||||||
|
var product = function(a, b){ return a * b; }
|
||||||
|
var doubler = product.bind(this, 2);
|
||||||
|
doubler(8); // = 16
|
||||||
|
|
||||||
|
|
||||||
|
//ஒரு function ஐ நாம் new என்ற குறியீட்டு சொல்லை பயன்படுத்தி
|
||||||
|
//அழைக்கும் போது புதிய object உருவாக்கப்படும் .இவ்வாறான functions
|
||||||
|
//constructors என அழைக்கப்படும்
|
||||||
|
|
||||||
|
var MyConstructor = function(){
|
||||||
|
this.myNumber = 5;
|
||||||
|
}
|
||||||
|
myNewObj = new MyConstructor(); // = {myNumber: 5}
|
||||||
|
myNewObj.myNumber; // = 5
|
||||||
|
|
||||||
|
//ஒவ்வொரு JavaScript object உம் ஒரு `prototype ` கொண்டுள்ளது
|
||||||
|
//நீங்கள் object ஒன்றின் ஒரு property ஐ அணுகும் போது
|
||||||
|
//அந்த property இல்லாவிடின் interpreter ஆனது
|
||||||
|
//அதன் prototype உள்ளதா என பார்க்கும்
|
||||||
|
|
||||||
|
//JS இன் சில செயலாக்கங்கள் ஒரு object இன் protoype ஐ
|
||||||
|
//இலகுவாக `__proto__` மூலம் access செய்ய முடியும் .
|
||||||
|
//இது prototype பாவணை யை இலகுவாக்கினாலும்
|
||||||
|
//இது சரியான ஒரு முறை அல்ல
|
||||||
|
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!"
|
||||||
|
|
||||||
|
//உங்கள் property prototype இல் இல்லது இருப்பின் , protype இன்
|
||||||
|
//prototype search செய்யப்படும்
|
||||||
|
myPrototype.__proto__ = {
|
||||||
|
myBoolean: true
|
||||||
|
};
|
||||||
|
myObj.myBoolean; // = true
|
||||||
|
|
||||||
|
//ஒவ்வொரு object உம் அதன் protype க்கும் reference (மேற்கோள் ) ஒன்றை வைத்திருக்கும்
|
||||||
|
//நாம் ஒரு protype இணை மாற்றினால் அதன் மாற்றங்கள் எல்லா இடத்திலும் (program இல் )
|
||||||
|
//பிரதிபலிக்கும்
|
||||||
|
myPrototype.meaningOfLife = 43;
|
||||||
|
myObj.meaningOfLife; // = 43
|
||||||
|
|
||||||
|
|
||||||
|
//நாம் முன்பு கூறியது போல் `__proto__` பயன்படுத்துவது சரியான முறை அல்ல
|
||||||
|
//எனவே நாம் ஒரு protype ஐ object இல் உருவாக்க இரண்டு வழிமுறைகள்
|
||||||
|
//உள்ளன
|
||||||
|
|
||||||
|
// முதல் முறை Object.create இது அண்மையில் அறிமுகம் செய்ய பட்ட ஒன்று
|
||||||
|
//எனவே சில இடங்களில் இந்த முறை இன்னும் அறிமுகம் ஆகவில்லை
|
||||||
|
|
||||||
|
var myObj = Object.create(myPrototype);
|
||||||
|
myObj.meaningOfLife; // = 43
|
||||||
|
|
||||||
|
|
||||||
|
// இரண்டாவது முறை , இது சகல இடங்களிலும் வேலைசெய்யும், இது constructors மூலம்.
|
||||||
|
//constructors prototype என்னும் ஒரு காரணியை கொண்டுள்ளது , இது constructor function
|
||||||
|
//இன் prototype அன்று. ,இது நாம் new என்ற குறியீட்டு சொல்லையும் அந்த constructor உபயோகித்து
|
||||||
|
//உருவாக்கபடுகிறது
|
||||||
|
|
||||||
|
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.
|
||||||
|
// JavaScript இல் உள்ள strings மற்றும் numbers வகைகளும் constructors கொண்டுள்ளன
|
||||||
|
//இவை wrapper objects ஐ ஒத்தன
|
||||||
|
|
||||||
|
var myNumber = 12;
|
||||||
|
var myNumberObj = new Number(12);
|
||||||
|
myNumber == myNumberObj; // = true
|
||||||
|
|
||||||
|
|
||||||
|
//இவை மிக சிறிய அளவில் ஒத்தவை
|
||||||
|
typeof myNumber; // = 'number'
|
||||||
|
typeof myNumberObj; // = 'object'
|
||||||
|
myNumber === myNumberObj; // = false
|
||||||
|
if (0){
|
||||||
|
// இந்த கூற்றானது செயல்படுத்தபடாது ஏனெனில் ௦ false ஆகும்
|
||||||
|
}
|
||||||
|
|
||||||
|
// However, the wrapper objects and the regular builtins share a prototype, so
|
||||||
|
// you can actually add functionality to a string, for instance.
|
||||||
|
|
||||||
|
//இருப்பினும் wrapper objects மற்றும் regular builtins ஆகியன prototype ஒன்றை கொண்டுள்ளன
|
||||||
|
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.
|
||||||
|
|
||||||
|
//இந்த முறையானது "polyfilling" இல் உபயோகபடுத்தபடுகிறது.
|
||||||
|
//புதிய சில வசதிகளை JavaScript பழைய JavaScript பிரதிகளில் இல் உருவாக்குகிறது.
|
||||||
|
//இது பழைய சூழல்களில் உபயோகிகப்படும்.
|
||||||
|
|
||||||
|
|
||||||
|
//நாங்கள் முன்பு கூறி இருந்தோம் Object.create சில இடங்களில் இந்த முறை இன்னும்
|
||||||
|
//அறிமுகம் ஆகவில்லை என்று ஆனால் இதை 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## மேலும் JavaScript பற்றி கற்க
|
||||||
|
|
||||||
|
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.
|
||||||
86
ta_in/json.html.markdown
Normal file
86
ta_in/json.html.markdown
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
language: json
|
||||||
|
filename: learnjson.json
|
||||||
|
contributors:
|
||||||
|
- ["Anna Harren", "https://github.com/iirelu"]
|
||||||
|
- ["Marco Scannadinari", "https://github.com/marcoms"]
|
||||||
|
- ["himanshu", "https://github.com/himanshu81494"]
|
||||||
|
translators:
|
||||||
|
- ["Rasendran Kirushan", "https://github.com/kirushanr"]
|
||||||
|
lang: ta-in
|
||||||
|
---
|
||||||
|
|
||||||
|
ஜேசன் ஒரு ஒரு மிக எளிய தரவு உள்மாற்றீட்டு வடிவம் ஆகும்.
|
||||||
|
Learn X in Y Minutes இதுவே மிகவும் இலகுவான பகுதியாக அமைய போகிறது.
|
||||||
|
|
||||||
|
|
||||||
|
ஜேசன் இன் எளிமையான கட்டமைப்பில் குறிப்புக்கள் (Comments) இல்லை , எனினும்
|
||||||
|
பெரும்பாலான பாகுபடுத்திகளில் C - style முறையிலான (`//`, `/* */`) குறிப்புகளை இட முடியும்.
|
||||||
|
சில பாகுபடுத்திகள்(interpreter) குறிப்புகளுக்கு (comments)தொடர்ச்சியாக வரும்
|
||||||
|
காற்புள்ளியை அனுமதிக்கின்றன (உதாரணமாக ஒரு அணியை (array) அடுத்துவரும் காற்புள்ளி
|
||||||
|
அல்லது ஒரு பொருளில் (object)உள்ள கடைசி உறுப்பை/சொத்தை( last property) அடுத்து வரும் காற்புள்ளி )
|
||||||
|
எனினும் சகல இடங்களிலும் ஜேசன் பயன்படுத்த பட வேண்டும் எனில் மேற்கூறிய குறிப்புகளை தவிர்த்தல் நல்லது .\
|
||||||
|
|
||||||
|
|
||||||
|
ஜேசன் 100% மிக சரியாக அமைவது மட்டும் இன்றி
|
||||||
|
இலகுவாக புரியக் கூடிய எளிய தரவு உள்மாற்றீட்டு வடிவம் ஆகும்.
|
||||||
|
|
||||||
|
|
||||||
|
ஜேசன் அனுமதிக்கும் தரவு வகைகள் : சரம் (string),முழு (int),பூலியன் (தர்க ரீதியில் ஆன கட்டமைப்பு),
|
||||||
|
அணி (array ),கழி (null ),பொருள் (object).
|
||||||
|
|
||||||
|
ஜேசன் அனுமதிக்கும் அல்லது பாவனைக்கு உட்படுத்த கூடிய உலாவிகள் (browsers):
|
||||||
|
Firefox(Mozilla) 3.5, Internet Explorer 8, Chrome, Opera 10, Safari 4.
|
||||||
|
|
||||||
|
ஜேசனின் கோப்புவகை(filetype) ".json " ஆகும் .
|
||||||
|
|
||||||
|
ஜேசன் உரைக்கான MIME வகை "application/json" ஆகும்.
|
||||||
|
ஜேசன் இல் காணப்படும் பிரதான பின்னடைவு தரவு இனம் இதுவென்று வரையறுக்க
|
||||||
|
படாமை ஆகும் .
|
||||||
|
|
||||||
|
ஒரு ஜேசன் இன் எளிய கட்டமைப்பு கீழே காட்டப்பட்டுள்ளது
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"key": "ஒரு சாவிக்கு ஒரு பெறுமதி உள்ளது ",
|
||||||
|
|
||||||
|
"keys": "சாவிகள் , மற்றும் பெறுமானங்கள் மேற்கோள் குறிக்குள் இடல் வேண்டும்",
|
||||||
|
"numbers": 0,
|
||||||
|
"strings": "Hellø, wørld. எல்லாவகையான unicode உம் அனுமதிக்கப்படும், அத்துடன் \"escaping\".",
|
||||||
|
"has bools?": true,
|
||||||
|
"nothingness": null,
|
||||||
|
|
||||||
|
"big number": 1.2e+100,
|
||||||
|
|
||||||
|
"objects": {
|
||||||
|
"comment": "பெரும்பாலான கட்டமைப்புகள் objects இல் இருந்தே வருகின்றன",
|
||||||
|
|
||||||
|
"array": [0, 1, 2, 3, "array யானது எல்லாவகையான பெறுமானங்களையும் கொண்டிருக்கும்", 5],
|
||||||
|
|
||||||
|
"another object": {
|
||||||
|
"comment": "இவை ஒன்றுக்குள் இன்னொன்றை எழுத முடியும்"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"silliness": [
|
||||||
|
{
|
||||||
|
"sources of potassium": ["வாழைபழம்"]
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[1, 0, 0, 0],
|
||||||
|
[0, 1, 0, 0],
|
||||||
|
[0, 0, 1, "neo"],
|
||||||
|
[0, 0, 0, 1]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
|
||||||
|
"alternative style": {
|
||||||
|
"comment": "இதை பார்க்கவும்"
|
||||||
|
, "comma position": "doesn't matter - as long as it's before the value, then it's valid"
|
||||||
|
, "another comment": "how nice"
|
||||||
|
},
|
||||||
|
|
||||||
|
"that was short": "நீங்கள் ஜேசன் பற்றி யாவற்றையும் கற்றுள்ளீர்கள்"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
145
ta_in/xml.html.markdown
Normal file
145
ta_in/xml.html.markdown
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
---
|
||||||
|
language: xml
|
||||||
|
filename: learnxml.xml
|
||||||
|
contributors:
|
||||||
|
- ["João Farias", "https://github.com/JoaoGFarias"]
|
||||||
|
translators:
|
||||||
|
- ["Rasendran Kirushan", "https://github.com/kirushanr"]
|
||||||
|
lang:in-ta
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
XML ஆனது ஒரு கட்டமைப்பு மொழி ஆகும் இது தகவலை சேமிக்கவும்
|
||||||
|
தகவலை பரிமாறவும் உருவாக்கபட்டுள்ளது
|
||||||
|
|
||||||
|
|
||||||
|
HTML போல் அன்றி , XML ஆனது தகவலை மட்டும் கொண்டு செல்ல்கிறது
|
||||||
|
* XML வாக்கிய அமைப்பு
|
||||||
|
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<!-- இது ஒரு XML குறிப்பு -->
|
||||||
|
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<bookstore>
|
||||||
|
<book category="COOKING">
|
||||||
|
<title lang="en">Everyday Italian</title>
|
||||||
|
<author>Giada De Laurentiis</author>
|
||||||
|
<year>2005</year>
|
||||||
|
<price>30.00</price>
|
||||||
|
</book>
|
||||||
|
<book category="CHILDREN">
|
||||||
|
<title lang="en">Harry Potter</title>
|
||||||
|
<author>J K. Rowling</author>
|
||||||
|
<year>2005</year>
|
||||||
|
<price>29.99</price>
|
||||||
|
</book>
|
||||||
|
<book category="WEB">
|
||||||
|
<title lang="en">Learning XML</title>
|
||||||
|
<author>Erik T. Ray</author>
|
||||||
|
<year>2003</year>
|
||||||
|
<price>39.95</price>
|
||||||
|
</book>
|
||||||
|
</bookstore>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
மேல காட்டப்பட்டுள்ளது ஒரு xml file இன் உதாரணம் ஆகும்
|
||||||
|
அது metadata உடன் ஆரம்பமாகிறது
|
||||||
|
XML ஆனது ஒரு மரத்தை போன்ற கட்டமைப்பை ஒத்தது.
|
||||||
|
இங்கு root node (கொப்பு) `bookstore` இது மூன்று கிளைகள் (child nodes)
|
||||||
|
கொண்டுள்ளது. இந்த கிளைகள் மேலும் சில கிளைகளை கொண்டு இருக்கலாம்
|
||||||
|
ஒவொரு node கட்டமைப்பும் ஒரு `<` ஆரம்பாமாகி `>` முடிவடையும்
|
||||||
|
கிளைகள் இந்த கட்டமைப்புக்கு இடையில் நிறுவப்படும்
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
XML இரண்டு வகையான தகவல்களை கொண்டு செல்லக்கூடியது
|
||||||
|
1- Attributes -> ஒரு கணு(node) பற்றிய metadata
|
||||||
|
பொதுவாக XML Parser இந்த தகவலை பயன்படுத்தியே தகவலை
|
||||||
|
சரியான முறையில் சேமிக்க.
|
||||||
|
இது xml கட்டமைப்பின் ஆரம்பத்தில் உள்ள name="value"
|
||||||
|
தீர்மானிக்கபடுகிறது.
|
||||||
|
|
||||||
|
2-Elements ->இவற்றில் முற்றிலும் தகவல்களே சேமிக்கபட்டு இருக்கும்
|
||||||
|
Elements ஒரு `<` ஆரம்பாமாகி `>` முடிவடையும் காணப்படும்
|
||||||
|
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- கிழே உள்ள element இரண்டு பெறுமானங்களை கொண்டுள்ளது -->
|
||||||
|
<file type="gif" id="4293">computer.gif</file>
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
* சரியான முறையில் ஒழுகுபடுத்தபட்ட X document
|
||||||
|
|
||||||
|
|
||||||
|
ஒரு XML document ஆனது சரியான முறையில் எழுத பட்டிருப்பின் மட்டுமே அது
|
||||||
|
சிறந்த வகையில் வடிவமைக்கபட்டுள்ளது,எனினும் மேலும் பல கட்டுபாடுகளை
|
||||||
|
நாம் ஒரு xml document உக்கு இட முடியும் உ.ம்:-DTD மற்றும் XML Schema.
|
||||||
|
|
||||||
|
|
||||||
|
ஒரு xml document ஆனது ஒரு வரையறுக்கபட்டிருப்பின் மட்டுமே
|
||||||
|
அது சரி என கொள்ளப்படும்
|
||||||
|
|
||||||
|
|
||||||
|
With this tool, you can check the XML data outside the application logic.
|
||||||
|
இந்த கருவியை உபயோகித்து xml தகவல்களை சோதிக்க முடியும்
|
||||||
|
|
||||||
|
```xml
|
||||||
|
|
||||||
|
<!-- கீழே bookstore html document இன் எளிமையான வடிவம்
|
||||||
|
DTD வரையறைகளுடன்
|
||||||
|
-->
|
||||||
|
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!DOCTYPE note SYSTEM "Bookstore.dtd">
|
||||||
|
<bookstore>
|
||||||
|
<book category="COOKING">
|
||||||
|
<title >Everyday Italian</title>
|
||||||
|
<price>30.00</price>
|
||||||
|
</book>
|
||||||
|
</bookstore>
|
||||||
|
|
||||||
|
<!-- DTD ஆனது பின்வருமாறு அமையும் :-->
|
||||||
|
|
||||||
|
<!DOCTYPE note
|
||||||
|
[
|
||||||
|
<!ELEMENT bookstore (book+)>
|
||||||
|
<!ELEMENT book (title,price)>
|
||||||
|
<!ATTLIST book category CDATA "Literature">
|
||||||
|
<!ELEMENT title (#PCDATA)>
|
||||||
|
<!ELEMENT price (#PCDATA)>
|
||||||
|
]>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- DTD ஆனது root node ஐ உருவாக்கிய பின் நிறுவ படுகிறது ,இது ஒன்று அல்லது
|
||||||
|
ஒன்றிக்கு மேற்பட்ட child node களை எதிர்பார்க்கிறது.
|
||||||
|
ஒவ்வொரு 'book' உம் கட்டாயமாக ஒரு 'title' , 'price','category', with "Literature"
|
||||||
|
ஆகிய பெறுமானங்களை கொண்டிருத்தல் அவசியம்.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- DTD ஆனது xml file ஒன்றினுள் உருவாக்கபடுகிறது-->
|
||||||
|
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
|
||||||
|
<!DOCTYPE note
|
||||||
|
[
|
||||||
|
<!ELEMENT bookstore (book+)>
|
||||||
|
<!ELEMENT book (title,price)>
|
||||||
|
<!ATTLIST book category CDATA "Literature">
|
||||||
|
<!ELEMENT title (#PCDATA)>
|
||||||
|
<!ELEMENT price (#PCDATA)>
|
||||||
|
]>
|
||||||
|
|
||||||
|
<bookstore>
|
||||||
|
<book category="COOKING">
|
||||||
|
<title >Everyday Italian</title>
|
||||||
|
<price>30.00</price>
|
||||||
|
</book>
|
||||||
|
</bookstore>
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue
Block a user