Form Validations, Javascript Objects & Animations

11 தகவல்களை சோதித்தல்

ஒரு விண்ணப்பப் படிவத்தை நாம் பூர்த்தி செய்துவிட்டு Submit பொத்தானை சொடுக்கினால், உலாவியானது நாம் கொடுத்த விவரங்களை server-க்கு அனுப்புவதற்கு முன்னர், எல்லாம் சரியாக உள்ளதா எனச் சோதிக்கும். ஏதாவது விவரங்களை நாம் கொடுக்கத் தவறியிருந்தாலோ அல்லது தவறுதலாகக் கொடுத்திருந்தாலோ, உலாவியானது ஒரு popup மூலம் அதனை நமக்குத் தெரியப்படுத்தும். சரியான விவரங்களைக் கொடுத்து முழுவதுமாக படிவத்தைப் பூர்த்தி செய்யும்வரை, எந்த ஒரு விவரத்தையும் server-க்கு அனுப்பாது. இதுவே  Client side validations எனப்படும். இதனை Javascript எவ்வாறு செய்கிறது என்பதைப் பின்வருமாறு காணலாம்.

கீழ்க்கண்ட உதாரணத்தில் Name, Email, Zip Code எனும் உள்ளீட்டுப் பெட்டிகளும், Country எனும் கீழிறக்கப் பெட்டியும், submit எனும் பொத்தானும் உருவாக்கப்பட்டுள்ளன. இப்போது submit எனும் பொத்தானின் மீது சொடுக்கும்போது, ஒவ்வொரு பெட்டிக்கும் நிகழ வேண்டிய அனைத்து விதமான சோதனைகளும் validate () எனும் ஒரே function-க்குள் கொடுக்கப்பட்டுள்ளன. இந்த அனைத்து சோதனைகளும் வெற்றிகரமாக நடத்தி முடிக்கப்பட்ட பின்னரே இந்த validate()-ஆனது return (true) என்பதனை தெரிவித்து, அடுத்து நடக்க வேண்டிய விஷயத்திற்கே செல்லும். இதில் ஏதேனும் ஒரு சோதனையில் பயனர்கள் அளித்த விவரம் ஒழுங்காக இல்லை என்று கண்டுபிடிக்கப்பட்டுவிட்டால் கூட return(false) எனக் கொடுத்து அடுத்து எதையும் நடக்க விடாது.

உள்ளீட்டுப் பெட்டிகள் பூர்த்தி செய்யப்பட்டுள்ளதா என்பதற்கான சோதனை:

Name எனும் பெயர் கொண்ட உள்ளீட்டுப் பெட்டியின் மதிப்பு காலியாக இருந்தால், “Please provide your name!” எனும் எச்சரிப்பு செய்தி வருமாறு நிரல் கொடுக்கப்பட்டுள்ளது. அதைத் தொடர்ந்து Name எனும் பெட்டிக்குள் cursor செல்லுமாறு அமைக்க focus பயன்படுத்தப்பட்டுள்ளது. இவ்வாறே ஒவ்வொரு பெட்டிக்கும் அது பூர்த்தி செய்யப்பட்டுள்ளதா என்பதற்கான சோதனைகளை நாம் செய்து கொள்ளலாம்.

கீழிறக்கப் பெட்டியில் விவரம் தேர்வு செய்யப்பட்டுள்ளதா என்பதற்கான சோதனை:

Country எனும் பெயர் கொண்ட கீழிறக்கப் பெட்டியில் 3 நாடுகளின் பெயர்கள் உள்ளது என வைத்துக்கொண்டால் அவை முறையே 0,1,2 என அழைக்கப்படும். எனவே விவரங்கள் எதுவும் தேர்வு செய்யப்படவில்லையா எனக் கண்டுபிடிக்க country-ன் மதிப்பு -1க்குச் சமமாக உள்ளதா எனச் சோதித்தால் போதும். பயனர் dropdown box-ல் எந்த ஒரு நாட்டையும் தேர்வு செய்யவில்லை என்றே அர்த்தம். இவ்வாறே ஒரு கீழிறக்கப் பெட்டிக்கான சோதனைகள் நிகழ்த்தப்படுகின்றன.

விவரங்களின் வடிவத்தை சோதிப்பதற்கான சோதனை:

நாம் கொடுக்கின்ற email-id சரியாக உள்ளதா என்பதை சோதிப்பதற்கு இணையத்தில் ஒரு regular expression இருக்கும். அதை ஒரு variable-ல் சேமித்து, test()எனும் function-ஐப் பயன்படுத்தி சரியான இடத்தில் தான் @ மற்றும் . எல்லாம் உள்ளானவா என்பதைச் சோதிக்கலாம். அவ்வாறு இல்லையெனில் “Please enter correct email ID” எனும் எச்சரிப்பு செய்தி வருமாறு அமைக்கலாம்.

அடுத்ததாக Zip எனும் பெயர் கொண்ட உள்ளீட்டுப் பெட்டியின் மதிப்பு காலியாக இருந்தாலோ, எண்கள் அல்லாத வேறு ஏதாவது ஒன்றை மதிப்பாக அளித்தாலோ, நாம் கொடுக்கின்ற மதிப்பு 5 இலக்கத்திற்கு சமமாக இல்லை என்றாலோ “Please provide a zip in the format #####.” எனும் எச்சரிப்பு செய்தி வருமாறு கொடுக்கப்பட்டுள்ளது.

12 Object Oriented Programming Concepts

முதலில் Objects என்றால் என்ன? அதன் தேவை என்ன? அவை எவ்வாறு செயல்படுகின்றன? அவை எவ்வாறு நமது வேலையை சுலபமாக்குகின்றன? என்பதையெல்லாம் இப்பகுதியில் சாதாரண உதாரணங்களை வைத்து நாம் புரிந்து கொள்வோம். இதுவே Javascript-ல் உள்ள Objects-ஐக் கற்பதற்கு சுலபமாக அமையும்.

Object:

அதிக அளவிலான விவரங்களை சேமிப்பதற்கு, நிறைய variables-ஐப் பயன்படுத்தாமல், அவை அனைத்தையும் ஒரே ஒரு Object-க்குள் செலுத்தி, அந்த Object-க்கு ஒரு variable-ஐ உருவாக்குவதன் மூலம் ஒற்றை variable-ல் எண்ணற்ற விவரங்களை சேமிக்கும் விதமே Object Oriented Programming ஆகும்.

Methods & Properties:

பொதுவாக Object என்பது அதற்கான பண்புகள் மற்றும் செயல்பாடுகளுடன் ஒரு Class-க்குள் வரையறை செய்யப்படும். உதாரணத்துக்கு human எனும் ஓர் புதிய Object-ஐ அறிமுகப்படுத்த விரும்பினால், அதற்கான பண்புகள் மற்றும் செயல்பாடுகள் அனைத்தும் ஒரு Class-க்குள் வரையறுக்கப்படும்.

Eg: Class human {Colour, Shape, Race, Speak(), write(), anger()}

ஒரு மனிதனின் நிறம், வடிவம், இனம் போன்ற அவனுக்குரிய பண்புகள் அனைத்தும் Properties எனவும், அவன் செய்கின்ற செயல்களான பேசுதல், எழுதுதல், கோபப்படுதல் ஆகியவை அனைத்தும் Methods எனவும் அழைக்கப்படும்.

இப்போது 100 மனிதனுக்குரிய நிறம், வடிவம், இனம் போன்ற விவரங்களை சேமிக்க விரும்பினால், ஒவ்வொரு விவரத்துக்கும் தனித்தனி variables பயன்படுத்தத் தேவையில்லை. ஒரே variable-ல் அனைத்து வகையான விவரங்களையும் சேமித்துக் கொள்ள முடியும். அதாவது a = human.new() எனக் கொடுத்தால் போதுமானது. a.colour=‘Wheat’, a.Shape=’Short’, a.Race=’Indian’, a.Speak(), a.write(), a.anger() என்ற அனைத்து விதமான விஷயங்களையும், நம்மால் இந்த a எனும் variable-ல் சேமித்து விட முடியும். அதாவது a-வைத் தொடர்ந்து ஒரு புள்ளி வைத்துவிட்டு, human-ன் பண்புகள் மற்றும் செயல்பாடுகளின் பெயர்களைக் கொடுத்து பல்வேறு ஒத்த தகவல்களை சேமித்து அணுகலாம்.

Encapsulation:

இந்த a-வானது human-ன் அனைத்து விதமான செயல்பாடுகளையும், அணுகுகின்ற அதிகாரத்தைப் பெற்று செயல்படுவதே ‘Encapsulation’ எனப்படும். அதாவது எங்கெல்லாம் print a எனக் கொடுக்கிறோமோ, அங்கெல்லாம் அதில் சேமிக்கப்பட்டுள்ள அனைத்து மதிப்புகளும் வெளிப்படும். இந்த a- ஆனது Object-ன் மறுவடிவமாக செயல்படுவதால், இது ஒரு சாதாரண variable-ஆக கருதப்படாமல், Instance என்று அழைக்கப்படும். Object-ன் ஒரு Instance-க்கும், அதன் Methods & Properties-க்கும் உள்ள உறவே “Encapsulation” ஆகும்.

Inheritance:

இப்பொழுது kid எனும் மற்றொரு புதிய object- ஐ உருவாக்கப்போகிறோம். இதற்குள் human-ன் பண்புகள் மற்றும் செயல்பாடுகளுடன் சேர்த்து புதிதாகச் சில பண்புகள் மற்றும் செயல்பாடுகளையும் சேர்ப்பதற்கு,

Class kid (import human) {school, class, cry(), shout()} என்று கொடுக்க வேண்டும். Kid-க்கு உருவாக்கப்படும் instance- ஆல் kid & human எனும் இரண்டு objects-ஐயும் அணுக முடியும். இதுவே Inheritance எனப்படும். இவ்வாறு செய்வதற்கு பதிலாக, human-க்குள் சென்று இந்தப் புதிய பண்புகளையும், அதனுடன் இணைத்து விடலாமே என்று நீங்கள் கேட்கக்கூடும். அவ்வாறு நாம் செய்தோமானால், ஒவ்வொரு முறை human-க்கு instance-ஐ உருவாக்கும்போதும், தேவையில்லாத பண்புகளுக்கும் சேர்த்து memory எடுத்துக்கொள்ளும். எனவேதான் Inheritance என்ற ஒன்று பயன்பாட்டிற்கு வந்தது.

Polymorphism:

Print 5+8 எனக் கொடுக்கும்போது, அது 13 எனும் மதிப்பினை வெளிப்படுத்தும். அதுவே Print ‘5+8’ என நாம் கொடுத்தால், அது 58 எனும் மதிப்பினை வெளிப்படுத்தும். அதாவது Print எனும் ஒரே function, வெவ்வேறு விதங்களில் செயல்படுத்தப்படுகின்றன. இதுவே Polumorphism-க்கு ஓர் சிறந்த உதாரணம் ஆகும்.

13 Javascript Objects

Javascript- ல் பின்வரும் இரண்டு வகையான உள்ளன.

User defined objects

நமக்குத் தேவையான விதத்தில், நாமே உருவாக்கிக் கொள்ளும் Object-ஆனது, User defined object எனப்படும்.

new எனும் operator ஒரு புதிய Object- ஐ உருவாக்கப் பயன்படும். கீழ்க்கண்ட உதாரணத்தில் Var records = new object() என்பதன் மூலம் object() எனும் constructor-அனுப்புகின்ற மதிப்பு records எனும் variable-ல் சேமிக்கப்படுகிறது. எனவே இனி records-ம் ஒரு object போன்றே செயல்படும். எனவே தான் இதற்குள் வரையறுக்கப்பட்டுள்ள மதிப்புகள் அனைத்தும் var name, var age என்று இல்லாமல் object-ன் பண்புகள் எவ்வாறு வரையறுக்கப்படவேண்டுமோ அவ்வாறு வரையறுக்கப்பட்டுள்ளது. records-ஐத் தொடர்ந்து ஒரு புள்ளி வைத்து name, age எனும் இரண்டு பண்புகள் உருவாக்கப்பட்டுள்ளன. அதன் தொடர்ச்சியாக சமக்குறியிட்டு அதன் மதிப்புகளும் வரையறுக்கப்பட்டுள்ளன. அதாவது பண்புகளின் Declaration மற்றும் Initialization ஒரே நேரத்தில் நடைபெற்றுள்ளது. பின்னர் document.write(records.name + records.age) எனக் கொடுக்கும்போதெல்லாம், அவை தான் பெற்றுள்ள மதிப்பினை வெளிப்படுத்துவதைக் காணலாம்.

அடுத்ததாக ஒரு method-ஐ எவ்வாறு வரையறுப்பது என்றும் மேலே கொடுக்கப்பட்டுள்ளது. இதற்கும் new எனும் operator பயன்படும். <head>- க்குள் attn. என்று ஒரு function வரையறுக்கப்பட்டுள்ளது. இது parameters-ஆக ஒருசில மதிப்புகளை பெற்றுக்கொள்ளும் வகையில் விளங்குகிறது. அவ்வாறு பெற்றுக்கொள்ளும் மதிப்புகளை அதற்குள் வரையறுக்கப்பட்டுள்ள name, status எனும் இரண்டு பண்புகளின் மதிப்பாக செலுத்துகிறது. இவை அனைத்தும் this.name, this.status எனக் கொடுக்கப்பட்டுள்ளது. ஏனெனில் function என்ற ஒன்று தன்னிச்சையாக செயல்படக்கூடியது. Method என்பது Object-வுடன் இணைந்து function-ன் மீது செயல்பட்டு ஏதோ ஒன்றை நிகழ்த்தும் தன்மை உடையது. எனவே இது போன்ற methods-ன் பயன்பாட்டிற்காக function- க்குள் உள்ள அனைத்தும் this. என்று துவங்க வேண்டும்.

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

இவ்வாறே ஒரு user defined object-ஐ வரையறுத்து நாம் பயன்படுத்தலாம்.

Built-In Objects

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

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

14 Animations

Animation என்பது செயல்படக் கூடிய அல்லது இயங்கக்கூடிய விதத்தில் உலாவிகளில் படங்களை உருவாக்குகின்ற முறை ஆகும். அதாவது நிலையாக இருக்கும் ஒரு படமானது இயங்க ஆரம்பித்துவிட்டால் அதுவே animation எனப்படும்.

கீழ்க்கண்ட உதாரணத்தில் “Move 1 inch” எனும் பொத்தானின் மீது சொடுக்கும்போது திரையில் உள்ள படமானது வலப்பக்கமாக ஒரு இன்ச் நகரும் வகையிலும், Move right எனும் பொத்தானின் மீது சொடுக்கும்போது அதே படமானது முழுவதுமாக வலதுபுறத்தில் நகர்ந்து கொண்டே செல்லும் வகையிலும் நிரல்கள் எழுதப்பட்டுள்ளன. Stop என்பது நகர்ந்து கொண்டே செல்லும் படத்தை நிறுத்த உதவும் ஒரு பொத்தான் ஆகும்.

2 Comments

  1. karthickrajalearn

    Thanks for your Post
    Keep on Posting something every month

    Reply
  2. இராஜராஜன்

    மிகவும் உபயோகமான பதிவு… தொடர்ந்து பதியவும்..

    Reply

Leave a Reply

%d bloggers like this: