எளிய

தமிழில
JavaScript
 த.நதியா
nithyadurai87@gmail.com

மன்னூில
வவெளயீடு :
 கணிியம
அறகககட்டளள
kaniyam.com

அகடடள்ப்ப்ம,
மன்னூலாககம :
பிரசன்னா
udpmprasanna@gmail.com
உரிடளமை :
 Creative Commons Attribution -
ShareAlike 4.0 International
License.

JavaScript என்பத இடளணியப் பககஙகடளள

உருவொககும ஒரு கணிணி வமைாிழ.
இடளத, இந்த நூில எளடளமைியாக அிமகம
வசய்கிறத.

தமிழில ககட்ற்ற வமைன்வபாருகடகள

பற்ிிய தகவெிலகடளள “கணிியம் மன் மைாத
இதழ, 2012 மதில வவெளயிகடடு
வெருகிறத.இதிில வவெளியான JavaScript பற்ிிய
ககடடுடளரககடளள இடளணதத ஒரு மு
புததகமைாக வவெளயிடுவெதிில வபரு மைகிழ்ச
வகாளகிறறாம.

உஙகள கருததகடளளயும, பிடளழை

திருததஙகடளளயும editor@kaniyam.com ககு
மன்னஞ்சில அனுப்பலாம.

http://kaniyam.com/learn-javascript-in-tamil
என்ற மகவெரியிில இருந்த இந்த நூடளல
பதிவிறககம வசய்ியலாம. உஙகள
கருததகடளளயும இஙறக பகிரலாம.

படதத பியன் வபறவும, பிறரு்ன் பகிர்ந்த

மைகிழைவும றவெணடுகிறறாம.

கணிியம இதடளழை வதா்ர்ந்த வெளர்ககும

அடளனதத அன்பர்களககும எமைத நனன்ிகள.

த.சீனிவொசன்
tshrinivasan@gmail.com

ஆசரிியர்
கணிியம

editor@kaniyam.com
உரிடளமை

இந்த நூில கிரிறியடவ் காமைன்ஸ் என்ற

உரிடளமையிில வவெளயி்ப்படுகிறத . இதன்
மூலம, நீஙகள

• ியாரு்னும பகிர்ந்த வகாளளலாம.

• திருததி எுதி வவெளயி்லாம.
• வெணிக ரீதியிலுமியன்படுததலாம.

ஆனாில, மூலப் புததகம, ஆசரிியர் மைற்றும

www.kaniyam.com பற்ிிய விவெரஙகடளள
றசர்தத தர றவெணடும. இறத உரிடளமைகடளள
ியாவெருககும தர றவெணடும. கிரிறியடவ்
காமைன்ஸ் என்ற உரிடளமையிில வவெளயி்
றவெணடும.

நூில மூலம :
http://static.kaniyam.com/ebooks/Learn-
Javascript-in-Tamil.odt

This work is licensed under a Creative

Commons Attribution-ShareAlike 3.0
Unported License.
ஆசரிியர் உடளர

அழைகான, பிலறவெறு வெசதிகள வகாண்

இடளணிய தளஙகடளள உருவொகக HTML, CSS,
JavaScript, Jquery ஆகிிய நகடபஙகடளள
அடப்படள். இடளவெ பற்ி நனான் கற்றவெற்டளற
கணிியம இதிழில வதா்ராக எுதிறனன். அடளவெ
மன்னூலாகவும வவெளவெருவெத மைகிழ்ச.
எஙகள திருமைண நனாளான இன்று இந்த மன்னூில
வவெளவெருவெத கூடுதில மைகிழ்ச.

தமிழில கணிணி நகடபஙகடளளப் பகிர, ஒரு

களமைாக உளள ‘கணிியம’ தளததிில, இதவெடளர
வவெளியான எனத மன்னூிலகளககு வொசகர்கள
தரும ஆதரவு வபருமைகிழ்ச அளககிறத.
“றதமைதரத தமறழைாடளச உலவகிலலாம பரவும
வெடளக வசய்தில றவெணடும்
“பிற நனாகடடு நனிலலிிர் சாததிரஙகள தமழ
வமைாிழயிற் வபியர்ததில றவெணடும்

என்ற பாரதியின் விருப்பஙகடளள

நடளறறவெற்றுவெதிில, என் பஙகளப்பும உளளத
என்பறத, மகவும மைகிழ்ச.

வதா்ர்ந்த ஊககம அளககும என்

குடுமபததினருககும, கணிியம குுவினருககும,
FreeTamilEbooks.com குுவினருககும,
வொசகர்களககும நனன்ிகள.
த. நதியா
கிழைககு தாமபரம
31 அகற்ாபர் 2018

மன்னஞ்சில:
nithyadurai87@gmail.com

வெடளல பதிவு:
http://nithyashrinivasan.wordpress.com
உதாரணஙகள

இந்த நூலிில உளள HTML உதாரணஙகள

ியாவும https://gist.github.com/nithyadurai87
இஙறக உளளன.
வபாருள்ககம
உரிடளமை.............................................................8

ஆசரிியர் உடளர................................................10

உதாரணஙகள.................................................13

1 JavaScript...................................................23

JavaScript – அிமகம...................................24

..................................................................26

JavaScript -ன் அடளமைப்பு............................27

2 Variables & Operators in Javascript...........32

Variables...................................................32
 Variable Declaration & Initialization...33

Local vs Global Variables...................37

Reserved Words...................................40

..................................................................42

3 Operators...................................................43

Arithmetic Operators............................48

Comparison Operators........................49

..............................................................50

Logical (or Relational) Operators........51

Assignment Operators..........................52

Miscellaneous Operator......................53
 4 Conditional and Looping Statements in
javascript........................................................55

Conditional statements..............................55

If…Else................................................56

Switch Case..........................................59

5 Looping statements.....................................63

While & Do while loop........................63

For loop.....................................................67

Break…Continue......................................71

6 Functions & Events in JavaScript...............78

Functions & Events...................................78

Functions without parameters..............83

 Functions with parameters...................83

Events...................................................85

7 Window-வின் பணபுகள..............................91

location.................................................91

Print.....................................................95

8 Dialog Boxes and Exception Handling......98

Dialog Boxes.............................................98

alert():................................................103

confirm():...........................................104

............................................................105

prompt():............................................105

9 Exception Handling.................................108
10 Form Validations, Javascript Objects &
Animations...................................................117

தகவெிலகடளள றசாதிததில...........................117

11 Object Oriented Programming Concepts131

Object:.....................................................132

Methods & Properties:............................132

Encapsulation:.........................................134

Inheritance:.............................................135

Polymorphism:........................................136

.....................................................................138

12 Javascript Objects...................................139

User defined objects...............................139

 Built-In Objects.......................................145

13 Animation...............................................150

14 jQuery - ஓர் அிமகம.............................156

15 jQuery – CSS – Animations...................165

Jquery CSS-ஐ டளகியாளம விதம.............165

சாதாரண வவெளப்பாடு:...........................170

Getting value-ன் மீத வசாடுககினாில

வவெளப்படுவெத:......................................170

Setting value-ன் மீத வசாடுககினாில

மைாறுவெத:.................................................171

Jquery elements-ன் இியககஙகடளளத

றதாற்றுவிககும விதம..............................171
16 jQuery- வெடளலததளப் பககஙகளில
உளளவெற்டளற மைாற்றுதில...............................179

attr( ) மூலம பணபுகடளள மைாற்ிியடளமைததில

................................................................180

text( ) அிலலத html( ) மூலம content-ஐ

மைாற்ிியடளமைததில.....................................187

Offset() மூலம content-ஐ இ்ம மைாற்றுதில

................................................................193

val() மூலம படவெஙகடளள நரப்புதில........198

data() மூலம comments-ஆக ஒருசல

வெரிகடளள இடளணததில..............................205

வெடளலததளப் பககததின் content-ஐ

மைாற்ிியடளமைததில.....................................210

17 jQuery க்ந்த வசிலலும விததடளத

வெடளரியறுததில...............................................219
மடவுடளர.....................................................230

நூலாசரிியரின் பிற மன்னூிலகள...................231

கணிியம அறகககட்டளள................................233

வதாடளல றநனாககு - Vision........................233

பணி இலககு - Mission...........................233

1 JavaScript
JavaScript – அிமகம

JavaScript என்பத ஒரு தனிப்பகட் நரலாகக

வமைாிழ கிடள்ியாத. இத html மைற்றும java
றபான்ற வமைாிழகள்ன் இடளணந்த
பியன்படுததப்படும interpreted நரலாகக
வமைாிழ ஆகும. இத எனறவெ இதடளனக கற்பதற்கு
மன்னர் 'எளிய தமிழில HTML’ எனும
புததகதடளத நனன்கு படதத வி்வும.
அப்றபாததான் உஙகளாில இந்தப் புததகததிில
இ்ம வபற்றுளள அடளனதடளதயும சலபமைாகப்
புரிந்த வகாளள மடயும.

இத ஒரு Client side scripting language ஆகும.

அதாவெத வெடளலததளதடளதப் பியன்படுததப்
றபாகும பியன ரு்ன் வதா்ர்பு வகாளவெதற்கு
சறந்த வமைாிழ. IE, chrome, firefox றபான்ற
அடளனதத உலாவிகளலும இத சறப்பாக்
வசியிலபடும. Javascript எப்றபாதம HTML
program-ன் ஒரு பகுதிியாகறவெ உலாவிகளககு
அிமகப்படுததப்படும. உலாவிகலும
இததடளன ஒரு HTML program றபாலறவெ
இியககும. எனறவெ இதற்வகன்று தனிியாக ஒரு
அடளமைப்பு மடளறறியா, றசமப்பு மடளறறியா
கிடள்ியாத.

படவெதடளதப் பர்ததி வசய்யும பியனர்கள

இடள்யிில ஒரு வபாததாடளன
வசாடுககுமறபாறதா அிலலத ஒரு
இடளணப்பிடளன வசாடுககுமறபாறதா, ஏறதா
ஒன்று நகும வெடளகயிறலறிய Javascript-ஆனத
எப்றபாதம எுதப்படும. அதாவெத பியனர்கள
நகழததம விிஷியஙகளாகறவெ இத அடளமையும.
எனறவெ Animation, Multimedia றபான்ற
இ்ஙகளில இத வபரிதம பியன்படும.
JavaScript -ன் அடளமைப்பு
<script> tag-ன் பணபுகளான language, type
மூலம நனமைத javascript-ஆனத html
வமைாிழயு்ன் இடளணககப்படுகிறத. இந்த
<script>-ஐ html-ில எஙகு றவெணடுமைானாலும
பியன்படுததலாம. வபாதவொக <head>-ககுள
காணப்படும. கீழககண் எடுததககாகடடில
<body>-ககுள பியன்படுததியுளறளாம.

ஒரு வொககிியததிடளன வவெளப்படுததவெதற்கான

javascript நரில பின்வெருமைாறு அடளமையும. இந்த
நரடளல gedit அிலலத notepad-ில எுதி ஒரு
html program-ஐ எவ்வொறு றசமப்றபாறமைா
அவ்வொறற இதடளனயும றசமகக றவெணடும .

(Sample.html)
<html>
<body>
<script
language="javascript"
type="text/javascript">
<!--

document.write("This book will

teach you about JavaScript!")
//-->
</script>
</body>
</html>

HTML-ன் பழைடளமைியான பதிப்புகளில

language=”javascript” type=”text/javascript”
எனும இரணடு பணபுகடளளயும
வவெளப்படள்ியாகக வகாடுகக றவெணடும.
அப்றபாததான் உலாவிியானத இதடளன
javascript-ஆக ஏற்று வசியிலபடும. ஆனாில
தற்றபாடளதிய பதிப்புகளில (XHTML மைற்றும
இடளதியடுதத வெந்தடளவெ) type=”text/javascript”
எனும ஒரு பணபிடளன மைகடடும வகாடுததாில
றபாதமைானத. Language எனும பணபிடளன
வகாடுககத றதடளவெயிிலடளல.

அடுததபடியாக <script> -ககுள வகாடுகக

றவெணடிய விிஷியஙகள அடளனதடளதயும
எதற்காக <!– மைற்றும //–> எனும
குியீடுகளககுள வகாடுததளறளாம என்பறத
நீஙகள மககிியமைாகத வதரிந்த வகாளள
றவெணடும. இடளவெ இரணடும ஒரு
பின்னூகட்ததககான (comment) வதா்ககம
மைற்றும மடவிடளனக குிககும குியீடுகள
ஆகும. சலசமைியம javascript-ஐ அடள்ியாளம
கணடு வகாளளத வதரிியாத உலாவிகளில
இததடளகிய நரிலகள இியஙகுமறபாத,
உலாவிியானத குழைமபி ஏறதா தவெறு எனும
வசய்திடளிய வவெளப்படுததம. இதறவெ
அடளவெவியிலலாம ஒரு பின்னூகட்க
குியீகடடுககுள வகாடுககப்பகடடருப்பின்
javascript-ஐ புரிந்தவகாளள
மடியாவிகட்ாலும, இத ஒரு பின்னூகட்ம
என்படளதப் புரிந்த வகாணடு அதற்குள
உளளவெற்டளறப் புறககணிதத மீதி உளளவெற்டளற
வசியிலபடுததம. எனறவெதான் javascript
நரலானத எப்றபாதம பின்னூகட்க
குியீகடடுககுள வகாடுககப்படுகிறத.

றமைற்கண் program-ஐ browser-ில திறககும

வபாுத அத பின்வெருமைாறு அடளமைகிறத.
2 Variables & Operators
in Javascript

_______________________________________________
__________________________________________

Variables
Javascript-ில உளள variable-ஆனத மதில
நடளலத தரவு வெடளககளான (primitive data
types) எணகள, எுததககள மைற்றும ‘true’ ,
‘false’ என்பத றபான்ற Boolean மைதிப்புகடளள
றசமககும வெிலலடளமை வகாண்த. றமைலும Null
மைற்றும undefined என்பத றபான்ற பிற நடளலத
தரவு வெடளககடளளயும இத ஆதரிககும.
Variable Declaration &
Initialization
Javascript-ில உளள ஒரு variable-ஆனத
எுததககள, எணகள மைற்றும தசமை எணகள
றபான்ற அடளனதத விதமைான தரவுகடளளயும
தானாகறவெ அடள்ியாளம கணடு வகாளளம. பிற
வமைாிழகளில குிப்பிடுவெத றபான்று int, flot,
string என்வறிலலாம வவெளப்படள்ியாக்
வசாிலலத றதடளவெயிிலடளல.

உதாரணம:

<html>
<body>
<script type =
"text/javascript">
<!--
var salary;
salary="25000.00";
 var age = 29,
name='Nithya';

document.write(salary,"<br/>",
name,"-",age)
//-->
</script>
</body>
</html>

ஏறதா ஒரு குிப்பிகட் மைதிப்பிடளனத (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-ன் மைதிப்டளபயும
வவெளப்படுததியுளளத.

எனறவெ இதன் Output பின்வெருமைாறு அடளமையும:

 Local vs Global Variables
அடுததபடியாக ஒறர variable-ககு வவெவ்றவெறு
வெடளகியான மைதிப்புகடளள அதன் எிலடளலடளியப்
வபாறுதத நனமமைாில வெடளரியறுகக மடயும.
பின்வெரும உதாரணததிில salary எனும
variable-ககு ஒரு மைதிப்பிடளன (25000.00)
அளததளறளாம. பின்னர் அறத variable- ஐ ஒரு
function-ககுள பியன்படுததி, றவெறு ஒரு
மைதிப்பிடளன (50000.00) அளததளறளாம.
இவ்வொறு ஒரு சிிய எிலடளலியான function-
ககுள வெடளரியறுககப்படும variable-ன் மைதிப்பு
அதன் எிலடளலககுளறளறிய மடந்த விடும.
இதடளன நனாம "Local variables”
(salary=50000.00) என்று கூறுறவொம. எந்த ஒரு
தனி எிலடளலககுளளம இிலலாமைில வபாதவொக
காணப்படுபடளவெ " Global variables”
(salary=25000.00) ஆகும.

<html>
<body onload =
checkscope();>
<script
type="text/javascript">
<!--
var
salary=25000.00;

document.write(salary);
function
checkscope( )
{
var salary =
"50000.00";
document.write(salary);
}
//-->
</script>
</body>
</html>

இஙகு document.write() மூலம salary-ன்

மைதிப்பிடளன வவெளப்படுததமைாறு function-ககு
உளறளயும, வவெளறியயும வகாடுததளறளாம.
ஆனாில function-ககு உளறள உளள வெரி
மைகடடும வசியிலபடுததப்பகடடு 50000.00 எனும
மைதிப்பிடளன வவெளப்படுததியுளளத.
எப்றபாதம ஒறர variable இருமடளற
பியன்படுததப்பகடடருப்பின், local-ஆக
அடளமைககப்பகட் variable-ன் மைதிப்றப
மதன்டளமை வபரும.

எனறவெ இதன் Output பின்வெருமைாறு அடளமையும:

Reserved Words
ஒரு சல வொர்தடளதகடளள (eg: export, final,
long) நனமமைாில variable-ஆக அிவிகக
மடியாத. ஏவனன்றாில இத றபான்ற
வொர்தடளதகளககு என்வனன்ன மைதிப்புகள
என்படளத javascript-ஐ உருவொககிியவெர்கறள
நியமதத விகட்னர். அடளவெறிய ‘Reserved
Keywords’ எனப்படும. இதன் பகடடியில
பின்வெருமைாறு:

abstract else instan

boolean enum int

break export interf

byte extends long

case false native

catch final new

char finally null

class float packa

const for privat

continue function prote

debugger goto public

default if return

delete implements short

do import static

double in super
 3 Operators

Operator என்றாில இியககுபவெர் என்று வபாருள.

வகாடுககப்பகட் மைதிப்புகடளளப்
வபற்றுகவகாணடு, அதன் மீத ஒருசல
வசியிலபாடுகடளள வசலுததி, நனமைககு றவெணடிய
தகவெிலகடளள வவெளப்படுததம றவெடளலடளிய
வசய்பவெருககு operator என்று வபியர்.
Javascript-ில arithmetic, comparison, logical,
conditional, typeof, assignment றபான்ற
பிலறவெறு வெடளகியான operators உளளன.

கீழககாணும program-ில அடளனதத வெடளக

operator- களன் வசியிலபாடுகளம ஒரு றசரக
வகாடுககப்பகடடுளளத.

<html>
<body>
<script
type="text/javascript">
<!--
var a = 100;
var b = 40;

document.write("Arithmetic -
");
document.write(a
%b);
document.write("<br />");

document.write("Comparison -
");

document.write(a<b);

document.write("<br />");

document.write("Logical - ");

document.write(((b<=100)&&(a>=
100)));

document.write("<br />");
document.write("Conditional -
");
document.write((a
> b) ? a : b);

document.write("<br />");

document.write("typeof - ");

document.write(typeof
a=="string" ? "The value is
string" : "The value is not a
string");

document.write("<br />");
document.write("Assignment -
");
document.write((a
-= b));

document.write("<br />");
//-->
</script>
</body>
</html>

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

இப்றபாத றமைற்கண் program- ககான
விளககதடளதயும, ஒவ்வவொரு வெடளக operator-ன்
கீும வெரும அடளனதத விதமைான குியீடுகளன்
வசியிலபாடுகடளளயும பின்வெருமைாறு காணலாம.
றமைற்கண் அறத program-ில document.write()
எனும வெரிடளிய மைகடடும கீறழை
வகாடுககப்பகடடுளளவொறு மைாற்ி மைாற்ி
இியககி பார்ககவும.

Arithmetic Operators
இதன் கீழ வெரும கூகட்ில, கிழதில, வபருககில,
வெகுததில என்வனன்ன வசய்யும என்பத
உஙகளகறக வதரியும. இதனு்ன் றசர்தத
Modulus (%), Increment( ++), Decrement (–)
எனும 3 வெடளக குியீடுகள உளளன. % என்பத
இரணடு எணகடளள வெகுததில கிடள்ககும
மீதிடளிய வவெளப்படுததம. ++ என்பத
வகாடுககப்பகட் எணணு்ன் ஒரு எணடளணக
கூகடடயும, — என்பத வகாடுககப்பகட்
எணணு்ன் ஒரு எணடளணக கிழததம
வவெளப்படுததம.

Comparison Operators
இரணடு எணகடளள ஒப்பிகடடு அவெற்றுககுள எத
வபரிியத ( >), சிியத (<), சமைமைானத (==),
சமைமிலலாதத (!=), என்பத றபான்ற
தகவெிலகடளள வவெளப்படுதத உதவும. (>=)
என்பத சமைமைானத அிலலத வபரிியத என்றும,
(<=) என்பத சமைமைானத அிலலத சிியத
என்றும வபாருளபடும. இதன் வவெளப்பாடு
எப்றபாதம உணடளமை (true), வபாய் ( false)
எனும இரணடு மைதிப்புகடளளறிய வபற்ிருககும.
Logical (or Relational) Operators
இத உணடளமை, வபாய் எனும 2 மைதிப்புகடளள
ஒப்பீடு வசய்ியப் பியன்படுகிறத. &&
ஒப்பி்ப்படுகின்ற அடளனததம உணடளமை
என்படளத வவெளப்படுததினாில மைகடடுறமை,
இதவும உணடளமை என்படளத வவெளப்படுததம. !!
ஒப்பி்ப்படுபடளவெகளில ஏறதனும ஒன்ின்
வவெளப்பாடு உணடளமை என்று இருந்தாில கூ்
இதவும உணடளமை என்படளத வவெளப்படுததி
விடும. ! என்பத வவெளப்படும விடள்
உணடளமைியாக இருப்பின் வபாய் என்றும,
வபாய்ியாக இருப்பின் உணடளமை என்றும மைாற்ி
வவெளப்படுததம.

Assignment Operators
= என்பத வெலப்புறம இருககும மைதிப்பிடளன,
இ்ப்புறம உளள variable-ககு வெழைஙகிவிடும.
b=40 என்று ஒரு variable காணப்படன், a=b
எனக வகாடுககுமறபாத, a-ன் மைதிப்பு 40 என
மைாிவிடும. பின்னர் a+=b எனக
வகாடுககுமறபாத, ஏற்கனறவெ a-ில உளள 40
எனும மைதிப்பு, b-ில உளள 40-வு்ன்
கூகட்ப்பகடடு a-ன் மைதிப்பு 80 என மைாிவிடும.
a-=b எனக வகாடுககுமறபாத 80-லிருந்த 40
கிழககப்பகடடு மீணடும a-ன் மைதிப்பு 40-கறக
வெந்தவிடும. இப்றபாத பின்வெரும
உதாரணதடளதப் பார்ததாில உஙகளாறலறிய
புரிந்த வகாளள மடயும.
 Miscellaneous Operator
Conditional (or ternary) Operators (a > b) ? a :
b என்பத ஒரு றசாதடளனடளிய வசய்த, அதன்
வவெளீிப்பாடு உணடளமை என இருப்பின், ?-ககு
அடுதத உளள மைதிப்பிடளனயும, வபாய் என
இருப்பின் அந்த மைதிப்பிற்கு அடுதத உளள
மைதிப்பிடளனயும வவெளப்படுததம.

(typeof a==”string” ? "xxx”: "yyy”); என்பத

ஒரு variable-ில உளள மைதிப்பின் வெடளகடளிய
றசாதடளனடளிய வசய்த, அதன் வவெளீிப்பாடு
உணடளமை என இருப்பின், ?-ககு அடுதத உளள
மைதிப்பிடளனயும, வபாய் என இருப்பின் அந்த
மைதிப்பிற்கு அடுதத உளள மைதிப்பிடளனயும
வவெளப்படுததம.. அதாவெத ஒரு variable-
ஆனத "number”, "string”, "Boolean”,
"object”, "function”, "undefined” றபான்ற data
வெடளககள்ன் ஒப்பி்ப்படுகிறத.
 4 Conditional and
Looping Statements in
javascript

Conditional statements
ஒரு variable-ில றசமககப்பகடடுளள
மைதிப்பானத பிலறவெறு நபந்தடளனகறளாடு
ஒப்பி்ப்படும. ஒவ்வவொரு நபந்தடளனயும
பிலறவெறு வெடளகியான நகழவுகடளளக
வகாணடருககும. ஒப்பி்ப்படுகின்ற
மைதிப்பானத எந்த நபந்தடளனறியாடு
ஒததப்றபாகிறறதா, அதனுடள்ிய நகழவிடளன
நகழததம வசியலுககு If…Else மைற்றும
switch_case றபான்ற conditional statements
பியன்படுகின்றன.

If…Else
பின்வெரும உதாரணததிில 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 -மூலம றவெணடிய
எணணிகடளகயிில றசாதடளனகடளள
றசர்ததகவகாணற்யும வசிலலலாம.

<html>
<body>
<script
type="text/javascript">
<!--
 var age = 24;
if((age >= 18) &&
(age <= 21))
{document.write("Legally fit
for marriage");}
else if( age >
21 ){document.write("Legally
and Medically fit for
marriage");}

else{document.write("Not fit
for marriage");}
//-->
</script>
</body>
</html>

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

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

<html>
<body>
<script
type="text/javascript">
<!--
var grade='II';
switch (grade)
{
case 'I':
document.write("Good
job");break;
 case 'II':
document.write("Pretty
good");break;
case 'III':
document.write("Passed");br
eak;
case 'IV':
document.write("Not so
good");break;
case 'V':
document.write("Failed");br
eak;
default:
document.write("Grade is
not valid")
}
//-->
</script>
</body>
</html>
இதன் Output பின்வெருமைாறு:
5 Looping statements

ஒரு குிப்பிகட் நரில வதாகுப்பிடளன மீணடும

மீணடும இியககுவெதற்கு while, for றபான்றடளவெ
பியன்படுகின்றன. இடளவெ இரணடும மதலிில
ஒரு variable-ன் அடப்படள்யிில condition-ஐ
வெலியுறுததம. பின்னர் அந்த condition
வபாய்ியாகும வெடளர variable- ன் மைதிப்பிடளன
ஒவ்வவொன்றாக அதிகரிப்பதன் மூலம
சழைற்சடளிய உருவொககுகின்றன.

While & Do while loop

இதிில while மைற்றும do while எனும இரணடு
வெடளககள உளளன.
கீழககண் எடுததககாகடடில x-ஆனத while-ன்
வசியிலபாகடடடளன விளககுவெதற்கும, y-ஆனத
do while-ன் வசியிலபாகடடடளன விளககுவெதற்கும
பியன்பகடடுளளத. இடளவெ இரணடுககும
மதலிில 0 எனும மைதிப்பு வெழைஙகப்பகடடுளளத.

While loop: இத X- ன் மைதிப்பு 10-ககும

குடளறவொக இருககுமவெடளர அடள்ப்புக குிககுள
{ } உளளவெற்டளற வசியிலபடுததகிறத. மதலிில
Number:0 என்பத வவெளப்படுகிறத. பின்னர்
X++ என்பத x-ன் மைதிப்பு்ன் 1-ஐ கூகடட
அடுதத சழைற்சடளியத தணடுகிறத. எனறவெ
அடுதத சழைற்சயிில, Number:1 என்பதம
வவெளப்படும. எப்றபாத x-ன் மைதிப்பு 10-ஐ
அடள்கிறறதா அப்றபாத அடள்ப்புக குிககுள
{ } உளளவெற்டளற வசியிலபடுததாமைில சழைற்சடளிய
நறுததகிறத.

Do while loop: do-டளவெத வதா்ர்ந்த என்ன

வசியிலபடுதத றவெணடுறமைா, அடளத மதலிில
வகாடுதத வி் றவெணடும. அதன் பின்னர்
condition வெலியுறுததப்படும. இஙகு
அடள்ப்புக குிககுள { } உளளடளவெ y- ன்
மைதிப்பு 5-ககும குடளறவொக இருககும வெடளர
வசியிலபடுததப்படுகின்றன. இடளவெ இரணடும
பார்ப்பதற்கு ஒறர மைாதிரிியாக இருந்தாலும,
அதன் வசியிலமடளறயிில றவெறுபடுகின்றன.

While ஆனத மதலிில றசாதடளன

வபாருந்தகிறதா எனப் பார்தத, பின்னர்
அடள்ப்புககுிககுள உளளவெற்டளற
வசியிலபடுததவெதாில இத ‘’Entry control loop’
எனப்படும.

Do While ஆனத அடள்ப்புககுிககுள

உளளவெற்டளற வசியிலபடுததிிய பின்னறர
றசாதடளன வபாருந்தகிறதா எனப் பார்ப்பதாில,
இத ‘Exit control loop’ எனப்படும. எனறவெ Do
while-ில றசாதடளன வபாருந்தவிிலடளல
என்றாலும, அதனாில அடுதத சழைற்சடளிய
மைகடடுறமை தடுகக மடயுறமை தவிர, ஏற்கனறவெ
அடள்ப்புககுிககுள நன்ந்த மடந்த ஒன்டளற
தவிர்கக இியலாத.

<html>
<body>
<script
type="text/javascript">
<!--
var x = 0;
var y = 0;

while (x < 10)

{document.write("Number:" + x
+ "<br />");x++;}

do{document.write(y);y++;}
while (y < 5);
 //-->
</script>
</body>
</html>

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

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

For…In என்பத for loop-ன் மைற்வறாரு வெடளக.

இத variable-ஐ ஒரு object-ன் வெிழறிய வசலுததி
அதன் அடளனதத பணபுகடளளயும
ஒவ்வவொன்றாக வவெளககாகட் உதவுகிறத. X
எனும variable- ஐ கீழககண்வொறு navigator
எனும object வெிழறிய வசலுததமறபாத அத
அதன் அடளனதத பணபுகடளளயும
ஒவ்வவொன்றாக வவெளப்படுததவெடளதக
காணலாம.

<html>
<body>
<script
type="text/javascript">
<!--
var x;

for(x = 0; x < 10;

x++){document.write(x);}

document.write("<br />");

for (x in
navigator)
{document.write(x+"<br />");}
//-->
 </script>
</body>
</html>

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

Break…Continue

ஒரு சழைற்ச நன்ந்தவகாணடருககுமறபாத,

இடள்யிில ஒரு குிப்பிகட் சழைற்ச எணணின்
றபாத அ்சழைற்சயிலிருந்த வமைாததமைாக
வவெளறியறுவெதற்கு break-ம, அ்சழைற்ச
எணணின் றபாத மைகடடும அடள்ப்புககுிககுள
உளளவெற்டளறத தவிர்தத, அடுதத சழைற்ச
எணணிலிருந்த ஆரமபிப்பதற்கு continue-ம
பியன்படுகின்றன. Continue- டளவெ
பியன்படுததவெதற்கு சலபமைாக, ஒன்றுககும
றமைற்பகட் சழைற்சகள காணப்படன், ஒரு
குிப்பிகட் சழைற்சயின் அருகிில
அடளமைககப்படும identifier-தான் Labels ஆகும.
கீழககண் எடுததககாகடடில x-ஆனத break-ன்
வசியிலபாகடடடளன விளககுவெதற்கும, y-ஆனத
continue-ன் வசியிலபாகடடடளன விளககுவெதற்கும
பியன்பகடடுளளத. Heading: என்பத ஆகும. x,
y இரணடுககும மதலிில 0 எனும மைதிப்பு
வெழைஙகப்பகடடுளளத.

Break: x- ன் மைதிப்பு 10-ககும குடளறவொக

இருககும வெடளர அடள்ப்புக குிககுள { }
உளளவெற்டளற வசியிலபடுததமைாறு ஒரு while
loop அடளமைககப்பகடடுளளத. இதிில x-ன்
மைதிப்பானத 5 எனும சழைற்ச எணடளண
அடள்யுமறபாத சழைற்சடளிய விகடடு
வவெளறியதம வெடளகயிில if (x == 5){break;}
எனும வொககிியம வகாடுககப்பகடடுளளத.

Continue: y- ன் மைதிப்பு 10-ககும குடளறவொக

இருககும வெடளர அடள்ப்புக குிககுள { }
உளளவெற்டளற வசியிலபடுததமைாறு ஒரு while
loop அடளமைககப்பகடடுளளத. இதிில y-ன்
மைதிப்பானத 5 எனும சழைற்ச எணடளண
அடள்யுமறபாத மைகடடும if (y == 5)
{continue;}, அடள்ப்புககுிககுள உளளவெற்டளற
வசியிலபடுததாமைில loop-ன் வதா்ககதடளத
வசன்றடள்ந்த அடுதத சழைற்ச எணணிலிருந்த
சழைல ஆரமபிககிறத.

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) எனும றசாதடளனககுள அ்ஙகாததாில,
இஙகு சழைற்ச மடககப்பகடடுளளத.

<html>
<body>
<script
type="text/javascript">
<!--
var x = 1;
var y = 1;
while (x < 10)
{
if (x == 5)
{break;}
x = x + 1;
document.write(
x + "<br />");
}
document.write("<br />");

while (y < 10)

{
y = y + 1;

if (y == 5)
{continue;}

document.write(y);
}

document.write("<br />");

Heading:

for (var i = 0; i
< 3; i++)
 {

document.write(i + "times"
+ "<br />");
for (var j = 0;
j < 5; j++)
{
if (j == 3)
{continue Heading;}

document.write("Value is: "

+ j + "<br />");
}
}
//-->
</script>
</body>
</html>
இதன் Output பின்வெருமைாறு:
6 Functions & Events in
JavaScript

_______________________________________________
__________________________________________

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()
இியககப்பகடடுவிடும.
7 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.ka
niyam.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 பின்வெருமைாறு:

8 Dialog Boxes and
Exception Handling

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>

இதன் வவெளப்பாடு பின்வெருமைாறு:

 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
 9 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>

view rawtry_catch.html hosted with by GitHub

இதன் வவெளப்பாடு பின்வெருமைாறு:

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:
10 Form Validations,
Javascript Objects &
Animations

_______________________________________________
__________________________________________

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

கீழககண் உதாரணததிில Name, Email, Zip

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

<html>
<head>
<script
type="text/javascript">
<!--
function
validate()
{
if( document.myForm.Name.value
== "" )
{

alert( "Please provide your

name!" );

document.myForm.Name.focus() ;
return
false;
}

var emailID =
document.myForm.EMail.value;
var reg =
/^([A-Za-z0-9_\-\.])+\@([A-Za-
z0-9_\-\.])+\.([A-Za-z]{2,4})
$/;
 if
(reg.test(emailID) == false)
{

alert("Please enter correct

email ID")

document.myForm.EMail.focus()
;
return
false;
}

if( document.myForm.Zip.value
== "" ||

isNaN( document.myForm.Zip.val
ue ) ||
document.myForm.Zip.value.leng
th != 5 )
{

alert( "Please provide a zip

in the format #####." );

document.myForm.Zip.focus() ;
return
false;
}
if( document.myForm.Country.va
lue == "-1" )
{

alert( "Please provide your

country!" );
return
false;
}

return( true );
}
//-->

</script>
</head>

<body>
 <form
action="/cgi-bin/test.cgi"
name="myForm"
onsubmit="return(validate());"
>
<table
cellspacing="2"
cellpadding="2" border="1">

<tr>
<td
align="right">Name</td>
<td><input
type="text" name="Name"
/></td>
</tr>

<tr>
<td
align="right">EMail</td>
 <td><input
type="text" name="EMail"
/></td>
</tr>

<tr>
<td
align="right">Zip Code</td>
<td><input
type="text" name="Zip" /></td>
</tr>

<tr>
<td
align="right">Country</td>
<td>
<select
name="Country">
 <option
value="-1" selected>[choose
yours]</option>
<option
value="1">USA</option>
<option
value="2">UK</option>
<option
value="3">INDIA</option>
</select>
</td>
</tr>

<tr>
<td
align="right"></td>
<td><input
type="submit" value="Submit" /
></td>
</tr>
 </table>
</form>
</body>

</html>
view rawValidations.html hosted
with by GitHub

உளளீகடடுப் வபகடடகள பர்ததி

வசய்ியப்பகடடுளளதா என்பதற்கான றசாதடளன

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 #####.” எனும எ்சரிப்பு வசய்தி
வெருமைாறு வகாடுககப்பகடடுளளத.
11 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-ககு ஓர் சறந்த
உதாரணம ஆகும.
12 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) எனக வகாடுககுமறபாவதிலலாம,
அடளவெ தான் வபற்றுளள மைதிப்பிடளன
வவெளப்படுததவெடளதக காணலாம.

<html>

<head>
<script
type="text/javascript">
<!--
var records = new
Object();
records.name =
"Nithya";
records.age = 29;

function attn(x,
y){
this.name = x;
this.status =
y;
 }
//-->
</script>
</head>

<body>
<script
type="text/javascript">

document.write(records.name +
records.age + "<br>");

var attendance = new

attn("Madhan", "Present");

document.write(attendance.name
+ attendance.status + "<br>");
</script>
</body>
</html>

view rawUser defined objects.html hosted

with by GitHub

அடுதததாக ஒரு 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- ன் பியன்பாடுகடளளக கீறழை காணலாம.

<html>
<head>

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

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

</head>

<body>

<form>
 <input type="button"
value="Click Me"
onclick="a1();" />
</form>

</body>
</html>

view rawBuilt in
objecets_numbers_properties.ht
ml hosted with by GitHub

<html>

<head>
</head>

<body>
 <script
type="text/javascript">

var num=28542;
document.write
(num.toExponential()+'<br/>'+n
um.toExponential(5)+'<br/>'+nu
m.toFixed(2)+'<br/
>'+num.toLocaleString()+'<br/
>'+num.toPrecision(3)+'<br/
>'+num.toString(3)+'<br/
>'+num.valueOf()+'<br/>')

</script>
</body>

</html>

view rawBuilt in
objects_numbers_methods.html hos
ted with by GitHub
இத Number எனும Object-ன் Properties
மைற்றும Methods எப்பட வசியிலபடுகின்றன
என்படளதக காகடடுகிறத. இடளத உஙகளாறலறிய
புரிந்த வகாளள மடயும. இவ்வொறற Boolean,
Strings, Arrays, Date, Math & RegExp
றபான்ற பலவெற்றுககும பிலறவெறு வெடளகியான
Properties மைற்றும Methods உளளன. இவெற்டளற
இடளணியததின் தடளண மூலம வதரிந்த
வகாளளவும.
13 Animation

Animation என்பத வசியிலப்க கூடிய அிலலத

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

கீழககண் உதாரணததிில "Move 1 inch” எனும

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

<html>
<head>
<script
type="text/javascript">
<!--
var imgObj = null;

function init(){
imgObj =
document.getElementById('myIma
ge');

imgObj.style.position=
'relative';
imgObj.style.left = '0px';
}

function
moveinch(){

imgObj.style.left =
parseInt(imgObj.style.left) +
10 + 'px';
}

function
moveRight(){

imgObj.style.left =
parseInt(imgObj.style.left) +
10 + 'px';
 animate =
setTimeout(moveRight,20); //
call moveRight in 20msec
}

function stop(){

clearTimeout(animate);

imgObj.style.left = '0px';
}

window.onload
=init;
//-->

</script>
</head>

<body>
 <form
action="/cgi-bin/test.cgi"
name="myForm"
onsubmit="return(validate());"
>
<img id="myImage"
src="D:\JavaScript\img1.png" /
>
<p>Click button below
to move the image to right</p>
<input type="button"
value="Move 1 inch"
onclick="moveinch();" />
<input type="button"
value="Move right"
onclick="moveRight();" />
<input type="button"
value="Stop" onclick="stop();"
/>
</form>
 </body>
</html>

view rawAnimations.html hosted

with by GitHub
14 jQuery - ஓர் அிமகம

_______________________________________________
__________________________________________

jQuery என்பத Javascript-ஐ டளமைியமைாக டளவெதத

உருவொககப்பகட் ஒரு framework ஆகும.
வெரிவெரிியாக நரிலகடளள எுதி Javascript
வசய்யும ஒருசல றவெடளலகடளள jQuery- ஆனத
சலபமைாக் வசய்தவிடும. அதாவெத ஒரு
றவெடளலடளிய வசய்வெதற்கு பககம பககமைாக
javascript-ில நரிலகள றதடளவெப்படன், அடளவெ
அடளனததம jQuery-ன் ஒரு method-ககுள
அ்ஙகிவிடும. எனறவெ அந்த method-ஐ மைகடடும
அடளழைதத இியககினாில றபாதமைானத. சருஙக
நரில அடதத விரிவொன றவெடளலகடளள வசய்த
மடககும சறப்பிடளன jQuery வபறுகிறத. இத
வெடளலததளப் பககஙகளன் html வமைாிழயு்ன்
வதா்ர்புவகாணடு அதன்மீத methods-ஐ
இியககுவெதன் மூலம பியனர்கள விருமபும
மைாற்றஙகடளள நகழததகிறத. இதறவெ jQuery
றபான்ற frameworks-ன் சறப்பிியிலபு ஆகும.

SQL query-ஐப் பியன்படுததி எப்பட நனமமைாில

நனமைககு றவெணடிய தகவெிலகடளள database-ில
இருந்த வபற்றுகவகாளள மடயுறமைா,
அவ்வொறற jQuery-டளியப் பியன்படுததி, நனமைககு
றவெணடிய html tags-ஐ வெடளலததளப்
பககஙகளலிருந்த நனமமைாில வபற்றுகவகாளள
மடயும. எனறவெதான் இதற்கு jQuery எனப்
வபியர்வெந்தத. அவ்வொறு எடுககப்பகட் tags-ஐ
நனமைககு விருமபிிய விதததிில மைாற்றறவொ
இியககறவொ வசய்ியலாம.

எடுததககாகடடுககு ஒரு பககததின் <p> tags-

ககுள வெடளரியறுககப்பகட் வெரிகடளள மைகடடும நீல
நற எுததககளில மைாற்ற விருமபினாில
அதற்கான நரிலகள பின்வெருமைாறு அடளமையும.

<html>

<head>
<script
src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
jQuery(document).ready(functio
n(){

jQuery("button").click(functio
n(){

var x =
jQuery("p");

x.css("color","blue");

});
});
</script>
</head>

<body>
<p>Getting an
identity is important</p>
 <button>Desired
Changes</button>
</body>

</html>

view raw01_jquery_sample.html hosted

with by GitHub

சாதாரண வவெளப்பாடு:

Getting an identity is important

jQuery ஏற்படுததிிய மைாற்றம:

நரலுககான விளககம:

jQuery-ியானத எப்றபாதம <head>ககுள உளள

<script> tag-ககுள எுதப்பகடடருககும. இதன்
அமசஙகடளள நனமைத program-ில பியன்படுததத
தவெஙகுவெதற்கு மன்னர், jQuery CDN-ஐ இந்த
<script> tag மூலம மதலிில இடளணகக
றவெணடும. Google, Microsoft றபான்றடளவெ
இததடளகிய CDNs (Content Delivery
Network )-ஐ வெழைஙகுகின்றன. இஙகு
பியன்படுததியுளள ajax.googleapis.com/ajax/li
bs/jquery/3.2.1/jquery.min.js என்பத google-
வெழைஙகுகின்ற ஒன்றாகும.

றமைற்கண் எடுததககாகடடில <p> tags- ககுள

Getting an identity is important எனும வெரி
வகாடுககப்பகடடுளளத. jQuery("p”) என்பத
<p> tags- ககுள வெடளரியறுககப்பகடடுளளவெற்டளற
எடுதத x எனும variable-ில றசமதத
டளவெததகவகாளகிறத. பின்னர் css() எனும
method மூலம என்ன வசய்ிய றவெணடும என்பத
வெலியுறுததப்படுகிறத. அதாவெத x-ில றசமககப்
பகடடுளளவெற்டளற நீல நறததிில மைாற்றுவெதற்கு
x.css("color”,”blue”) என்று
வகாடுககப்பகடடுளளத. இஙகு நனாம நகழதத
விருமபும மைாற்றம arguments-ஆக
வெழைஙகப்பகடடுளளத.

நனான் இடளவெ அடளனதடளதயும ஒரு

function() {—} -ககுள எுதியுளறளன்.
பின்னர் Desired Changes எனும
வபாததாடளன வசாடுககுமறபாத இந்த
function இியககப்படும வெடளகயிில
அதடளன அடளமைததளறளன். அதாவெத
jQuery("button”).click()-ககுள இந்த
function-ஐ டளவெததளறளன். ஏவனனிில
அப்றபாததான் உஙகளாில சாதாரணமைாக
எப்பட இருந்தத, jQuery-என்ன மைாற்றம
வசய்தத எனும விததிியாசதடளத புரிந்த
வகாளள மடயும. வெடளலததளப்
பககமைானத முவெதமைாக load
வசய்ியப்பகட் பின்னர் இடளவெவியிலலாம
வசியிலப்த தவெஙகும வெடளகயிில, இடளவெ
அடளனததம jQuery(document).ready()-
ககுள வகாடுககப்பகடடுளளடளத
கவெனிககவும. ஏவனனிில jQuery ஆனத
முகக முகக html tags-ஐ
அடப்படள்ியாகக வகாணடு
இியஙகுவெதாில, jQuery வசியிலப்த
தவெஙகுவெதற்கு மன்னர், இந்த html
பககஙகளானத ஒுஙகான மடளறியான
வெடவெடளமைப்புகள்ன் load
வசய்ியப்படுவெத அவெசியம. எனறவெதான்
இடளவெ அடளனததம document.ready()-
ககுள வகாடுககப்பகடடுளளன.
அவ்வெளவுதான்! இடளவெறிய
அடப்படள்ியான விிஷியஙகள.

றமைலும jQuery() என்பத $ எனும குியீகடடன்

மூலமம குிககப்படும. அதாவெத jQuery(“p”)
என்படளத $("p”) என்றும குிப்பி்லாம.
அவ்வொறற jQuery("p”) மூலம வபறப்படும
tags-ஐ ஒரு variable-ில றசமதத, பின்னர்
அதன்மீத .css() – ஐப் பியன்படுததவெதற்குப்
பதிலாக $("p”).css ("color”,”blue”) என்றும
குிப்பி்லாம. இனிவெரும
எடுததககாகடடுகளில இதறபான்ற
அடளமைப்புமடளறகறள
பியன்படுததப்பகடடருககும.
15 jQuery – CSS –
Animations

_______________________________________________
__________________________________________

Jquery CSS-ஐ டளகியாளம விதம

CSS என்பத HTML மூலம உருவொககப்படும
பககஙகடளள இன்னும அழைகு படுதத உதவும.
அதாவெத எுததககளன் வெடளககள, நறஙகள,
பின்புற வெணணஙகள றபான்ற பிலறவெறு
வெடளகியான அழைகு சார்ந்த விிஷியஙகடளள ஒருறசர
வதாகுததக வகாடுகக இந்த css உதவும.
"அழைகிிய பககஙகளன் ஊற்று் என்பறத
"Cascading style sheets” என்பதன் தமழைாககம
ஆகும. இடளதப் பற்ி முடளமைியாகத வதரிந்த
வகாளள www.kaniyam.com/learn-css-in-
tamil-ebook/ எனும மகவெரிடளிய பார்ககவும.
இதறபான்ற css பணபுகளன் மீத jQuery-டளிய
எவ்வொறு பியன்படுததலாம என்று இதிில
பார்ககலாம.

கீழககண் எடுததககாகடடில css பணபுகள

அடளனததம <style> எனும tag-ககுள
வெடளரியறுககப்பகடடுளளன. இதறவெ css-ஐ
குிப்பிடும மடளற ஆகும. jquery object- ன் மீத
பியன்படுததப்படும .css() என்பத குிப்பிகட்
பணபிடளன வவெளப்படுதத உதவும. அவ்வொறற
.css()-ககுள வகாடுககப்படும மைதிப்புகளககு
ஏற்ப அந்த element-ஐ மைாற்ி அடளமைககவும
வசய்யும. அதாவெத ‘Getting value’ என்பதன்
மீத வசாடுககுமறபாத p1-ன் பின்புற வெணணம
வவெளப்படுமைாறும, ‘Setting value’ -ன் மீத
வசாடுககுமறபாத p1-ன் எுததககளன்
வெடவெம மைாறுமைாறும இஙறக நரிலகள
வகாடுககப்பகடடுளளன.
<html>

<head>
<style type="text/css">
#p1
{
color: blue;
background-color: pink;
font-weight: bold;
}
</style>

<script
src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
 <script>
$
(document).ready(function(){

$("#1").click(function()
{
alert ($
("#p1").css("background-
color"));
});

$("#2").click(function()
{
$
("#p1").css("font","italic
14pt sans-serif");
});

});
</script>
 </head>

<body>
<p id='p1'>Getting an
identity is important</p>
<button
id='1'>Getting value</button>
<button
id='2'>Setting value</button>
</body>

</html>

view raw05_jquery_css.html hosted

with by GitHub
 சாதாரண வவெளப்பாடு:

Getting value-ன் மீத வசாடுககினாில

வவெளப்படுவெத:
 Setting value-ன் மீத வசாடுககினாில
மைாறுவெத:

Jquery elements-ன்
இியககஙகடளளத
றதாற்றுவிககும விதம

வெடளலததளப் பககஙகளில இியககஙகடளள

உருவொககுவெதற்கும, அவ்விியககஙகடளள
கணகூ்ாகக காணபதற்கும உதவும jquery
methods-ஐ இஙகு காணலாம. கீழககண்
எடுததககாகடடில ஒருசல அடப்படள்ியான
இியககஙகளம, அதற்கான விளககஙகளம
வகாடுககப்பகடடுளளன.

<html>

<head>
<script
src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
$
(document).ready(function(){

$
("button").click(function(){
 $
("#p1").hide(600);
$
("#p3").toggle("slow");
$
("#f1").slideUp("slow");
$
("#dv1").fadeOut("slow");
$
("#dv2").fadeTo(400,0.5);
$
("#dv3").animate({"font-
size" : "24pt"}, "slow");
});

});
</script>
</head>

<body>
 <p id='p1'>Getting an
identity is important</p>
<p id='p2'>Doing the
right things at right time</p>
<p id='p3'>Best
things will always comes to
you</p>
<p id="p4">Big data
is the emerging trend</p>
<p id="p5">Data
Science is different from Big
data</p>
<div id="dv1">You can
feel the freedom
everywhere</div>
<div id='dv2'>win-win
situation is not always
possible in family world</div>
<div id="dv3">Come
out of the shell</div>
 <form id='f1'
action="">
<input id="r1"
type="radio" name="gender"
value="female"> Female<br>
<input id="r2"
type="radio" name="gender"
value="male"> Male<br>
</form>
<button>Desired
Changes</button>
</body>

</html>

view raw06_jquery_animations.css hosted

with by GitHub

நரலுககான விளககம:
hide() -ஆனத p1-எனும id-ஐக வகாண்
வெரிடளிய மைடளறககிறத. இதற்குள
வகாடுககப்பகட் 600 என்பத மைடளறததில
நனடள்வபறும விததடளத வமைதவொகக காகட்
உதவும.

toggle() என்பத மைடளறககப்பகட் element-ன்

அடப்படள்யிில மன்னும பின்னும நனகர்வெதற்கு
பியன்படும. இஙகு p3-ன் மீத
பியன்படுததப்பகட் toggle() -ஆனத p1
மைடளறககப்பகட் பின்னர் அதனி்தடளத
அடள்கிறத.

slideUp() என்பத f1-எனும படவெதடளத

றமைற்புறமைாக நனகர்ததி மைடளறககிறத.

fadeOut() என்பத dv1-எனும element-ஐ

வகாஞ்சம வகாஞ்சமைாக மைஙகடதத மைடளறககிறத.

fadeTo(400,0.5) என்பத dv2-எனும element-ஐ

குிப்பிகட் அளவிில மைஙகடதத மைஙகிிய
நடளலயிில அடளமைககிறத.
animate() என்பத நனாமைாக ஒருசல
இியககஙகடளள வெடளரியறுகக உதவும method
ஆகும. இஙகு animate({"font-size” : "24pt”},
"slow”) என்பத dv3 எுததககளன் அளவிடளன
வபரிதபடுதத உதவியுளளத. அவ்வொறு வபரித
படுததம நகழவொனத வமைதவொக நகழை
றவெணடும என்படளத slow உணர்ததகிறத.

சாதாரண வவெளப்பாடு:
jQuery ஏற்படுததிிய மைாற்றம:
16 jQuery- வெடளலததளப்
பககஙகளில உளளவெற்டளற
மைாற்றுதில

_______________________________________________
__________________________________________

jQuery மூலம வெடளலததளப் பககஙகளில

உளளவெற்டளற மைாற்ி அடளமைகக மடயும.
ப்ஙகள, படவெஙகள, வசய்திகள றபான்ற
அடளனதத விதமைான விிஷியஙகடளளயும jQuery-
மூலம அணுகறவொ மைாற்ி அடளமைககறவொ
மடயும. இடளவெ ஒவ்வவொன்றும விவெரமைாகக
கீறழை வகாடுககப்பகடடுளளன.
attr( ) மூலம பணபுகடளள
மைாற்ிியடளமைததில
jQuery மூலம றதர்ந்வதடுககப்பகட் ஒரு object-
ஐ attr() எனும பணபின் மூலம நனாம விருமபிிய
வெடளகயிில மைாற்ி அடளமைகக மடயும. கீழககண்
எடுததககாகடடில "Modify Image”
வபாததாடளன வசாடுககுமறபாத றவெவறாரு
ப்ம திடளரயிில வவெளப்படுமைாறும, "Modify
sizing” -ஐ வசாடுககுமறபாத அதன் நீள அகலம
மைாறும வெடளகயிலும, "Remove sizing” –ஐ
வசாடுககுமறபாத அந்த மைாற்றஙகள நீஙகும
வெடளகயிலும நரிலகள வகாடுககப்பகடடுளளன.

<html>

<head>
 <script

src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
$
(document).ready(function(){

$
("#1").click(function(){
$
("#flower").attr("src","two.jp
g");
});

$
("#2").click(function(){
 $("#flower").attr(
{"src":"two.jpg","height":"100
","width":"500"} );
});
$
("#3").click(function(){
$
("#flower").removeAttr("width
height");
});
});
</script>
</head>

<body>
<button id='1'>Modify
Image</button>
<button id='2'>Modify
sizing</button>
 <button id='3'>Remove
sizing</button>
 <img id='flower'
src="one.jpg">
</body>

</html>

view
raw04_1_jquery_modify_images.html hosted
with by GitHub

இஙகு 1 எனும வபியர் வகாண் "Modify

Image” வபாததாடளன வசாடுககுமறபாத flower
எனும வபியர் வகாண் <img> tag-ன் மூலமைாக
றவெறு ஒரு ப்ம வகாடுககப்பகடடுளளத. இதற்கு
attr() function பியன்பகடடுளளத. எனறவெ
Modify Image என்படளத் வசாடுககுமறபாத
ஏற்கனறவெ உளள ப்ம மைடளறந்த நனாம
வகாடுததளள two.jpg எனும ப்ம வதன்படும.
அவ்வொறற 2 எனும வபியர் வகாண் "Modify
sizing” வபாததாடளன வசாடுககுமறபாத
திடளரயிில உளள ப்ததின் நீள அகலம
மைாறுமைாறு attr() மூலம மீணடும மைதிப்புகள
வகாடுககப்பகடடுளளன.

removeAttr("width height”) என்பத ப்ததின்

நீளம மைற்றும அகலததிில வசய்ியப்பகட்
மைாற்றஙகடளள நீககி அதடளன படளழைிய நடளலககுக
வகாணடுவெரும. 3 எனும வபியர் வகாண்
"Remove sizing” வபாததாடளன
வசாடுககுமறபாத, இந்த மைாற்றம நகும
வெடளகயிில நரில வகாடுககப்பகடடுளளத.

சாதாரண வவெளப்பாடு:
Modify Image-ஐ வசாடுககினாில ஏற்படும
மைாற்றம:

Modify sizing-ஐ வசாடுககினாில ஏற்படும

மைாற்றம:
text( ) அிலலத html( ) மூலம
content-ஐ மைாற்ிியடளமைததில
jQuery object- ன் மீத .text() என்று
வகாடுததாில அதன் text content-ம, .html()
என்று வகாடுததாில அதன் html content-ம
வவெளப்படும. அவ்வொறற .text(" ******* ”)-
ககுள நனாம வகாடுககும விிஷியதடளத அந்த jquery
object-ன் மீத மைாற்ி அடளமைககும. அடளதறிய
.html(" ******* ”)-ககுள வகாடுததாில, அத
html வமைாிழயின் அர்ததஙகடளளப்
புரிந்தவகாணடு அதன்பட மைாற்ி அடளமைககும.

கீழககண் எடுததககாகடடில <b>All the

glitters are not gold </b> -famous proverb
என்பத text( )-ககுள வகாடுககப்படும றபாத
அத அப்படறிய திடளரயிில வவெளப்படுவெடளதயும,
அடளதறிய html( )-ககுள வகாடுததாில <b> </b>-
ன் அர்தததடளதப் புரிந்தவகாணடு
வகாடுககப்பகட் வெரிடளிய வபரிிய எுததககளில
வவெளப்படுததவெடளதயும காணலாம.

<html>

<head>
<script

src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
$
(document).ready(function(){

$
("#1").click(function(){
 alert ( $
("#01").text() );
alert ( $
("#01").html() );
});

$
("#2").click(function(){
$
("#01").text("<b>All the
glitters are not gold </b> -
famous proverb");
});

$
("#3").click(function(){
$
("#01").html("<b>All the
glitters are not gold </b> -
famous proverb");
 });

});
</script>
</head>

<body>
<p id='01'> <b>All
the world is a stage </b> -
famous quote</p>
<button
id='1'>Reading content - text
& html</button>
<button id='2'>Modify
content - text()</button>
<button id='3'>Modify
content - html()</button>
</body>

</html>
view raw04_2_jquery_modify_text vs
html.html hosted with by GitHub

சாதாரண வவெளப்பாடு:

Reading content – text & html -ஐ

வசாடுககினாில வவெளப்படுவெத:
Modify Content – text() -ஐ
வசாடுககினாில மைாறுவெத:

Modify Content – html() -ஐ

வசாடுககினாில மைாறுவெத:
Offset() மூலம content-ஐ இ்ம
மைாற்றுதில
Offset() எனும method-ஆனத jQuery object-
ஆில குிககப்படும element வெடளலததளப்
பககததிில சரிியாக எந்த இ்ததிில உளளத
என்படளத pixel வெடவிில வவெளப்படுததம.
offset({****, ***})- ககுள வகாடுககப்படும
மைதிப்புகளககு ஏற்ப அந்த element-ஐ இ்ம
மைாற்ியும அடளமைககும.

கீழககண் எடுததககாகடடில $("#dv1”)- ஆில

குிககப்படும element இ்த பககததிலிருந்த
எவ்வெளவு வதாடளலவிில உளளத என்படளதயும,
றமைற்புறததிலிருந்த எவ்வெளவு வதாடளலவிில
உளளத என்படளதயும pixel வெடவிில
வவெளப்படுததம. பின்னர் அந்த element-ஐ
{"left”:50, "top”:100} என்பதற்றகற்ப இ்ம
மைாற்ி அடளமைககும.

<html>

<head>
<script
src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
$
(document).ready(function(){

$
("#1").click(function(){
alert ($
("#dv1").offset().left + "," +
$("#dv1").offset().top);
 });

$
("#2").click(function(){
$
("#dv1").offset({"left":50,
"top":100});
});
});
</script>
</head>

<body>
<div id="dv1">Come
out of the shell</div>
<button
id='1'>Reading the current
position</button>
 <button
id='2'>Modifying the
position</button>
 </body>

</html>

view
raw04_3_jquery_modify_positions.html hoste
d with by GitHub

சாதாரண வவெளப்பாடு:

Reading the current position-ஐ

வசாடுககினாில வவெளப்படுததவெத:

Modifying the position-ஐ வசாடுககினாில

மைாற்றுவெத:
val() மூலம படவெஙகடளள
நரப்புதில
val() எனும method-ஆனத விணணப்பப்
படவெஙகளில பர்ததி வசய்ியப்பகட்
மைதிப்புகடளள வவெளப்படுதத உதவுகிறத.
அவ்வொறற val(" ")-ககுள உளள மைதிப்புகடளள
விணணப்பப் படவெஙகளன் மைதிப்புகளாக
படவெப் வபகடடகளககுள வசலுததவும
வசய்கிறத.

கீழககண் எடுததககாகடடில 1 எனும

வபாததாடளன வசாடுககுமறபாத படவெஙகளில
நனாம பர்ததி வசய்த மைதிப்புகள
வவெளப்படுமைாறும, 2 எனும வபாததாடளன
வசாடுககுமறபாத India, Green, male ஆகிிய
மைதிப்புகள படவெஙகளன் மைதிப்புகளாக மைாற்ி
அடளமைககப்படுமைாறும நரிலகள
வகாடுககப்பகடடுளளன.

<html>

<head>
<script

src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
$
(document).ready(function(){

$
("#1").click(function(){
 alert ( $
("#a1").val() );
alert ( $
("#a2").val() );
alert ( $
("[name=gender]:checked").val(
) );
});

$
("#2").click(function(){
$
("#a1").val("India");
$
("#a2").val("Green");
$
("input[name=gender]").val(["m
ale"]);
});
 });
</script>
</head>

<body>
<form action="">
<input id="a1"
type="text" name="address"
value="Enter Address..."/>
<select id="a2"
name="color" size="3">

<option>Red</option>
<option>Green</
option>

<option>Blue</option>
 </select>
<input id="r1"
type="radio" name="gender"
value="female"> Female
<input id="r2"
type="radio" name="gender"
value="male"> Male
</form>
<button
id='1'>Reading the
values</button>
<button
id='2'>Modifying the
values</button>
</body>

</html>

view
raw04_4_jquery_modify_forms.html hosted
with by GitHub
சாதாரண வவெளப்பாடு:

பியனர்கள வகாடுககும மைதிப்புகள

Reading the values-ஐ வசாடுககினாில
வவெளப்படுததவெத:

இடளதத வதா்ர்ந்த அடுததடுதத மைதிப்புகள

வவெளப்படும.

Modifying the values-ஐ வசாடுககினாில

மைாற்றுவெத:
 data() மூலம comments-ஆக
ஒருசல வெரிகடளள
இடளணததில
data(" ")-ககுள வகாடுககப்படும வெரிகள ஒரு
popup வபகடட மூலம comment-ஆகத
வதன்படும. கீழககண் எடுததககாகடடில p1
எனும id-ஐக வகாண் paragraph மீத
வசாடுககுமறபாத comments வவெளப்படுமைாறு
நரிலகள வகாடுககப்பகடடுளளன. இந்த
comments-ஆனத மைடளறமகமைாக p1- வு்ன்
இடளணந்திருககும. p1-ன் மீத வசாடுககினாில
மைகடடுறமை அத வதன்படும. ‘Remove Comment’
-ன் மீத வசாடுககுமறபாத p1- வு்ன்
மைடளறமகமைாக இடளணந்திருககும comments
நீஙகுமைாறு நரிலகள எுதப்பகடடுளளன.
<html>

<head>
<script

src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
$
(document).ready(function(){
var a = {
note1 : "Ahhh
gaaga gaagaa",
note2 : "Adi
sakka",
toString :
function ()
 {
return
this.note1 + "\n" +
this.note2;
}
};

$
("#p1").data("notes",a);

$
("#p1").click(function(){
var b = $
("#p1").data("notes");
alert ( b );
});

$
("#1").click(function(){
 $
("#p1").removeData("notes");
});

});
</script>
</head>

<body>
<p id='p1'>Finally the
girl the one who is doing
everything from the begining</
p>
<button id='1'>Remove
comment</button>
</body>

</html>
view
raw04_5_jquery_modify_comments.html host
ed with by GitHub

சாதாரண வவெளப்பாடு:

Finally the girl எனத தவெஙகும வெரியின் மீத

வசாடுககினாில வதன்படும comment:

Remove comment வபாததாடளன

வசாடுககிியபின் Finally the girl எனத தவெஙகும
வெரியின் மீத வசாடுககினாில வதன்படுவெத:
 வெடளலததளப் பககததின்
content-ஐ மைாற்ிியடளமைததில
வெடளலததளப் பககஙகளில உளள வெரிகடளள
றமைலும கீுமைாக இ்ம மைாற்றம வசய்தில, புதிிய
வெரிகடளள இடளணததில, ஏற்கனறவெ உளள
வெரிகடளள நனகவலடுதத மீணடும இடளணததில,
ஒருசல வெரிகடளள நீககுதில றபான்ற பிலறவெறு
றவெடளலகடளள வசய்வெதற்கு உதவும jQuery
methods-ஐ இந்தப் பகுதியிில பார்ககலாம.

<html>
<head>
 <script
src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
$
(document).ready(function(){

$
("button").click(function(){
$("#p1").before($
("#p2"));
$("<p>All the
<i>leaves</i> are falling
down</p>").insertBefore($
("#p3"));
$
("#p3").clone().attr("id","abc
d_copy").appendTo($("#dv1"));
 $("#p4").wrap($
("#p5"));
$
("#dv2").replaceWith($
("#p5"));
$("#f1").remove();
$
( $.parseHTML("<i>All the
leaves</i> are falling
down") ).insertAfter($
("#dv3"));
});

});
</script>
</head>

<body>
 <p id='p1'>Getting an
identity is important</p>
<p id='p2'>Doing the
right things at right time</p>
<p id='p3'>Best
things will always comes to
you</p>
<p id="p4">Big data
is the emerging trend</p>
<p id="p5">Data
Science is different from Big
data</p>
<div id="dv1">You can
feel the freedom
everywhere</div>
<div id='dv2'>win-win
situation is not always
possible in family world</div>
<div id="dv3">Come
out of the shell</div>
 <form id='f1'
action="">
<input id="r1"
type="radio" name="gender"
value="female"> Female<br>
<input id="r2"
type="radio" name="gender"
value="male"> Male<br>
</form>
<button>Desired
Changes</button>
</body>

</html>

view
raw04_6_jquery_modify_webcontent.html hos
ted with by GitHub

நரலுககான விளககம:
 before() -ஆனத p2-எனும id-ஐக வகாண்
வெரிடளிய p1-ககு மன்னாில அடளமைககிறத.

insertBefore() -ஆனத All the leaves are falling

down எனும புதிிய வெரிடளிய p3-ககு மன்னாில
இடளணககிறத. இந்தப் புதிிய வெரிியானத $(" ") -
ககுள சாதாரண html tag-ஐ வகாடுப்பதன் மூலம
உருவொககப்படும.

Clone() -ஆனத p3 id-ஐக வகாண் வெரிடளிய

நனகவலடுதத உ்னடியாக .attr() மூலம அதன் id-
ஐ மைகடடும மைாற்ி விடுகிறத. ஏவனனிில ஒறர id-
ில இரணடு elements இருப்பத பல
குழைப்பஙகடளள விடளளவிககும. பின்னர்
நனகவலடுககப்பகட் வெரிடளிய dv1-ககுப் பின்னாில
appendTo() மூலம இடளணககிறத.

wrap() என்பத p4, p5 எனும இரணடள்யும

ஒன்றாக இடளணககிறத.
replacewith() என்பத dv2-ஐ நீககிவிகடடு p5-ஐ
அந்த இ்ததிில அடளமைககிறத. அவ்வொறு
அடளமைககப்படுமறபாத p5-வு்ன் றசர்ந்த p4-ம
இ்மவபறுவெடளத கவெனிககவும. ஏவனனிில
இதற்கு மந்டளதிய வெரியிில p4,p5 இரணடும
wrap வசய்ியப்பகட்றத இதற்குக காரணம
ஆகும.

remove() -ஆனத f1-எனும id-ஐக வகாண்

படவெதடளத நீககுகிறத.

$.parseHTML(" ") –ஆனத இதற்குள

வகாடுககப்பகடடுளள html-வமைாிழயிடளனப்
புரிந்தவகாணடு அதற்றகற்ற வெடவிில
வவெளப்படுததம.$( )-ககுள parseHTML()
வெிழறிய வகாடுககாமைில வவெறுவமைன
வகாடுதறதாமைானாில All the leaves எனும வெரி
மைகடடுறமை வவெளப்படும. are falling down
எனும வெரி விடுபகடடுவிடும. இடளவெ அடளனததம
desired changes-ஐ வசாடுககினாில
நனடள்வபறும.

இதன் சாதாரண வவெளப்பாடு:

Desired Changes – ஐ வசாடுககினாில

மைாறுவெத:
17 jQuery க்ந்த வசிலலும
விததடளத வெடளரியறுததில

jQuery க்ந்த வசிலலும விததடளத பின்வெரும

இரணடு நடளலகளில வெடளரியறுககலாம.

•jQuery Object-ஆக
வெடளரியறுககப்பகடடுளளவெற்றுககுள க்ந்த
வசிலலில

•jQuery Object-ஆக
வெடளரியறுககப்பகடடுளளவெற்ின்
உகடவசய்திகளாக இருப்பவெற்றுககுள க்ந்த
வசிலலில
இந்த இரணடற்கும each() எனும method
பியன்படுகிறத.

jQuery Object-ஆக
வெடளரியறுககப்பகடடுளளவெற்றுககுள க்ந்த
வசிலலில:

சாதாரணமைாக jQuery object

என்றடளழைககப்படும $("p”) என்பத
வெடளலததளப்பககததிில உளள ஒவ்வவொரு <p> -
ஐயும க்ந்த வசன்று நனமைககு றவெணடிய
மைாற்றஙகடளள நகழததம. அவ்வொறு க்ந்த
வசிலலுமறபாத நனமைத விருப்பததிற்றகற்ப,
ஒருசல <p>-ஐத தவிர்தத ஒருசல <p>-ஐ
மைகடடும மைாற்றுவெத எப்பட என்று இந்தப்
பகுதியிில பார்ககப் றபாகிறறாம. கீழககண்
எடுததககாகடடில அடளனதத <p>-ன் மீதம
மைாற்றஙகடளள நகழததாமைில ஒரு குிப்பிகட்
நறததிில உளள <p>-ஐ மைகடடும சகப்பு நறததிில
மைாற்றம வசய்வெதற்கான நரில
வகாடுககப்பகடடுளளத.

$("p”).each (function
(index,element)
{if ($(element).css ("color”)
=== "rgb(0, 191, 255)”)
{$(element).css
("color”,”rgb(255, 0, 0)”);}
});

$("p”) என்பத jquery-ஐ அடளனதத <p>-ன்

வெிழறிய நன்ததி் வசிலலும. $("p”).each() {…..}
என்பத அந்த இியககதடளத வவெளப்படள்ியாகக
குிப்பிகடடு, ஒவ்வவொரு இியககததிலும
றசாதடளனடளிய நகழததம. இதற்குள ஒரு
function() {…..} வகாடுககப்பகடடுளளத. அத
index,element எனும இரணடு parameters-ஐக
வகாணடுளளத. Index-என்பத அடுததடுதத
சழைற்சடளியயும, element என்பத அந்தந்த
சழைற்சயிில உளள <p> -ஐயும குிககிறத. இந்த
function()-ககுள வெடளரியறுககப்பகடடுளள if-
ஆனத ஊதா நறததிில உளள <p>-ஐ மைகடடும
சவெப்பு நறததிில மைாற்ற உதவும றசாதடளனடளிய
நகழததகிறத. எனறவெதான் ஊதா நறததிில
உளள "Doing the right things at right time”
என்பத சவெப்பு நறததிில மைாியுளளத.
இவ்வொறாக jQuery object-ஆனத அதன்
elements வெிழறிய இியஙகி் வசிலலும விததடளத
நனமமைாில ககடடுப்படுததறவொ, மைாற்றறவொ
மடயும.
jQuery Object-ஆக
வெடளரியறுககப்பகடடுளளவெற்ின் கீழ
உளளவெற்றுககுள க்ந்த வசிலலில:

சல சமைியஙகளில jQuery object-ஆனத Ordered

list, Unordered list றபான்றடளவெியாக இருப்பின்,
அதன் கீழ வெடளரியறுககப்பகடடுளள
விிஷியஙகளககுள ஒவ்வவொன்றாக் வசன்று
ஒவ்வவொரு விதமைான மைாற்றஙகடளள நகழததவெத
எப்பட என்று இஙகு பார்ககலாம.

$("#beverages”).attr ("type”,”circle”) என்பத

beverages எனும id-ஐக வகாண் unordered
list-ன் கீழ உளள அடளனதடளதயும
வெகட்வெடவெதடளத மன்னிறுததி
வெரிடளசப்படுததகிறத. இதற்கு each() என்பத
றதடளவெயிிலடளல. ஆனாில இடளவெ அடளனதடளதயும
1.2.3 எனும எணகளன் அடப்படள்யிில
வெரிடளசப்படுததப்ப் றவெணடுவமைனிில அதற்கு
each() என்பத பின்வெருமைாறு பியன்படும.
$("#beverages”).children().each
( function(i,x) {$
(x).text((i+1)+”.”+$
(x).text());} );

றமைலும $("li:first-child”) என்பத <li> -ில

மதலாவெதாக வெடளரியறுககப்பகடடுளளவெற்ிலும,
$("li:first-child”).next() என்பத
இரண்ாவெதாக
வெடளரியறுககப்பகடடுளளவெற்ிலும, $("li:first-
child”).siblings() என்பத மதலாவெடளத
விகடடுவிகடடு அதன்கீழ உளள அடளனததிலும,
நனாம குிப்பிகடடுளள மைாற்றஙகடளள்
வசய்தளளத. இவ்வொறாக jQuery object-ன் கீழ
உளளவெற்ிில நனமமைாில மைாற்றஙகடளள் வசய்ிய
மடயும.
இடளவெ அடளனதடளதயும உளள்ககிிய ஒரு
எடுததககாகடடு கீறழை வகாடுககப்பகடடுளளத.

<html>

<head>
<script
src="https://ajax.googleapis.c
om/ajax/libs/jquery/3.2.1/jque
ry.min.js">
</script>
<script>
$
(document).ready(function(){
$
("button").click(function(){
 $
("#beverages").attr
("type","circle");

$
("#beverages").children().each
( function(i,x) {$
(x).text((i+1)+"."+$
(x).text());} );

$("li:first-
child").css ("background-
color","skyblue");

$("li:first-
child").next().css
("color","red");

$("li:first-
child").siblings().css
("background-
color","lightgreen");

$("p").each
(function (index,element)
{if ($
(element).css ("color") ===
"rgb(0, 191, 255)")
{$
(element).css
("color","rgb(255, 0, 0)");}
});
});
});
</script>
</head>

<body>
<ul id='beverages'>
<li>Coffee</li>
 <li>Tea</li>
<li>Milk</li>
</ul>
<p style="color:rgb(0,
191, 255)">Doing the right
things at right time</p>
<p>Best things will
always comes to you</p>
<button>Desired
Changes</button>
</body>

</html>

view raw03_jquery_traverse.html hosted

with by GitHub
சாதாரண வவெளப்பாடு:

Desired Changes-ஐ வசாடுககினாில ஏற்படும

மைாற்றம:
 மடவுடளர

இந்த நூில JavaScript, JQuery ககான ஒரு

அிமகம மைகடடுறமை. இடளவெ பற்ி
இடளணியததிில பிலறவெறு பா்ஙகளம
காவணாளகளம கிடள்ககின்றன. அவெற்டளற
வதா்ர்ந்த படதத, கற்று, பிலறவெறு சாதடளனகள
புரிிய அடளனவெருககும வொழததகள.
நூலாசரிியரின் பிற
மன்னூிலகள

http://freetamilebooks.com/authors/
nithyaduraisamy/
கணிியம அறகககட்டளள

வதாடளல றநனாககு - Vision

தமழ வமைாிழ மைற்றும இனககுுககள சார்ந்த

வமைய்நகர்வெளஙகள, கருவிகள மைற்றும
அிவுதவதாகுதிகள, அடளனவெருககும ககட்ற்ற
அணுககததிில கிடள்ககும சழைில

பணி இலககு - Mission

அிவிியில மைற்றும சமூகப் வபாருளாதார
வெளர்்சககு ஒப்ப, தமழ வமைாிழயின் பியன்பாடு
வெளர்வெடளத உறுதிப்படுததவெதம, அடளனதத
அிவுத வதாகுதிகளம, வெளஙகளம ககட்ற்ற
அணுககததிில அடளனவெருககும
கிடள்கக்வசய்தலும.

றமைற்கண் வதாடளல றநனாககு , பணி

இலககுகடளள றநனாககி பியணிகக, கணிியம
குுவினர், கணிியம அறகககட்டளளடளியத
வதா்ஙகியுளறளாம. கணிியம இதிழில
ககடடுடளரகள வவெளயிடுதில,
FreeTamilEbooks.com தளததிில மன்னூிலகள
வவெளயிடுதில, தமுககான ககட்ற்ற
வமைன்வபாருகடகள, பிற வெளஙகள உருவொககுதில,
இவெற்றுககான இடளணிய வெளஙகடளளப்
றபணுதில, விககி மூலம தளததிில
மன்னூிலகடளள சீராககி வவெளயிடுதில, ககட்ற்ற
வமைன்வபாருகடகளககு பரப்புடளர நகழ்சகள
நன்தததில ஆகிிய பணிகடளள வசவ்வெறன வசய்ிய
கணிியம அறகககட்டளள ஆவென வசய்யும.

றமைற்கண் பணிகடளள ஆதரிகக உஙகடளள

நனன்வகாடள்கடளள றவெணடுகிறறாம. பின்வெரும
வெஙகிக கணககிில உஙகள நனன்வகாடள்கடளள
வசலுததி, editor@kaniyam.com ககு ஒரு
மன்னஞ்சில அனுப்ப றவெணடுகிறறாம.

மகக நனன்ி !

Kaniyam Foundation
Account Number : 606101010050279
Union Bank Of India
West Tambaram, Chennai
IFSC - UBIN0560618