From b31151a4104528d03dc5a99bff17976d96109b30 Mon Sep 17 00:00:00 2001 From: Vignesh S Date: Sat, 29 Aug 2026 16:13:49 +0530 Subject: [PATCH 1/6] feat(i18n): add Tamil language translation --- LANGS.md | 3 +- _layouts/website/languages.html | 2 +- book.json | 4 + ta/Copyright.md | 31 + ta/Credits.md | 27 + ta/Dedication.md | 12 + ta/Preface.md | 17 + ta/README.md | 53 + ta/References.md | 40 + ta/SUMMARY.md | 173 +++ ta/animation-resources/README.md | 50 + ta/animation-resources/animejs.md | 106 ++ ta/animation-resources/framer-motion.md | 109 ++ ta/animation-resources/gsap.md | 79 ++ ta/animation-resources/react-spring.md | 103 ++ ta/animation-resources/threejs.md | 103 ++ ta/animation-resources/velocityjs.md | 82 ++ ta/arrays/README.md | 89 ++ ta/arrays/for-each.md | 46 + ta/arrays/indices.md | 35 + ta/arrays/join.md | 38 + ta/arrays/length.md | 45 + ta/arrays/map.md | 48 + ta/arrays/pop.md | 40 + ta/arrays/push.md | 41 + ta/arrays/reverse.md | 40 + ta/arrays/shift.md | 35 + ta/arrays/slice.md | 50 + ta/arrays/sort.md | 49 + ta/arrays/spread.md | 32 + ta/arrays/unshift.md | 30 + ta/basics/README.md | 33 + ta/basics/comments.md | 80 ++ ta/basics/equality.md | 56 + ta/basics/types.md | 103 ++ ta/basics/variables.md | 116 ++ ta/beginner-projects/digital-clock.md | 31 + ta/beginner-projects/electronic-drum-kit.md | 32 + ta/beginner-projects/expense-tracker.md | 43 + ta/beginner-projects/image-search.md | 31 + ta/beginner-projects/monthly-calendar.md | 31 + .../random-photos-generator.md | 31 + .../rock-paper-scissors-game.md | 31 + ta/beginner-projects/simon-says.md | 39 + ta/beginner-projects/simple-stopwatch.md | 32 + ta/beginner-projects/tip-calculator.md | 30 + ta/beginner-projects/video-trailer-popup.md | 32 + ta/beginner-projects/weather-app.md | 32 + ta/beginner-projects/whack-a-mole.md | 42 + ta/behind-scenes/README.md | 23 + ta/behind-scenes/call-stack.md | 73 ++ ta/behind-scenes/engine.md | 92 ++ ta/behind-scenes/event-loop.md | 131 ++ ta/behind-scenes/execution-context.md | 127 ++ ta/behind-scenes/memory-heap.md | 86 ++ ta/behind-scenes/runtime-environment.md | 112 ++ ta/browser-object-model-bom/README.md | 28 + ta/browser-object-model-bom/cookies.md | 44 + ta/browser-object-model-bom/history.md | 42 + ta/browser-object-model-bom/location.md | 33 + ta/browser-object-model-bom/navigator.md | 31 + ta/browser-object-model-bom/popup.md | 38 + ta/browser-object-model-bom/screen.md | 28 + ta/browser-object-model-bom/window.md | 24 + ta/classes/README.md | 43 + ta/classes/access-modifiers.md | 65 + ta/classes/composition.md | 55 + ta/classes/inheritance.md | 42 + ta/classes/static.md | 28 + ta/complexity/README.md | 34 + ta/complexity/space-complexity.md | 70 ++ ta/complexity/time-complexity.md | 56 + ta/conditional/README.md | 23 + ta/conditional/comparators.md | 39 + ta/conditional/concatenate.md | 28 + ta/conditional/else.md | 62 + ta/conditional/if.md | 134 ++ ta/conditional/switch.md | 95 ++ ta/date-and-time.md | 82 ++ ta/design-patterns/README.md | 17 + ta/design-patterns/behavioral-patterns.md | 1096 +++++++++++++++++ ta/design-patterns/creational-patterns.md | 416 +++++++ ta/design-patterns/structural-patterns.md | 650 ++++++++++ ta/document-object-model/README.md | 17 + ta/document-object-model/dom-api.md | 49 + ta/document-object-model/dom-manipulation.md | 222 ++++ .../listening-of-events.md | 138 +++ ta/error-handling/README.md | 65 + ta/error-handling/async_errorhandling.md | 184 +++ ta/error-handling/try...-catch.md | 42 + ta/error-handling/try...catch...finally.md | 67 + ta/es6-concepts/README.md | 33 + ta/es6-concepts/arrow-functions.md | 84 ++ ta/es6-concepts/destructuring.md | 62 + ta/es6-concepts/let-const.md | 60 + ta/es6-concepts/map.md | 45 + ta/es6-concepts/template-literals.md | 43 + ta/events.md | 77 ++ ta/exercises/README.md | 21 + ta/exercises/concatenation.md | 46 + ta/exercises/conditional-statements.md | 30 + ta/exercises/console.md | 64 + ta/exercises/constants.md | 41 + ta/exercises/fizzbuzz-problem.md | 49 + ta/exercises/functions.md | 25 + ta/exercises/get-the-titles.md | 35 + ta/exercises/multiplication.md | 31 + ta/exercises/objects.md | 52 + ta/exercises/user-input-variables.md | 22 + ta/file-system/README.md | 59 + ta/functions/README.md | 58 + ta/functions/closures.md | 63 + ta/functions/getters-setters.md | 105 ++ ta/functions/higher-order.md | 87 ++ ta/functions/hoisting.md | 64 + ta/functions/recursive-functions.md | 58 + ta/functions/rest-operator.md | 75 ++ ta/functions/set-interval.md | 58 + ta/functions/set-timeout.md | 38 + ta/functions/this-keyword.md | 124 ++ ta/interview-questions/README.md | 15 + ta/interview-questions/advance-level.md | 559 +++++++++ ta/interview-questions/basic-level.md | 884 +++++++++++++ ta/interview-questions/intermediate-level.md | 441 +++++++ ta/json.md | 45 + ta/loops/README.md | 36 + ta/loops/break.md | 56 + ta/loops/continue.md | 22 + ta/loops/dowhile.md | 26 + ta/loops/for.md | 176 +++ ta/loops/while.md | 29 + ta/miscellaneous/Added getters and setters.md | 60 + ta/miscellaneous/ECMA-script.md | 109 ++ ta/miscellaneous/README.md | 24 + ta/miscellaneous/api-ajax.md | 167 +++ ta/miscellaneous/building-and-deploying.md | 66 + ta/miscellaneous/callback.md | 109 ++ ta/miscellaneous/currying.md | 35 + ta/miscellaneous/debugging.md | 109 ++ ta/miscellaneous/global-footprint.md | 26 + ta/miscellaneous/hoisting.md | 28 + ta/miscellaneous/linked-list.md | 130 ++ ta/miscellaneous/polyfills-and-transpilers.md | 63 + ta/miscellaneous/single-thread-nature.md | 88 ++ ta/miscellaneous/template-literals.md | 34 + ta/miscellaneous/testing.md | 89 ++ ta/modules.md | 78 ++ ta/numbers/README.md | 46 + ta/numbers/advanced.md | 112 ++ ta/numbers/math.md | 73 ++ ta/numbers/operators.md | 397 ++++++ ta/objects/README.md | 42 + ta/objects/constructor-functions.md | 95 ++ ta/objects/constructor-property.md | 67 + ta/objects/delete.md | 36 + ta/objects/dynamic-nature.md | 114 ++ ta/objects/enumeration.md | 48 + ta/objects/factory-functions.md | 106 ++ ta/objects/mutable.md | 33 + ta/objects/properties.md | 45 + ta/objects/prototype.md | 56 + ta/objects/reference.md | 65 + ta/promise-async-await/README.md | 14 + ta/promise-async-await/async-await.md | 47 + ta/promise-async-await/promise.md | 92 ++ ta/regular-expression.md | 268 ++++ ta/resources.md | 74 ++ ta/server-side/README.md | 52 + ta/server-side/nodejs.md | 108 ++ ta/server-side/server-side-rendering.md | 34 + ta/strings/README.md | 61 + ta/strings/charAt.md | 52 + ta/strings/concat.md | 32 + ta/strings/create.md | 64 + ta/strings/length.md | 25 + ta/strings/replace.md | 30 + ta/strings/split.md | 46 + ta/strings/substring.md | 59 + 178 files changed, 14672 insertions(+), 2 deletions(-) create mode 100644 ta/Copyright.md create mode 100644 ta/Credits.md create mode 100644 ta/Dedication.md create mode 100644 ta/Preface.md create mode 100644 ta/README.md create mode 100644 ta/References.md create mode 100644 ta/SUMMARY.md create mode 100644 ta/animation-resources/README.md create mode 100644 ta/animation-resources/animejs.md create mode 100644 ta/animation-resources/framer-motion.md create mode 100644 ta/animation-resources/gsap.md create mode 100644 ta/animation-resources/react-spring.md create mode 100644 ta/animation-resources/threejs.md create mode 100644 ta/animation-resources/velocityjs.md create mode 100644 ta/arrays/README.md create mode 100644 ta/arrays/for-each.md create mode 100644 ta/arrays/indices.md create mode 100644 ta/arrays/join.md create mode 100644 ta/arrays/length.md create mode 100644 ta/arrays/map.md create mode 100644 ta/arrays/pop.md create mode 100644 ta/arrays/push.md create mode 100644 ta/arrays/reverse.md create mode 100644 ta/arrays/shift.md create mode 100644 ta/arrays/slice.md create mode 100644 ta/arrays/sort.md create mode 100644 ta/arrays/spread.md create mode 100644 ta/arrays/unshift.md create mode 100644 ta/basics/README.md create mode 100644 ta/basics/comments.md create mode 100644 ta/basics/equality.md create mode 100644 ta/basics/types.md create mode 100644 ta/basics/variables.md create mode 100644 ta/beginner-projects/digital-clock.md create mode 100644 ta/beginner-projects/electronic-drum-kit.md create mode 100644 ta/beginner-projects/expense-tracker.md create mode 100644 ta/beginner-projects/image-search.md create mode 100644 ta/beginner-projects/monthly-calendar.md create mode 100644 ta/beginner-projects/random-photos-generator.md create mode 100644 ta/beginner-projects/rock-paper-scissors-game.md create mode 100644 ta/beginner-projects/simon-says.md create mode 100644 ta/beginner-projects/simple-stopwatch.md create mode 100644 ta/beginner-projects/tip-calculator.md create mode 100644 ta/beginner-projects/video-trailer-popup.md create mode 100644 ta/beginner-projects/weather-app.md create mode 100644 ta/beginner-projects/whack-a-mole.md create mode 100644 ta/behind-scenes/README.md create mode 100644 ta/behind-scenes/call-stack.md create mode 100644 ta/behind-scenes/engine.md create mode 100644 ta/behind-scenes/event-loop.md create mode 100644 ta/behind-scenes/execution-context.md create mode 100644 ta/behind-scenes/memory-heap.md create mode 100644 ta/behind-scenes/runtime-environment.md create mode 100644 ta/browser-object-model-bom/README.md create mode 100644 ta/browser-object-model-bom/cookies.md create mode 100644 ta/browser-object-model-bom/history.md create mode 100644 ta/browser-object-model-bom/location.md create mode 100644 ta/browser-object-model-bom/navigator.md create mode 100644 ta/browser-object-model-bom/popup.md create mode 100644 ta/browser-object-model-bom/screen.md create mode 100644 ta/browser-object-model-bom/window.md create mode 100644 ta/classes/README.md create mode 100644 ta/classes/access-modifiers.md create mode 100644 ta/classes/composition.md create mode 100644 ta/classes/inheritance.md create mode 100644 ta/classes/static.md create mode 100644 ta/complexity/README.md create mode 100644 ta/complexity/space-complexity.md create mode 100644 ta/complexity/time-complexity.md create mode 100644 ta/conditional/README.md create mode 100644 ta/conditional/comparators.md create mode 100644 ta/conditional/concatenate.md create mode 100644 ta/conditional/else.md create mode 100644 ta/conditional/if.md create mode 100644 ta/conditional/switch.md create mode 100644 ta/date-and-time.md create mode 100644 ta/design-patterns/README.md create mode 100644 ta/design-patterns/behavioral-patterns.md create mode 100644 ta/design-patterns/creational-patterns.md create mode 100644 ta/design-patterns/structural-patterns.md create mode 100644 ta/document-object-model/README.md create mode 100644 ta/document-object-model/dom-api.md create mode 100644 ta/document-object-model/dom-manipulation.md create mode 100644 ta/document-object-model/listening-of-events.md create mode 100644 ta/error-handling/README.md create mode 100644 ta/error-handling/async_errorhandling.md create mode 100644 ta/error-handling/try...-catch.md create mode 100644 ta/error-handling/try...catch...finally.md create mode 100644 ta/es6-concepts/README.md create mode 100644 ta/es6-concepts/arrow-functions.md create mode 100644 ta/es6-concepts/destructuring.md create mode 100644 ta/es6-concepts/let-const.md create mode 100644 ta/es6-concepts/map.md create mode 100644 ta/es6-concepts/template-literals.md create mode 100644 ta/events.md create mode 100644 ta/exercises/README.md create mode 100644 ta/exercises/concatenation.md create mode 100644 ta/exercises/conditional-statements.md create mode 100644 ta/exercises/console.md create mode 100644 ta/exercises/constants.md create mode 100644 ta/exercises/fizzbuzz-problem.md create mode 100644 ta/exercises/functions.md create mode 100644 ta/exercises/get-the-titles.md create mode 100644 ta/exercises/multiplication.md create mode 100644 ta/exercises/objects.md create mode 100644 ta/exercises/user-input-variables.md create mode 100644 ta/file-system/README.md create mode 100644 ta/functions/README.md create mode 100644 ta/functions/closures.md create mode 100644 ta/functions/getters-setters.md create mode 100644 ta/functions/higher-order.md create mode 100644 ta/functions/hoisting.md create mode 100644 ta/functions/recursive-functions.md create mode 100644 ta/functions/rest-operator.md create mode 100644 ta/functions/set-interval.md create mode 100644 ta/functions/set-timeout.md create mode 100644 ta/functions/this-keyword.md create mode 100644 ta/interview-questions/README.md create mode 100644 ta/interview-questions/advance-level.md create mode 100644 ta/interview-questions/basic-level.md create mode 100644 ta/interview-questions/intermediate-level.md create mode 100644 ta/json.md create mode 100644 ta/loops/README.md create mode 100644 ta/loops/break.md create mode 100644 ta/loops/continue.md create mode 100644 ta/loops/dowhile.md create mode 100644 ta/loops/for.md create mode 100644 ta/loops/while.md create mode 100644 ta/miscellaneous/Added getters and setters.md create mode 100644 ta/miscellaneous/ECMA-script.md create mode 100644 ta/miscellaneous/README.md create mode 100644 ta/miscellaneous/api-ajax.md create mode 100644 ta/miscellaneous/building-and-deploying.md create mode 100644 ta/miscellaneous/callback.md create mode 100644 ta/miscellaneous/currying.md create mode 100644 ta/miscellaneous/debugging.md create mode 100644 ta/miscellaneous/global-footprint.md create mode 100644 ta/miscellaneous/hoisting.md create mode 100644 ta/miscellaneous/linked-list.md create mode 100644 ta/miscellaneous/polyfills-and-transpilers.md create mode 100644 ta/miscellaneous/single-thread-nature.md create mode 100644 ta/miscellaneous/template-literals.md create mode 100644 ta/miscellaneous/testing.md create mode 100644 ta/modules.md create mode 100644 ta/numbers/README.md create mode 100644 ta/numbers/advanced.md create mode 100644 ta/numbers/math.md create mode 100644 ta/numbers/operators.md create mode 100644 ta/objects/README.md create mode 100644 ta/objects/constructor-functions.md create mode 100644 ta/objects/constructor-property.md create mode 100644 ta/objects/delete.md create mode 100644 ta/objects/dynamic-nature.md create mode 100644 ta/objects/enumeration.md create mode 100644 ta/objects/factory-functions.md create mode 100644 ta/objects/mutable.md create mode 100644 ta/objects/properties.md create mode 100644 ta/objects/prototype.md create mode 100644 ta/objects/reference.md create mode 100644 ta/promise-async-await/README.md create mode 100644 ta/promise-async-await/async-await.md create mode 100644 ta/promise-async-await/promise.md create mode 100644 ta/regular-expression.md create mode 100644 ta/resources.md create mode 100644 ta/server-side/README.md create mode 100644 ta/server-side/nodejs.md create mode 100644 ta/server-side/server-side-rendering.md create mode 100644 ta/strings/README.md create mode 100644 ta/strings/charAt.md create mode 100644 ta/strings/concat.md create mode 100644 ta/strings/create.md create mode 100644 ta/strings/length.md create mode 100644 ta/strings/replace.md create mode 100644 ta/strings/split.md create mode 100644 ta/strings/substring.md diff --git a/LANGS.md b/LANGS.md index 3a7cb16e..1437e42a 100644 --- a/LANGS.md +++ b/LANGS.md @@ -5,4 +5,5 @@ - [Indonesian](id/) - [Español](es/) - [Deutsch](de/) -- [中文 (简体)](cn/) \ No newline at end of file +- [中文 (简体)](cn/) +- [தமிழ் (Tamil)](ta/) \ No newline at end of file diff --git a/_layouts/website/languages.html b/_layouts/website/languages.html index c7198dfe..59050085 100644 --- a/_layouts/website/languages.html +++ b/_layouts/website/languages.html @@ -53,7 +53,7 @@

Learn JavaScript

- Available in 8 languages + Available in 9 languages
diff --git a/book.json b/book.json index 2b1395f3..07dece7c 100644 --- a/book.json +++ b/book.json @@ -100,6 +100,10 @@ { "config": "zh-Hans", "text": "中文 (简体)" + }, + { + "config": "ta", + "text": "தமிழ் (Tamil)" } ] } diff --git a/ta/Copyright.md b/ta/Copyright.md new file mode 100644 index 00000000..032026ac --- /dev/null +++ b/ta/Copyright.md @@ -0,0 +1,31 @@ +--- +pageNumber: II +chapter: +--- + +# பதிப்புரிமை + +
+
+
+
+
+
+
+ + +**ஜாவாஸ்கிரிப்ட் கற்றுக்கொள்ளுங்கள்: தொடக்கநிலை பதிப்பு** +முதல் பதிப்பு + +பதிப்புரிமை © 2023 Suman Kunwar + +இந்த படைப்பு Apache 2.0 உரிமத்தின் கீழ் உரிமம் பெற்றுள்ளது ([Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)). +[javascript.sumankunwar.com.np](https://javascript.sumankunwar.com.np/) இல் உள்ள படைப்பை அடிப்படையாகக் கொண்டது. + +ASIN: B0C53J11V7 + +ISBN: 9789937171892 +
+![ISBN](../.gitbook/assets/isbn.png) + + diff --git a/ta/Credits.md b/ta/Credits.md new file mode 100644 index 00000000..3549ae37 --- /dev/null +++ b/ta/Credits.md @@ -0,0 +1,27 @@ +--- +pageNumber: VI +chapter: +--- + +### பராமரிப்பாளர் +--- + + + + + +
+ + சுயவிவர படம் +
+ Suman Kunwar + +
+ + +### பங்களிப்பாளர்கள் +--- + + + + diff --git a/ta/Dedication.md b/ta/Dedication.md new file mode 100644 index 00000000..d4e23fde --- /dev/null +++ b/ta/Dedication.md @@ -0,0 +1,12 @@ +--- +pageNumber: I +chapter: +--- +# அர்ப்பணிப்பு + +இந்த புத்தகம், நமது உலகில் கணினிகள் மற்றும் நிரலாக்க மொழிகளின் உணர்வுக்கு மரியாதையுடனும் அன்புடனும் அர்ப்பணிக்கப்படுகிறது. + + +> "நிரலாக்கத்தின் கலை என்பது சிக்கலை ஒழுங்கமைக்கும் கலை, பலவற்றை கைப்பற்றும் கலை மற்றும் அதன் தவறான குழப்பத்தை முடிந்தவரை திறம்பட தவிர்க்கும் கலையாகும்." +> +> -  Edsger Dijkstra diff --git a/ta/Preface.md b/ta/Preface.md new file mode 100644 index 00000000..7043b682 --- /dev/null +++ b/ta/Preface.md @@ -0,0 +1,17 @@ +--- +pageNumber: III +chapter: +--- +# முன்னுரை + +"ஜாவாஸ்கிரிப்ட் கற்றுக்கொள்ளுங்கள்: தொடக்கநிலை பதிப்பு" என்பது JavaScript பற்றிய விரிவான ஆய்வை வழங்கும் ஒரு புத்தகமாகும், எப்போதும் மாறிவரும் டிஜிட்டல் நிலப்பரப்பில் இதை ஒரு முக்கியமான மொழியாக நிலைநிறுத்துகிறது. அடிப்படை மற்றும் நடைமுறை தன்மையில் கவனம் செலுத்தி, இந்த வளம் JavaScript நிரலாக்க மொழியை கற்க விரும்பும் அனைவருக்கும் பொருத்தமானதாக உள்ளது. + +புத்தகம் JavaScript இன் அடிப்படை அம்சங்களை உள்ளடக்கி தொடங்குகிறது, படிப்படியாக மேம்பட்ட நுட்பங்களை நோக்கி முன்னேறுகிறது. இது மாறிகள், தரவு வகைகள், கட்டுப்பாட்டு கட்டமைப்புகள், செயல்பாடுகள், பொருள்-சார்ந்த நிரலாக்கம், மூடல்கள், வாக்குறுதிகள் மற்றும் நவீன தொடரியல் போன்ற முக்கிய தலைப்புகளை உரையாடுகிறது. ஒவ்வொரு அத்தியாயமும் முந்தையதன் மீது கட்டப்படுகிறது, கற்பவர்களுக்கு வலுவான அடித்தளத்தை வழங்கி சிக்கலான கருத்துக்களை புரிந்துகொள்வதை எளிதாக்குகிறது. + +"ஜாவாஸ்கிரிப்ட் கற்றுக்கொள்ளுங்கள்" இன் சிறப்பம்சம் அதன் நடைமுறை அணுகுமுறையாகும். புத்தகம் நடைமுறை பயிற்சிகள், குறியீட்டு சவால்கள் மற்றும் உண்மையான உலகின் சிக்கல்களை வழங்குகிறது, இது வாசகர்களை தங்கள் அறிவை பயன்படுத்தி அத்தியாவசிய திறன்களை வளர்க்க அனுமதிக்கிறது. உறுதியான எடுத்துக்காட்டுகளுடன் ஈடுபடுவதன் மூலம், வாசகர்கள் பொதுவான வலை மேம்பாட்டு சிக்கல்களை சமாளிக்க நம்பிக்கையைப் பெறுகிறார்கள் மற்றும் புதுமையான தீர்வுகளுக்கான JavaScript இன் திறனை திறக்கிறார்கள். + +மூடல்கள் மற்றும் ஒத்திசைவற்ற நிரலாக்கம் போன்ற சிக்கலான கருத்துக்கள் உள்ளுணர்வு விளக்கங்கள் மற்றும் நடைமுறை எடுத்துக்காட்டுகள் மூலம் தெளிவுபடுத்தப்படுகின்றன. தெளிவு மற்றும் எளிமைக்கு கொடுக்கப்படும் முக்கியத்துவம் அனைத்து நிலைகளிலும் உள்ள கற்பவர்களை முக்கிய கருத்துக்களை திறம்பட புரிந்துகொள்ளவும் தக்கவைக்கவும் உதவுகிறது. புத்தகம் மூன்று பகுதிகளாக கட்டமைக்கப்பட்டுள்ளது, முதல் 14 அத்தியாயங்கள் முக்கிய கருத்துக்களை ஆழமாக ஆராய்கின்றன. அடுத்த நான்கு அத்தியாயங்கள் வலை உலாவி நிரலாக்கத்திற்கு JavaScript ஐ பயன்படுத்துவதை விரிவாக விவரிக்கின்றன, அதைத் தொடர்ந்து பலவகையான, சர்வர் பக்கம் மற்றும் பயிற்சிகள் உள்ளன. பலவகையான பிரிவு JavaScript நிரலாக்கம் தொடர்பான முக்கியமான கருப்பொருள்கள் மற்றும் காட்சிகளை ஆராய்கிறது, அதைத் தொடர்ந்து பயிற்சிக்கான பயிற்சிகள் உள்ளன. + +பாடத்திட்டம் நேர்காணல் கேள்விகள், வடிவமைப்பு வடிவங்கள், கோப்பு அமைப்பு கருத்துக்கள் மற்றும் ES6 போன்ற போனஸ் தலைப்புகளை உள்ளடக்கி மொழியின் விரிவான புரிதலை வழங்குகிறது. திறமையான, பராமரிக்கக்கூடிய குறியீட்டை எழுதுவதில் கவனம் செலுத்துகிறது, இது வேலை தேடுபவர்களுக்கும் தனிப்பட்ட திட்டங்களுக்கும் மதிப்புமிக்கது. + +முடிவில், "ஜாவாஸ்கிரிப்ட் கற்றுக்கொள்ளுங்கள்: தொடக்கநிலை பதிப்பு" JavaScript ஐ கைப்பற்றி வலை மேம்பாட்டில் சிறந்து விளங்க விரும்புவோருக்கு இன்றியமையாத துணையாகும். அதன் விரிவான கவரேஜ், நடைமுறை அணுகுமுறை, தெளிவான விளக்கங்கள், உண்மையான உலகின் பயன்பாட்டு கவனம் மற்றும் தொடர்ச்சியான கற்றலுக்கான அர்ப்பணிப்புடன், இந்த புத்தகம் ஒரு மதிப்புமிக்க வளமாக செயல்படுகிறது. அதன் உள்ளடக்கத்தில் மூழ்குவதன் மூலம், வாசகர்கள் மாறும் மற்றும் ஊடாடும் வலை பயன்பாடுகளை உருவாக்கத் தேவையான திறன்களையும் அறிவையும் பெறுவார்கள், JavaScript டெவலப்பர்களாக தங்கள் முழு திறனை திறந்துவிடுவார்கள். diff --git a/ta/README.md b/ta/README.md new file mode 100644 index 00000000..290bea36 --- /dev/null +++ b/ta/README.md @@ -0,0 +1,53 @@ +--- +chapter: 1 +pageNumber: 9 +description: ஜாவாஸ்கிரிப்ட் என்பது உயர்-நிலை, விளக்கப்படும், மற்றும் மாறும்-வகையான நிரலாக்க மொழியாகும், இது முதன்மையாக வலை மேம்பாட்டிற்கு பயன்படுத்தப்படுகிறது. இது ஊடாடும் மற்றும் மாறும் வலைத்தளங்கள் மற்றும் வலை பயன்பாடுகளை உருவாக்க பயன்படுத்தப்படும் முக்கிய தொழில்நுட்பங்களில் ஒன்றாகும். +--- +# அத்தியாயம் 1 +# அறிமுகம் + +இன்றைய உலகில் கணினிகள் மிகவும் பொதுவானவை, ஏனென்றால் அவை பலவிதமான பணிகளை விரைவாகவும் துல்லியமாகவும் செய்யும் திறன் கொண்டவை. அவை வணிகம், சுகாதாரம், கல்வி மற்றும் பொழுதுபோக்கு போன்ற பல்வேறு துறைகளில் பயன்படுத்தப்படுகின்றன, மேலும் பலருக்கு அன்றாட வாழ்வின் இன்றியமையாத பகுதியாக மாறியுள்ளன. இதற்கு மேலாக, அவை சிக்கலான அறிவியல் மற்றும் கணித கணக்கீடுகளை செய்யவும், பெரிய அளவிலான தரவை சேமிக்கவும் செயல்படுத்தவும், உலகம் முழுவதும் உள்ள மக்களுடன் தொடர்பு கொள்ளவும் பயன்படுகின்றன. + +நிரலாக்கம் என்பது ஒரு கணினி பின்பற்ற, நிரல் எனப்படும் வழிமுறைகளின் தொகுப்பை உருவாக்குவதை உள்ளடக்கியது. கணினிகள் மிகவும் துல்லியமானவை மற்றும் பணிகளை முடிக்க குறிப்பிட்ட வழிமுறைகள் தேவை என்பதால், நிரல் எழுதுவது சில நேரங்களில் கடினமாகவும் விரக்தியாகவும் இருக்கலாம். + +![அறிமுகப் பக்கம்](../.gitbook/assets/intro.png) + +நிரலாக்க மொழிகள் கணினிகளுக்கு வழிமுறைகளை வழங்க பயன்படுத்தப்படும் செயற்கை மொழிகளாகும். அவை பெரும்பாலான நிரலாக்க பணிகளில் பயன்படுத்தப்படுகின்றன மற்றும் மனிதர்கள் ஒருவருடன் ஒருவர் தொடர்புகொள்ளும் விதத்தில் அடிப்படையாக கொண்டவை. மனித மொழிகளைப் போலவே, நிரலாக்க மொழிகள் புதிய கருத்துக்களை வெளிப்படுத்த வார்த்தைகள் மற்றும் சொற்றொடர்களை இணைக்க அனுமதிக்கின்றன. கணினிகளுடன் தொடர்புகொள்வதற்கான மிகவும் பயனுள்ள வழி மனித மொழிக்கு ஒத்த மொழியைப் பயன்படுத்துவதை உள்ளடக்கியது என்பது சுவாரஸ்யமானது. + +கடந்த காலத்தில், கணினிகளுடன் தொடர்புகொள்வதற்கான முதன்மையான வழி BASIC மற்றும் DOS prompt போன்ற மொழி-அடிப்படையிலான இடைமுகங்கள் மூலமாகும். இவை பெரும்பாலும் காட்சி இடைமுகங்களால் மாற்றப்பட்டுள்ளன, அவை கற்றுக்கொள்வதற்கு எளிதானவை ஆனால் குறைவான நெகிழ்வுத்தன்மையை வழங்குகின்றன. இருப்பினும், _JavaScript_ போன்ற கணினி மொழிகள் இன்னும் பயன்பாட்டில் உள்ளன மற்றும் நவீன வலை உலாவிகளிலும் பெரும்பாலான சாதனங்களிலும் காணலாம். + +JavaScript (_சுருக்கமாக JS_) என்பது வலைப்பக்கங்கள், கேம்கள், பயன்பாடுகள் மற்றும் சர்வர்களை கூட உருவாக்கும் போது மாறும் தொடர்பை உருவாக்க பயன்படுத்தப்படும் நிரலாக்க மொழியாகும். JavaScript 1990களில் உருவாக்கப்பட்ட வலை உலாவியான Netscape இல் தொடங்கியது, மேலும் இன்று மிகவும் பிரபலமான மற்றும் பயன்படுத்தப்படும் நிரலாக்க மொழிகளில் ஒன்றாகும். + +ஆரம்பத்தில், இது வலைப்பக்கங்களை உயிர்ப்பிக்க உருவாக்கப்பட்டது மற்றும் ஒரு உலாவியில் மட்டுமே இயங்க முடிந்தது. இப்போது, JavaScript இயந்திரத்தை ஆதரிக்கும் எந்த சாதனத்திலும் இயங்குகிறது. [Array](./arrays/README.md), [Date](./date-and-time.md), மற்றும் [Math](./numbers/math.md) போன்ற நிலையான பொருட்கள் JavaScript இல் கிடைக்கின்றன, மேலும் ஆபரேட்டர்கள், கட்டுப்பாட்டு கட்டமைப்புகள் மற்றும் அறிக்கைகளும் கிடைக்கின்றன. _கிளையன்ட்-பக்க JavaScript_ மற்றும் _சர்வர்-பக்க JavaScript_ என்பவை முக்கிய JavaScript இன் நீட்டிக்கப்பட்ட பதிப்புகளாகும். + +* _கிளையன்ட்-பக்க JavaScript_ வலைப்பக்கங்கள் மற்றும் கிளையன்ட் உலாவிகளை மேம்படுத்தவும் கையாளவும் உதவுகிறது. சுட்டி கிளிக்குகள், படிவ உள்ளீடு மற்றும் பக்க வழிசெலுத்தல் போன்ற பயனர் நிகழ்வுகளுக்கான பதில்கள் இதற்கு சில எடுத்துக்காட்டுகளாகும். +* [_சர்வர்-பக்க JavaScript_](./server-side/README.md) சர்வர்கள், தரவுத்தளங்கள் மற்றும் கோப்பு அமைப்புகளை அணுகுவதை இயக்குகிறது. + +JavaScript ஒரு விளக்கப்படும் மொழியாகும். JavaScript ஐ இயக்கும் போது ஒரு மொழிபெயர்ப்பாளர் ஒவ்வொரு வரியையும் விளக்கி இயக்குகிறார். நவீன உலாவி [Just In Time (JIT)](https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/) கம்பைலர்களை தொகுப்பிற்கு பயன்படுத்துகிறது, இது JavaScript ஐ இயக்கக்கூடிய பைட்கோடாக தொகுக்கிறது. + +{% hint style="info" %} +"LiveScript" என்பது JavaScript க்கு ஆரம்பத்தில் வழங்கப்பட்ட பெயர். +{% endhint %} + +### குறியீடு, அதனுடன் என்ன செய்வது மற்றும் எழுத்துவடிவ மரபுகள் + +_குறியீடு_ என்பது ஒரு நிரலை உருவாக்கும் எழுதப்பட்ட வழிமுறைகளாகும். இங்கே, பல அத்தியாயங்கள் நிறைய குறியீட்டை கொண்டிருக்கின்றன, மேலும் நிரலாக்கத்தை எவ்வாறு கற்றுக்கொள்வது என்பதை கற்பதின் ஒரு பகுதியாக குறியீட்டை படிப்பதும் எழுதுவதும் முக்கியமாகும். நீங்கள் எடுத்துக்காட்டுகளை வேகமாக ஸ்கேன் செய்யக்கூடாது - அவற்றை கவனமாக படித்து புரிந்துகொள்ள முயற்சிக்கவும். இது ஆரம்பத்தில் கடினமாக இருக்கலாம், ஆனால் பயிற்சியுடன் நீங்கள் மேம்படுவீர்கள். பயிற்சிகளுக்கும் அதே பொருந்தும் - நீங்கள் அவற்றை புரிந்துகொள்கிறீர்கள் என்று நினைப்பதற்கு முன்பு தீர்வு எழுத முயற்சிக்கவும். JavaScript மொழிபெயர்ப்பாளரில் உங்கள் தீர்வுகளை இயக்க முயற்சிப்பதும் உதவியாக இருக்கும், ஏனென்றால் இது உங்கள் குறியீடு சரியாக இயங்குகிறதா என்பதை பார்க்க அனுமதிக்கும் மற்றும் பயிற்சிகளுக்கு அப்பால் சோதனை செய்ய உங்களை ஊக்குவிக்கலாம். + + +இங்கே, ஒரு மோனோஸ்பேஸ் எழுத்துருவில் எழுதப்பட்ட உரை ஒரு நிரலின் கூறுகளை குறிக்கிறது. இது ஒரு சுய-தொடர்பு துண்டாக அல்லது அருகிலுள்ள நிரலின் ஒரு பகுதியைக் குறிக்கும் குறிப்பாக இருக்கலாம். கீழே காட்டப்பட்டுள்ளதைப் போல நிரல்கள் இவ்வாறு எழுதப்படுகின்றன: + +```javascript +const numbers = [45, 4, 9, 16, 25]; +let txt = ""; +for (let x in numbers) { + txt += numbers[x]; +} +``` + +சில நேரங்களில், ஒரு நிரலின் எதிர்பார்க்கப்படும் வெளியீடு அதன் பிறகு எழுதப்படுகிறது, இரண்டு சாய்வுக்கோடுகளுக்கு முன் ஒரு _Result_ உடன், இவ்வாறு: + +```javascript +console.log(txt); + +// Result: txt = '45491625' +``` diff --git a/ta/References.md b/ta/References.md new file mode 100644 index 00000000..d5cb040d --- /dev/null +++ b/ta/References.md @@ -0,0 +1,40 @@ +--- +pageNumber: IV +chapter: +--- + +# குறிப்புகள் (References) + +Ballard, P. (2018). JavaScript in 24 Hours, Sams Teach Yourself. Sams Publishing. + +Crockford, D. (2008). JavaScript: The Good Parts. O'Reilly Media. + +Duckett, J. (2011). HTML & CSS: Design and Build Websites. Wiley. + +Duckett, J. (2014). JavaScript and JQuery: Interactive Front-End Web Development. Wiley. + +Flanagan, D. (2011). JavaScript: The Definitive Guide. O'Reilly Media. + +Freeman, E., & Robson, E. (2014). Head First JavaScript Programming: A Brain-Friendly Guide. O'Reilly Media. + +Frisbie, M. (2019). Professional JavaScript for Web Developers. Wrox. + +Haverbeke, M. (2019). Eloquent JavaScript: A Modern Introduction to Programming. No Starch Press. + +Herman, D. (2012). Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript. Addison-Wesley Professional. + +McPeak, J., & Wilton, P. (2015). Beginning JavaScript. Wiley. + +Morgan, N. (2014). JavaScript for Kids: A Playful Introduction to Programming. No Starch Press. + +Murphy C, Clark R, Studholme O, et al. (2014). Beginning HTML5 and CSS3: The Web Evolved. Apress. + +Nixon, R. (2021). Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5. O'Reilly Media. + +Powell, T., & Schneider, F. (2012). JavaScript: The Complete Reference. McGraw-Hill Education. + +Resig, J. (2007). Pro JavaScript Techniques. Apress. + +Resig, J., & Bibeault, B. (2016). Secrets of the JavaScript Ninja. Manning Publications. + +Robbins, J. N. (2014). Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics. O'Reilly Media. diff --git a/ta/SUMMARY.md b/ta/SUMMARY.md new file mode 100644 index 00000000..4ccde01f --- /dev/null +++ b/ta/SUMMARY.md @@ -0,0 +1,173 @@ +# உள்ளடக்க அட்டவணை + +- [அர்ப்பணிப்பு](Dedication.md) +- [பதிப்புரிமை](Copyright.md) +- [முன்னுரை](Preface.md) +- [அறிமுகம்](README.md) +- [அடிப்படைகள்](basics/README.md) + - [கருத்துகள்](basics/comments.md) + - [மாறிகள்](basics/variables.md) + - [வகைகள்](basics/types.md) + - [சமத்துவம்](basics/equality.md) +- [எண்கள்](numbers/README.md) + - [கணிதம்](numbers/math.md) + - [அடிப்படை ஆபரேட்டர்கள்](numbers/operators.md) + - [மேம்பட்ட ஆபரேட்டர்கள்](numbers/advanced.md) +- [சரங்கள்](strings/README.md) + - [உருவாக்கம்](strings/create.md) + - [மாற்று](strings/replace.md) + - [நீளம்](strings/length.md) + - [இணைப்பு](strings/concat.md) + - [பிரிக்கவும்](strings/split.md) + - [CharAt](strings/charAt.md) + - [உள்சரம்](strings/substring.md) +- [நிபந்தனை தர்க்கம்](conditional/README.md) + - [If](conditional/if.md) + - [Else](conditional/else.md) + - [Switch](conditional/switch.md) + - [ஒப்பீட்டாளர்கள்](conditional/comparators.md) + - [இணைக்கவும்](conditional/concatenate.md) +- [வரிசைகள்](arrays/README.md) + - [Unshift](arrays/unshift.md) + - [Map](arrays/map.md) + - [Spread](arrays/spread.md) + - [Shift](arrays/shift.md) + - [Pop](arrays/pop.md) + - [Join](arrays/join.md) + - [நீளம்](arrays/length.md) + - [Push](arrays/push.md) + - [For Each](arrays/for-each.md) + - [வரிசைப்படுத்து](arrays/sort.md) + - [குறியீடுகள்](arrays/indices.md) + - [தலைகீழாக்கு](arrays/reverse.md) + - [Slice](arrays/slice.md) +- [சுழல்கள்](loops/README.md) + - [For](loops/for.md) + - [While](loops/while.md) + - [Do...While](loops/dowhile.md) + - [Continue](loops/continue.md) + - [Break](loops/break.md) +- [செயல்பாடுகள்](functions/README.md) + - [உயர் வரிசை செயல்பாடுகள்](functions/higher-order.md) + - [மறுசெய்கை செயல்பாடுகள்](functions/recursive-functions.md) + - [மூடல்கள்](functions/closures.md) + - [Set Interval](functions/set-interval.md) + - [Set Timeout](functions/set-timeout.md) + - [Rest ஆபரேட்டர்](functions/rest-operator.md) + - [This முக்கியசொல்](functions/this-keyword.md) + - [Hoisting](functions/hoisting.md) + - [Getters மற்றும் Setters](functions/getters-setters.md) +- [பொருட்கள்](objects/README.md) + - [பண்புகள்](objects/properties.md) + - [மாற்றத்தக்கது](objects/mutable.md) + - [குறிப்பு](objects/reference.md) + - [Prototype](objects/prototype.md) + - [Delete ஆபரேட்டர்](objects/delete.md) + - [எண்ணுதல்](objects/enumeration.md) + - [தொழிற்சாலை செயல்பாடுகள்](objects/factory-functions.md) + - [Constructor செயல்பாடுகள்](objects/constructor-functions.md) + - [Constructor பண்பு](objects/constructor-property.md) + - [மாறும் தன்மை](objects/dynamic-nature.md) +- [தேதி மற்றும் நேரம்](date-and-time.md) +- [JSON](json.md) +- [பிழை கையாளுதல்](error-handling/README.md) + - [Try...Catch](error-handling/try...-catch.md) + - [Try...Catch...Finally](error-handling/try...catch...finally.md) + - [ஒத்திசைவற்ற பிழை கையாளுதல்](error-handling/async_errorhandling.md) +- [தொகுதிகள்](modules.md) +- [வழக்கமான வெளிப்பாடு](regular-expression.md) +- [வகுப்புகள்](classes/README.md) + - [நிலையான](classes/static.md) + - [மரபுரிமை](classes/inheritance.md) + - [அணுகல் மாற்றியமைப்பிகள்](classes/access-modifiers.md) +- [உலாவி பொருள் மாதிரி (BOM)](browser-object-model-bom/README.md) + - [Window](browser-object-model-bom/window.md) + - [Popup](browser-object-model-bom/popup.md) + - [Screen](browser-object-model-bom/screen.md) + - [Navigator](browser-object-model-bom/navigator.md) + - [Cookies](browser-object-model-bom/cookies.md) + - [வரலாறு](browser-object-model-bom/history.md) + - [இடம்](browser-object-model-bom/location.md) +- [நிகழ்வுகள்](events.md) +- [Promise, async/await](promise-async-await/README.md) + - [Promise](promise-async-await/promise.md) + - [Async/Await](promise-async-await/async-await.md) +- [பலவகையான](miscellaneous/README.md) + - [டெம்ப்ளேட் Literals](miscellaneous/template-literals.md) + - [Hoisting](miscellaneous/hoisting.md) + - [Currying](miscellaneous/currying.md) + - [Polyfills மற்றும் Transpilers](miscellaneous/polyfills-and-transpilers.md) + - [இணைப்பு பட்டியல்](miscellaneous/linked-list.md) + - [உலகளாவிய தடயம்](miscellaneous/global-footprint.md) + - [பிழைத்திருத்தம்](miscellaneous/debugging.md) + - [JS பயன்பாட்டை உருவாக்குதல் மற்றும் பயன்படுத்துதல்](miscellaneous/building-and-deploying.md) + - [Callback](miscellaneous/callback.md) + - [Web API மற்றும் AJAX](miscellaneous/api-ajax.md) + - [ஒற்றை நூல் தன்மை](miscellaneous/single-thread-nature.md) + - [ECMA Script](miscellaneous/ECMA-script.md) + - [சோதனை](miscellaneous/testing.md) +- [சர்வர் பக்கம்](server-side/README.md) + - [Node.js](server-side/nodejs.md) + - [சர்வர் பக்க ரெண்டரிங்](server-side/server-side-rendering.md) +- [பயிற்சிகள்](exercises/README.md) + - [Console](exercises/console.md) + - [பெருக்கல்](exercises/multiplication.md) + - [பயனர் உள்ளீட்டு மாறிகள்](exercises/user-input-variables.md) + - [மாறிலிகள்](exercises/constants.md) + - [இணைப்பு](exercises/concatenation.md) + - [செயல்பாடுகள்](exercises/functions.md) + - [நிபந்தனை அறிக்கைகள்](exercises/conditional-statements.md) + - [பொருட்கள்](exercises/objects.md) + - [FizzBuzz சிக்கல்](exercises/fizzbuzz-problem.md) + - [தலைப்புகளைப் பெறுங்கள்!](exercises/get-the-titles.md) +- [நேர்காணல் கேள்விகள் (போனஸ் பிரிவு)](interview-questions/README.md) + - [அடிப்படை நிலை](interview-questions/basic-level.md) + - [இடைநிலை நிலை](interview-questions/intermediate-level.md) + - [மேம்பட்ட நிலை](interview-questions/advance-level.md) +- [வடிவமைப்பு வடிவங்கள் (போனஸ் பிரிவு)](design-patterns/README.md) + - [உருவாக்கும் வடிவங்கள்](design-patterns/creational-patterns.md) + - [கட்டமைப்பு நிலை](design-patterns/structural-patterns.md) + - [நடத்தை நிலை](design-patterns/behavioral-patterns.md) +- [கோப்பு அமைப்பு (போனஸ் பிரிவு)](file-system/README.md) +- [ES6 கருத்துக்கள் (போனஸ் பிரிவு)](es6-concepts/README.md) + - [Let Const](es6-concepts/let-const.md) + - [Map](es6-concepts/map.md) + - [Arrow செயல்பாடுகள்](es6-concepts/arrow-functions.md) + - [Destructuring](es6-concepts/destructuring.md) + - [டெம்ப்ளேட் Literals](es6-concepts/template-literals.md) +- [அனிமேஷன் வளங்கள் (போனஸ் பிரிவு)](animation-resources/README.md) + - [GSAP](animation-resources/gsap.md) + - [Anime JS](animation-resources/animejs.md) + - [Three JS](animation-resources/threejs.md) + - [Velocity JS](animation-resources/velocityjs.md) + - [React Spring](animation-resources/react-spring.md) + - [Framer Motion](animation-resources/framer-motion.md) +- [சிக்கலானது (போனஸ் பிரிவு)](complexity/README.md) + - [இட சிக்கலானது](complexity/space-complexity.md) + - [நேர சிக்கலானது](complexity/time-complexity.md) +- [திரைக்கு பின்னால் JavaScript (போனஸ் பிரிவு)](behind-scenes/README.md) + - [Call Stack](behind-scenes/call-stack.md) + - [JavaScript இயந்திரம்](behind-scenes/engine.md) + - [நிகழ்வு சுழல்](behind-scenes/event-loop.md) + - [செயல்பாட்டு சூழல்](behind-scenes/execution-context.md) + - [நினைவக Heap](behind-scenes/memory-heap.md) + - [Runtime சூழல்](behind-scenes/runtime-environment.md) +- [ஆவண பொருள் மாதிரி (DOM)](document-object-model/README.md) + - [DOM API](document-object-model/dom-api.md) + - [DOM கையாளுதல்](document-object-model/dom-manipulation.md) + - [நிகழ்வுகளை கேட்டல்](document-object-model/listening-of-events.md) +- [குறிப்புகள்](References.md) +- [வளங்கள்](resources.md) + - [டிஜிட்டல் கடிகாரம்](./beginner-projects/digital-clock.md) + - [டிரம் கிட்ஸ்](./beginner-projects/electronic-drum-kit.md) + - [படத் தேடல்](./beginner-projects/image-search.md) + - [மாதாந்திர நாட்காட்டி](./beginner-projects/monthly-calendar.md) + - [சீரற்ற படங்கள் உருவாக்கி](./beginner-projects/random-photos-generator.md) + - [கல் காகிதம் கத்தரி விளையாட்டு](./beginner-projects/rock-paper-scissors-game.md) + - [Simon Says](./beginner-projects/simon-says.md) + - [நிறுத்தகடிகாரம்](./beginner-projects/simple-stopwatch.md) + - [டிப் கணிப்பான்](./beginner-projects/tip-calculator.md) + - [வீடியோ டிரெய்லர் Popup](./beginner-projects/video-trailer-popup.md) + - [வானிலை ஆப்](./beginner-projects/weather-app.md) + - [Whack a Mole](./beginner-projects/whack-a-mole.md) +- [வரவேற்புகள்](Credits.md) diff --git a/ta/animation-resources/README.md b/ta/animation-resources/README.md new file mode 100644 index 00000000..cb81c026 --- /dev/null +++ b/ta/animation-resources/README.md @@ -0,0 +1,50 @@ +--- +layout: editorial +chapter: 26 +pageNumber: 252 +description: ஜாவாஸ்கிரிப்ட் அனிமேஷன் ஆதாரங்கள் (resources), இதில் நூலகங்கள் (libraries), டுடோரியல்கள் (tutorials), கட்டுரைகள் மற்றும் ஈர்க்கக்கூடிய அனிமேஷன்களை உருவாக்குவதற்கான கட்டமைப்புகள் (frameworks) அடங்கும். +--- + +# அத்தியாயம் 26 +# அனிமேஷன் ஆதாரங்கள் (Animation Resources) + +ஜாவாஸ்கிரிப்டில் உள்ள அனிமேஷன்கள் இணையத்தில் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்குவதற்கான சக்திவாய்ந்த வழியாகும். இந்த அத்தியாயம், ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அனிமேஷன்களை உருவாக்க டெவலப்பர்களுக்கு உதவும் நூலகங்கள் (libraries), டுடோரியல்கள் (tutorials), கட்டுரைகள் மற்றும் கட்டமைப்புகள் (frameworks) உட்படப் பல்வேறு ஆதாரங்களை உள்ளடக்கும். + +## ஜாவாஸ்கிரிப்ட் அனிமேஷன்களுக்கான அறிமுகம் (Introduction to JavaScript Animations) + +ஜாவாஸ்கிரிப்ட் அனிமேஷன்கள் டெவலப்பர்களை மாறும், பார்வைக்கு ஈர்க்கும் இணைய உள்ளடக்கத்தை உருவாக்க அனுமதிக்கின்றன. பயனர் இடைமுகங்களை மேம்படுத்துதல் (enhancing user interfaces), கருத்துக்களை வழங்குதல் (providing feedback) மற்றும் உள்ளடக்கத்தை அதிக ஈடுபாட்டுடன் மாற்றுதல் போன்ற பல்வேறு நோக்கங்களுக்காக அனிமேஷன்களைப் பயன்படுத்தலாம். + +### நூலகங்கள் (Libraries) + +ஜாவாஸ்கிரிப்ட் அனிமேஷன் நூலகங்கள் சிக்கலான அனிமேஷன்களை உருவாக்குவதை எளிதாக்குகின்றன. சில பிரபலமான நூலகங்கள் கீழே கொடுக்கப்பட்டுள்ளன: + +1. **[GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/)**: உயர் செயல்திறன் அனிமேஷன்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த நூலகம். +2. **[Anime.js](https://animejs.com/)**: அனிமேஷன்களைக் கையாளுவதற்கான ஒரு இலகுரக (lightweight) நூலகம். +3. **[Three.js](https://threejs.org/)**: 3D அனிமேஷன்களை உருவாக்குவதற்கான ஒரு நூலகம். +4. **[Velocity.js](http://velocityjs.org/)**: வேகமான அனிமேஷன் இயந்திரம் (engine). + +### டுடோரியல்கள் (Tutorials) + +ஜாவாஸ்கிரிப்ட் அனிமேஷன்களைத் தொடங்க, இந்த டுடோரியல்களைப் பார்க்கவும்: + +1. **[MDN Web Docs: Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)**: CSS அனிமேஷன்கள் பற்றிய விரிவான வழிகாட்டி. +2. **[JavaScript.info: JavaScript Animations](https://javascript.info/js-animation/)**: ஜாவாஸ்கிரிப்ட் அனிமேஷன்களுக்கான அறிமுகம். +3. **[GreenSock Learning Resources](https://greensock.com/learning/)**: GSAP கற்க டுடோரியல்கள் மற்றும் ஆதாரங்கள். + +### கட்டமைப்புகள் (Frameworks) + +கட்டமைப்புகள் அனிமேஷன்களை உருவாக்குவதற்கான கட்டமைக்கப்பட்ட அணுகுமுறையை (structured approach) வழங்குகின்றன. சில பிரபலமான கட்டமைப்புகள் பின்வருமாறு: + +1. **[React Spring](https://react-spring.io/)**: React க்கான ஸ்பிரிங்-பிசிக்ஸ் (spring-physics) அடிப்படையிலான அனிமேஷன் நூலகம். +2. **[Framer Motion](https://www.framer.com/motion/)**: React க்கான தயாரிப்புக்குத் தயாரான (production-ready) மோஷன் நூலகம். + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை விரிவாக ஆராய்வோம்: + +* [GSAP உடன் தொடங்குதல் (Getting Started with GSAP)](./gsap.md) +* [Anime.js மூலம் அனிமேஷன்களை உருவாக்குதல் (Creating Animations with Anime.js)](./animejs.md) +* [Three.js உடன் 3D அனிமேஷன்கள் (3D Animations with Three.js)](./threejs.md) +* [Velocity.js உடன் வேகமான அனிமேஷன்கள் (Fast Animations with Velocity.js)](./velocityjs.md) +* [அனிமேஷன்களுக்கு React Spring ஐப் பயன்படுத்துதல் (Using React Spring for Animations)](./react-spring.md) +* [Framer Motion மூலம் அனிமேஷன் செய்தல் (Animating with Framer Motion)](./framer-motion.md) + +இந்த ஆதாரங்களை எவ்வாறு திறம்படப் பயன்படுத்துவது என்பதைப் புரிந்து கொள்ள ஒவ்வொரு தலைப்பிலும் மூழ்குவோம். \ No newline at end of file diff --git a/ta/animation-resources/animejs.md b/ta/animation-resources/animejs.md new file mode 100644 index 00000000..dfba3aeb --- /dev/null +++ b/ta/animation-resources/animejs.md @@ -0,0 +1,106 @@ +--- +chapter: 26 +pageNumber: 254 +description: இலகுரக (lightweight) ஜாவாஸ்கிரிப்ட் அனிமேஷன் நூலகமான Anime.js மூலம் அனிமேஷன்களை உருவாக்குதல். +--- + +## Anime.js மூலம் அனிமேஷன்களை உருவாக்குதல் (Creating Animations with Anime.js) + +Anime.js என்பது எளிமையான மற்றும் சக்திவாய்ந்த API கொண்ட இலகுரக ஜாவாஸ்கிரிப்ட் அனிமேஷன் நூலகமாகும். + +**நிறுவுதல் (Installation)** + +npm ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் Anime.js ஐ சேர்க்கலாம்: + +```bash +npm install animejs +``` + +அல்லது நீங்கள் CDN ஐப் பயன்படுத்தலாம்: + +```html + +``` + +**அடிப்படை அனிமேஷன் (Basic Animation)** + +ஒரு உறுப்பை (element) அனிமேஷன் செய்ய Anime.js ஐப் பயன்படுத்துவதற்கான எளிய உதாரணம் இங்கே: + +```html + + + + + + Anime.js Animation + + +
+ + + + +``` + +**மேம்பட்ட அனிமேஷன் (Advanced Animation)** + +கீஃப்ரேம்கள் (keyframes), டைம்லைன் (timeline) மற்றும் ஈசிங் (easing) போன்ற மேம்பட்ட அனிமேஷன்களுக்கான பல்வேறு அம்சங்களை Anime.js வழங்குகிறது. + + +- **கீஃப்ரேம்கள் (Keyframes):** +ஒரு அனிமேஷனின் பல நிலைகளை வரையறுக்க கீஃப்ரேம்கள் உங்களை அனுமதிக்கின்றன. ஒரு உதாரணம் இங்கே: + +```javascript +anime({ + targets: '#box', + keyframes: [ + {translateX: 100}, + {translateY: 100}, + {translateX: 0}, + {translateY: 0} + ], + duration: 4000 +}); +``` + + +- **டைம்லைன் (Timeline):** +டைம்லைன்கள் அனிமேஷன்களை வரிசைப்படுத்த உங்களை அனுமதிக்கின்றன. ஒரு உதாரணம் இங்கே: + +```javascript +var tl = anime.timeline({ + easing: 'easeOutExpo', + duration: 750 +}); + +tl.add({ + targets: '#box', + translateX: 250 +}).add({ + targets: '#box', + translateY: 250 +}, '-=500'); // Starts 500ms before the previous animation ends +``` + + +- **ஈசிங் (Easing):** +அனிமேஷன்களை இயல்பானதாக மாற்ற Anime.js பல்வேறு ஈசிங் விருப்பங்களை வழங்குகிறது. ஒரு உதாரணம் இங்கே: + +```javascript +anime({ + targets: '#box', + translateX: 250, + duration: 1000, + easing: 'easeInOutQuad' +}); +``` + +{% hint style="info" %} +மேலும் விவரங்கள் மற்றும் எடுத்துக்காட்டுகளுக்கு, Anime.js ஆவணங்களைப் பார்க்கவும். +{% endhint %} \ No newline at end of file diff --git a/ta/animation-resources/framer-motion.md b/ta/animation-resources/framer-motion.md new file mode 100644 index 00000000..3bb36af3 --- /dev/null +++ b/ta/animation-resources/framer-motion.md @@ -0,0 +1,109 @@ +--- +chapter: 26 +pageNumber: 255 +description: React பயன்பாடுகளில் அனிமேஷன்களுக்கு Framer Motion ஐப் பயன்படுத்துதல். +--- + +## Framer Motion மூலம் அனிமேஷன் செய்தல் (Animating with Framer Motion) + +Framer Motion என்பது React க்கான தயாரிப்புக்குத் தயாரான (production-ready) மோஷன் நூலகமாகும் (motion library). இது சிக்கலான அனிமேஷன்களை உருவாக்குவதை எளிதாக்குகிறது. + +**நிறுவுதல் (Installation)** + +npm ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் Framer Motion ஐ சேர்க்கலாம்: + +```bash +npm install framer-motion +``` + +**அடிப்படை அனிமேஷன் (Basic Animation)** + +ஒரு கூறினை (component) அனிமேஷன் செய்ய Framer Motion ஐப் பயன்படுத்துவதற்கான எளிய உதாரணம் இங்கே: + +```javascript +import React from 'react'; +import { motion } from 'framer-motion'; + +const AnimatedComponent = () => { + return ( + + நான் வலதுபுறம் நகருவேன் (I will move to the right) + + ); +}; + +export default AnimatedComponent; +``` + +**மேம்பட்ட அனிமேஷன் (Advanced Animation)** + +கீஃப்ரேம்கள் (keyframes), சைகைகள் (gestures) மற்றும் தளவமைப்பு (layout) அனிமேஷன்கள் போன்ற மேம்பட்ட அனிமேஷன்களுக்கான பல்வேறு அம்சங்களை Framer Motion வழங்குகிறது. + + +- **கீஃப்ரேம்கள் (Keyframes):** +ஒரு அனிமேஷனின் பல நிலைகளை வரையறுக்க கீஃப்ரேம்கள் உங்களை அனுமதிக்கின்றன. ஒரு உதாரணம் இங்கே: + +```javascript +import React from 'react'; +import { motion } from 'framer-motion'; + +const KeyframeComponent = () => { + return ( + + நான் முன்னும் பின்னுமாக நகருவேன் (I will move back and forth) + + ); +}; + +export default KeyframeComponent; +``` + + +- **சைகைகள் (Gestures):** +பயனர் சைகைகளின் அடிப்படையில் அனிமேஷன்களை உருவாக்க Framer Motion உங்களை அனுமதிக்கிறது. ஒரு உதாரணம் இங்கே: + +```javascript +import React from 'react'; +import { motion } from 'framer-motion'; + +const GestureComponent = () => { + return ( + + என்னைச் சுற்றி இழுக்கவும் (Drag me around) + + ); +}; + +export default GestureComponent; +``` + + +- **தளவமைப்பு அனிமேஷன்கள் (Layout Animations):** +தளவமைப்பு (layout) மாற்றங்களை அனிமேஷன் செய்வதை Framer Motion எளிதாக்குகிறது. ஒரு உதாரணம் இங்கே: + +```javascript +import React, { useState } from 'react'; +import { motion } from 'framer-motion'; + +const LayoutAnimationComponent = () => { + const [isOpen, setIsOpen] = useState(false); + + return ( + setIsOpen(!isOpen)} style={{ background: 'lightblue', padding: '10px' }}> + {isOpen ? 'சுருக்கக் கிளிக் செய்யவும் (Click to collapse)' : 'விரிவாக்கக் கிளிக் செய்யவும் (Click to expand)'} + + ); +}; + +export default LayoutAnimationComponent; +``` + +{% hint style="info" %} +மேலும் விவரங்கள் மற்றும் எடுத்துக்காட்டுகளுக்கு, Framer Motion ஆவணங்களைப் பார்க்கவும். +{% endhint %} \ No newline at end of file diff --git a/ta/animation-resources/gsap.md b/ta/animation-resources/gsap.md new file mode 100644 index 00000000..51a9474c --- /dev/null +++ b/ta/animation-resources/gsap.md @@ -0,0 +1,79 @@ +--- +chapter: 26 +pageNumber: 253 +description: உயர் செயல்திறன் (high-performance) அனிமேஷன்களை உருவாக்குவதற்கான சக்திவாய்ந்த நூலகமான GSAP உடன் தொடங்குதல். +--- + +## GSAP உடன் தொடங்குதல் (Getting Started with GSAP) + +GSAP (GreenSock Animation Platform) என்பது உயர் செயல்திறன் அனிமேஷன்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த நூலகமாகும். அதன் வலிமை (robustness) மற்றும் நெகிழ்வுத்தன்மை (flexibility) காரணமாக இது பரவலாகப் பயன்படுத்தப்படுகிறது. + +**நிறுவுதல் (Installation)** + +npm ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் GSAP ஐ சேர்க்கலாம்: + +```bash +npm install gsap +``` + +அல்லது நீங்கள் CDN ஐப் பயன்படுத்தலாம்: + +```html + +``` + +**அடிப்படை அனிமேஷன் (Basic Animation)** + +ஒரு உறுப்பை (element) அனிமேஷன் செய்ய GSAP ஐப் பயன்படுத்துவதற்கான எளிய உதாரணம் இங்கே: + +```html + + + + + + GSAP Animation + + +
+ + + + +``` + +**மேம்பட்ட அனிமேஷன் (Advanced Animation)** + +டைம்லைன்கள் (timelines), ஸ்டாகர் (stagger) மற்றும் ஈசிங் (easing) போன்ற மேம்பட்ட அனிமேஷன்களுக்கான பல்வேறு அம்சங்களை GSAP வழங்குகிறது. + + +- **டைம்லைன்கள் (Timelines):** +டைம்லைன்கள் அனிமேஷன்களை வரிசைப்படுத்த (sequence) உங்களை அனுமதிக்கின்றன. ஒரு உதாரணம் இங்கே: + +```javascript +const name = "John"; +const greeting = `Hello, ${name}!`; +console.log(greeting); // Output: Hello, John! +``` + + +- **ஸ்டாகர் (Stagger):** +ஒவ்வொன்றுக்கும் இடையில் தாமதத்துடன் பல கூறுகளை (multiple elements) அனிமேஷன் செய்ய ஸ்டாகர் உங்களை அனுமதிக்கிறது. ஒரு உதாரணம் இங்கே: + +```javascript +gsap.to(".box", {x: 100, duration: 1, stagger: 0.2}); +``` + + +- **ஈசிங் (Easing):** +அனிமேஷன்களை இயல்பானதாக மாற்ற GSAP பல்வேறு ஈசிங் விருப்பங்களை வழங்குகிறது. ஒரு உதாரணம் இங்கே: + +```javascript +gsap.to("#box", {x: 100, duration: 1, ease: "bounce"}); +``` + +{% hint style="info" %} +மேலும் விவரங்கள் மற்றும் எடுத்துக்காட்டுகளுக்கு, GSAP ஆவணங்களைப் பார்க்கவும். +{% endhint %} \ No newline at end of file diff --git a/ta/animation-resources/react-spring.md b/ta/animation-resources/react-spring.md new file mode 100644 index 00000000..98d71989 --- /dev/null +++ b/ta/animation-resources/react-spring.md @@ -0,0 +1,103 @@ +--- +chapter: 26 +pageNumber: 255 +description: React பயன்பாடுகளில் அனிமேஷன்களுக்கு React Spring ஐப் பயன்படுத்துதல். +--- + +## அனிமேஷன்களுக்கு React Spring ஐப் பயன்படுத்துதல் (Using React Spring for Animations) + +React Spring என்பது React க்கான ஸ்பிரிங்-பிசிக்ஸ் (spring-physics) அடிப்படையிலான அனிமேஷன் நூலகமாகும், இது அனிமேஷன்களை உருவாக்குவதை எளிதாக்குகிறது. + +**நிறுவுதல் (Installation)** + +npm ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் React Spring ஐ சேர்க்கலாம்: + +```bash +npm install react-spring +``` + +**அடிப்படை அனிமேஷன் (Basic Animation)** + +ஒரு கூறினை (component) அனிமேஷன் செய்ய React Spring ஐப் பயன்படுத்துவதற்கான எளிய உதாரணம் இங்கே: + +```javascript +import React from 'react'; +import { useSpring, animated } from 'react-spring'; + +const AnimatedComponent = () => { + const props = useSpring({ opacity: 1, from: { opacity: 0 } }); + + return நான் மங்கலாகத் தோன்றுவேன் (I will fade in); +}; + +export default AnimatedComponent; +``` + +**மேம்பட்ட அனிமேஷன் (Advanced Animation)** + +மாற்றங்கள் (transitions), பாதைகள் (trails) மற்றும் கீஃப்ரேம்கள் (keyframes) போன்ற மேம்பட்ட அனிமேஷன்களுக்கான பல்வேறு அம்சங்களை React Spring வழங்குகிறது. + + +- **மாற்றங்கள் (Transitions):** +கூறுகள் ஏற்றப்படும்போதும் (mount) இறக்கப்படும்போதும் (unmount) அனிமேஷன் செய்ய மாற்றங்கள் உங்களை அனுமதிக்கின்றன. ஒரு உதாரணம் இங்கே: + +```javascript +import React, { useState } from 'react'; +import { useTransition, animated } from 'react-spring'; + +const TransitionComponent = () => { + const [items, setItems] = useState([]); + const transitions = useTransition(items, item => item.key, { + from: { transform: 'translate3d(0,-40px,0)' }, + enter: { transform: 'translate3d(0,0px,0)' }, + leave: { transform: 'translate3d(0,-40px,0)' }, + }); + + return ( +
+ + {transitions.map(({ item, props, key }) => ( + {item.key} + ))} +
+ ); +}; + +export default TransitionComponent; +``` + + +- **பாதைகள் (Trails):** +கூறுகளின் பட்டியலை வரிசையாக அனிமேஷன் செய்ய பாதைகள் உங்களை அனுமதிக்கின்றன. ஒரு உதாரணம் இங்கே: + +```javascript +import React from 'react'; +import { useTrail, animated } from 'react-spring'; + +const items = [1, 2, 3]; + +const TrailComponent = () => { + const trail = useTrail(items.length, { + from: { opacity: 0 }, + to: { opacity: 1 }, + }); + + return ( +
+ {trail.map((props, index) => ( + + {items[index]} + + ))} +
+ ); +}; + +export default TrailComponent; +``` + +{% hint style="info" %} +மேலும் விவரங்கள் மற்றும் எடுத்துக்காட்டுகளுக்கு, React Spring ஆவணங்களைப் பார்க்கவும். +{% endhint %} \ No newline at end of file diff --git a/ta/animation-resources/threejs.md b/ta/animation-resources/threejs.md new file mode 100644 index 00000000..53e123d1 --- /dev/null +++ b/ta/animation-resources/threejs.md @@ -0,0 +1,103 @@ +--- +chapter: 26 +pageNumber: 253 +description: 3D கிராபிக்ஸிற்கான ஜாவாஸ்கிரிப்ட் நூலகமான Three.js உடன் 3D அனிமேஷன்களை உருவாக்குதல். +--- + +## Three.js உடன் 3D அனிமேஷன்கள் (3D Animations with Three.js) + +Three.js என்பது இணையத்தில் 3D கிராபிக்ஸ் (3D graphics) உருவாக்குவதை எளிதாக்கும் ஜாவாஸ்கிரிப்ட் நூலகமாகும் (library). இது தலைசிறந்த 3D அனுபவங்களை உருவாக்கப் பரவலாகப் பயன்படுத்தப்படுகிறது. + +**நிறுவுதல் (Installation)** + +npm ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் Three.js ஐ சேர்க்கலாம்: + +```bash +npm install three +``` + +அல்லது நீங்கள் CDN ஐப் பயன்படுத்தலாம்: + +```html + +``` + +**அடிப்படை அனிமேஷன் (Basic Animation)** + +சுழலும் கனசதுரத்தை (rotating cube) உருவாக்க Three.js ஐப் பயன்படுத்துவதற்கான எளிய உதாரணம் இங்கே: + +```html + + + + + + Three.js Animation + + + + + + + +``` + +**மேம்பட்ட அனிமேஷன் (Advanced Animation)** + +லைட்டிங் (lighting), இழைமங்கள் (textures) மற்றும் இயற்பியல் (physics) போன்ற மேம்பட்ட அனிமேஷன்களுக்கான பல்வேறு அம்சங்களை Three.js வழங்குகிறது. + + +- **லைட்டிங் (Lighting):** +உங்கள் காட்சிக்கு (scene) லைட்டிங் சேர்ப்பது மிகவும் யதார்த்தமாக இருக்கும். ஒரு உதாரணம் இங்கே: + +```javascript +const light = new THREE.PointLight(0xffffff); +light.position.set(10, 10, 10); +scene.add(light); +``` + + +- **இழைமங்கள் (Textures):** +உங்கள் பொருள்களுக்கு (objects) இழைமங்களைப் பயன்படுத்துவது அவற்றை மிகவும் விரிவாக மாற்றும். ஒரு உதாரணம் இங்கே: + +```javascript +const texture = new THREE.TextureLoader().load('path/to/texture.jpg'); +const material = new THREE.MeshBasicMaterial({ map: texture }); +const cube = new THREE.Mesh(geometry, material); +``` + + +- **இயற்பியல் (Physics):** +இயற்பியலை ஒருங்கிணைப்பது உங்கள் 3D உலகத்தை மேலும் மாறும் தன்மையுடையதாக (dynamic) மாற்றும். Three.js உடன் வேலை செய்யும் ஒரு பிரபலமான இயற்பியல் இயந்திரம் (physics engine) Cannon.js ஆகும். + +{% hint style="info" %} +மேலும் விவரங்கள் மற்றும் எடுத்துக்காட்டுகளுக்கு, Three.js ஆவணங்களைப் பார்க்கவும். +{% endhint %} \ No newline at end of file diff --git a/ta/animation-resources/velocityjs.md b/ta/animation-resources/velocityjs.md new file mode 100644 index 00000000..bf73169a --- /dev/null +++ b/ta/animation-resources/velocityjs.md @@ -0,0 +1,82 @@ +--- +chapter: 26 +pageNumber: 254 +description: உயர் செயல்திறன் அனிமேஷன் இயந்திரமான (high-performance animation engine) Velocity.js மூலம் வேகமான அனிமேஷன்களை உருவாக்குதல். +--- + +## Velocity.js உடன் வேகமான அனிமேஷன்கள் (Fast Animations with Velocity.js) + +Velocity.js என்பது உயர் செயல்திறன் அனிமேஷன் இயந்திரமாகும், இது பயன்படுத்த எளிதானது மற்றும் jQuery உடனும் அல்லது இல்லாமலும் செயல்படுகிறது. + +**நிறுவுதல் (Installation)** + +npm ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் Velocity.js ஐ சேர்க்கலாம்: + +```bash +npm install velocity-animate +``` + +அல்லது நீங்கள் CDN ஐப் பயன்படுத்தலாம்: + +```html + +``` + +**அடிப்படை அனிமேஷன் (Basic Animation)** +ஒரு உறுப்பை (element) அனிமேஷன் செய்ய Velocity.js ஐப் பயன்படுத்துவதற்கான எளிய உதாரணம் இங்கே: + +```html + + + + + + Velocity.js Animation + + +
+ + + + +``` + +**மேம்பட்ட அனிமேஷன் (Advanced Animation)** + +தொடர்கள் (sequences), ஈசிங் (easing) மற்றும் SVG அனிமேஷன்கள் போன்ற மேம்பட்ட அனிமேஷன்களுக்கான பல்வேறு அம்சங்களை Velocity.js வழங்குகிறது. + + +- **தொடர்கள் (Sequences)** + +அனிமேஷன்களை ஒன்றாகச் சங்கிலிபோல் இணைக்க (chain) தொடர்கள் உங்களை அனுமதிக்கின்றன. ஒரு உதாரணம் இங்கே: + +```javascript +Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000 }) + .then(() => { + return Velocity(document.getElementById('box'), { top: "100px" }, { duration: 1000 }); + }); +``` + + +- **ஈசிங் (Easing)** + +அனிமேஷன்களை இயல்பானதாக மாற்ற Velocity.js பல்வேறு ஈசிங் விருப்பங்களை வழங்குகிறது. ஒரு உதாரணம் இங்கே: + +```javascript +Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000, easing: "spring" }); +``` + + +- **SVG அனிமேஷன்கள் (SVG Animations)** + +Velocity.js ஆனது SVG உறுப்புகளையும் அனிமேஷன் செய்ய முடியும். ஒரு உதாரணம் இங்கே: + +```javascript +Velocity(document.querySelector('svg'), { strokeDashoffset: 0 }, { duration: 1000 }); +``` + +{% hint style="info" %} +மேலும் விவரங்கள் மற்றும் எடுத்துக்காட்டுகளுக்கு, Velocity.js ஆவணங்களைப் பார்க்கவும். +{% endhint %} diff --git a/ta/arrays/README.md b/ta/arrays/README.md new file mode 100644 index 00000000..1f8f69f0 --- /dev/null +++ b/ta/arrays/README.md @@ -0,0 +1,89 @@ +--- +layout: editorial +chapter: 6 +pageNumber: 47 +description: வரிசை என்பது தரவின் பட்டியல் மற்றும் நிரலாக்கத்தின் அடிப்படை பகுதியாகும். இங்கே, வெவ்வேறு வகைகளின் நிறைய தரவை சேமிக்கலாம். +--- + +# அத்தியாயம் 6 +# வரிசைகள் + +வரிசைகள் நிரலாக்கத்தின் அடிப்படை பகுதியாகும். ஒரு வரிசை என்பது தரவின் பட்டியலாகும். ஒரு மாறியில் நிறைய தரவை சேமிக்கலாம், இது நமது குறியீட்டை மிகவும் படிக்கக்கூடியதாகவும் புரிந்துகொள்வதற்கு எளிதாகவும் ஆக்குகிறது. தொடர்புடைய தரவில் செயல்பாடுகளை செய்வதும் மிகவும் எளிதாகிறது. + +வரிசைகளில் உள்ள தரவு **உறுப்புகள்** என்று அழைக்கப்படுகின்றன. + +இங்கே ஒரு எளிய வரிசை: + +```javascript +// 1, 1, 2, 3, 5, மற்றும் 8 இந்த வரிசையில் உள்ள உறுப்புகள் +let numbers = [1, 1, 2, 3, 5, 8]; +``` + +வரிசை literals அல்லது `new` முக்கியசொல்லைப் பயன்படுத்தி வரிசைகளை எளிதாக உருவாக்கலாம். + +```javascript +const cars = ["Saab", "Volvo", "BMW"]; // வரிசை literals பயன்படுத்தி +const cars = new Array("Saab", "Volvo", "BMW"); // new முக்கியசொல் பயன்படுத்தி +``` + +ஒரு வரிசையின் மதிப்புகளை அணுக குறியீட்டு எண் பயன்படுத்தப்படுகிறது. வரிசை குறியீடுகள் `0` உடன் தொடங்குவதால் ஒரு வரிசையில் முதல் உறுப்பின் குறியீடு எப்போதும் `0` ஆகும். ஒரு வரிசையின் உறுப்புகளை மாற்றவும் குறியீட்டு எண்ணைப் பயன்படுத்தலாம். + +```javascript +const cars = ["Saab", "Volvo", "BMW"]; +console.log(cars[0]); +// Result: Saab + +cars[0] = "Opel"; // வரிசையின் முதல் உறுப்பை மாற்றுகிறது +console.log(cars); +// Result: ['Opel', 'Volvo', 'BMW'] +``` + +{% hint style="working" %} +வரிசைகள் ஒரு சிறப்பு வகையான பொருளாகும். ஒரு வரிசையில் [பொருட்களை](../objects/) வைக்கலாம். +{% endhint %} + + ஒரு வரிசையின் `length` பண்பு உறுப்புகளின் எண்ணிக்கையை திரும்பப் பெறுகிறது. வரிசைகளால் ஆதரிக்கப்படும் முறைகள் கீழே காட்டப்பட்டுள்ளன: + +| பெயர் | விளக்கம் | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| `at()` | குறிப்பிட்ட குறியீட்டில் உள்ள உறுப்பை அல்லது `undefined` ஐ திரும்பப் பெறுகிறது | +| `concat()` | இரண்டு அல்லது அதிகமான இணைந்த வரிசைகளை திரும்பப் பெறுகிறது | +| `every()` | வரிசையில் உள்ள ஒவ்வொரு உருப்படிக்கும் `callback` `true` திரும்பினால் `true` திரும்பப் பெறுகிறது | +| `filter()` | `callback` `true` திரும்பிய உருப்படிகளை கொண்ட புதிய வரிசையை திரும்பப் பெறுகிறது | +| `find()` | `callback` `true` திரும்பிய முதல் உருப்படியை திரும்பப் பெறுகிறது | +| `findIndex()` | `callback` `true` திரும்பிய முதல் உருப்படியின் குறியீட்டை திரும்பப் பெறுகிறது | +| `findLast()` | `callback` `true` திரும்பிய கடைசி உருப்படியை திரும்பப் பெறுகிறது | +| `findLastIndex()` | `callback` `true` திரும்பிய கடைசி உருப்படியின் குறியீட்டை திரும்பப் பெறுகிறது | +| `flat()` | குறிப்பிட்ட ஆழம் வரை அனைத்து துணை-வரிசை உறுப்புகளையும் recursively இணைத்த புதிய வரிசையை திரும்பப் பெறுகிறது | +| `flatMap()` | depth 1 இன் `flat()` தொடர்ந்து `map()` ஐ இயக்குகிறது | +| `forEach()` | ஒரு வரிசையின் ஒவ்வொரு உறுப்பிலும் ஒரு callback ஐ இயக்கி undefined திரும்பப் பெறுகிறது | +| `indexOf()` | தேடல் உறுப்பின் முதல் பொருத்தத்தின் குறியீட்டை திரும்பப் பெறுகிறது | +| `join()` | ஒரு வரிசையில் உள்ள அனைத்து உறுப்புகளையும் ஒரு சரமாக இணைக்கிறது | +| `lastIndexOf()` | தேடல் உறுப்பின் கடைசி பொருத்தத்தின் குறியீட்டை திரும்பப் பெறுகிறது | +| `map()` | ஒவ்வொரு வரிசை உருப்படியிலும் `callback` ஐ இயக்குவதன் திரும்ப மதிப்புடன் புதிய வரிசையை திரும்பப் பெறுகிறது | +| `pop()` | ஒரு வரிசையின் கடைசி உறுப்பை நீக்கி அந்த உறுப்பை திரும்பப் பெறுகிறது | +| `push()` | வரிசையின் இறுதியில் ஒன்று அல்லது அதிகமான உறுப்புகளை சேர்த்து நீளத்தை திரும்பப் பெறுகிறது | +| `reduce()` | குறைக்கும் நோக்கிற்காக `callback(accumulator, currentValue, currentIndex, array)` ஐப் பயன்படுத்துகிறது மற்றும் `callback` செயல்பாட்டால் திரும்பிய இறுதி மதிப்பை திரும்பப் பெறுகிறது | +| `reduceRight()` | `reduce()` போல் செயல்படுகிறது ஆனால் கடைசி உறுப்பிலிருந்து தொடங்குகிறது | +| `reverse()` | ஒரு வரிசையின் உறுப்புகளை மாற்றி ஒரு வரிசையை குறிப்பை திரும்பப் பெறுகிறது | +| `shift()` | ஒரு வரிசையின் முதல் உறுப்பை நீக்கி அந்த உறுப்பை திரும்பப் பெறுகிறது | +| `slice()` | ஒரு வரிசையின் பகுதியை பிரித்தெடுத்து புதிய வரிசையை திரும்பப் பெறுகிறது | +| `some()` | வரிசையில் குறைந்தது ஒரு உருப்படிக்கு `callback` `true` திரும்பினால் `true` திரும்பப் பெறுகிறது | +| `sort()` | ஒரு வரிசையின் உறுப்புகளை இடத்திலேயே வரிசைப்படுத்தி வரிசைக்கு ஒரு குறிப்பை திரும்பப் பெறுகிறது | +| `splice()` | ஒரு வரிசையிலிருந்து உறுப்புகளை நீக்கி (விரும்பினால்) அவற்றை மாற்றி வரிசையை திரும்பப் பெறுகிறது | +| `unshift()` | ஒரு வரிசையின் முன்னால் ஒன்று அல்லது அதிகமான உறுப்புகளை சேர்த்து நீளத்தை திரும்பப் பெறுகிறது | + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [For-Each](./for-each.md) +* [குறியீடுகள்](./indices.md) +* [Join](./join.md) +* [நீளம்](./length.md) +* [Map](./map.md) +* [Pop](./pop.md) +* [Push](./push.md) +* [தலைகீழாக்கு](./reverse.md) +* [Shift](./shift.md) +* [Slice](./slice.md) +* [வரிசைப்படுத்து](./sort.md) +* [Spread](./spread.md) +* [Unshift](./unshift.md) diff --git a/ta/arrays/for-each.md b/ta/arrays/for-each.md new file mode 100644 index 00000000..eb668d9c --- /dev/null +++ b/ta/arrays/for-each.md @@ -0,0 +1,46 @@ +--- +chapter: 6 +pageNumber: 56 +description: forEach முறை ஒவ்வொரு வரிசை உறுப்புக்கும் வழங்கப்பட்ட செயல்பாட்டை ஒரு முறை இயக்குகிறது. +--- +# For Each + +`forEach` முறை ஒவ்வொரு வரிசை உறுப்புக்கும் வழங்கப்பட்ட செயல்பாட்டை ஒரு முறை இயக்குகிறது. `forEach` பயன்படுத்துவதற்கான தொடரியல் இங்கே: + +```javascript +array.forEach(function(element, index, array) { + // element: வரிசையில் செயலாக்கப்படும் தற்போதைய உறுப்பு + // index: வரிசையில் செயலாக்கப்படும் தற்போதைய உறுப்பின் குறியீடு + // array: forEach அழைக்கப்பட்ட வரிசை +}); +``` + + +எடுத்துக்காட்டாக, உங்களிடம் எண்களின் வரிசை இருக்கிறது என்று வைத்துக்கொள்வோம் மற்றும் ஒவ்வொரு எண்ணின் இரட்டிப்பை console ல் அச்சிட விரும்புகிறீர்கள். `forEach` ஐப் பயன்படுத்தி இவ்வாறு செய்யலாம்: + +```typescript +let numbers = [1, 2, 3, 4, 5]; +numbers.forEach(function(number) { + console.log(number * 2); +}); +``` + +`forEach` க்கு அனுப்பப்படும் செயல்பாட்டை வரையறுக்க arrow செயல்பாடு தொடரியலையும் பயன்படுத்தலாம்: + +```typescript +numbers.forEach((number) => { + console.log(number * 2); +}); +``` + +அல்லது + +```typescript +numbers.forEach(number => console.log(number * 2)); +``` + +`forEach` முறை அசல் வரிசையை மாற்றாது. இது வரிசையின் உறுப்புகளை மீண்டும் செல்கிறது மற்றும் ஒவ்வொரு உறுப்புக்கும் வழங்கப்பட்ட செயல்பாட்டை இயக்குகிறது. + +{% hint style="working" %} +`forEach()` முறை காலி அறிக்கைக்கு இயக்கப்படவில்லை. +{% endhint %} diff --git a/ta/arrays/indices.md b/ta/arrays/indices.md new file mode 100644 index 00000000..27300d11 --- /dev/null +++ b/ta/arrays/indices.md @@ -0,0 +1,35 @@ +--- +chapter: 6 +pageNumber: 58 +description: வரிசைகள் உறுப்புகளின் தொகுப்பு மற்றும் ஒவ்வொரு உறுப்பும் குறியீடு எனப்படும் எண் நிலைக்கு ஒதுக்கப்படுகிறது. குறியீடுகள் பூஜ்ய-அடிப்படையிலானவை, அதாவது வரிசையின் முதல் உறுப்பின் குறியீடு 0, இரண்டாவதின் குறியீடு 1 மற்றும் பலவாறு. +--- +# குறியீடுகள் + +உங்களிடம் தரவு உறுப்புகளின் வரிசை இருக்கிறது, ஆனால் ஒரு குறிப்பிட்ட உறுப்பை அணுக விரும்பினால் என்ன செய்வது? இங்கே குறியீடுகள் வருகின்றன. ஒரு **குறியீடு** வரிசையில் ஒரு இடத்தை குறிக்கிறது. குறியீடுகள் தர்க்கரீதியாக ஒன்றன் பின் ஒன்றாக முன்னேறுகின்றன, ஆனால் பெரும்பாலான மொழிகளைப் போல வரிசையில் முதல் குறியீடு `0` என்பதை கவனிக்க வேண்டும். ஒரு வரிசையின் குறியீட்டை குறிப்பிடுகிறீர்கள் என்பதை குறிக்க அடைப்புக்குறிகள் `[]` பயன்படுத்தப்படுகின்றன. + +```javascript +// இது சரங்களின் வரிசை +let fruits = ["apple", "banana", "pineapple", "strawberry"]; + +// fruits வரிசையின் இரண்டாவது உறுப்பின் மதிப்பை +// banana மாறியில் அமைக்கிறோம். குறியீடுகள் 0 இல் தொடங்கும் +// என்பதை நினைவில் கொள்ளுங்கள், எனவே 1 என்பது இரண்டாவது உறுப்பு. Result: banana = "banana" +let banana = fruits[1]; +``` + +ஒரு வரிசையில் உறுப்பின் மதிப்பை அமைக்கவும் வரிசை குறியீட்டைப் பயன்படுத்தலாம்: + +```javascript +let array = ['a', 'b', 'c', 'd', 'e']; +// குறியீடுகள்: 0 1 2 3 4 +array[4] = 'f'; +console.log(array); // Result: ['a', 'b', 'c', 'd', 'f'] +``` + +வரிசையின் எல்லைகளுக்கு வெளியே உள்ள குறியீட்டைப் பயன்படுத்தி ஒரு உறுப்பை அணுக அல்லது அமைக்க முயற்சித்தால் (அதாவது, `0` ஐ விட குறைவான அல்லது [வரிசையின்](./README.md) நீளத்திற்கு சமனாக அல்லது அதிகமான குறியீடு), `undefined` மதிப்பு கிடைக்கும். + +```javascript +console.log(array[5]); // Output: undefined +array[5] = 'g'; +console.log(array); // Result: ['a', 'b', 'c', 'd', 'f', undefined, 'g'] +``` diff --git a/ta/arrays/join.md b/ta/arrays/join.md new file mode 100644 index 00000000..4bf2c03e --- /dev/null +++ b/ta/arrays/join.md @@ -0,0 +1,38 @@ +--- +chapter: 6 +pageNumber: 53 +description: join முறை வரிசையை சரமாக மாற்றி அசல் வரிசையை மாற்றாமல் அனைத்தையும் இணைக்கிறது. +--- +# Join + +`join` முறை, ஒரு வரிசையை சரமாக மாற்றி அனைத்தையும் இணைக்கிறது. இது அசல் வரிசையை மாற்றாது. `join` பயன்படுத்துவதற்கான தொடரியல் இங்கே: + +```c +array.join([separator]); +``` + +`separator` வாதம் விரும்பினால் மட்டுமே மற்றும் முடிவு சரத்தில் உறுப்புகளை பிரிக்க பயன்படுத்தப்படும் எழுத்தை குறிப்பிடுகிறது. தவிர்க்கப்பட்டால், வரிசை உறுப்புகள் காற்புள்ளியால் (`,`) பிரிக்கப்படும். + +எடுத்துக்காட்டாக: + +```javascript +let array = ["one", "two", "three", "four"]; + +console.log(array.join(" ")); + +// Result: one two three four +``` + +{% hint style="working" %} +எந்த separator ஐயும் குறிப்பிடலாம், ஆனால் இயல்புநிலை காற்புள்ளி `(,)`. +{% endhint %} + +மேலே உள்ள எடுத்துக்காட்டில், ஒரு இடைவெளி separator ஆக பயன்படுத்தப்படுகிறது. முதலில் `Array.prototype.slice()` முறையைப் பயன்படுத்தி வரிசையாக மாற்றி ஒரு array-like பொருளை (arguments பொருள் அல்லது NodeList பொருள் போன்ற) சரமாக மாற்றவும் `join` ஐப் பயன்படுத்தலாம்: + +```javascript +function printArguments() { + console.log(Array.prototype.slice.call(arguments).join(', ')); +} + +printArguments('a', 'b', 'c'); // Result: "a, b, c" +``` diff --git a/ta/arrays/length.md b/ta/arrays/length.md new file mode 100644 index 00000000..85315609 --- /dev/null +++ b/ta/arrays/length.md @@ -0,0 +1,45 @@ +--- +chapter: 6 +pageNumber: 54 +description: வரிசைகளுக்கு length என்ற பண்பு உள்ளது, இது வரிசையின் நீளத்தை அளவிடுகிறது. +--- +# நீளம் + +வரிசைகளுக்கு `length` என்ற பண்பு உள்ளது, மற்றும் இது சரியாகவே சொல்வது போல, வரிசையின் நீளம். + +```javascript +let array = [1, 2, 3]; + +let l = array.length; + +// Result: l = 3 +``` + +length பண்பு ஒரு வரிசையில் உள்ள உறுப்புகளின் எண்ணிக்கையையும் அமைக்கிறது. எடுத்துக்காட்டாக: + +```javascript +let fruits = ["Banana", "Orange", "Apple", "Mango"]; +fruits.length = 2; + +console.log(fruits); +// Result: ['Banana', 'Orange'] +``` + +ஒரு வரிசையின் கடைசி உறுப்பை பெற குறியீடாக பயன்படுத்தி `length` பண்பையும் பயன்படுத்தலாம். எடுத்துக்காட்டாக: + +```c +console.log(fruits[fruits.length - 1]); // Result: Orange +``` + +வரிசையின் இறுதியில் உறுப்புகளை சேர்க்கவும் `length` பண்பைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக: + +```c +fruits[fruits.length] = "Pineapple"; +console.log(fruits); // Result: ['Banana', 'Orange', 'Pineapple'] +``` + +{% hint style="info" %} +வரிசையில் உறுப்புகள் சேர்க்கப்படும்போது அல்லது நீக்கப்படும்போது `length` பண்பு தானாகவே புதுப்பிக்கப்படுகிறது. +{% endhint %} + +`length` பண்பு ஒரு முறை அல்ல என்பதையும் குறிப்பிடுவது மதிப்பு, எனவே அதை அணுகும்போது அடைப்புக்குறிகளை பயன்படுத்த வேண்டியதில்லை. இது வரிசை பொருளின் ஒரு பண்பு மட்டுமே, அதை வேறு எந்த பொருள் பண்பையும் போல அணுகலாம். diff --git a/ta/arrays/map.md b/ta/arrays/map.md new file mode 100644 index 00000000..be0b34fd --- /dev/null +++ b/ta/arrays/map.md @@ -0,0 +1,48 @@ +--- +chapter: 6 +pageNumber: 49 +description: map முறை ஒரு வரிசையை மீண்டும் செல்கிறது மற்றும் ஒரு callback செயல்பாட்டைப் பயன்படுத்தி அதன் உறுப்பைத் திருத்துகிறது. இந்த callback செயல்பாடு வரிசையின் ஒவ்வொரு உறுப்பிலும் பயன்படுத்தப்படுகிறது. +--- +# Map + +`Array.prototype.map()` முறை ஒரு வரிசையை மீண்டும் செல்கிறது மற்றும் ஒரு callback செயல்பாட்டைப் பயன்படுத்தி அதன் உறுப்புகளை மாற்றுகிறது. callback செயல்பாடு பின்னர் வரிசையின் ஒவ்வொரு உறுப்பிலும் பயன்படுத்தப்படும். + +`map` பயன்படுத்துவதற்கான தொடரியல் இங்கே. + +```javascript +let newArray = oldArray.map(function(element, index, array) { + // element: வரிசையில் செயலாக்கப்படும் தற்போதைய உறுப்பு + // index: வரிசையில் செயலாக்கப்படும் தற்போதைய உறுப்பின் குறியீடு + // array: map அழைக்கப்பட்ட வரிசை + // newArray இல் சேர்க்கப்படும் உறுப்பை திரும்பப் பெறுங்கள் +}); +``` + +எடுத்துக்காட்டாக, உங்களிடம் எண்களின் வரிசை இருக்கிறது என்று வைத்துக்கொள்வோம் மற்றும் அசல் வரிசையில் உள்ள எண்களின் மதிப்புகளை இரண்டு மடங்கு ஆக்கும் புதிய வரிசையை உருவாக்க விரும்புகிறீர்கள். `map` ஐப் பயன்படுத்தி இவ்வாறு செய்யலாம். + +```javascript +const numbers = [2, 4, 6, 8]; + +const doubledNumbers = numbers.map(number => number * 2); + +console.log(doubledNumbers); + +// Result: [4, 8, 12, 16] +``` + +`map` க்கு அனுப்பப்படும் செயல்பாட்டை வரையறுக்க arrow செயல்பாடு தொடரியலையும் பயன்படுத்தலாம். + +
let doubledNumbers = numbers.map((number) => {
+  return number * 2;
+});
+
+ +அல்லது + +```typescript +let doubledNumbers = numbers.map(number => number * 2); +``` + +{% hint style="info" %} +`map()` முறை காலி உறுப்புகளுக்கு செயல்பாட்டை இயக்காது மற்றும் அசல் வரிசையை மாற்றாது. +{% endhint %} diff --git a/ta/arrays/pop.md b/ta/arrays/pop.md new file mode 100644 index 00000000..12ffa1ac --- /dev/null +++ b/ta/arrays/pop.md @@ -0,0 +1,40 @@ +--- +chapter: 6 +pageNumber: 52 +description: pop முறைகள் வரிசையின் கடைசி உறுப்பை நீக்கி முடிவை திரும்பப் பெறுகிறது. இந்த முறை வரிசை நீளத்தை மாற்றுகிறது. +--- +# Pop + +`pop` முறை ஒரு வரிசையிலிருந்து கடைசி உறுப்பை நீக்கி அந்த உறுப்பை திரும்பப் பெறுகிறது. இந்த முறை வரிசையின் நீளத்தை மாற்றுகிறது. + +`pop` பயன்படுத்துவதற்கான தொடரியல் இங்கே: + +```c +array.pop(); +``` + +எடுத்துக்காட்டாக: + +```javascript +let arr = ["one", "two", "three", "four", "five"]; +arr.pop(); + +console.log(arr); + +// Result: ['one', 'two', 'three', 'four'] +``` + +ஒரு வரிசையிலிருந்து அனைத்து உறுப்புகளையும் நீக்க ஒரு loop உடன் இணைந்து `pop` முறையைப் பயன்படுத்தலாம். இதை எவ்வாறு செய்வது என்பதற்கான எடுத்துக்காட்டு: + +```c +while (array.length > 0) { + array.pop(); +} + +console.log(array); // Result: [] +``` + +{% hint style="working" %} +`pop` முறை வரிசைகளில் மட்டுமே செயல்படுகிறது, arguments பொருட்கள் அல்லது NodeList பொருட்கள் போன்ற வரிசைகளுக்கு ஒத்த மற்ற பொருட்களில் அல்ல. இந்த வகையான பொருட்களிலிருந்து உறுப்புகளை pop செய்ய வேண்டும் என்றால், முதலில் `Array.prototype.slice()` முறையைப் பயன்படுத்தி வரிசையாக மாற்ற வேண்டும். + +{% endhint %} diff --git a/ta/arrays/push.md b/ta/arrays/push.md new file mode 100644 index 00000000..c1e304dd --- /dev/null +++ b/ta/arrays/push.md @@ -0,0 +1,41 @@ +--- +chapter: 6 +pageNumber: 55 +description: push முறை கடைசி குறியீட்டை புதிதாக சேர்க்கப்பட்ட உருப்படியாக ஆக்கி வரிசையில் உறுப்பை சேர்க்கிறது. இந்த முறை வரிசை நீளத்தை மாற்றி புதிய நீளத்தை திரும்பப் பெறுகிறது. +--- +# Push + +ஒரு வரிசையில் சில உருப்படிகளை push செய்து கடைசி குறியீட்டை புதிதாக சேர்க்கப்பட்ட உருப்படியாக ஆக்கலாம். இது ஒரு வரிசையின் நீளத்தை மாற்றி புதிய நீளத்தை திரும்பப் பெறுகிறது. + +`push` பயன்படுத்துவதற்கான தொடரியல் இங்கே: + +```c +array.push(element1[, ...[, elementN]]); +``` + +`element1, ..., elementN` வாதங்கள் வரிசையின் இறுதியில் சேர்க்கப்பட வேண்டிய உறுப்புகளை குறிக்கின்றன. + +எடுத்துக்காட்டாக: + +```javascript +let array = [1, 2, 3]; +array.push(4); + +console.log(array); + +// Result: array = [1, 2, 3, 4] +``` + +முதலில் `Array.prototype.slice()` முறையைப் பயன்படுத்தி வரிசையாக மாற்றி array-like பொருளின் (arguments பொருள் அல்லது NodeList பொருள் போன்ற) இறுதியில் உறுப்புகளை சேர்க்கவும் `push` ஐப் பயன்படுத்தலாம்: + +```javascript +function printArguments() { + let args = Array.prototype.slice.call(arguments); + args.push('d', 'e', 'f'); + console.log(args); +} + +printArguments('a', 'b', 'c'); // Result: ["a", "b", "c", "d", "e", "f"] +``` + +> **குறிப்பு**: `push` முறை அசல் வரிசையை மாற்றுகிறது. இது புதிய வரிசையை உருவாக்காது. diff --git a/ta/arrays/reverse.md b/ta/arrays/reverse.md new file mode 100644 index 00000000..10df2d3d --- /dev/null +++ b/ta/arrays/reverse.md @@ -0,0 +1,40 @@ +--- +chapter: 6 +pageNumber: 59 +description: வரிசையின் தொடக்கத்தில் ஒரு உறுப்பை சேர்க்க reverse முறையைப் பயன்படுத்தலாம். இது அசல் வரிசையை மாற்றி புதிய வரிசை நீளத்தை திரும்பப் பெறுகிறது. +--- +# தலைகீழாக்கு + +`reverse` முறையை சரங்களின் வரிசைகள், எண்களின் வரிசைகள் மற்றும் பொருட்களின் வரிசைகள் உட்பட எந்த வகையான வரிசையிலும் பயன்படுத்தலாம். எடுத்துக்காட்டாக: + +```javascript +let users = [{ + name: "John Smith", + age: 30 +}, { + name: "Jane Doe", + age: 25 +}]; + +users.reverse(); + +console.log(users); + +// RESULT: +[{ + name: "Jane Doe", + age: 25 +}, { + name: "John Smith", + age: 30 +}]; +``` + +`reverse` முறை அழைக்கும் வரிசை பொருளின் உறுப்புகளை இடத்திலேயே மாற்றி வரிசையை mutate செய்து வரிசையை குறிப்பை திரும்பப் பெறுகிறது. +ஒரு வரிசையின் `reverse` பயன்படுத்துவதற்கான எடுத்துக்காட்டு: + +```javascript +const numbers = [1, 2, 3]; +const newLength = numbers.reverse(); +console.log(numbers); // [3, 2, 1] +``` diff --git a/ta/arrays/shift.md b/ta/arrays/shift.md new file mode 100644 index 00000000..610f1123 --- /dev/null +++ b/ta/arrays/shift.md @@ -0,0 +1,35 @@ +--- +chapter: 6 +pageNumber: 51 +description: shift முறை வரிசையின் முதல் குறியீட்டு உறுப்பை நீக்கி அனைத்து குறியீடுகளையும் இடதுபுறம் நகர்த்துகிறது. இது அசல் வரிசையை மாற்றுகிறது. +--- +# Shift + +`shift` முறை அந்த வரிசையின் முதல் குறியீட்டை நீக்கி அனைத்து குறியீடுகளையும் இடதுபுறம் நகர்த்துகிறது. இது அசல் வரிசையை மாற்றுகிறது. `shift` பயன்படுத்துவதற்கான தொடரியல் இங்கே: + +```c +array.shift(); +``` + +எடுத்துக்காட்டாக: + +```javascript +let array = [1, 2, 3]; +array.shift(); + +// Result: array = [2,3] +``` + +ஒரு வரிசையிலிருந்து அனைத்து உறுப்புகளையும் நீக்க ஒரு loop உடன் இணைந்து `shift` முறையைப் பயன்படுத்தலாம். இதை எவ்வாறு செய்வது என்பதற்கான எடுத்துக்காட்டு: + +```c +while (array.length > 0) { + array.shift(); +} + +console.log(array); // Result: [] +``` + +{% hint style="working" %} +`shift` முறை வரிசைகளில் மட்டுமே செயல்படுகிறது, arguments பொருட்கள் அல்லது NodeList பொருட்கள் போன்ற வரிசைகளுக்கு ஒத்த மற்ற பொருட்களில் அல்ல. இந்த வகையான பொருட்களிலிருந்து உறுப்புகளை shift செய்ய வேண்டும் என்றால், முதலில் `Array.prototype.slice()` முறையைப் பயன்படுத்தி வரிசையாக மாற்ற வேண்டும். +{% endhint %} diff --git a/ta/arrays/slice.md b/ta/arrays/slice.md new file mode 100644 index 00000000..bb7037e2 --- /dev/null +++ b/ta/arrays/slice.md @@ -0,0 +1,50 @@ +--- +chapter: 6 +pageNumber: 60 +description: Javascript arr.slice() முறை அது செயல்படுத்தப்படும் வரிசையின் ஒரு பகுதியை கொண்ட புதிய வரிசையை திரும்பப் பெறுகிறது. அசல் மாறாமல் இருக்கும். +--- +# Slice + +`slice` முறை begin மற்றும் end என்ற இரண்டு அளவுருக்களை ஏற்கிறது. +* **begin**: இந்த அளவுரு பகுதியை பிரித்தெடுக்கும் தொடக்க குறியீட்டை வரையறுக்கிறது. + இந்த வாதம் இல்லாவிட்டால் முறை begin ஐ `0` என எடுக்கும் ஏனென்றால் இது இயல்புநிலை தொடக்க மதிப்பு. +* **end**: இந்த அளவுரு பகுதியை பிரித்தெடுக்கும் குறியீடு (end குறியீட்டை தவிர்த்து). + இந்த வாதம் வரையறுக்கப்படவில்லை என்றால் இறுதி வரை உள்ள வரிசை பிரித்தெடுக்கப்படும், ஏனென்றால் இது இயல்புநிலை இறுதி மதிப்பு. end மதிப்பு வரிசையின் நீளத்தை விட அதிகமாக இருந்தால், end மதிப்பு வரிசையின் நீளமாக மாறும். + +```javascript +function func() { + //அசல் வரிசை + let arr = [23, 56, 87, 32, 75, 13]; + //பிரித்தெடுக்கப்பட்ட வரிசை + let new_arr = arr.slice(); + console.log(arr); + console.log(new_arr); +} +func(); + + +// RESULT: +[23,56,87,32,75,13] +[23,56,87,32,75,13] +``` + +`slice()` முறை புதிய வரிசையில் பொருள் குறிப்புகளை நகலெடுக்கிறது (எடுத்துக்காட்டாக, நெஸ்டட் வரிசை). எனவே, குறிப்பிடப்பட்ட பொருள் மாற்றப்பட்டால், மாற்றங்கள் திரும்பப் பெற்ற புதிய வரிசையில் தெரியும். + +```javascript +let human = { + name: "David", + age: 23, +}; + +let arr = [human, "Nepal", "Manager"]; +let new_arr = arr.slice(); + +// அசல் பொருள் +console.log(arr[0]); // { name: 'David', age: 23 } + +// புதிய வரிசையில் உள்ள பொருளை மாற்றுதல் +new_arr[0].name = "Levy"; + +// மாற்றங்கள் பிரதிபலிக்கின்றன +console.log(arr[0]); // { name: 'Levy', age: 23 } +``` diff --git a/ta/arrays/sort.md b/ta/arrays/sort.md new file mode 100644 index 00000000..0d6545c7 --- /dev/null +++ b/ta/arrays/sort.md @@ -0,0 +1,49 @@ +--- +chapter: 6 +pageNumber: 57 +description: sort முறை ஒரு வரிசையின் உருப்படிகளை குறிப்பிட்ட வரிசையில் வரிசைப்படுத்துகிறது. இயல்பாக, இது உறுப்புகளை சரங்களாக வரிசைப்படுத்தி அவற்றின் UTF-16 குறியீட்டு அலகு மதிப்புகளின் அடிப்படையில் ஏறுவரிசையில் அமைக்கிறது. +--- +# வரிசைப்படுத்து + +`sort` முறை ஒரு வரிசையின் உருப்படிகளை குறிப்பிட்ட வரிசையில் (ஏறுவரிசை அல்லது இறங்குவரிசை) வரிசைப்படுத்துகிறது. இயல்பாக, `sort` முறை உறுப்புகளை சரங்களாக வரிசைப்படுத்தி அவற்றின் UTF-16 குறியீட்டு அலகு மதிப்புகளின் அடிப்படையில் ஏறுவரிசையில் அமைக்கிறது. + +`sort` பயன்படுத்துவதற்கான தொடரியல் இங்கே: + +```c +array.sort([compareFunction]); +``` + +`compareFunction` வாதம் விரும்பினால் மட்டுமே மற்றும் வரிசைப்படுத்தல் வரிசையை வரையறுக்கும் ஒரு செயல்பாட்டை குறிப்பிடுகிறது. தவிர்க்கப்பட்டால், உறுப்புகள் அவற்றின் சர குறிப்பீட்டின் படி ஏறுவரிசையில் வரிசைப்படுத்தப்படுகின்றன. + +எடுத்துக்காட்டாக: + +```javascript +let city = ["California", "Barcelona", "Paris", "Kathmandu"]; +let sortedCity = city.sort(); + +console.log(sortedCity); + +// Result: ['Barcelona', 'California', 'Kathmandu', 'Paris'] + +``` + +{% hint style="info" %} +எண்களை வரிசைப்படுத்தும்போது அவை தவறாக வரிசைப்படுத்தப்படலாம். எடுத்துக்காட்டாக, "35" "100" ஐ விட பெரியது, ஏனென்றால் "3" "1" ஐ விட பெரியது. +{% endhint %} + +எண்களில் வரிசைப்படுத்தல் சிக்கலை சரிசெய்ய, compare functions பயன்படுத்தப்படுகின்றன. Compare functions வரிசைப்படுத்தல் வரிசைகளை வரையறுக்கின்றன மற்றும் வாதங்களின் அடிப்படையில் **எதிர்மறை**, **பூஜ்ஜியம்**, அல்லது **நேர்மறை** மதிப்பை திரும்பப் பெறுகின்றன, இவ்வாறு: + +* `a` ஐ `b` க்கு முன்பு வரிசைப்படுத்த வேண்டும் என்றால் எதிர்மறை மதிப்பு +* `a` ஐ `b` க்கு பிறகு வரிசைப்படுத்த வேண்டும் என்றால் நேர்மறை மதிப்பு +* `a` மற்றும் `b` சமனாக இருந்து அவற்றின் வரிசை முக்கியமில்லை என்றால் `0` + +```javascript +const points = [40, 100, 1, 5, 25, 10]; +points.sort((a, b) => {return a-b}); + +// Result: [1, 5, 10, 25, 40, 100] +``` + +{% hint style="working" %} +`sort()` முறை அசல் வரிசையை மேலெழுதுகிறது. +{% endhint %} diff --git a/ta/arrays/spread.md b/ta/arrays/spread.md new file mode 100644 index 00000000..20b837a4 --- /dev/null +++ b/ta/arrays/spread.md @@ -0,0 +1,32 @@ +--- +chapter: 6 +pageNumber: 50 +description: Spread ஆபரேட்டர் வரிசை அல்லது பொருளை வரிசைகள் மற்றும் பொருட்களை விரைவாக கையாள அனுமதிக்கிறது. இது வரிசைகளிலிருந்து உறுப்புகளை நகலெடுக்க, இணைக்க அல்லது பிரித்தெடுக்க மற்றும் பொருட்களிலிருந்து பண்புகளை நகலெடுக்க சுருக்கமான தொடரியலை வழங்குகிறது. +--- +# Spread + +Spread ஆபரேட்டரைப் `(...)` பயன்படுத்தி ஒரு வரிசை அல்லது பொருளை மற்றொரு வரிசை அல்லது பொருளில் விரைவாக நகலெடுக்கலாம். ஒரு வரிசை போன்ற iterable ஐ பூஜ்ஜியம் அல்லது அதிகமான வாதங்கள் (செயல்பாடு அழைப்புகளுக்கு) அல்லது உறுப்புகள் (வரிசை literals க்கு) எதிர்பார்க்கப்படும் இடங்களில் விரிவாக்க, அல்லது பூஜ்ஜியம் அல்லது அதிகமான key-value ஜோடிகள் (பொருள் literals க்கு) எதிர்பார்க்கப்படும் இடங்களில் ஒரு பொருள் வெளிப்பாட்டை விரிவாக்க இது அனுமதிக்கிறது. + +இதற்கான சில எடுத்துக்காட்டுகள்: + +```javascript +let arr = [1, 2, 3, 4, 5]; + +console.log(...arr); +// Result: 1 2 3 4 5 + +let arr1; +arr1 = [...arr]; //arr ஐ arr1 இல் நகலெடுக்கிறது + +console.log(arr1); //Result: [1, 2, 3, 4, 5] + +arr1 = [6,7]; +arr = [...arr,...arr1]; + +console.log(arr); //Result: [1, 2, 3, 4, 5, 6, 7] + +``` + +{% hint style="working" %} +spread ஆபரேட்டர் அம்சத்தை ஆதரிக்கும் நவீன உலாவிகளில் மட்டுமே செயல்படுகிறது. பழைய உலாவிகளை ஆதரிக்க வேண்டும் என்றால், spread ஆபரேட்டர் தொடரியலை சமான ES5 குறியீட்டாக மாற்ற Babel போன்ற transpiler ஐப் பயன்படுத்த வேண்டும். +{% endhint %} diff --git a/ta/arrays/unshift.md b/ta/arrays/unshift.md new file mode 100644 index 00000000..6506eafc --- /dev/null +++ b/ta/arrays/unshift.md @@ -0,0 +1,30 @@ +--- +chapter: 6 +pageNumber: 48 +description: வரிசையின் தொடக்கத்தில் ஒரு உறுப்பை சேர்க்க unshift முறையைப் பயன்படுத்தலாம். இது அசல் வரிசையை மாற்றி புதிய வரிசை நீளத்தை திரும்பப் பெறுகிறது. +--- +# Unshift + +`unshift` முறை வரிசையின் தொடக்கத்தில் அல்லது முன்பகுதியில் புதிய உறுப்புகளை வரிசையாக சேர்க்கிறது. இது அசல் வரிசையை மாற்றி வரிசையின் புதிய நீளத்தை திரும்பப் பெறுகிறது. எடுத்துக்காட்டாக: + +```javascript +let array = [0, 5, 10]; +array.unshift(-5); // 4 + +// RESULT: array = [-5 , 0, 5, 10]; +``` + +{% hint style="working" %} +`unshift()` முறை அசல் வரிசையை மேலெழுதுகிறது. +{% endhint %} + +`unshift` முறை ஒன்று அல்லது அதிகமான வாதங்களை எடுக்கிறது, இவை வரிசையின் தொடக்கத்தில் சேர்க்கப்பட வேண்டிய உறுப்புகளை குறிக்கின்றன. அவை வழங்கப்படும் வரிசையில் உறுப்புகளை சேர்க்கிறது, எனவே முதல் உறுப்பு வரிசையின் முதல் உறுப்பாக இருக்கும். + +ஒரு வரிசையில் பல உறுப்புகளை சேர்க்க `unshift` ஐப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு: + +```javascript +const numbers = [1, 2, 3]; +const newLength = numbers.unshift(-1, 0); +console.log(numbers); // [-1, 0, 1, 2, 3] +console.log(newLength); // 5 +``` diff --git a/ta/basics/README.md b/ta/basics/README.md new file mode 100644 index 00000000..10425f43 --- /dev/null +++ b/ta/basics/README.md @@ -0,0 +1,33 @@ +--- +layout: editorial +chapter: 2 +pageNumber: 11 +description: நிரலாக்கம் என்பது குறியீடு எழுதுவதாகும். ஒரு புத்தகம் அத்தியாயங்கள், பத்திகள், வாக்கியங்கள், சொற்றொடர்கள், வார்த்தைகள் மற்றும் இறுதியில் நிறுத்தற்குறிகள் மற்றும் எழுத்துகளால் ஆனது, அதேபோல் ஒரு நிரலை சிறிய மற்றும் சிறிய கூறுகளாக உடைக்கலாம். +--- + +# அத்தியாயம் 2 +# அடிப்படைகள் + +இந்த முதல் அத்தியாயத்தில், நிரலாக்கம் மற்றும் Javascript மொழியின் அடிப்படைகளை கற்போம். + +நிரலாக்கம் என்பது குறியீடு எழுதுவதாகும். ஒரு புத்தகம் அத்தியாயங்கள், பத்திகள், வாக்கியங்கள், சொற்றொடர்கள், வார்த்தைகள் மற்றும் இறுதியில் நிறுத்தற்குறிகள் மற்றும் எழுத்துகளால் ஆனது, அதேபோல் ஒரு நிரலை சிறிய மற்றும் சிறிய கூறுகளாக உடைக்கலாம். இப்போதைக்கு, மிக முக்கியமானது ஒரு அறிக்கையாகும். ஒரு அறிக்கை புத்தகத்தில் ஒரு வாக்கியத்திற்கு ஒத்ததாகும். சொந்தமாக, இது கட்டமைப்பு மற்றும் நோக்கம் கொண்டுள்ளது, ஆனால் அதைச் சுற்றியுள்ள மற்ற அறிக்கைகளின் சூழல் இல்லாமல், அது அர்த்தமுள்ளதாக இல்லை. + +ஒரு அறிக்கை சாதாரணமாக (மற்றும் பொதுவாக) _குறியீட்டின் ஒரு வரி_ என்று அழைக்கப்படுகிறது. ஏனென்றால் அறிக்கைகள் தனித்தனி வரிகளில் எழுதப்படுகின்றன. எனவே, நிரல்கள் மேலிருந்து கீழாக, இடமிருந்து வலமாக படிக்கப்படுகின்றன. குறியீடு (மூல குறியீடு என்றும் அழைக்கப்படுகிறது) என்னவென்று நீங்கள் யோசிக்கலாம். அது நிரலின் முழுமையையோ அல்லது சிறிய பகுதியையோ குறிக்கும் ஒரு பரந்த வார்த்தையாகும். எனவே, குறியீட்டின் ஒரு வரி என்பது உங்கள் நிரலின் ஒரு வரி மட்டுமே. + +இங்கே ஒரு எளிய எடுத்துக்காட்டு: + +```javascript +let hello = "Hello"; +let world = "World"; + +// Message equals "Hello World" +let message = hello + " " + world; +``` + +இந்த குறியீடு _மொழிபெயர்ப்பாளர்_ என்று அழைக்கப்படும் மற்றொரு நிரலால் இயக்கப்படலாம், இது குறியீட்டை படிக்கும் மற்றும் அனைத்து அறிக்கைகளையும் சரியான வரிசையில் இயக்கும். + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [கருத்துகள்](./comments.md) +* [சமத்துவம்](./equality.md) +* [வகைகள்](./types.md) +* [மாறிகள்](./variables.md) diff --git a/ta/basics/comments.md b/ta/basics/comments.md new file mode 100644 index 00000000..a8e2799e --- /dev/null +++ b/ta/basics/comments.md @@ -0,0 +1,80 @@ +--- +chapter: 2 +pageNumber: 12 +description: கருத்துகள் மற்ற நிரலாளர்களுக்கு அல்லது குறியீட்டைப் பற்றிய சிறிய விளக்கங்களுக்கான குறிப்புகளை குறிக்க பயன்படுத்தப்படுகின்றன, இது மற்றவர்களுக்கு புரிந்துகொள்ள உதவுகிறது. இந்த அறிக்கைகள் மொழிபெயர்ப்பாளரால் இயக்கப்படுவதில்லை. +--- + +# கருத்துகள் + +கருத்துகள் என்பது மொழிபெயர்ப்பாளரால் இயக்கப்படாத அறிக்கைகளாகும். அவை மற்ற நிரலாளர்களுக்கான குறிப்புகளை குறிக்க அல்லது குறியீடு என்ன செய்கிறது என்பதற்கான சிறிய விளக்கங்களை வழங்க பயன்படுத்தப்படுகின்றன, இதனால் உங்கள் குறியீடு என்ன செய்கிறது என்பதை மற்றவர்கள் புரிந்துகொள்வது எளிதாகிறது. நிரல் கட்டுப்பாட்டு ஓட்டத்தை பாதிக்காமல் குறியீட்டை தற்காலிகமாக முடக்கவும் பயன்படுகின்றன. + +## கருத்துகளின் வகைகள் + +### ஒற்றை வரி கருத்துகள் + +ஒற்றை-வரி கருத்துகள் இரண்டு முன்னோக்கு சாய்வுக்கோடுகளுடன் (`//`) தொடங்கி வரியின் முடிவு வரை தொடரும். சாய்வுக்கோடுகளைத் தொடர்ந்து எதுவும் JavaScript மொழிபெயர்ப்பாளரால் புறக்கணிக்கப்படும். + +```javascript +// இது ஒரு கருத்து, இது மொழிபெயர்ப்பாளரால் புறக்கணிக்கப்படும் +let a = "இது ஒரு மாறி"; +``` + +ஒரு வரியின் முடிவிலும் பயன்படுத்தலாம்: + +```javascript +let b = 5; // இதுவும் ஒரு சரியான ஒற்றை-வரி கருத்து +``` + +### பல-வரி கருத்துகள் +பல-வரி கருத்துகள் `/*` உடன் தொடங்கி `*/` உடன் முடியும். இடையில் உள்ள அனைத்தும் புறக்கணிக்கப்படும். + +```javascript +/* + இது ஒரு பல-வரி கருத்து. + மிகவும் சிக்கலான தர்க்கத்தை விளக்க + அல்லது குறியீட்டை தற்காலிகமாக தடுக்க பயன்படுத்தலாம். +*/ +let x = 10; +``` + +### கருத்துகளின் உண்மையான எடுத்துக்காட்டுகள் +```javascript +// தலைப்பை மாற்று: +document.getElementById("myH").innerHTML = "என் முதல் பக்கம்"; + +// பத்தியை மாற்று: +document.getElementById("myP").innerHTML = "என் முதல் பத்தி."; +``` + +```javascript +/* + புதிய UI ஓட்டத்தை சோதிக்கும் போது வரவேற்பு செய்தி தற்காலிகமாக முடக்கப்பட்டது. +*/ + +/* +document.getElementById("myH").innerHTML = "மீண்டும் வரவேற்கிறோம்!"; +document.getElementById("myP").innerHTML = "மீண்டும் உங்களை பார்க்கவே மகிழ்ச்சி."; +*/ +``` + +பிழைத்திருத்த நோக்கங்களுக்கும் பயனுள்ளவை: + +```javascript +let total = 0; +// total = calculateTotal(items); // சோதனையின் போது தற்காலிகமாக முடக்கப்பட்டது +``` + +```javascript +/* + உள்நுழைவு சிக்கலுக்கான பிழைத்திருத்த பதிவுகள் + சிக்கல் தீர்க்கப்பட்ட பிறகு கருத்தாடப்பட்டது +*/ + +/* +console.log("பயனர் தரவு:", user); +console.log("Auth token:", token); +console.log("API இலிருந்து பதில்:", response); +*/ +``` + +குறியீட்டில் கருத்துகளை சேர்ப்பது குறியீட்டின் தரத்தை பராமரிக்கவும், ஒத்துழைப்பை இயக்கவும் மற்றும் பிழைத்திருத்த செயல்முறையை எளிதாக்கவும் அவசியம். நிரலின் பல்வேறு பகுதிகளுக்கு சூழல் மற்றும் விளக்கங்களை வழங்குவதன் மூலம், கருத்துகள் எதிர்காலத்தில் குறியீட்டை புரிந்துகொள்வதை எளிதாக்குகின்றன. எனவே, குறியீட்டில் கருத்துகளை சேர்ப்பது ஒரு பயனுள்ள நடைமுறையாக கருதப்படுகிறது. \ No newline at end of file diff --git a/ta/basics/equality.md b/ta/basics/equality.md new file mode 100644 index 00000000..339ce0ee --- /dev/null +++ b/ta/basics/equality.md @@ -0,0 +1,56 @@ +--- +chapter: 2 +pageNumber: 17 +description: சமத்துவ ஆபரேட்டர் ஒப்பீட்டிற்கு பயன்படுத்தப்படுகிறது. இரண்டு மாறிகள் சமனாக இருக்கின்றனவா என்பதை தீர்மானிக்க பயன்படுத்தலாம், அவை ஒரே வகையில் இல்லாவிட்டாலும் கூட. +--- + +# சமத்துவம் + +ஒரு நிரலை எழுதும் போது, பிற மாறிகளுடன் தொடர்பாக மாறிகளின் சமத்துவத்தை அடிக்கடி தீர்மானிக்க வேண்டும். இது சமத்துவ ஆபரேட்டரைப் பயன்படுத்தி செய்யப்படுகிறது. மிக அடிப்படையான சமத்துவ ஆபரேட்டர் `==` ஆபரேட்டராகும். இந்த ஆபரேட்டர் இரண்டு மாறிகள் சமனாக இருக்கின்றனவா என்பதை தீர்மானிக்க தன்னால் முடிந்ததையெல்லாம் செய்கிறது, அவை ஒரே வகையில் இல்லாவிட்டாலும் கூட. + +எடுத்துக்காட்டாக, அனுமானிக்கவும்: + +```javascript +let foo = 42; +let bar = 42; +let baz = "42"; +let qux = "life"; +``` + +`foo == bar` `true` என மதிப்பிடப்படும் மற்றும் `baz == qux` `false` என மதிப்பிடப்படும், ஒருவர் எதிர்பார்ப்பதுபோல். இருப்பினும், `foo` மற்றும் `baz` வெவ்வேறு வகைகளாக இருந்தாலும் `foo == baz` `true` என மதிப்பிடப்படும். திரைக்கு பின்னால் `==` சமத்துவ ஆபரேட்டர் சமத்துவத்தை தீர்மானிக்கும் முன்பு அதன் operand களை ஒரே வகைக்கு மாற்ற முயற்சிக்கிறது. இது `===` சமத்துவ ஆபரேட்டருக்கு மாறானது. + +`===` சமத்துவ ஆபரேட்டர் இரண்டு மாறிகள் ஒரே வகையில் இருந்தால் _மற்றும்_ ஒரே மதிப்பை கொண்டிருந்தால் அவை சமனாக இருப்பதாக தீர்மானிக்கிறது. முன்பு போல் அதே அனுமானங்களுடன், இதன் பொருள் `foo === bar` இன்னும் `true` என மதிப்பிடப்படும், ஆனால் `foo === baz` இப்போது `false` என மதிப்பிடப்படும். `baz === qux` இன்னும் `false` என மதிப்பிடப்படும். + +{% exercise %} +`str1` மற்றும் `str2` இன் மதிப்புகளை ஒப்பிட `==` மற்றும் `===` ஆபரேட்டரைப் பயன்படுத்தவும். + +{% initial %} +let str1 = "hello"; +let str2 = "HELLO"; +let bool1 = true; +let bool2 = 1; +// == பயன்படுத்தி ஒப்பிடவும் +let stringResult1 = +let boolResult1 = +// === பயன்படுத்தி ஒப்பிடவும் +let stringResult1 = +let boolResult2 = +{% solution %} +let str1 = "hello"; +let str2 = "HELLO"; +let bool1 = true; +let bool2 = 1; +// == பயன்படுத்தி ஒப்பிடவும் +let stringResult1 = str1 == str2 // false +let boolResult1 = bool1 == bool2 // true + +// === பயன்படுத்தி ஒப்பிடவும் +let stringResult2 = str1 === str2 // false +let boolResult2 = bool1 === bool2 // false + + +{% validation %} +assert(stringResult1 === false && stringResult2 === false && boolResult1 ==true && boolResult2 === false ); + +{% context %} +{% endexercise %} diff --git a/ta/basics/types.md b/ta/basics/types.md new file mode 100644 index 00000000..a9ac11a4 --- /dev/null +++ b/ta/basics/types.md @@ -0,0 +1,103 @@ +--- +chapter: 2 +pageNumber: 15 +description: வகைகள் என்பது மொழியில் குறிப்பிடப்படும் மற்றும் கையாளப்படும் தரவின் வகைகளாகும். +--- + +# வகைகள் + +கணினிகள் சுவாரஸ்யமானவை மற்றும் வெறும் எண்களை விட மிகவும் சிக்கலான மாறிகளை பயன்படுத்த முடியும். இங்கே மாறி வகைகள் வருகின்றன. மாறிகள் பல வகைகளில் வருகின்றன மற்றும் வெவ்வேறு மொழிகள் வெவ்வேறு வகைகளை ஆதரிக்கின்றன. + +மிகவும் பொதுவான வகைகள்: + +* **Number (எண்)**: எண்கள் முழு எண்களாக (எ.கா., `1`, `-5`, `100`) அல்லது மிதவை-புள்ளி மதிப்புகளாக (எ.கா., `3.14`, `-2.5`, `0.01`) இருக்கலாம். JavaScript இல் முழு எண்கள் மற்றும் மிதவை-புள்ளி மதிப்புகளுக்கு தனித்தனி வகை இல்லை; இரண்டையும் எண்களாக கருதுகிறது. +* **String (சரம்)**: சரங்கள் எழுத்துகளின் வரிசைகளாகும், ஒற்றை மேற்கோள்கள் (எ.கா., `'hello'`) அல்லது இரட்டை மேற்கோள்கள் (எ.கா., `"world"`) மூலம் குறிப்பிடப்படுகின்றன. +* **Boolean**: Boolean கள் உண்மை அல்லது பொய் மதிப்பை குறிக்கின்றன. அவை `true` அல்லது `false` என எழுதலாம் (மேற்கோள்கள் இல்லாமல்). +* **Null**: null வகை ஒரு null மதிப்பை குறிக்கிறது, இது "மதிப்பு இல்லை" என்று பொருள்படும். அதை `null` என எழுதலாம் (மேற்கோள்கள் இல்லாமல்). +* **Undefined**: undefined வகை அமைக்கப்படாத மதிப்பை குறிக்கிறது. ஒரு மாறி அறிவிக்கப்பட்டிருந்தால் ஆனால் மதிப்பு ஒதுக்கப்படவில்லை என்றால், அது `undefined`. +* **Object (பொருள்)**: ஒரு பொருள் பண்புகளின் தொகுப்பாகும், ஒவ்வொன்றும் பெயர் மற்றும் மதிப்பு கொண்டது. சுருள் பிரேஸ்களைப் (`{}`) பயன்படுத்தி மற்றும் பெயர்-மதிப்பு ஜோடிகளைப் பயன்படுத்தி பண்புகளை ஒதுக்கி ஒரு பொருளை உருவாக்கலாம். +* **Array (வரிசை)**: ஒரு வரிசை என்பது உருப்படிகளின் தொகுப்பை வைத்திருக்கக்கூடிய ஒரு சிறப்பு வகையான பொருளாகும். சதுர அடைப்புக்குறிகளைப் (`[]`) பயன்படுத்தி மற்றும் மதிப்புகளின் பட்டியலை ஒதுக்கி ஒரு வரிசையை உருவாக்கலாம். +* **Function (செயல்பாடு)**: ஒரு செயல்பாடு என்பது வரையறுக்கப்பட்டு பின்னர் பெயரால் அழைக்கக்கூடிய குறியீட்டின் ஒரு block. [செயல்பாடுகள்](../functions/README.md) வாதங்களை (உள்ளீடுகளை) ஏற்கலாம் மற்றும் ஒரு மதிப்பை (வெளியீட்டை) திரும்பப் பெறலாம். `function` முக்கியசொல்லைப் பயன்படுத்தி ஒரு செயல்பாட்டை உருவாக்கலாம். + +JavaScript ஒரு "_loosely typed_" மொழியாகும், அதாவது மாறிகள் என்ன வகையான தரவு என்பதை நீங்கள் வெளிப்படையாக அறிவிக்க வேண்டியதில்லை. நீங்கள் ஒரு மாறியை அறிவிக்கிறீர்கள் என்பதை குறிக்க `var` முக்கியசொல்லை பயன்படுத்த வேண்டும், மேலும் மொழிபெயர்ப்பாளர் சூழலில் இருந்து மற்றும் மேற்கோள்களின் பயன்பாட்டிலிருந்து நீங்கள் என்ன தரவு வகை பயன்படுத்துகிறீர்கள் என்பதை கண்டுபிடிக்கும். + +{% exercise %} +மூன்று மாறிகளை அறிவித்து அவற்றை பின்வரும் மதிப்புகளுடன் தொடங்கவும்: `age` எண்ணாக, `name` சரமாக மற்றும் `isMarried` boolean ஆக. + +{% initial %} +let age = +let name = +let isMarried = +{% solution %} +let age = 30 +let name = "Cecilia" +let isMarried = true + +{% validation %} +assert(typeof age === "number" && typeof name === "string" && typeof isMarried === "boolean"); + +{% context %} +{% endexercise %} + +`typeof` ஆபரேட்டர் ஒரு மாறியின் தரவு வகைகளை சரிபார்க்க பயன்படுத்தப்படுகிறது. + +```javascript +typeof "John" // "string" திரும்பப் பெறுகிறது +typeof 3.14 // "number" திரும்பப் பெறுகிறது +typeof NaN // "number" திரும்பப் பெறுகிறது +typeof false // "boolean" திரும்பப் பெறுகிறது +typeof [1,2,3,4] // "object" திரும்பப் பெறுகிறது +typeof {name:'John', age:34} // "object" திரும்பப் பெறுகிறது +typeof new Date() // "object" திரும்பப் பெறுகிறது +typeof function () {} // "function" திரும்பப் பெறுகிறது +typeof myCar // "undefined" திரும்பப் பெறுகிறது * +typeof null // "object" திரும்பப் பெறுகிறது +``` + +JavaScript இல் பயன்படுத்தப்படும் தரவு வகைகள் மதிப்புகளை கொண்டிருப்பதன் அடிப்படையில் இரண்டு வகைகளாக வேறுபடுத்தலாம். + +மதிப்புகளை கொண்டிருக்கக்கூடிய தரவு வகைகள்: + +* `string` +* `number` +* `boolean` +* `object` +* `function` + +{% hint style="info" %} +`Object`, `Date`, `Array`, `String`, `Number`, மற்றும் `Boolean` ஆகியவை JavaScript இல் கிடைக்கும் பொருட்களின் வகைகள். +{% endhint %} + +மதிப்புகளை கொண்டிருக்க முடியாத தரவு வகைகள்: + +* `null` +* `undefined` + +ஒரு primitive தரவு மதிப்பு என்பது கூடுதல் பண்புகள் மற்றும் முறைகள் இல்லாத ஒரு எளிய தரவு மதிப்பாகும், மேலும் இது ஒரு பொருள் அல்ல. அவை மாற்ற முடியாதவை, அதாவது அவற்றை மாற்ற முடியாது. 7 primitive தரவு வகைகள் உள்ளன: + +* string +* number +* bigint +* boolean +* undefined +* symbol +* null + +{% exercise %} +`person` என்ற மாறியை அறிவித்து பின்வரும் பண்புகளைக் கொண்ட ஒரு பொருளுடன் தொடங்கவும்: `age` எண்ணாக, `name` சரமாக மற்றும் `isMarried` boolean ஆக. + +{% initial %} +let person = + +{% solution %} +let person = { + name: "Mary", + age: 25, + isMarried: false +}; + +{% validation %} +assert(typeof person.age === "number" && typeof person.name === "string" && typeof person.isMarried === "boolean"); + +{% context %} +{% endexercise %} diff --git a/ta/basics/variables.md b/ta/basics/variables.md new file mode 100644 index 00000000..d1dedcfd --- /dev/null +++ b/ta/basics/variables.md @@ -0,0 +1,116 @@ +--- +chapter: 2 +pageNumber: 13 +description: மாறிகள் தரவை சேமிக்கவும் வைத்திருக்கவும் பயன்படுத்தப்படுகின்றன. இது எண்கள், சரங்கள், boolean, பொருட்கள், வரிசைகள், செயல்பாடுகள் மற்றும் பலவற்றை போன்ற பல்வேறு வகையான மதிப்புகளை வைத்திருக்கலாம். +--- + +# மாறிகள் + +நிரலாக்கத்தை உண்மையிலேயே புரிந்துகொள்வதற்கான முதல் படி இயற்கணிதத்தை திரும்பிப் பார்ப்பதாகும். நீங்கள் பள்ளியில் அதை நினைவு வைத்திருந்தால், இயற்கணிதம் பின்வருவனவற்றை போன்ற சொற்களை எழுதுவதுடன் தொடங்குகிறது. + +```javascript +3 + 5 = 8 +``` + +நீங்கள் ஒரு தெரியாத அளவை அறிமுகப்படுத்தும்போது கணக்கீடுகளை செய்யத் தொடங்குகிறீர்கள், எடுத்துக்காட்டாக, கீழே `x`: + +```javascript +3 + x = 8 +``` + +அவற்றை மாற்றி `x` ஐ தீர்மானிக்கலாம்: + +```javascript +x = 8 - 3 +-> x = 5 +``` + +நீங்கள் ஒன்றுக்கு மேற்பட்டவற்றை அறிமுகப்படுத்தும்போது உங்கள் சொற்களை மிகவும் நெகிழ்வானதாக ஆக்குகிறீர்கள் - நீங்கள் மாறிகளை பயன்படுத்துகிறீர்கள்: + +```javascript +x + y = 8 +``` + +`x` மற்றும் `y` இன் மதிப்புகளை மாற்றலாம் மற்றும் சூத்திரம் இன்னும் உண்மையாக இருக்கலாம்: + +```javascript +x = 4 +y = 4 +``` + +அல்லது + +```javascript +x = 3 +y = 5 +``` + +நிரலாக்க மொழிகளுக்கும் அதே உண்மை. நிரலாக்கத்தில், மாறிகள் மாறும் மதிப்புகளுக்கான கொள்கலன்கள். மாறிகள் அனைத்து வகையான மதிப்புகளையும் கணக்கீடுகளின் முடிவுகளையும் வைத்திருக்கலாம். மாறிகளுக்கு `name` மற்றும் `value` ஆகியவை சமமான அடையாளத்தால் `(=)` பிரிக்கப்பட்டிருக்கும். இருப்பினும், வெவ்வேறு நிரலாக்க மொழிகளுக்கு மாறி பெயர்களாக என்ன பயன்படுத்தலாம் என்பதில் அவற்றின் சொந்த வரம்புகள் மற்றும் கட்டுப்பாடுகள் இருப்பதை மனதில் கொள்வது முக்கியம். ஏனென்றால் சில வார்த்தைகள் மொழிக்குள் குறிப்பிட்ட செயல்பாடுகள் அல்லது செயல்பாட்டிற்காக ஒதுக்கப்படலாம். + +Javascript இல் இது எவ்வாறு செயல்படுகிறது என்பதைப் பார்ப்போம். பின்வரும் குறியீடு இரண்டு மாறிகளை வரையறுக்கிறது, இரண்டையும் கூட்டுவதன் முடிவை கணக்கிடுகிறது, மற்றும் இந்த முடிவை மூன்றாவது மாறியின் மதிப்பாக வரையறுக்கிறது. + +```javascript +let x = 5; +let y = 6; +let result = x + y; +``` + +மாறிகளுக்கு பெயரிடும் போது பின்பற்ற வேண்டிய சில வழிகாட்டுதல்கள் உள்ளன. அவை: + +- மாறி பெயர்கள் ஒரு எழுத்தில், அடிக்கோடு `(_)`, அல்லது டாலர் அடையாளத்தில் `($)` தொடங்க வேண்டும். +- முதல் எழுத்திற்கு பிறகு, _எழுத்துகள்_, _எண்கள்_, _அடிக்கோடுகள்_, அல்லது _டாலர்_ அடையாளங்களை பயன்படுத்தலாம். +- JavaScript பெரிய மற்றும் சிறிய எழுத்துகளை வேறுபடுத்துகிறது (case-sensitive), எனவே `myVariable`, `MyVariable`, மற்றும் `MYVARIABLE` அனைத்தும் தனித்தனி மாறிகள். +- உங்கள் குறியீட்டை படிக்க மற்றும் பராமரிக்க எளிதாக ஆக்க, அவற்றின் நோக்கத்தை துல்லியமாக பிரதிபலிக்கும் விவரணமான மாறி பெயர்களை பயன்படுத்துவது பரிந்துரைக்கப்படுகிறது. + +{% exercise %} +`x` என்ற மாறியை 20 க்கு சமனாக வரையறுக்கவும். + +{% initial %} +let x = + +{% solution %} +let x = 20; + +{% validation %} +assert(x == 20); + +{% context %} +{% endexercise %} +**ES6 பதிப்பு** + +[ECMAScript 2015 அல்லது ES2015](https://262.ecma-international.org/6.0/) E6 என்றும் அழைக்கப்படுகிறது, இது 2009 க்கு பிறகு JavaScript நிரலாக்க மொழிக்கான குறிப்பிடத்தக்க புதுப்பிப்பாகும். ES6 இல் மாறிகளை அறிவிக்க மூன்று வழிகள் உள்ளன. + +```javascript +var x = 5; +const y = 'Test'; +let z = true; +``` + +அறிவிப்பின் வகைகள் scope ஐ பொறுத்தது. Block scope ஐப் பொறுட்படுத்தாமல் ஒரு செயல்பாடு முழுவதும் உலகளாவிய அல்லது உள்ளூர் மட்டத்தில் மாறியை வரையறுக்கும் `var` முக்கியசொல்லைப் போலல்லாமல், `let` நீங்கள் பயன்படுத்தும் block, அறிக்கை அல்லது வெளிப்பாட்டிற்கு மட்டுப்படுத்தப்பட்ட scope உடைய மாறிகளை அறிவிக்க அனுமதிக்கிறது. எடுத்துக்காட்டாக: + +```javascript +function varTest(){ + var x=1; + if(true){ + var x=2; // அதே மாறி + console.log(x); //2 + } + console.log(x); //2 +} + +function letTest(){ + let x=1; + if(true){ + let x=2; + console.log(x); // 2 + } + console.log(x); // 1 +} +``` + +`const` மாறிகள் மாற்ற முடியாதவை, அதாவது அவற்றை மீண்டும் ஒதுக்க அனுமதிக்கப்படவில்லை. + +```javascript +const x = "hi!"; +x = "bye"; // இது பிழையை ஏற்படுத்தும் +``` diff --git a/ta/beginner-projects/digital-clock.md b/ta/beginner-projects/digital-clock.md new file mode 100644 index 00000000..f7bf53ad --- /dev/null +++ b/ta/beginner-projects/digital-clock.md @@ -0,0 +1,31 @@ +# ⏰ டிஜிட்டல் கடிகாரம் (Digital Clock) + +![Digital Clock Preview](../../assets/digital-clock.PNG) + +## விளக்கம் (Description) +தற்போதைய நேரத்தை மணிநேரம் (hours), நிமிடங்கள் (minutes) மற்றும் வினாடிகளில் (seconds) காட்டும் நேரடி டிஜிட்டல் கடிகாரம். + +## அம்சங்கள் (Features) +- நிகழ்நேர (real-time) மணிநேரம், நிமிடங்கள் மற்றும் வினாடிகளைக் காட்டுகிறது +- ஒவ்வொரு நொடியும் தானாகவே புதுப்பிக்கப்படும் (Updates) +- AM/PM வடிவமைப்பு நிலைமாற்றம் (toggle) +- ரெஸ்பான்சிவ் (Responsive) மற்றும் சுத்தமான UI + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- ஜாவாஸ்கிரிப்ட் `Date` பொருளுடன் வேலை செய்தல் +- நிகழ்நேரப் புதுப்பிப்புகளுக்கு `setInterval` +- DOM கையாளுதல் (manipulation) +- நேர வடிவமைப்பு (Time formatting) + +## போனஸ் சவால் (Bonus Challenge) +வெவ்வேறு நேர மண்டலங்கள் (time zones) அல்லது ஸ்டாப்வாட்ச் (stopwatch) அம்சத்தைச் சேர்க்கவும். + +## நேரடி டெமோ (Live Demo) +
+ +
diff --git a/ta/beginner-projects/electronic-drum-kit.md b/ta/beginner-projects/electronic-drum-kit.md new file mode 100644 index 00000000..67db3962 --- /dev/null +++ b/ta/beginner-projects/electronic-drum-kit.md @@ -0,0 +1,32 @@ +# 🥁 டிரம் கிட்ஸ் (Drum Kits) + +![Drum Kits Preview](../../assets/drum-kit.PNG) + +## விளக்கம் (Description) +நீங்கள் பட்டன்களைக் (buttons) கிளிக் செய்யும்போதோ அல்லது விசைகளை (keys) அழுத்தும்போதோ ஒலிகளை இயக்கும் (plays sounds) வேடிக்கையான ஊடாடும் (interactive) டிரம் கருவியை (drum kit) உருவாக்கவும். + +## அம்சங்கள் (Features) +- பட்டன் கிளிக் அல்லது விசை அழுத்தத்தின் போது டிரம் ஒலிகளை இயக்கவும் +- பட்டன் அனிமேஷன்களுடன் கூடிய காட்சி பின்னூட்டம் (Visual feedback) +- இயக்கப் பல டிரம் ஒலிகள் +- ரெஸ்பான்சிவ் மற்றும் ஈர்க்கக்கூடிய UI + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- கிளிக்குகள் மற்றும் விசைப்பலகை உள்ளீட்டிற்கான (keyboard input) நிகழ்வு கேட்பாளர்கள் (Event listeners) +- ஜாவாஸ்கிரிப்டில் ஆடியோ பிளேபேக் (Audio playback) +- DOM கையாளுதல் மற்றும் அனிமேஷன்கள் +- பல நிகழ்வுகளைத் திறமையாகக் கையாளுதல் + +## போனஸ் சவால் (Bonus Challenge) +டிரம் வரிசைகளைப் (drum sequences) பதிவு செய்யும் மற்றும் இயக்கும் திறனைச் சேர்க்கவும். + + +## நேரடி டெமோ (Live Demo) +
+ +
\ No newline at end of file diff --git a/ta/beginner-projects/expense-tracker.md b/ta/beginner-projects/expense-tracker.md new file mode 100644 index 00000000..79acf2ad --- /dev/null +++ b/ta/beginner-projects/expense-tracker.md @@ -0,0 +1,43 @@ +# 💰 செலவு கண்காணிப்பாளர் (Expense Tracker) + +![Expense Tracker Preview](../../assets/expense-tracker-preview.png) + +## விளக்கம் (Description) + +**HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் (ES மாட்யூல்கள்)** பயன்படுத்தி உருவாக்கப்பட்ட ஒரு எளிய **செலவு கண்காணிப்பாளர் (Expense Tracker)**, இது பயனர்கள் தங்களின் தினசரி வருமானம் (income) மற்றும் செலவுகளை (expenses) நிர்வகிக்க அனுமதிக்கிறது. பயனர்கள் பரிவர்த்தனைகளைச் (transactions) **சேர்க்கலாம், திருத்தலாம் மற்றும் நீக்கலாம்**, அவர்களின் **இருப்புச் சுருக்கத்தைப் (balance summary)** பார்க்கலாம் மற்றும் பேக்கெண்ட் (backend) இல்லாமல் **localStorage** ஐப் பயன்படுத்தித் தரவை உள்நாட்டில் (locally) சேமிக்கலாம். + +## அம்சங்கள் (Features) + +- புதிய பரிவர்த்தனைகளைச் சேர் (வருமானம் அல்லது செலவு) +- ஏற்கனவே உள்ள பரிவர்த்தனைகளைத் திருத்து +- தேவையற்ற பரிவர்த்தனைகளை நீக்கு +- மொத்த இருப்பு (total balance), வருமானம் மற்றும் செலவுச் சுருக்கங்களைப் பார் +- `localStorage` ஐப் பயன்படுத்தித் தரவு நிலைத்தன்மை (Persistent data storage) +- சுத்தமான மற்றும் ரெஸ்பான்சிவ் UI வடிவமைப்பு + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) + +- DOM கையாளுதல் (manipulation) +- வரிசைகள் (arrays) மற்றும் பொருள்களுடன் (objects) வேலை செய்தல் +- நிகழ்வு கையாளுதல் (Event handling) மற்றும் படிவச் சமர்ப்பிப்பு (form submission) +- `localStorage` ஐப் பயன்படுத்தித் தரவு நிலைத்தன்மை +- நிபந்தனை ரெண்டரிங் (Conditional rendering) மற்றும் மாறும் UI புதுப்பிப்புகள் +- மாடுலர் ஜாவாஸ்கிரிப்ட் (`index.mjs`) + +## போனஸ் சவால் (Bonus Challenge) + +- வழிசெலுத்தல் பட்டியில் (navbar) ஒரு **டார்க் மோட் டாகிள் (dark mode toggle)** 🌙 ஐச் சேர்க்கவும் +- JS சார்ட் (chart) நூலகத்தைப் பயன்படுத்தி **மாதாந்திரச் செலவு விளக்கப்படத்தைக் (monthly expense chart)** காட்டவும் +- பரிவர்த்தனைகளுக்கான **வடிகட்டி/தேடல் (filter/search)** விருப்பத்தைச் சேர்க்கவும் +- பயனர்கள் தரவை CSV ஆக **ஏற்றுமதி செய்ய (export)** அனுமதிக்கவும் + +## நேரடி டெமோ (Live Demo) + +
+ +
diff --git a/ta/beginner-projects/image-search.md b/ta/beginner-projects/image-search.md new file mode 100644 index 00000000..04d19e2d --- /dev/null +++ b/ta/beginner-projects/image-search.md @@ -0,0 +1,31 @@ +# 🔍 படத் தேடல் செயலி (Image Search App) + +![Image Search App Preview](../../assets/image-search.PNG) + +## விளக்கம் (Description) +முக்கிய வார்த்தைகளைப் (keywords) பயன்படுத்திப் படங்களைத் தேட பயனர்களை அனுமதிக்கும் மற்றும் முடிவுகளை மாறும் வகையில் (dynamically) காண்பிக்கும் பயன்பாட்டை உருவாக்கவும். + +## அம்சங்கள் (Features) +- முக்கிய வார்த்தை மூலம் படங்களைத் தேடலாம் +- பொது API (எ.கா., Unsplash) மூலம் படங்களைப் பெறுகிறது +- முடிவுகளை ஒரு கிரிட் தளவமைப்பில் (grid layout) காட்டுகிறது +- ரெஸ்பான்சிவ் மற்றும் பயனர் நட்பு இடைமுகம் + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- Fetch API மற்றும் ஒத்திசைவற்ற (asynchronous) ஜாவாஸ்கிரிப்ட் +- API பதில்கள் (responses) மற்றும் பிழைகளைக் (errors) கையாளுதல் +- DOM கையாளுதல் +- CSS Grid அல்லது Flexbox உடன் ரெஸ்பான்சிவ் வடிவமைப்பு + +## போனஸ் சவால் (Bonus Challenge) +மேலும் படங்களுக்கு எல்லையற்ற சுருள் (infinite scroll) அல்லது பக்கமாக்கலைச் (pagination) சேர்க்கவும். + +## நேரடி டெமோ (Live Demo) +
+ +
diff --git a/ta/beginner-projects/monthly-calendar.md b/ta/beginner-projects/monthly-calendar.md new file mode 100644 index 00000000..e1ae383a --- /dev/null +++ b/ta/beginner-projects/monthly-calendar.md @@ -0,0 +1,31 @@ +# 📅 மாத நாட்காட்டி (Month Calendar) + +![Month Calendar Preview](../../assets/calendar.PNG) + +## விளக்கம் (Description) +தேர்ந்தெடுக்கப்பட்ட மாதம் மற்றும் ஆண்டின் நாட்களைக் காண்பிக்கும் எளிய ஊடாடும் நாட்காட்டியை (interactive calendar) உருவாக்கவும். + +## அம்சங்கள் (Features) +- தேர்ந்தெடுக்கப்பட்ட மாதம் மற்றும் ஆண்டின் அனைத்து நாட்களையும் காட்டுகிறது +- தற்போதைய தேதியைத் தனிப்படுத்திக் காட்டுகிறது (Highlights) +- மாதங்கள் மற்றும் ஆண்டுகளுக்கு இடையில் செல்லலாம் +- வெவ்வேறு திரை அளவுகளுக்கான ரெஸ்பான்சிவ் வடிவமைப்பு + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- ஜாவாஸ்கிரிப்டில் தேதி மற்றும் நேரக் கையாளுதல் +- DOM கையாளுதல் +- நிகழ்வு கையாளுதல் (Event handling) +- காலண்டர் கட்டத்தின் (calendar grid) மாறும் ரெண்டரிங் + +## போனஸ் சவால் (Bonus Challenge) +முக்கியமான தேதிகள் அல்லது நிகழ்வுகளைக் குறிக்கும் திறனைச் சேர்க்கவும். + +## நேரடி டெமோ (Live Demo) +
+ +
diff --git a/ta/beginner-projects/random-photos-generator.md b/ta/beginner-projects/random-photos-generator.md new file mode 100644 index 00000000..eb94acfa --- /dev/null +++ b/ta/beginner-projects/random-photos-generator.md @@ -0,0 +1,31 @@ +# 📸 சீரற்ற புகைப்படங்கள் (Random Photos) + +![Random Photos Preview](../../assets/random-photos.PNG) + +## விளக்கம் (Description) +நீங்கள் ஒரு பட்டனைக் கிளிக் செய்யும் ஒவ்வொரு முறையும் சேகரிப்பிலிருந்து (collection) சீரற்ற புகைப்படங்களைக் (random photos) காண்பிக்கும் வேடிக்கையான பயன்பாட்டை (app) உருவாக்கவும். + +## அம்சங்கள் (Features) +- புதிய சீரற்ற புகைப்படத்தைக் காட்ட ஒரு பட்டனைக் கிளிக் செய்யவும் +- முன் வரையறுக்கப்பட்ட (predefined) பட்டியலிலிருந்து படங்களை மாறும் வகையில் ஏற்றுகிறது +- மென்மையான பட மாற்ற விளைவுகள் (Smooth image transition effects) +- எல்லாச் சாதனங்களுக்கும் ரெஸ்பான்சிவ் தளவமைப்பு + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- வரிசைகள் (Arrays) மற்றும் சீரற்ற தேர்வு (random selection) +- DOM கையாளுதல் +- நிகழ்வு கையாளுதல் +- CSS மாற்றங்கள் (transitions) மற்றும் அனிமேஷன்கள் + +## போனஸ் சவால் (Bonus Challenge) +Unsplash போன்ற வெளிப்புற API இலிருந்து சீரற்ற புகைப்படங்களைப் பெறவும். + +## நேரடி டெமோ (Live Demo) +
+ +
\ No newline at end of file diff --git a/ta/beginner-projects/rock-paper-scissors-game.md b/ta/beginner-projects/rock-paper-scissors-game.md new file mode 100644 index 00000000..6816b6f5 --- /dev/null +++ b/ta/beginner-projects/rock-paper-scissors-game.md @@ -0,0 +1,31 @@ +# ✊✋✌️ கல் காகிதம் கத்தரிக்கோல் விளையாட்டு (Rock Paper Scissors Game) + +![Rock Paper Scissors Preview](../../assets/rps-game.PNG) + +## விளக்கம் (Description) +நீங்கள் கணினிக்கு (computer) எதிராக விளையாடும் கிளாசிக் (classic) ராக் பேப்பர் சிசர்ஸ் (Rock Paper Scissors) விளையாட்டை உருவாக்கவும். உங்கள் நகர்வைத் (move) தேர்வுசெய்து யார் வெற்றி பெறுகிறார்கள் என்பதைப் பாருங்கள்! + +## அம்சங்கள் (Features) +- பயனர் கல் (Rock), காகிதம் (Paper) அல்லது கத்தரிக்கோலை (Scissors) தேர்ந்தெடுக்கலாம் +- கணினி தோராயமாக (randomly) அதன் நகர்வைத் தேர்ந்தெடுக்கிறது +- ஒவ்வொரு சுற்றிலும் (round) வெற்றி பெற்றவரைக் காட்டுகிறது +- ஸ்கோரை (score) கண்காணிக்கிறது + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- சீரற்ற எண் உருவாக்கம் (Random number generation) +- நிபந்தனை அறிக்கைகள் (Conditional statements) +- நிகழ்வு கேட்பாளர்கள் (Event listeners) +- DOM கையாளுதல் + +## போனஸ் சவால் (Bonus Challenge) +விளையாட்டை மேலும் ஊடாடும் (interactive) வகையில் மாற்ற அனிமேஷன்கள் மற்றும் ஒலி விளைவுகளைச் (sound effects) சேர்க்கவும். + +## நேரடி டெமோ (Live Demo) +
+ +
\ No newline at end of file diff --git a/ta/beginner-projects/simon-says.md b/ta/beginner-projects/simon-says.md new file mode 100644 index 00000000..056990ac --- /dev/null +++ b/ta/beginner-projects/simon-says.md @@ -0,0 +1,39 @@ +# 🎮 சைமன் சொல் விளையாட்டு (Simon Says Game) + +![Simon Says Preview](../../assets/simon-says-preview.png) + +## விளக்கம் (Description) + +வண்ணப் பட்டன்களின் (colored buttons) வரிசைகளை (sequences) வீரர்கள் மீண்டும் செய்யும் நினைவக விளையாட்டு (memory game). ஒவ்வொரு சுற்றும் வரிசைக்கு ஒரு புதிய வண்ணத்தைச் சேர்க்கிறது, மேலும் நிலைகளை (levels) முன்னேற்றுவதற்கு வீரர் அதை நினைவில் வைத்துச் சரியாக மீண்டும் செய்ய வேண்டும். + +## அம்சங்கள் (Features) + +- விளையாட்டைத் தொடங்கப் பட்டனைத் தொடங்கு (Start button) +- ஒளிரும் (flash) வண்ணப் பட்டன்கள் (பச்சை, சிவப்பு, மஞ்சள், நீலம்) +- ஒவ்வொரு நிலைக்கும் ஒரு புதிய வண்ணத்தைச் சேர்க்கிறது +- லெவல் டிராக்கிங் (Level tracking) மற்றும் கேம் ஓவர் (Game Over) செய்தி + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) + +- DOM கையாளுதல் +- நிகழ்வு கேட்பாளர்கள் (Event listeners) +- ஒத்திசைவற்ற (Async) செயல்பாடுகள் மற்றும் வாக்குறுதிகள் (Promises) +- விளையாட்டுத் தர்க்கம் (Game logic) மற்றும் வரிசையைக் கையாளுதல் (sequence handling) +- CSS அனிமேஷன்கள் மற்றும் காட்சி பின்னூட்டம் (visual feedback) + +## போனஸ் சவால் (Bonus Challenge) + +- விளையாட்டு முடிந்ததும் **ஸ்கோரைக்** காட்டவும் (ஸ்கோர் = முடிக்கப்பட்ட நிலைகளின் எண்ணிக்கை). +- ஒவ்வொரு பட்டன் கிளிக்கிற்கும் **ஒலி விளைவுகளைச் (sound effects)** சேர்க்கவும். +- விளையாட்டை மேலும் ஊடாடும் வகையில் (interactive) ஒவ்வொரு பட்டனுக்கும் **ஒளிரும் அனிமேஷனை (glowing animation)** சேர்க்கவும். + +## நேரடி டெமோ (Live Demo) + +
+ +
diff --git a/ta/beginner-projects/simple-stopwatch.md b/ta/beginner-projects/simple-stopwatch.md new file mode 100644 index 00000000..6ac40d62 --- /dev/null +++ b/ta/beginner-projects/simple-stopwatch.md @@ -0,0 +1,32 @@ +# ⏱️ ஸ்டாப்வாட்ச் (Stopwatch) + +![Stopwatch Preview](../../assets/stopwatch.PNG) + +## விளக்கம் (Description) +கடந்த நேரத்தைக் (elapsed time) கண்காணிக்கத் டைமரைத் தொடங்க, நிறுத்த மற்றும் மீட்டமைக்க (reset) பயனர்களை அனுமதிக்கும் எளிய ஸ்டாப்வாட்ச் பயன்பாட்டை உருவாக்கவும். + +## அம்சங்கள் (Features) +- டைமரைத் தொடங்கவும் +- டைமரை இடைநிறுத்தவும்/நிறுத்தவும் (Pause/Stop) +- டைமரைப் பூஜ்ஜியத்திற்கு மீட்டமைக்கவும் +- நிமிடங்களில், வினாடிகளில் மற்றும் மில்லி வினாடிகளில் நேரத்தைக் காட்டுகிறது + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- ஜாவாஸ்கிரிப்ட் `setInterval` மற்றும் `clearInterval` உடன் வேலை செய்தல் +- DOM கையாளுதல் +- நிகழ்வு கையாளுதல் +- நேரக் கணக்கீடு மற்றும் வடிவமைப்பு + +## போனஸ் சவால் (Bonus Challenge) +பல நேரப் பிளவுகளைப் (multiple time splits) பதிவு செய்ய மற்றும் காண்பிக்க லேப் செயல்பாட்டைச் (lap functionality) சேர்க்கவும். + + +## நேரடி டெமோ (Live Demo) +
+ +
diff --git a/ta/beginner-projects/tip-calculator.md b/ta/beginner-projects/tip-calculator.md new file mode 100644 index 00000000..01ddca0f --- /dev/null +++ b/ta/beginner-projects/tip-calculator.md @@ -0,0 +1,30 @@ +# 💸 டிப் கால்குலேட்டர் (Tip Calculator) + +![Tip Calculator Preview](../../assets/tip-calculator.PNG) + +## விளக்கம் (Description) +கொடுக்கப்பட்ட பில் தொகை மற்றும் டிப் சதவீதத்தின் அடிப்படையில் பயனர்கள் டிப்ஸைக் கணக்கிடக்கூடிய (calculate tips) திட்டத்தை உருவாக்கவும். + +## அம்சங்கள் (Features) +- பில் தொகைக்கான உள்ளீட்டுப் புலம் (Input field) +- டிப் சதவீதத்தைத் தேர்ந்தெடுக்கப் பட்டன்கள் (10%, 20%, 30%) +- கணக்கிடப்பட்ட டிப் மற்றும் மொத்தத் தொகையைக் காண்பித்தல் + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- அடிப்படை கணிதச் செயல்பாடுகள் +- DOM கையாளுதல் +- நிகழ்வு கேட்பாளர்கள் (Event listeners) +- உள்ளீடு சரிபார்ப்பு (Input validation) + +## போனஸ் சவால் (Bonus Challenge) +மொத்தத் தொகையைப் பல நபர்களிடையே பிரிக்க "பில்லைப் பிரி (Split Bill)" அம்சத்தைச் சேர்க்கவும். + +## நேரடி டெமோ (Live Demo) +
+ +
\ No newline at end of file diff --git a/ta/beginner-projects/video-trailer-popup.md b/ta/beginner-projects/video-trailer-popup.md new file mode 100644 index 00000000..402ff847 --- /dev/null +++ b/ta/beginner-projects/video-trailer-popup.md @@ -0,0 +1,32 @@ +# 📽️ வீடியோ டிரெய்லர் பாப்அப் (Video Trailer Popup) + +![Video Trailer Popup Preview](../../assets/video-trailer.PNG) + +## விளக்கம் (Description) +தூண்டப்படும்போது வீடியோ டிரெய்லரை இயக்கும் பாப்அப் மோடலை (popup modal) உருவாக்கவும். திரைப்படம் அல்லது தயாரிப்பு மாதிரிக்காட்சிகளுக்கு (product previews) ஏற்றது! + +## அம்சங்கள் (Features) +- வீடியோ பாப்அப்பைத் திறக்கப் பட்டன் அல்லது படத்தைக் கிளிக் செய்யவும் +- பாப்அப் மோடலுக்குள் வீடியோ இயங்கும் +- வீடியோவை நிறுத்தவும் பாப்அப்பை மூடவும் மூடு பட்டன் +- அனைத்துத் திரை அளவுகளுக்கும் ரெஸ்பான்சிவ் வடிவமைப்பு + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- மோடல் உருவாக்கம் (Modal creation) மற்றும் நிலைமாற்றுதல் காணக்கூடிய தன்மை (toggling visibility) +- HTML5 வீடியோவை உட்பொதித்தல் மற்றும் கட்டுப்படுத்துதல் +- திறந்த/மூடு செயல்களுக்கான நிகழ்வு கையாளுதல் +- மேலடுக்குகள் (overlays) மற்றும் அனிமேஷன்களுக்கான CSS + +## போனஸ் சவால் (Bonus Challenge) +பாப்அப் மூடப்படும்போது தானியங்கி (autoplay) மற்றும் வீடியோவை இடைநிறுத்தவும். + + +## நேரடி டெமோ (Live Demo) +
+ +
diff --git a/ta/beginner-projects/weather-app.md b/ta/beginner-projects/weather-app.md new file mode 100644 index 00000000..023f0642 --- /dev/null +++ b/ta/beginner-projects/weather-app.md @@ -0,0 +1,32 @@ +# ☁️ வானிலைச் செயலி (Weather App) + +![Weather App Preview](../../assets/waether-app.PNG) + +## விளக்கம் (Description) +பயனர் இருப்பிடம் (location) அல்லது தேடலின் அடிப்படையில் வானிலைத் தகவலைப் பெற்று காண்பிக்கும் ஒரு எளிய பயன்பாடு. + +## அம்சங்கள் (Features) +- நகரத்தின் பெயர் மூலம் வானிலையைத் தேடலாம் +- வெப்பநிலை, ஈரப்பதம், காற்றின் வேகம் மற்றும் வானிலை நிலைகளைக் காட்டுகிறது +- வானிலை API (எ.கா., OpenWeatherMap) இலிருந்து தரவைப் பெறுகிறது +- ரெஸ்பான்சிவ் மற்றும் சுத்தமான UI + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) +- async/await உடன் API பெறுதல் +- JSON தரவைக் கையாளுதல் +- DOM கையாளுதல் +- பிழையைக் கையாளுதல் (Error handling) மற்றும் பயனர் பின்னூட்டம் + +## போனஸ் சவால் (Bonus Challenge) +வானிலை நிலைகளின் அடிப்படையில் வானிலை ஐகான்கள் (icons) மற்றும் பின்னணி மாற்றங்களைச் சேர்க்கவும். + +## நேரடி டெமோ (Live Demo) +
+ +
diff --git a/ta/beginner-projects/whack-a-mole.md b/ta/beginner-projects/whack-a-mole.md new file mode 100644 index 00000000..c6971e9c --- /dev/null +++ b/ta/beginner-projects/whack-a-mole.md @@ -0,0 +1,42 @@ +# 🦫 வாக்-எ-மோல் விளையாட்டு (Whack-a-Mole Game) + +![Whack-a-Mole Preview](../../assets/whack-a-mole.png) + +## விளக்கம் (Description) + +வீரர்கள் சீரற்ற முறையில் (randomly) துளைகளிலிருந்து வெளியே வரும் மச்சங்களை (moles) "whack" செய்யும் (அடிக்கும்) வேடிக்கையான மற்றும் வேகமான அனிச்சை விளையாட்டு (reflex game). ஒவ்வொரு வெற்றிகரமான அடியும் உங்களுக்குப் புள்ளிகளைப் பெற்றுத் தருகிறது - ஆனால் விரைவாக இருங்கள், ஏனெனில் மச்சம் ஒரு நொடியில் மறைந்துவிடும்! விளையாட்டு ஒரு குறிப்பிட்ட நேரத்திற்கு மட்டுமே இயங்குகிறது, இது உற்சாகமானதாகவும் சவாலானதாகவும் இருக்கும். + +## அம்சங்கள் (Features) + +- விளையாட்டைத் தொடங்கப் பட்டனைத் தொடங்கு (Start button) +- 9 வெவ்வேறு துளைகளில் சீரற்ற மச்சத்தின் தோற்றம் +- நிகழ்நேர ஸ்கோர் (score) கண்காணிப்பு +- தானியங்கி 30-வினாடி விளையாட்டு காலம் +- நேரம் முடிந்ததும் இறுதி மதிப்பெண்ணைக் காட்டும் எச்சரிக்கைச் செய்தி + +## பயிற்சி பெற்ற கருத்துகள் (Concepts Practiced) + +- DOM கையாளுதல் மற்றும் மாறும் உறுப்பு (element) உருவாக்கம் +- ஊடாடும் கிளிக்குகளுக்கான (interactive clicks) நிகழ்வு கேட்பாளர்கள் (Event listeners) +- `Math.random()` மற்றும் `setTimeout()` ஐப் பயன்படுத்தும் சீரற்றமயமாக்கல் மற்றும் நேரம் (Randomization and timing) +- அடிப்படை விளையாட்டு லூப் தர்க்கம் +- மச்சத்தின் இயக்கத்திற்கான CSS அனிமேஷன்கள் + +## போனஸ் சவால் (Bonus Challenge) + +- மச்சத்தின் வேகத்தை அதிகரிக்கும் **நிலைகளை** (எளிதானது, நடுத்தரம், கடினமானது) சேர்க்கவும் +- **காணக்கூடிய கவுண்ட்டவுன் டைமரை (visible countdown timer)** சேர்க்கவும் +- `localStorage` ஐப் பயன்படுத்தி **அதிக மதிப்பெண்களைச்** சேமித்து மற்றும் காண்பிக்கவும் +- மச்சம் கிளிக் செய்யப்படும்போது **ஒலி விளைவுகளைச் (sound effects)** சேர்க்கவும் +- மச்ச வடிவமைப்பைத் தனிப்பயனாக்க **படங்கள் அல்லது எமோஜிகளைப்** பயன்படுத்தவும் + +## நேரடி டெமோ (Live Demo) + +
+ +
diff --git a/ta/behind-scenes/README.md b/ta/behind-scenes/README.md new file mode 100644 index 00000000..8a6e4180 --- /dev/null +++ b/ta/behind-scenes/README.md @@ -0,0 +1,23 @@ +--- +layout: editorial +chapter: 28 +pageNumber: 260 +description: ஜாவாஸ்கிரிப்ட் என்பது உலாவிகள் (browsers) மற்றும் சேவையகங்கள் (servers) இரண்டிலும் பயன்படுத்தப்படும் ஒரு பல்துறை (versatile) மொழியாகும். இந்த வழிகாட்டி ஜாவாஸ்கிரிப்ட் இயந்திரம் (engine), எக்ஸிகியூசன் கான்டெக்ஸ்ட் (execution context), கால் ஸ்டாக் (call stack), நினைவகக் குவியல் (memory heap), ரன்டைம் சூழல் (runtime environment) மற்றும் நிகழ்வு சுழற்சி (event loop) போன்ற முக்கியக் கருத்துக்களை விளக்கி, நீங்கள் திறமையான குறியீட்டை எழுத உதவுகிறது. +--- + +# அத்தியாயம் 28 + +# ஜாவாஸ்கிரிப்ட் திரைக்குப் பின்னால் (JavaScript Behind the Scenes) + +ஜாவாஸ்கிரிப்ட் என்பது உலாவிகள் மற்றும் சேவையகங்கள் இரண்டையும் இயக்கும் ஒரு பல்துறை மொழியாகும். திறமையான குறியீட்டை எழுத, திரைக்குப் பின்னால் ஜாவாஸ்கிரிப்ட் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வது உதவுகிறது. இதன் மையத்தில் ஜாவாஸ்கிரிப்ட் இயந்திரம் உள்ளது, இது உங்கள் குறியீட்டைச் செயல்படுத்துவதற்குப் பொறுப்பான ஒரு நிரலாகும். பிரபலமான இயந்திரங்களான V8 (Chrome மற்றும் Node.js இல் பயன்படுத்தப்படுகிறது), SpiderMonkey (Firefox இல்) மற்றும் JavaScriptCore (Safari இல்) உங்கள் குறியீட்டை உடைத்து இயக்குகின்றன. இதனுடன், எக்ஸிகியூசன் கான்டெக்ஸ்ட் (execution context) உங்கள் குறியீடு மதிப்பீடு செய்யப்படும் (evaluated) சூழலை வரையறுக்கிறது. குளோபல் (global), செயல்பாடு (function) அல்லது eval என எதுவாக இருந்தாலும், குறியீட்டை வரியாகச் செயல்படுத்துவதற்கு முன்பு ஒவ்வொரு சூழலும் ஒரு அமைவு கட்டத்தின் (setup phase) (மாறிகள் (variables), செயல்பாடுகள் மற்றும் this ஐ உருவாக்குதல்) வழியாகச் செல்கிறது. + +கால் ஸ்டாக் மற்றும் நினைவகக் குவியல் போன்ற முக்கிய கூறுகள் ஜாவாஸ்கிரிப்ட்டின் செயல்பாட்டை மேலும் ஆதரிக்கின்றன. கால் ஸ்டாக் என்பது செயல்பாட்டு அழைப்புகளை (function calls) LIFO (கடைசியாக உள்ளே, முதலில் வெளியே) வரிசையில் நிர்வகிக்கிறது, அதேசமயம் நினைவகக் குவியல் பொருள்களை (objects) சேமிக்கிறது, இதில் குப்பைகளைச் சேகரிப்பதன் (garbage collection) மூலம் ஜாவாஸ்கிரிப்ட் தானாகவே நினைவகத்தை விடுவிக்கிறது. ரன்டைம் சூழல் (runtime environment)—உலாவியிலோ அல்லது Node.js இலோ—DOM அல்லது Node.js-சார்ந்த தொகுதிகள் (modules) போன்ற கூடுதல் வளங்களை (resources) வழங்குகிறது. இறுதியாக, நிகழ்வு சுழற்சி (event loop) பணிகளை ஆஃப்லோடிங் (offloading) செய்து பின்கூப்பிடல்களைச் (callbacks) செயலாக்குவதன் மூலம் ஒத்திசைவற்ற நிரலாக்கத்தை (asynchronous programming) இயக்குவதில் முக்கியப் பங்கு வகிக்கிறது, ஜாவாஸ்கிரிப்ட் தடையற்றதாக (non-blocking) மற்றும் திறமையானதாக இருப்பதை உறுதிசெய்கிறது. + +இந்த அத்தியாயத்தில் நாம் பின்வரும் தலைப்புகளைப் பற்றிப் பேசப் போகிறோம். + +* [Call Stack](./call-stack.md) +* [Event Loop](./runtime-environment.md) +* [Execution Context](./execution-context.md) +* [JavaScript Engine](./engine.md) +* [Memory Heap](./memory-heap.md) +* [Runtime Environment](./runtime-environment.md) \ No newline at end of file diff --git a/ta/behind-scenes/call-stack.md b/ta/behind-scenes/call-stack.md new file mode 100644 index 00000000..1d4fe9e2 --- /dev/null +++ b/ta/behind-scenes/call-stack.md @@ -0,0 +1,73 @@ +--- +chapter: 27 +pageNumber: 257 +description: ஜாவாஸ்கிரிப்டில் உள்ள கால் ஸ்டாக்குகளைப் (Call Stacks) புரிந்துகொள்ளுதல் +--- + +## ஜாவாஸ்கிரிப்டில் கால் ஸ்டாக்குகள் (Call Stacks) + +ஜாவாஸ்கிரிப்டில், கால் ஸ்டாக் (Call Stack) என்பது LIFO (கடைசியாக உள்ளே, முதலில் வெளியே - Last-In, First-Out) கொள்கையைப் பயன்படுத்தி செயல்பாட்டு அழைப்புகளை (function invocation/call) தற்காலிகமாகச் சேமித்து நிர்வகிக்கும் ஒரு தரவுக் கட்டமைப்பாகும் (data structure). + +### கால் ஸ்டாக் என்றால் என்ன? + +உங்கள் குறியீட்டில் உள்ள செயல்பாட்டு அழைப்புகளைக் (function calls) கண்காணிப்பதற்கு கால் ஸ்டாக் பொறுப்பாகும். ஜாவாஸ்கிரிப்ட் மொழிபெயர்ப்பாளர் (interpreter) தற்போது எந்தச் செயல்பாடு இயங்குகிறது மற்றும் அந்தச் செயல்பாட்டிற்குள் எந்தச் செயல்பாடுகள் அழைக்கப்படுகின்றன என்பதைக் கண்காணிக்க கால் ஸ்டாக் உதவுகிறது. + +ஒரு ஸ்கிரிப்ட் ஒரு செயல்பாட்டை அழைக்கும் போது, ஜாவாஸ்கிரிப்ட்டின் மொழிபெயர்ப்பாளர் அந்தச் செயல்பாட்டை கால் ஸ்டாக்கில் சேர்க்கிறார், பின்னர் செயல்பாட்டைச் செயல்படுத்தத் தொடங்குகிறார். அந்தச் செயல்பாட்டால் அழைக்கப்படும் எந்தச் செயல்பாடுகளும் கால் ஸ்டாக்கில் மேலும் சேர்க்கப்பட்டு, அவற்றின் அழைப்புகள் எட்டப்படும் இடத்தில் இயக்கப்படும். + +தற்போதைய செயல்பாடு முடிந்ததும், மொழிபெயர்ப்பாளர் அதை ஸ்டாக்கில் இருந்து அகற்றி, கடைசியாக இயக்கப்பட்ட குறியீட்டின் வரியில் எங்கு விட்டதோ அங்கு செயல்பாட்டைத் மீண்டும் தொடங்குகிறார். + +### கால் ஸ்டாக்கில் ஒரு எடுத்துக்காட்டு + +ஒரு கால் ஸ்டாக் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வதற்கான அடிப்படை எடுத்துக்காட்டு இங்கே: + +```javascript +function firstFunction() { + console.log("First function is called."); + secondFunction(); + console.log("First function is done."); +} + +function secondFunction() { + console.log("Second function is called."); + thirdFunction(); + console.log("Second function is done."); +} + +function thirdFunction() { + console.log("Third function is called."); +} + +firstFunction(); +``` + +**வெளியீடு (Output):** +``` +First function is called. +Second function is called. +Third function is called. +Second function is done. +First function is done. +``` + +### கால் ஸ்டாக் எவ்வாறு செயல்படுகிறது + +1. `firstFunction` அழைக்கப்படும்போது, அது கால் ஸ்டாக்கில் சேர்க்கப்படும். +2. `firstFunction` க்குள், `secondFunction` அழைக்கப்படுகிறது, எனவே அது கால் ஸ்டாக்கில் சேர்க்கப்படுகிறது. +3. `secondFunction` க்குள், `thirdFunction` அழைக்கப்படுகிறது, எனவே அது கால் ஸ்டாக்கில் சேர்க்கப்படுகிறது. +4. `thirdFunction` நிறைவடைகிறது மற்றும் கால் ஸ்டாக்கில் இருந்து அகற்றப்படுகிறது. +5. `secondFunction` மீண்டும் தொடங்குகிறது, நிறைவடைகிறது, மற்றும் கால் ஸ்டாக்கில் இருந்து அகற்றப்படுகிறது. +6. `firstFunction` மீண்டும் தொடங்குகிறது, நிறைவடைகிறது, மற்றும் கால் ஸ்டாக்கில் இருந்து அகற்றப்படுகிறது. + +### ஸ்டாக் ஓவர்ஃப்ளோ (Stack Overflow) + +கால் ஸ்டாக்கில் அதிகப்படியான செயல்பாட்டு அழைப்புகள் இருக்கும்போது ஒரு ஸ்டாக் ஓவர்ஃப்ளோ ஏற்படுகிறது. மறுநிகழ்வை (recursion) நிறுத்த ஒரு அடிப்படை வழக்கு (base case) இல்லாத சுழல் செயல்பாடுகளில் (recursive functions) இது நிகழலாம். + +```javascript +function recursiveFunction() { + recursiveFunction(); +} + +recursiveFunction(); +``` + +இது "Maximum call stack size exceeded" என்ற பிழையை ஏற்படுத்தும். diff --git a/ta/behind-scenes/engine.md b/ta/behind-scenes/engine.md new file mode 100644 index 00000000..d093daf3 --- /dev/null +++ b/ta/behind-scenes/engine.md @@ -0,0 +1,92 @@ +--- +chapter: 27 +pageNumber: 258 +description: ஜாவாஸ்கிரிப்ட் இயந்திரங்களைப் (JavaScript Engines) புரிந்துகொள்ளுதல் மற்றும் அவை ஜாவாஸ்கிரிப்ட் குறியீட்டை எவ்வாறு இயக்குகின்றன என்பதைப் புரிந்துகொள்ளுதல். +--- + +## ஜாவாஸ்கிரிப்ட் இயந்திரங்கள் (JavaScript Engines) + +ஜாவாஸ்கிரிப்ட் இயந்திரம் என்பது ஜாவாஸ்கிரிப்ட் குறியீட்டைச் செயல்படுத்தும் ஒரு நிரல் அல்லது மொழிபெயர்ப்பாளர் (interpreter) ஆகும். மிகவும் பிரபலமான ஜாவாஸ்கிரிப்ட் இயந்திரங்கள் V8 (கூகுள் குரோம் மற்றும் Node.js இல் பயன்படுத்தப்படுகிறது), SpiderMonkey (பயர்பாக்ஸில் பயன்படுத்தப்படுகிறது) மற்றும் JavaScriptCore (சஃபாரியில் பயன்படுத்தப்படுகிறது). + +### ஜாவாஸ்கிரிப்ட் இயந்திரங்கள் எவ்வாறு செயல்படுகின்றன + +ஜாவாஸ்கிரிப்ட் இயந்திரங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டைத் திறமையாகச் செயல்படுத்த பல முக்கிய பணிகளைச் செய்கின்றன: + +1. **பாகுபடுத்துதல் (Parsing)**: இயந்திரம் ஜாவாஸ்கிரிப்ட் குறியீட்டை Abstract Syntax Tree (AST) ஆகப் பாகுபடுத்துகிறது. +2. **தொகுத்தல் (Compilation)**: AST பின்னர் பைட்கோடு (bytecode) அல்லது இயந்திர குறியீட்டாகத் தொகுக்கப்படுகிறது. +3. **செயல்படுத்துதல் (Execution)**: தொகுக்கப்பட்ட குறியீடு இயந்திரத்தால் செயல்படுத்தப்படுகிறது. + +### ஜாவாஸ்கிரிப்ட் இயந்திரத்தின் பணிப்பாய்வுக்கு (Workflow) ஒரு எடுத்துக்காட்டு + +ஒரு ஜாவாஸ்கிரிப்ட் இயந்திரத்தின் பணிப்பாய்வை விளக்குவதற்கான ஒரு எளிய எடுத்துக்காட்டு இங்கே: + +```javascript +function add(a, b) { + return a + b; +} + +console.log(add(2, 3)); // வெளியீடு: 5 +``` + +### பாகுபடுத்துதல் (Parsing) + +இயந்திரம் முதலில் குறியீட்டை ஒரு AST ஆகப் பாகுபடுத்துகிறது. மேலே உள்ள குறியீட்டிற்கு, AST இதுபோல் இருக்கலாம்: + +``` +Program + ├── FunctionDeclaration (add) + │ ├── Identifier (a) + │ ├── Identifier (b) + │ └── BlockStatement + │ └── ReturnStatement + │ └── BinaryExpression (+) + │ ├── Identifier (a) + │ └── Identifier (b) + └── ExpressionStatement + └── CallExpression (console.log) + └── CallExpression (add) + ├── Literal (2) + └── Literal (3) +``` + +### தொகுத்தல் (Compilation) + +AST பின்னர் பைட்கோடு அல்லது இயந்திர குறியீட்டாகத் தொகுக்கப்படுகிறது. இந்த படியானது செயல்திறனை (performance) மேம்படுத்துவதற்கான மேம்பாடுகளை (optimizations) உள்ளடக்கியது. + +### செயல்படுத்துதல் (Execution) + +தொகுக்கப்பட்ட குறியீடு இயந்திரத்தால் செயல்படுத்தப்படுகிறது. இந்த வழக்கில், `add` செயல்பாடு `2` மற்றும் `3` வாதங்களுடன் (arguments) அழைக்கப்படுகிறது, மேலும் முடிவு `5` கன்சோலில் பதிவு செய்யப்படுகிறது. + +### Just-In-Time (JIT) Compilation + +நவீன ஜாவாஸ்கிரிப்ட் இயந்திரங்கள் செயல்திறனை மேம்படுத்த Just-In-Time (JIT) தொகுப்பைப் பயன்படுத்துகின்றன. JIT தொகுப்பு என்பது செயல்படுத்துவதற்கு முன்பு அல்லாமல், இயக்க நேரத்தில் (runtime) குறியீட்டைத் தொகுப்பதை உள்ளடக்குகிறது. உண்மையான பயன்பாட்டு வடிவங்களின் (usage patterns) அடிப்படையில் குறியீட்டை மேம்படுத்த இது இயந்திரத்தை அனுமதிக்கிறது. + +### JIT தொகுப்பிற்கு ஒரு எடுத்துக்காட்டு + +```javascript +function multiply(a, b) { + return a * b; +} + +for (let i = 0; i < 1000000; i++) { + multiply(2, 3); +} +``` + +இந்த எடுத்துக்காட்டில், `multiply` செயல்பாடு மீண்டும் மீண்டும் அழைக்கப்படுகிறது. ஒரு JIT கம்பைலர், ஒரு செயல்பாடு சூடான செயல்பாடு (hot function) (அதாவது, அடிக்கடி அழைக்கப்படுகிறது) என்பதைக் கண்டறிந்த பிறகு அந்தச் செயல்பாட்டை மேம்படுத்தலாம். + +### குப்பை சேகரிப்பு (Garbage Collection) + +ஜாவாஸ்கிரிப்ட் இயந்திரங்களில் நினைவகத்தை நிர்வகிக்கக் குப்பை சேகரிப்பான்களும் (garbage collectors) உள்ளன. குப்பை சேகரிப்பான் இனி பயன்பாட்டில் இல்லாத நினைவகத்தைத் தானாகவே விடுவித்து, நினைவக கசிவுகளைத் (memory leaks) தடுக்கிறது. + +### குப்பை சேகரிப்பிற்கு ஒரு எடுத்துக்காட்டு + +```javascript +function createObject() { + return { name: "Object" }; +} + +let obj = createObject(); +obj = null; // இந்த பொருள் (object) இப்போது குப்பை சேகரிப்பிற்குத் தகுதியானது +``` +இந்த எடுத்துக்காட்டில், `obj` ஆனது `null` ஆக அமைக்கப்பட்ட பிறகு, `createObject` ஆல் உருவாக்கப்பட்ட பொருளானது குப்பை சேகரிப்பிற்குத் தகுதியுடையதாகிறது. diff --git a/ta/behind-scenes/event-loop.md b/ta/behind-scenes/event-loop.md new file mode 100644 index 00000000..fbc873ed --- /dev/null +++ b/ta/behind-scenes/event-loop.md @@ -0,0 +1,131 @@ +--- +chapter: 27 +pageNumber: 259 +description: ஜாவாஸ்கிரிப்டில் உள்ள நிகழ்வு சுழற்சியைப் (Event Loop) புரிந்துகொள்ளுதல். +--- + +## ஜாவாஸ்கிரிப்டில் நிகழ்வு சுழற்சி (Event Loop) + +நிகழ்வு சுழற்சி (Event loop) என்பது ஜாவாஸ்கிரிப்டில் உள்ள ஒரு அடிப்படைக் கருத்தாகும், இது ஒத்திசைவற்ற நிரலாக்கத்தை (asynchronous programming) அனுமதிக்கிறது. இது குறியீட்டை இயக்குவது, நிகழ்வுகளைச் சேகரிப்பது மற்றும் செயலாக்குவது, மற்றும் வரிசையாகப் பணிகளைச் (queued sub-tasks) செயல்படுத்துவது ஆகியவற்றிற்குப் பொறுப்பாகும். + +### நிகழ்வு சுழற்சி எவ்வாறு செயல்படுகிறது + +ஜாவாஸ்கிரிப்ட் ஒற்றை-த்ரெட்டைக் (single-threaded) கொண்டது, அதாவது ஒரே நேரத்தில் ஒரு துண்டு குறியீட்டை மட்டுமே இயக்க முடியும். சாத்தியமான போதெல்லாம் சிஸ்டம் கர்னலுக்கு (system kernel) செயல்பாடுகளை மாற்றுவதன் (offloading) மூலம் தடையற்ற (non-blocking) செயல்பாடுகளைச் செய்ய நிகழ்வு சுழற்சி ஜாவாஸ்கிரிப்டை அனுமதிக்கிறது. + +### நிகழ்வு சுழற்சியின் கூறுகள் (Components) + +1. **கால் ஸ்டாக் (Call Stack)**: கால் ஸ்டாக்கில் தான் ஜாவாஸ்கிரிப்ட் இயந்திரம் செயல்பாட்டு அழைப்புகளைக் (function calls) கண்காணிக்கிறது. +2. **வெப் ஏபிஐ-கள் (Web APIs)**: இவை உலாவி (அல்லது Node.js) மூலம் வழங்கப்படுகின்றன மற்றும் `setTimeout`, `DOM events` மற்றும் `HTTP requests` போன்றவற்றை உள்ளடக்கியது. +3. **பின்கூப்பிடல் வரிசை (Callback Queue)**: கால் ஸ்டாக் காலியான பிறகு இயக்கப்படுவதற்காகச் செயல்பாடுகள் வரிசையில் வைக்கப்படும் இடம் இதுவாகும். +4. **நிகழ்வு சுழற்சி (Event Loop)**: நிகழ்வு சுழற்சியானது கால் ஸ்டாக் காலியாக உள்ளதா என்பதைத் தொடர்ந்து சரிபார்க்கும். அவ்வாறு இருந்தால், இது பின்கூப்பிடல் வரிசையிலிருந்து முதல் நிகழ்வை எடுத்து அதை கால் ஸ்டாக்கிற்குத் தள்ளுகிறது (pushes). + +### நிகழ்வு சுழற்சிக்கு ஒரு எடுத்துக்காட்டு + +நிகழ்வு சுழற்சி எவ்வாறு செயல்படுகிறது என்பதை விளக்குவதற்கான ஒரு எளிய எடுத்துக்காட்டு இங்கே: + +```javascript +console.log("Start"); + +setTimeout(() => { + console.log("Timeout"); +}, 0); + +console.log("End"); +``` + +**வெளியீடு:** +``` +Start +End +Timeout +``` + +### விளக்கம் + +1. `console.log("Start")` செயல்படுத்தப்பட்டு "Start" என்று அச்சிடப்படுகிறது. +2. `setTimeout` அழைக்கப்படுகிறது, மேலும் பின்கூப்பிடல் (callback) Web API க்கு அனுப்பப்படுகிறது. பிரதான த்ரெட் (main thread) தொடர்கிறது. +3. `console.log("End")` செயல்படுத்தப்பட்டு "End" என்று அச்சிடப்படுகிறது. +4. நிகழ்வு சுழற்சி கால் ஸ்டாக்கைச் சரிபார்த்து அது காலியாக இருப்பதைக் கண்டறிகிறது. இது பின்னர் `setTimeout` பின்கூப்பிடலை கால் ஸ்டாக்கிற்குத் தள்ளுகிறது. +5. `setTimeout` பின்கூப்பிடல் செயல்படுத்தப்பட்டு "Timeout" என்று அச்சிடப்படுகிறது. + +### நிகழ்வு சுழற்சி செயல்பாட்டில் + +நிகழ்வு சுழற்சியைச் செயல்பாட்டில் நிரூபிக்க மிகவும் சிக்கலான உதாரணம் இங்கே: + +```javascript +console.log("Start"); + +setTimeout(() => { + console.log("Timeout 1"); +}, 1000); + +setTimeout(() => { + console.log("Timeout 2"); +}, 0); + +Promise.resolve().then(() => { + console.log("Promise"); +}); + +console.log("End"); +``` + +**வெளியீடு:** +``` +Start +End +Promise +Timeout 2 +Timeout 1 +``` + +### விளக்கம் + +1. `console.log("Start")` செயல்படுத்தப்பட்டு "Start" என்று அச்சிடப்படுகிறது. +2. 1000ms தாமதத்துடன் `setTimeout` அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் Web API க்கு அனுப்பப்படுகிறது. +3. 0ms தாமதத்துடன் `setTimeout` அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் Web API க்கு அனுப்பப்படுகிறது. +4. `Promise.resolve().then` அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் microtask வரிசைக்கு (queue) அனுப்பப்படுகிறது. +5. `console.log("End")` செயல்படுத்தப்பட்டு "End" என்று அச்சிடப்படுகிறது. +6. நிகழ்வு சுழற்சி கால் ஸ்டாக்கைச் சரிபார்த்து அது காலியாக இருப்பதைக் கண்டறிகிறது. பின்னர் அது முதலில் microtask வரிசையைச் செயலாக்குகிறது, `Promise` பின்கூப்பிடலை இயக்கி "Promise" என்று அச்சிடுகிறது. +7. நிகழ்வு சுழற்சி பின்னர் பின்கூப்பிடல் வரிசையைச் செயலாக்குகிறது, 0ms தாமதத்துடன் `setTimeout` ஐ இயக்கி "Timeout 2" என்று அச்சிடுகிறது. +8. இறுதியாக, 1000ms தாமதத்துடன் `setTimeout` செயல்படுத்தப்பட்டு "Timeout 1" என்று அச்சிடப்படுகிறது. + +### Microtasks (vs) Macrotasks + +Microtasks (எ.கா., Promises) Macrotasks ஐ (எ.கா., `setTimeout`) விட அதிக முன்னுரிமையைக் கொண்டுள்ளன. அடுத்த macrotask க்குச் செல்வதற்கு முன், நிகழ்வு சுழற்சி அனைத்து microtasks ஐயும் செயலாக்குகிறது. + +### Microtasks மற்றும் Macrotasks க்கு ஒரு எடுத்துக்காட்டு + +```javascript +console.log("Start"); + +setTimeout(() => { + console.log("Timeout"); +}, 0); + +Promise.resolve().then(() => { + console.log("Promise 1"); +}).then(() => { + console.log("Promise 2"); +}); + +console.log("End"); +``` + +**வெளியீடு:** +``` +Start +End +Promise 1 +Promise 2 +Timeout +``` + +### விளக்கம் + +1. `console.log("Start")` செயல்படுத்தப்பட்டு "Start" என்று அச்சிடப்படுகிறது. +2. `setTimeout` அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் Web API க்கு அனுப்பப்படுகிறது. +3. `Promise.resolve().then` அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் microtask வரிசைக்கு அனுப்பப்படுகிறது. +4. `console.log("End")` செயல்படுத்தப்பட்டு "End" என்று அச்சிடப்படுகிறது. +5. நிகழ்வு சுழற்சி microtask வரிசையைச் செயலாக்குகிறது, `Promise` பின்கூப்பிடல்களை இயக்கி "Promise 1" மற்றும் "Promise 2" என்று அச்சிடுகிறது. +6. நிகழ்வு சுழற்சி பின்னர் பின்கூப்பிடல் வரிசையைச் செயலாக்குகிறது, `setTimeout` பின்கூப்பிடலை இயக்கி "Timeout" என்று அச்சிடுகிறது. diff --git a/ta/behind-scenes/execution-context.md b/ta/behind-scenes/execution-context.md new file mode 100644 index 00000000..4ab6fb6f --- /dev/null +++ b/ta/behind-scenes/execution-context.md @@ -0,0 +1,127 @@ +--- +chapter: 27 +pageNumber: 260 +description: ஜாவாஸ்கிரிப்டில் உள்ள எக்ஸிகியூசன் கான்டெக்ஸ்ட் (Execution Context) பற்றிப் புரிந்துகொள்ளுதல். +--- + +## ஜாவாஸ்கிரிப்டில் எக்ஸிகியூசன் கான்டெக்ஸ்ட் (Execution Context) + +ஜாவாஸ்கிரிப்டில், எக்ஸிகியூசன் கான்டெக்ஸ்ட் என்பது குறியீடு மதிப்பிடப்பட்டு செயல்படுத்தப்படும் ஒரு சூழலாகும் (environment). இது மாறிகள் (variables) மற்றும் செயல்பாடுகளின் (functions) நோக்கம் (scope) மற்றும் நடத்தையை நிர்வகிக்க உதவும் ஒரு அடிப்படைக் கருத்தாகும். + +### எக்ஸிகியூசன் கான்டெக்ஸ்ட்-இன் வகைகள் (Types of Execution Context) + +ஜாவாஸ்கிரிப்டில் மூன்று முக்கிய வகையான எக்ஸிகியூசன் கான்டெக்ஸ்ட்-கள் உள்ளன: + +1. **Global Execution Context (குளோபல் எக்ஸிகியூசன் கான்டெக்ஸ்ட்)**: இது குறியீடு செயல்படுத்தத் தொடங்கும் இயல்புநிலை சூழலாகும். இது குளோபல் பொருளை (global object) (எ.கா., உலாவிகளில் `window`) உருவாக்கி குளோபல் நோக்கத்தை (global scope) அமைக்கிறது. +2. **Function Execution Context (ஃபங்ஷன் எக்ஸிகியூசன் கான்டெக்ஸ்ட்)**: ஒரு செயல்பாடு அழைக்கப்படும்போதெல்லாம் இது உருவாக்கப்படும். ஒவ்வொரு செயல்பாட்டிற்கும் அதன் சொந்த எக்ஸிகியூசன் கான்டெக்ஸ்ட் உள்ளது. +3. **Eval Execution Context (Eval எக்ஸிகியூசன் கான்டெக்ஸ்ட்)**: `eval` செயல்பாட்டின் உள்ளே குறியீடு செயல்படுத்தப்படும்போது இது உருவாக்கப்படுகிறது. + +### எக்ஸிகியூசன் கான்டெக்ஸ்ட்-இன் கட்டங்கள் (Phases of Execution Context) + +ஒவ்வொரு எக்ஸிகியூசன் கான்டெக்ஸ்ட்-உம் இரண்டு கட்டங்கள் வழியாகச் செல்கிறது: + +1. **உருவாக்கும் கட்டம் (Creation Phase)**: இந்தக் கட்டத்தில், ஜாவாஸ்கிரிப்ட் இயந்திரம் குறியீட்டைச் செயல்படுத்துவதற்கான சூழலை அமைக்கிறது. இது பின்வருவனவற்றை உள்ளடக்குகிறது: + - `this` பிணைப்பை (binding) உருவாக்குதல். + - நோக்கம் சங்கிலியை (scope chain) அமைத்தல். + - மாறி பொருளை (variable object) உருவாக்குதல் (மாறிகள், செயல்பாடுகள் மற்றும் வாதங்கள்). + +2. **செயல்படுத்தும் கட்டம் (Execution Phase)**: இந்தக் கட்டத்தில், ஜாவாஸ்கிரிப்ட் இயந்திரம் குறியீட்டை வரியாகச் செயல்படுத்துகிறது. + +### எக்ஸிகியூசன் கான்டெக்ஸ்ட்-க்கு ஒரு எடுத்துக்காட்டு + +எக்ஸிகியூசன் கான்டெக்ஸ்ட்-கள் எவ்வாறு செயல்படுகின்றன என்பதை விளக்குவதற்கான ஒரு எடுத்துக்காட்டு இங்கே: + +```javascript +var globalVar = "நான் ஒரு குளோபல் மாறி (global variable)"; + +function outerFunction() { + var outerVar = "நான் ஒரு வெளிப்புற மாறி (outer variable)"; + + function innerFunction() { + var innerVar = "நான் ஒரு உட்புற மாறி (inner variable)"; + console.log(globalVar); // குளோபல் மாறியை அணுகுகிறது + console.log(outerVar); // வெளிப்புற மாறியை அணுகுகிறது + console.log(innerVar); // உட்புற மாறியை அணுகுகிறது + } + + innerFunction(); +} + +outerFunction(); +``` + +**வெளியீடு:** +``` +நான் ஒரு குளோபல் மாறி (global variable) +நான் ஒரு வெளிப்புற மாறி (outer variable) +நான் ஒரு உட்புற மாறி (inner variable) +``` + +### விளக்கம் + +1. **Global Execution Context**: + - `globalVar` உருவாக்கப்பட்டு "நான் ஒரு குளோபல் மாறி" என்ற மதிப்பு ஒதுக்கப்படுகிறது. + - `outerFunction` உருவாக்கப்பட்டு நினைவகத்தில் (memory) சேமிக்கப்படுகிறது. + +2. **Function Execution Context (outerFunction)**: + - `outerVar` உருவாக்கப்பட்டு "நான் ஒரு வெளிப்புற மாறி" என்ற மதிப்பு ஒதுக்கப்படுகிறது. + - `innerFunction` உருவாக்கப்பட்டு நினைவகத்தில் சேமிக்கப்படுகிறது. + +3. **Function Execution Context (innerFunction)**: + - `innerVar` உருவாக்கப்பட்டு "நான் ஒரு உட்புற மாறி" என்ற மதிப்பு ஒதுக்கப்படுகிறது. + - `console.log` அறிக்கைகள் அந்தந்த நோக்கங்களிலிருந்து மாறிகளை அணுகுகின்றன. + +### நோக்கம் சங்கிலி மற்றும் லெக்சிக்கல் சூழல் (Scope Chain and Lexical Environment) + +நோக்கம் சங்கிலி (scope chain) என்பது தற்போது செயல்படுத்தும் குறியீடு அணுகக்கூடிய அனைத்து மாறி பொருட்களின் பட்டியலாகும். லெக்சிக்கல் சூழல் (lexical environment) என்பது குறியீடு எழுதப்பட்ட சூழலாகும், மேலும் இது நோக்கம் சங்கிலியைத் தீர்மானிக்கிறது. + +### நோக்கம் சங்கிலிக்கு ஒரு எடுத்துக்காட்டு + +```javascript +var a = 10; + +function foo() { + var b = 20; + + function bar() { + var c = 30; + console.log(a + b + c); // அனைத்து நோக்கங்களிலிருந்தும் (scopes) மாறிகளை அணுகுகிறது + } + + bar(); +} + +foo(); +``` + +**வெளியீடு:** +``` +60 +``` + +### விளக்கம் + +1. **Global Scope**: `a` ஐக் கொண்டுள்ளது. +2. **Function Scope (foo)**: `b` ஐக் கொண்டுள்ளது மற்றும் `a` ஐ அணுக முடியும். +3. **Function Scope (bar)**: `c` ஐக் கொண்டுள்ளது மற்றும் `a` மற்றும் `b` ஐ அணுக முடியும். + +### ஹாய்ஸ்டிங் (Hoisting) + +ஹாய்ஸ்டிங் என்பது ஜாவாஸ்கிரிப்ட்டில் உள்ள ஒரு நடத்தையாகும், அங்கு மாறி மற்றும் செயல்பாட்டு அறிவிப்புகள் உருவாக்கும் கட்டத்தில் (creation phase) அவற்றைக் கொண்டிருக்கும் நோக்கத்தின் மேற்பகுதிக்கு நகர்த்தப்படுகின்றன. + +### ஹாய்ஸ்டிங்கிற்கு ஒரு எடுத்துக்காட்டு + +```javascript +console.log(hoistedVar); // வெளியீடு: undefined +var hoistedVar = "நான் ஹாய்ஸ்ட் செய்யப்பட்டேன் (hoisted)"; + +hoistedFunction(); // வெளியீடு: நான் ஒரு ஹாய்ஸ்ட் செய்யப்பட்ட செயல்பாடு +function hoistedFunction() { + console.log("நான் ஒரு ஹாய்ஸ்ட் செய்யப்பட்ட செயல்பாடு"); +} +``` + +### விளக்கம் + +- `hoistedVar` அறிவிக்கப்பட்டுள்ளது, ஆனால் உருவாக்கும் கட்டத்தில் துவக்கப்படவில்லை (initialized), எனவே அதை அணுகும்போது `undefined` ஆக இருக்கும். +- `hoistedFunction` முழுமையாக ஹாய்ஸ்ட் செய்யப்பட்டுள்ளது, மேலும் அதை அறிவிப்பதற்கு முன்பே அழைக்கலாம். \ No newline at end of file diff --git a/ta/behind-scenes/memory-heap.md b/ta/behind-scenes/memory-heap.md new file mode 100644 index 00000000..b3450640 --- /dev/null +++ b/ta/behind-scenes/memory-heap.md @@ -0,0 +1,86 @@ +--- +chapter: 27 +pageNumber: 261 +description: ஜாவாஸ்கிரிப்டில் உள்ள நினைவகக் குவியலைப் (Memory Heap) புரிந்துகொள்ளுதல். +--- + +## ஜாவாஸ்கிரிப்டில் நினைவகக் குவியல் (Memory Heap) + +ஜாவாஸ்கிரிப்டில், பயன்பாடுகளின் திறமையான மற்றும் சீரான செயல்திறனை உறுதிசெய்வதற்கு நினைவக மேலாண்மை (memory management) முக்கியமானது. நினைவகக் குவியல் என்பது பொருள்கள் (objects), சரங்கள் (strings) மற்றும் closures சேமிக்கப்படும் நினைவகத்தில் உள்ள ஒரு பகுதியாகும். இது ஜாவாஸ்கிரிப்ட் இயந்திரத்தின் குப்பை சேகரிப்பானால் (garbage collector) நிர்வகிக்கப்படுகிறது. + +### நினைவகக் குவியல் என்றால் என்ன? + +நினைவகக் குவியல் என்பது ஒரு நிரல் மாறுபட்ட அளவுகளில் தரவைச் சேமிக்கப் பயன்படுத்தக்கூடிய முன்பே ஒதுக்கப்பட்ட கணினி நினைவகத்தின் (pre-reserved computer memory) ஒரு பகுதியாகும். நிலையான (static) நினைவக ஒதுக்கீட்டிற்குப் பயன்படுத்தப்படும் ஸ்டாக்கைப் (stack) போலல்லாமல், குவியல் மாறும் (dynamic) நினைவக ஒதுக்கீட்டிற்குப் பயன்படுத்தப்படுகிறது. + +### நினைவகக் குவியல் எவ்வாறு செயல்படுகிறது + +நீங்கள் ஜாவாஸ்கிரிப்டில் பொருள்கள் அல்லது மாறிகளை உருவாக்கும்போது, அவை நினைவகக் குவியலில் ஒதுக்கப்படுகின்றன. ஜாவாஸ்கிரிப்ட் இயந்திரத்தின் குப்பை சேகரிப்பான் இனி பயன்பாட்டில் இல்லாத நினைவகத்தைக் கண்டறிந்து மீட்க அவ்வப்போது குவியலை ஸ்கேன் செய்கிறது. + +### நினைவக ஒதுக்கீட்டிற்கு (Memory Allocation) ஒரு எடுத்துக்காட்டு + +குவியலில் நினைவகம் எவ்வாறு ஒதுக்கப்படுகிறது என்பதை விளக்குவதற்கான ஒரு எடுத்துக்காட்டு இங்கே: + +```javascript +let obj = { + name: "John", + age: 30 +}; + +let arr = [1, 2, 3, 4, 5]; +``` + +இந்த எடுத்துக்காட்டில், `obj` என்ற பொருளும் `arr` என்ற வரிசையும் நினைவகக் குவியலில் ஒதுக்கப்பட்டுள்ளன. + +### குப்பை சேகரிப்பு (Garbage Collection) + +நினைவகத்தை நிர்வகிக்க ஜாவாஸ்கிரிப்ட் தானியங்கி குப்பை சேகரிப்பு வழிமுறையைப் பயன்படுத்துகிறது. குப்பை சேகரிப்பான் இனி அடைய முடியாத (no longer reachable) பொருள்களைக் கண்டறிந்து அவற்றின் நினைவகத்தை மீட்கிறது (reclaims). + +### குப்பை சேகரிப்பிற்கு ஒரு எடுத்துக்காட்டு + +பின்வரும் உதாரணத்தைக் கவனியுங்கள்: + +```javascript +function createUser() { + let user = { + name: "Alice", + age: 25 + }; + return user; +} + +let user1 = createUser(); +let user2 = createUser(); +user1 = null; // user1 ஆல் குறிப்பிடப்பட்ட பொருள் இப்போது குப்பை சேகரிப்பிற்குத் தகுதியானது +``` + +இந்த எடுத்துக்காட்டில், `user1` ஆனது `null` ஆக அமைக்கப்பட்டால், அது குறிப்பிடும் பொருள் இனி அடைய முடியாததாக இருப்பதால் குப்பை சேகரிப்பிற்குத் தகுதியுடையதாகிறது. + +### நினைவக கசிவுகள் (Memory Leaks) + +இனி தேவையில்லாத நினைவகம் வெளியிடப்படாதபோது (not released) நினைவக கசிவுகள் ஏற்படுகின்றன. பொருள்களுக்கான குறிப்புகள் தற்செயலாகத் தக்கவைக்கப்பட்டால் (retained) இது நிகழலாம். + +### நினைவக கசிவுக்கு ஒரு எடுத்துக்காட்டு + +நினைவக கசிவுக்கு ஒரு எடுத்துக்காட்டு இங்கே: + +```javascript +let arr = []; +function addElement() { + arr.push(new Array(1000000).join('x')); +} + +setInterval(addElement, 1000); // வரிசை தொடர்ந்து வளர்ந்து வருவதால் இது நினைவக கசிவை ஏற்படுத்தும் +``` + +இந்த எடுத்துக்காட்டில், `arr` வரிசை தொடர்ந்து வளர்கிறது, ஏனெனில் புதிய கூறுகள் அகற்றப்படாமல் தொடர்ந்து சேர்க்கப்படுகின்றன, இது நினைவக கசிவுக்கு வழிவகுக்கும். + +### நினைவக மேலாண்மைக்கான சிறந்த நடைமுறைகள் (Best Practices) + +1. **குளோபல் மாறிகளைத் தவிர்க்கவும்**: நினைவக கசிவுகளின் அபாயத்தைக் குறைக்க குளோபல் மாறிகளின் பயன்பாட்டைக் குறைக்கவும். +2. **`let` மற்றும் `const` ஐப் பயன்படுத்தவும்**: மாறிகளின் நோக்கத்தைக் கட்டுப்படுத்த `var` ஐ விட `let` மற்றும் `const` ஐ விரும்புங்கள். +3. **குறிப்புகளைச் சுத்தம் செய்யவும் (Clean Up References)**: இனி தேவையில்லாத குறிப்புகளை வெளிப்படையாக `null` என அமைக்கவும். +4. **Closures ஐ புத்திசாலித்தனமாகப் பயன்படுத்தவும்**: Closures வெளிப்புற மாறிகளுக்கான குறிப்புகளைத் தக்கவைக்க முடியும் என்பதால் அவற்றுடன் கவனமாக இருக்கவும். + +### முடிவு + +திறமையான குறியீட்டை எழுதுவதற்கு ஜாவாஸ்கிரிப்டில் நினைவகக் குவியல் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வது அவசியம். சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலமும், நினைவக ஒதுக்கீடு மற்றும் குப்பை சேகரிப்பு ஆகியவற்றைக் கவனத்தில் கொள்வதன் மூலமும், நினைவக கசிவுகள் போன்ற பொதுவான சிக்கல்களை நீங்கள் தவிர்க்கலாம். diff --git a/ta/behind-scenes/runtime-environment.md b/ta/behind-scenes/runtime-environment.md new file mode 100644 index 00000000..99700c42 --- /dev/null +++ b/ta/behind-scenes/runtime-environment.md @@ -0,0 +1,112 @@ +--- +chapter: 27 +pageNumber: 262 +description: ஜாவாஸ்கிரிப்டில் உள்ள ரன்டைம் சூழலைப் (Runtime Environment) புரிந்துகொள்ளுதல். +--- + +## ஜாவாஸ்கிரிப்டில் ரன்டைம் சூழல் (Runtime Environment) + +ஜாவாஸ்கிரிப்டில் உள்ள ரன்டைம் சூழல் என்பது உங்கள் குறியீடு செயல்படுத்தப்படும் சூழலாகும். இது ஜாவாஸ்கிரிப்ட் இயந்திரம், கால் ஸ்டாக் (call stack), நினைவகக் குவியல் (memory heap) மற்றும் சூழலால் (உலாவி அல்லது Node.js போன்றவை) வழங்கப்படும் API களை உள்ளடக்கியது. + +### ஜாவாஸ்கிரிப்ட் இயந்திரம் (JavaScript Engine) + +உங்கள் குறியீட்டைச் செயல்படுத்துவதற்கு ஜாவாஸ்கிரிப்ட் இயந்திரம் பொறுப்பாகும். பிரபலமான இயந்திரங்களில் V8 (Chrome மற்றும் Node.js இல் பயன்படுத்தப்படுகிறது), SpiderMonkey (Firefox இல் பயன்படுத்தப்படுகிறது) மற்றும் JavaScriptCore (Safari இல் பயன்படுத்தப்படுகிறது) ஆகியவை அடங்கும். + +### கால் ஸ்டாக் (Call Stack) + +கால் ஸ்டாக் என்பது செயல்பாட்டு அழைப்புகளைக் (function calls) கண்காணிக்கும் ஒரு தரவுக் கட்டமைப்பாகும் (data structure). ஒரு செயல்பாடு அழைக்கப்படும்போது, அது ஸ்டாக்கின் உச்சியில் சேர்க்கப்படும். செயல்பாடு திரும்பும்போது (returns), அது ஸ்டாக்கில் இருந்து அகற்றப்படும். + +### கால் ஸ்டாக்கிற்கு ஒரு எடுத்துக்காட்டு + +```javascript +function first() { + console.log("First function"); + second(); +} + +function second() { + console.log("Second function"); + third(); +} + +function third() { + console.log("Third function"); +} + +first(); +``` + +**வெளியீடு:** +``` +First function +Second function +Third function +``` + +### நினைவகக் குவியல் (Memory Heap) + +நினைவகக் குவியலில் தான் பொருள்கள், சரங்கள் மற்றும் closures சேமிக்கப்படுகின்றன. இது குப்பை சேகரிப்பானால் (garbage collector) நிர்வகிக்கப்படுகிறது, இது இனி பயன்பாட்டில் இல்லாத நினைவகத்தை மீட்கிறது. + +### நினைவக ஒதுக்கீட்டிற்கு (Memory Allocation) ஒரு எடுத்துக்காட்டு + +```javascript +let obj = { + name: "John", + age: 30 +}; + +let arr = [1, 2, 3, 4, 5]; +``` + +### நிகழ்வு சுழற்சி (Event Loop) + +ஒத்திசைவற்ற (asynchronous) செயல்பாடுகளைக் கையாளுவதற்கு நிகழ்வு சுழற்சி பொறுப்பாகும். இது கால் ஸ்டாக் மற்றும் பணி வரிசையை (task queue) தொடர்ந்து சரிபார்க்கிறது, ஸ்டாக் காலியாக இருக்கும்போது வரிசையிலிருந்து பணிகளைச் செயல்படுத்துகிறது. + +### நிகழ்வு சுழற்சிக்கு ஒரு எடுத்துக்காட்டு + +```javascript +console.log("Start"); + +setTimeout(() => { + console.log("Timeout"); +}, 0); + +console.log("End"); +``` + +**வெளியீடு:** +``` +Start +End +Timeout +``` + +### சூழல் (Environment) வழங்கும் API கள் + +ரன்டைம் சூழல் உங்கள் குறியீட்டில் பயன்படுத்தக்கூடிய பல்வேறு API களை வழங்குகிறது. உலாவியில், இவற்றில் DOM, fetch மற்றும் setTimeout ஆகியவை அடங்கும். Node.js இல், கோப்பு முறைமை (file system) செயல்பாடுகள், HTTP கோரிக்கைகள் மற்றும் பல அடங்கும். + +### உலாவி (Browser) API க்கு ஒரு எடுத்துக்காட்டு + +```javascript +document.getElementById("myButton").addEventListener("click", () => { + alert("Button clicked!"); +}); +``` + +### Node.js API க்கு ஒரு எடுத்துக்காட்டு + +```javascript +const fs = require('fs'); + +fs.readFile('example.txt', 'utf8', (err, data) => { + if (err) { + console.error(err); + return; + } + console.log(data); +}); +``` + +### முடிவு + +திறமையான மற்றும் பயனுள்ள குறியீட்டை எழுதுவதற்கு ஜாவாஸ்கிரிப்டில் உள்ள ரன்டைம் சூழலைப் புரிந்துகொள்வது முக்கியமானது. கால் ஸ்டாக், நினைவகக் குவியல், நிகழ்வு சுழற்சி மற்றும் வழங்கப்பட்ட API கள் எவ்வாறு செயல்படுகின்றன என்பதை அறிந்துகொள்வதன் மூலம், உங்கள் குறியீட்டின் செயல்பாடு மற்றும் செயல்திறனை நீங்கள் சிறப்பாக நிர்வகிக்கலாம். \ No newline at end of file diff --git a/ta/browser-object-model-bom/README.md b/ta/browser-object-model-bom/README.md new file mode 100644 index 00000000..fb9db1a9 --- /dev/null +++ b/ta/browser-object-model-bom/README.md @@ -0,0 +1,28 @@ +--- +layout: editorial +chapter: 16 +pageNumber: 98 +description: Browser Object Model (BOM) உலாவி சாளரத்துடன் (browser window) தொடர்புகொள்ள நம்மை அனுமதிக்கிறது. இதன் மூலம் சாளரம், பிரேம்கள், வரலாறு (history), இருப்பிடம் (location) மற்றும் பல போன்ற உலாவியின் பல்வேறு அம்சங்களை ஒருவர் கட்டுப்படுத்தலாம் அல்லது கையாளலாம். +--- + +# அத்தியாயம் 16 +# உலாவி பொருள் மாதிரி (Browser Object Model - BOM) + +உலாவி பொருள் மாதிரி (Browser object model) உலாவி சாளரத்துடன் தொடர்புகொள்ள நம்மை அனுமதிக்கிறது. `window` பொருள் உலாவியின் சாளரத்தைக் குறிக்கிறது மற்றும் இது அனைத்து உலாவிகளாலும் ஆதரிக்கப்படுகிறது. + +பொருள் (Object) `window` என்பது உலாவியின் இயல்புநிலை பொருளாகும், எனவே நாம் `window` ஐக் குறிப்பிடலாம் அல்லது நேரடியாக அனைத்து செயல்பாடுகளையும் அழைக்கலாம். + +```javascript +window.alert("Learn JavaScript க்கு வரவேற்கிறோம்"); + +alert("Learn JavaScript க்கு வரவேற்கிறோம்") +``` + +இந்த அத்தியாயத்தில், உலாவி பொருள் மாதிரியின் (browser object model) பல்வேறு பண்புகள் மற்றும் முறைகளைப் பற்றிப் பேசுவோம். +* [குக்கீகள் (Cookies)](./cookies.md) +* [வரலாறு (History)](./history.md) +* [இருப்பிடம் (Location)](./location.md) +* [நேவிகேட்டர் (Navigator)](./navigator.md) +* [பாப்அப் (Popup)](./popup.md) +* [திரை (Screen)](./screen.md) +* [சாளரம் (Window)](./window.md) diff --git a/ta/browser-object-model-bom/cookies.md b/ta/browser-object-model-bom/cookies.md new file mode 100644 index 00000000..1ad0f707 --- /dev/null +++ b/ta/browser-object-model-bom/cookies.md @@ -0,0 +1,44 @@ +--- +chapter: 16 +pageNumber: 103 +description: Cookies (குக்கீகள்) என்பவை கணினியில் சேமிக்கப்படும் மற்றும் உலாவியால் (browser) அணுகக்கூடிய தகவல்களின் துண்டுகளாகும். +--- +# குக்கீகள் (Cookies) 🍪 + +குக்கீகள் என்பவை கணினியில் சேமிக்கப்படும் மற்றும் உலாவியால் அணுகக்கூடிய தகவல்களின் துண்டுகளாகும். + +வலை உலாவிக்கும் சேவையகத்திற்கும் (server) இடையிலான தொடர்பு நிலையற்றது (stateless), அதாவது ஒவ்வொரு கோரிக்கையையும் இது சுயாதீனமாக (independently) கருதுகிறது. பயனரின் தகவல்களைச் சேமித்து அந்தத் தகவலை உலாவிக்குக் கிடைக்கச் செய்ய வேண்டிய சந்தர்ப்பங்கள் உள்ளன. குக்கீகள் மூலம், எப்போது தேவைப்படுகிறதோ அப்போது கணினியிலிருந்து தகவலைப் பெறலாம். + +குக்கீகள் பெயர்-மதிப்பு ஜோடியாகச் (name-value pair) சேமிக்கப்படுகின்றன + +```javascript +book = Learn JavaScript +``` + +`document.cookie` பண்பானது (property) குக்கீகளை உருவாக்க, படிக்க மற்றும் நீக்கப் பயன்படுகிறது. குக்கீயை உருவாக்குவது மிகவும் எளிதானது, நீங்கள் பெயர் மற்றும் மதிப்பை வழங்க வேண்டும் + +```javascript +document.cookie = "book=Learn JavaScript"; +``` + +முன்னிருப்பாக, உலாவி மூடப்படும்போது குக்கீ நீக்கப்படும். அதை நிலையானதாக (persistent) மாற்ற, நாம் காலாவதியாகும் தேதியை (expiry date - UTC நேரத்தில்) குறிப்பிட வேண்டும். + +```javascript +document.cookie = "book=Learn JavaScript; expires=Fri, 08 Jan 2022 12:00:00 UTC"; +``` + +குக்கீ எந்தப் பாதைக்குச் (path) சொந்தமானது என்பதைக் கூற ஒரு அளவுருவை (parameter) நாம் சேர்க்கலாம். முன்னிருப்பாக, குக்கீ தற்போதைய பக்கத்திற்குச் சொந்தமானது. + +```javascript +document.cookie = "book=Learn JavaScript; expires=Fri, 08 Jan 2022 12:00:00 UTC; path=/"; +``` + +குக்கீயின் எளிய எடுத்துக்காட்டு இங்கே. + +```javascript +let cookies = document.cookie; +// அனைத்து குக்கீகளையும் மீட்டெடுக்க ஒரு எளிய வழி (retrieve all cookie). + +document.cookie = "book=Learn JavaScript; expires=Fri, 08 Jan 2022 12:00:00 UTC; path=/"; +// ஒரு குக்கீயை அமைத்தல் (setting up a cookie) +``` diff --git a/ta/browser-object-model-bom/history.md b/ta/browser-object-model-bom/history.md new file mode 100644 index 00000000..135eaec7 --- /dev/null +++ b/ta/browser-object-model-bom/history.md @@ -0,0 +1,42 @@ +--- +chapter: 16 +pageNumber: 104 +description: History பொருள் உலாவியின் (browser) வரலாற்று அடுக்கை (history stack) நிர்வகிக்கிறது. நாம் பக்கங்களுக்குச் செல்லும்போது புதிய உள்ளீடுகள் அடுக்கில் தள்ளப்படும். +--- + +# வரலாறு (History) + +நாம் ஒரு வலை உலாவியைத் திறந்து ஒரு வலைப்பக்கத்தை உலாவும்போது அது வரலாற்று அடுக்கில் ஒரு புதிய உள்ளீட்டை உருவாக்குகிறது. நாம் வெவ்வேறு பக்கங்களுக்குச் செல்லும்போது புதிய உள்ளீடுகள் அடுக்கில் தள்ளப்படும் (pushed). + +history பொருளை அணுக நாம் இதைப் பயன்படுத்தலாம் + +```javascript +window.history +// அல்லது +history +``` + +வெவ்வேறு வரலாற்று அடுக்குகளுக்கு இடையில் செல்ல நாம் **history** பொருளின் `go()`, `forward()` மற்றும் `back()` முறைகளைப் பயன்படுத்தலாம். + +1. **go()**: வரலாற்று அடுக்கின் குறிப்பிட்ட URL க்குச் செல்ல இது பயன்படுகிறது. + + ```javascript + history.go(-1); // பக்கத்தைப் பின்னோக்கி நகர்த்துகிறது + history.go(0); // தற்போதைய பக்கத்தைப் புதுப்பிக்கிறது + history.go(); // தற்போதைய பக்கத்தைப் புதுப்பிக்கிறது + history.go(1) // பக்கத்தை முன்னோக்கி நகர்த்துகிறது + ``` + + > _**குறிப்பு:**_ வரலாற்று அடுக்கில் தற்போதைய பக்கத்தின் நிலை **0** ஆகும். + +2. **back()** : பக்கத்தைப் பின்னோக்கிச் செல்ல `back()` முறையைப் பயன்படுத்துகிறோம். + + ```javascript + history.back(); + ``` + +3. **forward()**: இது உலாவி வரலாற்றில் அடுத்த பட்டியலை ஏற்றுகிறது. இது உலாவியில் முன்னோக்கி (forward) பொத்தானைக் கிளிக் செய்வதற்கு ஒத்ததாகும். + + ```javascript + history.forward(); + ``` diff --git a/ta/browser-object-model-bom/location.md b/ta/browser-object-model-bom/location.md new file mode 100644 index 00000000..8ff5ad68 --- /dev/null +++ b/ta/browser-object-model-bom/location.md @@ -0,0 +1,33 @@ +--- +chapter: 16 +pageNumber: 105 +description: location என்பது உலாவியில் காட்டப்படும் வலைப்பக்கத்தின் தற்போதைய URL ஐக் குறிக்கும் உள்ளமைக்கப்பட்ட பொருளாகும் (built-in object). இது தற்போதைய வலைப்பக்கத்தின் இருப்பிடத்தை வழங்குகிறது மற்றும் URL கள் தொடர்பான பல்வேறு செயல்பாடுகளைச் செய்ய அனுமதிக்கிறது. +--- +# இருப்பிடம் (Location) + +ஆவணத்தின் (document) தற்போதைய இருப்பிடத்தை (URL) மீட்டெடுக்க (retrieve) `location` பொருள் பயன்படுத்தப்படுகிறது மற்றும் ஆவண இருப்பிடத்தைக் கையாள வெவ்வேறு முறைகளை (methods) வழங்குகிறது. ஒருவர் தற்போதைய இருப்பிடத்தை இதன் மூலம் அணுகலாம் + +```javascript +window.location +//அல்லது +document.location +//அல்லது +location +``` + +> _**குறிப்பு**_: `window.location` மற்றும் `document.location` ஆகியவை ஒரே location பொருளைக் குறிக்கின்றன. + +பின்வரும் URL இன் உதாரணத்தை எடுத்துக்கொண்டு `location` இன் வெவ்வேறு பண்புகளை ஆராய்வோம் + +[`http://localhost:3000/js/index.html?type=listing&page=2#title`](http://localhost:8080/js/index.html?type=listing\&page=2#title) + +```javascript +location.href //தற்போதைய ஆவண URL ஐ அச்சிடுகிறது +location.protocol //http: அல்லது https: போன்ற நெறிமுறையை (protocol) அச்சிடுகிறது +location.host //localhost அல்லது localhost:3000 போன்ற போர்ட் (port) கொண்ட ஹோஸ்ட்பெயரை (hostname) அச்சிடுகிறது +location.hostname //localhost அல்லது www.example.com போன்ற ஹோஸ்ட்பெயரை அச்சிடுகிறது +location.port //3000 போன்ற போர்ட் (port) எண்ணை அச்சிடுகிறது +location.pathname // /js/index.html போன்ற பாதைபெயரை (pathname) அச்சிடுகிறது +location.search // ?type=listing&page=2 போன்ற வினவல் சரத்தை (query string) அச்சிடுகிறது +location.hash // #title போன்ற துண்டு அடையாளங்காட்டியை (fragment identifier) அச்சிடுகிறது +``` diff --git a/ta/browser-object-model-bom/navigator.md b/ta/browser-object-model-bom/navigator.md new file mode 100644 index 00000000..4b4ca29a --- /dev/null +++ b/ta/browser-object-model-bom/navigator.md @@ -0,0 +1,31 @@ +--- +chapter: 16 +pageNumber: 102 +description: navigator என்பது பயனரின் வலை உலாவி (web browser) மற்றும் பயனரின் கணினி பற்றிய தகவல்களை வழங்கும் உள்ளமைக்கப்பட்ட பொருளாகும் (built-in object). உலாவியின் பெயர், பதிப்பு (version), பயனர் முகவர் (user agent), மொழி விருப்பத்தேர்வுகள் மற்றும் பல போன்ற பயனரின் சூழல் பற்றிய தகவல்களை அணுகக்கூடிய பல்வேறு பண்புகள் (properties) மற்றும் முறைகளை (methods) இது கொண்டுள்ளது. +--- +# நேவிகேட்டர் (Navigator) + +`window.navigator` அல்லது `navigator` என்பது **படிக்க மட்டுமேயான (read-only)** பண்பாகும் மற்றும் உலாவியுடன் தொடர்புடைய வெவ்வேறு முறைகள் மற்றும் செயல்பாடுகளைக் கொண்டுள்ளது. + +நேவிகேட்டரின் சில எடுத்துக்காட்டுகளைப் பார்ப்போம். + +1. **navigator.appName**: இது உலாவி பயன்பாட்டின் (browser application) பெயரைக் கொடுக்கிறது + + ```javascript + navigator.appName; + // "Netscape" + ``` + + > _**குறிப்பு:**_ IE11, Chrome, Firefox மற்றும் Safari க்கான பயன்பாட்டின் பெயர் "Netscape" ஆகும். +2. **navigator.cookieEnabled**: உலாவியில் குக்கீ மதிப்பைப் பொறுத்து பூலியன் (boolean) மதிப்பைத் திரும்பப் பெறுகிறது. + + ```javascript + navigator.cookieEnabled; + //true + ``` +3. **navigator.platform**: உலாவி இயக்க முறைமை (operating system) பற்றிய தகவல்களை வழங்குகிறது. + + ```javascript + navigator.platform; + "MacIntel" + ``` diff --git a/ta/browser-object-model-bom/popup.md b/ta/browser-object-model-bom/popup.md new file mode 100644 index 00000000..b7c49f38 --- /dev/null +++ b/ta/browser-object-model-bom/popup.md @@ -0,0 +1,38 @@ +--- +chapter: 16 +pageNumber: 100 +description: Popups (பாப்அப்கள்) என்பவை தகவலை வழங்க பிரதான உலாவியின் மேல் தோன்றும் சிறிய சாளரம் ஆகும். அறிவிப்புகள் (notifications), எச்சரிக்கைகள், உரையாடல்கள் (dialogs), உள்நுழைவுப் படிவங்கள் (login forms) அல்லது பிரதான பக்கத்திலிருந்து தற்காலிகமாக அல்லது தனிச் சூழலில் தோன்ற வேண்டிய வேறு ஏதேனும் உள்ளடக்கத்தைக் காட்ட இது பயன்படுகிறது. +--- +# பாப்அப் (Popup) + +பாப்அப்கள் என்பவை தகவலைக் காட்டவும், பயனரின் உறுதிப்படுத்தலைப் (confirmation) பெறவும், அல்லது கூடுதல் ஆவணங்களிலிருந்து பயனரின் உள்ளீட்டை (input) பெறவுமான கூடுதல் வழியாகும். ஒரு பாப்அப் ஒரு புதிய URL க்குச் சென்று, அதைத் திறந்த சாளரத்திற்குத் தகவலை அனுப்ப முடியும். பாப்அப் தகவலை நாம் காட்டக்கூடிய குளோபல் செயல்பாடுகள் **எச்சரிக்கை பெட்டி (Alert box)**, **உறுதிப்படுத்தல் பெட்டி (Confirmation box)** மற்றும் **ப்ராம்ப்ட் பெட்டி (Prompt box)** ஆகும். + +1. **alert()**: இது பயனருக்குத் தகவலைக் காட்டுகிறது மற்றும் தொடர "**OK**" பொத்தானைக் கொண்டுள்ளது. + + ```javascript + alert("Alert message example"); + ``` +2. **confirm()**: ஏதேனும் ஒன்றை உறுதிப்படுத்த அல்லது ஏற்க உரையாடல் பெட்டியாகப் (dialog box) பயன்படுத்தவும். தொடர இது "**Ok**" மற்றும் "**Cancel**" ஆகியவற்றைக் கொண்டுள்ளது. பயனர் "**Ok**" என்பதைக் கிளிக் செய்தால் அது `true` ஐத் திரும்பப் பெறும், "**Cancel**" என்பதைக் கிளிக் செய்தால் அது `false` ஐத் திரும்பப் பெறும். + + ```javascript + let txt; + if (confirm("ஒரு பொத்தானை அழுத்தவும்! (Press a button!)")) { + txt = "நீங்கள் OK ஐ அழுத்தினீர்கள்!"; + } else { + txt = "நீங்கள் Cancel ஐ அழுத்தினீர்கள்!"; + } + ``` +3. **prompt()**: "**Ok"** மற்றும் "**Cancel"** பொத்தான்களுடன் பயனரின் உள்ளீட்டு மதிப்பை எடுக்கும். பயனர் எந்த உள்ளீட்டு மதிப்பையும் வழங்கவில்லை என்றால் அது `null` ஐத் திரும்பப் பெறும். + + ```javascript + //தொடரியல் (syntax) + //window.prompt("sometext","defaultText"); + + let person = prompt("உங்கள் பெயரை உள்ளிடவும் (Please enter your name)", "Harry Potter"); + + if (person == null || person == "") { + txt = "பயனர் ப்ராம்ப்டை ரத்து செய்தார். (User cancelled the prompt.)"; + } else { + txt = "வணக்கம் " + person + "! நீங்கள் இன்று எப்படி இருக்கிறீர்கள்?"; + } + ``` diff --git a/ta/browser-object-model-bom/screen.md b/ta/browser-object-model-bom/screen.md new file mode 100644 index 00000000..0745252f --- /dev/null +++ b/ta/browser-object-model-bom/screen.md @@ -0,0 +1,28 @@ +--- +chapter: 16 +pageNumber: 101 +description: தற்போதைய சாளரம் காட்டப்படும் திரை (screen) பற்றிய தகவல்களை screen பொருள் கொண்டுள்ளது. பயனரின் திரை அளவு, தெளிவுத்திறன் (resolution), வண்ண ஆழம் (color depth) மற்றும் காட்சி தொடர்பான பிற தகவல்கள் தொடர்பான பண்புகளை (properties) அணுக டெவலப்பர்களை இது அனுமதிக்கிறது. +--- +# திரை (Screen) + +தற்போதைய சாளரம் காட்டப்படும் திரை பற்றிய தகவல்களை `screen` பொருள் கொண்டுள்ளது. `screen` பொருளை அணுக நாம் `window` பொருளின் `screen` பண்பைப் பயன்படுத்தலாம். + +```javascript +window.screen +//அல்லது +screen +``` + +`window.screen` பொருள் வெவ்வேறு பண்புகளைக் கொண்டுள்ளது, அவற்றில் சில இங்கே பட்டியலிடப்பட்டுள்ளன: + +| பண்பு (Property) | விளக்கம் (Description) | +| -------------- | --------------------------------------------------------------------------------- | +| `availTop` | கணினி கூறுகளால் (system elements) எடுத்துக்கொள்ளப்படாத மேலிருந்து முதல் பிக்சலைத் திரும்பப் பெறும் ஒரு படிக்க மட்டுமேயான (read-only) பண்பு. | +| `availWidth` | கணினி கூறுகளைத் தவிர்த்து திரையின் பிக்சல் அகலத்தைத் திரும்பப் பெறும் ஒரு படிக்க மட்டுமேயான பண்பு. | +| `colorDepth` | வண்ணங்களைப் பிரதிநிதித்துவப்படுத்தப் பயன்படுத்தப்படும் பிட்களின் (bits) எண்ணிக்கையைத் திரும்பப் பெறும் ஒரு படிக்க மட்டுமேயான பண்பு. | +| `height` | திரையின் பிக்சல் உயரத்தைக் (pixel height) குறிக்கிறது. | +| `left` | தற்போதைய திரையின் இடது பக்கத்தின் பிக்சல் தூரத்தைக் குறிக்கிறது. | +| `orientation` | Screen Orientation API இல் குறிப்பிட்டுள்ளபடி திரை நோக்குநிலையைத் (screen orientation) திரும்பப் பெறுகிறது. | +| `pixelDepth` | திரையின் பிட் ஆழத்தைத் (bit depth) திரும்பப் பெறும் ஒரு படிக்க மட்டுமேயான பண்பு. | +| `top` | தற்போதைய திரையின் மேல்பகுதியின் பிக்சல் தூரத்தைக் குறிக்கிறது. | +| `width` | திரையின் பிக்சல் அகலத்தைக் குறிக்கிறது. | diff --git a/ta/browser-object-model-bom/window.md b/ta/browser-object-model-bom/window.md new file mode 100644 index 00000000..66cafb8c --- /dev/null +++ b/ta/browser-object-model-bom/window.md @@ -0,0 +1,24 @@ +--- +chapter: 16 +pageNumber: 99 +description: window என்பது தற்போதைய வலைப்பக்கம் ஏற்றப்பட்டுள்ள உலாவி சாளரம் (browser window) அல்லது தாவலைக் (tab) குறிக்கும் ஒரு குளோபல் பொருளாகும் (global object). window பொருளானது கிளையன்ட்-பக்க (client-side) ஜாவாஸ்கிரிப்ட்டுக்கான குளோபல் பொருளாகச் செயல்படுகிறது, அதாவது var, let அல்லது const முக்கிய சொற்கள் (keywords) இல்லாமல் அறிவிக்கப்பட்ட மாறிகள் (variables) மற்றும் செயல்பாடுகள் (functions) window பொருளின் பண்புகள் (properties) மற்றும் முறைகளாக (methods) மாறும். +--- +# சாளரம் (Window) + +`window` பொருளானது உலாவி சாளரத்தைக் குறிக்கிறது மற்றும் இது உலாவிகளால் ஆதரிக்கப்படுகிறது. குளோபல் மாறிகள், பொருள்கள் மற்றும் செயல்பாடுகளும் window பொருளின் ஒரு பகுதியாகும். + +குளோபல் **மாறிகள்** window பொருளின் **பண்புகள் (properties)** மற்றும் **செயல்பாடுகள்** அதன் **முறைகள் (methods)** ஆகும். + +திரைப் பண்புகளின் (screen properties) எடுத்துக்காட்டை எடுத்துக்கொள்வோம். இது உலாவி சாளரத்தின் அளவைத் தீர்மானிக்கப் பயன்படுகிறது மற்றும் பிக்சல்களில் (pixels) அளவிடப்படுகிறது. + +* `window.innerHeight` - உலாவி சாளரத்தின் உள் உயரம் (inner height) +* `window.innerWidth` - உலாவி சாளரத்தின் உள் அகலம் (inner width) + +> _**குறிப்பு**_: `window.document` என்பது `document.location` ஐப் போன்றதே, ஏனெனில் ஆவணப் பொருள் மாதிரி (document object model - DOM) window பொருளின் ஒரு பகுதியாகும். + +window முறைகளுக்கான சில எடுத்துக்காட்டுகள் + +* `window.open()` - ஒரு புதிய சாளரத்தைத் திறக்கிறது +* `window.close()` - தற்போதைய சாளரத்தை மூடுகிறது +* `window.moveTo()` - தற்போதைய சாளரத்தை நகர்த்துகிறது +* `window.resizeTo()` - தற்போதைய சாளரத்தின் அளவை மாற்றுகிறது diff --git a/ta/classes/README.md b/ta/classes/README.md new file mode 100644 index 00000000..a503ac25 --- /dev/null +++ b/ta/classes/README.md @@ -0,0 +1,43 @@ +--- +layout: editorial +chapter: 15 +pageNumber: 94 +description: வகுப்புகள் (Classes) என்பவை ஒரு பொருளை (object) உருவாக்குவதற்கான டெம்ப்ளேட்டுகள் (templates). இது தரவுடன் (data) வேலை செய்வதற்கான குறியீட்டைக் கொண்டு தரவை இணைக்கிறது (encapsulates). ஒரு வகுப்பை உருவாக்க class என்ற முக்கிய சொல் பயன்படுத்தப்படுகிறது. +--- + +# அத்தியாயம் 15 +# வகுப்புகள் (Classes) + +வகுப்புகள் என்பவை ஒரு பொருளை உருவாக்குவதற்கான டெம்ப்ளேட்டுகள். இது தரவுடன் வேலை செய்வதற்கான குறியீட்டைக் கொண்டு தரவை இணைக்கிறது. எடுத்துக்காட்டாக, பறவைகளின் குடும்ப மரத்தை (family tree) உருவாக்க விரும்பினால், நாம் ஒரு பறவை வகுப்பை (bird class) உருவாக்கலாம், மேலும் நாம் உருவாக்கும் ஒவ்வொரு பறவைப் பொருளும் பறவை வகுப்பிலிருந்து முறைகள் (methods) மற்றும் தரவைக் (data) கொண்டிருக்கும். + +ஒரு வகுப்பை உருவாக்க `class` என்ற முக்கிய சொல் பயன்படுத்தப்படுகிறது. மற்றும் `class` உடன் உருவாக்கப்பட்ட ஒரு பொருளை உருவாக்கவும் துவக்கவும் `constructor` எனப்படும் ஒரு குறிப்பிட்ட முறை பயன்படுத்தப்படுகிறது. கார் (car) வகுப்பின் எடுத்துக்காட்டு கீழே காட்டப்பட்டுள்ளது. + +```javascript +class Car { + constructor(name, year) { + this.name = name; + this.year = year; + } + age() { + let date = new Date(); + return date.getFullYear() - this.year; + } +} + +let myCar = new Car("Toyota", 2021); +console.log(myCar.age()) // 1 +``` + +{% hint style="info" %} +வகுப்பைப் பயன்படுத்துவதற்கு முன்பு அதை வரையறுக்க வேண்டும். +{% endhint %} + +வகுப்பின் உடலில் (class body), முறைகள் அல்லது கன்ஸ்ட்ரக்டர்கள் (constructors) `கண்டிப்பான பயன்முறையில் (strict mode)` வரையறுக்கப்பட்டு செயல்படுத்தப்படுகின்றன. கண்டிப்பான பயன்முறையைப் பின்பற்றாத தொடரியல் பிழையை (error) ஏற்படுத்துகிறது. + +ஒவ்வொரு முறையும் ஒரு வகுப்பிலிருந்து ஒரு பொருளை உருவாக்கும் போது, அந்த வகுப்பின் **நிகழ்வை (instance)** உருவாக்குகிறோம், எடுத்துக்காட்டாக, `new` முக்கிய சொல்லுடன் மேலே உள்ள `myCar` மாறி ஒரு நிகழ்வாகும். நிகழ்வுகள் *சுயாதீனமானவை (independent)* அதாவது இது வேறு எந்த நிகழ்வையும் பாதிக்காது. இதனால்தான் வகுப்புகள் பொருள்களுக்கான டெம்ப்ளேட்டுகளாகக் கருதப்படுகின்றன. அந்த நிகழ்வுப் பொருளை (instance object) நீங்கள் உருவாக்கியவுடன் அது அசல் வகுப்பின் அதே முறைகளைக் கொண்டிருக்கும். + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [அணுகல் மாற்றிகள் (Access Modifiers)](./access-modifiers.md) +* [கலவை (Composition)](./composition.md) +* [மரபுரிமை (Inheritance)](./inheritance.md) +* [நிலையானவை (Static)](./static.md) \ No newline at end of file diff --git a/ta/classes/access-modifiers.md b/ta/classes/access-modifiers.md new file mode 100644 index 00000000..88f31564 --- /dev/null +++ b/ta/classes/access-modifiers.md @@ -0,0 +1,65 @@ +--- +chapter: 15 +pageNumber: 97 +description: அணுகல் மாற்றிகள் (Access modifiers) வகுப்பு உறுப்பினர்களின் (பண்புகள் மற்றும் முறைகள்) தெரிவுநிலை மற்றும் அணுகலைக் கட்டுப்படுத்துகின்றன. public, private மற்றும் protected ஆகியவை வெளியிலிருந்து அதன் அணுகலைக் கட்டுப்படுத்த வகுப்பில் பயன்படுத்தப்படும் மூன்று அணுகல் மாற்றிகளாகும். முன்னிருப்பாக, அனைத்து உறுப்பினர்களும் (பண்புகள், புலங்கள், முறைகள் அல்லது செயல்பாடுகள்) வகுப்பிற்கு வெளியே இருந்து பொதுவில் அணுகக்கூடியவை. +--- +# அணுகல் மாற்றிகள் (Access Modifiers) + +`public` (பொது), `private` (தனியார்) மற்றும் `protected` (பாதுகாக்கப்பட்டவை) ஆகியவை வெளியிலிருந்து அதன் அணுகலைக் கட்டுப்படுத்த வகுப்பில் பயன்படுத்தப்படும் மூன்று அணுகல் மாற்றிகளாகும். முன்னிருப்பாக, அனைத்து உறுப்பினர்களும் (பண்புகள், புலங்கள், முறைகள் அல்லது செயல்பாடுகள்) வகுப்பிற்கு வெளியே இருந்து பொதுவில் அணுகக்கூடியவை. + +```javascript +class Car { + constructor(name) { + this.name = name; + } + static hello(x) { + return "Hello " + x.name; + } +} +let myCar = new Car("Toyota"); +console.log(Car.hello(myCar)); // Hello Toyota +``` + +`private` உறுப்பினர்கள் வகுப்பிற்குள் மட்டுமே உள்நாட்டில் அணுக முடியும், வெளியிலிருந்து அணுக முடியாது. Private `#` உடன் தொடங்க வேண்டும். + +```javascript +class Car { + constructor(name) { + this.name = name; + } + static hello(x) { + return "Hello " + x.name; + } + #present(carname) { + return 'I have a ' + this.carname; + } +} +let myCar = new Car("Toyota"); +console.log(myCar.#present("Camry")); // பிழை (Error) +console.log(Car.hello(myCar)); // Hello Toyota +``` + +`protected` புலங்களை வகுப்பின் உள்ளே இருந்தும் அதை நீட்டிப்பவர்களிடமிருந்தும் (extending) மட்டுமே அணுக முடியும். சுதந்தரிக்கும் (inheriting) வகுப்பும் பெற்றோர் வகுப்பிற்கான (parent class) அணுகலைப் பெறுவதால், உள் இடைமுகத்திற்கு (internal interface) இவை பயனுள்ளதாக இருக்கும். `_` உடன் பாதுகாக்கப்பட்ட புலங்கள். + +```javascript +class Car { + constructor(brand) { + this.carname = brand; + } + _present() { + return 'I have a ' + this.carname; + } +} + +class Model extends Car { + constructor(brand, mod) { + super(brand); + this.model = mod; + } + show() { + return this._present() + ', it is a ' + this.model; + } +} +let myCar = new Model("Toyota", "Camry"); +console.log(myCar.show()) // I have a Toyota, it is a Camry +``` diff --git a/ta/classes/composition.md b/ta/classes/composition.md new file mode 100644 index 00000000..62556830 --- /dev/null +++ b/ta/classes/composition.md @@ -0,0 +1,55 @@ +--- +chapter: 15 +pageNumber: 96 +description: தளர்வான இணைப்பியல் (loose coupling) மற்றும் நெகிழ்வுத்தன்மையை (flexibility) உறுதி செய்யும் "has-a (கொண்டுள்ளது)" உறவுகளை உருவாக்க கலவை (Composition) பயனுள்ளதாக இருக்கும். நம் வகுப்பு ஒரு சுவர் என்று கற்பனை செய்தால், கலவையின் மூலம் அதை உருவாக்கும் வகுப்புகள் செங்கற்கள் போன்றவை - சிறிய மற்றும் நிர்வகிக்கக்கூடிய கூறுகள் (components). +--- + +# கலவை (Composition) + +தளர்வான இணைப்பியல் மற்றும் நெகிழ்வுத்தன்மையை உறுதி செய்யும் "has-a (கொண்டுள்ளது)" உறவுகளை உருவாக்க கலவை பயனுள்ளதாக இருக்கும். நம் வகுப்பு ஒரு சுவர் என்று கற்பனை செய்தால், கலவையின் மூலம் அதை உருவாக்கும் வகுப்புகள் செங்கற்கள் போன்றவை - சிறிய மற்றும் நிர்வகிக்கக்கூடிய கூறுகள். + +## கலவையின் நன்மைகள் (Benefits of composition) + + + மறுபயன்பாடு (Reusability) - பயன்பாட்டின் (application) வெவ்வேறு பகுதிகள் முழுவதும் கூறுகளை மீண்டும் பயன்படுத்தலாம். + + + பராமரிப்பு (Maintainability) - ஒரு கூறில் ஏற்படும் மாற்றங்கள் மற்றவற்றுடன் குறைந்தபட்ச தாக்கத்தை ஏற்படுத்துகின்றன. + + + நெகிழ்வுத்தன்மை (Flexibility) - பெரிய மற்றும் சிக்கலான கட்டமைப்புகளை விட வெவ்வேறு கூறுகளை மாற்றுவதன் மூலம் பயன்பாட்டின் நடத்தை மாற்றுவது எளிது. + + + ஒற்றை பொறுப்பு (Single responsibility) - இது ஒவ்வொரு வகுப்பையும் இணைத்து (encapsulated) ஒரு ஒற்றை பணியில் கவனம் செலுத்துகிறது, ஒற்றை பொறுப்புக் கொள்கையைக் கடைப்பிடிக்கிறது. + +```javascript +class Book { + constructor(title, author) { + this.title = title; + this.author = author; + } +} + +class Library { + constructor() { + this.books = []; + } + + add(book) { + this.books.push(book); + return `${book.title} நூலகத்தில் சேர்க்கப்பட்டது.`; + } +} + +let myBook = new Book("The Great Gatsby", "F. Scott Fitzgerald"); +let myLibrary = new Library(); + +console.log(myLibrary.add(myBook)); // The Great Gatsby நூலகத்தில் சேர்க்கப்பட்டது. +``` + +மேலே உள்ள எடுத்துக்காட்டில், பெரிய `Library` வகுப்பை உருவாக்க `Book` வகுப்பின் நிகழ்வுகள் (instances) பயன்படுத்தப்படுகின்றன. இரண்டு வகுப்புகளுக்கு இடையே "has-a" உறவை உருவாக்க (நூலகம் புத்தகங்களைக் கொண்டுள்ளது) கலவை பயன்படுத்தப்படுகிறது, இது தளர்வான இணைப்பியலை உறுதி செய்கிறது. `Book` வகுப்பில் ஏற்படும் மாற்றங்கள் `Library` வகுப்பில் பிரதிபலிக்காது, மற்றும் நேர்மாறாகவும். + +## கலவை (vs) மரபுரிமை (Composition vs Inheritance) + +மரபுரிமை "is-a" உறவை உருவாக்கும் போது (எ.கா., `Car` ஒரு `Vehicle`), கலவை "has-a" உறவை உருவாக்குகிறது (எ.கா., ஒரு `Car` `Engine` ஐக் கொண்டுள்ளது). இரண்டையும் பயன்படுத்துவதற்கான சில நன்மைகள் மற்றும் தீமைகள் இங்கே: + +| **அம்சம் (Feature)** | **மரபுரிமை (Inheritance)** | **கலவை (Composition)** | +|----------------------|---------------------------------------------------------------------------------|-------------------------------------------------------------------------------| +| **நன்மைகள் (Pros)** | - வகுப்பு உறவுகளை மாதிரியாக்க (modeling class relationships) எளிய மற்றும் உள்ளுணர்வு
- அடிப்படை வகுப்புகள் (base classes) மூலம் குறியீடு மறுபயன்பாடு | - தளர்வான இணைப்பியல் (Loose coupling)
- அதிக நெகிழ்வுத்தன்மை
- எளிதான பராமரிப்பு | +| **தீமைகள் (Cons)** | - இறுக்கமான இணைப்பியல் (Tight coupling)
- குறைந்த நெகிழ்வுத்தன்மை
- ஆழமான மரபுரிமை படிநிலைகள் (Deep inheritance hierarchies) | - அமைக்கவும் புரிந்துகொள்ளவும் மிகவும் சிக்கலானது
- குறைவான வகுப்புகள் ஆனால் அதிக பொருள்கள் (objects) | diff --git a/ta/classes/inheritance.md b/ta/classes/inheritance.md new file mode 100644 index 00000000..3ee3d43f --- /dev/null +++ b/ta/classes/inheritance.md @@ -0,0 +1,42 @@ +--- +chapter: 15 +pageNumber: 96 +description: மரபுரிமை (Inheritance) என்பது மற்றொரு பொருளில் (superclass) இருந்து பண்புகள் மற்றும் முறைகளைப் பெறுவதற்கான ஒரு பொருளின் (subclass) திறனைக் குறிக்கிறது. ஜாவாஸ்கிரிப்ட் முன்மாதிரி மரபுரிமையை (prototypal inheritance) ஆதரிக்கிறது, அதாவது பொருள்கள் மற்ற பொருள்களிலிருந்து நேரடியாக பண்புகள் மற்றும் முறைகளைப் பெறலாம், இது prototypes எனப்படும். +--- +# மரபுரிமை (Inheritance) + +ஒரு வகுப்பின் தற்போதைய பண்புகள் (properties) மற்றும் முறைகளை (methods) நீட்டிப்பதால் (extends) குறியீடு மறுபயன்பாட்டு நோக்கங்களுக்காக மரபுரிமை பயனுள்ளதாக இருக்கும். ஒரு வகுப்பு மரபுரிமையை உருவாக்க `extends` முக்கிய சொல் பயன்படுத்தப்படுகிறது. + +```javascript +class Car { + constructor(brand) { + this.carname = brand; + } + present() { + return 'I have a ' + this.carname; + } +} + +class Model extends Car { + constructor(brand, mod) { + super(brand); + this.model = mod; + } + show() { + return this.present() + ', it is a ' + this.model; + } +} + +let myCar = new Model("Toyota", "Camry"); +console.log(myCar.show()); // I have a Camry, it is a Toyota. +``` + +{% hint style="info" %} +பெற்றோர் வகுப்பின் (parent class) முன்மாதிரி (prototype) ஒரு `Object` அல்லது `null` ஆக இருக்க வேண்டும். +{% endhint %} + +`super` முறை ஒரு கன்ஸ்ட்ரக்டருக்குள் (constructor) பயன்படுத்தப்படுகிறது மற்றும் இது பெற்றோர் வகுப்பைக் குறிக்கிறது. இதன் மூலம், ஒருவர் பெற்றோர் வகுப்பின் பண்புகள் மற்றும் முறைகளை அணுகலாம். மேலே உள்ள எடுத்துக்காட்டில் நாம் Model துணைப்பிரிவில் (subclass) `super(brand)` ஐப் பயன்படுத்துகிறோம், எனவே அது `Car` சூப்பர்கிளாஸ் பண்புகளைப் பெற முடியும். + +{% hint style="info" %} +சூப்பர்கிளாஸ்கள் (Super classes) பயன்படுத்தப்படும் முக்கிய வகுப்புகளாகும், அதே சமயம் துணைப்பிரிவுகள் (subclasses) என்பவை சூப்பர்கிளாஸ்களிலிருந்து நீட்டிக்கப்பட்ட வகுப்புகளாகும். +{% endhint %} diff --git a/ta/classes/static.md b/ta/classes/static.md new file mode 100644 index 00000000..1e4ec053 --- /dev/null +++ b/ta/classes/static.md @@ -0,0 +1,28 @@ +--- +chapter: 15 +pageNumber: 95 +description: static முக்கிய சொல் ஒரு வகுப்பிற்கான (class) நிலையான (static) முறைகள் அல்லது பண்புகளை (properties) வரையறுக்கிறது. ஒரு வகுப்பிற்குள் ஒரு முறை அல்லது பண்பு நிலையானதாக வரையறுக்கப்பட்டால், அது வகுப்பின் நிகழ்வுகளை (instances/objects) விட வகுப்பிற்கே சொந்தமானது. +--- +# நிலையானவை (Static) + +`static` முக்கிய சொல் ஒரு வகுப்பிற்கான நிலையான முறைகள் அல்லது பண்புகளை வரையறுக்கிறது. இந்த முறைகள் மற்றும் பண்புகள் வகுப்பிலேயே அழைக்கப்படுகின்றன. + +```javascript +class Car { + constructor(name) { + this.name = name; + } + static hello(x) { + return "Hello " + x.name; + } +} +let myCar = new Car("Toyota"); + +console.log(myCar.hello()); // இது பிழையை (error) எறியும் +console.log(Car.hello(myCar)); +// முடிவு: Hello Toyota +``` + +{% hint style="info" %} +`this` முக்கிய சொல்லைப் பயன்படுத்தி அதே வகுப்பின் மற்றொரு நிலையான முறையின் (static method) நிலையான முறை அல்லது பண்பை ஒருவர் அணுகலாம். +{% endhint %} diff --git a/ta/complexity/README.md b/ta/complexity/README.md new file mode 100644 index 00000000..d30b0167 --- /dev/null +++ b/ta/complexity/README.md @@ -0,0 +1,34 @@ +--- +layout: editorial +chapter: 27 +pageNumber: 258 +description: ஒரு அல்காரிதத்தின் (algorithm) செயல்திறனை (efficiency) பகுப்பாய்வு செய்வது ஒரு உகந்த நிரலை (optimal program) எழுதுவதற்கான மிக முக்கியமான பகுதியாகும். இந்த அத்தியாயம் இட (space) மற்றும் நேர (time) சிக்கலைப் (complexity) புரிந்துகொள்வதன் மூலம் செயல்திறனைப் பகுப்பாய்வு செய்வதில் ஆழமாகச் செல்கிறது. +--- + +# அத்தியாயம் 27 +# சிக்கலானது (Complexity) + +முந்தைய அத்தியாயத்திலிருந்து ஒரு அல்காரிதத்தை எவ்வாறு உருவாக்குவது என்பதை நீங்கள் புரிந்துகொண்டிருக்க வேண்டும். இந்த அத்தியாயத்தில், ஜாவாஸ்கிரிப்டில் அல்காரிதமிக் சிக்கலின் (algorithmic complexity) நுணுக்கங்களை (intricacies) ஆராய்வோம். + +ஒரு அல்காரிதத்தை வடிவமைக்கும்போது, சரியான வெளியீட்டை (output) அடைவது மட்டுமல்ல; அந்த முடிவை எவ்வளவு திறமையாக (efficiently) அடைகிறோம் என்பது பற்றியதுமாகும். பல அல்காரிதம்கள் ஒரு சிக்கலைத் தீர்க்க முடியும் என்பதால், மிகவும் திறமையான தீர்வைக் கண்டுபிடிப்பது கட்டாயமாகும். கணினி அறிவியலில் (computer science), ஒரு அல்காரிதத்தின் செயல்திறனை இரண்டு முதன்மை பரிமாணங்களில் பகுப்பாய்வு செய்யலாம்: **நேரம் (time)** மற்றும் **இடம் (space)**. + +ஒரு அல்காரிதத்தின் சிக்கலைப் பகுப்பாய்வு செய்வது ஒரு நடைமுறைத் தேவையே தவிர ஒரு தத்துவார்த்தக் கருத்து (theoretical concept) மட்டுமல்ல. உகந்த அல்காரிதத்தின் சில நன்மைகள் வேகமான செயல்திறன் (faster performance), வளப் பாதுகாப்பு (resource conservation) மற்றும் மேம்பட்ட பயனர் அனுபவம் (improved user experience) ஆகியவை ஆகும். + +ஒரு உதாரணத்தை எடுத்துக்கொள்வோம்: +```javascript +function printElement(arr){ + for (let i=0; i + +### **Big O குறியீடு (Big O Notation)** +Big Oh (Big O) என்பது ஒரு அல்காரிதத்தின் நேர சிக்கலைக் குறிக்கப் பயன்படுத்தப்படும் ஒரு கணிதக் குறியீடாகும். +```javascript +let total = 0; +const n = 100; + +// n முறை செயல்படுத்துகிறது (iterate) +for (let i = 1; i <= n; i++) { + total += i; +} + +console.log(total); +// வெளியீடு (Output): 5050 + +``` +குறியீடு (code) இயங்குவதற்கு n படிகள் எடுக்கும். நேர சிக்கலுக்கு வெறும் n ஐப் பயன்படுத்துவதற்குப் பதிலாக, அதைக் குறிக்க O(n) குறிப்பைப் பயன்படுத்துகிறோம்—இது n இன் Big Oh என வாசிக்கப்படுகிறது. + +### **Big O இன் வகைகள் (Types of Big O)** + +Big O குறியீடுகளின் சில பொதுவான வகைகள் பின்வருமாறு: + +- O(log n) - மடக்கை நேர சிக்கலானது (logarithmic time complexity) +- O(n^2) - இருபடி நேர சிக்கலானது (quadratic time complexity) +- O(n) - நேரியல் நேர சிக்கலானது (linear time complexity) +- O(1) - நிலையான நேர சிக்கலானது (constant time complexity) diff --git a/ta/conditional/README.md b/ta/conditional/README.md new file mode 100644 index 00000000..3f02aeb6 --- /dev/null +++ b/ta/conditional/README.md @@ -0,0 +1,23 @@ +--- +layout: editorial +chapter: 5 +pageNumber: 39 +description: வெவ்வேறு சூழ்நிலைகளுக்கு ஏற்ப மாறக்கூடிய மற்றும் உள்ளீடு (input), பயனர் தொடர்புகள் (user interactions) அல்லது தரவுகளின் அடிப்படையில் முடிவுகளை எடுக்கக்கூடிய டைனமிக் மற்றும் பதிலளிக்கக்கூடிய குறியீட்டை எழுதுவதற்கு நிபந்தனைகள் (Conditions) அவசியமானவை. +--- + +# அத்தியாயம் 5 +# நிபந்தனை தர்க்கம் (Conditional Logic) + +ஒரு நிபந்தனை (condition) என்பது ஏதோ ஒன்றிற்கான சோதனையாகும். நிரலாக்கத்திற்கு நிபந்தனைகள் பல வழிகளில் மிகவும் முக்கியமானவை: + +முதலாவதாக, உங்கள் நிரல் செயலாக்கத்திற்காக நீங்கள் எந்தத் தரவை வழங்கினாலும் அதைப் பொருட்படுத்தாமல் செயல்படுவதை உறுதிசெய்ய நிபந்தனைகளைப் பயன்படுத்தலாம். நீங்கள் கண்மூடித்தனமாகத் தரவை நம்பினால், நீங்கள் சிக்கலில் சிக்குவீர்கள் மற்றும் உங்கள் நிரல்கள் தோல்வியடையும். நீங்கள் செய்ய விரும்புவது சாத்தியமா என்பதையும், தேவையான அனைத்து தகவல்களும் சரியான வடிவத்தில் உள்ளதா என்பதையும் நீங்கள் சோதித்தால், அது நடக்காது, மேலும் உங்கள் நிரல் மிகவும் நிலையானதாக (stable) இருக்கும். இத்தகைய முன்னெச்சரிக்கை நடவடிக்கைகளை எடுப்பது தற்காப்புடன் நிரலாக்கம் (programming defensively) என்றும் அழைக்கப்படுகிறது. + +நிபந்தனைகள் உங்களுக்காகச் செய்யக்கூடிய மற்றொரு விஷயம், கிளைகளை (branching) அனுமதிப்பதாகும். ஒரு படிவத்தை நிரப்பும்போது போன்ற கிளை வரைபடங்களை (branching diagrams) நீங்கள் முன்பு சந்தித்திருக்கலாம். அடிப்படையில், நிபந்தனை பூர்த்தி செய்யப்பட்டதா இல்லையா என்பதைப் பொறுத்து, குறியீட்டின் வெவ்வேறு "கிளைகளை" (பகுதிகள்) செயல்படுத்துவதைக் குறிக்கிறது. + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகள் உட்பட ஜாவாஸ்கிரிப்டில் நிபந்தனை தர்க்கத்தின் (conditional logic) அடிப்படைகளை அறிவோம்: + +* [If](./if.md) +* [Else](./else.md) +* [Switch](./switch.md) +* [ஒப்பீட்டாளர்கள் (Comparators)](./comparators.md) +* [இணைத்தல் (Concatenate)](./concatenate.md) diff --git a/ta/conditional/comparators.md b/ta/conditional/comparators.md new file mode 100644 index 00000000..697482dc --- /dev/null +++ b/ta/conditional/comparators.md @@ -0,0 +1,39 @@ +--- +chapter: 5 +pageNumber: 45 +description: ஒப்பீட்டாளர்கள் (Comparators) என்பவை இரண்டு மதிப்புகளை ஒப்பிட்டு அவற்றின் உறவைத் தீர்மானிக்கப் பயன்படும் செயல்பாடுகள் (functions) ஆகும். இங்கே, திருப்பியளிக்கப்பட்ட மதிப்பானது, ஒரு குறிப்பிட்ட ஒப்பீட்டு அளவுகோலின் அடிப்படையில் மதிப்புகள் சமமாக, அதிகமாக, குறைவாக அல்லது வேறு ஏதேனும் உறவில் உள்ளதா என்பதைக் குறிக்கிறது. +--- +# ஒப்பீட்டாளர்கள் (Comparators) + +இப்போது நிபந்தனைப் பகுதியில் கவனம் செலுத்துவோம்: + +```javascript +if (country === "France") { + ... +} +``` + +நிபந்தனைப் பகுதி என்பது `country` என்ற மாறியைத் (variable) தொடர்ந்து மூன்று சமமான குறியீடுகளைக் (`===`) கொண்டது. `country` என்ற மாறிக்கு சரியான மதிப்பும் (`France`) சரியான வகையும் (`String`) உள்ளதா என்பதை மூன்று சமமான குறியீடுகள் சோதிக்கின்றன. நீங்கள் இரண்டு சமமான குறியீடுகளுடனும் நிபந்தனைகளைச் சோதிக்கலாம், இருப்பினும் `if (x == 5)` போன்ற நிபந்தனை `var x = 5;` மற்றும் `var x = "5";` ஆகிய இரண்டிற்கும் true ஐத் திரும்பப் பெறும். உங்கள் நிரல் என்ன செய்கிறது என்பதைப் பொறுத்து, இது ஒரு பெரிய வித்தியாசத்தை ஏற்படுத்தும். இரண்டிற்குப் (`==` மற்றும் `!=`) பதிலாக எப்போதும் மூன்று சமமான குறியீடுகளுடன் (`===` மற்றும் `!==`) சமத்துவத்தை (equality) ஒப்பிட வேண்டும் என்று சிறந்த நடைமுறையாக (best practice) மிகவும் பரிந்துரைக்கப்படுகிறது. + +பிற நிபந்தனை சோதனைகள்: + +* `x > a`: x ஆனது a ஐ விட பெரியதா? +* `x < a`: x ஆனது a ஐ விட சிறியதா? +* `x <= a`: x ஆனது a ஐ விட சிறியதா அல்லது சமமானதா? +* `x >=a`: x ஆனது a ஐ விட பெரியதா அல்லது சமமானதா? +* `x != a`: x ஆனது a இல்லையா? +* `x`: x உள்ளதா? + +## தர்க்கரீதியான ஒப்பீடு (Logical Comparison) + +if-else தொந்தரவைத் தவிர்க்க, எளிய தர்க்கரீதியான ஒப்பீடுகளைப் (logical comparisons) பயன்படுத்தலாம். + +```javascript +let topper = marks > 85 ? "YES" : "NO"; +``` + +மேலே உள்ள எடுத்துக்காட்டில், `?` ஒரு தருக்க ஆபரேட்டர் (logical operator) ஆகும். மதிப்பெண்களின் (marks) மதிப்பு 85 ஐ விட அதிகமாக இருந்தால், அதாவது `marks > 85` என்றால், `topper = YES`; இல்லையெனில் `topper = NO` என்று குறியீடு கூறுகிறது. அடிப்படையில், ஒப்பீட்டு நிபந்தனை (comparison condition) உண்மையென (true) நிரூபிக்கப்பட்டால், முதல் வாதம் அணுகப்படும் மற்றும் ஒப்பீட்டு நிபந்தனை தவறானதாக (false) இருந்தால், இரண்டாவது வாதம் அணுகப்படும். இந்த சுருக்கெழுத்து ஆபரேட்டர் (shorthand operator) மூன்று செயலியக்கிகளை (operands) எடுத்துக்கொள்வதால் இது `மும்மை ஆபரேட்டர் (ternary operator)` என்றும் அழைக்கப்படுகிறது. + +```javascript +condition ? expression1 : expression2 +``` \ No newline at end of file diff --git a/ta/conditional/concatenate.md b/ta/conditional/concatenate.md new file mode 100644 index 00000000..022af11a --- /dev/null +++ b/ta/conditional/concatenate.md @@ -0,0 +1,28 @@ +--- +chapter: 5 +pageNumber: 46 +description: நிபந்தனைகளை இணைத்தல் (Concatenating condition) என்பது தர்க்கரீதியான ஆபரேட்டர்களைப் (logical operators) பயன்படுத்தி பல நிபந்தனைகளை ஒன்றிணைத்து மிகவும் சிக்கலான மற்றும் அதிநவீன நிபந்தனைகளை (conditionals) உருவாக்குவதைக் குறிக்கிறது. +--- +# இணைத்தல் (Concatenate) + +மேலும், எந்தவொரு அறிக்கையும் (statement) உண்மையா அல்லது இரண்டும் உண்மையா என்பதைச் சோதிக்க, "அல்லது (`or`)" அல்லது "மற்றும் (`and`)" அறிக்கைகளுடன் வெவ்வேறு நிபந்தனைகளை நீங்கள் இணைக்கலாம். + +ஜாவாஸ்கிரிப்டில் “or” என்பது `||` எனவும் “and” என்பது `&&` எனவும் எழுதப்படுகிறது. + +x இன் மதிப்பு 10 க்கும் 20 க்கும் இடையில் உள்ளதா என்று சோதிக்க விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம். பின்வரும் நிபந்தனையுடன் நீங்கள் அதைச் செய்யலாம்: + +```javascript +if (x > 10 && x < 20) { + ... +} +``` + +country என்பது "England" அல்லது "Germany" ஆக இருப்பதை நீங்கள் உறுதிசெய்ய விரும்பினால், நீங்கள் பயன்படுத்துவது: + +```javascript +if (country === "England" || country === "Germany") { + ... +} +``` + +> **குறிப்பு**: எண்கள் மீதான செயல்பாடுகளைப் போலவே, அடைப்புக்குறிகளைப் பயன்படுத்தி (parenthesis) நிபந்தனைகளையும் தொகுக்கலாம் (grouped), எ.கா: `if ( (name === "John" || name === "Jennifer") && country === "France")`. diff --git a/ta/conditional/else.md b/ta/conditional/else.md new file mode 100644 index 00000000..a91bd5a3 --- /dev/null +++ b/ta/conditional/else.md @@ -0,0 +1,62 @@ +--- +chapter: 5 +pageNumber: 42 +description: else முக்கிய சொல் (keyword) if அறிக்கையுடன் இணைந்து பயன்படுத்தப்பட்டு, if அறிக்கையில் குறிப்பிடப்பட்ட நிபந்தனை false என மதிப்பிடப்படும்போது (evaluates) செயல்படுத்த ஒரு மாற்று குறியீட்டுத் தொகுதியை (code block) வழங்குகிறது. +--- +# Else + +முதல் நிபந்தனை `true` ஆக இல்லாதபோது பயன்படுத்தப்படும் `else` பிரிவு (clause) ஒன்றும் உள்ளது. நீங்கள் எந்த மதிப்பிற்கும் பதிலளிக்க விரும்பினால் இது மிகவும் சக்திவாய்ந்தது, ஆனால் சிறப்புக் கவனிப்பிற்காக ஒன்றைக் குறிப்பாகத் தேர்ந்தெடுக்கலாம். + +```javascript +let umbrellaMandatory; + +if (country === "England") { + umbrellaMandatory = true; +} else { + umbrellaMandatory = false; +} +``` + +`else` பிரிவை மற்றொரு `if` உடன் இணைக்கலாம். முந்தைய கட்டுரையிலிருந்து உதாரணத்தை மீண்டும் உருவாக்குவோம். + +```javascript +if (country === "England") { + ... +} else if (country === "France") { + ... +} else if (country === "Germany") { + ... +} +``` + +{% exercise %} +பின்வரும் மதிப்புகளிலிருந்து `num1` ஆனது `num2` ஐ விட பெரியதா என்று சோதிக்கும் ஒரு நிபந்தனை அறிக்கையை (conditional statement) எழுதவும். அது பெரியதாக இருந்தால், `result` மாறிக்கு (variable) "num1 is greater than num2" என்பதை ஒதுக்கவும். அது இல்லையென்றால், "num1 is less than or equal to num2" என்பதை ஒதுக்கவும். + +{% initial %} +let num1 = 10; +let num2 = 5; +let result; + +// num1 ஆனது num2 ஐ விட பெரியதா என சரிபார்க்கவும் +if( condition ) { + +}else { + +} +{% solution %} +let num1 = 10; +let num2 = 5; +let result; + +// num1 ஆனது num2 ஐ விட பெரியதா என சரிபார்க்கவும் +if (num1 > num2) { + result = "num1 is greater than num2"; +} else { + result = "num1 is less than or equal to num2"; +} + +{% validation %} +assert(result == "num1 is greater than num2" ); + +{% context %} +{% endexercise %} diff --git a/ta/conditional/if.md b/ta/conditional/if.md new file mode 100644 index 00000000..c898d64b --- /dev/null +++ b/ta/conditional/if.md @@ -0,0 +1,134 @@ +--- +chapter: 5 +pageNumber: 40 +description: if நிபந்தனை நிபந்தனையை மதிப்பிடுகிறது, மேலும் நிபந்தனை உண்மையாக (true) இருந்தால், if அறிக்கையைத் தொடர்ந்து வரும் குறியீட்டுத் தொகுதி (code block) செயல்படுத்தப்படும்; இல்லையெனில், அது தவிர்க்கப்படும். +--- + +# If + +எளிதான நிபந்தனை (condition) if அறிக்கையாகும் மற்றும் அதன் தொடரியல் (syntax) `if(condition){ இதைச் செய் … }` என்பதாகும். சுருள் அடைப்புக்குறிக்குள் (curly braces) உள்ள குறியீட்டைச் செயல்படுத்த நிபந்தனை உண்மையாக (true) இருக்க வேண்டும். நீங்கள் எடுத்துக்காட்டாக ஒரு சரத்தை (string) சோதிக்கலாம் மற்றும் கீழே விவரிக்கப்பட்டுள்ளபடி அதன் மதிப்பைப் பொறுத்து மற்றொரு சரத்தின் மதிப்பை அமைக்கலாம். + +```javascript +let country = "France"; +let weather; +let food; +let currency; + +if (country === "England") { + weather = "horrible"; + food = "filling"; + currency = "pound sterling"; +} + +if (country === "France") { + weather = "nice"; + food = "stunning, but hardly ever vegetarian"; + currency = "funny, small and colourful"; +} + +if (country === "Germany") { + weather = "average"; + food = "worst thing ever"; + currency = "funny, small and colourful"; +} + +let message = + "இது " + + country + + ", வானிலை " + + weather + + ", உணவு " + + food + + " மற்றும் " + + "நாணயம் " + + currency; + +console.log(message); +// 'இது France, வானிலை nice, உணவு stunning, but hardly ever vegetarian மற்றும் நாணயம் funny, small and colourful' +``` + +## Nested If-Else (உள்ளமைக்கப்பட்ட If-Else) + +ஜாவாஸ்கிரிப்டில், மிகவும் சிக்கலான நிபந்தனை தர்க்கத்தை (conditional logic) உருவாக்க, உள்ளமைக்கப்பட்ட (nested) `if-else` அறிக்கைகளைப் பயன்படுத்தலாம். + +### அடிப்படை தொடரியல் (Basic Syntax) + +```javascript +if (condition1) { + // condition1 உண்மையாக இருக்கும்போது செயல்படுத்த வேண்டிய குறியீடு +} else { + if (condition2) { + // condition1 தவறு மற்றும் condition2 உண்மையாக இருக்கும்போது செயல்படுத்த வேண்டிய குறியீடு + } else { + // condition1 மற்றும் condition2 இரண்டும் தவறாக இருக்கும்போது செயல்படுத்த வேண்டிய குறியீடு + } +} +``` + +பின்வரும் நிரல் ஒரு நபரின் வயதின் அடிப்படையில் அவரின் மாணவர் நிலையை (student status) தீர்மானிக்கிறது மற்றும் அதற்கேற்ப ஒரு செய்தியை அச்சிடுகிறது. + +```JavaScript +let age = 20; +let isStudent = true; + +if (age >= 18) { + if (isStudent) { + console.log("நீங்கள் வயது வந்த மாணவர் (adult student)."); + } else { + console.log("நீங்கள் வயது வந்தவர், ஆனால் மாணவர் அல்ல."); + } +} else { + console.log("நீங்கள் வயது வந்தவர் அல்ல."); +} + +// வெளியீடு (Output): நீங்கள் வயது வந்த மாணவர் (adult student). +``` + +வானிலை ஆலோசனைகளை (weather advice) வழங்க இந்த நிரல் மழை, வெப்பநிலை (temperature) மற்றும் பனி (snow) ஆகியவற்றைச் சரிபார்க்கிறது. + +```JavaScript +let temperature = 25; +let isRaining = true; +let isSnowing = false; + +if (isRaining) { + console.log("மழை பெய்கிறது. உங்கள் குடையை மறக்க வேண்டாம்."); + + if (temperature < 10) { + console.log("மற்றும் குளிராக இருக்கிறது. உங்களுக்கு ஒரு கோட் (coat) கூட தேவைப்படலாம்."); + } +} else if (isSnowing) { + console.log("பனி பெய்கிறது. வழுக்கும் சாலைகளுக்கு தயாராக இருங்கள்."); +} else { + console.log("மழையோ பனியோ இல்லை. வானிலையை அனுபவிக்கவும்!"); +} + +// வெளியீடு: மழை பெய்கிறது. உங்கள் குடையை மறக்க வேண்டாம். +``` + +இந்த நிரல் ஓட்டுநர் உரிமத்திற்கான (driver's license) தகுதியைத் தீர்மானிக்க ஒரு நபரின் வயது, முன் ஓட்டுநர் அனுபவம் மற்றும் எழுத்துத் தேர்வு (written test) நிலை ஆகியவற்றைச் சரிபார்க்கிறது. + +```JavaScript +let age = 19; +let hasPriorExperience = true; +let hasPassedWrittenTest = true; + +if (age >= 18) { + if (hasPriorExperience) { + console.log("வாழ்த்துகள்! நீங்கள் ஓட்டுநர் உரிமத்திற்குத் தகுதியானவர்."); + } else { + console.log("மன்னிக்கவும், ஓட்டுநர் உரிமம் பெற முன் ஓட்டுநர் அனுபவம் தேவை."); + } +} else { + console.log("மன்னிக்கவும், ஓட்டுநர் உரிமத்திற்கு விண்ணப்பிக்க உங்களுக்கு 18 வயது அல்லது அதற்கு மேல் இருக்க வேண்டும்."); + + if (hasPassedWrittenTest) { + console.log("நீங்கள் எழுத்துத் தேர்வில் தேர்ச்சி பெற்றுள்ளீர்கள், ஆனால் விண்ணப்பிக்க உங்களுக்கு 18 வயது ஆகும் வரை காத்திருக்க வேண்டும்."); + } else { + console.log("நீங்கள் முதலில் எழுத்துத் தேர்வில் தேர்ச்சி பெற வேண்டும் மற்றும் விண்ணப்பிக்க உங்களுக்கு 18 வயது ஆகும் வரை காத்திருக்க வேண்டும்."); + } +} + +// வெளியீடு: வாழ்த்துகள்! நீங்கள் ஓட்டுநர் உரிமத்திற்குத் தகுதியானவர். + +``` diff --git a/ta/conditional/switch.md b/ta/conditional/switch.md new file mode 100644 index 00000000..f62b7bda --- /dev/null +++ b/ta/conditional/switch.md @@ -0,0 +1,95 @@ +--- +chapter: 5 +pageNumber: 43 +description: Switch என்பது வெவ்வேறு நிபந்தனைகளின் அடிப்படையில் செயல்களைச் செய்யும் நிபந்தனை அறிக்கை (conditional statement). இது நிபந்தனைகளைப் பொருத்த (match) கண்டிப்பான (strict) ஒப்பீட்டைப் பயன்படுத்துகிறது மற்றும் பொருந்திய நிபந்தனையின் குறியீட்டுத் தொகுதிகளை (code blocks) செயல்படுத்துகிறது. +--- +# Switch + +`switch` என்பது வெவ்வேறு நிபந்தனைகளின் அடிப்படையில் செயல்களைச் செய்யும் ஒரு நிபந்தனை அறிக்கையாகும். நிபந்தனைகளைப் பொருத்த இது கண்டிப்பான ( `===` ) ஒப்பீட்டைப் பயன்படுத்துகிறது மற்றும் பொருந்திய நிபந்தனையின் குறியீட்டுத் தொகுதிகளைச் செயல்படுத்துகிறது. `switch` வெளிப்பாட்டின் (expression) தொடரியல் கீழே காட்டப்பட்டுள்ளது. + +```javascript +switch(expression) { + case x: + // குறியீட்டுத் தொகுதி (code block) + break; + case y: + // குறியீட்டுத் தொகுதி + break; + default: + // குறியீட்டுத் தொகுதி +} +``` + +வெளிப்பாடு (expression) ஒரு முறை மதிப்பிடப்பட்டு (evaluated) ஒவ்வொரு case உடனும் ஒப்பிடப்படுகிறது. பொருத்தம் (match) கண்டறியப்பட்டால், தொடர்புடைய குறியீட்டுத் தொகுதி செயல்படுத்தப்படும், இல்லையெனில் `default` குறியீட்டுத் தொகுதி செயல்படுத்தப்படும். `break` முக்கிய சொல் (keyword) செயல்படுத்துவதை நிறுத்துகிறது மற்றும் எங்கும் வைக்கப்படலாம். அது இல்லாத நிலையில், நிபந்தனைகள் பொருந்தவில்லை என்றாலும் கூட, அடுத்த நிபந்தனை மதிப்பிடப்படும். + +switch நிபந்தனையின் அடிப்படையில் வார நாளின் (weekday) பெயரைப் பெறுவதற்கான எடுத்துக்காட்டு கீழே காட்டப்பட்டுள்ளது. + +```javascript +switch (new Date().getDay()) { + case 0: + day = "Sunday"; + break; + case 1: + day = "Monday"; + break; + case 2: + day = "Tuesday"; + break; + case 3: + day = "Wednesday"; + break; + case 4: + day = "Thursday"; + break; + case 5: + day = "Friday"; + break; + case 6: + day = "Saturday"; +} +``` + +பல பொருந்தும் நிகழ்வுகளில் (matching cases), **முதல்** பொருந்தும் மதிப்பு தேர்ந்தெடுக்கப்படுகிறது, இல்லையெனில் default மதிப்பு தேர்ந்தெடுக்கப்படும். default மற்றும் பொருந்தும் case இல்லாத நிலையில், நிரல் switch நிபந்தனைகளுக்குப் பிறகு அடுத்த அறிக்கை(களுக்கு) தொடர்கிறது. + +{% exercise %} +பின்வரும் மதிப்புகளிலிருந்து dayOfWeek இன் மதிப்பைச் சரிபார்க்கும் ஒரு `switch` அறிக்கையை எழுதவும். dayOfWeek "Monday", "Tuesday", "Wednesday", "Thursday" அல்லது "Friday" ஆக இருந்தால், result மாறிக்கு "It's a weekday" என்பதை ஒதுக்கவும். `dayOfWeek` "Saturday" அல்லது "Sunday" ஆக இருந்தால், result க்கு "It's the weekend" என்பதை ஒதுக்கவும். + +{% initial %} +let dayOfWeek = "Monday"; +let result; +// இது வேலை நாளா (weekday) அல்லது வார இறுதியா (weekend) என்பதைச் சரிபார்க்கவும் +switch(expression) { + case x: + // குறியீட்டுத் தொகுதி + break; + case y: + // குறியீட்டுத் தொகுதி + break; + default: + // குறியீட்டுத் தொகுதி +} +{% solution %} +let dayOfWeek = "Monday"; +let result; +// இது வேலை நாளா அல்லது வார இறுதியா என்பதைச் சரிபார்க்கவும் +switch (dayOfWeek) { + case "Monday": + case "Tuesday": + case "Wednesday": + case "Thursday": + case "Friday": + result = "It's a weekday"; + break; + case "Saturday": + case "Sunday": + result = "It's the weekend"; + break; + default: + result = "Invalid day of the week"; + break; +} +{% validation %} +assert(result == "It's a weekday" ); + +{% context %} +{% endexercise %} diff --git a/ta/date-and-time.md b/ta/date-and-time.md new file mode 100644 index 00000000..a69bbeca --- /dev/null +++ b/ta/date-and-time.md @@ -0,0 +1,82 @@ +--- +layout: editorial +chapter: 10 +pageNumber: 79 +description: date பொருள் தேதி மற்றும் நேரத்தைச் சேமிக்கிறது மற்றும் அதை நிர்வகிப்பதற்கான முறைகளை வழங்குகிறது. Date பொருள்கள் நிலையானவை (static) மற்றும் தேதியை முழு உரைச் சரமாகக் (full-text string) காட்ட உலாவியின் இயல்புநிலை நேர மண்டலத்தைப் (timezone) பயன்படுத்துகின்றன. +--- + +# அத்தியாயம் 10 +# தேதி மற்றும் நேரம் (Date and Time) + +`date` பொருள் தேதி மற்றும் நேரத்தைச் சேமிக்கிறது மற்றும் அதை நிர்வகிப்பதற்கான முறைகளை வழங்குகிறது. `Date` பொருள்கள் நிலையானவை மற்றும் தேதியை முழு உரைச் சரமாகக் காட்ட உலாவியின் இயல்புநிலை நேர மண்டலத்தைப் பயன்படுத்துகின்றன. + +`date` ஐ உருவாக்க நாம் ஒரு `new Date()` கன்ஸ்ட்ரக்டரைப் பயன்படுத்துகிறோம், மேலும் இதை பின்வரும் வழிகளில் உருவாக்கலாம். + +```javascript +new Date() +new Date(date string) +new Date(year,month) +new Date(year,month,day) +new Date(year,month,day,hours) +new Date(year,month,day,hours,minutes) +new Date(year,month,day,hours,minutes,seconds) +new Date(year,month,day,hours,minutes,seconds,ms) +new Date(milliseconds) +``` + +{% hint style="working" %} +மாதங்களை `0` முதல் `11` வரை குறிப்பிடலாம், அதற்கு மேல் குறிப்பிட்டால் அடுத்த ஆண்டுக்கு (overflow) சென்றுவிடும். +{% endhint %} + +தேதியால் ஆதரிக்கப்படும் முறைகள் மற்றும் பண்புகள் (properties) கீழே விவரிக்கப்பட்டுள்ளன: + +| பெயர் (Name) | விளக்கம் (Description) | +| ---------------------- | ----------------------------------------------------------------------------------------------- | +| `constructor` | Date பொருளின் முன்மாதிரியை (prototype) உருவாக்கிய செயல்பாட்டைத் (function) திரும்பப் பெறுகிறது | +| `getDate()` | ஒரு மாதத்தின் நாளை (1-31) திரும்பப் பெறுகிறது | +| `getDay()` | ஒரு வாரத்தின் நாளை (0-6) திரும்பப் பெறுகிறது | +| `getFullYear()` | ஆண்டை (4 இலக்கங்கள்) திரும்பப் பெறுகிறது | +| `getHours()` | மணிநேரத்தை (0-23) திரும்பப் பெறுகிறது | +| `getMilliseconds()` | மில்லி விநாடிகளை (0-999) திரும்பப் பெறுகிறது | +| `getMinutes()` | நிமிடங்களை (0-59) திரும்பப் பெறுகிறது | +| `getMonth()` | மாதத்தை (0-11) திரும்பப் பெறுகிறது | +| `getSeconds()` | விநாடிகளை (0-59) திரும்பப் பெறுகிறது | +| `getTime()` | ஜனவரி 1 1970 நள்ளிரவில் இருந்து குறிப்பிடப்பட்ட தேதியின் எண் மதிப்பை மில்லி விநாடிகளில் திரும்பப் பெறுகிறது | +| `getTimezoneOffset()` | நேர மண்டலத்தின் (timezone) ஆஃப்செட்டை நிமிடங்களில் திரும்பப் பெறுகிறது | +| `getUTCDate()` | உலகளாவிய நேரத்தின்படி (universal time) ஒரு மாதத்தின் நாளை (1-31) திரும்பப் பெறுகிறது | +| `getUTCDay()` | உலகளாவிய நேரத்தின்படி நாளை (0-6) திரும்பப் பெறுகிறது | +| `getUTCFullYear()` | உலகளாவிய நேரத்தின்படி ஆண்டை (4-இலக்கங்கள்) திரும்பப் பெறுகிறது | +| `getUTCHours()` | உலகளாவிய நேரத்தின்படி மணிநேரங்களை (0-23) திரும்பப் பெறுகிறது | +| `getUTCMilliseconds()` | உலகளாவிய நேரத்தின்படி மில்லி விநாடிகளை (0-999) திரும்பப் பெறுகிறது | +| `getUTCMinutes()` | உலகளாவிய நேரத்தின்படி நிமிடங்களை (0-59) திரும்பப் பெறுகிறது | +| `getUTCMonth()` | உலகளாவிய நேரத்தின்படி மாதத்தை (0-11) திரும்பப் பெறுகிறது | +| `getUTCSeconds()` | உலகளாவிய நேரத்தின்படி விநாடிகளை (0-59) திரும்பப் பெறுகிறது | +| `now()` | ஜனவரி 1, 1970 நள்ளிரவில் இருந்து எண் மதிப்பை மில்லி விநாடிகளில் திரும்பப் பெறுகிறது | +| `parse()` | தேதிச் சரத்தைப் பாகுபடுத்தி (parses), ஜனவரி 1, 1970 நள்ளிரவில் இருந்து எண் மதிப்பை மில்லி விநாடிகளில் திரும்பப் பெறுகிறது | +| `prototype` | பண்புகளைச் சேர்க்க அனுமதிக்கிறது | +| `setDate()` | ஒரு மாதத்தின் நாளை அமைக்கிறது | +| `setFullYear()` | ஆண்டை அமைக்கிறது | +| `setHours()` | மணிநேரத்தை அமைக்கிறது | +| `setMilliseconds()` | மில்லி விநாடிகளை அமைக்கிறது | +| `setMinutes()` | நிமிடங்களை அமைக்கிறது | +| `setMonth()` | மாதத்தை அமைக்கிறது | +| `setSeconds()` | விநாடியை அமைக்கிறது | +| `setTime()` | நேரத்தை அமைக்கிறது | +| `setUTCDate()` | உலகளாவிய நேரத்தின்படி மாதத்தின் நாளை அமைக்கிறது | +| `setUTCFullYear()` | உலகளாவிய நேரத்தின்படி ஆண்டை அமைக்கிறது | +| `setUTCHours()` | உலகளாவிய நேரத்தின்படி மணிநேரத்தை அமைக்கிறது | +| `setUTCMilliseconds()` | உலகளாவிய நேரத்தின்படி மில்லி விநாடிகளை அமைக்கிறது | +| `setUTCMinutes()` | உலகளாவிய நேரத்தின்படி நிமிடங்களை அமைக்கிறது | +| `setUTCMonth()` | உலகளாவிய நேரத்தின்படி மாதத்தை அமைக்கிறது | +| `setUTCSeconds()` | உலகளாவிய நேரத்தின்படி விநாடியை அமைக்கிறது | +| `toDateString()` | மனிதர்கள் படிக்கக்கூடிய வடிவத்தில் (human readable format) தேதியைத் திரும்பப் பெறுகிறது | +| `toISOString()` | ISO வடிவத்தின்படி தேதியைத் திரும்பப் பெறுகிறது | +| `toJSON()` | JSON தேதியாக வடிவமைக்கப்பட்ட சரமாக (string) தேதியைத் திரும்பப் பெறுகிறது | +| `toLocaleDateString()` | வட்டார மரபுகளைப் (locale conventions) பயன்படுத்தி ஒரு சரத்தில் தேதியைத் திரும்பப் பெறுகிறது | +| `toLocaleTimeString()` | வட்டார மரபுகளைப் பயன்படுத்தி ஒரு சரத்தில் நேரத்தைத் திரும்பப் பெறுகிறது | +| `toLocaleString()` | வட்டார மரபுகளைப் பயன்படுத்தி தேதியைத் திரும்பப் பெறுகிறது | +| `toString()` | குறிப்பிட்ட தேதியின் சரம் பிரதிநிதித்துவத்தை (string representation) திரும்பப் பெறுகிறது | +| `toTimeString()` | மனிதர்கள் படிக்கக்கூடிய வடிவத்தில் _நேரப் (time)_ பகுதியைத் திரும்பப் பெறுகிறது | +| `toUTCString()` | உலகளாவிய வடிவத்தின்படி தேதியை ஒரு சரமாக மாற்றுகிறது | +| `toTemporalInstant()` | Temporal.Instant ஆக மாற்றப்பட்ட Date பொருளைத் திரும்பப் பெறுகிறது, இது ஒரு நிலையான நேரத்தைக் (நானோ விநாடிகள் வரை, UTC இல்) குறிக்கிறது. | +| `valueOf()` | `Date` இன் பழமையான (primitive) மதிப்பைத் திரும்பப் பெறுகிறது | diff --git a/ta/design-patterns/README.md b/ta/design-patterns/README.md new file mode 100644 index 00000000..69d72ab2 --- /dev/null +++ b/ta/design-patterns/README.md @@ -0,0 +1,17 @@ +--- +layout: editorial +chapter: 23 + +pageNumber: 195 +description: வடிவமைப்பு முறைகள் (Design Patterns) +--- +# அத்தியாயம் 23 +# வடிவமைப்பு முறைகள் (Design Patterns) + +வடிவமைப்பு முறைகள் (Design patterns) என்பவை மேம்பாட்டு செயல்பாட்டின் (development process) போது ஏற்படக்கூடிய பொதுவான நிரலாக்கச் சிக்கல்களைத் தீர்க்க நீங்கள் செயல்படுத்தக்கூடிய பொருள் சார்ந்த (object oriented) தீர்வுகளாகும். வடிவமைப்பு முறைகள் அல்காரிதம்களைப் (algorithms) போன்றது அல்ல, அவை ஒரு குறிப்பிட்ட வகையான சிக்கல்களைத் தீர்க்க நீங்கள் பயன்படுத்தக்கூடிய குறியீட்டுக் கருத்தாகும் (coding concept). + +எந்த ஒரு மொழிக்கும் தனித்துவமில்லாத பல்வேறு வடிவமைப்பு முறைகள் உள்ளன. இந்த அடிப்படைக் கருத்துக்களைப் பல்வேறு வகையான நிரலாக்க மொழிகளில் பயன்படுத்தலாம். இன்று, ஒவ்வொரு வடிவமைப்பு முறை மற்றும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அவற்றை எவ்வாறு செயல்படுத்துவது என்பது பற்றி அறிந்து கொள்வோம். வடிவமைப்பு முறைகளை மூன்று வகைகளில் ஒன்றாகப் பிரிக்கலாம். + +* [உருவாக்க முறைகள் (Creational Patterns)](./creational-patterns.md) +* [கட்டமைப்பு முறைகள் (Structural Patterns)](./structural-patterns.md) +* [நடத்தை முறைகள் (Behavioral Patterns)](./behavioral-patterns.md) diff --git a/ta/design-patterns/behavioral-patterns.md b/ta/design-patterns/behavioral-patterns.md new file mode 100644 index 00000000..cd6f3b1e --- /dev/null +++ b/ta/design-patterns/behavioral-patterns.md @@ -0,0 +1,1096 @@ +--- +layout: editorial +title: ஜாவாஸ்கிரிப்டில் நடத்தை வடிவமைப்பு முறைகள் (Behavioral Design Patterns in Javascript) +description: பொருள்கள் (objects) ஒன்றுக்கொன்று எவ்வாறு தொடர்புகொள்கின்றன மற்றும் அவற்றிற்குப் பொறுப்புகளை எவ்வாறு ஒதுக்குவது என்பதில் கவனம் செலுத்துகின்றன. +chapter: 23 +pageNumber: 219 +--- + +# நடத்தை வடிவமைப்பு முறைகள் (Behavioral Design Patterns) + +பொருள்கள் ஒன்றுக்கொன்று எவ்வாறு தொடர்புகொள்கின்றன மற்றும் அவற்றிற்குப் பொறுப்புகளை எவ்வாறு ஒதுக்குவது என்பதில் கவனம் செலுத்துகின்றன. + +## 1. பொறுப்புச் சங்கிலி (Chain of Responsibility) + +பொறுப்புச் சங்கிலி என்பது ஒரு நடத்தை வடிவமைப்பு முறையாகும், மேலும் ஒரு கோரிக்கையை (request) எடுத்து அதை கையாளுபவர்களின் சங்கிலியுடன் (chain of handlers) அனுப்புவதே இதன் முக்கிய நோக்கமாகும். கோரிக்கை சங்கிலி வழியாகச் செல்லும்போது, ஒவ்வொரு கையாளுபவரும் கோரிக்கையைச் செயலாக்கலாமா (process) அல்லது சங்கிலியில் உள்ள அடுத்த கையாளுபவரிடம் அனுப்பலாமா என்பதை முடிவு செய்வார்கள். கோரிக்கையை அனுப்பியவருக்கு (sender), அதை யார் செயலாக்கப் போகிறார்கள் என்பதை அறியத் தேவையில்லாமல், பல கையாளுபவர்கள் கோரிக்கையைக் கையாள இந்த முறை அனுமதிக்கிறது. + +## 1.1. பொறுப்புச் சங்கிலியின் கூறுகள் + +*கோரிக்கை (Request)* + +கோரிக்கை என்பது செயலாக்கப்பட வேண்டிய கிளையன்ட் அனுப்பும் பொருளாகும். கோரிக்கையானது செயலாக்கப்படும் வரை அல்லது சங்கிலியின் முடிவை அடையும் வரை கையாளுபவர்களின் சங்கிலி வழியாகச் செல்கிறது. + +*சுருக்கக் கையாளுபவர் இடைமுகம்/வகுப்பு (Abstract Handler Interface/Class)* + +இது கோரிக்கையைக் கையாளுவதற்குப் பயன்படுத்தப்படும் முறைகளை வரையறுக்கும் அடிப்படை இடைமுகம்/வகுப்பாகும். கையாளுபவர் இடைமுகம் சங்கிலியின் வரிசை மற்றும் கோரிக்கை எவ்வாறு அனுப்பப்படுகிறது என்பதற்கான தர்க்கத்தைக் கொண்டுள்ளது. + +*கான்கிரீட் கையாளுபவர்கள் (Concrete Handlers)* + +இவை சுருக்கக் கையாளுபவரை (abstract handler) செயல்படுத்தும் முறைகள்/வகுப்புகளாகும். ஒவ்வொரு கான்கிரீட் கையாளுபவரும் ஒரு குறிப்பிட்ட வகையான கோரிக்கையைக் கையாள்வதற்கான தர்க்கத்தைக் கொண்டுள்ளனர். கான்கிரீட் கையாளுபவரால் கோரிக்கையைச் செயலாக்க முடியுமானால் அது செயலாக்கும், முடியாவிட்டால் கோரிக்கையை அடுத்த கையாளுபவருக்கு அனுப்பும். + +## 1.2. பொறுப்புச் சங்கிலியின் நன்மைகள் + +**பயன்படுத்த எளிதானது (Ease of Use)** + +அனுப்புநருக்குக் கோரிக்கையைச் செயலாக்க குறிப்பிட்ட முறை தெரிந்திருக்கத் தேவையில்லை, அனுப்புநர் அதைச் சங்கிலிக்கு அனுப்பினால் போதும். இது அனுப்புநருக்குக் கோரிக்கைகளைச் செயலாக்குவதை எளிதாக்குகிறது. + +**நெகிழ்வுத்தன்மை மற்றும் நீட்டிக்கும் திறன் (Flexibility and Extensibility)** + +அனுப்புநரின் குறியீட்டை மாற்றாமல் புதிய கையாளுபவர்களைச் சங்கிலியில் சேர்க்கலாம் அல்லது சங்கிலியிலிருந்து அகற்றலாம். இது செயலாக்க வரிசையின் மாறும் மாற்றங்களை (dynamic modification) அனுமதிக்கிறது. + +**பொறுப்பான பிரிவினையை ஊக்குவிக்கிறது (Promotes Responsible Segregation)** + +கையாளுபவர்கள் தங்களின் வரையறுக்கப்பட்ட தர்க்கத்தின் அடிப்படையில் குறிப்பிட்ட வகையான கோரிக்கைகளைச் செயலாக்கப் பொறுப்பாவார்கள். இது பொறுப்புகளின் தெளிவான பிரிவினையை ஊக்குவிக்கிறது, ஒவ்வொரு கையாளுபவரையும் சுயாதீனமாக நிர்வகிப்பதை மற்றும் பராமரிப்பதை எளிதாக்குகிறது. + +**வரிசையான கோரிக்கை செயலாக்கம் (Sequential Request Processing)** + +ஒவ்வொரு கோரிக்கையும் கையாளுபவர்களின் சங்கிலி மூலம் வரிசையாகச் செயலாக்கப்படுவதை இந்த முறை உறுதி செய்கிறது. ஒவ்வொரு கையாளுபவரும் கோரிக்கையைச் செயலாக்கவோ அல்லது அடுத்த கையாளுபவருக்கு அனுப்பவோ தேர்வு செய்யலாம். கோரிக்கைகள் ஒரு குறிப்பிட்ட வரிசையில் செயலாக்கப்பட வேண்டிய சூழ்நிலைகளில் இது மிகவும் பயனுள்ளதாக இருக்கும். + +## 1.3. எடுத்துக்காட்டு + +```javascript +// Handler interface +class CoffeeHandler { + constructor() { + this.nextHandler = null; + } + + setNext(handler) { + this.nextHandler = handler; + } + + processRequest(request) { + throw new Error('processRequest method must be implemented by subclasses'); + } +} + +// Concrete handler for ordering coffee +class OrderCoffeeHandler extends CoffeeHandler { + processRequest(request) { + if (request === 'Coffee') { + return 'ஒரு கப் காபிக்கு ஆர்டர் செய்யப்பட்டுள்ளது. (Order placed for a cup of coffee.)'; + } else if (this.nextHandler) { + return this.nextHandler.processRequest(request); + } else { + return 'மன்னிக்கவும், நாங்கள் ' + request + ' வழங்குவதில்லை.'; + } + } +} + +// Concrete handler for preparing coffee +class PrepareCoffeeHandler extends CoffeeHandler { + processRequest(request) { + if (request === 'PrepareCoffee') { + return 'காபி தயார் செய்யப்படுகிறது. (Coffee is being prepared.)'; + } else if (this.nextHandler) { + return this.nextHandler.processRequest(request); + } else { + return request + ' ஐத் தயார் செய்ய முடியாது.'; + } + } +} + +// Client code +const orderHandler = new OrderCoffeeHandler(); +const prepareHandler = new PrepareCoffeeHandler(); + +// Set up the chain +orderHandler.setNext(prepareHandler); + +// Order coffee +console.log(orderHandler.processRequest('Coffee')); // Output: ஒரு கப் காபிக்கு ஆர்டர் செய்யப்பட்டுள்ளது. + +// Prepare coffee +console.log(orderHandler.processRequest('PrepareCoffee')); // Output: காபி தயார் செய்யப்படுகிறது. + +// Try ordering something else +console.log(orderHandler.processRequest('Tea')); // Output: மன்னிக்கவும், நாங்கள் Tea வழங்குவதில்லை. +``` + +## 2. கட்டளை (Command) + +கட்டளை (Command) வடிவமைப்பு முறை என்பது ஒரு நடத்தை வடிவமைப்பு முறையாகும், இது ஒரு கோரிக்கையை ஒரு பொருளாக இணைக்க உங்களை அனுமதிக்கிறது, அந்தப் பொருள் கோரிக்கையை இயக்குவதற்கு (execution) தேவையான அனைத்து தகவல்களையும் கொண்டிருக்கும். கோரிக்கைகளின் அளவுருவாக்கம் (parameterization) மற்றும் வரிசையாக்கத்தை (queuing) இந்த முறை அனுமதிக்கிறது மற்றும் செயல்பாடுகளைச் செயல்தவிர்க்கும் (undo) திறனை வழங்குகிறது. + +## 2.1. கட்டளையின் கூறுகள் + +*அழைப்பாளர் (Invoker)* + +இது ஒரு கட்டளையை இயக்கக் கோரும் பொருளாகும். இது ஒரு கட்டளைக்கான குறிப்பைக் கொண்டுள்ளது மற்றும் அதன் `execute` முறையை அழைப்பதன் மூலம் கட்டளையை இயக்க முடியும். கட்டளை எவ்வாறு செயல்படுத்தப்படுகிறது என்ற விவரங்களை அழைப்பாளர் தெரிந்து கொள்ளத் தேவையில்லை. இது கட்டளையைத் தூண்டுகிறது (triggers). + +*கட்டளை (Command)* + +இது `execute` முறையை அறிவிக்கும் இடைமுகம் அல்லது சுருக்க வகுப்பாகும். கான்கிரீட் கட்டளை வகுப்புகள் செயல்படுத்த வேண்டிய பொதுவான முறையை இது வரையறுக்கிறது. + +*பெறுநர் (Receiver)* + +ஒரு கட்டளையின் `execute` முறையை அழைக்கும்போது உண்மையான வேலையைச் செய்யும் ஒரு பொருள் இதுவாகும். ஒரு குறிப்பிட்ட கட்டளையுடன் தொடர்புடைய செயலை எவ்வாறு செய்வது என்று பெறுநருக்குத் தெரியும். + +## 2.2. கட்டளையின் நன்மைகள் + +**நெகிழ்வுத்தன்மை மற்றும் நீட்டிக்கும் திறன் (Flexibility and Extensibility)** + +அழைப்பாளரை (invoker) அல்லது பெறுநரை (receiver) மாற்றத் தேவையில்லாமல் புதிய கட்டளைகளை எளிதாகச் சேர்க்க இந்த முறை அனுமதிக்கிறது. + +**செயல்தவிர் மற்றும் மீண்டும் செய் செயல்பாடுகள் (Undo and Redo Operations)** + +கட்டளை முறையானது செயல்தவிர் மற்றும் மீண்டும் செய் செயல்பாடுகளைச் செயல்படுத்துவதற்கு உதவுகிறது. ஒவ்வொரு கட்டளைப் பொருளும் முந்தைய நிலையைக் கண்காணிக்க முடியும், செயல்படுத்தப்பட்ட செயலைத் திரும்பப் பெற இது உதவுகிறது. + +**அளவுருவாக்கம் மற்றும் வரிசையாக்கம் (Parameterization and Queuing)** + +கட்டளைகளை வாதங்களுடன் (arguments) அளவுருவாக்கலாம், இது இயக்க நேரத்தில் (runtime) செயல்களைத் தனிப்பயனாக்க அனுமதிக்கிறது. கூடுதலாக, இந்த முறையானது கோரிக்கைகளை வரிசைப்படுத்தவும் மற்றும் திட்டமிடவும் (scheduling) செயல்படுத்துகிறது, செயல்படுத்துவதற்கான வரிசையின் மீது கட்டுப்பாட்டை வழங்குகிறது. + +**வரலாறு மற்றும் பதிவு செய்தல் (History and Logging)** + +செயல்படுத்தப்பட்ட கட்டளைகளின் வரலாற்றைப் பராமரிக்க முடியும், இது தணிக்கை (auditing), பதிவு செய்தல் (logging) அல்லது பயனர் செயல்களைக் கண்காணிப்பதற்கு பயனுள்ளதாக இருக்கும். + +## 2.3. எடுத்துக்காட்டு + +```javascript + +class Command { + constructor(receiver) { + this.receiver = receiver; + } + + execute() { + throw new Error('execute() method must be implemented'); + } +} + +class ConcreteCommand extends Command { + constructor(receiver, parameter) { + super(receiver); + this.parameter = parameter; + } + + execute() { + this.receiver.action(this.parameter); + } +} + +class Receiver { + action(parameter) { + console.log(`பெறுநர் அளவுருவுடன் செயலைச் செய்கிறார்: ${parameter}`); + } +} + +class Invoker { + constructor() { + this.commands = []; + } + + addCommand(command) { + this.commands.push(command); + } + + executeCommands() { + this.commands.forEach(command => command.execute()); + this.commands = []; // Clear the executed commands + } +} + +// Usage +const receiver = new Receiver(); +const command1 = new ConcreteCommand(receiver, 'கட்டளை 1 அளவுரு'); +const command2 = new ConcreteCommand(receiver, 'கட்டளை 2 அளவுரு'); + +const invoker = new Invoker(); +invoker.addCommand(command1); +invoker.addCommand(command2); + +invoker.executeCommands(); +``` + +## 3. மொழிபெயர்ப்பாளர் (Interpreter) + +மொழிபெயர்ப்பாளர் வடிவமைப்பு முறை (Interpreter design pattern) என்பது ஒரு மொழிக்கான இலக்கணத்தை (grammar) வரையறுக்கவும் அந்த மொழியில் உள்ள வாக்கியங்களை (sentences) விளக்குவதற்கு ஒரு மொழிபெயர்ப்பாளரை வழங்கவும் பயன்படுத்தப்படுகிறது. இது பொதுவாக மொழி மொழிபெயர்ப்பாளர்கள் அல்லது பாகுபடுத்திகளை (parsers) உருவாக்கப் பயன்படுகிறது, ஆனால் அவற்றை உங்கள் பயன்பாட்டிற்குள்ளும் பயன்படுத்தலாம். உங்களிடம் ஒரு சிக்கலான டெஸ்க்டாப் பயன்பாடு (desktop application) இருப்பதாக கற்பனை செய்து பாருங்கள், ஒரு எளிய ஸ்கிரிப்டிங் மொழியை நீங்கள் வடிவமைக்கலாம், இது இறுதி-பயனர் (end-user) எளிமையான வழிமுறைகள் மூலம் உங்கள் பயன்பாட்டைக் கையாள அனுமதிக்கிறது. + + +## 3.1. மொழிபெயர்ப்பாளரின் கூறுகள் + +*சூழல் (Context)* + +கோவை (expressions) விளக்க மொழிபெயர்ப்பாளர் பயன்படுத்தும் குளோபல் நிலை (global state) அல்லது சூழல் (context). கோவைகளை விளக்கும் போது தொடர்புடைய தகவல்களை இது பெரும்பாலும் கொண்டுள்ளது. + +*சுருக்கக் கோவைகள் (Abstract Expressions)* + +மொழியின் இலக்கணத்தில் உள்ள அனைத்து வகையான கோவைகளுக்கான இடைமுகத்தை இது வரையறுக்கிறது. இந்தக் கோவைகள் பொதுவாக ஒரு சுருக்க வகுப்பு (abstract class) அல்லது இடைமுகமாகக் குறிப்பிடப்படுகின்றன. + +*முனையக் கோவைகள் (Terminal Expressions)* + +இலக்கணத்தில் உள்ள முனையக் குறியீடுகளைக் (terminal symbols) குறிக்கிறது. இவை கோவை மரத்தின் (expression tree) இலைகளாகும். முனையக் கோவை சுருக்கக் கோவையால் வரையறுக்கப்பட்ட இடைமுகத்தை செயல்படுத்துகிறது. + +*முனையம்-அல்லாத கோவை (Non-terminal Expression)* + +இலக்கணத்தில் உள்ள முனையம்-அல்லாத குறியீடுகளைக் குறிக்கிறது. முனையம்-அல்லாத கோவைகள் சிக்கலான கோவைகளை இணைப்பதன் (combining) மூலமாகவோ அல்லது இயற்றுவதன் (composing) மூலமாகவோ வரையறுக்க முனைய மற்றும்/அல்லது பிற முனையம்-அல்லாத கோவைகளைப் பயன்படுத்துகின்றன. + +*கோவை மரம் (Expression Tree)* + +மொழியின் கோவைகளின் படிநிலை அமைப்பைக் (hierarchical structure) குறிக்கிறது. மொழியின் இலக்கண விதிகளின் அடிப்படையில் முனைய மற்றும் முனையம்-அல்லாத கோவைகளை இணைப்பதன் மூலம் கோவை மரம் கட்டப்பட்டுள்ளது. + +*மொழிபெயர்ப்பாளர் (Interpreter)* + +கோவை மரத்தால் உருவாக்கப்பட்ட சுருக்க தொடரியல் மரத்தை (abstract syntax tree) விளக்கும் இடைமுகம் அல்லது வகுப்பை வரையறுக்கிறது. இது பொதுவாக ஒரு `interpret` முறையை உள்ளடக்கியது, அது ஒரு சூழலை (context) எடுத்து அந்தச் சூழலின் அடிப்படையில் கோவையை விளக்குகிறது. + +*கிளையன்ட் (client)* + +மொழியின் இலக்கணத்தின் அடிப்படையில் முனைய மற்றும் முனையம்-அல்லாத கோவைகளைப் பயன்படுத்தி சுருக்க தொடரியல் மரத்தை உருவாக்குகிறது. கிளையன்ட் பின்னர் கோவையை விளக்க மொழிபெயர்ப்பாளரைப் பயன்படுத்துகிறார். + +## 3.2. மொழிபெயர்ப்பாளர்களின் நன்மைகள் + +**இலக்கண விளக்கத்தின் எளிமை (Ease of Grammar Interpretation)** + +சிக்கலான இலக்கண விதிகளைச் சிறிய, நிர்வகிக்கக்கூடிய கோவைகளாக உடைப்பதன் மூலம் இந்த முறை அவற்றை விளக்குவதை எளிதாக்குகிறது. ஒவ்வொரு கோவை வகையும் அதன் சொந்த விளக்கத்தைக் கையாளுகிறது, ஒட்டுமொத்த விளக்கச் செயல்முறையை நிர்வகிப்பதை எளிதாக்குகிறது. + +**சிறந்த பிழை கையாளுதல் (Better Error Handling)** + +ஒவ்வொரு கோவை வகையும் அதன் சொந்த விளக்கத்தைக் கையாளுவதால், பிழை கையாளுதலை (error handling) குறிப்பிட்ட கோவைகளுக்கு ஏற்ப வடிவமைக்க முடியும். உள்ளீட்டைப் பாகுபடுத்தும் போது (parsing) அல்லது விளக்கும் போது துல்லியமான மற்றும் அர்த்தமுள்ள பிழை செய்திகளை வழங்க இது அனுமதிக்கிறது. + +**நெகிழ்வுத்தன்மை மற்றும் நீட்டிக்கும் திறன் (Flexibility and Extensibility)** + +மொழிபெயர்ப்பாளர் முறை முக்கிய மொழிபெயர்ப்பாளர் தர்க்கத்தை மாற்றாமல் இலக்கண விதிகள் மற்றும் மொழி கோவைகளை (language expressions) வரையறுப்பதற்கும் நீட்டிப்பதற்கும் ஒரு நெகிழ்வான வழியை வழங்குகிறது. புதிய முனைய மற்றும் முனையம்-அல்லாத கோவை வகுப்புகளை உருவாக்குவதன் மூலம் நீங்கள் எளிதாகப் புதிய கோவைகளைச் சேர்க்கலாம். + +**பிற வடிவமைப்பு முறைகளுடனான ஒருங்கிணைப்பு (Integration with other Design Patterns)** + +கோவைகளின் சிக்கலான படிநிலைகளை உருவாக்க, கலவை (Composite) போன்ற பிற வடிவமைப்பு முறைகளுடன் மொழிபெயர்ப்பாளர் முறையை இணைக்கலாம். இது சக்திவாய்ந்த மற்றும் அம்சம் நிறைந்த (feature-rich) மொழிபெயர்ப்பாளர்களை உருவாக்க அனுமதிக்கிறது. + +## 3.3. எடுத்துக்காட்டு + +```javascript +// Abstract Expression +class Expression { + interpret(context) { + // To be overridden by subclasses + } +} + +// Terminal Expression: NumberExpression +class NumberExpression extends Expression { + constructor(number) { + super(); + this.number = number; + } + + interpret(context) { + return this.number; + } +} + +// Terminal Expression: VariableExpression +class VariableExpression extends Expression { + constructor(variable) { + super(); + this.variable = variable; + } + + interpret(context) { + return context[this.variable] || 0; + } +} + +// Non-terminal Expression: AddExpression +class AddExpression extends Expression { + constructor(expression1, expression2) { + super(); + this.expression1 = expression1; + this.expression2 = expression2; + } + + interpret(context) { + return this.expression1.interpret(context) + this.expression2.interpret(context); + } +} + +// Non-terminal Expression: SubtractExpression +class SubtractExpression extends Expression { + constructor(expression1, expression2) { + super(); + this.expression1 = expression1; + this.expression2 = expression2; + } + + interpret(context) { + return this.expression1.interpret(context) - this.expression2.interpret(context); + } +} + +// Client code +const context = { a: 10, b: 5, c: 2 }; + +const expression = new SubtractExpression( + new AddExpression( + new VariableExpression('a'), + new VariableExpression('b') + ), + new VariableExpression('c') +); + +const result = expression.interpret(context); +console.log('Result:', result); // Output: Result: 13 +``` + +## 4. ஐட்ரேட்டர் (Iterator) + +பொருள்களின் தொகுப்பின் (collection of objects) மூலம் திறம்பட சுழற்ற (loop) கிளையன்ட்களை ஐட்ரேட்டர் முறை அனுமதிக்கிறது. + +## 4.1. ஐட்ரேட்டரின் கூறுகள் + +*ஐட்ரேட்டர் (Iterator)* + +`first()`, `next()` போன்ற முறைகளைக் கொண்டு ஐட்ரேட்டர் இடைமுகம் அல்லது வகுப்பைச் செயல்படுத்துகிறது. தொகுப்புகளைப் பயணிக்கும்போது (traversing) ஐட்ரேட்டர் தற்போதைய நிலையைக் கண்காணிக்கிறது. + +*உருப்படிகள் (Items)* + +இவை ஐட்ரேட்டர் பயணிக்கும் தொகுப்பின் தனிப்பட்ட பொருள்களாகும் + +## 4.2. ஐட்ரேட்டர்களின் நன்மைகள் + +**வெவ்வேறு தரவுக் கட்டமைப்புகளுடன் பொருந்தக்கூடிய தன்மை (Compatibility with Different Data Structures)** + +ஐட்ரேட்டர் முறையானது வெவ்வேறு தரவுக் கட்டமைப்புகளுக்கு ஒரே சுழற்சி தர்க்கத்தைப் (iteration logic) பயன்படுத்த அனுமதிக்கிறது. + +**ஒரே நேர சுழற்சிக்கான ஆதரவு (Support for concurrent Iteration)** + +ஒன்றுக்கொன்று குறுக்கிடாமல் (interfering) ஒரே தொகுப்பின் மீது ஒரே நேரத்தில் சுழற்சி செய்ய ஐட்ரேட்டர்கள் ஆதரவளிக்க முடியும், இது தொகுப்பின் மீது ஒரே நேரத்தில் வெவ்வேறு வழிகளில் சுழற்சி செய்ய கிளையன்ட்டை அனுமதிக்கிறது. + +**சோம்பேறி ஏற்றம் (Lazy Loading)** + +தேவைக்கேற்ப கூறுகளை ஏற்றுவதற்கு (load) ஐட்ரேட்டர்களை வடிவமைக்க முடியும், இது அனைத்து கூறுகளையும் ஒரே நேரத்தில் ஏற்றுவது நடைமுறைக்குச் சாத்தியமில்லாத அல்லது வளங்களை அதிக அளவில் பயன்படுத்தக்கூடிய பெரிய தொகுப்புகளுக்குப் பயனுள்ளதாக இருக்கும். தேவைக்கேற்ப கூறுகளைப் பெறலாம், நினைவகப் பயன்பாட்டை இது மேம்படுத்துகிறது. + +**எளிமைப்படுத்தப்பட்ட இடைமுகம் (Simplified Interface)** + +தொகுப்பின் உள் கட்டமைப்பை வெளிப்படுத்தாமல் ஒரு தொகுப்பில் உள்ள கூறுகளை அணுகுவதற்கான சுத்தமான மற்றும் நிலையான இடைமுகத்தை ஐட்ரேட்டர் முறை வழங்குகிறது. இது தொகுப்பின் பயன்பாடு மற்றும் புரிதலை எளிதாக்குகிறது. + +## 4.3. எடுத்துக்காட்டு + +```javascript +// Car class representing a car +class Car { + constructor(make, model) { + this.make = make; + this.model = model; + } + + getInfo() { + return `${this.make} ${this.model}`; + } +} + +// Iterator interface +class Iterator { + constructor(collection) { + this.collection = collection; + this.index = 0; + } + + next() { + return this.collection[this.index++]; + } + + hasNext() { + return this.index < this.collection.length; + } +} + +// Collection of cars +class CarCollection { + constructor() { + this.cars = []; + } + + addCar(car) { + this.cars.push(car); + } + + createIterator() { + return new Iterator(this.cars); + } +} + +// Usage +const carCollection = new CarCollection(); +carCollection.addCar(new Car('Toyota', 'Corolla')); +carCollection.addCar(new Car('Honda', 'Civic')); +carCollection.addCar(new Car('Ford', 'Mustang')); + +const iterator = carCollection.createIterator(); + +while (iterator.hasNext()) { + const car = iterator.next(); + console.log(car.getInfo()); +} +``` + +## 5. மத்தியஸ்தர் (Mediator) + +பொருள்களின் ஒரு குழுவுக்கு இடையே தொடர்புகொள்வதற்கான (interaction) வழியை மூடிமறைப்பதன் (encapsulating) மூலம் மத்தியஸ்தர் (Mediator) முறை ஒரு இடைத்தரகராகச் (middle man) செயல்படுகிறது. அமைப்பின் வெவ்வேறு கூறுகளுக்கு இடையே நேரடிக் குறிப்பு இல்லாமல் தொடர்புகொள்வதை மத்தியஸ்தர் எளிதாக்குகிறார். + +## 5.1. மத்தியஸ்தரின் கூறுகள் + +*மத்தியஸ்தர் (Mediator)* + +செயல்பாடுகளின் மீதான மையக் கட்டுப்பாட்டை (central control) மத்தியஸ்தர் நிர்வகிக்கிறார். இது சக (Colleague) பொருள்களுடன் தொடர்புகொள்வதற்கான இடைமுகத்தைக் கொண்டுள்ளது மற்றும் ஒவ்வொரு சக பொருளுக்கும் ஒரு குறிப்பைக் கொண்டுள்ளது. + +*சக (Colleague)* + +சக ஊழியர்கள் என்பவர்கள் மத்தியஸ்தம் செய்யப்படும் பொருள்கள், ஒவ்வொரு சக ஊழியருக்கும் மத்தியஸ்தரைப் பற்றிய குறிப்பு இருக்கும். + +## 5.2. மத்தியஸ்தரின் நன்மைகள் + +**மையப்படுத்தப்பட்ட கட்டுப்பாடு (Centralized Control)** + +மத்தியஸ்தருக்குள் தொடர்புகளை மையப்படுத்துவது கூறுகளுக்கிடையேயான தொடர்புகளின் சிறந்த கட்டுப்பாட்டிற்கும் ஒருங்கிணைப்பிற்கும் (coordination) அனுமதிக்கிறது. மத்தியஸ்தர் செய்திகளின் விநியோகத்தை நிர்வகிக்கலாம், செய்திகளுக்கு முன்னுரிமை அளிக்கலாம் மற்றும் அமைப்பின் தேவைகளின் அடிப்படையில் குறிப்பிட்ட தர்க்கத்தைப் பயன்படுத்தலாம். + +**எளிமைப்படுத்தப்பட்ட தொடர்பு (Simplified Communication)** + +நேரடித் தொடர்பின் சிக்கலான தன்மையைக் கையாளுவதற்குப் பதிலாக மத்தியஸ்தருக்குக் கூறுகள் செய்திகளை அனுப்புவதால், மத்தியஸ்தர்கள் தொடர்பு தர்க்கத்தை (communication logic) எளிதாக்குகிறார்கள். இது கூறுகளுக்கு இடையிலான தொடர்புகளை எளிதாக்குகிறது மற்றும் எளிதான பராமரிப்பு மற்றும் புதுப்பிப்புகளை அனுமதிக்கிறது. + +**மத்தியஸ்தரின் மறுபயன்பாடு (Reusability of Mediator)** + +மத்தியஸ்தரைப் பல்வேறு கூறுகள் மற்றும் சூழ்நிலைகளில் மீண்டும் பயன்படுத்தலாம், பயன்பாட்டின் வெவ்வேறு பகுதிகளுக்கு ஒற்றைக் கட்டுப்பாட்டுப் புள்ளியை இது அனுமதிக்கிறது. இந்த மறுபயன்பாடு நிலைத்தன்மையை ஊக்குவிக்கிறது மற்றும் தொடர்பு ஓட்டத்தை (communication flow) திறமையாக நிர்வகிக்க உதவுகிறது. + +**பராமரிப்பை மேம்படுத்துகிறது (Promotes Maintainability)** + +கூறுகளுக்கிடையேயான நேரடித் தொடர்பின் சிக்கலைக் குறைப்பதன் மூலம் மத்தியஸ்தர் முறை பராமரிப்பை மேம்படுத்துகிறது. அமைப்பு வளரும்போது, தனிப்பட்ட கூறுகளைப் பாதிக்காமல் மத்தியஸ்தருக்குள் மாற்றங்களையும் புதுப்பிப்புகளையும் செய்யலாம், இதனால் பராமரிப்பு எளிதாகிறது மற்றும் பிழைகள் குறைகின்றன. + +```javascript +var Participant = function (name) { + this.name = name; + this.chatroom = null; +}; + +Participant.prototype = { + send: function (message, to) { + this.chatroom.send(message, this, to); + }, + receive: function (message, from) { + console.log(from.name + " to " + this.name + ": " + message); + } +}; + +var Chatroom = function () { + var participants = {}; + + return { + + register: function (participant) { + participants[participant.name] = participant; + participant.chatroom = this; + }, + + send: function (message, from, to) { + if (to) { // single message + to.receive(message, from); + } else { // broadcast message + for (key in participants) { + if (participants[key] !== from) { + participants[key].receive(message, from); + } + } + } + } + }; +}; + +function run() { + + var yoko = new Participant("Yoko"); + var john = new Participant("John"); + var paul = new Participant("Paul"); + var ringo = new Participant("Ringo"); + + var chatroom = new Chatroom(); + chatroom.register(yoko); + chatroom.register(john); + chatroom.register(paul); + chatroom.register(ringo); + + yoko.send("All you need is love."); + yoko.send("I love you John."); + john.send("Hey, no need to broadcast", yoko); + paul.send("Ha, I heard that!"); + ringo.send("Paul, what do you think?", paul); +} +``` + +## 6. மெமெண்டோ (Memento) + +மெமெண்டோ வடிவமைப்பு முறை (Memento design pattern) ஒரு பொருளின் நிலையை அதன் உள் கட்டமைப்பை வெளிப்படுத்தாமல் படம்பிடிக்கவும் பின்னர் அதை மீட்டெடுக்கவும் அனுமதிக்கிறது. மெமெண்டோ என்பது அசல் பொருளின் நிலையைச் சேமிக்கும் ஒரு தனிப் பொருளாகும். + +## 6.1. மெமெண்டோவின் கூறுகள் + +*உருவாக்குபவர் (Originator)* + +இது சேமிக்கப்படும் பொருளாகும். இது அதன் உள் நிலையைச் சேமிக்க ஒரு மெமெண்டோ பொருளை உருவாக்குகிறது. + +*மெமெண்டோ (Memento)* + +உருவாக்குபவரின் நிலையைச் சேமிக்க மெமெண்டோ பொறுப்பாகும். இது உருவாக்குபவரின் நிலையை மீட்டெடுப்பதற்கும் அமைப்பதற்குமான முறைகளைக் கொண்டுள்ளது, ஆனால் உருவாக்குபவரின் உள் கட்டமைப்பை இது வெளிப்படுத்தாது. + +*பராமரிப்பாளர் (Caretaker)* + +பராமரிப்பாளர் மெமெண்டோக்களைக் கண்காணிக்கவும் நிர்வகிக்கவும் பொறுப்பாவார். இது மெமெண்டோக்களின் உள்ளடக்கங்களை மாற்றாது அல்லது பரிசோதிக்காது + +## 6.2. மெமெண்டோவின் நன்மைகள் + +**நிலையைப் பாதுகாத்தல் மற்றும் மீட்டெடுத்தல் (State Preservation and Restoration)** + +மெமெண்டோக்கள் ஒரு பொருளின் உள் நிலையைப் படம்பிடித்துப் பின்னர் மீட்டெடுக்க அனுமதிக்கின்றன. + +**செயல்தவிர்/மீண்டும் செய் செயல்பாடுகள் (Undo/Redo Operations)** + +செயல்தவிர் மற்றும் மீண்டும் செய் செயல்பாட்டை எளிதாகச் செயல்படுத்துவதற்கு மெமெண்டோ உதவுகிறது. மெமெண்டோக்கள் பல்வேறு நேரங்களில் பொருள்களின் நிலையைச் சேமித்து வைப்பதால், பொருளில் செய்யப்பட்ட மாற்றங்களைச் செயல்தவிர்க்கவோ அல்லது பொருளில் செய்யப்பட்ட மாற்றங்களை மீண்டும் செய்யவோ நீங்கள் ஆதரிக்கலாம். + +**மேம்படுத்தப்பட்ட செயல்திறன் (Improved Performance)** + +பிற அணுகுமுறைகளுடன் ஒப்பிடும்போது ஒரு மெமெண்டோவில் பொருளின் நிலையைச் சேமிப்பது மிகவும் திறமையான சேமிப்பிற்கும் (storage) மீட்டெடுப்பு (retrieval) செயல்பாடுகளுக்கும் அனுமதிக்கிறது. + +**நெகிழ்வான வடிவமைப்பு (Flexible Design)** + +ஒரு பொருளின் நிலையின் வரலாற்றை நிர்வகிக்க இது ஒரு நெகிழ்வான வழியை வழங்குகிறது. எந்த நிலைகளை வைத்திருக்க வேண்டும், எப்போது அவற்றை மீட்டெடுக்க வேண்டும் என்பதைப் பராமரிப்பாளர் தீர்மானிக்க முடியும், இது பயன்பாட்டின் தேவைகளின் அடிப்படையில் தனிப்பயனாக்கக்கூடிய அணுகுமுறையை அனுமதிக்கிறது. + + +## 6.3. எடுத்துக்காட்டு + +```javascript +// Computer class (originator) +class Computer { + constructor() { + this.os = ''; + this.version = ''; + } + + setOS(os, version) { + this.os = os; + this.version = version; + } + + getState() { + return { + os: this.os, + version: this.version + }; + } + + restoreState(state) { + this.os = state.os; + this.version = state.version; + } +} + +// Caretaker +class Caretaker { + constructor() { + this.mementos = {}; + this.nextKey = 1; + } + + add(memento) { + const key = this.nextKey++; + this.mementos[key] = memento; + return key; + } + + get(key) { + return this.mementos[key]; + } +} + +function run() { + const computer = new Computer(); + const caretaker = new Caretaker(); + + // Save state + const originalState = computer.getState(); + const key = caretaker.add(originalState); + + // Mess up the state + computer.setOS('Windows', '11'); + + // Restore original state + const restoredState = caretaker.get(key); + computer.restoreState(restoredState); + + console.log(computer.getState()); // Output: { os: '', version: '' } +} + +run(); +``` + +## 7. பார்வையாளர் (Observer) + +பார்வையாளர் முறை (Observer pattern) மற்றொரு பொருளால் ஒளிபரப்பப்படும் (broadcast) நிகழ்வுகளுக்குப் (events) பல பொருள்கள் குழுசேர (subscribe) அனுமதிக்கிறது. + +## 7.1. பார்வையாளரின் கூறுகள் + +*பொருள் (Subject)* + +பொருள் (Subject) என்பது ஒரு இடைமுகத்தைச் செயல்படுத்தும் பொருளாகும், இது பார்வையாளர் (observer) பொருள்களை அதில் குழுசேர அனுமதிக்கிறது மற்றும் அதன் நிலை மாறும்போது பார்வையாளர்களுக்கு அறிவிப்புகளை (notifications) அனுப்புகிறது. + +*பார்வையாளர்கள் (Observers)* + +பார்வையாளர் பொருளுக்குக் குழுசேருகிறார், மேலும் பொருள் மூலம் அறிவிக்கப்படும்போது பொதுவாக ஒரு செயல்பாடு அழைக்கப்படுகிறது. + +## 7.2. பார்வையாளர்களின் நன்மைகள் + +**எளிமைப்படுத்தப்பட்ட நிகழ்வு கையாளுதல் (Simplified Event Handling)** + +நிலை மாற்றம் குறித்த பார்வையாளர்களுக்கு அறிவிப்புகளாக நிகழ்வுகளைக் கருதலாம் என்பதால், பார்வையாளர் முறையானது நிகழ்வைக் கையாளும் வழிமுறைகளை எளிதாக்கும். + +**நகல் குறியீட்டைக் குறைக்கிறது (Reduces Duplicate code)** + +பல இடங்களில் ஏற்படும் நிலை மாற்றங்களுக்குப் பதிலளிக்க அதே குறியீட்டை நகலெடுப்பதற்குப் பதிலாக, இந்தப் பதில்களை நிர்வகிக்க ஒரு மையப்படுத்தப்பட்ட இடத்தை பார்வையாளர் முறை அனுமதிக்கிறது, தூய்மையான மற்றும் பராமரிக்கக்கூடிய குறியீட்டை இது ஊக்குவிக்கிறது. + +**ஒளிபரப்புத் தொடர்பிற்கான ஆதரவு (Support for Broadcast Communication)** + +பார்வையாளர் முறை "ஒருவருக்கு-பலர் (one-to-many)" தொடர்பு மாதிரியை எளிதாக்குகிறது, அங்கு ஒற்றை நிகழ்வு பல பார்வையாளர்களின் செயல்களைத் தூண்டுகிறது. நிலையில் ஏற்படும் மாற்றத்திற்குப் பல கூறுகள் எதிர்வினையாற்ற வேண்டிய சூழ்நிலைகளில் இது பயனுள்ளதாக இருக்கும். + +**மாடுலாரிட்டி மற்றும் மறுபயன்பாடு (Modularity and Resuability)** + +வெவ்வேறு பொருள்களில் (subjects) பார்வையாளர்களை மீண்டும் பயன்படுத்தலாம், இது மாடுலாரிட்டி மற்றும் குறியீடு மறுபயன்பாட்டை ஊக்குவிக்கிறது. இது மிகவும் நெகிழ்வான மற்றும் பராமரிக்கக்கூடிய குறியீட்டை அனுமதிக்கிறது. + +## 7.3. எடுத்துக்காட்டு + +```javascript +function Click() { + this.handlers = []; // observers +} + +Click.prototype = { + + subscribe: function (fn) { + this.handlers.push(fn); + }, + + unsubscribe: function (fn) { + this.handlers = this.handlers.filter( + function (item) { + if (item !== fn) { + return item; + } + } + ); + }, + + fire: function (o, thisObj) { + var scope = thisObj || window; + this.handlers.forEach(function (item) { + item.call(scope, o); + }); + } +} + +function run() { + + var clickHandler = function (item) { + console.log("fired: " + item); + }; + + var click = new Click(); + + click.subscribe(clickHandler); + click.fire('event #1'); + click.unsubscribe(clickHandler); + click.fire('event #2'); + click.subscribe(clickHandler); + click.fire('event #3'); +} +``` + +## 8. நிலை (State) + +நிலை முறை (State pattern) என்பது ஒரு நடத்தை வடிவமைப்பு முறையாகும், இது ஒரு அடிப்படை பொருளை (base object) வைத்திருக்க உங்களை அனுமதிக்கிறது மற்றும் அதன் நிலையின் (state) அடிப்படையில் கூடுதல் செயல்பாட்டை (functionality) வழங்குகிறது. ஒரு பொருள் அதன் உள் நிலையின் அடிப்படையில் அதன் நடத்தையை மாற்ற வேண்டியிருக்கும் போது இந்த முறை மிகவும் பயனுள்ளதாக இருக்கும். + +## 8.1. நிலையின் கூறுகள் + +*நிலை (State)* + +இது நிலை மதிப்புகள் மற்றும் நிலையின் தொடர்புடைய நடத்தையை உள்ளடக்கிய பொருளாகும். + +*சூழல் (Context)* + +இது தற்போதைய நிலையை வரையறுக்கும் நிலை பொருளுக்கான குறிப்பைப் பராமரிக்கும் பொருளாகும். இது பிற நிலை பொருள்களை அதன் தற்போதைய நிலையை வேறொரு நிலைக்கு மாற்ற அனுமதிக்கும் இடைமுகத்தையும் கொண்டுள்ளது. + +## 8.2. நிலையின் நன்மைகள் + +**மாடுலர் மற்றும் ஒழுங்கமைக்கப்பட்ட குறியீடு (Modular and Organized Code)** + +ஒவ்வொரு நிலையும் அதன் சொந்த வகுப்பிற்குள் (class) இணைக்கப்பட்டுள்ளது, குறியீட்டை மாடுலராகவும் நிர்வகிக்க எளிதாகவும் ஆக்குகிறது. + +**சுவிட்ச் அறிக்கைகள் தேவையில்லை (No Need for Switch Statements)** + +ஒரு பொருளின் நடத்தையை மாற்றுவதற்குச் சுவிட்ச் (Switch) அறிக்கைகளைப் பயன்படுத்தலாம், ஆனால் இந்த முறையின் சிக்கல் என்னவென்றால், உங்கள் திட்டம் வளரும்போது சுவிட்ச் அறிக்கைகள் மிகவும் நீளமாக மாறும். நிலை (State) முறை இந்தச் சிக்கலைச் சரிசெய்கிறது. + +**மறுபயன்பாட்டை ஊக்குவிக்கிறது (Promotes Reusability)** + +வெவ்வேறு சூழல்களில் நிலைகளை மீண்டும் பயன்படுத்தலாம், இது குறியீடு நகலெடுப்பைக் குறைக்கிறது. + +**சோதனையை எளிதாக்குகிறது (Simplifies Testing)** + +சிக்கலான நிபந்தனை தர்க்கத்துடன் கூடிய ஒற்றைப் பொருளை (monolithic object) சோதிப்பதை விட, தனிப்பட்ட நிலை வகுப்புகளைத் தனிமைப்படுத்திச் சோதிப்பது எளிதானது மற்றும் பயனுள்ளது. + +## 8.3. எடுத்துக்காட்டு + +```javascript +class Car { + constructor() { + this.state = new ParkState(); + } + + setState(state) { + this.state = state; + console.log(`Changed state to: ${state.constructor.name}`); + } + + park() { + this.state.park(this); + } + + drive() { + this.state.drive(this); + } + + reverse() { + this.state.reverse(this); + } +} + +class ParkState { + park(car) { + console.log("கார் ஏற்கனவே பார்க்கிங்கில் (Park) உள்ளது"); + } + + drive(car) { + console.log("டிரைவிற்கு (Drive) மாறுகிறது"); + car.setState(new DriveState()); + } + + reverse(car) { + console.log("ரிவர்ஸுக்கு (Reverse) மாறுகிறது"); + car.setState(new ReverseState()); + } +} + +class DriveState { + park(car) { + console.log("பார்க்கிங்கிற்கு (Park) மாறுகிறது"); + car.setState(new ParkState()); + } + + drive(car) { + console.log("கார் ஏற்கனவே டிரைவில் (Drive) உள்ளது"); + } + + reverse(car) { + console.log("ரிவர்ஸுக்கு (Reverse) மாறுகிறது"); + car.setState(new ReverseState()); + } +} + +class ReverseState { + park(car) { + console.log("பார்க்கிங்கிற்கு (Park) மாறுகிறது"); + car.setState(new ParkState()); + } + + drive(car) { + console.log("டிரைவிற்கு (Drive) மாறுகிறது"); + car.setState(new DriveState()); + } + + reverse(car) { + console.log("கார் ஏற்கனவே ரிவர்ஸில் (Reverse) உள்ளது"); + } +} + +// Example usage +const car = new Car(); + +car.drive(); +car.reverse(); +car.drive(); +car.park(); +car.drive(); // Trying to drive while parked +``` + +## 9. வியூகம் (Strategy) + +வியூகம் (Strategy) முறை என்பது அடிப்படையில் ஒரு வடிவமைப்பு முறையாகும், இது ஒன்றோடொன்று மாற்றக்கூடிய (interchangeable) அல்காரிதம்களின் (algorithms - உத்திகள்) குழுவைக் கொண்டிருக்க உங்களை அனுமதிக்கிறது. + +## 9.1. வியூகத்தின் கூறுகள் + +*வியூகம் (Strategy)* + +இது வியூக இடைமுகத்தை செயல்படுத்தும் ஒரு அல்காரிதம் ஆகும். + +*சூழல் (Context)* + +தற்போதைய வியூகத்திற்கான குறிப்பைப் பராமரிக்கும் பொருள் இதுவாகும். தற்போதைய வியூகத்தை வேறு வியூகத்திற்கு மாற்ற அல்லது தற்போதைய வியூகக் குறிப்பிலிருந்து கணக்கீடுகளை (calculations) மீட்டெடுக்க கிளையன்ட்டை அனுமதிக்கும் இடைமுகத்தை இது வரையறுக்கிறது. + +## 9.2. வியூகத்தின் நன்மைகள் + +**மாறக்கூடிய அல்காரிதம்கள் (Dynamically Swappable Algorithms)** + +வியூகங்களை இயக்க நேரத்தில் மாற்றிக்கொள்ளலாம் (swapped), வெவ்வேறு நிலைமைகள் அல்லது தேவைகளின் அடிப்படையில் அல்காரிதம்களை மாறும் வகையில் தேர்வு செய்ய அனுமதிக்கிறது. பயனர் உள்ளீடு, கட்டமைப்பு அமைப்புகள் அல்லது பிற காரணிகளின் அடிப்படையில் பொருத்தமான அல்காரிதம் மாறுபடும்போது இது மிகவும் பயனுள்ளதாக இருக்கும். + +**நெகிழ்வுத்தன்மை மற்றும் பராமரிப்பு (Flexibility and Maintainability)** + +சூழலை (context) மாற்றாமல் வியூகங்களை மாற்றலாம் அல்லது நீட்டிக்கலாம் (extended). இது கணினியை மிகவும் நெகிழ்வானதாகவும் பராமரிக்க எளிதாகவும் ஆக்குகிறது, ஏனெனில் ஒரு வியூகத்தில் ஏற்படும் மாற்றங்கள் மற்றவற்றைப் பாதிக்காது. + +**சோதனையை எளிதாக்குகிறது (Simplifies Testing)** + +ஒவ்வொரு வியூகமும் ஒரு தனி வகுப்பாக (class) இருப்பதால், தனிமைப்படுத்தப்பட்ட வியூகங்களைச் சோதிப்பது எளிது. இது இலக்கு சோதனைக்கு (targeted testing) அனுமதிக்கிறது மற்றும் ஒரு வியூகத்தில் ஏற்படும் மாற்றங்கள் கவனக்குறைவாக மற்றவர்களைப் பாதிக்காது என்பதை உறுதி செய்கிறது. + +**மறுபயன்பாடு (Reusability)** + +பல்வேறு சூழல்களில் அல்லது பயன்பாடுகளில் வியூகங்களை மீண்டும் பயன்படுத்தலாம், இது குறியீடு மறுபயன்பாட்டை (code reuse) ஊக்குவிக்கிறது மற்றும் பணிநீக்கத்தைக் (redundancy) குறைக்கிறது. + +## 9.3. எடுத்துக்காட்டு + +```javascript +class RegularCustomerStrategy { + calculatePrice(bookPrice) { + // Regular customers get a fixed discount of 10% + return bookPrice * 0.9; + } +} + +class VIPCustomerStrategy { + calculatePrice(bookPrice) { + // VIP customers get a fixed discount of 20% + return bookPrice * 0.8; + } +} + +class BookStore { + constructor(pricingStrategy) { + this.pricingStrategy = pricingStrategy; + } + + setPricingStrategy(pricingStrategy) { + this.pricingStrategy = pricingStrategy; + } + + calculatePrice(bookPrice) { + return this.pricingStrategy.calculatePrice(bookPrice); + } +} + +// Usage +const regularCustomerStrategy = new RegularCustomerStrategy(); +const vipCustomerStrategy = new VIPCustomerStrategy(); + +const bookstore = new BookStore(regularCustomerStrategy); + +console.log('Regular customer price:', bookstore.calculatePrice(50)); // Outputs: 45 (10% discount) +bookstore.setPricingStrategy(vipCustomerStrategy); +console.log('VIP customer price:', bookstore.calculatePrice(50)); // Outputs: 40 (20% discount) +``` + +## 10. டெம்ப்ளேட் முறை (Template Method) + +டெம்ப்ளேட் முறை (Template Method) என்பது ஒரு நடத்தை வடிவமைப்பு முறையாகும், இது ஒரு முறையில் ஒரு அல்காரிதத்தின் நிரல் கட்டமைப்பை (program skeleton) வரையறுக்கிறது, ஆனால் அதன் கட்டமைப்பை மாற்றாமல் அல்காரிதத்தின் குறிப்பிட்ட படிகளை மேலெழுத (override) துணைப்பிரிவுகளை (subclasses) அனுமதிக்கிறது. + +## 10.1. டெம்ப்ளேட் முறையின் கூறுகள் + +*சுருக்க வகுப்பு (Abstract Class)* + +சுருக்க வகுப்பு என்பது அல்காரிதத்திற்கான டெம்ப்ளேட் ஆகும். கிளையன்ட் அதன் முறையை (method) அழைக்க இது ஒரு இடைமுகத்தை வரையறுக்கிறது. துணைப்பிரிவுகளால் மேலெழுதப்படக்கூடிய அனைத்து செயல்பாடுகளையும் இது கொண்டுள்ளது. + +*கான்கிரீட் வகுப்பு (Concrete Class)* + +சுருக்க வகுப்பில் (Abstract Class) வரையறுக்கப்பட்டுள்ள படிகளை இது செயல்படுத்துகிறது மற்றும் படிகளில் மாற்றங்களைச் செய்யலாம். + +## 10.2. டெம்ப்ளேட் முறையின் நன்மைகள் + +**குறியீடு மறுபயன்பாடு (Code Reusability)** + +அடிப்படை வகுப்பில் அல்காரிதத்தின் கட்டமைப்பை வரையறுப்பதன் மூலம் குறியீடு மறுபயன்பாட்டை இந்த முறை ஊக்குவிக்கிறது. துணைப்பிரிவுகள் இந்தக் கட்டமைப்பை மீண்டும் பயன்படுத்தலாம் மற்றும் குறிப்பிட்ட படிகளுக்கான செயலாக்கங்களை (implementations) மட்டுமே வழங்க வேண்டும். + +**எளிதான பராமரிப்பு (Easy Maintenance)** + +பல துணைப்பிரிவுகளுக்குப் பதிலாக ஒரு இடத்தில் மட்டுமே - சுருக்க வகுப்பில் உள்ள டெம்ப்ளேட் முறை - மாற்றங்கள் செய்யப்பட வேண்டும் என்பதால் அல்காரிதத்தில் மாற்றங்களைச் செய்வது எளிமைப்படுத்தப்பட்டுள்ளது. இது பிழைகளுக்கான வாய்ப்புகளைக் குறைக்கிறது மற்றும் பராமரிப்பை மிகவும் நேராக ஆக்குகிறது. + +**நீட்டிப்பு மற்றும் மாறுபாடு (Extension and Variation)** + +இந்த முறை அல்காரிதத்தை எளிதாக நீட்டிக்கவும் மாறுபாடு செய்யவும் அனுமதிக்கிறது. தனிப்பயன் செயலாக்கங்களை (custom implementations) வழங்குவதற்கு துணைப்பிரிவுகள் சில படிகளை மேலெழுதலாம் (override), அல்காரிதத்தின் முக்கிய கட்டமைப்பை மாற்றாமல் அதன் நடத்தையை திறம்பட நீட்டிக்கலாம் அல்லது மாற்றலாம். + +**கட்டுப்பாட்டு ஓட்டம் (Control Flow)** + +டெம்ப்ளேட் முறை அல்காரிதத்தின் கட்டுப்பாட்டு ஓட்டத்தை (control flow) வரையறுக்கிறது, அல்காரிதத்தில் உள்ள செயல்பாடுகளின் வரிசையை நிர்வகிப்பதையும் புரிந்துகொள்வதையும் எளிதாக்குகிறது. + +## 10.3. எடுத்துக்காட்டு + +```javascript +class Camera { + // Template method defining the common steps for capturing a photo + capturePhoto() { + this.turnOn(); + this.initialize(); + this.setExposure(); + this.capture(); + this.turnOff(); + } + + // Common steps for turning on the camera + turnOn() { + console.log('கேமராவை ஆன் செய்தல் (Turning on the camera)'); + } + + // Abstract method for initializing the camera (to be overridden by subclasses) + initialize() { + throw new Error('Abstract method: initialize() must be implemented by subclasses'); + } + + // Abstract method for setting exposure (to be overridden by subclasses) + setExposure() { + throw new Error('Abstract method: setExposure() must be implemented by subclasses'); + } + + // Common steps for capturing a photo + capture() { + console.log('புகைப்படம் எடுத்தல் (Capturing a photo)'); + } + + // Common steps for turning off the camera + turnOff() { + console.log('கேமராவை ஆஃப் செய்தல் (Turning off the camera)'); + } +} + +class DSLRCamera extends Camera { + initialize() { + console.log('DSLR கேமராவைத் துவக்குதல் (Initializing DSLR camera)'); + } + + setExposure() { + console.log('DSLR கேமராவுக்கு எக்ஸ்போஷரை (exposure) அமைத்தல்'); + } +} + +class MirrorlessCamera extends Camera { + initialize() { + console.log('மிரர்லெஸ் (mirrorless) கேமராவைத் துவக்குதல்'); + } + + setExposure() { + console.log('மிரர்லெஸ் கேமராவுக்கு எக்ஸ்போஷரை அமைத்தல்'); + } +} + +// Usage +const dslrCamera = new DSLRCamera(); +console.log('DSLR கேமரா மூலம் புகைப்படம் எடுத்தல்:'); +dslrCamera.capturePhoto(); +console.log(''); + +const mirrorlessCamera = new MirrorlessCamera(); +console.log('மிரர்லெஸ் கேமரா மூலம் புகைப்படம் எடுத்தல்:'); +mirrorlessCamera.capturePhoto(); +``` + +## 11. பார்வையாளர் (Visitor - விசிட்டர்) + +பார்வையாளர் வடிவமைப்பு முறை (Visitor design pattern) என்பது ஒரு நடத்தை வடிவமைப்பு முறையாகும், இது அல்காரிதம்கள் அல்லது செயல்பாடுகளைச் செயல்படும் பொருளிலிருந்து பிரிக்க உங்களை அனுமதிக்கிறது. + +## 11.1 பார்வையாளரின் கூறுகள் (Components of the Visitor) + +*பொருள் கட்டமைப்பு (ObjectStructure)* + +கூறுகளின் (Elements) ஒரு தொகுப்பைப் பராமரிக்கிறது, அதைத் திரும்பத் திரும்பச் (iterated) செய்ய முடியும். + +*கூறுகள் (Elements)* + +கூறானது பார்வையாளர் (visitor) பொருள்களை ஏற்கும் ஒரு accept முறையைக் கொண்டுள்ளது. + +*பார்வையாளர் (Visitor)* + +ஒரு visit முறையைச் செயல்படுத்துகிறது, அங்கு முறையின் வாதம் (argument) பார்வையிடப்படும் கூறு (element) ஆகும். இவ்வாறு தான் கூறுக்கு மாற்றங்கள் செய்யப்படுகின்றன. + +## 11.2. பார்வையாளரின் நன்மைகள் + +**திறந்த/மூடப்பட்ட கொள்கை (Open/Closed Principle)** + +மென்பொருள் உட்பொருள்கள் (classes, modules, functions) நீட்டிப்புக்குத் (extension) திறந்திருக்க வேண்டும் ஆனால் மாற்றத்திற்கு (modification) மூடப்பட வேண்டும் என்று கூறும் திறந்த/மூடப்பட்ட கொள்கையுடன் (Open/Closed Principle) இந்த முறை ஒத்துப்போகிறது. ஏற்கனவே உள்ள பொருளின் அமைப்பு அல்லது கூறுகளை மாற்றாமல் புதிய செயல்பாடுகளை (புதிய பார்வையாளர்களை) அறிமுகப்படுத்தலாம். + +**நீட்டிக்கும் திறன் (Extensibility)** + +ஏற்கனவே உள்ள கூறுகள் அல்லது பொருளின் கட்டமைப்பை மாற்றாமல் புதிய பார்வையாளர் செயலாக்கங்களைச் சேர்ப்பதன் மூலம் புதிய நடத்தைகள் அல்லது செயல்பாடுகளை அறிமுகப்படுத்தலாம். இது அமைப்பை மேலும் நீட்டிக்கக்கூடியதாக ஆக்குகிறது, புதிய அம்சங்கள் அல்லது நடத்தைகளை எளிதாகச் சேர்க்க அனுமதிக்கிறது. + +**மையப்படுத்தப்பட்ட நடத்தை (Centralized Behavior)** + +பார்வையாளர் முறையானது நடத்தை தொடர்பான குறியீட்டைப் பார்வையாளர் வகுப்புகளுக்குள் மையப்படுத்துகிறது. ஒவ்வொரு பார்வையாளரும் ஒரு குறிப்பிட்ட நடத்தையை உள்ளடக்குகிறார் (encapsulates), இது பல்வேறு கூறுகளில் மீண்டும் பயன்படுத்தப்படலாம், குறியீடு மறுபயன்பாடு (code reuse) மற்றும் மாடுலாரிட்டியை (modularity) ஊக்குவிக்கிறது. + +**செயல்பாடுகளில் நிலைத்தன்மை (Consistency in Operations)** + +பார்வையாளர் முறையின் மூலம், ஒரு குறிப்பிட்ட செயல்பாடு (visitor method) பல்வேறு கூறுகள் முழுவதும் சீராகச் (consistently) பயன்படுத்தப்படுவதை உறுதிசெய்யலாம், ஏனெனில் ஒவ்வொரு கூறின் accept முறையும் அந்த கூறு வகைக்கான பொருத்தமான பார்வையாளர் முறையை (visitor method) அழைக்கிறது. + +## 11.3 எடுத்துக்காட்டு + +```javascript +class GymMember { + constructor(name, subscriptionType, fitnessScore) { + this.name = name; + this.subscriptionType = subscriptionType; + this.fitnessScore = fitnessScore; + } + + accept(visitor) { + visitor.visit(this); + } + + getName() { + return this.name; + } + + getSubscriptionType() { + return this.subscriptionType; + } + + getFitnessScore() { + return this.fitnessScore; + } + + setFitnessScore(score) { + this.fitnessScore = score; + } +} + +class FitnessEvaluation { + visit(member) { + member.setFitnessScore(member.getFitnessScore() + 10); + } +} + +class MembershipDiscount { + visit(member) { + if (member.getSubscriptionType() === 'Premium') { + console.log(`${member.getName()}: ஃபிட்னஸ் ஸ்கோர் - ${member.getFitnessScore()}, மெம்பர்ஷிப் வகை - ${member.getSubscriptionType()}, 10% தள்ளுபடிக்கு தகுதியானவர்! (Eligible for a 10% discount!)`); + } else { + console.log(`${member.getName()}: ஃபிட்னஸ் ஸ்கோர் - ${member.getFitnessScore()}, மெம்பர்ஷிப் வகை - ${member.getSubscriptionType()}, தள்ளுபடிக்கு தகுதியற்றவர். (Not eligible for a discount.)`); + } + } +} + +function run() { + const gymMembers = [ + new GymMember("Alice", "Basic", 80), + new GymMember("Bob", "Premium", 90), + new GymMember("Eve", "Basic", 85) + ]; + + const fitnessEvaluation = new FitnessEvaluation(); + const membershipDiscount = new MembershipDiscount(); + + for (let i = 0; i < gymMembers.length; i++) { + const member = gymMembers[i]; + + member.accept(fitnessEvaluation); + member.accept(membershipDiscount); + } +} + +run(); +``` + + --- diff --git a/ta/design-patterns/creational-patterns.md b/ta/design-patterns/creational-patterns.md new file mode 100644 index 00000000..32b997e5 --- /dev/null +++ b/ta/design-patterns/creational-patterns.md @@ -0,0 +1,416 @@ +--- +layout: editorial +title: ஜாவாஸ்கிரிப்டில் உருவாக்க வடிவமைப்பு முறைகள் (Creational Design Patterns in Javascript) +description: உருவாக்க வடிவமைப்பு முறைகள் (Creational design patterns) பொருள்களை உருவாக்கும் வழிமுறைகளில் (object creation mechanisms) கவனம் செலுத்துகின்றன +chapter: 23 +pageNumber: 196 +--- + +# உருவாக்க வடிவமைப்பு முறைகள் (Creational Design Patterns) + +உருவாக்க வடிவமைப்பு முறைகள் பொருள்களை உருவாக்கும் வழிமுறைகளில் கவனம் செலுத்துகின்றன + +## 1. தொழிற்சாலை முறை (Factory Method) + +தொழிற்சாலை செயல்பாடு (factory function) என்பது ஒரு பொருளை உருவாக்கி அதைத் திரும்பப் பெறும் ஒரு செயல்பாடாகும். இது ஒரு உருவாக்க வடிவமைப்பு முறையாகும், இது பயன்படுத்த வேண்டிய சரியான வகுப்பு (class) அல்லது கன்ஸ்ட்ரக்டரைக் (constructor) குறிப்பிடாமல் பொருள்களை உருவாக்க உங்களை அனுமதிக்கிறது. இது பொருளை உருவாக்கும் தர்க்கத்தை (logic) மையப்படுத்துகிறது, பல்வேறு வகையான பொருள்களை உருவாக்குவதில் நெகிழ்வுத்தன்மையை (flexibility) அனுமதிக்கிறது. உங்களிடம் ஒரு வலைத்தளம் (website) உள்ளது என்று வைத்துக்கொள்வோம், மேலும் html பொருள்களை எளிதாக உருவாக்கவும் அவற்றை DOM இல் சேர்க்கவும் உங்களை அனுமதிக்கும் ஒரு முறையை நீங்கள் உருவாக்க விரும்புகிறீர்கள். இதற்கு தொழிற்சாலை (factory) சரியான தீர்வாகும், மேலும் இதை நாம் எவ்வாறு செயல்படுத்தலாம் என்பது இங்கே + +### 1.1. தொழிற்சாலை முறையின் கூறுகள் (Components of the Factory Method) + +*உருவாக்குபவர் (Creator)*: இது புதிய தயாரிப்புகளை (products) உருவாக்கும் தொழிற்சாலையில் செயல்படுத்தப்படும் முறையாகும். + +*சுருக்கத் தயாரிப்பு (Abstract Product)*: உருவாக்கப்படும் தயாரிப்புக்கான இடைமுகம் (interface). + +*கான்கிரீட் தயாரிப்பு (Concrete Product)*: இது உருவாக்கப்படும் உண்மையான பொருளாகும். + +### 1.2. தொழிற்சாலை முறையின் நன்மைகள் + +**பொருளை உருவாக்குவதற்கான சுருக்கம் (Abstraction of Object Creation)** + +இது ஒரு பொருளை உருவாக்குவதன் சிக்கலை நீக்குகிறது, கிளையன்ட் (client) குறியீட்டை உருவாக்கப்பட்ட பொருள்களில் மட்டும் கவனம் செலுத்த அனுமதிக்கிறது. + +**நெகிழ்வுத்தன்மை மற்றும் தனிப்பயனாக்கம் (Flexibility and Customization)** + +தொழிற்சாலைகள் பொருளை உருவாக்கும் செயல்முறையைத் தனிப்பயனாக்குவதை (customization) செயல்படுத்துகின்றன, உருவாக்கப்பட்ட பொருள்களில் மாறுபாடுகளை அனுமதிக்கின்றன. + +**உருவாக்கும் தர்க்கத்தின் உறைப்பொதியாக்கம் (Encapsulation of Creation Logic)** + +உருவாக்கும் தர்க்கம் தொழிற்சாலைக்குள் இணைக்கப்பட்டுள்ளது (encapsulated), இதனால் கிளையன்ட் குறியீட்டைப் பாதிக்காமல் உருவாக்கும் செயல்முறையை மாற்றுவது அல்லது நீட்டிப்பது (extend) எளிதாகிறது. + +**சிக்கலான பொருள் உருவாக்கம் (Complex Object Creation)** + +பொருள்களை உருவாக்குவது சிக்கலானதாக இருக்கும்போது, பல படிகளை உள்ளடக்கியிருக்கும்போது அல்லது சில நிபந்தனைகளைப் பூர்த்தி செய்ய வேண்டியிருக்கும் போது தொழிற்சாலைகள் பயனுள்ளதாக இருக்கும். + +### 1.3. எடுத்துக்காட்டு + +```javascript + function elementFactory(type, text, color){ + const newElement = document.createElement(type) + newElement.innerText = text + newElement.style.color = color + document.body.append(newElement) + + + function setText(newText) { + newElement.innerText = newText; + } + + function setColor(newColor) { + newElement.innerText = newColor; + } + + return { + newElement, + setText, + setColor, + } + + } + +const h1Tag = elementFactory('h1','Initial Text','Blue'); + +h1Tag.setText('Hello world'); + +h1Tag.setColor('Red'); +``` + +## 2. சுருக்க தொழிற்சாலை முறை (Abstract Factory Method) + +சுருக்க தொழிற்சாலைகள் (Abstract factories) மற்றொரு உருவாக்க வடிவமைப்பு முறையாகும். இதன் முக்கிய குறிக்கோள், தொடர்புடைய அல்லது சார்புடைய (dependent) பொருள்களின் குடும்பங்களை (families) அவற்றின் கான்கிரீட் வகுப்புகளைக் (concrete classes) குறிப்பிடாமல் உருவாக்குவதற்கான ஒரு இடைமுகத்தை (interface) வழங்குவதாகும். உருவாக்கப்பட்ட பொருள்கள் இணக்கமாக (compatible) இருப்பதையும் ஒன்றாக வேலை செய்வதையும் இந்த முறை உறுதி செய்கிறது. + +### 2.1. ஒரு சுருக்க தொழிற்சாலையின் 4 கூறுகள் + +*சுருக்க தொழிற்சாலைகள் (Abstract Factories)* + +இது தொடர்புடைய பொருள்களின் குடும்பங்களான (எ.கா. UI கூறுகள்) சுருக்கத் தயாரிப்புகளை உருவாக்குவதற்கான இடைமுகத்தை வரையறுக்கிறது. சுருக்க தொழிற்சாலை குடும்பத்தில் உள்ள ஒவ்வொரு வகை தயாரிப்புகளுக்கும் உருவாக்கும் முறைகளை அறிவிக்கிறது. + +*கான்கிரீட் தொழிற்சாலைகள் (Concrete Factories)* + +இவை சுருக்க தொழிற்சாலை இடைமுகத்தை செயல்படுத்தும் வகுப்புகளாகும், கான்கிரீட் தயாரிப்புகளை உருவாக்குவதற்கான குறிப்பிட்ட செயலாக்கங்களை (implementations) வழங்குகின்றன. ஒவ்வொரு கான்கிரீட் தொழிற்சாலையும் தொடர்புடைய தயாரிப்புகளின் குடும்பத்தை உருவாக்குகிறது (எ.கா. UI தொழிற்சாலை ஒரு பொத்தான் (button) அல்லது செக்பாக்ஸை (checkbox) உருவாக்கலாம்). + +*சுருக்க தயாரிப்புகள் (Abstract Products)* + +இவை சுருக்க தொழிற்சாலை உருவாக்கும் தயாரிப்புகளுக்கான இடைமுகங்கள் அல்லது அடிப்படை வகுப்புகளாகும். குடும்பத்தில் உள்ள ஒவ்வொரு தயாரிப்பு வகையும் அதன் சொந்த சுருக்க தயாரிப்பு வரையறையைக் (definition) கொண்டுள்ளது (எ.கா., பொத்தான், செக்பாக்ஸ்). + +*கான்கிரீட் தயாரிப்புகள் (Concrete Products)* + +இவை சுருக்க தயாரிப்புகளின் உண்மையான செயலாக்கங்களாகும். ஒவ்வொரு கான்கிரீட் தொழிற்சாலையும் கான்கிரீட் தயாரிப்புகளின் சொந்தத் தொகுப்பை உருவாக்குகிறது. கான்கிரீட் தயாரிப்புகள் அவற்றின் குடும்பத்திற்காக வரையறுக்கப்பட்ட சுருக்க தயாரிப்பு இடைமுகங்களை செயல்படுத்துகின்றன (எ.கா., HTMLButton, WindowsButton). + +### 2.2. சுருக்க தொழிற்சாலைகளின் நன்மைகள் + +**நிலைத்தன்மை (Consistency)** + +உருவாக்கப்பட்ட பொருள்கள் இணக்கமாக இருப்பதையும் நிலையான தீம் (theme) அல்லது பாணியைப் (style) பின்பற்றுவதையும் இது உறுதி செய்கிறது. + +**பொறுப்புகளை தனிமைப்படுத்துதல் (Isolation of Responsibilities)** + +இது கிளையன்ட் குறியீட்டிலிருந்து பொருள்களை உருவாக்குவதைத் தனிமைப்படுத்துகிறது, கவலைகளைச் சுத்தமாகப் பிரிப்பதை (clean separation of concerns) ஊக்குவிக்கிறது. + +**நெகிழ்வுத்தன்மை மற்றும் அளவிடுதல் (Flexibility and Scalability)** + +தற்போதுள்ள கிளையன்ட் குறியீட்டை மாற்றாமல் புதிய தயாரிப்பு குடும்பங்களை எளிதாகச் சேர்க்க இது அனுமதிக்கிறது. + +### 2.3. எடுத்துக்காட்டு + +```javascript + // Abstract Factory: UIFactory +class UIFactory { + createButton() { + throw new Error('createButton method must be overridden'); + } + + createCheckbox() { + throw new Error('createCheckbox method must be overridden'); + } +} + +// Concrete Factory: WindowsUIFactory +class WindowsUIFactory extends UIFactory { + createButton() { + return new WindowsButton(); + } + + createCheckbox() { + return new WindowsCheckbox(); + } +} + +// Concrete Factory: MacUIFactory +class MacUIFactory extends UIFactory { + createButton() { + return new MacButton(); + } + + createCheckbox() { + return new MacCheckbox(); + } +} + +// Abstract Product: Button +class Button { + render() { + throw new Error('render method must be overridden'); + } +} + +// Concrete Product: WindowsButton +class WindowsButton extends Button { + render() { + console.log('Rendering a Windows button'); + } +} + +// Concrete Product: MacButton +class MacButton extends Button { + render() { + console.log('Rendering a Mac button'); + } +} + +// Abstract Product: Checkbox +class Checkbox { + render() { + throw new Error('render method must be overridden'); + } +} + +// Concrete Product: WindowsCheckbox +class WindowsCheckbox extends Checkbox { + render() { + console.log('Rendering a Windows checkbox'); + } +} + +// Concrete Product: MacCheckbox +class MacCheckbox extends Checkbox { + render() { + console.log('Rendering a Mac checkbox'); + } +} + +// Usage +const windowsFactory = new WindowsUIFactory(); +const macFactory = new MacUIFactory(); + +const windowsButton = windowsFactory.createButton(); +windowsButton.render(); // Output: Rendering a Windows button + +const macCheckbox = macFactory.createCheckbox(); +macCheckbox.render(); // Output: Rendering a Mac checkbox +``` + +## 3. பில்டர் (Builder) + +பில்டரின் (Builder) குறிக்கோள் ஒரு பொருளின் கட்டுமானத்தை அதன் பிரதிநிதித்துவத்திலிருந்து (representation) பிரிப்பதாகும். பில்டர் முறை அடிப்படையில் என்ன செய்கிறது என்றால், பொருளின் வகை மற்றும் உள்ளடக்கத்தை மட்டுமே அனுப்புவதன் மூலம் ஒரு சிக்கலான பொருளை உருவாக்க கிளையன்ட்டை அனுமதிக்கிறது. கட்டுமான விவரங்களைப் பற்றி கிளையன்ட் கவலைப்படத் தேவையில்லை. + +## 3.1. பில்டரின் 4 கூறுகள் + +*பில்டர் (Builder)* + +பொருளின் பல்வேறு பகுதிகளை உருவாக்குவதற்கான தொடர்ச்சியான முறைகளை (methods) பில்டர் பொதுவாகக் கொண்டுள்ளது. + +*கான்கிரீட் பில்டர் (Concrete Builder)* + +பொருளின் பகுதிகளை உருவாக்க பில்டர் இடைமுகத்திலிருந்து முறைகளைச் செயல்படுத்துகிறது + +*இயக்குநர் (Director) (விருப்பத் தேர்வு - Optional)* + +இது எப்போதும் அவசியமில்லை ஆனால் ஒரு குறிப்பிட்ட கட்டுமான செயல்முறையைப் பயன்படுத்தி இறுதிப் பொருளை உருவாக்க உதவும் + +*பொருள் (Object)* + +இறுதித் தயாரிப்பின் பிரதிநிதித்துவம் (Representation). பில்டரால் கட்டப்பட்ட பகுதிகளைக் கொண்டுள்ளது + +## 3.2. பில்டர் முறையின் நன்மைகள் + +**கவலைகளைப் பிரித்தல் (Separation of Concerns)** + +பில்டர் முறை ஒரு சிக்கலான பொருளின் கட்டுமானத்தை அதன் பிரதிநிதித்துவத்திலிருந்து பிரிக்கிறது, பில்டர்களின் வெவ்வேறு செயலாக்கங்களை (implementations) உள் பிரதிநிதித்துவத்தை (internal representation) மாற்ற அனுமதிக்கிறது. + +**நெகிழ்வான பொருள் உருவாக்கம் (Flexible Object Creation)** + +ஒரு பொதுவான கட்டுமானச் செயல்முறையைப் பயன்படுத்துவதன் மூலம் ஒரு சிக்கலான பொருளின் வெவ்வேறு கட்டமைப்புகளை (configurations) உருவாக்க இது அனுமதிக்கிறது. பொருளின் குறிப்பிட்ட மாறுபாடுகளை (variations) உருவாக்க பில்டர்களை வடிவமைக்கலாம் (tailored). + +**மேம்படுத்தப்பட்ட வாசிப்புத்திறன் (Improved Readability)** + +ஒரு பில்டரைப் பயன்படுத்துவது ஒரு பொருளை உருவாக்குவதற்குத் தேவையான படிகளைத் தெளிவாக கோடிட்டுக் காட்டுவதன் மூலம் குறியீட்டின் வாசிப்புத்திறனை (code readability) மேம்படுத்தலாம். இறுதிப் பொருளுக்கு ஒவ்வொரு படியும் என்ன பங்களிக்கிறது என்பதைப் புரிந்துகொள்வது எளிது. + +**அளவுருவாக்கப்பட்ட கட்டுமானம் (Parameterized Construction)** + +கட்டுமானப் படிகளுக்கு அளவுருக்களை (parameters) அனுப்புவதன் மூலம் ஒரு பொருளை உருவாக்க பில்டர்கள் உங்களை அனுமதிக்கிறார்கள், பொருளின் உருவாக்கம் மற்றும் கட்டமைப்பின் மீது நுணுக்கமான கட்டுப்பாட்டை (fine-grained control) இயக்குகிறார்கள். + +**மறுபயன்பாடு (Reusability)** + +குறியீடு மறுபயன்பாட்டை (code reuse) ஊக்குவிக்கும் மற்றும் கட்டுமான தர்க்கத்தின் நகலெடுப்பைக் (duplication) குறைக்கும் வகையில், வெவ்வேறு கட்டமைப்புகளுடன் சிக்கலான பொருளின் பல நிகழ்வுகளை (instances) உருவாக்க பில்டர்களை மீண்டும் பயன்படுத்தலாம். + +## 3.3. எடுத்துக்காட்டு + +```Javascript +//Builder +class ComputerBuilder { + buildCPU() {} + buildRAM() {} + buildStorage() {} + getResult() {} +} + +//Concrete Builders +class GamingComputerBuilder extends ComputerBuilder { + // Implement specific steps to build a gaming computer +} + +class OfficeComputerBuilder extends ComputerBuilder { + // Implement specific steps to build an office computer +} + +//Object class +class Computer { + constructor() { + this.parts = []; + } + + addPart(part) { + this.parts.push(part); + } +} + +// Director (Optional) +class ComputerAssembler { + constructor(builder) { + this.builder = builder; + } + + assembleComputer() { + this.builder.buildCPU(); + this.builder.buildRAM(); + this.builder.buildStorage(); + return this.builder.getResult(); + } +} +``` + +## 4. சிங்கிள்டன் (Singleton) + +சிங்கிள்டன் (Singleton) என்பது ஒரு முறை மட்டுமே நிறுவப்படக்கூடிய (instantiated) ஒரு பொருளாகும் (object). கணினி அளவிலான (system wide) செயல்களை ஒற்றை மைய இடத்திலிருந்து ஒருங்கிணைக்க வேண்டியிருக்கும் போது சிங்கிள்டன்கள் பயனுள்ளதாக இருக்கும். சிங்கிள்டன்கள் குளோபல் மாறிகளுக்கான (global variables) தேவையைக் குறைக்கின்றன, இது ஜாவாஸ்கிரிப்டில் மிகவும் முக்கியமானது, ஏனெனில் இது பெயர்வெளி மாசுபாட்டைக் (namespace pollution) கட்டுப்படுத்துகிறது. + +## 4.1. ஒரு சிங்கிள்டனின் கூறுகள் + +*அநாமதேய செயல்பாடு (Anonymous Function)* + +ஒரு அநாமதேய செயல்பாட்டைப் பயன்படுத்தி சிங்கிள்டன் செயல்படுத்தப்படுகிறது + +*getInstance செயல்பாடு (getInstance Function)* + +இது தனித்துவமான (unique) நிறுவப்பட்ட (instantiated) பொருளைத் திரும்பப் பெறும் ஒரு செயல்பாடாகும் + +*கன்ஸ்ட்ரக்டர் (Constructor) (விருப்பத் தேர்வு)* + +ஜாவாஸ்கிரிப்டில், சிங்கிள்டன் முறையைச் செயல்படுத்த ஒரு கன்ஸ்ட்ரக்டர் தேவையில்லை ஆனால் ஒரு கன்ஸ்ட்ரக்டரைக் கொண்டிருப்பது பொதுவானது, ஏனெனில் இது சிங்கிள்டனை உள்ளமைக்கவும் (configure) துவக்க தர்க்கத்தை (initialization logic) சேர்க்கவும் உங்களை அனுமதிக்கிறது. + +## 4.2. ஒரு சிங்கிள்டனின் நன்மைகள் + +**குளோபல் மாறிகளைக் குறைத்தல் (Reduce Global Variables)** + +சிங்கிள்டன்கள் உங்கள் நிரலில் தேவைப்படும் குளோபல் மாறிகளின் எண்ணிக்கையைக் குறைக்க உதவும், சிறந்த குறியீட்டு அமைப்பு மற்றும் பராமரிப்பை (maintainability) ஊக்குவிக்கும். + +**நினைவகத் திறன் (Memory Efficient)** + +ஒரு சிங்கிள்டன் ஒரே நேரத்தில் ஒரே ஒரு நிகழ்வு (instance) மட்டுமே இருப்பதை உறுதி செய்வதால், ஒரே வகுப்பின் (class) பல நிகழ்வுகளைக் கொண்டிருப்பதை நீங்கள் தவிர்ப்பதால் நினைவகம் சேமிக்கப்படுகிறது. + +**அணுகலின் உலகளாவிய புள்ளி (Global Point of Access)** + +சிங்கிள்டன்கள் நிகழ்விற்கான அணுகலின் உலகளாவிய புள்ளியை (global point of access) வழங்குகின்றன. இது நிரலின் மற்ற பகுதிகளை அதே நிகழ்வைச் சுற்றிச் செல்லாமலேயே அணுகவும் பயன்படுத்தவும் அனுமதிக்கிறது. + +**வளப் பகிர்வு (Resource Sharing)** + +பகிரப்பட்ட வளங்களை (shared resources) நிர்வகிப்பது போன்ற பணிகளுக்கு சிங்கிள்டன்கள் மிகவும் பயனுள்ளதாக இருக்கும். தரவுத்தள இணைப்புகள் (database connections), கோப்பு கையாளுபவர்கள் (file handlers) மற்றும் த்ரெட் பூல்களை (thread pools) நிர்வகிக்க சிங்கிள்டன்களைப் பயன்படுத்தலாம், இந்த வளங்கள் பயன்பாடு முழுவதும் திறமையாகப் பகிரப்படுவதை உறுதிசெய்கிறது. + +## 4.3. எடுத்துக்காட்டு + +```javascript +class Singleton { + constructor() { + const privateVariable = 'This is a private variable'; + + function privateMethod() { + console.log('This is a private method.'); + } + + return { + publicMethod: function() { + console.log('This is a public method.'); + }, + publicVariable: 'I am public' + }; + } + + static getInstance() { + if (!Singleton.instance) { + Singleton.instance = new Singleton(); + } + return Singleton.instance; + } +} + +const singletonInstance1 = Singleton.getInstance(); +const singletonInstance2 = Singleton.getInstance(); + +console.log(singletonInstance1 === singletonInstance2); // Outputs: true +``` + +## 5. முன்மாதிரி (Prototype) + +முன்மாதிரி (Prototype) முறை என்பது பரம்பரை (inheritance) முறையை செயல்படுத்துவதற்கான ஒரு மாற்று வழியாகும், ஆனால் முக்கிய வேறுபாடு என்னவென்றால், ஒரு வகுப்பிலிருந்து (class) பண்புகளைப் பெறுவதற்குப் பதிலாக, பொருள்கள் (objects) முன்மாதிரி பொருளிலிருந்து (prototype object) பண்புகளைப் பெறுகின்றன. முன்மாதிரி முறை பண்புகள் முறை (properties pattern) என்றும் குறிப்பிடப்படுகிறது மற்றும் ஜாவாஸ்கிரிப்ட் முன்மாதிரிகளுக்கு (prototypes) பூர்வீக ஆதரவைக் (native support) கொண்டுள்ளது. ஜாவாஸ்கிரிப்டில், ஒவ்வொரு பொருளுக்கும் ஒரு முன்மாதிரி (மற்றொரு பொருளுக்கான குறிப்பு (reference)) உள்ளது. பொருளில் இல்லாத ஒரு பண்பை அணுக நீங்கள் முயற்சிக்கும்போது ஜாவாஸ்கிரிப்ட் அதை பொருளின் முன்மாதிரியில் தேடும், அதைக் கண்டுபிடிக்கும் வரை அல்லது சங்கிலியின் முடிவை அடையும் வரை முன்மாதிரி சங்கிலியில் (prototype chain) தொடரும். + +## 5.1. முன்மாதிரி முறையின் கூறுகள் + +*முன்மாதிரி பொருள் (Prototype Object)* + +அனைத்து புதிய நிகழ்வுகளும் (instances) பெறும் (inherit) பண்புகள் (properties) மற்றும் முறைகளைக் (methods) கொண்டுள்ளது + +*கிளையன்ட் (Client)* + +முன்மாதிரியின் அடிப்படையில் புதிய பொருள்களை உருவாக்குவதற்கு கிளையன்ட் பொறுப்பாகும். கிளையன்ட் முன்மாதிரியின் அடிப்படையில் புதிய நிகழ்வுகளை உருவாக்கி அவற்றின் பண்புகளை அதற்கேற்ப மாற்றியமைக்கலாம். + +*குளோன்/உருவாக்க பொறிமுறை (Clone/Creation Mechanism)* + +முன்மாதிரியின் அடிப்படையில் புதிய பொருளை உருவாக்கப் பயன்படுத்தப்படும் பொறிமுறை. ஜாவாஸ்கிரிப்டில் இதை `Object.create()` செயல்பாட்டைப் பயன்படுத்தி அடையலாம். + +## 5.2. முன்மாதிரி முறையின் நன்மைகள் + +**திறமையான நிகழ்வு உருவாக்கம் (Efficient Instance Creation)** + +முன்மாதிரியின் புதிய நிகழ்வுகளை உருவாக்குவது பாரம்பரிய வகுப்புகள் மற்றும் கன்ஸ்ட்ரக்டர்களைப் (constructors) பயன்படுத்துவதை விட மிகவும் திறமையானது. முன்மாதிரியை குளோனிங் (cloning) செய்வதன் மூலம் பொருள்கள் உருவாக்கப்படுகின்றன, இது வகுப்புகள் மற்றும் துவக்க தர்க்கத்தை (initialization logic) அமைப்பதற்கான தேவையைக் குறைக்கிறது. + +**குறியீடு மறுபயன்பாடு (Code Reusability)** + +முன்மாதிரி முறை, ஒரு முன்மாதிரி பொருளில் இயல்புநிலை பண்புகள் மற்றும் முறைகளின் தொகுப்பை (default properties and methods) வரையறுக்க உங்களை அனுமதிக்கிறது. இது பல நிகழ்வுகளைக் குறியீட்டை நகலெடுக்காமல் ஒரே நடத்தை மற்றும் கட்டமைப்பைப் (behaviour and structure) பகிர அனுமதிக்கிறது. இது நினைவகப் பயன்பாட்டைக் குறைக்கிறது, ஏனெனில் ஒவ்வொரு நிகழ்வும் முன்மாதிரிகளின் பண்புகளின் நகல்களைச் சேமிக்க வேண்டியதில்லை. + +**நெகிழ்வான பொருள் உருவாக்கம் (Flexible Object Creation)** + +முன்மாதிரி முறையைப் பயன்படுத்தி உருவாக்கப்பட்ட பொருள்களின் பண்புகளை மாற்றுவதன் மூலமோ அல்லது நிகழ்வுக்குக் குறிப்பிட்ட புதிய பண்புகளைச் சேர்ப்பதன் மூலமோ எளிதாகத் தனிப்பயனாக்கலாம் (customized). + +**டைனமிக் ரன்டைம் மாற்றங்கள் (Dynamic Runtime Changes)** + +இயக்க நேரத்தில் (runtime) முன்மாதிரி பொருளில் செய்யப்படும் மாற்றங்கள் முன்மாதிரியின் அடிப்படையில் அனைத்து நிகழ்வுகளிலும் (instances) பிரதிபலிக்கின்றன. இந்த நடத்தை முன்மாதிரியின் புதுப்பிப்புகள் மற்றும் மாற்றங்களை அனுமதிக்கிறது, அதே முன்மாதிரியைப் பகிரும் அனைத்து நிகழ்வுகளையும் பாதிக்கிறது. + +## 5.3. எடுத்துக்காட்டு + +```javascript +const cameraPrototype = { + model = 'default', + make = 'default', + shutter: function () { + console.log(`The ${this.make} ${this.model} has taken a photo`); + } +}; + +const camera1 = Object.create(cameraPrototype); +camera1.model = 'X-Pro 3'; +camera1.make = 'Fujifilm'; + +const camera1 = Object.create(cameraPrototype); +camera1.model = 'R5'; +camera1.make = 'Canon'; +``` + +--- diff --git a/ta/design-patterns/structural-patterns.md b/ta/design-patterns/structural-patterns.md new file mode 100644 index 00000000..a1723ac4 --- /dev/null +++ b/ta/design-patterns/structural-patterns.md @@ -0,0 +1,650 @@ +--- +layout: editorial +title: ஜாவாஸ்கிரிப்டில் கட்டமைப்பு வடிவமைப்பு முறைகள் (Structural Design Patterns in Javascript) +description: வகுப்புகள் (classes) மற்றும் பொருள்கள் (objects) பெரிய கட்டமைப்புகளை உருவாக்க எவ்வாறு இயற்றப்படுகின்றன (composed) என்பதில் கவனம் செலுத்துகின்றன +chapter: 23 +pageNumber: 205 +--- + +# கட்டமைப்பு வடிவமைப்பு முறைகள் (Structural Design Patterns) + +வகுப்புகள் மற்றும் பொருள்கள் பெரிய கட்டமைப்புகளை உருவாக்க எவ்வாறு இயற்றப்படுகின்றன என்பதில் கவனம் செலுத்துகின்றன + +## 1. அடாப்டர் (Adapter) + +அடாப்டர் (Adapter) என்பது ஒரு கட்டமைப்பு வடிவமைப்பு முறையாகும், இது வெவ்வேறு முறைகளைக் கொண்ட வெவ்வேறு இடைமுகங்களை (interfaces) அவற்றின் குறியீட்டை மாற்றாமல் ஒன்றாகச் செயல்படச் செய்கிறது. அடாப்டரின் நோக்கம் இரண்டு பொருந்தாத (incompatible) இடைமுகங்களைத் தடையின்றி ஒன்றாகச் செயல்படச் செய்வதாகும். + +## 1.1 அடாப்டரின் கூறுகள் + +*இலக்கு இடைமுகம்/வகுப்பு (Target Interface/Class)* + +இது கிளையன்ட் (client) வேலை செய்யும் இடைமுகம் அல்லது வகுப்பாகும். கிளையன்ட் குறியீடு பயன்படுத்தும் அனைத்து முறைகள் மற்றும் பண்புகளை இது கொண்டுள்ளது. + +*அடாப்டீ (Adaptee)* + +அடாப்டீ என்பது பழைய இடைமுகம்/வகுப்பாகும், இது புதிய இடைமுகம்/வகுப்புடன் பொருந்தாத பண்புகள் மற்றும் முறைகளைக் கொண்டுள்ளது. + +*அடாப்டர் (Adapter)* + +அடாப்டர் என்பது அடாப்டீ மற்றும் இலக்கு இடைமுகம்/வகுப்பிற்கும் இடையிலான இடைவெளியைக் குறைக்கும் ஒன்றாகும் + + +## 1.2. அடாப்டர்களின் நன்மைகள் + +**எளிதான ஒருங்கிணைப்பு (Easy Integration)** + +புதிய குறியீடு அல்லது அமைப்புகள் (systems) ஏற்கனவே உள்ளவற்றுடன் தொடர்புகொள்வதற்கான எளிதான வழியை அடாப்டர்கள் உருவாக்குகின்றன. அடாப்டர்களைப் பயன்படுத்துவதன் மூலம், புதிய குறியீட்டை ஒருங்கிணைப்பது மென்மையானது மற்றும் பிழையற்றது. + +**பொருந்தக்கூடிய தன்மை மற்றும் மறுபயன்பாடு (Compatibility and Reusability)** + +அடாப்டர்கள் குறியீடு மறுபயன்பாட்டை (code reuse) ஊக்குவிக்கின்றன மற்றும் பழைய குறியீட்டைப் புதிய குறியீட்டுடன் இணக்கமாக்குவதன் மூலம் ஏற்கனவே உள்ள குறியீட்டின் பயன்பாட்டினை நீட்டிக்கின்றன. + +**படிப்படியான அமைப்பு ஒருங்கிணைப்பு (Gradual System Integration)** + +ஒரு புதிய அமைப்பு படிப்படியாகச் செயல்படுத்தப்பட வேண்டிய சூழ்நிலைகளில், அடாப்டர்கள் இடைத்தரகர்களாகச் (intermediaries) செயல்படலாம், தற்போதுள்ள அமைப்புடன் பொருந்தக்கூடிய தன்மையைப் பராமரிக்கும் அதே வேளையில் புதிய அம்சங்களை மெதுவாக உள்ளே வர அனுமதிக்கிறது. + +**மேம்படுத்தப்பட்ட சோதிக்கும் திறன் (Improved Testability)** + +கிளையன்ட் குறியீட்டைச் சோதிக்கும் போது அடாப்டீயை மாக்கிங் (mocking) அல்லது ஸ்டப்பிங் (stubbing) செய்ய அனுமதிப்பதன் மூலம் அடாப்டர்கள் எளிதாகச் சோதனை செய்ய உதவுகின்றன. இது கிளையன்ட் குறியீட்டின் சோதிக்கும் திறனை மேம்படுத்துகிறது மற்றும் புரிந்துகொள்ளக்கூடிய அலகு சோதனைகளை (unit tests) எழுதுவதற்கு உதவுகிறது. + + +## 1.3. எடுத்துக்காட்டு + +```javascript +// Adaptee: EU charging brick +class EUChargingBrick { + chargeWithEUPlug() { + console.log('Charging with EU plug'); + } +} + +// Adaptee: US charging brick +class USChargingBrick { + chargeWithUSPlug() { + console.log('Charging with US plug'); + } +} + +// Target: Common charging interface expected by the client +class ChargingInterface { + charge() { + console.log('Charging...'); + } +} + +// Adapter for EU charging brick +class EUChargingAdapter extends ChargingInterface { + constructor(euChargingBrick) { + super(); + this.euChargingBrick = euChargingBrick; + } + + charge() { + this.euChargingBrick.chargeWithEUPlug(); + } +} + +// Adapter for US charging brick +class USChargingAdapter extends ChargingInterface { + constructor(usChargingBrick) { + super(); + this.usChargingBrick = usChargingBrick; + } + + charge() { + this.usChargingBrick.chargeWithUSPlug(); + } +} + +// Client +function chargeDevice(chargingInterface) { + chargingInterface.charge(); +} + +// Usage +const euChargingBrick = new EUChargingBrick(); +const euAdapter = new EUChargingAdapter(euChargingBrick); + +const usChargingBrick = new USChargingBrick(); +const usAdapter = new USChargingAdapter(usChargingBrick); + +console.log('Charging with EU charging brick:'); +chargeDevice(euAdapter); + +console.log('Charging with US charging brick:'); +chargeDevice(usAdapter); +``` + +## 2. பாலம் (Bridge) + +பிரிட்ஜ் (Bridge - பாலம்) என்பது ஒரு கட்டமைப்பு வடிவமைப்பு முறையாகும், இது மிகப் பெரிய வகுப்பை (class) இரண்டு தனித்தனி படிநிலைகளாகப் (hierarchies) பிரிக்க வடிவமைக்கப்பட்டுள்ளது, அவை சுயாதீனமாக (independendently) உருவாக்கப்படலாம். இரண்டு படிநிலைகள் சுருக்க நிலை (Abstraction level) மற்றும் செயலாக்க நிலை (Implementation level) என்று குறிப்பிடப்படுகின்றன. அடிப்படையில், உங்களிடம் சில செயல்பாடுகளின் பல மாறுபாடுகளைக் கொண்ட ஒரு வகுப்பு இருந்தால், வகுப்பைப் பிரித்து இரண்டு புரிந்துகொள்ளக்கூடிய படிநிலைகளாக ஒழுங்கமைக்க நீங்கள் பிரிட்ஜ் முறையைப் பயன்படுத்தலாம். + +## 2.1. பாலத்தின் கூறுகள் (Components of the Bridge) + +*சுருக்கம் (Abstraction)* + +இது உயர்மட்ட இடைமுகம் (high-level interface) அல்லது சுருக்கம் ஆகும். கிளையன்ட்கள் பயன்படுத்தும் சுருக்கச் செயல்பாட்டை இது வரையறுக்கிறது. + +*சுத்திகரிக்கப்பட்ட சுருக்கம் (Refined Abstraction)* + +இவை சுருக்க அடுக்கின் துணைப்பிரிவுகள் (subclasses) அல்லது நீட்டிப்புகள் ஆகும். இவை கூடுதல் அம்சங்களை அல்லது மேம்பாடுகளை வழங்குகின்றன. இது சுருக்கத்தால் வரையறுக்கப்பட்ட செயல்பாட்டை நீட்டிக்கிறது. + +*செயல்படுத்துபவர் (Implementor)* + +இது செயலாக்க முறைகளை வரையறுக்கும் இடைமுகமாகும், இது பொதுவாகச் சுருக்க இடைமுகத்தை (abstraction interface) பிரதிபலிக்காது, ஆனால் இது சுருக்கம் நம்பியிருக்கும் கீழ்-நிலை இடைமுகமாகும் (lower-level interface). + +*கான்கிரீட் செயல்படுத்துபவர் (Concrete Implementor)* + +செயல்படுத்துபவர் இடைமுகத்தை செயல்படுத்தும் கான்கிரீட் வகுப்புகள். இந்த வகுப்புகள் செயல்படுத்துபவர் இடைமுகத்தால் வரையறுக்கப்பட்ட முறைகளின் குறிப்பிட்ட செயலாக்கங்களை வழங்குகின்றன. + +## 2.2. பிரிட்ஜ் முறையின் நன்மைகள் + +**சுருக்கத்தை செயலாக்கத்திலிருந்து பிரிக்கிறது (Decouples Abstraction from Implementation)** + +பிரிட்ஜ் முறையின் முதன்மை நன்மை என்னவென்றால், அது செயலாக்க அடுக்கிலிருந்து சுருக்க அடுக்கைப் பிரிக்கிறது. இது இரண்டு பிரிவுகளையும் சுயாதீனமாக உருவாக்க அனுமதிக்கிறது, குறியீட்டுத் தளத்தை (code base) மாற்றுவதை எளிதாக்குகிறது. + +**பராமரிப்பை மேம்படுத்துகிறது (Improves Maintainability)** + +குறியீட்டுத் தளம் இரண்டு பிரிவுகளாகப் பிரிக்கப்பட்டுள்ளதால், கணினியின் ஒரு பகுதியில் மாற்றங்களைச் செய்வது மற்ற பகுதியை பாதிக்க வாய்ப்பில்லை. இது குறியீட்டுத் தளத்தைப் பராமரிப்பதை எளிதாக்குகிறது மற்றும் திறமையானதாக ஆக்குகிறது + +**சோதனையை மேம்படுத்துகிறது (Improves Testing)** + +உங்கள் குறியீட்டுத் தளத்தில் பிரிட்ஜ் முறை இருக்கும்போது சோதிப்பது மிகவும் எளிதானது, ஏனெனில் செயலாக்க அடுக்கைச் சோதிப்பதில் இருந்து தனித்தனியாகச் சுருக்க அடுக்கைச் சோதிப்பதில் நீங்கள் கவனம் செலுத்தலாம். இது எளிதான மற்றும் இலக்கு சோதனையை (targeted testing) அனுமதிக்கிறது. + +**வாசிப்புத்திறனை மேம்படுத்துகிறது (Improves Readability)** + +பிரிட்ஜ் முறை குறியீட்டுத் தளத்தில் தெளிவான படிநிலையை உருவாக்குகிறது. குறியீட்டுத் தளத்தை இந்த வழியில் அமைப்பது கணினியின் வெவ்வேறு பகுதிகளுக்கு இடையிலான உறவுகளைப் புரிந்துகொள்ள உதவுகிறது. + +## 2.3. எடுத்துக்காட்டு + +```javascript +// Abstraction +class Shape { + constructor(color) { + this.color = color; + } + + draw() { + console.log(`Drawing a shape with color ${this.color}`); + } +} + +// Implementations +class RedColor { + applyColor() { + console.log('Applying red color'); + } +} + +class BlueColor { + applyColor() { + console.log('Applying blue color'); + } +} + +// Bridge +class ShapeWithColor extends Shape { + constructor(color, colorImplementation) { + super(color); + this.colorImplementation = colorImplementation; + } + + draw() { + super.draw(); + this.colorImplementation.applyColor(); + } +} + +// Usage +const redShape = new ShapeWithColor('red', new RedColor()); +const blueShape = new ShapeWithColor('blue', new BlueColor()); + +redShape.draw(); // Output: Drawing a shape with color red, Applying red color +blueShape.draw(); // Output: Drawing a shape with color blue, Applying blue color +``` +## 3. கலவை (Composite) + +கலவை வடிவமைப்பு முறை (Composite design pattern) பழமையான (primitive) உருப்படிகள் அல்லது பொருள்களின் தொகுப்பு கொண்ட பண்புகளை உடைய பொருள்களை உருவாக்க அனுமதிக்கிறது. ஒற்றைப் பொருள்கள் (இலை முனைகள் - leaf nodes) அல்லது பொருள்களின் குழுக்கள் (கிளைகள் - branches) உள்ள ஒரு மரம் போன்ற கட்டமைப்பைக் கற்பனை செய்து பாருங்கள். கலவை வடிவமைப்பு முறை இது போன்ற ஒரு கட்டமைப்பை உருவாக்கவும், ஒவ்வொரு மட்டத்திலும் ஒரு நிலையான முறையில் செயல்பாடுகளைச் செய்யவும் உங்களை அனுமதிக்கிறது. + +## 3.1 கலவையின் கூறுகள் (Components of the Composite) + +*கூறு (Component)* + +இது இலை முனைகள் (தனிப்பட்ட கூறுகள்) மற்றும் கலவை முனைகள் (கூறுகளின் தொகுப்பு) இரண்டையும் குறிக்கும் இடைமுகம்/வகுப்பாகும். கூறு இரண்டு வகையான முனைகளுக்கும் பயன்படுத்தக்கூடிய செயல்பாடுகளை வரையறுக்கிறது. + +*இலை (Leaf)* + +மரத்தின் எந்தக் குழந்தைகளும் இல்லாத தனிப்பட்ட பொருள்களை இது குறிக்கிறது. கூறு இடைமுகத்தில் வரையறுக்கப்பட்ட செயல்பாடுகளை அவை செயல்படுத்துகின்றன. + +*கலவை (Composite)* + +இது இலை முனைகளின் தொகுப்பு அல்லது பிற கலவை முனைகளை வைத்திருக்கக்கூடிய கலவைகள் அல்லது கொள்கலன்களைக் (containers) குறிக்கிறது. + + +## 3.2. கலவைகளின் நன்மைகள் + +**சீரானது மற்றும் நிலைத்தன்மை (Uniformly and Consistency)** + +கலவை வடிவமைப்பு முறை தனிப்பட்ட பொருள்கள் மற்றும் பொருள்களின் கலவைகள் இரண்டையும் கையாள ஒரு சீரான வழியை வழங்குகிறது. இந்தப் பொருள்களில் செயல்படுவதற்குப் பயன்படுத்த கிளையன்ட்கள் ஒரு பொதுவான இடைமுகத்தைக் கொண்டுள்ளனர், இது குறியீட்டுத் தளம் மற்றும் பொருள் தொடர்புகளை எளிதாக்குகிறது. + +**நெகிழ்வுத்தன்மை (Flexibility)** + +இந்த வடிவமைப்பு முறை புதிய வகையான கூறுகளைச் சேர்ப்பதில் நெகிழ்வுத்தன்மையை அனுமதிக்கிறது அல்லது கிளையன்ட் குறியீட்டைப் பாதிக்காமல் ஏற்கனவே உள்ளவற்றை மாற்றியமைக்கிறது. நீங்கள் புதிய வகையான இலை அல்லது கலவைப் பொருள்களை எளிதாக அறிமுகப்படுத்தலாம். + + +**எளிமைப்படுத்தப்பட்ட கிளையன்ட் குறியீடு (Simplified Client Code)** + +கிளையன்ட் குறியீடு தனிப்பட்ட மற்றும் கலவை கூறுகளுக்கு இடையில் வேறுபடுத்தத் தேவையில்லை, இது கட்டமைப்புடன் வேலை செய்வதை எளிமையாகவும் உள்ளுணர்வுடனும் (intuitive) ஆக்குகிறது. + + +## 3.3. எடுத்துக்காட்டு + +```javascript +class SingleBlock { + constructor(name) { + this.name = name; + } + + display() { + console.log('Block:', this.name); + } +} + +class BlockCollection { + constructor(name) { + this.name = name; + this.blocks = []; + } + + add(block) { + this.blocks.push(block); + } + + remove(block) { + this.blocks = this.blocks.filter(b => b !== block); + } + + display() { + console.log('Block Collection:', this.name); + + for (const block of this.blocks) { + block.display(); + } + } +} + +// Usage +const block1 = new SingleBlock('Block 1'); +const block2 = new SingleBlock('Block 2'); +const block3 = new SingleBlock('Block 3'); + +const blockGroup1 = new BlockCollection('Block Group 1'); +blockGroup1.add(block1); +blockGroup1.add(block2); + +const blockGroup2 = new BlockCollection('Block Group 2'); +blockGroup2.add(block3); + +const megaStructure = new BlockCollection('Mega Structure'); +megaStructure.add(blockGroup1); +megaStructure.add(blockGroup2); + +megaStructure.display(); +``` + +## 4. அலங்கரிப்பவர் (Decorator) + +டெக்கரேட்டர் வடிவமைப்பு முறை (Decorator design pattern), ஒரே வகுப்பிலிருந்து மற்ற பொருள்களின் நடத்தையைப் பாதிக்காமல் நிலையானதாகவோ (statically) அல்லது மாறும் வகையிலோ (dynamically) பொருள்களின் நடத்தையை மாற்றப் பயன்படுத்தப்படலாம். நெகிழ்வான மற்றும் மீண்டும் பயன்படுத்தக்கூடிய முறையில் ஒரு பொருளுக்கு அம்சங்களைச் சேர்க்க விரும்பும்போது டெக்கரேட்டர்கள் மிகவும் பயனுள்ளதாக இருக்கும். + +## 4.1. ஒரு டெக்கரேட்டரின் கூறுகள் + +*கூறு இடைமுகம் (Component Interface)* + +பொறுப்புகளை மாறும் வகையில் சேர்க்கக்கூடிய பொருள்களுக்கான தர்க்கத்தை இது வரையறுக்கிறது. + +*கான்கிரீட் கூறுகள் (Concrete Components)* + +இது ஆரம்பப் பொருளாகும், இதில் கூடுதல் செயல்பாடுகளைச் சேர்க்கலாம். + +*டெக்கரேட்டர் (Decorator)* + +இது கான்கிரீட் கூறுகளின் செயல்பாட்டை நீட்டிக்கும் ஒரு இடைமுகமாகும். இது ஒரு கூறு நிகழ்விற்கான குறிப்பைக் கொண்டுள்ளது மற்றும் கூறு இடைமுகத்தை செயல்படுத்துகிறது. + +*கான்கிரீட் டெக்கரேட்டர்கள் (Concrete Decorators)* + +இவை டெக்கரேட்டர் வகுப்பின் கான்கிரீட் செயலாக்கங்களாகும், டெக்கரேட்டர் வகுப்பை நீட்டிப்பதன் மூலம் விரும்பிய கூறுக்கு அவை குறிப்பிட்ட நடத்தையைச் சேர்க்கின்றன. + + +## 4.2. டெக்கரேட்டர்களின் நன்மைகள் + +**நீட்டிக்கும் திறன் மற்றும் நெகிழ்வுத்தன்மை (Extensibility and Flexibility)** + +டெக்கரேட்டர்கள் இயக்க நேரத்தில் (runtime) பொருள்களுக்கு புதிய செயல்பாடுகள் அல்லது நடத்தைகளை மாறும் வகையில் சேர்க்க உங்களை அனுமதிக்கின்றன. தற்போதுள்ள குறியீட்டுத் தளத்தை (codebase) மாற்றாமல் நீட்டிக்கும் திறனை இது ஊக்குவிக்கிறது மற்றும் இந்த கூடுதல் செயல்பாடுகளை எவ்வாறு உருவாக்கலாம் மற்றும் பயன்படுத்தலாம் என்பதில் நெகிழ்வுத்தன்மையை வழங்குகிறது. + +**மாடுலாரிட்டி (Modularity)** + +செயல்பாட்டைச் சிறிய, நிர்வகிக்கக்கூடிய அலகுகளாகப் பிரிப்பதன் மூலம் குறியீட்டிற்கு மிகவும் மட்டுப்படுத்தப்பட்ட (modular) அணுகுமுறையை டெக்கரேட்டர்கள் செயல்படுத்துகின்றன. இந்த அலகுகளை பல்வேறு வழிகளில் ஒருங்கிணைத்து மீண்டும் பயன்படுத்தலாம். + +**இயக்க நேர உள்ளமைவு (Runtime Configuration)** + +டெக்கரேட்டர்கள் இயக்க நேரத்தில் ஒரு பொருளை மாறும் வகையில் உள்ளமைக்க உங்களை அனுமதிக்கின்றன. முக்கிய கூறுகளைப் பாதிக்காமலோ அல்லது குறியீட்டை மீண்டும் தொகுக்காமலோ (recompile) செயல்பாடுகளைச் சேர்க்க அல்லது அகற்ற இது உங்களை அனுமதிக்கிறது. + +**துணைப்பிரிவுகளைக் குறைத்தல் (Reduce Subclassing)** + +டெக்கரேட்டர்கள் இல்லாமல், செயல்பாடுகளை நீட்டிப்பது பெரும்பாலும் ஒவ்வொரு நடத்தை சேர்க்கைகளுக்கும் ஏராளமான துணைப்பிரிவுகளை (subclasses) உருவாக்குவதை உள்ளடக்கியது. டெக்கரேட்டர்கள் துணைப்பிரிவுகளின் தேவையைக் குறைக்கின்றன, இதன் விளைவாகக் குறியீட்டுத் தளம் தூய்மையாகவும் புரிந்துகொள்ள எளிதாகவும் இருக்கும். + +## 4.3. எடுத்துக்காட்டு + +```javascript +class Coffee { + cost() { + return 5; + } +} + +class MilkDecorator { + constructor(coffee) { + this.coffee = coffee; + } + + cost() { + return this.coffee.cost() + 2; + } +} + +class SugarDecorator { + constructor(coffee) { + this.coffee = coffee; + } + + cost() { + return this.coffee.cost() + 1; + } +} + +// Usage +let coffee = new Coffee(); +console.log('Cost of plain coffee:', coffee.cost()); + +let milkCoffee = new MilkDecorator(coffee); +console.log('Cost of milk coffee:', milkCoffee.cost()); + +let sugarMilkCoffee = new SugarDecorator(milkCoffee); +console.log('Cost of sugar milk coffee:', sugarMilkCoffee.cost()); +``` + +## 5. முகப்பு (Facade) + +முகப்பு வடிவமைப்பு முறை (Facade design pattern) என்பது குறியீட்டுத் தளத்தில் மறைந்திருக்கும் பிற குறைந்த நிலைச் (low level) செயல்பாடுகளைப் பயன்படுத்த கிளையன்ட் தொடர்புகொள்ளக்கூடிய எளிமைப்படுத்தப்பட்ட இடைமுகமாகும். பல அடுக்குக் கட்டமைப்பைச் (multi-layer architecture) சுற்றி கட்டமைக்கப்பட்ட கணினிகளில் இந்த வடிவமைப்பு முறை பெரும்பாலும் பயன்படுத்தப்படுகிறது. கணினியின் அடிப்படை சிக்கலான தன்மையைப் புரிந்துகொள்ளாமலேயே சில பணிகளைச் செய்ய முகப்புகள் (Facades) கிளையன்ட்டை அனுமதிக்கின்றன. + + +## 5.1. முகப்பின் கூறுகள் (Components of the Facade) + +*முகப்பு (Facade)* + +முகப்பு என்பது கிளையன்ட் தொடர்புகொள்ளும் இடைமுகமாகும். கிளையன்ட் கோரிக்கைகளை துணை அமைப்பிற்குள் (subsystem) உள்ள பொருத்தமான பொருள்களுக்கு வழங்கும் எளிய மற்றும் ஒருங்கிணைந்த (unified) இடைமுகத்தை இது வழங்குகிறது + +*துணை அமைப்பு (Subsystem)* + +துணை அமைப்பானது முகப்பு சுற்றியுள்ள அனைத்து பல்வேறு கூறுகள் மற்றும் செயல்பாடுகளைக் கொண்டுள்ளது. துணை அமைப்பும் முகப்பும் ஒன்றுக்கொன்று தொடர்புகொள்கின்றன, ஆனால் சுதந்திரமாகச் செயல்படுகின்றன. + + +## 5.2. முகப்பின் நன்மைகள் + +**எளிமைப்படுத்தப்பட்ட இடைமுகம் (Simplified Interface)** + +முகப்பு எளிமையான மற்றும் புரிந்துகொள்ள எளிதான இடைமுகத்தை வழங்குகிறது + +**குறியீட்டு அமைப்பு (Code Organization)** + +முகப்பு துணை அமைப்பின் செயல்பாட்டைக் காப்ஸ்யூல் (encapsulate) செய்வதன் மூலமும், கவலைகளைத் தெளிவாகப் பிரிப்பதன் மூலமும் குறியீட்டை ஒழுங்கமைக்க உதவுகிறது. + +**எளிதான பராமரிப்பு (Easier Maintenance)** + +துணை அமைப்பிற்கான மாற்றங்கள் முகப்பிற்குள் தனிமைப்படுத்தப்படலாம் (isolated), கிளையன்ட் குறியீட்டின் தாக்கத்தைக் குறைக்கலாம். + + +## 5.3. எடுத்துக்காட்டு + +```javascript +// Plumbing subsystem +class PlumbingSubsystem { + constructor() {} + + turnOnWater() { + console.log('Plumbing: Water turned on'); + } + + turnOffWater() { + console.log('Plumbing: Water turned off'); + } +} + +// Electrical subsystem +class ElectricalSubsystem { + constructor() {} + + turnOnElectricity() { + console.log('Electrical: Electricity turned on'); + } + + turnOffElectricity() { + console.log('Electrical: Electricity turned off'); + } +} + +// House facade +class HouseFacade { + constructor() { + this.plumbingSubsystem = new PlumbingSubsystem(); + this.electricalSubsystem = new ElectricalSubsystem(); + } + + enterHouse() { + this.plumbingSubsystem.turnOnWater(); + this.electricalSubsystem.turnOnElectricity(); + console.log('You have entered the house.'); + } + + leaveHouse() { + this.plumbingSubsystem.turnOffWater(); + this.electricalSubsystem.turnOffElectricity(); + console.log('You have left the house.'); + } +} + +// Client +const client = () => { + const house = new HouseFacade(); + + // Enter the house + house.enterHouse(); + + // Leave the house + house.leaveHouse(); +}; + +// Run the client +client(); +``` + +## 6. ஃபிளைவெயிட் (Flyweight) + +ஃபிளைவெயிட் வடிவமைப்பு முறை (Flyweight design pattern) என்பது ஒரு பயன்பாட்டில் உள்ள ஒத்த பொருளின் உள்ளார்ந்த (intrinsic) மதிப்புகளை (ஒத்த பண்புகள்) சேமிப்பதன் மூலம் நினைவகப் பயன்பாடு அல்லது கணக்கீட்டுச் செலவுகளை (computaional expenses) குறைப்பதை நோக்கமாகக் கொண்டுள்ளது, இது நகல் குறியீட்டின் அளவைக் குறைக்கிறது. ஒரு பயன்பாட்டில் அதிக எண்ணிக்கையிலான ஒத்த பொருள்களைக் கையாளும் போது இது மிகவும் பயனுள்ளதாக இருக்கும். + +## 6.1. ஃபிளைவெயிட்டின் கூறுகள் + +*ஃபிளைவெயிட் தொழிற்சாலை (FlyweightFactory)* + +ஃபிளைவெயிட் தொழிற்சாலை ஃபிளைவெயிட் பொருள்களை உருவாக்குகிறது. ஏற்கனவே ஒரு ஃபிளைவெயிட் இல்லை என்றால் அதை உருவாக்கும் ஒரு செயல்பாட்டை இது கொண்டுள்ளது மற்றும் எதிர்காலக் கோரிக்கைக்காக புதிதாக உருவாக்கப்பட்ட ஃபிளைவெயிட்டுகளை இது சேமிக்கிறது. + +*ஃபிளைவெயிட் (Flyweight)* + +ஃபிளைவெயிட் பயன்பாடு முழுவதும் பகிரப்படும் உள்ளார்ந்த (intrinsic) தரவைக் கொண்டுள்ளது + + +## 6.2. ஃபிளைவெயிட்டுகளின் நன்மைகள் + +**நினைவகத் திறன் (Memory Efficiency)** + +பல்வேறு பொருள்களுக்கு இடையே உள்ளார்ந்த தரவைப் பகிர்வதன் மூலம், ஃபிளைவெயிட் முறை நினைவகப் பயன்பாட்டைக் கணிசமாகக் குறைக்கிறது, குறிப்பாக அதிக எண்ணிக்கையிலான நிகழ்வுகளைக் (instances) கையாளும் போது. + +**செயல்திறன் மேம்பாடுகள் (Performance Improvements)** + +குறைக்கப்பட்ட நினைவகப் பயன்பாடு காரணமாக, பயன்பாட்டின் ஒட்டுமொத்த செயல்திறன் மேம்படுகிறது. குறைந்த நினைவகப் பயன்பாடு பொதுவாக வேகமான செயலாக்க நேரங்களுக்கும் (execution times) மென்மையான பயன்பாட்டுச் செயல்திறனுக்கும் வழிவகுக்கிறது. + +**நிலை மேலாண்மையை எளிதாக்குகிறது (Simplifies State Management)** + +உள்ளார்ந்த தரவு (பகிரப்பட்ட மதிப்புகள்) மற்றும் வெளிப்புற தரவு (தனித்துவமான மதிப்புகள்) ஆகியவற்றைப் பிரிப்பதன் மூலம், ஃபிளைவெயிட்டுகள் இந்த நிலைகளின் (states) நிர்வாகத்தை எளிதாக்குகின்றன. கவலைகளைத் தூய்மையாகப் பிரிப்பதற்கும், நிலையைக் கையாள்வதற்கு மிகவும் ஒழுங்கமைக்கப்பட்ட அணுகுமுறைக்கும் இது அனுமதிக்கிறது. + +## 6.3. எடுத்துக்காட்டு + +```javascript +// Flyweight object for Camera +function Camera(make, model, resolution) { + this.make = make; + this.model = model; + this.resolution = resolution; +} + +// Flyweight factory for Camera +var FlyWeightCameraFactory = (function () { + var flyweights = {}; + + return { + get: function (make, model, resolution) { + if (!flyweights[make + model]) { + flyweights[make + model] = new Camera(make, model, resolution); + } + return flyweights[make + model]; + }, + + getCount: function () { + var count = 0; + for (var f in flyweights) count++; + return count; + } + }; +})(); + +// Camera collection +function CameraCollection() { + var cameras = {}; + var count = 0; + + return { + add: function (make, model, resolution, serial) { + cameras[serial] = { + flyweight: FlyWeightCameraFactory.get(make, model, resolution), + serial: serial + }; + count++; + }, + + get: function (serial) { + return cameras[serial]; + }, + + getCount: function () { + return count; + } + }; +} + +// Run the example +function run() { + var cameras = new CameraCollection(); + + cameras.add("Canon", "EOS R5", "45MP", "A1234"); + cameras.add("Nikon", "D850", "45.7MP", "B5678"); + cameras.add("Sony", "A7R III", "42.4MP", "C9101"); + cameras.add("Canon", "EOS R5", "45MP", "D1212"); // Reusing existing flyweight + + console.log("Cameras: " + cameras.getCount()); + console.log("Flyweights: " + FlyWeightCameraFactory.getCount()); +} + +// Run the example +run(); +``` + +## 7. ப்ராக்ஸி (Proxy) + +ப்ராக்ஸி வடிவமைப்பு முறை (Proxy design pattern) என்பது ஒரு கட்டமைப்பு வடிவமைப்பு முறையாகும், இது மற்றொரு பொருளுக்கு மாற்றீட்டை அல்லது இடப்பிடிப்பானை (placeholder) வழங்க உங்களை அனுமதிக்கிறது. இந்த ப்ராக்ஸி பொருள் அசல் பொருளுக்கான அணுகலைக் கட்டுப்படுத்த முடியும். ஜாவாஸ்கிரிப்டில், `proxy` பொருள் மொழியிலேயே கட்டமைக்கப்பட்டுள்ளது மற்றும் ப்ராக்ஸி வடிவமைப்பு முறையைச் செயல்படுத்துவதற்கு உதவுகிறது. + +## 7.1. ப்ராக்ஸியின் கூறுகள் + +*ப்ராக்ஸி (Proxy)* + +ப்ராக்ஸி உண்மையான பொருளைப் போன்ற ஒரு இடைமுகத்தைக் கொண்டுள்ளது, உண்மையான பொருளை அணுக ப்ராக்ஸியை அனுமதிக்கும் ஒரு குறிப்பை (reference) இது பராமரிக்கிறது மற்றும் இது கோரிக்கைகளைக் கையாளுகிறது மற்றும் அவற்றை உண்மையான பொருளுக்கு அனுப்புகிறது (forwards). + +*உண்மையான பொருள் (RealSubject)* + +ப்ராக்ஸி மாற்றாகச் செயல்படும் உண்மையான பொருள் இதுவாகும். + +## 7.2. ப்ராக்ஸிகளின் நன்மைகள் + +**கட்டுப்படுத்தப்பட்ட அணுகல் (Controlled Access)** + +ப்ராக்ஸிகள் அசல் பொருளுக்கான அணுகலைக் கட்டுப்படுத்த உங்களை அனுமதிக்கின்றன, அடிப்படைப் பொருளை அணுக அனுமதிப்பதற்கு முன்பு அனுமதிகள் (permissions), கட்டுப்பாடுகள் (restrictions) அல்லது சரிபார்ப்புகள் (validations) போன்ற அணுகல் கட்டுப்பாட்டு தர்க்கங்களைச் (access control logic) செயல்படுத்த உங்களை அனுமதிக்கிறது. + +**நடத்தை அதிகரிப்பு (Behavior Augmentation)** + +அசல் பொருளின் பண்புகளுக்கான அணுகல் அல்லது முறைகளின் அழைப்பிற்கு முன்னரோ அல்லது பின்னரோ ப்ராக்ஸிகள் கூடுதல் நடத்தை அல்லது செயல்பாட்டைச் சேர்க்கலாம். லாகிங் (logging), கேச்சிங் (caching) அல்லது பிழை கையாளுதல் (error handling) போன்ற குறுக்குவெட்டுக் கவலைகளைச் (cross-cutting concerns) செயல்படுத்த இது பயனுள்ளதாக இருக்கும். + +**கேச்சிங் (Caching)** + +விலையுயர்ந்த செயல்பாடுகளின் முடிவுகளைச் சேமிக்க ப்ராக்ஸிகள் கேச்சிங் வழிமுறையைச் செயல்படுத்தலாம், செயல்திறன் மற்றும் திறனை மேம்படுத்துகின்றன. + + +**சோம்பேறி துவக்கம் (Lazy Initialization)** + +ப்ராக்ஸிகள் சோம்பேறி துவக்கத்தை (lazy initialization) செயல்படுத்துகின்றன, அதாவது உண்மையான பொருளை அதன் தேவை ஏற்படும் வரை உருவாக்குவதைத் தாமதப்படுத்தலாம். முன்கூட்டிய வளப் பயன்பாட்டைக் குறைப்பதன் மூலம் இது செயல்திறனை மேம்படுத்தும். + +## 7.3. எடுத்துக்காட்டு + +```javascript +// Original object representing a bank account +const bankAccount = { + balance: 1000, + + deposit(amount) { + this.balance += amount; + console.log(`Deposited ${amount}. New balance: ${this.balance}`); + }, + + withdraw(amount) { + if (amount <= this.balance) { + this.balance -= amount; + console.log(`Withdrew ${amount}. New balance: ${this.balance}`); + } else { + console.log('Insufficient funds.'); + } + } +}; + +// Create a proxy for the bank account +const bankAccountProxy = new Proxy(bankAccount, { + // Intercept property access + get(target, property) { + if (property === 'balance') { + // Add some custom behavior before accessing 'balance' + console.log('Balance accessed.'); + } + return target[property]; + }, + + // Intercept method invocation + apply(target, thisArg, args) { + // Add some custom behavior before invoking a method + console.log(`Method "${args[0]}" called.`); + return target.apply(thisArg, args); + } +}); + +// Accessing the proxy +console.log(bankAccountProxy.balance); // This will trigger the custom behavior + +bankAccountProxy.deposit(500); // This will trigger the custom behavior for method invocation +``` +--- \ No newline at end of file diff --git a/ta/document-object-model/README.md b/ta/document-object-model/README.md new file mode 100644 index 00000000..c2500f7b --- /dev/null +++ b/ta/document-object-model/README.md @@ -0,0 +1,17 @@ +--- +layout: editorial +chapter: 28 +pageNumber: 263 +description: Document Object Model (DOM) என்பது ஒரு நிரலாக்க இடைமுகமாகும் (programming interface), இது HTML அல்லது XML போன்ற இணைய ஆவணத்தின் (web document) கட்டமைப்பை பொருள்களின் மரமாக (tree of objects) குறிக்கிறது. இந்த படிநிலை மரம் டெவலப்பர்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி வலைப்பக்கத்திற்குள் உள்ள கூறுகள் (elements), பண்புக்கூறுகள் (attributes) மற்றும் உள்ளடக்கத்தை அணுகவும் கையாளவும் அனுமதிக்கிறது. தலைப்புகள், பத்திகள் மற்றும் இணைப்புகள் போன்ற கூறுகள் உட்பட ஆவணத்தின் ஒவ்வொரு பகுதியும் DOM மரத்தில் உள்ள ஒரு கணுவாக (node) குறிக்கப்படுகிறது. +--- + +# Document Object Model (DOM) {#dom} + +ஒரு வலைப்பக்கத்தில் ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவதன் முதன்மை நோக்கம் அந்தப் பக்கத்தை **ஊடாடக்கூடியதாக (interactive)** மாற்றுவதாகும்: பக்கத்தில் காட்டப்படுவதைப் பாதிக்கும் தர்க்கரீதியான முடிவுகளை (logical decisions) நிரல் செய்ய ஜாவாஸ்கிரிப்ட் மொழி பயன்படுத்தப்படுகிறது. _உலாவியால் வழங்கப்படும் HTML ஐ மாற்றுவதன்_ மூலம் இது முதன்மையாக இதைச் செய்கிறது. எடுத்துக்காட்டாக, `

` க்குள் உள்ள உரையை மாற்ற, பட்டியலில் கூடுதல் `

  • ` கூறுகளைச் சேர்க்க அல்லது `
    ` க்கு புதிய CSS `class` பண்புக்கூறைக் கொடுக்க ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தலாம். + +தற்போது உலாவியால் காட்டப்படும் HTML கூறுகளின் நிரல்சார்ந்த பிரதிநிதித்துவம் (programmatic representation) **Document Object Model (DOM)** என அழைக்கப்படுகிறது. வலை நிரலாக்கத்தில் பயனர் உள்ளீட்டிற்கு பதிலளிக்கும் வகையில் DOM ஐ (தற்போது உலாவியால் காட்டப்படும் HTML கூறுகள்) மாற்ற ஜாவாஸ்கிரிப்ட் குறியீடு பயன்படுத்தப்படுகிறது, இதன் மூலம் பக்கத்தை ஊடாடக்கூடியதாக மாற்றுகிறது. இந்த அத்தியாயம் Document Object Model ஐயும், பயனர் உந்துதல் ஊடாடல் மூலம் அதைக் கையாள ஜாவாஸ்கிரிப்டை எவ்வாறு பயன்படுத்துவது என்பதையும் அறிமுகப்படுத்துகிறது. + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [DOM API](./dom-api.md) +* [DOM கையாளுதல் (DOM Manipulation)](./dom-manipulation.md) +* [நிகழ்வுகளைக் கேட்பது (Listening of events)](./listening-of-events.md) \ No newline at end of file diff --git a/ta/document-object-model/dom-api.md b/ta/document-object-model/dom-api.md new file mode 100644 index 00000000..bd3a80ae --- /dev/null +++ b/ta/document-object-model/dom-api.md @@ -0,0 +1,49 @@ +--- +chapter: 28 +description: ஜாவாஸ்கிரிப்டில் DOM API ஐப் புரிந்துகொள்வது. +--- + +## The DOM API + +HTML கூறுகளை உள்ளமைக்க (nested) முடியும், இது ஒரு வலைப்பக்கத்தை கூறுகளின் **"மரமாக (tree)"** கருத அனுமதிக்கிறது: + +- ஒரு **மரம் (tree)** என்பது ஒரு படிநிலை தரவுக் கட்டமைப்பாகும், இதில் ஒவ்வொரு உறுப்பும் (_node_ என்று அழைக்கப்படுகிறது) _குழந்தை (child)_ கூறுகளுக்கான குறிப்புகளைக் கொண்டுள்ளது. மர உருவகத்தைப் (arboreal metaphor) பின்பற்றி, மரத்தின் "தொடக்கம்" _root node_ என்றும், கணுக்களின் படிநிலைத் தொடர்கள் _கிளைகள் (branches)_ என்றும், குழந்தைகளைக் கொண்டிருக்காத ஒரு _கணு_ _இலை (leaf)_ என்றும் அழைக்கப்படுகிறது. + +ஒரு வலைப்பக்கத்தின் உள்ளடக்கத்தை HTML கூறுகளின் மரமாகக் கருதுவது அந்தத் தகவலின் கட்டமைப்பை _மாதிரியாக்க (model)_ (பிரதிநிதித்துவப்படுத்த) ஒரு வழியாகும். இணைய _ஆவணத்தின்_ இந்த குறிப்பிட்ட மாதிரி (_பொருள் (object)_ கணுக்களின் மரமாக) சுருக்கமாக **Document Object Model**, அல்லது **DOM** என்று அழைக்கப்படுகிறது. பல வழிகளில் DOM _என்பது_ HTML ஆகும் (ஆனால் உலாவியில் காட்டப்படும் HTML, நீங்கள் எழுதிய `.html` மூலக் குறியீடு அல்ல)! எனவே வலைப்பக்கத்தின் உள்ளடக்கத்தை "DOM" என்றும், HTML உறுப்பை "DOM உறுப்பு (DOM element)" என்றும் குறிப்பிடலாம். + +- "வெற்று உரை" உள்ளடக்கம் கூட (எ.கா., `

    ` குறிச்சொல்லுக்குள் இருப்பது) DOM மரத்தில் கணுக்களாகக் கருதப்படுகின்றன என்பதை நினைவில் கொள்க - அவை ("உறுப்பு கணுக்களுக்கு (element nodes)" பதிலாக) "உரை உள்ளடக்க (text content)" கணுக்கள். + +மேலும், DOM ஆனது ஒரு **பயன்பாட்டு நிரலாக்க இடைமுகத்தையும் (Application Programming Interface - API)** வழங்குகிறது, இது கணினி _பயன்பாடுகளை_ _நிரல்ரீதியாக_ (எ.கா., ஜாவாஸ்கிரிப்ட் குறியீடு மூலம்) அதனுடன் _தொடர்பு கொள்ள_ அனுமதிக்கிறது: கூறுகளின் மரத்தை அணுகுதல் மற்றும் கையாளுதல். API என்பது பெரும்பாலும் _செயல்பாடுகள் (functions)_ மற்றும் _மாறிகள் (variables)_ ஆகியவற்றின் தொகுப்பாகும், இது ஒரு நிரலுக்கு வழிமுறைகளை வழங்க பயன்படும். DOM API உம் வேறுபட்டதல்ல: இது நீங்கள் அழைக்கக்கூடிய செயல்பாடுகள் மற்றும் (பொதுவாக பொருள் பண்புகள்) நீங்கள் காட்டப்படும் இணைய உள்ளடக்கத்தை மாற்றியமைக்க சரிசெய்யக்கூடிய மாறிகளின் குழுவாகும். ஒரு பக்கத்தை ஊடாடக்கூடியதாக மாற்றுவதற்காக இந்த செயல்பாடுகளை அழைப்பதற்கான குறியீட்டை நீங்கள் எழுதுகிறீர்கள். + +### Global மாறிகள் (Global Variables) + +Global மாறிகளின் தொகுப்பைப் பயன்படுத்துவதன் மூலம் ஜாவாஸ்கிரிப்டில் API ஐ நிரல்ரீதியாக அணுகலாம். **Global மாறிகள்** என்பவை "உலகளாவிய (globally)" ஸ்கோப் செய்யப்பட்ட மாறிகள்: அவை நிரலில் எங்கும் கிடைக்கின்றன (ஒரு குறிப்பிட்ட செயல்பாட்டிற்குள் மட்டும் அல்ல). + +

    ஒரு முக்கியமான நிரலாக்க பாணி விதி global மாறிகளின் பயன்பாட்டைக் **குறைப்பது**. நீங்களே அதிக புதிய global களை உருவாக்குவதைத் தவிர்க்க முயற்சிக்கவும்!

    + +ஜாவாஸ்கிரிப்டில் உள்ள Global மாறிகள் எப்போதும் அவற்றின் மதிப்புகளாக முறைகளைக் கொண்ட _பொருள்கள் (Objects)_ ஆகும். எடுத்துக்காட்டாக, ஜாவாஸ்கிரிப்ட் மொழியே [**`Math`**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) பொருளை வழங்குகிறது, இதில் பல செயல்பாட்டு பண்புகள் அடங்கும் (எ.கா., `sqrt()`, `floor()` போன்றவை). + +```js +console.log(typeof Math); //=> 'object' +console.log(typeof Math.sqrt); //=> 'function' +console.log(Math.sqrt(25)); //=> 5 +``` + +- உண்மையில், `console` பொருள் ஜாவாஸ்கிரிப்ட் இயக்கநேரத்தால் (runtime) (உலாவியிலோ அல்லது Node.js இற்குள்ளோ) வழங்கப்படும் _மற்றொரு_ global மாறியாகும்! + +_இணைய உலாவியும்_ நீங்கள் பயன்படுத்தக்கூடிய பல global மாறிகளை வழங்குகிறது. எடுத்துக்காட்டாக [**`window`**](https://developer.mozilla.org/en-US/docs/Web/API/Window) என்பது உலாவியையே குறிக்கும் ஒரு global பொருளாகும். உலாவியைப் பற்றிய தகவல்களைப் பெற இந்தப் பொருளைப் பயன்படுத்தலாம்: + +```js +/* எடுத்துக்காட்டு பண்புகள் */ +let width = window.innerWidth; //viewport அகலம் +let height = window.innerHeight; //viewport உயரம் +var url = window.location.href; //இந்தப் பக்கத்திற்கான url + +/* எடுத்துக்காட்டு செயல்பாடுகள் */ +window.alert("Boo!"); //popup எச்சரிக்கையைக் காட்டு. இதைப் பயன்படுத்த வேண்டாம். +window.scrollTo(0, 1000); //ஒரு நிலைக்கு உருட்டவும் +window.setTimeout(callback, 1000); //ஒரு தாமதத்திற்குப் பிறகு callback ஐ இயக்கவும் +window.setInterval(callback, 1000); //இடைவெளிக்குப் பிறகு மீண்டும் மீண்டும் callback ஐ இயக்கவும் +``` + +

    முழுமைக்காக இந்த எடுத்துக்காட்டுகள் சேர்க்கப்பட்டாலும், பெரும்பாலான `window` செயல்பாடுகள் அரிதாகவே பயன்படுத்தப்படுகின்றன, மேலும் அவற்றைத் தவிர்க்க வேண்டும். `window.alert()` செயல்பாட்டைக் கொண்ட பாப்அப்கள் நேர்த்தியற்றவை, பயனரின் செயல்களுக்கு இடையூறு விளைவிப்பவை மற்றும் மோசமான பயனர் அனுபவத்தை உருவாக்குகின்றன - அதற்குப் பதிலாக நீங்கள் in-window எச்சரிக்கை விருப்பங்களைப் பயன்படுத்த வேண்டும் (அதாவது `class="alert-class" ` ஐக் காண்பிப்பது போன்றவை). `scrollTo()` போன்ற உலாவி கட்டுப்பாட்டு செயல்பாடுகள் தரமற்றவை மற்றும் அமைப்புகள் மற்றும் இயங்குதளங்களில் கடுமையாக மாறுபடும். `window` செயல்பாடுகளைப் பயன்படுத்தும் போது எச்சரிக்கையுடன் தொடரவும்!

    diff --git a/ta/document-object-model/dom-manipulation.md b/ta/document-object-model/dom-manipulation.md new file mode 100644 index 00000000..9a65be6c --- /dev/null +++ b/ta/document-object-model/dom-manipulation.md @@ -0,0 +1,222 @@ +--- +chapter: 28 +description: ஜாவாஸ்கிரிப்டில் DOM கையாளுதலைப் (DOM Manipulation) புரிந்துகொள்வது. +--- + +## DOM கையாளுதல் (DOM Manipulation) + +`window` உலாவியைக் குறிக்கும் போது, **DOM** 자체가 [**`document`**](https://developer.mozilla.org/en-US/docs/Web/API/Document) உலகளாவிய பொருளால் (global object) குறிக்கப்படுகிறது—`document` _என்பது_ DOM (உலாவியில் காட்டப்படும் _தற்போதைய_ HTML). உலாவியில் காட்டப்படும் உள்ளடக்கத்தைக் கையாளுவதற்காக இந்தப் பொருளின் பண்புகளை (properties) அணுகி, முறைகளை (methods) அழைக்கிறீர்கள்! + +### HTML கூறுகளைக் குறிப்பிடுதல் (Referencing HTML Elements) + +ஒரு பக்கத்தில் உள்ள DOM கூறுகளைக் கையாள, நீங்கள் மாற்ற விரும்பும் உறுப்பிற்கான ஒரு _குறிப்பை (reference)_ முதலில் பெற வேண்டும்—அதாவது, அந்த உறுப்பைக் குறிக்கும் ஒரு மாறி (variable) உங்களுக்குத் தேவை. `document` "தேர்வி (selector)" செயல்பாடுகளில் ஒன்றைப் பயன்படுத்துவதன் மூலம் இந்த மாறி குறிப்புகளைப் பெறலாம்: + +```js +// id="foo" கொண்ட உறுப்பு +let fooElem = document.getElementById("foo"); + +// class="row" கொண்ட உறுப்புகள் +let rowElems = document.getElementsByClassName("row"); //பன்மை (plural) என்பதைக் கவனியுங்கள்! + +//
  • கூறுகள் +let liElems = document.getElementsByTagName("li"); //பன்மை என்பதைக் கவனியுங்கள்! + +/* CSS தேர்வாளர்களை மீண்டும் பயன்படுத்துவதன் மூலம் தேர்ந்தெடுப்பது எளிது! */ +let cssSelector = "header p, .title > p"; //ஒரு CSS தேர்வியின் சரம் + +// css தேர்வியுடன் பொருந்தும் முதல் உறுப்பைத் தேர்ந்தெடுக்கிறது +let elem = document.querySelector(cssSelector); + +// css தேர்வியுடன் பொருந்தும் அனைத்து உறுப்புகளையும் பொருத்துகிறது +let elems = document.querySelectorAll(cssSelector); +``` + +- `document.querySelector()` என்பது இந்த முறைகளில் பயன்படுத்த மிகவும் நெகிழ்வானதும் எளிமையானதுமாகும்: இது மற்ற அனைத்து முறைகளையும் போலவே எளிதாக செய்ய முடியும் (ஒரு id, class அல்லது element தேர்வியை உள்ளிடவும்). **நீங்கள் எப்போதும் `querySelector()` ஐப் பயன்படுத்த வேண்டும்**. + +- பல கணுக்களைத் (e.g., `querySelectorAll`) திரும்பப் பெறும் முறைகள் [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) பொருளைத் திரும்பப் பெறுகின்றன என்பதை நினைவில் கொள்க. இது ஒரு வரிசையைப் போல (array) இருந்தாலும் (bracket notation மூலம் குறியீட்டு வழியாக நீங்கள் கூறுகளை அணுகலாம் மற்றும் இது ஒரு `.length` பண்பைக் கொண்டுள்ளது), இது ஒரு வரிசை **அல்ல**: அதாவது இது அனைத்து உலாவிகளிலும் `forEach()` மற்றும் `map()` போன்ற முறைகளை ஆதரிக்காது. நீங்கள் ஒரு `NodeList` மூலம் மீள்திருப்ப (iterate) வேண்டும் என்றால், நீங்கள் வழக்கமான `for` சுழற்சியைப் பயன்படுத்த வேண்டும். ஆனால் நடைமுறையில், நீங்கள் ஒரே நேரத்தில் ஒற்றை கூறுகளுடன் வேலை செய்ய அதிக வாய்ப்புள்ளது. + +### HTML கூறுகளை மாற்றுதல் (Modifying HTML Elements) + +உங்களிடம் ஒரு உறுப்பிற்கான குறிப்பு கிடைத்ததும், DOM இல் அதன் நிலையை மாற்ற அந்தப் பொருளின் பண்புகளை அணுகி முறைகளை அழைக்கிறீர்கள் - இது பக்கத்தில் அது _தற்போது_ எவ்வாறு காட்டப்படுகிறது என்பதை மாற்றும். இவ்வாறு இந்தப் பொருள்களை மாற்றுவதன் மூலம், வலைப்பக்கத்தின் உள்ளடக்கத்தை நீங்கள் டைனமிக் ஆக மாற்றுகிறீர்கள்! + +

    **முக்கியமானது**: இந்தப் பண்புகளை அமைப்பது `.html` மூலக் குறியீடு கோப்பை (source code file) மாற்றாது! மாறாக, அவை _காட்டப்படும் DOM கூறுகளை_ மட்டுமே மாற்றுகின்றன (நினைத்துப் பாருங்கள்: உள்ளடக்கங்கள் கோப்பில் இல்லாமல் கணினியின் நினைவகத்தில் சேமிக்கப்படுகின்றன). நீங்கள் பக்கத்தைப் புதுப்பித்தால் (refresh), DOM ஐ மாற்றும் ஸ்கிரிப்ட் ஏற்றப்படாவிட்டால் தவிர, உள்ளடக்கம் `.html` மூலக் குறியீடு கோப்பு குறிப்பிடும் விதத்திற்குத் திரும்பும். பக்கத்தில் காட்டப்படுவது ஜாவாஸ்கிரிப்ட் மாற்றங்கள் சேர்க்கப்பட்ட HTML ஆகும்.

    + +#### உள்ளடக்கத்தை மாற்றுதல் (Changing Content) + +DOM உறுப்பின் (எ.கா., தொடக்க மற்றும் இறுதி குறிச்சொற்களுக்கு இடையே உள்ள விஷயங்கள்) **உள்ளடக்கத்தை** அணுகவும் மாற்றவும் நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம்: + +```js +// முதல்

    உறுப்பிற்கான குறிப்பைப் பெறவும் +let elem = document.querySelector("p"); + +console.log(elem); //விளக்குவதற்கு + +let text = elem.textContent; //உறுப்பின் உரை உள்ளடக்கம் +elem.textContent = "இது வேறுபட்ட உள்ளடக்கம்!"; //உள்ளடக்கத்தை மாற்று + +let html = elem.innerHTML; //HTML உள்ளிட்ட உள்ளடக்கம் +elem.innerHTML = "இது வேறுபட்ட உள்ளடக்கம்!"; //HTML ஆக விளக்கப்படுகிறது +``` + +உறுப்பின் `textContent` பண்பு _அனைத்து_ உள்ளடக்கத்தையும் குறிக்கிறது, ஆனால் "வெற்று உரை" என்று கருதப்படுவது இது ஒரு "பாதுகாப்பான" பண்பு என்று பொருள்படும்: HTML குறியீட்டைக் கொண்ட சரங்களை நீங்கள் ஒதுக்கலாம் (எ.கா., `Hello`), ஆனால் அந்தக் குறியீடு தப்பிக்கப்பட்டு (escaped) HTML ஆக விளக்கப்படாது (மாறாக `<` மற்றும் `>` ஆகியவை நீங்கள் [HTML entities](https://www.w3schools.com/html/html_entities.asp) ஐப் பயன்படுத்தியது போல் எழுதப்படும்). மறுபுறம், `.innerHTML` பண்பு "பாதுகாப்பற்றது": நீங்கள் ஒதுக்கும் சரத்தில் சேர்க்கப்பட்டுள்ள எந்த HTML உம் DOM கூறுகளாக மாற்றப்படும். உள்ளடக்கம் நம்பகமான மூலத்திலிருந்து வந்ததா என்பதை நீங்கள் உறுதியாக நம்பாவிட்டால் தவிர, இது பயன்படுத்த சிறந்த பண்பு அல்ல. + +- `` அல்லது `` போன்ற _உள்ளமை (inline)_ கூறுகளைச் சேர்க்க `innerHTML` பண்பு முதன்மையாகப் பயன்படுத்தப்பட வேண்டும். மிகவும் சிக்கலான HTML உள்ளடக்கத்திற்கு, வெளிப்படையாக புதிய கூறுகளை உருவாக்குவது தூய்மையான குறியீடாகும் (கவலைகளின் பிரிப்பு!) - விவரங்களுக்கு கீழே காண்க. + +- ஒரு உறுப்பின் உள்ளடக்கத்தை வெற்றுச் சரமாக (`''`) அமைப்பதன் மூலம் அதை "அழிக்கலாம் (clear)": + + ```js + let alertElem = document.querySelector(".alert"); + alertElem.textContent = ""; //இனி எச்சரிக்கை இல்லை! + ``` + +#### பண்புக்கூறுகளை மாற்றுதல் (Changing Attributes) + +நீங்கள் தனிப்பட்ட கூறுகளின் **பண்புக்கூறுகளையும் (attributes)** மாற்றலாம். HTML விவரக்குறிப்பில் வரையறுக்கப்பட்ட ஒவ்வொரு பண்புக்கூறும் பொதுவாக உறுப்பு பொருளின் ஒரு _பண்பாக (property)_ வெளிப்படுத்தப்படுகிறது: + +```js +// `#picture` உறுப்பிற்கான குறிப்பைப் பெறவும் +let imgElem = document.querySelector("#picture"); + +// பண்புக்கூறை அணுகவும் +console.log(imgElem.src); //படத்தின் மூலத்தைப் பதிவு செய்கிறது + +// பண்புக்கூறை மாற்றவும் +imgElem.src = "my-picture.png"; +``` + +

    நீங்கள் `element.class` அல்லது `element.style` பண்புக்கூறுகளை நேரடியாக இந்த வழியில் அணுக **முடியாது**; உறுப்பின் CSS ஐ மாற்றுவது பற்றிய விவரங்களுக்கு கீழே காண்க.

    + +`getAttribute()` (எந்த பண்புக்கூறை அணுக வேண்டும் என்பதை அனுப்புதல்) மற்றும் `setAttribute()` (எந்த பண்புக்கூறை மாற்ற வேண்டும் மற்றும் அந்த பண்புக்கூறுக்கு என்ன மதிப்பை ஒதுக்க வேண்டும் என்பதை அனுப்புதல்) முறைகளைப் பயன்படுத்தி உறுப்பு பண்புக்கூறுகளை மாற்றியமைக்கலாம்: + +```js +let imgElem = document.querySelector("#picture"); +imgElement.setAttribute("src", "my-other-picture.png"); //src ஐ அமைக்கவும் + +console.log(imgElem.getAttribute("src")); //=> 'my-other-picture.png' + +// `hasAttribute()` முறை ஒரு பூலியனைத் திரும்பப் பெறுகிறது. +let isThick = document.querySelector("svg rect").hasAttribute("stroke-width"); //சங்கிலியால் பிணைக்கப்பட்ட அநாமதேய மாறிகள் +``` + +இந்த முறைகள் `data-` பண்புக்கூறு போன்ற HTML விவரக்குறிப்பால் வரையறுக்கப்படாத பண்புக்கூறுகளுடன் தொடர்பு கொள்ள உங்களை அனுமதிக்கும். இருப்பினும், அவை சில உறுப்பு பண்புக்கூறுகளுடன் (உள்ளீடு (``) உறுப்பின் `value` பண்புக்கூறு போன்றவை) வேலை _செய்யாது_. பிற கூறுகள் அவற்றின் சொந்த சிறப்பு DOM பண்புகளைக் கொண்டிருக்கலாம்: [HTML இடைமுகங்களின்](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#HTML_interfaces) பட்டியலுக்கு [DOM ஆவணப் பக்கத்தைப்](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) பார்க்கவும். + +#### உறுப்பு CSS ஐ மாற்றுதல் (Changing Element CSS) + +ஒரு உறுப்பின் **CSS வகுப்புகள்** (மற்றும் உள்ளமை ஸ்டைலிங் கூட) மாற்றுவது சாத்தியமாகும். ஆனால் மற்ற பண்புக்கூறுகளைப் போல `class` பண்பைப் பயன்படுத்துவதற்குப் பதிலாக, நீங்கள் **`classList`** பண்பை அணுகுகிறீர்கள். நவீன உலாவிகளில் (IE 10 அல்லது அதற்குப் பிந்தைய), இந்தப் பண்பு பட்டியலில் இருந்து வகுப்புகளைச் சேர்ப்பதற்கும் அகற்றுவதற்கும் `.add()` மற்றும் `.remove()` முறைகளை ஆதரிக்கிறது: + +```js +// வகுப்புகளின் பட்டியலை அணுகவும் +let classList = elem.classList; + +// ஒரு வகுப்பைச் சேர்க்கவும் +elem.classList.add("small"); //ஒற்றை வகுப்பைச் சேர்க்கவும் +elem.classList.add("alert", "alert-warning"); //பல வகுப்புகளைச் சேர்க்கவும் (IE இல் இல்லை) + +// ஒரு வகுப்பை அகற்றவும் +elem.classList.remove("small"); + +//"toggle" (இல்லையென்றால் சேர்க்கவும், இருந்தால் அகற்றவும்) +elem.classList.toggle("small"); +``` + +- IE 10+ இந்த முறைகளை ஆதரிக்கிறது என்றாலும், அது அவற்றுக்கான _பல வாதங்களை_ (multiple arguments) ஆதரிக்காது (எனவே நீங்கள் ஒரு முறை அழைப்பில் பல வகுப்புகளைச் சேர்க்க முடியாது). பழைய உலாவிகளை (எந்த IE பதிப்பும் உட்பட) நீங்கள் ஆதரிக்க வேண்டும் என்றால், `.className` பண்பை ஒரு சரமாக (String) பாவித்து மாற்றலாம்: + + ```js + // IE க்கான மாற்று (அனைத்தும்) + var classes = elem.className; + classes += " " + "sweet sour"; //சரத்தை மாற்றவும் (சேர்க்கவும்!) + elem.className = classes; //மீண்டும் ஒதுக்கவும் + ``` + + `classList` முறைகள் மைக்ரோசாப்ட் எட்ஜ் இல் சரியாக வேலை செய்கின்றன. + +DOM உறுப்பின் `style` பண்பு மூலம் உறுப்புகளின் தனிப்பட்ட CSS பண்புகளை அணுகவும் மாற்றவும் முடியும். `.style` என்பது ஒரு பொருளைக் குறிக்கிறது, அதன் விசைகள் CSS பண்புப் பெயர்கள் (ஆனால் _kabob-case_ க்குப் பதிலாக _camelCase_ இல் எழுதப்பட்டவை) + +```js +let h1 = document.querySelector("h1"); +h1.style.color = "green"; +h1.style.backgroundColor = "black"; //`.background-color` அல்ல +``` + +

    பொதுவாக, குறிப்பிட்ட நடை (style) பண்புகளை மாற்றுவதற்குப் பதிலாக, உறுப்பின் வகுப்பை (class) மாற்றுவதன் மூலம் உறுப்பு CSS ஐ மாற்ற வேண்டும்.

    + +### DOM மரத்தை மாற்றுதல் (Modifying the DOM Tree) + +தனிப்பட்ட DOM உறுப்புகளை மாற்றுவதோடு கூடுதலாக, _DOM மரத்தையே_ அணுகி மாற்றுவதும் சாத்தியமாகும்! அதாவது, நீங்கள் புதிய உறுப்புகளை உருவாக்கி அவற்றை மரத்தில் (படிக்கவும்: வலைப்பக்கம்) சேர்க்கலாம், மரத்திலிருந்து உறுப்புகளை அகற்றலாம், அல்லது மரத்திலிருந்து அவற்றைப் பறித்து வேறு எங்காவது செருகலாம்! + +முதலில், ஒவ்வொரு ஜாவாஸ்கிரிப்ட் DOM உறுப்புக்கும் அதன் பெற்றோர், குழந்தைகள் மற்றும் உடன்பிறப்பு (sibling) உறுப்புகளைக் குறிக்கும் [ _படிக்க-மட்டும்_ பண்புகள் (read-only properties)](https://www.w3schools.com/js/js_htmldom_navigation.asp) இருப்பதைக் கவனியுங்கள்: + +```html +
    +
    +

    First paragraph

    +

    Second paragraph

    +
    +
    +
    +
    +``` + +```js +// முதல் பிரிவிற்கான குறிப்பைப் பெறவும் +let firstSection = document.querySelector("#first-section"); + +// "பெற்றோர் (parent)" கணுக்கான குறிப்பைப் பெறவும் +let main = firstSection.parentElement; +console.log(main); //
    ...
    + +// "குழந்தை (child)" கூறுகளுக்கான குறிப்பைப் பெறவும் (2 பத்திகள்) +let paragraphs = firstSection.children; +console.log(paragraphs.length); //2 +console.log(paragraphs[0]); //

    First paragraph

    + +// அடுத்த உடன்பிறப்பிற்கான (next sibling) குறிப்பைப் பெறவும் +let sectionSection = firstSection.nextElementSibling; +console.log(secondSection); //
    +``` + +- இந்தப் பண்புகள் _HTML கூறுகளுடன்_ மட்டுமே செயல்படுகின்றன என்பதை நினைவில் கொள்க - உரை உள்ளடக்கக் கணுக்கள் (text content nodes) புறக்கணிக்கப்படுகின்றன. உரை உள்ளடக்கக் கணுக்களையும் கருத்தில் கொள்ள, நீங்கள் சமமான `parentNode` மற்றும் `childNodes` பண்புகளைப் பயன்படுத்தலாம். + + SVG உள்ளடக்கம் `parentElement` ஐ ஆதரிக்காது, ஆனால் `parentNode` ஐ ஆதரிக்கிறது. + +புதிய HTML DOM உறுப்புகளை உருவாக்கி மரத்தில் சேர்க்க முறைகளையும் அழைக்கலாம். ஒரு புதிய HTML உறுப்பை உருவாக்க `document.createElement()` செயல்பாடு பயன்படுத்தப்படுகிறது. இருப்பினும் இந்த உறுப்பு மரத்தின் ஒரு பகுதியாக உருவாக்கப்படவில்லை (எல்லாவற்றிற்கும் மேலாக, அது பக்கத்தில் எங்கே வைக்கப்படும் என்று நீங்கள் குறிப்பிடவில்லை)! எனவே புதிய உறுப்பை வேறொரு உறுப்பின் குழந்தையாகச் சேர்க்க `appendChild` போன்ற முறையையும் பயன்படுத்த வேண்டும்: + +```js +// ஒரு புதிய

    ஐ உருவாக்கவும் (இன்னும் மரத்தில் இல்லை) +let newP = document.createElement("p"); +newP.textContent = "நான் புதியவன்!"; + +// உரை உள்ளடக்கத்தின் கணுவை மட்டும் உருவாக்கவும் (HTML உறுப்பு அல்ல, உரை மட்டுமே) +let newText = document.createTextNode("நான் வெற்று"); + +let main = document.querySelector("main"); +main.appendChild(newP); //உறுப்பை உள்ளே சேர்க்கவும் (முடிவில்) +main.appendChild(newText); //உரையை உள்ளே சேர்க்கவும்,

    க்குப் பிறகு + +// உறுப்புக்கு முன் அநாமதேய புதிய கணுவைச் சேர்க்கவும். அளவுருக்கள்: (புதியது, பழையது) +main.insertBefore(document.createTextNode("First!"), newP); + +// கணுவை மாற்றவும். அளவுருக்கள்: (புதியது, பழையது) +main.replaceChild(document.createTextNode("boo"), newText); + +// கணுவை அகற்றவும் +main.removeChild(main.querySelector("p")); +``` + +`innerHTML` பண்பை மாற்றுவதை விட `appendChild()` முறை ஒரு தூய்மையான அணுகுமுறையாகக் கருதப்படுகிறது, ஏனெனில் இது முன்பு இருந்ததை அழிக்காமல் DOM மரத்தை சரிசெய்ய உங்களை அனுமதிக்கிறது. ஒரு _தொகுதி (block)_ உறுப்பை உருவாக்க `document.createElement()` ஐப் பயன்படுத்துவது ஒரு பொதுவான நடைமுறையாகும், பின்னர் அந்த உறுப்பின் `innerHTML` ஐ அதன் உள்ளடக்கத்திற்கு (இது _உள்ளமை (inline)_ உறுப்புகளை உள்ளடக்கியிருக்கலாம்) அமைத்து, பின்னர் புதிய தொகுதி உறுப்பை மரத்தின் விரும்பிய இடத்தில் சேர்க்க `appendChild` ஐப் பயன்படுத்தவும். + +### அணுகல்தன்மை (Accessibility) + +எப்போதெல்லாம் நீங்கள் ஒரு புதிய தொழில்நுட்பத்தைக் கற்றுக்கொள்கிறீர்களோ, அப்போது நீங்கள் கேட்க வேண்டும்: **இது அணுகல்தன்மையை எவ்வாறு பாதிக்கிறது?** ஜாவாஸ்கிரிப்ட் குறியீடு காட்டப்படும் DOM ஐ மாற்றுவதன் மூலம், ஒரு பக்கத்தின் உள்ளடக்கம் ஸ்கிரீன் ரீடரால் படிக்கப்பட்ட _பிறகு_ மாற வாய்ப்புள்ளது. மற்றும் பார்வை கொண்ட ஒரு பயனர் மாற்றத்தை பார்வை மூலம் காண முடியும் என்றாலும், நீங்கள் சொல்லாத வரை பக்கத்தில் ஏதோ வித்தியாசமாக இருப்பதை அறிய ஸ்கிரீன் ரீடருக்கு எந்த வழியும் இல்லை. + +ஒரு உறுப்பை [ARIA லைவ் பிராந்தியமாக (ARIA Live Region)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) மாற்றுவதன் மூலம், ஒரு பக்கத்தில் உள்ள ஒரு உறுப்பு _எதிர்காலத்தில்_ அதன் உள்ளடக்கத்தை மாற்றக்கூடும் என்பதை ஸ்கிரீன் ரீடர்களுக்கு நீங்கள் தெரிவிக்கலாம். லைவ் பிராந்தியங்கள் உதவி தொழில்நுட்பங்களால் "கண்காணிக்கப்படுகின்றன", மேலும் உள்ளடக்கம் மாறும்போதெல்லாம் அவை புதிய உள்ளடக்கத்தை முதல் முறையாகப் படிப்பது போல வாசகரிடம் பேசும். + +`aria-live` பண்புக்கூறை வழங்குவதன் மூலம் ஒரு உறுப்பை லைவ் பிராந்தியமாக மாற்றுகிறீர்கள்: + +```html +

    இந்த உள்ளடக்கம் மாறலாம்!
    +``` + +`aria-live` பண்புக்கூறுக்கு ஒதுக்கப்பட்ட மதிப்பு "கண்ணிய நிலை (politeness level)" ஆகும், இது ஸ்கிரீன் ரீடர் எந்த முன்னுரிமையுடன் மாற்றத்தைப் படிக்க வேண்டும் என்பதைக் குறிப்பிடுகிறது. மிகவும் பொதுவான விருப்பம் (நீங்கள் எப்போதும் பயன்படுத்த வேண்டியது) `"polite"`, இது பயனர் தற்போது படிக்கும் எதையும் _இடைநிறுத்திய (paused)_ பின்னரே மாற்றப்பட்ட உரை படிக்கப்படும் என்பதைக் குறிக்கிறது. ஒரு `"polite"` எச்சரிக்கையானது தற்போது படித்துக்கொண்டிருக்கும் உரை அல்லது விளக்கத்திற்கு இடையூறு விளைவிக்காது, ஆனால் ஒரு இடைவெளி ஏற்படும் போது உட்செலுத்தப்படும் (தற்போதைய வாசிப்பு அதிக நேரம் தொடர்ந்தால், புதிய உள்ளடக்கம் பேசப்படாது). + +- மற்றொரு விருப்பம் `"assertive"` ஆகும், இது புதிய உள்ளடக்கம் மாறியவுடன் பேசப்பட வேண்டும் என்பதைக் குறிக்கிறது, இது மற்ற உள்ளடக்கத்திற்கு இடையூறு விளைவிக்கலாம். முக்கியமான தகவல்களுக்கு (எச்சரிக்கைகள், விழிப்பூட்டல்கள் அல்லது பிழைகள் போன்றவை) மட்டுமே இது பயன்படுத்தப்பட வேண்டும், ஏனெனில் இது பயனரின் ஓட்டத்திற்கு மிகவும் திசைதிருப்பக்கூடிய வகையில் இடையூறு விளைவிக்கும். சுருக்கமாக: _எப்பொழுதும் கண்ணியமாக இருங்கள்!_ diff --git a/ta/document-object-model/listening-of-events.md b/ta/document-object-model/listening-of-events.md new file mode 100644 index 00000000..e365dda3 --- /dev/null +++ b/ta/document-object-model/listening-of-events.md @@ -0,0 +1,138 @@ +--- +chapter: 28 +description: ஜாவாஸ்கிரிப்டில் நிகழ்வுகளைக் கேட்பதைப் (Listening of events) புரிந்துகொள்வது. +--- + +## நிகழ்வுகளைக் கேட்பது (Listening for Events) + +ஒரு பக்கத்தை **ஊடாடக்கூடியதாக (interactive)** மாற்ற (அதாவது, பயனர் செயல்களுக்குப் பதிலளிக்கும் வகையில் மாறக்கூடியது), நீங்கள் _பயனர் நிகழ்வுகளுக்கு (user events)_ பதிலளிக்க வேண்டும். ஒரு பயனர் கணினியுடன் தொடர்பு கொள்ளும்போதெல்லாம், அந்தத் தொடர்புகளை ஒரு **நிகழ்வாக (event)** இயக்க முறைமை (operating system) அறிவிக்கிறது: பொத்தானைக் கிளிக் செய்யும் _நிகழ்வு_, மவுஸ் நகர்த்தப்படும் _நிகழ்வு_, விசைப்பலகை விசை அழுத்தப்படும் _நிகழ்வு_ போன்றவை. இந்த நிகழ்வுகள் முழு கணினிக்கும் **ஒளிபரப்பப்படுகின்றன (broadcast)**, இது எந்தவொரு பயன்பாட்டையும் (உலாவி உட்பட) ஒரு குறிப்பிட்ட ஜாவாஸ்கிரிப்ட் செயல்பாட்டைச் செயல்படுத்துவது போன்ற நிகழ்வின் நிகழ்வுக்கு "பதிலளிக்க" அனுமதிக்கிறது. + +எனவே பயனர் செயல்களுக்கு (மற்றும் அந்த செயல்கள் உருவாக்கும் _நிகழ்வுகளுக்கு_) பதிலளிக்க, **நிகழ்வு நடக்கும் போது** செயல்படுத்தப்படும் ஒரு செயல்பாட்டை நாம் வரையறுக்க வேண்டும். நீங்கள் சாதாரணமாக ஒரு செயல்பாட்டை வரையறுப்பீர்கள், ஆனால் அந்த செயல்பாடு உங்கள் ஸ்கிரிப்டில் ஒரு குறிப்பிட்ட படியாக உங்களால் அழைக்கப்படாது. அதற்குப் பதிலாக, நீங்கள் குறிப்பிடும் செயல்பாடு, எதிர்காலத்தில் ஏதோ ஒரு உறுதியற்ற நேரத்தில் ஒரு நிகழ்வு நிகழும்போது _கணினியால்_ செயல்படுத்தப்படும். இந்த செயல்முறை [நிகழ்வு உந்துதல் நிரலாக்கம் (event-driven programming)](https://en.wikipedia.org/wiki/Event-driven_programming) என அழைக்கப்படுகிறது. இது **ஒத்திசைவற்ற நிரலாக்கத்திற்கும் (asynchronous programming)** ஒரு எடுத்துக்காட்டு: இதில் அறிக்கைகள் ஒன்றன்பின் ஒன்றாக ("ஒத்திசைவாக") செயல்படுத்தப்படுவதில்லை, ஆனால் "வரிசை மாறி" அல்லது ஒரே நேரத்தில் கூட நிகழலாம்! (ஒத்திசைவற்ற நிரலாக்கத்துடன் பணிபுரிவது பற்றி மேலும் அறிய, [அத்தியாயம் 14](#ajax) ஐக் காண்க). + +உங்கள் ஸ்கிரிப்ட் பயனர் நிகழ்வுகளுக்குப் பதிலளிக்க, நீங்கள் _ஒரு நிகழ்வு கேட்பவரைப் பதிவு செய்ய வேண்டும் (register an event listener)_. இது சமூக ஊடகங்களில் ஒருவரைப் பின்தொடர்வது போன்றது: அந்த நபரின் புதுப்பிப்புகளை நீங்கள் "கேட்க (listen)" விரும்புகிறீர்கள் என்பதையும், அந்த நபரிடமிருந்து சில செய்திகளை "கேட்கும்போது (hear)" நீங்கள் என்ன செய்ய விரும்புகிறீர்கள் என்பதையும் குறிப்பிடுகிறீர்கள். + +- உங்கள் பெயர் குறிப்பிடப்படும்போது ஸ்லாக் (Slack) உங்களுக்குத் தெரிவிக்க வேண்டும் என்று நீங்கள் குறிப்பிடுவது மற்றொரு நல்ல ஒப்புமை! + +DOM API ஆனது தேர்ந்தெடுக்கப்பட்ட உறுப்பில் (எ.கா., நீங்கள் கேட்க விரும்பும் உறுப்பில்) **`.addEventListener()`** ஐ அழைப்பதன் மூலம் ஒரு நிகழ்வு கேட்பவரைப் பதிவு செய்ய உங்களை அனுமதிக்கிறது. இந்த முறை இரண்டு வாதங்களை (arguments) எடுத்துக்கொள்கிறது: நீங்கள் எந்த வகையான நிகழ்வைக் கேட்க விரும்புகிறீர்கள் என்பதைக் குறிக்கும் சரம் (string), மற்றும் அந்த நிகழ்வை நீங்கள் கேட்கும்போது செயல்படுத்துவதற்கான _பின்கூப்பிடல் செயல்பாடு (callback function)_: + +```js +// பெயரிடப்பட்ட (named) பின்கூப்பிடல் செயல்பாடு +function onClickCallback() { + console.log("என்னை கிளிக் செய்தீர்கள்!"); +} + +// நாம் "கேட்க" விரும்பும் உறுப்பிற்கான குறிப்பைப் பெறவும் +let button = document.querySelector("button"); + +// 'click' நிகழ்வுகளுக்கு கேட்பவரைப் பதிவு செய்யவும் +button.addEventListener("click", onClickCallback); +``` + +- பயனர் பொத்தானைக் கிளிக் செய்யும் போது, அது ஒரு `'click'` நிகழ்வை ( "நான் கிளிக் செய்யப்பட்டேன்! நான் கிளிக் செய்யப்பட்டேன்!") "கத்தும்". அத்தகைய நிகழ்வுக்காக நீங்கள் கேட்பவரை (எச்சரிக்கை/அறிவிப்பு) அமைத்துள்ளதால், உங்கள் ஸ்கிரிப்ட் ஏதாவது செய்ய முடியும் - மற்றும் அது என்ன செய்யும் என்றால் குறிப்பிடப்பட்ட பின்கூப்பிடல் செயல்பாட்டை (callback function) இயக்கும். + + இது யாரிடமாவது ஒரு செய்முறையை (recipe) கொடுத்து, "நான் உங்களை அழைக்கும் போது, இந்த கேக்கை சுட்டுக்கொடுங்கள்!" என்று சொல்வதைப் போன்றது. + +- ஒரு _அநாமதேய செயல்பாட்டை (anonymous function)_ பின்கூப்பிடலாகப் பயன்படுத்துவது **மிகவும்** பொதுவானது: + + ```js + let button = document.querySelect.select("button"); + button.addEventListener("click", function () { + console.log("என்னை கிளிக் செய்தீர்கள்!"); + }); + ``` + +- இந்த கேட்பவர் அந்த குறிப்பிட்ட பொத்தானுக்கு _மட்டுமே_ பொருந்தும் என்பதை நினைவில் கொள்க - வேறு பொத்தானுக்குப் பதிலளிக்க விரும்பினால், நீங்கள் தனி கேட்பவரைப் பதிவு செய்ய வேண்டும்! மேலும், முறை பெயர் குறிப்பிடுவது போல, ஒரே நிகழ்வுக்கு ஒரே உறுப்பில் பல கேட்பவர்களை (பின்கூப்பிடல்கள்) சேர்க்க முடியும்: அவை அனைத்தும் "ஒரே நேரத்தில்" செயல்படுத்தப்படும். + +நிகழ்வு பின்கூப்பீடு ஒற்றை வாதமாக (single argument) அனுப்பப்படும்: நிகழ்ந்த _"நிகழ்வைக்"_ குறிக்கும் ஒரு பொருள். (ஜாவாஸ்கிரிப்டில் அனைத்து அளவுருக்களும் விருப்பமானவை என்பதால், அது மேலே உள்ள எடுத்துக்காட்டில் பயன்படுத்தப்படவில்லை, அது பின்கூப்பீடு வரையறையில் சேர்க்கப்படவில்லை). நிகழ்வு எங்கு நிகழ்ந்தது (x,y ஆயங்களில்), எந்த DOM உறுப்பு நிகழ்வை ஏற்படுத்தியது மற்றும் பல தகவல்கள் இந்த நிகழ்வில் அடங்கும்: + +```js +elem.addEventListener("click", function (event) { + // யார் கிளிக் செய்யப்பட்டார்கள் என்பதைப் பெறுங்கள்; + let clickedElem = event.target; // நிகழ்வின் target பண்பு + console.log(clickedElem); +}); +``` + +சில நேரங்களில் ஒரு நிகழ்வின் "வழக்கமான" முடிவுகள் நிகழ்வதைத் தடுக்க நீங்கள் விரும்பலாம் என்பதையும் நினைவில் கொள்க. எடுத்துக்காட்டாக, ஒரு பொத்தான் அதன் வழக்கமான பொத்தான் செயலை (படிவத்தைச் சமர்ப்பிப்பது (submitting a form) போன்றவற்றை) செய்வதை நீங்கள் விரும்பாமல் இருக்கலாம், அதற்குப் பதிலாக உங்கள் சொந்த தனிப்பயன் நடத்தையை (custom behavior) வழங்க விரும்பலாம். இதை ஆதரிக்க, நிகழ்வில் பின்வரும் முறைகளை அழைப்பதன் மூலம் நீங்கள் "நிகழ்வை குறுக்கிடலாம் (interrupt the event)": + +```js +submitBtn.addEventListener("click", function (event) { + event.preventDefault(); // வழக்கமான நடத்தையை செய்ய வேண்டாம் + event.stopPropagation(); // பெற்றோர்களுக்கு நிகழ்வை அனுப்ப வேண்டாம் + + //..தனிப்பயன் நடத்தை இங்கே செய்யுங்கள் + + return false; // வழக்கமான நடத்தை அல்லது பரப்புதல் இரண்டையும் செய்ய வேண்டாம்! (IE க்காக) +}); +``` + +### நிகழ்வுகளின் வகைகள் (Types of Events) + +நீங்கள் கேட்கக்கூடிய [பல்வேறு நிகழ்வுகள்](https://developer.mozilla.org/en-US/docs/Web/Events) உள்ளன, அவற்றுள்: + +- **`'click'`** போன்ற [மவுஸ் நிகழ்வுகள் (Mouse Events)](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). `event.offsetX` மற்றும் `event.offsetY` கிளிக் இருப்பிடத்திற்கான (x,y) ஆயங்களை _இலக்கு உறுப்புடன் (target element) தொடர்புடையதாக_ வழங்கும்; உலாவி சாளரத்துடன் (browser window) தொடர்புடைய ஆயங்களுக்கு நீங்கள் `clientX/Y` ஐப் பயன்படுத்தலாம், அல்லது ஆவணத்துடன் தொடர்புடைய ஆயங்களுக்கு (உருட்டுதலைப் பொருட்படுத்தாமல்) `pageX/Y` ஐப் பயன்படுத்தலாம். விவரங்களுக்கு [இந்த இடுகையைப்](http://www.quirksmode.org/mobile/viewports.html) பார்க்கவும், மற்றும் ஒரு உதாரணத்திற்கு [இந்தப் பக்கத்தைப்](http://www.quirksmode.org/m/tests/mouseprops.html) பார்க்கவும். + + பிற மவுஸ் நிகழ்வுகளில் `'dblclick'` (இரட்டை கிளிக்), `'mousedown'` (மவுஸ் பொத்தான் கீழே அழுத்தப்பட்டுள்ளது, வைத்திருக்கப்படலாம்), `'hover'` (மவுஸ் மேலோட்டமாக உள்ளது), `'mouseenter'` (மவுஸ் உறுப்பின் மீது நகர்கிறது), `'mousemove'` (மவுஸ் உறுப்பின் மீது நகர்கிறது), மற்றும் `'mouseleave'` (மவுஸ் உறுப்பை விட்டு நகர்கிறது) ஆகியவை அடங்கும். + +- **`'keydown'`** போன்ற [விசைப்பலகை நிகழ்வுகள் (Keyboard Events)](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent). `event.key` பண்பு _எந்த விசை_ அழுத்தப்பட்டது என்பதைத் தீர்மானிக்கப் பயன்படுகிறது, இது நீங்கள் சரிபார்க்கக்கூடிய ஒரு [முன்பே வரையறுக்கப்பட்ட முக்கிய மதிப்பைத்](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) தருகிறது: + + ```js + elem.addEventListener("keydown", function (event) { + if (event.key === "ArrowUp") { + console.log("மேலே செல்கிறது!"); + } + //... + }); + ``` + + நிகழ்வு நிகழும்போது ஷிப்ட் (shift), கண்ட்ரோல் (control) அல்லது மெட்டா (Windows/command) போன்ற ஏதேனும் "மாற்றி விசைகள் (modifier keys)" அழுத்தப்பட்டுள்ளதா என்பதைச் சரிபார்க்கும் பண்புகளையும் `event` பொருள் கொண்டுள்ளது. + + நீங்கள் பெரும்பாலும் `'keydown'` மற்றும் `'keyup'` நிகழ்வுகளுக்குப் பதிலளிக்க விரும்புகிறீர்கள் என்பதை நினைவில் கொள்க; `'keypressed'` நிகழ்வு பின்னர் அனுப்பப்படும் மற்றும் இது மாற்றி விசைகளுக்கு (modifier keys) மட்டும் பொருந்தாது. + +- [சாளர நிகழ்வுகள் (Window Events)](https://developer.mozilla.org/en-US/docs/Web/API/Window#Event_handlers) என்பவை `window` global ஆல் உருவாக்கப்பட்ட நிகழ்வாகும், இதற்கும் நாம் நிகழ்வு கேட்பவர்களைப் பதிவு செய்ய முடியும்! எடுத்துக்காட்டாக, சாளரத்தின் அளவு எப்போது மாறியது என்பதை அடையாளம் காண `'resize'` நிகழ்வைப் பயன்படுத்தலாம் (எ.கா., உள்ளடக்கத்தை CSS ஆக மாற்றுவதற்கு நீங்கள் விரும்பினால்): + + ```js + window.addEventListener("resize", function () { + //... + }); + ``` + + கூடுதலாக, வலைப்பக்கம் ஏற்றப்படுவதை முடித்தவுடன் நிகழும் ஒரு சிறப்பு நிகழ்வு பின்கூப்பிடலை `window` global வரையறுக்கிறது. வலைப்பக்கம் ஏற்றிய _பிறகு_ (எ.கா., `` இல் குறிப்பிடப்பட்டுள்ள ஸ்கிரிப்டுகளுக்கு) மட்டுமே குறியீட்டை இயக்க இந்தப் பின்கூப்பிடலுக்கு உங்கள் சொந்த செயல்பாட்டை ஒதுக்கலாம்: + + ```js + window.onload = function () { + //...பக்கம் தயாரானவுடன் விஷயங்களைச் செய்யுங்கள் (எ.கா., உங்கள் குறியீட்டின் மீதமுள்ளவற்றை இயக்கவும்) + }; + ``` + +

    `onclick` போன்ற பண்புக்கூறுகளைப் பயன்படுத்தி உங்கள் HTML இல் ஜாவாஸ்கிரிப்டைக் கலக்க வேண்டாம். உங்கள் குறியீட்டை ஒழுங்கமைத்து வைக்கவும், கவலைகளின் தூய்மையான பிரிப்பை (clean separation of concerns) உறுதிப்படுத்தவும் எப்போதும் ஒரு தனி ஜாவாஸ்கிரிப்ட் கோப்பில் நிகழ்வு கேட்பவர்களைப் பதிவு செய்யவும்.

    + +### நிகழ்வு உந்துதல் நிரலாக்கம் (Event-Driven Programming) + +வழக்கமான இணைய நிரலில் நிகழ்வு பின்கூப்பீடு செயல்பாடுகள் மீண்டும் மீண்டும் நிகழலாம் (எ.கா., ஒவ்வொரு முறையும் பயனர் பொத்தானைக் கிளிக் செய்யும் போது). இது ஒரு `while` சுழற்சியின் உடல் (body) போல செயல்பட வைக்கிறது. இருப்பினும், இந்த பின்கூப்பிடல்கள் _செயல்பாடுகள் (functions)_ என்பதால், அவற்றுக்குள் வரையறுக்கப்பட்ட எந்த மாறிகளும் அந்த செயல்பாட்டிற்கு **ஸ்கோப் (scoped)** செய்யப்படும், மேலும் அடுத்தடுத்த செயலாக்கங்களில் கிடைக்காது. எனவே நீங்கள் சில கூடுதல் தகவல்களைக் கண்காணிக்க விரும்பினால் (எ.கா., பொத்தான் எத்தனை முறை கிளிக் செய்யப்பட்டது), செயல்பாட்டிற்கு _வெளியே_ (எ.கா., ஒரு **global** இல்) அறிவிக்கப்பட்ட மாறியைப் பயன்படுத்த வேண்டும். நிரலின் **நிலையை (state)** (சூழ்நிலை) குறிக்க இத்தகைய மாறிகளைப் பயன்படுத்தலாம், பின்னர் கீழேயுள்ள வடிவத்தைப் பின்பற்றி ஒரு நிகழ்வு ஏற்படும் போது என்ன நடத்தைச் செய்ய வேண்டும் என்பதைத் தீர்மானிக்க அதைப் பயன்படுத்தலாம்: + +``` +//போலிக்குறியீடு (pseudocode) +ஒரு நிகழ்வு நிகழும்போது { + நிரலின் நிலையை (STATE) சரிபார்க்கவும்; + அந்த நிலையின் அடிப்படையில் என்ன செய்வது என்று முடிவு (DECIDE) செய்யவும்; + அடுத்த நிகழ்வுக்குத் தேவையான நிலையைப் புதுப்பிக்கவும் (UPDATE); +} +``` + +எடுத்துக்காட்டாக: + +```js +let clickCount = 0; //"நிலையை (state)" கண்காணிக்கவும் (global) +document.querySelector("button").addEventListener("click", function () { + if (clickCount > 10) { + //என்ன செய்வது என்று முடிவு செய்யுங்கள் + console.log("இது போதும் என்று நினைக்கிறேன்"); + } else { + clickCount++; //நிலையை மாற்றவும் (+1) + console.log("என்னை கிளிக் செய்தீர்கள்!"); + } +}); +``` + +- இந்த "நிலை (state)" மாறிகள் global ஆக இருக்கலாம் அல்லது closure ஆகக் கொண்டிருக்கும் ஒரு செயல்பாட்டிற்குள் எளிதாக அறிவிக்கப்படலாம். நிலை மாறிகள் பெரும்பாலும் பொருள்களாகும் (objects), தனிப்பட்ட மதிப்புகள் பண்புகளாகச் சேமிக்கப்படும். இது பெயர் இடைவெளி (name-spacing) அம்சத்தை வழங்குகிறது, மேலும் பல மாறிகளால் குறியீடு இரைச்சலாகாமல் இருக்க உதவுகிறது. diff --git a/ta/error-handling/README.md b/ta/error-handling/README.md new file mode 100644 index 00000000..e3ba0e4d --- /dev/null +++ b/ta/error-handling/README.md @@ -0,0 +1,65 @@ +--- +layout: editorial +chapter: 12 +pageNumber: 83 +description: நிரலாக்கத்தில் பல்வேறு காரணங்களுக்காக பிழைகள் நிகழ்கின்றன, சில குறியீடு பிழைகளாலும், சில தவறான உள்ளீட்டாலும், மற்றவை எதிர்பாராத விஷயங்களாலும் நிகழ்கின்றன. ஒரு பிழை ஏற்படும் போது முழு ஸ்கிரிப்டும் (script) நிறுத்தப்படுவதையோ அல்லது செயலிழப்பதையோ (crashing) தடுக்க try catch உதவுகிறது, இது விதிவிலக்கான (exceptional) நிகழ்வுகளை நேர்த்தியாகக் கையாளவும் மாற்று நடத்தையை (fallback behavior) வழங்கவும் அனுமதிக்கிறது. +--- + +# அத்தியாயம் 12 +# பிழை கையாளுதல் (Error Handling) + +மென்பொருள் மேம்பாட்டில் பிழைகள் தவிர்க்க முடியாத ஒரு பகுதியாகும். வலுவான மற்றும் நம்பகமான ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுதுவதற்கு அவற்றை திறம்பட கையாள்வது முக்கியமானது. இந்த வழிகாட்டி ஜாவாஸ்கிரிப்டில் பிழை கையாளுதலின் அடிப்படைகள் மூலம் உங்களை அழைத்துச் செல்லும், அது ஏன் முக்கியமானது, பிழைகளின் வகைகள் மற்றும் `try...catch` அறிக்கையை எவ்வாறு பயன்படுத்துவது என்பது உட்பட. + + + +## பிழை கையாளுதல் ஏன் முக்கியம் + +பல காரணங்களுக்காக பிழை கையாளுதல் அவசியமானது: +- **நேர்த்தியான மீட்பு (Graceful Recovery)**: எதிர்பாராத சிக்கல்களிலிருந்து நேர்த்தியாக மீண்டு, தொடர்ந்து செயல்பட இது உங்கள் குறியீட்டை அனுமதிக்கிறது. +- **பயனர் அனுபவம் (User Experience)**: பயனுள்ள பிழை கையாளுதல் அர்த்தமுள்ள பிழை செய்திகளை வழங்குவதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்துகிறது. +- **பிழைதிருத்தம் (Debugging)**: ஒழுங்காக கையாளப்பட்ட பிழைகள் பிழைதிருத்தத்தை எளிதாக்குகின்றன, ஏனெனில் நீங்கள் சிக்கல்களை விரைவாகக் கண்டறியலாம். +- **குறியீட்டு நம்பகத்தன்மை (Code Reliability)**: பிழை கையாளுதல் உங்கள் குறியீடு நம்பகமானதாகவும் வலுவானதாகவும் இருப்பதை உறுதிசெய்கிறது, செயலிழப்புகளின் அபாயத்தைக் குறைக்கிறது. + +## பிழைகளின் வகைகள் + +ஜாவாஸ்கிரிப்ட் பிழைகளை பல வகைகளாகப் பிரிக்கலாம், அவற்றுள்: +- **தொடரியல் பிழைகள் (Syntax Errors)**: தவறான தொடரியல் காரணமாக ஏற்படும் பிழைகள். +- **இயக்கநேரப் பிழைகள் (Runtime Errors)**: குறியீடு செயல்படுத்தலின் போது நிகழும் பிழைகள். +- **தர்க்கப் பிழைகள் (Logic Errors)**: குறியீட்டில் உள்ள குறைபாடான தர்க்கத்தின் விளைவாக ஏற்படும் பிழைகள். + +## பொதுவான பயன்பாட்டு வழக்குகள் (Common Use Cases) + +தோல்வியடையக்கூடிய பிணைய கோரிக்கைகளை (network requests) கையாளுதல். +பயனர் உள்ளீட்டை பாகுபடுத்துதல் (Parsing) மற்றும் சரிபார்த்தல். +மூன்றாம் தரப்பு நூலகப் (third-party library) பிழைகளை நிர்வகித்தல். + +## பிழை கையாளுதலின் நன்மைகள் + +பயனுள்ள பிழை கையாளுதல் பல நன்மைகளை வழங்குகிறது: + +- ஸ்கிரிப்ட் நிறுத்தப்படுவதைத் (termination) தடுக்கிறது. +- பிழைகளை கட்டுப்படுத்தப்பட்ட முறையில் கையாள அனுமதிக்கிறது. +- பிழைதிருத்தத்திற்கான விரிவான பிழை தகவலை வழங்குகிறது. +- குறியீட்டு நம்பகத்தன்மையையும் பயனர் அனுபவத்தையும் மேம்படுத்துகிறது. + + +## சிறந்த நடைமுறைகள் (Best Practices) + +பிழை கையாளுதலைச் சிறப்பாகப் பயன்படுத்த, இந்த சிறந்த நடைமுறைகளைக் கவனியுங்கள்: + +- முடிந்தவரை குறிப்பிட்ட பிழை வகைகளைப் (specific error types) பயன்படுத்தவும். +- பிழைதிருத்த நோக்கங்களுக்காக பிழைகளைப் பதிவு (Log errors) செய்யவும். +- தெளிவான மற்றும் பயனர் நட்பு பிழை செய்திகளை வழங்கவும். +- பிழைகளை அவற்றின் மூலத்திற்கு (source) எவ்வளவு நெருக்கமாக முடியுமோ அவ்வளவு நெருக்கமாக கையாளவும். + +## try...catch பிழை கையாளுதல்: +பொதுவான பிழை கையாளும் நுட்பங்களில் ஒன்று `try...catch` தொகுதி (block) ஆகும், இது பின்வரும் பிரிவுகளில் விவரிக்கப்பட்டுள்ளது. + +* [try...catch](./try...-catch.md) +* [try...catch...finally](./try...catch...finally.md) + +## ஒத்திசைவற்ற பிழை கையாளுதல் (Asynchronous Error Handling) + +ஒத்திசைவற்ற (asynchronous) குறியீட்டில் பிழைகளைக் கையாள்வது தந்திரமானதாக இருக்கலாம். ஒத்திசைவான குறியீட்டில், பிழைகள் உடனடியாகப் பிடிக்கப்படும், ஆனால் API அழைப்புகள் போன்ற ஒத்திசைவற்ற செயல்பாடுகளுடன், பிழைகள் பின்னர் ஏற்படலாம். callbacks அல்லது promises இல் அவற்றை நீங்கள் கையாளுவீர்கள், எனவே நீங்கள் தயாராக இருக்க வேண்டும். கீழே உள்ள பிரிவில் promises மற்றும் `async/await` ஐப் பயன்படுத்தி இந்த பிழைகளை எவ்வாறு நிர்வகிப்பது என்பதை நாங்கள் விவாதிப்போம். + +* [ஒத்திசைவற்ற பிழை கையாளுதல்](./async_errorhandling.md) diff --git a/ta/error-handling/async_errorhandling.md b/ta/error-handling/async_errorhandling.md new file mode 100644 index 00000000..2972efb1 --- /dev/null +++ b/ta/error-handling/async_errorhandling.md @@ -0,0 +1,184 @@ +--- +chapter: 12 +pageNumber: 87 +description: ஒத்திசைவான (synchronous) பிழைகளை விட ஒத்திசைவற்ற (asynchronous) பிழைகளைக் கையாள்வது சற்று சிக்கலானது. சிக்கல் என்னவென்றால், பிழையை உருவாக்கும் குறியீடு பிழையைக் கையாள்வதற்கு நேரடியாகப் பொறுப்பல்ல. மாறாக, ஒத்திசைவற்ற செயல்பாடு முடிந்ததும் இயக்கப்படும் callback செயல்பாட்டால் பிழை கையாளப்படும். +--- + +# ஒத்திசைவற்ற பிழை கையாளுதல் (Asynchronous Error Handling) + +ஒத்திசைவான பிழைகளை விட ஒத்திசைவற்ற பிழைகளைக் கையாள்வது சற்று சிக்கலானது. சிக்கல் என்னவென்றால், பிழையை உருவாக்கும் குறியீடு பிழையைக் கையாள்வதற்கு நேரடியாகப் பொறுப்பல்ல. மாறாக, ஒத்திசைவற்ற செயல்பாடு முடிந்ததும் இயக்கப்படும் callback செயல்பாட்டால் பிழை கையாளப்படும். + +ஒத்திசைவற்ற பிழைகளை நீங்கள் எவ்வாறு கையாளலாம் என்பதை கீழே உள்ள எடுத்துக்காட்டு காட்டுகிறது: +## எடுத்துக்காட்டுகள் + +ஒரு சேவையகத்திலிருந்து (server) சில தரவிறக்கம் செய்ய `fetch` API ஐப் பயன்படுத்தும்போது ஒரு பொதுவான உதாரணம். `fetch` API சேவையகத்தின் பதிலுடன் தீர்க்கப்படும் (resolves) ஒரு promise ஐத் திரும்பப் பெறுகிறது. சேவையகம் பிழையைத் திருப்பியளித்தால், promise பிழையுடன் நிராகரிக்கப்படும் (reject). + +#### `async/await` உடன் `try...catch` ஐப் பயன்படுத்துதல் + +`async/await` ஐப் பயன்படுத்துவது ஒத்திசைவற்ற குறியீட்டை ஒத்திசைவான குறியீட்டைப் போல தோற்றமளிக்கவும் செயல்படவும் செய்கிறது, இது படிக்கவும் புரிந்துகொள்ளவும் எளிதாக்கும். `try...catch` ஐப் பயன்படுத்தி பிழைகளை எவ்வாறு கையாளலாம் என்பது இங்கே: + +```javascript +async function fetchData(url) { + try { + let response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + let data = await response.json(); + return data; + } catch (error) { + console.error('தரவைப் பெறுவதில் பிழை:', error); + } +} +``` + + +#### Promises இல் `.catch()` மூலம் பிழைகளைக் கையாளுதல் +நேரடியாக Promises ஐப் பயன்படுத்தும்போது, நீங்கள் `.catch()` முறையைப் பயன்படுத்தி பிழைகளைக் கையாளலாம்: + +```javascript + +fetch('https://api.example.com/data') + .then(response => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then(data => { + console.log(data); + }) + .catch(error => { + console.error('தரவைப் பெறுவதில் பிழை:', error); + }); + +``` + + +### சிறந்த நடைமுறைகள் (Best Practices) + +எப்பொழுதும் பிழைகளைக் கையாளவும்: ஒவ்வொரு ஒத்திசைவற்ற செயல்பாட்டிலும் பிழை கையாளுதல் இருப்பதை உறுதிசெய்யவும். + + +```javascript +async function fetchData(url) { + try { + let response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + let data = await response.json(); + return data; + } catch (error) { + console.error('தரவைப் பெறுவதில் பிழை:', error); + } +} +``` + + +`async/await` உடன் `try...catch` ஐப் பயன்படுத்தவும்: இது குறியீட்டைப் படிக்க எளிதாக்குகிறது மற்றும் பராமரிக்க எளிதாக்குகிறது. + +```javascript +async function fetchData(url) { + try { + let response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + let data = await response.json(); + return data; + } catch (error) { + console.error('தரவைப் பெறுவதில் பிழை:', error); + } +} +``` + + +#### நேர்த்தியான சரிவு (Graceful Degradation): மாற்று நடத்தை (fallback behavior) அல்லது பயனர் நட்பு பிழை செய்திகளை வழங்கவும். + +```javascript +async function fetchData(url) { + try { + let response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + let data = await response.json(); + return data; + } catch (error) { + console.error('தரவைப் பெறுவதில் பிழை:', error); + return { fallbackData: true }; // மாற்று நடத்தை + } +} +``` + + +#### பதிவு செய்தல் (Logging): பிழைதிருத்தம் மற்றும் கண்காணிப்பு நோக்கங்களுக்காக பிழைகளைப் பதிவு செய்யவும். + +```javascript +async function fetchData(url) { + try { + let response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + let data = await response.json(); + return data; + } catch (error) { + console.error('தரவைப் பெறுவதில் பிழை:', error); + // கண்காணிப்பு சேவைக்கு பிழையைப் பதிவு செய்யவும் + logErrorToService(error); + } +} + +function logErrorToService(error) { + // கண்காணிப்பு சேவைக்கு பிழையைப் பதிவு செய்வதற்கான செயலாக்கம் +} +``` + + +#### அமைதியான தோல்விகளைத் தவிர்க்கவும் (Avoid Silent Failures): பிழைகள் அமைதியாக விழுங்கப்படாமல் பார்த்துக் கொள்ளுங்கள்; எப்பொழுதும் அவற்றைப் பதிவு செய்யவும் அல்லது கையாளவும். + + +```javascript +async function fetchData(url) { + try { + let response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + let data = await response.json(); + return data; + } catch (error) { + console.error('தரவைப் பெறுவதில் பிழை:', error); + } +} +``` + + + +#### மையப்படுத்தப்பட்ட பிழை கையாளுதல் (Centralized Error Handling): பெரிய பயன்பாடுகளுக்கு மையப்படுத்தப்பட்ட பிழை கையாளும் பொறிமுறையைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும். + + +```javascript +async function fetchData(url) { + try { + let response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + let data = await response.json(); + return data; + } catch (error) { + handleError(error); + } +} + +function handleError(error) { + console.error('பிழை:', error); + // மையப்படுத்தப்பட்ட பிழை கையாளுதல் தர்க்கம் +} +``` + + +ஒத்திசைவற்ற செயல்பாடுகளில் முறையான பிழை கையாளுதல் நெகிழ்ச்சியான (resilient) ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை உருவாக்குவதற்கு முக்கியமானது. இந்த வழிகாட்டியில் விவரிக்கப்பட்டுள்ள எடுத்துக்காட்டுகள் மற்றும் சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் குறியீடு பிழைகளை நேர்த்தியாகக் கையாளுவதையும், பயனர்களுக்கு அர்த்தமுள்ள பின்னூட்டங்களை வழங்குவதையும், ஒட்டுமொத்த பயன்பாட்டின் நிலைத்தன்மையைப் பராமரிப்பதையும் உறுதிசெய்யலாம். ஒவ்வொரு ஒத்திசைவற்ற செயல்பாட்டிலும் பிழைகளைக் கையாள எப்போதும் நினைவில் கொள்ளுங்கள், வாசிப்புத்திறனுக்காக `async/await` உடன் `try...catch` ஐப் பயன்படுத்தவும், மேலும் பெரிய பயன்பாடுகளுக்கு மையப்படுத்தப்பட்ட பிழை கையாளுதலைச் செயல்படுத்தவும். இந்த உத்திகள் மூலம், நீங்கள் ஒத்திசைவற்ற பிழைகளை திறம்பட நிர்வகிக்கலாம் மற்றும் மிகவும் நம்பகமான மற்றும் பயனர் நட்பு பயன்பாடுகளை உருவாக்கலாம். diff --git a/ta/error-handling/try...-catch.md b/ta/error-handling/try...-catch.md new file mode 100644 index 00000000..57889e87 --- /dev/null +++ b/ta/error-handling/try...-catch.md @@ -0,0 +1,42 @@ +--- +chapter: 12 +pageNumber: 85 +description: நிரலாக்கத்தில் பல்வேறு காரணங்களுக்காக பிழைகள் நிகழ்கின்றன, சில குறியீடு பிழைகளாலும், சில தவறான உள்ளீட்டாலும், மற்றவை எதிர்பாராத விஷயங்களாலும் நிகழ்கின்றன. ஒரு பிழை ஏற்படும் போது முழு ஸ்கிரிப்டும் (script) நிறுத்தப்படுவதையோ அல்லது செயலிழப்பதையோ (crashing) தடுக்க try catch உதவுகிறது, இது விதிவிலக்கான (exceptional) நிகழ்வுகளை நேர்த்தியாகக் கையாளவும் மாற்று நடத்தையை (fallback behavior) வழங்கவும் அனுமதிக்கிறது. +--- + +# try... catch + +குறியீடு செயல்படுத்துவதை நிறுத்துவதற்குப் பதிலாக, ஸ்கிரிப்ட் செயலிழக்காமல் பிழைகளைப் பிடிக்க அனுமதிக்கும் `try...catch` கட்டமைப்பைப் பயன்படுத்தலாம். `try...catch` கட்டமைப்பில் இரண்டு முக்கிய தொகுதிகள் (blocks) உள்ளன; `try` மற்றும் பின்னர் `catch`. + +```javascript +try { + // குறியீடு... +} catch (err) { + // பிழை கையாளுதல் +} +``` + +முதலில், `try` தொகுதியில் உள்ள குறியீடு இயக்கப்படுகிறது. எந்தப் பிழையும் சந்திக்கவில்லை என்றால் அது `catch` தொகுதியைத் தவிர்க்கிறது. ஒரு பிழை ஏற்பட்டால் `try` செயல்படுத்துதல் நிறுத்தப்பட்டு, கட்டுப்பாட்டு வரிசையை `catch` தொகுதிக்கு நகர்த்துகிறது. பிழைக்கான காரணம் `err` மாறியில் (variable) பிடிக்கப்படுகிறது. + +```javascript +try { + // குறியீடு... + alert('Learn JavaScript க்கு வரவேற்கிறோம்'); + asdk; // பிழை: asdk மாறி வரையறுக்கப்படவில்லை +} catch (err) { + console.log("பிழை ஏற்பட்டது"); +} +``` + +{% hint style="working" %} +`try...catch` இயக்கநேரப் பிழைகளுக்கு (runtime errors) வேலை செய்கிறது, அதாவது குறியீடு இயக்கக்கூடியதாகவும் (runnable) ஒத்திசைவானதாகவும் (synchronous) இருக்க வேண்டும். +{% endhint %} + +தனிப்பயன் பிழையை (custom error) வீச (throw), `throw` அறிக்கையைப் பயன்படுத்தலாம். பிழைகளால் உருவாக்கப்படும் பிழைப் பொருளில் (error object) இரண்டு முக்கிய பண்புகள் (properties) உள்ளன. + +* **name**: பிழையின் பெயர் +* **message**: பிழை பற்றிய விவரங்கள் + +{% hint style="info" %} +நமக்கு ஒரு பிழைச் செய்தி (`error` message) தேவையில்லை என்றால் catch ஐத் தவிர்க்கலாம். +{% endhint %} diff --git a/ta/error-handling/try...catch...finally.md b/ta/error-handling/try...catch...finally.md new file mode 100644 index 00000000..1b8c0bf8 --- /dev/null +++ b/ta/error-handling/try...catch...finally.md @@ -0,0 +1,67 @@ +--- +chapter: 12 +pageNumber: 86 +description: try catch finally டெவலப்பர்களை ஒரு குறியீட்டுத் தொகுதியைச் செயல்படுத்தும் போது நிகழக்கூடிய விதிவிலக்குகளை (பிழைகள்) நேர்த்தியாகக் கையாளவும், விதிவிலக்கு எறியப்பட்டதா இல்லையா என்பதைப் பொருட்படுத்தாமல் குறிப்பிட்ட துப்புரவுச் செயல்கள் (cleanup actions) எப்போதும் செயல்படுத்தப்படுவதை உறுதி செய்யவும் அனுமதிக்கிறது. +--- +# try...catch...finally + +`try...catch` உடன் `finally` எனப்படும் மேலும் ஒரு கட்டமைப்பைச் சேர்க்கலாம், இந்தக் குறியீடு எல்லாச் சந்தர்ப்பங்களிலும் செயல்படும். அதாவது பிழை இல்லாதபோது `try` க்குப் பிறகும், பிழை ஏற்பட்டால் `catch` க்குப் பிறகும். `try ...catch...finally` க்கான தொடரியல் (syntax) கீழே காட்டப்பட்டுள்ளது. + +```javascript +try { + // குறியீட்டைச் செயல்படுத்த முயற்சிக்கவும் +} catch (err) { + // பிழைகளைக் கையாளவும் +} finally { + // எப்போதும் செயல்படுத்தவும் +} +``` + +நிஜ உலக எடுத்துக்காட்டுக் குறியீட்டை இயக்குதல். + +```javascript +try { + alert( 'try' ); +} catch (err) { + alert( 'catch' ); +} finally { + alert( 'finally' ); +} +``` + +மேலே உள்ள எடுத்துக்காட்டில், `try` தொகுதி முதலில் செயல்படுத்தப்படுகிறது, பின்னர் பிழைகள் எதுவும் இல்லாததால் `finally` தொடர்கிறது. + +{% exercise %} +numerator மற்றும் denominator என்ற இரண்டு வாதங்களை (arguments) எடுத்து, பின்வரும் அமைப்புகளைப் பயன்படுத்தி numerator ஐ denominator ஆல் வகுப்பதன் முடிவைத் திரும்பப் பெறும் `divideNumbers()` என்ற செயல்பாட்டை (function) எழுதவும். + +{% initial %} +function divideNumbers(numerator, denominator) { + try { + // numerator ஐ denominator ஆல் வகுக்க try அறிக்கை. + } catch (error) { + // பிழை செய்தியை அச்சிடுக + } finally { + // செயல்படுத்துதல் முடிந்தது என்பதை அச்சிடுக + } + // முடிவை திரும்பப் பெறுக + } + let answer = divideNumbers(10, 2); + +{% solution %} +function divideNumbers(numerator, denominator) { + let result; + try { + result = numerator / denominator; + } catch (error) { + console.error(`பிழை: ${error}`); + } finally { + console.log('செயல்பாடு செயல்படுத்துவதை முடித்தது'); + } + return result; + } +let answer = divideNumbers(10, 2); +{% validation %} +assert(answer == 5); + +{% context %} +{% endexercise %} diff --git a/ta/es6-concepts/README.md b/ta/es6-concepts/README.md new file mode 100644 index 00000000..094cd830 --- /dev/null +++ b/ta/es6-concepts/README.md @@ -0,0 +1,33 @@ +--- +layout: editorial +chapter: 25 +pageNumber: 244 +description: Classes என்பவை ஒரு பொருளை உருவாக்குவதற்கான டெம்ப்ளேட்டுகள் (templates). இது தரவுடன் வேலை செய்வதற்கான குறியீட்டைக் கொண்டு தரவை இணைக்கிறது (encapsulates). ஒரு class ஐ உருவாக்க class என்ற முக்கிய சொல் பயன்படுத்தப்படுகிறது. +--- + + +# அத்தியாயம் 25 + + +## ES6 (ECMAScript 2015) இன் கண்ணோட்டம் + +ES6, ECMAScript 2015 என்றும் அழைக்கப்படுகிறது, இது ஜாவாஸ்கிரிப்ட் மொழியின் குறிப்பிடத்தக்க மேம்படுத்தலாகும் (upgrade). இது பல புதிய அம்சங்கள், தொடரியல் (syntax) மேம்பாடுகள் மற்றும் சிறப்பம்சங்களை அறிமுகப்படுத்துகிறது, இது ஜாவாஸ்கிரிப்ட்டின் பரிணாம வளர்ச்சியில் ஒரு அடிப்படை மைல்கல்லாக அமைகிறது. ES6 ஒரு முதிர்ந்த மற்றும் சக்திவாய்ந்த மொழியைக் கொண்டு வந்தது, நீண்டகால சவால்களை எதிர்கொண்டது மற்றும் டெவலப்பர்களுக்கு தூய்மையான, திறமையான மற்றும் பராமரிக்கக்கூடிய குறியீட்டை எழுத அதிகாரமளித்தது. + +டெவலப்பர்களுக்கு பொதுவான நிரலாக்கப் பணிகளை எளிதாக்குவதற்கும், குறியீட்டின் சிக்கலைக் குறைப்பதற்கும், ஒட்டுமொத்த குறியீட்டின் தரத்தை மேம்படுத்துவதற்கும் கருவிகளை வழங்குவது ES6 இன் முக்கிய இலக்குகளில் ஒன்றாகும். நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டில் தரநிலையாக (standard) மாறியுள்ள ஏராளமான அம்சங்கள் மற்றும் கருத்துக்களை அறிமுகப்படுத்துவதன் மூலம் இதைச் சாதித்துள்ளது. + +ES6 ஆனது arrow செயல்பாடுகள், மாறி அறிவிப்புக்கான (variable declaration) `let` மற்றும் `const` முக்கிய சொற்கள், template literals மற்றும் பொருள் சார்ந்த நிரலாக்கத்திற்கான (object-oriented programming) சக்திவாய்ந்த `class` தொடரியல் போன்ற குறிப்பிடத்தக்க அம்சங்களை உள்ளடக்கியுள்ளது. இந்த மேம்பாடுகள் டெவலப்பரின் உற்பத்தித்திறனையும் குறியீட்டின் வாசிப்புத்திறனையும் கணிசமாக மேம்படுத்துகின்றன. + +கூடுதலாக, ES6 ஆனது Promises மற்றும் async/await போன்ற கருத்துக்களை அறிமுகப்படுத்துகிறது, இது ஒத்திசைவற்ற நிரலாக்கத்தை (asynchronous programming) நெறிப்படுத்துகிறது, இது மிகவும் நேர்த்தியானதாகவும், பிழைகள் ஏற்பட வாய்ப்புகள் குறைவானதாகவும் ஆக்குகிறது. ஒத்திசைவற்ற குறியீட்டின் இந்த எளிமைப்படுத்தல் இணைய மேம்பாட்டில் ஆழமான தாக்கத்தை ஏற்படுத்தியுள்ளது மற்றும் HTTP கோரிக்கைகள் போன்ற ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள்வதற்கான மிகவும் உள்ளுணர்வு முறைக்கு வழிவகுத்தது. + +ES6 இல் உள்ள Arrow செயல்பாடுகள் செயல்பாடுகளை எழுதுவதற்கு ஒரு சுருக்கமான தொடரியலை வழங்குகின்றன, மேலும் அவை ஜாவாஸ்கிரிப்டில் உள்ள பிணைப்பு (binding) சிக்கல்களைத் தணிக்கும் வகையில் `this` சூழலைச் சுற்றியுள்ள குறியீட்டுடன் தானாகவே பிணைக்கின்றன. `let` மற்றும் `const` உடன் block-scoped மாறி அறிவிப்புகளின் அறிமுகம் மாறி மேலாண்மை (variable management) மற்றும் ஸ்கோப்பிங் (scoping) ஆகியவற்றை மேம்படுத்தியது, பிழைகளின் பொதுவான ஆதாரங்களைக் குறைத்தது. + +உட்பொதிக்கப்பட்ட வெளிப்பாடுகளுடன் டைனமிக் சரங்களை (dynamic strings) உருவாக்குவதற்கு Template literals ஒரு வசதியான வழியை வழங்குகிறது, அதே சமயம் destructuring ஆனது வரிசைகள் மற்றும் பொருள்களிலிருந்து மதிப்புகளைப் பிரித்தெடுப்பதை எளிதாக்குகிறது, இது தூய்மையான, படிக்கக்கூடிய குறியீட்டிற்கு வழிவகுக்கிறது. + +ஒட்டுமொத்தமாக, ES6 நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்கு ஒரு மூலக்கல்லாக மாறியுள்ளது. இது நவீன இணைய உலாவிகளில் நன்கு ஆதரிக்கப்படுகிறது மற்றும் டெவலப்பர்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுதும் முறையை மாற்றியமைத்துள்ளது. இன்றைய இணைய மேம்பாட்டு நிலப்பரப்பில் புதுப்பித்த நிலையில் இருக்கவும், மிகவும் திறமையான, பராமரிக்கக்கூடிய மற்றும் படிக்கக்கூடிய குறியீட்டை எழுதவும் விரும்பும் எந்தவொரு ஜாவாஸ்கிரிப்ட் டெவலப்பருக்கும் ES6 ஐப் புரிந்துகொள்வது முக்கியமானது. + +இந்த அத்தியாயத்தில், பின்வரும் ES6 தொடரியல் பற்றி பேசுவோம். +* [Let/Const](./let-const.md) +* [Map](./map.md) +* [Arrow Functions](./arrow-functions.md) +* [Destructuring](./destructuring.md) +* [Template Literals](./template-literals.md) \ No newline at end of file diff --git a/ta/es6-concepts/arrow-functions.md b/ta/es6-concepts/arrow-functions.md new file mode 100644 index 00000000..3b7b999a --- /dev/null +++ b/ta/es6-concepts/arrow-functions.md @@ -0,0 +1,84 @@ +--- +chapter: 25 +pageNumber: 248 +description: ES6 இல் அறிமுகப்படுத்தப்பட்ட Arrow செயல்பாடுகள், ஜாவாஸ்கிரிப்டில் செயல்பாடுகளை வரையறுப்பதற்கான ஒரு சுருக்கமான தொடரியலை (syntax) வழங்குகின்றன. அவை குறுகிய, ஒற்றை-வெளிப்பாடு செயல்பாடுகளுக்கு (single-expression functions) ஏற்றவை மற்றும் எளிமை மற்றும் தெளிவை வழங்குகின்றன, பெரும்பாலும் வரிசைகளை (arrays) மீள்திருப்பவும் (iterating) சுருக்கமான callback செயல்பாடுகளை வரையறுக்கவும் பயன்படுத்தப்படுகின்றன. Arrow செயல்பாடுகள் அவற்றின் செயல்திறன் மற்றும் வாசிப்புத்திறனுக்காக அறியப்படுகின்றன. +--- +## ES6 இல் Arrow செயல்பாடுகள் + +Arrow செயல்பாடுகள் ES6 இல் (ECMAScript 2015) அறிமுகப்படுத்தப்பட்ட ஜாவாஸ்கிரிப்டில் அநாமதேய (anonymous) செயல்பாடுகளை எழுதுவதற்கான ஒரு சுருக்கமான வழியாகும். அவை செயல்பாடுகளை வரையறுக்க மிகவும் கச்சிதமான மற்றும் படிக்கக்கூடிய தொடரியலை வழங்குகின்றன, குறிப்பாக நீங்கள் எளிய, ஒற்றை வெளிப்பாடு செயல்பாடுகளைக் கொண்டிருக்கும்போது. Arrow செயல்பாடுகள் நவீன ஜாவாஸ்கிரிப்டின் ஒரு அடிப்படை அம்சமாகும், மேலும் அவை பாரம்பரிய செயல்பாட்டு வெளிப்பாடுகளை (traditional function expressions) விட பல நன்மைகளை வழங்குகின்றன. + +**தொடரியல் (Syntax):** + +Arrow செயல்பாடுகளுக்கான தொடரியல் நேராகவும் எளிமையாகவும் இருக்கும்: + +```javascript +const functionName = (parameters) => expression; +``` + +- `const functionName`: இங்குதான் நீங்கள் ஒரு மாறிக்கு செயல்பாட்டை ஒதுக்குகிறீர்கள். அநாமதேய செயல்பாடுகளுக்கு செயல்பாட்டின் பெயரைத் தவிர்க்கலாம். + +- `(parameters)`: இவை செயல்பாடு ஏற்கும் உள்ளீட்டு அளவுருக்கள் (வாதங்கள்). ஒரே ஒரு அளவுரு மட்டுமே இருந்தால், அடைப்புக்குறிகளைத் தவிர்க்கலாம். + +- `=>`: `=>` என்ற குறியீடு நீங்கள் ஒரு arrow செயல்பாட்டை வரையறுக்கிறீர்கள் என்பதைக் குறிக்கிறது. + +- `expression`: இது செயல்பாடு திரும்பப் பெறும் (returns) மதிப்பு. செயல்பாடு ஒற்றை அறிக்கையைக் கொண்டிருந்தால், சுருள் அடைப்புக்குறிகள் மற்றும் `return` முக்கிய சொல்லைத் தவிர்க்கலாம். + +**எடுத்துக்காட்டுகள்:** + +Arrow செயல்பாடுகளின் தொடரியலை விளக்குவதற்கு சில எடுத்துக்காட்டுகள் இங்கே: + +1. அளவுருக்கள் இல்லாத எளிய arrow செயல்பாடு: + +```javascript +const sayHello = () => "Hello, World!"; +``` + +2. ஒரு அளவுருவைக் கொண்ட arrow செயல்பாடு: + +```javascript +const double = (x) => x * 2; +``` + +3. பல அளவுருக்களைக் கொண்ட arrow செயல்பாடு: + +```javascript +const add = (a, b) => a + b; +``` + +**பயன்பாட்டு வழக்குகள் (Use Cases):** + +Arrow செயல்பாடுகள் பொதுவாக பின்வரும் சூழ்நிலைகளில் பயன்படுத்தப்படுகின்றன: + +1. **குறுகிய, அநாமதேய செயல்பாடுகள்:** Arrow செயல்பாடுகள் குறுகிய, ஒரு-வரி செயல்பாடுகளுக்கு சரியானவை. அவை ஒரு முழு செயல்பாட்டு வெளிப்பாட்டை (function expression) எழுதுவதற்கான தேவையைக் குறைக்கின்றன. + +2. **வரிசைகளை மீள்திருப்புதல் (Iterating Arrays):** வரிசைகளின் மீதான மீள்திருப்பை (iteration) எளிமையாக்க `map`, `filter` மற்றும் `reduce` போன்ற array முறைகளுடன் Arrow செயல்பாடுகள் நன்றாகச் செயல்படுகின்றன. + +```javascript +const numbers = [1, 2, 3, 4, 5]; +const doubled = numbers.map((x) => x * 2); +``` + +3. **Callback செயல்பாடுகள்:** அவை பெரும்பாலும் `setTimeout` மற்றும் `fetch` போன்ற ஒத்திசைவற்ற (asynchronous) செயல்பாடுகளுக்கு callback செயல்பாடுகளாகப் பயன்படுத்தப்படுகின்றன. + +```javascript +setTimeout(() => { + console.log("Timer முடிந்தது"); +}, 1000); +``` + +4. **`this` சூழலை (Context) பிணைத்தல்:** Arrow செயல்பாடுகள் தங்களைக் கொண்டிருக்கும் செயல்பாட்டிலிருந்து `this` சூழலைப் பெறுகின்றன, இதனால் `this` மாறுவதைப் பற்றி கவலைப்படாமல் பொருள்களில் உள்ள முறைகளை (methods) வரையறுக்க அவை பயனுள்ளதாக இருக்கும். + +```javascript +const person = { + name: "John", + greet: function() { + setTimeout(() => { + console.log(`வணக்கம், என் பெயர் ${this.name}`); + }, 1000); + }, +}; + +person.greet(); +``` + +Arrow செயல்பாடுகள் ஒவ்வொரு சூழ்நிலைக்கும் ஏற்றவை அல்ல என்பதைக் கவனத்தில் கொள்வது அவசியம். அவற்றுக்குச் சொந்தமான `this` சூழல் இல்லை, அவற்றை constructors ஆகப் பயன்படுத்த முடியாது, மேலும் மிகவும் சிக்கலான, பல வரி அமைப்பைக் கொண்ட செயல்பாடுகளுக்கு அவை பொருத்தமானதாக இருக்காது. இதுபோன்ற சந்தர்ப்பங்களுக்கு, பாரம்பரிய செயல்பாட்டு வெளிப்பாடுகளே (traditional function expressions) இன்னும் விருப்பமான தேர்வாக உள்ளன. எளிய, சுருக்கமான மற்றும் ஒரு வரி செயல்பாடுகளுக்குப் பயன்படுத்தப்படும்போது Arrow செயல்பாடுகள் மிகவும் பயனுள்ளதாக இருக்கும். diff --git a/ta/es6-concepts/destructuring.md b/ta/es6-concepts/destructuring.md new file mode 100644 index 00000000..a9d7062f --- /dev/null +++ b/ta/es6-concepts/destructuring.md @@ -0,0 +1,62 @@ +--- +chapter: 25 +pageNumber: 250 +description: ES6 அம்சமான Destructuring, வரிசைகள் (arrays) மற்றும் பொருள்களிலிருந்து (objects) தரவுப் பிரித்தெடுத்தலை நெறிப்படுத்துகிறது. மாறிகளுக்கு (variables) நேரடியாக குறிப்பிட்ட மதிப்புகள் அல்லது பண்புகளை ஒதுக்க அனுமதிப்பதன் மூலம் இது செயல்முறையை எளிதாக்குகிறது, குறியீட்டுத் தெளிவு மற்றும் செயல்திறனை மேம்படுத்துகிறது. ஜாவாஸ்கிரிப்டில் சிக்கலான தரவு கட்டமைப்புகளுடன் பணிபுரிய Destructuring ஒரு அத்தியாவசிய கருவியாகும். +--- +## ES6 இல் Destructuring: வரிசைகள் மற்றும் பொருள்களைப் பிரித்தெடுத்தல் + +Destructuring என்பது ES6 இல் (ECMAScript 2015) அறிமுகப்படுத்தப்பட்ட ஒரு சக்திவாய்ந்த அம்சமாகும், இது வரிசைகளிலிருந்து (arrays) மதிப்புகளையும் பொருள்களிலிருந்து (objects) பண்புகளையும் பிரித்தெடுக்கும் செயல்முறையை எளிதாக்குகிறது. இது சுருக்கமான மற்றும் படிக்கக்கூடிய தொடரியல் (syntax) மூலம் மாறிகளுக்குள் மதிப்புகளைப் "பிரித்தெடுக்க" (unpack) உங்களை அனுமதிக்கிறது. + +**வரிசைகளை Destructuring செய்தல் (Destructuring Arrays):** + +**தொடரியல் (Syntax):** + +```javascript +const [variable1, variable2, ...rest] = array; +``` + +- `variable1`, `variable2`: இவை வரிசையிலிருந்து கூறுகள் (elements) ஒதுக்கப்படும் மாறிகள். +- `...rest` (rest operator): இது மீதமுள்ள கூறுகளை ஒரு புதிய வரிசை மாறியாக (array variable) சேகரிக்கிறது. + +**எடுத்துக்காட்டு:** + +```javascript +const colors = ["red", "green", "blue"]; +const [firstColor, secondColor] = colors; +console.log(firstColor); // Output: "red" +console.log(secondColor); // Output: "green" +``` + +**பொருள்களை Destructuring செய்தல் (Destructuring Objects):** + +**தொடரியல் (Syntax):** + +```javascript +const { property1, property2, ...rest } = object; +``` + +- `property1`, `property2`: இவை பொருளின் பண்புகள் ஒதுக்கப்படும் மாறிகள். +- `...rest` (rest operator): இது மீதமுள்ள பண்புகளை ஒரு புதிய பொருளாகச் சேகரிக்கிறது. + +**எடுத்துக்காட்டு:** + +```javascript +const person = { name: "Alice", age: 30, city: "New York" }; +const { name, age } = person; +console.log(name); // Output: "Alice" +console.log(age); // Output: 30 +``` + +**பயன்பாட்டு வழக்குகள் (Use Cases):** + +பல்வேறு பணிகளுக்கு Destructuring பொதுவாகப் பயன்படுத்தப்படுகிறது, அவற்றுள்: + +1. **ஒதுக்கீட்டை எளிமையாக்குதல் (Simplifying Assignment):** வரிசை கூறுகள் அல்லது பொருள் பண்புகளை விரைவாக மாறிகளுக்கு ஒதுக்கலாம். + +2. **மாறிகளை மாற்றுதல் (Swapping Variables):** தற்காலிக மாறி (temporary variable) இல்லாமல் இரண்டு மாறிகளின் மதிப்புகளை எளிதாக மாற்றலாம். + +3. **செயல்பாட்டு அளவுருக்கள் (Function Parameters):** செயல்பாட்டு அளவுருவாக அனுப்பப்பட்ட பொருளில் இருந்து குறிப்பிட்ட பண்புகளைப் பிரித்தெடுக்கலாம். + +4. **Rest அளவுருக்கள் (Rest Parameters):** மீதமுள்ள கூறுகள் அல்லது பண்புகளை ஒரு வரிசை அல்லது பொருளாகச் சேகரிக்கலாம். + +Destructuring ஐப் பயன்படுத்துவதன் மூலம், ஜாவாஸ்கிரிப்டில் வரிசைகள் மற்றும் பொருள்களுடன் பணிபுரியும் போது உங்கள் குறியீட்டை சுத்தமானதாகவும், அதிக வெளிப்படையானதாகவும், பிழைகள் ஏற்பட வாய்ப்புகள் குறைவானதாகவும் ஆக்கலாம். \ No newline at end of file diff --git a/ta/es6-concepts/let-const.md b/ta/es6-concepts/let-const.md new file mode 100644 index 00000000..22481434 --- /dev/null +++ b/ta/es6-concepts/let-const.md @@ -0,0 +1,60 @@ +--- +chapter: 25 +pageNumber: 245 +description: ES6 (ECMAScript 2015) இன் சூழலில் `let` மற்றும் `const` அறிவிப்புகளைப் பற்றி விவாதிப்போம், மேலும் அவற்றை அவற்றின் ES5 சகாக்களுடன் (counterparts) ஒப்பிடுவோம். +--- + +## ES6 இல் let மற்றும் const + +1. **`let` அறிவிப்பு (Declaration):** + - ES6 இல், block-scoped மாறிகளை (variables) உருவாக்க `let` அறிவிப்பு அறிமுகப்படுத்தப்பட்டது. இதன் பொருள், `let` உடன் அறிவிக்கப்பட்ட மாறியானது அது வரையறுக்கப்பட்டுள்ள தொகுதிக்குள் (block) (எ.கா., ஒரு செயல்பாட்டிற்குள் அல்லது ஒரு ஜோடி சுருள் அடைப்புக்குறிக்குள்) மட்டுமே அணுகக்கூடியது. + + - `let` மாறிகள் அவற்றைக் கொண்டிருக்கும் செயல்பாடு (function) அல்லது தொகுதியின் (block) உச்சிக்கு உயர்த்தப்படுவதில்லை (not hoisted). இது மாறிகள் அறிவிக்கப்படுவதற்கு முன்பு அணுகப்படும் சிக்கல்களைத் தடுக்கிறது. + + - `let` ஆரம்ப அறிவிப்புக்குப் பிறகு மாறிக்கு ஒரு மதிப்பை மீண்டும் ஒதுக்க (reassign) உங்களை அனுமதிக்கிறது, இது ஒரு மாற்றக்கூடிய (mutable) மாறியாக அமைகிறது. + + - எடுத்துக்காட்டு: + ```javascript + function exampleFunction() { + if (true) { + let x = 10; + console.log(x); // 10 + } + console.log(x); // பிழை (Error): x வரையறுக்கப்படவில்லை (not defined) + } + ``` + +2. **`const` அறிவிப்பு (Declaration):** + - `const` அறிவிப்பும் block-scoped மாறிகளை அறிமுகப்படுத்துகிறது, ஆனால் இது ஒரு கூடுதல் கட்டுப்பாட்டுடன் வருகிறது: `const` உடன் அறிவிக்கப்பட்ட மாறிகளை அவற்றின் ஆரம்ப ஒதுக்கீட்டிற்குப் (initial assignment) பிறகு மீண்டும் ஒதுக்க முடியாது. அவை மாறிலிகள் (constants). + + - மாறிலிகள் (constants) அல்லது மாற்ற முடியாத பொருள்களுக்கான (immutable objects) குறிப்புகள் போன்ற மாறக் கூடாத மதிப்புகளுக்கு `const` அடிக்கடி பயன்படுத்தப்படுகிறது. + + - எடுத்துக்காட்டு: + ```javascript + const pi = 3.14159; + pi = 3.14; // பிழை (Error): மாறிலி மாறிக்கு (constant variable) ஒதுக்கீடு (Assignment). + ``` + +**ES5 உடனான ஒப்பீடு:** + +ES5 இல், ஜாவாஸ்கிரிப்ட் மாறி அறிவிப்புக்கு (variable declaration) முதன்மையாக `var` முக்கிய சொல்லைப் பயன்படுத்தியது. ES6 இல் உள்ள `let` மற்றும் `const` ஐ ES5 இல் உள்ள `var` உடன் ஒப்பிடும்போது முக்கிய வேறுபாடுகள் இங்கே: + +1. **Block Scope (vs) Function Scope:** + - ES6 (`let` மற்றும் `const`): `let` மற்றும் `const` உடன் அறிவிக்கப்பட்ட மாறிகள் block-scoped ஆகும், அதாவது அவை ஒரு செயல்பாட்டிற்குள் உள்ள தொகுதியாக (block) இருந்தாலும் அல்லது ஒரு தனித்த தொகுதியாக இருந்தாலும், அவை வரையறுக்கப்பட்டுள்ள தொகுதிக்கு மட்டுமே வரையறுக்கப்பட்டுள்ளன. + + - ES5 (`var`): `var` உடன் அறிவிக்கப்பட்ட மாறிகள் function-scoped ஆகும், அதாவது `var` அறிவிப்பைக் கொண்டிருக்கும் முழு செயல்பாட்டிலும் (function) அவற்றை அணுகலாம். + +2. **Hoisting:** + - ES6 (`let` மற்றும் `const`): `let` மற்றும் `const` உடன் அறிவிக்கப்பட்ட மாறிகள் அவற்றைக் கொண்டிருக்கும் தொகுதியின் உச்சிக்கு உயர்த்தப்படுவதில்லை, இது மாறிகளை அறிவிப்பதற்கு முன்பு அவற்றைப் பயன்படுத்துவதைத் தடுக்கிறது. + + - ES5 (`var`): `var` உடன் அறிவிக்கப்பட்ட மாறிகள் அவற்றைக் கொண்டிருக்கும் செயல்பாட்டின் உச்சிக்கு உயர்த்தப்படுகின்றன, இது கவனமாக நிர்வகிக்கப்படாவிட்டால் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும். + +3. **மறுஒதுக்கீடு (Reassignment):** + - ES6 (`let` மற்றும் `const`): `let` உடன் அறிவிக்கப்பட்ட மாறிகளை அவற்றின் ஆரம்ப அறிவிப்புக்குப் பிறகு மீண்டும் ஒதுக்கலாம். `const` உடன் அறிவிக்கப்பட்ட மாறிகளை மீண்டும் ஒதுக்க முடியாது, அவை மாறிலிகள் (constants). + + - ES5 (`var`): `var` உடன் அறிவிக்கப்பட்ட மாறிகளை அவை அறிவிக்கப்பட்ட செயல்பாட்டில் எந்த இடத்திலும் மீண்டும் ஒதுக்கலாம். + +4. **மாறிலிகள் (Constants):** + - ES6 (`const`): ES6 `const` முக்கிய சொல்லை அறிமுகப்படுத்துகிறது, இது மாறிலிகளை உருவாக்க அனுமதிக்கிறது, அவை அவற்றின் ஆரம்ப ஒதுக்கீட்டிற்குப் பிறகு மாற்ற முடியாது. + +ES6 இல் உள்ள `let` மற்றும் `const` ஆகியவை ES5 இல் உள்ள `var` ஐ விட கணிக்கக்கூடிய (predictable) மற்றும் கட்டுப்படுத்தப்பட்ட மாறி ஸ்கோப்பிங்கை (controlled variable scoping) வழங்குகின்றன. அவை variable hoisting உடன் தொடர்புடைய பொதுவான சிக்கல்களைத் தவிர்க்க உதவுகின்றன மற்றும் உங்கள் தேவைகளின் அடிப்படையில் மாற்றக்கூடிய (mutable) மற்றும் மாற்ற முடியாத (immutable) மாறிகளுக்கு இடையே தேர்வு செய்வதற்கான நெகிழ்வுத்தன்மையை வழங்குகின்றன. \ No newline at end of file diff --git a/ta/es6-concepts/map.md b/ta/es6-concepts/map.md new file mode 100644 index 00000000..1f45b0b0 --- /dev/null +++ b/ta/es6-concepts/map.md @@ -0,0 +1,45 @@ +--- +chapter: 25 +pageNumber: 247 +description: ES6 (ECMAScript 2015) இன் சூழலில் `let` மற்றும் `const` அறிவிப்புகளைப் பற்றி விவாதிப்போம், மேலும் அவற்றை அவற்றின் ES5 சகாக்களுடன் (counterparts) ஒப்பிடுவோம். +--- + +## Map + +`Map` என்பது `Object` ஐப் போலவே key-value தரவு உருப்படிகளின் தொகுப்பாகும் (collection). ஆனால் முக்கிய வேறுபாடு என்னவென்றால், `Map` எந்த வகையான keys ஐயும் அனுமதிக்கிறது. + +| முறை/பண்பு (Method/Property) | விளக்கம் (Description) | +| ----------------------- | -------------------------------------------------------------------------------------------------- | +| `new Map()` | புதிய Map பொருளை உருவாக்குகிறது. | +| `map.set(key, value)` | `key` இன் கீழ் `map` பொருளில் `value` ஐ சேமிக்கிறது. | +| `map.get(key)` | `key` உடன் தொடர்புடைய `value` ஐத் திரும்பப் பெறுகிறது, அல்லது `key` இல்லை என்றால் `undefined` ஐத் திரும்பப் பெறுகிறது. | +| `map.has(key)` | `map` இல் `key` இருந்தால் `true` ஐயும், இல்லையெனில் `false` ஐயும் திரும்பப் பெறுகிறது. | +| `map.delete(key)` | `key` ஆல் குறிப்பிடப்பட்ட `map` இலிருந்து உறுப்பை (key/value ஜோடி) நீக்குகிறது. | +| `map.clear()` | `map` இலிருந்து அனைத்து உறுப்புகளையும் நீக்குகிறது. | +| `map.size` | `map` இல் உள்ள உறுப்புகளின் (key/value ஜோடிகள்) எண்ணிக்கையைத் திரும்பப் பெறுகிறது. | + +`Map()` இன் பல்வேறு முறைகள் மற்றும் பண்புகளுடன் கூடிய எடுத்துக்காட்டு கீழே காட்டப்பட்டுள்ளது. + +```sh +let map = new Map(); + +map.set('1', 'str1'); // ஒரு சரம் (string) key +map.set(1, 'num1'); // ஒரு எண் (numeric) key +map.set(true, 'bool1'); // ஒரு பூலியன் (boolean) key + +// வழக்கமான Object நினைவிருக்கிறதா? அது keys ஐ சரமாக மாற்றும் +// Map வகையை அப்படியே வைத்திருக்கிறது, எனவே இவை இரண்டும் வேறுபட்டவை: +alert( map.get(1) ); // 'num1' +alert( map.get('1') ); // 'str1' + +alert( map.size ); // 3 +``` + +வழக்கமான `Object` இலிருந்து உள்ள வேறுபாடுகள்: + +* எந்த keys, பொருள்களும் keys ஆக இருக்கலாம். + +* கூடுதல் வசதியான முறைகள், size பண்பு. + +Maps ஒரு பன்முக மற்றும் சக்திவாய்ந்த தரவு கட்டமைப்பாகும், இது திறமையான தரவு மேலாண்மைக்கு key-value ஜோடிகளை வழங்குகிறது. +key-value சங்கங்களை (associations) உள்ளடக்கிய பணிகளுக்கு வெற்று பொருள்களை (plain objects) விட Maps பெரும்பாலும் விரும்பத்தக்க தேர்வாகும், ஏனெனில் அவை சிறந்த கட்டுப்பாட்டையும் செயல்திறனையும் வழங்குகின்றன. diff --git a/ta/es6-concepts/template-literals.md b/ta/es6-concepts/template-literals.md new file mode 100644 index 00000000..74b727ae --- /dev/null +++ b/ta/es6-concepts/template-literals.md @@ -0,0 +1,43 @@ +--- +chapter: 25 +pageNumber: 251 +description: ES6 இல் (ECMAScript 2015) அறிமுகப்படுத்தப்பட்ட Template literals, ஜாவாஸ்கிரிப்டில் டைனமிக் சரங்களை (dynamic strings) உருவாக்க ஒரு சக்திவாய்ந்த வழியை வழங்குகின்றன. அவை சரங்களுக்குள் (strings) நேரடியாக வெளிப்பாடுகளை (expressions) உட்பொதிக்க (embed) உங்களை அனுமதிக்கின்றன, இதனால் உங்கள் குறியீடு மிகவும் படிக்கக்கூடியதாகவும் வெளிப்படையானதாகவும் இருக்கும். Template literals பொதுவாக HTML போன்ற டைனமிக் உள்ளடக்கத்தை உருவாக்குவதற்கும், ஜாவாஸ்கிரிப்டில் சரம் கையாளுதலை (string manipulation) எளிமையாக்குவதற்கும் பயன்படுத்தப்படுகின்றன. +--- + +## ES6 இல் Template Literals: டைனமிக் சரங்களை உருவாக்குதல் + +ES6 இல் (ECMAScript 2015) அறிமுகப்படுத்தப்பட்ட Template literals, ஜாவாஸ்கிரிப்டில் டைனமிக் சரங்களை உருவாக்க ஒரு சக்திவாய்ந்த வழியை வழங்குகின்றன. இந்த literals ஒற்றை அல்லது இரட்டை மேற்கோள்களுக்கு (quotes) பதிலாக backticks (\` \`) மூலம் அடைக்கப்படுகின்றன, மேலும் சரத்திற்குள் நேரடியாக வெளிப்பாடுகளை தடையின்றி உட்பொதிக்க அனுமதிக்கின்றன. + +**தொடரியல் (Syntax):** + +```javascript +const dynamicString = `இது ${expression} உடன் கூடிய டைனமிக் சரம்`; +``` + +- `dynamicString`: இங்குதான் நீங்கள் டைனமிக் சரத்தைச் சேமிக்கிறீர்கள். + +- `${expression}`: இங்குதான் நீங்கள் ஜாவாஸ்கிரிப்ட் வெளிப்பாடுகள், [மாறிகள்](../basics/variables.md) (variables), அல்லது [செயல்பாடுகள்](../functions/README.md) (functions) ஆகியவற்றை உட்பொதிக்கிறீர்கள், அவை மதிப்பிடப்பட்டு சரத்திற்குள் சேர்க்கப்படும். + +**எடுத்துக்காட்டு:** + +டைனமிக் சரங்களை உருவாக்க template literals ஐப் பயன்படுத்துவதற்கான எளிய எடுத்துக்காட்டு இங்கே: + +```javascript +const name = "John"; +const greeting = `வணக்கம், ${name}!`; +console.log(greeting); // Output: வணக்கம், John! +``` + +**பயன்பாட்டு வழக்குகள் (Use Cases):** + +Template literals பொதுவாகப் பல்வேறு நோக்கங்களுக்காகப் பயன்படுத்தப்படுகின்றன, அவற்றுள்: + +1. **சரம் இடைச்செருகல் (String Interpolation):** சரங்களுக்குள் மாறிகள் அல்லது வெளிப்பாடுகளைச் செருகுதல். + +2. **பல வரி சரங்கள் (Multi-line Strings):** line breaks மற்றும் concatenation தேவையில்லாமல் பல வரி சரங்களை உருவாக்குதல். + +3. **டைனமிக் HTML (Dynamic HTML):** இணைய பயன்பாடுகளுக்காக (web applications) HTML உள்ளடக்கத்தை டைனமிக் ஆக உருவாக்குதல். + +4. **Tagged Templates:** template tag செயல்பாடுகள் மூலம் template literals இன் தனிப்பயன் செயலாக்கத்தை (custom processing) அனுமதித்தல். + +Template literals ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் சரம் இணைப்பை (string concatenation) எளிதாக்கலாம், உங்கள் குறியீட்டின் வாசிப்புத்திறனை மேம்படுத்தலாம், மேலும் ஜாவாஸ்கிரிப்டில் டைனமிக் சரங்களை உருவாக்குவதை மிகவும் எளிதாக்கலாம். \ No newline at end of file diff --git a/ta/events.md b/ta/events.md new file mode 100644 index 00000000..e015b0af --- /dev/null +++ b/ta/events.md @@ -0,0 +1,77 @@ +--- +layout: editorial +chapter: 17 +pageNumber: 106 +description: நிரலாக்கத்தில், நிகழ்வுகள் (events) என்பவை ஒரு கணினியில் நடக்கும் செயல்கள் அல்லது நிகழ்வுகள் ஆகும், அவற்றைப் பற்றி கணினி உங்களுக்குத் தெரிவிக்கிறது, இதனால் நீங்கள் அவற்றுக்குப் பதிலளிக்க முடியும். எடுத்துக்காட்டாக, ரீசெட் (reset) பொத்தானைக் கிளிக் செய்யும் போது அது உள்ளீட்டை அழிக்கிறது. +--- + +# அத்தியாயம் 17 +# நிகழ்வுகள் (Events) + +நிரலாக்கத்தில், _நிகழ்வுகள் (events)_ என்பவை ஒரு கணினியில் நடக்கும் செயல்கள் அல்லது நிகழ்வுகள் ஆகும், அவற்றைப் பற்றி கணினி உங்களுக்குத் தெரிவிக்கிறது, இதனால் நீங்கள் அவற்றுக்குப் பதிலளிக்க முடியும். எடுத்துக்காட்டாக, ரீசெட் (reset) பொத்தானைக் கிளிக் செய்யும் போது அது உள்ளீட்டை அழிக்கிறது. + +விசை அழுத்தங்கள் (keypresses) போன்ற விசைப்பலகையிலிருந்து வரும் தொடர்புகள், விசை மீண்டும் வெளியிடப்படுவதற்கு முன்பு அதன் நிலையைப் பிடிக்க தொடர்ந்து படிக்கப்பட வேண்டும். மற்ற நேரத்தைச் செலவழிக்கும் கணக்கீடுகளைச் செய்வது, ஒரு விசை அழுத்தத்தை நீங்கள் தவறவிடக் காரணமாகலாம். இது சில பழமையான இயந்திரங்களின் உள்ளீட்டைக் கையாளும் பொறிமுறையாகப் பயன்படுத்தப்பட்டது. ஒரு படி மேலே சென்று ஒரு வரிசையைப் (queue) பயன்படுத்துவது, அதாவது புதிய நிகழ்வுகளுக்காக வரிசையை அவ்வப்போது சரிபார்த்து அதற்குப் பதிலளிக்கும் நிரல். இந்த அணுகுமுறை _போலிங் (polling)_ என்று அழைக்கப்படுகிறது. + +இந்த அணுகுமுறையின் முக்கிய குறைபாடு என்னவென்றால், அது அவ்வப்போது வரிசையைப் பார்க்க வேண்டும், இது ஒரு நிகழ்வு தூண்டப்படும்போது இடையூறு ஏற்படுத்துகிறது. ஒரு நிகழ்வு நிகழும்போது குறியீட்டிற்குத் தெரிவிப்பதே இதற்குச் சிறந்த பொறிமுறையாகும். குறிப்பிட்ட நிகழ்வுகளுக்கான _ஹேண்ட்லர்களாக (handlers)_ செயல்பாடுகளைப் பதிவு செய்ய அனுமதிப்பதன் மூலம் நவீன உலாவிகள் இதைத்தான் செய்கின்றன. + +```javascript +

    ஹேண்ட்லரைச் செயல்படுத்த என்னைக் கிளிக் செய்யவும்.

    + +``` + +இங்கே, முழு `window` க்கும் ஒரு ஹேண்ட்லரைப் பதிவு செய்ய `window` பொருளின் (உலாவியால் வழங்கப்படும் உள்ளமைக்கப்பட்ட பொருள்) மீது `addEventListener` அழைக்கப்படுகிறது. அதன் `addEventListener` முறையை அழைப்பது, அதன் முதல் வாதத்தால் விவரிக்கப்பட்ட நிகழ்வு நிகழும்போது அழைக்கப்பட வேண்டிய இரண்டாவது வாதத்தைப் பதிவு செய்கிறது. + +{% hint style="info" %} +நிகழ்வு கேட்பவர்கள் (Event listeners) பதிவுசெய்யப்பட்ட பொருளின் சூழலில் (context) நிகழ்வு நிகழும்போது மட்டுமே அழைக்கப்படுவார்கள். +{% endhint %} + +சில பொதுவான HTML நிகழ்வுகள் இங்கே குறிப்பிடப்பட்டுள்ளன. + +| நிகழ்வு (Event) | விளக்கம் (Description) | +| ------------- | --------------------------------------------------------- | +| `onclick` | பயனர் உறுப்பைக் கிளிக் செய்யும் போது (clicks on the element) | +| `onchange` | படிவ உள்ளீட்டின் மதிப்பை பயனர் மாற்றும்போது அல்லது மாற்றியமைக்கும்போது | +| `onkeydown` | பயனர் ஒரு விசையை அழுத்தும் போது (presses a key) | +| `onload` | உலாவி ஏற்றுவதை முடித்தவுடன் (finished the loading) | +| `onmouseout` | மவுஸின் கர்சர் உறுப்பை விட்டு வெளியேறும்போது | +| `onmouseover` | மவுஸின் கர்சர் உறுப்பின் மீது வரும்போது | + +குழந்தைகளைக் கொண்ட கணுக்களில் (nodes) பதிவுசெய்யப்பட்ட ஹேண்ட்லர்கள் குழந்தைகளிடமிருந்தும் நிகழ்வுகளைப் பெறுவது பொதுவானது. எடுத்துக்காட்டாக, ஒரு பத்தியின் உள்ளே உள்ள பொத்தானைக் கிளிக் செய்தால், பத்தியில் பதிவுசெய்யப்பட்ட ஹேண்ட்லர்களும் கிளிக் நிகழ்வைப் பெறும். இரண்டிலும் ஹேண்ட்லர்கள் இருந்தால், கீழே உள்ளவர் முதலில் செல்வார். நிகழ்வு தொடங்கும் கணுவிலிருந்து (initiating node) அதன் பெற்றோர் கணுவிற்கும் மற்றும் ஆவணத்தின் வேருக்கும் (root) வெளிப்புறமாகப் _பரவுவதாக (propagate)_ கூறப்படுகிறது. + +நிகழ்வுப் பொருளின் (event object) மீது நிகழ்வு ஹேண்ட்லர் `stopPropagation` முறையை அழைக்கலாம், இது மேலேயுள்ள ஹேண்ட்லர்கள் நிகழ்வைப் பெறுவதைத் தடுக்கும். கிளிக் செய்யக்கூடிய உறுப்புக்குள் (clickable element) உங்களிடம் ஒரு பொத்தான் இருந்தால், ஒரு பொத்தான் கிளிக்கிலிருந்து வெளிப்புற உறுப்பின் கிளிக் செய்யக்கூடிய நடத்தைத் தூண்டுவதற்கு நீங்கள் விரும்பாத சந்தர்ப்பங்களில் இது பயனுள்ளதாக இருக்கும். + +```javascript +

    ஒரு கொண்ட ஒரு பத்தி.

    + +``` + +இங்கே, _`mousedown`_ ஹேண்ட்லர்கள் பத்தி மற்றும் பொத்தான் இரண்டாலும் பதிவு செய்யப்பட்டுள்ளன. பொத்தானைக் கிளிக் செய்தவுடன், பொத்தானின் ஹேண்ட்லர் `stopPropagation` ஐ அழைக்கிறது, இது பத்தியில் உள்ள ஹேண்ட்லர் இயங்குவதைத் தடுக்கும். + +நிகழ்வுகள் ஒரு இயல்புநிலை நடத்தையைக் (default behavior) கொண்டிருக்கலாம். எடுத்துக்காட்டாக, இணைப்புகள் (links) கிளிக் செய்தவுடன் இணைப்பின் இலக்குக்குச் செல்லும், கீழ் அம்புக்குறியைக் கிளிக் செய்தவுடன் ஒரு பக்கத்தின் கீழ்ப் பகுதிக்குச் செல்லப்படுவீர்கள், மற்றும் பல. நிகழ்வுப் பொருளின் மீது `preventDefault` முறையை அழைப்பதன் மூலம் இந்த இயல்புநிலை நடத்தைகளைத் தடுக்கலாம். + +```javascript +MDN + +``` + +இங்கே, கிளிக் செய்தவுடன் இணைப்பின் இயல்புநிலை நடத்தை தடுக்கப்படுகிறது, அதாவது இணைப்பின் இலக்கை நோக்கிச் செல்வது. diff --git a/ta/exercises/README.md b/ta/exercises/README.md new file mode 100644 index 00000000..2cd96025 --- /dev/null +++ b/ta/exercises/README.md @@ -0,0 +1,21 @@ +--- +layout: editorial +chapter: 21 +pageNumber: 146 +--- + +# அத்தியாயம் 21 +# பயிற்சிகள் (Exercises) + +இந்த அத்தியாயத்தில், ஜாவாஸ்கிரிப்டில் நமது அறிவைச் சோதிப்பதற்கான பயிற்சிகளைச் செய்வோம். நாம் செய்யவிருக்கும் பயிற்சிகள் கீழே பட்டியலிடப்பட்டுள்ளன: + +* [இணைத்தல் (Concatenation)](./concatenation.md) +* [நிபந்தனை அறிக்கைகள் (Conditional Statements)](./conditional-statements.md) +* [மாறிலிகள் (Constants)](./constants.md) +* [கன்சோல் (Console)](./console.md) +* [ஃபிஸ்பஸ் பிரச்சனை (FizzBuzz Problem)](./fizzbuzz-problem.md) +* [செயல்பாடுகள் (Functions)](./functions.md) +* [தலைப்புகளைப் பெறுங்கள்! (Get the Titles!)](./get-the-titles.md) +* [பெருக்கல் (Multiplication)](./multiplication.md) +* [பொருள்கள் (Objects)](./objects.md) +* [பயனர் உள்ளீட்டு மாறிகள் (User Input Variables)](./user-input-variables.md) diff --git a/ta/exercises/concatenation.md b/ta/exercises/concatenation.md new file mode 100644 index 00000000..54430d04 --- /dev/null +++ b/ta/exercises/concatenation.md @@ -0,0 +1,46 @@ +--- +chapter: 21 +pageNumber: 151 +--- + +# இணைத்தல் (Concatenation) + +எந்தவொரு நிரலாக்க மொழியிலும், சரம் இணைத்தல் (string concatenation) என்பது ஒன்று அல்லது அதற்கு மேற்பட்ட சரங்களை மற்றொரு சரத்துடன் சேர்ப்பதைக் குறிக்கிறது. எடுத்துக்காட்டாக, "_World_" மற்றும் "_Good Afternoon_" ஆகிய சரங்கள் "_Hello_" என்ற சரத்துடன் இணைக்கப்படும்போது, அவை "_Hello World, Good Afternoon_" என்ற சரத்தை உருவாக்குகின்றன. ஜாவாஸ்கிரிப்டில் நாம் பல வழிகளில் சரத்தை இணைக்க முடியும். + +### எடுத்துக்காட்டு: + +```javascript +const icon = "👋"; + +// using template Strings +`hi ${icon}`; + +// using join() Method +["hi", icon].join(" "); + +// using concat() Method +"".concat("hi ", icon); + +// using + operator +"hi " + icon; + +// RESULT +// hi 👋 +``` + +### 📝 பணி (Task): + +- [ ] கன்சோலில் '_Hello World_' என்பதை அச்சிட `str1` மற்றும் `str2` க்கான மதிப்புகளை அமைப்பதற்கான நிரலை எழுதவும். + +- [ ] பயனரின் முதல் பெயரையும் (`first_name`) கடைசி பெயரையும் (`last_name`) உள்ளிடுமாறு (prompt) கேட்கும் ஒரு நிரலை எழுதவும். பின்னர், அவர்களின் முழுப் பெயரை (`full_name`) உருவாக்கவும் காண்பிக்கவும் சரம் இணைப்பைப் பயன்படுத்தவும். + +- [ ] பயனரின் பெயரை உள்ளிடுமாறு கேட்கும் ஒரு நிரலை எழுதவும். பின்னர், அவர்களின் பெயரைக் கொண்ட வாழ்த்துச் செய்தியை (greeting message) உருவாக்கச் சரம் இணைப்பைப் பயன்படுத்தவும். எடுத்துக்காட்டுகளுக்கு: `Good morning, Aman`. + +### 💡 குறிப்புகள் (Hints): + +- சரம் இணைப்பைப் பற்றிய கூடுதல் தகவலுக்கு, சரங்களின் (strings) [இணைத்தல் (concatenation)](../strings/concat.md) அத்தியாயத்தைப் பார்வையிடவும். +Console output: {{ output.name }} +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/conditional-statements.md b/ta/exercises/conditional-statements.md new file mode 100644 index 00000000..e7ef4b39 --- /dev/null +++ b/ta/exercises/conditional-statements.md @@ -0,0 +1,30 @@ +--- +chapter: 21 +pageNumber: 153 +--- + +# நிபந்தனை அறிக்கைகள் (Conditional Statements) + +நிரலாக்கத்தில் நிபந்தனை தர்க்கம் (Conditional logic) இன்றியமையாதது, ஏனெனில் நீங்கள் என்ன தரவைக் கொடுத்தாலும் நிரல் செயல்படுவதை இது உறுதி செய்கிறது மற்றும் கிளைப்படுத்துதலையும் (branching) அனுமதிக்கிறது. நிஜ வாழ்க்கைச் சிக்கல்களில் பல்வேறு நிபந்தனை தர்க்கங்களைச் செயல்படுத்துவது பற்றியது இந்தப் பயிற்சி. + +### 📝 பணி (Task): + +- [ ] "_How many km is left to go?_" (இன்னும் எத்தனை கி.மீ. பயணிக்க வேண்டும்?) என்ற ப்ராம்ப்ட்டை (prompt) உருவாக்க ஒரு நிரலை எழுதவும், மேலும் பயனர் மற்றும் பின்வரும் நிபந்தனைகளின் அடிப்படையில், முடிவுகளை `console` இல் அச்சிடவும். + - இன்னும் 100 கி.மீ க்கும் அதிகமாகச் செல்ல வேண்டியிருந்தால், அச்சிடவும்: `"You still have a bit of driving left to go"`. + - 50 கி.மீ க்கும் அதிகமாகவும், ஆனால் 100 கி.மீ க்கும் குறைவாகவோ அல்லது சமமாகவோ இருந்தால், அச்சிடவும்: `"I'll be there in 5 minutes"`. + - 50 கிமீ க்கும் குறைவாகவோ அல்லது சமமாகவோ இருந்தால், அச்சிடவும்: `"I'm parking. I'll see you right now"`. +- [ ] ஒரு நபரின் வயதின் அடிப்படையில் அவர் வாக்களிக்கத் தகுதியானவரா இல்லையா என்பதைச் சரிபார்க்கும் ஒரு நிரலை எழுதவும். + + - பயனரின் வயது 18 அல்லது அதற்கு மேற்பட்டதாக இருந்தால் `You are eligible to vote` (நீங்கள் வாக்களிக்கத் தகுதியானவர்) என்பதை அச்சிடவும் + - பயனரின் வயது 18க்குக் குறைவாக இருந்தால் `You aren't eligible to vote` (நீங்கள் வாக்களிக்கத் தகுதியற்றவர்) என்பதை அச்சிடவும். + + **_குறிப்பு: `age` (வயது) `1` முதல் `100` வரை இருக்கலாம்._** + +### 💡 குறிப்புகள் (Hints): + +- நிபந்தனை தர்க்கம் மற்றும் நிபந்தனை அறிக்கைகளை எவ்வாறு பயன்படுத்துவது என்பதைப் புரிந்து கொள்ள [நிபந்தனை தர்க்கம் (conditional logic)](../conditional/) அத்தியாயத்தைப் பார்வையிடவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/console.md b/ta/exercises/console.md new file mode 100644 index 00000000..6bdd575c --- /dev/null +++ b/ta/exercises/console.md @@ -0,0 +1,64 @@ +--- +chapter: 21 +pageNumber: 147 +--- +# கன்சோல் (Console) + +ஜாவாஸ்கிரிப்டில், `console` இல் ஒரு செய்தியை (மாறியின் உள்ளடக்கம், கொடுக்கப்பட்ட சரம் போன்றவை) எழுத `console.log()` ஐப் பயன்படுத்துகிறோம். இது முக்கியமாகப் பிழைத்திருத்த (debugging) நோக்கங்களுக்காகப் பயன்படுத்தப்படுகிறது, ஒரு நிரலைச் செயல்படுத்துகையில் மாறிகளின் உள்ளடக்கங்களைக் கண்டறிவது இதன் நோக்கமாகும். + +### எடுத்துக்காட்டு: + +```javascript +console.log("Welcome to Learn JavaScript Beginners Edition"); +let age = 30; +console.log(age); +``` + +## கன்சோலில் கணிதம் (Math with console) +ஒரு கோவையின் (expression) பதிலைத் தெரிந்துகொள்ள `console` இல் கணிதச் சமன்பாட்டையும் எழுதலாம். + +### எடுத்துக்காட்டு: +```js +console.log("ஒரு தசாப்தத்திற்குப் (decade) பிறகு என்ன வயது?"); +let age = 30; +console.log(age + 10); +//returns 40 in the console +``` + +## கன்சோலில் பூலியன்கள் (Booleans in console) +ஏதாவது உண்மையா அல்லது பொய்யா என்பதைச் சரிபார்ப்பது டெவலப்பர்கள் கன்சோலைப் பயன்படுத்தும் மற்றொரு பயனுள்ள வழியாகும். உதாரணமாகக் கீழே உள்ள எடுத்துக்காட்டில், ஒரு நபரின் வயது 45க்குச் சமமாக இருப்பது உண்மையா அல்லது பொய்யா என்பதை நீங்கள் சரிபார்க்கலாம். + +### எடுத்துக்காட்டு: +```js +console.log("அவர்களுக்கு 50 வயதாகிறதா?"); +let age = 30; +console.log(age === 50); +//result: false +``` + +### 📝 பணிகள் (Tasks): + +* கன்சோலில் `Hello World` என்று அச்சிட ஒரு நிரலை எழுதவும். மற்ற விஷயங்களையும் முயற்சிக்க தயங்காதீர்கள்! +* மாறிகளை `console` இல் அச்சிட ஒரு நிரலை எழுதவும். + 1. `animal` என்ற மாறியை அறிவித்து (declare) அதற்கு dragon மதிப்பை ஒதுக்கவும் (assign). + 2. `animal` மாறியை `console` இல் அச்சிடவும். +* உங்களுக்கு விருப்பமான கணிதக் கோவையுடன் (math expression) `45` என்ற எண்ணை அச்சிட ஒரு நிரலை எழுதவும். (எண்களில் ஒன்று மாறியாக இருந்தால் போனஸ் (Bonus)!) + +* முட்டைகளின் (eggs) அளவு `12` க்கு மேல் உள்ளதா என்பதைச் சரிபார்க்கும் நிரலைக் கன்சோலில் எழுதவும். + 1. `eggs` என்ற மாறியை அறிவித்து, அதற்கு உங்களுக்கு விருப்பமான எண்ணை ஒதுக்கவும் + 2. `console` இல் `eggs` மாறியை அழைக்கவும், மேலும் `eggs` க்கு ஒதுக்கப்பட்ட எண் 12ஐ விடப் பெரியதா என்பதைப் பார்க்க சரியான ஆபரேட்டரைப் பயன்படுத்தவும் + * முட்டைகளின் எண்ணிக்கை அதிகமாக இருந்தால், அது `true` என அச்சிட வேண்டும், இல்லையென்றால் அது `false` என அச்சிட வேண்டும் + + + + + +### 💡 குறிப்புகள் (Hints): + +* மாறிகளைப் பற்றி மேலும் புரிந்து கொள்ள [மாறிகள் (variable)](../basics/variables.md) அத்தியாயத்தைப் பார்வையிடவும். +* நீங்கள் பயன்படுத்தக்கூடிய சாத்தியமான ஆபரேட்டர்களை அறிய [ஆபரேட்டர்கள் (operators)](https://javascript.sumankunwar.com.np/ta/numbers/operators.html) பக்கத்தைப் பார்வையிடவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/constants.md b/ta/exercises/constants.md new file mode 100644 index 00000000..755b7c2c --- /dev/null +++ b/ta/exercises/constants.md @@ -0,0 +1,41 @@ +--- +chapter: 21 +pageNumber: 150 +--- + +# மாறிலிகள் (Constants) + +மாறிலிகள் ES6 இல் (2015) அறிமுகப்படுத்தப்பட்டன, மேலும் அவை `const` முக்கிய சொல்லைப் (keyword) பயன்படுத்துகின்றன. `const` உடன் அறிவிக்கப்பட்ட (declared) மாறிகளை மீண்டும் ஒதுக்கவோ (reassigned) அல்லது மீண்டும் அறிவிக்கவோ (redeclared) முடியாது. + +### எடுத்துக்காட்டு: + +```javascript +const VERSION = "1.2"; +``` + +### 📝 பணி (Task): + +- [ ] கீழே குறிப்பிடப்பட்டுள்ள நிரலை இயக்கி, கன்சோலில் நீங்கள் காணும் பிழையைச் சரிசெய்யவும். குறியீடு கன்சோலில் சரி செய்யப்படும்போது அதன் முடிவு `0.9` என்பதை உறுதிப்படுத்தவும். + + ```javascript + const VERSION = "0.7"; + VERSION = "0.9"; + console.log(VERSION); + ``` + +- [ ] _டிகிரி செல்சியஸ் (degrees Celsius)_ இல் வெப்பநிலையை (temperature) உள்ளிடுமாறு (prompt) பயனரைக் கேட்கும் நிரலை எழுதவும், பின்னர் அதை _டிகிரி ஃபாரன்ஹீட் (degrees Fahrenheit)_ ஆக மாற்றுவதற்கு `9/5`க்குச் சமமான மாறிலி (constant) `CONVERSION_FACTOR` ஐப் பயன்படுத்தவும். + + ```javascript + const CONVERSION_FACTOR = 9 / 5; + + /* Start your code from here*/ + ``` + +### 💡 குறிப்புகள் (Hints): + +- const பற்றிய கூடுதல் தகவலுக்கு [மாறிகள் (Variables)](../basics/variables.md) அத்தியாயத்தைப் பார்வையிடவும், மேலும் ஒரு திருத்தத்தைக் கற்றுக்கொள்ளத் தேடுபொறிகளில் (search engines) "_TypeError assignment to constant variable_" என்பதைத் தேடவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/fizzbuzz-problem.md b/ta/exercises/fizzbuzz-problem.md new file mode 100644 index 00000000..3015193e --- /dev/null +++ b/ta/exercises/fizzbuzz-problem.md @@ -0,0 +1,49 @@ +--- +chapter: 21 +pageNumber: 155 +--- +# ஃபிஸ்பஸ் பிரச்சனை (FizzBuzz Problem) + +_FizzBuzz_ பிரச்சனை என்பது பொதுவாகக் கேட்கப்படும் கேள்விகளில் ஒன்றாகும், இங்கே சில நிபந்தனைகளின் அடிப்படையில் _Fizz_ மற்றும் _Buzz_ ஐ அச்சிட வேண்டும். + +### 📝 பணிகள் (Tasks): + +* [ ] பின்வரும் நிபந்தனைகள் பூர்த்தி செய்யப்படும் வகையில் 1 முதல் 100 வரையிலான அனைத்து எண்களையும் அச்சிட ஒரு நிரலை எழுதவும். + * 3 இன் மடங்குகளுக்கு (multiples), எண்ணுக்குப் பதிலாக `Fizz` என அச்சிடவும். + * 5 இன் மடங்குகளுக்கு, `Buzz` என அச்சிடவும். + * 3 மற்றும் 5 ஆகிய இரண்டின் மடங்குகளாக இருக்கும் எண்களுக்கு, `FizzBuzz` என அச்சிடவும். + + ```javascript + / + 1 + 2 + Fizz + 4 + Buzz + Fizz + 7 + 8 + Fizz + Buzz + 11 + Fizz + 13 + 14 + FizzBuzz + 16 + .... + .... + 98 + Fizz + Buzz + / + ``` + +### 💡 குறிப்புகள் (Hints): + +* லூப் (loop) எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்து கொள்ள [லூப்கள் (loops)](../loops/) அத்தியாயத்தைப் பார்வையிடவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/functions.md b/ta/exercises/functions.md new file mode 100644 index 00000000..c4328560 --- /dev/null +++ b/ta/exercises/functions.md @@ -0,0 +1,25 @@ +--- +chapter: 21 +pageNumber: 152 +--- + +# செயல்பாடுகள் (Functions) + +ஒரு செயல்பாடு (function) என்பது ஒரு குறிப்பிட்ட பணியைச் செய்வதற்காக வடிவமைக்கப்பட்ட குறியீட்டின் ஒரு தொகுதியாகும், மேலும் "ஏதாவது" அதைத் தூண்டும்போது (invokes) அது செயல்படுத்தப்படும். செயல்பாடுகள் பற்றிய கூடுதல் தகவல்களை [செயல்பாடுகள் (functions)](../functions/) அத்தியாயத்தில் காணலாம். + +### 📝 பணி (Task): + +- [ ] `45345` என்ற எண்ணை வாதமாக (argument) அனுப்புவதற்கும், அந்த எண் ஒற்றைப்படை (odd) எண்ணா இல்லையா என்பதைத் தீர்மானிப்பதற்கும் `isOdd` என்ற பெயரில் ஒரு செயல்பாட்டை உருவாக்க ஒரு நிரலை எழுதவும். + +- [ ] முடிவைப் பெற இந்தச் செயல்பாட்டை அழைக்கவும். முடிவு பூலியன் (boolean) வடிவத்தில் இருக்க வேண்டும் மற்றும் `console` இல் `true` என்பதைத் திரும்பப் பெற வேண்டும். + +- [ ] செவ்வகத்தின் (rectange) `width` (அகலம்) மற்றும் `height` (உயரம்) ஆகிய இரண்டு அளவுருக்களை (parameters) எடுக்கும் `calculateRectangleArea` என்ற பெயரில் ஒரு செயல்பாட்டை உருவாக்க ஒரு நிரலை எழுதவும், மேலும் இது செவ்வகத்தின் `area` வைத் (பரப்பளவு) திரும்பப் பெற வேண்டும். + +### 💡 குறிப்புகள் (Hints): + +- செயல்பாடுகள் மற்றும் அவற்றை எவ்வாறு உருவாக்குவது என்பதைப் புரிந்துகொள்ள [செயல்பாடுகள் (functions)](../functions/) அத்தியாயத்தைப் பார்வையிடவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/get-the-titles.md b/ta/exercises/get-the-titles.md new file mode 100644 index 00000000..8cc8f47a --- /dev/null +++ b/ta/exercises/get-the-titles.md @@ -0,0 +1,35 @@ +--- +chapter: 21 +pageNumber: 156 +--- +# தலைப்புகளைப் பெறுங்கள்! (Get the Titles!) + +_Get the Titles!_ பிரச்சனை (problem) ஒரு சுவாரஸ்யமான பிரச்சனையாகும், அங்குப் புத்தகங்களின் பட்டியலிலிருந்து நாம் தலைப்பைப் பெற வேண்டும். வரிசைகள் (arrays) மற்றும் பொருள்களைச் (objects) செயல்படுத்துவதற்கான சிறந்த பயிற்சி இது. + +### 📝 பணிகள் (Tasks): + +ஒரு ஆசிரியருடன் (author) புத்தகங்களைக் குறிக்கும் பொருள்களின் வரிசை கொடுக்கப்பட்டுள்ளது. + +```javascript +const books = [ + { + title: "Eloquent JavaScript, Third Edition", + author: "Marijn Haverbeke" + }, + { + title: "Practical Modern JavaScript", + author: "Nicolás Bevacqua" + } +] +``` + +* [ ] ஒரு வரிசையை (array) எடுத்துத் தலைப்பின் வரிசையைத் திரும்பப் பெறும் மற்றும் அதன் மதிப்பைக் `console` இல் அச்சிடும் `getTheTitles` என்ற செயல்பாட்டை உருவாக்க ஒரு நிரலை எழுதவும். + +### 💡 குறிப்புகள் (Hints): + +* வரிசை மற்றும் பொருள் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்து கொள்ள [வரிசைகள் (arrays)](../arrays/) மற்றும் [பொருள்கள் (objects)](../objects/) அத்தியாயத்தைப் பார்வையிடவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/multiplication.md b/ta/exercises/multiplication.md new file mode 100644 index 00000000..ebef152e --- /dev/null +++ b/ta/exercises/multiplication.md @@ -0,0 +1,31 @@ +--- +chapter: 20 +pageNumber: 148 +--- + +# பெருக்கல் (Multiplication) + +ஜாவாஸ்கிரிப்டில், ஆஸ்டிரிஸ்க் (asterisk) `(*)` எண்கணித ஆபரேட்டர்களைப் பயன்படுத்தி இரண்டு எண்களை நாம் பெருக்க முடியும். + +### எடுத்துக்காட்டு: + +```javascript +let resultingValue = 3 * 2; +``` + +இங்கே, `3 * 2` இன் பெருக்கற்பலனை (product) ஒரு `resultingValue` மாறியில் சேமித்துள்ளோம். + +### 📝 பணிகள் (Tasks): + +- [ ] `23` மற்றும் `41` இன் பெருக்கற்பலனைச் சேமித்து அதன் மதிப்பை அச்சிட ஒரு நிரலை எழுதவும். + +- [ ] ஒரு குறிப்பிட்ட எண்ணிற்கான பெருக்கல் வாய்ப்பாட்டை (multiplication table) உருவாக்கும் ஒரு நிரலை எழுதவும். நிரல் ஒரு எண்ணை உள்ளீடாக (input) எடுத்துக்கொள்ள வேண்டும், பின்னர் அந்த எண்ணுக்கான பெருக்கல் வாய்ப்பாட்டை 1 முதல் 10 வரை காண்பிக்க வேண்டும். + +### 💡 குறிப்புகள் (Hints): + +- கணிதச் செயல்பாடுகளைப் (mathematical operations) புரிந்து கொள்ள [அடிப்படை ஆபரேட்டர்கள் (Basic Operators)](../numbers/operators.md) அத்தியாயத்தைப் பார்வையிடவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/objects.md b/ta/exercises/objects.md new file mode 100644 index 00000000..0e77ca30 --- /dev/null +++ b/ta/exercises/objects.md @@ -0,0 +1,52 @@ +--- +chapter: 21 +pageNumber: 154 +--- +# பொருள்கள் (Objects) + +பொருள்கள் (Objects) என்பவை `key` (திறவுகோல்), `value` (மதிப்பு) ஜோடிகளின் தொகுப்பாகும், மேலும் ஒவ்வொரு key-value ஜோடியும் பண்பு (property) எனப்படும். இங்கே, `key` இன் பண்பு ஒரு `string` ஆக (சரம்) இருக்கலாம், அதேசமயம் அதன் `value` எந்த மதிப்பாகவும் இருக்கலாம். + +### 📝 பணிகள் (Tasks): + +இரண்டு உறுப்பினர்களைக் கொண்ட ஒரு Doe குடும்பம் கொடுக்கப்பட்டுள்ளது, அங்கு ஒவ்வொரு உறுப்பினரின் தகவலும் ஒரு பொருளின் (object) வடிவத்தில் வழங்கப்படுகிறது. + +```javascript +let person = { + name: "John", //String + lastName: "Doe", + age: 35, //Number + gender: "male", + luckyNumbers: [ 7, 11, 13, 17], //Array + significantOther: person2 //Object, +}; + +let person2 = { + name: "Jane", + lastName: "Doe", + age: 38, + gender: "female", + luckyNumbers: [ 2, 4, 6, 8], + significantOther: person +}; + +let family = { + lastName: "Doe", + members: [person, person2] //Array of objects +}; +``` + +* [ ] Doe குடும்பத்தின் முதல் உறுப்பினரின் பெயரை `console` இல் அச்சிடுவதற்கான வழியைக் கண்டறியவும். +* [ ] Doe குடும்பத்தின் இரண்டாவது உறுப்பினரின் நான்காவது `luckyNumbers` ஐ `33` ஆக மாற்றவும். +* [ ] ஒரு புதிய நபரை (`Jimmy` `Doe`, `13`, `male`, `[1, 2, 3, 4]`, `null`) உருவாக்குவதன் மூலம் குடும்பத்தில் ஒரு புதிய உறுப்பினரைச் சேர்த்து உறுப்பினர் பட்டியலைப் புதுப்பிக்கவும். +* [ ] `console` இல் Doe குடும்பத்தின் அதிர்ஷ்ட எண்களின் (lucky numbers) கூட்டுத்தொகையை (`SUM`) அச்சிடவும். + +### 💡 குறிப்புகள் (Hints): + +* பொருள் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்து கொள்ள [பொருள்கள் (objects)](../objects/) அத்தியாயத்தைப் பார்வையிடவும். +* family பொருளுக்குள் இருக்கும் ஒவ்வொரு person பொருளில் இருந்தும் `luckyNumbers` ஐ நீங்கள் பெறலாம். +* ஒவ்வொரு வரிசையையும் (array) பெற்றவுடன் ஒவ்வொரு உறுப்பையும் (element) சேர்த்து லூப் (loop) செய்து, பிறகு 3 குடும்ப உறுப்பினர்களின் கூட்டுத்தொகையையும் சேர்க்கவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/exercises/user-input-variables.md b/ta/exercises/user-input-variables.md new file mode 100644 index 00000000..ca979fc0 --- /dev/null +++ b/ta/exercises/user-input-variables.md @@ -0,0 +1,22 @@ +--- +chapter: 20 +pageNumber: 149 +--- +# பயனர் உள்ளீட்டு மாறிகள் (User Input Variables) + +ஜாவாஸ்கிரிப்டில், நாம் பயனர்களிடமிருந்து உள்ளீட்டை (input) எடுத்து அதை ஒரு மாறியாகப் (variable) பயன்படுத்தலாம். அவற்றுடன் வேலை செய்ய அவற்றின் மதிப்பை ஒருவர் தெரிந்து கொள்ள வேண்டியதில்லை. + +### 📝 பணிகள் (Tasks): + +* [ ] பயனரிடமிருந்து உள்ளீட்டை எடுத்து அதில் `10` ஐச் சேர்த்து அதன் முடிவை அச்சிட ஒரு நிரலை எழுதவும். + +### 💡 குறிப்புகள் (Hints): + +* மாறியின் உள்ளடக்கம் பயனரின் உள்ளீடுகளால் தீர்மானிக்கப்படுகிறது. `prompt()` முறை உள்ளீட்டு மதிப்பைச் சரமாகச் (string) சேமிக்கிறது. +* கணக்கீடுகளுக்குச் சரம் மதிப்பு ஒரு முழு எண்ணாக (integer) மாற்றப்படுவதை உறுதிசெய்ய வேண்டும். +* `string` ஐ `int` ஆக மாற்றுவதற்கு [அடிப்படை ஆபரேட்டர்கள் (Basic Operators)](../numbers/operators.md) அத்தியாயத்தைப் பார்வையிடவும். + +{% if output.name == "website" %} +{% aceeditor compilerTitle="Try it!" %} +{% endaceeditor %} +{% endif %} \ No newline at end of file diff --git a/ta/file-system/README.md b/ta/file-system/README.md new file mode 100644 index 00000000..1293507d --- /dev/null +++ b/ta/file-system/README.md @@ -0,0 +1,59 @@ +--- +chapter: 24 +pageNumber: 242 +description: +--- + +# அத்தியாயம் 24 +# கோப்பு முறைமை (File system) +ஜாவாஸ்கிரிப்டில் கோப்பு முறைமைச் செயல்பாடுகள் (Filesystem operations) வலை உலாவியாக (கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட்) அல்லது சேவையகமாக (Node.js) இருக்கக்கூடிய ஹோஸ்ட் சூழலின் (host environment) கோப்பு முறைமையுடன் தொடர்புகொள்ளப் பயன்படுத்தப்படுகின்றன. கோப்பு முறைமையிலிருந்து படிக்கவும் (read) கோப்பு முறைமைக்கு எழுதவும் (write) பல்வேறு APIகள் மற்றும் முறைகளை ஜாவாஸ்கிரிப்ட் வழங்குகிறது. தரவைச் சேமிப்பது, கட்டமைப்பு கோப்புகளைப் (configuration files) படிப்பது மற்றும் பயனரால் பதிவேற்றப்பட்ட கோப்புகளைச் செயலாக்குவது போன்ற பணிகளுக்கு இந்தச் செயல்பாடுகள் அவசியம். ஜாவாஸ்கிரிப்டில் உள்ள கோப்பு முறைமைச் செயல்பாடுகளின் கண்ணோட்டம் (overview) கீழே கொடுக்கப்பட்டுள்ளது: +#### ஒத்திசைவற்ற மற்றும் தடையற்ற I/O (Asynchronous and Non-Blocking I/O): + +Node.js இல், I/O செயல்பாடுகளை ஒத்திசைவின்றிச் (asynchronously) செய்ய முடியும், அதாவது அவை நிரலைச் செயல்படுத்துவதைத் தடுக்காது (don't block). அதற்குப் பதிலாக, அவை ஒரு வரிசையில் (queue) வைக்கப்படுகின்றன, மேலும் நிரல் தொடர்ந்து மற்ற பணிகளைச் செயல்படுத்துகிறது. I/O செயல்பாடு முடிந்ததும், முடிவைக் கையாள கால்பேக் செயல்பாடு (callback function) அழைக்கப்படுகிறது. அதிக நேரம் எடுக்கக்கூடிய I/O செயல்பாடுகளுக்கு இது மிகவும் பயனுள்ளதாக இருக்கும். + +#### படித்தல் (Read): +இந்த எடுத்துக்காட்டில், நீங்கள் **test.txt** கோப்பிலிருந்து தரவை ஒத்திசைவின்றிப் படிக்க `fs.readFile` செயல்பாட்டைப் பயன்படுத்துகிறீர்கள். படிக்கும் செயல்பாடு முடிந்ததும் செயல்படுத்தப்படும் கால்பேக் செயல்பாட்டை இது எடுக்கிறது. `console.log("This gets printed at First")` வரியானது படிக்கும் செயல்பாட்டைத் தொடங்கிய உடனேயே செயல்படுத்தப்படுகிறது, மேலும் இது வாசிப்பு முடிவடையும் வரை காத்திருக்காது. + +```javascript +const fs= require('fs'); +//asynchronous, non-blocking I/O that's why this runs last, as it takes more time + +fs.readFile('test.txt','utf8',(err,data) => { + console.log(err,data) +}) +console.log("This gets printed at First") +``` + +#### எழுதுதல் (Write): +இங்கே, ஒத்திசைவின்றி (asynchronously) 'test.txt' கோப்பில் தரவை எழுத `fs.writeFile` ஐப் பயன்படுத்துகிறீர்கள். எழுதும் செயல்பாடு முடிந்ததும் கால்பேக் செயல்பாடு செயல்படுத்தப்படுகிறது. எழுதும் செயல்பாடு முடிந்ததும் இது `"This runs after writing in a file: written to file"` என்பதை அச்சிடுகிறது. + +```javascript +fs.writeFile("test.txt","mahima is good girl", () => { + console.log("This runs after writing in a file: written to file") +}) +``` + +### ஒத்திசைவான I/O (Synchronous I/O): + +செயல்பாடு முடியும் வரை ஒத்திசைவான I/O செயல்பாடுகள் நிரலை இயக்குவதைத் தடுக்கின்றன (block). Node.js இல், ஒத்திசைவான செயல்பாடுகள் குறைவாகவே பயன்படுத்தப்பட வேண்டும், குறிப்பாகக் கோப்பு I/Oக்கு, அவை செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும் மற்றும் நிகழ்வு சுழற்சியைத் (event loop) தடுக்கும். + +#### படித்தல் (Read): +ஒத்திசைவான கோப்பு வாசிப்புக்கு `fs.readFileSync` செயல்பாடு பயன்படுத்தப்படுகிறது. முழு கோப்பையும் படிக்கும் வரை இது செயல்படுத்துவதைத் தடுக்கிறது, பின்னர் அது குறியீட்டின் மற்ற பகுதிகளுடன் தொடர்கிறது. கோப்பு வாசிப்பின் போது நிரல் பதிலளிக்காத நிலைக்கு (unresponsive) இது காரணமாக இருக்கலாம் என்பதால் இது பொதுவாகப் பரிந்துரைக்கப்படுவதில்லை. + +```javascript +const a=fs.readFileSync("test.txt") //nodejs intentionally blocks +console.log(a.toString()) +console.log("At last") +``` + +#### எழுதுதல் (Write): +ஒத்திசைவான கோப்பு எழுத்திற்கு `fs.writeFileSync` பயன்படுத்தப்படுகிறது. எழுதும் செயல்பாடு முடியும் வரை நிரலின் செயல்பாட்டை இது தடுக்கிறது. எழுதும் செயல்பாட்டின் போது நீண்ட காலத்திற்கு நிரலைத் தடுக்கலாம் என்பதால், மீண்டும் இது எச்சரிக்கையுடன் பயன்படுத்தப்பட வேண்டும். + + + +```javascript +fs.writeFileSync("test.txt","mahima is good girl", 'utf8') +console.log("This is sync: the process is intentionally blocked ") + +``` +Node.js ஒத்திசைவான மற்றும் ஒத்திசைவற்ற கோப்பு I/O விருப்பங்களை வழங்குகிறது. ஒத்திசைவற்ற I/O பொதுவாகச் சிறந்த செயல்திறன் மற்றும் பதிலளிப்புத்தன்மைக்கு (responsiveness) விரும்பப்படுகிறது, அதே நேரத்தில் ஒத்திசைவான I/O தேவைப்படும்போது மற்றும் எச்சரிக்கையுடன் மட்டுமே பயன்படுத்தப்படுகிறது, ஏனெனில் இது நிரலை இயக்குவதைத் தடுக்கலாம். \ No newline at end of file diff --git a/ta/functions/README.md b/ta/functions/README.md new file mode 100644 index 00000000..39a694b5 --- /dev/null +++ b/ta/functions/README.md @@ -0,0 +1,58 @@ +--- +layout: editorial +chapter: 8 +pageNumber: 68 +description: Functions ஒரு குறிப்பிட்ட பணி அல்லது பணிகளின் தொகுப்பை செய்யும் குறியீட்டுத் தொகுதிகள். அவை ஒரு நிரலில் எந்த நேரத்திலும் அழைக்கப்படக்கூடிய மற்றும் இயக்கப்படக்கூடிய மீண்டும் பயன்படுத்தக்கூடிய குறியீட்டு அலகுகளாகும். +--- + +# அத்தியாயம் 8 +# செயல்பாடுகள் (Functions) + +நிரலாக்கத்தில் மிக சக்திவாய்ந்த மற்றும் அவசியமான கருத்துக்களில் Functions ஒன்றாகும். கணித சார்புகளைப் போன்ற Functions மாற்றங்களைச் செய்கின்றன, அவை **arguments** எனப்படும் உள்ளீட்டு மதிப்புகளை எடுத்து ஒரு வெளியீட்டு மதிப்பை **return** செய்கின்றன. + +Functions இரண்டு வழிகளில் உருவாக்கப்படலாம்: `function declaration` அல்லது `function expression` ஐப் பயன்படுத்துதல். `function expression` இல் _function name_ தவிர்க்கப்படலாம், இது ஒரு `anonymous function` ஆக மாற்றும். மாறிகளைப் போலவே Functions உம் அறிவிக்கப்பட வேண்டும். `x` என்ற _argument_ ஐ ஏற்கும் மற்றும் x இன் இரட்டிப்பை **return** செய்யும் `double` என்ற செயல்பாட்டை அறிவிப்போம்: + +```javascript +// ஒரு function declaration எடுத்துக்காட்டு +function double(x) { + return 2 * x; +} +``` + +> _குறிப்பு:_ மேலே உள்ள function அது வரையறுக்கப்படுவதற்கு முன்பே குறிக்கப்படலாம். + +Functions ஜாவாஸ்கிரிப்டில் மதிப்புகளாகவும் உள்ளன; அவை மாறிகளில் சேமிக்கப்படலாம் (எண்கள், சரங்கள் போன்றவை) மற்றும் பிற functions க்கு வாதங்களாக கொடுக்கப்படலாம்: + +```javascript +// ஒரு function expression எடுத்துக்காட்டு +let double = function (x) { + return 2 * x; +}; +``` + +> _குறிப்பு:_ மற்ற எந்த மாறியையும் போலவே மேலே உள்ள function வரையறுக்கப்படுவதற்கு முன்பு அதைக் குறிக்க **முடியாது**. + +{% hint style="info" %} + Callback என்பது மற்றொரு function க்கு வாதமாக அனுப்பப்படும் ஒரு function ஆகும். +{% endhint %} + +Arrow function என்பது பாரம்பரிய functions க்கு ஒரு கச்சிதமான மாற்றாகும், இது சில வரம்புகளுடன் சில சொற்பொருள் வேறுபாடுகளைக் கொண்டுள்ளது. இந்த functions க்கு `this`, `arguments` மற்றும் `super` ஆகியவற்றுக்கான சொந்த பிணைப்புகள் இல்லை, மேலும் இவற்றை constructors ஆகப் பயன்படுத்த முடியாது. ஒரு arrow function எடுத்துக்காட்டு: + +```javascript +const double = (x) => 2 * x; +``` + +{% hint style="working" %} +Arrow function இல் உள்ள `this` முக்கிய சொல் arrow function ஐ வரையறுத்த பொருளைக் குறிக்கிறது. +{% endhint %} + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [Closures](./for-each.md) +* [High Order Functions](./higher-order.md) +* [Recursive Functions](./recursive-functions.md) +* [Set Interval](./set-interval.md) +* [Set Timeout](./set-timeout.md) +* [This Keyword](./this-keyword.md) +* [Rest Operator](./rest-operator.md) +* [Hoisting](./hoisting.md) +* [Getters and Setters](./getters-setters.md) \ No newline at end of file diff --git a/ta/functions/closures.md b/ta/functions/closures.md new file mode 100644 index 00000000..1c2a4cde --- /dev/null +++ b/ta/functions/closures.md @@ -0,0 +1,63 @@ +--- +chapter: 8 +description: Closures என்பது ஒரு ஜாவாஸ்கிரிப்ட் கருத்தாகும், இது வெளிப்புறச் செயல்பாடு இயங்கி முடிந்த பின்னரும், செயல்பாடுகள் அவற்றின் உள்ளடக்க நோக்கத்திலிருந்து மாறிகளை அணுகவும் நினைவில் கொள்ளவும் அனுமதிக்கிறது. அவை தரவு உறைபொதியாக்கம் (data encapsulation), தனிப்பட்ட மாறிகள் (private variables) மற்றும் ஜாவாஸ்கிரிப்டில் உள்ள பல்வேறு வடிவமைப்பு வடிவங்களுக்கு அவசியமானவை. Closures குறியீட்டின் நெகிழ்வுத்தன்மையையும் பராமரிப்பையும் மேம்படுத்துகின்றன. +--- + +# Closures + +ஜாவாஸ்கிரிப்டில், closures என்பது மொழியில் ஒரு முக்கிய பங்கை வகிக்கும் ஒரு அடிப்படை மற்றும் சக்திவாய்ந்த கருத்தாகும். சுத்தமான, திறமையான மற்றும் பராமரிக்கக்கூடிய குறியீட்டை எழுதுவதற்கு closures ஐப் புரிந்துகொள்வது அவசியம். இந்த அத்தியாயத்தில், closures என்றால் என்ன, அவை எவ்வாறு செயல்படுகின்றன, மற்றும் ஜாவாஸ்கிரிப்டில் அவை ஏன் முக்கியம் என்பதை ஆராய்வோம். + +## Closures என்றால் என்ன? + +ஒரு closure என்பது ஒரு செயல்பாடாகும், இது வெளிப்புறச் செயல்பாடு செயல்படுத்தி முடிந்த பிறகும் அதன் உள்ளடக்க (இணைக்கும்) சொற்பொருள் நோக்கத்திலிருந்து மாறிகளுக்கான அணுகலைத் தக்கவைத்துக் கொள்கிறது. எளிமையான வார்த்தைகளில் கூறுவதானால், ஒரு closure மாறிகளை "closes over" செய்து, அவற்றின் மதிப்புகளைப் பாதுகாக்கிறது, மேலும் உள் செயல்பாடுகளை அவற்றை அணுக அனுமதிக்கிறது. + +## Closures எவ்வாறு செயல்படுகின்றன + +ஒரு செயல்பாடு மற்றொரு செயல்பாட்டிற்குள் வரையறுக்கப்படும்போது மற்றும் வெளிப்புற செயல்பாட்டிலிருந்து மாறிகளைக் குறிக்கும்போது ஜாவாஸ்கிரிப்டில் Closures உருவாக்கப்படுகின்றன. closures எவ்வாறு செயல்படுகின்றன என்பதற்கான படிப்படியான விளக்கம் இங்கே: + +1. **செயல்பாடு வரையறை (Function Definition)**: ஒரு செயல்பாடு மற்றொரு செயல்பாட்டிற்குள் வரையறுக்கப்படுகிறது. + +2. **மாறி குறிப்பு (Variable Reference)**: உள் செயல்பாடு வெளிப்புற செயல்பாட்டிலிருந்து மாறிகளைக் குறிக்கிறது. + +3. **ஒரு Closure உருவாக்கம்**: உள் செயல்பாடு உருவாக்கப்படும்போது, அது ஒரு closure ஐ உருவாக்குகிறது, அது குறிக்கும் மாறிகளைப் பிடிக்கிறது. + +4. **இணைக்கும் நோக்கத்திற்கான அணுகல் (Access to Enclosing Scope)**: வெளிப்புறச் செயல்பாடு செயல்படுத்துவதை முடித்த பின்னரும், உள் செயல்பாடானது வெளிப்புற செயல்பாட்டிலிருந்து மாறிகளை அணுகிப் பயன்படுத்த முடியும். + +## நடைமுறை எடுத்துக்காட்டு + +ஒரு நடைமுறை எடுத்துக்காட்டுடன் closures ஐ விளக்குவோம்: + +```javascript +function outerFunction() { + const outerVariable = 'நான் வெளிப்புற செயல்பாட்டிலிருந்து வந்தவன்'; + + function innerFunction() { + console.log(outerVariable); + } + + return innerFunction; +} + +const closureFunction = outerFunction(); // ஒரு closure ஐ உருவாக்குகிறது +closureFunction(); // "நான் வெளிப்புற செயல்பாட்டிலிருந்து வந்தவன்" என பதிவு செய்கிறது +``` + +இந்த எடுத்துக்காட்டில், `outerFunction` `outerVariable` ஐ வரையறுக்கிறது, மற்றும் `innerFunction` அதன் எல்லைக்குள் `outerVariable` ஐ அணுகுகிறது. `outerFunction` அழைக்கப்படும்போது மற்றும் `closureFunction` அது திரும்பப் பெறும் மதிப்பிற்கு ஒதுக்கப்படும்போது, அது `outerVariable` க்கான அணுகலைத் தக்கவைக்கும் ஒரு closure ஐ உருவாக்குகிறது. பின்னர், `closureFunction` அழைக்கப்படும்போது, `outerFunction` செயல்படுத்துவதை முடித்திருந்தாலும், அதற்கு `outerVariable` அணுகல் உள்ளது. + +## Closures க்கான பயன்பாட்டு வழக்குகள் + +Closures ஜாவாஸ்கிரிப்டில் பல்வேறு நடைமுறை பயன்பாட்டு வழக்குகளைக் கொண்டுள்ளன, அவற்றுள்: + +- **தரவு உறைபொதியாக்கம் (Data Encapsulation)**: Closures தரவை இணைக்கவும் பாதுகாக்கவும் பயன்படுத்தப்படலாம், இது வெளியிலிருந்து அணுக முடியாததாக ஆக்குகிறது. பல வடிவமைப்பு வடிவங்களில் இது ஒரு அடிப்படைக் கருத்தாகும். + +- **செயல்பாட்டு தொழிற்சாலைகள் (Function Factories)**: குறிப்பிட்ட நடத்தைகளுடன் செயல்பாடுகளை உருவாக்கும் தொழிற்சாலை செயல்பாடுகளை (factory functions) உருவாக்க closures அனுமதிக்கின்றன. + +- **தனிப்பட்ட மாறிகள் (Private Variables)**: வெளிப்புறக் குறியீட்டிலிருந்து சில தரவை மறைத்து, பொருள்களுக்குள் தனிப்பட்ட மாறிகள் மற்றும் முறைகளை உருவாக்க closures உதவுகின்றன. + +- **Callback செயல்பாடுகள்**: ஒத்திசைவற்ற செயல்பாடுகளுக்கு இடையே சூழலையும் தரவையும் பராமரிக்க Callbacks பெரும்பாலும் closures ஐ உள்ளடக்கியிருக்கும். + +Closures என்பது ஜாவாஸ்கிரிப்டில் உள்ள ஒரு சக்திவாய்ந்த அம்சமாகும், இது செயல்பாடுகள் அவற்றின் உள்ளடக்க நோக்கத்திலிருந்து மாறிகளுக்கான அணுகலைத் தக்கவைக்க அனுமதிக்கிறது. சுத்தமான மற்றும் திறமையான குறியீட்டை எழுதுவதற்கு closures ஐப் புரிந்துகொள்வது அவசியம். அவை பொதுவாக பல்வேறு வடிவமைப்பு வடிவங்களில் பயன்படுத்தப்படுகின்றன மற்றும் தரவு உறைபொதியாக்கம், செயல்பாட்டு தொழிற்சாலைகள் மற்றும் பலவற்றிற்கான தீர்வுகளை வழங்குகின்றன. + +புத்திசாலித்தனமாகப் பயன்படுத்தப்படாவிட்டால் Closures சக்திவாய்ந்த கருவியாகவும் நினைவக கசிவுகளின் சாத்தியமான ஆதாரமாகவும் இருக்கலாம். எனவே, உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டில் உள்ள கருத்தைப் புரிந்துகொள்வதும் அதை விவேகத்துடன் பயன்படுத்துவதும் முக்கியம். + +--- diff --git a/ta/functions/getters-setters.md b/ta/functions/getters-setters.md new file mode 100644 index 00000000..1bda6a9a --- /dev/null +++ b/ta/functions/getters-setters.md @@ -0,0 +1,105 @@ +--- +chapter: 8 +description: ஜாவாஸ்கிரிப்டில் Getters மற்றும் Setters ஐப் புரிந்துகொள்வது. +--- + +## ஜாவாஸ்கிரிப்டில் Getters மற்றும் Setters ஐப் புரிந்துகொள்வது + +ஜாவாஸ்கிரிப்டில் உள்ள Getters மற்றும் setters என்பவை ஒரு பொருளின் பண்புகளை அணுகுவதற்கும் புதுப்பிப்பதற்கும் ஒரு வழியை வழங்கும் சிறப்பு முறைகளாகும். ஒரு பண்பு எவ்வாறு அணுகப்படுகிறது மற்றும் மாற்றியமைக்கப்படுகிறது என்பதைக் கட்டுப்படுத்த அவை உங்களை அனுமதிக்கின்றன, மேலும் ஒரு சுருக்க மற்றும் உறைபொதியாக்க (encapsulation) அடுக்கைச் சேர்க்கின்றன. + +### Getters மற்றும் Setters என்றால் என்ன? + +- **Getters**: ஒரு குறிப்பிட்ட பண்பின் மதிப்பை பெறும் முறைகள். +- **Setters**: ஒரு குறிப்பிட்ட பண்பின் மதிப்பை அமைக்கும் முறைகள். + +### Getters மற்றும் Setters ஐ வரையறுத்தல் + +ஒரு object literal அல்லது ஒரு class க்குள் `get` மற்றும் `set` முக்கிய சொற்களைப் பயன்படுத்தி getters மற்றும் setters ஐ நீங்கள் வரையறுக்கலாம். + +### Object Literals உடன் எடுத்துக்காட்டு + +ஒரு object literal இல் getters மற்றும் setters ஐ வரையறுப்பதற்கான எடுத்துக்காட்டு இங்கே: + +```javascript +let person = { + firstName: "John", + lastName: "Doe", + get fullName() { + return `${this.firstName} ${this.lastName}`; + }, + set fullName(name) { + [this.firstName, this.lastName] = name.split(" "); + } +}; + +console.log(person.fullName); // Output: John Doe +person.fullName = "Jane Smith"; +console.log(person.firstName); // Output: Jane +console.log(person.lastName); // Output: Smith +``` + +### Classes உடன் எடுத்துக்காட்டு + +ஒரு class இல் getters மற்றும் setters ஐ வரையறுப்பதற்கான எடுத்துக்காட்டு இங்கே: + +```javascript +class Person { + constructor(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; + } + + get fullName() { + return `${this.firstName} ${this.lastName}`; + } + + set fullName(name) { + [this.firstName, this.lastName] = name.split(" "); + } +} + +let person = new Person("John", "Doe"); +console.log(person.fullName); // Output: John Doe +person.fullName = "Jane Smith"; +console.log(person.firstName); // Output: Jane +console.log(person.lastName); // Output: Smith +``` + +### Getters மற்றும் Setters ஐப் பயன்படுத்துவதன் நன்மைகள் + +1. **உறைபொதியாக்கம் (Encapsulation)**: பண்புகள் எவ்வாறு அணுகப்படுகின்றன மற்றும் மாற்றியமைக்கப்படுகின்றன என்பதைக் கட்டுப்படுத்தவும். +2. **சரிபார்ப்பு (Validation)**: ஒரு பண்பை அமைக்கும்போது சரிபார்ப்பு தர்க்கத்தைச் சேர்க்கவும். +3. **கணக்கிடப்பட்ட பண்புகள் (Computed Properties)**: பிற பண்புகளின் அடிப்படையில் கணக்கிடப்படும் பண்புகளை உருவாக்கவும். + +### சரிபார்ப்பிற்கான எடுத்துக்காட்டு + +ஒரு setter இல் சரிபார்ப்பு தர்க்கத்தைச் சேர்ப்பதற்கான எடுத்துக்காட்டு இங்கே: + +```javascript +class User { + constructor(username) { + this._username = username; + } + + get username() { + return this._username; + } + + set username(name) { + if (name.length < 3) { + console.error("Username குறைந்தது 3 எழுத்துகள் நீளமாக இருக்க வேண்டும்."); + } else { + this._username = name; + } + } +} + +let user = new User("jsmith"); +console.log(user.username); // Output: jsmith +user.username = "jo"; // Output: Username குறைந்தது 3 எழுத்துகள் நீளமாக இருக்க வேண்டும். +console.log(user.username); // Output: jsmith +``` + +### முடிவுரை + +ஜாவாஸ்கிரிப்டில் பொருள் பண்புகளை நிர்வகிக்க Getters மற்றும் setters ஒரு சக்திவாய்ந்த வழியை வழங்குகின்றன. அவற்றைப் பயன்படுத்துவதன் மூலம், நீங்கள் சரிபார்ப்பு, உறைபொதியாக்கம் மற்றும் கணக்கிடப்பட்ட பண்புகளைச் சேர்க்கலாம், இது உங்கள் குறியீட்டை மேலும் வலுவானதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது. diff --git a/ta/functions/higher-order.md b/ta/functions/higher-order.md new file mode 100644 index 00000000..2e968b44 --- /dev/null +++ b/ta/functions/higher-order.md @@ -0,0 +1,87 @@ +--- +chapter: 8 +pageNumber: 69 +description: Higher order functions என்பவை பிற செயல்பாடுகளை கையாளும் செயல்பாடுகளாகும். இது செயல்பாட்டு கலவை (functional composition), சுருக்கம் (abstraction) மற்றும் பல்துறை மற்றும் எளிதில் மீண்டும் பயன்படுத்தக்கூடிய குறியீட்டை உருவாக்கும் திறனை செயல்படுத்துவதால் இது கணிசமான சக்தியைக் கொண்டுள்ளது. +--- +# Higher order + +Higher order functions என்பவை பிற செயல்பாடுகளை கையாளும் செயல்பாடுகளாகும். எடுத்துக்காட்டாக, ஒரு செயல்பாடு பிற செயல்பாடுகளை வாதங்களாக எடுத்துக் கொள்ளலாம் மற்றும்/அல்லது அதன் திரும்பப் பெறும் மதிப்பாக ஒரு செயல்பாட்டை உருவாக்கலாம். இத்தகைய _ஆடம்பரமான_ செயல்பாட்டு நுட்பங்கள் ஜாவாஸ்கிரிப்ட் மற்றும் [python](https://www.python.org/), [lisp](https://common-lisp.net/) போன்ற பிற உயர்மட்ட மொழிகளில் உங்களுக்கு கிடைக்கும் சக்திவாய்ந்த கட்டமைப்புகளாகும். + +இப்போது நாம் `add_2` மற்றும் `double` என்ற இரண்டு எளிய செயல்பாடுகளையும், `map` எனப்படும் higher order function ஒன்றையும் உருவாக்குவோம். `map` ஆனது `func` மற்றும் `list` என்ற இரண்டு வாதங்களை ஏற்றுக்கொள்ளும் (எனவே அதன் அறிவிப்பு `map(func,list)` எனத் தொடங்கும்), மற்றும் ஒரு வரிசையை (array) திரும்பப் பெறும். `func` (முதல் வாதம்) என்பது `list` (இரண்டாவது வாதம்) வரிசையில் உள்ள ஒவ்வொரு உறுப்புக்கும் பயன்படுத்தப்படும் ஒரு செயல்பாடாக இருக்கும். + +```javascript +// இரண்டு எளிய செயல்பாடுகளை வரையறுக்கவும் +let add_2 = function (x) { + return x + 2; +}; +let double = function (x) { + return 2 * x; +}; + +// map என்பது 2 வாதங்களை ஏற்கும் ஒரு அருமையான செயல்பாடு: +// func அழைக்க வேண்டிய செயல்பாடு +// list func ஐ அழைக்க வேண்டிய மதிப்புகளின் வரிசை +let map = function (func, list) { + let output = []; // வெளியீட்டு பட்டியல் + for (idx in list) { + output.push(func(list[idx])); + } + return output; +}; + +// ஒரு முழு உள்ளீட்டு பட்டியலுக்கும் ஒரு செயல்பாட்டைப் பயன்படுத்த map ஐப் பயன்படுத்துகிறோம் +// அவற்றை தொடர்புடைய வெளியீடுகளின் பட்டியலுக்கு "வரைபடமாக்க" +map(add_2, [5, 6, 7]); // => [7, 8, 9] +map(double, [5, 6, 7]); // => [10, 12, 14] +``` + +மேலே உள்ள எடுத்துக்காட்டில் உள்ள செயல்பாடுகள் எளிமையானவை. இருப்பினும், பிற செயல்பாடுகளுக்கு வாதங்களாக அனுப்பப்படும்போது, ​​அவை மிகவும் சிக்கலான செயல்பாடுகளை உருவாக்க எதிர்பாராத வழிகளில் தொகுக்கப்படலாம். + +எடுத்துக்காட்டாக, எங்கள் குறியீட்டில் `map(add_2, ...)` மற்றும் `map(double, ...)` ஆகிய அழைப்புகளை நாம் அடிக்கடி பயன்படுத்துவதை கவனித்தால், விரும்பிய செயல்பாட்டை தங்களுக்குள்ளேயே கொண்டுள்ள இரண்டு சிறப்பு நோக்கத்திற்கான பட்டியல் செயலாக்க செயல்பாடுகளை உருவாக்க நாம் முடிவு செய்யலாம். செயல்பாட்டு கலவையைப் (function composition) பயன்படுத்தி, நாம் இதை பின்வருமாறு செய்யலாம்: + +```javascript +process_add_2 = function (list) { + return map(add_2, list); +}; +process_double = function (list) { + return map(double, list); +}; +process_add_2([5, 6, 7]); // => [7, 8, 9] +process_double([5, 6, 7]); // => [10, 12, 14] +``` + +இப்போது உள்ளீடாக `func` என்ற செயல்பாட்டை எடுத்து ஒரு `func`-processor ஐ திரும்பப் பெறும் `buildProcessor` எனப்படும் ஒரு செயல்பாட்டை உருவாக்குவோம், அதாவது, பட்டியலில் உள்ள ஒவ்வொரு உள்ளீட்டிற்கும் `func` ஐப் பயன்படுத்தும் ஒரு செயல்பாடு. + +```javascript +// ஒரு பட்டியல் செயலியை உருவாக்கும் ஒரு செயல்பாடு +let buildProcessor = function (func) { + let process_func = function (list) { + return map(func, list); + }; + return process_func; +}; +// buildProcessor ஐ அழைப்பது ஒரு செயல்பாட்டைத் திரும்பப் பெறுகிறது, அது ஒரு பட்டியல் உள்ளீட்டுடன் அழைக்கப்படுகிறது + +// buildProcessor ஐப் பயன்படுத்தி நாம் add_2 மற்றும் double பட்டியல் செயலிகளை பின்வருமாறு உருவாக்கலாம்: +process_add_2 = buildProcessor(add_2); +process_double = buildProcessor(double); + +process_add_2([5, 6, 7]); // => [7, 8, 9] +process_double([5, 6, 7]); // => [10, 12, 14] +``` + +மற்றொரு உதாரணத்தைப் பார்ப்போம். உள்ளீடாக ஒரு எண் `x` ஐ எடுத்து அதன் வாதத்தை `x` ஆல் பெருக்கும் ஒரு செயல்பாட்டைத் திரும்பப் பெறும் `buildMultiplier` எனப்படும் ஒரு செயல்பாட்டை உருவாக்குவோம்: + +```javascript +let buildMultiplier = function (x) { + return function (y) { + return x * y; + }; +}; + +let double = buildMultiplier(2); +let triple = buildMultiplier(3); + +double(3); // => 6 +triple(3); // => 9 +``` diff --git a/ta/functions/hoisting.md b/ta/functions/hoisting.md new file mode 100644 index 00000000..12e45c24 --- /dev/null +++ b/ta/functions/hoisting.md @@ -0,0 +1,64 @@ +--- +chapter: 8 +description: ஜாவாஸ்கிரிப்டில் செயல்பாடுகளுக்கான Hoisting ஐப் புரிந்துகொள்வது. +--- + +## ஜாவாஸ்கிரிப்டில் செயல்பாடுகளுக்கான Hoisting ஐப் புரிந்துகொள்வது + +Hoisting என்பது ஒரு ஜாவாஸ்கிரிப்ட் பொறிமுறையாகும், இதில் தொகுப்பு கட்டத்தின் (compile phase) போது மாறிகள் மற்றும் செயல்பாட்டு அறிவிப்புகள் (function declarations) அவற்றின் உள்ளடக்க நோக்கத்தின் (scope) உச்சிக்கு நகர்த்தப்படுகின்றன. குறியீட்டில் அறிவிக்கப்படுவதற்கு முன்பே செயல்பாடுகள் மற்றும் மாறிகளை நீங்கள் பயன்படுத்தலாம் என்பதே இதன் பொருள். + +### செயல்பாட்டு Hoisting (Function Hoisting) + +ஜாவாஸ்கிரிப்டில், செயல்பாட்டு அறிவிப்புகள் அவற்றின் உள்ளடக்க நோக்கத்தின் உச்சிக்கு உயர்த்தப்படுகின்றன. ஒரு செயல்பாடு குறியீட்டில் வரையறுக்கப்படுவதற்கு முன்பு அதை அழைக்க இது உங்களை அனுமதிக்கிறது. + +### செயல்பாட்டு Hoisting க்கான எடுத்துக்காட்டு + +செயல்பாட்டு hoisting ஐ விளக்குவதற்கான எடுத்துக்காட்டு இங்கே: + +```javascript +console.log(greet()); // Output: Hello, World! + +function greet() { + return "Hello, World!"; +} +``` + +இந்த எடுத்துக்காட்டில், `greet` செயல்பாடு வரையறுக்கப்படுவதற்கு முன்பே அழைக்கப்படுகிறது, ஆனால் செயல்பாட்டு அறிவிப்பு நோக்கத்தின் உச்சிக்கு உயர்த்தப்படுவதால் இது செயல்படுகிறது. + +### செயல்பாட்டு வெளிப்பாடுகள் (Function Expressions) மற்றும் Hoisting + +செயல்பாட்டு அறிவிப்புகளைப் போலன்றி, செயல்பாட்டு வெளிப்பாடுகள் உயர்த்தப்படுவதில்லை. இதன் பொருள் ஒரு செயல்பாட்டு வெளிப்பாடு வரையறுக்கப்படுவதற்கு முன்பு அதை நீங்கள் அழைக்க முடியாது. + +### செயல்பாட்டு வெளிப்பாட்டிற்கான எடுத்துக்காட்டு + +வித்தியாசத்தை விளக்குவதற்கான எடுத்துக்காட்டு இங்கே: + +```javascript +console.log(greet()); // Output: TypeError: greet is not a function + +var greet = function() { + return "Hello, World!"; +}; +``` + +இந்த எடுத்துக்காட்டில், `greet` செயல்பாடு ஒரு செயல்பாட்டு வெளிப்பாடாக வரையறுக்கப்பட்டுள்ளது, மேலும் வரையறைக்கு முன் அதை அழைப்பது பிழையை ஏற்படுத்துகிறது, ஏனெனில் `greet` மாறி உயர்த்தப்படுகிறது, ஆனால் அதன் ஒதுக்கீடு உயர்த்தப்படவில்லை. + +### `let` மற்றும் `const` உடன் Hoisting + +`let` மற்றும் `const` உடன் அறிவிக்கப்பட்ட மாறிகளும் உயர்த்தப்படுகின்றன, ஆனால் அவை தொடங்கப்படுவதில்லை (initialized). அதாவது, அவற்றின் அறிவிப்புக்கு முன் அவற்றை அணுகுவது `ReferenceError` ஐ ஏற்படுத்துகிறது. + +### `let` மற்றும் `const` உடன் எடுத்துக்காட்டு + +```javascript +console.log(greet); // Output: ReferenceError: Cannot access 'greet' before initialization + +let greet = function() { + return "Hello, World!"; +}; +``` + +இந்த எடுத்துக்காட்டில், `greet` மாறி உயர்த்தப்படுகிறது, ஆனால் இது தொடங்கப்படவில்லை, இதன் அறிவிப்புக்கு முன் அணுகப்படும்போது `ReferenceError` ஏற்படுகிறது. + +### முடிவுரை + +கணிக்கக்கூடிய மற்றும் பிழையற்ற ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுதுவதற்கு hoisting ஐப் புரிந்துகொள்வது முக்கியமானது. செயல்பாட்டு அறிவிப்புகள் உயர்த்தப்படுகின்றன, அவை வரையறுக்கப்படுவதற்கு முன்பே அவற்றை அழைக்க அனுமதிக்கிறது, அதே சமயம் செயல்பாட்டு வெளிப்பாடுகள் உயர்த்தப்படுவதில்லை, அவை வரையறைக்கு முன் அழைக்கப்பட்டால் சாத்தியமான பிழைகளுக்கு வழிவகுக்கும். `let` மற்றும் `const` உடன் அறிவிக்கப்பட்ட மாறிகள் உயர்த்தப்படுகின்றன, ஆனால் தொடங்கப்படவில்லை, அவற்றின் அறிவிப்புக்கு முன் அணுகப்பட்டால் `ReferenceError` ஏற்படுகிறது. diff --git a/ta/functions/recursive-functions.md b/ta/functions/recursive-functions.md new file mode 100644 index 00000000..4e7117dc --- /dev/null +++ b/ta/functions/recursive-functions.md @@ -0,0 +1,58 @@ +--- +chapter: 8 +description: ஜாவாஸ்கிரிப்டில் Recursive செயல்பாடுகளின் விளக்கம். +--- + +# Recursive செயல்பாடுகள் + +ஜாவாஸ்கிரிப்டில், ஒரு recursive செயல்பாடு என்பது ஒரு சிக்கலைத் தீர்ப்பதற்காக தன்னைத்தானே அழைக்கும் ஒரு செயல்பாடாகும். Recursion என்பது ஒரு சக்திவாய்ந்த கருத்தாகும், இது சிக்கலான சிக்கல்களைச் சிறிய, மேலும் நிர்வகிக்கக்கூடிய துணைச் சிக்கல்களாக (subproblems) பிரிப்பதன் மூலம் தீர்க்கப் பயன்படும். இந்த ஆவணம் ஜாவாஸ்கிரிப்டில் உள்ள recursive செயல்பாடுகள், அவற்றின் தொடரியல், பொதுவான பயன்பாட்டு வழக்குகள் மற்றும் சிறந்த நடைமுறைகள் பற்றிய கண்ணோட்டத்தை வழங்குகிறது. + +## தொடரியல் + +ஒரு recursive செயல்பாடு பொதுவாக பின்வரும் அமைப்பைக் கொண்டுள்ளது: + +```javascript +function recursiveFunction(params) { + // Base case: எளிமையான காட்சி + if (/* base case நிபந்தனை */) { + // ஒரு மதிப்பைத் திரும்பப் பெறு அல்லது ஒரு செயலைச் செய் + } else { + // Recursive case: மாற்றியமைக்கப்பட்ட அளவுருக்களுடன் செயல்பாட்டை அழைக்கவும் + return recursiveFunction(modifiedParams); + } +} +``` +பொதுவான பயன்பாட்டு வழக்குகள் +Recursive செயல்பாடுகள் பெரும்பாலும் சிறிய, ஒத்த துணைச் சிக்கல்களாகப் பிரிக்கக்கூடிய சிக்கல்களைத் தீர்க்கப் பயன்படுத்தப்படுகின்றன. சில பொதுவான பயன்பாட்டு வழக்குகள் இங்கே: + +**காரணியங்களைக் (Factorials) கணக்கிடுதல்**: + +ஒரு எண்ணின் காரணியத்தைக் கணக்கிட ஒரு recursive செயல்பாட்டைப் பயன்படுத்தலாம். + +```javascript +function factorial(n) { + if (n === 0) { + return 1; // Base case + } else { + return n * factorial(n - 1); // Recursive case + } +} + +factorial(5); // 120 ஐ திரும்பப் பெறுகிறது +``` +**Fibonacci வரிசை**: +Recursion ஐப் பயன்படுத்தி Fibonacci வரிசையைக் கணக்கிடலாம். + +```javascript +function fibonacci(n) { + if (n <= 1) { + return n; // Base cases: F(0) = 0, F(1) = 1 + } else { + return fibonacci(n - 1) + fibonacci(n - 2); // Recursive case + } +} + +fibonacci(5); // 5 ஐ திரும்பப் பெறுகிறது +``` + +மீண்டும் மீண்டும் செய்யக்கூடிய துணைப் பணிகளை உள்ளடக்கிய சிக்கல்களைத் தீர்க்க ஜாவாஸ்கிரிப்டில் Recursive செயல்பாடுகள் ஒரு மதிப்புமிக்க கருவியாகும். சரியாகப் பயன்படுத்தும்போது, ​​அவை நேர்த்தியான மற்றும் திறமையான தீர்வுகளுக்கு வழிவகுக்கும். \ No newline at end of file diff --git a/ta/functions/rest-operator.md b/ta/functions/rest-operator.md new file mode 100644 index 00000000..4f42ec5a --- /dev/null +++ b/ta/functions/rest-operator.md @@ -0,0 +1,75 @@ +--- +chapter: 8 +description: ஜாவாஸ்கிரிப்டில் செயல்பாடுகளுக்கான Rest Operator ஐப் புரிந்துகொள்வது. +--- + +## ஜாவாஸ்கிரிப்டில் செயல்பாடுகளுக்கான Rest Operator ஐப் புரிந்துகொள்வது + +ஜாவாஸ்கிரிப்டில் உள்ள rest operator (`...`) வரம்பற்ற எண்ணிக்கையிலான வாதங்களை (arguments) ஒரு வரிசையாக (array) குறிப்பிட உங்களை அனுமதிக்கிறது. செயல்பாட்டு வரையறைகளில் (function definitions) பல அளவுருக்களை (parameters) வெளிப்படையாகக் குறிப்பிடாமல் கையாள இது மிகவும் பயனுள்ளதாக இருக்கும். + +### தொடரியல் + +ஒரு செயல்பாட்டு வரையறையில் அளவுரு பெயருக்கு முன் மூன்று புள்ளிகளை (`...`) சேர்ப்பதன் மூலம் rest operator பயன்படுத்தப்படுகிறது. + +### Rest Operator ஐப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு + +ஒரு செயல்பாட்டில் rest operator ஐப் பயன்படுத்துவதற்கான அடிப்படை எடுத்துக்காட்டு இங்கே: + +```javascript +function sum(...numbers) { + return numbers.reduce((acc, curr) => acc + curr, 0); +} + +console.log(sum(1, 2, 3)); // Output: 6 +console.log(sum(4, 5, 6, 7)); // Output: 22 +``` + +இந்த எடுத்துக்காட்டில், `sum` செயல்பாடு எத்தனை வாதங்களை வேண்டுமானாலும் ஏற்கலாம், பின்னர் அவை `numbers` எனப்படும் வரிசையாக இணைக்கப்படும். + +### Rest Operator ஐ பிற அளவுருக்களுடன் இணைத்தல் + +நீங்கள் மற்ற அளவுருக்களுடன் இணைந்து rest operator ஐப் பயன்படுத்தலாம், ஆனால் செயல்பாட்டு வரையறையில் அதுவே கடைசி அளவுருவாக இருக்க வேண்டும். + +```javascript +function greet(greeting, ...names) { + return `${greeting}, ${names.join(" மற்றும் ")}!`; +} + +console.log(greet("Hello", "Alice", "Bob")); // Output: Hello, Alice மற்றும் Bob! +console.log(greet("Hi", "Charlie", "Dave", "Eve")); // Output: Hi, Charlie மற்றும் Dave மற்றும் Eve! +``` + +இந்த எடுத்துக்காட்டில், `greet` செயல்பாடு ஒரு நிலையான `greeting` அளவுருவையும் மாறி எண்ணிக்கையிலான `names` ஐயும் எடுத்துக்கொள்கிறது. + +### Arrow செயல்பாடுகளில் Rest Operator + +Arrow செயல்பாடுகளிலும் Rest operator ஐப் பயன்படுத்தலாம்: + +```javascript +const multiply = (...numbers) => numbers.reduce((acc, curr) => acc * curr, 1); + +console.log(multiply(2, 3)); // Output: 6 +console.log(multiply(4, 5, 6)); // Output: 120 +``` + +### நடைமுறை பயன்பாட்டு வழக்குகள் + +1. **மாறி வாதங்களைக் கையாளுதல்**: கணித செயல்பாடுகள் அல்லது சரம் கையாளுதல்கள் போன்ற மாறி எண்ணிக்கையிலான வாதங்களைக் கையாள வேண்டிய செயல்பாடுகள். +2. **வரிசைகளை இணைத்தல்**: பல வரிசைகளை ஒன்றாக இணைக்க வேண்டிய செயல்பாடுகள். +3. **நிகழ்வு கையாளுபவர்கள் (Event Handlers)**: பல்வேறு எண்ணிக்கையிலான வாதங்களுடன் நிகழ்வுகளைக் கையாளும் செயல்பாடுகள். + +### வரிசைகளை இணைப்பதற்கான எடுத்துக்காட்டு + +வரிசைகளை இணைக்க rest operator ஐப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு இங்கே: + +```javascript +function combineArrays(...arrays) { + return arrays.flat(); +} + +console.log(combineArrays([1, 2], [3, 4], [5, 6])); // Output: [1, 2, 3, 4, 5, 6] +``` + +### முடிவுரை + +Rest operator என்பது ஜாவாஸ்கிரிப்டில் உள்ள ஒரு சக்திவாய்ந்த அம்சமாகும், இது செயல்பாடுகள் வரம்பற்ற எண்ணிக்கையிலான வாதங்களை திறமையாக கையாள அனுமதிக்கிறது. rest operator ஐப் பயன்படுத்துவதன் மூலம், பல்வேறு உள்ளீட்டு காட்சிகளுக்கு ஏற்ப மிகவும் நெகிழ்வான மற்றும் சுருக்கமான செயல்பாடுகளை நீங்கள் எழுதலாம். diff --git a/ta/functions/set-interval.md b/ta/functions/set-interval.md new file mode 100644 index 00000000..a39ac7c5 --- /dev/null +++ b/ta/functions/set-interval.md @@ -0,0 +1,58 @@ +--- +chapter: 8 +pageNumber: 55 +Title: Set Interval +--- + + +# Set Interval + +ஒரு செயல்பாட்டை (function) அழைப்பதற்கும், செயல்பாடு மீண்டும் இயங்குவதற்கு முன் மில்லி விநாடிகளில் தாமத நேரத்தைச் சேர்ப்பதற்கும் `setInterval` முறை பயன்படுத்தப்படுகிறது. எடுத்துக்காட்டாக, நீங்கள் சீரற்ற நிறத்தை (random color) உருவாக்கும் ஒரு செயல்பாட்டை உருவாக்குகிறீர்கள் என்றால், செயல்பாடு மீண்டும் இயங்கி மற்றொரு நிறத்தை உருவாக்குவதற்கு முன்பு கணினி எவ்வளவு நேரம் காத்திருக்க வேண்டும் என்பதைக் கூற `setInterval()` ஐப் பயன்படுத்தலாம். செயல்பாடுகளை மீண்டும் செய்ய இது பயனுள்ளதாக இருக்கும். + +முறையின் முதல் அளவுரு நீங்கள் இடைவெளியை அமைக்கும் செயல்பாட்டின் பெயர். இரண்டாவது அளவுரு இடைவெளியின் கால அளவைக் குறிப்பிடுகிறது. நீங்கள் செயல்பாட்டிற்கு வாதங்களை (arguments) அனுப்ப விரும்பினால் கூடுதல் அளவுருக்களையும் சேர்க்கலாம். + +மற்றொரு எளிய எடுத்துக்காட்டாக, `repeatSaying` என்ற ஒரு செயல்பாட்டை உருவாக்குவோம், அது ஒவ்வொரு 2 வினாடிகளுக்கும் [console](https://javascript.sumankunwar.com.np/en/exercises/console.html) இல் "மீண்டும்!" என்று கூறுகிறது. + +```js +function repeatSaying() { +console.log("மீண்டும்"); +} +//அழைக்கப்படும்போது, இது console இல் உருவாக்குகிறது: "மீண்டும்!" + +setInterval(repeatSaying, 2000); +//ஒவ்வொரு 2 வினாடிகளுக்கும் செயல்பாட்டை அழைக்கிறது + + +``` +நீங்கள் set interval ஐப் பயன்படுத்தும்போது ஒரு செயல்பாட்டின் அளவுருக்களையும் சேர்க்கலாம். முந்தைய எடுத்துக்காட்டைத் தொடர்ந்து, அது மீண்டும் மீண்டும் வருவதைக் காட்ட console அறிக்கையில் ஒரு ellipsis (...) ஐச் சேர்ப்போம். முதலில் நாம் `el` என்று அழைக்கப்படும் ஒரு அளவுருவைச் சேர்ப்போம், இது ellipse க்கான சுருக்கமாகும். அடுத்து, அளவுருவின் மதிப்பு பின்னர் வருகிறது என்பதைக் காட்ட ஒரு `+` ஐத் தொடர்ந்து `el` அளவுருவை அழைப்போம். இறுதியாக set interval இல் ஒரு காற்புள்ளியைப் `,` தொடர்ந்து ellipse அளவுருவின் மதிப்பிற்கான ஒரு சரத்தைச் சேர்ப்போம், நாங்கள் `"..."` என்று வைப்போம். + +```js +function repeatSaying(el) { +console.log("மீண்டும்!" + el); +} + +setInterval(repeatSaying, 2000, "..."); +//இது இயங்கும்போது, இது "மீண்டும்!..." என்ற சொற்றொடரைத் திரும்பச் சொல்லும் +``` + +இந்த எடுத்துக்காட்டில் இருந்து நீங்கள் பார்க்க முடியும் என, செயல்பாட்டிற்கும் செயல்பாட்டிற்கான இடைவெளிக்கும் பிறகு, set interval க்குள் செயல்பாட்டு அளவுருக்களின் மதிப்புகளை நீங்கள் அமைக்கலாம். + + + + +## Clear Interval + +ஒரு குறிப்பிட்ட மாறி பெயருடன் அமைக்கப்பட்ட இடைவெளியை (interval) அகற்ற `clearInterval()` முறையைப் பயன்படுத்தலாம். முந்தையதை அடிப்படையாகக் கொண்ட ஒரு எடுத்துக்காட்டாக, set interval ஐ `intervalTime` என்ற மாறியில் சேமிப்போம், இருப்பினும், எங்கள் மாறிக்குப் பிறகு `clearInterval(intervalTime).` என்று எழுதுவதன் மூலம் அதை clear interval க்குள் அழைப்போம். + +```js +function repeatSaying(el) { +console.log("மீண்டும்!" + el); +} + +var interval = setInterval(repeatSaying, 2000, "..."); + +clearInterval(interval); +//clear Interval முறை setInterval ஐ நிறுத்துகிறது +``` + +இந்த குறியீடு இயங்கும்போது, எந்த வெளியீடும் இல்லை என்பதை நீங்கள் காண்பீர்கள். ஏனென்றால் `repeatSaying` செயல்பாட்டை அழைப்பது `setInterval` மட்டுமே, ஆனால் அது `clearInterval` ஆல் அகற்றப்பட்டதால் அது இனி அழைக்கப்படாது. `repeatSaying()` ஐப் பயன்படுத்தி தனித்தனியாக அழைக்கப்பட்டாலும் அது ஒருமுறை மட்டுமே இயங்கும், ஏனெனில் clear Interval அதைத் திரும்பத் திரும்பச் செய்வதைத் தடுக்கிறது. diff --git a/ta/functions/set-timeout.md b/ta/functions/set-timeout.md new file mode 100644 index 00000000..e0b34c65 --- /dev/null +++ b/ta/functions/set-timeout.md @@ -0,0 +1,38 @@ +--- +chapter: 8 +pageNumber: 56 +Title: Set Timeout +--- + +# Set Timeout +ஒரு செயல்பாடு (function) இயங்குவதற்கு முன்பு தாமதத்தை (மில்லி விநாடிகளில்) சேர்க்க `setTimeout` global முறை பயன்படுத்தப்படுகிறது. + +உதாரணமாக, இந்த எடுத்துக்காட்டில் "தயார்..." என்று console இல் எழுதப்பட்ட பிறகு, `start()` செயல்பாடு இயங்குவதற்கு முன்பு 3 வினாடிகள் காத்திருக்க வேண்டும். + +```js +console.log("தயார்..."); + +function start() { +console.log("போ!!"); +} + +setTimeout(start, 3000); + +//Output: "தயார்..." பின்னர் 3 வினாடிகளுக்குப் பிறகு, "போ!!" +``` + +# Clear Timeout +மாறிகளில் சேமிக்கப்பட்டுள்ள எந்த `setTimeout()` முறைகளையும் அகற்ற `clearTimeout` global முறை பயன்படுத்தப்படுகிறது. உதாரணமாக, `setTimeout()` ஐ ஒரு மாறியில் சேமிப்பதன் மூலம் நமது கடைசி எடுத்துக்காட்டை மாற்றுவோம். + +```js +console.log("தயார்..."); + +function start() { +console.log("போ!!"); +} + +let timeBeforeStart = setTimeout(start, 3000); + +clearTimeout(timeBeforeStart); +// செயல்பாடு முழுமையாக இயங்குவதை நிறுத்துகிறது +``` \ No newline at end of file diff --git a/ta/functions/this-keyword.md b/ta/functions/this-keyword.md new file mode 100644 index 00000000..7c630f06 --- /dev/null +++ b/ta/functions/this-keyword.md @@ -0,0 +1,124 @@ +--- +chapter: 8 +description: ஜாவாஸ்கிரிப்டில் `this` முக்கிய சொல்லைப் புரிந்துகொள்வது. +--- + +## ஜாவாஸ்கிரிப்டில் `this` முக்கிய சொல்லைப் புரிந்துகொள்வது + +ஜாவாஸ்கிரிப்டில் `this` முக்கிய சொல் அது சார்ந்திருக்கும் பொருளைக் குறிக்கிறது. அது எங்கு பயன்படுத்தப்படுகிறது என்பதைப் பொறுத்து இது வெவ்வேறு மதிப்புகளைக் கொண்டுள்ளது: ஒரு முறையில், தனியாக, ஒரு செயல்பாட்டில், ஒரு நிகழ்வில், முதலியன. + +### Global சூழலில் `this` + +Global execution சூழலில் (எந்த செயல்பாட்டிற்கும் வெளியே), `this` global பொருளைக் குறிக்கிறது, இது உலாவிகளில் `window` ஆகும். + +```javascript +console.log(this); // Output: Window {...} +``` + +### பொருள் முறைகளில் `this` + +ஒரு பொருள் முறையில் (object method) பயன்படுத்தப்படும்போது, `this` முறை சார்ந்திருக்கும் பொருளைக் குறிக்கிறது. + +```javascript +const person = { + firstName: "John", + lastName: "Doe", + fullName: function() { + return `${this.firstName} ${this.lastName}`; + } +}; + +console.log(person.fullName()); // Output: John Doe +``` + +### Constructor செயல்பாடுகளில் `this` + +ஒரு constructor செயல்பாட்டில், `this` புதிதாக உருவாக்கப்பட்ட instance ஐ குறிக்கிறது. + +```javascript +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +const person1 = new Person("Jane", "Smith"); +console.log(person1.firstName); // Output: Jane +``` + +### Arrow செயல்பாடுகளில் `this` + +Arrow செயல்பாடுகளுக்கு அவற்றின் சொந்த `this` இல்லை. மாறாக, `this` என்பது arrow செயல்பாடு வரையறுக்கப்பட்டுள்ள வெளிப்புற செயல்பாட்டிலிருந்து சொற்பொருள் ரீதியாகப் பெறப்படுகிறது. + +```javascript +const person = { + firstName: "John", + lastName: "Doe", + fullName: function() { + const getFullName = () => `${this.firstName} ${this.lastName}`; + return getFullName(); + } +}; + +console.log(person.fullName()); // Output: John Doe +``` + +### நிகழ்வு கையாளுபவர்களில் (Event Handlers) `this` + +நிகழ்வு கையாளுபவர்களில், `this` நிகழ்வைப் பெற்ற உறுப்பைக் குறிக்கிறது. + +```html + + +``` + +### `call`, `apply`, மற்றும் `bind` உடன் `this` ஐ மாற்றுதல் + +`call`, `apply`, மற்றும் `bind` ஐப் பயன்படுத்தி நீங்கள் வெளிப்படையாக `this` இன் மதிப்பை அமைக்கலாம். + +#### `call` முறை + +`call` முறையானது வழங்கப்பட்ட `this` மதிப்பு மற்றும் தனித்தனியாக வழங்கப்பட்ட வாதங்களுடன் ஒரு செயல்பாட்டை அழைக்கிறது. + +```javascript +function greet() { + console.log(`Hello, ${this.name}`); +} + +const person = { name: "Alice" }; +greet.call(person); // Output: Hello, Alice +``` + +#### `apply` முறை + +`apply` முறையானது வழங்கப்பட்ட `this` மதிப்பு மற்றும் ஒரு வரிசையாக வழங்கப்பட்ட வாதங்களுடன் ஒரு செயல்பாட்டை அழைக்கிறது. + +```javascript +function greet(greeting) { + console.log(`${greeting}, ${this.name}`); +} + +const person = { name: "Bob" }; +greet.apply(person, ["Hi"]); // Output: Hi, Bob +``` + +#### `bind` முறை + +`bind` முறை ஒரு புதிய செயல்பாட்டை உருவாக்குகிறது, அது அழைக்கப்படும்போது அதன் `this` முக்கிய சொல் வழங்கப்பட்ட மதிப்பிற்கு அமைக்கப்படும். + +```javascript +function greet() { + console.log(`Hello, ${this.name}`); +} + +const person = { name: "Charlie" }; +const greetPerson = greet.bind(person); +greetPerson(); // Output: Hello, Charlie +``` + +### முடிவுரை + +திறமையான ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுதுவதற்கு `this` முக்கிய சொல்லைப் புரிந்துகொள்வது முக்கியமானது. அதன் மதிப்பு அது பயன்படுத்தப்படும் சூழலைப் பொறுத்தது, மேலும் `call`, `apply`, மற்றும் `bind` ஐப் பயன்படுத்தி அதை வெளிப்படையாக அமைக்கலாம். \ No newline at end of file diff --git a/ta/interview-questions/README.md b/ta/interview-questions/README.md new file mode 100644 index 00000000..56269523 --- /dev/null +++ b/ta/interview-questions/README.md @@ -0,0 +1,15 @@ +--- +layout: editorial +chapter: 22 + +pageNumber: 157 +description: +--- +# அத்தியாயம் 22 +# நேர்காணல் கேள்விகள் (Interview questions) + +ஜாவாஸ்கிரிப்ட் பற்றிய அவர்களின் புரிதலைப் பற்றி விண்ணப்பதாரரை (candidate) சிறப்பாகத் தயார்படுத்துவதற்கான பல்வேறு கேள்விகளை இந்த அத்தியாயம் விவாதிக்கிறது. இது மூன்று பகுதிகளாகப் பிரிக்கப்பட்டுள்ளது: அடிப்படை (basic), இடைநிலை (intermediate) மற்றும் மேம்பட்ட நிலை (advance level). + +* [அடிப்படை நிலை (Basic Level)](./basic-level.md) +* [இடைநிலை (Intermediate Level)](./intermediate-level.md) +* [மேம்பட்ட நிலை (Advance Level)](./advance-level.md) \ No newline at end of file diff --git a/ta/interview-questions/advance-level.md b/ta/interview-questions/advance-level.md new file mode 100644 index 00000000..7df164fd --- /dev/null +++ b/ta/interview-questions/advance-level.md @@ -0,0 +1,559 @@ +--- +layout: editorial +title: Advanced JavaScript Interview Questions +description: சாத்தியமான வேட்பாளர்களின் அறிவு மற்றும் நிபுணத்துவத்தின் ஆழத்தை மதிப்பிடுவதற்கு ஜாவாஸ்கிரிப்ட் பற்றிய சிக்கலான மேம்பட்ட நிலை நேர்காணல் கேள்விகளை ஆராயுங்கள். +chapter: 22 +pageNumber: 182 +--- + +# மேம்பட்ட ஜாவாஸ்கிரிப்ட் நேர்காணல் கேள்விகள் (Advanced JavaScript Interview Questions) + +## 1. க்ளோஷர்கள் மற்றும் ஸ்கோப்பிங் (Closures and Scoping) + +### 1.1. ஜாவாஸ்கிரிப்டில் க்ளோஷர் (closure) என்றால் என்ன? க்ளோஷர்களைப் பயன்படுத்துவது பயனுள்ளதாக இருக்கும் உதாரணத்தை வழங்கவும். + +**பதில்:** ஜாவாஸ்கிரிப்டில் க்ளோஷர் என்பது வெளிப்புறச் செயல்பாடு செயல்படுத்துவதை முடித்த பின்னரும் கூட, அதன் இணைக்கும் ஸ்கோப்பின் (enclosing scope) மாறிகளுக்கான அணுகலைக் கொண்ட ஒரு செயல்பாடாகும். இந்த வழிமுறை செயல்பாடுகளை நிறைவேற்றுதல்களுக்கு இடையில் நிலையைப் பராமரிக்க அனுமதிக்கிறது. + +**எடுத்துக்காட்டு:** +க்ளோஷர்களின் பொதுவான பயன்பாடுகளில் ஒன்று தொழிற்சாலை செயல்பாடுகள் (factory functions) அல்லது தனிப்பட்ட மாறிகள் (private variables) உருவாக்குவதாகும். எடுத்துக்காட்டாக, கூறுகளுக்கு (elements) தனிப்பட்ட ID மதிப்புகளை உருவாக்க விரும்பினால்: +```javascript +function createUniqueIdGenerator() { + let id = 0; + return function() { + return id++; + }; +} + +const generateId = createUniqueIdGenerator(); + +console.log(generateId()); // 0 +console.log(generateId()); // 1 +console.log(generateId()); // 2 +``` +### 1.2. மாறிகளின் ஸ்கோப் (scope) மற்றும் வாழ்நாளுடன் (lifetime) க்ளோஷர்கள் எவ்வாறு தொடர்புடையவை? + +**பதில்:** க்ளோஷர்கள் ஒரு செயல்பாட்டை அதன் லெக்சிகல் ஸ்கோப்பில் (lexical scope) உள்ள அனைத்து மாறிகள் மற்றும் செயல்பாடுகளை அணுக அனுமதிக்கின்றன, வெளிப்புறச் செயல்பாடு (outer function) முடிந்த பிறகும். இதன் விளைவாக மாறிகள் நினைவகத்தில் (memory) பாதுகாக்கப்படுகின்றன, பொதுவாகச் செயல்படும் நிலையான உள்ளூர் மாறிகளுடன் ஒப்பிடும்போது மாறிகள் நீண்ட வாழ்நாளைக் கொண்டிருக்க அனுமதிக்கிறது. + +### 1.3. ஜாவாஸ்கிரிப்டில் க்ளோஷர்களின் பயன்பாடுகளுக்குச் சில உதாரணங்களைக் கொடுக்க முடியுமா? + +**பதில்:** க்ளோஷர்களின் சில உதாரணங்கள் இங்கே. +- தொகுதி வடிவமைப்பு முறை (Module Design Pattern). +- கரியிங் (Currying). +- மெமோயிஸ் (Memoize) + +## 2. முன்மாதிரி மரபுரிமை (Prototypal Inheritance) + +### 2.1. கிளாசிக்கல் பரம்பரை (classical inheritance) மற்றும் முன்மாதிரி மரபுரிமை (prototypal inheritance) ஆகியவற்றுக்கு இடையேயான வேறுபாட்டை விளக்குங்கள். + +**பதில்:** கிளாசிக்கல் பரம்பரை என்பது ஜாவா அல்லது சி++ போன்ற பாரம்பரிய ஆப்ஜெக்ட்-ஓரியண்டட் புரோகிராமிங் (Object-Oriented Programming) மொழிகளில் அடிக்கடி காணப்படும் ஒரு கருத்தாகும், அங்கு ஒரு வர்க்கம் பெற்றோர் வகுப்பிலிருந்து (parent class) பண்புகள் (properties) மற்றும் முறைகளைப் (methods) பெறலாம் (inherit). மறுபுறம், முன்மாதிரி மரபுரிமை, ஜாவாஸ்கிரிப்டிற்குத் தனித்துவமானது. ஜாவாஸ்கிரிப்டில், ஒவ்வொரு பொருளும் (object) மற்றொரு பொருளை அதன் முன்மாதிரியாகக் (prototype) கொண்டிருக்கலாம், மேலும் அது அதன் முன்மாதிரியிலிருந்து பண்புகளைப் பெறலாம். + +முக்கிய வேறுபாடு என்னவென்றால், பாரம்பரிய மரபுரிமை வகுப்பு அடிப்படையிலானது (class-based), அதேசமயம் முன்மாதிரி மரபுரிமை பொருள் அடிப்படையிலானது (object-based). ES6 ஆனது ஜாவாஸ்கிரிப்டில் `class` முக்கியச்சொல்லை (keyword) அறிமுகப்படுத்தியிருந்தாலும், இது ஏற்கனவே உள்ள முன்மாதிரியான மரபுரிமையின் (prototypal inheritance) மீது சின்டாக்டிகல் சுகர் (syntactical sugar) ஆகும். + +### 2.2. உள்ளமைக்கப்பட்ட (built-in) ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்களை எவ்வாறு நீட்டிக்கலாம் (extend)? + +**பதில்:** உள்ளமைக்கப்பட்ட (built-in) ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்களை (objects) நீட்டிக்க, அவற்றின் முன்மாதிரியில் (prototype) முறைகள் அல்லது பண்புகளைச் (methods or properties) சேர்க்கலாம். எவ்வாறாயினும், நேட்டிவ் முன்மாதிரிகளை (native prototypes) மாற்றுவது பொதுவாக ஊக்கமளிக்காது, ஏனெனில் இது இணக்கத்தன்மை (compatibility) சிக்கல்களுக்கும் எதிர்பாராத நடத்தைக்கும் வழிவகுக்கும், குறிப்பாக எதிர்காலத்தில் ஜாவாஸ்கிரிப்ட் விவரக்குறிப்பில் (JavaScript specification) மாற்றங்கள் இருந்தால். + +## 3. ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட் (Asynchronous JavaScript) + +### 3.1. ஜாவாஸ்கிரிப்டில் நிகழ்வு சுழலை (event loop) விளக்குங்கள். இது அழைப்பு ஸ்டாக்குடன் (call stack) எவ்வாறு தொடர்புடையது? + +**பதில்:** நிகழ்வு சுழல் (event loop) என்பது ஜாவாஸ்கிரிப்ட்டில் ஒரு அடிப்படைக் கருத்தாகும் மற்றும் காலப்போக்கில் பல நிரல் துண்டுகளை (chunks of program) செயல்படுத்துவதைக் கையாளுவதற்குப் பொறுப்பாகும், ஒவ்வொன்றும் முடிவடையும் வரை இயங்கும். செய்திக் கியூவில் (message queue) காத்திருக்கும் பணிகள் (tasks) உள்ளதா எனச் சரிபார்க்கும் தொடர்ச்சியான லூப்பாக (continuous loop) இது செயல்படுகிறது. பணிகள் இருந்தால் மற்றும் பிரதான த்ரெட் (அழைப்பு ஸ்டாக் - call stack) காலியாக இருந்தால், அது பணியைத் துண்டித்து (dequeues) செயல்படுத்துகிறது. + +அழைப்பு அடுக்கு (call stack), மறுபுறம், ஒரு நிரலில் (program) செயல்பாடுகளை செயல்படுத்துவதைக் கண்காணிக்கும் தரவுக் கட்டமைப்பாகும் (data structure). ஒரு செயல்பாடு அழைக்கப்பட்டால், அது அழைப்பு அடுக்கில் (call stack) சேர்க்கப்படும், மேலும் அது முடிவடையும் போது, அது அடுக்கிலிருந்து அகற்றப்படும். + +ஜாவாஸ்கிரிப்ட்டின் சூழலில், நிகழ்வு சுழற்சியானது அழைப்பு அடுக்கு (call stack) காலியாக உள்ளதா என்பதைத் தீர்மானிக்கத் தொடர்ந்து சரிபார்க்கிறது. அது காலியாக இருந்தால் மற்றும் செய்தி வரிசையில் (message queue) கால்பேக் செயல்பாடுகள் (callback functions) காத்திருந்தால், அந்த கால்பேக்குகள் செயல்படுத்தப்படும். + +### 3.2. பிராமிஸ்கள் (promises) என்றால் என்ன, மற்றும் ஒத்திசைவற்ற செயல்பாடுகளைக் (asynchronous operations) நிர்வகிப்பதில் கால்பேக்குகளிலிருந்து (callbacks) அவை எவ்வாறு வேறுபடுகின்றன? + +**பதில்:** பிராமிஸ்கள் என்பது ஒத்திசைவற்ற செயல்பாடு மற்றும் அதன் விளைவாக வரும் மதிப்பு (resulting value) ஆகியவற்றின் இறுதி முடிவை (அல்லது தோல்வி) குறிக்கும் பொருட்கள் (objects) ஆகும். ஒரு `Promise` பின்வரும் நிலைகளில் ஒன்றில் உள்ளது: + +- `நிலுவையில் உள்ளது (pending)`: ஆரம்ப நிலை, நிறைவேற்றப்படவுமில்லை, நிராகரிக்கப்படவுமில்லை. +- `நிறைவேற்றப்பட்டது (fulfilled)`: பிராமிஸ் செய்யப்பட்ட செயல்பாடு முடிந்தது மற்றும் பிராமிஸ் இதன் விளைவாக ஒரு மதிப்பைக் கொண்டுள்ளது என்று அர்த்தம். +- `நிராகரிக்கப்பட்டது (rejected)`: செயல்பாடு தோல்வியடைந்தது, மற்றும் பிராமிஸ் ஒருபோதும் நிறைவேற்றப்படாது. + +கால்பேக்குகள் (Callbacks) என்பவை செயல்பாடுகள் (functions) மற்றொன்றுச் செயல்பாட்டிற்கு வாதங்களாக (arguments) அனுப்பப்பட்டு, வெளிப்புறச் செயல்பாடு (outer function) முடிந்த பிறகு செயல்படுத்தப்படும். பிராமிஸ்கள் மற்றும் கால்பேக்குகள் இரண்டும் ஒத்திசைவற்ற செயல்பாடுகளைக் (asynchronous operations) கையாள முடியும் என்றாலும், பிராமிஸ்கள் அவற்றைக் கையாள்வதற்கான வலுவான (robust) வழியை வழங்குகின்றன. + +முக்கிய வேறுபாடுகள் பின்வருமாறு: + +- பிராமிஸ்கள் ஒத்திசைவற்ற செயல்பாடுகளை (asynchronous operations) சிறப்பாகச் சங்கிலியமைக்க (chaining) அனுமதிக்கின்றன. +- கால்பேக்குகள் (Callbacks) கால்பேக் நரகத்திற்கு (callback hell) அல்லது அழிவின் பிரமிடுக்கு (pyramid of doom) வழிவகுக்கும், அங்கு உள்ளமைக்கப்பட்ட கால்பேக்குகளால் குறியீட்டைப் படிக்கவும் நிர்வகிக்கவும் கடினமாகிவிடும். +- பிராமிஸ்கள் `.then` மற்றும் `.catch` ஐப் பயன்படுத்தும் ஒரு தரப்படுத்தப்பட்ட பிழையைக் கையாளும் பொறிமுறையைக் (standardized error handling mechanism) கொண்டுள்ளன. + +### 3.3. `async/await` விவரிக்கவும். ஒத்திசைவற்ற (asynchronous) குறியீட்டுடன் வேலை செய்வதை இது எவ்வாறு எளிதாக்குகிறது? + +**பதில்:** `async/await` என்பது ஒத்திசைவற்ற குறியீட்டைக் (asynchronous code) கொண்டு மிகவும் ஒத்திசைவு போன்ற முறையில் (synchronous-like fashion) வேலை செய்ய ES8 (அல்லது ES2017) இல் அறிமுகப்படுத்தப்பட்ட ஒரு தொடரியல் அம்சமாகும் (syntactic feature). இது கால்பேக்குகள் இல்லாமல் ஒரு நேர்கோட்டு முறையில் ஒத்திசைவற்ற செயல்பாடுகளை எழுத அனுமதிக்கிறது, மேலும் சுத்தமான, படிக்கக்கூடிய குறியீட்டிற்கு வழிவகுக்கிறது. + +ஒத்திசைவற்ற செயல்பாட்டை (asynchronous function) அறிவிக்க `async` முக்கியச்சொல் பயன்படுத்தப்படுகிறது, இது செயல்பாடு ஒரு பிராமிஸைத் (promise) தருவதை உறுதி செய்கிறது. ஒரு `async` செயல்பாட்டிற்குள், பிராமிஸ் தீர்க்கப்படும் (resolved) அல்லது நிராகரிக்கப்படும் (rejected) வரை செயல்படுத்துவதை இடைநிறுத்த (pause) `await` முக்கியச்சொல் பயன்படுத்தப்படுகிறது. + +`async/await` ஐப் பயன்படுத்துவது பிழையைக் கையாளுவதை (error handling) எளிதாக்குகிறது, ஏனெனில் நாம் பிராமிஸ்களுடன் `.catch` க்குப் பதிலாகப் பாரம்பரிய `try/catch` தொகுதிகளைப் பயன்படுத்தலாம். + +## 4. மேம்பட்ட வரிசை முறைகள் (Advanced Array Methods) + +### 4.1. `map`, `reduce`, மற்றும் `filter` ஆகியவற்றின் செயல்பாடுகளை விவரிக்கவும். ஒவ்வொன்றுக்கும் ஒரு நடைமுறைப் பயன்பாட்டின் (practical use case) உதாரணத்தை வழங்கவும். + +**பதில்:** `map`, `reduce`, மற்றும் `filter` செயல்பாடுகள் (functions) கீழே வரையறுக்கப்பட்டுள்ளன. + +- `map`: இது ஒரு செயல்பாட்டின் அடிப்படையில் வரிசையின் (array) ஒவ்வொரு உறுப்பையும் உருமாற்றுகிறது (transforms), அதே நீளத்தின் புதிய வரிசையை வழங்குகிறது. + **எடுத்துக்காட்டு:** வரிசையில் உள்ள ஒவ்வொரு எண்ணையும் இரட்டிப்பாக்குதல். + ```javascript + const numbers = [1, 2, 3, 4]; + const doubled = numbers.map((num) => num * 2); // [2, 4, 6, 8] ``` + ``` +- `reduce`: இது ஒரு அக்யூமுலேட்டருக்கும் (accumulator) வரிசையில் உள்ள ஒவ்வொரு உறுப்புக்கும் (இடமிருந்து வலமாக) ஒரு செயல்பாட்டைப் பயன்படுத்துகிறது, அதைக் குறைத்து ஒற்றை மதிப்பாக (single value) மாற்றுகிறது. + **எடுத்துக்காட்டு:** வரிசையில் உள்ள அனைத்து எண்களையும் சுருக்கவும் (Summing). + ```javascript + const numbers = [1, 2, 3, 4]; + const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 10 + ``` +- `filter`: இது ஒரு செயல்பாட்டினால் குறிப்பிடப்பட்ட சோதனையில் (test specified by a function) தேர்ச்சி பெறும் உறுப்புகளுடன் ஒரு புதிய வரிசையை (array) உருவாக்குகிறது. +**எடுத்துக்காட்டு:** வரிசையில் உள்ள அனைத்து எண்களையும் சுருக்கவும் (Summing). + ```javascript + const numbers = [1, 2, 3, 4, 5, 6]; + const evenNumbers = numbers.filter((num) => num % 2 === 0); // [2, 4, 6] + ``` + +### 4.2. அம்பு செயல்பாடுகளைப் (arrow functions) பயன்படுத்தும் போது சில வரம்புகள் (limitations) அல்லது ஆபத்துகள் (pitfalls) என்ன? + +**பதில்:** அம்பு செயல்பாடுகள் (Arrow functions) ஜாவாஸ்கிரிப்டில் செயல்பாடுகளை எழுதுவதற்கு ஒரு சுருக்கமான வழியை அறிமுகப்படுத்துகின்றன, ஆனால் அவை சில வரம்புகளுடன் (limitations) வருகின்றன: + +1. **சொந்த `this` பிணைப்பு இல்லை (No `this` Binding)**: அம்பு செயல்பாடுகள் அவற்றின் சொந்த `this` ஐப் பிணைக்காது (bind). அவை சுற்றியுள்ள ஸ்கோப்பின் (surrounding scope) `this` பிணைப்பைப் பெறுகின்றன. இது பிரச்சனைக்குரியதாக இருக்கலாம், குறிப்பாக ஆப்ஜெக்ட்களில் முறைகளாக (methods) அல்லது ஈவென்ட் ஹேண்ட்லர்களாக (event handlers) பயன்படுத்தும் போது. + +2. **சொந்த `arguments` ஆப்ஜெக்ட் இல்லை**: அம்பு செயல்பாடுகளுக்கு அவற்றின் சொந்த `arguments` பொருள் (object) இல்லை. வாதங்கள் பொருளை (arguments object) நாம் அணுக வேண்டுமானால், நாம் பாரம்பரியச் செயல்பாட்டுக் கோவைகளைப் (traditional function expressions) பயன்படுத்த வேண்டும். + +3. **கன்ஸ்ட்ரக்டர்களாகப் (Constructors) பயன்படுத்த முடியாது**: அம்பு செயல்பாடுகளை `new` முக்கியச்சொல்லுடன் கன்ஸ்ட்ரக்டர்களாகப் பயன்படுத்த முடியாது, ஏனெனில் அவற்றிற்கு `[[Construct]]` அக முறை (internal method) இல்லை. + +4. **சொந்த `prototype` பண்பு இல்லை**: வழக்கமான செயல்பாடுகளைப் (regular functions) போலன்றி, அம்பு செயல்பாடுகளுக்குப் `prototype` பண்பு (property) இல்லை. + +5. **சிக்கலான தர்க்கத்திற்கான குறைவான வாசிப்புத்திறன் (Less Readable for Complex Logic)**: எளிய செயல்பாடுகளுக்கு, சுருக்கமான தொடரியல் (concise syntax) நன்மை பயக்கும். இருப்பினும், சிக்கலான தர்க்கத்தைக் (complex logic) கொண்ட செயல்பாடுகளுக்கு, சுருக்கமான தொடரியல் குறியீட்டைக் குறைவான வாசிப்புத்திறன் கொண்டதாக மாற்றும். + +## 5. "this" முக்கியச்சொல் ("this" Keyword) + +### 5.1. ஒரு முறை (method), தனியான செயல்பாடு (standalone function), அம்பு செயல்பாடு (arrow function) மற்றும் நிகழ்வு ஹேண்ட்லர் (event handler) போன்ற வெவ்வேறு சூழல்களில் (contexts) `this` முக்கியச்சொல்லின் (keyword) நடத்தையை விளக்குங்கள். +**பதில்:** `this` வார்த்தையானது அது பயன்படுத்தப்படும் சூழலைப் (context) பொறுத்து மாறுபடும். அவற்றில் சில கீழே ஆராயப்பட்டுள்ளன: + +- முறையில் (In Method): இது முறை (method) அழைக்கப்படும் பொருளைக் (object) குறிக்கிறது. + +```js +const person = { + name: "Alice", + sayHello: function () { + console.log(`Hello, my name is ${this.name}`); + }, +}; + +person.sayHello(); // Output: Hello, my name is Alice +``` +- தனித்த செயல்பாட்டில் (In Standalone Function): இங்கே, `this` நடத்தை செயல்பாடு எவ்வாறு அழைக்கப்படுகிறது என்பதைப் பொறுத்தது. உலகளாவிய ஸ்கோப்பில் (global scope) செயல்பாடு அழைக்கப்பட்டால், `this` உலகளாவிய பொருளைக் (global object) குறிக்கும். + +```js +function greet() { + console.log(`Hello, my name is ${this.name}`); +} + +const name = "Alice"; +greet(); // Output: Hello, my name is Alice +``` +- அம்பு செயல்பாட்டில் (In Arrow Function): அம்பு செயல்பாடுகள் (Arrow functions) வழக்கமான செயல்பாடுகளைப் போலன்றி, சுற்றியுள்ள லெக்சிகல் ஸ்கோப்பில் (lexical scope) இருந்து இந்த மதிப்பைப் (this value) பிடிக்கின்றன. அதாவது, அவற்றின் சொந்த this சூழல் இல்லை. + +```js +const person = { + name: "Bob", + sayHello: () => { + console.log(`Hello, my name is ${this.name}`); + }, +}; + +person.sayHello(); // Output: Hello, my name is undefined +``` + +### 5.2. ஒரு செயல்பாடு (function) ஒரு குறிப்பிட்ட பொருளை (specific object) அதன் `this` மதிப்பாகப் பயன்படுத்துவதை எவ்வாறு உறுதிப்படுத்துவது? +**பதில்:** +bind, arrow functions, call, apply போன்ற முறைகளைப் பயன்படுத்தி அல்லது ES6 வகுப்புகளுக்குள் (classes) உள்ள முறைகளை வரையறுப்பதன் மூலம் ஜாவாஸ்கிரிப்ட்டில் ஒரு செயல்பாடு ஒரு குறிப்பிட்ட பொருளை (specific object) this மதிப்பாகப் பயன்படுத்துவதை நாம் உறுதிசெய்யலாம். செயல்பாடு இயங்கும் சூழலைக் (context) கட்டுப்படுத்தவும், விரும்பிய பொருளின் (object) பண்புகள் மற்றும் முறைகளை (properties and methods) அது அணுகுவதை உறுதி செய்யவும் இந்த நுட்பங்கள் நம்மை அனுமதிக்கின்றன. + +## 6. நினைவக மேலாண்மை (Memory Management) + +### 6.1. ஜாவாஸ்கிரிப்டில் நினைவகக் கசிவுகள் (memory leaks) என்றால் என்ன? சாத்தியமான காரணங்கள் மற்றும் அவற்றைத் தடுப்பது எப்படி என்று விவாதிக்கவும். +**பதில்:** +இனித் தேவைப்படாத ஆப்ஜெக்ட்களுக்கான குறிப்புகளை (references) நிரல் (program) தற்செயலாகத் தக்கவைத்துக் கொள்ளும்போது ஜாவாஸ்கிரிப்டில் நினைவகக் கசிவுகள் (Memory leaks) ஏற்படுகின்றன, இது நினைவகப் பயன்பாடு (memory usage) அதிகரிப்பதற்கும் சாத்தியமான பயன்பாட்டுச் சிக்கல்களுக்கும் வழிவகுக்கும். பயன்படுத்தப்படாத மாறிகள் (unused variables), க்ளோஷர்கள் (closures), நிகழ்வைக் கேட்பவர்கள் (event listeners) மற்றும் வட்டக் குறிப்புகள் (circular references) ஆகியவை பொதுவான காரணங்கள். நினைவகக் கசிவுகளைத் (memory leaks) தடுக்க, டெவலப்பர்கள் குறிப்புகளை வெளிப்படையாக அகற்ற வேண்டும், நிகழ்வு கேட்பவர்களை (event listeners) நிர்வகிக்க வேண்டும், வட்ட சார்புகளைத் (circular dependencies) தவிர்க்க வேண்டும், பலவீனமான குறிப்புகளைப் (weak references) பயன்படுத்த வேண்டும், நினைவக விவரக்குறிப்புக் கருவிகளைப் (memory profiling tools) பயன்படுத்த வேண்டும், சோதனை மற்றும் குறியீட்டு மதிப்பாய்வுகளை (code reviews) நடத்த வேண்டும், மேலும் மேம்பாட்டுச் செயல்முறையின் ஆரம்பத்தில் சாத்தியமான சிக்கல்களைக் கண்டறிய லிண்டர்கள் (linters) மற்றும் நிலையான பகுப்பாய்வுக் கருவிகளைப் (static analysis tools) பயன்படுத்த வேண்டும். + +### 6.2. ஆழமற்ற நகல் (shallow copy) மற்றும் ஆழமான நகல் (deep copy) ஆகியவற்றுக்கு இடையேயான வேறுபாட்டை விவரிக்கவும். ஜாவாஸ்கிரிப்டில் ஒவ்வொன்றையும் எப்படி அடைவது? +**பதில்:** +ஆழமற்ற நகல் மற்றும் ஆழமான நகல் என்பவை ஜாவாஸ்கிரிப்டில் பொருள்கள் (objects) அல்லது வரிசைகளை (arrays) நகலெடுக்கும் (duplicating) முறைகள் ஆகும். + +ஆழமற்ற நகல் (Shallow copy) ஒரு பொருள் (object) அல்லது வரிசையின் மேல்-நிலை அமைப்பு (top-level structure) மற்றும் மதிப்புகளை நகலெடுக்கிறது ஆனால் உள்ளமைக்கப்பட்ட (nested) பொருள்கள் அல்லது வரிசைகளுக்கான குறிப்புகளைத் தக்க வைத்துக் கொள்கிறது. உள்ளமைக்கப்பட்ட (nested) கட்டமைப்புகளின் மாற்றங்கள் அசல் மற்றும் நகல் இரண்டையும் பாதிக்கின்றன. +ஆழமான நகல் (Deep copy) ஒரு புதிய பொருள் அல்லது வரிசையை (array) உருவாக்குகிறது மற்றும் உள்ளமைக்கப்பட்ட கட்டமைப்புகளின் (nested structures) அனைத்து நிலைகளையும் மீண்டும் மீண்டும் நகலெடுக்கிறது (recursively duplicates), நகலில் ஏற்படும் மாற்றங்கள் அசலைப் பாதிக்காது என்பதை உறுதி செய்கிறது. +ஆழமற்ற நகலை (shallow copy) அடைய, ஸ்ப்ரெட் ஆபரேட்டர் (spread operator) அல்லது slice() போன்ற முறைகளைப் பயன்படுத்தலாம். ஆழமான நகலுக்கு (deep copy), ஜாவாஸ்கிரிப்டில் உள்ளமைக்கப்பட்ட (built-in) ஆழமான நகல் முறைகள் இல்லாததால் தனிப்பயன் தர்க்கம் (custom logic) அல்லது லோடாஷின் (lodash) க்ளோன்டீப் (cloneDeep) போன்ற நூலகங்கள் (libraries) அவசியம். + +## 7. ES6 மற்றும் அதற்கு அப்பால் (ES6 and Beyond) + +### 7.1. ஜாவாஸ்கிரிப்டின் டிஸ்ட்ரக்சரிங் ஒதுக்கீட்டின் (destructuring assignment) நோக்கம் மற்றும் பயன்பாட்டை விளக்குங்கள். +**பதில்:** +ஜாவாஸ்கிரிப்ட்டின் டிஸ்ட்ரக்சரிங் அசைன்மென்ட் (destructuring assignment) என்பது பொருள்களிலிருந்தும் (objects) வரிசைகளிலிருந்தும் (arrays) மதிப்புகளைப் பிரித்தெடுப்பதை எளிதாக்கும் ஒரு அம்சமாகும், இது குறியீட்டைச் சுருக்கமாகவும் (concise) படிக்கக்கூடியதாகவும் ஆக்குகிறது. சொத்து பெயர்கள் (பொருள் டிஸ்ட்ரக்சரிங் - object destructuring) அல்லது நிலை (வரிசை டிஸ்ட்ரக்சரிங் - array destructuring) அடிப்படையில் மாறிகளுக்கு மதிப்புகளை ஒதுக்க இது அனுமதிக்கிறது. டிஸ்ட்ரக்சரிங் செயல்பாட்டு அளவுருக்களிலும் (function parameters) பயன்படுத்தப்படலாம் மற்றும் மீதமுள்ள கூறுகளைப் பிடிக்க ரெஸ்ட் சின்டாக்ஸை (rest syntax) ஆதரிக்கிறது. சிக்கலான தரவுக் கட்டமைப்புகளுடன் (complex data structures) வேலை செய்வதற்கு இது ஒரு சக்திவாய்ந்த கருவியாகும். + +### 7.2. ஜாவாஸ்கிரிப்ட் தொகுதிகள் (modules) மற்றும் ES6 `import/export` தொடரியல் ஆகியவற்றின் முக்கியத்துவத்தை விவரிக்கவும். +**பதில்:** +நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்கு ES6 import/export தொடரியல் உடன், ஜாவாஸ்கிரிப்ட் தொகுதிகள் (modules) முக்கியமானவை. அவை குறியீட்டைத் திறம்பட ஒழுங்கமைக்கவும், மீண்டும் பயன்படுத்தவும் மற்றும் பராமரிக்கவும் டெவலப்பர்களுக்கு உதவுகின்றன. தொகுதிகள் (Modules) தொடர்புடைய குறியீட்டை இணைக்கின்றன (encapsulate), குறியீடு மறுபயன்பாட்டை (code reusability) மேம்படுத்துகின்றன, சார்புகளை (dependencies) நிர்வகிக்கின்றன மற்றும் குறியீடு அளவிடுதலை (code scalability) மேம்படுத்துகின்றன. ES6 இறக்குமதி/ஏற்றுமதி தொடரியல் (import/export syntax) தொகுதிகளை (modules) அறிவிப்பதற்கும் பயன்படுத்துவதற்கும் தரப்படுத்தப்பட்ட வழியை வழங்குகிறது, சுத்தமான மற்றும் பராமரிக்கக்கூடிய வகையில் குறியீட்டை கட்டமைத்து (structure) பகிர்வதை எளிதாக்குகிறது. கிளையன்ட் மற்றும் சர்வர் பக்கங்களில் மாடுலர் (modular) மற்றும் பராமரிக்கக்கூடிய (maintainable) ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை உருவாக்க இந்த அம்சங்கள் இன்றியமையாததாகிவிட்டன. +### 7.3. டெம்ப்ளேட் லிட்டரல்கள் (template literals) ES6 இல் சரம் கையாளுதலை (string manipulation) எவ்வாறு மேம்படுத்துகின்றன? உதாரணங்களை வழங்கவும். +**பதில்:** +ES6 இல் உள்ள டெம்ப்ளேட் லிட்டரல்கள் உட்பொதிக்கப்பட்ட வெளிப்பாடுகள் (embedded expressions) மற்றும் பல வரி உள்ளடக்கத்துடன் (multiline content) மிகவும் படிக்கக்கூடிய (readable) மற்றும் நெகிழ்வான முறையில் (flexible way) சரங்களை உருவாக்க டெவலப்பர்களை அனுமதிப்பதன் மூலம் சரம் கையாளுதலை மேம்படுத்துகிறது. அவை மாறக்கூடிய இடைச்செருகல் (variable interpolation), பல வரிச் சரங்கள் (multiline strings), வெளிப்பாடு மதிப்பீடு (expression evaluation), செயல்பாட்டு அழைப்புகள் (function calls) மற்றும் குறிக்கப்பட்ட டெம்ப்ளேட்கள் (tagged templates) போன்ற மேம்பட்ட பயன்பாட்டு நிகழ்வுகளை (use cases) ஆதரிக்கின்றன. டைனமிக் உள்ளடக்கம் (dynamic content) அல்லது வெளிப்பாடுகளை உள்ளடக்கிய சிக்கலான சரங்களுடன் (complex strings) பணிபுரியும் போது இந்த அம்சம் குறியீடு வாசிப்புத்திறன் (code readability) மற்றும் பராமரிப்பை (maintainability) மேம்படுத்துகிறது. + +### 7.4. நான் let மற்றும் const மாறிகளை மறுஅறிவிப்பு (redeclare) செய்யலாமா? + +**பதில்:** இல்லை, உங்களால் let மற்றும் const மாறிகளை (variables) மறுஅறிவிப்பு செய்ய முடியாது. நீங்கள் அவ்வாறு செய்தால், அது கீழே உள்ள பிழையை (error) எறிகிறது (throws). + +```js +Uncaught SyntaxError: Identifier 'someVariable' has already been declared +``` + +விளக்கம்: var முக்கியச்சொல்லுடன் (keyword) கூடிய மாறி அறிவிப்பு (variable declaration) ஒரு செயல்பாட்டு ஸ்கோப்பைக் (function scope) குறிக்கிறது மற்றும் ஹொயிஸ்டிங் (hoisting) அம்சம் காரணமாக மாறி ஸ்கோப்பின் உச்சியில் (top of the enclosing scope) அறிவிக்கப்பட்டதைப் போலக் கருதப்படும். எனவே எந்தப் பிழையும் இல்லாமல் ஒரே ஹொயிஸ்டட் மாறிக்கு (hoisted variable) பங்களிக்கும் பல அறிவிப்புகள் அனைத்தும். var மற்றும் let/const மாறிகள் இரண்டிற்கும் ஒரே ஸ்கோப்பில் (scope) மாறிகளை (variables) மீண்டும் அறிவிக்க ஒரு உதாரணத்தை எடுத்துக் கொள்வோம். + +```js +var name = "John"; +function myFunc() { + var name = "Nick"; + var name = "Abraham"; // Re-assigned in the same function block + alert(name); // Abraham +} +myFunc(); +alert(name); // John +``` + +பிளாக்-ஸ்கோப்டு (block-scoped) பல-அறிவிப்பு (multi-declaration) தொடரியல் பிழையை (syntax error) எறிகிறது, + +```js +let name = "John"; +function myFunc() { + let name = "Nick"; + let name = "Abraham"; // Uncaught SyntaxError: Identifier 'name' has already been declared + alert(name); +} + +myFunc(); +alert(name); +``` + +### 7.5. const மாறி மதிப்பை மாற்ற முடியாததாக (immutable) ஆக்குகிறதா? + +**பதில்:** இல்லை, const மாறியானது மதிப்பை மாற்ற முடியாததாக (immutable) ஆக்காது. ஆனால் இது அடுத்தடுத்த பணிகளை (subsequent assignments) அனுமதிக்காது (அதாவது, நீங்கள் ஒதுக்கீட்டுடன் (assignment) அறிவிக்கலாம், ஆனால் பின்னர் மற்றொரு மதிப்பை ஒதுக்க முடியாது) + +```js +const userList = []; +userList.push("John"); // Can mutate even though it can't re-assign +console.log(userList); // ['John'] +``` + +### 7.6. இயல்புநிலை அளவுருக்கள் (default parameters) என்ன? + +**பதில்:** ES5 இல், செயல்பாட்டு அளவுருக்களின் (function parameters) இயல்புநிலை மதிப்புகளைக் (default values) கையாள தர்க்கரீதியான OR (logical OR) ஆபரேட்டர்களை நாம் சார்ந்திருக்க வேண்டும். ES6 இல், இயல்புநிலைச் செயல்பாட்டு அளவுருக்கள் (Default function parameters) அம்சமானது, எந்த மதிப்பும் இல்லை என்றாலோ அல்லது வரையறுக்கப்படாதது (undefined) எனத் தேர்ச்சி பெற்றாலோ, அளவுருக்கள் இயல்புநிலை மதிப்புகளுடன் துவக்கப்பட அனுமதிக்கிறது. எடுத்துக்காட்டுகளுடன் நடத்தையை (behavior) ஒப்பிடுவோம், + +```js +//ES5 +var calculateArea = function (height, width) { + height = height || 50; + width = width || 60; + + return width * height; +}; +console.log(calculateArea()); //300 +``` + +இயல்புநிலை அளவுருக்கள் (default parameters) துவக்கத்தை (initialization) எளிமையாக்குகிறது, + +```js +//ES6 +var calculateArea = function (height = 50, width = 60) { + return width * height; +}; + +console.log(calculateArea()); //300 +``` + +### 7.7. டெம்ப்ளேட் லிட்டரல்கள் (template literals) என்றால் என்ன? + +**பதில்:** டெம்ப்ளேட் லிட்டரல்கள் (Template literals) அல்லது டெம்ப்ளேட் சரங்கள் (template strings) என்பது உட்பொதிக்கப்பட்ட கோவைகளை (embedded expressions) அனுமதிக்கும் சரம் லிட்டரல்கள் (string literals) ஆகும். இவை இரட்டை அல்லது ஒற்றை மேற்கோள்களுக்குப் (double or single quotes) பதிலாகப் பேக்-டிக் *(`)* எழுத்தால் இணைக்கப்பட்டுள்ளன. ES6 இல், இந்த அம்சம் கீழே உள்ளதைப் போல டைனமிக் கோவைகளைப் (dynamic expressions) பயன்படுத்த உதவுகிறது, + +```js +var greeting = `Welcome to JS World, Mr. ${firstName} ${lastName}.`; +``` + +ES5 இல், நீங்கள் கீழே உள்ளதைப் போல சரத்தை உடைக்க வேண்டும், + +```js +var greeting = 'Welcome to JS World, Mr. ' + firstName + ' ' + lastName.` +``` + +குறிப்பு: டெம்ப்ளேட் லிட்டரல்களுடன் (template literals) பல வரிச் சரங்கள் (multi-line strings) மற்றும் சரம் இடைக்கணிப்பு (string interpolation) அம்சங்களை நீங்கள் பயன்படுத்தலாம். + +### 7.8. டெம்ப்ளேட் லிட்டரல்களில் (template literals) பல வரிச் சரங்களை (multi-line strings) எப்படி எழுதுகிறீர்கள்? + +**பதில்:** ES5 இல், பல வரிச் சரங்களைப் (multi-line strings) பெறுவதற்கு நீங்கள் புதிய வரி (newline) தப்பிக்கும் எழுத்துகள் `('\n')` மற்றும் இணைத்தல் (concatenation) குறியீடுகள் `(+)` ஆகியவற்றைப் பயன்படுத்த வேண்டும். + +```js +console.log("This is string sentence 1\n" + "This is string sentence 2"); +``` + +அதேசமயம் ES6 இல், எந்தப் புதிய வரிசை எழுத்தையும் (newline sequence character) நீங்கள் குறிப்பிடத் தேவையில்லை, + +```js +console.log(`This is string sentence 'This is string sentence 2`); +``` + +### 7.9. நெஸ்டிங் டெம்ப்ளேட்கள் (nesting templates) என்ன? + +**பதில்:** நெஸ்டிங் டெம்ப்ளேட் (nesting template) என்பது டெம்ப்ளேட் லிட்டரல்கள் (template literals) தொடரியலில் ஆதரிக்கப்படும் ஒரு அம்சமாகும், இது டெம்ப்ளேட்டிற்குள் ப்ளேஸ்ஹோல்டர் `${ }` உள்ளே உள் பேக்டிக்குகளை (inner backticks) அனுமதிக்கிறது. எடுத்துக்காட்டாக, பயனர் அனுமதிகளின் (user permissions) அடிப்படையில் ஐகான்களைக் காண்பிக்கக் கீழே உள்ள நெஸ்டிங் டெம்ப்ளேட் பயன்படுத்தப்படுகிறது, அதே சமயம் வெளிப்புற டெம்ப்ளேட் இயங்குதள வகையைச் (platform type) சரிபார்க்கிறது: + +```js +const iconStyles = `icon ${ + isMobilePlatform() + ? "" + : `icon-${user.isAuthorized ? "submit" : "disabled"}` +}`; +``` +நெஸ்டிங் டெம்ப்ளேட் அம்சங்கள் (nesting template features) இல்லாமலும் மேலே உள்ள பயன்பாட்டு வழக்கையும் நீங்கள் எழுதலாம். இருப்பினும், நெஸ்டிங் டெம்ப்ளேட் அம்சம் மிகவும் கச்சிதமானது மற்றும் படிக்கக்கூடியது. + +```js +//Without nesting templates +const iconStyles = `icon ${ + isMobilePlatform() + ? "" + : user.isAuthorized + ? "icon-submit" + : "icon-disabled" +}`; +``` + +### 7.10. குறியிடப்பட்ட வார்ப்புருக்கள் (tagged templates) என்றால் என்ன? + +**பதில்:** குறியிடப்பட்ட வார்ப்புருக்கள் (Tagged templates) என்பது டெம்ப்ளேட்களின் மேம்பட்ட வடிவமாகும், இதில் குறிச்சொற்கள் (tags) ஒரு செயல்பாட்டுடன் (function) டெம்ப்ளேட் லிட்டரல்களைப் பாகுபடுத்த (parse) உங்களை அனுமதிக்கின்றன. டேக் (tag) செயல்பாடு முதல் அளவுருவை (parameter) சரங்களின் வரிசையாகவும் (array of strings) மீதமுள்ள அளவுருக்களை வெளிப்பாடுகளாகவும் (expressions) ஏற்றுக்கொள்கிறது. இந்தச் செயல்பாடு அளவுருக்களின் அடிப்படையில் கையாளப்பட்ட (manipulated) சரங்களையும் திருப்பி அனுப்பலாம் (return). ஒரு நிறுவனத்தில் உள்ள ஐடி (IT) நிபுணத்துவத் திறன் தொகுப்பின் (professional skill set) இந்த குறியிடப்பட்ட வார்ப்புருவின் நடத்தை பயன்பாட்டைப் (behavior usage) பார்ப்போம், + +```js +var user1 = "John"; +var skill1 = "JavaScript"; +var experience1 = 15; + +var user2 = "Kane"; +var skill2 = "JavaScript"; +var experience2 = 5; + +function myInfoTag(strings, userExp, experienceExp, skillExp) { + var str0 = strings[0]; // "Mr/Ms. " + var str1 = strings[1]; // " is a/an " + var str2 = strings[2]; // "in" + + var expertiseStr; + if (experienceExp > 10) { + expertiseStr = "expert developer"; + } else if (skillExp > 5 && skillExp <= 10) { + expertiseStr = "senior developer"; + } else { + expertiseStr = "junior developer"; + } + + return `${str0}${userExp}${str1}${expertiseStr}${str2}${skillExp}`; +} + +var output1 = myInfoTag`Mr/Ms. ${user1} is a/an ${experience1} in ${skill1}`; +var output2 = myInfoTag`Mr/Ms. ${user2} is a/an ${experience2} in ${skill2}`; + +console.log(output1); // Mr/Ms. John is a/an expert developer in JavaScript +console.log(output2); // Mr/Ms. Kane is a/an junior developer in JavaScript +``` + +### 7.11. மூலச் சரங்கள் (raw strings) என்ன? + +**பதில்:** ES6 `String.raw()` முறையைப் பயன்படுத்தி மூலச் சரங்களின் (raw strings) அம்சத்தை வழங்குகிறது, இது டெம்ப்ளேட் சரங்களின் (template strings) மூல சரம் (raw string) வடிவத்தைப் பெறப் பயன்படுகிறது. எஸ்கேப் தொடர்களைச் (escape sequences) செயலாக்காமல், உள்ளிட்ட மூலச் சரங்களை அணுக இந்த அம்சம் உங்களை அனுமதிக்கிறது. உதாரணமாக, பயன்பாடு கீழே இருக்கும், + +```js + var calculationString = String.raw`The sum of numbers is \n${ + 1 + 2 + 3 + 4 +}!`; +console.log(calculationString); // The sum of numbers is \n10! +``` + +நீங்கள் மூலச் சரங்களைப் (raw strings) பயன்படுத்தாவிட்டால், பல வரிகளில் வெளியீட்டைக் (output) காண்பிப்பதன் மூலம் புதிய வரிசை (newline) எழுத்துத் தொடர் செயலாக்கப்படும் + +```js +var calculationString = `The sum of numbers is \n${1 + 2 + 3 + 4}!`; +console.log(calculationString); +// The sum of numbers is +// 10! +``` + +மேலும், டேக் செயல்பாட்டின் (tag function) முதல் வாதத்தில் (argument) மூலப் பண்பு (raw property) கிடைக்கிறது + +```js +function tag(strings) { + console.log(strings.raw[0]); +} +``` + +## 8. செயல்பாட்டு நிரலாக்கம் (Functional Programming) + +### 8.1. ஜாவாஸ்கிரிப்டில் அவசியமான நிரலாக்கத்திலிருந்து (imperative programming) செயல்பாட்டு நிரலாக்கம் (functional programming) எவ்வாறு வேறுபடுகிறது? + +**பதில்:** செயல்பாட்டு நிரலாக்கம் (Functional programming) மற்றும் அவசியமான நிரலாக்கம் (imperative programming) ஆகிய இரண்டு முக்கிய நிரலாக்க முன்னுதாரணங்கள் (predominant programming paradigms) ஆகும். + +- **இம்பரேடிவ் புரோகிராமிங் (Imperative Programming)**: இந்த முன்னுதாரணம் (paradigm) கணினிக்கு ஒரு காரியத்தை "எப்படி (how)" செய்ய வேண்டும் என்று சொல்வது மற்றும் நிரல்களின் நிலையை (programs state) மாற்றும் அறிக்கைகளை (statements) நம்பியுள்ளது. சாராம்சத்தில், இது ஒரு குறிப்பிட்ட பணியை அடைவதற்கான படிகளை விவரிப்பதில் கவனம் செலுத்துகிறது. இது பெரும்பாலும் லூப்கள் (loops), நிபந்தனைகள் (conditionals) மற்றும் மாறிகளை (variables) மாற்றும் அறிக்கைகளை (statements) உள்ளடக்கியது. + + ````javascript + let total = 0; + for(let i = 0; i < array.length; i++) { + total += array[i]; + }``` + ```` + +#### செயல்பாட்டு நிரலாக்கம் (Functional Programming - FP) + +FP என்பது கணினிக்கு அதை "எப்படி (how)" அடைவது என்பதை விவரிப்பதை விட, "என்ன (what)" அடைய வேண்டும் என்பதைக் கற்பிப்பதாகும். இது கணக்கீட்டுப் பணிகளை (computational tasks) கணிதச் செயல்பாடுகளின் (mathematical functions) மதிப்பீடுகளாகக் கருதுகிறது மற்றும் மாற்றக்கூடிய தரவு (mutable data) மற்றும் நிலை மாற்றங்களைத் (state alterations) தவிர்க்கிறது. ஜாவாஸ்கிரிப்ட் மற்றும் பெரும்பாலான FP மொழிகளின் சூழலில்: + +- **தூய செயல்பாடுகள் (Pure Functions)**: இவையே வெளியீட்டு மதிப்பானது (output value) கவனிக்கக்கூடிய பக்க விளைவுகள் (side effects) இல்லாமல், அதன் உள்ளீட்டு மதிப்புகளால் (input values) பிரத்தியேகமாகத் தீர்மானிக்கப்படும் செயல்பாடுகளாகும். அதாவது, அதே உள்ளீட்டிற்கு, செயல்பாடு எப்போதும் ஒரே வெளியீட்டைத் (output) தரும். + +- **மாற்ற முடியாத தரவு (Immutable Data)**: தரவு உருவாக்கப்பட்டவுடன், அது மாறவே முடியாது. ஏற்கனவே உள்ள தரவை மாற்றுவதற்குப் பதிலாக, செயல்பாட்டு நிரலாக்க நடைமுறைகள் (functional programming practices) புதிய தரவு கட்டமைப்புகளை (data structures) உருவாக்குவதை உள்ளடக்கியது. + +- **முதல் தர மற்றும் உயர்-வரிசை செயல்பாடுகள் (First-Class and Higher-Order Functions)**: FP இல், செயல்பாடுகள் முதல்-தரக் குடிமக்கள் (first-class citizens). இதன் பொருள் அவை மாறிகளுக்கு (variables) ஒதுக்கப்படலாம், மற்ற செயல்பாடுகளுக்கு அளவுருக்களாக (parameters) அனுப்பப்படலாம் மற்றும் மதிப்புகளாக (values) திரும்பப் பெறலாம். உயர்-வரிசை செயல்பாடு (higher-order function) என்பது ஒரு வாதமாக (argument) மற்றொரு செயல்பாட்டைப் பெறும் ஒரு செயல்பாடாகும், ஒரு செயல்பாட்டை வழங்குகிறது அல்லது இரண்டும். + +### 8.2. முதல் தரச் செயல்பாடுகளை (first-class functions) விளக்கி, செயல்பாட்டு நிரலாக்கத்தில் (functional programming) அவற்றின் முக்கியத்துவத்தை விளக்குங்கள். + +**பதில்:** ஜாவாஸ்கிரிப்ட் மற்றும் பல நிரலாக்க மொழிகளில், செயல்பாடுகள் "முதல் தரக் குடிமக்கள் (first-class citizens)" என்று கருதப்படுகின்றன. இதன் பொருள் செயல்பாடுகள் இருக்கலாம்: + +- மாறிகளுக்கு (variables) ஒதுக்கப்பட்டது. +- மற்றச் செயல்பாடுகளுக்கு வாதங்களாக (arguments) அனுப்பப்பட்டது. +- மற்றச் செயல்பாடுகளிலிருந்து மதிப்புகளாக (values) திரும்பியது. +- வரிசைகள் (arrays) மற்றும் பொருள்கள் (objects) போன்ற தரவுக் கட்டமைப்புகளில் (data structures) சேமிக்கப்படுகிறது. + +இந்த பண்புகளை (properties) நிரூபிக்கும் எளிய எடுத்துக்காட்டு இங்கே: + +````javascript +// Assigning a function to a variable +const greet = function(name) { + return "Hello, " + name; +} +// Passing a function as an argument to another function +function runFunction(fn, value) { + return fn(value); +} +runFunction(greet, 'John'); // Returns: "Hello, John" +// Returning a function from another function +function multiplier(factor) { + return function(number) { + return number \* factor; + } +} +const double = multiplier(2); +double(5); // Returns: 10 +// Storing function in an array +const functions = [greet, double]; +```` + +### 8.3. எக்ஸிகியூஷன் கான்டெக்ஸ்ட் (Execution Context) மற்றும் லெக்சிகல் சூழல் (Lexical Environment) என்றால் என்ன? + +**பதில்:** பொதுவாக, ஒரு செயல்பாடு அதன் கற்பனைக் கொள்கலனைக் (imaginary container) கொண்டுள்ளது அல்லது சில வகையான சூழல் API (context API) என்று கூறலாம். இது செயல்பாட்டிற்கு 3 விஷயங்களை வழங்குகிறது: +- செயல்பாட்டில் அறிவிக்கப்பட்ட மாறிகள் (variables) +- செயல்பாட்டில் வரையறுக்கப்பட்ட செயல்பாடுகள் (functions) +- லெக்சிகல் சூழல் (Lexical environment) +இது ஒரு செயல்பாட்டின் எக்ஸிகியூஷன் கான்டெக்ஸ்ட் (Execution Context) எனப்படும். + +லெக்சிகல் சூழல் (lexical environment) என்பது ஒரு வகையான தகவல் மூலமாகும் (information source), இது பெற்றோர் செயல்பாட்டிற்கு (parent function) அதைப் பயன்படுத்தக்கூடிய மாறிகளின் ஸ்கோப்பை (scope) வழங்குகிறது. உதாரணமாக: + +````javascript +// Assigning a function to a variable +function parent() { + var a; + var b; + + function child() { + var x; + var y; + {rest code} + } +} +```` +இங்கே, லெக்சிகல் சூழல் (lexical environment) பெற்றோர் செயல்பாடு a மற்றும் b மாறியைப் பயன்படுத்த முடியும் ஆனால் x மற்றும் y அல்ல (பெற்றோருக்கு ஸ்கோப்பை வழங்குகிறது) என்ற தகவலைக் கொண்டிருக்கும். + +--- + +## 9. உலாவிக்குள் (browser) தரவைச் சேமித்தல் + +### A. உள்ளூர் சேமிப்பகம் (Local storage) மற்றும் அமர்வு சேமிப்பகம் (Session storage) + +### 9.1 லோக்கல் ஸ்டோரேஜ் (Local Storage) மற்றும் செஷன் ஸ்டோரேஜ் (Session Storage) இடையே உள்ள முக்கிய வேறுபாடுகள் என்ன? + +**பதில்:** வெப் ஸ்டோரேஜ் (Web Storage) என்பது இணைய உலாவியில் (web browser) தரவைச் சேமிப்பதற்கான இரண்டு வழிமுறைகளை வழங்கும் இணைய API (web API) ஆகும்: உள்ளூர் சேமிப்பகம் (Local Storage) மற்றும் அமர்வு சேமிப்பகம் (Session Storage). முக்கிய வேறுபாடுகள்: + +* வாழ்நாள் (Lifetime): உலாவி மூடப்பட்ட பின்னரும் லோக்கல் ஸ்டோரேஜ் தரவு (Local Storage data) தொடர்ந்து இருக்கும், அதே சமயம் செஷன் ஸ்டோரேஜ் தரவு (Session Storage data) பக்க அமர்வின் (page session) காலத்திற்கு மட்டுமே கிடைக்கும். +* ஸ்கோப் (Scope): ஒரே தோற்றத்தில் (same origin) உள்ள பல சாளரங்கள் (windows) மற்றும் தாவல்களில் (tabs) இருந்து லோக்கல் ஸ்டோரேஜ் தரவை அணுக முடியும், அதேசமயம் செஷன் ஸ்டோரேஜ் தரவு தற்போதைய பக்கம் அல்லது தாவலுக்கு மட்டுமே (current page or tab) வரையறுக்கப்பட்டுள்ளது. +* சேமிப்பக வரம்பு (Storage Limit): செஷன் ஸ்டோரேஜ் (சுமார் 5-10 MB) உடன் ஒப்பிடும்போது லோக்கல் ஸ்டோரேஜ் பொதுவாகப் பெரிய சேமிப்பக வரம்பைக் (சுமார் 5-10 MB) கொண்டுள்ளது. + +### 9.2 ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜில் தரவை எப்படிச் சேமிப்பது? + +**பதில்:** தரவைச் சேமிக்க நீங்கள் `localStorage` மற்றும் `sessionStorage` பொருள்களைப் (objects) பயன்படுத்தலாம். லோக்கல் ஸ்டோரேஜில் (Local Storage) தரவைச் சேமிப்பதற்கான உதாரணம் இங்கே: + +`localStorage.setItem('username', 'JohnDoe');` + +செஷன் ஸ்டோரேஜில் (Session Storage) தரவைச் சேமிக்க, `localStorage` ஐ `sessionStorage` ஆக மாற்றவும். + + +### 9.3 லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜில் உள்ள தரவை எப்படி அகற்றுவது அல்லது அழிப்பது? + +**பதில்:** `removeItem` முறையைப் பயன்படுத்திச் சேமிப்பகத்திலிருந்து ஒரு உருப்படியை (item) அகற்றலாம். அனைத்து உருப்படிகளையும் (items) அழிக்க, நீங்கள் `clear` முறையைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக: + +ஒரு உருப்படியை அகற்று (Remove an item) : +`localStorage.removeItem('username');` + +அனைத்து உருப்படிகளையும் அழிக்கவும் (Clear all items) : +`localStorage.clear();` + +### 9.4 வெப் ஸ்டோரேஜ் (Web Storage) தொடர்பான பாதுகாப்புக் கவலைகளை (security concerns) விளக்குங்கள். + +**பதில்:** வெப் ஸ்டோரேஜ் (Web Storage) என்பது டொமைன் சார்ந்ததாகும் (domain-specific), அதாவது தரவைச் சேமித்த அதே டொமைனில் (same domain) இருந்து மட்டுமே அணுக முடியும். இருப்பினும், வெப் ஸ்டோரேஜில் முக்கியமான தகவல்களைச் (sensitive information) சேமிப்பதில் பாதுகாப்புக் கவலைகள் உள்ளன. தரவு மறைகுறியாக்கப்பட்டிருக்காது (not encrypted), மேலும் இது கிராஸ்-சைட் ஸ்கிரிப்டிங் (cross-site scripting - XSS) தாக்குதல்களால் பாதிக்கப்படக்கூடியது (vulnerable), அங்குத் தீங்கிழைக்கும் ஸ்கிரிப்டுகள் (malicious scripts) சேமிக்கப்பட்ட தரவை அணுகலாம் மற்றும் மாற்றலாம். + +### B. IndexDB + +IndexedDB ஐ "localStorage on steroids" என்று கருதலாம். இது ஒரு எளிய விசை-மதிப்பு தரவுத்தளமாகும் (key-value database), ஆஃப்லைன் பயன்பாடுகளுக்குப் (offline apps) போதுமான சக்தி வாய்ந்தது, ஆனால் பயன்படுத்த எளிதானது. + +### 9.5 IndexDB என்றால் என்ன, வெப் ஸ்டோரேஜ் (Local Storage and Session Storage) இலிருந்து இது எவ்வாறு வேறுபடுகிறது? + +**பதில்:** IndexDB என்பது ஒரு குறைந்த-நிலை ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தரவுத்தளமாகும் (low-level JavaScript-based database), இது அதிக அளவிலான கட்டமைக்கப்பட்ட தரவைச் (structured data) சேமிப்பதற்கானது. இது பல வழிகளில் வெப் ஸ்டோரேஜிலிருந்து (Web Storage) வேறுபடுகிறது: +* தரவுக் கட்டமைப்பு (Data Structure): IndexedDB கட்டமைக்கப்பட்ட தரவைச் (structured data) சேமிக்கிறது, வெப் ஸ்டோரேஜ் (Web Storage) முக்கிய-மதிப்பு ஜோடிகளைச் (key-value pairs) சேமிக்கிறது. +* சேமிப்பக வரம்பு (Storage Limit): வெப் ஸ்டோரேஜின் வரையறுக்கப்பட்ட சேமிப்பகத்துடன் ஒப்பிடும்போது IndexedDB பொதுவாகப் பெரிய சேமிப்பக வரம்பை (பெரும்பாலும் மெகாபைட்களில்) வழங்குகிறது. +* API சிக்கலானது (API Complexity): IndexedDB ஆனது மிகவும் சிக்கலான API ஐக் கொண்டுள்ளது, டெவலப்பர்கள் ஒரு தரவுத்தளத் திட்டத்தை (database schema) வரையறுக்கவும் மற்றும் பரிவர்த்தனைகளுடன் (transactions) வேலை செய்யவும் தேவைப்படுகிறது. + +### 9.6 ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி இன்டெக்ஸ்டிபியில் (IndexedDB) டேட்டாபேஸை (database) திறந்து ஆப்ஜெக்ட் ஸ்டோரை (object store) எப்படி உருவாக்குவது? + +**பதில்:** நீங்கள் ஒரு தரவுத்தளத்தைத் (database) திறந்து இது போன்ற ஒரு ஆப்ஜெக்ட் ஸ்டோரை (object store) உருவாக்கலாம்: + +தரவுத்தளத்தைத் திறக்கவும் (அல்லது இல்லை என்றால் உருவாக்கவும்) : + +`const request = indexedDB.open('myDatabase', 1);` + +ஆப்ஜெக்ட் ஸ்டோரை (object store) உருவாக்கவும் : +```sh +request.onupgradeneeded = (event) => { + const db = event.target.result; + db.createObjectStore('myStore', { keyPath: 'id' }); +}; +``` + +## 10. குறியீடு உகப்பாக்கம் (Code Optimization) + +### 10.1. ட்ரீ ஷேக்கிங் (tree shaking) என்றால் என்ன? + +**பதில்:** ட்ரீ ஷேக்கிங் (Tree shaking) என்பது டெட் கோட் எலிமினேஷனின் (dead code elimination) ஒரு வடிவமாகும். கட்டமைப்பின் செயல்பாட்டின் (build process) போதுப் பயன்படுத்தப்படாத தொகுதிகள் (unused modules) மூட்டையில் (bundle) சேர்க்கப்படாது என்பதாகும், அதற்காக இது ES2015 தொகுதி தொடரியலின் (module syntax) நிலையான அமைப்பை (static structure) (அதாவது import மற்றும் export) நம்பியுள்ளது. ஆரம்பத்தில் இது ES2015 தொகுதி பண்ட்லர் ரோலப்பால் (module bundler rollup) பிரபலப்படுத்தப்பட்டது. + +### 10.2. ட்ரீ ஷேக்கிங்கின் தேவை என்ன? + +**பதில்:** ட்ரீ ஷேக்கிங் (Tree Shaking) எந்தப் பயன்பாட்டிலும் குறியீட்டின் அளவைக் கணிசமாகக் குறைக்கும். அதாவது, வயர் (wire) வழியாக நாம் எவ்வளவு குறைவான குறியீட்டை அனுப்புகிறோமோ அந்த அளவுக்குப் பயன்பாடு (application) சிறப்பாக இருக்கும். எடுத்துக்காட்டாக, SPA கட்டமைப்புகளைப் (SPA frameworks) பயன்படுத்தி ஒரு “Hello World” பயன்பாட்டை (Application) உருவாக்க விரும்பினால், அதற்குச் சில MBகள் தேவைப்படும், ஆனால் ட்ரீ ஷேக்கிங் (tree shaking) மூலம் அதன் அளவைச் சில நூறு KBகளுக்குக் குறைக்கலாம். ட்ரீ ஷேக்கிங் (Tree shaking) Rollup மற்றும் Webpack பண்ட்லர்களில் செயல்படுத்தப்படுகிறது. + +### 10.3. ட்ரீ ஷேக்கிங்கில் (tree shaking) ES2015 தொகுதி தொடரியலின் (module syntax) நிலையான அமைப்பின் பங்கை விளக்குங்கள். டெட் கோடை (dead code) அகற்ற மர குலுக்கல் (tree shaking) இந்த அமைப்பை எவ்வாறு பயன்படுத்துகிறது? + +**பதில்:** ட்ரீ ஷேக்கிங் (Tree shaking) ES2015 தொகுதி தொடரியல் நிலையான அமைப்பை நம்பியுள்ளது, அதாவது import மற்றும் export அறிக்கைகள் தொகுக்கும் நேரத்தில் (compile time) தெளிவான மற்றும் நிலையான அமைப்பைக் (static structure) கொண்டுள்ளன. கட்டும் செயல்பாட்டின் போது, பண்ட்லர் (எ.கா., Rollup அல்லது Webpack) எந்தத் தொகுதிகள் பயன்படுத்தப்படுகின்றன, எவை பயன்படுத்தப்படவில்லை என்பதைத் தீர்மானிக்க இறக்குமதி (import) அறிக்கைகளை பகுப்பாய்வு (analyzes) செய்கிறது. இது பயன்படுத்தப்படாத தொகுதிகளை (unused modules) இறுதி மூட்டையிலிருந்து (final bundle) நீக்குகிறது, இதன் விளைவாகச் சிறிய மற்றும் திறமையான குறியீடு (efficient code) கிடைக்கும். + +### 10.4. பல சார்புகள் (dependencies) மற்றும் ஆழமான தொகுதி படிநிலைகளைக் (module hierarchies) கொண்ட சிக்கலான ஜாவாஸ்கிரிப்ட் திட்டத்தில் ட்ரீ ஷேக்கிங்கை (tree shaking) மேம்படுத்த என்ன படிகள் எடுக்கலாம்? + +**பதில்:** ஒரு சிக்கலான திட்டத்தில் ட்ரீ ஷேக்கிங்கை (tree shaking) மேம்படுத்த: + +- அனைத்துச் சார்புகளும் (dependencies) ES2015 தொகுதி தொடரியலைப் பயன்படுத்துவதை உறுதி செய்யவும். +- ட்ரீ ஷேக்கிங் செய்ய உங்கள் பண்ட்லரை (bundler) கட்டமைக்கவும். +- கோப்புகள் (files) அல்லது கோப்பகங்களைப் (directories) பக்கவிளைவு இல்லாதவை (side-effect free) எனக் குறிக்க உங்கள் package.json இல் உள்ள "sideEffects" பண்பைப் (property) பயன்படுத்தவும். +- டைனமிக் இறக்குமதிகளின் (dynamic imports) பயன்பாட்டைக் குறைக்கவும். +- பயன்படுத்தப்படாத ஏற்றுமதிகள் (unused exports) மற்றும் செயல்பாடுகளை (functions) அகற்ற உங்கள் குறியீட்டைத் தொடர்ந்து தணிக்கை (audit) செய்து புதுப்பிக்கவும். diff --git a/ta/interview-questions/basic-level.md b/ta/interview-questions/basic-level.md new file mode 100644 index 00000000..54ddda3d --- /dev/null +++ b/ta/interview-questions/basic-level.md @@ -0,0 +1,884 @@ +--- +layout: editorial +title: Basic JavaScript Interview Questions +chapter: 22 +pageNumber: 158 +description: +--- + +# அடிப்படை ஜாவாஸ்கிரிப்ட் நேர்காணல் கேள்விகள் (Basic JavaScript Interview Questions) + +## 1. வரலாறு மற்றும் மாறிகளை வரையறுத்தல் (History and Defining Variables). + +### 1.1. ஜாவாஸ்கிரிப்ட் என்றால் என்ன? + +**பதில்:** +ஜாவாஸ்கிரிப்ட் என்பது உயர்மட்ட, விளக்கப்பட்ட நிரலாக்க மொழி (high-level, interpreted programming language), இது வலைத்தளங்களுக்கு ஊடாடும் (interactivity) மற்றும் மாறும் நடத்தையைச் (dynamic behavior) சேர்க்க இணைய மேம்பாட்டிற்குப் பரவலாகப் பயன்படுத்தப்படுகிறது. + +### 1.2. ஜாவாஸ்கிரிப்டை உருவாக்கியவர்/உருவாக்கியவர் யார்? + +**பதில்:** +ஜாவாஸ்கிரிப்ட் **Netscape Communications Corporation** இல் பணிபுரிந்தபோது _Brendan Eich_ என்பவரால் உருவாக்கப்பட்டது. அவர் மே 1995 இல் வெறும் பத்து நாட்களில் மொழியை உருவாக்கினார். ஜாவாஸ்கிரிப்ட் முதலில் "_Mocha_" என்று அழைக்கப்பட்டது, ஆனால் பின்னர் "_LiveScript_" என மறுபெயரிடப்பட்டது, இறுதியில் **Sun Microsystems** (இப்போது **Oracle Corporation**) உடனான சந்தைப்படுத்தல் ஒத்துழைப்பின் (marketing collaboration) ஒரு பகுதியாக "_JavaScript_" எனப் பெயரிடப்பட்டது, அந்த நேரத்தில் **Java** எனப்படும் நிரலாக்க மொழிப் பிரபலமடைந்து வந்தது. பெயரில் ஒற்றுமை இருந்தபோதிலும், _ஜாவாஸ்கிரிப்ட்_ மற்றும் _ஜாவா_ ஆகியவை முற்றிலும் வேறுபட்ட நிரலாக்க மொழிகளாகும், அவை தனித்துவமான நோக்கங்கள் மற்றும் பண்புகளுடன் உள்ளன. + +### 1.3. ஜாவாஸ்கிரிப்டில் ஒரு மாறியை (variable) எவ்வாறு அறிவிப்பது? + +**பதில்:** +`var`, `let`, அல்லது `const` ஐப் பயன்படுத்தி நீங்கள் ஒரு மாறியை அறிவிக்கலாம்: + +- `var` (செயல்பாட்டு-ஸ்கோப்டு - function-scoped) +- `let` (பிளாக்-ஸ்கோப்டு - block-scoped) +- `const` (பிளாக்-ஸ்கோப்டு, மாறிலிகளுக்கு - for constants) + +### 1.4. `let`, `var`, மற்றும் `const` ஆகியவற்றுக்கு இடையேயான வேறுபாடு என்ன? + +**பதில்:** + +- `var` என்பது செயல்பாட்டு-ஸ்கோப்டு, அதே சமயம் `let` மற்றும் `const` ஆகியவை பிளாக்-ஸ்கோப்டு. +- `let` மாறி மறுஒதுக்கீட்டை (reassignment) அனுமதிக்கிறது, அதே சமயம் `const` மாறிலிகளுக்குப் (constants) பயன்படுத்தப்படுகிறது. +- `var` உடன் அறிவிக்கப்பட்ட மாறிகள் ஹொயிஸ்ட் (hoisted) செய்யப்படுகின்றன, அதேசமயம் `let` மற்றும் `const` ஹொயிஸ்ட் செய்யப்படவில்லை. + +### 1.5. ஜாவாஸ்கிரிப்ட் ஒரு நிலையான தட்டச்சு செய்யப்பட்டதா (statically typed) அல்லது மாறும் தட்டச்சு செய்யப்பட்ட மொழியா (dynamically typed)? + +**பதில்:** +ஜாவாஸ்கிரிப்ட் என்பது மாறும் தட்டச்சு செய்யப்பட்ட (dynamically typed) மொழியாகும். மாறும் வகையில் தட்டச்சு செய்யப்பட்ட மொழியில், ஒரு மாறியின் வகை (type) செயல்பாட்டு நேரத்தில் (run-time) சோதிக்கப்படுகிறது, இது நிலையான தட்டச்சு செய்யப்பட்ட மொழிக்கு மாறாக, ஒரு மாறியின் வகை தொகுக்கும் நேரத்தில் (compile-time) சோதிக்கப்படுகிறது. + +| அம்சம் (Feature) | நிலையான தட்டச்சு (Static Typing) | மாறும் தட்டச்சு (Dynamic Typing) | +|---|---|---| +| மாறிகள் வகைகளைக் கொண்டுள்ளன | ஆம் | இல்லை | +| மதிப்புகள் வகைகளைக் கொண்டுள்ளன | ஆம் | ஆம் | +| மாறிகள் வகையை மாற்றலாம் | இல்லை | ஆம் | +| மாறிகள் வகையைப் பெரிதும் மாற்றலாம் | இல்லை | ஆம் | + +ஜாவாஸ்கிரிப்ட் ஒரு _தளர்வாக(மாறும்) (loosely(dynamically))_ தட்டச்சு செய்யப்பட்ட மொழியாக இருப்பதால், JS இல் உள்ள மாறிகள் எந்த வகையுடனும் தொடர்புபடுத்தப்படவில்லை. ஒரு மாறி எந்தத் தரவு வகையின் மதிப்பையும் வைத்திருக்க முடியும். + +எடுத்துக்காட்டாக, எண் (number) வகையை ஒதுக்கப்பட்ட ஒரு மாறியைச் சரம் (string) வகைக்கு மாற்றலாம்: + +```js +var a = 23; +var a = "Hello World!"; +``` + +### 1.6. ஜாவாஸ்கிரிப்டில் பிழைகளின் (errors) வகைகள் யாவை? + +**பதில்:** +ஜாவாஸ்கிரிப்டில் ஏழு வகையான பிழைகள் உள்ளன. + +1. **தொடரியல் பிழை (Syntax error)** - முன்வரையறுக்கப்பட்ட தொடரியலை (predefined syntax) நீங்கள் தவறாகப் பயன்படுத்தும்போது பிழை ஏற்படுகிறது. +```js +const func = () => +console.log(hello) +} +``` +2. **குறிப்புப் பிழை (Reference Error)** - மாறி குறிப்பைக் (variable reference) கண்டறிய முடியாத அல்லது அறிவிக்கப்படாத நிலையில், குறிப்புப் பிழை ஏற்படும். +```js +console.log(x); +``` +3. **வகை பிழை (Type Error)** - ஒரு மதிப்பு அதன் தரவு வகையின் நோக்கத்திற்கு (scope) வெளியே பயன்படுத்தப்படும்போது பிழை ஏற்படுகிறது. +```js +let num = 15; +console.log(num.split("")); +``` +4. **மதிப்பீட்டுப் பிழை (Evaluation Error)** - தற்போதைய ஜாவாஸ்கிரிப்ட் இயந்திரங்கள் (engines) மற்றும் EcmaScript விவரக்குறிப்புகள் (specifications) இந்தப் பிழையை எறிவதில்லை (throw). இருப்பினும், பின்தங்கிய இணக்கத்தன்மைக்கு (backward compatibility) இது இன்னும் கிடைக்கிறது. பின்வரும் குறியீட்டுத் தொகுதியில் (code block) காட்டப்பட்டுள்ளபடி, `eval()` பின்தங்கிய செயல்பாடு (backward function) பயன்படுத்தப்படும்போது பிழை அழைக்கப்படுகிறது + +```js +try{ + throw new EvalError("'Throws an error'") +}catch(error){ + console.log(error.name, error.message) +} +``` +5. **வரம்புப் பிழை (RangeError)** - எதிர்பார்க்கப்படும் மதிப்புகளின் வரம்பு தேவைப்படும்போது பிழை உள்ளது. + +```js +const checkRange = (num)=>{ + if (num < 30) throw new RangeError("Wrong number"); + return true +} + +checkRange(20); +``` +6. **URI பிழை (URI Error)** - URI செயல்பாட்டில் தவறான எழுத்து(கள்) பயன்படுத்தப்பட்டால், பிழையானது uri பிழை என அழைக்கப்படும் +```js +console.log(decodeURI("https://www.educative.io/shoteditor")) +console.log(decodeURI("%sdfk")); +``` +7. **உள் பிழை (Internal Error)** - JS இயந்திரத்தில் (engine), அதிகத் தரவு இருக்கும்போது மற்றும் ஸ்டாக் (stack) அதன் முக்கியமான அளவைத் (critical size) தாண்டும்போது இந்தப் பிழை அடிக்கடி நிகழ்கிறது. அதிக மறுநிகழ்வு வடிவங்கள் (recursion patterns), ஸ்விட்ச் கேஸ்கள் (switch cases) போன்றவை இருக்கும்போது, JS இயந்திரம் அதிகமாகிறது. +```js +switch(condition) { + case 1: + ... + break + case 2: + ... + break + case 3: + ... + break + case 4: + ... + break + case 5: + ... + break + case 6: + ... + break + case 7: + ... + break + ... up to 500 cases + } +``` + +### 1.7. ஜாவாஸ்கிரிப்ட்டின் சில நன்மைகளைக் குறிப்பிடவும். + +**பதில்:** +ஜாவாஸ்கிரிப்டில் பல நன்மைகள் உள்ளன. அவற்றில் சில + +- ஜாவாஸ்கிரிப்ட் கிளையண்ட் பக்கத்திலும் (client-side) சர்வர் பக்கத்திலும் (server-side) செயல்படுத்தப்படுகிறது. நீங்கள் படித்துப் பயன்படுத்தக்கூடிய பல்வேறு Frontend Frameworks உள்ளன. இருப்பினும், நீங்கள் பின்தளத்தில் (backend) ஜாவாஸ்கிரிப்டைப் பயன்படுத்த விரும்பினால், நீங்கள் NodeJS ஐக் கற்றுக்கொள்ள வேண்டும். பின்தளத்தில் பயன்படுத்தப்படக்கூடிய ஒரே ஜாவாஸ்கிரிப்ட் கட்டமைப்பு இதுவாகும். +- ஜாவாஸ்கிரிப்ட் கற்றுக்கொள்வதற்கு எளிய மொழியாகும். +- ஜாவாஸ்கிரிப்ட் காரணமாக இணையப் பக்கங்கள் (Web pages) இப்போது அதிகச் செயல்பாட்டைக் (functionality) கொண்டுள்ளன. +- இறுதிப் பயனருக்கு, ஜாவாஸ்கிரிப்ட் மிகவும் விரைவானது. + +### 1.8. ஜாவாஸ்கிரிப்டில் `this` முக்கியச் சொல் (keyword) என்றால் என்ன? + +**பதில்:** பொருளின் பண்புகளுக்கு (object properties) மதிப்புகளை (values) ஒதுக்க தற்போதைய பொருளை (current object) ஒரு கன்ஸ்ட்ரக்டராக (constructor) அழைக்க ஜாவாஸ்கிரிப்டில் `this` என்ற முக்கியச் சொல் பயன்படுத்தப்படுகிறது. + +## 2. செயல்பாடுகள் (Functions) + +### 2.1. ஜாவாஸ்கிரிப்டில் செயல்பாட்டை எவ்வாறு உருவாக்குவது? + +**பதில்:** `function` முக்கியச் சொல் அல்லது அம்பு செயல்பாடுகளை (arrow functions) (`=>`) பயன்படுத்தி நீங்கள் ஒரு செயல்பாட்டை உருவாக்கலாம்: +**எடுத்துக்காட்டு**: + +```js +function myFunction() { + // Function body +} + +const myArrowFunction = () => { + // Function body +}; +``` + +### 2.2. கால்பேக்குகள் (Callbacks) என்றால் என்ன? + +**பதில்:** +கால்பேக் (callback) என்பது மற்றொரு செயல்பாடு (function) செயல்படுத்தப்பட்ட பிறகு செயல்படுத்தப்படும் ஒரு செயல்பாடாகும். ஜாவாஸ்கிரிப்டில், செயல்பாடுகள் முதல் தரக் குடிமக்களாகக் (first-class citizens) கருதப்படுகின்றன, அவை மற்றொரு செயல்பாட்டின் வாதமாகப் (argument) பயன்படுத்தப்படலாம், மற்றொரு செயல்பாட்டினால் திருப்பித் தரப்படலாம் மற்றும் ஒரு பொருளின் பண்பாகப் (property) பயன்படுத்தப்படலாம். + +மற்றொரு செயல்பாட்டிற்கு ஒரு வாதமாகப் பயன்படுத்தப்படும் செயல்பாடுகள் கால்பேக் செயல்பாடுகள் என அழைக்கப்படுகின்றன. + +**எடுத்துக்காட்டு**: + +```js +function divideByHalf(sum) { + console.log(Math.floor(sum / 2)); +} + +function multiplyBy2(sum) { + console.log(sum * 2); +} + +function operationOnSum(num1, num2, operation) { + var sum = num1 + num2; + operation(sum); +} + +operationOnSum(3, 3, divideByHalf); // Outputs 3 + +operationOnSum(5, 5, multiplyBy2); // Outputs 20 +``` + +- மேலே உள்ள குறியீட்டில், இரண்டு எண்களின் கூட்டுத்தொகையில் கணிதச் செயல்பாடுகளைச் செய்து வருகிறோம். `operationOnSum` செயல்பாடு 3 வாதங்களை (arguments) எடுத்துக்கொள்கிறது, முதல் எண், இரண்டாவது எண் மற்றும் அவற்றின் கூட்டுத்தொகையில் (கால்பேக்) செய்யப்படும் செயல்பாடு. +- `divideByHalf` மற்றும் `multiplyBy2` ஆகிய இரண்டு செயல்பாடுகளும் மேலே உள்ள குறியீட்டில் கால்பேக் செயல்பாடுகளாகப் பயன்படுத்தப்படுகின்றன. +- `operationOnSum` செயல்பாடு செயல்படுத்தப்பட்ட பின்னரே இந்தக் கால்பேக் செயல்பாடுகள் செயல்படுத்தப்படும். +- எனவே, கால்பேக் என்பது மற்றொரு செயல்பாடு செயல்படுத்தப்பட்ட பிறகு செயல்படுத்தப்படும் ஒரு செயல்பாடாகும். + +### 2.3. ஜாவாஸ்கிரிப்டில் ஸ்கோப் (Scope) மற்றும் ஸ்கோப் செயினை (Scope Chain) விளக்குங்கள். + +**பதில்:** +JS இல் ஸ்கோப் ஒருவரின் குறியீட்டின் பல்வேறு பகுதிகளில் மாறிகள் (variables) மற்றும் செயல்பாடுகளின் (functions) அணுகலைத் (accessibility) தீர்மானிக்கிறது. + +பொதுவான விதிமுறைகளில், குறியீட்டின் குறிப்பிட்ட பகுதியில், நாம் அணுகக்கூடிய அல்லது அணுக முடியாத மாறிகள் மற்றும் செயல்பாடுகள் என்ன என்பதை ஸ்கோப் நமக்குத் தெரியப்படுத்தும். + +JS இல் மூன்று வகையான ஸ்கோப்கள் உள்ளன: + +- [உலகளாவிய ஸ்கோப் (Global Scope)](#global-scope) +- [உள்ளூர் அல்லது செயல்பாட்டு ஸ்கோப் (Local or Function Scope)](#function-scope) +- [பிளாக் ஸ்கோப் (Block Scope)](#block-scope) + + +**உலகளாவிய ஸ்கோப் (Global Scope)**: உலகளாவிய பெயர்வெளியில் (global namespace) அறிவிக்கப்பட்டுள்ள மாறிகள் அல்லது செயல்பாடுகள் உலகளாவிய ஸ்கோப்பைக் கொண்டுள்ளன, அதாவது உலகளாவிய ஸ்கோப்பைக் கொண்ட அனைத்து மாறிகள் மற்றும் செயல்பாடுகளைக் குறியீட்டிற்குள் எங்கிருந்தும் அணுகலாம். + +```js +var globalVariable = "Hello world"; + +function sendMessage() { + return globalVariable; // can access globalVariable since it's written in global space +} +function sendMessage2() { + return sendMessage(); // Can access sendMessage function since it's written in global space +} +sendMessage2(); // Returns “Hello world” +``` + + +**செயல்பாட்டு ஸ்கோப் (Function Scope)**: ஒரு செயல்பாட்டிற்குள் அறிவிக்கப்பட்ட ஏதேனும் மாறிகள் அல்லது செயல்பாடுகள் `உள்ளூர்/செயல்பாட்டு ஸ்கோப்பைக் (local/function scope)` கொண்டுள்ளன, அதாவது ஒரு செயல்பாட்டிற்குள் அறிவிக்கப்பட்ட அனைத்து மாறிகள் மற்றும் செயல்பாடுகள் செயல்பாட்டிற்குள் இருந்து அணுகப்படலாம் மற்றும் அதற்கு வெளியே இல்லை. + +```js +function awesomeFunction() { + var a = 2; + + var multiplyBy2 = function () { + console.log(a * 2); // Can access variable "a" since a and multiplyBy2 both are written inside the same function + }; +} +console.log(a); // Throws reference error since a is written in local scope and cannot be accessed outside + +multiplyBy2(); // Throws reference error since multiplyBy2 is written in local scope +``` + + +**பிளாக் ஸ்கோப் (Block Scope)**: `பிளாக் ஸ்கோப்` என்பது let மற்றும் const ஐப் பயன்படுத்தி அறிவிக்கப்பட்ட மாறிகளுடன் தொடர்புடையது. var உடன் அறிவிக்கப்பட்ட மாறிகளுக்கு பிளாக் ஸ்கோப் இல்லை. ஒரு பிளாக்கிற்குள் `{ }` அறிவிக்கப்பட்ட எந்த மாறியும் அந்த பிளாக்கிற்குள் மட்டுமே அணுகப்படும் மற்றும் அதற்கு வெளியே அணுக முடியாது என்று பிளாக் ஸ்கோப் சொல்கிறது. + +```js +{ + let x = 45; +} + +console.log(x); // Gives reference error since x cannot be accessed outside of the block + +for (let i = 0; i < 2; i++) { + // do something +} + +console.log(i); // Gives reference error since i cannot be accessed outside of the for loop block +``` + +**ஸ்கோப் செயின் (Scope Chain)**: ஜாவாஸ்கிரிப்ட் இயந்திரம் மாறிகளைக் கண்டறிய ஸ்கோப்பைப் பயன்படுத்துகிறது. ஒரு உதாரணத்தைப் பயன்படுத்திப் புரிந்துகொள்வோம்: + +```js +var y = 24; + +function favFunction() { + var x = 667; + var anotherFavFunction = function () { + console.log(x); // Does not find x inside anotherFavFunction, so looks for variable inside favFunction, outputs 667 + }; + + var yetAnotherFavFunction = function () { + console.log(y); // Does not find y inside yetAnotherFavFunction, so looks for variable inside favFunction and does not find it, so looks for variable in global scope, finds it and outputs 24 + }; + + anotherFavFunction(); + yetAnotherFavFunction(); +} +favFunction(); +``` + +மேலே உள்ள குறியீட்டில் நீங்கள் பார்க்கிறபடி, ஜாவாஸ்கிரிப்ட் இயந்திரம் உள்ளூர் ஸ்கோப்பில் மாறியைக் கண்டுபிடிக்கவில்லை என்றால், அது வெளி ஸ்கோப்பில் (outer scope) மாறியைச் சரிபார்க்க முயற்சிக்கிறது. வெளி ஸ்கோப்பில் மாறி இல்லை என்றால், அது உலகளாவிய ஸ்கோப்பில் (global scope) மாறியைக் கண்டறிய முயற்சிக்கிறது. + +உலகளாவிய இடத்திலும் மாறியைக் காணவில்லை எனில், ஒரு குறிப்புப் பிழை (reference error) எறியப்படும். + +### 2.4. ஜாவாஸ்கிரிப்டில் உயர் வரிசை செயல்பாடுகளை (Higher Order Functions) விளக்குங்கள். + +**பதில்:** +மற்றச் செயல்பாடுகளை வாதங்களாக (arguments) எடுத்துக்கொள்வதன் மூலம் அல்லது அவற்றைத் திருப்பி அனுப்புவதன் மூலம் (returning) செயல்படும் செயல்பாடுகள் _உயர் வரிசை செயல்பாடுகள்_ எனப்படும். + +ஜாவாஸ்கிரிப்டில் செயல்பாடுகள் **முதல்-தரக் குடிமக்களாக (first-class citizens)** இருப்பதன் விளைவாக உயர் வரிசை செயல்பாடுகள் உள்ளன. + +உயர் வரிசை செயல்பாடுகளின் எடுத்துக்காட்டுகள்: + +```js +function higherOrder(fn) { + fn(); +} + +higherOrder(function () { + console.log("Hello world"); +}); +function higherOrder2() { + return function () { + return "Do something"; + }; +} +var x = higherOrder2(); +x(); // Returns "Do something" +``` + +### 2.5. ஜாவாஸ்கிரிப்டில் செல்ஃப் இன்வோக்கிங் ஃபங்ஷன்ஸ் (Self Invoking Functions) என்றால் என்ன? + +**பதில்:** கோரப்படாமல் (Without being requested), சுய-அழைப்பு (self-invoking) கோவை (expression) தானாகவே செயல்படுத்தப்படும் (தொடங்கப்படும்). ஒரு செயல்பாட்டுக் கோவை (function expression) தொடர்ந்து `()` இருந்தால், அது தானாகவே செயல்படுத்தப்படும். செயல்பாட்டு அறிவிப்பை (function declaration) தானாகவே செயல்படுத்த முடியாது. + +பொதுவாக, நாங்கள் ஒரு செயல்பாட்டை அறிவித்து அதை அழைக்கிறோம், இருப்பினும், அநாமதேயச் செயல்பாடுகள் (anonymous functions) ஒரு செயல்பாட்டை விவரிக்கும் போது தானாகவே இயங்குவதற்குப் பயன்படுத்தப்படலாம், மேலும் அவை மீண்டும் அழைக்கப்படாது. மேலும் இந்த வகையான செயல்பாடுகளுக்குப் பெயர் இல்லை. + + +### 2.6. ஜாவாஸ்கிரிப்டில் `exec()` மற்றும் `test()` முறைகளுக்கு (methods) என்ன வித்தியாசம்? + +**பதில்:** பின்வரும் புள்ளிகள் `test()` மற்றும் `exec()` முறைகளுக்கு இடையிலான வேறுபாடுகளைப் பற்றி விவாதிக்கின்றன. + +- `test()` மற்றும் `exec()` ஆகியவை ஜாவாஸ்கிரிப்டில் பயன்படுத்தப்படும் RegExp வெளிப்பாடு முறைகள் (expression methods). + +- ஒரு குறிப்பிட்ட வடிவத்திற்கான (pattern) சரத்தைத் (string) தேட நாங்கள் `exec()` ஐப் பயன்படுத்துவோம், அது அதைக் கண்டால், அது வடிவத்தை நேரடியாகத் திருப்பித் தரும்; இல்லையெனில், அது 'வெற்று (empty)' முடிவைத் தரும். +- குறிப்பிட்ட வடிவத்திற்கான சரத்தைக் கண்டறிய ஒரு `test()` ஐப் பயன்படுத்துவோம். கொடுக்கப்பட்ட உரையைக் கண்டறிந்தால் பூலியன் (Boolean) மதிப்பு `true` எனத் திருப்பித் தரும், இல்லையெனில், அது `false` எனத் திருப்பித் தரும் + +### 2.7. செயல்பாட்டு அறிவிப்பு (Function declaration) மற்றும் செயல்பாட்டுக் கோவை (Function expression) ஆகியவற்றுக்கு இடையேயான வேறுபாடு என்ன? + +**பதில்:** செயல்பாட்டு அறிவிப்பு மற்றும் செயல்பாட்டுக் கோவைக்கு இடையிலான வேறுபாடு பின்வருமாறு: + +**செயல்பாட்டு அறிவிப்பு (Function declaration)**: +
      +
    1. முக்கிய ஜாவாஸ்கிரிப்ட் குறியீட்டிற்குள் தனி அறிக்கையாக (statement) அறிவிக்கப்பட்டது.
      2. +
    2. செயல்பாடு வரையறுக்கப்படுவதற்கு முன்பு அழைக்கப்படலாம்.
      3. +
    3. சிறந்த குறியீடு வாசிப்புத்திறன் (code readability) மற்றும் சிறந்த குறியீடு அமைப்பை (code organization) வழங்குகிறது.
      4. + +
    + +எடுத்துக்காட்டு: + +```js +function abc() { + return 5; +} +``` + + +**செயல்பாட்டுக் கோவை (Function expression)**: +
      +
    1. ஒரு கோவையின் (expression) உள்ளே அல்லது வேறு ஏதேனும் கட்டமைப்பிற்குள் உருவாக்கப்பட்டது.
      2. +
    2. செயலாக்கப் புள்ளி (execution point) அதை அடையும் போது உருவாக்கப்பட்டது; அதன் பிறகு மட்டுமே பயன்படுத்த முடியும்.
      3. +
    3. செயல்பாட்டின் நிபந்தனை அறிவிப்பு (conditional declaration) தேவைப்படும்போது பயன்படுத்தப்படுகிறது.
      4. + +
    + +எடுத்துக்காட்டு: + +```js +var a = function abc() { + return 5; +} +``` + + +### 2.8. ஜாவாஸ்கிரிப்டில் அம்பு செயல்பாடுகள் (arrow functions) என்ன? + +**பதில்**: ஜாவாஸ்கிரிப்டில் செயல்பாடுகளை எழுதுவதற்கு அம்பு செயல்பாடுகள் (arrow functions) ஒரு குறுகிய மற்றும் சுருக்கமான வழியாகும். அம்பு செயல்பாட்டின் பொதுவான தொடரியல் (syntax) கீழே உள்ளபடி: +```js +const helloWorld = () => { + console.log("hello world!"); +}; +``` + +### 2.9. மதிப்பால் கடந்து (Passed by value) மற்றும் குறிப்பால் கடந்து (passed by reference) : + +**பதில்:** +- மதிப்பால் கடந்து (Passed By Values) என்பவை பழமையான தரவு வகைகள் (Primitive Data Types) ஆகும். +பின்வரும் உதாரணத்தைக் கவனியுங்கள்: + +இங்கே, `a=432` என்பது பழமையான தரவு வகையாகும், அதாவது ஆபரேட்டரால் ஒதுக்கப்பட்ட மதிப்பைக் (assigned value) கொண்ட எண் (number) வகை. `var b=a` குறியீடு செயல்படுத்தப்படும்போது, `var a` இன் மதிப்பானது `var b` க்கு நினைவகத்தில் (memory) புதிய இட ஒதுக்கீட்டை வழங்குவதன் மூலம் புதிய முகவரியைத் (address) திருப்பித் தருகிறது, இதனால் 'var b' புதிய இடத்தில் இயக்கப்படும். + +எடுத்துக்காட்டு: +```js +var a = 432; +var b = a; +``` + + +Passed_by_values_new + +- குறிப்புகளால் கடந்து (Passed by References) என்பவை பழமையானவை அல்லாத தரவு வகைகள் (Non-primitive Data Types). + +பின்வரும் உதாரணத்தைக் கவனியுங்கள்: + +1 வது மாறி பொருளின் (variable object) குறிப்பு (reference), அதாவது `var obj`, ஒதுக்கப்பட்ட ஆபரேட்டரின் (assigned operator) உதவியுடன் மற்றொரு மாறியின் இருப்பிடத்தின் வழியாக அனுப்பப்படுகிறது, அதாவது `var obj2`. + +எடுத்துக்காட்டு: +```js +var obj = { name: "Raj", surname: "Sharma" }; +var obj2 = obj; +``` + +# 3. தரவு வகைகள் மற்றும் ஆபரேட்டர் (Data Types and Operator) + +### 3.1. ஜாவாஸ்கிரிப்டில் உள்ள வெவ்வேறு தரவு வகைகள் (data types) யாவை? + +**பதில்:** ஜாவாஸ்கிரிப்டில் உள்ள வெவ்வேறு தரவு வகைகள் பின்வருமாறு: + +1. **பழமையான வகைகள் (Primitive types)** + + - `சரம் (String)` - இது எழுத்துகளின் (characters) தொடரைக் குறிக்கிறது மற்றும் மேற்கோள்களுடன் (quotes) எழுதப்பட்டுள்ளது. ஒற்றை (single) அல்லது இரட்டை (double) மேற்கோளைப் பயன்படுத்தி ஒரு சரத்தைக் குறிப்பிடலாம். + + **எடுத்துக்காட்டு (Example)** : + + ```js + var str = "Vivek Singh Bisht"; //using double quotes + var str2 = "John Doe"; //using single quotes + ``` + + - `எண் (Number)` - இது ஒரு எண்ணைக் குறிக்கிறது மற்றும் தசமங்களுடன் (decimals) அல்லது தசமங்கள் இல்லாமல் எழுதப்படலாம். + + **எடுத்துக்காட்டு (Example)** : + + ```js + var x = 3; //without decimal + var y = 3.6; //with decimal + ``` + + - `BigInt` - Number தரவு வகையின் வரம்பிற்கு (limitation) மேலான எண்களைச் சேமிக்க இந்தத் தரவு வகை பயன்படுத்தப்படுகிறது. இது பெரிய முழு எண்களைச் (large integers) சேமிக்க முடியும் மற்றும் ஒரு முழு எண் லிட்டரலுடன் (integer literal) "n" ஐச் சேர்ப்பதன் மூலம் குறிக்கப்படுகிறது. + + **எடுத்துக்காட்டு (Example)** : + + ```js + var bigInteger = 234567890123456789012345678901234567890; + ``` + + - `பூலியன் (Boolean)` - இது ஒரு தர்க்கரீதியான உட்பொருளைக் (logical entity) குறிக்கிறது மற்றும் இரண்டு மதிப்புகளை மட்டுமே கொண்டிருக்க முடியும்: true அல்லது false. நிபந்தனை சோதனைக்குச் (conditional testing) பூலியன்கள் பொதுவாகப் பயன்படுத்தப்படுகின்றன. + + **எடுத்துக்காட்டு (Example)** : + + ```js + var a = 2; + var b = 3; + var c = 2; + (a == b)( + // returns false + a == c + ); //returns true + ``` + + - `வரையறுக்கப்படாதது (Undefined)` - ஒரு மாறி அறிவிக்கப்பட்டு ஆனால் ஒதுக்கப்படாமல் இருக்கும் போது, அது வரையறுக்கப்படாத (undefined) மதிப்பைக் கொண்டுள்ளது மற்றும் அதன் வகையும் வரையறுக்கப்படவில்லை. + + **எடுத்துக்காட்டு (Example)** : + + ```js + var x; // value of x is undefined + var y = undefined; // we can also set the value of a variable as undefined + ``` + + - `வெற்று (Null)` - இது இல்லாத (non-existent) அல்லது தவறான மதிப்பைக் குறிக்கிறது. + + **எடுத்துக்காட்டு (Example)** : + + ```js + var z = null; + ``` + + - `சின்னம் (Symbol)` - இது ஜாவாஸ்கிரிப்டின் ES6 பதிப்பில் அறிமுகப்படுத்தப்பட்ட ஒரு புதிய தரவு வகையாகும். அநாமதேய (anonymous) மற்றும் தனித்துவமான (unique) மதிப்பைச் சேமிக்க இது பயன்படுகிறது. + + **எடுத்துக்காட்டு:** + + ```js + var symbol1 = Symbol('symbol'); + typeof of primitive types : + typeof "John Doe" // Returns "string" + typeof 3.14 // Returns "number" + typeof true // Returns "boolean" + typeof 234567890123456789012345678901234567890n // Returns bigint + typeof undefined // Returns "undefined" + typeof null // Returns "object" (kind of a bug in JavaScript) + typeof Symbol('symbol') // Returns Symbol 2. Non-primitive types + ``` + +பழமையான தரவு வகைகள் (Primitive data types) ஒற்றை மதிப்பை மட்டுமே சேமிக்க முடியும். பல மற்றும் சிக்கலான மதிப்புகளைச் சேமிக்க, பழமையானவை அல்லாத (non-primitive) தரவு வகைகள் பயன்படுத்தப்படுகின்றன. + +2. **பழமையானவை அல்லாத வகைகள் (Non-Primitive types)** + + - `பொருள் (Object)` - தரவுகளின் தொகுப்பைச் (collection of data) சேமிக்கப் பயன்படுகிறது. + + **எடுத்துக்காட்டு (Example)**: + + ```js + // Collection of data in key-value pairs + var obj1 = { + x: 43, + y: "Hello world!", + z: function () { + return this.x; + }, + }; + ``` + + - `வரிசை (Array)` + + **எடுத்துக்காட்டு:** + + ```js + // Collection of data as an ordered list + + var array1 = [5, "Hello", true, 4.1]; + ``` + +> **குறிப்பு- பழமையான தரவு வகை (primitive data type) அல்லாத எந்தத் தரவு வகையும், ஜாவாஸ்கிரிப்டில் `பொருள் (Object)` வகை என்பதை நினைவில் கொள்வது அவசியம்.** + +### 3.2 `==` மற்றும் `===` ஆபரேட்டர்களுக்கு (operators) இடையிலான வேறுபாடு. + +**பதில்:** +இரண்டும் ஒப்பீட்டு ஆபரேட்டர்கள் (comparison operators). இரண்டு ஆபரேட்டர்களுக்கும் உள்ள வித்தியாசம் என்னவென்றால், `==` என்பது மதிப்புகளை (values) ஒப்பிடப் பயன்படுத்தப்படுகிறது, அதே சமயம் `===` என்பது மதிப்புகள் மற்றும் வகைகள் (types) இரண்டையும் ஒப்பிடப் பயன்படுத்தப்படுகிறது. + +**எடுத்துக்காட்டு**: + +```js +var x = 2; +var y = "2"; +(x == y)( + // Returns true since the value of both x and y is the same + x === y +); // Returns false since the typeof x is "number" and typeof y is "string" +``` + +### 3.3. ஜாவாஸ்கிரிப்டில் NaN பண்பு (property) என்ன? + +**பதில்:** +`NaN` பண்பு “**Not-a-Number (எண் அல்லாதது)**” மதிப்பைக் குறிக்கிறது. இது சட்டப்பூர்வமான எண் அல்லாத மதிப்பைக் (value that is not a legal number) குறிக்கிறது. + +`NaN` இன் `typeof` ஒரு எண்ணைத் (Number) திருப்பித் தரும். + +ஒரு மதிப்பு `NaN` என்பதைச் சரிபார்க்க, நாம் `isNaN()` செயல்பாட்டைப் பயன்படுத்துகிறோம், + +> குறிப்பு- `isNaN()` செயல்பாடு கொடுக்கப்பட்ட மதிப்பை Number வகைக்கு மாற்றுகிறது, பின்னர் NaN க்குச் சமம் (equates) செய்கிறது. + +**எடுத்துக்காட்டு:** + +```js +isNaN("Hello"); // Returns true +isNaN(345); // Returns false +isNaN("1"); // Returns false, since '1' is converted to Number type which results in 0 ( a number) +isNaN(true); // Returns false, since true converted to Number type results in 1 ( a number) +isNaN(false); // Returns false +isNaN(undefined); // Returns true +``` + +### 3.4. ஒரு குறிப்பிட்ட குறியீட்டிலிருந்து (index) ஒரு எழுத்தை (character) மீட்டெடுக்க (retrieve) எந்த முறை (method) பயன்படுத்தப்படுகிறது? + +**பதில்:** +ஜாவாஸ்கிரிப்ட் சரத்தின் (string) `charAt()` செயல்பாடு (function), வழங்கப்பட்ட குறியீட்டில் (index) ஒரு சார் உறுப்பைக் (char element) கண்டறியும். குறியீட்டு எண் `0` இல் தொடங்கி `n-1` வரை தொடர்கிறது, இங்கே `n` என்பது சரத்தின் நீளம் (string length). குறியீட்டு மதிப்பு நேர்மறையாக (positive), அதிகமாக அல்லது சரத்தின் நீளத்திற்குச் சமமாக இருக்க வேண்டும். + +# 4. சில முக்கியமான கருத்துக்கள் (Some important concepts) + +### 4.1. ஜாவாஸ்கிரிப்டில் ஹொயிஸ்டிங் (Hoisting) என்றால் என்ன? + +**பதில்:** +ஹொயிஸ்டிங் என்பது ஒரு ஜாவாஸ்கிரிப்ட் பொறிமுறையாகும் (mechanism), அங்கு மாறிகள் மற்றும் செயல்பாட்டு அறிவிப்புகள் (function declarations) குறியீடு செயல்படுத்துவதற்கு முன்பு அவற்றின் ஸ்கோப்பின் உச்சிக்கு நகர்த்தப்படுகின்றன. தவிர்க்க முடியாமல், செயல்பாடுகள் மற்றும் மாறிகள் எங்கு அறிவிக்கப்பட்டாலும், அவற்றின் ஸ்கோப் உலகளாவியதாக இருந்தாலும் அல்லது உள்ளூர் (global or local) ஆக இருந்தாலும் அவற்றின் ஸ்கோப்பின் உச்சிக்கு அவை நகர்த்தப்படும் என்பதை இது குறிக்கிறது. + +**எடுத்துக்காட்டு 1:** மாறியின் ஹொயிஸ்டிங் (Hoisting of variable) + + ```js +hoistedVariable = 3; +console.log(hoistedVariable); // outputs 3 even when the variable is declared after it is initialized +var hoistedVariable; +``` + +**எடுத்துக்காட்டு 2:** செயல்பாட்டின் ஹொயிஸ்டிங் (Hoisting of function) +```js +hoistedFunction(); // Outputs " Hello world! " even when the function is declared after calling + +function hoistedFunction(){ + console.log(" Hello world! "); +} +``` +**எடுத்துக்காட்டு 3:** செயல்பாட்டுக் கோவையின் ஹொயிஸ்டிங் (Hoisting of function expression) +```js +// Hoisting takes place in the local scope as well +function doSomething(){ + x = 33; + console.log(x); + var x; +} +doSomething(); // Outputs 33 since the local variable “x” is hoisted inside the local scope + +/* Note - Variable initializations are not hoisted, only variable declarations are hoisted: */ +var x; +console.log(x); // Outputs "undefined" since the initialization of "x" is not hoisted +x = 23; + +/* Note - To avoid hoisting, you can run javascript in strict mode by using “use strict” on top of the code: */ +"use strict"; +x = 23; // Gives an error since 'x' is not declared +var x; +``` +### 4.2. ஜாவாஸ்கிரிப்டில் "பிழைத்திருத்தி (debugger)" என்ற வார்த்தையை நாம் ஏன் பயன்படுத்துகிறோம்? + +**பதில்:** குறியீட்டில் பிரேக் பாயிண்டுகளை (breakpoints) உருவாக்க `debugger` முக்கியச் சொல் பயன்படுத்தப்படுகிறது. குறியீட்டில் உள்ள பிழைத்திருத்தி (debugger) முக்கியச்சொல்லை (keyword) உலாவி (browser) கண்டால், அது குறியீட்டைச் செயல்படுத்துவதை நிறுத்தி, உலாவியின் பிழைத்திருத்தக் கருவியைத் (debugging tool) திறக்கும். + +### 4.3. ஜாவாஸ்கிரிப்டில் கரியிங் (currying) என்றால் என்ன? + +**பதில்:** கரியிங் என்பது `n` வாதங்களின் (arguments) செயல்பாட்டை (function) ஒன்று அல்லது குறைவான வாதங்களின் `n` செயல்பாடுகளாக மாற்றுவதற்கான மேம்பட்ட நுட்பமாகும். + +*கரியிங் செய்யப்பட்ட செயல்பாட்டின் எடுத்துக்காட்டு (Example of a curried function):* +``` js +function add (a) { + return function(b){ + return a + b; + } +} + +add(3)(4) +``` +எடுத்துக்காட்டாக, எங்களிடம் ஒரு செயல்பாடு `f(a,b)` இருந்தால், கரியிங் செய்த பிறகு உள்ள செயல்பாடு `f(a)(b)` என மாற்றப்படும். + +கரியிங் நுட்பத்தைப் பயன்படுத்துவதன் மூலம், ஒரு செயல்பாட்டின் செயல்பாட்டை (functionality) நாங்கள் மாற்றுவதில்லை, அது எவ்வாறு செயல்படுத்தப்படுகிறது (invoked) என்பதை மட்டுமே மாற்றுகிறோம். + +செயலில் உள்ள கரியிங்கைப் (currying) பார்ப்போம்: + +``` js +function multiply(a,b){ + return a*b; +} + +function currying(fn){ + return function(a){ + return function(b){ + return fn(a,b); + } + } +} + +var curriedMultiply = currying(multiply); + +multiply(4, 3); // Returns 12 + +curriedMultiply(4)(3); // Also returns 12 +``` + + +மேலே உள்ள குறியீட்டில் ஒருவர் பார்க்கிறபடி, நாங்கள் `function multiply(a,b)` ஐ `curriedMultiply` என்ற செயல்பாட்டிற்கு மாற்றியுள்ளோம், இது ஒரு நேரத்தில் ஒரு அளவுருவை (parameter) எடுக்கும். + +### 4.4. வெளிப்புற ஜாவாஸ்கிரிப்டைப் (External JavaScript) பயன்படுத்துவதன் சில நன்மைகள் என்ன? + +**பதில்:** எக்ஸ்டர்னல் ஜாவாஸ்கிரிப்ட் (External JavaScript) என்பது ஜாவாஸ்கிரிப்ட் குறியீடு (ஸ்கிரிப்ட்) `extension.js` உடன் தனி கோப்பில் எழுதப்பட்டுள்ளது, பின்னர் குறியீடு வைக்கப்பட வேண்டிய HTML கோப்பின் `` அல்லது `` உறுப்புக்குள் அந்தக் கோப்பை இணைக்கிறோம். + +வெளிப்புற ஜாவாஸ்கிரிப்டின் (external javascript) சில நன்மைகள்: + +- இது வலை வடிவமைப்பாளர்கள் (web designers) மற்றும் டெவலப்பர்களை HTML மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளில் ஒத்துழைக்க அனுமதிக்கிறது. +- நாம் குறியீட்டை மீண்டும் பயன்படுத்தலாம். +- வெளிப்புற ஜாவாஸ்கிரிப்டில் குறியீடு வாசிப்புத்திறன் (Code readability) எளிமையானது. + +### 4.5. ஜாவாஸ்கிரிப்டில் க்ளோஷர் (closure) என்றால் என்ன? + +**பதில்:** க்ளோஷர் (closure) என்பது வெளிப்புறச் செயல்பாடு திரும்பிய பிறகும் அதன் வெளிப்புறச் செயல்பாட்டு ஸ்கோப்பிற்கான (outer function scope) அணுகலைக் கொண்ட ஒரு செயல்பாடாகும். இதன் பொருள் ஒரு க்ளோஷர் அதன் வெளிப்புறச் செயல்பாட்டின் மாறிகள் (variables) மற்றும் வாதங்களை (arguments) செயல்பாடு முடிந்த பின்னரும் நினைவில் வைத்து அணுக முடியும். + +சுருக்கமாக- க்ளோஷர் என்பது அதன் வெளிப்புற (இணைக்கும்) செயல்பாட்டு ஸ்கோப்பிலிருந்து மாறிகளுக்கான அணுகலைக் கொண்ட ஒரு செயல்பாடாகும், வெளிப்புறச் செயல்பாடு செயல்படுத்துவதை முடித்த பிறகும். + +### 4.6. ஜாவாஸ்கிரிப்டில் DOM என்றால் என்ன? + +**பதில்:** ஆவணப் பொருள் மாதிரி (Document Object Model - DOM) என்பது HTML மற்றும் XML ஆவணங்களுக்கான நிரலாக்க இடைமுகமாகும் (programming interface). இது பக்கத்தைக் குறிக்கிறது, இதனால் நிரல்கள் ஆவணத்தின் அமைப்பு, நடை மற்றும் உள்ளடக்கத்தை மாற்ற முடியும். DOM ஆனது ஆவணத்தை முனைகள் (nodes) மற்றும் பொருள்களாகக் (objects) குறிக்கிறது. இதன் மூலம், நிரலாக்க மொழிகள் பக்கத்துடன் இணைக்க முடியும். + +### 4.7. நிகழ்வு பிரதிநிதித்துவம் (event delegation) என்றால் என்ன? + +**பதில்:** நிகழ்வு பிரதிநிதித்துவம் (Event delegation) என்பது நிகழ்வுகளைக் (events) கேட்பதற்கான (listening) ஒரு நுட்பமாகும், அங்கு ஒரு பெற்றோர் உறுப்பை (parent element) உள்ளே நடக்கும் அனைத்து நிகழ்வுகளுக்கும் கேட்பவராக (listener) நியமிக்கிறீர்கள். நிகழ்வுகள் பெற்றோர் உறுப்பின் கால்பேக் (callback) செயல்பாட்டின் மூலம் கையாளப்படுகின்றன. + +### 4.8. ஜாவாஸ்கிரிப்டில் AJAX கோரிக்கையை (AJAX request) எவ்வாறு செய்யலாம்? + +**பதில்:** [AJAX](../miscellaneous/api-ajax.md) என்பது Asynchronous JavaScript and XML ஐக் குறிக்கிறது. ஒத்திசைவற்ற (asynchronous) வலைப் பயன்பாடுகளை உருவாக்க கிளையன்ட் பக்கத்தில் (client-side) பல வலைத் தொழில்நுட்பங்களைப் பயன்படுத்தும் வலை மேம்பாட்டு நுட்பங்களின் (web development techniques) தொகுப்பாகும். AJAX உடன், இணையப் பயன்பாடுகள் தற்போதுள்ள பக்கத்தின் காட்சி மற்றும் நடத்தையில் தலையிடாமல் ஒத்திசைவின்றி (asynchronously) (பின்னணியில் - in the background) தரவை அனுப்பவும் மீட்டெடுக்கவும் முடியும். + +XMLHttpRequest பொருளைப் பயன்படுத்தி அல்லது fetch API ஐப் பயன்படுத்தி நீங்கள் AJAX கோரிக்கைகளை (requests) செய்யலாம். ஃபெட்ச் (fetch) பயன்படுத்தும் ஒரு எடுத்துக்காட்டு இங்கே: + +```js + fetch('https://example.com/api/data') + .then(response => response.json()) + .then(data => console.log(data)) + .catch(error => console.error(error)); +``` +### 4.9. ஜாவாஸ்கிரிப்டில் ஒரு பிராமிஸ் (promise) என்றால் என்ன? + +**பதில்:** ஒரு பிராமிஸ் என்பது எதிர்காலத்தில் ஒரு மதிப்பை (single value) உருவாக்கக்கூடிய ஒரு பொருளாகும்: ஒரு தீர்க்கப்பட்ட மதிப்பு (resolved value) அல்லது அது தீர்க்கப்படாததற்கான காரணம் (எ.கா., நெட்வொர்க் பிழை ஏற்பட்டது). ஒரு பிராமிஸ் 3 சாத்தியமான நிலைகளில் ஒன்றில் இருக்கலாம்: `நிறைவேற்றப்பட்டது (fulfilled)`, `நிராகரிக்கப்பட்டது (rejected)`, அல்லது `நிலுவையில் உள்ளது (pending)`. நிறைவேற்றப்பட்ட மதிப்பை அல்லது நிராகரிப்பதற்கான காரணத்தைக் கையாள, பிராமிஸ் பயனர்கள் கால்பேக்குகளை (callbacks) இணைக்கலாம். + +### 4.10. ஜாவாஸ்கிரிப்டில் உங்களுக்கு ஏன் ஒரு பிராமிஸ் (promise) தேவை? + +**பதில்:** ஒத்திசைவற்ற செயல்பாடுகளைக் (asynchronous operations) கையாளப் பிராமிஸ்கள் பயன்படுத்தப்படுகின்றன. அவை கால்பேக் நரகத்தைக் (callback hell) குறைப்பதன் மூலமும் தூய்மையான குறியீட்டை எழுதுவதன் மூலமும் கால்பேக்குகளுக்கு மாற்று அணுகுமுறையை (alternative approach) வழங்குகின்றன. + +### 4.11. ஜாவாஸ்கிரிப்டில் சமத்துவத்தை (equality) விளக்குக? + +**பதில்:** ஜாவாஸ்கிரிப்ட் இரண்டு வகையான சமத்துவ ஆபரேட்டர்களை (equality operators) வழங்குகிறது: கண்டிப்பான சமத்துவம் (strict equality) `(===)` மற்றும் தளர்வான சமத்துவம் (loose equality) `(==)` + +- கண்டிப்பான சமத்துவம் (Strict Equality) `(===)`: எந்த வகை மாற்றமும் (type conversion) செய்யாமல் இந்த ஆபரேட்டர் இரண்டு மதிப்புகளை ஒப்பிடுகிறது. மதிப்புகள் வெவ்வேறு வகைகளைக் கொண்டிருந்தால் (different types), அவை சமமற்றவையாகக் கருதப்படும். மதிப்புகள் ஒரே வகையைக் கொண்டிருந்தால், அவை எண்கள் அல்ல, ஒரே மதிப்பைக் கொண்டிருந்தால், அவை சமமாகக் கருதப்படும். எண்களுக்கு, இரண்டும் NaN ஆக இல்லாமல் ஒரே மதிப்பைக் கொண்டிருந்தாலோ அல்லது ஒன்று `+0` மற்றும் மற்றொன்று `-0` ஆக இருந்தாலோ அவை சமமாகக் கருதப்படும். + +- தளர்வான சமத்துவம் (Loose Equality) `(==)`: செயல்பாடுகளை (operands) ஒப்பிடும்போது இந்த ஆபரேட்டர் வகை மாற்றத்தைச் (type conversion) செய்கிறது. செயல்பாடுகள் (operands) ஒரே வகையாக இருந்தால், கண்டிப்பான சமத்துவ ஆபரேட்டரைப் (strict equality operator) போலவே அவை ஒப்பிடப்படும். செயல்பாடுகள் வெவ்வேறு வகைகளைக் கொண்டிருந்தால், ஜாவாஸ்கிரிப்ட் அவற்றை ஒரு பொதுவான வகையாக மாற்ற முயற்சிக்கிறது, பின்னர் அவற்றை ஒப்பிடுகிறது. வகை மாற்றத்திற்கான (type conversion) விதிகள் சில நேரங்களில் எதிர்பாராத முடிவுகளுக்கு வழிவகுக்கும், எனவே சாத்தியமான சிக்கல்களைத் தவிர்க்கக் கண்டிப்பான சமத்துவ ஆபரேட்டரைப் (strict equality operator) பயன்படுத்தப் பொதுவாகப் பரிந்துரைக்கப்படுகிறது + + +## 5. பொருள் (Object) + +### 5.1. ஜாவாஸ்கிரிப்டில் பொருட்களை உருவாக்க சாத்தியமான வழிகள் என்ன? + + +**பதில்:** கீழே உள்ளதைப் போல ஜாவாஸ்கிரிப்டில் ஆப்ஜெக்ட்களை (objects) உருவாக்கப் பல வழிகள் உள்ளன + +ஆப்ஜெக்ட் கன்ஸ்ட்ரக்டர் (Object constructor): + +i. ஒரு வெற்றுப் பொருளை (empty object) உருவாக்குவதற்கான எளிய வழி Object constructor ஐப் பயன்படுத்துவதாகும். தற்போது இந்த அணுகுமுறை பரிந்துரைக்கப்படவில்லை. +``` js +var object = new Object(); +``` +Object() என்பது ஒரு உள்ளமைக்கப்பட்ட கன்ஸ்ட்ரக்டர் செயல்பாடு (built-in constructor function), எனவே "new" முக்கியச் சொல் தேவையில்லை. மேலே உள்ளதை இவ்வாறு எழுதலாம்: +``` js +var object = Object(); +``` +ii. ஆப்ஜெக்ட்டின் (Object's) உருவாக்க முறை (create method): + +ஒரு Object இன் `create` முறையானது, முன்மாதிரிப் பொருளை (prototype object) அளவுருவாக (parameter) கடந்து (passing) புதிய பொருளை உருவாக்குகிறது. + +```js +var object = Object.create(null); +``` +iii. ஆப்ஜெக்ட் லிட்டரல் தொடரியல் (Object literal syntax): + + +ஆப்ஜெக்ட் லிட்டரல் தொடரியல் (அல்லது ஆப்ஜெக்ட் இனிஷியலைசர் - object initializer), சுருள் அடைப்புக்குறிக்குள் (curly braces) சுற்றப்பட்ட பெயர்-மதிப்பு ஜோடிகளின் (name-value pairs) கமாவால் பிரிக்கப்பட்ட தொகுப்பாகும் (comma-separated set). + +```js +var object = { + name: "Sudheer", + age: 34 +}; + +Object literal property values can be of any data type, including array, function, and nested object. +``` +குறிப்பு: ஆப்ஜெக்ட்டை உருவாக்க இது எளிதான வழியாகும் + +iv. கன்ஸ்ட்ரக்டர் செயல்பாடு (Function constructor): + +பொருள் நிகழ்வுகளை (object instances) உருவாக்க எந்தச் செயல்பாட்டையும் உருவாக்கி, `new` ஆபரேட்டரைப் பயன்படுத்தவும், + +```js +function Person(name) { + this.name = name; + this.age = 21; +} +var object = new Person("Sudheer"); +``` +v. முன்மாதிரியுடன் கன்ஸ்ட்ரக்டர் செயல்பாடு (Function constructor with prototype): + +இது கன்ஸ்ட்ரக்டர் செயல்பாட்டைப் போன்றது ஆனால் அவற்றின் பண்புகள் மற்றும் முறைகளுக்கு முன்மாதிரியைப் (prototype) பயன்படுத்துகிறது, +```js +function Person() {} +Person.prototype.name = "Sudheer"; +var object = new Person(); +``` +இது ஒரு செயல்பாட்டு முன்மாதிரியுடன் (function prototype) `object create` முறையுடன் உருவாக்கப்பட்ட ஒரு நிகழ்வுக்குச் (instance) சமமானதாகும், பின்னர் அந்தச் செயல்பாட்டை ஒரு நிகழ்வு மற்றும் அளவுருக்களை (parameters) வாதங்களாக (arguments) கொண்டு அழைக்கவும். +```js +function func() {} + +new func(x, y, z); +``` +(அல்லது - OR) +```js +// Create a new instance using function prototype. +var newInstance = Object.create(func.prototype) + +// Call the function +var result = func.call(newInstance, x, y, z), + +// If the result is a non-null object then use it otherwise just use the new instance. +console.log(result && typeof result === 'object' ? result : newInstance); +``` +vi. ES6 வகுப்புத் தொடரியல் (ES6 Class syntax): + +ஆப்ஜெக்ட்களை உருவாக்க ES6 `class` அம்சத்தை அறிமுகப்படுத்துகிறது +```js +class Person { + constructor(name) { + this.name = name; + } +} + +var object = new Person("Sudheer"); +``` + + +## 6. பலவகைப்பட்ட (Miscellaneous) + +### 6.1. ஜாவாஸ்கிரிப்டில் ஸ்ட்ரிக்ட் மோட் (strict mode) என்றால் என்ன? + +**பதில்:** ஸ்ட்ரிக்ட் மோட் (Strict Mode) என்பது ECMAScript 5 இல் உள்ள ஒரு புதிய அம்சமாகும், இது ஒரு நிரல் அல்லது ஒரு செயல்பாட்டை "ஸ்ட்ரிக்ட் (strict)" இயக்கச் சூழலில் வைக்க உங்களை அனுமதிக்கிறது. இந்த வழியில் இது சில நடவடிக்கைகள் எடுக்கப்படுவதைத் தடுக்கிறது மற்றும் கூடுதல் விதிவிலக்குகளை (exceptions) வீசுகிறது. லிட்டரல் எக்ஸ்பிரஷன் (literal expression) "use strict"; ஸ்ட்ரிக்ட் மோடில் (Strict mode) ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பயன்படுத்த உலாவிக்கு அறிவுறுத்துகிறது. + +### 6.2. ஜாவாஸ்கிரிப்டில் நல் மதிப்பு (null value) என்றால் என்ன? + +**பதில்:** `null` மதிப்பானது எந்தவொரு பொருளின் மதிப்பும் உள்நோக்கத்துடன் இல்லாததைக் குறிக்கிறது. இது ஜாவாஸ்கிரிப்ட்டின் பழமையான மதிப்புகளில் (primitive values) ஒன்றாகும். நல் மதிப்பின் (null value) வகை பொருள் (object) ஆகும். மதிப்பை null என அமைப்பதன் மூலம் நீங்கள் மாறியை காலியாக்கலாம். + +```js +var user = null; +console.log(typeof user); //object +``` + +### 6.3. ஜாவாஸ்கிரிப்டில் `eval` என்றால் என்ன? + +**பதில்:** `eval()` செயல்பாடு சரமாகக் (string) குறிக்கப்படும் ஜாவாஸ்கிரிப்ட் குறியீட்டை மதிப்பிடுகிறது. சரமானது ஜாவாஸ்கிரிப்ட் கோவை (expression), மாறி (variable), அறிக்கை (statement) அல்லது அறிக்கைகளின் வரிசையாக இருக்கலாம். + +```js +console.log(eval("1 + 2")); // 3 +``` + +### 6.4. ஜாவாஸ்கிரிப்ட் தொகுக்கப்பட்ட (compiled) அல்லது விளக்கப்பட்ட (interpreted) மொழியா? + +**பதில்:** ஜாவாஸ்கிரிப்ட் ஒரு விளக்கப்பட்ட மொழி (interpreted language), தொகுக்கப்பட்ட மொழி (compiled language) அல்ல. உலாவியில் உள்ள ஒரு மொழிபெயர்ப்பாளர் (interpreter) ஜாவாஸ்கிரிப்ட் குறியீட்டைப் படித்து, ஒவ்வொரு வரியையும் விளக்கி, அதை இயக்குகிறார். இப்போதெல்லாம் நவீன உலாவிகள் Just-In-Time (JIT) Compilation எனப்படும் தொழில்நுட்பத்தைப் பயன்படுத்துகின்றன, இது ஜாவாஸ்கிரிப்டை இயங்கும் போது இயங்கக்கூடிய பைட்குறியீட்டில் (executable bytecode) தொகுக்கிறது. + +### 6.5. `exec()` மற்றும் `test()` முறைகளுக்கு (methods) இடையிலான வேறுபாடு + +**பதில்** `exec()` மற்றும் `test()` முறைகளுக்கு இடையிலான வேறுபாடுகள் பின்வருமாறு: + +`exec()`: +1) இது ஜாவாஸ்கிரிப்டில் உள்ள ஒரு எக்ஸ்பிரஷன் முறையாகும் (expression method), இது குறிப்பிட்ட வடிவமைப்புடன் (pattern) சரத்தைத் (string) தேடப் பயன்படுகிறது. +2) அது கண்டுபிடிக்கப்பட்டதும், வடிவமைப்பு நேரடியாகத் திருப்பியளிக்கப்படும், இல்லையெனில், அது ஒரு "வெற்று (empty)" முடிவைத் தரும். + +`test()`: +1) இது ஜாவாஸ்கிரிப்டில் உள்ள ஒரு எக்ஸ்பிரஷன் முறையாகும், இது ஒரு குறிப்பிட்ட வடிவமைப்பு (pattern) அல்லது உரையுடன் (text) ஒரு சரத்தைத் தேடப் பயன்படுகிறது. +2) அது கண்டறியப்பட்டதும், வடிவமைப்பு பூலியன் மதிப்பை `true` எனத் திருப்பியளிக்கும், இல்லையெனில் `false` எனத் திருப்பியளிக்கும். + +### 6.6. ஜாவாஸ்கிரிப்ட் கேஸ் சென்சிட்டிவ் மொழியா (case-sensitive language) ? + +**பதில்:** ஆம், ஜாவாஸ்கிரிப்ட் ஒரு கேஸ் சென்சிட்டிவ் (case sensitive) மொழியாகும். மொழி முக்கியச் சொற்கள் (keywords), மாறிகள் (variables), செயல்பாடு & பொருள் பெயர்கள் (function & object names) மற்றும் வேறு ஏதேனும் அடையாளங்காட்டிகள் (identifiers) எப்பொழுதும் சீரான பெரிய எழுத்துக்களுடன் (consistent capitalization) தட்டச்சு செய்யப்பட வேண்டும். + +## 7. JSON + +### 7.1. JSON என்றால் என்ன? + +**பதில்:** JSON (JavaScript Object Notation) என்பது தரவுப் பரிமாற்றத்திற்குப் (data interchanging) பயன்படுத்தப்படும் இலகுரக வடிவமாகும் (lightweight format). ஜாவாஸ்கிரிப்டில் பொருள்கள் (objects) கட்டமைக்கப்படும் விதத்தில் இது ஜாவாஸ்கிரிப்ட் மொழியின் துணைக்குழுவை (subset) அடிப்படையாகக் கொண்டது. + +### 7.2. JSON இன் தொடரியல் விதிகள் (syntax rules) யாவை? + +**பதில்:** கீழே JSON இன் தொடரியல் விதிகளின் பட்டியல் உள்ளது + +* தரவு பெயர்/மதிப்பு ஜோடிகளில் (name/value pairs) உள்ளது +* தரவு கமாக்களால் (commas) பிரிக்கப்படுகிறது +* சுருள் அடைப்புக்குறிகள் (Curly braces) பொருட்களைப் (objects) பிடித்துக் கொள்கின்றன +* சதுர அடைப்புக்குறிகள் (Square brackets) வரிசைகளைப் (arrays) பிடித்துக் கொள்கின்றன + +### 7.3. JSON ஸ்ட்ரிங்ஃபையின் (stringify) நோக்கம் என்ன? + +**பதில்:** ஒரு இணையச் சேவையகத்திற்குத் (web server) தரவை அனுப்பும் போது, தரவு சரம் (string) வடிவத்தில் இருக்க வேண்டும். JSON பொருளை `stringify()` முறையைப் பயன்படுத்திச் சரமாக (string) மாற்றுவதன் மூலம் இதை அடையலாம். + +```js +var userJSON = { name: "John", age: 31 }; +var userString = JSON.stringify(userJSON); +console.log(userString); //"{"name":"John","age":31}" +``` + +### 7.4. நீங்கள் JSON சரத்தை (string) எவ்வாறு பாகுபடுத்துகிறீர்கள் (parse)? + +**பதில்:** இணையச் சேவையகத்திலிருந்து தரவைப் பெறும்போது, தரவு எப்போதும் சரம் (string) வடிவத்தில் இருக்கும். ஆனால் `parse()` முறையைப் பயன்படுத்தி இந்தச் சரம் மதிப்பை ஜாவாஸ்கிரிப்ட் பொருளாக (javascript object) மாற்றலாம். + +```js +var userString = '{"name":"John","age":31}'; +var userJSON = JSON.parse(userString); +console.log(userJSON); // {name: "John", age: 31} +``` + +### 7.5. உங்களுக்கு ஏன் JSON தேவை? + +**பதில்:** உலாவிக்கும் (browser) சேவையகத்திற்கும் (server) இடையே தரவைப் பரிமாறிக் கொள்ளும்போது, தரவு உரையாக (text) மட்டுமே இருக்க முடியும். JSON என்பது உரை மட்டுமே என்பதால், அதை எளிதாகச் சேவையகத்திற்கு (server) அனுப்பலாம், மேலும் எந்த நிரலாக்க மொழியாலும் தரவு வடிவமாகப் (data format) பயன்படுத்தலாம். + +### 7.6. JSON வரிசைகளை (arrays) எப்படி வரையறுக்கிறீர்கள்? + +**பதில்:** JSON வரிசைகள் சதுர அடைப்புக்குறிக்குள் (square brackets) எழுதப்பட்டுள்ளன மற்றும் வரிசைகள் ஜாவாஸ்கிரிப்ட் பொருள்களைக் (javascript objects) கொண்டுள்ளன. எடுத்துக்காட்டாக, பயனர்களின் JSON வரிசை கீழே இருக்கும், + +```js +"users":[ + {"firstName":"John", "lastName":"Abrahm"}, + {"firstName":"Anna", "lastName":"Smith"}, + {"firstName":"Shane", "lastName":"Warn"} +] +``` + +### 7.6. JSON இல், சதுர அடைப்புக்குறிகளின் (square brackets) நோக்கம் என்ன, அவை எவ்வாறு பயன்படுத்தப்படுகின்றன? + +**பதில்:** JSON இல், சதுர அடைப்புக்குறிகள் `[ ]` ஆனது JSON தரவுக் கட்டமைப்பிற்குள் (data structures) வரிசைகளை (arrays) இணைக்கவும் (encapsulate) வரையறுக்கவும் பயன்படுத்தப்படுகின்றன. JSON வரிசைகள் (arrays) மதிப்புகளின் தொகுப்பைக் கொண்டிருக்கலாம், அவை பொருள்கள் (objects), சரங்கள் (strings), எண்கள் (numbers) மற்றும் பிற JSON வரிசைகள் உட்படப் பல்வேறு தரவு வகைகளாக இருக்கலாம். diff --git a/ta/interview-questions/intermediate-level.md b/ta/interview-questions/intermediate-level.md new file mode 100644 index 00000000..3359803b --- /dev/null +++ b/ta/interview-questions/intermediate-level.md @@ -0,0 +1,441 @@ +--- +layout: editorial +title: Intermediate level JavaScript Interview Questions +description: +chapter: 22 +pageNumber: 175 +--- + +# இடைநிலை நிலை ஜாவாஸ்கிரிப்ட் நேர்காணல் கேள்விகள் (Intermediate Level JavaScript Interview Questions) +## 1. சுழல்கள் (Loops) +### 1.1. ஜாவாஸ்கிரிப்ட் சுழலில் ஒரு மறு செய்கையின் (iteration) வரையறை என்ன? + +**பதில்:** ஜாவாஸ்கிரிப்ட் சுழலில் ஒரு மறு செய்கை (iteration) என்பது சுழலின் உடலின் ஒவ்வொரு தனிப்பட்ட செயலாக்கத்தையும் குறிக்கிறது, பொதுவாகச் சுழலின் ஒரு சுழற்சியுடன் (cycle) ஒத்துள்ளது. + +### 1.2. ஜாவாஸ்கிரிப்டில் உள்ள அனைத்து லூப்பிங் கட்டமைப்புகளும் (looping structures) என்ன? + +**பதில்:** ஜாவாஸ்கிரிப்டில் பல்வேறு லூப்பிங் கட்டமைப்புகள் பயன்படுத்தப்படுகின்றன. அவற்றில் சில பின்வருமாறு: + +**While சுழல் (While loop)**: [while](../loops/while.md) சுழல் என்பது கட்டுப்பாடு ஓட்ட அறிக்கையாகும் (control flow statement), இது கொடுக்கப்பட்ட பூலியன் நிபந்தனையின் (Boolean condition) அடிப்படையில் குறியீட்டை மீண்டும் மீண்டும் செயல்படுத்த அனுமதிக்கிறது. `while` சுழலை மீண்டும் மீண்டும் `if` அறிக்கையாகக் கருதலாம். + +**For சுழல் (For loop)**: [for](../loops/for.md) சுழல் லூப் அமைப்பை (loop structure) எழுதுவதற்கான சுருக்கமான வழியை வழங்குகிறது. `while` சுழல் போலல்லாமல், `for` அறிக்கையானது தொடக்கமாக்கல் (initialization), நிபந்தனை மற்றும் அதிகரிப்பு/குறைவு (increment/decrement) ஆகியவற்றை ஒரே வரியில் பயன்படுத்துகிறது, இதன் மூலம் குறியீட்டைச் சுருக்கமாகவும் எளிதாகவும் பிழைத்திருத்தவும் (debug) வழங்குகிறது. + +**Do while**: [do-while](../loops/dowhile.md) சுழல் என்பது `while` சுழலைப் போன்றது, அறிக்கைகளைச் செயல்படுத்திய பிறகு நிபந்தனையைச் சரிபார்க்கிறது என்பதே ஒரே வித்தியாசம், எனவே இது வெளியேறும் கட்டுப்பாட்டுச் சுழலுக்கு (Exit Control Loop) ஒரு எடுத்துக்காட்டு ஆகும். + +### 1.3. சுழலில் `break` அறிக்கை (statement) எவ்வாறு செயல்படுகிறது? + +**பதில்:** பிரேக் அறிக்கை (break statement) தற்போதைய சுழல் அல்லது சுவிட்ச் (switch) அறிக்கையை நிறுத்துகிறது மற்றும் நிறுத்தப்பட்ட அறிக்கையைத் தொடர்ந்து வரும் அறிக்கைக்கு நிரல் கட்டுப்பாட்டை (program control) மாற்றுகிறது. லேபிளிடப்பட்ட அறிக்கைக்குள் (labeled statement) பயன்படுத்தப்படும் போது லேபிளிடப்பட்ட அறிக்கையைக் கடந்தும் இது பயன்படுத்தப்படலாம். + +### 1.4. சுழலில் `continue` அறிக்கை எவ்வாறு செயல்படுகிறது? + +**பதில்:** `continue` உத்தரவு (directive) என்பது `break` அறிக்கையின் "இலகுவான பதிப்பு (lighter version)" ஆகும். இது முழுச் சுழலையும் (loop) நிறுத்தாது; அதற்குப் பதிலாக, இது தற்போதைய மறு செய்கையை (iteration) நிறுத்தி, சுழலை புதியதைத் தொடங்கும்படி கட்டாயப்படுத்துகிறது (நிபந்தனை அனுமதித்தால்). + +## 2. சுவிட்ச் அறிக்கை (Switch statement) + +### 2.1. ஜாவாஸ்கிரிப்டில் சுவிட்ச் (switch) அறிக்கை என்றால் என்ன? + +**பதில்:** ஜாவாஸ்கிரிப்டில் ஒரு சுவிட்ச் (switch) அறிக்கை என்பது ஒரு கட்டுப்பாட்டு ஓட்ட அறிக்கை (control flow statement) ஆகும், இது ஒரு கோவையை (expression) மதிப்பிடுகிறது மற்றும் பொருந்திய வழக்கின் (matched case) அடிப்படையில் குறியீட்டின் குறிப்பிட்ட தொகுதியை (block) செயல்படுத்துகிறது. + +### 2.2. சுவிட்ச் அறிக்கையைப் பயன்படுத்துவதன் நன்மைகள் என்ன? + +**பதில்:** [switch](../conditional/switch.md) அறிக்கை பல காசோலைகளை (checks) மாற்றும், மேலும் இது மிகவும் விளக்கமான மற்றும் படிக்க எளிதானது. சுவிட்ச் அறிக்கைகள் குறியீடு வாசிப்புத்திறனை (code readability) மேம்படுத்துகின்றன, சிறந்த செயல்திறனை (performance) வழங்குகின்றன, சிக்கலான நிபந்தனைகளை (complex conditionals) எளிதாக்குகின்றன, பராமரிப்பை (maintainability) மேம்படுத்துகின்றன மற்றும் சுத்தமான தொடரியல் (cleaner syntax) ஆதரிக்கின்றன. + +### 2.3. சுவிட்ச் அறிக்கையில் கேஸ் (case) அறிக்கைகளின் வரிசை முக்கியமானதா? + +**பதில்:** சுவிட்ச் (switch) அறிக்கையில் கேஸ் (case) அறிக்கைகளின் வரிசை முக்கியமானது, குறிப்பாக வீழ்ச்சி நடத்தை (fall-through behavior) பயன்படுத்தும் போது. வழக்குகள் (Cases) தொடர்ச்சியாக மதிப்பிடப்படுகின்றன (sequentially), எனவே முன்னதாகக் கண்டறியப்பட்ட பொருந்தக்கூடிய வழக்கு (matching case), அடுத்தடுத்த வழக்குகள் சோதிக்கப்படுவதைத் தடுக்கும், இது செயல்பாட்டையும் செயல்திறனையும் பாதிக்கும். + +## 3. ஜாவாஸ்கிரிப்ட் குக்கீகள் (JavaScript cookies) + +### 3.1. ஜாவாஸ்கிரிப்ட் குக்கீகள் என்றால் என்ன? + +**பதில்:** [குக்கீகள் (Cookies)](../browser-object-model-bom/cookies.md) என்பவை பயனரின் கணினியில் சேமிக்கப்படும் சிறிய கோப்புகள். ஒரு குறிப்பிட்ட கிளையன்ட் (client) மற்றும் இணையதளத்திற்கு (website) குறிப்பிட்ட அளவிலான தரவை வைத்திருக்க அவை பயன்படுத்தப்படுகின்றன மற்றும் வலைச் சேவையகம் (web server) அல்லது வாடிக்கையாளரின் கணினி (client’s computer) மூலம் அணுகலாம். குக்கீகள் கண்டுபிடிக்கப்பட்டபோது, அவை அடிப்படையில் உங்களைப் பற்றியும் உங்கள் விருப்பங்களைப் பற்றியும் (preferences) தகவல்களைக் கொண்ட சிறிய ஆவணங்களாகும். எடுத்துக்காட்டாக, உங்கள் வலைத்தளத்தைப் பார்க்க விரும்பும் மொழியை நீங்கள் தேர்ந்தெடுக்கும்போது, இணையதளம் உங்கள் கணினியில் உள்ள குக்கீ (cookie) எனப்படும் ஆவணத்தில் தகவலைச் சேமிக்கும், அடுத்த முறை நீங்கள் இணையதளத்திற்குச் செல்லும்போது, அதைப் படிக்க முடியும். முன்னதாகவே சேமிக்கப்பட்ட குக்கீ. + +### 3.2. ஜாவாஸ்கிரிப்ட் பயன்படுத்தி குக்கீயை எவ்வாறு உருவாக்குவது? + +**பதில்:** ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி குக்கீயை (cookie) உருவாக்க `document.cookie` பொருளுக்கு ஒரு சரம் (string) மதிப்பை ஒதுக்க வேண்டும். +````javascript +document.cookie = "key1 = value1; key2 = value2; expires = date"; +```` + +### 3.3. ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு குக்கீயை (cookie) எவ்வாறு படிப்பது? + +**பதில்:** `document.cookie` இன் மதிப்பு ஒரு குக்கீயை (cookie) உருவாக்கப் பயன்படுகிறது. நீங்கள் குக்கீயை (cookie) அணுக விரும்பும் போதெல்லாம் சரத்தைப் (string) பயன்படுத்தலாம். `document.cookie` சரமானது அரைப்புள்ளிகளால் (semicolons) பிரிக்கப்பட்ட `name = value` ஜோடிகளின் பட்டியலை வைத்திருக்கிறது, இதில் பெயர் என்பது குக்கீயின் பெயராகும் மற்றும் மதிப்பு அதன் சரம் மதிப்பு. + +### 3.4. ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி குக்கீயை எவ்வாறு நீக்குவது? + +**பதில்:** ஒரு குக்கீயை நீக்குவது குக்கீயை உருவாக்குவது அல்லது படிப்பதை விட மிகவும் எளிதானது, நீங்கள் `expires = “past time”` என்பதை அமைக்க வேண்டும் மற்றும் குக்கீயை நீக்கச் சிலர் உங்களை அனுமதிக்காவிட்டால், சரியான குக்கீ பாதையை (cookie path) வரையறுக்கிறது என்பதை உறுதிப்படுத்திக் கொள்ளவும். + +## 4. ஜாவாஸ்கிரிப்டில் பாப்-அப் பெட்டிகள் (Pop-up boxes in JavaScript) + +### 4.1. ஜாவாஸ்கிரிப்டில் கிடைக்கும் பாப் அப் பெட்டிகளின் வகைகள் யாவை? + +**பதில்:** ஜாவாஸ்கிரிப்டில் மூன்று வகையான பாப் பெட்டிகள் (pop boxes) உள்ளன: +`எச்சரிக்கை (Alert)`, `உறுதிப்படுத்தல் (Confirm)`, `தூண்டுதல் (Prompt)`. + +### 4.2. எச்சரிக்கைப் பெட்டிக்கும் (alert box) உறுதிப்படுத்தல் பெட்டிக்கும் (confirmation box) என்ன வித்தியாசம்? + +**பதில்:** ஒரு எச்சரிக்கைப் பெட்டியானது (alert box) OK பட்டனை மட்டுமே காண்பிக்கும். பயனர் ஒப்புக்கொள்ள வேண்டும் என்ற ஒப்பந்தத்தைப் பற்றிப் பயனருக்குத் தெரிவிக்க இது பயன்படுகிறது. ஆனால் ஒரு உறுதிப்படுத்தல் பெட்டி (Confirmation box) OK மற்றும் Cancel ஆகிய இரண்டு பொத்தான்களைக் காண்பிக்கும், அங்குப் பயனர் ஏற்க வேண்டுமா இல்லையா என்பதை முடிவு செய்யலாம். + +## 5. அம்பு செயல்பாடுகள் (Arrow Functions) + +### 5.1. அம்பு செயல்பாட்டின் (arrow function) வரையறை என்ன? + +**பதில்:** அம்பு குறியீட்டைப் (arrow notation) பயன்படுத்தி, ஜாவாஸ்கிரிப்டில் அநாமதேயச் செயல்பாடுகளை (anonymous functions) வரையறுப்பதற்கான ஒரு சுருக்கமான தொடரியல் (syntax) ஒரு அம்புச் செயல்பாடு (arrow function) ஆகும். இது குறுகிய தொடரியல் (shorter syntax), "this" என்பதன் லெக்சிக்கல் ஸ்கோப்பிங் (lexical scoping) ஆகியவற்றை வழங்குகிறது மற்றும் கட்டமைப்பாளராகப் (constructor) பயன்படுத்த முடியாது. + +### 5.2. செயல்பாட்டுக் கோவைகளிலிருந்து (function expressions) அம்பு செயல்பாடுகள் (arrow functions) எவ்வாறு வேறுபடுகின்றன? + +**பதில்:** அம்புச் செயல்பாடுகள் (Arrow functions) குறுகிய தொடரியல் (shorter syntax) வழங்குகின்றன, அவற்றின் சொந்த this, arguments, super அல்லது new.target ஆகியவற்றைக் கொண்டிருக்கவில்லை, மேலும் செயல்பாட்டுக் கோவைகளைப் (function expressions) போலன்றி, கன்ஸ்ட்ரக்டர்களாகப் பயன்படுத்த முடியாது. + +### 5.3. லெக்சிகல் 'this' பிணைப்பு என்பது அம்பு செயல்பாடுகளில் (arrow functions) என்ன அர்த்தம்? + +**பதில்:** அம்பு செயல்பாடுகளில் "லெக்சிகல் திஸ் (Lexical this)" பிணைப்பு என்பது அவை தங்களுக்குரிய 'this' சூழலை உருவாக்கவில்லை என்பதாகும்; அதற்குப் பதிலாக, அவை சுற்றியுள்ள, இணைக்கும் ஸ்கோப்பில் (enclosing scope) இருந்து 'this' மரபுரிமையாகப் (inherit) பெறுகின்றன, பொதுவான 'this'-தொடர்புடைய சிக்கல்களைக் குறைக்கின்றன. + +### 5.4. அம்பு செயல்பாடுகளைப் (arrow functions) பயன்படுத்துவதன் நன்மைகள் என்ன? + +**பதில்:** ஜாவாஸ்கிரிப்டில் அம்பு செயல்பாடுகளைப் (arrow functions) பயன்படுத்துவதன் நன்மைகள் குறுகிய தொடரியல் (shorter syntax), மறைமுகமான வருமானம் (implicit return) மற்றும் லெக்சிகல் 'this' பிணைப்பு ஆகியவை அடங்கும். + +### 5.5. அம்பு செயல்பாடுகளுக்கான (arrow functions) பொதுவான பயன்பாட்டு வழக்குகள் (use cases) யாவை? + +**பதில்:** ஆப்ஜெக்ட் முறைகள் (object methods), ஈவென்ட் லிசனர்ஸ் (event listeners), கால்பேக்குகள் (callbacks) மற்றும் குறுகிய, சுருக்கமான தொடரியல் (syntax) தேவைப்படும் பிற செயல்பாடுகளுக்கு அம்பு செயல்பாடுகள் பொதுவாகப் பயன்படுத்தப்படுகின்றன. + + +## 6. வழக்கமான கோவை (Regular Expression) + +### 6.1. வழக்கமான கோவை (Regular Expression) என்றால் என்ன? + +**பதில்:** ஒரு வழக்கமான கோவை (regular expression) என்பது தேடல் வடிவத்தை (search pattern) உருவாக்கும் எழுத்துக்களின் வரிசையாகும். உரை (text) தரவைத் தேட இந்தத் தேடல் வடிவத்தைப் பயன்படுத்தலாம். அனைத்து வகையான உரை தேடல் மற்றும் உரை மாற்றீட்டுச் செயல்பாடுகளைச் (textreplace operations) செய்ய இவற்றைப் பயன்படுத்தலாம். இப்போது தொடரியல் வடிவமைப்பைப் (syntax format) பார்ப்போம், + +```js + /pattern/modifiers; +``` + +எடுத்துக்காட்டாக, கேஸ்-இன்சென்சிட்டிவ் பயனர்பெயருடன் (case-insensitive username) வழக்கமான கோவை (regular expression) அல்லது தேடல் வடிவம் (search pattern) பின்வருமாறு, + +```js +/John/i; +``` + +### 6.2. வழக்கமான கோவையில் (Regular expression) கிடைக்கும் சரம் முறைகள் (string methods) யாவை? + +**பதில்:** ரெகுலர் எக்ஸ்பிரஷன்களில் இரண்டு சரம் முறைகள் உள்ளன: `search()` மற்றும் `replace()`. `search()` முறையானது ஒரு பொருத்தத்தைத் தேட ஒரு கோவையைப் பயன்படுத்துகிறது மற்றும் போட்டியின் நிலையை (position) வழங்குகிறது. + +```js +var msg = "Hello John"; +var n = msg.search(/John/i); // 6 +``` + +வடிவமைப்பு மாற்றப்படும் திருத்தப்பட்ட சரத்தைத் திருப்பியளிக்க `replace()` முறை பயன்படுத்தப்படுகிறது. + +```js +var msg = "Hello John"; +var n = msg.replace(/John/i, "Buttler"); // Hello Buttler +``` + +### 6.3. வழக்கமான கோவையில் மாற்றிகள் (modifiers) என்றால் என்ன? + +**பதில்:** கேஸ்-இன்சென்சிட்டிவ் மற்றும் உலகளாவிய தேடல்களைச் (case-insensitive and global searches) செய்ய மாற்றிகளைப் (Modifiers) பயன்படுத்தலாம். சில மாற்றிகளைப் பட்டியலிடுவோம்: + +| மாற்றி (Modifier) | விளக்கம் (Description) | +| -------- | ------------------------------------------------ | +| `i` | கேஸ்-இன்சென்சிட்டிவ் பொருத்தம் (case-insensitive matching) செய்யவும். | +| `g` | உலகளாவிய பொருத்தத்தைச் (global match) செய்யவும் (அனைத்துப் பொருத்தங்களையும் கண்டறியவும்). | +| `m` | பன்வரிசைப் பொருத்தம் (multiline matching) செய்யவும். | + +உலகளாவிய மாற்றியின் (global modifier) உதாரணத்தை எடுத்துக் கொள்வோம், + +```js +var text = "Learn JS one by one"; +var pattern = /one/g; +var result = text.match(pattern); // one,one +``` + +### 6.4. வழக்கமான கோவை வடிவங்கள் (regular expression patterns) என்றால் என்ன? + +**பதில்:** எழுத்துகளைப் பொருத்துவதற்காக (match characters) வழக்கமான கோவைகள் (Regular Expressions) வடிவங்களின் குழுவை வழங்குகின்றன. அடிப்படையில் அவை 3 வகைகளாகப் பிரிக்கப்பட்டுள்ளன, + + + i.அடைப்புக்குறிகள் (Brackets): இவை எழுத்துகளின் வரம்பைக் (range) கண்டறியப் பயன்படுகின்றன. எடுத்துக்காட்டாக, கீழே சில பயன்பாட்டு வழக்குகள் (use cases) உள்ளன, + - a. [abc]: அடைப்புக்குறிக்குள் (a,b,c) உள்ள எழுத்துக்களில் ஏதேனும் ஒன்றைக் கண்டறியப் பயன்படுகிறது. + - b. [0-9]: அடைப்புக்குறிக்கு இடையே உள்ள இலக்கங்களில் ஏதேனும் ஒன்றைக் கண்டறியப் பயன்படுகிறது. + - c. (a|b): | உடன் பிரிக்கப்பட்ட மாற்றுருக்களில் (alternatives) ஏதேனும் ஒன்றைக் கண்டறியப் பயன்படுகிறது + + ii.மெட்டாக்கரக்டர்கள் (Metacharacters): இவை சிறப்பு அர்த்தம் கொண்ட எழுத்துகள், எடுத்துக்காட்டாக, கீழே சில பயன்பாட்டு வழக்குகள் உள்ளன. + - a. \d: இலக்கத்தைக் கண்டறியப் பயன்படுகிறது + - b. \s: ஒரு இடைவெளி (whitespace) எழுத்தைக் கண்டறியப் பயன்படுகிறது + - c. \b: ஒரு வார்த்தையின் தொடக்கத்தில் அல்லது முடிவில் பொருத்தத்தைக் கண்டறியப் பயன்படுகிறது + + iii.அளவீடுகள் (Quantifiers): அளவுகளை வரையறுக்க இவை பயன்படுகின்றன எடுத்துக்காட்டாக, கீழே சில பயன்பாட்டு வழக்குகள் உள்ளன + - a. n+: குறைந்தது ஒரு nஐயாவது கொண்ட எந்தச் சரத்திற்கும் (string) பொருத்தங்களைக் கண்டறியப் பயன்படுகிறது + - b. n*: n இன் பூஜ்ய அல்லது அதற்கு மேற்பட்ட நிகழ்வுகளைக் (occurrences) கொண்ட எந்தச் சரத்திற்கும் பொருத்தங்களைக் கண்டறியப் பயன்படுகிறது + - c. n?: n இன் பூஜ்ய அல்லது ஒரு நிகழ்வைக் கொண்ட எந்தச் சரத்திற்கும் பொருத்தங்களைக் கண்டறியப் பயன்படுகிறது + +### 6.5. RegExp பொருள் (object) என்றால் என்ன? + +**பதில்:** RegExp பொருள் (object) என்பது முன்வரையறுக்கப்பட்ட பண்புகள் (predefined properties) மற்றும் முறைகளைக் (methods) கொண்ட வழக்கமான வெளிப்பாடு (regular expression) பொருளாகும். RegExp பொருளின் எளிய பயன்பாட்டைப் பார்ப்போம், + +```js +var regexp = new RegExp("\\w+"); +console.log(regexp); +// expected output: /\w+/ +``` + +### 6.6. ஒரு வடிவமைப்புக்கான சரத்தை (string) எவ்வாறு தேடுவது? + +**பதில்:** வடிவமைப்பிற்கான சரத்தைத் தேடுவதற்கு, முடிவைப் பொறுத்து `true` அல்லது `false` என்பதைத் திருப்பித் தர வழக்கமான கோவையின் `test()` முறையைப் பயன்படுத்தலாம். + +```js +var pattern = /you/; +console.log(pattern.test("How are you?")); //true +``` +### 6.7. ஜாவாஸ்கிரிப்டில் கரியிங் (Currying) என்றால் என்ன? + +**பதில்:** ஜாவாஸ்கிரிப்டில் கரியிங் பல வாதங்களைக் (arguments) கொண்ட செயல்பாட்டை (function) ஒரு ஒற்றை வாதத்தை எடுக்கும் செயல்பாடுகளின் உள்ளமைக்கப்பட்ட (nested) தொடராக மாற்றுகிறது. ஒரே மாறியை (variable) பலமுறை கடந்து செல்வதைத் தவிர்க்க கரியிங் உங்களுக்கு உதவுகிறது, மேலும் உயர் வரிசைச் செயல்பாட்டை (higher order function) உருவாக்க இது உங்களுக்கு உதவுகிறது. + +அதாவது, ஒரு செயல்பாடு அழைப்பை (function call) `sum(1,2,3)` லிருந்து `sum(1)(2)(3)` என மாற்றும்போது. + +ஒரு செயல்பாடு எடுக்கும் வாதங்களின் (arguments) எண்ணிக்கை ஆரிட்டி (arity) என்றும் அழைக்கப்படுகிறது. + +```js +function sum(a, b) { + // do something +} +function _sum(a, b, c) { + // do something +} +``` +`sum` செயல்பாடு இரண்டு வாதங்களை (arguments) (இரண்டு ஆரிட்டி செயல்பாடு) எடுக்கிறது மற்றும் `_sum` மூன்று வாதங்களை (மூன்று ஆரிட்டி செயல்பாடு) எடுக்கிறது. + +கரியிங் செய்யப்பட்ட (Curried) செயல்பாடுகள் க்ளோஷர்களைச் சங்கிலி (chaining) மூலமாகவும் அவற்றின் உள் செயல்பாடுகளை ஒரே நேரத்தில் வரையறுத்து உடனடியாகத் திருப்பித் தருவதன் மூலமும் கட்டமைக்கப்படுகின்றன. + +## 7. தற்காலிக டெட் ஸோன் (Temporal Dead Zone) + +### 7.1. ES6 இல் டெம்போரல் டெட் ஸோன் (Temporal Dead Zone) என்றால் என்ன? + +**பதில்:** ES6 இல் `let` மற்றும் `const` ஹொயிஸ்ட் (hoist) செய்யப்படுகின்றன (`var`, `class` மற்றும் `function` போன்றவை), ஆனால் ஸ்கோப்பிற்குள் நுழைவதற்கும் +அறிவிக்கப்படுவதற்கும் இடையே ஒரு கால அவகாசம் உள்ளது, அங்கு அவற்றை அணுக முடியாது. இந்தக் கால அவகாசமே தற்காலிக டெட் ஸோன் (TDZ - temporal dead zone) ஆகும். + +```javascript +//console.log(aLet) // would throw ReferenceError +let aLet; +console.log(aLet); // undefined +aLet = 10; +console.log(aLet); // 10 +``` + + +### 7.2. ஜாவாஸ்கிரிப்டில் ட்ரூத்தி (Truthy) மற்றும் ஃபால்சி (Falsy) மதிப்புகள் என்றால் என்ன? + +**பதில்:** ஜாவாஸ்கிரிப்டில், "ட்ரூத்தி (truthy)" மற்றும் "ஃபால்சி (falsy)" என்பது பூலியன் சூழல்களில் (Boolean contexts) நிபந்தனைகள் (conditions), சுழல்கள் (loops) போன்ற மதிப்புகள் எவ்வாறு மதிப்பிடப்படுகின்றன என்பதை விவரிக்கப் பயன்படுத்தப்படும் சொற்கள். நிபந்தனை தர்க்கத்துடன் (conditional logic) வேலை செய்யும் போது உண்மையான (truthy) மற்றும் தவறான (falsy) மதிப்புகளைப் புரிந்துகொள்வது முக்கியமானது. + +#### ஃபால்சி மதிப்புகள் (Falsy Values): + +- `false`: பூலியன் மதிப்பு false. +- `0`: எண் (numeric) மதிப்பு பூஜ்ஜியம். +- `""`: வெற்றுச் சரம் (empty string). +- `null`: பொருளின் இல்லாமையைக் குறிக்கும் ஒரு சிறப்பு மதிப்பு (special value). +- `undefined`: மதிப்பு ஒதுக்கப்படாத மாறி (variable). +- `NaN`: "எண் அல்ல (Not-a-Number)" என்பதைக் குறிக்கிறது மற்றும் தவறான எண்ணைக் (invalid number) குறிக்கிறது. +- இந்த மதிப்புகளில் ஏதேனும் பூலியன் (Boolean) சூழலில் பயன்படுத்தப்படும்போது, அவை "தவறானவை (falsy)" என்று கருதப்படுகின்றன, அதாவது அவை தவறு (false) என்பதற்குச் சமமாகக் கருதப்படுகின்றன. + +ஃபால்சி மதிப்புகளின் எடுத்துக்காட்டுகள்: +```javascript +if (false) { + // This code block won't execute because false is falsy. +} + +if (0) { + // This code block won't execute because 0 is falsy. +} + +if ("" === false) { + // This comparison is true because an empty string is falsy. +} + +if (null) { + // This code block won't execute because null is falsy. +} + +if (undefined) { + // This code block won't execute because undefined is falsy. +} + +if (NaN) { + // This code block won't execute because NaN is falsy. +} +``` +#### ட்ரூத்தி மதிப்புகள் (Truthy Values): + +ஜாவாஸ்கிரிப்டில் வெளிப்படையாகத் "தவறானது (falsy)" அல்லாத எந்த மதிப்பும் "உண்மையானது (truthy)" என்று கருதப்படுகிறது. பூலியன் சூழல்களில் (Boolean contexts) இந்த மதிப்புகள் உண்மை (true) என்பதற்குச் சமமாகக் கருதப்படுகின்றன. + +ட்ரூத்தி (truth) மதிப்புகளின் எடுத்துக்காட்டு: +```javascript +if (true) { + // This code block will execute because true is truthy. +} + +if (42) { + // This code block will execute because 42 is truthy. +} + +if ("Hello") { + // This code block will execute because a non-empty string is truthy. +} + +if ({} === true) { + // This comparison is false because an empty object is truthy but not equal to true. +} + +if ([] === true) { + // This comparison is false because an empty array is truthy but not equal to true. +} +``` + +உண்மையான (truthy) மற்றும் தவறான (falsy) மதிப்புகளைப் புரிந்துகொள்வது, மிகவும் சுருக்கமான மற்றும் வெளிப்படையான குறியீட்டை (expressive code) எழுத அனுமதிக்கிறது, குறிப்பாக நிபந்தனை தர்க்கத்தைக் (conditional logic) கையாளும் போது. நிபந்தனைகளை மதிப்பிடும்போதும் (evaluating) மற்றும் இரண்டு மதிப்புகள் அல்லது செயல்களுக்கு இடையே தேர்வு செய்யும்போதும் சிறிய மற்றும் படிக்கக்கூடிய குறியீட்டை (readable code) எழுத இந்த நடத்தையை நாம் பயன்படுத்தலாம். + +## 8. வகுப்புகள் (Classes) + +### 8.1. ஜாவாஸ்கிரிப்ட் வகுப்புகள் (classes) என்றால் என்ன? + +**பதில்:** வகுப்புகள் பொருள்களை (objects) உருவாக்குவதற்கான வார்ப்புருக்கள் (templates). அவை தரவையும் (data) தரவுடன் செயல்படும் தர்க்கத்தையும் (logic) இணைக்கின்றன (encapsulate). + +### 8.2. வகுப்பு உறுப்பினர்கள் (class members) என்றால் என்ன? + +**பதில்:** வகுப்பு உறுப்பினர்கள் என்பது ஒரு வகுப்பிற்குள் (class) உள்ள முறைகள் (methods) மற்றும் புலங்களைக் (fields) குறிக்கிறது. + + + i. முறைகள் (Methods) + - வகுப்பிற்குள் (class) வரையறுக்கப்பட்ட செயல்பாடுகள் (Functions). + - அவர்கள் புலங்களில் (fields) செயல்பட முடியும் மற்றும் தரவுடன் செயல்களைச் செய்ய முடியும். + - அவர்கள் வகுப்பின் நடத்தையை (behavior) வரையறுக்கிறார்கள். + + ii. புலங்கள் (Fields) + - வகுப்பிற்குள் (class) வரையறுக்கப்பட்ட மாறிகள் (Variables). + - அவர்கள் கிளாஸ் இன்ஸ்டன்ஸ்களுக்கு (class instance) குறிப்பிட்ட தரவை வைத்திருக்கிறார்கள். + - அவை வகுப்பின் நிலையை (state) வரையறுக்கின்றன. + +### 8.3. ஜாவாஸ்கிரிப்டில் அணுகல் மாற்றிகளின் (access modifiers) வகைகள் மற்றும் அவற்றின் நோக்கத்தை விளக்குங்கள் + +**பதில்:** தகவலை என்காப்சுலேட் (encapsulate) செய்யப் பயன்படுத்தப்படும் மூன்று வகையான அணுகல் மாற்றிகள் (access modifiers) உள்ளன. + + + பொது (Public) + - எங்கிருந்தும் அணுகலாம். + + தனியார் (Private) + - ```#``` குறியீட்டுடன் உறுப்பினர்களை முன்னொட்டுவதன் மூலம் (prefixing) குறிக்கப்படுகிறது. + - நிகழ்வுகள் (instances) அல்லது குழந்தை (child) வகுப்புகளிலிருந்து அணுக முடியாது. + - வகுப்பிற்குள்ளேயே (class itself) கிடைக்கும். + - தகவலை மறைக்கப் பயன்படுகிறது. + + பாதுகாக்கப்பட்டது (Protected) + - ```_``` குறியீட்டுடன் உறுப்பினர்களை முன்னொட்டுவதன் மூலம் குறிக்கப்படுகிறது. + - வகுப்பிற்குள் இருந்தும் அதிலிருந்து மரபுரிமையாக (inherits) வரும் எந்த வகுப்பிலிருந்தும் அணுகலாம். + - வகுப்புகளுக்கு இடையே நிலையைப் (state) பகிர்வதற்குப் பயனுள்ளதாக இருக்கும். + + +### 8.4. வகுப்புப் பண்புகள் (class properties) யாவை? +**பதில்:** பண்புகள் (Properties) என்பது ஒரு வகுப்பிற்குள் உள்ள பெறுபவர் (getter) மற்றும் அமைப்பவரைக் (setter) குறிக்கிறது, இது ஒரு வகுப்பின் புலங்களுக்கான (fields) அணுகலைக் கட்டுப்படுத்த ஒரு வழியை வழங்குகிறது. பெறுபவர் (getter) மற்றும் அமைப்பவர் (setter) என்பவை ஒரு செயல்பாடு (function) அணுகப்படும்போது அழைக்கப்படும் பண்புப் பிணைப்புகள் (property bindings) ஆகும். + + + i. கெட்டர் (Getter) + - கெட்டர் என்பது ஒரு புலத்தின் (field) மதிப்பைப் பெறும் முறையாகும். + - இது சரியாகப் பூஜ்ஜிய அளவுருக்களைக் (parameters) கொண்டிருக்க வேண்டும். + - இது ஒரு மதிப்பை (value) வழங்க வேண்டும். + - இது ```get``` முக்கியச்சொல்லைப் (keyword) பயன்படுத்தி வரையறுக்கப்படுகிறது. + + ii. செட்டர் (Setter) + - செட்டர் என்பது ஒரு புலத்தின் (field) மதிப்பை அமைக்கும் முறையாகும். + - இது சரியாக ஒரு அளவுருவைக் (parameter) கொண்டிருக்க வேண்டும். + - இது ```set``` முக்கியச்சொல்லைப் (keyword) பயன்படுத்தி வரையறுக்கப்படுகிறது. + +சில குறிப்பிட்ட புலங்களை (fields) ஒரு குறிப்பிட்ட வழியில் மட்டுமே அணுக முடியும் அல்லது மாற்றியமைக்க முடியும் என்பதை உறுதிப்படுத்த தரவை என்காப்சுலேட் (encapsulate) செய்ய அவை பயன்படுத்தப்படுகின்றன. + +கெட்டர்கள் (getters) மற்றும் செட்டர்களைப் (setters) பயன்படுத்தி என்காப்சுலேஷனின் (encapsulation) எடுத்துக்காட்டு: + +```javascript + class Task { + #id; + #description; + + constructor(id, description, ) { + // Use setters instead of directly modifying the private fields + this.id = id; + this.description = description; + } + + // Use getters to read the values + get id() { + return this.#id; + } + + // ... + + // Use setters to validate data before writing + set id(id) { + // ...validate new ID + this.#id = id; + } + + // ... + } +``` + +### 8.5. வகுப்பு கன்ஸ்ட்ரக்டர்களை (class constructors) விளக்குக + +**பதில்:** கன்ஸ்ட்ரக்டர் என்பது அந்த வகுப்பின் துவக்கத்தில் (initialization) அழைக்கப்பட்ட ஒரு வகுப்பின் (class) சிறப்பு முறையாகும். பொருளின் பண்புகளைத் துவக்குவதற்கும் பொருள் (object) உருவாக்கப்படும்போது தேவையான அமைப்பைச் (setup) செய்வதற்கும் இது பயன்படுகிறது. + + + i. அறிவிப்பு (Declaration) + - கன்ஸ்ட்ரக்டர் முறையானது கிளாஸ் பாடிக்குள் (class body) ```constructor``` முக்கியச்சொல்லைப் (keyword) பயன்படுத்தி அறிவிக்கப்படுகிறது. + - ஒவ்வொரு வகுப்பிலும் ஒரு கன்ஸ்ட்ரக்டர் முறை மட்டுமே இருக்கும். + - கன்ஸ்ட்ரக்டர் ஒரு ஒத்திசைவற்ற முறையாக (async method) இருக்க முடியாது. + - கன்ஸ்ட்ரக்டர் ஒரு தனிப்பட்ட முறையாக (private method) இருக்க முடியாது. + + ii. துவக்கம் (Initialization) + - நிகழ்வின் பண்புகளைத் (instance's properties) துவக்கப் பயன்படும் அளவுருக்களைக் (parameters) கன்ஸ்ட்ரக்டர் ஏற்க முடியும். + - பண்புகளுக்கு (properties) மதிப்புகளை ஒதுக்குவதன் மூலம் இது ஆரம்ப நிலையை (initial state) அமைக்கிறது. + + iii. பரம்பரை (Inheritance) + - பெறப்பட்ட வகுப்புகளில் (derived classes - மற்றொரு வகுப்பை நீட்டிக்கும் வகுப்புகள்), பெற்றோர் (parent) வகுப்பின் கன்ஸ்ட்ரக்டரை அழைக்க குழந்தையின் (child) கன்ஸ்ட்ரக்டருக்குள் ```super``` முக்கியச்சொல் (keyword) பயன்படுத்தப்படுகிறது. + - பெறப்பட்ட (derived) வகுப்பின் கன்ஸ்ட்ரக்டரில் எந்தப் பண்புகளையும் அணுகுவதற்கு முன் ```super``` அழைப்பு செய்யப்பட வேண்டும். கன்ஸ்ட்ரக்டர் பரம்பரையின் (constructor inheritance) எடுத்துக்காட்டு: + + ```javascript + class Animal { + constructor(species) { + this.species = species; + } + } + + class Person extends Animal { + constructor(name) { + super("Human"); // Call the parent class constructor + this.name = name; + } + } + ``` + + iv. இயல்புநிலை கன்ஸ்ட்ரக்டர் (Default constructor) - கன்ஸ்ட்ரக்டர் வெளிப்படையாக அறிவிக்கப்படவில்லை என்றால், ஒரு இயல்புநிலை கன்ஸ்ட்ரக்டர் வகுப்பிற்குக் கொடுக்கப்படும். + - அடிப்படை வகுப்பு (Base class) - வகுப்பு வேறு எந்த வகுப்பையும் நீட்டிக்கவில்லை (extend) என்றால், அதற்கு ஒரு இயல்புநிலைக் கன்ஸ்ட்ரக்டர் ஒதுக்கப்படும்: + ```javascript + constructor() {} + ``` + - குழந்தை வகுப்பு (Child class) - ஒரு வகுப்பு மற்றொரு வகுப்பை நீட்டித்தால் (extends), அதன் கன்ஸ்ட்ரக்டரைப் பெற்றிருக்கும் (inherit) + ```javascript + class Vehicle { + constructor(type) { + this.type = type; + } + + move() { + return `The ${this.type} is moving`; + } + } + + class Car extends Vehicle { + #model; + + set model(model) { + this.#model = model; + } + + drive() { + `Driving ${this.#model}`; + } + } + ``` + கன்ஸ்ட்ரக்டர் வெளிப்படையாக (explicitly) அறிவிக்கப்படவில்லை என்றாலும், Car வகுப்பு அதை Vehicle வகுப்பிலிருந்து பெறுகிறது: + ```javascript + constructor(type) { + super(type); + } + ``` + +### 8.6. நிலையான உறுப்பினர்கள் (Static members) vs நிகழ்வு உறுப்பினர்கள் (Instance members) + +**பதில்:** முன்னிருப்பாக, நாம் ஒரு வகுப்பிற்குள் (class) வரையறுக்கும் பண்புகள் (properties) மற்றும் முறைகள் (methods) நாம் உருவாக்கும் வகுப்பின் ஒவ்வொரு நிகழ்விற்கும் (instance) சொந்தமானது. நாம் வகுப்பிற்கு உறுப்பினர்களையும் ஒதுக்கலாம். இத்தகைய உறுப்பினர்கள் நிலையானவை (static) என்று அழைக்கப்படுகின்றன மற்றும் அவை ```static``` முக்கியச்சொல்லைப் பயன்படுத்தி அறிவிக்கப்படுகின்றன. வகுப்பின் நிகழ்வுகளில் (instances) அவற்றை நேரடியாக அணுக முடியாது. \ No newline at end of file diff --git a/ta/json.md b/ta/json.md new file mode 100644 index 00000000..b564a1d9 --- /dev/null +++ b/ta/json.md @@ -0,0 +1,45 @@ +--- +layout: editorial +chapter: 11 +pageNumber: 82 +description: JSON (JavaScript Object Notation) என்பது வெவ்வேறு அமைப்புகள் (systems) மற்றும் இயங்குதளங்களுக்கு (platforms) இடையே தரவைப் பிரதிநிதித்துவப்படுத்தவும் பரிமாறவும் பயன்படும் ஒரு இலகுரக (lightweight) தரவு பரிமாற்ற வடிவமாகும். இணைய மேம்பாட்டில் தரவு பரிமாற்றம் மற்றும் சேமிப்பிற்காக இது பரவலாகப் பயன்படுத்தப்படுகிறது. +--- + +# அத்தியாயம் 11 +# JSON + +**J**ava**S**cript **O**bject **N**otation (JSON) என்பது தரவைச் சேமிப்பதற்கும் கொண்டு செல்வதற்குமான உரை அடிப்படையிலான (text-based) வடிவமாகும். ஜாவாஸ்கிரிப்ட் பொருள்களை எளிதில் JSON ஆக மாற்றலாம், மற்றும் நேர்மாறாகவும் மாற்றலாம். எடுத்துக்காட்டாக: + +```javascript +// ஒரு ஜாவாஸ்கிரிப்ட் பொருள் +let myObj = { name:"Ryan", age:30, city:"Austin" }; + +// JSON ஆக மாற்றப்பட்டது: +let myJSON = JSON.stringify(myObj); +console.log(myJSON); +// முடிவு: '{"name":"Ryan","age":30,"city":"Austin"}' + +// மீண்டும் ஜாவாஸ்கிரிப்ட் பொருளாக மாற்றப்பட்டது +let originalJSON = JSON.parse(myJSON); +console.log(originalJSON); + +// முடிவு: {name: 'Ryan', age: 30, city: 'Austin'} +``` + +`stringify` மற்றும் `parse` ஆகியவை JSON ஆதரிக்கும் இரண்டு முறைகளாகும். + +| முறை (Method) | விளக்கம் (Description) | +| ------------- | ------------------------------------------------------ | +| `parse()` | பாகுபடுத்தப்பட்ட (parsed) JSON சரத்திலிருந்து ஜாவாஸ்கிரிப்ட் பொருளைத் திரும்பப் பெறுகிறது | +| `stringify()` | ஜாவாஸ்கிரிப்ட் பொருளிலிருந்து JSON சரத்தைத் திரும்பப் பெறுகிறது | + +JSON ஆல் பின்வரும் தரவு வகைகள் (data types) ஆதரிக்கப்படுகின்றன. + +* [string (சரம்)](./strings/README.md) +* [number (எண்)](./numbers/README.md) +* [array (வரிசை)](./arrays/README.md) +* [boolean (பூலியன்)](./basics/types.md#Boolean) +* செல்லுபடியாகும் JSON மதிப்புகளைக் கொண்ட [object (பொருள்)](./basics/types.md#Object) +* [null](./basics/types.md#NULL) + +அது `function`, `date` அல்லது `undefined` ஆக இருக்க முடியாது. diff --git a/ta/loops/README.md b/ta/loops/README.md new file mode 100644 index 00000000..6356fd2d --- /dev/null +++ b/ta/loops/README.md @@ -0,0 +1,36 @@ +--- +layout: editorial +chapter: 7 +pageNumber: 62 +description: Loops ஒரு குறிப்பிட்ட நிபந்தனை நிறைவேற்றப்படும் வரை ஒரு குறியீட்டுத் தொகுதியை மீண்டும் மீண்டும் இயக்க அனுமதிக்கும் கட்டுப்பாட்டு அமைப்புகளாகும். வரிசைகள் மற்றும் சரங்கள் போன்ற தரவு கட்டமைப்புகளில் மீண்டும் மீண்டும் செய்யப்படும் பணிகளை தானியக்கமாக்குவதற்கும் மீண்டும் செய்வதற்கும் அவை அவசியம். +--- + +# அத்தியாயம் 7 +# சுழல்கள் (Loops) + +சுழல்கள் என்பது மீண்டும் மீண்டும் செய்யப்படும் வழிமுறைகளாகும், இதில் சுழற்சியில் உள்ள ஒரு மாறி மாறுகிறது. நீங்கள் அதே குறியீட்டை மீண்டும் மீண்டும் இயக்க விரும்பினால், ஒவ்வொரு முறையும் வெவ்வேறு மதிப்புடன் சுழல்கள் கைக்கு வரும். + +இப்படி எழுதுவதற்குப் பதிலாக: + +```javascript +doThing(cars[0]); +doThing(cars[1]); +doThing(cars[2]); +doThing(cars[3]); +doThing(cars[4]); +``` + +நீங்கள் இப்படி எழுதலாம்: + +```javascript +for (var i = 0; i < cars.length; i++) { + doThing(cars[i]); +} +``` + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளைப் பற்றி விவாதிக்கப் போகிறோம்: +* [For](./for.md) +* [While](./while.md) +* [Do...While](./dowhile.md) +* [Continue](./continue.md) +* [Break](./break.md) \ No newline at end of file diff --git a/ta/loops/break.md b/ta/loops/break.md new file mode 100644 index 00000000..4a72b9c7 --- /dev/null +++ b/ta/loops/break.md @@ -0,0 +1,56 @@ +--- +chapter: 7 +pageNumber: 54 +description: ஒரு குறிப்பிட்ட நிபந்தனை நிறைவேற்றப்படும் போதெல்லாம் ஒரு சுழற்சியில் இருந்து வெளியேற ஒரு பிரேக் அறிக்கை பயன்படுத்தப்படுகிறது. +--- + +## Break + +சுழற்சிக்காக குறிப்பிடப்பட்ட நிபந்தனை `false` ஆக மாறும்போது சுழற்சி முடிவடைகிறது. இருப்பினும், break அறிக்கையைப் பயன்படுத்துவதன் மூலம் நாம் எந்த சுழற்சியையும் கட்டாயமாக முடிக்க முடியும். + +### தொடரியல் + +ஜாவாஸ்கிரிப்டில் `break` இன் தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது: + +```javascript +for (initialization; endCondition; change) { + if(conditionForBreaking){ + break; + } +} +``` + +### விளக்கம்: + +- for சுழற்சியின் உள்ளே `conditionForBreaking` நிபந்தனை பூர்த்தி செய்யப்படும் போதெல்லாம் கட்டுப்பாடு for சுழற்சிக்கு வெளியே சென்று சுழற்சி முடிவடைகிறது. + + +### எடுத்துக்காட்டு + +- நம்மிடம் எண்களின் வரிசை உள்ளது என்று வைத்துக்கொள்வோம், 5 ஆல் வகுபடும் எண்ணின் முதல் நிகழ்வை அச்சிட வேண்டும். இதைச் செய்ய `break` அறிக்கையைப் பயன்படுத்தலாம்: + +```javascript +const arr = [4, 7, 9, 11, 45, 23, 15, 87]; + +for(let i = 0; i < arr.length; i++){ + if(arr[i]%5 == 0){ + console.log(arr[i]); + break; + } +} +// இந்தக் குறியீடு 45 ஐ அச்சிடும், இது 5 ஆல் வகுபடும் முதல் எண்ணாகும் +``` +- `while` சுழற்சியின் உள்ளேயும் Break அறிக்கையைப் பயன்படுத்தலாம். + +```javascript +const arr = [4, 7, 9, 11, 45, 23, 15, 87]; +let i = 0; +while(i < arr.length){ + if(arr[i]%5 == 0){ + console.log(arr[i]); + break; + } + i++; +} +// இந்தக் குறியீடும் 45 ஐ அச்சிடும், இது 5 ஆல் வகுபடும் முதல் எண்ணாகும் +``` diff --git a/ta/loops/continue.md b/ta/loops/continue.md new file mode 100644 index 00000000..a3c99828 --- /dev/null +++ b/ta/loops/continue.md @@ -0,0 +1,22 @@ +--- +title: Continue +description: ஒரு எடுத்துக்காட்டுடன் ஜாவாஸ்கிரிப்டில் உள்ள continue அறிக்கை பற்றிய விளக்கம். +--- + +# Continue + +ஜாவாஸ்கிரிப்டில் உள்ள `continue` அறிக்கை என்பது ஒரு சுழற்சியின் தற்போதைய மறு செய்கையைத் தவிர்த்து, அடுத்த மறு செய்கையுடன் தொடரப் பயன்படுத்தப்படும் ஒரு கட்டுப்பாட்டு ஓட்ட அறிக்கையாகும். இது சில நிபந்தனைகளின் கீழ் ஒரு சுழற்சியின் உள்ளே இருக்கும் குறிப்பிட்ட குறியீட்டைக் கடந்து செல்ல உங்களை அனுமதிக்கிறது. இந்த ஆவணம் ஜாவாஸ்கிரிப்டில் உள்ள `continue` அறிக்கை, அதன் தொடரியல், பொதுவான பயன்பாட்டு வழக்குகள் மற்றும் சிறந்த நடைமுறைகள் பற்றிய கண்ணோட்டத்தை வழங்குகிறது. + +## தொடரியல் + +ஜாவாஸ்கிரிப்டில், சுழல்களுக்குள் `continue` அறிக்கை பயன்படுத்தப்படுகிறது. தொடரியல் நேரடியானது: + +```javascript +for (let i = 1; i <= 5; i++) { + if (i === 3) { + console.log("3 ஐ தவிர்க்கிறது."); + continue; + } + console.log(`i இன் தற்போதைய மதிப்பு: ${i}`); +} +``` diff --git a/ta/loops/dowhile.md b/ta/loops/dowhile.md new file mode 100644 index 00000000..7ee85f2b --- /dev/null +++ b/ta/loops/dowhile.md @@ -0,0 +1,26 @@ +--- +chapter: 7 +pageNumber: 67 +description: do...while அறிக்கை, சோதனை நிபந்தனை தவறு என மதிப்பிடப்படும் வரை ஒரு குறிப்பிட்ட தொகுதி அறிக்கையை இயக்கும் ஒரு சுழற்சியை உருவாக்குகிறது. தொகுதியை இயக்கிய பின்னரே நிபந்தனை மதிப்பிடப்படுகிறது. +--- +# Do...While + +`do...while` அறிக்கை, சோதனை நிபந்தனை தவறு என மதிப்பிடப்படும் வரை ஒரு குறிப்பிட்ட தொகுதி அறிக்கையை இயக்கும் ஒரு சுழற்சியை உருவாக்குகிறது. தொகுதியை இயக்கிய பின்னரே நிபந்தனை மதிப்பிடப்படுகிறது. `do... while` க்கான தொடரியல்: + +```javascript +do { + // அறிக்கை +} while (expression); +``` + +எடுத்துக்காட்டாக, `do...while` சுழற்சியைப் பயன்படுத்தி 10-க்கும் குறைவான எண்களை எவ்வாறு அச்சிடுவது என்று பார்ப்போம்: + +```javascript +var i = 0; +do { + document.write(i + " "); + i++; // i ஐ 1 ஆல் அதிகரித்தல் +} while (i < 10); +``` + +> _**குறிப்பு**_: `i = i + 1` என்பதை `i++` என்று எழுதலாம். diff --git a/ta/loops/for.md b/ta/loops/for.md new file mode 100644 index 00000000..d8a13deb --- /dev/null +++ b/ta/loops/for.md @@ -0,0 +1,176 @@ +--- +chapter: 7 +pageNumber: 63 +description: for சுழற்சி என்பது ஒரு குறிப்பிட்ட எண்ணிக்கையிலான முறை அல்லது ஒரு வரையறுக்கப்பட்ட வரம்பில் ஒரு குறியீட்டுத் தொகுதியை பல முறை இயக்கப் பயன்படுத்தப்படும் ஒரு சக்திவாய்ந்த கட்டுப்பாட்டு அமைப்பு. இது மிகவும் பல்துறை மற்றும் பொதுவாக வரிசைகள், சரங்கள் மற்றும் பிற மீண்டும் மீண்டும் செய்யக்கூடிய பொருள்களை மீண்டும் செய்யப் பயன்படுத்தப்படுகிறது. +--- + +## For + +சுழற்சியின் எளிதான வடிவம் `for` அறிக்கை. இது ஒரு if அறிக்கைக்கு ஒத்த தொடரியலைக் கொண்டுள்ளது, ஆனால் அதிக விருப்பங்களுடன்: + +### தொடரியல் + +ஜாவாஸ்கிரிப்டில் `for` சுழற்சியின் தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது: + +```javascript +for (initialization; end condition; change) { + // இதை செய், இப்போது செய் +} +``` + +### விளக்கம்: + +- முதல் மறு செய்கைக்கு முன் செயல்படுத்தப்படும் `initialization` பகுதியில், உங்கள் சுழற்சி மாறியைத் தொடங்குங்கள். +- `end condition` பகுதியில், ஒவ்வொரு மறு செய்கைக்கும் முன் சரிபார்க்கப்படக்கூடிய ஒரு நிபந்தனையை வைக்கவும். நிபந்தனை `false` ஆக மாறும் தருணத்தில், சுழற்சி முடிவடையும். +- `change` பகுதியில், சுழற்சி மாறியை எவ்வாறு புதுப்பிப்பது என்பதை நிரலுக்குச் சொல்லுங்கள். + `for` சுழற்சியைப் பயன்படுத்தி அதே குறியீட்டை பத்து முறை எவ்வாறு இயக்குவது என்று பார்ப்போம்: + +```javascript +for (let i = 0; i < 10; i = i + 1) { + // இந்தக் குறியீட்டை பத்து முறை செய் +} +``` + +> _**குறிப்பு**_: `i = i + 1` என்பதை `i++` என்று எழுதலாம். + +## `for...in` சுழற்சி + +ஒரு பொருளின் எண்ணக்கூடிய பண்புகள் மூலம் சுழற்சி செய்ய `for in` சுழற்சியைப் பயன்படுத்தலாம். ஒவ்வொரு தனித்துவமான பண்புக்கும், ஜாவாஸ்கிரிப்ட் குறிப்பிட்ட அறிக்கைகளை இயக்குகிறது. + +### தொடரியல் + +```javascript +for (variable in object) { + // பொருளில் உள்ள ஒவ்வொரு பண்பையும் மீண்டும் செய்யவும் +} +``` + +### எடுத்துக்காட்டு + +எங்களிடம் பின்வரும் பொருள் உள்ளது என்று வைத்துக்கொள்வோம்: + +```javascript +const person = { + fname: "John", + lname: "Doe", + age: 25, +}; +``` + +பின்னர், `for in` சுழற்சியின் உதவியுடன், கீழே காட்டப்பட்டுள்ளபடி `fname`, `lname` மற்றும் `age` போன்ற அதன் பண்புகளை அணுக `person` பொருளை நாம் மீண்டும் செய்யலாம். + +```javascript +let info = ""; +for (let x in person) { + console.log(person[x]); +} +``` + +மேலே உள்ள குறியீட்டுத் துணுக்கின் வெளியீடு பின்வருமாறு: + +```javascript +John +Doe +25 +``` + +> **குறிப்பு: `Arrays`, `Strings`, `Maps`, `NodeLists` போன்ற மீண்டும் செய்யக்கூடிய பொருள்களை `for in` அறிக்கையைப் பயன்படுத்தி சுழற்சி செய்யலாம். ** + +```javascript +// வரிசைகளுடன் எடுத்துக்காட்டு +const myArray = [1, 2, 3, 4, 5]; +for (const item of myArray) { + console.log(item); +} + +// சரங்களுடன் எடுத்துக்காட்டு +const myString = "Hello, World!"; +for (const char of myString) { + console.log(char); +} + +// Maps உடன் எடுத்துக்காட்டு +const myMap = new Map(); +myMap.set("name", "John"); +myMap.set("age", 30); + +for (const [key, value] of myMap) { + console.log(key, value); +} + +// NodeLists (HTML கூறுகள்) உடன் எடுத்துக்காட்டு +const paragraphs = document.querySelectorAll("p"); +for (const paragraph of paragraphs) { + console.log(paragraph.textContent); +} +``` + +## `for...of` சுழற்சி + +`for...of` சுழற்சி **[JavaScript ES6](../es6-concepts/README.md)** இன் பிந்தைய பதிப்புகளில் அறிமுகப்படுத்தப்பட்டது. `for...of` அறிக்கை, `Array`, `String`, `TypedArray`, `Map`, `Set`, `NodeList` (மற்றும் பிற DOM சேகரிப்புகள்) போன்ற மீண்டும் செய்யக்கூடிய பொருள்களிலிருந்து பெறப்பட்ட மதிப்புகளின் வரிசையில் செயல்படும் ஒரு சுழற்சியை இயக்குகிறது. + +### தொடரியல் + +`for...of` சுழற்சியின் தொடரியல்: + +```javascript +for (element of iterable) { + // for...of இன் உடல் +} +``` + +இங்கே, + +- **iterable** - மீண்டும் செய்யக்கூடிய ஒரு பொருள் +- **element** - மீண்டும் செய்யக்கூடியதில் உள்ள உருப்படிகள் + +எளிய தமிழில், மேற்கண்ட குறியீட்டை நீங்கள் இவ்வாறு படிக்கலாம்: “மீண்டும் செய்யக்கூடிய ஒவ்வொரு உறுப்புக்கும், சுழற்சியின் உடலை இயக்கவும்”. + +### எடுத்துக்காட்டுகள் + +எங்களிடம் பின்வரும் பொருள் உள்ளது என்று வைத்துக்கொள்வோம்: + +```javascript +const person = ["John Doe", "Albert", "Neo"]; +``` + +பின்னர், `for of` சுழற்சியின் உதவியுடன், கீழே காட்டப்பட்டுள்ளபடி அதன் தனிப்பட்ட உறுப்பை அணுக `person` பொருளை நாம் மீண்டும் செய்யலாம். + +```javascript +let info = ""; +for (let x of person) { + console.log(x); +} +``` + +மேலே உள்ள குறியீட்டுத் துணுக்கின் வெளியீடு பின்வருமாறு: + +```javascript +John Doe +Albert +Neo +``` + +சரம், maps மற்றும் nodelist உடன் `for...of` சுழற்சியின் பயன்பாடு கீழே கொடுக்கப்பட்டுள்ளது: + +```js +// சரங்களுடன் எடுத்துக்காட்டு +const text = "Hello, World!"; +for (const char of text) { + console.log(char); +} + +// Maps உடன் எடுத்துக்காட்டு +const person = new Map(); +person.set("name", "John"); +person.set("age", 30); +for (const [key, value] of person) { + console.log(key, value); +} + +// NodeLists (HTML கூறுகள்) உடன் எடுத்துக்காட்டு +const paragraphs = document.querySelectorAll("p"); +for (const paragraph of paragraphs) { + console.log(paragraph.textContent); +} +``` diff --git a/ta/loops/while.md b/ta/loops/while.md new file mode 100644 index 00000000..5b3bf3e3 --- /dev/null +++ b/ta/loops/while.md @@ -0,0 +1,29 @@ +--- +chapter: 7 +pageNumber: 66 +description: While சுழல்கள் ஒரு குறிப்பிட்ட நிபந்தனை உண்மையாக இருக்கும் வரை ஒரு குறியீட்டுத் தொகுதியை மீண்டும் மீண்டும் இயக்குகின்றன. +--- +# While + +`while` சுழல்கள் ஒரு குறிப்பிட்ட நிபந்தனை உண்மையாக இருக்கும் வரை ஒரு குறியீட்டுத் தொகுதியை மீண்டும் மீண்டும் இயக்குகின்றன. மீண்டும் மீண்டும் செய்யப்படும் பணிகளை தானியக்கமாக்குவதற்கும் நிபந்தனையின் மதிப்பீட்டின் அடிப்படையில் மறு செய்கைகளைச் செய்வதற்கும் இது ஒரு வழியை வழங்குகிறது. + +```javascript +while (condition) { + // நிபந்தனை உண்மையாக இருக்கும் வரை இதை செய் +} +``` + +எடுத்துக்காட்டாக, இந்த எடுத்துக்காட்டில் உள்ள சுழற்சி, மாறி `i` `5` ஐ விடக் குறைவாக இருக்கும் வரை அதன் குறியீட்டுத் தொகுதியை மீண்டும் மீண்டும் இயக்கும்: + +```javascript +var i = 0, +x = ""; +while (i < 5) { + x = x + "எண்: " + i; + i++; +} +``` + +{% hint style="working" %} +நிபந்தனை எப்போதும் உண்மையாக இருந்தால் முடிவிலா சுழற்சியைத் தவிர்க்க கவனமாக இருங்கள்! +{% endhint %} diff --git a/ta/miscellaneous/Added getters and setters.md b/ta/miscellaneous/Added getters and setters.md new file mode 100644 index 00000000..7a966809 --- /dev/null +++ b/ta/miscellaneous/Added getters and setters.md @@ -0,0 +1,60 @@ +--- +chapter: 19 +pageNumber: 124 +description: இந்த அத்தியாயத்தில், ஜாவாஸ்கிரிப்ட் கெட்டர்கள் (getters) மற்றும் செட்டர்கள் (setters) பற்றி அறிந்து கொள்வோம். ஜாவாஸ்கிரிப்ட் கெட்டர்கள் மற்றும் செட்டர்கள் பொருள் பண்புகளுக்கான (object properties) அணுகலை வழங்கும் சிறப்பு முறைகள் (methods) ஆகும். பண்புகளின் மதிப்புகளைப் படிக்கக் (read) கெட்டர்கள் பயன்படுத்தப்படுகின்றன, அதேசமயம் பண்புகளுக்கு மதிப்புகளை எழுதச் (write) செட்டர்கள் பயன்படுத்தப்படுகின்றன. + +--- + +## கெட்டர்கள் மற்றும் செட்டர்கள் (Getters and Setters) + +ECMAScript 5 (ES5 2009) கெட்டர் மற்றும் செட்டர்களை அறிமுகப்படுத்தியது. + +ஜாவாஸ்கிரிப்டில், கெட்டர்கள் மற்றும் செட்டர்கள் என்பவை பண்புகளுக்கான (properties) மதிப்பைப் பெற (get) அல்லது அமைக்கப் (set) பயன்படுத்தப்படும் முறைகள் (methods) ஆகும். கெட்டர்கள் மற்றும் செட்டர்களைப் பயன்படுத்தும்போது, நீங்கள் சிறந்த தரவுத் தரத்தை (data quality) உறுதி செய்யலாம். கெட்டர்கள் மற்றும் செட்டர்கள் ஒரு பொருளின் பண்புகள் மற்றும் முறைகளுக்கான எளிமையான தொடரியலை (syntax) வழங்குகின்றன. தரவு இணைப்பிற்குக் (Data Encapsulation) கெட்டர்கள் மற்றும் செட்டர்கள் பயன்படுத்தப்படுகின்றன. + +கெட்டர்கள் மற்றும் செட்டர்களை ஏன் பயன்படுத்த வேண்டும்? + +- இது எளிமையான தொடரியலைத் (syntax) தருகிறது +- இது பண்புகள் மற்றும் முறைகளுக்குச் சமமான தொடரியலை அனுமதிக்கிறது. +- இது சிறந்த தரவுத் தரத்தைப் பாதுகாக்க முடியும். +- திரைமறைவில் (behind-the-scenes) விஷயங்களைச் செய்வதற்கு இது பயனுள்ளதாக இருக்கும். + +## ஜாவாஸ்கிரிப்ட் கெட்டர் (get முக்கியச்சொல் (keyword)) +இந்த எடுத்துக்காட்டு மொழிப் பண்பின் (language property) மதிப்பைப் பெற ஒரு lang பண்பைப் பயன்படுத்துகிறது. + +```sh + +// Create an object: +const person = { + firstName: "John", + lastName: "Doe", + language: "en", + get lang() { + return this.language; + } +}; + +// Display data from the object using a getter: +document.getElementById("demo").innerHTML = person.lang; +``` + +## ஜாவாஸ்கிரிப்ட் செட்டர் (set முக்கியச்சொல் (keyword)) +இந்த எடுத்துக்காட்டு மொழிப் பண்பின் மதிப்பை அமைக்க (set) ஒரு lang பண்பைப் பயன்படுத்துகிறது. + +```sh +const person = { + firstName: "John", + lastName: "Doe", + language: "", + set lang(lang) { + this.language = lang; + } +}; + +// Set an object property using a setter: +person.lang = "en"; + +// Display data from the object: +document.getElementById("demo").innerHTML = person.language; +``` + +ஜாவாஸ்கிரிப்டில் உள்ள `getters` மற்றும் `setters` என்பவை பொருள் பண்புகளுக்கான (object properties) அணுகலைக் கட்டுப்படுத்தவும் கூடுதல் செயல்பாட்டை வழங்கவும் உதவும் சக்திவாய்ந்த கருவிகள் (tools) ஆகும். தனிப்பயன் தர்க்கத்துடன் (custom logic) பண்பு மதிப்புகளைப் (property values) மீட்டெடுக்கக் கெட்டர்கள் அனுமதிக்கின்றன, அதே சமயம் உள்வரும் மதிப்புகளைச் (incoming values) சரிபார்க்கவும் திருத்தவும் செட்டர்கள் உதவுகின்றன. கெட்டர்கள் மற்றும் செட்டர்களைப் பயன்படுத்துவதன் மூலம், நாம் தரவு இணைப்பைப் (data encapsulation) பராமரிக்கலாம், பாதுகாப்பை (security) மேம்படுத்தலாம் மற்றும் நமது பொருள்களின் ஒருமைப்பாட்டை (integrity) உறுதிப்படுத்தலாம். diff --git a/ta/miscellaneous/ECMA-script.md b/ta/miscellaneous/ECMA-script.md new file mode 100644 index 00000000..c3c81465 --- /dev/null +++ b/ta/miscellaneous/ECMA-script.md @@ -0,0 +1,109 @@ +--- +chapter: 19 +pageNumber: 136 +description: இந்த மார்க்டவுன் ஆவணம் ECMAScript, அதன் வரலாறு, அம்சங்கள் மற்றும் இணைய மேம்பாட்டில் அதன் பங்கு பற்றிய கண்ணோட்டத்தை வழங்குகிறது. +--- + +# ECMAScript (ES) + +ECMAScript, பொதுவாக ES என்று சுருக்கமாக அழைக்கப்படுகிறது, இது ஒரு தரப்படுத்தப்பட்ட ஸ்கிரிப்டிங் மொழி விவரக்குறிப்பு (standardized scripting language specification) ஆகும். இது பல நிரலாக்க மொழிகளுக்கான அடித்தளமாகச் செயல்படுகிறது, ஜாவாஸ்கிரிப்ட் மிகவும் பிரபலமான மற்றும் பரவலாகப் பயன்படுத்தப்படும் செயலாக்கமாகும். இந்த மார்க்டவுன் ஆவணம் (Markdown document) ECMAScript, அதன் வரலாறு, அம்சங்கள் மற்றும் இணைய மேம்பாட்டில் அதன் பங்கு பற்றிய கண்ணோட்டத்தை வழங்குகிறது. + +## ECMAScript என்றால் என்ன? + +- **தரப்படுத்தப்பட்ட மொழி (Standardized Language)**: ECMAScript என்பது ECMA International ஆல் பராமரிக்கப்படும் ஒரு தரப்படுத்தப்பட்ட ஸ்கிரிப்டிங் மொழி விவரக்குறிப்பாகும். நிலைத்தன்மை மற்றும் இயங்குதன்மை (consistency and interoperability) ஆகியவற்றை உறுதி செய்வதற்காக மொழியின் தொடரியல் (syntax) மற்றும் சொற்பொருளை (semantics) இது வரையறுக்கிறது. + +- **ஜாவாஸ்கிரிப்ட் செயலாக்கம் (JavaScript Implementation)**: ஜாவாஸ்கிரிப்ட் என்பது ECMAScript இன் மிக முக்கியமான செயலாக்கமாகும், ஆனால் ActionScript போன்ற பிற மொழிகளும் இந்த விவரக்குறிப்பை அடித்தளமாகப் பயன்படுத்துகின்றன. + +## ECMAScript இன் வரலாறு + +- **ES1 (ECMAScript 1)**: 1997 இல் வெளியிடப்பட்டது. ஜாவாஸ்கிரிப்ட்டிற்கு அடித்தளம் அமைத்தது. +- **ES2 (ECMAScript 2)**: 1998 இல் வெளியிடப்பட்டது. ISO/IEC 16262 உடன் சீரமைக்கச் சிறிய தலையங்க மாற்றங்கள் (Minor editorial changes). +- **ES3 (ECMAScript 3)**: 1999 இல் வெளியிடப்பட்டது. வழக்கமான கோவைகள் (regular expressions), `try/catch` விதிவிலக்கு கையாளுதல் (exception handling) மற்றும் `do/while` சுழல்கள் (loops) போன்ற குறிப்பிடத்தக்க மேம்பாடுகளை அறிமுகப்படுத்தியது. +- **ES5 (ECMAScript 5)**: 2009 இல் வெளியிடப்பட்டது. `strict mode`, `JSON` ஆதரவு, `Object.create()`, `Object.defineProperty()` மற்றும் வரிசை முறைகள் (`map`, `filter`, `reduce`) போன்ற புதிய அம்சங்கள் சேர்க்கப்பட்டன. +- **ES6 (ECMAScript 2015)**: 2015 இல் வெளியிடப்பட்டது. அம்பு செயல்பாடுகள் (arrow functions), வகுப்புகள் (classes), தொகுதிகள் (modules), டெம்ப்ளேட் லிட்டரல்கள், டிஸ்ட்ரக்சரிங், `let`/`const`, `for...of` சுழல்கள், பிராமிஸ்கள் மற்றும் `Symbol` ஆகியவற்றுடன் முக்கிய மைல்கல். +- **ES7 (ECMAScript 2016)**: 2016 இல் வெளியிடப்பட்டது. `Array.prototype.includes()` மற்றும் அடுக்குக்குறியீடு ஆபரேட்டர் (exponentiation operator) (`**`) அறிமுகப்படுத்தப்பட்டது. +- **ES8 (ECMAScript 2017)**: 2017 இல் வெளியிடப்பட்டது. `async/await`, `Object.values()`, `Object.entries()`, `Object.getOwnPropertyDescriptors()` மற்றும் சரம் திணிப்பு (string padding) (`padStart`/`padEnd`) சேர்க்கப்பட்டது. +- **ES9 (ECMAScript 2018)**: 2018 இல் வெளியிடப்பட்டது. பொருட்களுக்கான (objects) ரெஸ்ட்/ஸ்ப்ரெட் (rest/spread) பண்புகள் (properties), `Promise.prototype.finally()` மற்றும் ஒத்திசைவற்ற மறு செய்கை (asynchronous iteration) அறிமுகப்படுத்தப்பட்டது. +- **ES10 (ECMAScript 2019)**: 2019 இல் வெளியிடப்பட்டது. `Array.prototype.flat()`, `Array.prototype.flatMap()`, `Object.fromEntries()`, `String.prototype.trimStart()`, `String.prototype.trimEnd()` மற்றும் `Symbol.prototype.description` சேர்க்கப்பட்டது. +- **ES11 (ECMAScript 2020)**: 2020 இல் வெளியிடப்பட்டது. `BigInt`, `Promise.allSettled()`, `globalThis`, விருப்பச் சங்கிலி (optional chaining) (`?.`) மற்றும் நல்யிஷ் கோலேஸிங் ஆபரேட்டர் (nullish coalescing operator) (`??`) அறிமுகப்படுத்தப்பட்டது. +- **ES12 (ECMAScript 2021)**: 2021 இல் வெளியிடப்பட்டது. `String.prototype.replaceAll()`, `Promise.any()`, `AggregateError`, தருக்க ஒதுக்கீட்டு ஆபரேட்டர்கள் (logical assignment operators) (`&&=`, `||=`, `??=`) மற்றும் `WeakRefs` சேர்க்கப்பட்டது. +- **ES13 (ECMAScript 2022)**: 2022 இல் வெளியிடப்பட்டது. உயர்மட்ட `await`, `Object.hasOwn()`, `Error.cause`, `Array`, `String` மற்றும் `TypedArray` ஆகியவற்றிற்கான `at()` முறை மற்றும் தனிப்பட்ட வகுப்புப் புலங்கள்/முறைகளை (private class fields/methods) அறிமுகப்படுத்தியது. +- **ES14 (ECMAScript 2023)**: 2023 இல் வெளியிடப்பட்டது. `Array.prototype.toReversed()`, `Array.prototype.toSorted()`, `Array.prototype.toSpliced()`, `Array.prototype.with()` மற்றும் `Symbol.prototype.description` ஆகியவை கெட்டராகச் (getter) சேர்க்கப்பட்டது. + +# ECMAScript (ES) ஜாவாஸ்கிரிப்ட்டுக்கு ஏன் தரப்படுத்தப்பட்டுள்ளது (Why ECMAScript (ES) is Standardized for JavaScript) + +ஜாவாஸ்கிரிப்ட்டுக்கு ECMAScript ஏன் முக்கியமானது, தரப்படுத்தலில் அதன் பங்கு மற்றும் மொழிக்கான அதன் நன்மைகள் பற்றி ஆவணத்தின் இந்தப் பகுதி விவரிக்கிறது. + +## தரப்படுத்தலின் தேவை (The Need for Standardization) + +- **மொழி நிலைத்தன்மை (Language Consistency)**: ஜாவாஸ்கிரிப்ட், இணைய மேம்பாட்டிற்குப் பரவலாகப் பயன்படுத்தப்படும் நிரலாக்க மொழியாக இருப்பதால், பல்வேறு செயலாக்கங்கள் (implementations) மற்றும் சூழல்களில் (environments) நிலைத்தன்மையை உறுதி செய்ய ஒரு தரப்படுத்தப்பட்ட விவரக்குறிப்பு தேவைப்பட்டது. + +- **இயங்குதன்மை (Interoperability)**: வெவ்வேறு இணைய உலாவிகள் (web browsers) மற்றும் இயந்திரங்கள் ஜாவாஸ்கிரிப்ட்டின் சொந்த விளக்கங்களைக் கொண்டிருக்கலாம். அனைத்து தளங்களிலும் (platforms) ஜாவாஸ்கிரிப்ட் குறியீடு சீராகச் செயல்படுவதை உறுதிசெய்ய ஒரு தரநிலை உதவுகிறது. + +## ECMAScript இன் பங்கு (The Role of ECMAScript) + +- **மொழியை வரையறுத்தல் (Defining the Language)**: ECMAScript அதன் தொடரியல் (syntax), தரவு வகைகள் (data types), செயல்பாடுகள் (functions) மற்றும் அடிப்படைப் பொருள்கள் (fundamental objects) உள்ளிட்ட ஜாவாஸ்கிரிப்ட்டின் முக்கிய அம்சங்களை வரையறுக்கிறது. + +- **தரநிலைப்படுத்தல் அமைப்பு (Standardization Body)**: ECMAScript ஆனது தரநிலை அமைப்பான ECMA International (European Computer Manufacturers Association) மூலம் பராமரிக்கப்பட்டு உருவாக்கப்படுகிறது. இந்த அமைப்பு ஜாவாஸ்கிரிப்ட் ஒரு நன்கு வரையறுக்கப்பட்ட மற்றும் நிலையான மொழியாக இருப்பதை உறுதி செய்கிறது. + +- **பதிப்பு பரிணாமம் (Version Evolution)**: ECMAScript நவீன இணைய மேம்பாட்டின் தேவைகளுடன் ஜாவாஸ்கிரிப்ட்டைப் புதுப்பித்து வைத்து, ஒவ்வொரு புதிய பதிப்பிலும் புதிய மொழி அம்சங்களையும் மேம்பாடுகளையும் அறிமுகப்படுத்துகிறது. + +## ECMAScript தரநிலைப்படுத்தலின் நன்மைகள் (Benefits of ECMAScript Standardization) + +- **நிலைத்தன்மை (Consistency)**: தரப்படுத்தல் ஜாவாஸ்கிரிப்ட் வெவ்வேறு தளங்கள் மற்றும் உலாவிகளில் தொடர்ந்து செயல்படுவதை உறுதிசெய்கிறது, இணக்கத்தன்மை (compatibility) சிக்கல்களைக் குறைக்கிறது. + +- **இயங்குதன்மை (Interoperability)**: டெவலப்பர்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பல்வேறு சூழல்களில் உத்தேசித்துள்ளபடி செயல்படும் என்பதை அறிந்து, நம்பிக்கையுடன் எழுதலாம். + +- **புதுமை (Innovation)**: ECMAScript இன் தற்போதைய வளர்ச்சி புதிய மொழி அம்சங்கள் மற்றும் மேம்பாடுகளை அறிமுகப்படுத்த அனுமதிக்கிறது, எப்போதும் மாறிவரும் இணைய நிலப்பரப்புடன் (web landscape) ஜாவாஸ்கிரிப்ட் உருவாக உதவுகிறது. + +- **குறுக்கு-தளம் மேம்பாடு (Cross-Platform Development)**: தரநிலைப்படுத்தல், டெவலப்பர்கள் கிளையண்ட் (client) மற்றும் சர்வர்-பக்க (server-side) சூழல்கள் இரண்டிலும் வேலை செய்யும் குறியீட்டை எழுதுவதை எளிதாக்குகிறது. + +## ஜாவாஸ்கிரிப்ட் செயலாக்கங்கள் (JavaScript Implementations) + +- **முக்கிய உலாவிகள் (Major Browsers)**: Chrome, Firefox, Safari மற்றும் Edge போன்ற பிரபலமான வலை உலாவிகள் (web browsers) ஜாவாஸ்கிரிப்ட் குறியீட்டை இயக்க ECMAScript ஐச் செயல்படுத்துகின்றன. + +- **Node.js**: Node.js, ஒரு சர்வர்-பக்க (server-side) ஜாவாஸ்கிரிப்ட் இயக்க நேரம், ECMAScript தரநிலைகளுடன் ஒத்துப்போகிறது, ஜாவாஸ்கிரிப்டைச் சர்வர்-பக்க நிரலாக்கத்திற்குப் பயன்படுத்த உதவுகிறது. + +## ECMAScript இன் முக்கிய அம்சங்கள் (Key Features of ECMAScript) + +- **அம்பு செயல்பாடுகள் (Arrow Functions)**: செயல்பாடுகளை (functions) வரையறுப்பதற்கான சுருக்கமான தொடரியல் (syntax) மற்றும் `this` இன் லெக்சிகல் பிணைப்பை (lexical binding) வழங்கவும். + +- **வகுப்புகள் (Classes)**: பொருள் சார்ந்த நிரலாக்கத்திற்கான (object-oriented programming) வகுப்புத் தொடரியல் (class syntax) அறிமுகப்படுத்தப்பட்டது. + +- **தொகுதிகள் (Modules)**: மாட்யூல் இறக்குமதிகள் (imports) மற்றும் ஏற்றுமதிகளுக்கு (exports) சொந்த ஆதரவு (native support) சேர்க்கப்பட்டது. + +- **பிராமிஸ்கள் (Promises)**: ஒத்திசைவற்ற (asynchronous) செயல்பாடுகளை மேம்படுத்தப்பட்ட கையாளுதலுக்காகப் பிராமிஸ்கள் அறிமுகப்படுத்தப்பட்டது. + +- **Async/Await**: ஒத்திசைவற்ற செயல்பாடுகளை (async functions) அறிமுகப்படுத்துவதன் மூலம் எளிமைப்படுத்தப்பட்ட ஒத்திசைவற்ற குறியீடு. + +- **let மற்றும் const**: `let` மற்றும் மாறிலிகளுடன் (constants) `const` தொகுதி-நோக்க மாறிகள் (Block-scoped variables). + +- **டிஸ்ட்ரக்சரிங் (Destructuring)**: வரிசைகள் மற்றும் பொருள்களிலிருந்து மதிப்புகளை (values) எளிதாகப் பிரித்தெடுக்க அனுமதிக்கிறது. + +- **டெம்ப்ளேட் லிட்டரல்கள் (Template Literals)**: ಹೆಚ್ಚು நெகிழ்வான சரம் இடைக்கணிப்பிற்காகத் (string interpolation) டெம்ப்ளேட் லிட்டரல்கள் அறிமுகப்படுத்தப்பட்டது. + +## வலை மேம்பாட்டில் ECMAScript இன் பங்கு (The Role of ECMAScript in Web Development) + +- **கிளையண்ட் பக்க ஸ்கிரிப்டிங் (Client-Side Scripting)**: ECMAScript என்பது இணைய மேம்பாட்டில் கிளையண்ட்-பக்க ஸ்கிரிப்டிங்கிற்கான அடித்தளமாகும். இது ஊடாடும் (interactive) வலைப் பயன்பாடுகளுக்குச் சக்தி அளிக்கிறது. + +- **இணக்கத்தன்மை (Compatibility)**: நவீன உலாவிகள் சமீபத்திய ECMAScript அம்சங்களை ஆதரிக்கும் அதே வேளையில், பழைய உலாவிகளுக்கான பின்தங்கிய இணக்கத்தன்மையை (backward compatibility) டெவலப்பர்கள் கருத்தில் கொள்ள வேண்டும். + +- **டிரான்ஸ்பைலர்கள் (Transpilers)**: பேபல் (Babel) போன்ற கருவிகள், புதிய ECMAScript குறியீட்டைப் பரந்த உலாவி ஆதரவிற்காகப் பழைய பதிப்புகளாக மாற்றலாம். + +- **டைப்ஸ்கிரிப்ட் (TypeScript)**: டைப்ஸ்கிரிப்ட், ECMAScript இன் சூப்பர்செட், மேம்படுத்தப்பட்ட கருவி (tooling) மற்றும் குறியீட்டுப் பாதுகாப்பிற்கான (code safety) நிலையான தட்டச்சு (static typing) ஆகியவற்றைச் சேர்க்கிறது. + +## ECMAScript தொடரியல் சில எடுத்துக்காட்டுகள் (Some Examples of ECMAScript Syntax) + +- **அம்பு செயல்பாட்டுத் தொடரியல் (Arrow Function Syntax)**: `const x = (x, y) => x + y;` + +- **வகுப்புத் தொடரியல் (Class Syntax)**: `class ClassName { constructor() { ... } }` + +- **பிராமிஸ் தொடரியல் (Promise Syntax)**: `const promiseA = new Promise(myExecutorFunc);` + `const promiseB = promiseA.then(handleFulfilled1, handleRejected1);` + +- **ஸ்ப்ரெட் ஆபரேட்டர் (Spread Operator)**: `const year = [...q1, ...q2, ...q3, ...q4];` + +- **வரைபடம் (Map)**: `const x = new Map([ ["a", 500],["b", 300],["c", 200] ]);` + +ECMAScript இணைய மேம்பாட்டின் ஒரு அடிப்படைப் பகுதியாகும், மாறும் மற்றும் ஊடாடும் வலைப் பயன்பாடுகளை நாம் எவ்வாறு உருவாக்குகிறோம் என்பதை வடிவமைக்கிறது. நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்குச் சமீபத்திய ECMAScript அம்சங்களைப் பற்றித் தெரிந்துகொள்வது அவசியம். +ECMAScript ஜாவாஸ்கிரிப்ட்டுக்கு ஒரு தரப்படுத்தப்பட்ட அடித்தளத்தை வழங்குவதில் ஒரு முக்கியப் பங்கை வகிக்கிறது, நிலைத்தன்மை, இயங்குதன்மை மற்றும் மொழியின் தொடர்ச்சியான முன்னேற்றத்தை உறுதி செய்கிறது. இந்தத் தரநிலைப்படுத்தல், டெவலப்பர்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை பல்வேறு தளங்கள் மற்றும் சூழல்களில் நம்பகத்தன்மையுடன் வேலை செய்யும் என்பதை அறிந்து நம்பிக்கையுடன் எழுத அனுமதிக்கிறது. diff --git a/ta/miscellaneous/README.md b/ta/miscellaneous/README.md new file mode 100644 index 00000000..e02715b4 --- /dev/null +++ b/ta/miscellaneous/README.md @@ -0,0 +1,24 @@ +--- +layout: editorial +chapter: 19 +pageNumber: 112 +--- + +# அத்தியாயம் 19 +# இதர (Miscellaneous) + +இந்த அத்தியாயத்தில், குறியீட்டை எழுதும் போது நாம் சந்திக்கும் பல்வேறு தலைப்புகளைப் பற்றி விவாதிப்போம். தலைப்புகள் கீழே பட்டியலிடப்பட்டுள்ளன: + +* [API மற்றும் AJAX (API and AJAX)](./api-ajax.md) +* [JS பயன்பாட்டை உருவாக்குதல் மற்றும் வரிசைப்படுத்துதல் (Building and Deploying JS application)](./building-and-deploying.md) +* [கால்பேக் (Callback)](./callback.md) +* [கரியிங் (Currying)](./currying.md) +* [பிழைத்திருத்தம் (Debugging)](./debugging.md) +* [ECMA ஸ்கிரிப்ட் (ECMA Script)](./ECMA-script.md) +* [உலகளாவிய தடம் (Global Footprint)](./global-footprint.md) +* [ஹொயிஸ்டிங் (Hoisting)](./hoisting.md) +* [இணைக்கப்பட்ட பட்டியல் (Linked List)](./linked-list.md) +* [பாலிஃபில்கள் மற்றும் டிரான்ஸ்பைலர்கள் (Polyfills and Transpilers)](./polyfills-and-transpilers.md) +* [ஒற்றை நூல் தன்மை (Single Thread Nature)](./single-thread-nature.md) +* [டெம்ப்ளேட் லிட்டரல்கள் (Template Literals)](./template-literals.md) +* [சோதனை (Testing)](./testing.md) diff --git a/ta/miscellaneous/api-ajax.md b/ta/miscellaneous/api-ajax.md new file mode 100644 index 00000000..3404bc19 --- /dev/null +++ b/ta/miscellaneous/api-ajax.md @@ -0,0 +1,167 @@ +--- +chapter: 19 +pageNumber: 129 +description: இந்த அத்தியாயம் API களின் (Application Programming Interfaces) கருத்தை அறிமுகப்படுத்துகிறது மற்றும் AJAX (Asynchronous JavaScript and XML) மூலம் அவற்றின் பயன்பாட்டை விளக்குகிறது. மேம்பட்ட செயல்பாட்டிற்காக வெளிப்புற மூலங்களிலிருந்து (external sources) தரவை எவ்வாறு பெறுவது மற்றும் வலைப் பயன்பாடுகளில் (web applications) அவற்றை எவ்வாறு ஒருங்கிணைப்பது என்பதை அறிக. +--- + +# Web API மற்றும் AJAX (Web API and AJAX) +இந்தப் பகுதியில், API மற்றும் AJAX பற்றி விவாதிப்போம், பயன்பாடுகள் சேவையகங்களுடன் (servers) தொடர்புகொள்ளவும், முழுப் பக்க மறுஏற்றம் (full page reload) தேவையில்லாமல் தரவை அனுப்பவோ அல்லது மீட்டெடுக்கவோ உதவும் இரண்டு முக்கியமான தொழில்நுட்பங்கள். + +## API (Application Programming Interface) + +ஒரு **API** (Application Programming Interface) என்பது வெவ்வேறு மென்பொருள் பயன்பாடுகளை ஒன்றுக்கொன்று தொடர்புகொள்ள அனுமதிக்கும் விதிகள் மற்றும் நெறிமுறைகளின் (protocols) தொகுப்பாகும். பயன்பாடுகள் தகவலைக் கோரவும் (request) பரிமாறவும் பயன்படுத்தக்கூடிய முறைகள் மற்றும் தரவு வடிவங்களை இது வரையறுக்கிறது. + +### முக்கியப் புள்ளிகள் (Key Points) + +- டெவலப்பர்கள் மற்ற மென்பொருள் கூறுகள் (components), சேவைகள் அல்லது இயங்குதளங்களின் (platforms) உள் செயல்பாடுகளைப் புரிந்து கொள்ளாமலேயே அவற்றின் செயல்பாட்டை அணுக APIகள் உதவுகின்றன. + +- பயன்பாடுகள் கோரிக்கைகளை (requests) அனுப்பவும் பதில்களைப் பெறவும் APIகள் ஒரு வழியை வழங்குகின்றன, இது தடையின்றி (seamlessly) தொடர்பு கொள்ளவும் தரவைப் பகிரவும் அனுமதிக்கிறது. + +- இணையப் பயன்பாடுகளை இணையத்தில் தொடர்புகொள்ள அனுமதிக்கும் **இணைய APIகள் (web APIs)**, மீண்டும் பயன்படுத்தக்கூடிய குறியீட்டுச் செயல்பாடுகளை வழங்கும் **நூலக APIகள் (library APIs)** மற்றும் அடிப்படை OS உடன் தொடர்புகொள்வதை இயக்கும் **இயக்க முறைமை APIகள் (operating system APIs)** ஆகியவை APIகளின் பொதுவான வகைகளாகும். + +- ஒருங்கிணைப்புகளை (integrations) உருவாக்குவதற்கும், ஏற்கனவே உள்ள இயங்குதளங்களின் (platforms) மேல் மென்பொருளை உருவாக்குவதற்கும், பல்வேறு அமைப்புகளுக்கிடையே இயங்குதன்மையை (interoperability) செயல்படுத்துவதற்கும் APIகள் அவசியம். + +- டெவலப்பர்கள் அல்லது சேவை வழங்குநர்களால் அடிக்கடி வழங்கப்படும் API ஆவணங்கள் (API documentation), கிடைக்கக்கூடிய முனைப்புள்ளிகள் (endpoints), கோரிக்கை முறைகள் (request methods) மற்றும் பதில் வடிவங்கள் (response formats) உள்ளிட்ட API ஐ எவ்வாறு பயன்படுத்துவது என்பதை விளக்குகிறது. + +- சமூக ஊடக APIகள் (எ.கா., Facebook Graph API), கட்டண நுழைவாயில் (payment gateway) APIகள் (எ.கா., PayPal API) மற்றும் கிளவுட் சேவை APIகள் (எ.கா., AWS API) ஆகியவை பிரபலமான APIகளின் எடுத்துக்காட்டுகளில் அடங்கும். + +### APIகளின் நன்மைகள் (Benefits of APIs) + +- **இயங்குதன்மை (Interoperability):** APIகள் வெவ்வேறு மென்பொருள் அமைப்புகளை ஒன்றாகச் செயல்பட அனுமதிக்கின்றன, இணக்கத்தன்மை (compatibility) மற்றும் தரவுப் பரிமாற்றத்தை (data exchange) ஊக்குவிக்கின்றன. + +- **செயல்திறன் (Efficiency):** டெவலப்பர்கள் நேரத்தையும் முயற்சியையும் மிச்சப்படுத்த, குறிப்பிட்ட செயல்பாட்டை உருவாக்குவதில் கவனம் செலுத்தி, தற்போதுள்ள APIகளைப் பயன்படுத்திக்கொள்ளலாம். + +- **அளவிடுதல் (Scalability):** மூன்றாம் தரப்பு (third-party) கருவிகள் மற்றும் சேவைகளுடன் ஒருங்கிணைப்பதன் மூலம் சேவைகள் மற்றும் அம்சங்களின் விரிவாக்கத்தை APIகள் செயல்படுத்துகின்றன. + +- **புதுமை (Innovation):** டெவலப்பர்கள் புதிய பயன்பாடுகள் மற்றும் சேவைகளை உருவாக்குவதற்கான வாய்ப்புகளைத் திறப்பதன் மூலம் APIகள் புதுமைகளை வளர்க்கின்றன. + +- **பாதுகாப்பு (Security):** தரவு மற்றும் சேவைகளுக்கான பாதுகாப்பான அணுகலை (secure access) உறுதி செய்வதற்காக APIகள் பெரும்பாலும் அங்கீகாரம் (authentication) மற்றும் அங்கீகார வழிமுறைகளை (authorization mechanisms) உள்ளடக்கியது. + +## AJAX (Asynchronous JavaScript and XML) + +AJAX, சுருக்கமாக **Asynchronous JavaScript and XML**, வலை மேம்பாட்டில் (web development) ஒரு அடிப்படைத் தொழில்நுட்பமாகும். முழுப் பக்க மறுஏற்றம் (full page reload) தேவையில்லாமல், சேவையகத்திற்கு (server) ஒத்திசைவற்ற கோரிக்கைகளை (asynchronous requests) மேற்கொள்ளவும், தரவை மீட்டெடுக்கவும், வலைப்பக்கத்தின் பகுதிகளைப் புதுப்பிக்கவும் இது வலைப் பயன்பாடுகளுக்கு உதவுகிறது. பெயர் XML ஐப் பரிந்துரைக்கும் அதே வேளையில், AJAX பல்வேறு தரவு வடிவங்களுடன் (data formats) செயல்பட முடியும், JSON மிகவும் பொதுவானது. + +### AJAX என்றால் என்ன? + +அதன் மையத்தில், AJAX என்பது பக்கத்துடனான பயனரின் தொடர்புக்கு இடையூறு விளைவிக்காமல், வலைப்பக்கங்களைப் பின்னணியில் உள்ள சேவையகத்துடன் (server) தொடர்பு கொள்ள அனுமதிக்கும் ஒரு நுட்பமாகும். இந்த ஒத்திசைவற்ற நடத்தை (asynchronous behavior) ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தி அடையப்படுகிறது மற்றும் மேலும் ஊடாடும் (interactive) மற்றும் பதிலளிக்கக்கூடிய வலைப் பயன்பாடுகளின் (responsive web applications) வளர்ச்சிக்கு உதவுகிறது. + +### AJAX எவ்வாறு செயல்படுகிறது? + +1. **ஜாவாஸ்கிரிப்ட்**: கோரிக்கைகளை (requests) தொடங்குவதற்கும் பதில்களை (responses) ஒத்திசைவின்றி (asynchronously) கையாளுவதற்கும் AJAX ஜாவாஸ்கிரிப்ட்டை பெரிதும் நம்பியுள்ளது. + +2. **XMLHttpRequest (XHR) பொருள்**: வரலாற்று ரீதியாக `XMLHttpRequest` பொருள் (object) பயன்படுத்தப்பட்டாலும், நவீன இணைய மேம்பாடு பெரும்பாலும் AJAX கோரிக்கைகளுக்குப் `fetch` API ஐப் பயன்படுத்துகிறது, இது மிகவும் உள்ளுணர்வு மற்றும் நெகிழ்வான அணுகுமுறையை (flexible approach) வழங்குகிறது. + +3. **சேவையகத் தொடர்பு (Server Communication)**: பயனர் ஒரு பட்டனைக் கிளிக் செய்வது போன்ற ஒரு நிகழ்வைத் தூண்டும்போது, ஜாவாஸ்கிரிப்ட் HTTP கோரிக்கையைச் சேவையகத்திற்கு (server) அனுப்புகிறது. இந்தக் கோரிக்கைகள் GET (தரவைப் பெறுவதற்கு) அல்லது POST (தரவைச் சேவையகத்திற்கு அனுப்புவதற்கு) ஆக இருக்கலாம். + +4. **ஒத்திசைவற்ற செயலாக்கம் (Asynchronous Processing)**: AJAX கோரிக்கைகள் ஒத்திசைவற்றவை, அதாவது பதிலுக்காகக் காத்திருக்கும் போது உலாவி (browser) மற்ற குறியீட்டைத் தொடர்ந்து செயல்படுத்த முடியும். இது பயனர் இடைமுகம் (user interface) உறைவதைத் (freezing) தடுக்கிறது. + +5. **பதில் கையாளுதல் (Response Handling)**: சேவையகம் கோரிக்கையைச் செயல்படுத்தியதும், அது கிளையண்டிற்கு (client) ஒரு பதிலை (response) அனுப்புகிறது. ஜாவாஸ்கிரிப்ட் இந்தப் பதிலைக் கையாளுகிறது, பொதுவாக ஆவணப் பொருள் மாதிரியை (Document Object Model - DOM) புதிய தரவுகளுடன் புதுப்பிப்பதன் மூலம். + +6. **ரெண்டரிங் (Rendering)**: புதுப்பிக்கப்பட்ட உள்ளடக்கம் (content) முழுப் பக்க மறுஏற்றம் தேவையில்லாமல் இணையப் பக்கத்தில் ரெண்டர் செய்யப்படுகிறது (rendered), இதன் விளைவாக மென்மையான பயனர் அனுபவம் (user experience) கிடைக்கும். + +### AJAX இன் நன்மைகள் + +- **மேம்படுத்தப்பட்ட பயனர் அனுபவம் (Improved User Experience)**: முழுப் பக்கப் புதுப்பிப்புகள் (full page refreshes) தேவையில்லாமல் தரவை ஏற்றவும் காண்பிக்கவும் AJAX வலைப் பயன்பாடுகளை அனுமதிக்கிறது, பயனர் அனுபவத்தை மிகவும் தடையற்றதாகவும் (seamless) ஊடாடும் வகையிலும் (interactive) ஆக்குகிறது. + +- **செயல்திறன் (Efficiency)**: AJAX கோரிக்கைகள் இலகுரக (lightweight) மற்றும் தேவையான தரவை மட்டுமே மாற்றும், அலைவரிசைப் பயன்பாட்டைக் (bandwidth usage) குறைக்கும் மற்றும் பயன்பாட்டின் செயல்திறனை (application performance) மேம்படுத்தும். + +- **நிகழ்நேரப் புதுப்பிப்புகள் (Real-time Updates)**: அரட்டைப் பயன்பாடுகள் (chat applications), நேரலை அறிவிப்புகள் (live notifications) மற்றும் டைனமிக் உள்ளடக்கப் புதுப்பிப்புகள் (dynamic content updates) போன்ற நிகழ்நேர அம்சங்களை (real-time features) உருவாக்குவதற்கு AJAX முக்கியமானது. + +- **டைனமிக் ஏற்றுதல் (Dynamic Loading)**: உள்ளடக்கத்தை (content) தேவைக்கேற்ப (on-demand) ஏற்றலாம், இது வேகமான ஆரம்பப் பக்க ஏற்ற நேரங்களுக்கும் (initial page load times) அதிகப் பதிலளிக்கக்கூடிய பயன்பாடுகளுக்கும் (responsive applications) வழிவகுக்கும். + +### பொதுவான பயன்பாட்டு வழக்குகள் (Common Use Cases) + +AJAX பயன்படுத்தப்படும் சில பொதுவான காட்சிகள் (scenarios) பின்வருமாறு: + +- **படிவச் சமர்ப்பிப்புகள் (Form Submissions)**: சரிபார்ப்பு (validation) மற்றும் தரவுச் சமர்ப்பிப்புக்காக முழுப் பக்கத்தையும் மீண்டும் ஏற்றாமல் (reloading) படிவங்களைச் சமர்ப்பித்தல் (Submitting forms). + +- **எல்லையற்ற சுருள் (Infinite Scrolling)**: பயனர் பக்கத்தின் கீழே உருட்டும் (scrolls down) போது கூடுதல் உள்ளடக்கத்தை (content) ஏற்றுதல், தொடர்ச்சியான உலாவுதல் (browsing) அனுபவத்தை வழங்குகிறது. + +- **தானியங்கு-பரிந்துரைகள் (Auto-suggestions)**: பயனர்கள் தேடல் வினவல்களைத் (search queries) தட்டச்சு செய்யும்போது நிகழ்நேரத் தேடல் பரிந்துரைகளை (real-time search suggestions) வழங்குதல். + +- **உள்ளடக்கத்தைப் புதுப்பித்தல் (Updating Content)**: கைமுறைப் பக்கப் புதுப்பிப்புகள் (manual page refreshes) தேவையில்லாமல் செய்தி ஊட்டங்கள் (news feeds), வானிலைத் தகவல் அல்லது விளையாட்டு மதிப்பெண்கள் போன்ற உள்ளடக்கத்தை மாறும் (Dynamically) வகையில் புதுப்பித்தல். + +## AJAX ஐப் பயன்படுத்தி OpenWeatherMap API உடன் வானிலைத் தரவைப் பெறுதல் (Fetching Weather Data with OpenWeatherMap API using AJAX) + +இந்த எடுத்துக்காட்டில், OpenWeatherMap API இலிருந்து வானிலைத் தகவலைப் பெறவும், அதை இணையப் பக்கத்தில் காண்பிக்கவும் AJAX (Asynchronous JavaScript and XML) ஐ எவ்வாறு பயன்படுத்துவது என்பதை விளக்குவோம். + +### அறிமுகம் + +OpenWeatherMap API என்பது உலகெங்கிலும் உள்ள இடங்களுக்கான வானிலைத் தகவலைப் பெறுவதற்கான சக்திவாய்ந்த கருவியாகும். ஒரு குறிப்பிட்ட நகரத்திற்கான தற்போதைய வானிலைத் தரவைப் பெறுவதற்கும், உங்கள் பயன்பாடு அல்லது ஆவணங்களில் அதைக் காண்பிப்பதற்கும் API ஐ எவ்வாறு பயன்படுத்துவது என்பதை இந்த எடுத்துக்காட்டு விளக்குகிறது. + +### API திறவுகோல் (API Key) + +தொடங்குவதற்கு முன், [OpenWeatherMap](https://openweathermap.org/api) இலிருந்து அவர்களின் வானிலைத் தரவு API ஐ அணுக நீங்கள் API திறவுகோலுக்குப் பதிவு செய்ய வேண்டும். கீழே உள்ள குறியீட்டில் உள்ள `'YOUR_API_KEY'` என்பதை உங்கள் உண்மையான API திறவுகோலைக் கொண்டு மாற்றவும். + +```javascript +const apiKey = 'YOUR_API_KEY'; +``` +### எளிய வானிலைச் செயலி HTML (Simple Weather App HTML) + +இந்த எடுத்துக்காட்டில், OpenWeatherMap API இலிருந்து வானிலைத் தரவைப் பெற்று காண்பிக்கும் ஒரு எளிய வானிலைப் பயன்பாட்டிற்கான (weather app) HTML கட்டமைப்பை (structure) வழங்குவோம். + +#### HTML கட்டமைப்பு (HTML Structure) + +```html + + + + + + Weather App + + +

    Weather Report

    + +
    + +
    + + + +``` + +#### ஜாவாஸ்கிரிப்ட் (script.js) + +AJAX கோரிக்கையைக் (request) கையாளவும் பக்கத்தில் உள்ள வானிலைத் தரவைப் புதுப்பிக்கவும் `script.js` என்ற ஜாவாஸ்கிரிப்ட் கோப்பை உருவாக்கவும்: + +```javascript +// API Endpoint and Location +const apiUrl = 'https://api.openweathermap.org/data/2.5/weather'; +const location = 'New York'; // Replace with your desired location + +// Fetch Weather Data +const xhr = new XMLHttpRequest(); +xhr.open('GET', `${apiUrl}?q=${location}&appid=${apiKey}`, true); + +xhr.onload = function () { + if (xhr.status === 200) { + const weatherInfo = document.getElementById('weather-info'); + const data = JSON.parse(xhr.responseText); + const temperature = (data.main.temp - 273.15).toFixed(2); // Convert from Kelvin to Celsius + + const html = ` +

    Location: ${data.name}, ${data.sys.country}

    +

    Temperature: ${temperature} °C

    +

    Weather: ${data.weather[0].description}

    + `; + + weatherInfo.innerHTML = html; + } else { + const weatherInfo = document.getElementById('weather-info'); + weatherInfo.innerHTML = '

    Failed to fetch weather data.

    '; + } +}; + +xhr.send(); +``` +### முடிவு + + இணைய உலாவியில் (web browser) HTML கோப்பைத் திறக்கும்போது, குறிப்பிட்ட இடத்திற்கான (இந்த வழக்கில் New York) வானிலைத் தகவலைக் காண்பிக்கும். `'YOUR_API_KEY'` என்பதை உங்கள் உண்மையான OpenWeatherMap API திறவுகோலைக் கொண்டு மாற்றுவதை உறுதிசெய்யவும். + +AJAX ஐப் பயன்படுத்தி OpenWeatherMap API இலிருந்து வானிலைத் தரவை எவ்வாறு பெறுவது மற்றும் அதை ஒரு எளிய இணையப் பக்கத்தில் காண்பிப்பது என்பதை இந்த எடுத்துக்காட்டு விளக்குகிறது. நேரடி இணையதளத்திலிருந்து (live website) API ஐ அணுக நீங்கள் திட்டமிட்டால், உங்கள் HTML மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை இணையச் சேவையகத்தில் (web server) ஹோஸ்ட் செய்ய (host) நினைவில் கொள்ளுங்கள். அவ்வளவுதான்! OpenWeatherMap API மற்றும் AJAX ஐப் பயன்படுத்தி வானிலைத் தரவை வெற்றிகரமாகப் பெற்றுள்ளீர்கள் மற்றும் காண்பித்துள்ளீர்கள். + + +பயன்பாடுகள் (applications) ஒத்துழைக்கவும் (collaborate) தரவைச் சிறப்பாகப் பகிரவும் உதவுவதன் மூலம் நவீன மென்பொருள் மேம்பாட்டில் APIகள் முக்கியப் பங்கு வகிக்கின்றன. APIகளை எவ்வாறு பயன்படுத்துவது மற்றும் அவற்றை உங்கள் திட்டங்களில் ஒருங்கிணைப்பது என்பதைப் புரிந்துகொள்வது, அம்சம் நிறைந்த (feature-rich) மற்றும் ஒன்றோடொன்று இணைக்கப்பட்ட மென்பொருளை (interconnected software) உருவாக்குவதற்கு அடிப்படையாகும். + +AJAX என்பது நவீன வலை மேம்பாட்டில் ஒரு அடிப்படைத் தொழில்நுட்பமாகும், இது டெவலப்பர்களுக்கு மாறும் (dynamic) மற்றும் பதிலளிக்கக்கூடிய வலைப் பயன்பாடுகளை (responsive web applications) உருவாக்க அதிகாரம் அளிக்கிறது. பெயர் XML ஐப் பரிந்துரைக்கும் அதே வேளையில், AJAX பல்வேறு தரவு வடிவங்களுடன் (data formats) இணக்கமானது, பயனர் அனுபவத்தை மேம்படுத்துவதற்கும் ஊடாடும் வலைப் பயன்பாடுகளை உருவாக்குவதற்கும் இது ஒரு பல்துறை கருவியாக (versatile tool) அமைகிறது. diff --git a/ta/miscellaneous/building-and-deploying.md b/ta/miscellaneous/building-and-deploying.md new file mode 100644 index 00000000..aedf44d0 --- /dev/null +++ b/ta/miscellaneous/building-and-deploying.md @@ -0,0 +1,66 @@ +--- +chapter: 19 +pageNumber: 123 +description: +--- +# ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை உருவாக்குதல் மற்றும் வரிசைப்படுத்துதல் (Building and Deploying JavaScript Applications) + +ஒரு ஜாவாஸ்கிரிப்ட் பயன்பாட்டை உருவாக்குதல் மற்றும் வரிசைப்படுத்துதல் என்பது மேம்பாட்டுச் சூழலை (development environment) அமைப்பது முதல் இணையச் சேவையகத்தில் (web server) அல்லது ஹோஸ்டிங் பிளாட்ஃபார்மில் (hosting platform) பயன்பாட்டை வரிசைப்படுத்துவது வரையிலான தொடர்ச்சியான படிகளை உள்ளடக்கியது. இந்தச் செயல்முறையின் மூலம் தனிநபர்களுக்கு உதவ விரிவான வழிகாட்டி பின்வருமாறு: + +## மேம்பாட்டுச் சூழலை அமைத்தல் (Setting up the Development Environment) + +மேம்பாட்டுச் செயல்முறையைத் தொடங்குவதற்கு முன், டெவலப்பர் தங்கள் கணினியில் Node.js மற்றும் npm (Node Package Manager) நிறுவப்பட்டுள்ளதை உறுதிசெய்வது அவசியம். இந்த முக்கியமான கருவிகளை Node.js இன் அதிகாரப்பூர்வ இணையதளத்தில் [Node.js](https://nodejs.org/) இருந்து பெறலாம். கூடுதலாக, டெவலப்பர் ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்காக பொருத்தமான குறியீட்டு எடிட்டர் அல்லது ஒருங்கிணைந்த மேம்பாட்டுச் சூழலைத் (Integrated Development Environment - IDE) தேர்ந்தெடுக்க வேண்டும். [Visual Studio Code](https://code.visualstudio.com/), [Sublime Text](https://www.sublimetext.com/) மற்றும் [WebStorm](https://www.jetbrains.com/webstorm/) ஆகியவை பிரபலமான தேர்வுகளில் சில. + +Node.js மற்றும் npm இன் நிறுவல் ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்குத் தேவையான அத்தியாவசிய கருவிகள் மற்றும் நூலகங்களுக்கான அணுகலை வழங்குகிறது. பொருத்தமான குறியீட்டு எடிட்டர் அல்லது IDE ஐ கவனமாகத் தேர்ந்தெடுப்பது உற்பத்தித்திறனையும் குறியீட்டின் தரத்தையும் கணிசமாக மேம்படுத்தும். + +## ஜாவாஸ்கிரிப்ட் கட்டமைப்பு அல்லது நூலகத்தைத் தேர்ந்தெடுப்பது (Choosing a JavaScript Framework or Library) + +ஜாவாஸ்கிரிப்ட் கட்டமைப்பு அல்லது நூலகத்தின் தேர்வு, கையில் உள்ள திட்டத்தின் குறிப்பிட்ட தேவைகளைப் பொறுத்தது. திட்டத்தின் சிக்கலான தன்மை மற்றும் கோரிக்கைகளைப் பொறுத்து, [React](https://react.dev/), [Angular](https://angularjs.org/), [Vue.js](https://vuejs.org/) போன்ற நன்கு நிறுவப்பட்ட கட்டமைப்புகளுடன் (frameworks) பணியாற்ற டெவலப்பர்கள் தேர்வு செய்யலாம் அல்லது வெண்ணிலா ஜாவாஸ்கிரிப்ட்டின் (vanilla JavaScript) பயன்பாட்டைக் கடைப்பிடிக்கலாம். மேம்பாட்டுச் செயல்முறையைத் துரிதப்படுத்தவும், பராமரிப்பை (maintainability) மேம்படுத்தவும் கட்டமைப்புகள் மற்றும் முன் கட்டப்பட்ட கூறுகளின் (pre-built components) தேவையால் தேர்வு அடிப்படையில் வழிநடத்தப்படுகிறது. + +## திட்டத்தை உருவாக்குதல் (Creating the Project) + +புதிய திட்டத்தை (project) நிறுவ npm அல்லது yarn போன்ற பேக்கேஜ் மேனேஜரைப் (package manager) பயன்படுத்துவதன் மூலம் திட்டமிடல் வசதி செய்யப்படுகிறது. எடுத்துக்காட்டாக, புதிய Node.js திட்டத்தை அமைக்க `npm init` கட்டளையைச் செயல்படுத்துவதைப் பயன்படுத்தலாம். திட்டமிடலின் போது பேக்கேஜ் மேனேஜரை ஏற்றுக்கொள்வது ஒரு தரப்படுத்தப்பட்ட திட்டக் கட்டமைப்பை நிறுவுவதை உறுதி செய்கிறது மற்றும் சார்புகளின் மேலாண்மையை (management of dependencies) ஒழுங்குபடுத்துகிறது. இந்த அணுகுமுறை திட்ட அமைப்பு மற்றும் நிர்வாகத்தைப் பராமரிக்க கணிசமாக உதவுகிறது. + +## விண்ணப்ப மேம்பாடு (Application Development) + +ஜாவாஸ்கிரிப்ட் பயன்பாட்டைக் குறியீடாக்கும் (coding) செயல்முறை முழுவதும், தொகுதிகள் (modules) மற்றும் கூறுகளை (components) விடாமுயற்சியுடன் ஒழுங்கமைக்க டெவலப்பருக்கு அறிவுறுத்தப்படுகிறது. எதிர்காலத்தில் பராமரிப்பை எளிதாக்க இந்த நடைமுறை முக்கியமானது. ஒழுங்கமைக்கப்பட்ட மற்றும் மட்டுப்படுத்தப்பட்ட (modular) குறியீட்டின் வளர்ச்சி, பயன்பாடு எளிதில் பராமரிக்கக்கூடியதாகவும், பிழைத்திருத்துவதற்கு (debug) நேரடியானதாகவும் இருப்பதை உறுதி செய்வதில் முக்கியப் பங்கு வகிக்கிறது. கூடுதலாக, இந்த அணுகுமுறை குறியீடு மறுபயன்பாட்டை (code reusability) வளர்க்கிறது மற்றும் திட்டத்தில் பணிபுரியும் டெவலப்பர்களிடையே ஒத்துழைப்பை ஊக்குவிக்கிறது. + +## விண்ணப்ப சோதனை (Application Testing) + +[Jest](https://jestjs.io/), [Mocha](https://mochajs.org/) அல்லது [Jasmine](https://jasmine.github.io/) போன்ற சோதனைக் கட்டமைப்புகளைப் (testing frameworks) பயன்படுத்தி யூனிட் சோதனைகள் (unit tests) மற்றும் ஒருங்கிணைப்புச் சோதனைகளை (integration tests) உருவாக்க டெவலப்பர் ஊக்குவிக்கப்படுகிறார். பயன்பாடு அதன் நோக்கங்களுக்கு ஏற்பச் செயல்படுகிறதா என்பதைச் சரிபார்க்கும் நோக்கத்திற்காக இந்த நடைமுறை உதவுகிறது. சாத்தியமான பிழைகளை (bugs) முன்கூட்டியே கண்டறிந்து நிவர்த்தி செய்வதற்கான ஒரு செயலூக்கமான நடவடிக்கையாகச் சோதனைகளை உருவாக்குவது செயல்படுகிறது, இதன் மூலம் பயன்பாட்டின் நம்பகத்தன்மையில் நம்பிக்கையை ஏற்படுத்துகிறது. + +## விண்ணப்பத்தை உருவாக்குதல் (Building the Application) + +உற்பத்திக்கான ஜாவாஸ்கிரிப்ட் குறியீடு, CSS மற்றும் சொத்துக்களை (assets) மேம்படுத்த, [Webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/) அல்லது [Rollup](https://rollupjs.org/) போன்ற பொருத்தமான உருவாக்கக் கருவியைப் பயன்படுத்தப் பரிந்துரைக்கப்படுகிறது. இந்தக் கருவிகள் குறியீடு மற்றும் சொத்துக்களைத் தொகுத்து (bundle) மேம்படுத்துகின்றன, இது குறைவான ஏற்றுதல் நேரம் (loading times) மற்றும் மேம்பட்ட செயல்திறனுக்கு (performance) வழிவகுக்கிறது. மேலும், அவை குறியீட்டின் அமைப்புக்குப் பங்களிக்கின்றன மற்றும் பயன்பாட்டிற்குள் கவலைகளைப் பிரிப்பதை (segregation of concerns) எளிதாக்குகின்றன. + +## வரிசைப்படுத்தல் கட்டமைப்பு (Deployment Configuration) + +வரிசைப்படுத்தல் (deployment) இருப்பிடம் குறித்து டெவலப்பர் நன்கு அறிந்த முடிவை எடுக்க வேண்டும். வரிசைப்படுத்தல் விருப்பங்களில் பாரம்பரிய வலை ஹோஸ்டிங் (traditional web hosting), [AWS](https://aws.amazon.com/) அல்லது [Google Cloud](https://cloud.google.com/) போன்ற கிளவுட் சேவைகள் அல்லது [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/) அல்லது [GitHub Pages](https://pages.github.com/) போன்ற தளங்கள் அடங்கும். வரிசைப்படுத்தல் தளத்தின் தேர்வு திட்டத்தின் குறிப்பிட்ட தேவைகள் மற்றும் பட்ஜெட் கட்டுப்பாடுகளுடன் (budget constraints) இணைந்திருக்க வேண்டும். வெவ்வேறு தளங்கள் பல்வேறு அளவிலான அளவிடுதல் (scalability), பாதுகாப்பு மற்றும் பயன்பாட்டின் எளிமை ஆகியவற்றை வழங்குகின்றன. + +## உற்பத்தி உருவாக்கத்தை உருவாக்குதல் (Creating a Production Build) + +பயன்பாட்டின் உற்பத்திக்கான தயார்நிலையை (production-ready version) உருவாக்குவது, உருவாக்கச் செயல்முறையை (build process) செயல்படுத்துவதை உள்ளடக்குகிறது. இது பொதுவாகக் குறியீடு சிறிதாக்குதல் (minification) மற்றும் மேம்படுத்தலை (optimization) உள்ளடக்கியது, இதன் விளைவாகக் குறைக்கப்பட்ட அலைவரிசைப் பயன்பாடு (bandwidth usage) மற்றும் மேம்பட்ட பயனர் அனுபவம் (user experience) ஏற்படுகிறது. மேலும், உற்பத்திச் சூழல்களில் (production environments) பயன்பாடு உகந்ததாகச் செயல்படுவதை ஒரு உற்பத்தி உருவாக்கம் உறுதி செய்கிறது. + +## பயன்பாட்டை வரிசைப்படுத்துதல் (Deploying the Application) + +வரிசைப்படுத்தல் செயல்முறைக்கு (deployment process) ஹோஸ்டிங் பிளாட்ஃபார்ம் வழங்கிய வழிமுறைகளைத் கண்டிப்பாகக் கடைப்பிடிக்க வேண்டும். இது [FTP](https://en.wikipedia.org/wiki/File_Transfer_Protocol), [SSH](https://en.wikipedia.org/wiki/Secure_Shell) அல்லது இயங்குதள-குறிப்பிட்ட வரிசைப்படுத்தல் கருவிகளைப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம். பயன்பாட்டிற்கான தடையற்ற பயனர் அணுகலை உறுதி செய்வதற்கு வரிசைப்படுத்தலின் போது சிறந்த நடைமுறைகளைப் பின்பற்றுவது மிகவும் முக்கியமானது. கையேடு பதிவேற்றங்கள் (manual uploads) அல்லது தானியங்கி வரிசைப்படுத்தல் குழாய்கள் (automated deployment pipelines) உள்ளிட்ட பல்வேறு வழிகளில் வரிசைப்படுத்தல் நிறைவேற்றப்படலாம். + +## டொமைன் மற்றும் DNS அமைவு (பொருந்தினால்) (Domain and DNS Setup (if applicable)) + +தனிப்பயன் டொமைன்களைப் (custom domains) பயன்படுத்துபவர்களுக்கு, ஹோஸ்டிங் வழங்குநர் அல்லது சேவையகத்திற்குத் போக்குவரத்தை வழிநடத்த [DNS](https://www.cloudflare.com/learning/dns/what-is-dns/) அமைப்புகளை உள்ளமைப்பது தேவையான படியாகும். இந்த உள்ளமைவு (configuration) பயனர்களுக்குப் பயனர் நட்பு டொமைன் பெயர் மூலம் பயன்பாட்டை அணுக உதவுகிறது, இதன் மூலம் பிராண்டிங் (branding) மற்றும் அணுகல் திறனை (accessibility) மேம்படுத்துகிறது. + +## தொடர்ச்சியான ஒருங்கிணைப்பு மற்றும் வரிசைப்படுத்தல் (Continuous Integration and Deployment (CI/CD)) + +டெவலப்பர் ஒரு தொடர்ச்சியான ஒருங்கிணைப்பு மற்றும் தொடர்ச்சியான வரிசைப்படுத்தல் (CI/CD) குழாய்களை நிறுவ தேர்வு செய்யலாம். [Jenkins](https://www.jenkins.io/), [Travis CI](https://www.travis-ci.com/), [CircleCI](https://circleci.com/) அல்லது [GitHub Actions](https://github.com/features/actions) போன்ற CI/CD கருவிகளைப் பயன்படுத்துவதன் மூலம் இதை அடையலாம். குறியீடு மாற்றங்களுக்குப் பதிலளிக்கும் வகையில் சோதனை மற்றும் வரிசைப்படுத்தல் செயல்முறைகளின் ஆட்டோமேஷன் மனிதப் பிழையின் (human error) சாத்தியத்தைக் குறைக்கிறது மற்றும் குறியீடு மாற்றங்கள் உற்பத்திச் சூழலை அடைவதற்கு முன்பு கடுமையான சோதனைக்கு (rigorous testing) உட்படுவதை உறுதி செய்கிறது. இந்த அணுகுமுறை குறியீட்டின் தரம் மற்றும் நம்பகத்தன்மையைக் கணிசமாக உயர்த்துகிறது. + +## கண்காணிப்பு மற்றும் பராமரிப்பு (Monitoring and Maintenance) + +வரிசைப்படுத்தலுக்குப் பிறகு, பிழைகள், செயல்திறன் சிக்கல்கள் மற்றும் பாதுகாப்பு பாதிப்புகளுக்குப் (security vulnerabilities) பயன்பாட்டைக் கண்காணிக்க விழிப்புணர்வு (vigilance) தேவை. சார்புகளை (dependencies) தொடர்ந்து புதுப்பிப்பது (updating) பாதுகாப்பை மேம்படுத்துவதற்கும் புதிய அம்சங்களை மேம்படுத்துவதற்கும் கருவியாக உள்ளது. இந்தச் செயலூக்கமான அணுகுமுறை, பயன்பாடு அதன் நம்பகத்தன்மை, பாதுகாப்பு மற்றும் செயல்திறனைக் காலப்போக்கில் தக்கவைத்துக்கொள்வதற்கு உத்தரவாதம் அளிக்கிறது. + +## அளவிடுதல் (தேவைப்பட்டால்) (Scaling (if necessary)) + +பயன்பாடு வளர்ச்சியையும் போக்குவரத்து (traffic) மற்றும் பணிச்சுமையில் (workload) அதிகரிப்பையும் அனுபவிக்கும் சூழ்நிலைகளில், உள்கட்டமைப்பை (infrastructure) அளவிடுவது கட்டாயமாகலாம். கிளவுட் சேவை வழங்குநர்கள் (Cloud service providers) இத்தகைய அளவிடுதல் தேவைகளுக்கு ஏற்ப வடிவமைக்கப்பட்ட தீர்வுகளை வழங்குகிறார்கள். இந்தத் தீர்வுகள் செயல்திறன் மற்றும் கிடைக்கும் தன்மையைப் பாதுகாக்கும் அதே வேளையில் அதிகப்படியான சுமைகளைத் (heightened loads) தடையின்றி நிர்வகிக்கப் பயன்பாட்டிற்கு உதவுகின்றன. + +## காப்புப்பிரதி மற்றும் பேரழிவு மீட்பு (தேவைப்பட்டால்) (Backup and Disaster Recovery (if necessary)) + +எதிர்பாராத இடையூறுகள் ஏற்பட்டால், பயன்பாட்டின் தரவைப் பாதுகாப்பதற்குக் காப்புப்பிரதி (backup) மற்றும் பேரழிவு மீட்பு (disaster recovery) உத்திகளைச் செயல்படுத்துவது இன்றியமையாதது. எதிர்பாராத நிகழ்வுகளின் போது வணிகத் தொடர்ச்சியை உறுதி செய்வதற்கும் தரவு இழப்பின் அபாயத்தைக் குறைப்பதற்கும் இந்த உத்திகள் கருவியாக உள்ளன. diff --git a/ta/miscellaneous/callback.md b/ta/miscellaneous/callback.md new file mode 100644 index 00000000..3ed0fcd8 --- /dev/null +++ b/ta/miscellaneous/callback.md @@ -0,0 +1,109 @@ +--- +chapter: 19 +pageNumber: 126 +description: கால்பேக் (callback) என்பது மற்றொரு செயல்பாட்டிற்கு (function) வாதமாக (argument) அனுப்பப்பட்ட ஒரு செயல்பாடாகும், இது பின்னர் செயல்படுத்தப்படுகிறது, இது பெரும்பாலும் ஒத்திசைவற்ற (asynchronous) செயல்பாடுகளுக்குப் பயன்படுத்தப்படுகிறது. கால்பேக் நரகம் (Callback hell), "pyramid of doom (அழிவின் பிரமிடு)" என்றும் அழைக்கப்படுகிறது, உள்ளமைக்கப்பட்ட (nested) கால்பேக்குகளின் காரணமாகப் படிக்க முடியாத மற்றும் பராமரிக்க முடியாத குறியீடு ஏற்படும் போது இது நிகழ்கிறது. +--- + +# ஜாவாஸ்கிரிப்டில் கால்பேக் செயல்பாடுகள் (Callback Functions in JavaScript) + +கால்பேக் (Callback) செயல்பாடுகள் ஜாவாஸ்கிரிப்டில் ஒரு அடிப்படைக் கருத்தாகும், இது ஒத்திசைவற்ற (asynchronous) மற்றும் நிகழ்வு உந்துதல் (event-driven) நிரலாக்கத்தை செயல்படுத்துகிறது. இந்த மார்க்டவுன் ஆவணம் (Markdown document) கால்பேக் செயல்பாடுகள், அவற்றின் நோக்கம் மற்றும் அவற்றை எவ்வாறு திறம்படப் பயன்படுத்துவது என்பது பற்றிய ஆழமான விளக்கத்தை வழங்குகிறது. + +### கால்பேக் செயல்பாடு என்றால் என்ன? + +- **கால்பேக் செயல்பாடு** என்பது ஜாவாஸ்கிரிப்ட் செயல்பாடாகும், இது மற்றொரு செயல்பாட்டிற்கு வாதமாக (argument) அனுப்பப்படுகிறது. +- இது பொதுவாகப் பின்னர் அழைக்கப்படும் அல்லது செயல்படுத்தப்படும், பெரும்பாலும் சில ஒத்திசைவற்ற செயல்பாடு அல்லது நிகழ்வுக்குப் (event) பிறகு. +- தரவு மீட்டெடுப்பு (data retrieval), நிகழ்வு கையாளுதல் (event handling) மற்றும் ஒத்திசைவற்ற நடத்தை போன்றவற்றைக் கையாள்வதற்கு கால்பேக்குகள் அவசியமானவை. + +### கால்பேக் செயல்பாடுகளை ஏன் பயன்படுத்த வேண்டும்? + +- **ஒத்திசைவற்ற செயல்பாடுகள் (Asynchronous Operations)**: கோப்பு வாசிப்பு (file reading), API கோரிக்கைகள் (API requests) மற்றும் டைமர்கள் (timers) போன்ற ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகிப்பதற்குக் கால்பேக்குகள் முக்கியமானவை. +- **நிகழ்வு கையாளுதல் (Event Handling)**: பட்டன் கிளிக்குகள், பயனர் உள்ளீடு அல்லது நெட்வொர்க் பதில்கள் (network responses) போன்ற நிகழ்வுகளுக்குப் பதிலளிக்க அவை பயன்படுத்தப்படுகின்றன. +- **மாடுலர் குறியீடு (Modular Code)**: கவலைகளைப் பிரித்து (separating concerns) மற்றும் ஒற்றைப் பொறுப்புக் கொள்கையை (single-responsibility principle) ஊக்குவிப்பதன் மூலம் மட்டுப்படுத்தப்பட்ட (modular) மற்றும் மீண்டும் பயன்படுத்தக்கூடிய (reusable) குறியீட்டை எழுதக் கால்பேக்குகள் உதவுகின்றன. + +### கால்பேக் செயல்பாட்டின் உடற்கூறியல் (Anatomy of a Callback Function) + +ஒரு வழக்கமான கால்பேக் செயல்பாடு பின்வரும் அமைப்பைக் கொண்டுள்ளது: + +```javascript +function callbackFunction(arg1, arg2, ..., callback) { + // Perform some operations + // ... + + // Call the callback function when done + callback(result); +} +``` +- **callbackFunction** என்பது ஒரு கால்பேக்கை ஒரு வாதமாக எடுத்துக்கொள்ளும் செயல்பாடாகும். இது சில செயல்பாடுகளை ஒத்திசைவின்றியும் செய்யலாம். +- இது முடிவில் **callback** செயல்பாட்டை அழைக்கிறது, அதன் முடிவு (result) அல்லது பிழையை (error) அதற்குக் கடத்துகிறது (passing). + +### கால்பேக்குகளில் பிழைகளைக் கையாளுதல் (Handling Errors in Callbacks) + +ஜாவாஸ்கிரிப்டில், மரபு (convention) மூலம் கால்பேக் செயல்பாடுகள் பிழைகளைக் கையாளும். பிழைப் பொருளை (error object) முதல் வாதமாகக் (argument) கடத்துவது (passing) அல்லது பிழைகளைக் குறிக்க இரண்டாவது வாதத்தைப் பயன்படுத்துவது பொதுவானது. டெவலப்பர்கள் பிழைகளைச் சரிபார்த்து, கால்பேக் செயல்பாட்டிற்குள் அவற்றைச் சரியாகக் கையாள வேண்டும். + +### கால்பேக்குகளுக்கான மாற்று அணுகுமுறைகள் (Alternative Approaches to Callbacks) + +1. **பிராமிஸ்கள் (Promises)**: ஒத்திசைவற்ற குறியீடு மற்றும் பிழைகளைக் கையாளப் பிராமிஸ்கள் ஒரு கட்டமைக்கப்பட்ட வழியை வழங்குகின்றன. அவை மூன்று நிலைகளைக் கொண்டுள்ளன: நிலுவையில் உள்ளவை (pending), நிறைவேற்றப்பட்டவை (fulfilled) மற்றும் நிராகரிக்கப்பட்டவை (rejected). வெற்றி மற்றும் பிழைச் சூழ்நிலைகளைக் கையாளப் பிராமிஸ்கள் `.then()` மற்றும் `.catch()` முறைகளைப் பயன்படுத்துகின்றன. + +2. **Async/Await**: Async/await என்பது ஜாவாஸ்கிரிப்ட்டின் சமீபத்திய கூடுதலாகும். ஒத்திசைவற்ற குறியீட்டை டெவலப்பர்கள் அதிக ஒத்திசைவான பாணியில் (synchronous style) எழுத அனுமதிப்பதன் மூலம் இது எளிதாக்குகிறது. இது பிராமிஸ்களின் மேல் கட்டமைக்கப்பட்டுள்ளது மற்றும் ஒத்திசைவற்ற செயல்பாடுகளை அதிக நேரியல் குறியீட்டு ஓட்டத்துடன் (linear code flow) கையாள இது மிகவும் பயனுள்ளதாக இருக்கும். + +3. **நிகழ்வு உமிழ்ப்பான்கள் (Event Emitters)**: Node.js இல், ஒத்திசைவற்ற பணிகளைக் கையாள்வதற்கான தனிப்பயன் நிகழ்வு உந்துதல் (custom event-driven) கட்டமைப்புகளை உருவாக்க `EventEmitter` வகுப்பு (class) உங்களை அனுமதிக்கிறது. + +## கால்பேக் நரகம் (Callback Hell - Callback Pyramid) + +ஒத்திசைவற்ற பல செயல்பாடுகள் ஒன்றன்பின் ஒன்றாக இணைக்கப்பட்டு, குறியீட்டைப் படிக்கவும் பராமரிக்கவும் கடினமாக இருக்கும்போது இந்த நிகழ்வு நிகழ்கிறது. ஆழமாக உள்ளமைக்கப்பட்ட (nested) கால்பேக் செயல்பாடுகளுடன் வேலை செய்யும் போது ஜாவாஸ்கிரிப்டில் "callback hell" என்பது ஒரு பொதுவான சிக்கலாகும், இது "pyramid of doom (அழிவின் பிரமிடு)" என்றும் அழைக்கப்படுகிறது. இந்த ஆவணம் கால்பேக் நரகத்தை விளக்குகிறது மற்றும் ஒரு எளிய உதாரணத்தை வழங்குகிறது. + +### கால்பேக் நரகம் (Callback Hell) என்றால் என்ன? + +- ஒத்திசைவற்ற செயல்பாடுகள் (asynchronous functions) ஒன்றோடொன்று உள்ளமைக்கப்படும் போது (nested), இது ஆழமாக உள்தள்ளப்பட்ட (deeply indented) குறியீட்டு கட்டமைப்புகளுக்கு வழிவகுக்கும் போது **கால்பேக் நரகம்** ஏற்படுகிறது. +- அதிகப்படியான உள்தள்ளல் நிலைகள் காரணமாகக் குறியீட்டைப் புரிந்துகொள்வது, பிழைத்திருத்துவது (debug) மற்றும் பராமரிப்பது கடினமாக்குகிறது. +- API கோரிக்கைகளைச் செய்தல் அல்லது கோப்புகளைப் படித்தல்/எழுதுதல் போன்ற பல ஒத்திசைவற்ற செயல்பாடுகளைத் தொடர்ச்சியாகக் கையாளுவதால் கால்பேக் நரகம் அடிக்கடி விளைகிறது. + +#### எடுத்துக்காட்டு + +```javascript +asyncOperation1(function (result1) { + // Callback 1 + asyncOperation2(result1, function (result2) { + // Callback 2 + asyncOperation3(result2, function (result3) { + // Callback 3 + asyncOperation4(result3, function (result4) { + // Callback 4 + asyncOperation5(result4, function (result5) { + // Callback 5 + // ... and so on + }); + }); + }); + }); +}); +``` +### கால்பேக் நரகத்தில் உள்ள சிக்கல்கள் + +- **படிக்கக்கூடிய தன்மை (Readability)**: கால்பேக் நரகம் ஆழமாக உள்தள்ளப்பட்ட குறியீட்டிற்கு வழிவகுக்கிறது, இது படிக்கவும் புரிந்துகொள்ளவும் சவாலானது. இது குறியீடு மதிப்புரைகள் (code reviews) மற்றும் ஒத்துழைப்பைத் (collaboration) தடுக்கும். + +- **பராமரிக்கும் தன்மை (Maintainability)**: அதிக ஒத்திசைவற்ற செயல்பாடுகள் சேர்க்கப்படுவதால், கால்பேக் நரகம் குறியீட்டுத் தளத்தைப் (codebase) பராமரிக்கக் கடினமாக்குகிறது. இருக்கும் செயல்பாட்டை மாற்றுவது அல்லது புதிய அம்சங்களைச் சேர்ப்பது பிழையை உண்டாக்கும் (error-prone). + +- **பிழை கையாளுதல் (Error Handling)**: உள்ளமைக்கப்பட்ட கால்பேக்குகளில் (nested callbacks) பிழைகளை நிர்வகிப்பது சிக்கலானதாகிறது. விதிவிலக்குகளைக் (exceptions) கையாளுதல் மற்றும் பிழைகளை உயர் மட்டங்களுக்குப் பரப்புதல் சவாலாக இருக்கலாம். + +### கால்பேக் நரகத்தைத் தணித்தல் (Mitigating Callback Hell) + +#### 1. பெயரிடப்பட்ட செயல்பாடுகள் (Named Functions) + +- கால்பேக் செயல்பாடுகளைத் தனி, பெயரிடப்பட்ட செயல்பாடுகளாகப் பிரிக்கவும். தனிப்பட்ட செயல்பாடுகளுக்கு அர்த்தமுள்ள பெயர்களைக் கொடுப்பதன் மூலம் இது குறியீடு வாசிப்புத் திறனை மேம்படுத்துகிறது. + +#### 2. பிராமிஸ்கள் (Promises) + +- ஒத்திசைவற்ற குறியீட்டைக் கையாளப் பிராமிஸ்கள் மிகவும் கட்டமைக்கப்பட்ட வழியை வழங்குகின்றன. அவை ஒத்திசைவற்ற செயல்பாடுகளைச் சங்கிலிபோல் இணைக்க (chain) உங்களை அனுமதிக்கின்றன, இது குறியீட்டை அதிக நேரியல் (linear) மற்றும் படிக்க எளிதாக்குகிறது. + +#### 3. Async/Await + +- Async/await என்பது ஜாவாஸ்கிரிப்ட்டின் சமீபத்திய கூடுதலாகும். ஒத்திசைவற்ற குறியீட்டை அதிக ஒத்திசைவான பாணியில் (synchronous style) எழுத அனுமதிப்பதன் மூலம் இது எளிதாக்குகிறது. இது பிராமிஸ்களின் மேல் கட்டமைக்கப்பட்டுள்ளது மற்றும் ஒத்திசைவற்ற செயல்பாடுகளை அதிக நேரியல் குறியீட்டு ஓட்டத்துடன் (linear code flow) கையாள இது மிகவும் பயனுள்ளதாக இருக்கும். + +#### 4. மாடுலரைசேஷன் (Modularization) + +- குறியீட்டைச் சிறிய, மீண்டும் பயன்படுத்தக்கூடிய தொகுதிகளாக (modules) ஒழுங்கமைக்கவும். இது தனிப்பட்ட செயல்பாடுகளின் சிக்கலைக் குறைக்கிறது மற்றும் ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகிப்பதை எளிதாக்குகிறது. + + +ஒத்திசைவற்ற நிரலாக்கத்தில் பயனுள்ள பிழை கையாளுதல் முக்கியமானது. மரபு (convention) மூலம் கால்பேக்குகள் பிழைகளைக் கையாளலாம், ஆனால் பிராமிஸ்கள், async/await மற்றும் நிகழ்வு உமிழ்ப்பான்கள் (event emitters) போன்ற மாற்று அணுகுமுறைகள் ஒத்திசைவற்ற குறியீட்டை நிர்வகிக்க மிகவும் கட்டமைக்கப்பட்ட மற்றும் படிக்கக்கூடிய வழிகளை வழங்குகின்றன. எந்த அணுகுமுறையைப் பயன்படுத்த வேண்டும் என்பதைத் தேர்ந்தெடுப்பது குறிப்பிட்ட தேவைகள் மற்றும் குறியீட்டுப் பாணி விருப்பங்களைப் பொறுத்தது. +ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள்வதற்காக ஆழமாக உள்ளமைக்கப்பட்ட (nested) கால்பேக் செயல்பாடுகளுடன் பணிபுரியும் போது ஜாவாஸ்கிரிப்டில் கால்பேக் நரகம் ஒரு பொதுவான சிக்கலாகும். படிக்க, பராமரிக்க, மற்றும் பிழைத்திருத்தம் (debug) செய்யச் சவாலான குறியீட்டிற்கு இது வழிவகுக்கும். பெயரிடப்பட்ட செயல்பாடுகள், பிராமிஸ்கள், async/await அல்லது மாடுலரைசேஷன் (modularization) போன்ற தணிப்பு உத்திகள் (Mitigation strategies), ஒத்திசைவற்ற பணிகளைக் கையாளும் போது குறியீட்டின் அமைப்பு மற்றும் வாசிப்புத் திறனைக் கணிசமாக மேம்படுத்தி, உங்கள் குறியீட்டைப் பராமரிக்கக்கூடியதாகவும் பிழை-எதிர்ப்புடையதாகவும் (error-resistant) மாற்றும். diff --git a/ta/miscellaneous/currying.md b/ta/miscellaneous/currying.md new file mode 100644 index 00000000..8256fac3 --- /dev/null +++ b/ta/miscellaneous/currying.md @@ -0,0 +1,35 @@ +--- +chapter: 19 +pageNumber: 115 +description: கரியிங் (Currying) என்பது பல வாதங்களைக் (arguments) கொண்ட ஒரு செயல்பாட்டை (function) உள்ளமைக்கப்பட்ட (nesting) செயல்பாடுகளின் வரிசையாக (sequence) மாற்றும் செயல்பாட்டு நிரலாக்கத்தில் (functional programming) உள்ள ஒரு மேம்பட்ட நுட்பமாகும் (advanced technique). இது f(a,b,c) என்று அழைக்கக்கூடிய செயல்பாட்டை f(a)(b)(c) என்று அழைக்கக்கூடியதாக மாற்றுகிறது. இது ஒரு செயல்பாட்டை அழைக்காது, மாறாக அதை மாற்றுகிறது. +--- +# கரியிங் (Currying) + +`Currying` என்பது பல வாதங்களைக் கொண்ட ஒரு செயல்பாட்டை உள்ளமைக்கப்பட்ட செயல்பாடுகளின் வரிசையாக மாற்றும் செயல்பாட்டு நிரலாக்கத்தில் உள்ள ஒரு மேம்பட்ட நுட்பமாகும். இது `f(a,b,c)` என்று அழைக்கக்கூடிய செயல்பாட்டை `f(a)(b)(c)` என்று அழைக்கக்கூடியதாக மாற்றுகிறது. இது ஒரு செயல்பாட்டை அழைக்காது, மாறாக அதை மாற்றுகிறது. + + +கரியிங் (currying) பற்றி நன்கு புரிந்துகொள்ள, மூன்று வாதங்களை எடுத்து அவற்றின் கூட்டுத்தொகையைத் (sum) திருப்பித் தரும் எளிய `add` செயல்பாட்டை (function) உருவாக்குவோம். பின்னர், ஒரு உள்ளீட்டை (input) எடுத்து, அதன் கூட்டுத்தொகையுடன் தொடர்ச்சியான செயல்பாடுகளைத் திருப்பித் தரும் `addCurry` செயல்பாட்டை உருவாக்குகிறோம். + +```javascript +// Noncurried version +const add = (a, b, c)=>{ + return a+ b + c +} +console.log(add(2, 3, 5)) // 10 + +// Curried version +const addCurry = (a) => { + return (b)=>{ + return (c)=>{ + return a+b+c + } + } +} +console.log(addCurry(2)(3)(5)) // 10 +``` + +இங்கே, கரியிங் செய்யப்பட்ட (curried) மற்றும் கரியிங் செய்யப்படாத (noncurried) இரண்டு பதிப்புகளும் (versions) ஒரே முடிவைத் திருப்பித் தருவதை நாம் காணலாம். பல காரணங்களுக்காகக் கரியிங் பயனுள்ளதாக இருக்கும், அவற்றில் சில இங்கே குறிப்பிடப்பட்டுள்ளன. + +* ஒரே மாறியை (variable) மீண்டும் மீண்டும் அனுப்புவதைத் (passing) தவிர்க்க இது உதவுகிறது. +* இது செயல்பாட்டை ஒற்றைப் பொறுப்புடன் (single responsibility) சிறிய பகுதிகளாகப் பிரிக்கிறது, இது செயல்பாட்டைப் பிழை குறைவானதாக (less error-prone) ஆக்குகிறது. +* செயல்பாட்டு நிரலாக்கத்தில் உயர்-வரிசை (high-order) செயல்பாட்டை உருவாக்க இது பயன்படுத்தப்படுகிறது. diff --git a/ta/miscellaneous/debugging.md b/ta/miscellaneous/debugging.md new file mode 100644 index 00000000..28fd33fc --- /dev/null +++ b/ta/miscellaneous/debugging.md @@ -0,0 +1,109 @@ +--- +chapter: 19 +pageNumber: 122 +description: நிரலாக்கத்தில் (programming), குறியீட்டை எழுதும்போது பிழைகள் (errors) ஏற்படலாம். இது தொடரியல் (syntactical) அல்லது தருக்கப் பிழைகள் (logical errors) காரணமாக இருக்கலாம். பிழைகளைக் கண்டறியும் செயல்முறை அதிக நேரம் எடுத்துக்கொள்ளக்கூடியது மற்றும் தந்திரமானதாக இருக்கலாம், இது குறியீடு பிழைத்திருத்தம் (code debugging) என அழைக்கப்படுகிறது. +--- + +# பிழைத்திருத்தம் (Debugging) + +நிரலாக்கத்தில், குறியீட்டை எழுதும் போது பிழைகள் (errors) ஏற்படலாம். இது தொடரியல் (syntactical) அல்லது தருக்கப் பிழைகள் (logical errors) காரணமாக இருக்கலாம். **குறியீடு பிழைத்திருத்தம் (Code debugging)** என்பது பிழைகளை அடையாளம் காணுதல், தனிமைப்படுத்துதல் மற்றும் சரிசெய்தல் போன்ற செயல்முறையாகும், இது அதிக நேரம் எடுத்துக்கொள்ளக்கூடியது மற்றும் தந்திரமானதாக இருக்கலாம். + +அதிர்ஷ்டவசமாக, பெரும்பாலான நவீன உலாவிகளில் உள்ளமைக்கப்பட்ட பிழைத்திருத்திகள் (built-in debuggers) உள்ளன. இந்தப் பிழைத்திருத்திகளை இயக்கலாம் மற்றும் அணைக்கலாம், பிழைகள் புகாரளிக்கப்படுவதைக் கட்டாயப்படுத்தலாம். குறியீட்டைச் செயல்படுத்துவதை நிறுத்தவும் மாறிகளை (variables) ஆராயவும் குறியீட்டைச் செயல்படுத்துகையில் பிரேக் பாயிண்டுகளை (breakpoints) அமைப்பதும் சாத்தியமாகும். இதற்கு ஒருவர் பிழைத்திருத்தச் சாளரத்தைத் (debugging window) திறந்து ஜாவாஸ்கிரிப்ட் குறியீட்டில் `debugger` முக்கிய சொல்லை (keyword) வைக்க வேண்டும். ஒவ்வொரு பிரேக் பாயிண்டிலும் குறியீடு செயலாக்கம் நிறுத்தப்படும், டெவலப்பர்கள் ஜாவாஸ்கிரிப்ட் மதிப்புகளை ஆராயவும், குறியீட்டைச் செயல்படுத்துவதைத் தொடரவும் அனுமதிக்கிறது. + +## console.log() நுட்பம் + +எளிமையான மற்றும் பரவலாகப் பயன்படுத்தப்படும் பிழைத்திருத்த முறைகளில் ஒன்று `console.log()` செயல்பாட்டைப் (function) பயன்படுத்துவதாகும். இது உங்கள் குறியீட்டின் ஓட்டத்தைக் கண்காணிக்கவும், செயல்படுத்துகையில் குறிப்பிட்ட புள்ளிகளில் மாறிகளின் (variables) மதிப்புகளைச் சரிபார்க்கவும் உதவுகிறது. + +```javascript +function calculateTotal(price, taxRate) { + const tax = price * taxRate; + console.log("Tax calculated:", tax); // Output for inspection + const total = price + tax; + return total; +} + +calculateTotal(100, 0.2); +``` + +`console.log()` ஐ இதற்காகப் பயன்படுத்தவும்: + +- செயல்பாடு (function) அழைக்கப்படுகிறதா என்று சரிபார்க்க. +- மாறிகளின் (variables) மதிப்பை அச்சிட. +- கட்டுப்பாட்டு ஓட்டத்தைக் (control flow) கண்காணிக்க (எ.கா., ஒரு நிபந்தனை பூர்த்தி செய்யப்பட்டால்). + +மற்ற பயனுள்ள `console` முறைகள்: + +- `console.error()` – பிழைகளைப் பதிவு செய்ய (logging errors). +- `console.warn()` – எச்சரிக்கைகளுக்கு. +- `console.table()` – தரவை அட்டவணை வடிவத்தில் (tabular form) அச்சிட. +- `console.trace()` – ஒரு குறிப்பிட்ட புள்ளியில் ஸ்டாக் ட்ரேஸை (stack trace) அச்சிட. + +## பிரேக் பாயிண்டுகளைப் பயன்படுத்துதல் (Using Breakpoints) + +பிரேக் பாயிண்ட் என்பது உங்கள் குறியீட்டில் உள்ள ஒரு இடமாகும், அங்குச் செயலாக்கம் இடைநிறுத்தப்பட்டு, தற்போதைய நிலையை நீங்கள் ஆராய அனுமதிக்கிறது: மாறி மதிப்புகள் (variable values), கால் ஸ்டாக் (call stack), ஸ்கோப் செயின் (scope chain) போன்றவை. +நவீன உலாவிகள் பிழைத்திருத்தத் திறன்களுடன் (debugging capabilities) டெவலப்பர் கருவிகளை (developer tools) வழங்குகின்றன. + +### பிரேக் பாயிண்டுகளை எவ்வாறு அமைப்பது (How to Set Breakpoints) + +1. DevTools இல் Sources பேனலைத் திறக்கவும். +2. உங்கள் ஸ்கிரிப்ட் (script) கோப்பிற்குச் செல்லவும். +3. செயலாக்கத்தை இடைநிறுத்த விரும்பும் வரி எண்ணைக் (line number) கிளிக் செய்யவும். + +இடைநிறுத்தப்பட்டதும், உங்களால் முடியும்: + +- **ஸ்டெப் ஓவர் (Step over)** – அடுத்த வரிக்கு நகர. +- **ஸ்டெப் இன்டு (Step into)** – ஒரு செயல்பாட்டு அழைப்பில் (function call) மூழ்க. +- **ஸ்டெப் அவுட் (Step out)** – தற்போதைய செயல்பாட்டிலிருந்து வெளியேற. +- **தொடர (Resume)** – அடுத்த பிரேக் பாயிண்ட் வரை தொடர்ந்து செயல்படுத்துக. + பிரேக் பாயிண்டுகள் இடையூறு இல்லாதவை (non-intrusive) மற்றும் உங்கள் குறியீட்டை மாற்றாமல் சேர்க்கலாம்/அகற்றலாம். + +## உலாவி டெவலப்பர் கருவிகள் (Browser Developer Tools) + +நவீன உலாவிகளில் சக்திவாய்ந்த டெவலப்பர் கருவிகள் பொருத்தப்பட்டுள்ளன, அவை ஜாவாஸ்கிரிப்டைப் பிழைத்திருத்தவும், HTML மற்றும் CSS ஐச் சரிபார்க்கவும், நெட்வொர்க் கோரிக்கைகளைக் (network requests) கண்காணிக்கவும் உதவுகின்றன. சில அத்தியாவசியக் கருவிகளின் சுருக்கமான கண்ணோட்டம் இங்கே: + +**Chrome DevTools:** Google Chrome இன் டெவலப்பர் கருவிகள் வலைப் பயன்பாடுகளைப் பிழைத்திருத்துவதற்கான பரந்த அளவிலான அம்சங்களை வழங்குகின்றன. + +**Firefox DevTools:** Mozilla Firefox இன் டெவலப்பர் கருவிகள் மற்றொரு சிறந்த விருப்பமாகும், இது ஒத்த திறன்களை வழங்குகிறது. + +**Microsoft Edge DevTools:** Microsoft Edge பயனர்களுக்கு, உள்ளமைக்கப்பட்ட டெவலப்பர் கருவிகள் அத்தியாவசியப் பிழைத்திருத்த அம்சங்களை வழங்குகின்றன. + +**Safari Web Inspector:** Safari இன் Web Inspector என்பது வலைப் பயன்பாடுகளைப் பிழைத்திருத்துவதற்கான மற்றும் சுயவிவரப்படுத்துவதற்கான (profiling) வலுவான கருவியாகும். + +### உலாவி தேவ் கருவிகள் (Browser Dev Tools) + +உலாவிகள் டெவலப்பர் கருவிகளின் தொகுப்பை வழங்குகின்றன, அவை HTML, CSS மற்றும் ஜாவாஸ்கிரிப்டைச் சரிபார்க்க உங்களை அனுமதிக்கின்றன. +இணையப் பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுப்பதன் மூலமாகவோ அல்லது `F12` அல்லது `Ctrl+Shift+I`/ `Cmd + Option + I` (Mac) ஐ அழுத்துவதன் மூலமாகவோ அவற்றை அணுகலாம். + +### டெவலப்பர் கருவிகளில் உள்ள முக்கிய பேனல்கள் (Key Panels in Developer Tools) + +- **Console:** பதிவுகள் (logs), பிழைகள் (errors) ஆகியவற்றைக் காட்டுகிறது மற்றும் நிகழ்நேரத்தில் JS ஐச் செயல்படுத்த அனுமதிக்கிறது. +- **Elements / Inspector:** HTML மற்றும் CSS ஐ உலாவவும் (browse) திருத்தவும் உங்களை அனுமதிக்கிறது. +- **Sources:** பிரேக் பாயிண்டுகளைப் பயன்படுத்தி நீங்கள் ஜாவாஸ்கிரிப்டைப் பிழைத்திருத்தும் இடம். +- **Network:** வள ஏற்றுதல் (resource loading), நேரம் மற்றும் கோரிக்கை/பதில் (request/response) தரவைப் பார்க்கலாம். +- **Performance / Memory:** நினைவகக் கசிவுகள் (memory leaks) அல்லது இடையூறுகளை (bottlenecks) அடையாளம் காணவும் சுயவிவரப்படுத்துவதற்கும் (profiling) பயனுள்ளதாக இருக்கும். + +பிரேக் பாயிண்டுகளை நிரல் ரீதியாக (programmatically) உருவாக்க நாம் குறியீட்டில் பிழைத்திருத்தி அறிக்கையைச் (debugger statement) செருகலாம். குறியீடு பிழைத்திருத்தியைச் சந்திக்கும் போது, அது செயல்படுத்துவதை இடைநிறுத்தி உலாவியின் டெவலப்பர் கருவிகளைத் திறக்கும். + +### வாட்ச் எக்ஸ்பிரஷன்ஸ் மற்றும் ஸ்கோப் (Watch Expressions and Scope) + +DevTools இல், நீங்கள் மாறிகள் அல்லது கோவைகளைப் (expressions) **பார்க்கலாம் (watch)**. சிக்கலான தர்க்கத்தைப் (complex logic) பிழைத்திருத்தும்போது அல்லது காலப்போக்கில் ஒரு மாறியைக் கண்காணிக்கும் போது இது உதவியாக இருக்கும். + +- `user.name` அல்லது `cart.length` போன்ற கோவைகளைக் கண்காணிக்க **Watch** பேனலைப் பயன்படுத்தவும். +- கிடைக்கக்கூடிய மாறிகளைச் (variables) சரிபார்க்க **Local**, **Closure** மற்றும் **Global** ஸ்கோப்களைப் (scopes) பார்க்கவும். + +### ஸ்டாக் ட்ரேஸ் மற்றும் கால் ஸ்டாக் (Stack Trace and Call Stack) + +ஒரு பிரேக் பாயிண்டில் (அல்லது பிழைக்குப் பிறகு) இடைநிறுத்தப்படும் போது, நீங்கள் Call Stack பேனலைச் சரிபார்க்கலாம்: + +- இது தற்போதைய புள்ளிக்கு வழிவகுத்த செயல்பாட்டு அழைப்புகளின் (function calls) வரிசையைக் காட்டுகிறது. +- ஒரு ஃபிரேமைக் (frame) கிளிக் செய்வதன் மூலம் அந்தச் சூழலில் (context) உள்ள மாறிகளைச் சரிபார்க்கலாம். + தவறான செயல்பாட்டு ஓட்டங்களால் (function flows) ஏற்படும் எதிர்பாராத நடத்தைகளைச் சரிசெய்வதற்குக் கால் ஸ்டாக்கைப் புரிந்துகொள்வது இன்றியமையாதது. + +## பொதுவான பிழைத்திருத்த உத்திகள் (Common Debugging Strategies) + +- **பிரச்சனையை எளிமையாக்குங்கள் (Simplify the problem)**: சாத்தியமான மிகச்சிறிய உதாரணத்தைத் தனிமைப்படுத்த முயற்சிக்கவும். +- **வலியுறுத்தல்களைப் பயன்படுத்தவும் (Use assertions)**: உங்கள் குறியீட்டில் உள்ள அனுமானங்களை (assumptions) கைமுறையாகச் சரிபார்க்கவும். +- **ரப்பர் டக் பிழைத்திருத்தம் (Rubber duck debugging)**: மறைந்திருக்கும் சிக்கல்களைக் கண்டறிய உங்கள் குறியீட்டை ஒருவருக்கு (அல்லது எதற்கும்!) விளக்குங்கள். +- **பிழைச் செய்திகளைத் தேடுங்கள் (Search for error messages)**: ஜாவாஸ்கிரிப்ட் பிழைகளில் அடிக்கடி பயனுள்ள தகவல்கள் இருக்கும். +- **உலாவி பொருந்தக்கூடிய தன்மையைச் சரிபார்க்கவும் (Check browser compatibility)**: எல்லா உலாவிகளும் ஒரே மாதிரி செயல்படாது. +- **லிண்டர்களைப் பயன்படுத்தவும் (Use linters)**: உங்கள் குறியீட்டை இயக்குவதற்கு முன்பு ESLint போன்ற கருவிகள் பல பொதுவான பிழைகளைப் பிடிக்கும். diff --git a/ta/miscellaneous/global-footprint.md b/ta/miscellaneous/global-footprint.md new file mode 100644 index 00000000..2ed44524 --- /dev/null +++ b/ta/miscellaneous/global-footprint.md @@ -0,0 +1,26 @@ +--- +chapter: 19 +pageNumber: 121 +description: உலகளாவிய தடம் (Global footprint) என்பது ஒரு ஸ்கிரிப்ட் (script) அல்லது பயன்பாடு இயக்க நேரச் சூழலின் (runtime environment) உலகளாவிய நோக்கத்தில் (global scope) ஏற்படுத்தும் தாக்கம் அல்லது செல்வாக்கைக் குறிக்கிறது. ஒரு ஸ்கிரிப்ட் அல்லது பயன்பாடு உலகளாவிய நோக்கத்தில் மாறிகள் (variables) அல்லது செயல்பாடுகளை (functions) உருவாக்கும்போது, அது உலகளாவிய தடத்தைப் (global footprint) பாதிக்கிறது. +--- +# உலகளாவிய தடம் (Global footprint) + +இணையப் பக்கத்தில் இயங்கும் ஒரு மாட்யூலை (module) நீங்கள் உருவாக்கினால், அது மற்ற மாட்யூல்களையும் இயக்குகிறது, பிறகு மாறிகளின் (variable) பெயர்கள் ஒன்றுடன் ஒன்று சேருவதைப் (overlapping) பற்றி நீங்கள் எச்சரிக்கையாக இருக்க வேண்டும். + +ஒரு கவுண்டர் (counter) மாட்யூலை உருவாக்குவதாகக் கருதுவோம்: + +```javascript +let myCounter = { + number: 0, + plusPlus: function () { + this.number = this.number + 1; + }, + isGreaterThanTen: function () { + return this.number > 10; + }, +}; +``` + +> _**குறிப்பு (Note):**_ வெளியிலிருந்து உள் நிலையை மாற்ற முடியாததாக (immutable) மாற்ற, இந்த நுட்பம் பெரும்பாலும் க்ளோஷர்களுடன் (closures) பயன்படுத்தப்படுகிறது. + +மாட்யூல் இப்போது `myCounter` என்ற ஒரு மாறியின் (variable) பெயரை மட்டுமே எடுக்கிறது. பக்கத்தில் உள்ள வேறு எந்த மாட்யூலும் `number` அல்லது `isGreaterThanTen` போன்ற பெயர்களைப் பயன்படுத்தினால் அது முற்றிலும் பாதுகாப்பானது, ஏனெனில் நாம் ஒருவருக்கொருவர் மதிப்புகளை மேலெழுத (override) மாட்டோம். diff --git a/ta/miscellaneous/hoisting.md b/ta/miscellaneous/hoisting.md new file mode 100644 index 00000000..4c73d2e8 --- /dev/null +++ b/ta/miscellaneous/hoisting.md @@ -0,0 +1,28 @@ +--- +chapter: 19 +pageNumber: 114 +description: ஹொயிஸ்டிங் (Hoisting) என்பது ஜாவாஸ்கிரிப்டில் அறிவிப்புகளை (declarations) மேலே நகர்த்துவதற்கான இயல்புநிலை (default) நடத்தையாகும். ஒரு குறியீட்டைச் செயல்படுத்துகையில், இது உருவாக்கம் (creation) மற்றும் செயலாக்கம் (execution) என்ற ஒரு உலகளாவிய செயல்பாட்டுச் சூழலை (global execution context) உருவாக்குகிறது. உருவாக்கும் கட்டத்தில் (creation phase), ஜாவாஸ்கிரிப்ட் மாறி மற்றும் செயல்பாட்டு அறிவிப்பைப் (variable and function declaration) பக்கத்தின் மேற்பகுதிக்கு நகர்த்துகிறது, இது ஹொயிஸ்டிங் (hoisting) என்று அழைக்கப்படுகிறது. +--- +# ஹொயிஸ்டிங் (Hoisting) + +ஹொயிஸ்டிங் என்பது ஜாவாஸ்கிரிப்டில் அறிவிப்புகளை மேலே நகர்த்துவதற்கான இயல்புநிலை நடத்தையாகும். ஒரு குறியீட்டைச் செயல்படுத்துகையில், இது ஒரு உலகளாவிய செயல்பாட்டுச் சூழலை உருவாக்குகிறது: **உருவாக்கம் (creation)** மற்றும் **செயலாக்கம் (execution)**. உருவாக்கும் கட்டத்தில், ஜாவாஸ்கிரிப்ட் மாறி மற்றும் செயல்பாட்டு அறிவிப்பைப் பக்கத்தின் மேற்பகுதிக்கு நகர்த்துகிறது, இது ஹொயிஸ்டிங் என்று அழைக்கப்படுகிறது. + +```javascript +// variable hoisting +console.log(counter); +let counter = 1; // throws ReferenceError: Cannot access 'counter' before initialization +``` + +`counter` ஹீப் நினைவகத்தில் (heap memory) இருந்தாலும், அது தொடங்கப்படாததால் (initialized) அது பிழையை (error) எறியும். ஹொயிஸ்டிங் காரணமாக இது நிகழ்கிறது, `counter` மாறி இங்கே மேலே கொண்டுவரப்படுகிறது. + +
    // function hoisting
+const x = 20,
+    y = 10;
+
+let result = add(x,y); // ❌ Uncaught ReferenceError: add is not defined
+console.log(result);
+
+let add = (x, y) => x + y; 
+
    + +இங்கே, `add` செயல்பாடு ஹொயிஸ்டிங் செய்யப்பட்டு, உலகளாவிய செயல்பாட்டுச் சூழலின் உருவாக்கக் கட்டத்தில் ஹீப் நினைவகத்தில் `undefined` என்று தொடங்கப்படுகிறது. இதனால் பிழை ஏற்படுகிறது. diff --git a/ta/miscellaneous/linked-list.md b/ta/miscellaneous/linked-list.md new file mode 100644 index 00000000..2445c0a2 --- /dev/null +++ b/ta/miscellaneous/linked-list.md @@ -0,0 +1,130 @@ +--- +chapter: 19 +pageNumber: 118 +description: இணைக்கப்பட்ட பட்டியல் (Linked List) என்பது உறுப்புகளின் (elements) தொகுப்பைச் சேமிக்கப் பயன்படும் ஒரு நேரியல் தரவுக் கட்டமைப்பாகும் (linear data structure), இவை முனைகள் (nodes) என்று அழைக்கப்படுகின்றன. இணைக்கப்பட்ட பட்டியலில் உள்ள ஒவ்வொரு முனையிலும் அது குறிக்கும் உறுப்பின் தரவு அல்லது மதிப்பு மற்றும் வரிசையில் உள்ள அடுத்த முனைக்கான குறிப்பு (பாயிண்டர் - pointer) என இரண்டு பகுதிகள் உள்ளன. பட்டியலில் உள்ள கடைசி முனை null ஐக் குறிக்கிறது, இது பட்டியலின் முடிவைக் குறிக்கிறது. +--- +# இணைக்கப்பட்ட பட்டியல் (Linked List) + +இது அனைத்து நிரலாக்க மொழிகளிலும் காணப்படும் பொதுவான தரவுக் கட்டமைப்பாகும். இணைக்கப்பட்ட பட்டியல் (linked list) ஜாவாஸ்கிரிப்டில் உள்ள சாதாரண வரிசைக்கு (array) மிகவும் ஒத்திருக்கிறது, இது சற்று வித்தியாசமாகச் செயல்படுகிறது. + +இங்கே பட்டியலில் உள்ள ஒவ்வொரு உறுப்பும் (element) ஒரு தனிப் பொருளாகும், இது ஒரு இணைப்பைக் (link) கொண்டுள்ளது அல்லது அடுத்ததைக் குறிக்கும் பாயிண்டரைக் (pointer) கொண்டுள்ளது. ஜாவாஸ்கிரிப்டில் இணைக்கப்பட்ட பட்டியல்களுக்கு உள்ளமைக்கப்பட்ட முறை (built-in method) அல்லது செயல்பாடு (function) இல்லை, எனவே ஒருவர் அதைச் செயல்படுத்த வேண்டும். இணைக்கப்பட்ட பட்டியலுக்கான எடுத்துக்காட்டு கீழே காட்டப்பட்டுள்ளது. + +``` +["one", "two", "three", "four"] +``` + +### இணைக்கப்பட்ட பட்டியல்களின் வகைகள் (Types of Linked Lists) + +இணைக்கப்பட்ட பட்டியல்களில் மூன்று வெவ்வேறு வகைகள் உள்ளன: + +1. **ஒற்றை இணைக்கப்பட்ட பட்டியல்கள் (Singly Linked Lists):** ஒவ்வொரு முனையும் (node) அடுத்த முனைக்கு ஒரு பாயிண்டரை (pointer) மட்டுமே கொண்டிருக்கும். +2. **இரட்டை இணைக்கப்பட்ட பட்டியல்கள் (Doubly Linked Lists):** ஒவ்வொரு முனையிலும் இரண்டு பாயிண்டர்கள் உள்ளன, ஒன்று அடுத்த முனைக்கும் மற்றொன்று முந்தைய முனைக்கும். +3. **வட்ட இணைக்கப்பட்ட பட்டியல்கள் (Circular Linked Lists):** ஒரு வட்ட இணைக்கப்பட்ட பட்டியல் கடைசி முனையை முதல் முனையையோ அல்லது அதற்கு முன் உள்ள வேறு ஏதேனும் முனையையோ சுட்டிக்காட்டுவதன் மூலம் ஒரு வளையத்தை (loop) உருவாக்குகிறது. + +## சேர் (Add) + +இணைக்கப்பட்ட பட்டியலில் மதிப்பைச் சேர்க்க `add` முறை இங்கே உருவாக்கப்பட்டுள்ளது. + +```javascript +class Node { + constructor(data) { + this.data = data + this.next = null + } +} + +class LinkedList { + constructor(head) { + this.head = head + } + append = (value) => { + const newNode = new Node(value) + let current = this.head + if (!this.head) { + this.head = newNode + return + } + while (current.next) { + current = current.next + } + current.next = newNode + } +} +``` + +## பாப் (Pop) + +இணைக்கப்பட்ட பட்டியலிலிருந்து மதிப்பை அகற்ற, இங்கே ஒரு `pop` முறை உருவாக்கப்பட்டுள்ளது. + +```javascript +class Node { + constructor(data) { + this.data = data + this.next = null + } +} + +class LinkedList { + constructor(head) { + this.head = head + } + pop = () => { + let current = this.head + while (current.next.next) { + current = current.next + } + current.next = current.next.next + } +} +``` + +## முன்னொட்டு (Prepend) + +இணைக்கப்பட்ட பட்டியலின் முதல் குழந்தைக்கு (child) முன் மதிப்பைச் சேர்க்க, இங்கே ஒரு `prepend` முறை உருவாக்கப்பட்டுள்ளது. + +```javascript +class Node { + constructor(data) { + this.data = data + this.next = null + } +} + +class LinkedList { + constructor(head) { + this.head = head + } + prepend = (value) => { + const newNode = new Node(value) + if (!this.head) { + this.head = newNode + } + else { + newNode.next = this.head + this.head = newNode + } + } +} +``` + +## ஷிப்ட் (Shift) + +இணைக்கப்பட்ட பட்டியலின் முதல் உறுப்பை (element) அகற்ற, இங்கே `shift` முறை உருவாக்கப்பட்டுள்ளது. + +```javascript +class Node { + constructor(data) { + this.data = data + this.next = null + } +} + +class LinkedList { + constructor(head) { + this.head = head + } + shift = () => { + this.head = this.head.next + } +} +``` \ No newline at end of file diff --git a/ta/miscellaneous/polyfills-and-transpilers.md b/ta/miscellaneous/polyfills-and-transpilers.md new file mode 100644 index 00000000..af689011 --- /dev/null +++ b/ta/miscellaneous/polyfills-and-transpilers.md @@ -0,0 +1,63 @@ +--- +chapter: 19 +pageNumber: 116 +description: பாலிஃபில்கள் (Polyfills) மற்றும் டிரான்ஸ்பைலர்கள் (transpilers) என்பவை வலை மேம்பாட்டில் (web development) பயன்படுத்தப்படும் இரண்டு முக்கியமான கருவிகளாகும் (tools), இவை நவீன ஜாவாஸ்கிரிப்ட் குறியீடு பழைய உலாவிகளில் இயங்குவதை உறுதிசெய்யவும் மற்றும் பழைய சூழல்களுடன் (environments) பொருந்தக்கூடிய தன்மையைப் (compatibility) பராமரிக்கும் அதே வேளையில் சமீபத்திய ஜாவாஸ்கிரிப்ட் அம்சங்களைப் பயன்படுத்திக் கொள்ளவும் உதவுகின்றன. +--- +# பாலிஃபில்கள் மற்றும் டிரான்ஸ்பைலர்கள் (Polyfills and Transpilers) + +ஜாவாஸ்கிரிப்ட் அவ்வப்போது உருவாகிறது. தொடர்ந்து, புதிய மொழி முன்மொழிவுகள் (proposals) சமர்ப்பிக்கப்பட்டு, பகுப்பாய்வு செய்யப்பட்டு, [https://tc39.github.io/ecma262/ ](https://tc39.github.io/ecma262/) இல் சேர்க்கப்பட்டு பின்னர் விவரக்குறிப்பில் (specification) இணைக்கப்படுகின்றன. உலாவியைப் (browser) பொறுத்து ஜாவாஸ்கிரிப்ட் இயந்திரங்களில் (engines) அது எவ்வாறு செயல்படுத்தப்படுகிறது என்பதில் வேறுபாடுகள் இருக்கலாம். சிலர் வரைவு முன்மொழிவுகளைச் (draft proposals) செயல்படுத்தலாம், மற்றவர்கள் முழு விவரக்குறிப்பு வெளியாகும் வரை காத்திருக்கலாம். புதிய விஷயங்கள் அறிமுகப்படுத்தப்படும்போது பின்தங்கிய இணக்கத்தன்மை (Backward compatibility) சிக்கல்கள் எழுகின்றன. + +பழைய உலாவிகளில் நவீன குறியீட்டை ஆதரிக்க நாம் இரண்டு கருவிகளைப் பயன்படுத்துகிறோம்: `transpilers` மற்றும் `polyfills`. + +**டிரான்ஸ்பைலர்கள் (Transpilers)** + +இது நவீன குறியீட்டை மொழிபெயர்க்கும் ஒரு நிரலாகும் (program) மற்றும் பழைய தொடரியல் கட்டமைப்புகளைப் (syntax constructs) பயன்படுத்தி அதை மீண்டும் எழுதுகிறது, இதனால் பழைய இயந்திரம் அதைப் புரிந்து கொள்ள முடியும். உதாரணமாக, "`nullish` coalescing operator" `??` 2020 இல் அறிமுகப்படுத்தப்பட்டது, மேலும் காலாவதியான உலாவிகளால் (outdated browsers) அதைப் புரிந்து கொள்ள முடியாது. + +இப்போது, `nullish` coalescing operator" `??` ஐப் பழைய உலாவிகளுக்குப் புரியும் வகையில் செய்வது டிரான்ஸ்பைலரின் வேலையாகும். + +```javascript +// before running the transpiler +height = height ?? 200; + +// after running the transpiler +height = (height !== undefined && height !== null) ? height: 200; + +``` + +{% hint style="info" %} + [Babel](https://babeljs.io/) என்பது மிகவும் பிரபலமான டிரான்ஸ்பைலர்களில் ஒன்றாகும். மேம்பாட்டுச் செயல்பாட்டில், குறியீட்டை டிரான்ஸ்பைல் செய்ய [webpack](https://webpack.js.org/) அல்லது [parcel](https://parceljs.org/) போன்ற உருவாக்கக் கருவிகளைப் (build tools) பயன்படுத்தலாம். +{% endhint %} + +**பாலிஃபில்கள் (Polyfills)** + +காலாவதியான உலாவி இயந்திரங்களில் புதிய செயல்பாடுகள் கிடைக்காத நேரங்களும் உள்ளன. இந்த நிலையில், புதிய செயல்பாட்டைப் பயன்படுத்தும் குறியீடு இயங்காது. இடைவெளிகளை நிரப்ப, காணாமல் போன செயல்பாட்டைச் சேர்க்கிறோம், இது `polyfill` என்று அழைக்கப்படுகிறது. எடுத்துக்காட்டாக, `filter()` முறை ES5 இல் அறிமுகப்படுத்தப்பட்டது மற்றும் சில பழைய உலாவிகளில் ஆதரிக்கப்படவில்லை. இந்த முறை ஒரு செயல்பாட்டை (function) ஏற்றுக்கொள்கிறது மற்றும் செயல்பாடு `true` என்று திருப்பித் தரும் அசல் வரிசையின் (original array) மதிப்புகளை மட்டுமே கொண்ட வரிசையைத் திருப்பித் தருகிறது. + +```javascript +const arr = [1, 2, 3, 4, 5, 6]; +const filtered = arr.filter((e) => e % 2 === 0); // filter outs the even number +console.log(filtered); + +// [2, 4, 6] +``` + +வடிகட்டிக்கான (filter) பாலிஃபில் கீழே கொடுக்கப்பட்டுள்ளது. + +```javascript +Array.prototype.filter = function (callback) { + // Store the new array + const result = []; + for (let i = 0; i < this.length; i++) { + // call the callback with the current element, index, and context. + //if it passes the test then add the element in the new array. + if (callback(this[i], i, this)) { + result.push(this[i]); + } + } + //return the array + return result +} +``` + +{% hint style="info" %} +வெவ்வேறு உலாவி இயந்திரங்களால் ஆதரிக்கப்படும் புதுப்பிக்கப்பட்ட செயல்பாடு மற்றும் தொடரியலை [caniuse](https://caniuse.com/) காட்டுகிறது. +{% endhint %} diff --git a/ta/miscellaneous/single-thread-nature.md b/ta/miscellaneous/single-thread-nature.md new file mode 100644 index 00000000..5834d8b2 --- /dev/null +++ b/ta/miscellaneous/single-thread-nature.md @@ -0,0 +1,88 @@ +--- +chapter: 19 +pageNumber: 133 +description: ஜாவாஸ்கிரிப்ட் என்பது ஒரு பிரபலமான நிரலாக்க மொழியாகும், இது முதன்மையாக இணைய மேம்பாட்டில் பயன்படுத்தப்படுகிறது. பல மொழிகளிலிருந்து ஜாவாஸ்கிரிப்ட்டை வேறுபடுத்தும் முக்கியப் பண்புகளில் ஒன்று அதன் ஒற்றை நூல் (single-threaded) தன்மை ஆகும். அதாவது ஜாவாஸ்கிரிப்ட் குறியீடு உலாவி அல்லது இயக்க நேரச் சூழலின் (runtime environment) ஒரு முக்கிய நூலில் (thread) செயல்படுத்தப்படுகிறது. +--- + +# ஜாவாஸ்கிரிப்ட்டின் ஒற்றை நூல் தன்மை (Single-Threaded Nature of JavaScript) + +ஜாவாஸ்கிரிப்ட் என்பது ஒற்றை நூல் நிரலாக்க மொழியாகும் (single-threaded programming language), இது ஒரு முக்கிய நூலில் (main thread) குறியீட்டை வரிசையாகச் (sequentially) செயல்படுத்துகிறது. வலைப் பயன்பாடுகளில் பதிலளிக்கும் தன்மையை (responsiveness) உறுதிசெய்து, முக்கிய நூலைத் தடுக்காமல் (without blocking) பணிகளைத் திறமையாகக் கையாள, தடுப்பற்ற ஒத்திசைவற்ற வடிவங்களை (non-blocking asynchronous patterns) இது நம்பியுள்ளது. இது ஒத்திசைவை (concurrency) எளிதாக்கும் அதே வேளையில், கால்பேக்குகள் (callbacks) மற்றும் நிகழ்வு உந்துதல் (event-driven) நிரலாக்கத்தின் திறம்படப் பயன்பாடு தேவைப்படுகிறது. + +## ஒற்றை நூல் ஜாவாஸ்கிரிப்ட்டைப் புரிந்துகொள்வது (Understanding Single-Threaded JavaScript) + +ஜாவாஸ்கிரிப்ட்டின் ஒற்றை நூல் செயலாக்கத்தைப் பற்றிப் புரிந்துகொள்ள வேண்டிய சில முக்கியக் குறிப்புகள் இங்கே: + +1. **ஒரு நூல், ஒரு பணி (One Thread, One Task):** ஜாவாஸ்கிரிப்ட் ஒற்றைச் செயலாக்க நூலிற்குள் (single execution thread) இயங்குகிறது, அதாவது அதால் ஒரு நேரத்தில் ஒரு பணியை மட்டுமே செய்ய முடியும். இந்த நூல் பெரும்பாலும் "முக்கிய நூல் (main thread)" அல்லது "நிகழ்வு லூப் (event loop)" என்று குறிப்பிடப்படுகிறது. + +2. **தடுப்பது vs தடுக்காதது (Blocking vs. Non-Blocking):** ஜாவாஸ்கிரிப்ட் குறியீடு இயல்பாகவே தடுக்காதது (non-blocking). அதாவது, அதிக நேரம் எடுக்கும் செயல்பாடு (நெட்வொர்க் கோரிக்கை (network request) அல்லது கோப்பு வாசிப்பு (file read) போன்ற) எதிர்கொள்ளப்படும் போது, ஜாவாஸ்கிரிப்ட் அது முடிவடையும் வரை காத்திருக்காது. அதற்குப் பதிலாக, அது பணியைச் சூழலின் மற்றொரு பகுதிக்கு (எ.கா., உலாவி அல்லது Node.js இயக்க நேரம்) அளித்து, மற்ற குறியீட்டைத் தொடர்ந்து செயல்படுத்துகிறது. + +3. **ஒத்திசைவற்ற நிரலாக்கம் (Asynchronous Programming):** முக்கிய நூலைத் தடுக்காமல் அதிக நேரம் எடுக்கும் செயல்பாடுகளைக் கையாள, ஜாவாஸ்கிரிப்ட் ஒத்திசைவற்ற நிரலாக்க வடிவங்களை (asynchronous programming patterns) பெரிதும் நம்பியுள்ளது. கால்பேக்குகள், பிராமிஸ்கள் (Promises) மற்றும் async/await போன்ற செயல்பாடுகள் டெவலப்பர்களை ஒத்திசைவற்ற செயல்பாடுகளுடன் திறம்படச் செயல்பட அனுமதிக்கின்றன. + +4. **நிகழ்வு-உந்துதல் (Event-Driven):** ஜாவாஸ்கிரிப்ட் பெரும்பாலும் "நிகழ்வு-உந்துதல்" என விவரிக்கப்படுகிறது. அதாவது பயனர் தொடர்புகள் (கிளிக்குகள், விசை அழுத்தங்கள்), டைமர்கள் (timers) அல்லது நெட்வொர்க் பதில்கள் (network responses) போன்ற நிகழ்வுகளைக் (events) கேட்டு அதற்கேற்பப் பதிலளிக்கிறது. ஒரு நிகழ்வு நிகழும்போது, அதனுடன் தொடர்புடைய கால்பேக் செயல்பாடு செயல்படுத்தப்படுகிறது. + +5. **ஒருங்கிணைப்பு மாதிரி (Concurrency Model):** ஜாவாஸ்கிரிப்ட் ஒற்றை நூலில் இயங்கும் அதே வேளையில், ஒத்திசைவு மாதிரியானது குறியீட்டின் ஒருங்கிணைந்த செயலாக்கத்தை செயல்படுத்துகிறது. பதிலளிக்கும் தன்மை மற்றும் தடுக்காத நடத்தை (non-blocking behavior) ஆகியவற்றை உறுதி செய்யும் வகையில் ஒத்திசைவற்ற பணிகளைச் செயல்படுத்துவதை நிர்வகிக்கும் நிகழ்வு லூப் (event loop) போன்ற வழிமுறைகள் மூலம் இது அடையப்படுகிறது. + +6. **உலாவி மற்றும் சுற்றுச்சூழல் தொடர்பு (Browser and Environment Interaction):** வலை மேம்பாட்டில், ஜாவாஸ்கிரிப்ட் உலாவியின் ஆவணப் பொருள் மாதிரி (Document Object Model - DOM) மற்றும் பிற உலாவி APIகளுடன் தொடர்பு கொள்கிறது. பதிலளிக்கக்கூடிய பயனர் இடைமுகத்தைப் (user interface) பராமரிக்க, ஜாவாஸ்கிரிப்ட் குறியீடு விரைவாகவும் திறமையாகவும் செயல்பட வேண்டும் மற்றும் தேவையான போது தனித்தனி நூல்களுக்கு நேரம் எடுக்கும் செயல்பாடுகளை வழங்க வேண்டும். + +## எடுத்துக்காட்டு + +```javascript +// Simulating an asynchronous operation with a callback +function simulateAsyncOperation(callback) { + setTimeout(function () { + console.log("Async operation completed."); + callback(); + }, 2000); // Simulating a 2-second delay +} + +console.log("Start of the program"); + +// Initiating an asynchronous operation +simulateAsyncOperation(function () { + console.log("Callback executed: Handling the result."); +}); + +console.log("End of the program"); +``` + +இந்த எடுத்துக்காட்டில், ஜாவாஸ்கிரிப்ட்டின் ஒற்றை நூல் தன்மை மற்றும் கால்பேக்குகளைப் (callbacks) பயன்படுத்தி ஒத்திசைவற்ற செயல்பாடுகளை அது எவ்வாறு கையாளுகிறது என்பதை விளக்குகிறோம். + +### குறியீடு விளக்கம் (Code Explanation): + +- `setTimeout` ஐப் பயன்படுத்தி ஒத்திசைவற்ற செயல்பாட்டை உருவகப்படுத்தும் `simulateAsyncOperation` செயல்பாட்டை (function) நாங்கள் வரையறுக்கிறோம். இந்தச் செயல்பாடு ஒரு கால்பேக்கை ஒரு வாதமாக (argument) எடுத்துக்கொள்கிறது, இது ஒத்திசைவற்ற செயல்பாடு முடிவடையும் போது செயல்படுத்தப்படும். + +- "நிரலின் தொடக்கம் (Start of the program)" என்பதை உள்நுழைவதன் (logging) மூலம் நிரலைத் தொடங்குகிறோம். + +- `simulateAsyncOperation` ஐப் பயன்படுத்தி, கால்பேக் செயல்பாட்டைக் கடந்து (passing), ஒத்திசைவற்ற செயல்பாட்டைத் தொடங்குகிறோம். இந்தச் செயல்பாடு 2-வினாடி தாமதத்திற்குப் பிறகு செயல்படுத்தப்படும். + +- ஒத்திசைவற்ற செயல்பாட்டைத் தொடங்கிய உடனேயே, "நிரலின் முடிவு (End of the program)" என்பதை உள்நுழைகிறோம். + +### செயலாக்க ஓட்டம் (Execution Flow): + +- இந்த குறியீட்டை நீங்கள் இயக்கும்போது, ஒத்திசைவற்ற செயல்பாடு முடிவதற்கு 2 வினாடிகள் எடுத்தாலும், நிரல் தடுப்பதில்லை (does not block) என்பதை நீங்கள் கவனிப்பீர்கள். "நிரலின் முடிவு (End of the program)" செய்தியானது ஒத்திசைவற்ற செயல்பாட்டைத் தொடங்கிய உடனேயே உள்நுழைந்து, ஜாவாஸ்கிரிப்ட்டின் தடுக்காத நடத்தையை (non-blocking behavior) விளக்குகிறது. + +- 2-வினாடி தாமதத்திற்குப் பிறகு, "ஒத்திசைவற்ற செயல்பாடு முடிந்தது (Async operation completed)" செய்தி உள்நுழையும், அதைத் தொடர்ந்து "கால்பேக் செயல்படுத்தப்பட்டது: முடிவைக் கையாளுதல் (Callback executed: Handling the result)", ஒத்திசைவற்ற செயல்பாடு முடிந்ததும் கால்பேக் செயல்பாடு செயல்படுத்தப்பட்டதைக் குறிக்கிறது. + +### முக்கியத் தகவல்கள் (Key Takeaways): + +- ஜாவாஸ்கிரிப்ட் ஒற்றை நூலில் (single thread) இயங்குகிறது, மேலும் ஒத்திசைவற்ற செயல்பாடுகள் கால்பேக்குகள் மூலம் கையாளப்படுகின்றன. + +- ஒற்றை நூல் தன்மையானது அதிக நேரம் எடுத்துக்கொள்ளும் பணிகளின் போதும் ஜாவாஸ்கிரிப்ட் பதிலளிக்கக்கூடியதாக (responsive) இருக்க அனுமதிக்கிறது. + +- ஜாவாஸ்கிரிப்ட்டில் ஒத்திசைவற்ற குறியீட்டுடன் வேலை செய்வதற்கான அடிப்படை வழிமுறையாகக் கால்பேக்குகள் (Callbacks) உள்ளன. + +## நன்மைகள் மற்றும் சவால்கள் (Benefits and Challenges) + +### நன்மைகள்: + +- **எளிமை (Simplicity):** ஒற்றை-நூல் செயலாக்கமானது நிரலாக்க மாதிரியை (programming model) எளிதாக்குகிறது மற்றும் சிக்கலான ஒருங்கிணைப்பு (concurrency) தொடர்பான பிழைகளின் (bugs) அபாயத்தைக் குறைக்கிறது. +- **கணிப்புத்தன்மை (Predictability):** ஒற்றை நூல் தன்மை, செயல்படுத்தும் வரிசை (order of execution) மற்றும் உங்கள் நிரலின் நிலை குறித்துக் காரணத்தைக் கூறுவதை (reason about) எளிதாக்குகிறது. + +### சவால்கள்: + +- **தடுக்கும் செயல்பாடுகள் (Blocking Operations):** நீண்ட நேரம் இயங்கும் செயல்பாடுகள் முக்கிய நூலைத் தடுக்கலாம், இது மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும், குறிப்பாக வலைப் பயன்பாடுகளில். +- **கால்பேக் நரகம் (Callback Hell):** கால்பேக்குகளை அதிகமாகப் பயன்படுத்துவது (பெரும்பாலும் "கால்பேக் நரகம்" என்று குறிப்பிடப்படுகிறது) குறியீட்டைப் படிக்கவும் பராமரிக்கவும் கடினமாக்கும். +- **ஒருங்கிணைப்பு இடையூறு (Concurrency Bottleneck):** ஜாவாஸ்கிரிப்ட் ஒற்றை நூலில் இயங்குவதால் CPU-பிணைக்கப்பட்ட (CPU-bound) பணிகளால் பல மையச் செயலிகளை (multi-core processors) முழுமையாகப் பயன்படுத்த முடியாது. + + +ஜாவாஸ்கிரிப்ட்டின் ஒற்றை நூல் தன்மை மொழியின் வரையறுக்கும் அம்சமாகும். இது நிரலாக்கத்தின் சில அம்சங்களை எளிதாக்கும் அதே வேளையில், ஒத்திசைவற்ற பணிகளைக் கையாள்வது மற்றும் பதிலளிக்கக்கூடிய பயன்பாடுகளை (responsive applications) உறுதி செய்வது போன்ற சவால்களை அளிக்கிறது. ஜாவாஸ்கிரிப்ட் டெவலப்பர்களுக்கு ஒத்திசைவற்ற வடிவங்களின் (asynchronous patterns) பயனுள்ள பயன்பாடு மற்றும் நிகழ்வு உந்துதல் மாதிரியைப் (event-driven model) புரிந்துகொள்வது அவசியம். diff --git a/ta/miscellaneous/template-literals.md b/ta/miscellaneous/template-literals.md new file mode 100644 index 00000000..1b31584b --- /dev/null +++ b/ta/miscellaneous/template-literals.md @@ -0,0 +1,34 @@ +--- +chapter: 19 +pageNumber: 113 +description: டெம்ப்ளேட் லிட்டரல்கள் (Template literals) என்பவை பேக்டிக் `(``)` உடன் பிரிக்கப்பட்ட லிட்டரல்கள் (literals) மற்றும் சரங்களில் (strings) மாறி (variable) மற்றும் கோவை இடைக்கணிப்பில் (expression interpolation) பயன்படுத்தப்படுகின்றன. +--- +# டெம்ப்ளேட் லிட்டரல்கள் (Template Literals) + +டெம்ப்ளேட் லிட்டரல்கள் (Template literals) என்பவை பேக்டிக் `(``)` உடன் பிரிக்கப்பட்ட லிட்டரல்கள் மற்றும் சரங்களில் (strings) மாறி மற்றும் கோவை இடைக்கணிப்பில் பயன்படுத்தப்படுகின்றன. + +```javascript +let text = `Hello World!`; +// template literals with both single and double code inside a single string +let text = `He's often called "Johnny"`; +// template literals with multiline strings +let text = +`The quick +brown fox +jumps over +the lazy dog`; + +// template literals with variable interpolation +const firstName = "John"; +const lastName = "Doe"; + +const welcomeText = `Welcome ${firstName}, ${lastName}!`; + +// template literals with expression interpolation +const price = 10; +const VAT = 0.25; + +const total = `Total: ${(price * (1 + VAT)).toFixed(2)}`; +``` + + diff --git a/ta/miscellaneous/testing.md b/ta/miscellaneous/testing.md new file mode 100644 index 00000000..02f44ead --- /dev/null +++ b/ta/miscellaneous/testing.md @@ -0,0 +1,89 @@ +--- +chapter: 19 +pageNumber: 139 +description: இந்த அத்தியாயத்தில், இணைய மேம்பாட்டில் சோதனையின் (testing) முக்கியமான அம்சங்களை ஆராய்வோம். வலைப் பயன்பாடுகளின் நம்பகத்தன்மை (reliability) மற்றும் செயல்பாட்டை (functionality) உறுதிப்படுத்த இந்தத் திறன்கள் இன்றியமையாதவை. பல்வேறு கருவிகள் (tools) மற்றும் கட்டமைப்புகளைப் (frameworks) பயன்படுத்தி யூனிட் சோதனையின் (unit testing) உலகத்தை ஆராய்வோம். +--- + +## யூனிட் சோதனை (Unit Testing) +யூனிட் சோதனை என்பது வலை மேம்பாட்டில் ஒரு அடிப்படை நடைமுறையாகும். தனிப்பட்ட கூறுகள் (components) அல்லது செயல்பாடுகள் (functions) எதிர்பார்த்தபடி இயங்குவதை உறுதிப்படுத்த அவற்றைச் சோதிப்பதை இது உள்ளடக்குகிறது. இந்த நடைமுறையானது சோதனை உந்துதல் மேம்பாடு (test-driven development - TDD) எனப்படும் மென்பொருள் மேம்பாட்டு அணுகுமுறையில் (software development approach) சேர்க்கப்பட்டுள்ளது, இது மென்பொருள் தேவைகளிலிருந்து முதலில் யூனிட் சோதனைகளை எழுதுவதையும் பின்னர் குறியீட்டை எழுதுவதையும் கொண்டுள்ளது. யூனிட் சோதனைகளை நாம் ஏன் எழுத வேண்டும் என்பதை இப்போது பார்ப்போம். + +## யூனிட் சோதனைகளை ஏன் எழுத வேண்டும்? +பின்வரும் காரணங்களால் யூனிட் சோதனை பரவலாகப் பயன்படுத்தப்படுகிறது: +- TDD இல், மென்பொருள் தேவைகள் (software requirements) குறிப்பிட்ட சோதனை வழக்குகளாக (test cases) மாற்றப்படுகின்றன. புதிய சோதனைகளில் தேர்ச்சி பெற மென்பொருள் பின்னர் மேம்படுத்தப்படுகிறது. +- குறியீட்டுத் தளத்தின் (codebase) தனிப்பட்ட பகுதிகள் சரியாகச் செயல்படுகின்றனவா என்பதைச் சரிபார்க்கும் பொருட்டு. +- பிற யூனிட்கள் அல்லது மென்பொருளின் செயல்பாட்டைப் பாதிக்காமல் குறியீட்டு மாற்றத்தை (code modification) இது அனுமதிக்கிறது. +- ரீஃபாக்டரிங் (refactoring) அல்லது மாற்றங்களைச் செய்யும்போது இது ஒரு பாதுகாப்பு வலையை (safety net) வழங்குகிறது. +- செயல்பாடுகள் மற்றும் கூறுகளின் (components) எதிர்பார்க்கப்படும் நடத்தையை ஆவணப்படுத்த (document) இது உதவுகிறது. +- ஒவ்வொரு மாட்யூலுக்கும் (module) அதன் சொந்தப் பொறுப்பு இருப்பதால் மாட்யூல்களின் மறுநிகழ்வு (repetition) இல்லாமல் இருக்க இது உதவுகிறது. + +## யூனிட் சோதனைகளின் நன்மைகள் (Benefits of Unit Tests) +யூனிட் சோதனைகளின் முக்கிய நன்மை அவற்றின் லேசர்-கூர்மையான (laser-sharp) கவனம் ஆகும். அவர்கள் ஒற்றைச் செயல்பாட்டைச் சோதிப்பதால், அவை துல்லியமான பின்னூட்டத்தை (feedback) அளிக்கின்றன. ஒரு யூனிட் சோதனை தோல்வியுற்றால், பெரும்பாலான சந்தர்ப்பங்களில், சோதிக்கப்படும் குறிப்பிட்ட செயல்பாடே பிரச்சனை என்பதை நீங்கள் உறுதியாக நம்பலாம். +- பிழைகளை (bugs) விரைவாகவும் எளிதாகவும் கண்டறிந்து சரிசெய்ய யூனிட் சோதனைகள் உதவுகின்றன. +- யூனிட் சோதனைகள் உயர்ந்த குறியீடு தரத்திற்கு (code quality) பங்களிக்கின்றன. +- சிறந்த பயன்பாட்டுக் கட்டமைப்புக்கு (application architecture) யூனிட் சோதனைகள் பங்களிக்கின்றன. +- யூனிட் சோதனைகள் ஆவணங்களாகச் (documentation) செயல்படுகின்றன. + +## யூனிட் சோதனைகளை உருவாக்குவதற்கான சிறந்த நடைமுறைகள் (Best Practices for creating Unit Tests) +உங்களிடம் நல்ல யூனிட் சோதனைகள் இருப்பதை உறுதிசெய்ய இந்தச் சிறந்த நடைமுறைகளைப் பின்பற்றவும்: +- மேம்பாட்டின் (development) போது சோதனைகளை எழுதுங்கள், அதற்குப் பிறகு அல்ல +- சோதனை வழக்குகள் (Test cases) செயல்படுத்தும் தர்க்கத்தை (implementation logic) நகலெடுக்கக் (duplicate) கூடாது. +- சோதனை வழக்குகள் அவற்றின் குறியீடு மாறாத வரை ஒரே நடத்தையை (behavior) வெளிப்படுத்த வேண்டும். +- சோதனை வழக்குகளுக்கு நிலையான பெயரிடும் மாநாட்டைப் (naming convention) பயன்படுத்தவும் +- யூனிட் சோதனைகளில் நிபந்தனைக்குட்பட்ட தர்க்க வெளிப்பாடுகளைப் (conditional logic expressions) பயன்படுத்துவதைத் தவிர்க்கவும் +- முடிந்தால் யூனிட் சோதனைகளைத் தானியங்குபடுத்தவும் (automate) + +## சோதனைக் கட்டமைப்புகள் (Testing Frameworks) +சோதனைக் கட்டமைப்புகள் சோதனைகளை எழுதுதல் மற்றும் இயக்கும் செயல்முறையை ஒழுங்குபடுத்துகின்றன. ஜாவாஸ்கிரிப்டில் Jest மற்றும் Mocha ஆகிய இரண்டும் பிரபலமான கட்டமைப்புகளாகும். + +## Jest +Jest என்பது பூஜ்ஜிய உள்ளமைவு (zero-config), ஆல்-இன்-ஒன் (all-in-one) பிரபலமான சோதனைக் கட்டமைப்பாகும். இது யூனிட் மற்றும் ஒருங்கிணைப்பு சோதனை (integration testing) ஆகிய இரண்டிற்கும் ஏற்றது. Jest உடன் எவ்வாறு தொடங்குவது என்று பார்ப்போம். + +npm அல்லது yarn ஐப் பயன்படுத்தி Jest ஐ நிறுவவும்: + +```sh +npm install --save-dev jest +``` + +நீங்கள் சோதிக்க விரும்பும் செயல்பாட்டிற்கான ஒரு சோதனைக் கோப்பை (எ.கா., `myFunction.test.js`) உருவாக்கவும். + +Jest இன் சோதனைச் செயல்பாட்டைப் (test function) பயன்படுத்தி ஒரு சோதனை வழக்கை எழுதவும்: + +```javascript +const myFunction = require('./myFunction'); + +test('should return the sum of two numbers', () => { + expect(myFunction(2, 3)).toBe(5); +}); +``` +jest கட்டளையைப் பயன்படுத்திச் சோதனைகளை இயக்கவும்: +```sh +npx jest +``` + +### Mocha +Mocha ஒரு நெகிழ்வான சோதனைக் கட்டமைப்பாகும். இது சோதனைகளை இயக்குவதற்கான கட்டமைப்பை வழங்குகிறது, ஆனால் வலியுறுத்தல்கள் (assertions) மற்றும் கேலி (mocking) செய்யக் கூடுதல் நூலகங்கள் தேவை. + +Mocha உடன் தொடங்குதல் (Getting Started with Mocha) + +Mocha மற்றும் Chai போன்ற வலியுறுத்தல் நூலகத்தை நிறுவவும்: +```sh +npm install --save-dev mocha chai +``` +ஒரு `test` கோப்பகத்தை (directory) உருவாக்கி உங்கள் சோதனைக் கோப்புகளைச் சேர்க்கவும். + +Mocha இன் describe மற்றும் it செயல்பாடுகள் மற்றும் Chai இன் வலியுறுத்தல் செயல்பாடுகளைப் பயன்படுத்தி உங்கள் சோதனை வழக்குகளை எழுதுங்கள். + +```javascript +const chai = require('chai'); +const expect = chai.expect; +const myFunction = require('./myFunction'); + +describe('myFunction', () => { + it('should return the sum of two numbers', () => { + expect(myFunction(2, 3)).to.equal(5); + }); +}); +``` + + +வலை மேம்பாட்டில் சோதனையின் அடிப்படைகளை நாங்கள் ஆராய்ந்தோம் மற்றும் எந்த வலை டெவலப்பருக்கும் இன்றியமையாத யூனிட் சோதனை மற்றும் பிற சோதனைக் கட்டமைப்புகள் மற்றும் கருவிகளின் முக்கியத்துவத்தைப் பற்றி விவாதித்தோம். நிலையான பயிற்சி மற்றும் சரியான கருவிகளின் தொகுப்பிற்கான அணுகல் மூலம், ஒருவர் நம்பகமான குறியீட்டை எழுதலாம் மற்றும் பயன்பாடுகள் உகந்ததாகச் செயல்படுவதை உறுதிசெய்யலாம். diff --git a/ta/modules.md b/ta/modules.md new file mode 100644 index 00000000..b369246a --- /dev/null +++ b/ta/modules.md @@ -0,0 +1,78 @@ +--- +layout: editorial +chapter: 13 +pageNumber: 87 +description: தொகுதிகள் (Modules) என்பவை குறியீட்டை தனித்தனி, மீண்டும் பயன்படுத்தக்கூடிய (reusable) மற்றும் இணைக்கப்பட்ட கூறுகளாக (encapsulated components) ஒழுங்கமைப்பதற்கான ஒரு வழியாகும். தொகுதிகள் டெவலப்பர்களை பெரிய மற்றும் சிக்கலான குறியீட்டுத் தளங்களை (codebases) சிறிய, நிர்வகிக்கக்கூடிய பகுதிகளாக உடைக்க அனுமதிக்கின்றன, இது திட்டங்களைப் புரிந்துகொள்வது, பராமரிப்பது மற்றும் ஒத்துழைப்பதை எளிதாக்குகிறது. +--- + +# அத்தியாயம் 13 +# தொகுதிகள் (Modules) + +நிஜ உலகில், ஒரு நிரல் புதிய செயல்பாட்டின் தேவைகளைச் சமாளிக்க இயற்கையாக வளர்கிறது. வளரும் குறியீட்டுத் தளத்துடன் குறியீட்டை அமைப்பதற்கும் பராமரிப்பதற்கும் கூடுதல் வேலை தேவைப்படுகிறது. எதிர்காலத்தில் இது பலன் தரும் என்றாலும், அதைப் புறக்கணித்து நிரல்களை ஆழமாகச் சிக்கலாக மாற்றுவது தூண்டக்கூடியதாக இருக்கும். யதார்த்தத்தில், இது பயன்பாட்டின் சிக்கலை (complexity) அதிகரிக்கிறது, ஏனெனில் ஒருவர் அமைப்பைப் பற்றிய ஒரு முழுமையான புரிதலை உருவாக்க நிர்ப்பந்திக்கப்படுகிறார் மற்றும் எந்தவொரு பகுதியையும் தனிமைப்படுத்திப் பார்க்க சிரமப்படுகிறார். இரண்டாவதாக, அதன் செயல்பாட்டைப் பயன்படுத்த ஒருவர் சிக்கலைத் தீர்ப்பதில் அதிக நேரத்தை முதலீடு செய்ய வேண்டும். + +இந்த சிக்கல்களைத் தவிர்க்க _தொகுதிகள் (Modules)_ வருகின்றன. ஒரு `module` எந்தெந்தக் குறியீடு துண்டுகளைச் சார்ந்துள்ளது என்பதையும், பிற தொகுதிகள் பயன்படுத்துவதற்கு என்ன செயல்பாட்டை வழங்குகிறது என்பதையும் குறிப்பிடுகிறது. மற்றொரு தொகுதியைச் சார்ந்திருக்கும் தொகுதிகள் _சார்புகள் (dependencies)_ என்று அழைக்கப்படுகின்றன. குறியீட்டை தொகுதிகளாக ஒழுங்கமைக்கவும், தேவைக்கேற்ப அதை ஏற்றவும் பல்வேறு தொகுதி நூலகங்கள் (module libraries) உள்ளன. + +* **AMD** - பழமையான தொகுதி அமைப்புகளில் ஒன்று, ஆரம்பத்தில் [require.js](https://requirejs.org/) ஆல் பயன்படுத்தப்பட்டது. +* **CommonJS** - Node.js சேவையகத்திற்காக (server) உருவாக்கப்பட்ட தொகுதி அமைப்பு. +* **UMD** - [AMD](https://requirejs.org/docs/whyamd.html#amd) மற்றும் [CommonJS](https://requirejs.org/docs/whyamd.html#commonjs) உடன் இணக்கமான (compatible) தொகுதி அமைப்பு. + +தொகுதிகள் ஒன்றையொன்று ஏற்ற முடியும், மேலும் செயல்பாட்டைப் பரிமாறிக்கொள்ள `import` மற்றும் `export` என்ற சிறப்பு உத்தரவுகளைப் (directives) பயன்படுத்தலாம், மற்றும் ஒன்றோடொன்று செயல்பாடுகளை (functions) அழைக்கலாம். + +* `export` - தற்போதைய தொகுதிக்கு வெளியே இருந்து அணுகக்கூடிய செயல்பாடுகள் மற்றும் மாறிகளை (variables) லேபிளிடுகிறது +* `import` - வெளியிலுள்ள தொகுதியிலிருந்து செயல்பாட்டை இறக்குமதி செய்கிறது + +தொகுதிகளில் உள்ள `import` மற்றும் `export` பொறிமுறையைப் பார்ப்போம். `sayHi.js` கோப்பிலிருந்து `sayHi` செயல்பாடு ஏற்றுமதி செய்யப்பட்டுள்ளது (exported). + +```javascript +// 📁 sayHi.js +export const sayHi = (user) => { + alert(`வணக்கம், ${user}!`); +} +``` + +`sayHi` செயல்பாடு `import` உத்தரவின் உதவியுடன் `main.js` கோப்பில் பயன்படுத்தப்படுகிறது. + +```javascript +// 📁 main.js +import {sayHi} from './sayHi.js'; + +alert(sayHi); // செயல்பாடு (function)... +sayHi('Kelvin'); // வணக்கம், Kelvin! +``` + +இங்கே, import உத்தரவு தொடர்புடைய பாதையை (relative path) இறக்குமதி செய்வதன் மூலம் தொகுதியை ஏற்றுகிறது மற்றும் `sayHi` மாறியை ஒதுக்குகிறது. + +தொகுதிகளை இரண்டு வழிகளில் ஏற்றுமதி செய்யலாம்: **Named (பெயரிடப்பட்டவை)** மற்றும் **Default (இயல்புநிலை)**. மேலும், Named ஏற்றுமதிகளை ஒரே வரியில் (inline) அல்லது தனித்தனியாக ஒதுக்கலாம். + +```javascript +// 📁 person.js + +// உள்ளமை (inlined) பெயரிடப்பட்ட ஏற்றுமதிகள் +export const name = "Kelvin"; +export const age = 30; + +// ஒரேயடியாக (at once) +const name = "Kelvin"; +const age = 30; +export {name, age}; +``` + +{% hint style="working" %} +ஒரு கோப்பில் ஒரு இயல்புநிலை (default) `export` மட்டுமே இருக்க முடியும். +{% endhint %} + +
    // 📁 message.js 
+const message = (name, age) => {
+    return `${name} இன் வயது ${age}.`;
+};
+export default message;
+
    + +ஏற்றுமதி வகையின் அடிப்படையில், நாம் அதை இரண்டு வழிகளில் இறக்குமதி செய்யலாம். பெயரிடப்பட்ட ஏற்றுமதி (named export) சுருள் அடைப்புக்குறிகளைப் (curly braces) பயன்படுத்தி கட்டமைக்கப்படுகிறது, அதேசமயம் இயல்புநிலை ஏற்றுமதிகள் (default exports) அவ்வாறு செய்யப்படுவதில்லை. + +```javascript +import { name, age } from "./person.js"; // பெயரிடப்பட்ட ஏற்றுமதி இறக்குமதி +import message from "./message.js"; // இயல்புநிலை ஏற்றுமதி இறக்குமதி +``` + +தொகுதிகளை ஒதுக்கும்போது, நாம் _சுழற்சி சார்பைத் (circular dependency)_ தவிர்க்க வேண்டும். சுழற்சி சார்பு என்பது தொகுதி `A` ஆனது `B` ஐச் சார்ந்திருக்கும், மற்றும் `B` ஆனது நேரடியாகவோ அல்லது மறைமுகமாகவோ `A` ஐச் சார்ந்திருக்கும் ஒரு சூழ்நிலையாகும். diff --git a/ta/numbers/README.md b/ta/numbers/README.md new file mode 100644 index 00000000..0f73e58d --- /dev/null +++ b/ta/numbers/README.md @@ -0,0 +1,46 @@ +--- +layout: editorial +chapter: 3 +pageNumber: 18 +description: எண்கள் என்பது எண் மதிப்புகளை குறிக்க பயன்படுத்தப்படும் தரவு வகையை குறிக்கிறது. JavaScript இல் உள்ள எண்கள் முழு எண்களாக (whole numbers) அல்லது மிதவை-புள்ளி எண்களாக (decimal numbers) இருக்கலாம். +--- + +# அத்தியாயம் 3 +# எண்கள் + +JavaScript இல் **ஒரே ஒரு வகை எண்** மட்டுமே உள்ளது – 64 bit float point. இது Java இன் `double` போன்றது. மற்ற பெரும்பாலான நிரலாக்க மொழிகளைப் போலல்லாமல், தனித்தனி முழு எண் வகை இல்லை, எனவே 1 மற்றும் 1.0 ஒரே மதிப்பு. எண்ணை உருவாக்குவது எளிது, `var` முக்கியசொல்லைப் பயன்படுத்தி வேறு எந்த மாறி வகைக்கும் போல செய்யலாம். + +நிலையான மதிப்பிலிருந்து எண்களை உருவாக்கலாம்: + +```javascript +// இது ஒரு float: +let a = 1.2; + +// இது ஒரு முழு எண்: +let b = 10; +``` + +அல்லது, வேறொரு மாறியின் மதிப்பிலிருந்து: + +```javascript +let a = 2; +let b = a; +``` + +முழு எண்களின் துல்லியம் 15 இலக்கங்கள் வரை துல்லியமாக இருக்கும் மற்றும் அதிகபட்சம் 17. + +```javascript +let x = 999999999999999; // x இன் மதிப்பு 999999999999999 ஆகும் +let y = 9999999999999999; // y இன் மதிப்பு 10000000000000000 ஆகும் +``` + +`0x` முன்னொட்டுடன் இருந்தால் எண் மாறிலிகள் hexadecimal ஆக விளக்கப்படுகின்றன. + +```javascript +let z = 0xFF; // 255 +``` + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [கணிதம்](./math.md) +* [அடிப்படை ஆபரேட்டர்கள்](./operators.md) +* [மேம்பட்ட ஆபரேட்டர்கள்](./advanced.md) \ No newline at end of file diff --git a/ta/numbers/advanced.md b/ta/numbers/advanced.md new file mode 100644 index 00000000..a2b68dea --- /dev/null +++ b/ta/numbers/advanced.md @@ -0,0 +1,112 @@ +--- +chapter: 3 +pageNumber: 28 +description: தரவில் அடிப்படை கணிதம் மற்றும் தர்க்க செயல்பாடுகளுக்கு அப்பால் சக்திவாய்ந்த செயல்பாட்டை வழங்கும் பல மேம்பட்ட ஆபரேட்டர்கள் உள்ளன. இந்த மேம்பட்ட ஆபரேட்டர்கள் தரவை கையாளவும், bitwise செயல்பாடுகளை செய்யவும், பொருட்களுடன் பணிபுரியவும் மிகவும் உதவியாக இருக்கும். +--- +# மேம்பட்ட ஆபரேட்டர்கள் + +ஆபரேட்டர்கள் அடைப்புக்குறிகள் இல்லாமல் ஒன்றாக வரும்போது, அவை பயன்படுத்தப்படும் வரிசை ஆபரேட்டர்களின் _முன்னுரிமை_ மூலம் தீர்மானிக்கப்படுகிறது. பெருக்கல் `(*)` மற்றும் வகுத்தல் `(/)` கூட்டல் `(+)` மற்றும் கழித்தல் `(-)` ஐ விட அதிக முன்னுரிமை கொண்டவை. + +```javascript +// பெருக்கல் முதலில் செய்யப்படுகிறது, பின்னர் கூட்டல் வருகிறது +let x = 100 + 50 * 3; // 250 +// அடைப்புக்குறிகளுடன் அடைப்புக்குறிகளுக்குள் உள்ள செயல்பாடுகள் முதலில் கணக்கிடப்படுகின்றன +let y = (100 + 50) * 3; // 450 +// ஒரே முன்னுரிமை கொண்ட செயல்பாடுகள் இடமிருந்து வலமாக கணக்கிடப்படுகின்றன +let z = 100 / 50 * 3; +``` + +நிரல் எழுதும்போது பல மேம்பட்ட கணித ஆபரேட்டர்களைப் பயன்படுத்தலாம். சில முக்கிய மேம்பட்ட கணித ஆபரேட்டர்களின் பட்டியல்: + +* **Modulo ஆபரேட்டர் (`%`)**: Modulo ஆபரேட்டர் ஒரு வகுத்தல் செயல்பாட்டின் மீதியை திரும்பப் பெறுகிறது. எடுத்துக்காட்டாக: + +```javascript +console.log(10 % 3); // 1 +console.log(11 % 3); // 2 +console.log(12 % 3); // 0 +``` + +* **Exponentiation ஆபரேட்டர் (\* *)**: Exponentiation ஆபரேட்டர் ஒரு எண்ணை மற்றொரு எண்ணின் சக்தியாக உயர்த்துகிறது. இது ஒரு புதிய ஆபரேட்டர் மற்றும் அனைத்து உலாவிகளிலும் ஆதரிக்கப்படவில்லை, எனவே `Math.pow` செயல்பாட்டை பதிலாக பயன்படுத்த வேண்டியிருக்கலாம். எடுத்துக்காட்டாக: + +```javascript +console.log(2 ** 3); // 8 +console.log(3 ** 2); // 9 +console.log(4 ** 3); // 64 +``` + +* **Increment ஆபரேட்டர் (`++`)**: Increment ஆபரேட்டர் ஒரு எண்ணை ஒன்றால் அதிகரிக்கிறது. இதை prefix (operand க்கு முன்பு) அல்லது postfix (operand க்கு பிறகு) ஆக பயன்படுத்தலாம். எடுத்துக்காட்டாக: + +```javascript +let x = 1; +x++; // x இப்போது 2 +++x; // x இப்போது 3 +``` + +* **Decrement ஆபரேட்டர் (`--`)**: Decrement ஆபரேட்டர் ஒரு எண்ணை ஒன்றால் குறைக்கிறது. இதை prefix (operand க்கு முன்பு) அல்லது postfix (operand க்கு பிறகு) ஆக பயன்படுத்தலாம். எடுத்துக்காட்டாக: + +```javascript +let y = 3; +y--; // y இப்போது 2 +--y; // y இப்போது 1 +``` + +* **Math பொருள்**: `Math` பொருள் JavaScript இல் கணித செயல்பாடுகள் மற்றும் மாறிலிகளை வழங்கும் ஒரு உள்ளமைக்கப்பட்ட பொருளாகும். ஒரு எண்ணின் வர்க்கமூலத்தை கண்டுபிடிக்க, ஒரு எண்ணின் sine ஐ கணக்கிட, அல்லது சீரற்ற எண்ணை உருவாக்க போன்ற மேம்பட்ட கணித செயல்பாடுகளை செய்ய `Math` பொருளின் முறைகளைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக: + +```javascript +console.log(Math.sqrt(9)); // 3 +console.log(Math.sin(0)); // 0 +console.log(Math.random()); // 0 மற்றும் 1 க்கு இடையே சீரற்ற எண் +``` + +இவை JavaScript இல் கிடைக்கும் மேம்பட்ட கணித ஆபரேட்டர்கள் மற்றும் செயல்பாடுகளின் சில எடுத்துக்காட்டுகள் மட்டுமே. நிரல் எழுதும்போது மேம்பட்ட கணித செயல்பாடுகளை செய்ய பயன்படுத்தக்கூடிய இன்னும் பல உள்ளன. + +{% exercise %} +`num1` மற்றும் `num2` இல் செயல்பாடுகளை செய்ய பின்வரும் மேம்பட்ட ஆபரேட்டர்களைப் பயன்படுத்தவும். + +{% initial %} +let num1 = 10; +let num2 = 5; + +// num1 இன் மதிப்பை அதிகரிக்க ++ ஆபரேட்டர். +const result1 = +// num2 இன் மதிப்பை குறைக்க -- ஆபரேட்டர். +const result2 = +// num1 உடன் num2 ஐ கூட்ட += ஆபரேட்டர். +const result3 = +// num1 இலிருந்து num2 ஐ கழிக்க -= ஆபரேட்டர். +const result4 = + +{% solution %} +let num1 = 10; +let num2 = 5; + +// num1 இன் மதிப்பை அதிகரிக்க ++ ஆபரேட்டர். + +num1++; +const result1 = num1; // 11 +// num2 இன் மதிப்பை குறைக்க -- ஆபரேட்டர். +num2--; +const result2 = num2; // 4 +// num1 உடன் num2 ஐ கூட்ட += ஆபரேட்டர். +num1 += num2; +const result3 = num1 // 15 +// num1 இலிருந்து num2 ஐ கழிக்க -= ஆபரேட்டர். +num1 -= num2; +const result4 = num1 // 11 + +{% validation %} +assert(result1 === 11 && result2 === 4 && result3 === 15 && result4 === 11 ); + +{% context %} +{% endexercise %} + +## Nullish coalescing ஆபரேட்டர் '??' + +`nullish` coalescing ஆபரேட்டர் முதல் வாதம் `null/undefined` இல்லை என்றால் அதை திரும்பப் பெறுகிறது, இல்லையெனில் இரண்டாவதை. இது இரண்டு கேள்விக்குறிகளாக `??` எழுதப்படுகிறது. `x ?? y` இன் முடிவு: + +* `x` வரையறுக்கப்பட்டிருந்தால், `x`, +* `y` வரையறுக்கப்படவில்லை என்றால், `y`. + +{% hint style="info" %} +இது மொழிக்கு சமீபத்திய சேர்க்கை மற்றும் பழைய உலாவிகளை ஆதரிக்க polyfills தேவைப்படலாம் +{% endhint %} diff --git a/ta/numbers/math.md b/ta/numbers/math.md new file mode 100644 index 00000000..d2040ed1 --- /dev/null +++ b/ta/numbers/math.md @@ -0,0 +1,73 @@ +--- +chapter: 3 +pageNumber: 19 +description: Math பொருள் JavaScript இல் கணித செயல்பாடுகளை செய்ய அனுமதிக்கிறது. இது நிலையானது மற்றும் constructor இல்லை. முதலில் ஒரு Math பொருளை உருவாக்காமல் Math பொருளின் முறை மற்றும் பண்புகளை பயன்படுத்தலாம். +--- + +# கணிதம் + +`Math` பொருள் JavaScript இல் கணித செயல்பாடுகளை செய்ய அனுமதிக்கிறது. இது நிலையானது மற்றும் constructor இல்லை. முதலில் ஒரு Math பொருளை உருவாக்காமல் Math பொருளின் முறை மற்றும் பண்புகளை பயன்படுத்தலாம். அதன் பண்பை அணுக _Math.property_ ஐப் பயன்படுத்தலாம். சில math பண்புகள் கீழே விவரிக்கப்பட்டுள்ளன: + +```javascript +Math.E; // Euler's எண்ணை திரும்பப் பெறுகிறது +Math.PI; // PI ஐ திரும்பப் பெறுகிறது +Math.SQRT2; // 2 இன் வர்க்கமூலத்தை திரும்பப் பெறுகிறது +Math.SQRT1_2; // 1/2 இன் வர்க்கமூலத்தை திரும்பப் பெறுகிறது +Math.LN2; // 2 இன் இயல்பு மடக்கையை திரும்பப் பெறுகிறது +Math.LN10; // 10 இன் இயல்பு மடக்கையை திரும்பப் பெறுகிறது +Math.LOG2E; // E இன் அடிப்படை 2 மடக்கையை திரும்பப் பெறுகிறது +Math.LOG10E; // E இன் அடிப்படை 10 மடக்கையை திரும்பப் பெறுகிறது +``` + +சில math முறைகளின் எடுத்துக்காட்டுகள்: + +```javascript +Math.pow(8, 2); // 64 +Math.round(4.6); // 5 +Math.ceil(4.9); // 5 +Math.floor(4.9); // 4 +Math.trunc(4.9); // 4 +Math.sign(-4); // -1 +Math.sqrt(64); // 8 +Math.abs(-4.7); // 4.7 +Math.sin((90 * Math.PI) / 180); // 1 (90 டிகிரியின் sine) +Math.cos((0 * Math.PI) / 180); // 1 (0 டிகிரியின் cos) +Math.min(0, 150, 30, 20, -8, -200); // -200 +Math.max(0, 150, 30, 20, -8, -200); // 150 +Math.random(); // 0.44763808380924375 +Math.log(2); // 0.6931471805599453 +Math.log2(8); // 3 +Math.log10(1000); // 3 +``` + +math முறைகளை அணுக, தேவைப்படும் இடங்களில் வாதங்களுடன் அதன் முறைகளை நேரடியாக அழைக்கலாம். + +| முறை | விளக்கம் | +| ------------------ | ------------------------------------------------------------------------------- | +| `abs(x)` | `x` இன் முழுமதிப்பை திரும்பப் பெறுகிறது | +| `acos(x)` | `x` இன் arccosine ஐ, radians இல் திரும்பப் பெறுகிறது | +| `acosh(x)` | `x` இன் hyperbolic arccosine ஐ திரும்பப் பெறுகிறது | +| `asin(x)` | `x` இன் arcsine ஐ, radians இல் திரும்பப் பெறுகிறது | +| `asinh(x)` | `x` இன் hyperbolic arcsine ஐ திரும்பப் பெறுகிறது | +| `atan(x)` | `-PI/2` மற்றும் `PI/2` radians க்கு இடையே எண் மதிப்பாக `x` இன் arctangent ஐ திரும்பப் பெறுகிறது | +| `atan2(y,x)` | அதன் வாதங்களின் ஈவுத்தொகையின் arctangent ஐ திரும்பப் பெறுகிறது | +| `atanh(x)` | `x` இன் hyperbolic arctangent ஐ திரும்பப் பெறுகிறது | +| `crbt(x)` | `x` இன் கனமூலத்தை திரும்பப் பெறுகிறது | +| `ceil(x)` | `x` இன் அருகிலுள்ள முழு எண்ணுக்கு மேல்நோக்கி வட்டமாக்கப்பட்டதை திரும்பப் பெறுகிறது | +| `cos(x)` | `x` இன் cosine ஐ, radians இல் திரும்பப் பெறுகிறது | +| `cosh(x)` | `x` இன் hyperbolic cosine ஐ திரும்பப் பெறுகிறது | +| `exp(x)` | `x` இன் exponential மதிப்பை திரும்பப் பெறுகிறது | +| `floor(x)` | `x` இன் அருகிலுள்ள முழு எண்ணுக்கு கீழ்நோக்கி வட்டமாக்கப்பட்டதை திரும்பப் பெறுகிறது | +| `log(x)` | `x` இன் இயல்பு மடக்கையை திரும்பப் பெறுகிறது | +| `max(x,y,z,... n)` | அதிக மதிப்பு கொண்ட எண்ணை திரும்பப் பெறுகிறது | +| `min(x,y,z,... n)` | குறைந்த மதிப்பு கொண்ட எண்ணை திரும்பப் பெறுகிறது | +| `pow(x,y)` | `y` இன் சக்தியில் `x` இன் மதிப்பை திரும்பப் பெறுகிறது | +| `random()` | 0 மற்றும் 1 க்கு இடையே உள்ள எண்ணை திரும்பப் பெறுகிறது | +| `round(x)` | அருகிலுள்ள `x` க்கு எண்ணை வட்டமாக்குகிறது | +| `sign(x)` | x எதிர்மறை, `null` அல்லது நேர்மறை என்றால் திரும்பப் பெறுகிறது (-1,0,1) | +| `sin(x)` | `x` இன் sine ஐ, radians இல் திரும்பப் பெறுகிறது | +| `sinh(x)` | `x` இன் hyperbolic sine ஐ திரும்பப் பெறுகிறது | +| `sqrt(x)` | `x` இன் வர்க்கமூலத்தை திரும்பப் பெறுகிறது | +| `tan(x)` | ஒரு கோணத்தின் tangent ஐ திரும்பப் பெறுகிறது | +| `tanh(x)` | `x` இன் hyperbolic tangent ஐ திரும்பப் பெறுகிறது | +| `trunc(x)` | ஒரு எண்ணின் (`x`) முழு எண் பகுதியை திரும்பப் பெறுகிறது | diff --git a/ta/numbers/operators.md b/ta/numbers/operators.md new file mode 100644 index 00000000..e9272bd2 --- /dev/null +++ b/ta/numbers/operators.md @@ -0,0 +1,397 @@ +--- +chapter: 3 +pageNumber: 21 +description: ஆபரேட்டர்கள் மாறிகள், மதிப்புகள் அல்லது வெளிப்பாடுகள் போன்ற தரவில் செயல்பாடுகளை செய்ய பயன்படுத்தப்படும் சின்னங்கள் அல்லது முக்கியசொற்கள். அவை மொழியின் அவசியமான பகுதி மற்றும் டெவலப்பர்களை கணிதம், ஒப்பீடு, தர்க்கம், ஒதுக்கீடு மற்றும் பிற செயல்பாடுகளை செய்ய அனுமதிக்கின்றன. +--- + +# அடிப்படை ஆபரேட்டர்கள் + +JavaScript இல், ஒரு ஆபரேட்டர் என்பது operands (மதிப்புகள் மற்றும் மாறிகள்) இல் செயல்பாடுகளை செய்ய பயனர் பயன்படுத்தும் ஒரு சின்னம் அல்லது முக்கியசொல். எடுத்துக்காட்டாக: + +```javascript +2 + 3; //5 +``` + +இங்கே `+` கூட்டலை செய்யும் ஆபரேட்டர், மற்றும் `2` மற்றும் `3` operands. + +## ஆபரேட்டர்களின் வகைகள் + +JavaScript ஆல் ஆதரிக்கப்படும் பல்வேறு ஆபரேட்டர்கள் உள்ளன. அவை பின்வருமாறு: + +- [கணித ஆபரேட்டர்கள்](#arithmetic-operators) +- [ஒதுக்கீடு ஆபரேட்டர்கள்](#assignment-operators) +- [ஒப்பீடு ஆபரேட்டர்கள்](#Comparison-operators) +- [தர்க்க ஆபரேட்டர்கள்](#logical-operators) +- [Ternary ஆபரேட்டர்கள்](#ternary-operators) +- [Bitwise ஆபரேட்டர்கள்](#bitwise-operators) +- [`typeof` ஆபரேட்டர்கள்](#typeof-operators) + +### கணித ஆபரேட்டர்கள் + +கணித ஆபரேட்டர்கள் மதிப்புகளில் கணித செயல்பாடுகளை செய்ய பயன்படுத்தப்படுகின்றன. அவை உள்ளடக்குகின்றன: + +- [கூட்டல் (`+`) ஆபரேட்டர்](#addition-operator) +- [கழித்தல் (`-`) ஆபரேட்டர்](#subtraction-operator) +- [பெருக்கல் (`*`) ஆபரேட்டர்](#multiplication-operator) +- [வகுத்தல் (`/`) ஆபரேட்டர்](#multiplication-operator) +- [மீதி (`%`) ஆபரேட்டர்](#remainder-operator) + +#### கூட்டல் ஆபரேட்டர் (`+`) + +கூட்டல் ஆபரேட்டர் இரண்டு எண்களை கூட்டுகிறது. எடுத்துக்காட்டாக: + +```javascript +console.log(1 + 2); // 3 +console.log(1 + -2); // -1 +``` + +#### கழித்தல் ஆபரேட்டர் (`-`) + +கழித்தல் ஆபரேட்டர் ஒரு எண்ணிலிருந்து மற்றொரு எண்ணை கழிக்கிறது. எடுத்துக்காட்டாக: + +```javascript +console.log(3 - 2); // 1 +console.log(3 - -2); // 5 +``` + +#### பெருக்கல் ஆபரேட்டர் (`*`) + +பெருக்கல் ஆபரேட்டர் இரண்டு எண்களை பெருக்குகிறது. எடுத்துக்காட்டாக: + +```javascript +console.log(2 * 3); // 6 +console.log(2 * -3); // -6 +``` + +#### வகுத்தல் ஆபரேட்டர் (`/`) + +வகுத்தல் ஆபரேட்டர் ஒரு எண்ணை மற்றொரு எண்ணால் வகுக்கிறது. எடுத்துக்காட்டாக: + +```javascript +console.log(6 / 2); // 3 +console.log(6 / -2); // -3 +``` + +#### மீதி ஆபரேட்டர் (`%`) + +மீதி ஆபரேட்டர் ஒரு வகுத்தல் செயல்பாட்டின் மீதியை திரும்பப் பெறுகிறது. எடுத்துக்காட்டாக: + +```javascript +console.log(10 % 3); // 1 +console.log(11 % 3); // 2 +console.log(12 % 3); // 0 +``` + +JavaScript மொழிபெயர்ப்பாளர் இடமிருந்து வலமாக செயல்படுகிறது. வெளிப்பாடுகளை பிரிக்கவும் குழுவாக்கவும் கணிதத்தில் போல அடைப்புக்குறிகளைப் பயன்படுத்தலாம்: `c = (a / b) + d` + +{% hint style="working" %} +JavaScript கூட்டல் மற்றும் இணைப்பு இரண்டிற்கும் `+` ஆபரேட்டரைப் பயன்படுத்துகிறது. எண்கள் கூட்டப்படுகின்றன, சரங்கள் இணைக்கப்படுகின்றன. +{% endhint %} + +`NaN` என்பது ஒரு எண் சட்டபூர்வமான எண் அல்ல என்பதை சுட்டும் ஒரு ஒதுக்கப்பட்ட வார்த்தை, இது எண் அல்லாத சரத்துடன் கணிதம் செய்யும்போது `NaN` (Not a Number) ஐ விளைவிக்கும். + +```javascript +let x = 100 / "10"; +``` + +`parseInt` முறை ஒரு மதிப்பை சரமாக பார்ஸ் செய்து முதல் முழு எண்ணை திரும்பப் பெறுகிறது. + +```javascript +parseInt("10"); // 10 +parseInt("10.00"); // 10 +parseInt("10.33"); // 10 +parseInt("34 45 66"); // 34 +parseInt(" 60 "); // 60 +parseInt("40 years"); //40 +parseInt("He was 40"); //NaN +``` + +JavaScript இல், மிகப் பெரிய சாத்தியமான எண்ணுக்கு வெளியே ஒரு எண்ணை கணக்கிட்டால் `Infinity` திரும்பப் பெறுகிறது. + +```javascript +let x = 2 / 0; // Infinity +let y = -2 / 0; // -Infinity +``` + +{% exercise %} +`num1` மற்றும் `num2` இல் பின்வரும் செயல்பாடுகளை செய்ய +, -, \*, /, மற்றும் % கணித ஆபரேட்டர்களைப் பயன்படுத்தவும். + +{% initial %} +let num1 = 10; +let num2 = 5; + +// num1 மற்றும் num2 ஐ கூட்டவும். +let addResult = +// num1 இலிருந்து num2 ஐ கழிக்கவும். +let subtractResult = +// num1 மற்றும் num2 ஐ பெருக்கவும். +let multiplyResult = +// num1 ஐ num2 ஆல் வகுக்கவும். +let divideResult = +// num1 num2 ஆல் வகுக்கப்படும்போது மீதியை கண்டுபிடிக்கவும். +let reminderResult = + +{% solution %} +let num1 = 10; +let num2 = 5; + +// num1 மற்றும் num2 ஐ கூட்டவும். +let addResult = (num1 + num2); +// num1 இலிருந்து num2 ஐ கழிக்கவும். +let subtractResult = (num1 - num2); +// num1 மற்றும் num2 ஐ பெருக்கவும். +let multiplyResult = (num1 \* num2); +// num1 ஐ num2 ஆல் வகுக்கவும். +let divideResult = (num1 / num2); +// num1 num2 ஆல் வகுக்கப்படும்போது மீதியை கண்டுபிடிக்கவும். +let reminderResult = (num1 % num2); + +{% validation %} +assert(addResult === 15 && subtractResult === 5 && multiplyResult === 50 && divideResult === 2 && reminderResult === 0 ); + +{% context %} +{% endexercise %} + +### ஒதுக்கீடு ஆபரேட்டர்கள் + +ஒதுக்கீடு ஆபரேட்டர்கள் மாறிகளுக்கு மதிப்புகளை ஒதுக்க அல்லது ஒதுக்கப்பட்ட மதிப்பை மதிப்பீடு செய்ய பயன்படுத்தப்படுகின்றன. _ஒரு மதிப்பை பல மதிப்புகளுக்கு ஒதுக்க ஒதுக்கீடு ஆபரேட்டரை சங்கிலியாக இணைக்கலாம்._ அவை ஒதுக்கீடு (`=`) ஆபரேட்டர் மற்றும் `+=`, `-=`, `*=` மற்றும் `/=` போன்ற கூட்டு ஒதுக்கீடு ஆபரேட்டர்களை உள்ளடக்குகின்றன. + +#### `=` (ஒதுக்கீடு ஆபரேட்டர்) + +இந்த ஆபரேட்டர் வலது பக்கத்தில் உள்ள மதிப்பை இடது பக்கத்தில் உள்ள மாறிக்கு ஒதுக்க பயன்படுத்தப்படுகிறது. +எடுத்துக்காட்டுகள்: + +```javascript +let x = 10; // மாறி x க்கு 10 மதிப்பை ஒதுக்குகிறது. +``` + +#### கூட்டு ஒதுக்கீடு ஆபரேட்டர்கள் + +இந்த ஆபரேட்டர்கள் கணித செயல்பாட்டை ஒதுக்கீடு செயல்பாட்டுடன் இணைக்கின்றன. ஒரு செயல்பாட்டை செய்து பின்னர் முடிவை மாறிக்கு திரும்ப ஒதுக்குவதற்கான குறுக்கு வழிகளாகும். +எடுத்துக்காட்டாக: + +##### `+=` (கூட்டல் ஒதுக்கீடு) + +வலது பக்கத்தில் உள்ள மதிப்பை மாறியுடன் கூட்டி முடிவை மாறிக்கு திரும்ப ஒதுக்குகிறது. + +##### `-=` (கழித்தல் ஒதுக்கீடு) + +மாறியிலிருந்து வலது பக்கத்தில் உள்ள மதிப்பை கழித்து முடிவை மாறிக்கு திரும்ப ஒதுக்குகிறது. + +##### `*=-` (பெருக்கல் ஒதுக்கீடு) + +மாறியை வலது பக்கத்தில் உள்ள மதிப்பால் பெருக்கி முடிவை மாறிக்கு திரும்ப ஒதுக்குகிறது. + +##### `/=` (வகுத்தல் ஒதுக்கீடு) + +மாறியை வலது பக்கத்தில் உள்ள மதிப்பால் வகுத்து முடிவை மாறிக்கு திரும்ப ஒதுக்குகிறது. + +##### `%=` (Modules/மீதி ஒதுக்கீடு) + +மாறியை வலது பக்கத்தில் உள்ள மதிப்பால் வகுக்கும்போது மீதியை கணக்கிட்டு முடிவை மாறிக்கு திரும்ப ஒதுக்குகிறது. + +```javascript +let a = 10; +a += 5; // a = a + 5; க்கு சமம் (a 15 ஆகிறது) +a -= 3; // a = a - 3; க்கு சமம் (a 12 ஆகிறது) +a *= 2; // a = a * 2; க்கு சமம் (a 24 ஆகிறது) +a /= 4; // a = a / 4; க்கு சமம் (a 6 ஆகிறது) +a %= 5; // a = a % 5; க்கு சமம் (a 1 ஆகிறது) +``` + +### ஒப்பீடு ஆபரேட்டர்கள் + +ஒப்பீடு ஆபரேட்டர்கள் இரண்டு மதிப்புகள் அல்லது வெளிப்பாடுகளை ஒப்பிட்டு `boolean` முடிவை திரும்பப் பெற பயன்படுத்தப்படுகின்றன, இது `true` அல்லது `false`. இந்த ஆபரேட்டர்கள் பொதுவாக நிபந்தனை அறிக்கைகளில் முடிவு எடுக்க அல்லது நிபந்தனைகளை மதிப்பீடு செய்ய பயன்படுத்தப்படுகின்றன. + +#### சமம் (`==`) + +இந்த ஆபரேட்டர் இடது மற்றும் வலது பக்கங்களில் உள்ள மதிப்புகள் சமனாக இருக்கின்றனவா என சரிபார்க்கிறது. அவை சமனாக இருந்தால், `true` திரும்பப் பெறுகிறது இல்லையெனில், false திரும்பப் பெறுகிறது. தரவு வகைகளை கவனிக்காது. + +```javascript +5 == 5; // true +"5" == 5; // true (implicit type conversion) +``` + +#### சமமில்லை (`!=`) + +இந்த ஆபரேட்டர் இடது மற்றும் வலது பக்கங்களில் உள்ள மதிப்புகள் சமனாக இல்லையா என சரிபார்க்கிறது. அவை சமனாக இல்லை என்றால், `true` திரும்பப் பெறுகிறது இல்லையெனில், `false` திரும்பப் பெறுகிறது. + +```javascript +5 != 3; // true +"5" != 5; // false (implicit type conversion) +``` + +#### கடுமையான சமம் (`===`) + +இந்த ஆபரேட்டர் இடது மற்றும் வலது பக்கங்களில் உள்ள மதிப்புகள் சமனாக இருக்கின்றனவா மற்றும் ஒரே தரவு வகை கொண்டவையா என சரிபார்க்கிறது. மதிப்பு மற்றும் தரவு வகை இரண்டும் பொருந்தினால், `true` திரும்பப் பெறுகிறது இல்லையெனில், `false` திரும்பப் பெறுகிறது. + +```javascript +5 === 5; // true +"5" === 5; // false (வெவ்வேறு தரவு வகைகள்) +``` + +#### கடுமையான சமமில்லை (`!==`) + +இந்த ஆபரேட்டர் இடது மற்றும் வலது பக்கங்களில் உள்ள மதிப்புகள் சமனாக இல்லையா அல்லது வெவ்வேறு தரவு வகைகள் கொண்டவையா என சரிபார்க்கிறது. அவை சமனாக இல்லை அல்லது வெவ்வேறு தரவு வகைகள் கொண்டவை என்றால், `true` திரும்பப் பெறுகிறது இல்லையெனில், `false` திரும்பப் பெறுகிறது. + +```javascript +5 !== "5"; // true (வெவ்வேறு தரவு வகைகள்) +5 !== 5; // false +``` + +#### பெரியது (`>`) + +இந்த ஆபரேட்டர் இடது பக்கத்தில் உள்ள மதிப்பு வலது பக்கத்தில் உள்ள மதிப்பை விட பெரியதா என சரிபார்க்கிறது. இடது மதிப்பு பெரியதாக இருந்தால், `true` திரும்பப் பெறுகிறது இல்லையெனில், `false` திரும்பப் பெறுகிறது. + +```javascript +8 > 5; // true +3 > 10; // false +``` + +#### சிறியது (`<`) + +இந்த ஆபரேட்டர் இடது பக்கத்தில் உள்ள மதிப்பு வலது பக்கத்தில் உள்ள மதிப்பை விட சிறியதா என சரிபார்க்கிறது. இடது மதிப்பு சிறியதாக இருந்தால், `true` திரும்பப் பெறுகிறது இல்லையெனில், `false` திரும்பப் பெறுகிறது. + +```javascript +3 < 5; // true +8 < 2; // false +``` + +#### பெரியதாக அல்லது சமம் (`>=`) + +இந்த ஆபரேட்டர் இடது பக்கத்தில் உள்ள மதிப்பு வலது பக்கத்தில் உள்ள மதிப்பை விட பெரியதாக அல்லது சமனாக இருக்கிறதா என சரிபார்க்கிறது. இடது மதிப்பு பெரியதாக அல்லது சமனாக இருந்தால், `true` திரும்பப் பெறுகிறது இல்லையெனில், `false` திரும்பப் பெறுகிறது. + +```javascript +8 >= 5; // true +3 >= 8; // false +``` + +#### சிறியதாக அல்லது சமம் (`<=`) + +இந்த ஆபரேட்டர் இடது பக்கத்தில் உள்ள மதிப்பு வலது பக்கத்தில் உள்ள மதிப்பை விட சிறியதாக அல்லது சமனாக இருக்கிறதா என சரிபார்க்கிறது. இடது மதிப்பு சிறியதாக அல்லது சமனாக இருந்தால், `true` திரும்பப் பெறுகிறது இல்லையெனில், `false` திரும்பப் பெறுகிறது. + +```javascript +3 <= 5; // true +8 <= 2; // false +``` + +### தர்க்க ஆபரேட்டர்கள் + +தர்க்க ஆபரேட்டர்கள் Boolean மதிப்புகள் அல்லது வெளிப்பாடுகளில் தர்க்க செயல்பாடுகளை செய்ய பயன்படுத்தப்படுகின்றன. இந்த ஆபரேட்டர்கள் முடிவெடுக்க அல்லது சிக்கலான நிபந்தனைகளை மதிப்பீடு செய்ய Boolean மதிப்புகளை இணைக்க அல்லது கையாள அனுமதிக்கின்றன. + +#### தர்க்க AND (`&&`) + +தர்க்க AND ஆபரேட்டர் இரண்டு operands உம் `true` என்றால் `true` திரும்பப் பெறுகிறது. operands இல் குறைந்தது ஒன்று `false` என்றால், `false` திரும்பப் பெறுகிறது. + +```javascript +true && true; // true +true && false; // false +false && true; // false +false && false; // false +``` + +#### தர்க்க OR (`||`) + +தர்க்க OR ஆபரேட்டர் operands இல் குறைந்தது ஒன்று `true` என்றால் `true` திரும்பப் பெறுகிறது. இரண்டு operands உம் `false` என்றால் மட்டுமே `false` திரும்பப் பெறுகிறது. + +```javascript +true || true; // true +true || false; // true +false || true; // true +false || false; // false +``` + +#### தர்க்க NOT (`!`) + +தர்க்க NOT ஆபரேட்டர் ஒரு operand இன் மதிப்பை மறுக்கிறது. operand `false` என்றால் `true` திரும்பப் பெறுகிறது, operand `true` என்றால் `false` திரும்பப் பெறுகிறது. + +```javascript +!true; // false +!false; // true +``` + +### Ternary ஆபரேட்டர்கள் + +Ternary ஆபரேட்டர் மூன்று operands கொண்டது. இது if/else இன் எளிமைப்படுத்தப்பட்ட ஆபரேட்டர். + +இது `if-else` நிபந்தனையின் குறுகிய வடிவம். + +**தொடரியல்** + +```js +Y = ? A : B +நிபந்தனை உண்மை என்றால் Y = A இல்லையெனில் Y = B +``` + +```javascript +let isEven = 8 % 2 === 0 ? "Even" : "Odd"; +console.log(isEven); // "Even" +``` + +### Bitwise ஆபரேட்டர்கள் + +Bitwise ஆபரேட்டர்கள் இரண்டு எண்களின் தனிப்பட்ட bits ஐ கையாள பயன்படுத்தப்படுகின்றன. அவை bit மட்டத்தில் செயல்பாடுகளை செய்கின்றன, இது குறைந்த-நிலை தரவை கட்டுப்படுத்த அல்லது பகுப்பாய்வு செய்ய வேண்டிய சூழல்களில் மிகவும் பயனுள்ளது. + +#### Bitwise AND (`&`) + +இந்த ஆபரேட்டர் இரண்டு எண்களின் ஒவ்வொரு bit ஐயும் ஒப்பிட்டு இரண்டு எண்களிலும் 1 ஆக உள்ள ஒவ்வொரு bit க்கும் 1 திரும்பப் பெறுகிறது. மற்ற அனைத்து bits உம் 0 ஆக அமைக்கப்படுகின்றன. + +```javascript +1010 & 1100; // 1000 +``` + +#### Bitwise OR (`|`) + +இந்த ஆபரேட்டர் இரண்டு எண்களின் ஒவ்வொரு bit ஐயும் ஒப்பிட்டு குறைந்தது ஒரு எண்ணில் 1 ஆக உள்ள ஒவ்வொரு bit க்கும் 1 திரும்பப் பெறுகிறது. + +```javascript +1010 | 1100; // 1110 +``` + +#### Bitwise XOR (`^`) + +இந்த ஆபரேட்டர் இரண்டு எண்களின் ஒவ்வொரு bit ஐயும் ஒப்பிட்டு ஒரு எண்ணில் 1 ஆக இருந்து இரண்டிலும் அல்ல என்ற ஒவ்வொரு bit க்கும் 1 திரும்பப் பெறுகிறது. + +```javascript +1010 ^ 1100; // 0110 +``` + +#### Bitwise NOT (`-`) + +இந்த ஆபரேட்டர் ஒரு எண்ணின் அனைத்து bits ஐயும் தலைகீழாக்குகிறது (flip செய்கிறது). ஒவ்வொரு 0 ஐயும் 1 ஆக மற்றும் ஒவ்வொரு 1 ஐயும் 0 ஆக மாற்றுகிறது. + +```javascript +~1010; // 0101 +``` + +#### இடது Shift (`<<`) + +இந்த ஆபரேட்டர் ஒரு எண்ணின் bits ஐ குறிப்பிட்ட எண்ணிக்கையிலான நிலைகளால் இடதுபுறம் நகர்த்துகிறது, நகர்த்தப்பட்ட நிலைகளை 0 ஆல் நிரப்புகிறது. + +```javascript +1010 << 2; // 101000 (2 நிலைகளால் இடதுபுறம் நகர்த்தப்பட்டது) +``` + +#### வலது Shift (`>>`) + +இந்த ஆபரேட்டர் ஒரு எண்ணின் bits ஐ குறிப்பிட்ட எண்ணிக்கையிலான நிலைகளால் வலதுபுறம் நகர்த்துகிறது. நகர்த்தப்பட்ட நிலைகள் மிகவும் இடது bit (sign bit) அடிப்படையில் நிரப்பப்படுகின்றன. + +```javascript +1010 >> 2; // 0010 (2 நிலைகளால் வலதுபுறம் நகர்த்தப்பட்டது) +``` + +### `typeof` ஆபரேட்டர்கள் + +இது operand வகையை திரும்பப் பெறுகிறது, JavaScript இல் இருக்கக்கூடிய வகைகள் undefined, Object, boolean, number, string, symbol, மற்றும் function. + +```javascript +let value1 = 42; +let value2 = "Hello, World!"; +let value3 = true; +let value4 = null; + +console.log(typeof value1); // "number" +console.log(typeof value2); // "string" +console.log(typeof value3); // "boolean" +console.log(typeof value4); // "object" (குறிப்பு: `typeof null` வரலாற்று காரணங்களால் "object" திரும்பப் பெறுகிறது) +``` diff --git a/ta/objects/README.md b/ta/objects/README.md new file mode 100644 index 00000000..bac2b524 --- /dev/null +++ b/ta/objects/README.md @@ -0,0 +1,42 @@ +--- +layout: editorial +chapter: 9 +pageNumber: 71 +description: Object (பொருள்) என்பது ஒரு கூட்டு தரவு வகையாகும் (composite data type), இது பல மதிப்புகளை (பண்புகளை) key-value ஜோடிகளாக சேமிக்கவும் ஒழுங்கமைக்கவும் உங்களை அனுமதிக்கிறது. இது மொழியில் ஒரு அடிப்படை தரவு கட்டமைப்பாகும் மற்றும் சிக்கலான தரவைப் பிரதிநிதித்துவப்படுத்தவும் கட்டமைக்கப்பட்ட நிறுவனங்களை உருவாக்கவும் பரவலாகப் பயன்படுத்தப்படுகிறது. +--- + +# அத்தியாயம் 9 +# பொருள்கள் (Objects) + +ஜாவாஸ்கிரிப்டில், பொருள்கள் **மாற்றக்கூடியவை (mutable)**, ஏனெனில் குறிப்பு பொருள் (reference object) சுட்டிக்காட்டும் மதிப்புகளை நாம் மாற்றுகிறோம், மாறாக, ஒரு primitive மதிப்பை நாம் மாற்றும்போது அதன் குறிப்பையே மாற்றுகிறோம், அது இப்போது புதிய மதிப்பைச் சுட்டிக்காட்டுகிறது, எனவே primitive கள் **மாற்ற முடியாதவை (immutable)**. ஜாவாஸ்கிரிப்டின் primitive வகைகள் `true`, `false`, `numbers`, `strings`, `null` மற்றும் `undefined` ஆகும். மற்ற ஒவ்வொரு மதிப்பும் ஒரு `object` ஆகும். பொருள்களில் `propertyName`: `propertyValue` ஜோடிகள் உள்ளன. ஜாவாஸ்கிரிப்டில் ஒரு `object` ஐ உருவாக்க மூன்று வழிகள் உள்ளன: + +1. **literal** + + ```javascript + let object = {}; + // ஆம், வெறுமனே ஒரு ஜோடி சுருள் அடைப்புக்குறிகள்! + ``` + + > _**குறிப்பு:**_ இதுவே **பரிந்துரைக்கப்படும்** வழியாகும். +2. **பொருள் சார்ந்த (object-oriented)** + + ```javascript + let object = new Object(); + ``` + + > _**குறிப்பு:**_ இது கிட்டத்தட்ட Java போன்றது. +3. **`object.create` ஐப் பயன்படுத்துதல்** + + ```javascript + let object = Object.create(proto[, propertiesObject]); + ``` + + > _**குறிப்பு:**_ இது குறிப்பிட்ட prototype பொருள் மற்றும் பண்புகளுடன் ஒரு புதிய பொருளை உருவாக்குகிறது. + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [Delete](./delete.md) +* [Enumeration](./enumeration.md) +* [Mutable](./mutable.md) +* [Properties](./properties.md) +* [Prototype](./prototype.md) +* [Reference](./reference.md) diff --git a/ta/objects/constructor-functions.md b/ta/objects/constructor-functions.md new file mode 100644 index 00000000..e3b1dd0b --- /dev/null +++ b/ta/objects/constructor-functions.md @@ -0,0 +1,95 @@ +--- +chapter: 9 +description: ஜாவாஸ்கிரிப்டில் Constructor செயல்பாடுகளைப் புரிந்துகொள்வது. +--- + +## ஜாவாஸ்கிரிப்டில் Constructor செயல்பாடுகளைப் புரிந்துகொள்வது + +ஜாவாஸ்கிரிப்டில் உள்ள Constructor செயல்பாடுகள் (Constructor functions) பொருள்களை உருவாக்கவும் தொடங்கவும் பயன்படுத்தப்படும் சிறப்பு செயல்பாடுகளாகும். ஒத்த பண்புகள் மற்றும் முறைகளைக் கொண்ட பல பொருள்களை உருவாக்குவதற்கான வரைபடத்தை வரையறுப்பதற்கான வழியை அவை வழங்குகின்றன. + +### ஒரு Constructor செயல்பாட்டை வரையறுத்தல் + +ஒரு constructor செயல்பாடு ஒரு வழக்கமான செயல்பாட்டைப் போலவே வரையறுக்கப்படுகிறது, ஆனால் இது வழக்கமான செயல்பாடுகளிலிருந்து வேறுபடுத்துவதற்கு பொதுவாக ஆரம்ப பெரிய எழுத்துடன் (capital letter) பெயரிடப்படுகிறது. + +### Constructor செயல்பாட்டிற்கான எடுத்துக்காட்டு + +ஒரு constructor செயல்பாட்டின் அடிப்படை எடுத்துக்காட்டு இங்கே: + +```javascript +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +const person1 = new Person("John", "Doe"); +const person2 = new Person("Jane", "Smith"); + +console.log(person1.firstName); // Output: John +console.log(person2.lastName); // Output: Smith +``` + +இந்த எடுத்துக்காட்டில், `Person` constructor செயல்பாடு புதிதாக உருவாக்கப்பட்ட ஒவ்வொரு பொருளுக்கும் `firstName` மற்றும் `lastName` பண்புகளைத் தொடங்குவதற்குப் பயன்படுகிறது. + +### Constructor செயல்பாடுகளில் முறைகளைச் சேர்த்தல் (Adding Methods) + +Constructor இன் prototype இல் முறைகளை வரையறுப்பதன் மூலம் ஒரு constructor செயல்பாட்டால் உருவாக்கப்பட்ட பொருள்களில் நீங்கள் முறைகளைச் சேர்க்கலாம். + +```javascript +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +Person.prototype.getFullName = function() { + return `${this.firstName} ${this.lastName}`; +}; + +const person1 = new Person("John", "Doe"); +console.log(person1.getFullName()); // Output: John Doe +``` + +### `new` முக்கிய சொல்லைப் பயன்படுத்துதல் + +ஒரு constructor செயல்பாட்டிலிருந்து ஒரு பொருளின் instance ஐ உருவாக்க `new` முக்கிய சொல் பயன்படுத்தப்படுகிறது. இது பின்வரும் படிகளைச் செய்கிறது: +1. ஒரு புதிய வெற்று பொருளை உருவாக்குகிறது. +2. `this` முக்கிய சொல்லை புதிய பொருளுக்கு அமைக்கிறது. +3. Constructor செயல்பாட்டை இயக்குகிறது. +4. புதிய பொருளைத் திரும்பப் பெறுகிறது. + +### `new` முக்கிய சொல்லுடன் எடுத்துக்காட்டு + +```javascript +function Car(make, model) { + this.make = make; + this.model = model; +} + +const car1 = new Car("Toyota", "Corolla"); +console.log(car1.make); // Output: Toyota +``` + +### Constructor செயல்பாடுகள் (vs) Classes + +ES6 `class` தொடரியலை அறிமுகப்படுத்தியது, இது constructor செயல்பாடுகள் மற்றும் முறைகளை வரையறுக்க மிகவும் சுருக்கமான மற்றும் படிக்கக்கூடிய வழியை வழங்குகிறது. + +### Classes உடன் எடுத்துக்காட்டு + +```javascript +class Person { + constructor(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; + } + + getFullName() { + return `${this.firstName} ${this.lastName}`; + } +} + +const person1 = new Person("John", "Doe"); +console.log(person1.getFullName()); // Output: John Doe +``` + +### முடிவுரை + +Constructor செயல்பாடுகள் பொருள்களை உருவாக்கவும் தொடங்கவும் ஜாவாஸ்கிரிப்டில் ஒரு அடிப்படை அம்சமாகும். அவை பொருள்களுக்கான வரைபடத்தை வரையறுக்கவும் அவற்றின் prototype இல் முறைகளைச் சேர்க்கவும் உங்களை அனுமதிக்கின்றன. ES6 இன் அறிமுகத்துடன், `class` தொடரியல் அதே செயல்பாட்டை அடைவதற்கு மிகவும் நவீன மற்றும் படிக்கக்கூடிய வழியை வழங்குகிறது. diff --git a/ta/objects/constructor-property.md b/ta/objects/constructor-property.md new file mode 100644 index 00000000..86a0360b --- /dev/null +++ b/ta/objects/constructor-property.md @@ -0,0 +1,67 @@ +--- +chapter: 9 +description: ஜாவாஸ்கிரிப்டில் `constructor` பண்பைப் புரிந்துகொள்வது. +--- + +## ஜாவாஸ்கிரிப்டில் `constructor` பண்பைப் புரிந்துகொள்வது + +ஜாவாஸ்கிரிப்டில் உள்ள `constructor` பண்பு (property) என்பது ஒரு instance இன் prototype ஐ உருவாக்கிய செயல்பாட்டிற்கான ஒரு குறிப்பைக் காட்டுகிறது. பொருளை உருவாக்கப் பயன்படுத்தப்பட்ட செயல்பாட்டைச் சுட்டிக்காட்டும் அனைத்து பொருள்களின் பண்பும் இதுவாகும். + +### `constructor` பண்பு என்றால் என்ன? + +`constructor` பண்பு instance ஐ உருவாக்கிய constructor செயல்பாட்டிற்கான குறிப்பைத் திரும்பப் பெறுகிறது. ஒரு பொருளின் வகையை அடையாளம் காண இது பயனுள்ளதாக இருக்கும். + +### `constructor` பண்பிற்கான எடுத்துக்காட்டு + +`constructor` பண்பை விளக்குவதற்கான அடிப்படை எடுத்துக்காட்டு இங்கே: + +```javascript +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +const person1 = new Person("John", "Doe"); +console.log(person1.constructor); // Output: [Function: Person] +``` + +இந்த எடுத்துக்காட்டில், `person1` இன் `constructor` பண்பு `Person` செயல்பாட்டை சுட்டிக்காட்டுகிறது. + +### புதிய Instances ஐ உருவாக்க `constructor` பண்பைப் பயன்படுத்துதல் + +ஒரே வகையின் புதிய instances ஐ உருவாக்க நீங்கள் `constructor` பண்பைப் பயன்படுத்தலாம்: + +```javascript +const person2 = new person1.constructor("Jane", "Smith"); +console.log(person2.firstName); // Output: Jane +``` + +### உள்ளமைக்கப்பட்ட பொருள்களில் (Built-in Objects) `constructor` பண்பு + +உள்ளமைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் பொருள்களிலும் `constructor` பண்பு கிடைக்கிறது: + +```javascript +const arr = []; +console.log(arr.constructor); // Output: [Function: Array] + +const obj = {}; +console.log(obj.constructor); // Output: [Function: Object] +``` + +### `constructor` பண்பை மாற்றுதல் + +நீங்கள் `constructor` பண்பை மாற்றலாம், ஆனால் இது எதிர்பாராத நடத்தைக்கு வழிவகுக்கும் என்பதால் பொதுவாகப் பரிந்துரைக்கப்படுவதில்லை: + +```javascript +function Animal(name) { + this.name = name; +} + +const dog = new Animal("Rex"); +dog.constructor = Person; +console.log(dog.constructor); // Output: [Function: Person] +``` + +### முடிவுரை + +`constructor` பண்பு ஜாவாஸ்கிரிப்டில் உள்ள ஒரு பயனுள்ள அம்சமாகும், இது ஒரு instance இன் prototype ஐ உருவாக்கிய செயல்பாட்டைக் குறிப்பிட உங்களை அனுமதிக்கிறது. ஒரு பொருளின் வகையை அடையாளம் காணவும், ஒரே வகையின் புதிய instances ஐ உருவாக்கவும் இதைப் பயன்படுத்தலாம். இருப்பினும், `constructor` பண்பை மாற்றுவது எச்சரிக்கையுடன் செய்யப்பட வேண்டும். \ No newline at end of file diff --git a/ta/objects/delete.md b/ta/objects/delete.md new file mode 100644 index 00000000..b8e85896 --- /dev/null +++ b/ta/objects/delete.md @@ -0,0 +1,36 @@ +--- +chapter: 9 +pageNumber: 77 +description: ஒரு பொருளில் இருந்து ஒரு **பண்பை அகற்ற (remove a property)** `delete` ஆபரேட்டரைப் பயன்படுத்தலாம். ஒரு பண்பு நீக்கப்படும்போது, அது பொருளிலிருந்து அகற்றப்படும், மேலும் அதை அணுகவோ கணக்கிடவோ முடியாது (அதாவது, இது for-in சுழற்சியில் காட்டப்படாது). +--- +# Delete Operator + +ஒரு பொருளில் இருந்து ஒரு **பண்பை அகற்ற (remove a property)** `delete` ஆபரேட்டரைப் பயன்படுத்தலாம். ஒரு பண்பு நீக்கப்படும்போது, அது பொருளிலிருந்து அகற்றப்படும், மேலும் அதை அணுகவோ கணக்கிடவோ முடியாது (அதாவது, இது for-in சுழற்சியில் காட்டப்படாது). + +`delete` ஐப் பயன்படுத்துவதற்கான தொடரியல் இங்கே: + +```javascript +delete object.property; +``` + +எடுத்துக்காட்டாக: + +```javascript +let adult = { age: 26 }, + child = Object.create(adult); + +child.age = 8; + +delete child.age; + +/* child இலிருந்து age பண்பை அகற்றி, prototype இன் வயதை வெளிப்படுத்துகிறது, ஏனெனில் அப்போது அது மேலெழுதப்படாது (overridden). */ + +let prototypeAge = child.age; +// 26, ஏனெனில் child க்கு அதன் சொந்த age பண்பு இல்லை. +``` + +{% hint style="working" %} +`delete` ஆபரேட்டர் ஒரு பொருளின் சொந்த பண்புகளில் மட்டுமே செயல்படும், மற்றும் மரபுவழிப் பண்புகளில் (inherited properties) அல்ல. `configurable` பண்புக்கூறு (attribute) `false` என அமைக்கப்பட்ட பண்புகளிலும் இது செயல்படாது. +{% endhint %} + +`delete` ஆபரேட்டர் பொருளின் prototype chain ஐ மாற்றாது. இது குறிப்பிட்ட பண்பை பொருளிலிருந்து நீக்குகிறது, மேலும் இது பொருளை அல்லது அதன் பண்புகளை உண்மையில் அழிக்காது. இது வெறுமனே பண்புகளை அணுக முடியாததாக ஆக்குகிறது. நீங்கள் ஒரு பொருளை அழித்து அதன் நினைவகத்தை வெளியிட (release its memory) வேண்டும் என்றால், நீங்கள் பொருளை `null` என அமைக்கலாம் அல்லது நினைவகத்தை திரும்பப் பெற (reclaim) garbage collector ஐப் பயன்படுத்தலாம். diff --git a/ta/objects/dynamic-nature.md b/ta/objects/dynamic-nature.md new file mode 100644 index 00000000..c2a2d8aa --- /dev/null +++ b/ta/objects/dynamic-nature.md @@ -0,0 +1,114 @@ +--- +chapter: 9 +description: ஜாவாஸ்கிரிப்டில் பொருள்களின் டைனமிக் தன்மையைப் (Dynamic Nature) புரிந்துகொள்வது. +--- + +## ஜாவாஸ்கிரிப்டில் பொருள்களின் டைனமிக் தன்மையைப் (Dynamic Nature) புரிந்துகொள்வது + +ஜாவாஸ்கிரிப்ட் பொருள்கள் டைனமிக் ஆனவை, அதாவது அவற்றின் பண்புகளை (properties) இயங்கும் நேரத்தில் (runtime) சேர்க்கலாம், மாற்றலாம் அல்லது நீக்கலாம். இந்த நெகிழ்வுத்தன்மை சக்திவாய்ந்த மற்றும் தகவமைக்கக்கூடிய குறியீட்டை அனுமதிக்கிறது, ஆனால் எதிர்பாராத நடத்தையைத் தவிர்க்க கவனமாக மேலாண்மை தேவைப்படுகிறது. + +### பண்புகளைச் சேர்த்தல் (Adding Properties) + +Dot notation அல்லது bracket notation ஐப் பயன்படுத்தி எந்த நேரத்திலும் ஒரு பொருளுக்கு பண்புகளைச் சேர்க்கலாம். + +```javascript +const person = { + firstName: "John", + lastName: "Doe" +}; + +// ஒரு புதிய பண்பைச் சேர்த்தல் +person.age = 30; +console.log( person.age ); // Output: 30 + +// bracket notation ஐப் பயன்படுத்தி ஒரு பண்பைச் சேர்த்தல் +person["gender"] = "male"; +console.log( person.gender ); // Output: male +``` + +### பண்புகளை மாற்றுதல் (Modifying Properties) + +ஏற்கனவே உள்ள பண்புகளின் மதிப்புகளை மீண்டும் ஒதுக்குவதன் (reassigning) மூலம் மாற்றலாம். + +```javascript +const car = { + make: "Toyota", + model: "Corolla" +}; + +// ஒரு பண்பை மாற்றுதல் +car.model = "Camry"; +console.log( car.model ); // Output: Camry +``` + +### பண்புகளை நீக்குதல் (Deleting Properties) + +`delete` ஆபரேட்டரைப் பயன்படுத்தி ஒரு பொருளிலிருந்து பண்புகளை அகற்றலாம். + +```javascript +const book = { + title: "1984", + author: "George Orwell", + year: 1949 +}; + +// ஒரு பண்பை நீக்குதல் +delete book.year; +console.log( book.year ); // Output: undefined +``` + +### பண்புகளைச் சரிபார்த்தல் (Checking for Properties) + +`in` ஆபரேட்டர் அல்லது `hasOwnProperty` முறையைப் பயன்படுத்தி ஒரு பொருளுக்கு ஒரு குறிப்பிட்ட பண்பு உள்ளதா என்பதை நீங்கள் சரிபார்க்கலாம். + +```javascript +const user = { + username: "johndoe", + email: "john@example.com" +}; + +// `in` ஆபரேட்டரைப் பயன்படுத்துதல் +console.log( "email" in user ); // Output: true + +// `hasOwnProperty` முறையைப் பயன்படுத்துதல் +console.log( user.hasOwnProperty( "username" ) ); // Output: true +``` + +### பண்புகளை மீள்திருப்புதல் (Iterating Over Properties) + +`for...in` சுழற்சியைப் பயன்படுத்தி ஒரு பொருளின் பண்புகளை நீங்கள் மீள்திருப்பலாம். + +```javascript +const student = { + name: "Alice", + age: 22, + major: "Computer Science" +}; + +for (let key in student) { + if (student.hasOwnProperty( key )) { + console.log( `${key}: ${student[key]}` ); + } +} +// Output: +// name: Alice +// age: 22 +// major: Computer Science +``` + +### டைனமிக் பண்புப் பெயர்கள் (Dynamic Property Names) + +Object literals இல் கணக்கிடப்பட்ட பண்புப் பெயர்களைப் (computed property names) பயன்படுத்துவதன் மூலம் நீங்கள் டைனமிக் பண்புப் பெயர்களைப் பயன்படுத்தலாம். + +```javascript +const propName = "score"; +const game = { + [propName]: 100 +}; + +console.log( game.score ); // Output: 100 +``` + +### முடிவுரை + +ஜாவாஸ்கிரிப்ட் பொருள்களின் டைனமிக் தன்மை தரவு கட்டமைப்புகளை நிர்வகிப்பதில் பெரும் நெகிழ்வுத்தன்மையை வழங்குகிறது. நீங்கள் இயங்கும் நேரத்தில் பண்புகளைச் சேர்க்கலாம், மாற்றலாம் மற்றும் நீக்கலாம், பண்புகளின் இருப்பைச் சரிபார்க்கலாம் மற்றும் அவற்றை மீள்திருப்பலாம். இந்த நெகிழ்வுத்தன்மை சக்திவாய்ந்ததாக இருந்தாலும், குறியீட்டு நிலைத்தன்மையையும் முன்கணிப்புத்தன்மையையும் பராமரிக்க கவனமாகக் கையாள வேண்டும். \ No newline at end of file diff --git a/ta/objects/enumeration.md b/ta/objects/enumeration.md new file mode 100644 index 00000000..40551811 --- /dev/null +++ b/ta/objects/enumeration.md @@ -0,0 +1,48 @@ +--- +chapter: 9 +pageNumber: 78 +description: Enumeration என்பது ஒரு பொருளின் பண்புகளை மீள்திருப்புதல் மற்றும் ஒவ்வொரு பண்புக்கும் ஒரு குறிப்பிட்ட செயலைச் செய்யும் செயல்முறையைக் குறிக்கிறது. ஒரு பொருளின் பண்புகளை கணக்கிடுவதற்கான ஒரு வழி `for-in` சுழற்சியைப் பயன்படுத்துவதாகும். `for-in` சுழற்சி ஒரு பொருளின் எண்ணக்கூடிய பண்புகளை தன்னிச்சையான வரிசையில் மீள்திருப்புகிறது, மேலும் ஒவ்வொரு பண்புக்கும் அது கொடுக்கப்பட்ட குறியீட்டுத் தொகுதியை இயக்குகிறது. +--- +# கணக்கீடு (Enumeration) + +_Enumeration_ என்பது ஒரு பொருளின் பண்புகளை மீள்திருப்புதல் மற்றும் ஒவ்வொரு பண்புக்கும் ஒரு குறிப்பிட்ட செயலைச் செய்யும் செயல்முறையைக் குறிக்கிறது. ஜாவாஸ்கிரிப்டில் ஒரு பொருளின் பண்புகளை கணக்கிடுவதற்கு பல வழிகள் உள்ளன. + +ஒரு பொருளின் பண்புகளை கணக்கிடுவதற்கான ஒரு வழி `for-in` சுழற்சியைப் பயன்படுத்துவதாகும். `for-in` சுழற்சி ஒரு பொருளின் எண்ணக்கூடிய பண்புகளை தன்னிச்சையான வரிசையில் மீள்திருப்புகிறது, மேலும் ஒவ்வொரு பண்புக்கும் அது கொடுக்கப்பட்ட குறியீட்டுத் தொகுதியை இயக்குகிறது. + +`for in` அறிக்கை ஒரு பொருளில் உள்ள அனைத்து பண்பு பெயர்களிலும் சுழல முடியும். கணக்கீட்டில் செயல்பாடுகள் (functions) மற்றும் prototype பண்புகள் (prototype properties) அடங்கும். + +```javascript +let fruit = { + apple: 2, + orange: 5, + pear: 1, + }, + sentence = "I have ", + quantity; +for (kind in fruit) { + quantity = fruit[kind]; + sentence += quantity + " " + kind + (quantity === 1 ? "" : "s") + ", "; +} +// பின்வரும் வரி பின்தங்கிய காற்புள்ளியை (trailing comma) நீக்குகிறது. +sentence = sentence.substr(0, sentence.length - 2) + "."; +// I have 2 apples, 5 oranges, 1 pear. +``` + +ஒரு பொருளின் பண்புகளை கணக்கிடுவதற்கான மற்றொரு வழி `Object.keys()` முறையைப் பயன்படுத்துவதாகும், இது பொருளின் சொந்த எண்ணக்கூடிய பண்புப் பெயர்களின் வரிசையைத் (array) திரும்பப் பெறுகிறது. + +எடுத்துக்காட்டாக: + +```typescript +let object = { + foo: 'bar', + baz: 'qux' +}; + +let properties = Object.keys(object); +properties.forEach(function(property) { + console.log(property + ': ' + object[property]); +}); + +// foo: bar +// baz: qux +``` diff --git a/ta/objects/factory-functions.md b/ta/objects/factory-functions.md new file mode 100644 index 00000000..d625b705 --- /dev/null +++ b/ta/objects/factory-functions.md @@ -0,0 +1,106 @@ +--- +chapter: 9 +description: ஜாவாஸ்கிரிப்டில் பொருள்களுக்கான Factory செயல்பாடுகளைப் புரிந்துகொள்வது. +--- + +## ஜாவாஸ்கிரிப்டில் பொருள்களுக்கான Factory செயல்பாடுகளைப் புரிந்துகொள்வது + +Factory செயல்பாடுகள் (Factory functions) என்பவை பொருள்களை உருவாக்கித் திரும்பப் பெறும் செயல்பாடுகளாகும். `new` முக்கிய சொல் அல்லது constructor செயல்பாடுகளைப் பயன்படுத்தாமல் பல பொருள்களின் instances ஐ உருவாக்குவதற்கான நெகிழ்வான வழியை அவை வழங்குகின்றன. + +### ஒரு Factory செயல்பாட்டை வரையறுத்தல் + +ஒரு factory செயல்பாடு என்பது ஒரு பொருளைத் திரும்பப் பெறும் ஒரு வழக்கமான செயல்பாடாகும். உருவாக்கப்பட்ட பொருளின் பண்புகளைத் தனிப்பயனாக்க இது அளவுருக்களை (parameters) உள்ளடக்கலாம். + +### ஒரு Factory செயல்பாட்டிற்கான எடுத்துக்காட்டு + +ஒரு factory செயல்பாட்டின் அடிப்படை எடுத்துக்காட்டு இங்கே: + +```javascript +function createPerson(firstName, lastName) { + return { + firstName: firstName, + lastName: lastName, + getFullName: function() { + return `${this.firstName} ${this.lastName}`; + } + }; +} + +const person1 = createPerson("John", "Doe"); +const person2 = createPerson("Jane", "Smith"); + +console.log(person1.getFullName()); // Output: John Doe +console.log(person2.getFullName()); // Output: Jane Smith +``` + +இந்த எடுத்துக்காட்டில், `createPerson` செயல்பாடு `firstName`, `lastName` மற்றும் `getFullName` பண்புகளுடன் ஒரு புதிய பொருளைத் திரும்பப் பெறுகிறது. + +### Factory செயல்பாடுகளின் நன்மைகள் + +1. **`new` முக்கிய சொல் இல்லை**: Factory செயல்பாடுகளுக்கு `new` முக்கிய சொல் தேவையில்லை, இதனால் அவை எளிமையானவை மற்றும் பிழைகள் ஏற்படுவதற்கான வாய்ப்புகள் குறைவு. +2. **உறைபொதியாக்கம் (Encapsulation)**: Factory செயல்பாடுகள் தனிப்பட்ட மாறிகள் (private variables) மற்றும் முறைகளை உறைபொதியாக்க முடியும். +3. **நெகிழ்வுத்தன்மை (Flexibility)**: அவை நிபந்தனைகளின் அடிப்படையில் பல்வேறு வகையான பொருள்களைத் திரும்பப் பெறலாம். + +### Factory செயல்பாடுகளுடன் உறைபொதியாக்கம் + +Factory செயல்பாடுகள் செயல்பாடு நோக்கத்திற்குள் மாறிகளை வரையறுப்பதன் மூலமும், அந்த மாறிகளை அணுகும் முறைகளைக் கொண்ட ஒரு பொருளைத் திரும்பப் பெறுவதன் மூலமும் தனிப்பட்ட தரவை உறைபொதியாக்க முடியும். + +```javascript +function createCounter() { + let count = 0; + return { + increment: function() { + count++; + return count; + }, + decrement: function() { + count--; + return count; + }, + getCount: function() { + return count; + } + }; +} + +const counter = createCounter(); +console.log(counter.increment()); // Output: 1 +console.log(counter.getCount()); // Output: 1 +console.log(counter.decrement()); // Output: 0 +``` + +### வெவ்வேறு பொருள்களைத் திரும்பப் பெறுதல் + +Factory செயல்பாடுகள் நிபந்தனைகளின் அடிப்படையில் வெவ்வேறு பொருள்களைத் திரும்பப் பெறலாம், இது பொருள் உருவாக்கத்தில் நெகிழ்வுத்தன்மையை வழங்குகிறது. + +```javascript +function createShape(type) { + if (type === "circle") { + return { + type: "circle", + radius: 10, + getArea: function() { + return Math.PI * this.radius * this.radius; + } + }; + } else if (type === "square") { + return { + type: "square", + side: 10, + getArea: function() { + return this.side * this.side; + } + }; + } +} + +const circle = createShape("circle"); +const square = createShape("square"); + +console.log(circle.getArea()); // Output: 314.1592653589793 +console.log(square.getArea()); // Output: 100 +``` + +### முடிவுரை + +Factory செயல்பாடுகள் ஜாவாஸ்கிரிப்டில் பொருள்களை உருவாக்க சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியாகும். `new` முக்கிய சொல்லைத் தவிர்ப்பது, தனிப்பட்ட தரவை உறைபொதியாக்குவது மற்றும் நிபந்தனைகளின் அடிப்படையில் பல்வேறு வகையான பொருள்களைத் திரும்பப் பெறுவது போன்ற நன்மைகளை அவை வழங்குகின்றன. factory செயல்பாடுகளைப் பயன்படுத்துவதன் மூலம், நீங்கள் மிகவும் மட்டுப்படுத்தப்பட்ட (modular) மற்றும் பராமரிக்கக்கூடிய குறியீட்டை எழுதலாம். diff --git a/ta/objects/mutable.md b/ta/objects/mutable.md new file mode 100644 index 00000000..86389177 --- /dev/null +++ b/ta/objects/mutable.md @@ -0,0 +1,33 @@ +--- +chapter: 9 +pageNumber: 73 +description: Mutable (மாற்றக்கூடியது) என்றால் ஒரு பொருள் அல்லது தரவு வகையை உருவாக்கிய பிறகு மாற்றலாம், அதே சமயம் "immutable" (மாற்ற முடியாதது) என்றால் அதை மாற்ற முடியாது. Mutable பொருள்கள் அவற்றின் உள் நிலையை மாற்ற அனுமதிக்கின்றன, அதே சமயம் immutable பொருள்கள் மாற்றங்களுடன் புதிய instances ஐத் திரும்பப் பெறுகின்றன, அசலை மாற்றாமல் விடுகின்றன. +--- +# Mutable (மாற்றக்கூடியது) + +பொருள்களுக்கும் (objects) primitive மதிப்புகளுக்கும் உள்ள வித்தியாசம் என்னவென்றால், நாம் **பொருள்களை மாற்றலாம்**, அதே சமயம் primitive மதிப்புகள் **மாற்ற முடியாதவை (immutable)**. + +எடுத்துக்காட்டாக: + +```javascript +let myPrimitive = "முதல் மதிப்பு"; +myPrimitive = "மற்றொரு மதிப்பு"; +// myPrimitive இப்போது மற்றொரு சரத்தை சுட்டிக்காட்டுகிறது. +let myObject = { key: "முதல் மதிப்பு" }; +myObject.key = "மற்றொரு மதிப்பு"; +// myObject அதே பொருளை சுட்டிக்காட்டுகிறது. +``` + +Dot notation அல்லது square bracket notation ஐப் பயன்படுத்தி ஒரு பொருளின் பண்புகளை நீங்கள் **சேர்க்கலாம்**, **மாற்றலாம்** அல்லது **நீக்கலாம்**. + +```javascript +let object = {}; +object.foo = 'bar'; // 'foo' பண்பைச் சேர் +object['baz'] = 'qux'; // 'baz' பண்பைச் சேர் +object.foo = 'quux'; // 'foo' பண்பை மாற்று +delete object.baz; // 'baz' பண்பை நீக்கு +``` + +{% hint style="working" %} +Primitive மதிப்புகள் (எண்கள் மற்றும் சரங்கள் போன்றவை) மாற்ற முடியாதவை, அதே சமயம் பொருள்கள் (வரிசைகள் மற்றும் பொருள்கள் போன்றவை) மாற்றக்கூடியவை. +{% endhint %} diff --git a/ta/objects/properties.md b/ta/objects/properties.md new file mode 100644 index 00000000..de426e2e --- /dev/null +++ b/ta/objects/properties.md @@ -0,0 +1,45 @@ +--- +chapter: 9 +pageNumber: 72 +description: Object என்பது ஒரு கூட்டு தரவு வகையாகும், இது key-value ஜோடிகளில் தரவைச் சேமிக்கவும் ஒழுங்கமைக்கவும் உங்களை அனுமதிக்கிறது. ஒரு பொருளில் உள்ள ஒவ்வொரு key-value ஜோடியும் ஒரு property (பண்பு) என்று குறிப்பிடப்படுகிறது. பொருளின் குணாதிசயங்கள், கூறுகள் அல்லது அம்சங்களைக் குறிக்க பண்புகள் பயன்படுத்தப்படுகின்றன. +--- +# Properties + +பொருளின் பண்பு (property) என்பது ஒரு `propertyName`: `propertyValue` ஜோடியாகும், இதில் **property name என்பது ஒரு சரமாக (string) மட்டுமே இருக்க முடியும்**. அது ஒரு சரமாக இல்லாவிட்டால், அது சரமாக மாற்றப்படும். நீங்கள் ஒரு பொருளை **உருவாக்கும்போது** அல்லது **பின்னர்** பண்புகளைக் குறிப்பிடலாம். காற்புள்ளிகளால் (commas) பிரிக்கப்பட்ட பூஜ்ஜியம் அல்லது அதற்கு மேற்பட்ட பண்புகள் இருக்கலாம். + +```javascript +let language = { + name: "JavaScript", + isSupportedByBrowsers: true, + createdIn: 1995, + author: { + firstName: "Brendan", + lastName: "Eich", + }, + // ஆம், பொருள்களை உள்ளமைக்க (nested) முடியும்! + getAuthorFullName: function () { + return this.author.firstName + " " + this.author.lastName; + }, + // ஆம், செயல்பாடுகளும் (functions) மதிப்புகளாக இருக்கலாம்! +}; +``` + +ஒரு பண்பின் மதிப்பை எவ்வாறு **பெறுவது (get)** என்பதைப் பின்வரும் குறியீடு விளக்குகிறது. + +```javascript +let variable = language.name; +// variable இப்போது "JavaScript" சரத்தைக் கொண்டுள்ளது. +variable = language["name"]; +// மேலே உள்ள வரிகள் ஒரே காரியத்தையே செய்கின்றன. வித்தியாசம் என்னவென்றால், இரண்டாவது வரியானது எந்தவொரு சரத்தையும் பண்புப் பெயராகப் பயன்படுத்த உங்களை அனுமதிக்கிறது, ஆனால் இது படிப்பதற்கு எளிதானதாக இல்லை. +variable = language.newProperty; +// variable இப்போது undefined ஆக உள்ளது, ஏனென்றால் இந்த பண்பை நாங்கள் இன்னும் ஒதுக்கவில்லை. +``` + +புதிய பண்பை எவ்வாறு **சேர்ப்பது (add)** அல்லது ஏற்கனவே உள்ள ஒன்றை எவ்வாறு **மாற்றுவது (change)** என்பதைப் பின்வரும் எடுத்துக்காட்டு காட்டுகிறது. + +```javascript +language.newProperty = "new value"; +// இப்போது பொருளுக்கு புதிய பண்பு உள்ளது. பண்பு ஏற்கனவே இருந்தால், அதன் மதிப்பு மாற்றப்படும். +language["newProperty"] = "changed value"; +// மீண்டும் ஒருமுறை, நீங்கள் இரண்டு வழிகளிலும் பண்புகளை அணுகலாம். முதலாவது (dot notation) பரிந்துரைக்கப்படுகிறது. +``` diff --git a/ta/objects/prototype.md b/ta/objects/prototype.md new file mode 100644 index 00000000..93d8ec85 --- /dev/null +++ b/ta/objects/prototype.md @@ -0,0 +1,56 @@ +--- +chapter: 9 +pageNumber: 76 +description: ஒவ்வொரு பொருளுக்கும் prototype என்று அழைக்கப்படும் ஒரு சிறப்பு பண்பு உள்ளது, இது மற்றொரு பொருளுக்கான குறிப்பு ஆகும். ஜாவாஸ்கிரிப்டில் உள்ள prototype-அடிப்படையிலான மரபுரிமை (inheritance) அமைப்பின் ஒரு முக்கிய பகுதி prototype பண்பு ஆகும், மேலும் இது மற்ற பொருள்களிலிருந்து பண்புகள் மற்றும் முறைகளைப் பெற பொருள்களை அனுமதிக்கிறது. +--- +# Prototype + +ஒவ்வொரு பொருளும் ஒரு prototype பொருளுடன் இணைக்கப்பட்டுள்ளது, அதிலிருந்து பண்புகளைப் பெறுகிறது. Object literals (`{}`) இலிருந்து உருவாக்கப்பட்ட பொருள்கள் தானாகவே `Object.prototype` உடன் இணைக்கப்படுகின்றன, இது ஜாவாஸ்கிரிப்டுடன் தரநிலையாக வரும் ஒரு பொருளாகும். + +பின்வரும் குறியீட்டில் உள்ளதைப் போல, நீங்கள் மீட்டெடுக்க விரும்பும் ஒரு பண்பைக் கண்டறிய ஜாவாஸ்கிரிப்ட் மொழிபெயர்ப்பாளர் (உங்கள் உலாவியில் உள்ள ஒரு தொகுதி) முயற்சிக்கும்போது: + +```javascript +let adult = { age: 26 }, + retrievedProperty = adult.age; +// மேலே உள்ள வரி +``` + +முதலில், மொழிபெயர்ப்பாளர் பொருள் கொண்ட ஒவ்வொரு பண்பையும் பார்க்கிறார். எடுத்துக்காட்டாக, `adult` க்கு ஒரே ஒரு சொந்த பண்பு மட்டுமே உள்ளது—`age`. இருப்பினும், இது `Object.prototype` இலிருந்து பெறப்பட்ட பல பண்புகளையும் கொண்டுள்ளது. + +```javascript +let stringRepresentation = adult.toString(); +// மாறியில் '[object Object]' என்ற மதிப்பு உள்ளது +``` + +`toString` என்பது `Object.prototype` இன் பண்பாகும், இது பெறப்பட்டது. இது ஒரு செயல்பாட்டின் மதிப்பைக் கொண்டுள்ளது, இது பொருளின் சரம் பிரதிநிதித்துவத்தைத் திரும்பப் பெறுகிறது. இது மிகவும் அர்த்தமுள்ள பிரதிநிதித்துவத்தைத் திரும்பப் பெற விரும்பினால், நீங்கள் அதை மேலெழுதலாம் (override). adult பொருளுக்கு ஒரு புதிய பண்பைச் சேர்க்கவும். + +```javascript +adult.toString = function () { + return "நான் " + this.age; +}; +``` + +இப்போது நீங்கள் `toString` செயல்பாட்டை அழைத்தால், மொழிபெயர்ப்பாளர் பொருளில் புதிய பண்பைக் கண்டுபிடித்து நிறுத்திவிடுவார். + +எனவே மொழிபெயர்ப்பாளர் பொருளிலிருந்து மேலும் அதன் prototype மூலமாகவும் வழியில் கண்டுபிடிக்கும் முதல் பண்பை மீட்டெடுக்கிறார். + +இயல்புநிலை `Object.prototype` க்குப் பதிலாக உங்கள் சொந்த பொருளை ஒரு prototype ஆக அமைக்க, நீங்கள் பின்வருமாறு `Object.create` ஐ அழைக்கலாம்: + +```javascript +let child = Object.create(adult); + +/* இந்த முறையில் பொருள்களை உருவாக்குவது, நாம் விரும்பும் இயல்புநிலை Object.prototype ஐ எளிதாக மாற்ற அனுமதிக்கிறது. இந்த வழக்கில், child இன் prototype adult பொருளாகும். */ + +child.age = 8; + +/* முன்னதாக, child க்கு அதன் சொந்த age பண்பு இல்லை, மேலும் அதை கண்டுபிடிக்க மொழிபெயர்ப்பாளர் child இன் prototype க்கு மேலும் பார்க்க வேண்டியிருந்தது. + இப்போது, child இன் சொந்த வயதை அமைக்கும்போது, மொழிபெயர்ப்பாளர் மேலும் செல்ல மாட்டார். + குறிப்பு: adult இன் வயது இன்னும் 26 ஆக உள்ளது. */ + +let stringRepresentation = child.toString(); + +// மதிப்பு "நான் 8". +/* குறிப்பு: child இன் toString பண்பை நாங்கள் மேலெழுதவில்லை, இதனால் adult இன் முறை அழைக்கப்படும். adult க்கு toString பண்பு இல்லை என்றால், Object.prototype இன் toString முறை அழைக்கப்படும், மேலும் "நான் 8" என்பதற்குப் பதிலாக "[object Object]" கிடைக்கும் */ +``` + +`child` இன் prototype `adult` ஆகும், அதன் prototype `Object.prototype` ஆகும். prototype களின் இந்த வரிசை **prototype chain** என்று அழைக்கப்படுகிறது. diff --git a/ta/objects/reference.md b/ta/objects/reference.md new file mode 100644 index 00000000..d71e415b --- /dev/null +++ b/ta/objects/reference.md @@ -0,0 +1,65 @@ +--- +chapter: 9 +pageNumber: 74 +description: ஒரு பொருளுக்கான குறிப்பு (Reference) என்பது பொருள் சேமிக்கப்பட்டுள்ள நினைவக இருப்பிடத்தை சுட்டிக்காட்டும் மதிப்பாகும். ஒரு பொருள் உருவாக்கப்படும்போது, அதன் பண்புகள் மற்றும் மதிப்புகளைச் சேமிக்க ஒரு நினைவக இடம் ஒதுக்கப்படுகிறது. இந்த பொருளை ஒரு மாறிக்கு (variable) ஒதுக்கும்போது, அந்த மாறி பொருள் சேமிக்கப்பட்டுள்ள நினைவக இருப்பிடத்திற்கான குறிப்பைக் கொண்டுள்ளது. +--- +# Reference + +பொருள்கள் **எப்பொழுதும் நகலெடுக்கப்படுவதில்லை (never copied)**. அவை குறிப்பு (reference) மூலமாக அனுப்பப்படுகின்றன. ஒரு பொருளின் குறிப்பு என்பது ஒரு பொருளைக் குறிக்கும் மதிப்பாகும். `new` ஆபரேட்டர் அல்லது object literal தொடரியலைப் பயன்படுத்தி ஒரு பொருளை உருவாக்கும்போது, ஜாவாஸ்கிரிப்ட் ஒரு பொருளை உருவாக்கி அதற்கு ஒரு குறிப்பை ஒதுக்குகிறது. + +Object literal தொடரியலைப் பயன்படுத்தி ஒரு பொருளை உருவாக்குவதற்கான எடுத்துக்காட்டு இங்கே: + +```javascript +var object = { + foo: 'bar' +}; +``` + +`new` ஆபரேட்டரைப் பயன்படுத்தி ஒரு பொருளை உருவாக்குவதற்கான எடுத்துக்காட்டு இங்கே: + +```javascript +var object = new Object(); +object.foo = 'bar'; +``` + +ஒரு பொருளின் குறிப்பை ஒரு மாறிக்கு ஒதுக்கும்போது, மாறியானது பொருளையே அல்லாமல் பொருளுக்கான குறிப்பையே வைத்திருக்கும். அதாவது, பொருளின் குறிப்பை வேறொரு மாறிக்கு ஒதுக்கினால், இரண்டு மாறிகளும் ஒரே பொருளை சுட்டிக்காட்டும். + +எடுத்துக்காட்டாக: + +```javascript +var object1 = { + foo: 'bar' +}; + +var object2 = object1; + +console.log(object1 === object2); // Output: true +``` + +மேலே உள்ள எடுத்துக்காட்டில், `object1` மற்றும் `object2` இரண்டும் ஒரே பொருளுக்கான குறிப்புகளைக் கொண்ட மாறிகளாகும். `===` ஆபரேட்டர் குறிப்புகளை ஒப்பிடப் பயன்படுகிறது, பொருள்களை அல்ல, மேலும் இரண்டு மாறிகளும் ஒரே பொருளுக்கான குறிப்புகளைக் கொண்டிருப்பதால் இது `true` எனத் திரும்பப் பெறுகிறது. + +{% hint style="info" %} +ஏற்கனவே உள்ள பொருளின் நகலாக ஒரு புதிய பொருளை உருவாக்க `Object.assign()` முறையைப் பயன்படுத்தலாம். +{% endhint %} + +குறிப்பு மூலம் ஒரு பொருளை உருவாக்குவதற்கான எடுத்துக்காட்டு பின்வருமாறு. + +```javascript +// என்னிடம் ஒரு பீஸ்ஸா இருப்பதாக கற்பனை செய்து பாருங்கள் +let myPizza = { slices: 5 }; +// அதை நான் உங்களுடன் பகிர்ந்துகொண்டேன் +let yourPizza = myPizza; +// நான் மற்றொரு துண்டைச் சாப்பிடுகிறேன் +myPizza.slices = myPizza.slices - 1; +let numberOfSlicesLeft = yourPizza.slices; +// myPizza மற்றும் yourPizza ஒரே பீஸ்ஸா பொருளைக் குறிப்பதால் +// இப்போது எங்களிடம் 4 துண்டுகள் உள்ளன. +let a = {}, + b = {}, + c = {}; +// a, b, மற்றும் c ஒவ்வொன்றும் +// வெவ்வேறு வெற்று பொருளைக் குறிக்கின்றன +a = b = c = {}; +// a, b, மற்றும் c அனைத்தும் +// ஒரே வெற்று பொருளைக் குறிக்கின்றன +``` diff --git a/ta/promise-async-await/README.md b/ta/promise-async-await/README.md new file mode 100644 index 00000000..42c47ddf --- /dev/null +++ b/ta/promise-async-await/README.md @@ -0,0 +1,14 @@ +--- +layout: editorial +chapter: 18 +pageNumber: 108 +description: Promises இப்போது பெரும்பாலான நவீன API களால் பயன்படுத்தப்படுகின்றன. எனவே அவை எவ்வாறு செயல்படுகின்றன என்பதைப் புரிந்துகொள்வதும், உங்கள் குறியீட்டை மேம்படுத்த அவற்றை எவ்வாறு பயன்படுத்துவது என்பதை அறிவதும் முக்கியம். +--- + +# அத்தியாயம் 18 +# Promise, async/await + +Promises இப்போது பெரும்பாலான நவீன API களால் பயன்படுத்தப்படுகின்றன. எனவே அவை எவ்வாறு செயல்படுகின்றன என்பதைப் புரிந்துகொள்வதும் குறியீட்டை மேம்படுத்த அவற்றை எவ்வாறு பயன்படுத்துவது என்பதை அறிவதும் முக்கியம். இந்த அத்தியாயத்தில், promises என்றால் என்ன மற்றும் ஒத்திசைவற்ற (asynchronous) செயல்பாடுகளில் அவற்றை எவ்வாறு பயன்படுத்துவது என்பதை விரிவாக வரையறுப்போம். + +* [Promise](./promise.md) +* [Async/Await](./async-await.md) \ No newline at end of file diff --git a/ta/promise-async-await/async-await.md b/ta/promise-async-await/async-await.md new file mode 100644 index 00000000..732c3883 --- /dev/null +++ b/ta/promise-async-await/async-await.md @@ -0,0 +1,47 @@ +--- +chapter: 18 +pageNumber: 111 +description: Async/Await என்பது ECMAScript 2017 இல் (ES8) அறிமுகப்படுத்தப்பட்ட ஒரு அம்சமாகும், இது ஒத்திசைவற்ற (asynchronous) ஜாவாஸ்கிரிப்ட் குறியீட்டுடன் பணிபுரிய மிகவும் சுருக்கமான மற்றும் படிக்கக்கூடிய தொடரியலை (syntax) வழங்குகிறது. இது ஜாவாஸ்கிரிப்ட் Promises இன் மேல் கட்டமைக்கப்பட்டுள்ளது மற்றும் ஒத்திசைவான (synchronous) முறையில் ஒத்திசைவற்ற செயல்பாடுகளைக் கையாளப் பயன்படுகிறது. +--- + +# Async/Await + +promises உடன், ஒரு promise ஐத் திரும்பப் பெறும் ஒரு ஒத்திசைவற்ற செயல்பாட்டை அறிவிக்க `async` முக்கிய சொல்லை (keyword) ஒருவர் பயன்படுத்தலாம், அதேசமயம் `await` தொடரியல் ஜாவாஸ்கிரிப்டை அந்த promise தீர்க்கப்பட்டு (settles) அதன் மதிப்பைக் கொடுக்கும் வரை காத்திருக்கச் செய்கிறது. இந்த முக்கிய சொற்கள் promises ஐ எழுத எளிதாக்குகின்றன. async இன் எடுத்துக்காட்டு கீழே காட்டப்பட்டுள்ளது. + +```javascript +//async செயல்பாடு f +async function f() { + return 1; +} +// promise தீர்க்கப்படுகிறது (resolved) +f().then(alert); // 1 +``` + +மேலே உள்ள உதாரணத்தை பின்வருமாறு எழுதலாம்: + +```javascript +function f() { + return Promise.resolve(1); +} + +f().then(alert); // 1 +``` + +`async` செயல்பாடு ஒரு promise ஐத் திரும்பப் பெறுவதை உறுதிசெய்கிறது, மேலும் promises அல்லாதவற்றை (non-promises) அதனுள் சுற்றிக் கட்டுகிறது (wraps). `await` உடன், promise அதன் மதிப்பைக் கொடுக்கும் வரை நாம் ஜாவாஸ்கிரிப்டைக் காத்திருக்கச் செய்யலாம். + +```javascript +async function f() { + let promise = new Promise((resolve, reject) => { + setTimeout(() => resolve("Learn JavaScript க்கு வரவேற்கிறோம்!"), 1000) + }); + + let result = await promise; // promise தீர்க்கப்படும் வரை காத்திருக்கவும் (*) + alert(result); // "Learn JavaScript க்கு வரவேற்கிறோம்!" +} + +f(); +``` + +{% hint style="working" %} +`await` முக்கிய சொல்லை ஒரு `async` செயல்பாட்டிற்குள் மட்டுமே பயன்படுத்த முடியும். +{% endhint %} diff --git a/ta/promise-async-await/promise.md b/ta/promise-async-await/promise.md new file mode 100644 index 00000000..911760da --- /dev/null +++ b/ta/promise-async-await/promise.md @@ -0,0 +1,92 @@ +--- +chapter: 18 +pageNumber: 109 +description: Promise என்பது ஒரு ஒத்திசைவற்ற (asynchronous) செயல்பாட்டின் இறுதி முடிவை (அல்லது தோல்வியை) மற்றும் அதன் விளைவான மதிப்பைக் குறிக்கும் ஒரு பொருளாகும் (object). பிணைய கோரிக்கைகளை (network requests) மேற்கொள்வது, கோப்புகளைப் படிப்பது அல்லது தரவுத்தளங்களுடன் (databases) தொடர்புகொள்வது போன்ற ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள Promises மிகவும் கட்டமைக்கப்பட்ட மற்றும் ஒழுங்கமைக்கப்பட்ட வழியை வழங்குகின்றன. +--- + +# Promise, async/await + +நீங்கள் ஒரு பிரபலமான புத்தக எழுத்தாளர் என்று கற்பனை செய்து பாருங்கள், ஒரு குறிப்பிட்ட நாளில் ஒரு புதிய புத்தகத்தை வெளியிட திட்டமிட்டுள்ளீர்கள். இந்தப் புத்தகத்தில் ஆர்வம் கொண்ட வாசகர்கள் இந்தப் புத்தகத்தை தங்கள் விருப்பப்பட்டியலில் (wishlist) சேர்த்துக்கொள்கிறார்கள் மற்றும் வெளியிடப்படும் போது அல்லது வெளியீட்டு நாள் ஒத்திவைக்கப்பட்டாலும் கூட அவர்களுக்கு அறிவிக்கப்படும். வெளியீட்டு நாளில், அனைவருக்கும் அறிவிக்கப்படும் மற்றும் புத்தகத்தை வாங்கலாம், இது அனைத்து தரப்பினரையும் மகிழ்விக்கிறது. இது நிரலாக்கத்தில் நடக்கும் நிஜ வாழ்க்கை ஒப்புமையாகும் (analogy). + +1. ஒரு "_தயாரிக்கும் குறியீடு (producing code)_" என்பது நேரம் எடுக்கும் மற்றும் ஏதோ ஒன்றை சாதிக்கும் ஒன்று. இங்கே இது ஒரு புத்தக எழுத்தாளர். +2. ஒரு "_பயன்படுத்தும் குறியீடு (consuming code)_" என்பது தயாரிக்கும் குறியீடு தயாரானதும் அதைப் பயன்படுத்தும் ஒன்று. இந்த வழக்கில், இது ஒரு "வாசகர் (reader)". +3. "_தயாரிக்கும் குறியீடு_" மற்றும் "_பயன்படுத்தும் குறியீடு_" ஆகியவற்றிற்கு இடையேயான தொடர்பை ஒரு _promise_ என்று அழைக்கலாம், ஏனெனில் இது "_தயாரிக்கும் குறியீட்டிலிருந்து_" முடிவுகளை "_பயன்படுத்தும் குறியீட்டிற்கு_" பெறுவதை உறுதி செய்கிறது. + +# Promise + +நாம் செய்த ஒப்புமை ஜாவாஸ்கிரிப்ட் `promise` பொருளுக்கும் பொருந்தும். `promise` பொருளுக்கான கன்ஸ்ட்ரக்டர் (constructor) தொடரியல்: + +```javascript +let promise = new Promise(function(resolve, reject) { + // executor (தயாரிக்கும் குறியீடு, "எழுத்தாளர்") +}); +``` + +இங்கே, ஒரு செயல்பாடு `new Promise` க்கு அனுப்பப்படுகிறது, இது _executor_ என்றும் அழைக்கப்படுகிறது, மேலும் இது உருவாக்கப்பட்டவுடன் தானாகவே இயங்குகிறது. இது முடிவைக் கொடுக்கும் தயாரிக்கும் குறியீட்டைக் கொண்டுள்ளது. `resolve` மற்றும் `reject` ஆகியவை ஜாவாஸ்கிரிப்ட் தானாகவே வழங்கும் வாதங்கள் (arguments) மற்றும் முடிவுகள் வந்ததும் இவற்றில் ஒன்று அழைக்கப்படும். + +* `resolve(value):` முடிவு வந்தவுடன் `value` ஐத் திரும்பப் பெறும் ஒரு பின்கூப்பிடல் செயல்பாடு (callback function) +* `reject(error)`: பிழை (error) ஏற்பட்டால் `error` ஐத் திரும்பப் பெறும் ஒரு பின்கூப்பிடல் செயல்பாடு, இது ஒரு பிழைப் பொருளைத் (error object) திரும்பப் பெறுகிறது + +![resolve மற்றும் reject பின்கூப்பிடல்களுடன் Promise](../../.gitbook/assets/async_await.png) + +`new Promise` கன்ஸ்ட்ரக்டரால் திரும்பப் பெறப்பட்ட `promise` பொருளின் உள் பண்புகள் (internal properties) பின்வருமாறு: + +* `state` - ஆரம்பத்தில் `pending (நிலுவையில் உள்ளது)`, பின்னர் `resolve` செய்யும் போது `fulfill (நிறைவேற்றப்பட்டது)` அல்லது `reject` அழைக்கப்படும் போது `rejected (நிராகரிக்கப்பட்டது)` என்று மாறும் +* `result` - ஆரம்பத்தில் `undefined`, பின்னர் `resolve` செய்யும் போது `value` ஆக அல்லது `reject` அழைக்கப்படும் போது `error` ஆக மாறும் + +{% hint style="working" %} +ஒருவரால் promise பண்புகளை அணுக முடியாது: `state` மற்றும் `result`. promises ஐக் கையாள Promise முறைகள் தேவை. +{% endhint %} + +ஒரு promise இன் எடுத்துக்காட்டு. + +```javascript +let promiseOne = new Promise(function(resolve, reject) { + // promise கட்டமைக்கப்படும் போது செயல்பாடு தானாகவே செயல்படுத்தப்படும் + + // 1-வினாடிக்குப் பிறகு "done" என்ற முடிவோடு வேலை முடிந்துவிட்டது என்பதற்கான சமிக்ஞை + setTimeout(() => resolve("done"), 1000); +}) + +let promiseTwo = new Promise(function(resolve, reject) { + // promise கட்டமைக்கப்படும் போது செயல்பாடு தானாகவே செயல்படுத்தப்படும் + + // 1-வினாடிக்குப் பிறகு "error" என்ற முடிவோடு வேலை முடிந்துவிட்டது என்பதற்கான சமிக்ஞை + setTimeout(() => reject(new Error("Whoops!")), 1000); +}) +``` + +இங்கே, `promiseOne` என்பது "_நிறைவேற்றப்பட்ட promise க்கான (fulfilled promise)_" ஒரு எடுத்துக்காட்டாகும், ஏனெனில் அது மதிப்புகளை வெற்றிகரமாகத் தீர்க்கிறது, அதேசமயம் `promiseTwo` நிராகரிக்கப்படுவதால் அது ஒரு "_நிராகரிக்கப்பட்ட promise (rejected promise)_" ஆகும். ஆரம்பத்தில் _நிலுவையில் (pending)_ உள்ள promise க்கு மாறாக, நிராகரிக்கப்படாத அல்லது தீர்க்கப்படாத ஒரு promise _செட்டில் (settled)_ promise என்று அழைக்கப்படுகிறது. promise இலிருந்து பயன்படுத்தும் செயல்பாட்டை (Consuming function) `.then` மற்றும் `.catch` முறைகளைப் பயன்படுத்தி பதிவு செய்யலாம். முந்தைய முறைகள் நிறைவடைந்த பிறகு தூய்மைப்படுத்தல் (cleanup) அல்லது இறுதி செய்வதற்கு (finalizing) நாம் `.finally` முறையையும் சேர்க்கலாம். + +```javascript +let promiseOne = new Promise(function(resolve, reject) { + setTimeout(() => resolve("done!"), 1000); +}); + +// resolve ஆனது .then இல் உள்ள முதல் செயல்பாட்டை இயக்குகிறது +promiseOne.then( + result => alert(result), // 1 விநாடிக்கு பிறகு "done!" ஐக் காட்டுகிறது + error => alert(error) // இயங்காது +); + +let promiseTwo = new Promise(function(resolve, reject) { + setTimeout(() => reject(new Error("Whoops!")), 1000); +}); + +// reject ஆனது .then இல் உள்ள இரண்டாவது செயல்பாட்டை இயக்குகிறது +promiseTwo.then( + result => alert(result), // இயங்காது + error => alert(error) // 1 விநாடிக்கு பிறகு "Error: Whoops!" ஐக் காட்டுகிறது +); + +let promiseThree = new Promise((resolve, reject) => { + setTimeout(() => reject(new Error("Whoops!")), 1000); +}); + +// .catch(f) என்பது promise.then(null, f) ஐப் போன்றதே +promiseThree.catch(alert); // 1 விநாடிக்கு பிறகு "Error: Whoops!" ஐக் காட்டுகிறது +``` + +{% hint style="working" %} +`Promise.then()` முறையில், இரண்டு பின்கூப்பிடல் (callback) வாதங்களும் விருப்பமானவை (optional). +{% endhint %} diff --git a/ta/regular-expression.md b/ta/regular-expression.md new file mode 100644 index 00000000..304dddc1 --- /dev/null +++ b/ta/regular-expression.md @@ -0,0 +1,268 @@ +--- +layout: editorial +chapter: 14 +pageNumber: 89 +description: ஒரு Regular expression, பெரும்பாலும் "regex" என்று சுருக்கப்படுகிறது, இது சரங்களுக்குள் (strings) வடிவ பொருத்தம் (pattern matching) மற்றும் தேடலுக்கான ஒரு சக்திவாய்ந்த கருவியாகும். இது குறிப்பிட்ட வடிவங்களின் (patterns) அடிப்படையில் உரையைத் தேட, பொருத்த, மற்றும் கையாள ஒரு சுருக்கமான மற்றும் நெகிழ்வான வழியை வழங்குகிறது. +--- + +# அத்தியாயம் 14 +# Regular Expression + +ஒரு regular expression என்பது `RegEx` கன்ஸ்ட்ரக்டர் மூலம் உருவாக்கப்படக்கூடிய ஒரு பொருளாகும் (object), அல்லது முன்னோக்கி சாய்வு `(/)` எழுத்துக்களில் ஒரு வடிவத்தை அடைப்பதன் மூலம் ஒரு நேரடி மதிப்பாக (literal value) எழுதப்படும். ஒரு regular expression ஐ உருவாக்குவதற்கான தொடரியல் கீழே காட்டப்பட்டுள்ளது. + +```javascript +// regular expression கன்ஸ்ட்ரக்டரைப் பயன்படுத்துதல் +new RegExp(pattern[, flags]); + +// literals ஐப் பயன்படுத்துதல் +/pattern/flags +``` + +literals ஐப் பயன்படுத்தி ஒரு regular expression ஐ உருவாக்கும் போது கொடிகள் (flags) விருப்பமானவை. மேலே குறிப்பிட்டுள்ள முறையைப் பயன்படுத்தி ஒரே மாதிரியான regular expression ஐ உருவாக்குவதற்கான எடுத்துக்காட்டு பின்வருமாறு. + +```javascript +let re1 = new RegExp("xyz"); +let re2 = /xyz/; +``` + +இரண்டு வழிகளிலும் ஒரு regex பொருள் உருவாக்கப்படும் மற்றும் ஒரே முறைகள் மற்றும் பண்புகளைக் கொண்டிருக்கும். ஒரு regular expression ஐ உருவாக்க நமக்கு டைனமிக் மதிப்புகள் தேவைப்படக்கூடிய சந்தர்ப்பங்கள் உள்ளன, அந்தச் சந்தர்ப்பத்தில், literals வேலை செய்யாது மற்றும் கன்ஸ்ட்ரக்டருடன் செல்ல வேண்டும். + +{% hint style="info" %} +முன்னோக்கி சாய்வு (forward slash) ஒரு regular expression இன் பகுதியாக இருக்க வேண்டும் என்று நாம் விரும்பும் சந்தர்ப்பங்களில், முன்னோக்கி சாய்வை `(/)` பின்தங்கிய சாய்வுடன் `(\)` தப்பிக்க (escape) வேண்டும். +{% endhint %} + +கேஸ் சென்சிடிவ் இல்லாத (case-insensitive) தேடல்களைச் செய்யப் பயன்படுத்தப்படும் வெவ்வேறு மாற்றிகள் (modifiers): + +* `g` - உலகளாவிய தேடல் (global search) (முதல் பொருத்தத்திற்குப் பிறகு நிறுத்தாமல் அனைத்து பொருத்தங்களையும் கண்டறிகிறது) + +எடுத்துக்காட்டு : + +```javascript +const str = "Hello world, hello again!"; +const regex = /hello/gi; +const matches = str.match(regex); +// நீங்கள் .match() பற்றி நினைத்தால் இதைப் படியுங்கள் 👇 +// இது ஜாவாஸ்கிரிப்டில் உள்ளமைக்கப்பட்ட ஒரு முறையாகும், இது ஒரு வெளிப்பாட்டிற்கு (expression) எதிரான பொருத்தத்திற்காக ஒரு சரத்தைத் தேடப் பயன்படுகிறது. +// பொருத்தம் கண்டறியப்பட்டால், கண்டறியப்பட்ட அனைத்துப் பொருத்தங்களின் வரிசையையும் (array) இது திரும்பப் பெறுகிறது. இல்லையெனில், .match() முறை null ஐத் திரும்பப் பெறுகிறது. + +console.log(matches); // ["Hello", "hello"] +``` + +* `i` - கேஸ் சென்சிடிவ் இல்லாத (case insensitive) தேடல் + +எடுத்துக்காட்டு : + +```javascript +const str = "HeLlO WoRlD"; +const regex = /hello/i; +const match = regex.test(str); +// .test() முறை ஒரு பூலியன் மதிப்பைத் திரும்பப் பெறுகிறது: +// பொருத்தம் கண்டறியப்பட்டால் true, மற்றும் பொருத்தம் கண்டறியப்படவில்லை என்றால் false. + +console.log(match); // true +``` + +* `m` - பல வரிப் பொருத்தம் (multiline matching) + +எடுத்துக்காட்டு : + +```javascript +const str = "This is a\nmultiline string."; +const regex = /./mg; +const matches = str.match(regex); +// m கொடியானது புதிய வரி எழுத்துக்களை (\n) பொருத்தப் பயன்படுகிறது. +// அதாவது புதிய வரி எழுத்து உட்பட, சரத்தில் உள்ள 26 எழுத்துக்களுடனும் regex பொருந்தும். + +console.log(matches.length); // 26 +``` + +_அடைப்புக்குறிகள் (Brackets)_ எழுத்துக்களின் வரம்பைக் (range) கண்டறிய ஒரு regular expression இல் பயன்படுத்தப்படுகின்றன. அவற்றில் சில கீழே குறிப்பிடப்பட்டுள்ளன. + +* `[abc]` - அடைப்புக்குறிக்குள் இருக்கும் ஏதேனும் ஒரு எழுத்தைக் கண்டறியும் + +எடுத்துக்காட்டு : + +```javascript +const str = "The cat and the dog are both animals."; +const regex = /[abc]/g; +const matches = str.match(regex); + +console.log(matches); // a, b மற்றும் c இன் அனைத்து நிகழ்வுகளின் வரிசை (Array) + +[ + 'c', 'a', 'a', + 'a', 'b', 'a', + 'a' +] +``` + +* `[^abc]` - அடைப்புக்குறிக்குள் இல்லாத எந்தவொரு எழுத்தையும் கண்டறியும் + +எடுத்துக்காட்டு : + +```javascript +const str = "The cat and dog."; +const regex = /[^abc]/g; // 'a', 'b', அல்லது 'c' அல்லாத எந்தவொரு எழுத்துடனும் பொருந்தும் +const matches = str.match(regex); + +console.log(matches); // 'a', 'b', அல்லது 'c' அல்லாத எழுத்துக்களின் அனைத்து நிகழ்வுகளின் வரிசை + +[ + 'T', 'h', 'e', ' ', + 't', ' ', 'n', 'd', + ' ', 'd', 'o', 'g', + '.' +] + +``` + +* `[0-9]` - அடைப்புக்குறிக்குள் உள்ள ஏதேனும் ஒரு இலக்கத்தைக் (digit) கண்டறியும் + +எடுத்துக்காட்டு : + +```javascript +const str = "The price of the item is $25, but it may change to $30."; +const regex = /[0-9]/g; // 0 முதல் 9 வரையிலான எந்த இலக்கத்துடனும் பொருந்தும் +const matches = str.match(regex); + +console.log(matches); // இலக்கங்களின் அனைத்து நிகழ்வுகளின் வரிசை + +[ + '2', '5', '3', '0' +] + +``` + +* `[^0-9]` - அடைப்புக்குறிக்குள் இல்லாத எந்தவொரு எழுத்தையும் கண்டறியும் (இலக்கம் அல்லாதவை) + +எடுத்துக்காட்டு : + +```javascript +const str = "The price is $25."; +const regex = /[^0-9]/g; // இலக்கமில்லாத எந்த எழுத்துடனும் பொருந்தும் +const matches = str.match(regex); + +console.log(matches); // இலக்கமற்றவற்றின் அனைத்து நிகழ்வுகளின் வரிசை + +[ + 'T', 'h', 'e', ' ', + 'p', 'r', 'i', 'c', + 'e', ' ', 'i', 's', + ' ', '$', '.' +] + +``` + +* `(x|y)`- | ஆல் பிரிக்கப்பட்ட மாற்றுகளில் ஏதேனும் ஒன்றைக் கண்டறியும் + +எடுத்துக்காட்டு : + +```javascript +const str = "The words 'xylophone' and 'yellow' contain the letters 'x' and 'y'."; +const regex = /(x|y)/g; // 'x' அல்லது 'y' உடன் பொருந்தும் +const matches = str.match(regex); + +console.log(matches); // 'x' அல்லது 'y' இன் அனைத்து நிகழ்வுகளின் வரிசை + +[ + 'x', 'y', 'y', 'x', 'x', 'y' +] + +``` + +_Metacharacters_ என்பவை சிறப்பு எழுத்துக்கள், இவை regular expression இல் சிறப்புப் பொருளைக் கொண்டுள்ளன. இந்த எழுத்துக்கள் கீழே மேலும் விவரிக்கப்பட்டுள்ளன: + +| Metacharacter | விளக்கம் (Description) | +| ------------- | ---------------------------------------------------------------- | +| `.` | புதிய வரி (newline) அல்லது டெர்மினேட்டரைத் தவிர ஒரு எழுத்துடன் (single character) பொருந்தும் | +| `\w` | ஒரு சொல் எழுத்துடன் பொருந்தும் (எண்-எழுத்து `[a-zA-Z0–9_]`) | +| `\W` | சொல் அல்லாத எழுத்துடன் பொருந்தும் (`[^a-zA-Z0–9_]` ஐப் போன்றது) | +| `\d` | எந்த இலக்க எழுத்துடனும் பொருந்தும் ( `[0-9]` ஐப் போன்றது) | +| `\D` | இலக்கமில்லாத எந்த எழுத்துடனும் பொருந்தும் | +| `\s` | இடைவெளி எழுத்துடன் பொருந்தும் (spaces, tabs போன்றவை) | +| `\S` | இடைவெளி இல்லாத எழுத்துடன் பொருந்தும் | +| `\b` | ஒரு சொல்லின் தொடக்கத்தில் / முடிவில் பொருந்தும் | +| `\B` | பொருந்தும், ஆனால் ஒரு சொல்லின் தொடக்கத்தில் / முடிவில் அல்ல | +| `\0` | ஒரு `NULL` எழுத்துடன் பொருந்தும் | +| `\n` | புதிய வரி (new line) எழுத்துடன் பொருந்தும் | +| `\f` | form feed எழுத்துடன் பொருந்தும் | +| `\r` | carriage return எழுத்துடன் பொருந்தும் | +| `\t` | tab எழுத்துடன் பொருந்தும் | +| `\v` | tab செங்குத்து (vertical) எழுத்துடன் பொருந்தும் | +| `\xxx` | ஆக்டல் (octal) எண் `xxx` ஆல் குறிப்பிடப்பட்ட எழுத்துடன் பொருந்தும் | +| `\xdd` | ஹெக்ஸாடெசிமல் (hexadecimal) எண் `dd` ஆல் குறிப்பிடப்பட்ட எழுத்துடன் பொருந்தும் | +| `\udddd` | ஹெக்ஸாடெசிமல் எண் `dddd` ஆல் குறிப்பிடப்பட்ட யூனிகோட் (Unicode) எழுத்துடன் பொருந்தும் | + +RegEx ஆல் ஆதரிக்கப்படும் பண்புகள் மற்றும் முறைகள் கீழே பட்டியலிடப்பட்டுள்ளன. + +| பெயர் (Name) | விளக்கம் (Description) | +| ------------- | ---------------------------------------------------------------------------------- | +| `constructor` | RegExp பொருளின் முன்மாதிரியை (prototype) உருவாக்கிய செயல்பாட்டைத் திரும்பப் பெறுகிறது | +| `exec()` | பொருத்தத்திற்காகச் சோதித்து முதல் பொருத்தத்தைத் திரும்பப் பெறுகிறது, பொருத்தம் இல்லை என்றால் `null` ஐத் திரும்பப் பெறுகிறது | +| `global` | `g` மாற்றி (modifier) அமைக்கப்பட்டிருக்கிறதா என்று சோதிக்கிறது | +| `ignoreCase` | `i` மாற்றி அமைக்கப்பட்டிருக்கிறதா என்று சோதிக்கிறது | +| `lastIndex` | அடுத்த பொருத்தத்தைத் தொடங்க வேண்டிய குறியீட்டைக் (index) குறிப்பிடுகிறது | +| `multiline` | `m` மாற்றி அமைக்கப்பட்டிருக்கிறதா என்று சோதிக்கிறது | +| `source` | சரத்தின் (string) உரையைத் திரும்பப் பெறுகிறது | +| `test()` | பொருத்தத்திற்காகச் சோதித்து `true` அல்லது `false` ஐத் திரும்பப் பெறுகிறது | +| `toString()` | regular expression இன் சரம் மதிப்பைக் (string value) கொடுக்கிறது | + +{% hint style="working" %} +`complie()` முறையானது regular expression ஐத் தொகுக்கிறது (complies) மற்றும் இது நிராகரிக்கப்பட்டது (deprecated). +{% endhint %} + +### Regular expression இன் பொதுவான உதாரணம் + +```javascript +let text = "The best things in life are free"; +let result = /e/.exec(text); // சரத்தில் e இன் பொருத்தத்தைத் தேடுகிறது +// result: e + +console.log(result); // Result: ["e", 2, "The best things in life ar..."] +let helloWorldText = "Hello world!"; +// "Hello" ஐத் தேடவும் +let pattern1 = /Hello/g; +let result1 = pattern1.test(helloWorldText); +// result1: true + +let pattern1String = pattern1.toString(); +// pattern1String : '/Hello/g' +``` + +### பின்கோடு (Pincode) சரிபார்த்தலில் Regex இன் நிஜ வாழ்க்கை உதாரணம் + +```javascript +const handleSubmit = (e) => { + // இயல்புநிலை படிவ சமர்ப்பிப்பு நடத்தையைத் தடுக்கவும் + e.preventDefault(); + + // செல்லுபடியாகும் பின்கோடுகளின் பட்டியலை வரையறுக்கவும் + const validPincodes = [ + 110001, 110002, 110003, 110004, 110005, 110006, 110007, 110008, 110009, + 110010, 110011, 110012, 110013, 110014, 110015, 110016, 110017, 110018, + 110019, 110020, 110021, 110022, 110023, 110050, 110051, 110056, 110048, + 110057, 110058, 110059, 110060, 110061, 110062, 110063, 110064 + ]; + + // செல்லுபடியாகும் பின்கோடுகளை சரங்களாக மாற்றவும் + const validPincodeStrings = validPincodes.map((pincode) => String(pincode)); + + // செல்லுபடியாகும் பின்கோடுகளுடன் பொருந்துவதற்கு ஒரு regular expression வடிவத்தை (pattern) உருவாக்கவும் + const regexPattern = new RegExp(`^(${validPincodeStrings.join("|")})$`); + + // உள்ளீட்டு புலத்தில் (input field) சமர்ப்பிக்கப்பட்ட பின்கோடைப் பெறவும் + const submittedPincode = pincode; // 'pincode' வேறு எங்காவது வரையறுக்கப்பட்டுள்ளது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் + + // சமர்ப்பிக்கப்பட்ட பின்கோடு செல்லுபடியாகும் பின்கோடு வடிவத்துடன் பொருந்துகிறதா எனச் சரிபார்க்கவும் + if (regexPattern.test(submittedPincode)) { + // வெற்றிச் செய்தியைக் காண்பி + // ... + } else if (submittedPincode === "") { + // வெற்று உள்ளீட்டிற்கான பிழைச் செய்தியைக் காண்பி + // ... + } else if (submittedPincode.length < 6) { + // தவறான பின்கோடு நீளத்திற்கான பிழைச் செய்தியைக் காண்பி + // ... + } +} +``` diff --git a/ta/resources.md b/ta/resources.md new file mode 100644 index 00000000..c5d94c21 --- /dev/null +++ b/ta/resources.md @@ -0,0 +1,74 @@ +--- +pageNumber: V +chapter: +--- +# கற்றல் வளங்கள் (Learning Resources) + +## ஜாவாஸ்கிரிப்டைக் கற்றுக்கொள்வதற்கான கட்டுரைகள் + + +1. Document Object Model குறிப்பு [Link](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + +2. நிகழ்வுகளின் (Events) அறிமுகம் [Link](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events) + +3. Hostinger இன் ஜாவாஸ்கிரிப்ட் அறிமுகம் [Link](https://www.hostinger.com/tutorials/what-is-javascript) + +4. Microverse இன் ஜாவாஸ்கிரிப்ட் அறிமுகம் [Link](https://www.microverse.org/blog/introduction-to-javascript-a-guide-for-beginners) + +5. Mozilla Developer இன் ஜாவாஸ்கிரிப்ட் அடிப்படைகள் [Link](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) + +6. Geeks for Geeks இன் ஜாவாஸ்கிரிப்ட் பயிற்சி (Tutorial) [Link](https://www.geeksforgeeks.org/javascript/) + +7. Stackify இன் ஜாவாஸ்கிரிப்ட் பயிற்சி [Link]( https://stackify.com/learn-javascript-tutorials/) + +8. ஜாவாஸ்கிரிப்ட் HTML DOM குறிப்பு [Link](https://www.w3schools.com/js/js_htmldom.asp) + +9. DOM என்றால் என்ன? (CSS-Tricks) [Link](https://css-tricks.com/dom/) + +## ஜாவாஸ்கிரிப்டைக் கற்றுக்கொள்வதற்கான புத்தகங்கள் + +1. A Smarter Way to Learn JavaScript – Mark Myers [Link](https://www.amazon.in/Smarter-Way-Learn-JavaScript-technology-ebook/dp/B00H1W9I6C) + +2. Eloquent JavaScript – Marijn Haverbeke [Link](https://www.amazon.in/Eloquent-JavaScript-3rd-Introduction-Programming-ebook/dp/B07C96Q217) + +3. Head First JavaScript [Link](https://www.amazon.com/Head-First-JavaScript-Programming-Brain-Friendly/dp/144934013X?tag=javamysqlanta-20) + +4. JavaScript: The Good Parts – Douglas Crockford [Link](https://www.amazon.in/Javascript-Good-Parts-D-Crockford/dp/0596517742) + +5. Professional JavaScript for Web Developers [Link](https://www.amazon.com/dp/1118026691) + +6. Secrets of the JavaScript Ninja [Link](https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X?tag=javamysqlanta-20) + +7. The Principles of Object-Oriented JavaScript [Link](https://www.amazon.com/Principles-Object-Oriented-JavaScript-Nicholas-Zakas/dp/1593275404?tag=javamysqlanta-20) + +8. You Don’t Know JS – Kyle Simpson [Link](https://www.amazon.in/You-Dont-Know-Set-Volumes/dp/9352136268) + +## ஜாவாஸ்கிரிப்டைக் கற்கப் பின்பற்ற வேண்டிய யூடியூப் வளங்கள் + +1. Academind - [Link]( https://www.youtube.com/c/Academind) +2. Akshay Saini - [Link](https://www.youtube.com/@akshaymarch7) +3. Clever Programmer - [Link](https://www.youtube.com/@CleverProgrammer) +4. CodeWithHarry - [Link](https://www.youtube.com/c/CodeWithHarry) +5. Dave Gray - [Link](https://www.youtube.com/@DaveGrayTeachesCode) +6. freeCodeCamp - [Link](https://www.youtube.com/c/Freecodecamp) +7. JavaScript Mastery - [Link](https://www.youtube.com/@javascriptmastery) +8. SuperSimpleDev - [Link](https://www.youtube.com/@SuperSimpleDev) +9. The Net Ninja - [Link](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) +10. thenewboston - [Link](https://www.youtube.com/@thenewboston) +11. Traversy Media - [Link](https://www.youtube.com/user/TechGuyWeb) + +## பயிற்சி செய்வதற்கான திட்டங்கள் (Projects to Practice) + +- [Digital Clock](./beginner-projects/digital-clock.md) +- [Drum Kits](./beginner-projects/electronic-drum-kit.md) +- [Expense Tracker](./beginner-projects/expense-tracker.md) +- [Image Search](./beginner-projects/image-search.md) +- [Monthly Calendar](./beginner-projects/monthly-calendar.md) +- [Random Photos Generator](./beginner-projects/random-photos-generator.md) +- [Rock Paper Scissors Game](./beginner-projects/rock-paper-scissors-game.md) +- [Simon Says](./beginner-projects/simon-says.md) +- [Stopwatch](./beginner-projects/simple-stopwatch.md) +- [Tip Calculator](./beginner-projects/tip-calculator.md) +- [Video Trailer Popup](./beginner-projects/video-trailer-popup.md) +- [Weather App](./beginner-projects/weather-app.md) +- [Whack a Mole](./beginner-projects/whack-a-mole.md) diff --git a/ta/server-side/README.md b/ta/server-side/README.md new file mode 100644 index 00000000..4495969b --- /dev/null +++ b/ta/server-side/README.md @@ -0,0 +1,52 @@ +--- +layout: editorial +chapter: 20 +pageNumber: 141 +--- + +# அத்தியாயம் 20 + +# சேவையகப் பக்கக் குறியீடு (Server Side Code) + +**சேவையகப் பக்கக் குறியீடு (Server-side code)** என்பது பயனரின் இணைய உலாவியில் (web browser) இயங்குவதை விட *வலைச் சேவையகத்தில் (web server)* இயங்கும் குறியீட்டைக் குறிக்கிறது. இது கிளையன்ட்களிடமிருந்து (பொதுவாக இணைய உலாவிகள்) கோரிக்கைகளைச் (requests) செயலாக்குவதற்கும் மாறும் (dynamic) இணையப் பக்கங்களை உருவாக்குவதற்கும் அல்லது கிளையன்ட்டிற்கு தரவை வழங்குவதற்கும் பொறுப்பாகும். + +**கிளையன்ட் பக்கக் குறியீடு (Client-side code)** என்பது வலைச் சேவையகத்தில் இயங்குவதை விட பயனரின் *இணைய உலாவியில் (web browser)* இயங்கும் குறியீட்டைக் குறிக்கிறது. பயனர் இடைமுகத்தை (user interface) உருவாக்குவதற்கும் பயனர் தொடர்புகளைக் கையாளுவதற்கும் இது பொறுப்பாகும். கிளையன்ட் பக்கக் குறியீடு பொதுவாக ஜாவாஸ்கிரிப்டில் எழுதப்பட்டு உலாவி மூலம் செயல்படுத்தப்படுகிறது. + +## நமக்கு ஏன் சேவையகப் பக்கக் குறியீடு தேவை? + +வலை வளர்ச்சியில் (web development) சேவையகப் பக்கக் குறியீடு பல காரணங்களுக்காக அவசியம்: + +- **பாதுகாப்பு (Security)**: சேவையகப் பக்கக் குறியீடு பயனருக்குத் தெரியாது, எனவே இது கிளையன்ட் பக்கக் குறியீட்டை விடப் பாதுகாப்பானது. +- **செயல்திறன் (Performance)**: பயனரின் அனுபவத்தைப் பாதிக்காமல், தரவு செயலாக்கம் (data processing) போன்ற கணக்கீட்டுரீதியாக அதிக செலவுபிடிக்கும் பணிகளைச் செய்யச் சேவையகப் பக்கக் குறியீட்டைப் பயன்படுத்தலாம். +- **தரவு சேமிப்பு (Data Storage)**: தரவுத்தளத்தில் (database) தரவைச் சேமிக்கச் சேவையகப் பக்கக் குறியீட்டைப் பயன்படுத்தலாம், பின்னர் அதை கிளையன்ட் பக்கக் குறியீடு மூலம் அணுகலாம். +- **பயனர் அங்கீகாரம் (User Authentication)**: பயனர்களை அங்கீகரிக்கவும் வலைத்தளத்தின் சில பகுதிகளுக்கான அணுகலைக் கட்டுப்படுத்தவும் சேவையகப் பக்கக் குறியீட்டைப் பயன்படுத்தலாம். +- **மாறும் உள்ளடக்கம் (Dynamic Content)**: ஒவ்வொரு பயனருக்கும் தனிப்பயனாக்கக்கூடிய (customized) மாறும் இணையப் பக்கங்களை உருவாக்கச் சேவையகப் பக்கக் குறியீட்டைப் பயன்படுத்தலாம். + +## சேவையகப் பக்கம் vs கிளையன்ட் பக்கம் (Server-side vs. Client-side) + +வேறுபாடுகள் கீழே உள்ள அட்டவணையில் சுருக்கப்பட்டுள்ளன: + +| சேவையகப் பக்கக் குறியீடு | கிளையன்ட் பக்கக் குறியீடு | +| ----------- | ----------- | +| வலைச் சேவையகத்தில் இயங்குகிறது | இணைய உலாவியில் இயங்குகிறது | +| சேவையக வளங்களுக்கான (கோப்பு முறைமை, தரவுத்தளங்கள் போன்றவை) அணுகலைக் கொண்டுள்ளது. | கிளையன்ட் வளங்களுக்கான (குக்கீகள், உள்ளூர் சேமிப்பு போன்றவை) அணுகலைக் கொண்டுள்ளது. | +| பல மொழிகளில் எழுதலாம் (PHP, Python, Ruby, Java, C#, போன்றவை). | ஜாவாஸ்கிரிப்டில் மட்டுமே எழுத முடியும். | +| சேவையகத்தில் HTML ஐ உருவாக்கச் சேவையகப் பக்க ரெண்டரிங் (SSR) பயன்படுத்தப்படலாம். | உலாவியில் HTML ஐ உருவாக்க கிளையன்ட் பக்க ரெண்டரிங் (CSR) பயன்படுத்துகிறது. | +| தேடுபொறிகளுக்கு உள்ளடக்கம் எளிதாகக் கிடைப்பதால் SEO-வுக்குச் சிறந்தது. | தேடுபொறிகளுக்கு உள்ளடக்கம் எளிதாகக் கிடைக்காததால் SEO-வுக்கு மோசமானது. | +| செயல்திறனுக்காக கேச்சிங் (caching) மற்றும் உள்ளடக்க விநியோக நெட்வொர்க்குகளை (CDNs) பயன்படுத்த முடியும். | கேச்சிங் மீது குறைந்த கட்டுப்பாடு, உலாவி கேச்சையே நம்பியுள்ளது. | + +## சேவையகப் பக்கக் குறியீட்டிற்கு ஜாவாஸ்கிரிப்டை ஏன் பயன்படுத்த வேண்டும்? + +ஜாவாஸ்கிரிப்டில் மட்டுமே எழுதக்கூடிய கிளையன்ட் பக்கக் குறியீட்டைப் போலன்றி, சேவையகப் பக்கக் குறியீட்டை PHP, பைதான் (Python), ரூபி (Ruby), ஜாவா (Java), சி# (C#) மற்றும் பல மொழிகளில் எழுதலாம். எனவே சேவையகப் பக்கக் குறியீட்டிற்கு ஜாவாஸ்கிரிப்டை ஏன் பயன்படுத்த வேண்டும்? பல காரணங்கள் உள்ளன: + +- **ஒருங்கிணைந்த மொழி (Unified Language)**: டெவலப்பர்கள் முழு பயன்பாட்டு அடுக்கிலும் (application stack) ஒரே மொழி மற்றும் நிரலாக்க முன்னுதாரணங்களைப் (programming paradigms) பயன்படுத்தலாம், இது குறியீடு மறுபயன்பாட்டிற்கும் (code reusability) மற்றும் முன்-முனை (front-end) மற்றும் பின்-முனை (back-end) டெவலப்பர்களிடையே எளிதான ஒத்துழைப்பிற்கும் வழிவகுக்கும். + +- **பெரிய சுற்றுச்சூழல் அமைப்பு (Large Ecosystem)**: npm (Node Package Manager) மூலம் கிடைக்கும் நூலகங்கள் (libraries) மற்றும் தொகுப்புகளின் (packages) பரந்த சுற்றுச்சூழல் அமைப்பை (ecosystem) ஜாவாஸ்கிரிப்ட் கொண்டுள்ளது. இந்தச் செழுமையான சுற்றுச்சூழல் அமைப்பு சேவையக ரூட்டிங் முதல் தரவுத்தள இணைப்பு வரை பல்வேறு செயல்பாடுகளுக்கு முன் கட்டமைக்கப்பட்ட தொகுதிகளை (pre-built modules) வழங்குவதன் மூலம் மேம்பாட்டுச் செயல்முறையை எளிதாக்குகிறது. + +- **JSON**: ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட் நோட்டேஷன் (JavaScript Object Notation - JSON) என்பது சேவையகம் மற்றும் வலைப் பயன்பாட்டிற்கு இடையே தரவை அனுப்பப் பயன்படும் பிரபலமான தரவு வடிவமாகும். JSON ஜாவாஸ்கிரிப்டை அடிப்படையாகக் கொண்டது, எனவே ஜாவாஸ்கிரிப்டில் JSON தரவுடன் வேலை செய்வது எளிது. + +அடுத்து, Node.js உடன் சேவையகப் பக்கக் குறியீட்டிற்கு ஜாவாஸ்கிரிப்டை எவ்வாறு பயன்படுத்துவது மற்றும் சேவையகத்தில் HTML ஐ உருவாக்கச் சேவையகப் பக்க ரெண்டரிங்கை (SSR) எவ்வாறு பயன்படுத்துவது என்பதைக் கற்றுக்கொள்வோம். + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [Node.js](./nodejs.md) +* [சேவையகப் பக்க ரெண்டரிங் (Server Side Rendering - SSR)](./server-side-rendering.md) \ No newline at end of file diff --git a/ta/server-side/nodejs.md b/ta/server-side/nodejs.md new file mode 100644 index 00000000..c77f714d --- /dev/null +++ b/ta/server-side/nodejs.md @@ -0,0 +1,108 @@ +--- +chapter: 20 +pageNumber: 143 +--- + +# Node.js + +**Node.js** என்பது ஒரு ஜாவாஸ்கிரிப்ட் ரன்டைம் சூழலாகும் (runtime environment), இது இணைய உலாவிக்கு (web browser) வெளியே ஜாவாஸ்கிரிப்ட் குறியீட்டை இயக்க டெவலப்பர்களை அனுமதிக்கிறது. இது V8 ஜாவாஸ்கிரிப்ட் இன்ஜினின் மேல் கட்டமைக்கப்பட்டுள்ளது, இது கூகுள் குரோம் (Google Chrome) பயன்படுத்தும் அதே இன்ஜின் ஆகும். Node.js ஓப்பன் சோர்ஸ் (open-source) மற்றும் குறுக்குத் தளமாகும் (cross-platform), அதாவது விண்டோஸ் (Windows), மேக் ஓஎஸ் (macOS) மற்றும் லினக்ஸ் (Linux) ஆகியவற்றில் இயங்க முடியும். + +## Node.js ஒரு நிரலாக்க மொழி அல்ல + +Node.js ஒரு நிரலாக்க மொழி என்று பலர் தவறாக நம்புகிறார்கள். இது உண்மையல்ல. Node.js என்பது ஒரு ஜாவாஸ்கிரிப்ட் ரன்டைம் சூழலாகும், அதாவது ஜாவாஸ்கிரிப்ட் குறியீடு இயங்குவதற்கான சூழலை இது வழங்குகிறது. இதுவே ஒரு நிரலாக்க மொழி அல்ல. + +Node.js மட்டும் ஒரே ஜாவாஸ்கிரிப்ட் ரன்டைம் சூழல் **அல்ல**. டெனோ (Deno), நாஷார்ன் (Nashorn), மற்றும் மிக சமீபத்தில் பன் (Bun) உட்படப் பல உள்ளன. ஆனால் Node.js ஆனது மிகவும் பிரபலமான மற்றும் பரவலாகப் பயன்படுத்தப்படும் ஜாவாஸ்கிரிப்ட் ரன்டைம் சூழலாகும். + +## Node.js உடன் தொடங்குதல் + +Node.js உடன் தொடங்க, அதை உங்கள் கணினியில் நிறுவ வேண்டும். [nodejs.org](https://nodejs.org/en/) இல் உள்ள அதிகாரப்பூர்வ இணையதளத்தில் இருந்து Node.js இன் சமீபத்திய பதிப்பைப் பதிவிறக்கலாம். நீங்கள் Node.js ஐ பதிவிறக்கம் செய்து நிறுவியதும், உங்கள் டெர்மினலில் (terminal) பின்வரும் கட்டளையை இயக்குவதன் மூலம் நிறுவலைச் சரிபார்க்கலாம்: + +```bash +node --version +``` + +இது Node.js இன் பதிப்பு எண்ணை இப்படி அச்சிட வேண்டும்: + +```bash +v20.7.0 +``` +## Node.js REPL + +REPL என்பது Read Evaluate Print Loop என்பதைக் குறிக்கும் கட்டளை வரி இடைமுகமாகும் (command line interface), இது முனையத்திலிருந்து (terminal) குறியீட்டை இயக்க உதவுகிறது. தொடங்க, உங்கள் டெர்மினலில் பின்வரும் கட்டளையைத் தட்டச்சு செய்யவும்: + +```bash +node +``` +நீங்கள் இந்த ப்ராம்ப்ட்டை (prompt) உள்ளிட்டதும், நீங்கள் இதுபோன்று குறியீட்டை இயக்கலாம்: + +```js +> console.log("Hello World") +``` +CTRL + d எனத் தட்டச்சு செய்வதன் மூலம் நீங்கள் REPL ஐ விட்டு வெளியேறலாம் + +## உங்களின் முதல் Node.js நிரலை எழுதுதல் + +இப்போது நீங்கள் Node.js ஐ நிறுவியுள்ளீர்கள், நமது முதல் Node.js நிரலை எழுதுவோம். `hello.js` எனப்படும் புதிய கோப்பை உருவாக்கி பின்வரும் குறியீட்டைச் சேர்க்கவும்: + +```js +console.log('Hello World!'); +``` + +இந்த நிரலை இயக்க, உங்கள் டெர்மினலைத் திறந்து `hello.js` கோப்பைச் சேமித்த கோப்பகத்திற்கு (directory) செல்லவும். பின்னர் பின்வரும் கட்டளையை இயக்கவும்: + +```bash +node hello.js +``` + +இது பின்வரும் வெளியீட்டை அச்சிட வேண்டும்: + +```bash +Hello World! +``` + +## எக்ஸ்பிரஸ் (Express) மற்றும் Node.js ஐப் பயன்படுத்தி எளிமையான வலைச் சேவையகத்தை (web server) எழுதுதல் + +எக்ஸ்பிரஸ் (Express) என்பது Node.js க்கான பிரபலமான வலை கட்டமைப்பாகும் (web framework). இது வலை பயன்பாடுகளை உருவாக்குவதற்கான எளிய மற்றும் நேர்த்தியான API ஐ வழங்குகிறது. "Hello World!" செய்தியுடன் HTTP கோரிக்கைகளுக்குப் பதிலளிக்கும் ஒரு எளிய வலைச் சேவையகத்தை உருவாக்க எக்ஸ்பிரஸைப் பயன்படுத்துவோம். + +முதலில், நாம் `npm init` கட்டளையை இயக்குவதன் மூலம் npm ஐ துவக்க வேண்டும். + +```bash +npm init +``` + +பின்னர், எக்ஸ்பிரஸை (express) நிறுவவும் + +```bash +npm install express +``` + +இது எக்ஸ்பிரஸ் மற்றும் அதன் அனைத்து சார்புகளையும் (dependencies) நிறுவும். நிறுவல் முடிந்ததும், `server.js` எனப்படும் புதிய கோப்பை உருவாக்கி பின்வரும் குறியீட்டைச் சேர்க்கவும்: + +```js +const express = require('express'); +const app = express(); + +app.get('/', (req, res) => { + res.send('Hello World!'); +}); + +app.listen(3000, () => { + console.log('Server is listening on port 3000'); +}); +``` + +இந்தக் குறியீடு புதிய எக்ஸ்பிரஸ் பயன்பாட்டை உருவாக்குகிறது மற்றும் ரூட் பாதைக்கான (root path) (`/`) வழியை வரையறுக்கிறது. இந்த வழிக்கு கோரிக்கை விடுக்கப்படும் போது, சேவையகம் "Hello World!" செய்தியுடன் பதிலளிக்கும். + +இந்த நிரலை இயக்க, உங்கள் டெர்மினலைத் திறந்து `server.js` கோப்பைச் சேமித்த கோப்பகத்திற்கு செல்லவும். பின்னர் பின்வரும் கட்டளையை இயக்கவும்: + +```bash +node server.js +``` + +இது பின்வரும் வெளியீட்டை அச்சிட வேண்டும்: + +```bash +Server is listening on port 3000 +``` + +இப்போது உங்கள் இணைய உலாவியைத் திறந்து [http://localhost:3000](http://localhost:3000) க்குச் செல்லவும். "Hello World!" என்ற செய்தியைப் பார்ப்பீர்கள். diff --git a/ta/server-side/server-side-rendering.md b/ta/server-side/server-side-rendering.md new file mode 100644 index 00000000..16a01f00 --- /dev/null +++ b/ta/server-side/server-side-rendering.md @@ -0,0 +1,34 @@ +--- +chapter: 20 +pageNumber: 145 +--- + +# சேவையகப் பக்க ரெண்டரிங் (Server Side Rendering - SSR) + +பொதுவாக, பயனர் ஒரு வலைத்தளத்தைப் பார்வையிடும்போது, உலாவி சேவையகத்திற்கு ஒரு கோரிக்கையை அனுப்புகிறது, இது HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட்டுடன் பதிலளிக்கிறது. ஆனால் *React* மற்றும் *Vue* போன்ற நூலகங்கள் (libraries) மூலம், சேவையகம் ஜாவாஸ்கிரிப்ட் கோப்புடன் வெற்று HTML பக்கத்தை மட்டுமே அனுப்புகிறது. ஜாவாஸ்கிரிப்ட் கோப்பு பின்னர் உலாவியில் பக்கத்தை ரெண்டர் செய்கிறது. இது **கிளையன்ட் பக்க ரெண்டரிங் (Client Side Rendering - CSR)** என்று அழைக்கப்படுகிறது. + +**சேவையகப் பக்க ரெண்டரிங் (Server Side Rendering - SSR)** என்பது சேவையகம் கோரிக்கையைச் செயலாக்கி, ரியாக்ட் (React) அல்லது வ்யூ (Vue) கூறுகளிலிருந்து சேவையகத்தில் HTML ஐ உருவாக்கும் ஒரு நுட்பமாகும். சேவையகம் உருவாக்கப்பட்ட HTML ஐ உலாவிக்கு அனுப்புகிறது, அது ஜாவாஸ்கிரிப்ட் ஏற்றப்படும் வரை காத்திருக்காமல் பக்கத்தை ரெண்டர் செய்ய முடியும். + +## SSR ஐ ஏன் பயன்படுத்த வேண்டும்? + +CSR ஐ விட SSR ஐப் பயன்படுத்துவதில் பல நன்மைகள் உள்ளன: + +- **SEO-க்குச் சிறந்தது (Better for SEO)**: உங்கள் வலைத்தளத்தின் உள்ளடக்கம் சேவையகத்தில் ரெண்டர் செய்யப்பட்டால் தேடுபொறிகள் (Search engines) அதை எளிதாகக் க்ரால் (crawl) செய்து அட்டவணைப்படுத்தலாம் (index). இது சிறந்த தேடுபொறி தரவரிசைக்கும் தேடுபொறிகளிலிருந்து அதிக ட்ராஃபிக்கிற்கும் (traffic) வழிவகுக்கும். + +- **வேகமான ஆரம்பப் பக்க ஏற்றம் (Faster initial page load)**: HTML சேவையகத்தில் உருவாக்கப்படுவதால், பக்கத்தை ரெண்டர் செய்வதற்கு முன் ஜாவாஸ்கிரிப்ட் ஏற்றப்படும் வரை உலாவி காத்திருக்க வேண்டியதில்லை. இது ஆரம்பப் பக்கத்தை வேகமாக ஏற்றும் நேரத்திற்கு வழிவகுக்கும். + +- **குறைந்த-நிலை சாதனங்களில் சிறந்த செயல்திறன் (Better performance on low-end devices)**: HTML சேவையகத்தில் உருவாக்கப்படுவதால், பக்கத்தை ரெண்டர் செய்ய உலாவி அதிக வேலை செய்ய வேண்டியதில்லை. இது மொபைல் போன்கள் மற்றும் டேப்லெட்டுகள் (tablets) போன்ற குறைந்த-நிலை சாதனங்களில் சிறந்த செயல்திறனுக்கு வழிவகுக்கும். + +## SSR இன் தீமைகள் + +SSR ஐப் பயன்படுத்துவதில் சில குறைபாடுகளும் உள்ளன: + +- **மிகவும் சிக்கலான மேம்பாட்டுச் செயல்முறை (More complex development process)**: SSR க்கு சேவையகப் பக்கத்தில் அதிக வேலை தேவைப்படுகிறது, இது மேம்பாட்டுச் செயல்முறையை மிகவும் சிக்கலாக்கும். + +- **அதிக சேவையக வளங்கள் (More server resources)**: SSR க்கு அதிக சேவையக வளங்கள் தேவைப்படுகின்றன, இது அதிக ஹோஸ்டிங் (hosting) செலவுகளுக்கு வழிவகுக்கும். + +- **வரையறுக்கப்பட்ட கிளையன்ட் பக்கச் செயல்பாடு (Limited client-side functionality)**: jQuery அல்லது Bootstrap போன்ற கிளையன்ட் பக்க நூலகங்களைப் பயன்படுத்த SSR உங்களை அனுமதிக்காது, ஏனெனில் அவை சேவையகத்தில் கிடைக்காது. + +## SSR ஐ எவ்வாறு செயல்படுத்துவது? + +ஒவ்வொரு நூலகமும் SSR ஐச் செயல்படுத்த அதன் சொந்த வழியைக் கொண்டுள்ளது. எடுத்துக்காட்டாக, React க்கு, நீங்கள் [Next.js](https://nextjs.org/) அல்லது [Gatsby](https://www.gatsbyjs.com/) ஐப் பயன்படுத்தலாம். Vue க்கு, நீங்கள் [Nuxt.js](https://nuxtjs.org/) ஐப் பயன்படுத்தலாம். Svelte க்கு நீங்கள் [SvelteKit](https://kit.svelte.dev/) ஐப் பயன்படுத்தலாம். diff --git a/ta/strings/README.md b/ta/strings/README.md new file mode 100644 index 00000000..7e47dbe1 --- /dev/null +++ b/ta/strings/README.md @@ -0,0 +1,61 @@ +--- +layout: editorial +chapter: 4 +pageNumber: 30 +--- + +# அத்தியாயம் 4 +# சரங்கள் + +JavaScript சரங்கள் மற்ற உயர்-நிலை மொழிகளில் சரம் செயலாக்கங்களுடன் பல ஒற்றுமைகளைப் பகிர்ந்து கொள்கின்றன. அவை உரை-அடிப்படையிலான செய்திகளையும் தரவையும் குறிக்கின்றன. இந்த பாடத்தில், புதிய சரங்களை எவ்வாறு உருவாக்குவது மற்றும் அவற்றில் பொதுவான செயல்பாடுகளை எவ்வாறு செய்வது என்பது உட்பட அடிப்படைகளை கற்போம். + +இங்கே ஒரு சரத்தின் எடுத்துக்காட்டு: + +``` +"Hello World" +``` + +சர குறியீடுகள் பூஜ்ய-அடிப்படையிலானவை, அதாவது `0` இல் உள்ள முதல் எழுத்தின் தொடக்க நிலை மற்றும் அதைத் தொடர்ந்து ஏறுவரிசையில் மற்றவை. சர மூலம் பல்வேறு முறைகள் ஆதரிக்கப்படுகின்றன மற்றும் ஒரு புதிய மதிப்பை திரும்பப் பெறுகின்றன. இந்த முறைகள் கீழே விவரிக்கப்பட்டுள்ளன. + +| பெயர் | விளக்கம் | +| -------------------- | -------------------------------------------------------------------------------------- | +| `charAt()` | குறிப்பிட்ட குறியீட்டில் உள்ள எழுத்தை திரும்பப் பெறுகிறது | +| `charCodeAt()` | குறிப்பிட்ட குறியீட்டில் Unicode எழுத்தை திரும்பப் பெறுகிறது | +| `concat()` | இரண்டு அல்லது அதிகமான இணைந்த சரங்களை திரும்பப் பெறுகிறது | +| `constructor` | சரத்தின் constructor செயல்பாட்டை திரும்பப் பெறுகிறது | +| `endsWith()` | ஒரு சரம் குறிப்பிட்ட மதிப்பில் முடிகிறதா என்று சரிபார்க்கிறது | +| `fromCharCode()` | Unicode மதிப்புகளை எழுத்துகளாக திரும்பப் பெறுகிறது | +| `includes()` | ஒரு சரம் குறிப்பிட்ட மதிப்பை கொண்டுள்ளதா என்று சரிபார்க்கிறது | +| `indexOf()` | அதன் முதல் நிகழ்வின் குறியீட்டை திரும்பப் பெறுகிறது | +| `lastIndexOf()` | அதன் கடைசி நிகழ்வின் குறியீட்டை திரும்பப் பெறுகிறது | +| `length` | சரத்தின் நீளத்தை திரும்பப் பெறுகிறது | +| `localeCompare()` | locale உடன் இரண்டு சரங்களை ஒப்பிடுகிறது | +| `match()` | ஒரு மதிப்பு அல்லது வழக்கமான வெளிப்பாட்டிற்கு எதிராக ஒரு சரத்தை பொருத்துகிறது | +| `prototype` | ஒரு பொருளின் பண்புகள் மற்றும் முறைகளை சேர்க்க பயன்படுத்தப்படுகிறது | +| `repeat()` | குறிப்பிட்ட நகல்களின் எண்ணிக்கையுடன் புதிய சரத்தை திரும்பப் பெறுகிறது | +| `replace()` | வழக்கமான வெளிப்பாடு அல்லது மதிப்புடன் ஒரு சரம் மூலம் மாற்றப்பட்ட மதிப்புகளுடன் சரத்தை திரும்பப் பெறுகிறது | +| `search()` | ஒரு மதிப்பு அல்லது வழக்கமான வெளிப்பாட்டிற்கு எதிராக ஒரு சரத்தின் பொருத்தத்தின் அடிப்படையில் குறியீட்டை திரும்பப் பெறுகிறது | +| `slice()` | ஒரு சரத்தின் ஒரு பகுதியை கொண்ட சரத்தை திரும்பப் பெறுகிறது | +| `split()` | சரத்தை உள்சரங்களின் வரிசையாக பிரிக்கிறது | +| `startsWith()` | குறிப்பிட்ட எழுத்திற்கு எதிராக சரங்களின் தொடக்கத்தை சரிபார்க்கிறது | +| `substr()` | தொடக்க குறியீட்டிலிருந்து சரத்தின் ஒரு பகுதியை பிரித்தெடுக்கிறது | +| `substring()` | இரண்டு குறியீடுகளுக்கு இடையில் சரத்தின் ஒரு பகுதியை பிரித்தெடுக்கிறது | +| `toLocalLowerCase()` | host இன் locale ஐப் பயன்படுத்தி சிறிய எழுத்துகளுடன் சரத்தை திரும்பப் பெறுகிறது | +| `toLocalUpperCase()` | host இன் locale ஐப் பயன்படுத்தி பெரிய எழுத்துகளுடன் சரத்தை திரும்பப் பெறுகிறது | +| `toLowerCase()` | சிறிய எழுத்துகளுடன் சரத்தை திரும்பப் பெறுகிறது | +| `toString()` | சரம் அல்லது சர பொருளை சரமாக திரும்பப் பெறுகிறது | +| `toUpperCase()` | பெரிய எழுத்துகளுடன் சரத்தை திரும்பப் பெறுகிறது | +| `trim()` | வெற்றிடங்கள் நீக்கப்பட்ட சரத்தை திரும்பப் பெறுகிறது | +| `trimEnd()` | இறுதியில் இருந்து வெற்றிடங்கள் நீக்கப்பட்ட சரத்தை திரும்பப் பெறுகிறது | +| `trimStart()` | தொடக்கத்தில் இருந்து வெற்றிடங்கள் நீக்கப்பட்ட சரத்தை திரும்பப் பெறுகிறது | +| `valueOf()` | சரம் அல்லது சர பொருளின் primitive மதிப்பை திரும்பப் பெறுகிறது | + + +இந்த அத்தியாயத்தில், பின்வரும் தலைப்புகளை ஆராய்வோம்: +* [CharAt](./charAt.md) +* [Concat](./concat.md) +* [உருவாக்கம்](./create.md) +* [நீளம்](./length.md) +* [மாற்று](./replace.md) +* [பிரிக்கவும்](./split.md) +* [உள்சரம்](./substring.md) \ No newline at end of file diff --git a/ta/strings/charAt.md b/ta/strings/charAt.md new file mode 100644 index 00000000..d49a75c8 --- /dev/null +++ b/ta/strings/charAt.md @@ -0,0 +1,52 @@ +--- +chapter: 4 +pageNumber: 37 +--- +# CharAt + +`str.charAt()` முறை சரத்தின் கொடுக்கப்பட்ட குறியீட்டில் உள்ள எழுத்தை திரும்பப் பெறுகிறது, குறியீடு வரிசை உறுப்பு நிலையை வைத்திருக்கிறது. +* `charAt()` முறையைப் பயன்படுத்தி +* template literal `(``)` ஐப் பயன்படுத்தி ([ES6](../es6-concepts/template-literals.md) இல் அறிமுகப்படுத்தப்பட்டது) + +`charAt()` முறை ஏற்கிறது: + +* **வாதங்கள்**: இந்த செயல்பாட்டிற்கான ஒரே வாதம் சரத்தில் ஒரு எழுத்தை பிரித்தெடுக்க வேண்டிய குறியீடாகும். + +* **குறியீடு**: இந்த குறியீட்டின் வரம்பு `0` மற்றும் length `–1` க்கு இடையில் உள்ளது. குறியீடு எதுவும் குறிப்பிடப்படவில்லை என்றால் சரத்தின் முதல் எழுத்து `0` என திரும்பப் பெறப்படும், ஏனென்றால் `0` இந்த செயல்பாட்டிற்கு பயன்படுத்தப்படும் இயல்புநிலை குறியீடாகும். + +* **திரும்ப மதிப்பு**: செயல்பாட்டிற்கு வாதமாக குறிப்பிட்ட குறியீட்டில் அமைந்துள்ள ஒரு எழுத்தை திரும்பப் பெறுகிறது. குறியீடு வரம்பிற்கு வெளியே இருந்தால், இந்த செயல்பாடு ஒரு காலி சரத்தை திரும்பப் பெறுகிறது. + +```javascript +//எடுத்துக்காட்டு 1: +function func() { + // அசல் சரம் + let str = 'JavaScript is object oriented language'; + + // கொடுக்கப்பட்ட குறியீட்டில் உள்ள எழுத்தை கண்டுபிடி + let value = str.charAt(0); + let value1 = str.charAt(4); + console.log(value); + console.log(value1); +} +func(); + +//வெளியீடு +j +s + +//எடுத்துக்காட்டு 2: +function func() { + + // அசல் சரம் + let str = 'JavaScript is object oriented language'; + + // கொடுக்கப்பட்ட குறியீட்டில் உள்ள எழுத்தை கண்டுபிடி + let value = str.charAt(9); + console.log(value); +} +func(); + + +//வெளியீடு +t +``` \ No newline at end of file diff --git a/ta/strings/concat.md b/ta/strings/concat.md new file mode 100644 index 00000000..4da08b6c --- /dev/null +++ b/ta/strings/concat.md @@ -0,0 +1,32 @@ +--- +chapter: 4 +pageNumber: 35 +--- +# இணைப்பு + +இணைப்பு என்பது இரண்டு அல்லது அதிகமான சரங்களை ஒன்றாக இணைப்பதை உள்ளடக்குகிறது, இந்த அசல் சரங்களின் ஒருங்கிணைந்த தரவை கொண்ட ஒரு பெரிய சரத்தை உருவாக்குகிறது. ஒரு சரத்தின் இணைப்பு ஒன்று அல்லது அதிகமான சரங்களை மற்றொரு சரத்துடன் இணைக்கிறது. இது JavaScript இல் பின்வரும் வழிகளில் செய்யப்படுகிறது: + +* **`+`** ஆபரேட்டரைப் பயன்படுத்தி +* `concat()` முறையைப் பயன்படுத்தி +* வரிசை `join()` முறையைப் பயன்படுத்தி +* template `(``)` literal ஐப் பயன்படுத்தி ([ES6](../es6-concepts/template-literals.md) இல் அறிமுகப்படுத்தப்பட்டது) + +சர `concat()` முறை சரங்களின் பட்டியலை அளவுருக்களாக ஏற்று அனைத்து சரங்களின் இணைப்பிற்கு பிறகு ஒரு புதிய சரத்தை திரும்பப் பெறுகிறது. வரிசை `join()` முறை ஒரு வரிசையில் உள்ள அனைத்து உறுப்புகளையும் ஒரு சரமாக மாற்றி இணைக்க பயன்படுத்தப்படுகிறது. + +Template literal backtick `(``)` ஐப் பயன்படுத்துகிறது மற்றும் பல வரி சரங்களை உருவாக்கவும் சர interpolation செய்யவும் எளிதான வழியை வழங்குகிறது. `$` அடையாளம் மற்றும் சுருள் பிரேஸ்களைப் பயன்படுத்தி backtick க்குள் ஒரு வெளிப்பாட்டை பயன்படுத்தலாம் `${expression}`. + +```javascript +const icon = '👋'; +// template Strings பயன்படுத்தி +`hi ${icon}`; + +// join() Method பயன்படுத்தி +['hi', icon].join(' '); + +// concat() Method பயன்படுத்தி +''.concat('hi ', icon); + +// + operator பயன்படுத்தி +'hi ' + icon; +// hi 👋 +``` diff --git a/ta/strings/create.md b/ta/strings/create.md new file mode 100644 index 00000000..e6d43458 --- /dev/null +++ b/ta/strings/create.md @@ -0,0 +1,64 @@ +--- +chapter: 4 +pageNumber: 32 +--- +# உருவாக்கம் + +சரங்களை ஒற்றை மேற்கோள்கள் அல்லது இரட்டை மேற்கோள்களில் உரையை இணைப்பதன் மூலம் வரையறுக்கலாம்: + +```javascript +// ஒற்றை மேற்கோள்களைப் பயன்படுத்தலாம் +let str = 'நமது அழகான சரம்'; + +// இரட்டை மேற்கோள்களும் கூட +let otherStr = "இன்னொரு நல்ல சரம்"; +``` + +Javascript இல், சரங்கள் UTF-8 எழுத்துகளை கொண்டிருக்கலாம்: + +``` +"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어"; +``` + +ஒரு சர பொருளை உருவாக்க `String` constructor ஐயும் பயன்படுத்தலாம்: + +```javascript +const stringObject = new String('இது ஒரு சரம்'); +``` + +இருப்பினும், சரங்களை உருவாக்க `String` constructor ஐப் பயன்படுத்துவது பொதுவாக பரிந்துரைக்கப்படவில்லை, ஏனென்றால் இது சர primitives மற்றும் சர பொருட்களுக்கு இடையே குழப்பத்தை ஏற்படுத்தலாம். சரங்களை உருவாக்க சர literals ஐப் பயன்படுத்துவது பொதுவாக சிறந்தது. + +சரங்களை உருவாக்க template literals ஐயும் பயன்படுத்தலாம். Template literals என்பது backticks `(``)` இல் இணைக்கப்பட்ட சரங்கள் மற்றும் மதிப்புகளுக்கான placeholders ஐ கொண்டிருக்கலாம். Placeholders `` `${}` `` தொடரியலுடன் குறிக்கப்படுகின்றன. + +```javascript +const name = 'John'; +const message = `வணக்கம், ${name}!`; +``` + +Template literals பல வரிகளை கொண்டிருக்கலாம் மற்றும் placeholders க்குள் எந்த வெளிப்பாட்டையும் சேர்க்கலாம். + +{% hint style="working" %} +சரங்களை கழிக்கவோ, பெருக்கவோ அல்லது வகுக்கவோ முடியாது. +{% endhint %} + +{% exercise %} +`name` மற்றும் `age` இன் மதிப்புகளை உள்ளடக்கிய ஒரு சரத்தை உருவாக்க ஒரு template literal ஐப் பயன்படுத்தவும். சரம் பின்வரும் வடிவத்தில் இருக்க வேண்டும்: "என் பெயர் John மற்றும் நான் 25 வயதானவன்." + +{% initial %} +let name = "John"; +let age = 25; + +// என் பெயர் John மற்றும் நான் 25 வயதானவன். +let result = +{% solution %} +let name = "John"; +let age = 25; + +// என் பெயர் John மற்றும் நான் 25 வயதானவன். +let result = `My name is ${name} and I am ${age} years old.` + +{% validation %} +assert(result == "My name is John and I am 25 years old."); + +{% context %} +{% endexercise %} diff --git a/ta/strings/length.md b/ta/strings/length.md new file mode 100644 index 00000000..8c6b9445 --- /dev/null +++ b/ta/strings/length.md @@ -0,0 +1,25 @@ +--- +chapter: 4 +pageNumber: 34 +--- +# நீளம் + +`.length` பண்பைப் பயன்படுத்தி JavaScript இல் ஒரு சரத்தில் எத்தனை எழுத்துகள் உள்ளன என்பதை அறிவது எளிது. `length` பண்பு இடைவெளிகள் மற்றும் சிறப்பு எழுத்துகள் உட்பட சரத்தில் உள்ள எழுத்துகளின் எண்ணிக்கையை திரும்பப் பெறுகிறது. + +```javascript + +let size = "நமது அழகான சரம்".length; +console.log(size); +// size: 17 + +let emptyStringSize = "".length +console.log(emptyStringSize); +// emptyStringSize: 0 + +``` + +ஒரு காலி சரத்தின் length பண்பு `0`. + +{% hint style="working" %} +`length` பண்பு ஒரு படிக்கமட்டும் பண்பு, எனவே அதற்கு புதிய மதிப்பை ஒதுக்க முடியாது. +{% endhint %} diff --git a/ta/strings/replace.md b/ta/strings/replace.md new file mode 100644 index 00000000..76765ef9 --- /dev/null +++ b/ta/strings/replace.md @@ -0,0 +1,30 @@ +--- +chapter: 4 +pageNumber: 33 +--- +# மாற்று + +`replace` முறை ஒரு எழுத்தை, வார்த்தையை அல்லது வாக்கியத்தை ஒரு சரத்துடன் மாற்ற அனுமதிக்கிறது. எடுத்துக்காட்டாக: + +```javascript +let str = "Hello World!"; +let new_str = str.replace("Hello", "Hi"); + +console.log(new_str); + +// Result: Hi World! +``` + +{% hint style="working" %} +`g` modifier அமைக்கப்பட்ட [வழக்கமான வெளிப்பாட்டின்](../regular-expression.md) அனைத்து நிகழ்வுகளிலும் ஒரு மதிப்பை மாற்ற. +{% endhint %} + +இது ஒரு மதிப்பு அல்லது வழக்கமான வெளிப்பாட்டிற்காக ஒரு சரத்தை தேடுகிறது மற்றும் மதிப்பு(கள்) மாற்றப்பட்ட புதிய சரத்தை திரும்பப் பெறுகிறது. இது அசல் சரத்தை மாற்றாது. உலகளாவிய case-insensitive மாற்று எடுத்துக்காட்டை பார்ப்போம். + +```javascript +let text = "Mr Blue has a blue house and a blue car"; +let result = text.replace(/blue/gi, "red"); + +console.log(result); +//Result: Mr red has a red house and a red car +``` diff --git a/ta/strings/split.md b/ta/strings/split.md new file mode 100644 index 00000000..1f221dfa --- /dev/null +++ b/ta/strings/split.md @@ -0,0 +1,46 @@ +--- +chapter: 4 +pageNumber: 36 +--- +# பிரிக்கவும் + +`split()` முறை ஒரு சரத்தை உள்சரங்களின் பட்டியலாக பிரிக்கிறது மற்றும் அவற்றை வரிசையாக திரும்பப் பெறுகிறது. +* `split()` முறையைப் பயன்படுத்தி +* template literal ஐப் பயன்படுத்தி (ES6 இல் அறிமுகப்படுத்தப்பட்டது) + +`split()` முறை ஏற்கிறது: + +* **separator (விரும்பினால்)** - ஒவ்வொரு பிரிவும் எங்கே நடக்க வேண்டும் என்பதை விவரிக்கும் வடிவம் (சரம் அல்லது வழக்கமான வெளிப்பாடு). +* **limit (விரும்பினால்)** - கொடுக்கப்பட்ட சரத்தை எத்தனை துண்டுகளாக பிரிக்க வேண்டும் என்பதை வரம்பிடும் ஒரு எதிர்மறை இல்லாத முழு எண். + +```javascript +console.log("ABCDEF".split("")); // [ 'A', 'B', 'C', 'D', 'E', 'F' ] + +const text = "Java is awesome. Java is fun."; + +let pattern = "."; +let newText = text.split(pattern); +console.log(newText); // [ 'Java is awesome', ' Java is fun', '' ] + +let pattern1 = "."; +// சரத்தை அதிகபட்சம் 2 பகுதிகளாக மட்டும் பிரி +let newText1 = text.split(pattern1, 2); +console.log(newText1); // [ 'Java is awesome', ' Java is fun' ] + +const text2 = "JavaScript ; Python ;C;C++"; +let pattern2 = ";"; +let newText2 = text2.split(pattern2); +console.log(newText2); // [ 'JavaScript ', ' Python ', 'C', 'C++' ] + +// RegEx பயன்படுத்தி +let pattern3 = /\s*(?:;|$)\s*/; +let newText3 = text2.split(pattern3); +console.log(newText3); // [ 'JavaScript', 'Python', 'C', 'C++' ] + +//வெளியீடு +[ 'A', 'B', 'C', 'D', 'E', 'F' ] +[ 'Java is awesome', ' Java is fun', '' ] +[ 'Java is awesome', ' Java is fun' ] +[ 'JavaScript ', ' Python ', 'C', 'C++' ] +[ 'JavaScript', 'Python', 'C', 'C++' ] +``` diff --git a/ta/strings/substring.md b/ta/strings/substring.md new file mode 100644 index 00000000..56729b65 --- /dev/null +++ b/ta/strings/substring.md @@ -0,0 +1,59 @@ +--- +chapter: 4 +pageNumber: 38 +--- +# உள்சரம் + +`string.substring()` என்பது JavaScript இல் உள்ள ஒரு உள்ளமைக்கப்பட்ட செயல்பாடு, இது கொடுக்கப்பட்ட சரத்தின் தொடக்க குறியீட்டிலிருந்து இறுதி குறியீட்டு வரையிலான பகுதியை திரும்பப் பெற பயன்படுத்தப்படுகிறது. குறியீட்டு பூஜ்ய `(0)` இலிருந்து தொடங்குகிறது. + +தொடரியல்: + +`string.substring(StartIndex, EndIndex)` + +### தொடரியல்: + +* `str.substr(start , length)` பயன்படுத்தி +* `substr()` முறையைப் பயன்படுத்தி +* template `(``)` literal ஐப் பயன்படுத்தி ([ES6](../es6-concepts/template-literals.md) இல் அறிமுகப்படுத்தப்பட்டது) + +`substr()` முறை ஏற்கிறது: + +* **அளவுருக்கள்**: இங்கே StartIndex மற்றும் EndIndex சரத்தின் உள்சரமாக எடுக்கப்படும் பகுதியை விவரிக்கின்றன. இங்கே, EndIndex விரும்பினால் மட்டுமே. +* **திரும்ப மதிப்பு**: இது கொடுக்கப்பட்ட சரத்தின் ஒரு பகுதியான புதிய சரத்தை திரும்பப் பெறுகிறது. `string.substring()` செயல்பாட்டின் செயல்பாட்டை காட்ட JavaScript குறியீடு: + +```javascript +//எடுத்துக்காட்டு 1: +// substr() முறையை விளக்க JavaScript + +const str = "GeeksforGeeks"; +const result = str.substring(8); +console.log(result); + + + +//வெளியீடு +for + +``` + +```javascript + +//எடுத்துக்காட்டு 2: +// ஒரு சரத்தை letiable ஆக எடுத்தல் +let string = "geeksforgeeks"; +a = string.substring(-1) +b = string.substring(2.5) +c = string.substring(2.9) + +// கொடுக்கப்பட்ட சரத்தின் பகுதியான +// புதிய சரங்களை அச்சிடுகிறது +console.log(a); +console.log(b); +console.log(c); + + +//வெளியீடு +geeksforgeeks +eksforgeeks +eksforgeeks +``` From 1c9e0905f59b002e5f149b2193beacde8aba364b Mon Sep 17 00:00:00 2001 From: VIGNESH S <132544431+vignesh-s-001@users.noreply.github.com> Date: Mon, 31 Aug 2026 00:18:15 +0530 Subject: [PATCH 2/6] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- ta/strings/substring.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ta/strings/substring.md b/ta/strings/substring.md index 56729b65..591bfcba 100644 --- a/ta/strings/substring.md +++ b/ta/strings/substring.md @@ -32,7 +32,7 @@ console.log(result); //வெளியீடு -for +Geeks ``` From 8996dc4442489e82139f9613500b6a1b9b3714f0 Mon Sep 17 00:00:00 2001 From: Vignesh S Date: Mon, 31 Aug 2026 00:48:38 +0530 Subject: [PATCH 3/6] updated the suggestions --- ta/animation-resources/gsap.md | 6 +- ta/arrays/reverse.md | 2 +- ta/classes/inheritance.md | 2 +- ta/complexity/README.md | 2 +- ta/exercises/fizzbuzz-problem.md | 4 +- ta/miscellaneous/Added getters and setters.md | 60 ------------------- ta/miscellaneous/template-literals.md | 6 +- ta/strings/README.md | 4 +- ta/strings/create.md | 6 +- ta/strings/substring.md | 12 ++-- 10 files changed, 21 insertions(+), 83 deletions(-) delete mode 100644 ta/miscellaneous/Added getters and setters.md diff --git a/ta/animation-resources/gsap.md b/ta/animation-resources/gsap.md index 51a9474c..6df39082 100644 --- a/ta/animation-resources/gsap.md +++ b/ta/animation-resources/gsap.md @@ -53,9 +53,9 @@ npm install gsap டைம்லைன்கள் அனிமேஷன்களை வரிசைப்படுத்த (sequence) உங்களை அனுமதிக்கின்றன. ஒரு உதாரணம் இங்கே: ```javascript -const name = "John"; -const greeting = `Hello, ${name}!`; -console.log(greeting); // Output: Hello, John! +const tl = gsap.timeline(); +tl.to("#box", { x: 100, duration: 1 }) + .to("#box", { y: 100, duration: 1 }); ``` diff --git a/ta/arrays/reverse.md b/ta/arrays/reverse.md index 10df2d3d..668fd4c7 100644 --- a/ta/arrays/reverse.md +++ b/ta/arrays/reverse.md @@ -1,7 +1,7 @@ --- chapter: 6 pageNumber: 59 -description: வரிசையின் தொடக்கத்தில் ஒரு உறுப்பை சேர்க்க reverse முறையைப் பயன்படுத்தலாம். இது அசல் வரிசையை மாற்றி புதிய வரிசை நீளத்தை திரும்பப் பெறுகிறது. +description: reverse முறை வரிசையின் உறுப்புகளை இடத்திலேயே தலைகீழாக மாற்றுகிறது. --- # தலைகீழாக்கு diff --git a/ta/classes/inheritance.md b/ta/classes/inheritance.md index 3ee3d43f..3275a28e 100644 --- a/ta/classes/inheritance.md +++ b/ta/classes/inheritance.md @@ -28,7 +28,7 @@ class Model extends Car { } let myCar = new Model("Toyota", "Camry"); -console.log(myCar.show()); // I have a Camry, it is a Toyota. +console.log(myCar.show()); // I have a Toyota, it is a Camry. ``` {% hint style="info" %} diff --git a/ta/complexity/README.md b/ta/complexity/README.md index d30b0167..ecf07652 100644 --- a/ta/complexity/README.md +++ b/ta/complexity/README.md @@ -17,7 +17,7 @@ description: ஒரு அல்காரிதத்தின் (algorithm) ஒரு உதாரணத்தை எடுத்துக்கொள்வோம்: ```javascript function printElement(arr){ - for (let i=0; i Date: Mon, 31 Aug 2026 01:02:03 +0530 Subject: [PATCH 4/6] fix substring comment typo --- ta/strings/substring.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ta/strings/substring.md b/ta/strings/substring.md index 7cc6c011..5f753ab4 100644 --- a/ta/strings/substring.md +++ b/ta/strings/substring.md @@ -23,7 +23,7 @@ pageNumber: 38 ```javascript //எடுத்துக்காட்டு 1: -// substr() முறையை விளக்க JavaScript +// substring() முறையை விளக்க JavaScript const str = "GeeksforGeeks"; const result = str.substring(8); From c006482c6fa09bedcf6c422eef96981b66994f0f Mon Sep 17 00:00:00 2001 From: Vignesh S Date: Mon, 31 Aug 2026 10:11:57 +0530 Subject: [PATCH 5/6] fix : about language count --- _layouts/website/languages.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_layouts/website/languages.html b/_layouts/website/languages.html index 59050085..cce146c4 100644 --- a/_layouts/website/languages.html +++ b/_layouts/website/languages.html @@ -141,7 +141,7 @@

    About the Book

    - 8 language editions + 9 language editions
    From 9a2322e659ad3de2eaaffd59a37cf71b8f8b29ea Mon Sep 17 00:00:00 2001 From: Sun God Vicky Date: Thu, 3 Sep 2026 14:17:59 +0530 Subject: [PATCH 6/6] update : suggestions --- _layouts/website/languages.html | 2 +- ta/interview-questions/intermediate-level.md | 30 ++++++++++---------- ta/miscellaneous/single-thread-nature.md | 14 ++++----- ta/miscellaneous/template-literals.md | 8 +++--- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/_layouts/website/languages.html b/_layouts/website/languages.html index cce146c4..3b45881b 100644 --- a/_layouts/website/languages.html +++ b/_layouts/website/languages.html @@ -116,7 +116,7 @@

    {{ lang.title }}

    Preview - {% if lang.id != 'de' and lang.id != 'cn' %} + {% if lang.id != 'de' and lang.id != 'cn' and lang.id != 'ta' %} PDF diff --git a/ta/interview-questions/intermediate-level.md b/ta/interview-questions/intermediate-level.md index 3359803b..8efa0858 100644 --- a/ta/interview-questions/intermediate-level.md +++ b/ta/interview-questions/intermediate-level.md @@ -237,27 +237,27 @@ console.log(aLet); // 10 ஃபால்சி மதிப்புகளின் எடுத்துக்காட்டுகள்: ```javascript if (false) { - // This code block won't execute because false is falsy. + // இந்தக் குறியீட்டு தொகுதி செயல்படாது, ஏனெனில் false என்பது falsy. } if (0) { - // This code block won't execute because 0 is falsy. + // இந்தக் குறியீட்டு தொகுதி செயல்படாது, ஏனெனில் 0 என்பது falsy. } if ("" === false) { - // This comparison is true because an empty string is falsy. + // இந்த ஒப்பீடு உண்மை, ஏனெனில் வெற்றுச் சரம் (empty string) falsy ஆகும். } if (null) { - // This code block won't execute because null is falsy. + // இந்தக் குறியீட்டு தொகுதி செயல்படாது, ஏனெனில் null என்பது falsy. } if (undefined) { - // This code block won't execute because undefined is falsy. + // இந்தக் குறியீட்டு தொகுதி செயல்படாது, ஏனெனில் undefined என்பது falsy. } if (NaN) { - // This code block won't execute because NaN is falsy. + // இந்தக் குறியீட்டு தொகுதி செயல்படாது, ஏனெனில் NaN என்பது falsy. } ``` #### ட்ரூத்தி மதிப்புகள் (Truthy Values): @@ -267,23 +267,23 @@ if (NaN) { ட்ரூத்தி (truth) மதிப்புகளின் எடுத்துக்காட்டு: ```javascript if (true) { - // This code block will execute because true is truthy. + // இந்தக் குறியீட்டு தொகுதி செயல்படும், ஏனெனில் true என்பது truthy. } if (42) { - // This code block will execute because 42 is truthy. + // இந்தக் குறியீட்டு தொகுதி செயல்படும், ஏனெனில் 42 என்பது truthy. } if ("Hello") { - // This code block will execute because a non-empty string is truthy. + // இந்தக் குறியீட்டு தொகுதி செயல்படும், ஏனெனில் காலியில்லாத சரம் truthy ஆகும். } if ({} === true) { - // This comparison is false because an empty object is truthy but not equal to true. + // இந்த ஒப்பீடு தவறு, ஏனெனில் காலி பொருள் (empty object) truthy ஆனாலும் true க்கு சமம் இல்லை. } if ([] === true) { - // This comparison is false because an empty array is truthy but not equal to true. + // இந்த ஒப்பீடு தவறு, ஏனெனில் காலி வரிசை (empty array) truthy ஆனாலும் true க்கு சமம் இல்லை. } ``` @@ -348,21 +348,21 @@ if ([] === true) { #description; constructor(id, description, ) { - // Use setters instead of directly modifying the private fields + // தனியார் புலங்களை (private fields) நேரடியாக மாற்றாமல் செட்டர்களை (setters) பயன்படுத்துக this.id = id; this.description = description; } - // Use getters to read the values + // மதிப்புகளை வாசிக்க கெட்டர்களை (getters) பயன்படுத்துக get id() { return this.#id; } // ... - // Use setters to validate data before writing + // தரவை எழுதுவதற்கு முன் சரிபார்க்க செட்டர்களை (setters) பயன்படுத்துக set id(id) { - // ...validate new ID + // ...புதிய ID ஐ சரிபார்க்கவும் this.#id = id; } diff --git a/ta/miscellaneous/single-thread-nature.md b/ta/miscellaneous/single-thread-nature.md index 5834d8b2..0ea1e4a7 100644 --- a/ta/miscellaneous/single-thread-nature.md +++ b/ta/miscellaneous/single-thread-nature.md @@ -27,22 +27,22 @@ description: ஜாவாஸ்கிரிப்ட் என்பது ஒ ## எடுத்துக்காட்டு ```javascript -// Simulating an asynchronous operation with a callback +// கால்பேக்குடன் ஒத்திசைவற்ற செயல்பாடை (asynchronous operation) உருவகப்படுத்துதல் function simulateAsyncOperation(callback) { setTimeout(function () { - console.log("Async operation completed."); + console.log("ஒத்திசைவற்ற செயல்பாடு முடிந்தது (Async operation completed)."); callback(); - }, 2000); // Simulating a 2-second delay + }, 2000); // 2-வினாடி தாமதத்தை உருவகப்படுத்துதல் } -console.log("Start of the program"); +console.log("நிரலின் தொடக்கம் (Start of the program)"); -// Initiating an asynchronous operation +// ஒத்திசைவற்ற செயல்பாடைத் தொடங்குதல் simulateAsyncOperation(function () { - console.log("Callback executed: Handling the result."); + console.log("கால்பேக் செயல்படுத்தப்பட்டது: முடிவைக் கையாளுதல் (Callback executed: Handling the result)."); }); -console.log("End of the program"); +console.log("நிரலின் முடிவு (End of the program)"); ``` இந்த எடுத்துக்காட்டில், ஜாவாஸ்கிரிப்ட்டின் ஒற்றை நூல் தன்மை மற்றும் கால்பேக்குகளைப் (callbacks) பயன்படுத்தி ஒத்திசைவற்ற செயல்பாடுகளை அது எவ்வாறு கையாளுகிறது என்பதை விளக்குகிறோம். diff --git a/ta/miscellaneous/template-literals.md b/ta/miscellaneous/template-literals.md index f5527bb3..1cce9fac 100644 --- a/ta/miscellaneous/template-literals.md +++ b/ta/miscellaneous/template-literals.md @@ -9,22 +9,22 @@ description: டெம்ப்ளேட் லிட்டரல்கள் (T ```javascript let text1 = `Hello World!`; -// template literals with both single and double code inside a single string +// ஒரு சரத்தில் (single string) ஒற்றை மற்றும் இரட்டை மேற்கோள்களுடன் (single and double quotes) டெம்ப்ளேட் லிட்டரல்கள் (template literals) let text2 = `He's often called "Johnny"`; -// template literals with multiline strings +// பல் வரி சரங்களுடன் (multiline strings) டெம்ப்ளேட் லிட்டரல்கள் let text3 = `The quick brown fox jumps over the lazy dog`; -// template literals with variable interpolation +// மாறி இடைக்கணிப்புடன் (variable interpolation) டெம்ப்ளேட் லிட்டரல்கள் const firstName = "John"; const lastName = "Doe"; const welcomeText = `Welcome ${firstName}, ${lastName}!`; -// template literals with expression interpolation +// கோவை இடைக்கணிப்புடன் (expression interpolation) டெம்ப்ளேட் லிட்டரல்கள் const price = 10; const VAT = 0.25;