9 Dialog Boxes
Javascript-ல் 3 முக்கியமான பெட்டிகள் உள்ளன. அவற்றைக் கீழ்க்காணும் எடுத்துக்காட்டில் காணலாம்.
- “Alert box” எனும் பெயர் கொண்ட பொத்தானின் மீது சொடுக்கும்போது “This is a warning message!” எனும் செய்தி வெளிப்படும் வகையில் ஒரு பெட்டி உருவாக்கப்பட்டுள்ளது. இது பயனர்களை எச்சரிக்க உதவும் alert() பெட்டி ஆகும்.
- “Confirm box” எனும் பெயர் கொண்ட பொத்தானின் மீது சொடுக்கும்போது “Do you want to continue?” என்ற ஒரு கேள்வியைக் கேட்டு, அதற்கு ஆம்/இல்லை என்று நாம் பதிலளிக்கும் வகையில் ஒரு பெட்டி உருவாக்கப்பட்டுள்ளது. இது confirm() பெட்டி எனப்படும்.
- “prompt box” எனும் பெயர் கொண்ட பொத்தானின் மீது சொடுக்கும்போது “Please enter your name:” எனக் கூறி அதற்கு நாம் அளிக்கும் விடையைப் பெற்றுக்கொள்ளும் வகையில் ஒரு பெட்டி உருவாக்கப்பட்டுள்ளது. இது பயனர்கள் கொடுக்கும் விவரங்களை உள்ளீடாகப் பெற்றுக்கொண்டு, அதற்கேற்ப செயல்படும் prompt() பெட்டி ஆகும்.
| <html> | |
| <head> | |
| <script type="text/javascript"> | |
| <!-- | |
| function box1() | |
| { | |
| alert ("This is a warning message!"); | |
| } | |
| function box2() | |
| { | |
| var x = confirm("Do you want to continue ?"); | |
| if( x == true ){document.write ("User wants to continue!");} | |
| else{document.write ("User does not want to continue!");} | |
| } | |
| function box3() | |
| { | |
| var x = prompt("Please enter your name : ", "your name goes here"); | |
| document.write("Hello! Welcome " + x); | |
| } | |
| //--> | |
| </script> | |
| </head> | |
| <body> | |
| <form> | |
| <input type="button" onclick="box1()" value="Alert box"> | |
| <input type="button" onclick="box2()" value="Confirm box"> | |
| <input type="button" onclick="box3()" value="prompt box"> | |
| </form> | |
| </body> | |
| </html> |
by இதன் வெளிப்பாடு பின்வருமாறு:
alert():
பயனர்களை எச்சரிக்கும் வகையில் ஒரு பெட்டியை திரையில் வெளிப்படுத்த alert() box பயன்படும். இந்த alert()-க்குள் கொடுக்கப்படும் செய்தியானது (“This is a warning message!”) திரையில் வெளிப்படும் பெட்டிக்குள் எச்சரிப்பு செய்தியாக இருக்கும். பெட்டிக்குள் உள்ள OK பொத்தானின் மீது சொடுக்கினால் அந்த எச்சரிப்பு செய்தி மறைந்துவிடும்.
confirm():
பயனர்களிடமிருந்து ஒரு முறைக்கு இருமுறை உறுதியைப் பெற்றுக்கொள்ளும் வகையில் ஒரு பெட்டியை திரையில் வெளிப்படுத்த confirm() box பயன்படும். ஏனெனில் முதல்முறை தவறுதலாகச் சொடுக்கியிருந்தாலும் கூட இந்தப் பெட்டியைப் பார்த்துவிட்டு பின்வாங்கிச் செல்ல இது வாய்ப்பளிக்கும். எனவே இந்தப் பெட்டி OK மற்றும் Cancel எனும் இரண்டு பொத்தான்களுடன் காணப்படும். OK-வை true எனவும், Cancel-ஐ false எனவும் இது எடுத்துக்கொள்ளும். ஆகவே true-ஆக இருந்தால் என்ன செய்ய வேண்டும், false-ஆக இருந்தால் என்ன செய்ய வேண்டும் என்பதையும் நம்மால் If condition மூலம் வரையறுக்க முடியும்.
User wants to continue!
prompt():
Prompt() box- ஆனது நம்மிடம் ஒரு கேள்வியை எழுப்பி, அதற்கான பதிலை நம்மிடமிருந்து பெற்றுக்கொண்டு, பின்னர் அதற்கேற்ற வகையில் செயல்படும் தன்மை கொண்டது. எனவே இது வெளிப்படுத்துகின்ற பெட்டிக்குள் ஒரு கேள்வியும், ஒரு input box-ம் காணப்படும். கேள்வியாக என்ன வெளிப்பட வேண்டும், input box-ல் என்ன தென்பட வேண்டும் என்பதையெல்லாம், prompt()-க்குள் நாம் வரையறுத்து விடலாம்.
Hello! Welcome Aarthi Irudhayaraj
10 Exception Handling
try { } என்பது அதன் எல்லைக்குள் உள்ள நிரலில் ஏதேனும் தவறு இருந்தால், அது என்ன தவறு எனும் செய்தியை வெளிப்படுத்தும். catch { } என்பது வெளிப்படுகின்ற செய்தியை பெற்றுக்கொண்டு அதை பயனருக்குத் தெரிவிக்க உதவும்.
கீழ்க்கண்ட உதாரணத்தில் Example1 எனும் பொத்தானின் மீது சொடுக்கும்போது one() எனும் function-ம், Example2 எனும் பொத்தானின் மீது சொடுக்கும்போது two() எனும் function-ம் இயக்கப்படும் விதத்தில் நிரல் எழுதப்பட்டுள்ளது.
| <html> | |
| <head> | |
| <script type="text/javascript"> | |
| <!-- | |
| function one() | |
| { | |
| var y = 0; | |
| try {document.write(x);} | |
| catch (e) {document.write(e+"</br>");} | |
| try | |
| { | |
| if (y==0) {throw( "Variable should not hold zero" ); } | |
| } | |
| catch (e) {document.write(e+"</br>");} | |
| finally {document.write("Execution Completed" );} | |
| } | |
| window.onerror = function (a,b,c) | |
| { | |
| alert(a); | |
| alert(b); | |
| alert(c); | |
| } | |
| //--> | |
| </script> | |
| </head> | |
| <body> | |
| <form> | |
| <input type="button" onclick="one()" value="Example1"> | |
| <input type="button" onclick="two()" value="Example2"> | |
| </form> | |
| </body> | |
| </html> |
இதன் வெளிப்பாடு பின்வருமாறு:
function one()-க்குள் y எனும் variable வரையறுக்கப்பட்டுள்ளது. ஆனால் x -ன் மதிப்பினை வெளியிடுமாறு அடுத்த வரியில் உள்ளது. இந்த x -ஆனது எங்குமே வரையறுக்கப்படாத காரணத்தினால் இது error-ஐ வெளிப்படுத்தி program இயங்குவதை பாதியில் நிறுத்திவிடும். இவ்வாறு நிகழாமல் தடுப்பதற்காகவே x -ன் மதிப்பினை வெளியிடுமாறு உள்ள வரி try{ } -க்குள் கொடுக்கப்பட்டுள்ளது. எனவே ஏதேனும் தவறு நிகழ்ந்தால் கூட அது ஒரு செய்தியாகவே வெளிப்படுமே தவிர, program இயங்குவதற்கு எந்த ஒரு தடையும் இருக்காது.
அடுத்த வரியில் catch (e) எனக் கொடுப்பதன் மூலம் வெளிப்படுகின்ற செய்தியை e எனும் variable மூலம் பெற்றுக்கொண்டு பின்னர் அந்த செய்தியை {document.write(e+”</br>”)} என்பதன் மூலம் வெளிப்படுத்தியுள்ளது. இது பின்வருமாறு.
ReferenceError: x is not defined
இதுபோன்ற Reference error எல்லாம் javascript-ஆல் ஏற்கனவே வரையறுக்கப்பட்ட தவறு வகைகள். சில சமயங்களில் நமது தேவைக்கேற்ப நாமே தவறுகளை வரையறுத்து அதனை சுட்டிக்காட்ட விரும்பினால் throw() பயன்படும்.
அடுத்து கொடுக்கப்பட்டுள்ள try{} block- க்குள் y-ன் மதிப்பு 0 என இருந்தால் “Variable should not hold zero” எனும் error-ஐ வெளிப்படுத்துமாறு throw()-க்குள் கொடுக்கப்பட்டுள்ளது. பின்னர் அந்த error, catch { } மூலம் பெறப்பட்டு வெளிப்படுத்தப்பட்டுள்ளது. இது பின்வருமாறு.
Variable should not hold zero
Finally { } எனும் blocks-க்குள் கொடுக்கப்பட்டுள்ளவை அனைத்தும் errors வந்தாலும் வராவிட்டாலும் கண்டிப்பாக ஒருமுறை execute செய்யப்பட்டு விடும். இது பின்வருமாறு.
Execution Completed
Function one() – ன் செயல்பாடுகள் முடிந்தவுடன் window.onerror = function (a,b,c) என்று கொடுக்கப்பட்டுள்ளது. அதாவது Example2 பொத்தானின் மீது சொடுக்கும்போது, two() எனும் function, எங்குமே வரையறுக்கப்படாத காரணத்தால் windows- ஆனது error-ஐ வெளிப்படுத்தும். windows.onerror எனும் method, error-ஐ கைப்பற்றி அதனை Error message, url, Line number போன்ற 3 நிலைகளில் சேமிக்கும். இதனை a,b,c போன்ற parameters மூலம் function-க்குள் செலுத்தி alert() மூலமோ அல்லது document.write() மூலமோ வெளிப்படுத்தலாம். இது பின்வருமாறு.
Error Message:
URL:
Line Number:
