![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
உங்கள் வீட்டில் ஒரு fan இருக்கின்றது.அந்த fan ஒரு switch-உடன் connect-ஆகி இருக்கின்றது.நீங்கள் எப்போதெல்லாம் அந்த switch on பண்ணுறீங்களோ அப்போதெல்லாம் fan work ஆகும்.அப்படி work ஆகும் போது எனக்கு என்ன தெரிகின்றது.இந்த switch ஆனது fan-ன் உடையது.
இந்த concept-யை தான் நாம் js பயன்படுத்த போகிறோம்.அதற்கு பெயர் தான் event handling ஆகும்.
ஒவ்வொரு event-க்கும் ஒரு action generate ஆகும்.
user-ன் action என்னவென்று தெரிந்த பிறகு அதற்கு தகுந்த மாதிரி வேலை செய்யும்.
Ex:
இப்பொழுது user mouse-யை click பண்ணினால் mouse event generate ஆகும்.user key-யை click பண்ணி கொண்டிருந்தால் key event generate ஆகும்.
netscap 2.0-வில் இருந்து html element-இல் event handler பயன்படுத்தி ஆரம்பிக்கப்பட்டது.
js-இல் மட்டும் event handling இருக்கிறது என்று நினைக்காதீர்கள்.மற்ற scripting language-ஆன vbscript,asp,php...etc போன்ற வற்றில் event handling உள்ளது.
event handling இல்லாமல் நம்மால் ஒரு dynamic web page-ஐ உருவாக்க முடியாது.
Type Of Event Handlings
Window Event
onLoad:document load ஆகும்போது onload event generate ஆகும்.document என்பது நமது web page ஆகும்.
ex:
நம்முடைய web page-யை double click செய்து open பண்ணும்போது onLoad event generate ஆகும்.
<head>
<script>
function loadbox()
{
alert("web page is loaded");
}
</script>
</head>
<body onload="loadbox()" >
</body>
விளக்கம்:
onLoad Event-யை அதிகமான body section-இல் தான் பயன்படுத்துவார்கள் .காரணம் body section-ஆனது document-யை குறிக்கின்றது.
docuent என்பது web page ஆகும்.
onLoad event-யை generate பண்ணும்போது இந்த event ஆனது loadbox()என்கிற function-க்கு செல்கின்றது.
loadbox() function-ல் கொடுக்கப்பட்டுள்ள alert message ஆனது display செய்யப்படுகின்றது.
இவ்வாறு onload event ஆனது வேலை செய்கின்றது.
onUnload:
எப்பொழுதெல்லாம் நீங்கள் உங்களுடைய web page-யை close பண்ணுறீங்களோ அந்த சமயத்தில் onUnLoad event generate ஆகும்.
<head>
<script>
function unloadbox()
{
alert("web page is closed");
}
</script>
</head>
<body onunload="unloadbox()" >
</body>
விளக்கம்:
onUnload event ஆனது உருவாக்கப்படும்போது அதில் கொடுக்கப்பட்டுள்ள unloadbox()என்கிற function-க்கு செல்கிறது. அந்த function-ல் கொடுக்கப்பட்டிருக்கும் alert message ஆனது display-ல் காண்பிக்கப்படுகின்றது.
இந்த unload event ஆனது ஒரு சில web browser-களில் மட்டும் வேலை செய்கின்றது.
onResize:
எப்போதெல்லம் browser-ன் window size-யை சிரியதாகவோ,அல்லது பெரியதாகவோ மாற்றும் பொழுது onresize event generate ஆகும்.
<head>
<script>
function resizebox()
{
alert("web page size is changed");
}
</script>
</head>
<body onresize="resizebox()" >
</body>
விளக்கம்:
நீங்கள் window-ன் size-யை சிறியதாகவோ அல்லது பெரியதாகவோ மாற்றும்போது onresize event உருவாக்கப்படும்.இப்பொழுது onresize event-ன் கொடுக்கப்பட்டுள்ள resizebox())என்கிற function-க்கு செல்கின்றது. இந்த function-ல் இருக்கும் alert message ஆனது dispaly செய்யப்படுகின்றது.
Mouse Event
onClick():
button ஆக இருக்கட்டும் ,div tag எலெமென்-ஆகா இருக்கட்டும் அந்த element-ன் மீது click பண்ணும்போது இந்த event generate ஆகும்.அதிகமாக இந்த events button-இல் தான் பயன்படுத்தப்படுகிறது.
<body>
<script>
function clickbox()
{
alert("click the box");
}
</script>
<div style="background-color:red;height:100px;width:100px;" onclick="clickbox()">
click
</div>
</body>
விளக்கம்:
ஒரு div tag உள்ளது.
அதனுடைய red என்பது background color ஆகவும் 100 px என்ற மதிப்பு width மற்றும் height-க்கு கொடுக்கப்பட்டுள்ளது.
இந்த div tag-ல் onclick என்கிற event கொடுக்கப்பட்டுள்ளது.
onclick event-க்கு clickbox()என்கிற function கொடுக்கப்பட்டுள்ளது.
div tag-ன் மீது mouse-ன் arrow-வை வைத்து click செய்யும்பொழுது click me() function உள்ளே இருக்கின்ற alert message ஆனது காண்பிக்கப்படும்.
onDblclick():
ஒரு element-ன் மீது தொடர்ந்து இரண்டு முறை click செய்யும்பொழுது double click event generate ஆகும்.
<body>
<script>
function db_click()
{
alert("double click the box");
}
</script>
<div style="background-color:yellow;height:100px;width:100px;" ondblclick="db_click()">
double click
</div>
</body>
விளக்கம்:
இங்கு ஒரு div tag கொடுக்கப்பட்டுள்ளது .அதற்கு background colour,width மற்றும் height-க்கு கொடுக்கப்பட்டுள்ளது.
இந்த div tag-ல் ondblclick என்கிற event இருக்கின்றது.
இந்த event-க்கு db_click()என்கிற function கொடுக்கப்பட்டுள்ளது.
இந்த div tag-ன் மீது mouse-ன் arrow-வை வைத்து double click செய்யும்பொழுது db_click() என்கிற function-ல் இருக்கும் alert message ஆனது display செய்யப்படும்.
onMouseover:
ஒரு element-ன் மீது mouse-யை கொண்டு வைக்கும் பொழுது mouse over event generate ஆகும்.
<body>
<script>
function mouse_over()
{
alert("mouse over the box");
}
</script>
<div style="background-color:green;height:100px;width:100px;" onmouseover="mouse_over()">
mouse over
</div>
</body>
விளக்கம்:
div tag-ல் onmouseover என்கிற event உள்ளது.
அந்த event-க்கு mouse_over()என்கிற function கொடுக்கப்பட்டுள்ளது.
div tag-ன் மீது mouse-ன் arrow-வை வைக்கும் போது mouse_over வேலை செய்யும்.இதனுள் கொடுக்கப்பட்ட function-க்கு சென்று அதனுள் இருக்கும் alert message ஆனது display செய்யப்படும்.
onMouseDown:
எப்பொழுதெல்லாம் உங்களுடைய left mouse button-யை click செய்கின்றிகளோ அப்பொழுதெல்லாம் onMouseDown event generate ஆகும்.
<body>
<script>
function mouse_down()
{
alert("mouse down the box");
}
</script>
<div style="background-color:blue;height:100px;width:100px;" onmousedown="mouse_down()">
mouse down
</div>
</body>
விளக்கம்:
div tag-ல் onmousedown என்கிற event உள்ளது.
அந்த event-க்கு mouse_down()என்கிற function கொடுக்கப்பட்டுள்ளது.
div tag மீது mouse-யை வைத்து mouse button-யை விரலை எடுக்காமல் அழுத்தி கொண்டிருக்கும் போது event-ஆனது வேலை செய்யும்.
இந்த event-க்கு கொடுக்கப்பட்ட function-க்கு சென்று அங்கிருக்கும் alert message display செய்யப்படும்.
onMouseUp:
ஒரு element-ன் மீது mouse-யை வைத்து left mouse button-யை அழுத்திவிட்டு அதிலிருந்து விரலை எடுக்கும்போது onMouseUp event generate ஆகும்.
<body>
<script>
function mouse_up()
{
alert("mouse up the box");
}
</script>
<div style="background-color:orange;height:100px;width:100px;" onmouseup="mouse_up()">
mouse up
</div>
</body>
விளக்கம்:
div tag-ல் onmouseup என்கிற event உள்ளது.
அந்த event-க்கு mouse_up()என்கிற function கொடுக்கப்பட்டுள்ளது.
div tag-ன் மீது mouse-யை வைத்து mouse button-யை அழுத்திய பிறகு அதிலிருந்து விரலை எடுக்கும் போது onmouse up என்கிற event ஆனது வேலை செய்யும்.
இந்த event-க்கு கொடுக்கப்பட்ட function-க்கு சென்று அங்கிருக்கும் alert message-யை நமக்கு காண்பிக்கும்.
onMouseOut:
ஒரு element-இல் இருந்து mouse வெளியே செல்லும்போது onMouseOut generate ஆகும்.
<body>
<script>
function mouse_out()
{
alert("mouse out the box");
}
</script>
<div style="background-color:gray;height:100px;width:100px;" onmouseout="mouse_out()">
mouse out
</div>
</body>
விளக்கம்:
div tag-ல் onmouseout என்கிற event உள்ளது.
அந்த event-க்கு mouse_out()என்கிற function கொடுக்கப்பட்டுள்ளது.
div tag-ன் மீது வைக்கப்பட்டிருந்த mouse arrow-வை div tag-ல் இருந்து வெளியே எடுக்கும்போது onmouseout என்கிற event ஆனது வேலை செய்யும்.
இந்த event-க்கு கொடுக்கப்பட்ட function-க்கு சென்று function உள்ளே கொடுக்கப்பட்டுள்ள alert message ஆனது display செய்யப்படும்.
Keyboard event
keyboard-யை பயன்படுத்தி ஏதேனும் வேலை செய்யும் பொழுது keyboard event உருவாக்கப்படும் .
onkeyDown:
keyboard-ல் ஒரு key-யை விரலை எடுக்காமல் அழுத்திக் கொண்டிருக்கும்போது onkey Down event உருவாக்கப்படும் .
<body>
<script>
function key_down()
{
alert("key press down");
}
</script>
Enter the first text:<input type="text" onkeypress="key_down()">
</body>
onkeyUp:
keyboard-ல் அழுத்தப்பட்ட key-ல் இருந்து விரலை எடுக்கும்போது onkey Up event உருவாக்கப்படும் .
<body>
<script>
function key_up()
{
alert("key press up");
}
</script>
Enter the your name:<input type="text" onkeypress="key_up()">
</body>
onkeyPress:
keyboard- ல் ஒரு key-யை அழுத்திவிட்டு அதிலிருந்து விரலை எடுக்கும்போது onkeyPress event உருவாக்கப்படும் .
<body>
<script>
function key_press()
{
alert("key pressed");
}
</script>
Enter the first text:<input type="text" onkeypress="key_press()">
</body>
Form Event
Onblur:
எப்பொழுதும் ஒரு input fied-ன் உடைய focus-ல் இருந்து வெளியே வருகின்றமோ அப்பொழுது onblur event உருவாகும்.
<form method="post">
Name:<input type="text" onblur="on_blur()">
</from>
<script>
function on_blur()
{
alert("blur...");
}
</script>
Onfocus:
ஒரு input field-யை click செய்யும் போது onFocus event உருவாக்கப்படும்.
<form method="post">
Age:<input type="text" onfocus="on_focus()">
</from>
<script>
function on_focus()
{
alert("focus...");
}
</script>
![[Tamil] How to create React Application](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8d-UOiQT7jAqr1Ep5yEP3cJk7OoBzC-gA7GQbTa1l3Jg6ov48ggfQmlgWj0fSpo8EmQjYgL2z0MRvAsfmcuPHfzK_QEL_7K1ZqbKOmxLEnjg9jH1ZB5AUOKDempIqHlt3obOWhJJNNM/s72-c/node_npm_version.png)
![[Tamil] Width and Height Using CSS In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAylJcAp4QVKwr-YSHaK9UuXEYdDNHoXSmgAMrhouWJzkVUhIE78h1JBTAXuAXaj6JSXWV5uaNGmm4Rf5yrL8a6jyFCucViWXVy4zemDRdfaK4h_pDvXPH1wIFxrvwPaM89qY8Cccivcc/s72-c/width+and+height.jpg)
![[Tamil] CSS Colors In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWik-zqoewl_4rECbqiXTCH8JDOd1-KzBLir6kDtcXvckUGviR8qrVssIbwhVYTjg34tvnEBI1JNGl3t-IS5FLxnnp0N_oRIWtraqnhnMkrp0hsJgEjLLUutR4Je9cZ3Mh7hZx7l0EUPc/s72-c/0b743151-3e0f-4449-ae13-4289151a166f.jpg)
![[Tamil] How to add css in tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBee2UdJwVztGLVJtCKSy8TX3AeWGNCnbpn26IYFVMvEIsKI1aFJyN_kPukHTsoMOQjBTqIXx6w0Zoy85z-tDiNcGYA59-B3_G_3tTFzxwS70M_u_zCP04-uZGPjzk7DzbvFhdi6Csdac/s72-c/add+css.jpg)
No comments:
Post a Comment