பொருளடக்கம்

ஆசிரியர் உரை

அழகான, பல்வேறு வசதிகள் கொண்ட இணைய தளங்களை உருவாக்க HTML, CSS, JavaScript, Jquery ஆகிய நுட்பங்களை அடிப்படை. இவை பற்றி நான் கற்றவற்றை கணியம் இதழில் தொடராக எழுதினேன். அவை மின்னூலாகவும் வெளிவருவது மகிழ்ச்சி. எங்கள் திருமண நாளான இன்று இந்த மின்னூல் வெளிவருவது கூடுதல் மகிழ்ச்சி. தமிழில் கணிணி நுட்பங்களைப் பகிர, ஒரு களமாக உள்ள ‘கணியம்’ தளத்தில், இதுவரை வெளியான எனது மின்னூல்களுக்கு வாசகர்கள் தரும் ஆதரவு பெருமகிழ்ச்சி அளிக்கிறது. “தேமதுரத் தமிழோசை உலகெல்லாம் பரவும் வகை செய்தல் வேண்டும்" “பிற நாட்டு நல்லறிஞர் சாத்திரங்கள் தமிழ் மொழியிற் பெயர்த்தல் வேண்டும்" என்ற பாரதியின் விருப்பங்களை நிறைவேற்றுவதில், என் பங்களிப்பும் உள்ளது என்பதே, மிகவும் மகிழ்ச்சி. தொடர்ந்து ஊக்கம் அளிக்கும் என் குடும்பத்தினருக்கும், கணியம் குழுவினருக்கும், FreeTamilEbooks.com குழுவினருக்கும், வாசகர்களுக்கும் நன்றிகள்.

து. நித்யா
கிழக்கு தாம்பரம்
31 அக்டோபர் 2018
மின்னஞ்சல்: [email protected]
வலை பதிவு: http://nithyashrinivasan.wordpress.com

உதாரணங்கள்

இந்த நூலில் உள்ள HTML உதாரணங்கள் யாவும் **https://gist.github.com/nithyadurai87** இங்கே உள்ளன.

1. JavaScript – அறிமுகம்

JavaScript என்பது ஒரு தனிப்பட்ட நிரலாக்க மொழி கிடையாது. இது html மற்றும் java போன்ற மொழிகளுடன் இணைந்து பயன்படுத்தப்படும் interpreted நிரலாக்க மொழி ஆகும். இது எனவே இதனைக் கற்பதற்கு முன்னர் "எளிய தமிழில் HTML" எனும் புத்தகத்தை நன்கு படித்து விடவும். அப்போதுதான் உங்களால் இந்தப் புத்தகத்தில் இடம் பெற்றுள்ள அனைத்தையும் சுலபமாகப் புரிந்து கொள்ள முடியும். இது ஒரு Client side scripting language ஆகும். அதாவது வலைத்தளத்தைப் பயன்படுத்தப் போகும் பயனருடன் தொடர்பு கொள்வதற்கு சிறந்த மொழி. IE, chrome, firefox போன்ற அனைத்து உலாவிகளிலும் இது சிறப்பாகச் செயல்படும். Javascript எப்போதும் HTML program-ன் ஒரு பகுதியாகவே உலாவிகளுக்கு அறிமுகப்படுத்தப்படும். உலாவிகலும் இத்தனை ஒரு HTML program போலவே இயக்கும். எனவே இதற்கென்று தனியாக ஒரு அமைப்பு முறையோ, சேமிப்பு முறையோ கிடையாது. படிவத்தைப் பூர்த்தி செய்யும் பயனர்கள் இடையில் ஒரு பொத்தானை சொடுக்கும்போதோ அல்லது ஒரு இணைப்பினை சொடுக்கும்போதோ, ஏதோ ஒன்று நிகழும் வகையிலேயே Javascript-ஆனது எப்போதும் எழுதப்படும். அதாவது பயனர்கள் நிகழ்த்தும் விஷயங்களாகவே இது அமையும். எனவே Animation, Multimedia போன்ற இடங்களில் இது பெரிதும் பயன்படும்.

JavaScript-ன் அமைப்பு

` 

        <p data-center="no">HTML-ன் பழமையான பதிப்புகளில் language="javascript" type="text/javascript" எனும் இரண்டு பண்புகளையும்</p>






        <p data-center="no">வெளிப்படையாகக் கொடுக்க வேண்டும். அப்போதுதான் உலாவியானது இதனை javascript-ஆக ஏற்று செயல்படும். ஆனால் தற்போதைய பதிப்புகளில் (XHTML மற்றும் இதையடுத்து வந்தவை) `type="text/javascript"` எனும் ஒரு பண்பினை மட்டும் கொடுத்தால் போதுமானது. Language எனும் பண்பினை கொடுக்கத் தேவையில்லை.</p>






        <p data-center="no">அடுத்தபடியாக `<script>`-க்குள் கொடுக்க வேண்டிய விஷயங்கள் அனைத்தையும் எதற்காக `<!--` மற்றும் `//-->` எனும் குறியீடுகளுக்குள் கொடுத்துள்ளோம் என்பதே நீங்கள் முக்கியமாகத் தெரிந்து கொள்ள வேண்டும். இவை இரண்டும் ஒரு பின்னூட்டத்துக்கான (comment) தொடக்கம் மற்றும் முடிவினைக் குறிக்கும் குறியீடுகள் ஆகும். சிலசமயம் javascript-ஐ அடையாளம் கண்டு கொள்ளத் தெரியாத உலாவிகளில் இத்தகைய நிரல்கள் இயங்கும்போது, உலாவியானது குழம்பி ஏதோ தவறு எனும் செய்தியை வெளிப்படுத்தும். இதுவே அவையெல்லாம் ஒரு பின்னூட்டக் குறியீட்டுக்குள் கொடுக்கப்பட்டிருப்பின் javascript-ஐ புரிந்துகொள்ள முடியாவிட்டாலும், இது ஒரு பின்னூட்டம் என்பதைப் புரிந்து கொண்டு அதற்குள் உள்ளவற்றைப் புறக்கணித்து மீதி உள்ளவற்றை செயல்படுத்தும். எனவேதான் javascript நிரலானது எப்போதும் பின்னூட்டக் குறியீட்டுக்குள் கொடுக்கப்படுகிறது.</p>









        <p data-center="no">மேற்கண்ட program-ஐ browser-ல் திறக்கும் பொழுது அது பின்வருமாறு அமைகிறது.</p>






        <pre class="code"><code>This book will teach you about JavaScript!</code></pre>









        <h2 id="2-variables-operators-in-javascript">2. Variables & Operators in Javascript</h2>






        <p data-center="no">**Variables**</p>






        <p data-center="no">Javascript-ல் உள்ள variable-ஆனது முதல் நிலைத் தரவு வகைகளான (primitive data types) எண்கள், எழுத்துக்கள் மற்றும் `‘true’`, `‘false’` என்பது போன்ற Boolean மதிப்புகளை சேமிக்கும் வல்லமை கொண்டது. மேலும் `null` மற்றும் `undefined` என்பது போன்ற பிற நிலைத் தரவு வகைகளையும் இது ஆதரிக்கும்.</p>






        <p data-center="no">**Variable Declaration & Initialization**</p>






        <p data-center="no">Javascript-ல் உள்ள ஒரு variable-ஆனது எழுத்துக்கள், எண்கள் மற்றும் தசம எண்கள் போன்ற அனைத்து விதமான தரவுகளையும் தானாகவே அடையாளம் கண்டு கொள்ளும். பிற மொழிகளில் குறிப்பிடுவது போன்று `int`, `flot`, `string` என்றெல்லாம் வெளிப்படையாகச் சொல்லத் தேவையில்லை.</p>






        <p data-center="no">உதாரணம்:</p>






        <pre class="code"><code><html>
<body>
    <script type="text/javascript">
        <!--
        var salary;
        salary=25000.00;
        var age = 29, name='Nithya';
        document.write(salary,"<br/>",name,"-",age);
        //-->
    </script>
</body>

        <p data-center="no">ஏதோ ஒரு குறிப்பிட்ட மதிப்பினைத் (25000.00) தாங்கப் போகும் ஒரு பொதுவான வார்த்தைக்கு (salary) variable என்று பெயர். எனவே எந்த வார்த்தையை நாம் variable-ஆகப் பயன்படுத்தப் போகிறோம் என்பதை முன்கூட்டியே அறிவிக்க வேண்டும். இதுவே **‘variable declaration’** எனப்படும் (`var salary`). அவ்வாறு அறிவிக்கப்பட்ட variable-க்கு எந்த மதிப்பினை வழங்கப் போகிறோம் என்பதைக் குறிப்பிடும் செயலுக்கு **‘variable initialization’** என்று பெயர் (`salary=25000.00`). ஒரு variable-ஐ அறிவிக்கும்போதே அதற்கான மதிப்பினையும் வழங்கலாம் (`var age=29`). மேலும் ஒன்றுக்கும் மேற்பட்ட variable-களை ஒரே நேரத்தில் நம்மால் அறிவிக்கவும், மதிப்புகளை வழங்கவும் முடியும் (`var age = 29, name="Nithya";`). `document.write()` என்பது அதன் அடைப்புக்குறிக்குள் கொடுக்கப்படும் விஷயங்களை வெளியிட உதவும். இங்கு அடைப்புக்குறிக்குள் `(salary, "<br/>", name, "-", age)` என்று கொடுக்கப்பட்டிருப்பதால், salary-ன் மதிப்பும், `<br/>` tag-ஆனது cursor-ஐ அடுத்த வரிக்கு அனுப்பி name-ன் மதிப்பையும், Hyphen எனும் குறியீட்டையும், age-ன் மதிப்பையும் வெளிப்படுத்தியுள்ளது.</p>









        <p data-center="no">எனவே இதன் Output பின்வருமாறு அமையும்:</p>






        <pre class="code"><code>25000.00

Nithya-29

        <p data-center="no">**Local vs Global Variables**</p>






        <p data-center="no">அடுத்தபடியாக ஒரே variable-க்கு வெவ்வேறு வகையான மதிப்புகளை அதன் எல்லையைப் பொறுத்து நம்மால் வரையறுக்க முடியும். பின்வரும் உதாரணத்தில் salary எனும் variable-க்கு ஒரு மதிப்பினை (25000.00) அளித்துள்ளோம். பின்னர் அதே variable-ஐ ஒரு function-க்குள் பயன்படுத்தி, வேறு ஒரு மதிப்பினை (50000.00) அளித்துள்ளோம். இவ்வாறு ஒரு சிறிய எல்லையான function-க்குள் வரையறுக்கப்படும் variable-ன் மதிப்பு அதன் எல்லைக்குள்ளேயே முடிந்து விடும். இதனை நாம் "Local variables" (`salary=50000.00`) என்று கூறுவோம். எந்த ஒரு தனி எல்லைக்குள்ளும் இல்லாமல் பொதுவாக காணப்படுபவை "Global variables" (`salary=25000.00`) ஆகும்.</p>






        <p data-center="no">இங்கு `document.write()` மூலம் salary-ன் மதிப்பினை வெளிப்படுத்துமாறு function-க்கு உள்ளேயும், வெளியேயும் கொடுத்துள்ளோம். ஆனால் function-க்கு உள்ளே உள்ள வரி மட்டும் செயல்படுத்தப்பட்டு 50000.00 எனும் மதிப்பினை வெளிப்படுத்தியுள்ளது. எப்போதும் ஒரே variable இருமுறை பயன்படுத்தப்பட்டிருப்பின், local-ஆக அமைக்கப்பட்ட variable-ன் மதிப்பே முதன்மை பெரும்.</p>






        <p data-center="no">எனவே இதன் Output பின்வருமாறு அமையும்:</p>






        <pre class="code"><code>50000.00</code></pre>






        <p data-center="no">**Reserved Words**</p>






        <p data-center="no">ஒரு சில வார்த்தைகளை (eg: `export`, `final`, `long`) நம்மால் variable-ஆக அறிவிக்க முடியாது. ஏனென்றால் இது போன்ற வார்த்தைகளுக்கு என்னென்ன மதிப்புகள் என்பதை javascript-ஐ உருவாக்கியவர்களே நியமித்து விட்டனர். அவையே ‘Reserved Keywords’ எனப்படும். இதன் பட்டியல் பின்வருமாறு:</p>






        <pre class="code"><code>abstract    do         if             protected      try

boolean double implements public typeof break else import return var byte enum in short void case export instanceof static volatile catch extends int super while char false interface switch class final long synchronized const finally native this continue float new throw debugger for null throws default function package transient delete goto private true

        <h2 id="3-operators">3. Operators</h2>






        <p data-center="no">Operator என்றால் இயக்குபவர் என்று பொருள். கொடுக்கப்பட்ட மதிப்புகளைப் பெற்றுக்கொண்டு, அதன் மீது ஒருசில செயல்பாடுகளை செலுத்தி, நமக்கு வேண்டிய தகவல்களை வெளிப்படுத்தும் வேலையை செய்பவருக்கு operator என்று பெயர். Javascript-ல் arithmetic, comparison, logical, conditional, typeof, assignment போன்ற பல்வேறு வகையான operators உள்ளன. கீழ்க்காணும் program-ல் அனைத்து வகை operator-களின் செயல்பாடுகளும் ஒரு சேரக் கொடுக்கப்பட்டுள்ளது</p>






        <pre class="code"><code><html>

        <p data-center="no">இதன் Output பின்வருமாறு:</p>






        <pre class="code"><code>Arithmetic - 20

Comparison - false Logical - true Conditional - 100 typeof - The value is not a string Assignment - 60

        <p data-center="no">இப்போது மேற்கண்ட program-க்கான விளக்கத்தையும், ஒவ்வொரு வகை operator-ன் கீழும் வரும் அனைத்து விதமான குறியீடுகளின் செயல்பாடுகளையும் பின்வருமாறு காணலாம். மேற்கண்ட அதே program-ல் `document.write()` எனும் வரியை மட்டும் கீழே கொடுக்கப்பட்டுள்ளவாறு மாற்றி மாற்றி இயக்கி பார்க்கவும்.</p>






        <p data-center="no">**Arithmetic Operators**</p>






        <p data-center="no">இதன் கீழ் வரும் கூட்டல், கழிதல், பெருக்கல், வகுத்தல் என்னென்ன செய்யும் என்பது உங்களுக்கே தெரியும். இதனுடன் சேர்த்து Modulus (`%`), Increment(`++`), Decrement (`–`) எனும் 3 வகை குறியீடுகள் உள்ளன. `%` என்பது இரண்டு எண்களை வகுத்தல் கிடைக்கும் மீதியை வெளிப்படுத்தும். `++` என்பது கொடுக்கப்பட்ட எண்ணுடன் ஒரு எண்ணைக் கூட்டியும், `-` என்பது கொடுக்கப்பட்ட எண்ணுடன் ஒரு எண்ணைக் கழித்தும் வெளிப்படுத்தும்.</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/38ae5bca9dec4226a2c87bb1babfe63c.jpeg?raw=true" class="page-image">






        <p data-center="no">**Comparison Operators**</p>






        <p data-center="no">இரண்டு எண்களை ஒப்பிட்டு அவற்றுக்குள் எது பெரியது (`>`), சிறியது (`<`), சமமானது (`==`), சமமில்லாதது (`!=`), என்பது போன்ற தகவல்களை வெளிப்படுத்த உதவும். (`>=`) என்பது சமமானது அல்லது பெரியது என்றும், (`<=`) என்பது சமமானது அல்லது சிறியது என்றும் பொருள்படும். இதன் வெளிப்பாடு எப்போதும் உண்மை (`true`), பொய் (`false`) எனும் இரண்டு மதிப்புகளையே பெற்றிருக்கும்.</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/fd2775712b324e519e74152f2d6b2aae.jpeg?raw=true" class="page-image">






        <p data-center="no">**Logical (or Relational) Operators**</p>






        <p data-center="no">இது உண்மை, பொய் எனும் 2 மதிப்புகளை ஒப்பீடு செய்யப் பயன்படுகிறது. && ஒப்பிடப்படுகின்ற அனைத்தும் உண்மை என்பதை வெளிப்படுத்தினால் மட்டுமே, இதுவும் உண்மை என்பதை வெளிப்படுத்தும். `!!` ஒப்பிடப்படுபவைகளில் ஏதேனும் ஒன்றின் வெளிப்பாடு உண்மை என்று இருந்தால் கூட இதுவும் உண்மை என்பதை வெளிப்படுத்தி விடும். `!` என்பது வெளிப்படும் விடை உண்மையாக இருப்பின் பொய் என்றும், பொய்யாக இருப்பின் உண்மை என்றும் மாற்றி வெளிப்படுத்தும்.</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/b219645c3a534b7490643831a94b9c1c.jpeg?raw=true" class="page-image">






        <p data-center="no">**Assignment Operators**</p>






        <p data-center="no">`=` என்பது வலப்புறம் இருக்கும் மதிப்பினை, இடப்புறம் உள்ள variable-க்கு வழங்கிவிடும். `b=40` என்று ஒரு variable காணப்படின், `a=b` எனக் கொடுக்கும்போது, a-ன் மதிப்பு 40 என மாறிவிடும். பின்னர் `a+=b` எனக் கொடுக்கும்போது, ஏற்கனவே a-ல் உள்ள 40 எனும் மதிப்பு, b-ல் உள்ள 40-வுடன் கூட்டப்பட்டு a-ன் மதிப்பு 80 என மாறிவிடும். `a-=b` எனக் கொடுக்கும்போது 80-லிருந்து 40-ஐ கழிக்கப்பட்டு மீண்டும் a-ன் மதிப்பு 40-க்கே வந்துவிடும். இப்போது பின்வரும் உதாரணத்தைப் பார்த்தால் உங்களாலேயே புரிந்து கொள்ள முடியும்.</p>









        <img src="https://github.com/gumify/cdn/blob/master/images/a4b242b5621d4a2baa118fd3d9f4e57d.jpeg?raw=true" class="page-image">






        <p data-center="no">**Miscellaneous Operator**</p>






        <p data-center="no">Conditional (or ternary) Operators `(a > b) ? a : b` என்பது ஒரு சோதனையை செய்து, அதன் வெளீிப்பாடு உண்மை என இருப்பின், ?-க்கு அடுத்து உள்ள மதிப்பினையும், பொய் என இருப்பின் அந்த மதிப்பிற்கு அடுத்து உள்ள மதிப்பினையும் வெளிப்படுத்தும். `(typeof a=="string" ? " xxx": " yyy");` என்பது ஒரு variable-ல் உள்ள மதிப்பின் வகையை சோதனையை செய்து, அதன் வெளீிப்பாடு உண்மை என இருப்பின், `?`-க்கு அடுத்து உள்ள மதிப்பினையும், பொய் என இருப்பின் அந்த மதிப்பிற்கு அடுத்து உள்ள மதிப்பினையும் வெளிப்படுத்தும். அதாவது ஒரு variable-ஆனது `number`, `string`, `Boolean`, `object`, `function`, `undefined` போன்ற data வகைகளுடன் ஒப்பிடப்படுகிறது.</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/9cc03c0627674ead9c56c0963eafa8a5.jpeg?raw=true" class="page-image">









        <h2 id="4-conditional-and-looping-statements-in-javascript">4. Conditional and Looping Statements in javascript</h2>






        <p data-center="no">**Conditional statements**</p>






        <p data-center="no">ஒரு variable-ல் சேமிக்கப்பட்டுள்ள மதிப்பானது பல்வேறு நிபந்தனைகளோடு ஒப்பிடப்படும். ஒவ்வொரு நிபந்தனையும் பல்வேறு வகையான நிகழ்வுகளைக் கொண்டிருக்கும். ஒப்பிடப்படுகின்ற மதிப்பானது எந்த நிபந்தனையோடு ஒத்துப்போகிறதோ, அதனுடைய நிகழ்வினை நிகழ்த்தும் செயலுக்கு If…Else மற்றும் switch\_case போன்ற conditional statements பயன்படுகின்றன.</p>






        <p data-center="no">பின்வரும் உதாரணத்தில் age எனும் variable-ல் உள்ள மதிப்பு 18 முதல் 21 வரை இருப்பின் "Legally fit for marriage" எனும் வாக்கியத்தையும், 21-ஐ விட அதிகமாக இருந்தால் "Legally and Medically fit" எனும் வாக்கியத்தையும், வேறு எந்த மதிப்பாக இருந்தாலும் "Not fit for marriage" எனும் வாக்கியத்தையும் வெளிப்படுத்துமாறு கொடுக்கப்பட்டுள்ளது. ஒரு If…Else சோதனையில் எப்போதும் `if`, `else if`, `else` எனும் 3 வகையான சோதனைகளை கட்டாயம் கொடுக்க வேண்டும் என்று அவசியமில்லை. `if` மட்டுமே கொடுத்து ஒரு சோதனையுடன் நிறுத்திக்கொள்ளலாம். `if`-வுடன் சேர்த்து `else`-ஐயும் கொடுத்து இரண்டு சோதனையுடன் நிறுத்திக்கொள்ளலாம். பல்வேறு சோதனைகளை நிகழ்த்த விரும்பினால் `else if`-மூலம் வேண்டிய எண்ணிக்கையில் சோதனைகளை சேர்த்துக்கொண்டேயும் செல்லலாம்.</p>






        <pre class="code"><code><html>

        <p data-center="no">இதன் Output பின்வருமாறு:</p>






        <pre class="code"><code>Legally and Medically fit for marriage</code></pre>






        <p data-center="no">**Switch Case**</p>






        <p data-center="no">பின்வரும் உதாரணத்தில் switch-க்குள் ஒரு குறிப்பிட்ட மதிப்பினைத் (II) தாங்கியுள்ள variable (grade) கொடுக்கப்பட்டுள்ளது. அதன்கீழ் உள்ள case-க்குள் பல்வேறு மதிப்புகளும் அதற்கான வெளிப்பாடுகளும் கொடுக்கப்பட்டுள்ளன. Switch-க்குள் உள்ள variable-ன் மதிப்பானது case-க்குள் உள்ள மதிப்புகளுடன் ஒப்பிடப்பட்டு, எந்த மதிப்புடன் ஒத்துப்போகிறதோ (case ‘II’), அதற்கான வெளிப்பாட்டினை ( " Pretty good") நிகழ்த்துகிறது. இந்த வகையான செயல்பாட்டிற்கு நாம் பல்வேறு Else If கூட பயன்படுத்தலாம். இவை இரண்டிற்கும் உள்ள ஒரே ஒரு வித்தியாசம் என்னவெனில் Swtich Case-ஆனது ஒரே ஒரு variable-ன் மதிப்பினை மட்டுமே பல்வேறு மதிப்புகளுடன் ஒப்பிடும்; Else If-ஆனது ஒன்றுக்கும் மேற்பட்ட variable-களை இணைத்து பல்வேறு மதிப்புகளுடன் ஒப்பிடும்.</p>






        <pre class="code"><code><html>

        <p data-center="no">இதன் Output பின்வருமாறு:</p>






        <pre class="code"><code>Pretty good</code></pre>









        <h2 id="5-looping-statements">5. Looping statements</h2>






        <p data-center="no">ஒரு குறிப்பிட்ட நிரல் தொகுப்பினை மீண்டும் மீண்டும் இயக்குவதற்கு while, for போன்றவை பயன்படுகின்றன. இவை இரண்டும் முதலில் ஒரு variable-ன் அடிப்படையில் condition-ஐ வலியுறுத்தும். பின்னர் அந்த condition பொய்யாகும் வரை variable- ன் மதிப்பினை ஒவ்வொன்றாக அதிகரிப்பதன் மூலம் சுழற்சியை உருவாக்குகின்றன.</p>






        <p data-center="no">**While & Do while loop**</p>






        <p data-center="no">இதில் while மற்றும் do while எனும் இரண்டு வகைகள் உள்ளன. கீழ்க்கண்ட எடுத்துக்காட்டில் x-ஆனது while-ன் செயல்பாட்டினை விளக்குவதற்கும், y-ஆனது do while-ன் செயல்பாட்டினை விளக்குவதற்கும் பயன்பட்டுள்ளது. இவை இரண்டுக்கும் முதலில் 0 எனும் மதிப்பு வழங்கப்பட்டுள்ளது.</p>






        <p data-center="no">**While loop** : இது X-ன் மதிப்பு 10-க்கும் குறைவாக இருக்கும்வரை அடைப்புக் குறிக்குள் `{ }` உள்ளவற்றை செயல்படுத்துகிறது. முதலில் Number:0 என்பது வெளிப்படுகிறது. பின்னர் `x++` என்பது x-ன் மதிப்புடன் 1-ஐ கூட்டி அடுத்த சுழற்சியைத் தூண்டுகிறது. எனவே அடுத்த சுழற்சியில், `Number:1` என்பதும் வெளிப்படும். எப்போது x-ன் மதிப்பு 10-ஐ அடைகிறதோ அப்போது அடைப்புக் குறிக்குள் `{ }` உள்ளவற்றை செயல்படுத்தாமல் சுழற்சியை நிறுத்துகிறது.</p>






        <p data-center="no">**Do while loop** : do-வைத் தொடர்ந்து என்ன செயல்படுத்த வேண்டுமோ, அதை முதலில் கொடுத்து விட வேண்டும். அதன் பின்னர் condition வலியுறுத்தப்படும். இங்கு அடைப்புக் குறிக்குள் `{ }` உள்ளவை y-ன் மதிப்பு 5-க்கும் குறைவாக இருக்கும் வரை செயல்படுத்தப்படுகின்றன. இவை இரண்டும் பார்ப்பதற்கு ஒரே மாதிரியாக இருந்தாலும், அதன் செயல்முறையில் வேறுபடுகின்றன.</p>






        <p data-center="no">While ஆனது முதலில் சோதனை பொருந்துகிறதா எனப் பார்த்து, பின்னர் அடைப்புக்குறிக்குள் உள்ளவற்றை செயல்படுத்துவதால் இது "Entry control loop" எனப்படும்.</p>






        <p data-center="no">Do While ஆனது அடைப்புக்குறிக்குள் உள்ளவற்றை செயல்படுத்திய பின்னரே சோதனை பொருந்துகிறதா எனப் பார்ப்பதால், இது "Exit control loop" எனப்படும். எனவே Do while-ல் சோதனை பொருந்தவில்லை என்றாலும், அதனால் அடுத்த சுழற்சியை மட்டுமே தடுக்க முடியுமே தவிர, ஏற்கனவே அடைப்புக்குறிக்குள் நடந்து முடிந்த ஒன்றை தவிர்க்க இயலாது.</p>






        <pre class="code"><code><html>

        <p data-center="no">இதன் Output பின்வருமாறு:</p>






        <pre class="code"><code>Number:0

Number:1 Number:2 Number:3 Number:4 Number:5 Number:6 Number:7 Number:8 Number:9 01234

        <p data-center="no">**For loop**</p>






        <p data-center="no">For loop-ம் while போன்றதே. இதன் வடிவம் மட்டுமே மாறுபட்டுள்ளது. ஒரே ஒரு வித்தியாசம் என்னவெனில், loop-க்குள் variable-ன் துவக்க மதிப்பு வரையறுக்கப்படுகிறது. கீழ்க்கண்ட எடுத்துக்காட்டில் for loop-ஆனது x-ன் மதிப்பு 0 என்றும், அது 10-க்கும் குறைவாக (`x<10`) இருக்கும் வரை அடைப்புக் குறிக்குள் `{ }` உள்ளவற்றை செயல்படுத்த வேண்டும் எனவும், ஒவ்வொரு முறையும் துவக்க மதிப்புடன் 1 கூட்டப்பட வேண்டும் (`x++`) எனவும் கூறுகிறது.</p>






        <p data-center="no">For…In என்பது for loop-ன் மற்றொரு வகை. இது variable-ஐ ஒரு object-ன் வழியே செலுத்தி அதன் அனைத்து பண்புகளையும் ஒவ்வொன்றாக வெளிக்காட்ட உதவுகிறது. `x` எனும் variable-ஐ கீழ்க்கண்டவாறு `navigator` எனும் object வழியே செலுத்தும்போது அது அதன் அனைத்து பண்புகளையும் ஒவ்வொன்றாக வெளிப்படுத்துவதைக் காணலாம்.</p>






        <pre class="code"><code><html>

        <p data-center="no">இதன் Output பின்வருமாறு:</p>






        <pre class="code"><code>0123456789

vendorSub productSub vendor maxTouchPoints scheduling userActivation doNotTrack geolocation connection plugins mimeTypes pdfViewerEnabled webkitTemporaryStorage webkitPersistentStorage hardwareConcurrency cookieEnabled appCodeName appName ...

        <p data-center="no">**Break…Continue**</p>






        <p data-center="no">ஒரு சுழற்சி நடந்துகொண்டிருக்கும்போது, இடையில் ஒரு குறிப்பிட்ட சுழற்சி எண்ணின் போது அச்சுழற்சியிலிருந்து மொத்தமாக வெளியேறுவதற்கு break-ம், அச்சுழற்சி எண்ணின் போது மட்டும் அடைப்புக்குறிக்குள் உள்ளவற்றைத் தவிர்த்து, அடுத்த சுழற்சி எண்ணிலிருந்து ஆரம்பிப்பதற்கு continue-ம் பயன்படுகின்றன. Continue-வை பயன்படுத்துவதற்கு சுலபமாக, ஒன்றுக்கும் மேற்பட்ட சுழற்சிகள் காணப்படின், ஒரு குறிப்பிட்ட சுழற்சியின் அருகில் அமைக்கப்படும் identifier-தான் Labels ஆகும்.</p>






        <p data-center="no">கீழ்க்கண்ட எடுத்துக்காட்டில் x-ஆனது break-ன் செயல்பாட்டினை விளக்குவதற்கும், y-ஆனது continue-ன் செயல்பாட்டினை விளக்குவதற்கும் பயன்பட்டுள்ளது. Heading: என்பது ஆகும். `x`, `y` இரண்டுக்கும் முதலில் 0 எனும் மதிப்பு வழங்கப்பட்டுள்ளது.</p>









        <p data-center="no">**Break** : x-ன் மதிப்பு 10-க்கும் குறைவாக இருக்கும் வரை அடைப்புக் குறிக்குள் `{ }` உள்ளவற்றை செயல்படுத்துமாறு ஒரு while loop அமைக்கப்பட்டுள்ளது. இதில் x-ன் மதிப்பானது 5 எனும் சுழற்சி எண்ணை அடையும்போது சுழற்சியை விட்டு வெளியேதும் வகையில் `if (x == 5){break;}` எனும் வாக்கியம் கொடுக்கப்பட்டுள்ளது.</p>






        <p data-center="no">**Continue** : y-ன் மதிப்பு 10-க்கும் குறைவாக இருக்கும் வரை அடைப்புக் குறிக்குள் `{ }` உள்ளவற்றை செயல்படுத்துமாறு ஒரு while loop அமைக்கப்பட்டுள்ளது. இதில் y-ன் மதிப்பானது 5 எனும் சுழற்சி எண்ணை அடையும்போது மட்டும் `if (y == 5){continue;}`, அடைப்புக்குறிக்குள் உள்ளவற்றை செயல்படுத்தாமல் loop-ன் தொடக்கத்தை சென்றடைந்து அடுத்த சுழற்சி எண்ணிலிருந்து சுழல ஆரம்பிக்கிறது.</p>






        <p data-center="no">**Labels** : i-ன் மதிப்பு 3-க்கும் குறைவாக இருக்கும் வரை வெளிப்புற loop சுழலும்படியும், அதற்குள் உள்ள j-ன் மதிப்பு 5-க்கும் குறைவாக இருக்கும் வரை உட்புற loop சுழலும்படியும் 2 for loops அமைக்கப்பட்டுள்ளன. உட்புற loop-ல் j-ன் மதிப்பு 3-ஐ அடையும்போது Heading எனும் பெயர் கொண்ட label உள்ள இடத்திற்குச் செல்லுமாறு ஒரு வரி `if (j == 3){continue Heading;}` கொடுக்கப்பட்டுள்ளது. இந்த Heading: வெளிப்புற loop-ன் துவக்கத்தில் கொடுக்கப்பட்டிருப்பதால், அங்கிருந்து சுழற்சி எண் 3-க்கான சுழற்சியை ஆரம்பிக்கும். ஆனால் (`i<3`) எனும் சோதனைக்குள் அடங்காததால், இங்கு சுழற்சி முடிக்கப்பட்டுள்ளது.</p>






        <pre class="code"><code><html>

        <p data-center="no">இதன் Output பின்வருமாறு:</p>






        <pre class="code"><code>2

3 4 5

234678910 0times Value is: 0 Value is: 1 Value is: 2 1times Value is: 0 Value is: 1 Value is: 2 2times Value is: 0 Value is: 1 Value is: 2

        <h2 id="6-functions-events-in-javascript">6. Functions & Events in JavaScript</h2>






        <p data-center="no">**Functions & Events**</p>






        <p data-center="no">Functions என்பது மறுபயன்பாட்டிற்கு உதவும் வகையில் எழுதப்படுகின்ற நிரல்கள் ஆகும். ஒரு மிகப்பெரிய program-ஐ நாம் எழுதிக் கொண்டிருக்கும்போது ஒருசில குறிப்பிட்ட நிரல்களை மட்டும் நமது தேவைக்கேற்ப நாம் மீண்டும் மீண்டும் பயன்படுத்த வேண்டியிருக்கும். அப்படிப்பட்ட நிரல்களை ஒரு பொதுவான பெயர் வைத்து சேமித்துக்கொள்ள functions பயன்படுகிறது. சுருக்கமாகச் சொல்லப்போனால், ஒரு மிகப்பெரிய program-ஐ சிறுசிறு பகுதிகளாகப் பிரித்துக்கையாளுவதற்கு functions பயன்படுகிறது.</p>






        <p data-center="no">இதை parameters ஏற்றுக்கொண்டு செயல்படுபவை, parameters இல்லாமல் செயல்படுபவை என்று இரண்டாகப் பிரிக்கலாம். பின்வரும் எடுத்துக்காட்டில் `sayHello()` என்பது parameters இல்லாமல் செயல்படும் function-க்கு உதாரணமாகவும், `concatenate()` என்பது parameters வைத்து செயல்படும் function-க்கு உதாரணமாகவும் விளங்குகிறது.</p>






        <pre class="code"><code><html>

        <img src="https://github.com/gumify/cdn/blob/master/images/023c0dbfc7ba416d9137089f7c740291.jpeg?raw=true" class="page-image">






        <p data-center="no">இதன் Output பின்வருமாறு:</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/e6245a444ecb45268cc1ded87a3a3050.jpeg?raw=true" class="page-image">






        <p data-center="no">**Print**</p>






        <p data-center="no">`window.print()` என்பது தற்போதைய வலைப் பக்கத்தை அச்சிட உதவும் ஒரு print window-வை உருவாக்கும். கீழ்க்கண்ட program-ல் "Click here for printing" எனும் பெயர் கொண்ட ஒரு பொத்தானை சொடுக்கும்போது இத்தகைய window-வை உருவாக்கும் வகையில் ஒரு html code கொடுக்கப்பட்டுள்ளது.</p>






        <pre class="code"><code><html>

        <img src="https://github.com/gumify/cdn/blob/master/images/30163949c0d945daa61ffde22ddd37ab.jpeg?raw=true" class="page-image">






        <p data-center="no">இதன் Output பின்வருமாறு:</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/8ebfd0cd1fbf4f7cb355fbb21f1e8fdb.jpeg?raw=true" class="page-image">









        <h2 id="8-dialog-boxes-and-exception-handling">8. Dialog Boxes and Exception Handling</h2>






        <p data-center="no">**Dialog Boxes**</p>






        <p data-center="no">Javascript-ல் 3 முக்கியமான பெட்டிகள் உள்ளன. அவற்றைக் கீழ்க்காணும் எடுத்துக்காட்டில் காணலாம்.</p>






        <ul>

            <li class="md">"Alert box" எனும் பெயர் கொண்ட பொத்தானின் மீது சொடுக்கும்போது "This is a warning message!" எனும் செய்தி வெளிப்படும் வகையில் ஒரு பெட்டி உருவாக்கப்பட்டுள்ளது. இது பயனர்களை எச்சரிக்க உதவும் `alert()` பெட்டி ஆகும்.</li>

            <li class="md">"Confirm box" எனும் பெயர் கொண்ட பொத்தானின் மீது சொடுக்கும்போது "Do you want to continue?" என்ற ஒரு கேள்வியைக் கேட்டு, அதற்கு ஆம்/இல்லை என்று நாம் பதிலளிக்கும் வகையில் ஒரு பெட்டி உருவாக்கப்பட்டுள்ளது. இது `confirm()` பெட்டி எனப்படும்.</li>

            <li class="md">"prompt box" எனும் பெயர் கொண்ட பொத்தானின் மீது சொடுக்கும்போது "Please enter your name:" எனக் கூறி அதற்கு நாம் அளிக்கும் விடையைப் பெற்றுக்கொள்ளும் வகையில் ஒரு பெட்டி உருவாக்கப்பட்டுள்ளது. இது பயனர்கள் கொடுக்கும் விவரங்களை உள்ளீடாகப் பெற்றுக்கொண்டு, அதற்கேற்ப செயல்படும் `prompt()` பெட்டி ஆகும்.</li>

        </ul>





        <pre class="code"><code><html>

        <a href="https://gist.github.com/nithyadurai87/f6ff9fc9ac17a2f8ff426a759d34b0d5#file-user-defined-objects-html">View raw User defined objects.html hosted with by GitHub</a>






        <p data-center="no">அடுத்ததாக ஒரு method-ஐ எவ்வாறு வரையறுப்பது என்றும் மேலே கொடுக்கப்பட்டுள்ளது. இதற்கும் new எனும் operator பயன்படும். `<head>`- க்குள் attn. என்று ஒரு function வரையறுக்கப்பட்டுள்ளது. இது parameters-ஆக ஒருசில மதிப்புகளை பெற்றுக்கொள்ளும் வகையில் விளங்குகிறது. அவ்வாறு பெற்றுக்கொள்ளும் மதிப்புகளை அதற்குள் வரையறுக்கப்பட்டுள்ள name, status எனும் இரண்டு பண்புகளின் மதிப்பாக செலுத்துகிறது. இவை அனைத்தும் `this.name`, `this.status` எனக் கொடுக்கப்பட்டுள்ளது.</p>






        <p data-center="no">ஏனெனில் function என்ற ஒன்று தன்னிச்சையாக செயல்படக்கூடியது. Method என்பது Object-வுடன் இணைந்து function-ன் மீது செயல்பட்டு ஏதோ ஒன்றை நிகழ்த்தும் தன்மை உடையது. எனவே இது போன்ற methods-ன் பயன்பாட்டிற்காக function-க்குள் உள்ள அனைத்தும் `this`. என்று துவங்க வேண்டும்.</p>






        <p data-center="no">`<body>`-க்குள் attendance எனும் ஒரு object-ஆனது attn. method-க்கு உருவாக்கப்பட்டுள்ளது. இந்த object-ஐ உருவாக்கும்போதே அதன் வழியாக function-க்குள் செலுத்தப்பட வேண்டிய parameters-ம் கொடுக்கப்பட்டுவிட்டன. attendance-ஐத் தொடர்ந்து புள்ளி வைத்து method-க்குள் வரையறுக்கப்பட்ட பண்புகளைப் பயன்படுத்தி அதன் மதிப்புகளை வெளிப்படுத்துவது இங்கு கொடுக்கப்பட்டுள்ளது. இவ்வாறே ஒரு user defined object-ஐ வரையறுத்து நாம் பயன்படுத்தலாம்.</p>






        <p data-center="no">**Built-In Objects**</p>






        <p data-center="no">ஒரு மொழி உருவாக்கப்படும்போதே வரையறுக்கப்படுகின்றவை Built-In Objects எனப்படும். Javascript- ல் Number, Boolean, Strings, Arrays, Date, Math & RegExp போன்ற பல்வேறு வகையான Built-In Objects Objects உள்ளன. இவற்றின் Properties மற்றும் Methods-ன் பயன்பாடுகளைக் கீழே காணலாம்.</p>






        <pre class="code"><code><html>

  <script type="text/javascript">
     <!--
        function a1()
        {

           document.write (
                Number.MAX_VALUE+'<br/>'+Number.MIN_VALUE+'<br/>'+Number.POSITIVE_INFINITY+'<br/>'
                +Number.NEGATIVE_INFINITY+'<br/>'
                +Number.NaN+'<br/>'
                +Number.prototype+'<br/>'
                +Number.constructor
            );
        }
     //-->
  </script>

        <a href="https://gist.github.com/nithyadurai87/3dd8d743539be40834537af06b348760#file-built-in-objecets_numbers_properties-html">view raw Built in objecets_numbers_properties.html hosted with by GitHub</a>






        <pre class="code"><code><html>

        <a href="https://gist.github.com/nithyadurai87/38aff383c73f48ae4853a24191fba033#file-built-in-objects_numbers_methods-html">view raw Built in objects_numbers_methods.html hosted with by GitHub</a>






        <p data-center="no">இது Number எனும் Object-ன் Properties மற்றும் Methods எப்படி செயல்படுகின்றன என்பதைக் காட்டுகிறது. இதை உங்களாலேயே புரிந்து கொள்ள முடியும். இவ்வாறே Boolean, Strings, Arrays, Date, Math & RegExp போன்ற பலவற்றுக்கும் பல்வேறு வகையான Properties மற்றும் Methods உள்ளன. இவற்றை இணையத்தின் துணை மூலம் தெரிந்து கொள்ளவும்.</p>









        <h2 id="13-animation">13. Animation</h2>






        <p data-center="no">Animation என்பது செயல்படக் கூடிய அல்லது இயங்கக்கூடிய விதத்தில் உலாவிகளில் படங்களை உருவாக்குகின்ற முறை ஆகும். அதாவது நிலையாக இருக்கும் ஒரு படமானது இயங்க ஆரம்பித்துவிட்டால் அதுவே animation எனப்படும்.</p>






        <p data-center="no">கீழ்க்கண்ட உதாரணத்தில் "Move 1 inch" எனும் பொத்தானின் மீது சொடுக்கும்போது திரையில் உள்ள படமானது வலப்பக்கமாக ஒரு இன்ச் நகரும் வகையிலும், Move right எனும் பொத்தானின் மீது சொடுக்கும்போது அதே படமானது முழுவதுமாக வலதுபுறத்தில் நகர்ந்து கொண்டே செல்லும் வகையிலும் நிரல்கள் எழுதப்பட்டுள்ளன. Stop என்பது நகர்ந்து கொண்டே செல்லும் படத்தை நிறுத்த உதவும் ஒரு பொத்தான் ஆகும்.</p>






        <pre class="code"><code><html>

Getting an identity is important

Getting value Setting value

        <a href="https://gist.github.com/nithyadurai87/74aa4e33c9e35a8a4747d91e307f4cc2#file-05_jquery_css-html">view raw 05_jquery_css.html hosted with by GitHub</a>






        <p data-center="no">சாதாரண வெளிப்பாடு:</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/2dd80adfc6934291a29decff62e313e2.jpeg?raw=true" class="page-image">






        <p data-center="no">Getting value-ன் மீது சொடுக்கினால் வெளிப்படுவது:</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/75ebab83af524cbcb3df812236c61305.jpeg?raw=true" class="page-image">






        <p data-center="no">Setting value-ன் மீது சொடுக்கினால் மாறுவது:</p>






        <img src="https://github.com/gumify/cdn/blob/master/images/ef3c6ce68c5c4a99a25ebd3f81862ff5.jpeg?raw=true" class="page-image">






        <p data-center="no">**jQuery elements-ன் இயக்கங்களைத் தோற்றுவிக்கும் விதம்**</p>






        <p data-center="no">வலைத்தளப் பக்கங்களில் இயக்கங்களை உருவாக்குவதற்கும், அவ்வியக்கங்களை கண்கூடாகக் காண்பதற்கும் உதவும் jquery methods-ஐ இங்கு காணலாம். கீழ்க்கண்ட எடுத்துக்காட்டில் ஒருசில அடிப்படையான இயக்கங்களும், அதற்கான விளக்கங்களும் கொடுக்கப்பட்டுள்ளன.</p>






        <pre class="code"><code><html>