Functions & Events in JavaScript

February 22, 2017 1 Comment

Javascript, கணியம்

7 Functions & Events

Functions என்பது மறுபயன்பாட்டிற்கு உதவும் வகையில் எழுதப்படுகின்ற நிரல்கள் ஆகும். ஒரு மிகப்பெரிய program- ஐ நாம் எழுதிக் கொண்டிருக்கும்போது ஒருசில குறிப்பிட்ட நிரல்களை மட்டும் நமது தேவைக்கேற்ப நாம் மீண்டும் மீண்டும் பயன்படுத்த வேண்டியிருக்கும். அப்படிப்பட்ட நிரல்களை ஒரு பொதுவான பெயர் வைத்து சேமித்துக்கொள்ள functions பயன்படுகிறது. சுருக்கமாகச் சொல்லப்போனால், ஒரு மிகப்பெரிய program-ஐ சிறுசிறு பகுதிகளாகப் பிரித்துக்கையாளுவதற்கு functions பயன்படுகிறது.
இதை parameters ஏற்றுக்கொண்டு செயல்படுபவை, parameters இல்லாமல் செயல்படுபவை என்று இரண்டாகப் பிரிக்கலாம். பின்வரும் எடுத்துக்காட்டில் sayHello() என்பது parameters இல்லாமல் செயல்படும் function-க்கு உதாரணமாகவும், concatenate() என்பது parameters வைத்து செயல்படும் function-க்கு உதாரணமாகவும் விளங்குகிறது.

<html>

   <head>   
      <script type="text/javascript">
         function sayHello()
         {
            document.write ("Hello Buddy! Welcome!");
         }

         function concatenate(fn, ln)
         {
            var name;
            name = fn + ln;
            return name;
         }
         
         function fullname()
         {
            var c;
            c = concatenate('Malathi', 'Sivakumar');
            document.write (c );
         }
      </script>      
   </head>

   <body>      
      <form>
         <input type="button" onclick="sayHello()" value="Greetings">
         <input type="button" onclick="fullname()" value="Click Here">
      </form>
   </body>

</html>

இதன் Output பின்வருமாறு:


Functions without parameters

sayHello() எனும் பெயரில் சேமிக்கப்பட்ட function, “Hello Buddy! Welcome!“ எனும் வரியினை வெளிப்படுத்தும் வேலையை செய்கிறது. பின்னர் ‘Greetings’ எனும் பெயர் கொண்ட பொத்தானை சொடுக்கும்போது, இந்த function அழைக்கப்படும் வகையில் body-க்குள் ஒரு HTML code கொடுக்கப்பட்டுள்ளது. இது parameter இல்லாமல் அழைக்கப்படும் function-க்கு உதாரணம் ஆகும்.

Functions with parameters

“Click Here” எனும் பொத்தானை சொடுக்கும்போது, fullname() எனும் function அழைக்கப்படுவதற்கான code ஒன்று body-க்குள் உள்ளது. fullname()-க்குள் c எனும் ஒரு variable-வரையறுக்கப்பட்டு அதில், concatenate() function வெளிப்படுத்தும் மதிப்பு சேமிக்கப்படுகிறது. இந்த concatenate()தான் parameters- ஐ ஏற்றுக்கொண்டு செயல்படும் function-க்கு உதாரணம் ஆகும்.

அதாவது c = concatenate(‘Malathi’, ‘Sivakumar’) எனக் கொடுப்பதன் மூலம், அடைப்புக்குறிக்குள் உள்ள மதிப்புகள் concatenate(fn, ln) என்று வரையறுக்கப்பட்டுள்ள function-க்குள் உள்ளீடு மதிப்புகளாகச் சென்று அவற்றுக்குள் உள்ளவற்றைச் செயல்படுத்தும்.

concatenate(fn, ln)-க்குள் name எனும் ஒரு variable-வரையறுக்கப்பட்டு அதில், fn, ln வழியே செலுத்தப்பட்ட 2 தனித்தனி மதிப்புகள் இணைக்கப்பட்டு MalathiSivakumar எனும் ஒரே மதிப்பாக சேமிக்கப்படும். பின்னர் இந்த மதிப்பு சேமிக்கப்பட்டுள்ள name எனும் variable, return keyword மூலம் வெளியே அனுப்பப்படுகிறது. இவ்வாறு வெளியே வந்துள்ள இந்த மதிப்பே c எனும் variable-ல் சேமிக்கப்பட்டு வெளிப்படுத்தப்படுகிறது.

Events

ஒரு விஷயம் browser-ல் நடப்பதற்கு நாம் செய்யும் ஒவ்வொன்றும் Events எனப்படும். ஒரு பொத்தானை சொடுக்குவது, Mouse-ஐ நகர்த்துவது, Page-ஐ load செய்வது போன்ற ஒவ்வொன்றும் ஒவ்வொரு Events ஆகும்.
மேற்கண்ட அதே Program- ஐ நாம் Events-க்கும் எடுத்துக்கொள்ளலாம். அதில் onclick என்பது ஒரு event. அதையே onmouseover, onmouseout எனும் events கொண்டு மாற்றி இயக்கிப் பார்க்கவும்.

<html>

   <head>   
      <script type="text/javascript">
         function sayHello()
         {
            document.write ("Hello Buddy! Welcome!");
         }

         function concatenate(fn, ln)
         {
            var name;
            name = fn + ln;
            return name;
         }
         
         function fullname()
         {
            var c;
            c = concatenate('Malathi', 'Sivakumar');
            document.write (c );
         }
      </script>      
   </head>

   <body>      
      <form>
         <input type="button" onmouseover="sayHello()" value="Greetings">
         <input type="button" onmouseout="fullname()" value="Click Here">
      </form>
   </body>

</html>

onmouseover=”sayHello()”எனும்போது “Greetings” பொத்தானின் அருகில் mouse-ஐ கொண்டு செல்லும் போதே sayHello() இயக்கப்பட்டுவிடும்.

onmouseout=”fullname()”எனும்போது “Click Here” பொத்தானின் அருகில் mouse-ஐ கொண்டு செல்லும் போது எதுவும் நிகழாது. ஆனால் அங்கிருந்து mouse-ஐ வெளியே நகர்த்தும்போது sayHello() இயக்கப்பட்டுவிடும்.

8 Window-வின் பண்புகள்

window எனும் object-ன் ஒருசில பண்புகளைப் பயன்படுத்தி நாம் செய்யும் வேலைகளைப் பின்வருமாறு காணலாம்.

location

ஒரு வலைத்தளத்தை நாம் பயன்படுத்திக் கொண்டிருக்கும்போது, திடீரென்று ‘Home’ எனும் பொத்தானை அழுத்தி, அதன் முதல் பக்கத்திற்குச் செல்வோம் அல்லவா, இதற்காக window.location எனும் பண்பு பயன்படுகிறது. அதாவது browser-ன் எந்தப் பக்கத்தில் பயணர் இருந்தாலும், ஒரு பொத்தானை அழுத்தினால், ஒரு குறிப்பிட்ட url-க்குச் செல்லுமாறு அமைக்க இந்தப் பண்பு பயன்படுகிறது.

கீழ்க்கண்ட எடுத்துக்கத்தில், window.location-ன் மதிப்பு www.kaniyam.com என்று கொடுக்கப்பட்டுள்ளது. பின்னர் ‘Redirect Me’ எனும் பொத்தானை சொடுக்கும்போது, இது செயல்படும் வகையில் ஒரு HTML code கொடுக்கப்பட்டுள்ளது.எனவே வலைத்தளப் பக்கத்தில் ‘Redirect Me’ எனும் பொத்தானை எங்கு வைத்தாலும், அந்தப் பொத்தானை அழுத்தும் போது, அது www.kaniyam.com எனும் முகவரிக்குச் சென்று விடும். இது “Page Redirection” எனப்படும்.

<html>

   <head>
      
      <script type="text/javascript">
         <!--
            function Redirect() 
	    {
               window.location="http://www.kaniyam.com";
            }
         //-->
      </script>
      
   </head>
   
   <body>
     
      <form>
         <input type="button" onclick="Redirect()" value="Redirect Me">
      </form>
      
   </body>

</html>

இதன் Output பின்வருமாறு:

Print

window.print() என்பது தற்போதைய வலைப் பக்கத்தை அச்சிட உதவும் ஒரு print window-வை உருவாக்கும். கீழ்க்கண்ட program-ல் “Click here for printing” எனும் பெயர் கொண்ட ஒரு பொத்தானை சொடுக்கும்போது இத்தகைய window-வை உருவாக்கும் வகையில் ஒரு html code கொடுக்கப்பட்டுள்ளது.

<html>
   <body>     
      <form>
         <input type="button" onclick="window.print()" value="Click here for printing">
      </form>      
   </body>
</html>

இதன் Output பின்வருமாறு:

%d bloggers like this: