msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

chore(i18n): sync translations with latest source changes (chunk 13/14, 100 files)

Browse Source
pull/1668/head
localizeflow[bot] 3 months ago
parent 05bab63d1e
commit b819a815bf
100 changed files with 28359 additions and 0 deletions
Show Stats Download Patch File Download Diff File

25
translations/pcm/CODE_OF_CONDUCT.md
Unescape View File

@ -0,0 +1,25 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b0a9b4cccd918195f58224d5793da1a6",
"translation_date": "2026-01-08T10:33:54+00:00",
"source_file": "CODE_OF_CONDUCT.md",
"language_code": "pcm"
}
-->
# Microsoft Open Source Code of Conduct
Dis project don adopt di [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
Resources:
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
- Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) wit questions or concerns
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document dem don translate am wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even as we dey try make am correct, abeg sabi say automated translation fit get some mistakes or error. The original document wey dem write for im own language na the main correct one. For important tori, e good make person use professional human translation. We no go fit take any blame if person no understand well or misunderstand because of dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

30
translations/pcm/CONTRIBUTING.md
Unescape View File

@ -0,0 +1,30 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "777400e9f0336c7ee2f9a1200a88478f",
"translation_date": "2026-01-08T10:14:05+00:00",
"source_file": "CONTRIBUTING.md",
"language_code": "pcm"
}
-->
# Contributing
Dis project dey welcome contributions and suggestions. Most contributions go require say you
agree to one Contributor License Agreement (CLA) wey talk say you get di right to
and really do, give us di rights to use your contribution. For more details, visit
[https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
When you submit one pull request, one CLA-bot go automatically check whether you need
provide one CLA and add di correct thing for di PR (like label, comment). Just follow di
instructions wey di bot give. You go only need do dis one time for all repositories wey dey use our CLA. Abeg also try tell us why you make dat change so we fit understand your request well.
Dis project don adopt di [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
For more information, see di [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) if you get any additional questions or comments.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we dey try make e correct, abeg sabi say automated translation fit get some mistakes or inaccuracy. The original document wey e dey for im correct language na di real correct one. If na serious matter, better make person wey sabi do human translation help you. We no go take responsibility if anybody misunderstand or misinterpret anything from dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

145
translations/pcm/Git-Basics/README.md
Unescape View File

@ -0,0 +1,145 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5cf5e1ed51455fefed4895fcc4d6ba2a",
"translation_date": "2026-01-08T10:45:55+00:00",
"source_file": "Git-Basics/README.md",
"language_code": "pcm"
}
-->
## Basics of GIT for web-dev beginners👶
## Wetin be `Git`?
1. Git na one kind distributed version control system.
2. Di whole codebase and history dey available for every developer computer,
wey dey allow easy branching and merging.
3. Dem dey use am as Version Control System (VCS) to track changes for computer files.
* Distributed version control
* E dey coordinate work between many developers
* Who change wetin and when
* Fit revert back anytime
* Local & remote repos
## CONCEPTS OF GIT
* E dey keep track of code history
* E dey take "snapshots" of your files
* Na you dey decide when to take snapshot by doing "commit"
* You fit go any snapshot anytime
* You fit stage files before you commit
### Difference Between Git & GitHub
| Git | GitHub |
| ------- | ----------- |
| Git na software | GitHub na cloud service |
| Git dey installed locally for system | GitHub dey hosted for web |
| Na command-line tool e be | Na graphical user interface e be |
| Linux dey maintain Git | Microsoft dey maintain GitHub |
| E focus on version control and code sharing | E focus on centralized source code hosting |
| Git get open-source license | GitHub get free-tier plus pay-for-use tier |
| Git release for 2005 | GitHub release for 2008 |
## GIT Installation
* Linux(Debian)
`$sudo apt-get install git`
* Linux(Fedora)
`$sudo yum install git`
* [Download](http://git-scm.com/download/mac) for Mac
* [Download](http://git-scm.com/download/win) for Windows
### Installation Process Steps:
1. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190359823-e421b976-515a-4565-990d-2f2e4e62977a.png"/>
2. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360530-a7bfa681-47f4-4859-9b8a-4120e0cad348.png"/>
3. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360760-30db7768-19e0-4848-a99d-a6c955e041e2.png"/>
4. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360896-473e1e54-f083-4b5c-a5f0-539f70469142.png"/>
5. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361144-bc670a2b-b776-4867-9785-7b509d416fbb.png"/>
6. And then Continue Next > Next > Next > <b>Install</b>
7. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361548-4b700d85-c7d5-4d26-90e7-e5cc3ce24311.png"/>
### After you don install, we need configure git using git bash
1. `git config --global user.name 'YourName'`
2. `git config --global user.email 'YourEmail'`
___
## Git Commands
___
### Getting & Creating Projects
| Command | Description |
| ------- | ----------- |
| `git init` | Start local Git repository |
| `git clone ssh://git@github.com/[username]/[repository-name].git` | Make local copy of remote repository |
### Basic Snapshotting
| Command | Description |
| ------- | ----------- |
| `git status` | Check status |
| `git add [file-name.txt]` | Add file to staging area |
| `git add -A` | Add all new and changed files to staging area |
| `git commit -m "[commit message]"` | Commit changes |
| `git rm -r [file-name.txt]` | Remove file or folder |
| `git push` | Push To Remote Repository |
| `git pull` | Pull Latest Changes From Remote Repository |
### Branching & Merging
| Command | Description |
| ------- | ----------- |
| `git branch` | List branches (asterisk na current branch) |
| `git branch -a` | List all branches (local and remote) |
| `git branch [branch name]` | Create new branch |
| `git branch -D [branch name]` | Delete branch |
| `git push origin --delete [branch name]` | Delete remote branch |
| `git checkout -b [branch name]` | Create and switch to new branch |
| `git checkout -b [branch name] origin/[branch name]` | Clone remote branch and switch to am |
| `git branch -m [old branch name] [new branch name]` | Rename local branch |
| `git checkout [branch name]` | Switch to branch |
| `git checkout -` | Switch to last checked branch |
| `git checkout -- [file-name.txt]` | Discard changes to file |
| `git merge [branch name]` | Merge branch into active branch |
| `git merge [source branch] [target branch]` | Merge branch into target branch |
| `git stash` | Stash changes for dirty working directory |
| `git stash clear` | Remove all stashed entries |
### Sharing & Updating Projects
| Command | Description |
| ------- | ----------- |
| `git push origin [branch name]` | Push branch to your remote repository |
| `git push -u origin [branch name]` | Push changes to remote and remember branch |
| `git push` | Push changes to remote (remembered branch) |
| `git push origin --delete [branch name]` | Delete remote branch |
| `git pull` | Update local repo to newest commit |
| `git pull origin [branch name]` | Pull changes from remote repository |
| `git remote add origin ssh://git@github.com/[username]/[repository-name].git` | Add remote repository |
| `git remote set-url origin ssh://git@github.com/[username]/[repository-name].git` | Set origin branch to SSH |
### Inspection & Comparison
| Command | Description |
| ------- | ----------- |
| `git log` | View changes |
| `git log --summary` | View changes (detailed) |
| `git log --oneline` | View changes (brief) |
| `git diff [source branch] [target branch]` | Preview changes before merging |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate am. Even though we dey try make am correct, make you sabi say automated translation fit get some mistakes or no too clear. Di original document wey e dey for im correct language na di main correct source. If na serious information, better make person wey sabi do professional human translation do am. We no go take responsibility if pesin no understand well or e get wahala because of this translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

277
translations/pcm/README.md
Unescape View File

@ -0,0 +1,277 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
"translation_date": "2026-01-08T10:36:02+00:00",
"source_file": "README.md",
"language_code": "pcm"
}
-->
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Web Development for Beginners - A Curriculum
Learn di basics of web development wit our 12-week full course wey Microsoft Cloud Advocates run. Each one of di 24 lessons dey dive inside JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Join quizzes, talks, and practical assignments. Improve your skills and make your knowledge stay well wit our effective project-based teaching. Start your coding journey today!
Join di Azure AI Foundry Discord Community
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Follow these steps to start to use these resources:
1. **Fork the Repository**: Click [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Join The Azure AI Foundry Discord and meet experts and fellow developers**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Multi-Language Support
#### Supported via GitHub Action (Automated & Always Up-to-Date)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](./README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Prefer to Clone Locally?**
> Dis repository get 50+ language translations wey fit make di download size big well-well. To clone without di translations, use sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Dis one go give you everything wey you need to complete di course wit faster download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**If you want more translations, di supported languages dey listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _You be student?_
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) wey you go find beginner resources, Student packs and even ways to get free certificate voucher. Na dis page you suppose bookmark and dey check from time to time as we dey update content every month.
### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete!
New Challenge don add, find "GitHub Copilot Agent Challenge 🚀" for most chapters. Na new challenge for you to complete wit GitHub Copilot and Agent mode. If you never use Agent mode before, e fit no be only generate text but e fit also create and edit files, run commands and more.
### 📣 Announcement - _New Project to build using Generative AI_
New AI Assistant project just add, check am out [project](./9-chat-project/README.md)
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript don release
No miss our new Generative AI curriculum!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
![Background](../../translated_images/background.148a8d43afde5730.pcm.png)
- Lessons wey cover from basics reach RAG.
- Talk wit historical characters using GenAI and our companion app.
- Fun and interesting story, you go dey time travel!
![character](../../translated_images/character.5c0dd8e067ffd693.pcm.png)
Each lesson get assignment to complete, knowledge check and challenge to guide you inside learning topics like:
- Prompting and prompt engineering
- Text and image app generation
- Search apps
Visit [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) to start!
## 🌱 Getting Started
> **Teachers**, we don [put some suggestions](for-teachers.md) on how to use dis curriculum. We go like make you give your feedback [for our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start wit pre-lecture quiz, follow by reading di lecture materials, complete di activities then check your understanding wit post-lecture quiz.
To make your learning better, join your peers to work on di projects together! Discussions dey encouraged for our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators go ready answer your questions.
To improve your education, we dey highly recommend make you explore [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for extra study materials.
### 📋 Setting up your environment
Dis curriculum get development environment wey ready! As you start, you fit choose run di curriculum for [Codespace](https://github.com/features/codespaces/) (_browser-based, no installation needed environment_), or locally for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Create your repository
To make e easy for you to save your work, e good make you create your own copy of dis repo. You fit do am by clicking **Use this template** button for top of di page. E go create new repository inside your GitHub account wit copy of di curriculum.
Follow these steps:
1. **Fork the Repository**: Click the "Fork" button wey dey top-right corner of dis page.
2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Running the curriculum in a Codespace
For your copy of this repository wey you create, click the **Code** button then select **Open with Codespaces**. E go create new Codespace for you to work inside.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.pcm.png)
#### Running the curriculum locally on your computer
To run dis curriculum locally on your computer, you go need text editor, browser and command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), go guide you through different options for each of these tools so you fit choose the one wey best for you.
We recommend make you use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, e get built-in [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You fit download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone your repository to your computer. You fit do am by clicking the **Code** button then copy di URL:
[CodeSpace](./images/createcodespace.png)
Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) for inside [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run dis command, change `<your-repository-url>` to di URL wey you just copy:
```bash
git clone <your-repository-url>
```
2. Open di folder for Visual Studio Code. You fit do dis by click **File** > **Open Folder** and choose di folder wey you just clone.
> Recommended Visual Studio Code extensions:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages inside Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code faster
## 📂 Every lesson get:
- optional sketchnote
- optional supplemental video
- pre-lesson warmup quiz
- written lesson
- for project-based lessons, step-by-step guides how to build di project
- knowledge checks
- challenge
- supplemental reading
- assignment
- [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **Note about quizzes**: All di quizzes dey inside the Quiz-app folder, 48 quizzes total wey get three questions each. Dem dey available [here](https://ff-quizzes.netlify.app/web/) quiz app fit run locally or deploy for Azure; follow the instruction inside `quiz-app` folder.
## 🗃️ Lessons
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic tins wey dey behind most programming languages and about software wey help professional developers do dia work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, include how to work with team | How to use GitHub for your project, how to work together with others on top code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage how application logic flow go | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions inside your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops for JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build di HTML to create online terrarium, focus on how to build layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build di CSS to style the online terrarium, focus on basics of CSS including how to make the page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make terrarium work as drag/drop interface, focus on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to direct the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers dey work, dia history, and how to begin the first elements for a browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building form, call API and store variables for local storage | Build JavaScript elements for your browser extension to call API using variables inside local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Background processes for browser, web performance | Use browser background processes to manage extension's icon; learn about web performance and some optimization to improve | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance wey dey use both Classes and Composition plus Pub/Sub pattern, prepare to build game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about Canvas API, wey dem use to draw things for screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around screen | Discover how elements fit move using cartesian coordinates and Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and respond to each other using keypresses and give cooldown function to make sure game perform well | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Do math calculations based on game's status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting the game | Learn about how to end and restart game, include how to clean assets and reset variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes for Web App | Learn how to create base architecture of multipage website with routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build Login and Registration Form | Learn about building forms and validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data flow inside your app and outside, how to fetch am, store am and delete am | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app hold state and how to manage am by programming | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to use code editor | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogy
Our curriculum design dey based on two key teaching principles:
* project-based learning
* frequent quizzes
Di program dey teach basics of JavaScript, HTML, CSS, plus latest tools and techniques wey web developers dey use nowadays. Students go get chance to get hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader style game, and banking app for businesses. By di end of di series, students go sabi ground well well for web development.
> 🎓 You fit take di first few lessons for dis curriculum as [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) for Microsoft Learn!
By making sure say content match projects, e make di process more enjoyable for students and e go help them remember concepts well well. We still write plenty starter lessons for JavaScript basics to introduce concepts, plus video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video tutorials wey some authors contribute to dis curriculum.
Plus, one low-stakes quiz dey before class to set student mind for learning topic, while second quiz after class make sure say dem remember more. Dis curriculum design be flexible and fun and fit be taken whole or in part. Di projects start small and dey become more complex by di end of di 12-week course.
Though we avoid introducing JavaScript frameworks so that focus dey on basic skills wey web developer need before dem use framework, a good next step after dis curriculum na to learn Node.js through another group of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
## 🧭 Offline access
You fit run dis documentation offline by using [Docsify](https://docsify.js.org/#/). Fork dis repo, [install Docsify](https://docsify.js.org/#/quickstart) for your local machine, then for root folder of dis repo, type `docsify serve`. Website go dey for port 3000 for your localhost: `localhost:3000`.
## 📘 PDF
PDF of all lessons fit be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Other Courses
Our team dey produce oda kurs dem! Check am out:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Core Learning
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot Series
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Getting Help
If you jam or get any gbege about how to build AI app dem. Join other learners and baba developers for talk about MCP. Na beta community wey dey support, questions dey welcome and knowledge dey free to share.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
If you get product feedback or error while you dey build, waka go:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## License
This repository get MIT license. See the [LICENSE](../../LICENSE) file for more tori.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Wetin I Go Talk**:
Dis dokument don translate wit AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, make you sabi say machine translate fit get mistake or no correct. Di original dokument wey dem write for im own language na di real correct one. If na serious matter, make you use professional human translator. We no go responsible if pesin no understand or understand wrong because of dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/pcm/SECURITY.md
Unescape View File

@ -0,0 +1,53 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2026-01-08T10:34:55+00:00",
"source_file": "SECURITY.md",
"language_code": "pcm"
}
-->
## Security
Microsoft dey take the security of our software products and services seriously, wey include all source code repositories wey dey managed through our GitHub organizations, wey include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
If you believe say you don find security vulnerability for any Microsoft-owned repository wey meet [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), abeg report am to us as we describe below.
## Reporting Security Issues
**Abeg make you no report security vulnerabilities through public GitHub issues.**
Instead, abeg report dem to the Microsoft Security Response Center (MSRC) for [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
If you prefer to submit without logging in, send email go [secure@microsoft.com](mailto:secure@microsoft.com). If e possible, encrypt your message with our PGP key; abeg download am from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
You go get response inside 24 hours. If for any reason you no get am, abeg follow up through email make sure say we receive your original message. You fit find more information for [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
Abeg include the requested information wey dey below (as much as you fit give) to help us better understand the nature and scope of the possible issue:
* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
* Full paths of the source file(s) wey relate to the manifestation of the issue
* The location of the affected source code (tag/branch/commit or direct URL)
* Any special configuration wey dey required to reproduce the issue
* Step-by-step instructions to reproduce the issue
* Proof-of-concept or exploit code (if e possible)
* Impact of the issue, including how attacker fit exploit the issue
This information go help us triage your report faster.
If you dey report for bug bounty, more complete reports fit make you get higher bounty award. Abeg visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) page make you see more details about our active programs.
## Preferred Languages
We prefer say all communications go dey English.
## Policy
Microsoft dey follow the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document don translate using AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, abeg sabi say automated translation fit get some mistakes or wahala. Di original document wey original language n be di correct one. If na serious matter, better make professional human translation do am. We no go hold ourselves responsible if pesin for misunderstand or mix up tins because of dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

27
translations/pcm/SUPPORT.md
Unescape View File

@ -0,0 +1,27 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
"translation_date": "2026-01-08T10:12:59+00:00",
"source_file": "SUPPORT.md",
"language_code": "pcm"
}
-->
# Support
## How to file issues and get help
Dis project dey use GitHub Issues to track bugs and feature requests. Abeg try find if de issues don dey before you file new one to avoid duplicates. For new issues, file your bug or feature request as new Issue.
For help and questions about how to use dis project, abeg check [our contributing guidelines](CONTRIBUTING.md).
## Microsoft Support Policy
Support for dis project limited to the resources wey dem list above.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na im don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translations fit get some mistake or error. If you want correct and serious info, abeg make you check original document wey dem write for im ogbonge language. For important mata, better make human professional translate am. We no go take any blame if person no understand or misinterpret tins because of this translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

23
translations/pcm/_404.md
Unescape View File

@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
"translation_date": "2026-01-08T10:19:27+00:00",
"source_file": "_404.md",
"language_code": "pcm"
}
-->
# Waka dey go
We dey work on dis page. Abeg come check am later.
Open an [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) if you get any question.
**[Go back home](../../../../../../..)**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Warning**:
Dis document don get translation from AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make everything correct, abeg sabi say sometimes automated translation fit get mistakes or no too correct. If you get the original document for dia language, na dat one be the correct source. For important matter, make you use human wey sabi do professional translation. We no go take responsibility if person no understand well or if mistake happen because of dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

36
translations/pcm/docs/_navbar.md
Unescape View File

@ -0,0 +1,36 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3bd2f51ecf4ac9b39277cba748943793",
"translation_date": "2026-01-08T11:38:49+00:00",
"source_file": "docs/_navbar.md",
"language_code": "pcm"
}
-->
- Translations
- [English (United States)](../../../docs/README)
- [বাংলা](../../../docs/README.bn)
- [中文(中国)](../../../docs/README.zh-cn)
- [中文(台湾)](../../../docs/README.zh-tw)
- [Español](../../../docs/README.es)
- [Français](../../../docs/README.fr)
- [Ελληνικά](../../../docs/README.el)
- [हिन्दी](../../../docs/README.hi)
- [Bahasa Melayu](../../../docs/README.ms)
- [മലയാളം](../../../docs/README.ml)
- [தமிழ்](../../../docs/README.ta)
- [తెలుగు](../../../docs/README.te)
- [Bahasa Indonesia](../../../docs/README.id)
- [Italiano](../../../docs/README.it)
- [日本語](../../../docs/README.ja)
- [Nederlands](../../../docs/README.nl)
- [नेपाली](../../../docs/README.np)
- [Português](../../../docs/README.pt)
- [Русский](../../../docs/README.ru)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document dem translate am wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translation fit get mistake or wahala. Di original document wey dey dia for im correct language na im be di true one. If na serious info, make person wey sabi do correct human translation do am. We no go take any blame if pesin no understand or if dis translation cause any gbege.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/pcm/docs/_sidebar.md
Unescape View File

@ -0,0 +1,53 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
"translation_date": "2026-01-08T11:37:22+00:00",
"source_file": "docs/_sidebar.md",
"language_code": "pcm"
}
-->
- Introduction
- [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
- [2](../1-getting-started-lessons/2-github-basics/README.md)
- [3](../1-getting-started-lessons/3-accessibility/README.md)
- JS Basics
- [4](../2-js-basics/1-data-types/README.md)
- [5](../2-js-basics/2-functions-methods/README.md)
- [6](../2-js-basics/3-making-decisions/README.md)
- [7](../2-js-basics/4-arrays-loops/README.md)
- HTML, CSS, JS
- [8](../3-terrarium/1-intro-to-html/README.md)
- [9](../3-terrarium/2-intro-to-css/README.md)
- [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
- Typing game
- [11](../4-typing-game/typing-game/README.md)
- Browser Extension
- [12](../5-browser-extension/1-about-browsers/README.md)
- [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
- [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
- Space Game
- [15](../6-space-game/1-introduction/README.md)
- [16](../6-space-game/2-drawing-to-canvas/README.md)
- [17](../6-space-game/3-moving-elements-around/README.md)
- [18](../6-space-game/4-collision-detection/README.md)
- [19](../6-space-game/5-keeping-score/README.md)
- [20](../6-space-game/6-end-condition/README.md)
- Bank Project
- [21](../7-bank-project/1-template-route/README.md)
- [22](../7-bank-project/2-forms/README.md)
- [23](../7-bank-project/3-data/README.md)
- [24](../7-bank-project/4-state-management/README.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis dokument don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make everything correct, abeg sabi say automated translation fit get some kan error or e no too correct. Di original dokument wey dem write for im own language na di real correct source. For important matter dem, e better make professional human translation do am. We no go responsible for any misunderstanding or wrong meaning wey fit show because of dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

80
translations/pcm/for-teachers.md
Unescape View File

@ -0,0 +1,80 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "71009af209f81cc01a1f2d324200375f",
"translation_date": "2026-01-08T10:10:13+00:00",
"source_file": "for-teachers.md",
"language_code": "pcm"
}
-->
### For Educators
Una fit use dis curriculum for una classroom. E dey work well well wit GitHub Classroom and di beta LMS platforms dem, and e fit also be standalone repo wey una fit use wit una students.
### Use with GitHub Classroom
To manage lessons and assignments per cohort, create one repository per lesson so GitHub Classroom fit attach each assignment independently.
- Fork dis repo to una organization.
- Create separate repo for each lesson by comot each lesson folder make e dey im own repository.
- Option A: Create empty repos (one per lesson) and copy di lesson folder contents inside each.
- Option B: Use Git history‑preserving way (e.g., split folder into new repo) if you need provenance.
- For GitHub Classroom, create assignment per lesson and point am to di matching lesson repo.
- Recommended settings:
- Repository visibility: private for student work.
- Use starter code from di lesson repo’s default branch.
- Add issue and pull request templates for quizzes and submissions.
- You fit also configure autograding and tests if una lessons get dem.
- Things wey go help:
- Repository names like lesson-01-intro, lesson-02-html, etc.
- Labels: quiz, assignment, needs-review, late, resubmission.
- Tags/releases per cohort (e.g., v2025-term1).
Tip: Make you no dey keep repositories for synced folders (like OneDrive/Google Drive) so dat Git no go get wahala for Windows.
### Use with Moodle, Canvas, or Blackboard
Dis curriculum get importable packages for common LMS workflows.
- Moodle: Use di Moodle upload file [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) to load di full course.
- Common Cartridge: Use di Common Cartridge file [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) for wider LMS compatibility.
- Notes:
- Moodle Cloud limited for Common Cartridge support. Better make you use di Moodle file wey dey on top, wey you fit still upload inside Canvas.
- After you import, check modules, due dates, and quiz settings make e match your term schedule.
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.pcm.png)
> Di curriculum for Moodle classroom
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.pcm.png)
> Di curriculum for Canvas
### Use di repo directly (no Classroom)
If you nor wan use GitHub Classroom, you fit run di course directly from dis repo.
- Synchronous/online formats (Zoom/Teams):
- Run short mentor‑led warmups; use breakout rooms for quizzes.
- Make dem know di time window for quizzes; students go submit answers as GitHub Issues.
- For collaborative assignments, students go work in public lesson repos and open pull requests.
- Private/asynchronous formats:
- Students go fork each lesson to their own **private** repos and add you as collaborator.
- Dem go submit via Issues (quizzes) and Pull Requests (assignments) on your classroom repo or their private forks.
### Best practices
- Give orientation lesson on Git/GitHub basics, Issues, and PRs.
- Use checklists for multi‑step quizzes/assignments inside Issues.
- Add CONTRIBUTING.md and CODE_OF_CONDUCT.md to set classroom norms.
- Add accessibility notes (alt text, captions) and offer printable PDFs.
- Version your content every term and freeze lesson repos after you publish.
### Feedback and support
We want dis curriculum to work well for you and your students. Abeg open new Issue for dis repository if you find bugs, requests, or improvements, or start discussion for Teacher Corner.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Warning**:
Dis document na AI translation tool [Co-op Translator](https://github.com/Azure/co-op-translator) translate am. We dey try make am correct, but make you sabi say machine fit make mistake or get wrong meaning sometimes. The original document wey dem write for di main language na di correct one wey you suppose trust. If na serious matter, better to use person wey sabi human translation. We no go gree if you misunderstand or sabi wrong from this translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

67
translations/pcm/lesson-template/README.md
Unescape View File

@ -0,0 +1,67 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
"translation_date": "2026-01-08T11:40:47+00:00",
"source_file": "lesson-template/README.md",
"language_code": "pcm"
}
-->
# [Lesson Topic]
![Embed a video here](../../../lesson-template/video-url)
## [Pre-lecture quiz](../../../lesson-template/quiz-url)
[Tok say wetin we go learn]
### Introduction
Tok wetin we go cover
> Notes
### Prerequisite
Which steps dem suppose don cover before dis lesson?
### Preparation
Steps to take before you start dis lesson
---
[Step through content in blocks]
## [Topic 1]
### Task:
Make una work together make una dey improve your codebase small small to fit build the project with shared code:
```html
code blocks
```
✅ Knowledge Check - use dis time to test students knowledge with open questions
## [Topic 2]
## [Topic 3]
🚀 Challenge: Add one challenge make students work on am together for class to improve the project
Optional: add screenshot of the finished lesson UI if e make sense
## [Post-lecture quiz](../../../lesson-template/quiz-url)
## Review & Self Study
**Assignment Due [MM/YY]**: [Assignment Name](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we dey try make am correct, abeg sabi say automated translation fit get some mistakes or no too correct. The original document wey e for im own language still be di real source. If na serious matter, make you use professional human translation. We no go responsible for any wahala or misinterpretation wey fit happen from using dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

25
translations/pcm/lesson-template/assignment.md
Unescape View File

@ -0,0 +1,25 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
"translation_date": "2026-01-08T11:42:01+00:00",
"source_file": "lesson-template/assignment.md",
"language_code": "pcm"
}
-->
# [Assignment Name]
## Instructions
## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | --------- | -------- | ----------------- |
| | | | |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na wetin AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) help translate. Even though we try make am correct, abeg sabi say automated translations fit get some errors or wahala. Di original document wey e dey for im own language na di correct one to trust. If na serious matter, better make person wey sabi human translation do am. We no go take responsibility if person mis-understand or mis-interpret because of dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

52
translations/pcm/memory-game/README.md
Unescape View File

@ -0,0 +1,52 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "ff47271e53637b2ba6ba72ad2b70f6d7",
"translation_date": "2026-01-08T11:28:22+00:00",
"source_file": "memory-game/README.md",
"language_code": "pcm"
}
-->
Dis na [Next.js](https://nextjs.org) project wey dem bootstrapped wit [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run di development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) wit your browser to see di result.
You fit start to edit di page by modifying `app/page.js`. Di page go auto-update as you dey edit di file.
Dis project dey use [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), one new font family for Vercel.
## Learn More
To learn more about Next.js, make you check di following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - interactive Next.js tutorial.
You fit also check [di Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions dey welcome!
## Deploy on Vercel
Di easiest way to deploy your Next.js app na to use di [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from di creators of Next.js.
Check our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we dey try make everything correct, abeg understand say automated translations fit get mistake or no too correct. The original document wey e dey for im own language na the correct one. If na serious matter, better make human expert translate am. We no go responsible for any misunderstanding wey fit happen because of this translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

193
translations/pcm/quiz-app/README.md
Unescape View File

@ -0,0 +1,193 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5301875c55bb305e6046bed3a4fd06d2",
"translation_date": "2026-01-08T11:15:28+00:00",
"source_file": "quiz-app/README.md",
"language_code": "pcm"
}
-->
# Quiz app
These quizzes na di pre- and post-lecture quizzes for di data science curriculum for https://aka.ms/webdev-beginners
## Adding a translated quiz set
Add quiz translation by creating matching quiz structures for di `assets/translations` folders. Di canonical quizzes dey for `assets/translations/en`. Di quizzes don break into different groupings. Make sure say di numbering align with di correct quiz section. Dis curriculum get 40 quizzes total, and di count dey start for 0.
<details>
<summary>Here's the shape of a translation file:</summary>
```
[
{
"title": "A title",
"complete": "A complete button title",
"error": "An error message upon selecting the wrong answer",
"quizzes": [
{
"id": 1,
"title": "Title",
"quiz": [
{
"questionText": "The question asked",
"answerOptions": [
{
"answerText": "Option 1 title",
"isCorrect": true
},
{
"answerText": "Option 2 title",
"isCorrect": false
}
]
}
]
}
]
}
]
```
</details>
After you don edit di translations, edit di index.js file wey dey di translation folder to import all di files wey follow di conventions for `en`.
Edit di `index.js` file wey dey `assets/translations` to import di new translated files.
For example, if your translation JSON dey for `ex.json`, make 'ex' di localization key, then put am as e dey below to import am
<details>
<summary>index.js</summary>
```
import ex from "./ex.json";
// if 'ex' is localization key then enter it like so in `messages` to expose it
const messages = {
ex: ex[0],
};
export default messages;
```
</details>
## Run the Quiz App locally
### Prerequisites
- GitHub account
- [Node.js and Git](https://nodejs.org/)
### Install & Setup
1. Create repository from dis [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft)
1. Clone your new repository, and waka go quiz-app
```bash
git clone https://github.com/your-github-organization/repo-name
cd repo-name/quiz-app
```
1. Install di npm packages & dependencies
```bash
npm install
```
### Build the app
1. To build di solution, run:
```bash
npm run build
```
### Start the App
1. To run di solution, run:
```bash
npm run dev
```
### [Optional] Linting
1. To make sure say di code dey linted, run:
```bash
npm run lint
```
## Deploy the Quiz-app to Azure
### Prerequisites
- Azure Subscription. Sign up for one free [here](https://aka.ms/azure-free).
_Cost Estimate to deploy dis quiz-app: FREE_
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
Once you don sign in for Azure through di link above, select subscription and resource group then:
- Static Web App details: Put name and select hosting plan
- GitHub Login: Set your deployment source as GitHub then log in and fill di required fields for di form:
- *Organization* – Choose your organization.
- *Repository* – Select di Web Dev for Beginners curriculum repository.
- *Branch* - Select branch (main)
- Build Presets: Azure Static Web Apps dey use detection algorithm to detect di framework wey your app use.
- *App location* - ./quiz-app
- *Api location* -
- *Output location* - dist
- Deployment: Click 'Review + Create', then 'Create'
Once you deploy am, workflow file go dey created for *.github* directory for your repo. This workflow file get instructions for events wey go trigger re-deployment of di app to Azure, example, _a **push** to branch **main**_ etc.
<details>
<summary>Example Workflow File</summary>
Na example be dis of how GitHub Actions workflow file fit be:
name: Azure Static Web Apps CI/CD
```
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: "quiz-app" # App source code path
api_location: ""API source code path optional
output_location: "dist" #Built app content directory - optional
```
</details>
- Post-Deployment: After deployment complete, click 'Go to Deployment' then 'View app in browser'.
Once your GitHub Action (workflow) don run successfully, refresh di live page to see your application.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na so AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate am. Even though we try make e accurate, abeg sabi say automated translation fit get some mistake or no too correct. Original document wey dey im own language na di true source wey you suppose trust. For important matter, make person wey sabi do professional human translation do am. We no responsible if you no understand or if you misunderstand anything wey come from dis translation.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

859
translations/te/1-getting-started-lessons/1-intro-to-programming-languages/README.md
Unescape View File

@ -0,0 +1,859 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-08T20:04:20+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "te"
}
-->
# ప్రోగ్రామింగ్ భాషల పరిచయం మరియు ఆధునిక డెవలపర్ టూల్స్
అరేరా, భవిష్యత్ డెవలపర్! 👋 నేను ప్రతి రోజు నాకు గడిచేప్పుడు చలికాలం తలెత్తించే ఒక విషయం చెప్పనా? మీరు కనుగొనబోతున్నారు ప్రోగ్రామింగ్ కేవలం కంప్యూటర్ల గురించినది కాదు – అది మీ అద్భుతమైన ఆలోచనలను సజీవం చేసే నిజమైన సూపర్ పవర్స్ గురించి!
మీరు మీ ఇష్టమైన యాప్ ఉపయోగిస్తున్నప్పుడు ఆ క్షణం గుర్తుందా? మీరు ఒక బటన్ నొక్కగానే ఏదైనా అసాధారణమయిన వింత జరిగింది అని అనిపించే క్షణం, మీరు "వావ్, వారు అది ఎలా చేశారు?" అని ఆలోచించేది. సరే, మీరు లాంటివారు ఒకరు – కావచ్చు వారి ఇష్టమైన కాఫీ షాపులో రాత్రి 2 గంటలకు మూడవ ఎస్ప్రెస్‌తో కూర్చొని – ఆ వింత సృష్టించిన కోడ్‌ను రాయడం జరిగింది. మరియు ఇది మీ మస్తిష్కాన్ని పేలుస్తుంది: ఈ పాఠం ముగింపు వరకు, వారు ఎలా చేశారో అర్థం చేసుకోవడమే కాక, మీరు దాన్ని ప్రయత్నించాలని చలిస్తున్నాడు!
చూడండి, ప్రోగ్రామింగ్ ఇప్పుడు మీరు భయంగా అనిపించినట్లైనా నాకు బాగా తెలుసు. నేను మొదలు పెట్టినప్పుడు నిజంగా నేను అనుకున్నాను మీరు గణితగురు గారికీ ఐదేళ్ల వయస్సు నుండి కోడింగ్ చేస్తుందనుకున్నాను. కానీ నాకు నా దృష్టిని పూర్తిగా మార్చిన విషయం ఇది: ప్రోగ్రామింగ్ అంటే కొత్త భాషలో సంభాషణ నేర్చుకోవడం లాంటిది. మీరు "హలో" మరియు "థాంక్ యూ" తో మొదలు పెడతారు, ఆ తర్వాత కాఫీ ఆర్డర్ చేయడానికీ చేరుకుంటారు, ఇంకా మీరు తెలుసకుండానే మీరంతా తాత్త్విక చర్చల్లో పాల్గొంటున్నారు! కానీ ఇక్కడ మీరు కంప్యూటర్లతో సంభాషిస్తున్నారు, నిజంగా వాళ్లు మీరు చేసిన పొరపాట్లను ఎప్పుడూ న్యాయించరు మరియు మళ్లీ ప్రయత్నించడానికి ఎప్పుడూ ఉత్సాహంగా ఉంటారు!
ఈ రోజు, ఆధునిక వెబ్ డెవలప్మెంట్‌ను సాధ్యం చేసే అత్యద్భుతమైన టూల్స్ ని పరిశీలించబోతున్నాము, ఇవి చాలా ఇబ్బందిదాయకం కాకుండా అలూజిపోతాయి. నేను చెబుతున్నది Netflix, Spotify మరియు మీ ఇష్టమైన ఇండి యాప్ స్టూడియోలో డెవలపర్లు ప్రతిరోజు ఉపయోగించే అదే ఎడిటర్లు, బ్రౌజర్లు మరియు వర్క్‌ఫ్లోలు. మరియు ఇది మీకు సంతోష డ్యాన్స్ చేయించే భాగం: ఈ మోస్ట్ ప్రొఫెషనల్ గ్రేడ్, ఇండస్ట్రీ-స్టాండర్డ్ టూల్స్ చాలా కాలిగా ఉచితం!
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.te.png)
> స్కెచ్‌నోట్ [Tomomi Imura](https://twitter.com/girlie_mac) రూపొందించారు
```mermaid
journey
title మీ ప్రోగ్రామింగ్ ప్రయాణం ఈ రోజు
section కనుగొనండి
ప్రోగ్రామింగ్ అంటే ఏమిటి: 5: You
ప్రోగ్రామింగ్ భాషలు: 4: You
సాధనాల అవలోకనం: 5: You
section అన్వేషించు
కోడ్ ఎడిటర్లు: 4: You
బ్రౌజర్లు & డెవ్‌టూల్స్: 5: You
కమాండ్ లైన్: 3: You
section సాధన
భాష డిటెక్టివ్: 4: You
సాధన అన్వేషణ: 5: You
సముదాయ సంబంధం: 5: You
```
## మీరు ఇప్పటికే ఏమి తెలుసుకున్నారో చూద్దాం!
మనం రसंభరించడానికి ముందే, ఈ ప్రోగ్రామింగ్ ప్రపంచం గురించి మీరు ఇప్పటికే ఏమి తెలుసుకున్నారో నేను ఆసక్తిగా ఉన్నాను. మరియు వినండి, మీరు ఈ ప్రశ్నలను చూస్తూ "నేను అసలే ఏమీ తెలియలేదు" అని అనుకుంటే అది సకలంగా, అది పరిపూర్ణం! అంటే మీరు పూర్తిగా సరైన ప్రదేశంలో ఉన్నారు. ఈ క్విజ్ ని వ్యాయామం ముందు సన్నాహకంగా భావించండి – మనం మన మెదడ్ను మాత్రమే వేడి చేసుకొంటున్నాము!
[పూర్వ పాఠం క్విజ్ చేయండి](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
## మనం కలిసి ప్రయాణించబోతున్న సాహసం
బాగుంది, ఈ రోజు మనం ఏమి అన్వేషించబోతున్నామో నేను నిజమనస్ఫూర్తితో ఉత్సాహంగా ఉన్నాను! నిజంగా, కొంతమంది కాన్సెప్ట్లు మీరు అర్థం చేసుకున్నప్పుడు మీ ముఖం చూడాలని నేను కోరుకుంటున్నాను. ఇక్కడ మనం కలిసి చేసే అద్భుతమైన ప్రయాణం:
- **ప్రోగ్రామింగ్ అంటే ఏమిటి (మరియు ఇది ఎందుకు అతి ఫఫ్ coolest విషయం!)** – కోడ్ అనేది మీ చుట్టూ ఉన్న ప్రతిదీ నిర్వహించుకునే కనువిప్పుగా కూడానపుడు కనిపించని మాంత్రిక శక్తి అని మనం కనుగొంటాం, సోమవారం ఉదయం అని తెలిసి అలారం, లేదా మీ Netflix ప్రతిపాదనలు చూసి సరైన ఆ గమనాన్ని మార్చిన అల్గోరిథం వరకు
- **ప్రోగ్రామింగ్ భాషలు మరియు వాటి అద్భుతమైన వ్యక్తిత్వాలు** – ప్రతి వ్యక్తి విభిన్న సూపర్ పవర్స్ మరియు సమస్యల పరిష్కార మార్గాలను కలిగి ఉండే పార్టీకి మీరు భారీగా అడుగుపెడుతున్నారని ఊహించండి. అదే ప్రోగ్రామింగ్ భాషల ప్రపంచం, మరియు మీరు వాటిని కలవడం ఆనందిస్తారు!
- **డిజిటల్ మాంత్రికత్వం జరగడానికి ప్రాథమిక నిర్మాణ బ్లాక్‌లు** – ఈ భాగాలు అత్యుత్తమ సృష్టిశక్తివంతమైన LEGO సెట్ల లాంటివి. మీరు ఇవి ఎలా కలిసిపోతాయో అర్థం చేసుకున్నప్పుడు, మీరు మీ ఊహాతీత కలలను నిజం చేసుకోవచ్చు
- **ప్రొఫెషనల్ టూల్స్ – వాటిని పట్టు కోరిన తర్వాత మీరు వుద్దుమంతుడు చేతికి కొచ్చిన మంత్రదండంతో ఉన్నట్టు అనిపిస్తాయి** – నేను డ్రామా చేస్తున్నట్లు కాదు – ఈ టూల్స్ నిజంగా మీరు సూపర్ శక్తులతో ఉన్నట్టు అనిపిస్తాయి, మరియు ఉత్తమ భాగం? ఇవి ప్రొఫెషనల్స్ ఉపయోగించే వాటే!
> 💡 **ముందుగా भन्नెం**: ఈ రోజు అన్నింటినీ మీ మెమరీలో పెట్టుకునేందుకు యత్నించకండి! ఇప్పడు సరదాగా ఏం సాధ్యమో అందులో ఆ స్ఫూర్తిని మీరు పొందండి. వివరాలు సహజంగానే మాన్నిసులతో సాధన చేస్తూ నిలబడతాయి – ఇదే నిజమైన విద్య!
> మీరు ఈ పాఠాన్ని [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) లో తీసుకోవచ్చు!
## కాబట్టి *ప్రోగ్రామింగ్* అంటే నిజంగా ఏమిటి?
సరే, మిలియన్ డాలర్ల ప్రశ్నను చేధిద్దాం: ప్రోగ్రామింగ్ అంటే నిజంగా ఏమిటి?
నేను చెప్పబోతున్నది ఒక కథ, ఇది నా ఆలోచనను పూర్తిగా మార్చింది. గత వారం, నేను మా స్మార్ట్ TV రిమోట్ ఎలా ఉపయోగించాలో మా అమ్మకు వివరించడానికి ప్రయత్నిస్తున్నాను. నేను "ఎరుపు బటన్ను నొక్కండి, కానీ పెద్ద ఎరుపు బటన్ కాదు, వలపు వైపు చిన్న ఎరుపు బటన్... కాదు, మీ మరొక వలపు... సరే, ఇప్పుడు ఆ బటన్ను రెండు సెకన్ల పాటు పట్టుకోండి, ఒక్క సెకనుకాదు, మూడు సెకన్లకు కాదు..." అని చెప్పుకున్నాను. ఇది మరొకరికి ఇదే అనిపిస్తే? 😅
అదే ప్రోగ్రామింగ్! ఇది చాలా శక్తివంతమైన వస్తువుకు అత్యంత సమగ్రమైన, దశలవారీ ఆదేశాలను ఇచ్చే కళ. కానీ మీరు మీ అమ్మకు వివరిస్తున్నట్లుకాదు (వాళ్లకు "ఏ ఎరుపు బటన్?!" అని అడగటానికి అవకాశం ఉంది), మీరు కంప్యూటర్‌కు వివరిస్తున్నారని భావించండి (అది మీరు చెప్పినదానికే నిజంగా చేస్తుంది, మీరు భావించినది కాకపోయినా).
నేను మొదటిసారి తెలుసుకున్నప్పుడు నా మదిని పేల్చిన విషయం ఇది: కంప్యూటర్లు వాస్తవానికి చాలా సరళంగా ఉంటాయి. అవి కేవలం రెండింటిని మాత్రమే అర్థం చేసుకోగలవు – 1 మరియు 0, అంటే సరే మరియు కాదు లేదా ఆన్ మరియు ఆఫ్. అంతే! కానీ ఇక్కడే మాంత్రికం సాగుతుంది – మేము 1లు మరియు 0లలో మాట్లాడాల్సిన అవసరం లేదు, మేము మెట్రిక్స్‌లో ఉన్నట్లుగా కాదు. అక్కడ **ప్రోగ్రామింగ్ భాషలు** ప్రేరేపిస్తాయి. అవి ప్రపంచంలో అత్యుత్తమ అనువాదకుల్లా ఉన్నాయి, అవి మీ సాధారణ మానవ ఆలోచనలను కంప్యూటర్ భాషలోకి మార్చేస్తాయి.
ఇప్పటికీ ప్రతి రోజు నాకు కదలిక చూపించే విషయం ఇది: మీ జీవితంలో ఉన్న అన్ని డిజిటల్ వస్తువులు ఎవరో మీరు లాంటి వారిచే ప్రారంభించబడ్డాయి, కాఫీ గ్లాస్‌తో పిజామాల్లో కూర్చొని తమ ల్యాప్టాప్‌లో కోడ్ టైప్ చేస్తూ. ఆ Instagram ఫిల్టర్ మీ అందమైన రూపాన్ని మలచింది? ఎవరో అది కోడ్ చేశారు. మీరు కొత్త ఇష్టమైన పాటకు దారితీసిన సూచన? ఒక డెవలపర్ ఆ అల్గోరిథాన్ని తయారుచేశాడు. మీ స్నేహితులతో డిన్నర్ బిల్లును భాగిస్తే సహాయం చేసే యాప్? అవును, ఎవరో "ఇది చికాకుగా ఉంది, నేను దీన్ను సరి చేసుకుంటాను" అని ఆలోచించి... తేడా చూపించారు!
మీరు ప్రోగ్రామ్ నేర్చుకుంటున్నప్పుడు, మీరు కేవలం కొత్త నైపుణ్యం నేర్చుకోకపోక, చాలా అద్భుతమైన స‌మ‌స్య‌ల ప‌రిష్కార‌కుల సమాజంలో భాగమవుతారు. వారు రోజువారీగా "నేను ఎవరో ఒకరి రోజు కొంచెం మెరుగుపర్చే ఏదైనా నిర్మిస్తే ఎలా ఉంటుంది?" అని ఆలోచిస్తారు. నిజంగా, అంతా కంటే కూలర్ ఏం ఉండాలి?
✅ **మంచి చిట్కా**: మీరు అల్ప సమయం ఉన్నపుడు చూస్తూ ఉండే ఒక అద్భుత విషయం – ప్రపంచంలో మొదటి కంప్యూటర్ ప్రోగ్రామర్ ఎవరో కనిపెట్టండి! నేను ఒక సూచన ఇస్తాను: మీరు ఊహించలేదు! ఆ వ్యక్తి వెనుక కథ అందంగా ఉంది మరియు ప్రోగ్రామింగ్ సృష్టాత్మక సమస్య పరిష్కారం మరియు స్థితి దాటి ఆలోచించడం ఎప్పుడూ ఎంత ప్రాధాన్యం ఉన్నదో చూపిస్తుంది.
### 🧠 **చెక్-ఇన్ సమయం: మీరు ఎలా అనుభూతి చెందుతున్నారు?**
**కొంత సమయం తీసుకుని ఆలోచించండి:**
- "కంప్యూటర్లకు ఆదేశాలు ఇవ్వడం" ఆలోచన ఇప్పుడు మీకు అర్థమైంది?
- రోజువారీ పని మీరు ప్రోగ్రామింగ్‌తో ఆటోమేట్ చేయాలని అనుకుంటున్నారా?
- ఈ మొత్తం ప్రోగ్రామింగ్ విషయం గురించి మీ మదిలో ఏమేమి ప్రశ్నలు ఉన్నాయంటే?
> **గమనించండి**: కొన్నిసార్లు కొంత కాన్సెప్ట్లు తుమ్మాకు మాదిరిగా అనిపించవచ్చు. ప్రోగ్రామింగ్ నేర్చుకోవడం ఒక కొత్త భాష నేర్చుకోవడంలాంటిది – దిమ్మతిని ఆ నలుపు మార్గాలను నిర్మించడానికి సమయం పడుతుంది. మీరు అద్భుతంగా చేస్తున్నారు!
## ప్రోగ్రామింగ్ భాషలు వేర్వేరు రుచుల మాంత్రికత లాంటివి
సరే, ఇది కొంచెం విచిత్రంగా అనిపించవచ్చు, కానీ నాతో కలిసి ఉండండి – ప్రోగ్రామింగ్ భాషలు సంగీత రకాలు లాంటివి. మీరు ఆలోచించండి: జాజ్, ఇది నిగద మరియు ఆ Improvisational, రాక్ శక్తివంతమైనదిగా మరియు నేరుగా, క్లాసికల్ షైలీ ప్రకృతి మరియు నిర్మాణాత్మకంగా, హిప్-హాప్ సృజనాత్మకంగా మరియు వ్యక్తిగతంగా ఉంటుంది. ప్రతి శైలి తన స్వంత వాతావరణం, అభిమానం ఉన్న సమాజం కలిగి ఉంటుంది, మరియు ఒక్కొక్కటి వేరే వాతావరణానికి సరిపోయే అభిరుచికి సరిపోతుంది.
ప్రోగ్రామింగ్ భాషలు కూడా అదే విధంగా పనిచేస్తాయి! మీరు ఒక ఆనందకర మొబైల్ గేమ్‌ను నిర్మించడానికి జాబితా మౌలిక డేటాను చెక్ చేయడం కోసం భాష వాడరు, అలాగే మీరు యోగ క్లాసులో డెత్ మెటల్ ప్లే చేయరు (పైనన్నట్లు ఎక్కువగా యోగ క్లాసులు కదా! 😄).
కానీ ప్రతిసారీ నాకు మీ మదిని పేల్చే విషయం ఇది: ఈ భాషలు ప్రపంచంలోనే అత్యంత సహనమైన, అద్భుతమైన అనువాదకులను మీ తర్వాత కూర్చొనిపెడతాయి. మీరు మానవ మెదడ్కి సహజంగా అనిపించే విధంగా ఆలోచనలు వ్యక్తపరిచవచ్చు, మరియు అవి గొప్పగా క్లిష్టమైన పనులన్నింటినీ కంప్యూటర్లు అర్థం చేసుకునే 1లు మరియు 0లలోకి అనువదిస్తాయి. ఇది మీరు ఒక స్నేహితుడిని కలిగి ఉండటమిలా, వారి ఇద్దరు "మానవ సృజనశక్తి" మరియు "కంప్యూటర్ లాజిక్"లో ఫ్లూ, ఎప్పుడూ అలసిపోరు, కాఫీ విరామాలు అవసరం లేదు, మరియు మీరు ఒకే ప్రశ్నను రెండుసార్లు అడగడం వల్ల న్యాయించరు!
### ప్రసిద్ధి గాంచిన ప్రోగ్రామింగ్ భాషలు మరియు వాటి ఉపయోగాలు
```mermaid
mindmap
root((ప్రోగ్రామింగ్ భాషలు))
వెబ్ డెవలప్‌మెంట్
జావాస్క్రిప్ట్
ఫ్రంటెండ్ మ్యాజిక్
ఇంటరాక్టివ్ వెబ్‌సైట్స్
టైప్‌స్క్రిప్ట్
జావాస్క్రిప్ట్ + టైపులు
ఎంటర్‌ప్రైజ్ యాప్‌లు
డేటా & ఏఐ
పైథాన్
డేటా సైన్స్
మెషీన్ లెర్నింగ్
ఆటోమేషన్
ఆర్
గణాంకాలు
పరిశోధన
మొబైల్ యాప్స్
జావా
ఆండ్రాయిడ్
ఎంటర్‌ప్రైజ్
స్విఫ్ట్
ఐఓఎస్
ఆపిల్ ఎకోసిస్టమ్
కోట్లిన్
ఆధునిక ఆండ్రాయిడ్
క్రాస్స్-ప్లాట్‌ఫామ్
సిస్టమ్స్ & పనితీరు
C++
గేమ్స్
పనితీరు సున్నితమైనవి
రస్ట్
మెమరీ సేఫ్టీ
సిస్టమ్ ప్రోగ్రామింగ్
గో
క్లౌడ్ సర్వీసెస్
స్కేలబుల్ బ్యాక్‌ఎండ్
```
| భాష | ఉత్తమంగా ఉపయోగించే ప్రాంతం | ఆ భాష ఎందుకు ప్రముఖం? |
|----------|----------|------------------|
| **JavaScript** | వెబ్ డెవలప్మెంట్, యూజర్ ఇంటర్‌ఫేస్‌లు | బ్రౌజర్లలో నడుస్తుంది, ఇంటరాక్టివ్ వెబ్‌సైట్లకు శక్తివంతం చేస్తుంది |
| **Python** | డేటా సైన్స్, ఆటోమేషన్, AI | చదవడంలో సులభం, శక్తివంతమైన లైబ్రరీలు ఉన్నాయి |
| **Java** | ఎంటర్ప్రైజ్ అప్లికేష‌న్లు, ఆండ్రాయిడ్ యాప్‌లు | ప్లాట్‌ఫారమ్-ఇండిపెండెంట్, పెద్ద సిస్టమ్‌లకు మన్నించేలా ఉన్నది |
| **C#** | విండోస్ అప్లికేషన్స్, గేమ్ డెవలప్మెంట్ | పవర్ఫుల్ మైక్రోసాఫ్ట్ ఎకోసిస్టమ్ మద్దతు |
| **Go** | క్లౌడ్ సర్వీసులు, బ్యాక్‌ఎండ్ సిస్టమ్‌లు | వేగవంతమైన, సరళమైన, ఆధునిక కంప్యూటింగ్ కొరకు రూపుదిద్దినది |
### హై-లెవల్ వర్సెస్ లో-లెవల్ భాషలు
సరే, ఇది నిజంగా నేను నేర్చుకుంటున్నప్పుడు నా దిమ్మతిని పేల్చిన కాన్సెప్ట్, కాబట్టి నేను మీకు పాపరూపంగా చెప్పేది చెప్పబోతున్నాను – ఇది నాకు ఒక్కసారిగా అర్థమైంది – మరియు నేను ఇంకా ఆశిస్తున్నాను మీరు కూడా అర్థం చేసుకోగలరు!
మీరు ఒక దేశాన్ని సందర్శిస్తున్నారని ఊహించండి, అక్కడ మీరు భాష మాట్లాడలేరు, మరియు అత్యవసరం గా బెస్ట్ రెస్ట్ రూమ్ కనుగొనాలనుకుంటున్నార‌ని (మనంతా అలా అడుగుతున్నాము కదా? 😅):
- **లో-లెవల్ ప్రోగ్రామింగ్** అంటే అక్కడి స్థానిక భాషలో అంతగా బాగా మాట్లాడటం అందుకే మీరు కోణంలో ఉన్న వృద్ధ మహిళతో సంభాషిస్తున్నారు – స్థానిక సంస్కృతి సూచనలు, స్థానిక నాడి అంగాల అన్నిటినీ ఉపయోగిస్తూ. చాలా అద్భుతంగా మరియు సమర్థవంతంగా... మీరు దాన్ని తేలికగా మాట్లాడగలరు అంటే! కానీ మీరు కేవలం బాత్ రూమ్ వెతుకుతుంటే ఇది కొంచెం అతి క్లిష్టంగా అనిపిస్తుంది.
- **హై-లెవల్ ప్రోగ్రామింగ్** అంటే మీ నేలవైపు అద్భుతమైన స్థానిక స్నేహితుడు ఉన్నాడు – మీరు "నాకు బాత్ రూమ్ చాలా అవసరం" అని సాదా ఇంగ్లీష్‌లో చెబుతారు, మరియు వారు అన్ని స్థానిక అర్థాలను మార్చి మీకు సరైన దిశ చూపిస్తారు.
ప్రోగ్రామింగ్ భాషలలో:
- **లో-లెవల్ భాషలు** (Assembly లేదా C వంటి) కంప్యూటర్ యొక్క హార్డ్‌వేర్‌తో చాలా సమగ్ర సంభాషణలు చేయడానికి అనుమతిస్తాయి, కానీ మీరు యంత్రంలాగ ఆలోచించాలి, ఇది… సరే, మనసుకు పెద్ద మార్పు!
- **హై-లెవల్ భాషలు** (JavaScript, Python, లేదా C# వంటి) మీరు మానవుల్లా ఆలోచించేటపుడు, వాళ్లు ఆ యంత్రభాషను వెనుకనుంచి నిర్వహిస్తారు. అదనంగా, వీటికి అద్భుతమైన కమ్యూనిటీలున్నాయి, వారు కొత్తవారిని గుర్తు చేసుకుని సహాయం చేయడానికి ఇష్టపడతారు!
నేను మీరు ఏ భాషలతో మొదలు పెట్టాలని సూచిస్తాను తెలుసా? 😉 హై-లెవల్ భాషలు వాటిలాగానే మీకు ఉండే చెక్కులు లాంటి వాహనాలు, మీరు వీటి నుంచి బయటపడదలుచుకోరు ఎందుకంటే అవి మొత్తం అనుభూతిని ఎంతో ఆహ్లాదకరంగా చేస్తాయి!
```mermaid
flowchart TB
A["👤 మానవ ఆలోచన:<br/>'నేను ఫిబొనాచీ సంఖ్యలను లెక్కించాలనుకుంటున్నాను'"] --> B{భాషా స్థాయి ఎంచుకోండి}
B -->|అధికస్థాయి| C["🌟 జావాస్క్రిప్ట్/పైథాన్<br/>అన్నింటికంటే చదవడం మరియు రాయడం సులువు"]
B -->|తక్కువ స్థాయి| D["⚙️ అసెంబ్లీ/C<br/>నేరుగా హార్డ్వేర్ నియంత్రణ"]
C --> E["📝 వ్రాయండి: fibonacci(10)"]
D --> F["📝 వ్రాయండి: mov r0,#00<br/>sub r0,r0,#01"]
E --> G["🤖 కంప్యూటర్ అర్థం చేసుకోడం:<br/>అనువాదకుడు సంక్లిష్టతను నిర్వహిస్తుంది"]
F --> G
G --> H["💻 అదే ఫలితం:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
style C fill:#e1f5fe
style D fill:#fff3e0
style H fill:#e8f5e8
```
### నేను ఎందుకు హై-లెవల్ భాషలను ఇష్టపడుతున్నానో మీకు చూపిస్తూ ఉన్నాను
సరే, నేను మీకు చూపించబోతున్నట్లు అంశం ఉంది, అది నా హృదయాన్ని హై-లెవల్ భాషల పట్ల ప్రేమలో పడేసింది, కానీ మొదట మీరు నాకు ఒక వాగ్దానం చేయాలి. మీరు ఆ మొదటి కోడ్ ఉదాహరణ చూస్తే, భయపడకండి! అది భయంకరంగా కనిపించడం మూలై ఉంది. ఆ భావం నేను చెబుతున్నది!
మనం ఒకే పనిని రెండు పూర్తిగా వేరు శైలుల్లో రాశాము. రెండూ ఫిబొనాచీ సీక్వెన్స్ అని పిలవబడే ఈ అద్భుత గణిత శ్రేణి సృష్టించబడును – ఇది ప్రతి సంఖ్య రెండు ముందు ఉన్న సంఖ్యల మొత్తం: 0, 1, 1, 2, 3, 5, 8, 13... (మంచి అంశం: మీరు ప్రకృతిలో literally ఈ శ్రేణి అన్ని చోట్ల చూడగలరు – సూర్య గుమ్మడికాయ గింజల మడత, వాటి ఆకారాలు, గెలాక్సీలు ఎలా ఏర్పడతాయో కూడా!)
తేడా చూడడానికి సిద్ధమా? పోదాం!
**హై-లెవల్ భాష (JavaScript) – మానవహృదయానికి అనుకూలంగా:**
```javascript
// దశ 1: ప్రాథమిక ఫిబొనాచ్చి సెటప్
const fibonacciCount = 10;
let current = 0;
let next = 1;
console.log('Fibonacci sequence:');
```
**ఈ కోడ్ ఏమి చేస్తుందో:**
- ఎంత మంది Fibonacci సంఖ్యలు సృష్టించాలో నిర్ధారించడానికి కంకణంగా ఒక స్థిరాంకం ప్రకటించండి
- సీక్వెన్స్‌లో ప్రస్తుత మరియు తదుపరి సంఖ్యలను ట్రాక్ చేయడానికి రెండు వేరియబల్స్‌ను ప్రారంభించండి
- Fibonacci నమూనాను నిర్వచించే మొదటి విలువలను (0 మరియు 1) సెట్ చేయండి
- మన అవుట్‌పుట్‌ను గుర్తించడానికి హెడర్ సందేశాన్ని ప్రదర్శించండి
```javascript
// దశ 2: ఒక లూప్‌తో క్ర‌మాన్ని రూపొందించండి
for (let i = 0; i < fibonacciCount; i++) {
console.log(`Position ${i + 1}: ${current}`);
// క్రమంలో తదుపరి సంఖ్యను లెక్కించండి
const sum = current + next;
current = next;
next = sum;
}
```
**ఇక్కడ ఏమి జరుగుతుందో వివరించడం:**
- మన సీక్వెన్స్‌లోని ప్రతి స్థానాన్ని `for` లూప్ ఉపయోగించి తిరగండి
- ప్రతి సంఖ్యను దాని స్థానంతో టెంప్లేట్ లిటరల్ ఫార్మాట్‌తో చూపించండి
- ప్రస్తుత మరియు తదుపరి విలువలను జోడించి తదుపరి Fibonacci సంఖ్యను లెక్కించండి
- తదుపరి రౌండ్‌కు వెళ్లడానికి ట్రాకింగ్ వేరియబల్స్‌ను అప్‌డేట్ చేయండి
```javascript
// దశ 3: ఆధునిక ఫంక్షనల్ విధానం
const generateFibonacci = (count) => {
const sequence = [0, 1];
for (let i = 2; i < count; i++) {
sequence[i] = sequence[i - 1] + sequence[i - 2];
}
return sequence;
};
// ఉపయోగం ఉదాహరణ
const fibSequence = generateFibonacci(10);
console.log(fibSequence);
```
**పైన, మనం:**
- ఆధునిక ఎరో ఫంక్షన్ సింటాక్స్ను ఉపయోగించి పునఃఉపయోగించదగిన ఫంక్షన్ సృష్టించాము
- ఒక్కొక్కటి చూపించకుండా మొత్తం శ్రేణిని నిల్వ చేసేందుకు ఒక యారే నిర్మించాము
- గత విలువల నుండి ప్రతి కొత్త సంఖ్యను లెక్కించడానికి యారే ఇండెక్సింగ్ ఉపయోగించాము
- వేరే భాగాల్లో స్వేచ్ఛగా ఉపయోగించడానికి పూర్తి శ్రేణిని తిరిగి ఇచ్చాము
**లో-లెవల్ భాష (ARM اسمبلی) – కంప్యూటర్ అనుకూలంగా:**
```assembly
area ascen,code,readonly
entry
code32
adr r0,thumb+1
bx r0
code16
thumb
mov r0,#00
sub r0,r0,#01
mov r1,#01
mov r4,#10
ldr r2,=0x40000000
back add r0,r1
str r0,[r2]
add r2,#04
mov r3,r0
mov r0,r1
mov r1,r3
sub r4,#01
cmp r4,#00
bne back
end
```
JavaScript వర్షన్ ఇంగ్లీష్ సూచనల లా చదవబడుతుందని గమనించండి, Assembly వర్షన్ కంప్యూటర్ ప్రాసెసర్‌ను నేరుగా నియంత్రించే సంకేతాల‌ను ఉపయోగిస్తుంది. రెండూ అదే పనిని చేస్తాయి, కానీ హై-లెవల్ భాష మానవులకు ప్రోగ్రామ్ రాయడం, అర్థం చేసుకోవడం మరియు నిర్వహించడం చాలా సులభం.
**మీ గుర్తించగల ముఖ్య తేడాలు:**
- **చదవడంలో సౌలభ్యం**: JavaScript‌లో 'fibonacciCount' వంటి వివరణాత్మక పేర్లను ఉపయోగిస్తే, Assemblyలో 'r0', 'r1' వంటి సంకేతాలే ఉన్నాయి
- **వ్యాఖ్యలు**: హై-లెవెల్ భాషలు స్వీయ-డాక్యుమెంటేషన్ చేసేలా వివరణాత్మక వ్యాఖ్యలను ప్రోత్సహిస్తాయి
- **సంఘటన**: జావాస్క్రిప్ట్ యొక్క తార్కిక ప్రవాహం మనుషులు సమస్యలను దశలవారీగా ఎలా ఆలోచిస్తారో అలాగే ఉంటుంది
- **నిర్వహణ**: విభిన్న అవసరాలకు జావాస్క్రిప్ట్ వర్షన్‌ను నవీకరించడం సులభం మరియు స్పష్టంగా ఉంటుంది
✅ **ఫిబొనాచీ వరుస గురించి**: ఈ అద్భుతమైన సంఖ్యా నమూనా (ప్రతి సంఖ్య తన ముందటి రెండు సంఖ్యల మొత్తానికి సమానం: 0, 1, 1, 2, 3, 5, 8...) ప్రకృతిలో *ప్రతిటిన్నిట్లో* కనిపిస్తుంది! మీరు దీన్ని సన్‌ఫ్లవర్ స్పైల్స్, పైన్కోన్ నమూనాలు, నాటిలస్ షెల్స్ వంకర పట్టే విధానం, మరియు మరింతగా చెట్ల శాఖలు పెరుగుతుంటే కనిపిస్తాయి. గణితం మరియు కోడ్ సహాయంతో మనం ప్రకృతిలో అందాన్ని సృష్టించేందుకు ఉపయోగించే నమూనాలను ఎలా అర్థం చేసుకోవచ్చో మరియు తిరిగి సృష్టించవచ్చో చూడటం నిజంగా ఆశ్చర్యకరం!
## మ్యాజిక్ జరిగే బిల్డింగ్ బ్లాక్స్
ఇప్పుడైతే మీరు ప్రోగ్రామింగ్ భాషలు ఎలా అమలు అవుతాయో చూశారు, ప్రతి విధమైన ప్రోగ్రామ్ లో ఉండే మౌలిక భాగాలను విప్పి చూద్దాం. ఇవి మీ ఇష్టమైన రెసిపీలోని అత్యవసర పదార్ధాల్లా భావించండి – ప్రతి ఒకటి ఏమి చేస్తుంది అని మీకు అర్థం అవ్వగానే, మీరు చాలా భాషల్లో కోడ్ చదవగలుగుతారు మరియు రాయగలుగుతారు!
ఇది ప్రోగ్రామింగ్ వ్యాకరణం నేర్చుకోవటంతో కొంత సమానం. స్కూల్లో నామవాచకాలు, క్రియలు మరియు వాక్యాలు వేసే విధానం నేర్చుకున్నప్పుడు గమనించారా? ప్రోగ్రామింగ్ కి కూడా తానే వేరే వ్యాకరణం ఉంటుంది, నిజంగా ఇది ఆంగ్ల వ్యాకరణ కంటే ఎంతో లాజికల్ మరియు క్షమాపణ కలిగినది! 😄
### స్టేట్మెంట్స్: దశలవారీ దిశానిర్దేశాలు
ముందుగా **స్టేట్మెంట్స్** తో ప్రారంభిద్దాం – ఇవి మీ కంప్యూటర్‌తో సంభాషణలో విడిదు వాక్యాలు లాగానే ఉంటాయి. ప్రతి స్టేట్మెంట్ కంప్యూటర్ కొరకు ఒక నిర్దిష్ట విషయం చేయమని చెబుతుంది, దిశానిర్దేశాలు ఇచ్చేలా: “ఇక్కడ ఎడమ తిప్పండి,” “ఎరుపు లైట్ వద్ద ఆపు,” “ఆ స్థలంలో పార్క్ చేయండి.”
స్టేట్మెంట్స్ నాకు ఇష్టమయ్యేది అవి సాధారణంగా చదవగలిగే విధంగా ఉండటం. దీన్ని చూశారా:
```javascript
// ఒక్క చర్యలను నిర్వహించే ప్రాథమిక ప్రకటనలు
const userName = "Alex";
console.log("Hello, world!");
const sum = 5 + 3;
```
**ఈ కోడ్ ఏమి చేస్తుంది:**
- యూజర్ పేరును నిల్వ చేయడానికి ఒక కాంస్టెంట్ వేరియబుల్‌ను ప్రకటించండి
- కన్సోల్ లో ఒక అభివందన సందేశాన్ని ప్రదర్శించండి
- గణిత చర్య ఫలితాన్ని లెక్కించండి మరియు నిల్వ చేయండి
```javascript
// వెబ్ పేజీలతో పరస్పరం చేసే ప్రకటనలు
document.title = "My Awesome Website";
document.body.style.backgroundColor = "lightblue";
```
**దశలవారీగా ఇది జరుగుతున్నది:**
- బ్రౌజర్ ట్యాబ్ లో కనిపించే వెబ్ పేజీ శీర్షికను మార్చండి
- మొత్తం పేజీ బ్యాక్‌గ్రౌండ్ కలర్ మార్చండి
### వేరియబుల్స్: మీ ప్రోగ్రామ్ యొక్క మెమొరీ సిస్టమ్
సరే, **వేరియబుల్స్** నేర్పించడంలో నాకు చాలా ఇష్టం కలిగిన కాన్సెప్టులు – ఎందుకంటే అవి మీరు ప్రతిరోజూ ఉపయోగించే వాటిలాగే ఉంటాయి!
మీ ఫోన్ కన్టాక్ట్ లిస్ట్ పై ఒకసారి ఆలోచించండి. మీరు అందరి ఫోన్ నంబర్‌ను గుర్తు పెట్టుకోరు – బదులుగా “తల్లి,” “చుట్టువారు,” లేదా “రాత్రి 2 గంటల వరకు డెలివరీ చేసే పిజ్జా ప్లేస్” అని సేవ్ చేస్తారు, మీ ఫోన్ ఆ నంబర్లను గుర్తుంచుకుంటుంది. వేరియబుల్స్ కూడా అలాగే పనిచేస్తాయి! అవి లేబుల్ ఉన్న కలవాణ్లు లాంటి వాటి, మీ ప్రోగ్రామ్ సమాచారం నిల్వ చేసి, తరువాత అర్థమయ్యే పేరుతో తిరిగి తీసుకొనే అవకాశం కలిగి ఉంటాయి.
ఇది ఎంతో చక్కగా ఎలా సింపుల్ అంటే చూసి తీరండి:
```javascript
// దశ 1: ప్రాథమిక చారికలు సృష్టించడం
const siteName = "Weather Dashboard";
let currentWeather = "sunny";
let temperature = 75;
let isRaining = false;
```
**ఈ కాన్సెప్టులను అర్థం చేసుకోవటం:**
- మార్పు కాకుండా ఉండే విలువలను `const` లో నిల్వ చేయండి (ఉదాహరణకు సైట్ పేరు)
- ప్రోగ్రామ్ అంతటా మారవచ్చు మాత్రమే విలువలకు `let` ఉపయోగించండి
- వేరియబుల్స్ కు వేర్వేరు డేటా రకాలు: స్ట్రింగ్స్ (పాఠ్యం), సంఖ్యలు, బూలియన్‌లు (true/false) ఇవ్వండి
- అర్థం వచ్చే వివరణాత్మక పేర్లు ఎంచుకోండి
```javascript
// దశ 2: సంబంధిత డేటాను సమూహం చేయడానికి వస్తువులతో పని చేయడం
const weatherData = {
location: "San Francisco",
humidity: 65,
windSpeed: 12
};
```
**పై ఉదాహరణల్లో:**
- సంబంధిత వాతావరణ సమాచారాన్ని ఒక ఆబ్జెక్టుగా సృష్టించాం
- ఎన్నో డేటా అంశాలను ఒక వేరియబుల్ పేరులో సమీకరించాం
- ప్రతి అంశానికి క్లియర్ గా లేబుల్ ఇవ్వడానికి కీ-వ్యతిరేకమైన జోడీలు ఉపయొగించాం
```javascript
// దశ 3: మாறుకొనే వేరియబుల్స్ ఉపయోగించడం మరియు నవీకరణ
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);
// మార్పు చెందగల వేరియబుల్స్ ను నవీకరించడం
currentWeather = "cloudy";
temperature = 68;
```
**ప్రతి భాగాన్ని అర్థం చేసుకుందాం:**
- టెంప్లేట్ లిటరల్స్ `${}` సింటాక్స్ తో సమాచారం ప్రదర్శించండి
- ఆబ్జెక్ట్ లక్షణాలకు డాట్ నోటేషన్ (`weatherData.windSpeed`) ఉపయోగించండి
- మారే పరిస్థితుల కోసం `let` తో ప్రకటించిన వేరియబుల్స్ ని నవీకరించండి
- అర్థవంతమైన సందేశాల కోసం అనేక వేరియబుల్స్ కలిపి ఉపయోగించండి
```javascript
// దశ 4: మర씬 శుభ్రంగా ఉండేందుకు ఆధునిక డెస్ట్‌రక్చరింగ్
const { location, humidity } = weatherData;
console.log(`${location} humidity: ${humidity}%`);
```
**మీకు తెలుసుకోవాల్సినవి:**
- డీ-స్ట్రక్చరింగ్ అసైన్మెంట్ ద్వారా ఆబ్జెక్టుల ప్రత్యేక లక్షణాలను తీసుకోండి
- ఆబ్జెక్ట్ కీస్ పేరుతో కొత్త వేరియబుల్స్ సృష్టించండి
- పునరావృత డాట్ నోటేషన్ దాటించి కోడ్ ను సరళీకరించండి
### కంట్రోల్ఫ్లో: మీ ప్రోగ్రామ్‌కు ఆలోచించడం నేర్పించడం
సరే, ఇది ప్రోగ్రామింగ్‌ను మనసు చిందించే స్థాయికి తీసుకునే భాగం! **కంట్రోల్ఫ్లో** అంటే మీ ప్రోగ్రామ్ క్రియాశీలంగా, తెలివిగా నిర్ణయాలు తీసుకునేలా నేర్పించడం, మీరు ప్రతిరోజు ఎటువంటి ఆలోచన లేకుండా చేయే విధంగా.
ఈ ఉదయం మీరు ఇలా అనుకుంటారు అనుకోండి: “వర్షం పడితే, చెట్లగాలి తీసుకుందా; చలి అయితే జాకెట్ ధరించాలి; ఆలస్యం అయితే బ్రేక్‌ఫాస్ట్ మిస్ చేసి, కాఫీ తాగుదాం.” మేధస్సు రోజంతా పన్నెండు సార్లు ఇలాంటి “ఇఫ్ఎఫ్” లాజిక్ పాటిస్తుంది!
ఇది ప్రోగ్రామ్స్‌ని ఇంటెలిజెంట్ గా జీవితం లాంటిదిగా మార్చుతుంది, బోర్ అయ్యే స్క్రిప్ట్ లాగా కాకుండా. అవి పరిస్థితిని చూసి, ఏమి జరుగుతుందో అంచనా వేస్తాయి, తగినట్టుగా ప్రతిస్పందిస్తాయి. మీ ప్రోగ్రామ్ కి మేధస్సు ఇచ్చినట్లుగా ఇందులో అర్థం.
అదృష్టవశాత్తు, ఇది ఎంత బాగున్నదో చూపిస్తాను:
```javascript
// దశ 1: మౌలిక షరతు తర్కం
const userAge = 17;
if (userAge >= 18) {
console.log("You can vote!");
} else {
const yearsToWait = 18 - userAge;
console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}
```
**ఈ కోడ్ చేస్తుంది:**
- యూజర్ వయసు ఓటినిడిగా ఉండడానికి సరిపోతుందో తనిఖీ చేస్తుంది
- షరతు ఫలితం ఆధారంగా వేరువేరు కోడ్ బ్లాక్స్ అమలు అవుతాయి
- 18 కి కింద అయితే ఓటు హక్కు వచ్చే వరకు ఎంత సమయం ఉందో లెక్కించాలి, చూపించాలి
- ప్రతి పరిస్థితికి సహాయక సూచనను అందిస్తుంది
```javascript
// దశ 2: లాజికల్ ఆపరేటర్లతో బహు షరతులు
const userAge = 17;
const hasPermission = true;
if (userAge >= 18 && hasPermission) {
console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
console.log("You need parent permission to enter.");
} else {
console.log("Sorry, you must be at least 16 years old.");
}
```
**ఇక్కడ ఏమవుతుందో విభజించి చెప్పాలి:**
- `&&` (మరియు) ఆపరేటర్ తో అనేక షరతులను కాంబైన్ చేయండి
- బహుళ పరిస్థితుల కోసం `else if` తో ఒక హైరార్కీ సృష్టించండి
- అన్ని అనుకున్న కేసులను హ్యాండ్ిల్ చేయడానికి చివరిగా `else` స్టేట్మెంట్ వాడండి
- వేర్వేరు పరిస్థితులకై స్పష్టమైన సూచనలు ఇవ్వండి
```javascript
// దశ 3: త్రిబాహువక ఆపరేటర్‌తో సంక్షిప్త షరతు
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);
```
**మీరు గుర్తుంచుకోవాల్సింది:**
- సాధారణ రెండు ఎంపికల పరిస్థితుల కోసం టర్నరీ ఆపరేటర్ (`? :`) వాడండి
- షరతు, తర్వాత `?`, సత్య ఫలితం, తర్వాత `:`, అసత్య ఫలితం రాయండి
- షరతు ఆధారంగా విలువలు అప్పగించేటప్పుడు ఈ ప్యాటర్న్ అనుసరించండి
```javascript
// దశ 4: బహుళ నిర్దిష్ట విషయాలను నిర్వహించడం
const dayOfWeek = "Tuesday";
switch (dayOfWeek) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("It's a weekday - time to work!");
break;
case "Saturday":
case "Sunday":
console.log("It's the weekend - time to relax!");
break;
default:
console.log("Invalid day of the week");
}
```
**ఈ కోడ్ ఈ క్రింది పనిచేస్తుంది:**
- వేరియబుల్ విలువను బహుళ ప్రత్యేక కేసులతో మ్యాచ్ చేయండి
- సమానమైన కేసులను (వారంతపు రోజులు vs. వీకెండ్) గ్రూప్ చేయండి
- మ్యాచ్ సిగ్గు పడితే సరైన కోడ్ బ్లాక్ అమలు చేయండి
- అనుకోని విలువల కోసం `default` కేస్ అందించండి
- తదుపరి కేసుకి వెళ్లకుండా `break` స్టేట్మెంట్లు ఉపయోగించండి
> 💡 **ప్రాక్టికల్ అనాలజీ**: కంట్రోల్ ఫ్లోని ప్రపంచంలో అత్యంత సహనశీలమైన జీపీఎస్ తార్గెట్ దారులను ఇచ్చేలా ఆలోచించండి. “ముఖ్య రహదారిపై ట్రాఫిక్ ఉంటే, హైవే వెళ్ళండి. హైవే బ్లాక్ అయితే, అందమైన మార్గం ప్రయత్నించండి.” ప్రోగ్రామ్స్ ఇలాంటి షరతుల లాజిక్ ఉపయోగించి వివిధ పరిస్థితులకు తెలివిగా స్పందిస్తాయి మరియు యూజర్లకి ఉత్తమ అనుభవాన్ని ఇస్తాయి.
### 🎯 **కాన్సెప్ట్ చెక్: బిల్డింగ్ బ్లాక్స్ లో మాస్టరీ**
**మూలాధారాలతో మీరు ఎటువంటి స్థాయిలో ఉన్నారు చూడండి:**
- మీ సొంత మాటల్లో వేరియబుల్ మరియు స్టేట్మెంట్ మధ్య తేడా చెప్పగలరా?
- ఒక ప్రాక్టికల్ సందర్భంలో మీరు if-then నిర్ణయాన్ని ఎప్పుడు వాడుతారో ఆలోచించండి (మా ఓటు ఉదాహరణ లాగా)
- ప్రోగ్రామింగ్ లాజిక్ లో ఏ విషయం మిమ్మల్ని ఆశ్చర్యపరిచింది?
**వేగంగా ఆత్మవిశ్వాసం పెంచుకుందాం:**
```mermaid
flowchart LR
A["📝 ప్రకటనలు<br/>(సూచనలు)"] --> B["📦 చరాలు<br/>(సంగ్రహణ)"] --> C["🔀 నియంత్రణ ప్రవాహం<br/>(తీర్మానాలు)"] --> D["🎉 పని కార్యక్రమం!"]
style A fill:#ffeb3b
style B fill:#4caf50
style C fill:#2196f3
style D fill:#ff4081
```
✅ **తరువాత ఏమి వస్తుంది**: మేము ఈ కాన్సెప్ట్‌లు పై మరింత లోతుగా సుభౌమ్యంగా ప్రయాణం కొనసాగించబోతున్నాము! మీరు ప్రస్తుతం ముందున్న అద్భుతమైన అవకాశాలపై ఉత్సాహంగా ఉండండి. నిర్దిష్ట నైపుణ్యాలు మరియు సాంకేతికతలు సహజంగానే పద్ధతిగా అర్థమవుతాయి – ఇది మీరు ఊహించిన కన్నా చాలా సరదాగా ఉంటుంది అని హామీ ఇస్తున్నాను!
## వాడే పరికరాలు
ఇప్పడైతే, నిజంగా నేను ఉత్సాహంతో ఊగిపోతున్నా! 🚀 మిమ్మల్ని డిజిటల్ స్పేస్‌షిప్ కీస్ అందించట్లుగా మీరు అనుభవించే అద్వితీయ పరికరాల గురించి చర్చించబోతున్నాము.
మీలో ఒక చెఫ్ తన చేతులతోనే పూర్తిగా సంతృప్తి కలిగించే కత్తులు ఎలా ఉంటాయో తెలుసా? లేక ఒక సంగీతకారుడు తాకగానే పాడే గిటార్ తనది ఉంటుంది? అలాగే డెవలపర్లు తమ సొంత మాంత్రిక పరికరాలు కలిగి ఉంటారు, మరియు ఇక్కడ మీకు ఆశ్చర్యాన్ని ఇస్తుంది – ఎక్కువగా అవి పూర్తిగా ఉచితం!
నేను మీతో వాటిని పంచుకోవాలని ఎంతో ఆసక్తిగా ఉన్నాను, ఎందుకంటే అవి సాఫ్ట్‌వేర్ తయారీ విధానాన్ని పూర్తిగా మార్చివేశాయి. AI ఆధారిత కోడింగ్ సహాయకులు, Wi-Fi తో ఎక్కడినుండి అయినా పూర్తిగా అప్లికేషన్లు రెడీ చేసుకునే క్లౌడ్ పరికరాలు, ప్రోగ్రామ్స్ కి అద్భుతమైన ఎక్స్-రే విజన్ లాగా డీబగ్గింగ్ టూల్స్ ఉన్నాయి.
ఇంకా ఆశ్చర్యకరమైన విషయం: ఇవి "బిగినర్స్ టూల్స్" కాదని, మీరు వీటిని దాటిపోయే అవకాశమే లేదు. గూగుల్, నెట్‌ఫ్లిక్స్, మరియు మీరు ఇష్టపడే ఆ ఇండి యాప్ స్టూడియోల డెవలపర్లు ఇప్పుడు వాడుతున్న అత్యుత్తమ ప్రొఫెషనల్ క్లాస్ పరికరాలే ఇవి. మీరు వాడినపుడు ప్రొఫెషనల్‌లా అనిపించేది ఖచ్చితమే!
```mermaid
graph TD
A["💡 మీ ఆలోచన"] --> B["⌨️ కోడ్ ఎడిటర్<br/>(VS కోడ్)"]
B --> C["🌐 బ్రౌజర్ డెవ్‌టూల్స్<br/>(టెస్టింగ్ & డీబగ్గింగ్)"]
C --> D["⚡ కమాండ్ లైన్<br/>(ఆటోమెషన్ & టూల్స్)"]
D --> E["📚 డాక్యుమెంటేషన్<br/>(కొనసాగింపు & సూచనలు)"]
E --> F["🚀 అద్భుతమైన వెబ్ యాప్!"]
B -.-> G["🤖 AI అసిస్టెంట్<br/>(GitHub కోపైలట్)"]
C -.-> H["📱 డివైస్ టెస్టింగ్<br/>(స్పందనాత్మక డిజైన్)"]
D -.-> I["📦 ప్యాకేజ్ మేనేజర్లు<br/>(npm, యార్న్)"]
E -.-> J["👥 సమాజం<br/>(స్టాక్ ఓవర్ఫ్లో)"]
style A fill:#fff59d
style F fill:#c8e6c9
style G fill:#e1f5fe
style H fill:#f3e5f5
style I fill:#ffccbc
style J fill:#e8eaf6
```
### కోడ్ ఎడిటర్లు మరియు IDEs: మీ కొత్త డిజిటల్ బెస్ట్ ఫ్రెండ్స్
కోడ్ ఎడిటర్లు గురించి మాట్లాడుకుందాం – ఇవి మీ కొత్త ఇష్టమైన చోట్లుగా మారబోతున్నాయి! మీ వ్యక్తిగత కోడింగ్ శరణాల్లా వీటిని భావించండి - ఇక్కడ మీరు ఎక్కువ సమయం కృషి చేసి మీ డిజిటల్ సృష్టులను పక్కా చేస్తారు.
ఇప్పుడు, ఆధునిక ఎడిటర్ల అద్భుతమైన విషయం ఏమిటంటే: అవి కేవలం సున్నితమైన టెక్స్ట్ ఎడిటర్లు కాదు. అవి 24/7 మీరు వెంటనే కలుసుకునే అత్యంత ప్రతిభావంతమైన మరియు సహాయక కోడింగ్ గురువువంటి లాంటివి. అవి మీరు గమనించకముందే టైపోగ్రాఫికల్ లోపాలను పట్టుకుంటాయి, మీరు ఒక జీనియస్ లాగా కనిపించే సూచనలు ఇస్తాయి, ప్రతి కోడ్ భాగం ఏం చేస్తుందో అర్థం చేసుకోడానికి సహాయపడతాయి, బాగున్నవి మీరు టైపు చేయబోయే పదాలను ముందుగానే ఊహించి మీ ఆలోచనలను పూర్తి చేసేందుకు సహాయపడతాయి!
నేను మొదటి సారి ఆటో-కంప్లీషన్ కనుగొన్నప్పుడు; నిజంగా భవిష్యత్తులోనే ఉన్ననని అనిపించింది. మీరు ఏదైనా టైప్ చేయడం ప్రారంభిస్తే, మీ ఎడిటర్ అట్టి మాటలు అంటుంది: "ఏ, మీరు మీకు కావలసిన ఫంక్షన్‌ గురించి ఆలోచిస్తున్నారా?" ఇది మీ కోడింగ్ సఖుడు మైండ్ రీడర్ లాగా ఉంటుంది!
**ఈ ఎడిటర్లను అద్భుతంగా 만드는 అంశాలు:**
ఆధునిక కోడ్ ఎడిటర్లు ఉత్పాదకతను పెంచే లక్షణాల వందలైన కల్పిస్తాయి:
| లక్షణం | ఇది చేస్తుంది | ఇది ఎందుకు సహాయపడుతుంది |
|---------|--------------|--------------|
| **సింటాక్స్ హైలైట్** | కోడ్ లో భాగాలను రంగులతో చూపిస్తుంది | కోడ్ చదవడం సులభం మరియు లోపాలు కనపడుతాయి |
| **ఆటో-కంప్లీషన్** | మీరు టైప్ చేస్తున్నప్పుడు కోడ్ సూచిస్తుంది | కోడింగ్ వేగవంతం మరియు లోపాలు తగ్గిస్తుంది |
| **డీబగ్గింగ్ టూల్స్** | లోపాలను కనుగొని సరిచేస్తాయి | సమయాన్ని ఎక్కువగా ఆదా చేస్తాయి |
| **ఎక్స్‌టెన్స్‌ల్స్** | ప్రత్యేక ఫీచర్లను జోడిస్తాయి | ఎడిటర్‌ను మీరు కోరుకునే టెక్నాలజీకి సొగసుగా మార్చొచ్చు |
| **AI సహాయకులు** | కోడ్ మరియు వివరణలను సూచిస్తాయి | నేర్చుకోవడాన్ని మరియు ఉత్పాదకతను వేగవంతం చేస్తాయి |
> 🎥 **వీడియో వనరు**: ఈ టూల్స్ ను ప్రత్యక్షం తో చూడాలనుకుంటే, దీన్ని చూడండి [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) పూర్తి అవగాహన కోసం.
#### వెబ్ డెవలప్‌మెంట్ కు సిఫార్సు చేయబడిన ఎడిటర్లు
**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (ఉచితం)
- వెబ్ డెవలపర్లలో అత్యంత ప్రాచుర్యం పొందినది
- అద్భుతమైన ఎక్స్‌టెన్షన్ ఎకోసిస్టమ్
- బిల్ట్-ఇన్ టెర్మినల్ మరియు Git ఇంటిగ్రేషన్
- **అత్యవసర ఎక్స్‌టెన్షన్స్**:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI ఆధారిత కోడ్ సూచనలు
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - ప్రత్యక్ష సహకారం
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - ఆటోమాటిక్ కోడ్ ఫార్మాటింగ్
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - కోడ్ లో చివర విచ్ఛిన్నాలు పట్టిస్తుంది
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (చెల్లించాలి, విద్యార్థులకు ఉచితం)
- అభివృద్ధి చెందిన డీబగ్గింగ్ మరియు పరీక్షా పరికరాలు
- తెలివైన కోడ్ కంప్లీషన్
- బిల్ట్-ఇన్ వెర్షన్ కంట్రోల్
**క్లౌడ్ ఆధారిత IDEలు** (వివిధ ధరలు)
- [GitHub Codespaces](https://github.com/features/codespaces) - మీ బ్రౌజర్లో పూర్తి VS Code
- [Replit](https://replit.com/) - నేర్చుకోవడం మరియు కోడ్ పంచుకోడానికి బాగుంది
- [StackBlitz](https://stackblitz.com/) - తక్షణ, పూర్తి స్టాక్ వెబ్ డెవలప్‌మెంట్
> 💡 **ప్రారంభ సూచన**: Visual Studio Code తో ప్రారంభించండి – ఇది ఉచితం, పరిశ్రమలో విస్తృతంగా వాడబడుతుంది మరియు అనేక ట్యుటోరియల్స్ మరియు ఎక్స్‌టెన్షన్స్ అందుబాటులో ఉన్నాయి.
### వెబ్ బ్రౌజర్లు: మీ రహస్య అభివృద్ధి ప్రయోగశాల
సరే, ఇప్పుడు మీరు బ్రౌజర్ లను సోషల్ మీడియా స్రోలింగ్ కొరకు మరియు వీడియోలు చూడటానికి వాడుతారని తెలుసు కదా? అయితే, ఇది తెలుసుకోండి, ఈ బ్రౌజర్లు ముప్పు తగలని అద్భుతమైన రహస్య అభివృద్ధి ప్రయోగశాల గానూ మీరు ఎప్పుడూ కనిపెట్టాలనుకుంటూ తలచుకుంటున్నా దాచిపెట్టుకున్నాయి!
ప్రతి సారి మీరు వెబ్ పేజీపై రైట్-క్లిక్ చేసి "Inspect Element" ఎంచుకునప్పుడు, మీరు ఒక దాచిన డెవలపర్ టూల్స్ ప్రపంచాన్ని తెరిచారు, అది నేను మొదటుగా వందల డాలర్లు చెల్లించి కొనుగోలు చేసుకున్న కొన్ని ఖరీదైన సాఫ్ట్‌వేర్‌ల కంటే ఎక్కువ శక్తివంతమైనది. ఇది అలాగే ఉంటుంది, మీ సాధారణ వంటగదిలో ఒక ప్రొఫెషనల్ చెఫ్ ప్రయోగశాల రహస్యంగా కనబడటం లాంటిది!
మొదటి సారిగా ఎవరైనా నాకు బ్రౌజర్ DevTools చూపించడం జరిగినప్పుడు, నేను సుమారు మూడు గంటల పాటు చుట్టూ క్లిక్ చేస్తూ "వేట్, ఇది కూడా చేయగలదా?!" అని అనుకున్నాను. మీరు లైవ్‌లో ఏదైనా వెబ్‌సైట్‌ని ఎడిట్ చేయవచ్చు, ఏది ఎంత వేగా లোడ్ అవుతుందో ఖచ్చితంగా చూడవచ్చు, మీ సైట్ విభిన్న పరికరాలలో ఎలా కనిపిస్తుందో పరీక్షించవచ్చు, మరియు పూర్తి ప్రొఫెషనల్‌లా JavaScript ను డీబగ్ చేయవచ్చు. ఇది నిజంగా మనస్సును ఊరిస్తుంది!
**ఇక్కడ బ్రౌజర్లు మీ గుట్టు ఆయుధం ఎందుకు:**
మీరు వెబ్‌సైట్ లేదా వెబ్ యాప్‌ని సృష్టించినప్పుడు, అది నిజ జీవితంలో ఎలా కనిపిస్తూ ఎలా వ్యవహరిస్తుందో చూడటం అవసరం. బ్రౌజర్లు మీ పని చూపేだけ కాక, పనితీరు, సౌలభ్యం మరియు సంభవించే సమస్యల గురించి వివరమైన ఫీడ్బ్యాక్ ఇస్తాయి.
#### బ్రౌజర్ డెవలపర్ టూల్స్ (DevTools)
నవీన బ్రౌజర్లు సమగ్ర అభివృద్ధి సూట్స్ కలిగి ఉంటాయి:
| టూల్ వర్గం | అది ఏమి చేస్తుంది | ఉదాహరణ ఉపయోగం |
|---------------|--------------|------------------|
| **ఎలిమెంట్ ఇన్స్పెక్టర్** | లైవ్‌లో HTML/CSS చూడటం మరియు ఎడిట్ చేయడం | వెంటనే ఫలితాలు చూసేందుకు శైలిని మార్చడం |
| **కన్సోల్** | లోప సందేశాలను చూడటం మరియు JavaScript పరీక్షించడం | సమస్యలను డీబగ్ చేయడం, కోడ్‌తో ప్రయోగాలు చేయడం |
| **నెట్‌వర్క్ మానిటర్** | వనరులు ఎలా లోడ్ అవుతున్నాయో ట్రాక్ చేయడం | పనితీరును మెరుగుపరచడం మరియు లోడింగ్ సమయాలు |
| **అక్సెసిబిలిటీ చెకర్** | సర్వసామాన్య రచనను పరీక్షించడం | మీ సైట్ అన్ని వినియోగదారుల కోసం పనిచేస్తుందో నిర్ధారించడం |
| **డివైస్ సిమ్యులేటర్** | విభిన్న స్క్రీన్ పరిమాణాలలో ప్రివ్యూ | ఒకటి చేయకుండా responsive డిజైన్‌ను పరీక్షించడం |
#### అభివృద్ధికి సిఫారసు చేసిన బ్రౌజర్లు
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - పరిశ్రమ ప్రమాణ DevTools మరియు విస్తృత దస్తావేజులతో
- **[Firefox](https://developer.mozilla.org/docs/Tools)** - అద్భుతమైన CSS గ్రిడ్ మరియు అక్సెసిబిలిటీ టూల్స్
- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - క్రోమియంపై ఆధారితమైన మైక్రోసాఫ్ట్ డెవలపర్ వనరులతో
> ⚠️ **ముఖ్యమైన పరీక్ష సూచన**: మీ వెబ్‌సైట్లను ఎప్పుడూ పలు బ్రౌజర్లలో పరీక్షించండి! Chrome లో సరిగ్గా పనిచేసినది Safari లేదా Firefox లో తేడాగా కనిపించవచ్చు. ప్రొఫెషనల్ డెవలపర్లు అన్ని ప్రధాన బ్రౌజర్లలో పరీక్షించి, సुसంస్కృత వినియోగదారుల అనుభవాలను నిర్ధారిస్తారు.
### కమాండ్ లైన్ టూల్స్: డెవలపర్ సూపర్ పవర్స్‌కు మీ గేట్‌వే
బాగుంది, ఇప్పుడు కమాండ్ లైన్ గురించి నిజాయతీగా మాట్లేద్దాం, నేను మీరు నిజంగా అర్థం చేసుకోగలిగిన వ్యక్తి నుంచి ఇది వినాలనుకుంటున్నాను. మొదట చూశానప్పుడు – ఆ భయంకరమైన నలుపు తెర, బెదిలించే టెక్స్ట్ తో – నేను నిజంగా అనుకున్నాను, "లేదు, అసలు కాదు! ఇది 1980ల హ్యాకర్ మూవీ నుండి వచ్చినట్టు ఉంది, నేను దీని కోసం సరైన తెలివి లేను!" 😅
కానీ నేను అప్పుడే తెలుసుకోవాలని మనసారా కోరుకునేది ఇదిగో, మీరు ఇప్పుడు నన్ను విన్నట్టే: కమాండ్ లైన్ భయంకరం కాదు – ఇది మీ కంప్యూటరుతో నేరుగా మాట్లాడుతున్నట్లే. ఒక అద్భుత ఇమేజ్‌లు, మెనూలతో ఆర్డర్ చేసే fancy యాప్ (ఆ సులభమైనది) తో పోల్చితే, మీరు ఇష్టపడే స్థానిక రెస్టారెంట్‌లోకి నడిచి వెళ్లి, చెఫ్ "సర్‌ప్రైజ్ ఇవ్వండి" అనడంతోనే అద్భుతం తయారుచేసేలా ఉంటుంది.
కమాండ్ లైన్ అనేది డెవలపర్లు తమను నిజమైన వ mágicians లా భావించే చోటు. మీరు కొన్ని మాంత్రిక పదాలు టైప్ చేసి (సరే, అవి కేవలం కమాండ్లు కానీ అది మాంత్రికంగా అనిపిస్తాయి!), ఎంటర్ కొడితే, BOOM – మీరు పూర్తిగా ప్రాజెక్ట్ స్ట్రక్చర్స్ సృష్టించవచ్చు, ప్రపంచవ్యాప్తంగా శక్తివంతమైన టూల్స్ ఇన్‌స్టాల్ చేసుకోవచ్చు, లేదా మీ యాప్‌ను మిలియన్ల మందికి ఇంటర్నెట్‌లోకి పంపవచ్చు. మొదటి సారిగా ఆ శక్తిని ఆస్వాదించిన తర్వాత, అది నిజంగా బాగా అలవాటు అవుతుంది!
**కమాండ్ లైన్ మీ ఇష్టమైన టూల్ అవ్వడం ఎందుకు:**
గ్రాఫికల్ ఇంటర్‌ఫేస్‌లు అనేక పనులకు గొప్పవి అయినప్పటికీ, కమాండ్ లైన్ ఆటోమేషన్, ఖచ్చితత్వం మరియు వేగం కోసం మించినది. అనేక అభివృద్ధి టూల్స్ ముఖ్యంగా కమాండ్ లైన్ ద్వారా పనిచేస్తాయి, వాటిని సమర్థవంతంగా ఉపయోగించడం మీ ఉత్పాదకతను గణనీయంగా పెంచుతుంది.
```bash
# దశ 1: ప్రాజెక్ట్ డైరెక్టరీను సృష్టించండి మరియు దాని వద్దకి నావిగేట్ చేయండి
mkdir my-awesome-website
cd my-awesome-website
```
**ఈ కోడ్ ఏమి చేస్తుందో:**
- **"my-awesome-website"** అని కొత్త డైరెక్టరీ క్రియేట్ చేయడం
- ప్రాజెక్టుకు పని আৰম্ভించేందుకు ఆ కొత్త డైరెక్టరీలోకి వెళ్లడం
```bash
# దశ 2: package.json తో ప్రాజెక్ట్‌ను ప్రారంభించండి
npm init -y
# ఆధునిక అభివృద్ధి పరికరాలను ఇన్‌స్టాల్ చేయండి
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js
```
**దశ దశగా ఈ ప్రాసెస్:**
- `npm init -y` ఉపయోగించి డిఫాల్ట్ సెట్టింగ్స్‌తో కొత్త Node.js ప్రాజెక్టు ప్రారంభించడం
- వేగవంతమైన అభివృద్ధి మరియు ఉత్పత్తి బిల్డ్స్ కోసం Vite ని ఇన్స్టాల్ చేయడం
- ఆటోమేటిక్ కోడ్ ఫార్మాటింగ్ కోసం Prettier మరియు కోడ్ నాణ్యత కోసం ESLint ని జోడించడం
- డెవలప్మెంట్-కేవలం ఆధారిత ప్యాకేజీలనుగా గుర్తించడానికి `--save-dev` ఫ్లాగ్ ఉపయోగించడం
```bash
# దశ 3: ప్రాజెక్ట్ నిర్మాణం మరియు ఫైళ్లు సృష్టించండి
mkdir src assets
echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html
# అభివృద్ధి సర్వర్ ప్రారంభించండి
npx vite
```
**పై వాక్యాల్లో, మేము:**
- సోర్స్ కోడ్ మరియు ఆస్తుల కోసం వేర్వేరు ఫోల్డర్లను సృష్టించి ప్రాజెక్టును సక్రమం చేసినాము
- సరైన డాక్యుమెంట్ స్ట్రక్చర్ తో ప్రాథమిక HTML ఫైల్ సృష్టించాము
- లైవ్ రీలొడింగ్ మరియు హాట్ మోడ్యూల్ రీప్లేస్‌మెంట్ కోసం Vite డెవలప్మెంట్ సర్వర్ ప్రారంభించాము
#### వెబ్ అభివృద్ధి కోసం అత్యవసర కమాండ్ లైన్ టూల్స్
| టూల్ | ఉద్దేశ్యం | ఎందుకు అవసరం |
|------|---------|-----------------|
| **[Git](https://git-scm.com/)** | వెర్షన్ కంట్రోల్ | మార్పులను ట్రాక్ చేయడం, సహకారం, బ్యాకప్ |
| **[Node.js & npm](https://nodejs.org/)** | JavaScript రన్‌టైమ్ & ప్యాకేజీ మేనేజ్‌మెంట్ | బ్రౌజర్లకు వెలుపల JavaScript నడిపించటం, ఆధునిక అభివృద్ధి టూల్స్ ఇన్‌స్టాల్ చేయటం |
| **[Vite](https://vitejs.dev/)** | బిల్డ్ టూల్ & డెవ సర్వర్ | వేగవంతమైన అభివృద్ధి, హాట్ మోడ్యూల్ రీప్లేస్‌మెంట్ తో |
| **[ESLint](https://eslint.org/)** | కోడ్ నాణ్యత | JavaScript లో సమస్యలను స్వయంచాలకంగా కనుగొని సరిచేయడం |
| **[Prettier](https://prettier.io/)** | కోడ్ ఫార్మాటింగ్ | మీ కోడ్‌ని దృఢంగా మరియు చదవడానికి సులభంగా ఉంచడం |
#### వేదిక-పరీక్షించిన ఎంపికలు
**విండోస్:**
- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ఆధునిక, ఫీచర్-భరితమైన టెర్మినల్
- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - శక్తివంతమైన స్క్రిప్టింగ్ వాతావరణం
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - సంప్రదాయ విండోస్ కమాండ్ లైన్
**macOS:**
- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - బిల్ట్-ఇన్ టెర్మినల్ అప్లికేషన్
- **[iTerm2](https://iterm2.com/)** - అధునాతన ఫీచర్లతో టెర్మినల్ ను మెరుగుపరచడం
**లినక్స్:**
- **[Bash](https://www.gnu.org/software/bash/)** 💻 - ప్రామాణిక లినక్స్ షెల్
- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - అధునాతన టెర్మినల్ ఎమ్యులేటర్
> 💻 = ఆపరేటింగ్ సిస్టమ్ లో ముందే ఇన్‌స్టాల్ చేయబడింది
> 🎯 **అధ్యయన మార్గం**: మొదటి స్టెప్‌లాలో `cd` (డైరెక్టరీ మార్చడం), `ls` లేదా `dir` (ఫైళ్ళ జాబితా), `mkdir` (ఫోల్డర్ సృష్టించడం) వంటి ఆదేశాలు నేర్చుకోండి. ఆధునిక వర్క్‌ఫ్లో కమాండ్లను ఉపయోగించి (`npm install`, `git status`, `code .` ద్వారా ప్రస్తుత డైరెక్టరీని VS Code లో ఓపెన్ చేయడం) ప్రాక్టీస్ చేయండి. మీరు సుభిక్షమవుతున్న కొద్దీ ఇదివరకు మరిన్ని పటిష్ట ఆదేశాలు మరియు ఆటోమేషన్ సాంకేతికతలను నేర్చుకుంటారు.
### డాక్యుమెంటేషన్: మీ ఎప్పుడూ అందుబాటులో ఉండే నేర్పించే గురువు
సరే, నేను మీకు ఒక చిన్న రహస్యం చెప్పాలని ఉంది, ఇది మీరు ఒక ప్రాథమికుడు అని భావించి మీకు చాలా నచ్చేలా చేస్తుంది: అత్యంత అనుభవజ్ఞులైన డెవలపర్లు కూడా వారి సమయంలో చాలా భాగాన్ని డాక్యుమెంటేషన్ చదవడంలో గడుపుతారు. వారు ఏమి చెయ్యలేకపోతున్నారు కాబట్టి కాదు – ఇది నిజంగా మేధస్సుని సూచిస్తుంది!
డాక్యుమెంటేషన్ అనేది ప్రపంచంలోని అత్యంత ఉన్నతమైన, తెలిసిన వారిని 24/7 అందుబాటులో ఉంచుకోవడం లాంటిది. సమస్యలో చిక్కుకున్నారా 2 AM లో? డాక్యుమెంటేషన్ మీకు ఆవశ్యమైన జవాబుతో ఘనంగా సహాయం చేస్తుంది. వారంతా చర్చిస్తున్న కొత్త ఫీచర్ గురించి తెలుసుకోవాలనుకుంటున్నారా? డాక్యుమెంటేషన్ దగ్గర దాని గురించి స్టెప్-బై-స్టెప్ ఉదాహరణలు ఉన్నాయి. ఒక విషయం ఎందుకు పనిచేస్తుందో అర్థం కావాలనుకుంటే? డాక్యుమెంటేషన్ మీకు సులభంగా అర్థం అవ్వే విధంగా వివరిస్తుంది!
ఏదైనా నేను పూర్తిగా నా అభిప్రాయాన్ని మార్చిన విషయం ఇదిగో: వెబ్ అభివృద్ధి ప్రపంచం అత్యంత వేగంగా మారుతున్నది మరియు ఎవరూ (అంటే ఒకరూ కాదు!) అన్ని విషయాలను గుండెలో పెట్టుకోరు. 15+ సంవత్సరాల అనుభవం ఉన్న ఉన్నత స్థాయి డెవలపర్లు కూడా ప్రాథమిక సింటాక్స్ చూసుకుంటూ ఉంటారు, దీనిలో ఏమి ఇష్టం? అది సమర్ధత! సుదీర్ఘ జ్ఞాపకశక్తి ఉండటం కాదు; అది భరోసా లభించే సమాధానాలను త్వరగా కనుగొనడం మరియు వాటిని ఎలా వర్తించాలో అర్థం చేసుకోవడమే.
**ఇక్కడ నిజమైన మాంత్రికత జరుగుతుంది:**
ప్రొఫెషనల్ డెవలపర్లు చాలా సమయం డాక్యుమెంటేషన్ చదవడంలో గడుపుతారు – వారు తెలియకపోవటం కోసం కాదు, కానీ వెబ్ అభివృద్ధి ప్రపంచం చాలా వేగంగా అభివృద్ధి చెందుట వల్ల ఎప్పటికప్పుడు నేర్చుకోవడం అవసరం. మంచి డాక్యుమెంటేషన్ మీరు *ఎలా* ఉపయోగించాలో మాత్రమే కాదు, *ఎందుకు* మరియు *ఎప్పుడు* ఉపయోగించాలో అర్థం చేయడంలో సహాయపడుతుంది.
#### అత్యవసర డాక్యుమెంటేషన్ వనరులు
**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
- వెబ్ సాంకేతిక డాక్యుమెంటేషన్ కోసం బంగారు ప్రమాణం
- HTML, CSS మరియు JavaScript పరిచయాలు వివరించిన సమగ్ర మార్గదర్శకాలు
- బ్రౌజర్ అనుకూలత సమాచారం
- ప్రాక్టికల్ ఉదాహరణలు మరియు ఇంటరాక్టివ్ డెమోలతో
**[Web.dev](https://web.dev)** (గూగుల్ ద్వారా)
- ఆధునిక వెబ్ అభివృద్ధి ఉత్తమ రీతులు
- పనితీరు ఆప్టిమైజేషన్ మార్గదర్శకాలు
- సౌలభ్య మరియు సమగ్ర డిజైన్ సిద్ధాంతాలు
- నిజప్రపంచ ప్రాజెక్టుల కేస్ స్టడీలు
**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
- Edge బ్రౌజర్ అభివృద్ధి వనరులు
- ప్రోగ్రెసివ్ వెబ్ యాప్ మార్గదర్శకాలు
- క్రాస్-ప్లాట్‌ఫామ్ అభివృద్ధి అవగాహన
**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
- నిర్మిత అధ్యయన పాఠ్యక్రమాలు
- పరిశ్రమ నిపుణుల వీడియో కోర్సులు
- చేతితో చేసే కోడింగ్ వ్యాయామాలు
> 📚 **అధ్యయన వ్యూహం**: డాక్యుమెంటేషన్ ను గుండెల్లో పెట్టుకుందామనకూడదు – దానిని సమర్థవంతంగా ఎలా నావిగేట్ చేయాలో నేర్చుకోండి. తరుచుగా ఉపయోగించే సూచనలను బుక్‌మార్క్ చేసుకొని, వేగంగా ప్రత్యేక సమాచారాన్ని కనుగొనడానికి శోధన ఫంక్షన్‌లను ఉపయోగించండి.
### 🔧 **టూల్ మాస్టరీ చెక్: మీకు ఏమి ఆకర్షిస్తోంది?**
**ఒక క్షణం ఆలోచించండి:**
- మీరు మొదట ప్రయత్నించాలనుకుంటున్న టూల్ ఏది? (తప్పు జవాబు లేదు!)
- ఇంకా కమాండ్ లైన్ భయంగా ఉందా లేదా మీరు దానిపై ఆసక్తి పడుతున్నారా?
- మీ ఇష్టమైన వెబ్‌సైట్ల వెనుక కంటే Peek చేయడానికి బ్రౌజర్ DevTools ఉపయోగిస్తున్నట్లు ఊహించగలరా?
```mermaid
pie title "పరికరాలతో డెవలపర్ ఖర్చు చేసిన సమయం"
"కోడ్ ఎడిటర్" : 40
"బ్రౌజర్ పరీక్ష" : 25
"కమాండ్ లైన్" : 15
"డాక్యుమెంట్స్ చదవడం" : 15
"డిబగ్గింగ్" : 5
```
> **ఆసక్తికరమైన విశ్లేషణ**: చాలా మంది డెవలపర్లు తమ కోడ్ ఎడిటర్‌లో సుమారు 40% సమయం గడుపుతారు, కానీ పరీక్షలు, నేర్చుకోవడం, సమస్య పరిష్కారానికి ఎంత సమయం వెచ్చిస్తారో గమనించండి. ప్రోగ్రామింగ్ కేవలం కోడ్ రాయడమే కాదు – అనుభవాలను సృష్టించడం!
✅ **ఆలోచించవలసిన విషయం**: మీకు ఆసక్తికరమైన విషయమేదంటే పరీక్షించండి – వెబ్‌సైట్లు నిర్మించడానికి (అభివృద్ధి) ఉపయోగించే టూల్స్, వాటి రూపాన్ని డిజైన్ చేయడానికి ఉపయోగించే టూల్స్ నుండి ఎలా వేర్వేరుగా ఉంటాయి? ఇది ఇలాంటిదే, ఒక వాస్తవికుడు బాగున్న గృహాన్ని డిజైన్ చేస్తాడు, మరొకరు అది కోరుకున్న రూపంలో కట్టే కాంట్రాక్టర్. రెండూ కీలకమైనవి, కానీ వేర్వేరు టూల్‌బాక్స్‌లు అవసరం! ఈ తర్కం మీకు వెబ్‌సైట్‌లు ఎలా సృష్టించబడుతాయో పెద్ద దృష్టిని అందిస్తుంది.
## GitHub Copilot Agent ఛాలెంజ్ 🚀
Agent మోడ్ ఉపయోగించి క్రింది ఛాలెంజ్ పూర్తి చేయండి:
**వర్ణన:** ఆధునిక కోడ్ ఎడిటర్ లేదా IDE లక్షణాలను పరిశీలించి, ఇది ఎలా వెబ్ డెవలపర్ గా మీ వర్క్‌ఫ్లోని మెరుగుపరుస్తుందో ప్రదర్శించండి.
**ప్రాంప్ట్:** ఒక కోడ్ ఎడిటర్ లేదా IDE (ఉదాహరణకు Visual Studio Code, WebStorm, లేదా క్లౌడ్‌-ఆధారిత IDE) ఎంచుకోండి. మీరు కోడ్ రాయడం, డీబగ్ చేయడం, లేదా నిర్వహణ చేయడాన్ని సులభతరం చేసే మూడు ఫీచర్స్ లేదా విస్తరణలను జాబితా చేయండి. ప్రతి ఒక్కదానికి అది మీ వర్క్‌ఫ్లోకి ఎలా లాభాన్ని తీసుకొస్తుందో సారాంశంగా వివరణ ఇవ్వండి.
---
## 🚀 ఛాలెంజ్
**సరే, డిటెక్టివ్, మీ మొదటి కేసుకు సిద్దమా?**
ఇప్పుడల్లా మీరు ఈ అద్భుతమైన ప్రాథమికం పొందారన్న మాటకు, నాకు మీకు ఒక సాహసం ఉంది, ఇది ప్రోగ్రామింగ్ ప్రపంచం ఎంత భిన్నత్వంగా మరియు ఆసక్తికరంగా ఉంటుందో మీకు చూపిస్తుంది. వినండి – ఇంకా కోడ్ రాయడం గురించి ఇది కాదు, కాబట్టి ఒత్తిడి ఉండరాదు! మీరు ఒక ప్రోగ్రామింగ్ భాషల డిటెక్టివ్ లా భావించండి, మీ మొదటి చివుల గ్రహణ కేసు!
**మీ మిషన్, మీరు అంగీకరిస్తే:**
1. **భాషల అన్వేషకులు అవ్వండి**: పూర్తిగా వేర్వేరు విశ్వాల నుండి మూడు ప్రోగ్రామింగ్ భాషలను ఎంచుకోండి – ఒకటి వెబ్‌సైట్ల కోసం, ఒకటి మొబైల్ యాప్స్ కోసం, మరొకటి శాస్త్రవేత్తలకు డేటా విశ్లేషణకి. ఒక్కటి చేసిన ఒకే సింపుల్ టాస్క్ అందులో మూడు భాషలలో ఎలా వ్రాయబడిందో చూడండి. నేను హామీ ఇస్తాను, అవి ఎంత భిన్నంగా కనిపించినా ఒకే పనిని చేస్తాయన్న విషయం మీకు ఆశ్చర్యంలో పడేస్తుంది!
2. **ఆవిర్భావ కథలను వెతకండి**: ప్రతి భాష ప్రత్యేకం చేయేది ఏమిటి? ప్రతి ప్రోగ్రామింగ్ భాష ఎందుకు తయారయ్యిందో తెలుసుకోండి – “ఈ సమస్యకు మెరుగైన పరిష్కారం ఉండాలి” అనిపించిందని. కొన్ని కథలు నిజంగా ఆసక్తికరంగా ఉంటాయి!
3. **ఎత్తుగడ కమ్యూనిటీ లను కలుసుకోండి**: ప్రతీ భాష కమ్యూనిటీ ఎంత ఆతిథ్య, ఉత్సాహంతో ఉందో పరిశీలించండి. కొన్ని మిల్లియన్ల మంది డెవలపర్లు ఉండగా, కొన్ని చిన్నవైనా ఒకరికొకరు ఎంతో సహాయం చేసుకునే సమూహాలా ఉంటాయి. మీరు వారి వ్యక్తిత్వాలను చూసి ఆనందిస్తారు!
4. **మనసు అనుసరించండి**: ఈ క్షణం మీకు ఏ భాష సులభంగా అనిపిస్తుంది? “పర్ఫెక్ట్” ఎంపిక కోసం ఒత్తిడి చెందకండి – మీ ప్రవృత్తులను వినండి! ఇదిలో తప్పు జవాబు లేదు, మీరు తరువాత ఇతర భాషలను సమీక్షించవచ్చు.
**బోనస్ డిటెక్టివ్ పని**: ప్రతీ భాషతో చాలా ప్రధాన వెబ్‌సైట్లు లేదా యాప్స్ ఏవి నిర్మించబడ్డాయో తెలుసుకోండి. Instagram, Netflix, లేదా మీరు ఆడటం ఆపలేని మొబైల్ గేమ్ ఏ భాషలో తయారయ్యాయో ఎక్కడో మీరు ఆశ్చర్యపోతారు!
> 💡 **గమనించండి**: మీరు ఈ భాషలలో నిపుణులు అవ్వడానికి ప్రయత్నించట్లేదు. మీరు ఇక్కడ తలదాపుగా నివసించే పరిసరాన్ని తెలుసుకుంటున్నారు, అక్కడ మీరు శిబిరం ఏర్పాటు చేసుకోవాలనుకుంటున్నారో నిర్ణయించుకోడానికి ముందు. సమయం తీసుకోండి, సంతోషంగా ఉండండి, మీ ఆసక్తి పటిష్టంగా ఉండనీయండి!
## మీరు కనుగొన్నారు దాన్ని జరుపుకుందాం!
హోలీ మోలీ, మీరు ఈ రోజు చాలా అద్భుత విషయాలను గ్రహించారు! నేను నిజంగా ఆనందిస్తున్నాను మీరు ఈ అద్భుత ప్రయాణంలో ఎంతమేర పడ్డారో చూడటానికి. మరియు గుర్తుంచుకోండి – ఇది పరీక్ష కాదు, ఒకటీ కూడా సరైనదే కావాల్సిన అవసరం లేదు. ఇది మీరు ఈ ఆసక్తికర ప్రపంచం గురించి నేర్చుకున్న అన్ని చల్లని విషయాల పట్ల సంబరంగా ఉండటానికి అవకాశం!
[పోస్ట్-లెసన్ ప్రశ్నావళి తీసుకోండి](https://ff-quizzes.netlify.app/web/)
## సమీక్ష & స్వయంవెళుసు
**సమయం తీసుకోండి, అన్వేషించండి మరియు మే ఆటో!**
మీరు ఈ రోజు చాలా విషయాలను నేర్చుకున్నట్టు ఉంది, ఇది గర్వించదగిన విషయం! ఇప్పుడు ఆసక్తిని కలిగించే అంశాలను అన్వేషించే సరదా భాగం వచ్చింది. ఇది హోంవర్క్ కాదు – ఇది ఒక సాహసం!
**మీ ఆసక్తిని ప్రేరేపించే విషయాలను మరింత లోతుగా తెలుసుకోండి:**
**ప్రోగ్రామింగ్ భాషలతో చేతనáci చేయండి:**
- మీకు కనపడిన 2-3 భాషల అధికారిక వెబ్‌సైట్లను సందర్శించండి. ప్రతి భాషకి తన ప్రత్యేక persoonality మరియు కధ ఉంది!
- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), లేదా [Replit](https://replit.com/) వంటి ఆన్‌లైన్ కోడింగ్ ప్లేగ్రౌండ్లను ప్రయత్నించండి. ప్రయోగం చేయడానికి భయపడకండి – మీరు ఏమైనా పాడుచేస్తారు కాదండి!
- మీ ఇష్టమైన భాష ఎలా ఏర్పడింది అన్నదానిపై చదవండి. నిజంగా, కొందరు ఆరంభ కథనాలు ఆకట్టుకునే లక్షణం కలిగి ఉంటాయి మరియు భాషలు ఎలా పనిచేస్తాయో అర్థం చేసుకోవడానికీ సహాయపడతాయి.
**మీ కొత్త పరికరాలతో అలవాటు పడండి:**
- మీరు ఇప్పటివరకు Visual Studio Code డౌన్‌లోడ్ చేయకపోయా? ఇప్పుడే డౌన్‌లోడ్ చేసుకోండి – ఇది ఉచితం మరియు మీరు దీన్ని ఇష్టపడతారు!
- Extension మార్కెట్‌ప్లేస్‌ను కొన్ని నిమిషాలు బ్రౌజ్ చేయండి. ఇది మీ కోడ్ ఎడిటర్ కోసం ఒక యాప్ స్టోర్‌లాగా ఉంది!
- మీ బ్రౌజర్ డెవలపర్ టూల్స్‌ను తెరిచి చుట్టూ క్లిక్ చేయండి. ప్రతిదీ అర్థం చేసుకోవాలని ఈలాంటివి అనవసరం – అక్కడ ఉన్న వాటితో పరిచయమయ్యే ప్రయత్నం చేయండి.
**కమ్యూనిటీలో చేరండి:**
- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), లేదా [GitHub](https://github.com/) వంటి డెవలపర్ కమ్యూనిటీలను ఫాలో అవ్వండి. ప్రోగ్రామింగ్ కమ్యూనిటీ కొత్తవారిని ఆత్మీయంగా స్వాగతిస్తుంది!
- YouTube లో ప్రారంభ స్థాయి కోడింగ్ వీడియోలు చూడండి. మొదలు పెట్టినవారిని గుర్తున్నట్లుగా అద్భుతమైన క్రియేటర్లు చాలా ఉన్నారు.
- స్థానిక సమావేశాలు లేదా ఆన్‌లైన్ కమ్యూనిటీల్లో చేరాలని పరిశీలించండి. నాకు నమ్మండి, డెవలపర్లు కొత్తవారికి సహాయం చేయడం ఇష్టపడుతుంటారు!
> 🎯 **శ్రద్ధ పెట్టండి, నేను మీరు గుర్తుంచుకోవలసినది**: మీరు ఓ నిశ్చిత గంటలో కోడింగ్ మాంత్రికుడు అయ్యేలా అంచనా వేయకండి! మీరు ఈ అద్భుతమైన కొత్త ప్రపంచాన్ని పరిచయం చేసుకుంటున్నారు. సమయం తీసుకోండి, ప్రయాణాన్ని ఆనందించండి, మరియు గుర్తుంచుకోండి – మీరు అభిమానం చేసే ప్రతి డెవలపర్ కూడా ఒకప్పుడు మీరు ఉన్న స్థలంలోనే ఉత్సాహంగా, కొంత బాధతో కూర్చుని ఉండేవారు. అది సహజమే, ఇది మీరు సరిగ్గా చేస్తున్నట్లు సూచిస్తుంది!
## అసైన్‌మెంట్
[Reading the Docs](assignment.md)
> 💡 **మీ అసైన్‌మెంట్ కోసం ఒక చిన్న ప్రోత్సాహం**: మేము ఇంకా పరిచయమౌనట్లయిన కొన్ని సాధనాలను మీరే అన్వేషించాలి! మునుపటి ఎడిటర్లు, బ్రౌజర్లు, కమాండ్ లైన్ పరికరాలను పొదుపు చేయండి – అక్కడ మరిన్ని అద్భుతమైన అభివృద్ధి సాధనాల విశ్వం ఉంది అన్వేషించడానికి కోసం ఎదురు చూస్తోంది. నిత్యమూ నిర్వహించే మరియు సజావుగా ఆపరేట్ అయ్యే కమ్యూనిటీలను కలిగిన వాటిని వెతకండి (ఈ సాధనాలకు ఉత్తమ ట్యూటోరియల్స్ మరియు సహాయక వ్యక్తులు ఉన్నారు, మీరు తగినపుడు సాయం కోరగలుగుతారు).
---
## 🚀 మీ ప్రోగ్రామింగ్ ప్రయాణ టైం‌లైన్
### ⚡ **తదుపరి 5 నిమిషాలలో మీరు చేసే పనులు**
- [ ] మీ దృష్టిని ఆకర్షించిన 2-3 ప్రోగ్రామింగ్ భాషల వెబ్‌సైట్లను బుక్‌మార్క్ చేయండి
- [ ] Visual Studio Code డౌన్‌లోడ్ చేయండి, ముందే చేయకపోయినట్లయితే
- [ ] మీ బ్రౌజర్ యొక్క DevTools (F12) ను ఓపెన్ చేసి ఏదైనా వెబ్‌సైట్ చుట్టూ క్లిక్ చేయండి
- [ ] ఒక ప్రోగ్రామింగ్ కమ్యూనిటీలో చేరండి (Dev.to, Reddit r/webdev లేదా Stack Overflow)
### ⏰ **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పాఠం తర్వాత క్విజ్ పూర్తి చేసి మీ సమాధానాలను పరిశీలించండి
- [ ] GitHub Copilot ఎక్స్‌టెన్షన్‌తో VS Code సెటప్ చేయండి
- [ ] 2 విభిన్న ప్రోగ్రామింగ్ భాషలలో "Hello World" ఉదాహరణను ఆన్‌లైన్‌లో ట్రై చేయండి
- [ ] YouTube లో "Day in the Life of a Developer" వీడియో చూడండి
- [ ] మీ ప్రోగ్రామింగ్ భాష డ్ర్వేటివ్ వర్క్‌ను మొదలుపెట్టండి (సవాలు నుండి)
### 📅 **మీ వారాంత సాహసం**
- [ ] అసైన్‌మెంట్ పూర్తి చేసి 3 కొత్త అభివృద్ధి సాధనాలను అన్వేషించండి
- [ ] 5 డెవలపర్లను లేదా ప్రోగ్రామింగ్ ఖాతాలను సోషల్ మీడియాలో ఫాలో చేయండి
- [ ] CodePen లేదా Replit లో ఒక చిన్న ప్రాజెక్టు నిర్మించండి ("Hello, [Your Name]!" కూడా సరిపోతుంది)
- [ ] ఒక డెవలపర్ బ్లాగ్ పోస్ట్ చదవండి, వారి కోడింగ్ ప్రయాణం గురించి
- [ ] ఒక వర్చువల్ మీట్‌ప్లో చేరండి లేదా ప్రోగ్రామింగ్ టాక్ చూడండి
- [ ] మీ ఎంచుకున్న భాషను ఆన్‌లైన్ ట్యూటోరియల్స్ తో నేర్చుకోవడం మొదలుపెట్టండి
### 🗓️ **మీ నెల వ్యాప్తి మార్పు**
- [ ] మీ మొదటి చిన్న ప్రాజెక్టును నిర్మించండి (ఏదైనా సులభమైన వెబ్‌పేజీ కూడా సరిపోతుంది)
- [ ] ఓపెన్ సోర్స్ ప్రాజెక్టుకు కాలు వేసండి (మొదట డాక్యుమెంటేషన్ సవరణలతో ప్రారంభించండి)
- [ ] కొత్తగా మొదలు పెట్టిన వారిని మెంటర్ చేయండి
- [ ] మీ డెవలపర్ పోర్ట్‌ఫోలియో వెబ్‌సైట్ సృష్టించండి
- [ ] స్థానిక డెవలపర్ కమ్యూనిటీల లేదా స్టడీ గ్రూపులతో కనెక్ట్ అవ్వండి
- [ ] మీ తదుపరి అభ్యాస మైలురాయిని ప్లాన్ చేయడం మొదలుపెట్టండి
### 🎯 **చివరి ప్రతిబింబ తనిఖీ**
**ముందుకు సాగేము ముందు, ఒక క్షణం ఆగి సంబరించండి:**
- ఈ రోజు ప్రోగ్రామింగ్ గురించి మీకు ఏమి ఉత్తేజన ఇచ్చిందని అనిపించింది?
- మొదటిసారి పరిశీలించాలనే టూల్ లేదా కాన్సెప్ట్ ఏది?
- ఈ ప్రోగ్రామింగ్ ప్రయాణాన్ని ప్రారంభించడంపై మీ భావనలు ఏంటి?
- ఇప్పుడే ఒక డెవలపర్‌ను అడగదలచుకున్న ఒక ప్రశ్న ఏంటి?
```mermaid
journey
title మీ ఆత్మవిశ్వాసం నిర్మాణ యాత్ర
section ఇవాళ
ఆశ్చర్యపోయిన: 3: You
బాపు పడ్డ: 4: You
ఉత్సాహంగా ఉన్న: 5: You
section ఈ వారం
అన్వేషణ: 4: You
నేర్చుకుంటున్న: 5: You
కనెక్ట్ అవుతున్న: 4: You
section వచ్చే నెల
నిర్మాణం: 5: You
ఆత్మవిశ్వాసంతో ఉన్న: 5: You
ఇతరులకు సహాయం చేస్తున్న: 5: You
```
> 🌟 **గుర్తుంచుకోండి**: ప్రతి నిపుణుడు ఒకటి ఒకప్పుడు ప్రారంభుడు. ప్రతి సీనియర్ డెవలపర్ ఒకప్పుడు మీరు ఉన్న స్థితిలో ఉన్నారు – ఉత్సాహంగా, కొంత ఓవర్‌వెల్మ్ అయ్యారు మరియు ఏమి సాధ్యం అనేది తెలుసుకోవాలనే అరుదైన ఆసక్తితో. మీరు అద్భుతమైన సంస్థలో ఉన్నారు, ఈ ప్రయాణం అద్భుతంగా ఉంటుంది. ప్రోగ్రామింగ్ యొక్క అద్భుత ప్రపంచానికి స్వాగతం! 🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అసంకల్పన**:
ఈా దస్తావేజును AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. ఖచ్చితత్వానికి మేము ప్రయత్నిస్తున్నప్పటికీ, స్వయంచాలక అనువాదాలలో పొరపాట్లు లేదా తప్పులు ఉండొచ్చు. మూల దస్తావేజు దాని స్థానిక భాషలోని అధికారిక మూలంగా పరిగణించబడాలి. ముఖ్యమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం వాడకం వల్ల ఏర్పడిన ఏదైనా అపార్థాలు లేదా తప్పుగా అర్థం చేసుకోవడాలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

78
translations/te/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
Unescape View File

@ -0,0 +1,78 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
"translation_date": "2026-01-08T20:22:09+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
"language_code": "te"
}
-->
# అసైన్‌మెంట్: ఆధునిక వెబ్ అభివృద్ధి సాధనాలను అన్వేషించడం
## సూచనలు
వెబ్ అభివృద్ధి పరిసరాలు వెరీయస్ ప్రత్యేక సాధనాలను కలిగి ఉంటాయి, ఇవి డెవలపర్లకు అనువైనంగా అప్లికేషన్‌లు అభివృద్ధి, పరీక్షించడం మరియు నిర్వహణలో సహాయం చేస్తాయి. ఈ పాఠంలో పరిగణించబడని సాధనాలను పరిశీలించి అర్థం చేసుకోవడం మీ పని.
**మీ మిషన్:** ఈ పాఠంలో కవర్ చేయబడని **మూడు సాధనాలు** ఎంచుకోండి (ఇప్పుడు ఉన్న కోడ్ ఎడిటర్లు, బ్రౌజర్లు, లేదా కమాండ్ లైన్ సాధనాలు వలన తప్పించుకోండి). ఆధునిక వెబ్ అభివృద్ధి వర్క్ఫ్లోలలో ప్రత్యేక సమస్యలను పరిష్కరించేవి అయిన సాధనాలపై దృష్టి పెట్టండి.
**ప్రతి సాధన కోసం అందించవలసినవి:**
1. **సాధన పేరు మరియు వర్గం** (ఉదాహరణకు, "Figma - డిజైన్ సాధనం" లేదా "Jest - టెస్టింగ్ ఫ్రేమ్‌వర్క్")
2. **ఉద్దేశ్యం మరియు లాభాలు** - 2-3 వాక్యాలలో వెబ్ డెవలపర్ ఎందుకు ఈ సాధనం ఉపయోగిస్తాడో, ఏ సమస్యలను పరిష్కరిస్తుందో వివరించండి
3. **అధికారిక డాక్యుమెంటేషన్ లింక్** - సాధన అధికారిక డాక్యుమెంటేషన్ లేదా వెబ్‌సైట్‌కు లింక్ అందించండి (కేవలం ట్యుటోరియల్ సైట్లకి కాకుండా)
4. **వాస్తవ ప్రపంచ సందర్భం** - ఈ సాధనం ఒక ప్రొఫెషనల్ అభివృద్ధి వర్క్ఫ్లోలో ఎలా ఉపయోగపడుతుందో ఒక ఉదాహరణ చూపండి
## సూచించిన సాధన వర్గాలు
ఈ వర్గాల నుండి సాధనాలను పరిశీలించండి:
| వర్గం | ఉదాహరణలు | అవి చేసే పనులు |
|----------|----------|--------------|
| **బిల్డ్ టూల్స్** | Vite, Webpack, Parcel, esbuild | త్వరిత అభివృద్ధి సర్వర్లతో ఉత్పత్తి కోడ్‌ను బండిల్ చేసి ఆప్టిమైజ్ చేస్తాయి |
| **టెస్టింగ్ ఫ్రేమ్‌వర్క్స్** | Vitest, Jest, Cypress, Playwright | కోడ్ సరిగా పనిచేస్తుందో లేదో నిర్ధారించి, బగ్స్‌ను డిప్లాయ్‌మెంట్ ముందు పట్టుకుంటాయి |
| **డిజైన్ టూల్స్** | Figma, Adobe XD, Penpot | మాకప్‌లు, ప్రోటోటైప్స్ మరియు డిజైన్ సిస్టమ్స్‌ను కలిసి రూపొందిస్తాయి |
| **డిప్లాయ్‌మెంట్ ప్లాట్‌ఫామ్స్** | Netlify, Vercel, Cloudflare Pages | వెబ్‌సైట్లను ఆటోమాటిక్ CI/CDతో హోస్ట్ చేసి పంపిణీ చేస్తాయి |
| **వెర్షన్ కంట్రోల్** | GitHub, GitLab, Bitbucket | కోడ్ మార్పులు, సహకారం, మరియు ప్రాజెక్ట్ వర్క్ఫ్లోలను నిర్వహిస్తాయి |
| **CSS ఫ్రేమ్‌వర్క్స్** | Tailwind CSS, Bootstrap, Bulma | ముందస్తుగా తయారుచేసిన కంపోనెంట్ లైబ్రరీస్‌తో స్టైలింగ్ వేగవంతం చేస్తాయి |
| **ప్యాకేజ్ మేనేజర్లు** | npm, pnpm, Yarn | కోడ్ లైబ్రరీస్ మరియు డిపెండెన్సీలను ఇన్స్టాల్ చేసి నిర్వహిస్తాయి |
| **అక్సెసిబిలిటీ టూల్స్** | axe-core, Lighthouse, Pa11y | సమాజసేవ్ డిజైన్ మరియు WCAG అనుగుణతను పరీక్షిస్తాయి |
| **API అభివృద్ధి** | Postman, Insomnia, Thunder Client | అభివృద్ధి సమయంలో APIలను పరీక్షించి డాక్యుమెంట్ చేస్తాయి |
## ఫార్మాట్ అవసరాలు
**ప్రతి సాధన కొరకు:**
```
### [Tool Name] - [Category]
**Purpose:** [2-3 sentences explaining why developers use this tool]
**Documentation:** [Official website/documentation link]
**Workflow Integration:** [1 sentence about how it fits into development process]
```
## నాణ్యత మార్గదర్శకాలు
- **ప్రస్తుత సాధనాలను ఎంచుకోండి**: 2025లో చురుకైన మరియు విస్తృతంగా ఉపయోగించే సాధనాలను ఎంచుకోండి
- **మూల్యంపై దృష్టి పెట్టండి**: సాధనం ఏమి చేస్తుందో కాకుండా, దాని ప్రత్యేక లాభాలు వివరించండి
- **వృత్తిపరమైన సందర్భం**: వ్యక్తిగత హాబీ తత్వంతో కాకుండా అభివృద్ధి బృందాలలో ఉపయోగించే సాధనాలు పరిగణించండి
- **వివిధ ఎంపిక**: వర్క్ఫ్లో పరిధిని చూపేందుకు వేర్వేరు వర్గాల నుండి సాధనాలు ఎంచుకోండి
- **ఆధునిక ప్రాముఖ్యత**: ప్రస్తుత వెబ్ అభివృద్ధి ధోరణులకు మరియు ఉత్తమ ఆచారాలకు అనుగుణంగా సాధనాలను ప్రాధాన్యమివ్వండి
## రూబ్రిక్
| అద్భుతం | మంచిది | మెరుగుదల అవసరం |
|-----------|------|-------------------|
| **ప్రతి సాధనం ఎందుకు ఉపయోగిస్తారో మరియు ఏ సమస్యలను పరిష్కరిస్తుందో స్పష్టంగా వివరించబడింది** | **సాధనం చేసే పనిని వివరించారు కానీ దాని విలువ గురించి కొద్దిగా ఆలోచించలేదు** | **సాధనాల జాబితా ఇచ్చారు కానీ వాటి ఉద్దేశ్యం లేదా లాభాలు వివరించలేదు** |
| **అధికారిక డాక్యుమెంటేషన్ లింకులు అందించబడ్డాయి** | **మొత్తం సుమ మీద అధికారిక లింకులు, 1-2 ట్యుటోరియల్ సైట్లతో** | **ట్యుటోరియల్ సైట్లపై ఆధారపడ్డారు, అధికారిక డాక్యుమెంటేషన్ ఎక్కువగా ఇవ్వలేదు** |
| **ప్రస్తుత, వృత్తిపరమైన ఉపయోగంలో ఉన్న సాధనాలను వివిధ వర్గాల నుండి ఎంచుకున్నారు** | **బాగా ఎంచుకున్నారు కానీ వర్గాల వైవిధ్యం తక్కువది** | **పాతగా ఉన్న సాధనాలు లేదా ఒక్క వర్గం నుండి మాత్రమే ఎంచుకున్నారు** |
| **సాధనాలు అభివృద్ధి వర్క్ఫ్లోలో ఎలా ఉపయోగపడతాయో అర్ధం చూపించారు** | **వృత్తి సందర్భంపై కొంత అవగాహన చూపించారు** | **వర్క్ఫ్లో సందర్భం లేకుండా సాధన ఫీచర్‌లపై మాత్రమే దృష్టి పెట్టారు** |
> 💡 **అన్వేషణ సూచన:** వెబ్ డెవలపర్ ఉద్యోగ ప్రకటనల్లో ఉన్న సాధనాలు చూడండి, ప్రముఖ డెవలపర్ సర్వేల మీద చూడండి లేదా GitHubపై విజయవంతమైన ఓపెన్ సోర్స్ ప్రాజెక్టుల డిపెండెన్సీలను పరిశీలించండి!
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము నిర్దిష్టత కోసం ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో పొరపాట్లు లేదా అసమగ్రతలు ఉండవచ్చు. మౌలిక పత్రం దాని స్థానిక భాషలో అధికారిక మూలంగా పరిగణించాలి. కీలక సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదం సిఫార్సు చేస్తాము. ఈ అనువాదం ఉపయోగం వల్ల కలిగిన ఏదైనా అవగాహన లోపం లేదా తప్పుదోవలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

778
translations/te/1-getting-started-lessons/2-github-basics/README.md
Unescape View File

@ -0,0 +1,778 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5c383cc2cc23bb164b06417d1c107a44",
"translation_date": "2026-01-08T20:26:56+00:00",
"source_file": "1-getting-started-lessons/2-github-basics/README.md",
"language_code": "te"
}
-->
# GitHub పరిచయం
హే అక్కడ, భవిష్యత్తు డెవలపర్! 👋 ప్రపంచవ్యాప్తంగా కోట్ల కోడర్లలో భాగమవ్వడానికి సిద్ధమా? నేను నిజంగా నీకు GitHub ని పరిచయం చేయడానికి ఉత్సాహంగా ఉన్నాను – దీన్ని ప్రోగ్రామర్ల సోషల్ మీడియా ప్లాట్‌ఫారంగా భావించండి, కాని మీరు మీ భోజనపు ఫోటోల్ని పంచుకోకుండా, కోడ్ ని పంచుకుని అద్భుతమైన విషయాలను కలసి నిర్మిస్తున్నాం!
ఇది నాకు అసాధారణంగా అనిపిస్తుంది: మీ ఫోన్‌లో ప్రతి యాప్, మీరు సందర్శించే ప్రతి వెబ్‌సైట్, మీరు నేర్చుకునే ఎక్కువ టూల్స్ GitHub వంటి ప్లాట్‌ఫారాలపై కలసి పని చేస్తున్న డెవలపర్ల జట్లు నిర్మించటం. మీరు ఇష్టపడే ఆ సంగీత యాప్? మీరు పోలిన ఎవరో దానికి తోడ్పడారు. మీరు వదలలేని ఆ గేమ్? అవును, అది GitHub సహకారంతో ఇవ్వబడింది. ఇప్పుడు మీరు ఆ అద్భుతమైన కమ్యూనిటీలో భాగం కావడాన్ని నేర్చుకోబోతున్నారు!
ప్రథమేమీ ఇది చాలా అనిపించవచ్చేమో నాకు తెలుసు – నేను నా మొదటి GitHub పేజీ చూస్తూ "ఇది ఏమిటి అని అర్థమైందా?" అనుకుంటూ నిలబడినప్పుడు నాకు అక్కడ నుండి మొదలైంది. కాని ఐతే: ప్రతి డెవలపర్ మీరు ఉన్న స్థాయిలోనేం మొదలుపెట్టారు. ఈ పాఠం చివరిలో, మీకు మీ స్వంత GitHub రిపోసిటరీ (ఇది మీ వ్యక్తిగత ప్రాజెక్ట్ ప్రదర్శనలాగా ఆకాశంలో ఉన్నట్లయితే) ఉంటుంది, మీ పని ఎలా సేవ్ చేయాలో, ఇతరులతో పంచుకోవడం ఎలా నేర్చుకుంటారు, మరియు కోట్ల మందికి ఉపయోగపడే ప్రాజెక్టులకు ఎలా కాంట్రిబ్యూట్ చేయాలో కూడా తెలుసుకుంటారు.
మనం కలసి ఈ ప్రయాణం తీసుకుందాం, ఒక్కో స్టెప్పులో ఒక్కోసారి. తొందరగా లేదు, ఒత్తిడి లేదు – కేవలం మీరు, నేను, మరియు మీరు త్వరలో మీ కొత్త మిత్రులయ్యే అద్భుతమైన టూల్స్‌!
![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.te.png)
> స్కెచ్ నోట్ [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title మీ GitHub సాహసం ఈ రోజు
section సెటప్
Git ఇన్‌స్టాల్ చేయండి: 4: మీరు
ఖాతా సృష్టించండి: 5: మీరు
మొదటి రిపాజిటరీ: 5: మీరు
section Git అంద mastered
స్థానిక మార్పులు: 4: మీరు
కమిట్లు & పుషులు: 5: మీరు
బ్రాంచింగ్: 4: మీరు
section సహకరించండి
ప్రాజెక్టులను ఫోర్క్ చేయండి: 4: మీరు
పుల్ రిక్వెస్టులు: 5: మీరు
ఓపెన్ సోర్స్: 5: మీరు
```
## ప్రీ-లెక్చర్ క్విజ్
[Pre-lecture quiz](https://ff-quizzes.netlify.app)
## పరిచయం
నిజంగా రసమైన విషయాల్లోకి దూకేముందు, మీ కంప్యూటర్‌ని GitHub మ్యాజిక్ కొరకు సిద్దం చేద్దాం! ఇది ఒక మాస్టర్‌పీస్ సృష్టించే ముందుగా మీ చిత్రకల సామగ్రిని సర్దుబాటు చేయడం లాగా – సరైన టూల్స్‌తో సర్వం చాలా సులభంగా, మరింత ఆనందకరంగా ఉంటుంది.
నేను ఒక్కో సెట్‌లతొ మీకు ప్రైవేట్ గా గైడ్ చేస్తాను, మరియు మీరు మొదటినుండి భయపడకూడదు. ఏదైనా వెంటనే క్లిక్ కాకపోతే, అది పూర్తిగా సహజం! నేను నా మొదటి డెవలప్‌మెంట్ ఇన్విరాన్మెంట్‌ని సెట్ చేసుకున్నప్పుడు, నేను ప్రాచీన హైరోగ్లిఫ్లను చదవడానికి ప్రయత్నిస్తూ భావించాను. ప్రతి డెవలపర్ మీరు ఉన్న స్థితిలోనే ఉంది, వారు సరైనదిగా చేయట్లేదా అనిపించుకునే ఆలోచనతో. స్పాయిలర్: మీరు ఇక్కడ నేర్చుకుంటున్నారు కాబట్టి, మీరు ఇప్పటికే సరైనదిగా చేస్తున్నారు! 🌟
ఈ పాఠం లో మనం చర్చించబోదున్నాం:
- మీ మెషీన్‌లో మీరు చేసిన పని ట్రాక్ చేయడం
- ఇతరులతో ప్రాజెక్టులపై పని చేయడం
- ఓపెన్ సోర్స్ సాఫ్ట్‌వేర్‌కు ఎలా కాంట్రిబ్యూట్ చేయాలి
### ముందస్తు అవసరాలు
GitHub మ్యాజిక్ కొరకు మీ కంప్యూటర్‌ని సిద్దం చేద్దాం! పిండి వద్దంట, ఈ సెట్‌అప్ ఒక్కసారికే చేయాలి, ఆపై మీ కోడింగ్ ప్రయాణం మొత్తం సిద్దంగా ఉంటుంది.
అప్పుడు, ఫౌండేషన్‌తో మొదలు చేద్దాం! మొదట, Git మీ కంప్యూటర్‌పై ఉందో లేదో చూద్దాం. Git అనేది ప్రొఫెషనల్ అసిస్టెంట్ లాంటిది, ఇది ప్రతి చిన్న కోడ్ మార్పును గుర్తుంచుకుంటుంది – Ctrl+S అని ప్రతిసారి జోరుగా డబ్బా కొట్టటం కంటే చాలా బెటర్ (మనం అందరం అనుభవించాము!).
మీకున్న టెర్మినల్లో ఈ మాంత్రిక ఆజ్ఞ వ్రాయండి:
`git --version`
Git ఇంకా లేకపోతే, ఎలాంటి అబ్బాయిలేదు! [download Git](https://git-scm.com/downloads) కి వెళ్ళి డౌన్లోడ్ చేసుకోండి. ఇన్స్టాల్ చేసిన తర్వాత, Git ని సరి చేసినట్లు పరిచయం చేద్దాం:
> 💡 **మొదటి సెట్‌అప్**: ఈ ఆజ్ఞలు Git కు మీరు ఎవరిమీ అని చెప్తాయి. ప్రతి కమిట్‌కు ఈ సమాచారం జతచేయబడుతుంది, కాబట్టి పేరు మరియు ఇమెయిల్‌ను పబ్లిక్‌గా పంచుకోవడం కోసం మీరు సంతోషంగా ఉండే వివరాలను ఎంచుకోండి.
```bash
git config --global user.name "your-name"
git config --global user.email "your-email"
```
Git ఇప్పటికే సెటప్ అయిందా కాదా తెలుసుకోవడానికి మీరు టైప్ చేయవచ్చు:
```bash
git config --list
```
మీకు GitHub అకౌంట్, కోడ్ ఎడిటర్ (Visual Studio Code వంటివి), మరియు టెర్మినల్ (లేదా: command prompt) కూడా అవసరం.
[github.com](https://github.com/) కు వెళ్లి అకౌంట్ క్రియేట్ చేసుకోండి లేదా లాగిన్ అయ్యి మీ ప్రొఫైల్ పూర్తి చేసుకోండి.
💡 **మోడర్న్ సూచన**: [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) సెటప్ చేయడం లేదా [GitHub CLI](https://cli.github.com/) ఉపయోగించడం సులభమైన ఆథెంటికేషన్ కోసం పాస్వర్డ్లు లేకుండా ప్రయత్నించండి.
✅ GitHub మాత్రమే కాకుండా మరికొన్ని కోడ్ రిపోజిటరీలు ఉన్నాయి, కానీ GitHub అత్యంత ప్రసిద్ధది.
### సిద్ధత
మీకు ఒక కోడ్ ప్రాజెక్టుతో కూడిన లోకల్ మిషన్‌లో ఒక ఫోల్డర్ అవసరం (ల్యాప్‌టాప్ లేదా PC), మరియు GitHub లో ఒక పబ్లిక్ రిపోసిటరీ అవసరం, ఇది ఇతరుల ప్రాజెక్టులకు ఎలా కాంట్రిబ్యూట్ చేయాలో ఉదాహరణగా ఉపయోగపడుతుంది.
### మీ కోడ్ భద్రంగా ఉంచడం
సెక్యూరిటీ గురించి ఒకటిది చెప్పుకుందాం – కానీ భయపడకండి, మేము మీను భయపెట్టాల్సిన అంశాలు చూపించమని కాదు! ఈ సెక్యూరిటీ ఆచరణలను మీ కారు లేదా ఇల్లు లాక్ చేయటం లాంటిదిగా పరిగణించండి. ఇవి సులభమైన అలవాట్లు, ఇది మీ శ్రమను కాపాడుతుంది.
మనం GitHub తో పని చేసే ఆధునిక, భద్రతగల మార్గాలను మొదట నుండే చూపిస్తాం. దీంతో మీరు మంచి అలవాట్లు పెంపొందిస్తారు, అవి మీ కోడింగ్ కెరీర్‌లో మీకు సేవ చేస్తాయి.
GitHub పని సమయంలో, సెక్యూరిటీ ఉత్తమ ఆచరణలను అనుసరించడం ముఖ్యము:
| సెక్యూరిటీ ప్రాంతం | ఉత్తమ ఆచరణ | ఎందుకు ముఖ్యం |
|---------------------|-------------|--------------|
| **ఆథెంటికేషన్** | SSH కీస్ లేదా Personal Access Tokens ఉపయోగించండి | పాస్వర్డ్లు తక్కువ భద్రతగలవిగా, వీటి వినియోగం తగ్గుతోంది |
| **టూ-ఫ్యాక్టర్ ఆథెంటికేషన్** | GitHub అకౌంట్‌లో 2FA ఎనేబుల్ చేయండి | అకౌంట్ రక్షణకు అదనపు స్థాయి |
| **రిపోసిటరీ భద్రత** | సెన్సెటివ్ సమాచారం ఎప్పుడూ కమిట్ చెయ్యకండి | API కీలు మరియు పాస్వర్డ్లు ప్రజా రిపోలో ఉండకూడదు |
| **డిపెండెన్సీ మేనేజ్‌మెంట్** | Dependabot ను అప్‌డేట్స్ కొరకు ఎనేబుల్ చేయండి | డిపెండెన్సీలు భద్రంగా మరియు అప్డేట్‌లలో ఉండేలా చూస్తుంది |
> ⚠️ **గురుత్వপূর্ণ సెక్యూరిటీ సూచన**: ఏ రిపోసిటరీకు API కీలు, పాస్వర్డ్లు లేదా సెన్సిటివ్ సమాచారం ఎప్పుడూ కమిట్ చేయవద్దు. సెన్సిటివ్ డేటాను రక్షించడానికి ఎన్‌విరాన్‌మెంట్ వేరియబుల్స్ మరియు `.gitignore` ఫైళ్ళను ఉపయోగించండి.
**ఆధునిక ఆథెంటికేషన్ సెటప్:**
```bash
# SSH కీని రూపొందించండి (ఆధునిక ed25519 అల్గోరిథం)
ssh-keygen -t ed25519 -C "your_email@example.com"
# Git ను SSH ఉపయోగించేందుకు సెట్ చేయండి
git remote set-url origin git@github.com:username/repository.git
```
> 💡 **ప్రొ టిప్**: SSH కీలు పాస్వర్డ్లు మళ్లీ మళ్లీ ఎంటర్ చేయాల్సిన అవసరాన్ని తొలగించి, సాంప్రదాయ ఆథెంటికేషన్ కంటే భద్రతగలవిగా ఉంటాయి.
---
## మీ కోడ్‌ని ప్రొలాగే నిర్వహించడం
సరే, ఇక్కడే నిజమైన ఆసక్తికరమైనది మొదలవుతుంది! 🎉 మనం ఇప్పుడు నేర్చుకోబోతున్నాం, ప్రొఫెషనల్స్ లాగా మీ కోడ్‌ను ఎలా ట్రాక్ చేయాలో, నిర్వహించాలో, మరియు నిజంగా ఇది ఒక గేమ్-చేంజర్.
ఇలా ఊహించండి: మీరు అద్భుతమైన కథ వ్రాస్తున్నారు, ప్రతి ప్రాథమికా ముసాయిదా, ప్రతి శుభ్రమైన ఎడిట్, మరియు ప్రతి "వావ్, ఇది శ్రేష్టం!" క్షణాలు ట్రాక్ చేయాలనుకుంటున్నారు. అదే Git మీ కోడ్ కు చేస్తుంది! అది అద్భుతమైన టైమ్-ట్రావెలింగ్ నోటుబుక్ లాంటిది, ఇది ప్రతీ అక్షరం, ప్రతీ మార్పు, "అయ్యోయ్, ఇది మొత్తం బ్రోక్ అయింది" క్షణాన్ని గుర్తుంచుకుంటుంది, వెంటనే అన్డూ చేయగలుగుతుంది.
నేను నిజముగా చెప్పాలంటే – మొదట ఇది కొంచెం భారంగా అనిపించవచ్చు. నేను మొదలుపెట్టినప్పుడు, నేను "నా ఫైళ్ళను సాధారణంగా ఎలా సేవ్ చేయలేను?" అనుకున్నాను. కానీ నమ్మండి: Git మీకు క్లిక్ ఐపోతే (మరియు భావిస్తున్నాను ఐతే!), మీరు ఆ లైట్బల్ప్ మోమెంట్స్‌ను పొందుతారు – "నేను ఎప్పుడూ Git లేకుండా ఎలా కోడ్ చేసేవాడిని?" అనిపిస్తుంది. ఇది ఎలా ఎప్పుడూ నడుస్తూ వచ్చారు కానీ ఇప్పుడు ఎగరడం నేర్చుకున్నట్లే!
ఓలా, మీరు లోకల్‌లో ఒక ఫోల్డర్‌లో కోడ్ ప్రాజెక్ట్ ఉంచుకున్నారని అనుకుందాం, మరియు మీరు మీ ప్రగతిని git – వర్షన్ కంట్రోల్ సిస్టమ్ తో ట్రాక్ చేయాలనుకుంటున్నారు. కొందరు git వినియోగం భవిష్యత్ స్వయానికి ప్రేమ లేఖ వ్రాయడంలా అనుకుంటారు. మీ కమిట్ సందేశాలను రోజులు, వారాలు, నెలల తరువాత చదివితే, మీరు ఎందుకు ఆ నిర్ణయం తీసుకున్నారు లేదా మార్పును "రాల్బ్యాక్" చేయవచ్చు – అంటే మీరు మంచి కమిట్ సందేశాలు వ్రాస్తే.
```mermaid
flowchart TD
A[📁 మీ ప్రాజెక్టు ఫైళ్ల] --> B{ఇది Git రిపోజిటరీనా?}
B -->|కాకపోతే| C[git init]
B -->|అవును| D[మార్పులు చేయండి]
C --> D
D --> E[git add .]
E --> F["git commit -m 'సందేశం'"]
F --> G[git push]
G --> H[🌟 GitHubపై కోడ్!]
H --> I{కలసి పనిచేయాలనుకుంటున్నారా?}
I -->|అవును| J[Fork & Clone]
I -->|కాదు| D
J --> K[బ్రాంచ్ సృష్టించండి]
K --> L[మార్పులు చేయండి]
L --> M[పుల్ రిక్వెస్ట్]
M --> N[🎉 సహకరించడం!]
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### పని: మీ మొదటి రిపోసిటరీ క్రియేట్ చేయండి!
> 🎯 **మీ మిషన్ (నేను మీకు చాలా ఉత్సాహంగా ఉన్నాను!)**: మనం కలిసి మీ మొదటి GitHub రిపోజిటరీని సృష్టించబోతున్నాం! మనం ఇక్కడ పూర్తిచేసేపుడు, మీ కోడ్ ఆ ఇంటర్నెట్ లో చిన్న మూలం ఉంటుంది, మరియు మీరు మొదటి "commit" (అంటే తెలివిగా మీ పనిని సేవ్ చేస్తున్నట్టు) చేశారు.
>
> ఇది నిజంగా ఒక ప్రత్యేక క్షణం – మీరు అధికారికంగా ప్రపంచవ్యాప్తంగా ఉన్న డెవలపర్స్ సమూహంలో చేరబోతున్నారు! నేను నా మొదటి రిపో క్రియేట్ చేసిన సందర్భం మర్చిపోలేను – "వావ్, నేను నిజంగా చేస్తున్నాను" అనిపించింది!
ఈ అడ్వెంచర్ లో మనం ఒక్కో దశలో చూద్దాం. ఒక్కటో ఒక్కటో విడిగా తీసుకోండి – తొందరి అవసరం లేదు, ప్రతి దశ అర్థమవుతుంది అని హామీ ఇస్తాను. మీరు అభిమానించే ప్రతి కోడింగ్ స్టార్ కూడా ఒకప్పుడు నేడు మీరు కూర్చున్న స్థలంలో కూర్చొని మొదటి రిపోకే సృష్టిస్తున్నది. ఎంత సరదాగా ఉంది కదా?
> వీడియోను చూడండి
>
> [![Git మరియు GitHub ప్రాథమిక వీడియో](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
**మనమిద్దరం కలిసి చేద్దాం:**
1. **GitHub లో మీ రిపోజిటరీ సృష్టించండి**. GitHub.com కి వెళ్ళి ఆ ప్రకాశవంతమైన ఆకుపచ్చ **New** బటన్ (లేదా పై భాగం కుడి కోణంలో ఉన్న **+** గుర్తు) చూడండి. దాన్ని క్లిక్ చేసి **New repository** ఎంచుకోండి.
ఇలా చేయండి:
1. మీ రిపోకు ఒక పేరు పెట్టండి – మీకు అర్థం అయ్యేలా!
1. మీరు ఇష్టపడ్డట్లయితే డిస్క్రిప్షన్ జోడించండి (ఇది ఇతరులకు మీ ప్రాజెక్ట్ గురించి అర్థం చేసుకోవడానికి సహాయపడుతుంది)
1. ఇది పబ్లిక్ చేయాలనుకుంటున్నారా (ప్రతి ఒక్కరు చూడవచ్చు) లేదా ప్రైవేట్ చేయాలనుకుంటున్నారా (కేవలం మీరు మాత్రమే)
1. నేను README ఫైలు జోడించడానికి బాక్స్‌లో టిక్ చేయమని సలహా ఇస్తాను – ఇది మీ ప్రాజెక్ట్ ముందు పేజీలా ఉంటుంది
1. **Create repository** క్లిక్ చేసి సంబరించండి – మీరు ఈ చిన్నారిని సృష్టించారు! 🎉
2. **మీ ప్రాజెక్ట్ ఫోల్డర్‌కి చేరండి**. ఇప్పుడు మీ టెర్మినల్ తెరవండి (భయపడవద్దు, అది అంత భయంకరం కాదు!). మీ కంప్యూటర్‌కు మీ ప్రాజెక్ట్ ఫైళ్ళు ఎక్కడున్నాయని చెప్పాలి. ఈ ఆజ్ఞ వ్రాయండి:
```bash
cd [name of your folder]
```
**మనం ఇక్కడ చేస్తున్నది:**
- మేము "హే కంప్యూటర్, నా ప్రాజెక్ట్ ఫోల్డర్‌కి తీసుకెళ్లి" అని చెప్తున్నాము
- ఇది మీ డెస్క్‌టాప్‌పై ఒక ప్రత్యేక ఫోల్డర్ తెరవడానికి సరిపోతుంది, కానీ మనం టెక్స్ట్ ఆజ్ఞలతో చేస్తున్నాము
- `[name of your folder]` స్థానంలో మీ ప్రాజెక్ట్ ఫోల్డర్ ప్రామాణిక పేరు ఉంచండి
3. **మీ ఫోల్డర్‌ను Git రిపోసిటరీగా మార్చండి**. ఇక్కడ మ్యాజిక్ జరుగుతుంది! వ్రాయండి:
```bash
git init
```
**ఇక్కడ ఏమైంది (చాలా చక్కటి విషయం!):**
- Git మీ ప్రాజెక్ట్‌లో గోప్యమైన `.git` ఫోల్డర్ క్రియేట్ చేసింది – మీరు చూడరు, కానీ అది ఉంది!
- మీ సాధారణ ఫోల్డర్ ఇప్పుడు "రిపోసిటరీ" అయింది, ఇది మీరు చేసిన ప్రతి మార్పును ట్రాక్ చేస్తుంది
- ఇది మీ ఫోల్డర్ కి సూపర్‌పవర్స్ ఇచ్చిందే అని అర్థం
4. **ఏం జరుగుతుందో చూద్దాం**. ఇప్పుడు Git మీ ప్రాజెక్ట్ గురించి ఏమని అనుకుంటుందో చూద్దాం:
```bash
git status
```
**Git మీకు ఏం చెబుతోంది అనేది అర్థం చేసుకోండి:**
మీరు దీని లాగా ఏదైనా చూడవచ్చు:
```output
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: file.txt
modified: file2.txt
```
**ప్యానిక్ అవ్వద్దు! దీని అర్ధం:**
- **ఎరుపు** రంగులో ఉన్న ఫైల్స్ మార్చబడ్డాయి కానీ ఇప్పటికీ సేవ్ కోసం సిద్ధంగా లేవు
- **ఆకుపచ్చ** (మీరు చూసినప్పుడు) రంగులో ఉన్న ఫైల్స్ సేవ్ కోసం సిద్ధంగా ఉన్నాయి
- Git సహాయం చేస్తోంది, తర్వాత ఏమి చేయాలో అర్థం చేసుకోవటానికి
> 💡 **ప్రొ టిప్**: `git status` ఆజ్ఞ మీను సదా సహాయకుడు! ఏదైనా మిశ్రమంగా అనిపిస్తే, Git ని అడగండి "ఇప్పుడు పరిస్థితి ఎలా ఉంది?"
5. **మీ ఫైళ్ళను సేవ్ చేయడానికి సిద్ధం చేయండి** (దీనిని "staging" అంటారు):
```bash
git add .
```
**మనం ఇప్పుడు చేసినది:**
- మేము Git కి "అరేస్ అన్ని ఫైలు ని తదుపరి సేవ్ లో చేర్చు" అని చెప్పారు
- `.` అంటే "ఈ ఫోల్డర్‌లో ఉన్న ప్రతి ఒక్కటి" అని అర్థం
- ఇప్పుడు మీ ఫైల్స్ "staged" అయి తదుపరి దశకు సిద్ధంగా ఉన్నాయి
**మరింత ఎంపికగా ఉండాలనుకుంటున్నారా?** మీరు కేవలం ప్రత్యేక ఫైళ్ళని జోడించవచ్చు:
```bash
git add [file or folder name]
```
**ఇలా చేయడానికి కారణం ఏమిటి?**
- కొన్ని సార్లు మీరు సంబంధ ఉన్న మార్పులను కలిపి సేవ్ చేయాలని కోరుకుంటారు
- ఇది మీ పని లాజికల్ భాగాలుగా ఉంచడంలో సహాయపడుతుంది
- మీరు ఏమి మారిందో, ఎప్పుడు మారిందో అర్థం చేసుకోవడంలో సులభతరం చేస్తుంది
**ఆలోచనలు మార్చుకున్నారా?** సమస్య లేదు! మీరు ఫైల్స్‌ను ఇలాగే unstaging చేయవచ్చు:
```bash
# అన్నింటిని అనస్తేజ్ చేయండి
git reset
# ఒక ఫైలు మాత్రమే అనస్తేజ్ చేయండి
git reset [file name]
```
పని కోల్పోవద్దు – ఇది మీ పని తీసివేయదు, కేవలం "సేవ్ చేయడానికి సిద్ధంగా" ఉన్న స్థానం నుండి తీసివేస్తుంది.
6. **మీ పనిని శాశ్వతంగా సేవ్ చేయండి** (మీ మొదటి commit!):
```bash
git commit -m "first commit"
```
**🎉 అభినందనలు! మీరు మీ మొదటి commit చేశారు!**
**ఇక్కడ ఏమైంది:**
- Git ఇప్పుడు మీరు staged చేసిన అన్ని ఫైల్స్ యొక్క "స్నాప్షాట్" తీసుకుంది
- మీరు వ్రాసిన commit సందేశం "first commit" ఈ సేవ్ పాయింట్ గురించి వివరిస్తుంది
- Git ఈ స్నాప్షాట్‌కి ప్రత్యేక ID ఇచ్చింది, మీరు ఎప్పుడూ దాన్ని వెతకవచ్చు
- మీరు అధికారికంగా మీ ప్రాజెక్ట్ చరిత్రను ట్రాక్ చేయడం ప్రారంభించారు!
> 💡 **భవిష్యత్ commit సందేశాలు**: తర్వాతి commit సందేశాలు మరింత వివరణాత్మకంగా ఉండాలి! "updated stuff" బదులు "Add contact form to homepage" లేదా "Fix navigation menu bug" వ్రాయండి. మీ భవిష్యత్ స్వయం మీకు కృతజ్ఞతలు తెలుపుతుంది!
7. **మీ లోకల్ ప్రాజెక్ట్‌ని GitHub తో కనెక్ట్ చేయండి**. ఇప్పటివరకూ, మీ ప్రాజెక్ట్ కేవలం మీ కంప్యూటర్లోనే ఉంది. దాన్ని GitHub రిపోసిటరీకి కనెక్ట్ చేసుకుందాం, ద్వారా మీరు ప్రపంచానికి పంచుకోవచ్చు!
ముందుగా, GitHub రిపో పేజీకి వెళ్లి URL కాపీ చేసుకోండి. తర్వాత ఇక్కడికి రావడం చేసి ఈ ఆజ్ఞ వ్రాయండి:
```bash
git remote add origin https://github.com/username/repository_name.git
```
(ఆ URL ను మీ అసలు రిపోజిటరీ URL తో మార్చండి!)
**ఇప్పుడు మనం చేసినది:**
- మేము మీ స్థానిక ప్రాజెక్ట్ మరియు మీ GitHub రిపాజిటరీ మధ్య ఒక కనెక్షన్ సృష్టించాము
- "Origin" అనేది మీ GitHub రిపాజిటరీకు ఒక నిక్‌నేమ్ మాత్రమే – ఇది మీ ఫోన్‌లో ఒక సంపర్కాన్ని జోడించడం లాంటిది
- ఇప్పుడు మీ స్థానిక Git మీ కోడ్‌ను ఎప్పుడు పంపాలనుకున్నారో తెలుసుకొని పంపేందుకు సిద్ధంగా ఉంది
💡 **సులభమైన మార్గం**: మీరు GitHub CLI ఇన్స్టాల్ చేసుకున్నట్లయితే, మీరు దీన్ని ఒక్క కమాండ్‌లో చేయవచ్చు:
```bash
gh repo create my-repo --public --push --source=.
```
8. **మీ కోడ్‌ను GitHubకి పంపండి** (అత్యంత ముఖ్యమైన ముoమెంట్!):
```bash
git push -u origin main
```
**🚀 ఇదీ! మీరు మీ కోడ్‌ను GitHubకి అప్‌లోడ్ చేస్తున్నారు!**
**ఏమి జరుగుతుంది:**
- మీ కమిట్లు మీ కంప్యూటర్ నుండి GitHubకి ప్రయాణిస్తున్నాయి
- `-u` ఫ్లాగ్ ఒక శాశ్వత కనెక్షన్ సెటప్ చేస్తుంది కాబట్టి భవిష్యత్తు పుష్‌లు సులభమవుతాయి
- "main" మీ ప్రధాన బ్రాంచ్ పేరు (ముఖ్య ఫోల్డర్ లాంటిది)
- దీన్ని తరువాత మీరు కేవలం `git push` టైప్ చేయడం ద్వారా భవిష్యత్తులో అప్‌లోడ్‌లు చేయవచ్చు!
💡 **తక్కువ గమనిక**: మీ బ్రాంచ్ పేరు వేరొకటి అయితే (ఉదారహరణకు "master"), ఆ పేరుని ఉపయోగించండి. మీరు `git branch --show-current` తో చెక్ చేసుకోవచ్చు.
9. **మీ కొత్త రోజువారీ కోడింగ్ రిథమ్** (ఇది చాలా బానిస్ అవుతుంది!):
ఇప్పటి నుండి, మీరు మీ ప్రాజెక్ట్‌లో మార్పులు చేసినప్పుడు, మీకు ఈ సరళమైన ముగ్గురు దశల నాట్యం ఉంది:
```bash
git add .
git commit -m "describe what you changed"
git push
```
**ఇది మీ కోడింగ్ హార్ట్‌బీట్ అవుతుంది:**
- మీ కోడులో అద్భుతమైన మార్పులు చేయండి ✨
- వాటిని స్టేజ్ చేసుకోండి `git add` తో ("Hey Git, ఈ మార్పులపై దృష్టి పెట్టు!")
- వాటిని సేవ్ చేయండి `git commit` మరియు వివరణాత్మక సందేశంతో (భవిష్యత్తులో మీకు ధన్యవాదాలు!)
- వాటిని ప్రపంచంతో పంచుకోండి `git push` తో 🚀
- మళ్లీ మరియు మళ్లీ – దీన్ని శ్వాస తీసుకోవడం లాంటిదిగా అనుభవించండి!
నాకు ఈ వర్క్ఫ్లో చాలా ఇష్టం ఎందుకంటే ఇది వీడియో గేమ్‌లో అనేక సేవ్ పాయింట్లు ఉండటం లాంటిది. మీరు ఇష్టపడే మార్పు చేసారా? కమిట్ చేయండి! కొంత రిస్క్ తీసేయాలనుకుంటున్నారా? చింతించవద్దు – మీరు ఎప్పుడైనా చివరి కమిట్‌కు తిరిగి వెళ్ళవచ్చు!
> 💡 **సూచన**: మీరు `.gitignore` ఫైల్‌ను కూడా ఉపయోగించవచ్చు, మీరు ట్రాక్ చేయదలచని ఫైళ్లను GitHubపై కనిపించకుండా ఉంచేందుకు – ఉదా: అదే ఫోల్డర్‌లో ఉంచిన కానీ పబ్లిక్ రిపాజిటరీకి సంబంధం లేని నోట్స్ ఫైల్. మీరు `.gitignore` టెంప్లేట్లను [.gitignore templates](https://github.com/github/gitignore) వద్ద పొందవచ్చు లేదా [gitignore.io](https://www.toptal.com/developers/gitignore) ఉపయోగించి ఒకటి సృష్టించవచ్చు.
### 🧠 **మొదటి రిపాజిటరీ చెక్-ఇన్: మీకు ఎలా అనిపించింది?**
**కొంచెం సమయం తీసుకొని సంబరపడండి మరియు పునరావృత్తి చేయండి:**
- మీ కోడ్ GitHubపై మొదటిసారి కనపడటం ఎలా అనిపించింది?
- ఏ దశ మరింత సందిగ్ధంగా అనిపించింది, ఏది ఆశ్చర్యకరంగా సులభంగా అనిపించింది?
- `git add`, `git commit`, మరియు `git push` మధ్య తేడా మీరు స్వయంగా వివరిస్తారా?
```mermaid
stateDiagram-v2
[*] --> LocalFiles: ప్రాజెక్ట్ సృష్టించండి
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: విజయం! 🎉
note right of Staged
ఫైల్స్ సేవ్ చేసేందుకు సిద్ధంగా ఉన్నాయి
end note
note right of Committed
స్నాప్షాట్ సృష్టించబడింది
end note
```
> **గుర్తుంచుకోండి**: అనుభవజ్ఞులైన డెవలపర్లు కూడా కొన్నిసార్లు సరిగ్గా ఆ కమాండ్లు మర్చిపోతారు. ఈ వర్క్ఫ్లో మీ మసిల్ మెమరీ అవ్వడంతో మీరు చాలా బాగున్నారు!
#### ఆధునిక Git వర్క్ఫ్లోలు
ఈ ఆధునిక పద్ధతులను అనుసరించడం పరిగణించండి:
- **Conventional Commits**: `feat:`, `fix:`, `docs:` లాంటి ప్రమాణిక కమిట్ సందేశ ఫార్మాట్ ఉపయోగించండి. మరింత తెలుసుకోండి [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Atomic commits**: ప్రతి కమిట్ ఒకే ఒక శారీరక మార్పును సూచించేలా చేసుకోండి
- **Frequent commits**: పెద్ద పెద్ద దూరం ఉన్న కమిట్ల కన్నా తరచుగా వివరణాత్మక సందేశాలతో కమిట్ చేయండి
#### కమిట్ సందేశాలు
ఒక మంచి Git కమిట్ సబ్జెక్ట్ లైన్ ఈ వాక్యాన్ని పూర్తి చేస్తుంది:
If applied, this commit will <మీ సబ్జెక్ట్ లైన్ ఇక్కడ>
సబ్జెక్ట్ కోసం ఆదేశాత్మక మనిషి వర్తమాన కాలం ఉపయోగించండి: "change" అలాగే "changed" లేదా "changes" కాదు.
సబ్జెక్ట్ లాగా, బాడీలో (ఐచ్ఛికంగా) కూడా ఆదేశాత్మక, వర్తమాన కాలం ఉపయోగించండి. బాడీ మార్చిన కారణం మరియు ఇది పూర్వపు ప్రవర్తనతో ఎలా భేదం కలిగి ఉందో వివరిస్తుంది. మీరు `why` ను వివరిస్తున్నారు, `how` కాదన్నారు.
✅ కొంత సమయాన్ని GitHubలో సర్ఫింగ్ చేయడానికి వెచ్చించండి. మీరు చాలా గొప్ప కమిట్ సందేశం కనుగొంటారా? అత్యంత సంక్షిప్తదాన్ని కనుగొంటారా? కమిట్ సందేశంలో convey చేయడానికి ఎంత ముఖ్యమైన మరియు ఉపయోగకరమైన సమాచారమని మీరు అనుకుంటున్నారు?
## ఇతరులతో కలిసి పని చేయడం (ఆనందదాయకమైన భాగం!)
మీ టోపీని పట్టుకోండి ఎందుకంటే GitHub ఈ భాగంలో పూర్తి మాయాజాలం అవుతుంది! 🪄 మీరు మీ స్వంత కోడ్‌ను నిర్వహించడం నేర్చుకున్నారు, కానీ ఇప్పుడు నేను చాలా ఇష్టపడే భాగం – ప్రపంచవ్యాప్తంగా ఉన్న అద్భుతమైన వ్యక్తులతో సహకారం.
ఇలాంటి దృశ్యం ఊహించండి: మీరు రేపు లేపినప్పుడు, ఎవరో టోక్యోలో మీ కోడ్‌ను మెరుగుపరిచారు. తరువాత బెర్లిన్‌లో ఎవరో మీరు చిక్కుకున్న బగ్‌ను సవరిస్తున్నారు. మధ్యాహ్నం వరకు సావ్ పాలో లో ఒక డెవలపర్ మీరు కనిపించని ఒక ఫీచర్‌ను జతచేశారు. అది సైన్స్ ఫిక్షన్ కాదు – GitHub ప్రపంచంలో ఇది కేవలం సోమవారం లాంటిదే!
నన్ను ఎంతో ఉత్సాహపరిచేది ఏమిటంటే, మీరు నేర్చుకోబోతున్న సహకారం నైపుణ్యాలు? ఇవి గూగుల్, మైక్రోసాఫ్ట్ మరియు మీ ఇష్టమైన స్టార్టప్పుల జట్లు ప్రతిరోజూ ఉపయోగించే అదే వర్క్‌ఫ్లోలు. మీరు కేవలం ఒక చక్కటి టూల్ నేర్చుకోక, మొత్తం సాఫ్ట్వేర్ ప్రపంచం కలిసి పనిచేసే రహస్యం నేర్చుకుంటున్నారు.
గంభీరంగా చెబితే, మీ మొదటి పల రిక్వెస్ట్ Merge అయ్యే ఆనందం మీరు అనుభవించిన వెంటనే, వికాసకులు ఎందుకు ఓపెన్ సోర్స్ పట్ల ఇంతగా ఇష్టపడుతున్నారో మీరు అర్థం చేసుకుంటారు. ఇది ప్రపంచంలోనే అతి పెద్ద, సృజనాత్మకమైన టీమ్ ప్రాజెక్ట్‌లో భాగమైనట్లు బ్రతుకుతుంది!
> వీడియో చూడండి
>
> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
GitHubపై విషయాలను ఉంచిన ప్రధాన కారణం ఇతర డెవలపర్లతో సహకారం సాధ్యమవ్వడం.
```mermaid
flowchart LR
A[🔍 ప్రాజెక్ట్ కనుగొనండి] --> B[🍴 రిపాజిటరీని ఫోర్క్ చేయండి]
B --> C[📥 స్థానికంగా క్లోన్ చేయండి]
C --> D[🌿 బ్రాంచ్ సృష్టించండి]
D --> E[✏️ మార్పులు చేయండి]
E --> F[💾 మార్పులను కమిట్ చేయండి]
F --> G[📤 బ్రాంచ్ ని పుష్ చేయండి]
G --> H[🔄 పుల్ రిక్వెస్ట్ సృష్టించండి]
H --> I{నిర్వాహక సమీక్ష}
I -->|✅ ఆమోదించారు| J[🎉 విలీనం చేయండి!]
I -->|❓ మార్పులు కోరారు| K[📝 అప్‌డేట్‌లు చేయండి]
K --> F
J --> L[🧹 బ్రాంచ్‌లను శుభ్రపరచండి]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
మీ రిపాజిటరీలో, `Insights > Community` కి వెళ్ళి మీరు మీ ప్రాజెక్ట్ GitHub సమాజ ప్రమాణాలకు ఎంతవరకు సరిపోయిందో తెలుసుకోండి.
మీ రిపాజిటరీను ప్రొఫెషనల్ మరియు ఆహ్లాదకరంగా చూపించాలనుకుంటున్నారా? మీ రిపాజిటరీకి వెళ్లి `Insights > Community` క్లిక్ చేయండి. ఈ అద్భుత ఫీచర్ మీ ప్రాజెక్ట్ GitHub సమాజం భావించే "చక్కటి రిపాజిటరీ ప్రాక్టీసెస్" తో ఎలా సరిపోలుతుందో చూపిస్తుంది.
> 🎯 **మీ ప్రాజెక్టును మెరిసింప జేస్తూ**: బాగా ఏర్పాటు చేసిన రిపాజిటరీ మంచి డాక్యుమెంటేషన్ తో ఒక శుభ్రమైన, ఆహ్లాదకరమైన storefront లాంటిది. ఇది మీరు మీ పని గురించి যত্ন పడుతున్నారని చెప్పడంతో పాటు, ఇతరులను సహకారానికి ఆకర్షిస్తుంది!
**ఇది రిపాజిటరీని అద్భుతంగా చేయటానికి కారణాలు:**
| ఏమి జోడించాలి | ఎందుకు ఇది ముఖ్యమయింది | ఇది మీకు ఏమి చేస్తుంది |
|-------------|-------------------|---------------------|
| **Description** | మొదటి'impression' చాలా ముఖ్యం! | ప్రజలు వెంటనే మీ ప్రాజెక్ట్ ఏం చేస్తుందో తెలుసుకుంటారు |
| **README** | మీ ప్రాజెక్ట్ ముఖ పేజీ | కొత్త సందర్శకులకు స్నేహపూర్వక గైడ్ లాంటిది |
| **Contributing Guidelines** | మీరు సహాయం స్వాగతించుతారని చూపిస్తుంది | ప్రజలు మీకు ఎలా సహాయం చేయాలో అర్థం చేసుకుంటారు |
| **Code of Conduct** | స్నేహపూర్వక వాతావరణాన్ని సృష్టిస్తుంది | ప్రతిఒక్కరూ పాల్గొనేందుకు ఉత్సాహంతో ఉంటారు |
| **License** | లీగల్ క్లారిటీ | ఇతరులు మీ కోడ్‌ను ఎలా ఉపయోగించవచ్చో తెలుసుకుంటారు |
| **Security Policy** | మీరు బాధ్యతగలవారని చూపిస్తుంది | ప్రొఫెషనల్ ప్రాక్టీసులను ప్రదర్శిస్తుంది |
> 💡 **ప్రొ టిప్**: GitHub ఈ ఫైళ్ళ కొరకు టెంప్లేట్లను అందిస్తుంది. కొత్త రిపాజిటరీ సృష్టించేటప్పుడు, ఈ ఫైళ్ళను ఆటోమేటిక్‌గా జెనరేట్ చేయడానికి చెక్బాక్స్‌లను పరిశీలించండి.
**ఎక్స్‌ప్లోర్ చేయవలసిన ఆధునిక GitHub ఫీచర్లుః**
🤖 **ఆటోమేషన్ & CI/CD:**
- **GitHub Actions** ఆटोమేటెడ్ టెస్టింగ్ మరియు డిప్లాయ్‌మెంట్ కొరకు
- **Dependabot** ఆటోమేటిక్ డిపెండెన్సీ నవరూపాలు కోసం
💬 **సమాజం & ప్రాజెక్ట్ మేనేజ్‌మెంట్:**
- **GitHub Discussions** ఇష్యూలకు మించిన సమాజ సంభాషణల కోసం
- **GitHub Projects** కాన్బన్-స్టైల్ ప్రాజెక్ట్ నిర్వహణ కోసం
- **బ్రాంచ్ రక్షణ నియమాలు** కోడ్ నాణ్యత ప్రమాణాలను కలపడానికి
ఈ అన్ని వనరులు కొత్త టీమ్ సభ్యులను ఆన్‌బోర్డింగ్‌కు సహాయపడతాయి. మరియు కొత్త కంట్రిబ్యూటర్లు సాధారణంగా మీ కోడ్‌ను చూడకముందే ఈ అంశాలను పరిశీలిస్తారు, మీ ప్రాజెక్ట్ వారికి సరిపోతుందా లేదో తెలుసుకోవడానికి.
✅ README ఫైళ్ళు తయారుచేయడానికి సమయం తీసుకుంటాయి కానీ బిజీ మేంటైనర్ల చేత పట్టించుకోబడటం తక్కువ. మీరు ప్రత్యేకంగా వివరణాత్మక README ఉదాహరణ కనుగొంటారా? గమనిక: మంచి READMEలు సృష్టించడానికి కొన్ని [హెల్ప్ టూల్స్](https://www.makeareadme.com/) ఉన్నాయి, మీరు వాటిని ప్రయత్నించవచ్చు.
### టాస్క్: కొంత కోడ్ మిళితం చేయండి
కంట్రిబ్యూటింగ్ డాక్స్ ప్రజలకు ప్రాజెక్ట్‌కు సహకరించడానికి సహాయపడతాయి. మీరు ఏ రకాల కంట్రిబ్యూషన్లను కోరుకుంటున్నారో, మరియు ప్రక్రియ ఎలా పనిచేస్తుందో వివరిస్తాయి. కంట్రిబ్యూటర్లు GitHubపై మీ రిపోజిటరీకి సహకరించడానికి క్రింద ఇచ్చిన దశలను పాటించాల్సి ఉంటుంది:
1. **మీ రిపోజిటరీను ఫోర్క్ చేయడం** మీరు ప్రజలకు ప్రాజెక్టును _ఫోర్క్_ చేసుకోవాలని కోరుకుంటారు. ఫోర్క్ అనే పదం వారి GitHub ప్రొఫైలులో మీ రిపోజిటరీ యొక్క కాపీ సృష్టించడాన్ని సూచిస్తుంది.
1. **క్లోన్ చేయడం**. అటు నుండి వారు ప్రాజెక్టును వారి స్థానిక మెషీన్‌లోకి క్లోన్ చేస్తారు.
1. **బ్రాంచ్ సృష్టించడం**. వారు తమ పని కోసం ఒక _బ్రాంచ్_ సృష్టించమని మీరు కోరుతారు.
1. **మార్పులను ఒక ప్రాంతంలోనే కేంద్రీకరించడం**. కంట్రిబ్యూటర్లు ఒక్కసారి ఒక్క విషయం మీద మాత్రమే తమ కాంట్రిబ్యూషన్లను కేంద్రీకరించాలని అడగండి – ఇలా చేస్తే మీరు వారి పనిని _మిళితం_ చేసుకోవడానికి అవకాశం ఎక్కువ. వారు ఒక బగ్ ఫిక్స్ చేస్తే, కొత్త ఫీచర్ జతచేస్తే, మరియు అనేక టెస్టులను నవీకరిస్తే – మీరు 3 లో 2 మాత్రమే అమలు చేయాలనుకుంటే లేదా 3 లో 1 మాత్రమే చేయగలిగితే ఎలా జరుగుతుంది?
✅ ప్రత్యేకించి మంచి కోడ్ రాయడం మరియు పంపేందుకు బ్రాంచ్లు ఎంత ముఖ్యమో ఒక పరిస్థితిని ఊహించండి. మీరు ఏ వాడుక కేసులను గుర్తించవచ్చని అనుకుంటున్నారు?
> గమనిక, మీరు మీ స్వంత పనికి బ్రాంచ్లు సృష్టించండి. మీరు చేసిన ఏ కమిట్ అయినా మీరు ప్రస్తుత "చెక్ అవుట్" అయిన బ్రాంచ్ మీద చేయబడుతుంది. ఆ బ్రాంచ్ ఏదో తెలుసుకొనడానికి `git status` ఉపయోగించండి.
కంట్రిబ్యూటర్ వర్క్‌ఫ్లోని చూద్దాం. కంట్రిబ్యూటర్ రిపోజిటరీని ఇప్పటికే _ఫోర్క్_ చేసి, _క్లోన్_ చేసుకున్నట్లు భావించండి, కనుక ఫైల్ వారు వారి లోకల్ మెషీన్లో పని చేయడానికి Git రిపో సిద్ధంగా ఉంది:
1. **బ్రాంచ్ సృష్టించండి**. వారు చేయబోయే మార్పులను కలిగిన బ్రాంచ్ సృష్టించడానికి `git branch` కమాండ్ ఉపయోగించండి:
```bash
git branch [branch-name]
```
> 💡 **ఆధునిక పద్ధతి**: మీరు ఒక్క కమాండ్‌లో కొత్త బ్రాంచ్ సృష్టించి మార్చవచ్చు:
```bash
git switch -c [branch-name]
```
1. **పని బ్రాంచ్‌కు మారండి**. నిర్దిష్ట బ్రాంచ్‌కు మారి, పని డైరెక్టరీని `git switch` తో అప్‌డేట్ చేయండి:
```bash
git switch [branch-name]
```
> 💡 **ఆధునిక గమనిక**: బ్రాంచ్లు మార్చేటప్పుడు `git switch` ఆదేశం `git checkout` కు ఆధునిక ప్రతిస్థానం. ఇది క్లియర్ మరియు కొత్తవారికి సురక్షితం.
1. **పని చేయండి**. ఈ దశలో మార్పులను పూర్తి చేయండి. Git కి ఈ విషయాన్ని తెలియజేయడాన్ని మరచిపోకండి క్రింది కమాండ్లతో:
```bash
git add .
git commit -m "my changes"
```
> ⚠️ **కమిట్ సందేశ నాణ్యత**: మీరు చేస్తున్న మార్పుల గురించి బాగా మరియు స్పష్టంగా కమిట్ పేరు ఇవ్వాలని చూసుకోండి, మీకు మరియు మీరు సహాయం చేస్తున్న రిపో యొక్క మెట్‌నైర్‌కు ఇది అవసరం!
1. **మీ పనిని `main` బ్రాంచ్‌తో మిళితం చేయండి**. ఒక దశలో మీరు పని పూర్తి చేస్తారు మరియు మీ పనిని `main` బ్రాంచ్‌తో కలపాలనుకుంటారు. ఈ మధ్యలో `main` బ్రాంచ్ మారి ఉండవచ్చు కాబట్టి ముందుగా క్రింద ఇచ్చిన కమాండ్లతో దాన్ని తాజారుపోచండి:
```bash
git switch main
git pull
```
ఈ దశలో మీరు ప్రతి _కొనసాగే_, అంటే Git సులభంగా _మిళితం_ చేసుకోలేని మార్పులు మీ పని బ్రాంచ్లో ఉంటే చూసుకోవాలి. కాబట్టి ఈ క్రింది కమాండ్లను నడపండి:
```bash
git switch [branch_name]
git merge main
```
`git merge main` కమాండ్ `main` నుండి అన్ని మార్గాలను మీ బ్రాంచ్‌లో కాబట్టి తీసుకొస్తుంది. ఆశిస్తున్నాం మీరు సులభంగా కొనసాగుతారు. లేకపోతే, VS Code మీకు Git ఎక్కడ _గందరగోళంలో_ ఉన్నదో చూపిస్తుంది, మీరు అదేవిధంగా ఫైల్స్ సవరించి ఏ కంటెంట్ మరింత ఖచ్చితమైనదో సూచించాలి.
💡 **ఆధునిక ప్రత్యామ్నాయం**: మరొక సాహిత్యం కోసం `git rebase` ను ఉపయోగించడం పరిగణించండి:
```bash
git rebase main
```
ఇది మీ కమిట్లను తాజా main బ్రాంచ్‌కు పైగా బహిర్గతం చేస్తుంది, ఒక రేఖాకార చరిత్ర సృష్టిస్తుంది.
1. **మీ పనిని GitHubకు పంపండి**. GitHubకి మీ పనిని పంపడం అంటే రెండు విషయాలు. మీరు మీ బ్రాంచ్‌ని మీ రిపోకు పుష్ చేయడం, తరువాత PR, పుల్ రిక్వెస్ట్ తెరవడం.
```bash
git push --set-upstream origin [branch-name]
```
పై కమాండ్ మీ ఫోర్క్ చేసిన రిపోలో బ్రాంచ్ సృష్టిస్తుంది.
### 🤝 **సహకార నైపుణ్యాల చెక్: ఇతరులతో పని చేయడానికి సిద్ధమా?**
**మీ సహకార భావన ఎలా ఉందో చూద్దాం:**
- ఫోర్కింగ్ మరియు పుల్ రిక్వెస్టు భావనలు మీకు ఇప్పుడు అర్ధమయ్యాయా?
- బ్రాంచ్లతో పనిచేయడంలో ఒక్క విషయం మీరు మరింత సాధన చేయాలనుకుంటున్నారా?
- మరొకరినీ ప్రాజెక్ట్‌లో సహకరించడానికి మీతో ఎంత సౌకర్యంగా ఉందని భావిస్తున్నారా?
```mermaid
mindmap
root((Git సహకారం))
Branching
ఫీచర్ బ్రాంచెస్
బగ్ ఫిక్స్ బ్రాంచెస్
ప్రయోగాత్మక పని
Pull Requests
కోడ్ సమీక్ష
చర్చ
పరీక్ష
Best Practices
స్పష్టమైన కమీట్ సందేశాలు
చిన్న దృష్టిమార్పులు
మంచి డాక్యుమెంటేషన్
```
> **ఆత్మవిశ్వాస పెంపు**: మీరు అభిమానించే ప్రతి అభివృద్ధికర్త మొదటి పుల్ రిక్వెస్ట్‌ను చేసేటప్పుడు ఆందోళన చెందేవారు. GitHub సమాజం కొత్తవారికి ఎంతో స్వాగతంగా ఉంది!
1. **ఒక PR తెరవండి**. తదుపరి, మీరు ఒక PR తెరవాలి. మీరు ఇంటర్ఫేస్‌లో కమిట్ సందేశం శీర్షిక మార్చడం, సరైన వివరణ అప్పగించడం చేయగలుగుతారు. ఇప్పుడు మీరు ఫోర్క్ చేసిన రిపో యొక్క మెంట్‌నైర్ ఈ PRను చూడగలుగుతారు మరియు _ఫింగర్స్ క్రాస్_ వారు మీ PRని మెచ్చి _మిళితం_ చేయగలుగుతారు. ఈ నేపథ్యంలో మీరు ఇప్పుడు కంట్రిబ్యూటర్ అవుతున్నారండి, యేయ్ :)
💡 **ఆధునిక సూచన**: మీరు GitHub CLI ఉపయోగించి కూడా PRలు సృష్టించవచ్చు:
```bash
gh pr create --title "Your PR title" --body "Description of changes"
```
🔧 **PRల కొరకు ఉత్తమ పద్ధతులు**:
- "Fixes #123" వంటి కీవర్డ్స్ ఉపయోగించి సంబంధిత ఇష్యూలను లింక్ చేయండి
- UI మార్పులకు స్క్రీన్‌షాట్లు జత చేయండి
- నిర్దిష్ట సమీక్షకులను అభ్యర్థించండి
- వర్క్-ఇన్-ప్రోగ్రెస్ కోసం డ్రాఫ్ట్ PRలను ఉపయోగించండి
- సమీక్ష అభ్యర్థించకముందు అన్ని CI పరీక్షలు జయప్రదంగా ఉన్నాయో చూసుకోండి
1. **స్వచ్ఛం చేయండి**. మీరు ఒక PR విజయవంతంగా మిళితం చేసిన తర్వాత _స్వచ్ఛం చేయడం_ మంచి ఆచారం అని పరిగణించబడుతుంది. మీరు మీ స్థానిక బ్రాంచ్ మరియు మీరు GitHub కు పుష్ చేసిన బ్రాంచ్ రెండింటినీ స్వచ్ఛం చేయాలి. మొదట దిగువ కమాండ్ తో స్థానికంగా దాన్ని తొలగిద్దాం:
```bash
git branch -d [branch-name]
```
తరువాత మీరు ఫోర్క్ చేసిన రిపో యొక్క GitHub పేజీకి వెళ్లి మీరు తాజాగా పుష్ చేసిన రిమోట్ బ్రాంచ్‌ను తొలగించాలి.
`పుల్ రిక్వెస్ట్` అనే పదం కొంచెం విచిత్రంగా అనిపిస్తుంది ఎందుకంటే నిజానికి మీరు మీ మార్పులను ప్రాజెక్ట్‌లోకి పుష్ చేయాలనుకుంటున్నారు. కానీ మైంటైనర్ (ప్రాజెక్ట్ యజమాని) లేదా కోర్ టీమ్ మీ మార్పులను పరిశీలించి ప్రాజెక్ట్ యొక్క "మైన్" బ్రాంచ్‌తో మిళితం చేయాల్సి ఉంటుంది, కాబట్టి మీరు నిజానికి మైంటైనర్ వద్ద నుంచి మార్పు నిర్ణయం కోరుతున్నారు.
పుల్ రిక్వెస్ట్ అనేది ఒక బ్రాంచ్‌లో పరిచయం చేసిన తేడాలను సమీక్షలు, వ్యాఖ్యలు, విలీనం చేసిన పరీక్షలు మరియు మరెన్నోతో పోల్చి చర్చించడానికి స్థలం. ఒక మంచి పుల్ రిక్వెస్ట్ కిందటివాటిలాగే కమిట్ సందేశానికి సారూప్యంగా నియమాలు పాటిస్తుంది. ఉదాహరణకి మీ పని ఒక సమస్యను పరిష్కరిస్తే మీరు ఇష్యూ ట్రాకర్‌లో ఉన్న సమస్యకు సంబంధించిన సూచననూ జోడించవచ్చు. దీని కోసం మీ ఇష్యూ సంఖ్యకు ముందు `#` ఉపయోగిస్తారు. ఉదాహరణకి `#97`.
🤞అన్ని పరీక్షలు విజయవంతంగా జరగాలని మరియు ప్రాజెక్ట్ యజమాని(లు) మీ మార్పులను ప్రాజెక్ట్‌లో మిళితం చేయాలని ఆశిస్తున్నాము🤞
GitHub పై సరసమైన రిమోట్ బ్రాంచ్ నుంచి మీ ప్రస్తుత స్థానిక వర్కింగ్ బ్రాంచ్ ను కొత్త కామిట్లతో నవీకరించండి:
`git pull`
## ఓపెన్ సోర్స్‌కు సహకరించడం (మీకు ప్రభావం చూపించే అవకాశం!)
మీ మనసును ఆగట్టి వేయబోయే ఏదైనా దాన్ని మీకు చెప్పడానికి సిద్ధమా? 🤯 ఓపెన్ సోర్స్ ప్రాజెక్టులకు సహకరించడం గురించి మాట్లాడుకుందాం – దీన్ని మీతో పంచుకోవడం గురించి ఆలోచించడం కూడా నాకు goosebumps వస్తున్నాయి!
ఇది మీరు నిజంగా అసాధారమైన దానిలో భాగమవ్వాలనే అవకాశం. రోజువారీ వందల కోట్ల మంది డెవలపర్లు ఉపయోగించే సాధనాలను మీరు మెరుగుపరచడం, లేదా మీ స్నేహితులు ఇష్టపడే యాప్‌లో ఒక బగ్‌ని సరిచేయడం అని ఊహించండి. అది కేవలం ఒక కల కాదు – అదే ఓపెన్ సోర్స్ సహకారం యొక్క అసలు భేదం!
ప్రతి సారి నేను దీన్ని ఆలోచిస్తే నాకు రంధ్రాలు వల్లె నాకు శీతలంగా అనిపిస్తుంది: మీరు నేర్చుకుంటున్న ప్రతి సాధనం – మీ కోడ్ ఎడిటర్, మనం అన్వేషించబోయే ఫ్రేమ్‌వర్క్లు, మీరు ఈ టెక్స్ట్‌ను చదవుతున్న బ్రౌజర్ కూడా – ఎవరో మీలా ఒక వ్యక్తి వారి మొదటి సహకారంతో ప్రారంభించిన దాంట్లో మొదలైంది. మీ ఇష్టమైన VS Code ఎక్స్‌టెన్షన్ ని రూపొందించిన ఆ గొప్ప డెవలపర్ కూడా ఒక కొత్తవాడే, "create pull request" బటన్‌ను కంపంగా చేతులతో క్లిక్ చేసే సమయంలో ఉన్న వారు.
మరియు ఇక్కడ అద్భుతమైన విషయం ఏమిటంటే: ఓపెన్ సోర్స్ కమ్యూనిటీ ఇంటర్నెట్‌లోని అతి పెద్ద గ్రూప్ హగ్ లాంటిది. చాలా ప్రాజెక్టులు కొత్తవారిని చేర్చుకోవడానికి చురుగ్గా చూస్తుంటాయి మరియు మీరు వంటి వారికంటూ ప్రత్యేకంగా "good first issue" ట్యాగ్ పెట్టిన సమస్యలు ఉంటాయి! మైంటైనర్లు కొత్త సహకారదారులు చూడగానే ఎంతో ఉత్సాహంగా మారతారు ఎందుకంటే వారు తమ మొదటి అడుగులు గుర్తుచేసుకోవడం వల్ల.
```mermaid
flowchart TD
A[🔍 GitHub ని అన్వేషించండి] --> B[🏷️ "మுதல் మంచి సమస్య" ని కనుగొనండి]
B --> C[📖 సహకార మార్గదర్శకాలను చదవండి]
C --> D[🍴 రిపాజిటరీని Fork చేయండి]
D --> E[💻 లోకల్ వాతావరణాన్ని సెట్ చేయండి]
E --> F[🌿 ఫీచర్ బ్రాంచ్ సృష్టించండి]
F --> G[✨ మీ సహకారాన్ని అందించండి]
G --> H[🧪 మీ మార్పులను పరీక్షించండి]
H --> I[📝 స్పష్టమైన కమిట్ వ్రాయండి]
I --> J[📤 పుష్ & PR సృష్టించండి]
J --> K[💬 ఫీడ్బ్యాక్‌తో కమ్యూనికేట్ చేయండి]
K --> L[🎉 విలీనం అయింది! మీరు ఒక సహకర్త!]
L --> M[🌟 తదుపరి సమస్యను కనుగొనండి]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
మీరు ఇక్కడ కేవలం కోడ్ నేర్చుకోరు – మీరు ప్రపంచవ్యాప్తంగా ఉన్న నిర్మాతల కుటుంబంలో చేరడానికి సిద్ధం అవుతున్నారు, వారు ప్రతి రోజూ "డిజిటల్ ప్రపంచాన్ని కొంచెం మెరుగుపరచడానికి ఎలా చేయగలం?" అనుకుంటారు. క్లబ్‌కు స్వాగతం! 🌟
మొదట, GitHub పై మీకు ఆసక్తి ఉన్న, మీరు మార్పు చేయాలని అనుకునే రిపోసిటరీ(లేదా **రిపో**) కనుగొనండి. దాని కంటెంట్ మీ యంత్రం (మిషన్) పై కాపీ చేసుకోవాలి.
✅ 'beginner-friendly' రిపోలను కనుగొనడానికి మంచి మార్గం అంటే [‘good-first-issue’ ట్యాగ్‌తో శోధించడం](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) ఇది.
![కాపీ చెయ్యడానికి రిపోని స్థానికంగా క్లోన్ చేయడం](../../../../translated_images/clone_repo.5085c48d666ead57.te.png)
కోడ్ కాపీ చేసుకునే అనేక మార్గాలు ఉన్నాయి. ఒక మార్గం "క్లోన్" చేయడం, దీనికి HTTPS, SSH లేదా GitHub CLI (కమాండ్ లైన్ ఇంటర్ఫేస్) ఉపయోగిస్తారు.
మీ టెర్మినల్ ఓపెన్ చేసి ఈ విధంగా రిపోని క్లోన్ చేయండి:
```bash
# HTTPS ఉపయోగించడం
git clone https://github.com/ProjectURL
# SSH ఉపయోగించడం (SSH కీ సెటప్ అవసరం)
git clone git@github.com:username/repository.git
# GitHub CLI ఉపయోగించడం
gh repo clone username/repository
```
ప్రాజెక్ట్‌పై పని చేయాలంటే సరైన ఫోల్డర్‌కు మారండి:
`cd ProjectURL`
మరియు మీరు మొత్తం ప్రాజెక్టును ఇలా కూడా ఓపెన్ చేయవచ్చు:
- **[GitHub Codespaces](https://github.com/features/codespaces)** - బ్రౌజర్లో VS Code తో GitHub యొక్క క్లౌడ్ అభివృద్ధి వాతావరణం
- **[GitHub Desktop](https://desktop.github.com/)** - Git ఆపరేషన్ల కోసం GUI అప్లికేషన్
- **[GitHub.dev](https://github.dev)** - ఏ GitHub రిపో అయినా `.` కీ నొక్కి బ్రౌజర్‌లో VS Code ని ఓపెన్ చేయండి
- GitHub Pull Requests విస్తరణ కలిగిన VS Code
చివరగా, జిప్ చేసిన ఫోల్డర్ లో కోడ్ డౌన్లోడ్ చేసుకోవచ్చు.
### GitHub గురించి కొన్ని మరిన్ని ఆసక్తికర విషయాలు
GitHub లోని ఏ ప్రజాస్వామ్య రిపోని మీరు స్టార్ చేయవచ్చు, వాచ్ చేయవచ్చు మరియు/లేదా "ఫోర్క్" కూడా చేయవచ్చు. మీరు స్టార్ చేసిన రిపోలను అతి కుడి కోణంలో డ్రాప్‌డౌన్ మెనులో కనుగొనవచ్చు. ఇది బుక్‌మార్క్ లాంటిది, కాని కోడ్ కోసం.
ప్రాజెక్టుకు ఇష్యూ ట్రాకర్ ఉంటుంది, ప్రతి ఒక్కరు "Issues" ట్యాబ్ లో ప్రాజెక్ట్ కి సంబంధించిన సమస్యలపై చర్చిస్తారు (మరేరవి చెప్పకుంటే GitHub లో). పుల్ రిక్వెస్ట్ ట్యాబ్ లో ప్రాజెక్ట్ లో జరుగుతున్న మార్పులపై చర్చలు మరియు సమీక్షలు జరుగుతుంటాయి.
ప్రాజెక్టులకు అప్పుడప్పుడూ ఫోరమ్స్, మెయిలింగ్ లిస్టులు లేదా Slack, Discord, IRC లాంటి చాట్ ఛానల్స్ లో చర్చలు కూడా ఉంటాయి.
🔧 **ఆధునిక GitHub లక్షణాలు**:
- **GitHub Discussions** - కమ్యూనిటీ చర్చల కోసం బిల్ట్-ఇన్ ఫోరం
- **GitHub Sponsors** - మైంటైనర్లను ఆర్థికంగా సహాయం చేయడం
- **Security tab** - భద్రతా సమాచారాలు మరియు అసురక్షత నివేదికలు
- **Actions tab** - ఆటోమేటెడ్ వర్క్‌ఫ్లోలు మరియు CI/CD పైప్లైన్లు చూడటం
- **Insights tab** - సహకారదారుల, కామిట్ల మరియు ప్రాజెక్ట్ ఆరోగ్య విశ్లేషణ
- **Projects tab** - GitHub లో బిల్ట్-ఇన్ ప్రాజెక్ట్ మేనేజ్‌మెంట్ సాధనాలు
✅ మీ కొత్త GitHub రిపోను చుట్టూ చూడండి, కొన్ని పనులు ట్రై చేయండి, సెట్టింగ్స్ మార్చడం, రిపోకు సమాచారం జోడించడం, ప్రాజెక్ట్ (ఉదాహరణకు కన్బన్ బోర్డు) సృష్టించడం, GitHub Actions ద్వారా ఆటోమేషన్ సెటప్ చేయడం. మీరు ఎంతో చేయవచ్చు!
---
## 🚀 సవాలు
సరే, మీ కొత్త GitHub సూపర్ పవర్స్‌ను పరీక్షించుకునే సమయం వచ్చింది! 🚀 ఇక్కడ ఒక సవాలు ఉంది, ఇది మీకు సంతృప్తిదాయకంగా అన్ని విషయాలు క్లిక్ అవుతాయి:
ఒక స్నేహితుడిని (లేదా "ఈ కంప్యూటర్ విషయాలతో నీవు చేయుచున్నది ఏమిటి?" అని అడిగే కుటుంబ సభ్యుడిని) తీసుకొని కలసి కోడింగ్ యాత్ర ప్రారంభించండి! ఇక్కడే అసలు మాంత్రికత జరిగేది – ఒక ప్రాజెక్ట్ సృష్టించి, వారినొప్పిక్కోనిది, కొంత బ్రాంచులు చేసుకోవడం, మరియు మీరు ప్రొఫెషనల్స్ లాగా మార్పులు మిళితం చేయడం.
నిజంగా చెప్పాలంటే – మీరు ఏదో ఒక సమయంలో నవ్వుతారు (ప్రత్యేకంగా మీరు ఇద్దరూ ఒకే లైన్ మార్చడానికి ప్రయత్నించినప్పుడు), కొంచెం సంక్లిష్టతలో తల దింపుతారు, కానీ నిశ్చయంగా ఆ అద్భుత "అహా!" క్షణాలు పొందుతారు, అవి అన్ని నేర్చుకోవడాన్ని విలువైనదిగా చేస్తాయి. అదనంగా, మొదటి విజయవంతమైన మిళితం (merge) మీతో ఇతరులతో పంచుకోవడం ఒక చిన్న వేడుకలా ఉంటుంది – మీరు ఎంత దూరం వచ్చారో అది జ్ఞాపకం ఉంచుతుంది!
మీకు ఇంకా కోడింగ్ బడీ లేకపోతే? ఎటువంటి సమస్య లేదు! GitHub కమ్యూనిటీ ఎంతో ఆహ్లాదకరమైన వారితో నిండినదిగా ఉంటుంది, వారు కొత్తవారితో ఎలా వ్యవహరించామో గుర్తుంచుకుంటారు. "good first issue" లేబుల్స్ ఉన్న రిపోలను వెతకండి – అవి మిమ్మల్ని "హే కొత్తవారూ, మాతో కలిసి నేర్పుకోండి!" అని పలకరిస్తున్నట్లు భావించండి! అది ఎంత అద్భుతమో?
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/)
## సమీక్ష & నేర్చుకోవడం కొనసాగించండి
వాహ్! 🎉 మీరు GitHub ప్రాథమిక అంశాలను అద్భుతంగా నేర్చుకుందారు! మీ మెదడు కొంచెం ఫుల్ గా అనిపిస్తుంటే, అది పూర్తిగా సహజం మరియు నిజంగా మంచి సంకేతం. మీరు నేర్చుకున్న సాధనాలు నాకు మొదటిరోజుల్లో అనుభవించడానికి వారాలపాటు పట్టాయి.
Git మరియు GitHub చాలా శక్తివంతమైనవి (అదేకాక గంభీరంగా శక్తివంతమైనవి), మరియు నేను తెలుసుకునే ప్రతి డెవలపర్ – ఇప్పుడు మాయాలోపేతుల్లాగే ఉన్నవాళ్ళు కూడా – కొంత సమయం సాధించి, తప్పుల్లలో పడుతూ ఇది సమగ్రమైన విషయం తెలిసింది. మీరు ఈ పాఠం పూర్తి చేసుకున్నారని అర్థం మీరు డెవలపర్ సాధనాలలో అత్యంత ముఖ్యమైన వాటి లో ఒకదానిపై మంచి పరిజ్ఞానాన్ని పొందుతున్నారు.
వేడీనైన సహకారాన్ని చేయడానికి మరియు మరింత మంచి వ్యక్తిగా మారడానికి ఇవి అద్భుతమైన వనరులు:
- [ఓపెన్ సోర్స్ సాఫ్ట్వేర్‌కు సహకరించే సూచిక](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – ప్రభావం చూపేందుకు మీ రోడ్‌మ్యాప్
- [Git చిట్కాలు](https://training.github.com/downloads/github-git-cheat-sheet/) – త్వరగా చూడడానికి సులభం!
మరియు మర్చిపోకండి: సాధన చేయడం అనేది ప్రగతిని గణిస్తుంది, సంపూర్ణతను కాదు! మీరు Git మరియు GitHub ను ఎక్కువగా ఉపయోగిస్తే, అది సహజంగా మారుతుంది. GitHub కొద్ది అద్భుతమైన ఇంటరాక్టివ్ కోర్సులు సృష్టించింది, ఇవి మీరు సురక్షిత వాతావరణంలో సాధించేందుకు సహాయపడతాయి:
- [GitHub పరిచయం](https://github.com/skills/introduction-to-github)
- [Markdown ఉపయోగించి కమ్యూనికేట్ చేయడం](https://github.com/skills/communicate-using-markdown)
- [GitHub పేజీలు](https://github.com/skills/github-pages)
- [మిళిత సంబందిత వివాదాలు పరిష్కరించడం](https://github.com/skills/resolve-merge-conflicts)
**చాలా కష్టపడి చూస్తారా? ఈ ఆధునిక సాధనాలు చూడండి:**
- [GitHub CLI డాక్యుమెంటేషన్](https://cli.github.com/manual/) – కమాండ్ లైన్ మాయాచారుల్లా భావించాలని ఇష్టపడితే
- [GitHub Codespaces డాక్యుమెంటేషన్](https://docs.github.com/en/codespaces) – క్లౌడ్‌లో కోడింగ్!
- [GitHub Actions డాక్యుమెంటేషన్](https://docs.github.com/en/actions) – అన్ని పనులను ఆటోమేట్ చేయండి
- [Git ఉత్తమ పద్ధతులు](https://www.atlassian.com/git/tutorials/comparing-workflows) – మీ వర్క్‌ఫ్లో అర్ధం మెరుగుపరచండి
## GitHub Copilot ఏజెంట్ సవాలు 🚀
ఏజెంట్ మోడ్ ఉపయోగించి క్రింది సవాలు పూర్తి చేయండి:
**వివరణ:** మీరు ఈ పాఠంలో నేర్చుకున్న పూర్తి GitHub వర్క్‌ఫ్లో చూపించే సహకార వెబ్ డెవలప్‌మెంట్ ప్రాజెక్ట్ సృష్టించండి. ఈ సవాలు మీకు రిపోసిటరీ సృష్టి, సహకారం లక్షణాలు మరియు ఆధునిక Git పని విధానాలను వాస్తవ ప్రపంచ పరిస్థితిలో సాధించే అవకాశం ఇస్తుంది.
**ప్రాంప్ట్:** ఒక సాదారణ "వెబ్ డెవలప్‌మెంట్ వనరులు" ప్రాజెక్టుకు కొత్త పబ్లిక్ GitHub రిపోసిటరీ సృష్టించండి. రిపోసిటరీలో గుర్తుంచదగిన README.md ఫైల్ ఉండాలి, అందులో ఉపయోగకరమైన వెబ్ డెవలప్‌మెంట్ టూల్స్ మరియు వనరులను, HTML, CSS, JavaScript మొదలగునా విషయాలకంటూ వర్గీకరింపచేసి జాబితా పెట్టండి. సరైన కమ్యూనిటీ ప్రమాణాలతో రిపో తయారు చేయండి: లైసెన్స్, సహకార మార్గదర్శకాలు మరియు ప్రవర్తన నియమాలు. కనీసం రెండు ఫీచర్ బ్రాంచుల్ని సృష్టించండి: ఒకటి CSS వనరులు కోసం, మరొకటి JavaScript వనరులు కోసం. ప్రతి బ్రాంచ్ పై వివరణాత్మక కమిట్ సందేశాలతో కామిట్లు చేయండి, తరువాత మార్పులను mainకి మిళితం చేయడానికి పుల్ రిక్వెస్ట్ లు సృష్టించండి. Issues, Discussions వంటి GitHub ఫీచర్లు ప్రారంభించండి మరియు ఆటోమేటెడ్ పరీక్షల కోసం GitHub Actions వర్క్‌ఫ్లోను సెట్ చేయండి.
## అసైన్మెంట్
మీ మిషన్, మీరు స్వీకరించాలనుకుంటే: GitHub Skills లో [Introduction to GitHub](https://github.com/skills/introduction-to-github) కోర్సు పూర్తి చేయండి. ఈ ఇంటరాక్టివ్ కోర్సు మీరు నేర్చుకున్న ప్రతీ దాన్ని సురక్షిత, మార్గనిర్దేశిత వాతావరణంలో సాధించేందుకు అనుమతిస్తుంది. మీరు పూర్తి చేసుకుంటే చల్లని బ్యాడ్జ్ కూడా పొందుతారు! 🏅
**ఇంకా సవాళ్లకు సిద్ధమా?**
- మీ GitHub ఖాతాకు SSH ధృవీకరణను సెట్ చేయండి (ఇప్పుడు పాస్‌వర్గాలు అవసరం కాదు!)
- మీ దినసరి Git ఆపరేషన్ల కోసం GitHub CLI ప్రయత్నించండి
- GitHub Actions వర్క్‌ఫ్లోతో రిపో సృష్టించండి
- GitHub Codespaces ఉపయోగించి ఈ రిపోని క్లౌడ్-ఆధారిత ఎడిటర్లో ఓపెన్ చేయండి
---
## 🚀 మీ GitHub ప్రావీణ్యతా కాలపరిమితి
### ⚡ **తదుపరి 5 నిమిషాల్లో మీరు చేయగలరు**
- [ ] ఈ రిపోను మరియు మీరు ఆసక్తి పెట్టుకున్న మరొక 3 ప్రాజెక్ట్లను స్టార్ చేయండి
- [ ] మీ GitHub ఖాతాలో 2-ఫ్యాక్టర్ ధృవీకరణను సెట్ చేయండి
- [ ] మీ మొదటి రిపోకు ఒక సాధారణ README సృష్టించండి
- [ ] 5 స్ఫూర్తిదాయక డెవలపర్లను అనుసరించండి
### 🎯 **ఈ గంటలో మీరు సాధ్యమయ్యేది**
- [ ] పాఠం తరువాత క్విజ్ పూర్తి చేసి GitHub ప్రయాణం పై ఆలోచించండి
- [ ] పాస్వర్డ్-రహిత GitHub ధృవీకరణ కోసం SSH కీస్ సెట్ చేయండి
- [ ] అర్థవంతమైన మొదటి కమిట్ మరియు మంచి కమిట్ సందేశం తో క్రియేట్ చేయండి
- [ ] GitHub "Explore" టాబ్ లో ట్రెండింగ్ ప్రాజెక్టులను పరిశీలించండి
- [ ] రిపోని ఫోర్క్ చేసి చిన్న మార్పు చేయడానికి అభ్యాసం చేయండి
### 📅 **మీ వారం నిండిన GitHub అడ్వెంచర్**
- [ ] GitHub Skills కోర్సులను పూర్తి చేయండి (Introduction to GitHub, Markdown)
- [ ] ఓపెన్ సోర్స్ ప్రాజెక్టుకు మీ మొదటి పుల్ రిక్వెస్ట్ ఇవ్వండి
- [ ] మీ పని ప్రదర్శించేందుకు GitHub Pages సైట్ సృష్టించండి
- [ ] మీ ఆసక్తికర ప్రాజెక్టులపై GitHub Discussions లో చేరండి
- [ ] సరైన కమ్యూనిటీ ప్రమాణాలతో రిపో (README, లైసెన్స్, మొదలగు) సృష్టించండి
- [ ] GitHub Codespaces ద్వారా క్లౌడ్-ఆధారిత అభివృద్ధిని ప్రయత్నించండి
### 🌟 **మీ నెల నిందిన పరిణామం**
- [ ] 3 వేర్వేరు ఓపెన్ సోర్స్ ప్రాజెక్టులకు సహకరించండి
- [ ] కొత్తవారికి మెంటార్ గా ఉండండి (దానిని మీరే ముందుగా చేయండి!)
- [ ] GitHub Actions తో ఆటోమేటెడ్ వర్క్‌ఫ్లోలను సెట్ చేయండి
- [ ] మీ GitHub సహకారాలు ప్రదర్శించే పోర్ట్‌ఫోలియో నిర్మించండి
- [ ] Hacktoberfest లేదా సమాన సముదాయ కార్యక్రమాలలో పాల్గొనండి
- [ ] ఇతరులు సహకరించే మీ స్వంత ప్రాజెక్ట్ మైంటైనర్ గా మారండి
### 🎓 **చివరి GitHub ప్రావీణ్యత తనిఖీ**
**మీరు ఎంత దూరం వచ్చారో సెలబ్రేట్ చేయండి:**
- GitHub ఉపయోగించడంలో మీకు ఇష్టమైన విషయం ఏమిటి?
- ఏ సహకార ఫీచర్ మీకు అత్యంత ఉత్సాహం కలిగిస్తుంది?
- ఓపెన్ సోర్స్‌కు సహకరించడంలో మీరు ఎంత విశ్వాసంగా ఉన్నారనుకుంటారు?
- మీరు ముందుగా సహకరించదలచుకున్న మొదటి ప్రాజెక్ట్ ఏది?
```mermaid
journey
title మీ GitHub విశ్వాస యాత్ర
section ఈ రోజు
Nervous: 3: మీరు
Curious: 4: మీరు
Excited: 5: మీరు
section ఈ వారం
Practicing: 4: మీరు
Contributing: 5: మీరు
Connecting: 5: మీరు
section వచ్చే నెల
Collaborating: 5: మీరు
Leading: 5: మీరు
Inspiring Others: 5: మీరు
```
> 🌍 **గ్లోబల్ డెవలపర్ సమాజంలోకి స్వాగతం!** మీరు ఇప్పుడు ప్రపంచవ్యాప్తంగా మిలియన్ల డెవలపర్లతో కలిసి పని చేయడానికి సదుపాయమున్న సాధనాలు కలిగి ఉన్నారు. మీ మొదటి సహకారం చిన్నదే అనిపించవచ్చు, కానీ ప్రతి పెద్ద ఓపెన్ సోర్స్ ప్రాజెక్ట్ కూడా ఎవరో వారి మొదటి కామిట్‌తో ప్రారంభమైంది. మీరు ప్రభావం చూపగలరా అని కాదు, మీ అసాధారణ దృష్టికోణం గల ఏ అద్భుత ప్రాజెక్ట్ మొదటిసారిగా లాభపడదని ప్రశ్న.
మర్చిపోకండి: ప్రతీ నిపుణుడు మొదట కొత్తవాడు. మీరు దీనిని సాధించగలరు! 💪
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్వీకరణ**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా అసమగ్రతలు ఉండవచ్చు. స్థానిక భాషలో ఉన్న అసలు డాక్యుమెంట్ اعتبارించే అధికారిక మూలం గా పరిగణించాలి. మహत्त्वమైన సమాచారం కోసం, వృత్తిపరమైన మనుష్య అనువాదాన్ని సూచించబడుతుంది. ఈ అనువాదం వలన వచ్చే ఏదైనా అవగాహన తప్పులు లేదా వ్యాఖ్యానాలలో మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

1500
translations/te/1-getting-started-lessons/3-accessibility/README.md
View File

File diff suppressed because it is too large Load Diff

261
translations/te/1-getting-started-lessons/3-accessibility/assignment.md
Unescape View File

@ -0,0 +1,261 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
"translation_date": "2026-01-08T19:50:51+00:00",
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
"language_code": "te"
}
-->
# సమగ్ర వెబ్‌సైట్ ప్రాప్యత ఆడిట్
## సూచనలు
ఈ అసైన్‌మెంట్‌లో, మీరు నేర్చుకున్న సూత్రాలు మరియు సాంకేతికతలను వర్తింపజేస్తూ ఒక నిజమైన వెబ్‌సైట్ యొక్క ప్రొఫెషనల్ స్థాయి ప్రాప్యత ఆడిట్ చేపడతారు. ఈ ప్రాక్టికల్ అనుభవం ప్రాప్యతకు సంబంధించిన అడ్డంకులు మరియు పరిష్కారాలపై మీ అవగాహనను గాఢతరం చేస్తుంది.
ప్రాప్యత సమస్యలుంటున్నట్లు కనబడే వెబ్‌సైట్‌ను ఎంచుకోండి — ఇది ఇప్పటికే పర్ఫెక్ట్ ఉన్న సైట్ విశ్లేషణ కన్నా ఎక్కువ నేర్పుతుంది. మంచి అభ్యర్థులు లోపల పాత వెబ్‌సైట్లు, క్లిష్టమైన వెబ్ అప్లికేషన్లు లేదా సంపూర్ణ మల్టిమీడియా కంటెంట్ కలిగిన साइट‌లు ఉంటాయి.
### దశ 1: వ్యూహాత్మక మాన్యువల్ మూల్యాంకనం
ఆటోమేటెడ్ టూల్స్‌కు ముందుగా, సమగ్ర మాన్యువల్ అంచనాను చేయండి. ఈ మానవ-కేంద్రిక పద్ధతి సాధారణంగా టూల్స్ కు కనిపించని సమస్యలను వెలుగులోకి తెస్తుంది మరియు వాస్తవ వినియోగదారుల అనుభవాన్ని అర్థం చేసుకోవడంలో సహాయపడుతుంది.
**🔍 అవసరమైన అంచనా ప్రమాణాలు:**
**నావిగేషన్ మరియు నిర్మాణం:**
- మీరేమాత్రం కీబోర్డ్ (Tab, Shift+Tab, Enter, Space, Arrow keys) ఉపయోగించి మొత్తం సైట్‌ను నావిగేట్ చేయగలరా?
- అన్ని ఇంటరాక్టివ్ అంశాలలో ఫోకస్ సూచికలు స్పష్టంగా కనిపిస్తున్నాయా?
- హెడింగ్ నిర్మాణం (H1-H6) ఒక కొట్టమొత్తం విషయరహిత ప్రణాళికను సృష్టిస్తున్నదా?
- మెయిన్ కంటెంట్‌కి ఎక్కే స్కిప్ లింకులు ఉన్నాయా?
**దృశ్య ప్రాప్యత:**
- మొత్తం సైట్‌ నిండి సరిపడా రంగు వ్యత్యాసం ఉందా (సాధారణ పాఠ్యానికి కనీసం 4.5:1)?
- ముఖ్యమైన సమాచారాన్ని చూపించడానికి సైట్ కేవలం రంగుపై ఆధారపడుతోందా?
- అన్ని చిత్రాలకు అనుకూల ప్రత్యామ్నాయ పాఠ్యం ఉందా?
- 200% జూమ్ చేస్తే కూడా లేఅవుట్ సక్రమంగా పని చేస్తుందా?
**కంటెంట్ మరియు కమ్యూనికేషన్:**
- ఎటువంటి "ఇక్కడ క్లిక్ చేయండి" లేదా అస్పష్ట లింకుల పాఠ్యాలు ఉన్నాయా?
- దృశ్య సంకేతాలు లేకుండా కంటెంట్ మరియు ఫంక్షనాలిటీని అర్థం చేసుకోవచ్చా?
- ఫారమ్ ఫీల్డ్స్ సరిగ్గా లేబుల్ చేయబడ్డాయా మరియు సమూహాలుగా ఉన్నాయి?
- లోపపు సందేశాలు స్పష్టంగా మరియు సహాయకరంగా ఉన్నాయా?
**ఇంటరాక్టివ్ అంశాలు:**
- అన్ని బటన్లు మరియు ఫారమ్ నియంత్రణలు కీబోర్డ్‌తోనే పనిచేస్తాయా?
- డైనమిక్ కంటెంట్ మార్పులను స్క్రీన్ రీడర్లు ప్రకటిస్తాయా?
- మోడల్ డైలాగులు మరియు క్లిష్టమైన విడ్జెట్లకు సరైన ప్రాప్యత నమూనాలు ఉన్నాయి?
📝 **మీ కనుగొనలును** నిర్దిష్ట ఉదాహరణలు, స్క్రీన్‌షాట్లు మరియు పేజీ URLs తో నమోదు చేయండి. సమస్యలూ మరియు బాగా ఉన్న అంశాలూ రెండూ గుర్తించండి.
### దశ 2: సమగ్ర ఆటోమేటెడ్ టెస్టింగ్
ఇప్పుడీ మీరు నిర్వహించిన మాన్యువల్ ఫలితాలను పరిశీలించి, పరిశ్రమ-స్థాయి ప్రాప్యత టెస్టింగ్ టూల్స్ ఉపయోగించి విస్తరించండి. ప్రతి టూల్‌కు వేర్వేరు శక్తులు ఉంటాయి, కాబట్టి అనేక టూల్స్ ఉపయోగించడం ద్వారా పూర్తిగా కవరేజ్ సాధించవచ్చు.
**🛠️ అవసరమైన టెస్టింగ్ టూల్స్:**
1. **లైట్లౌస్ ప్రాప్యత ఆడిషన్** (Chrome/Edge డెవ్‌టూల్స్‌లో ఉండేది)
- అనేక పేజీలపై ఆడిట్ నిర్వహించండి
- నిర్దిష్ట మెట్రిక్స్ మరియు సిఫార్సులపై దృష్టి పెట్టండి
- మీ ప్రాప్యత స్కోరు మరియు నిర్దిష్ట ఉల్లంఘనలను నమోదు చేయండి
2. **axe DevTools** (బ్రౌజర్ ఎక్స్‌టెన్షన్ - పరిశ్రమ స్థాయి)
- లైట్లౌస్ కంటే మరింత విపులమైన అంశాల వివరాలు
- సరిదిద్దాలికలకు నిర్దిష్ట కోడ్ ఉదాహరణలు అందిస్తుంది
- WCAG 2.1 ప్రమాణాలపై పరీక్షలు నిర్వహిస్తుంది
3. **WAVE వెబ్ ప్రాప్యత మూల్యాంకకుడు** (బ్రౌజర్ ఎక్స్‌టెన్షన్)
- ప్రాప్యత లక్షణాల దృశ్య ప్రతినిధి
- పొరపాట్లు మరియు సానుకూల లక్షణాలు హైలైట్ చేస్తుంది
- పేజీ నిర్మాణాన్ని అర్థం చేసుకోవడంలో ఉపయోగపడుతుంది
4. **రంగు వ్యత్యాస విశ్లేషకులు**
- WebAIM Contrast Checker ప్రత్యేక రంగు జోడి కోసం
- పేజీ-వ్యాప్తంగా విశ్లేషణ కోసం బ్రౌజర్ ఎక్స్‌టెన్షన్లు
- WCAG AA మరియు AAA ప్రమాణాలపై పరీక్షలు
**🎧 నిజమైన సహాయక సాంకేతిక పరీక్షలు:**
- **స్క్రీన్ రీడర్ టెస్టింగ్**: NVDA (విండోస్), VoiceOver (Mac), లేదా TalkBack (Android) ఉపయోగించండి
- **కీబోర్డ్ మాత్రమే నావిగేషన్**: మీ మౌస్‌ను అనప్లగ్ చేసి సైట్ మొత్తం నావిగేట్ చేయండి
- **జూమ్ టెస్టింగ్**: 200% మరియు 400% జూమ్ స్థాయిల్లో ఫంక్షనాలిటీని పరీక్షించండి
- **వాయిస్ కంట్రోల్ టెస్టింగ్**: అందుబాటులో ఉంటే వాయిస్ నావిగేషన్ టూల్స్ ఉపయోగించండి
**📊 ఫలితాలను సంతులనగా నిర్వచించండి** మరియు మాస్టర్ స్ప్రెడ్షీట్ సృష్టించండి:
- సమస్య వివరణ మరియు స్థానం
- తీవ్రత స్థాయి (క్రిటికల్/హై/మీడియం/లో)
- ఉల్లంఘించిన WCAG విజయ ప్రమాణాలు
- సమస్య కనుగొన్న టూల్
- స్క్రీన్‌షాట్లు, సాక్ష్యాలు
### దశ 3: సమగ్ర కనుగొనబడిన అంశాల డాక్‌మెంటేషన్
టెక్నికల్ సమస్యలు మరియు వాటి మానవ ప్రభావాన్ని చూపించే ప్రొఫెషనల్ ప్రాప్యత ఆడిట్ రిపోర్ట్ రూపొందించండి.
**📋 అవసరమైన రిపోర్ట్ విభాగాలు:**
1. **ఎగ్జిక్యూటివ్ సమ్మరీ** (1 పేజీ)
- వెబ్‌సైట్ URL మరియు సంక్షిప్త వివరణ
- మొత్తం ప్రాప్యత పరిపక్వత స్థాయి
- ముంగిట 3 అత్యంత క్రిటికల్ సమస్యలు
- వికలాంగులతో ఉన్న వినియోగదారులపై అంచనా ప్రభావం
2. **పద్ధతి** (½ పేజీ)
- టెస్టింగ్ దృష్టికోణం మరియు ఉపయోగించిన టూల్స్
- అంచనా నిర్వహించిన పేజీలు మరియు పరికరం/బ్రౌజర్ సంయోగాలు
- ఆవలంబించిన ప్రమాణాలు (WCAG 2.1 AA)
3. **వिस्तృత కనుగొనికలు** (2-3 పేజీలు)
- WCAG సూత్రాల ప్రకారం సంస్థీకృత సమస్యలు (Perceivable, Operable, Understandable, Robust)
- స్క్రీన్‌షాట్లు మరియు నిర్దిష్ట ఉదాహరణలు చేర్చండి
- కనుగొన్న సానుకూల ప్రాప్యత లక్షణాలు గుర్తించండి
- ఆటోమేటెడ్ టూల్ ఫలితాలతో క్రాస్-రిఫరెన్స్
4. **వినియోగదారుల ప్రభావ అంచనా** (1 పేజీ)
- గుర్తించిన సమస్యలు వివిధ వికలాంగులతో ఉన్న వినియోగదారులపై ఎలా ప్రభావితం చేస్తాయి
- వాస్తవ వినియోగదారుల అనుభవాలను వివరిస్తున్న సన్నివేశాలు
- వ్యాపార ప్రభావం (చట్టపరమైన ప్రమాదం, SEO, వినియోగదారుల జాబితా విస్తరణ)
**📸 సాక్ష్య సేకరణ:**
- ప్రాప్యత ఉల్లంఘనల స్క్రీన్‌షాట్లు
- సమస్యాకరమైన వినియోగదారుల ప్రవాహాల స్క్రీన్ రికార్డింగ్స్
- టూల్ నివేదికలు (PDFలుగా భద్రపరచండి)
- సమస్యలను చూపించే కోడ్ ఉదాహరణలు
### దశ 4: ప్రొఫెషనల్ సరిచేసే ప్రణాళిక
ప్రాప్యత సమస్యలను పరిష్కరించే వ్యూహాత్మక, ప్రాధాన్య సూచించిన ప్రణాళికను రూపొందించండి. ఇది నిజమైన వ్యాపార పరిమితులన్నం దృష్టిలో ఉంచుకునే ప్రొఫెషనల్ వెబ్ డెవలపర్ భావనను చూపుతుంది.
**🎯 వివరమైన మెరుగుదల సిఫార్సులు రూపొందించండి (కనీసం 10 సమస్యలు):**
**గుర్తించిన ప్రతి సమస్యకు, అందించండి:**
- **సమస్య వివరణ**: ఏమైంది, ఏ కారణం తో సమస్య ఉందో స్పష్టమైన వివరణ
- **WCAG సూచన**: ఉల్లంఘించిన విజయ ప్రమాణం (ఉదా: "2.4.4 లింక్ ఉద్దేశం (సందర్భంలో) - స్థాయి A")
- **వినియోగదారుల ప్రభావం**: వివిధ వికలాంగులతో ఉన్న వ్యక్తులపై ప్రభావం
- **పరిష్కారం**: నిర్దిష్ట కోడ్ మార్పులు, రూపకల్పన సవరణలు, లేదా ప్రక్రিয়া మెరుగుదలలు
- **ప్రాధాన్యత స్థాయి**: క్రిటికల్ (మూల సೌಲభ్యం నిలిపివేస్తుంది) / హై (గంభీర అడ్డంకి) / మిడియమ్ (ఉపయోగకర్త సమస్య) / లో (మెరుగుదల)
- **అమలు కష్టతనము**: సమయం/సంక్లిష్టత అంచనా (త్వరిత విజయం / మధ్యస్థ ప్రయత్నం / ప్రధాన పునఃర్రూపకరణ)
- **పరీక్ష ధృవీకరణ**: పరిష్కారం పనిచేస్తుందో ఎలా నిర్ధారించాలి
**ఉదాహరణ మెరుగుదల ఎంట్రీ:**
```
Issue: Generic "Read more" link text appears 8 times on homepage
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
User Impact: Screen reader users cannot distinguish between links when viewed in link list
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
Priority: High (major navigation barrier)
Effort: Low (30 minutes to update content)
Testing: Generate link list with screen reader - each link should be meaningful standalone
```
**📈 వ్యూహాత్మక అమలు దశలు:**
- **దశ 1 (0-2 వారాలు)**: మూల సౌలభ్యాన్ని బ్లాక్ చేసే కీలక సమస్యలు
- **దశ 2 (1-2 నెలలు)**: మెరుగైన వినియోగదారుడి అనుభవం కోసం హై ప్రాధాన్యత సవరణలు
- **దశ 3 (3-6 నెలలు)**: మిడియమ్ ప్రాధాన్యత మెరుగుదలలు మరియు ప్రక్రియా అభివృద్ధులు
- **దశ 4 (నిరంతరం)**: నిరంతర పర్యవేక్షణ మరియు మెరుగుదల
## మూల్యాంకన రుబ్రిక్
మీ ప్రాప్యత ఆడిట్ ను సాంకేతిక ఖచ్చితత్వం మరియు ప్రొఫెషనల్ ప్రదర్శన రెండింటా ఆధారంగా మూల్యాంకనం చేయబడుతుంది:
| ప్రమాణం | అద్భుతం (90-100%) | మంచి (80-89%) | తగినంత (70-79%) | మెరుగుదల అవసరం (<70%) |
|----------|-------------------|---------------|-------------------|------------------------|
| **మాన్యువల్ టెస్టింగ్ లోతు** | ప్రత్యేకమైన POUR సిద్ధాంతాలన్నిటిపై సమగ్ర అంచనా, వివరమైన పరిశీలనలు, వినియోగదారుల సన్నివేశాలు | ఎక్కువ భాగం ప్రాప్యత ప్రాంతాలను మంచి కవరేజ్ తో, స్పష్టమైన కనుగొనికలు మరియు కొంత వినియోగదారు ప్రభావ విశ్లేషణ | ముఖ్యమైన ప్రాంతాలపై ప్రాథమిక అంచనా, తగిన పరిశీలనలు | పరిమిత పరీక్షలు, తక్కువ పరిశీలనలు మరియు చోటుచేసుకున్న వినియోగదారుల ప్రభావం |
| **టూల్ వినియోగం & విశ్లేషణ** | అవసరమైన అన్ని టూల్స్ సమర్థవంతంగా ఉపయోగించి, కనుగొనికలకు క్రాస్-రిఫరెన్సింగ్, స్పష్టమైన సాక్ష్యాలు, టూల్ పరిమితులు విశ్లేషణ | ఎక్కువ టూల్స్ తో సరైన డాక్యుమెంటేషన్, కొంత క్రాస్-రిఫరెన్సింగ్, తగిన సాక్ష్యాలు | అవసరమైన టూల్స్ తో ప్రాథమిక డాక్యుమెంటేషన్ మరియు కొంత సాక్ష్యం | అత్యల్ప టూల్ వినియోగం, నెమ్మదైన డాక్యుమెంటేషన్ లేదా సాక్ష్యాలు కనుమరుగైనవి |
| **సమస్య గుర్తింపు & వర్గీకరణ** | 15+ నిర్దిష్ట సమస్యలను WCAG సిద్ధాంతాలన్నిటి క్రింద గుర్తించడం, తీవ్రతతో సరైన వర్గీకరణ, లోతైన అవగాహన | 10-14 సమస్యల గుర్తింపు WCAG ప్రధాన భాగాలపై, మంచి వర్గీకరణ, దృఢ అవగాహన | 7-9 సమస్యలు తగిన WCAG కవరేజ్‌తో, ప్రాథమిక వర్గీకరణ | 7 కంటే తక్కువ సమస్యలు, పరిమిత పరిధి లేదా చెడ్డ వర్గీకరణ |
| **పరిష్కారం నాణ్యత & సాధ్యత్వం** | 10+ వివరమైన, అమలు చేయదగిన పరిష్కారాలు, ఖచ్చిత WCAG సూచనలు, వాస్తవమైన అమలు సమయాలు, ధృవీకరణ పద్ధతులు | 8-9 మంచి పరిష్కారాలు ఎక్కువగా ఖచ్చిత సూచనలతో, మంచి అమలు వివరాలు | 6-7 ప్రాథమిక పరిష్కారాలు కొంత వివరాలతో, సాధ్యమైన విధానాలు | 6 కంటే తక్కువ పరిష్కారాలు, తక్కువ వివరాలు, అసాధ్యమైన అమలు |
| **ప్రొఫెషనల్ కమ్యూనికేషన్** | రిపోర్ట్ అద్భుతంగా కూర్చినది, స్పష్టంగా రాయబడింది, ఎగ్జిక్యూటివ్ సమ్మరీతో, సరైన సాంకేతిక భాషను ఉపయోగించి, వ్యాపార డాక్యుమెంట్ ప్రమాణాలను అనుసరించి | బాగుంది, మంచి రచనా నాణ్యత, ఎక్కువ భాగం అవసరమైన విభాగాలు ఉన్నాయి, సరైన ధోరణి | తగినంత సవ్యంగా, అంగీకారయోగ్య రచన, ప్రాథమిక విభాగాలు | చెడు కూర్పు, అస్పష్ట రచన లేదా కీలక విభాగాలు లేకపోవడం |
| **వాస్తవ-ప్రపంచ అన్వయము** | వ్యాపార ప్రభావం, చట్టపరమైన దృష్టికోణాలు, వినియోగదారు విభిన్నత, సాధనా సవాళ్లు అర్థం చేసుకోవడం | ప్రాక్టికల్ అన్వయంపై మంచి అవగాహన, కొంత వ్యాపార కంటెక్ట్స్‌తో | వాస్తవ ప్రపంచ అన్వయంపై ప్రాథమిక అవగాహన | ప్రాక్టికల్ అన్వయాలతో తక్కువ అనుసంధానం |
## ఆధునిక సవాలు ఎంపికలు
**🚀 అదనపు సవాలు కోరుకునే విద్యార్థులకోసం:**
- **తులనాత్మక విశ్లేషణ**: 2-3 పోటీ వెబ్‌సైట్లను ఆడిట్ చేసి వాటి ప్రాప్యత పరిపక్వతను పోల్చి చూడండి
- **మొబైల్ ప్రాప్యత దృష్టి**: Android TalkBack లేదా iOS VoiceOver ఉపయోగించి మొబైల్ ప్రత్యేక పరిణామాలను లోతుగా అధ్యయనం చేయండి
- **అంతర్జాతీయ దృష్టికోణం**: వివిధ దేశాల ప్రాప్యత ప్రమాణాలు (EN 301 549, సెక్షన్ 508, ADA) పరిశీలించి వర్తింప జేయండి
- **ప్రాప్యత ప్రకటన సమీక్ష**: వెబ్‌సైట్ ఉన్న ప్రాప్యత ప్రకటనను (ఉంటే) మీ కనుగొనికలతో పరిశీలించండి
## సమర్పణలు
ప్రొఫెషనల్ స్థాయి విశ్లేషణ మరియు వాస్తవ అమలు ప్రణాళికను చూపించే సమగ్ర ప్రాప్యత ఆడిట్ రిపోర్ట్ సమర్పించండి:
**📄 తుది రిపోర్ట్ అవసరాలు:**
1. **ఎగ్జిక్యూటివ్ సమ్మరీ** (1 పేజీ)
- వెబ్‌సైట్ అవలోకనం మరియు ప్రాప్యత పరిపక్వత మెరుగుదల
- ప్రధాన కనుగొనికల సంక్షిప్తం మరియు వ్యాపార ప్రభావం
- సిఫారసు చేసిన ప్రాధాన్యత చర్యలు
2. **పద్ధతి మరియు పరిధి** (1 పేజీ)
- టెస్టింగ్ దృక్పథం, ఉపయోగించిన టూల్స్, అంచనా ప్రమాణాలు
- అంచనా చేసిన పేజీలు/విభాగాలు, పరిమితులు
- ప్రమాణాల అనుగుణత ఫ్రేమ్‌వర్క్ (WCAG 2.1 AA)
3. **విస్తృత కనుగొనికల రిపోర్ట్** (3-4 పేజీలు)
- మాన్యువల్ టెస్టింగ్ గమనికలు మరియు వినియోగదారు సన్నివేశాలు
- ఆటోమేటెడ్ టూల్ ఫలితాలు, క్రాస్-రిఫరెన్సింగ్
- WCAG సిద్ధాంతాల ప్రకారం సమస్యలు, సాక్ష్యాలతో
- గుర్తించిన సానుకూల ప్రాప్యత లక్షణాలు
4. **వ్యూహాత్మక సరిచేయు ప్రణాళిక** (3-4 పేజీలు)
- ప్రాధాన్య అనుసారంగా మెరుగుదల సిఫార్సులు (కనీసం 10)
- అమలు సమయరేఖా మరియు కృషి అంచనాలు
- విజయ ప్రమాణాలు మరియు ధృవీకరణ పద్ధతులు
- దీర్ఘకాల ప్రాప్యత నిర్వహణ వ్యూహం
5. **మద్దతు సాక్ష్యాలు** (అట్టాచెమెంట్లు)
- ప్రాప్యత ఉల్లంఘనల స్క్రీన్‌షాట్లు మరియు టెస్టింగ్ టూల్స్
- సమస్యలు మరియు పరిష్కారాలు చూపించే కోడ్ ఉదాహరణలు
- టూల్ నివేదికలు మరియు ఆడిట్ సంగ్రహాలు
- స్క్రీన్ రీడర్ పరీక్ష నోట్ల లేదా రికార్డింగ్స్
**📊 ఫార్మాట్ అవసరాలు:**
- **డాక్యుమెంట్ ఫార్మాట్**: PDF (ప్రొఫెషనల్ ప్రెజెంటేషన్)
- **పదాల సంఖ్య**: 2,500-3,500 పదాలు (అట్టాచెమెంట్లు, స్క్రీన్‌షాట్లు, మినహా)
- **దృశ్య అంశాలు**: ఆThroughoutలో స్క్రీన్‌షాట్లు, диаграммы, ఉదాహరణలు చేర్చండి
- **సూచనలు**: WCAG మార్గదర్శకాలు మరియు ప్రాప్యత వనరులు సరైన రీతిలో సూచించండి
**💡 ఉత్తమత కోసం ప్రో టిప్స్:**
- స్థిరమైన శీర్షికలు మరియు శైలితో ప్రొఫెషనల్ రిపోర్ట్ ఫార్మాటింగ్ ఉపయోగించండి
- సులభ నావిగేషన్ కోసం కంటెంట్ పట్టిక చేర్చండి
- సాంకేతిక ఖచ్చితత్వం మరియు సాంఘిక దృష్టితో వ్యాపార సంబంధ భాష మధ్య సరిపోల్చుకోండి
- సాంకేతిక అమలు మరియు వినియోగదారు ప్రభావం రెండింటినీ అర్థం చేసుకోవడాన్ని ప్రదర్శించండి
## శిక్షణ ఫలితాలు
ఈ సమగ్ర ప్రాప్యత ఆడిట్ పూర్తి చేసి, మీరు ముఖ్యమైన ప్రొఫెషనల్ నైపుణ్యాలు అభివృద్ధి చేసుకుంటారు:
**🎯 సాంకేతిక నైపుణ్యాలు:**
- **ప్రాప్యత టెస్టింగ్ నైపుణ్యం**: పరిశ్రమ స్థాయి మాన్యువల్ మరియు ఆటోమేటెడ్ పరీక్షా పద్ధతుల్లో ప్రావీణ్యము
- **WCAG వినియోగం**: వెబ్ కంటెంట్ని ప్రాప్యత మార్గదర్శకాలుగా వాస్తవ ప్రపంచ సందర్భాల్లో అన్వయించడంపై ప్రాక్టికల్ అనుభవం
- **సహాయక సాంకేతిక అవగాహన**: స్క్రీన్ రీడర్లు మరియు కీబోర్డ్ నావిగేషన్ కొరకు ప్రాక్టికల్ అనుభవం
- **సమస్య-పరిష్కార మ్యాపింగ్**: ప్రాప్యత అడ్డంకులను గుర్తించి, ప్రత్యేకమైన, అమలు చేయదగిన పరిష్కార వ్యూహాలు రూపొందించే సామర్ధ్యం
**💼 ప్రొఫెషనల్ నైపుణ్యాలు:**
- **సాంకేతిక కమ్యూనికేషన్**: విభిన్న వాట్సోల్డర్ల కోసం ప్రొఫెషనల్ ప్రాప్యత నివేదికలు రాయడం లో అనుభవం
- **వ్యూహాత్మక ప్రణాళిక**: వినియోగదారు ప్రభావం మరియు అమలు సాధ్యత ఆధారంగా ప్రాప్యత మెరుగుదలలను ప్రాధాన్య ఇవ్వుటలో సామర్థ్యం
- **నాణ్యత హామీ**: అభివృద్ధి జీవనచక్రంలో భాగంగా ప్రాప్యత పరీక్షలపై అవగాహన
- **ప్రమాద అంచనా**: ప్రాప్యత అనుగుణతలో చట్టపరమైన, వ్యాపార, నైతిక పరామర్శలపై అవగాహన
**🌍 సమగ్ర రూపకల్పన దృష్టికోణం:**
- **వినియోగదారుల సహానుభూతి**: విభిన్న వినియోగదారుల అవసరాలు మరియు సహాయక సాంకేతిక పరిచయాలను లోతుగా అర్థం చేసుకోవడం
- **సార్వత్రిక రూపకల్పన సూత్రాలు**: వికలాంగులు మాత్రమే కాదు, అందరి కి లాభదాయకమే అధిగమించే రూపకల్పన గుర్తింపు
- **నిరంతర మెరుగుదల**: నిరంతరం ప్రాప్యత అంచన మరియు అభివృద్ధి కోసం తఱుము
- **వక్తృత్వ నైపుణ్యాలు**: భవిష్యత్తు ప్రాజెక్ట్స్ మరియు బృందాలలో ప్రాప్యత ఉత్తమ ఆచరణలను ప్రోత్సహించే ధైర్యం
**🚀 కెరీర్ సిద్ధత:**
ఈ అసైన్‌మెంట్ నిజ ప్రపంచ ప్రాప్యత కన్సల్టింగ్ ప్రాజెక్ట్లను ప్రతిబింబిస్తుంది, ఇది మీకు పోర్ట్‌ఫోలియోకి తగిన అనుభవాన్ని ఇస్తుంది, ఇది చూపిస్తుంది:
- క్రమబద్ధమైన సమస్య పరిష్కార విధానం
- సాంకేతిక వివరాలపైన మరియు వ్యాపార ప్రభావంపై దృష్టి
- క్లిష్టమైన సాంకేతిక ఆలోచనల స్పష్టమైన కమ్యూనికేషన్
- వెబ్ డెవలప్మెంట్‌లో చట్టపరమైన మరియు నైతిక బాధ్యతల అవగాహన
పూర్తి చేసిన తర్వాత, మీరు ఏ వెబ్ డెవలప్మెంట్ పాత్రలోనైనా ప్రాప్యత పథకాలకు అర్థవంతంగా తోడ్పడటానికి మరియు సమగ్ర రూపకల్పన సాధనలను ప్రోత్సహించడానికి సిద్ధంగా ఉంటారు.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అసలు వ్యాఖ్య**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరైన అనువాదానికి ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటిక్ అనువాదాల్లో పొరపాట్లు లేదా లోపాలు ఉండవచ్చు. అసలైన డాక్యుమెంట్ native భాషలోనే అధికారిక మూలంగా పరిగణించబడాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వలన ఏర్పడిన ఏవైనా అనర్థాలు లేదా తప్పుదోవ పట్టుకోవడంలో మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

33
translations/te/1-getting-started-lessons/README.md
Unescape View File

@ -0,0 +1,33 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "770d9f83dddc841c19f210dee5fe0712",
"translation_date": "2026-01-08T11:40:03+00:00",
"source_file": "1-getting-started-lessons/README.md",
"language_code": "te"
}
-->
# వెబ్ డెవలప్‌మెంట్ ప్రారంభం
ఈ పాఠ్యాంశంలో, మీరు ప్రొఫెషనల్ డెవలపర్‌గా మారడానికి అవసరమైన ప్రాజెక్ట్-ఆధారిత కాన్సెప్ట్‌లకు సంబంధించిన కాన్సెప్ట్స్‌ను పరిచయం చేయబడతారు.
### విషయాలు
1. [ప్రోగ్రామింగ్ భాషలు మరియు వాణిజ్య సాధనాల పరిచయం](1-intro-to-programming-languages/README.md)
2. [GitHubకి పరిచయం](2-github-basics/README.md)
3. [అభిజ్ఞతత యొక్క בסיסాలు](3-accessibility/README.md)
### క్రెడిట్స్
ప్రోగ్రామింగ్ భాషలు మరియు వాణిజ్య సాధనాల పరిచయం అన్నది ప్రేమతో [Jasmine Greenaway](https://twitter.com/paladique) ద్వారా రాయబడింది
GitHubకి పరిచయం అన్నది ప్రేమతో [Floor Drees](https://twitter.com/floordrees) ద్వారా రాయబడింది
అభిజ్ఞతత యొక్క בסיסాలు అన్నది ప్రేమతో [Christopher Harrison](https://twitter.com/geektrainer) ద్వారా రాయబడింది
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**హితజ్ఞాపకం**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటికీ, స్వయంచాలక అనువాదాలలో లోపాలు లేదా తప్పులు ఉండవచ్చు. అసలు డాక్యుమెంట్, దాని మాతృభాషలో ఉండేది, అధికారిక స్రోతస్గా పరిగణించాలి. కీలకమైన సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదాన్ని సూచించబడుతుంది. ఈ అనువాదం వాడుకతో కలిగే ఏవైనా తప్పు అర్థాలు లేదా తప్పైన అర్థకాల్పనలకు మేము బాధ్యులవాదము కాదము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

1146
translations/te/10-ai-framework-project/README.md
View File

File diff suppressed because it is too large Load Diff

0
translations/te/10-ai-framework-project/solution/README.md
Unescape View File

618
translations/te/2-js-basics/1-data-types/README.md
Unescape View File

@ -0,0 +1,618 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
"translation_date": "2026-01-08T12:33:24+00:00",
"source_file": "2-js-basics/1-data-types/README.md",
"language_code": "te"
}
-->
# జావాస్క్రిప్ట్ మౌలికాలు: డేటా రకాలు
![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.te.png)
> స్కెచ్ నోట్ ద్వారా [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title మీ JavaScript డేటా రకాల సాహసం
section ఆధారం
Variables & Constants: 5: మీరు
Declaration Syntax: 4: మీరు
Assignment Concepts: 5: మీరు
section ప్రాధమిక రకాలు
Numbers & Math: 4: మీరు
Strings & Text: 5: మీరు
Booleans & Logic: 4: మీరు
section జ్ఞానాన్ని ఉపయోగించడం
Type Conversion: 4: మీరు
Real-world Examples: 5: మీరు
Best Practices: 5: మీరు
```
డేటా రకాలు జావాస్క్రిప్ట్‌లోని ప్రాథమిక భావనలలో ఒకటి, మీరు రాసే ప్రతి ప్రోగ్రాంలో మీరు ఎదుర్కొననేంటివి. డేటా రకాలని అలెగ్జాండ్రియాలో పురాతన గ్రంథాలయకర్తలు వాడిన ఫైలింగ్ సిస్టమ్ లా అనుకోండి – వారు కవితలు, గణితం, మరియు చరిత్రా రికార్డులు ఉన్న స్క్రోలు కోసం నిర్దిష్ట ప్రదేశాలు కలిగారు. జావాస్క్రిప్ట్ కూడా వివిధ రకాల డేటాకు విభిన్న వర్గాలు ఇలాచేరుస్తుంది.
ఈ పాఠంలో, జావాస్క్రిప్ట్‌ని పనిచేస్తించే ముఖ్యమైన డేటా రకాలను పరిశీలిస్తాము. మీరు సంఖ్యలు, పాఠ్యాలు, సత్య/అసత్య విలువలను ఎలా నిర్వహించాలో నేర్చుకుంటారు, మరియు సరైన రకం ఎంచుకోవడం మీ ప్రోగ్రామ్లకు ఎందుకు అవసరమో అర్థం చేసుకుంటారు. ఈ భావనలు మొదట్లో抽象ంగా అనిపించవచ్చు, కాని అనుభవంతో అవి సహజంగా మారతాయి.
డేటా రకాలను అర్థం చేసుకోవడం జావాస్క్రిప్ట్‌లోని మిగతా విషయాలన్నింటికీ స్పష్టత ఇస్తుంది. ఒక కేథెడ్రాల్ నిర్మించాలంటే శిల్పకారులు వివిధ నిర్మాణ పదార్థాలను అర్థం చేసుకోవాలి గానీ, ఇలాంటి ప్రాథమిక విషయాలు మీరు భవిష్యత్తులో తయారుచేసే ప్రతిదానికి మద్దతు ఇస్తాయి.
## లెక్చర్ ముందు క్విజ్
[లెక్చర్ ముందు క్విజ్](https://ff-quizzes.netlify.app/web/)
ఈ పాఠం వెబ్‌పై ఇంటరాక్టివిటీని అందించే జావాస్క్రిప్ట్ యొక్క మౌలికమైన అంశాలను కవరిస్తుంది.
> మీరు ఈ పాఠాన్ని [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)లో కూడా తీసుకోవచ్చు!
[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
> 🎥 పైన ఉన్న చిత్రాలను క్లిక్ చేస్తే వేరియబుల్స్ మరియు డేటా రకాల గురించి వీడియోలు వస్తాయి
వేరియబుల్స్ మరియు వాటిలో నిల్వ అయ్యే డేటా రకాలతో ప్రారంభిద్దాం!
```mermaid
mindmap
root((JavaScript డేటా))
Variables
let myVar
const PI = 3.14
var oldStyle
Primitive Types
number
42
3.14
-5
string
"హలో"
'ప్రపంచం'
`టెంప్లేట్`
boolean
true
false
undefined
null
Operations
Arithmetic
+ - * / %
String Methods
concatenation
template literals
Type Conversion
implicit
explicit
```
## వేరియబుల్స్
వేరియబుల్స్ ప్రోగ్రామింగ్‌లో ప్రాథమిక నిర్మాణ బ్లాకులు. మధ్యయుగ గంధకారుల వలె వివిధ పదార్థాలను నిల్వ చేసే స్టిక్కర్లు ఉన్న జార్లు లా, వేరియబుల్స్ మీరు సమాచారాన్ని నిల్వ చేసి దానికి వివరణాత్మక పేరు ఇస్తారు, తద్వారా మీరు మళ్లీ ఆ సమాచారాన్ని సూచించవచ్చు. ఎవరో యువత వయస్సును గుర్తు పెట్టుకోవాలా? దానిని `age` అనే వేరియబుల్‌లో నిల్వ చేయండి. ఒక వినియోగదారుని పేరు ట్రాక్ చేయాలా? దానిని `userName` అనే వేరియబుల్‌లో ఉంచండి.
మనం జావాస్క్రిప్ట్‌లో వేరియబుల్స్ సృష్టించడంలో ఆధునిక దృష్టికోణాన్ని పరిగణిస్తాము. మీరు ఇక్కడ నేర్చుకుంటున్న సాంకేతికతలు భాష అభివృద్ధి మరియు ప్రోగ్రామింగ్ స‌మాజం ద్వారా అభివృద్ధి చెందిన ఉత్తమ పద్ధతులను ప్రతిబింబిస్తాయి.
ఒక వేరియబుల్ సృష్టించడం మరియు **ప్రకటన చేయడం** ఈ విధంగా ఉంటుంది **[keyword] [name]**. ఇది రెండు భాగాల సంగమం:
- **కీవర్డ్**. మారగల వేరియబుల్స్ కోసం `let` ఉపయోగించండి, లేదా విలువ మారకదగినవి అయితే `const` ఉపయోగించండి.
- **వేరియబుల్ పేరు**, మీరు ఎంచుకునే వివరణాత్మక పేరు.
✅ `let` కీవర్డ్ ES6లో ప్రవేశపెట్టబడింది మరియు మీ వేరియబుల్‌కు ఒక _బ్లాక్ స్కోప్_ ఇస్తుంది. పాత `var` కీవర్డ్‌కి బదులుగా మీకు `let` లేదా `const` ఉపయోగించడం సిఫార్సు చేయబడుతుంది. బ్లాక్ స్కోప్స్ గురించి మేము భవిష్యత్తులో ఎక్కువగా మాట్లాడతాము.
### పని - వేరియబుల్స్ తో పని
1. **వేరియబుల్ ప్రకటించండి**. మన మొదటి వేరియబుల్ సృష్టించడం ప్రారంభిద్దాం:
```javascript
let myVariable;
```
**ఇది ఏమి సాధిస్తుంది:**
- జావాస్క్రిప్ట్‌కి `myVariable` అనే నిల్వ స్థలాన్ని సృష్టించాలని చెబుతుంది
- జావాస్క్రిప్ట్ ఈ వేరియబుల్ కోసం మెమరీలో స్థలం కేటాయిస్తుంది
- వేరియబుల్‌ను ప్రస్తుతం ఏ విలువ లేదు (అర్థం కానిది)
2. **దానికి విలువ ఇవ్వండి**. ఇప్పుడు మన వేరియబుల్‌లో ఏదైనా ఉంచుదాం:
```javascript
myVariable = 123;
```
**అసైన్‌మెంట్ ఎలా పనిచేస్తింది:**
- `=` ఆపరేటర్ 123 విలువను మా వేరియబుల్‌కు కేటాయిస్తుంది
- వేరియబుల్ ఇప్పుడు ఎవ్వైదైన విలువులతో ఉంటుంది, అర్థం కానిది కాదు
- మీరు `myVariable` వాడడం ద్వారా ఈ విలువను మీ కోడ్ మొత్తం అభియోగించవచ్చు
> గమనిక: ఈ పాఠంలో `=` ఉపయోగించడం అంటే మేము "అసైన్‌మెంట్ ఆపరేటర్" వాడుతున్నాం, ఇది వేరియబుల్‌కు విలువ సెట్ చేసేందుకు ఉపయోగిస్తారు. ఇది సమానత్వాన్ని సూచించదు.
3. **సమర్థవంతమైన మార్గం**. వాస్తవానికి, ఈ రెండు దశలను కలిపిద్దాం:
```javascript
let myVariable = 123;
```
**ఈ విధానం ఎక్కువ సమర్థవంతం:**
- ఒక అభిప్రాయంలో వేరియబుల్ ప్రకటించి విలువను కేటాయిస్తున్నారు
- ఇది డెవలపర్లలో సాంప్రదాయ పద్ధతి
- కోడ్ పొడవును తగ్గించినా స్పష్టత ఉంటుంది
4. **మార్చాలనుకుంటే**. వేరియబుల్ లో వేరే సంఖ్య ఉంచాలంటే?
```javascript
myVariable = 321;
```
**పునఃనియామకం అర్థం చేసుకోండి:**
- వేరియబుల్ ఇప్పుడు 123 కాకుండా 321 కలిగి ఉంది
- మొన్నటి విలువ మారు ఐనది – వేరియబుల్స్ ఒక్కోసారి ఒక్క విలువను నిల్వ చేస్తాయి
- ఈ మారగలpekత `let`తో ప్రకటించిన వేరియబుల్స్ ముఖ్య లక్షణం
✅ ప్రయత్నించండి! మీరు మీ బ్రౌజర్‌లోనే జావాస్క్రిప్ట్ రాయవచ్చు. ఒక బ్రౌజర్ విండో తెరవండి మరియు డెవలపర్ టూల్స్‌కు వెళ్ళండి. కన్సోల్‌లో మీరు ఒక ప్రాంప్ట్ చూడగలరు; `let myVariable = 123` టైప్ చేసి, రిటర్న్ నొక్కండి, అప్పుడు `myVariable` టైప్ చేయండి. ఏం జరుగుతుంది? ఈ భావనలు తరువాతి పాఠాలలో మరింత వివరంగా నేర్చుకుంటారు.
### 🧠 **వేరియబుల్స్ ఆచరణ పరీక్ష: సౌకర్యంగా ఉండటానికి**
**వేరియబుల్స్ గురించి మీ భావన ఎలా ఉందో చూద్దాము:**
- వేరియబుల్ ప్రకటించడం మరియు అసైన్ చేయడంలో తేడా చెప్పగలరా?
- మీరు వేరియబుల్‌ను ప్రకటించేములోపల వాడితే ఏం జరుగుతుంది?
- ఎప్పుడు వేరియబుల్ కోసం `let` ను `const` కంటే ఎంపికచేస్తారు?
```mermaid
stateDiagram-v2
[*] --> Declared: let myVar
Declared --> Assigned: myVar = 123
Assigned --> Reassigned: myVar = 456
Assigned --> [*]: 변수 సిద్ధంగా ఉంది!
Reassigned --> [*]: అప్‌డేట చేయబడిన విలువు
note right of Declared
변수 ఉంది కానీ
విలువు లేదు (అనిర్ణీతం)
end note
note right of Assigned
변수 లో
విలువు 123 ఉుంది
end note
```
> **త్వరిత చిట్కా**: వేరియబుల్స్‌ని లేబుల్ చేసిన నిల్వ బాక్సుల్లా ఆలోచించండి. మీరు బాక్స్ సృష్టిస్తారు (`let`), దాంట్లో ఏదైనా ఇస్తారు (`=`), తరువాత అవసరమైతే దాన్ని మార్చవచ్చు!
## కాన్స్టెంట్స్
కొన్నిసార్లు మీరు ప్రోగ్రామ్ అమలులో యథాతథంగా మారని సమాచారం నిల్వ చేయాలి. కాన్స్టెంట్లు పురాతన గ్రీస్‌లో యుక్లిడ్ స్థాపించిన గణిత సూత్రాల లాగా – ఒకసారి నిరూపించబడి నమోదు అయ్యాక, అవి భవిష్యత్తులో ఎప్పుడూ మారవు.
కాన్స్టెంట్లు వేరియబుల్స్ లా పనిచేస్తాయి, అయితే ఒక ముఖ్యమైన పరిమితితో: మీరు వాటికి మొదటిసారి విలువను కేటాయించిన తరువాత, దానిని మార్చలేరు. ఈ స్థిరత్వం ప్రోగ్రామ్‌లో ముఖ్యమైన విలువలకు అనుకోని మార్పులకు అడ్డుకట్ట వేస్తుంది.
కాన్స్ట్ ప్రకటన మరియు ప్రారంభం వేరియబుల్‌ల వలే ఉంటుంది, కానీ కీవర్డ్ `const`. కాన్స్టెంట్లు సాధారణంగా పెద్ద అక్షరాలతో పేరిస్తారు.
```javascript
const MY_VARIABLE = 123;
```
**ఈ కోడ్ ఏమి చేస్తుంది:**
- **`MY_VARIABLE` అనే కాన్స్టెంట్ను 123 విలువతో సృష్టిస్తుంది**
- **కాన్స్టెంట్లకు పెద్ద అక్షరాల నేమింగ్ కాన్వెన్షన్ ఉపయోగిస్తుంది**
- **ఈ విలువకు భవిష్యత్తులో మార్పులు జరగకుండా నిరోధిస్తుంది**
కాన్స్టెంట్లకు రెండు ప్రధాన నియమాలు ఉన్నాయి:
- **వాళ్ళకు వెంటనే విలువ ఇవ్వాలి** – ఖాళీ కాన్స్టెంట్లు అనుమతించబడవు!
- **మీరు ఆ విలువను ఎప్పటికీ మార్చలేరు** – ప్రయత్నిస్తే జావాస్క్రిప్ట్ తప్పిదం చూపుతుంది. దీన్ని చూద్దాం:
**సాధారణ విలువ** - ఈ క్రింది అనుమతించబడదు:
```javascript
const PI = 3;
PI = 4; // అనుమతించబడదు
```
**మీరు గుర్తుంచుకోవాల్సింది:**
- **కాన్స్టెంట్ పునఃనియామకం ప్రయత్నాలు తప్పుదోవ కలిగిస్తాయి**
- **ముఖ్యమైన విలువలను అనుకోని మార్పుల నుంచి రక్షిస్తుంది**
- **విలువ ప్రోగ్రామ్ అంతటికీ స్థిరంగా ఉంచుతుంది**
**ఆబ్జెక్ట్ రిఫరెన్స్ రక్షించబడినది** - ఈ క్రింది అనుమతించబడదు:
```javascript
const obj = { a: 3 };
obj = { b: 5 } // అనుమతించబడదు
```
**ఈ భావనలు అర్థం చేసుకోండి:**
- **అన్ని ఆబ్జెక్ట్ను కొత్తదిగా మార్చకుండా నిరోధిస్తుంది**
- **మొదటి ఆబ్జెక్ట్‌కు రిఫరెన్స్‌ను రక్షిస్తుంది**
- **ఆబ్జెక్ట్ గుర్తింపును మెమరీలో నిలుపుతుంది**
**ఆబ్జెక్ట్ విలువ రక్షించబడలేదు** - ఈ క్రింది అనుమతించబడుతుంది:
```javascript
const obj = { a: 3 };
obj.a = 5; // అనుమతించబడింది
```
**ఇక్కడ ఏమి జరుగుతుందో వివరణ:**
- **ఆబ్జెక్ట్ లోపల ప్రాపర్టీ విలువను మార్చింది**
- **అదే ఆబ్జెక్ట్ రిఫరెన్స్ నిలిపింది**
- **ఆబ్జెక్ట్ కంటెంట్స్ మారవచ్చు కానీ రిఫరెన్స్ స్థిరంగా ఉంటుంది**
> గమనిక, `const` అంటే రిఫరెన్స్ పునఃనియామకం నుంచి రక్షించబడింది. విలువ మాత్రం _అమర్యాదకరం_ కాదు, ముఖ్యంగా అది ఆబ్జెక్ట్ వంటి సంక్లిష్ట నిర్మాణం అయితే మారవచ్చు.
## డేటా రకాలు
జావాస్క్రిప్ట్ సమాచారం ను వివిధ వర్గాలుగా విభజిస్తుంది, వీటిని డేటా రకాలు అంటారు. ఈ భావన పురాతన పండితులు జ్ఞానాన్ని వర్గీకరించిన విధానాన్ని అనుసరిస్తుంది – అరిస్టోటిల్ వివిధ రకాల తర్కాన్ని వేరుగా చూపించాడు, ఎందుకంటే సాంఘిక సూత్రాలను కవిత, గణితం, ప్రకృతి తత్వశాస్త్రాలకు సమానంగా వర్తింపజేయలేవు.
డేటా రకాలు ముఖ్యం ఎందుకంటే వివిధ రకాల సమాచారం వివిధ ఆపరేషన్లతో పని చేస్తాయి. మీరు వ్యక్తి పేరుపై గణితం చేయలేము కాబట్టి గణిత సమీకరణని అల్ఫాబెట్ల క్రమంలో అమర్చలేము, అదే విధంగా జావాస్క్రిప్ట్ ప్రతి ఆపరేషన్ కు సరైన డేటా రకం కావాలి. దీని అర్థం వల్ల తప్పులూ తగ్గుతాయి మరియు మీ కోడ్ భరోసాలైనది అవుతుంది.
వేరియబుల్స్ అనేక రకాల విలువలను నిల్వ చేయగలవు, ఉదాహరణకు సంఖ్యలు మరియు పాఠ్యాలు. ఈ విలువల వివిధ రకాలే **డేటా రకం** గా పిలవబడతాయి. డేటా రకాలు సాఫ్ట్‌వేర్ అభివృద్ధిలో ముఖ్యమైనవి, ఎందుకంటే అవి డెవలపర్లకు కోడ్ రాయడంలో మరియు సాఫ్ట్‌వేర్ ఎలా నడిచించాలో నిర్ణయించడంలో సహాయపడతాయి. అంతేకాక, కొన్ని డేటా రకాలకు ప్రత్యేక లక్షణాలు ఉండి విలువలోని అదనపు సమాచారాన్ని మారుస్తాయి లేదా ఇవ్వగలవు.
✅ డేటా రకాలు జావాస్క్రిప్ట్ డేటా ప్రిమిటివ్ లాగా పిలవబడతాయి, ఎందుకంటే ఇవి భాష అందించే కనిష్ఠ స్థాయి డేటా రకాలు. ఏడు ప్రిమిటివ్ డాటా రకాలు ఉన్నాయి: string, number, bigint, boolean, undefined, null మరియు symbol. ప్రతీ ప్రిమిటివ్ ఏమిటో ఒక సారి ఊహించండి. `zebra` అంటే ఏమిటి? `0` అంటే? `true` అంటే?
### సంఖ్యలు
సంఖ్యలు జావాస్క్రిప్ట్‌లో అత్యంత సరళమైన డేటా రకం. మీరు 42 వంటి సంపూర్ణ సంఖ్యలు, 3.14 లాంటి దశాంసాలు, లేదా -5 లాంటి ప్రతికూల సంఖ్యలతో పని చేస్తున్నా, జావాస్క్రిప్ట్ వాటిని ఒకే విధంగా వ్యవహరిస్తుంది.
ముందు మన వేరియబుల్ గుర్తొచ్చా? మనం నిల్వ చేసిన 123 నిజానికి సంఖ్య డేటా రకం:
```javascript
let myVariable = 123;
```
**ప్రధాన లక్షణాలు:**
- జావాస్క్రిప్ట్ స్వయంచాలకంగా సంఖ్యల విలువలను గుర్తిస్తుంది
- మీరు ఈ వేరియబుల్స్‌తో గణిత ఆపరేషన్లను చేయవచ్చు
- ప్రత్యేక రకం ప్రకటన అవసరం లేదు
వేరియబుల్సందు అన్ని రకాల సంఖ్యలు నిల్వ చేయవచ్చు, దశాంసాలు లేదా ప్రతికూల సంఖ్యలు సహా. సంఖ్యలను గణిత ఆపరేటర్స్‌తో ఉపయోగించచ్చు, ఇది [తర్వాతి భాగంలో](../../../../2-js-basics/1-data-types) వివరించబడింది.
```mermaid
flowchart LR
A["🔢 సంఖ్యలు"] --> B["➕ జోడింపు"]
A --> C["➖ తీసివేత"]
A --> D["✖️ గుణకం"]
A --> E["➗ భాగాకరణ"]
A --> F["📊 మిగులు %"]
B --> B1["1 + 2 = 3"]
C --> C1["5 - 3 = 2"]
D --> D1["4 * 3 = 12"]
E --> E1["10 / 2 = 5"]
F --> F1["7 % 3 = 1"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
### గణిత ఆపరేటర్లు
గణిత ఆపరేటర్లు జావాస్క్రిప్ట్‌లో గణిత లెక్కింపులను చేయడానికి అనుమతిస్తాయి. ఈ ఆపరేటర్లు శతాబ్దాలుగా గణితజ్ఞులు ఉపయోగించిన సూత్రాలను అనుసరిస్తాయి – అల్-ఖ్వారిజ్మీ వంటి పండితుల రచనలలో కనిపించే అదే చిహ్నాలు.
ఆపరేటర్లు సంప్రదాయ గణిత విధానాలా పనిచేస్తాయి: వేసుకోవాలంటే జోడించడం, తీసివేయాలంటే తీసివేయడం, మొదలైనవి.
గణిత ఫంక్షన్లు నిర్వహించేటప్పుడు ఉపయోగించే కొన్ని ఆపరేటర్లను ఇక్కడ ను చూపడం జరిగింది:
| చిహ్నం | వివరణ | ఉదాహరణ |
| ------ | --------------------------------------------------------------------- | ---------------------------------- |
| `+` | **జోడింపు**: రెండు సంఖ్యల మొత్తం లెక్కించు | `1 + 2 //అంచనా సమాధానం 3` |
| `-` | **వియోగం**: రెండు సంఖ్యల వ్యత్యాసం లెక్కించు | `1 - 2 //అంచనా సమాధానం -1` |
| `*` | **గుణకం**: రెండు సంఖ్యల గుణిత ఫలితం లెక్కించు | `1 * 2 //అంచనా సమాధానం 2` |
| `/` | **భాగం**: రెండు సంఖ్యల భాగఫల లెక్కించు | `1 / 2 //అంచనా సమాధానం 0.5` |
| `%` | **శేషం**: రెండు సంఖ్యల భాగించేటప్పుడు ఉన్న మిగులు లెక్కించు | `1 % 2 //అంచనా సమాధానం 1` |
✅ ప్రయత్నించండి! మీ బ్రౌజర్ కన్సోల్‌లో గణిత లెక్కింపు ఆపరేషన్ ఒకటి ప్రయత్నించండి. ఫలితాలు మిమ్మల్ని ఆశ్చర్యచకితులు చేస్తాయా?
### 🧮 **గణిత నైపుణ్యాల పరిశీలన: విశ్వాసంతో లెక్కించండి**
**మీ గణిత అర్థం పరీక్షించండి:**
- `/` (భాగం) మరియు `%` (శేషం) మధ్య తేడా ఏమిటి?
- `10 % 3` విలువు ఏమిటో ఊహించాల్సి ఉంది? (సూచన: అది 3.33 కాదు...)
- ప్రోగ్రామింగ్‌లో శేష ఆపరేటర్ ఎందుకు ఉపయోగకరమై ఉంటుంది?
```mermaid
pie title "జావాస్క్రిప్ట్ నంబర్ ఆపరేషన్స్ వాడకం"
"జతచేసేరు (+)" : 35
"వియోగము (-)" : 20
"గుణించు (*)" : 20
"భాగిస్తారు (/)" : 15
"అవశేషం (%)" : 10
```
> **వాస్తవ ప్రపంచ అవగాహన**: శేష ఆపరేటర్ (%) సంఖ్యలు సమ/విసమ కాదా అని చూసేందుకు, నమూనాలు సృష్టించేందుకు లేదా అర్రేస్‌లో చక్రగతి కోసం గొప్పగా ఉపయోగపడుతుంది!
### స్ట్రింగ్స్
జావాస్క్రిప్ట్‌లో, పాఠ్య డేటాను స్ట్రింగ్స్ (strings) గా ప్రాతినిథ్యం చేస్తారు. "స్ట్రింగ్" పదం అక్షరాలను క్రమంగా జతకలిపిన విజ్ఞానం నుంచి వచ్చింది, మధ్యయుగ మఠాలలో శ్రద్ధగా అక్షరాల నుంచి పదాలు, వాక్యాలు తయారు చేసిన విధానాన్ని పోలి ఉంటుంది.
స్ట్రింగ్స్ వెబ్ డెవలప్‌మెంట్‌లో ప్రాథమికం. ఒక వెబ్‌సైట్‌పై చూపించే ప్రతి టెక్స్ట్ – వినియోగదారు పేర్లు, బటన్ లేబుల్స్, లోప సందేశాలు, కంటెంట్ – అన్ని స్ట్రింగ్ డేటాగా నిర్వహించబడతాయి. స్ట్రింగ్స్ అర్థం చేసుకోవడం పనితనపు యూజర్ ఇంటర్‌ఫేస్‌లను తయారుచేయడానికి అవసరం.
స్ట్రింగ్స్ ఒకల మేటి కోట్స్ లేదా ద్విటీయ కోట్స్ మధ్య ఉన్న అక్షరాల సమాహారం.
```javascript
'This is a string'
"This is also a string"
let myString = 'This is a string value stored in a variable';
```
**ఈ భావనలు అర్థం చేసుకోండి:**
- స్ట్రింగ్స్ నిర్వచించేందుకు ఒకల కోట్స్ `'` లేదా ద్విటీయ కోట్స్ `"` వాడతారు
- అక్షరాలు, సంఖ్యలు మరియు చిహ్నాలు ఉన్న పాఠ్య డేటాను నిల్వ చేస్తుంది
- వేరియబుల్స్ కోసం స్ట్రింగ్ విలువలను అసైన్ చేస్తుంది
- పాఠ్యాన్ని వేరియబుల్ номићతినుండి వేరుచేయడానికి కోట్స్ అవసరం
స్ట్రింగ్ రాయేటప్పుడు కోట్స్ వాడాలి, లేకపోతే జావాస్క్రిప్ట్ దానిని వేరియబుల్ పేరు అనుకుంటుంది.
```mermaid
flowchart TD
A["📝 స్ట్రింగ్స్"] --> B["సింగిల్ కోట్స్"]
A --> C["డబుల్ కోట్స్"]
A --> D["టెంప్లేట్ లిటరల్స్"]
B --> B1["'హలో వరల్డ్'"]
C --> C1["\"హలో వరల్డ్\""]
D --> D1["`హలో \${name}`"]
E["స్ట్రింగ్ ఆపరేషన్స్"] --> F["కంకటెనేషన్"]
E --> G["టెంప్లేట్ ఇన్సెర్షన్"]
E --> H["లెంగ్త్ & మెతడ్స్"]
F --> F1["'హలో' + ' ' + 'వరల్డ్'"]
G --> G1["`హలో \${firstName} \${lastName}`"]
H --> H1["myString.length"]
style A fill:#e3f2fd
style E fill:#fff3e0
style D fill:#e8f5e8
style G fill:#e8f5e8
```
### స్ట్రింగ్ ఫార్మాటింగ్
స్ట్రింగ్ నిర్వహణ ద్వారా మీరు పాఠ్యం భాగాలను కలపవచ్చు, వేరియబుల్స్‌ను చేర్చవచ్చు, మరియు ప్రోగ్రామ్ పరిస్థితికి అనుగుణంగా సాంద్రీకృత కంటెంట్ సృష్టించవచ్చు. ఈ సాంకేతికత టెక్స్ట్‌ని ప్రోగ్రామింగ్ రూపంలో నిర్మించడానికి సహాయపడుతుంది.
సాధారణంగా, మీరు బహుళ స్ట్రింగ్స్ ని కలపాల్సి వస్తుంది – దీన్ని కనక్టెనేషన్ అంటారు.
రెండు లేదా అంతకంటే ఎక్కువ స్ట్రింగులను **కణకటించడానికి** లేదా వాటిని కలపడానికి, `+` ఆపరేటర్ ఉపయోగించండి.
```javascript
let myString1 = "Hello";
let myString2 = "World";
myString1 + myString2 + "!"; //హలో వరల్డ్!
myString1 + " " + myString2 + "!"; //హలో వరల్డ్!
myString1 + ", " + myString2 + "!"; //హలో, వరల్డ్!
```
**దశలవారీగా, ఇది ఏమి జరుగుతున్నది అనేది ఇక్కడ ఉంది:**
- `+` ఆపరేటర్ ఉపయోగించి అనేక స్ట్రింగులను **మిళితం చేస్తుంది**
- మొదటి ఉదాహరణలో స్ట్రింగులను మధ్యలో ఖాళీలు లేకుండా **కలపడం**
- వాచకతకు స్ట్రింగుల మధ్య `" "` ఖాళీ అక్షరాలను **చేరుస్తుంది**
- సరైన ఆకృతీకరణ కోసం కామాలు వంటి విరామార్థ చిహ్నాలను **చేర్చడం**
✅ JavaScriptలో ఎందుకు `1 + 1 = 2` కానీ `'1' + '1' = 11` అవుతుంది? దీని గురించి ఆలోచించండి. `'1' + 1` గురించి ఏం జరుగుతుంది?
**టెంప్లేట్ లిటరల్స్** అనేవి స్ట్రింగులను ఆకృతీకరించడానికి మరో మార్గం, కానీ క్వోట్ల బదులు బ్యాక్‌టిక్ ఉపయోగిస్తారు. ఏదైనా సున్నితమైన వచనం కాకుండా ఉంచాలి `${ }` ప్లేస్హోల్‌డర్లు లో. ఇందులో స్ట్రింగ్ అయ్యే వేరియబుల్స్ కూడా ఉంటాయి.
```javascript
let myString1 = "Hello";
let myString2 = "World";
`${myString1} ${myString2}!` //హెలో వరల్డ్!
`${myString1}, ${myString2}!` //హెలో, వరల్డ్!
```
**ప్రతి భాగాన్ని అర్థం చేసుకుందాం:**
- టెంప్లేట్ లిటరల్స్ సృష్టించడానికి సాధారణ క్వోట్ల బదులు బ్యాక్‌టిక్కులు `` ` `` ఉపయోగిస్తుంది
- `${}` ప్లేస్హోల్డర్ సింటాక్స్ ఉపయోగించి వేరియబుల్స్‌ను నేరుగా **ఎంబెడ్ చేస్తుంది**
- ఖాళీలు మరియు ఆకృతీకరణను గానీ, అలాగే వ్రాయబడినట్లుగా **పూర్తిగా సంరక్షిస్తుంది**
- వేరియబుల్స్ తో సంక్లిష్ట స్ట్రింగులను సృష్టించడానికి **చక్కటి పద్ధతి అందిస్తుంది**
ఈ రెండు విధానాలలో ఏదైనా మీ ఆకృతీకరణ అవసరాలను సాధించవచ్చు, కానీ టెంప్లేట్ లిటరల్స్ అన్ని ఖాళీలు మరియు లైన్ బ్రేక్స్ ని గౌరవిస్తాయి.
✅ టెంప్లేట్ లిటరల్ మరియు సాధారణ స్ట్రింగ్ ఎప్పుడు ఉపయోగిస్తారు?
### 🔤 **స్ట్రింగ్ నైపుణ్యం పరీక్ష: టెక్స్ట్ మానిప్యులేషన్ విశ్వాసం**
**మీ స్ట్రింగ్ నైపుణ్యాలను మూల్యాంకనం చేయండి:**
- `'1' + '1'` ఎందుకు `2` కాదు `'11'` అవుతుంది అనేది మీరు వివరిస్తారా?
- మీరు ఏ స్ట్రింగ్ పద్ధతిని మరింత వాచకతగా భావిస్తారు: కణకటన లేదా టెంప్లేట్ లిటరల్స్?
- స్ట్రింగ్ చుట్టూ క్వోట్లను మర్చిపోయితే ఏమి జరుగుతుంది?
```mermaid
stateDiagram-v2
[*] --> PlainText: "హలో"
[*] --> Variable: name = "ఆలిస్"
PlainText --> Concatenated: + " " + name
Variable --> Concatenated
PlainText --> Template: `హలో ${name}`
Variable --> Template
Concatenated --> Result: "హలో ఆలిస్"
Template --> Result
note right of Concatenated
సాంప్రదాయ పద్ధతి
మరింత విస్తృత వివరణ
end note
note right of Template
ఆధునిక ES6 వ్యాకరణం
శుభ్రం & మరింత చదవదగ్గది
end note
```
> **ప్రో టిప్**: సంక్లిష్ట స్ట్రింగ్ నిర్మాణానికి టెంప్లేట్ లిటరల్స్ సాధారణంగా ప్రాధాన్యం పొందుతాయి ఎందుకంటే అవి మరింత వాచకత కల్గిస్తూ బహుళ-లైన్ స్ట్రింగ్‌లను అద్భుతంగా నిర్వహిస్తాయి!
### బూలియన్స్
బూలియన్స్ అత్యంత సాదారణ డేటా రూపం: అవి দুটি విలువలలో ఒకదాన్ని మాత్రమే కలిగి ఉంటాయి – `true` లేదా `false`. ఈ బైనరీ లాజిక్ వ్యవస్థ 19వ శతాబ్దంలోని గణిత శాస్త్రజ్ఞుడు జర్జ్ బూల్ అభివృద్ధి చేసిన బూలియన్ ఆల్జీబ్రా నుండి వెలువడింది.
సాదాసీదాగా ఉన్నా, బూలియన్స్ ప్రోగ్రాం లాజిక్ కోసం చాలా అవసరమైనవి. అవి మీ కోడ్‌ను షరతుల ఆధారంగా నిర్ణయాలు తీసుకునే విధానాన్ని అనుమతిస్తాయి – వాడుకదారు లాగిన్ అయిందా, బటన్ క్లిక్ అయిందా, లేదా నిర్దిష్ట ప్రమాణాలు తీర్చబడ్డాయా అన్నది.
బూలియన్స్ రెండు విలువలే కలిగి ఉండవచ్చు: `true` లేదా `false`. బూలియన్స్ సహాయంతో నిర్దిష్ట షరతులు తీరినప్పుడు ఏ కోడ్ లైన్లు అమలు అవుతాయో మీరు నిర్ణయించవచ్చు. చాలా సందర్భాల్లో, [ఆపరేటర్లు](../../../../2-js-basics/1-data-types) బూలియన్ విలువను సెట్ చేయడంలో సహాయపడతాయి, మరియు మీరు తరచూ వేరియబుల్స్‌ ప్రారంభం, లేదా వాటి విలువలు ఆపరేటర్ సహాయంతో నవీకరింపబడుతున్నట్టు గమనిస్తారు.
```javascript
let myTrueBool = true;
let myFalseBool = false;
```
**పైన చేసినది:**
- బూలియన్ విలువ `true` ని నిలుపుకొనే వేరియబుల్‌ను **సృష్టించాము**
- బూలియన్ విలువ `false` ని నిలుపుకోవడం **ప్రదర్శించాము**
- ఖచ్చితంగా `true` మరియు `false` అనే కీవర్డ్స్ ను (క్వోట్ల అవసరం లేదు) **ఉపయోగించాము**
- ఈ వేరియబుల్స్‌ను షరతు భావన లలో ఉపయోగించేందుకు **సిద్ధం చేసాము**
✅ ఒక వేరియబుల్‌ను 'ట్రూతీ' అని పరిగణించవచ్చు అంటే అది బూలియన్ `true` గా తేలికవ్వాలి. ఆసక్తికరంగా, JavaScriptలో, [అన్ని విలువలు ట్రూతీగా పరిగణించబడతాయి, తప్ప టాల్సీగా నిర్వచించబడినవి మాత్రమే భిన్నంగా ఉంటాయి](https://developer.mozilla.org/docs/Glossary/Truthy).
```mermaid
flowchart LR
A["🔘 బూలియన్ విలువలు"] --> B["true"]
A --> C["false"]
D["నిజమైన విలువలు"] --> D1["'hello'"]
D --> D2["42"]
D --> D3["[]"]
D --> D4["{}"]
E["కల్పిత విలువలు"] --> E1["false"]
E --> E2["0"]
E --> E3["''"]
E --> E4["null"]
E --> E5["undefined"]
E --> E6["NaN"]
style B fill:#e8f5e8
style C fill:#ffebee
style D fill:#e3f2fd
style E fill:#fff3e0
```
### 🎯 **బూలియన్ లాజిక్ పరీక్ష: నిర్ణయం తీసుకునే నైపుణ్యాలు**
**మీ బూలియన్ అవగాహనను పరీక్షించండి:**
- మీరు ఎందుకు అనుకుంటున్నారు JavaScriptలో `true` మరియు `false` కంటే మరింత "ట్రూతీ" మరియు "టాల్సీ" విలువలు కూడా ఉన్నాయని?
- `0`, `"0"`, `[]`, `"false"`లో ఏది టాల్సీ అని మీరు భావిస్తారు?
- బూలియన్స్ ప్రోగ్రాం ఫ్లో నియంత్రణలో ఎలా ఉపయోగపడతాయి?
```mermaid
pie title "సాధారణ బూలియన్ ఉపయోగాలు"
"నిబంధనాత్మక తర్కం" : 40
"వాడుకరి స్థితి" : 25
"ఫీచర్ టోగ్ల్స్" : 20
"తనిఖీ" : 15
```
> **గమనించండి**: JavaScriptలో, కేవలం ఈ 6 విలువలు టాల్సీ: `false`, `0`, `""`, `null`, `undefined`, మరియు `NaN`. అన్ని ఇతర విలువలు ట్రూతీ!
---
## 📊 **మీ డేటా రకాల సాధనాల సంక్షిప్తం**
```mermaid
graph TD
A["🎯 జావాస్క్రిప్ట్ డేటా రకాల(Types)"] --> B["📦 వేరియబుల్స్"]
A --> C["🔢 సంఖ్యలు"]
A --> D["📝 స్ట్రింగ్స్"]
A --> E["🔘 బూలియన్లు"]
B --> B1["let మార్చదగిన"]
B --> B2["const మార్చలేని"]
C --> C1["42, 3.14, -5"]
C --> C2["+ - * / %"]
D --> D1["'కోట్స్' లేదా \\\"కోట్స్\\\""]
D --> D2["`టెంప్లేట్ లిటరల్స్`"]
E --> E1["true లేదా false"]
E --> E2["ట్రూతీ vs ఫాల్సీ"]
F["⚡ ప్రధాన ఆలోచనలు"] --> F1["ఆపరేషన్‌లకు టైపు ముఖ్యం"]
F --> F2["జావాస్క్రిప్ట్ డైనమిక్గా టైప్డ్"]
F --> F3["వేరియబుల్స్ రకాలు మార్చవచ్చు"]
F --> F4["పేరుపొడగింపు కేస్-సెన్సిటివ్"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
## GitHub Copilot ఏజెంట్ సవాలు 🚀
ఏజెంట్ మోడ్ ఉపయోగించి క్రింది సవాలను పూర్తి చేయండి:
**వివరణ:** మీరు ఈ పాఠంలో నేర్పుకున్న అన్ని JavaScript డేటా రకాల ఉపయోగాలను ప్రదర్శించే వ్యక్తిగత సమాచార నిర్వాహకిని నిర్మించండి. ఇది వాస్తవ ప్రపంచ డేటా సన్నివేశాలను నిర్వహిస్తుంది.
**ప్రాంప్ట్:** వ్యక్తి పేరు (స్ట్రింగ్), వయస్సు (నంబర్), విద్యార్థి స్థితి (బూలియన్), ఇష్ట రంగులు జాబితాగా (అర్రే), మరియు అడ్రస్ (స్ట్రీట్, సిటీ, జిప్ కోడ్) కలిగిన యూజర్ ప్రొఫైల్ ఆబ్జెక్టును సృష్టించే JavaScript ప్రోగ్రాం రూపొందించండి. ప్రొఫైల్ సమాచారాన్ని ప్రదర్శించడానికి మరియు వ్యక్తిగత ఫీల్డులను నవీకరించడానికి ఫంక్షన్లు చేర్చండి. స్ట్రింగ్ కణకటన, టెంప్లేట్ లిటరల్స్, వయస్సుతో గణిత ఆపరేషన్లు మరియు విద్యార్థి స్థితి కోసం బూలియన్ లాజిక్ ఉపయోగాన్ని చూపండి.
[ఏజెంట్ మోడ్ గురించి మరింత](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) తెలుసుకోండి.
## 🚀 సవాలు
JavaScriptలో కొన్ని ప్రవర్తనలు డెవలపర్లు ఆశ్చర్యానికి గురిచేయవచ్చు. ఒక ప్రాచీన ఉదాహరణ: బ్రౌజర్ కన్సోల్ లో టైప్ చేయండి: `let age = 1; let Age = 2; age == Age` మరియు ఫలితాన్ని గమనించండి. ఇది `false` ఇస్తుంది – కారణం మీరు గమనించగలరా?
ఇది JavaScriptలో అర్థం చేసుకోవలసిన అనేక ప్రవర్తనలలో ఒకటి మాత్రమే. ఈ విచిత్రతలను తెలుసుకోవడం మంచి విశ్వసనీయ కోడ్ రాయడానికి మరియు సమస్యలు డీబగ్ చేయడానికి సహాయపడుతుంది.
## లెక్చర్ తర్వాత క్విజ్
[లెక్చర్ తర్వాత క్విజ్](https://ff-quizzes.netlify.app)
## సమీక్ష & స్వీయ అధ్యయనం
[ఈ JavaScript వ్యాయామాల జాబితా](https://css-tricks.com/snippets/javascript/)ని చూడండి మరియు ఒకటి ప్రయత్నించండి. మీరు ఏమి నేర్చుకున్నారు?
## అసైన్మెంట్
[డేటా రకాలు అభ్యాసం](assignment.md)
## 🚀 మీ JavaScript డేటా రకాల ప్రావీణ్యం టైమ్‌లైన్
### ⚡ **తర్వాతి 5 నిమిషాల్లో మీరు చేయగలిగేది**
- [ ] బ్రౌజర్ కన్సోల్ తెరవండి మరియు వేర్వేరు డేటా రకాలతో 3 వేరియబుల్స్ సృష్టించండి
- [ ] సవాలు ప్రయత్నించండి: `let age = 1; let Age = 2; age == Age` మరియు ఎందుకు false అవుతుంది తెలుసుకోండి
- [ ] మీ పేరు మరియు ఇష్ట సంఖ్యతో స్ట్రింగ్ కణకటనం ప్రాక్టీస్ చేయండి
- [ ] ఒక స్ట్రింగ్ కు సంఖ్య జోడించినప్పుడు ఏమి జరుగుతుందో పరీక్షించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పాఠం తర్వాత క్విజ్ పూర్తి చేసి ఎటువంటి సందేహాలు ఉన్నాయో సమీక్షించండి
- [ ] రెండు సంఖ్యలను యాడ్, సబ్‌ట్రాక్ట్, మల్టిప్లై, డివైడ్ చేసే మిని కాల్క్యులేటర్ సృష్టించండి
- [ ] టెంప్లేట్ లిటరల్స్ ఉపయోగించి సరళమైన పేరు ఆకృతీకర్తను తయారు చేయండి
- [ ] `==` మరియు `===` తులనాత్మక ఆపరేటర్ల మధ్య వ్యత్యాసాలను అన్వేషించండి
- [ ] వేర్వేరు డేటా రకాల మధ్య మార్పిడి ప్రాక్టీస్ చేయండి
### 📅 **మీ వారాంతం JavaScript పునాదులు**
- [ ] అసైన్‌మెంట్‌ను నమ్మకంతో మరియు సృజనాత్మకతతో పూర్తి చేయండి
- [ ] నేర్చుకున్న అన్ని డేటా రకాలతో వ్యక్తిగత ప్రొఫైల్ ఆబ్జెక్టును సృష్టించండి
- [ ] [CSS-Tricks నుండి JavaScript వ్యాయామాలతో](https://css-tricks.com/snippets/javascript/) ప్రాక్టీస్ చేయండి
- [ ] బూలియన్ లాజిక్ ఉపయోగించి సరళమైన ఫారమ్ వాలిడేటర్ సృష్టించండి
- [ ] అర్రే మరియు ఆబ్జెక్ట్ డేటా రకాలపై ప్రాక్టీస్ చేయండి (భవిష్యత్తు పాఠాల అవలోకనం)
- [ ] JavaScript కమ్యూనిటీతో చేరి డేటా రకాల గురించి ప్రశ్నలు అడగండి
### 🌟 **మీ నెల రోజుల మార్పు**
- [ ] పెద్ద ప్రోగ్రామింగ్ ప్రాజెక్టుల్లో డేటా రకాల జ్ఞానాన్ని ప్రముఖంగా ఉపయోగించండి
- [ ] ప్రతి డేటా రకాన్ని నిజ జీవిత అనువర్తనాల్లో ఎప్పుడు మరియు ఎందుకు ఉపయోగించాలో అర్థం చేసుకోండి
- [ ] ఇతర ప్రారంభకులకు JavaScript ప్రాథమికాలను అర్థం చేసుకోవడంలో సహాయం చేయండి
- [ ] భిన్న రకాల యూజర్ డేటాను నిర్వహించే చిన్న అప్లికేషన్ నిర్మించండి
- [ ] టైపు కోర్షన్ మరియు కఠిన సరిపోలిక (strict equality) వంటి అధునాతన డేటా రక భావనలను అన్వేషించండి
- [ ] డాక్యుమెంటేషన్ మెరుగుదలతో ఓపెన్ సోర్స్ JavaScript ప్రాజెక్టులకు సహాయం చేయండి
### 🧠 **చివరి డేటా రక ప్రావీణ్యత తనిఖీ**
**మీ JavaScript ప్రాధమికాన్ని జరుపుకోండి:**
- ఏ డేటా రకం దాని ప్రవర్తన పరంగా మీకు అత్యంత ఆశ్చర్యంగా అనిపించింది?
- వేరియబుల్స్ మరియు కాన్స్టెంట్లను స్నేహితుడికి వివరించడంలో మీరు ఎంత సంతృప్తిగా ఉన్నారు?
- JavaScript టైపు వ్యవస్థ గురించి మీరిచ్చిన అత్యంత ఆసక్తికర విషయం ఏమిటి?
- ఈ ప్రాథమికాలతో మీరు ఏ నిజ జీవిత అనువర్తనాన్ని నిర్మించవచ్చు అని ఊహించుకోవచ్చు?
```mermaid
journey
title మీ జావాస్క్రిప్ట్ విశ్వాస ప్రయాణం
section ఈ రోజు
Confused: 3: You
Curious: 4: You
Excited: 5: You
section ఈ వారము
Practicing: 4: You
Understanding: 5: You
Building: 5: You
section వచ్చే నెల
Problem Solving: 5: You
Teaching Others: 5: You
Real Projects: 5: You
```
> 💡 **మీరు ప్రాథమికాలను నిర్మించారు!** డేటా రకాలు అక్షరమాల నేర్చుకోవడం లాంటిది, కథలు రాయడానికి ముందు. మీరు రాసే ప్రతి JavaScript ప్రోగ్రామ్ ఈ ప్రాథమిక భావనలను ఉపయోగిస్తాయి. మీరు ఇప్పుడు ఇంటరాక్టివ్ వెబ్‌సైట్లు, డైనమిక్ అప్లికేషన్లు మరియు వాస్తవ ప్రపంచ సమస్యలను కోడ్ తో పరిష్కరించడానికి నిర్మాణ బ్లోక్స్ కలిగి ఉన్నారు. JavaScript యొక్క అద్భుత ప్రపంచానికి స్వాగతం! 🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**వెలిపించే నోటీసు**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరిగా ఉండే ప్రయత్నం చేస్తాం, అయినప్పటికీ ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా పొరపాట్లు ఉండవచ్చు. మూల డాక్యుమెంట్ native భాషలోనే అధికారిక మూలంగా పరిగణించాలి. ప్రధాన సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం సిఫారసు చేయబడుతుంది. ఈ అనువాదం వాడినందರಿಂದ కలిగే ఏ తప్పుదోవలుబాళ్ళకో లేదా తప్పుడు అర్థాలకో మేము బాధ్యత వహించమేము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

103
translations/te/2-js-basics/1-data-types/assignment.md
Unescape View File

@ -0,0 +1,103 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "6fd645e97c48cd5eb5a3d290815ec8b5",
"translation_date": "2026-01-08T12:43:09+00:00",
"source_file": "2-js-basics/1-data-types/assignment.md",
"language_code": "te"
}
-->
# డేటా టైప్స్ ప్రాక్టీస్: ఈ-కామర్స్ షాపింగ్ కార్ట్
## సూచనలు
మీరు ఒక ఆధునిక ఈ-కామర్స్ షాపింగ్ కార్ట్ సిస్టమ్‌ను నిర్మిస్తున్నారని ఊహించుకోండి. ఈ అసైన్‌మెంట్ వివిధ జావాస్క్రిప్ట్ డేటా టైప్స్ ఎలా కలిసి వాస్తవ ప్రపంచ అనువర్తనాలను సృష్టిస్తాయో అర్థం చేసుకోవడంలో మీకు సహాయపడుతుంది.
### మీ పని
ఒక షాపింగ్ కార్ట్ అప్లికేషన్‌లో మీరు జావాస్క్రిప్ట్ డేటా టైప్స్‌ను ఎలా ఉపయోగిస్తారని మీరు ఒక సమగ్ర విశ్లేషణ తయారు చేయాలి. ఏడు ప్రిమిటివ్ డేటా టైప్స్ మరియు ఆబ్జెక్టులలో ప్రతి ఒక్క దానికి:
1. **డేటా టైపు మరియు దాని ప్రయోజనాన్ని గుర్తించండి**
2. **ఈ డేటా టైపు ప్రత్యేక షాపింగ్ కార్ట్ ఫీచర్లు కోసం ఎందుకు ఉత్తమమైనదో వివరించండి**
3. **అధ్యయన డేటా టైపు ప్రదర్శించే వాస్తవిక కోడ్ ఉదాహరణలను ఇవ్వండి**
4. **ఈ డేటా టైపు షాపింగ్ కార్ట్ యొక్క ఇతర భాగాలతో ఎలా పనిచేస్తుందో తెలపండి**
### కవర్లు కావలసిన డేటా టైప్స్
**ప్రిమిటివ్ డేటా టైప్స్:**
- **String**: ఉత్పత్తి పేర్లు, వివరణలు, వినియోగదారుల సమాచారం
- **Number**: ధరలు, పరిమాణాలు, పన్ను లెక్కింపులు
- **Boolean**: ఐటెమ్ అందుబాటులో ఉండటం, వినియోగదారుల అభిరుచులు, కార్ట్ స్థితి
- **Null**: ఉద్దేశ్యపూర్వకంగా ఖాళీ విలువలు (విలువ మిస్ అయిన డిస్కౌంట్ కోడ్స్ లాంటి)
- **Undefined**: ప్రారంభం కాని విలువలు లేదా డేటా లేమి
- **Symbol**: ప్రత్యేక గుర్తింపులు (అడ్వాన్స్‌డ్ వాడకం)
- **BigInt**: భారీ ఆర్థిక లెక్కింపులు (అడ్వాన్స్‌డ్ వాడకం)
**రెఫరెన్స్ టైప్స్:**
- **Object**: ఉత్పత్తి వివరాలు, వినియోగదారు ప్రొఫైల్లు, కార్ట్ కంటెంట్
- **Array**: ఉత్పత్తుల జాబితా, ఆర్డర్ చరిత్ర, విభాగాలు
### ప్రతి డేటా టైపు కోసం ఉదాహరణ ఫార్మాట్
ప్రతి డేటా టైపు కోసం, మీ ప్రతిస్పందనను ఇలాగే నిర్మించండి:
```markdown
## [Data Type Name]
**Purpose in Shopping Cart:** [Explain what this data type does]
**Why This Type:** [Explain why this is the best choice]
**Code Example:**
```javascript
// Your realistic code example here
```
**వాస్తవ ప్రపంచ వినియోగం:** [ఇది ప్రాక్టీస్‌లో ఎలా పని చేస్తుందో వివరించండి]
**ఇంటరాక్షన్స్:** [ఈ డేటా టైపు ఇతరులతో ఎలా పనిచేస్తుందో వివరించండి]
```
### Bonus Challenges
1. **Type Coercion**: Show an example where JavaScript automatically converts between data types in your shopping cart (e.g., string "5" + number 10)
2. **Data Validation**: Demonstrate how you would check if user input is the correct data type before processing
3. **Performance Considerations**: Explain when you might choose one data type over another for performance reasons
### Submission Guidelines
- Create a markdown document with clear headings for each data type
- Include working JavaScript code examples
- Use realistic e-commerce scenarios in your examples
- Explain your reasoning clearly for beginners to understand
- Test your code examples to ensure they work correctly
## Rubric
| Criteria | Exemplary (90-100%) | Proficient (80-89%) | Developing (70-79%) | Needs Improvement (Below 70%) |
|----------|---------------------|---------------------|---------------------|------------------------------|
| **Data Type Coverage** | All 7 primitive types and objects/arrays covered with detailed explanations | 6-7 data types covered with good explanations | 4-5 data types covered with basic explanations | Fewer than 4 data types or minimal explanations |
| **Code Examples** | All examples are realistic, working, and well-commented | Most examples work and are relevant to e-commerce | Some examples work but may be generic | Code examples are incomplete or non-functional |
| **Real-world Application** | Clearly connects each data type to practical shopping cart features | Good connection to e-commerce scenarios | Some connection to shopping cart context | Limited real-world application demonstrated |
| **Technical Accuracy** | All technical information is correct and demonstrates deep understanding | Most technical information is accurate | Generally accurate with minor errors | Contains significant technical errors |
| **Communication** | Explanations are clear, beginner-friendly, and well-organized | Good explanations that are mostly clear | Explanations are understandable but may lack clarity | Explanations are unclear or poorly organized |
| **Bonus Elements** | Includes multiple bonus challenges with excellent execution | Includes one or more bonus challenges well done | Attempts bonus challenges with mixed success | No bonus challenges attempted |
### Learning Objectives
By completing this assignment, you will:
- ✅ **Understand** the seven JavaScript primitive data types and their uses
- ✅ **Apply** data types to real-world programming scenarios
- ✅ **Analyze** when to choose specific data types for different purposes
- ✅ **Create** working code examples that demonstrate data type usage
- ✅ **Explain** technical concepts in beginner-friendly language
- ✅ **Connect** fundamental programming concepts to practical applications
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్వीकృతి**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించారు. మేము ఖచ్చితత్వానికి సూచిస్తున్నప్పటికీ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా తప్పులూ ఉండవచ్చు. మూల పత్రం దాని స్థానిక భాషలోనే అధికారిక మార్గదర్శకంగా పరిగణించబడాలి. ముఖ్యమైన సమాచారం కోసం తగిన నిపుణుల చేతులతో మానవ అనువాదాన్ని సూచిస్తాము. ఈ అనువాదం ఉపయోగంలో ఏర్పడిన ఏదైనా అభిప్రాయ భేదాలు లేదా తప్పుబాటులకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

583
translations/te/2-js-basics/2-functions-methods/README.md
Unescape View File

@ -0,0 +1,583 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
"translation_date": "2026-01-08T12:21:56+00:00",
"source_file": "2-js-basics/2-functions-methods/README.md",
"language_code": "te"
}
-->
# జావాస్క్రిప్ట్ బేసిక్స్: మెల్యాళ్లు మరియు ఫంక్షన్లు
![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.te.png)
> స్కెచ్ నోట్ చేసిన [టోమోమి ఇమురా](https://twitter.com/girlie_mac)
```mermaid
journey
title మీ జావాస్క్రిప్ట్ ఫంక్షన్ల సాహసం
section మౌలికం
Function Syntax: 5: You
Calling Functions: 4: You
Parameters & Arguments: 5: You
section ఆధునిక అంశాలు
Return Values: 4: You
Default Parameters: 5: You
Function Composition: 4: You
section ఆధునిక జావాస్క్రిప్ట్
Arrow Functions: 5: You
Anonymous Functions: 4: You
Higher-Order Functions: 5: You
```
## లెక్చర్ ముందు క్విజ్
[లెక్చర్ ముందు క్విజ్](https://ff-quizzes.netlify.app)
అనే కోడ్ ను పునరావృతం చేయడం ప్రోగ్రామింగ్ లో అత్యంత సాధారణమైన నిరాశలలో ఒకటి. ఫంక్షన్లు ఈ సమస్యను పరిష్కరిస్తాయి, మీరు కోడ్ ను పునర్వినియోగయోగ్యమైన బ్లాక్‌లలో ప్యాకేజీ చేయగలుగుతారు. ఫంక్షన్లను హెన్రీ ఫోర్డ్ అసెంబ్లీ లైన్ విప్లవాత్మకంగా చేసింది అటువంటి ప్రమాణీకృత భాగాలుగా పరిగణించండి – ఒక నమ్మదగిన భాగాన్ని సృష్టించిన తర్వాత, మీరు దాన్ని ఎక్కడ కావలే అక్కడ ఉపయోగించవచ్చు, మొదలుఅరు నుండి పునర్రచయించడం అవసరం లేదు.
ఫంక్షన్లు మీకు కోడ్ భాగాలను బండిల్ చేయడానికి అనుమతిస్తాయి, కాబట్టి మీరు వాటిని మీ ప్రోగ్రామ్ లో ఎక్కడైనా పునర్వినియోగం చేసుకోవచ్చు. ప్రతి చోటా అదే లాజిక్ ను కాపీ చేసి పేస్ట్ చేయాలనుకోవడం వులా కాకుండా, మీరు ఒకసారి ఫంక్షన్ ను సృష్టించి అవసరమైనప్పుడు దాన్ని కాల్ చేయవచ్చు. ఈ విధానం మీ కోడ్ ను సుసంఘటితంగా ఉంచుతుంది మరియు తాజాకరణలను ఎంతో సులభంగా చేస్తుంది.
ఈ పాఠంలో, మీరు మీ స్వంత ఫంక్షన్లను ఎలా సృష్టించాలో, వారికి సమాచారాన్ని ఎలా పంపించాలో, మరియు ఉపయోగకరమైన ఫలితాలను ఎలా తీసుకోవాలో నేర్చుకుంటారు. మీరు ఫంక్షన్ల మరియు మెల్యాళ్ల మధ్య తేడాను గుర్తిస్తారు, ఆధునిక సింటాక్స్ పద్ధతులను నేరుగుతారు మరియు ఫంక్షన్లు ఇతర ఫంక్షన్లతో ఎలా పనిచెయ్యగలవో చూస్తారు. ఈ కాన్సెప్ట్‌లను దశల వారీగా మీరు ఏర్పాటు చేస్తారు.
[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
> 🎥 పై చిత్రాన్ని క్లిక్ చేసి మెల్యాళ్లు మరియు ఫంక్షన్ల గురించి వీడియో చూడండి.
> మీరు ఈ పాఠాన్ని [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)లో కూడా తీసుకోవచ్చు!
```mermaid
mindmap
root((JavaScript Functions))
Basic Concepts
Declaration
Traditional syntax
Arrow function syntax
Calling
Using parentheses
Parentheses required
Parameters
Input Values
Multiple parameters
Default values
Arguments
Values passed in
Can be any type
Return Values
Output Data
return statement
Exit function
Use Results
Store in variables
Chain functions
Advanced Patterns
Higher-Order
Functions as parameters
Callbacks
Anonymous
No name needed
Inline definition
```
## ఫంక్షన్లు
ఫంక్షన్ అనేది ఒక స్వయంక్రియాత్మక కోడ్ బ్లాక్, ఇది నిర్దిష్ట పనిని నిర్వహిస్తుంది. ఇది మీరు కావలసినపుడు అమలు చేసుకునే లాజిక్‌ను కలిపి ఉంచుతుంది.
మీ ప్రోగ్రామ్‌లో ఒకటే కోడ్‌ను బహుళసార్లు రాయడం అంతే కాకుండా, మీరు దానిని ఒక ఫంక్షన్‌లో ప్యాకేజీ చేసి అవసరమైనప్పుడు ఆ ఫంక్షన్‌ను కాల్ చేయవచ్చు. ఈ విధానం మీ కోడ్‌ను శుభ్రంగా ఉంచుతుంది మరియు నవీకరణలను చాలా సులభతరం చేస్తుంది. మీ కోడ్‌బేస్‌లో 20 వేర్వేరు ప్రదేశాల్లో వ్యాప్తిస్థితిలో ఉన్న లాజిక్‌ను మార్చాల్సి వచ్చినపుడు సంరక్షణ సవాలును బట్టి చూడండి.
మీ ఫంక్షన్ల పేర్లను వివరణాత్మకంగా పెట్టడం అత్యవసరం. బాగా నామకరణం చేపట్టిన ఫంక్షన్ దాని ఉద్దేశాన్ని స్పష్టంగా తెలియజేస్తుంది – మీరు `cancelTimer()` ను చూసే వాతావరణంలో అది ఏమి చేస్తుందో వెంటనే అర్థమవుతుంది, అలాగే స్పష్టంగా లేబుల్ చేసిన బటన్ మీరు క్లిక్ చేసినా ఏమి జరుగుతుందో మీకు చెప్పుతుంది.
## ఫంక్షన్ సృష్టించడం మరియు కాల్ చేయడం
మనం ఫంక్షన్‌ని ఎలా సృష్టించమో పరిశీలించుకుందాం. సింటాక్స్ నిరంతర నమూనాను అనుసరిస్తుంది:
```javascript
function nameOfFunction() { // ఫంక్షన్ నిర్వచనం
// ఫంక్షన్ నిర్వచనం/శరీరం
}
```
దాన్ని విడగొట్టి చూద్దాం:
- `function` కీవర్డ్ జావాస్క్రిప్ట్‌కు "నేను ఫంక్షన్ సృష్టిస్తున్నాను!" అని చెప్తుంది
- `nameOfFunction` వద్ద మీరు మీ ఫంక్షన్‌కు వివరణాత్మక పేరు ఇస్తారు
- కోణాకాసులు `()` లో మీరు పారామితులను చేర్చవచ్చు (దాన్ని త్వరలో చూడబోతాము)
- కలుపు బ్రేసులు `{}` లో మీరు ఫంక్షన్ ని కాల్ చేసినపుడు నడిచే అసలు కోడ్ ఉంటుంది
మనం సింపుల్ గ్రీటింగ్ ఫంక్షన్‌ని తయారు చేసి దీన్ని పరిశీలిద్దాం:
```javascript
function displayGreeting() {
console.log('Hello, world!');
}
```
ఈ ఫంక్షన్ కంసోల్ లో "Hello, world!" అనే సందేశాన్ని ప్రింట్ చేస్తుంది. మీరు దీన్ని నిర్వచించిన తర్వాత, మీరు దీన్ని ఎటువంటి విధంగా అనేకసార్లు ఉపయోగించవచ్చు.
మీరు మీ ఫంక్షన్‌ను అమలు చేయాలంటే (లేదా "కాల్స్" చేయాలంటే), దాని పేరును తర్వాత కోణాకాసులు రాయండి. జావాస్క్రిప్ట్ మీ ఫంక్షన్‌ను మీరు కాల్ చేసే ముందు లేదా తరువాత నిర్వచించడానికి అనుమతిస్తుంది – జావాస్క్రిప్ట్ యంత్రం అమలు ఆర్డర్‌ను నిర్వహిస్తుంది.
```javascript
// మన ఫังก్షన్‌ను కాల్ చేస్తున్నాం
displayGreeting();
```
మీరు ఈ వరుసను నడిపితే, మీరు `displayGreeting` ఫంక్షన్ లోని అన్ని కోడ్‌ను అమలు చేస్తుంది, మీ బ్రౌజర్ కన్సోల్ లో "Hello, world!" ప్రదర్శిస్తుంది. మీరు ఈ ఫంక్షన్ ను పునర్వినియోగం చేయవచ్చు.
### 🧠 **ఫంక్షన్ ప్రాథమిక పరీక్ష: మీ మొదటి ఫంక్షన్ల నిర్మాణం**
**ప్రాథమిక ఫంక్షన్ల గురించి మీ భావనను తెలుసుకుందాం:**
- ఫంక్షన్ నిర్వచనాలలో `{}` కలుపు బ్రేసులు ఎందుకు వాడుతాము?
- మీరు `displayGreeting` ను కోణాకాసులు లేకుండా రాసినప్పుడెమిటి జరుగుతుంది?
- మీరు అదే ఫంక్షన్‌ను పునరావృతంగా ఎందుకు కాల్ చేయాలనుకుంటారు?
```mermaid
flowchart TD
A["✏️ ఫంక్షన్ నిర్వచించండి"] --> B["📦 కోడ్ ప్యాకేజ్ చేయండి"]
B --> C["🏷️ దీనికి పేరు ఇవ్వండి"]
C --> D["📞 అవసరమైతే కాల్ చేయండి"]
D --> E["🔄 ఏదైనా చోట మళ్ళీ ఉపయోగించండి"]
F["💡 లాభాలు"] --> F1["కోడ్ పునరావృతం లేదు"]
F --> F2["చేపట్టడం సులభం"]
F --> F3["స్పష్టమైన నిర్వహణ"]
F --> F4["సులభమైన పరీక్ష"]
style A fill:#e3f2fd
style E fill:#e8f5e8
style F fill:#fff3e0
```
> **గమనిక:** మీరు ఈ పాఠాలలో **మెథడ్స్** ను ఉపయోగిస్తున్నారు. `console.log()` అనేది ఒక మెథడ్ – అంటే `console` ఆబ్జెక్ట్ కు సంబంధించిన ఒక ఫంక్షన్. ప్రధాన తేడా ఏమిటంటే, మెథడ్లు ఆబ్జెక్టులలో జోడింపబడతాయి, కానీ ఫంక్షన్లు స్వతంత్రంగా ఉంటాయి. చాలా డెవలపర్లు సాధారణ సంభాషణలో ఈ పదాలను పరస్పరం మార్పిడిగా ఉపయోగిస్తారు.
### ఫంక్షన్ ఉత్తమ ఉపయోగాలు
మంచి ఫంక్షన్లు వ్రాయడానికి కొన్ని చిట్కాలు:
- మీ ఫంక్షన్లకు స్పష్టమైన, వివరణాత్మక పేర్లు పెట్టండి – భవిష్యత్తులో మీరు ధన్యవాదములు తెలుపుతారు!
- బహుళపద పేర్ల కోసం **camelCase** ఉపయోగించండి (ఉదా: `calculateTotal` బదులు `calculate_total`)
- ప్రతి ఫంక్షన్ ఒకదే పని అద్భుతంగా చేయడం పైన దృష్టి పెట్టండి
## ఫంక్షన్ కి సమాచారాన్ని ఇవ్వడం
మన `displayGreeting` ఫంక్షన్ పరిమితమైంది – ఇది అన్నింటికీ `"Hello, world!"` మాత్రమే ప్రదర్శించగలదు. పారామితులు ఫంక్షన్లను మరింత సువిధాత్మకంగా మరియు ఉపయోగకరంగా మార్చేందుకు దోహదపడతాయి.
**పారామితులు** అనేవి ప్లేస్‌హోల్డర్ల్లా ఉంటాయి, మీరు ప్రతి సారి ఫంక్షన్ ఉపయోగించినప్పుడు వేరే విలువలను చేర్చవచ్చు. ఇలా, అదే ఫంక్షన్ ప్రతి కాల్ లో వేరే సమాచారంతో పనిచేస్తుంది.
మీరు ఫంక్షన్ నిర్వచించినప్పుడు పారామితులను కోణాకాసులలో పెట్టాలి, ఏకకాలంలో అనేక పారామితులను విరామచిహ్నంతో విడగొడతారు:
```javascript
function name(param, param2, param3) {
}
```
ప్రతి పారామిటర్ ఒక ప్లేస్‌హోల్డర్ లాంటిదే – మీరు ఎవరికైనా మీ ఫంక్షన్ ను కాల్ చేస్తే వారు నిజమైన విలువలను ఇస్తారు, అవి ఈ చోట్లకి జత చేయబడతాయి.
మన గ్రీటింగ్ ఫంక్షన్ సరికొత్తగా పేరు పొందుడం చేయేద్దాం:
```javascript
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}
```
ఇక్కడ మీరు బ్యాక్‌టిక్స్ (`` ` ``) మరియు `${}` ఉపయోగించి పేరును సందేశంలో నేరుగా చేర్చటం గమనించండి – ఇదే టెంప్లెట్ లిటరల్ అని అంటారు, ఇది వేరియబుల్స్ మిళితStrings సృష్టించడానికి చాలా ఉపయోగకరమైన పద్ధతి.
ఇప్పుడు మనం ఫంక్షన్ ను కాల్ చేస్తే ఏ పేరైనా ఇస్తాం:
```javascript
displayGreeting('Christopher');
// అమలు చేసినప్పుడు "హలో, క్రిస్టోఫర్!" చూపిస్తుంది
```
జావాస్క్రిప్ట్ కూడా `'Christopher'` ను `name` పేరామితి కి కేటాయించి, వ్యక్తిగతీకరించిన సందేశం "Hello, Christopher!" ని తయారు చేస్తుంది.
```mermaid
flowchart LR
A["🎯 ఫంక్షన్ కాల్"] --> B["📥 పరామితులు"]
B --> C["⚙️ ఫంక్షన్ బాడీ"]
C --> D["📤 ఫలితం"]
A1["displayGreeting('Alice')"] --> A
B1["పేరు = 'Alice'"] --> B
C1["టెంప్లేట్ లిటరల్\n\`హలో, \${name}!\`"] --> C
D1["'హలో, Alice!'"] --> D
E["🔄 పరామితి రకాలు"] --> E1["స్ట్రింగ్స్"]
E --> E2["నంబర్లు"]
E --> E3["బూలియన్‌లు"]
E --> E4["ఆబ్జెక్టులు"]
E --> E5["ఫంక్షన్లు"]
style A fill:#e3f2fd
style C fill:#e8f5e8
style D fill:#fff3e0
style E fill:#f3e5f5
```
## డిఫాల్ట్ విలువలు
మంచి దృష్టాంతం! మనం కొంత పారామితులను ఐచ్ఛికం గా చేసుకోవాలనుకుంటే? అందుకు డిఫాల్ట్ విలువలు ఉపయోగపడతాయి!
మనం కొందరు మనం అభివాద పదాన్ని కస్టమైజ్ చేసుకోవాలని అనుకుంటే, కానీ వారు ఇచ్చకపోతే "Hello"ని డిఫాల్ట్ గా వాడే విధంగా సెటప్ చేయవచ్చు. డిఫాల్ట్ విలువలను సమానతరియక చిహ్నం ఉపయోగించి సెట్టింగ్ చేయవచ్చు, వేరియబుల్ వలే:
```javascript
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
```
ఇక్కడ, `name` ఇంకా అవసరం, కానీ `salutation` కు ఎవరైనా విభిన్నమైన గ్రీటింగ్ అందించనప్పుడు `'Hello'` బ్యాకప్ విలువ ఉంది.
ఇప్పుడు మనం ఈ ఫంక్షన్‌ను రెండు విధాలుగా కాల్ చేయవచ్చు:
```javascript
displayGreeting('Christopher');
// "హలో, క్రిస్టోఫర్" ప్రదర్శిస్తుంది
displayGreeting('Christopher', 'Hi');
// "హాయ్, క్రిస్టోఫర్" ప్రదర్శిస్తుంది
```
మొదటి కాల్ లో, మేము గ్రీటింగ్ చెప్పలేదు కనుక జావాస్క్రిప్ట్ డిఫాల్ట్ "Hello" వాడుతుంది. రెండవ కాల్ లో, మన కస్టమ్ "Hi" ఉపయోగిస్తారు. ఈ సౌలభ్యం ఫంక్షన్లను వివిధ పరిస్థితులకు అనుకూలంగా మారుస్తుంది.
### 🎛️ **పారామితుల నైపుణ్యం పరీక్ష: ఫంక్షన్లను సడలించుట**
**మీ పారామితుల అర్థం ని పరీక్షించండి:**
- పారామితి మరియు ఆర్గ్యుమెంట్ మధ్య తేడా ఏమిటి?
- నిజ జీవిత ప్రోగ్రామింగ్‌లో డిఫాల్ట్ విలువలు ఎందుకు ఉపయోగకరంగా ఉంటాయి?
- మీరు పారామితుల కంటే ఎక్కువ ఆర్గ్యుమెంట్లు పంపితే ఏమవుతుంది అని ఊహించగలరా?
```mermaid
stateDiagram-v2
[*] --> NoParams: function greet() {}
[*] --> WithParams: function greet(name) {}
[*] --> WithDefaults: function greet(name, greeting='Hi') {}
NoParams --> Static: ఎప్పుడూ ఒకటే అవుట్పుట్
WithParams --> Dynamic: ఇన్‌పుట్‌తో మారుతుంది
WithDefaults --> Flexible: ঐच्छిక అనుకూలీకరణ
Static --> [*]
Dynamic --> [*]
Flexible --> [*]
note right of WithDefaults
అత్యంత అనుకూలమైన దృష్టి
వెనుకCompatibility
end note
```
> **ప్రో టిప్**: డిఫాల్ట్ పారామితులు మీ ఫంక్షన్లను ఎక్కువ వినియోగదారుల అనుకూలంగా చేస్తాయి. వినియోగదారులు తగిన మౌలిక విలువలతో త్వరగా ప్రారంభించగలుగుతారు, అయినప్పటికీ అవసరమైతే నిబంధనలను వ్యవస్థీకరించవచ్చు!
## రిటర్న్ విలువలు
ఇప్పటి వరకు మన ఫంక్షన్లు సందేశాలను కంసోల్ లో మాత్రమే ప్రింట్ చేస్తున్నారు, కానీ మీరు ఫంక్షన్ ను ఏదో లెక్కించి ఆ ఫలితాన్ని తిరిగి ఇవ్వాలని అనుకుంటే?
అక్కడ **return values** అనే అంశం వస్తుంది. ఏదో ప్రదర్శించటం కాకుండా, ఫంక్షన్ మీరు నిల్వ చేసుకునే వేరియబుల్ లేదా మీ కోడ్ యొక్క ఇతర భాగాల్లో ఉపయోగించే విలువను తిరిగి ఇస్తుంది.
విలువను తిరిగి ఇవ్వటానికి, మీరు `return` కీవర్డ్ ని ఉపయోగించి ఆ విలువను వ్రాయాలి:
```javascript
return myVariable;
```
ఇంకో ముఖ్య విషయం ఇదే: ఫంక్షన్ `return` స్టేట్‌మెంట్‌ను ఎదుర్కొన్నప్పుడే వెంటనే ఆపి, ఆ విలువను దాన్ని కాల్ చేసిన దానికి రిటర్న్ చేస్తుంది.
మన గ్రీటింగ్ ఫంక్షన్ ను ప్రింట్ చేయాలంటే కాకుండా, సందేశాన్ని తయారుచేసి తిరిగి ఇచ్చేలా మార్చుద్దాం:
```javascript
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}
```
ఇప్పుడు ఈ ఫంక్షన్ గ్రీటింగ్ ను ప్రింట్ చేయకుండా సృష్టించి మాకు పంపిస్తుంది.
తిరిగి వచ్చిన విలువను ఉపయోగించటానికి, దాన్ని వేరియబుల్ లో నిల్వ చేయవచ్చు:
```javascript
const greetingMessage = createGreetingMessage('Christopher');
```
ఇప్పుడు `greetingMessage` లో "Hello, Christopher" ఉంటుంది, దాన్ని మీరు ఎక్కడైనా ఉపయోగించవచ్చు – వెబ్ పేజీ లో చూపించడానికి, ఇమెయిల్ లో చేర్చడానికి లేదా మరొక ఫంక్షన్ కు అందించడానికి.
```mermaid
flowchart TD
A["🔧 ఫంక్షన్ ప్రాసెసింగ్"] --> B{"రిటర్న్ స్టేట్మెంట్?"}
B -->|అవును| C["📤 రిటర్న్ విలువ"]
B -->|కాదు| D["📭 రిటర్న్ అజ్ఞాతం"]
C --> E["💾 వేరియబుల్‌లో నిల్వ చేయండి"]
C --> F["🔗 వ్యక్తీకరణలో ఉపయోగించండి"]
C --> G["📞 ఫంక్షన్‌కి పంపండి"]
D --> H["⚠️ సాధారణంగా ఉపయోగకరం కాదు"]
I["📋 రిటర్న్ విలువ ఉపయోగాలు"] --> I1["ఫలితాలు లెక్కించండి"]
I --> I2["ఇన్‌పుట్ ధృవీకరించండి"]
I --> I3["డేటాను మార్పిడి చేయండి"]
I --> I4["ఆబ్జెక్టులను సృష్టించండి"]
style C fill:#e8f5e8
style D fill:#ffebee
style I fill:#e3f2fd
```
### 🔄 **రిటర్న్ విలువల పరీక్ష: ఫలితాలను తిరిగి పొందటం**
**రితర్న్ విలువల అర్థం మీరు ఎంతవరకు గ్రహించారో ధరించండి:**
- ఫంక్షన్ లో `return` స్టేట్‌మెంట్ తరువాత కోడ్ కు ఏమి జరుగుతుంది?
- కలపకుండా ప్రింట్ కంటే రిటర్న్ చేయడం ఎందుకు మంచిదని భావిస్తారు?
- ఒక ఫంక్షన్ వేరే వర్గాల విలువలు (స్ట్రింగ్, నంబర్, బూలియన్) రిటర్న్ చేయగలదా?
```mermaid
pie title "సాధారణ రిటర్న్ విలువు రకాలు"
"స్ట్రింగ్లు" : 30
"సంఖ్యలు" : 25
"ऑబ్జెక్టులు" : 20
"బూలియన్లు" : 15
"మార్పిడులు" : 10
```
> **ప్రధానంగా గుర్తు పెట్టుకోండి**: విలువలను రిటర్న్ చేసే ఫంక్షన్లు మరింత సౌలభ్యంగా ఉంటాయి ఎందుకంటే కాలర్ ఆ ఫలితాన్ని ఎలా వాడాలో నిర్ణయిస్తారు. ఇది మీ కోడ్ ను మరింత మాడ్యులర్ మరియు పునర్వినియోగయోగ్యంగా చేస్తుంది!
## ఫంక్షన్లు ఫంక్షన్లకు పారామితులుగా
ఫంక్షన్లను ఇతర ఫంక్షన్లకు పారామితులుగా పంపవచ్చు. మొదట ఇది క్లిష్టంగా అనిపించవచ్చు, కానీ ఇది శక్తివంతమైన ఫీచర్, ఇది సడలించగల ప్రోగ్రామింగ్ నమూనాలను వీలు చేస్తుంది.
ఈ నమూనా చాలా సాధారణం, "ఏదైనా జరిగింది అంటే, ఇది చేయు" అని చెప్పాలి అని ఉంటే చాలు. ఉదాహరణకి, "టైమర్ ముగిసినప్పుడు ఈ కోడ్ నడపండి" లేదా "వినియోగదారు బటన్ క్లిక్ చేసినప్పుడు ఈ ఫంక్షన్ ను కాల్ చేయండి."
`setTimeout` అనే బిల్ట్-ఇన్ ఫంక్షన్ ని చూద్దాం, ఇది కొంత సమయం వెయిట్ చేసి తరువాత కొంత కోడ్ నడిపిస్తుంది. మనం దానికి ఏ కోడ్ నడిపించాలో చెప్పాలి – ఫంక్షన్ పంపే ఉత్తమ సందర్భం!
ఈ కోడ్ ప్రయత్నించండి – 3 సెకన్ల తర్వాత ఒక సందేశం కనిపిస్తుంది:
```javascript
function displayDone() {
console.log('3 seconds has elapsed');
}
// టైమర్ విలువ మిల్లీసెకన్లలో ఉంటుంది
setTimeout(displayDone, 3000);
```
మేము `displayDone` ను (కోణాకాసులు లేకుండా) `setTimeout` కి పంపుతున్నాము గమనించండి. మనం ఆ ఫంక్షన్‌ను స్వయంగా కాల్ చేయడం లేదు – దాన్ని `setTimeout` కు ఇచ్చి "3 సెకన్ల తర్వాత దీన్ని కాల్ చేయు" అని చెబుతున్నాము.
### అనామక ఫంక్షన్లు
కొన్నిసార్లు మీరు ఒక్క పని కోసం ఒక ఫంక్షన్ కావాలి, అది పేరు పెట్టకపోవచ్చు. ఆలోచించండి – మీరు ఒకసారి మాత్రమే ఉపయోగించేది అంటే, కోడ్లో అదనపు పేరు ఎందుకు జోడించాలి?
జావాస్క్రిప్ట్ మీకు **అనామక ఫంక్షన్లు** సృష్టించే అవకాశం ఇస్తుంది – పేర్లేని ఫంక్షన్లు, వాటిని మీరు అప్పుడు మరియు అక్కడ నిర్వచించవచ్చు.
మనం మా టైమర్ ఉదాహరణను అనామక ఫంక్షన్ తో ఇలా మళ్లీ వ్రాయవచ్చు:
```javascript
setTimeout(function() {
console.log('3 seconds has elapsed');
}, 3000);
```
ఇది అదే ఫలితాన్ని ఇస్తుంది, కానీ ఫంక్షన్ ను `setTimeout` కాల్ లోనే నేరుగా నిర్వచించడం వల్ల వేరొక డిక్లరేషన్ అవసరం లేదు.
### ఫ్యాట్ యారో ఫంక్షన్లు
ఆధునిక జావాస్క్రిప్ట్ లో ఫంక్షన్లు రాయడానికి మరింత సంక్షిప్త పద్ధతి ఉంది, దాన్ని **యారో ఫంక్షన్స్** అంటారు. వారు `=>` ఉపయోగిస్తారు (ఒక యారో లా కనిపిస్తుంది), మరియు డెవలపర్లలో చాలా ప్రాచుర్యం పొందాయి.
యారో ఫంక్షన్స్ మీరు `function` కీవర్డ్ వదిలివేసి సంక్షిప్తమైన కోడ్ రాయడానికి అనుమతిస్తాయి.
మా టైమర్ ఉదాహరణను యారో ఫంక్షన్‌తో ఇలా వ్రాస్తారు:
```javascript
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);
```
`()` లో పారామితులు ఉంటాయి (ఇక్కడ ఖాళీగా ఉంది), తరువాత యారో `=>` వస్తుంది, మరియు చివరగా ఫంక్షన్ బాడీ కలుపు బ్రేసుల్లో ఉంటుంది. ఇది అదే ఫంక్షన్ పని చేస్తుంది మరింత సంక్షిప్త సింటాక్స్‌తో.
```mermaid
flowchart LR
A["📝 ఫంక్షన్ శైలులు"] --> B["పారంపరిక"]
A --> C["యారో"]
A --> D["అనామక"]
B --> B1["function name() {}"]
B --> B2["హాయిస్ట్"]
B --> B3["పేరు గలది"]
C --> C1["const name = () => {}"]
C --> C2["సంక్షిప్త సింటాక్సు"]
C --> C3["ఆధునిక శైలి"]
D --> D1["function() {}"]
D --> D2["పేరు లేదు"]
D --> D3["ఒక సారి వినియోగం"]
E["⏰ ఉపయోగించడానికి ఎప్పుడు"] --> E1["పారంపరిక: పునర్వినియోగ పరిక్షణలు"]
E --> E2["యారో: సంక్షిప్త కాల్‌బ్యాక్స్"]
E --> E3["అనామక: ఈవెంట్ హ్యాండ్లర్లు"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
### ప్రతి విధానాన్ని ఎప్పుడు ఉపయోగించాలి
ప్రతీ విధానాన్ని ఎప్పుడు వాడాలంటే? ఒక ప్రాక్టికల్ మార్గదర్శకం: మీరు ఫంక్షన్ ను అనేకసార్లు ఉపయోగించాలనుకుంటే, దానికి పేరు పెట్టి వేరుగా నిర్వచించు. ఒక ప్రత్యేక పని కోసం అయితే, అనామక ఫంక్షన్ పరిగణించండి. యారో ఫంక్షన్స్ మరియు సాంప్రదాయ సింటాక్స్ రెండూ సరైన ఎంపికలు, అయితే ఆధునిక జావాస్క్రిప్ట్ కోడ్ బేసులలో యారో ఫంక్షన్స్ ఎక్కువగా వాడతారు.
### 🎨 **ఫంక్షన్ శైలుల నైపుణ్యం పరీక్ష: సరైన సింటాక్స్ ఎంచుకోవడం**
**మీ సింటాక్స్ అర్థాంతాన్ని పరీక్షించండి:**
- మీరు ఎప్పుడు యారో ఫంక్షన్స్ ను సాంప్రదాయ ఫంక్షన్ సింటాక్స్ కంటే ప్రాధాన్యం ఇస్తారు?
- అనామక ఫంక్షన్ యొక్క ప్రధాన ప్రయోజనం ఏమిటి?
- పేరు ఉన్న ఫంక్షన్ అనామక ఫంక్షన్ తో పోలిస్తే ఎప్పుడు మెరుగుగా ఉంటుంది అనుకుంటారు?
```mermaid
quadrantChart
title ఫంక్షన్ ఎంపిక నిర్ణయ మేట్రిక్స్
x-axis సింపుల్ --> కాంప్లెక్స్
y-axis ఒక్కసారి ఉపయోగం --> పునఃఉపయోగించదగినది
quadrant-1 ఎరో ఫంక్షన్లు
quadrant-2 పేరుగల ఫంక్షన్లు
quadrant-3 అనామక ఫంక్షన్లు
quadrant-4 సాంప్రదాయ ఫంక్షన్లు
ఈవెంట్ హ్యాండ్లర్స్: [0.3, 0.2]
యుటిలిటీ ఫంక్షన్లు: [0.7, 0.8]
కాల్‌బ్యాక్స్: [0.2, 0.3]
క్లాస్ మెథడ్స్: [0.8, 0.7]
గణితీయ ఆపరేషన్స్: [0.4, 0.6]
```
> **మొదర్న ట్రెండ్**: యారో ఫంక్షన్స్ సంక్షిప్తమైన సింటాక్స్ కారణంగా చాలా డెవలపర్లకు చెలామణి అవుతున్నాయి, అయినప్పటికీ సాంప్రదాయ ఫంక్షన్లకు కూడా ఇంకా ప్రాముఖ్యత ఉంది!
---
## 🚀 సవాలు
ఫంక్షన్లు మరియు మెథడ్ల మధ్య తేడాను ఒక వాక్యంలో వివరించగలరా? ప్రయత్నించండి!
## GitHub Copilot Agent సవాలు 🚀
క్రింది సవాలుని పూర్తి చేయడానికి ఏజెంట్ మోడ్ ఉపయోగించండి:
**వివరణ:** ఈ పాఠంలో కవర్ చేసిన వివిధ ఫంక్షన్ కాన్సెప్ట్‌లను, మాదిరిగా పారామితులు, డిఫాల్ట్ విలువలు, రిటర్న్ విలువలు, మరియు యారో ఫంక్షన్లతో కూడిన గణిత సంబంధిత ఫంక్షన్‌ల ఉపయోగిత గ్రంథాలయాన్ని సృష్టించండి.
**ప్రాంప్ట్:** `mathUtils.js` అనే ఒక జావాస్క్రిప్ట్ ఫైల్ సృష్టించండి, ఇందులో క్రింద వివరించిన ఫంక్షన్లు ఉండాలి:
1. రెండు పారామితులు తీసుకుని వాటి యోగాన్ని ఇవ్వు `add` ఫంక్షన్
2. డిఫాల్ట్ పారామితుల విలువలతో `multiply` ఫంక్షన్ (రెండో పారామితి డిఫాల్ట్ గా 1)
3. ఒక సంఖ్య తీసుకొని దాని చదరంగం ఇచ్చే యారో ఫంక్షన్ `square`
4. మరో ఫంక్షన్ మరియు రెండు సంఖ్యలను పారామితులుగా తీసుకుని ఆ ఫంక్షన్ ను ఆ సంఖ్యలపై అమలు చేసే `calculate` ఫంక్షన్
5. ప్రతి ఫంక్షన్ ను సంబంధిత టెస్ట్ కేసులతో కాల్ చేస్తూ ప్రకటన చేయండి
[ఏజెంట్ మోడ్ గురించి మరింత చదవండి](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
## లెక్చర్ తరువాత క్విజ్
[లెక్చర్ తరువాత క్విజ్](https://ff-quizzes.netlify.app)
## సమీక్ష & స్వవిద్య
కోడింగ్ బేసుల్లో యారో ఫంక్షన్లు ಹೆಚ್ಚుతున్నాయని గమనించి, [యారో ఫంక్షన్లపై మరింత చదవటం](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) విలువయుతం. ఒక ఫంక్షన్ రాయడం అభ్యసించి, తరువాత దాన్ని ఈ సింటాక్స్ తో మళ్లీ రాయండి.
## అస్సైన్మెంట్
[ఫంక్షన్లతో సరదా](assignment.md)
---
## 🧰 **మీ జావాస్క్రిప్ట్ ఫంక్షన్స్ సాధన పెట్టి 요약ం**
```mermaid
graph TD
A["🎯 జావాస్క్రిప్ట్ ఫంక్షన్స్"] --> B["📋 ఫంక్షన్ డిక్లరేషన్"]
A --> C["📥 పరామితులు"]
A --> D["📤 రిటర్న్ విలువలు"]
A --> E["🎨 ఆధునిక సంకేతవిధానం"]
B --> B1["function name() {}"]
B --> B2["వివరణాత్మక పేరుపొందింపు"]
B --> B3["పునరావృత కోడ్ బ్లాక్స్"]
C --> C1["ఇన్‌పుట్ డేటా"]
C --> C2["మూల్యపు విలువలు"]
C --> C3["బహుళ పరామితులు"]
D --> D1["return స్టייט్మెంట్"]
D --> D2["ఫంక్షన్ నిష్క్రమణ"]
D --> D3["డేటా తిరిగి పంపించండి"]
E --> E1["అర్రో ఫంక్షన్స్: () =>"]
E --> E2["నామరహిత ఫంక్షన్స్"]
E --> E3["అధిక-ఆర్డర్ ఫంక్షన్స్"]
F["⚡ ప్రధాన ప్రయోజనాలు"] --> F1["కోడ్ పునర్వినియోగం"]
F --> F2["మంచి వ్యవస్థీకరణ"]
F --> F3["ఈజీ పరీక్ష"]
F --> F4["మాడ్యులర్ డిజైన్"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
---
## 🚀 మీ జావాస్క్రిప్ట్ ఫంక్షన్స్ ప్రావీణ్యత సమయరేఖ
### ⚡ **తర్వాతి 5 నిమిషాల్లో మీరు చేయగలిగేది**
- [ ] మీ ఇష్టమైన సంఖ్యను రిటర్న్ చేసే ఒక సింపుల్ ఫంక్షన్ రాయండి
- [ ] రెండు పారామితుల కలిగిన మరియు వాటిని కలిపే ఫంక్షన్ సృష్టించండి
- [ ] సాంప్రదాయ ఫంక్షన్‌ను ఆర్రో ఫంక్షన్_Syntaxకి మార్పిడి చేయడానికి ప్రయత్నించండి
- [ ] ఛాలెంజ్‌ను అభ్యసించండి: ఫంక్షన్లు మరియు మెథడ్స్ మధ్య తేడాను వివరించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పోస్ట్-లెసన్ క్విజ్ పూర్తి చేసి ఏదైనా గందరగోళమైన కాన్సెప్ట్‌లను సమీక్షించండి
- [ ] GitHub Copilot ఛాలెంజ్ నుండి మ్యాథ్ యుటిలిటీస్ లైబ్రరీ నిర్మించండి
- [ ] ఒక ఫంక్షన్‌ను పారామీటరుగా ఉపయోగించే మరో ఫంక్షన్ సృష్టించండి
- [ ] డిఫాల్ట్ పారామీటర్లతో ఫంక్షన్లను రాయడం అభ్యసించండి
- [ ] ఫంక్షన్ రిటర్న్ విలువలలో టెంప్లేట్ లిటర అలను ప్రయోగించండి
### 📅 **మీ వారపత్రిక ఫంక్షన్ నైపుణ్యం**
- [ ] "ఫన్ విత్ ఫంక్షన్స్" అసైన్‌మెంట్‌ను సృజనాత్మకంగా పూర్తి చేయండి
- [ ] మీరు రాయగా పునరావృతమైన కోడ్‌ను పునర్వినియోగయోగ్య ఫంక్షన్లుగా మార్చండి
- [ ] కేవలం ఫంక్షన్లను ఉపయోగించి చిన్న క్యాలკ్యులేటర్‌ను నిర్మించండి (గ్లోబల్ వేరియబుల్స్ లేకపోయినా సరే)
- [ ] `map()` మరియు `filter()` వంటి అర్రే మెథడ్లతో ఆర్రో ఫంక్షన్లను అభ్యసించండి
- [ ] సాధారణ పనుల కోసం యుటిలిటి ఫంక్షన్ల సేకరణను రూపొందించండి
- [ ] హయ్యర్-ఆర్డర్ ఫంక్షన్లు మరియు ఫంక్షనల్ ప్రోగ్రామింగ్ కాన్సెప్ట్‌లను అధ్యయనం చేయండి
### 🌟 **మీ నెలపాటు పరివర్తనం**
- [ ] క్లోజర్‌లు మరియు స్కోప్ వంటి అధిక స్థాయి ఫంక్షన్ కాన్సెప్ట్‌లను చక్కన చేసుకోండి
- [ ] ఫంక్షన్ కంపోజిషన్‌ని విస్తృతంగా ఉపయోగించే ప్రాజెక్ట్‌ను నిర్మించండి
- [ ] ఫంక్షన్ డాక్యుమెంటేషన్ మెరుగుపరచడం ద్వారా ఓపెన్ సోర్స్‌కు విరాళం ఇవ్వండి
- [ ] మరొకరికి ఫంక్షన్లు మరియు విభిన్న సింటాక్స్ శైలుల గురించి బోధించండి
- [ ] జావాస్క్రిప్ట్‌లో ఫంక్షనల్ ప్రోగ్రామింగ్ పద్ధతులను అన్వేషించండి
- [ ] భవిష్యపు ప్రాజెక్ట్‌ల కోసం పునర్వినియోగయోగ్యమైన వ్యక్తిగత ఫంక్షన్ లైబ్రరీని సృష్టించండి
### 🏆 **అంతిమ ఫంక్షన్స్ ఛాంపియన్ చెక్-ఇన్**
**మీ ఫంక్షన్ నైపుణ్యాన్ని జరుపుకోండి:**
- ఇప్పటివరకు మీరు సృష్టించిన అత్యంత ఉపయోగకరమైన ఫంక్షన్ ఏది?
- ఫంక్షన్ల గురించి నేర్చుకోవడం మీ కోడ్ ఆర్గనైజేషన్ దృక్పథాన్ని ఎలా మార్చిందని మీరు అనుకుంటున్నారు?
- మీరు ఏ ఫంక్షన్ సింటాక్స్‌ను ప్రాధాన్యం ఇస్తారు మరియు ఎందుకు?
- మీరు ఏ వాస్తవ ప్రపంచ సమస్యను ఒక ఫంక్షన్ రాయడం ద్వారా పరిష్కరించాలనుకుంటారు?
```mermaid
journey
title మీ ఫంక్షన్ విశ్వాస స్థాయి అభివృద్ధి
section ఈ రోజు
వ్యాకరణంలో నిర్బంధం: 3: You
ప్రాథమికాలు అర్థం చేసుకోవడం: 4: You
సాదా ఫంక్షన్లు రాయడం: 5: You
section ఈ వారం
పరామితులు ఉపయోగించడం: 4: You
విలువలను తిరిగి ఇచ్చడం: 5: You
ఆధునిక వ్యాకరణం: 5: You
section వచ్చే నెల
ఫంక్షన్ సమ్మేళనం: 5: You
పరిపక్వ నమూనాలు: 5: You
ఇతరులకు బోధించడం: 5: You
```
> 🎉 **మీరు ప్రోగ్రామింగ్ యొక్క అత్యంత శక్తివంతమైన కాన్సెప్ట్‌లలో ఒకదాన్ని సాధించారు!** ఫంక్షన్లు పెద్ద ప్రోగ్రామ్‌ల నిర్మాణ బ్లాకులు. మీరు ఎప్పుడైనా నిర్మించే ప్రతి అప్లికేషన్ కోడ్‌ను ఆర్గనైజ్ చేయడానికి, పునర్వినియోగం చేయడానికి, మరియు నిర్మించడానికి ఫంక్షన్లను ఉపయోగిస్తుంది. మీరు ఇప్పుడు లాజిక్‌ను పునర్వినియోగయోగ్యమైన భాగాలుగా ప్యాకేజ్ చేయడం ఎలా అనేదాన్ని అర్థం చేసుకున్నారు, అది మిమ్మల్ని మరింత సమర్థవంతమైన మరియు ప్రభావవంతమైన ప్రోగ్రామర్ గా మార్చుతుంది. మాడ్యులర్ ప్రోగ్రామింగ్ ప్రపంచానికి స్వాగతం! 🚀
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**దర్శక సూచన**:
ఈ డాక్యూమెంట్‌ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా అసత్యతలు ఉండవచ్చును. అసలు డాక్యూమెంట్ దాని స్వదేశ భాషలోనే అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదాన్ని ఉపయోగించడం మంచిది. ఈ అనువాదం వలన ఏర్పడిన ఏదైనా అపార్థాలు లేదా తప్పుదిద్దుతలపై మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

82
translations/te/2-js-basics/2-functions-methods/assignment.md
Unescape View File

@ -0,0 +1,82 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8328f58f4593b4671656ff8f4b2edbd9",
"translation_date": "2026-01-08T12:29:31+00:00",
"source_file": "2-js-basics/2-functions-methods/assignment.md",
"language_code": "te"
}
-->
# ఫంక్షన్లతో సరదా
## సూచనలు
ఈ అసైన్మెంట్‌లో, మీరు వివిధ రకాల ఫంక్షన్లను సృష్టించడం ప్రాక్టీస్ చేస్తారు, మీరు నేర్చుకున్న జావాస్క్రిప్ట్ ఫంక్షన్లు, పరామితులు, డిఫాల్ట్ విలువలు మరియు రిటర్న్ స్టేట్మెంట్ల గురించి కాన్సెప్ట్‌లను బలపరిచేందుకు.
`functions-practice.js` అనే జావాస్క్రిప్ట్ ఫైల్ సృష్టించి, క్రింది ఫంక్షన్లను అమలు చేయండి:
### భాగం 1: ప్రాథమిక ఫంక్షన్లు
1. **`sayHello` అనే ఫంక్షన్ సృష్టించండి** ఇది ఎలాంటి పరామితులు తీసుకోదు మరియు కేవలం "Hello!" ను console లో లాగ్ చేస్తుంది.
2. **`introduceYourself` అనే ఫంక్షన్ సృష్టించండి** ఇది `name` అనే పరామితిని తీసుకుని "Hi, my name is [name]" అనే సందేశాన్ని console లో లాగ్ చేస్తుంది.
### భాగం 2: డిఫాల్ట్ పరామితులతో ఫంక్షన్లు
3. **`greetPerson` అనే ఫంక్షన్ సృష్టించండి** ఇది రెండు పరామితులు తీసుకుంటుంది: `name` (అవసరం) మరియు `greeting` (ఐచ్ఛికం, డిఫాల్ట్ "Hello"). ఈ ఫంక్షన్ "[greeting], [name]!" అని console లో లాగ్ చేస్తుంది.
### భాగం 3: విలువలు రిటర్న్ చేసే ఫంక్షన్లు
4. **`addNumbers` అనే ఫంక్షన్ సృష్టించండి** ఇది రెండు పరామితులు (`num1` మరియు `num2`) తీసుకుని వాటి సరిపొత сумму ని రిటర్న్ చేస్తుంది.
5. **`createFullName` అనే ఫంక్షన్ సృష్టించండి** ఇది `firstName` మరియు `lastName` పరామితులను తీసుకుని పూర్తి పేరు ఒక స్ట్రింగ్‌గా రిటర్న్ చేస్తుంది.
### భాగం 4: అన్ని వాటిని కలపండి
6. **`calculateTip` అనే ఫంక్షన్ సృష్టించండి** ఇది రెండు పరామితులు తీసుకుంటుంది: `billAmount` (అవసరం) మరియు `tipPercentage` (ఐచ్ఛికం, డిఫాల్ట్ 15). ఈ ఫంక్షన్ టిప్ మొత్తాన్ని లెక్కించి రిటర్న్ చేస్తుంది.
### భాగం 5: మీ ఫంక్షన్లని పరీక్షించండి
మీ ప్రతీ ఫంక్షన్‌కు టెస్ట్ కాల్స్ జోడించి, ఫలితాలను `console.log()` ద్వారా ప్రదర్శించండి.
**ఉదాహరణ టెస్ట్ కాల్స్:**
```javascript
// ఇక్కడ మీ ఫంక్షన్‌లను పరీక్షించండి
sayHello();
introduceYourself("Sarah");
greetPerson("Alex");
greetPerson("Maria", "Hi");
const sum = addNumbers(5, 3);
console.log(`The sum is: ${sum}`);
const fullName = createFullName("John", "Doe");
console.log(`Full name: ${fullName}`);
const tip = calculateTip(50);
console.log(`Tip for $50 bill: $${tip}`);
```
## రూబ్రిక్
| ప్రమాణం | అత్యుత్తమం | సరిపోతుంది | మెరుగు అవసరం |
| ------- | --------- | ---------- | -------------- |
| **ఫంక్షన్ సృష్టి** | అన్ని 6 ఫంక్షన్లు సరైన సింటాక్స్ మరియు పేర్లు పాటిస్తూ అమలులో ఉన్నవి | 4-5 ఫంక్షన్లు సరైన సింటాక్స్‌తో ఉన్నాయి, అక్కడ అక్కడ చిన్న చిన్న తప్పులు ఉన్నా సరే | 3 లేదా తక్కువ ఫంక్షన్లు అమలు చేయబడ్డాయి లేదా పెద్ద సింటాక్స్ లోపాలు ఉన్నవి |
| **పరామితులు & డిఫాల్ట్ విలువలు** | అవసరమైన, ఐచ్ఛిక పరామితులు మరియు డిఫాల్ట్ విలువలను సరైన రీతిలో ఉపయోగించటం జరిగింది | పరామితులను సరైన విధంగా ఉపయోగించడం జరిగింది కానీ డిఫాల్ట్ విలువల విషయంలో చిన్న తప్పులు ఉండవచ్చు | పరామితులు తప్పుగా లేదా లేకుండా అమలు |
| **రిటర్న్ విలువలు** | విలువలను రిటర్న్ చేయాల్సిన ఫంక్షన్లు సరిగ్గా రిటర్న్ చేస్తున్నవి, చేయకూడినవి కేవలం చర్యలు మాత్రమే చేసేదిగా ఉన్నాయి | ఎక్కువ భాగం సరిగా ఉన్నా చెల్లని విషయాలు ఉన్నాయి | రిటర్న్ స్టేట్మెంట్లలో ప్రాముఖ్యమైన సమస్యలు |
| **కోడ్ నాణ్యత** | పరిశుభ్రంగా, సరిగ్గా అమర్చిన కోడ్, అర్థవంతమైన వేరియబుల్ పేర్లు, సరైన ఇండెంటేషన్ | కోడ్ పనిచేస్తుంది కానీ మరింత శుభ్రంగా లేదా బాగా అమర్చాలి | కోడ్ చదవడం కష్టం లేదా అధికంగా నిర్మాణ రహితంగా ఉంది |
| **పరీక్ష** | అన్ని ఫంక్షన్లు సరైన విధంగా పరీక్షించబడ్డాయి మరియు ఫలితాలు స్పష్టం గా ప్రదర్శించబడ్డాయి | ఎక్కువ భాగం సరైన పరీక్షలు ఉన్నవి | పరీక్ష పరిమితంగా లేదా తప్పుగా చేసినవి |
## బోనస్ సవాళ్లు (ఐచ్ఛికం)
మీరు మరింత సవాలు చేయాలనుకుంటే:
1. మీ ఫంక్షన్‌ల లో ఒకటి యొక్క ఆరో ఫంక్షన్ వెర్షన్ సృష్టించండి
2. మరో ఫంక్షన్‌ను పరామితిగా తీసుకునే ఫంక్షన్ సృష్టించండి (పాఠం లోని `setTimeout` ఉదాహరణల లాంటి)
3. మీ ఫంక్షన్లు సరైన ఇన్పుట్‌లను స్వీకరిస్తున్నాయా అని నిర్ధారించే ఇన్పుట్ వాలిడేషన్ జోడించండి
---
> 💡 **సూచన**: మీ బ్రౌజర్ డెవలపర్ కన్సోల్ (F12) తెరిచి, మీ `console.log()` స్టేట్‌మెంట్ల అవుట్‌పుట్ చూడడం మర్చిపోకండి!
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**విమర్శన**:
ఈ పత్రం [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవను ఉపయోగించి అనుమతించబడింది. మేము ఖచ్చితత్వం కోసం ప్రయత్నించగా కూడా, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా అసత్యాలు ఉండవచ్చు. అసలు పత్రం మూల భాషలో మాత్రమే అధికారిక మూలంగా పరిగణించాలి. కీలక సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదాన్ని సంప్రదించడం ఉత్తమం. ఈ అనువాదాన్ని ఉపయోగించడం వలన కలిగే ఏ విపత్కర అర్థగర్భిత తీర్మానాలకు మేము బాధ్యత చేపడము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

672
translations/te/2-js-basics/3-making-decisions/README.md
Unescape View File

@ -0,0 +1,672 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c688385d15dd3645e924ea0ffee8967f",
"translation_date": "2026-01-08T12:46:04+00:00",
"source_file": "2-js-basics/3-making-decisions/README.md",
"language_code": "te"
}
-->
# జావాస్క్రిప్ట్ బేసిక్స్: నిర్ణయాలు తీసుకోవడం
![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.te.png)
> స్కేట్ఛ్‌‌నోట్ [Tomomi Imura](https://twitter.com/girlie_mac) రచన
```mermaid
journey
title మీ జావాస్క్రిప్ట్ నిర్ణయం తీసుకునే ప్రయాణం
section పునాదులు
Boolean విలువలు: 5: You
పోలిక ఆపరేటర్లు: 4: You
తర్క పద్ధతి: 5: You
section ప్రాథమిక నిర్ణయాలు
If స్టేట్‌మెంట్లు: 4: You
If-Else తర్కం: 5: You
Switch స్టేట్‌మెంట్లు: 4: You
section అధునాతన తర్కం
తర్క ఆపరేటర్లు: 5: You
సంక్లిష్ట పరిస్థితులు: 4: You
టెర్నరీ వ్యక్తీకరణలు: 5: You
```
మీరు ఎప్పుడైనా ఆలోచించారా, యాప్స్ ఎలా తెలివైన నిర్ణయాలు తీసుకుంటాయో? ఉదాహరణకి, ఒక నావిగేషన్ సిస్టమ్ వేగవంతమైన మార్గాన్ని ఎలా ఎంచుకుంటుంది, లేదా ఒక థర్మోస్టాట్ వేడి ఎప్పుడు ప్రారంభించాలో ఎలా నిర్ణయించుకుంటుంది? ఇది ప్రోగ్రామింగ్‌లో నిర్ణయం తీసుకునే ప్రాథమిక భావన.
చార్లెస్ బాబేజ్ యొక్క అనలిటికల్ ఇంజిన్ పరిస్థితుల ఆధారంగా వివిధ ఆపరేషన్లు అనుసరిస్తుందని రూపకల్పన చేయబడింది అంటూ, ఆధునిక జావాస్క్రిప్ట్ ప్రోగ్రామ్‌లు వివిధ పరిస్థితులపై ఆధారపడి ఎంపికలు చేయాలి. ఈ శాఖ పద్ధతి, నిర్ణయాలు తీసుకోవడం వల్ల స్థిర కోడ్‌ ను స్పందనాత్మక, తెలివైన యాప్లికేషన్లుగా మారుస్తుంది.
ఈ పాఠంలో, మీరు మీ ప్రోగ్రామ్‌లలో షరతు లాజిక్ ఎలా అమలు చేయాలో నేర్చుకుంటారు. షరతు స్టేట్మెంట్లు, పోలిక ఆపరేటర్లు, మరియు తార్కిక వ్యక్తీకరణలను పరిశీలించి, మీ కోడ్ పరిస్థితులను అంచనా వేసి సరిగ్గా స్పందించడానికి వీలు కల్పిస్తాయి.
## ముందస్తు ఉపన్యాస క్విజ్
[ముందస్తు ఉపన్యాస క్విజ్](https://ff-quizzes.netlify.app/web/quiz/11)
నిర్ణయాలు తీసుకోవడం మరియు ప్రోగ్రామ్ ప్రవాహాన్ని నియంత్రించడం ప్రోగ్రామింగ్ యొక్క ప్రాథమిక అంశం. ఈ విభాగం బూలియన్ విలువలు మరియు షరతు లాజిక్ ఉపయోగించి మీ జావాస్క్రిప్ట్ ప్రోగ్రామ్‌లు ఎలా అమలు చేయాలో వివరిస్తుంది.
[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
> 🎥 నిర్ణయాలు తీసుకోవడం గురించి వీడియో కోసం పై చిత్రం క్లిక్ చేయండి.
> మీరు ఈ పాఠాన్ని [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) లో కూడా నేర్చుకోవచ్చు!
```mermaid
mindmap
root((నిర్ణయం తీసుకోవడం))
Boolean Logic
true/false
సరిపోలింపు ఫలితాలు
లాజికల్ వ్యక్తరణలు
Conditional Statements
if statements
ఒక్క పరిస్థితి
కోడ్ అమలు
if-else
రెండు మార్గాలు
ప్రత్యామ్నాయం చర్యలు
switch
బహుముఖ ఎంపికలు
శుభ్రమైన నిర్మాణం
Operators
Comparison
=== !== < > <= >=
విలువ సంబంధాలు
Logical
&& || !
పరిస్థితులు కలపండి
Advanced Patterns
Ternary
? : వాక్యరచన
పంక్తిలో నిర్ణయాలు
Complex Logic
కూర్చిన పరిస్థితులు
బహుముఖ ప్రమాణాలు
```
## బూలియన్‌లపై సంక్షిప్త జ్ఞాపకం
నిర్ణయాలు తీసుకునే ప్రక్రియను పరిశీలించే ముందు, మన గత పాఠం నుంచి బూలియన్ విలువలను మళ్లీ చూసుకుందాం. గణిత శాస్త్రజ్ఞుడు జార్జ్ బూల్ పేరు మీద ఈ విలువలు binary స్థితులను సూచిస్తాయి – అది `true` లేదా `false` మాత్రమే. ఇందులో ఎటువంటి సందేహం లేదా మధ్యస్థానం ఉండదు.
ఈ binary విలువలు అన్ని కంప్యూటేషనల్ లాజిక్ యొక్క పునాది. మీ ప్రోగ్రామ్ తీసుకునే ప్రతి నిర్ణయం తగినంతగా ఒక బూలియన్ అంచనాకే తగ్గుతుంది.
బూలియన్ వేరియబుల్స్ సృష్టించడం సులభం:
```javascript
let myTrueBool = true;
let myFalseBool = false;
```
ఇది స్పష్టమైన బూలియన్ విలువలతో రెండు వేరియబుల్స్ సృష్టిస్తుంది.
✅ బూలియన్‌లు ఇంగ్లీషు గణిత శాస్త్రజ్ఞుడు, తత్త్వవేత్త మరియు తార్కికవేత్త జార్జ్ బూల్ (1815–1864) పేరిట ఉన్నాయి.
## పోలిక ఆపరేటర్లు మరియు బూలియన్‌లు
ప్రాక్టికల్‌గా, మీరు బూలియన్ విలువలను వ్యక్తిగతంగా ఇలా సెట్ చేయరు. దీని బదులు, మీరు షరతులను అంచనా వేసి వాటిని ఉత్పత్తి చేస్తారు: "ఈ సంఖ్య ఆ సంఖ్య కంటే ఎక్కువగా ఉందా?" లేదా "ఈ విలువలు సమానంగానేనా?"
పోలిక ఆపరేటర్లు ఈ అంచనాలు చేయడానికి ఉపయోగపడతాయి. అవి రెండూ విలువలను పోల్చి ఆపరాండ్ల మధ్య సంబంధం ఆధారంగా బూలియన్ ఫలితాలను ఇస్తాయి.
| ప్రతీక | వివరణ | ఉదాహరణ |
| ------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `<` | **తక్కువ**: రెండు విలువలను పోల్చి ఎడమవైపున ఉన్నది కుడిపక్కన ఉన్నదికంటే తక్కువైతే `true` ఇస్తుంది | `5 < 6 // true` |
| `<=` | **తక్కువగా లేదా సమానం**: రెండు విలువలను పోల్చి ఎడమవైపున ఉన్నది కుడిపక్కన ఉన్నదికి తక్కువ లేదా సమానమైతే `true` ఇస్తుంది | `5 <= 6 // true` |
| `>` | **గొప్ప**: రెండు విలువలను పోల్చి ఎడమవైపున ఉన్నది కుడిపక్కన ఉన్నదికన్నా ఎక్కువైతే `true` ఇస్తుంది | `5 > 6 // false` |
| `>=` | **గొప్ప లేదా సమానం**: రెండు విలువలను పోల్చి ఎడమవైపున ఉన్నది కుడిపక్కన ఉన్నదికి పెద్దది లేదా సమానమైతే `true` ఇస్తుంది | `5 >= 6 // false` |
| `===` | **కఠిన సమానత్వం**: రెండు విలువలను పోల్చి కుడి మరియు ఎడమవైపు రెండూ సమానమైన డేటా టైప్ ఉంటే `true` ఇస్తుంది | `5 === 6 // false` |
| `!==` | **వేడుకోవడము**: కఠిన సమానత్వ ఆపరేటరు ఇస్తున్న విలువకు విరుద్ధమైన బూలియన్ విలువ ఇస్తుంది | `5 !== 6 // true` |
✅ మీ జ్ఞానాన్ని పరీక్షించేందుకు మీ బ్రౌజర్ కన్సోల్‌లో కొన్ని పోలికలు రాయండి. మీరు ఆశించని డేటా ఎవరైనా వచ్చిందా?
```mermaid
flowchart LR
A["🔢 విలువలు"] --> B["⚖️ సరిపోలిక"]
B --> C["✅ బూలియన్ ఫలితం"]
D["5"] --> E["< 6"]
E --> F["true"]
G["10"] --> H["=== '10'"]
H --> I["false"]
J["'హలో'"] --> K["!== 'ప్రపంచం'"]
K --> L["true"]
M["📋 ఆపరేటర్ రకాలు"] --> M1["సమానత: === !=="]
M --> M2["సంబంధిత: < > <= >="]
M --> M3["కఠినమైన vs సడలించిన"]
style A fill:#e3f2fd
style C fill:#e8f5e8
style M fill:#fff3e0
```
### 🧠 **పోలిక నైపుణ్యం పరీక్ష: బూలియన్ లాజిక్ అర్థం చేసుకోడం**
**మీ పోలిక అర్థం చేసుకున్నదా పరీక్షించండి:**
- మీరు ఎందుకు `===` (కఠిన సమానత్వం) ను సాధారణంగా `==` (కొద్దిగా సమానత్వం) కంటే ఇష్టపడతారు?
- `5 === '5'` ఎం వస్తుందో ఊహించగలరా? అలాగే `5 == '5'`?
- `!==` మరియు `!=` మధ్య తేడా ఏమిటి?
```mermaid
stateDiagram-v2
[*] --> Comparison: రెండు విలువలు
Comparison --> StrictEqual: === లేదా !==
Comparison --> Relational: < > <= >=
StrictEqual --> TypeCheck: టైపు మరియు విలువను చూడండి
Relational --> NumberCompare: సంఖ్యలుగా మార్చండి
TypeCheck --> BooleanResult: true లేదా false
NumberCompare --> BooleanResult
note right of StrictEqual
ప్రాధాన్యమైన విధానం
టైపు మార్పిడి లేదు
end note
note right of Relational
పరిధులకు ఉపయోగపడుతోంది
సంఖ్యాత్మక పోలికలు
end note
```
> **ప్రో చిట్కా**: టైపు మార్పిడి అవసరం లేకపోతే ఎప్పుడూ సమానత్వం పరీక్షలకు `===` మరియు `!==` వాడండి. ఇది అనూహ్య ప్రవర్తనలను నివారిస్తుంది!
## If స్టేట్మెంట్
`if` స్టేట్మెంట్ మీ కోడ్‌లో ఒక ప్రశ్న అడిగినట్టే. "ఈ షరతు true అయితే, ఈ పని చేయు." ఇది జావాస్క్రిప్ట్‌లో నిర్ణయాలు తీసుకునేందుకు అత్యంత ముఖ్యమైన పరికరం.
ఇలా పనిచేస్తుంది:
```javascript
if (condition) {
// పరిస్థితి నిజం. ఈ బ్లాక్‌లో కోడ్ అమలవుతుంది.
}
```
షరతు ప్రముఖంగా కోసుపైన ఉంచబడుతుంది, అది `true` అయితే, జావాస్క్రిప్ట్ కర్లీ బ్రేసెస్ లోని కోడ్‌ను నడుపుతుంది. `false` అయితే, ఆ బ్లాక్ మొత్తాన్ని స్కిప్ చేస్తుంది.
మీరు తరచుగా ఈ షరతులను సృష్టించడానికి పోలిక ఆపరేటర్లను వాడతారు. ప్రావీట్ ఉదాహరణ చూద్దాం:
```javascript
let currentMoney = 1000;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// షరతు నిజం. ఈ బ్లాక్‌లోని కోడ్ నడుస్తుంది.
console.log("Getting a new laptop!");
}
```
`1000 >= 800` సత్యం కావడంతో, బ్లాక్‌లోని కోడ్ పనిచేస్తుంది, కన్సోల్‌లో "Getting a new laptop!" ప్రదర్శిస్తుంది.
```mermaid
flowchart TD
A["🚀 ప్రోగ్రామ్ ప్రారంభం"] --> B{"💰 currentMoney >= laptopPrice?"}
B -->|true| C["🎉 'కొత్త లాప్‌టాప్ పొందడం!'"]
B -->|false| D["⏭️ కోడ్ బ్లాక్ దాటవేయండి"]
C --> E["📋 ప్రోగ్రామ్ కొనసాగించండి"]
D --> E
F["📊 If స్టేట్‌మెంట్ నిర్మాణం"] --> F1["if (condition) {"]
F1 --> F2[" // నిజమైతే నడపవలసిన కోడ్"]
F2 --> F3["}"]
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#ffebee
style F fill:#e3f2fd
```
## If..Else స్టేట్మెంట్
కానీ షరతు false అయినప్పుడు మీ ప్రోగ్రామ్ వేరే పని చేయాలని అనుకున్నట్లయితే? అప్పుడు `else` వస్తుంది – ఇది బ్యాక్‌అప్ ప్లాన్ లాంటి కొరుక్క.
`else` స్టేట్మెంట్ అంటే "ఈ షరతు సత్యం కాదు అయితే, మరీచిన్న పని చేయు" అర్థం.
```javascript
let currentMoney = 500;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// పరిస్థితి నిజం. ఈ బ్లాక్‌లో ఉన్న కోడ్ చేయబడుతుంది.
console.log("Getting a new laptop!");
} else {
// పరిస్థితి తప్పు. ఈ బ్లాక్‌లో ఉన్న కోడ్ చేయబడుతుంది.
console.log("Can't afford a new laptop, yet!");
}
```
ఇప్పుడు `500 >= 800` false కాబట్టి, జావాస్క్రిప్ట్ మొదటి బ్లాక్‌ ఖాళీ చేసి, `else` బ్లాక్ నడుపుతుంది. కన్సోల్‌లో "Can't afford a new laptop, yet!" కనిపిస్తుంది.
✅ ఈ కోడ్ మరియు క్రింద ఇవ్వబడిన కోడ్ మీ బ్రౌజర్ కన్సోల్ లో నడుపుతూ మీ అవగాహనను పరీక్షించండి. `currentMoney` మరియు `laptopPrice` వేరియబుల్స్ విలువలు మార్చి `console.log()` లో వేరే ఫలితాన్ని పొందండి.
### 🎯 **If-Else లాజిక్ పరీక్ష: శాఖలు**
**మీ షరతుల గురించి అర్థం చేసుకోవడం నిర్వహించుకోండి:**
- `currentMoney` సరియైనదిగా `laptopPrice` కి సమానం అయితే ఏం జరుగుతుంది?
- నిజ జీవిత పరిస్థితిలో if-else లాజిక్ ఉపయోగించే ఎటువంటి ఉదాహరణ చెప్పగలరా?
- మీరు ఈ[src]ను ఎట్లా విస్తరించవచ్చు, బహుళ ధర పరిధుల నిర్వహణ కోసం?
```mermaid
flowchart TD
A["🔍 షరతును మూల్యాంకనం చేయండి"] --> B{"షరతు సత్యమా?"}
B -->|అవును| C["📤 IF బ్లాక్ అమలు చేయండి"]
B -->|కాదు| D["📥 ELSE బ్లాక్ అమలు చేయండి"]
C --> E["✅ ఒక మార్గం తీసుకోబడింది"]
D --> E
F["🌐 వాస్తవ ప్రపంచ ఉదాహరణలు"] --> F1["వినియోగదారు లాగిన్ స్థితి"]
F --> F2["వయస్సు నిర్ధారణ"]
F --> F3["ఫారమ్ ధృవీకరణ"]
F --> F4["గేమ్ స్థితి మార్పులు"]
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#e3f2fd
style F fill:#f3e5f5
```
> **ముఖ్య అనుభవం**: If-else పద్ధతితో ఖచ్చితంగా ఒక్క దారి తీసుకుంటారు. ఇది మీ ప్రోగ్రామ్ ఎప్పుడూ ఏదైనా షరతుపై స్పందన కలిగి ఉండటం నిర్ధారిస్తుంది!
## Switch స్టేట్మెంట్
కొన్నిసార్లు మీరు ఒక విలువను బహుళ ఎంపికలతో పోల్చుకోవలసి ఉంటుంది. మీరు అనేక `if..else` స్టేట్మెంట్లను జత చేయవచ్చు కానీ అది స్తంభించిపోతుంది. `switch` స్టేట్మెంట్ బహుళ తేడా ఉన్న విలువల నిర్వహణకు క్లీన్ నిర్మాణం అందిస్తుంది.
ఈ భావన తొలున్న టెలిఫోన్ ఎక్స్చేంజ్‌లలో ఉపయోగించిన మెకానికల్ స్విచ్చింగ్ వ్యవస్థకు సమానం – ఒక ఇన్‌పుట్ విలువ ఏ ప్రత్యేక మార్గాన్ని ఎంచుకోవాలనేదాన్ని నిర్ణయిస్తుంది.
```javascript
switch (expression) {
case x:
// కోడ్ బ్లాక్
break;
case y:
// కోడ్ బ్లాక్
break;
default:
// కోడ్ బ్లాక్
}
```
దీని నిర్మాణం ఇలా ఉంటుంది:
- జావాస్క్రిప్ట్ ఒకసారి వ్యక్తీకరణని (expression) అంచనా వేస్తుంది
- ప్రతి `case` ని చూసి సరిపోలడం చూసుకుంటుంది
- సరిపడ్డప్పుడు ఆ కోడ్ బ్లాక్ నడుపుతుంది
- `break` జావాస్క్రిప్ట్‌ని ఆపి switch నుండి బయటకు పంపుతుంది
- ఎట్టిపరిస్థితిలో cases సరిపోకుండా ఉంటే, `default` బ్లాక్ నడుస్తుంది (మీ దగ్గర ఉంటే)
```javascript
// వారపు రోజుకు స్విచ్ స్టేట్మెంట్ ఉపయోగించి ప్రోగ్రాం
let dayNumber = 2;
let dayName;
switch (dayNumber) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
default:
dayName = "Unknown day";
break;
}
console.log(`Today is ${dayName}`);
```
ఈ ఉదాహరణలో, జావాస్క్రిప్ట్ `dayNumber` ని 2 గా గుర్తించి, `case 2` కనుగొని, `dayName` ని "Tuesday" గా సెట్ చేస్తుంది, ఆపై switch నుండి బయటికెక్కుతుంది. ఫలితం: "Today is Tuesday" కన్సోల్ లో ప్రదర్శించబడింది.
```mermaid
flowchart TD
A["📥 స్విచ్(వ్యక్తీకరణ)"] --> B["🔍 ఒక్కసారి మూల్యాంకనం"]
B --> C{"కేసు 1 సరిపోతుందా?"}
C -->|Yes| D["📋 కేసు 1 అమలు చేయండి"]
C -->|No| E{"కేసు 2 సరిపోతుందా?"}
E -->|Yes| F["📋 కేసు 2 అమలు చేయండి"]
E -->|No| G{"కేసు 3 సరిపోతుందా?"}
G -->|Yes| H["📋 కేసు 3 అమలు చేయండి"]
G -->|No| I["📋 డిఫాల్ట్ అమలు చేయండి"]
D --> J["🛑 బ్రేక్"]
F --> K["🛑 బ్రేక్"]
H --> L["🛑 బ్రేక్"]
J --> M["✅ స్విచ్ నుండి నిష్క్రమించు"]
K --> M
L --> M
I --> M
style A fill:#e3f2fd
style B fill:#fff3e0
style M fill:#e8f5e8
```
✅ ఈ కోడ్ మరియు క్రింది కోడ్ లోని బదిలీ కోసం బ్రౌజర్ కన్సోల్ లో పరీక్షించండి. వేరియబుల్ `a` విలువలని మార్చి `console.log()` లో ఫలితాన్ని గమనించండి.
### 🔄 **Switch స్టేట్మెంట్ నైపుణ్యం: బహుళ ఎంపికలు**
**మీ switch అర్థం చేసుకోవడాన్ని పరీక్షించండి:**
- మీరు `break` స్టేట్మెంట్ మర్చిపోయినట్లయితే ఏం జరుగుతుంది?
- మీరు ఎప్పుడు బహుళ `if-else` బదులు `switch` వాడతారు?
- మీరు అన్ని అవకాశాలను కప్పుకున్నట్టు అనుకున్నా, ఎందుకు `default` వాడడం మంచిది?
```mermaid
pie title "ప్రతి నిర్ణయ నిర్మాణాన్ని ఎప్పుడు ఉపయోగించాలి"
"సింపుల్ if-else" : 40
"సంక్లిష్ట if-else చైన్లు" : 25
"స్విచ్ స్టేట్మెంట్లు" : 20
"టెర్నరీ ఆపరేటర్స్" : 15
```
> **మంచి ప్రాక్టీస్**: ఒక వేరియబుల్‌ను బహుళ ప్రత్యేక విలువలతో పోల్చేటప్పుడు `switch` ఉపయోగించండి. పర్యాయాలను పరీక్షించేటప్పుడు లేదా క్లిష్ట పరిస్థితుల కోసం `if-else` వాడండి!
## తార్కిక ఆపరేటర్లు మరియు బూలియన్‌లు
క్లిష్ట నిర్ణయాలకు ఒకేసారి పలు పరిస్థితులను అంచనా వేసోవలసి ఉంటుంది. బూలియన్ బోధనలో మత్తుగా లాజికల్ వ్యక్తీకరణలను కలుపుతూ, ప్రోగ్రామింగ్‌లో తార్కిక ఆపరేటర్లు పలు బూలియన్ షరతులను కలుపుతాయి.
ఈ ఆపరేటర్లు సరళమైన సత్య/అసత్య అంచనాలను సంయోజించి మెలుకువైన షరతు లాజిక్ సృష్టించడానికి వీలు కల్పిస్తాయి.
| ప్రతీక | వివరణ | ఉదాహరణ |
| ------ | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- |
| `&&` | **తార్కిక AND**: రెండు బూలియన్ వ్యక్తీకరణలను పోల్చి రెండూ true అయితే మాత్రమే true ఇస్తుంది | `(5 > 3) && (5 < 10) // రెండూ true కాబట్టి true ఇస్తుంది` |
| `\|\|` | **తార్కిక OR**: రెండు బూలియన్ వ్యక్తీకరణలను పోల్చి కనీసం ఒకటి true అయితే true ఇస్తుంది | `(5 > 10) \|\| (5 < 10) // ఒకటి false, ఇంకోటి true కావడం వల్ల true ఇస్తుంది` |
| `!` | **తార్కిక NOT**: ఒక బూలియన్ వ్యక్తీకరణకు వ్యతిరేకమైన విలువ ఇస్తుంది | `!(5 > 10) // 5 పెద్దది కాదు కాబట్టి "!" తో true అవుతుంది` |
ఈ ఆపరేటర్లతో మీరు పరిస్థితులను ఈ విదంగా కలుపుకోవచ్చు:
- AND (`&&`) అంటే రెండు పరిస్థితులు నిజం కావాలి
- OR (`||`) అంటే కనీసం ఒకటి నిజం కావాలి
- NOT (`!`) నిజం ని అబద్ధంగా, అబద్ధాన్ని నిజంగా మార్చుతుంది
```mermaid
flowchart LR
A["🔗 లాజికల్ ఆపరేటర్లు"] --> B["&& మరియు"]
A --> C["|| లేదా"]
A --> D["! కాదు"]
B --> B1["రెండు కూడా నిజం కావాలి"]
B --> B2["true && true = true"]
B --> B3["true && false = false"]
C --> C1["కనీసం ఒకటి నిజం"]
C --> C2["true || false = true"]
C --> C3["false || false = false"]
D --> D1["విలువను మళ్లించు"]
D --> D2["!true = false"]
D --> D3["!false = true"]
E["🌍 వాస్తవ ఉదాహరణలు"] --> E1["వయస్సు >= 18 && లైసెన్స్ ఉందా"]
E --> E2["isWeekend || isHoliday"]
E --> E3["!isLoggedIn"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
## తార్కిక ఆపరేటర్లతో షరతులు మరియు నిర్ణయాలు
మామూలు ఉదాహరణతో ఈ తార్కిక ఆపరేటర్లను చూద్దాం:
```javascript
let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // ల్యాప్‌టాప్ ధర 20 శాతం తగ్గింపు
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
// పరిస్థితి సత్యం. ఈ బ్లాక్‌లోని కోడ్ అమలు అవుతుంది.
console.log("Getting a new laptop!");
} else {
// పరిస్థితి అబద్ధం. ఈ బ్లాక్‌లోని కోడ్ అమలు అవుతుంది.
console.log("Can't afford a new laptop, yet!");
}
```
ఈ ఉదాహరణలో: మనం 20% డిస్కౌంట్ ధర (640) లెక్కించాము, తరువాత మన అందుబాటులో ఉన్న డబ్బు సంపూర్ణ ధర లేదా తగ్గింపు ధర అందుబాటులో ఉందో అంచనా వేస్తాం. 600 తగ్గింపు ధర 640 కి తక్కువగా ఉండటం వల్ల షరతు సత్యం అవుతుంది.
### 🧮 **తార్కిక ఆపరేటర్స్ పరీక్ష: షరతులను కలపడం**
**మీ తార్కిక ఆపరేటర్ అవగాహనని పరీక్షించండి:**
- `A && B` లో A false అయితే ఏం జరుగుతుంది? B అంచనా వేస్తేనా?
- మీరు ఎప్పుడైతే మూడు ఆపరేటర్ల (&&, ||, !) అవసరం అవుతుందో ఒక పరిస్థితిని ఊహించగలరా?
- `!user.isActive` మరియు `user.isActive !== true` మధ్య తేడా ఏమిటి?
```mermaid
stateDiagram-v2
[*] --> EvaluateA: A && B
EvaluateA --> CheckB: A నిజం
EvaluateA --> ReturnFalse: A తప్పు
CheckB --> ReturnTrue: B నిజం
CheckB --> ReturnFalse: B తప్పు
[*] --> EvaluateC: A || B
EvaluateC --> ReturnTrue: A నిజం
EvaluateC --> CheckD: A తప్పు
CheckD --> ReturnTrue: B నిజం
CheckD --> ReturnFalse: B తప్పు
note right of EvaluateA
షార్ట్-సిర్క్యూట్ మూల్యాంకనం:
A తప్పు అయితే, B ని ఎప్పుడూ తనిఖీ చేయరు
end note
```
> **పనితీరు చిట్కా**: జావాస్క్రిప్ట్ "షార్ట్-సర్జిట్ అంచన" ఉపయోగిస్తుంది - `A && B` లో, A false అయితే B అంచనా వేయబడదు. దీనిని మీ ప్రయోజనానికి ఉపయోగించండి!
### విరోధి ఆపరేటర్
ఎప్పుడో మాట, మీరు ఎప్పుడో విషయం నిజం కాకపోవడాన్ని విలువచేయాలనుకోవచ్చు. ఉదాహరణకు "వాడుకరి లాగిన్ అయ్యారా?" అడగకుండా "వాడుకరి లాగిన్ కాలేదా?" అని అడగడం. సూచిక గుర్తు (`!`) ఆ తీరు లాజిక్‌ను కొంత తేలికగా మార్చిస్తుంది.
```javascript
if (!condition) {
// నిబంధన తప్పు అయితే నడుస్తుంది
} else {
// నిబంధన సత్యం అయితే నడుస్తుంది
}
```
`!` ఆపరేటర్ అంటే "వ్యతిరేకం" – ఏదైతే `true` అయితే `!` వదిలితే `false` అవుతుంది, మరియు ఉల్టా కూడా.
### టెర్నరీ వ్యక్తీకరణలు
సరళమైన షరతు విధానాల కోసం, జావాస్క్రిప్ట్ **టెర్నరీ ఆపరేటర్** అందిస్తుంది. ఈ సంక్షిప్త సింటాక్స్ ఒక్క లైనులో షరతు బాధ్యతను వ్రాయడానికి ఉపయుక్తం, ఇది ఒక షరతు ఆధారంగా రెండు విలువల మధ్య ఒకదాన్ని కేటాయించడానికి ఉపయోగపడుతుంది.
```javascript
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
```
ఇది ఒక ప్రశ్నలా చదవండి: "ఈ షరతు true అయితే ఈ విలువ వాడు. false అయితే ఆ విలువ వాడు."
క్రింది ఉదాహరణ చూడండి:
```javascript
let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
```
✅ కొంచెం సమయం తీసుకుని ఈ కోడ్ పునరుద్ఘహరించండి. ఈ ఆపరేటర్లు ఎలా పని చేస్తున్నాయో మీకు అర్థమవుతుందా?
ఈ లైన్ ఇలా చెప్పటం: "`firstNumber` `secondNumber` కంటే ఎక్కువనా? అవును అయితే `biggestNumber` లో `firstNumber` ఉంచు. లేదంటే `biggestNumber` లో `secondNumber` ఉంచు."
టెర్నరీ ఆపరేటర్ కింది సంప్రదాయ `if..else` స్టేట్మెంట్ కంటే కేవలం సంక్షిప్త రూపం:
```javascript
let biggestNumber;
if (firstNumber > secondNumber) {
biggestNumber = firstNumber;
} else {
biggestNumber = secondNumber;
}
```
రెండు పద్ధతులు ఒకే ఫలితాన్ని ఇస్తాయి. టెర్నరీ ఆపరేటర్ సంక్షిప్తంగా ఉంటుంది, సాంప్రదాయ if-else కంటే క్లిష్ట పరిస్థితులలో చదవటానికి కొంత సులభమే.
```mermaid
flowchart LR
A["🤔 త్రిముఖ ఆపరేటర్"] --> B["నిబంధన ?"]
B --> C["సత్యమైతే విలువ :"]
C --> D["అసత్యమైతే విలువ"]
E["📝 సంప్రదాయ If-Else"] --> F["if (నిబంధన) {"]
F --> G[" return సత్యమైతే విలువు"]
G --> H["} else {"]
H --> I[" return అసత్యమైతే విలువు"]
I --> J["}"]
K["⚡ ఎప్పుడు ఉపయోగించాలి"] --> K1["సాధారణ ఆమోదాలు"]
K --> K2["చిన్న నిబంధనలు"]
K --> K3["ఇన్‌లైన్ నిర్ణయాలు"]
K --> K4["return స్టేట్మెంట్లు"]
style A fill:#e3f2fd
style E fill:#fff3e0
style K fill:#e8f5e8
```
---
## 🚀 సవాలు
మొదట తార్కిక ఆపరేటర్లు వాడి, తరువాత టెర్నరీ వ్యక్తీకరణ వాడి వ్రాసిన ఒక ప్రోగ్రామ్ తయారు చేయండి. మీకు ఇష్టమైన సింటాక్స్ ఏది?
---
## GitHub Copilot ఏజెంట్ సవాలు 🚀
ఈ సవాలను పూర్తి చేయడానికి ఏజెంట్ మోడ్ ఉపయోగించండి:
**వివరణ:** ఈ పాఠంలో నిర్ణయాలు తీసుకునే అనేక భావాలను చూపించే సమగ్ర గ్రేడ్ లెక్కింపు ప్రోగ్రామ్ రాయండి, ఇందులో if-else స్టేట్మెంట్లు, switch స్టేట్మెంట్లు, తార్కిక ఆపరేటర్లు మరియు టెర్నరీ వ్యక్తీకరణలు ఉంటాయి.
**ప్రాంప్ట్:** ఒక విద్యార్థి సంఖ్యాత్మక స్కోర్ (0-100) ను తీసుకుని, క్రింది ప్రమాణాల ప్రకారం వారి లెటర్ గ్రేడ్ నిర్ణయించే జావాస్క్రిప్ట్ ప్రోగ్రామ్ వ్రాయండి:
- A: 90-100
- B: 80-89
- C: 70-79
- D: 60-69
- F: 60 కి దిగువన
అవసరాలు:
1. లెటర్ గ్రేడ్ నిర్ణయానికి if-else స్టేట్మెంట్ ఉపయోగించండి
2. విద్యార్థి ఉత్తీర్ణత సాధించినట్టునో (గ్రేడ్ >= 60) మరియు ఆర్డర్లు ఉన్నాయో (గ్రేడ్ >= 90) చెక్ చేయడానికి లాజికల్ ఆపరేటర్లను వాడండి
3. ప్రతి లెటర్ గ్రేడ్ కొరకు నిర్దిష్ట అభిప్రాయాన్ని పంచేందుకు స్విచ్ స్టేట్‌మెంట్‌ను వాడండి
4. తదుపరి కోర్సుకు విద్యార్థి అర్హుడా అనేదాన్ని నిర్ణయించడానికి టెర్నరీ ఆపరేటర్ వాడండి (గ్రేడ్ >= 70)
5. స్కోరు 0 మరియు 100 మధ్య ఉందని నిర్ధారించడానికి ఇన్‌పుట్ చెలామణీని చేర్చండి
ముఖ్య సంఘర్షణలుగా 59, 60, 89, 90 మరియు చెలామణి కాని ఇన్‌పుట్‌లతో మీ ప్రోగ్రామ్ను పరీక్షించండి.
ఇంకా సమాచారం కోసం [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ఇక్కడ చూడండి.
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/12)
## సమీక్ష & స్వీయ అధ్యయనం
యూజర్‌కు అందుబాటులో ఉన్న అనేక ఆపరేటర్లు గురించి మరింత తెలుసుకోండి [MDNలో](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
జోష్ కామౌ యొక్క అద్భుతమైన [ఆపరేటర్ లుకప్](https://joshwcomeau.com/operator-lookup/)ని గమనించండి!
## అసైన్మెంట్
[Operators](assignment.md)
---
## 🧠 **మీ నిర్ణయ-making టూల్‌కిట్ సారాంశం**
```mermaid
graph TD
A["🎯 జావాస్క్రిప్ట్ నిర్ణయాలు"] --> B["🔍 బూలియన్ లాజిక్"]
A --> C["📊 షరతుల స్టేట్మెంట్లు"]
A --> D["🔗 లాజికల్ ఆపరేటర్లు"]
A --> E["⚡ అభివృద్ధి చెందిన నమూనాలు"]
B --> B1["true/false విలువలు"]
B --> B2["తులనా ఆపరేటర్లు"]
B --> B3["సత్యత్వ సిద్ధాంతాలు"]
C --> C1["if స్టేట్మెంట్లు"]
C --> C2["if-else గొలుసులు"]
C --> C3["switch స్టేట్మెంట్లు"]
D --> D1["&& (AND)"]
D --> D2["|| (OR)"]
D --> D3["! (NOT)"]
E --> E1["టెర్నరీ ఆపరేటర్"]
E --> E2["షార్ట్-సర్క్యూట్ మూల్యాంకనం"]
E --> E3["సంక్లిష్ట షరతులు"]
F["💡 కీలక సూత్రాలు"] --> F1["స్పష్టమైన చదవదగిన షరతులు"]
F --> F2["అనువైన తులన శైలి"]
F --> F3["శ్రేయోన్నత ఆపరేటర్ ప్రాధాన్యత"]
F --> F4["ప్రభావవంతమైన మూల్యాంకన క్రమం"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
---
## 🚀 మీ జావాస్క్రిప్ట్ నిర్ణయ-making మాస్టరీ టైమ్‌లైన్
### ⚡ **మరుసటి 5 నిమిషాల్లో మీరు చేయగలవు**
- [ ] మీ బ్రౌజర్ కన్సోల్‌లో పోలిక ఆపరేటర్లతో అభ్యాసం చేయండి
- [ ] మీ వయస్సును చెక్ చేసే సాధారణ if-else స్టేట్‌మెంట్ రాయండి
- [ ] ఒక if-else ను టెర్నరీ ఆపరేటర్ ఉపయోగించి మళ్లీ రాయడాన్ని ప్రయత్నించండి
- [ ] వేర్వేరు “ట్రూతీ” మరియు “ఫాల్సీ” విలువలతో ఏమి జరుగుతుందో పరీక్షించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పోస్ట్-పాఠం క్విజ్ పూర్తి చేసి ఏదైనా చిక్కిన భావనలను సమీక్షించండి
- [ ] GitHub Copilot ఛాలెంజ్ నుండి సమగ్ర గ్రేడ్ క్యాలిక్యులేటర్ నిర్మించండి
- [ ] నిజ జీవిత పరిస్థితికి సరళమైన నిర్ణయ మొక్క (decision tree) సృష్టించండి (ఉదాహరణకు ఏమి ధరిస్తామో ఎంచుకోవడం)
- [ ] అనేక పరిస్థితులను లాజికల్ ఆపరేటర్లతో కలిపి అభ్యాసం చేయండి
- [ ] వేర్వేరు ఉపయోగాల కొరకు స్విచ్ స్టేట్మెంట్లను ప్రయోగించండి
### 📅 **మీ వారాంతపు లాజిక్ మాస్టరీ**
- [ ] సృజనాత్మక ఉదాహరణలతో ఆపరేటర్ల అసైన్మెంట్ పూర్తి చేయండి
- [ ] వేర్వేరు షరతుల నిర్మాణాలతో మినీ క్విజ్ అప్లికేషన్ రూపొందించండి
- [ ] అనేక ఇన్‌పుట్ షరతులను చెక్ చేసే ఫారమ్ వాలిడేటర్ సృష్టించండి
- [ ] జోష్ కామౌ యొక్క [ఆపరేటర్ లుకప్](https://joshwcomeau.com/operator-lookup/) వ్యాయామాలను అభ్యసించండి
- [ ] ప్రస్తుతం ఉన్న కోడ్‌ను మరింత తగిన షరతుల నిర్మాణాల కోసం పునఃరూపకల్పన చేయండి
- [ ] షార్ట్-సర్క్యూట్ ఇవాల్యుషన్ మరియు పనితీరు ప్రభావాలను అధ్యయనం చేయండి
### 🌟 **మీ నెలపాటు పరివర్తనం**
- [ ] సంక్లిష్టమైన nested షరతులను సంపూర్ణంగా ఆలస్యం లేకుండా నేర్చుకోండి మరియు కోడ్ చదవటానికి సులభతరం చేయండి
- [ ] నైపుణ్యమయిన నిర్ణయ-making లాజిక్‌తో అప్లికేషన్ నిర్మించండి
- [ ] ప్రస్తుత ప్రాజెక్టులలో షరతుల లాజిక్ మెరుగుపరచుతూ ఓపెన్ సోర్స్‌కు సహాయం చేయండి
- [ ] ఇతరులకు వేర్వేరు షరతుల నిర్మాణాలు మరియు వాటిని ఎప్పుడు వాడాలో బోధించండి
- [ ] షరతుల లాజిక్‌కు ఫంక్షనల్ ప్రోగ్రామింగ్ దారులను అన్వేషించండి
- [ ] షరతుల ఉత్తమ విధానాల కోసం వ్యక్తిగత సూచిక గైడ్ సృష్టించండి
### 🏆 **దశాంతమైన నిర్ణయ-making ఛాంపియన్ చెక్-ఇన్**
**మీ లాజికల్ ఆలోచన మాస్టరీని సంబరంగా జరుపుకోండి:**
- మీరు విజయవంతంగా అమలు చేసిన అత్యంత సంక్లిష్టమైన నిర్ణయ లాజిక్ ఏమిటి?
- ఏ షరతుల నిర్మాణం మీకు అత్యంత సహజంగా అర్థమవుతుంది మరియు ఎందుకు?
- లాజికల్ ఆపరేటర్ల గురించి నేర్చుకున్నことで మీ సమస్య పరిష్కార దశపై ఎలా ప్రభావం వచ్చింది?
- ఏ నిజ జీవిత అప్లికేషన్ నైపుణ్యపూర్వక నిర్ణయ-making లాజిక్ నుంచి ప్రయోజనం పొందుతుంది?
```mermaid
journey
title మీ లాజికల్ ఆలోచన అభివృద్ధి
section ఈ రోజు
బూలియన్ గందరగోళం: 3: You
ఇఫ్-ఎల్స్ అవగాహన: 4: You
ఆపరేటర్ పరిచయం: 5: You
section ఈ వారము
సంక్లిష్ట పరిస్థితులు: 4: You
స్విచ్ నైపుణ్యం: 5: You
తార్కిక మిశ్రమాలు: 5: You
section వచ్చే నెల
అధునాతన నమూనాలు: 5: You
కార్యపాటవ గుర్తింపు: 5: You
ఇతరులను బోధించడం: 5: You
```
> 🧠 **మీరు డిజిటల్ నిర్ణయ-making కళను నైపుణ్యంగా ఆర్జించారు!** ప్రతి ఇంటరాక్టివ్ అప్లికేషన్ వినియోగదారుల చర్యలు మరియు మార్పుల పరిస్థితులకు తెలివిగా స్పందించడానికి షరతుల లాజిక్ పై ఆధారపడి ఉంటుంది. ఇప్పుడు మీరు తెలుసుకున్నారు మీ ప్రోగ్రామ్లు ఎలా ఆలోచించాలో, మూల్యాంకన చేయాలో, మరియు సరైన ప్రతిస్పందనలను ఎంపిక చేసుకోవాలో. ఈ లాజికల్ పునాది మీ నిర్మించే ప్రతీ డైనమిక్ అప్లికేషన్‌కు శక్తినిస్తుంది! 🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించారు. మేము సంతృప్తికరమైన ఖచ్చితత్వం కోసం ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా తప్పిదాలు ఉండవచ్చు. స్వదేశీ భాషలోని అసలు పత్రం అధికారిక మూలంగా తీసుకోవాలి. ముఖ్యమైన సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదాన్ని సూచించబడతుంది. ఈ అనువాద ఉపయోగంలో నుంచే వచ్చిన ఏదైనా అపార్థాలు లేదా తప్పుదారులు కారణంగా మేము బాధ్యులు కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

120
translations/te/2-js-basics/3-making-decisions/assignment.md
Unescape View File

@ -0,0 +1,120 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "ffe366b2d1f037b99fbadbe1dc81083d",
"translation_date": "2026-01-08T12:55:07+00:00",
"source_file": "2-js-basics/3-making-decisions/assignment.md",
"language_code": "te"
}
-->
# నిర్ణయాలు తీసుకోవడం: విద్యార్థి గ్రేడ్ ప్రాసెసర్
## నేర్చుకునే లక్ష్యాలు
ఈ అసైన్‌మెంట్‌లో, మీరు ఈ పాఠం నుండి నిర్ణయాలను తీసుకోవడంపై కొత్తగా నేర్చుకున్న కాన్సెప్ట్‌లను ప్రాక్టీస్ చేయబోతున్నారు ఒక ప్రోగ్రామ్ రూపొందించడం ద్వారా ఇది వివిధ గ్రేడింగ్ సిస్టమ్‌ల నుంచి విద్యార్థుల గ్రేడ్‌లను ప్రాసెస్ చేస్తుంది. మీరు `if...else` స్టేట్‌మెంట్‌లు, సరిపోలిక ఆపరేటర్లు, మరియు లాజికల్ ఆపరేటర్లను ఉపయోగించి ఎవరు తమ కోర్సులు পাশ్ అయ్యారో నిర్ణయించుకుంటారు.
## సవాలు
మీరు ఒక పాఠశాల కోసం పని చేస్తున్నారు, ఇది ఇటీవల మరొక సంస్థతో విలీనమైంది. ఇప్పుడు మీరు రెండు పూర్తిగా వేరే గ్రేడింగ్ సిస్టమ్‌ల నుంచి విద్యార్థుల గ్రేడ్‌లను ప్రాసెస్ చేయవలసి ఉంది మరియు ఎవరు পাশ్ అవుతున్నారో నిర్ణయించాలి. ఇది షరతుల లాజిక్ ప్రాక్టీస్ చేయడానికి అద్భుత అవకాశం!
### గ్రేడింగ్ సిస్టమ్‌లను అర్థం చేసుకోవడం
#### మొదటి గ్రేడింగ్ సిస్టమ్ (సంఖ్యల రూపంలో)
- గ్రేడ్‌లు 1-5 మధ్య సంఖ్యలుగా ఉంటాయి
- **పాస్ గ్రేడ్**: 3 మరియు అంతకంటే ఎక్కువ (3, 4, లేదా 5)
- **ఫెయిల్ గ్రేడ్**: 3కి తక్కువ (1 లేదా 2)
#### రెండవ గ్రేడింగ్ సిస్టమ్ (అక్షరాల్లో)
- గ్రేడ్‌లు అక్షరాలతో ఉంటాయి: `A`, `A-`, `B`, `B-`, `C`, `C-`
- **పాస్ గ్రేడ్‌లు**: `A`, `A-`, `B`, `B-`, `C`, `C-` (ఎన్నీ పాస్)
- **గమనిక**: ఈ సిస్టమ్‌లో `D` లేదా `F` వంటి ఫెయిల్ గ్రేడ్‌లు లేవు
### మీ పని
కింద ఇచ్చిన `allStudents` అనే అర్రే నుండి అన్ని విద్యార్థుల వారి గ్రేడ్‌లను సూచిస్తూ, వారి సంబంధిత గ్రేడింగ్ సిస్టమ్‌ల ప్రకారం పాస్ అయ్యే విద్యార్థులను కలిగిన కొత్త అర్రే `studentsWhoPass` ని నిర్మించండి.
```javascript
let allStudents = [
'A', // లెటర్ గ్రేడ్ - పాసింగ్
'B-', // లెటర్ గ్రేడ్ - పాసింగ్
1, // సంఖ్యా గ్రేడ్ - ఫెయిలింగ్
4, // 숫자리 గ్రేడ్ - పాసింగ్
5, // 숫자리 గ్రేడ్ - పాసింగ్
2 // 숫자리 గ్రేడ్ - ఫెయిలింగ్
];
let studentsWhoPass = [];
```
### దశల వారీగా విధానం
1. `allStudents` అర్రేలో ప్రతి గ్రేడ్‌ మీద **లూప్ ఏర్పాటు** చేయండి
2. **గ్రేడ్ రకాన్ని తనిఖీ చేయండి** (సంఖ్యా లేదా స్ట్రింగ్ అని)
3. **సరైన గ్రేడింగ్ సిస్టమ్ నిబంధనలను వర్తింపచేయండి**:
- సంఖ్యల కోసం: గ్రేడ్ >= 3 అని చెక్ చేయండి
- స్ట్రింగ్‌ల కోసం: ఇది సరైన పాస్ అయ్యే అక్షర గ్రేడ్‌లలో ఉందా అని చెక్ చేయండి
4. **పాస్ అయ్యే గ్రేడ్‌లను** `studentsWhoPass` అర్రేని జతచేయండి
### సహాయక కోడ్ సాంకేతికతలు
ఈ పాఠంలో నేర్చుకున్న జావాస్క్రిప్ట్ కాన్సెప్ట్‌లను ఉపయోగించండి:
- **typeof ఆపరేటర్**: `typeof grade === 'number'` అనే సంగతి చెక్ చేయడానికి ఇది ఉపయోగించండి
- **సామాన్య సరిపోలిక ఆపరేటర్లు**: సంఖ్యా గ్రేడ్‌లను సరిపోల్చడానికి `>=`
- **లాజికల్ ఆపరేటర్లు**: అనేక అక్షర గ్రేడ్ పరిస్థితులను తనిఖీ చేయడానికి `||`
- **if...else స్టేట్‌మెంట్‌లు**: వేర్వేరు గ్రేడింగ్ సిస్టమ్‌లను నిర్వహించడానికి
- **అర్రే క్రమాల పద్ధతులు**: పాస్ అయ్యే గ్రేడ్‌లను కొత్త అర్రేలో జత చేయడానికి `.push()`
### అంచనా ఫలితము
మీ ప్రోగ్రామ్ నడిపినపుడు, `studentsWhoPass` లో ఉండవలసినవి: `['A', 'B-', 4, 5]`
**ఏందుకు ఈ గ్రేడ్‌లు పాస్ అవుతున్నాయంటే:**
- `'A'` మరియు `'B-'` సరైన అక్షర గ్రేడ్‌లు (ఈ సిస్టమ్‌లో అన్ని అక్షర గ్రేడ్‌లు పాస్)
- `4` మరియు `5` సంఖ్యా గ్రేడ్‌లు >= 3
- `1` మరియు `2` ఫెయిల్ అవుతున్నాయి ఎందుకంటే ఇవి 3కి తక్కువ సంఖ్ాళ గ్రేడ్‌లు
## మీ పరిష్కారాన్ని పరీక్షించడం
విభిన్న సందర్భాలలో మీ కోడ్ పరీక్షించండి:
```javascript
// విభిన్న గ్రేడ్ సంయోజనాలతో పరీక్షించండి
let testGrades1 = ['A-', 3, 'C', 1, 'B'];
let testGrades2 = [5, 'A', 2, 'C-', 4];
// ఏవైనా చెల్లుబాటైన గ్రేడ్ సంయోజనాలతో మీ పరిష్కారం పనిచేయాలి
```
## అదనపు సవాలు
బేసిక్ అసైన్‌మెంట్ పూర్తిచేసిన తర్వాత, ఈ విస్తరణలను ప్రయత్నించండి:
1. **నియమాలకు సరిపోలని గ్రేడ్‌లను** ధ్రువీకరించండి (ఉదాహరణకు నెగటివ్ సంఖ్యలు లేదా అమాన్య అక్షరాలు)
2. **సంఖ్యాత్మక గణాంకాలు** చేయండి: ఎంత మంది విద్యార్థులు పాస్ అయిపోయారో మరియు ఫెయిల్ అయిపోయారో లెక్కించండి
3. **గ్రేడ్ రూపాంతరం**: అన్ని గ్రేడ్‌లను ఒకే సంఖ్యా సిస్టమ్‌కు మార్చండి (A=5, B=4, C=3, మొదలైనవి)
## రుబ్రిక్
| ప్రమాణాలు | అద్భుతం (4) | సాధారణం (3) | అభివృద్ధి చెందుతోంది (2) | ప్రారంభం (1) |
|----------|---------------|----------------|----------------|---------------|
| **ఫంక్షనాలిటీ** | ప్రోగ్రామ్ రెండు సిస్టమ్‌ల నుండి అన్ని పాస్ అయ్యే గ్రేడ్‌లను సరిగా గుర్తిస్తుంది | చిన్న సమస్యలు లేదా అతి చిన్న కేసులతో ప్రోగ్రామ్ పనిచేస్తుంది | ప్రోగ్రామ్ భాగంగా పనిచేస్తోంది కానీ లాజిక్ లో లోపాలు ఉన్నాయి | ప్రోగ్రామ్ తీవ్రమైన లోపాలు కలిగి లేదా నడవట్లేదు |
| **కోడ్ నిర్మాణం** | శుభ్రమైన, బాగా సర్దుబాటు చేసిన కోడ్ సరైన if...else లాజిక్ తో | సరైన స్ట్రక్చర్ మంచి షరతు స్టేట్‌మెంట్‌లతో | కొంత సంఖ్యలో వ్యవస్థాపనా సమస్యలతో అంగీకారయోగ్యమైన నిర్మాణం | పొరపాటు నిర్మాణం, లాజిక్ అనుసరించడం కఠినం |
| **కాన్సెప్ట్‌ల వాడకం** | సరిపోలిక ఆపరేటర్లు, లాజికల్ ఆపరేటర్లు, మరియు షరతుల స్టేట్‌మెంట్‌లను సమర్థవంతంగా ఉపయోగిస్తుంది | పాఠంలో నేర్చుకున్న సాధారణ కాన్సెప్ట్‌లను బాగా ఉపయోగిస్తుంది | కొంత పాఠం కాన్సెప్ట్‌లు ఉపయోగిస్తుంది కానీ ముఖ్యాంశాలు మిస్సవుతున్నాయి | పాఠం కాన్సెప్ట్‌ల పరిమిత ఉపయోగం |
| **సమస్య పరిష్కారం** | సమస్యపై స్పష్టం స్తాయిలో అర్థం చూపిస్తుంది మరియు అందమైన పరిష్కార విధానం సూచిస్తుంది | మంచి సమస్య పరిష్కారం మరియు బలమైన లాజిక్ | కొంత క్లారిటీతో సమస్య పరిష్కార విధానం | అస్పష్టం, అర్థం తెలపలేకపోతుంది |
## సబ్మిషన్ మార్గదర్శకాలు
1. **మీ కోడ్‌ను** ఉదాహరణలతో పూర్తిగా పరీక్షించండి
2. **మీ లాజిక్‌ను** వివరించిన కామెంట్లు జోడించండి, ముఖ్యంగా షరతుల స్టేట్‌మెంట్‌ల కొరకు
3. **ఫలితాలు** అంచనా ఫలితాలతో సరిపోలుతోందో చూడండి: `['A', 'B-', 4, 5]`
4. **అనుకోని డేటా రకాలు లేదా ఖాళీ అర్రే లాంటివి** ఎడ్జ్ కేస్‌లను పరిగణలోకి తీసుకోండి
> 💡 **ప్రొ టిప్**: సులభంగా ప్రారంభించండి! మొదట ప్రాథమిక ఫంక్షనాలిటీని నిర్వహించండి, తర్వాత మరింత సంక్లిష్టమైన ఫీచర్లను జోడించండి. ఈ పాఠంలో నేర్చుకున్న సాధనాలతో నిర్ణయాలు తీసుకునే లాజిక్‌ను ప్రాక్టీస్ చేయడం ముఖ్య లక్ష్యం.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**చూసికోండి**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువదించబడి ఉంది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తూనే ఉన్నప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో పొరపాట్లు లేదా తప్పుదోవలు ఉండవచ్చు. మౌలిక భాషలోని మూల డాక్యుమెంట్‌ను అధికారిక ప్రామాణిక వనరుగా భావించండి. ముఖ్యమైన సమాచారానికి, తగిన నిపుణుల చేత చేసిన అనువాదాన్ని విశేషించి పరిగణించాలి. ఈ అనువాదం వాడకంవల్ల జరిగే ఏవైనా అపసమజ్ఞానాలు లేదా తప్పు అర్థాలను మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

750
translations/te/2-js-basics/4-arrays-loops/README.md
Unescape View File

@ -0,0 +1,750 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "1710a50a519a6e4a1b40a5638783018d",
"translation_date": "2026-01-08T12:59:56+00:00",
"source_file": "2-js-basics/4-arrays-loops/README.md",
"language_code": "te"
}
-->
# JavaScript ప్రాథమికాలు: శ్రేణులు మరియు పునరావృతాలు
![JavaScript ప్రాథమికాలు - శ్రేణులు](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.te.png)
> స్కెచ్నోట్ [టొమోమీ ఇమురా](https://twitter.com/girlie_mac) ద్వారా
```mermaid
journey
title మీ అర్రేస్ & లూప్స్ సాహసము
section అర్రే మౌలికాలు
అర్రే లను సృష్టించడం: 5: You
అంశాలను చేరుకోవడం: 4: You
అర్రే పద్ధతులు: 5: You
section లూప్ నైపుణ్యం
ఫర్ లూప్స్: 4: You
వైల్ లూప్స్: 5: You
ఆధునిక సింటాక్స్: 4: You
section డేటా ప్రాసెసింగ్
అర్రే + లూప్స్: 5: You
నిజజీవిత అనువర్తనాలు: 4: You
పనితీరు ఆప్టిమైజేషన్: 5: You
```
## ముందు-పాఠం క్విజ్
[మునుపటి పాఠం క్విజ్](https://ff-quizzes.netlify.app/web/quiz/13)
వెబ్‌సైట్లలో షాపింగ్ కార్ట్ వస్తువులను ఎలా ట్రాక్ చేస్తారో లేదా మీ స్నేహితుల జాబితాను ఎలా చూపిస్తారో మీరు ఎప్పుడైనా ఆలోచించారా? అటువంటి సందర్భాల్లో శ్రేణులు మరియు పునరావృతాలు ఉపయోగపడతాయి. శ్రేణులు అనేవి అనేక సమాచారం భాగాలను ఉంచే డిజిటల్ కంటైనర్లు లాగా ఉంటాయి, మరియు పునరావృతాలు ఆ డాటాను పునరావృతం లేకుండా సమర్థంగా ఉపయోగించుకోవడానికి సహాయపడతాయి.
ఈ రెండు సూత్రాలు కలిసి మీ ప్రోగ్రాములలో సమాచారాన్ని నిర్వహించే ప్రాధమిక నిర్మాణాన్ని ఏర్పరుస్తాయి. మీరు ప్రతి ఒక్క దశను చేతితో వ్రాయడం నుండి వేలు వెయ్యాలా లేదా వేల సంఖ్యలో అంశాలను త్వరగా ప్రాసెస్ చేయగల తెలివైన, సమర్థవంతమైన కోడ్ సృష్టించే దశకు ఎలా వెళ్ళాలో నేర్చుకుంటారు.
ఈ పాఠం చివరలో, మీరు కొద్ది కోడ్ లైన్లతో క్లిష్టమైన డేటా పనులను ఎలా సాధించాలో అర్థమవుతుంది. వస్తువులు మరియు పునరావృతాల పాఠాల ఈ ముఖ్యమైన భాగాలను అన్వేషిద్దాం.
[![ష్రేణులు](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "ష్రేణులు")
[![పునరావృతాలు](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "పునరావృతాలు")
> 🎥 పై చిత్రాలను క్లిక్ చేసి ష్రేణులు మరియు పునరావృతాల గురించి వీడియోగ్రాఫ్ చూడండి.
> మీరు ఈ పాఠాన్ని [మైక్రోసాఫ్ట్ లెర్న్](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) లోనూ తీసుకోవచ్చు!
```mermaid
mindmap
root((డేటా ప్రాసెసింగ్))
Arrays
Structure
Square brackets syntax
శూన్య-ఆధారమైన సూచిక
డైనమిక్ సైజింగ్
Operations
push/pop
shift/unshift
indexOf/includes
Types
సాంఖ్యికాలు arrays
స్ట్రింగ్స్ arrays
మిశ్రమ రకాలు
Loops
For Loops
ఆవర్తనల లెక్కింపు
array ప్రాసెసింగ్
ఊహించదగిన ప్రవাহం
While Loops
షరతు ఆధారిత
తెలియని ఆవర్తనాలు
యూజర్ ఇన్‌పుట్
Modern Syntax
for...of
forEach
ఫంక్షనల్ పద్ధతులు
Applications
Data Analysis
గణాంకాలు
ఫిల్టరింగ్
మార్పులు
User Interfaces
జాబితాలు
మెనూలు
గ్యాలరీలు
```
## శ్రేణులు
శ్రేణులను ఒక డిజిటల్ ఫైలింగ్ కేబినెట్ లాగ భావించండి - ఒక్క ఓ షెల్ఫ్ లో ఒక్క డాక్యుమెంట్ నిల్వ చేయడానికి కాకుండా, మీరు అనేక సంబంధిత అంశాలను ఒకే, నిర్మిత కంటైనర్ లో సుధీర్ఘంగా ఉంచుకోవచ్చు. ప్రోగ్రామింగ్ దృష్టిలో, శ్రేణులు అనేది మీరు అనేక సమాచారం భాగాలను ఒక సక్రమ గూడుబిడ్డు లో నిల్వ చేయడానికి ఆప్షన్ ఇచ్చే కంటైనర్లు.
మీరు ఫోటో గ్యాలరీని లేదా టూ-డూ జాబితాని నిర్మిస్తున్నారో లేదా గేమ్ లో ఉన్న హై స్కోర్లను ట్రాక్ చేస్తున్నారో, శ్రేణులు డేటాను గూడబెట్టడానికి ప్రాధమిక ఆధారం ఇస్తాయి. అవి ఎలా పని చేస్తాయో చూద్దాం.
✅ శ్రేణులు మన చుట్టూ ఎక్కడు ఉన్నాయో చూశారా? ఉదాహరణకి సాలర్లు ప్యానెల్ శ్రేణి గురించి మీరు కొంత ఆలోచించగలరా?
### శ్రేణులు సృష్టించడం
శ్రేణిని సృష్టించడం చాలా సులభమే - కేవలం స్క్వేర్ బ్రాకెట్లను ఉపయోగించండి!
```javascript
// ఖాళీ వరస - వస్తువులు కోసం ఎదురుచూస్తున్న ఖాళీ షాపింగ్ కార్ట్ మాదిరిగా
const myArray = [];
```
**ఇక్కడ ఏమి జరుగుతోంది?**
మీరు స్క్వేర్ బ్రాకెట్ల `[]` ద్వారా ఖాళీ కంటైనర్‌ని సృష్టించారు. ఒక ఖాళీ గ్రంథాలయ షెల్ఫ్ లాగా ఉంది - మీరు ఇందులో ఏ పుస్తకాల్న అయినా ఉంచుకోవడానికి సిద్ధంగా ఉంది.
మీరు ప్రారంభంలోనే మీ శ్రేణిలో ప్రారంభ విలువలను కూడా నింపవచ్చు:
```javascript
// మీ ఐస్ క్రీం షాప్ యొక్క ఫ్లేవర్ మెనూ
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
// ఒక వినియోగదారుడి ప్రొఫైల్ సమాచారం (విభిన్న రకాల డేటాను కలపడం)
const userData = ["John", 25, true, "developer"];
// మీ ప్రియమైన తరగతి కోసం పరీక్షా మార్కులు
const scores = [95, 87, 92, 78, 85];
```
**గమనించదగ్గ వాటి విషయం:**
- ఒకే శ్రేణిలో మీరు పదాలు, సంఖ్యలు, నిజం/అబద్ధ విలువలన్నీ ఉంచుకోవచ్చు
- ఒక్కో అంశాన్ని కామాతో విడగొట్టండి - ఇది సులభం!
- శ్రేణులు సంబంధిత సమాచారాన్ని కలిసి ఉంచడానికి ఉత్తమం
```mermaid
flowchart LR
A["📦 గుణాంకాలు"] --> B["సృష్టించు [ ]"]
A --> C["బహుళ అంశాలను నిల్వ చేయు"]
A --> D["సూచి ద్వారా ప్రాప్తి"]
B --> B1["const arr = []"]
B --> B2["const arr = [1,2,3]"]
C --> C1["సంఖ్యలు"]
C --> C2["సంకేతాలు"]
C --> C3["బూలియన్లు"]
C --> C4["మిశ్రమ రకాలు"]
D --> D1["arr[0] = మొదటి"]
D --> D2["arr[1] = రెండవది"]
D --> D3["arr[2] = మూడవది"]
E["📊 గుణాంక సూచీ"] --> E1["సూచి 0: మొదటి"]
E --> E2["సూచి 1: రెండవది"]
E --> E3["సూచి 2: మూడవది"]
E --> E4["సూచి n-1: చివరి"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
### శ్రేణి సూచికలు (Array Indexing)
ఇదే ఒక్క విషయం మొదటికి అసాధారణంగా అనిపించవచ్చు: శ్రేణులు తమ అంశాలను 0 నుండి నంబర్ చేస్తాయి, 1 నుండి కాదు. ఈ శూన్య ఆధారిత సూచిక విధానం కంప్యూటర్ మెమరీ పని విధానంలో మూలాలు కలిగి ఉంటుంది - ఇది తొలి రోజుల కంప్యూటర్ భాషలు, ముఖ్యంగా C భాష నుండి ప్రోగ్రామింగ్ సంప్రదాయం అయింది. శ్రేణిలో ప్రతి చోటుకు ఒక ప్రత్యేక చిరునామా నెంబరు ఉంటుంది, దీనిని **సూచిక (index)** అంటారు.
| సూచిక | విలువ | వివరణ |
|-------|-------|-------------|
| 0 | "Chocolate" | మొదటి అంశం |
| 1 | "Strawberry" | రెండవ అంశం |
| 2 | "Vanilla" | మూడవ అంశం |
| 3 | "Pistachio" | నాల్గవ అంశం |
| 4 | "Rocky Road" | ఐదవ అంశం |
✅ మీరు ఆశ్చర్యపోతున్నారా శ్రేణులు 0 సూచిక నుండి మొదలవుతాయని? కొన్ని ప్రోగ్రామింగ్ భాషల్లో సూచికలు 1 నుండీ మొదలవుతాయి. దీనికి సంబంధించిన ఆసక్తికర చరిత్ర మీరు [వికీపీడియాలో](https://en.wikipedia.org/wiki/Zero-based_numbering) చదవవచ్చు.
**శ్రేణి అంశాలను యాక్సెస్ చేయడం:**
```javascript
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
// కోకు లోగడ నోటేషన్ ఉపయోగించి వ్యక్తిగత అంశాలను యాక్సెస్ చేయండి
console.log(iceCreamFlavors[0]); // "చాక్లెట్" - మొదటి అంశం
console.log(iceCreamFlavors[2]); // "వనిల్లా" - మూడవ అంశం
console.log(iceCreamFlavors[4]); // "రోకి రోడ్" - చివరి అంశం
```
**ఈ కోడ్ లో జరుగుతున్న విషయం:**
- **స్క్వేర్ బ్రాకెట్ల సూచిక సంఖ్య ఉపయోగించి** అంశాలను యాక్సెస్ చేస్తుంది
- **ఆ స్థానం లోని విలువను** తిరిగి ఇస్తుంది
- 0 నుండి లెక్క ప్రారంభించి మొదటి అంశం సూచిక 0 అవుతుంది
**శ్రేణి అంశాలను మార్చడం:**
```javascript
// ఉన్న విలువను మార్చు
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "బటర్ పీకాన్"
// చివరిలో కొత్త అంశం చేర్చండి
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "కూకీ డో"
```
**ఈ కోడ్ లో:**
- సూచిక 4 వద్ద ఉన్న "Rocky Road" అంశాన్ని "Butter Pecan"కి మార్చింది
- సూచిక 5 వద్ద కొత్త అంశం "Cookie Dough"ని జోడించింది
- ప్రస్తుతం ఉన్న పరిమితిని మించి జోడిస్తున్నప్పుడు స్వయంచాలకంగా శ్రేణి పొడవును పెంచుతుంది
### శ్రేణి పొడవు మరియు సాధారణ పద్ధతులు
శ్రేణులకు లోపల రూపొందిన గుణాలు మరియు పద్ధతులు ఉంటాయి, ఇవి డాటాతో పని చేయడాన్ని సులభతరం చేస్తాయి.
**శ్రేణి పొడవు తెలుసుకోవడం:**
```javascript
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5
// అలవాటు మారుతున్నప్పుడు పొడవు స్వయంచాలకంగా నవీకరిస్తుంది
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6
```
**గమనించవలసిన ముఖ్యాంశాలు:**
- శ్రేణిలో ఉన్న మొత్తం అంశాల సంఖ్యను తిరిగి ఇస్తుంది
- అంశాలు జోడించబడితే లేదా తీసివేసితే ఆటోమేటిక్ గా నవీకరించబడుతుంది
- పునరావృతాలకు మరియు సరైన ధృవీకరణకు ఉపయోగపడే డైనమిక్ లెక్కను ఇస్తుంది
**ముఖ్యమైన శ్రేణి పద్ధతులు:**
```javascript
const fruits = ["apple", "banana", "orange"];
// అంశాలను జోడించండి
fruits.push("grape"); // చివరకి జోడిస్తుంది: ["ఆపిల్", "బనానా", "ఆరెంజ్", "ద్రాక్ష"]
fruits.unshift("strawberry"); // ప్రారంభంలో జోడిస్తుంది: ["స్ట్రాబెర్రీ", "ఆపిల్", "బనానా", "ఆరెంజ్", "ద్రాక్ష"]
// అంశాలను తొలగించండి
const lastFruit = fruits.pop(); // "ద్రాక్ష"ని తొలగించి తిరిగి ఇస్తుంది
const firstFruit = fruits.shift(); // "స్ట్రాబెర్రీ"ని తొలగించి తిరిగి ఇస్తుంది
// అంశాలను కనుగొనండి
const index = fruits.indexOf("banana"); // 1 ను తిరిగి ఇస్తుంది ("బనానా" స్థానం)
const hasApple = fruits.includes("apple"); // true ను తిరిగి ఇస్తుంది
```
**ఈ పద్ధతుల అర్థం:**
- `push()` (అంతే చివరలో) మరియు `unshift()` (ఆరంభంలో) ఉపయోగించి అంశాలను జోడిస్తుంది
- `pop()` (చివర నుండి) మరియు `shift()` (ఆరంభం నుండి) ఉపయోగించి అంశాలను తొలగిస్తుంది
- `indexOf()` తో అంశాల స్థానం తెలుసుకొంటుంది మరియు `includes()` తో ఉన్నదా కాదా దాన్ని చెక్ చేస్తుంది
- తీసిన అంశాలు లేదా స్థానం సూచులను తిరిగి ఇస్తుంది
✅ మీరు ప్రయత్నించండి! మీ బ్రౌజర్ కన్సోల్ లో మీ స్వంత శ్రేణి సృష్టించి, దాన్ని నియంత్రించండి.
### 🧠 **శ్రేణి ప్రాథమికాలు తనిఖీ: మీ డేటాను సక్రమంగా నిర్వహించండి**
**మీ శ్రేణికి సంబంధించిన అర్ధాన్ని పరీక్షించండి:**
- ఎందుకు శ్రేణులు 1 కాక 0 నుండి లెక్కను ప్రారంభిస్తాయి?
- 5 అంశాల శ్రేణిలో అస్తిత్వం లేని సూచిక (ఉదా: `arr[100]`) ను యాక్సెస్ చేస్తే ఏమవుతుంది?
- మీరు మూడు వాస్తవ జీవిత పరిస్థితులు చెప్పగలరా, అక్కడ శ్రేణులు ఉపయోగపడతాయి?
```mermaid
stateDiagram-v2
[*] --> EmptyArray: const arr = []
EmptyArray --> WithItems: అంశాలు జోడించండి
WithItems --> Accessing: సూచికలను ఉపయోగించండి
Accessing --> Modifying: విలువలను మార్చండి
Modifying --> Processing: పద్ధతులను ఉపయోగించండి
WithItems --> WithItems: push(), unshift()
Processing --> Processing: pop(), shift()
note right of Accessing
సున్నా-ఆధారిత సూచికలు
arr[0] = మొదటి అంశం
end note
note right of Processing
అంతర్గత పద్ధతులు
గతి విధానాలు
end note
```
> **వాస్తవ ప్రపంచ అవగాహన**: ప్రోగ్రామింగ్ లో శ్రేణులు అన్ని చోట్ల ఉన్నాయి! సోషల్ మీడియా ఫీడ్లు, షాపింగ్ కార్టులు, ఫోటో గ్యాలరీలు, ప్లేలిస్ట్ పాటలు ఇలా చాలా చోట్ల ఇవే ఉన్నాయ్!
## పునరావృతాలు (Loops)
చార్ల్స్ డికెన్స్ నవలల నుండి తెలిసిన శిక్ష విధానం లో విద్యార్థులు పదాలు వరుసగా వ్రాయాల్సిన విధంగా ఉంది. ఇప్పుడు "ఈ వాక్యం 100 సార్లు వ్రాయండి" అని ఒకసారి చెప్పి వాటి ఎక్కడ చూసినా ఆ పని తక్షణమే జరిగిపోతుందని భావించండి. అదే పునరావృతాలు మీ కోడ్ కోసం చేస్తాయి.
పునరావృతాలు అంటే తప్పులు లేకుండా పనులను పునరావృతం చేసే తలంపు లేని సహాయకుడు లాగే. మీరు షాపింగ్ కార్ట్ లోని ప్రతి అంశాన్ని చెక్ చేయాలనుకున్నా లేక ఫోటో ఆల్బం లోని అన్ని చిత్రాలను చూపించాలనుకున్నా, పునరావృతాలు ఆ పునరావృతతను సమర్థవంతంగా నిర్వహిస్తాయి.
జావా స్క్రిప్ట్ వివిధ రకాల పునరావృతాలను అందిస్తుంది. వాటిని పరిశీలించి ఎప్పుడు ఉపయోగించాలో తెలుసుకుందాం.
```mermaid
flowchart TD
A["🔄 లూప్ రకాల"] --> B["ఫార్ లూప్"]
A --> C["వైల్ లూప్"]
A --> D["ఫర్...ఆఫ్ లూప్"]
A --> E[" ఫర్‌ఈచ్ మెథడ్"]
B --> B1["తెలిసిన పునరావృతులు"]
B --> B2["కౌంటర్ ఆధారిత"]
B --> B3["for(init; condition; increment)"]
C --> C1["తెలియని పునరావృతులు"]
C --> C2["నిబంధన ఆధారిత"]
C --> C3["while(condition)"]
D --> D1["ఆధునిక ES6+"]
D --> D2["అర్రే పునరావృతి"]
D --> D3["for(item of array)"]
E --> E1["ఫంక్షనల్ శైలి"]
E --> E2["అర్రే విధానం"]
E --> E3["array.forEach(callback)"]
F["⏰ ఎప్పుడు ఉపయోగించాలి"] --> F1["ఫర్: లెక్కలు, సూచికలు"]
F --> F2["వైల్: వినియోగదారు ఇన్‌పుట్, శోధన"]
F --> F3["ఫర్...ఆఫ్: సరళమైన పునరావృతి"]
F --> F4["ఫర్‌ఈచ్: ఫంక్షనల్ ప్రోగ్రామింగ్"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
### For Loop
`for` లూప్ టైమర్ సెటింగ్ లాంటిది - మీరు ఒక పని ఏన్ని సార్లు జరగాలనో ముందే తెలుసు. ఇది బాగా సక్రమమైనది మరియు ఊహించదగ్గది, కనుక శ్రేణులతో పని చేస్తూ గణనలు చేయాల్సినప్పుడు ఇది అద్భుతంగా ఉంటుంది.
**For Loop నిర్మాణం:**
| భాగం | హోదా | ఉదాహరణ |
|-----------|---------|----------|
| **ఆరంభీకరణ** | ప్రారంభ స్థానం సెట్ చేస్తుంది | `let i = 0` |
| **నిబంధన** | ఎప్పుడు కొనసాగించాలి | `i < 10` |
| **పండుగ** | ఎలా నవీకరించాలి | `i++` |
```javascript
// 0 నుండి 9 వరకు లెక్కించడం
for (let i = 0; i < 10; i++) {
console.log(`Count: ${i}`);
}
// మరింత ప్రాక్టికల్ ఉదాహరణ: స్కోర్‌లను ప్రాసెస్ చేయడం
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
console.log(`Student ${i + 1}: ${testScores[i]}%`);
}
```
**దశలవారీగా ఇది ఏమి చేస్తుందో:**
- ప్రారంభంలో కౌంటర్ వేరియబుల్ `i` ని 0 గా ఇనిషియలైజ్ చేస్తుంది
- ప్రతి పావతిలో ముందుగా షరతును `i < 10` చెక్ చేస్తుంది
- షరతు నిజం అయితే కోడ్ బ్లాక్ నడుపుతుంది
- ప్రతి పావతిలో `i++` ద్వారా `i`ని 1 పెంచుతుంది
- షరతు అబద్ధంగా మారిపోయే (i = 10 కు చేరితే) స్టాప్ అవుతుంది
✅ ఈ కోడ్ ను మీ బ్రౌజర్ కన్సోల్లో నడిపి చూడండి. కౌంటర్, షరతు లేదా పునరావృతి ఎక్స్‌ప్రెషన్ లో చిన్న మార్పు చేస్తే ఏం జరుగుతుంది? మీరు దీన్ని వ్యతిరేక దిశలో (కౌంట్ డౌన్) నడిపించగలరా?
### 🗓️ **For Loop లో పట్టు తనిఖీ: నియంత్రిత పునరావృతం**
**మీ For loop అర్ధం పరీక్షించండి:**
- For loop లో మూడు భాగాలు ఏవీ, వాటి ప్రతి ఒక్కటి ఏమి చేస్తుంది?
- మీరు శ్రేణిని వెనుక టు ముందు ఎలా లూప్ చేస్తారు?
- ఇన్క్రిమెంట్ను (`i++`) మర్చిపోతే ఏం జరుగుతుంది?
```mermaid
flowchart TD
A["🚀 ఫోర్ లూప్ ప్రారంభించండి"] --> B["ప్రారంభం: let i = 0"]
B --> C{"నిబంధన: i < array.length?"}
C -->|true| D["కోడ్ బ్లాక్ అమలు చేయండి"]
D --> E["ఎక్కువ చేయండి: i++"]
E --> C
C -->|false| F["✅ లూప్ నుండి ఎగ్జిట్ అవ్వండి"]
G["📋 సాధారణ నమూనాలు"] --> G1["for(let i=0; i<n; i++)"]
G --> G2["for(let i=n-1; i>=0; i--)"]
G --> G3["for(let i=0; i<arr.length; i+=2)"]
style A fill:#e3f2fd
style F fill:#e8f5e8
style G fill:#fff3e0
```
> **లూప్ జ్ఞానం**: మీరు మీ పనిని ఎన్ని సార్లు చేయాలో మీరు ఖచ్చితంగా తెలుసుకున్న సందర్భంలో For loops మంచి ఎంపిక! శ్రేణి ప్రాసెసింగ్ లో ఇది చాలా సాధారణమైనది!
### While Loop
`while` లూప్ అంటే "ఇది జరుగుతూనే ఉండాలి..." అని చెప్పటం లాంటిది - మీరు ఇది ఎన్ని సార్లు నడుస్తుందో తెలియకపోవచ్చు, కానీ ఎప్పుడు ఆపాలనో తెలుసు. ఇది వినియోగదారుని ఇన్పుట్ కోరుతూ అనుకూల సమయంలో ఆపడం లేదా డేటాను శోధిస్తూ కావాల్సిన సందర్భంలో ఆపడం కోసం చాలా సరిపోయేది.
**While Loop లక్షణాలు:**
- షరతు నిజంగానే ఉన్నంత సమయం కొనసాగుతుంది
- కౌంటర్ వేరియబుల్స్ మాన్యువల్ గా నిర్వహించాలి
- ప్రతి పునరావృతానికి ముందు షరతు చెక్ చేస్తుంది
- షరతు ఎప్పుడూ మంచి అయినా అర్ధం లేకుండా అనంత లూపులు రావచ్చు
```javascript
// ప్రాథమిక లెక్కింపు ఉదాహరణ
let i = 0;
while (i < 10) {
console.log(`While count: ${i}`);
i++; // పెరిగించుకోవడం మరచిపోకండి!
}
// మరింత ప్రయోజనవంతమైన ఉదాహరణ: వినియోగదారుడి ఇన్పుట్ ప్రాసెసింగ్
let userInput = "";
let attempts = 0;
const maxAttempts = 3;
while (userInput !== "quit" && attempts < maxAttempts) {
userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
attempts++;
}
if (attempts >= maxAttempts) {
console.log("Maximum attempts reached!");
}
```
**ఈ ఉదాహరణలు ఏమి చెబుతాయో:**
- కౌంటర్ వేరియబుల్ `i`ని లూప్ బాడీ లో మాన్యువల్ గా నిర్వహిస్తుంది
- అనంత లూపులు రాకుండా కౌంటర్ పెంచుతుంది
- వినియోగదారుల ఇన్పుట్ మరియు ప్రయత్న పరిమితి చూపించి వ్యావహారిక ఉదాహరణ
- ఎండ్లెస్ ఎగ్జిక్యూషన్ ని నివారించడానికి భద్రతా చర్యలు
### ♾️ **While Loop జ్ఞానం తనిఖీ: షరతుపై ఆధారపడి పునరావృతం**
**మీ While loop అర్ధం పరీక్షించండి:**
- While loops ఉపయోగిస్తే ప్రధాన ప్రమాదం ఏమిటి?
- మీరు ఎప్పుడు while loop ను for loop కంటే ఎంచుకుంటారు?
- అనంత లూపులకు మీరు ఎలా నివారణ చెయ్యగలరు?
```mermaid
flowchart LR
A["🔄 While vs For"] --> B["While లూప్"]
A --> C["For లూప్"]
B --> B1["తెలియని పునరావృతులు"]
B --> B2["పరిస్థితి ఆధారిత"]
B --> B3["వినియోగదారు ఇన్‌పుట్, శోధన"]
B --> B4["⚠️ ప్రమాదం: అనంత లూప్‌లు"]
C --> C1["తెలిసిన పునరావృతులు"]
C --> C2["కౌంటర్-ఆధారిత"]
C --> C3["సరసరి ప్రాసెసింగ్"]
C --> C4["✅ సురక్షితం: ఊహించదగిన ముగింపు"]
D["🛡️ భద్రతాపరమైన సూచనలు"] --> D1["ఎప్పుడూ పరిస్థితి వేరియబుల్ మార్చాలి"]
D --> D2["ఎస్కేప్ పరిస్థితులు చేర్చండి"]
D --> D3["గరిష్ఠ పునరావృతి పరిమితులు నిర్దేశించండి"]
style A fill:#e3f2fd
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#ffebee
```
> **భద్రత ముందు**: While loops శక్తివంతమైనవి కానీ సూచికను జాగ్రత్తగా నిర్వహించాలి. మీ లూప్ షరతు ఎప్పటికీ అబద్ధం అవుతుంది అని చూసుకోండి!
### ఆధునిక లూప్ ప్రత్యామ్నాయాలు
జావాస్క్రిప్ట్ ఆధునిక లూప్ వ్యాకరణాన్ని అందిస్తుంది, ఇది మీ కోడ్ ను చదవటానికి సులభం చేస్తుంది మరియు తప్పుల అవకాశాలను తగ్గిస్తుంది.
**For...of లూప్ (ES6+):**
```javascript
const colors = ["red", "green", "blue", "yellow"];
// ఆధునిక దృష్టికోణం - సాఫ్‌టర్ మరియు భద్రతగలది
for (const color of colors) {
console.log(`Color: ${color}`);
}
// సంప్రదాయ for లూప్‌తో పోల్చండి
for (let i = 0; i < colors.length; i++) {
console.log(`Color: ${colors[i]}`);
}
```
**for...of ప్రధాన లాభాలు:**
- సూచిక నిర్వహణను మరియు తప్పు సంభవించే అవకాశాన్ని తొలగిస్తుంది
- శ్రేణి అంశాలను నేరుగా పొందుతుంది
- కోడ్ చదవదగినదిగా మారుతుంది మరియు సింటాక్స్ క్లిష్టత తగ్గుతుంది
**forEach పద్ధతి:**
```javascript
const prices = [9.99, 15.50, 22.75, 8.25];
// ఫంక్షనల్ ప్రోగ్రామింగ్ శైలి కోసం forEach ఉపయోగించడం
prices.forEach((price, index) => {
console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});
// సులభమైన ఆపరేషన్ల కోసం arrow ఫంక్షన్లతో forEach
prices.forEach(price => console.log(`Price: $${price}`));
```
**forEach గురించి ఎలాంటివి తెలుసుకోవాలి:**
- ప్రతి శ్రేణి అంశం కొరకు ఒక ఫంక్షన్ నడుపుతుంది
- అంశ విలువ మరియు సూచికను పరామితులుగా ఇస్తుంది
- త్వరగా ఆపలేరు (సాంప్రదాయ లూప్స్ లాగా కాదు)
- తిరిగి ఇస్తుంది 'undefined' (కొత్త శ్రేణి సృష్టించదు)
✅ మీరు For loop మరియు While loop మధ్య ఎంపిక ఎందుకు చేస్తారు? StackOverflow లో 17 వేల మంది చూస్తున్న ప్రశ్నకు సంబంధించిన కొన్ని అభిప్రాయాలు [మీకు ఆసక్తిగా ఉండవచ్చు](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
### 🎨 **ఆధునిక లూప్ వ్యాకరణం తనిఖీ: ES6+ అంగీకారము**
**మీ ఆధునిక జావాస్క్రిప్ట్ అర్ధం పరీక్షించండి:**
- సాంప్రదాయ For loops కంటే for...of లాభాలు ఏవీ?
- మీరు ఎప్పుడు సాంప్రదాయ మార్గాలు ఇంకా ఇష్టపడతారు?
- forEach మరియు map మధ్య తేడా ఏమిటి?
```mermaid
quadrantChart
title లూప్ ఎంపిక గైడ్
x-axis సాంప్రదాయం --> ఆధునికం
y-axis సులభం --> సంక్లిష్టం
quadrant-1 ఆధునిక Sanklishtam
quadrant-2 సాంప్రదాయం Sanklishtam
quadrant-3 సాంప్రదాయం సులభం
quadrant-4 ఆధునిక సులభం
Traditional For: [0.2, 0.7]
While Loop: [0.3, 0.6]
For...of: [0.8, 0.3]
forEach: [0.9, 0.4]
Array Methods: [0.8, 0.8]
```
> **ఆధునిక ధోరణి**: `for...of` మరియు `forEach` వంటి ES6+ వ్యాకరణం శ్రేణులపైన లూపింగ్ సులభం, తప్పుడు పొరపాట్లను తగ్గిస్తాయి కాబట్టి ఇవి ప్రాధాన్య రూపం అవుతున్నాయి!
## పునరావృతాలు మరియు శ్రేణులు
శ్రేణులు మరియు పునరావృతాలను కలిపి ఉపయోగించడం శక్తివంతమైన డేటా ప్రాసెసింగ్ సామర్ధ్యాలను సృష్టిస్తుంది. ఇది అనేక ప్రోగ్రామింగ్ పనుల మధ‍‍య పెట్టుబడి, జాబితాలను చూపించడం నుండి గణాంకాలను లెక్కించడం వరకు ఉపయోగపడుతుంది.
**సాంప్రదాయ శ్రేణి ప్రాసెసింగ్:**
```javascript
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
// క్లాసిక్ ఫర్ లూప్ పద్ధతి
for (let i = 0; i < iceCreamFlavors.length; i++) {
console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}
// ఆధునిక for...of పద్ధతి
for (const flavor of iceCreamFlavors) {
console.log(`Available flavor: ${flavor}`);
}
```
**ప్రతి పద్ధతిని అర్థం చేసుకుందాం:**
- లూప్ పరిమితిని నిర్ణయించడానికి శ్రేణి పొడవు ప్రాపర్టీ ఉపయోగిస్తుంది
- సాంప్రదాయ ఫర్ లూప్స్ లో సూచికతో అంశాలను యాక్సెస్ చేస్తుంది
- for...of లూప్స్ లో నేరుగా అంశాలను పొందుతుంది
- ప్రతి శ్రేణి అంశాన్ని ఒక్కసారి ప్రాసెస్ చేస్తుంది
**ప్రయోజనాత్మక డేటా ప్రాసెసింగ్ ఉదాహరణ:**
```javascript
const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];
// ఒక్క లూప్‌తో అన్ని గ్రేడులను ప్రాసెస్ చేయండి
for (let i = 0; i < studentGrades.length; i++) {
const grade = studentGrades[i];
total += grade;
if (grade > highestGrade) {
highestGrade = grade;
}
if (grade < lowestGrade) {
lowestGrade = grade;
}
}
const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);
```
**ఈ కోడ్ ఎలా పనిచేస్తుందో:**
- మొత్తం మరియు తీవ్రమైన విలువలను ట్రాక్ చేయడానికి వేరియబుళ్లను ఇనిషియలైజ్ చేస్తుంది
- ప్రతీ గ్రేడ్‌ను ఒక్క లూప్ లో సమర్థవంతంగా ప్రాసెస్ చేస్తుంది
- సగటును లెక్కించడానికి మొత్తం చేర్చుకుంటోంది
- లూప్ సమయంలో అతిపెద్ద మరియు కనిష్ట విలువలను ట్రాక్ చేస్తుంది
- లూప్ ముగిసిన తర్వాత ముగింపు గణాంకాలు లెక్కిస్తుంది
✅ మీరు మీ స్వంత శ్రేణి తో మీ బ్రౌజర్ కన్సోల్ లో ప్రయోగం చేయండి.
```mermaid
flowchart TD
A["📦 పరిమాణ డేటా"] --> B["🔄 పునరావృత ప్రాసెసింగ్"]
B --> C["📈 ఫలితాలు"]
A1["[85, 92, 78, 96, 88]"] --> A
B --> B1["మొత్తాన్ని లెక్కించండి"]
B --> B2["కనిష్ఠం/గరిష్ఠం కనుగొనండి"]
B --> B3["నిర్ధారిత పరిస్థితులను లెక్కించండి"]
B --> B4["డేటాను మార్చండి"]
C --> C1["సగటు: 87.8"]
C --> C2["అత్యున్నత: 96"]
C --> C3["అనుమతింపు: 5/5"]
C --> C4["అక్షర గ్రేడ్‌లు"]
D["⚡ ప్రాసెసింగ్ మొదలుపెట్టు"] --> D1["సేకరణ (మొత్తం)"]
D --> D2["తులన (కనిష్ఠం/గరిష్ఠం)"]
D --> D3["ఫిల్టరింగ్ (స్థితులు)"]
D --> D4["మ్యాపింగ్ (మార్పు)"]
style A fill:#e3f2fd
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#f3e5f5
```
---
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఏజంట్ మోడ్ ఉపయోగించి క్రింది ఛాలెంజ్ పూర్తి చేయండి:
**వివరణ:** శ్రేణులు మరియు పునరావృతాలను కలిపి ఉపయోగించి డేటా సెట్‌ను విశ్లేషించి అర్ధం వచ్చే వివరాలను అందించే సమగ్ర డేటా ప్రాసెసింగ్ ఫంక్షన్ ను నిర్మించండి.
**ప్రాంప్ట్:** `analyzeGrades` అనే ఫంక్షన్ సృష్టించండి, ఇది విద్యార్థుల గ్రేడ్ ఆబ్జెక్టుల శ్రేణి (ప్రతి ఒకటిలో పేరు మరియు స్కోరు గుణాలున్నవి) తీసుకొని అత్యధిక స్కోరు, కనిష్ట స్కోరు, సగటు స్కోరు, పాసైనవారి సంఖ్య (స్కోరు >= 70), మరియు సగటు కన్నా ఎక్కువ స్కోరు పొందిన విద్యార్థుల పేర్ల శ్రేణిని గణించే గణాంకాలను కలిగి ఓ ఆబ్జెక్టును తిరిగి ఇస్తుంది. మీ పరిష్కారంలో కనీసం రెండు వేర్వేరు లూప్ రకాలను ఉపయోగించండి.
[ఏజెంట్ మోడ్ గురించి మరింత తెలుసుకోండి](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
## 🚀 ఛాలెంజ్
JavaScript అనేది కొన్ని ఆధునిక అర్రే విధానాలను అందిస్తుంది, ఇవి ప్రత్యేక పనుల కోసం సాంప్రదాయక లూపులను బదులుగా ఉపయోగించవచ్చు. [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), మరియు [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) ను అన్వేషించండి.
**మీ సవాలు:** కనీసం మూడు వేర్వేరు అర్రే విధానాలను ఉపయోగించి విద్యార్థుల గ్రేడ్ ఉదాహరణను రీఫాక్టర్ చేయండి. ఆధునిక JavaScript సింటాక్స్తో కోడ్ ఎంత చక్కగా మరియు స్పష్టంగా మారిందో గమనించండి.
## లెక్చర్ తర్వాత క్విజ్
[లెక్చర్ తర్వాత క్విజ్](https://ff-quizzes.netlify.app/web/quiz/14)
## సమీక్ష & స్వీయ అధ్యయనం
JavaScriptలో అర్రేలతో అనేక విధానాలు జోడించబడ్డాయి, ఇవి డేటా నియంత్రణకు అత్యంత ఉపయోగకరంగా ఉంటాయి. [ఈ విధానాలను చదవండి](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) మరియు మీ సృష్టించిన అర్రేపై (పుష్, పాప్, స్లైస్ మరియు స్ప్లైస్ వంటి) వాటిలో కొన్ని ప్రయత్నించండి.
## అసైన్‌మెంట్
[అర్రే ను లూక్ చేయండి](assignment.md)
---
## 📊 **మీ అర్రేల & లూప్ టూల్‌కిట్ సమరీ**
```mermaid
graph TD
A["🎯 అర్రేలు & లూప్ మాస్టరీ"] --> B["📦 అర్రే మౌలికాలు"]
A --> C["🔄 లూప్ రకాలు"]
A --> D["🔗 డేటా ప్రాసెసింగ్"]
A --> E["🎨 ఆధునిక సాంకేతికతలు"]
B --> B1["సృష్టి: [ ]"]
B --> B2["ఇండెక్సింగ్: arr[0]"]
B --> B3["మెథడ్స్: push, pop"]
B --> B4["గుణపరిధులు: length"]
C --> C1["For: తెలుసు పునరావృతాలు"]
C --> C2["While: షరతు ఆధారితమైన"]
C --> C3["For...of: ప్రత్యక్ష ప్రవేశం"]
C --> C4["forEach: ఫంక్షనల్"]
D --> D1["గణాంకాల లెక్కింపు"]
D --> D2["డేటా మార్పిడి"]
D --> D3["ఫిల్టర్ & శోధన"]
D --> D4["ప్రత్యక్ష-సమయం ప్రాసెసింగ్"]
E --> E1["అరో ఫంక్షన్లు"]
E --> E2["మెథడ్ చెయినింగ్"]
E --> E3["డిస్ట్రక్చరింగ్"]
E --> E4["టెంప్లేట్ లిటరల్స్"]
F["💡 కీలక లాభాలు"] --> F1["దక్షంగా డేటా నిర్వహణ"]
F --> F2["కోడ్ పునరావృతం తగ్గింపు"]
F --> F3["విస్తరించదగిన పరిష్కారాలు"]
F --> F4["శుభ్రంగా సింటాక్స్"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
---
## 🚀 మీ అర్రేల & లూప్ మాస్టరీ టైમ్లైన్
### ⚡ **తర్వాతి 5 నిమిషాలలో మీరు చేయగలిగేది**
- [ ] మీ ఇష్టమైన సినిమాల అర్రే సృష్టించి ప్రత్యేక అంశాలను యాక్సెస్ చేయండి
- [ ] 1 నుండి 10 వరకు లెక్కించునట్లు ఒక for లూప్ రాయండి
- [ ] పాఠం నుంచి ఆధునిక అర్రే విధానాల సవాలు ప్రయత్నించండి
- [ ] బ్రౌజర్ కన్సోల్‌లో అర్రే ఇండెక్సింగ్‌ను భావన చేయండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పాఠం తర్వాత క్విజ్ పూర్తి చేసి ఎటువంటి క్లిష్టమైన భావనలను సమీక్షించండి
- [ ] GitHub Copilot సవాళ్ల నుండి సమగ్ర గ్రేడ్ అనలుగర్ నిర్మించండి
- [ ] వస్తువులను జోడించి తీసివేసే సాదారణ షాపింగ్ కార్ట్ సృష్టించండి
- [ ] వేర్వేరు లూప్ రకాల మధ్య మార్పిడి సాధన చేయండి
- [ ] `push`, `pop`, `slice`, మరియు `splice` వంటి అర్రే విధానాలతో ప్రయోగం చేయండి
### 📅 **మీ వారాంతపు డేటా ప్రాసెసింగ్ ప్రయాణం**
- [ ] సృజనాత్మక మెరుగుదలలతో "అర్రేను లూప్ చేయండి" అసైన్‌మెంట్ పూర్తి చేయండి
- [ ] అర్రేలతో మరియు లూపులతో టు-డూ లిస్ట్ అప్లికేషన్ తయారుచేయండి
- [ ] గణనీయ డేటా కోసం ఒక సాదారణ గణాంక కాలిక్యులేటర్ తయారుచేయండి
- [ ] [MDN అర్రే విధానాలతో](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) సాధన చేయండి
- [ ] ఫోటో గ్యాలరీ లేదా సంగీత ప్లేలిస్ట్ ఇంటర్‌ఫేస్ నిర్మించండి
- [ ] `map`, `filter`, మరియు `reduce` వంటి విధానాలతో ఫంక్షనల్ ప్రోగ్రామింగ్ అన్వేషించండి
### 🌟 **మీ నెలరోజుల మార్పిడి**
- [ ] ఆధునిక అర్రే ఆపరేషన్లు మరియు పనితీరు ఆప్టిమైజేషన్‌లో మాస్టరీ సాధించండి
- [ ] సంపూర్ణ డేటా విజువలైజేషన్ డాష్‌బోర్డ్ నిర్మించండి
- [ ] డేటా ప్రాసెసింగ్‌లో పాల్గొన్న ఓపెన్ సోర్స్ ప్రాజెక్టులకు తోడ్పాటు ఇవ్వండి
- [ ] ఉపయోగకరమైన ఉదాహరణలతో ఇతరులకు అర్రేల మరియు లూపులను బోధించండి
- [ ] పునర్వినియోగ డేటా ప్రాసెసింగ్ ఫంక్షన్ల వ్యక్తిగత లైబ్రరీ సృష్టించండి
- [ ] అర్రేల ఆధారంగా అల్గోరిథంలు మరియు డేటా నిర్మాణాలను అన్వేషించండి
### 🏆 **చివరి డేటా ప్రాసెసింగ్ చాంపియన్ చెక్-ఇన్**
**మీ అర్రేల మరియు లూప్ మాస్టరీని సెలబ్రేట్ చేయండి:**
- మీరు నిజజీవిత అనువర్తనాలకు నేర్చుకున్న అత్యంత ఉపయోగకర అర్రే ఆపరేషన్ ఏది?
- మీకు ఏ లూప్ రకం సహజంగా అనిపించిందీ మరియు ఎందుకు?
- అర్రేలు మరియు లూపులను అర్థం చేసుకోవడం మీ డేటాను ఏర్పాటు చేసే దారిని ఎలా మార్చింది?
- మీరు తదుపరి ఏ క్లిష్టమైన డేటా ప్రాసెసింగ్ టాస్క్ ను చేపట్టాలని కోరుకుంటున్నారు?
```mermaid
journey
title మీ డేటా ప్రాసెసింగ్ అభివృద్ధి
section ఈ రోజు
Array Confusion: 3: You
Loop Basics: 4: You
Index Understanding: 5: You
section ఈ వారం
Method Mastery: 4: You
Efficient Processing: 5: You
Modern Syntax: 5: You
section వచ్చే నెల
Complex Algorithms: 5: You
Performance Optimization: 5: You
Teaching Others: 5: You
```
> 📦 **మీరు డేటా ఏర్పాట్లు మరియు ప్రాసెసింగ్ శక్తిని అన్లాక్ చేసారు!** అర్రేలు మరియు లూపులు మీరు ఎప్పుడైనా తయారుచేసే ప్రతి అనువర్తనానికి మౌలికమైన పునాది. సాదా జాబితాల నుండి క్లిష్టమైన డేటా విశ్లేషణ వరకు, మీరు ఇప్పుడు సమాచారాన్ని సమర్థవంతంగా మరియు చక్కగా నిర్వహించడానికి టూల్స్ కలిగి ఉన్నారు. ప్రతి డైనమిక్ వెబ్‌సైట్, మొబైల్ యాప్ మరియు డేటా ఆధారిత అనువర్తనం ఈ మౌలిక భావనలపై ఆధారపడుతుంది. స్కేలబుల్ డేటా ప్రాసెసింగ్ ప్రపంచానికి స్వాగతం! 🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్క్లైమర్**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువదించబడినది. మేము నిజత్వంపై శ్రద్ధ వహించినప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో పొరపాట్లు లేదా అసత్యతలు ఉండే అవకాశముంది. ఈ డాక్యుమెంట్ యొక్క మాతృష్టమైన భాషలో ఉన్న అసలు పత్రాన్ని అధికారిక మూలం గా పరిగణించాలి. గంభీరమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వాడకంనుంచి వచ్చే ఏవైనా అర్థం తప్పుదోవ పడే పరిస్థితులకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

124
translations/te/2-js-basics/4-arrays-loops/assignment.md
Unescape View File

@ -0,0 +1,124 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8abcada0534e0fb3a7556ea3c5a2a8a4",
"translation_date": "2026-01-08T13:09:38+00:00",
"source_file": "2-js-basics/4-arrays-loops/assignment.md",
"language_code": "te"
}
-->
# అర్రేస్ మరియు లూప్స్ అసైన్‌మెంట్
## సూచనలు
అర్రేస్ మరియు లూప్‌లతో పని చేసే అభ్యాసం కోసం క్రింది వ్యాయామాలను పూర్తి చేయండి. ప్రతి వ్యాయామం పాఠం నుండి సిద్ధాంతాలను బట్టి నిర్మించబడింది మరియు వివిధ లూప్‌ల రకాల మరియు అర్రే పద్ధతులను వర్తింపజేయగల గుణాన్ని ప్రోత్సహిస్తుంది.
### వ్యాయామం 1: నెంబర్ ప్యాటర్న్ జనరేటర్
1-20 మధ్య ప్రతి 3వ సంఖ్యను జాబితా చేసి కన్‌సోల్‌లో ముద్రించుటకు ఒక ప్రోగ్రామ్ సృష్టించండి.
**అవసరాలు:**
- కస్టమ్ ఇన్క్రిమెంట్‌తో `for` లూప్ ఉపయోగించండి
- సంఖ్యలను వినియోగదారులకు స్నేహపూర్వక ఫార్మాట్‌లో చూపించండి
- లాజిక్‌ను వివరిస్తూ వివరణాత్మక కామెంట్స్ జత చేయండి
**అంచనా అవుట్‌పుట్:**
```
3, 6, 9, 12, 15, 18
```
> **సూచన:** మీ for లూప్‌లో iteration-expression ను మార్చి కొన్ని సంఖ్యలను దాటవేయండి.
### వ్యాయామం 2: అర్రే విశ్లేషణ
కనీసం 8 వేర్వేరు సంఖ్యలతో అర్రే సృష్టించి, డేటాను విశ్లేషించడానికి ఫంక్షన్లను రాయండి.
**అవసరాలు:**
- కనీసం 8 విలువలతో `numbers` అనే అర్రే సృష్టించండి
- గరిష్ట సంఖ్యను తిరిగిచ్చే `findMaximum()` ఫంక్షన్ రాయండి
- కనిష్ట సంఖ్యను తిరిగిచ్చే `findMinimum()` ఫంక్షన్ రాయండి
- మొత్తం సంఖ్యల మొత్తాన్ని తిరిగిచ్చే `calculateSum()` ఫంక్షన్ రాయండి
- ప్రతి ఫంక్షన్‌ను పరీక్షించి ఫలితాలను ప్రదర్శించండి
**బోనస్ ఛాలెంజ్:** అర్రెలో రెండవ గరిష్ట సంఖ్యను కనుగొనే ఫంక్షన్ రూపొందించండి.
### వ్యాయామం 3: స్ట్రింగ్ అర్రే ప్రాసెసింగ్
మీ ఇష్టమైన సినిమాలు/పుస్తకాలు/పాటలతో అర్రే సృష్టించి వివిధ లూప్ రకాలపై అవగాహన పెంపొందించుకోండి.
**అవసరాలు:**
- కనీసం 5 స్ట్రింగ్ విలువలతో ఒక అర్రే సృష్టించండి
- సంఖ్యలతో(1. అంశం పేరు) అంశాలను ప్రదర్శించడానికి ప్రాచీన `for` లూప్ ఉపయోగించండి
- అంశాలను పెద్దఅక్షరాలలో ప్రదర్శించడానికి `for...of` లూప్ ఉపయోగించండి
- మొత్తం అక్షరాలను లెక్కించి ప్రదర్శించడానికి `forEach()` పద్ధతి ఉపయోగించండి
**ఉదాహరణ అవుట్‌పుట్:**
```
Traditional for loop:
1. The Matrix
2. Inception
3. Interstellar
For...of loop (uppercase):
THE MATRIX
INCEPTION
INTERSTELLAR
Character count:
Total characters across all titles: 42
```
### వ్యాయామం 4: డేటా ఫిల్టరింగ్ (అధునాతన)
విద్యార్థులను సూచించే ఆబ్జెక్టుల అర్రేను ప్రాసెస్ చేసే ప్రోగ్రామ్ సృష్టించండి.
**అవసరాలు:**
- కనీసం 5 విద్యార్థి ఆబ్జెక్టులతో `name`, `age`, `grade` లక్షణాలతో అర్రే సృష్టించండి
- 18 సంవత్సరాల వయసు లేదా అంతకంటే మెద్ద అనిపించే విద్యార్థులను కనుగొనడానికి లూప్స్ ఉపయోగించండి
- అన్ని విద్యార్థుల సగటు గ్రేడ్‌ను లెక్కించండి
- గ్రేడ్ 85 పైగా ఉన్న విద్యార్థులతో కొత్త అర్రే సృష్టించండి
**ఉదాహరణ నిర్మాణం:**
```javascript
const students = [
{ name: "Alice", age: 17, grade: 92 },
{ name: "Bob", age: 18, grade: 84 },
// మరిన్ని విద్యార్థుల్ని జోడించండి...
];
```
## మీ కోడ్‌ను పరీక్షించడం
మీ ప్రోగ్రామ్‌లను ఈ విధంగా పరీక్షించండి:
1. మీ బ్రౌజర్ కన్‌సోల్‌లో ప్రతి వ్యాయామాన్ని నడపండి
2. ఫలితాలు అంచనా ఫలితాలకు సరిపోతున్నాయో పరిశీలించండి
3. వేర్వేరు డేటా సెట్‌లతో పరీక్షించండి
4. మీ కోడ్ ఎడ్జ్ కేసులు (ఖాళీ అర్రేస్, ఒంటి అంశాలు) ఎలా నిర్వహిస్తుందో చూడండి
## సమర్పణ మార్గదర్శకాలు
మీ సమర్పణలో ఈ సమాచారాన్ని చేర్చండి:
- ప్రతి వ్యాయామానికి బాగా వ్యాఖ్యానించిన జావాస్క్రిప్ట్ కోడ్
- మీ ప్రోగ్రామ్‌లు నడిచిన స్క్రీన్‌شాట్లు లేదా టెక్స్ట్ అవుట్‌పుట్లు
- ప్రతి పనికి మీరు ఏ లూప్ రకాన్ని ఎంచుకున్నారో మరియు ఎందుకు అనేది సంక్షిప్త వివరణ
## రూబ్రిక్
| ప్రమాణాలు | అద్భుతం (3 పాయంట్లు) | తగినంత (2 పాయంట్లు) | మెరుగుదల అవసరం (1 పాయింట్) |
| -------- | -------------------- | ------------------- | --------------------------- |
| **విధానసామర్థ్యం** | బోనస్ ఛాలెంజ్‌లతో సహా అన్ని వ్యాయామాలు సరిగా పూర్తి | అన్ని అవసరమైన వ్యాయామాలు సరిగ్గా పనిచేస్తాయ్ | కొన్ని వ్యాయామాలు అసంపూర్ణం లేదా లోపాలు కలిగి ఉన్నాయి |
| **కోడ్ నాణ్యత** | శుభ్రమైన, బాగా నిర్వహించబడిన కోడ్, వివరణాత్మక వేరియబుల్ పేర్లతో | కోడ్ పనిచేస్తుంది కానీ మరింత శుభ్రంగా ఉండవచ్చు | కోడ్ అసుతిరి లేదా అర్థం చేసుకోవడానికి కష్టంగా ఉంది |
| **వ్యాఖ్యలు** | లాజిక్ మరియు నిర్ణయాలను వివరిస్తూ సమగ్ర వ్యాఖ్యలు | ప్రాథమిక వ్యాఖ్యలు ఉన్నాయి | చాలా తక్కువ లేదా వ్యాఖ్యలు లేవు |
| **లూప్ వినియోగం** | వివిధ లూప్ రకాలపై సరైన అవగాహన ప్రదర్శిస్తుంది | లూప్‌లను సరిగా వినియోగించ but పరిమితం చేయబడింది | లూప్ వినియోగం తప్పు లేదా సామర్థ్యం లోపిస్తుంది |
| **పరీక్షణ** | బహుముఖ పరీక్షల అటవిడల ఆధారాలు ఉన్నాయి | ప్రాథమిక పరీక్షణ ప్రదర్శితమైంది | పరీక్షణ యొక్క కొంతచెల్లింపు లేదు |
## ఆలోచనా ప్రశ్నలు
వ్యాయామాలు పూర్తిచేసిన తర్వాత, ఆలోచించండి:
1. ఏ లూప్ రకం ఎక్కువ సహజంగా అనిపించింది మరియు ఎందుకు?
2. అర్రేతో పని చేసే సమయంలో మీరు ఏవెటువంటి సవాళ్ళను ఎదుర్కొన్నారు?
3. ఈ నైపుణ్యాలు వాస్తవ ప్రపంచ వెబ్ డెవలప్‌మెంట్లో ఎలా ఉపయోగపడతాయి?
4. పనితీరును మెరుగుపరచడానికి మీ కోడ్‌ను మీరు ఎలా వేరుగా ఆప్టిమైజ్ చేస్తారు?
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అసమ్మతి**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువాదం చేయబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటినీ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా తప్పులుంటే ఉండవచ్చు అనే దృష్టితో ఉండండి. అసలు పత్రం దాని స్థానిక భాషలోని మూల పత్రంగా పరిగణించబడాలి. ముఖ్యమైన సమాచారం కోసం, నిపుణుల మానవ అనువాదాన్ని సూచించబడుతుంది. ఈ అనువాద వినియోగంతో కలిగే అపవాదాలు లేదా తప్పనుమనిపించట్లేదనేది మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

30
translations/te/2-js-basics/README.md
Unescape View File

@ -0,0 +1,30 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cc9e70a2f096c67389c8acff1521fc27",
"translation_date": "2026-01-08T10:44:48+00:00",
"source_file": "2-js-basics/README.md",
"language_code": "te"
}
-->
# జావాస్క్రిప్ట్ పరిచయం
జావాస్క్రిప్ట్ అనేది వెబ్ భాష. ఈ నాలుగు పాఠాల్లో, మీరు దాని మౌలికాలను నేర్చుకుంటారు.
### విషయాలు
1. [చరాలు మరియు డేటా రకాలు](1-data-types/README.md)
2. [ఫంక్షన్లు మరియు విధానాలు](2-functions-methods/README.md)
3. [జావాస్క్రిప్ట్ తో నిర్ణయాలు తీసుకోవడం](3-making-decisions/README.md)
4. [అర레이లు మరియు లూపులు](4-arrays-loops/README.md)
### క్రెడిట్స్
ఈ పాఠాలు ♥️ తో రాశారు [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) మరియు [Chris Noring](https://twitter.com/chris_noring)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**త్యజింపు**:
ఈ డాక్యుమెంట్ [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవను ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటిక్ అనువాదాలలో పొరపాట్లు లేదా లోపాలు ఉండే అవకాశం ఉందని దయచేసి గమనించండి. మూల డాక్యుమెంట్ తన స్వదేశీ భాషలో ప్రామాణిక మూలంగా పరిగణించబడాలి. ముఖ్యమైన సమాచారం కోసం వృత్తిపరమైన మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం వలన కలిగే ఏవైనా తప్పులపై లేదా అర్థం తప్పులపై మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

596
translations/te/3-terrarium/1-intro-to-html/README.md
Unescape View File

@ -0,0 +1,596 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
"translation_date": "2026-01-08T18:30:47+00:00",
"source_file": "3-terrarium/1-intro-to-html/README.md",
"language_code": "te"
}
-->
# Terrarium Project Part 1: HTML కు పరిచయం
```mermaid
journey
title మీ HTML అభ్యసన ప్రయాణం
section స్థాపన
HTML ఫైల్ సృష్టించండి: 3: Student
DOCTYPE జోడించండి: 4: Student
డాక్యుమెంట్ నిర్మాణం: 5: Student
section విషయము
మెటాడేటా జోడించండి: 4: Student
చిత్రాలు చేర్చండి: 5: Student
లేఅవుట్‌ని సజావుగా చేయండి: 5: Student
section సేమాంటిక్స్
సరైన ట్యాగ్‌లను ఉపయోగించండి: 4: Student
접근성 పెంపొందించండి: 5: Student
టెరేరియం నిర్మించండి: 5: Student
```
![Introduction to HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.te.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, లేదా HyperText Markup Language, మీరు ఎప్పుడైనా సందర్శించిన ప్రతి వెబ్‌సైట్ యొక్క మూలాధారం. HTMLని వెబ్ పేజీలకు నిర్మాణాన్ని ఇచ్చే ఎముకల యాడుగా భావించండి – అది ఎక్కడ విషయం ఉండాలి, ఎలా అవి ఏర్పాటు చేయబడ్డాయి, ప్రతి భాగం ఏమిటి అని నిర్వచిస్తుంది. CSS తరువాత మీ HTMLను రంగులు మరియు లేఅవుట్లు తో "డ్రెస్ అప్" చేస్తుంది, మరియు JavaScript ఇంటరాక్టివిటీతో జీవంతం చేస్తుంది, HTML అన్ని ఇతర విషయాలను సాధ్యాన్ని చేసే ప్రాథమిక నిర్మాణాన్ని అందిస్తుంది.
ఈ పాఠంలో, మీరు ఒక వర్చ్యువల్ టెరేరియం ఇంటర్‌ఫేస్ కోసం HTML నిర్మాణం సృష్టించబోతున్నారు. ఈ హ్యాండ్స్-ఆన్ ప్రాజెక్టు ద్వారా మీరు ప్రాథమిక HTML కాన్సెప్ట్స్ నేర్చుకుంటారు మరియు దృశ్యంగా ఆకట్టుకునే దాన్ని నిర్మించబోతున్నారు. మీరు సెమెంటిక్ ఎలిమెంట్స్ ఉపయోగించి విషయం ఎలా ఏర్పాటు చేయాలో, చిత్రాలతో ఎలా పనిచేయాలో, మరియు ఇంటరాక్టివ్ వెబ్ అనువర్తనం కోసం ప్రాథమికాన్ని ఎలా సృష్టించాలో నేర్చుకుంటారు.
ఈ పాఠం ముగింపులో, మీరు ఒక పని చేసే HTML పేజీ చేయబోతారు, ఇది సజీవమైన కాలములలో మొక్కల చిత్రాలను ప్రదర్శిస్తుంది, తదుపరి పాఠంలో స్టైలింగ్ కోసం సిద్ధంగా ఉంటుంది. ఇది మొదట్లో బేసిక్ గా కనపడితే బాగోలేదు – అదే HTML పని చేసేది CSS దృష్టి సౌందర్యాన్ని జోడించడానికి ముందు.
```mermaid
mindmap
root((HTML మూలాధారాలు))
Structure
DOCTYPE ప్రకటన
HTML మూలకం
తల శీర్షిక
శరీర కంటెంట్
Elements
ట్యాగ్లు & లక్షణాలు
స్వీయ ముగింపు ట్యాగ్లు
అంతర్భాగం మూలకాలు
బ్లాక్ వర్సెస్ ఇన్‌లైన్
Content
టెక్స్ట్ మూలకాలు
చిత్రాలు
కంటైనర్లు (div)
జాబితాలు
Semantics
అర్థమయిన ట్యాగ్లు
సులభ ప్రయోజనాత్మకత
స్క్రీన్ రీడర్లు
SEO ప్రయోజనాలు
Best Practices
సరైన అంతర్భాగం
చెల్లుబాటు మార్కప్
వివరణాత్మక Alt టెక్స్ట్
సవ్యంగా ఆగశ్రేణి
```
## లెక్చర్ ‌కు ముందు క్విజ్
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **పարզరం చేసుకోండి మరియు నేర్చుకోండి**: ఈ ఉపయుక్త వీడియో సరాంశాన్ని చూడండి
>
> [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## మీ ప్రాజెక్ట్ సెటప్ చేయడం
HTML కోడ్ లోకి దిగేముందు, మీ టెరేరియం ప్రాజెక్ట్ కోసం సరైన వర్క్ స్పేస్ ను ఏర్పాటు చేద్దాం. మొదటి నుండి ఒక సరిగా నిర్వహించబడిన ఫైల్ నిర్మాణాన్ని సృష్టించడం ఒక కీలక అలవాటు, ఇది మీ వెబ్ అభివృద్ధి ప్రయాణంలో మీకు చాలా ఉపయోగపడుతుంది.
### టాస్క్: మీ ప్రాజెక్ట్ నిర్మాణం సృష్టించండి
మీ టెరేరియం ప్రాజెక్ట్ కోసం ఒక ప్రత్యేక ఫోల్డర్ మరియు మీ మొదటి HTML ఫైల్‌ను సృష్టించబోతున్నారు. మీరు ఉపయోగించగల రెండు విధానాలు ఇక్కడ ఉన్నాయి:
**ఎంపిక 1: Visual Studio Code ఉపయోగించడం**
1. Visual Studio Codeను ఓపెన్ చేయండి
2. "File" → "Open Folder" ను క్లిక్ చేయండి లేదా `Ctrl+K, Ctrl+O` (Windows/Linux) లేదా `Cmd+K, Cmd+O` (Mac) ఉపయోగించండి
3. `terrarium` అనే కొత్త ఫోల్డర్ సృష్టించి దానిని ఎంచుకోండి
4. ఎక్స్‌ప్లోరర్ ప్యానెలులో, "New File" ఐకాన్ పై క్లిక్ చేయండి
5. మీ ఫైల్‌కు పేరు `index.html` పెట్టండి
![VS Code Explorer showing new file creation](../../../../translated_images/vs-code-index.e2986cf919471eb9.te.png)
**ఎంపిక 2: టెర్మినల్ కమాండ్ లు ఉపయోగించడం**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**ఈ కమాండ్ లు ఏమి చేస్తారంటే:**
- **కొత్త డైరెక్టరీ** `terrarium` ను మీ ప్రాజెక్ట్ కోసం సృష్టిస్తుంది
- **terrarium డైరెక్టరీ** లోకి మారుతుంది
- **ఖాళీ `index.html` ఫైల్** సృష్టిస్తుంది
- **ఫైల్‌ను** Visual Studio Code లో సవరించేందుకు ఓపెన్ చేస్తుంది
> 💡 **ప్రో టిప్**: వెబ్ డెవలప్‌మెంట్‌లో `index.html` పేరు ప్రత్యేకం. ఎవరో వెబ్‌సైట్‌ను సందర్శించినప్పుడు, బ్రౌజర్లు సర్వసాధారణంగా `index.html` ను డిఫాల్ట్ పేజీగా చూపిస్తాయి. అంటే, `https://mysite.com/projects/` వంటి URL లో స్పష్టంగా ఫైల్ పేరును ఇవ్వకుండా కూడా `projects` ఫోల్డర్ నుండి `index.html` ఫైల్ సేవ్ చేయబడుతుంది.
## HTML డాక్యుమెంట్ నిర్మాణం అర్థం చేసుకోవడం
ప్రతి HTML డాక్యుమెంట్ బ్రౌజర్లకు అర్థమయ్యేలా మరియు సరి చూపించేందుకు నిర్ధారించడానికి ఒక నిర్దిష్ట నిర్మాణం అనుసరిస్తుంది. ఈ నిర్మాణాన్ని ఒక అధికారిక లేఖ అనుకుంటే – ఇందులో నిర్దిష్ట క్రమంలో అవసరమైన ఎలిమెంట్లు ఉంటాయి, ఇవి గ్రాహకుడు (ఇక్కడ బ్రౌజర్) సరిగా విషయాన్ని ప్రాసెస్ చేయడంలో సహాయపడతాయి.
```mermaid
flowchart TD
A["<!DOCTYPE html>"] --> B["<html>"]
B --> C["<head>"]
C --> D["<title>"]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> శీర్షిక"]
G --> I["<div> కంటైనర్లు"]
G --> J["<img> చిత్రాలు"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
ప్రతి HTML డాక్యుమెంట్‌కు అవసరమైన ప్రాథమిక స్థాపనను జోడించడం ప్రారంభిద్దాం.
### DOCTYPE ప్రకటన మరియు మూల ఎలిమెంట్
ఏ HTML ఫైల్ మొదటి రెండు లైన్లు బ్రౌజర్‌కు డాక్యుమెంట్ యొక్క "పరిచయం":
```html
<!DOCTYPE html>
<html></html>
```
**ఈ కోడ్ ఏమి చేస్తుందో అర్థం చేసుకోవడం:**
- `<!DOCTYPE html>` ను ఉపయోగించి డాక్యుమెంట్ టైప్‌ను HTML5 గా ప్రకటిస్తుంది
- అన్ని పేజీ విషయాలను కలిగించే మూల `<html>` ఎలిమెంట్ సృష్టిస్తుంది
- సరియైన బ్రౌజర్ రేండరింగ్ కొరకు ఆధునిక వెబ్ ప్రమాణాలను ఏర్పాటు చేస్తుంది
- వివిధ బ్రౌజర్ల మరియు డివైస్ లలో సళువు ప్రదర్శనను నిర్ధారిస్తుంది
> 💡 **VS Code సలహా**: VS Codeలో ఏదైనా HTML ట్యాగ్ పై హోవర్ చేసినపుడు MDN వెబ్ డాక్స్ నుండి సహాయక సమాచారం, ఉపయోగం ఉదాహరణలు, బ్రౌజర్ కంపాటబిలిటీ వివరాలు చూడవచ్చు.
> 📚 **మరింత తెలుసుకోండి**: DOCTYPE ప్రకటన బ్రౌజర్లను "quirks mode" లోకి పోకుండా నిరోధిస్తుంది, ఇది చాలా పాత వెబ్‌సైట్లు మద్దతు చేసేందుకు ఉపయోగించబడింది. ఆధునిక వెబ్ అభివృద్ధి సులభమైన `<!DOCTYPE html>` ప్రకటనను ఉపయోగించి [స్టాండర్డ్స్-కంప్లయింట్ రేండరింగ్](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) ను నిర్ధారిస్తుంది.
### 🔄 **శిక్షణాత్మక తనిఖీ**
**ఆరంభించకముందు ఆలోచించండి**: మీరు ఈ క్రిందలు అర్థం చేసుకున్నారా:
- ✅ ప్రతి HTML డాక్యుమెంట్ కి DOCTYPE ప్రకటన ఎందుకు కావాలి
- ✅ `<html>` మూల ఎలిమెంట్ లో ఏమి ఉంటుంది
- ✅ ఈ నిర్మాణం బ్రౌజర్లకు పేజీలను తగినట్టుగా ఎలా చూపించడంలో సహాయపడుతుంది
**త్వరిత స్వీయ-పరీక్ష**: "స్టాండర్డ్స్-కంప్లయింట్ రేండరింగ్" అంటే మీ మాటల్లో మీరు ఎలా వివరిస్తారు?
## అవసరమైన డాక్యుమెంట్ మెటాడేటాను చేర్చడం
HTML డాక్యుమెంట్ యొక్క `<head>` విభాగం బ్రౌజర్లు మరియు సెర్చ్ ఇంజిన్లు అవసరమయ్యే ముఖ్య సమాచారం కలిగి ఉంటుంది, కానీ సందర్శకులు పేజీ పై నేరుగా చూడరారు. ఇది ఒక "వెనుకగడ్డ సమాచారం" లాంటిదిగా భావించండి, ఇది మీ వెబ్ పేజీ యొక్క సరిగ్గా పనిచేయడం మరియు వాడే డివైస్ లకు సరైన ప్రదర్శన అందించడానికి సహాయపడుతుంది.
ఈ మెటాడేటా బ్రౌజర్లకు మీ పేజీ ఎలా ప్రదర్శించాలో, ఎటువంటి క్యారెక్టర్ ఎంకోడింగ్ ఉపయోగించాలో, వివిధ స్క్రీన్ పరిమాణాలను ఎలా నిర్వహించాలో చెప్పుతుంది – ఇవన్నీ ప్రొఫెషనల్, యాక్సెసిబుల్ వెబ్ పేజీలను సృష్టించడానికి అవసరం.
### టాస్క్: డాక్యుమెంట్ హెడ్ను చేర్చండి
మీ ప్రారంభ మరియు ముగింపు `<html>` ట్యాగుల మధ్య ఈ `<head>` విభాగాన్ని చొప్పించండి:
```html
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
```
**ప్రతి ఎలిమెంట్ ఏమి accomplish చేస్తుందో విభజన:**
- బ్రౌజర్ ట్యాబ్స్ మరియు సెర్చ్ ఫలితాలలో కనిపించే పేజీ శీర్షికను సెట్స్ చేస్తుంది
- ప్రపంచవ్యాప్తంగా సరైన టెక్ట్స్ ప్రదర్శన కోసం UTF-8 క్యారెక్టర్ ఎంకోడింగ్‌ను స్పెసిఫై చేస్తుంది
- ఆధునిక Internet Explorer వెర్షన్లతో అనుకూలతను నిర్ధారిస్తుంది
- డివైస్ వెడల్పుకు తగ్గట్టుగా viewport ను సెట్ చేసి స్పందించే డిజైన్‌ను కంఫిగర్ చేస్తుంది
- విషయాన్ని సహజ పరిమాణంలో చూపించేందుకు ప్రారంభ జూమ్ స్థాయిని నియంత్రిస్తుంది
> 🤔 **ఇది గురించి ఆలోచించండి**: మీరు ఇలా ఒక viewport meta ట్యాగ్ సెట్ చేస్తే: `<meta name="viewport" content="width=600">` ఏం జరుగుతుంది? ఇది పేజీని ఎప్పుడూ 600 పిక్సెల్ల వెడల్పుగా బలం చేస్తుంది, ఇది స్పందించే డిజైన్ ను తెగతీస్తుంది! [సరైన viewport కాన్ఫిగరేషన్](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) గురించి మరింత తెలుసుకోండి.
## డాక్యుమెంట్ బాడీని నిర్మించడం
`<body>` ఎలిమెంట్ మీ వెబ్ పేజీ యొక్క అన్ని కనిపించే కంటెంట్ ను కలిగి ఉంటుంది – యూజర్లు చూసే మరియు ఇంటరాక్ట్ చేసే ప్రతిదీ. `<head>` విభాగం బ్రౌజర్ కి సూచనలు అందించినా, `<body>` విభాగంలో అసలు విషయాలు ఉంటాయి: టెక్ట్స్, చిత్రాలు, బటన్లు మరియు ఇతర UI ఎలిమెంట్లు.
బాడీ నిర్మాణాన్ని జోడించి, HTML ట్యాగ్లు ఎలా కలిసి అర్థవంతమైన విషయం సృష్టిస్తాయో అర్థం చేసుకుందాం.
### HTML ట్యాగ్ నిర్మాణం అర్థం చేసుకోవడం
HTMLలో ఎలిమెంట్లను నిర్వచించడానికి స్టాండర్డ్ జోడు ట్యాగ్స్ ఉపయోగిస్తారు. చాలా ట్యాగ్స్ వద్ద ఓపెనింగ్ `<p>` మరియు క్లోజింగ్ `</p>` ట్యాగ్ ఉంటాయి, మధ్యలో విషయముంటుంది: `<p>Hello, world!</p>`. ఇది "Hello, world!" టెక్ట్స్ తో ఒక ప్యారాగ్రాఫ్ ఎలిమెంట్ సృష్టిస్తుంది.
### టాస్క్: బాడీ ఎలిమెంట్ చేర్చండి
మీ HTML ఫైల్‌ను `<body>` ఎలిమెంట్ తో అప్డేట్ చేయండి:
```html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
```
**ఈ సంపూర్ణ నిర్మాణం ఏమి అందిస్తుంది:**
- ప్రాథమిక HTML5 డాక్యుమెంట్ ఫ్రేమ్‌వర్క్‌ను ఏర్పాటు చేస్తుంది
- సరైన బ్రౌజర్ రేండరింగ్ కోసం అవసరమైన మెటాడేటాను కలిగిస్తుంది
- కనిపించే కంటెంట్ కోసం ఖాళీ బాడీని సృష్టిస్తుంది
- ఆధునిక వెబ్ అభివృద్ధి మంచిపనులని అనుసరిస్తుంది
ఇప్పుడు మీరు మీ టెరేరియం కనిపించే అంశాలు జోడించేందుకు సిద్ధంగా ఉన్నారు. విభిన్న భాగాలను ఏర్పాటుచేయడానికి కంటైనర్‌లుగా `<div>` ఎలిమెంట్లను, మొక్కల చిత్రాలను ప్రదర్శించడానికి `<img>` ఎలిమెంట్లను ఉపయోగిస్తాము.
### చిత్రాలతో మరియు లేఅవుట్ కంటైనర్‌లతో పని చేయడం
HTMLలో చిత్రాలు ప్రత్యేకం, ఎందుకంటే అవి "సెల్ఫ్-క్లోజింగ్" ట్యాగ్స్ ఉపయోగిస్తాయి. కంటెంట్ చుట్టూ కూర్చుకునే `<p></p>` లాంటి ఎలిమెంట్లకు భిన్నంగా, `<img>` ట్యాగ్ లో అవసరమైన సమాచారం ట్యాగ్ లోనేని `src` వంటి అట్రిబ్యూట్‌లతో ఉంటుంది మరియు యాక్సెసిబిలిటీ కోసం `alt` అట్రిబ్యూట్ ఉంటుంది.
మీ HTMLకు చిత్రాలను జోడించే ముందు, ప్రాజెక్ట్ ఫైళ్ళను సక్రమంగా ఏర్పాటు చేయాలి. అందుకోసం `images` ఫోల్డర్ సృష్టించి, మొక్కల చిత్రాలను అందులో ఉంచాలి.
**మొదట, మీ చిత్రాలను సెట్ చేయండి:**
1. మీ టెరేరియం ప్రాజెక్ట్ ఫోల్డర్ లో `images` ఫోల్డర్ ను సృష్టించండి
2. [solution folder](../../../../3-terrarium/solution/images) నుండి మొక్కల చిత్రాలను డౌన్‌లోడ్ చేయండి (మొత్తం 14 మొక్కల చిత్రాలు)
3. అన్ని మొక్కల చిత్రాలను కొత్త `images` ఫోల్డర్ లో కాపీ చేయండి
### టాస్క్: మొక్క ప్రదర్శన లేఅవుట్ సృష్టించండి
ఇప్పుడు మీ `<body></body>` ట్యాగుల మధ్యలో రెండు కాలములుగా ఏర్పాటు చేసిన మొక్కల చిత్రాలను జోడించండి:
```html
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc43.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad89.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a7.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebcc.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b656994.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621.te.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc2.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84e.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf5.te.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba.te.png" />
</div>
</div>
</div>
```
**దశల వారీగా, ఈ కోడ్‌లో ఏమి జరుగుతుందో:**
- `id="page"` తో ప్రధాన పేజీ కంటైనర్ సృష్టించడం, అన్ని కంటెంట్ ను కలిగి ఉంటుంది
- రెండు కాలమ్ కంటైనర్‌లు సృష్టించడం: `left-container` మరియు `right-container`
- ఎడమ కాలమ్‌లో 7 మొక్కలు, కుడి కాలమ్‌లో 7 మొక్కలు ఏర్పాటు చేయడం
- ప్రతి మొక్క చిత్రాన్ని వ్యక్తిగత స్థానం కోసం `plant-holder` div లో చుట్టడం
- తదుపరి పాఠంలో CSS స్టైలింగ్ కోసం సమానమైన క్లాస్ పేర్లను అప్లై చేయడం
- JavaScript ఇంటరాక్షన్ కోసం ప్రతి మొక్క చిత్రానికి ప్రత్యేక ID కేటాయించడం
- చిత్రాల ఫోల్డర్ వైపు సరిగా ఉన్న ఫైల్ పథాలను ఉపయోగించడం
> 🤔 **దీన్ని పరిశీలించండి**: ప్రస్తుతం అన్ని చిత్రాలకు ఒకే `alt` టెక్స్ "plant" ఇవ్వబడింది. ఇది యాక్సెసిబిలిటీ కోసం సరియైనది కాదు. స్క్రీన్ రీడర్ వినియోగదారులు అదే "plant" పదాన్ని 14 సార్లు వినిపించుకునే Gelegenheit వారు ఏ మొక్క చూపబడుతున్నదో తెలియదు. ప్రతి చిత్రానికి ఉత్తమంగా వివరించే `alt` టెక్స్ ఎలాంటిదిగా ఉండాలి?
> 📝 **HTML ఎలిమెంట్ రకాలు**: `<div>` ఎలిమెంట్లు "బ్లాక్-లెవల్"వి, పూర్తి వెడల్పు తీసుకుంటాయి, `<span>` ఎలిమెంట్లు "ఇన్‌లైన్" మరియు అవసరమైన వెడల్పు మాత్రమే తీసుకుంటాయి. మీరు ఈ `<div>` ట్యాగ్స్ అన్నింటిని `<span>` ట్యాగ్స్ గా మార్చితే ఏమి జరుగుతుందని మీరు అనుకుంటారు?
### 🔄 **శిక్షణాత్మక తనిఖీ**
**నిర్మాణం అర్థం చేసుకోవడం**: మీ HTML నిర్మాణాన్ని ఒక నిమిషం సమీక్షించండి:
- ✅ మీ లేఅవుట్ లో ప్రధాన కంటైనర్ లను గుర్తించగలరా?
- ✅ ప్రతి చిత్రానికి ప్రత్యేక ID ఉండటం ఎందుకు తెలుసా?
- ✅ `plant-holder` divs ఉద్దేశ్యాన్ని మీరు ఎలా వివరిస్తారు?
**దృశ్య పరీక్ష**: మీ HTML ఫైల్‌ను బ్రౌజర్‌లో ఓపెన్ చేయండి. మీరు చూడగలిగేది:
- ఒక సాధారణ మొక్కల జాబితా
- రెండు కాలములలో ఏర్పాటు చేసిన చిత్రాలు
- సింపుల్, స్టైల్ చేయబడని లేఅవుట్
**గమనిక**: ఈ సాధారణ రూపం నేరుగా CSS స్టైలింగ్ వరకు HTML ఎలా కనిపించాలో చూపిస్తుంది!
ఈ మార్కప్ తో, మొక్కలు స్క్రీన్ పై కనపడతారు, అయితే అవి ఇంకా అద్భుతంగా కనిపించవు – తదుపరి పాఠంలో CSS అలాగే చేస్తుంది! ఇప్పటి కోసం మీరు ఒక బలమైన HTML పునాది కలిగి ఉన్నారు, ఇది సక్రమంగా విషయాన్ని ఏర్పాటు చేస్తుంది మరియు యాక్సెసిబిలిటీ యొక్క ఉత్తమ పద్ధతులను పాటిస్తుంది.
## యాక్సెసిబిలిటీ కోసం సెమెంటిక్ HTML ఉపయోగించడం
సెమెంటిక్ HTML అంటే HTML ఎలిమెంట్లను వాటి అర్థం మరియు ఉద్దేశ్యానికి అనుగుణంగా ఎంచుకోవడం, కేవలం ఆ కంటెంట్ ఎలా కనిపిస్తుందో కాని కాదు. మీరు సెమెంటిక్ మార్కప్ ఉపయోగించినప్పుడు, మీరు మీ విషయం నిర్మాణం మరియు అర్థం పై బ్రౌజర్లు, సెర్చ్ ఇంజిన్లు మరియు సహాయక సాంకేతికతలు (ఉదా: స్క్రీన్ రీడర్స్) కు కమ్యూనికేట్ చేస్తారు.
```mermaid
flowchart TD
A[విషయం జోడించాలా?] --> B{ఏ విధమైనది?}
B -->|ప్రధాన శీర్షిక| C["<h1>"]
B -->|ఉపశీర్షిక| D["<h2>, <h3>, etc."]
B -->|ప్యారాగ్రాఫ్| E["<p>"]
B -->|జాబితా| F["<ul>, <ol>"]
B -->|నావిగేషన్| G["<nav>"]
B -->|ఆర్టికల్| H["<article>"]
B -->|సెక్షన్| I["<section>"]
B -->|సాధారణ కంటైనర్| J["<div>"]
C --> K[స్క్రీన్ రీడర్లు ప్రధాన శీర్షికగా ప్రకటిస్తాయి]
D --> L[సరైన శీర్షిక శ్రేణిని సృష్టిస్తుంది]
E --> M[సరిగా వ్యాసం శ్రేణిని అందిస్తుంది]
F --> N[జాబితా నావిగేషన్ షార్ట్‌కట్టులను సక్రియం చేస్తుంది]
G --> O[నావిగేషన్ ల్యాండ మార్కులను గుర్తిస్తుంది]
H --> P[స్వతంత్ర కంటెంట్‌ను గుర్తిస్తుంది]
I --> Q[సంబంధిత కంటెంట్‌ను సమూహీకరిస్తుంది]
J --> R[సెమాన్టిక్ ట్యాగ్ సరిపడనప్పుడు మాత్రమే ఉపయోగించండి]
style C fill:#4caf50
style D fill:#4caf50
style E fill:#4caf50
style F fill:#4caf50
style G fill:#2196f3
style H fill:#2196f3
style I fill:#2196f3
style J fill:#ff9800
```
ఈ విధానం మీ వెబ్‌సైట్లను వికలాంగత కలిగినవారికి మరింత యాక్సెసిబుల్‌గా చేస్తుంది మరియు సెర్చ్ ఇంజిన్లు మీ కంటెంట్ ను బాగా అర్థం చేసుకోవడానికి సహాయపడుతుంది. ఇది ఆధునిక వెబ్ అభివృద్ధి యొక్క ప్రాథమిక సిద్దాంతం, ఇది అందరికీ మెరుగైన అనుభవాలను సృష్టిస్తుంది.
### సెమెంటిక్ పేజీ శీర్షిక జోడించడం
మీ టెరేరియం పేజీకి సరైన హెడింగ్ జత చేయండి. ఈ లైన్ ను మీ ప్రారంభ `<body>` ట్యాగ్ తర్వాత వెంటనే చొప్పించండి:
```html
<h1>My Terrarium</h1>
```
**సెమెంటిక్ మార్కప్ ఎందుకు ముఖ్యం:**
- స్క్రీన్ రీడర్లు పేజీ నిర్మాణాన్ని నావిగేట్ చేయడంలో, అర్థం చేసుకోవడంలో సహాయపడుతుంది
- కంటెంట్ హైరార్కీ స్పష్టంగా ఉండడం ద్వారా సెర్చ్ ఇంజిన్ ఆప్టిమైజేషన్ (SEO) మెరుగుపడుతుంది
- దృష్టి లోపం లేదా మానసిక తేడాలు ఉన్న వినియోగదారుల యాక్సెసిబిలిటీ పెరుగుతుంది
- అన్ని డివైసులు మరియు ప్లాట్‌ఫారమ్‌లపై మెరుగైన వినియోగదారుల అనుభవాలను సృష్టిస్తుంది
- ప్రొఫెషనల్ డెవలప్మెంట్‌ కోసం వెబ్ ప్రమాణాలు మరియు ఉత్తమ పద్ధతులను అనుసరిస్తుంది
**సెమెంటిక్ మరియు అసెమెంటిక్ ఎంపికల ఉదాహరణలు:**
| ప్రయోజనం | ✅ సెమెంటిక్ ఎంపిక | ❌ అసెమెంటిక్ ఎంపిక |
|---------|-------------------|------------------------|
| ప్రధాన శీర్షిక | `<h1>శీర్షిక</h1>` | `<div class="big-text">శీర్షిక</div>` |
| నావిగేషన్ | `<nav><ul><li></li></ul></nav>` | `<div class="menu"><div></div></div>` |
| బటన్ | `<button>నొక్కండి</button>` | `<span onclick="...">నొక్కండి</span>` |
| ఆర్టికల్ కంటెంట్ | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
> 🎥 **అమల్లో చూడండి**: [వెబ్ పేజీలతో స్క్రీన్ రీడర్లు ఎలా ఇంటరాక్ట్ అవుతాయో చూడండి](https://www.youtube.com/watch?v=OUDV1gqs9GA), మరియు సెమెంటిక్ మార్కప్ యాక్సెసిబిలిటీకి ఎందుకు ముఖ్యం అనేది అర్థం చేసుకోండి. సరైన HTML నిర్మాణం ఎలా వినియోగదారులకి సులభంగా నావిగేట్ చేయడానికి సహాయపడుతుందో గమనించండి.
## టెరేరియం కంటైనర్ సృష్టించడం
ఇప్పుడు టెరేరియం యొక్క HTML నిర్మాణాన్ని జోడించండి – మొక్కలు చివరికి ఉంచగల ప్లాస్టిక్ గ్లాస్ కంటైనర్. ఈ విభాగం ఒక ముఖ్యమైన భావనని చూపిస్తుంది: HTML నిర్మాణం అందిస్తుంది, కానీ CSS స్టైలింగ్ లేకుండా, ఈ ఎలిమెంట్లు ఇంకా కనిపించవు.
టెరేరియం మార్కప్ లో అందుబాటులో ఉండే క్లాస్ పేర్లు తదుపరి పాఠంలో CSS స్టైలింగ్ చాలా సులభతరం మరియు నిర్వహించదగినవి చేస్తాయి.
### టాస్క్: టెరేరియం నిర్మాణం చేర్చండి
ఈ మార్కప్ ను చివరి `</div>` ట్యాగు ముందు (పేజీ కంటైనర్ మూసే ట్యాగు ముందు) చొప్పించండి:
```html
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
```
**ఈ టెరేరియం నిర్మాణం అర్థం చేసుకోవడం:**
- స్టైలింగ్ కోసం ప్రత్యేక IDతో ప్రధాన టెరేరియం కంటైనర్ సృష్టిస్తుంది
- **ప్రతీ విజువల్ భాగానికి** వేరే వేరే ఎలిమెంట్లను నిర్వచిస్తుంది (ఉపరి భాగం, గోడలు, మన్ను, దిగువ భాగం)
- **గ్లాసు ప్రతిబింబ ప్రభావాల కోసం** నెస్టెడ్ ఎలిమెంట్లను కలిగి ఉంటుంది (గ్లోసీ ఎలిమెంట్లు)
- **ప్రతి ఎలిమెంటు యొక్క ప్రయోజనాన్ని స్పష్టంగా సూచించే** వివరణాత్మక క్లాస్ పేర్లను ఉపయోగిస్తుంది
- **గ్లాస్ టెర్రారియం రూపాన్ని సృష్టించేందుకు** CSS స్టైలింగ్ కోసం నిర్మాణాన్ని సిద్ధం చేస్తుంది
> 🤔 **ఏమైనా గమనించారా?**: మీరు ఈ మార్కప్‌ని చేర్చినప్పటికీ, మీరు పేజీలో కొత్తగా ఏదీ చూడరు! ఇది HTML నిర్మాణాన్ని మరియు CSS రూపాన్ని ఎలా కల్పించేదో సంపూర్ణంగా తెలియజేస్తుంది. ఈ `<div>` ఎలిమెంట్లు ఉన్నప్పటికీ వాటికి ఇంకా ఏవైనా దృశ్య శైలులు లేవు – అవి తర్వాతి పాఠంలో వస్తాయి!
```mermaid
flowchart TD
A[HTML డాక్యుమెంట్] --> B[డాక్యుమెంట్ హెడ్]
A --> C[డాక్యుమెంట్ బాడీ]
B --> D[శీర్షిక మూలకం]
B --> E[మెటా క్వార్సెట్]
B --> F[మెటా వ్యూవ్‌పోర్ట్]
C --> G[ప్రధాన శీర్షిక]
C --> H[పేజీ కంటైనర్]
H --> I[ఎడమ కంటైనర్‌లో 7 మొక్కలు]
H --> J[కుడి కంటైనర్‌లో 7 మొక్కలు]
H --> K[టెర్రేరియం నిర్మాణం]
style A fill:#e1f5fe
style B fill:#fff3e0
style C fill:#e8f5e8
style H fill:#f3e5f5
```
### 🔄 **ఉపాధ్యాయుల చెక్-ఇన్**
**HTML నిర్మాణ నైపుణ్యం**: ముందుకు సాగేముందు, మీరు ఈ క్రింది విషయాలను తెలుసుకోండి:
- ✅ HTML నిర్మాణం మరియు దృశ్య రూపంలోని తేడాను వివరించగలగాలి
- ✅ సాందర్భిక (semantic) మరియు అసాందర్భిక (non-semantic) HTML ఎలిమెంట్లను గుర్తించగలగాలి
- ✅ సరైన మార్కప్ యాక్సెసిబిలిటీకి ఎలా ఉపయోగపడుతుందో వివరించగలగాలి
- ✅ పూర్తి డాక్యుమెంట్ ట్రీ నిర్మాణాన్ని గుర్తించగలగాలి
**మీ అర్థం ట్రై చేయండి**: మీ HTML ఫైల్‌ను జావాస్క్రిప్ట్ డిసేబుల్ చేసి మరియు CSS తీసేసి బ్రౌజర్‌లో తెరవండి. ఇది మీరు సృష్టించిన ఖచ్చితమైన సాందర్భిక నిర్మాణాన్ని చూపిస్తుంది!
---
## GitHub Copilot ఏజెంట్ ఛాలెంజ్
Agent మోడ్ ఉపయోగించి క్రింది ఛాలెంజ్‌ను పూర్తి చేయండి:
**వివరణ:** టెర్రారియం ప్రాజెక్టుకు చేర్చగల ఒక మొక్కల సంరక్షణ మార్గదర్శక భాగం కోసం సాందర్భిక HTML నిర్మాణాన్ని సృష్టించండి.
**ప్రాంప్ట్:** "Plant Care Guide" అనే ప్రధాన శీర్షికతో ఒక సెక్షన్ సృష్టించండి, దాని కింద "Watering", "Light Requirements", మరియు "Soil Care" అనే మూడు ఉపసెక్ట్‌లతో పాటు ప్రతి ఉపశీర్షికకి సంబంధించిన మొక్కల సంరక్షణ సమాచారంతో కూడిన పేరాగ్రాఫ్లు ఉండాలి. సరైన సాందర్భిక HTML ట్యాగ్స్ `<section>`, `<h2>`, `<h3>`, మరియు `<p>` ఉపయోగించి కంటెంట్‌ను సక్రమంగా నిర్మించండి.
ఇక్కడ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## HTML చరిత్రను అన్వేషించే ఛాలెంజ్
**వెబ్ అభివృద్ధి గురించిన అభ్యాసం**
HTML 1990లో టిమ్ బర్నర్స్-్లీ CERNలో మొదటి వెబ్ బ్రౌజర్ సృష్టించినప్పటి నుండి గణనీయంగా అభివ్రుద్ధి చెందింది. కొన్ని పాత ట్యాగ్స్ వంటి `<marquee>` ప్రస్తుతం నిషేధించబడ్డాయి ఎందుకంటే అవి ఆధునిక యాక్సెసిబిలిటీ ప్రమాణాలు మరియు రెస్పాన్సివ్ డిజైన్ సూత్రాలతో సరిపడవు.
**ఈ ప్రయోగాన్ని నిర్వహించండి:**
1. తాత్కాలికంగా మీ `<h1>` శీర్షికను `<marquee>` ట్యాగ్‌లో చుట్టండి: `<marquee><h1>My Terrarium</h1></marquee>`
2. మీ పేజీని బ్రౌజర్‌లో తెరచి స్క్రోల్లింగ్ ప్రభావాన్ని పరిశీలించండి
3. ఈ ట్యాగ్ ఎందుకు నిషేధించబడిందో ఆలోచించండి (సూచన: వినియోగదారుల అనుభవం మరియు యాక్సెసిబిలిటీపై దృష్టి పెడతుంది)
4. `<marquee>` ట్యాగ్ తీసివేసి సాందర్భిక మార్కప్‌కు తిరిగి రావాలి
**పరిశీలించవలసిన ప్రశ్నలు:**
- స్క్రోలింగ్ శీర్షిక దృష్టి లోపం ఉన్నవారు లేదా గమనిక స్పందనకు ఆందోళన ఉన్న వినియోగదారులపై ఎలా ప్రభావం చూపుతుంది?
- ఆమోదయోగ్యమైన దృష్టితో ఏ ఆధునిక CSS సాంకేతికతలు ఇలాంటి దృశ్య ప్రభావాలను సాధించగలవు?
- ప్రస్తుత వెబ్ ప్రమాణాలను ఉపయోగించడం ఏ కారణంగా అవసరం, ఎందుకంటే నిషేదించిన ఎలిమెంట్లను ఉపయోగించకూడదా?
[నిషేధించిన మరియు పాతతరగతి HTML ఎలిమెంట్ల గురించి](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) మరింత తెలుసుకోండి, అవి ఎలా వెబ్ ప్రమాణాలను మెరుగుపరుస్తాయి.
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/16)
## సమీక్ష & స్వయంగా అధ్యయనం
**మీ HTML జ్ఞానాన్ని లోతుగా చేసుకోండి**
HTML వెబ్ స్థాపనకు 30 ఏళ్ల పైనుగా మూలస్తంభమైనది, ఒక సరళమైన డాక్యుమెంట్ మార్కప్ భాష నుండి సంక్లిష్ట అనువర్తనాల వేదికగా అభివృద్ది చెందినది. ఈ అభివృద్ది తెలుసుకోవడం ఆధునిక వెబ్ ప్రమాణాలు అర్థం చేసుకోవడానికి మరియు మెరుగైన అభివృద్ధి నిర్ణయాలు తీసుకోవడానికి సహాయపడుతుంది.
**ధారిత అభ్యాస మార్గాలు:**
1. **HTML చరిత్ర మరియు అభివృద్ది**
- HTML 1.0 నుండి HTML5 వరకు టైమ్‌లైన్ పరిశోధించండి
- కొన్ని ట్యాగ్లు ఎందుకు నిషేధించబడ్డాయో తెలుసుకోండి (యాక్సెసిబిలిటీ, మొబైల్ అనుకూలత, నిర్వహణ)
- రావాల్సిన HTML లక్షణాలు మరియు ప్రతిపాదనలు తెలుసుకోండి
2. **సాందర్భిక HTML లోతైన అధ్యయనం**
- [HTML5 సాందర్భిక ఎలిమెంట్ల](https://developer.mozilla.org/docs/Web/HTML/Element) పూర్తి జాబితాను అధ్యయనం చేయండి
- ఎప్పుడు `<article>`, `<section>`, `<aside>`, మరియు `<main>` ఉపయోగించాలో సాధన చేయండి
- మెరుగైన యాక్సెసిబిలిటీ కోసం ARIA గుణల గురించి నేర్చుకోండి
3. **ఆధునిక వెబ్ అభివృద్ధి**
- Microsoft Learn లో [రెస్పాన్సివ్ వెబ్‌సైట్ల నిర్మాణం](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) గురించి తెలుసుకోండి
- HTML ఎలా CSS మరియు జావాస్క్రిప్ట్‌తో కలిసిఉంది అనేదాన్ని అర్థం చేసుకోండి
- వెబ్ పనితనం మరియు SEO ఉత్తమ ప్రాక్టీసులు తెలుసుకోండి
**పరిశీలన ప్రశ్నలు:**
- మీరు ఏ పాతతరగతి HTML ట్యాగ్లు కనుగొన్నారు, అవి ఎందుకు తొలగించబడ్డాయి?
- భవిష్యత్ వెర్షన్లకు కొత్త HTML లక్షణాలు ఏమేమి ప్రతిపాదిస్తున్నారు?
- సాందర్భిక HTML వెబ్ యాక్సెసిబిలిటీ మరియు SEOకు ఎలా సహాయపడుతుంది?
### ⚡ **తరువాతి 5 నిమిషాల్లో మీరు చేయగలరు**
- [ ] DevTools (F12) తెరిచి మీ ఇష్టమైన వెబ్‌సైట్ యొక్క HTML నిర్మాణాన్ని పరిశీలించండి
- [ ] `<h1>`, `<p>`, మరియు `<img>` వంటి ప్రాథమిక ట్యాగ్లతో సులభమైన HTML ఫైల్ సృష్టించండి
- [ ] W3C HTML వాలిడేటర్ ఆన్‌లైన్ ద్వారా మీ HTML ని ధృవీకరించండి
- [ ] మీ HTMLకి `<!-- comment -->` ఉపయోగించి వ్యాఖ్యలు జోడించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పోస్ట్-లెసన్ క్విజ్ పూర్తి చేసి సాందర్భిక HTML భావనలను పునరावलोकన చేయండి
- [ ] సరైన HTML నిర్మాణంతో మీ గురించి సరళమైన వెబ్‌పేజీని రూపొందించండి
- [ ] వివిధ హెడింగ్ స్థాయిలు మరియు టెక్స్ట్ ఫార్మాటింగ్ ట్యాగ్లతో ప్రయోగం చేయండి
- [ ] మల్టీమీడియా ఇంటిగ్రేషన్ కోసం చిత్రాలు మరియు లింకులను జోడించండి
- [ ] మీరు ఇప్పటివరకు ప్రయత్నించని HTML5 లక్షణాలపై పరిశోధన చేయండి
### 📅 **మీ వారాంతపు HTML ప్రయాణం**
- [ ] సాందర్భిక మార్కప్‌తో టెర్రారియం ప్రాజెక్ట్ అసైన్‌మెంట్ పూర్తి చేయండి
- [ ] ARIA లేబుల్స్ మరియు పాత్రలతో యాక్సెసిబుల్ వెబ్‌పేజీ సృష్టించండి
- [ ] వివిధ ఇన్‌పుట్ టైప్లతో ఫారమ్ సృష్టి అభ్యాసం చేయండి
- [ ] localStorage లేదా geolocation వంటి HTML5 APIs అన్వేషించండి
- [ ] రెస్పాన్సివ్ HTML నమూనాలు మరియు మొబైల్-ఫస్ట్ డిజైన్ అధ్యయనం చేయండి
- [ ] ఇతర డెవలపర్‌ల HTML కోడ్ పునః సమీక్షించండి ఉత్తమ అభ్యాసాల కోసం
### 🌟 **మీ నెలల తరంపాటు వెబ్ ఫౌండేషన్**
- [ ] మీ HTML నైపుణ్యాలను ప్రదర్శించే పోర్ట్‌ఫోలియో వెబ్‌సైట్ నిర్మించండి
- [ ] Handlebars వంటి ఫ్రేమ్‌వర్క్‌తో HTML టెంప్లేటింగ్ నేర్చుకోండి
- [ ] HTML డాక్యుమెంటేషన్ మెరుగుపరచడంలో ఓపెన్ సోర్స్ ప్రాజెక్టులకు కాంట్రిబ్యూట్ చేయండి
- [ ] కస్టమ్ ఎలిమెంట్స్ వంటి అధునాతన HTML భావనలను మాస్టరు చేయండి
- [ ] HTMLని CSS ఫ్రేమ్‌వర్క్స్ మరియు జావాస్క్రిప్ట్ లైబ్రరీలతో సమన్వయంచేయండి
- [ ] HTML పునాది నేర్చుకుంటున్న ఇతరులకు మార్గదర్శకత్వం ఇవ్వండి
## 🎯 మీ HTML నైపుణ్యాల కాలపరిమితి
```mermaid
timeline
title HTML నేర్చుకునే ప్రగతి
section పెట్టుదల (5 నిమిషాలు)
డాక్యుమెంట్ నిర్మాణం: DOCTYPE ప్రకటన
: HTML మూల మూలకం
: హెడ్ vs బాడీ అవగాహన
section మెటాడేటా (10 నిమిషాలు)
అవసరమైన మెటా ట్యాగ్లు: అక్షర సంకేతీకరణ
: వ్యూపోర్ట్ కాన్ఫిగరేషన్
: బ్రౌజర్ అనుకూలత
section కంటెంట్ సృష్టి (15 నిమిషాలు)
చిత్ర ఏకీకరణ: సరైన ఫైల్ మార్గాలు
: ఆల్ట్ టెక్స్ట్ ప్రాముఖ్యత
: స్వయంసంభంధిత ట్యాగ్లు
section లేఅవుట్ నిర్వహణ (20 నిమిషాలు)
కంటెయినర్ వ్యూహం: నిర్మాణానికి డివ్ మూలకాలు
: క్లాస్ మరియు ID పేరు కల్పన
: గుళికగా ఉన్న మూలక స్థాయి
section సిమాన్టిక్ నైపుణ్యం (30 నిమిషాలు)
అర్ధమయిన మార్కప్: శీర్షిక స్థాయి
: స్క్రీన్ రీడర్ నావిగేషన్
: ప్రాప్యత ఉత్తమ ఆచరణలు
section అభివృద్ధి భావనలు (1 గంట)
HTML5 ఫీచర్స్: ఆధునిక సిమాన్టిక్ మూలకాలు
: ARIA లక్షణాలు
: పనితీరు పరంగా పరిశీలనలు
section ప్రొఫెషనల్ నైపుణ్యాలు (1 వారం)
కోడ్ నిర్వహణ: ఫైల్ నిర్మాణ నమూనాలు
: నిర్వహించదగిన మార్కప్
: జట్టు సహకారం
section నిపుణుల స్థాయి (1 నెల)
ఆధునిక వెబ్ ప్రమాణాలు: ప్రోగ్రెస్ివ్ ఎन्हాన్స్‌మెంట్
: క్రాస్-బ్రౌజర్ అనుకూలత
: HTML స్పెసిఫికేషన్ నవీకరణలు
```
### 🛠️ మీ HTML టూల్‌కిట్ సారాంశం
ఈ పాఠం పూర్తిచేసిన తర్వాత, మీ వద్ద ఉంది:
- **డాక్యుమెంట్ నిర్మాణం**: సరైన DOCTYPEతో పూర్తి HTML5 ఫౌండేషన్
- **సాందర్భిక మార్కప్**: యాక్సిసిబిలిటీ మరియు SEOను మెరుగుపరచే అర్థవంతమైన ట్యాగ్లు
- **చిత్ర ఇంటిగ్రేషన్**: సరైన ఫైల్ కంట్రోల్ మరియు alt టెక్స్ట్ విధానం
- **లేఅవుట్ కంటైనర్లు**: వివరణాత్మక క్లాస్ పేర్లతో సూచించే div ఉపయోగం
- **యాక్సెసిబిలిటీ అవగాహన**: స్క్రీన్ రీడర్ నావిగేషన్ అర్థం చేసుకోవడం
- **ఆధునిక ప్రమాణాలు**: ప్రస్తుత HTML5 ఆచారాలు మరియు పాతతరగతి ట్యాగ్ల జ్ఞానం
- **ప్రాజెక్ట్ ఫౌండేషన్**: CSS స్టైలింగ్ మరియు జావాస్క్రిప్ట్ ఇంటరాక్టివిటీ కోసం దృఢమైన ఆధారం
**తరువాతి అడుగులు**: మీ HTML నిర్మాణం CSS స్టైలింగ్ కోసం సిద్ధంగా ఉంది! మీరు సృష్టించిన సాందర్భిక ఫౌండేషన్ తర్వాతి పాఠాన్ని చాలా సులభంగా అర్థం చేసుకోవడానికి సహాయపడుతుంది.
---
## అసైన్‌మెంట్
[Practice your HTML: Build a blog mockup](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) సహాయంతో అనువదించబడింది. మేము నిజసంబంధత కోసం ప్రయత్నిస్తామని గమనించండి, అయితే ఆటోమెటిక్ అనువాదాలలో దోషాలు లేదా అసత్యతలు ఉండవచ్చు. స్థానిక భాషలో ఉన్న అసలు పత్రం అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సిఫార్సుచేయబడుతుంది. ఈ అనువాదం వాడుక వల్ల కలిగే ఏ ధోకా లేదా తప్పుగా అర్థం చేసుకున్న పరిస్థితులకి మేము బాధ్యులం కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

154
translations/te/3-terrarium/1-intro-to-html/assignment.md
Unescape View File

@ -0,0 +1,154 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "650e63282e1dfa032890fcf5c1c4119d",
"translation_date": "2026-01-08T18:49:25+00:00",
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
"language_code": "te"
}
-->
# HTML వ్యాయామ కైసేంద్రం: బ్లాగ్ మాక్‌ప్ తయారు చేయండి
## అభ్యాస లక్ష్యాలు
మీ HTML జ్ఞానాన్ని ఉపయోగించి పూర్తిగా బ్లాగ్ హోమ్‌పేజ్ నిర్మాణాన్ని రూపకల్పన చేసి కోడింగ్ చేయండి. ఈ ప్రాక్టికల్ అసైన్‌మెంట్ సాం‌వేదనాత్మక HTML భావనలు, ప్రాప్తి సౌలభ్యత ఉత్తమ పద్ధతులు, మరియు పటిష్ట కోడ్ సంస్కరణ నైపుణ్యాలను మీరు వెబ్ డెవలప్‌మెంట్ ప్రయాణంలో ఉపయోగించడానికి బలోపేతం చేస్తుంది.
**ఈ అసైన్‌మెంట్ పూర్తి చేస్తే, మీరు:**
- కోడింగ్‌కు ముందుగా వెబ్‌సైట్ లేఅవుట్లను ప్రణాళిక చేయడం అభ్యసిస్తారు
- సాందర్భిక HTML అంశాలను సరైన విధంగా ఉపయోగిస్తారు
- సౌకర్యవంతమైన, బాగా నిర్మించబడిన మార్కప్ సృష్టిస్తారు
- వ్యాఖ్యలు మరియు ఆర్గనైజేషన్ తో ప్రొఫెషనల్ కోడింగ్ అలవాట్లు అభివృద్ధి చేస్తారు
## ప్రాజెక్ట్ అవసరాలు
### పార్ట్ 1: రూపకల్పన ప్రణాళిక (విజువల్ మాక్‌ప్)
**మీ బ్లాగ్ హోమ్‌పేజ్ యొక్క విజువల్ మాక్‌ప్ క్రింది అంశాలతో సృష్టించండి:**
- సైట్ శీర్షిక మరియు నావిగేషన్ కలిగిన హెడ్డర్
- కనీసం 2-3 బ్లాగ్ పోస్ట్ ప్రివ్యూస్ తో ప్రధాన విషయాలు
- అదనపు సమాచారం (గురించి సెక్షన్, నూతన పోస్ట్‌లను, వర్గాలు) కోసం సైడ్బార్
- సంప్రదింపు సమాచారం లేదా లింకులు కలిగిన ఫుటర్
**మాక్‌ప్ సృష్టించే ఎంపికలు:**
- **చെയిన ముట్టడి డిజైన్**: కాగితం మరియు పెన్సిల్ ఉపయోగించి, మీ డిజైన్‌ని ఫోటోగ్రాఫ్ చేయండి లేదా స్కాన్ చేయండి
- **డిజిటల్ పరికరాలు**: Figma, Adobe XD, Canva, PowerPoint, లేదా ఏదైనా డ్రాయింగ్ యాప్
- **వైరాఫ్రేమ్ పరికరాలు**: Balsamiq, MockFlow, లేదా ఇలాంటి వైరాఫ్రేమింగ్ సాఫ్ట్‌వేర్
**మీ మాక్‌ప్ సెక్షన్లకు లేబెల్స్ జోడించండి** మీ ప్రణాళిక ప్రకారం ఉపయోగించబోయే HTML అంశాలను సూచిస్తూ (ఉదా: "Header - `<header>`", "Blog Posts - `<article>`").
### పార్ట్ 2: HTML అంశ ప్రణాళిక
**మీ మాక్‌ప్ యొక్క ప్రతీ సెక్షన్‌ను కింద పేర్కొన్న ప్రత్యేక HTML అంశాలతో మ్యాపింగ్ చేసిన జాబితా తయారుచేయండి:**
```
Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>
```
**అవసరమైన అంశాలు:**
మీ HTML లో ఈ జాబితాలోని కనీసం 10 విభిన్న సాందర్భిక అంశాలు ఉండాలి:
- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>`
- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>`
### పార్ట్ 3: HTML అమలు
**ఈ ప్రమాణాలను అనుసరించి మీ బ్లాగ్ హోమ్‌పేజ్ కోడ్ చేయండి:**
1. **డాక్యుమెంట్ స్రవంతి**: సరైన DOCTYPE, html, head, మరియు body అంశాలు చేర్చండి
2. **సాం‌వేదనాత్మక మార్కప్**: HTML అంశాలను వారి నిజమైన ఉద్దేశ్యార్థం కోసం ఉపయోగించండి
3. **ప్రాప్తి సౌలభ్యం**: చిత్రాలకు దశలవార్ టెక్స్ట్ ఇవ్వండి మరియు అర్థవంతమైన లింక్ టెక్స్టును చేర్చండి
4. **కోడ్ నాణ్యత**: సక్రమమైన ఇంటెండేషన్ మరియు అర్థవంతమైన వ్యాఖ్యలు ఉపయోగించండి
5. **విషయం**: నిజమైన బ్లాగ్ కంటెంట్ చేర్చండి (ప్లేస్‌హోల్డర్ టెక్స్ట్ ఉపయోగించవచ్చు)
**నమూనా HTML నిర్మాణం:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Blog</title>
</head>
<body>
<!-- Main site header -->
<header>
<h1>My Blog Title</h1>
<nav>
<!-- Navigation menu -->
</nav>
</header>
<!-- Main content area -->
<main>
<!-- Blog posts go here -->
</main>
<!-- Sidebar content -->
<aside>
<!-- Additional information -->
</aside>
<!-- Site footer -->
<footer>
<!-- Footer content -->
</footer>
</body>
</html>
```
### పార్ట్ 4: ప్రతిబింబం
**కిందివాటిపై 3-5 వాక్యాలు గల సూక్ష్మ ప్రతిబింబం వ్రాయండి:**
- మీరు ఎక్కువగా విశ్వాసంగా ఉపయోగించిన HTML అంశాలు ఏవన్నీ?
- ప్రణాళిక లేదా కోడింగ్ సమయంలో మీకు ఎదురైన సవాళ్లు ఎలాంటివి?
- సాం‌వేదనాత్మక HTML మీ కంటెంట్‌ను ఎలా సక్రమంగా ఏర్పాటు చేయడంలో సహాయపడింది?
- మీ తర్వాతి HTML ప్రాజెక్టులో మీరు ఏం భిన్నంగా చేయాలని భావిస్తున్నారు?
## సమర్పణ తనిఖీ జాబితా
**సమర్పించడానికి ముందు, మీరు ఈ క్రింది అంశాలు చూసుకుని ఉన్నారు:**
- [ ] HTML అంశాలతో లేబుల్ చేసిన విజువల్ మాక్‌ప్
- [ ] సరైన డాక్యుమెంట్ నిర్మాణంతో పూర్తి HTML ఫైల్
- [ ] కనీసం 10 విభిన్న సాం‌వేదనాత్మక HTML అంశాలను సరైన విధంగా ఉపయోగించడం
- [ ] మీ కోడ్ నిర్మాణాన్ని వివరించే అర్థవంతమైన వ్యాఖ్యలు
- [ ] సరైన HTML సింటాక్స్ (బ్రౌజర్లో పరిగణించండి)
- [ ] ప్రాంప్ట్ క్వెరీలను సమాధానించే రాత ప్రతిబింబం
## అంచనా ప్రమాణాలు
| ప్రమాణం | అద్భుతం (4) | ప్రావీణ్యం (3) | అభివృద్ధి చెందుతున్నది (2) | ప్రారంభం (1) |
|----------|---------------|----------------|----------------|---------------|
| **ప్రణాళిక & రూపకల్పన** | నిర్మాణం మరియు HTML సాం‌వేదనాత్మక నిర్మాణంపై స్పష్టమైన అవగాహనతో సమగ్రమైన, బాగా లేబుల్ చేసిన మాక్‌ప్ | బాగా లేబుల్ చేసిన దాదాపు అన్ని సెక్షన్లతో స్పష్టమైన మాక్‌ప్ | కొంతమంది లేబలింగ్ తో మూలస్తాయి మాక్‌ప్, సాధారణ అవగాహన చూపిస్తుంది | తక్కువ లేదా స్పష్టత లేని మాక్‌ప్, సరైన సెక్షన్ గుర్తింపు లేదు |
| **సాం‌వేదనాత్మక HTML ఉపయోగం** | 10+ సాం‌వేదనాత్మక అంశాలను సరైన విధంగా ఉపయోగించడం, HTML నిర్మాణం మరియు ప్రాప్తి సౌలభ్యంలో లోతైన అవగాహన చూపించడం | 8-9 సాం‌వేదనాత్మక అంశాలను సరైనగా ఉపయోగించి, మార్కప్ పై మంచి అవగాహన చూపించడం | 6-7 సాం‌వేదనాత్మక అంశాలు ఉపయోగించడం, కొంత తప్పుదోవ పట్టడం | 6 కంటే తక్కువ అంశాలు ఉపయోగించడం లేదా సాం‌వేదనాత్మక అంశాలు తప్పుగా ఉపయోగించడం |
| **కోడ్ నాణ్యత & ఆర్గనైజేషన్** | సర్వోత్తమంగా సంస్థీకృతం అయిన, సరైన ఇంటెండేషన్ మరియు సమగ్ర వ్యాఖ్యలతో పర్ఫెక్ట్ HTML సింటాక్స్ | బాగా సంస్థీకృత కోడ్, మంచి ఇంటెండేషన్, ఉపయోగకరమైన వ్యాఖ్యలు మరియు సరైన సింటాక్స్ | ఎక్కువ భాగం సంస్థీకృత కోడ్, కొంత వ్యాఖ్యలు, స్వల్ప సింటాక్స్ లోపాలు | చెత్త సంస్థీకరణ, తక్కువ వ్యాఖ్యలు, అనేక సింటాక్స్ లోపాలు |
| **ప్రాప్తి సౌలభ్యం & ఉత్తమ పద్ధతులు** | అద్భుతమైన ప్రాప్తి పరిగణనలు, అర్థవంతమైన అల్ట్ టెక్స్ట్, సరైన శీర్షికల సరళి, అన్ని ఆధునిక HTML ఉత్తమ పద్ధతులు పాటించడం | మంచి ప్రాప్తి లక్షణాలు, సరైన శీర్షికలు మరియు అల్ట్ టెక్స్ట్ ఉపయోగం, చాలా ఉత్తమ పద్ధతులు పాటించడం | కొంత ప్రాప్తి పరిగణనలు, ప్రాథమిక అల్ట్ టెక్స్ట్ మరియు శీర్షికల నిర్మాణం | పరిమిత ప్రాప్తి లక్షణాలు, చెత్త శీర్షిక నిర్మాణం, ఉత్తమ పద్ధతులు పాటించడం లేదు |
| **ప్రతిబింబం & అభ్యాసం** | HTML భావనలు లోతుగా అవగాహనతో మరియు నేర్చుకోవడంలో జాగ్రత్తగా విశ్లేషణతో సమగ్ర ప్రతిబింబం | కీలక భావనలు అర్థం చేసుకున్న ప్రతిబింబం, నేర్చుకున్న గురించిన కొంత స్వయం అవగాహన | HTML భావనలపై పరిమిత అవగాహనతో ప్రాథమిక ప్రతిబింబం | ప్రతిబింబం తక్కువ లేదా లేదు, నేర్చుకున్న భావనలకు కొద్దిగా అవగాహన మాత్రమే |
## అభ్యాస వనరులు
**అవసరమైన సూచనలు:**
- [MDN HTML మూలకం సూచిక](https://developer.mozilla.org/docs/Web/HTML/Element) - అన్ని HTML అంశాల పూర్తి గైడ్
- [HTML5 సాం‌వేదనాత్మక అంశాలు](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - సాం‌వేదనాత్మక మార్కప్ అర్థం చేసుకోవడం
- [వెబ్ ప్రాప్తి మార్గదర్శకాలు](https://www.w3.org/WAI/WCAG21/quickref/) - ప్రాప్తి సౌకర్యవంతమైన వెబ్ కంటెంట్ రూపొందించడం
- [HTML వెరిఫైయర్](https://validator.w3.org/) - మీ HTML సింటాక్స్ తనిఖీ చేయండి
**విజయం కొరకు ప్రొ టిప్స్:**
- కోడింగ్ రాయటం ప్రారంభించే ముందు మీ మాక్‌ప్ తో మొదలుపెట్టు
- బ్రౌజర్ డెవలపర్ పరికరాలు ఉపయోగించి మీ HTML నిర్మాణాన్ని పరిశీలించండి
- CSS లేకుండా కూడా, విభిన్న స్క్రీన్ పరిమాణాలతో మీ పేజీని పరీక్షించండి
- మీ HTML ని గట్టిగా చదవండి, నిర్మాణం తార్కికమైనదా అని తనిఖీ చేయడానికి
- స్క్రీన్ రీడర్ మీ పేజీ నిర్మాణాన్ని ఎలా అర్థం చేసుకుంటుందో ఆలోచించు
> 💡 **గమనిక**: ఈ అసైన్‌మెంట్ HTML నిర్మాణం మరియు సాం‌వేదనాపరమైన అంశాలపై కేంద్రీకృతం. విజువల్ స్టైలింగ్ గురించి ఆందోళన చెందకండి – అది CSS పనికే! మీ పేజీ సాధారణంగా కనిపించవచ్చు, కానీ బాగా నిర్మించబడినది మరియు అర్థవంతమైనది అవ్వాలి.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అసౌకర్య నివారణ**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. ఎల్లప్పుడూ ఖచ్చితత్వం పాటించేందుకు ప్రయత్నిస్తున్నప్పటికీ, స్వయంచాలక అనువాదాల్లో తప్పులూ లేదా లోపాలూ ఉండే అవకాశం ఉంది. స్థానిక భాషలో ఉన్న అసలు పత్రాన్ని అధికారిక మూలం గా భావించాలి. కీలక సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం సలహా ఇస్తాము. ఈ అనువాదం వలన కలిగే ఏవైనా అపరిచితులు లేదా దోష భావాలు కోసం మేము బాధ్యత తీసుకోము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

735
translations/te/3-terrarium/2-intro-to-css/README.md
Unescape View File

@ -0,0 +1,735 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
"translation_date": "2026-01-08T19:12:27+00:00",
"source_file": "3-terrarium/2-intro-to-css/README.md",
"language_code": "te"
}
-->
# Terrarium Project భాగం 2: CSS పరిచయం
```mermaid
journey
title మీ CSS శైలీకరణ ప్రయాణం
section ప్రాథమికం
CSS ఫైల్ లింక్ చేయండి: 3: Student
కాస్కేడ్ అర్థం చేసుకోండి: 4: Student
వారసత్వం నేర్చుకోండి: 4: Student
section సెలెక్టర్లు
అంశం లక్ష్యీకరణ: 4: Student
క్లాస్ నమూనాలు: 5: Student
ID ప్రత్యేకత: 5: Student
section లేఅవుట్
అంశాలను స్థానం చేయండి: 4: Student
కంటెయినర్లు సృష్టించండి: 5: Student
టెరేరియం నిర్మించండి: 5: Student
section మెరుగుదల
దృశ్య ప్రభావాలు జోడించండి: 5: Student
ప్రతిస్పందనాత్మక డిజైన్: 5: Student
గాజు ప్రతిబింబాలు: 5: Student
```
![Introduction to CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.te.png)
> స్కెచ్నోట్ చేసిన [Tomomi Imura](https://twitter.com/girlie_mac)
మీ HTML టెర్రేరియం ఎంత సాధారణంగా కనిపించిందో గుర్తుందా? CSS ఆ సరళమైన నిర్మాణాన్ని దృశ్యంగా ఆకర్షణీయంగా మార్చే స్థానం.
HTML ఒక ఇంటి బేస్ నిర్మాణం లాగా ఉంటే, CSS అన్ని రంగులు, ఫర్నిచర్ క్రమం, లైటింగ్, గదులు ఎలా పరస్పరం కలుసుకుంటాయో అన్నింటిని నియంత్రిస్తుంది. వర్సైల్ ప్యాలెస్ ఎలా ఒక సాధారణ హంటింగ్ లాడ్జ్ నుండి ప్రపంచంలో అత్యద్భుతమైన భవనాల్లో ఒకటిగాను మారిందో ఆలోచించండి.
ఈ రోజు, మీ టెర్రేరియాన్ని సాధారణం నుండి మెరుగ్గా మార్చుదాం. మీరు ఎలిమెంట్స్ ని ఖచ్చితంగా ఎలా అమర్చాలో, వివిధ స్క్రీన్ సైజులకు అనుగుణంగా లేఅవుట్లు ఎలా రెస్పాన్స్ వుంటాయో, మరియు వెబ్‌సైట్‌లను ఆకర్షణీయంగా చేసే దృశ్య ఆకర్షణను ఎలా సృష్టించాలో నేర్చుకుంటారు.
ఈ పాఠ్యం చివరికి, కసరత్తుపరమైన CSS స్టైలింగ్ ఎలా మీ ప్రాజెక్ట్‌ను గణనీయంగా మెరుగు పరిచే తెలుసుకుంటారు. మీ టెర్రేరియానికి శైలి జోడిద్దాం.
```mermaid
mindmap
root((CSS ప్రాథమికాలు))
Cascade
Specificity Rules [ప్రత్యేక చట్టాలు]
Inheritance [విరాసత్తు]
Priority Order [ప్రాధాన్యత క్రమం]
Conflict Resolution [విరోధ పరిష్కారం]
Selectors
Element Tags [ఘటకం ట్యాగ్‌లు]
Classes (.class) [.వర్గాలు (.class)]
IDs (#id) [ID‌లు (#id)]
Combinators [సంయోజకులు]
Box Model
Margin [మార్జిన్]
Border [అంచు]
Padding [ఉపశీర్షిక]
Content [దరఖాస్తు]
Layout
Positioning [స్థానం కల్పన]
Display Types [ప్రదర్శన రకాలు]
Flexbox [ఫ్లెక్సిబాక్స్]
Grid [గ్రిడ్]
Visual Effects
Colors [రంగులు]
Shadows [నాయుకు]
Transitions [స్థానాంతరాలు]
Animations [చలనాలు]
Responsive Design
Media Queries [మీడియా ప్రశ్నించడం]
Flexible Units [లబ్ధ్యత యూనిట్‌లు]
Viewport Meta [వ్యూయర్పోర్ట్ మెటా]
Mobile First [మొబైల్ మొదట]
```
## పాఠ్యం ముందు క్విజ్
[పాఠ్యం ముందు క్విజ్](https://ff-quizzes.netlify.app/web/quiz/17)
## CSS ప్రారంభం
CSS ను కేవలం "అందంగా చేయడం" మాత్రమే అనుకొని ఉంటారు, కాని ఇది చాలా విస్తృత ప్రయోజనం కలిగి ఉంటుంది. CSS ఒక సినిమా డైరెక్టర్ లాంటిదేగాదు - మీరు కేవలం దృశ్యాన్ని మాత్రమే కాకుండా, చలనం, పరస్పరం చర్యలకు స్పందించడం, వివిధ పరిస్థితులలో ఎలా మారాలి అనేది నియంత్రిస్తారు.
ఆధునిక CSS అసాధారణంగా సామర్థ్యవంతంగా ఉంటుంది. మీరు ఫోన్లు, టాబ్లెట్లు, డెస్క్‌టాప్ కంప్యూటర్ల కోసం ఆటోమేటిక్ లేఅవుట్ అనుకూలతలు కలిగిన కోడ్ వ్రాయవచ్చు. ఉజ్వలమైన యానిమేషన్లు సృష్టించి, వినియోగదారుల దృష్టిని కావలసిన చోటికి మళ్లించవచ్చు. ఈ మార్పులు ఒకే సమయంలో పనిచేస్తే ఫలితాలు అద్భుతంగా ఉంటాయి.
> 💡 **ప్రో టిప్**: CSS నిరంతరం కొత్త ఫీచర్లు మరియు సామర్థ్యాలతో అభివృద్ధి చెందుతుంది. ప్రొడక్షన్ ప్రాజెక్ట్స్ లో కొత్త CSS ఫీచర్స్ ఉపయోగించడానికి ముందే [CanIUse.com](https://caniuse.com)లో బ్రౌసర్ సహకారాన్ని చూసుకోవడం మంచిది.
**ఈ పాఠ్యంలో మనం సాధించబోయేది:**
- **మీ టెర్రేరియానికి ఆధునిక CSS సాంకేతికతలతో పూర్తి దృశ్య డిజైన్ సృష్టిస్తుంది**
- **మూల సూత్రాలు గుర్తించడం - కస్కేడ్, వారసత్వం, మరియు CSS సెలెక్టర్లను అన్వేషిస్తుంది**
- **ప్రతిస్పందించే స్థానమన్ను మరియు లేఅవుట్ వ్యూహాలను అమలు చేస్తుంది**
- **CSS ఆకారాలు మరియు శైలులతో టెర్రేరియం కన్టైనర్‌ను నిర్మిస్తుంది**
### ముందస్తు అవసరం
గత పాఠ్యం నుండీ మీ టెర్రేరియం HTML నిర్మాణాన్ని పూర్తి చేసి ఉంటుంది మరియు స్టైల్ చేయడానికి సిద్ధంగా ఉండాలి.
> 📺 **వీడియో వనరు**: ఈ సహాయక వీడియో వాక్‌త్రూ చూడండి
>
> [![CSS Basics Tutorial](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
### మీ CSS ఫైల్ సెట్టప్ చేయడం
స్టైలింగ్ ప్రారంభించే ముందు, CSS ని HTML తో కनेक్ట్ చేస్తాం. ఈ క్రమం బ్రౌజర్‌కి మీ టెర్రేరియం కోసం స్టైలింగ్ సూచనలను ఎక్కడ చోటు చేసుకోవాలో చెబుతుంది.
మీ టెర్రేరియం ఫోల్డర్ లో `style.css` అనే కొత్త ఫైల్ సృష్టించి, దానిని మీ HTML డాక్యూమెంట్ `<head>` సెక్షన్ లో లింక్ చేయండి:
```html
<link rel="stylesheet" href="./style.css" />
```
**ఈ కోడ్ ఏమి చేస్తుంది:**
- **మీ HTML మరియు CSS ఫైళ్ల మధ్య కనెక్షన్ సృష్టిస్తుంది**
- **బ్రౌజర్‌కు `style.css` లోని స్టైల్‌ను లోడ్ చేసి వర్తింప చేయమని చెప్పుతుంది**
- **ఈ ఫైల్ CSS ఫైల్ అయిందని సూచించడానికి `rel="stylesheet"` అనే ఎట్రిబ్యూట్ వాడుతుంది**
- **ఫైల్ పాత్ సూచించడానికి `href="./style.css"` వాడుతుంది**
## CSS కస్కేడ్ అర్థం చేసుకోవడం
ఎప్పుడైనా CSS కి "Cascading" कहते ఎందుకు అనుకుంటున్నారా? స్టైల్స్ జలపాతంలా కిందకి వచ్చేలా ఉంటాయి, కొన్నిసార్లు అవి పరస్పరం పరోక్షమై పోతాయి.
సైనిక కమాండ్ వ్యవస్థాలలా ఆలోచించండి - జనరల్ ఆదేశం "అన్ని సైనికులు ఆకుపచ్చ దుస్తులు ధరించాలి" అని ఉండొచ్చు, కాని మీ యూనిట్ కోసం ప్రత్యేక ఆదేశం "పండుగ కోసం బ్లూ డ్రెస్ ధరించాలి" అని ఉండవచ్చు. ప్రత్యేక ఆదేశం గెలుస్తుంది. CSS కూడా తేడాగా ఇదే విధానం అనుసరిస్తుంది, మరియు ఈ అర్చనను అర్థం చేసుకోవడం డీబగ్గింగ్ ను సులభం చేస్తుంది.
### కస్కేడ్ ప్రాధాన్యతతో ప్రయోగం
కస్కేడ్ ఎలా పని చేస్తుందో చూసేందుకు, స్టైల్ ఘర్షణను సృష్టిద్దాం. ముందుగా మీ `<h1>` ట్యాగ్ లో ఇన్‌లైన్ స్టైల్ జోడించండి:
```html
<h1 style="color: red">My Terrarium</h1>
```
**ఈ కోడ్ ఏమి చేస్తుంది:**
- **ఇన్‌లైన్ స్టైలింగ్ ఉపయోగించి `<h1>` ఎలిమెంట్ కు నేరుగా ఎరుపు రంగును వర్తింపజేస్తుంది**
- **CSS ను HTMLలో నేరుగా బిగిలుపు చేయడానికి `style` ఎట్రిబ్యూట్ వాడుతుంది**
- **ఈ ప్రత్యేక ఎలిమెంట్ కొరకు అత్యధిక ప్రాధాన్యత కలిగిన స్టైల్ నియమాన్ని సృష్టిస్తుంది**
తదుపరి, ఈ నియమాన్ని `style.css` ఫైల్ లో జోడించండి:
```css
h1 {
color: blue;
}
```
**పై ఉదాహరణలో మనం:**
- **అన్ని `<h1>` ఎలిమెంట్లకు టార్గెట్ చేసే CSS నియమాన్ని నిర్వచించాము**
- **బ్లూ రంగును టెక్స్ట్ కు అనుసంధానిక స్టైల్‌షీట్ ఉపయోగించి సెట్ చేసాము**
- **ఇన్‌లైన్ స్టైల్ కంటే తక్కువ ప్రాధాన్యత కలిగి ఉన్న నియమాన్ని సృష్టించాము**
✅ **జ్ఞాన పరీక్ష**: మీ వెబ్ యాప్ లో ఏ రంగు ప్రదర్శింపబడుతుంది? ఆ రంగు ఎందుకు గెలుస్తుంది? మీరు ఎప్పుడైనా స్టైల్‌ లను ఓవర్‌రైడ్ చేయాల్సిన సందర్భాలను ఊహించగలరా?
```mermaid
flowchart TD
A["బ్రౌజర్ h1 మూలకం చూసింది"] --> B{"ఇన్‌లైన్ శైళ్లు చेकు చేయండి"}
B -->|కనుగొన్నారు| C["style='color: red'"]
B -->|ఏమీ లేదు| D{"ID నియమాల కోసం చూడండి"}
C --> E["ఎరుపు రంగు వర్తించండి (1000 పాయింట్లు)"]
D -->|కనుగొన్నారు| F["#heading { రంగు: ఆకుపచ్చ }"]
D -->|ఏమీ లేదు| G{"క్లాస్ నియమాలకు చూడండి"}
F --> H["ఆకుపచ్చ రంగు వర్తించండి (100 పాయింట్లు)"]
G -->|కనుగొన్నారు| I[".title { రంగు: నీలం }"]
G -->|ఏమీ లేదు| J{"మూలకం నియమాలకు చూడండి"}
I --> K["నీలం రంగు వర్తించండి (10 పాయింట్లు)"]
J -->|కనుగొన్నారు| L["h1 { రంగు: గుమ్మడికాయ }"]
J -->|ఏమీ లేదు| M["బ్రౌజర్默ితిగాను వాడు"]
L --> N["గుమ్మడికాయ రంగు వర్తించండి (1 పాయింట్)"]
style C fill:#ff6b6b
style F fill:#51cf66
style I fill:#339af0
style L fill:#9775fa
```
> 💡 **CSS ప్రాధాన్యత క్రమం (అత్యధికం నుండి తక్కువ వరకు):**
> 1. **ఇన్‌లైన్ స్టైల్స్** (`style` ఎట్రిబ్యూట్)
> 2. **IDs** (#myId)
> 3. **క్లాసెస్** (.myClass) మరియు ఎట్రిబ్యూట్స్
> 4. **ఎలిమెంట్ సెలెక్టర్లు** (h1, div, p)
> 5. **బ్రౌజర్ డిఫాల్ట్స్**
## CSS వారసత్వం (Inheritance) అమలు
CSS వారసత్వం జన్యువుల్లాగా పనిచేస్తుంది - ఎలిమెంట్లు వారి తల్లిదండ్రుల ఎలిమెంట్ల నుండి కొన్ని లక్షణాలను వారసత్వం స్వరూపం తీసుకుంటాయి. మీరు బాడీ ఎలిమెంట్ పై ఫాంట్ ఫ్యామిలీ సెట్ చేస్తే, అంతర్గత అన్ని టెక్స్ట్‌లు ఆ ఫాంట్‌ను ఆటోమేటిక్ గా వాడతాయి. ఇది హాబ్‌స్బర్గ్ కుటుంబం యొక్క ప్రత్యేక జాగ్‌లైన్ తరాల తరాలుగా కనిపించే విధానంలాగా ఉంటుంది.
కానీ, అన్నీ వారసత్వం కావు. ఫాంట్లు, రంగులు వంటి టెక్స్ట్ స్టైల్స్ వారసత్వం కలిగినవి, కానీ మార్జిన్లు, బార్డర్లు వంటి లేఅవుట్ లక్షణాలు లేకుంటాయి. పిల్లలు తల్లిదండ్రుల శారీరక లక్షణాలు కాకపోయినా వారి ఫ్యాషన్ ఎంపికలు వారసత్వంగా తీసుకోరు లాంటిదే.
### ఫాంట్ వారసత్వాన్ని పరిశీలించడం
`<body>` ఎలిమెంట్ పై ఫాంట్ ఫ్యామిలీ సెట్ చేసి వారసత్వాన్ని చూడండి:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**ఇక్కడ ఏమి జరుగుతుంది:**
- **పూర్తి పేజీ కోసం `<body>` ఎలిమెంట్‌ని టార్గెట్ చేసి ఫాంట్ ఫ్యామిలీ సెట్ చేస్తుంది**
- **బ్రౌజర్ అనుకూలత కోసం ఫాంట్ స్టాక్ లో fallback ఆప్షన్లు ఉంటాయి**
- **విభిన్న ఆపరేటింగ్ సిస్టమ్స్ లో బాగుంటున్న ఆధునిక సిస్టమ్ ఫాంట్లు వాడుతుంది**
- **ప్రత్యేకంగా ఓవర్‌రైడ్ చేయకపోతే అన్ని చైల్డ్ ఎలిమెంట్లు ఈ ఫాంట్ వాడతాయి**
మీ బ్రౌజర్ డెవలపర్ టూల్స్ (F12) తెరవండి, Elements ట్యాబ్ కు వెళ్లి `<h1>` ఎలిమెంట్ ని ఇన్స్పెక్ట్ చేయండి. అది బాడీ నుండి ఫాంట్ ఫ్యామిలీని వారసత్వంగా పొందుతుందని చూడొచ్చు:
![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d.te.png)
✅ **ప్రయోగ సమయం**: మీ `<body>` లో మరో వారసత్వ లక్షణాలను సెట్ చేయండి, ఉదాహరణకు `color`, `line-height`, లేదా `text-align`. మీ హెడ్డింగ్ మరియు ఇతర ఎలిమెంట్లకు ఏమి జరుగుతుందో గమనించండి.
> 📝 **వారసత్వ లక్షణాలు: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`**
>
> **వారసత్వం కాని లక్షణాలు: `margin`, `padding`, `border`, `width`, `height`, `position`**
### 🔄 **పాఠ్య నిర్వహణ తనిఖీ**
**CSS ఫౌండేషన్ అర్థం పొందడం**: సెలెక్టర్లకు వెళ్లక ముందు మీరు:
- ✅ కస్కేడ్ మరియు వారసత్వం మధ్య తేడాను వివరించగలరు
- ✅ స్పెసిఫిసిటీ ఘర్షణలో ఏ స్టైల్ గెలుస్తుందో ఊహించగలరు
- ✅ Eltern నుండి ఏ లక్షణాలు వారసత్వం అవుతాయో గుర్తించగలరు
- ✅ CSS ఫైల్స్ ను HTML కు సరిగా కనెక్ట్ చేయగలరు
**త్వరిత పరీక్ష**: ఈ స్టైల్‌లు ఉంటే, `<div class="special">` లో ఉన్న `<h1>` రంగు ఏమిటి?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*జవాబు: ఎరుపు (ఎలిమెంట్ సెలెక్టర్ నేరుగా h1ని టార్గెట్ చేస్తుంది)*
## CSS సెలెక్టర్ల మాస్టరీ
CSS సెలెక్టర్లు మీరు స్టైల్ చేయడానికి ప్రత్యేక ఎలిమెంట్లను టార్గెట్ చేసే మార్గం. అవి ఖచ్చిత స్థలాలు సూచించే విధంగా ఉంటాయి - "ఇంటి" అనటం కంటే మీరు "మేపుల్ వీధిలో ఎరుపు తలుపు ఉన్న నీలం ఇల్లు" అంటారు.
CSS వివిధ విధాలుగా స్పష్టత ఇస్తుంది, సరైన సెలెక్టర్ ఎంచుకోవడం పనికి సరిపోయే సాధనాన్ని ఎంచుకోవడం లాంటిది. మీరు పక్కనున్న ప్రతి తలుపును స్టైల్ చేయాలంటే లేదా ఒక్క తలుపు మాత్రమే స్టైల్ చేయాలంటే తరచూ ప్రత్యేకట్టиспేసుకోవాలి.
### ఎలిమెంట్ సెలెక్టర్లు (ట్యాగ్లు)
ఎలిమెంట్ సెలెక్టర్లు HTML ఎలిమెంట్లను తూటా పేరుతో టార్గెట్ చేస్తాయి. ఇవి మీ పేజీ మొత్తంలో ప్రాథమిక స్టైల్స్ అందుబాటులో ఉంచడానికి ఉపయోగపడతాయి:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**ఈ స్టైల్‌లు ఎలా పని చేస్తాయో అర్థం చేసుకోవడం:**
- **`body` సెలెక్టర్ తో పూర్తి పేజీకి స్థిరమైన టైపోగ్రఫీ సెట్ చేస్తుంది**
- **డిఫాల్ట్ బ్రౌజర్ మార్జిన్లు మరియు ప్యాడింగ్ తొలగిస్తూ నియంత్రణ మెరుగుపడుతుంది**
- **అన్ని హెడ్డింగ్ ఎలిమెంట్లకు రంగు, సమీకరణ, అంతరాలు ఇస్తుంది**
- **`rem` యూనిట్ లను వాడి స్కేలబుల్, యాక్సెసిబుల్ ఫాంట్ సైజింగ్ చేస్తుంది**
అయితే, ఎలిమెంట్ సెలెక్టర్‌లు సాధారణ స్టైలింగ్‌కు మెరుగైనవి కాని మీ టెర్రేరియంలో ఉన్న మొక్కల వంటి ప్రత్యేక భాగాలను మరింత స్పష్టమైన సెలెక్టర్లతో స్టైల్ చేయాలి.
### ప్రత్యేక ఎలిమెంట్ల కొరకు ID సెలెక్టర్లు
ID సెలెక్టర్లు `#` చిహ్నంతో ఉంటాయి మరియు ప్రత్యేక `id` ఉన్న ఎలిమెంట్లను టార్గెట్ చేస్తాయి. ఒక పేజీలో IDs ప్రత్యేకమైనవని, కాబట్టి మన టెర్రేరియంలో ఎడమ మరియు కుడి మొక్కల కంటైనర్ల వంటి ప్రత్యేక ఎలిమెంట్లను స్టైల్ చేయడానికి ఇవి అనుకూలం.
మొక్కలు ఉన్న సైడ్ కంటైనర్ల స్టైల్ ను రూపొందిద్దాం:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**ఈ కోడ్ చేయేమి:**
- **కంటైనర్లు స్క్రీన్ వైపులా అతి ఎడమ మరియు కుడివైపు పెట్టడానికి `absolute` స్థానమన్ను వాడుతుంది**
- **స్క్రీన్ సైజుకు అనుగుణంగా ఉండే ఎత్తు కొరకు `vh` యూనిట్లను ఉపయోగిస్తుంది**
- **ప్యాడింగ్ మొత్తం వెడల్పులో చేరిస్తుంది కోసం `box-sizing: border-box` ని ప్రయోగిస్తుంది**
- **సున్నా విలువల వద్ద `px` యూనిట్లు తొలగించి శుభ్రంగా కోడ్ చేస్తుంది**
- **తీవ్ర గ్రే కంటే కాస్త స్వేదనీయమైన బ్యాక్‌గ్రౌండ్ రంగు సెట్ చేస్తుంది**
✅ **కోడ్ నాణ్యత సవాలు**: ఈ CSS DRY (Don't Repeat Yourself) సూత్రాన్ని ఉల్లంఘిస్తోంది. మీరు ID మరియు క్లాస్ రెండింటిని ఉపయోగించి దీనిని ఎలా రీఫాక్టర్ చేయగలరు?
**ఇంకాచేయవలసింది:**
```html
<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### పునర్వినియోగ స్టైల్స్ కోసం క్లాస్ సెలెక్టర్లు
క్లాస్ సెలెక్టర్లు `.` చిహ్నంతో ఉంటాయి మరియు మీకు అదే స్టైల్స్ మల్టిపుల్ ఎలిమెంట్లకు వర్తింపజేయాలనిపిస్తే ఇవి అనుకూలంగా ఉంటాయి. ID లకు భిన్నంగా, క్లాసులు HTML అంతటా పునర్వినియోగం చేయవచ్చు, కాబట్టి పాఠాంతరాల్లో కాంసిస్టెంట్ స్టైలింగ్ కోసం ఇవి చాలా ఉపయోగకరంగా ఉంటాయి.
మన టెర్రేరియంలో ప్రతీ మొక్కకు ఒకటే విధమైన స్టైల్ ఉండాలి మరి సూక్ష్మస్థాయిలో స్థానమన్ను కూడా ఉండాలి. అందుకే పంచుకోబడిన స్టైల్ కోసం క్లాసులు, ప్రత్యేక స్థానానికి IDs రెండూ వాడతాము.
**ప్రతీ మొక్కకు HTML నిర్మాణం:**
```html
<div class="plant-holder">
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f.te.png" />
</div>
```
**ప్రధాన అంశాలు:**
- **అన్ని మొక్కల కోసం సుసंगత కంటైనర్ స్టైలింగ్ కోసం `class="plant-holder"` ఇస్తుంది**
- **ఆకారం మరియు ప్రవర్తనల కోసం `class="plant"` ఉపయోగిస్తుంది**
- **ప్రత్యేక స్థానమున్నది మరియు జావాస్క్రిప్ట్ ఇంటరాక్షన్ కొరకు ప్రత్యేక `id="plant1"` ఉంచుతుంది**
- **స్క్రీన్ రీడర్ కోసం వివరణాత్మక ఆల్ట్ టెక్స్ట్ అందిస్తుంది**
ఇప్పుడు అందరి `style.css` ఫైల్ కు ఈ స్టైల్స్ జోడించండి:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**ఈ స్టైల్స్ లో ఏమి జరుగుతుంది:**
- **ప్లాంట్ హోల్డర్ కు రిలేటివ్ స్థానమన్ను ఇస్తుంది, ఇది ఒక స్థితి నియంత్రణ పరిమితం సృష్టిస్తుంది**
- **ప్రతి ప్లాంట్ హోల్డర్ కు 13% ఎత్తు ఇస్తుంది, ప్లాంట్లు చూపించు విదంగా స్క్రోల్ అవసరం లేకుండా కుదుతుంది**
- **హోల్డర్స్ సన్నగా ఎడమకు తక్కువ, మొక్కలు కంటైనర్లు మధ్యలో సెంటర్ కావడానికి మారుస్తుంది**
- **మాక్స్ విత్ మరియు హైట్ ప్రాపర్టీస్ తో మొక్కలను రెస్పాన్సివ్ స్కేలు చేయగలుగుతుంది**
- **`z-index` ఉపయోగించి మొక్కలను ఇతర సంపూర్ణ ఎలిమెంట్ల కంటే మీదికి తెస్తుంది**
- **CSS ట్రాన్సిషన్లతో సన్నని హోవర్ ఎఫెక్ట్ ఇవ్వడం కస్టమర్ ఇంటరాక్షన్ మెరుగుపరుస్తుంది**
✅ **ముఖ్య ఆలోచన**: `.plant-holder` మరియు `.plant` రెండింటికి ఎందుకు అవసరం? ఒకదానితో మాత్రమే ప్రయత్నిస్తే ఏమవుతుంది?
> 💡 **డిజైన్ నమూనా**: కంటైనర్ (`.plant-holder`) లేఅవుట్ మరియు స్థానమన్ను నియంత్రిస్తుంది, కంటెంట్ (`.plant`) కనిపించు విధానం మరియు స్కెలింగ్ ను నియంత్రిస్తుంది. ఈ వర్గీకరణ కోడ్‌ను నిర్వహించడంలో మరియు మెరుగుపరచడంలో ఉపయోగకరంగా ఉంటుంది.
## CSS స్థానమన్ను అర్థం చేసుకోవడం
CSS స్థానమన్ను ఒక నాటకాన్ని అడ్రస్ చేసే డైరెక్టర్ లాంటిది - మీరు ఆ నటుడు ఎక్కడ ఎప్పుడు ఉన్నాడో, ఎలా కదిలాడో ఆదేశిస్తారు. కొంత నటులు సాధారణ స్వభావంగా ఉంటారు, మరికొందరు ప్రత్యేక స్థానంలో ఉండాలి.
స్థానమన్ను అర్థం చేసుకున్న తర్వాత అనేక లేఅవుట్ సవాళ్లు పరిష్కారమవుతాయి. స్క్రోల్ చేసే సమయంలో కూడా కనబడే నావిగేషన్ బార్ కావాలి? స్థానమన్ను హ్యాండిల్ చేస్తుంది. ఒక నిర్దిష్ట స్థలంలో కనిపించే టూల్‌టిప్ కావాలి? అదే స్థానమన్ను.
### ఐదు స్థానమన్ను విలువలు
```mermaid
quadrantChart
title CSS పొజిషనింగ్ వ్యూహం
x-axis డాక్యూమెంట్ ఫ్లో --> ఫ్లో నుండి తీసివేయబడింది
y-axis స్టాటిక్ పొజిషన్ --> ఖచ్చితమైన నియంత్రణ
quadrant-1 అబ్సల్యూట్
quadrant-2 ఫిక్స్డ్
quadrant-3 స్టాటిక్
quadrant-4 స్టికీ
స్టాటిక్: [0.2, 0.2]
సంబంధిత: [0.3, 0.6]
అబ్సల్యూట్: [0.8, 0.8]
ఫిక్స్డ్: [0.9, 0.7]
స్టికీ: [0.5, 0.9]
```
| స్థానమన్ను విలువ | ప్రవర్తన | ఉపయోగం |
|----------------|----------|----------|
| `static` | డిఫాల్ట్ ప్రవాహం, top/left/right/bottom ను పరిగణించదు | సాధారణ డాక్యూమెంట్ లేఅవుట్ |
| `relative` | సాధారణ స్థానానికి సంబంధించి స్థానమన్ను | చిన్న సవరణలు, స్థాన స్థితి ప్రదేశం సృష్టించడం |
| `absolute` | సమీప స్థానమన్ను ఉన్న తండ్రీకు సంబంధించిన స్థానమన్ను | ఖచ్చితమైన స్థానం, ఓవర్‌లే |
| `fixed` | వ్యూయ్‌పోర్ట్‌కు సంబంధించి స్థానమన్ను | నావిగేషన్ బార్లు, ఫ్లోటింగ్ ఎలిమెంట్లు |
| `sticky` | స్క్రోల్ ఆధారంగా relative మరియు fixed మధ్య స్విచ్ అవుతుంది | స్క్రోల్ సమయంలో అంటుకునే హెడ్డర్లు |
### మన టెర్రేరియంలో స్థానమన్ను
మన టెర్రేరియం కింది స్థానమన్నులు సహా వ్యూహాన్ని ఉపయోగిస్తుంది:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**స్థానమన్ను వ్యూహం అర్థం చేసుకోవడం:**
- **Absolute కంటైనర్లు సాధారణ డాక్యూమెంట్ ప్రవాహం నుండి తొలగించి స్క్రీన్ త్రుటిలో అమర్చబడి ఉంటాయి**
- **Relative ప్లాంట్ హోల్డర్లు ఒక స్థాన నియంత్రణ పరిసరాన్ని సృష్టిస్తూ డాక్యూమెంట్ ప్రవాహంలో ఉంటాయి**
- **Absolute మొక్కలు వారి రిలేటివ్ కంటైనర్లలో ఖచ్చితంగా అమర్చబడి ఉంటాయి**
- **ఈ కలయిక ప్లాంట్లను నిలువుగా సవరించాలని మరియు వ్యక్తిగతంగా స్థానమన్ను ఇవ్వటానికి అనుమతిస్తుంది**
> 🎯 **ఇది ఎందుకు ముఖ్యమైనది**: తదుపరి పాఠ్యంలో `plant` ఎలిమెంట్లు డ్రాగ్ చేయదగినవి కావాలనుకుంటున్నాం. Absolute స్థానమన్ను ఉపయోగించటం వాటిని సాధారణ లేఅవుట్ ప్రవాహం నుండి బయటపెట్టుతుంది, దీని వలన డ్రాగ్-అండ్-డ్రాప్ చర్యలు సాధ్యమవుతాయి.
✅ **ప్రయోగ సమయం**: స్థానమన్ను విలువలను మార్చి ఫలితాలు గమనించండి:
- `.container` ను `absolute` నుండి `relative` కి మార్చితే ఏమవుతుంది?
- `.plant-holder` `relative` కాకుండా `absolute` ఉపయోగిస్తే లేఅవుట్ ఎలా మారుతుంది?
- `.plant`ను `relative` పొజిషనింగ్‌కు మార్చినప్పుడు ఏమౌతుంది?
### 🔄 **అధ్యాపనాత్మక తనిఖీ**
**CSS పొజిషనింగ్ ప్రావీణ్యం**: మీ అర్థం చేసుకున్నదాని తనిఖీ చేయండి:
- ✅ పుట్టలు డ్రాగ్-అండ్-డ్రాప్ కోసం ఎందుకు absolute పొజిషనింగ్ అవసరమౌతుంది అని చెప్పగలరా?
- ✅ relative కంటెయినర్ల ద్వారా పొజిషనింగ్ సందర్భం ఎలా సృష్టించబడుతుంది తెలుసా?
- ✅ సైడ్ కంటెయినర్లు ఎందుకు absolute పొజిషనింగ్ ఉపయోగిస్తాయి?
- ✅ మీరు పొజిషన్ డిక్లరేషన్లు పూర్తిగా తీసివేస్తే ఏమౌతుంది?
**ప్రకృతి సంబంధం**: CSS పొజిషనింగ్ ఎలా వాస్తవ ప్రపంచ లేఅవుట్ను ప్రతిబింబిస్తుంది అనుకోండి:
- **Static**: తలంపుపై పుస్తకాలు (సహజ క్రమం)
- **Relative**: పుస్తకాన్ని తక్కువగా కదిలించడం కానీ దాని స్థానాన్ని ఉంచడం
- **Absolute**: ఖచ్చితమైన పేజీ నంబరుపై బుక్మార్క్ పెట్టడం
- **Fixed**: మీరు పేజీలు తిప్పుతున్నప్పుడు కనిపించే స్టికి నోట్
## CSSతో టెర్రారియాన్ని నిర్మించడం
ఇప్పుడు మీరొక్క గాజు జార్‌ను సింపుల్ CSS ఉపయోగించి నిర్మిస్తాము - ఇమేజులు లేదా గ్రాఫిక్స్ సాఫ్ట్వేర్ అవసరం లేదు.
పొజిషనింగ్ మరియు పారదర్శకం ఉపయోగించి వాస్తవికమైన గాజు, నీడలు మరియు లోతు ప్రభావాలు సృష్టించడం CSS యొక్క దర్శన సామర్థ్యాలను ప్రదర్శిస్తుంది. బౌహౌస్ ఉద్యమంలోని నిపుణులు ఎలా సులభమైన జ్యామితీయ ఆకారాలతో క్లిష్టమైన, అందమైన నిర్మాణాలు సృష్టించారో ఈ టెక్నిక్ అంతాగే ఉంటుంది. మీరు ఈ సూత్రాలను అర్థం చేసుకున్నాక చాలా వెబ్ డిజైన్ల వెనుక CSS టెక్నిక్‌లు గుర్తుపెట్టుకుంటారు.
```mermaid
flowchart LR
A[జార్ టాప్] --> E[పూర్తి టెరేరియం]
B[జార్ గోడలు] --> E
C[మృదువు పొర] --> E
D[జార్ బాటమ్] --> E
F[గాజు ప్రభావాలు] --> E
A1["50% వెడల్పు<br/>5% ఎత్తు<br/>పైన దరఖాస్తు"] --> A
B1["60% వెడల్పు<br/>80% ఎత్తు<br/>వృతాకారం మూలలు<br/>0.5 పారదర్శకత"] --> B
C1["60% వెడల్పు<br/>5% ఎత్తు<br/>గాఢ గోధుమ రంగు<br/>కిందటి పొర"] --> C
D1["50% వెడల్పు<br/>1% ఎత్తు<br/>కిందటి స్థానము"] --> D
F1["సూక్ష్మ నీడలు<br/>పారదర్శకత<br/>జెడ్-ఇండెక్స్ పొరల వర్గీకరణ"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### గాజు జార్ భాగాలను సృష్టించడం
ఒక్కో భాగం ప్రాతిపదికన టెర్రారియం జార్ నిర్మించుకుందాం. ప్రతి భాగం absolute పొజిషనింగ్ మరియు శాతానుపాత ఆధారిత సైజింగ్ ఉపయోగించి స్పందనాత్మక డిజైన్ కోసం రూపొందించబడింది:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**టెర్రారియం నిర్మాణాన్ని అర్థం చేసుకోవడం:**
- **అన్ని స్క్రీన్ సైజులకు అనుగుణంగా** శాతానుపాతాల పరిమాణాలు ఉపయోగించడం
- **ఖచ్చితంగా నిలిపి, సరిపోల్చుటకు** ఎలిమెంట్లను absolute గా పొజిషన్ చేయడం
- **గాజు పారదర్శకత ప్రభావం** సృష్టించడానికి వున్న వేరే వేరే అపాసిటీ విలువలను వర్తించడం
- **ప్లాంట్లు జార్ లోపల కనిపించేందుకు** `z-index` లేయరింగ్ అమలు చేయడం
- **అధిక వాస్తవికత కొరకు** సూక్ష్మ బాక్స్-షాడో మరియు మెరుగైన బోర్డర్-రిసియస్ జోడించడం
### శాతానుపాతాలతో స్పందనాత్మక డిజైన్
అన్ని పరిమాణాలు శాతానుపాతాలుగా ఉపయోగించడం గమనించండి, స్థిరమైన పిక్సెల్ విలువలన కన్నా:
**దీన్ని ఎందుకు ఉపయోగిస్తారు:**
- **టెర్రారియం ఏ స్క్రీన్ సైజుపైన సరిపోతుంది** అని నిర్ధారిస్తుంది
- **జార్ భాగాల మధ్య దృశ్య సంబంధాలను నిలుపుతుంది**
- **మొబైల్ నుండి పెద్ద డెస్క్‌టాప్ మానిటర్ల వరకు అనుభవాన్ని సమానంగా ఇస్తుంది**
- **దృశ్య లేఅవుట్ బ్రేక్ కాకుండా డిజైన్ సర్దుబాటు అవుతుంది**
### CSS యూనిట్లు ప్రత్యక్షంగా
మేము `rem` యూనిట్లను బోర్డర్-రిసియస్ కోసం ఉపయోగిస్తున్నాము, ఇవి మూల ఫాంట్ సైజ్‌కు సంబంధించి స్కేలు అవుతాయి. ఇది వినియోగదారు ఫాంట్ ప్రిఫరెన్సులకు గౌరవం ఇచ్చే మరింత యాక్సెస్ చేయదగిన డిజైన్లను సృష్టిస్తుంది. అధికారిక స్పెసిఫికేషన్‌లో [CSS సాపేక్ష యూనిట్ల గురించి](https://www.w3.org/TR/css-values-3/#font-relative-lengths) మరింత తెలుసుకోండి.
✅ **దృష్టి ప్రయోగాలు**: ఈ విలువలను మార్చి ఫలితాలను పరిశీలించండి:
- జార్ యొక్క అపాసిటీని 0.5 నుండి 0.8 వరకు మార్చండి – గాజు ఎదురుదృశ్యానికి ఎలా ప్రభావితం అవుతుంది?
- మట్టివర్ణాన్ని `#3a241d` నుండి `#8B4513` కి మార్చండి – దాని దృష్టి ప్రభావం ఏమిటి?
- మట్టికి `z-index`ని 2 కి మార్చండి – లేయరింగ్ కు ఏమౌతుంది?
### 🔄 **అధ్యాపనాత్మక తనిఖీ**
**CSS దృష్టి డిజైన్ అర్థం చేసుకోవడం**: మీ CSS దృష్టిని నిర్ధారించుకోండి:
- ✅ శాతానుపాత ఆధారిత పరిమాణాలు ఎలా స్పందనాత్మక డిజైన్ సృష్టిస్తాయి?
- ✅ అపాసిటీ గాజు పారదర్శకత ప్రభావం సృష్టించడంలో ఏమాత్రం పాత్ర వహిస్తుంది?
- ✅ ఎలిమెంట్లను లేయర్ చేయడంలో z-index పాత్ర ఏమిటి?
- ✅ బోర్డర్-రిసియస్ విలువలతో జార్ ఆకారాన్ని ఎలా సృష్టిస్తారు?
**డిజైన్ సూత్రం**: మేము సులభ ఆకారాల నుండి క్లిష్ట దృష్టులను ఎలా నిర్మిస్తున్నామో గమనించండి:
1. **చతురస్రాలు** → **గుండ్రటివిడులు చతురస్రాలు** → **జార్ భాగాలు**
2. **సాలిడ్ రంగులు** → **అపాసిటీ** → **గాజు ప్రభావం**
3. **విభిన్న ఎలిమెంట్లు** → **లేయర్డ్ కాంపోజిషన్** → **3D దృశ్యము**
---
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఏజెంట్ మోడ్ ఉపయోగించి ఈ క్రింది ఛాలెంజ్ పూర్తి చేయండి:
**వర్ణన:** టెర్రారియంలోని మొక్కలు సహజ గాలి ప్రభావాన్ని అనుభూతి పరచేలా మెల్లగా ముందుకూ వెనుకకు తరలే CSS అనిమేషన్ సృష్టించండి. దీని ద్వారా CSS అనిమేషన్స్, ట్రాన్స్‌ఫార్మ్స్ మరియు కీఫ్రేమ్స్ లో ప్రాక్టీస్ చేయవచ్చు.
**ప్రాంప్ట్:** టెర్రారియంలోని మొక్కలు రెండు నుండి మూడు డిగ్రీల వరకు ఎడమ మరియు కుడి వైపుకు తేలికగా తిప్పే స్వయంచాలక కీఫ్రేమ్ అనిమేషన్స్ `.plant` క్లాసుపై అమలు చేయండి. అనిమేషన్ 3-4 సెకన్ల పాటు కొనసాగూ ఉంటూ, సహజ ఉద్యమానికి ఈజింగ్ ఫంక్షన్ కలిగి ఉండాలి.
ఇక్కడ [ఏజెంట్ మోడ్](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## 🚀 ఛాలెంజ్: గాజు ప్రతిబింబాలు జోడించడం
మీ టెర్రారియాన్ని వాస్తవిక గాజు ప్రతిబింబాలతో అభివృద్ధి చేయడానికి సిద్ధంగా ఉన్నారా? ఈ టెక్నిక్ లోతు మరియు వాస్తవికతను పెంచుతుంది.
మీరు గాజు ఉపరితలాలపై వెలుతురు ప్రతిబింబాలను కలిగించే సూక్ష్మ హైలైట్లను సృష్టిస్తారు. ఇది రెనెసెన్స్ పెయింటర్స్ జాన్ వాన్ ఎయ్క్ లాంటి వారు గాజు పెయింటింగ్లను 3D లాగా చూపించడానికి ఉపయోగించిన పరిస్థితిని అనుకరిస్తుంది. మీరు లక్ష్యం చేసుకునేది ఇలాగే ఉంది:
![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.te.png)
**మీ ఛాలెంజ్:**
- గాజు ప్రతిబింబాల కోసం సూక్ష్మ తెల్లటి లేదా ప్రకాశవంత రంగు ఒవల్ ఆకారాలను సృష్టించండి
- జార్ ఎడమ వైపున వ్యూహాత్మకంగా అవి ఉండేలా పొజిషన్ చేయండి
- వాస్తవిక ప్రతిబింబం కోసం తగిన అపాసిటీ మరియు బ్లర్ ప్రభావాలు వర్తించండి
- సేంద్రీయ, బుడగలలా ఆకారాల కోసం `border-radius` ఉపయోగించండి
- అభివృద్ధి కొరకై గ్రాడియంట్లు లేదా బాక్స్-షాడోలను ప్రయోగించండి
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/18)
## మీ CSS జ్ఞానాన్ని విస్తరించండి
CSS మొదట్లో క్లిష్టంగా అనిపించవచ్చు, కానీ ఈ ముఖ్య సూత్రాలు సమర్థవంతమైన, అధునాతన టెక్నిక్స్‌కు బలమైన ఆధారం ఇస్తాయి.
**మీ తదుపరి CSS నేర్చుకునే ప్రాంతాలు:**
- **Flexbox** - ఎలిమెంట్ల సులభ ఎలైన్మెంట్ మరియు పంపిణీ
- **CSS Grid** - క్లిష్టమైన లేఅవుట్లను సృష్టించడానికి శక్తివంతమైన పరికరాలు
- **CSS Variables** - పునరావృతిని తగ్గించి నిర్వహణను మెరుగుపరుస్తాయి
- **స్పందనాత్మక డిజైన్** - విభిన్న స్క్రీన్ సైజ్లపై సైట్లను సమర్థంగా పనిచేయించటం
### ఇంటరాక్టివ్ నేర్చుకునే వనరులు
ఈ ఆలోచనలను హాండ్స్-ఆన్ ఆటల ద్వారా ప్రయత్నించండి:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - ఫన్ ఛాలెంజ్‌ల ద్వారా Flexbox నేర్చుకోండి
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - వర్చువల్ క్యారెట్లను పెంచుతూ CSS Grid నేర్చుకోండి
- 🎯 [CSS Battle](https://cssbattle.dev/) - మీ CSS నైపుణ్యాలను కోడింగ్ ఛాలెంజ్‌లతో పరీక్షించండి
### అదనపు నేర్చుకోవడం
సంపూర్ణ CSS ప్రాథమికాల కోసం ఈ Microsoft Learn మాడ్యూల్ పూర్తి చేయండి: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **తర్వాతి 5 నిమిషాల్లో మీరు చేయగలిగేది**
- [ ] DevTools ఓపెన్ చేసి ఎలిమెంట్స్ ప్యానెల్ ఉపయోగించి ఏ వెబ్‌సైట్ CSS శైలులను పరిశీలించండి
- [ ] సింపుల్ CSS ఫైలు తయారుచేసి HTML పేజీకి లింక్ చేయండి
- [ ] కలర్స్ మార్చేందుకు వేర్వేరు పద్ధతులు: హెక్స్, RGB, మరియు పేరులైన రంగులు ప్రయత్నించండి
- [ ] బాక్స్ మోడల్ పై_PADDING_ మరియు_MARGIN_ వెల్పింపు సాధనలో ప్రాక్టీస్ చేయండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పోస్ట్-లెక్షన్ క్విజ్ పూర్తి చేసి CSS ప్రాథమికాలు సమీక్షించండి
- [ ] HTML పేజీకి ఫాంట్లు, రంగులు, మరియు మోసమోసాల ద్వారా స్టైల్ చేయండి
- [ ] flexbox లేదా grid ఉపయోగించి సులభ లేఅవుట్ సృష్టించండి
- [ ] స్మూత్ ఎఫెక్ట్స్ కోసం CSS ట్రాన్జిషన్స్ ప్రయోగించండి
- [ ] మీడియా క్వెరీలతో స్పందనాత్మక డిజైన్ సాధన చేయండి
### 📅 **మీ వారాంత CSS యాత్ర**
- [ ] టెర్రారియం స్టైలింగ్ అసైన్మెంట్ సృజనాత్మకతతో పూర్తి చేయండి
- [ ] CSS Grid ను మాస్టర్ చేసి ఫోటో గ్యాలరీ లేఅవుట్ సృష్టించండి
- [ ] CSS అనిమేషన్స్ నేర్చుకుని డిజైన్లకు ప్రాణం పోసండి
- [ ] Sass లేదా Less వంటి CSS ప్రీప్రాసెసర్లు అన్వేషించండి
- [ ] డిజైన్ సూత్రాలను అధ్యయనం చేసి CSS లో అమలు చేయండి
- [ ] ఆన్‌లైన్ లో కనుగొన్న ఆసక్తికరమైన డిజైన్లను విశ్లేషించి పునఃసృష్టించండి
### 🌟 **మీ నెలంతా డిజైన్ ప్రావీణ్యం**
- [ ] సంపూర్ణ స్పందనాత్మక వెబ్‌సైట్ డిజైన్ సిస్టమ్ నిర్మించండి
- [ ] Tailwind వంటి CSS-in-JS లేదా utility-first ఫ్రేమ్‌వర్క్‌లు నేర్చుకోండి
- [ ] CSS మెరుగుదలలతో ఓపెన్ సోర్స్ ప్రాజెక్టులకు సహాయం చేయండి
- [ ] CSS కస్టమ్ ప్రాపర్టీస్ మరియు కంటైన్‌మెంట్ వంటి అధునాతన సూత్రాల నిర్వీర్యత
- [ ] మాడ్యులర్ CSS తో పునర్వినియోగపరచుకోగల కంపోనెంట్ లైబ్రరీలు సృష్టించండి
- [ ] ఇతరులను CSS నేర్పడానికి గైడ్ చేయండి మరియు డిజైన్ జ్ఞానం పంచుకోండి
## 🎯 మీ CSS ప్రావీణ్యం కాలఆక్రమికం
```mermaid
timeline
title CSS నేర్చుకునే ప్రగతి
section మూలాధారం (10 నిమిషాలు)
ఫైల్ కనెక్షన్: CSS ని HTMLకి లింక్ చేయండి
: కాస్కేడ్ నియమాలను అర్థం చేసుకోండి
: వారసత్వం బేసిక్స్ నేర్చుకోండి
section సెలెక్టర్లు (15 నిమిషాలు)
లక్ష్యభేదం: ఎలిమెంట్ సెలెక్టర్లు
: తరగతి నమూనాలు
: ID ప్రత్యేకత
: కంబినేటర్లు
section బాక్స్ మోడల్ (20 నిమిషాలు)
లేఅవుట్ మౌలికాలు: మార్జిన్ మరియు ప్యాడింగ్
: బోర్డర్ గుణాల్ని తెలుసుకోండి
: కంటెంటు సైజింగ్
: బాక్స్-సైజింగ్ ప్రవర్తన
section పొజిషనింగ్ (25 నిమిషాలు)
ఎలిమెంట్ స్థానము: స్టాటిక్ వర్సెస్ రిలేటివ్
: అబ్సల్యూట్ పొజిషనింగ్
: జెడ్-ఇండెక్స్ లేయరింగ్
: రెస్పాన్సివ్ యూనిట్లు
section దృశ్య డిజైన్ (30 నిమిషాలు)
స్టైలింగ్ నైపుణ్యం: రంగులు మరియు అపాసిటీ
: షాడోస్ మరియు ఎఫెక్టులు
: ట్రాన్జిషన్స్
: ట్రాన్స్‌ఫార్మ్ గుణాలు
section రెస్పాన్సివ్ డిజైన్ (45 నిమిషాలు)
బహుళ పరికర మద్దతు: మీడియా క్వెరీస్
: సాఫీ లేఅవుట్లు
: మొబైల్-ఫస్ట్ దృష్టికోణం
: వ్యూవ్పోర్ట్ ఆప్టిమైజేషన్
section అధునాతన సాంకేతికతలు (1 వారం)
ఆధునిక CSS: ఫ్లెక్స్బాక్స్ లేఅవుట్లు
: CSS గ్రిడ్ సిస్టమ్స్
: అనుకూల గుణాలు
: యానిమేషన్ కీఫ్రేమ్స్
section వృత్తిక నైపుణ్యాలు (1 నెల)
CSS వాస్తవికరణ: భాగం నమూనాలు
: నిర్వహణీయమైన కోడ్
: పనితీరు ఆప్టిమైజేషన్
: క్రాస్-బ్రౌజర్ taurability
```
### 🛠️ మీ CSS టూల్‌కిట్ సమరి
ఈ పాఠాన్ని పూర్తి చేసిన తర్వాత, మీరు ఇప్పుడు కలిగి ఉన్నవి:
- **కాస్కేడింగ్ అర్థం**: శైలులు ఎలా వారసత్వంగా పొందుతాయో మరియు మార్చుకుంటాయో
- **సెలెక్టర్ ప్రావీణ్యం**: ఎలిమెంట్లు, క్లాసులు, IDs తో ఖచ్చితమైన లక్ష్యం
- **పొజిషనింగ్ నైపుణ్యాలు**: వ్యూహాత్మకంగా ఎలిమెంట్లను స్థానం పెట్టుట మరియు లేయరింగ్
- **దృష్టి డిజైన్**: గాజు ప్రభావాలు, నీడలు, పారదర్శకత సృష్టించడం
- **స్పందనాత్మక సాంకేతికతలు**: శాతానుపాత ఆధారిత లేఅవుట్లు, ఏ స్క్రీన్‌కు సరిపోతాయి
- **కోడ్ వ్యవస్థీకరణ**: సాఫీగా, నిర్వహణ సులభంగా ఉండే CSS నిర్మాణం
- **ఆధునిక ఆచరణలు**: సాపేక్ష యూనిట్లను ఉపయోగించి యాక్సెసిబుల్ డిజైన్ నమూనాలు
**తదుపరి అడుగు**: మీ టెర్రారియానికి ఇప్పుడు నిర్మాణం (HTML) మరియు శైలి (CSS) రెండూ ఉన్నాయి. తుద పాఠం JavaScript తో ఇంటరాక్టివిటీ జోడిస్తుంది!
## అసైన్మెంట్
[CSS Refactoring](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**తప్పిదరువు**:
ఈ పత్రం AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా లోపాలు ఉండవచ్చు అని దయచేసి గమనించాలి. పూర్వస్థితి భాషలో ఉన్న అసలు పత్రం అధికారిక వనరు గా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం ఉపయోగంపై ఏ విధమైన అవగాహన లోపాలు లేదా తప్పు అర్థం చేసుకోవడాలపై మేము బాధ్యత కోల్పోము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

136
translations/te/3-terrarium/2-intro-to-css/assignment.md
Unescape View File

@ -0,0 +1,136 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bee6762d4092a13fc7c338814963f980",
"translation_date": "2026-01-08T19:27:59+00:00",
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
"language_code": "te"
}
-->
# CSS పునర్నిర్మాణ కేటాయింపు
## లక్ష్యం
మీ టెరిరియం ప్రాజెక్ట్‌ను ఆధునిక CSS లేఅవుట్ సాంకేతికతలు ఉపయోగించడానికి మార్చండి! ప్రస్తుత అబ్సల్యూట్ పొజిషనింగ్ విధానాన్ని పునర్నిర్మాణం చేసి, మరింత నిర్వహణగల, స్పందనతో కూడిన డిజైన్ కోసం **Flexbox** లేదా **CSS Grid** ఉపయోగించండి. ఈ కేటాయింపులో మీరు आधुनिक CSS ప్రమాణాలను వర్తింపజేయాల్సి ఉంటుంది, అలాగే మీ టెరిరియం యొక్క దృశ్య ఆకర్షణను కూడా నిలబెట్టుకోవాలి.
విభిన్న లేఅవుట్ పద్ధతులను ఎప్పుడు మరియు ఎలా ఉపయోగించాలో అర్థం చేసుకోవడం ఆధునిక వెబ్ అభివృద్ధికి ముఖ్యమైన నైపుణ్యం. ఈ వ్యాయామం సాంప్రదాయపరి స్థాన నిర్ధారణా సాంకేతికతలతో ఆధునిక CSS లేఅవుట్ వ్యవస్థలను అనుసంధానం చేస్తుంది.
## కేటాయింపు సూచనలు
### దశ 1: విశ్లేషణ మరియు ప్రణాళిక
1. **మీ ప్రస్తుత టెరిరియం కోడ్‌ను సమీక్షించండి** - ఏ ఎలిమెంట్లు అబ్సల్యూట్ పొజిషనింగ్ ఉపయోగిస్తున్నారు అని గుర్తించండి
2. **మీ లేఅవుట్ పద్ధతిని ఎంచుకోండి** - Flexbox లేదా CSS Grid మీ డిజైన్ లక్ష్యాలకు ఏది మెరుగైనదో నిర్ణయించండి
3. **మీ కొత్త లేఅవుట్ నిర్మాణాన్ని స్కెచ్ చేయండి** - కంటైనర్లు మరియు మొక్కల మూలకాలు ఎలా ఏర్పాటుచేయబడతాయో ప్రణాళిక చేయండి
### దశ 2: అమలు
1. **మీ టెరిరియం ప్రాజెక్ట్‌కు కొత్త వెర్షన్ సృష్టించండి** విడివిడిగా ఫోల్డర్‌లో
2. **HTML నిర్మాణాన్ని అవసరమైతే మీ ఎంపిక అయిన లేఅవుట్ పద్ధతిని మద్దతు ఇవ్వడానికి నవీకరించండి**
3. **CSS పునర్నిర్మాణం చేయండి** అబ్సల్యూట్ పొజిషనింగ్ స్థానంలో Flexbox లేదా CSS Grid ఉపయోగించండి
4. **దృశ్య సారూప్యతను నిలుపుకోండి** - మీ మొక్కలు మరియు టెరిరియం జార్ ఒకటే స్థానాల్లో కనిపించేలా చూసుకోండి
5. **స్పందించే ప్రవర్తనను అమలు చేయండి** - మీ లేఅవుట్ వివిధ తెర పరిమాణాలకు అందంగా తగినట్లుగా మార్చుకోగలగాలి
### దశ 3: పరీక్ష మరియు డాక్యుమెంటేషన్
1. **క్రాస్బ్రౌజర్ పరీక్ష** - Chrome, Firefox, Edge, మరియు Safariలో మీ డిజైన్ పనిచేస్తుందో నిర్ధారించండి
2. **స్పందించే పరీక్ష** - మొబైల్, టాబ్లెట్, మరియు డెస్క్‌టాప్ స్క్రీన్ పరిమాణాలపై మీ లేఅవుట్‌ను తనిఖీ చేయండి
3. **డాక్యుమెంటేషన్** - మీ CSSలో మీ లేఅవుట్ ఎంపికలను వివరిస్తూ వ్యాఖ్యలను జోడించండి
4. **స్క్రీన్‌షాట్లు** - వివిధ బ్రౌజర్లలో మరియు స్క్రీన్ పరిమాణాలలో మీ టెరిరియాన్ని పകര്‍చండి
## సాంకేతిక అవసరాలు
### లేఅవుట్ అమలు
- **ఒకటే ఎంచుకోండి**: Flexbox లేదా CSS Grid (ఒకే ఎలిమెంట్లకు రెండూ కాదు)
- **స్పందనాత్మక డిజైన్**: స్థిర పిక్సెల్‌ల బదులు అనప్తే యూనిట్లు (`rem`, `em`, `%`, `vw`, `vh`) ఉపయోగించండి
- **అడగింపు సౌలభ్యం**: సరైన సేమాంటిక్ HTML నిర్మాణం మరియు alt టెక్స్ట్ నిలబెట్టండి
- **కోడ్ నాణ్యత**: క్రమబద్ధీకరించిన పేర్ల నియమాలు మరియు సార్వత్రికంగా CSSను సక్రమంగా ఏర్పాటు చేయండి
### ఆధునిక CSS ఫీచర్లు
```css
/* Example Flexbox approach */
.terrarium-container {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.plant-containers {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1200px;
}
/* Example Grid approach */
.terrarium-layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr;
min-height: 100vh;
gap: 1rem;
}
```
### బ్రౌజర్ మద్దతు అవసరాలు
- **Chrome/Edge**: తాజా 2 వెర్షన్లు
- **Firefox**: తాజా 2 వెర్షన్లు
- **Safari**: తాజా 2 వెర్షన్లు
- **మొబైల్ బ్రౌజర్లు**: iOS Safari, Chrome Mobile
## డెలివరబుల్స్
1. **ఉన్నత సేమాంటిక్ నిర్మాణంతో నవీకరించిన HTML ఫైల్**
2. **ఆధునిక లేఅవుట్ సాంకేతికతలను ఉపయోగించి పునర్నిర్మాణం చేసిన CSS ఫైల్**
3. **క్రాస్బ్రౌజర్ అనుకూలతను చూపే స్క్రీన్‌షాట్ల సమాహారం**:
- డెస్క్‌టాప్ వీక్షణ (1920x1080)
- టాబ్లెట్ వీక్షణ (768x1024)
- మొబైల్ వీక్షణ (375x667)
- కనిష్టం 2 వేరే బ్రౌజర్లు
4. **README.md ఫైల్** డాక్యుమెంటింగ్:
- మీ లేఅవుట్ ఎంపిక (Flexbox vs Grid) మరియు కారణాలు
- పునర్నిర్మాణ సమయంలో ఎదురైన సవాళ్ళు
- బ్రౌజర్ అనుకూలత నోట్స్
- మీ కోడ్ నడిపేందుకు సూచనలు
## మూల్యాంకన రూబ్రిక్
| ప్రమాణం | అత్యుత్తమం (4) | నైపుణ్యం (3) | అభివృద్ధి అవుతోంది (2) | ప్రారంభ స్థాయి (1) |
|----------|---------------|----------------|----------------|---------------|
| **లేఅవుట్ అమలు** | Flexbox/Grid నైపుణ్యంతో అధునాతన లక్షణాలు; పూర్తిగా స్పందనాత్మకంగా ఉంటుంది | సరైన అమలు, మంచి స్పందనాత్మక ప్రవర్తన | ప్రాథమిక అమలు, చిన్న స్పందన సమస్యలతో | అసంపూర్ణ లేదా తప్పు అమలు |
| **కోడ్ నాణ్యత** | శుభ్రమైన, సుసంవ్యవస్థિત CSS, అర్థవంతమైన వ్యాఖ్యలు మరియు స్థిరమైన పేరు నియమాలతో | మంచి నిర్మాణం, కొంత వ్యాఖ్యలతో | సరైన నిర్మాణం, తక్కువ వ్యాఖ్యలతో | చెడు నిర్మాణం, అర్థం చేసుకోవటానికి కష్టమే |
| **క్రాస్బ్రౌజర్ అనుకూలత** | అన్ని అవసరమైన బ్రౌజర్లలో పూర్తి సారూప్యత, స్క్రీన్షాట్లతో | మంచి అనుకూలత, చిన్న తేడా గమనించినది | కొంత అనుకూలత సమస్యలు కానీ పనితీరు ఆపడం లేదు | ప్రధాన అనుకూలత సమస్యలు లేదా పరీక్షలు లేకపోవటం |
| **స్పందనాత్మక డిజైన్** | అత్యుత్తమ మొబైల్-ఫస్ట్ విధానం, సున్నితమైన బ్రేక్ పాయింట్లు | మంచి స్పందన, తగిన బ్రేక్ పాయింట్లతో | ప్రాథమిక స్పందన లక్షణాలు, కొన్ని లేఅవుట్ సమస్యలతో | పరిమిత లేదా విరిగిన స్పందన ప్రవర్తన |
| **డాక్యుమెంటేషన్** | విపుల README, వివరణాత్మక వ్యాసాలు, లోతైన అర్ధాలు | మంచి డాక్యుమెంటేషన్, అన్ని అవసర అంశాలను కవర్ చేసింది | ప్రాథమిక డాక్యుమెంటేషన్, తక్కువ వివరణలతో | అసంపూర్ణ లేదా డాక్యుమెంటేషన్ లేదు |
## సహాయక వనరులు
### లేఅవుట్ పద్ధతి మార్గదర్శకాలు
- 📖 [Flexbox కు పూర్తి మార్గదర్శिका](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- 📖 [CSS Grid కు పూర్తి మార్గదర్శిక](https://css-tricks.com/snippets/css/complete-guide-grid/)
- 📖 [Flexbox మరియు Grid - సరైన పరికరాన్ని ఎంచుకోండి](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
### బ్రౌజర్ పరీక్ష టూల్స్
- 🛠️ [Browser DevTools స్పందనాత్మక మోడ్](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - ఫీచర్ మద్దతు](https://caniuse.com/)
- 🛠️ [BrowserStack - క్రాస్ బ్రౌజర్ పరీక్ష](https://www.browserstack.com/)
### కోడ్ నాణ్యత టూల్స్
- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
- ✅ [HTML Validator](https://validator.w3.org/)
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
## బోనస్ సవాళ్లు
🌟 **అధునాతన లేఅవుట్లు**: మీ డిజైన్‌లో Flexbox మరియు Grid రెండూ వేర్వేరు భాగాల్లో అమలు చేయండి
🌟 **అనిమేషన్ సమ్మిళనం**: మీ కొత్త లేఅవుట్‌తో పనిచేసే CSS ట్రాన్శిషన్‌లు లేదా అనిమేషన్లు జోడించండి
🌟 **డార్క్ మోడ్**: CSS కస్టమ్ ప్రాపర్టీల ఆధారంగా థీమ్ స్విచ్చర్ అమలు చేయండి
🌟 **కంటైనర్ ప్రశ్నలు**: భాగాల స్థాయి స్పందనకు ఆధునిక కంటైనర్ క్వెరీ సాంకేతికత‌లను ఉపయోగించండి
> 💡 **గమనిక**: పనిచేసేలా చేయడం మాత్రమే కాదు, మీరు ఎంచుకున్న లేఅవుట్ పద్ధతి ఈ డిజైన్ సరసమయానికి అత్యుత్తమ పరిష్కారం ఎందుకు అనేది అర్థం చేసుకోవడమూ ముఖ్యమే!
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**గమనిక**:
ఈ పత్రికను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వాన్ని సాధించడానికి ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో లోపాలు లేదా అపార్ధాలు ఉండవచ్చు. స్థానిక భాషలో ఉన్న అసలు పత్రికను అధికారిక మూలంగా పరిగణించాలి. అత్యవసర సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం చేయించడం ఉత్తమం. ఈ అనువాదాన్ని ఉపయోగించడంలో ఏవైనా తప్పు అర్థాలు లేదా విక్షేపాల కోసం మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

771
translations/te/3-terrarium/3-intro-to-DOM-and-closures/README.md
Unescape View File

@ -0,0 +1,771 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "973e48ad87d67bf5bb819746c9f8e302",
"translation_date": "2026-01-08T18:54:46+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
"language_code": "te"
}
-->
# Terrarium Project భాగం 3: DOM నిర్వహణ మరియు JavaScript క్లోజర్లు
```mermaid
journey
title మీ జావాస్క్రిప్ట్ DOM ప్రయాణం
section స్థాపన
DOMను అర్థం చేసుకోండి: 3: Student
closures నేర్చుకోండి: 4: Student
మూలకాలను కనెక్ట్ చేయండి: 4: Student
section పరస్పర చర్య
డ్రాగ్ ఈవెంట్లను సెట్ చేయండి: 4: Student
కోఆర్డినేట్లను ట్రాక్ చేయండి: 5: Student
కదలికను నిర్వహించండి: 5: Student
section మెరుగుదల
శుభ్రపరిచే అంశాలను జోడించండి: 4: Student
ఫంక్షనల్ టెస్టింగ్ చేయండి: 5: Student
టెరేరియమ్ పూర్తి చేయండి: 5: Student
```
![DOM మరియు క్లోజర్](../../../../translated_images/webdev101-js.10280393044d7eaa.te.png)
> స్కెచ్‌నోట్: [Tomomi Imura](https://twitter.com/girlie_mac)
వెబ్ డెవలప్‌మెంట్ లో అత్యంత ఆసక్తికరమైన అంశాలలో ఒకటికి స్వాగతం - విషయాలను పరస్పర చర్యాత్మకంగా మార్చడం! డాక్యూమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) అనేది మీ HTML మరియు JavaScript మధ్య ఒక ఇద్దరి మధ్య వంతెన లాగా ఉంటుంది, మరియు ఈ రోజు మనం దాన్ని ఉపయోగించి మీ టెర్రారియం కి జీవం తెస్తాము. Tim Berners-Lee మొదటి వెబ్ బ్రౌజర్ ను సృష్టించినప్పుడు, అతను డాక్యూమెంట్లు డైనమిక్ మరియు పరస్పర చర్యాత్మకంగా ఉండే వెబ్ ను ఊహించాడు - DOM ఆ దృశ్యాన్ని నిజం చేస్తుంది.
మనం JavaScript క్లోజర్లను కూడా అన్వేషిస్తాము, అవి మొదట్లో బాగ కాకపోవచ్చు. క్లోజర్లు అంటే, మీ ఫంక్షన్లు ముఖ్య సమాచారం గుర్తుంచుకునే "మెమరీ పొకెట్టులు" సృష్టించడం అని ఆలోచించండి. ఇది మీరు మీ టెర్రారియంలో ప్రతి మొక్కకు దాని స్వంత డేటా రికార్డు ఉంటుందని భావించడానికి సమానం. ఈ పాఠాంతం ముగింపు వరకు, మీరు అవి సహజమైనవి మరియు ఉపయోగకరమైనవి అని అర్థం చేసుకుంటారు.
ఇది మనం నిర్మించబోతున్నది: మరింత ఇష్టమైన ఏ ప్రదేశంలో అయినా మొక్కలను డ్రాగ్ మరియు డ్రాప్ చేయగల టెర్రారియం. మీరు డ్రాగ్-అండ్-డ్రాప్ ఫైల్ అప్‌లోడ్స్ నుండి పరస్పర చర్య గేమ్‌ల వరకు ప్రతి దానిని నడిపించే DOM నిర్వహణ సాంకేతికతలను నేర్పుకుంటారు. మీ టెర్రారియం కి జీవం తెప్పిద్దాము.
```mermaid
mindmap
root((DOM & JavaScript))
DOM Tree
ఎలిమెంట్ ఎంపిక
ప్రాపర్టీ యాక్సెస్
ఈవెంట్ హ్యాండ్లింగ్
డైనమిక్ నవీకరణలు
ఈవెంట్లు
పాయింటర్ ఈవెంట్లు
మౌస్ ఈవెంట్లు
టచ్ ఈవెంట్లు
ఈవెంట్ లిస్టెనర్లు
క్లోజర్స్
ప్రైవేట్ వేరియబుల్స్
ఫంక్షన్ స్కోప్
మేమరీ పర్సిస్టెన్స్
స్థితి నిర్వహణ
డ్రాగ్ & డ్రాప్
పొజిషన్ ట్రాకింగ్
కోఆర్డినేట్ గణితం
ఈవెంట్ లైఫ్‌సైకిల్
యూజర్ ఇంటరాక్షన్
ఆధునిక నమూనాలు
ఈవెంట్ డెలెగేషన్
పనితీరు
క్రాస్-డివైస్
యాక్సెసిబిలిటీ
```
## ముందస్తు-విందు క్విజ్
[ముందస్తు-విందు క్విజ్](https://ff-quizzes.netlify.app/web/quiz/19)
## DOM అర్థం చేసుకోవడం: మీకు ఇంటరాక్టివ్ వెబ్ పేజీలకు ద్వారం
డాక్యూమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) అనేది JavaScript మీ HTML అంశాలతో ఎలా సంభాషిస్తుందో సూచిస్తుంది. మీ బ్రౌజర్ ఒక HTML పేజీ లోడ్ చేసినప్పుడు, ఆ పేజీకి మెమరీలో ఒక నిర్మితి రూపాన్ని సృష్టిస్తుంది - అదే DOM. దీన్ని ఒక కుటుంబ వృక్షంగా ఆలోచించండి, ఇక్కడ ప్రతి HTML అంశం ఒక కుటుంబ సభ్యునిగా ఉంటుంది, JavaScript అందుకు యాక్సెస్ చెయ్యగలదు, మార్చగలదు లేదా పునఃవ్యవస్థాపించగలదు.
DOM నిర్వహణ స్థిరమైన పేజీలను ఇంటరాక్టివ్ వెబ్‌సైట్లుగా మార్చుతుంది. మీరు ప్రతి సారీ ఓ బటన్ హోవర్ అయినప్పుడు రంగు మారడం, పేజీ రీఫ్రెష్ లేకుండా కంటెంట్ నవీకరణ, లేదా మీరు చుట్టుంచి డ్రాగ్ చేయగల అంశాలు చూస్తే, అది DOM నిర్వహణ పనిచేస్తోంది.
```mermaid
flowchart TD
A["డాక్యుమెంట్"] --> B["హెచ్టీఎమ్‌ఎల్"]
B --> C["హెడ్"]
B --> D["బాడీ"]
C --> E["టైటిల్"]
C --> F["మెటా ట్యాగ్స్"]
D --> G["H1: నా టెరేరియం"]
D --> H["డివ్: పేజీ కంటెయినర్"]
H --> I["డివ్: ఎడమ కంటెయినర్"]
H --> J["డివ్: కుడి కంటెయినర్"]
H --> K["డివ్: టెరేరియం"]
I --> L["వృక్ష మూలకాలు 1-7"]
J --> M["వృక్ష మూలకాలు 8-14"]
L --> N["img#plant1"]
L --> O["img#plant2"]
M --> P["img#plant8"]
M --> Q["img#plant9"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style D fill:#e8f5e8
style H fill:#fff3e0
style N fill:#ffebee
style O fill:#ffebee
style P fill:#ffebee
style Q fill:#ffebee
```
![DOM వృక్ష ప్రతినిధి](../../../../translated_images/dom-tree.7daf0e763cbbba92.te.png)
> DOM మరియు దానికి సూచించే HTML మార్కప్ యొక్క ప్రతినిధి. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
**DOM ని శక్తివంతం చేసే అంశాలు ఇవి:**
- **మీ పేజీలోని ఏ అంశానికి అయినా యాక్సెస్ ఇచ్చే** నిర్మిత మార్గాన్ని అందిస్తుంది
- **పేజీ రీఫ్రెష్ లేకుండా డైనమిక్ కంటెంట్ నవీకరణలు చేయగలదు**
- **క్లిక్‌లు, డ్రాగ్‌ల వంటి వాడుకరి పరస్పర చర్యలకు ప్రత్యక్ష స్పందన చేయగలదు**
- **ఆధునిక పరస్పర చర్య గల వెబ్ అప్లికేషన్లకు పునాది సృష్టిస్తుంది**
## JavaScript క్లోజర్లు: ఒక సమగ్రమైన, శక్తివంతమైన కోడ్ సృష్టించడం
[js closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures) అర్థం: ఫంక్షన్కు దాని స్వంత ప్రైవేటు పని స్థలంతో పాటు నిలువ డేటా ఇచ్చినట్లు. గాలపాగోస్ ద్వీపాల్లో డార్విన్ పక్షులు ప్రతీది తమ ప్రత్యేక వాతావరణం ప్రకారం ప్రత్యేక బీక్స్ అభివృద్ధి చేసుకున్నట్లు భావించండి - క్లోజర్లు కూడా అదే విధంగా పనిచేస్తాయి, అందులో ప్రత్యేకమైన ఫంక్షన్లు రూపొందించి ఆ ప్రత్యేక సన్నివేశాన్ని "మరచుకోకుండా" నిలుపుతాయి, అవి తల్లి ఫంక్షన్ పూర్తయిన తర్వాత కూడా.
మన టెర్రారియంలో, క్లోజర్లు ప్రతి మొక్క తన స్థానాన్ని స్వతంత్రంగా గుర్తుంచుకోవడంలో సహాయపడతాయి. ఈ నమూనా ప్రొఫెషనల్ JavaScript డెవలప్‌మెంట్ లో అన్ని చోట్ల కనిపిస్తుంది, కనుక దీన్ని అర్థం చేసుకోవడం చాలా విలువైన విషయం.
```mermaid
flowchart LR
A["dragElement(plant1)"] --> B["క్లోజర్ సృష్టిస్తుంది"]
A2["dragElement(plant2)"] --> B2["క్లోజర్ సృష్టిస్తుంది"]
B --> C["ఖాసాగ్రహాలు"]
B2 --> C2["ఖాసాగ్రహాలు"]
C --> D["pos1, pos2, pos3, pos4"]
C --> E["pointerDrag ఫంక్షన్"]
C --> F["elementDrag ఫంక్షన్"]
C --> G["stopElementDrag ఫంక్షన్"]
C2 --> D2["pos1, pos2, pos3, pos4"]
C2 --> E2["pointerDrag ఫంక్షన్"]
C2 --> F2["elementDrag ఫంక్షన్"]
C2 --> G2["stopElementDrag ఫంక్షన్"]
H["సస్యం 1 తన స్థానం గుర్తుంచుకున్నది"] --> B
H2["సస్యం 2 తన స్థానం గుర్తుంచుకున్నది"] --> B2
style B fill:#e8f5e8
style B2 fill:#e8f5e8
style C fill:#fff3e0
style C2 fill:#fff3e0
```
> 💡 **క్లోజర్ల అర్థం**: క్లోజర్లు JavaScript లో ఒక ముఖ్యమైన విషయం, మరియు బహుశా అనేక డెవలపర్లు దీన్ని పూర్తిగా అర్థం చేసుకోవడం నిధానం తీసుకుంటారు. ఈ రోజు మనం ఆచరణకు కేంద్రీకృతమై ఉన్నాము - మీరు ఇంటరాక్‌టివ్ ఫీచర్లను నిర్మించినప్పుడు క్లోజర్లు సహజంగా ఉత్పన్నమవుతాయో చూశారు. అవగాహనమీదుగా ఉంటూ మీరు వీరు నిజ స‌మ‌స్య‌ల‌కు ఎలాగా పరిష్కార‌మిచ్చారో తెలుసుకుంటారు.
![DOM వృక్ష ప్రతినిధి](../../../../translated_images/dom-tree.7daf0e763cbbba92.te.png)
> DOM మరియు దానికి సూచించే HTML మార్కప్ యొక్క ప్రతినిధి. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
ఈ పాఠంలో, మేము ఇంటరాక్టివ్ టెర్రారియం ప్రాజెక్టును పూర్తిచేయబోతున్నాము - ఇది యూజర్‌కు పేజీ上的 మొక్కలను నిర్వహించడానికి JavaScript సృష్టించడం ద్వారా సాధ్యం అవుతుంది.
## మొదలు పెట్టే ముందు: విజయంలో సిద్ధం కావడం
మీకు గత టెర్రారియం పాఠాల నుండి HTML మరియు CSS ఫైళ్ల అవసరం - మనం ఆ స్థిరమైన డిజైన్ను ఇంటరాక్టివ్‌గా మార్చబోతున్నాము. మీరు మొదటి సారి చేరుతున్నట్లయితే, ఆ పాఠాలు ముందుగా పూర్తి చేయడం ముఖ్యమైన సమాచారాన్ని అందిస్తుంది.
మనము ఈ క్రింది అంశాలను నిర్మించబోతున్నాము:
- **అన్ని టెర్రారియం మొక్కలకు స్మూత్ డ్రాగ్-అండ్-డ్రాప్**
- **స్థాన సూచికల ట్రాకింగ్** - మొక్కలు తమ స్థానాలను గుర్తుంచుకుంటాయి
- **వానిల్లా JavaScript తో పూర్తి ఇంటరాక్షన్ ఇంటర్‌ఫేస్**
- **క్లోజర్ ప్యాటర్న్ల ఉపయోగంతో శుభ్రమైన మరియు సమగ్రమైన కోడ్**
## మీ JavaScript ఫైల్ సెట్ చేయడం
మీ టెర్రారియాన్ని ఇంటరాక్టివ్‌గా మార్చే JavaScript ఫైల్ను సృష్టిద్దాం.
**దశ 1: మీ స్క్రిప్ట్ ఫైల్ సృష్టించండి**
మీ టెర్రారియం ఫోల్‌డర్‌లో `script.js` అనే కొత్త ఫైల్‌ను సృష్టించండి.
**దశ 2: JavaScript ను HTML కి లింక్ చేయండి**
మీ `index.html` ఫైల్ యొక్క `<head>` సెక్షన్‌లో ఈ స్క్రిప్ట్ ట్యాగ్‌ను చేర్చండి:
```html
<script src="./script.js" defer></script>
```
**`defer` అట్రిబ్యూట్ ముఖ్యం అయిన కారణాలు:**
- **మీ JavaScript అన్ని HTML లోడ్ అయ్యే వరకు వేచిచూసేలా చేస్తుంది**
- **JS లోడ్ కాకముందు ఎలిమెంట్స్ కోసం చూడటానికి ఉండే లోపాలను నివారిస్తుంది**
- **మీ ప్లాంట్ ఎలిమెంట్లు అందుబాటులో ఉంటాయని ఖాయం చేస్తుంది**
- **పేజీ చివర స్క్రిప్ట్ పెట్టే దానిపై మెరుగైన పనితనం ఇస్తుంది**
> ⚠️ **ముఖ్య గమనిక**: `defer` అట్రిబ్యూట్ సాధారణ టైమింగ్ సమస్యలను నివారిస్తుంది. లేకపోతే, JavaScript లోడ్ అయిన వెంటనే కానీ HTML ఎలిమెంట్లు ఇంకా అందుబాటులో లేకపోవచ్చు, దానిని యాక్సెస్ చేయడానికి యత్నిస్తే లోపాలు వస్తాయి.
---
## JavaScript ను మీ HTML ఎలిమెంట్లకు కనెక్ట్ చేయడం
ఎలిమెంట్స్ ని డ్రెగ్గబుల్ చేయడానికి ముందు, JavaScript అవి DOM లో ఎక్కడ ఉన్నాయో కనుగొనాలి. ఇది ఒక లైబ్రరీ సూచిక వ్యవస్థకు సమానం - మీరు సూచిక సంఖ్య కలిగి ఉంటే, మీరు కావలసిన ఖచ్చితమైన పుస్తకాన్ని కనుగొని అందులోని అన్ని విషయాలను యాక్సెస్ చేయవచ్చు.
మనం `document.getElementById()` పద్ధతిని ఆ కనెక్షన్ల కోసం ఉపయోగిస్తాము. ఇది ఖచ్చితమైన దస్త్రీకరణ విధానం లాంటిది - మీరు ఒక ID ఇస్తే, అది HTML లో ఖచ్చితమైన అంశాన్ని కనుగొంటుంది.
### అన్ని మొక్కలకు డ్రాగ్ ఫంక్షనాలిటీకి అనుమతించడం
ఈ కోడ్‌ను మీ `script.js` ఫైల్‌లో చేర్చండి:
```javascript
// అన్ని 14 మొక్కలకు డ్రాగ్ ఫంక్షనాలిటీని ఆన్ చేయండి
dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));
```
**ఈ కోడ్ సాధించేది:**
- **ప్రతి మొక్క ఎలిమెంట్‌ను DOM లోని దాని ప్రత్యేక ID ద్వారా కనుగొంటుంది**
- **ప్రతి HTML అంశానికి JavaScript సూచనను తెస్తుంది**
- **ప్రతి అంశాన్ని `dragElement` ఫంక్షన్‌కు పంపుతుంది (మనం తరువాత సృష్టించుకుందాం)**
- **ప్రతి మొక్కను డ్రాగ్-అండ్-డ్రాప్ ఇంటరాక్షన్ కోసం సిద్ధం చేస్తుంది**
- **మీ HTML నిర్మాణాన్ని JavaScript ఫంక్షనాలిటీతో కలిపిస్తుంది**
> 🎯 **ఎందుకు క్లాసుల కంటే IDs ఉపయోగించాలి?** IDs ప్రత్యేకమైన గుర్తింపులను అందిస్తాయి, క్లాసులు వివిధ అంశాల గ్రూపుల స్టైలింగ్ కోసం ఉంటాయి. JavaScript ప్రత్యేక అంశాలను నియంత్రించేటప్పుడు, IDs ఖచ్చితత్వం మరియు పనితనాన్ని అందిస్తాయి.
> 💡 **ప్రో సూచన**: ప్రతి మొక్కకి `dragElement()` ని వేరుగా పిలవటం గమనించండి. దీని వల్ల ప్రతి మొక్కకి దాని స్వంత స్వతంత్ర డ్రాగింగ్ ప్రవర్తన వస్తుంది, ఇది స్మూత్ వాడుకరి అనుభవం కోసం అవసరం.
### 🔄 **అధ్యాపక పరీక్ష**
**DOM కనెక్షన్ అర్థం చేసుకోవడం**: డ్రాగ్ ఫంక్షనాలిటీకి ముందు, మీరు సామర్థ్యం కలిగి ఉండాలి:
- ✅ `document.getElementById()` HTML ఎలిమెంట్లు ఎలా కనుగొంటుందో వివరించగలగాలి
- ✅ ప్రతి మొక్కకి ప్రత్యేక IDs ఎందుకు ఉపయోగిస్తామో అర్థం చేసుకోవాలి
- ✅ స్క్రిప్ట్ ట్యాగ్స్ లో `defer` అట్రిబ్యూట్ ఉద్దేశం ఏమిటో వివరించగలగాలి
- ✅ JavaScript మరియు HTML DOM ద్వారా ఎలా కనెక్ట్ అవుతాయో గుర్తించగలగాలి
**తక్షణ స్వీయ-పరీక్ష**: ఒకే ID తో రెండు అంశాలు ఉంటే ఏమవుతుంది? `getElementById()` ఒకే ఒక్క అంశాన్ని ఎందుకు ఇస్తుంది?
*జవాబు: IDs ప్రత్యేకంగా ఉండాలి; అవి పునరావృతమైతే, మొదటి అంశం మాత్రమే రిటర్న్ అవుతుంది*
---
## డ్రాగ్ ఎలిమెంట్ క్లోజర్‌ను నిర్మించడం
ఇప్పుడు మనం డ్రాగింగ్ ఫంక్షనాలిటీ హృదయమైన క్లోజర్‌ని సృష్టిస్తాము: ఇది ప్రతి మొక్కకు డ్రాగింగ్ ప్రవర్తనను నిర్వహిస్తుంది. ఈ క్లోజర్ లో ఒకటి కంటే ఎక్కువ లోపలి ఫంక్షన్లు ఉంటాయి, అవి మౌస్ కదిలే దిశలను ట్రాక్ చేసి, అంశాల స్థానాలను నవీకరిస్తాయి.
క్లోజర్లు ఈ పని కి సంపూర్ణం, ఎందుకంటే అవి "ప్రైవేటు" వేరియబుల్స్ సృష్టించి ఫంక్షన్ పిలుపుల మధ్య పిజి ఉంటాయి, అందివల్ల ప్రతి మొక్కకి దాని స్వంత స్వతంత్ర స్థానం ట్రాకింగ్ వ్యవస్థ వస్తుంది.
### ఒక సులభ ఉదాహరణతో క్లోజర్ల అర్థం చేసుకోవడం
క్లోజర్ల తోడు సులభ ఉదాహరణ ఇక్కడ ఉంది:
```javascript
function createCounter() {
let count = 0; // ఇది ఒక ప్రైవేట్ వేరియబుల్ లాంటిది
function increment() {
count++; // లోపల ఫంక్షన్ బయటి వేరియబుల్‌ను గుర్తుంచుకుంటుంది
return count;
}
return increment; // మేము లోపల ఫంక్షన్‌ను తిరిగి ఇస్తున్నాము
}
const myCounter = createCounter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2
```
**ఈ క్లోజర్ నమూనాలో జరుగుతున్నది:**
- **ఒక ప్రైవేట్ `count` వేరియబుల్ సృష్టిస్తుంది ఇది క్లోజర్ లోనే ఉంటుంది**
- **లోపలి ఫంక్షన్ ఆ అవుటర్ వేరియబుల్ ని యాక్సెస్ చేసి మార్చుకోవచ్చు (క్లోజర్ యాంత్రికత)**
- **లోపలి ఫంక్షన్ రిటర్న్ చేసినప్పుడు, అది ఆ ప్రైవేట్ డేటాతో కనెక్షన్ నిలుపుకుంటుంది**
- **`createCounter()` పూర్తి అయిన తర్వాత కూడా `count` మన్నిస్తుంది మరియు దాని విలువ గుర్తుంచుకుంటుంది**
### డ్రాగ్ ఫంక్షనాలిటీకి క్లోజర్లు ఎందుకు సరైనవి
మన టెర్రారియంలో ప్రతీ మొక్క దాని ప్రస్తుత స్థాన సూచికలను గుర్తుంచుకోవాలి. క్లోజర్లు ఈ సమస్యకు సరైన పరిష్కారం:
**మనం పొందే ముఖ్య లాభాలు:**
- **ప్రతి మొక్కకు స్వతంత్ర ప్రైవేట్ స్థాన వేరియబుల్స్ ఉంచడం**
- **డ్రాగ్ సమావేశాల మధ్య సూచిక మొత్తం సురక్షితంగా నిలుపుకొనటం**
- **వేరే డ్రాగ్ అండ్ డ్రాప్ అంశాల మధ్య వేరియబుల్ సర్థకత తప్పించడం**
- **క్లియర్, సమగ్రమైన కోడ్ నిర్మాణాన్ని సృష్టించడం**
> 🎯 **ఉద్యమ లక్ష్యం**: మీరు ఇప్పుడు క్లోజర్ల అన్ని అంశాల్లో నిపుణులు కావాల్సిన అవసరం లేదు. మీరు దానికి సహాయకారిగా ఎలా ఉపయోగిస్తారో దృష్టి పెడండి మరియు మన డ్రాగింగ్ ఫంక్షనాలిటీకి స్టేట్ నిర్వహణ ఎలా చేస్తుందో చూడండి.
```mermaid
stateDiagram-v2
[*] --> Ready: పేజీ లోడ్ అవుతుంది
Ready --> DragStart: యూజర్ నొక్కారు (pointerdown)
DragStart --> Dragging: మाउस/వెరిచి కదలుతుంది (pointermove)
Dragging --> Dragging: కొనసాగింపు కదిలించడం
Dragging --> DragEnd: యూజర్ విడుదల చేశారు (pointerup)
DragEnd --> Ready: తదుపరి డ్రాగ్ కోసం రీసెట్
state DragStart {
[*] --> CapturePosition
CapturePosition --> SetupListeners
SetupListeners --> [*]
}
state Dragging {
[*] --> CalculateMovement
CalculateMovement --> UpdatePosition
UpdatePosition --> [*]
}
state DragEnd {
[*] --> RemoveListeners
RemoveListeners --> CleanupState
CleanupState --> [*]
}
```
### dragElement ఫంక్షన్ ను సృష్టించడం
ఇప్పుడు మనం డ్రాగింగ్ లాజిక్ లోపల పూర్తి ఫంక్షన్ ను నిర్మిద్దాం. మీ మొక్క ఎలిమెంట్ల డిక్లరేషన్ల కింద ఈ ఫంక్షన్ చేర్చండి:
```javascript
function dragElement(terrariumElement) {
// స్థానాన్ని ట్రాకింగ్ చేయడానికి వేరియబుల్స్ ప్రారంభించండి
let pos1 = 0, // మునుపటి మౌస్ X స్థానం
pos2 = 0, // మునుపటి మౌస్ Y స్థానం
pos3 = 0, // ప్రస్తుత మౌస్ X స్థానం
pos4 = 0; // ప్రస్తుత మౌస్ Y స్థానం
// ప్రారంభ డ్రాగ్ ఈవెంట్ లిస్నర్ సెటప్ చేయండి
terrariumElement.onpointerdown = pointerDrag;
}
```
**స్థాన సూచిక వ్యవస్థ అర్థం చేసుకోవడం:**
- **`pos1` మరియు `pos2`**: పాత మరియు కొత్త మౌస్ స్థానాల మధ్య వ్యత్యాసాన్ని నిలుపుకుంటాయి
- **`pos3` మరియు `pos4`**: ప్రస్తుత మౌస్ సమన్వయాలను ట్రాక్ చేస్తాయి
- **`terrariumElement`**: మనం డ్రాగ్ చేయదలచిన ప్రత్యేక మొక్క ఎలిమెంట్
- **`onpointerdown`**: వాడుకరి డ్రాగ్ ప్రారంభించినప్పుడు టరిగ్గర్ అయ్యే ఈవెంట్
**క్లోజర్ నమూనా ఎలా పనిచేస్తుంది:**
- **ప్రతి మొక్క ఎలిమెంట్ కోసం ప్రైవేట్ స్థాన వేరియబుల్స్ సృష్టిస్తుంది**
- **ఇవి డ్రాగింగ్ జీవితం అంతా కొనసాగుతాయి**
- **ప్రతి మొక్క స్వతంత్రంగా దాని స్థానాలను ట్రాక్ చేస్తుంది**
- **`dragElement` ఫంక్షన్ ద్వారా శుభ్రంగా ఇంటర్‌ఫేస్ అందిస్తుంది**
### ఎందుకు Pointer Events ఉపయోగించాలి?
`onclick` కన్నా `onpointerdown` ఎందుకు ఉపయోగిస్తున్నామని మీకు ఆశ్చర్యంగా ఉండవచ్చు. కారణాలు ఇవి:
| ఈవెంట్ రకం | ఉత్తమంగా ఉపయోగించే సందర్భం | పరిమితి |
|------------|-----------------------------|---------|
| `onclick` | సులభమైన బటన్ క్లిక్‌లు | డ్రాగ్ చేయలేడు (క్లిక్ & రిలీజు మాత్రమే) |
| `onpointerdown` | మౌస్ మరియు టచ్ రెండింటి కోసం | కొత్తది, కానీ ప్రస్తుతం బాగా మద్దతు ఉంది |
| `onmousedown` | డెస్క్‌టాప్ మౌస్ కోసం మాత్రమే | మొబైల్ వినియోగదారులను వదిలేస్తుంది |
**Pointer events మనం రూపొందిస్తున్నది కోసం ఎందుకు సరైనవి:**
- **మౌస్, ఏదైనా వేలితో లేదా స్టైలస్ తో ఉపయోగించినా సమర్ధవంతంగా పనిచేస్తుంది**
- **లాప్‌టాప్, టాబ్లెట్ లేదా ఫోన్ లో కూడా సమాన అనుభవం కలిగిస్తుంది**
- **నిజమైన డ్రాగింగ్ చర్యను నిర్వహిస్తుంది (మాత్రమే క్లిక్ చేయకుండా)**
- **ఆధునిక వెబ్ యాప్స్ నుండి వినియోగదారులు గడుతారు అలా సహజ అనుభవాన్ని ఇస్తుంది**
> 💡 **భవిష్యత్తుకు సన్నద్ధత**: Pointer events సరికొత్త, వాడుకరి పరస్పర క్రియలకు అత్యంత సమగ్ర పద్దతిగా మారింది. మౌస్ మరియు టచ్ కోసం విభిన్న కోడ్ రాయకుండానే రెండింటిని ఉచితంగా పొందడం చాలా మంచి విషయం, కాకపోతే ఎలా?
### 🔄 **అధ్యాపక పరీక్ష**
**ఈవెంట్ నిర్వహణ అర్థం చేసుకోవడం**: మీరు ఈ విషయాలను ధృవీకరించాలి:
- ✅ pointer events ను mouse events కి బదులు ఎందుకు ఉపయోగిస్తారు?
- ✅ క్లోజర్ వేరియబుల్స్ ఫంక్షన్ పిలుపుల మధ్య ఎలా నిలుస్తాయి?
- ✅ smooth dragging కోసం `preventDefault()` పాత్ర ఏంటి?
- ✅ మనం వ్యక్తిగత ఎలిమెంట్లకు కాక, డాక్యుమెంట్‌కు లిసనర్స్ ఎందుకు జత చేస్తాం?
**వాస్తవ ప్రపంచ సంబంధం**: మీరు రోజువారీ ఉపయోగించే డ్రాగ్ & డ్రాప్ ఇంటర్‌ఫేస్‌ల గురించి ఆలోచించండి:
- **ఫైలు అప్‌లోడ్లు**: బ్రౌజర్ విండోలో ఫైళ్ళను డ్రాగ్ చేయడం
- **కాన్బన్ బోర్డులు**: పనులను కాలమ్స్ మధ్య తరలించడం
- **ఇమేజ్ గ్యాలరీలు**: ఫొటోలు సర్దుబాటు చేయడం
- **మొబైల్ ఇంటర్‌ఫేస్‌లు**: టచ్‌స్క్రీన్‌లపై స్వైప్ మరియు డ్రాగ్ చేయడం
---
## pointerDrag ఫంక్షన్: డ్రాగ్ ప్రారంభాన్ని క్యాప్చర్ చేయడం
వాడుకరి మొక్కపై కుడివైపు మౌస్ క్లిక్ లేదా వేళ్లతో టచ్ చేస్తే, `pointerDrag` ఫంక్షన్ చర్యలోకి వస్తుంది. ఈ ఫంక్షన్ ప్రారంభ సమన్వయాలను గ్రహించి డ్రాగ్ వ్యవస్థను సెట్ చేస్తుంది.
ఈ ఫంక్షన్ ను `dragElement` క్లోజర్లో, `terrariumElement.onpointerdown = pointerDrag;` లైన్ వెంట చేర్చండి:
```javascript
function pointerDrag(e) {
// డిఫాల్ట్ బ్రౌజర్ ప్రవర్తనను ఆపండి (ఉదాహరణకు, టెక్స్ట్ సెలక్షన్)
e.preventDefault();
// ప్రారంభ మౌస్/టచ్ స్థానం పట్టుకోండి
pos3 = e.clientX; // డ్రాగ్ ప్రారంభమైన X కోఆర్డినేట్
pos4 = e.clientY; // డ్రాగ్ ప్రారంభమైన Y కోఆర్డినేట్
// డ్రాగింగ్ ప్రక్రియ కోసం ఈవెంట్ లిస్నర్లు ఏర్పాటు చేయండి
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;
}
```
**దశల వారీగా జరిగేది:**
- **డ్రాగింగ్ లో జోక్యం కలిగే డిఫాల్ట్ బ్రౌజర్ ప్రవర్తనలు నిరోధిస్తుంది**
- **వాడుకరి డ్రాగ్ ప్రారంభించిన ఖచ్చితమైన సమన్వయాలను రికార్డ్ చేస్తుంది**
- **డ్రాగ్ కదలికకు ఈవెంట్ లిసనర్లను సెట్ చేస్తుంది**
- **మౌస్/వేళ్లు కదలిక ట్రాకింగ్ కోసం పూర్తి డాక్యుమెంట్‌పై సిస్టమ్ సిద్ధం చేస్తుంది**
### ఈవెంట్ నిరోధన అర్థం చేసుకోవడం
`e.preventDefault()` లైన్ స్మూత్ డ్రాగ్ కోసం చాలా ముఖ్యము:
**నివారణ లేకపోతే బ్రౌజర్లు:**
- **పేజీ పై డ్రాగ్ చేస్తూ టెక్స్ట్ ఎంచుకోవచ్చు**
- **కుడి క్లిక్ డ్రాగ్ పై కంటెక్స్ట్ మెనూలు తెరుచుకోవచ్చు**
- **మన కస్టమ్ డ్రాగ్ ప్రవర్తనలో జోక్యం కలిగించవచ్చు**
- **డ్రాగ్ సమయంలో దృశ్య మిశ్రమాలు ఉత్పన్నం చేయవచ్చు**
> 🔍 **ప్రయోగం**: ఈ పాఠం పూర్తి అయిన తరువాత, `e.preventDefault()` తీసేసి డ్రాగింగ్ అనుభవం ఎలా మారినదో చూడండి. మీరు త్వరగా ఈ లైన్కు కారణం తెలుసుకుంటారు!
### స్థాన సూచిక ట్రాకింగ్ సిస్టమ్
`e.clientX` మరియు `e.clientY` ప్రాపర్టీలు మనకు ఖచ్చితమైన మౌస్/టచ్ సమన్వయాలను ఇవ్వగలుగుతాయి:
| ప్రాపర్టీ | ఇది ఏది కొలుస్తుంది | ఉపయోగం |
|----------|---------------------|---------|
| `clientX` | వ్యూవ్‌పోర్ట్ కు సంబంధించిన అడ్డుగారపు స్థానం | ఎడమ-కుడి కదలిక ట్రాక్ చేయడం |
| `clientY` | వ్యూవ్‌పోర్ట్ కు సంబంధించిన నిలువు స్థానం | పైకి-కిందికి కదలిక ట్రాక్ చేయడం |
**ఈ కోఆర్డినేట్లను అర్థం చేసుకోవడం:**
- **అందిస్తుంది** పిక్సెల్-పర్ఫెక్ట్ స్థానం సమాచారాన్ని
- **నవీకరిస్తుంది** యూజర్ వారి పాయింటర్‌ను కదిలించడంలో రియల్-టైంలో
- **స్థిరంగా ఉంటుంది** వివిధ స్క్రీన్ పరిమాణాలు మరియు జూమ్ స్థాయిలలో
- **సమర్థిస్తుంది** సున్నితమైన, ప్రతిస్పందనాత్మక డ్రాగ్ ఇంటరాక్షన్లు
### డాక్యుమెంట్-లెవెల్ ఈవెంట్ లిసనర్లను సెటప్ చేయడం
మనం ఎలా మొత్తం `document`కి move మరియు stop ఈవెంట్లను అటాచ్ చేస్తున్నామో గమనించండి, కేవలం ప్లాంట్ ఎలిమెంట్ కు కాదు:
```javascript
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;
```
**ఎందుకు డాక్యుమెంట్కి అటాచ్ చేయాలి:**
- **కొనసాగుతుంది** ట్రాకింగ్ కి మౌస్ ప్లాంట్ ఎలిమెంట్ నుంచి బయటకు రావడం కూడా
- **తట్టు** డ్రాగ్ విరామం వద్ద యూజర్ వేగంగా కదిలినప్పటికీ
- **అందిస్తుంది** మొత్తం స్క్రీన్ మీద సాఫ్ట్ డ్రాగింగ్ అనుభవం
- **నిర్వహిస్తుంది** బ్రౌజర్ విండో వెలుపల కర్సర్ కదలడానికి వచ్చే ఎడ్జ్ కేసులను
> ⚡ **పర్ఫార్మెన్స్ నోటు**: డ్రాగింగ్ ఆగినప్పుడు ఈ డాక్యుమెంట్-లెవెల్ లిసనర్లను క్లీనప్ చేస్తాము, మెమొరీ లీక్స్ మరియు పనితీరు సమస్యలను నివారించడానికి.
## డ్రాగ్ సిస్టమ్ పూర్తి చేయడం: మోషన్ మరియు క్లీనప్
ఇప్పుడు మిగిలిన రెండు ఫంక్షన్లను సూచిస్తాం, ఇవి వాస్తవ డ్రాగింగ్ మూవ్మెంట్ మరియు డ్రాగింగ్ ఆగినప్పుడు క్లీనప్ నిర్వహిస్తాయి. ఈ ఫంక్షన్లు కలిసి మీ టెరేరియంలో సాఫ్ట్, ప్రతిస్పందనాత్మక ప్లాంట్ కదలికను సృష్టిస్తాయి.
### elementDrag ఫంక్షన్: కదలికను ట్రాక్ చేయడం
`pointerDrag` యొక్క ముగింపు కర్లీ బ్రాకెట్ వెంటనే `elementDrag` ఫంక్షన్ చేర్చండి:
```javascript
function elementDrag(e) {
// చివరి సంఘటన నుండి మార్చిన దూరం లెక్కించండి
pos1 = pos3 - e.clientX; // కలంబ దూరం మార్చబడింది
pos2 = pos4 - e.clientY; // లంబ దూరం మార్చబడింది
// ప్రస్తుత స్థానం ట్రాకింగ్‌ను నవీకరించండి
pos3 = e.clientX; // కొత్త ప్రస్తుత X స్థానం
pos4 = e.clientY; // కొత్త ప్రస్తుత Y స్థానం
// మూలకం స్థానానికి చలనం వర్తించండి
terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
}
```
**కోఆర్డినెట్ గణితం అర్థం చేసుకోవడం:**
- **`pos1` మరియు `pos2`**: ఈ చివరి నవీకరణ నుండి మౌస్ ఎంత దూరం కదిలిందో లెక్కించు
- **`pos3` మరియు `pos4`**: తదుపరి గణన కోసం ప్రస్తుత మౌస్ స్థానం నిల్వ చేయు
- **`offsetTop` మరియు `offsetLeft`**: పేజీపై ఎలిమెంట్ ప్రస్తుత స్థానం పొందు
- **వియోగం తీయడం తత్వం**: మౌస్ కదలినదంతా ఎలిమెంట్ కదిలించడం
```mermaid
sequenceDiagram
participant User
participant Mouse
participant JavaScript
participant Plant
User->>Mouse: (100, 50) వద్ద డ్రాగ్ ప్రారంభించండి
Mouse->>JavaScript: pointerdown ఈవెంట్
JavaScript->>JavaScript: ప్రాథమిక స్థానం నిల్వ చేయండి (pos3=100, pos4=50)
JavaScript->>JavaScript: మువ్వు/అప్డేట్ లిసనర్లు సెట్ చేయండి
User->>Mouse: (110, 60) కి కదిలించండి
Mouse->>JavaScript: pointermove ఈవెంట్
JavaScript->>JavaScript: లెక్కించండి: pos1=10, pos2=10
JavaScript->>Plant: అప్డేట్ చేయండి: బలం += 10px, పైకి += 10px
Plant->>Plant: కొత్త స్థానంలో రెండర్ చేయండి
User->>Mouse: (120, 65) వద్ద విడిచి ఉంచండి
Mouse->>JavaScript: pointerup ఈవెంట్
JavaScript->>JavaScript: లిసనర్లు తొలగించండి
JavaScript->>JavaScript: తదుపరి డ్రాగ్ కోసం రీసెట్ చేయండి
```
**కదలిక గణన వివరణ ఇక్కడ ఉంది:**
1. **పరిమాణం** పాత మరియు కొత్త మౌస్ స్థానాల మధ్య తేడా
2. **లెక్కించు** మౌస్ కదలిక ఆధారంగా ఎలిమెంట్ ఎంత కదిలించాలో
3. **నవీకరించు** ఎలిమెంట్ CSS స్థానం ప్రాపర్టీలను రియల్-టైంలో
4. **నిల్వ** కొత్త స్థానాన్ని తదుపరి కదలిక గణనకి ఆధారంగా
### గణిత విజువల్ ప్రదర్శన
```mermaid
sequenceDiagram
participant Mouse
participant JavaScript
participant Plant
Mouse->>JavaScript: (100,50) నుండి (110,60) కు కదులింది
JavaScript->>JavaScript: లెక్కించు: 10 పిక్సెల్స్ కుడి, 10 పిక్సెల్స్ దిగువకు కదిలింది
JavaScript->>Plant: స్థానాన్ని +10 పిక్సెల్స్ కుడి, +10 పిక్సెల్స్ దిగువకు అప్డేట్ చేయండి
Plant->>Plant: కొత్త స్థానంలో రెండర్ చేయండి
```
### stopElementDrag ఫంక్షన్: క్లీనప్
`elementDrag` ముగింపు కర్లీ బ్రాకెట్ తర్వాత క్లీనప్ ఫంక్షన్ చేర్చండి:
```javascript
function stopElementDrag() {
// డాక్యుమెంట్-స్థాయి ఈవెంట్ లిసనర్లను తొలగించండి
document.onpointerup = null;
document.onpointermove = null;
}
```
**క్లీనప్ ఎందుకు అవసరం:**
- **తిరస్కరిస్తుంది** నిలిచిపోయిన ఈవెంట్ లిసనర్ల కారణంగా మెమొరీ లీక్స్
- **ఆగుస్తుంది** యూజర్ ప్లాంట్ విడుదల చేసినప్పుడు డ్రాగింగ్ ప్రవర్తన
- **అనుమతిస్తుంది** ఇతర ఎలిమెంట్లను స్వతంత్రంగా డ్రాగ్ చేయగలిగేందుకు
- **రిసెట్ చేస్తుంది** సిస్టమ్ తదుపరి డ్రాగ్ ఆపరేషన్ కోసం
**క్లీనప్ లేకపోతే ఏమవుతుంది:**
- డ్రాగ్ ఆగిన తరువాత కూడా ఈవెంట్ లిసనర్లు పనిచేస్తూనే ఉంటాయి
- పనితీరు తగ్గుతుంది, అనవసర లిసనర్లు కూడుకుని
- ఇతర ఎలిమెంట్స్‌తో ఇంటరెక్టర్ చేసే సమయాల్లో అనపేక్షిత ప్రవర్తన
- బ్రౌజర్ వనరులు వినా కారణాల కోసం నష్టం
### CSS స్థానం ప్రాపర్టీల అర్థం
మన డ్రాగింగ్ సిస్టమ్ రెండు ముఖ్య CSS ప్రాపర్టీలను మేనేజ్ చేస్తుంది:
| ప్రాపర్టీ | ఇది ఏమి నియంత్రిస్తుంది | మేము ఎలా ఉపయోగిస్తాం |
|----------|------------------------|------------------------|
| `top` | టాప్ ఎడ్జ్ నుండి దూరం | డ్రాగ్ సమయంలో వివరాత్మక నిలయిన క్రమం |
| `left` | ఎడమ ఎడ్జ్ నుండి దూరం | డ్రాగ్ సమయంలో పొడవైన నిలయిన క్రమం |
**offset ప్రాపర్టీల ముఖ్యమైన వివరాలు:**
- **`offsetTop`**: స్థానీకృత పేరెంట్ ఎలిమెంట్ నుండి ప్రస్తుత టాప్ దూరం
- **`offsetLeft`**: స్థానీకృత పేరెంట్ ఎలిమెంట్ నుండి ప్రస్తుత ఎడమ దూరం
- **స్థానీకరణ సੰਦਰభం**: ఈ విలువలు సమీపంగా ఉన్న స్థానీకృత రావద్దులపై ఆధారపడి ఉంటాయి
- **తక్షణ నవీకరణలు**: CSS ప్రాపర్టీలను మార్చిన వెంటనే మార్పులు
> 🎯 **డిజైన్ తత్యం**: ఈ డ్రాగ్ సిస్టమ్ ఉద్దేశపూర్వకంగా సాఫ్ట్ - "డ్రాప్ జోన్లు" లేదా పరిమితులు లేవు. యూజర్లు ప్లాంట్లను ఎక్కడైనా ఉంచవచ్చు, తమ టెరేరియం డిజైన్ పై పూర్తి సృజనాత్మక నియంత్రణతో.
## మొత్తం కలిపి: మీ సంపూర్ణ డ్రాగ్ సిస్టమ్
అభినందనలు! మీరు వానిల్లా జావాస్క్రిప్ట్ ఉపయోగించి నైపుణ్యమైన డ్రాగ్-అండ్-డ్రాప్ సిస్టమ్ ని నిర్మించారు. మీ పూర్తి `dragElement` ఫంక్షన్ ఇప్పుడు మూడు ముఖ్య ఫంక్షన్లు కలిగి ఉంది:
**మీ క్లోశర్ చేస్తే ఏం సాధ్యమవుతుందో:**
- **ప్రత్యేకంగా నిర్వహిస్తుంది** ప్రతి ప్లాంట్ కోసం వ్యక్తిగత ప్రైవేట్ స్థాన వేరియబుల్స్
- **మ్యానేజ్ చేస్తుంది** పూర్తి డ్రాగ్ జీవితచక్రం ప్రారంభం నుండి ముగింపు వరకూ
- **అందిస్తుంది** మొత్తం స్క్రీన్‌పై సాఫ్ట్, ప్రతిస్పందనాత్మక కదలికలు
- **క్లీన్ చేస్తుంది** సమగ్రమైన వనరులను మెమొరీ లీక్స్ నివారణకు
- **సృష్టిస్తుంది** టెరేరియం డిజైన్ కోసం ఆసక్తికరమైన మరియు సృజనాత్మక ఇంటర్‌ఫేస్
### మీ ఇంటరాక్టివ్ టెరేరియాన్ని పరీక్షించడం
ఇప్పుడు మీ ఇంటరాక్టివ్ టెరేరియాని పరీక్షించండి! `index.html` ఫైల్‌ని వెబ్ బ్రౌజర్ లో ఓపెన్ చేసి క్రియాశీలతను పరీక్షించండి:
1. ఏదైనా ప్లాంట్ పై **క్లిక్ చేసి హోల్డ్** చేయండి డ్రాగ్ మొదలుపెట్టు
2. మీ మౌస్ లేదా చేయి **చదిలించండి** మరియు ప్లాంట్ సాఫ్ట్‌గా కదిలి వచ్చేస్తున్నదని చూడండి
3. **ట్యాగ్ విడదీయండి** ప్లాంట్ కొత్త స్థానంలో ఉంచేందుకు
4. విభిన్న **అరేమెంట్లతో ప్రయోగం చేయండి** ఇంటర్‌ఫేస్ అన్వేషణకు
🥇 **అప గ్రేడ్**: మీరు ప్రొఫెషనల్ డెవలపర్స్ రోజువారీ ఉపయోగించే కోర్ కాన్సెప్ట్‌లు ఉపయోగించి పూర్తి ఇంటరాక్టివ్ వెబ్ అప్లికేషన్ సృష్టించారు. ఆ డ్రాగ్-అండ్-డ్రాప్ ఫంక్షనాలిటీ ఫైల్ అప్‌లోడ్లు, కన్బన్ బోర్డ్స్ వంటి అనేక ఇంటరాక్టివ్ ఇంటర్‌ఫేస్‌ల వెనుకlying ప్రఛీన సూత్రం.
### 🔄 **పాఠ్యా పరీక్ష**
**సంపూర్ణ సిస్టమ్ అర్థం చేసుకోవడం**: పూర్తి డ్రాగ్ సిస్టమ్ పట్ల మీ నైపుణ్యాన్ని ధృవీకరించండి:
- ✅ క్లోషల్‌లు ఎలా నిర్వహిస్తాయి ప్రతి ప్లాంట్ కోసం స్వతంత్ర స్థితిని?
- ✅ సాఫ్ట్ కదలిక కోసం కోఆర్డినేట్ గణితం ఎందుకు అవసరం?
- ✅ ఈవెంట్ లిసనర్ల క్లీనప్ మర్చిపోతే ఏమవుతుంది?
- ✅ ఈ ప్యాట్నర్ మరింత క్లిష్టమైన ఇంటరాక్షన్లకు ఎలా స్కేల్ అవుతుంది?
**కోడ్ నాణ్యత పరిశీలన**: మీ పూర్తి పరిష్కారాన్ని సమీక్షించండి:
- **మాడ్యూలర్ డిజైన్**: ప్రతి ప్లాంట్ కి వేరే క్లోశర్ ఉదాహరణ
- **ఈవెంట్ సామర్థ్యం**: లిసనర్ల సరైన సెటప్ మరియు క్లీనప్
- **క్రాస్-డివైస్ సపోర్ట్**: డెస్క్‌టాప్ మరియు మొబైల్ లో పని
- **పర్ఫార్మెన్స్ అవగాహన**: మెమొరీ లీక్స్ లేకుండా మరియు అదనపు లెక్కింపులు లేవు
![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.te.png)
---
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఈ ఏజెంట్ మోడ్ ఉపయోగించి క్రింది ఛాలెంజ్ పూర్తి చేయండి:
**వివరణ:** టెరేరియం ప్రాజెక్ట్స్‌కు రీసెట్ ఫంక్షనాలిటీ జోడించండి, ఇది అన్ని ప్లాంట్లను వారి అసలు స్థానాలకు సాఫ్ట్ అనిమేషన్లతో తిరిగి పంపుతుంది.
**ప్రాంప్ట్:** రీసెట్ బటన్ సృష్టించండి; దీనిని క్లిక్ చేసినప్పుడు, CSS ట్రాన్సిషన్ల ఉపయోగించి అన్ని ప్లాంట్లను వారి అసలు సైడ్‌బార్ స్థానాలకు సాఫ్ట్‌గా 1 సెకనులో మళ్ళీ కదిలించాలి. ఈ ఫంక్షన్ పేజీ లోడ్ అయ్యేప్పుడు అసలు స్థానాలను నిల్వ చెయ్యాలి.
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## 🚀 అదనపు ఛాలెంజ్: మీ నైపుణ్యాలను విస్తరించుకోండి
మీ టెరేరియాన్ని తదుపరి స్థాయికి తీసుకెళ్లడానికి సిద్ధం? ఈ విస్తరణలను అమలు చేయండి:
**సృజనాత్మక విస్తరణలు:**
- ప్లాంట్ పై **డబుల్-క్లిక్** చేస్తే దానిని ముందు (z-index మానిప్యులేషన్) తీసుకు రావడం
- ప్లాంట్లపై హోవర్ చేసినప్పుడు **సూక్ష్మ గ్లో లాంటి విజువల్ ఫీడ్‌బ్యాక్** జోడించడం
- ప్లాంట్లను టెరేరియం వెలుపల **డ్రాగ్ చేయకుండా బౌండరీలు** అమలు చేయడం
- స్థానాలను గుర్తుంచుకునే **సేవ్ ఫంక్షన్** తయారు చేయడం localStorage ఉపయోగించి
- ప్లాంట్లు ఎత్తుకోవడం మరియు ఉంచే సమయంలో **శబ్ద ప్రభావాలు** జోడించడం
> 💡 **లెర్నింగ్ అవకాశం**: ఈ ప్రతిఒక్క ఛాలెంజ్ డిఓఎంవు మానిప్యులేషన్, ఈవెంట్ హ్యాండ్లింగ్, యూజర్ అనుభవ డిజైన్ లో కొత్త అంశాలను నేర్పుతుంది.
## పాఠం తర్వాత క్విజ్
[పాఠం తర్వాత క్విజ్](https://ff-quizzes.netlify.app/web/quiz/20)
## సమీక్ష & స్వయంగా అధ్యయనం: మీ అర్థం గంభీరత
మీరు DOM మానిప్యులేషన్ మరియు క్లోశర్లలో ప్రావీణ్యం పొందారు, కానీ ఇంకా చాలామంది పరిశీలించాల్సిన అంశాలు ఉన్నాయి! మీ జ్ఞానం మరియు నైపుణ్యాలను విస్తరించేందుకు కొన్ని మార్గాలు:
### ప్రత్యామ్నాయ డ్రాగ్ అండ్ డ్రాప్ దృష్టికోణాలు
మాక్స్ ఫ్లెక్సిబిలిటీ కోసం pointer ఈవెంట్లను ఉపయోగించాం, కాని వెబ్ డెవలప్‌మెంట్‌లో అనేక పద్ధతులు ఉన్నాయి:
| పద్ధతి | ఉత్తమం | నేర్చుకునే విలువ |
|----------|----------|------------------|
| [HTML డ్రాగ్ అండ్ డ్రాప్ API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | ఫైల్ అప్‌లోడ్లు, ఆపరేటింగ్ డ్రాగ్ జోన్లు | స్థానిక బ్రౌజర్ సామర్థ్యాలు అర్థం చేసుకోవడం |
| [టచ్ ఈవెంట్స్](https://developer.mozilla.org/docs/Web/API/Touch_events) | మొబైల్ ప్రత్యేక ఇంటరాక్షన్లు | మొబైల్-ఫస్ట్ డెవలప్‌మెంట్ మోడల్స్ |
| CSS `transform` ప్రాపర్టీస్ | సాఫ్ట్ అనిమేషన్లు | పనితీరు ఆప్టిమైజేషన్ సాంకేతికతలు |
### అధునాతన DOM మానిప్యులేషన్ అంశాలు
**మీకోసం తదుపరి అభ్యాసాలు:**
- **ఈవెంట్ డెలిగేషన్**: బహుళ ఎలిమెంట్లకు సమర్ధవంతమైన ఈవెంట్ నిర్వహణ
- **ఇంటర్సెక్షన్ ఆబ్జర్వర్**: ఎలిమెంట్లు వ్యూయిపోర్ట్‌లోకి వచ్చేటప్పుడు లేదా వెళ్లేటప్పుడు గుర్తింపు
- **మ్యూటేషన్ ఆబ్జర్వర్**: DOM నిర్మాణ మార్పులపై పర్యవేక్షణ
- **వెబ్ కాంపొనెంట్లు**: పునర్వినియోగపరచదగిన, ఉక్కు UI ఎలిమెంట్లు సృష్టించడం
- **వర్చువల్ DOM కాన్సెప్ట్స్**: ఫ్రేమ్‌వర్క్‌లు DOM నవీకరణలను ఎలా ఆప్టిమైజ్ చేసుకుంటాయి అర్థం చేసుకోవడం
### కొనసాగుతున్న అభ్యాసం కోసం ముఖ్య వనరులు
**టెక్నికల్ డాక్యుమెంటేషన్:**
- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - పూర్తిగా pointer ఈవెంట్ రెఫరెన్స్
- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - అధికారిక ప్రమాణాల డాక్యుమెంట్
- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - అధునాతన క్లోషర్ నమూనాలు
**బ్రౌజర్ అనుకూలత:**
- [CanIUse.com](https://caniuse.com/) - ఫీచర్ సపోర్ట్ గమనించు బ్రౌజర్ల మధ్య
- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - వివరణాత్మక అనుకూలత సమాచారం
**ప్రాక్టీస్ అవకాశాలు:**
- **పజిల్ గేమ్** ఉద్దరించండి డ్రాగ్ మెకానిక్స్ తో
- **కన్బన్ బోర్డ్** సృష్టించండి డ్రాగ్-అండ్-డ్రాప్ టాస్క్ మేనేజ్మెంట్ తో
- **ఫోటో గ్యాలరీ డిజైన్** డ్రాగ్ చేయగల ఫోటోల అమరికలతో
- **మొబైల్ ఇంటర్‌ఫేస్‌కు టచ్ జెస్టర్స్ పై ప్రయోగం చేయండి**
> 🎯 **అభ్యాస వ్యూహం**: ఈ కాన్సెప్ట్‌లను బలపడించటానికి ఉత్తమ మార్గం ప్రాక్టీస్. డ్రాగ్ చేయగల ఇంటర్‌ఫేస్‌ల వేరియేషన్లను నిర్మించి చూడండి – ప్రతి ప్రాజెక్టు యూజర్ ఇంటరాక్షన్ మరియు DOM మానిప్యులేషన్ గురించి కొత్తను నేర్పుతుంది.
### ⚡ **తర్వాతి 5 నిమిషాల్లో మీరు చేయవచ్చుని**
- [ ] బ్రౌజర్ డెవ్‌టూల్స్ తెరుచుకుని కన్‌సోల్‌లో `document.querySelector('body')` టైప్ చేయండి
- [ ] వెబ్ పేజీ టెక్స్ట్‌ని `innerHTML` లేదా `textContent` ఉపయోగించి మార్చండి
- [ ] ఏదైనా బటన్ లేదా లింక్ పై క్లిక్ ఈవెంట్ లిసనర్ జోడించండి
- [ ] ఎలిమెంట్స్ ప్యానల్ ఉపయోగించి DOM ట్రీ నిర్మాణాన్ని పరిశీలించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగే వంటివి**
- [ ] పాఠం తర్వాత క్విజ్ పూర్తి చేసి DOM మానిప్యులేషన్ కాన్సెప్ట్‌ల సమీక్ష
- [ ] యూజర్ క్లిక్స్‌ಗೆ స్పందించే ఇంటరాక్టివ్ వెబ్‌పేజ్ సృష్టించండి
- [ ] వివిధ ఈవెంట్ రకాలతో (క్లిక్, మౌస్ ఓవర్, కీప్రెస్) ఈవెంట్ హ్యాండ్లింగ్ వ్యాయామం చేయండి
- [ ] సింపుల్ to-do లిస్ట్ లేదా కౌంటర్ నిర్మించండి DOM మానిప్యులేషన్‌తో
- [ ] HTML ఎలిమెంట్లు మరియు జావాస్క్రిప్ట్ ఆబ్జెక్టుల మధ్య సంబంధం తెలుసుకోండి
### 📅 **మీ వారం పాటు జావాస్క్రిప్ట్ ప్రయాణం**
- [ ] డ్రాగ్-అండ్-డ్రాప్ కలిగిన ఇంటరాక్టివ్ టెరేరియం ప్రాజెక్ట్ పూర్తి చేయండి
- [ ] సమర్ధవంతమైన ఈవెంట్ హ్యాండ్లింగ్ కోసం ఈవెంట్ డెలిగేషన్ నేర్చుకోండి
- [ ] ఈవెంట్ లూప్ మరియు అసింక్రనస్ జావాస్క్రిప్ట్ గురించి తెలుసుకోండి
- [ ] ప్రైవేట్ స్థితితో మాడ్యూల్స్ నిర్మించి క్లోశర్లలో ప్రాక్టీస్ చేయండి
- [ ] ఆధునాతన DOM APIs వంటి ఇంటర్సెక్షన్ ఆబ్జర్వర్ అధ్యయనం చేయండి
- [ ] ఫ్రేమ్‌వర్క్స్ లేకుండా ఇంటరాక్టివ్ కంపోనెంట్లను నిర్మించండి
### 🌟 **మీ నెల పొడవు జావాస్క్రిప్ట్ మాస్టరీ**
- [ ] వానిల్లా జావాస్క్రిప్ట్ ఉపయోగించి క్లిష్టమైన సింగిల్ పేజీ అప్లికేషన్ సృష్టించండి
- [ ] ఆధునిక ఫ్రేమ్‌వర్క్ (React, Vue లేదా Angular) నేర్చుకుని వానిల్లా DOM తో పోల్చండి
- [ ] ఓపెన్ సోర్స్ జావాస్క్రిప్ట్ ప్రాజెక్టులకు సహాయం చేయండి
- [ ] వెబ్ కాంపొనెంట్లు, కస్టమ్ ఎలిమెంట్ల వంటి అధునాతన కాన్సెప్ట్స్‌లో మాస్టరీ పొందండి
- [ ] ఉత్తమ DOM నమూనాలతో పనితీరు పూర్వక వెబ్ అప్లికేషన్లు నిర్మించండి
- [ ] ఇతరులకు DOM మానిప్యులేషన్ మరియు జావాస్క్రిప్ట్ ప్రాథమికాలు బోధించండి
## 🎯 మీ జావాస్క్రిప్ట్ DOM మాస్టరీ టైమ్లైన్
```mermaid
timeline
title DOM & జావాస్క్రిప్ట్ నేర్చుకునే పురోగతి
section Foundacion (15 నిమిషాలు)
DOM అర్థం చేసుకోవడం: ఎలిమెంట్ సెలెక్షన్ పద్ధతులు
: చెట్టుప్రమాణ లత సందర్శన
: ప్రాపర్టీ యాక్సెస్ నమూనాలు
section ఈవెంట్ హ్యాండ్లింగ్ (20 నిమిషాలు)
యూజర్ ఇంటరాక్షన్: పాయింటర్ ఈవెంట్ ప్రాథమికాలు
: ఈవెంట్ లిస్నర్ సెటప్
: క్రాస్-డివైస్ అనుకూలత
: ఈవెంట్ ప్రివెన్షన్ సాంకేతికతలు
section క్లోషర్లు (25 నిమిషాలు)
స్కోప్ మేనేజ్‌మెంట్: ప్రైవేట్ వేరియబుల్ సృష్టి
: ఫంక్షన్ పర్సిస్టెన్స్
: స్టేట్ మేనేజ్‌మెంట్ నమూనాలు
: మెమొరీ సామర్థ్యం
section డ్రాగ్ సిస్టమ్ (30 నిమిషాలు)
ఇంటరాక్టివ్ ఫీచర్లు: కోఆర్డినేట్ ట్రాకింగ్
: స్థాన గణన
: గమన గణితం
: క్లీనప్ పద్ధతులు
section అడ్వాన్స్‌డ్ నమూనాలు (45 నిమిషాలు)
ప్రొఫెషనల్ నైపుణ్యాలు: ఈవెంట్ డెలిగేషన్
: పనితీరు ఆప్టిమైజేషన్
: పొరపాటు నిర్వహణ
: యాక్సెసిబిలిటీ పరిగణనలు
section ఫ్రేమ్‌వర్క్ అర్థం చేసుకోవడం (1 వారం)
ఆధునిక అభివృద్ధి: వర్చువల్ DOM కాన్సెప్ట్స్
: స్టేట్ మేనేజ్‌మెంట్ లైబ్రరీలు
: కంపోనెంట్ સ્થાપనాలు
: బిల్డ్ టూల్ ఇంటిగ్రేషన్
section ఎక్స్‌పర్ట్ స్థాయి (1 నెల)
అడ్వాన్స్‌డ్ DOM APIs: ఇంటర్‌సెక్షన్ ఆబ్జర్వర్
: మ్యూటేషన్ ఆబ్జర్వర్
: కస్టమ్ ఎలిమెంట్స్
: వెబ్ కంపోనెంట్స్
```
### 🛠️ మీ జావాస్క్రిప్ట్ టూల్‌కిట్ సమ్మరీ
ఈ పాఠం పూర్తి చేసిన తర్వాత, మీ వద్ద ఉన్నాయి:
- **DOM మాస్టరీ**: ఎలిమెంట్ సెలక్షన్, ప్రాపర్టీ మానిప్యులేషన్ మరియు ట్రీ నావిగేషన్
- **ఈవెంట్ నైపుణ్యం**: క్రాస్-డివైస్ ఇంటరాక్షన్ హ్యాండ్లింగ్ pointer ఈవెంట్లతో
- **క్లోశర్ అర్థం చేసుకోడం**: ప్రైవేట్ స్థితి నిర్వహణ మరియు ఫంక్షన్ విశ్రాంతి
- **ఇంటరాక్టివ్ సిస్టమ్స్**: మొదలు నుండి పూర్తి డ్రాగ్-అండ్-డ్రాప్ అమలును
- **పర్ఫార్మెన్స్ అవగాహన**: సరైన ఈవెంట్ క్లీనప్ మరియు మెమొరీ నిర్వహణ
- **ఆధునిక నమూనాలు**: ప్రొఫెషనల్ డెవలప్‌మెంట్ లో ఉపయోగించబడే కోడ్ ఆర్గనైజేషన్ సాంకేతికతలు
- **యూజర్ అనుభవం**: సులభంగా ఉపయోగించగల, ప్రతిస్పందనాత్మక ఇంటర్‌ఫేస్‌లు సృష్టించడం
**ప్రొఫెషనల్ నైపుణ్యాలు పొందినవి**: మీరు కింది సాంకేతికాలుతో ఫీచర్లు నిర్మించారు:
- **ట్రెల్లో/కన్బన్ బోర్డ్స్**: కాలమ్‌ల మధ్య కార్డ్ డ్రాగింగ్
- **ఫైల్ అప్‌లోడ్ సిస్టమ్స్**: డ్రాగ్-అండ్-డ్రాప్ ఫైల్ హ్యాండ్లింగ్
- **ఇమేజ్ గ్యాలరీస్**: ఫోటో అమరిక ఇంటర్‌ఫేస్‌లు
- **మొబైల్ యాప్స్**: టచ్ ఆధారిత ఇంటరాక్షన్ నమూనాలు
**తదుపరి దశ**: మీరు React, Vue లేదా Angular వంటి ఆధునిక ఫ్రేమ్‌వర్క్‌లను అన్వేషించడానికి సిద్ధంగా ఉన్నారు, ఇవి ఈ ప్రాథమిక DOM మానిప్యులేషన్ కాన్సెప్ట్‌లను అభివృద్ధి చేస్తాయి!
## అసైన్‌మెంట్
[డొమ్‌తో కొంచెం అదనంగా పని చేయండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పృశ్య సూచన**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తూనే ఉన్నప్పటికీ, స్వయంచాలక అనువాదాలలో తప్పులు లేదా అసంపూర్ణతలను కలిగివుండవచ్చు. మూల పత్రాన్ని దాని స్థానిక భాషలో అధికారిక మూలంగా తీసుకోవాలి. ముఖ్యమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదాన్ని సూచిస్తున్నాము. ఈ అనువాదం ఉపయోగంలో కలిగే అర్థాలు తప్పుదోవలకు మా బాధ్యత ఉంది కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

139
translations/te/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
Unescape View File

@ -0,0 +1,139 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
"translation_date": "2026-01-08T19:05:51+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
"language_code": "te"
}
-->
# DOM Element Investigation Assignment
## అవలోకనం
మీరు DOM మానిప్యులేషన్ శక్తిని ప్రత్యక్షంగా అనుభవించిన తర్వాత, ఇప్పుడు DOM ఇంటర్‌ఫేసుల విస్తృత ప్రపంచాన్ని అన్వేషించడానికి సమయం వచ్చింది. ఈ అసైన్‌మెంట్ మీకు డ్రాగ్ చేయడం మాత్రమే కాకుండా వివిధ వెబ్ సాంకేతికతలు DOM తో ఎలా ఇంటరాక్ట్ అవుతాయో మీ అర్థం పెంపొందిస్తుంది.
## నేర్చుకోవలసిన లక్ష్యాలు
ఈ అసైన్‌మెంట్ పూర్తి చేయడం ద్వారా మీరు:
- **శోధించండి** మరియు నిర్దిష్ట DOM ఇంటర్‌ఫేసును లోతుగా అర్థం చేసుకోండి
- **విశ్లేషించండి** DOM మానిప్యులేషన్ యొక్క వాస్తవ ప్రపంచ అమలు విధానాలను
- **జోడించండి** సిద్ధాంత పరమైన సిద్ధాంతాలను ప్రాథమిక ఉపయోగాలతో
- **అభివృద్ధి చేయండి** సాంకేతిక డాక్యుమెంటేషన్ మరియు విశ్లేషణలో నైపుణ్యాలు
## సూచనలు
### దశ 1: మీ DOM ఇంటర్‌ఫేసును ఎంచుకోండి
MDN యొక్క విస్తృత [DOM ఇంటర్‌ఫేసుల జాబితా](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) సందర్శించి మీరు ఆసక్తి ఉన్న ఒక ఇంటర్‌ఫేసును ఎంచుకోండి. వైవిధ్యానికి ఈ వర్గాల్లోంచి ఎంచుకోవడం పరిశీలించండి:
**ఆరంభ స్నేహపూర్వక ఎంపికలు:**
- `Element.classList` - డైనమిక్ గా CSS తరగతులు నిర్వహించడం
- `Document.querySelector()` - అధునాతన ఎలిమెంట్ ఎంపిక
- `Element.addEventListener()` - పాయింటర్ ఈవెంట్లకు మించి ఈవెంట్ నిర్వహణ
- `Window.localStorage` - క్లయింట్-సైడ్ డేటా నిల్వ
**మధ్యస్థ సవాళ్లు:**
- `Intersection Observer API` - ఎలిమెంట్ దృశ్యమానత గుర్తింపు
- `MutationObserver` - DOM మార్పులను పరిశీలించడం
- `Drag and Drop API` - మా పాయింటర్ ఆధారిత విధానం కి ప్రత్యామ్నాయం
- `Geolocation API` - వాడుకరి స్థానం పొందుట
**ఉన్నత అన్వేషణ:**
- `Web Components` - కస్టమ్ ఎలిమెంట్లు మరియు శాడో.DOM
- `Canvas API` - ప్రోగ్రామేటిక్ గ్రాఫిక్స్
- `Web Workers` - బ్యాక్‌గ్రౌండ్ ప్రాసెసింగ్
- `Service Workers` - ఆఫ్‌లైన్ ఫంక్షనాలిటీ
### దశ 2: పరిశోధన మరియు డాక్యుమెంటేషన్ చేయండి
క్రింద పేర్కొన్న అంశాలు కలిగిన సమగ్ర విశ్లేషణ (300-500 పదాలు) రూపొందించండి:
#### సాంకేతిక అవలోకనం
- **మీ ఆలోచించిన ఇంటర్‌ఫేసు ఏమి చేస్తుంది అనే విషయం** సుస్పష్టం, ఆరంభ దశలో ఉన్నవారికి అనుకూలమైన భాషలో నిర్వచించండి
- **కీలక పద్ధతులు, లక్షణాలు లేదా ఈవెంట్లను** వివరించండి
- **అది పరిష్కరించేటటువంటి సమస్యల వర్గాలను** స్వళ్ళించండి
#### వాస్తవ ప్రపంచ అమలు
- **మీరు ఎంచుకున్న ఇంటర్‌ఫేసును ఉపయోగించే ఏదైనా వెబ్‌సైట్‌ను కనుగొనండి** (కోడును పరిశీలించండి లేదా ఉదాహరణలు శోధించండి)
- **కనం ఉంటే విశేష అమలును కోడ్ స్నిపెట్టులతో డాక్యుమెంట్ చేయండి**
- **డెవలపర్లు ఈ విధానాన్ని ఎందుకు ఎంచుకున్నారో విశ్లేషించండి**
- **ఇది యూజర్ అనుభవాన్ని ఎలా మెరుగుపరుస్తుందో వివరిం‌చండి**
#### ప్రాయోగిక అప్లికేషన్
- **మీ ఇంటర్‌ఫేసును terrarium ప్రాజెక్టులో వాడిన సాంకేతికతలతో పోల్చండి**
- **మీ ఇంటర్‌ఫేసు terrarium కార్యాచరణను ఎలా మెరుగుపరచవచ్చో సూచించండి**
- **ఇది ఇతర ప్రాజెక్టులలో బాగా ఉపయోగపడే ప్రదేశాలను గుర్తించండి**
### దశ 3: కోడ్ ఉదాహరణ
మీ ఇంటర్‌ఫేసును ప్రదర్శించే సరళమైన, పనిచేసే కోడ్ ఉదాహరణను చేర్చండి. ఇది:
- **చర్యాత్మకంగా పని చేయాలి** - వాస్తవ పరీక్షలో పనిచేయాలి
- **వ్యాఖ్యలతో ఉండాలి** - ప్రతి భాగం ఏమి చేస్తుందో వివరించాలి
- **సంబంధితంగా ఉండాలి** - వాస్తవ పనితీరు సందర్భంతో
- **ఆరంభ దశలో ఉన్నవారికి అనుకూలంగా ఉండాలి**
## సమర్పణ ఫార్మాట్
మీ సమర్పణ స్పష్టమైన శీర్షికలతో నిర్మించండి:
```markdown
# [Interface Name] DOM Investigation
## What It Does
[Technical overview]
## Real-World Example
[Website analysis and implementation details]
## Code Demonstration
[Your working example with comments]
## Reflection
[How this connects to our terrarium project and future applications]
```
## మూల్యాంకన మ్యాట్రిక్స్
| ప్రమాణాలు | ఉత్తమ(A) | నిపుణత కలిగిన (B) | అభివృద్ధి చెందుతున్న (C) | మెరుగుదల అవసరం (D) |
|----------|---------------|----------------|----------------|----------------------|
| **సాంకేతిక అర్థం** | సరైన వివరణలు మరియు సక్రమ పదజాలంతో లోతైన అర్థం కనబరుస్తుంది | ఎక్కువ భాగం సరైన వివరణలతో బలమైన అర్థం చూపిస్తుంది | కొన్ని తప్పిదాలు ఉన్న ప్రాథమిక అర్థం | గణనీయమైన లోపాలతో పరిమిత అర్థం |
| **వాస్తవ ప్రపంచ విశ్లేషణ** | నిర్దిష్ట ఉదాహరణలతో నిజమైన అమలును గుర్తించి, లోతుగా విశ్లేషిస్తుంది | తగిన విశ్లేషణతో నిజమైన ఉదాహరణను కనుగొంటుంది | ఉదాహరణను కనుగొంటుంది కానీ విశ్లేషణ లోతు కొరత | అస్పష్ట లేదా తప్పుల చేసిన వాస్తవ అనుబంధం |
| **కోడ్ ఉదాహరణ** | పని చేసే, బాగా వ్యాఖ్యానించిన కోడ్ ఇంటర్‌ఫేసును స్పష్టంగా చూపిస్తుంది | సరైన వ్యాఖ్యలతో పని చేసే కోడ్ | కోడ్ పని చేస్తుంది కానీ డాక్యుమెంటేషన్ మెరుగవ్వాలి | కోడులో తప్పులున్నది లేదా విపరీత వివరణ |
| **రాయడంలో నాణ్యత** | స్పష్టమైన, ఆకర్షణీయమైన రాయడం, సక్రమ నిర్మాణంతో | సక్రమంగా కాంటెంట్ వస్తుంది మరియు సాంకేతిక రాయడంలో బాగా ఉంటది | తగిన క్రమపద్ధతిలో ఉంది మరియు స్పష్టత | సరిగా క్రమం లేకపోవడం లేదా అపార్థమైన సంభాషణ |
| **తీలకాత్మక ఆలోచన** | సిద్ధాంతాల మధ్య లోతైన సంబంధాలు కనబరుచుకుని, సృజనాత్మక ఉపయోగాలను సూచిస్తుంది | మంచి విశ్లేషణాత్మక ఆలోచన మరియు సంబంధాలను చూపిస్తుంది | కొంత విశ్లేషణ ఉంది కానీ లోతు లేకపోవచ్చు | తేలికపాటి తేలికగా తీలకాత్మక ఆలోచన |
## విజయానికి సూచనలు
**శోధనా వ్యూహాలు:**
- **MDN డాక్యుమెంటేషన్** తో అధికారిక సమాచారం ప్రారంభించండి
- **GitHub లేదా CodePen లో కోడ్ ఉదాహరణలు** చూడండి
- **బ్రౌజర్ డెవలపర్ టూల్స్‌తో ప్రాచుర్యం చెందిన वेबसाइटలు పరిశీలించండి**
- **విజువల్ వివరణలకు ట్యుటోరియల్ వీడియోలు చూడండి**
**రాయడం గైడ్‌లైన్స్:**
- **మీ సొంత మాటల్లో రాయండి, కాపీ చేయవద్దు**
- **నిర్దిష్ట ఉదాహరణలు మరియు కోడ్ స్నిపెట్టులను చేర్చండి**
- **సాంకేతికக் కాన్సెప్ట్‌లను స్నేహితుడికి నేర్పినట్లు వివరించండి**
- **మీ ఇంటర్‌ఫేసును వెబ్ అభివృద్ధి పెద్ద భావాలతో కలపండి**
**కోడ్ ఉదాహరణ ఆలోచనలు:**
- **ఇంటర్‌ఫేసు ప్రధాన లక్షణాలను ప్రదర్శించే సరళమైన డెమో సృష్టించండి**
- **terrarium ప్రాజెక్టు భావాలను అనుసరించి నిర్మాణం చేయండి**
- **దృశ్య నమూనా కంటే ఫంక్షనాలిటీపై దృష్టి పెట్టండి**
- **మీ కోడ్ సరైన పని చేస్తుందా పరీక్షించండి**
## సమర్పణ గడువు తేదీ
[ఇక్కడ గడువు తేదీ పెట్టండి]
## ప్రశ్నలున్నాయా?
ఈ అసైన్‌మెంట్ సంబంధించిన ఏ అంశంపై స్పష్టత కావాలంటే, సంకోచించకుండా అడగండి! ఈ విచారణDOM ద్వారా మద్దతు పొందే క్రియాశీల వెబ్ అనుభవాలను మీరు ప్రతి రోజు ఎలా వాడుతున్నారో లోతుగా అర్థం చేసుకునే అవకాశం ఇస్తుంది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించినది. మేము సరిగా ఉండడానికి ప్రయత్నిస్తామని, అయినప్పటికీ ఆటోమేటెడ్ అనువాదాలలో పొరపాట్లు లేదా అప్రమాణాలు ఉండవచ్చు అని జాగ్రత్తగా గమనించండి. దయచేసి అసలు డాక్యుమెంట్ దాని స్థానిక భాషలో ఉన్నది అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం వాడకం వల్ల ఏదైనా అవగాహన లోపాలు లేదా తప్పు అర్థం చేసుకోవడంపై మేము బాధ్యులు కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

30
translations/te/3-terrarium/README.md
Unescape View File

@ -0,0 +1,30 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
"translation_date": "2026-01-08T11:36:30+00:00",
"source_file": "3-terrarium/README.md",
"language_code": "te"
}
-->
## మీ టెర్రేరియం‌ను మోపండి
మీరు **Azure Static Web Apps** ఉపయోగించి మీ టెర్రేరియాన్ని వెబ్ పై మోపవచ్చు లేదా ప్రచురించవచ్చు.
1. ఈ రిపోను fork చెయ్యండి
2. ఈ బటన్‌ను నొక్కండి 👇
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
3. మీ యాప్‌ని సృష్టించడానికి సెటప్ విజార్డ్‌ను అనుసరించండి.
- **App root** ను `/solution` లేదా మీ కోడ్‌బేస్ రూట్‌గా సెట్ చేయండి.
- ఈ యాప్‌లో API లేదు, కాబట్టి API కాన్ఫిగరేషన్‌ను సోకించవద్దు.
- Azure Static Web Apps మీ యాప్‌ను బిల్డ్ చేసి ప్రచురించడానికి సహాయపడుతుంది, అందుకోసం `.github` ఫోల్డరు ఆటోమేటిగ్గా సృష్టించబడుతుంది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**వ్యాఖ్య**:
ఈ డాక్యుమెంట్ [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవను ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటికీ, స్వయంచాలకంగా చేసిన అనువాదాలలో పొరపాట్లు లేదా తప్పులు ఉండొచ్చు. స్థానిక భాషలో ఉన్న మౌలిక డాక్యుమెంట్ ని అధికారిక మూల్యాధారం గా పరిగణించాలి. కీలక సమాచారం కోసం, నిపుణుల చేత చేసిన మానవ అనువాదం అవసరం. ఈ అనువాదాన్ని ఉపయోగించడంవల్ల ఏర్పడే ఏవైన అయోమయాలు లేదా తప్పుగా అర్థమగొనడంపై మేం బాధ్యత లేకపోదాము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

41
translations/te/3-terrarium/solution/README.md
Unescape View File

@ -0,0 +1,41 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "6329fbe8bd936068debd78cca6f09c0a",
"translation_date": "2026-01-08T19:09:33+00:00",
"source_file": "3-terrarium/solution/README.md",
"language_code": "te"
}
-->
# నా టెరారియం: జావాస్క్రిప్ట్ ఉపయోగించి HTML, CSS మరియు DOM మానిప్యులేషన్ గురించి నేర్చుకోవడానికి ఒక ప్రాజెక్టు 🌵🌱
స్వల్పమైన డ్రాగ్ అండ్ డ్రాప్ కోడ్-మెడిటేషన్. కొద్దిగా HTML, JS మరియు CSS తో, మీరు ఒక వబ్ ఇంటర్‌ఫేస్‌ని తయారుచేయవచ్చు, దాన్ని శోభాయమానంగా మార్చవచ్చు మరియు ఒక ఇంటరాక్షన్ చేర్చవచ్చు.
![my terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.te.png)
## క్రెడిట్స్
♥️ గల రచన [Jen Looper](https://www.twitter.com/jenlooper) ద్వారా
CSS ద్వారా సృష్టించబడిన టెరారియం, Jakub Mandra యొక్క గ్లాస్ జార్ [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) నుండి ప్రేరితమైంది.
కళాకృతి Procreate ఉపయోగించి [Jen Looper](http://jenlooper.com) చేత చేతుల మీదుగా వేసింది.
## మీ టెరారియం ను డిప్లాయ్ చేయండి
మీరు Azure Static Web Apps ను ఉపయోగించి మీ టెరారియం ను వెబ్‌లో డిప్లాయ్ చేయవచ్చు లేదా ప్రచురించవచ్చు.
1. ఈ రిపోను fork చేయండి
2. ఈ బటన్ నొక్కండి
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. మీ యాప్‌ని సృష్టిస్తూ విజార్డ్ ద్వారా నడవండి. యాప్ రూట్ గా `/solution` లేదా మీ కోడ్‌బేస్ రూట్‌ని మీరు సెట్ చేశారంటే బాగుంటుంది. ఈ యాప్‌లో ఏ API లేదు కాబట్టి దానిని జోడించుకోవద్దు. మీ fork చేసిన repo లో .github ఫోల్డర్ సృష్టించబడుతుంది, ఇది Azure Static Web Apps యొక్క బిల్డ్ సర్వీస్‌కు మీ యాప్‌ను నిర్మించి కొత్త URL వద్ద ప్రచురించడానికి సహాయపడుతుంది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**విడుదల నోటీసు**:
ఈ పత్రాన్ని AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించాము. మేము ఖచ్చితత్వానికి కొంత శ్రద్ధ పెట్టినా, స్వయంచాలక అనువాదాల్లో తప్పులు లేదా అసమర్ధతలు ఉండవచ్చని దయచేసి గమనించండి. స్థానిక భాషలో ఉన్న ఒరిజినల్ పత్రాన్ని అధికారిక మూలంగా పరిగణించాలి. అత్యవసర సమాచారానికి, వృత్తిపరమైన మానవ అనువాదాన్ని సూచిస్తాము. ఈ అనువాదం వలన కలిగే ఎటువంటి అపార్థాలు లేదా భ్రమలకైనా మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

290
translations/te/4-typing-game/README.md
Unescape View File

@ -0,0 +1,290 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
"translation_date": "2026-01-08T11:32:03+00:00",
"source_file": "4-typing-game/README.md",
"language_code": "te"
}
-->
# ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్ - ఒక టైపింగ్ గేమ్ తయారు చేయండి
```mermaid
journey
title మీ టైపింగ్ గేమ్ అభివృద్ధి ప్రయాణం
section మౌలికం
గేమ్ నిర్మాణం ప్రణాళిక: 3: Student
వినియోగదారుడు ఇంటర్‌ఫేస్ డిజైన్ చేయండి: 4: Student
HTML అంశాలను సెటప్ చేయండి: 4: Student
section ఫంక్షనాలిటీ
వినియోగదారు ఇన్‌పుట్ నిర్వహించండి: 4: Student
సమయాన్ని ట్రాక్ చేయండి: 5: Student
ఖచ్చితత్వాన్ని లెక్కించండి: 5: Student
section లక్షణాలు
విజువల్ ఫీడ్బ్యాక్ జోడించండి: 5: Student
గేమ్ లాజిక్ అమలు చేయండి: 5: Student
అనుభవాన్ని మెరుగుపరచండి: 5: Student
```
## పరిచయం
ప్రతి డెవలపర్ తెలుసుకున్న కానీ అరుదుగా మాట్లాడే విషయం ఇదే: వేగంగా టైప్ చేయటం ఒక సూపర్ పవర్! 🚀 దీ్ని గురించి ఆలోచించండి - మీరు మీ ఆలోచనలను మెదడుండి మీ కోడ్ ఎడిటర్ వరకు ఎంత వేగంగా తేవగలరో, అంతే మీ సృజనాత్మకత ఎక్కువగా ప్రవహిస్తుంది. ఇది మీ ఆలోచనలు మరియు స్క్రీన్ మధ్య ప్రత్యక్ష పైప్లైన్ లాగా ఉంటుంది.
```mermaid
pie title గేమ్ ఫీచర్లు
"సమయానుకూల అభిప్రాయం" : 25
"ప్రదర్శన ట్రాకింగ్" : 20
"ఇంటరాక్టివ్ UI" : 20
"టైమర్ సిస్టమ్" : 15
"కొటేషన్ నిర్వహణ" : 10
"ఫలితాల ప్రదర్శన" : 10
```
ఈ నైపుణ్యాన్ని మెరుగుపర్చడానికి ఉత్తమ మార్గాల్లో ఒకటి తెలుసుకోవాలా? మీరు ఊహించినట్టు - మనం ఒక గేమ్ తయారుచేయబోతున్నాము!
```mermaid
flowchart LR
A[ప్లేయర్ ఆట మొదలుపెట్టి] --> B[యాదృచ్ఛిక اقتباس ప్రదర్శించబడింది]
B --> C[ప్లేయర్ అక్షరాలు టైప్ చేస్తాడు]
C --> D{అక్షరం సరియైనదా?}
D -->|అవును| E[పచ్చటి హైలైట్]
D -->|కాదు| F[ఆవిరి హైలైట్]
E --> G[ఖచ్చితత్వాన్ని నవీకరించు]
F --> G
G --> H{اقتбاس పూర్తి కాలేదా?}
H -->|కాదు| C
H -->|అవును| I[వర్డ్ పర్ మినిట్ లెక్కించు]
I --> J[ఫలితాలను ప్రదర్శించు]
J --> K[మళ్ళీ ఆడు?]
K -->|అవును| B
K -->|కాదు| L[గేమ్ ముగిసింది]
style A fill:#e1f5fe
style D fill:#fff3e0
style E fill:#e8f5e8
style F fill:#ffebee
style I fill:#f3e5f5
```
> మనం కలిసి ఒక అద్భుతమైన టైపింగ్ గేమ్ సృష్టしましょう!
మీరు నేర్చుకుంటున్న JavaScript, HTML, మరియు CSS నైపుణ్యాలను ఉపయోగించడానికి సిద్ధంగా ఉన్నారా? మనం టైపింగ్ గేమ్ బిల్డ్ చేయబోతున్నాము, ఇది పුරాతన డిటెక్టివ్ [షెర్లాక్ హోమ్స్](https://en.wikipedia.org/wiki/Sherlock_Holmes) నుండి యాదృచ్ఛిక కోట్ లతో మీని సవాలు చేస్తుంది. ఈ గేమ్ మీరు ఎంత వేగంగా మరియు ఖచ్చితత్వంతో టైప్ చేయగలరో ట్రాక్ చేస్తుంది -そして నమ్మండి, ఇది మీరు అనుకున్నదానికంటే ఎక్కువ అలవాటు చేయనిది!
```mermaid
mindmap
root((টাইপিং গేమ్ উন্নয়ন))
User Interface
Input Elements
Visual Feedback
Responsive Design
Accessibility
Game Logic
Quote Selection
Timer Management
Accuracy Tracking
Score Calculation
Event Handling
Keyboard Input
Button Clicks
Real-time Updates
Game State Changes
Performance Metrics
Words Per Minute
Character Accuracy
Error Tracking
Progress Display
User Experience
Immediate Feedback
Clear Instructions
Engaging Content
Achievement System
```
![డెమో](../../../4-typing-game/images/demo.gif)
## మీరు తెలుసుకోవలసిందు ఏమిటి
```mermaid
flowchart TD
A[యూజర్ చర్య] --> B{ఈవెంట్ రకం?}
B -->|సెలక్ట్ నొక్కడం| C[కీలిపడ事件]
B -->|బటన్ క్లిక్| D[మౌస్ ఈవెంట్]
B -->|టైమర్| E[సమయం ఈవెంట్]
C --> F[అక్షరం తనిఖీ చేయండి]
D --> G[గేమ్ ప్రారంభం/రీసెట్]
E --> H[టైమర్ అప్డేటు]
F --> I{సరిచేయాలా?}
I -->|అవును| J[గ్రీన్ హైలైట్]
I -->|కాదు| K[రెడ్ హైలైట్]
J --> L[స్కోర్ అప్డేటు]
K --> L
L --> M[గేమ్ స్థితి తనిఖీ]
G --> N[కొత్త కోట్ తయారు చేయండి]
H --> O[సమయం ప్రదర్శన]
M --> P{గేమ్ పూర్తయిందా?}
P -->|అవును| Q[ఫలితాలు చూపించు]
P -->|కాదు| R[గేమ్ కొనసాగించు]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#fff3e0
style Q fill:#f3e5f5
```
మనం లోతుగా వెళ్లేముందు, మీరు ఈ ఆలోచనలతో సౌకర్యంగా ఉన్నారని నిర్ధారించుకోండి (తక్షణ హవా అవసరం అయితే భయపడకండి - మనందరం అలానే ఉన్నాము!):
- టెక్స్ట్ ఇన్పుట్ మరియు బటన్ నియంత్రణలను సృష్టించడం
- CSS మరియు తరగతుల ద్వారా శైలులను సెట్ చేయడం
- JavaScript ప్రారంభాలు
- అర్రే సృష్టించడం
- యాదృచ్ఛిక సంఖ్యను సృష్టించడం
- ప్రస్తుత సమయాన్ని పొందడం
ఇవి ఏదైనా కొంచెం మాత్రం నన్నయినట్లయితే, అది బాగానే ఉంది! కొన్ని సార్లు మీ జ్ఞానాన్ని బలపర్చడానికి ఉత్తమ మార్గం ప్రాజెక్టులో చొరబడడం మరియు దారిలో తెలుసుకోవడం.
### 🔄 **పాఠశాలాత్మక తనిఖీ**
**ఆధార మూల్యాంకనం**: అభివృద్ధి ప్రారంభించే ముందు, మీరు ఈ విషయాలను అర్థం చేసుకోవాలి:
- ✅ HTML ఫారమ్స్ మరియు ఇన్పుట్ ఎలిమెంట్లు ఎలా పనిచేస్తాయో
- ✅ CSS తరగతులు మరియు డైనమిక్ స్టైలింగ్
- ✅ JavaScript ఈవెంట్ లిసనర్లు మరియు హ్యాండ్లర్స్
- ✅ అర్రే మానిప్యులేషన్ మరియు యాదృచ్ఛిక ఎంపిక
- ✅ సమయ కొలత మరియు లెక్కలు
**త్వరిత స్వీయ పరీక్ష**: ఈ ఆలోచనలు ఇంటరాక్టివ్ గేమ్ లో ఎలా పనిచేస్తాయో మీరు వివరిస్తుందా?
- **ఈవెంట్లు** వినియోగదారులు ఎలిమెంట్లతో ఇంటరాక్ట్ చేసినప్పుడు ప్రారంభమవుతాయి
- **హ్యాండ్లర్స్** ఆ ఈవెంట్లను ప్రాసెస్ చేసి గేమ్ స్థితిని నవీకరిస్తాయి
- **CSS** వినియోగదారుల చర్యలకు విజువల్ ఫీడ్బ్యాక్ ఇస్తుంది
- **టైమింగ్** పనితీరు కొలత మరియు గేమ్ ప్రగతికి అనుమతిస్తుంది
```mermaid
quadrantChart
title టైపింగ్ గేమ్ నైపుణ్యాల అభివృద్ధి
x-axis ప్రారంభకుడు --> నిపుణుడు
y-axis స్థిరమైనది --> పరస్పర క్రియాత్మక
quadrant-1 సున్నిత గేమ్స్
quadrant-2 రియల్-టైమ్ యాప్స్
quadrant-3 ప్రాథమిక పేజీలు
quadrant-4 పరస్పర సైట్లు
HTML ఫారమ్స్: [0.3, 0.2]
CSS స్టైలింగ్: [0.4, 0.3]
ఈవెంట్ హ్యాండ్లింగ్: [0.7, 0.8]
గేమ్ లాజిక్: [0.8, 0.9]
పనితీరు ట్రాకింగ్: [0.9, 0.7]
```
## మనం ఈ విషయం సృష్టిద్దాం!
[ఈవెంట్ డ్రివెన్ ప్రోగ్రామింగ్ ఉపయోగించి టైపింగ్ గేమ్ సృష్టించడం](./typing-game/README.md)
### ⚡ **తరువాతి 5 నిమిషాల్లో మీరు చేయగలిగేది**
- [ ] మీ బ్రౌజర్ కన్సోల్ తెరిచి, `addEventListener` తో కీబోర్డ్ ఈవెంట్లను వినడం ప్రయత్నించండి
- [ ] ఒక సాదా HTML పేజీ సృష్టించి, ఇన్పుట్ ఫీల్డ్ తో టైపింగ్ గుర్తింపును పరీక్షించండి
- [ ] టైప్ చేసిన టెక్స్ట్ ను లక్ష్య టెక్స్ట్ తో పోల్చి స్ట్రింగ్ మానిప్యులేషన్ పరిపర్యవేక్షణ
- [ ] టైమింగ్ ఫంక్షన్లను అర్థం చేసుకోవడానికి `setTimeout` తో ప్రయోగించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పాఠం తరువాత చేసుకునే క్విజ్ పూర్తి చేసి ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్ అర్థం చేసుకోవడం
- [ ] పద ధ్రువీకరణతో టైపింగ్ గేమ్ యొక్క ప్రాథమిక వెర్షన్ నిర్మాణం
- [ ] సరైన మరియు తప్పు టైపింగ్ కోసం విజువల్ ఫీడ్బ్యాక్ జోడించడం
- [ ] వేగం మరియు ఖచ్చితత్వం ఆధారంగా సాధారణ స్కోరింగ్ వ్యవస్థ అమలు
- [ ] మీ గేమ్ దృష్టిని ఆకర్షించేలా CSS తో స్టైలింగ్
### 📅 **మీ వారాంతపు గేమ్ అభివృద్ధి**
- [ ] అన్ని ఫీచర్లతో పూర్తి టైపింగ్ గేమ్ తయారు చేయడం మరియు మెరుగుదల
- [ ] వేరు వేరు పద క్లిష్టతలతో కష్టం స్థాయిలను జోడించడం
- [ ] వినియోగదారుల గణాంకాలు ట్రాకింగ్ (WPM, సమయం తో ఖచ్చితత్వం)
- [ ] మెరుగైన వినియోగదారుల అనుభవం కోసం శబ్ద эффекты మరియు అనిమేషన్స్ సృష్టించడం
- [ ] మీ గేమ్ ను మొబైల్-ప్రతిస్పందకంగా చేసుకోవడం
- [ ] ఆన్‌లైన్‌లో మీ గేమ్‌ను పంచుకోవడం మరియు వినియోగదారుల స్పందన సేకరించడం
### 🌟 **మీ నెల పాటు ఇంటరాక్టివ్ అభివృద్ధి**
- [ ] వేరు వేరు ఇంటరాక్షన్ నమూనాలు ఇన్వెస్టిగేట్ చేసే మల్టిపుల్ గేమ్స్ సృష్టించడం
- [ ] గేమ్ లూప్లు, స్థితి నిర్వహణ, పనితీరు మెరుగుదల గురించి నేర్చుకోవడం
- [ ] ఓపెన్ సార్స్ గేమ్ అభివృద్ధి ప్రాజెక్టులకు సహకారం
- [ ] ప్రగతిషీల టైమింగ్ కాన్సెప్ట్స్ మరియు సజీవ అనిమేషన్లలో నైపుణ్యం పొందడం
- [ ] వివిధ ఇంటరాక్టివ్ అప్లికేషన్లను ప్రదర్శించే పోర్ట్‌ఫోలియో సృష్టించడం
- [ ] గేమ్ అభివృద్ధి మరియు వినియోగదారు ఇంటరాక్షన్ లో ఆసక్తి ఉన్నవారికి మెంటార్‌గా ఉండడం
## 🎯 మీ టైపింగ్ గేమ్ మాస్టరీ టైమ్‌లైన్
```mermaid
timeline
title గేమ్ డెవలప్‌మెంట్ నేర్చుకొనే ప్రగతిచి
section సెటప్ (10 నిమిషాలు)
ప్రాజెక్ట్ రचना: HTML మౌళికం
: CSS స్టైలింగ్ సెటప్
: JavaScript ఫైల్ సృష్టి
section యూజర్ ఇంటర్ఫేస్ (20 నిమిషాలు)
ఇంటరాక్టివ్ ఎలిమెంట్స్: ఇన్‌పుట్ ఫీల్డ్స్
: బటన్ నియంత్రణలు
: ప్రదర్శన ప్రాంతాలు
: స్పందనాత్మక లేఅవుట్
section ఈవెంట్ హ్యాండ్లింగ్ (25 నిమిషాలు)
యూజర్ ఇంటరాక్షన్: కీబోర్డ్ ఈవెంట్స్
: మౌస్ ఈవెంట్స్
: తక్షణ స్పందన
: స్థితి నిర్వహణ
section గేమ్ లాజిక్ (30 నిమిషాలు)
మూల కార్యాచరణ: కోట్ సృష్టి
: క్యారెక్టర్ సరిపోల్చడం
: ఖచ్చితత్వ లెక్కింపు
: టైమర్ అమలు
section పనితీరు ట్రాకింగ్ (35 నిమిషాలు)
ప్రమాణాలు & విశ్లేషణలు: WPM లెక్కింపు
: లోపాలని ట్రాక్ చేయడం
: ప్రగతి విజువలైజేషన్
: ఫలితాల ప్రదర్శన
section పాలిష్ & మెరుగుదల (45 నిమిషాలు)
యూజర్ అనుభవం: దృశ్య స్పందన
: శబ్ద ప్రభావాలు
: కార్యక్రమాలు
: ప్రాప్తి సౌకర్యాలు
section అభివృద్ధి గల ఫీచర్లు (1 వారంలో)
విస్తృత కార్యాచరణ: కష్టస్థాయిలు
: లీడర్‌బోర్డ్స్
: వ్యక్తిగత కోట్స్
: బహు-ప","\play\options
section ప్రొఫెషనల్ నైపుణ్యాలు (1 నెల)
గేమ్ డెవలప్‌మెంట్: పనితీరు ఆప్టిమైజేషన్
: కోడ్ వాస్తుశిల్పం
: పరీక్షా వ్యూహాలు
: మెయిన్ అమలు నమూనాలు
```
### 🛠️ మీ గేమ్ అభివృద్ధి టూల్‌కిట్ సంగ్రహం
ఈ ప్రాజెక్ట్ పూర్తి చేసిన తర్వాత, మీరు నేర్చుకుంటారు:
- **ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్**: ఇన్‌పుట్‌కు ప్రతిస్పందించే యూజర్ ఇంటర్‌ఫేస్‌లు
- **రీయల్-టైమ్ ఫీడ్బ్యాక్**: తక్షణ విజువల్ మరియు పనితీరు అప్‌డేట్స్
- **పనితీరు కొలత**: ఖచ్చితమైన టైమింగ్ మరియు స్కోరింగ్ సిస్టమ్‌లు
- **గేమ్ స్థితి నిర్వహణ**: అనువర్తన ప్రవాహం మరియు వినియోగదారుల అనుభవం నియంత్రణ
- **ఇంటరాక్టివ్ డిజైన్**: ఆకట్టుకునే, అలవాటు పెడిచే వినియోగదారు అనుభవాల సృష్టి
- **ఆధునిక వెబ్ APIలు**: బ్రౌజర్ సామర్థ్యాలు వాడుకొని సమృద్ధి గల ఇంటరాక్షన్స్
- **ప్రాప్తి నమూనాలు**: అన్ని వినియోగదారుల కోసం సమానమైన డిజైన్
**వాస్తవ ప్రపంచ అనువర్తనాలు**: ఈ నైపుణ్యాలు ప్రత్యక్షంగా వర్తిస్తాయి:
- **వెబ్ అనువర్తనాలు**: ఏదైనా ఇంటరాక్టివ్ ఇంటర్‌ఫేస్ లేదా డాష్‌బోర్డు
- **విద్యా సాఫ్ట్‌ వేర్**: నేర్చుకునే వేదికలు మరియు నైపుణ్య మూల్యాంకన టూల్‌లు
- **ఉత్పాదకత టూల్‌లు**: టెక్ట్స్ ఎడిటర్లు, IDEలు మరియు సహకార సాఫ్ట్‌వేర్
- **గేమింగ్ పరిశ్రమ**: బ్రౌజర్ గేమ్స్ మరియు ఇంటరాక్టివ్ వినోదం
- **మొబైల్ అభివృద్ధి**: టచ్-ఆధారిత ఇంటర్‌ఫేస్‌లు మరియు ఇశారాలు నిర్వహణ
**తరువాతి స్థాయి**: మీరు అధునాతన గేమ్ ఫ్రేమ్‌వర్క్స్, రియల్-టైమ్ మల్టీ ప్లేయర్ సిస్టమ్స్, లేదా సంక్లిష్ట ఇంటరాక్టివ్ అప్లికేషన్లను అన్వేషించడానికి సిద్ధంగా ఉన్నారు!
## క్రెడిట్స్
♥️ తో రచించారు [Christopher Harrison](http://www.twitter.com/geektrainer)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టం**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించడం జరిగింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాల్లో తప్పులు లేదా అసమర్థతలు ఉండవచ్చు. స్థానిక భాషలో ఉన్న మౌలిక పత్రం అధికారిక మూలంగా పరిగణించాల్సినది. ముఖ్యమైన సమాచారానికి, నిపుణుల మానవ అనువాదం చేయించుకోవడం మంజూరు చేయబడింది. ఈ అనువాదం వాడకం వల్ల ఏర్పడే ఏవైనా అపార్థాలు లేదా తప్పుఅర్థాలు కోసం మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

17
translations/te/4-typing-game/solution/README.md
Unescape View File

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2026-01-08T18:07:50+00:00",
"source_file": "4-typing-game/solution/README.md",
"language_code": "te"
}
-->
ఇది ఒక ప్లేస్‌హోల్డర్, ఉద్దేశపూర్వకంగా ఖాళీగా ఉంచబడింది
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్క్లెయిమర్**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువాదం చేసారు. మేము సరైనతకు యత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పిదాలు లేదా అసత్యతలు ఉండవచ్చని దయచేసి గమనించండి. మౌలిక భాషలో ఉన్న అసలు పత్రాన్ని అధికారిక వనరుగా పరిగణించాలి. అత్యవసర సమాచారం కోసం, నిపుణుల చేత మానవ అనువాదం చేయించడం మంచిది. ఈ అనువాదం వాడకం వల్ల కలిగే ఏవైనా అపార్థాలు లేదా తప్పుతెలుసుకోవడాలలో మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

613
translations/te/4-typing-game/typing-game/README.md
Unescape View File

@ -0,0 +1,613 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "da8bc72041a2bb3826a54654ee1a8844",
"translation_date": "2026-01-08T18:09:43+00:00",
"source_file": "4-typing-game/typing-game/README.md",
"language_code": "te"
}
-->
# ఈవెంట్ల ఉపయోగంతో గేమ్ సృష్టించడం
మీరు ఎప్పుడైనా ఆలోచించారా, మీరు బటన్‌పై క్లిక్ చేసినప్పుడు లేదా టెక్స్ట్ బాక్సులో టైపు చేసినప్పుడు వెబ్‌సైట్లు ఎలా తెలుసుకుంటాయో? అది ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్ మాయాజాలం! మీరు ప్రతి కీస్ట్రోక్‌‌కు ప్రతిస్పందించే టైపింగ్ స్పీడ్ గేమ్‌ని నిర్మించడం ద్వారా ఈ మూలభూత నైపుణ్యాన్ని నేర్చుకోవటానికి ఇంత మంచి మార్గం ఏమిటి.
మీరు ప్రత్యక్షంగా చూడబోతున్నారు వెబ్ బ్రౌజర్లు మీ జావాస్క్రిప్ట్ కోడ్‌తో "మాట్లాడటం" ఎలా జరుగుతుందో. మీరు ప్రతి సారి క్లిక్ చేసినప్పుడు, టైపు చేసినప్పుడు లేదా మౌస్ సహజీవనం చేసినప్పుడు, బ్రౌజర్ చిన్న సందేశాలు (మేము వాటిని ఈవెంట్లు అని పిలుస్తాం) మీ కోడ్‌కు పంపుతోంది, మీరు ఎలా స్పందించాలో నిర్ణయించుకుంటారు!
మనం ఇక్కడికల్లా వచ్చినప్పుడు, మీరు ఒక నిజమైన టైపింగ్ గేమ్‌ను నిర్మించి ఉంటుంది, అది మీ వేగాన్ని మరియు ఖచ్చితత్వాన్ని ట్రాక్ చేస్తుంది. మరింత ముఖ్యంగా, మీరు ఇప్పటివరకు ఉపయోగించిన ప్రతి ఇంటరాక్టివ్ వెబ్‌సైట్‌ను శక్తివంతం చేసే ప్రాథమిక సంప్రదాయాలను అర్థం చేసుకుంటారు. మొదలు పెట్టుదాం!
## పాఠం మునుపటి ప్రశ్నావళి
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/21)
## ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్
మీ ఇష్టమైన యాప్ లేదా వెబ్‌సైట్ గురించి ఆలోచించండి - దాన్ని ప్రత్యక్షంగా మరియు స్పందించేలా ఎలా చేస్తుంది? అది మీరు చేసే పనికి అది ఎలా స్పందించడమే ముఖ్యమైనది! ప్రతి ట్యాప్, క్లిక్, స్వైప్ లేదా కీస్ట్రోకు "ఈవెంట్" అని పిలవబడే ఒక ఘటనను సృష్టిస్తుంది, అక్కడ వెబ్ అభివృద్ధి యొక్క నిజమైన మాయాజాలం జరుగుతుంది.
ఇది వెబ్ కోసం ప్రోగ్రామింగ్‌లో ఆసక్తికరంగా 만드는 విషయం ఇది: మనం ఎప్పుడూ ఒకరు ఆ బటన్ పై క్లిక్ చేస్తారో లేదా టెక్స్ట్ బాక్సులో టైపు చేయడం మొదలుపెడతారో తెలియదు. వారు వెంటనే క్లిక్ చేయవచ్చు, అయిదు నిమిషాలు వేచి ఉండవచ్చు, లేకపోతే ఎప్పుడూ క్లిక్ చేయకపోవచ్చు! ఈ అనిశ్చితి మీ కోడ్ ఎలా రాయాలో మనం వేరే రీతిగా ఆలోచించాల్సిన అవసరాన్ని కలిగిస్తుంది.
చెక్కపట్టు ప్రక్రియలాగా పై నుండి కిందికి పనిచేసే కోడ్ రాయడానికే బదులు, మనం ఏదో జరగాలని శాంతంగా ఎదురు చూస్తూ ఉండే కోడ్ రాస్తాము. ఇది 1800లలో టెలిగ్రాఫ్ ఆపరేటర్లు తమ యంత్రాల పక్కన కూర్చొని, వైర్ ద్వారా ఒక సందేశం వచ్చిన వెంటనే స్పందించే రూపాన్ని పోలి ఉంటుంది.
కాబట్టి ఈవెంట్ అనేది ఏమిటి? సరళంగా చెప్పాలంటే, అది ఏదో జరిగినది! మీరు ఒక బటన్ పై క్లిక్ చేసినప్పుడు - అది ఒక ఈవెంట్. మీరు ఒక అక్షరాన్ని టైపు చేసినప్పుడు - అది ఒక ఈవెంట్. మీరు మీ మౌస్‌ను కదిలించినప్పుడు - అది మరో ఈవెంట్.
ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్ మనకు కోడ్‌ను వినిపించడానికి మరియు స్పందించడానికి ఏర్పాటుచేసే అవకాశం ఇస్తుంది. మేము **ఈవెంట్ లిసనర్లు** అని పిలవబడే ప్రత్యేక ఫంక్షన్లు సృష్టిస్తాము, అవి నిర్దిష్ట సంఘటన జరుగాలని ఓర్పుగా ఎదురు చూస్తాయి, అవి జరిగితే వెంటనే చర్య తీసుకుంటాయి.
ఈవెంట్ వినికిడి లాంటి వి చూడండి మీ కోడ్ కోసం వేర్‌ద్వారం కలిగి ఉండటం వలె ఉంటుంది. మీరు వేర్‌ద్వారం ఏర్పాటు చేయాలి (`addEventListener()`), మీరు వినటానికి కావలసిన శబ్దం (ఉదాహరణకు 'click' లేదా 'keypress') చెప్పాలి, మరియు దాన్ని ఎవరు కొట్టినప్పుడు (మీ కస్టమ్ ఫంక్షన్) ఏమి జరగాలో నిర్దేశించాలి.
**ఈవెంట్ లిసనర్లు ఎలా పనిచేస్తాయో ఇక్కడ ఉన్నది:**
- **గమనిస్తాయి** వినియోగదారుల ప్రత్యేక చర్యలను, ఉదాహరణకు క్లిక్‌లు, కీస్ట్రోక్స్, లేదా మౌస్ కదలికలు
- **మీ కస్టమ్ కోడ్‌ను అమలు చేస్తాయి** నిర్దిష్ట ఈవెంట్ సంభవించినప్పుడు
- **వినియోగదారుల ఇన్‌టరాక్షన్లకు వెంటనే స్పందిస్తాయి**, నిరాత్రుక अनुभवాన్ని సృష్టిస్తాయి
- **అదే ఎలిమెంట్‌పై బహుళ ఈవెంట్లను** వివిధ లిసనర్లతో నిర్వహిస్తాయి
> **NOTE:** ఈవెంట్ లిసనర్లు సృష్టించడానికి అనేక మార్గాలు ఉన్నాయని చెప్పటం మంచిది. మీరు అనామక ఫంక్షన్లు ఉపయోగించవచ్చు, లేదా పేరున్నవాటి సృష్టించవచ్చు. మీరు వివిధ షార్ట్‌కట్‌లు ఉపయోగించవచ్చు, ఉదాహరణకు `click` ప్రాపర్టీని సెట్ చేయడం, లేదా `addEventListener()` ఉపయోగించడం. మన వ్యాయామంలో మనం `addEventListener()` మరియు అనామక ఫంక్షన్లపై ఫోకస్ చేస్తాము, ఎందుకంటే ఇది వెబ్ డెవలపర్లలో సాధారణంగా ఉపయోగించే పద్ధతి. ఇది కూడా అత్యంత సరళమైనది, ఎందుకంటే `addEventListener()` అన్ని ఈవెంట్లకు పనిచేస్తుంది మరియు ఈవెంట్ పేరు పారామీటర్‌గా ఇవ్వవచ్చు.
### సాధారణ ఈవెంట్లు
వెబ్ బ్రౌజర్లు విన్నేందుకు అనేక రకాల ఈవెంట్లను అందించినప్పటికీ, అతి ఇంటరాక్టివ్ అప్లికేషన్లలో చాలా అవసరమైన ఈవెంట్లపై ఆధారపడి ఉంటాయి. ఈ ప్రధాన ఈవెంట్లను అర్థం చేసుకోవడం మీకు అత్యున్నత వినియోగదారు ఇన్‌టరాక్షన్లను నిర్మించడానికి పునాది ఇస్తుంది.
అప్లికేషన్ సృష్టించే సమయంలో వినియోగదారు చేసే ఏదైనా చర్య ఈవెంట్‌ను రేకెత్తిస్తుంది, దీనితో మీకు కావల్సిన అనుభూతిని అందించడానికి పెద్ద శక్తి దక్కుతుంది. అదృష్టవశాత్తు, మీరు సాధారణంగా కొద్ది ఈవెంట్లన్నింటినీ అవసరం పడతారు. ఇక్కడ కొన్ని సాధారణ ఈవెంట్లు ఉన్నాయి (మా గేమ్ సృష్టించేటప్పుడు ఉపయోగించే రెండు ఈవెంట్లు సహా):
| ఈవెంట్ | వివరణ | సాధారణ ఉపయోగాలు |
|-------|-------------|------------------|
| `click` | వినియోగదారు ఏదైనా ఒకటిపై క్లిక్ చేసింది | బటన్‌లు, లింకులు, ఇంటరాక్టివ్ అంశాలు |
| `contextmenu` | వినియోగదారు కుడి మౌస్ బటన్ క్లిక్ చేసింది | కస్టమ్ కుడి-క్లిక్ మెనూలు |
| `select` | వినియోగదారు కొన్ని టెక్స్ట్ ను హైలైట్ చేశాడు | టెక్స్ట్ సవరణ, కాపీ ఆపరేషన్లు |
| `input` | వినియోగదారు కొంత టెక్స్ట్ అందజేశాడు | ఫాం ప్రమాణీకరణ, రియల్-టైమ్ సెర్చ్ |
**ఈ ఈవెంట్లను అర్థం చేసుకోవడం:**
- **సృష్టిస్తుంది** వినియోగదారులు పేజీ上的 నిర్దిష్ట అంశాలతో సహకరిస్తే
- **సంధిస్తుంది** ఈవెంట్ ఆబ్జెక్ట్ల ద్వారా వినియోగదారుల చర్యలకు సంబంధించిన వివరాలను
- **అనుమతిస్తుంది** ప్రతిస్పందించే, ఇంటరాక్టివ్ వెబ్ అప్లికేషన్లను సృష్టించడానికి
- **ఇప్పటికీ పనిచేస్తుంది** అనేక బ్రౌజర్లు మరియు పరికరాలలో సమానంగా
## గేమ్ సృష్టించడం
ఈవెంట్లు ఎలా పని చేస్తాయో మీరు అర్థం చేసుకున్నందున, ఈ జ్ఞానాన్ని ఉపయోగించి ఒక ఉపయోగకరమైనవి తయారు చేద్దాం. మేము ఈవెంట్ హ్యాండ్లింగ్‌ను చూపించే టైపింగ్ స్పీడ్ గేమ్‌ను సృష్టిస్తాము, ఇది ఒక ముఖ్యమైన డెవలపర్ నైపుణ్యాన్ని అభివృద్ధి చేసేందుకు సహాయపడుతుంది.
మేము జావాస్క్రిప్ట్‌లో ఈవెంట్లు ఎలా పని చేస్తాయో తెలుసుకోవడానికి ఒక గేమ్‌ను సృష్టించబోతున్నాము. మా గేమ్ ఒక ప్లేయర్ టైపింగ్ నైపుణ్యాన్ని పరీక్షిస్తుంది, ఇది అన్ని డెవలపర్లు కలిగి ఉండాల్సిన అత్యంత అణచివేత నైపుణ్యాల్లో ఒకటి. సరదా విషయం: మనం ఈ రోజు ఉపయోగించే QWERTY కీబోర్డు లేఅవుట్ 1870లలో టైపర్‌ల కోసం డిజైన్ చేయబడింది - మరియు మంచి టైపింగ్ నైపుణ్యాలు ఇప్పటికీ ప్రోగ్రామర్‌లకు ఎంతో విలువైనవి! గేమ్ యొక్క సాధారణ ప్రవాహం ఇలా ఉంటుంది:
```mermaid
flowchart TD
A[ఆటగాడు ఆరంభం పైన క్లిక్ చేస్తాడు] --> B[యాదృచ్ఛిక ఉధ్యరణ ప్రదర్శిస్తుంది]
B --> C[ఆటగాడు టెక్స్ట్ బాక్స్ లో టైప్ చేస్తాడు]
C --> D{పదం పూర్తయింది?}
D -->|అవును| E[తదుపరి పదం హైలైట్ చేయండి]
D -->|కాదు| F{ఇప్పటికీ సరియైనదా?}
F -->|అవును| G[సాధారణ శైలి కొనసాగించండి]
F -->|కాదు| H[పొరపాటు శైలి చూపించండి]
E --> I{ఉధ్యరణ పూర్తయ్యిందా?}
I -->|కాదు| C
I -->|అవును| J[సమయం తో విజయ సందేశం చూపించండి]
G --> C
H --> C
```
**మా గేమ్ ఎలా పనిచేస్తుంది:**
- **ప్రారంభమవుతుంది** ప్లేయర్ ప్రారంభ బటన్ క్లిక్ చేసినప్పుడు మరియు ఒక యాదృచ్ఛిక కోట్ ను చూపిస్తుంది
- **ట్రాక్ చేస్తుంది** ప్లేయర్ టైపింగ్ పురోగతిని పదం వారీగా రియల్-టైమ్‌లో
- **హైలైట్ చేస్తుంది** ప్రస్తుత పదాన్ని ప్లేయర్ దృష్టిని మార్గనిర్దేశం చేయడానికి
- **తక్షణ ప్రతిస్పందన అందిస్తుంది** టైపింగ్ లోపాలకు
- **ఎన్నుకుంటుంది** మరియు చూపిస్తుంది మొత్తం సమయం కోట్ పూర్తి అయినప్పుడల్లా
మా గేమ్‌ను నిర్మించుకుందాం, మరియు ఈవెంట్ల గురించి నేర్చుకుందాం!
### ఫైల్ నిర్మాణం
కోడ్ రాయడం మొదలుపెట్టేముందు, మనం వ్యవస్థీకృతంగా ఉండాలి! ప్రారంభం నుండి స్వచ్ఛమైన ఫైల్ నిర్మాణం ఉండటం తర్వాత తలనొప్పులు తగ్గించి, మీ ప్రాజెక్టును మరింత ప్రొఫెషనల్‌గా చేస్తుంది. 😊
మనం మూడు ఫైళ్ళతోనే సరిపోతాం: మా పేజీ నిర్మాణానికి `index.html`, మా గేమ్ లాజిక్ కోసం `script.js`, మరియు అంతా బాగుండేందుకు `style.css`. ఇది ఎక్కువగా వెబ్ని శక్తివంతం చేసే క్లాసిక్ ముగ్గురు!
**కన్సోల్ లేదా టెర్మినల్ విండో ఓపెన్ చేసి ఈ క్రింది కమాండ్లు ఇవ్వడం ద్వారా మీ పనికి కొత్త ఫోల్డర్ సృష్టించండి:**
```bash
# లినక్స్ లేదా మ్యాక్OS
mkdir typing-game && cd typing-game
# విండోస్
md typing-game && cd typing-game
```
**ఈ కమాండ్లు ఏమి చేస్తాయో:**
- **సృష్టిస్తుంది** ఒక కొత్త డైరెక్టరీ పేరుతో `typing-game` మీ ప్రాజెక్ట్ ఫైళ్ళ కోసం
- **దానిలోకి ప్రవేశిస్తుంది** ఆటోమేటీగా నూతనంగా సృష్టించబడిన డైరెక్టరీలోకి
- **సెట్ చేస్తుంది** మీ గేమ్ అభివృద్ధికి స్వచ్ఛమైన వర్క్‌ప్లేస్
**విజువల్ స్టూడియో కోడ్ ఓపెన్ చేయండి:**
```bash
code .
```
**ఈ కమాండ్:**
- **ప్రారంభిస్తుంది** కారెంట్ డైరెక్టరీలో Visual Studio Code ను
- **మీ ప్రాజెక్ట్ ఫోల్డర్‌ను ఎడిటర్ లో తెరవడం**
- **మీకు అవసరమైన అభివృద్ధి ఉపకరణాలను అందిస్తుంది**
**విజువల్ స్టూడియో కోడ్‌లో ఆ ఫోల్డర్‌లో ఈ క్రింది పేర్లతో మూడు ఫైళ్లను జోడించండి:**
- `index.html` - మీ గేమ్ నిర్మాణం మరియు కంటెంట్ కలిపివుంది
- `script.js` - అన్ని గేమ్ లాజిక్ మరియు ఈవెంట్ లిసనర్లను నిర్వహిస్తుంది
- `style.css` - దృశ్య రూపం మరియు శైలీకరణ నిర్వచిస్తుంది
## యూజర్ ఇంటర్‌ఫేస్ను సృష్టించండి
ఇప్పుడు మన గేమ్ చర్య జరుగుతుంది స్థలాన్ని నిర్మిద్దాం! ఇంగ్లీష్‌లో స్పేస్‌షిప్‌కి కంట్రోల్ ప్యానెల్ రూపకల్పన చేయడం లాంటిది - మన ఆటగాళ్లకు అవసరమైన ప్రతిదీ వారి ఆశించిన చోట ఉండటానికి చూసుకోవాలి.
మన గేమ్‌కు ఏది అవసరమో మనం తెలుసుకుందాం. మీరు టైపింగ్ గేమ్ ఆడుతున్నట్లయితే, మీరు స్క్రీన్‌పై ఏమి చూడాలని అనుకొంటారు? మెనూ ఇక్కడ ఉంది:
| UI అంశం | ఉద్దేశ్యం | HTML అంశం |
|------------|---------|-------------|
| Quote Display | టైపు చేయవలసిన టెక్స్ట్ చూపిస్తుంది | `<p>` with `id="quote"` |
| Message Area | స్థితి మరియు విజయ సందేశాలు చూపిస్తుంది | `<p>` with `id="message"` |
| Text Input | ప్లేయర్లు కోట్ టైప్ చేసే విభాగం | `<input>` with `id="typed-value"` |
| Start Button | గేమ్ ప్రారంభిస్తుంది | `<button>` with `id="start"` |
**UI నిర్మాణాన్ని అర్థం చేసుకోవడం:**
- **కంటెంట్‌ను సరైన క్రమంలో** పై నుండి దిగువకు ఏర్పాటు చేస్తుంది
- **అయిడీని** పరికరాలను జావాస్క్రిప్ట్ లక్ష్యం కోసం కేటాయిస్తుంది
- **స్పష్టమైన దృశ్య హైరార్కీ అందిస్తుంది** మెరుగైన వినియోగదారు అనుభవం కోసం
- **సెమాంటిక్ HTML అంశాలను కలిగి ఉంటుంది** అనుభవజ్ఞత్వానికి
ప్రతి ఒక్కదానికి మన JavaScript లో పని చేయడానికి ఐడీలు అవసరం. మేము CSS మరియు JavaScript ఫైళ్ళకు కూడా రిఫరెన్సులు జత చేస్తాము.
`index.html` అనే కొత్త ఫైల్ సృష్టించండి. ఈ క్రింది HTML జత చేయండి:
```html
<!-- inside index.html -->
<html>
<head>
<title>Typing game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Typing game!</h1>
<p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
<p id="quote"></p> <!-- This will display our quote -->
<p id="message"></p> <!-- This will display any status messages -->
<div>
<input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
<button type="button" id="start">Start</button> <!-- To start the game -->
</div>
<script src="script.js"></script>
</body>
</html>
```
**ఈ HTML నిర్మాణం ఏమి అందిస్తుంది:**
- **శైలీకరణ కోసం** `<head>` లో CSS స్టైల్‌షీట్‌లను లింక్ చేస్తుంది
- **స్పష్టమైన హెడ్డింగ్ మరియు సూచనలు** ఉపయోగదారులకు సృష్టిస్తుంది
- **ఐడీలతో ప్రత్యేకమైన ప్లేస్‌హోల్డర్ ప్యారాగ్రాఫ్‌లు ఏర్పరిచి డైనమిక్ కంటెంట్ కోసం ఉంటుంది**
- **ప్రవేశ ఫీల్డ్‌ను గమనించేందుకు అనువర్తించే లక్షణాలతో జత చేస్తుంది**
- **గేమ్ ప్రారంభించడానికి స్టార్ట్ బటన్ అందిస్తుంది**
- **ఉత్తమ పనితీరుకు జావాస్క్రిప్ట్ ఫైల్‌ను చివరికి లోడ్ చేస్తుంది**
### అప్లికేషన్ ప్రారంభించండి
అభివృద్ధి సమయంలో మీ అప్లికేషన్‌ను తరచుగా పరీక్షించడం, సమస్యలను సత్వరమే గుర్తించటానికి మరియు మీ పురోగతి ప్రత్యక్షంగా చూడటానికి సహాయపడుతుంది. లైవ్ సర్వర్ ఒక విలువైన ఉపకరం, ఇది మీరు చేంజ్ చేసిన ప్రతిసారూ ఆటోమేటిక్‌గా బ్రౌజర్ రిఫ్రెష్ చేస్తుంది, అభివృద్ధిని మరింత సమర్థవంతంగా చేస్తుంది.
విషయాన్ని మీరు ఎలా చూస్తోందో సరి చూసేందుకు అంసగతంగీ అభివృద్ధి చేయడం మంచిది. మన అప్లికేషన్ ప్రారంభిద్దాం. Visual Studio Codeకి ఉన్న అద్భుతమైన ఎక్స్‌టెన్షన్ [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) మీ అప్లికేషన్‌ను స్థానికంగా హోస్ట్ చేస్తుంది మరియు మీరు సేవ్ చేసినప్పుడల్లా బ్రౌజర్‌ను రిఫ్రెష్ చేస్తుంది.
**[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ను ఇన్‌స్టాల్ చేయడానికి పై లింక్‌పై క్లిక్ చేసి ఇన్‌స్టాల్ క్లిక్ చేయండి:**
**ఇన్‌స్టాలేషన్ సమయంలో ఏం జరుగుతుందో:**
- **మీ బ్రౌజర్ మీరు Visual Studio Codeని తెరవడానికి ప్రాంప్ట్ చేస్తుంది**
- **ఎక్స్‌టెన్షన్ ఇన్‌స్టాలేషన్ ప్రక్రియను పరిచయం చేస్తుంది**
- **సెట్టప్ పూర్తి చేయడానికి Visual Studio Codeను రీస్టార్ట్ చేయాలని అవసరం ఉండవచ్చు**
**ఇన్‌స్టాల్ అయిన తర్వాత, Visual Studio Codeలో Ctrl-Shift-P (లేదా Cmd-Shift-P) నొక్కి కమాండ్ ప్యాలెట్ తెరవండి:**
**కమాండ్ ప్యాలెట్ అర్థం చేసుకోవడం:**
- **VS Codeలో అన్ని కమాండ్లకు త్వరితమైన ప్రవేశాన్ని అందిస్తుంది**
- **మీ టైపు చేసినట్లుగా కమాండ్లను శోధిస్తుంది**
- **త్వరిత అభివృద్ధి కోసం కీబోర్డ్ షార్ట్‌కట్‌లను అందిస్తుంది**
**"Live Server: Open with Live Server" టైపు చేయండి:**
**Live Server దీంట్లో చేయేది:**
- **మీ ప్రాజెక్ట్ కోసం స్థానిక అభివృద్ధి సర్వర్‌ను ప్రారంభిస్తుంది**
- **ఫైళ్లను సేవ్ చేసినప్పుడు బ్రౌజర్‌ను ఆటోమేటిక్‌గా రిఫ్రెష్ చేస్తుంది**
- **ఫైళ్లు స్థానిక URL (సాధారణంగా `localhost:5500`) నుండి అందిస్తుంది**
**బ్రౌజర్ తెరచి `https://localhost:5500` కి వెళ్లండి:**
ఇప్పుడు మీరు సృష్టించిన పేజీ కనబడుతుంది! కొంత ఫంక్షనాలిటీ జోడిద్దాం.
## CSS జోడించండి
ఇప్పుడు దృశ్యరూపాన్ని అందంగా తయారు చేద్దాం! దృశ్య ప్రతిస్పందన యూజర్ ఇంటర్‌ఫేస్లకు కోనియరోజుల నుంచి ముఖ్యమైనది. 1980లలో పరిశోధకులు వెంటనే దృశ్య ప్రతిస్పందన వినియోగదారుల ప్రదర్శనను గణనీయంగా మెరుగుపరిచిందని మరియు లోపాలు తగ్గించిందని తెలుసుకున్నారు. మనం ఇదే పనిచేయించబోతున్నాం.
మన గేమ్ ఏదైన స్పష్టంగా ఉండాలి. ఆటగాళ్లు వెంటనే తనవంటి పదాన్ని టైప్ చేయాలని తెలిసేలా ఉండాలి, తప్పు చేసినట్లయితే అది వెంటనే కనిపించాలి. కొంచెం సరళమైన కానీ సమర్థవంతమైన స్టైలింగ్ ని చేద్దాం:
`style.css` అనే కొత్త ఫైల్ సృష్టించి ఈ క్రింది సింటాక్స్ జత చేయండి.
```css
/* inside style.css */
.highlight {
background-color: yellow;
}
.error {
background-color: lightcoral;
border: red;
}
```
**ఈ CSS క్లాసులను అర్థం చేసుకోవడం:**
- **ప్రస్తుతం ఉన్న పదాన్ని పసుపు నేపథ్యంతో హైలైట్ చేస్తుంది** స్పష్టమైన దృశ్య మార్గనిర్దేశానికి
- **టైపింగ్ లోపాలను కొరల్ వెలిగిపోయిన నేపథ్య రంగుతో సూచిస్తుంది**
- **ద్రుత ప్రతిస్పందన అందిస్తుంది** వినియోగదారు టైపింగ్ ప్రవాహాన్ని అంతరాయపడకుండా
- **మార్పు రంగులు ఉపయోగించి** అనుకూలత మరియు స్పష్టమైన దృశ్య కమ్యునికేషన్ ని కలిగి ఉంటుంది
✅ CSS విషయానికి వస్తే, మీరు మీ పేజీని మీ ఇష్టంగా అమర్చుకోవచ్చు. కొంత సమయం తీసుకుని పేజీ చూడటానికి మరింత ఆకర్షణీయంగా రూపొందించండి:
- వేరే ఫాంట్ ఎంచుకోండి
- హెడ్డర్లకు రంగులు జోడించండి
- అంశాలు పరిమాణం మార్చండి
## జావాస్క్రిప్ట్
ఇక్కడ విషయాలు ఆసక్తికరంగా మారతాయి! 🎉 మనకు HTML నిర్మాణం మరియు CSS శైలీకరణ ఉన్నాయి, కానీ ప్రస్తుతం మన గేమ్ ఇంజిన్ లేని అందమైన కారు లాంటిది. జావాస్క్రిప్ట్ ఆ ఇంజినే అవుతుంది - ఇది అన్ని పని చేయించేది మరియు ఆటగాళ్లు చేసే పనికి స్పందిస్తుంది.
ఇక్కడ మీ సృష్టి జీవించబోతుంది. మనం దశల వారీగా ముందుకువెళ్తాము కాబట్టి ఏదీ బరువు లాంటిది అనిపించదు:
| దశ | ఉద్దేశ్యం | మీరు నేర్చుకునేది |
|------|---------|------------------|
| [స్థిరాలు సృష్టించండి](../../../../4-typing-game/typing-game) | కోట్‌లు మరియు DOM సూచనలు సెట్ చేయండి | వేరియబుల్ నిర్వహణ మరియు DOM ఎంపిక |
| [గేమ్ ప్రారంభానికి ఈవెంట్ లిసనర్](../../../../4-typing-game/typing-game) | గేమ్ ప్రారంభాన్ని నిర్వహించండి | ఈవెంట్ హ్యాండ్లింగ్ మరియు UI నవీకరణలు |
| [టైపింగ్‌కు ఈవెంట్ లిసనర్](../../../../4-typing-game/typing-game) | వినియోగదారుల ఇన్‌పుట్‌ను రియల్-టైమ్‌లో ప్రాసెస్ చేయండి | ఇన్‌పుట్ నిర్ధారణ మరియు డైనమిక్ ప్రతిస్పందన |
**ఈ నిర్మిత విధానం మీకు సహాయపడుతుంది:**
- **మీ కోడ్‌ను తార్కికమైన, నిర్వహించదగిన విభాగాలుగా ఆర్గనైజ్ చేయండి**
- **లాజిక్‌ను పద్ధతిగా నిర్మించి డీబగ్గింగ్ సులభతరం చేయండి**
- **మీ అప్లికేషన్ వేర్వేరు భాగాలు ఎలా కలిసి పని చేస్తాయో అర్థం చేసుకోండి**
- **భవిష్యత్ ప్రాజెక్టుల కోసం పునరుపయోగ సాధనాలు సృష్టించండి**
కాని మొదట, `script.js` అనే కొత్త ఫైల్ సృష్టించండి.
### స్థిరాలను జోడించండి
చర్యలోకి దిగక ముందు మన వనరులను సేకరించుదాం! NASA మిషన్ కంట్రోల్ లా ఇయంతీ మానిటరింగ్ సిస్టమ్స్ అన్ని ప్రారంభించడానికి ముందు సక్రియపరుస్తారు, మనకు కూడా ప్రతిదీ సిద్ధంగా ఉండటం సరళం అవుతుంది. ఇది తర్వాత వస్తువుల కోసం తిరగొచ్చే పనిని తగ్గిస్తుంది మరియు టైపోలను నివారిస్తుంది.
ముందుగా మనం సెట్ చేసుకోవాలి:
| డేటా రకం | ఉద్దేశ్యం | ఉదాహరణ |
|-----------|---------|--------|
| اقتباسల శ్రేణి | ఆటకు అన్ని సాధ్యమైన اقتباسల ను నిల్వ చేయండి | `['Quote 1', 'Quote 2', ...]` |
| పదాల శ్రేణి | ప్రస్తుత اقتبాసును వ్యక్తిగత పదాలుగా విభజించండి | `['When', 'you', 'have', ...]` |
| పద సూచిక | ఆటగాడు ఎన్ని పదాలను టైప్ చేస్తున్నాడో ట్రాక్ చేయండి | `0, 1, 2, 3...` |
| ప్రారంభ సమయం | స్కోరింగ్ కోసం గడిచిన సమయాన్ని లెక్కించండి | `Date.now()` |
**మేము మా UI అంశాలకు సూచనలూ అవసరం:**
| అంశం | ID | ప్రయోజనం |
|---------|----|---------|
| వచన ఇన్‌పుట్ | `typed-value` | ఆటగాళ్లు టైప్ చేసే ప్రదేశం |
| اقتبాస ప్రదర్శన | `quote` | టైప్ చేయాల్సిన اقتبాసును చూపిస్తుంది |
| సందేశ ప్రాంతం | `message` | స్థితి నవీకరణలు చూపిస్తుంది |
```javascript
// script.js లో
// మన సర్వ కోట్స్
const quotes = [
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
'There is nothing more deceptive than an obvious fact.',
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
'I never make exceptions. An exception disproves the rule.',
'What one man can invent another can discover.',
'Nothing clears up a case so much as stating it to another person.',
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// పదాల జాబితాను మరియు ప్లేయర్ ప్రస్తుతం టైప్ చేస్తున్న పదం సూచికను నిల్వచేయండి
let words = [];
let wordIndex = 0;
// ప్రారంభ సమయం
let startTime = Date.now();
// పేజీ అంశాలు
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');
```
**ఈ సెటప్ కోడ్ ఏం చేస్తుందో విశ్లేషణ:**
- **ఉంచుతుంది** షెర్లాక్ హోల్మ్స్ اقتبాసల శ్రేణి `const` తో ఎందుకంటే اقتبాసలు మారవు
- **ప్రారంభిస్తుంది** ట్రాకింగ్ చరాలు `let` తో ఎందుకంటే ఆట సమయంలో విలువలు మారుతాయి
- **తీసుకోవడo** DOM అంశాల సూచనలను `document.getElementById()` తో సమర్థవంతమైన ప్రాప్తికి
- **సెట్ చేస్తుంది** ఆట అన్ని ఫంక్షనల్ కోసం స్పష్టమైన, వివరణాత్మక చరాలతో
- **సంగ్రహిస్తుంది** సంబంధిత డేటాను మరియు అంశాలను సગౌరవంగా సులభ నిర్వహణ కోసం
✅ మీరు మీ ఆటకు ఇంకా ఎక్కువ اقتبాసలు జోడించండి
> 💡 **ప్రో టిప్**: కోడ్‌లో ఎప్పుడైనా `document.getElementById()` తో అంశాలను పొందవచ్చు. ఎందుకంటే మనం ఈ అంశాలపై తరచుగా సూచిస్తాము కాబట్టి లిఖిత లోపాల నుంచి తప్పించుకోవడానికి స్థిరచారాలు ఉపయోగించాలి. [Vue.js](https://vuejs.org/) లేదా [React](https://reactjs.org/) వంటి ఫ్రేమ్‌వర్క్‌లు మీ కోడ్‌ను సక్రమంగా నిర్వహించడానికి సహాయపడతాయి.
>
**ఈ విధానం ఎందుకు బాగా పని చేస్తుంది:**
- **తప్పుల్ని నివారిస్తుంది** పదం తప్పులని పదాన్ని తరచూ సూచించినపుడు
- **మెరుగుపరుస్తుంది** కోడ్ పఠనీయతను వివరణాత్మక స్థిరచారాలతో
- **ప్రముఖ IDE మద్దతు ఇస్తుంది** ఆటో కంప్లీట్ అండ్ పొరపాటు పరిక్షణతో
- **సులభంగా మార్చడం** ఉంటే ఎలిమెంట్ ID మారితే
`const`, `let` మరియు `var` పై వీడియోను కొంత సేపు చూడండి
[![చరాల రకాల](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "చరాల రకాల")
> 🎥 వేరియబుల్స్ గురించి వీడియో కోసం పై చిత్రం క్లిక్ చేయండి.
### ప్రారంభ లాజిక్ జోడించండి
ఇక్కడనే ప్రతిదీ సరిపోతుంది! 🚀 మీరు మీ మొదటి నిజమైన ఈవెంట్ లిసనర్ని రాయబోతున్నారు, మరియు బటన్ క్లిక్ కి మీ కోడ్ స్పందించడం చూడటం చాలా సంతృప్తికరం.
ఆలోచించండి: ఎక్కడో ఒక ఆటగాడు ఆ "ప్రారంభం" బటన్‌ను క్లిక్ చేస్తాడు, మరియు మీ కోడ్ వారి కోసం సిద్ధంగా ఉండాలి. వారు ఎప్పుడు క్లిక్ చేస్తారో తెలియదు — వెంటనే కావచ్చు, లేదా కాఫీ తీసుకొని తర్వాత కావచ్చు — కానీ క్లిక్ చేసిన సమయంపై మీ ఆట చైతన్యానికి వస్తుంది.
వినియోగదారు `start` క్లిక్ చేసినప్పుడు, ఒక اقتبాసు ఎంచుకోవాలి, UI సెట్ చేయాలి, ప్రస్తుత పదాన్ని మరియు సమయాన్ని ట్రాక్ చేయడానికి సెట్ చేయాలి. దిగువ JavaScript మీరు జోడించాల్సినది; స్క్రిప్ట్ బ్లాక్ తర్వాత దీన్ని చర్చిస్తాము.
```javascript
// script.js చివరలో
document.getElementById('start').addEventListener('click', () => {
// ఒక కోట్ పొందండి
const quoteIndex = Math.floor(Math.random() * quotes.length);
const quote = quotes[quoteIndex];
// కోట్ను పదాల సరసన పెట్టండి
words = quote.split(' ');
// ట్రాకింగ్ కోసం పద సూచికను రీసెట్ చేయండి
wordIndex = 0;
// UI నవీకరణలు
// క్లాస్ సెట్ చేయడానికి span ఎలిమెంట్ల సరసన సృష్టించండి
const spanWords = words.map(function(word) { return `<span>${word} </span>`});
// స్ట్రింగ్‌గా మార్చి quote డిస్ప్లేకి innerHTMLగా సెట్ చేయండి
quoteElement.innerHTML = spanWords.join('');
// మొదటి పదాన్ని హైలైట్ చేయండి
quoteElement.childNodes[0].className = 'highlight';
// పూర్వ సందేశాలను క్లియర్ చేయండి
messageElement.innerText = '';
// టెక్స్ట్‌బాక్స్‌ను సెట్ చేయండి
// టెక్స్ట్‌బాక్స్‌ను క్లియర్ చేయండి
typedValueElement.value = '';
// ఫోకస్ సెట్ చేయండి
typedValueElement.focus();
// ఈవెంట్ హ్యాండ్లర్ సెట్ చేయండి
// టైమర్ ప్రారంభించండి
startTime = new Date().getTime();
});
```
**కోడ్‌ను తార్కిక విభాగాలుగా విభజిద్దాం:**
**📊 పద ట్రాకింగ్ సెటప్:**
- **ఎంచుకుంటుంది** వేరొక اقتبాసు `Math.floor()` మరియు `Math.random()` తో వివిధంగా ఉండేందుకు
- **మారుస్తుంది** اقتبాసును వ్యక్తిగత పదాల శ్రేణిగా `split(' ')` తో
- **తిరిగి సెట్ చేస్తుంది** `wordIndex` ను 0 గా ఎందుకంటే ఆటగాళ్లు మొదటి పదం నుండి ప్రారంభిస్తారు
- **సన్నద్ధం చేస్తుంది** ఆట స్థితిని తాజా రౌండ్ కోసం
**🎨 UI సెటప్ మరియు ప్రదర్శన:**
- **తయారుచేస్తుంది** `<span>` అంశాల శ్రేణిని, ప్రతి పదం ప్రత్యేక శైలీకరణ కోసం చుట్టడం
- **జోడిస్తుంది** span అంశాలను ఒంటి స్ట్రింగ్‌గా సమర్థవంతమైన DOM నవీకరణకు
- **ప్రధానపదాన్ని హైలైట్ చేస్తుంది** `highlight` CSS తరగతిని జోడించడం ద్వారా
- **తెలివిగా ముందటి సందేశాలను ఖాళీ చేస్తుంది** శుభ్రమైన స్థలాన్ని అందించడానికి
**⌨️ టెక్స్ట్ బాక్స్ సిద్ధం:**
- **తొలుత ఉన్న టెక్స్ట్ ను ఖాళీ చేస్తుంది** ఇన్‌పుట్ ఫీల్డ్‌లో
- **ఫోకస్ సెట్ చేస్తుంది** ఆటగాళ్లు వెంటనే టైప్ చేయడం ప్రారంభించడానికి
- **ఇన్‌పుట్ ప్రాంతాన్ని సిద్ధం చేస్తుంది** కొత్త ఆట సెషన్ కోసం
**⏱️ టైమర్ ప్రారంభం:**
- **ప్రస్తుతం సమయాన్ని పొందుతుంది** `new Date().getTime()` తో
- **సరైన టైపింగ్ వేగం మరియు పూర్తిచేసిన సమయం లెక్కింపును ప్రారంభిస్తుంది**
- **ఆట శకం పనితీరు ట్రాకింగ్ ప్రారంభం**
### టైపింగ్ లాజిక్ జోడించండి
ఇక్కడే మన ఆట మూలాన్ని తాకబోతూ ఉన్నాం! మొదటికి ఇది చాలా లాంటిదిగా అనిపించినా బాధ పడకండి — ప్రతి భాగం నాకు అడిగితే క్లుప్తంగా, చివరికి మీరు దీన్ని ఎంత తార్కికంగా ఉందో చూడగలరు.
మనం ఇక్కడ చేస్తున్నది చాలా సున్నితమైన పనీ: ప్రతి ఒక్కసారి ఒక అక్షరాన్ని టైప్ చేస్తే, మన కోడ్ అది ఏమిటీ అనేది చూడాలి, వారిని ఫీడ్బ్యాక్ ఇవ్వాలి, తరువాత ఏమి జరగాలో నిర్ణయించాలి. ఇది 1970లలో WordStar వంటి మొదటి పదం ప్రాసెసర్‌లతో సాదృశ్యం కలిగి ఉంటుంది.
```javascript
// script.js చివరలో
typedValueElement.addEventListener('input', () => {
// ప్రస్తుత పదాన్ని పొందండి
const currentWord = words[wordIndex];
// ప్రస్తుత విలువను పొందండి
const typedValue = typedValueElement.value;
if (typedValue === currentWord && wordIndex === words.length - 1) {
// వాక్య చివరం
// విజయాన్ని ప్రదర్శించండి
const elapsedTime = new Date().getTime() - startTime;
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
messageElement.innerText = message;
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
// పదం ముగింపు
// కొత్త పదం కోసం typedValueElement ను క్లియర్ చేయండి
typedValueElement.value = '';
// తదుపరి పదానికి సాగండి
wordIndex++;
// కోట్‌లోని అన్నీ ఎలిమెంట్ల కోసం క్లాస్ పేరు రీసెట్ చేయండి
for (const wordElement of quoteElement.childNodes) {
wordElement.className = '';
}
// కొత్త పదాన్ని హైలైట్ చేయండి
quoteElement.childNodes[wordIndex].className = 'highlight';
} else if (currentWord.startsWith(typedValue)) {
// ప్రస్తుతానికి సరైనది
// తదుపరి పదాన్ని హైలైట్ చేయండి
typedValueElement.className = '';
} else {
// లోప పరిస్థితి
typedValueElement.className = 'error';
}
});
```
**టైపింగ్ లాజిక్ ప్రవాహం గురించి అవగాహన:**
ఈ ఫంక్షన్ వాటర్‌ఫాల్ విధానం ఉపయోగించి, అత్యంత ప్రత్యేకమైన పరిస్థితి నుండి అత్యంత సాధారణ పరిస్థితి వరకు తనిఖీలు చేస్తుంది. ప్రతీ సన్నివేశాన్ని విభజిద్దాం:
```mermaid
flowchart TD
A[ఆడగాడు అక్షరం టైప్ చేస్తున్నాడు] --> B[ప్రస్తుత పదం మరియు టైప్ చేయబడిన విలువను పొందండి]
B --> C{కొటేషన్ పూర్తయిందా?}
C -->|అవును| D[సమయం తో పూర్తి సందేశం చూపించు]
C -->|కాదు| E{పదం జతచేయబడిందా?}
E -->|అవును| F[ఇన్‌పుట్ క్లియర్ చేయండి, తదుపరి పదానికి మార్చండి, హైలైట్ ను అనువర్తింపచేయండి]
E -->|కాదు| G{ఇప్పటి వరకు టైపింగ్ సరేనా?}
G -->|అవును| H[పిల్లలు స్టైలింగ్ తొలగించు]
G -->|కాదు| I[పిల్లలు స్టైలింగ్ చూపించు]
```
**🏁 اقتبాసు పూర్తయింది (సన్నివేశం 1):**
- **తనిఖీ చేస్తుంది** టైపైన విలువ ప్రస్తుత పదంతో సరిపోతుందా మరియు మనం చివరి పదాన ఉన్నామో
- **గణన చేస్తుంది** గడిచిన సమయాన్ని ప్రారంభ సమయం నించి ప్రస్తుత సమయం తక్కువ చేయడం ద్వారా
- **మిల్లిసెకండ్లను సెకన్లలోకి మార్చుతుంది** 1,000తో భాగించి
- **గుర్తింపు సందేశాన్ని చూపిస్తుంది** పూర్తయిన సమయంతో
**✅ పదం పూర్తయింది (సన్నివేశం 2):**
- **అందుకుంటుంది** పదం పూర్తి వలన ఇన్‌పుట్ చివరకు ఒక స్పేస్ ఉన్నప్పుడు
- **సరైనదని ధృవీకరించడం** ట్రిమ్ చేసిన ఇన్‌పుట్ ప్రస్తుత పదంతో ఖచ్చితంగా సరిపోతుందా
- **ఖాళీ చేస్తుంది** ఇన్‌పుట్ ఫీల్డ్ తదుపరి పదం కోసం
- **ముందుకు సాగుతుంది** తదుపరి పదానికి `wordIndex` పెంచడం ద్వారా
- **ప్రదర్శన మార్చుతుంది** అన్ని తరగతులు తీసివేసి కొత్త పదాన్ని హైలైట్ చేస్తుంది
**📝 టైపింగ్ కొనసాగుతోంది (సన్నివేశం 3):**
- **నిర్ధారిస్తుంది** ప్రస్తుత పదం ఇప్పటి వరకు టైప్ చేసిన అంగాలతో మొదలవుతుందా
- **తప్పు శైలిని తీసివేస్తుంది** ఇన్‌పుట్ సరైనదని చూపించడానికి
- **అడుగు కొనసాగుతుంది** అవసరంలేకుండా టైపింగ్ కొనసాగించడానికి
**❌ లోపం స్థితి (సన్నివేశం 4):**
- **రెండు స్ధాపిస్తుంది** టైప్ చేసిన పాఠం అంచనా వెనుకబడితే పాఠం తప్పు అంటే
- **లోపం CSS తరగతిని వేసే** తక్షణ దృష్టాంతపు ఫీడ్బ్యాక్ ఇవ్వడానికి
- **ఆటగాళ్లకు సహాయం** తప్పులను త్వరగా గుర్తించి సరిచేయడానికి
## మీ అప్లికేషన్‌ని పరీక్షించండి
మీరు చేసిన పని చూడండి! 🎉 మీరు ఈవెంట్-నిర్దేశిత ప్రోగ్రామింగ్ ఉపయోగించి నిజమైన టైపింగ్ ఆటను నిర్మించారు. దీన్ని గుర్తుచేసుకోండి - ఇది చిన్న పని కాదు!
ఇప్పుడు పరీక్షించే దశ! ఇది కోరినట్లుగా పనిచేస్తుందా? ఏదైనా మిస్ అయినదా? సాధారణ విషయం ఏమంటే: ఏదైనా తక్షణమే సరైన పని చేయకపోతే, ఇది సహజం. అనుభవజ్ఞులైన డెవలపర్లు కూడా తరచూ బగ్గాలను కనుగొంటారు. ఇది అభివృద్ధి ప్రక్రియలో భాగం!
`start` క్లిక్ చేసి టైపు చేయడం ప్రారంభించండి! కింద అచ్చైన అనిమేషన్ లాగా ఉండాలి.
![ఆట యాక్షన్ అనిమేషన్](../../../../4-typing-game/images/demo.gif)
**మీ అప్లికేషన్‌లో ఏమి పరీక్షించాలి:**
- **ధృవీకరిస్తుంది** 'Start' క్లిక్ చేస్తున్నప్పుడు యాదృచ్ఛిక اقتبాస ప్రదర్శన జరుగుతుందా
- **నిర్ధారిస్తుంది** టైపింగ్ ప్రస్తుత పదాన్ని సరైన రీతిలో హైలైట్ చేస్తుందా
- **తనిఖీ చేస్తుంది** తప్పు టైపింగ్ ఉన్నప్పుడు లోపం శైలి కనిపిస్తుందా
- **ఖచ్చితంగా నిలబెట్టి** పదాలు పూర్తయినప్పుడు హైలైట్ సరైన వివరంగా మారుతుందా
- **పరీక్షిస్తుంది** اقتبాసు పూర్తయినప్పుడు పూర్తి సందేశం మరియు సమయం చూపుతుందా
**సాధారణ డీబగ్గింగ్ సూచనలు:**
- **బ్రౌజర్ కన్సోల్** (F12) లో JavaScript లోపాలు చూడండి
- **ఫైల్ పేర్లు** పూర్తిగా సరిపోతున్నాయో చూసుకోండి (కేస్-సెన్సిటివ్)
- **Live Server** నడుస్తున్నదని మరియు రిఫ్రెష్ అవుతుందనేది ధృవీకరించండి
- **వేరే اقتبాస్లు ప్రయత్నించి** యాదృచ్ఛిక ఎంచుకునే అంశం పనిచేస్తుందా చూసుకోండి
---
## GitHub Copilot ఏజెంట్ చాలెంజ్ 🎮
ఏజెంట్ మోడ్ ఉపయోగించి ఈ కింది చాలెంజ్ పూర్తి చేయండి:
**వివరణ:** ఆటగాడి పనితీరు ఆధారంగా ఆట దృఢత్వాన్ని సర్దుబాటు చేసే కఠినత్వం వ్యవస్థను అభివృద్ధి చేయాలి. ఈ చాలెంజ్ ఆధునిక ఈవెంట్ హ్యాండ్లింగ్, డేటా విశ్లేషణ మరియు డైనమిక్ UI నవీకరణలను అభ్యాసం చేస్తుంది.
**ప్రాంప్ట్:** టైపింగ్ ఆటకి కఠినత్వం సర్దుబాటు వ్యవస్థ సృష్టించండి:
1. ఆటగాడి టైపింగ్ వేగం (_words per minute_) మరియు ఖచ్చితత్వ శాతం ట్రాక్ చేస్తుంది
2. ఆటను మూడు కఠినత్వ స్థాయిలకు సవరించాలి: సులభం (సరళమైన اقتبాస్లు), మధ్యస్థ (ప్రస్తుత اقتبాస్లు), కఠినమైనది (పంక్చువేషన్‌తో క్లిష్ట اقتبాస్లు)
3. ప్రస్తుత కఠినత్వ స్థాయి మరియు ఆటగాడి గణాంకాలు UIపై ప్రదర్శించాలి
4. 3 క్రమం తప్పకుండా మంచి ప్రదర్శనల తర్వాత కఠినత్వం పెంచే స്ട్రీక్ కౌంటర్ అమలు చేయాలి
5. కఠినత్వ మార్పులను సూచించడానికి దృశ్య ఫీడ్బ్యాక్ (రంగులు, అనిమేషన్లు) జోడించండి
ఈ ఫీచర్ అమలుకు అవసరమైన HTML అంశాలు, CSS శైలులు, JavaScript ఫังก్షన్లను చేర్చండి. సరైన లోపాల నిర్వహణను జోడించి, ARIA లేబుల్స్‌తో ఆట సులభంగా ఉండేలా చూసుకోండి.
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## 🚀 చాలెంజ్
మీ టైపింగ్ ఆటను మరింత మెరుగుపరచటానికి సిద్ధంగా ఉన్నారా? ఈ ఆధునిక లక్షణాలను ఉపయోగించి ఈవెంట్ హ్యాండ్లింగ్ మరియు DOM మేనేజ్మెంట్ లో మీ అవగాహనను పెంచండి:
**ఇంకా ఫంక్షనాలిటీ జోడించండి:**
| లక్షణం | వివరణ | మీరు సాధించబోయే నైపుణ్యాలు |
|---------|-------------|------------------------|
| **ఇన్‌పుట్ నియంత్రణ** | పూర్తయినప్పుడు `input` ఈవెంట్ లిసనర్ ని నిలిపివేయండి, బటన్ క్లిక్ చేస్తే తిరిగి ప్రారంభించండి | ఈవెంట్ నిర్వహణ మరియు స్థితి నియంత్రణ |
| **UI స్థితి నిర్వహణ** | ఆటగాడు اقتبాసు పూర్తిచేసినప్పుడు టెక్స్ట్బాక్స్ ని డిసేబుల్ చేయండి | DOM ప్రాపర్టీ మేనేజ్మెంట్ |
| **మోడల్ డైలాగ్** | విజయ సందేశంతో మోడల్ డైలాగ్ బాక్స్ చూపించండి | ఆధునిక UI నమూనాలు మరియు సులభత |
| **హై స్కోరు సిస్టమ్** | `localStorage` ఉపయోగించి హై స్కోర్లు నిల్వ చేయండి | బ్రౌజర్ నిల్వ APIs మరియు డేటా కొనసాగింపు |
**అమలులో సూచనలు:**
- **కొంచెం అన్వేషించండి** `localStorage.setItem()` మరియు `localStorage.getItem()` గురించి స్థిర నిల్వ కొరకు
- **ప్రాక్టీస్ చేయండి** ఈవెంట్ లిసనర్లని గమనించి జోడించడం మరియు తీసివేత
- **HTML డైలాగ్ ఎలిమెంట్లు లేదా CSS మోడల్ నమూనాలను** అన్వేషించండి
- **ఫారమ్ నియంత్రణలను డిసేబుల్ / ఎనేబుల్ చేసే సమయాల్లో సులభత‌ను** పరిగణించండి
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/22)
---
## 🚀 మీ టైపింగ్ ఆట నైపుణ్యాల కాలక్రమం
### ⚡ **మీరు తరువాత 5 నిమిషాలలో చేయగలరు**
- [ ] వివిధ اقتبాస్లతో మీ typing ఆటను పరీక్షించండి
- [ ] CSS శైలులను మార్చి హైలైట్ మరియు లోపం రంగులు మార్చండి
- [ ] బ్రౌజర్ DevTools (F12) తెరుచుకొని Console చూడండి
- [ ] ఒక اقتبాసునందు అత్యంత వేగంగా టైపు చేయవలసిన సామర్ధ్యాన్ని సవాలు చేసుకోండి
### ⏰ **ఈ గంటలో మీరు సాధించగలరు**
- [ ] పోగులేని اقتబాస్లను జోడించండి (మీకి ఇష్టమైన పుస్తకాలు లేదా సినిమాల నుంచి)
- [ ] చాలెంజ్ సెక్షన్ లో localStorage హై స్కోర్ సిస్టమ్ అమలు చేయండి
- [ ] ప్రతి ఆట తర్వాతWords per minute క్యాల్క్యులేటర్ చూపించండి
- [ ] సరైన టైపింగ్, లోపాలు మరియు పూర్తి చేసేందుకు శబ్ద ప్రభావాలు జోడించండి
### 📅 **మీ వారాంత ప్రయాణం**
- [ ] మల్టీప్లేయర్ వర్షన్ నిర్మించండి, స్నేహితులు పక్కనపక్కనే పోటీ పడతారు
- [ ] వివిధ కఠినత్వ స్థాయిలు రూపొందించండి వివిధ اقتبాస్ల క్లిష్టతతో
- [ ] اقتبాసు ఎంత పూర్తయిందో చూపించే ప్రగతిబార్ జోడించండి
- [ ] వ్యక్తిగత గణాంకాలు ట్రాక్ చేసే యూజర్ ఖాతాలు అమలు చేయండి
- [ ] కస్టమ్ థీమ్ డిజైన్ చేసి యూజర్లకు వారి ఇష్టమైన శైలిని ఎంచుకోవడానికి అవకాశం ఇవ్వండి
### 🗓️ **మీ నెలంత ప్రయాణం**
- [ ] సరైన వేళల వేడి వేయడాన్ని తెలుసుకునే శిక్షణా పాఠాలు కలిగిన టైపింగ్ కోర్సులు సృష్టించండి
- [ ] ఏ అక్షరాలు లేదా పదాలు ఎక్కువగా లోపం కలిగిస్తున్నాయి అనేది చూపించే విశ్లేషణ పరికరాలు రూపొందించండి
- [ ] భిన్న భాషలు మరియు కీబోర్డ్ లేఅవుట్లకు మద్దతు జోడించండి
- [ ] సాహిత్య డేటాబేసుల నుంచి اقتబాస్లు తెచ్చే విద్యా APIsతో సహకరించండి
- [ ] మీ మెరుగుపరచబడిన టైపింగ్ ఆటను ఇतरులకు ఉపయోగించేలా ప్రచురించండి
### 🎯 **చివరి ఆలోచన పరిక్ష**
**ముందుకు వెళ్లేముందు, వీలైతే ఈ క్షణాలను ఆనందించండి:**
- ఈ ఆటను సృష్టించే సమయంలో అత్యంత సంతృప్తికరమైన క్షణం ఏది?
- ఈవెంట్-నిర్దేశిత ప్రోగ్రామింగ్ పట్ల మీరు ఇప్పటి భావిస్తున్నది మొదటి సారి ప్రారంభించినప్పుడు ఎలా ఉంది?
- ఈ ఆటను ప్రత్యేకంగా మార్చే ఏ ఫీచర్ జోడించదలచుకున్నారు?
- ఈవెంట్ హ్యాండ్లింగ్ సూత్రాలను ఇతర ప్రాజెక్టుల్లో ఎలా ప్రయోగిస్తారు?
```mermaid
journey
title మీ ఈవెంట్ ప్రోగ్రామింగ్ నమ్మకం ప్రయాణం
section Today
ఈవెంట్లను అర్థం చేసుకోవడం: 3: You
UI రూపొందించడం: 4: You
ఈవెంట్ లిసనర్లను రాయడం: 5: You
section This Week
ఫీచర్లను జోడించడం: 4: You
లోపాలను డిబగ్ చేయడం: 5: You
UX మెరుగుపరుచడం: 4: You
section Next Month
సంక్లిష్ట యాప్‌ల నిర్మాణం: 5: You
ఇతరులకు బోధించడం: 5: You
ఫ్రేమ్‌వర్క్‌ల సృష్టించడం: 5: You
```
> 🌟 **మరుస్తవద్దు**: మీరు ఇప్పుడు ప్రతిస్పందనీయ వెబ్‌సైట్లను మరియు అప్లికేషన్‌లను సాధన చేసే కోర్ కాన్సెప్ట్స్ లో ఒకటి నేర్చుకున్నారు. ఈవెంట్-డ్రైవన్ ప్రోగ్రామింగ్ వెబ్‌ను జీవంతం గా, స్పందనీయంగా మారుస్తుంది. ప్రతిసారి మీరు డ్రాప్‌డౌన్ మెనూ, టైప్ చేస్తున్నప్పుడు ధృవీಕರಣ ఫారం, లేదా మీ క్లిక్‌లకు స్పందించే ఆట చూస్తే, మీరు ఇప్పుడు దాని వెనుక మాయాజాలాన్ని అర్థం చేసుకున్నారు. మీరు కేవలం కోడ్ నేర్చుకుంటూ కాకుండా అనుభవాలను సృష్టిస్తున్నారు! 🎉
---
## సమీక్ష & స్వయంఅధ్యయనం
[అన్ని ఈవెంట్లు తెలుసుకోండి](https://developer.mozilla.org/docs/Web/Events) వెబ్ బ్రౌజర్ ద్వారా డెవలపర్‌కు అందుబాటులో వున్నవి, మరియు మీరు ప్రతి ఒక్కటి ఎప్పుడు ఉపయోగించాలో ఆలోచించండి.
## అసైన్‌మెంట్
[కొత్త కీబోర్డ్ గేమ్ సృష్టించండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టతా ప్రకటనా**:
ఈ దస్తావేజు AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము నిర్దిష్టత కోసం ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో పొరపాట్లు లేదా తప్పుదోవలు ఉండవచ్చును అన్న దాన్ని దయచేసి గమనించండి. స్థానిక భాషలో ఉన్న మూల दस्तावेजం అధికారిక మూలంగా భావించాలి. అత్యవసర సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం వలన కలిగే ఏవైనా అపార్థాలు లేదా తప్పుగా అర్థం చేసుకోబడటం కోసం మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

57
translations/te/4-typing-game/typing-game/assignment.md
Unescape View File

@ -0,0 +1,57 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3eac59d70e2532a677a2ce6bf765485a",
"translation_date": "2026-01-08T18:23:16+00:00",
"source_file": "4-typing-game/typing-game/assignment.md",
"language_code": "te"
}
-->
# కొత్త కీబోర్డ్ గేమ్ సృష్టించండి
## సూచనలు
ఇప్పుడు మీరు టైపింగ్ గేమ్‌తో ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్ మౌలికాలను నిపుణతతో నేర్చుకున్నప్పుడు, మీ సృజనాత్మకతను విడుదల చేయక్కర్ సమయం వచ్చింది! ఈవెంట్ హ్యాండ్లింగ్, DOM మానిప్యులేషన్, మరియు యూజర్ ఇంటరాక్షన్ నమూనాలపై మీ అవగాహనను ప్రదర్శించే మీ స్వంత కీబోర్డ్-ఆధారిత గేమ్‌ని డిజైన్ చేసి నిర్మించండి.
నిర్ధిష్ట కార్యాలు సాధించడానికి కీబోర్డ్ ఈవెంట్లు ఉపయోగించే చిన్న గేమ్‌ను సృష్టించండి. ఇది వేరే రకమైన టైపింగ్ గేమ్, కీవ్రోకులపై స్క్రీన్‌కి పిక్సెల్స్ పెయింట్ చేసే ఆర్ట్ అప్లికేషన్, హెడ్డుతిరుగు కీలు ఉపయోగించి నియంత్రించే సాదా ఆర్కేడ్-స్టైల్ గేమ్, లేదా మీరు ఊహించగలిగే మరేదైనా సృజనాత్మక భావన కావచ్చు. సృజనాత్మకంగా ఆలోచించండి, వేరే కీలు వేరే ప్రవర్తనలను ఎలా ప్రేరేపించగలవో పరిశీలించండి!
**మీ గేమ్‌లో ఉండాలి:**
| అవసరం | వివరణ | ఉద్దేశ్యం |
|-------------|-------------|---------|
| **ఈవెంట్ లిసనర్లు** | కనీసం 3 వేర్వేరు కీబోర్డ్ ఈవెంట్లకు స్పందించాలి | ఈవెంట్ హ్యాండ్లింగ్ అవగాహన ప్రదర్శించాలి |
| **దృశ్య ప్రతిస్పందన** | యూజర్ ఇన్‌పుట్కి తక్షణ దృశ్య ప్రతిస్పందన ఇవ్వాలి | DOM మానిప్యులేషన్ లో నైపుణ్యం చూపించాలి |
| **గేమ్ లాజిక్** | స్కోరింగ్, స్థాయిలు, లేదా పురోగతి మెకానిక్స్ చేర్చాలి | అప్లికేషన్ స్థితిని అమలు చేయడంలో పట్టు సాధించాలి |
| **యూజర్ ఇంటర్ఫేస్** | స్పష్టమైన సూచనలు మరియు సుల భ ప్రయోగకర నియంత్రణలు ఉండాలి | యూజర్ అనుభవ డిజైన్ నైపుణ్యాలను అభివృద్ధి చేయాలి |
**ప్రత్యేక సృజనాత్మక ప్రాజెక్ట్ ఆలోచనలు:**
- **రిథమ్ గేమ్**: ఆటగాళ్లు సంగీతం లేదా దృశ్య సూచనలతో సమయానుకూలంగా కీలు నొక్కతారు
- **పిక్సెల్ ఆర్ట్ క్రియేటర్**: వేర్వేరు కీలు వేర్వేరు రంగులు లేదా నమూనాలను పెయింట్ చేస్తాయి
- **వర్డ్ బిల్డర్**: ఆటగాళ్లు నిర్దిష్ట క్రమంలో అక్షరాలను టైప్ చేసి పదాలు సృష్టిస్తారు
- **స్నేక్ గేమ్**: హెడ్డుతిరుగు కీలు ఉపయోగించి స్నేక్ ని నియంత్రించి అంశాలను సేకరించండి
- **మ్యూజిక్ సింథेसైజర్**: వేర్వేరు కీలు వేర్వేరు సంగీత నోట్లను లేదా శబ్దాలను ప్లే చేస్తాయి
- **స్పీడ్ టైపింగ్ వేరియంట్స్**: శాఖాపరమైన టైపింగ్ (ప్రోగ్రామింగ్ పదాలు, విదేశీ భాషలు)
- **కీబోర్డ్ డ్రమ్మర్**: కీలను వేర్వేరు డ్రమ్ శబ్దాలకు మ్యాపింగ్ చేసి బీట్స్ సృష్టించండి
**అమలు సూచనలు:**
- **సాధారణ కాన్సెప్ట్‌తో ప్రారంభించి సాంక్లిష్టతను మెల్లగా పెంచండి**
- **సహజంగా అనిపించే సాఫీ, స్పందనీయ నియంత్రణలపై దృష్టి సారించండి**
- **గేమ్ స్థితి మరియు ఆటగాడు పురోగతి కి స్పష్టమైన దృశ్య సూచికలను మిగులు చూపించండి**
- **వివిధ వినియోగదారులతో మీ గేమ్‌ను పరీక్షించి, సులభమైన గేమ్ప్లే ఉండో లేదో ధృవీకరించండి**
- **ఈవెంట్ హ్యాండ్లింగ్ వ్యూహాన్ని వివరించే వ్యాఖ్యలతో మీ కోడ్‌ను డాక్యుమెంట్ చేయండి**
## మానదండం
| ప్రమాణం | ఉదా రణాత్మక | సరిపోయేలా | మెరుగుపరుచుకోవాలి |
| -------- | --------- | -------- | ----------------- |
| **ఫంక్షనాలిటీ** | బహుముఖ లక్షణాలు మరియు సాఫీ గేమ్ప్లే ఉన్న పూర్తి, మెరుగైన గేమ్ | కీబోర్డ్ ఈవెంట్ హ్యాండ్లింగ్‌ను ప్రదర్శించే బేసిక్ లక్షణాలతో పని చేసే గేమ్ | పరిమిత ఫంక్షనాలిటీ లేదా గంభీర బగ్గిళ్లతో కనీస అమలు |
| **కోడ్ నాణ్యత** | మంచి అమర్చబడిన, వ్యాఖ్యలతో కూడిన కోడ్, ఉత్తమ ఆచారాలతో మరియు సమర్థవంతమైన ఈవెంట్ హ్యాండ్లింగ్ తో | ఈవెంట్ లిసనర్ల మరియు DOM మానిప్యులేషన్ యొక్క సరైన ఉపయోగంతో శుభ్రమైన చదవగలిగే కోడ్ | కొంత ఆర్గనైజేషన్ సమస్యలు లేదా సమర్థవంతమైన అమలులేని ప్రాథమిక కోడ్ నిర్మాణం |
| **యూజర్ అనుభవం** | సులభమైన నియంత్రణలు, స్పష్టమైన ఫీడ్బ్యాక్, మరియు అంతర్జాలంలో నైపుణ్యం గేమ్ప్లే | సమర్థవంతమైన ఇంటర్ఫేస్, తగిన వినియోగదారుల గైడెన్స్ మరియు స్పందన నియంత్రణలు | క్లియర్ కాని సూచనలు లేదా తక్కువ స్పందనీయతతో ప్రాథమిక ఇంటర్ఫేస్ |
| **సృజనాత్మకత** | కీబోర్డ్ ఈవెంట్ల వినూత్న వినియోగం మరియు సృజనాత్మక సమస్య పరిష్కారంతో ఆరిజనల్ భావన | సాధారణ గేమ్ నమూనాలపై ఆసక్తికరమైన వైవిధ్యంతో మంచి ఈవెంట్ హ్యాండ్లింగ్ ఉపయోగం | కనీస సృజనాత్మక అంశాలతో ప్రాథమిక భావన సరళమైన అమలు |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ఫెడిక్లైమర్**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వాన్ని నిర్ధారించేందుకు ప్రయత్నిస్తుంటే కూడా, స్వయంచాలక అనువాదాలలో పొరపాట్లు లేదా అసత్యతలు ఉండవచ్చు అనే అంశాన్ని దయచేసి గుర్తుంచుకోండి. మాతృ భాషలో ఉన్న అసలు డాక్యుమెంట్‌ను అధికారిక మూలంగా పరిగణించాలి. కీలక సమాచారం కోసం, నిపుణుల చేతి అనువాదం సూచించబడుతుంది. ఈ అనువాదం వల్ల కలగనున్న ఏవైనా అవగాహన లోపాలు లేదా తప్పుగా అర్థం చేసుకోవడాలపై మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

555
translations/te/5-browser-extension/1-about-browsers/README.md
Unescape View File

@ -0,0 +1,555 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "00aa85715e1efd4930c17a23e3012e69",
"translation_date": "2026-01-08T15:41:20+00:00",
"source_file": "5-browser-extension/1-about-browsers/README.md",
"language_code": "te"
}
-->
# బ్రౌజర్ ఎక్స్‌టెన్షన్ ప్రాజెక్ట్ భాగం 1: బ్రౌజర్ల గురించి అంతా
```mermaid
journey
title మీ బ్రౌజర్ ఎక్స్‌టెన్షన్ అభివృద్ధి యాత్ర
section Foundation
బ్రౌజర్లను అర్థం చేసుకోండి: 3: Student
ఎక్స్‌టెన్షన్ రకాలను నేర్చుకోండి: 4: Student
అభివృద్ధిని సెటప్ చేయండి: 4: Student
section Development
ఇంటర్‌ఫేస్ నిర్మించండి: 4: Student
కార్యాచరణను జోడించండి: 5: Student
డేటాను నిర్వహించండి: 5: Student
section Integration
బ్రౌజర్‌లో పరీక్షించండి: 5: Student
ఇబ్బందులను డీబగ్ చేయండి: 4: Student
అనుభవాన్ని మెరుగు పరచండి: 5: Student
```
![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84a.te.jpg)
> స్కెచ్నోట్ ద్వారా [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## ప్రీ-లెక్చర్ క్విజ్
[ప్రీ-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/23)
### పరిచయం
బ్రౌజర్ ఎక్స్‌టెన్షన్లు మీ వెబ్ బ్రౌజింగ్ అనుభవాన్ని మెరుగుపరచే మినీ-యాప్స్. టిమ్ బర్నర్స్-లి యొక్క ఇంటరాక్టివ్ వెబ్ యొక్క అసలు దృష్టిని పోలి, ఎక్స్‌టెన్షన్లు బ్రౌజర్ సామర్థ్యాలను సాధారణ డాక్యుమెంట్ వీక్షణకి మించిఉంచుతాయి. మీ ఖాతాలను సురక్షితం చేసుకునే పాస్‌వర్డ్ మేనేజర్ల నుండి డిజైనర్లకు తగిన రంగులు ఎంచుకోడానికి సహాయపడే కలర్ పికర్ల వరకు, ఎక్స్‌టెన్షన్లు ప్రతి రోజూ ఎదురయ్యే బ్రౌజింగ్ సమస్యలను పరిష్కరిస్తాయి.
మీరెలాగైనా మీ మొదటి ఎక్స్‌టెన్షన్‌ను నిర్మించేముందు, బ్రౌజర్లు ఎలా పని చేస్తాయో అర్థం చేసుకుందాం. అలెగ్జాండర్ గ్రాహం బెల్ల్ ఫోన్ ఆవిష్కరణకు ముందు సౌండ్ ట్రాన్స్మిషన్ అర్థం చేసుకోవలసినట్టు, బ్రౌజర్ ప్రాథమిక అంశాల జ్ఞానం మీ ఎక్స్‌టెన్షన్లు బ్రౌజర్ సిస్టమ్స్‌తో సజావుగా ఇంటిగ్రేట్ అయ్యేందుకు సహాయపడుతుంది.
ఈ పాఠం చివరికి, మీరు బ్రౌజర్ నిర్మాణాన్ని అర్థం చేసుకుంటారు మరియు మీ మొదటి ఎక్స్‌టెన్షన్ నిర్మాణాన్ని ప్రారంభిస్తారు.
```mermaid
mindmap
root((బ్రౌజర్ ఆర్కిటెక్చర్))
Core Components
Rendering Engine
JavaScript Engine
Network Stack
Storage APIs
User Interface
చిరునామా బార్
ట్యాబ్ నిర్వహణ
బుక్‌మార్క్లు
ఎక్స్‌టెన్షన్ చిహ్నాలు
Extension System
మానిఫెస్ట్ ఫైళ్లు
కంటెంట్ స్క్రిప్టులు
బ్యాక్‌గ్రౌండ్ పేజీలు
పాప్-అప్ విండోలు
Security Model
సామ-Origin పాలసీ
అనుమతులు API
కంటెంట్ సెక్యూరిటీ
ఐసోలేటెడ్ వరల్డ్స్
Development Tools
DevTools సమగ్రం
డీబగ్ కన్సోల్
పనితీరు మానిటర్
ఎక్స్‌టెన్షన్ ఇన్స్పెక్టర్
```
## వెబ్ బ్రౌజర్లను అర్థం చేసుకోవడం
వెబ్ బ్రౌజర్ అనేది బేసిక్‌గా ఒక కాంప్లెక్సు డాక్యుమెంట్ ఇంటర్‌ప్రెటర్. మీరు అడ్రస్ బార్‌ లో "google.com" టైప్ చేసినప్పుడు, బ్రౌజర్ ప్రపంచవ్యాప్త సర్వర్ల నుండి కంటెంట్‌ను అభ్యర్థిస్తూ, ఆ కోడ్‌ను పార్స్ చేసి, మీరు చూడగల ఇంటరాక్టివ్ వెబ్ పేజీలుగా రీండ్ర్ చేయడంలో సంక్లిష్ట కార్యకలాపాలు చేస్తుంది.
ఈ ప్రక్రియ మొదటి వెబ్ బ్రౌజర్, వర్డ్ వైడ్ వెబ్‌ను 1990లో టిమ్ బర్నర్స్-లీ నుండి రూపొందించిన విధానాన్ని ప్రతిబింబిస్తుంది, అది హైపర్లింక్ డాక్యుమెంట్లను అందరికి అందుబాటులోకి తీసుకురావడానికి రూపొందించబడింది.
✅ **చిన్న చరిత్ర**: మొదటి బ్రౌజర్ 'WorldWideWeb' అని పిలవబడింది మరియు ఇది సర్ టిమోథీ బర్నర్స్-లీ 1990లో సృష్టించారు.
![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.te.jpg)
> కొన్ని ప్రారంభ బ్రౌజర్లు, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ద్వారా
### బ్రౌజర్లు వెబ్ కంటెంట్‌ను ఎలా ప్రాసెస్ చేస్తాయి
URL Toll నిర్ణీత వెబ్‌పేజీ చూపించడానికి మనం దిగిరాణించి కొన్ని సమన్వయ పద్ధతులను కొన్ని సెకన్లలో చేస్తుంది:
```mermaid
sequenceDiagram
participant User
participant Browser
participant Extension
participant DNS
participant Server
User->>Browser: URL టైపు చేసి ఎంటర్ నొక్కండి
Browser->>Extension: beforeRequest ఈవెంట్‌ను ట్రిగ్గర్ చేయండి
Extension->>Extension: URL లో మార్పు అవసరమో చూడండి
Browser->>DNS: సర్వర్ IP చిరునామాను చూడండి
DNS->>Browser: IP చిరునామా రిటర్న్ చేయండి
Browser->>Server: వెబ్ పేజీ కంటెంట్ కోరిక చేయండి
Server->>Browser: HTML, CSS, మరియు JavaScript పంపండి
Browser->>Extension: beforeResponse ఈవెంట్‌ను ట్రిగ్గర్ చేయండి
Extension->>Extension: అవసరమైతే కంటెంట్ మార్చండి
Browser->>User: పూర్తి వెబ్ పేజీని ప్రదర్శించండి
Extension->>User: ఎక్స్‌టెన్షన్ UI అప్డేట్‌లను చూపండి
```
**ఈ ప్రక్రియ ఏమి చేస్తుందో ఇది:**
- **DNS లుకప్ ద్వారా** మానవ-readable URLని సర్వర్ IP అడ్రస్‌కి అనువదిస్తుంది
- **HTTP లేదా HTTPS ప్రోటోకాల్ ఉపయోగించి** వెబ్ సర్వర్‌తో సురక్షిత కనెక్షన్ ఏర్పాటు చేస్తుంది
- **సర్వర్ నుండి** నిర్దిష్ట వెబ్ పేజీ కంటెంట్ కోసం అభ్యర్థన చేస్తుంది
- **సర్వర్ నుండి** HTML మార్కప్, CSS స్టైలింగ్, మరియు JavaScript కోడ్‌ను అందుకుంటుంది
- **అన్ని కంటెంట్‌ను** మీరు చూస్తున్న ఇంటరాక్టివ్ వెబ్ పేజీగా రీండ్ర్ చేస్తుంది
### బ్రౌజర్ ముఖ్య ఫీచర్లు
ఆధునిక బ్రౌజర్లు ఎక్స్‌టెన్షన్ డెవలపర్లు ఉపయోగించగల అనేక ఫీచర్లను అందిస్తాయి:
| ఫీచర్ | ప్రయోజనం | ఎక్స్‌టెన్షన్ అవకాశాలు |
|---------|---------|------------------------|
| **రీండ్రరింగ్ ఇంజన్** | HTML, CSS, JavaScript ప్రదర్శిస్తుంది | కంటెంట్ మార్పిడి, స్టైలింగ్ ఇంజెక్షన్ |
| **JavaScript ఇంజన్** | JavaScript కోడ్ 실행్ చేస్తుంది | స్వంత స్క్రిప్టులు, API ఇంటరాక్షన్స్ |
| **లోకల్ స్టోరేజ్** | స్థానికంగా డేటా సేవ్ చేస్తుంది | యూజర్ ప్రిఫరెన్సులు, క్యాష్ డేటా |
| **నెట్‌వర్క్ స్టాక్** | వెబ్ అభ్యర్థనలు నిర్వహిస్తుంది | అభ్యర్థన మానిటరింగ్, డేటా విశ్లేషణ |
| **సెక్యూరిటీ మోడల్** | దుష్ట కంటెంట్ నుండి యూజర్లను రక్షిస్తుంది | కంటెంట్ ఫిల్టరింగ్, సెక్యూరిటీ మెరుగుదలలు |
**ఈ ఫీచర్లను అర్థం చేసుకోవడం మీకు:**
- మీ ఎక్స్‌టెన్షన్ అక్కడ ఎక్కువ విలువ చేర్చగలదో గుర్తించే అవకాశం
- మీ ఎక్స్‌టెన్షన్ ఫంక్షనాలిటీకి సరైన బ్రౌజర్ APIలను ఎంచుకునే అవకాశం
- బ్రౌజర్ వ్యవస్థలతో సమర్థవంతంగా పని చేసే ఎక్స్‌టెన్షన్లను రూపొందించే అవకాశం
- మీ ఎక్స్‌టెన్షన్ బ్రౌజర్ సెక్యూరిటీ ఉత్తమ విధానాలను అనుసరిస్తుందనే నిర్ధారణ
### క్రాస్-బ్రౌజర్ డెవలప్‌మెంట్ పరిగణనలు
విభిన్న బ్రౌజర్లు సాందర్బాల అమలులో తక్కువ తేడాలతో ఉంటాయి, విధానాలు కొంత భిన్నంగా ఉంటాయి, అదే విధంగా వేర్వేరు ప్రోగ్రామింగ్ భాషలు ఒకే అల్గోరిథమ్‌ని వేరుగా నిర్వహించేలా. క్రోమ్, ఫైర్‌ఫాక్స్, మరియు సఫారి ప్రతి ఒక్కటి డెవలపర్లకు పరిగణనలోకి తీసుకోవాల్సిన ప్రత్యేక లక్షణాలు కలిగి ఉంటాయి.
> 💡 **ప్రొ టిప్**: వివిధ బ్రౌజర్లలో ఏ వెబ్ టెక్నాలజీలు మద్దతు పొందుతున్నాయో తెలుసుకోవడానికి [caniuse.com](https://www.caniuse.com) ను ఉపయోగించండి. ఇది మీ ఎక్స్‌టెన్షన్ ఫీచర్స్ ప్లానింగ్‌లో అమూల్యంగా ఉంటుంది!
**ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్ కీలక పరిగణనలు:**
- క్రోమ్, ఫైర్‌ఫాక్స్, ఎడ్జ్ బ్రౌజర్‌లపై మీ ఎక్స్‌టెన్షన్‌ను పరీక్షించండి
- వేరే బ్రౌజర్ ఎక్స్‌టెన్షన్ APIలు మరియు మానిఫెస్ట్ ఫార్మాట్లు అనుసరించండి
- ప్రదర్శన లక్షణాలు, పరిమితులు వేరుగా ఉంటాయనీ చూసుకోండి
- అందుబాటులో లేకపోవచ్చు అనుకున్న బ్రౌజర్-స్పెసిఫిక్ ఫీచర్లకు ప్రత్యామ్నాయాలు అందించండి
✅ **విశ్లేషణ సూచన**: మీరు ఏ బ్రౌజర్లను ఎక్కువగా వినియోగిస్తున్నారు అనేది తెలుసుకోవడానికి, వెబ్ అభివృద్ధి ప్రాజెక్ట్లలో విశ్లేషణ ప్యాకేజీలు ఇన్‌స్టాల్ చేయండి. ఈ డేటా మీకు మొదటి ప్రాధాన్యంగా ఏ బ్రౌజర్లను మద్దతు ఇవ్వాలో నిర్ణయించడంలో సహాయపడుతుంది.
## బ్రౌజర్ ఎక్స్‌టెన్షన్స్ అర్థం చేసుకోవడం
బ్రౌజర్ ఎక్స్‌టెన్షన్లు సాధారణ వెబ్ బ్రౌజింగ్ సమస్యలను బ్రౌజర్ ఇంటర్‌ఫేస్‌కి నేరుగా ఫంక్షనాలిటీ జత చేయడం ద్వారా పరిష్కరిస్తాయి. ప్రత్యేక యాప్స్ లేదా సంక్లిష్ట వర్క్‌ఫ్లోలను అవసరం లేకుండా, ఎక్స్‌టెన్షన్లు టూల్స్, ఫీచర్స్‌కె తక్షణ యాక్సెస్ ఇస్తాయి.
ఈ భావన డగ్లస్ ఎంగెల్‌బార్ట్ వంటి ఐటి పయనికులు మానవ సామర్థ్యాలను సాంకేతికతతో పెంచే విధానాన్ని ప్రతిబింబిస్తుంది - ఎక్స్‌టెన్షన్లు మీ బ్రౌజర్ యొక్క ప్రాథమిక సామర్థ్యాలను పెంచుతాయి.
```mermaid
quadrantChart
title బ్రౌజర్ విస్తరణ వర్గాలు
x-axis సులభం --> క్లిష్టం
y-axis వ్యక్తిగత ఉపయోగం --> వృత్తిపరమైన工具లు
quadrant-1 డెవలపర్ టూల్స్
quadrant-2 ఎంటర్ప్రైజ్ సొల్యూషన్స్
quadrant-3 వ్యక్తిగత యుటిలిటీస్
quadrant-4 ఉత్పాదకత యాప్స్
Ad Blockers: [0.3, 0.2]
Password Managers: [0.7, 0.3]
Color Pickers: [0.4, 0.8]
Code Formatters: [0.8, 0.9]
Note Taking: [0.6, 0.5]
Video Downloaders: [0.5, 0.2]
Time Trackers: [0.7, 0.6]
Screenshot Tools: [0.4, 0.4]
```
**ప్రసిద్ధ ఎక్స్‌టెన్షన్ వర్గాలు మరియు వాటి ప్రయోజనాలు:**
- **ఉత్పాదకత టూల్స్**: టాస్క్ మేనేజర్లు, నోట్-తీయడం యాప్స్, టైమ్ ట్రాకర్లు, అవి మీను ఏర్పాటు చేసుకునేందుకు సహాయం చేస్తాయి
- **సెక్యూరిటీ ఆప్టిమైజేషన్లు**: పాస్‌వర్డ్ మేనేజర్లు, యాడ్ బ్లిట్టర్స్, ప్రైవసీ టూల్స్, ఇవి మీ డేటాను రక్షిస్తాయి
- **డెవలపర్ టూల్స్**: కోడ్ ఫార్మాటర్స్, కలర్ పికర్స్, మరియు డీబగింగ్ యుటిలిటీజిలు అభివృద్ధిని సులభం చేస్తాయి
- **కంటెంట్ మెరుగుదల**: రీడింగ్ మోడ్లు, వీడియో డౌన్లోడర్లు, స్క్రీన్‌షాట్ టూల్స్, ఇవి మీ వెబ్ అనుభవాన్ని మెరుగుపరుస్తాయి
✅ **ప్రతిబింబ ప్రశ్న**: మీకు ఇష్టమైన బ్రౌజర్ ఎక్స్‌టెన్షన్లు ఏమిటి? అవి ఏ విధమైన పనులు చేస్తాయి, మరియు మీ బ్రౌజింగ్ అనుభవాన్ని ఎలా మెరుగు పరుస్తాయి?
### 🔄 **పాఠ శాస్త్రీయ చెక్-ఇన్**
**బ్రౌజర్ నిర్మాణ అవగాహన**: ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్‌కు ముందుగా, మీరు ఈ విషయాలను ఖచ్చితంగా అర్థం చేసుకోవాలి:
- ✅ బ్రౌజర్లు వెబ్ అభ్యర్థనలు ఎలా ప్రాసెస్ చేసి కంటెంట్‌ని రీంద్ర్ చేస్తాయి వివరించగలగాలి
- ✅ బ్రౌజర్ నిర్మాణపు ప్రాముఖ్య భాగాలను గుర్తించగలగాలి
- ✅ ఎక్స్‌టెన్షన్లు బ్రౌజర్ ఫంక్షనాలిటీతో ఎలా ఇంటిగ్రేట్ అవుతాయో అర్థం చేసుకోవాలి
- ✅ యూజర్లను రక్షించే సెక్యూరిటీ మోడల్‌ను గుర్తించగలగాలి
**త్వరిత స్వీయ పరీక్ష**: URL టైప్ చేసి వెబ్ పేజీ చూసే దారిని మీరు ట్రేస్ చేయగలరా?
1. **DNS లుకప్** URLని IP అడ్రస్‌గా మారుస్తుంది
2. **HTTP అభ్యర్థన** సర్వర్ నుండి కంటెంట్‌ను తెస్తుంది
3. **పార్సింగ్** HTML, CSS, JavaScript ప్రాసెస్ చేస్తుంది
4. **రీండ్రింగ్** ఆఖరి వెబ్ పేజీని ప్రదర్శిస్తుంది
5. **ఎక్స్‌టెన్షన్‌లు** అనేక దశలలో కంటెంట్‌ను మార్చగలవు
## ఎక్స్‌టెన్షన్స్ ఇన్‌స్టాల్ చేయడం మరియు నిర్వహణ
ఎక్స్‌టెన్షన్ ఇన్‌స్టాలేషన్ ప్రక్రియను అర్థం చేసుకోవడం, ప్రజలు మీరు తయారు చేసిన ఎక్స్‌టెన్షన్‌ను ఇన్‌స్టాల్ చేయేటప్పుడు ఉపయోగపడే అనుభవాన్ని ఊహించడానికి సహాయం చేస్తుంది. ఆధునిక బ్రౌజర్లలో ఈ ఇన్‌స్టాలేషన్ ప్రక్రియ సాధారణంగా ఉంటుంది, చర్యల రూపరేఖలో స్వల్ప మార్పులుంటాయి.
![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.te.png)
> **మరియు ముఖ్యమైనది**: మీ స్వంత ఎక్స్‌టెన్షన్లను పరీక్షించే సమయంలో డెవలపర్ మోడ్ ఆన్ చేసి, ఇతర స్టోర్స్ నుంచి ఎక్స్‌టెన్షన్స్ అనుమతి ఇవ్వడం మర్చిపోకండి.
### డెవలప్‌మెంట్ ఎక్స్‌టెన్షన్ ఇన్‌స్టాలేషన్ ప్రక్రియ
మీరు మీ స్వంత ఎక్స్‌టెన్షన్లు అభివృద్ధి చేసి పరీక్షిస్తున్నప్పుడు, ఈ వర్క్‌ఫ్లో అనుసరించండి:
```mermaid
flowchart TD
A[కోడ్ వ్రాయండి] --> B[ఎక్స్‌టెన్షన్ నిర్మించండి]
B --> C{మొదటే ఇన్‌స్టాల్ చేస్తున్నారా?}
C -->|అవును| D[అన్ ప్యాక్ లోడ్ చేయండి]
C -->|కాదు| E[ఎక్స్‌టెన్షన్ రీలోడ్ చేయండి]
D --> F[ఫంక్షనాలిటీ పరీక్షించండి]
E --> F
F --> G{సరైన పనిచేస్తుందా?}
G -->|కాదు| H[ఇష్యూలు డీబగ్ చేయండి]
G -->|అవును| I[వినియోగదారులకు సిద్ధంగా ఉంది]
H --> A
I --> J[స్టోర్‌లో ప్రచురించండి]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#f3e5f5
style J fill:#fff3e0
```
```bash
# దశ 1: మీ విస్తరణను నిర్మించండి
npm run build
```
**ఈ కమాండ్ ఏమి చేస్తుంది:**
- **మీ సోర్స్ కోడ్‌ను బ్రౌజర్-సిద్ధమైన ఫైల్స్‌గా కాంపైల్ చేస్తుంది**
- **JavaScript మాడ్యూల్స్‌ను ఆప్టిమైజ్డ్ ప్యాకెజిలుగా బండిల్ చేస్తుంది**
- **ఫైనల్ ఎక్స్‌టెన్షన్ ఫైళ్ళను `/dist` ఫోల్డర్‌లో ఉత్పత్తి చేస్తుంది**
- **ఇన్‌స్టాలేషన్, పరీక్షకు మీ ఎక్స్‌టెన్షన్‌ను సిద్ధం చేస్తుంది**
**దశ 2: బ్రౌజర్ ఎక్స్‌టెన్షన్స్ పేజీకి వెళ్లండి**
1. మీ బ్రౌజర్ యొక్క ఎక్స్‌టెన్షన్ నిర్వహణ పేజీని తెరవండి
2. పై-కుడిమీతంగా ఉన్న "సెట్టింగ్స్ మరియు మరిన్ని" బటన్ (`...` ఐకాన్) నొక్కండి
3. డ్రాప్‌డౌన్ మెనూ నుండి "Extensions" ఎంచుకోండి
**దశ 3: మీ ఎక్స్‌టెన్షన్ ను లోడ్ చేయండి**
- **కొత్త ఇన్‌స్టాలేషన్ల కోసం**: `load unpacked` ఎంచుకొని మీ `/dist` ఫోల్డర్ ని సెలెక్ట్ చేయండి
- **అప్‌డేట్‌ల కోసం**: ఇప్పటికే ఇన్‌స్టాల్ చేసిన ఎక్స్‌టెన్షన్ పక్కన `reload` క్లిక్ చేయండి
- **పరీక్ష కోసం**: అదనపు డీబగ్గింగ్ ఫీచర్లు కోసం "Developer mode" ను ఆన్ చేయండి
### ప్రొడక్షన్ ఎక్స్‌టెన్షన్ ఇన్‌స్టాలేషన్
> ✅ **గమనిక**: ఈ డెవలప్‌మెంట్ సూచనలు మీరు స్వయంగా నిర్మించే ఎక్స్‌టెన్షన్ల కోసం మాత్రమే. ఆవిష్కృత ఎక్స్‌టెన్షన్లు ఇన్‌స్టాల్ చేసుకోవడానికి అధికారిక బ్రౌజర్ ఎక్స్‌టెన్షన్ స్టోర్లు ఎలా చేరుకోవాలో చూడండి, ఉదాహరణకు [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
**తేడా సమాధానం:**
- **డెవలప్‌మెంట్ ఇన్‌స్టాలేషన్లు** అభివృద్ధి సమయంలో అపబ్లిష్ చేయని ఎక్స్‌టెన్షన్లను పరీక్షించటానికి
- **స్టోర్ ఇన్‌స్టాలేషన్లు** ఆమోదించబడిన, ప్రచురించబడిన ఎక్స్‌టెన్షన్లను ఆటోమేటిక్ అప్‌డేట్స్‌తో అందిస్తాయి
- **సైడ్ లోడింగ్** అధికారిక స్టోర్‌ల వెలుపల నుండి ఎక్స్‌టెన్షన్స్ ఇన్‌స్టాల్ చేయడానికి (డెవలపర్ మోడ్ అవసరం)
## మీ కార్బన్ ఫుట్‌ప్రింట్ ఎక్స్‌టెన్షన్‌ను నిర్మించడం
మనం నిర్మించబోయే బ్రౌజర్ ఎక్స్‌టెన్షన్ మీ ప్రాంతంలో విద్యుత్ వినియోగం ద్వారా కార్బన్ ఉద్గారాల‌ను ప్రదర్శిస్తుంది. ఈ ప్రాజెక్టు ఎక్స్‌టెన్షన్ అభివృద్ధి కీలక సూత్రాలను చూపిస్తూ, పర్యావరణ అవగాహన కోసం ప్రయోగాత్మక సాధనం తయారుచేస్తుంది.
ఈ విధానము జాన్ డ్యూయి విద్యా సిద్ధాంతాల తర్వాత ఉపయోగపడే "చేసి నేర్చుకో" సూత్రాన్ని అనుసరిస్తుంది - సాంకేతిక నైపుణ్యాలను సమగ్రమైన నిజజీవిత అనువర్తనాలతో మిళితం చేస్తుంది.
### ప్రాజెక్టు అవసరాలు
అభివృద్ధి మొదలుపెట్టే ముందు అవసరమైన వనరులు, డిపెండెన్సీస్‌ని సేకరించండి:
**అవసరమైన API ప్రాప్యత:**
- **[CO2 Signal API కీ](https://www.co2signal.com/)**: మీ ఇమెయిల్ అడ్రస్ ఇన్‌పుట్ చేసి ఉచిత API కీ పొందండి
- **[ప్రాంత కోడ్](http://api.electricitymap.org/v3/zones)**: [Electricity Map](https://www.electricitymap.org/map) ఉపయోగించి మీ ప్రాంతం కోడ్ కనుగొనండి (ఉదాహరణకి, బోస్టన్ 'US-NEISO')
**అభివృద్ధి సాధనాలు:**
- **[Node.js మరియు NPM](https://www.npmjs.com)**: ప్రాజెక్ట్ డిపెండెన్సీలను ఇన్‌స్టాల్ చేసేందుకు ప్యాకేజీ మేనేజ్మెంట్ టూల్
- **[స్టార్టర్ కోడ్](../../../../5-browser-extension/start)**: అభివృద్ధి మొదలుపెట్టేందుకు `start` ఫోల్డర్ డౌన్‌లోడ్ చేసుకోండి
✅ **ఇంకా తెలుసుకోండి**: ప్యాకేజీ మేనేజ్మెంట్ నైపుణ్యాలను మెరుగుపరచేందుకు ఈ [విస్తృత Learn మోడ్యూల్](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) ఉపయోగించండి
### ప్రాజెక్ట్ నిర్మాణాన్ని అర్థం చేసుకోవడం
ప్రాజెక్ట్ నిర్మాణం అర్థం చేసుకోవడం అభివృద్ధి పనిని సమగ్రంగా నిర్వహించడానికి సహాయపడుతుంది. అలెగ్జాండ్రియా గ్రంథాలయంలా సుసంస్కృతమైన నిర్మాణం సులభమైన జ్ఞాన అందుబాటుకు సహాయపడేది, అలాగే చక్కటి నిర్మిత కోడ్‌బేస్ అభివృద్ధిని సమర్థవంతంగా చేస్తుంది:
```
project-root/
├── dist/ # Built extension files
│ ├── manifest.json # Extension configuration
│ ├── index.html # User interface markup
│ ├── background.js # Background script functionality
│ └── main.js # Compiled JavaScript bundle
├── src/ # Source development files
│ └── index.js # Your main JavaScript code
├── package.json # Project dependencies and scripts
└── webpack.config.js # Build configuration
```
**ప్రతి ఫైల్ ఏమి చేస్తుందో వ్యాఖ్యం:**
- **`manifest.json`**: ఎక్స్‌టెన్షన్ మేటాడేటా, అనుమతులు, ఎంట్రీ పాయింట్ల నిర్వచనం
- **`index.html`**: యూజర్ ఇంటర్‌ఫేస్ సృష్టిస్తుంది, యూజర్లు ఎక్స్‌టెన్షన్ క్లిక్ చేసినప్పుడు ప్రదర్శించబడుతుంది
- **`background.js`**: బ్యాక్‌గ్రౌండ్ టాస్కులు మరియు బ్రౌజర్ ఈవెంట్ లిసనర్స్ నిర్వహిస్తుంది
- **`main.js`**: బిల్డ్ ప్రక్రియ తర్వాత తుద JavaScript బండిల్
- **`src/index.js`**: మీ ప్రధాన అభివృద్ధి కోడ్, ఇది `main.js`లోకి కాంపైల్ అవుతుంది
> 💡 **సంఘటనా సూచన**: అభివృద్ధి సమయంలో API కీ మరియు ప్రాంత కోడ్‌ను ఒక సురక్షిత నోట్లో ఉంచండి. వాటిని పరీక్షించేప్పుడు ఉపయోగించాల్సి ఉంటుంది.
✅ **సెక్యూరిటీ సూచన**: API కీలు లేదా సున్నితమైన క్రెడెన్షియల్స్‌ను కోడ్ రిపాజిటరీలో పోస్ట్ చేయవద్దు. తరువాతి దశల్లో వాటిని ఎలా సురక్షితంగా నిర్వహించాలో చూపిస్తాము.
## ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేస్ సృష్టించడం
ఇప్పుడు యూజర్ ఇంటర్‌ఫేస్ భాగాలను నిర్మిద్దాం. ఎక్స్‌టెన్షన్ రెండు-స్క్రీన్ పద్ధతిని ఉపయోగిస్తుంది: ఒకటి ఆరంభ సెటప్ ఇంగితంగా, మరొకటి ఫలితాలు చూపించదుకు.
ఈ విధానం కంప్యూటింగ్ తొలితియ్యల నుండి అనుసరించబడిన ప్రోగ్రెసివ్ డిస్క్లోజర్ సూత్రాన్ని అనుసరిస్తుంది - యూజర్లకు మించి సమాచారంతో మూర్చిపోకుండా, సమాచారం మరియు ఎంపికలను క్రమంగా ప్రదర్శించడం.
### ఎక్స్‌టెన్షన్ వీక్షణల అవలోకనం
**సెట్టప్ వీక్షణ** - మొదటి సారి ఉపయోగించే యూజర్ సెటప్:
![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491.te.png)
**ఫలితాల వీక్షణ** - కార్బన్ ఫుట్‌ప్రింట్ డేటాను చూపిస్తుంది:
![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff08042246.te.png)
### సెటప్ ఫారం నిర్మించడం
సెట్టప్ ఫారం ప్రారంభంలో యూజర్ కాన్ఫిగరేషన్ డేటాను సేకరిస్తుంది. సెటప్ పూర్తైన తర్వాత, ఈ సమాచారం బ్రౌజర్ స్టోరేజీలో నిల్వ చేస్తుంది.
`/dist/index.html` ఫైల్‌లో ఈ ఫారం నిర్మాణం చేర్చండి:
```html
<form class="form-data" autocomplete="on">
<div>
<h2>New? Add your Information</h2>
</div>
<div>
<label for="region">Region Name</label>
<input type="text" id="region" required class="region-name" />
</div>
<div>
<label for="api">Your API Key from tmrow</label>
<input type="text" id="api" required class="api-key" />
</div>
<button class="search-btn">Submit</button>
</form>
```
**ఈ ఫారం ఏమి చేస్తుంది:**
- సరైన లేబుల్‌లు మరియు ఇన్‌పుట్ అసోసియేషన్‌తో సెంటిమాంటిక్ ఫారం నిర్మిస్తుంది
- మెరుగైన యూజర్ అనుభవానికి బ్రౌజర్ ఆటోకంప్లీట్ ఫంక్షనాలిటీని సక్రియం చేస్తుంది
- `required` అట్రిబ్యూట్ ద్వారా రెండూ ఫీల్డ్‌లు తప్పనిసరిగా నింపాల్సివుంటాయి
- సులభంగా స్టైలింగ్ మరియు JavaScript లక్ష్యీకరణ కోసం క్లాస్ పేరు కలిగి ఇన్‌పుట్లు క్రమబద్ధీకరించబడ్డాయి
- మొదటి సారి సెటప్ చేస్తున్న యూజర్లకు స్పష్టమైన సూచనలు ఇస్తుంది
### ఫలితాల ప్రదర్శన నిర్మించడం
తర్వాత, కార్బన్ ఫుట్‌ప్రింట్ డేటాను చూపించే ఫలితాల ప్రాంతాన్ని సృష్టించండి. ఈ HTML‌ను ఫారం కింద చేర్చండి:
```html
<div class="result">
<div class="loading">loading...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Region: </strong><span class="my-region"></span></p>
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Change region</button>
</div>
```
**ఈ నిర్మాణం ఏమి అందిస్తుంది:**
- **`loading`**: API డేటా తీసుకువస్తుండగా లోడింగ్ సందేశాన్ని చూపిస్తుంది
- **`errors`**: API కాల్స్ విఫలమైతే లేదా డేటా చెల్లదనిపిస్తే తప్పుల సందేశాలు చూపిస్తుంది
- **`data`**: అభివృద్ధి సమయంలో డీబగ్గింగ్ కోసం ముడి డేటాను పట్టించుకుంటుంది
- **`result-container`**: యూజర్లకు రూపుదిద్దబడిన కార్బన్ ఫుట్‌ప్రింట్ సమాచారం ఇవ్వడం కోసం
- **`clear-btn`**: యూజర్లకు వారి ప్రాంతాన్ని మార్చి ఎక్స్‌టెన్షన్‌ను తిరిగి సెటప్ చేసుకోవడానికి అనుమతిస్తుంది
### బిల్డ్ ప్రక్రియ సెట్టప్ చేయడం
ఇప్పుడు ప్రాజెక్ట్ డిపెండెన్సీలను ఇన్‌స్టాల్ చేసి బిల్డ్ ప్రక్రియను పరీక్షిద్దాం:
```bash
npm install
```
**ఈ ఇన్‌స్టాలేషన్ ప్రక్రియ ఏమి చేస్తుంది:**
- `package.json` లో సూచించిన Webpack మరియు ఇతర అభివృద్ధి డిపెండెన్సీలను డౌన్లోడ్ చేస్తుంది
- ఆధునిక JavaScript కాంపైలింగ్ కోసం బిల్డ్ టూల్ చైన్‌ను కాంఫిగర్ చేస్తుంది
- ఎక్స్‌టెన్షన్ నిర్మాణం మరియు పరీక్ష కోసం అభివృద్ధి వాతావరణాన్ని సిద్ధం చేస్తుంది
- కోడ్ బండిలింగ్, ఆప్టిమైజేషన్, మరియు క్రాస్-బ్రౌజర్ అనుకూలత ఫీచర్లను ఎనేబుల్ చేస్తుంది
> 💡 **బిల్డ్ ప్రక్రియ అవగాహన**: Webpack మీ సోర్స్ కోడ్‌ను `/src/index.js` నుండి `/dist/main.js`కి బండిల్ చేస్తుంది. ఈ ప్రక్రియ ఉత్పత్తికి మీ కోడ్‌ని ఆప్టిమైజ్ చేసి, బ్రౌజర్‌కు అనుకూలంగా చేస్తుంది.
### మీ పురోగతిని పరీక్షించడం
ఈ దశలో మీ ఎక్స్‌టెన్షన్‌ను పరీక్షించవచ్చు:
1. **నడపండి** మీ కోడును కంపైల్ చేయడానికి build ఆదేశం
2. **లోడ్ చేయండి** డెవలపర్ మోడ్ ఉపయోగించి మీ బ్రౌజర్‌లో ఎక్స్‌టెన్షన్
3. **తప్పకుండా చూడండి** ఫారం సరిగ్గా ప్రదర్శించబడుతున్నదా మరియు ప్రొఫెషనల్‌గా ఉందా
4. **పరీక్షించండి** ఫారం ఎలిమెంట్లు సక్రమంగా అలైన్ అయ్యి, ఫంక్షనల్ గానే ఉన్నాయా
**మీరు సాధించినది:**
- **నిర్మించారు** మీ ఎక్స్‌టెన్షన్‌కు సూత్రప్రాయ HTML నిర్మాణం
- **సృష్టించారు** సరైన సెమంటిక్ మార్కప్‌తో కాన్ఫిగరేషన్ మరియు ఫలితాల ఇంటర్‌ఫేస్‌లు
- **సెట్ అప్ చేశారు** పరిశ్రమ-ప్రామాణిక టూల్స్ ఉపయోగంతో ఆధునిక డెవలప్‌మెంట్ వర్క్‌ఫ్లో
- **తయారుచేశారు** ఇంటరాక్టివ్ JavaScript ఫంక్షనాలిటీ కోసం పునాది
### 🔄 **పాఠశాల గమనిక**
**ఎక్స్‌టెన్షన్ అభివృద్ధి పురోగతి**: కొనసాగక ముందుగా మీ అవగాహనను నిర్దారించుకోండి:
- ✅ ప్రాజెక్ట్ నిర్మాణంలోని ప్రతి ఫైల్ ఉద్దేశం మీరు వివరించగలరా?
- ✅ build ప్రాసెస్ మీ సోర్స్ కోడ్‌ను ఎలా మారుస్తుందో అర్థం చేసుకున్నారా?
- ✅ కాన్ఫిగరేషన్ మరియు ఫలితాలను వేరువేరు UI సెక్షన్లుగా ఎందుకు విభజిస్తారు?
- ✅ ఫారం నిర్మాణం ఉపయోగకరత మరియు ఆకెసిబిలిటీ రెండింటినీ ఎలా మద్దతు ఇస్తుంది?
**డెవలప్‌మెంట్ వర్క్‌ఫ్లో అవగాహన**: ఇప్పుడు మీరు ఈ క్రింద చేయగలరు:
1. **సవరించండి** మీ ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేసుకు సంబంధించిన HTML మరియు CSS
2. **నడపండి** build ఆదేశం మీ మార్పులు కంపైలేషన్ కోసం
3. **రీలోడ్ చేయండి** మీ బ్రౌజర్‌లో ఎక్స్‌టెన్షన్ కోసం అప్డేట్లను పరీక్షించండి
4. **డీబగ్ చేయండి** బ్రౌజర్ డెవలపర్ టూల్స్ ఉపయోగించి సమస్యలను
మీరు బ్రౌజర్ ఎక్స్‌టెన్షన్ అభివృద్ధి మొదటి దశను పూర్తి చేసారు. రైటు బ్రదర్స్ విమానయానానికి ముందు ఎరోడైనమిక్స్ అర్థం చేసుకోవాల్సిన విధంగా, ఈ ప్రాథమిక అభిప్రాయాలు మీకు తదుపరి పాఠంలో మరింత క్లిష్టమైన ఇంటరాక్టివ్ ఫీచర్లను నిర్మించడానికి సిద్ధం చేస్తాయి.
## GitHub Copilot ఏజెంట్ సవాలు 🚀
ఏజెంట్ మోడ్ ఉపయోగించి ఈ సవాలు పూర్తి చేయండి:
**వివరణ:** API కీస్ మరియు రీజియన్ కోడ్‌లు ఎంటర్ చేసే సమయంలో వినియోగదారు అనుభవాన్ని మెరుగుపరచడానికి ఫారం విలిడేషన్ మరియు వినియోగదారు ఫీడ్‌బ్యాక్ ఫీచర్లను జోడించి బ్రౌజర్ ఎక్స్‌టెన్షన్‌ను అభివృద్ధి చేయండి.
**ప్రాంప్ట్:** API కీ ఫీల్డ్ లో కనీసం 20 అక్షరాలు ఉన్నాయా లేదా అన్నది చెక్ చేసే మరియు రీజియన్ కోడ్ సరైన ఫార్మాట్ (‘US-NEISO’ లాగా) లో ఉందా చెక్ చేసే JavaScript విలిడేషన్ ఫంక్షన్‌లు రాయండి. సరైన ఇన్పుట్స్ కు గ్రీన్ బోర్డర్, తప్పులైన వాటికి రెడ్ బోర్డర్ ఇచ్చే విజువల్ ఫీడ్‌బ్యాక్ జోడించండి. భద్రతా కారణాలకోసం API కీను చూపించే/దాచే టోగుల్ ఫీచర్ కూడా జోడించండి.
ఇక్కడ గైడ్ కోసం [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) చదవండి.
## 🚀 సవాలు
మీ బ్రౌజర్‌లో ఎక్స్‌టెన్షన్ స్టోర్ చూడండి మరియు ఒకటి ఇన్‌స్టాల్ చేయండి. దాని ఫైళ్లను ఆసక్తికరంగా పరిశీలించవచ్చు. మీరు ఏమి కనుగొంటారు?
## పాఠం తర్వాత క్విజ్
[పాఠం తర్వాత క్విజ్](https://ff-quizzes.netlify.app/web/quiz/24)
## సమీక్ష & స్వీయ అధ్యయనం
ఈ పాఠంలో మీరు వెబ్ బ్రౌజర్ చారిత్రక నేపథ్యం గురించి కొంత తెలుసుకున్నారు; ప్రపంచవ్యాపీ వెబ్ కనెక్టెడ్ ఎలా అవుతుందో సృష్టికర్తలు ఎలా ఊహించినారో తెలుసుకోవడానికి దీని చారిత్రం చదవండి. కొన్ని ఉపయోగకరమైన వెబ్‌సైట్లు:
[వెబ్ బ్రౌజర్ల చరిత్ర](https://www.mozilla.org/firefox/browsers/browser-history/)
[వెబ్ చరిత్ర](https://webfoundation.org/about/vision/history-of-the-web/)
[టిమ్ బర్నర్స్-లీతో ఇంటర్వ్యూలు](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
### ⚡ **తదుపరి 5 నిమిషాల్లో మీరు చేయగల పనులు**
- [ ] Chrome/Edge ఎక్స్‌టెన్షన్స్ పేజీ (chrome://extensions) ఓపెన్ చేసి ఇన్‌స్టాల్ చేసిన వాటిని పరిశీలించండి
- [ ] వెబ్‌పేజీ లోడ్ అయ్యేటప్పుడు మీ బ్రౌజర్ DevTools Network ట్యాబ్ చూడండి
- [ ] పేజీ సోర్స్ (Ctrl+U) చెక్ చేసి HTML నిర్మాణం పరిశీలించండి
- [ ] ఎలాంటి వెబ్‌పేజీ ఎలిమెంట్‌ను ఇన్‌స్పెక్ట్ చేసి DevTools లో CSS మార్చండి
### 🎯 ** ఈ గంటలో మీరు సాధించగల విజయాలు**
- [ ] పాఠం తర్వాత క్విజ్ పూర్తి చేసుకొని బ్రౌజర్ మూలాలను అర్థం చేసుకోండి
- [ ] బ్రౌజర్ ఎక్స్‌టెన్షన్ కోసం ప్రాథమిక manifest.json ఫైల్ సృష్టించండి
- [ ] ఒక సరళమైన "Hello World" ఎక్స్‌టెన్షన్ నిర్మించి popup చూపించండి
- [ ] డెవలపర్ మోడ్ లో మీ ఎక్స్‌టెన్షన్ లోడ్ చేయడం పరీక్షించండి
- [ ] మీ లక్ష్య బ్రౌజర్ కోసం ఎక్స్‌టెన్షన్ డాక్యుమెంటేషన్ చూడండి
### 📅 **మీ వార పొడవైన ఎక్స్‌టెన్షన్ ప్రయాణం**
- [ ] నిజమైన ఉపయోగం గల గణనీయమైన బ్రౌజర్ ఎక్స్‌టెన్షన్ పూర్తి చేయండి
- [ ] కంటెంట్ స్క్రిప్ట్‌లు, బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌లు, పాపప్ ఇంటరాక్షన్ల గురించి నేర్చుకోండి
- [ ] స్టోరేజ్, టాబ్స్, మెసేజింగ్ వంటి బ్రౌజర్ APIs నేర్చుకోండి
- [ ] వినియోగదారు సొంతమైన ఇంటర్‌ఫేస్‌లను డిజైన్ చేయండి
- [ ] వివిధ వెబ్‌సైట్లలో మరియు పరిస్థితులలో మీ ఎక్స్‌టెన్షన్ పరీక్షించండి
- [ ] ఎక్స్‌టెన్షన్‌ను బ్రౌజర్ ఎక్స్‌టెన్షన్ స్టోర్‌లో ప్రచురించండి
### 🌟 **మీ నెల పొడవైన బ్రౌజర్ అభివృద్ధి**
- [ ] వేరే వేరే వినియోగదారు సమస్యలకు అనుకూలమైన అనేక ఎక్స్‌టెన్షన్‌లు నిర్మించండి
- [ ] అధునాతన బ్రౌజర్ APIలు మరియు భద్రతా ఉత్తమ క్రమాలు నేర్చుకోండి
- [ ] ఓపెన్ సోర్స్ బ్రౌజర్ ఎక్స్‌టెన్షన్ ప్రాజెక్టులకు సహకరించండి
- [ ] క్రాస్-బ్రౌజర్ అనుకూలత మరియు ప్రోగ్రెస్‌వ్ ఎన్‌హాన్స్‌మెంట్‌లో ప్రావీణ్యం సంతరించుకోండి
- [ ] ఇతరుల కోసం ఎక్స్‌టెన్షన్ అభివృద్ధి టూల్స్ మరియు టెంప్లెట్లను సృష్టించండి
- [ ] ఇతర డెవలపర్లకు సహాయం చేసే బ్రౌజర్ ఎక్స్‌టెన్షన్ నిపుణుడిగా మారండి
## 🎯 మీ బ్రౌజర్ ఎక్స్‌టెన్షన్ నైపుణ్య సమయరేఖ
```mermaid
timeline
title బ్రౌజర్ విస్తరణ అభివృద్ధి పురోగతి
section ప్రము (15 నిమిషాలు)
Browser Understanding: కోర్ నిర్మాణం
: రెండరింగ్ ప్రక్రియ
: విస్తరణ సమీకరణ బిందువులు
section సెటప్ (20 నిమిషాలు)
Development Environment: ప్రాజెక్ట్ నిర్మాణం
: బిల్డ్ టూల్స్ కాన్ఫిగరేషన్
: బ్రౌజర్ డెవలపర్ మోడ్
: విస్తరణ లోడింగ్ ప్రక్రియ
section ఇంటర్‌ఫేస్ డిజైన్ (25 నిమిషాలు)
User Experience: HTML నిర్మాణం
: CSS శైలి
: ఫారం నిర్ధారణ
: స్పందనాత్మక డిజైన్
section కోర్ ఫంక్షనాలిటీ (35 నిమిషాలు)
JavaScript Integration: ఈవెంట్ హాండ్లింగ్
: API పరస్పర చర్యలు
: డేటా నిల్వ
: లోపం నిర్వహణ
section బ్రౌజర్ APIs (45 నిమిషాలు)
Platform Integration: అనుమతుల వ్యవస్థ
: నిల్వ APIs
: ట్యాబ్ నిర్వహణ
: సందర్భ మెనూలు
section ఆధునిక లక్షణాలు (1 వారం)
Professional Extensions: బ్యాక్‌గ్రౌండ్ స్క్రిప్టులు
: కంటెంట్ స్క్రిప్టులు
: క్రాస్-బ్రౌజర్ అనుకూలత
: పనితీరు ఆప్టిమైజేషన్
section ప్రచురణ (2 వారం)
Distribution: స్టోర్ సమర్పణ
: సమీక్ష ప్రక్రియ
: వినియోగదారుల ప్రతిస్పందన
: నవీకరణ నిర్వహణ
section నిపుణుల స్థాయి (1 నెల)
Extension Ecosystem: ఆధునిక APIs
: భద్రత ఉత్తమ పద్ధతులు
: సంస్థల లక్షణాలు
: ఫ్రేమ్‌వర్క్ సమీకరణ
```
### 🛠️ మీ ఎక్స్‌టెన్షన్ అభివృద్ధి టూల్‌కిట్ సంక్షిప్తం
ఈ పాఠం పూర్తైన తర్వాత, మీ వద్ద ఉంది:
- **బ్రౌజర్ ఆర్కిటెక్చర్ జ్ఞానం**: రించరింగ్ ఇంజిన్లు, భద్రతా నమూనాలు, ఎక్స్‌టెన్షన్ ఇంటిగ్రేషన్ అర్థం
- **అభివృద్ధి వాతావరణం**: Webpack, NPM, డీబగ్గింగ్ సామర్థ్యాలతో ఆధునిక టూల్‌చైన్
- **UI/UX పునాది**: ప్రోగ్రెస్‌వ్ డిస్క్లోజర్ పేటర్న్‌తో సెమాంటిక్ HTML నిర్మాణం
- **భద్రతా అవగాహన**: బ్రౌజర్ అనుమతులు మరియు సురక్షిత అభివృద్ధి పద్ధతులు
- **క్రాస్-బ్రౌజర్ భావనలు**: అనుకూలత పరిగణనాలు మరియు పరీక్షా విధానాలు
- **API ఇంటిగ్రేషన్**: బాహ్య డేటా స్రోతోస్‌తో పని చేసే పునాది
- **వృత్తిపరమైన వర్క్‌ఫ్లో**: పరిశ్రమ-ప్రామాణిక అభివృద్ధి మరియు పరీక్షా ప్రకియలు
**సాకారిక వినియోగాలు**: ఈ నైపుణ్యాలు ప్రత్యక్షంగా వర్తిస్తాయి:
- **వెబ్ అభివృద్ధి**: సింగిల్ పేజ్ అప్లికేషన్‌లు మరియు ప్రోగ్రెస్‌వ్ వెబ్ యాప్స్
- **డెస్క్‌టాప్ అప్లికేషన్స్**: ఎలక్ట్రాన్ మరియు వెబ్ ఆధారిత డెస్క్‌టాప్ సాఫ్ట్వేర్
- **మొబైల్ అభివృద్ధి**: హైబ్రిడ్ యాప్స్ మరియు వెబ్ ఆధారిత మొబైల్ పరిష్కారాలు
- **ఎంటర్‌ప్రైజ్ టూల్స్**: అంతర్గత ఉత్పాదకత అప్లికేషన్స్ మరియు వర్క్‌ఫ్లో ఆటోమేషన్
- **ఓపెన్ సోర్స్**: బ్రౌజర్ ఎక్స్‌టెన్షన్ ప్రాజెక్ట్స్ మరియు వెబ్ ప్రమాణాలకు సహకారం
**తరగతి ముందరి దశ**: విస్తృత ఇంటరాక్టివ్ ఫంక్షనాలిటీ జోడించడానికి, బ్రౌజర్ APIs తో పని చేయడానికి, మరియు వాస్తవ వినియోగదారు సమస్యలను పరిష్కరించే ఎక్స్‌టెన్షన్‌లను సృష్టించడానికి మీరు సిద్ధంగా ఉన్నారు!
## అసైన్మెంట్
[మీ ఎక్స్‌టెన్షన్‌ను రీస్టైల్ చేయండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**స్వీయ నిరాకరణ**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి పోరాడుతున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పిదాలు లేదా అసత్యతలు ఉండవచ్చును అని దయచేసి గమనించండి. అసలు పత్రం దాని స్థానిక భాషలో అధికారం సమ్మతమైన మూలంగా పరిగణించబడాలి. కీలక సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదాన్ని సిఫార్సు చేయబడింది. ఈ అనువాదం వాడకం వల్ల ఏర్పడే ఎటువంటి అపార్థాలు లేదా తప్పు అర్థం చేసుకోవడం కోసం మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

146
translations/te/5-browser-extension/1-about-browsers/assignment.md
Unescape View File

@ -0,0 +1,146 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b6897c02603d0045dd6d8256e8714baa",
"translation_date": "2026-01-08T15:52:43+00:00",
"source_file": "5-browser-extension/1-about-browsers/assignment.md",
"language_code": "te"
}
-->
# అసైన్‌మెంట్: మీ బ్రౌజర్ విస్తరణను రీస్టైల్ చేయండి
## అవలోకనం
ఇప్పుడు మీరు మీ కార్బన్ ఫుట్‌ప్రింట్ బ్రౌజర్ ఎక్స్‌టెన్షన్ కోసం HTML నిర్మాణాన్ని రూపొందించారు, దాన్ని దృశ్యంగా ఆకర్షణీయంగా మరియు ఉపయోగదారుడికి సౌకర్యవంతంగా మార్చే సమయం వచ్చింది. గొప్ప డిజైన్ ఉపయోగదారు అనుభవాన్ని మెరుగుపరుస్తుంది మరియు మీ ఎక్స్‌టెన్షన్‌ను మరింత వృత్తిపరమైనదిగా మరియు ఆకర్షణీయంగా తీసుకువస్తుంది.
మీ ఎక్స్‌టెన్షన్ ప్రాథమిక CSS స్టైలింగ్‌తో వస్తోంది, కానీ ఈ అసైన్‌మెంట్ మీ వ్యక్తిగత శైలిని ప్రతిబింబించే సొంత దృశ్య గుర్తింపును సృష్టించమని సవాలు ఇస్తుంది, ఇది అద్భుతమైన వినియోగ సౌకర్యాన్ని నిలుపుకోబోతుంది.
## సూచనలు
### భాగం 1: ప్రస్తుత డిజైన్‌ను పరిశీలించండి
మార్పులు చేసేముందు, ప్రస్తుత CSS నిర్మాణాన్ని పరిశీలించండి:
1. **కనుమరుగు చేయండి** CSS ఫైళ్లను మీ ఎక్స్‌టెన్షన్ ప్రాజెక్ట్‌లో
2. **సమీక్షించండి** ప్రస్తుత స్టైలింగ్ విధానాన్ని మరియు రంగుల పధకాన్ని
3. **గుర్తించండి** లేఅవుట్, టైపోగ్రఫీ, మరియు దృశ్య స్థానంలో మెరుగుదల అవసరమైన ప్రాంతాలను
4. **గమనించండి** డిజైన్ వినియోగదారు లక్ష్యాలను (సులభమైన ఫారమ్ పూర్తి, స్పష్టమైన డేటా ప్రదర్శన) ఎలా మద్దతు ఇస్తుందో
### భాగం 2: మీ సొంత స్టైలింగ్ డిజైన్ చేయండి
కోహెసివ్ దృశ్య డిజైన్ సృష్టించండి, ఇందులో:
**రంగుల పధకం:**
- పర్యావరణ థీమ్‌లను ప్రతిబింబించే ప్రాధమిక రంగుల ప్యాలెట్ ఎంచుకోండి
- చేరువ ప్రాంతాధికారత కొరకు తగినంత వ్యత్యాసం ఉండేలా చూసుకోండి (WebAIM యొక్క contrast checker వంటివి ఉపయోగించండి)
- వివిధ బ్రౌజర్ థీమ్‌ల మధ్య రంగులు ఎలా కనిపిస్తాయో గమనించండి
**టైపోగ్రఫీ:**
- చిన్న ఎక్స్‌టెన్షన్ పరిమాణాల్లో బాగా పనిచేసే పఠించదగిన ఫాంట్లను ఎంచుకోండి
- తగిన ఫాంట్ размеров మరియు బరువు తో స్పష్టమైన స్థాయిలో ఏర్పాటుచేయండి
- లైట్ మరియు డార్క్ బ్రౌజర్ థీమ్స్ లో కూడా వచనం స్పష్టంగా ఉండేలా చూసుకోండి
**లేఅవుట్ మరియు స్థానం:**
- ఫారమ్ అంశాలు మరియు డేటా ప్రదర్శన యొక్క దృశ్య క్రమాన్ని మెరుగుపరచండి
- మెరుగైన పఠనీయత కొరకు తగిన ప్యాడింగ్ మరియు మార్జిన్లను జోడించండి
- వివిధ స్క్రీన్ పరిమాణాలకు అనుగుణంగా స్పందనాత్మక డిజైన్ సిధ్ధాంతాలను పరిగణనలోకి తీసుకోండి
### భాగం 3: మీ డిజైన్‌ను అమలు చేయండి
మీ డిజైన్‌ను అమలు చేయడానికి CSS ఫైళ్లను మార్చండి:
```css
/* Example starting points for customization */
.form-data {
/* Style the configuration form */
background: /* your choice */;
padding: /* your spacing */;
border-radius: /* your preference */;
}
.result-container {
/* Style the data display area */
background: /* complementary color */;
border: /* your border style */;
margin: /* your spacing */;
}
/* Add your custom styles here */
```
**ముఖ్యమైన ప్రాంతాలు స్టైల్ చేయండి:**
- **ఫారమ్ అంశాలు**: ఇన్పుట్ ఫీల్డులు, లేబులు, మరియు సమర్పణ బటన్లు
- **ఫలితాల ప్రదర్శన**: డేటా కంటైనర్, వచన స్టైలింగ్, మరియు లోడింగ్ స్థితులు
- **ఇంటరాక్టివ్ అంశాలు**: హోవర్ ఎఫెక్ట్లు, బటన్ స్థితులు, మరియు మార్పులు
- **మొత్తం లేఅవుట్**: కంటైనర్ స్థానం, నేపథ్య రంగులు, మరియు దృశ్య స్థాయి
### భాగం 4: పరీక్షించండి మరియు మెరుగుపరచండి
1. `npm run build` తో మీ ఎక్స్‌టెన్షన్‌ను నిర్మించండి
2. నవీకరించిన ఎక్స్‌టెన్షన్‌ను మీ బ్రౌజర్‌లో లోడ్ చేయండి
3. అన్ని దృశ్య స్థితులను (ఫారమ్ నమోదు, లోడింగ్, ఫలితాల ప్రదర్శన, లోపాలు) పరీక్షించండి
4. బ్రౌజర్ డెవలపర్ టూల్స్‌తో చేరువ ప్రాంతాధికారతను ధ్రువీకరించండి
5. వాస్తవ ఉపయోగం ఆధారంగా మీ స్టైల్స్‌ను మెరుగుపరచండి
## సృజనాత్మక సవాళ్ళు
### ప్రాథమిక స్థాయి
- రంగులు మరియు ఫాంట్లు అప్డేట్ చేసి ఒక సమగ్ర థీమ్ సృష్టించండి
- అంతటా స్థానం మరియు సర్దుబాటు మెరుగుపరచండి
- ఇంటరాక్టివ్ అంశాలకు సున్నితమైన హోవర్ ఎఫెక్ట్లను జోడించండి
### మధ్యం స్థాయి
- మీ ఎక్స్‌టెన్షన్ కోసం కస్టమ్ ఐకాన్లు లేదా గ్రాఫిక్స్ డిజైన్ చేయండి
- వేర్వేరు స్థితుల మధ్య సాఫ్ట్ ట్రాన్సిషన్లను అమలు చేయండి
- API కాల్స్ కోసం ప్రత్యేక లోడింగ్ యానిమేషన్ సృష్టించండి
### అధునాతన స్థాయి
- అనేక థీమ్ ఎంపికలు (లైట్/డార్క్/హై-కాంట్రాస్ట్) డిజైన్ చేయండి
- వివిధ బ్రౌజర్ విండో పరిమాణాలకు స్పందనాత్మక డిజైన్ అమలు చేయండి
- వినియోగదారు అనుభవాన్ని మెరుగుపరచే సూక్ష్మ ఇంటరాక్షన్లను జోడించండి
## సమర్పణ మార్గదర్శకాలు
మీ పూర్తి చేసిన అసైన్‌మెంట్‌లో ఉండాల్సినవి:
- మీ సొంత స్టైలింగ్ తో సవరించిన CSS ఫైళ్లు
- వివిధ స్థితులలో మీ ఎక్స్‌టెన్షన్‌ను చూపించే స్క్రీన్‌షాట్లు (ఫారమ్, లోడింగ్, ఫలితాలు)
- మీ డిజైన్ ఎంపికలు మరియు అవి వినియోగదారు అనుభవాన్ని ఎలా మెరుగుపరుస్తాయో తెలిపే చిన్న వివరణ (2-3 వాక్యాలు)
## మూల్యాంకన రూబ్రిక్
| ప్రమాణాలు | ఆదర్శవంతమైన (4) | సమర్థవంతమైన (3) | అభివృద్ధి చెందుతున్న (2) | ప్రారంభం (1) |
|----------|------------------|-----------------|-----------------------|-----------|
| **దృశ్య డిజైన్** | వినియోగ సౌకర్యాన్ని పెంపొందించే, కట్టుబడి ఉన్న, సృజనాత్మక డిజైన్ | స్థిరమైన స్టైలింగ్ మరియు స్పష్టమైన దృశ్య క్రమంతో మంచి డిజైన్ ఎంపికలు | కొన్ని స్థిరత్వ సమస్యలతో ప్రాథమిక డిజైన్ మెరుగుదలలు | కనీసం స్టైలింగ్ మార్పులు లేదా అసమ్మత డిజైన్ |
| **ఫంక్షనాలిటీ** | వేర్వేరు స్థితులు మరియు బ్రౌజర్ వాతావరణాలలో అన్ని శైలులు సరిగ్గా పనిచేస్తాయి | చిన్న సమస్యలతో శైలులు బాగా పనిచేస్తాయి | ప్రదర్శన సమస్యలతో చాలామంది శైలులు పనిచేస్తాయి | వినియోగ సౌకర్యాన్ని ప్రభావితం చేసే సీరియస్ స్టైలింగ్ సమస్యలు |
| **కోడ్ నాణ్యత** | శుభ్రంగా, బాగా నిర్వహించిన CSS, అర్థవంతమైన క్లాస్ పేర్లు మరియు సమర్థవంతమైన సెలెక్టర్లు | సరైన సెలెక్టర్ల ఉపయోగంతో మంచి CSS నిర్మాణం | కొన్ని ఆర్గనైజేషన్ సమస్యలతో అంగీకారయోగ్యమైన CSS | పూర్వార్థ CSS నిర్మాణం లేదా అధిక క్లిష్టత స్టైలింగ్ |
| **చేరువ ప్రాంతాధికారత** | అద్భుతమైన రంగు వ్యత్యాసం, పఠనీయమైన ఫాంట్లు, దివ్యాంగుల కోసం పరిగణన | చిన్న మెరుగు అవసరమున్న మంచి చేరువ ప్రాంతాధికారత చర్యలు | కొన్ని సమస్యలతో ప్రాథమిక చేరువ ప్రాంతాధికారత పరిగణనలు | చేరుగ అమలు కొరకు పూజితం లేదు |
## విజయం కొరకు చిట్కాలు
> 💡 **డిజైన్ చిట్కా**: సున్నితమైన మార్పులతో ప్రారంభించి మరింత నాటకీయ స్టైలింగ్‌కి చేరుకోండి. టైపోగ్రఫీ మరియు స్థానం లో చిన్న మెరుగుదలలు కూడా గమనించదగిన నాణ్యత ప్రభావాలను కలిగిస్తాయి.
**అనుసరించాల్సిన ఉత్తమ కార్యకలాపాలు:**
- లైట్ మరియు డార్క్ బ్రౌజర్ థీమ్స్ రెండింటిలోనూ మీ ఎక్స్‌టెన్షన్‌ను పరీక్షించండి
- మెరుగైన పరిమాణీకరణకి సాపేక్ష యూనిట్లను (em, rem) ఉపయోగించండి
- CSS కస్టమ్ ప్రాపర్టీలతో స్థిరమైన స్థానం నిర్వహించండి
- మీ డిజైన్ వివిధ దృష్టి అవసరాలు ఉన్న వినియోగదారులకు ఎలా కనిపిస్తుందో పరిగణించండి
- సరైన సింటాక్స్ నిబంధనలను పాటిస్తూ CSS‌ను ధృవీకరించండి
> ⚠️ **సాధారణ పొరపాటు**: దృశ్య ఆకర్షణ కోసం ఉపయోగసౌకర్యాన్ని త్యజించకండి. మీ ఎక్స్‌టెన్షన్ అందమైనదీ, సమర్ధవంతమైనదీ ఉండాలి.
**మర్చిపోకండి:**
- ముఖ్యమైన సమాచారాన్ని సులభంగా చదవగలిగేలా ఉంచండి
- బటన్లు మరియు ఇంటరాక్టివ్ అంశాలు క్లిక్ చేయడానికి సులభంగా ఉండేలా చూసుకోండి
- వినియోగదారు చర్యలకు సూటిగా దృశ్య స్పందన ఇవ్వండి
- ప్లేస్‌హోల్డర్ వచనంతో కాకుండా నిజమైన డేటాతో మీ డిజైన్‌ని పరీక్షించండి
ఫంక్షనల్ మరియు దృశ్యంగా అద్భుతమైన బ్రౌజర్ ఎక్స్‌టెన్షన్ సృష్టించడంలో శుభాకాంక్షలు!
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టం**:
ఈ డాక్యూమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించగా, ఆటోమేటెడ్ అనువాదంలో పొరపాట్లు లేదా అసత్యతలు ఉండే అవకాశం ఉందని దయచేసి గుర్తుంచుకోండి. స్థానిక భాషలో ఉన్న అసలు డాక్యూమెంట్‌ను అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదాన్ని సూచిస్తాము. ఈ అనువాదాన్ని ఉపయోగించడంవల్ల కలగవచ్చిన ఏమైనా దుర్భావనలు లేదా తప్పుదారితీరుదలలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

663
translations/te/5-browser-extension/2-forms-browsers-local-storage/README.md
Unescape View File

@ -0,0 +1,663 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "2b6203a48c48d8234e0948353b47d84e",
"translation_date": "2026-01-08T15:05:12+00:00",
"source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
"language_code": "te"
}
-->
# బ్రౌజర్ పొడగింపు ప్రాజెక్ట్ పార్ట్ 2: API ను కాల్ చేయండి, లోకల్ స్టోరేజ్ ఉపయోగించండి
```mermaid
journey
title మీ API సమన్వయం & నిల్వ ప్రయాణం
section బేస్
DOM రిఫరెన్సులను సెట్ చేయండి: 3: Student
ఈవెంట్ లిసనర్స్ జోడించండి: 4: Student
ఫారమ్ సమర్పణను నిర్వహించండి: 4: Student
section డేటా నిర్వహణ
లోకల్ స్టోరేజ్ అమలుచేసి: 4: Student
API కాళ్లను సృష్టించండి: 5: Student
అసింక్ ఆపరేషన్లను నిర్వహించండి: 5: Student
section వినియోగదారు అనుభవం
పొరపాటు నిర్వహణను జోడించండి: 5: Student
లోడింగ్ స్థితులను సృష్టించండి: 4: Student
ఇంపుట్ పరస్పర చర్యలను మెరుగు పరచండి: 5: Student
```
## ప్రీ-లెక్చర్ క్విజ్
[ప్రీ-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/25)
## పరిచయం
నువ్వు ప్రారంభించిన బ్రౌజర్ పొడగింపు గుర్తుందా? ఇప్పటికీ నీకు బాగున్న రూపం ఉంది, కానీ అది అసలే స్థిరమైనది. ఈ రోజు మనం దానిని ప్రాణం పోస్తాము, నిజమైన డేటాతో కనెక్ట్ చేసి, దీనికి స్మృతి ఇస్తాము.
అపోలో మిషన్ కంట్రోల్ కంప్యూటర్ల గురించి ఆలోచించు - అవి స్థిరమైన సమాచారాన్ని మాత్రమే ప్రదర్శించలేదు. అవి ఎప్పటికప్పుడు స్పేస్ క్రాఫ్ట్‌తో కమ్యూనికేట్ చేసి, టెలిమెట్రీ డేటాతో నవీకరించబడ్డాయి మరియు ముఖ్యమైన మిషన్ పరామితులను గుర్తు పెట్టుకున్నాయి. మనం ఈ రోజు నిర్మిస్తున్న డైనమిక్ ప్రవర్తన ఇష్టం. మీ పొడగింపు ఇంటర్నెట్‌కు చేరుకుంటుంది, నిజమైన పర్యావరణ డేటా తీసుకుంటుంది, మరియు మీ సెట్ చేసిన సెట్టింగ్స్‌ను భవిష్యత్తు కోసం గుర్తుంచుకుంటుంది.
API ఇంటిగ్రేషన్ కష్టం అనిపించవచ్చును, కానీ ఇది మీ కోడ్‌ను ఇతర సేవలతో ఎలా కమ్యూనికేట్ చేయాలో నేర్పించడం మాత్రమే. మీరు వాతావరణ డేటాను తీసుకునే, సోషల్ మీడియాలో ఫీడ్స్‌ను పొందే లేదా ఈ రోజు చేయబోయే విధంగా కార్బన్ ఫుట్ ప్రింట్ సమాచారం తీసుకునే విధానం, ఇవన్నీ ఈ డిజిటల్ కనెక్షన్లను ఏర్పాటు చేసే విషయం. మనము ఏ విధంగానే బ్రౌజర్లు ఎలా సమాచారాన్ని నిలిపివేయగలవో కూడా తెలుసుకుందాము - లైబ్రరీలు ఎలా కార్డు క్యాటలాగ్‌లు ఉపయోగించి పుస్తకాలు ఎక్కడ ఉన్నాయో గుర్తుంచుకున్నాయో అలా.
ఈ పాఠం పూర్తయిన తర్వాత, మీకు నిజమైన డేటా పాఠిస్తుంది, వినియోగదారు ప్రాధమ్యాలను నిలిపివేస్తుంది మరియు సరళమైన అనుభవాన్ని అందించే బ్రౌజర్ పొడగింపు ఉంటుంది. మొదలు పెట్టుదాం!
```mermaid
mindmap
root((Dynamic Extensions))
DOM Manipulation
Element Selection
Event Handling
State Management
UI Updates
Local Storage
Data Persistence
Key-Value Pairs
Session Management
User Preferences
API Integration
HTTP Requests
Authentication
Data Parsing
Error Handling
Async Programming
Promises
Async/Await
Error Catching
Non-blocking Code
User Experience
లోడ్ అవుతున్న స్థితులు
పొరపాటు సందేశాలు
సాఫ్టు మార్పులు
డేటా ధృవీకరణ
```
✅ మీ కోడ్ ఎక్కడ ఉంచాలో తెలుసుకోవడానికి సంబంధిత ఫైల్స్ లో ఉన్న నంబర్ చేసిన సెగ్మెంట్లను అనుసరించండి
## పొడగింపులో మానిప్యులేట్ చేసే ఎలిమెంట్లను సెట్ చేయండి
మీ జావా స్క్రిప్ట్ ఇంటర్‌ఫేస్‌ను మానిప్యులేట్ చేయడానికి ముందు, అది ప్రత్యేక HTML ఎలిమెంట్లకు సూచనలు కావాలి. ఇది టెలిస్కోపును నిర్దిష్ట నక్షత్రాలపై దృష్టి పెట్టడంలాంటిది - గెలిలియో జుపిటర్ గోళ్ళను అధ్యయనం చేయడానికి ముందు జుపిటర్ను కనుగొని దానిపై దృష్టి పెట్టాలి.
మీ `index.js` ఫైలిలో, మనం ముఖ్యమైన ప్రతి ఫారం ఎలిమెంట్‌కి సూచనలను పట్టే `const` వేరియబుల్స్ సృష్టిస్తాము. ఇది శాస్త్రవేత్తలు తమ పరికరాలపై లేబుల్ పెడుతున్న తీరుగానే - ప్రతి సారి మొత్తం ప్రయోగశాలను అన్వేషించకుండా వారు అవసరమైన దాని నేరుగా యాక్సెస్ చేయగలుగుతారు.
```mermaid
flowchart LR
A[జావాస్క్రిప్ట్ కోడ్] --> B[document.querySelector]
B --> C[CSS సెలెక్టర్లు]
C --> D[HTML ఎలిమెంట్లు]
D --> E[".form-data"]
D --> F[".region-name"]
D --> G[".api-key"]
D --> H[".loading"]
D --> I[".errors"]
D --> J[".result-container"]
E --> K[ఫారం ఎలిమెంట్]
F --> L[ఇన్‌పుట్ ఫీల్డ్]
G --> M[ఇన్‌పుట్ ఫీల్డ్]
H --> N[UI ఎలిమెంట్]
I --> O[UI ఎలిమెంట్]
J --> P[UI ఎలిమెంట్]
style A fill:#e1f5fe
style D fill:#e8f5e8
style K fill:#fff3e0
style L fill:#fff3e0
style M fill:#fff3e0
```
```javascript
// ఫారమ్ ఫీల్డ్స్
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');
// ఫలితాలు
const errors = document.querySelector('.errors');
const loading = document.querySelector('.loading');
const results = document.querySelector('.result-container');
const usage = document.querySelector('.carbon-usage');
const fossilfuel = document.querySelector('.fossil-fuel');
const myregion = document.querySelector('.my-region');
const clearBtn = document.querySelector('.clear-btn');
```
**ఈ కోడ్ చేస్తున్నది:**
- CSS క్లాస్ సెలెక్టర్లతో `document.querySelector()` ఉపయోగించి ఫాం ఎలిమెంట్లను పట్టుకుంటుంది
- ప్రాంతం పేరు మరియు API కీ కోసం ఇన్‌పుట్ ఫీల్డ్స్‌కు సూచనలు సృష్టిస్తుంది
- కార్బన్ వాడుక డేటా కోసం ఫలిత ప్రదర్శన ఎలిమెంట్లకు కనెక్షన్‌ను ఏర్పరుస్తుంది
- లోడింగ్ సూచికలు మరియు లోప సూచనలు వంటి UI ఎలిమెంట్లను సెటప్ చేస్తుంది
- మీ కోడ్ అంతటా సులభంగా పునఃఉపయోగం కోసం ప్రతి ఎలిమెంట్ సూచనను `const` వేరియబుల్ గా నిల్వ చేస్తుంది
## ఈవెంట్ లిసెనర్లను జోడించండి
ఇప్పుడు మనం మీ పొడగింపును వినియోగదారుల చర్యలకు స్పందింపజేసేందుకు చేస్తాము. ఈవెంట్ లిసెనర్లు అనేవి మీ కోడ్ వినియోగదారుల పరస్పర చర్యలను పరిశీలించే మార్గం. అవి మొదటి కాలాల్లోని టెలిఫోన్ ఎక్స్ఛేంజ్ ఆపరేటర్లాగా - వారు వచ్చిన కాల్స్‌కి కస్టమర్స్ కనెక్ట్ కావడానికి సరైన సర్క్యూట్‌లను అనుసంధానం చేసేవారు.
```mermaid
sequenceDiagram
participant User
participant Form
participant JavaScript
participant API
participant Storage
User->>Form: ప్రాంతం/API కీని నింపండి
User->>Form: సబ్మిట్ క్లిక్ చేయండి
Form->>JavaScript: సబ్మిట్ ఈవెంట్ ట్రిగ్గర్ చేయు
JavaScript->>JavaScript: handleSubmit(e)
JavaScript->>Storage: వాడుకరి ప్రాధాన్యతలను సేవ్ చేయండి
JavaScript->>API: కార్బన్ డేటాను తీసుకోండి
API->>JavaScript: డేటా తిరిగి ఇచ్చు
JavaScript->>Form: ఫలితాలతో UI ని నవీకరించు
User->>Form: క్లియర్ బటన్ క్లిక్ చేయండి
Form->>JavaScript: క్లిక్ ఈవెంట్ ట్రిగ్గర్ చేయు
JavaScript->>Storage: సేవ్ చేసిన డేటాను క్లియర్ చేయండి
JavaScript->>Form: ప్రారంభ స్థితికి రీసెట్ చేయండి
```
```javascript
form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));
init();
```
**ఈ సమాహారాల అర్థం:**
- వినియోగదారులు ఎంటర్ నొక్కినప్పుడు లేదా సమర్పించడానికి క్లిక్ చేసినప్పుడు ట్రిగ్గర్ అయ్యే ఫాం‌కు సబ్మిట్ లిసినర్‌ను కట్టడం
- ఫారమ్‌ను రీసెట్ చేయడానికి క్లియర్ బటన్కు క్లిక్ లిసినర్‌ను అనుసంధానం చేయడం
- అదనపు నియంత్రణ కోసం ఈవెంట్ ఆబ్జెక్ట్ `(e)`ని హ్యాండ్లర్ ఫంక్షన్లకు పంపడం
- మీ పొడగింపు ప్రారంభ స్థితిని అమర్చడానికి వెంటనే `init()` ఫంక్షన్‌ను పిలవడం
✅ ఇక్కడ ఉపయోగించిన షార్ట్ హ్యాండ్ ఏరో ఫంక్షన్ సింటాక్స్‌ను గమనించండి. ఈ ఆధునిక జావాస్క్రిప్ట్ విధానం సంప్రదాయ ఫంక్షన్ ఎక్స్‌ప్రెషన్ల కంటే మరింత క్లీనుగా ఉంటుంది, కానీ రెండూ బాగా పనిచేస్తాయి!
### 🔄 **పాఠశాల తనిఖీ**
**ఈవెంట్ హ్యాండ్లింగ్ అర్థం చేసుకోవడం**: Initialization కు వెళ్లేముందు, మీరు తెలుసుకోవాలి:
- ✅ `addEventListener` ఎలా వినియోగదారు చర్యలను జావాస్క్రిప్ట్ ఫంక్షన్స్ కు కలుపుతుందో బట్టి వివరించగలరు
- ✅ హ్యాండ్లర్ ఫంక్షన్లకు ఈవెంట్ ఆబ్జెక్ట్ `(e)` ఎందుకు పాస్ చేయబడుతుందో తెలుసుకోవచ్చు
- ✅ `submit` మరియు `click` ఈవెంట్ల మధ్య తేడా గుర్తించగలరు
- ✅ `init()` ఫంక్షన్ ఎప్పుడు మరియు ఎందుకు అమలవుతుందో వివరించగలరు
**తక్షణమే స్వయం పరీక్ష**: మీరు `e.preventDefault()`ను ఫారం సబ్మిషన్లో మర్చిపోతే ఏమవుతుంది?
*సమాధానం: పేజీ రీలోడ్ అవుతుంది, అందువలన అన్ని జావాస్క్రిప్ట్ స్థితులు పోతాయి మరియు వినియోగదారు అనుభవం అంతరాయం వస్తుంది*
## ప్రారంభకల్పన మరియు రీసెట్ ఫంక్షన్లను నిర్మించండి
మీ పొడగింపు కోసం Initialization లాజిక్‌ను సృష్టిద్దాం. `init()` ఫంక్షన్ ఒక నౌక యొక్క నావిగేషన్ సిస్టమ్ లాంటిదిది - ఇది ప్రస్తుత స్థితిని తనిఖీ చేసి అనుసరిస్తుంది. ఇది ఎవరో ముందు మీ పొడగింపును ఉపయోగించారో లేదా వారి పూర్వ సెట్టింగ్స్‌ను లోడ్ చేస్తుంది.
`reset()` ఫంక్షన్ వినియోగదారులకు కొత్త ప్రారంభాన్ని ఇస్తుంది - శాస్త్రవేత్తలు పరిశీలనల మధ్య తమ పరికరాలను రీసెట్ చేసే విధంగానే, శుభత డేటా కోసం.
```javascript
function init() {
// యూజర్ ముందు API ఆవశ్యకతలను సేవ్ చేసినారా అని తనిఖీ చేయండి
const storedApiKey = localStorage.getItem('apiKey');
const storedRegion = localStorage.getItem('regionName');
// ఎక్స్‌టెన్షన్ చిహ్నాన్ని సాధారణ ఆకుపచ్చ (భవిష్యత్తు పాఠానికి ప్లేస్‌హోల్డర్) గా సెట్ చేయండి
// TODO: తదుపరి పాఠంలో చిహ్నం అప్‌డేట్‌ను అమలు చేయండి
if (storedApiKey === null || storedRegion === null) {
// తొలి సారి యూజర్: సెటప్ ఫారాన్ని చూపించండి
form.style.display = 'block';
results.style.display = 'none';
loading.style.display = 'none';
clearBtn.style.display = 'none';
errors.textContent = '';
} else {
// తిరిగి వచ్చిన యూజర్: వారి సేవ్ చేసిన డేటాను ఆటోమేటిగ్గా లోడ్ చేయండి
displayCarbonUsage(storedApiKey, storedRegion);
results.style.display = 'none';
form.style.display = 'none';
clearBtn.style.display = 'block';
}
}
function reset(e) {
e.preventDefault();
// కొత్త ప్రాంతాన్ని ఎంచుకునేందుకు నిల్వ చేసిన ప్రాంతాన్ని క్లియర్ చేయండి
localStorage.removeItem('regionName');
// ప్రారంభ ప్రక్రియను రీస్టార్ట్ చేయండి
init();
}
```
**ఇక్కడ జరుగుతున్నది:**
- బ్రౌజర్ లోకల్ స్టోరేజ్ నుండి నిల్వ చేయబడిన API కీ మరియు ప్రాంతాన్ని తీసుకుంటుంది
- ఇది మొదటి సారి ఉపయోగిస్తున్నవారో (నిల్వ చేయబడిన ధృవపత్రాలు లేవో) లేదా తిరిగి వచ్చిన వినియోగదారో చెక్ చేస్తుంది
- కొత్త వినియోగదారుల కోసం సెటప్ ఫారం చూపుతుంది మరియు ఇతర UI అంశాలను దాచుతుంది
- తిరిగి వచ్చిన వినియోగదారుల కోసం స్వయంగా సঞ্চయించిన డేటాను లోడ్ చేసి రీసెట్ ఆప్షన్ చూపిస్తుంది
- అందుబాటులో ఉన్న డేటాపై ఆధారపడి యూజర్ ఇంటర్‌ఫేస్ స్టేట్‌ను నిర్వహిస్తుంది
**లోకల్ స్టోరేజ్ గురించి ముఖ్యమైన భావనలు:**
- బ్రౌజర్ సెషన్స్ మధ్య డేటాను నిలిపివేస్తుంది (సెషన్ స్టోరేజ్‌తో పోలిస్తే)
- `getItem()` మరియు `setItem()` ఉపయోగించి కీ-వెల్యూ జోడింపుగా డేటాను నిల్వ చేస్తుంది
- ఒక కీకి డేటా లేనప్పుడు `null` తిరిగి ఇస్తుంది
- వినియోగదారుల ప్రాధమ్యాలు మరియు సెట్టింగ్స్ గుర్తుంచుకోవడం కోసం సులభమైన మార్గం అందిస్తుంది
> 💡 **బ్రౌజర్ స్టోరేజ్ అర్థం చేసుకోండి**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) మీ పొడగింపుకు దృఢమైన స్మృతి ఇస్తుంది. ప్రాచీన అలెగ్జాండ్రియా గ్రంథాలయం రెక్కలుగా స్మృతిని నిలిపినట్లు ఆలోచించండి - శాస్త్రజ్ఞులు వెళ్లిపోయినా సమాచారం అందుబాటులో ఉంటుంది.
>
> **ప్రధాన లక్షణాలు:**
> - బ్రౌజర్ మూసివేసినప్పటికీ డేటా నిలుస్తుంది
> - కంప్యూటర్ రీస్టార్ట్‌లు, బ్రౌజర్ క్రాష్‌లను తట్టుకొంటుంది
> - వినియోగదారుల ప్రాధమ్యాలకు పెద్ద నిల్వ స్థలం అందిస్తుంది
> - నెట్‌వర్క్ ఆలస్యం లేకుండా తక్షణ యాక్సెస్ ఇస్తుంది
> **గురుతింపు**: మీ బ్రౌజర్ పొడగింపుకు ప్రత్యేకమైన లోకల్ స్టోరేజ్ ఉంటుంది, ఇది సాధారణ వెబ్ పేజీల నుండి వేరుగా ఉంటుంది. ఇది భద్రతను కలిగించి ఇతర వెబ్‌సైట్లు మధ్య కలకలం నివారిస్తుంది.
మీ నిల్వ చేసిన డేటాను చూడటానికి బ్రౌజర్ డెవలపర్ టూల్స్ (F12) తెరవాలి, ఆపై **Application** ట్యాబ్‌కు వెళ్లి **Local Storage** విభాగాన్ని విస్తరించండి.
```mermaid
stateDiagram-v2
[*] --> CheckStorage: ఎక్స్‌టెన్షన్ మొదలవుతుంది
CheckStorage --> FirstTime: నిల్వ డేటా లేదు
CheckStorage --> Returning: డేటా చెక్ చేయబడింది
FirstTime --> ShowForm: సెటప్ ఫారమ్ ప్రదర్శించు
ShowForm --> UserInput: వినియోగదారు డేటా నమోదు చేస్తార
UserInput --> SaveData: localStorage లో నిల్వ
SaveData --> FetchAPI: కార్బన్ డేటా తెచ్చుకోండి
Returning --> LoadData: localStorage నుండి చదవండి
LoadData --> FetchAPI: కార్బన్ డేటా తెచ్చుకోండి
FetchAPI --> ShowResults: డేటా ప్రదర్శన
ShowResults --> UserAction: వినియోగదారు చర్య
UserAction --> Reset: క్లియర్ బటన్ నొక్కారు
UserAction --> ShowResults: డేటా వీక్షణ
Reset --> ClearStorage: నిల్వ డేటాను తొలగించు
ClearStorage --> FirstTime: సెటప్ కు తిరుగు
```
![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d1.te.png)
> ⚠️ **భద్రతా పరామర్శ**: ఉత్పత్తి అనువర్తనాల్లో, API కీలు LocalStorage లో నిల్వ చేయడం భద్రతా ప్రమాదాలను కలిగిస్తుంది ఎందుకంటే జావాస్క్రిప్ట్ ఈ డేటాకు యాక్సెస్ చేయగలదు. పాఠశాలలో ఈ విధానం సరైనది, కానీ నిజమైన అనువర్తనాలు సున్నితమైన ధారవాహికలకు సురక్షిత సర్వర్-సైడ్ నిల్వను ఉపయోగించాలి.
## ఫారం సమర్పణను నిర్వహించండి
ఇప్పుడు ఎవరో మీ ఫారాన్ని సమర్పించినప్పుడు ఏమవుతుంది అనేది చూస్తాము. డిఫాల్ట్‌గా, బ్రౌజర్లు ఫారం సమర్పించినప్పుడు పేజీని రీలోడ్ చేస్తాయి, కానీ మనం ఈ ప్రవర్తనను అడ్డుకుంటూ మృదువైన అనుభవం సృష్టిస్తాము.
ఈ విధానం మిషన్ కంట్రోల్ ఎలాంటి వ్యవస్థను ప్రతి ప్రచారం కోసం రీసెట్ చేయకుండా, నిరంతరంగా ఆపరేట్ చేస్తూ కొత్త సమాచారాన్ని ప్రాసెస్ చేసే విధానాన్ని సూచిస్తుంది.
ఫామ్ సమర్పణ ఈవెంట్‌ను పట్టుకొని వినియోగదారు ఇన్‌పుట్‌ను తీసుకునే ఫంక్షన్‌ను సృష్టించండి:
```javascript
function handleSubmit(e) {
e.preventDefault();
setUpUser(apiKey.value, region.value);
}
```
**పై కోడ్‌లో:**
- పేజీ రీలోడ్ అయ్యే డిఫాల్ట్ ఫారం సమర్పణ ప్రవర్తనను అడ్డుకుంటుంది
- API కీ మరియు ప్రాంత ఫీల్డ్‌ల నుంచి వినియోగదారు ఇన్‌పుట్ విలువలను తీసుకుంటుంది
- ప్రాసెసింగ్ కోసం `setUpUser()` ఫంక్షన్‌కు ఫారం డేటాను పంపిస్తుంది
- సింగిల్-పేజీ అప్లికేషన్ ప్రవర్తనను నిలుపుకోవడానికి పేజీ రీలోడ్స్‌ నివారిస్తుంది
✅ మీ HTML ఫారం ఫీల్డ్‌లలో `required` అట్రిబ్యూట్ ఉన్నందున బ్రౌజర్ ఆ ట్రమ్ ఫంక్షన్లు అమలయ్యే ముందు వినియోగదారు API కీ, ప్రాంతం రెండింటినీ ఇవ్వాలని ఆటోమేటిక్ గా ధ్రువీకరిస్తుంది.
## వినియోగదారు ప్రాధమ్యాలను సెటప్ చేయండి
`setUpUser` ఫంక్షన్ వినియోగదారుడి ధృవపత్రాలను సేవ్ చేసి మొదటి API కాల్‌ను ప్రారంభిస్తుంది. ఇది సెటప్ నుండి ఫలితాల ప్రదర్శనకు సాఫీ మార్పును సృష్టిస్తుంది.
```javascript
function setUpUser(apiKey, regionName) {
// భవిష్యత్ సెషన్‌ల కోసం వినియోగదారు సాక్ష్యాలును సేవ్ చేయండి
localStorage.setItem('apiKey', apiKey);
localStorage.setItem('regionName', regionName);
// లోడింగ్ స్థితిని చూపడానికి UI నవీకరించండి
loading.style.display = 'block';
errors.textContent = '';
clearBtn.style.display = 'block';
// వినియోగదారుని సాక్ష్యాలతో కార్బన్ వినియోగ డేటాను దిగుమతి చేసుకోండి
displayCarbonUsage(apiKey, regionName);
}
```
**స్టెప్ బై స్టెప్:**
- API కీ మరియు ప్రాంత명을 భవిష్యత్తులకు లోకల్ స్టోరేజ్‌లో నిల్వ చేస్తుంది
- డేటా తీసుకురావడాన్ని తెలియజేయడానికి లోడింగ్ సూచికను చూపిస్తుంది
- ప్రదర్శన నుంచి పూర్వ లోప సందేశాలను తొలగిస్తుంది
- వినియోగదారులు వారి సెట్టింగ్స్‌ను రీసెట్ చేయడానికి క్లియర్ బటన్‌ను చూపిస్తుంది
- నిజమైన కార్బన్ వాడుక డేటాను పొందేందుకు API కాల్‌ను మొదలుపెడుతుంది
ఈ ఫంక్షన్ డేటా నిలుపుదల మరియు UI నవీకరణలను ఒక సమన్వయ కృత్యంలో నిర్వహిస్తూ వినియోగదారుడికి సాఫీ అనుభవాన్ని అందిస్తుంది.
## కార్బన్ వాడుక డేటాను ప్రదర్శించండి
ఇప్పుడు మనం మీ పొడగింపును API ల ద్వారా బహిరంగ డేటా సోర్సులను కనెక్ట్ చేస్తాము. ఇది మీ పొడగింపును స్టాండ్ఎలోన్ టూల్ కంటే బయట నుండి నిజ కాల సమాచారాన్ని యాక్సెస్ చేసే సాధనంగా మార్చుతుంది.
**APIs అర్థం చేసుకోవడం**
[APIs](https://www.webopedia.com/TERM/A/API.html) అనేవి వివిధ అనువర్తనాలు ఎలా పరస్పరం సంభాషిస్తాయో చూపిస్తాయి. వీటిని 19వ శతాబ్దంలో దూర నగరాలను కలిపే టెలిగ్రాఫ్ వ్యవస్థగా చూడవచ్చు - ఆపరేటర్లు దూరపు స్టేషన్లకు అభ్యర్థనలు పంపి కోరిన సమాచారంతో ప్రతిస్పందనలు స్వీకరించేవారు. మీరు సోషల్ మీడియాను చూస్తున్నప్పుడు, వాయిస్ అసిస్టెంట్ ప్రశ్న అడిగినప్పుడు లేదా డెలివరీ యాప్ వాడినప్పుడు APIs ఈ డేటా మార్పిడులను సులభతరం చేస్తాయి.
```mermaid
flowchart TD
A[మీ ఎక్స్టెన్షన్] --> B[HTTP అభ్యర్థన]
B --> C[CO2 సిగ్నల్ API]
C --> D{చెల్లుబాటు అయ్యే అభ్యర్థనా?}
D -->|అవును| E[డేటాబేస్ ను విచారించండి]
D -->|లేదు| F[లోపం తిరిగి ఇవ్వండి]
E --> G[కార్బన్ డేటా]
G --> H[JSON జవాబు]
H --> I[మీ ఎక్స్టెన్షన్]
F --> I
I --> J[UI ను అప్‌డేట్ చేయండి]
subgraph "API అభ్యర్థన"
K[శీర్షికలు: auth-token]
L[పారామితులు: countryCode]
M[విధానము: GET]
end
subgraph "API జవాబు"
N[కార్బన్ తీవ్రత]
O[ఫాసిల్ ఇంధనం శాతం]
P[కాలముద్ర]
end
style C fill:#e8f5e8
style G fill:#fff3e0
style I fill:#e1f5fe
```
**REST APIs గురించి ముఖ్యమైన భావనలు:**
- REST అర్థం 'Representational State Transfer'
- డేటాతో చేపట్టేందుకు సాధారణ HTTP పద్ధతులు(GET, POST, PUT, DELETE) ఉపయోగిస్తుంది
- డేటాను సాధారణంగా JSON ఫార్మాట్‌లో తిరిగి ఇస్తుంది
- వివిధ రకాల అభ్యర్థనలకు సుదృఢ URL ఆధారిత ఎండ్పాయింట్లను అందిస్తుంది
✅ మనం ఉపయోగించబోయే [CO2 సిగ్నల్ API](https://www.co2signal.com/) ప్రపంచవ్యాప్తంగా విద్యుత్ గ్రిడ్‌ల నుండి నిజకాల కార్బన్ తీవ్రత సమాచారం ఇస్తుంది. ఇది వినియోగదారులకు వారి విద్యుత్ ఉపయోగం పర్యావరణ ప్రభావం గురించి అవగాహన కల్పిస్తుంది!
> 💡 **అసింక్రోనస్ జావాస్క్రిప్ట్ అర్థం చేసుకోండి**: [`async` కీవర్డ్](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) మీ కోడ్‌ను ఒకేసారి బహుళ క్రియాకలాపాలను నిర్వహించేందుకు అనుమతిస్తుంది. మీరు సర్వర్ నుండి డేటాను అభ్యర్థించే సమయంలో, మీ పొడగింపు మొత్తం ఎక్కడా ఆగకూడదు - అది ఏరో ట్రాఫిక్ కంట్రోల్ ఒక విమానం స్పందించముందు అన్ని ఆపరేషన్లు ఆపివేసిన తీరు కాదు.
>
> **ముఖ్య లాభాలు:**
> - డేటా లోడ్ అయ్యేవరకు పొడగింపు స్పందనशीलంగా ఉంటుంది
> - నెట్‌వర్క్ అభ్యర్థనల సమయంలో ఇతర కోడ్ అమలవ్వగలదు
> - సంప్రదాయ కాల్‌బ్యాక్ పద్ధతుల కన్నా చదవడానికి సులభం
> - నెట్‌వర్క్ సమస్యలకు సాఫీ లోప నిర్వహణ ఇస్తుంది
ఇదిగో `async` పై చిన్న వీడియో:
[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
> 🎥 పై చిత్రం మీద క్లిక్ చేసి async/await గురించి వీడియోను చూడండి.
### 🔄 **పాఠశాల తనిఖీ**
**Async ప్రోగ్రామింగ్ అర్థం చేసుకోండి**: API ఫంక్షన్‌లోకి వెళ్లే ముందు తెలుసుకోండి:
- ✅ ఎందుకు మనం మొత్తం పొడగింపును బ్లాక్ చేయకుండా `async/await` ఉపయోగిస్తామో
- ✅ `try/catch` బ్లాకులు నెట్‌వర్క్ లోపాలను సాఫీగా ఎలా నిర్వహిస్తాయో
- ✅ సమకాలీన (సింక్రోనస్) మరియు అసమకాలీన (అసింక్రోనస్) ఆపరేషన్‌ల మధ్య తేడా
- ✅ API కాల్స్ ఎందుకు నిర్లక్ష్యం అయ్యే అవకాశముంది మరియు వాటిని ఎలా పరిష్కరించాలో
**వాస్తవ ప్రపంచ అనుసంధానం**: ఈ దైనందిన అసింక్రో ఉదాహరణల గురించి ఆలోచించండి:
- **ఆపిల్ ఆర్డర్ చేయటం**: మీరు వంటగదీ ముందు నిలబడు వద్దు, రసీదు తీసుకుని ఇతర పనులు చేయవచ్చు
- **ఈమెయిల్స్ పంపడం**: మీ ఈమెయిల్ యాప్ పంపేమీ సమయంలో ఫ్రీజ్ అవ్వదు - మరిన్ని ఈమెయిల్స్ రచించవచ్చు
- **వెబ్ పేజీలు లోడ్ కావటం**: చిత్రం దశలవారీగా లోడ్ అవుతుంటే మీరు ఇప్పటికే టెక్స్ట్ చదవవచ్చు
**API ధృవీకరణ ప్రవాహం**:
```mermaid
sequenceDiagram
participant Ext as విస్తరణ
participant API as CO2 సిగ్నల్ API
participant DB as డేటాబేస్
Ext->>API: ఆథ్-టోకెన్ తో అభ్యర్థన
API->>API: టోకెన్ ని ధృవీకరించండి
API->>DB: కార్బన్ డేటా విచారణ
DB->>API: డేటా తిరిగి ఇవ్వు
API->>Ext: JSON స్పందన
Ext->>Ext: UI నవీకరణ
```
కార్బన్ వాడుక డేటా తీసుకురావడానికి ఫంక్షన్ సృష్టించండి:
```javascript
// ఆధునిక fetch API విధానం (బాహ్య ఆధారాలు అవసరం లేదు)
async function displayCarbonUsage(apiKey, region) {
try {
// CO2 సిగ్నల్ API నుండి కార్బన్ తీవ్రత డేటాను తీసుకోండి
const response = await fetch('https://api.co2signal.com/v1/latest', {
method: 'GET',
headers: {
'auth-token': apiKey,
'Content-Type': 'application/json'
},
// నిర్దిష్ట ప్రాంతం కోసం ప్రశ్న పరామితులను జోడించండి
...new URLSearchParams({ countryCode: region }) && {
url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
}
});
// API అభ్యర్థన విజయవంతమైందా అని తనిఖీ చేయండి
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`);
}
const data = await response.json();
const carbonData = data.data;
// ముడతలు పెట్టిన కార్బన్ తీవ్రత విలువను లెక్కించండి
const carbonIntensity = Math.round(carbonData.carbonIntensity);
// తీసుకున్న డేటాతో వినియోగదారు ఇంటర్‌ఫేస్ ను నవీకరించండి
loading.style.display = 'none';
form.style.display = 'none';
myregion.textContent = region.toUpperCase();
usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
results.style.display = 'block';
// TODO: calculateColor(carbonIntensity) - తదుపరి పాఠంలో అమలు చేయాలి
} catch (error) {
console.error('Error fetching carbon data:', error);
// వినియోగదారులకు స్నేహపూర్వక దోష సందేశాన్ని చూపించండి
loading.style.display = 'none';
results.style.display = 'none';
errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
}
}
```
**ఇక్కడ ఏమవుతుంది:**
- అదనపు లైబ్రరీలు లేకుండా శుభ్రంగా, ఆధునిక `fetch()` API ఉపయోగించడం
- `response.ok` తో సరైన లోప తనిఖీ అమలు చేసి API విఫలమైతే ముందుగానే పట్టుకోవడం
- అసింక్రోనస్ ఆపరేషన్లను `async/await` తో రూపొందించి చదవడానికి సులభం చేయడం
- CO2 సిగ్నల్ APIతో `auth-token` హెడర్ ద్వారా ధృవీకరణ చేయడం
- JSON ప్రతిస్పందన డేటా పార్థన చేసి కార्बన్ తీవ్రత సమాచారాన్ని తీసుకోవడం
- పర్యావరణ డేటాతో UI లో అనేక ఎలిమెంట్లను నవీకరించడం
- API కాల్స్ విఫలమైనప్పుడు వినియోగదారుకు స్నేహపూర్వక లోప సందేశాలను అందించడం
**ప్రముఖ ఆధునిక జావాస్క్రిప్ట్ భావనలు:**
- `${}` సింటాక్స్ తో టెంప్లేట్ లిటరల్స్ ఉపయోగించి శుభ్రంగా స్ట్రింగ్ తయారు చేయడం
- try/catch బ్లాకులతో లోప నిర్వహణ నిర్వహించడం
- async/await పద్ధతి తో నెట్‌వర్క్ అభ్యర్థనలను సులభతరంగా నిర్వహించడం
- ఓబ్జెక్ట్ డిస్ట్రక్చరింగ్ ద్వారా API ప్రతిస్పందన నుండి అవసరమైన డేటా తీసుకురావడం
- మెథడ్ చైనింగ్ తో బహుళ DOM మానిప్యులేషన్లను చేయడం
✅ ఈ ఫంక్షన్ బాహ్య సర్వర్‌లతో కమ్యూనికేట్ చేయడం, ధృవీకరణ, డేటా ప్రాసెసింగ్, ఇంటర్‌ఫేస్ నవీకరణలు మరియు లోపాల నిర్వహణ వంటి అనేక కీలక వెబ్ డెవలప్‌మెంట్ నైపుణ్యాలు ప్రదర్శిస్తుంది. ఇవి నిపుణుల డెవలపర్ల ముఖ్యం.
```mermaid
flowchart TD
A[API కాల్ ప్రారంభించండి] --> B[అనురোধాన్ని తీసుకోండి]
B --> C{నెట్‌వర్క్ విజయమా?}
C -->|ఏఠ| D[నెట్‌వర్క్ లోపం]
C -->|అవును| E{ప్రతిస్పందన సరియా?}
E -->|ఏఠ| F[API లోపం]
E -->|అవును| G[JSON పార్స్ చేయండి]
G --> H{డేటా చెల్లుబాటు సా?}
H -->|ఏఠ| I[డేటా లోపం]
H -->|అవును| J[UI ని నవీకరించండి]
D --> K[లోప సందేశం ప్రదర్శించండి]
F --> K
I --> K
J --> L[లోడింగ్ దాచండి]
K --> L
style A fill:#e1f5fe
style J fill:#e8f5e8
style K fill:#ffebee
style L fill:#f3e5f5
```
### 🔄 **పాఠశాల తనిఖీ**
**సంపూర్ణ వ్యవస్థ అర్థం చేసుకోండి**: మొత్తం ప్రవాహంపై పట్టు కుదించండి:
- ✅ DOM సూచనలు జావాస్క్రిప్ట్ ఇంటర్‌ఫేస్ నియంత్రణకు ఎలా సహాయపడతాయో
- ✅ బ్రౌజర్ సెషన్స్ మధ్య లోకల్ స్టోరేజ్ నిరంతరత్వాన్ని ఎలా పుట్టిస్తుందో
- ✅ API కాల్స్ సమయంలో పొడగింపు ఫ్రీజ్ కాకుండా async/await ఎలా సహాయపడుతుందో
- ✅ API కాల్స్ విఫలమైతే ఏమవుతుంది మరియు లోపాల నిర్వహణ ఎలా జరుగుతుందో
- ✅ లోడింగ్ స్టేట్స్ మరియు లోప సందేశాలు వినియోగదారు అనుభవంలో ఎందుకు అవసరం
🎉 **మీ సాధనాలు:** మీరు క్రింది పనులు చేసే బ్రౌజర్ పొడగింపుని సృష్టించారు:
- **ఇంటర్నెట్‌కు కనెక్ట్ అవుతుంది మరియు నిజమైన పర్యావరణ డేటాను పొందుతుంది**
- **సెషన్స్ మధ్య వినియోగదారుల సెట్టింగ్స్‌ను నిలుపుతుంది**
- **లోపాల వల్ల క్రాష్ కాకుండా సాఫీగా నిర్వహిస్తుంది**
- **సక్రమతతో కూడిన, ప్రొఫెషనల్ వినియోగదారు అనుభవాన్ని అందిస్తుంది**
మీ పనిని పరీక్షించడానికి `npm run build` నడపండి మరియు బ్రౌజర్‌లో మీ పొడగింపును రీఫ్రెష్ చేయండి. మీకు ఇప్పుడు పనిచేసే కార్బన్ ఫుట్ ప్రింట్ ట్రాకర్ ఉంది. తదుపరి పాఠం డైనమిక్ ఐకాన్ ఫంక్షనాలిటీని జోడిస్తుంది.
---
## GitHub Copilot ఏజెంట్ చాలెంజ్ 🚀
క్రింద ఇచ్చిన చాలెంజ్‌ను Agent మోడ్ ఉపయోగించి పూర్తి చేయండి:
**వివరణ:** బ్రౌజర్ విస్తరణను ఎర్రర్ హ్యాండ్లింగ్ మెరుగింపలతో మరియు వాడుకరి అనుభవ ప్రత్యేకతలతో మరింత అభివృద్ధి చేయండి. ఈ ఛాలెంజ్ ద్వారా మీరు APIs, లోకల్ స్టోరేజ్ మరియు DOM మ్యానిప్యులేషన్‌ను ఆధునిక జావాస్క్రిప్ట్ నమూనాల్లో ఎలా ఉపయోగించాలో అభ్యసించగలరు.
**ప్రాంప్ట్:** డిస్ప్లేకార్బన్యూసేజ్ ఫంక్షన్ యొక్క అభివృద్ధిచేసిన వెర్షన్‌ను సృష్టించండి, ఇది ఇలా ఉండాలి: 1) విఫలమైన API కాల్‌ల కోసం ఎక్స్‌పోనెన్షియల్ బ్యాక్ ఆఫ్‌తో రిట్రై మెకానిజం, 2) API కాల్ చేసే ముందు регион కోడ్ కోసం ఇన్పుట్ ధృవీకరణ, 3) ప్రోగ్రెస్ సూచికలతో లోడింగ్ అనిమేషన్, 4) API స్పందనలను localStorageలో 30 నిమిషాల అవధితో క్యాష్ చేయడం, మరియు 5) పూర్వ API కాల్‌ల నుండి చరిత్రాత్మక డేటాను ప్రదర్శించే ఫీచర్. అన్ని ఫంక్షన్ పరామితులు మరియు రిటర్న్ టైప్స్ కోసం సరైన TypeScript-శైలీ JSDoc వ్యాఖ్యలను జోడించండి.
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## 🚀 ఛాలెంజ్
వెబ్ డెవలప్‌మెంట్ కోసం అందుబాటులో ఉన్న విస్తృత బ్రౌజర్ ఆధారిత APIలను అన్వేషిస్తూ APIలపై మీ అవగాహనను విస్తరించండి. ఈ క్రింది బ్రౌజర్ APIలలో ఒకటిని ఎంచుకుని ఒక చిన్న ప్రదర్శనని తయారుచేయండి:
- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - 사용자의 ప్రస్తుత లొకేషన్ పొందండి
- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - డెస్క్‌టాప్ నోటిఫికేషన్లు పంపండి
- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - ఇంటరాక్టివ్ డ్రాగ్ ఇంటర్‌ఫేస్లను సృష్టించండి
- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - ఆధునిక లోకల్ స్టోరేజ్ టెక్నిక్స్
- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - XMLHttpRequestకి ఆధునిక ప్రత్యామ్నాయం
**సాధన ప్రశ్నలు:**
- ఈ API నిజజీవిత సమస్యలను ఎలా పరిష్కరిస్తుంది?
- ఈ API ఎర్రర్లు మరియు ఎడ్జ్ కేసులను ఎలా హ్యాండిల్ చేస్తుంది?
- ఈ API ఉపయోగించే సమయంలో ఏమి భద్రతా ఆలోచనలు ఉన్నాయి?
- ఈ API విభిన్న బ్రౌజర్లలో ఎంతవరకు మద్దతు పొందింది?
మీ పరిశోధన తర్వాత, ఏ లక్షణాలు APIని అభివృద్ధిదారులకు స్నేహపూర్వకంగా మరియు విశ్వసనీయంగా చేస్తాయో గుర్తించండి.
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/26)
## సమీక్ష & స్వయం అభ్యాసం
ఈ పాఠంలో మీరు LocalStorage మరియు APIs గురించి నేర్పుకున్నారు, ఇవి ప్రొఫెషనల్ వెబ్ డెవలపర్లకు ఎంతో ఉపయోగకరమైనవి. ఈ రెండు భావాలను ఎలా కలిసి పని చేస్తాయో మీరు ఆలోచించగలరా? ఒక API ఉపయోగించే వెబ్ సైట్ తయారీలో మీరు ఎలా స్థాపిస్తారో ఆలోచించండి.
### ⚡ **తదుపరి 5 నిమిషాలలో మీరు చేయగల పనిచేస్తే**
- [ ] DevToolsలో Application ట్యాబ్ తెరచి ఏదైనా వెబ్‌సైట్‌లో localStorageని అన్వేషించండి
- [ ] ఒక సాదాసీదా HTML ఫారం సృష్టించి బ్రౌజర్‌లో ఫారం ధృవీకరణను పరీక్షించండి
- [ ] localStorageలో డేటా నిల్వ చేయడం మరియు తీసుకోవడం బ్రౌజర్ కన్సోల్ లో ప్రయత్నించండి
- [ ] నెట్‌వర్క్ ట్యాబ్ ఉపయోగించి ఫారం డేటా సమర్పణను పరిశీలించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలవు**
- [ ] పోస్ట్-పాఠం క్విజ్ పూర్తి చేసి ఫారం హ్యాండ్లింగ్ కాన్సెప్ట్‌లు అర్థం చేసుకోండి
- [ ] వాడుకరి అభిరుచులను నిల్వ చేసే బ్రౌజర్ విస్తరణ ఫారం నిర్మించండి
- [ ] సహాయక ఎర్రర్ సందేశాలతో క్లైంట్-సైడ్ ఫారం ధృవీకరణ అమలు చేయండి
- [ ] విస్తరణ డేటా నిల్వకోసం chrome.storage API ఉపయోగంపై అభ్యాసం
- [ ] నిల్వ చేసిన వాడుకరి సెట్టింగులకు ప్రతిస్పందించే వాడుకరి ఇంటర్‌ఫేస్ సృష్టించండి
### 📅 **మీ వారాంత విస్తరణ నిర్మాణం**
- [ ] ఫుల్-ఫీచర్ బ్రౌజర్ విస్తరణను ఫారం ఫంక్షనాలిటితో పూర్తి చేయండి
- [ ] లోకల్, సింట్, సెషన్ స్టోరేజ్ వంటి వివిధ నిల్వ ఎంపికలను ప్రావీణ్యం చేయండి
- [ ] ఆటోకంప్లీట్ మరియు ధృవీకరణ వంటి అధునాతన ఫారం ఫీచర్లను అమలు చేయండి
- [ ] వాడుకరి డేటా కోసం దిగుమతి/ఎగుమతి ఫంక్షనాలిటీను చేర్చండి
- [ ] విస్తరణను విభిన్న బ్రౌజర్లలో పూర్వకంగా పరీక్షించండి
- [ ] విస్తరణ యొక్క వాడుకరి అనుభవం మరియు ఎర్రర్ హ్యాండ్లింగ్‌ను మెరుగుపరచండి
### 🌟 **మీ నెల ఘనమైన వెబ్ API నైపుణ్యం**
- [ ] వివిధ బ్రౌజర్ స్టోరేజ్ APIలను ఉపయోగించి క్లిష్టమైన అప్లికేషన్లను సృష్టించండి
- [ ] ఆఫ్‌లైన్-ఫస్ట్ అభివృద్ధి నమూనాలపై నేర్పుకోండి
- [ ] డేటా నిల్వ సమస్యలు ఉన్న ఓపెన్ సోర్స్ ప్రాజెక్టులకు సహాయం చేయండి
- [ ] ప్రైవసీ కేంద్రీకృత అభివృద్ధి మరియు GDPR అనుగుణతలో ప్రావీణ్యం సాధించండి
- [ ] ఫారం హ్యాండ్లింగ్ మరియు డేటా నిర్వహణకు పునర్వినియోగపరచదగిన లైబ్రరీలు సృష్టించండి
- [ ] వెబ్ APIలు మరియు విస్తరణ అభివృద్ధి గురించి జ్ఞానం పంచుకోండి
## 🎯 మీ విస్తరణ అభివృద్ధి నైపుణ్య కాలనిర్వచన
```mermaid
timeline
title API ఇంటిగ్రేషన్ & నిల్వ నేర్చుకునే పురోగతి
section DOM మౌలికాలు (15 నిమిషాలు)
ఎలిమెంట్ సూచనలు: querySelector నైపుణ్యం
: ఈవెంట్ లిసనర్ సెటప్
: స్థితి నిర్వహణ మూలాలు
section లోకల్ స్టోరేజ్ (20 నిమిషాలు)
డేటా నిలుపుదల: కీ-విలువ నిల్వ
: సెషన్ నిర్వహణ
: వినియోగదారు ప్రాధాన్యత నిర్వహణ
: నిల్వ పరిశీలన పరికరాలు
section ఫారం నిర్వహణ (25 నిమిషాలు)
వినియోగదారు ఇన్‌పుట్: ఫారం ధ్రువీకరణ
: ఈవెంట్ నిరోధం
: డేటా తీర్మానం
: UI స్థితి మార్పులు
section API ఇంటిగ్రేషన్ (35 నిమిషాలు)
బయటి కమ్యూనికేషన్: HTTP అభ్యర్థనలు
: ప్రామాణీకరణ నమూనాలు
: JSON డేటా పార్సింగ్
: ప్రతిస్పందన నిర్వహణ
section అసింక్రో ప్రోగ్రామింగ్ (40 నిమిషాలు)
ఆధునిక జావాస్క్రిప్ట్: ప్రామిస్ నిర్వహణ
: అసింక్/అవైట్ నమూనాలు
: తప్పుడు నిర్వహణ
: నాన్-బ్లాకింగ్ ఆపరేషన్లు
section తప్పిద నిర్వహణ (30 నిమిషాలు)
బలమైన అప్లికేషన్లు: ట్రై/క్యాచ్ బ్లాక్స్
: వినియోగదారుకు స్నేహపూర్వక సందేశాలు
: సౌమ్యంగా తగ్గింపు
: డీబగ్గింగ్ సాంకేతికతలు
section అధునాతన నమూనాలు (1 వారం)
వృద్దిపరచడం: క్యాషింగ్ వ్యూహాలు
: రేట్ పరిమితి
: రీట్రై యాంత్రికతలు
: పనితీరు మెరుగుదల
section ప్రొడక్షన్ నైపుణ్యాలు (1 నెల)
ఎంటర్‌ప్రైజ్ ఫీచర్లు: భద్రత ఉత్తమ పద్ధతులు
: API వెర్షనింగ్
: మానిటరింగ్ & లాగింగ్
: విస్తరణాత్మక వాస్తవికరణ
```
### 🛠️ మీ పూర్తి-స్టాక్ అభివృద్ధి టూల్‌కిట్ సారాంశం
ఈ పాఠం పూర్తి చేసిన తరువాత, మీరు ఇప్పుడు కలిగి ఉన్నారు:
- **DOM నైపుణ్యం**: ఖచ్చితమైన ఎలిమెంట్ లక్ష్యీకరణ మరియు మ్యానిప్యులేషన్
- **స్టోరేజ్ నైపుణ్యం**: localStorageతో నిల్వ డేటా నిర్వహణ
- **API సమ్మేళనం**: రియల్-టైమ్ డేటా ఫెッチింగ్ మరియు ప్రామాణీకరణ
- **అసింక్రోనస్ ప్రోగ్రామింగ్**: ఆధునిక జావాస్క్రిప్ట్‌తో నాన్-బ్లాకింగ్ ఆపరేషన్లు
- **ఎర్రర్ హ్యాండ్లింగ్**: విఫలతలను శ్రద్ధగా నిర్వహించే మద్దతు
- **వాడుకరి అనుభవం**: లోడింగ్ స్టేట్ల, ధృవీకరణ, సరళమైన ఇంటరాక్షన్లు
- **ఆధునిక నమూనాలు**: fetch API, async/await, మరియు ES6+ ఫీచర్లు
**ప్రొఫెషనల్ నైపుణ్యాలు పొందారు**: మీరు ఈ నమూనాలను అమలు చేశారు:
- **వెబ్ అప్లికేషన్లు**: బాహ్య డేటా సోర్సులతో సింగిల్-పేజ్ యాప్స్
- **మొబైల్ అభివృద్ధి**: ఆఫ్‌లైన్ సామర్థ్యాలతో API-చలన యాప్స్
- **డెస్క్‌టాప్ సాఫ్ట్‌వేర్**: ఎలెక్ట్రాన్ యాప్స్‌తో నిల్వ
- **ఎంటర్ప్రైజ్ సిస్టమ్స్**: ప్రామాణీకరణ, క్యాషింగ్, మరియు ఎర్రర్ హ్యాండ్లింగ్
- **ఆధునిక ఫ్రేమ్‌వర్క్స్**: React/Vue/Angular డేటా నిర్వహణ నమూనాలు
**తదుపరి దశ**: క్యాషింగ్ వ్యూహాలు, రియల్-టైమ్ WebSocket కనెక్షన్లు లేదా క్లిష్ట స్టేట్ మేనేజ్‌మెంట్ వంటి అధునాతన అంశాలను అన్వేషించడానికి మీరు సిద్ధంగా ఉన్నారు!
## అసైన్‌మెంట్
[Adopt an API](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అసత్య ప్రకట:**
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తూనే ఉన్నప్పటికీ, ఆటోమేటెడ్ అనువాదాలు లోపాలు లేదా అసత్యతలు ఉండవచ్చు. మౌలిక భాషలో ఉన్న అసలు పత్రాన్ని విశ్వసనీయ మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, నిపుణుల చేతుల అనువాదం చేయించడం సూచించబడుతుంది. ఈ అనువాదం వలన కలిగే ఏవైనా అపార్థాలు లేదా తప్పుదారితీసే అర్థాలు గురించి మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

109
translations/te/5-browser-extension/2-forms-browsers-local-storage/assignment.md
Unescape View File

@ -0,0 +1,109 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "25b8d28b8531352d4eb67291fd7824c4",
"translation_date": "2026-01-08T15:17:04+00:00",
"source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
"language_code": "te"
}
-->
# APIని అంగీకరించండి
## అవలోకనం
APIs సృజనాత్మక వెబ్ అభివృద్ధికి ఎంతగానో అవకాశాలు తెరుస్తాయి! ఈ అసైన్‌మెంట్‌లో, మీరు ఒక బయటి APIని ఎంచుకుని, ఓ రియల్ సమస్యను పరిష్కరించగల లేదా వినియోగదారులకు విలువైన ఫంక్షనాలిటీని అందించే బ్రౌజర్ ఎక్స్‌టెన్షన్ నిర్మించాలి.
## సూచనాలు
### దశ 1: మీ APIను ఎంచుకోండి
ఈ కూర్పుచేసిన [ఉచిత పబ్లిక్ APIs జాబితా](https://github.com/public-apis/public-apis) నుండి ఒక APIని ఎంచుకోండి. ఈ విభాగాలను పరిగణించండి:
**ప్రారంభకులకు ప్రయోగించదగిన ప్రముఖ ఎంపికలు:**
- **వినోదం**: రాండమ్ కుక్క ఫొటోలు కోసం [Dog CEO API](https://dog.ceo/dog-api/)
- **వాతావరణం**: ప్రస్తుత వాతావరణ సమాచారానికి [OpenWeatherMap](https://openweathermap.org/api)
- **ఉహాపోహలు**: ప్రేరణాత్మక ఉహాపోహలకు [Quotable API](https://quotable.io/)
- **సమాచారం**: ప్రస్తుత హెడ్లైన్స్ కోసం [NewsAPI](https://newsapi.org/)
- **ఆనందకరమైన గమ్యాలు**: ఆసక్తికర సంఖ్యా గమనికలకు [Numbers API](http://numbersapi.com/)
### దశ 2: మీ ఎక్స్‌టెన్షన్‌కు పథకం తయారు చేయండి
కోడింగ్ ప్రారంభించే ముందు ఈ ప్రణాళికా ప్రశ్నలకు సమాధానాలు ఇవ్వండి:
- మీ ఎక్స్‌టెన్షన్ ఏ సమస్యను పరిష్కరిస్తుంది?
- మీ లక్ష్య వినియోగదారెవరు?
- మీరు స్థానిక నిల్వలో ఎలాంటి డేటా నిల్వ చేయదలచుకున్నారు?
- API విఫలమైతే లేదా రేట్ పరిమితులు వచ్చేటప్పుడు మీరు ఎలా ఎదుర్కుంటారు?
### దశ 3: మీ ఎక్స్‌టెన్షన్ నిర్మించండి
మీ ఎక్స్‌టెన్షన్ లో ఉండాల్సినవి:
**అవసరమైన ఫీచర్లు:**
- ఏదైనా అవసరమైన API పారామీటర్ల కోసం ఫారమ్ ఇన్‌పుట్లు
- సరైన తప్పుల నిర్వహణతో API ఇంటిగ్రేషన్
- వినియోగదారుని ప్రాధాన్యతలు లేదా API కీలు నిల్వచేసేందుకు స్థానిక నిల్వ
- శుభ్రమైన, స్పందనాత్మక యూజర్ ఇంటర్ఫేస్
- లోడింగ్ స్థితులు మరియు వినియోగదారు ప్రతిక్రియ
**కోడ్ అవసరాలు:**
- ఆధునిక JavaScript (ES6+) ఫీచర్లు ఉపయోగించండి
- API కాల్స్ కోసం async/await అమలు చేయండి
- try/catch బ్లాక్‌లతో సరైన తప్పుల నిర్వహణను చేర్చండి
- మీ కోడ్‌ను వివరించే సార్థక వ్యాఖ్యలనివ్వండి
- స్థిరమైన కోడ్ ఫార్మాటింగ్ పాటించండి
### దశ 4: పరీక్షించండి మరియు మెరుగుపరచండి
- వివిధ ఇన్‌పుట్లతో మీ ఎక్స్‌టెన్షన్‌ను పరీక్షించండి
- అతి సరిహద్దులను నిర్వహించండి (ఇంటర్నెట్ లేనప్పుడు, చెల్లని API స్పందనలు)
- బ్రౌజర్ రీస్టార్ట్ తర్వాత మీ ఎక్స్‌టెన్షన్ పనిచేస్తుందో లేదో నిర్ధారించండి
- వినియోగదారుఉద్దేశ్యానికి అనుగుణమైన తప్పుల సందేశాలు జోడించండి
## బోనస్ సవాళ్లు
మీ ఎక్స్‌టెన్షన్‌ను తదుపరి దశకు తీసుకెళ్లండి:
- అధిక ఫంక్షనాలిటీ కోసం బహుళ API ఎండ్‌పాయింట్లను జోడించండి
- API కాల్స్ తగ్గించేందుకు డేటా కాషింగ్ అమలు చేయండి
- సాధారణ చర్యలకు కీబోర్డు షార్ట్‌కట్‌లు సృష్టించండి
- డేటా ఎక్స్‌పోర్ట్/ఇంపోర్ట్ ఫీచర్లను జోడించండి
- వినియోగదారు అనుకూలీకరణ ఎంపికలను అమలు చేయండి
## సమర్పణ అవసరాలు
1. మీరు ఎంచుకున్న APIతో విజయవంతంగా ఇంటిగ్రేట్ అయ్యే **పనిచేసే బ్రౌజర్ ఎక్స్‌టెన్షన్**
2. **README ఫైల్** వివరిస్తుంది:
- మీరు ఎంచుకున్న API మరియు ఎందుకు
- మీ ఎక్స్‌టెన్షన్‌ని ఎలా ఇన్‌స్టాల్ చేసి ఉపయోగించాలి
- ఏ API కీలు లేదా సెటప్ అవసరం ఉన్నా
- మీ ఎక్స్‌టెన్షన్ పని చేస్తున్నసందర్బంలో స్క్రీన్‌షాట్లు
3. ఆధునిక JavaScript ప్రథమాలు పాటిస్తూ సాఫీగా, వ్యాఖ్యలతో కూడిన కోడ్
## రూబ్రిక్
| ప్రమాణం | ఉత్తమత (90-100%) | ప్రావీణ్యం (80-89%) | అభివృద్ధి లో ఉంది (70-79%) | ప్రారంభం (60-69%) |
|----------|---------------------|---------------------|---------------------|--------------------|
| **API ఇంటిగ్రేషన్** | పూర్తి తప్పుల నిర్వహణ మరియు అతి సరిహద్దుల నిర్వహణతో ఉత్తమ API ఇంటిగ్రేషన్ | ప్రాథమిక తప్పుల నిర్వహణతో విజయవంతమైన API ఇంటిగ్రేషన్ | API పని చేస్తుంది కానీ తక్కువ తప్పుల నిర్వహణతో | API ఇంటిగ్రేషన్ లో ముఖ్యమైన సమస్యలున్నది |
| **కోడ్ నాణ్యత** | మంచి వ్యాఖ్యల‌తో కూడిన స్వచ్చమైన ఆధునిక JavaScript, ఉత్తమ ఆచారాలు పాటించినది | సరైన వ్యాఖ్యాలతో మంచి కోడ్ నిర్మాణం | కోడ్ పని చేస్తుంది కానీ మంచి నిర్వహణకు అంతగా లేవు | స్పష్టమైన వ్యాఖ్యలు లేకుండా తేలికపాటి కోడ్ నాణ్యత |
| **వినియోగదారు అనుభవం** | అతి మంచి లోడింగ్ స్థితులు మరియు వినియోగదారు ప్రతిస్పందనతో మెరుగైన ఇంటర్ఫేస్ | ప్రాథమిక వినియోగదారుఇన్పుట్‌తో మంచి ఇంటర్ఫేస్ | సరిపడిన ఇంటర్ఫేస్ | కలత కలిగించే ఇంటర్ఫేస్ తో తక్కువ యూజర్ అనుభవం |
| **స్థానిక నిల్వ** | డేటా ధృవీకరణ మరియు నిర్వహణతో ఆధునిక స్థానిక నిల్వ వాడకం | కీలక లక్షణాలకు సరైన స్థానిక నిల్వ అమలు | ప్రాథమిక స్థానిక నిల్వ అమలు | తక్కువ లేదా తప్పు స్థానిక నిల్వ వాడకం |
| **డాక్యుమెంటేషన్** | సెట్టప్ సూచనలు, స్క్రీన్‌షాట్లతో సమగ్ర README | మెజార్టీ అవసరాలను కవర్ చేసే మంచి డాక్యుమెంటేషన్ | కొంత అంశాలు మిస్సయ్యే ప్రాథమిక డాక్యుమెంటేషన్ | తక్కువగా లేదా లేనిది డాక్యుమెంటేషన్ |
## ప్రారంభించడానికి సూచనలు
1. **సరళంగా మొదలు పెట్టండి**: సంక్లిష్ట ప్రమాణీకరణ అవసరం లేని APIని ఎంచుకోండి
2. **డాక్యుమెంటేషన్ చదవండి**: మీరు ఎంచుకున్న API ఎండ్‌పాయింట్లు మరియు స్పందనలను సమగ్రంగా అర్థం చేసుకోండి
3. **మీ UIని పథకం చేయండి**: కోడింగ్ ప్రారంభించే ముందు మీ ఎక్స్‌టెన్షన్ ఇంటర్ఫేస్‌ను డిజైన్ చేయండి
4. **అనేకసార్లు పరీక్షించండి**: అంతఃక్రమంగా నిర్మించండి మరియు ప్రతి ఫీచర్‌ను చేర్చినప్పుడు పరీక్షించండి
5. **తప్పులని నిర్వహించండి**: API కాల్స్ విఫలమవచ్చు అనుకొని ముందుగా ప్రణాళిక రూపొందించండి
## వనరులు
- [బ్రౌజర్ ఎక్స్‌టెన్షన్ డాక్యుమెంటేషన్](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
- [ఫెచ్ API గైడ్](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
- [స్థానిక నిల్వ ట్యుటోరియల్](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
- [JSON పార్సింగ్ మరియు నిర్వహణ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)
ఉపయోగకరమైన, సృజనాత్మకమైన ఏదైనా తయారు చేయడంలో సరదాగా ఉంటోంది! 🚀
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**వివరణా నోట్**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటికీ, స్వయంచాలక అనువాదాలలో పొరపాట్లు లేదా తప్పిదాలు ఉండవచ్చు. మూల పత్రం native భాషలో ఉన్నది అధికారికమైన మూలం అని పరిగణించాలి. ముఖ్యమైన సమాచారానికి, ప్రత్యేకంగా మానవ అనువాదం చేయించుకోవడం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం ఉపయోగంతో ఏర్పడిన ఏదైనా అపార్థాలు లేదా తప్పుదోవలకు మేము బాధ్యులేము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

597
translations/te/5-browser-extension/3-background-tasks-and-performance/README.md
Unescape View File

@ -0,0 +1,597 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
"translation_date": "2026-01-08T15:21:26+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
"language_code": "te"
}
-->
# Browser Extension Project Part 3: బ్యాక్‌గ్రౌండ్ టాస్కులు మరియు పనితీరు గురించి తెలుసుకోండి
```mermaid
journey
title మీ పనితీరు మెరుగుదల యాత్ర
section ఆధారం
బ్రౌజర్ టూల్స్ నేర్చుకోండి: 3: Student
ప్రొఫైలింగ్ అర్థం చేసుకోండి: 4: Student
బాటిల్నెక్స్ గుర్తించండి: 4: Student
section పొడగింపు లక్షణాలు
కలర్ సిస్టమ్ నిర్మించండి: 4: Student
బ్యాక్‌గ్రౌండ్ పనులు సృష్టించండి: 5: Student
చిహ్నాలను గతి ప్రకారం నవీకరించండి: 5: Student
section మెరుగుదల
పనితీరు పర్యవేక్షించండి: 5: Student
సమస్యలను డీబగ్ చేయండి: 4: Student
అనుభవాన్ని మెరుగుపరచండి: 5: Student
```
కొన్ని బ్రౌజర్ ఎక్స్‌టెన్షన్‌లు త్వరగా మరియు స్పందించడానికి కారణం ఏమిటి అని ఎప్పుడైనా సంశయంగా ఉంది? ఇతరవారు మింది మెల్లగా అనిపిస్తే? రహస్యం సీన్‌గురించి జరుగుతున్నది. మీరు మీ ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేస్‌లో క్లిక్ చేసినపుడు, బ్యాక్‌గ్రౌండ్‌లో డేటా ఫెచింగ్, ఐకాన్ అప్డేట్లు, మరియు సిస్టమ్ వనరుల నిర్వహణ హ్మారంగా జరుగుతుంది.
ఇది బ్రౌజర్ ఎక్స్‌టెన్షన్ సిరీస్‌లోని మా చివరి పాఠం, మరియు మేము మీ కార్బన్ ఫుట్‌ప్రింట్ ట్రాకర్ సాఫ్ట్‌గా పనిచేయిస్తాము. మీరు డైనమిక్ ఐకాన్ అప్డేట్లు జోడిస్తారు మరియు పనితీరు సమస్యలు సమస్యలుగా మారడానికి ముందుగానే గుర్తించటం నేర్చుకుంటారు. ఇది ఒక రేస్ కారును ట్యూన్ చేయడం లాంటిది - చిన్న ఆప్టిమైజేషన్లు వలన మొత్తం వ్యవస్థ ఎలా চলে అనేది చాలా మారుతుంది.
మనం ముగించేప్పుడు, మీ దగ్గర మెరుగైన ఎక్స్‌టెన్షన్ ఉండె మరియు మంచివి వెబ్ యాప్లను గొప్పవలె వేరుచేసే పనితీరు సూత్రాలు అర్థం చేసుకుంటారు. బ్రౌజర్ ఆప్టిమైజేషన్ ప్రపంచంలోకి దూకుకుందాం.
## ముందస్తు పాఠం క్విజ్
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/27)
### పరిచయం
మునుపటి పాఠాలలో మీరు ఒక ఫారం నిర్మించారు, దాన్ని APIకు కనెక్ట్ చేశారు, అసింక్రనస్ డేటా ఫెచింగ్ ను పరిష్కరించారు. మీ ఎక్స్‌టెన్షన్ బాగా రూపుదిద్దుకుంటోంది.
ఇప్పుడు మనం చివరి ట్విస్ట్‌లు జోడించాలి - ఆ ఎక్స్‌టెన్షన్ ఐకాన్ కార్బన్ డేటా ఆధారంగా రంగులను మార్చేలా చేయడం. ఇది నాసా అపోలో అంతరిక్ష నౌకలో ప్రతి సిస్టమ్ ఆప్టిమైజ్ చేయాల్సి వచ్చిన విధానాన్ని గుర్తుకు తెస్తుంది. వారు ఖర్చు లేకుండా సైకిళ్ళు లేదా మెమొరీ వాయిదా పెట్టలేకపోయారు ఎందుకంటే పనితీరు మీద ప్రాణాలు ఆధారపడ్డాయి. మన బ్రౌజర్ ఎక్స్‌టెన్షన్ అంత కీలకంగా లేకపోయినా, అదే సూత్రాలు వర్తిస్తాయి - సమర్థవంతమైన కోడ్ మంచిన యూజర్ అనుభవాలను సృష్టిస్తుంది.
```mermaid
mindmap
root((పర్ఫార్మెన్స్ & బ్యాక్‌గ్రౌండ్ టాస్కులు))
Browser Performance
రేండరింగ్ పైప్‌లైన్
ఆస్తి ఆప్టిమైజేషన్
DOM మ్యానిప్యులేషన్
జావాస్క్రిప్ట్ ఎక్సిక్యూషన్
Profiling Tools
డెవలపర్ టూల్స్
పర్ఫార్మెన్స్ టాబ్
టైమ్‌లైన్ విశ్లేషణ
బాటిల్‌నెక్ గుర్తించడం
Extension Architecture
బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌లు
కంటెంట్ స్క్రిప్ట్‌లు
మెసేజ్ పంపడం
ఐకాన్ నిర్వహణ
Optimization Strategies
కోడ్ స్ప్లిటింగ్
లేజీ లోడింగ్
కాచింగ్
రిసోర్స్ కంప్రెషన్
Visual Feedback
డైనమిక్ ఐకాన్లు
వర్ణ కోడింగ్
రియల్ టైమ్ అప్డేట్లు
వినియోగదారుని అనుభవం
```
## వెబ్ పనితీరు ప్రాథమికాలు
మీ కోడ్ సమర్థవంతంగా నడిచినపుడు, ప్రజలు వాస్తవంగా *భావిస్తారు* తేడాను. మీరు ఎప్పుడైనా ఒక పేజీ వెంటనే లోడ్ అయ్యిందని లేదా యానిమేషన్ సుగమంగా ఫ్లో అయ్యిందని గుర్తు పడుతుందా? అదే మంచి పనితీరు.
పనితీరు కేవలం వేగం గురించి కాదు - అది సహజంగా అనిపించే వెబ్ అనుభవాలను సృష్టించడం గురించి, చికాకు కలిగించే వాటిని కాకుండా. కంప్యూటింగ్ ప్రారంభ రోజుల్లో, గ్రేస్ హాపర్ ప్రసిద్ధిగా తన డెస్క్ పై ఒక నానోసెకండ్ (సుమారు ఒక్క అడుగు పొడవు తారలాంటి) ఉంచింది, ఇది ఒక బిలియన్‌వంతం సెకన్ లో వెలుతురు ఎంత పరుగు తీసుకొంటుందో చూపించడానికి. ఇది కంప్యూటింగ్ లో ప్రతి మైక్రోసెకండ్ ఎందుకు ముఖ్యం అనేది వివరించడానికి ఆమె మార్గం. మేము ఇప్పుడు ఏమి ఆలస్యం చేస్తుందని కనుగొనడానికి డిటెక్టివ్ టూల్స్ ని పరిశీలిద్దాం.
> "వెబ్ సైట్ పనితీరు రెండు విషయాల గురించి: పేజీ ఎంత వేగంగా లోడ్ అవుతుంది, మరియు అందులో కోడ్ ఎంత వేగంగా నడుస్తుంది." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
మీ వెబ్‌సైట్లను అన్ని రకాల డివైసుల్లో, అన్ని రకాల యూజర్లకు, అన్ని రకాల పరిస్థితులలో అగ్నిమంతమైన వేగంగా చేయడం గురించి విషయం విస్తృతంగా ఉంది. మీరు సాధారణ వెబ్ ప్రాజెక్టు లేదా బ్రౌజర్ ఎక్స్‌టెన్షన్ తగ్గించేటప్పుడు గుర్తుంచుకునే కొన్ని ముఖ్యాంశాలు ఇక్కడ ఉన్నాయి.
మీ సైట్ ఆప్టిమైజ్ ప్రారంభ దశలో అయినది ఏం జరుగుతున్నదో అర్థం చేసుకోవడం. సంతోషకరంగా, మీ బ్రౌజర్ చాలా శక్తివంతమైన డిటెక్టివ్ టూల్‌లతో వస్తుంది.
```mermaid
flowchart LR
A[HTML] --> B[Parse]
B --> C[DOM Tree]
D[CSS] --> E[Parse]
E --> F[CSSOM]
G[JavaScript] --> H[Execute]
C --> I[రెండర్ ట్రీ]
F --> I
H --> I
I --> J[లేఅవుట్]
J --> K[పెయింట్]
K --> L[కాంపోజిట్]
L --> M[ప్రదర్శన]
subgraph "బాధ్యమైన రెండరింగ్ పాత్"
N["1. HTML ని పార్స్ చేయండి"]
O["2. CSS ని పార్స్ చేయండి"]
P["3. JS ని అమలు చేయండి"]
Q["4. రెండర్ ట్రీ నిర్మించండి"]
R["5. లేఅవుట్ మూలకాలు"]
S["6. పిక్సెల్స్ పెయింట్ చేయండి"]
T["7. లేయర్లు కాంపోజిట్ చేయండి"]
end
style M fill:#e8f5e8
style I fill:#fff3e0
style H fill:#ffebee
```
Edgeలో Developer Tools తెరవాలంటే, పై కుడి మూలల్లో మూడడ్లు క్లిక్ చేసి, More Tools > Developer Tools కు వెళ్ళండి. లేదా Windowsలో `Ctrl` + `Shift` + `I` లేదా Macలో `Option` + `Command` + `I` కొరకు కీబోర్డ్ షార్ట్‌కట్ వాడండి. అక్కడ చేరిన తర్వాత Performance ట్యాబ్ క్లిక్ చేయండి - మీ గూగుల్ వెబ్ యాప్ ఫిట్‌నెస్ ట్రాకర్ లాంటిది అదే.
**ఇది మీ పనితీరు డిటెక్టివ్ టూల్‌కిట్**
- **Developer Tools** తెరవండి (మీరు సాధారణంగా దీన్ని వినియోగిస్తారు)
- **Performance ట్యాబ్** కు వెళ్లండి - ఇది మీ వెబ్ యాప్ ఫిట్‌నెస్ ట్రాకర్ లాంటిది
- **Record బటన్** క్లిక్ చేసి మీ పేజీని పరిశీలించండి
- **ఫలితాలను** అధ్యయనం చేసి ఏం ఆలస్యం చేస్తోందో గుర్తించండి
ఇదాన్ని ప్రయత్నించండి. ఒక వెబ్‌సైట్ ఓపెన్ చేయండి (Microsoft.com బాగా పనిచేస్తుంది) మరియు 'Record' బటన్ క్లిక్ చేయండి. ఇప్పుడు పేజీని రిఫ్రెష్ చేసి ప్రొఫైలర్ ప్రతి సందర్భం ఎలా జరుగుతుందో క్యాప్చర్ చేస్తుంది. రికార్డింగ్ ఆపినప్పుడు, బ్రౌజర్ 'scripts', 'renders', మరియు 'paints' చేసినవిధానాల విస్తృతంగా వివరాలు చూడవచ్చు. ఇది ఒక రాకెట్ లాంచ్ సమయంలో మిషన్ కంట్రోల్ ప్రతి వ్యవస్థను పరిశీలించే విధానం గుర్తొస్తుంది - మీరు ఏం జరిగిందో, ఎప్పుడు జరిగిందో రియల్ టైమ్ డేటా పొందగలుగుతారు.
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.te.png)
✅ మరింత లోతుగా తెలుసుకోడానికి [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) చూడండి
> ప్రో టిప్: టెస్టింగ్ ప్రారంభించేముందు మీ బ్రౌజర్ కాష్ క్లియర్ చేయండి, తద్వారా మొదటి సారి సందర్శించే వారికి మీ సైట్ ఎలా పని చేస్తుందో చూడవచ్చు - ఇది సాధారణంగా పునర్వినియోగంలో చేసిన విషయాల నుండి వేరు.
పేజీ లోడ్ సమయంలో జరిగే సంఘటనల్ని జూమ్ చేయడానికి ప్రొఫైల్ టైమ్‌లైన్‌లో ఎంపిక చేయండి.
పేజీ పనితీరు స్నాప్‌షాట్‌ను పొందడానికి ప్రొఫైల్ టైమ్‌లైన్ భాగాన్ని ఎంచుకుని సమరీ ప్యాను చూడండి:
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.te.png)
ఏవైనా ఈవెంట్లు 15 మిల్లీసెకండ్ల కంటే ఎక్కువ సమయం తీసుకున్నాయా అంటే ఈవెంట్ లాగ్ ప్యాను చెక్ చేయండి:
![Edge event log](../../../../translated_images/log.804026979f3707e0.te.png)
✅ మీ ప్రొఫైలర్‌ను తెలుసుకోండి! ఈ సైట్ మీద డెవలపర్ టూల్స్ తెరవండి మరియు ఏ బాటిల్‌నెక్స్లు ఉన్నాయో చూడండి. ఏది మెల్లగా లోడ్ అవుతుంది? ఏది వేగంగా?
```mermaid
flowchart TD
A[డెవ్‌టూల్స్ ఓపెన్ చేయండి] --> B[పర్ఫార్మెన్స్ టాబ్ కు వెళ్లండి]
B --> C[రికార్డ్ బటన్ క్లిక్ చేయండి]
C --> D[చర్యలు చేయండి]
D --> E[రికార్డింగ్ ఆపు]
E --> F{ఫలితాలను విశ్లేషించండి}
F --> G[టైమ్లైన్ తనిఖీ చేయండి]
F --> H[నెట్‌వర్క్ సమీక్షించండి]
F --> I[స్క్రిప్ట్స్ పరిశీలించండి]
F --> J[పెయింట్ ఈవెంట్లు గుర్తించండి]
G --> K{పొడవైన పనులు?}
H --> L{పెద్ద ఆస్తులు?}
I --> M{రెండర్ బ్లాకింగ్?}
J --> N{వేటికి ఎక్కువ ఖర్చు అయ్యే పెయింట్లు?}
K -->|అవును| O[జావాస్క్రిప్ట్ ఆప్టిమైజ్ చేయండి]
L -->|అవును| P[ఆస్తులను కంప్రెస్ చేయండి]
M -->|అవును| Q[అసింక్/డిఫర్ జోడించండి]
N -->|అవును| R[స్టైల్స్ సులభతరం చేయండి]
O --> S[మళ్ళీ పరీక్షించండి]
P --> S
Q --> S
R --> S
style A fill:#e1f5fe
style F fill:#fff3e0
style S fill:#e8f5e8
```
## ప్రొఫైలింగ్ చేస్తుండగా ఏమి గమనించాలి
ప్రొఫైలర్ నడిపించడం మొదటి దశ మాత్రమే - నిజమైన నైపుణ్యం ఆ రంగిన చార్ట్‌లు మీకువ్యక్తం చేసే అర్థం తెలుసుకోవడమే. నిరాశ చెందకండి, మీరు వాటిని చదవడం నేర్చుకుంటారు. అనుభవజ్ఞులైన డెవలపర్లు సమస్యలు పూర్తిగా చాకచక్యంగా మారితే ముందుగానే హెచ్చరికలు గమనించే పాడు సాధించారు.
సాధారణంగా పనితీరు సమస్యలు కలిగించే అంశాలను చర్చిద్దాం. ఎలా మారీ కూరియే తన లాబొరేటరీలో రేడియేషన్ లెవల్స్ జాగ్రత్తగా గమనించాల్సి వచ్చింది, అలాగే మనం కూడా కొన్ని నమూనాలను గమనించాలి, అవి సమస్యలు వెలుగులోకి రాక ముందే గుర్తించడం ముఖ్యం. ఆగడమూ మీరు (మరియు మీ యూజర్లు) చాలా బాధ నుండి రక్షిస్తుంది.
**ఆస్టు పరిమాణాలు**: వెబ్‌సైట్లు సంవత్సరాలుగా "భారీ" అవుతున్నాయి, మరియు ఎక్కువ భాగం దాని పరిమాణం చిత్రాల కంటే వచ్చింది. మనం మన డిజిటల్ సూట్‌కేస్‌ను ఎక్కువ మరియు ఎక్కువ పూర్తిగా నింపుతున్నాం.
✅ [Internet Archive](https://httparchive.org/reports/page-weight) చూడండి, ఏలా పేజీ పరిమాణాలు కాలక్రమేణా పెరిగాయి - ఇది చాలా సూచనీయంగా ఉంటుంది.
**మీ ఆస్తులను ఎలా ఆప్టిమైజ్ చేయాలి:**
- **ఆ చిత్రాలను కంప్రెస్ చేయండి!** కొత్త ఫార్మాట్లు (WebP) ఫైల్ సైజులను చాలా తగ్గించగలవు
- **ప్రతి డివైస్‌కు సరైన చిత్ర పరిమాణాన్ని సర్వ్ చేయండి** - ఫోన్లకు భారీ డెస్క్‌టాప్ చిత్రాలు పంపించాల్సిన అవసరం లేదు
- **మీ CSS మరియు JavaScript ను మినిఫై చేయండి** - ప్రతి బైట్ ముఖ్యం
- **లేజీ లోడింగ్ వాడండి** - చిత్రాలు యూజర్లు కలవరించినప్పుడు మాత్రమే డౌన్లోడ్ అవ్వాలి
**DOM ట్రావర్సల్స్**: బ్రౌజర్ Document Object Model ను మీ కోడ్ ఆధారంగా నిర్మించాల్సి ఉంటుంది, కాబట్టి మంచి పనితీరు కోసం ట్యాగ్లు కనిష్టంగా ఉపయోగించాలి మరియు పేజీ కి అవసరమైన వాటిని మాత్రమే స్టైల్ చేయాలి. ఉదాహరణకు, ఒక పేజీకి మాత్రమే అవసరమైన CSSని ప్రధాన స్టైల్ షీట్ లో కలపకుండా ఆప్టిమైజ్ చేయాలి.
**DOM ఆప్టిమైజేషన్ ముఖ్య వ్యూహాలు:**
- **HTML ఎలిమెంట్స్ మరియు నెస్టింగ్ లెవల్స్ ను కనిష్టం చేయి**
- **ఉపయోగించని CSS నిబంధనలను తీసివేయి మరియు స్టైల్‌షీట్లను సమర్థవంతంగా సమ్మేళనం చేయి**
- **ప్రతి పేజీకి అవసరమైన CSS మాత్రమే లోడ్ అయ్యేలా నిర్వహించు**
- **HTML ని సెంటిమెంటిక్గా నిర్మించి బ్రౌజర్ పార్సింగ్ మెరుగుపరుచు**
**JavaScript**: ప్రతి JavaScript డెవలపర్ ర Render-Blocking స్క్రిప్ట్‌లు ఉంటాయి అని గమనించాలి, అవి DOM ట్రావర్సింగ్ మరియు పేజీ చిత్రీకరణకు ముందు లోడ్ అవ్వాలి. మీరు inline స్క్రిప్ట్‌లకు `defer` వాడుతుంటే బాగుంటుంది (Terrarium మాడ్యూల్ నందు చేసినట్టు).
**ఆధునిక జావాస్క్రిప్ట్ ఆప్టిమైజేషన్ టెక్నిక్స్:**
- **DOM పార్సింగ్ తరువాత స్క్రిప్ట్‌లు లోడ్ అయ్యేలా `defer` యాడ్ చేయండి**
- **కోడు విభజన అమలు చేయండి** - అవసరమైన జావాస్క్రిప్ట్ మాత్రమే లోడ్ అవ్వాలి
- **అవసరం లేని ఫంక్షనాలిటీకు లేజీ లోడింగ్ వాడండి**
- **భారీ లైబ్రరీలు మరియు ఫ్రేమ్‌వర్క్‌లు తగ్గించండి**
✅ కొన్ని సైట్లను [Site Speed Test](https://www.webpagetest.org/) వెబ్‌సైట్ లో పరీక్షించి సాధారణ తనిఖీలు ఎలా ఉంటాయో తెలుసుకోండి.
### 🔄 **గురుకులాక్షణిక తనిఖీ**
**పనితీరు అవగాహన**: ఎక్స్‌టెన్షన్ ఫీచర్లను నిర్మించడానికి ముందు, ఈ విషయాలు తెలిసి ఉండాలి:
- ✅ HTML నుండి పిక్సెల్స్ వరకు క్రిటికల్ రండరింగ్ పాత్ వివరించగలగాలి
- ✅ వెబ్ అప్లికేషన్లలో సాధారణ పనితీరు బాటిల్‌నెక్స్ గుర్తించగలగాలి
- ✅ బ్రౌజర్ డెవలపర్ టూల్స్ ని ఉపయోగించి పేజీ పనితీరు ప్రొఫైల్ చేయగలగాలి
- ✅ ఆస్తుల పరిమాణం మరియు DOM సంక్లిష్టత వేగం ఎలా ప్రభావితం చేస్తుందో అర్థం చేసుకోవాలి
**త్వరిత స్వ-పరీక్ష**: రేండర్ బ్లాకింగ్ జావాస్క్రిప్ట్ ఉన్నప్పుడు ఏమవుతుంది?
*జవాబు: బ్రౌజర్ పేజీ పార్స్ చేయడం మరియు పేజీని రండర్ చేయడం ప్రారంభించే ముందు స్క్రిప్ట్ డౌన్లోడ్ చేసి నడిపించాలి*
**నిజ జీవిత పనితీరు ప్రభావం**:
- **100ms ఆలస్యం**: యూజర్లు ఆలస్యం గమనిస్తారు
- **1 సెకను ఆలస్యం**: యూజర్లు దృష్టి కోల్పోతారు
- **3+ సెకన్లు**: 40% యూజర్లు పేజీని వదిలేస్తారు
- **మొబైల్ నెట్‌వర్క్‌లు**: పనితీరు మరింత ముఖ్యం
ఇప్పుడు మీరు పంపిన ఆస్తులను బ్రౌజర్ ఎలా రండర్ చేస్తుందో తెలుసుకున్నారని, మీ ఎక్స్‌టెన్షన్ పూర్తి చేయడానికి చివరి కొన్ని పనులు చూద్దాం:
### రంగును లెక్కించే ఫంక్షన్ సృష్టించండి
ఇప్పుడు ఒక ఫంక్షన్ సృష్టిద్దాం, ఇది సంఖ్యల డేటాను అర్థవంతమైన రంగులుగా మార్చుతుంది. ఇది ట్రాఫిక్ లైట్ వలె భావించండి - గ్రీన్ అంటే శుభ్రమైన ఎనర్జీ, రెడ్ అంటే అధిక కార్బన్ తీవ్రత.
ఈ ఫంక్షన్ మా API నుంచి CO2 డేటా తీసుకుని పర్యావరణ ప్రభావాన్ని సూచించే ఉత్తమ రంగును నిర్ణయిస్తుంది. శాస్త్రవేత్తలు ఓషన్ ఉష్ణోగ్రతలు, నక్షత్ర నిర్మాణం వంటి క్లిష్ట సాంకేతిక డేటాను రంగుల ద్వారానే విజువలైజ్ చేయటాన్ని గుర్తు చేసుకోండి. దీనిని `/src/index.js` లో `const` వేరియబుల్స్ తర్వాత చేర్చండి:
```mermaid
flowchart LR
A[CO2 విలువ] --> B[అతి సమీప స్కేల్స్ పాయింట్ కనుగొను]
B --> C[స్కేల్ సూచిక పొందు]
C --> D[రంగు జోడించు]
D --> E[ఛాయాచిత్రానికి పంపు]
subgraph "రంగు స్కేల్"
F["0-150: ఆకుపచ్చ (శుభ్రమైనది)"]
G["150-600: పసుపు (మధ్యమం)"]
H["600-750: కమలం (అత్యధిక)"]
I["750+: బూర্ণ (చాలా అత్యధిక)"]
end
subgraph "సందేశం పంపడం"
J[కంటెంట్ స్క్రిప్ట్]
K[chrome.runtime.sendMessage]
L[బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్]
M[ఐකాన్ నవీకరణ]
end
style A fill:#e1f5fe
style D fill:#e8f5e8
style E fill:#fff3e0
```
```javascript
function calculateColor(value) {
// CO2 తీవ్రత స్కేల్‌ను నిర్వచించండి (గ్రాములు ప్రతి kWhకి)
const co2Scale = [0, 150, 600, 750, 800];
// గ్రీన్ (శుభ్రమైనది) నుండి డార్క్ బ్రౌన్ (అధిక కార్బన్) వరకు తగిన రంగులు
const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
// మన ఇన్‌పుట్‌కి సన్నిహితమైన స్కేల్ విలువను కనుగొనండి
const closestNum = co2Scale.sort((a, b) => {
return Math.abs(a - value) - Math.abs(b - value);
})[0];
console.log(`${value} is closest to ${closestNum}`);
// రంగు మ్యాపింగ్ కోసం సూచికను కనుగొనండి
const num = (element) => element > closestNum;
const scaleIndex = co2Scale.findIndex(num);
const closestColor = colors[scaleIndex];
console.log(scaleIndex, closestColor);
// బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌కు రంగు నవీకరణ సందేశం పంపించండి
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}
```
**ఈ తెలివైన ఫంక్షన్ ని విరుచుకుపడుదాం:**
- **రెండు అర్రేలను సృష్టిస్తుంది** - ఒకటి CO2 స్థాయిల కోసం, ఇంకొకటి రంగుల కోసం (గ్రీన్=పరిమళం, బ్రౌన్=మలినం!)
- **మేము అందుకున్న CO2 విలువకి దగ్గరగా ఉన్న సరిపోల్చే విలువను వెతుకుతుంది** అర్రే సార్టింగ్ ద్వారా
- **findIndex() పద్ధతితో సరిపోలే రంగును అందుకుంటుంది**
- **మా ఎంపిక చేసిన రంగుతో క్రోమ్ బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్ కి సందేశం పంపుతుంది**
- **సూటిగా స్ట్రింగ్ ఫార్మాటింగ్ కోసం టెంప్లేట్ లిటరల్స్ (బ్యాక్‌టిక్స్) ఉపయోగిస్తుంది**
- **అన్ని కోడ్‌ని const ప్రకటింపులతో కట్టు క్రమంగా ఉంచుతుంది**
`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) మీరు ఎక్స్‌టెన్షన్ యొక్క నర్వస్ సిస్టమ్ లాంటిది - ఇది బ్యాక్‌గ్రౌండ్ కమ్యూనికేషన్ మరియు పనులను నిర్వహిస్తుంది:
> "chrome.runtime API ని బ్యాక్‌గ్రౌండ్ పేజీని రిట్రీవ్ చేయడానికి, మానిఫెస్ట్ వివరాలను తిరిగి పొందడానికి మరియు యాప్ లేదా ఎక్స్‌టెన్షన్ జీవనచక్రంలో ఈవెంట్స్ కు స్పందించడానికి వినియోగించండి. మీరు URL ల సాపేక్ష పాథ్‌ను పూర్తి URL లుగా మార్చడానికి కూడా ఈ API ని ఉపయోగించవచ్చు."
**Chrome Runtime API ఎందుకు పట్ల విలక్షణం:**
- **మీ ఎక్స్‌టెన్షన్ లోని వివిధ భాగాలు ఒకదానితో మరొకటి మాట్లాడేలా చేస్తుంది**
- **వినియోగదారు ఇంటర్‌ఫేస్ ఫ్రీజ్ కాకుండా బ్యాక్‌గ్రౌండ్ పనులను నిర్వహిస్తుంది**
- **మీ ఎక్స్‌టెన్షన్ జీవనచక్ర ఈవెంట్స్‌ని నిర్వహిస్తుంది**
- **స్క్రిప్ట్‌ల మధ్య సందేశ ప్రసారాన్ని సులభతరం చేస్తుంది**
✅ మీరు ఈ ఎక్స్‌టెన్షన్‌ని Edge కోసం అభివృద్ధి చేస్తుంటే ఆశ్చర్యం కలగవచ్చు, మీరు Chrome API వాడుతున్నారు. కొత్త Edge బ్రౌజర్ క్రమంగా Chromium బ్రౌజింగ్ ఇంజిన్ పై పనిచేస్తుంది కాబట్టి ఈ టూల్స్ ఉపయోగించవచ్చు.
```mermaid
architecture-beta
group browser(logos:chrome)[బ్రౌజర్]
service popup(logos:html5)[పాప్అప్ UI] in browser
service content(logos:javascript)[కంటెంట్ స్క్రిప్ట్] in browser
service background(database)[బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్] in browser
service api(logos:api)[బాహ్య API] in browser
popup:R -- L:content
content:R -- L:background
background:T -- B:api
content:T -- B:api
junction junctionCenter in browser
popup:R -- L:junctionCenter
junctionCenter:R -- L:background
```
> **ప్రో టిప్**: మీరు ఒక బ్రౌజర్ ఎక్స్‌టెన్షన్ ప్రొఫైల్ చేయాలనుకుంటే, ప్రతీ ఎక్స్‌టెన్షన్ ప్రత్యేక బ్రౌజర్ ఇన్స్టెన్స్ అయ 있기 వలన, ఆ ఎక్స్‌టెన్షన్ లో నుండి డెవలపర్ టూల్స్ స్టార్ట్ చేయండి. ఇది ఎక్స్‌టెన్షన్ ప్రత్యేక పనితీరు మెట్రిక్స్‌కి యాక్సెస్ ఇస్తుంది.
### డిఫాల్ట్ ఐకాన్ రంగు సెట్ చేయండి
నిజమైన డేటా పొందటం మొదలుపెట్టేముందు, మన ఎక్స్‌టెన్షన్ కు ఒక ఆరంభ స్థానం ఇవ్వాలి. ఎవ్వరూ ఖాళీ లేదా పగులని ఐకాన్ మీద చూడటం ఇష్టం లేదు. మనం గ్రీన్ రంగును మొదటి రంగుగా సెట్ చేద్దాం, తద్వారా యూజర్లు ఎక్స్‌టెన్షన్ ఇన్‌స్టాల్ చేసిన మొదటినుండి అది పని చేస్తున్నట్లు అర్థం చేసుకుంటారు.
మీ `init()` ఫంక్షన్‌లో డిఫాల్ట్ గ్రీన్ ఐకాన్ ను సెట్ చేద్దాం:
```javascript
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
```
**ఈ ప్రారంభీకరణ అందే ప్రయోజనాలు:**
- **డిఫాల్ట్ స్టేట్‌గా న్యూట్రల్ గ్రీన్ కలర్ సెట్ చేస్తుంది**
- **ఎక్స్‌టెన్షన్ లోడ్ అయినప్పుడు వెంటనే విజువల్ ఫీడ్‌బ్యాక్ అందిస్తుంది**
- **బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌తో కమ్యూనికేషన్ ప్యాటర్న్ ఏర్పరుస్తుంది**
- **డేటా లోడ్ కావడానికి ముందు వినియోగదారులు పనిచేసే ఎక్స్‌టెన్షన్ చూస్తారు**
### ఫంక్షన్‌ను కాల్ చేసి ఆహ్వానం అమలు చేయండి
ఇప్పుడు ప్రతీకి కनेक్ట్ చేద్దాం, కొత్త CO2 డేటా వచ్చినప్పుడు ఐకాన్ స్వయంచాలకంగ రంగును మార్చేలా. ఇది ఒక ఎలక్ట్రానిక్ పరికరంలో చివరి సర్క్యూట్ కనెక్ట్ చేయడంలా - ఒక్కొక్క భాగం కలిసి ఒక సిస్టమ్ గా పని చేస్తుంది.
API నుండి CO2 డేటా పొందిన తర్వాత ఈ లైన్ జోడించండి:
```javascript
// API నుండి CO2 డేటాను పొందిన తర్వాత
// let CO2 = data.data[0].intensity.actual;
calculateColor(CO2);
```
**ఈ ఇంటిగ్రేషన్ accomplishes:**
- **API డేటా ప్రవాహాన్ని విజువల్ సూచికా వ్యవస్థతో కనెక్ట్ చేస్తుంది**
- **కొత్త డేటా వచ్చినపుడు ఐకాన్ అప్డేట్లు ఆటోమాటిక్ గా ట్రిగ్గర్ అవుతాయి**
- **ప్రస్తుతం కార్బన్ తీవ్రత ఆధారంగా రియల్ టైమ్ విజువల్ ఫీడ్‌బ్యాక్ అందిస్తుంది**
- **డేటా ఫెచింగ్ మరియు ప్రదర్శన తర్కాన్ని విడగొడుతుంది**
మరియు చివరగా, `/dist/background.js` లో ఈ బ్యాక్‌గ్రౌండ్ చర్య కాల్స్ కోసం లిసనర్ జోడించండి:
```javascript
// కంటెంట్ స్క్రిప్ట్ నుండి సందేశాలను వినండి
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.action.setIcon({ imageData: drawIcon(msg.value) });
}
});
// కాన్వాస్ API ఉపయోగించి డైనమిక్ ఐకాన్‌ను అందించండి
// ఎనర్జీ లోలిపాప్ ఎక్స్‌టెన్షన్ నుండి తీర్చిదిద్దారు - చక్కటి లక్షణం!
function drawIcon(value) {
// మెరుగైన పనితీరు కోసం ఆఫ్‌స్క్రీన్ కాన్వాస్ సృష్టించండి
const canvas = new OffscreenCanvas(200, 200);
const context = canvas.getContext('2d');
// కార్బన్ తీవ్రతను సూచించే రంగు రంగు సర్కిల్‌ను రాయండి
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
// బ్రౌజర్ ఐకాన్ కోసం చిత్రం డేటాను తిరిగి ఇవ్వండి
return context.getImageData(50, 50, 100, 100);
}
```
**ఈ బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్ ని ఎం చేస్తుంది:**
- **మీ ప్రధాన స్క్రిప్ట్ నుండి సందేశాలు వింటుంది (ఒక రిసెప్షనిస్ట్ లాంటి పనితీరు)**
- **'updateIcon' అభ్యర్థనలను ప్రాసెస్ చేస్తుంది, మీ టూల్‌బార్ ఐకాన్ మార్చడానికి**
- **Canvas API ఉపయోగించి కొత్త ఐకాన్లు తయారు చేస్తుంది**
- **ప్రస్తుత కార్బన్ తీవ్రతను చూపించే ఒక సులభ రంగుల వృత్తాన్ని డ్రా చేస్తుంది**
- **ప్రమదమైన ఐకాన్‌తో బ్రౌజర్ టూల్‌బార్ అప్డేట్ చేస్తుంది**
- **స్మూత్ పనితీరు కోసం OffscreenCanvas ఉపయోగిస్తుంది (UI బ్లాకింగ్ లేదు)**
✅ మీరు Canvas API గురించి మరింత [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md) లో నేర్చుకుంటారు.
```mermaid
sequenceDiagram
participant CS as కంటెంట్ స్క్రిప్ట్
participant BG as బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్
participant Canvas as ఆఫ్‌స్క్రీన్‌కాన్వాస్
participant Browser as బ్రౌజర్ ఐకాన్
CS->>BG: sendMessage({action: 'updateIcon', color})
BG->>Canvas: new OffscreenCanvas(200, 200)
Canvas->>Canvas: getContext('2d')
Canvas->>Canvas: beginPath() + fillStyle + arc()
Canvas->>Canvas: fill() + getImageData()
Canvas->>BG: చిత్రం డేటాను తిరిగి ఇవ్వండి
BG->>Browser: chrome.action.setIcon(imageData)
Browser->>Browser: టూల్‌బార్ ఐకాన్‌ని నవీకరించండి
```
### 🔄 **గురుకులాక్షణిక తనిఖీ**
**పూర్తి ఎక్స్‌టెన్షన్ అర్ధం చేసుకోవడం**: మొత్తం వ్యవస్థపై మీ నైపుణ్యం నిర్ధారించుకోండి:
- ✅ వివిధ ఎక్స్‌టెన్షన్ స్క్రిప్ట్‌ల మధ్య సందేశ ప్రసారం ఎలా జరుగుతుందో?
- ✅ పనితీరు కోసం సాధారణ క్యాన్వాస్ కాకుండా OffscreenCanvas ఎందుకు వాడుతాం?
- ✅ క్రోమ్ రన్‌టైమ్ API విస్తరణ వాస్తవిక నిర్మాణంలో ఏ పాత్ర పోషిస్తుంది?
- ✅ రంగు గణన చరిత్రాల్గోరిథం డేటాను దృశ్య స్పందనకు ఎలా మ్యాప్ చేస్తుంది?
**పనితీరు పరిశీలనలు**: మీ విస్తరణ ఇప్పుడు చూపిస్తుంది:
- **ప్రభావవంతమైన సందేశం పంపిణీ**: స్క్రిప్ట్ సందర్భాల మధ్య శుభ్రంగా కమ్యూనికేషన్
- **ఆప్టిమైజ్డ్ రెండరింగ్**: OffscreenCanvas UI బ్లాకింగ్ నివారిస్తుంది
- **రియల్-టైమ్ అప్‌డేట్లు**: ప్రత్యక్ష డేటా ఆధారంగా డైనమిక్ ఐకాన్ మార్పులు
- **మేమరీ నిర్వహణ**: సరైన శుభ్రపరిచే మరియు వనరు నిర్వహణ
**మీ విస్తరణను పరీక్షించాల్సిన సమయం:**
- **అన్ని** `npm run build` తో నిర్మించండి
- **మీ విస్తరణను రీలోడ్ చేయండి** బ్రౌజర్‌లో (ఈ దశ మర్చిపోకండి)
- **మీ విస్తరణను ఓపెన్ చేయండి** మరియు ఆ ఐకాన్ రంగులు మారుతున్నట్టు చూడండి
- **ప్రత్యక్ష కార్బన్ డేటాకు ఎలా స్పందిస్తున్నదో పరిశీలించండి** ప్రపంచవ్యాప్తంగా నుండి
ఇప్పుడు మీరు ఒక చూపుతో మీ దుస్తుల భారం వేయడానికి మంచిది కాదా, లేక శుభ్రమైన శక్తి కోసం వేచే సమయం ఉందా అనేది తెలుసుకుంటారు. మీరు నిజంగా ఉపయోగకరమైనదాన్ని నిర్మించారు మరియు బ్రౌజర్ పనితీరును కూడా కూడ నేర్చుకున్నారు.
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఏజెంట్ మోడ్ ఉపయోగించి క్రింది ఛాలెంజ్ పూర్తి చేయండి:
**వివరణ:** బ్రౌజర్ విస్తరణ పనితీరును పర్యవేక్షించే సామర్థ్యాలను మెరుగుపరిచేందుకు విస్తరణలోని వివిధ భాగాల లోడ్ సమయాలను ట్రాక్ చేయడం మరియు ప్రదర్శించగల ఫీచర్ చేర్చండి.
**ప్రాంప్ట్:** సృష్టించండి ఒక పనితీరు పర్యవేక్షణ వ్యవస్థ, ఇది API నుండి CO2 డేటా పొందడానికి, రంగుల లెక్కించడం మరియు ఐకాన్ అప్‌డేట్ చేయడానికి తీసుకునే సమయాన్ని కొలిచి లాగ్ చేస్తుంది. ఒక ఫంక్షన్ `performanceTracker` ను జోడించండి, ఇది Performance API ని ఉపయోగించి ఈ ఆపరేషన్లను కొలుస్తుంది మరియు టైమ్‌స్టాంపులు మరియు వ్యవధి మీట్రిక్స్‌తో బ్రౌజర్ కన్సోల్‌లో ఫలితాలను ప్రదర్శిస్తుంది.
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## 🚀 ఛాలెంజ్
ఇది ఒక ఆసక్తికరమైన డిటెక్టివ్ మిషన్: సంవత్సరాలుగా ఉన్న కొన్ని ఓపెన్ సోర్స్ వెబ్‌సైట్లు (వికీపీడియా, GitHub లేదా Stack Overflow వంటి) ఎంచుకుని వారి కమిట్ చరిత్రలోకి దృష్టిపడండి. వారు ఎక్కడ పనితీరు మెరుగులు చేర్పుకున్నారు? ఎటువంటి సమస్యలు యావత్తూ తరలినవి?
**మీ పరిశోధనా విధానం:**
- **కమిట్ సందేశాలలో** "optimize," "performance," లేదా "faster" వంటి పదాలను శోధించండి
- **ప్యాటర్న్స్ కోసం చూడండి** - ఒకే రకాల సమస్యలను తిరిగి పరిష్కరిస్తూ ఉన్నారా?
- **ముఖ్య కారణాలను గుర్తించండి** వెబ్‌సైట్లను నెమ్మదింపజేసే వాటిని
- **మీ కనుగొనుగోలను పంచుకోండి** - ఇతర డెవలపర్లు నిజ జీవిత ఉదాహరణల నుండి నేర్చుకుంటారు
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28)
## సమీక్ష & స్వీయ అధ్యయనం
[performance newsletter](https://perf.email/) కోసం సైన్ అప్ కండి
బ్రౌజర్లు వెబ్ పనితీరు కొలవడంలో కొన్ని మార్గాలను వెబ్ టూల్స్ లోని పనితీరు టాబ్స్ చదవడంలో పరిశీలించండి. మీరు ఎటువంటి ప్రధాన తేడాలు కనుగొంటారా?
### ⚡ **తరువాత 5 నిమిషాల్లో మీరు చేయగలిగేది**
- [ ] బ్రౌజర్ Task Manager (Chrome లో Shift+Esc) ఓపెన్ చేసి విస్తరణ వనరు వినియోగాన్ని చూడండి
- [ ] DevTools Performance టాబ్ ఉపయోగించి వెబ్‌పేజీ పనితీరును రికార్డు చేయండి మరియు విశ్లేషించండి
- [ ] బ్రౌజర్ Extensions పేజి తనిఖీ చేయండి ఏ విస్తరణలు ప్రారంభ సమయాన్ని ప్రభావితం చేస్తున్నాయో చూడండి
- [ ] తాత్కాలికంగా విస్తరణలని అగుమెంట్ చేసి పనితీరు తేడాలు పరిశీలించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పోస్ట్-లెసన్ క్విజ్ పూర్తి చేసి పనితీరు భావనలు అర్థం చేసుకోండి
- [ ] మీ బ్రౌజర్ విస్తరణ కోసం బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్ అమలు చేయండి
- [ ] browser.alarms ఉపయోగించి సమర్థవంతమైన బ్యాక్‌గ్రౌండ్ పనులను నేర్చుకోండి
- [ ] కంటెంట్ స్క్రిప్ట్స్ మరియు బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్స్ మధ్య సందేశం పంపిణీ అభ్యాసం
- [ ] మీ విస్తరణ వనరు వినియోగాన్ని కొలవడం మరియు ఆప్టిమైజ్ చేయడం
### 📅 **మీ వారాంత పనితీరు ప్రయాణం**
- [ ] హై-పర్ఫార్మెన్స్ బ్రౌజర్ విస్తరణను పూర్తిచేయండి బ్యాక్‌గ్రౌండ్ ఫంక్షనాలిటీతో
- [ ] సర్వీస్ వర్కర్లను మరియు ఆధునిక విస్తరణ నిర్మాణాన్ని స్వాధీనం చేసుకోండి
- [ ] సమర్థవంతమైన డేటా సింక్రోనైజేషన్ మరియు క్యాషింగ్ వ్యూహాలు అమలు చేయండి
- [ ] విస్తరణ పనితీరు కోసం అధునాతన డీబగ్గింగ్ సాంకేతికతలు నేర్చుకోండి
- [ ] ఫంక్షనాలిటీ మరియు వనరు సామర్థ్యం రెండింటికీ ఆప్టిమైజ్ చేయండి
- [ ] విస్తరణ పనితీరు సన్నివేశాలకు సమగ్ర పరీక్షలని సృష్టించండి
### 🌟 **మీ నెల విస్తరణ ఆప్టిమైజేషన్ నైపుణ్యం**
- [ ] ఎంటర్ప్రైజ్-గ్రేడ్ బ్రౌజర్ విస్తరణలను అధిక పనితీరు తో నిర్మించండి
- [ ] Web Workers, Service Workers, మరియు ఆధునిక వెబ్ పనితీరు గురించి నేర్చుకోండి
- [ ] పనితీరు ఆప్టిమైజేషన్ కి సంబంధించిన ఓపెన్ సోర్స్ ప్రాజెక్టులకు సహాయం చెయ్యండి
- [ ] బ్రౌజర్ ఇంటర్నల్స్ మరియు అధునాతన డీబగ్గింగ్ టెక్నిక్స్ మాస్టర్ చేయండి
- [ ] పనితీరు పర్యవేక్షణ సాధనాలు మరియు ఉత్తమ అభ్యాస గైడ్‌లను సృష్టించండి
- [ ] వెబ్ అప్లికేషన్ల ఆప్టిమైజేషన్‌లో సహాయం చేసే పనితీరు నిపుణుడిగా మారండి
## 🎯 మీ బ్రౌజర్ విస్తరణ నైపుణ్య కాలక్రమం
```mermaid
timeline
title పూర్తి ఎక్స్టెన్షన్ అభివృద్ధి ప్రగతి
section పనితీరు ప్రాథమికాలు (20 నిమిషాలు)
బ్రౌజర్ ప్రొఫైలింగ్: DevTools నైపుణ్యం
: టైమ్లైన్ విశ్లేషణ
: బాటిల్‌నెక్ గుర్తింపు
: క్రిటికల్ రెండరింగ్ పాథ్
section బ్యాక్గ్రౌండ్ టాస్కులు (25 నిమిషాలు)
ఎక్స్టెన్షన్ వాస్టు నిర్మాణం: సందేశ ప్రసారం
: బ్యాక్గ్రౌండ్ స్క్రిప్టులు
: రన్‌టైమ్ API ఉపయోగం
: క్రాస్-కాంటెక్స్ట్ కమ్యూనికేషన్
section విజువల్ ఫీడ్బ్యాక్ (30 నిమిషాలు)
డైనమిక్ UI: రంగు లెక్కింపు ఆల్గోరిథమ్స్
: కాన్వాస్ API ఆమిషం
: ఐకాన్ ఉత్పత్తి
: నిజకాల నవీకరణలు
section పనితీరు ఆప్టిమైజేషన్ (35 నిమిషాలు)
సమర్థవంతమైన కోడ్: అసంక్రోనస్ ఆపరేషన్లు
: మెమరీ నిర్వహణ
: వనరు శుభ్రపరిచే ప్రక్రియ
: పనితీరు పర్యవేక్షణ
section ఉత్పత్తి సిద్ధంగా (45 నిమిషాలు)
పొలిష్ & పరీక్ష: క్రాస్-బ్రౌజర్ అనుకూలత
: లోపాల నిర్వహణ
: వినియోగదారుల అనుభవం
: పనితీరు ధ్రువీకరణ
section ఆధునిక ఫీచర్లు (1 వారం)
ఎక్స్టెన్షన్ ఈకోసిస్టమ్: క్రోమ్ వెబ్ స్టోర్
: వినియోగదారుల ప్రతిస్పందన
: అనలిటిక్స్ ఆమిషం
: అప్‌డేట్ నిర్వహణ
section ప్రొఫెషనల్ అభివృద్ధి (2 వారాలు)
ఎంటర్ప్రైజ్ ఎక్స్టెన్షన్లు: జట్టు సహకారం
: కోడ్ సమీక్షలు
: CI/CD పైప్‌లైన్లు
: భద్రతా ఆడిట్లు
section నిపుణుల నైపుణ్యం (1 నెల)
ప్లాట్‌ఫారం నైపుణ్యం: ఆధునిక క్రోమ్ APIs
: పనితీరు ఆప్టిమైజేషన్
: వాస్టు నమూనాలు
: ఓపెన్ సోర్స్ దానం
```
### 🛠️ మీ పూర్తి విస్తరణ అభివృద్ధి టూల్‌కిట్
ఈ త్రిలాజీ పూర్తి చేసాక, మీరు ఇప్పుడు పట్టు సాధించారు:
- **బ్రౌజర్ వాస్తవిక నిర్మాణం**: విస్తరణలు బ్రౌజర్ వ్యవస్థలతో ఏ విధంగా సమ్మిళితం అవుతాయో లోతైన అవగాహన
- **పనితీరు ప్రొఫైలింగ్**: డెవలపర్ టూల్స్ ఉపయోగించి ఇబ్బందులను గుర్తించి పరిష్కరించగలిగే సామర్థ్యం
- **అసంక్రోనస్ ప్రోగ్రామింగ్**: ప్రాధునిక JavaScript ప్యాటర్న్లు త్వరితగతిన, బ్లాక్ కానివ్వకుండా ఆపరేషన్ల కోసం
- **API ఇంటిగ్రేషన్**: ధృవీకరణ మరియు ఎర్రర్ హ్యాండ్లింగ్ తో బాహ్య డేటా ఫెచింగ్
- **దృశ్య డిజైన్**: డైనమిక్ UI అప్‌డేట్లు మరియు క్యాన్వాస్ ఆధారిత గ్రాఫిక్స్ ఉత్పత్తి
- **సందేశాలు పంపిణీ**: విస్తరణ నిర్మాణాలలో అంతర్గత‌స్క్రిప్ట్ కమ్యూనికేషన్
- **వినియోగదారు అనుభవం**: లోడింగ్ స్థితులు, లోపాల నిర్వహణ, మరియు సొగసైన ఇంటరాక్షన్లు
- **ఉత్పత్తి నైపుణ్యాలు**: నిజ జీవిత డిప్లాయ్‌మెంట్ కోసం పరీక్షలు, డీబగ్గింగ్, మరియు ఆప్టిమైజేషన్
**నిజ జీవిత అప్లికేషన్లు**: మీ విస్తరణ అభివృద్ధి నైపుణ్యాలు ప్రత్యక్షంగా వర్తిస్తాయి:
- **ప్రోగ్రెస్‌వ్ వెబ్ యాప్స్**: సమాన వాస్తవిక నిర్మాణం మరియు పనితీరు నమూనాలు
- **ఎలక్ట్రాన్ డెస్క్‌టాప్ యాప్స్**: వెబ్ సాంకేతికతలతో క్రాస్-ప్లాట్‌ఫారమ్ అప్లికేషన్లు
- **మొబైల్ హైబ్రిడ్ యాప్స్**: Cordova/PhoneGap అభివృద్ధి వెబ్ APIs ఉపయోగించి
- **ఎంటర్ప్రైజ్ వెబ్ అప్లికేషన్లు**: సంక్లిష్ట డాష్‌బోర్డ్లు మరియు ఉత్పాదకత సాధనాలు
- **క్రోమ్ DevTools విస్తరణలు**: అధునాతన డెవలపర్ సాధనాలు మరియు డీబగ్గింగ్
- **వెబ్ API ఇంటిగ్రేషన్**: బాహ్య సర్వీసులతో కమ్యూనికేట్ చేసే ఏ యాప్లికేషన్ గొలుసు
**వృత్తిపరమైన ప్రభావం**: మీరు ఇప్పుడు చేయగలరు:
- **అవగాహన నుండి డిప్లాయ్‌మెంట్ వరకు ఉత్పత్తి-సిద్ధ బ్రౌజర్ విస్తరణలను అభివృద్ధి చేయండి**
- **పనితీరు ప్రొఫైలింగ్ సాధనాలు ఉపయోగించి వెబ్ యాప్లికేషన్ పనితీరును ఆప్టిమైజ్ చేయండి**
- **మార్చగల సిస్టమ్‌లను తగిన విభాగాలడిపై నిర్మించండి**
- **సంక్లిష్ట అసింక్ ఆపరేషన్లు మరియు క్రాస్-కాంటెక్స్ కమ్యూనికేషన్ డీబగ్గ్ చేయండి**
- **ఓపెన్ సోర్స్ విస్తరణ ప్రాజెక్టులకు మరియు బ్రౌజర్ ప్రమాణాలకు సహకరించండి**
**తరువాతి స్థాయి అవకాశాలు**:
- **క్రోమ్ వెబ్ స్టోర్ డెవలపర్**: లక్షల వినియోగదారులకు విస్తరణలు ప్రచురించండి
- **వెబ్ పనితీరు ఇంజనీర్**: ఆప్టిమైజేషన్ మరియు వినియోగదారు అనుభవంపై ప్రత్యేకత
- **బ్రౌజర్ ప్లాట్‌ఫారమ్ అభివృద్ధికర్త**: బ్రౌజర్ ఇంజిన్ అభివృద్ధికి సహారా చేయండి
- **విస్తరణ ఫ్రేమ్‌వర్క్ సృష్టికర్త**: ఇతర డెవలపర్లకు సహాయపడే టూల్స్ నిర్మించండి
- **డెవలపర్ రిలేషన్‌ల్స్**: బోధన మరియు సక్తి సృజన ద్వారా జ్ఞానం పంచుకోండి
🌟 **ప్రాప్తి సాధన**: మీరు పూర్తి, కార్యనిర్వాహక బ్రౌజర్ విస్తరణను నిర్మించారు, ఇది వృత్తిపరమైన అభివృద్ధి పద్ధతులు మరియు ఆధునిక వెబ్ ప్రమాణాలను చూపిస్తుంది!
## అసైన్‌మెంట్
[Analyze a site for performance](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువదించబడింది. మేము సంది నిబద్దతకు ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో తప్పులైనా పొరపాట్లు ఉండొచ్చు. ప్రామాణిక మూలంగా స్థానిక భాషలోని అసలు పత్రాన్ని ఎంతగానో పరిగణించాలి. కీలకమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదం చేయించుకోవాలని సిఫార్సు చేస్తున్నాము. ఈ అనువాదం వాడకంతో ఏర్పడిన ఏవైనా అపార్థాలు లేదా తప్పుతీర్మానాలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

109
translations/te/5-browser-extension/3-background-tasks-and-performance/assignment.md
Unescape View File

@ -0,0 +1,109 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
"translation_date": "2026-01-08T15:32:01+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
"language_code": "te"
}
-->
# పనితీరు కోసం ఒక సైట్‌ను విశ్లేషించండి
## అసైన్మెంట్ అవలోకనం
పనితీరు విశ్లేషణ ఆధునిక వెబ్ డెవలపర్లకు ఒక కీలక నైపుణ్యం. ఈ అసైన్మెంట్‌లో, మీరు బ్రౌజర్ ఆధారిత టూల్స్ మరియు మూడవ పక్ష సేవలను ఉపయోగించి ఒక వాస్తవ వెబ్‌సైట్ యొక్క విస్తృత పనితీరు ఆడిట్ నిర్వహించి, జాప్యం కారణాలను గుర్తించి ఫలితాలను మెరుగుపరచడానికి సూచనలు చేయాలి.
మీ పని వెబ్ పనితీరు స 원 ్తాంశాలను మీ అవగాహనను మరియు వృత్తిపరమైన విశ్లేషణా టూల్స్‌ను సమర్థవంతంగా ఉపయోగించే మీ సామర్థ్యాన్ని ప్రదర్శించే వివరమైన పనితీరు నివేదికను అందించడం.
## అసైన్మెంట్ సూచనలు
**వెబ్‌సైట్‌ను ఎంచుకోండి** విశ్లేషణ కోసం - ఈ క్రింది ఎంపికలలో ఒకదాన్ని ఎంచుకోండి:
- మీరు తరచుగా ఉపయోగించే ప్రస్తుతప్రసిద్ధ వెబ్‌సైట్ (వార్తా సైట్, సామాజిక మీడియా, ఈ-వాణిజ్య)
- ఓపెన్-సోర్స్ ప్రాజెక్టు వెబ్‌సైట్ (GitHub పేజీలు, డాక్యుమెంటేషన్ సైట్లు)
- స్థానిక వ్యాపార వెబ్‌సైట్ లేదా పోర్ట్‌ఫోలియో సైట్
- మీ స్వంత ప్రాజెక్టు లేదా గత కోర్సు పని
**మల్టీ-టూల్ విశ్లేషణ నిర్వహించండి** కనీసం మూడు వివిధ విధానాలతో:
- **బ్రౌజర్ DevTools** - Chrome/Edge పనితీరు ట్యాబ్ ఉపయోగించి వివరమైన ప్రొఫైలింగ్
- **ఆన్లైన్ ఆడిటింగ్ టూల్స్** - Lighthouse, GTmetrix, లేదా WebPageTest ఉపయోగించండి
- **నెట్‌వర్క్ విశ్లేషణ** - వనరుల లోడ్, ఫైల్ పరిమాణాలు, మరియు అభ్యర్థన నమూనాలను పరిశీలించండి
**మీ పరిశోధనలను డాక్యుమెంట్ చేయండి** ఒక సమగ్ర నివేదికలో, కలిగివున్నవి:
### పనితీరు సూచికల విశ్లేషణ
- **లోడ్ సమయ కొలతలు** అనేక టూల్స్ మరియు కోణాల నుండి
- **కోర్ వెబ్ వైటల్స్** స్కోర్లు (LCP, FID, CLS) మరియు వాటి ప్రభావాలు
- **వనరు విభజన** ఏ అసెట్స్ లోడ్ సమయానికి ఎక్కువగా కృషి చేస్తున్నాయో చూపిస్తుంది
- **నెట్‌వర్క్ వాటర్ఫాల్ విశ్లేషణ** నిర్బంధ వనరులను గుర్తిస్తుంది
### సమస్య గుర్తింపు
- **నిర్దిష్ట పనితీరు అడ్డంకులు** తో మద్దతుగా డేటా
- **మూల కారణ విశ్లేషణ** ప్రతి సమస్య ఎందుకు ఏర్పడింది అనే వివరణ
- **వినియోగదారు ప్రభావం మూల్యాంకనం** సమస్యలు నిజమైన వినియోగదారులను ఎలా ప్రభావితం చేస్తాయో వివరించడం
- **ప్రాధాన్యత ర్యాంకింగ్** తీవ్రత మరియు పరిష్కార సవాలుల ఆధారంగా సమస్యలు
### మెరుగుదల సూచనలు
- **నిర్దిష్ట, కార్యాచరణ పనులు** అంచనా ప్రభావంతో
- **ప్రతీ సిఫారసు మార్పుకు అమలు వ్యూహాలు**
- **ఆధునిక ఉత్తమ పద్ధతులు** (లేజీ లోడింగ్, కంప్రెషన్, మొదలైనవి)
- **సంచలనం పనితీరు పరిశీలన కోసం టూల్స్ మరియు సాంకేతికత**
## పరిశోధన అవసరాలు
**కేవలం బ్రౌజర్ టూల్స్ మీద ఆధారపడకండి** - మీరు విశ్లేషణను విస్తరించండి:
**మూడవ పక్ష ఆడిటింగ్ సేవలు:**
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - విస్తృత ఆడిట్లు
- [GTmetrix](https://gtmetrix.com/) - పనితీరు మరియు మెరుగుదల అవగాహన
- [WebPageTest](https://www.webpagetest.org/) - వాస్తవ పరిస్థితుల పరీక్షలు
- [Pingdom](https://tools.pingdom.com/) - గ్లోబల్ పనితీరు పరిశీలన
**ప్రత్యేక వైశిష్ట్యాల టూల్స్:**
- [Bundle Analyzer](https://bundlephobia.com/) - జావాస్క్రిప్ట్ బండిల్ పరిమాణ విశ్లేషణ
- [Image optimization tools](https://squoosh.app/) - అసెట్ మెరుగుదల అవకాశాలు
- [Security headers analysis](https://securityheaders.com/) - భద్రతా పనితీరు ప్రభావం
## డెలివరబుల్స్ ఫార్మాట్
వృత్తిపరమైన నివేదిక (2-3 పేజీలు) తయారుచేయండి, అందులో ఇలా ఉండాలి:
1. **నిర్వహణ సారాంశం** - ముఖ్య నిష్కర్షలు మరియు సూచనలు
2. **పద్ధతి** - ఉపయోగించిన టూల్స్ మరియు పరీక్షా విధానం
3. **ప్రస్తుత పనితీరు మూల్యాంకనం** - ఆదార సూచికలు మరియు కొలతలు
4. **గమనించిన సమస్యలు** - మద్దతు డేటాతో వివరించబడిన సమస్యలు
5. **సిఫారసులు** - ప్రాధాన్యతను ఇచ్చిన మెరుగుదల వ్యూహాలు
6. **అమలుపరచే రోడ్‌మ్యాప్** - దశల వారీ మెరుగుదల ప్రణాళిక
**దర్శన కలిగిన సాక్ష్యాలు చేర్పించండి:**
- పనితీరు టూల్స్ మరియు సూచికల స్క్రీన్‌షాట్లు
- పనితీరు డేటాను చూపించే చార్ట్స్ లేదా గ్రాఫ్లు
- సాధ్యమైనంతవరకు ముందు/తరువాత తేడాలు
- నెట్‌వర్క్ వాటర్‌ఫాల్ చార్ట్లు మరియు వనరుల విభజనలు
## రూబ్రిక్
| ప్రమాణాలు | ఉదాహరణాత్మకము (90-100%) | తగినంత (70-89%) | మెరుగుదల అవసరం (50-69%) |
| -------- | ------------------------- | ----------------- | -------------------------- |
| **విశ్లేషణ లోతు** | 4+ టూల్స్ ఉపయోగించి సమగ్రమైన విశ్లేషణ, root cause విశ్లేషణ, వినియోగదారుల ప్రభావం మూల్యాంకనం | 3 టూల్స్ ఉపయోగించి మంచి విశ్లేషణ, స్పష్టమైన మితాలు మరియు ప్రాథమిక సమస్య గుర్తింపు | 2 టూల్స్ ఉపయోగించి ప్రాథమిక విశ్లేషణ మరియు పరిమిత సమస్య గుర్తింపు |
| **టూల్ వైవిధ్యం** | బ్రౌజర్ టూల్స్ + 3+ మూడవ పక్ష సేవలతో సరిపోల్చు విశ్లేషణలు మరియు అవగాహనలు | బ్రౌజర్ టూల్స్ + 2 మూడవ పక్ష సేవలతో కొంత సరిపోల్చు విశ్లేషణ | బ్రౌజర్ టూల్స్ + 1 మూడవ పక్ష సేవతో పరిమిత సరిపోల్చు విశ్లేషణ |
| **సమస్య గుర్తింపు** | 5+ నిర్దిష్ట పనితీరు సమస్యలతో వివరమైన root cause విశ్లేషణ మరియు ఎత్తివేత ప్రభావం | 3-4 పనితీరు సమస్యలతో మంచి విశ్లేషణ మరియు కొంత ప్రభావ మాపింగ్ | 1-2 పనితీరు సమస్యలతో ప్రాథమిక విశ్లేషణ |
| **సిఫారసులు** | నిర్దిష్ట, కార్యాచరణ సూచనలు, అమలు వివరాలు, అంచనా ప్రభావం, ఆధునిక ఉత్తమ పద్ధతులు | మంచి సిఫారసులు, కొంత అమలు మార్గదర్శకత్వం, అంచనా ఫలితాలు | ప్రాథమిక సిఫారసులు, పరిమిత అమలు వివరాలు |
| **వృత్తిపరమైన ప్రదర్శన** | స్పష్టమైన నిర్మాణం, దృశ్య సాక్ష్యాలు, నిర్వహణ సారాంశం, व्यावవసాయిక రూపకల్పనతో బాగా బంధించబడిన నివేదిక | కొంత దృశ్య సాక్ష్యాలు మరియు స్పష్టమైన నిర్మాణంతో మంచిగా సమన్వయపరచబడింది | తక్కువ దృశ్య సాక్ష్యాలు మరియు మితమైన నిర్మాణంతో ప్రాథమిక నిర్వహణ |
## అభ్యాస ఫలితాలు
ఈ అసైన్మెంట్ పూర్తి చేయడం ద్వారా, మీరు చూపిస్తారు:
- **పృథ్వీ ప్రదర్శన విశ్లేషణ టూల్స్ మరియు పద్ధతులు**ను వర్తింపచేయగలగడం
- **డేటా ఆధారిత విశ్లేషణ**తో పనితీరు అడ్డంకులను గుర్తించగలగడం
- **కోడ్ నాణ్యత మరియు వినియోగదారు అనుభవాల సంబంధాల**ను విశ్లేషించగలగడం
- **నిర్దిష్ట, కార్యాచరణ నిర్వహణ సూచనలను సిఫారసు చేయగలగడం**
- **సాంకేతిక వివరాలను వృత్తిపరమైన ఫార్మాట్‌లో కమ్యూనికేట్ చేయగలగడం**
ఈ అసైన్మెంట్ పాఠంలో నేర్చుకున్న పనితీరు భావాలను బలపరుస్తుంది మరియు మీ వెబ్ డెవలప్మెంట్ ఉద్యోగ జీవితంలో ఉపయోగించే సాంఘర్య నైపుణ్యాలను అభివృద్ధి చేస్తుంది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ నమోదు AI అనువాద సేవ [Co-op అనువాదకుడు](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరైన అనువాదానికి ప్రయత్నిస్తున్నప్పటికీ, స్వయంచాలిత అనువాదాలలో తప్పిదాలు లేదా పొరపాట్లు ఉండవచ్చు. మూల డాక్యుమెంట్ దాని స్వంత భాషలో అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదాన్ని توصیه చేస్తాము. ఈ అనువాదం వలన ఏర్పడే ఏ క్రత్యూను లేదా గందరగోళానికి మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/README.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b121a279a6ab39878491f3e572673515",
"translation_date": "2026-01-08T11:22:43+00:00",
"source_file": "5-browser-extension/README.md",
"language_code": "te"
}
-->
# బ్రౌజర్ ఎక్స్‌టెన్షన్ నిర్మాణం
బ్రౌజర్ ఎక్స్‌టెన్షన్లు నిర్మించడం మీ అప్లికేషన్ల ప్రదర్శన గురించి ఆలోచించడానికి సరదాగా, ఆసక్తికరమైన మార్గం మరియు వెబ్ ఆస్తి వేరే రకాన్ని నిర్మించడం. ఈ మాడ్యూల్ బ్రౌజర్లు ఎలా పని చేస్తాయో మరియు బ్రౌజర్ ఎక్స్‌టెన్షన్‌ను ఎలా అనుసంధానించాలో, ఫారం ఎలా తయారు చేయాలో, API ఎలా పిలవాలో, స్థానిక సંગ્રహాన్ని ఎలా ఉపయోగించాలో మరియు మీ వెబ్‌సైట్ ప్రదర్శనను ఎలా కొలత చేయాలో మరియు మెరుగుపరచాలో పాఠాలు అందిస్తుంది.
మీరు ఎడ్జ్, క్రోమ్ మరియు ఫైర్ఫాక్స్‌లపై పనిచేసే బ్రౌజర్ ఎక్స్‌టెన్షన్‌ను నిర్మిస్తారు. ఇది ఒక చిన్న వెబ్‌సైట్ లాగా ఉండి, ఒక ప్రత్యేక పని కోసం రూపొందించబడినది, ఇచ్చిన ప్రాంతం యొక్క విద్యుత్ వినియోగం మరియు కార్బన్ తీవ్రత కోసం [C02 Signal API](https://www.co2signal.com)ని తనిఖీ చేస్తుంది, మరియు ఆ ప్రాంతం యొక్క కార్బన్ పాదముద్రపై చదువును ఇస్తుంది.
ఒక API కీ మరియు మండలం కోడ్ ఫారం లోకి ఇన్పుట్ చేసినప్పుడు, వినియోగదారు అవసరానికి అనుగుణంగా ఈ ఎక్స్‌టెన్షన్‌ను యాడ్ హాక్ పిలవవచ్చు, స్థానిక విద్యుత్ వినియోగాన్ని నిర్ణయించడానికి మరియు దీని ద్వారా, వినియోగదారుడి విద్యుత్ నిర్ణయాలను ప్రభావితం చేసే డేటాను అందించవచ్చు. ఉదాహరణకి, మీరు కట్టుబడి ఉన్న ప్రాంతంలో అధిక విద్యుత్ వినియోగ సమయంలో దుస్తులు ఆరగించే డ్రయర్ (కార్బన్ తీవ్ర కార్యకలాపం) నడిపించడాన్ని ఆలస్యంచేయడం ఉత్తమం కావచ్చు.
### అంశాలు
1. [బ్రౌజర్ గురించినవి](1-about-browsers/README.md)
2. [ఫారాలు మరియు స్థానిక సాంఘ్రహణ](2-forms-browsers-local-storage/README.md)
3. [పdorిత కార్యాలు మరియు ప్రదర్శన](3-background-tasks-and-performance/README.md)
### క్రెడిట్స్
![a green browser extension](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.te.png)
## క్రెడిట్స్
ఈ వెబ్ కార్బన్ ట్రిగ్గర్ యొక్క ఆలోచన మైక్రోసాఫ్ట్ గ్రీన్ క్లౌడ్ అడ్వకసి జట్టు లీడ్ మరియు [గ్రీన్ ప్రిన్సిపల్స్](https://principles.green/) రచయిత అసిం హుస్సేన్ ద్వారా అందించబడింది. ఇది మొదటగా ఒక [వెబ్ సైట్ ప్రాజెక్ట్](https://github.com/jlooper/green).
బ్రౌజర్ ఎక్స్‌టెన్షన్ నిర్మాణం [అడెబోలా అడెనిరాన్ COVID ఎక్స్‌టెన్షన్](https://github.com/onedebos/covtension) ప్రభావితమైంది.
'dot' ఐకాన్ సిస్టమ్ వెనుక ఉన్న ఆలోచన కాలిఫోర్నియా ఉద్గారాల కోసం [ఎనర్జీ లోలిపాప్](https://energylollipop.com/) బ్రౌజర్ ఎక్స్‌టెన్షన్ యొక్క ఐకాన్ నిర్మాణం ద్వారా సూచించబడింది.
ఈ పాఠాలు ♥️ తో [జెన్ లూపర్](https://www.twitter.com/jenlooper) రాశారు.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**కార్యనిర్వాహక వ్యాఖ్య**:
ఈ దస్త్రం AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమెటెడ్ అనువాదాలలో దోషాలు లేదా అసమర్థతలు ఉండవచ్చు అని దయచేసి గ్రహించండి. మౌలిక దస్త్రం వారి స్వదేశీ భాషలోనే అధికారిక మూల్యాధారం కావాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదాన్ని సూచిస్తాము. ఈ అనువాదం వలన ఏర్పడిన ఏవైనా అవగాహన లోపాలు లేదా తప్పుదյուրుగా అర్థం చేసుకోవడంలో మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/solution/README.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "fab4e6b4f0efcd587a9029d82991f597",
"translation_date": "2026-01-08T15:58:08+00:00",
"source_file": "5-browser-extension/solution/README.md",
"language_code": "te"
}
-->
# కార్బన్ ట్రిగ్గర్ బ్రౌజర్ ఎక్స్టెన్షన్: పూర్తైన కోడ్
tmrow యొక్క C02 సిగ్నల్ API ఉపయోగించి విద్యుత్ వినియోగాన్ని ట్రాక్ చేయడానికి, మీరు మీ బ్రౌజర్‌లోనే మీ ప్రాంతంలోని విద్యుత్ వినియోగం ఎంత ఎక్కువగా ఉందో గుర్తు చెప్పే రిమైండర్ కోసం బ్రౌజర్ ఎక్స్టెన్షన్ నిర్మించండి. ఈ ఎక్స్టెన్షన్‌ను అవసరానికి అనుగుణంగా ఉపయోగించడం ద్వారా, ఈ సమాచారంపై ఆధారపడి మీ కార్యకలాపాలపై నిర్ణయాలు తీసుకోవడానికి సహాయం అవుతుంది.
![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.te.png)
## మొదలు పెట్టడం
మీ computer లో [npm](https://npmjs.com) ఇన్‌స్టాల్ చేయబడివుండాలి. ఈ కోడ్‌ని మీ కంప్యూటర్‌లోని ఫోల్డర్‌లో డౌన్‌లోడ్ చేసుకోండి.
అన్ని అవసరమైన ప్యాకేజీలను ఇన్‌స్టాల్ చేయండి:
```
npm install
```
webpack నుంచి ఎక్స్టెన్షన్‌ని బిల్డ్ చేయండి
```
npm run build
```
Edgeలో ఇన్‌స్టాల్ చేయడానికి, బ్రౌజర్ పెనెల్ లో టాప్ రైట్ కార్నర్లో ఉన్న 'మూడు డాట్' మెను ను ఉపయోగించి ఎక్స్టెన్షన్లు ప్యానెల్ కనుగొనండి. అక్కడి నుంచి, కొత్త ఎక్స్టెన్షన్ ని లోడ్ చేయడానికి 'Load Unpacked' ని ఎంచుకోండి. ప్రాంప్ట్ వద్ద 'dist' ఫోల్డర్ తెరవాలి, అప్పుడు ఎక్స్టెన్షన్ లోడ్ అవుతుంది. దీన్ని ఉపయోగించడానికి, CO2 Signal యొక్క APIకి API కీ కావాలి ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీలో మీ ఇమెయిల్ ఎంటర్ చేయండి) మరియు మీ ప్రాంతానికి అనుగుణమైన [కోడ్](http://api.electricitymap.org/v3/zones) ([Electricity Map](https://www.electricitymap.org/map) కొరకు) (ఉదాహరణకు బోస్టన్ లో నేను 'US-NEISO' ఉపయోగిస్తాను).
![installing](../../../../translated_images/install-on-edge.78634f02842c4828.te.png)
API కీ మరియు ప్రాంతం ఎక్స్టెన్షన్ ఇంటర్‌ఫేస్‌లో ఎంటర్ చేయగానే, బ్రౌజర్ ఎక్స్టెన్షన్ బారులోని రంగు ముద్ర (dot) మీ ప్రాంతం యొక్క ఎనర్జీ వినియోగాన్ని ప్రతిబింబించేలా మారుతుంది మరియు మీరు ఏ ఎనర్జీ-భారీ కార్యకలాపాలు చేయగలరో సూచన ఇస్తుంది. ఈ 'dot' సిస్టమ్ ఆలోచనను నాకు [Energy Lollipop ఎక్స్టెన్షన్](https://energylollipop.com/) నుంచి కేలిఫోర్నియా కాలుష్యం కొరకు ఇచ్చారు.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. సరైనతకు మేము ప్రయత్నిస్తూనే ఉన్నా, ఆటోమేటెడ్ అనువాదాలలో పొరబాటు లేదా లోపాలు ఉండవచ్చును అనేది తెలియజేయాలి. మూల పత్రం దాని స్వదేశీ భాషలో అధికారిక మూలంగా పరిగణించబడాలి. కీలక సమాచారానికి వృత్తిపరమైన మానవ అనువాదం సిఫారసు చేయబడుతుంది. ఈ అనువాదం వాడకంలో కలిగే ఏవైనా తప్పుల వల్ల మేము బాధ్యం వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/solution/translation/README.es.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
"translation_date": "2026-01-08T16:09:31+00:00",
"source_file": "5-browser-extension/solution/translation/README.es.md",
"language_code": "te"
}
-->
# కార్బన్ ట్రిగర్ బ్రౌజర్ విస్తరణ: పూర్తి కోడ్
tmrow C02 సిగ్నల్ API ను ఉపయోగించి విద్యుత్ వినియోగం ను ట్రాక్ చేయడానికి, మీ ప్రాంతంలో విద్యుత్ వినియోగంపై మీరు నేరుగా మీ బ్రౌజర్‌లో ఒక గుర్తింపు పొందడానికి బ్రౌజర్ విస్తరణను సృష్టించండి. ఈ తాత్కాలిక విస్తరణను ఉపయోగించడం ద్వారా మీరు ఈ సమాచారంపై ఆధారపడి మీ కార్యకలాపాల గురించి నిర్ణయాలు తీసుకోవడానికి సహాయం పొందుతారు.
![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041.te.png)
## ప్రారంభించడం
మీ వద్ద [npm](https://npmjs.com) ఇన్‌స్టాల్ చేయబడాలి. ఈ కో드를 మీ కంప్యూటర్‌లోని ఒక ఫోల్డర్‌లో డౌన్లోడ్ చేసుకోండి.
అవసరమైన అన్ని ప్యాకేజీలు ఇన్‌స్టాల్ చేయండి:
```
npm install
```
webpack నుండి విస్తరణను నిర్మించండి:
```
npm run build
```
Edge లో ఇన్‌స్టాల్ చేయడానికి, బ్రౌజర్ పైకోనంలో ఉన్న 'మూడు చుక్కలు' మెనూను ఉపయోగించి విస్తరణ ప్యానెల్‌ను కనుగొనండి. అక్కడ నుండి, కొత్త విస్తరణను లోడ్ చేయడానికి 'Unpacked load' ను ఎంచుకోండి. అడిగినప్పుడు 'dist' ఫోల్డర్‌ను తెరవండి మరియు విస్తరణ లోడ్ అవుతుంది. దీన్ని ఉపయోగించడానికి, CO2 Signal API కోసం API కీ ([ఈ పేజీలో మీ ఇమెయిల్ నమోదు చేయండి](https://www.co2signal.com/) - ఇమెయిల్ ద్వారా పొందండి) మరియు [ఎలక్ట్రిసిటీ మ్యాప్](https://www.electricitymap.org/map)కు అనుగుణంగా మీ ప్రాంత సూచిక కోడ్ ([http://api.electricitymap.org/v3/zones](http://api.electricitymap.org/v3/zones)) అవసరం (ఉదాహరణకు బోస్టన్‌లో నేను 'US-NEISO' ను ఉపయోగిస్తాను).
![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c.te.png)
విస్థరణ ఇంటర్‌ఫేస్లో API కీ మరియు ప్రాంతం నమోదు చేసిన తర్వాత, విస్తరణ బార్‌లో రంగు బిందువు మీ ప్రాంత విద్యుత్ వినియోగాన్ని ప్రతిబింబిస్తుంది మరియు మీకు అధిక విద్యుత్ వినియోగ కార్యకలాపాల గురించి సూచన ఇస్తుంది. ఈ "పాయింట్ల" సిస్టమ్ వెనుక భావనని నాకు [Energy Lollipop విస్తరణ](https://energylollipop.com/) కల్పించింది, ఇది కాలిఫోర్నియాలోని ఎమిషన్స్ కోసం రూపొందించబడింది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ దస్తావేజు AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వం కోసం ప్రయత్నించినప్పటికీ, ఆటోమేటిక్ అనువాదాల్లో తప్పిదాలు లేదా అసత్యతలు ఉండవచ్చు. మూల భాషలో ఉన్న అసలు దస్తావేజును అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం పుణ్యనిపుణుల మానవ అనువాదం సిఫార్సు చేయబడింది. ఈ అనువాదం ఉపయోగిస్తున్నందున ఏవైనా తప్పేమన్నులు లేదా తప్పుదృష్టులకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/solution/translation/README.fr.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9361268ca430b2579375009e1eceb5e5",
"translation_date": "2026-01-08T16:11:44+00:00",
"source_file": "5-browser-extension/solution/translation/README.fr.md",
"language_code": "te"
}
-->
# Carbon Trigger బ్రౌజర్ ఎక్స్‌టెన్షన్: పూర్తి కోడ్
tmrow యొక్క CO2 సిగ్నల్ API ఉపయోగించి విద్యుత్ వినియోగాన్ని ట్రాక్ کرنے కోసం, మీరు మీ ప్రాంతంలోని విద్యుత్ వినియోగంపై నేరుగా మీ బ్రౌజర్‌లో ఒక రిమైండర్ ఉండేలా ఒక బ్రౌజర్ ఎక్స్‌టెన్షన్ సృష్టించండి. ఈ ప్రత్యేక ఎక్స్‌టెన్షన్ ఉపయోగించడం మీ కార్యకలాపాలను ఈ సమాచారంపై ఆధారపడి నిర్ణయం తీసుకోవడంలో మీకు సహాయం చేస్తుంది.
![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.te.png)
## ప్రారంభించండి
మీకు [npm](https://npmjs.com) ఇన్‌స్టాల్ చేసిన ఉండాలి. ఈ కోడ్ యొక్క ఒక కాపీని మీ కంప్యూటర్‌లోని ఒక ఫోల్డర్‌లో డౌన్లోడ్ చేసుకోండి.
అన్ని అవసరమైన ప్యాకేజీలను ఇన్‌స్టాల్ చేయండి:
```
npm install
```
webpack నుండి ఎక్స్‌టెన్షన్‌ని రూపొందించండి
```
npm run build
```
Edgeలో ఇన్‌స్టాల్ చేయాలంటే, బ్రౌజర్ యొక్క పైభాగం కుడి మూలలోని 'మూడు బిందువులు' మెనూలోనికి వెళ్లండి మరియు ఎక్స్‌టెన్షన్ ప్యానెల్ కనుగొనండి. అక్కడ నుండి, 'అన్‌జిప్ చేసిన ఎక్స్‌టెన్షన్ లోడ్ చేయండి'ని ఎంచుకుని కొత్త ఎక్స్‌టెన్షన్‌ను లోడ్ చేయండి. ప్రాంప్ట్ వచ్చినప్పుడు 'dist' ఫోల్డర్‌ను తెరవండి, ఎక్స్‌టెన్షన్ లోడ్ అవుతుంది. దీన్ని ఉపయోగించడానికి, CO2 Signal API కోసం API కీ అవసరం ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీలో మీ ఇమెయిల్ అడగండి) మరియు [ఎలక్ట్రిసిటీ మ్యాప్](https://www.electricitymap.org/map) కి సంబంధించిన [మీ ప్రాంతానికి కోడ్](http://api.electricitymap.org/v3/zones) (ఉదాహరణకు బోస్టన్‌లో నేను 'US-NEISO' ఉపయోగిస్తున్నాను).
![installation](../../../../../translated_images/install-on-edge.78634f02842c4828.te.png)
API కీ మరియు ప్రాంతం ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేస్‌లో ఎంటర్ చేసిన తర్వాత, బ్రౌజర్ ఎక్స్‌టెన్షన్ బార్‌లోని రంగు పాయింట్ మీ ప్రాంత విద్యుత్ వినియోగాన్ని ప్రతిబింబించేలా మారుతుంది మరియు ఏ ఎనర్జీ-ఇంతా కార్యకలాపాలు చేయడం మీకు సరిగా ఉండొచ్చో సూచిస్తుంది. ఈ 'పాయింట్లు' వ్యవస్థ వెనుక కాన్సెప్ట్ నాకు కాలిఫోర్నియా ఉద్గారాల కొరకు [Energy Lollipop ఎక్స్‌టెన్షన్](https://energylollipop.com/) ద్వారా అందించబడింది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్క్లెయిమర్**:
ఈ документа AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వం కోసం ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో లోపాలు లేదా అసమర్ధతలు ఉండవచ్చు. మూలపత్రం native భాషలోని డాక్యుమెంట్ అధికారిక మూలంగా భావించాలి. కీలక సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం ఉపయోగించడంవల్ల ఏర్పడిన ఏదైనా తప్పుదోవ పట్టుకోవడం లేదా తార్కిక తప్పుదోవలకి మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/solution/translation/README.hi.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "dd58ae1b7707034f055718c1b68bc8de",
"translation_date": "2026-01-08T16:07:05+00:00",
"source_file": "5-browser-extension/solution/translation/README.hi.md",
"language_code": "te"
}
-->
# కార్బన్ ట్రిగ్గర్ బ్రౌజర్ ఎక్స్‌టెన్షన్: పూర్తి చేయబడిన కోడ్
విద్యుత్ వినియోగాన్ని ట్రాక్ చేయడానికి tmrow యొక్క CO2 సిగ్నల్ API ఉపయోగించడం, ఒక బ్రౌజర్ ఎక్స్‌టెన్షన్ రూపొందించడం, తద్వారా మీ బ్రౌజర్లో మీ ప్రాంతంలో విద్యుత్ వినియోగం ఎంత తీవ్రమో తెలుసుకోవడానికి ఒక రిమైండర్ పొందవచ్చు. ఈ తాత్కాలిక ఎక్స్‌టెన్షన్‌ను ఉపయోగించడం ద్వారా మీరు ఈ సమాచారంపై ఆధారపడి మీ కార్యకలాపాలపై నిర్ణయం తీసుకోవడంలో సహాయం పొందుతారు.
![ఎక్స్‌టెన్షన్ స్క్రీన్షాట్](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.te.png)
## ప్రారంభించడం
మీరు [npm](https://npmjs.com) ఇన్‌స్టాల్ చేసుకోవాలి. మీ కంప్యూటర్‌లో ఒక ఫొల్డర్‌లో ఈ కోడ్ యొక్క నకలు డౌన్‌లోడ్ చేయండి.
అన్ని అవసరమైన ప్యాకేజీలు ఇన్‌స్టాల్ చేయండి:
```
npm install
```
వెబ్‌ప్యాక్ తో ఎక్స్‌టెన్షన్ రూపొందించండి
```
npm run build
```
ఎడ్జ్ లో ఇన్‌స్టాల్ చేసుకోవడానికి, బ్రౌజర్ యొక్క పై భాగం కుడి మూనలో 'మూడు డాట్స్' మెనూ ఉపయోగించి ఎక్స్‌టెన్షన్ ప్యానల్ కనుగొనండి. అక్కడ నుండి, కొత్త ఎక్స్‌టెన్షన్ లోడ్ చేయడానికి 'లోడ్ అన్‌ప్యాక్' ఎంచుకోండి. ప్రాంప్ట్‌లో 'dist' ఫొల్డర్ ఓపెన్ చేయండి, ఎక్స్‌టెన్షన్ లోడ్ అయ్యిపోతుంది. దీన్ని ఉపయోగించడానికి మీకు CO2 సిగ్నల్ API కోసం ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2snal.com/) ఒక API కీ అవసరం - ఈ పేజీలో బాక్స్‌లో మీ ఇమెయిల్ ఎంటర్ చేయండి) మరియు [మీ ప్రాంతానికి కోడ్](http://api.electricitymap.org/v3/zones) [ఎలక్ట్రిసిటీ మ్యాప్](https://www.electricitymap.org/map) (ఉదాహరణకు, బోస్టన్‌లో, నేను 'US-NEISO' ఉపయోగిస్తాను) అవసరం.
![ఇన్‌స్టాల్ చేస్తున్న సమయంలో](../../../../../translated_images/install-on-edge.78634f02842c4828.te.png)
ఒకసారి API కీ మరియు ప్రాంతం ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేస్‌లో ఎంటర్ చేసిన తర్వాత, బ్రౌజర్ ఎక్స్‌టెన్షన్ బార్‌లోని రంగురంగుల డాట్ మీ ప్రాంతపు విద్యుత్ వినియోగాన్ని ప్రతిబింబించడానికి మారుతుంది మరియు మీరు మీ ప్రదర్శన ప్రకారం బహిరంగ ఉత్పత్తులు ఏవి ఎక్కువ ఉత్సర్జన కలిగించవచ్చో సూచిస్తుంది. ఈ 'డాట్' వ్యవస్థ వెనుక భావన నాకు కాలిఫోర్నియా ఉత్సర్జన కోసం [ఎనర్జీ లాలీపాప్ ఎక్స్‌టెన్షన్](https://energylollipop.com/) నుండి వచ్చింది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**నిరాకరణ**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదಿಸಲಾಗಿದೆ. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా నిర్ధారింపబడని అంశాలు ఉండవచ్చు అని దయచేసి గమనించండి. అసలు పత్రం దాని స్థానిక భాషలో ఉన్న దానిని అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదం సిఫారసు చేయబడుతుంది. ఈ అనువాదం వినియోగం వల్ల ఏర్పడిన ఏదైనా అపభ్రంశాలు లేదా తప్పుగా అర్థం చేసుకుం‍ పులు పట్ల మేము బాధ్యులము కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/solution/translation/README.it.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9a6b22a2eff0f499b66236be973b24ad",
"translation_date": "2026-01-08T16:17:14+00:00",
"source_file": "5-browser-extension/solution/translation/README.it.md",
"language_code": "te"
}
-->
# బ్రౌజర్ ఇది Carbon Trigger: ప్రారంభించడానికి కోడ్
ప్రాంతంలోని విద్యుత్ వినియోగాన్ని బ్రౌజర్‌లోనే నేరుగా రిమైండర్‌గా పొందుటకు tmrow యొక్క Signal C02 API ఉపయోగించి బ్రౌజర్ ఎక్స్టెన్షన్ రూపొందించబడుతుంది. ఈ ప్రత్యేకమైన ఎక్స్టెన్షన్ ఉపయోగించడం ద్వారా ఈ సమాచారంతో మీ కార్యకలాపాలను మూల్యాంకనం చేయడం సహాయపడుతుంది.
![ఎక్స్టెన్షన్ స్క్రీన్‌షాట్](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.te.png)
## ప్రారంభించడానికి
[npm](https://npmjs.com) ఇన్స్టాల్ చేయబడిన అవసరం. ఈ కోడ్ యొక్క ఒక ప్రతిని మీ కంప్యూటర్‌లోని ఒక ఫోల్డర్‌లో డౌన్లోడ్ చేసుకోండి.
అన్ని అవసరమైన ప్యాకేజీలను ఇన్స్టాల్ చేయండి:
```
npm install
```
webpack నుండి ఎక్స్టెన్షన్‌ను సృష్టించండి
```
npm run build
```
Edge లో ఇన్స్టాల్ చేసుకోవడానికి, బ్రౌజర్ పైవైపు కుడి మూలలో ఉండే "మూడు పాయింట్లు" మెనూను ఉపయోగించి ఎక్స్టెన్షన్స్ ప్యానెల్ ను కనుగొనండి. యెడ్జ్ డెవలపర్ మోడ్ (తక్కువ వామభాగంలో) ఇన్స్టాల్చలేదు అయితే ఆన్ చేయండి. కొత్త ఎక్స్టెన్షన్ లోడ్ చేసేందుకు "అన్‌జిప్ చేయబడని లోడ్" ఎంపికను ఎంచుకోండి. కమాండ్ ప్రాంప్ట్ లో "dist" ఫోల్డర్ ఓపెన్ చేసి ఎక్స్టెన్షన్ లోడ్ చేయండి. దాన్ని ఉపయోగించడానికి, CO2 Signal API కోసం API కీ అవసరం (తర్వాత ఇమెయిల్ ద్వారా [ఇక్కడ పొందవచ్చు](https://www.co2signal.com/) - ఈ పేజీలో మీ ఇమెయిల్ టైప్ చేయండి) మరియు [విద్యుత్ మాపింగ్కోడ్](http://api.electricitymap.org/v3/zones) అవసరం, అది [విద్యుత్ మ్యాప్](https://www.electricitymap.org/map) కి అనుగుణంగా ఉంటుంది (బోస్టన్‌లో ఉదాహరణకు "US-NEISO").
![ఇన్స్టాలేషన్](../../../../../translated_images/install-on-edge.78634f02842c4828.te.png)
API కీ మరియు ప్రాంతం ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేస్లో ఎంటర్ చేసిన తర్వాత, బ్రౌజర్ ఎక్స్టెన్షన్ బార్‌లో రంగు పడ్డ పాయింట్ ఆ ప్రాంత విద్యుత్ వినియోగాన్ని ప్రతిబింబించడానికి మారుతుంది మరియు అధిక శక్తి వినియోగ కార్యకలాపాలు ఎప్పుడు చేయడం అనుకూలమో సూచిస్తుంది. ఈ "పాయింట్లు" ఆధారిత వ్యవస్థ భావన కాలిఫోర్నియా ఉద్గారాల కొరకు [Energy Lollipop ఎక్స్టెన్షన్](https://energylollipop.com/) నుండి ప్రేరణ పొందింది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్క్లైమర్**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువదించబడింది. మేము ఖచ్చితత్వం కోసం ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా అపజ్ఞాతలు ఉండవచ్చు. మూల డాక్యుమెంట్ తన స్థానిక భాషలోని అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం చేయించడం మంచిది. ఈ అనువాదం వలన కలిగే ఏమైనా అపర్థాలు లేదా భ్రమలకు మేము బాధ్యులు కురుకోము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/solution/translation/README.ja.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
"translation_date": "2026-01-08T16:13:37+00:00",
"source_file": "5-browser-extension/solution/translation/README.ja.md",
"language_code": "te"
}
-->
# కార్బన్ ట్రిగ్గర్ బ్రౌజర్ విస్తరణ: పూర్తయిన కోడ్
tmrow యొక్క C02 సిగ్నల్ API ఉపయోగించి విద్యుత్ వినియోగాన్ని ట్రాక్ చేయడానికి, మీ ప్రాంతంలో విద్యుత్ వినియోగం ఎంత ఎక్కువగా ఉందో బ్రౌజర్‌లో రిమైండర్‌గా చూపించే బ్రౌజర్ విస్తరణను నిర్మించండి. ఈ విస్తరణను ఆడ్హాక్‌గా ఉపయోగించడం ద్వారా, ఈ సమాచారాన్ని ఆధారంగా మీ చర్యలను నిర్ణయించుకోవచ్చు.
![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.te.png)
## ప్రారంభం
[npm](https://npmjs.com) ఇన్‌స్టాల్ చేయబడిన ఉండాలి. ఈ కోడ్ ప్రతిని మీ కంప్యూటర్‌లోని ఫోల్డర్‌కు డౌన్‌లోడ్ చేసుకోండి.
అవసరమైన అన్ని ప్యాకేజీలను ఇన్‌స్టాల్ చేయండి.
```
npm install
```
webpack నుండి విస్తరణను నిర్మించండి.
```
npm run build
```
Edgeలో ఇన్‌స్టాల్ చేయడానికి, బ్రౌజర్ మేనూ లో పై దాయి “3 డాట్స్” క్లిక్ చేసి “విస్తరణలు” ప్యానెల్‌ను కనుగొనండి. అక్కడ నుండి “Load Unpacked” ను ఎంచుకుని కొత్త విస్తరణను లోడ్ చేయండి. ప్రాంప్ట్ లో “dist” ఫోల్డర్‌ను తెరిచి విస్తరణను లోడ్ చేయండి. ఉపయోగించడానికి, CO2 సిగ్నల్ API యొక్క API కీ ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీ బాక్స్ లో మీ ఇమెయిల్ ఎంటర్ చేయండి) మరియు [Electricity Map](https://www.electricitymap.org/map) అనుసరించి మీ ప్రాంతానికి సంబంధించిన [కోడ్](http://api.electricitymap.org/v3/zones) అవసరం (ఉదాహరణకు బోస్టన్‌లో 'US-NEISO' ఉపయోగిస్తారు).
![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.te.png)
API కీ మరియు ప్రాంతం ని విస్తరణ ఇంటర్‌ఫేస్ లో ఎంటర్ చేస్తే, బ్రౌజర్ విస్తరణ బార్‌లో చూపించే రంగు డాట్ మారుతుంది, ఇది మీ ప్రాంతంలో విద్యుత్ వినియోగాన్ని ప్రతిబింబిస్తుంది, మరియు ఏ రకం శక్తి అవసరమయ్యే కార్యకలాపాలను చేయడం సరికదనేది తెలియజేస్తుంది. ఈ “డాట్” సిస్టమ్ కాన్సెప్ట్‌ను నాకు కేలిఫోర్నియాలో ఉద్గారాల కోసం [Energy Lollipop extension](https://energylollipop.com/) ద్వారా అందింది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అంగీకారం**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరిగా ఉండడానికి యత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో పొరపాట్లు లేదా అచ్చత్యాలలో తేడాలు ఉండొచ్చు. స్వదేశీ భాషలో ఉన్న మౌలిక పత్రాన్ని అధికారిక మూలంగా పరిగణించాలి. కీలక సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదాన్ని సిఫార్సు చేస్తున్నాము. ఈ అనువాద ఉపయోగం వల్ల కలగవచ్ఛు ఏప్రకటనలు లేదా తప్పు అర్థం చేసుకోవడాలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/solution/translation/README.ms.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "21b364c158c8e4f698de65eeac16c9fe",
"translation_date": "2026-01-08T16:15:20+00:00",
"source_file": "5-browser-extension/solution/translation/README.ms.md",
"language_code": "te"
}
-->
# కార్బన్ ట్రిగ్గర్ బ్రౌజర్ విస్తరణ: పూర్తి కోడ్
CO2 సూచన API tmrow ఉపయోగించి విద్యుత్ వినియోగాన్ని గుర్తించడానికి, మీ ప్రాంతంలో విద్యుత్ వినియోగం ఎంత బరువైనదో మీ బ్రౌజర్‌లోనే అభియోగాలను పొందేందుకు బ్రౌజర్ విస్తరణను నిర్మించండి. ఈ విస్తరణను ప్రత్యేకంగా ఉపయోగించడం ద్వారా మీరు ఈ సమాచారాన్ని ఆధారం చేసుకుని మీ కార్యకలాపాలపై నిర్ణయాలు తీసుకోవడంలో సహాయం పొందగలరు.
![బ్రౌజర్ విస్తరణ స్క్రీన్‌షాట్](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.te.png)
## ఇక్కడి నుండి ప్రారంభించండి
మీకు [npm] (https://npmjs.com) ఇన్స్టాల్ చేయాలి. ఈ కోడ్ కాపీని మీ కంప్యూటర్లోని ఒక ఫోల్డర్‌లో డౌన్‌లోడ్ చేయండి.
అవసరమైన అన్ని ప్యాకేజీలను ఇన్స్టాల్ చేయండి:
```
npm install
```
webpack తో విస్తరణను నిర్మించండి
```
npm run build
```
Edge లో ఇన్స్టాల్ చేయడానికి, బ్రౌజర్ పై భాగం కుడి మూలలో ఉన్న 'మూడు డాట్లు' మెనూ ద్వారా ఎక్స్టెన్షన్స్ ప్యానెల్‌ను కనుగొనండి. అక్కడ నుండి, 'Load Unpacked' ఎంచుకుని కొత్త విస్తరణను లోడ్ చేయండి. dist ఫోల్డర్‌ను ఓపెన్ చేస్తే విస్తరణ లోడ్ అవుతుంది. దీన్ని ఉపయోగించాలంటే, CO2 సూచన APIకి API కీ అవసరం ([ఇక్కడ [ఈ-మెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీపై మీ ఈ-మెయిల్ బాక్స్‌లో నమోదు చేయండి) మరియు [మీ ప్రాంతానికి సరిపోయే కోడ్](http://api.electricitymap.org/v3/zones) ([Electicity Map](https://www.electricitymap.org/map) లో చూడవచ్చు) అవసరం (బోస్టన్‌లో ఉదాహరణకు 'US-NEISO' ను నేను ఉపయోగిస్తున్నాను).
![డౌన్లోడ్ అవుతున్నది](../../../../../translated_images/install-on-edge.78634f02842c4828.te.png)
API కీ మరియు ప్రాంతం ఒకసారి విస్తరణ ఇంటర్‌ఫేస్‌లో నమోదు చేయబడితే, బ్రౌజర్ ఎక్స్టెన్షన్ బార్ లో రంగురంగుల డాట్ మీ ప్రాంత విద్యుత్ వినియోగాన్ని ప్రతిబింబిస్తుంది మరియు మీకు తగిన బరువు కలిగిన కార్యకలాపాలకు సూచన కల్పిస్తుంది. ఈ 'డాట్' వ్యవస్థ వెనుక భావన నాకు California కోసం [Energy Lollipop బ్రౌజర్ విస్తరణ](https://energylollipop.com/) వారు ఇచ్చారు.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**స్పష్టం**:
ఈ పత్రికను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరిగా ఉండాలని ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా లోపాలు ఉండవచ్చు. అసలు పత్రికను స్థానిక భాషలోనే అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారానికి పుష్కలమైన మానవ అనువాదాన్ని సూచిస్తాము. ఈ అనువాదం కారణంగా వచ్చిన ఏవైనా అపార్థాలు లేదా తప్పుగా అర్ధం చేసుకున్న కారణంగా మేము బాధ్యతారహితులు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/te/5-browser-extension/start/README.md
Unescape View File

@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
"translation_date": "2026-01-08T16:00:32+00:00",
"source_file": "5-browser-extension/start/README.md",
"language_code": "te"
}
-->
# కార్బన్ ట్రిగ్గర్ బ్రౌజర్ ఎక్స్టెన్షన్: స్టార్టర్ కోడ్
tmrow యొక్క CO2 సిగ్నల్ APIని ఉపయోగించి విద్యుత్ వినియోగాన్ని ట్రాక్ చేయడానికి, మీ ప్రాంతం విద్యుత్ వినియోగం ఎంత భారీగా ఉందో మీ బ్రౌజర్‌లోనే ఒక రిమైండర్ కలిగి ఉండేలా బ్రౌజర్ ఎక్స్టెన్షన్‌ని నిర్మించండి. ఈ ఎక్స్టెన్షన్‌ని అవసరమైనప్పుడు ఉపయోగించడం దాని ఆధారంగా మీ కార్యకలాపాలపై నిర్ణయాలు తీసుకోవడంలో సహాయపడుతుంది.
![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.te.png)
## ప్రారంభం
మీ కంప్యూటర్‌లో [npm](https://npmjs.com) ఇన్‌స్టాల్ చేయబడినదిగా ఉండాలి. ఈ కోడ్‌ను మీ కంప్యూటర్‌లో ఒక ఫోల్డర్‌కు డౌన్లోడ్ చేసుకోండి.
అవసరమైన అన్ని ప్యాకేజీలను ఇన్‌స్టాల్ చేయండి:
```
npm install
```
webpack నుండి ఎక్స్టెన్షన్‌ని నిర్మించండి
```
npm run build
```
Edgeలో ఇన్‌స్టాల్ చేయడానికి, బ్రౌజర్ యొక్క పై కుడి మూలలో ఉన్న 'మూడు డాట్' మెనూలను ఉపయోగించి ఎక్స్టెన్షన్స్ ప్యానెల్ కనుగొనండి. అక్కడి నుండి, కొత్త ఎక్స్టెన్షన్‌ని లోడ్ చేయడానికి 'Load Unpacked' ను ఎంచుకోండి. ప్రాంప్ట్ వద్ద 'dist' ఫోల్డర్‌ని ఓపెన్ చేయండి, ఆ ఎక్స్టెన్షన్ లోడ్ అవుతుంది. దీన్ని ఉపయోగించేందుకు, CO2 Signal యొక్క APIకి ఒక API కీ అవసరం ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీలో మీ ఇమెయిల్ పెట్టండి) మరియు [ఎలక్ట్రిసిటీ మ్యాప్](https://www.electricitymap.org/map) కు అనుగుణంగా మీ ప్రాంతానికి సంబంధించిన [కోడ్](http://api.electricitymap.org/v3/zones) (ఉదాహరణకు బోస్టన్ లో నేను 'US-NEISO' ఉపయోగిస్తాను).
![installing](../../../../translated_images/install-on-edge.78634f02842c4828.te.png)
API కీ మరియు ప్రాంతం ఎక్స్టెన్షన్ ఇంటర్‌ఫేస్‌లో ఇన్‌పుట్ చేసిన వెంటనే, బ్రౌజర్ ఎక్స్టెన్షన్ బార్‌లో ఉన్న రంగు డాట్ మీ ప్రాంతం యొక్క శక్తి వినియోగాన్ని ప్రతిబింబించేలా మారుతుంది మరియు ఎక్కువ శక్తి ఎక్కువగా ఉపయోగించే కార్యకలాపాలు మీకు అనుకూలంగా ఉండే సూచన ఇస్తుంది. ఈ 'డాట్' సిస్టమ్ వెనుక సంకల్పాన్ని నాకు [Energy Lollipop ఎక్స్టెన్షన్](https://energylollipop.com/) (కాలిఫోర్నియా ఉద్గారాల కొరకు) ఇచ్చింది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్క్లెయిమర్**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటిక్ అనువాదాల్లో తప్పులు లేదా అపార్ధాలు ఉండవచ్చు అని గమనించండి. అసలు డాక్యుమెంట్ దాని స్వదేశీ భాషలో అధికారిక మూలంగా పరిగణించబడాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ انسانی అనువాదాన్ని చేపట్టడం ఉత్తమం. ఈ అనువాదం వాడుక వల్ల ఏర్పడిన ఏవైనా తప్పుదారులు లేదా అపార్థాల పరంగా మేము బాధ్యులు కము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

662
translations/te/6-space-game/1-introduction/README.md
Unescape View File

@ -0,0 +1,662 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a6332a7bb4d0be3bfd24199c83993777",
"translation_date": "2026-01-08T14:20:55+00:00",
"source_file": "6-space-game/1-introduction/README.md",
"language_code": "te"
}
-->
# స్పేస్ గేమ్ భాగం 1: పరిచయం
```mermaid
journey
title మీ గేమ్ అభివృద్ధి పయనం
section మౌలికం
గేమ్ నిర్మాణం నేర్చుకోండి: 3: Student
వారసత్వాన్ని అర్థం చేసుకోండి: 4: Student
సంగ్రహణ అన్వేషణ: 4: Student
section సంభాషణ
పబ్లిష్/సబ్ సిస్టమ్ నిర్మించండి: 4: Student
ఈవెంట్ ప్రవాహం రూపకల్పన చేయండి: 5: Student
భాగాలను కలపండి: 5: Student
section అనువర్తనం
గేమ్ వస్తువులను సృష్టించండి: 5: Student
నమూనాలను అమలు చేయండి: 5: Student
గేమ్ నిర్మాణాన్ని ప్లాన్ చేయండి: 5: Student
```
![గేమ్ ప్లేబ్యాక్ చూపిస్తున్న స్పేస్ గేమ్ యానిమేషన్](../../../../6-space-game/images/pewpew.gif)
నాసా మిషన్ కంట్రోల్ ఒక స్పేస్ ప్రారంభ సమయంలో ఒకటి కంటే ఎక్కువ సిస్టమ్స్ సమన్వయం చేస్తున్నట్లు, మనం ఒక స్పేస్ గేమ్ ను తయారుచేస్తాము ఇది ప్రోగ్రామ్ యొక్క వేర్వేరు భాగాలు ఎలా సమన్వయంగా పనిచేస్తాయో చూపిస్తుంది. మీరు ప్రత్యక్షంగా ఆడగలిగే దాన్ని సృష్టిస్తున్న సమయంలో, మీరు ఏ సాఫ్ట్‌వేర్ ప్రాజెక్ట్‌కు కూడా వర్తించే ప్రధాన ప్రోగ్రామింగ్ సెంకల్పాలను నేర్పుకోగలుగుతారు.
మనం రెండు ప్రాథమిక కోడ్ సంస్థాపన పద్ధతులను పరిశీలిస్తాము: వారసత్వం మరియు కాంపోజిషన్. ఇవి మామూలు విద్యా సంభావనలు మాత్రమే కాక, వీటే వీడియో గేమ్స్ నుండి బ్యాంకింగ్ సిస్టమ్స్ వరకు అన్ని పనులను నడిపించే నమూనాలు. అంతేకాదు, మనం ఒక pub/sub అనే కమ్యూనికేషన్ సిస్టమ్ ని అమలు చేస్తాము, ఇది నౌకలో ఉపయోగించే కమ్యూనికేషన్ నెట్‌వర్క్‌ల్లా పనిచేస్తుంది, వేర్వేరు భాగాలు సమాచారం పంచుకునేందుకు ఆధారాలు లేకుండా అనుమతిస్తుంది.
ఈ సిరీస్ ముగింపులో, మీరు స్కేలింగ్ మరియు అభివృద్ధి అయ్యే అప్లికేషన్లు ఎలా తయారు చేయాలో అర్థం చేసుకుంటారు – మీరు గేమ్స్, వెబ్ అప్లికేషన్లు లేదా ఇతర సాఫ్ట్‌వేర్ వ్యవస్థలు అభివృద్ధి చేస్తున్నా.
```mermaid
mindmap
root((గేమ్ ఆర్కిటెక్చర్))
Object Organization
Inheritance
Composition
Class Hierarchies
Behavior Mixing
Communication Patterns
Pub/Sub System
Event Emitters
Message Passing
Loose Coupling
Game Objects
Properties (x, y)
Behaviors (move, collide)
Lifecycle Management
State Management
Design Patterns
Factory Functions
Observer Pattern
Component System
Event-Driven Architecture
Scalability
Modular Design
Maintainable Code
Testing Strategies
Performance Optimization
```
## పీరు-లెక్చర్ క్విజ్
[పీరు-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/29)
## గేమ్ అభివృద్ధిలో వారసత్వం మరియు కాంపోజిషన్
ప్రాజెక్ట్లు సంక్లిష్టంగా పెరిగే కొద్దీ, కోడ్ సంస్థాపన చాలా ముఖ్యమవుతుంది. సులభమైన స్క్రిప్ట్ గా ప్రారంభమైనది సరైన నిర్మాణం లేకపోతే నిర్వహించటం కష్టం అవుతుంది – అలా అపోల్లో మిషన్‌లు వేలాది భాగాల మధ్య జాగ్రత్తగా సమన్వయం అవసరమయ్యింది.
మనం రెండు ప్రాథమిక కోడ్ సంస్థాపన పద్ధతులను పరిశీలిస్తాము: వారసత్వం మరియు కాంపోజిషన్. ప్రతీదీ వేరువేరుగా ప్రయోజనాలు కలిగి ఉంటాయి మరియు ఎప్పటికప్పుడు తగిన దాన్ని ఎంచుకోవడానికి వీటిని గ్రహించడం సహాయపడుతుంది. మన స్పేస్ గేమ్ ద్వారా ఈ భావనలను చూపిస్తాము, ఇందులో హీరోలు, శత్రువులు, పవర్-అప్స్ మరియు ఇతర ఆబ్జెక్టులు సమర్ధవంతంగా పరస్పరం స్పందించాలి.
✅ అని చెప్పవచ్చు, అత్యంత ప్రసిద్ధ ప్రోగ్రామింగ్ పుస్తకాల్లో ఒకటి [డిజైన్ ప్యాటర్న్స్](https://en.wikipedia.org/wiki/Design_Patterns) గురించి.
ఎలాంటి గేమ్ లోనైనా మీకు కుడా `గేమ్ ఆబ్జెక్ట్లు` ఉంటుంది – ఇవి మీ గేమ్ ప్రపంచంలో పరస్పరం సంభాషిస్తున్న అంశాలు. హీరోలు, శత్రువులు, పవర్-అప్స్ మరియు విజువల్ ఎఫెక్ట్స్ అన్నీ గేమ్ ఆబ్జెక్ట్స్. ప్రతి ఒక్కటి `x` మరియు `y` విలువలను ఉపయోగించి నిర్దిష్ట స్క్రీన్ సమన్వయాల్లో ఉంటుంది, కార్టెసియన్ కోఆర్డికి సంభంధించి పాయింట్లు ప్లాట్లు చేయడంలా.
విజువల్ వైవిధ్యం ఉన్నప్పటికీ, ఈ ఆబ్జెక్టులు సాధారణ ప్రవర్తనలు కొంతవరకు పంచుకుంటాయి:
- **వారు ఎక్కడో ఉంటారు** – ప్రతి ఆబ్జెక్ట్ కి x మరియు y కోఆర్డినేట్‌లు ఉంటాయి, గేమ్ దాన్ని ఎక్కడ గీయాలో తెలుసుకోవడానికి
- **అన్నిసార్లు కదలగలిగే** – హీరోలు పరుగెత్తుతారు, శత్రువులు వెంటపడతారు, బుల్లెట్లు స్క్రీన్ మీద ఎగిరిపోతాయి
- **వారి జీవితం ఉంటుంది** – కొన్నికం నిరంతరం ఉంటాయి, మరికొన్ని (పടుపులు వంటివి) తక్షణమే కనబడతాయి మరి ఆ జరిగా పోతాయి
- **వాటికి ప్రతిస్పందనలు ఉంటాయి** – వస్తువులు ఢీకొన్నప్పుడు, పవర్-అప్స్ సేకరించబడుతున్నప్పుడు, హెల్త్ బార్‌లు నవీకరించబడతాయి
✅ పాక్-మ్యాన్ అలాంటి గేమ్ గురించి ఆలోచించండి. అందులో పై తెలిపిన నాలుగు ఆబ్జెక్ట్ రకాలని గుర్తించగలరా?
```mermaid
classDiagram
class GameObject {
+x: సంఖ్య
+y: సంఖ్య
+type: స్ట్రింగ్
+exists_somewhere()
}
class MovableObject {
+moveTo(x, y)
+can_move_around()
}
class TemporaryObject {
+lifespan: సంఖ్య
+has_lifespan()
}
class InteractiveObject {
+onCollision()
+reacts_to_stuff()
}
GameObject <|-- MovableObject
GameObject <|-- TemporaryObject
GameObject <|-- InteractiveObject
MovableObject <|-- Hero
MovableObject <|-- Enemy
MovableObject <|-- Bullet
TemporaryObject <|-- PowerUp
TemporaryObject <|-- Explosion
InteractiveObject <|-- Collectible
InteractiveObject <|-- Obstacle
```
### కోడ్ ద్వారా ప్రవర్తనను వ్యక్తీకరించడం
గేమ్ ఆబ్జెక్టుల సామాన్య ప్రవర్తనలని మీరు గ్రహించినప్పుడు, ఇప్పుడు వాటిని JavaScript లో ఎలా అమలు చేయాలో పరిశీలిద్దాం. ఆబ్జెక్టుల ప్రవర్తన మేథడ్స్ ద్వారా వ్యక్తీకరించవచ్చు, అవి క్లాసులకు లేదా వ్యక్తిగత ఆబ్జెక్టులకు అనుబంధించబడవచ్చు మరియు ఎంపికచేసుకోవడానికి పలుఉన్నారూ పద్ధతులు ఉన్నాయి.
**క్లాస్-ఆధారిత పద్ధతి**
క్లాసులు మరియు వారసత్వం గేమ్ ఆబ్జెక్టులను నిర్మాణాత్మకంగా ఏర్పరచడానికి ఒక పద్ధతి అందిస్తుంది. కార్ల్ లినేఅస్ అభివృద్ధి చేసిన జంతు శాస్త్ర శ్రేణీకరణ వ్యవస్థ లాగా, మీరు సాధారణ లక్షణాలను కలిగిన బేస్ క్లాస్ తో మొదలు పెట్టి, ఆ ప్రాథమికాలను వారసత్వంగా పొందుతూ నిర్దిష్ట లక్షణాలు కలిగి ఉన్న క్లాసులను సృష్టిస్తారు.
✅ వారసత్వం ఒక ముఖ్యమైన భావన. దీని గురించి మరింత తెలుసుకోండి [MDN వారసత్వం వ్యాసంలో](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
ఇక గేమ్ ఆబ్జెక్టులను క్లాసులు మరియు వారసత్వంతో ఉపయోగించి ఎలా రూపొందించాలో చూద్దాం:
```javascript
// స్టెప్ 1: బేస్ గేమ్ ఆబ్జెక్ట్ క్లాస్‌ను సృష్టించండి
class GameObject {
constructor(x, y, type) {
this.x = x;
this.y = y;
this.type = type;
}
}
```
**దాన్ని దశలవారీగా విభజిద్దాం:**
- ప్రతి గేమ్ ఆబ్జెక్ట్ ఉపయోగించగల ఒక మౌలిక టెంప్లేట్ ను సృష్టిస్తున్నాం
- కన్‌స్ట్రక్టర్ ఆబ్జెక్టు ఎక్కడ ఉందో (`x`, `y`) మరియు అది ఏ రకమైనదో భద్రపరుస్తుంది
- ఇది మీ అన్ని గేమ్ ఆబ్జెక్టులకు మౌలికంగా పనిచేస్తుంది
```javascript
// దశ 2: వారసత్వం ద్వారా ఉద్యమ సామర్థ్యాన్ని జోడించండి
class Movable extends GameObject {
constructor(x, y, type) {
super(x, y, type); // మాతృ కన్స్ట్రక్టర్‌ని పిలవండి
}
// కొత్త స్థానం క్రమంలో కరణత సామర్థ్యాన్ని జోడించండి
moveTo(x, y) {
this.x = x;
this.y = y;
}
}
```
**పైన ఉన్న లో:**
- గేమ్ ఆబ్జెక్ట్ క్లాస్ ను విస్తరించి మో ఉవ్‌మెంట్ ఫంక్షనాలిటీని జోడించాము
- `super()` ఉపయోగించి పేరెంట్ కన్‌స్ట్రక్టర్ ని పిలిచి వారసత్వపు అంశాలు ప్రారంభించాము
- ఆబ్జెక్టు స్థానం నవీకరించే `moveTo()` మెథడ్ ని జోడించాము
```javascript
// దశ 3: నిర్దిష్ట ఆట ఆబ్జెక్ట్ రకాలను సృష్టించండి
class Hero extends Movable {
constructor(x, y) {
super(x, y, 'Hero'); // రకం స్వయంచాలకంగా సెట్ చేయండి
}
}
class Tree extends GameObject {
constructor(x, y) {
super(x, y, 'Tree'); // చెట్లకు కదలిక అవసరం లేదు
}
}
// దశ 4: మీ ఆట ఆబ్జెక్టులను ఉపయోగించండి
const hero = new Hero(0, 0);
hero.moveTo(5, 5); // హీరో కదలగలడు!
const tree = new Tree(10, 15);
// tree.moveTo() లోపాన్ని కలిగిస్తుంది - చెట్లు కదలలేవు
```
**ఈ భావనలను అర్థం చేసుకోవడం:**
- సరైన ప్రవర్తనలను వారసత్వంగా పొందే ప్రత్యేక ఆబ్జెక్ట్ రకాల నిర్మాణం
- వారసత్వం ద్వారా ప్రత్యేక ఫీచర్ల ఎంపికను చూపిస్తుంది
- హీరోలు కదలగలరుగా, చెట్లు కదలరని చూపిస్తుంది
- క్లాస్ హైరార్కీ సరైన పనులను నిరోధించేందుకు బాధ్యత వహిస్తుంది
✅ మీరు కొన్ని నిమిషాలు పాక్-మ్యాన్ హీరో (ఇంకీ, పింకీ లేదా బ్లింకీ వంటి) ను మళ్ళీ JavaScript లో ఎలా రాయగలరో ఊహించండి.
**కాంపోజిషన్ పద్ధతి**
కాంపోజిషన్ ఒక మాడ్యులర్ డిజైన్ సూత్రాన్ని అనుసరిస్తుంది, ఇంజనీర్లు నౌకలను పరస్పరం మార్చలేనిర భాగాలతో ఎలా డిజైన్ చేసారో అంతే. పేరెంట్ క్లాస్ నుండి వారసత్వం పొందకుండా, మీరు నిర్దిష్ట ప్రవర్తనలను కలుపుతూ ఆబ్జెక్టులను వీలైనంత అవసరమైన విధంగా తయారు చేస్తారు. ఈ పద్ధతి కఠినమైన హైరార్కికల్ బంధాల లేని లవచీకృతతను అందిస్తుంది.
```javascript
// దశ 1: ప్రాథమిక ప్రవర్తన వಸ್ತువులు సృష్టించండి
const gameObject = {
x: 0,
y: 0,
type: ''
};
const movable = {
moveTo(x, y) {
this.x = x;
this.y = y;
}
};
```
**ఈ కోడ్ చేసినది:**
- స్థానం మరియు రకం లక్షణాలతో బేస్ `gameObject` ను నిర్వచిస్తుంది
- మో వ్‌మెంట్ ఫంక్షనాలిటీ కలిగిన ప్రత్యేక `movable` ప్రవర్తన ఆబ్జెక్టుని సృష్టిస్తుంది
- స్థానం డేటా మరియు మో ఉవ్‌మెంట్ లాజిక్ ని స్వతంత్రంగా ఉంచి బాధ్యతలను విడగొడుతుంది
```javascript
// దశ 2: ప్రవర్తనలను సమ్మిళితం చేసి వస్తువులను నిర్మించండి
const movableObject = { ...gameObject, ...movable };
// దశ 3: వేర్వేறு వస్తువు రకాల కోసం ఫ్యాక్టరీ ఫంక్షన్లను సృష్టించండి
function createHero(x, y) {
return {
...movableObject,
x,
y,
type: 'Hero'
};
}
function createStatic(x, y, type) {
return {
...gameObject,
x,
y,
type
};
}
```
**పైన ఉన్న లో:**
- స్క్రిప్ట్ బ్రతుకులోని లక్షణాలు మరియు మో ఉవ్‌మెంట్ ప్రవర్తనను స్ప్రడ్ సింటాక్స్ తో కలిపారు
- కస్టమైజ్డ్ ఆబ్జెక్ట్స్ ఇస్తున్న ఫ్యాక్టరీ ఫంక్షన్లను సృష్టించారు
- కఠినమైన క్లాస్ హైరార్కీల లేకుండా సరళమైన ఆబ్జెక్ట్ సృష్టి అందించారు
- ఆబ్జెక్టులు తగిన ప్రవర్తనలను మాత్రమే కలిగి ఉండగలవు
```javascript
// దశ 4: మీ రూపొందించబడిన వస్తువులను సృష్టించి ఉపయోగించండి
const hero = createHero(10, 10);
hero.moveTo(5, 5); // పూర్తిగా పని చేస్తుంది!
const tree = createStatic(0, 0, 'Tree');
// tree.moveTo() నిర్వచించబడలేదు - ఎలాంటి చలనం ప్రవర్తన రూపొందించబడలేదు
```
**ముఖ్యాంశాలు గుర్తుంచుకోవాలి:**
- వారసత్వం కాకుండా ప్రవర్తనలను మిక్స్ చేయడం వలన ఆబ్జెక్టులను కంపోస్ చేస్తుంది
- కఠినమైన వారసత్వ హైరార్కీల కంటే ఎక్కువ లవచీకృతతను అందిస్తుంది
- ఆబ్జెక్టులకు తగిన లక్షణాలు మాత్రమే కల్పిస్తుంది
- తాజా జావాస్క్రిప్ట్ స్ప్రిస్ సింటాక్స్ ఉపయోగించి సాఫీగా ఆబ్జెక్టులను కలిపిస్తుంది
```
**Which Pattern Should You Choose?**
**Which Pattern Should You Choose?**
```mermaid
quadrantChart
title Code Organization Patterns
x-axis Simple --> Complex
y-axis Rigid --> Flexible
quadrant-1 Advanced Composition
quadrant-2 Hybrid Approaches
quadrant-3 Basic Inheritance
quadrant-4 Modern Composition
Class Inheritance: [0.3, 0.2]
Interface Implementation: [0.6, 0.4]
Mixin Patterns: [0.7, 0.7]
Pure Composition: [0.8, 0.9]
Factory Functions: [0.5, 0.8]
Prototype Chain: [0.4, 0.3]
```
> 💡 **ప్రొ టిప్**: ఆధునిక జావాస్క్రిప్ట్ అభివృద్ధిలో రెండు నమూనాలు కూడా ప్రాముఖ్యం కలిగి ఉంటాయి. క్లాసులు స్పష్టమైన హైరార్కీల కోసం బాగుంటాయి, కాంపోజిషన్ వ్యక్తిగత స్వేచ్ఛ అవసరమైతే మెరుస్తుంది.
>
**ప్రతి పద్ధతిని ఎప్పుడు ఉపయోగించాలో:**
- స్పష్టమైన "is-a" సంబంధాలు ఉన్నప్పుడు వారసత్వం ఎంచుకోండి (హీరో ఒక మోవబుల్ ఆబ్జెక్ట్)
- "has-a" సంబంధాలు ఉన్నప్పుడు కాంపోజిషన్ ఎంచుకోండి (హీరోకి మో వ్‌మెంట్ సామర్థ్యాలు ఉంటాయి)
- మీ టీమ్ యొక్క ఇష్టాలు మరియు ప్రాజెక్టు అవసరాలను పరిగణించండి
- ఒకే అప్లికేషన్ లో రెండు పద్ధతులను కలపవచ్చు
### 🔄 **ఆచార్య తనిఖీ**
**ఆబ్జెక్ట్ సంస్థాపన అర్థం చేసుకోవడం**: కమ్యూనికేషన్ నమూనాలతో ముందుకు పోయేముందు మీరు:
- ✅ వారసత్వం మరియు కాంపోజిషన్ మధ్య తేడాను వివరించగలగాలి
- ✅ క్లాసులు వర్సస్ ఫ్యాక్టరీ ఫంక్షన్లు ఎప్పుడు ఉపయోగించాలో గుర్తించగలగాలి
- ✅ వారసత్వంలో `super()` కీవర్డ్ ఎలా పనిచేస్తుందో అర్థం చేసుకోవాలి
- ✅ గేమ్ అభివృద్ధికి ప్రతి పద్ధతికి ఉన్న లాభాలను తెలుసుకోవాలి
**త్వరిత స్వీయ పరీక్ష**: కదలగలిగే మరియు ఎగిరే శత్రువును (Flying Enemy) ఎలా సృష్టిస్తారు?
- **వారసత్వ పద్ధతి**: `class FlyingEnemy extends Movable`
- **కాంపోజిషన్ పద్ధతి**: `{ ...movable, ...flyable, ...gameObject }`
**ప్రాక్టికల్ సంబంధం**: ఈ నమూనాలు అన్ని చోట్ల కనిపిస్తాయి:
- **React కంపోనెంట్లు**: Props (కాంపోజిషన్) వర్సస్ క్లాస్ వారసత్వం
- **గేమ్ ఇంజన్లు**: Entity-component సిస్టమ్స్ కాంపోజిషన్ ఉపయోగిస్తాయి
- **మొబైల్ యాప్స్**: UI ఫ్రేమ్‌వర్క్స్ తరచూ వారసత్వ హైరార్కీలు ఉపయోగిస్తాయి
## కమ్యూనికేషన్ నమూనాలు: పబ్/సబ్ సిస్టమ్
అప్లికేషన్లు సంక్లిష్టత పెరిగినప్పుడు, భాగాల మధ్య సంభాషణను నిర్వహించడం క్లిష్టమవుతుంది. పబ్లిష్-సబ్‌స్క్రైబ్ నమూనా (పబ్/సబ్) రేడియో ప్రసారంతో ఇలాగే పని చేస్తుంది – ఒక ప్రసారకుడు ఒకేకాక అనేక గ్రహీతలికి సందేశాన్ని పంపగలడు, ఎవరు వినుతుందో తెలియకుండానే.
హీరోకు హాని పడినప్పుడు ఏమవుతుందో ఆలోచించండి: హెల్త్ బార్ నవీకరించడం, శబ్ద ప్రభావాలు, దృశ్య స్పందన. హీరో ఆబ్జెక్టును ఈ వ్యవস্থలతో నేరుగా కలపకుండా, పబ్/సబ్ హీరో "నష్టం పొందింది" అనే సందేశాన్ని ప్రసారం చేస్తుంది. ప్రతిస్పందించాల్సిన ఎవరికైనా ఆ సందేశాన్ని సబ్‌స్క్రైబ్ చేసి స్పందించవచ్చు.
✅ **పబ్/సబ్** అంటే 'పబ్లిష్-సబ్‌స్క్రైబ్'
```mermaid
flowchart TD
A[హీరో దెబ్బతింటాడు] --> B[ప్రచురించండి: HERO_DAMAGED]
B --> C[ఈవెంట్ సిస్టమ్]
C --> D[హెల్త్ బార్ సబ్‌స్క్రైబర్]
C --> E[శబ్ద సిస్టమ్ సబ్‌స్క్రైబర్]
C --> F[విజువల్ ఎఫెక్ట్స్ సబ్‌స్క్రైబర్]
C --> G[అజీవక సాధన సిస్టమ్ సబ్‌స్క్రైబర్]
D --> H[ఆరోగ్య ప్రదర్శన నవీకరించండి]
E --> I[దెబ్బ శబ్దం ఆడించండి]
F --> J[ఎరుపు ఫ్లాష్ చూపించండి]
G --> K[జీవిత సాధనలను తనిఖీ చేయండి]
style A fill:#ffebee
style B fill:#e1f5fe
style C fill:#e8f5e8
style H fill:#fff3e0
style I fill:#fff3e0
style J fill:#fff3e0
style K fill:#fff3e0
```
### పబ్/సబ్ ఆర్కిటెక్షర్ అర్థం చేసుకోవడం
పబ్/సబ్ నమూనా మీ అప్లికేషన్ విభాగాలను స్వేచ్ఛగా సంభంధితంగా ఉంచుతుంది, అంటే అవి ప్రత్యక్ష ఆధారపడకుండా కలిసి పనిచేస్తాయి. ఈ వేరుగా ఉంటే మీ కోడ్ నిర్వహణ, పరీక్ష మరియు మార్చడాన్ని సులభతరం చేస్తుంది.
**పబ్/సబ్ లో కీలక పాత్రలు:**
- **సందేశాలు** – `'PLAYER_SCORED'` తరహా సాదాసీదా టెక్స్ట్ లేబుల్స్, ఏమైంది అని వివరిస్తుంది (మరింత సమాచారం తో కూడా)
- **పబ్లిషర్లు** – "ఎదురుచూస్తున్న అందరికీ ఏదో జరిగింది!" అని ఫిర్యాదు చేసే ఆబ్జెక్టులు
- **సబ్‌స్క్రైబర్లు** – "ఆ ఈవెంట్ నాకు ముఖ్యం" అని చెప్పి, వాటిని స్పందించే ఆబ్జెక్టులు
- **ఈవెంట్ సిస్టమ్** – సందేశాలు సరైన వినేవారికి చేర도록 చూసే మధ్యవర్తి
### ఈవెంట్ సిస్టమ్ నిర్మాణం
ఈ భావనలను చూపించే సరళమైన అయినా శక్తివంతమైన ఈవెంట్ సిస్టమ్ తయారుచేసుకుందాం:
```javascript
// దశ 1: ఈవెంట్ ఎమిట్టర్ క్లాస్ రూపొందించండి
class EventEmitter {
constructor() {
this.listeners = {}; // అన్ని ఈవెంట్ లిసనర్లను నిల్వ చేయండి
}
// నిర్దిష్ట సందేశ తరగతికి లిసనר్ని నమోదు చేయండి
on(message, listener) {
if (!this.listeners[message]) {
this.listeners[message] = [];
}
this.listeners[message].push(listener);
}
// నమోదైన అన్ని లిసనర్లకు సందేశం పంపండి
emit(message, payload = null) {
if (this.listeners[message]) {
this.listeners[message].forEach(listener => {
listener(message, payload);
});
}
}
}
```
**ఇక్కడ జరుగుతున్నది:**
- సరళమైన క్లాస్ ఉపయోగించి ఒక కేంద్ర ఈవెంట్ నిర్వహణ వ్యవస్థను సృష్టిస్తుంది
- సందేశ రకాలను అనుసరించి శ్రోతలను ఓబ్జెక్టులో నిల్వ చేస్తుంది
- కొత్త శ్రోతలను `on()` మెథడ్ ద్వారా నమోదు చేస్తుంది
- `emit()` ద్వారా అన్ని ఆసక్తిగల శ్రోతలకు సందేశాలను ప్రసారం చేస్తుంది
- సంబంధిత సమాచారాన్ని పంపేందుకు ఐచ్ఛిక డేటా పayload ను మద్దతు తీస్తుంది
### కలిపి చూస్తూ: ఒక ప్రాక్టికల్ ఉదాహరణ
ఇప్పుడు దీన్ని ప్రత్యక్షంగా చూద్దాం! పబ్/సబ్ ఎంత శుభ్రమైన మరియు లవచీకృతమయినదో చూపించే సరళమైన మో ఉవ్‌మెంట్ సిస్టమ్ ని నిర్మాణం చేద్దాం:
```javascript
// దశ 1: మీ సందేశ రకాల్ని నిర్వచించండి
const Messages = {
HERO_MOVE_LEFT: 'HERO_MOVE_LEFT',
HERO_MOVE_RIGHT: 'HERO_MOVE_RIGHT',
ENEMY_SPOTTED: 'ENEMY_SPOTTED'
};
// దశ 2: మీ ఈవెంట్ సిస్టమ్ మరియు గేమ్ ఆబ్జెక్టుల్ని సృష్టించండి
const eventEmitter = new EventEmitter();
const hero = createHero(0, 0);
```
**ఈ కోడ్ చేసే పని:**
- సందేశ పేర్లలో తప్పులు నివారించేందుకు కాంస్టెంట్ ఆబ్జెక్టును నిర్వచిస్తుంది
- అన్ని కమ్యూనికేషన్ నిర్వహించేందుకు ఈవెంట్ ఎమిటర్ యొక్క ఒక ఇన్‌స్టాన్స్ ను సృష్టిస్తుంది
- ప్రారంభ స్థానంలో ఒక హీరో ఆబ్జెక్టును ప్రారంభిస్తుంది
```javascript
// దశ 3: ఈవెంట్ లిస్నర్లు (సబ్‌స్రైబర్లు) సెటప్ చేయండి
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
hero.moveTo(hero.x - 5, hero.y);
console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
});
eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
hero.moveTo(hero.x + 5, hero.y);
console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
});
```
**ఇక్కడ:**
- మో ఉవ్‌మెంట్ సందేశాలకు స్పందించే ఈవెంట్ లిస్నర్స్ ని నమోదు చేసాము
- మో ఉవ్ దిశను ఆధారంగా హీరో స్థానం ని నవీకరించాము
- హీరో స్థానం మార్పులను కన్సోల్ లో లాగ్ చేయడం జోడించాము
- ఇన్పుట్ నిర్వహణ నుండి మో ఉవ్‌మెంట్ లాజిక్ ను వేరుగా ఉంచాము
```javascript
// దశ 4: కీప్యాడ్ ఇన్‌పుట్‌ను ఈవెంట్స్ (ప్రచారకులు)తో అనుసంధానించండి
window.addEventListener('keydown', (event) => {
switch(event.key) {
case 'ArrowLeft':
eventEmitter.emit(Messages.HERO_MOVE_LEFT);
break;
case 'ArrowRight':
eventEmitter.emit(Messages.HERO_MOVE_RIGHT);
break;
}
});
```
**ఈ భావనాలు అర్థం చేసుకోండి:**
- కీబోర్డ్ ఇన్పుట్ తో గేమ్ ఈవెంట్ లను కఠిన బంధం లేకుండా కట్టుకుంటుంది
- ఇన్పుట్ సిస్టమ్ గేమ్ ఆబ్జెక్టులకు పరోక్షంగా కమ్యూనికేట్ చేయగలదు
- ఒకే కీబోర్డ్ ఈవెంట్ కు అనేక సిస్టమ్‌లు స్పందించగలవు
- కీ బైండింగ్స్ మార్చడం లేదా కొత్త ఇన్పుట్ పద్ధతులు జోడించటం సులభం
```mermaid
sequenceDiagram
participant User
participant Keyboard
participant EventEmitter
participant Hero
participant SoundSystem
participant Camera
User->>Keyboard: ఎర్రో లెఫ్ట్ నొక్కండి
Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
EventEmitter->>Hero: ఎడమకు 5 పిక్సెల్స్ కదిలించండి
EventEmitter->>SoundSystem: పాదం శబ్దం వినిపించండి
EventEmitter->>Camera: హీరోను అనుసరించండి
Hero->>Hero: స్థానం నవీకరించండి
SoundSystem->>SoundSystem: ఆడియో ప్లే చేయండి
Camera->>Camera: దృష్టి భాగాన్ని సర్దుబాటు చేయండి
```
> 💡 **ప్రొ టిప్**: ఈ నమూనా యొక్క అందం లవచీకృతతలోనే ఉంది! మీరు సౌండ్ ఎఫెక్ట్స్, స్క్రీన్ షేక్ లేదా పార్టికల్ ఎఫెక్ట్స్ ను సులభంగా జోడించవచ్చు – ఉన్న కీబోర్డ్ లేదా మో ఉవ్ కోడ్ మార్చాల్సిన అవసరం లేకుండా.
>
**ఈ పద్ధతి మీకు ఇష్టపడతారు ఎందుకు:**
- కొత్త ఫీచర్స్ జోడించడం చాలా సులభం – మీరు ఆసక్తి ఉన్న ఈవెంట్ లను వినండి
- ఒకేసారి అనేక అంశాలు ఒకే ఈవెంట్ కు స్పందించొచ్చు, పరస్పర ఆటంకం లేకుండా
- పరీక్షించడం సులభం ఎందుకంటే ప్రతీ భాగం స్వతంత్రంగా పనిచేస్తుంది
- ఏదైనా తప్పు తగిలితే, మీరు ఎక్కడ చూడాలో సునిశ్చితంగా తెలుసుకుంటారు
### ఎందుకు పబ్/సబ్ సమర్థవంతంగా స్కేలు అవుతుందో
పబ్/సబ్ నమూనా అప్లికేషన్లు సంక్లిష్టత పెరిగినప్పటికీ సరళతను రక్షిస్తుంది. పలు శత్రువులు, డైనామిక్ UI నవీకరణలు లేదా శబ్ద వ్యవస్థలను నిర్వహించినా, నమూనా పెరుగుతున్న స్కేల్ ని ఆర్కిటెక్చర్లో మార్పులు చేయకుండా ఎదుర్కొంటుంది. కొత్త ఫీచర్లు ఉన్న ఈవెంట్ సిస్టమ్ లో సులభంగా అనుసంధానమౌతాయి, స్థాపిత పనితీరు పై ప్రభావం లేకుండా.
> ⚠️ **సాధారణ తప్పు**: ప్రారంభంలో చాలా ప్రత్యేక సందేశ రకాలను సృష్టించవద్దు. విస్తృత విభాగాలతో మొదలుపెట్టి గేమ్ అవసరాలతో అనుగుణంగా మెరుగుపర్చండి.
>
**అనుసరించవలసిన ఉత్తమ పద్ధతులు:**
- సంభంధిత సందేశాలను తర్కబద్ధమైన వర్గాలుగా గుంపు చేయండి
- ఏమి జరిగిందో స్పష్టంగా సూచించే వివరణాత్మక పేర్లను ఉపయోగించండి
- సందేశపు పayloadలను సరళంగా మరియు లక్ష్యంగా ఉంచండి
- బృంద సహకారం కొరకు మీ సందేశ రకాలను డాక్యుమెంట్ చేయండి
### 🔄 **ఆచార్య తనిఖీ**
**ఈవెంట్-చేయి ఆర్కిటెక్చర్ అర్థం చేసుకోవడం**: పూర్తి వ్యవస్థపై మీ అందుబాటును నిర్ధారించుకోండి:
- ✅ పబ్/సబ్ నమూనా భాగాల మధ్య కఠిన బంధాన్ని ఎలా నివారించుతుందో
- ✅ ఈవెంట్-ఆధారిత ఆర్కిటెక్చర్ తో కొత్త ఫీచర్స్ జోడించడం ఇంత సులభమని
- ✅ కమ్యూనికేషన్ ప్రవాహంలో EventEmitter పాత్ర ఏదో
- ✅ సందేశ కాంస్టెంట్లు బగ్స్ నివారించటంలో మరియు నిర్వహణ లో ఎలా సహాయపడతాయో
**డిజైన్ సవాలు**: ఈ గేమ్ సన్నివేశాలను పబ్/సబ్ తో ఎలా నిర్వహిస్తారు?
1. శత్రువు చనిపోవడం: స్కోర్ నవీకరణ, శబ్దం ప్లే, పవర్-అప్ సృష్టి, స్క్రీన్ నుండి తొలగింపు
2. లెవెల్ పూర్తి కాబోవడం: మ్యూజిక్ ఆపటం, UI చూపించడం, ప్రోగ్రెస్ నిల్వ, తదుపరి లెవెల్ లోడ్
3. పవర్-అప్ సేకరణ: సామర్థ్యాలు పెంచటం, UI నవీకరణ, ప్రభావం ప్లే, టైమర్ ప్రారంభం
**వృత్తిపరమైన సంబంధం**: ఈ నమూనా ఈ చోట్ల కనిపిస్తుంది:
- **ఫ్రంట్‌ఎండ్ ఫ్రేమ్‌వర్క్స్**: React/Vue ఈవెంట్ సిస్టమ్స్
- **బ్యాక్‌ఎండ్ సర్వీసెస్**: మైక్రోసర్వీస్ కమ్యూనికేషన్
- **గేమ్ ఇంజిన్లు**: Unity ఈవెంట్ సిస్టమ్
- **మొబైల్ డెవలప్‌మెంట్**: iOS/Android నోటిఫికేషన్ సిస్టమ్స్
---
## GitHub Copilot ఏజెంట్ సవాలు 🚀
ఏజెంట్ మోడ్ ఉపయోగించి ఈ సవాలును పూర్తి చేయండి:
**వివరణ:** వారసత్వం మరియు పబ్/సబ్ నమూనా రెండింటిని ఉపయోగించి ఒక సరళమైన గేమ్ ఆబ్జెక్ట్ సిస్టమ్ సృష్టించండి. వివిధ ఆబ్జెక్టులు ఒకరితో ఒకరు నేరుగా తెలియకుండానే ఈవెంట్ల ద్వారా కమ్యూనికేట్ చేయగలిగే ఒక ప్రాథమిక గేమ్ అమలు చేయండి.
**ప్రాంప్ట్:** ఈ క్రింది అవసరాలతో ఒక జావాస్క్రిప్ట్ గేమ్ సిస్టమ్ సృష్టించండి: 1) x, y కోఆర్డినేట్లు మరియు ఒక రకం ప్రాపర్టీ కలిగిన బేస్ GameObject క్లాస్ తయారు చేయండి. 2) GameObject ను విస్తరించే మరియు కదలగల Hero క్లాస్ సృష్టించండి. 3) GameObject ను విస్తరించే మరియు హీరోని కదలడం కోసం పూనుకునే Enemy క్లాస్ సృష్టించండి. 4) పబ్/సబ్ నమూనా కొరకు EventEmitter క్లాస్ అమలు చేయండి. 5) హీరో కదిలితే దగ్గర ఉన్న శత్రువులు 'HERO_MOVED' ఈవెంట్ తీసుకొని తమ స్థానాలు హీరో వైపు మార్చేలా ఈవెంట్ లిస్నర్స్ ఏర్పాటు చేయండి. ఆబ్జెక్టుల మధ్య కమ్యూనికేషన్ కన్సోల్ లో ఫలితాలు చూపించండి.
[ఏజెంట్ మోడ్ గురించి ఇక్కడ మరింత తెలుసుకోండి](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
## 🚀 సవాలు
పబ్-సబ్ ప్యాటర్న్ గేమ్ ఆర్కిటెక్చర్‌ను ఎలా మెరుగుపరచగలదో పరిశీలించండి. ఎవరు ఈవెంట్లు విడుదల చేయాలని మరియు సిస్టమ్ ఎలా స్పందించాల్సుందో గుర్తించండి. ఒక గేమ్ కాన్సెప్ట్ రూపకల్పన చేసి దాని భాగాల మధ్య సంభాషణ ప్యాటర్న్లను మ్యాప్ చేయండి.
## పోസ്റ്റ്-లెక్చర్ క్విజ్
[పోస్ట్-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/30)
## సమీక్ష & స్వీయ అధ్యయనం
పబ్/సబ్ గురించి [ఇప్పుడు చదవండి](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
### ⚡ **తర్వాతి 5 నిమిషాల్లో మీరు చేయగలిగింది**
- [ ] ఏదైనా HTML5 గేమ్ ఆన్‌లైన్‌లో తెరిచి DevTools ఉపయోగించి దాని కోడ్ పరిశీలించండి
- [ ] ఒక సులభమైన HTML5 కన్వాస్ ఎలిమెంట్ సృష్టించి ఒక ప్రాథమిక ఆకారాన్ని వ్రాయండి
- [ ] సాదా యానిమేషన్ లూప్ సృష్టించడానికి `setInterval` ఉపయోగించి ప్రయత్నించండి
- [ ] కాన్వాస్ API డాక్యుమెంటేషన్‌ను అన్వేషించి డ్రాయింగ్ మాధ్యమాన్ని ప్రయత్నించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగింది**
- [ ] పోస్ట్-పాఠం క్విజ్ పూర్తిచేసి గేమ్ డెవలప్‌మెంట్ భావనలను అర్థం చేసుకోండి
- [ ] మీ గేమ్ ప్రాజెక్ట్ నిర్మాణం HTML, CSS, JavaScript ఫైల్స్‌తో ఏర్పాటు చేయండి
- [ ] నిరంతరంగా నవీకరించి చిత్రీకరించే ప్రాథమిక గేమ్ లూప్ సృష్టించండి
- [ ] కన్వాస్‌పై మీ మొదటి గేమ్ స్ప్రైట్స్‌ను ఆకర్షించండి
- [ ] చిత్రాలు, శబ్దాల కోసం ప్రాథమిక ఆస్తి లోడ్ చేయుట అమలు చేయండి
### 📅 **మీ వారాంతపు గేమ్ సృష్టి**
- [ ] అన్ని యోజనాబద్ధ లక్షణాలతో పూర్తి స్పేస్ గేమ్ పూర్తి చేయండి
- [ ] మెరుగైన గ్రాఫిక్స్, శబ్ద ప్రభావాలు, మృదువైన యానిమేషన్లు జోడించండి
- [ ] గేమ్ రాష్ట్రాలు (ప్రారంభ స్క్రీన్, గేమ్‌ప్లే, గేమ్ ఓవర్) అమలు చేయండి
- [ ] స్కోరింగ్ వ్యవస్థ మరియు ప్లేయర్ పురోగతి ట్రాకింగ్ సృష్టించండి
- [ ] మీ గేమ్‌ను విభిన్న పరికరాలలో సుస్ఫుటంగా మరియు సులభంగా చేయండి
- [ ] మీ గేమ్‌ను ఆన్‌లైన్‌లో పంచుకుని ఆటగాళ్ల నుండి ఫీడ్‌బ్యాక్ సేకరించండి
### 🌟 **మీ నెలపాటు గేమ్ డెవలప్‌మెంట్**
- [ ] విభిన్న జానర్లను, యాంత్రికాలను అన్వేషించుకుని మెరుగైన గేమ్స్ తయారు చేయండి
- [ ] Phaser లేదా Three.js వంటి గేమ్ డెవలప్‌మెంట్ ఫ్రేమ్‌వర్క్ నేర్చుకోండి
- [ ] ఓపెన్ సోర్స్ గేమ్ డెవలప్‌మెంట్ ప్రాజెక్టులలో కృషి చేయండి
- [ ] ఉన్నత స్థాయి గేమ్ ప్రోగ్రామింగ్ ప్యాటర్న్లు, ఆప్టిమైజేషన్ నేర్చుకోండి
- [ ] మీ గేమ్ డెవలప్‌మెంట్ నైపుణ్యాలను ప్రదర్శించే పోర్ట్‌ఫోలియో సృష్టించండి
- [ ] గేమ్ డెవలప్‌మెంట్ మరియు ఇంటరాక్టివ్ మీడియా కోసం ఇతరులను మార్గదర్శనం చెయ్యండి
## 🎯 మీ గేమ్ డెవలప్‌మెంట్ మాస్టరీ టైమ్‌లైన్
```mermaid
timeline
title గేమ్ ఆర్కిటెక్చర్ నేర్చుకునే పురోగతి
section ఆబ్జెక్ట్ నమూనాలు (20 నిమిషాలు)
కోడ్ ఆర్గనైజేషన్: తరగతి వారసత్వం
: కంపోజిషన్ నమూనాలు
: ఫ్యాక్టరీ ఫంక్షన్లు
: ప్రవర్తన మిశ్రమం
section కమ్యూనికేషన్ సిస్టమ్స్ (25 నిమిషాలు)
ఈవెంట్ ఆర్కిటెక్చర్: పబ్/సబ్ అమలు
: సందేశ రూపకల్పన
: ఈవెంట్ ఎమిటర్లు
: సడలింపు కలపడం
section గేమ్ ఆబ్జెక్ట్ డిజైన్ (30 నిమిషాలు)
ఎంటిటీ సిస్టమ్స్: ప్రాపర్టీ నిర్వహణ
: ప్రవర్తన కంపోజిషన్
: స్టేట్ హ్యాండలింగ్
: లైఫ్సైకిల్ నిర్వహణ
section ఆర్కిటెక్చర్ నమూనాలు (35 నిమిషాలు)
సిస్టమ్ డిజైన్: భాగం సిస్టమ్స్
: ఆబ్జర్వర్ నమూనా
: కమాండ్ నమూనా
: స్టేట్ మెషీన్లు
section అధునాతన సూత్రాలు (45 నిమిషాలు)
స్కేలబుల్ ఆర్కిటెక్చర్: పనితీరు మెరుగుదల
: మెమరీ నిర్వహణ
: మాడ్యూలర్ డిజైన్
: పరీక్షా వ్యూహాలు
section గేమ్ ఇంజిన్ సూత్రాలు (1 వారము)
వృత్తిపరమైన అభివృద్ధి: సీన్ గ్రాఫ్స్
: ఆస్తి నిర్వహణ
: రेंडరింగ్ పైప్లైన్లు
: ఫిజిక్స్ సమీకరణ
section ఫ్రేమ్‌వర్క్ ప్రావీణ్యం (2 వారాలు)
ఆధునిక గేమ్ అభివృద్ధి: రియాక్ట్ గేమ్ నమూనాలు
: కాన్వాస్ ఆప్టిమైజేషన్
: వెబ్‌జీఎల్ మౌలికాలు
: పిడబ్ల్యూ‌ఏ గేమ్స్
section పరిశ్రమ ఆచరణలు (1 నెల)
వృత్తిపరమైన నైపుణ్యాలు: జట్టు సహకారం
: కోడ్ సమీక్షలు
: గేమ్ డిజైన్ నమూనాలు
: పనితీరు ప్రొఫైలింగ్
```
### 🛠️ మీ గేమ్ ఆర్కిటెక్చర్ టూల్‌కిట్ సారాంశం
ఈ పాఠం పూర్తయిన తర్వాత, మీరు ఇప్పుడు:
- **డిజైన్ ప్యాటర్న్ మాస్టరీ**: వారసత్వం మరియు కంపోజిషన్ మార్పిడి ఫైచుల అవగాహన
- **ఈవెంట్-డ్రివెన్ ఆర్కిటెక్చర్**: స్కేలబుల్ కమ్యూనికేషన్ కోసం పబ్/సబ్ అమలు
- **ఆబ్జెక్ట్-ఓరియెంటెడ్ డిజైన్**: క్లాస్ హైరార్కీలు మరియు ప్రవర్తనా కంపోజిషన్
- **ఆధునిక జావాస్క్రిప్ట్**: ఫ్యాక్టరీ ఫంక్షన్స్, స్ప్రెడ్ సింటాక్స్, ES6+ ప్యాటర్న్స్
- **స్కేలబుల్ ఆర్కిటెక్చర్**: లూజ్ కాప్లింగ్ మరియు మాడ్యులర్ డిజైన్ సూత్రాలు
- **గేమ్ డెవలప్‌మెంట్ ఫౌండేషన్**: ఎంటిటీ సిస్టమ్స్ మరియు కంపONENT్ ప్యాటర్న్స్
- **ప్రొఫెషనల్ ప్యాటర్న్స్**: కోడ్ ఆర్గనైజేషన్‌కు ఇండస్ట్రీ-స్టాండర్డ్ దృక్పథాలు
**వాస్తవ ప్రపంచ అన్వయాలు**: ఈ ప్యాటర్న్లు నేరుగా వర్తిస్తాయి:
- **ఫ్రంటెండ్ ఫ్రేమ్‌వర్క్స్**: React/Vue భాగ ఆర్కిటెక్చర్ మరియు స్టేట్ మేనేజ్‌మెంట్
- **బ్యాకెండ్ సర్వీసెస్**: మైక్రోసర్వీస్ కమ్యూనికేషన్ మరియు ఈవెంట్-డ్రివెన్ సిస్టమ్స్
- **మొబైల్ డెవలప్‌మెంట్**: iOS/Android యాప్ ఆర్కిటెక్చర్ మరియు నోటిఫికేషన్ సిస్టమ్స్
- **గేమ్ ఇంజిన్లు**: Unity, Unreal, మరియు వెబ్-ఆధారిత గేమ్ డెవలప్‌మెంట్
- **ఎంటర్ప్రైజ్ సాఫ్ట్‌వేర్**: ఈవెంట్ సోర్సింగ్ మరియు పంపిణీ సిస్టమ్ డిజైన్
- **API డిజైన్**: RESTful సర్వీసెస్ మరియు రియల్-టైమ్ కమ్యూనికేషన్
**ప్రొఫెషనల్ నైపుణ్యాలు**: మీరు ఇప్పుడు చేయగలరు:
- **డిజైన్**: నిరూపిత ప్యాటర్న్లతో స్కేలబుల్ సాఫ్ట్‌వేర్ ఆర్కిటెక్చర్‌లు రూపొందించు
- **అమలు**: సంక్లిష్ట పరస్పర చర్యలను నిర్వహించే ఈవెంట్-డ్రివెన్ సిస్టమ్‌లు అమలు చేయి
- **ఎంచుకోండి**: వివిధ సందర్భాలకు అనుకూలమైన కోడ్ ఆర్గనైజేషన్ వ్యూహాలు
- **డీబగ్** మరియు సులభంగా నిర్వహించు లూజ్ కాపుల్ సిస్టమ్‌లు
- **కమ్యూనికేట్**: పరిశ్రమ-స్థాయి పదజాలం ఉపయోగించి సాంకేతిక నిర్ణయాలు తెలియజేయండి
**తరువాతి స్థాయి**: మీరు ఈ ప్యాటర్న్లను నిజమైన గేమ్‌లో అమలు చేయడానికి, ఉన్నత గేమ్ డెవలప్‌మెంట్ అంశాలను అన్వేషించడానికి లేదా ఈ ఆర్కిటెక్చర్ భావనలను వెబ్ అప్లికేషన్స్‌లో అన్వయించడానికి సిద్ధం!!
🌟 **హాసలైంది**: మీరు సాదాసీదా గేమ్స్ నుండి సంక్లిష్ట ఎంటర్ప్రైజ్ సిస్టమ్స్ వరకు అన్ని వర్గాల సాఫ్ట్‌వేర్ ఆర్కిటెక్చర్ ప్యాటర్న్లను మాస్టర్ చేసుకున్నారు!
## అసైన్‌మెంట్
[గేమ్ నమూనా రూపొందించండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**స్పష్టీకరణ**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించాం. మేము ఖచ్చితత్వం కోసం ప్రయత్నిస్తేనూ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా అపూర్వతలు ఉండవచ్చు. స్థానిక భాషలో ఉన్న అసలు పత్రాన్ని అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం ప్రొఫెషనల్ మానవ అనువాదం చేయించుకోవడం ఉత్తమం. ఈ అనువాదం ఉపయోగకారణం జరిగిన అపార్థాలు లేదా తప్పుబాటులకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

102
translations/te/6-space-game/1-introduction/assignment.md
Unescape View File

@ -0,0 +1,102 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c8fc39a014d08247c082878122e2ba73",
"translation_date": "2026-01-08T14:29:18+00:00",
"source_file": "6-space-game/1-introduction/assignment.md",
"language_code": "te"
}
-->
# గేమ్‌ను మాక్ అప్ చేయండి: డిజైన్ ప్యాటరన్లు అప్లై చేయండి
## అసైన్‌మెంట్ సమీక్ష
డిజైన్ ప్యాటరన్లపై మీ కొత్త జ్ఞానాన్ని ఉపయోగించి ఒక సింపుల్ గేమ్ ప్రొటోటైప్ సృష్టించండి! ఈ అసైన్‌మెంట్ మీరు ఆర్కిటెక్చరల్ ప్యాటరన్లు (ఇన్హెరిటెన్స్ లేదా కంపోజిషన్) మరియు లెషన్‌లో నేర్చుకున్న పబ్/సబ్ కమ్యూనికేషన్ సిస్టమ్‌ను ప్రాక్టీస్ చేయడంలో సహాయపడుతుంది.
## సూచనలు
ఈ లెషన్‌లో ఉన్న డిజైన్ ప్యాటరన్లను ప్రదర్శించే ఒక సింపుల్ గేమ్ ప్రాతినిధ్యం సృష్టించండి. మీ గేమ్ ఫంక్షనల్‌గా ఉండాలి కానీ క్లిష్టమైన గ్రాఫిక్స్ అవసరం లేదు – క్రింద ఉన్న ఆర్కిటెక్చర్ మరియు కమ్యూనికేషన్ ప్యాటరన్లపై దృష్టి పెట్టండి.
### అవసరాలు
**మీ ఆర్కిటెక్చర్ ప్యాటరన్ ఎంచుకోండి:**
- **ఎంపిక ఏ**: క్లాస్-ఆధారిత ఇన్హెరిటెన్స్ ఉపయోగించండి (ఉదాహరణకు `GameObject` → `Movable` → `Hero` మాదిరి)
- **ఎంపిక బి**: కంపోజిషన్ ఉపయోగించండి (ఫ్యాక్టరీ ఫంక్షన్ విధానంతో మిక్స్ చేసిన ప్రవర్తనల మాదిరి)
**కమ్యూనికేషన్ అమలు చేయండి:**
- **రాబట్టండి** `EventEmitter` క్లాస్ పబ్/సబ్ మెసేజింగ్ కోసం
- **సెట్ చేయండి** కనీసం 2-3 వేర్వేరు మెసేజ్ రకాలును (ఉదా: `PLAYER_MOVE`, `ENEMY_SPAWN`, `SCORE_UPDATE`)
- **కనెక్ట్ చేయండి** యూజర్ ఇన్‌పుట్ (కీబోర్డ్/మౌస్) ను గేమ్ ఈవెంట్లతో ఈవెంట్ సిస్టమ్ ద్వారా
**గేమ్ అంశాలు చేర్చండి:**
- కనీసంగా ఒక ప్లేయర్ నియంత్రిత క్యారెక్టర్
- కనీసం ఒకటి మరొక గేమ్ ఆబ్జెక్ట్ (ఎనమీ, సేకరించే వస్తువు లేదా పరిసర అంశం)
- ఆబ్జెక్టుల మధ్య ప్రాథమిక ఇంటరాక్షన్ (కొలిజన్, సేకరణ, లేదా కమ్యూనికేషన్)
### సూచించిన గేమ్ ఆలోచనలు
**పరిగణించదగిన సింపుల్ గేమ్స్:**
- **స్నేక్ గేమ్** – స్నేక్ సెగ్మెంట్లు తల‌ను అనుసరిస్తాయి, ఆహారం యాదృచ్ఛికంగా స్పాన్ అవుతుంది
- **పాంగ్ వెరియేషన్** – ప్యాడిల్ ఇన్‌పుట్‌కు స్పందిస్తుంది, బంతి గోడలకు తగిలి తిరుగుతుంది
- **కలెక్టర్ గేమ్** – ప్లేయర్ వస్తువులను సేకరించే సమయంలో అడ్డంకులను తప్పుకుంటూ మళ్ళిశీలిస్తాడు
- **టవర్ డిఫెన్స్ బేసిక్స్** – టవర్లు పొడవుగా నడిచే శత్రువులను గుర్తించి వాటిపై షూట్ చేస్తాయి
### కోడ్ నిర్మాణ మార్గదర్శకాలు
```javascript
// ఉదాహరణ ప్రారంభ నిర్మాణం
const Messages = {
// మీ ఆట సందేశాలను ఇక్కడ నిర్వచించండి
};
class EventEmitter {
// మీ ఈవెంట్ సిస్టమ్ అమలు
}
// తరగతి ఆధారితం లేదా కూడిక పద్ధతి ఎంచుకోండి
// తరగతి ఆధారిత ఉదాహరణ:
class GameObject { /* base properties */ }
class Player extends GameObject { /* player-specific behavior */ }
// లేదా కూడిక ఉదాహరణ:
const gameObject = { /* base properties */ };
const movable = { /* movement behavior */ };
function createPlayer() { /* combine behaviors */ }
```
### మీ అమలును పరీక్షించడం
**మీ కోడ్ పనిచేస్తుందా అని సరిచూడండి:**
- **ఫలితంగా** ఆబ్జెక్టులు ఈవెంట్లు ట్రిగ్గర్ అయినప్పుడు కదిలితే లేదా మారితే
- **పట్టుకుని ఉండు** ఒకే ఈవెంట్‌కు అనేక ఆబ్జెక్టులు స్పందిస్తాయేమో
- **తీయండి** మీరు కొత్త ప్రవర్తనలు చేర్చడంలో ప్రస్తుతం ఉన్న కోడ్ మార్చాల్సిన అవసరం లేకుండా చేయగలుగుతారు
- **ఖచ్చితంగా చూసుకోండి** మీ కీబోర్డ్/మౌస్ ఇన్‌పుట్ గేమ్ ఈవెంట్లను సరికొత్తగా ట్రిగ్గర్ చేస్తుందని
## సమర్పణ మార్గదర్శకాలు
**మీ సమర్పణలో ఉండాలి:**
1. **JavaScript ఫైల్(లు)** మీ గేమ్ అమలుతో
2. **HTML ఫైల్** మీ గేమ్‌ని రన్ చేసి పరీక్షించడానికి (సింపుల్ కావచ్చు)
3. **వ్యాఖ్యలు** మీరు ఎంచుకున్న ప్యాటరన్ ఏది మరియు ఎందుకు ఎంచుకున్నారో వివరిస్తూ
4. **సంక్షిప్త డాక్యుమెంటేషన్** మీ మెసేజ్ రకాల గురించి మరియు అవి ఏవీ చేస్తాయో
## రూబ్రిక్
| ప్రమాణం | ఉదాత్తమైనది (3 పాయింట్లు) | సరైనది (2 పాయింట్లు) | మెరుగుపరచాల్సినదే (1 పాయింట్) |
|----------|---------------------|---------------------|------------------------------|
| **ఆర్కిటెక్చర్ ప్యాటరన్** | ఇన్హెరిటెన్స్ లేదా కంపోజిషన్ లో సరైన క్లాస్/ఆబ్జెక్ట్ హైరార్కీ తో అమలు | ఎంచుకున్న ప్యాటర్న్ ను సన్న jooksలతో ఉపయోగిస్తుంది | ప్యాటర్న్ వాడదలచిన ప్రయత్నం కానీ అమలులో పెద్ద సమస్యలు ఉన్నాయి |
| **పబ్/సబ్ అమలు** | EventEmitter సరిగ్గా మల్టిపుల్ మెసేజ్ రకాలతో మరియు సరైన ఈవెంట్ ఫ్లో తో పనిచేస్తుంది | ప్రాథమిక పబ్/సబ్ సిస్టమ్ కొంత ఈవెంట్ హ్యాండ్లింగ్ తో పనిచేస్తుంది | ఈవెంట్ సిస్టమ్ ఉంది కానీ విశ్వసనీయంగా పనిచేయదు |
| **గేమ్ ఫంక్షనాలిటీ** | ఈవెంట్ల ద్వారా కమ్యూనికేట్ చేసే మూడు లేదా అంతకు మించి ఇంటరాక్టివ్ అంశాలు | రెండు ఇంటరాక్టివ్ అంశాలు ప్రాథమిక ఈవెంట్ కమ్యూనికేషన్ తో | ఒక అంశం ఈవెంట్లకు స్పందిస్తుంది లేదా ప్రాథమిక ఇంటరాక్షన్ ఉంది |
| **కోడ్ నాణ్యత** | పరిశుభ్రమైన, బాగుగా వ్యాఖ్యానించిన కోడ్ లాజికల్ ఆర్గనైజేషన్ తో తాజా JavaScript ఉపయోగించి | సాధారణంగా బాగున్న కోడ్ సరైన వ్యాఖ్యలతో | కోడ్ పనిచేస్తుంది కానీ ఆర్గనైజేషన్ లేదా స్పష్టమైన వ్యాఖ్యలు లేవు |
**బోనస్ పాయింట్లు:**
- **సృజనాత్మక గేమ్ యంత్రాంగాలు** ప్యాటరన్ల ఆసక్తికరమైన ఉపయోగాలను ప్రదర్శించేవి
- **అనేక ఇన్‌పుట్ విధానాలు** (కీబోర్డ్ మరియు మౌస్ ఈవెంట్లు)
- **విస్తరించదగిన ఆర్కిటెక్చర్** దీని ద్వారా కొత్త ఫీచర్లను సులభంగా జోడించవచ్చు
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ పత్రాన్ని AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించాము. మనం సరిచూడటానికి ప్రయత్నిస్తే కూడా, ఆటోమేటెడ్ అనువాదాల్లో పాపదోషాలు లేదా తప్పులుంటే ఉండొచ్చు. అసలు పత్రం అసలు భాషలో ఉన్నది అధికారిక వనరు గా పరిగణించాలి. కీలక సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదాన్ని సిఫారసు చేస్తాము. ఈ అనువాదం వలన సంఘటనలైన ఎలాంటి అపార్థాలు లేదా తప్పుదోపిడుల బాధ్యత మేము తీసుకోవము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

624
translations/te/6-space-game/2-drawing-to-canvas/README.md
Unescape View File

@ -0,0 +1,624 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7994743c5b21fdcceb36307916ef249a",
"translation_date": "2026-01-08T13:39:04+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/README.md",
"language_code": "te"
}
-->
# ఒక స్పేస్ గేమ్ భాగం 2: హీరో మరియు మానవులను కాన్వాస్‌లో డ్రా చేయండి
```mermaid
journey
title మీ కాన్వాస్ గ్రాఫిక్స్ ప్రయాణం
section స్థాపన
కాన్వాస్ API ని అర్థం చేసుకోండి: 3: Student
కోఆర్డినేట్ సిస్టమ్ నేర్చుకోండి: 4: Student
ప్రాథమిక ఆకృతులు గీయండి: 4: Student
section చిత్ర నిర్వహణ
గేమ్ ఆస్తులను లోడ్ చేయండి: 4: Student
అసింక్ లోడింగ్ నిర్వహించండి: 5: Student
స్ప్రైట్ స్థానాలు నిర్దేశించండి: 5: Student
section గేమ్ రೆండరింగ్
గేమ్ స్క్రీన్ సృష్టించండి: 5: Student
ఫార్మేషన్లు రూపొందించండి: 5: Student
పనితీరు ఆప్టిమైజ్ చేయండి: 4: Student
```
కేన్వాస్ API వెబ్ డెవలప్‌మెంట్ యొక్క అత్యంత శక్తివంతమైన ఫీచర్లలో ఒకటి, మీరు మీ బ్రౌజర్‌లోనే డైనమిక్, ఇంటరాక్టివ్ గ్రాఫిక్స్‌ని సృష్టించడానికి. ఈ పాఠంలో, మనం ఆ ఖాళీ HTML `<canvas>` ఎలిమెంట్‌ను గేమ్ ప్రపంచంగా మార్చబోతున్నాము, అక్కడ హీరోలు మరియు మానవులు ఉన్నారు. కేన్వాస్‌ని మీ డిజిటల్ ఆర్ట్ బోర్డ్‌గా ఆలోచించండి, అక్కడ కోడ్ విజువల్‌గా మారుతుంది.
ముందటి పాఠంలో మీరు నేర్చుకున్నదాన్ని మనం ఆధారంగా తీసుకుని, ఇప్పుడు విజువల్ అంశాల్లోకి డివ్ చేస్తాం. మీరు గేమ్ స్ప్రైట్లను లోడ్ చేసి చూపించడం, మూలకాలను ఖచ్చితమైన స్థలంలో ఉంచడం ఎలా చేయాలో నేర్చుకుంటారు మరియు మీ స్పేస్ గేమ్ కోసం విజువల్ ఫౌండేషన్ సృష్టిస్తారు. ఇది స్థిరమైన వెబ్ పేజీలతో డైనమిక్, ఇంటరాక్టివ్ అనుభవాల మధ్య గ టి పోతుంది.
ఈ పాఠం చివరికి, మీ హీరో షిప్ సరిగ్గా స్థాపించబడిన పూర్తి గేమ్ సన్నివేశం మరియు శత్రు ఆకృతీకరణలు యుద్ధానికి సిద్ధంగా ఉంటాయి. మీరు ప్రస్తుత గేమ్స్ బ్రౌజర్లలో గ్రాఫిక్స్ ఎలా రేండర్ చేస్తాయో అర్థం చేసుకుంటారు మరియు మీ స్వంత ఇంటరాక్టివ్ విజువల్ అనుభవాలు సృష్టించడానికి నైపుణ్యాలు పొందుతారు. కేన్వాస్ గ్రాఫిక్స్‌ని అన్వేషించి మీ స్పేస్ గేమ్‌కు ప్రాణం పోయిద్దాం!
```mermaid
mindmap
root((కాన్వాస్ గ్రాఫిక్స్))
Canvas Element
HTML5 ఫీచర్
2D కాంటెక్స్ట్
కోఆర్డినేట్ సిస్టమ్
పిక్సెల్ నియంత్రణ
Drawing Operations
ప్రాథమిక ఆకారాలు
టెక్స్ట్ రెండరింగ్
చిత్రం ప్రదర్శన
మార్గం డ్రాయింగ్
Asset Management
చిత్రం లోడ్ చేయడం
అసంక్రోనస్ ఆపరేషన్లు
లోపాలను నిర్వహించడం
పనితీరు
Game Rendering
స్ప్రైట్ స్థాన నిర్ధారణ
రూప అమరిక
సన్నివೇಶ సమ్మేళనం
ఫ్రేమ్ నవీకరణలు
Visual Effects
రంగులు & శైలులు
మార్పిడి
అనిమేషన్లు
పొరలు
```
## ముందస్తు-లెక్చర్ క్విజ్
[ముందస్తు-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/31)
## కేన్వాస్ అంటే ఏమిటి
అప్పుడు ఈ `<canvas>` ఎలిమెంట్ అసలు ఏమిటి? ఇది HTML5 లో వెబ్ బ్రౌజర్లలో డైనమిక్ గ్రాఫిక్స్ మరియు యానిమేషన్స్ సృష్టించే పరిష్కారం. సాధారణ చిత్రాలు లేదా వీడియోలు స్థిరంగా ఉంటే, కేన్వాస్ స్క్రీన్‌పై కనిపించే ప్రతీదానిపై పిక్సెల్ స్థాయి నియంత్రణ ఇస్తుంది. ఇది గేమ్స్, డేటా విజువలైజేషన్స్ మరియు ఇంటరాక్టివ్ ఆర్ట్‌కు అనుకూలంగా ఉంటుంది. జావాస్క్రిప్ట్ మీ పెయింట్ బ్రష్ కావలెను, ప్రోగ్రామబుల్ డ్రాయింగ్ ఉపరితలంగా దీన్ని చూడండి.
డిఫాల్ట్‌గా, కేన్వాస్ ఎలిమెంట్ మీ పేజీలో ఖాళీ, పారదర్శకమైనచక్కటి అయతని ఉంటాది. కానీ శక్తి అక్కడే! మీరు జావాస్క్రిప్ట్ ఉపయోగించి ఆకారాలను డ్రా చేయగలరు, చిత్రాలు లోడ్ చేయగలరు, యానిమేషన్స్ సృష్టించగలరు, మరియు యూజర్ ఇంటరాక్షన్లకు స్పందించే అంశాలను చేయగలరు. 1960 లో బెల్ ల్యాబ్స్‌లోని కంప్యూటర్ గ్రాఫిక్స్ పయనేతలాగా ప్రతి పిక్సెల్‌ని ప్రోగ్రామ్ చేసి మొదటి డిజిటల్ యానిమేషన్స్ సృష్టించినట్టు ఇది ఉంది.
✅ MDN పై [కేన్వాస్ API గురించి మరింత చదవండి](https://developer.mozilla.org/docs/Web/API/Canvas_API).
ఇది సాధారణంగా పేజీ యొక్క బాడీలో ఇలా ప్రకటించబడుతుంది:
```html
<canvas id="myCanvas" width="200" height="100"></canvas>
```
**ఈ కోడ్ ఏమి చేస్తుంది:**
- జావాస్క్రిప్ట్‌లో ఈ కేన్వాస్ ఎలిమెంట్‌ను రిఫరెన్స్ చేయడానికి `id` కనుగొంటుంది
- కేన్వాస్ యొక్క అడ్డం పరిమాణాన్ని పిక్సెల్స్‌లో సెట్ చేస్తుంది
- కేన్వాస్ యొక్క నిలువు పరిమాణాన్ని పిక్సెల్స్‌లో నిర్ణయిస్తుంది
## సాదా జ్యామితి ఆకారాలు చిత్రించడం
ఇప్పుడు మీరు కేన్వాస్ ఎలిమెంట్ అంటే ఏమిటి తెలుసుకున్నారు, దానిపై చిత్రించడం ఎలా చేస్తామో చూద్దాం! కేన్వాస్ కూయ ఆ సమన్వయ వ్యవస్థ సాదా గమనానికి సారూప్యంగా ఉంటుంది, కానీ కంప్యూటర్ గ్రాఫిక్స్‌కు ప్రత్యేకంగా ఒక ముఖ్యమైన తేడా ఉంది.
కేన్వాస్ Cartesian సమన్వయ వ్యవస్థ ఉపయోగిస్తుంది, x-అక్షం (అడ్డంగా) మరియు y-అక్షం (కొత్తుగా) తో మీరు డ్రా చేసే ప్రతీదానికీ స్థానాన్ని నిర్ణయిస్తుంది. కానీ ముఖ్యమైన తేడా ఉంది: మాథ్స్ క్లాస్ నుండి సమన్వయ వ్యవస్థ నుండి భిన్నంగా, మూలపు బిందువు `(0,0)` ఎడమముపై మునుపు నుండి ప్రారంభమవుతుంది, x విలువలు కుడితో పెరుగుతాయి మరియు y విలువలు దిగువకు పెరుగుతాయి. ఈ విధానం 1960 కాలంలో మొదటి కంప్యూటర్ డిస్ప్లేలలో ఎలక్ట్రాన్ బీమ్స్ పై నుండి దిగువవైపు స్స్కాన్ జరిగిన కారణంగా పుట్టింది, కాబట్టి ఎడమ పై మూల భూత యెందుకు సహజ ఆరంభం అయింది.
```mermaid
quadrantChart
title కాన్వాస్ కోఆర్డినేట్ సిస్టమ్
x-axis ఎడమ ---> కుడి
y-axis పై ---> దిగువ
quadrant-1 క్వాడ్రంట్ 1
quadrant-2 క్వాడ్రంట్ 2
quadrant-3 క్వాడ్రంట్ 3
quadrant-4 క్వాడ్రంట్ 4
Origin Point: [0.1, 0.1]
Hero Center: [0.5, 0.8]
Enemy Formation: [0.3, 0.2]
Power-up: [0.7, 0.6]
UI Elements: [0.9, 0.1]
```
![the canvas's grid](../../../../translated_images/canvas_grid.5f209da785ded492.te.png)
> చిత్రం [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) నుండి
కేన్వాస్ ఎలిమెంట్ పై డ్రా చేయడానికి, మీరు కేన్వాస్ గ్రాఫిక్స్ బేసిక్ మూలాధారమైన మూడు-దశల ప్రక్రియను అనుసరిస్తారు. మీరు దీనిని కొన్ని సార్లు చేస్తే, ఇది సహజంగా మారుతుంది:
```mermaid
flowchart LR
A[HTML క్యాన్వాస్ ఎలిమెంట్] --> B[క్యాన్వాస్ రిఫరెన్స్ పొందండి]
B --> C[2డి కాంటెక్స్ట్ పొందండి]
C --> D[డ్రాయింగ్ ఆపరేషన్స్]
D --> E[ఆకారాలు డ్రా చేయండి]
D --> F[పాఠ్యం డ్రా చేయండి]
D --> G[బొమ్మలు డ్రా చేయండి]
D --> H[షైల్స్ అప్లై చేయండి]
E --> I[స్క్రీన్‌కు రేందర్ చేయండి]
F --> I
G --> I
H --> I
style A fill:#e1f5fe
style C fill:#e8f5e8
style I fill:#fff3e0
```
1. డామ్ నుండి మీ కేన్వాస్ ఎలిమెంట్‌కు రిఫరెన్స్ పొందండి (ఇతర HTML ఎలిమెంట్ల లాగే)
2. 2D రెండరింగ్ కాంటెక్స్ట్ పొందండి – ఇది అన్ని డ్రాయింగ్ మెథడ్‌లను అందిస్తుంది
3. చిత్రించడం మొదలు పెట్టండి! ప్రాసంగికంగా కాంటెక్స్ట్ లో ఉన్న మెథడ్‌లను ఉపయోగించి గ్రాఫిక్స్ సృష్టించండి
దానిని కోడ్‌లో ఇలా చూపిస్తారు:
```javascript
// దశ 1: కెన్వాస్ అంశాన్ని పొందండి
const canvas = document.getElementById("myCanvas");
// దశ 2: 2D రెండరింగ్ కంటెక్స్ట్ పొందండి
const ctx = canvas.getContext("2d");
// దశ 3: నింపే రంగును సెట్ చేసి ఒక చతురస్రం డ్రా చేయండి
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // ఎక్స్, వై, వెడల్పు, ఎత్తు
```
**దీన్ని దశల వారీగా విభజిద్దాం:**
- కేన్వాస్ ఎలిమెంట్‌ను ID ద్వారా పొందించి ఒక వేరియబుల్ లో స్టోర్ చేస్తాం
- 2D రెండరింగ్ కాంటెక్స్ట్ ఇది డ్రాయింగ్ లెక్కలతో కూడిన టూల్ కిట్‌
- `fillStyle` ప్రాపర్టీ ద్వారా ఎరుపు రంగుతో ఫిల్ చేయాలని చెప్పెం
- ఎడమ పై మూలం (0,0) నుండి 200 పిక్సెల్ వెడల్పు, ఎత్తు గల రెక్టాంగుల్ డ్రా చేస్తాం
✅ కేన్వాస్ API ఎక్కువగా 2D ఆకారాలపై దృష్టి పెట్టినా, మీరు వెబ్‌సైట్‌కి 3D అంశాలు కూడా డ్రా చేయవచ్చు; అందుకు [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ఉపయోగించవచ్చు.
మీరు కేన్వాస్ API తో ఎన్నో విషయాలు డ్రా చేయవచ్చు:
- **జ్యామితి ఆకారాలు**: రెక్టాంగిల్ డ్రా చేయడం మేము చూపించాము, కాని మరెన్నో ఆకారాలు ఎందుకు కాదు.
- **టెక్స్ట్**: మీరు ఏ ఫాంట్ మరియు రంగుతో అయినా టెక్స్ట్ డ్రా చేయవచ్చు.
- **చిత్రాలు**: .jpg లేదా .png వంటి చిత్రం ఆస్తి ఆధారంగా చిత్రాన్ని డ్రా చేయవచ్చు.
✅ ప్రయత్నించండి! మీరు రెక్టాంగిల్ డ్రా చేయడం తెలుసుకున్నట్లయితే, నిన్ను యొక్క పేజీకి సర్కిలు డ్రా చేయగలరా? CodePen లో కొన్ని ఆసక్తికరమైన కేన్వాస్ డ్రాయింగ్‌లను చూడండి. ఇక్కడ ఒక [ప్రత్యేకంగా అద్భుత ఉదాహరణ](https://codepen.io/dissimulate/pen/KrAwx).
### 🔄 **ఉపాధ్యాయ తనిఖీ**
**కేన్వాస్ ఫండమెంటల్స్ అర్థం చేసుకోండి**: చిత్రం లోడ్ మొదలు పెట్టేముందు, మీరు నీతించాల్సింది:
- ✅ కేన్వాస్ సమన్వయ వ్యవస్థ ఎలా గణిత సమన్వయాల నుండి భిన్నమైనదో వివరించగలరు
- ✅ కేన్వాస్ చిత్రీకరణ కోసం మూడు దశల ప్రక్రియ నేర్చుకోండి
- ✅ 2D రెండరింగ్ కాంటెక్స్ట్ ఏమి అందిస్తున్నదో గుర్తించండి
- ✅ fillStyle మరియు fillRect ఎలా కలిసి పనిచేస్తాయో వివరించండి
**త్వరిత స్వీయ పరీక్ష**: (100, 50) స్థానంలో 25 వ్యాసార్థంతో మీరన్నీలా నీలం వలయాన్ని డ్రా చేస్తారు?
```javascript
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 50, 25, 0, 2 * Math.PI);
ctx.fill();
```
**మీకిప్పుడు తెలిసిన కేన్వాస్ డ్రాయింగ్ మెథడ్స్:**
- **fillRect()**: నింపబడిన రెక్టాంగ్ల్స్ డ్రా చేస్తుంది
- **fillStyle**: రంగులు మరియు నమూనాలను సెట్ చేస్తుంది
- **beginPath()**: కొత్త డ్రాయింగ్ మార్గాలను ప్రారంభిస్తుంది
- **arc()**: వలయాలు మరియు వంకలు సృష్టిస్తుంది
## చిత్ర ఆస్తిని లోడ్ చేసి డ్రా చేయడం
ప్రాథమిక ఆకారాలు డ్రా చేయడం ఉపయోగకరం, కానీ ఎక్కువ గేమ్స్ వాస్తవ చిత్రాలను అవసరం పడతాయి! స్ప్రైట్లు, నేపథ్యాలు, మరియు టెక్స్చర్లు గేమ్స్‌కు విజువల్ ఆకర్షణను ఇస్తాయి. చిత్రాలను లోడ్ చేసి కేన్వాస్ పై ప్రదర్శించడం జ్యామితి ఆకారాల డ్రాయిం(గ నుండి వేరుగా పనిచేస్తుంది, కానీ ఇది సులభంగా అర్థం చేసుకోవచ్చు.
మనం `Image` ఆబ్జెక్ట్ సృష్టించాలి, చిత్రం ఫైల్ ని లోడ్ చేయాలి (ఇది అసింక్రోనస్, అంటే "బ్యాక్‌గ్రౌండ్" లో జరుగుతుంది), మరియు ఇది సిద్ధంగా ఉంటే కేన్వాస్ పై చిత్రించాలి. ఇది మీ చిత్రాలు సరైనవిగా ప్రదర్శించబడటానికి సహాయం చేస్తుంది, లోడ్‌గా ఉండగా మీ అప్లికేషన్ బ్లాక్ అయిపోకుండా.
```mermaid
sequenceDiagram
participant JS as జావాస్క్రిప్ట్
participant Img as చిత్రం వస్తువు
participant Server as ఫైల్ సర్వర్
participant Canvas as కాన్వాస్ కాంటెక్స్ట్
JS->>Img: new Image()
JS->>Img: src ప్రాపర్టీని సెట్ చేయండి
Img->>Server: చిత్ర ఫైల్ అభ్యర్థించండి
Server->>Img: చిత్ర డేటాను తిరిగి ఇవ్వండి
Img->>JS: onload ఈవెంట్‌ను ట్రిగర్ చేయండి
JS->>Canvas: drawImage(img, x, y)
Canvas->>Canvas: స్క్రీన్‌కి చిత్రించడం
Note over JS,Canvas: అసంక్రోనస్ లోడింగ్ UI బ్లాకింగ్‌ను నివారిస్తుంది
```
### ప్రాథమిక చిత్రం లోడింగ్
```javascript
const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
// చిత్రం లోడ్ చేసి ఉపయోగానికి సిద్ధంగా ఉంది
console.log('Image loaded successfully!');
};
```
**ఈ కోడ్ లో ఏమి జరుగుతుంది:**
- మనం కొత్త Image ఆబ్జెక్ట్ సృష్టించి మా స్ప్రైట్ లేదా టెక్స్చర్ ను ఉంచుతాము
- ఏ చిత్రం ఫైల్ లోడ్ చేయాలో సోర్స్ పాథ్ సెట్ చేసి చెప్తాము
- చిత్రం రెడీ అయినప్పుడు మాకు తెలియడానికి లోడ్ ఈవెంటుకు లిసెన్ చేయడం
### చిత్రాలను లోడ్ చేసే మెరుగైన విధానం
ప్రొఫెషనల్ డెవలపర్లు సాధారణంగా ఉపయోగించే చిత్ర లోడ్ నిర్వహణకు ఒక ఇంకా బలమైన విధానం ఉంది. మనం చిత్ర లోడింగ్ ని Promise ఆధారిత ఫంక్షన్ లో వ్రాస్తాము – JavaScript Promises ES6 నుండి సాధారణమైందాక, దీన్ని అమలు చేయడం అంతా ఆర్గనైజ్ చేయడం మరియు తప్పిదాలు సులువు నుండి నిర్వహించడం చేస్తుంది:
```javascript
function loadAsset(path) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = path;
img.onload = () => {
resolve(img);
};
img.onerror = () => {
reject(new Error(`Failed to load image: ${path}`));
};
});
}
// ఆసింక్/అవైట్‌తో ఆధునిక ఉపయోగం
async function initializeGame() {
try {
const heroImg = await loadAsset('hero.png');
const monsterImg = await loadAsset('monster.png');
// చిత్రాలు ఇప్పుడు వాడటానికి సిద్ధంగా ఉన్నవు
} catch (error) {
console.error('Failed to load game assets:', error);
}
}
```
**ఇక్కడ మేము చేసినది:**
- అన్ని చిత్రం లోడింగ్ లాజిక్‌ను Promise తో చుట్టి మెరుగ్గా నిర్వర్తించాల్సి వచ్చింది
- ఏదైనా లోపం వస్తే తెలియజేసే ఎర్రర్ హ్యాండ్లింగ్ జోడించడం
- async/await ఆధునిక సింటాక్స్ ఉపయోగించడం – చదవడంలో క్లీనర్
- try/catch బ్లాక్స్ ఉపయోగించి లోడింగ్ సమస్యలను సావధానంగా నిర్వహించడం
మీరు చిత్రాలు లోడ్ చేసిన తర్వాత, వాటిని కేన్వాస్ పై డ్రా చేయడం చాలా సరళం:
```javascript
async function renderGameScreen() {
try {
// ఆట ఆస్తుల్ని లోడ్ చేయండి
const heroImg = await loadAsset('hero.png');
const monsterImg = await loadAsset('monster.png');
// కాన్వాస్ మరియు కాంటెక్ట్ పొందండి
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// చిత్రాలను నిర్దిష్ట స్థానాలకు ఆదుకోవాలి
ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
ctx.drawImage(monsterImg, 0, 0);
} catch (error) {
console.error('Failed to render game screen:', error);
}
}
```
**దీన్ని దశల వారీగా చూద్దాం:**
- మనం హీరో మరియు మానవుల చిత్రాలను బ్యాక్ గ్రౌండ్ లో awaitతో లోడ్ చేస్తాము
- మనం కేన్వాస్ ఎలిమెంట్‌ని తీసుకుని 2D కాంటెక్స్ట్ పొందుతాం
- అనుసంధాన సమన్వయ గణితంతో హీరో చిత్రాన్ని మధ్య భాగంలో ఉంచుతాము
- శత్రు చిత్రాన్ని ఎడమపై మూలం వద్ద పెట్టి శత్రుల చర నుండి ఆరంభిస్తాము
- లోడ్ లేదా రేండరింగ్ సమయంలో ఏ తప్పుపడితే అందును పట్టుకుంటాము
```mermaid
flowchart TD
A[ఆస్తులు లోడ్ చేయండి] --> B{అన్ని చిత్రాలు లోడ్ అయ్యాయా?}
B -->|కాదు| C[లోడింగ్ చూపించండి]
B -->|అవును| D[కేన్వాస్ కాంటెక్స్ట్ పొందండి]
C --> B
D --> E[స్క్రీన్ క్లియర్ చేయండి]
E --> F[పుడకితం చిత్రించండి]
F --> G[శతృ వ్యవస్థా చిత్రించండి]
G --> H[హీరో నౌక చిత్రించండి]
H --> I[విజువల్ ఎఫెక్ట్స్ వర్తింపజేయండి]
I --> J[ఫ్రేమ్ రేందర్ చేయండి]
subgraph "Rendering Pipeline"
K[ఆస్తి నిర్వహణ]
L[సన్నివేశ రचना]
M[చిత్రణ చర్యలు]
N[ఫ్రేమ్ అవుట్పుట్]
end
style A fill:#e1f5fe
style J fill:#e8f5e8
style I fill:#fff3e0
```
## ఇప్పుడు మీ గేమ్ నిర్మాణం ప్రారంభించడానికి సమయం వచ్చింది
ఇప్పుడు మనం అన్ని వాటిని కలిపి మీ స్పేస్ గేమ్ విజువల్ మౌలికాన్ని సృష్టిస్తాము. మీరు కేన్వాస్ ప్రాథమికాలు మరియు చిత్ర లోడింగ్ పద్ధతులను బాగా అర్థం చేసుకుని ఉన్నారు, కనుక ఈ ప్రాక్టికల్ సెక్షన్ పూర్తి గేమ్ స్క్రీన్‌ని సరైన స్ప్రైట్లతో ఎలా నిర్మించాలో చూపిస్తుంది.
### ఏమి నిర్మించాలి
మీరు ఒక వెబ్ పేజీని కేన్వాస్ ఎలిమెంట్‌తో నిర్మిస్తారు. ఇది బ్లాక్ బ్లాక్ స్క్రీన్ 1024*768 మర్పడాలి. మేము మీకు రెండు చిత్రాలు అందించాము:
- హీరో షిప్
![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b.te.png)
- 5*5 మానవులు
![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2.te.png)
### అభివృద్ధి ప్రారంభించడానికి సిఫార్సు చేసిన దశలు
`your-work` ఉప ఫోల్డర్‌లో మీరు కనుగొనగల స్టార్టర్ ఫైల్స్ ఉన్నాయి. మీ ప్రాజెక్ట్ నిర్మాణం ఇలా ఉండాలి:
```bash
your-work/
├── assets/
│ ├── enemyShip.png
│ └── player.png
├── index.html
├── app.js
└── package.json
```
**మీరు పని చేస్తున్నది:**
- గేమ్ స్ప్రైట్లను `assets/` ఫోల్డర్‌లో ఉంచి అందరికీ అనుకూలంగా నిర్వహించటం
- మీ ప్రధాన HTML ఫైల్ కేన్వాస్ ఎలిమెంట్ సెట్ చేసి అందుకోసం సిద్ధం చేయడం
- జావాస్క్రిప్ట్ ఫైల్, ఇక్కడ మీరు గేమ్ రేండరింగ్ మ్యాజిక్ రాస్తారు
- package.json, లోకల్ టెస్ట్ కోసం డెవలప్‌మెంట్ సర్వర్ సెట్ చేస్తుంది
డెవలప్‌మెంట్ ప్రారంభించడానికి ఈ ఫోల్డర్‌ను Visual Studio Codeలో తెరువు. మీరు Visual Studio Code, NPM, మరియు Node.js ఇన్‌స్టాల్ చేసిన లోకల్ డెవలప్‌మెంట్ వాతావరణం అవసరం. మీరు మీ కంప్యూటర్‌లో `npm` సెట్ చేయకపోతే, [ఇక్కడ అది ఎలా ఇన్‌స్టాల్ చేయాలో ఉంది](https://www.npmjs.com/get-npm).
`your-work` ఫోల్డర్‌లోకి వెళ్లి మీ డెవలప్‌మెంట్ సర్వర్‌ను ప్రారంభించండి:
```bash
cd your-work
npm start
```
**ఈ కమీండు ఇది చేస్తుంది:**
- మీ గేమ్‌ని పరీక్షించడానికి `http://localhost:5000` వద్ద లోకల్ సర్వర్ ప్రారంభిస్తుంది
- మీ ఫైల్స్ సరిగ్గా సర్వ్ చేస్తుంది, అంటే బ్రౌజర్ వాటిని సరిగా లోడ్ చేయగలదు
- ఫైళ్ళను మార్పులకు అందుబాటులో ఉంచి మృదువుగా అభివృద్ధి చేయవచ్చు
- వృత్తిపరమైన అభివృద్ధి వాతావరణం ఇస్తుంది
> 💡 **గమనిక**: మీ బ్రౌజర్ తొలుత ఖాళీ పేజీ చూపిస్తుంది – ఇది సాధారణం! మీరు కోడ్ జోడిస్తున్నప్పుడు, మీ మార్పులు చూడటానికి బ్రౌజర్‌ని రిఫ్రెష్ చేయండి. ఈ తిరిగి అభివృద్ధి విధానం NASA యొక్క అపోలో గైడెన్స్ కంప్యూటర్ అభివృద్ధి విధానంతో పోలిస్తే – ప్రతి భాగాన్ని అప్లికేషన్ లోకు చేర్చే ముందు పరీక్షించడం.
### కోడ్ జోడించండి
`your-work/app.js` లో ఈ క్రింద ఇవ్వబడిన పనులు పూర్తి చెయ్యడానికి అవసరమైన కోడ్ జోడించండి:
1. **కేన్వాస్‌ను బ్లాక్ బ్యాక్‌గ్రౌండ్‌తో డ్రా చేయండి**
> 💡 **ఇలా చేస్తారు**: `/app.js` లో TODO కనుగొని రెండు లైన్లు మాత్రమే జోడించండి. `ctx.fillStyle` ని గడ్డిగా (black) సెట్ చేసి, దాని తరువాత `ctx.fillRect()` ని (0,0) నుండి కేన్వాస్ పరిమాణాలతో ఉపయోగించండి. సులువు!
2. **గేమ్ టెక్స్చర్ ల ను లోడ్ చేయండి**
> 💡 **ఇలా చేస్తారు**: `await loadAsset()` ఉపయోగించి మీ ప్లేయర్ మరియు శత్రు చిత్రాలను లోడ్ చెయ్యండి. వాటిని వేరియబుల్స్ లో స్టోర్ చేయండి తదుపరి వాడటానికి. గుర్తుంచుకోండి – చిత్రాలను మీరు డ్రా చేసినపుడు మాత్రమే చూపబడతాయి!
3. **హీరో షిప్‌ను మధ్య-తొలి స్థానంలో డ్రా చేయండి**
> 💡 **ఇలా చేస్తారు**: `ctx.drawImage()` ను ఉపయోగించి హీరోని సెంటర్ చేయండి. x-నిర్దేశానికి `canvas.width / 2 - 45` ప్రయత్నించండి, y-నిర్దేశానికి `canvas.height - canvas.height / 4` ఉపయోగించి దీన్ని కింద భాగంలో ఉంచండి.
4. **5×5 శత్రు షిప్‌ల ఆకృతీకరణ డ్రా చేయండి**
> 💡 **ఇలా చేస్తారు**: `createEnemies` ఫంక్షన్ కనుగొని Nested loops ఉపయోగించండి. స్థల మరియు స్థానాల గణితం అవసరం, కానీ నేను ఖచ్చితంగా ఎలా చేయాలో చూపిస్తాను!
మొదట, సరైన శత్రు ఆకృతీకరణ స్థలానికి కాన్స్ట్‌లను స్థాపించండి:
```javascript
const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;
```
**ఈ కాన్స్ట్‌లు ఏమి చేస్తున్నాయో చూడండి:**
- ప్రతి వరుస మరియు కాలమ్ కు 5 శత్రువులు సెట్ చేస్తున్నాం (అందమైన 5×5 గ్రిడ్)
- శత్రువుల మధ్య ఎంత ఖాళీ ఉంచాలో నిర్వచించాం
- మొత్తం ఆకృతీకరణ వెడల్పును లెక్కించాం
- ఆకృతీకరణ మధ్యలో కనిపించడానికి ఎక్కడ మొదలు పెట్టాలి మరియు ఆపాలి అనేది నిర్ణయించాం
```mermaid
flowchart LR
A["కెన్వాస్ వెడల్పు: 1024px"] --> B["ఫార్మేషన్ వెడల్పు: 490px"]
B --> C["ప్రారంభ X: 267px"]
C --> D["ఎనిమి అంతరం: 98px"]
subgraph "5x5 ఎనిమి ఫార్మేషన్"
E["పంక్తి 1: Y=0"]
F["పంక్తి 2: Y=50"]
G["పంక్తి 3: Y=100"]
H["పంక్తి 4: Y=150"]
I["పంక్తి 5: Y=200"]
end
subgraph "కాలమ్ స్పేసింగ్"
J["కాలమ్ 1: X=267"]
K["కాలమ్ 2: X=365"]
L["కాలమ్ 3: X=463"]
M["కాలమ్ 4: X=561"]
N["కాలమ్ 5: X=659"]
end
style A fill:#e1f5fe
style B fill:#e8f5e8
style C fill:#fff3e0
```
తర్వాత, శత్రు ఆకృతీకరణకు Nested loops సృష్టించండి:
```javascript
for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
for (let y = 0; y < 50 * 5; y += 50) {
ctx.drawImage(enemyImg, x, y);
}
}
```
**ఈ Nested loop ఏమి చేస్తుంది:**
- బాహ్య లూప్ ఆకృతీకరణలో ఎడమ నుండి కుడికి జారుతుంది
- అంతర్గత లూప్ పై నుండి క్రింద వరుసలు సృష్టిస్తుంది
- లెక్కించిన ఖచ్చితమైన x,y స్థానాలలో ప్రతి శత్రువు స్ప్రైట్ ని డ్రా చేస్తుంది
- అన్ని సమానంగా ఖాళీలు ఉంచబడినవి, అందంగా మరియు సముడాయంగా కనిపిస్తాయి
### 🔄 **ఉపాధ్యాయ తనిఖీ**
**గేమ్ రెండరింగ్ నైపుణ్యం**: పూర్తిగా రేండరింగ్ వ్యవస్థ మీ అర్థం చెందిందా నిర్ధారించుకోండి:
- ✅ అసింక్రో చిత్రం లోడింగ్ గేమ్ స్టార్టప్ సమయంలో UI బ్లాక్ అవ్వకుండా ఎలా నిరోధిస్తుంది?
- ✅ హెచ్చరికలను హార్డ్‌కోడ్ చేయకుండా కాన్స్ట్‌లు ఉపయోగించి శత్రు ఆకృతీకరణ స్థలాలను ఎందుకు లెక్కిస్తాము?
- ✅ 2D రెండరింగ్ కాంటెక్స్ట్ డ్రాయింగ్ ఆపరేషన్లలో ఏమి పాత్ర వహిస్తుంది?
- ✅ Nested loops స్ప్రైట్ ఆకృతీకరణను ఎలా సిధ్దం చేస్తాయి?
**పనితీరు పరిగణనల**: మీ గేమ్ ఇప్పుడు చూపిస్తుంది:
- **ప్రభావవంతమైన ఆస్తి లోడింగ్**: Promise ఆధారిత చిత్ర నిర్వహణ
- **సంఘటిత రేండరింగ్**: నిర్మిత డ్రాయింగ్ ఆపరేషన్లు
- **గణాంక స్థాన నిర్థారణ**: లెక్కించిన స్ప్రైట్ స్థానాల అమ‌ల
- **తప్పిదాల నిర్వహణ**: శ్రద్ధగా వైఫల్యం నిర్వహణ
**విజువల్ ప్రోగ్రామింగ్ కాన్సెప్ట్స్**: మీరు నేర్చుకున్నారు:
- **సమన్వయ వ్యవస్థలు**: గణితాన్ని స్క్రీన్ స్థానాలకు అనువదించడం
- **స్ప్రైట్ నిర్వహణ**: ఆట గ్రాఫిక్స్‌ను లోడ్ చేసి చూపించడం
- **ఆకృతి ఆల్గోరిథమ్స్**: సక్రమమైన అమరికల కోసం గణితపు నమూనాలు
- **అసింక్ ఆపరేషన్స్**: సాఫీ వినియోగదారు అనుభవం కోసం ఆధునిక జావాస్క్రిప్ట్
## ఫలితం
సంపూర్ణ ఫలితం ఈ విధంగా ఉండాలి:
![Black screen with a hero and 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a.te.png)
## పరిష్కారం
ముందుగా మీరు ప్రయత్నించండి, అయితే మీరు చిక్కుకుంటే [పరిష్కారం](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) చూడండి
---
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
క్రింద ఇచ్చిన ఛాలెంజ్‌ను పూర్తి చేయడానికి ఏజెంట్ మోడ్‌ను ఉపయోగించండి:
**వివరణ:** మీరు నేర్చుకున్న Canvas API సాంకేతికతలను ఉపయోగించి, మీ స్పేస్ గేమ్ కేన్వాస్‌లో విజువల్ ఎఫెక్ట్స్ మరియు ఇంటరాక్టివ్ అంశాలను జోడించండి.
**ప్రాంప్ట్:** `enhanced-canvas.html` అనే కొత్త ఫైల్‌ను సృష్టించి, దానిలో బ్యాక్‌గ్రౌండ్‌లో యానిమేటెడ్ నక్షత్రాలు, హీరో షిప్ కోసం పల్సింగ్ హెల్త్ బార్, మరియు శత్రు షిప్‌లు మెల్లగా క్రిందికి కదలే విధంగా కనబరచండి. యాదృచ్ఛిక స్థానాలు మరియు అప్టిసిటీని ఉపయోగించి తారల మేకింగ్‌ను డ్రా చేసే జావాస్క్రిప్ట్ కోడ్‌ను, ఆరోగ్య స్థాయి ఆధారంగా రంగు మార్చుకునే హెల్త్ బార్‌ను (గ్రీన్ > యెల్లో > రెడ్), మరియు శత్రు షిప్‌లను వేర్వేరు వేగాలతో క్రిందికి కదిలే యానిమేషన్‌ను అమలు చేయండి.
[ఏజెంట్ మోడ్](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## 🚀 ఛాలెంజ్
మీరు 2D-కేంద్రీకృత Canvas API తో డ్రాయింగ్ గురించి నేర్చుకున్నారు; ఇప్పుడు [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)ను పరిశీలించి, ఒక 3D ఆబ్జెక్ట్‌ను డ్రా చేయడానికి ప్రయత్నించండి.
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/32)
## సమీక్ష & స్వీయ అధ్యయనం
Canvas API గురించి మరింత తెలుసుకోవడం కోసం [ఇదాన్ని చదవండి](https://developer.mozilla.org/docs/Web/API/Canvas_API).
### ⚡ **తరువాత 5 నిమిషాల్లో మీరు చేయగలిగేది**
- [ ] బ్రౌజర్ కన్సోల్ ఓపెన్ చేసి `document.createElement('canvas')` తో ఒక కేన్వాస్ ఎలిమెంట్ సృష్టించండి
- [ ] కేన్వాస్ కాంటెక్స్ట్ లో `fillRect()` ఉపయోగించి ఒక చతురస్రాన్ని డ్రా చేయండి
- [ ] `fillStyle` ప్రాపర్టీని ఉపయోగించి వేర్వేరు రంగులతో ప్రయోగించండి
- [ ] `arc()` పద్ధతి ఉపయోగించి ఒక సాదారణ వృత్తాన్ని డ్రా చేయండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పోస్ట్-లెస్సన్ క్విజ్ పూర్తి చేసి కేన్వాస్ మౌలికాలను అర్థం చేసుకోండి
- [ ] బహు ఆకారాలు మరియు రంగులు కలిగిన కేన్వాస్ డ్రాయింగ్ అప్లికేషన్ రూపొందించండి
- [ ] మీ ఆట కోసం చిత్రం లోడ్ చేసుకున్న మరియు స్ప్రైట్ రెండరింగ్ అమలు చేయండి
- [ ] వస్తువులు కేన్వాస్ మీద కదిలే ఒక సులభ యానిమేషన్ రూపొందించండి
- [ ] స్కేలింగ్, రొటేషన్, ట్రాన్స్‌లేషన్ వంటి కేన్వాస్ ట్రాన్స్‌ఫర్మేషన్‌లు ప్రాక్టీస్ చేయండి
### 📅 **మీ వార వ్యవధి కేన్వాస్ ప్రయాణం**
- [ ] మెరుగైన గ్రాఫిక్స్ మరియు స్ప్రైట్ యానిమేషన్‌లతో స్పేస్ గేమ్ పూర్తి చేయండి
- [ ] గ్రేడియెంట్లు, ప్యాటర్న్లు, కంపోజిటింగ్ వంటి అధునాతన కేన్వాస్ సాంకేతికతలు నేర్చుకోండి
- [ ] డేటా ప్రదర్శన కోసం ఇంటరాక్టివ్ విజువలైజేషన్లు రూపొందించండి
- [ ] సాఫీ ప్రదర్శన కోసం కేన్వాస్ ఆప్టిమైజేషన్ సాంకేతికతలను తెలుసుకోండి
- [ ] వివిధ పరికరాలతో డ్రాయింగ్/పెయింటింగ్ అప్లికేషన్ తయారుచేయండి
- [ ] క్రియేటివ్ కోడింగ్ ప్యాటర్న్లు మరియు జనరేటివ్ ఆర్ట్‌ను అన్వేషించండి
### 🌟 **మీ నెల వ్యవధి గ్రాఫిక్స్ నైపుణ్యం**
- [ ] Canvas 2D మరియు WebGL తో సంక్లిష్ట విజువల్ అప్లికేషన్లు తయారుచేయండి
- [ ] గ్రాఫిక్స్ ప్రోగ్రామింగ్ మౌలికాలు మరియు షేడర్ జ్ఞానం పొందండి
- [ ] ఓపెన్ సోర్స్ గ్రాఫిక్స్ లైబ్రరీలు మరియు విజువలైజేషన్ టూల్స్‌కు సహకరించండి
- [ ] గ్రాఫిక్స్-భారీ అప్లికేషన్‌ల కోసం పనితీరు ఆప్టిమైజేషన్ నైపుణ్యాలు పొందండి
- [ ] కేన్వాస్ ప్రోగ్రామింగ్ మరియు కంప్యూటర్ గ్రాఫిక్స్ గురించిన విద్యా వివరాలను సృష్టించండి
- [ ] ఇతరులకు విజువల్ అనుభవాలు సృష్టించడంలో సహాయపడే గ్రాఫిక్స్ ప్రోగ్రామింగ్ నిపుణులుగా మారండి
## 🎯 మీ కేన్వాస్ గ్రాఫిక్స్ నైపుణ్య టైంలైన్
```mermaid
timeline
title కాన్వాస్ ఏ పదునుపరచడం అభ్యాసం
section కాన్వాస్ ప్రాథమికాలు (15 నిమిషాలు)
ప్రాథమిక కార్యకలాపాలు: మూలకం సూచన
: 2D సాందర్భం 접근ం
: సకల సమన్వయ వ్యవస్థ
: సులభ ఆకారం గీయడం
section రేఖాచిత్ర సాంకేతికతలు (20 నిమిషాలు)
గ్రాఫిక్స్ ప్రాథమికాలు: చతురస్రాలు మరియు వృత్తాలు
: రంగులు మరియు శైలులు
: వచన ప్రదర్శన
: మార్గ కార్యకలాపాలు
section చిత్రం నిర్వహణ (25 నిమిషాలు)
ఆస్తి నిర్వహణ: చిత్రం వస్తువు సృష్టి
: అసంక్రామిక లోడింగ్ నమూనాలు
: తప్పిద నిర్వహణ
: పనితీరు ఆప్టిమైజేషన్
section ఆటా గ్రాఫిక్స్ (30 నిమిషాలు)
స్ప్రైట్ ప్రదర్శన: స్థాన నిర్దేశ అల్గోరిథమ్స్
: ఆకృతి లెక్కింపులు
: సన్నివేశ సంయోజన
: ఫ్రేమ్ ప్రదర్శన
section అధునాతన సాంకేతికతలు (40 నిమిషాలు)
దృశ్య ప్రభావాలు: రూపాంతరాలు
: అనిమేషన్లు
: పాఠాలు
: స్థితి నిర్వహణ
section పనితీరు (35 నిమిషాలు)
ఆప్టిమైజేషన్: సమర్థవంతమైన గీయడం
: మెమొరీ నిర్వహణ
: ఫ్రేమ్ రేట్ నియంత్రణ
: ఆస్తి క్యాషింగ్
section వృత్తి నైపుణ్యాలు (1 వారం)
ఉత్పత్తి గ్రాఫిక్స్: వెబ్‌జీఎల్ సమన్వయం
: కాన్వాస్ గ్రంథాలయాలు
: ఆటా ఇంజిన్లు
: క్రాస్-ప్లాట్‌ఫామ్ పరిగణనలు
section అధునాతన గ్రాఫిక్స్ (1 నెల)
ప్రత్యేక అనుప్రయోగాలు: డేటా విజువలైజేషన్
: ఇంటరాక్టివ్ ఆర్ట్
: రియల్-టైమ్ ప్రభావాలు
: 3D గ్రాఫిక్స్
```
### 🛠️ మీ కేన్వాస్ గ్రాఫిక్స్ సూత్రగ్రంథం సారాంశం
ఈ పాఠం పూర్తిచేసిన తర్వాత, ప్రస్తుతం మీ వద్ద:
- **కేన్వాస్ API నైపుణ్యం**: 2D గ్రాఫిక్స్ ప్రోగ్రామింగ్ పై సమగ్ర అర్థం
- **సమన్నయ గణితశాస్త్రం**: ఖచ్చితంగా స్థాననియామాలు మరియు ఆకృతి ఆల్గోరిథమ్స్
- **ఆస్తి నిర్వహణ**: ప్రొఫెషనల్ చిత్రం లోడింగ్ మరియు లోపాల నిర్వహణ
- **రెండరింగ్ పైప్లైన్**: సన్నివేశ నిర్మాణం పై క్రమబద్ధమైన దృష్టికోణం
- **అటువంటి ఆటలు**: స్ప్రైట్ స్థాననియోజన మరియు ఆకృతి లెక్కలు
- **అసింక్ ప్రోగ్రామింగ్**: సాఫీ పనితీరుకు ఆధునిక జావాస్క్రిప్ట్ ప్యాటర్న్లు
- **విజువల్ ప్రోగ్రామింగ్**: గణిత భావాలను స్క్రీన్ గ్రాఫిక్స్‌కి అనువదించడం
**వాస్తవ ప్రపంచంలో ఉపయోగాలు**: మీ కేన్వాస్ నైపుణ్యాలు నేరుగా వర్తిస్తాయి:
- **డేటా విజువలైజేషన్**: చార్ట్‌లు, గ్రాఫ్‌లు, ఇంటరాక్టివ్ డాష్‌బోర్డ్లు
- **గేమ్ డెవలప్మెంట్**: 2D ఆటలు, సిమ్యులేషన్లు, ఇంటరాక్టివ్ అనుభవాలు
- **డిజిటల్ ఆర్ట్**: క్రియేటివ్ కోడింగ్ మరియు జనరేటివ్ ఆర్ట్ ప్రాజెక్టులు
- **UI/UX డిజైన్**: అనుకూల గ్రాఫిక్స్ మరియు ఇంటరాక్టివ్ అంశాలు
- **విద్యా సాఫ్ట్వేర్**: విజువల్ లెర్నింగ్ సాధనాలు మరియు సిమ్యులేషన్లు
- **వెబ్ అప్లికేషన్లు**: డైనమిక్ గ్రాఫిక్స్ మరియు రియల్-టైం విజువలైజేషన్లు
**ప్రొఫెషనల్ నైపుణ్యాలు**: మీరు ఇప్పుడు చేయగలరు:
- **అన్ని ఎక్స్‌టర్నల్ లైబ్రరీలు లేకుండా** కస్టమ్ గ్రాఫిక్స్ పరిష్కారాలను నిర్మించండి
- **సాఫీ వినియోగదారు అనుభవాల కోసం** రెండరింగ్ పనితీరును ఆప్టిమైజ్ చేయండి
- **సంక్లిష్ట విజువల్ సమస్యలను** బ్రౌజర్ డెవలపర్ టూల్స్‌తో డీబగ్ చేయండి
- **గణిత సిద్ధాంతాల ఆధారంగా** స్కేలబుల్ గ్రాఫిక్స్ వ్యవస్థలను డిజైన్ చేయండి
- **ఆధునిక వెబ్ అప్లికేషన్ ఫ్రేమ్‌వర్క్స్‌తో** కేన్వాస్ గ్రాఫిక్స్‌ను ఇంటిగ్రేట్ చేయండి
**మీరు ఆచరించిన కేన్వాస్ API పద్ధతులు**:
- **ఎలిమెంట్ నిర్వహణ**: getElementById, getContext
- **డ్రాయింగ్ ఆపరేషన్స్**: fillRect, drawImage, fillStyle
- **ఆస్తి లోడింగ్**: ఇమేజ్ ఆబ్జెక్ట్స్, Promise ప్యాటర్న్లు
- **గణిత స్థాననిర్వాహణ**: కోఆర్డినేట్ లెక్కింపులు, ఆకృతి ఆల్గోరిథమ్స్
**తదుపరి స్థాయి**: యానిమేషన్, వినియోగదారు ఇంటరాక్షన్, కలిషన్ డిటెక్షన్ జోడించడానికి లేదా 3D గ్రాఫిక్స్ కోసం WebGLను అన్వేషించడానికి మీరు సిధ్ధంగా ఉన్నారు!
🌟 **అందుకున్న విజయము**: మీరు ప్రాధమిక Canvas API సాంకేతికతలతో సంపూర్ణ గేమ్ రెండరింగ్ సిస్టమ్‌ని రూపొందించారు!
## అసైన్మెంట్
[కెన్వాస్ API తో ఆడుకోండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**విస్తరణ**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తుంటే కూడా, ఆటోమేటెడ్ అనువాదాలలో తప్పులు లేదా లోపాలు ఉండవచ్చు. అసలు పత్రం స్వదేశీ భాషలో ఉన్నదాన్ని అధికారిక మూలంగా పరిగణించాలి. ముఖ్యం సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదాన్ని ఉపయోగించడం మంచిది. ఈ అనువాదం ఉపయోగంతో సృష్టవుతున్న ఏవైనా అపార్థాలు లేదా తప్పుదోవలకు మేము బాధ్యులు కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

83
translations/te/6-space-game/2-drawing-to-canvas/assignment.md
Unescape View File

@ -0,0 +1,83 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
"translation_date": "2026-01-08T13:47:07+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
"language_code": "te"
}
-->
# అసైన్‌మెంట్: కాన్వాస్ APIని అన్వేషించండి
## నేర్చుకునే ఉద్దేశాలు
ఈ అసైన్‌మెంట్‌ను పూర్తి చేయడం వలన, మీరు కాన్వాస్ API పాఠాలపై మీ అవగాహనను ప్రదర్శించి, జావాస్క్రిప్ట్ మరియు HTML5 కాన్వాస్ ఉపయోగించి దృశ్య పదార్థాలను సృజనాత్మక సమస్య పరిష్కరణతో నిర్మించగలుగుతారు.
## సూచనలు
మీకు ఆసక్తి ఉన్న కాన్వాస్ API యొక్క ఒక అంశాన్ని ఎంచుకుని దాని చుట్టూ ఆసక్తికరమైన దృశ్య ప్రాజెక్టును సృష్టించండి. ఈ అసైన్‌మెంట్ మీరు నేర్చుకున్న డ్రాయింగ్ సామర్థ్యాలతో ప్రయోగల్ని ప్రోత్సహిస్తుంది, మీదైనదని కొంతమేరతో ఏదైనా నిర్మించండి.
### మీరు స్ఫూర్తి పొందడానికి ప్రాజెక్ట్ ఆలోచనలు
**జ్యామితీయ నమూనాలు:**
- **సృష్టించండి** యాదృచ్చిక స్థానాల ద్వారా చమకబరిచే నక్షత్రాల గెలాక్సీని
- **డిజైన్ చేయండి** పునరావృత జ్యామితీయ ఆకృతులతో ఆసక్తికరమైన వంటకాన్ని
- **నిర్మించండి** తిప్పుకునే, రంగురంగుల నమూనాలతో కలైడోస్కోప్ ప్రభావాన్ని
**అంతర్రియ అంశాలు:**
- **ఉన్నత పరిమాణం** మౌస్ కదలికలకు స్పందించే డ్రాయింగ్ పరికరాన్ని అభివృద్ధి చేయండి
- **అమలు చేయండి** క్లిక్ చేసినప్పుడు రంగు మారే ఆకృతులను
- **రూపకల్పన చేయండి** మధ్యలో కదలే అంశాలతో సరళమైన యానిమేషన్ లూప్
**గేమ్-సంబంధిత గ్రాఫిక్స్:**
- **నిర్మించండి** స్పేస్ గేమ్ కోసం స్క్రోలింగ్ బ్యాక్‌గ్రౌండ్
- **తయారు చేయండి** పేలుళ్లు లేదా మాయా పాఠాలతో పార్టికల్ ప్రభావాలు
- **సృష్టించండి** బహు ఫ్రేమ్‌లతో యానిమేటెడ్ స్ప్రైట్‌లు
### అభివృద్ధి మార్గదర్శకాలు
**అన్వేషణ మరియు స్ఫూర్తి:**
- **సందర్శించండి** CodePen లో సృజనాత్మక కాన్వాస్ ఉదాహరణలను (స్ఫూర్తికి, కాపీ చెయ్యకండి)
- **అభ్యాసించండి** [Canvas API డాక్యుమెంటేషన్](https://developer.mozilla.org/docs/Web/API/Canvas_API)లో అదనపు పద్ధతులు
- **పరీక్షించండి** వివిధ డ్రాయింగ్ ఫంక్షన్లు, రంగులు, యానిమేషన్లను
**సాంకేతిక అవసరాలు:**
- **వాడండి** సరైన కాన్వాస్ సెటప్తో `getContext('2d')`
- **సమావేశపరచండి** మీ దృష్టిని వివరించే అర్థవంతమైన వ్యాఖ్యానాలను
- **పరీక్షించండి** మీ కోడ్ ను తప్పులేకుండా నడవడానికి
- **అమలు చేయండి** ఆధునిక జావాస్క్రిప్ట్ సింటాక్స్ (const/let, arrow functions)
**సృజనాత్మక వ్యక్తీకరణ:**
- **కేంద్రీకరించండి** ఒక కాన్వాస్ API ఫీచర్ పై కానీ దీని లోతుగా అన్వేషించండి
- **జోడించండి** మీ స్వంత సృజనాత్మక ముడి మెలసిన ప్రాజెక్టును వ్యక్తిగతంగా తీర్చిదిద్దండి
- **గమనించండి** మీ సృష్టి పెద్ద అప్లికేషన్ భాగంగా మారగలిగితే ఎలా ఉంటుంది
### సమర్పణ మార్గదర్శకాలు
మీ పూర్తి ప్రాజెక్టును ఒకే HTML ఫైల్‌గా ఎంబెడెడ్ CSS మరియు జావాస్క్రిప్ట్ తో లేదా వేర్వేరు ఫైల్‌లుగా ఫోల్డర్లో సమర్పించండి. మీ సృజనాత్మక ఎంపికలు మరియు మీరు అన్వేషించిన కాన్వాస్ API ఫీచర్లపై క్షుద్ర వ్యాఖ్యా లను చేర్చండి.
## రుబ్రిక్
| ప్రమాణాలు | ఉత్తమ | సరిపోతుంది | మెరుగుదల అవసరం |
|----------|-----------|----------|-------------------|
| **సాంకేతిక అమలు** | కాన్వాస్ APIను సృజనాత్మకంగా అనేక ఫీచర్లతో ఉపయోగించి, కోడ్ తప్పులేకుండా నడిచింది, ఆధునిక జావాస్క్రిప్ట్ సింటాక్స్ ఉపయోగించబడింది | కాన్వాస్ API సరిగా ఉపయోగించబడింది, కోడ్ లో చిన్న సమస్యలతో పని చేసింది, ప్రాథమిక అమలు | కాన్వాస్ API ప్రయత్నం అయినప్పటికీ కోడ్ లో తప్పులు లేదా అమలు కాలేదు |
| **సృజనాత్మకత మరియు రూపకల్పన** | అత్యుత్తమ ఒరిజినల్ భావనతో మెరిసే దృశ్య గమనాన్ని కలిగి ఉంది, ఎంచుకున్న కాన్వాస్ ఫీచర్ లో లోతైన అన్వేషణ చూపించినది | కొన్ని సృజనాత్మక అంశాలతో కాన్వాస్ ఫీచర్‌లకు మంచి వినియోగం, బలమైన దృశ్య ఫలితం | కనీసమాత్ర సృజనాత్మకత లేదా దృశ్య ఆకర్షణతో ప్రాథమిక అమలు |
| **కోడ్ నాణ్యత** | బాగా ఏర్పాటు చేసిన, వ్యాఖ్యానాలతో కూడిన కోడ్ ఉత్తమ సాధన పద్ధతులను పాటిస్తుంది, సమర్థవంతమైన అల్గోరిథమ్లు | స్వచ్ఛమైన కోడ్ కొంత వ్యాఖ్యలతో, ప్రాథమిక కోడింగ్ ప్రమాణాలు పాటిస్తుంది | కోడ్ లో ఏర్పాటు లేకపోవడం, తక్కువ వ్యాఖ్యలు, సమర్థవంతంకాకపోవడం |
## పునరాలోచన ప్రశ్నలు
మీ ప్రాజెక్టును పూర్తిచేసిన తర్వాత ఈ ప్రశ్నలను పరిగణించండి:
1. **మీరు ఎంచుకున్న కాన్వాస్ API ఫీచర్ ఏమిటి మరియు ఎందుకు?**
2. **మీ ప్రాజెక్టును నిర్మించేటప్పుడు మీరు ఎదురైన సవాళ్ళు ఏంటి?**
3. **ఈ ప్రాజెక్టును పెద్ద అప్లికేషన్ లేదా గేమ్ గా ఎలా పొడిగించగలరని మీరు భావిస్తున్నారు?**
4. **మీ తరువాత ఏ ఇతర కాన్వాస్ API ఫీచర్లను అన్వేషించాలని మీరు కోరుకుంటున్నారు?**
> 💡 **ప్రో టిప్**: సరళంగా ప్రారంభించి దశలవారీగా సంక్లిష్టత జోడించండి. బాగా అమలైన సరళమైన ప్రాజెక్టు సరిగా పనిచేయని అధిక ఆశయంతో కూడుకున్న ప్రాజెక్టు కంటే మెరుగైనది!
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**స్వల్ప బాధ్యత రద్దు**:
ఈ దస్తావేజు AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువాదం చేయబడింది. మనం నిరంతరం సరియైన అనువాదం కోసం ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా అసమర్థతలు ఉండవచ్చు అని దయచేసి గమనించండి. ఈ భాషలో ఉన్న అసలు దస్తావేజును అథారిటీగా పరిగణించాలి. ముఖ్యమైన సమాచారం కొరకు నిపుణుల చేత మనిషి అనువాద సేవలను సిఫార్సు చేస్తున్నాము. ఈ అనువాద ఉపయోగం కారణంగా కలిగిన ఏ పరిశోధనలు లేదా బాధ్యతలకు మేము బాధ్యులు కేము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

899
translations/te/6-space-game/3-moving-elements-around/README.md
Unescape View File

@ -0,0 +1,899 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8c55a2bd4bc0ebe4c88198fd563a9e09",
"translation_date": "2026-01-08T14:38:58+00:00",
"source_file": "6-space-game/3-moving-elements-around/README.md",
"language_code": "te"
}
-->
# స్పేస్ గేమ్ భాగం 3: మోషన్ జోడించడం
```mermaid
journey
title మీ గేమ్ యానిమేషన్ ప్రయాణం
section movement basics
Understand motion principles: 3: Student
Learn coordinate updates: 4: Student
Implement basic movement: 4: Student
section Player Controls
Handle keyboard events: 4: Student
Prevent default behaviors: 5: Student
Create responsive controls: 5: Student
section Game Systems
Build game loop: 5: Student
Manage object lifecycle: 5: Student
Implement pub/sub pattern: 5: Student
```
మీ ఇష్టమైన గేమ్ల గురించి ఆలోచించండి – వాటిని ఆకట్టుకునే వుచ్చేది కేవలం అందమైన గ్రాఫిక్స్ మాత్రమే కాదు, అవి మీ చర్యలకు ఎలా స్పందిస్తాయో అదే. ప్రస్తుతం, మీ స్పేస్ గేమ్ ఒక అందమైన పేం చటింగ్ లాగా ఉంది, కానీ దానిలో జీవం మిళించేందుకు మేము కదలికను జోడించబోతున్నాం.
నాసా ఇంజనీర్లు అపోలో మిషన్ల కోసం గైడెన్స్ కంప్యూటర్‌ను ప్రోగ్రామ్ చేసినప్పుడు, వారు ఒక సామాన్య సవాలు ఎదుర్కొన్నారు: స్పేస్ క్రాఫ్ట్ పైలట్ ఇన్‌పుట్‌కు ఎలా స్పందించాలి, అదే సమయంలో కోర్సు సరిచూడటం ఆటోమేటిక్‌గా ఎలా నిర్వహించాలి? మనం ఈ రోజు నేర్చుకునే సూత్రాలు ఆ అదే సూత్రాలను ప్రతిబింబిస్తాయి – ప్లేయర్-నియంత్రిత కదలికను ఆటోమేటిక్ వ్యవస్థ ప్రవర్తనలతో మిగిల్చడం.
ఈ పాఠంలో, మీరు స్పేస్‌షిప్‌లను స్క్రీన్ అంతటా సొగసుగా తేలిపోముచేయడం, ప్లేయర్ ఆదేశాలకు స్పందించడం మరియు సాఫీ కదలిక నమూనాలను సృష్టించడం నేర్పుతారు. మనం ఈ మొత్తాన్ని సహజంగా పరస్పరం నిర్మించే సుసంపన్న భావనలుగా విభజిస్తాము.
చివరికి, ప్లేయర్లు వారి హీరో నౌకను స్క్రీన్ చుట్టూ ఎగిపోగా, శత్రు నౌకలు పైకి సంచరిస్తాయి. అత్యంత ముఖ్యంగా, మీరు గేమ్ కదలిక వ్యవస్థలకు శక్తినిచ్చే మౌలిక సూత్రాలను అర్థం చేసుకుంటారు.
```mermaid
mindmap
root((గేమ్ యానిమేషన్))
Movement Types
Player Controlled [ప్లేయర్ నియంత్రిత]
Automatic Motion [స్వయంచాలక కదనము]
Physics Based [భౌతిక శాస్త్ర ఆధారితము]
Scripted Paths [లిపిబద్ధమైన మార్గాలు]
Event Handling
Keyboard Input [కీబోర్డ్ ఇన్‌పుట్]
Mouse Events [మౌస్ ఈవెంట్లు]
Touch Controls [స్పర్శ నియంత్రణలు]
Default Prevention [డిఫాల్ట్ నిరోధనం]
Game Loop
Update Logic [తాజాపరిచిన తర్కం]
Render Frame [రెండర్ ఫ్రేమ్]
Clear Canvas [కేన్వాస్ క్లియర్ చేయండి]
Frame Rate Control [ఫ్రేమ్ రేట్ నియంత్రణ]
Object Management
Position Updates [స్ధానం నవీకరణలు]
Collision Detection [ఘర్షణ గుర్తింపు]
Lifecycle Management [జీవిత చక్ర నిర్వహణ]
State Tracking [స్థితి ట్రాకింగ్]
Communication
Pub/Sub Pattern [పబ్/సబ్ నమూనా]
Event Emitters [ఈవెంట్ ఎమిటర్లు]
Message Passing [సందేశ ప్రసారం]
Loose Coupling [సడలించిన జత]
```
## ప్రీ-లెక్చర్ క్విజ్
[ప్రీ-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/33)
## గేమ్ మోషన్ అవగాహన
విషయాలు కదలడం ప్రారంభించినప్పుడు గేమ్స్ జీవింపజేస్తాయి, మరియు ప్రాథమికంగా ఇది రెండు విధాలుగా జరుగుతుంది:
- **ప్లేయర్-నియంత్రిత కదలిక**: మీరు ఏదైనా కీ నొక్కినప్పుడు లేదా మౌస్ క్లిక్ చేసినప్పుడు, ఏదో కదలుతుంది. ఇది మీరు మరియు మీ గేమ్ ప్రపంచం మధ్య నేరుగా అనుసంధానం.
- **ఆటోమేటిక్ కదలిక**: గేమ్ స్వయంగా వస్తువులను కదిలించాలని నిర్ణయించుకునేటప్పుడు – ఉదాహరణకు, మీరు ఏదైనా చేస్తున్నా లేకపోయినా స్క్రీన్ పటాలించే శత్రు నౌకలు.
కంప్యూటర్ స్క్రీన్‌పై ఆబ్జెక్టులను కదులించడం మీరు అనుకునే తక్కువ కష్టమైన పని. గణితం తరగతిలో నేర్చుకున్న x మరియు y కోఆర్డినేట్ల గుర్తుందా? అదే మనం ఇక్కడ వాడుకుంటున్నాం. 1610లో గేలిలియో జ్యుపిటర్ చందమామలను ట్రాక్ చేస్తున్నప్పుడు, అతను మౌషన్ నమూనాలను అర్థం చేసుకోవడానికి సమయానుసారంగా స్థానాలను గ్రాఫ్ చేస్తున్నాడు.
స్క్రీన్‌పై వస్తువులను కదిలించడం ఒక ఫ్లిప్‌బుక్ యానిమేషన్ సృష్టింపు లాంటిది – మీరు ఈ మూడు సులభమైన దశలను అనుసరించాలి:
```mermaid
flowchart LR
A["ఫ్రేమ్ N"] --> B["స్థానాలు నవీకరించండి"]
B --> C["క్యాన్వాస్ క్లియర్ చేయండి"]
C --> D["ఆబ్జెక్టులు డ్రా చేయండి"]
D --> E["ఫ్రేమ్ N+1"]
E --> F{కొనే సాగిస్తే?}
F -->|అవును| B
F -->|కాదు| G["గేమ్ ముగిసింది"]
subgraph "అనిమేషన్ చక్రం"
H["1. కొత్త స్థానాలు లెక్కించండి"]
I["2. ముందరి ఫ్రేమ్ తొలగించండి"]
J["3. కొత్త ఫ్రేమ్ డ్రా చేయండి"]
end
style B fill:#e1f5fe
style C fill:#ffebee
style D fill:#e8f5e8
```
1. **స్థానాన్ని నవీకరించండి** – మీ వస్తువు ఎక్కడ ఉండాలో మార్చండి (ఉదాహరణకు, 5 పిక్సెల్స్ కుడివైపు కదిలించండి)
2. **పాత ఫ్రేమ్‌ను తీసివేయండి** – స్క్రీన్‌ను క్లియర్ చేసి ప్రతిబింబాలు కనిపించకుండా చేయండి
3. **కొత్త ఫ్రేమ్‌ను చిత్రించండి** – మీ వస్తువును కొత్త స్థానంలో పెట్టండి
ఈ ప్రక్రియ వేగంగా చేస్తే, బూమ్! సాఫీగా కదలిక కనిపిస్తుంది, ఇది ప్లేయర్లకు సహజంగా అనిపిస్తుంది.
కోడ్‌లో ఇది ఎలా ఉండొచ్చో చూడండి:
```javascript
// హీరో యొక్క స్థానం సెట్ చేయండి
hero.x += 5;
// హీరోని కలిగిన చతురస్రాన్ని శుభ్రపరచండి
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ఆట నేపథ్యాన్ని మరియు హీరోను తిరిగి చిత్రించండి
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.drawImage(heroImg, hero.x, hero.y);
```
**ఈ కోడ్ ఏమి చేస్తుందో:**
- హీరో యొక్క x-కోఆర్డినేట్‌ను 5 పిక్సెల్స్ కుడి వైపుకు మార్చడంతో నవీకరిస్తుంది
- పూర్వపు ఫ్రేమ్ తొలగించేందుకు మొత్తం కాన్వాస్ ప్రాంతాన్ని క్లియర్ చేస్తుంది
- కాన్వాస్‌ను నలుపు నేపథ్య రంగుతో నింపుతుంది
- హీరో చిత్రాన్ని కొత్త స్థానంలో మళ్ళీ చిత్రిస్తుంది
✅ మీరు ఎందుకు మీ హీరోను ఒక్కసారిగా అనేక ఫ్రేముల్ల మళ్ళీ గీయడం పనితన వ్యయాలకు కారణమవుతుందో ఊహించగలరా? ఈ నమూనాకు ఉన్న [వేరే మార్గాలు](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) గురించి చదవండి.
## కీబోర్డు ఈవెంట్‌లను నిర్వహించటం
ఇక్కడ ప్లేయర్ ఇన్‌పుట్‌ను గేమ్ చర్యతో అనుసంధానం చేస్తాము. ఎవరో స్పేస్‌బార్ నొక్కి లేజర్‌ను ఫైర్ చేస్తే లేదా ఆరు వొంగళి కీని నొక్కి అస్ట్రాయిడ్‌ను దిగజార్చడం ప్రయత్నిస్తే, మీ గేమ్ ఆ ఇన్‌పుట్‌ను గుర్తించి స్పందించాలి.
కీబోర్డు ఈవెంట్లు విండో స్థాయిలో జరుగుతాయి, అంటే మీ బ్రౌజర్ విండో మొత్తం ఆ కీలను వినిపిస్తుంది. మౌస్ క్లిక్‌లు, వచ్చే దారిలో ప్రత్యేక అంశాలకు అనుసంధానించవచ్చు (ఉదాహరణకు బటన్ క్లిక్). మన స్పేస్ గేమ్ కోసం, ప్లేయర్లు ఆర్కేడ్ ఫీల్ పొందడానికి కీబోర్డు నియంత్రణలపై ఫోకస్ చేస్తాము.
ఇది 1800ల మోర్సు కోడ్ ఇన్‌పుట్‌ను అర్థవంతమైన సందేశాలుగా అనువదించే టెలిగా్రాఫ్ ఆపరేటర్ల దృష్టాంతం ని గుర్తు చేస్తుంది – మనం కూడా కీప్రెస్సులను గేమ్ ఆదేశాలతో అనువదిస్తున్నాము.
ఒక ఈవెంట్‌ను నిర్వహించడానికి, మీరు విండో యొక్క `addEventListener()` మెథడ్‌ను ఉపయోగించి రెండు ఇన్పుట్ పరామితులను అందించాలి. మొదటి పరామితి ఈవెంట్ పేరు, ఉదాహరణకు `keyup`. రెండవది ఈ ఈవెంట్ జరిగినపై పిలవబడే ఫంక్షన్.
ఇదిగో ఉదాహరణ:
```javascript
window.addEventListener('keyup', (evt) => {
// evt.key = కీ యొక్క స్ట్రింగ్ ప్రాతినిధ్యం
if (evt.key === 'ArrowUp') {
// ఏదైనా చేయండి
}
});
```
**ఇక్కడ యేమి జరుగుతుందని విడదీస్తే:**
- విండోపై కీబోర్డు ఈవెంట్లను వినిపిస్తుంది
- కీ నొక్కబడినది ఏది అనేదನ್ನು తెలియజేసే ఈవెంట్ ఆబ్జెక్ట్‌ను పొందుతుంది
- నొక్కిన కీ అప్ అర్రో కీకి సరిపోలుతుందోచూస్తుంది
- షరతు నెరవేర్చుద్దామని కోడును నడుపుతుంది
కీ ఈవెంట్లకు ఈవెంట్‌లో మీరు ఉపయోగించగల రెండు గుణకోలోత్లు ఉన్నాయి:
- `key` - నొక్కిన కీ యొక్క స్ట్రింగ్ రూపం, ఉదాహరణకు `'ArrowUp'`
- `keyCode` - నొక్కిన కీ యొక్క సంఖ్య రూపం, ఉదాహరణకు `37`, ఇది `ArrowLeft` కు సరిపోతుంది
✅ కీ ఈవెంట్ పరివర్తన గేమ్ అభివృద్ధి బయట కూడా ఉపయోగకరంగా ఉంటుంది. ఈ సాంకేతికాన్ని మరెంతో చోట్ల ఉపయోగించవచ్చని మీరు ఏవి ఊహించగలరా?
```mermaid
sequenceDiagram
participant User
participant Browser
participant EventSystem
participant GameLogic
participant Hero
User->>Browser: ArrowUp కీ నొక్కారు
Browser->>EventSystem: keydown ఈవెంట్
EventSystem->>EventSystem: preventDefault()
EventSystem->>GameLogic: emit('KEY_EVENT_UP')
GameLogic->>Hero: hero.y -= 5
Hero->>Hero: స్థానాన్ని నవీకరించు
Note over Browser,GameLogic: ఈవెంట్ ఫ్లో బ్రౌజర్ అరుదులను నిరోధిస్తుంది
Note over GameLogic,Hero: పబ్/సబ్ నమూనా శుభ్రమైన కమ్యూనికేషన్‌ను సాకారం చేస్తుంది
```
### ప్రత్యేక కీలు: ఒక హెడ్ అప్!
కొన్ని కీలు బ్రౌజర్‌లో భవంతుల కార్యక్రమాలతో వచ్చి మీ గేమ్‌లో జోక్యం కాకుండా చేస్తాయి. అర్రో కీలు పేజీని స్క్రోల్ చేస్తాయి మరియు స్పేస్‌బార్ కిందకు దూకుతుంది – మీరు మీ స్పేస్‌షిప్‌ను నడపాలనుకున్నప్పుడు ఈ క్రియలని మీరు కోరదూ.
మనం ఈ డీఫాల్ట్ ప్రవర్తనలను నిరోధించి గేమ్ ఇన్‌పుట్‌ను నిర్వహించడం మానవము. ప్రారంభ కంప్యూటర్ ప్రోగ్రామర్లు సిస్టమ్ విభజనలను అడ్డుకోవాలి ఇరకాట ప్రవర్తనల కోసం – మనం బ్రౌజర్ స్థాయిలో దాన్ని చేస్తున్నట్లే. ఇక్కడ పద్ధతి:
```javascript
const onKeyDown = function (e) {
console.log(e.keyCode);
switch (e.keyCode) {
case 37:
case 39:
case 38:
case 40: // దిశాసూచికి కీలు
case 32:
e.preventDefault();
break; // స్పేస్
default:
break; // ఇతర కీలను ఆవరించకండి
}
};
window.addEventListener('keydown', onKeyDown);
```
**ఈ నిరోధింపు కోడ్ అర్థం చేసుకోవడం:**
- వ్యతిరేక బ్రౌజర్ ప్రవర్తనలకు కారణమయ్యే కీ కోడ్లను చూస్తుంది
- అర్రో కీలు మరియు స్పేస్‌బార్ కోసం డిఫాల్ట్ బ్రౌజర్ చర్యను అడ్డుకుంటుంది
- ఇతర కీలు సాధారణంగా పని చేయడానికిప్రవాహం ఇస్తుంది
- బ్రౌజర్ నిర్మిత ప్రవర్తనను అడ్డుకోడానికి `e.preventDefault()` ను ఉపయోగిస్తుంది
### 🔄 **హోదా తనిఖీ**
**ఈవెంట్ నిర్వహణ అవగాహన**: ఆటోమేటిక్ కదలికకు వెళ్లేముందు, మీరు ఇది చేయగలగాలి:
- ✅ `keydown` మరియు `keyup` మధ్య తేడా వివరించగలగాలి
- ✅ డిఫాల్ట్ బ్రౌజర్ ప్రవర్తనలను ఎందుకు అడ్డుకుంటామో అర్థం చేసుకోవాలి
- ✅ ఈవెంట్ లిసనర్లు ఎట్లా యూజర్ ఇన్‌పుట్‌ను గేమ్ లాజిక్‌కు అనుసంధానం చేస్తాయో వర్ణించగలగాలి
- ✅ గేమ్ నియంత్రణలకు వ్యతిరేకంగా పని చేసే కీలు ఏవో గుర్తించగలగాలి
**త్వరిత స్వయములు పరీక్ష**: మీరు అర్రో కీలకు డిఫాల్ట్ ప్రవర్తనను అడ్డుకోకపోతే ఏమవుతుంది?
*సమాధానం: బ్రౌజర్ పేజీని స్క్రోల్ చేస్తుంది, గేమ్ కదలికకు జోక్యం అవుతది*
**ఈవెంట్ సిస్టమ్ నిర్మాణం**: మీరు ఇప్పుడు అర్థం చేసుకున్నారు:
- **విండో స్థాయి శ్రవణ**: బ్రౌజర్ స్థాయిలో ఈవెంట్‌ను పట్టుకొనడం
- **ఈవెంట్ ఆబ్జెక్ట్ గుణకాలు**: స్ట్రింగ్ `key` vs సంఖ్య `keyCode`
- **డిఫాల్ట్ నిరోధనం**: వ్యతిరేక బ్రౌజర్ ప్రవర్తనలను ఆపడం
- **శరతుల లాజిక్**: ప్రత్యేక కీ కాంబినేషన్‌లకు స్పందించడం
## ఆట సృష్టించిన కదలిక
ఇప్పుడు ప్లేయర్ ఇన్‌పుట్ లేకుండా కదిలే వస్తువుల గురించి మాట్లాడుకుందాం. శత్రు నౌకలు స్క్రీన్ పై సుక్తిగా సంచరించడం, గోళ్లు నేరుగా ఎగురవేయడం, లేదా మేఘాలు వెనకటి తేలుమనేలా ఊదుట – ఈ స్వయం సంచాలితం గేమ్ ప్రపంచాన్ని జీవాత్మకంగా చేస్తుంది, ఎవరు నియంత్రణలను తాకకపోయినా.
మేము జావాస్క్రిప్ట్ బిల్ట్-ఇన్ టైమర్‌ను ఉపయోగించి స్థితిని సుగమంగా నవీకరిస్తాం. ఇది ప్రతిధ్వనించే సమయానుసరణం తో పనిచేసే పింధులమ్ గడియారాల వలె ఉంటుంది. ఇలా సులభంగా చేయవచ్చు:
```javascript
const id = setInterval(() => {
// శత్రువును y అక్షం పై కదిలించు
enemy.y += 10;
}, 100);
```
**ఈ కదలిక కోడ్ ఏమి చేస్తుంది:**
- ప్రతి 100 మిల్లీసెంకండ్లుకు ఒక టైమర్ సృష్టిస్తుంది
- శత్రువు y-కోఆర్డినేట్‌ను 10 పిక్సెల్స్ పెంపొందిస్తుంది
- అవసరమైతే వీలుగా ఆ టైమర్‌ను ఆపుకోగలిగేలా ఇంటర్వెల్ IDని ఉంచుతుంది
- శత్రువును స్క్రీన్ దిగువకి ఆటోమేటిక్‌గా కదిలిస్తుంది
## గేమ్ లూప్
ఇది ఏదో ఒకటి అన్ని విషయాలను కలిపే ధోరణి – గేమ్ లూప్. మీ గేమ్ సినిమా అయితే, గేమ్ లూప్ ఫిల్మ్ ప్రొజెక్టర్ లాంటి ఒకటి అవుతుంది, ఇది ఫ్రేమ్‌లను ఇలా వేగంగా చూపించి అన్ని వస్తువులు సాఫీగా కదిలుతున్నట్లు కనిపించేలా చేస్తుంది.
ప్రతి గేమ్‌లో పాఠం వెనుక ఈ లూప్ ఒకటి తప్పక నడుస్తుంది. ఇది ఒక ఫంక్షన్, అది అన్ని గేమ్ వస్తువులను నవీకరించి స్క్రీన్‌ని మళ్లీ చిత్రిస్తుంది, ఈ ప్రక్రియను నిరంతరం పునరావృతం చేస్తుంది. ఇది మీ హీరోను, అన్ని శత్రు నౌకలను, ఎలాంటి లేజర్లను కూడా ధ్యానంలో ఉంచుతుంది – మొత్తం గేమ్ స్థితి.
ఈ ధోరణి ప్రారంభ కాలం సినेमాటోగ్రాఫర్-వాల్‌ట డిస్నీ లాగానే క్యారెక్టర్‌లను ఒక్క ఫ్రేమ్ తర్వాత ఇంకొక ఫ్రేమ్ మళ్లీ చిత్రించడం వలె, కదలిక మాయాజాలాన్ని సృష్టించడంలో ఉండేది. మనం అదే చేస్తున్నాం, కానీ పెన్సిల్స్ స్థానంలో కోడ్‌తో.
ఇదిగో గేమ్ లూప్ సాధారణంగా ఎలా ఉంటుంది అనే దానిని కోడ్‌లో చూద్దాం:
```mermaid
flowchart TD
A["గేమ్ లూప్ ప్రారంభించండి"] --> B["క్యాన్వాస్ క్లియర్ చేయండి"]
B --> C[" బ్యాక్ గ్రౌండ్ తాయారు చేయండి"]
C --> D["గేమ్ వస్తువులు నవీకరించండి"]
D --> E["హీరోను ఆకారం చేయండి"]
E --> F["శత్రువులను ఆకారం చేయండి"]
F --> G["UI మూలకాలను చిత్రించండి"]
G --> H["తరువాత ఫ్రేమ్ కోసం వేచి ఉండండి"]
H --> I{గేమ్ నడుస్తుందా?}
I -->|అవును| B
I -->|కాదు| J["గేమ్ ముగించండి"]
subgraph "ఫ్రేమ్ రేట్ నియంత్రణ"
K["60 FPS = 16.67ms"]
L["30 FPS = 33.33ms"]
M["10 FPS = 100ms"]
end
style B fill:#ffebee
style D fill:#e1f5fe
style E fill:#e8f5e8
style F fill:#e8f5e8
```
```javascript
const gameLoopId = setInterval(() => {
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawHero();
drawEnemies();
drawStaticObjects();
}
gameLoop();
}, 200);
```
**గేమ్ లూప్ నిర్మాణం అర్థం చేసుకోవడం:**
- పూర్వ ఫ్రేమ్ తొలగించేందుకు మొత్తం కాన్వాస్‌ను క్లియర్ చేయడం
- నేపథ్యాన్ని ఘన రంగుతో నింపడం
- అన్ని గేమ్ వస్తువులను ప్రస్తుత స్థానాల్లో చిత్రించడం
- ప్రతి 200 మిల్లీసెకన్లకు ఈ ప్రక్రియను పునరావృతం చేయడం సాఫీ యానిమేషన్ కోసం
- ఇంటర్వెల్ సమయాన్ని నియంత్రించడం ద్వారా ఫ్రేమ్ రేట్ నిర్వహించడం
## స్పేస్ గేమ్ కొనసాగింపు
ఇప్పుడు మీరు మునుపటి పాఠంలో నిర్మించిన స్థిర దృశ్యంలో కదలిక జోడిస్తాము. దానిని స్క్రీన్‌షాట్ నుండి పరస్పర స్పందన అనుభవంగా మారుస్తాము. మనం దీన్ని దశల వారీగా చేయబోతున్నాము, ప్రతి భాగం ముందున్నదంపై ఆధారపడి ఉంటుంది.
మునుపటి పాఠం (లేదా మీరు కొత్తగా ప్రారంభించాలంటే [Part II- starter](../../../../6-space-game/3-moving-elements-around/your-work) ఫొల్డర్‌లోని కోడ్ తో) ఎక్కడ బ్రతికి ఉన్నామో ఆ కోడ్‌ ను ఎత్తుకోండి.
**ఇదే మనం ఈ రోజు నిర్మించబోతున్నది:**
- **హీరో నియంత్రణలు**: అర్రో కీలు మీ స్పేస్‌షిప్‌ను స్క్రీన్ చుట్టూ నడిపిస్తాయి
- **శత్రు కదలిక**: ఆ మెరుగైన నౌకలు వారి దాడిని ప్రారంభిస్తాయి
మనం ఈ లక్షణాలను అమలు చేయడం ప్రారంభిద్దాం.
## సిఫార్సు చేయబడిన దశలు
`your-work` ఉప ఫొల్డర్‌లో మీకు సృష్టించబడిన ఫైళ్లు ఉండాలి. అవి ఇలా:
```bash
-| assets
-| enemyShip.png
-| player.png
-| index.html
-| app.js
-| package.json
```
మీరు `your-work` ఫోల్డర్‌లో ప్రాజెక్ట్ ప్రారంభించడానికి టైప్ చేయండి:
```bash
cd your-work
npm start
```
**ఈ ఆజ్ఞ ఏమి చేస్తుంది:**
- మీ ప్రాజెక్ట్ డైరెక్టరీకి నావిగేట్ అవుతుంది
- అడ్రెసులో HTTP సర్వర్ ప్రారంభిస్తుంది `http://localhost:5000`
- మీ గేమ్ ఫైళ్ళను బ్రౌజర్లో పరీక్షించేందుకు సర్వ్ చేస్తుంది
పైన ఉన్నది అడ్రెసులో HTTP సర్వర్‌ను ప్రారంభిస్తుంది `http://localhost:5000`. ఇప్పుడు బ్రౌజర్‌ని తెరవండి మరియు ఆ అడ్రెసును ఇచ్చినప్పుడు, హీరో మరియు శత్రువులు కనిపిస్తాయి; ఇంకా ఏదీ కదలడం లేదు!
### కోడ్ జోడించండి
1. `hero`, `enemy` మరియు `game object` కు ప్రత్యేక వస్తువులను జోడించండి, వీటికి `x` మరియు `y` గుణాలు ఉండాలి. ([వైరసత్వం లేదా సమ్మేళనం](../README.md) వంతరిపై గుర్తుంచుకోండి).
*సూచన*: `game object` అనేది `x` మరియు `y` కలిగి, కాన్వాస్‌కు తానే చిత్రించగల సామర్థ్యమున్న దానయ్యేది కావాలి.
> **సలహా**: క్రింది విధంగా కన్స్ట్రక్టర్‌తో కొత్త `GameObject` తరగతిని మొదలుపెట్టి, దాన్ని కాన్వాస్‌పై చిత్రించండి:
```javascript
class GameObject {
constructor(x, y) {
this.x = x;
this.y = y;
this.dead = false;
this.type = "";
this.width = 0;
this.height = 0;
this.img = undefined;
}
draw(ctx) {
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
```
**ఈ ప్రాథమిక తరగతిని అర్థం చేసుకోండి:**
- గేమ్ అన్ని వస్తువులకు కామనైన గుణాలను నిర్వచిస్తుంది (స్థానం, పరిమాణం, చిత్రము)
- వస్తువు తొలగింపు అవసరమైతే ట్రాక్ చేసే `dead` ఫ్లాగ్ కలిగి ఉంది
- వస్తువును కాన్వాస్‌ మీద చిత్రించేందుకు `draw()` పద్ధతిని కలిగి ఉంది
- అన్ని గుణాలకు డిఫాల్ట్ విలువలు సెట్ చేసి, పిల్ల తరగతులు వాటిని మినహాయించగలవు
```mermaid
classDiagram
class GameObject {
+x: number
+y: number
+dead: boolean
+type: string
+width: number
+height: number
+img: Image
+draw(ctx)
}
class Hero {
+speed: number
+type: "హీరో"
+width: 98
+height: 75
}
class Enemy {
+type: "శత్రువు"
+width: 98
+height: 50
+setInterval()
}
GameObject <|-- Hero
GameObject <|-- Enemy
class EventEmitter {
+listeners: object
+on(message, listener)
+emit(message, payload)
}
```
ఇప్పుడు ఈ `GameObject` ను విస్తరించి `Hero` మరియు `Enemy` సృష్టించండి:
```javascript
class Hero extends GameObject {
constructor(x, y) {
super(x, y);
this.width = 98;
this.height = 75;
this.type = "Hero";
this.speed = 5;
}
}
```
```javascript
class Enemy extends GameObject {
constructor(x, y) {
super(x, y);
this.width = 98;
this.height = 50;
this.type = "Enemy";
const id = setInterval(() => {
if (this.y < canvas.height - this.height) {
this.y += 5;
} else {
console.log('Stopped at', this.y);
clearInterval(id);
}
}, 300);
}
}
```
**ఈ తరగతులలో ముఖ్యమైన భావనలు:**
- `extends` కీవర్డ్‌తో `GameObject` నుంచి వారసత్వం పొందడం
- `super(x, y)` అనేక తల్లితరగతి కన్స్ట్రక్టర్‌ను పిలవడం
- ప్రతి వస్తువు రకానికి ప్రత్యేక పరిమాణాలు మరియు లక్షణాలు సెట్ చేయడం
- శత్రువుల ఆటోమేటిక్ కదలిక కోసం `setInterval()` ను అమలు చేయడం
2. కీ-ఈవెంట్ హ్యాండ్లర్లను జోడించి కీ నావిగేషన్ నిర్వహించండి (హీరోను పైకి/కిందకి/ఎడమ/కుడి కదిలించండి)
*గుర్తుంచుకోండి* ఇది కార్డేషియాన్ సిస్టం, టాప్-లెఫ్ట్ 0,0. అలాగే డిఫాల్ట్ ప్రవర్తనను ఆపడానికి కోడ్ జోడించండి.
> **సలహా**: మీ `onKeyDown` ఫంక్షన్ సృష్టించి, విండోకు అనుసంధానం చేయండి:
```javascript
const onKeyDown = function (e) {
console.log(e.keyCode);
// డీఫాల్ట్ ప్రవర్తనను ఆపడానికి పై పాఠం నుండి కోడ్ జోడించండి
switch (e.keyCode) {
case 37:
case 39:
case 38:
case 40: // ఎరో కీలు
case 32:
e.preventDefault();
break; // స్పేస్
default:
break; // ఇతర కీలను అడ్డుకోకండి
}
};
window.addEventListener("keydown", onKeyDown);
```
**ఈ ఈవెంట్ హ్యాండ్లర్ ఏమి చేస్తుంది:**
- మొత్తం విండోపై కీ డౌన్ ఈవెంట్లను దృష్టిలో ఉంచుతుంది
- నొక్కిన కీ కోడ్‌ని డీబగ్ చేయడానికి లాగ్ చేస్తుంది
- అర్రో కీలు మరియు స్పేస్‌బార్ కోసం డిఫాల్ట్ బ్రౌజర్ ప్రవర్తనను అడ్డుకుంటుంది
- ఇతర కీలు సాధారణంగానే పనిచేయించగలదు
ఈ సమయంలో బ్రౌజర్ కన్సోల్‌ను పరిశీలించి, కీ ప్రెస్లు ఎలా లాగ్ అవుతున్నాయో చూడండి.
3. [పబ్ సబ్ నమూనా](../README.md) ను అమలు చేయండి, ఇది మిగిలిన భాగాలను అనుసరించే విధంగా మీ కోడ్‌ను శుభ్రంగా ఉంచుతుంది.
పబ్లిష్-సబ్స్క్రైబ్ నమూనా ఈవెంట్ గుర్తింపును ఈవెంట్ నిర్వహణ నుండి వేరుచేస్తూ మీ కోడ్‌ను వ్యవస్థీకృతం చేయడంలో సహాయపడుతుంది. దీని వలన మీ కోడ్ మరింత మాడ్యూలర్ గా, నిర్వహించడానికి సులభంగా ఉంటుంది.
ఈ చివరి భాగాన్ని చేయడానికి మీరు చేయగలరు:
1. విండోపై ఈవెంట్ లిసనర్ జోడించండి:
```javascript
window.addEventListener("keyup", (evt) => {
if (evt.key === "ArrowUp") {
eventEmitter.emit(Messages.KEY_EVENT_UP);
} else if (evt.key === "ArrowDown") {
eventEmitter.emit(Messages.KEY_EVENT_DOWN);
} else if (evt.key === "ArrowLeft") {
eventEmitter.emit(Messages.KEY_EVENT_LEFT);
} else if (evt.key === "ArrowRight") {
eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
}
});
```
**ఈ ఈవెంట్ సిస్టమ్ ఏమి చేస్తుంది:**
- కీబోర్డు ఇన్‌పుట్ను కనుగొని, దాన్ని కస్టమ్ గేమ్ ఈవెంట్లుగా మార్చుతుంది
- ఇన్‌పుట్ గుర్తింపును గేమ్ లాజిక్ నుండి వేరుచేస్తుంది
- గేమ్ కోడ్ పై ప్రభావం పెడకుండా నియంత్రణలను తరువాత మార్చడం సులభం చేస్తుంది
- ఒకే ఇన్‌పుట్‌కు బహుళ వ్యవస్థలు స్పందించడానికి వీలు కల్పిస్తుంది
```mermaid
flowchart TD
A["కీబోర్డు ఇన్పుట్"] --> B["విండో ఈవెంట్ లిసనర్"]
B --> C["ఈవెంట్ ఎమిట్టర్"]
C --> D["KEY_EVENT_UP"]
C --> E["KEY_EVENT_DOWN"]
C --> F["KEY_EVENT_LEFT"]
C --> G["KEY_EVENT_RIGHT"]
D --> H["హీరో మూవ్‌మెంట్"]
D --> I["సౌండ్ సిస్టం"]
D --> J["విజువల్ ఎఫెక్ట్స్"]
E --> H
F --> H
G --> H
style A fill:#e1f5fe
style C fill:#e8f5e8
style H fill:#fff3e0
```
2. సందేశాలను ప్రచురించడానికి మరియు సభ్యత్వం పొందడానికి ఒక EventEmitter తరగతి సృష్టించండి:
```javascript
class EventEmitter {
constructor() {
this.listeners = {};
}
on(message, listener) {
if (!this.listeners[message]) {
this.listeners[message] = [];
}
this.listeners[message].push(listener);
}
3. స్థిరాంకాలను జోడించి EventEmitterని సెట్ చేయండి:
```javascript
const Messages = {
KEY_EVENT_UP: "KEY_EVENT_UP",
KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
};
let heroImg,
enemyImg,
laserImg,
canvas, ctx,
gameObjects = [],
hero,
eventEmitter = new EventEmitter();
```
**ఈ సెటప్ అర్థం చేసుకోవడం:**
- టైపోలను నివారించడానికి మరియు పునఃసంఘటన సులభం చేయడానికి సందేశ స్థిరాంకాలను నిర్వచిస్తుంది
- చిత్రాలు, కాన్వాస్ కాంటెక్స్‌ట్ మరియు గేమ్ స్థితికి వేరియబుల్స్ ప్రకటిస్తుంది
- పబ్-సబ్ సిస్టమ్ కోసం ఒక గ్లోబల్ ఈవెంట్ ఎమిట్టర్ సృష్టిస్తుంది
- **అన్ని గేమ్ వస్తువులను కలిగి ఉండేందుకు** ఒక అర్రే ప్రారంభిస్తుంది
4. **గేమ్ ప్రారంభించండి**
```javascript
function initGame() {
gameObjects = [];
createEnemies();
createHero();
eventEmitter.on(Messages.KEY_EVENT_UP, () => {
hero.y -= 5;
});
eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
hero.y += 5;
});
eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
hero.x -= 5;
});
4. **గేమ్ లూప్ సెట్ చేయండి**
గేమ్ ప్రారంభించేందుకు మరియు మంచిదైన ఇంటర్వెల్‌లో గేమ్ లూప్ అమర్చేందుకు `window.onload` ఫంక్షన్‌ను రీఫాక్టర్ చేయండి. మీరు ఒక లేజర్ బీమ్ కూడా జోడిస్తారు:
```javascript
window.onload = async () => {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
heroImg = await loadTexture("assets/player.png");
enemyImg = await loadTexture("assets/enemyShip.png");
laserImg = await loadTexture("assets/laserRed.png");
initGame();
const gameLoopId = setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawGameObjects(ctx);
}, 100);
};
```
**గేమ్ సెటప్ అర్థం చేసుకోవడం:**
- **పేజీ పూర్తిగా లోడ్ కావడం కోసం** వేచివుంటుంది ప్రారంభించడానికి ముందు
- **కేన్వాస్ ఎలిమెంట్ మరియు దాని 2D రెండరింగ్ కంటెక్స్ట్ పొందుతుంది**
- **అన్ని చిత్రం ఆసెట్‌లను అసింక్రనస్‌గా `await` ఉపయోగించి లోడ్ చేస్తుంది**
- **గేమ్ లూప్‌ను 100ms ఇంటర్వెల్స్ (10 FPS) వద్ద ప్రారంభిస్తుంది**
- **ప్రతి ఫ్రేమ్‌లో మొత్తం స్క్రీన్‌ను క్లియర్ చేసి తిరిగి డ్రా చేస్తుంది**
5. **శత్రువులను ఒక నిర్దిష్ట ఇంటర్వెల్ వద్ద కదిలించడానికి కోడ్ జోడించండి**
`createEnemies()` ఫంక్షన్‌ను శత్రువులను సృష్టించి వాటిని కొత్త gameObjects క్లాస్‌లో పుష్ చేయడానికి రీఫాక్టర్ చేయండి:
```javascript
function createEnemies() {
const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;
for (let x = START_X; x < STOP_X; x += 98) {
for (let y = 0; y < 50 * 5; y += 50) {
const enemy = new Enemy(x, y);
enemy.img = enemyImg;
gameObjects.push(enemy);
}
}
}
```
**శత్రువుల సృష్టి ఏం చేస్తుంది:**
- **శత్రువులను స్క్రీన్ మధ్యలో సెంటర్ చేయటానికి స్థానాలను లెక్కించుతుంది**
- **నెస్టెడ్ లూప్‌లను ఉపయోగించి శత్రువుల గ్రిడ్ సృష్టిస్తుంది**
- **ప్రతి శత్రువుకు శత్రువు చిత్రం కేటాయిస్తుంది**
- **ప్రతి శత్రువును గ్లోబల్ గేమ్ ఆబ్జెక్ట్స్ అర్రేలో జోడిస్తుంది**
మరియు `createHero()` ఫంక్షన్‌ను కూడా హీరో కోసం సమానమైన ప్రక్రియ చేయడానికి జోడించండి.
```javascript
function createHero() {
hero = new Hero(
canvas.width / 2 - 45,
canvas.height - canvas.height / 4
);
hero.img = heroImg;
gameObjects.push(hero);
}
```
**హీరో సృష్టి ఏం చేస్తుంది:**
- **హీరోను స్క్రీన్ దిగువ మధ్యలో స్థానం చేస్తుంది**
- **హీరో ఆబ్జెక్టుకు హీరో చిత్రం కేటాయిస్తుంది**
- **డ్రాయింగ్ కోసం గేమ్ ఆబ్జెక్ట్స్ అర్రేలో హీరోను జోడిస్తుంది**
చివరగా, డ్రాయింగ్ ప్రారంభించడానికి `drawGameObjects()` ఫంక్షన్‌ను జోడించండి:
```javascript
function drawGameObjects(ctx) {
gameObjects.forEach(go => go.draw(ctx));
}
```
**డ్రాయింగ్ ఫంక్షన్ అర్థం చేసుకోవడం:**
- **అన్ని గేమ్ ఆబ్జెక్ట్స్ అర్రేలో దాటిచూడుతుంది**
- **ప్రతి ఆబ్జెక్ట్‌పై `draw()` మెథడ్‌ను పిలవుతుంది**
- **ఆబ్జెక్టులు తమను తాము రెండర్ చేయడానికి కేన్వాస్ కంటెక్స్ట్‌ను పంపుతుంది**
### 🔄 **పెदాగొజికల్ చెక్-ఇన్**
**గేమ్ సిస్టమ్ పూర్తి అవగాహన**: మొత్తం నిర్మాణంపై మీ మాస్టరీని నిర్ధారించుకోండి:
- ✅ హిరో మరియు శత్రువులు సాధారణ GameObject లక్షణాలను పంచుకోడానికి వంశపారంపర్యం ఎలా అనుమతిస్తుంది?
- ✅ పబ్/సబ్ ప్యాటర్న్ మీ కోడ్‌ను మరింత నిర్వహణ చేయదగినది చేయడంలో ఎందుకు సహాయపడుతుంది?
- ✅ సాఫీ యానిమేషన్ సృష్టించడంలో గేమ్ లూప్ పాత్ర ఏమిటి?
- ✅ యూజర్ ఇన్‌పుట్‌ను గేమ్ ఆబ్జెక్ట్ ప్రవర్తనకు ఈవెంట్ లిసనర్లు ఎలా కలిగి ఉంటాయి?
**సిస్టమ్ ఇంటిగ్రేషన్**: మీ గేమ్ ఈ క్రింది అంశాలను ప్రదర్శిస్తోంది:
- **ఆబ్జెక్ట్-ఓరియెంటెడ్ డిజైన్**: ప్రత్యేకమైన వంశపారంపర్యంతో బేస్ క్లాసులు
- **ఈవెంట్-చಾಲిత నిర్మాణం**: పబ్/సబ్ ప్యాటర్న్ తో సాఫ్ట్ లూపింగ్
- **యానిమేషన్ ఫ్రేమ్‌వర్క్**: స్థిరమైన ఫ్రేమ్ అప్డేట్‌లతో గేమ్ లూప్
- **ఇన్‌పుట్ నిర్వహణ**: డిఫాల్ట్ ప్రివెన్షన్ తో కీబోర్డ్ ఈవెంట్స్
- **ఆసెట్ నిర్వహణ**: చిత్రం లోడ్ మరియు స్ప్రైట్ రెండరింగ్
**ప్రొఫెషనల్ ప్యాటర్న్స్**: మీరు అమలు చేసారు:
- **భాగముల వేరువేరు**: ఇన్‌పుట్, లాజిక్, రెండరింగ్ వేరు ఉంచబడింది
- **పోలిమార్ఫిజం**: అన్ని గేమ్ ఆబ్జెక్టులు సాధారణ డ్రాయింగ్ ఇంటర్‌ఫేస్‌ను పంచుకుంటాయి
- **మెసేజ్ పంపకం**: భాగాల మధ్య పారదర్శక కమ్యూనికేషన్
- **వనరు నిర్వహణ**: సమర్థవంతమైన స్ప్రైట్ మరియు యానిమేషన్ హ్యాండ్లింగ్
మీ శత్రువులు మీ హీరో స్పేస్‌షిప్ వైపు ప్రత్యక్షంగా అడుగు వేసే అవకాశముంది!
}
}
```
and add a `createHero()` function to do a similar process for the hero.
```javascript
function createHero() {
hero = new Hero(
canvas.width / 2 - 45,
canvas.height - canvas.height / 4
);
hero.img = heroImg;
gameObjects.push(hero);
}
```
చివరగా, డ్రాయింగ్ ప్రారంభించేందుకు `drawGameObjects()` ఫంక్షన్‌ను జోడించండి:
```javascript
function drawGameObjects(ctx) {
gameObjects.forEach(go => go.draw(ctx));
}
```
మీ శత్రువులు ఇప్పుడు మీ హీరో స్పేస్‌షిప్ వైపు అడుగు వేయడం ప్రారంభిస్తారు!
---
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఇక్కడ మీ గేమ్ పరికరాన్ని మెరుగుపరచడానికి ఒక ఛాలెంజ్ ఉంది: పరిమితులు మరియు సాఫీ నియంత్రణలు జోడించడం. ప్రస్తుతం, మీ హీరో స్క్రీన్ బయటకి పోవచ్చు మరియు కదలిక కొద్దిగా అవిభాజ్యంగా అనిపించవచ్చు.
**మీ మిషన్:** మీ స్పేస్‌షిప్‌ను మరింత నిజమైన అనుభూతి కలిగించండి స్క్రీన్ పరిమితులు మరియు అందమైన కదలికిని అమలుచేసి. ఇది NASA యొక్క ఫ్లైట్ కంట్రోల్ సిస్టమ్‌లను స్మరించిస్తుంది, అవి అంతరిక్ష యానిమేషన్ లీమిట్స్ మించకుండా నిరోధిస్తాయి.
**మీరు నిర్మించవలసినది:** మీ హీరో స్పేస్‌షిప్‌ను స్క్రీన్‌లో ఉంచే ఒక సిస్టమ్ సృష్టించండి, మరియు నియంత్రణల్ని సాఫీగ మార్చండి. ప్లేయర్లు ఎరో కీని పగలుచుకున్నపుడూ, రెండు విడతల కదలిక కాదని, కంటే నిరంతరంగా సాగేలా ఉండాలి. స్క్రీన్ నెగ్గి ఉన్నప్పుడు క్రీయాత్మక సూచనలును జోడించడం ఈ దిశగా సహాయకారి అవుతుంది.
ఇక్కడ [ఏజెంట్ మోడ్](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## 🚀 ఛాలెంజ్
కోడ్ సੰਗ్రహం ప్రాజెక్టులు పెరిగిన కొద్దీ చాలా ముఖ్యం అవుతుంది. మీ ఫైల్ ఫంక్షన్లు, వేరియబుల్స్, క్లాసులతో బాగా నిండిపోయిందని మీరు గమనించవచ్చు. ఇది అట్లాంటి పరిస్థితికి సమానం, అల్లాపొ మిషన్ కోడ్ టిమ్‌లు అనేక టీమ్‌లు ఒకేసారి పనిచేయడానికి క్లియర్, నిర్వహణ సులభమైన సిస్టమ్స్ రూపొందిస్తారని గుర్తు చేస్తుంది.
**మీ మిషన్:**
సాఫ్ట్‌వేర్ ఆర్కిటెక్ట్ లాగా ఆలోచించండి. ఆరు నెలల తర్వాత మీరు (లేదా మీ టీమ్ సభ్యుడు) మీ కోడ్‌ను సులభంగా అర్థం చేసుకునేలా ఎలా ఏర్పాటు చేస్తారు? ఇప్పటికీ ఒకటే ఫైల్‌లో ఉండిపోయినా, మీరు మంచి ఏర్పాటు చేయవచ్చు:
- **సంబంధిత ఫంక్షన్లను** క్లియర్ కామెంట్ శీర్షికలతో సమూహీకరించడం
- **అంశాలను వేరుచేయడం** - గేమ్ లాజిక్ మరియు రెండరింగ్ వేరుగా ఉంచడం
- **ఏకరీతమైన నామకరణం** వాక్యాలు, ఫంక్షన్లు కోసం ఉపయోగించడం
- **మాడ్యూల్స్ లేదా నేమ్స్‌పేస్‌లు** సృష్టించడం గేమ్ వివిధ అంశాలను సమగ్రంగా నిర్వహించడానికి
- **ప్రాముఖ్యమైన విభాగాల ప్రయోజనాన్ని** వివరించే డాక్యుమెంటేషన్ జోడించడం
**ప్రతిబింబించే ప్రశ్నలు:**
- మీరు తిరిగి వచ్చేటప్పుడు మీ కోడ్‌లో ఏ భాగాలు అర్థం చేసుకోవడానికి కష్టతరంగా ఉంటాయి?
- ఇతరులు సహాయం చేయడానికి కోడ్ ఎలా సులభం చేసుకోవచ్చు?
- మీరు పవర్-అప్స్ లేదా వివిధ శత్రువు రకాల లాంటి కొత్త ఫీచర్లను జోడిస్తే কী జరుగుతుంది?
## పోస్ట్-లెక్చర్ క్విజ్
[పోస్ట్-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/34)
## సమీక్ష మరియు స్వీయ అధ్యయనం
మనము ప్రతిదీ మొదలైనదనుంచి నిర్మించుకుంటున్నాము, ఇది నేర్చుకోవటానికి అద్భుతం, కానీ ఒక చిన్న రహస్యం ఉంది – చాలా బలమైన జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్స్ ఉన్నాయి, అవి మీకు ఎక్కువ బాధ్యతలను జాగ్రత్తగా నిర్వహిస్తాయి. మీరు మేము నేర్చుకున్న మౌలికాలు బాగా తెలిసిన తర్వాత, అందులో ఏమున్నదీ తెలుసుకోవడం విలువైనది.
ఫ్రేమ్‌వర్క్స్‌ను మీరు చేత తోల్ తయారుచేసేవారని కాకుండా, పూర్తిగా సిద్ధంగా ఉన్న టూల్స్ బాక్స్‌గా ఊహించుకోండి. అవి కోడ్ సౌలభ్య సమస్యలు అధిగమించడంలో సహాయపడతాయి, అంతేకాక, మీరు వారాంతంతో నెలల్లో నిర్మించేది కొన్ని ఫీచర్లు అందిస్తాయి.
**అన్వేషించదగ్గ అంశాలు:**
- గేమ్ ఇంజిన్‌లు కోడ్‌ను ఎలా గంపవేస్తాయో గమనించండి – మీరు ఉపయోగించే క్లీవర్ ప్యాటర్న్స్ చూస్తే ఆశ్చర్యపడతారు
- కేన్వాస్ గేమ్స్ బటర్-స్మూత్ నడిపించడానికి పనితీరు చిట్కాలు
- ఆధునిక జావాస్క్రిప్ట్ ఫీచర్లతో మీ కోడ్‌ను క్లీనర్, నిర్వహించదగినది చేయడం
- గేమ్ ఆబ్జెక్ట్స్ మరియు వాటి సంబంధాలను ఎలా నిర్వహించాలో వివిధ రీతులు
## 🎯 మీ గేమ్ యానిమేషన్ మాస్టరీ టైమ్‌లైన్
```mermaid
timeline
title గేమ్ అనిమేషన్ & ఇంటరాక్షన్ అభ్యాస అభివృద్ది
section కదలిక ప్రాథమికాలు (20 నిమిషాలు)
Animation Principles: ఫ్రేమ్-ఆధారిత అనిమేషన్
: స్థానాన్ని నవీకరణలు
: కోఆర్డినేట్ సిస్టమ్లు
: సున్నితమైన కదలిక
section ఈవెంట్ సిస్టమ్లు (25 నిమిషాలు)
User Input: కీబోర్డ్ ఈవెంట్ నిర్వహణ
: డిఫాల్ట్ ప్రవర్తన నిషేధం
: ఈవెంట్ ఆబ్జెక్ట్ లక్షణాలు
: విండో-స్థాయి వినగ
section గేమ్ معمارش (30 నిమిషాలు)
Object Design: వారసత్వ నమూనాలు
: ప్రాథమిక తరగతి సృష్టి
: ప్రత్యేక ప్రవర్తనలు
: బహురూపి ఇంటర్‌ఫేస్‌లు
section కమ్యూనికేషన్ నమూనాలు (35 నిమిషాలు)
Pub/Sub Implementation: ఈవెంట్ ఎమిటర్లు
: సందేశ స్థిరాంకాలు
: సడలించిన కలుపుడు
: సిస్టమ్ ఇంటిగ్రేషన్
section గేమ్ లూప్ నైపుణ్యం (40 నిమిషాలు)
Real-time Systems: ఫ్రేమ్ రేట్ నియంత్రణ
: నవీకరణ/రెండర్ చక్రం
: స్థితి నిర్వహణ
: పనితీరు ఆప్టిమైజేషన్
section అధునాతన సాంకేతికతలు (45 నిమిషాలు)
Professional Features: ఢొక్కుబడి గుర్తింపు
: ఫిజిక్స్ సిమ్యులేషన్
: స్థితి యంత్రాలు
: భాగాలు తంత్రాలు
section గేమ్ ఇంజిన్ ধারণలు (1 వారం)
Framework Understanding: ఎంటిటీ-భాగం సిస్టమ్లు
: సీన్ గ్రాఫ్స్
: ఆస్తి పైప్‌లైన్లు
: పనితీరు ప్రొఫైలింగ్
section ఉత్పత్తి నైపుణ్యాలు (1 నెల)
Professional Development: కోడ్ సంస్థాపన
: బృంద సహకారం
: పరీక్షా విధానాలు
: మోపడం ఆప్టిమైజేషన్
```
### 🛠️ మీ గేమ్ డెవలప్‌మెంట్ టూల్‌కిట్ సమ్మరీ
ఈ పాఠం పూర్తి చేసిన తర్వాత, మీరు ఇప్పుడు సహజంగా:
- **యానిమేషన్ సూత్రాలు**: ఫ్రేమ్-ఆధారిత కదలిక మరియు సాఫీ మార్పులు
- **ఈవెంట్-ప్రేరేపిత ప్రోగ్రామింగ్**: సరైన ఈవెంట్ నిర్వహణతో కీబోర్డ్ ఇన్‌పుట్ హ్యాండ్లింగ్
- **ఆబ్జెక్ట్-ఓరియెంటెడ్ డిజైన్**: వంశపారంపర్యం మరియు పోలిమార్ఫిక్ ఇంటర్‌ఫేసులు
- **కమ్యూనికేషన్ ప్యాటర్న్స్**: నిర్వహణీయమైన కోడ్ కోసం పబ్/సబ్ ఆర్కిటెక్చర్
- **గేమ్ లూప్ ఆర్కిటెక్చర్**: నిజ సమయ అప్డేట్ మరియు రెండరింగ్ సైకిల్స్
- **ఇన్‌పుట్ సిస్టమ్స్**: డిఫాల్ట్ ప్రవర్తన నిరోధనతో యూజర్ నియంత్రణ మ్యాపింగ్
- **ఆసెట్ నిర్వహణ**: స్ప్రైట్ లోడింగ్ మరియు సమర్థవంతమైన రెండరింగ్ సాంకేతికతలు
### ⚡ **మీరు తర్వాత 5 నిమిషాల్లో చేయగలిగే విషయాలు**
- [ ] బ్రౌజర్ కన్సోల్ ఓపెన్ చేసి `addEventListener('keydown', console.log)` ప్రయత్నించండి కీబోర్డ్ ఈవెంట్స్ చూడటానికి
- [ ] ఒక సింపుల్ డివ్ ఎలిమెంట్ సృష్టించి దానిని ఎరో కీస్ ఉపయోగించి మార్చండి
- [ ] నిరంతర కదలిక కోసం `setInterval` అన్వేషించండి
- [ ] `event.preventDefault()` తో డిఫాల్ట్ ప్రవర్తన నిరోధన ప్రయత్నించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పోస్ట్-లెక్చర్ క్విజ్ పూర్తి చేసి ఈవెంట్-చాలిత ప్రోగ్రామింగ్ అర్థం చేసుకోండి
- [ ] పూర్తి కీబోర్డ్ నియంత్రణలతో కదలికలో హీరో స్పేస్‌షిప్ నిర్మించండి
- [ ] సాఫీ శత్రువు కదలికా ప్యాటర్న్‌లను అమలు చేయండి
- [ ] గేమ్ ఆబ్జెక్టులు స్క్రీన్‌ను వదలకుండా పరిమితులను జోడించండి
- [ ] గేమ్ ఆబ్జెక్టుల మధ్య ప్రాథమిక ఢీగింపు గుర్తింపు సృష్టించండి
### 📅 **మీ వారాంత యానిమేషన్ ప్రయాణం**
- [ ] కదలిక మరియు ఇన్టరాక్షన్లతో పూర్తి స్పేస్ గేమ్ పూర్తిచేయండి
- [ ] వంకలు, ఆక్సిలరేషన్, మరియు భౌతిక శాస్త్రం వంటి అభివృద్ధి చెందిన కదలికా ప్యాటర్న్‌లను జోడించండి
- [ ] సాఫీ మార్పిడులు మరియు ఈసింగ్ ఫంక్షన్లను అమలు చేయండి
- [ ] పార్టికిల్ ఎఫెక్ట్‌లు మరియు విజువల్ ఫీడ్బ్యాక్ వ్యవస్థలు సృష్టించండి
- [ ] 60fps స్మూత్ గేమ్‌ప్లే కోసం గేమ్ పనితీరు ఆప్టిమైజ్ చేయండి
- [ ] మొబైల్ టచ్ నియంత్రణలు మరియు స్పందనాత్మక డిజైన్ జోడించండి
### 🌟 **మీ నెలంత interactive డెవలప్‌మెంట్**
- [ ] అభివృద్ధి చెందిన యానిమేషన్ సిస్టమ్‌లతో క్లిష్టమైన ఇంటరాక్టివ్ అప్లికేషన్లు నిర్మించండి
- [ ] GSAP వంటి యానిమేషన్ లైబ్రరీలు నేర్చుకోండి లేదా మీ స్వంత యానిమేషన్ యంత్రం సృష్టించండి
- [ ] ఓపెన్ సోర్స్ గేమ్ డెవలప్‌మెంట్ మరియు యానిమేషన్ ప్రాజెక్టులకు సహకరించండి
- [ ] గ్రాఫిక్స్-తీవ్ర అప్లికేషన్ల కోసం పనితీరు ఆప్టిమైజేషన్‌లో నైపుణ్యం పొందండి
- [ ] గేమ్ డెవలప్‌మెంట్ మరియు యానిమేషన్ గురించి విద్యా విషయాలను సృష్టించండి
- [ ] ఆధునిక ఇంటరాక్టివ్ ప్రోగ్రామింగ్ నైపుణ్యాలను ప్రదర్శించే పోర్ట్‌ఫోలియో రూపొందించండి
**నిజ-ప్రపంచ అనువర్తనాలు**: మీ గేమ్ యానిమేషన్ నైపుణ్యాలు నేరుగా వర్తిస్తాయి:
- **ఇంటరాక్టివ్ వెబ్ అప్లికేషన్లు**: డైనామిక్ డ్యాష్‌బోర్డులు మరియు నిజ-సమయ ఇంటర్‌ఫేస్‌లు
- **డేటా విజువలైజేషన్**: యానిమేటెడ్ చార్ట్లు మరియు ఇంటరాక్టివ్ గ్రాఫిక్స్
- **విద్యా సాఫ్ట్‌వేర్**: ఇంటరాక్టివ్ సిమ్యులేషన్లు మరియు అభ్యాస పరికరాలు
- **మొబైల్ డెవలప్‌మెంట్**: టచ్ ఆధారిత గేమ్స్ మరియు హాండ్లింగ్
- **డెస్క్‌టాప్ అప్లికేషన్లు**: ఎలక్ట్రాన్ యాప్‌లు సాఫీ యానిమేషన్‌లతో
- **వెబ్ యానిమేషన్‌లు**: CSS మరియు జావాస్క్రిప్ట్ యానిమేషన్ లైబ్రరీలు
**ప్రొఫెషనల్ నైపుణ్యాలు పొందారు**: మీరు ఇప్పుడు చేయగలుగుతారు:
- **ఆర్కిటెక్ట్** ఈవెంట్-చాలిత సిస్టమ్స్, సంక్లిష్టతతో పెరిగేవి
- **అమలు చేయండి** గణిత సూత్రాలతో సాఫీ యానిమేషన్లు
- **డీబగ్** బ్రౌజర్ డెవలపర్ టూల్స్ ఉపయోగించి క్లిష్ట ఇంటరాక్షన్ సిస్టమ్స్
- **ఆప్టిమైజ్** గేమ్ పనితీరు వివిధ పరికరాలు మరియు బ్రౌజర్లకు
- **డిజైన్** నిర్వహించదగిన కోడ్ నిర్మాణాలు ప్రామాణిక ప్యాటర్న్‌లతో
**గేమ్ డెవలప్‌మెంట్ భావనలు మాస్టరీ చేసినవి**:
- **ఫ్రేమ్ రేట్ నిర్వహణ**: FPS మరియు సమయ నియంత్రణలు అర్థం చేసుకోవడం
- **ఇన్‌పుట్ హ్యాండ్లింగ్**: క్రాస్-ప్లాట్‌ఫారమ్ కీబోర్డ్ మరియు ఈవెంట్ సిస్టమ్స్
- **ఆబ్జెక్ట్ లైఫ్‌సైకిల్**: సృష్టి, అప్డేట్, మరియు ధ్వంస ప్యాటర్న్స్
- **స్టేట్ సమకాలీకరణ**: ఫ్రేమ్‌ల మధ్య గేమ్ స్టేట్ సुसంపన్నంగా ఉంచడం
- **ఈవెంట్ ఆర్కిటెక్చర్**: గేమ్ సిస్టమ్స్ మధ్య విడిపెట్టిన కమ్యూనికేషన్
**తదుపరి స్థాయి**: మీరు ఢీగింపు గుర్తింపు, స్కోరింగ్ సిస్టమ్స్, సౌండ్ ఎఫెక్ట్స్ జోడించడానికి సిద్ధంగా ఉన్నారు, లేదా Phaser లేదా Three.js వంటి ఆధునిక గేమ్ ఫ్రేమ్‌వర్క్స్ అన్వేషించవచ్చు!
🌟 **అచీవ్‌మెంట్ అన్‌లాక్ అయింది**: మీరు ప్రొఫెషనల్ ఆర్కిటెక్చర్ ప్యాటర్న్స్‌తో పూర్తి ఇంటరాక్టివ్ గేమ్ సిస్టమ్‌ను నిర్మించారు!
## అసైన్‌మెంట్
[మీ కోడ్ పై వ్యాఖ్యానించండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్క్లైమర్**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో తప్పులు లేదా అపరాధాలు ఉండొచ్చు. సరిఅయిన భాషలో అసలు పత్రాన్ని అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం వివరంగా తీసుకోవడం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వల్ల వచ్చే ఏవైనా తప్పుపరిణామాలు లేదా సమజచు తప్పుల өчен మేము బాధ్యులు కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

38
translations/te/6-space-game/3-moving-elements-around/assignment.md
Unescape View File

@ -0,0 +1,38 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c162b3b3a1cafc1483c8015e9b266f0d",
"translation_date": "2026-01-08T14:48:48+00:00",
"source_file": "6-space-game/3-moving-elements-around/assignment.md",
"language_code": "te"
}
-->
# మీ కోడ్‌ను వ్యాఖ్యానించండి
## సూచనలు
పరిశుభ్రంగా, బాగా డాక్యుమెంటెడ్ కోడ్ మీ ప్రాజెక్టుల నిర్వహణ మరియు పంచుకోవడానికి అవసరం. ఈ అసైన్మెంట్‌లో, మీరు ప్రొఫెషనల్ డెవలపర్స్ యొక్క అత్యంత ముఖ్యమైన అలవాట్లలో ఒకదాన్ని అభ్యసించబోతున్నారు: మీ కోడ్ యొక్క ఉద్దేశ్యం మరియు కార్యాచరణను వివరించే స్పష్టమైన, ఉపయోగకరమైన వ్యాఖ్యలను రాయడం.
మీ గేమ్ ఫోల్డర్‌లో ఉన్న ప్రస్తుత `app.js` ఫైల్‌ను పరిశీలించి, దానిని వ్యాఖ్యానించి, సుశ్రూషించు మార్గాలను కనుగొనండి. కోడ్ నియంత్రణ కోల్పోటం చాలా సులభం, కాబట్టి ఇప్పుడు మీకు పాఠకీయ కోడ్‌ను కలిగి ఉండేందుకు వ్యాఖ్యలను జోడించే మంచి అవకాశం.
**మీ పనిలో ఇది ఉంటుంది:**
- ప్రతి ప్రధాన కోడ్ విభాగం ఏమి చేస్తుందో వివరించే వ్యాఖ్యలు **జోడించండి**
- వారి ఉద్దేశ్యం మరియు పారామీటర్లను స్పష్టంగా వివరించమని **ఫంక్షన్‌లను డాక్యుమెంట్ చేయండి**
- కోడ్‌ను తార్కిక బ్లాకులుగా, విభాగ శీర్షికలతో **సంస్థాపించండి**
- ఉపయోగించని లేదా పునరావృతమైన కోడ్‌ను **తొలగించండి**
- వేరియబుల్‌లు మరియు ఫంక్షన్ల కోసం **ఒకరూపమైన పేర్ల నియమావళిని ఉపయోగించండి**
## మూల్యం
| ప్రమాణాలు | అద్భుతం | సరిపోతుంది | మెరుగుదల అవసరం |
| -------- | --------- | -------- | ----------------- |
| **కోడ్ డాక్యుమెంటేషన్** | `app.js` కోడ్ పూర్తిగా వ్యాఖ్యానించబడింది, major విభాగాలు మరియు ఫంక్షన్‌లకు స్పష్టమైన, ఉపయోగకరమైన వివరణల‌తో | `app.js` కోడ్ సరసమైన వ్యాఖ్యలతో ఉంది, చాలా విభాగాలకు ప్రాథమిక వివరణలతో | `app.js` కోడ్‌కి తక్కువ వ్యాఖ్యలు ఉన్నాయి మరియు స్పష్టమైన వివరణలు లేవు |
| **కోడ్ సంస్థాపన** | కోడ్‌ను ముఖ్య విభాగ శీర్షికలతో తార్కిక బ్లాక్స్‌గా ఏర్పాటు చేశారు మరియు ఒకరూపమైన నిర్మాణంతో ఉంది | కోడ్‌లో కొంత సంస్థాపన ఉంది, సంబంధిత కార్యాచరణల బేసిక్ గుంపుమెట్లతో ఉంది | కోడ్ కొంత అంతరాయం కలిగి ఉంది మరియు అనుసరించటం కష్టం |
| **కోడ్ నాణ్యత** | అన్ని వేరియబుల్స్ మరియు ఫంక్షన్లు వివరణాత్మక పేర్లను ఉపయోగిస్తాయి, ఉపయోగించని కోడ్ లేదు, సమాన నియమావళిని అనుసరిస్తుంది | ఎక్కువ కోడ్ మంచి పేర్ల నియమాలను పాటిస్తుంది, కనీసం ఉపయోగించని కోడ్ | వేరియబుల్ పేర్లు స్పష్టంగా లేవు, ఉపయోగించని కోడ్ ఉంది, శైలి అసమానంగా ఉంది |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్క్లెయిమర్**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మా accuracy కోసం ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదంలో తప్పులు లేదా అసత్యాలు ఉండవచ్చును. అసలు డాక్యుమెంట్ యొక్క మూటి భాషలో ఉన్న మూల పత్రం అధికారిక స్రోతస్సుగా పరిగణించాల్సి ఉంటుంది. ముఖ్యమైన సమాచారానికి వృత్తిపరమైన మానవ అనువాదం స్వీకరించడమే ఉత్తమం. ఈ అనువాదం వలన కలిగే ఏవైనా అర్థం తప్పులు లేదా తప్పు అర్ధం తిప్పడాలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

776
translations/te/6-space-game/4-collision-detection/README.md
Unescape View File

@ -0,0 +1,776 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
"translation_date": "2026-01-08T13:27:23+00:00",
"source_file": "6-space-game/4-collision-detection/README.md",
"language_code": "te"
}
-->
# స్పేస్ గేమ్ నిర్మాణం భాగం 4: లేజర్‌ను జోడించడం మరియు ఢీకి తెలియజేయడం
```mermaid
journey
title మీ ఠొక్కర గుర్తింపు ప్రయాణం
section భౌతిక శాస్త్రం మౌలికం
వరుసలను అర్థం చేసుకోండి: 3: విద్యార్థి
సాంతర విభాగ గణితం నేర్చుకోండి: 4: విద్యార్థి
సమన్వయ వ్యవస్థలను గ్రహించండి: 4: విద్యార్థి
section ఆట యాంత్రిక శాస్త్రం
లేజర్ షూటింగ్ అమలు చేయండి: 4: విద్యార్థి
వస్తువు జీవన చక్రం జోడించండి: 5: విద్యార్థి
ఠొక్కర నియమాలు సృష్టించండి: 5: విద్యార్థి
section వ్యవస్థ సమీకరణం
ఠొక్కర గుర్తింపు నిర్మించండి: 5: విద్యార్థి
పనితీరు సంస్కరణ: 5: విద్యార్థి
పరస్పర చర్య వ్యవస్థలను పరీక్షించండి: 5: విద్యార్థి
```
## పాఠం ముందరి క్విజ్
[పాఠం ముందరి క్విజ్](https://ff-quizzes.netlify.app/web/quiz/35)
స్టార్ వార్స్‌లో ల్యూక్ యొక్క ప్రోటాన్ టోర్పెడోలు డెత్ స్టార్ ఎగ్జాస్టు పోర్టును తగలగానే చోటుచేసుకున్న క్షణాన్ని గురించిన ఆలోచన చేయండి. ఆ ఖచ్చితమైన ఢీకి గుర్తింపు గెలాక్సీ యొక్క విధిని మార్చింది! గేమ్స్‌లో, ఢీకి గుర్తింపు అదే విధంగా పనిచేస్తుంది - ఇది వస్తువులు ఎప్పుడు పరస్పరం ఎదుర్కొంటున్నాయో నిర్ధారిస్తుంది మరియు తరువాత ఏమి జరుగుతుందో నిర్ణయిస్తుంది.
ఈ పాఠంలో, మీరు మీ స్పేస్ గేమ్‌కు లేజర్ ఆయుధాలను జోడించి ఢీకి గుర్తింపును అమలుపరుస్తారు. NASA మిషన్ ప్లానర్లు అశుభ్రత నివారించడానికి అంతరిక్షयान పథకాలను గణిస్తారని మీరు నేర్చుకుంటారు. మేము దీనిని ఒకదాని పైన మరొకటి నిర్మించే అనుకూలమైన దశలుగా విడగొడతాము.
చివరికి, లేజర్లు శత్రువులను నాశనం చేస్తూ, ఢీకి గమనించినప్పుడు గేమ్ సంఘటనలను రోగించే క్రియాశీల యుద్ధ వ్యవస్థను కలిగి ఉంటారు. ఇదే ఢీకి సూత్రాలు భౌతిక శాస్త్ర సిమ్యులేషన్స్ నుండి ఇంటరాక్టివ్ వెబ్ ఇంటర్‌ఫేస్ల వరకు ఉపయోగించబడతాయి.
```mermaid
mindmap
root((కలిషన్ డిటెక్షన్))
Physics Concepts
Rectangle Boundaries [చతురస్ర సరిహద్దులు]
Intersection Testing [చిలుక కార్యక్రమం]
Coordinate Systems [నిర్దేశాంక వ్యవస్థలు]
Separation Logic [విభజన లాజిక్]
Game Objects
Laser Projectiles [లేజర్ ప్రాజెక్టైల్‌లు]
Enemy Ships [శత్రు నౌకలు]
Hero Character [నాయక పాత్ర]
Collision Zones [కలిషన్ జోన్లు]
Lifecycle Management
Object Creation [వస్తువుల సృష్టి]
Movement Updates [చలనం నవీకరణలు]
Destruction Marking [వినాశం గుర్తింపు]
Memory Cleanup [మెమరీ శుభ్రపరచడం]
Event Systems
Keyboard Input [కీబోర్డ్ ఇన్పుట్]
Collision Events [కలిషన్ ఈవెంట్లు]
Game State Changes [గేమ్ స్థితి మార్పులు]
Audio/Visual Effects [ఆడియో/విజువల్ эффекты]
Performance
Efficient Algorithms [ఫలవంతమైన ఆల్గోరిథమ్స్]
Frame Rate Optimization [ఫ్రేమ్ రేట్ ఆప్టిమైజేషన్]
Memory Management [మెమరి నిర్వహణ]
Spatial Partitioning [స్పేషియల్ పార్టిషనింగ్]
```
✅ మొదటి కంప్యూటర్ గేమ్ ఎప్పుడైన రాయబడింది మరియు దాని కార్యాచరణ ఏమిటి అన్న విషయంపై కొంత పరిశోధన చేయండి.
## ఢీకి గుర్తింపు
ఢీకి గుర్తింపు అబ్బలో లూనార్ మాడ్యూల్లోని సమీప సెన్సార్ల లాంటి పని చేస్తుంది - ఇది క్రమంగా దూరాలను పరిక్షిస్తూనే వస్తువులు చాలా దగ్గరైనప్పుడు హెచ్చరికని ఉత్పత్తి చేస్తుంది. గేమ్స్‌లో ఇది వస్తువుల పరస్పరం చర్యలను మరియు తరువాత ఏమి జరగాలో నిర్ణయిస్తుంది.
మనం ఉపయోగించుకునే పద్ధతి ప్రతి గేమ్ ఆబ్జెక్టును ఒక చతురస్రం అన్నట్లుగా భావిస్తుంది, ఇది ఎయిర్ ట్రాఫిక్ కంట్రోల్ సిస్టమ్స్ విమానాలను ట్రాక్ చేయడానికి సరళీకృత జ్యామితీయ ఆకారాలను ఉపయోగించే విధానాన్ని పోలికగా తీసుకుంటుంది. ఈ చతురస్ర పద్ధతి సాధారణంగా కనిపించవచ్చు, కాని ఇది గణనీయంగా సమర్థవంతమే మరియు ఎక్కువ గేమ్ సందర్భాల్లో బాగుంది.
### చతురస్ర ప్రతీకారం
ప్రతి గేమ్ వస్తువు స్థానంలో సరిహద్దు కోఆర్డినేట్లు అవసరం, మარს్ పాథ్‌ఫైండర్ రోవర్ మంగళ గ్రహ ఉపరితలంపై తన స్థానాన్ని గుర్తించడానికి ఎలా ఉపయోగించిందో అలానే. ఇవి మనం సరిహద్దు కోఆర్డినేట్లను నిర్వచించేదాన్ని:
```mermaid
flowchart TD
A["🎯 ఆట వస్తువు"] --> B["📍 స్థానము (x, y)"]
A --> C["📏 పరిమాణాలు (వెడల్పు, ఎత్తు)"]
B --> D["పై భాగం: y"]
B --> E["ఎడమ భాగం: x"]
C --> F["కింద భాగం: y + ఎత్తు"]
C --> G["కుడి భాగం: x + వెడల్పు"]
D --> H["🔲 చతురస్ర గడులు"]
E --> H
F --> H
G --> H
H --> I["ఘర్షణ గుర్తింపు సిద్ధం"]
style A fill:#e3f2fd
style H fill:#e8f5e8
style I fill:#fff3e0
```
```javascript
rectFromGameObject() {
return {
top: this.y,
left: this.x,
bottom: this.y + this.height,
right: this.x + this.width
}
}
```
**దీనిని విడగొడదాం:**
- **పై అంచు**: ఇది మీ వస్తువు ఎక్కడ నుండి ప్రారంభమయ్యింది అనేది నిలువుగా (ఆటస్ధానం y)
- **ఎడమ అంచు**: ఇది أف్పుపరికి ఆడవైపు ప్రారంభ స్థానంని సూచిస్తుంది (ఆటస్ధానం x)
- **కింద అంచు**: y స్థానానికి ఎత్తు జోడించండి - ఇక్కడ వస్తువు ముగుస్తుంది!
- **కుడి అంచు**: x స్థానానికి వెడల్పు జోడించండి - మీరు పూర్తి సరిహద్దును పొందారు
### అసంక్రమణ అల్గోరిథమ్
చతురస్రాల అసంక్రమణలను గుర్తించడం హబుల్ స్పేస్ టెలిస్కోప్ విశ్వ పరిమాణంలో ఆకాశీయ వస్తువులు ఒకరిపై ఒకరు విభజించబోతున్నాయా అని నిర్ధారించే విధానం లాంటిదే. అల్గోరిథమ్ విడిపోవడాన్ని పరీక్షిస్తుంది:
```mermaid
flowchart LR
A["చతురస్రం 1"] --> B{"వేర్పాటు పరీక్షలు"}
C["చతురస్రం 2"] --> B
B --> D["R2 ఎడమ > R1 కుడి?"]
B --> E["R2 కుడి < R1 ఎడమ?"]
B --> F["R2 పై > R1 క్రింద?"]
B --> G["R2 క్రింద < R1 పై?"]
D --> H{"ఏదైనా నిజం?"}
E --> H
F --> H
G --> H
H -->|అవును| I["❌ ఢీకొనడం లేదు"]
H -->|కాదు| J["✅ ఢీకొనడం గుర్తించబడింది"]
style B fill:#e3f2fd
style I fill:#ffebee
style J fill:#e8f5e8
```
```javascript
function intersectRect(r1, r2) {
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}
```
**విభజన పరీక్ష రాడార్ వ్యవస్థలాగే పనిచేస్తుంది:**
- చతురస్రం 2 పూర్తిగా చతురస్రం 1 కుడివైపు ఉందా?
- చతురస్రం 2 పూర్తిగా చతురస్రం 1 ఎడమవైపు ఉందా?
- చతురస్రం 2 పూర్తిగా చతురస్రం 1 కింద ఉందా?
- చతురస్రం 2 పూర్తిగా చతురస్రం 1 పైగా ఉందా?
ఈ పరిస్థితేలపై ఇంకేమీ నిజం కాకపోతే, చతురస్రాలు ఒకరిపై ఒకరు ఉత్ప్రేరకంగా నిలబడ్డాయని అర్థం. ఇది రాడార్ ఆపరేటర్లు రెండు విమానాలు సురక్షిత దూరంలో ఉన్నాయా అని తెలుసుకునే విధానం.
## వస్తువుల జీవ చక్రాలను నిర్వహించడం
లేజర్ శత్రువు పైన తగిలితే, రెండు వస్తువులు గేమ్ నుండి తొలగించాలి. అయితే, లోపల లూప్ లో వస్తువులను తొలగించడం క్రాష్‌లకు దారి తీస్తుంది - ఇది అప్పోలో మార్గదర్శి కంప్యూటర్ వంటి ప్రాచీన కంప్యూటర్ వ్యవస్థలలో అనుభవించిన పాఠం. బదులుగా, "తొలగించడానికి గుర్తు" సూత్రాన్ని ఉపయోగిస్తాము, ఇది ఫ్రేమ్‌ల మధ్య వస్తువులను సురక్షితంగా తొలగిస్తుంది.
```mermaid
stateDiagram-v2
[*] --> Active: ఆబ్జెక్ట్ సృష్టించబడింది
Active --> Collided: మందగించబడిన కలిభాష
Collided --> MarkedDead: మృతిగా సెట్ చేయండి = true
MarkedDead --> Filtered: తదుపరి ఫ్రేమ్
Filtered --> [*]: ఆబ్జెక్ట్ తొలగించబడింది
Active --> OutOfBounds: స్క్రీన్ నుండి బయలు దెబ్బతినింది
OutOfBounds --> MarkedDead
note right of MarkedDead
కొనసాగించడానికి సురక్షితం
ప్రస్తుత ఫ్రేమ్
end note
note right of Filtered
ఫ్రేమ్‌ల మధ్య
ఆబ్జెక్టులు తొలగించబడ్డాయి
end note
```
ఇలా ఏదైనా తొలగించడానికి గుర్తు చేస్తున్నాం:
```javascript
// వస్తువును తొలగింపు కోసం గుర్తించండి
enemy.dead = true;
```
**ఈ విధానం ఎందుకు పనిచేస్తుంది**:
- వస్తువును "డెడ్" గా గుర్తిస్తాం కానీ వెంటనే తొలగింపము చేయం
- ఇది ప్రస్తుత గేమ్ ఫ్రేమ్ సురక్షితంగా పూర్తయ్యేలా చేస్తుంది
- ముందే తొలగించిన వస్తువును ఉపయోగించటంలో దోషాలు రాకుండా చేస్తుంది!
తర్వాత తదుపరి రేండర్ చక్రానికి ముందే గుర్తించిన వస్తువులను ఫిల్టర్ చేస్తాం:
```javascript
gameObjects = gameObjects.filter(go => !go.dead);
```
**ఈ ఫిల్టరింగ్ చేస్తుంది:**
- "జీవంత" వస్తువులతో కొత్త జాబితా సృష్టిస్తుంది
- డెడ్ గా గుర్తించిన వాటిని బయటపెడుతుంది
- మీ గేమ్ బాగుగా నడుస్తుంది
- నాశనమైన వస్తువుల చేర్చడం వల్ల స్మృతి పెరిగేలా ఉండదు
## లేజర్ యాంత్రికతను అమలుచేయడం
గేమ్స్‌లో లేజర్ ప్రాజెక్టైల్స్ స్టార్ ట్రెక్‌లోని ఫోటాన్ టోర్పెడోల మాదిరిగా పనిచేస్తాయి - అవి నిర్దిష్ట వస్తువులు క్రమంగా సరేఖా గుండా ప్రయాణిస్తూ ఏదైనా తగలుతున్నంతవరకు. ప్రతి స్పేస్‌బార్ నొక్కటంతో కొత్త లేజర్ వస్తువు సృష్టించబడుతుంది, ఇది తెరపై కదులుతుంది.
ఇది పనిచేసేందుకు, కొన్ని భాగాలను సమన్వయింపచేయాలి:
**ప్రధాన భాగాలు అమలు చేసుకోవాలి:**
- హీరో స్థానంలో నుండి లేజర్ వస్తువులను సృష్టించండి
- కీబోర్డ్ ఇన్‌పుట్‌ను హ్యాండిల్ చేసి లేజర్ సృష్టింపు ప్రారంభించండి
- లేజర్ కదలికను మరియు జీవ చక్రాన్ని నిర్వహించండి
- లేజర్ ప్రాజెక్టైల్స్ కోసం విజువల్ ప్రతినిధిత్వాన్ని అమలు చేయండి
## ఆగిపోనున్న కాలం నియంత్రణ అమలు
అంగీకరించని వేగంతో తుప్పు వేయడం గేమ్ ఇంజన్‌ను ఒత్తిడికి లోనుచేస్తుంది మరియు ఆటను చాలా సులభతరం చేస్తుంది. నిజమైన ఆయుధ వ్యవస్థలు కూడా అటువంటి పరిమితులను ఎదుర్కొంటాయి - USS ఎంటర్‌ప్రైజ్ ఫేసర్స్ కు కాలం అవసరం ఉండేది ప్రతి షాట్ గడిచిన తర్వాత.
మనము అవకాశాలను తగ్గించే కూల్డౌన్ సిస్టమ్ అమలు చేస్తాము, ఇది తుప్పు వేయడంలో వేగాన్ని తగ్గిస్తుంటూ స్పందనాత్మక నియంత్రణలను కాపాడుతుంది:
```mermaid
sequenceDiagram
participant Player
participant Weapon
participant Cooldown
participant Game
Player->>Weapon: స్పేస్‌ బార్ నొక్కండి
Weapon->>Cooldown: చల్లగా ఉందా చెక్ చేయండి
alt ఆయుధం సిద్ధంగా ఉంది
Cooldown->>Weapon: cool = true
Weapon->>Game: లేజర్ సృష్టించండి
Weapon->>Cooldown: కొత్త cooldown ప్రారంభించండి
Cooldown->>Cooldown: cool = false
Note over Cooldown: 500ms వేచి ఉండండి
Cooldown->>Cooldown: cool = true
else ఆయుధం చల్లబడుతోంది
Cooldown->>Weapon: cool = false
Weapon->>Player: చర్య లేదు
end
```
```javascript
class Cooldown {
constructor(time) {
this.cool = false;
setTimeout(() => {
this.cool = true;
}, time);
}
}
class Weapon {
constructor() {
this.cooldown = null;
}
fire() {
if (!this.cooldown || this.cooldown.cool) {
// లేజర్ ప్రాజెక్టైల్ తయారు చేయండి
this.cooldown = new Cooldown(500);
} else {
// ఆయుధం ఇంకా కూలింగ్ అవుతుంది
}
}
}
```
**కూల్డౌన్ పని విధానం:**
- సృష్టించినప్పుడు, ఆయుధం "హాట్" (ఇప్పుడే తుప్పు వేయడం వీల్గా లేదు)
- టైమౌట్ తర్వాత, అది "కూల్" అవుతుంది (తుప్పుకు సిద్దంగా ఉంటుంది)
- తుప్పు వేయక ముందు, "ఏయే ఆయుధం కూల్ గా ఉందా?" అని తనిఖీ చేస్తాం
- ఇది తుప్పులను శీఘ్ర నిడివిలో ఉపయోగించకుండా చేస్తుంది కాని నియంత్రణల్ని స్పందన చేయగలిగేలా ఉంచుతుంది
✅ స్పేస్ గేమ్ పరంపరలో పాఠం 1 ను మరోసారి నోటీసు చేసుకోండి, కూల్డౌన్ల గురించి గుర్తు చేసుకోవడానికి.
## ఢీకి వ్యవస్థను నిర్మించడం
మీ ఇప్పటికే ఉన్న స్పేస్ గేమ్ కోడ్‌ను పొడిగించి ఢీకి గుర్తింపు వ్యవస్థను సృష్టిస్తారు. అంతర్జాతీయ అంతరిక్ష స్టేషన్ ఢీకి నివారణ వ్యవస్థల లాగా, మీ గేమ్ వస్తువుల స్థానాలను నిరంతరం పర్యవేక్షించి అసంక్రమణలను గుర్తించి స్పందిస్తుంది.
మీ పూర్వ పాఠాల కోడ్ నుండి ప్రారంభించి, వస్తువుల పరస్పర చర్యలను నియంత్రించే చట్టాలతో ఢీకి గుర్తింపు జోడిస్తారు.
> 💡 **ప్రో చిట్కా**: లేజర్ స్ప్రైట్ ఇప్పటికే మీ ఆసెట్ ఫోల్డర్‌లో ఉంది మరియు మీ కోడ్‌లో సూచించబడింది, అమలుకు సిద్ధంగా ఉంది.
### అమలు చేయవలసిన ఢీకి నియమాలు
**గేమ్ యాంత్రికతలకు జోడించవలసినవి:**
1. **లేజర్ శత్రువు‌ను తగిలిస్తే**: లేజర్ ప్రాజెక్టైల్ తగిలిపోవడంవల్ల శత్రువు వస్తువు నాశనం అవుతుంది
2. **లేజర్ తెర అంచుకు తగిలితే**: తెరపై పై అంచునకు చేరుకున్నప్పుడు లేజర్ తొలగించబడుతుంది
3. **శత్రువు మరియు హీరో ఢీకి**: పరస్పరం తగిలితే రెండు వస్తువులు నాశనం చేస్తాయి
4. **శత్రువు తెర దిగువకు చేరితే**: శత్రువులు తెర క్రిందకి చేరినప్పుడు గేమ్ ముగిసింది కారెక్కుతుందని భావిస్తాం
### 🔄 **బోధనా తనిఖీ**
**ఢీకి గుర్తింపు పునాది**: అమలు ముందు, ఈ విషయాలు అర్థం చేసుకోండి:
- ✅ చతురస్ర సరిహద్దులు ఢీకులను ఎలా నిర్వచిస్తాయి
- ✅ కారణంగా విడిపోవడం పరీక్షించడం అసంఖ్య పద్ధతిని ఎందుకు మెరుగుపరుస్తుంది
- ✅ గేమ్ లూప్‌లో వస్తువు జీవ చక్రం నిర్వహణ ముఖ్యత
- ✅ ఘటన-ఆధారిత వ్యవస్థల ద్వారా ఢీకి స్పందనలు ఎలా సమన్వయింపబడతాయి
**తక్షణ స్వీయ పరీక్ష**: మీరు వస్తువులను వెంటనే తొలగిస్తే ఏమి జరుగుతుంది?
*పలుకు: మధ్యలో తొలగిస్తే క్రాష్‌లు వస్తాయి లేదా లూప్‌లో వస్తువులు మిస్ కావచ్చు*
**భౌతిక శాస్త్ర అవగాహన**: ఈ విషయాలు మీరు గ్రహించాలి:
- **కోఆర్డినేట్ వ్యవస్థలు**: స్థానాలు మరియు పరిమాణాలు సరిహద్దులను ఎలా సృష్టిస్తాయి
- **అసంక్రమణ తాత్త్వికత**: ఢీకి గుర్తింపుకు గణిత సూత్రాలు
- **స్థితిగతిగ వృద్ధి**: వాస్తవసమయ వ్యవస్థల్లో సమర్థ అల్గోరిథమ్ల ప్రాముఖ్యత
- **స్మృతి నిర్వహణ**: సురక్షితంగా వస్తువులను నిర్వహించే విధానాలు
## మీ అభివృద్ధి వాతావరణాన్ని సెట్ చేయడం
సంతోషకరం - మేము మీకు చాలా ప్రాథమిక పని సిద్ధం చేశాము! మీ గేమ్ ఆసెట్లన్నీ మరియు ప్రాథమిక నిర్మాణం `your-work` ఉపఫోల్డర్‌లో ఉంది, మీరు చల్లని ఢీకి లక్షణాలను జోడించండి.
### ప్రాజెక్ట్ నిర్మాణం
```bash
-| assets
-| enemyShip.png
-| player.png
-| laserRed.png
-| index.html
-| app.js
-| package.json
```
**ఫైల్ నిర్మాణాన్ని అర్థం చేసుకోండి:**
- గేమ్ వస్తువులకు అవసరమైన అన్ని స్ప్రైట్ చిత్రాలు ఉన్నాయి
- ప్రధాన HTML డాక్యుమెంట్ మరియు జావాస్క్రిప్ట్ అప్లికేషన్ ఫైల్‌ను కూడా కలిగి ఉంది
- స్థానిక అభివృద్ధి సర్వర్ కొరకు ప్యాకేజ్ కాన్ఫిగరేషన్ అందిస్తుంది
### అభివృద్ధి సర్వర్ ప్రారంభించడం
మీ ప్రాజెక్ట్ ఫోల్డర్ కి వెళ్లి స్థానిక సర్వర్ ప్రారంభించండి:
```bash
cd your-work
npm start
```
**ఈ ఆదేశం క్రమం:**
- మీ పని ప్రాజెక్ట్ ఫోల్డర్ కు మారుతుంది
- `http://localhost:5000` వద్ద లోకల్ HTTP సర్వర్ ప్రారంభిస్తుంది
- గేమ్ ఫైల్స్ ని పరీక్ష మరియు అభివృద్ధి కోసం అందిస్తుంది
- లైవ్ అభివృద్ధితో ఆటోమాటిక్ రీలోడింగ్ యాక్టివేట్ చేస్తుంది
మీ బ్రౌజర్‌ను తెరిచి `http://localhost:5000` కి వెళ్ళి మీ ప్రస్తుత గేమ్ స్థితిని హీరో మరియు శత్రువులతో స్క్రీన్ పై చూడండి.
### దశల వారీ అమలు
NASA వాయేజర్ అంతరిక్షయాన ప్రోగ్రామ్ చేసిన విధంగా, మనము ఢీకి గుర్తింపును సistemా లోగడ మెట్టెల వారీగా అమలు చేద్దాము.
```mermaid
flowchart TD
A["1. చతురస్ర పరిమితులు"] --> B["2. ఆవర్తన గుర్తింపు"]
B --> C["3. లేజర్ వ్యవస్థ"]
C --> D["4. ఈవెంట్ హ్యాండ్లింగ్"]
D --> E["5. ఢీకొనడం నియమాలు"]
E --> F["6. కూల్డౌన్ వ్యవస్థ"]
G["వస్తువు సరిహద్దులు"] --> A
H["భౌతిక శాస్త్ర అల్గోరిథమ్"] --> B
I["ప్రాజెక్టైల్ సృష్టి"] --> C
J["కీబోర్డ్ ఇన్‌పుట్"] --> D
K["గేమ్ లాజిక్"] --> E
L["రేట్ పరిమితి"] --> F
F --> M["🎮 పూర్తి గేమ్"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
style M fill:#e1f5fe
```
#### 1. చతురస్ర ఢీకి సరిహద్దులను జోడించడం
ముందుగా, మన గేమ్ వస్తువులకు వారి సరిహద్దులను ఎలా వివరించాలో నేర్పుదాం. ఇది మీ `GameObject` తరగతికి జోడించండి:
```javascript
rectFromGameObject() {
return {
top: this.y,
left: this.x,
bottom: this.y + this.height,
right: this.x + this.width,
};
}
```
**ఈ విధానం చేస్తుంది:**
- ఖచ్చితమైన సరిహద్దు కోఆర్డినేట్లతో ఒక చతురస్రం వస్తువు సృష్టిస్తుంది
- స్థానానికి ఎత్తు, వెడల్పు జోడించి దిగువ మరియు కుడి అంచులను లెక్కిస్తుంది
- ఢీకి గుర్తింపు అల్గోరిథమ్ల కోసం సిద్ధంగా ఉన్న వస్తువు అందిస్తుంది
- ప్రతి గేమ్ వస్తువుకు ప్రామాణిక ఇంటర్‌ఫేస్ అందిస్తుంది
#### 2. అసంక్రమణ గుర్తింపును అమలు చేయండి
ఇప్పుడు మన ఢీకి గూఢచర్యకర్తను సృష్టిద్దాం - రెండు చతురస్రాలు ఒక ఏర్పాటులో ఉన్నాయా లేమో చెబుతుంటే ఫంక్షన్:
```javascript
function intersectRect(r1, r2) {
return !(
r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top
);
}
```
**ఈ అల్గోరిథం పని విధానం:**
- చతురస్రాల మధ్య నాలుగు విడిపోయే పరిస్థితులను పరీక్షిస్తుంది
- ఏదైనా విడిపోవడం నిజమైతే `false` ను ఇవ్వాలి
- విడిపోవడం లేకపోతే ఢీకి ఉన్నది అనిపిస్తుంది
- సమర్థవంతమైన అసంక్రమణ పరీక్షకై వ్యతిరేకత తర్కాన్ని ఉపయోగిస్తుంది
#### 3. లేజర్ తుప్పు వ్యవస్థను అమలు చేయండి
ఇక్కడ అన్ని ఉత్తేజకర అంశాలు వస్తున్నాయి! మనము లేజర్ తుప్పు వ్యవస్థను సెట్ చేద్దాము.
##### సందేశ స్థిరాంకాలు
మొదట, గేమ్ భాగాలు పరస్పరం మాట్లాడటానికి సందేశ రకాలను నిర్వచిద్దాం:
```javascript
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
```
**ఈ స్థిరాంకాలు అందించడం:**
- అప్లికేషన్ అంతటా ఈవెంట్ పేర్లను ప్రమాణీకరిస్తాయి
- గేమ్ వ్యవస్థల మధ్య సుస్పష్ట కమ్యూనికేషన్ కోసం వీలు కలిగిస్తాయి
- ఈవెంట్ హ్యాండ్లర్ రిజిస్ట్రేషన్‌లో తప్పులను నివారిస్తాయి
##### కీబోర్డ్ ఇన్‌పుట్ నిర్వహణ
మీ కీ ఈవెంట్ లిసనర్‌కు స్పేస్ కీ గుర్తింపును జోడించండి:
```javascript
} else if(evt.keyCode === 32) {
eventEmitter.emit(Messages.KEY_EVENT_SPACE);
}
```
**ఈ ఇన్‌పుట్ హ్యాండ్లర్:**
- keyCode 32 ఉపయోగించి స్పేస్ కీ నొక్కినట్లు గుర్తిస్తుంది
- ప్రమాణీకృత ఈవెంట్ సందేశాన్ని ఉత్పత్తి చేస్తుంది
- వేరే భాగాల నుండి సంక్లిష్ట తుప్పు నియంత్రణని సాధ్యం చేస్తుంది
##### ఈవెంట్ లిసనర్ సెట్ చేసుకోవడం
మీ `initGame()` ఫంక్షన్‌లో తుప్పు ప్రవర్తనను నమోదు చేయండి:
```javascript
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
if (hero.canFire()) {
hero.fire();
}
});
```
**ఈ ఈవెంట్ లిసనర్:**
- స్పేస్ కీ ఈవెంట్లకు స్పందిస్తుంది
- తుప్పు వేయడానికి కూల్డౌన్ స్థితిని తనిఖీ చేస్తుంది
- అనుమతిస్తే లేజర్ సృష్టిని ప్రారంభిస్తుంది
లేజర్-శత్రువు ఢీకి నిర్వహణ జోడించండి:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
first.dead = true;
second.dead = true;
});
```
**ఈ ఢీకి హ్యాండ్లర్:**
- రెండూ వస్తువుల డేటాను సహా ఢీకి ఈవెంట్‌ను అందుకుంటుంది
- రెండు వస్తువులను తొలగింపకు గుర్తిస్తుంది
- ఢీకి తర్వాత సరైన శుభ్రతని యెక్కిస్తుంది
#### 4. లేజర్ తరగతిని సృష్టించండి
పైనకి కదులుతున్న, తాను జీవ చక్రాన్ని నిర్వహించే లేజర్ ప్రాజెక్టైల్‌ను అమలుచేయండి:
```javascript
class Laser extends GameObject {
constructor(x, y) {
super(x, y);
this.width = 9;
this.height = 33;
this.type = 'Laser';
this.img = laserImg;
let id = setInterval(() => {
if (this.y > 0) {
this.y -= 15;
} else {
this.dead = true;
clearInterval(id);
}
}, 100);
}
}
```
**ఈ తరగతి అమలు:**
- GameObject ను విస్తృతం చేస్తూ ప్రాథమిక ఫంక్షనాలిటీని పొందుతుంది
- లేజర్ స్ప్రైట్‌కు తగిన పరిమాణాలను సెట్ చేస్తుంది
- `setInterval()` ఉపయోగించి ఆటోమేటిక్ పైనకి కదిలే కదలికను సృష్టిస్తుంది
- తెరపై పై అంచుకు చేరినపుడు తానే తనను తానే ధ్వంసం చేసుకుంటుంది
- తన యానిమేషన్ సమయాన్ని మరియు శుభ్రతను నిర్వహిస్తుంది
#### 5. ఢీకి గుర్తింపు వ్యవస్థను అమలు చేయండి
సమగ్ర ఢీకి గుర్తింపు ఫంక్షన్ సృష్టించండి:
```javascript
function updateGameObjects() {
const enemies = gameObjects.filter(go => go.type === 'Enemy');
const lasers = gameObjects.filter(go => go.type === "Laser");
// లేజర్-శత్రు ఢీంకులకు పరీక్షించండి
lasers.forEach((laser) => {
enemies.forEach((enemy) => {
if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
first: laser,
second: enemy,
});
}
});
});
// ధ్వంసమైన వస్తువులను తీసివేయండి
gameObjects = gameObjects.filter(go => !go.dead);
}
```
**ఈ ఢీకి వ్యవస్థ:**
- పరీక్ష కోసం గేమ్ వస్తువులను రకం ప్రకారం ఫిల్టర్ చేస్తుంది
- ప్రతి లేజర్‌ ను ప్రతి శత్రువు పై పరీక్షించి అసంక్రమణలను గుర్తిస్తుంది
- అసంక్రమణలు గుర్తించినపుడు ఢీకి ఈవెంట్లను ఉత్పత్తి చేస్తుంది
- ఢీకి సంచాలన తర్వాత ధ్వంసిత వస్తువులను శుభ్రం చేస్తుంది
> ⚠️ **ముఖ్యము**: `updateGameObjects()`ని మీ ప్రధాన గేమ్ లూపులో `window.onload` లో జోడించండి, ఇది ఢీకి గుర్తింపునకు అనుమతిస్తుంది.
#### 6. హీరో క్లాస్‌లో కూల్డౌన్ వ్యవస్థను జోడించండి
ఫైరింగ్ యాంత్రికతను మరియు వేగ పరిమితిని ఉన్న హీరో క్లాస్‌ను మెరుగు పరచండి:
```javascript
class Hero extends GameObject {
constructor(x, y) {
super(x, y);
this.width = 99;
this.height = 75;
this.type = "Hero";
this.speed = { x: 0, y: 0 };
this.cooldown = 0;
}
fire() {
gameObjects.push(new Laser(this.x + 45, this.y - 10));
this.cooldown = 500;
let id = setInterval(() => {
if (this.cooldown > 0) {
this.cooldown -= 100;
} else {
clearInterval(id);
}
}, 200);
}
canFire() {
return this.cooldown === 0;
}
}
```
**మరింత మెరుగైన హీరో క్లాస్ అర్థం:**
- ప్రారంభంలో కూల్డౌన్ టైమర్‌ను సున్నా గా (తుప్పుకు సిద్దంగా) సెట్ చేస్తుంది
- హీరో నౌక స్ధానానికి పైభాగంలో లేజర్లు సృష్టిస్తుంది
- త్వరిత తుప్పుకు నిరోధం కొరకు కూల్డౌన్ సమయాన్ని సెట్ చేస్తుంది
- ఇంటర్వల్ ఆధారిత నవీకరణలతో కూల్డౌన్ టైమర్‌ను తగ్గిస్తుంది
- `canFire()` విధానం ద్వారా తుప్పు వేయడంలో స్థితిని ఇస్తుంది
### 🔄 **బోధనా తనిఖీ**
**సistem పూర్తి అవగాహన**: ఢీకి వ్యవస్థపై మీ పట్టు:
- ✅ చతురస్ర సరిహద్దులు సమర్థ ఢీకి గుర్తింపును ఎలా సాధిస్తాయి?
- ✅ వస్తువు జీవ చక్ర నిర్వహణ గేమ్ స్థిరత్వానికి ఎందుకు ముఖ్యము?
- ✅ కూల్డౌన్ వ్యవస్థ పనితీరును ఎలా నిలిపివేస్తుంది?
- ✅ సంఘటన ఆధారిత ఆర్కిటెక్చర్ ఢీకి నిర్వహణలో ఎటువంటి పాత్ర కలిగి ఉంది?
**సистем్ సమాఖ్య**: మీ ఢీకి గుర్తింపు చూపిస్తుంది:
- **గణిత ఖచ్చితత్వం**: చతురస్ర అసంక్రమణ అల్గోరిథమ్లు
- **దక్షత పెంపు**: సమర్థ ఢీకి పరీక్ష నమూనాలు
- **స్మృతి నిర్వహణ**: సురక్షిత వస్తువు సృష్టి మరియు నాశనం
- **ఈవెంట్ సమన్వయం**: వేరొకరితో వ్యవస్థ కమ్యూనికేషన్
- **వాస్తవసమయ ప్రాసెసింగ్**: ఫ్రేమ్ నవీకరణ చక్రాలు
**వృత్తిపరమైన నమూనాలు**: మీరు అమలుచేసారు:
- **జాగ్రత్త విభజన**: భౌతిక శాస్త్రం, దృశ్యీకరణ, ఇన్‌పుట్ వేరుగా ఉంచడం
- **ఆబ్జెక్ట్-ఓరియెంటెడ్ డిజైన్**: వారసత్వం మరియు పాళిమార్ఫిజం
- **స్థితి నిర్వహణ**: వస్తువు జీవ చక్రం మరియు గేమ్ స్థితి ట్రాకింగ్
- **దక్షత సాంకేతికత**: వాస్తవసమయ వినియోగానికి సమర్థ అల్గోరిథమ్లు
### మీ అమలుని పరీక్షించడం
మీ స్పేస్ గేమ్ ఇప్పుడు పూర్తి ఢీకి గుర్తింపు మరియు యుద్ధ యాంత్రికత కలిగి ఉంది. 🚀 ఈ కొత్త సామర్థ్యాలను పరీక్షించండి:
- గమనించడానికి ఆనకీలు ఉపయోగించి కదిలండి
- స్పేస్‌బార్ తో లేజర్ తుప్పండి - కూల్డౌన్ స్పామ్ తగ్గింపును గమనించండి
- లేజర్లు శత్రువులు తగిలినప్పుడు ఢీకి గమనించి తొలగింపును సమీక్షించండి
- నాశనం పొందిన వస్తువులు గేమ్ నుండి తొలగబడుతున్నప్పుడు పరిశీలించండి
మీరు విజయవంతంగా ఢీకి గుర్తింపు వ్యవస్థను అమలు చేశారని గుర్తించండి, ఇది అంతరిక్ష నావిగేషన్ మరియు రొబోటిక్స్‌ను మార్గనిర్దేశం చేసే అదే గణిత సూత్రాలు ఉపయోగిస్తుంది.
### ⚡ **తరువాతి 5 నిమిషాల్లో మీరు చేయగలిగేది**
- [ ] డెవ్‌టూల్స్‌లో మీ ఢీకి గుర్తింపు ఫంక్షన్‌లో బ్రేక్ పాయింట్లను సెట్ చేయండి
- [ ] లేజర్ వేగం లేదా శత్రువు కదలికను మార్చి ఢీకి ప్రభావాలను చూడండి
- [ ] తుప్పు వేయుటకు వేర్వేరు కూల్డౌన్ విలువలతో ప్రయోగం చేయండి
- [ ] సన్నికిత సంఘటనలను ప్రత్యక్షంగా ట్రాక్ చేయడానికి `console.log` స్టేట్మెంట్లను జోడించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది ఏమిటి**
- [ ] పాఠం తర్వాత క్విజ్ పూర్తి చేసి సన్నికిత గుర్తింపు అల్గోరిథంలను అర్థం చేసుకోవడం
- [ ] సన్నికిత సందర్భంగా పేలుడు వంటి విజువల్ ప్రభావాలను జోడించడం
- [ ] విభిన్న గుణ లక్షణాలతో వివిధ రకాల ప్రాజెక్టైళ్లను అమలు చేయడం
- [ ] ఆటగాడి సామర్థ్యాలను తాత్కాలికంగా మెరుగుపరచే పవర్-అప్స్ సృష్టించడం
- [ ] సన్నికితలకు మరింత సంతృప్తిదాయకంగా ఉండే శబ్దప్రభావాలను జోడించడం
### 📅 **మీ వారాంతం ఫిజిక్స్ ప్రోగ్రామింగ్**
- [ ] మెరుగైన సన్నికిత వ్యవస్థలతో పూర్తి స్పేస్ గేమ్ పూర్తి చేయండి
- [ ] చతురస్రాలని దాటించి అధునాతన సన్నికిత ఆకృతులను అమలు చేయడం (వృత్తాలు, బహుచతురస్రాలు)
- [ ] వాస్తవిక పేలుడు ప్రభావాలకు పార్టికల్ సిస్టమ్స్ జోడించడం
- [ ] సన్నికిత నివారణతో సంక్లిష్ట శత్రువు ప్రవర్తనను సృష్టించడం
- [ ] అనేక వస్తువులతో మెరుగైన పనితనానికి సన్నికిత గుర్తింపును ఆప్టిమైజ్ చేయడం
- [ ] త్వరణం మరియు వాస్తవిక ఉద్యమంలాంటి ఫిజిక్స్ సిమ్యులేషన్ ను జోడించడం
### 🌟 **మీ నెలరోజుల గేమ్ ఫిజిక్స్ నైపుణ్యం**
- [ ] అధునాతన ఫిజిక్స్ ఇంజన్లతో మరియు వాస్తవిక సిమ్యులేషన్లతో గేమ్ లను నిర్మించడం
- [ ] 3D సన్నికిత గుర్తింపు మరియు స్పేషియల్ పార్టిషనింగ్ అల్గోరిథంలను నేర్చుకోవడం
- [ ] ఓపెన్ సోర్స్ ఫిజిక్స్ లైబ్రరీలు మరియు గేమ్ ఇంజన్లలో సహకరించడం
- [ ] గ్రాఫిక్స్-భారతమైన అప్లికేషన్లకు పనితన ఆప్టిమైజేషన్‌లో నైపుణ్యం సాధించడం
- [ ] గేమ్ ఫిజిక్స్ మరియు సన్నికిత గుర్తింపు గురించి విద్యా విషయాలు సృష్టించడం
- [ ] అధునాతన ఫిజిక్స్ ప్రోగ్రామింగ్ నైపుణ్యాలతో పోర్ట్ఫోలియో నిర్మించడం
## 🎯 మీ సన్నికిత గుర్తింపు నైపుణ్య సమయం
```mermaid
timeline
title Collision Detection & Game Physics Learning Progression
section Foundatiion (10 minutes)
Rectangle Math: కోఆర్డినేట్ సిస్టమ్స్
: సరిహద్దుల లెక్కలు
: స్థాన ట్రాకింగ్
: పరిమాణ నిర్వహణ
section Algorithm Design (20 minutes)
Intersection Logic: విడగొట్టడం పరీక్ష
: ఓవర్లాప్ గుర్తింపు
: పనితీరు మెరుగుపరచడం
: ఎడ్జ్ కేస్ నిర్వహణ
section Game Implementation (30 minutes)
Object Systems: జీవ చక్ర నిర్వహణ
: ఈవెంట్ సమన్వయం
: స్థాయి ట్రాకింగ్
: మెమొరీ క్లీన్-అప్
section Interactive Features (40 minutes)
Combat Mechanics: ప్రాజెక్టైల్ సిస్టమ్స్
: ఆయుధ కొలమానాలు
: నష్టం లెక్కింపు
: దృశ్య స్పందన
section Advanced Physics (50 minutes)
Real-time Systems: ఫ్రేమ్ రేట్ ఆప్టిమైజేషన్
: స్థల విభజన
: సంభటన స్పందన
: ఫిజిక్స్ సిమ్యులేషన్
section Professional Techniques (1 week)
Game Engine Concepts: కాంపోనెంట్ సిస్టమ్స్
: ఫిజిక్స్ పైప్‌లైన్స్
: పనితీరు ప్రొఫైలింగ్
: క్రాస్-ప్లాట్ఫార్మ్ ఆప్టిమైజేషన్
section Industry Applications (1 month)
Production Skills: పెద్ద ఎత్తున ఆప్టిమైజేషన్
: జట్టు సహకారం
: ఇంజిన్ అభివృద్ధి
: ప్లాట్ఫార్మ్ విడుదల
```
### 🛠️ మీ గేమ్ ఫిజిక్స్ టూల్‌కిట్ సారాంశం
ఈ పాఠం పూర్తి చేసిన తరువాత, మీరు నాకు పూర్తి వచ్చారు:
- **సన్నికిత గణితం**: చతురస్ర క్రాస్‌చెక్ అల్గోరిథమ్స్ మరియు కోఆర్డినేట్ సిస్టమ్స్
- **పనితన ఆప్టిమైజేషన్**: ప్రత్యక్ష అప్లికేషన్ల కోసం సమయానుగుణ సన్నికిత గుర్తింపు సామర్థ్యం
- **వస్తువు జీవితచక్ర నిర్వహణ**: సురక్షితమైన సృష్టి, నవీకరణ మరియు ధ్వంసం నమూనాలు
- **సంఘటన ఆధారిత నిర్మాణం**: సన్నికిత ప్రతిస్పందన కొరకు డీకపుల్ చేసిన వ్యవస్థలు
- **గేమ్ లూప్ సమ్మేళనం**: ఫ్రేమ్ ఆధారిత ఫిజిక్స్ నవీకరణలు మరియు రెండరింగ్ సమన్వయం
- **ఇన్‌పుట్ సిస్టమ్స్**: స్పందనాత్మక నియంత్రణలు రేటు పరిమితి మరియు అభిప్రాయం తో
- **మెమరీ నిర్వహణ**: సమర్థవంతమైన వస్తువు పూలింగ్ మరియు శుభ్రపరిచే వ్యూహాలు
**వాస్తవ ప్రపంచ అప్లికేషన్లు**: మీ సన్నికిత గుర్తింపు నైపుణ్యాలు నేరుగా వర్తిస్తాయి:
- **ఇంటరాక్టివ్ సిమ్యులేషన్లు**: శాస్త్రీయ నమూనాలు మరియు విద్యా ఉపకరణాలు
- **వినియోగదార ఇన్ఫర్‌ఫేస్ డిజైన్**: డ్రాగ్-అండ్-డ్రాప్ మరియు టచ్ గుర్తింపు
- **డేటా విజువలైజేషన్**: ఇంటరాక్టివ్ చార్టులు మరియు క్లిక్ చేయదగిన అంశాలు
- **మొబైల్ డెవలప్‌మెంట్**: టచ్ జెస్చర్ గుర్తింపు మరియు సన్నికిత నిర్వహణ
- **రోబోటిక్స్ ప్రోగ్రామింగ్**: మార్గ ప్రణాళిక మరియు ఆటంక నివారణ
- **కంప్యూటర్ గ్రాఫిక్స్**: రే ట్రేసింగ్ మరియు స్థల అల్గోరిథంలు
**వృత్తిపరమైన నైపుణ్యాలు పొందినవి**: మీరు ఇప్పుడే చేయగలరు:
- **డిజైన్** సమయానుగుణ సన్నికిత గుర్తింపుకు సమర్థమైన అల్గోరిథంలు
- **అంశాల సంక్లిష్టతతో మరింత స్కేల్ అయ్యే ఫిజిక్స్ సిస్టమ్స్ అమలు
- **సాంకేతిక - గణిత సూత్రాలతో సంక్లిష్ట పరస్పర వ్యవస్థలను డీబగ్ చేయండి
- **వివిధ హార్డ్వేర్ మరియు బ్రౌజర్ సామర్థ్యాలకు పనితనాన్ని ఆప్టిమైజ్ చేయండి
- **ఆర్కిటెక్చర్** నిరూపిత డిజైన్ నమూనాలతో నిర్వహించదగిన గేమ్ వ్యవస్థలు
**గేమ్ డెవలప్‌మెంట్ కాన్సెప్ట్లు నేర్చుకున్నవి**:
- **ఫిజిక్స్ సిమ్యులేషన్**: ప్రత్యక్ష సన్నికిత గుర్తింపు మరియు స్పందన
- **పనితన ఇంజనీరింగ్**: ఇంటరాక్టివ్ అప్లికేషన్లకు ఆప్టిమైజ్ చేసిన అల్గోరిథమ్స్
- **సంఘటన వ్యవస్థలు**: గేమ్ భాగాల మధ్య డీకపుల్ చేసిన కమ్యూనికేషన్
- **వస్తువు నిర్వహణ**: గతి చెందిన విషయాల కోసం సమర్థవంతమైన జీవిత చక్ర నమూనాలు
- **ఇన్‌పుట్ హ్యాండ్లింగ్**: సరైన అభిప్రాయం తో స్పందనాత్మక నియంత్రణలు
**తరువాతి దశ**: మీరు Matter.js వంటి అధునాతన ఫిజిక్స్ ఇంజన్లను అన్వేషించడానికి, 3D సన్నికిత గుర్తింపును అమలు చేయడానికి లేదా సంక్లిష్ట పార్టికల్ సిస్టమ్స్ నిర్మించడానికి సిద్దంగా ఉన్నారు!
🌟 **సాఫల్యం సాధించారు**: మీరు వృత్తిపరమైన స్థాయి సన్నికిత గుర్తింపు కలిగిన పూర్తి ఫిజిక్స్ ఆధారిత ఇంటరాక్షన్ సిస్టమ్ ని నిర్మించారు!
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
క్రింది ఛాలెంజ్ పూర్తి చేయడానికి ఏజెంట్ మోడ్ ఉపయోగించండి:
**వివరణ:** హీరో నౌక ద్వారా సేకరించబడినప్పుడు తాత్కాలిక సామర్థ్యాలు కలిగిన పవర్-అప్స్ యాదృచ్ఛికంగా ఉత్పత్తి అయ్యేలా సన్నికిత గుర్తింపు వ్యవస్థను బలోపేతం చేయండి.
**ప్రాంప్ట్:** గేమ్‌ఆబ్జెక్ట్‌ని విస్తరించే PowerUp తరగతిని సృష్టించి, హీరో మరియు పవర్-అప్స్ మధ్య సన్నికిత గుర్తింపును అమలు చేయండి. కనీసం రెండు రకాల పవర్-అప్స్ జోడించండి: ఒకటి అగ్ని వేగాన్ని పెంచుతుందని (కూల్‌డౌన్ తగ్గిస్తుంది) మరియు మరొకటి తాత్కాలిక షీల్డ్ సృష్టిస్తుంది. యాదృచ్ఛిక మధ్యంతరాలు మరియు స్థానాలలో పవర్-అప్స్ సృష్టించే స్పాన్ లాజిక్ చేర్చండి.
---
## 🚀 ఛాలెంజ్
ఒక పేలుడు జోడించండి! గేమ్ ఆసెట్‌లను [the Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt)లో చూడండి మరియు లేజర్ ఒక ఎలియన్‌ను తాకినప్పుడు పేలుడు జోడించడానికి ప్రయత్నించండి
## లెక్చర్ తర్వాత క్విజ్
[లెక్చర్ తర్వాత క్విజ్](https://ff-quizzes.netlify.app/web/quiz/36)
## సమీక్ష & స్వీయ అధ్యయనం
ఇప్పటి వరకు మీ గేమ్‌లో విరామాలను ప్రయోగించండి. వాటిని మార్చినప్పుడు ఏమి జరుగుతుంది? [JavaScript టైమింగ్ ఈవెంట్ల గురించి](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) మరింత చదవండి.
## అసైన్‌మెంట్
[సన్నికితలను అన్వేషించండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**త్యాగపత్రం**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించారు. మేము సరిగా ఉండేందుకు ప్రయత్నించినప్పటికీ, స్వయం క్రియ అనువాదాలలో లోపాలు లేదా అసత్యతలు ఉండే అవకాశం ఉంది. అసలు పత్రం దాని స్థానిక భాషలోనే ప్రామాణికమైన మూలాధారం కావాలి. అత్యవసర సమాచారం కోసం, నిపుణుల చేత మనవదానం సిఫార్సు చేయబడింది. ఈ అనువాదం వాడకం కారణంగా ఏమైన అవగాహన లోపాలు లేదా తప్పు అర్థగ్రహణలకు మేము బాధ్యులు కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

64
translations/te/6-space-game/4-collision-detection/assignment.md
Unescape View File

@ -0,0 +1,64 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "124efddbb65166cddb38075ad6dae324",
"translation_date": "2026-01-08T13:36:02+00:00",
"source_file": "6-space-game/4-collision-detection/assignment.md",
"language_code": "te"
}
-->
# ఢీక్కులు అన్వేషించండి
## సూచనలు
విభిన్న రకాల ఆబ్జెక్ట్ సంభాషణలను చూపించేందుకు మీ ఢీక్కు గుర్తింపు జ్ఞానాన్ని ఉపయోగించి ఒక సాంప్రదాయ మిని-గేమ్ సృష్టించండి. ఈ అసైన్‌మెంట్ సృజనాత్మక అమలుతో మరియు ప్రయోగంతో ఢీక్కు యాంత్రిక బోధనలను అర్థం చేసుకోవడంలో మీకు సహాయపడుతుంది.
### ప్రాజెక్ట్ అవసరాలు
**క్రింది వాటిని కలిగి ఉన్న ఒక చిన్న ఇంటరాక్టివ్ గేమ్ తయారు చేయండి:**
- **కీఫోర్డ్ లేదా మౌస్ ఇన్‌పుట్ ద్వారా నియంత్రించగల బహుళ చలన ఆబ్జెక్టులు**
- **పాఠ్యంలోని చతురస్ర సందర్షణ సిద్దాంతాలను ఉపయోగించి ఢీక్కు గుర్తింపు వ్యవస్థ**
- **ఢీక్కులు సంభవించినప్పుడు దృశ్యప్రతిస్పందన (ఆబ్జెక్ట్ ధ్వంసం, రంగుల మార్పులు, ప్రభావాలు)**
- **ఢీక్కులు అర్థవంతమయిన మరియు ఆకర్షణీయమైనవి చేసే గేమ్ నియమాలు**
### సృజనాత్మక సూచనలు
**ఈ దృశ్యాలలో ఒక్కటిని అమలు చేయడం గురించి పరిగణించండి:**
- **ఆస్టరాయిడ్ ఫీల్డ్**: ప్రమాదకర అంతరిక్ష శిఖరాల మధ్య ఒక నౌకను నడపండి
- **బంపర్ కార్లు**: భౌతిక ఆధారిత ఢీక్కు అరణ్యం సృష్టించండి
- **మీటియర్ రక్షణ**: భూమిని వస్తున్న అంతరిక్ష రాళ్ళ నుండి రక్షించండి
- **సేకరణ గేమ్**: అడ్డంకులను దాటుకొని వస్తువులను సేకరించండి
- **ప్రాంత నియంత్రణ**: స్థలాన్ని ఆక్రమించేందుకు పోటీ పడే ఆబ్జెక్టులు
### సాంకేతిక అమలు
**మీ పరిష్కారం కింద ఉన్నవి చూపించాలి:**
- చతురస్ర ఆధారిత ఢీక్కు గుర్తింపు సరైన వినియోగం
- వినియోగదారు ఇన్‌పుట్ కొరకు ఈవెంట్-డ్రివన్ ప్రోగ్రామింగ్
- ఆబ్జెక్ట్ జీవ చక్రం నిర్వహణ (సృష్టి మరియు ధ్వంసం)
- సరైన క్లాస్ నిర్మాణంతో సాఫీగా క్రమబద్దీకరించిన కోడ్
### బోనస్ సవాళ్లు
**మరిన్ని ఫీచర్లతో మీ గేమ్‌ను మెరుగుపరచండి:**
- ఢీక్కులు సంభవించినప్పుడు పార్టికల్ ప్రభావాలు
- వివిధ ఢీక్కు రకాల కొరకు శబ్ద ప్రభావాలు
- ఢీక్కు ఫలితాల ఆధారంగా స్కోరింగ్ వ్యవస్థ
- విభిన్న ప్రవర్తనలతో బహుళ ఢీక్కు రకాలు
- కాలంతో పెరుగుతున్న కఠినత స్థాయి
## రుబ్రిక్
| ప్రమాణాలు | ఉత్తమంగా | తగినంత | మెరుగుపరచాలి |
|----------|-----------|----------|-------------------|
| **ఢీక్కు గుర్తింపు** | బహుళ ఆబ్జెక్ట్ రకాలుతో మరియు జఠిల సంభాషణ నియమాలతో ఖచ్చితమైన చతురస్ర ఆధారిత ఢీక్కు గుర్తింపును అమలు చేస్తుంది | సాదారణ ఆబ్జెక్ట్ సంభాషణలతో ప్రాథమిక ఢీక్కు గుర్తింపు సరిగ్గా పనిచేస్తుంది | ఢీక్కు గుర్తింపులో సమస్యలు ఉన్నవి లేదా స్థిరంగా పనిచేయవు |
| **కోడ్ నాణ్యత** | సరైన క్లాస్ నిర్మాణంతో, అర్థవంతమైన వేరియబుల్ పేర్లతో, తగిన వ్యాఖ్యలతో శుభ్రమైన, బాగుగా గుండా నిర్వహించిన కోడ్ | కోడ్ పనిచేస్తుంది కానీ బాగా సక్రమీకరించబడలేదు లేదా దస్తావేజు చేయబడలేదు | కోడ్ అర్థం చేసుకోవడానికి కష్టం లేదా అనాaysුතු నిర్మాణం కలిగి ఉంది |
| **వినియోగదారు సంభాషణ** | సున్నితమైన నియంత్రణలతో, సాఫీ గేమ్‌ప్లే, స్పష్టమైన దృశ్య ప్రతిస్పందన మరియు ఆకర్షణీయ యాంత్రికతలు | ప్రాథమిక నియంత్రణలు సరైన ప్రతిస్పందనతో పనిచేస్తాయి | నియంత్రణలు స్పందనలేని లేదా గందరగోళంగా ఉన్నాయి |
| **సృజనాత్మకత** | ప్రత్యేక లక్షణాలు, దృశ్య పూర్ణత మరియు సృజనాత్మక ఢీక్కు ప్రవర్తనలతో అసలు ఆలోచన | కొన్ని సృజనాత్మక అంశాలతో ప్రామాణిక అమలు | సృజనాత్మక మెరుగుదలలില്ലిన ప్రాథమిక కార్యాచరణ |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్క్లెయిమర్**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువాదం చేశారు. మేము ఖచ్చితత కోసం ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో లోపాలు లేదా అసమతుల్యతలు ఉండే అవకాశముందని దయచేసి గమనించండి. స్వ ভাষలో ఉన్న అసలు పత్రమే అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం చేయించడం సిఫార్సు చేయబడింది. ఈ అనువాదం వాడకం నుండి ఉత్పన్నమయ్యే ఏవైనా అవగాహన లోపాలు లేదా తప్పుగా అర్థం చేసుకోవడాల పట్ల మేము బాధ్యులము కం.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

17
translations/te/6-space-game/4-collision-detection/solution/README.md
Unescape View File

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2026-01-08T14:59:54+00:00",
"source_file": "6-space-game/4-collision-detection/solution/README.md",
"language_code": "te"
}
-->
ఇది ఒక ప్లేస్‌హోల్డర్, ఉద్దేశపూర్వకంగా ఖాళీగా bırakబడింది
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ దస్త్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువదించారు. మేము ఖచ్చితత్వానికి శ్రద్ధగా ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో పొరపాట్లు లేదా లోపాలు ఉండవచ్చు. అసలు దస్త్రం దాని స్వదేశ భాషలోనే అత్యంత అధికారిక మూలం కాగా పరిగణించాలి. కీలక సమాచారానికి, వృత్తిపరమైన మానవ అనువాదం అవసరం. ఈ అనువాదం వలన కలిగే ఏవైనా అపవిప్రాయాలు లేదా తప్పైన అర్థం కోసం మేము బాధ్యులను కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

17
translations/te/6-space-game/4-collision-detection/your-work/README.md
Unescape View File

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2026-01-08T14:59:08+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/README.md",
"language_code": "te"
}
-->
ఇది ఒక ప్లేస్‌హోల్డర్, గురించి ఉద్దేశపూర్వకంగా ఖాళీగా bırakబడింది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస्वीరణ**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా తప్పుల болушే అవకాశం ఉంది. మూల భాషలోని అసలు పత్రాన్ని అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారానికి నిపుణుల చేత manu అనువాదం చేయించుకోవడం సిఫారసు చేయబడుతుంది. ఈ అనువాదం ఉపయోగపడే కారణంగా జరిగిన ఏవైనా తప్పుల గానీ, తప్ప అర్థం చేసుకోవడాల గానీ మా పక్షాన బాధ్యత తీసుకోబడదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

510
translations/te/6-space-game/5-keeping-score/README.md
Unescape View File

@ -0,0 +1,510 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "2ed9145a16cf576faa2a973dff84d099",
"translation_date": "2026-01-08T14:08:34+00:00",
"source_file": "6-space-game/5-keeping-score/README.md",
"language_code": "te"
}
-->
# ఒక స్పేస్ గేమ్‌ను నిర్మించండి భాగం 5: స్కోరింగ్ మరియు లైఫ్స్
```mermaid
journey
title మీ గేమ్ డిజైన్ ప్రయాణం
section ప్లేయర్ అభిప్రాయం
అంకెల మానసికతను అర్థం చేసుకొనడం: 3: Student
దృశ్య కమ్యూనికేషన్ నేర్చుకోండి: 4: Student
రివార్డ్ సిస్టమ్స్ రూపకల్పన: 4: Student
section సాంకేతిక అమలు
కాన్వాస్ టెక్స్ట్ రెండరింగ్: 4: Student
స్టేట్ నిర్వహణ: 5: Student
ఈవెంట్-చేరిన నవీకరణలు: 5: Student
section గేమ్ పాలిష్
వినియోగదారు అనుభవం డిజైన్: 5: Student
సవాలు మరియు బహుమతులను సుమతించడం: 5: Student
ఆసక్తికరమైన గేమ్ ప్లే రూపొందించండి: 5: Student
```
## ప్రీ-లెక్చర్ క్విజ్
[ప్రీ-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/37)
మీ స్పేస్ గేమ్ నిజమైన గేమ్‌లాగా అనిపించేలా చేయడానికి సిద్ధంగా ఉన్నారా? ఇది స్కోరింగ్ పాయింట్లు మరియు లైఫ్స్ నిర్వహణను జోడిద్దాం—ప్రాథమిక ఆట మెకానిక్స్, ఇది ప్రాథమిక ఆర్కేడ్ గేమ్స్ వంటి స్పేస్ ఇన్వేడర్స్‌లను సాదా ప్రదర్శనల నుండి వ్యసనపూర్వక వినోదంగా మార్చింది. ఇక్కడే మీ గేమ్ నిజంగా ఆడగలదిగా మారుతుంది.
```mermaid
mindmap
root((గేమ్ ఫీడ్‌బ్యాక్ సిస్టమ్స్))
Visual Communication
టెక్స్ట్ రిండరింగ్
చిహ్న ప్రదర్శన
రంగు మానసిక శాస్త్రం
లేఅవుట్ డిజైన్
Scoring Mechanics
పాయింట్ విలువలు
రివార్డ్ సమయం
పురోగతి ట్రాకింగ్
సాధన సిస్టమ్స్
Life Management
రిస్క్ వర్సెస్ రివార్డ్
ప్లేయర్ ఏజెన్సీ
కష్టతల సంతులనం
రికవరీ మెకానిక్స్
User Experience
తక్షణ ఫీడ్‌బ్యాక్
స్పష్టమైన సమాచారం
భావోద్వేగ ప్రతిస్పందన
ఎంగేజ్‌మెంట్ లూప్స్
Implementation
క్యాన్వాస్ API
స్టేట్ మేనేజ్‌మెంట్
ఈవెంట్ సిస్టమ్స్
పనితీరు
```
## స్క్రీన్ పై టెక్స్ట్ డ్రాయింగ్ - మీ గేమ్ యొక్క వోయిస్
మీ స్కోర్‌ను ప్రదర్శించడానికి, కేన్వాస్ పై టెక్స్ట్ ఎలా ఆకృతీకరించాలో నేర్చుకోవాలి. `fillText()` మెథడ్ మీ ప్రధాన సాధనం ఇది - స్కోర్స్, స్థితి సమాచారం చూపించడానికి క్లాసిక్ ఆర్కేడ్ గేమ్స్ ఉపయోగించిన అదే పద్ధతి.
```mermaid
flowchart LR
A["📝 పఠ్యపు విషయము"] --> B["🎨 శైలి"]
B --> C["📍 స్థానం నిర్ణయం"]
C --> D["🖼️ కేన్వాస్ ప్రదర్శన"]
E["ఫాంట్ కుటుంబం"] --> B
F["ఫాంట్ పరిమాణం"] --> B
G["రంగు"] --> B
H["సమమానం"] --> B
I["X సమన్వయం"] --> C
J["Y సమన్వయం"] --> C
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
```
మీ టెక్స్ట్ రంగురూపాన్ని పూర్తిగా నియంత్రించుకోవచ్చు:
```javascript
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);
```
✅ [కేన్వాస్ పై టెక్స్ట్ జోడించడం](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) లో మరింత లోతుగా దూకండి — ఫాంట్లు మరియు స్టైలింగ్‌తో మీరు ఎంత సృజనాత్మకంగా ఉండవచ్చో మీరు ఆశ్చర్యపడేరు!
## లైఫ్స్ - కేవలం సంఖ్య మాత్రమే కాదు
గేమ్ డిజైన్‌లో, "లైఫ్" అంటే ప్లేయర్ కు తప్పుల కోసం వచ్చిన అవకాశం. ఈ భావన పిన్బాల్ మెషీన్ల నుండి వచ్చింద, అక్కడ మీరు పలు బంతులు ఆడటానికి అందేవి. ప్రాథమిక వీడియో గేమ్స్ అయిన అస్టెరాయిడ్స్ వంటివి లో, లైఫ్స్ ప్లేయర్లకు ప్రమాదాలను తీసుకోవడానికి మరియు తప్పుల నుండి నేర్చుకోడానికి అనుమతి ఇచ్చేవి.
```mermaid
flowchart TD
A["🎮 ప్లేయర్ చర్య"] --> B{"రిస్క్ అంచనాలు"}
B --> C["ఎక్కువ ప్రమాదం, భారీ బహుమతి"]
B --> D["భద్రమైన వ్యూహం"]
C --> E{"ఫలితం"}
D --> F["స్థిర ప్రగతి"]
E -->|విజయం| G["🏆 పెద్ద పాయింట్లు"]
E -->|పోగొట్టు| H["💔 జీవితం కోల్పోవడం"]
H --> I{"జీవితాలు మిగిలి ఉన్నాయా?"}
I -->|అవును| J["🔄 మళ్ళీ ప్రయత్నించు"]
I -->|కాదు| K["💀 గేమ్ ముగిసింది"]
J --> B
G --> B
F --> B
style C fill:#ffebee
style D fill:#e8f5e8
style G fill:#e3f2fd
style H fill:#fff3e0
```
ప్రతీతి ప్రదర్శన చాలా ముఖ్యంగా ఉంటుంది - కేవలం "లైవ్స్: 3" అని చెప్పడం కంటే షిప్ ఐకాన్లను చూపించడం వెంటనే దృశ్య గుర్తింపును కల్పిస్తుంది, ఇదే విధంగా ప్రారంభ ఆర్కేడ్ క్యాబినెట్లు భాషా అడ్డంకులెక్కించేందుకు ఐకనోగ్రఫీ ఉపయోగించేవి.
## మీ గేమ్ యొక్క రివార్డు సిస్టమ్ నిర్మాణం
ఇప్పుడు మేము ఆటగాళ్లను ఆకట్టుకొనే ప్రాథమిక ఫీడ్‌బ్యాక్ సిస్టమ్స్‌ను అమలు చేయబోతున్నాము:
```mermaid
sequenceDiagram
participant Player
participant GameEngine
participant ScoreSystem
participant LifeSystem
participant Display
Player->>GameEngine: శత్రువు పైశించినాడు
GameEngine->>ScoreSystem: పాయింట్లు జీతంగా ఇవ్వండి
ScoreSystem->>ScoreSystem: +100 పాయింట్లు
ScoreSystem->>Display: స్కోర్‌ని నవీకరించండి
Player->>GameEngine: శత్రువుతో 충돌నిచ్చాడు
GameEngine->>LifeSystem: జీవితం కోల్పోండి
LifeSystem->>LifeSystem: -1 జీవితం
LifeSystem->>Display: జీవితం నవీకరించండి
alt Lives > 0
LifeSystem->>Player: ఆడటం కొనసాగించు
else Lives = 0
LifeSystem->>GameEngine: ఆట ముగిసింది
end
```
- **స్కోరింగ్ సిస్టమ్**: ప్రతీ ధ్వంసమైన శత్రు నౌక 100 పాయింట్లు అందిస్తుంది (మూర్ఖ సంఖ్యలు ప్లేయర్లకు మానసికంగా లెక్కించడానికి సులభం). స్కోర్ కింద ఎడమ మూలలో ప్రదర్శించబడుతుంది.
- **లైఫ్ కౌంటర్**: మీ హీరో మూడు లైఫ్స్‌తో ప్రారంభమవుతాడు—ఇది ప్రాథమిక ఆర్కేడ్ గేమ్స్ ద్వారా స్తాపించబడిన ప్రమాణం, ఇది సవాలు మరియు ఆడగలిగే సామర్థ్యాన్ని సమతుల్యం చేస్తుంది. శత్రు తో ప్రతి ఢీ కొట్టు ఒక లైఫ్‌ను తగ్గిస్తుంది. మిగిలిన లైఫ్స్ కుడి కింద షిప్ ఐకాన్లతో చూపిస్తాము ![life image](../../../../translated_images/life.6fb9f50d53ee0413.te.png).
## మొదలు చేద్దాం!
ముందుగా, మీ వర్క్‌స్పేస్ సెట్ చేయండి. మీ `your-work` సబ్ ఫోల్డర్‌లోని ఫైళ్లకు వెళ్లండి. మీరు ఈ ఫైల్స్ చూడాలి:
```bash
-| assets
-| enemyShip.png
-| player.png
-| laserRed.png
-| index.html
-| app.js
-| package.json
```
మీ గేమ్‌ను పరీక్షించడానికి, `your_work` ఫోల్డర్ నుండి డెవలప్‌మెంట్ సర్వర్‌ను ప్రారంభించండి:
```bash
cd your-work
npm start
```
ఇది `http://localhost:5000` లో ఒక లోకల్ సర్వర్‌ను నడపుతుంది. మీ బ్రౌజర్‌లో ఈ అడ్రస్‌ను తెరిచి మీ గేమ్‌ను చూడండి. అరో కీలు తో కంట్రోల్స్‌ను టెస్ట్ చేయండి మరియు శత్రువులను కాల్చి మీ గేమ్ సరిగ్గా పనిచేస్తుందో తనిఖీ చేయండి.
```mermaid
flowchart TD
A["1. ఆస్తి లోడ్ చేయడం"] --> B["2. గేమ్ వేరియబుల్‌లు"]
B --> C["3. ఢీగ అంశ గుర్తింపు"]
C --> D["4. హీరో అభివృద్ధి"]
D --> E["5. ప్రదర్శన ఫంక్షన్‌లు"]
E --> F["6. ఈవెంట్ హ్యాండిలర్‌లు"]
G["జీవిత చిహ్నం చిత్రం"] --> A
H["స్కోరు & జీవితం ట్రాకింగ్"] --> B
I["హీరో-శత్రువు కతలచేలు"] --> C
J["పాయింట్లు & జీవితం విధానాలు"] --> D
K["పాఠ్యం & చిహ్నం రేందరింగ్"] --> E
L["ఇనామం & శిక్ష లాజిక్"] --> F
F --> M["🎮 పూర్తి గేమ్"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
style M fill:#e1f5fe
```
### కోడ్ టైమ్!
1. **మీకు కావలసిన దృశ్య ఆస్తులు అందుకోండి**. `solution/assets/` ఫోల్డర్ నుండి `life.png` ఆస్తిని మీ `your-work` ఫోల్డర్ లోకి కాపీ చేయండి. తర్వాత lifeImg ను మీ window.onload ఫంక్షన్‌లో జోడించండి:
```javascript
lifeImg = await loadTexture("assets/life.png");
```
1. మీ ఆస్తుల జాబితాలో `lifeImg` జోడించడం మరువకండి:
```javascript
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
```
2. **మీ గేమ్ వేరియబుల్స్ సెట్ చేయండి**. మొత్తం స్కోరు (0 నుండి ప్రారంభం) మరియు మిగిలిన లైఫ్స్ (3 తో ప్రారంభం) ను ట్రాక్ చేయడానికి కొడ్ జోడించండి. ప్లేయర్లు ఎల్లప్పుడూ తమ స్థితి తెలిసేలా స్క్రీన్‌పై వీటిని చూపిస్తాము.
3. **ఢీ కొట్టు గుర్తింపు అమలు చేయండి**. మీ `updateGameObjects()` ఫంక్షన్‌ను పొడగించి శత్రువులు మీ హీరోతో ఢీ కొట్టినప్పుడు గుర్తించండి:
```javascript
enemies.forEach(enemy => {
const heroRect = hero.rectFromGameObject();
if (intersectRect(heroRect, enemy.rectFromGameObject())) {
eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
}
})
```
4. **మీ హీరోకి లైఫ్ మరియు పాయింట్ల ట్రాకింగ్ జోడించండి**.
1. **కౌంటర్స్ ప్రారంభించండి**. మీ `Hero` క్లాస్‌లో `this.cooldown = 0` కింద, లైఫ్ మరియు పాయింట్లను సెట్ చేయండి:
```javascript
this.life = 3;
this.points = 0;
```
1. **ప్లేయర్ కు ఈ విలువలు చూపించండి**. స్క్రీన్‌పై ఈ విలువలను డ్రా చేయడానికి ఫంక్షన్‌లు సృష్టించండి:
```javascript
function drawLife() {
// చేయవలసినది, 35, 27
const START_POS = canvas.width - 180;
for(let i=0; i < hero.life; i++ ) {
ctx.drawImage(
lifeImg,
START_POS + (45 * (i+1) ),
canvas.height - 37);
}
}
function drawPoints() {
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
drawText("Points: " + hero.points, 10, canvas.height-20);
}
function drawText(message, x, y) {
ctx.fillText(message, x, y);
}
```
1. **అన్ని ఫంక్షన్స్‌ను మీ గేమ్ లూప్‌తో హుక్ చేయండి**. `updateGameObjects()` తరువాత window.onload ఫంక్షన్‌లో ఈ ఫంక్షన్స్‌ను జోడించండి:
```javascript
drawPoints();
drawLife();
```
### 🔄 **బోధనా తనిఖీ**
**గేమ్ డిజైన్ అవగాహన**: ఫలితాలను అమలు ముందు మీరు అర్థం చేసుకోవాలి:
- ✅ దృశ్య ఫీడ్‌బ్యాక్ ఎలా ప్లేయర్ స్థితిని తెలియజేస్తుంది
- ✅ UI అంశాల సారూప్యత ఎందుకు ఉపయోగకరం
- ✅ పాయింట్ విలువలు మరియు లైఫ్ నిర్వహణ వెనుక సైకాలజీ
- ✅ కేన్వాస్ టెక్స్ట్ రెండరింగ్ మరియు HTML టెక్స్ట్ వ్యత్యాసం
**త్వరిత స్వీయ-పరీక్ష**: శత్రు నిషేధాలలో ఆర్కేడ్ గేమ్స్ సాధారణంగా మూర్ఖ సంఖ్యలను ఎందుకు ఉపయోగిస్తాయి?
*జవాబు: మూర్ఖ సంఖ్యలు ప్లేయర్లకి మానసికంగా సులభంగా లెక్కించుకోవడానికి మరియు సంతృప్తికరమైన మానసిక బహుమతులను సృష్టిస్తాయి*
**వినియోగదారు అనుభవ ప్రిన్సిపల్స్**: ఇప్పుడు మీరు ఉపయోగిస్తున్నారు:
- **దృశ్య హయ్యరార్కీ**: ముఖ్య సమాచారం స్పష్టంగా ప్రదర్శించడం
- **తక్షణ ఫీడ్‌బ్యాక్**: ప్లేయర్ చర్యలకు ప్రామాణిక అప్డేట్లు
- **జ్ఞానం లోడింగ్**: సాదా, స్పష్టమైన సమాచారం ప్రదర్శన
- **భావోద్వేగ డిజైన్**: ఐకాన్లు మరియు రంగులు ప్లేయర్ అనుబంధాన్ని కలుపుతాయి
1. **గేమ్ ఫలితాలు మరియు బహుమతులు అమలు చేయండి**. ఇప్పుడు మేము ప్లేయర్ చర్యలను అర్థవంతంగా చేయించే ఫీడ్‌బ్యాక్ సిస్టమ్స్‌ను జోడిస్తాము:
1. **ఢీ కొట్టడం లైఫ్స్ ను తగ్గిస్తుంది**. మీ హీరో ప్రతి సారి శత్రుతో ఢీ కొట్టినప్పుడు, మీకు ఒక లైఫ్ తప్పాలి.
దీనికి ఈ మెథడ్‌ను `Hero` క్లాస్‌లో జోడించండి:
```javascript
decrementLife() {
this.life--;
if (this.life === 0) {
this.dead = true;
}
}
```
2. **శత్రువులను కాల్చడం పాయింట్లు ఇస్తుంది**. ప్రతీ విజయవంతమైన హిట్ 100 పాయింట్లను ఇస్తుంది, ఇది ఖచ్చితంగా కాల్చడం పై తక్షణం నకటివ్గా ఫీడ్‌బ్యాక్ ఇస్తుంది.
ఈ ఇన్క్రిమెంట్ మెథడ్ తో మీ Hero క్లాస్‌ను విస్తరించండి:
```javascript
incrementPoints() {
this.points += 100;
}
```
ఇప్పుడు ఈ ఫంక్షన్స్‌ను మీ ఢీ కొట్టు ఈవెంట్స్‌తో కలపండి:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
first.dead = true;
second.dead = true;
hero.incrementPoints();
})
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
enemy.dead = true;
hero.decrementLife();
});
```
✅ JavaScript మరియు Canvas తో నిర్మించబడిన ఇతర గేమ్స్ గురించి ఆసక్తిగా ఉన్నారా? కొంత అన్వేషణ చేయండి - మీరు ఏమి సాధ్యం అవుతుందో ఆశ్చర్యపోతారు!
ఈ ఫీచర్లు అమలయ్యాక, మీ గేమ్ ను పరీక్షించండి పూర్తి ఫీడ్‌బ్యాక్ సిస్టమ్‌ను చూడడానికి. మీరు కుడి దిగువకు లైఫ్ ఐకాన్లు, ఎడమ దిగువకు స్కోర్ ను చూడాలి, ఢీ కొటాల వల్ల లైఫ్స్ తగ్గుతాయి మరియు విజయవంతమైన కాల్స్ స్కోర్ పెరుగుతుంటాయి.
మీ గేమ్ ఇప్పుడు ఆర్కేడ్ గేమ్స్‌కి స్ఫూర్తినిచ్చిన ముఖ్యమైన మెకానిక్స్ కలిగి ఉంది—స్పష్టమైన లక్ష్యాలు, తక్షణ ఫీడ్‌బ్యాక్, మరియు ఆటగాడు చర్యలకు అర్థవంతమైన ఫలితాలు.
### 🔄 **బోధనా తనిఖీ**
**పూర్తి గేమ్ డిజైన్ సిస్టమ్**: ప్లేయర్ ఫీడ్‌బ్యాక్ సిస్టమ్స్ పై మీ మాస్టరీని నిర్ధారించండి:
- ✅ స్కోరింగ్ మెకానిక్స్ ప్లేయర్ ప్రేరణ మరియు ఆసక్తి ఎలా సృష్టిస్తాయి?
- ✅ వినియోగదారు ఇంటర్ఫేస్ డిజైన్‌లో దృశ్య సారూప్యత ఎందుకు ముఖ్యం?
- ✅ లైఫ్ సిస్టమ్ సవాలు మరియు నిలుపుదలను ఎలా సమతౌల్యంగా ఉంచుతుందో?
- ✅ తక్షణ ఫీడ్‌బ్యాక్ సంతృప్తికరమైన గేమ్‌ప్లే సృష్టించడంలో ఏ పాత్ర పోషిస్తోంది?
**సిస్టమ్ ఇంటగ్రేషన్**: మీ ఫీడ్‌బ్యాక్ సిస్టమ్ ప్రదర్శిస్తుంది:
- **వినియోగదారు అనుభవ డిజైన్**: స్పష్టమైన దృశ్య కమ్యూనికేషన్ మరియు సమాచారం హయ్యరార్కీ
- **ఈవెంట్-డ్రివెన్ ఆర్కిటెక్చర్**: ప్లేయర్ చర్యలకు స్పందించే అప్డేట్లు
- **స్టేట్ మేనేజ్‌మెంట్**: డైనమిక్ గేమ్ డేటా ట్రాకింగ్ మరియు ప్రదర్శన
- **కేన్వాస్ మాస్టరీ**: టెక్స్ట్ రెండరింగ్ మరియు స్ప్రైట్ పొజిషనింగ్
- **గేమ్ సైకాలజీ**: ప్లేయర్ ప్రేరణ మరియు ఆసక్తి అర్థం చేసుకోవడం
**వృత్తిపరమైన నమూనాలు**: మీరు అమలుచేశారు:
- **MVC ఆర్కిటెక్చర్**: గేమ్ లాజిక్, డేటా, మరియు ప్రదర్శన విడదీయడం
- **ఆబ్జర్వర్ ప్యాటర్న్**: గేమ్ స్టేట్ మార్పుల పై ఈవెంట్-డ్రివెన్ అప్డేట్లు
- **కంపోనెంట్ డిజైన్**: రీయూజబుల్ ఫంక్షన్స్ రెండరింగ్ మరియు లాజిక్ కోసం
- **పర్ఫార్మెన్స్ ఆప్టిమైజేషన్**: గేమ్ లూప్స్‌లో సమర్థవంతమైన రెండరింగ్
### ⚡ **తదుపరి 5 నిమిషాల్లో మీరు చేయగలరు**
- [ ] స్కోర్ ప్రదర్శనకు వివిధ ఫాంట్ పరిమాణాలు మరియు రంగులు ప్రయత్నించండి
- [ ] పాయింట్ విలువలు మార్చి గేమ్‌ప్లే అనుభవాన్ని పరిశీలించండి
- [ ] పాయింట్లు మరియు లైఫ్స్ మారినప్పుడు console.log స్టేట్‌మెంట్స్ జోడించండి
- [ ] లైఫ్స్ అన్నయినప్పుడు లేదా అధిక స్కోర్లు సాధించినప్పుడు ఎడ్జ్ కేసెస్‌ను పరీక్షించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలరు**
- [ ] పోస్ట్-లెసన్ క్విజ్ పూర్తి చేసి గేమ్ డిజైన్ సైకాలజీ అర్థం చేసుకోవడం
- [ ] స్కోరింగ్ మరియు లైఫ్స్ కోల్పోవడానికి సౌండ్ ఎఫెక్ట్స్ జోడించడం
- [ ] localStorage ఉపయోగించి హై స్కోరు సిస్టమ్ అమలు చేయడం
- [ ] విభిన్న శత్రు రకాల కోసం విభిన్న పాయింట్ విలువలు సృష్టించడం
- [ ] లైఫ్ కోల్పోతున్నప్పుడు స్క్రీన్ షేక్స్ వంటి దృశ్య ప్రభావాలు జోడించడం
### 📅 **మీ వారాంత గేమ్ డిజైన్ ప్రయాణం**
- [ ] పూర్తిగా పూర్తి స్పేస్ గేమ్‌ను అభివృద్ధి చేసి ఫీడ్‌బ్యాక్ సిస్టమ్స్‌ను మెరుగుపర్చడం
- [ ] కాంబో మల్టిప్లయర్లు వంటి అధునాతన స్కోరింగ్ మెకానిక్స్ అమలు చేయడం
- [ ] ఎచీవ్‌మెంట్స్ మరియు అన్‌లాకబుల్ కంటెంట్ జోడించడం
- [ ] కష్టతరత మరియు సమతుల్యత సిస్టమ్స్ డిజైన్ చేయడం
- [ ] మెనూలు మరియు గేమ్ ఓవర్ స్క్రీన్‌ల కోసం యూజర్ ఇంటర్ఫేస్‌లు రూపకల్పన చేయడం
- [ ] ఇతర గేమ్స్ అధ్యయనం చేసి పాల్గొనే వ్యవస్థలను అర్థం చేసుకోవడం
### 🌟 **మీ నెలంత గేమ్ డెవలప్‌మెంట్ నైపుణ్యం**
- [ ] సాంకీర్తిక ప్రగతి సిస్టమ్స్ తో పూర్తిగా గేమ్స్ నిర్మించడం
- [ ] గేమ్ అనలిటిక్స్ మరియు ప్లేయర్ ప్రవర్తన కొలత నేర్చుకోవడం
- [ ] ఓపెన్ సోర్స్ గేమ్ డెవలప్‌మెంట్ ప్రాజెక్ట్‌లకు సహకారం అందించడం
- [ ] అధునాతన గేమ్ డిజైన్ నమూనాలు మరియు మోనిటైజేషన్ మాస్టరీ
- [ ] గేమ్ డిజైన్ మరియు వినియోగదారు అనుభవంపై విద్యా కంటెంట్ సృష్టించడం
- [ ] గేమ్ డిజైన్ మరియు డెవలప్‌మెంట్ నైపుణ్యాలను ప్రదర్శించే పోర్ట్‌ఫోలియో నిర్మించడం
## 🎯 మీ గేమ్ డిజైన్ మాస్టరీ టైమ్‌లైన్
```mermaid
timeline
title గేమ్ డిజైన్ & ప్లేయర్ ఫీడ్‌బ్యాక్ అభ్యాస పురోగతి
section ఫౌండేషన్ (10 నిమిషాలు)
విజువల్ కమ్యూనికేషన్: టెక్స్ట్ చిత్రీకరణ
: ఐకాన్ డిజైన్
: లేఅవుట్ సూత్రాలు
: రంగ psychology
section ప్లేయర్ సైకాలజీ (20 నిమిషాలు)
ప్రేరణ వ్యవస్థలు: పాయింట్ విలువలు
: ప్రమాదం వర్సెస్ బహుమతి
: పురోగతి ఫీడ్‌బ్యాక్
: సాధన డిజైన్
section సాంకేతిక అమలు (30 నిమిషాలు)
క్యాన్వాస్ నైపుణ్యం: టెక్స్ట్ స్థానంలో ఉంచడం
: స్ప్రైట్ చిత్రీకరణ
: స్థితి నిర్వహణ
: పనితీరు ఆప్టిమైజేషన్
section గేమ్ బ్యాలెన్స్ (40 నిమిషాలు)
కఠినత డిజైన్: జీవితం నిర్వహణ
: స్కోరింగ్ వక్రాలు
: ప్లేయర్ నిల్వ
: ప్రవేశం
section యూజర్ అనుభవం (50 నిమిషాలు)
ఇంటర్‌ఫేస్ డిజైన్: సమాచారం శ్రేణి
: ప్రతిస్పందన ఫీడ్‌బ్యాక్
: భావోద్వేగ డిజైన్
: ఉపయోగకరత పరీక్ష
section అధునాతన వ్యవస్థలు (1 వారం)
గేమ్ మెకానిక్స్: పురోగతి వ్యవస్థలు
: విశ్లేషణ సమ్మేళనం
: ఆదాయ సిద్ధాంతం
: కమ్యూనిటీ ఫీచర్స్
section పారిశ్రామిక నైపుణ్యాలు (1 నెల)
వృత్తిపరమైన అభివృద్ధి: బృంద సహకారం
: డిజైన్ డాక్యుమెంటేషన్
: ప్లేయర్ పరిశోధన
: ప్లాట్‌ఫామ్ ఆప్టిమైజేషన్
```
### 🛠️ మీ గేమ్ డిజైన్ టూల్‌కిట్ సారాంశం
ఈ పాఠం పూర్తి చేసిన తరువాత, మీరు ఇప్పటికీ మాస్టర్ అయిపోకున్నవి:
- **ప్లేయర్ సైకాలజీ**: ప్రేరణ, ప్రమాదం/బహుమతి, మరియు ఆసక్తి లూప్స్ అర్థం చేసుకోవడం
- **దృశ్య కమ్యూనికేషన్**: టెక్స్ట్, ఐకాన్లు, మరియు లేఅవుట్ ఉపయోగించి సమర్థవంత UI డిజైన్
- **ఫీడ్‌బ్యాక్ సిస్టమ్స్**: ప్లేయర్ చర్యలు మరియు గేమ్ ఈవెంట్లపై ప్రత్యక్ష స్పందన
- **స్టేట్ మేనేజ్‌మెంట్**: డైనమిక్ గేమ్ డేటా ట్రాకింగ్ మరియు ప్రదర్శన సమర్థవంతంగా
- **కేన్వాస్ టెక్స్ట్ రెండరింగ్**: ప్రొఫెషనల్ టెక్స్ట్ ప్రదర్శన స్టైలింగ్ మరియు స్థానికరణతో
- **ఈవెంట్ ఇంటిగ్రేషన్**: వినియోగదారు చర్యలను అర్థవంతమైన గేమ్ ఫలితాలతో కలపడం
- **గేమ్ బ్యాలెన్స్**: కష్టతరత వక్రీకరణలు మరియు ప్లేయర్ ప్రగతి సిస్టమ్స్ రూపకల్పన
**వాస్తవ ప్రపంచ అనువర్తనాలు**: మీ గేమ్ డిజైన్ నైపుణ్యాలు నేరుగా ప్రయోజనవంతంగా ఉంటాయి:
- **యూజర్ ఇంటర్ఫేస్ డిజైన్**: ఆకట్టుకునే మరియు సూటిగా ఉండే ఇంటర్ఫేస్‌లు సృష్టించడం
- **ఉత్పత్తి అభివృద్ధి**: వినియోగదారు ప్రేరణ మరియు ఫీడ్‌బ్యాక్ లూప్స్ అర్థం చేసుకోవడం
- **శిక్షణా సాంకేతికత**: గేమిఫికేషన్ మరియు నేర్చుకునే ఆసక్తి సిస్టమ్స్
- **డేటా విజువలైజేషన్**: సంకీర్ణ సమాచారం అందుబాటులో ఉంచడం
- **మొబైల్ యాప్ అభివృద్ధి**: నిలుపుదల మెకానిక్స్ మరియు వినియోగదారు అనుభవ డిజైన్
- **మార్కెటింగ్ టెక్నాలజీ**: వినియోగదారు ప్రవర్తన మరియు మార్పిడి ఆప్టిమైజేషన్ అర్థం చేసుకోవడం
**వ్యవసాయ నైపుణ్యాలు పొందారు**: మీరు ఇప్పుడు చేయగలరు:
- **డిజైన్** చేయటానికి వినియోగదారు అనుభవాలను ప్రేరేపించే మరియు ఆకర్షణీయంగా
- **అమలు** చేయటానికి ఫీడ్‌బ్యాక్ సిస్టమ్స్ వాటిని సులభవంతం చేస్తాయి
- **సమతౌల్యం** చేయటానికి సవాలు మరియుడానికి సౌకర్యాలు
- **సృష్టించు** దృశ్య కమ్యూనికేషన్ వేర్వేరు వినియోగదారు గుంపుల కోసం పని చేసే
- **విశ్లేషణ** చేయటానికి వినియోగదారు ప్రవర్తన మరియు డిజైన్ మెరుగుదలపై పునరావృతం చేయడం
**గేమ్ డెవలప్‌మెంట్ కాన్సెప్ట్‌లు మాస్టర్ చేశారు**:
- **ప్లేయర్ ప్రేరణ**: ఆసక్తి మరియు నిలుపుదల ఎందుకు జరుగుతాయో అర్థం చేసుకోవడం
- **దృశ్య డిజైన్**: స్పష్టమైన, ఆకర్షణీయ, మరియు కార్యాచరణ ఇంటర్ఫేస్‌లు తయారుచేయడం
- **సిస్టమ్ ఇంటిగ్రేషన్**: సమగ్ర అనుభవం కోసం బహుళ గేమ్ సిస్టమ్స్ కలపడం
- **పర్ఫార్మెన్స్ ఆప్టిమైజేషన్**: సమర్థవంతమైన రెండరింగ్ మరియు స్టేట్ మేనేజ్‌మెంట్
- **అందుబాటులో ఉండటం**: భిన్న నైపుణ్య స్థాయిలు మరియు ప్లేయర్ అవసరాలకు డిజైన్ చేయడం
**తదుపరి దశ**: మీరు అధునాతన గేమ్ డిజైన్ నమూనాలను అన్వేషించడానికి, అనలిటిక్స్ సిస్టమ్స్ అమలు చేయడానికి, లేదా గేమ్ మోనిటైజేషన్ మరియు ప్లేయర్ నిలుపుదల వ్యూహాలు అధ్యయనం చేయడానికి సిద్ధంగా ఉన్నారు!
🌟 **అచీవ్మెంట్ అందుకుంది**: మీరు ప్రొఫెషనల్ గేమ్ డిజైన్ సూత్రాలతో పూర్తయిన ప్లేయర్ ఫీడ్‌బ్యాక్ సిస్టమ్ నిర్మించారు!
---
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఈ ఏజెంట్ మోడ్ ఉపయోగించి ఈ క్రింది ఛాలెంజ్‌ను పూర్తి చేయండి:
**వివరణ**: స్పేస్ గేమ్ స్కోరింగ్ సిస్టమ్‌ను బహుమతి స్కోరింగ్ మెకానిక్స్ మరియు పర్సిస్టెంట్ స్టోరేజ్ తో బస్ట్ చేయండి.
**ప్రాంప్ట్**: ప్లేయర్ యొక్క ఉత్తమ స్కోర్‌ను localStorage లో సేవ్ చేసే హై స్కోర్ సిస్టమ్ సృష్టించండి. క్రమంగా శత్రు హతమార్ప్స్ కోసం బోనస్ పాయింట్లు (కాంబో సిస్టమ్) జోడించండి మరియు వివిధ శత్రు రకాల కోసం వివిధ పాయింట్ విలువలతో అమలు చేయండి. ప్లేయర్ కొత్త హై స్కోర్ సాధించినప్పుడు ఒక దృశ్య సూచిక చేర్చండి మరియు గేమ్ స్క్రీన్ పై ప్రస్తుత హై స్కోర్‌ను ప్రదర్శించండి.
## 🚀 ఛాలెంజ్
మీ వద్ద ఇప్పుడు స్కోరింగ్ మరియు లైఫ్స్ ఉన్న ఫంక్షనల్ గేమ్ ఉంది. ప్లేయర్ అనుభవాన్ని మెరుగుపరచడానికి మరెలాంటి ఫీచర్లు కావచ్చునని పరిగణించండి.
## పోస్ట్-లెక్చర్ క్విజ్
[పోస్ట్-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/38)
## సమీక్ష & స్వీయ అధ్యయనం
మరింత అన్వేషించాలనుకుంటున్నారా? గేమ్ స్కోరింగ్ మరియు లైఫ్ సిస్టమ్స్ కి విభిన్న 접근ాలను పరిశీలించండి. అక్కడ [PlayFab](https://playfab.com) లాంటి ఆసక్తికర గేమ్ ఇంజన్లు ఉన్నాయి, ఇవి స్కోరింగ్, లీడర్బోర్డ్స్, మరియు ప్లేయర్ ప్రగతిని నిర్వహిస్తాయి. అలాంటి దాన్ని సమగ్రపరచడం ఎలా మీ గేమ్‌ను తదుపరి స్థాయికి తీసుకెళ్తుందో తెలుసుకోండి.
## అసైన్‌మెంట్
[స్కోరింగ్ గేమ్ నిర్మించండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**నిరాకరణ**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాలలో పొరపాట్లు లేదా తప్పులూ ఉండవచ్చు. మూల పత్రం తన స్థానిక భాషలో అధికారిక వనరు గా పరిగణించాలి. కీలకమైన సమాచారం కోసం, నిపుణుల మానవ అనువాదాన్ని ఆహ్వానిస్తాం. ఈ అనువాదం వాడకంలో ఏవైనా అపార్థాలు లేదా తప్పువారినట్టి పరిస్తితులకై మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

27
translations/te/6-space-game/5-keeping-score/assignment.md
Unescape View File

@ -0,0 +1,27 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "81f292dbda01685b91735e0398dc0504",
"translation_date": "2026-01-08T14:14:18+00:00",
"source_file": "6-space-game/5-keeping-score/assignment.md",
"language_code": "te"
}
-->
# స్కోరింగ్ గేమ్‌ని నిర్మించండి
## సూచనలు
మీరు జీవితం మరియు పాయింట్లను సృజనాత్మకమైన విధంగా ప్రదర్శించే గేమ్‌ను సృష్టించండి. జీవితం హృదయాలుగా మరియు పాయింట్లు స్క్రీన్ దిగువ మధ్య భాగంలో పెద్ద సంఖ్యగా చూపడానికి ఒక సలహా. ఇక్కడ చూడండి [ఉచిత గేమ్ వనరులు](https://www.kenney.nl/)
# ర్యూబ్రిక్
| ప్రమాణాలు | ఉదాహరణాత్మకమైనది | తగినంత | మెరుగుదల అవసరం |
| -------- | -------------------------- | ------------------------- | ------------------------- |
| | పూర్తి గేమ్ ప్రదర్శించబడింది | గేమ్ భాగంగా ప్రదర్శించబడింది | భాగస్వామ్య గేమ్ లో బగ్స్ ఉన్నాయి |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**హెచ్చరిక**:
ఈ దస్తావేజును AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించారు. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, యంత్ర అనువాదాలలో తప్పులు లేదా పొరపాట్లు ఉండవచ్చు. ఆమె భాషలో ఉన్న అసలు దస్తావేజే అధికారిక మూలం గా పరిగణించాలి. కీలకమైన సమాచారం కోసం, వృత్తిపరమైన మనుష్యులచే అనువాదం చేయించుకోవడం ఉత్తమం. ఈ అనువాదం వలన వచ్చే ఏవైనా అపరాధాలు లేదా భ్రమలకు మేము బాధ్యతాయుతులు కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

17
translations/te/6-space-game/5-keeping-score/solution/README.md
Unescape View File

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2026-01-08T15:03:03+00:00",
"source_file": "6-space-game/5-keeping-score/solution/README.md",
"language_code": "te"
}
-->
ఇది ఒక ప్లేస్‌హోల్డర్, ఉద్దేశపూర్వకంగా ఖాళీగా bırakించబడింది
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టం**:
ఈ పత్రాన్ని AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించారు. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తే ఆపేక్షు, స్వయం చలిత అనువాదాల్లో పొరపాట్లు లేదా తప్పిదాలు ఉండవచ్చును. స్థానిక భాషలో ఉన్న అసలు పత్రం అధికారిక మూలంగా పరిగణించాలి. గంభీరమైన సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదం చేయించడం మంచిది. ఈ అనువాదం వాడకం వల్ల ఏవైనా అపార్థాలు లేదా తప్పుదారితీసే అర్థాలపై మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

17
translations/te/6-space-game/5-keeping-score/your-work/README.md
Unescape View File

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2026-01-08T15:02:16+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/README.md",
"language_code": "te"
}
-->
ఇది ఒక ప్లేస్‌హోల్డర్, చైతన్యంగా ఖాళీగా ఉంచబడింది
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టం**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సమగ్రతకు కృషి చేసినప్పటికీ, ఆటోమేటిక్ అనువాదాలలో పొరపాట్లు లేదా తప్పిదాలు ఉండొచ్చు తేలికగా ఉండవచ్చు. మూల డాక్యుమెంట్ స్థానిక భాషలో అధికారిక మూలం గా పరిగణించాలి. ముఖ్యమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదం సిఫారసు చేయబడుతుంది. ఈ అనువాదం ఉపయోగించడం వల్ల కలిగే ఏదైనా అపార్థం లేదా తప్పుగా అర్థం చేసుకోవడంకు మేము బాధ్యులు కంనీంలేము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

684
translations/te/6-space-game/6-end-condition/README.md
Unescape View File

@ -0,0 +1,684 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
"translation_date": "2026-01-08T13:50:32+00:00",
"source_file": "6-space-game/6-end-condition/README.md",
"language_code": "te"
}
-->
# స్పేస్ గేమ్ భాగం 6: ముగింపు మరియు రీస్టార్ట్
```mermaid
journey
title మీ గేమ్ పూర్తి ప్రయాణం
section ముగింపు పరిస్థితులు
గెలుపు/ఓటమి స్థితులను నిర్వచించండి: 3: Student
షరతులు తనిఖీ చేయడం అమలు చేయండి: 4: Student
స్థితి మార్పులను నిర్వహించండి: 4: Student
section ఆటగాడు అనుభవం
ఫీడ్బ్యాక్ విధానాలను రూపకల్పన చేయండి: 4: Student
రీస్టార్ట్ మెకానిక్స్ సృష్టించండి: 5: Student
వాడుకరి ఇంటర్‌ఫేస్ సంపూర్ణంగా చేయండి: 5: Student
section వ్యవస్థ సమగ్రత
గేమ్ జీవకాళం నిర్వహణ: 5: Student
మెమరీ శుభ్రపరచడం నిర్వహించండి: 5: Student
పూర్ణ అనుభవం సృష్టించండి: 5: Student
```
ప్రతి గొప్ప గేమ్‌కు సాఫీగా ముగింపు పరిస్థితులు మరియు సర్దుబాటు రీస్టార్ట్ వ్యవస్థ అవసరం. మీరు మూవ్మెంట్, యుద్ధం, మరియు స్కోరింగ్‌తో ఒక అద్భుతమైన స్పేస్ గేమ్‌ను నిర్మించారు - ఇప్పుడు దీన్ని పూర్తి అనిపించే తుది భాగాలను జోడించే సమయం వచ్చింది.
మీ గేమ్ ప్రస్తుతం సరిహద్దులు లేకుండా నడుస్తోంది, 1977లో NASA ప్రారంభించిన Voyager probes లాంటి వాటిలాగే - దశాబ్దాల తర్వాత కూడా స్పేస్‌లో ప్రయాణిస్తూనే ఉన్నాయి. ఇది స్పేస్ పరిశోధనకు సరైనది అయినా, గేమ్స్‌కు ఒక పరిమితి అవసరం ఉంటుంది గట్టి తృప్తిదాయక అనుభవం కోసం.
ఈ రోజు, మనం సరైన విజయం/పూడ్చుట పరిస్థితులు మరియు రీస్టార్ట్ వ్యవస్థను అమలు చేస్తాము. ఈ పాఠం చివరికి, మీరు ఒక పరిక్షితమైన గేమ్‌ను కలిగి ఉండాలి, ఇది ఆటగాళ్లు పూర్తి చేసి మళ్ళీ ఆడుకోవచ్చు, క్లాసిక్ ఆర్కేడ్ గేమ్‌లలా.
```mermaid
mindmap
root((గేమ్ పూర్తీచేయడం))
End Conditions
విజయం స్థితులు
ఓటమి షరతులు
పురోగతి ట్రాకింగ్
స్థితి ధృవీకరణ
Player Feedback
విజువల్ సందేశాలు
రంగు మనోవైజ్ఞానికత
స్పష్టమైన కమ్యూనికేషన్
భావోద్వేగ స్పందన
State Management
గేమ్ లూప్ నియంత్రణ
మెమోరి క్లీనప్
ఆబ్జెక్ట్ జీవచక్రం
ఈవెంట్ హ్యాండ్లింగ్
Restart Systems
ఇన్పుట్ హ్యాండ్లింగ్
స్థితి రీసెట్
తాజా ప్రారంభం
యూజర్ అనుభవం
Polish Elements
సందేశ ప్రదర్శన
సరళమైన మార్పులు
లోప నివారణ
ప్రాప్యత
```
## పూర్వ పాఠ పరీక్ష
[పూర్వ పాఠ పరీక్ష](https://ff-quizzes.netlify.app/web/quiz/39)
## గేమ్ ముగింపు పరిస్థితుల అవగాహన
మీ గేమ్ ఎప్పుడు ముగియాలి? ఈ ప్రాథమిక ప్రశ్న ఆట డిజైన్‌ను ప్రారంభమైనప్పటి నుండే ప్రభావితం చేస్తోంది. పాక్-మాన్ గేమ్ లో భూతుల చేత పట్టుబడితే లేదా ఆన్ని డాట్స్ క్లియర్ అయితే ఆగిపోతుంది, స్పేస్ ఇన్వేడర్స్ గేమ్ లో వున్నీ విదేశీలు అడుగు తలనెత్తితే లేదా మీరు ఆన్ని ఎద్విలను నాశనం చేస్తే గేమ్ ముగుస్తుంది.
గేమ్ సృజనకర్తగా, మీరు విజయం మరియు పరాజయ పరిస్థితులను నిర్వచిస్తారు. మన స్పేస్ గేమ్ కోసం, ఇక్కడ ప్రామాణికమైన మరియు ఆకట్టుకునే ఆటను సృష్టించే పద్ధతులు ఉన్నాయి:
```mermaid
flowchart TD
A["🎮 ఆట ప్రారంభం"] --> B{"నిబంధనలను తనిఖీ చేయండి"}
B --> C["శత్రు సంఖ్య"]
B --> D["హీరో జీవాలు"]
B --> E["స్కోర్ పరిమితి"]
B --> F["స్థాయి పురోగతి"]
C --> C1{"శత్రువులు = 0?"}
D --> D1{"జివాలు = 0?"}
E --> E1{"స్కోర్ ≥ లక్ష్యం?"}
F --> F1{"లక్ష్యాలు పూర్తయ్యాయా?"}
C1 -->|Yes| G["🏆 విజయం"]
D1 -->|Yes| H["💀 పరాజయం"]
E1 -->|Yes| G
F1 -->|Yes| G
C1 -->|No| B
D1 -->|No| B
E1 -->|No| B
F1 -->|No| B
G --> I["🔄 తిరిగి ప్రారంభించే ఎంపిక"]
H --> I
style G fill:#e8f5e8
style H fill:#ffebee
style I fill:#e3f2fd
```
- **`N` శత్రు నౌకలు నాశనం అయ్యి ఉండాలి**: మీరు ఒక గేమ్‌ను వివిధ స్థాయిలుగా విభాజించి ఉంటే `N` శత్రు నౌకలను ధ్వంసం చేయడం సాధారణమే.
- **మీ నౌక నాశనం అయిందా**: కొన్ని గేమ్స్‌లో మీ నౌక ధ్వంసం అయితే మీరు గేమ్ ఓడిపోతారు. మరొక సాధారణ పద్ధతి జీవితాలు కలిగి ఉండటం. ప్రతి సారి మీ నౌక ధ్వంసమైనప్పుడు ఒక జీవితం తగ్గిపోతుంది. అన్ని జీవితాలు పోయిన తర్వాత మాత్రమే మీరు గేమ్ ఓడిపోతారు.
- **మీరు `N` పాయింట్లు సేకరించారు**: ఇంకొక సాధారణ ముగింపు పరిస్థితి పాయింట్లు సేకరించడం. పాయింట్లు చేయడానికి విధానాలు మీపై ఆధారపడి ఉంటాయి కానీ సాధారణంగా శత్రు నౌకను ధ్వంసం చేయడం లేదా శత్రు పదార్థాలు ధ్వంసం అయ్యే సమయంలో వస్తువులు ఒకటిని సేకరించడం వంటి కార్యకలాపాలకు పాయింట్లు ఇచ్చేరు.
- **ఒక స్థాయి పూర్తి చేయడం**: ఇది అనేక పరిస్థితులను కలిగి ఉండొచ్చు, ఉదాహరణకు `X` శత్రు నౌకల్ని నాశనం చేయడం, `Y` పాయింట్లను సేకరించడం లేదా కూల్చిన ఒక ప్రత్యేక వస్తువును సేకరించడం.
## గేమ్ రీస్టార్ట్ కార్యాచరణ అమలు
మంచి గేమ్స్ సాఫీగా రీస్టార్ట్ చేసే విధానాలతో మళ్లీ ఆడటానికి ప్రేరేపిస్తాయి. ఆటగాళ్లు గేమ్ పూర్తి చేసినప్పుడు లేదా ఓడిపోతే, వారు వెంటనే మరల ప్రయత్నించాలనుకునే అవకాశం ఎక్కువ - ఎక్కువ స్కోరు సాధించడానికి లేదా తమ పనితీరును మెరుగుపరచడానికి.
```mermaid
stateDiagram-v2
[*] --> Playing: గేమ్ ప్రారంభం
Playing --> Victory: అన్ని శత్రువులు నాశనం
Playing --> Defeat: జీవాలు = 0
Victory --> MessageDisplay: గెలుపు సందేశం చూపించు
Defeat --> MessageDisplay: ఓటమి సందేశం చూపించు
MessageDisplay --> WaitingRestart: ఎంటర్ నొక్కు ప్రాంప్ట్
WaitingRestart --> Resetting: ఎంటర్ కీ నొక్కబడింది
Resetting --> CleanupMemory: ఇంటర్వల్స్ క్లియర్ చేయి
CleanupMemory --> ClearEvents: లిసనర్స్ తీసివెయ్యి
ClearEvents --> InitializeGame: కొత్త ప్రారంభం
InitializeGame --> Playing: కొత్త ఆట మొదలవుతుంది
note right of MessageDisplay
రంగుల కోడ్ చేసిన అభిప్రాయం:
ירוק = విజయం
ఎరుపు = ఓటమి
end note
note right of Resetting
పూర్తి స్థితి రీసెట్
మెమరీ లీక్‌లను నివారిస్తుంది
end note
```
టెట్రిస్ దీన్ని అద్భుతంగా ఉదాహరించిందే: మీ బ్లాక్లు టాప్‌కు చేరినప్పుడు, మీరు కష్టమైన మెనూలను వీతరుస్కోవద్దు, వెంటనే కొత్త గేమ్ ప్రారంభించవచ్చు. మనం ఇలాంటిదే రీస్టార్ట్ వ్యవస్థను నిర్మించి గేమ్ స్థితిని నియంత్రించి ఆటగాళ్లను త్వరగా చర్యలోకి తీసుకుపోగలుగుతాం.
✅ **ఆలోచన**: మీరు ఆడిన గేమ్స్ గురించి ఆలోచించండి. అవి ఎప్పుడు ముగుస్తాయి, మీరు ఎలా రీస్టార్ట్ అవ్వడానికి ప్రేరేపించబడుతారు? సాఫీగా అనిపించే రీస్టార్ట్ అనుభవాన్ని ఏ సంగతులు చేస్తాయి?
## మీరు నిర్మించబోతున్నది
మీ ప్రాజెక్ట్‌ను పూర్తిగా అనుభవించే గేమ్‌గా మార్చే తుది ఫీచర్‌లను మీరు అమలు చేస్తారు. ఇవి మృదులైన గేమ్స్‌ను ప్రాథమిక నమూనాల నుండి వేరుచేస్తాయి.
**ఈక్రితం మీరు జత చేస్తున్నవి:**
1. **విజయ పరిస్థితి**: అన్ని శత్రువులను పేల్చి సరైన సంబరాలు జరపడం (మీకు హక్కుంది!)
2. **పరాజయ పరిస్థితి**: జీవితాలు అంతమవ్వడం, ఓడిపోయిన స్క్రీన్ ఎదుర్కొనడం
3. **రిస్టార్ట్ మెకానిజం**: ఎంటర్ నొక్కి వెంటనే తిరిగి ఆడటం - ఎందుకంటే ఒక గేమ్ మాత్రమే చాలదు
4. **స్థితి నిర్వహణ**: ప్రతిసారి శుభ్రంగా ప్రారంభం - ఎటువంటి మిగులు శత్రువులు లేదా గేమ్‌లోని గందరగోళాలు ఉండకుండా
## ప్రారంభించడం
మీ డెవలప్‌మెంట్ వాతావరణాన్ని సిద్ధం చేసుకోండి. మీరు గత పాఠాల నుండి గేమ్ ఫైల్స్ సన్నద్ధి చేసుకోవాలి.
**మీ ప్రాజెక్ట్ ఇలా ఉండాలి:**
```bash
-| assets
-| enemyShip.png
-| player.png
-| laserRed.png
-| life.png
-| index.html
-| app.js
-| package.json
```
**మీ డెవలప్‌మెంట్ సర్వర్ ప్రారంభించండి:**
```bash
cd your-work
npm start
```
**ఈ ఆజ్ఞ:**
- `http://localhost:5000` వద్ద లోకల్ సర్వర్ నడుపుతుంది
- మీ ఫైల్స్ సరిగ్గా సేవ్ చేస్తుంది
- మార్పులు చేసినప్పుడు ఆటోమేటిక్ రిఫ్రెష్ చేస్తుంది
మీ బ్రౌజర్‌లో `http://localhost:5000` తెరచి గేమ్ ఎరుగుతుందో లేదో చూసుకోండి. మీరు కదలగలగాలి, నిషేధించగలగాలి, మరియు శత్రువులతో వ్యవహరించగలగాలి. ధృవీకరించిన తర్వాతనే అమలు ప్రారంభిద్దాం.
> 💡 **ప్రో చిట్కా**: Visual Studio Code లో హెచ్చరికలు నివారించాలంటే, `window.onload` ఫంక్షన్ లో కాదు, ఫైల్ టాప్ వద్ద `let gameLoopId;` ను డిక్లేర్ చేయండి. ఇది ఆధునిక జావాస్క్రిప్ట్ యొక్క ఉత్తమ విద్య విధానాన్ని అనుసరించటం.
```mermaid
flowchart TD
A["1. పరిస్థితి ట్రాకింగ్"] --> B["2. ఈవెంట్ హాండ్లర్లు"]
B --> C["3. సందేశ స్థిరాంకాలు"]
C --> D["4. రీస్టార్ట్ కంట్రోల్స్"]
D --> E["5. సందేశ ప్రదర్శన"]
E --> F["6. సిస్టమ్ రీసెట్"]
G["isHeroDead()\nisEnemiesDead()"] --> A
H["టکراటి ఈవెంట్లు\nగేమ్ ముగింపు ఈవెంట్లు"] --> B
I["GAME_END_WIN\nGAME_END_LOSS"] --> C
J["ఎంటర్ కీ\nరీస్టార్ట్ ట్రిగ్గర్"] --> D
K["విజయం/పరాజయం\nరంగు-కోడ్ టెక్స్ట్"] --> E
L["స్థితి శుభ్రపరిచే\nకొత్త ప్రారంభం"] --> F
F --> M["🎮 పూర్తి గేమ్"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
style M fill:#e1f5fe
```
## అమలు దశలు
### దశ 1: ముగింపు పరిస్థితులను ట్రాక్ చేయడానికి ఫంక్షన్స్ రూపొందించడం
గేమ్ ఎప్పుడూ ముగియాలో పర్యవేక్షించడానికి ఫంక్షన్లు అవసరం. అంతర్జాతీయ స్పేస్ స్టేషన్ పై ఉన్న సెన్సార్లా ఇవి కీలక వ్యవస్థలను నిరంతరం పర్యవేక్షిస్తాయిలా, మన ఫంక్షన్స్ గేమ్ స్థితిని నిరంతరం తనిఖీ చేస్తాయి.
```javascript
function isHeroDead() {
return hero.life <= 0;
}
function isEnemiesDead() {
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
return enemies.length === 0;
}
```
**ఇది క్రింద ఎలా జరుగుతోంది:**
- **మీ హీరో జీవితాలు పోయాయా అని తనిఖీ చేస్తుంది (ఓ యచ్!)**
- **ఎన్ని శత్రువులు ఇంకా ఉన్నాయో లెక్కిస్తుంది**
- **యుద్ధ స్థలం శత్రువుల నుండి ఖాళీ అయ్యిందా అని సరి చూడటం**
- **సాధారణ true/false లాజిక్ ఉపయోగించడం**
- **అన్ని గేమ్ ఆబ్జెక్టుల్లో నుండి మిగిలినవాళ్లను ఎంచుకోవడం**
### దశ 2: ముగింపు పరిస్థితులకు ఈవెంట్ హ్యాండ్లర్లను అప్డేట్ చేయడం
ఇప్పుడు మనం ఈ పరిస్థితి తనిఖీలను గేమ్ ఈవెంట్ సిస్టంలోకి జత చేస్తాము. ప్రతి సారి ఢీకు సంభవించినప్పుడు, అది గేమ్ ముగింపు పరిస్థితిని తిలకిస్తుందో లేదో చాల వెంటనే తనిఖీ చేయబడుతుంది. ఇది గేమ్‌కు తక్షణ ఫీడ్‌బ్యాక్‌ను ఇస్తుంది.
```mermaid
sequenceDiagram
participant Collision
participant GameLogic
participant Conditions
participant EventSystem
participant Display
Collision->>GameLogic: లేజర్ శత్రువును తాకుతుంది
GameLogic->>GameLogic: వస్తువులను ధ్వంసించు
GameLogic->>Conditions: isEnemiesDead() తనిఖీ చేయండి
alt అన్ని శత్రువులు ఓడిపోయారు
Conditions->>EventSystem: GAME_END_WIN విడుదల చేయండి
EventSystem->>Display: విజయ సందేశం చూపించు
else శత్రువులు మిగిలి ఉన్నాయి
Conditions->>GameLogic: గేమ్ కొనసాగించు
end
Collision->>GameLogic: శత్రువు హీరోను తాకుతాడు
GameLogic->>GameLogic: జీవితాలను తగ్గించండి
GameLogic->>Conditions: isHeroDead() తనిఖీ చేయండి
alt జీవితాలు = 0
Conditions->>EventSystem: GAME_END_LOSS విడుదల చేయండి
EventSystem->>Display: పరాభవ సందేశం చూపించు
else జీవాలు మిగిలి ఉన్నాయి
GameLogic->>Conditions: isEnemiesDead() తనిఖీ చేయండి
alt అన్ని శత్రువులు ఓడిపోయారు
Conditions->>EventSystem: GAME_END_WIN విడుదల చేయండి
end
end
```
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
first.dead = true;
second.dead = true;
hero.incrementPoints();
if (isEnemiesDead()) {
eventEmitter.emit(Messages.GAME_END_WIN);
}
});
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
enemy.dead = true;
hero.decrementLife();
if (isHeroDead()) {
eventEmitter.emit(Messages.GAME_END_LOSS);
return; // విజయం కంటే ముందు నష్టం
}
if (isEnemiesDead()) {
eventEmitter.emit(Messages.GAME_END_WIN);
}
});
eventEmitter.on(Messages.GAME_END_WIN, () => {
endGame(true);
});
eventEmitter.on(Messages.GAME_END_LOSS, () => {
endGame(false);
});
```
**ఇక్కడ జరుగుతుందేమిటి:**
- **లేజర్ శత్రువు హోలో**: ఇద్దరూ కనుమరుగవుతారు, మీరు పాయింట్లు పొందుతారు, మీరు గెలిచారా అని తనిఖీ అవుతుంది
- **శత్రువు మీతో ఢీకు పడ్డా**: మీరు ఒక జీవితం కోల్పోతారు, ఇంకా శ్వాసించబోతున్నారా అని తనిఖీ
- **స్మార్ట్ ఆర్డరింగ్**: ముందుగా ఓడిపోయిందా అని తనిఖీ (యారూ గెలిచింది మరియు పోయింది కదా అనుకోవడం మీకు ఇష్టం లేదు!)
- **తక్షణ స్పందనలు**: ఎటువంటి ముఖ్యమైనది జరిగితే గేమ్ తక్షణమే దీనిని తెలుసుకొంటుంది
### దశ 3: కొత్త సందేశ స్థిరాంకాలను జత చేయడం
మీ `Messages` స్థిరాంక మొబ్జెక్టులో కొత్త సందేశ రకాల్ని జత చేయాలి. ఇవి ఈవెంట్ సిస్టమ్‌లో సమరూపత కలిగి ఉండటం మరియు టైపోలను నివారించటానికి సహాయం చేస్తాయి.
```javascript
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
**పై వాటిలో:**
- **గేమ్ ముగింపు ఈవెంట్లకు స్థిరాంకాలు జత చేసినవి**
- **ఈవెంట్ ఉద్దేశాన్ని స్పష్టంగా తెలియజేసే వివరణాత్మక పేర్లు ఉన్నవి**
- **పూర్వపు పేర్లను అనుసరించినవి**
### దశ 4: రీస్టార్ట్ నియంత్రణలు అమలు చేయడం
ఇప్పుడు కీబోర్డు నియంత్రణలు జత చేస్తారు, ఆటగాళ్లకు గేమ్ రీస్టార్ట్ చేసే వీకల్నిచ్చేవి. ఎంటర్ కీ సహజమైన ఎంపిక, ఎందుకంటే సాధారణంగా ఇది ఆమోదం మరియు కొత్త గేమ్స్ ప్రారంభించాలని సూచిస్తుంది.
**మీ దాదాపు ఉన్న keydown ఈవెంట్ లిసనర్‌లో ఎంటర్ కీ గుర్తింపు జత చేయండి:**
```javascript
else if(evt.key === "Enter") {
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
}
```
**కొత్త సందేశ స్థిరాంకాన్ని జత చేయండి:**
```javascript
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```
**మీరు తెలుసుకోవలసినవి:**
- **మీ ఇప్పటికే ఉన్న కీబోర్డ్ ఈవెంట్ హ్యాండ్లింగ్ సిస్టమ్‌ను విస్తరించటం**
- **ఎంటర్ కీని రీస్టార్ట్ ట్రిగ్గర్‌గా ఉపయోగించడం ఉపయోగదాయకం**
- **ఇతర గేమ్ భాగాలు వినేలా కাস্টమ్ ఈవెంట్‌ను విడుదల చేయడం**
- **మీ ఇతర కీ నియంత్రణలతో సమరూప చర్య**
### దశ 5: సందేశ ప్రదర్శన వ్యవస్థను సృష్టించడం
మీ గేమ్ ఫలితాలను స్పష్టంగా ఆటగాళ్లకు తెలియజేయాలి. మనం విజయం మరియు పరాజయ స్థితులను పరిగణించి రంగు-కోడ్ చేసిన టెక్స్ట్ తో ప్రదర్శించే సందేశ వ్యవస్థను తయారుచేస్తాము, పాత కంప్యూటర్ టర్మినల్ లా, ఆకుపచ్చ బాగుంటే, ఎరుపు దోషాలను సూచిస్తుంది.
**`displayMessage()` ఫంక్షన్ సృష్టించండి:**
```javascript
function displayMessage(message, color = "red") {
ctx.font = "30px Arial";
ctx.fillStyle = color;
ctx.textAlign = "center";
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}
```
**దశల వారీగా ఏమవుతోందంటే:**
- **ఫాంట్ పరిమాణం మరియు కుటుంబం సెట్ చేయడం స్పష్టంగా టెక్స్ట్ చదవడానికి**
- **రంగు పరామితి వర్తింపచేస్తుందీ, హెచ్చరికలకు డిఫాల్ట్ గా "ఎరుపు"**
- **టెక్స్ట్‌ను ఆధారంగా నిలువు మరియు తెర మధ్యలో సరిచేయడం**
- **ఆధునిక జావాస్క్రిప్ట్ డిఫాల్ట్ పరామితులు ఉపయోగించడం**
- **కాన్వాస్ 2D కాంటెక్స్ట్ ద్వారా నేరుగా టెక్స్ట్ వేయడం**
**`endGame()` ఫంక్షన్ సృష్టించండి:**
```javascript
function endGame(win) {
clearInterval(gameLoopId);
// ఎటువంటి పెండింగ్ రెండర్స్ పూర్తయ్యేందుకు ఆలస్యం సెట్ చేయండి
setTimeout(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (win) {
displayMessage(
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
"green"
);
} else {
displayMessage(
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
);
}
}, 200)
}
```
**ఈ ఫంక్షన్ చేస్తుంది:**
- **అన్ని యాక్టివిటీలను నిలిపివేస్తుంది - నౌకలు మరియు లేజర్లు కదలవు**
- **చిన్న బ్రేక్ (200మిల్లీసెకన్లు) ఇస్తుంది చివరి ఫ్రేమ్ డ్రాయింగ్ పూర్తి చేసుకోవడానికి**
- **స్క్రీన్‌ను శుభ్రం చేసి నలుపు రంగు పెయింట్ చేస్తుంది గంభీరత కోసం**
- **విజేతలు మరియు ఓడిపోయినవారికి వేరు సందేశాలు చూపిస్తుంది**
- **రంగులను అనుసరిస్తుంది - బాగుండడానికి ఆకుపచ్చ, ఎరుపు మాత్రం... బాగుండదు**
- **ఆటగాళ్లకు తిరిగి ఎలా మొదలు పెట్టాలో చెప్పడం**
### 🔄 **బోధనా తనిఖీ**
**గేమ్ స్థితి నిర్వహణ**: రీసెట్ వ్యవస్థను అమలుపరచేముందు మీకు ఈ విషయాలు అర్థమైందా చూడండి:
- ✅ ముగింపు పరిస్థితులు కसा గేమ్ లక్ష్యాలు స్పష్టంచేస్తాయి
- ✅ ఆటగాడు బాగ భావించేందుకు విజువల్ ఫీడ్బ్యాక్ అవసరం
- ✅ సరైన క్లీనప్ మేమొరీ లీక్ నివారిస్తుంది
- ✅ ఈవెంట్-ఆధారిత వాస్తవానికి శుభ్రమైన స్థితి మార్పులకు సహాయం
**తక్షణ స్వీయ పరీక్ష**: రీసెట్ సమయంలో ఈవెంట్ లిసనర్లను క్లియర్ చేయకపోతే ఏమవుతుంది?
*సమాధానం: మెమొరీ లీకులు, ఈవెంట్ హ్యాండ్లర్లు డూప్లికేట్ కావడం వలన అనిశ్చిత ప్రవర్తన*
**గేమ్ డిజైన్ సూత్రాలు**: మీరు ఇప్పుడు అమలు చేస్తున్నారు:
- **స్పష్ట లక్ష్యాలు**: ఆటగాళ్లు విజయం మరియు విఫలతను స్పష్టంగా తెలుసుకుంటారు
- **తక్షణ ఫీడ్బ్యాక్**: గేమ్ పరిస్థితులు తక్షణమే తెలియజేస్తాయి
- **వినియోగదారు నియంత్రణ**: ఆటగాళ్లు సిద్దంగా ఉన్న సందర్భంలో రీస్టార్ట్ చేయవచ్చు
- **వ్యవస్థ నమ్మకత**: సరైన క్లీనప్ ద్వారా లోపాలు లేని అనుభవం
### దశ 6: గేమ్ రీసెట్ కార్యాచరణ అమలు
రిసెట్ వ్యవస్థ ప్రస్తుతం గేమ్ స్థితిని పూర్తిగా శుభ్రం చేసి, కొత్త గేమ్ సెషన్‌ను ప్రారంభించాలి. ఇది మునుపటి గేమ్ డేటా మిగిలి ఉండకుండా ఒక శుభ్రమైన ప్రారంభాన్ని కలిగిస్తుంది.
**`resetGame()` ఫంక్షన్ సృష్టించండి:**
```javascript
function resetGame() {
if (gameLoopId) {
clearInterval(gameLoopId);
eventEmitter.clear();
initGame();
gameLoopId = setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawPoints();
drawLife();
updateGameObjects();
drawGameObjects(ctx);
}, 100);
}
}
```
**ప్రతి భాగాన్ని అర్థం చేసుకోండి:**
- **గేమ్ లూప్ ప్రస్తుతం నడుస్తోందా చూసుకుంటుంది, అవసరమైతే మాత్రమే రీసెట్ చేస్తుంది**
- **ప్రస్తుతం ఉన్న గేమ్ లూప్ ను నిలిపివేస్తుంది**
- **అన్నీ ఈవెంట్ లిసనర్లను తొలగిస్తుంది, మేమొరీ లీకులు నివారించేందుకు**
- **శుభ్రమైన కొత్త గేమ్ ఆబ్జెక్టులు, వేరియబుల్తో గేమ్ స్థితిని పునఃప్రారంభిస్తుంది**
- **అన్నీ అవసరమైన గేమ్ ఫంక్షన్లతో కొత్త గేమ్ లూప్ ప్రారంభిస్తుంది**
- **100ms అంతరంతో సమానంగా గేమ్ ప్రదర్శన కంటిన్యూ**
**మీ `initGame()` ఫంక్షన్‌లో ఎంటర్ కీ ఈవెంట్ హ్యాండ్లర్ జత చేయండి:**
```javascript
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
resetGame();
});
```
**మీ EventEmitter క్లాసులో `clear()` మెథడ్ జత చేయండి:**
```javascript
clear() {
this.listeners = {};
}
```
**గుర్తుంచుకోాల్సిన ముఖ్యాంశాలు:**
- **ఎంటర్ కీ నొక్కడం ద్వారా గేమ్ రీసెట్ ఫంక్షన్ కలుపుతుంది**
- **గేమ్ ప్రారంభ సమయంలో ఈ ఈవెంట్ లిసనర్ నమోదు అవుతుంది**
- **రిసెట్ సమయంలో అన్ని ఈవెంట్ లిసనర్లను తొలగించేందుకు పద్దతిని అందిస్తుంది**
- **మెమొరీ లీక్‌లను నివారిస్తుంది**
- **లిసనర్ల ఆబ్జెక్టును ఖాళీ చేసి కొత్త స్థితికి సిద్ధం చేస్తుంది**
## అభినందనలు! 🎉
👽 💥 🚀 మీరు మొదట నుండీ పూర్తి గేమ్‌ను విజయవంతంగా నిర్మించారు. 1970లలో మొదటి వీడియో గేమ్స్ నిర్మించిన ప్రోగ్రామర్ల లాగా, మీరు కోడ్ లైన్లను ఒక ఇంటరాక్టివ్ అనుభవంగా మార్చారు, సరైన గేమ్ యాంత్రికతలు మరియు వినియోగదారు ఫీడ్బ్యాక్‌తో. 🚀 💥 👽
**మీరు ఏమి సాధించారంటే:**
- **పూర్తి విజయం మరియు పరాజయ పరిస్థితులను వినియోగదారు ఫీడ్బ్యాక్‌తో అమలు చేశారు**
- **అనుసంధాన రీస్టార్ట్ వ్యవస్థను సృష్టించారు నిరంతర ఆట కోసం**
- **గేమ్ స్థితులను స్పష్టంగా తెలియజేసే విజువల్ కమ్యూనికేషన్ డిజైన్ చేయించారు**
- **స复杂 గేమ్ స్థితి మార్పుల నిర్వహణ మరియు శుభ్రపరిచే విధానాన్ని నిర్వహించారు**
- **అన్ని భాగాలను సమగ్రంగా కలిపి ఆడగలిగే గేమ్‌గా తయారు చేశారు**
### 🔄 **బోధనా తనిఖీ**
**పూర్తి గేమ్ అభివృద్ధి వ్యవస్థ**: మీ గేమ్ అభివృద్ధి ప్రయాణాన్ని జరుపుకోండి:
- ✅ ముగింపు పరిస్థితులు ఆటగాడికి సంతృప్తికర అనుభవాన్ని ఎలా ఇస్తాయి?
- ✅ అందమైన స్థితి నిర్వహణ గేమ్ స్థిరత్వానికి ఎందుకు ముఖ్యం?
- ✅ విజువల్ ఫీడ్బ్యాక్ ఆటగాడి అర్థమెందుకు పెరుగుతుంది?
- ✅ ఆటగాడి నిలుపు కోసం రీస్టార్ట్ వ్యవస్థ పాత్ర ఏమిటి?
**వ్యవస్థ నైపుణ్యం**: మీ పూర్తి గేమ్ చూపిస్తోంది:
- **ఫుల్-స్టాక్ గేమ్ అభివృద్ధి**: గ్రాఫిక్స్, ఇన్పుట్, స్థితి నిర్వహణ
- **ప్రొఫెషనల్ ఆర్కిటెక్చర్**: ఈవెంట్-ఆధారిత వ్యవస్థలు సరైన క్లీనప్‌తో
- **వినియోగదారు అనుభవ డిజైన్**: స్పష్టమైన ఫీడ్‌బ్యాక్, సులభ నియంత్రణలు
- **పనితనపు ఆప్టిమైజేషన్**: సమర్థవంతమైన రెండరింగ్, మెమొరీ నిర్వహణ
- **మృదులత మరియు సంపూర్ణత**: గేమ్ పూర్తి అనిపించే అన్ని వివరాలు
**ఉద్యోగానికి సిద్ధమైన నైపుణ్యాలు**: మీరు అమలు చేసినవి:
- **గేమ్ లూప్ ఆర్కిటెక్చర్**: సమయానికి అనుగుణంగా పనితనం
- **ఈవెంట్-ఆధారిత ప్రోగ్రామింగ్**: విడివిడిగా వ్యవస్థలు, ఎఫెక్టివ్ స్కేలింగ్
- **స్థితి నిర్వహణ**: సంక్లిష్ట డేటా మరియు జీవితచక్ర నిర్వహణ
- **వినియోగదారు ఇంటర్‌ఫేస్ డిజైన్**: స్పష్టమైన కమ్యూనికేషన్, స్పందించే నియంత్రణలు
- **పరీక్ష మరియు డీబగ్గింగ్**: పునరావృత అభివృద్ధి, సమస్యల పరిష్కారం
### ⚡ **తదుపరి 5 నిమిషాల్లో మీరు చేయగలిగేది**
- [ ] మీ పూర్తి గేమ్ ఆడండి మరియు అన్ని విజయం, పరాజయ పరిస్థితులను పరీక్షించండి
- [ ] వివిధ ముగింపు పరిస్థితి పరా‹మీ»‌‌టర్లతో ప్రయోగించండి
- [ ] గేమ్ స్థితి మార్పులను ట్రాక్ చేయడానికి console.log మెసేజ్‌లను జత చేయండి
- [ ] మీ గేమ్‌ను స్నేహితులతో పంచుకోండి మరియు అభిప్రాయాలను సేకరించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
- [ ] పాఠం తర్వాత ప్రశ్నాపత్రాన్ని పూర్తి చేసి మీ గేమ్ అభివృద్ధి ప్రయాణం పై ఆలోచించండి
- [ ] విజయం మరియు పరాజయ పాయింట్లకు ఆడియో ఉపయోగాలు జత చేయండి
- [ ] అదనపు ముగింపు పరిస్థితులు - కాల పరిమితులు లేదా బోనస్ లక్ష్యాలు అమలు చేయండి
- [ ] వేర్వేరు కష్టస్థాయిలు సృష్టించండి, శత్రువుల సంఖ్య మార్లేండి
- [ ] మెరుగైన ఫాంట్లు మరియు రంగులతో విజువల్ ప్రదర్శన నేర్పండి
### 📅 **మీ వారం పాటు గేమ్ అభివృద్ధి నైపుణ్యం**
- [ ] అనేక స్థాయిలు మరియు పురోగతితో మెరుగైన స్పేస్ గేమ్ పూర్తి చేయండి
- [ ] పవర్-అప్స్, విభిన్న శత్రు రకాలు, ప్రత్యేక ఆయుధాల వంటి అధునాతన ఫీచర్లను జత చేయండి
- [ ] స్టోరేజ్ ఉండే హై స్కోర్ సిస్టమ్‌ను సృష్టించండి
- [ ] మెనూలు, సెట్టింగ్స్, గేమ్ ఎంపికలకు యూజర్ ఇంటర్‌ఫేస్ డిజైన్ చేయండి
- [ ] వివిధ పరికరాలు, బ్రౌజర్ల కోసం పనితనాన్ని మెరుగుపర్చండి
- [ ] మీ గేమ్‌ను ఆన్‌లైన్‌లో విడుదల చేసి కమ్యూనిటీలతో పంచుకోండి
### 🌟 **మీ నెల పొడవాటి గేమ్ డెవలప్మెంట్ కెరీర్**
- [ ] విభిన్న శైలులు మరియు యాంత్రికతలను అన్వేషిస్తూ అనేక పూర్తి గేమ్స్ నిర్మించండి
- [ ] Phaser లేదా Three.js వంటి అధునాతన గేమ్ అభివృద్ధి ఫ్రేమ్‌వర్క్‌లను నేర్చుకోండి
- [ ] ఓపెన్ సోర్స్ గేమ్ డెవలప్మెంట్ ప్రాజెక్టులలో భాగస్వామ్యం చేయండి
- [ ] గేమ్ డిజైన్ సూత్రాలు మరియు ప్లేయర్ మానసిక శాస్త్రాన్ని అధ్యయనం చేయండి
- [ ] మీ గేమ్ అభివృద్ధి నైపుణ్యాలను ప్రదర్శించే పోర్టుఫోలియోని సృష్టించండి
- [ ] గేమ్ డెవలప్మెంట్ కమ్యూనిటీతో జోడుకుని సవివరంగా నేర్చుకోండి
## 🎯 మీ పూర్తి గేమ్ డెవలప్మెంట్ నైపుణ్యాల టైమ్‌లైన్
```mermaid
timeline
title పూర్తిగా గేమ్ అభివృద్ధి నేర్చుకునే ప్రగతి
section ఆధారం (పాఠాలు 1-2)
గేమ్ వాస్తవ్య నిర్మాణం: ప్రాజెక్ట్ శృంఖల
: ఆస్తి నిర్వహణ
: కాన్వాస్ ప్రాథమికాలు
: ఈవెంట్ సిస్టమ్స్
section పరస్పర చర్యలు (పాఠాలు 3-4)
ప్లేయర్ నియంత్రణ: ఇన్‌పుట్ నిర్వహణ
: చిరుతపాటు యాంత్రికతలు
: ఢీ కొట్టడము గుర్తింపు
: భౌతిక అనుకరణ
section గేమ్ యాంత్రికతలు (పాఠం 5)
స్పందన సిస్టమ్స్: స్కోరింగ్ యాంత్రికతలు
: జీవితం నిర్వహణ
: దృశ్య కమ్యూనికేషన్
: ప్లేయర్ ప్రేరణ
section గేమ్ పూర్తత (పాఠం 6)
పాలిష్ & ప్రవహం: ముగింపు పరిస్థితులు
: స్టేట్ నిర్వహణ
: పునఃప్రారంభ సిస్టమ్స్
: వినియోగదారు అనుభవం
section అధునాతన లక్షణాలు (1 వారం)
మెరుగుదల నైపుణ్యాలు: ఆడియో సంయోజన
: దృశ్య ప్రభావాలు
: స్థాయి పురోగతి
: పనితీరు ఆప్టిమైజేషన్
section వృత్తిపర నైపుణ్య అభివృద్ధి (1 నెల)
పరిశ్రమ సిద్ధత: ఫ్రేమ్‌వర్క్ నైపుణ్యం
: జట్టు సహకారం
: పోర్ట్‌ఫోలియో అభివృద్ధి
: కమ్యూనిటీ పాల్గొనడం
section వృత్తి ప్రగతి (3 నెలలు)
నిశ్చితీకరణ: అధునాతన గేమ్ ఇంజిన్స్
: వేదిక డిప్లాయ్‌మెంట్
: ఆదాయ స్రోతసు వ్యూహాలు
: పరిశ్రమ నెట్‌వర్కింగ్
```
### 🛠️ మీ పూర్తి గేమ్ డెవలప్మెంట్ టూల్‌కిట్ సారాంశం
సంభంధిత అన్ని స్పేస్ గేమ్ సిరీస్ పూర్తి చేసిన తర్వాత, మీరు ఇప్పుడు ఈ విషయాలలో నైపుణ్యం పొందారు:
- **గేమ్ ఆర్కిటెక్చర్**: ఈవెంట్-డ్రివెన్ సిస్టమ్స్, గేమ్ లూప్స్, మరియు స్టేట్ మేనేజ్‌మెంట్
- **గ్రాఫిక్స్ ప్రోగ్రామింగ్**: కాన్వాస్ API, స్ప్రైట్ రెండరింగ్, మరియు దృశ్య ప్రభావాలు
- **ఇన్‌పుట్ సిస్టమ్స్**: కీబోర్డ్ హాండ్లింగ్, కోలిజన్ డిటెక్షన్, మరియు రెస్పాన్సివ్ కంట్రోల్‌లు
- **గేమ్ డిజైన్**: ప్లేయర్ ఫీడ్బ్యాక్, ప్రోగ్రెషన్ సిస్టమ్స్, మరియు ఎంగేజ్‌మెంట్ యాంత్రికతలు
- **పర్ఫార్మెన్స్ ఆప్టిమైజేషన్**: సమర్థవంతమైన రెండరింగ్, మెమరీ నిర్వహణ, మరియు ఫ్రేమ్ రేట్ కంట్రోల్
- **యూజర్ అనుభవం**: స్పష్టమైన కమూనికేషన్, సులభమైన కంట్రోల్‌లు, మరియు శ్రద్ధతో కూడిన వివరాలు
- **ప్రొఫెషనల్ ప్యాటర్న్స్**: క్లీన్ కోడ్, డీబగ్గింగ్ సాంకేతికతలు, మరియు ప్రాజెక్ట్ ఆర్గనైజేషన్
**ప్రాక్టికల్ వరల్డ్ అప్లికేషన్స్**: మీ గేమ్ అభివృద్ధి నైపుణ్యాలు నేరుగా వర్తిస్తాయి:
- **ఇంటరాక్టివ్ వెబ్ అప్లికేషన్స్**: డైనమిక్ ఇంటర్‌ఫేస్‌లు మరియు రియల్-టైమ్ సిస్టమ్స్
- **డేటా విజువలైజేషన్**: అనిమేటెడ్ చార్ట్స్ మరియు ఇంటరాక్టివ్ గ్రాఫిక్స్
- **ఎడ్యుకేషనల్ టెక్నాలజీ**: గేమిఫికేషన్ మరియు ఆకర్షకమైన విద్యా అనుభవాలు
- **మొబైల్ డెవలప్మెంట్**: టచ్ ఆధారిత ఇంటరాక్షన్స్ మరియు పనితీరు మెరుగుదల
- **సిమ్యూలేషన్ సాఫ్ట్‌వేర్**: ఫిజిక్స్ ఇంజిన్‌లు మరియు రియల్-టైమ్ మోడలింగ్
- **సృజనాత్మక పరిశ్రమల**: ఇంటరాక్టివ్ ఆర్ట్, వినోదం, మరియు డిజిటల్ అనుభవాలు
**ప్రొఫెషనల్ స్కిల్స్ సొంతం చేసుకున్నారు**: మీరు ఇప్పుడు చేయగలరు:
- **ఆర్కిటెక్ట్** సవాలుల interactive systems from scratch
- **డీబగ్గ్** సిస్టమెటిక్ పద్ధతుల ద్వారా రియల్-టైమ్ అప్లికేషన్స్
- **ఆప్టిమైజ్** పనితీరు మెరుగుదల కోసం
- **డిజైన్** ఆకర్షణీయమైన యూజర్ ఇంటర్‌ఫేస్‌లు మరియు ఇంటరాక్షన్ ప్యాటర్న్స్
- **కలాబొరేట్** సాంకేతిక ప్రాజెక్టులపై సమర్థవంతంగా మరియు సరైన కోడ్ ఆర్గనైజేషన్‌తో
**గేమ్ డెవలప్మెంట్ సూత్రాలు నైపుణ్యం**:
- **రియల్-టైమ్ సిస్టమ్స్**: గేమ్ లూప్స్, ఫ్రేమ్ రేట్ మేనేజ్‌మెంట్, మరియు పనితీరు
- **ఈవెంట్-డ్రివెన్ ఆర్కిటెక్చర్**: డికపుల్ సిస్టమ్స్ మరియు మెసేజ్ పాసింగ్
- **స్టేట్ మేనేజ్‌మెంట్**: క్లిష్టమైన డేటా హ్యాండ్లింగ్ మరియు లైఫ్‌సైకిల్ నిర్వహణ
- **యూజర్ ఇంటర్‌ఫేస్ ప్రోగ్రామింగ్**: కాన్వాస్ గ్రాఫిక్స్ మరియు రెస్పాన్సివ్ డిజైన్
- **గేమ్ డిజైన్ సిద్ధాంతం**: ప్లేయర్ మానసిక శాస్త్రం మరియు ఎంగేజ్‌మెంట్ యాంత్రికతలు
**తరువాయి స్థాయి**: మీరు ఇప్పుడు అధునాతన గేమ్ ఫ్రేమ్‌వర్క్‌లు, 3D గ్రాఫిక్స్, మల్టిప్లేయర్ సిస్టమ్స్ అన్వేషించేందుకు లేదా ప్రొఫెషనల్ గేమ్ డెవలప్మెంట్ పాత్రల్లోకి మారేందుకు సిద్ధంగా ఉన్నారు!
🌟 **అధిగమించబడింది**: మీరు ఒక పూర్తి గేమ్ డెవలప్మెంట్ ప్రయాణం పూర్తి చేసి, ప్రారంభం నుండి ప్రొఫెషనల్-నాణ్యత ఇంటరాక్టివ్ అనుభవాన్ని నిర్మించారు!
**గేమ్ డెవలప్మెంట్ కమ్యూనిటీకి స్వాగతం!** 🎮✨
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఈ క్రింది ఛాలెంజ్‌ను పూర్తిచేయడానికి ఏజెంట్ మోడ్ ఉపయోగించండి:
**వివరణ:** స్థాయి ప్రగతిని కలిగించే సిస్టమ్‌తో స్పేస్ గేమ్‌ను మెరుగుపరచండి, ఇబ్బంది పెరుగుతూ, బోనస్ ఫీచర్లతో కూడినది.
**ప్రాంప్ట్:** ప్రతి స్థాయిలో ఎక్కువ శత్రు కష్టపడి, వేగం మరియు ఆరోగ్యం పెరిగిన శత్రు నౌకలు ఉన్న బహుళ-స్థాయి స్పేస్ గేమ్ సిస్టమ్ సృష్టించండి. స్థాయి పెరిగే కొద్దీ స్కోరింగ్ మల్టిప్లయిర్ పెరుగుతుంది, మరియు శత్రుం నాశనం అయ్యేటప్పుడు యాదృచ్ఛికంగా కనిపించే పవర్-అప్స్ (ఉదా: రాపిడ్ ఫైర్ లేదా షీల్డ్)ను అమలు చేయండి. ఒక స్థాయి పూర్తి బోనస్ చేర్చండి మరియు స్కోరు, జీవితాలతో పాటు ప్రస్తుత స్థాయిని స్క్రీన్‌పై ప్రదర్శించండి.
మరింత తెలుసుకోండి [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ఇక్కడ.
## 🚀 ఎంపిక సంస్కరణ ఛాలెంజ్
**మీ గేమ్‌కు ఆడియో జోడించండి**: సౌండ్ ఎఫెక్ట్స్ అమలు చేయడం ద్వారా మీ గేమ్ అనుభవాన్ని మెరుగుపరిచండి! ఆడియో జోడించడానికి ఆలోచించండి:
- **లేజర్ షాట్స్** గేమర్ అగ్ని వెళ్ళించినప్పుడు
- **శత్రు ధ్వంసం** నౌకలు కొట్టబడినప్పుడు
- **హీరో నష్టం** ప్లేయర్ హిట్ అయినప్పుడు
- **విజయ సంగీతం** గేమ్ గెలిచినప్పుడు
- **తొలగింపు ధ్వని** గేమ్ తిసిపోతే
**ఆడియో అమలుకరణ ఉదాహరణ:**
```javascript
// ఆడియో ఆబ్జెక్ట్స్ తయారుచేయండి
const laserSound = new Audio('assets/laser.wav');
const explosionSound = new Audio('assets/explosion.wav');
// ఆట సంఘటనల సమయంలో శబ్దాలు ప్లే చేయండి
function playLaserSound() {
laserSound.currentTime = 0; // ప్రారంభానికి రీసెట్ చేయండి
laserSound.play();
}
```
**మీకు తెలుసుకోగల అవసరం:**
- **Audio ఆబ్జెక్ట్స్ సృష్టిస్తుంది** వేరు వేరు సౌండ్ ఎఫెక్ట్స్ కోసం
- **`currentTime` రీసెట్ చేయడం** తక్షణ సౌండ్ ప్లే కోసం
- **బ్రౌజర్ ఆటోప్లే విధానాలు నిర్వహించడం** వినియోగదారు పరస్పర చర్యల ద్వారా
- **ఆడియో వాల్యూమ్ మరియు టైమింగ్ నిర్వహణ** మెరుగైన గేమ్ అనుభవం కోసం
> 💡 **నియంత్రణ వనరు**: ఈ [audio sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) ను అన్వేషించి జావాస్క్రిప్ట్ గేమ్స్‌లో ఆడియో అమలు గురించి మరింత తెలుసుకోండి.
## పోస్ట్-లెక్చర్ క్విజ్
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/40)
## సమీక్ష & స్వీయ అధ్యయనం
మీ అసైన్‌మెంట్ ఒక తాజా నమూనా గేమ్ సృష్టించడం, కాబట్టి అక్కడి కొన్ని ఆసక్తికర గేమ్స్ అన్వేషించి మీరు ఏ రకమైన గేమ్ తయారు చేయగలరో చూడండి.
## అసైన్‌మెంట్
[Build a Sample Game](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**నిర్లక్ష్యం**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరిగ్గా ఉండేందుకు ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాలలో తప్పులు లేదా అశాల్యతలు ఉండవచ్చు. మూల పత్రం దాని స్థానిక భాషలో అధికారిక మూలంగా పరిగణించబడాలి. ముఖ్య సమాచారం కోసం, నిపుణుల చేతిచేయబడిన అనువాదం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వలన కలిగే ఏదైనా అపార్థాలు లేదా తప్పుదిద్దుల కోసం మేము బాధ్యులు కావము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

173
translations/te/6-space-game/6-end-condition/assignment.md
Unescape View File

@ -0,0 +1,173 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "232d592791465c1678cab3a2bb6cd3e8",
"translation_date": "2026-01-08T13:59:37+00:00",
"source_file": "6-space-game/6-end-condition/assignment.md",
"language_code": "te"
}
-->
# ఒక నమూనా ఆటను నిర్మించండి
## అసైన్‌మెంట్ అవలోకనం
మీరు స్పేస్ గేమ్‌లో గేమ్ ముగింపు పరిస్థితులు మరియు రీస్టార్ట్ ఫంక్షనాలిటీని పాలించుకున్నాక, ఇప్పుడు మీరు ఈ భావనలను పూర్తిగా కొత్త గేమింగ్ అనుభవంలో వర్తింప చేయాలి. మీరు వివిధ ముగింపు పరిస్థితి నమూనాలను మరియు రీస్టార్ట్ మెకానిక్స్‌ను ప్రదర్శించే మీ స్వంత ఆటను డిజైన్ చేసి నిర్మించాలి.
ఈ అసైన్‌మెంట్ మీకు ఆట రూపకల్పన గురించి సృజనాత్మకంగా ఆలోచించడానికి మరియు మీరు నేర్చుకున్న సాంకేతిక నైపుణ్యాలను అభ్యాసం చేయడానికి సవాలు చేస్తుంది. మీరు వివిధ విజయం మరియు పరాజయ దృశ్యాలను అన్వేషించి, ప్లేయర్ పురోగతిని అనుసరించి, ఆకట్టుకునే రీస్టార్ట్ అనుభవాలను సృష్టిస్తారు.
## ప్రాజెక్ట్ అవసరాలు
### ప్రాథమిక ఆట లక్షణాలు
మీ ఆటలో ఈ క్రింది ప్రధాన అంశాలు ఉండాలి:
**ముగింపు పరిస్థితుల వైవిధ్యం**: ఆట ముగియగల రెండు వేరువేరు మార్గాలను అమలు చేయండి:
- **పాయింట్-ఆధారిత విజయం**: ప్లేయర్ లక్ష్య స్కోర్ చేరుకోటం లేదా నిర్దిష్ట అంశాలను సేకరించడం
- **జీవిత ఆధారిత పరాజయము**: ప్లేయర్ అందుబాటులో ఉన్న అన్ని జీవులను లేదా ఆరోగ్య పాయింట్లను కోల్పోతాడు
- **విషయం పూర్తి చేయడం**: అన్ని శత్రువులు ఓడించి, నిర్దిష్ట అంశాలు సేకరించి లేదా లక్ష్యాలు సాధించడం
- **సమయం ఆధారిత**: ఆట సెట్ చేసిన వ్యవధి తర్వాత లేదా కౌంట్డౌన్ మార్గం నులుకి చేరినప్పుడు ముగుస్తుంది
**రీస్టార్ట్ ఫంక్షనాలిటీ**:
- **ఆట స్థితిని శుభ్రం చేయండి**: పూర్వపు ఆట వస్తువులన్నీ తొలగించి వేరియబుల్స్ రీసెట్ చేయండి
- **వ్యవస్థలను మళ్లీ ప్రారంభించండి**: కొత్త ప్లేయర్ స్టాట్స్, శత్రువులు మరియు లక్ష్యాలతో సరికొత్తగా ప్రారంభించండి
- **వినియోగదారుకి స్నేహపూర్వక నియంత్రణలు**: ఆటను రీస్టార్ట్ చేసేందుకు స్పష్టమైన సూచనలు ఇవ్వండి
**ప్లేయర్ అభిప్రాయం**:
- **విజయ సందేశాలు**: ప్లేయర్ సాధనలను గర్వంగా ప్రదర్శిస్తూ సానుకూల స్పందనలు ఇవ్వండి
- **పరాజయ సందేశాలు**: మళ్ళీ ఆడడానికి ప్రేరేపించే ప్రేరణాత్మక సందేశాలు అందించండి
- **పురోగతి సూచికలు**: ప్రస్తుత స్కోర్, జీవులు లేదా లక్ష్యం స్థితి చూపించండి
### ఆట ఆలోచనలు మరియు ప్రేరణ
ఈ గేమ్ సంకల్పాలలో ఒకదాన్ని ఎంచుకోండి లేదా మీ స్వంతదాన్ని సృష్టించండి:
#### 1. కన్సోల్ అడ్వెంచర్ గేమ్
పోరాట యాంత్రికతలతో ఒక టెక్స్ట్ ఆధారిత అడ్వెంచర్ సృష్టించండి:
```
Hero> Strikes with broadsword - orc takes 3p damage
Orc> Hits with club - hero takes 2p damage
Hero> Kicks - orc takes 1p damage
Game> Orc is defeated - Hero collects 2 coins
Game> ****No more monsters, you have conquered the evil fortress****
```
**అమలు చేయాల్సిన కీలక అంశాలు:**
- **టర్న్-ఆధారిత పోరాటం** వేరువేరు దాడి ఎంపికలతో
- ప్లేయర్ మరియు శత్రువులకు **ఆరోగ్య పాయింట్లు**
- నాణేలు లేదా అంశాలను సేకరించడానికి **ఇన్వెంటరీ సిస్టమ్**
- **వేర్వేరు శత్రు రకాలు** వేర్వేరు కష్టం స్థాయిలతో
- అన్ని శత్రువులు ఓడినప్పుడు **విజయ పరిస్థితి**
#### 2. సేకరణ ఆట
- **లక్ష్యం**: నిర్దిష్ట అంశాలను సేకరించండి, ఆటంకాలను తప్పించండి
- **ముగింపు పరిస్థితులు**: లక్ష్య సేకరణ సంఖ్య చేరుకోవడం లేదా అన్ని జీవులు కోల్పోవడం
- **పురోగతి**: ఆట కొనసాగుతున్న కొద్దీ అంశాలను పొందడం కష్టం అవుతుంది
#### 3. పజిల్ ఆట
- **లక్ష్యం**: పెరుగుతున్న కష్టతరమైన పజిల్స్‌ను పరిష్కరించండి
- **ముగింపు పరిస్థితులు**: అన్ని స్థాయిలను పూర్తి చేయడం లేదా ప్రయాణాలు/సమయం ఆగిపోవడం
- **రీస్టార్ట్**: మొదటి స్థాయికి మరియు ఖాళీ పురోగతితో రీసెట్ చేయడం
#### 4. రక్షణ ఆట
- **లక్ష్యం**: మీ బేస్‌ను శత్రువు తరంగాల నుండి రక్షించండి
- **ముగింపు పరిస్థితులు**: అన్ని తరంగాలలో జీవించటం (విజయం) లేదా బేస్ ధ్వంసం (పరాజయం)
- **పురోగతి**: శత్రువు తరంగాలు కష్టం మరియు సంఖ్య పెరుగుతుంది
## అమలు మార్గదర్శకాలు
### ప్రారంభించడం
1. **మీ ఆట రూపకల్పనను ప్రణాళిక చేయండి**:
- ప్రాథమిక గేమ్‌ప్లే లూప్‌ను క్రోారపు చేసుకోండి
- మీ ముగింపు పరిస్థితులను స్పష్టంగా నిర్వచించండి
- రీస్టార్ట్ సమయంలో రీసెట్ చేయాల్సిన డేటాను గుర్తించండి
2. **మీ ప్రాజెక్ట్ నిర్మాణాన్ని సెట్ చేయండి**:
```
my-game/
├── index.html
├── style.css
├── game.js
└── README.md
```
3. **మీ ప్రాథమిక ఆట లూప్‌ను సృష్టించండి**:
- ఆట స్థితిని ప్రారంభించండి
- వినియోగదారు ఇన్‌పుట్‌ను హ్యాండిల్ చేయండి
- ఆట తర్కాన్ని అప్డేట్ చేయండి
- ముగింపు పరిస్థితులను తనిఖీ చేయండి
- ప్రస్తుత స్థితిని రెండర్ చేయండి
### సాంకేతిక అవసారాలు
**ఆధునిక జావాస్క్రిప్ట్ ఉపయోగించండి**:
- వేరియబుల్స్ డిక్లరేషన్‌లకు `const` మరియు `let` ఉపయోగించండి
- అవసరమైతే ఆరో ఫంక్షన్లను ఉపయోగించండి
- ES6+ ఫీచర్లు, టెంప్లేట్ లిటరల్స్ మరియు డిస్ట్రక్చరింగ్ అమలు చేయండి
**ఈవెంట్ ఆధారిత వాస్తవికత**:
- వినియోగదారుని చర్యలకు ఈవెంట్ హ్యాండ్లర్లను సృష్టించండి
- ఈవెంట్‌ల ద్వారా ఆట స్థితి మార్పులను అమలు చేయండి
- రీస్టార్ట్ ఫంక్షనాలిటీకి ఈవెంట్ లిస్నర్లను ఉపయోగించండి
**శుభ్రమైన కోడ్ అభ్యాసాలు**:
- ఒకే బాధ్యత కలిగిన ఫంక్షన్లను వ్రాయండి
- వేరియబుల్స్ మరియు ఫంక్షన్లకు వివరణాత్మక పేర్లు ఇవ్వండి
- ఆట తర్కం మరియు నియమాలను వ్యాఖ్యలతో వివరించండి
- కోడ్‌ను తర్కమేనైన విభాగాలుగా ఏర్పాటు చేయండి
## సమర్పణ అవసరాలు
### అందించవలసినవి
1. **సంపూర్ణ ఆట ఫైల్స్**: మీ ఆట నడిపేందుకు అవసరమైన అన్ని HTML, CSS మరియు JavaScript ఫైల్స్
2. **README.md**: ఇది శోధన:
- మీ ఆట ఎలా ఆడాలి
- మీరు అమలు చేసిన ముగింపు పరిస్థితులు
- రీస్టార్ట్ చేయడానికి సూచనలు
- ఏ వామదాలు లేదా యాంత్రికాలు ఉన్నయో
3. **కోడ్ వ్యాఖ్యలు**: మీ ఆట తర్కం మరియు అల్గోరిథమ్‌లకు స్పష్టమైన వివరణలు
### పరీక్షా చెక్‌లిస్ట్
సమర్పించే ముందు, మీరు ఆటను తనిఖీ చేయండి:
- [ ] **బ్రౌజర్ కన్సోల్‌లో పొరపాట్ల లేకుండా నడుస్తుంది**
- [ ] **నిర్దిష్టించినట్టు బహుళ ముగింపు పరిస్థితులను అమలు చేసింది**
- [ ] **తగ్గిన స్థితిని రీసెట్ చేస్తూ సరిగ్గా రీస్టార్ట్ అవుతుంది**
- [ ] **ఆట స్థితికి సంబంధించిన స్పష్టమైన అభిప్రాయం అందిస్తుంది**
- [ ] **ఆధునిక జావాస్క్రిప్ట్ సింటాక్స్ మరియు ఉత్తమ అభ్యాసాలను ఉపయోగిస్తుంది**
- [ ] **README.md లో సమగ్ర డాక్యుమెంటేషన్ ఉంది**
## మూల్యాంకన రూబ్రిక్
| ప్రమాణాలు | ఉత్తమం (4) | ప్రావీణ్యం (3) | అభివృద్ధి (2) | ప్రారంభం (1) |
|----------|-------------|----------------|---------------|------------|
| **ఆట ఫంక్షనాలిటీ** | బహుళ ముగింపు పరిస్థితులతో పూర్తి ఆట, సున్నితమైన రీస్టార్ట్ మరియు మెరుగు గేమ్‌ప్లే అనుభవం | ప్రాథమిక ముగింపు పరిస్థితులు మరియు పని చేసే రీస్టార్ట్ మెకానిజం ఉన్న పూర్తి ఆట | కొన్ని ముగింపు పరిస్థితుల అమలు ఉన్న భాగస్వామ్య ఆట, రీస్టార్ట్ చిన్న సమస్యలతో ఉండవచ్చు | పరిమితం గల ఆట, సన్నిహితమైన బగ్‌లు మరియు అపరిపూర్ణమైన ఫంక్షనాలిటీ |
| **కోడ్ నాణ్యత** | ఆధునిక జావాస్క్రిప్ట్ అభ్యాసాలతో శుభ్రమైన, బాగా సుస్థిరమైన కోడ్, సమగ్ర వ్యాఖ్యలు మరియు అద్భుతమైన నిర్మాణం | ఆధునిక సింటాక్స్, తగిన వ్యాఖ్యలు, స్పష్టమైన నిర్మాణంతో మంచి కోడ్ | ఆధునిక అభ్యాసాలు కొంతమేర అమలు చేసిన ప్రాథమిక కోడ్ | పాత సింటాక్స్, వ్యాఖ్యలు లేమి, కుదురని కోడ్ నిర్మాణం |
| **వినియోగదార అనుభవం** | స్పష్టమైన సూచనలతో అంతులేని గేమ్‌ప్లే, అద్భుతమైన అభిప్రాయం, ఆకర్షణీయ ముగింపు/రీస్టార్ట్ అనుభవం | మంచి గేమ్‌ప్లే, సరిపడని సూచనలు మరియు అభిప్రాయం, పని చేసే ముగింపు/రీస్టార్ట్ | తక్కువ సూచనలు, పరిమిత అభిప్రాయం ఉన్న ప్రాథమిక గేమ్‌ప్లే | అగోచర సూచనలు, కనీస అభిప్రాయం గల గందరగోళమైన గేమ్‌ప్లే |
| **సాంకేతిక అమలు** | ఆట అభివృద్ధి భావనలు, ఈవెంట్ హ్యాండ్లింగ్, స్థితి నిర్వహణలో నైపుణ్యం చూపిస్తుంది | మంచి ఆలోచనతో కష్టతరమైన అమలు చూపిస్తుంది | ఆలోచన తెలియజేసే ప్రాథమిక అమలు | తక్కువ అవగాహన మరియు బాగుపరచని అమలు |
| **డాక్యుమెంటేషన్** | స్పష్టమైన సూచనలు, బాగా డాక్యుమెంటెడ్ కోడ్, పూర్తి పరీక్షా సాక్ష్యాల కలిగిన సమగ్ర README | సరిపడిన సూచనలు మరియు రాయబారాలను కలిగి మంచి డాక్యుమెంటేషన్ | తక్కువ సూచనలు కలిగిన ప్రాథమిక డాక్యుమెంటేషన్ | డాక్ లేమి లేదా అందుబాటులో లేదు |
### గ్రేడింగ్ స్కేలు
- **ఉత్తమం (16-20 పాయింట్లు)**: సృజనాత్మక లక్షణాలతో మరియు మెరుగైన అమలుతో అంచనాలను మించిపోతోంది
- **ప్రావీణ్యం (12-15 పాయింట్లు)**: అన్ని అవసరాలను చక్కగా నెరవేర్చింది
- **అభివృద్ధి (8-11 పాయింట్లు)**: ఎక్కువ భాగాన్ని నెరవేర్చింది, కాస్త సమస్యలతో
- **ప్రారంభం (4-7 పాయింట్లు)**: కొంత భాగాన్ని నెరవేర్చింది కానీ పెద్ద మెరుగుదల అవసరం
## అదనపు నేర్చుకోవడపు వనరులు
- [MDN గేమ్ డెవలప్‌మెంట్ గైడ్](https://developer.mozilla.org/en-US/docs/Games)
- [జావాస్క్రిప్ట్ గేమ్ డెవలప్‌మెంట్ ట్యుటోరియల్స్](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
- [కాన్వాస్ API డాక్యుమెంటేషన్](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
- [గేమ్ డిజైన్ సూత్రాలు](https://www.gamasutra.com/blogs/)
> 💡 **ప్రో టిప్**: సులభంగా ప్రారంభించి, లక్షణాలను దశలవారీగా జోడించండి. బగ్స్ లేని, బాగా మెరుగైన సాదాసీదా ఆట ఒక క్లిష్టమైన ఆట కన్నా మెరుగ్గా ఉంటుంది!
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**డిస్‌క్లైమర్**:
ఈ డాక్యుమెంట్ [Co-op Translator](https://github.com/Azure/co-op-translator) AI అనువాద సేవ ఉపయోగించి అనువాదం చేయబడింది. మనం సరైనతకి శ్రద్ధ పెట్టినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా లోపాలు ఉండవచ్చు. అసలైన డాక్యుమెంట్ స్థానిక భాషలోని అధికారిక మూలంగా పరిగణించాలి. కీలక సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం చేయించుకోవడం మంచిది. ఈ అనువాదంతో ఉద్దిగొల్పిన ఏ వెచ్చ పాత్రనైనా లేదా తప్పుగా అర్థం చేసుకోవడంపై మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

17
translations/te/6-space-game/6-end-condition/solution/README.md
Unescape View File

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2026-01-08T15:01:29+00:00",
"source_file": "6-space-game/6-end-condition/solution/README.md",
"language_code": "te"
}
-->
ఇది ఒక ప్లేస్‌హోల్డర్, ఉద్దేశపూర్వకంగా ఖాళీగా ఉంచబడింది
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**మార్పిడి గమనిక**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. సరిగా అనువదించాలని ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా అపార్థాలు ఉండవచ్చు. మూల డాక్యుమెంట్ దాని స్వభావ భాషలోనే అధికృత మూలంగా పరిగణించబడాలి. ముఖ్యమైన సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదాన్ని సూచిస్తున్నాము. ఈ అనువాదాన్ని ఉపయోగించడంవల్ల కలిగే ఏవైనా అపార్థాలు లేదా తప్పుదారుల responsabilidade మేము తీసుకోము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

17
translations/te/6-space-game/6-end-condition/your-work/README.md
Unescape View File

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2026-01-08T15:00:41+00:00",
"source_file": "6-space-game/6-end-condition/your-work/README.md",
"language_code": "te"
}
-->
ఇది ఒక తాత్కాలిక స్థానం, ఉద్దేశపూర్వకంగా ఖాళీగా వేశారు.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అసమర్పణ**:
ఈ డాక್ಯుమెంట్ [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవ ఉపయోగించి అనువాదం చేయబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తే కూడా, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా తప్పులుండే అవకాశం ఉంది. మౌలిక భాషలో ఉన్న అసలు డాక్యుమెంట్ అందుబాటులో ఉన్న అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం వాడుక ద్వారా ఏర్పడే ఏమైనా తప్పుడు అర్థం లేదా తప్పుడు అర్థాగ్రహణలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

47
translations/te/6-space-game/README.md
Unescape View File

@ -0,0 +1,47 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c40a698395ee5102715f7880bba3f2e7",
"translation_date": "2026-01-08T11:10:04+00:00",
"source_file": "6-space-game/README.md",
"language_code": "te"
}
-->
# స్పేస్ గేమ్ ను నిర్మించండి
మరింత ప్రగతిశీలమైన జావాస్క్రిప్ట్ బేసిక్ వివరాలను నేర్పించే ఒక స్పేస్ గేమ్
ఈ పాఠంలో మీరు మీ స్వంత స్పేస్ గేమ్ ఎలా నిర్మించాలో నేర్చుకుంటారు. మీరు "స్పేస్ ఇన్వేడర్స్" అనే గేమ్ ఆడినట్లయితే, ఈ గేమ్ కూడా అదే ఆలోచనను కలిగి ఉంటుంది: ఒక స్పేస్షిప్ ను నియంత్రించి, పై నుండి దిగుతున్న మన్స్టర్స్ పై తగిలించడానికి. ఇక్కడ తుదిపరిణామ గేమ్ ఎలా ఉంటుందో చూడండి:
![Finished game](../../../6-space-game/images/pewpew.gif)
ఈ ఆరు పాఠాల్లో మీరు ఇలా నేర్చుకుంటారు:
- స్క్రీన్ పై చిత్రాలను చిత్రించడానికి కేన్వాస్ ఎలిమెంట్ తో **ఇంటరాక్ట్** చేయడం
- కార్టెసియన్ కోఆర్డినేటు సిస్టమ్ ను **అర్ధం చేసుకోవడం**
- నిర్వహణలో మరియు విస్తరణలో సులభత కోసం సౌండ్ గేమ్ ఆర్కిటెక్చర్ సృష్టించడానికి పబ్-సబ్ ప్యాటర్న్ **నెరLearn** చేయడం
- గేమ్ వనరులను లోడ్ చేయడానికి అసింక్/అవైట్ ను **ఉపయోగించడం**
- కీబోర్డు ఈవెంట్లను **నిర్వహించడం**
## అవలోకనం
- సిద్ధాంతం
- [జావాస్క్రిప్ట్ తో గేమ్స్ నిర్మాణానికి పరిచయం](1-introduction/README.md)
- ప్రాక్టీస్
- [కేన్వాస్ పై డ్రాయింగ్](2-drawing-to-canvas/README.md)
- [స్క్రీన్ లో ఎలిమెంట్లను తరలించడం](3-moving-elements-around/README.md)
- [ఘర్షణ గుర్తింపు](4-collision-detection/README.md)
- [స్కోర్ ను నిర్వహించడం](5-keeping-score/README.md)
- [గేమ్ ముగింపు మరియు పునఃప్రారంభం](6-end-condition/README.md)
## క్రెడిట్స్
ఈ గేమ్ కోసం ఉపయోగించిన మూలాలు https://www.kenney.nl/ నుండి వచ్చాయి.
మీరు గేమ్స్ నిర్మించడంలో ఆసక్తి ఉంటే, ఇవి నిజంగా మంచి మూలాలు, చాలా వాటి ఉచితం మరియు కొన్ని చెల్లింపుతో ఉన్నాయి.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**తేదీలు**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ను ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వం కోసం యత్నించినప్పటికీ, యంత్ర అనువాదాలు లోపాలు లేదా తప్పులు ఉండవచ్చని దయచేసి గమనించండి. ఒరిజినల్ డాక్యుమెంట్ native భాషలో ఉందనే సంగతి, అది అధికారిక మూలం అని పరిగణించి మెల్లగా తీసుకోండి. కీలకమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదాన్ని సిఫార్సు చేస్తాము. ఈ అనువాదం వలన సంభవించే ఏవైనా తప్పుదోవ పట్టుకోవడాలు లేదా తప్పుల పైన మేము బాధ్యత వహించమని తెలియజేస్తాము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

17
translations/te/6-space-game/solution/README.md
Unescape View File

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2026-01-08T14:36:24+00:00",
"source_file": "6-space-game/solution/README.md",
"language_code": "te"
}
-->
ఇది ఒక ప్లేస్‌హోల్డర్, ఉద్దేశపూర్వకంగా ఖాళీగా వదిలారు
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**సమాచార నిరాకరణ**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వాన్ని లక్ష్యంగా పలుకుతున్నా, ఆటోమేటెడ్ అనువాదాల్లో లోపాలు లేదా తప్పుడు సమాచారం ఉండవచ్చు. స్థానిక భాషలోని ఒరిజినల్ పత్రం అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదాన్ని పొందటం ఉత్తమం. ఈ అనువాదం వలన కలిగిన ఏదైనా పొరపాట్లు లేదా తప్పుదారుల కోసం మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

834
translations/te/7-bank-project/1-template-route/README.md
Unescape View File

@ -0,0 +1,834 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "351678bece18f07d9daa987a881fb062",
"translation_date": "2026-01-08T16:42:24+00:00",
"source_file": "7-bank-project/1-template-route/README.md",
"language_code": "te"
}
-->
# బ్యాంకింగ్ యాప్‌ భాగం 1: వెబ్ యాప్‌లో HTML టెంప్లేట్లు మరియు రూట్లు
```mermaid
journey
title మీ బ్యాంకింగ్ యాప్ అభివృద్ధి ప్రయాణం
section SPA ప్రాథమికాలు
సింగిల్-పేజీ యాప్స్ ని అర్థం చేసుకోండి: 3: Student
టెంప్లేట్ ধারণాలను నేర్చుకోండి: 4: Student
DOM మానిప్యులేషన్ లో నైపుణ్యం సాధించండి: 4: Student
section రౌటింగ్ వ్యవస్థలు
క్లయింట్-సైడ్ రౌటింగ్ ని అమలు చేయండి: 4: Student
బ్రౌజర్ చరిత్రను నిర్వహించండి: 5: Student
నావిగేషన్ వ్యవస్థలను సృష్టించండి: 5: Student
section వృత్తిపరమైన నమూనాలు
మాడ్యులర్ ఆర్కిటెక్చర్ ని నిర్మించండి: 5: Student
ఉత్తమ ఆచారాలను వర్తించండి: 5: Student
యూజర్ అనుభవాలను సృష్టించండి: 5: Student
```
1969లో అపోలో 11 యొక్క గైడెన్స్ కంప్యూటర్ చంద్రుడి వైపు నావిగేట్ అయినప్పుడు, అది మొత్తం సిస్టమ్‌ను రీస్టార్ట్ చేయకుండా వివిధ ప్రోగ్రామ్‌ల మధ్య మార్పులు చేయాల్సి వచ్చింది. ఆధునిక వెబ్ అప్లికేషన్లు కూడా సమానంగా పనిచేస్తాయి – అవి మీరు చూసే విషయాన్ని పూర్తిగా రీలోడ్ చేయకుండా మార్చుతాయి. ఇది నేడు వినియోగదారులు ఆశించే సున్నితమైన, స్పందనक्षम అనుభవాన్ని సృష్టిస్తుంది.
ప్రస్తుత కాలపు వెబ్ యాప్‌లు ప్రతి ఇంటరాక్షన్‌కు పూర్తయిన పేజీలను రీలోడ్ చేయకుండా, మార్పు అవసరమైన భాగాలనే నవీకరిస్తాయి. ఇది మిషన్ కంట్రోల్ వివిధ డిస్ప్లేలను మారుస్తూ నిరంతర సంభాషణను కొనసాగించే విధానంలా, ఆ సున్నితమైన అనుభవాన్ని సృష్టిస్తుంది.
క్రింద ఉన్నది విపరీతమైన తేడాను సృష్టించే అంశాలు:
| సాంప్రదాయ బహుపేజీ యాప్‌లు | ఆధునిక ఏకపేజీ యాప్‌లు |
|----------------------------|-------------------------|
| **నావిగేషన్** | ప్రతి స్క్రీన్ కోసం పూర్తి పేజీ రీలోడ్ | తక్షణ కంటెంట్ మార్పు |
| **ప్రదర్శన** | పూర్తి HTML డౌన్‌లోడ్స్ కారణంగా మందగింపు | భాగస్వామ్య నవీకరణలతో వేగవంతం |
| **వినియోగదారు అనుభవం** | అనూహ్యంగా పేజీ చిమ్ములు | సున్నితమైన, యాప్‌లా మార్పులు |
| **డేటా భాగస్వామ్యం** | పేజీల మధ్య కఠినమైనది | సులభమైన స్థితి నిర్వహణ |
| **వికాసం** | బహుళ HTML ఫైళ్ళు నిర్వహణకు | డైనమిక్ టెంప్లేట్లతో ఏక HTML |
**వికాసాన్ని అర్థం చేసుకోండి:**
- **సాంప్రదాయ యాప్‌లు** ప్రతి నావిగేషన్ చర్యకు సర్వర్ అభ్యర్థనలు అవసరం
- **ఆధునిక SPAలు** ఒకసారి లోడ్ చేసి, జావాస్క్రిప్ట్ ఉపయోగించి డైనమిక్ కంటెంట్ నవీకరణ
- **వినియోగదారుల ఆశలలో** తక్షణ, సజల ఇంటరాక్షన్లు ప్రాధాన్యం
- **ప్రదర్శన లాభాలు** సమస్తమైన బ్యాండ్‌విడ్త్ తగ్గింపు మరియు వేగవంతమైన స్పందనలు
ఈ పాఠంలో, అనేక స్క్రీన్లు సజావుగా కలిసిన బ్యాంకింగ్ యాప్‌ని నిర్మించబోతున్నాం. శాస్త్రవేత్తలు వివిధ ప్రయోగాలకు మాడ్యూలర్ సర్దుబాటు సాధనాలు ఉపయోగించే విధంగా, మనం HTML టెంప్లేట్లను మళ్లీ ఉపయోగించదగిన భాగాలుగా ఉపయోగించి అవసరమైనప్పుడు ప్రదర్శిస్తాం.
మీరు HTML టెంప్లేట్లతో (విభిన్న స్క్రీన్‌ల కోసం మళ్లీ ఉపయోగించదగిన ప్రణాళికలు), జావాస్క్రిప్ట్ రౌటింగ్ (స్క్రీన్‌ల మధ్య మార్పిదించే వ్యవస్థ), మరియు బ్రౌజర్ యొక్క హిస్టరీ API (బ్యాక్ బటన్ సరిగ్గా పనిచేయడానికి) తో పని చేస్తారు. ఇవే React, Vue, మరియు Angular వంటి ఫ్రేమ్‌వర్క్‌లలో ఉపయోగించే ప్రాథమిక సాంకేతికతలు.
చివరికి, మీరు ఒక ప్రొఫెషనల్ ఏకపేజీ అప్లికేషన్ ప్రిన్సిపల్స్‌ను చూపించే పనిచేసే బ్యాంకింగ్ యాప్‌ను పొందుతారు.
```mermaid
mindmap
root((సింగిల్-పేజీ అప్లికేషన్లు))
Architecture
Template System
Client-side Routing
State Management
Event Handling
Templates
Reusable Components
Dynamic Content
DOM Manipulation
Content Switching
Routing
URL Management
History API
Navigation Logic
Browser Integration
User Experience
వేగవంతమైన నావిగేషన్
స్మూత్ ట్రాన్సిషన్లు
సాదృశ్య స్థితి
ఆధునిక ఇంటరాక్షన్లు
Performance
తగ్గించిన సర్వర్ అభ్యర్థనలు
వేగవంతమైన పేజీ మార్పులు
సమర్థవంతమైన వనరు ఉపయోగం
మెరుగైన స్పందనశీలత
```
## పాఠం ముందు క్విజ్
[పాఠం ముందు క్విజ్](https://ff-quizzes.netlify.app/web/quiz/41)
### మీరు కావలసింది
మన బ్యాంకింగ్ యాప్‌ను పరీక్షించడానికి స్థానిక వెబ్ సర్వర్ కావాలి – ఇది మీ ఊహించినంత కష్టం కాదు! మీరు ఇప్పటికే సెట్ చేయకపోతే, కేవలం [Node.js](https://nodejs.org)ని ఇనిస్టాల్ చేసి `npx lite-server` ను మీ ప్రాజెక్ట్ ఫోల్డర్ నుండి రన్ చేయండి. ఇది స్థానిక సర్వర్‌ను స్పిన్ చేస్తుంది మరియు ఆటోమేటిగ్గా బ్రౌజర్లో మీ యాప్‌ను ఓపెన్ చేస్తుంది.
### తయారీ
మీ కంప్యూటర్‌లో `bank` అనే ఫోల్డర్‌ని సృష్టించి, అందులో `index.html` అనే ఫైల్‌ని ఉంచండి. మనం ఈ HTML [బాయిలర్ప్లేట్](https://en.wikipedia.org/wiki/Boilerplate_code) నుండి మొదలుపెడతాం:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bank App</title>
</head>
<body>
<!-- This is where you'll work -->
</body>
</html>
```
**ఈ బాయిలర్ప్లేట్ అందించే అంశాలు:**
- **HTML5 డాక్యుమెంట్ నిర్మాణాన్ని** సరైన DOCTYPE ప్రకటనతో స్థాపిస్తుంది
- **అంతర్జాతీయ పాఠ్య మద్దతుకు** UTF-8 క్యారెక్టర్ ఎంకోడింగ్‌ను అమర్చుతుంది
- **పోర్టబుల్ కనుగొనికకు** viewport మెటా ట్యాగ్ తో స్పందనకరమైన డిజైన్‌ను ఏర్పాటు చేస్తుంది
- **బ్రౌజర్ టాబ్‌లో కనిపించే** వివరాత్మక శీర్షికను సెట్ చేస్తుంది
- **మనం అంజలి చేయబోయే అప్లికేషన్ కోసం** శుభ్రమైన బాడీ సెక్షన్‌ను సృష్టిస్తుంది
> 📁 **ప్రాజెక్ట్ నిర్మాణం అవలోకనం**
>
> **ఈ పాఠం ముగిసే వరకు, మీ ప్రాజెక్ట్‌లో ఈ ఫైళ్లు ఉంటాయి:**
> ```
> bank/
> ├── index.html <!-- Main HTML with templates -->
> ├── app.js <!-- Routing and navigation logic -->
> └── style.css <!-- (Optional for future lessons) -->
> ```
>
> **ఫైల్ బాధ్యతలు:**
> - **index.html**: అన్ని టెంప్లేట్లను కలిగి ఉండి యాప్ నిర్మాణాన్ని అందిస్తుంది
> - **app.js**: రౌటింగ్, నావిగేషన్, మరియు టెంప్లేట్ల నిర్వహణను చేపడుతుంది
> - **టెంప్లేట్లు**: లాగిన్, డాష్‌బోర్డ్ మరియు ఇతర స్క్రీన్‌ల UIని నిర్వచిస్తాయి
---
## HTML టెంప్లేట్లు
టెంప్లేట్లు వెబ్ డెవలప్‌మెంట్‌లో ఒక ప్రాథమిక సమస్యను పరిష్కరిస్తాయి. గుటెన్‌బర్గ్ 1440లలో మొవబుల్ టైప్ ప్రింటింగ్‌ను ఆవిష్కరించినప్పుడు, పూర్తి పేజీలను చెక్కేసే బదులు ఉపయోగించదగిన లెటర్ బ్లాక్స్‌ను తయారు చేసి వాటిని అవసరమనుకుని అమరిక చేయొచ్చని తెలుసుకున్నాడు. HTML టెంప్లేట్లు అదే సిద్ధాంతంపై పనిచేస్తాయి – ప్రతి స్క్రీన్ కోసం వేర్వేరు HTML ఫైల్‌లు సృష్టించకుండా, అవసరానికి తగిన reusable నిర్మాణాలను నిర్వచిస్తారు.
```mermaid
flowchart TD
A["📋 టెంప్లేట్ నిర్వచనం"] --> B["💬 DOMలో దాచబడింది"]
B --> C["🔍 జావాస్క్రిప్ట్ టెంప్లేట్ పొందదు"]
C --> D["📋 టెంప్లేట్ కంటెంట్‌ని క్లోన్ చేయండి"]
D --> E["🔗 దృశ్యమానమైన DOMకి జత చేయండి"]
E --> F["👁️ వినియోగదారు కంటెంట్‌ని చూస్తున్నాడు"]
G["లాగిన్ టెంప్లేట్"] --> A
H["డాష్బోర్డ్ టెంప్లేట్"] --> A
I["భవిష్యత్ టెంప్లేట్లు"] --> A
style A fill:#e3f2fd
style D fill:#e8f5e8
style F fill:#fff3e0
style B fill:#f3e5f5
```
మీ యాప్ అనేక భాగాలకు టెంప్లేట్లను బ్లూ ప్రింట్‌లాగా ఆలోచించండి. ఒక ఆర్కిటెక్ట్ ఒక బ్లూ ప్రింట్ సృష్టించి అటు ఇటు పునరావృతంగా ఉపయోగిస్తే, మేము టెంప్లేట్లను ఒకసారి సృష్టించి అవసరానికి అనుగుణంగా ఉపయోగిస్తాం. బ్రౌజర్ ఈ టెంప్లేట్లను దాచివుంచి, జావాస్క్రిప్ట్ వాటిని యాక్టివేట్ చేసే వరకు చూపించదు.
మీరు ఒక వెబ్ పేజీకి అనేక స్క్రీన్‌లు సృష్టించదలిచినట్లయితే, ఒక పరిష్కారం ప్రతి స్క్రీన్ కోసం ఒక HTML ఫైల్ సృష్టించడం. అయినప్పటికీ, ఈ పరిష్కారానికి కొన్ని అసౌకర్యాలు ఉన్నాయి:
- స్క్రీన్ మార్చేటప్పుడు మొత్తం HTMLని రీలోడ్ చేయాల్సి ఉంటుంది, ఇది మందగింపును కలిగిస్తుంది.
- వివిధ స్క్రీన్‌ల మధ్య డేటా పంచుకోవడం కష్టమే.
మరొక విధానం ఒకే HTML ఫైల్ ఉండటం మరియు `<template>` ఎలిమెంట్ ఉపయోగించి బహుళ [HTML టెంప్లేట్లు](https://developer.mozilla.org/docs/Web/HTML/Element/template) నిర్వచించడం. టెంప్లేట్ అనేది బ్రౌజర్ ద్వారా ప్రదర్శించని, జావాస్క్రిప్ట్ ద్వారా রান్టైంలో instantiate చెయ్యవలసిన మళ్లీ ఉపయోగించదగిన HTML బ్లాక్.
### మనం తయారుచేద్దాం
మనకు బ్యాంక్ యాప్ కోసం రెండు ప్రధాన స్క్రీన్‌లు ఉంటాయి: లాగిన్ పేజీ మరియు డాష్‌బోర్డ్. మొదట, మనం HTML బాడీలో ఒక ప్లేస్‌హోల్డర్ ఎలిమెంట్‌ను చేర్చుదాం – ఇక్కడ మన అంతా విభిన్న స్క్రీన్‌లు కనిపిస్తాయి:
```html
<div id="app">Loading...</div>
```
**ఈ ప్లేస్‌హోల్డర్ అర్థం:**
- అన్ని స్క్రీన్‌లు ప్రదర్శించబడే "app" ఐడీతో కంటైనర్ సృష్టిస్తుంది
- జావాస్క్రిప్ట్ మొదటి స్క్రీన్ యాక్టివేట్ అయ్యేవరకు లోడ్ అవుతున్న సందేశాన్ని చూపిస్తుంది
- మన డైనమిక్ కంటెంట్ కోసం ఒక్క మౌంటింగ్ పాయింట్ అందిస్తుంది
- `document.getElementById()` ద్వారా సులభంగా లక్ష్యం చేయబడుతుంది
> 💡 **ప్రొ టిప్**: ఈ ఎలిమెంట్ యొక్క కంటెంట్ మార్చబడే కాబట్టి, యాప్ లోడ్ అవుతున్నప్పుడు చూపించే లోడింగ్ సందేశం లేదా సూచికను ఇక్కడ ఉంచవచ్చు.
తర్వాత, HTML టెంప్లేట్ క్రింద లాగిన్ పేజీ కోసం చేర్చుదాం. ఇప్పటికీ ఇక్కడ కేవలం శీర్షిక మరియు నావిగేషన్ కోసం లింక్ ఉన్న సెక్షన్ ఉంచుతాం.
```html
<template id="login">
<h1>Bank App</h1>
<section>
<a href="/dashboard">Login</a>
</section>
</template>
```
**ఈ లాగిన్ టెంప్లేట్ విశ్లేషణ:**
- జావాస్క్రిప్ట్ లక్ష్యంగా "login" అనే ప్రత్యేక గుర్తింపుతో టెంప్లేట్ నిర్వచిస్తుంది
- అప్లికేషన్ బ్రాండింగ్ గుర్తించడానికి ప్రధాన శీర్షికను కలిగి ఉంది
- సంబంధిత కంటెంట్‌ను సమూహీకరించడానికి సెమాంటిక్ `<section>` ఉపయోగిస్తుంది
- వినియోగదారులను డాష్‌బోర్డ్‌కి నావిగేట్ చేసే లింక్‌ను అందిస్తుంది
తర్వాత, డాష్‌బోర్డ్ పేజీకి మరో HTML టెంప్లేట్ చేర్చుదాం. ఈ పేజీ వివిధ సెక్షన్లు కలిగి ఉంటుంది:
- శీర్షికలో ఒక శీర్షిక మరియు లాగ్ ఔట్ లింక్
- బ్యాంక్ ఖాతా ప్రస్తుత బ్యాలెన్స్
- లావాదేవీల జాబితా, టేబుల్ రూపంలో ప్రదర్శించబడుతుంది
```html
<template id="dashboard">
<header>
<h1>Bank App</h1>
<a href="/login">Logout</a>
</header>
<section>
Balance: 100$
</section>
<section>
<h2>Transactions</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>Object</th>
<th>Amount</th>
</tr>
</thead>
<tbody></tbody>
</table>
</section>
</template>
```
**ఈ డాష్‌బోర్డ్ యొక్క భాగాల విశ్లేషణ:**
- నావిగేషన్ కలిగిన సెమాంటిక్ `<header>` ఉపయోగించి పేజీ నిర్మాణం
- స్క్రీన్‌లలో యాప్ శీర్షికను స్థిరంగా ప్రదర్శిస్తుంది
- లాగ్ ఔట్ లింక్, ఇది లాగిన్ స్క్రీన్‌కు తిరిగి నావిగేట్ చేస్తుంది
- ప్రత్యేక సెక్షన్‌లో ప్రస్తుత అకౌంట్ బ్యాలెన్స్ చూపిస్తుంది
- సరైన HTML టేబుల్ ఉపయోగించి లావాదేవీల డేటాను ఏర్పాటు చేస్తుంది
- తేదీ, ఆబ్జెక్ట్, మరియు రుసుముల కోసం వడపోత టేబుల్ హెడ్డర్లను నిర్వచిస్తుంది
- డైనమిక్ కంటెంట్ ఇంజెక్షన్ కోసం టేబుల్ శరీర భాగాన్ని ఖాళీగా ఉంచుతుంది
> 💡 **ప్రొ టిప్**: HTML టెంప్లేట్లు సృష్టిస్తుంటే, మీరు వాటి ఎలాగుని చూడాలని ఉంటే, `<template>` మరియు `</template>` లైన్లను `<!-- -->`లో ప్యాక్ చేసి కామెంట్ అవ్వవచ్చు.
### 🔄 **పాఠ్య ధార్మిక తనిఖీ**
**టెంప్లేట్ వ్యవస్థ అర్థం చేసుకోండి**: జావాస్క్రిప్ట్ అమలు చేసేముందు కలిగాలి:
- ✅ టెంప్లేట్లు సాధారణ HTML ఎలిమెంట్లతో ఎలా వేరుగా ఉంటాయో
- ✅ టెంప్లేట్లు జావాస్క్రిప్ట్ యాక్టివేషన్ వరకు దాచివున్నాయి ఎందుకు
- ✅ టెంప్లేట్లలో సెమాంటిక్ HTML నిర్మాణం ప్రాముఖ్యం
- ✅ టెంప్లేట్లు మళ్లీ ఉపయోగించదగిన UI భాగాలు ఎలా సృష్టిస్తాయి
**తీవ్ర స్వీయ-పరీక్ష**: మీ HTML చుట్టూ `<template>` ట్యాగ్స్ తీసేసినప్పుడు ఏం జరుగుతుంది?
*సమాధానం: కంటెంట్ తక్షణమే కనిపిస్తుంది మరియు దానికి టెంప్లేట్ ఫంక్షనాలిటీ ఉంటది కాదు*
**పనితనం లాభాలు**: టెంప్లేట్లు అందించేవి:
- **మళ్లీ ఉపయోగ్యత**: ఒక నిర్వచనం, బహుళ ఘటనలు
- **ప్రదర్శన**: డూప్లికేట్ HTML పార్సింగ్ చేయబడదు
- **నిర్వాహకత**: కేంద్రీకృత UI నిర్మాణం
- **అనువర్తనం**: డైనమిక్ కంటెంట్ మార్పులు
✅ మనం టెంప్లేట్లపై `id` లక్షణాలు ఎందుకు ఉపయోగిస్తాం? వేరే ఏదైనా తరగతులు లాగా ఉపయోగించవచ్చా?
## జావాస్క్రిప్ట్‌తో టెంప్లేట్లను జీవం పోసడం
ఇప్పుడు మన టెంప్లేట్లను కార్యాచరణ చేయాలి. 3D ప్రింటర్ డిజిటల్ బ్లూప్రింట్‌ని తీసుకుని భౌతిక వస్తువుగా మార్చినట్లే, జావాస్క్రిప్ట్ మన దాచిపెట్టిన టెంప్లేట్లను ఆవిష్కరిస్తుంది, వినియోగదారులు వీటిని చూడగలిగే, పరస్పర చర్యల సాధనంగా మార్చుతుంది.
ఈ ప్రక్రియ మూడు స్థిరమైన దశల్లో జరుగుతుంది, ఇవి ఆధునిక వెబ్ డెవలప్‌మెంట్ స్థంభాలు. మీరు ఈ నమూనా అర్థం చేసుకున్నా తరువాత, మీరు దీన్ని అనేక ఫ్రేమ్‌వర్క్‌లు మరియు లైబ్రరీలలో గుర్తిస్తారు.
మీ ప్రస్తుత HTML ఫైల్‌ను బ్రౌజర్‌లో ప్రయత్నిస్తే, అది `Loading...` చూపిస్తూ నిలిచిపోతుంది. ఎందుకంటే మనం టెంప్లేట్లను instantiate చేసి ప్రదర్శించేందుకు కొన్ని జావాస్క్రిప్ట్ కోడును జత చేయాలి.
ఒక టెంప్లేట్ instantiate చెయ్యడం సాధారణంగా 3 దశల్లో జరుగుతుంది:
1. DOMలో టెంప్లేట్ ఎలిమెంట్‌ను పొందడం, ఉదాహరణకు [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) ఉపయోగించి.
2. టెంప్లేట్ ఎలిమెంట్‌ను క్లోన్ చేసుకోవడం, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) ఉపయోగించి.
3. దాన్ని DOMలో కనిపించే ఎలిమెంట్ కింద జత చేయడం, ఉదాహరణకు [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) ఉపయోగించి.
```mermaid
flowchart TD
A[🔍 దశ 1: టెంప్లేట్ కనుగొనండి] --> B[📋 దశ 2: టెంప్లేట్ క్లోన్ చేయండి]
B --> C[🔗 దశ 3: DOM కి সংযুক্ত చేయండి]
A1["document.getElementById('login')"] --> A
B1["template.content.cloneNode(true)"] --> B
C1["app.appendChild(view)"] --> C
C --> D[👁️ టెంప్లేట్ వాడుకరికి కనపడుతుంది]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#e8f5e8
style D fill:#fff3e0
```
**ఈ ప్రక్రియ దృశ్య వివరణ:**
- **దశ 1** దాచిన టెంప్లేట్‌ను DOM నిర్మాణంలో వెతుకుతుంది
- **దశ 2** సురక్షితంగా మార్పులు చేయదగిన పని కాపీని సృష్టిస్తుంది
- **దశ 3** కాపీని కనిపించే పేజీ ప్రాంతంలో చేర్చుతుంది
- **ఫలితం** ఉపయోగకర్తలు పరస్పర చర్యలు చేయగలిగే ప్రాచుర్యమైన స్క్రీన్
✅ మనం టెంప్లేట్ ను DOMకి జత చేసే ముందు క్లోన్ చెయ్యాలంటే ఎందుకు? ఈ దశను తప్పిస్తే ఏం జరుగుతుందంటారు?
### పనితనం
మీ ప్రాజెక్ట్ ఫోల్డర్‌లో `app.js` అనే కొత్త ఫైల్ సృష్టించి, దాన్ని మీ HTML `<head>` సెక్షన్‌లో దిగుమతి చేసుకోండి:
```html
<script src="app.js" defer></script>
```
**ఈ స్క్రిప్ట్ దిగుమతి అర్థం:**
- జావాస్క్రిప్ట్ ఫైల్‌ను మన HTML డాక్యుమెంట్‌తో లింక్ చేస్తుంది
- `defer` లక్షణం ఉపయోగించి స్క్రిప్ట్ HTML పార్సింగ్ పూర్తైన తర్వాత నడుస్తుంది
- DOM ఎలిమెంట్లకు యాక్సెస్ స్క్రిప్ట్ ఎగ్జిక్యూషన్ ముందే అందుబాటులో ఉంటుందని నిర్ధారిస్తుంది
- స్క్రిప్ట్ లోడింగ్ మరియు ప్రదర్శనకు ఆధునిక ఉత్తమ పద్ధతులను అనుసరిస్తుంది
ఇప్పుడు `app.js` లో కొత్త ఫంక్షన్ `updateRoute` సృష్టిద్దాం:
```js
function updateRoute(templateId) {
const template = document.getElementById(templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
**దశా దశా వివరణ:**
- ప్రత్యేక ID ఉపయోగించి టెంప్లేట్ ఎలిమెంట్‌ను కనుగొంటుంది
- `cloneNode(true)` ఉపయోగించి టెంప్లేట్ కంటెంట్ గాఢ కాపీని సృష్టిస్తుంది
- కంటెంట్ ప్రదర్శించబడే యాప్ కంటైనర్‌ను వెతుకుతుంది
- యాప్ కంటైనర్ నుండి ఉన్న కంటెంట్ ను మాయం చేస్తుంది
- క్లోన్ చేసిన టెంప్లేట్ కంటెంట్‌ను కనిపించే DOMలో చేర్పిస్తుంది
ఇప్పుడు ఈ ఫంక్షన్‌ను ఒక టెంప్లేట్ IDతో పిలవండి మరియు ఫలితాన్ని చూడండి.
```js
updateRoute('login');
```
**ఈ ఫంక్షన్ కాల్ ఆధిగమనాలు:**
- తన యొక్క IDని పారామీటర్‌గా పంపడం ద్వారా లాగిన్ టెంప్లేట్ యాక్టివేట్ అవుతుంది
- వేర్వేరు యాప్ స్క్రీన్‌ల మధ్య ప్రోగ్రామాటిక్ మార్పును చూపిస్తుంది
- "Loading..." సందేశం బదులుగా లాగిన్ స్క్రీన్ చూపిస్తుంది
✅ ఈ కోడ్ `app.innerHTML = '';` ఉద్దేశ్యం ఏమిటి? దీని లేకుండా ఏం జరుగుతుంది?
## రూట్‌లను సృష్టించడం
రౌటింగ్ అనేది URLs ను సరైన కంటెంట్‌కు కనెక్ట్ చేయడం. తొలుత టెలిఫోన్ ఆపరేటర్లు కాల్‌లను కనెక్ట్ చేయడానికి స్విచ్‌బోర్డ్స్ ఉపయోగించిన విధంగా, వారు వచ్చే అభ్యర్థనను సరైన గమ్యస్థానానికి నావిగేట్ చేసిన విధంగా, వెబ్ రౌటింగ్ కూడా URL అభ్యర్థన తీసుకుని ఏ కంటెంట్ చూపించాలో నిర్ణయిస్తుంది.
```mermaid
flowchart LR
A["🌐 URL మార్గం<br/>/dashboard"] --> B["🗺️ మార్గాలు వస్తువు<br/>లుకప్"]
B --> C["🎯 టెంప్లేట్ ID<br/>'dashboard'"]
C --> D["📌 టెంప్లేట్ కనుగొనండి<br/>getElementById"]
D --> E["👁️ స్క్రీన్ ప్రదర్శన<br/>నకలు & జోడించు"]
F["📍 /login"] --> G["🎯 'login'"]
H["📍 /unknown"] --> I["❌ కనుగొనలేదు"]
I --> J["🔄 /login కి రీడైరెక్ట్ చేయండి"]
style B fill:#e3f2fd
style E fill:#e8f5e8
style I fill:#ffebee
style J fill:#fff3e0
```
సాంప్రదాయంగా వెబ్ సర్వర్లు వివిధ URLలకు విభిన్న HTML ఫైళ్ళను అందిస్తూ దీన్ని నిర్వహించేవి. మనం ఏకపేజీ యాప్ నిర్మించే కనుక, రౌటింగ్‌ని మనమే జావాస్క్రిప్ట్‌తో నిర్వహించాల్సి ఉంటుంది. ఇది వినియోగదారుడి అనుభవం మరియు ప్రదర్శనపై మనకు మరింత నియంత్రణ ఇస్తుంది.
```mermaid
flowchart LR
A["🌐 URL మార్గం<br/>/డాష్‌బోర్డ్"] --> B["🗺️ మార్గాలు ఆబ్జెక్ట్<br/>శోధన"]
B --> C["🎯 టెంప్లేట్ ID<br/>'డాష్‌బోర్డ్'"]
C --> D["📄 టెంప్లేట్ను కనుగొను<br/>getElementById"]
D --> E["👁️ స్క్రీన్‌ను ప్రదర్శించు<br/>నకిలీ & జోడించు"]
F["📍 /లాగిన్"] --> G["🎯 'లాగిన్'"]
H["📍 /అజ్ఞాత"] --> I["❌ కనబడలేదు"]
I --> J["🔄 /లాగిన్ కు పునఃనిర్దేశించు"]
style B fill:#e3f2fd
style E fill:#e8f5e8
style I fill:#ffebee
style J fill:#fff3e0
```
**రౌటింగ్ నిర్వహణ ప్రవాహం:**
- URL మార్పులు మన రూట్‌ల కాన్ఫిగరేషన్ లోకి వెతుకుతున్నాయి
- చెల్లును రూట్‌లు నిర్దిష్ట టెంప్లేట్ IDలకు మ్యాపింగ్ చేస్తాయి
- చెల్లని రూట్‌లు సరికొత్త స్థితులు రాకుండా బ్యాకప్ చర్యలు తీసుకుంటూ ఉంటాయి
- టెంప్లేట్ ప్రదర్శన మనం ముందుగా నేర్చుకున్న మూడు దశల ప్రక్రియని అనుసరిస్తుంది
వెబ్ యాప్ గురించి చెప్పేటప్పుడు, మనం **URLs** ని ప్రదర్శించవలసిన స్క్రీన్లతో మ్యాప్ చేయాలనే ఉద్దేశాన్ని *Routing* అంటాము. బహుళ HTML ఫైళ్ళు ఉన్న వెబ్‌సైట్ల సమస్య కాదు, ఎందుకంటే ఫైల్ పాథ్లు URLలో ప్రతిబింబిస్తాయి.
ఉదాహరణకు, మీ ప్రాజెక్ట్ ఫోల్డర్‌లో ఈ ఫైళ్ళు ఉంటే:
```
mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html
```
`mywebsite` అనే రూట్‌తో వెబ్ సర్వర్ సృష్టిస్తే, URL మ్యాపింగ్ ఇలా ఉంటుంది:
```
https://site.com --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/ --> mywebsite/admin/index.html
```
కానీ మన వెబ్ యాప్‌కు అన్ని స్క్రీన్‌లను కలిగి ఉన్న ఏక HTML ఫైల్ ఉన్నందున, ఈ డిఫాల్ట్ ప్రవర్తన మనకు ఉపయోగపడదు. మనం ఈ మ్యాప్‌ను చేతితో సృష్టించి జావాస్క్రిప్ట్ ఉపయోగించి ప్రదర్శించబడే టెంప్లేట్‌ను అప్డేట్ చేయాల్సి ఉంటుంది.
### పనితనం
URL మార్గాలను మన టెంప్లేట్లతో మ్యాపింగ్ చేయడానికి సరళమైన ఆబ్జెక్ట్ ఉపయోగిస్తాం. దీన్ని `app.js` ఫైల్ టాప్‌లో చేర్చండి.
```js
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard' },
};
```
**ఈ రూట్స్ కాన్ఫిగరేషన్ అర్థం:**
- URL పాథ్లు మరియు టెంప్లేట్ గుర్తింపుల మధ్య మ్యాపింగ్ నిర్వచిస్తుంది
- కీస్ URL మార్గాలుగా ఉండి, విలువలు టెంప్లేట్ సమాచారం కలిగి ఉండతాయి
- ఏ URLకి ఏ టెంప్లేట్ చూపించాలో సులభంగా వెతుక్కోవడానికి సహకరిస్తుంది
- భవిష్యత్‌లో కొత్త రూట్‌లను జోడించడానికి కంపత్\u200cఎస్\u200cరకం నిర్మాణాన్ని అందిస్తుంది
ఇప్పుడు మనము `updateRoute` ఫంక్షన్‌ను కొంచెం మారుస్తాము. నేరుగా `templateId`ని ఆర్గ్యుమెంటుగా పంపించకుండా, మనము మొదట ప్రస్తుత URLను చూస్తాము మరియు ఆ తర్వాత మన మ్యాప్ ద్వారా తగిన template ID విలువను పొందుతాము. URL లోని పాత్ సెక్షన్ మాత్రమే పొందటానికి మనము [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) ఉపయోగించవచ్చు.
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
const template = document.getElementById(route.templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
**ఇక్కడ జరిగేది విడదీసి చూసితే:**
- **ప్రస్తుతం ఉన్న పాత్‌ను** బ్రౌజర్ యొక్క URL నుండి `window.location.pathname` ఉపయోగించి తీసుకుంటుంది
- మన routes ఆబ్జెక్టులోని తగిన route కాన్ఫిగరేషన్‌ను **తీసుకుని** చూస్తుంది
- ఆ route కాన్ఫిగరేషన్ నుండి template ID ని **పొందుతుంది**
- ముందు ఉన్నట్లే templateని **రెండర్ చేయడం** చేస్తుంది
- URL మార్పులకు స్పందించే ఒక డైనమిక్ సిస్టమ్‌ను **సృష్టిస్తుంది**
ఇక్కడ మనం ప్రకటించిన routes ని సంబంధిత template తో మ్యాప్ చేసాము. మీరు మీ బ్రౌజర్ లో URLని మాన్యువల్గా మార్చి అది సరిగా పనిచేస్తుందా అని పరీక్షించవచ్చు.
✅ మీరు URLలో తెలియని పాత్ ఎంటర్ చేస్తే ఏమ అవుతుంది? మనం దీన్ని ఎలా పరిష్కరించగలము?
## నావిగేషన్ జోడించడం
రూటింగ్ ఏర్పాటు అయిన తరువాత, యూజర్లు యాప్ ద్వారా నావిగేట్ చేసేందుకు మార్గం కావాలి. సంప్రదాయ వెబ్‌సైట్లు లింకులు క్లిక్ చేస్తే మొత్తం పేజీలను రీలోడ్ చేస్తాయి, కానీ మనం URL మరియు కంటెంట్ రెండింటినీ పేజీ రీఫ్రెష్ లేకుండా అప్డేట్ చేయాలనుకుంటున్నాము. ఇది డెస్క్‌టాప్ అప్లికేషన్లు వివిధ వీక్షణల మధ్య ఎలా మారుతాయో అలా సాఫీగా అనుభవం కలిగిస్తుంది.
మనము రెండు విషయాలను సమన్వయపర్చాలి: యూజర్లు పేజీలను బుక్‌మార్క్ చేయగలిగేలా బ్రౌజర్ URLని అప్డేట్ చేయడం, మరియు సరైన కంటెంట్‌ని చూపించడం. ఇది సరిగా అమలు అయితే, ఆధునిక అప్లికేషన్ల నుండి యూజర్లు ఆశించే సాఫీ నావిగేషన్ ఉత్పత్తి అవుతుంది.
```mermaid
sequenceDiagram
participant User
participant Browser
participant App
participant Template
User->>Browser: "లాగిన్" లింక్ క్లిక్ చేసినాడు
Browser->>App: onclick సంఘటన ప్రారంభించబడింది
App->>App: preventDefault() & navigate('/dashboard')
App->>Browser: history.pushState('/dashboard')
Browser->>Browser: URL /dashboard కి నవీకరించబడింది
App->>App: updateRoute() పిలవబడింది
App->>Template: డ్యాష్‌బోర్డ్ టెంప్లేట్ వెతకు & క్లోన్ చెయ్
Template->>App: క్లోన్ చేయబడిన కంటెంట్ తిరిగివ్వండి
App->>Browser: టెంప్లేట్ తో యాప్ కంటెంట్ భర్తీ చేయండి
Browser->>User: డ్యాష్‌బోర్డ్ స్క్రీన్ చూపించు
Note over User,Template: వినియోగదారు బ్రౌజర్ వెనుకబటనును క్లిక్ చేస్తాడు
User->>Browser: వెనుక బటన్ క్లిక్ చేస్తున్నాడు
Browser->>Browser: చరిత్ర /login కి వెనక్కి పోయింది
Browser->>App: popstate సంఘటన ఆందితం అయింది
App->>App: updateRoute() ఆటోమేటిక్ పిలవబడింది
App->>Template: లాగిన్ టెంప్లేట్ వెతకు & క్లోన్ చెయ్
Template->>App: క్లోన్ చేయబడిన కంటెంట్ తిరిగివ్వండి
App->>Browser: టెంప్లేట్ తో యాప్ కంటెంట్ భర్తీ చేయండి
Browser->>User: లాగిన్ స్క్రీన్ చూపించు
```
### 🔄 **పాఠ్యపరమైన తనిఖీలు**
**సింగిల్-పేజీ అప్లికేషన్ ఆర్కిటెక్చర్**: మీరు ఈ సమగ్ర వ్యవస్థపై అవగాహన కలిగారా?
- ✅ క్లయింట్-సైడ్ రూటింగ్ ఎలా సంప్రదాయ సర్వర్-సైడ్ రూటింగ్ నుండి వేరుగా ఉందో?
- ✅ సరిగ్గా SPA నావిగేషన్ కోసం హిస్టరీ API ఎందుకు అవసరం?
- ✅ టెంప్లేట్లు రీలోడ్లెల్లా డైనమిక్ కంటెంట్‌ను ఎలా అందిస్తాయి?
- ✅ నావిగేషన్‌ను ఇన్‌టెర్సెప్టు చేయడంలో ఈవెంట్ హ్యాండ్లింగ్ పాత్ర ఏమిటి?
**సిస్టమ్ ఇంటిగ్రేషన్**: మీ SPA ఈ అంశాలు చూపుతుంది:
- **టెంప్లేట్ యాజమాన్యం**: డైనమిక్ కంటెంట్‌తో తిరిగి ఉపయోగించే UI భాగాలు
- **క్లయింట్-సైడ్ రూటింగ్**: సర్వర్ అభ్యర్థన లేకుండా URL నిర్వహణ
- **ఈవెంట్-ఆధారిత ఆర్కిటెక్చర్**: స్పందించే నావిగేషన్ మరియు యూజర్ ఇంటరాక్షన్స్
- **బ్రౌజర్ ఇంటిగ్రేషన్**: సరైన హిస్టరీ మరియు బ్యాక్/ఫార్వర్డ్ బటన్ సపోర్ట్
- **పర్ఫార్మెన్స్ ఆప్టిమైజేషన్**: వేగవంతమైన మార్పులు మరియు సర్వర్ లోడ్ తగ్గింపు
**ప్రొఫెషనల్ ప్యాటర్న్స్**: మీరు ఇవి అమలు చేసారు:
- **మోడల్-వ్యూకి విడదీయడం**: అప్లికేషన్ లాజిక్ నుండి టెంప్లేట్లు వేరు చేయడం
- **స్టేట్ మేనేజ్‌మెంట్**: URL స్టేట్ మరియు ప్రదర్శిత కంటెంట్ సమన్వయం
- **ప్రోగ్రెసివ్ ఎన్హాన్స్మెంట్**: జావాస్క్రిప్ట్ సాధారణ HTML ఫంక్షనాలిటీని మెరుగుపరుస్తుంది
- **యూజర్ అనుభవం**: పేజీ రీఫ్రెష్ లేకుండా సాఫీ, యాప్‌లా నావిగేషన్
> <20> **ఆర్కిటెక్చర్ అవగాహన**: నావిగేషన్ సిస్టమ్ భాగాలు
>
> **మీరు తయారు చేస్తున్నది:**
> - **🔄 URL నిర్వహణ**: పేజీ రీలోడ్లేకుండా బ్రౌజర్ అడ్రస్ బార్‌ను అప్‌డేట్ చేస్తుంది
> - **📋 టెంప్లేట్ సిస్టమ్**: ప్రస్తుత రూటు ఆధారంగా కంటెంట్ దింపుతుంది
> - **📚 హిస్టరీ ఇంటిగ్రేషన్**: బ్రౌజర్ బ్యాక్/ఫార్వర్డ్ బటన్స్ పనిచేసేలా ఉంచుతుంది
> - **🛡️ లోపాల నిర్వహణ**: తప్పు లేదా లేని రూటులకు గౌరవనీయFallbacks
>
> **భాగాలు ఎలా కలిసి పనిచేస్తాయని:**
> - **నావిగేషన్ ఈవెంట్లకు శ్రద్ధ వహిస్తుంది** (క్లిక్‌లు, హిస్టరీ మార్పులు)
> - హిస్టరీ API ఉపయోగించి URLను **అప్‌డేట్ చేస్తుంది**
> - కొత్త రూటుకు సరైన టెంప్లెట్‌ను **ప్రదర్శిస్తుంది**
> - సాఫీ యూజర్ అనుభవాన్ని **నిరంతరం ఉంచుతుంది**
మన యాప్ కోసం తదుపరి దశ URLను మాన్యువల్లీ మార్చకుండా పేజీలు మధ్య నావిగేట్ చేయగలగడం. దీన్ని చేయాలంటే రెండు పనులు:
1. ప్రస్తుత URLని అప్డేట్ చేయడం
2. ఒప్పిన URL ఆధారంగా ప్రదర్శిత టెంప్లెట్‌ను మార్చడం
రెండవ భాగాన్ని `updateRoute` ఫంక్షన్ తో పూర్తిచేశాము, కాబట్టి ఇప్పుడు ప్రస్తుత URL ని ఎలా అప్డేట్ చేయాలో చూద్దాం.
జావాస్క్రిప్ట్ మరియు ముఖ్యంగా [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) ఉపయోగించాలి, ఇది URLని అప్డేట్ చేసి బ్రౌజింగ్ హిస్టరీలో కొత్త ఎంట్రీ సృష్టిస్తుంది, HTMLని రీలోడ్ చేయకుండా.
> ⚠️ **ముఖ్యమైన గమనిక**: HTML యాంకర్ ఎలిమెంట్ [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a)ని స్వతంత్రంగా వాడితే బ్రౌజర్ డిఫాల్ట్ గా HTMLని రీలోడ్ చేస్తుంది. కస్టమ్ జావాస్క్రిప్ట్ తో రూటింగ్ నిర్వహించేటప్పుడు ఈ ప్రవర్తనని `preventDefault()` ఫంక్షన్ ద్వారా ఆపాలి.
### టాస్క్
మన యాప్‌లో నావిగేట్ చేయడానికి కొత్త ఫంక్షన్ సృష్టించుకుందాం:
```js
function navigate(path) {
window.history.pushState({}, path, path);
updateRoute();
}
```
**ఈ నావిగేషన్ ఫంక్షన్ అవగాహన:**
- బ్రౌజర్ URLని `history.pushState` ఉపయోగించి కొత్త పాత్ కు **అప్‌డేట్ చేస్తుంది**
- బ్రౌజర్ హిస్టరీ స్టాక్ లోకు కొత్త ఎంట్రీ **జోడిస్తుంది** తద్వారా బ్యాక్/ఫార్వర్డ్ బటన్లు సరిగ్గా పనిచేస్తాయి
- సరైన టెంప్లెట్ చూపించే `updateRoute()` ఫంక్షన్ను **ట్రిగ్గర్ చేస్తుంది**
- పేజీ రీలోడ్ లేకుండా ఒక సింగిల్-పేజీ యాప్ అనుభవాన్ని **నిరంతరం ఉంచుతుంది**
ఈ విధానం మొదట ఇచ్చిన పాత్ ఆధారంగా ప్రస్తుత URLను అప్‌డేట్ చేసి ఆ తర్వాత టెంప్లెట్ ను మారుస్తుంది. `window.location.origin` ప్రాపర్టీ URL మూలాన్ని ఇస్తుంది, దీని సహాయంతో ఒక పాత్ నుండి పూర్తి URLను తిరిగి నిర్మించవచ్చు.
ఇప్పుడు మనకు ఈ ఫంక్షన్ ఉందనుకొని, ఒక పాత్ ని ఎటువంటి డిఫైండ్ రూట్‌కు సరిపోనప్పుడు ఎలా వ్యవహరించాలో చూస్కోవాలి. మనం `updateRoute` ఫంక్షన్‌ను అప్‌డేట్ చేసి సరిపోని రూట్ కోసం fallback ను యాడ్ చేస్తాము.
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
if (!route) {
return navigate('/login');
}
const template = document.getElementById(route.templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
**ముఖ్యమైన విషయాలు గుర్తుంచుకోండి:**
- ప్రస్తుత పాత్ కు ఒక రూట్ ఉందా అని **తశీల్దారీ చేస్తుంది**
- తప్పు రూట్ ఎక్కినప్పుడు login పేజీకి **రీడైరెక్ట్ చేస్తుంది**
- బ్రోకెన్ నావిగేషన్‌ను నివారించే fallback మెకానిజమ్ **ఇస్తుంది**
- తప్పు URL ఉన్నా కూడా యూజర్లు సరైన స్క్రీన్ చూడలేకపోవడాన్ని **నిరోధిస్తుంది**
రూట్ కనబడనప్పుడు ఇప్పుడు `login` పేజీకి రీడైరెక్ట్ చేస్తాం.
ఇప్పుడు లింకు క్లిక్ అయినపుడు URL తీసుకునే మరియు బ్రౌజర్ డిఫాల్ట్ లింకు ప్రవర్తన ఆపే ఫంక్షన్ సృష్టిద్దాం:
```js
function onLinkClick(event) {
event.preventDefault();
navigate(event.target.href);
}
```
**ఈ క్లిక్ హ్యాండ్లర్ ను విడదీసి చూద్దాం:**
- `preventDefault()` ఉపయోగించి బ్రౌజర్ డిఫాల్ట్ లింకు ప్రవర్తన **నివారిస్తుంది**
- క్లిక్ చేసిన లింక్ ఎలిమెంట్ నుండి గమ్యస్థానం URLని **తీసుకుంటుంది**
- పేజీ రీలోడ్ లేకుండా మన కస్టమ్ navigate ఫంక్షన్‌ను **పిలుస్తుంది**
- సాఫీ సింగిల్-పేజీ యాప్ అనుభవం **జారకుండా ఉంచుతుంది**
```html
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>
```
**onclick బైండింగ్ వల్ల కలిగే లాభాలు:**
- ప్రతి లింకుని మన కస్టమ్ నావిగేషన్ సిస్టమ్ కి **కనెక్ట్ చేస్తుంది**
- క్లిక్ ఈవెంట్ ని ప్రాసెస్ కోసం `onLinkClick`కి **పాస్ చేస్తుంది**
- పేజీ రీలోడ్ లేకుండా సాఫీ నావిగేషన్ **అనుమతిస్తుంది**
- యూజర్లు బుక్‌మార్క్ చేసుకునే లేదా పంచుకునే సరైన URL స్ట్రక్చర్ ఉంచుతుంది
[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) అట్రిబ్యూట్ `click` ఈవెంట్‌ను జావాస్క్రిప్ట్ కోడ్ (ఇక్కడ `navigate()` ఫంక్షన్ కాల్) కి బైండ్ చేస్తుంది.
ఈ లింకులు మీద క్లిక్ చేసి చూడండి, మీరు ఇప్పుడు మీ యాప్ యొక్క వివిధ స్క్రీన్స్ మధ్య నావిగేట్ చేయగలుగుతారు.
✅ `history.pushState` మెథడ్ HTML5 స్టాండర్డ్ లో భాగం మరియు [సకల ఆధునిక బ్రౌజర్లలో](https://caniuse.com/?search=pushState) అమలైనది. మీరు పాత బ్రౌజర్ల కోసం వెబ్ యాప్ నిర్మిస్తున్నట్లైతే, ఈ API స్థానంలో మీరు ఉపయోగించగల ట్రిక్ ఉంది: పాత్ ముందు [హ్యాష్ (`#`)](https://en.wikipedia.org/wiki/URI_fragment) ఉపయోగించి సాధారణ యాంకర్ నావిగేషన్ తో పని చేసే, పేజీను రీలోడ్ చేయని రూటింగ్ ను అమలు చేయవచ్చు.
## బ్యాక్ మరియు ఫార్వర్డ్ బటన్లు పనిచేయడం
వెబ్ బ్రౌజింగ్‌కు బ్యాక్ మరియు ఫార్వర్డ్ బటన్లు అనివార్యంగా ఉంటాయి, నాసా మిషన్ కంట్రోలు మునుపటి సిస్టమ్ స్థితులు పరిశీలించే విధంగా. యూజర్లు ఈ బటన్లు పనిచేయాలని ఆశిస్తారు; అవి పనికిరాలనప్పుడు బ్రౌజింగ్ అనుభవం చెడిపోతుంది.
మన సింగిల్-పేజీ యాప్ దీనికి మించిన కాన్ఫిగరేషన్ అవసరం. బ్రౌజర్ హిస్టరీ స్టాక్ ను నిర్వహిస్తుంది (దాన్ని మనం `history.pushState` తో జతచేస్తున్నాము), కానీ యూజర్లు ఈ హిస్టరీలో నావిగేట్ చేసే సమయంలో, మన యాప్ ప్రదర్శించబడుతున్న కంటెంట్ ను అప్డేట్ చేయాలి.
```mermaid
sequenceDiagram
participant User
participant Browser
participant App
participant Template
User->>Browser: "లాగిన్" లింక్ క్లిక్ చేస్తారు
Browser->>App: onclick ఈవెంట్ ప్రారంభించడమె
App->>App: preventDefault() & navigate('/dashboard')
App->>Browser: history.pushState('/dashboard')
Browser->>Browser: URL /dashboard కి అప్‌డేట్ అవుతుంది
App->>App: updateRoute() పిలవబడింది
App->>Template: డాష్‌బోర్డ్ టెంప్లేట్ వెతకండి & క్లోన్ చేయండి
Template->>App: క్లోన్ చేసిన కంటెంట్ రిటర్న్ చేయండి
App->>Browser: యాప్ కంటెంట్ ని టెంప్లేట్ తో మార్చండి
Browser->>User: డాష్‌బోర్డ్ స్క్రీన్ ప్రదర్శించండి
Note over User,Template: యూజర్ బ్రౌజర్ బ్యాక్ బటన్ క్లిక్ చేస్తారు
User->>Browser: బ్యాక్ బటన్ క్లిక్ చేస్తారు
Browser->>Browser: హిస్టరీ /login కి వెనుకకు పోవడం
Browser->>App: popstate ఈవెంట్ ఫైర్ అయింది
App->>App: updateRoute() ఆటోమాటిక్ పిలవబడింది
App->>Template: లాగిన్ టెంప్లేట్ వెతకండి & క్లోన్ చేయండి
Template->>App: క్లోన్ చేసిన కంటెంట్ రిటర్న్ చేయండి
App->>Browser: యాప్ కంటెంట్ ని టెంప్లేట్ తో మార్చండి
Browser->>User: లాగిన్ స్క్రీన్ ప్రదర్శించండి
```
**ముఖ్యమైన ఇంటరాక్షన్ పాయింట్స్:**
- యూజర్ చర్యలు క్లిక్‌లు లేదా బ్రౌజర్ బటన్ల ద్వారా నావిగేషన్‌ని **ట్రిగ్గర్ చేస్తాయి**
- అప్లికేషన్ పేజీ రీలోడ్లను నివారించడానికి లింక్ క్లిక్‌లను **ఇన్టెర్సెప్టు చేస్తుంది**
- హిస్టరీ API URL మార్పులు మరియు బ్రౌజర్ హిస్టరీ స్టాక్ ను **నిర్వహిస్తుంది**
- టెంప్లెట్లు ప్రతి స్క్రీన్ కు కంటెంట్ నిర్మాణాన్ని **ప్రదానం చేస్తాయి**
- ఈవెంట్ లిస్నర్లు అన్ని రకాల నావిగేషన్స్ కి యాప్ స్పందించేటంటి **నిర్ధారిస్తాయి**
`history.pushState`ను ఉపయోగించడం బ్రౌజర్ నావిగేషన్ హిస్టరీలో కొత్త ఎంట్రీలను సృష్టిస్తుంది. మీరు బ్రౌజర్ *బ్యాక్ బటన్* పట్టు ఉండడాన్ని చూస్తే ఇది ఇలా కనిపిస్తుంది:
![నావిగేషన్ హిస్టరీ స్క్రీన్‌షాట్](../../../../translated_images/history.7fdabbafa521e064.te.png)
మీరు బ్యాక్ బటన్ కొన్నిసార్లు క్లిక్ చేస్తే, ప్రస్తుత URL మారిపోతుంది మరియు హిస్టరీ అప్డేట్ అవ్వుతుంది, కానీ అదే టెంప్లెట్ కనబడుతూనే ఉంటుంది.
అందుకే యాప్ హిస్టరీ మారిన ప్రతి సారి `updateRoute()`ను పిలవవలసిన అవసరం ఉందని తెలియదు. [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) డాక్యుమెంటేషన్ చూస్తే, స్టేట్ మారినపుడు - అంటే మనం వేరే URLకు వచ్చిందని - [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) ఈవెంట్ ట్రిగ్గర్ అవుతుందని తెలుస్తుంది. మనం దీన్ని ఉపయోగించి సరి చేస్తాము.
### టాస్క్
యూజర్ బ్రౌజర్ హిస్టరీ మార్పుల సమయంలో ప్రదర్శిత టెంప్లెట్ ని అప్‌డేట్ చేయాలంటే, మనం కొత్త ఫంక్షన్ అటాచ్చి `updateRoute()`ని పిలవాలి. దీన్ని మన `app.js` ఫైల్ చివరలో చేస్తాము:
```js
window.onpopstate = () => updateRoute();
updateRoute();
```
**ఈ హిస్టరీ ఇంటిగ్రేషన్ అవగాహన:**
- యూజర్లు బ్రౌజర్ బటన్లు ద్వారా నావిగేట్ చేసినప్పుడు వచ్చే `popstate` ఈవెంట్లను **శ్రవణం చేస్తుంది**
- కాంసైస్ ఈవెంట్ హ్యాండ్లర్ సింటాక్స్ కోసం ఆర్రో ఫంక్షన్ **వాడుతున్నది**
- హిస్టరీ స్టేట్ మారినప్పుడు ఆటోమేటిక్‌గా `updateRoute()` **పిలవబడుతుంది**
- పేజీ మొదట్లో లోడ్ అయ్యేటప్పుడు యాప్‌ను ప్రారంభించడం కోసం కూడా `updateRoute()` **పిలుస్తుంది**
- యూజర్లు ఎట్లా నావిగేట్ చేసినా సరైన టెంప్లెట్ ప్రదర్శన **ఖచ్చితంగా ఉంటుందనడాన్ని నిర్ధారిస్తుంది**
> 💡 **ప్రో టిప్**: ఇక్కడ conciseness కోసం [ఆర్రో ఫంక్షన్](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) వాడాము, కానీ సాదారణ ఫంక్షన్ కూడా సరే.
ఆర్రో ఫంక్షన్ పై రిఫ్రెషర్ వీడియో:
[![ఆర్రో ఫంక్షన్స్](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "ఆర్రో ఫంక్షన్స్")
> 🎥 పై చిత్రాన్ని క్లిక్ చేస్తే ఆర్రో ఫంక్షన్ గురించి వీడియో మొదలవుతుంది.
ఇప్పుడు మీ బ్రౌజర్ బ్యాక్, ఫార్వర్డ్ బటన్లు ఉపయోగించి చూడండి, ఈ సారీ ప్రదర్శిత రూట్ సరిగా అప్డేట్ అవ్వబోతుంది.
### ⚡ **తదుపరి 5 నిమిషాల్లో మీరు చేయగలిగింది**
- [ ] మీ బ్యాంకింగ్ యాప్ నావిగేషన్‌ను బ్రౌజర్ బ్యాక్/ఫార్వర్డ్ బటన్లు ఉపయోగించి పరీక్షించండి
- [ ] అడ్రస్ బార్‌లో వేరు వేరు URLs ను మాన్యువాగా టైప్ చేసి రూటింగ్‌ని పరీక్షించండి
- [ ] బ్రౌజర్ డెవ్‌టూల్స్ ఓపెన్ చేసి టెంప్లేట్‌లు DOMలో ఎలా క్లోన్ అవుతున్నాయో పరిశీలించండి
- [ ] రూటింగ్ ఫ్లో గమనించడానికి 콘솔.లాగ్ స్టేట్మెంట్లు జోడించి ప్రయోగించండి
### 🎯 **ఈ గంటలో మీరు సాధించగలదు**
- [ ] పోస్ట్-పాఠ్య క్విజ్ పూర్తి చేసి SPA ఆర్కిటెక్చర్ కాన్సెప్ట్‌లు అర్థం చేసుకోండి
- [ ] మీ బ్యాంకింగ్ యాప్ టెంప్లేట్లను ప్రొఫెషనల్‌గా చూడడానికి CSS స్టైలింగ్ జోడించండి
- [ ] సరైన లోప నిర్వహణతో 404 లోప పేజీ ఛాలెంజ్ అమలు చేయండి
- [ ] అదనపు రూటింగ్ ఫంక్షನాలిటీతో క్రెడిట్స్ పేజీ ఛాలెంజ్ క్రియేట్ చేయండి
- [ ] టెంప్లేట్ మార్పుల మధ్య లోడింగ్ స్టేట్స్ మరియు ట్రాన్సిషన్స్ జోడించండి
### 📅 **మీ వారంత SPA అభివృద్ధి ప్రయాణం**
- [ ] ఫారమ్‌లు, డేటా నిర్వహణ, నిల్వతో పూర్తి బ్యాంకింగ్ యాప్ తయారు చేయండి
- [ ] రూట్ పరామితులు మరియు నెస్టెడ్ రూట్స్ వంటి అధునాతన రూటింగ్ ఒకటే చేసి జోడించండి
- [ ] నావిగేషన్ గార్డులు మరియు ప్రామాణికత ఆధారిత రూటింగ్ అమలు చేయండి
- [ ] తిరిగి ఉపయోగించగల టెంప్లేట్ భాగాలు మరియు కంపొనెంట్ లైబ్రరీ సృష్టించండి
- [ ] మెమరీ యూజర్ అనుభవం కోసం యానిమేషన్లు మరియు ట్రాన్సిషన్స్ జోడించండి
- [ ] SPAని హోస్టింగ్ ప్లాట్ఫారమ్ పై డిప్లాయ్ చేసి రూటింగ్ సరిచేయండి
### 🌟 **మీ నెల పాటు ఫ్రంటెండ్ ఆర్కిటెక్చర్ మాస్టరీ**
- [ ] React, Vue, Angular వంటి ఆధునిక ఫ్రేమ్‌వర్క్‌లతో కాంప్లెక్స్ SPAలు అభివృద్ధి చేయండి
- [ ] అధునాతన స్టేట్ మేనేజ్‌మెంట్ ప్యాటర్న్స్ మరియు లైబ్రరీలను నేర్చుకోండి
- [ ] SPA అభివృద్ధి కోసం బిల్డ్ టూల్స్ మరియు డెవలప్‌మెంట్ వర్క్‌ఫ్లో బాగా క掌ించండి
- [ ] ప్రోగ్రెసివ్ వెబ్ యాప్ ఫీచర్లను మరియు ఆఫ్‌లైన్ ఫంక్షనాలిటీని అమలు చేయండి
- [ ] పెద్ద ఎత్తున SPA పర్ఫార్మెన్స్ ఆప్టిమైజేషన్ సాంకేతికతలను అధ్యయనం చేయండి
- [ ] ఓపెన్ సోర్స్ SPA ప్రాజెక్టులకు సహాయం చేయండి మరియు మీ జ్ఞానం పంచుకోండి
## 🎯 మీ సింగిల్-పేజీ అప్లికేషన్ మాస్టరీ టైమ్‌లైన్
```mermaid
timeline
title SPA అభివృద్ధి & ఆధునిక వెబ్ శిల్పన ఏర్పాటు అభ్యసన ప్రగతి
section మౌలికం (20 నిమిషాలు)
టెంప్లేట్ సిస్టమ్స్: HTML టెంప్లేట్ ఎలిమెంట్స్
: DOM మానిప్యులేషన్
: కంటెంట్ క్లోనింగ్
: డైనమిక్ రెండరింగ్
section రౌటింగ్ ప్రాథమికాలు (30 నిమిషాలు)
క్లయింట్-సైడ్ నావిగేషన్: URL నిర్వహణ
: హిస్టరీ API
: రూట్ మ్యాపింగ్
: ఈవెంట్ హ్యాండ్లింగ్
section వినియోగదారు అనుభవం (40 నిమిషాలు)
నావిగేషన్ పాలిష్: బ్రౌజర్ ఇంటిగ్రేషన్
: బ్యాక్ బటన్ సపోర్ట్
: లోపం నిర్వహణ
: స్మూత్ ట్రాన్సిషన్స్
section శిల్పన నమూనాలు (50 నిమిషాలు)
ప్రొఫెషనల్ SPAs: కాంపONENT systems
: స్టేట్ నిర్వహణ
: పనితీరు అభివృద్ధి
: లోపి బౌండరీలు
section అభివృద్ధి సాంకేతికతలు (1 వారం)
ఫ్రేమ్‌వర్క్ ఇంటిగ్రేషన్: React Router
: Vue Router
: Angular Router
: స్టేట్ లైబ్రరీలు
section ఉత్పత్తి నైపుణ్యాలు (1 నెల)
సంస్థాభివృద్ధి: బిల్డ్ సిస్టమ్స్
: పరీక్షన విధానాలు
: డిప్లాయ్‌మెంట్ పైప్లైన్లు
: పనితీరు మానిటరింగ్
```
### 🛠️ మీ SPA అభివృద్ధి టూల్‌కిట్ సంగ్రహం
ఈ పాఠం పూర్తి చేసిన తర్వాత, మీరు ఈ విషయాల్లో మాస్టర్ అయ్యారు:
- **టెంప్లేట్ ఆర్కిటెక్చర్**: డైనమిక్ కంటెంట్ రెండరింగ్‌తో తిరిగి ఉపయోగించగల HTML భాగాలు
- **క్లయింట్-సైడ్ రూటింగ్**: పేజీ రీలోడ్లకు లేకుండా URL నిర్వహణ మరియు నావిగేషన్
- **బ్రౌజర్ ఇంటిగ్రేషన్**: హిస్టరీ API ఉపయోగం మరియు బ్యాక్/ఫార్వర్డ్ బటన్ల మద్దతు
- **ఈవెంట్-ఆధారిత సిస్టమ్స్**: నావిగేషన్ నిర్వహణ మరియు యూజర్ ఇంటరాక్షన్ మేనేజ్‌మెంట్
- **DOM మేనేజ్‌మెంట్**: టెంప్లేట్ క్లోనింగ్, కంటెంట్ మార్పిడి మరియు ఎలిమెంట్ నిర్వహణ
- **లోప నిర్వహణ**: తప్పు రూటులు మరియు లేని కంటెంట్ కోసం గౌరవనీయ fallbackలు
- **పర్ఫార్మెన్స్ ప్యాటర్న్స్**: సమర్ధవంతమైన కంటెంట్ లోడింగ్ మరియు రెండరింగ్ వ్యూహాలు
**వాస్తవ ప్రపంచ అనువర్తనాలు**: మీ SPA అభివృద్ధి నైపుణ్యాలు ప్రత్యక్షంగా వర్తిస్తాయి:
- **ఆధునిక వెబ్ అప్లికేషన్స్**: React, Vue, Angular, మరియు ఇతర ఫ్రేమ్‌వర్క్‌ల అభివృద్ధి
- **ప్రోగ్రెసివ్ వెబ్ అప్స్**: ఆఫ్‌లైన్ సామర్థ్యాలతో యాప్‌లాగా అనుభవాలు కలిగించే అప్లికేషన్స్
- **ఎంటర్ప్రైజ్ డ్యాష్‌బోర్డ్స్**: బహుముఖ వ్యవహారాపరమైన అనువర్తనాలు
- **ఈ-కామర్స్ ప్లాట్‌ఫారమ్స్**: ఉత్పత్తి కాటలాగ్లు, షాపింగ్ కార్ట్‌లు మరియు చెక్ అవుట్ ఫ్లోస్
- **కంటెంట్ నిర్వహణ**: డైనమిక్ కంటెంట్ సృష్టి మరియు ఎడిటింగ్ ఇంటర్వేసులు
- **మొబైల్ అభివృద్ధి**: వెబ్ టెక్నాలజీలతో హైబ్రిడ్అప్‌లు
**ప్రొఫెషనల్ నైపుణ్యాలు పొందారు**: ఇప్పుడు మీరు చేయగలరు:
- **సINGLE-పేజీ యాప్‌లను ఆర్కిటెక్చర్ చేయండి** సరైన బాధ్యత విభజనతో
- **క్లయింట్-సైడ్ రూటింగ్ సిస్టమ్లను అమలు చేయండి** యాప్ సంక్లిష్టత పెరిగిన కొద్దీ స్కేల్ అయ్యే విధంగా
- **బ్రౌజర్ డెవలపర్ టూల్స్ సహాయంతో** క్లిష్ట నావిగేషన్ ప్రవాహాలను డీబగ్ చేయండి
- **టెంప్లేట్ నిర్వహణను సమర్ధవంతంగా చేయడం ద్వారా** యాప్ పనితీరు ఆప్టిమైజ్ చేయండి
- **ప్రొవైన native మరియు ప్రతిస్పందనాత్మక అనుభవాలను** రూపొందించండి
**ఫ్రంట్‌ఎండ్ అభివృద్ధి కాన్సెప్ట్‌లలో నైపుణ్యం**:
- **కంపోనెంట్ ఆర్కిటెక్చర్**: పునర్వినియోగపరచదగిన UI నమూనాలు మరియు టెంప్లేట్ సిస్టమ్స్
- **స్టేట్ సమకాలీకరణ**: URL స్టేట్ నిర్వహణ మరియు బ్రౌజర్ హిస్టరీ
- **ఈవెంట్-చలన ప్రోగ్రామింగ్**: వినియోగదారుల ఇంటరాక్షన్ హ్యాండ్లింగ్ మరియు నావిగేషన్
- **పర్ఫార్మెన్స్ ఆప్టిమైజేషన్**: సమర్ధవంతమైన DOM మానిప్యులేషన్ మరియు కంటెంట్ లోడింగ్
- **యూజర్ అనుభవ డిజైన్**: సాఫీ ట్రాంజిషన్లు మరియు సులభమైన నావిగేషన్
**తరువాతి స్థాయి**: మీరు ఆధునిక ఫ్రంట్‌ఎండ్ ఫ్రేమ్‌వర్క్‌లు, అడ్వాన్స్‌డ్ స్టేట్ మేనేజ్‌మెంట్ లేదా క్లిష్ట ఎంటర్‌ప్రైజ్ యాప్‌లను ఎక్ప్లోర్ చేసే ప్రత్యేకంగా సిద్దంగా ఉన్నారు!
🌟 **సాధన సాఫల్యం**: మీరు ఆధునిక వెబ్ ఆర్కిటెక్చర్ నమూనాలతో ఒక ప్రొఫెషనల్ సింగిల్-పేజీ యాప్ బేస్‌ను నిర్మించారు!
---
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఏజెంట్ మోడ్ ఉపయోగించి క్రింది ఛాలెంజ్‌ను పూర్తి చేయండి:
**వివరణ:** బ్యాంకింగ్ యాప్‌ను మెరుగుపరచండి ఎర్రర్ హ్యాండ్లింగ్ మరియు 404 పేజీ టెంప్లేట్‌ను అమలు చేసి చెల్లని రూట్స్‌కు యూజర్ అనుభవాన్ని మెరుగుపరచండి.
**ప్రాంప్ట్:** id "not-found" తో ఒక కొత్త HTML టెంప్లేట్ రాబట్టండి, ఇది యూజర్-ఫ్రెండ్లీ 404 ఎర్రర్ పేజీగా స్టైలింగ్‌తో కనిపించాలి. ఆ తరువాత జావాస్క్రిప్ట్ రూటింగ్ లాజిక్‌ను మార్చండి ఇది చెల్లని URLs కు వెళ్ళినప్పుడు ఈ టెంప్లేట్ చూపిస్తుంది, మరియు "Go Home" బటన్‌ను జోడించండి ఇది లాగిన్ పేజీకి తిరిగి నావిగేట్ అవుతుంది.
మరింత తెలుసుకోండి [agent మోడ్](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి ఇక్కడ.
## 🚀 ఛాలెంజ్
ఈ యాప్ క్రెడిట్స్ చూపించే మూడవ పేజీ కోసం కొత్త టెంప్లేట్ మరియు రూట్ జోడించండి.
**చాలెంజ్ లక్ష్యాలు:**
- **సృష్టించండి** సరైన కంటెంట్ నిర్మాణంతో కొత్త HTML టెంప్లేట్
- **జోడించండి** కొత్త రూట్‌ను మీ రూట్స్ కాన్ఫిగరేషన్ ఆబ్జెక్ట్‌కు
- **సంవంధించండి** క్రెడిట్స్ పేజీకి సంబంధించిన నావిగేషన్ లింకులను
- **పరీక్షించండి** బ్రౌజర్ హిస్టరీతో అన్ని నావిగేషన్ సక్రమంగా పనిచేస్తున్నాయా
## పోస్ట్-లెక్చర్ క్విజ్
[పోస్ట్-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/42)
## సమీక్ష & స్వయంపాఠము
రూటింగ్ వెబ్ అభివృద్ధి లో ఆశ్చర్యకరంగా క్లిష్టమైన భాగాలలో ఒకటి, ప్రత్యేకంగా వెబ్ పేజీ రిఫ్రెష్ ప్రవర్తనలనుండి సింగిల్ పేజీ అప్లికేషన్ పేజీ రిఫ్రెష్‌లకు మారుతుండగా. [Azure Static Web App సేవ](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ఎలా రూటింగ్ నిర్వహిస్తుందో కొంత చదవండి. ఆ డాక్యుమెంట్ లో వివరించబడిన కొన్ని నిర్ణయాలు ఎందుకు అవసరమో మీరు వివరించగలరా?
**అదనపు నేర్చుకునే వనరులు:**
- **అన్వేషించండి** React Router మరియు Vue Router వంటి ప్రాచుర్యం పొందిన ఫ్రేమ్‌వర్క్‌లు క్లయింట్-సైడ్ రూటింగ్‌ను ఎలా అమలు చేస్తున్నాయో
- **ఆశీలించండి** హాష్-ఆధారిత రూటింగ్ మరియు హిస్టరీ API రూటింగ్ మధ్య తేడాలు ఏం ఉన్నాయి
- **అవగాహన పొందండి** సర్వర్-సైడ్ రెండరింగ్ (SSR) మరియు అది రూటింగ్ వ్యూహాలపై ఎఫెక్ట్ ఎలా చూపుతుందో
- **తెలుసుకోండి** ప్రోగ్రెసివ్ వెబ్ యాప్స్ (PWAs) రూటింగ్ మరియు నావిగేషన్‌ను ఎలా నిర్వహిస్తాయో
## అసైన్‌మెంట్
[Routingని మెరుగుపరచండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టం**:
ఈ దస్త్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించారు. మనము ఖచ్చితత్వం కోసం ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా తప్పుడు వివరాలు ఉండొచ్చు. మూల భాషలో ఉన్న అచ్ఛుతమైన డాక్యుమెంట్‌ను నమ్మకమైన మూలంగా పరిగణించాలి. కీలక సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం చేయించుకోవడం మంచిది. ఈ అనువాదం వాడకం వల్ల వచ్చే ఏమైనా తప్పుగా అర్థం చేసుకోవడం లేదా పొరపాట్ల కోసం మేము బాధ్యులేమీ కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

60
translations/te/7-bank-project/1-template-route/assignment.md
Unescape View File

@ -0,0 +1,60 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "df0dcecddcd28ea8cbf6ede0ad57d673",
"translation_date": "2026-01-08T17:10:09+00:00",
"source_file": "7-bank-project/1-template-route/assignment.md",
"language_code": "te"
}
-->
# రూటింగ్ మెరుగుపరచడం
## సూచనలు
మీరు ఒక ప్రాథమిక రూటింగ్ సిస్టమ్‌ని రూపొందించిన తరువాత, ఇప్పుడు దాన్ని ప్రొఫెషనల్ ఫీచర్లతో మెరుగుపరచడం సమయం వచ్చింది, ఇవి వినియోగదారు అనుభవాన్ని మెరుగుపరుస్తాయి మరియు అభివృద్ధికర్తలకు ఉత్తమ టూల్స్ అందిస్తాయి. వాస్తవ ప్రపంచ అనువర్తనాలకు కేవలం టెంప్లేట్ మార్చడం మాత్రమే కాదు – డైనమిక్ పేజీ శీర్షికలు, లైఫ్సైకిల్ హుక్స్, మరియు విస్తృత ఆర్కిటెక్చర్లు అవసరం.
ఈ అసైన్‌మెంట్‌లో, మీరు మీ రూటింగ్ అమలు రెండు అవసరమైన లక్షణాలతో విస్తరించబోతున్నారు, ఇవి సాధారణంగా ప్రొడక్షన్ వెబ్ అప్లికేషన్లలో ఉంటాయి. ఈ మెరుగింపులు మీ బ్యాంకింగ్ యాప్ మరింత మెరుగ్గా అనిపిస్తుంది మరియు భవిష్యత్ ఫంక్షనాలిటీకి మౌలికాలు అందిస్తుంది.
రూట్స్ డిక్లరేషన్ ప్రస్తుతం కేవలం టెంప్లేట్ ID మాత్రమే కలిగి ఉంది. కానీ కొత్త పేజీ చూపించేటప్పుడు కొంతమేర ఎక్కువ అవసరం ఉంటది. రూటింగ్ అమలును రెండు అదనపు లక్షణాలతో మెరుగుపరదాం:
### లక్షణం 1: డైనమిక్ పేజీ శీర్షికలు
**లక్ష్యం:** ప్రతి టెంప్లేట్‌కు శీర్షికలు ఇవ్వడం మరియు టెంప్లేట్ మారినప్పుడు విండో శీర్షికను కొత్త శీర్షికతో అప్‌డేట్ చేయడం.
**ఈ విషయం ఎందుకు ముఖ్యం:**
- **వినియోగదారుల అనుభవాన్ని** మెరుగుపరుస్తుంది వివరణాత్మక బ్రౌజర్ టాబ్ శీర్షికల ద్వారా
- **అక్సెస్ బిలిటీని** మెరుగుపరుస్తుంది స్క్రీన్ రీడర్లు మరియు సహాయక సాంకేతికతలకు
- **ఉత్తమ** బుక్మార్కింగ్ మరియు బ్రౌజర్ చరిత్ర సందర్భం అందజేస్తుంది
- **వృత్తిపరమైన** వెబ్ డెవలప్‌మెంట్ ఉత్తమ పద్ధతులను అనుసరిస్తుంది
**అమలు దృష్టికోణం:**
- రూట్స్ ఆబ్జెక్టులో ప్రతి రూట్‌కు శీర్షిక సమాచారం చేర్చడం
- `updateRoute()` ఫంక్షన్‌ను డైనమిక్‌గా `document.title` ని అప్‌డేట్ చేయడానికి సవరించడం
- స్క్రీన్ల మధ్య మారినపుడు శీర్షికలు సరిగ్గా మారుతున్నాయని పరీక్షించడం
### లక్షణం 2: రూట్ లైఫ్‌సైకిల్ హుక్స్
**లక్ష్యం:** టెంప్లేట్ మారిన తర్వాత కొంత కోడ్ నడిపే ఆప్షన్‌ను జోడించడం. డాష్‌బోర్డ్ పేజీ ప్రతిసారీ ప్రదర్శించబడినప్పుడు డెవలపర్ కన్‌సోల్‌లో `'Dashboard is shown'` అని ప్రింట్ చేయాలి.
**ఈ విషయం ఎందుకు ముఖ్యం:**
- నిర్దిష్ట రూట్లు లోడ్ అయ్యేటప్పుడు కస్టమ్ లాజిక్ నడిపే అవకాశం ఇవ్వడం
- అనలిటిక్స్, లాగింగ్ లేదా ప్రారంభకోడ్ కోసం హుక్స్ ప్రదానం చేయడం
- క్లిష్టమైన రూట్ ప్రవర్తనలకు మౌలికాలు సృష్టించడం
- వెబ్ డెవలప్‌మెంట్‌లో ఆబ్జర్వర్ ప్యాటర్న్‌ను ప్రదర్శించడం
**అమలు దృష్టికోణం:**
- రూట్ కాన్ఫిగరేషన్లకు ఆప్షనల్ కాల్‌బ్యాక్ ఫంక్షన్ ప్రాపర్టీని జోడించడం
- టెంప్లేట్ రెండరింగ్ పూర్తైన తర్వాత కాల్‌బ్యాక్ ఫంక్షన్ (ఉంటే) నడపడం
- డిఫైన్డ్ కాల్‌బ్యాక్ ఉన్న ఏ రూట్‌నైనా ఫీచర్ పనిచేస్తుందిలా చూసుకోవడం
- డాష్‌బోర్డ్ సందర్శించినప్పుడు కన్‌సోల్ సందేశం కనపడుతున్నదని పరీక్షించడం
## రూబ్రిక్
| ప్రమాణాలు | ఉత్కృష్టం | సరిపడే | మెరుగుదల అవసరం |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------- |
| | రెండు లక్షణాలు అమలు చేసి పని చేస్తున్నాయి. కొత్త రూట్ డిక్లరేషన్‌లో శీర్షిక మరియు కోడ్ జోడింపులు కూడా పనిచేస్తున్నాయి. | రెండు లక్షణాలు పనిచేస్తున్నాయి, కానీ ప్రవర్తన హార్డ్‌కోడ్ చేయబడింది మరియు `routes` డిక్లరేషన్ ద్వారా కాన్ఫిగర్ చేయలేము. మూడవ రూట్ సెట్ చేయడం భాగంగా లేదా పాక్షికంగా పనిచేస్తుంది. | ఒక లక్షణం కొరత లేదా సరిగా పని చేయడం లేదు. |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టం**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించాము. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, సర్వసాధారణంగా ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా అసత్యతలు ఉండవచ్చు. మాతృభాషలో ఉన్న అసలు పత్రాన్ని అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారం కోసం వృత్తిపరమైన మనిషి అనువాదం ఆశించబడుతుంది. ఈ అనువాదం ఉపయోగం వలన ఏవైనా అభిప్రాయ భేదాలు లేదా తప్పుదరిచే విషయాలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

965
translations/te/7-bank-project/2-forms/README.md
Unescape View File

@ -0,0 +1,965 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
"translation_date": "2026-01-08T16:20:41+00:00",
"source_file": "7-bank-project/2-forms/README.md",
"language_code": "te"
}
-->
# బ్యాంకింగ్ యాప్ నిర్మించండి భాగం 2: లాగిన్ మరియు రిజిస్ట్రేషన్ ఫారమ్ నిర్మించండి
```mermaid
journey
title మీ ఫారమ్ అభివృద్ధి ప్రయాణం
section HTML మౌలికాధారం
ఫారమ్ అంశాలను అర్థం చేసుకోండి: 3: Student
ఇన్‌పుట్ రకాలను నేర్చుకోండి: 4: Student
ప్రాప్యత నైపుణ్యం: 4: Student
section జావాస్క్రిప్ట్ సమగ్రం
ఫారమ్ సమర్పణను నిర్వహించండి: 4: Student
AJAX కమ్యూనికేషన్ అమలు చేయండి: 5: Student
సర్వర్ ప్రతిస్పందనలను ప్రాసెస్ చేయండి: 5: Student
section ధ్రువీకరణ వ్యవస్థలు
బహుళ-స్థాయి ధ్రువీకరణ సృష్టించండి: 5: Student
వినియోగదారు అనుభవం పెంచండి: 5: Student
డేటా సమగ్రతను నిర్ధారించండి: 5: Student
```
## పాఠం ముందరి క్విజ్
[పాఠం ముందరి క్విజ్](https://ff-quizzes.netlify.app/web/quiz/43)
మీరు ఎప్పుడైనా ఆన్‌లైన్ ఫారమ్‌లో ఇన్పుట్ చేసి, మీ ఇమెయిల్ ఫార్మాట్ తిరస్కరించబడిందని చూసారా? లేదా సబ్మిట్ చేసేటప్పుడు మీ సమాచారమంతా పోయిందా? మనందరం ఇటువంటి నిరుత్సాహకర అనుభవాలను ఎదుర్కొన్నాం.
ఫారమ్‌లు మీ వినియోగదారులు మరియు మీ అప్లికేషన్ పనితీరుకు మధ్య వంతెన. జాగ్రత్తగా విమాన నియంత్రకులు విమానాలను సురక్షితంగా గమ్యస్థానాలకు చేర్చేందుకు అనుసరించే ప్రొటోకాల్స్‌లాగా, బాగా రూపకల్పన చేసిన ఫారమ్‌లు స్పష్టమైన స్పందనను అందించి ఖర్చుతో కూడిన తప్పులను నివారిస్తాయి. నొప్పితక్కువ ఫారమ్‌లు వినియోగదారులను ఆగకుండా పారిపోవడానికి కారణమవుతాయి.
ఈ పాఠంలో, మీ స్థిరమైన బ్యాంకింగ్ యాప్‌ను ఇంటరాక్టివ్ అప్లికేషన్‌గా మార్చుతాం. వినియోగదారుల ఇన్పుట్‌ను ధృవీకరించే, సర్వర్లతో కమ్యూనికేట్ చేసే, సహాయక స్పందనలను అందించే ఫారమ్‌లు రూపొందించటం నేర్పుతాం. దీన్ని మీ అప్లికేషన్ ఫీచర్స్‌ను వినియోగదారులు నావిగేట్ చేయగలుగుతున్న నియంత్రణ ఇంటర్ఫేస్ నిర్మాణంగా భావించండి.
చివరిలో, మీరు పూర్తి లాగిన్ మరియు రిజిస్ట్రేషన్ సిస్టమ్ కలిగి ఉంటారు, ఇది వినియోగదారులను నిరుత్సాహం కాకుండా విజయవంతంగా గైడ్ చేస్తుంది.
```mermaid
mindmap
root((ఫారం అభివృద్ధి))
HTML Foundation
Semantic Elements
Input Types
Accessibility
Label Association
User Experience
Validation Feedback
Error Prevention
Loading States
Success Messaging
JavaScript Integration
Event Handling
AJAX Communication
Data Processing
Error Management
Validation Layers
HTML5 Validation
Client-side Logic
Server-side Security
Progressive Enhancement
Modern Patterns
Fetch API
Async/Await
Form Data API
Promise Handling
```
## ముందస్తు అవసరాలు
మనం ఫారమ్‌లు నిర్మించడం మొదలెట్టేముందు, మీరు సక్రమంగా సర్వ్ చేసుకున్నారని నిర్ధారిద్దాం. ఈ పాఠం గత పాఠంలో మిగళిన చోట నుండే మొదలవుతుంది, కాబట్టి మీరు ముందుకు జారిపోయితే మునుపటి పాఠాలను తిరిగి చూసి ప్రాథమికాలు సెట్ చేసుకోవడం మంచిది.
### అవసరమైన సెటప్
| భాగం | స్థితి | వివరణ |
|-----------|--------|-------------|
| [HTML టెంప్లేట్లు](../1-template-route/README.md) | ✅ అవసరం ఉంది | మీ ప్రాథమిక బ్యాంకింగ్ యాప్ నిర్మాణం |
| [Node.js](https://nodejs.org) | ✅ అవసరం ఉంది | సర్వర్ కోసం జావాస్క్రిప్ట్ రన్‌టైమ్ |
| [బ్యాంక్ API సర్వర్](../api/README.md) | ✅ అవసరం ఉంది | డేటా నిల్వ కోసం బ్యాక్-ఎండ్ సర్వీస్ |
> 💡 **డెవలప్‌మెంట్ సూచన**: మీరు రెండు ప్రత్యేక సర్వర్లను ఒకేసారి నడపాల్సి ఉంటుంది – ఒకటిసార్వత్రిక ఫ్రంట్-ఎండ్ బ్యాంకింగ్ యాప్ కోసం, మరోటి బ్యాక్‌ఎండ్ API కోసం. ఇది నిజ జీవిత అభివృద్ధి విధానాన్ని అనుకరిస్తుంది, ఇందులో ఫ్రంట్-ఎండ్, బ్యాక్-ఎండ్ సేవలు స్వతంత్రంగా పని చేస్తాయి.
### సర్వర్ కాన్ఫిగరేషన్
**మీ అభివృద్ధి వాతావరణంలో ఉంటాయి:**
- **ఫ్రంట్-ఎండ్ సర్వర్**: మీ బ్యాంకింగ్ యాప్‌ను సర్వ్ చేస్తుంది (సాధారణంగా పోర్ట్ `3000`)
- **బ్యాక్‌ఎండ్ API సర్వర్**: డేటా నిల్వ మరియు పొందిక నిర్వహణ (పోర్ట్ `5000`)
- **రెండు సర్వర్లు** స‌మకాలీనంగా లేకుండా సంభవంగా నడవగలవు
**మీ API కనెక్షన్‌ను పరీక్షించడం:**
```bash
curl http://localhost:5000/api
# ఆశించిన ప్రతిస్పందన: "బ్యాంక్ API v1.0.0"
```
**మీకు API వెర్షన్ సమాధానం కనిపిస్తే, మీరు ముందుకు సాగేందుకు సిద్దంగా ఉన్నారు!**
---
## HTML ఫారమ్‌లు మరియు నియంత్రణల అవగాహన
HTML ఫారమ్‌లు వినియోగదారులు మీ వెబ్ అప్లికేషన్‌తో కమ్యూనికేట్ చేయడానికి ఉపయోగిస్తారు. ఇవి 19వ శతాబ్దంలో దూర దూరాలనూ కలిపే టెలిగ్రాఫ్ వ్యవస్థలా భావించండి – వినియోగదారుల ఉద్దేశం మరియు అప్లికేషన్ స్పందన మధ్య కమ్యూనికేషన్ ప్రోటోకాల్. జాగ్రత్తగా రూపకల్పన చేయబడినప్పుడు, అవి తప్పులను పట్టుకునే, ఇన్పుట్ ఫార్మాట్‌ను మార్గనిర్దేశం చేసే, మరియు సహాయక సూచనలను అందించే విధంగా పనిచేస్తాయి.
ఆధునిక ఫార్మ్‌లు సాధారణ టెక్స్ట్ ఇన్పుట్‌ల కంటే చాలా సాంకేతికంగా ఉన్నాయి. HTML5 ప్రత్యేక ఇన్పుట్ రకాల్ని ప్రవేశపెట్టింది, ఇవి స్వయంచాలకంగా ఇమెయిల్ ధృవీకరణ, సంఖ్య ఫార్మాటింగ్, తేదీ ఎంపికను నిర్వహిస్తాయి. ఈ మెరుగుదలలు ప్రాప్తి సహకారమైనదిగా మరియు మొబైల్ వినియోగదారుల అనుభవం కొరకు లాభదాయకంగా ఉంటాయి.
### ఆవశ్యక ఫారమ్ మూలకాలు
**ప్రతి ఫార్మ్‌కు కావలసిన నిర్మాణ భాగాలు:**
```html
<!-- Basic form structure -->
<form id="userForm" method="POST">
<label for="username">Username</label>
<input id="username" name="username" type="text" required>
<button type="submit">Submit</button>
</form>
```
**ఈ కోడ్ ఇక్కడ ఏమి చేస్తుంది:**
- **సృష్టిస్తుంది** ఒక ప్రత్యేక గుర్తింపు కలిగిన ఫారమ్ కంటైనర్‌ను
- **సూచిస్తుంది** డేటా సమర్పణ కోసం HTTP పద్ధతిని
- **కలిపిస్తుంది** లేబుల్స్ ఇన్పుట్‌లతో ప్రాప్తి సౌలభ్యం కొరకు
- **నిర్థారిస్తుంది** ఫారమ్‌ను ప్రాసెస్ చేసే సబ్మిట్ బటన్
### ఆధునిక ఇన్పుట్ రకాలు మరియు లక్షణాలు
| ఇన్పుట్ రకం | ఉపయోగం | ఉదాహరణ |
|------------|---------|---------|
| `text` | సాధారణ టెక్స్ట్ ఇన్పుట్ | `<input type="text" name="username">` |
| `email` | ఇమెయిల్ ధృవీకరణ | `<input type="email" name="email">` |
| `password` | దాచిన పాఠ్యం | `<input type="password" name="password">` |
| `number` | సంఖ్యాత్మక ఇన్పుట్ | `<input type="number" name="balance" min="0">` |
| `tel` | ఫోన్ నంబర్లు | `<input type="tel" name="phone">` |
> 💡 **ఆధునిక HTML5 ప్రయోజనం**: ప్రత్యేక ఇన్పుట్ రకాలను ఉపయోగించడం వల్ల స్వయంచాలక ధృవీకరణ, సరైన మొబైల్ కీబోర్డ్లు, మరింత ప్రాప్తిసౌలభ్యం అదనపు జావాస్క్రిప్ట్ అవసరకుండా వస్తుంది!
### బటన్ రకాలు మరియు ప్రవర్తన
```html
<!-- Different button behaviors -->
<button type="submit">Save Data</button> <!-- Submits the form -->
<button type="reset">Clear Form</button> <!-- Resets all fields -->
<button type="button">Custom Action</button> <!-- No default behavior -->
```
**ప్రతి బటన్ రకం ఇది చేస్తుంది:**
- **సబ్మిట్ బటన్స్**: ఫారమ్ సమర్పణను ప్రారంభించి డేటాను పేర్కొన్న ఎండ్పాయింట్‌కు పంపుతాయి
- **రీసెట్ బటన్స్**: అన్ని ఫారమ్ ఫీల్డ్స్‌ను వారి ప్రారంభ స్థితికి తిరిగి తీసుకొస్తాయి
- **సాధారణ బటన్స్**: ఎలాంటి డిఫాల్ట్ ప్రవర్తనలేని, ఫంక్షనాలిటీ కోసం కస్టమ్ జావాస్క్రిప్ట్ అవసరం
> ⚠️ **ముఖ్య గమనిక**: `<input>` ఎలిమెంట్ స్వయంగా ముగిసే ట్యాగ్, క్లోజింగ్ ట్యాగ్ అవసరం లేదు. ఆధునిక ఉత్తమ ప్రాక్టీస్ `<input>`ను స్లాష్ లేకుండా వ్రాయటం.
### మీ లాగిన్ ఫారమ్‌ని నిర్మించడం
ఇప్పుడు ఆధునిక HTML ఫారమ్ పద్ధతులను ప్రదర్శించే ప్రాక్టికల్ లాగిన్ ఫారమ్ రూపొందిద్దాం. మేం ప్రాథమిక నిర్మాణంతో మొదలెయ్యి, దానిని సమర్థ ప్రాప్తి లక్షణాలు మరియు ధృవీకరణలతో మెరుగుపరచుతాం.
```html
<template id="login">
<h1>Bank App</h1>
<section>
<h2>Login</h2>
<form id="loginForm" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input id="username" name="user" type="text" required
autocomplete="username" placeholder="Enter your username">
</div>
<button type="submit">Login</button>
</form>
</section>
</template>
```
**ఇక్కడ ఏమి జరుగుతుందో విడదీస్తే:**
- **రూపకల్పన చేస్తుంది** ఫారమ్‌ను పార్శ్వ HTML5 మూలకాలతో
- **సమూహీకరించబడి ఉంటుంది** సంబంధిత అంశాలను చక్కటి తరగతుల `div` కంటైనర్లలో
- **కలిపిస్తుంది** లేబుల్స్‌ను ఇన్‌పుట్స్ తో `for` మరియు `id` లక్షణాలతో
- **ఉందటానికి సహాయం చేస్తుంది** ఆధునిక లక్షణాలుగా `autocomplete` మరియు `placeholder` వల్ల మెరుగైన వినియోగదారుల అనుభవం
- **జోడిస్తుంది** `novalidate` ఫారమ్ బ్రౌజర్ డిఫాల్ట్ ధృవీకరణను అడ్డుకోవడానికి, జావాస్క్రిప్ట్ ద్వారా నిర్వహించేందుకు
### సరైన లేబుల్స్ శక్తి
**ఆధునిక వెబ్ అభివృద్ధి కోసం లేబుల్స్ ఎందుకు ముఖ్యం:**
```mermaid
graph TD
A[లేబుల్ ఎలిమెంట్] --> B[స్క్రీన్ రీడర్ మద్దతు]
A --> C[క్లిక్ టār్గెట్ పెంపు]
A --> D[ఫాం ధ్రువీకరణ]
A --> E[SEO లాభాలు]
B --> F[అందరికీ అందుబాటులో ఉంది]
C --> G[మొబైల్ అనుభవం మెరుగుపరుస్తుంది]
D --> H[స్పష్టమైన లోప సందేశం]
E --> I[శోధన ర్యాంకింగ్ మెరుగైంది]
```
**సరైన లేబుల్స్ ఇస్తాయిన గుణాలు:**
- **స్క్రీన్ రీడర్లు ఈ ఫారమ్ ఫీల్డ్‌లను స్పష్టంగా ప్రకటించడానికి సహాయం చేస్తాయి**
- **క్లిక్ చేయదగిన ప్రాంతాన్ని పెంచుతాయి (లేబుల్ పై క్లిక్ చేస్తే ఇన్‌పుట్ ఫోకస్ అవుతుంది)**
- **మొబైల్ వాడకం మెరుగుపరుస్తాయి పెద్ద టచ్ టార్గెట్లతో**
- **ఫారమ్ ధృవీకరణకు అర్ధవంతమైన లోపాల సందేశాలు అందిస్తాయి**
- **SEOని మెరుగుపరుస్తాయి ఫారమ్ అంశాలకు సాంకేతిక అర్థదట్టత అందించడం ద్వారా**
> 🎯 **ప్రాప్తి లక్ష్యం**: ప్రతి ఫారమ్ ఇన్‌పుట్‌కు అనుబంధ లేబుల్ తప్పనిసరి. ఈ సాధారణ పద్ధతి మీ ఫారమ్‌లను అందరికీ, వీ handicap కలిగిన వినియోగదారులు సహా, ఉపయోగించదగినదిగా మార్చుతుంది మరియు అన్ని వినియోగదారుల అనుభవాన్ని మెరుగుపరుస్తుంది.
### రిజిస్ట్రేషన్ ఫారమ్ సృష్టించడం
రిజిస్ట్రేషన్ ఫారమ్ పూర్తయిన యూజర్ ఖాతా సృష్టించడానికి మరింత వಿಸ್ತృత సమాచారాన్ని కోరుతుంది. దీన్ని ఆధునిక HTML5 లక్షణాలతో మరియు పెరిగిన ప్రాప్తిసౌలభ్యంతో నిర్మిద్దాం.
```html
<hr/>
<h2>Register</h2>
<form id="registerForm" novalidate>
<div class="form-group">
<label for="user">Username</label>
<input id="user" name="user" type="text" required
autocomplete="username" placeholder="Choose a username">
</div>
<div class="form-group">
<label for="currency">Currency</label>
<input id="currency" name="currency" type="text" value="$"
required maxlength="3" placeholder="USD, EUR, etc.">
</div>
<div class="form-group">
<label for="description">Account Description</label>
<input id="description" name="description" type="text"
maxlength="100" placeholder="Personal savings, checking, etc.">
</div>
<div class="form-group">
<label for="balance">Starting Balance</label>
<input id="balance" name="balance" type="number" value="0"
min="0" step="0.01" placeholder="0.00">
</div>
<button type="submit">Create Account</button>
</form>
```
**పై కోడ్‌లో మనం:**
- **ప్రతీ ఫీల్డ్‌ను కంటైనర్ divల్లో సక్రమంగా అమర్చాం, శైలీకరణకు మరియు లేఅవుట్‌కు సహాయం చేస్తుంది**
- **బ్రౌజర్ ఆటోఫిల్ మద్దతు కొరకు సరిఅయిన `autocomplete` లక్షణాలను జోడించాం**
- **వినియోగదారుల ఇన్పుట్ కోసం సహాయక ప్లేస్‌హోల్డర్ టెక్స్ట్ అందించాం**
- **`value` లక్షణంతో సరిఅయిన డిఫాల్టులను సెట్ చేసాం**
- **`required`, `maxlength`, `min` వంటి ధృవీకరణ లక్షణాలను వర్తింపజేశాం**
- **`type="number"` నిలువు ఖాతా ఫీల్డ్ కోసం, డెసిమల్ మద్దతుతో**
### ఇన్పుట్ రకాలు మరియు ప్రవర్తన అన్వేషణ
**ఆధునిక ఇన్పుట్ రకాలు మెరుగైన ఫంక్షనాలిటీని అందిస్తాయి:**
| లక్షణం | ప్రయోజనం | ఉదాహరణ |
|---------|---------|---------|
| `type="number"` | మొబైల్ పై సంఖ్యాక ప్యాడ్ | సులభమైన బ్యాలెన్స్ ఎంట్రీ |
| `step="0.01"` | దశాంశ ఖచ్చితత్వ నియంత్రణ | కరెన్సీలో సెంట్ల అనుమతి |
| `autocomplete` | బ్రౌజర్ ఆటోఫిల్ | వేగంగా ఫారమ్ పూర్తి |
| `placeholder` | సందర్భానుసార సూచనలు | వినియోగదారుల అంచనాలను గైడ్ చేస్తుంది |
> 🎯 **ప్రాప్తి సవాలు**: మీ ఫారమ్‌లను కేవలం కీబోర్డ్తో నావిగేట్ చేసి చూడండి! ఫీల్డ్‌ల మధ్య వెళ్లడానికి `Tab` ఉపయోగించండి, చెక్ బాక్సులు సెట్ చేయడానికి `Space` మరియు సమర్పించడానికి `Enter` వాడండి. ఈ అనుభవం స్క్రీన్ రీడర్ వినియోగదారులు మీ ఫారమ్‌లను ఎలా వాడతారో అర్థం చేసుకోవడానికి సహాయపడుతుంది.
### 🔄 **పాఠశాల తనిఖీ**
**ఫారమ్ ఆధారమై అవగాహన:** జావాస్క్రిప్ట్ అమలు చేసే ముందు తెలుసుకోవలసినవి:
- ✅ సేమాంటిక్ HTML ద్వారా ప్రాప్తిసౌలభ్య ఫారమ్ నిర్మాణం ఎలా జరుగుతుంది
- ✅ మొబైల్ కీబోర్డ్లు మరియు ధృవీకరణకు ఇన్పుట్ రకాల ప్రాధాన్యత
- ✅ లేబుల్స్ మరియు ఫారమ్ నియంత్రణల సంబంధం
- ✅ ఫారమ్ లక్షణాలు బ్రౌజర్ డిఫాల్ట్ ప్రవర్తనపై ఎలా ప్రభావం చూపుతాయో
**త్వరిత స్వీయ పరీక్ష**: జావాస్క్రిప్ట్ లేకుండా ఫారమ్ సమర్పిస్తే ఏం జరుగుతుంది?
*జవాబు: బ్రౌజర్ డిఫాల్ట్ సమర్పణ చేస్తుంది, సాధారణంగా చర్య URLకి రీడైరెక్ట్ అవుతుంది*
**HTML5 ఫారమ్ లాభాలు**: ఆధునిక ఫార్ములు అందిస్తాయి:
- **బిల్ట్-ఇన్ ధృవీకరణ**: స్వయంచాలక ఇమెయిల్, సంఖ్య ఫార్మాట్ తనిఖీలు
- **మొబైల్ ఆప్టిమైజేషన్**: వివిధ ఇన్పుట్ రకాలకు సరిపోయే కీబోర్డ్‌లు
- **ప్రాప్తిసౌలభ్యం**: స్క్రీన్ రీడర్ మద్దతు మరియు కీబోర్డ్ నావిగేషన్
- **ప్రోగ్రెసివ్ ఎన్హాన్స్‌మెంట్**: జావాస్క్రిప్ట్ ఆఫ్ ఉన్నప్పటికీ పనిచేస్తుంది
## ఫారమ్ సమర్పణ పద్ధతుల అవగాహన
ఎవరైనా మీ ఫారమ్ నింపి సబ్మిట్ చేస్తే, ఆ డేటా ఎక్కడో పంపించాలి – సాధారణంగా సమర్పణను స్వీకరించి నిల్వ చేసే సర్వర్ వద్ద. ఇది ఎలా జరుగుతుందో తెలుసుకోవడం తరువాత టెన్షన్స్ నుంచి రక్షిస్తుంది.
సబ్మిట్ బటన్ క్లిక్ చేసినప్పుడు ఏమి జరుగుతుందో చూద్దాం.
### డిఫాల్ట్ ఫారమ్ ప్రవర్తన
మొదట, ప్రాథమిక ఫారమ్ సమర్పణతో ఏమి జరుగుతుందో గమనిద్దాం:
**మీ ప్రస్తుత ఫార్ములను పరీక్షించండి:**
1. ఫారమ్‌లోని *రిజిస్టర్* బటన్‌ను క్లిక్ చేయండి
2. బ్రౌజర్ అడ్రస్ బార్ మార్పులను గమనించండి
3. పేజీ రీలోడ్ అవ్వడం మరియు URL లో డేటా కనిపించడం చూసి స్టేట్ గుర్తించండి
![Register బటన్ క్లిక్ చేసిన తరువాత బ్రౌజర్ URL మార్పు స్క్రీన్‌షాట్](../../../../translated_images/click-register.e89a30bf0d4bc9ca.te.png)
### HTTP పద్ధతుల సరిపోలిక
```mermaid
graph TD
A[ఫారం సమర్పణ] --> B{HTTP విధానం}
B -->|GET| C[URL లో డేటా]
B -->|POST| D[అభ్యర్థన శరీరంలో డేటా]
C --> E[అడ్రస్ బార్ లో కనిపిస్తుంది]
C --> F[పరిమిత డేటా పరిమాణం]
C --> G[బుక్‌మార్క్ చేయగలిగింది]
D --> H[URL నుండి గోప్యంగా]
D --> I[పెద్ద డేటా సామర్థ్యం]
D --> J[ఇంకా సురక్షితం]
```
**వేడుకల తేడాలు:**
| పద్ధతి | ఉపయోగం | డేటా స్థానం | భద్రత స్థాయి | పరిమితి పరిమాణం |
|--------|----------|---------------|----------------|------------------|
| `GET` | శోధన క్వెరీలు, ఫిల్టర్లు | URL పరామితులు | తక్కువ (ప్రత్యక్షంగా ఉండటం) | సుమారు 2000 అక్షరాలు |
| `POST` | వినియోగదారు ఖాతాలు, సున్నితమైన సమాచారం | అభ్యర్థన శరీరం | ఎక్కువ (దాచిన) | ఆలోచనీయ పరిమితి లేదు |
**మూల తేడాలు:**
- **GET**: ఫారమ్ డేటాను URL వద్ద ప్రశ్నా పారామితులుగా జతచేస్తుంది (శోధనల కోసం అనువైనది)
- **POST**: డేటాను అభ్యర్థన శరీరంలో చేర్చుతుంది (సున్నితమైన సమాచారానికి అవసరం)
- **GET పరిమితులు**: పరిమాణ పరిమితులు, ప్రత్యక్ష డేటా, బ్రౌజర్ చరిత్రలో నిల్వ
- **POST ప్రయోజనాలు**: పెద్ద డేటా, గోప్యత, ఫైల్ అప్ప్లోడ్ మద్దతు
> 💡 **ఉత్తమ ఆచరణ**: శోధన ఫారమ్‌లు, ఫిల్టర్లకు `GET` వాడండి (డేటా పొందిక), వినియోగదారు నమోదు, లాగిన్, డేటా సృష్టికి `POST` వాడండి.
### ఫారమ్ సమర్పణ కాన్ఫిగరేషన్
మీ రిజిస్ట్రేషన్ ఫారమ్ బ్యాక్‌ఎండ్ APIతో POST పద్ధతిలో సక్రమంగా కమ్యూనికేట్ చేయడానికి కాన్ఫిగర్ చేద్దాం:
```html
<form id="registerForm" action="//localhost:5000/api/accounts"
method="POST" novalidate>
```
**ఈ కాన్ఫిగరేషన్ ఏమి చేస్తుందో:**
- **ఫారమ్ సమర్పణను** మీ API ఎండ్పాయింట్‌కి నేరుగా పంపుతుంది
- **POST పద్ధతిని** భద్రతతో కూడిన డేటా ట్రాన్స్మిషన్‌కు వాడుతుంది
- **`novalidate`** జావాస్క్రిప్ట్ ద్వారా ధృవీకరణ నిర్వహణకు ఉపయోగిస్తుంది
### ఫారమ్ సమర్పణ పరీక్ష
**మీ ఫారమ్‌ను పరీక్షించడానికి ఈ దశలను అనుసరించండి:**
1. రిజిస్టర్ ఫారమ్‌లో మీ వివరాలు నింపండి
2. "ఖాతా సృష్టించు" బటన్‌ను నొక్కండి
3. బ్రౌజర్‌లో సర్వర్ స్పందనను గమనించండి
![localhost:5000/api/accounts అడ్రస్ విండోలో వినియోగదారు డేటా JSON స్ట్రింగ్](../../../../translated_images/form-post.61de4ca1b964d91a.te.png)
**మీకు కనిపించే విషయాలు:**
- **బ్రౌజర్ API ఎండ్పాయింట్ URLకి రీడైరెక్ట్ అవుతుంది**
- **మీ సృష్టించిన ఖాతా డేటాతో JSON స్పందన వస్తుంది**
- **సర్వర్ ఖాతా విజయవంతంగా సృష్టించబడిందని ధృవీకరిస్తుంది**
> 🧪 **ప్రయోగం సమయం**: అదే వాడుకరి పేరుతో మళ్ళీ రిజిస్టర్ అవుద్దాం. ఏ స్పందన వస్తుంది? ఇది సర్వర్ డూప్లికేట్ డేటా, లోప పరిస్థితులను ఎలా నిర్వహిస్తుందో అర్థం చేసుకోవడానికి సహాయపడుతుంది.
### JSON స్పందనల అవగాహన
**సర్వర్ ఫారమ్ విజయవంతంగా ప్రాసెస్ చేస్తే:**
```json
{
"user": "john_doe",
"currency": "$",
"description": "Personal savings",
"balance": 100,
"id": "unique_account_id"
}
```
**ఈ స్పందన సూచిస్తుంది:**
- **మీ సూచించిన డేటాతో కొత్త ఖాతాను సృష్టిస్తుంది**
- **భవిష్యత్తు సూచన కోసం ప్రత్యేక గుర్తింపుని కేటాయిస్తుంది**
- **పరీక్ష కోసం అన్ని ఖాతా సమాచారం తిరిగి ఇస్తుంది**
- **డేటాబేస్ నిల్వ విజయవంతమైందని సూచిస్తుంది**
## ఆధునిక జావాస్క్రిప్ట్ తో ఫారమ్ నిర్వహణ
పారంపర్య ఫార్మ్ సమర్పణతో పేజీ పూర్తి రీలోడ్ అవుతుంది, ఇది తొలి అంతరిక్ష మిషన్లలో పూర్ణ సిస్టమ్ రీసెట్ చేయాల్సిన అవసరాన్ని పోలి ఉంటుంది. ఇది వినియోగదారుల అనుభవాన్ని అంతరాయం చేస్తుంది మరియు అప్లికేషన్ స్థితిని కోల్పోతుంది.
జావాస్క్రిప్ట్ ఫారమ్ నిర్వహణ ప్రయాణ నియంత్రణ వ్యవస్థల మాదిరిగా – రియల్ టైంలో మార్పులు చెయ్యడమే కాక, స్థానాన్ని కోల్పోకుండా దారితప్పకుండా మార్గనిర్దేశం చేస్తుంది. ఫారమ్ సమర్పణలను జాప్యం లేకుండా అరికడమే, లోపాలను సురక్షితంగా నిర్వహించడం, మరియు సర్వర్ స్పందనల ఆధారంగా ఇంటర్ఫేస్ నవీకరణ చేయడం వీల్లాభాలు.
### పేజీ రీలోడ్‌లను నివారించటం ఎందుకు?
```mermaid
sequenceDiagram
participant User
participant SPA
participant Server
User->>SPA: ఫారమ్ సమర్పిస్తుంది
SPA->>Server: AJAX అభ్యర్థన
Server-->>SPA: JSON ప్రతిస్పందన
SPA->>User: ఇంటర్‌ఫేస్‌ను నవీకరిస్తుంది
Note over User,SPA: పేజీ రీలోడ్ అవసరం లేదు!
```
**జావాస్క్రిప్ట్ ఫారమ్ నిర్వహణ లాభాలు:**
- **అప్లికేషన్ స్థితిని మరియు వినియోగదారుల సందర్భాన్నీ కలిగి ఉంచుతుంది**
- **తక్షణ స్పందన మరియు లోడింగ్ సూచికలు అందిస్తుంది**
- **డైనమిక్ లోప నిర్వహణ మరియు ధృవీకరణను సాధ్యం చేస్తుంది**
- **స్మూత్, యాప్-లాగా యూజర్ అనుభవాలు సృష్టిస్తుంది**
- **సర్వర్ స్పందనల ఆధారంగా షరతు నిబద్ధతలు అమలు చేయగలదు**
### సంప్రదాయ ఫారమ్ నుంచి ఆధునికల వైపు మార్పు
**సంప్రదాయ విధాన సమస్యలు:**
- **యూజర్లను అప్లికేషన్ బాహ్యంగా తిరిగిపారేస్తుంది**
- **ప్రస్తుత అప్లికేషన్ స్థితిని మాయం చేస్తుంది**
- **సాధారణ ఆపరేషన్ల కోసం పేజీను పూర్తిగా రీలోడ్ చేయాల్సి ఉంటుంది**
- **యూజర్ స్పందనపై పరిమిత నియంత్రణ**
**ఆధునిక జావాస్క్రిప్ట్ విధాన లాభాలు:**
- **యూజర్లు అప్లికేషన్ లోనే ఉంటారు**
- **అన్ని అప్లికేషన్ స్థితులు మరియు డేటా నిల్వ**
- **తక్షణ ధృవీకరణ మరియు ప్రతిస్పందన**
- **ప్రోగ్రెసివ్ ఎన్హాన్స్‌మెంట్ మరియు ప్రాప్తిసౌలభ్య మద్దతు**
### జావాస్క్రిప్ట్ ఫారమ్ నిర్వహణ అమలు
పారంపర్య ఫారమ్ సమర్పణను ఆధునిక జావాస్క్రిప్ట్ ఈవెంట్ హ్యాండ్లింగ్‌తో మార్చుదాం:
```html
<!-- Remove the action attribute and add event handling -->
<form id="registerForm" method="POST" novalidate>
```
**మీ `app.js` ఫైల్‌లో రిజిస్ట్రేషన్ లాజిక్ జోడించండి:**
```javascript
// ఆధునిక ఈవెంట్-ఆధారిత ఫారమ్ హ్యాండ్లింగ్
function register() {
const registerForm = document.getElementById('registerForm');
const formData = new FormData(registerForm);
const data = Object.fromEntries(formData);
const jsonData = JSON.stringify(data);
console.log('Form data prepared:', data);
}
// పేజీ లోడ్ అయినప్పుడు ఈవెంట్ లిసనర్‌ను జతచేయండి
document.addEventListener('DOMContentLoaded', () => {
const registerForm = document.getElementById('registerForm');
registerForm.addEventListener('submit', (event) => {
event.preventDefault(); // డిఫాల్ట్ ఫారమ్ సబ్మిషన్‌ను అరికట్టండి
register();
});
});
```
**ఇక్కడ ఏమి జరుగుతుందో విడదీస్తే:**
- **`event.preventDefault()` తో డిఫాల్ట్ ఫారమ్ సమర్పణ అడ్డుకుంటుంది**
- **ఆధునిక DOM సెలక్షన్ ఉపయోగించి ఫారమ్ ఎలిమెంట్‌ని పొందుతుంది**
- **శక్తివంతమైన `FormData` APIతో ఫారమ్ డేటాను పొందుతుంది**
- **`Object.fromEntries()`తో FormDataని సాధారణ ఆబ్జెక్టుగా మార్చుతుంది**
- **డేటాను సర్వర్ కమ్యూనికేషన్ కొరకు JSON ఫార్మేట్ చేస్తుంది**
- **డీబగ్గింగ్ మరియు ధృవీకరణ కోసం డేటాను లాగ్ చేస్తుంది**
### FormData API అవగాహన
**FormData API శక్తివంతమైన ఫారమ్ నిర్వహణను అందిస్తుంది:**
```javascript
// FormData ఏమి పట్టుకుంటుంది అన్న దానికి ఉదాహరణ
const formData = new FormData(registerForm);
// FormData స్వయంచాలకంగా పట్టుకుంటుంది:
// {
// "user": "john_doe",
// "currency": "$",
// "description": "వ్యక్తిగత ఖాతా",
// "balance": "100"
// }
```
**FormData API లాభాలు:**
- **సమగ్ర సేకరణ**: పాఠ్యం, ఫైల్స్ మరియు సారూప్య ఇన్‌పుట్‌ల సహా అన్ని ఫారం అంశాలను క్యాప్చర్ చేస్తుంది
- **రకం అవగాహన**: ప్రత్యేక కోడింగ్ లేకుండా విభిన్న ఇన్‌పుట్ ర‌కాల‌ను ఆటోమాటిక్‌గా నిర్వహిస్తుంది
- **సమర్ధత**: ఒకే API కాల్‌తో మాన్యువల్ ఫీల్డ్ సేకరణను తొలగిస్తుంది
- **అనుసంధానం**: ఫారమ్ నిర్మాణం మారినప్పటికీ పనితీరును నిలుపుకుంటుంది
### సర్వర్ కమ్యూనికేషన్ ఫంక్షన్ తయారీ
ఇప్పుడు ఆధునిక JavaScript ప్యాటర్న్‌లను ఉపయోగించి మీ API సర్వర్‌తో కమ్యూనికేట్ చేసే బలమైన ఫంక్షన్‌ను తయారుచుకుందాము:
```javascript
async function createAccount(account) {
try {
const response = await fetch('//localhost:5000/api/accounts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: account
});
// ప్రతిస్పందన విజయవంతమైందా చెక్ చేయండి
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Account creation failed:', error);
return { error: error.message || 'Network error occurred' };
}
}
```
**అసింక్రోనస్ JavaScript అవగాహన:**
```mermaid
sequenceDiagram
participant JS as జావాస్క్రిప్ట్
participant Fetch as ఫెచ్ API
participant Server as పశ్చాత్తరు సర్వర్
JS->>Fetch: fetch() అభ్యర్థన
Fetch->>Server: HTTP POST
Server-->>Fetch: JSON ప్రతిస్పందన
Fetch-->>JS: స్పందన కోసం ఎదురు చూడండి
JS->>JS: డేటాను ప్రాసెస్ చేయండి
```
**ఈ ఆధునిక అమలు సాధించేది:**
- చదవదగిన అసింక్రోనస్ కోడ్ కోసం `async/await` ఉపయోగిస్తుంది
- సరైన లోపాల హ్యాండ్లింగ్ కోసం try/catch బ్లాక్‌లను కలిగి ఉంటుంది
- డేటా ప్రాసెస్ చేసే ముందు ప్రతిస్పందన స్థితిని తనిఖీ చేస్తుంది
- JSON కమ్యూనికేషన్ కి తగిన హెచ్చరికలను సెట్ చేస్తుంది
- డీబగ్గింగ్ కోసం విపులమైన లోపాల సందేశాలను అందిస్తుంది
- విజయవంతమయిన మరియు లోపాల సందర్భాల్లో సంతులితమైన డేటా నిర్మాణాన్ని తిరిగి ఇస్తుంది
### ఆధునిక Fetch API శక్తి
**పాత పద్ధతులపై Fetch API లాభాలు:**
| లక్షణం | లాభం | అమలు |
|---------|---------|----------------|
| Promise-ఆధారిత | శుభ్రమైన అసింక్రోనస్ కోడ్ | `await fetch()` |
| అభ్యర్థన కస్టమైజేషన్ | పూర్తి HTTP నియంత్రణ | హెడ్డర్లు, విధానాలు, బాడీ |
| ప్రతిస్పందన హ్యాండ్లింగ్ | అనువైన డేటా పార్సింగ్ | `.json()`, `.text()`, `.blob()` |
| లోపాల హ్యాండ్లింగ్ | సమగ్ర లోపాల పట్టుకోవడం | Try/catch బ్లాక్‌లు |
> 🎥 **మరింత తెలుసుకోండి**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - ఆధునిక వెబ్ అభివృద్ధి కోసం అసింక్రోనస్ జావాస్క్రిప్ట్ ప్యాటర్న్‌లు అర్థం చేసుకోండి.
**సర్వర్ కమ్యూనికేషన్ కీలక భావనలు:**
- **Async ఫంక్షన్‌లు** సర్వర్ ప్రతిస్పందన కోసం ఎగ్జిక్యూషన్ ఆగిపోవడానికి అనుమతిస్తాయి
- **Await కీవర్డ్** అసింక్రోనస్ కోడ్‌ను సింక్రోనస్‌లా చదవగలుగుతుంది
- **Fetch API** ఆధునిక, ప్రామిస్-ఆధారిత HTTP అభ్యర్థనలను అందిస్తుంది
- **లోపాల హ్యాండ్లింగ్** నెట్‌వర్క్ సమస్యలకు మీ యాప్ ఎలా స్పందించాలో ఖచ్చితంగా చూసుకోండి
### నమోదు ఫంక్షన్ పూర్తి చేయడం
మొత్తం విషయాలను కలిసి, ప్రొడక్షన్-సిద్ధమైన నమోదు ఫంక్షన్‌ను తయారుచేద్దాం:
```javascript
async function register() {
const registerForm = document.getElementById('registerForm');
const submitButton = registerForm.querySelector('button[type="submit"]');
try {
// లోడింగ్ స్థితిని ప్రదర్శించండి
submitButton.disabled = true;
submitButton.textContent = 'Creating Account...';
// ఫారమ్ డేటాను ప్రాసెస్ చేయండి
const formData = new FormData(registerForm);
const jsonData = JSON.stringify(Object.fromEntries(formData));
// సర్వర్‌కు పంపండి
const result = await createAccount(jsonData);
if (result.error) {
console.error('Registration failed:', result.error);
alert(`Registration failed: ${result.error}`);
return;
}
console.log('Account created successfully!', result);
alert(`Welcome, ${result.user}! Your account has been created.`);
// విజయవంతమైన నమోదు తర్వాత ఫారమ్‌ను రీసెట్ చేయండి
registerForm.reset();
} catch (error) {
console.error('Unexpected error:', error);
alert('An unexpected error occurred. Please try again.');
} finally {
// బటన్ స్థితిని పునఃస్థాపించండి
submitButton.disabled = false;
submitButton.textContent = 'Create Account';
}
}
```
**ఈ మెరుగుదల అమలు చేస్తుంది:**
- ఫారమ్ సమర్పణ సమయంలో దృశ్య ఫీడ్బ్యాక్ అందిస్తుంది
- ఇరట సబ్మిషన్లను నివారించడానికి సబ్మిట్ బటన్‌ను డిసేబుల్ చేస్తుంది
- ఎదురుచూసిన మరియు అనుకోని లోపాలను సాలవగానే నిర్వహిస్తుంది
- వినియోగదారుని స్నేహపూర్వక విజయ, లోప సందేశాలు చూపిస్తుంది
- విజయవంతమైన నమోదు తర్వాత ఫారంను రీసెట్ చేస్తుంది
- ఫలితం ఏమైనా UI స్థితిని పునరుద్ధరిస్తుంది
### మీ అమలును పరీక్షించడం
**మీ బ్రౌజర్ డెవలపర్ టూల్స్ తెరవండి మరియు నమోదు పని చేయండి:**
1. **బ్రౌజర్ కన్సోల్ ఓపెన్ చేయండి (F12 → Console tab)**
2. **నమోదు ఫారమ్ భర్తీ చేయండి**
3. **"Create Account"పై నొక్కండి**
4. **కన్సోల్ సందేశాలు మరియు వినియోగదారుని ఫీడ్బ్యాక్‌ని గమనించండి**
![Screenshot showing log message in the browser console](../../../../translated_images/browser-console.efaf0b51aaaf6778.te.png)
**మీరు చూడాల్సింది:**
- సబ్మిట్ బటన్ పై లోడింగ్ స్థితి కనిపిస్తుంది
- కన్సోల్ లో ప్రాసెస్ యొక్క వివరణాత్మక సమాచారాన్ని చూపిస్తుంది
- ఖాతా సృష్టి విజయవంతమైతే విజయ సందేశం వస్తుంది
- విజయవంతమైన సమర్పణ తర్వాత ఫారమ్ ఆటోమేటిక్‌గా రీసెట్ అవుతుంది
> 🔒 **సెక్యూరిటీ జాగ్రత్త**: ప్రస్తుతం, డేటా HTTP పై ప్రయాణిస్తుంది, ఇది ప్రొడక్షన్ కోసం సురక్షితం కాదు. నిజమైన అనువర్తనాలలో, డేటా సంకేతీకరణ కోసం ఎల్లప్పుడూ HTTPS వాడాలి. [HTTPS సెక్యూరిటీ](https://en.wikipedia.org/wiki/HTTPS) గురించి మరియు ఇది వినియోగదారుల డేటా రక్షణకు ఎందుకు అవసరమో తెలుసుకోండి.
### 🔄 **షిక్షణాత్మక తనిఖీ**
**ఆధునిక JavaScript ఇంటిగ్రేషన్**: అసింక్రోనస్ ఫార్మ్ హ్యాండ్లింగ్ మీ అవగాహనను నిర్ధారించుకోండి:
- ✅ `event.preventDefault()` ఎలా పూర్వనిర్దేశිත ఫార్మ్ ప్రవర్తనను మార్చుతుంది?
- ✅ మాన్యువల్ ఫీల్డ్ సేకరణ కంటే FormData API ఎంత సమర్ధవంతం ఎందుకు?
- ✅ async/await ప్యాటర్న్‌లు కోడ్ చదువుదల ఎలా మెరుగుపరుస్తాయి?
- ✅ వినియోగదారుల అనుభవంలో లోపాల హ్యాండ్లింగ్ యొక్క పాత్ర ఏమిటి?
**సిస్టమ్ వాస్తవీకరణ**: మీ ఫారమ్ హ్యాండ్లింగ్ ఈ క్రింది లక్షణాలను ప్రదర్శిస్తోంది:
- **ఈవెంట్-డ్రైవన్ ప్రోగ్రామ్మింగ్**: వినియోగదారుల చర్యలకు పేజీ రీలోడ్ లేకుండా స్పందిస్తాయి
- **అసింక్రోనస్ కమ్యూనికేషన్**: సర్వర్ అభ్యర్థనలు UIను బ్లాక్ చేయవు
- **లోపాల హ్యాండ్లింగ్**: నెట్‌వర్క్ సమస్యలు వచ్చినప్పుడు మెల్లగంచు శ్రేయస్సు అందిస్తుంది
- **స్థితి నిర్వహణ**: సర్వర్ ప్రతిస్పందనలకు UI నవీకరణలతో సరైన ప్రతిబింబం
- **ప్రోగ్రెసివ్ ఎन्हాన్స్‌మెంట్**: బేసిక్ ఫంక్షనాలిటీ పని చేస్తుంది, JavaScript మరింత మెరుగుపరుస్తుంది
**ప్రొఫెషనల్ ప్యాటర్న్‌లు**: మీరు అమలుచేశారు:
- **సింగిల్ రెస్పాన్సిబిలిటీ**: ఫంక్షన్లు స్పష్టమైన, కేంద్రీకృత గమ్యాలు కలిగి ఉంటాయి
- **లోపాల సరిహద్దులు**: Try/catch బ్లాక్‌ల ద్వారా అప్లికేషన్ క్రాష్ నివారణ
- **వినియోగదారుల ఫీడ్బ్యాక్**: లోడింగ్ స్టేట్స్ మరియు విజయ/లోప సందేశాలు
- **డేటా ట్రాన్స్ఫర్మేషన్**: FormData నుండి JSON కి సర్వర్ కమ్యూనికేషన్
## సమగ్ర ఫార్మ్ వెరిఫికేషన్
ఫారమ్ వెరిఫికేషన్ సమర్పణ తర్వాత లోపాలు కనుగొనడాన్ని నిరోధిస్తుంది. ఇంటర్నేషనల్ స్పేస్ స్టేషన్‌లోని అనేక పునరావృత సిస్టమ్‌లలా, సమర్ధవంతమైన వెరిఫికేషన్ అనేక భద్రతా తనిఖీలను నిర్వర్తిస్తుంది.
ఉత్తమ విధానం తక్షణ ఫీడ్బ్యాక్ కోసం బ్రౌజర్ స్థాయి వెరిఫికేషన్, వినియోగదారుభాగానికి మెరుగుదల కోసం JavaScript వెరిఫికేషన్, భద్రత మరియు డేటా సమగ్రత కోసం సర్వర్-వైపు వెరిఫికేషన్‌ను కలుపుతుంది. ఈ పునరావృతత వినియోగదారుల సంతృప్తి మరియు సిస్టమ్ రక్షణను నిర్ధారిస్తుంది.
### వెరిఫికేషన్ స్థరాలు అవగాహన
```mermaid
graph TD
A[వాడుకరి ఇన్‌పుట్] --> B[HTML5 ధృవీకరణ]
B --> C[కస్టమ్ జావాస్క్రిప్ట్ ధృవీకరణ]
C --> D[క్లయింట్-సైడ్ పూర్తి]
D --> E[సర్వర్-సైడ్ ధృవీకరణ]
E --> F[డేటా నిల్వ]
B -->|చెల్లనిది| G[బ్రౌజర్ లోప సందేశం]
C -->|చెల్లనిది| H[కస్టమ్ లోప ప్రదర్శన]
E -->|చెల్లనిది| I[సర్వర్ లోప ప్రతిస్పందన]
```
**బహుళ-స్థర వెరిఫికేషన్ వ్యూహం:**
- **HTML5 వెరిఫికేషన్**: తక్షణ బ్రౌజర్ ఆధారిత తనిఖీలు
- **JavaScript వెరిఫికేషన్**: అనుకూల లాజిక్ మరియు వినియోగదారు అనుభవం
- **సర్వర్ వెరిఫికేషన్**: తుద భద్రత మరియు డేటా సమగ్రత తనిఖీలు
- **ప్రోగ్రెసివ్ ఎन्हాన్స్‌మెంట్**: JavaScript డిసేబుల్ అయినా పనిచేస్తుంది
### HTML5 వెరిఫికేషన్ లక్షణాలు
**మీకు అందుబాటులో ఉన్న ఆధునిక వెరిఫికేషన్ సాధనాలు:**
| లక్షణం | ఉద్దేశ్యం | ఉదాహరణ వాడకం | బ్రౌజర్ ప్రవర్తన |
|-----------|---------|---------------|------------------|
| `required` | తప్పనిసరి ఫీల్డ్‌లు | `<input required>` | ఖాళీ సమర్పణను నిరోధిస్తుంది |
| `minlength`/`maxlength` | పాఠ్య పొడవు పరిమితులు | `<input maxlength="20">` | అక్షర పరిమితులను అమలు చేస్తుంది |
| `min`/`max` | సంఖ్య రేంజ్‌లు | `<input min="0" max="1000">` | సంఖ్య పరిమితులను సరిచూసుతుంది |
| `pattern` | అనుకూల regex నియమాలు | `<input pattern="[A-Za-z]+">` | నిర్దిష్ట ఫార్మాట్లకు సరిపోతుంది |
| `type` | డేటా రకం వెరిఫికేషన్ | `<input type="email">` | ఫార్మాట్-స్పెసిఫిక్ వెరిఫికేషన్ |
### CSS వెరిఫికేషన్ స్టైలింగ్
**వెరిఫికేషన్ స్థితుల కోసం దృశ్య ఫీడ్బ్యాక్ సృష్టించండి:**
```css
/* Valid input styling */
input:valid {
border-color: #28a745;
background-color: #f8fff9;
}
/* Invalid input styling */
input:invalid {
border-color: #dc3545;
background-color: #fff5f5;
}
/* Focus states for better accessibility */
input:focus:valid {
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
input:focus:invalid {
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
```
**ఈ దృశ్య సూచనలు అందించే దాని గురించి:**
- **పచ్చటి సరిహద్దులు**: విజయవంతమైన వెరిఫికేషన్ సూచిస్తాయి, మిషన్ కంట్రోల్ లో గ్రీన్ లైట్ల లాగే
- **ఎరుపు సరిహద్దులు**: జాగ్రత్త అవసరమైన వెరిఫికేషన్ లోపాలను సూచిస్తాయి
- **ఫోకస్ హైలైట్స్**: ప్రస్తుత ఇన్‌పుట్ స్థానం స్పష్టమైన దృశ్య సూత్రాలు అందిస్తాయి
- **మొదలు స్టైలింగ్**: వినియోగదారులు నేర్చుకునే ఒకసారిగా ఉండే ఇంటర్‌ఫేస్ నమూనాలు
> 💡 **ప్రొ టిప్**: వినియోగదారులు టైప్ చేస్తున్న వెంటనే తక్షణ దృశ్య ఫీడ్బ్యాక్ ఇవ్వడానికి `:valid` మరియు `:invalid` CSS పseudo-classes వాడండి, ప్రతిస్పందనీయ మరియు సహాయక ఇంటర్‌ఫేస్ సృష్టించండి.
### సమగ్ర వెరిఫికేషన్ అమలు
మీ నమోదు ఫారాన్ని బలమైన వెరిఫికేషన్‌తో మెరుగుపరుచుకుందాం, యూజర్ అనుభవం మరియు డేటా నాణ్యతలో అద్భుతమైన ఫలితాలు అందించే:
```html
<form id="registerForm" method="POST" novalidate>
<div class="form-group">
<label for="user">Username <span class="required">*</span></label>
<input id="user" name="user" type="text" required
minlength="3" maxlength="20"
pattern="[a-zA-Z0-9_]+"
autocomplete="username"
title="Username must be 3-20 characters, letters, numbers, and underscores only">
<small class="form-text">Choose a unique username (3-20 characters)</small>
</div>
<div class="form-group">
<label for="currency">Currency <span class="required">*</span></label>
<input id="currency" name="currency" type="text" required
value="$" maxlength="3"
pattern="[A-Z$€£¥₹]+"
title="Enter a valid currency symbol or code">
<small class="form-text">Currency symbol (e.g., $, €, £)</small>
</div>
<div class="form-group">
<label for="description">Account Description</label>
<input id="description" name="description" type="text"
maxlength="100"
placeholder="Personal savings, checking, etc.">
<small class="form-text">Optional description (up to 100 characters)</small>
</div>
<div class="form-group">
<label for="balance">Starting Balance</label>
<input id="balance" name="balance" type="number"
value="0" min="0" step="0.01"
title="Enter a positive number for your starting balance">
<small class="form-text">Initial account balance (minimum $0.00)</small>
</div>
<button type="submit">Create Account</button>
</form>
```
**மேம்பட்ட వెరిఫికేషన్ అవగాహన:**
- తప్పనిసరి ఫీల్డ్ సూచికలతో సహా కలిపి
- ఫార్మాట్ వెరిఫికేషన్ కోసం `pattern` లక్షణాలు కలిగి ఉంటుంది
- యాక్సెసిబిలిటీ మరియు టూల్‌టిప్స్ కోసం `title` లక్షణాలు అందిస్తుంది
- యూజర్ ఇన్‌పుట్‌కు మార్గదర్శకం చేసే సహాయక పాఠ్యాలను జోడిస్తుంది
- మెరుగైన యాక్సెసిబిలిటీ కోసం సీమాంటిక్ HTML నిర్మాణం వాడుతుంది
### అధునాతన వెరిఫికేషన్ నియమాలు
**ప్రతి వెరిఫికేషన్ నియమం సాధించేది:**
| ఫీల్డ్ | వెరిఫికేషన్ నియమాలు | వినియోగదారుని లాభం |
|-------|------------------|--------------|
| యూజర్నేమ్ | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | సరైన, ప్రత్యేక గుర్తింపులు నిర్ధారిస్తుంది |
| కరెన్సీ | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | సాధారణ కరెన్సీ చిహ్నాలను అంగీకరిస్తుంది |
| బ్యాలెన్స్ | `min="0"`, `step="0.01"`, `type="number"` | హెచ్చుతగ్గులేని బ్యాలెన్స్‌లను నివారిస్తుంది |
| వివరణ | `maxlength="100"` | తగిన పొడవు పరిమితులు |
### వెరిఫికేషన్ ప్రవర్తనను పరీక్షించండి
**ఈ వెరిఫికేషన్ పరిస్థితులను ప్రయత్నించండి:**
1. తప్పనిసరి ఖాళీ ఫీల్డ్‌లతో ఫారమ్ సబ్మిట్ చేయండి
2. 3 అక్షరాలకు తక్కువ లేనేమ్ ఎంటర్ చేయండి
3. యూజర్నేమ్ ఫీల్డ్‌లో ప్రత్యేక అక్షరాలు ప్రయత్నించండి
4. నెగటివ్ బ్యాలెన్స్ విలువ ఎంటర్ చేయండి
![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/validation-error.8bd23e98d416c22f.te.png)
**మీరు గమనించేది:**
- బ్రౌజర్ ఒక లోకల్ వెరిఫికేషన్ సందేశాలను చూపిస్తుంది
- `:valid` మరియు `:invalid` స్థితుల ఆధారంగా స్టైలింగ్ మారుతుంది
- అన్ని వెరిఫికేషన్లు పూర్తి కాకపోతే ఫారమ్ సమర్పణ నిరోధించబడుతుంది
- ఆటోమేటిక్‌గా మొదటి చెడు ఫీల్డ్‌కి ఫోకస్ వెళుతుంది
### క్లయింట్-సైడ్ vs సర్వర్-సైడ్ వెరిఫికేషన్
```mermaid
graph LR
A[క్లయింట్-సైడ్ ధృవీకరణ] --> B[తక్షణ ఫీడ్‌బ్యాక్]
A --> C[మంచి వినియోగదారు అనుభవం]
A --> D[తగ్గిన సర్వర్ లోడ్]
E[సర్వర్-సైడ్ ధృవీకరణ] --> F[భద్రత]
E --> G[డేటా ఐక్యత]
E --> H[వ్యాపార నియమాలు]
A -.-> I[రెண்டும் అవసరం]
E -.-> I
```
**రెండు స్థరాలు ఎందుకు అవసరం:**
- **క్లయింట్-సైడ్ వెరిఫికేషన్**: తక్షణ ఫీడ్బ్యాక్ ఇస్తుంది మరియు వినియోగదారుల అనుభవాన్ని మెరుగుపరుస్తుంది
- **సర్వర్-సైడ్ వెరిఫికేషన్**: భద్రతను నిర్ధారిస్తుంది మరియు క్లిష్టమైన వ్యాపార నియమాలను నిర్వహిస్తుంది
- **కలిపిన విధానం**: బలమైన, వినియోగదారుల అనుకూల మరియు సురక్షిత అనువర్తనాలను సృష్టిస్తుంది
- **ప్రోగ్రెసివ్ ఎन्हాన్స్‌మెంట్**: JavaScript డిసేబుల్ అయినా పని చేస్తుంది
> 🛡️ **సెక్యూరిటీ జ్ఞాపకం**: ఎప్పుడూ క్లయింట్-సైడ్ వెరిఫికేషన్ మాత్రమే నమ్మకాదరు! దురుద్దేశ్యులైనా వినియోగదారులు ఈ తనిఖీలను దాటవేయగలరు కనుక, సర్వర్-వైపు వెరిఫికేషన్ భద్రత మరియు డేటా సమగ్రతకు అవసరం.
### ⚡ **తర్వాతి 5 నిమిషాల్లో మీరు చేయగలది**
- [ ] తప్పు డేటాతో మీ ఫారంను పరీక్షించి వెరిఫికేషన్ సందేశాలు చూడండి
- [ ] JavaScript ఆపివేయబడినప్పుడు ఫారమ్ ను సబ్మిట్ చేసి HTML5 వెరిఫికేషన్ ను గమనించండి
- [ ] బ్రౌజర్ DevTools ఓపెన్ చేసి సర్వర్‌కు పంపబడుతున్న ఫారమ్ డేటా చూడండి
- [ ] మొబైల్ కీబోర్డ్ మార్పుల కోసం వేరే ఇన్‌పుట్ రకాలను ప్రయోగించండి
### 🎯 **ఈ గంటలో సాధించగలిగేది**
- [ ] పాఠం అనంతరం క్విజ్ పూర్తి చేసి ఫారమ్ హ్యాండ్లింగ్ భావనలను అర్థం చేసుకోండి
- [ ] సమగ్ర వెరిఫికేషన్ చాలెంజ్‌ను రియల్-టైమ్ ఫీడ్బ్యాక్‌తో అమలు చేయండి
- [ ] ప్రొఫెషనల్ లుక్ కలిగిన ఫారమ్‌ల కోసం CSS స్టైలింగ్ జోడించండి
- [ ] పునరావృత యూజర్నేమ్‌లు మరియు సర్వర్ లోపాల కోసం లోపాల నిర్వహణ సృష్టించండి
- [ ] సరిపోలే వేరుసార్వత్రిక పాస్వర్డ్ నిర్ధారణ ఫీల్డ్‌లు జత చేయండి
### 📅 **మీ వారాంత ఫారమ్ నైపుణ్య యాత్ర**
- [ ] అధునాతన ఫార్మ్ లక్షణాలతో పూర్తి బ్యాంకింగ్ యాప్ ను పూర్తి చేయండి
- [ ] ప్రొఫైల్ ఫోటోలు లేదా డాక్యుమెంట్ల కొరకు ఫైల్ అప్‌లోడ్ సామర్థ్యాలు కలపండి
- [ ] ప్రగతిశీల సూచికలు మరియు స్థితి నిర్వహణతో బహుళ దశల ఫారమ్‌లను అమలు చేయండి
- [ ] వినియోగదారుల ఎంపికల ఆధారంగా అనుకూలించే డైనమిక్ ఫారమ్‌లను సృష్టించండి
- [ ] మెరుగైన వినియోగదారు అనుభవం కోసం ఫార్మ్ ఆటోసేవ్ మరియు రికవరీ అమలు చేయండి
- [ ] ఇమెయిల్ ధృవీకరణ, ఫోన్ నంబర్ ఫార్మాటింగ్ వంటి అధునాతన వెరిఫికేషన్ జోడించండి
### 🌟 **మీ నెల పొడవైన ఫ్రంట్‌ఎండ్ అభివృద్ధి నైపుణ్యం**
- [ ] షరతులు మరియు వర్క్‌ఫ్లోలతో కాంప్లెక్స్ ఫారమ్ అప్లికేషన్లను నిర్మించండి
- [ ] వేగవంతమైన అభివృద్ధికి ఫారమ్ లైబ్రరీలు మరియు ఫ్రేమ్‌వర్క్‌లు నేర్చుకోండి
- [ ] యాక్సెసిబిలిటీ మార్గదర్శకాలు మరియు పరస్పర డిజైన్ సూత్రాలలో నైపుణ్యం పొందండి
- [ ] అంతర్జాతీయీకరణ మరియు స్థానికీకరణ ఆధారమైన ప్రపంచవ్యాప్తంగా ఫారమ్‌లను అమలు చేయండి
- [ ] పునర్వినియోగం అవకాశం ఉన్న ఫారమ్ కంపోనెంట్ లైబ్రరీలు మరియు డిజైన్ సిస్టమ్‌లను సృష్టించండి
- [ ] ఓపెన్ సోర్స్ ఫారమ్ ప్రాజెక్టులకు విరాళం ఇవ్వండి మరియు ఉత్తమ పద్ధతులను పంచుకోండి
## 🎯 మీ ఫారమ్ అభివృద్ధి నైపుణ్య టైమ్‌లైన్
```mermaid
timeline
title ఫారమ్ అభివృద్ధి & వినియోగదారు అనుభవం నేర్చుకునే పురోగతి
section HTML ఫౌండేషన్ (15 నిమిషాలు)
వెలుపల ఫారమ్‌లు: ఫారం మూలకాలు
: ఇన్‌పుట్ రకాల
: లేబుళ్లు మరియు యాక్సెసిబిలిటీ
: నిరంతర మెరుగుదల
section జావాస్క్రిప్ట్ ఇంటిగ్రేషన్ (25 నిమిషాలు)
ఈవెంట్ హాండ్లింగ్: ఫారం సమర్పణ
: డేటా సేకరణ
: AJAX కమ్యూనికేషన్
: అసింక్/ఆవెయిట్ నమూనాలు
section ఎలుకేషన్ సిస్టమ్స్ (35 నిమిషాలు)
బహుళ-హేతుబద్ధ సెక్యూరిటీ: HTML5 నిర్ధారణ
: క్లయింట్-సైడ్ లాజిక్
: సర్వర్-సైడ్ ధ్రువీకరణ
: తప్పిద నిర్వహణ
section వినియోగదారు అనుభవం (45 నిమిషాలు)
ఇంటర్‌ఫేస్ పొలిష్: లోడింగ్ స్థితులు
: విజయం సందేశం
: తప్పిద పునరుద్ధరణ
: యాక్సెసిబిలిటీ ఫీచర్లు
section అధునాతన నమూనాలు (1 వారం)
ప్రొఫెషనల్ ఫారమ్‌లు: డైనమిక్ నిర్ధారణ
: బహుళ-దశ వర్క్‌ఫ్లోలు
: ఫైల్ అప్లోడ్లు
: నిజ సమయ ఫీడ్‌బ్యాక్
section ఎంటర్‌ప్రైజ్ నెపుణ్యాలు (1 నెల)
ప్రొడక్షన్ అప్లికేషన్లు: ఫారం లైబ్రరీలు
: పరీక్షించు వ్యూహాలు
: పనితీరు ఆప్టిమైజేషన్
: భద్రత ఉత్తమ పద్ధతులు
```
### 🛠️ మీ ఫారమ్ అభివృద్ధి పనిముట్ల సారాంశం
ఈ పాఠం పూర్తయిన తర్వాత, మీరు ఇప్పుడు నైపుణ్యం సంపాదించుకున్నారు:
- **HTML5 Forms**: సీమాంటిక్ నిర్మాణం, ఇన్‌పుట్ రకాలు, యాక్సెసిబిలిటీ ఫీచర్లు
- **JavaScript Form Handling**: ఈవెంట్ నిర్వహణ, డేటా సేకరణ, AJAX కమ్యూనికేషన్
- **వెరిఫికేషన్ ఆర్కిటెక్చర్**: భద్రత మరియు వినియోగదారు అనుభవం కోసం బహుళ-స్థర వెరిఫికేషన్
- **అసింక్రోనస్ ప్రోగ్రామ్మింగ్**: ఆధునిక fetch API మరియు async/await ప్యాటర్న్లు
- **లోపాల నిర్వహణ**: సమగ్ర లోపాల హ్యాండ్లింగ్ మరియు వినియోగదారుల ఫీడ్బ్యాక్ వ్యవస్థలు
- **వినియోగదారు అనుభవం డిజైన్**: లోడింగ్ స్థితులు, విజయ సందేశాలు, లోపాల పునరుద్ధరణ
- **ప్రోగ్రెసివ్ ఎంహాన్స్‌మెంట్**: అన్ని బ్రౌజర్‌లు మరియు సామర్థ్యాలలో పని చేసే ఫారమ్‌లు
**వాస్తవ ప్రపంచ అనువర్తనాలు**: మీ ఫారమ్ అభివృద్ధి నైపుణ్యాలు నేరుగా వర్తిస్తాయి:
- **ఈ-కామర్స్ అనువర్తనాలు**: చెకౌట్ ప్రక్రియలు, ఖాతా నమోదు, చెల్లింపు ఫారమ్‌లు
- **ఎంటర్ప్రైజ్ సాఫ్ట్‌వేర్**: డేటా ఎంట్రీ సిస్టమ్‌లు, రిపోర్టింగ్ ఇంటర్‌ఫేస్‌లు, వర్క్‌ఫ్లో అనువర్తనాలు
- **కంటెంట్ మేనేజ్‌మెంట్**: ప్రచురణ వేదికలు, వినియోగదారుల రూపొందించిన కంటెంట్, প্রশাসన ఇంటర్‌ఫేస్‌లు
- **ఆర్థిక అనువర్తనాలు**: బ్యాంకింగ్ ఇంటర్‌ఫేస్‌లు, పెట్టుబడి వేదికలు, లావాదేవీ సిస్టమ్‌లు
- **ఆరోగ్య సంరక్షణ వ్యవస్థలు**: రోగి పోర్టల్స్, అపాయింట్మెంట్ షెడ్యూలింగ్, వైద్యం రికార్డ్ ఫారమ్‌లు
- **అధ్యయన వేదికలు**: కోర్సు నమోదు, మూల్యాంకన టూల్స్, విద్య నిర్వహణ
**మీకు లభించిన ప్రొఫెషనల్ నైపుణ్యాలు**: మీరు ఇప్పుడు:
- అందరికీ (విగ్రహ సమస్యలు ఉన్నవారును సహా) పనిచేసే యాక్సెసిబుల్ ఫారమ్‌లను డిజైన్ చేయగలరు
- డేటా ధ్వంసం మరియు భద్రతా లోపాలను నివారించే సురక్షిత ఫారమ్ వెరిఫికేషన్ అమలు చేయగలరు
- స్పష్టమైన ఫీడ్బ్యాక్ మరియు మార్గదర్శకం అందించే ప్రతిస్పందన UIని సృష్టించగలరు
- బ్రౌజర్ డెవలపర్ టూల్స్ మరియు నెట్‌వర్క్ విశ్లేషణతో క్లిష్టమైన ఫారమ్ పరస్పర చర్యలను డీబగ్ చేయగలరు
- సమర్ధవంతమైన డేటా నిర్వహణ మరియు వెరిఫికేషన్ వ్యూహాల ద్వారా ఫారమ్ పనితీరును మెరుగుపరచగలరు
**ఫ్రంట్‌ఎండ్ అభివృద్ధి భావనల్లో ప్రావీణ్యం**:
- **ఈవెంట్-డ్రైవన్ ఆర్కిటెక్చర్**: వినియోగదారు అంతర్యోగ నిర్వహణ మరియు స్పందన వ్యవస్థలు
- **అసింక్రోనస్ ప్రోగ్రామ్మింగ్**: నిర్ధిక్షిప్త సర్వర్ కమ్యూనికేషన్ మరియు లోపాల నిర్వహణ
- **డేటా వెరిఫికేషన్**: క్లయింట్-సైడ్ మరియు సర్వర్-సైడ్ భద్రత మరియు సమగ్రత తనిఖీలు
- **వినియోగదారు అనుభవ డిజైన్**: విజయం వై-directed సులభమైన ఇంటర్‌ఫేస్లు
- **అక్సెసిబిలిటీ ఇంజనీరింగ్**: విభిన్న వినియోగదారుల అవసరాలకు పనిచేసే సమగ్ర డిజైన్
**తరువాతి దశ**: మీరు ఆధునిక ఫారమ్ లైబ్రరీలను అన్వేషించడానికి, క్లిష్ట వెరిఫికేషన్ నియమాలను అమలు చేయడానికి లేదా ఎంటర్ప్రైజ్-గ్రేడ్ డేటా సేకరణ సిస్టమ్‌లను నిర్మించడానికి సిద్ధంగా ఉన్నారు!
🌟 **అభివృద్ధి పూర్తి**: మీరు ప్రొఫెషనల్ వెరిఫికేషన్, లోపాల నిర్వహణ మరియు వినియోగదారుని అనుభవ నమూనాలతో పూర్తి ఫారమ్ హ్యాండ్లింగ్ సిస్టమ్‌ను నిర్మించారు!
---
---
## GitHub Copilot Agent Challenge 🚀
Use the Agent mode to complete the following challenge:
**Description:** Enhance the registration form with comprehensive client-side validation and user feedback. This challenge will help you practice form validation, error handling, and improving user experience with interactive feedback.
**ప్రాంప్ట్:** నమోదు ఫారమ్ కోసం సర్వసంపూర్ణ ఫారమ్ ధ్రువీకరణ వ్యవస్థను సృష్టించండి, ఇందులో ఉంటాయి: 1) యూజర్ టైప్ చేస్తున్నప్పుడు ప్రతి ఫీల్డ్ కోసం రియల్-టైమ్ ధ్రువీకరణ ఫీడ్‌బ్యాక్, 2) ప్రతి ఇన్పుట్ ఫీల్డ్ క్రింద కనిపించే కస్టమ్ ధ్రువీకరణ సందేశాలు, 3) సక్స్మతి ధృవీకరణ ఫీల్డ్‌తో కూడిన పాస్‌వర్డ్ ధ్రువీకరణ, 4) దృఢంగా ఉన్న ఫీల్డ్స్ కోసం ఆకుపచ్చ చెక్మార్కులు మరియు సరియైనవ olmayanవలపై ఎరుపు హెచ్చరికల వంటి దృష్టిగల సూచికలు, 5) అన్ని ధ్రువీకరణలు పూర్తి అయినప్పుడు మాత్రమే ఎనేబుల్ అయ్యే సమర్పణ బటన్. HTML5 ధ్రువీకరణ లక్షణాలు, ధ్రువీకరణ अवस्थలకు CSS శైలీకరణ, మరియు ఇంటరాక్టివ్ ప్రవర్తన కోసం JavaScript ఉపయోగించండి.
ఇక్కడ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి మరింత తెలుసుకోండి.
## 🚀 సవాలు
వాడుకరి ఇప్పటికే ఉందని HTML లో ఒక లోపం సందేశాన్ని చూపించండి.
CSS శైలీకరణ తరువాత తుది లాగిన్ పేజీ ఇలా కనిపించవచ్చు:
![CSS శైలీలను జోడించిన తరువాత లాగిన్ పేజీ స్క్రీన్‌షాట్](../../../../translated_images/result.96ef01f607bf856a.te.png)
## పాఠం తర్వాత క్విజ్
[పాఠం తర్వాత క్విజ్](https://ff-quizzes.netlify.app/web/quiz/44)
## సమీక్ష & స్వీయ అధ్యయనం
డెవలపర్లు వారి ఫారమ్ నిర్మాణ ప్రయత్నాలలో చాలా సృజనాత్మకులు అయ్యారు, ముఖ్యంగా ధ్రువీకరణ వ్యూహాల విషయంలో. వివిధ ఫారమ్ ప్రవాహాలను తెలుసుకోవడానికి [CodePen](https://codepen.com) ను పరిశీలించి, ఆసక్తికరమైన మరియు ప్రేరణాత్మక ఫారమ్‌లను కనుగొనగలరా?
## అసైన్‌మెంట్
[మీ బ్యాంక్ యాప్‌ను శైలీకరించండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టం**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వం కోసం ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా పొరపాట్లు ఉండవచ్చని దయచేసి గమనించండి. అసలు డాక్యుమెంట్ దాని స్థానిక భాషలో అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సిఫారసు చేయబడుతుంది. ఈ అనువాదం వలన ఏర్పడిన ఏవైనా అవగాహన లోపాలు లేదా తప్పుగా అర్థం చేసుకోవడంతో మేము బాధ్యులేమి కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

166
translations/te/7-bank-project/2-forms/assignment.md
Unescape View File

@ -0,0 +1,166 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
"translation_date": "2026-01-08T16:35:43+00:00",
"source_file": "7-bank-project/2-forms/assignment.md",
"language_code": "te"
}
-->
# మీ బ్యాంక్ యాప్‌ను ఆధునిక CSS తో స్టైల్ చేయండి
## ప్రాజెక్ట్ అవలోకనం
మీ ఫంక్షనల్ బ్యాంకింగ్ అప్లికేషన్‌ను ఆధునిక CSS సాంకేతికతలను ఉపయోగించి దృశ్యంగా ఆకర్షణీయమైన, ప్రొఫెషనల్ లుక్ ఉన్న వెబ్ యాప్‌గా మార్చండి. మీరు వినియోగదారు అనుభవాన్ని మెరుగుపరచుకునే సమగ్ర డిజైన్ సిస్టమ్‌ను సృష్టిస్తారు, అదే సమయంలో యాక్సెస్IBILITY మరియు రెస్పాన్స్‌వివ్ డిజైన్ సూత్రాలను నిలుపుకుంటారు.
ఈ అసైన్‌మెంట్ మీకు సంఘటిత వెబ్ డిజైన్ నమూనాలను ఉపయోగించడానికి, నిరంతర దృశ్య ఐడెంటిటీని అమలు చేయడానికి, మరియు వినియోగదారులకు ఆకర్షణీయంగా మరియు సుగమంగా నావిగేట్ చేయగల ఇంటర్‌ఫేస్‌ను సృష్టించడానికి సవాలు అరుగుతుంది.
## సూచనలు
### దశ 1: మీ స్టైల్షీట్‌ను సెట్ చేయండి
**మీ CSS పునాది సృష్టించండి:**
1. **సృష్టించండి** మీ ప్రాజెక్ట్ రూట్‌లో `styles.css` అనే కొత్త ఫైల్
2. **లింక్ చేయండి** స్టైల్షీట్‌ను మీ `index.html` ఫైల్‌లో:
```html
<link rel="stylesheet" href="styles.css">
```
3. **ప్రారంభించండి** CSS రీసెట్ మరియు ఆధునిక డిఫాల్ట్‌లతో:
```css
/* Modern CSS reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
}
```
### దశ 2: డిజైన్ సిస్టమ్ అవసరాలు
**ఈ ముఖ్యమైన డిజైన్ అంశాలను అమలు చేయండి:**
#### రంగు పలెట్
- **ప్రైమరీ కలర్**: బటన్లు మరియు హైలైట్స్ కోసం ప్రొఫెషనల్ రంగు ఎంచుకోండి
- **సెకన్డరీ కలర్**: ఆకస్మిక చర్యలకు మరియు సెకండరీ యాక్షన్స్‌కు అనుగుణమైన రంగు
- **న్యూట్రల్ కలర్స్**: టెక్స్ట్, బోర్డర్స్ మరియు బ్యాక్గ్రౌండ్‌ల కోసం గ్రే టోన్లు
- **సక్సెస్/ఎర్రర్ కలర్స్**: విజయ స్థితుల కోసం గ్రీన్, తప్పుల కోసం ఎరుపు
#### టైపోగ్రఫీ
- **హెడింగ్ హైరార్కీ**: H1, H2, మరియు H3 అంశాల మధ్య స్పష్టమైన భేదం
- **బాడీ టెక్స్ట్**: సులభంగా చదవగల ఫాంట్ సైజ్ ( కనీసం 16px) మరియు సరైన లైన్ హైట్
- **ఫారమ్ లేబుల్స్**: స్పష్టంగా, యాక్సెసిబుల్ టెక్స్ట్ స్టైలింగ్
#### లేఅవుట్ మరియు స్పేసింగ్
- **నిరంతర స్పేసింగ్**: స్పేసింగ్ స్కేల్‌ను ఉపయోగించండి (8px, 16px, 24px, 32px)
- **గ్రిడ్ సిస్టమ్**: ఫారమ్‌లు మరియు కంటెంట్ సెక్షన్ల కోసం వ్యవస్థీకృత లేఅవుట్
- **రెస్పాన్స్‌వివ్ డిజైన్**: మొబైల్-ఫస్ట్ దృష్టికోణంతో బ్రేక్‌పాయింట్లు
### దశ 3: కంపోనెంట్ స్టైలింగ్
**ఈ ప్రత్యేక కంపోనెంట్‌లను స్టైల్ చేయండి:**
#### ఫారమ్‌లు
- **ఇన్‌పుట్ ఫీల్డ్స్**: ప్రొఫెషనల్ బోర్డర్స్, ఫోకస్ స్థితులు, మరియు వాలిడేషన్ స్టైలింగ్
- **బటన్లు**: హోవర్ ఎఫెక్ట్స్, డిసేబుల్ స్థితులు, మరియు లోడింగ్ సూచికలు
- **లేబుల్స్**: స్పష్టమైన స్థాననిర్ణయం మరియు అవసరమైన ఫీల్డ్ సూచికలు
- **ఎర్రర్ మెసేజెస్**: కనపడే ఎర్రర్ స్టైలింగ్ మరియు సహాయక సందేశాలు
#### నావిగేషన్
- **హెడర్**: శుభ్రమైన, బ్రాండెడ్ నావిగేషన్ ప్రాంతం
- **లింక్స్**: స్పష్టమైన హోవర్ స్థితులు మరియు యాక్టివ్ సూచికలు
- **లోగో/శీర్షిక**: ప్రత్యేకమైన బ్రాండింగ్ అంశం
#### కంటెంట్ ఏరియాస్
- **సెక్షన్లు**: వివిధ ప్రాంతాల మధ్య స్పష్టమైన దృశ్య విడిపోవడం
- **కార్డులు**: కార్డు-ఆధారిత లేఅవుట్లు ఉపయోగిస్తే, శాడోస్ మరియు బోర్డర్స్ ఉంచండి
- **బ్యాక్‌గ్రౌండ్‌లు**: సున్నితమైన బ్యాక్‌గ్రౌండ్‌లతో వైట్ స్పేస్‌ను సరైన మోతాదులో ఉపయోగించడం
### దశ 4: మెరుగైన ఫీచర్లు (ఐచ్ఛికం)
**ఈ ఆధునిక ఫీచర్లను అమలు చేయాలని పరిగణించండి:**
- **డార్క్ మోడ్**: లైట్ మరియు డార్క్ థీమ్‌ల మధ్య టోగుల్
- **అనిమేషన్లు**: సుబtle మార్పులు మరియు సూక్ష్మ పరస్పర చర్యలు
- **లోడింగ్ స్థితులు**: ఫారమ్ సమర్పణ సమయంలో దృశ్య స్పందన
- **రెస్పాన్స్‌వివ్ చిత్రాలు**: వేర్వేరు స్క్రీన్ పరిమాణాలకు ఆప్టిమైజ్ చేసిన చిత్రాలు
## డిజైన్ ప్రేరణ
**ఆధునిక బ్యాంకింగ్ యాప్ లక్షణాలు:**
- **శుభ్రమైన, కనిష్ట డిజైన్** వైట్ స్పేస్ పుష్కలంగా
- **ప్రొఫెషనల్ కలర్ స్కీమ్స్** (నీలాలు, ఆకులతో లేదా శ్రద్ధావంతమైన న్యూట్రల్స్)
- **స్పష్టమైన దృశ్య హైరార్కీ** ప్రాముఖ్యమైన కాల్-టు-యాక్షన్ బటన్లతో
- **యాక్సెసిబుల్ కాంట్రాస్ట్ రేషియోస్** WCAG మార్గదర్శకాలతో సరిపోలడం
- **మొబైల్-రెస్పాన్స్‌వివ్ లేఅవుట్లు** అన్ని పరికరాలపై పని చేసే విధంగా
## సాంకేతిక అవసరాలు
### CSS విషయకరణ
```css
/* 1. CSS Custom Properties (Variables) */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
/* Add more variables */
}
/* 2. Base Styles */
/* Reset, typography, general elements */
/* 3. Layout */
/* Grid, flexbox, positioning */
/* 4. Components */
/* Forms, buttons, cards */
/* 5. Utilities */
/* Helper classes, responsive utilities */
/* 6. Media Queries */
/* Responsive breakpoints */
```
### యాక్సెస్IBILITY అవసరాలు
- **రంగు కాంట్రాస్ట్**: సాధారణ టెక్స్ట్‌కు కనీసం 4.5:1 నిష్పత్తి నిర్ధారించండి
- **ఫోకస్ సూచికలు**: కీబోర్డ్ నావిగేషన్ కోసం కనిపించే ఫోకస్ స్థితులు
- **ఫారమ్ లేబుల్స్**: ఇన్‌పుట్‌లతో సరిగ్గా అనుసంధానితమైనవి
- **రెస్పాన్స్‌వివ్ డిజైన్**: 320px నుండి 1920px వెడల్పు స్క్రీన్లపై ఉపయోగించదగినది
## మూల్యాంకన రుబ్రిక్
| ప్రమాణాలు | అద్భుతం (A) | ప్రావీణ్యం (B) | అభివృద్ధి (C) | మెరుగుదల అవసరం (F) |
|----------|--------------|----------------|----------------|----------------------|
| **డిజైన్ సిస్టమ్** | నిరంతర రంగులు, టైపోగ్రఫీ, మరియు స్పేసింగ్‌తో సమగ్ర డిజైన్ సిస్టమ్‌ను అమలు చేస్తుంది | స్పష్టమైన డిజైన్ నమూనాలు మరియు మంచి దృశ్య హైరార్కీతో స్థిరమైన స్టైలింగ్ ఉపయోగిస్తుంది | కొంత స్థిరమైన సమస్యలతో లేదా లేని డిజైన్ అంశాలతో ప్రాథమిక స్టైలింగ్ ఉపయోగించింది | తక్కువ స్టైలింగ్, అసమ్​తుల లేదా విరుద్ధ డిజైన్ ఎంపికలు |
| **వినియోగదారు అనుభవం** | అద్భుతమైన వినియోగదార అనుభవంతో, సులభమైన మరియు ప్రొఫెషనల్ ఇంటర్‌ఫేస్ సృష్టిస్తుంది | స్పష్టమైన నావిగేషన్ మరియు చదవదగిన కంటెంట్‌తో మంచి వినియోగదారు అనుభవం ఇస్తుంది | కొన్ని UX మెరుగుదలలతో ప్రాథమిక వాడుక యోగ్యత | చెడు వాడుక యోగ్యత, నావిగేట్ చేయడానికి లేదా చదవడానికి కష్టమే |
| **సాంకేతిక అమలుపాటు** | ఆధునిక CSS సాంకేతికతలు, సక్రమంగా ఏర్పాటుచేసిన కోడ్ నిర్మాణం మరియు ఉత్తమ పద్ధతులు అనుసరిస్తుంది | CSSని సమర్థవంతంగా ఉపయోగించి మంచి నిర్వహణ మరియు సరైన సాంకేతికతలు అమలు చేస్తుంది | CSS సరిగ్గా పనిచేస్తుంది కానీ ఏర్పాటులో లేదా ఆధునిక దృష్టికోణాలలో లోపముంటుంది | చెడు CSS అమలు, సాంకేతిక సమస్యలు లేదా బ్రౌజర్ అనుకూలత సమస్యలు |
| **రెస్పాన్స్‌వివ్ డిజైన్** | అన్ని పరికర పరిమాణాలపై అద్భుతంగా పనిచేసే పూర్తి రెస్పాన్స్‌వివ్ డిజైన్ | కొన్ని స్క్రీన్ల పరిమాణాలలో స్వల్ప సమస్యలతో మంచి రెస్పాన్స్‌వ్ ప్రవర్తన | కొంత లేఅవుట్ సమస్యలతో ప్రాథమిక రెస్పాన్స్‌వివ్ అమలు | రెస్పాన్‌సివ్ కాదు లేదా మొబైల్ పరికరాల్లో పెద్ద సమస్యలు |
| **యాక్సెస్IBILITY** | అద్భుతమైన కీబోర్డ్ నావిగేషన్ మరియు స్క్రీన్ రీడర్ మద్దతుతో WCAG మార్గదర్శకాలకు అనుగుణంగా ఉంటుంది | సరైన కాంట్రాస్ట్ మరియు ఫోకస్ సూచికలతో మంచి యాక్సెస్IBILITY పద్ధతులు | కొన్ని లిప్తి అంశాలతో ప్రాథమిక యాక్సెస్IBILITY పరిగణన | చెడు యాక్సెస్IBILITY, వికలాంగులతో ఉన్న వినియోగదారులకు కష్టం |
## సమర్పణ మార్గదర్శకాలు
**మీ సమర్పణలో చేర్చండి:**
- **styles.css**: మీ పూర్తి స్టైల్షీట్
- **అప్‌డేటెడ్ HTML**: మీరు చేసిన ఏ HTML మార్పులు
- **స్క్రీన్షాట్లు**: డెస్క్‌టాప్ మరియు మొబైల్‌పై మీ డిజైన్ చూపించే చిత్రాలు
- **README**: మీ డిజైన్ ఎంపికలు మరియు రంగుల పలెట్ యొక్క సంక్షిప్త వివరణ
**బోనస్ పాయింట్లు కోసం:**
- **CSS కస్టమ్ ప్రాపర్టీస్** మేన్‌టైనబుల్ థీమింగ్ కోసం
- **అధునిక CSS ఫీచర్లు** జల్లు, ఫ్లెక్స్బాక్స్, లేదా CSS అనిమేషన్ల వంటి
- **పర్ఫార్మెన్స్ పరిగణనలు** ఆప్టిమైజ్డ్ CSS మరియు కనీస ఫైల్ సైజ్
- **క్రాస్-బ్రౌజర్ టెస్టింగ్** వేర్వేరు బ్రౌజర్లలో అనుకూలతను నిర్ధారించడం
> 💡 **ప్రో టిప్**: ముందుగా మొబైల్ డిజైన్‌తో ప్రారంభించండి, తరువాత పెద్ద స్క్రీన్‌ల కోసం మెరుగుపరచండి. ఈ మొబైల్-ఫస్ట్ దృష్టికోణం మీ యాప్ అన్ని పరికరాలపై బాగా పనిచేయించి ఆధునిక వెబ్ అభివృద్ధి ఉత్తమ పద్ధతులను అనుసరిస్తుంది.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**స్పష్టీకరణ**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదంలో పొరపాట్లు లేదా తప్పులున్నాయి కావచ్చు. అసలు పత్రం దాని స్వదేశీ భాషలోనే అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వలన జనం కలిగిన ఏ వివరణా లోపాలు లేదా తప్పుదిద్దుల బాధ్యత మేము పడము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

970
translations/te/7-bank-project/3-data/README.md
Unescape View File

@ -0,0 +1,970 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "86ee5069f27ea3151389d8687c95fac9",
"translation_date": "2026-01-08T17:14:25+00:00",
"source_file": "7-bank-project/3-data/README.md",
"language_code": "te"
}
-->
# బ్యాంకింగ్ యాప్ భాగం 3: డేటా తీసుకునే మరియు ఉపయోగించే విధానాలు
స్టార్ ట్రెక్‌లో ఎంటర్‌ప్రైజ్ కంప్యూటర్ గురించి ఆలోచించండి - కెప్టెన్ పికార్డ్ నౌక స్థితిని అడిగినపుడు, మొత్తం ఇంటర్‌ఫేస్ ఆగిపోదు, మళ్లీ తిరిగి నిర్మించబడకుండా సమాచారం వెంటనే కనిపిస్తుంది. సమాచార సమర్థవంతమైన ప్రవాహం మనం ఇక్కడ డైనమిక్ డేటా ఫెచింగ్‌తో నిర్మిస్తున్నదే.
ప్రస్తుతం, మీ బ్యాంకింగ్ యాప్ ఒక ముద్రిత వార్తాపత్రిక లాంటిది - సమాచారంతో కూడుకున్నది కానీ స్థిరమైనది. మనం దీన్ని NASA మిషన్ కంట్రోల్ లాంటి దానిగా మార్చబోతున్నాము, అక్కడ డేటా నిరంతరం ప్రవహిస్తూ నేటివేళికిలో యూజర్ వర్క్‌ఫ్లోను విరామించకుండా నవీకరించబడుతుంది.
మీరు ఎలా సర్వర్లతో అసంక్రోనస్‌గా కమ్యూనికేట్ చేయాలో, వివిధ సమయాల్లో వచ్చే డేటాను ఎలా హ్యాండిల్ చేయాలో, మరియు నడుము సమాచారాన్ని మీ యూజర్ల కోసం అర్ధవంతంగా ఎలా మార్చాలో నేర్చుకుంటారు. ఇది డెమో మరియు ప్రొడక్షన్-రెడీ సాఫ్ట్‌వేర్ మధ్య తేడా.
## ⚡ వచ్చే 5 నిమిషాల్లో మీరు చేయగలిగేది
**బిజీ డెవలపర్ల కోసం క్విక్ స్టార్ట్ మార్గం**
```mermaid
flowchart LR
A[⚡ 5 నిమిషాలు] --> B[API సర్వర్ సెట్ చేయండి]
B --> C[curl తో ఫెచ్ పరీక్షించండి]
C --> D[లాగిన్ ఫంక్షన్ సృష్టించండి]
D --> E[క్రియలో డేటా చూడండి]
```
- **నిమిషం 1-2**: మీ API సర్వర్ ప్రారంభించండి (`cd api && npm start`) మరియు కనెక్షన్‌ను పరీక్షించండి
- **నిమిషం 3**: fetch ఉపయోగించి ఒక ప్రాథమిక `getAccount()` ఫంక్షన్ రూపొందించండి
- **నిమిషం 4**: `action="javascript:login()"` తో లాగిన్ ఫారం వైర్ చేయండి
- **నిమిషం 5**: లాగిన్‌ను పరీక్షించి కన్సోల్‌లో ఖాతా డేటాను చూడండి
**త్వరిత పరీక్ష ఆదేశాలు**:
```bash
# API నడుస్తోందని నిర్ధారించండి
curl http://localhost:5000/api
# ఖాతా డేటా తీసుకోవడం పరీక్షించండి
curl http://localhost:5000/api/accounts/test
```
**ఇది ఎందుకు ముఖ్యమైనది**: 5 నిమిషాల్లో మీరు ప్రతి ఆధునిక వెబ్ యాప్‌ను శక్తివంతం చేసే అసంక్రోనస్ డేటా ఫెчింగ్ మాయాజాలాన్ని చూడగలుగుతారు. ఇది యాప్స్ ప్రతిస్పందనશీలంగా, జీవंतంగా అనిపించే ప్రాతిపదిక.
## 🗺️ డేటా ఆధారిత వెబ్ అప్లికేషన్లలో మీ అభ్యాస ప్రయాణం
```mermaid
journey
title స్థిర పేజీల నుండి గత్యంతర అనువర్తనాల వరకు
section పరిణామం అర్థం చేసుకోవడం
సంప్రదాయ పేజీ రీర్లోడ్‌లు: 3: You
AJAX/SPA లాభాలు తెలుసుకోండి: 5: You
Fetch API నమూనాలు ఆలోచించండి: 7: You
section ప్రామాణికత నిర్మాణం
లాగిన్ ఫంక్షన్లు సృష్టించండి: 4: You
అసింక్ ఆపరేషన్లు నిర్వహించండి: 6: You
వినియోగదారు సెషన్లు నిర్వహించండి: 8: You
section గత్యంతర UI మార్పులు
DOM నిర్వహణ నేర్చుకోండి: 5: You
లావాదేవీ ప్రదర్శనలు నిర్మించండి: 7: You
స్పందనశీల డ్యాష్‌బోర్డ్స్ సృష్టించండి: 9: You
section వ్యावసాయిక నమూనాలు
టెంప్లేట్-ఆధారిత రేండరింగ్: 6: You
పొరపాటు నిర్వహణ వ్యూహాలు: 7: You
పనితీరు మెరుగుదల: 8: You
```
**మీ ప్రయాణ గమ్యం**: ఈ పాఠం చివరికి, ఆధునిక వెబ్ అప్లికేషన్లు ఎలా డేటాను తీసుకుని, ప్రాసెస్ చేసి, డైనమిక్‌గా ప్రదర్శిస్తాయో మీరు అర్థం చేసుకుంటారు. ఇది ప్రొఫెషనల్ అప్లికేషన్ల నుండి ఆశించే నిరంతర వినియోగదారునికి అనుభవాలను సృష్టిస్తుంది.
## పాఠం ముందు క్విజ్
[పాఠం ముందు క్విజ్](https://ff-quizzes.netlify.app/web/quiz/45)
### ముందు అవసరాలు
డేటా తీసుకోవడం మొదలుపెట్టేముందు, ఈ భాగాలు సిద్ధంగా ఉన్నాయని ధృవీకరించండి:
- **మునుపటి పాఠం**: [లాగిన్ మరియు రిజిస్ట్రేషన్ ఫారం](../2-forms/README.md) పూర్తి చేయండి – దీనిపై మనం నిర్మించబోతున్నాము
- **లోకల్ సర్వర్**: [Node.js](https://nodejs.org) ని ఇంస్టాల్ చేసి API సర్వర్‌ను నడిపించండి ([run the server API](../api/README.md))
- **API కనెక్షన్**: ఈ ఆదేశంతో మీ సర్వర్ కనెక్షన్‌ను పరీక్షించండి:
```bash
curl http://localhost:5000/api
# అనుమానిత ప్రతిస్పందన: "బ్యాంక్ API v1.0.0"
```
ఈ త్వరిత పరీక్ష అన్ని భాగాలు సక్రమంగా కమ్యూనికేట్ అవుతుందో లేదో నిర్ధారిస్తుంది:
- Node.js మీ సిస్టమ్‌లో సక్రమంగా నడుస్తోందని ధృవీకరించడం
- మీ API సర్వర్ సജീവంగా ఉందని నిర్ధారణ
- మీ యాప్ సర్వర్‌తో చేరగలుగుతున్నదని ధృవీకరించడం (దేనియొక్కకు మిషన్ ముందు రేడియో సంభాషణను తనిఖీ చేయడం లాంటిది)
## 🧠 డేటా నిర్వహణ ఈకోసిస్టమ్ సమీక్ష
```mermaid
mindmap
root((డేటా నిర్వహణ))
Authentication Flow
Login Process
ఫారం ధ్రువీకరణ
క్రెడెన్షియల్ ధృవీకరణ
సెషన్ నిర్వహణ
User State
గ్లోబల్ ఖాతా వస్తువు
నావిగేషన్ గార్డులు
లోపం నిర్వహణ
API Communication
Fetch Patterns
GET అభ్యర్థనలు
POST అభ్యర్థనలు
లోపం ప్రతిస్పందనలు
Data Formats
JSON ప్రాసెసింగ్
URL ఎంకోడింగ్
ప్రతిస్పందన పార్సింగ్
Dynamic UI Updates
DOM Manipulation
సురక్షిత టెక్స్ట్ నవీకరణలు
మూలకం సృష్టి
టెంప్లేట్ క్లోनింగ్
User Experience
నిజ కాలం నవీకరణలు
లోపం సందేశాలు
లోడ్ అవుతున్న స్థితులు
Security Considerations
XSS Prevention
textContent ఉపయోగం
ఇన్‌పుట్ శుభ్రం చేయడం
సురక్షిత HTML సృష్టి
CORS Handling
క్రాస్-ఓరిజిన్ అభ్యర్థనలు
హెడ్డర్ ఆకృతీకరణ
అభివృద్ధి సెటప్
```
**మూల సూత్రం**: ఆధునిక వెబ్ అప్లికేషన్లు డేటా ఆర్కెస్ట్రేషన్ సిస్టమ్స్ - అవి యూజర్ ఇంటర్‌ఫేస్లు, సర్వర్ APIలు, బ్రౌజర్ సెక్యూరిటీ మోడల్స్ మధ్య సమన్వయం చేస్తూ నిరంతర, ప్రతిస్పందనశీల అనుభవాలను సృష్టిస్తాయి.
---
## ఆధునిక వెబ్ యాప్స్‌లో డేటా తీసుకోవడం అర్థం చేసుకోవడం
వెబ్ అప్లికేషన్లు డేటాను ఉపయోగించే విధానం గత 20 సంవత్సరాల్లో ఘనంగా మారింది. ఈ పరిణామాన్ని అర్థం చేసుకోవడం ద్వారా, AJAX మరియు Fetch APIల వంటి ఆధునిక సాంకేతికతలు ఎంత శక్తివంతమైనవో, మరియు ఎందుకు అవి వెబ్ డెవలపర్లకు అవసరమైయ్యాయో మీరు తెలుసుకుంటారు.
పారంపరిక వెబ్‌సైట్లు ఎలా పనిచేశాయో, మనం ఇప్పుడు ఎలా డైనమిక్, ప్రతిస్పందించే అప్లికేషన్లు తయారుచేస్తున్నామో పరిశీలిద్దాం.
### సాంప్రదాయక బహుళ పేజీ అప్లికేషన్లు (MPA)
వెబ్ ప్రారంభ దశల్లో, ప్రతి క్లిక్ ఒక పాత టెలివిజన్ ఛానల్ మార్చినట్లుండేది – స్క్రీన్ ఖాళీ అయి, కొత్త కంటెంట్ నెమ్మదిగా లోడ్ అవుతుండేది. ఇది ప్రారంభ వెబ్ అప్లికేషన్ల వాస్తవం, అక్కడ ప్రతి ఇంటరాక్షన్ అనగా మొత్తం పేజీని మొదలుకుని మళ్లీ నిర్మించాలి.
```mermaid
sequenceDiagram
participant User
participant Browser
participant Server
User->>Browser: లింకును క్లిక్ చేస్తారు లేదా ఫారం సమర్పిస్తారు
Browser->>Server: కొత్త HTML పేజీని అభ్యర్థిస్తుంది
Note over Browser: పేజీ శూన్యం అవుతుంది
Server->>Browser: పూర్తి HTML పేజీని పంపిస్తుంది
Browser->>User: కొత్త పేజీ చూపిస్తుంది (ఫ్లాష్/పునఃప్రారంభం)
```
![బహుళ పేజీ అప్లికేషన్లలో వర్క్‌ఫ్లో నవీకరణ](../../../../translated_images/mpa.7f7375a1a2d4aa77.te.png)
**ఈ విధానం ఎందుకు స్తంభించేంది:**
- ప్రతి క్లిక్ అంటే పూర్తిగా పేజీని తిరిగి నిర్మించటం
- యూజర్లు ఆలోచన మధ్యలో ఆపివేయబడటంతో ఉండటపు సమస్యలు
- ఒకే హెడ్డర్, ఫుటర్ మళ్లీ మళ్లీ డౌన్లోడ్ చేయడం వల్ల ఇంటర్నెట్ కనెక్షన్ పై భారము
- యాప్స్ సాఫ్ట్‌వేర్ కాకుండా ఫైలింగ్ కేబినెట్‌లో క్లిక్ చేస్తున్నట్లు అనిపించడం
### ఆధునిక సింగిల్ పేజ్ అప్లికేషన్లు (SPA)
AJAX (Asynchronous JavaScript and XML) ఈ పద్ధతిని పూర్తిగా మార్చింది. అంతర్జాతీయ అంతరిక్ష స్టేషన్ యొక్క మాడ్యులర్ డిజైన్ లాంటి, ఇక్కడ వ్యోమగాములు ప్రత్యేక భాగాలను మార్చగలరు, పూర్తీ నిర్మాణాన్ని క్లీన్ చేయకుండా, AJAX ఈ విధంగా పేజీని reload చేయకుండా కొన్ని భాగాలను మాత్రమే నవీకరించ permits చేస్తుంది. XML అని పేరు ఉన్నప్పటికీ, నేడు JSON ఎక్కువగా వాడుతుంటాం, కాని మూల సూత్రం ఇదే: అవసరమయ్యే భాగాలు మాత్రమే నవీకరించండి.
```mermaid
sequenceDiagram
participant User
participant Browser
participant JavaScript
participant Server
User->>Browser: పేజీతో క్రియాశీలం అవుతారు
Browser->>JavaScript: ఈవెంట్ హ్యాండ్లర్‌ను ప్రారంభిస్తుంది
JavaScript->>Server: అవసరమైన డేటాను మాత్రమే తీసుకుంటుంది
Server->>JavaScript: JSON డేటాను తిరిగి ఇస్తుంది
JavaScript->>Browser: నిర్దిష్ట పేజీ అంశాలను నవీకరిస్తుంది
Browser->>User: నవీకరించబడిన కంటెంట్ చూపుతుంది (రిలోడ్ లేదు)
```
![సింగిల్ పేజ్ అప్లికేషన్లలో వర్క్‌ఫ్లో నవీకరణ](../../../../translated_images/spa.268ec73b41f992c2.te.png)
**SPAs ఎందుకు చాలా మెరుగ్గా అనిపిస్తాయో:**
- మార్చిన భాగాలే నవీకరించబడతాయి (సంSMARTగా!)
- యూజర్లు వారి ప్రవాహంలో విఫలమవరు
- తక్కువ డేటా ప్రయాణించే కారణంగా వేగంగా లోడ్ అవుతాయి
- ఫోన్లలో ఉన్న యాప్స్ లాంటి నిమిషాల అనుభూతి
### ఆధునిక Fetch API కు పరిణామం
ఆధునిక బ్రౌజర్లు [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) అందిస్తాయి, ఇది పురాతన [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ను మార్చింది. టెలిగ్రాఫ్ నడిపించడం మరియు ఇమెయిల్ వాడడం మధ్య తేడాగా, Fetch API promises ఉపయోగించి శుభ్రంగా అసంక్రోనస్ కోడ్ రాయటం సులభం చేస్తుంది మరియు JSON సహజంగా హ్యాండిల్ చేస్తుంది.
| లక్షణం | XMLHttpRequest | Fetch API |
|---------|----------------|----------|
| **సింటాక్స్** | క్లిష్టమైన కాల్‌బ్యాక్ ఆధారిత | శుభ్రమైన promise-ఆధారిత |
| **JSON నిర్వహణ** | మాన్యువల్ పార్సింగ్ అవసరం | అంతర్నిర్మిత `.json()` మెథడ్ |
| **పరువు నిర్వహణ** | పరిమిత తప్పు సమాచారం | విపులమైన తప్పుల వివరాలు |
| **ఆధునిక మద్దతు** | లెగసీ కంపాటిబిలిటీ | ES6+ promises మరియు async/await |
> 💡 **బ్రౌజర్ కంపాటిబిలిటీ**: మంచి వార్త - Fetch API అన్ని ఆధునిక బ్రౌజర్లలో పని చేస్తుంది! ప్రత్యేక వెర్షన్ల గురించి ఆసక్తి ఉంటే, [caniuse.com](https://caniuse.com/fetch) లో పూర్తి సమాచారం ఉంది.
>
**ముఖ్యాంశం:**
- Chrome, Firefox, Safari, మరియు Edge లో చక్కగా పనిచేస్తుంది (మీ యూజర్లు ఉన్న ప్రదాన బ్రౌజర్లు)
- కేవలం Internet Explorerకు అదనపు సహాయం అవసరం (ఇప్పుడే IEను మోసివేయబోతున్నాం)
- మనం తరువాత ఉపయోగించే async/await శైలులకు ఇది సరైన ప్రాథమికం
### యూజర్ లాగిన్ మరియు డేటా రిట్రీవల్ అమలుచేసుకోవడం
ఇప్పుడు మీ బ్యాంకింగ్ యాప్‌ను స్థిర డిస్ప్లేకి కాకుండా ఒక కార్య తాత్విక యాప్‌గా మార్చే లాగిన్ వ్యవస్థను అమలు చేద్దాం. సురక్షిత సైనిక సౌకర్యాలలో ఉపయోగించే ధృవీకరణ విధానాల లాగా, మనం యూజర్ వివరాలను ధృవీకరిస్తాము మరియు వారి ప్రత్యేక డేటాకు ప్రాప్యత ఇస్తాము.
ఇది ప్రాథమిక ధృవీకరణతో ప్రారంభించి, ఆపై డేటా తీసుకునే సామర్ధ్యంతో దశలవారీగా నిర్మించబోతున్నాము.
#### దశ 1: లాగిన్ ఫంక్షన్ పునాదులు సృష్టించడం
మీ `app.js` ఫైల్ తెరచి కొత్త `login` ఫంక్షన్ చేర్చండి. ఇది యూజర్ ధృవీకరణ ప్రక్రియను నిర్వహిస్తుంది:
```javascript
async function login() {
const loginForm = document.getElementById('loginForm');
const user = loginForm.user.value;
}
```
**ఇది ఎలా పనిచేస్తుంది:**
- ఆ `async` పదం JavaScriptకు "ఈ ఫంక్షన్ దేవ్ వేటింగ్ అవసరమవచ్చు" అని చెపుతుంది
- పేజీ నుండి ఫారమ్‌ను పొందుతాము (ఇది ID ద్వారా సులభంగా)
- యూజర్ టైప్ చేసిన యూజర్నేమ్‌ను తీసుకుంటాము
- ఒక చక్కటి ట్రిక్: మీరు ఫారం ఇన్‌పుట్‌ని దాని `name` అట్రిబ్యూట్ ద్వారా యాక్సెస్ చేయవచ్చు - getElementById లాంటిది కాకుండా!
> 💡 **ఫారం యాక్సెస్ పద్ధతి**: ప్రతి ఫారం నియంత్రణాని దాని HTMLలోని `name` అట్రిబ్యూట్ ఉపయోగించి ఫాంపై ద్వారా ప్రాపర్టీగా యాక్సెస్ చేయవచ్చు. ఇది శుభ్రమైన మరియు చదవగలిగిన పద్ధతి.
#### దశ 2: ఖాతా డేటా ఫెచింగ్ ఫంక్షన్ సృష్టించడం
తర్వాత, సర్వర్ నుండి ఖాతా డేటాను తీసుకునే ప్రత్యేక ఫంక్షన్‌ని సృష్టిద్దాం. ఇది మీ రిజిస్ట్రేషన్ ఫంక్షన్‌తో సమానంగా డేటా తీసుకోవడం పై దృష్టి పెట్టింది:
```javascript
async function getAccount(user) {
try {
const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
return await response.json();
} catch (error) {
return { error: error.message || 'Unknown error' };
}
}
```
**ఈ కోడ్ ఇది చేస్తుంది:**
- ఆధునిక `fetch` APIతో డేటాను అసంక్రోనస్ గా అభ్యర్థిస్తుంది
- `username` పారామీటర్‌తో GET రిక్వెస్ట్ URL ను రూపొందిస్తుంది
- URLలలో ప్రత్యేక అక్షరాలను సురక్షితంగా నిర్వహించడానికి `encodeURIComponent()` ఉపయోగిస్తుంది
- ప్రతిస్పందనను JSON గా మార్చుతుంది, డేటా పద్ధతి సులభం చెయ్యడానికి
- పొరపాట్లను మనోహరంగా (crash కాకుండా) error objectతో హ్యాండిల్ చేస్తుంది
> ⚠️ **భద్రతా సూత్రం**: `encodeURIComponent()` ఫంక్షన్ URL ప్రత్యేక అక్షరాలను సురక్షితంగా నిర్వహిస్తుంది. నావల్ కమ్యూనికేషన్‌లో ఉండే కోడింగ్ విధానాల లాగానే, ఇది మీ సందేశం సరిగ్గా సరిపోయేలా చూసుకుంటుంది, "#" లేదా "&" లాంటి అక్షరాలు తప్పుగా అర్థం కాకుండా అరికడుతుంది.
>
**ఇది ఎందుకు ముఖ్యం:**
- ప్రత్యేక అక్షరాల వల్ల URL బ్రేక్ కాకుండా
- URL మాన్‌ల్యుపులేషన్ దాడుల నుండి రక్షణ
- సర్వర్‌కి అవసరమైన డేటా అందడం
- భద్రతా విధానాల ఆచరణ
#### HTTP GET అభ్యర్థనలను అర్థం చేసుకోవడం
`fetch`ని అదనపు ఆప్షన్లు లేకుండా వాడితే, ఇది ఆటోమేటిక్ గా ఒక [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) అభ్యర్థనను సృష్టిస్తుంది. ఇది మనం చేస్తున్నది కోసం సరైనది – సర్వర్‌కి "దయచేసి ఈ యూజర్ ఖాతా డేటాను చూపించండి" అని అడగటం.
GET అభ్యర్థనలను లైబ్రరీ నుండి పుస్తకం తీసుకువచ్చే విధానం లాగా భావించండి – మీరు ఇప్పటికే ఉన్న ప్రాపర్టీని చూడమని అడుగుతున్నట్లే. POST అభ్యర్థనలు (మనం రిజిస్ట్రేషన్ కోసం వాడినవి) కొత్త పుస్తకాన్ని లైబ్రరీకి జతచేయడానికి సమానంగా ఉంటాయి.
| GET అభ్యర్థన | POST అభ్యర్థన |
|-------------|-------------|
| **హోదా** | ఉన్న డేటాను రీట్రీవ్ చేయడం | కొత్త డేటాను సర్వర్‌కు పంపడం |
| **పారామీటర్లు** | URL పాథ్/క్వెరీ స్ట్రింగ్ లో | అభ్యర్థన శరీరంలో |
| **క్యాచింగ్** | బ్రౌజర్లు క్యాచే చేయవచ్చు | సాధారణంగా క్యాచే అవ్వదు |
| **సెక్యూరిటీ** | URL/లాగ్స్ లో కనిపిస్తుంది | అభ్యర్థన శరీరంలో దాగు ఉంటుంది |
```mermaid
sequenceDiagram
participant B as Browser
participant S as Server
Note over B,S: GET అభ్యర్థన (డేటా స్వీకరణ)
B->>S: GET /api/accounts/test
S-->>B: 200 OK + ఖాతా డేటా
Note over B,S: POST అభ్యర్థన (డేటా సమర్పణ)
B->>S: POST /api/accounts + కొత్త ఖాతా డేటా
S-->>B: 201 సృష్టించబడింది + ధృవీకరణ
Note over B,S: లోపం నిర్వహణ
B->>S: GET /api/accounts/nonexistent
S-->>B: 404 కనుబట్టు లేదు + లోపం సందేశం
```
#### దశ 3: మొత్తం కలిపి అమలు చేయడం
ఇప్పుడు ఆనందకరమైన ప్రదేశం - మీ ఖాతా తీసుకునే ఫంక్షన్‌ను లాగిన్ ప్రక్రియతో లింక్ చేద్దాం. ఇక్కడ ప్రతిదీ సరిగ్గా సరిపోతుంది:
```javascript
async function login() {
const loginForm = document.getElementById('loginForm');
const user = loginForm.user.value;
const data = await getAccount(user);
if (data.error) {
return console.log('loginError', data.error);
}
account = data;
navigate('/dashboard');
}
```
ఈ ఫంక్షన్ సులభమైన క్రమాన్ని అనుసరిస్తుంది:
- ఫారం ఇన్‌పుట్ నుంచి యూజర్నేమ్ తీసుకోవడం
- సర్వర్ నుంచి యూజర్ ఖాతా డేటాను అభ్యర్థించడం
- దశలో వస్తే పొరపాట్లను నిర్వహించడం
- సక్సెస్ అయితే ఖాతా డేటాను నిల్వ చేసి డాష్‌బోర్డ్‌కు మారడం
> 🎯 **Async/Await శైలి**: `getAccount` ఒక అసంక్రోనస్ ఫంక్షన్ కావడం వల్ల, మనం `await` పదాన్ని వాడి సర్వర్ స్పందన కోసం వేచుచూస్తాం. ఇది తప్పనిసరిగా నిర్వచించని డేటాతో కోడ్ కొనసాగకుండా చేస్తుంది.
#### దశ 4: డేటా నిల్వలో స్థలం సృష్టించడం
మీ యాప్ ఒకసారి డేటాను తీసుకున్న తర్వాత దీనిని జ్ఞాపకంగా ఉంచాలి. ఇది యాప్ యొక్క క్షుణ్ణ స్మృతి లాంటిది – ప్రస్తుత యూజర్ డేటాను యాప్ ఎక్కడైన సులభంగా యాక్సెస్ చేయ గలగడం. `app.js` ఫైల్ యొక్క ప్రారంభంలో ఈ లైన్ జోడించండి:
```javascript
// ఇది ప్రస్తుత వినియోగదారుని ఖాతా సమాచారం నిల్వ చేస్తుంది
let account = null;
```
**దీని అవసరం:**
- ఖాతా డేటాను యాప్ ఏ భాగం నుండైనా యాక్సెస్ చేయడానికీ ఉంచుతుంది
- `null`తో మొదలవడం అంటే "ఎవరూ లాగిన్ కాలేదు"
- ఎవరు విజయం సంపాదిస్తే వారి డేటాను అప్డేట్ చేస్తుంది
- ఒక ఏకైక నిజసూచన వనరుగా ఉంటుంది – ఎవరు లాగిన్ అయ్యారో స్పష్టంగా అర్థం కావడం
#### దశ 5: మీ ఫారమ్ లింక్ చేయడం
ఇప్పుడు మీ కొత్త లాగిన్ ఫంక్షన్‌ను HTML ఫారమ్‌తో కనెక్ట్ చేద్దాం. ఫారమ్ ట్యాగ్ ఈ విధంగా నవీకరించండి:
```html
<form id="loginForm" action="javascript:login()">
<!-- Your existing form inputs -->
</form>
```
**ఈ చిన్న మార్పు ఏమి చేస్తుందో:**
- ఫారం తన డిఫాల్ట్ మొత్తం పేజీ రీలోడ్ అవ్వుటను ఆపుతుంది
- మీ కస్టమ్ JavaScript ఫంక్షన్‌ను పిలుస్తుంది
- జీవంతమైన సింగిల్ పేజ్ యాప్ అనుభవాన్ని కలిగిస్తుంది
- యూజర్లు "లాగిన్" నొక్కినప్పుడు పూర్తి నియంత్రణ మీ చేతుల్లో ఉంటుంది
#### దశ 6: రిజిస్ట్రేషన్ ఫంక్షన్ మెరుగు పరచటం
సమగ్రత కోసం, మీరు `register` ఫంక్షన్‌ను కూడా అప్డేట్ చేసి ఖాతా డేటాను నిల్వ చేసేలా, డాష్‌బోర్డ్‌కు మారేలా చేయండి:
```javascript
// మీ register ఫంక్షన్ చివరకి ఈ లైన్స్ జతచేయండి
account = result;
navigate('/dashboard');
```
**ఈ మెరుగుదల అందించే విలువ:**
- రిజిస్ట్రేషన్ తర్వాత డాష్‌బోర్డ్‌కు సజావుగా మారడం
- లాగిన్ మరియు రిజిస్ట్రేషన్ మధ్య అనుసంధానం కలిగి ఉండటం
- విజయవంతమైన రిజిస్ట్రేషన్ వెంటనే ఖాతా డేటా యాక్సెస్
#### మీ అమలును పరీక్షించడం
```mermaid
flowchart TD
A[వినియోగదారు సర్టిఫికెట్లు నమోదు చేస్తాడు] --> B[లాగిన్ ఫంక్షన్ పిలవబడింది]
B --> C[సర్వర్ నుండి ఖాతా డేటా తీసుకోవడం]
C --> D{డేటా విజయవంతంగా అందిందా?}
D -->|Yes| E[ఖాతా డేటాను గ్లోబల్గా నిల్వ చేయండి]
D -->|No| F[లోపపు సందేశం చూపించు]
E --> G[డాష్‌బోర్డ్‌కు నావిగేట్ చేయండి]
F --> H[వినియోగదారు లాగిన్ పేజీలోనే ఉంటాడు]
```
**పరీక్షించుకోవడానికి:**
1. కొత్త ఖాతా క్రియేట్ చేసి అంతా పనిచేస్తుందా చూడండి
2. ఆ క్రెడెన్షియల్స్ తో లాగిన్ ప్రయత్నించండి
3. బ్రౌజర్ కన్సోల్ (F12)లో ఏదైనా సమస్య ఉందా తనిఖీ చేయండి
4. విజయవంతం అయితే డాష్‌బోర్డ్‌కి వెళ్లడం నిర్ధారించండి
ఏదైనా పని చేయకపోతే, ఆందోళన చెందకండి! ఎక్కువ సమస్యలు టైపోస్ లేదా API సర్వర్ ప్రారంభించకపోవడం వంటి సులభమైనవి.
#### క్రాస్-ఓరిజిన్ మంత్రం గురించి చిన్న మాట
మీరు ఆశ్చర్యపోవచ్చు: "ఇది ఎలా నా వెబ్ యాప్ మరియు API సర్వర్ వేరువేరు పోర్టుల్లో ఉండి కూడా మాట్లాడుతాయనిపించింది?" బాగా ప్రశ్న! ఇది ప్రతి వెబ్ డెవలపర్ ఎదుర్కొనే అంశం.
> 🔒 **క్రాస్-ఓరిజిన్ భద్రత**: బ్రౌజర్లు "అనే-ఓరిజిన్ పాలసీ"ని అమలు చేస్తాయి, అది అనధికారిక కమ్యూనికేషన్‌ని అరికడుతుంది. పెంటగాన్ వైపు చెక్‌పాయింట్ లాంటిది, కమ్యూనికేషన్‌కు అనుమతి ఉండాలి అని నిర్ధారిస్తాయి.
>
**మన సెటప్‌లో:**
- మీ వెబ్ యాప్ `localhost:3000` (డెవలప్మెంట్ సర్వర్)లో నడుస్తుంది
- API సర్వర్ `localhost:5000` (బ్యాక్‌ఎండ్ సర్వర్) లో ఉంటుంది
- API సర్వర్ [CORS హెడర్ల](https://developer.mozilla.org/docs/Web/HTTP/CORS)తో మీ వెబ్ యాప్ నుండి కమ్యూనికేషన్‌కు స్పష్టంగా అనుమతి ఇస్తుంది
ఇది వాస్తవ ప్రపంచ అభివృద్ధిలో సాధారణం – ఫ్రంట్‌ఎండ్ మరియు బ్యాక్‌ఎండ్ అప్లికేషన్లు సాధారణంగా వేరే సర్వర్‌లపై నడుస్తాయి.
> 📚 **ఇంకా తెలుసుకోండి**: APIs మరియు డేటా ఫెచింగ్ పై మరింత లోతుగా తెలుసుకోవడానికి ఈ పూర్తి [Microsoft Learn మాడ్యూల్](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) చూడండి.
## మీ డేటాను HTMLలో జీవంతంగా చూపించడం
ఇప్పుడు మనం తీసుకున్న డేటాను వినియోగదారులకు DOM మానిప్యులేషన్ ద్వారా కనిపించేలా చేస్తాము. డార్క్‌రూమ్‌లో ఫోటోల అభివృద్ధి లాగానే, కనిపించని డేటాను చూసేలా, ఇంటర్‌ఫేస్ తో వినియోగదారులను అనుసంధానం చేసేలా తీర్చిదిద్దుతున్నాము.
DOM మానిప్యులేషన్ అనేది స్థిరమైన వెబ్ పేజీలను డైనమిక్ అప్లికేషన్లుగా మార్చే సాంకేతికత, ఇది వినియోగదారుల పరస్పర చర్యలు మరియు సర్వర్ స్పందనల ఆధారంగా వారి కంటెంట్‌ను నవీకరిస్తుంది.
### పని కోసం సరైన సాధనాన్ని ఎంచుకోవడం
మీ HTML ను JavaScript తో నవీకరించడంలో, మీ వద్ద అనేక ఎంపికలున్నాయి. ఇవి టూల్ బాక్స్‌లోని విభిన్న ఉపకరణాలంటి భావించండి - ప్రతి ఒకటి నిర్దిష్ట పనులకు పరిపూర్ణంగా ఉంటుంది:
| విధానం | ఇది ఏమి బాగుంటుంది | ఎప్పుడు ఉపయోగించాలి | భద్రత స్థాయి |
|--------|---------------------|----------------|--------------|
| `textContent` | వినియోగదారు డేటాని సురక్షితంగా ప్రదర్శించడం | మీరు ఎప్పుడైనా టెక్స్ట్ చూపించేటప్పుడు | ✅ బలమైన భద్రత |
| `createElement()` + `append()` | సంక్లిష్ట ఆలౌట్లు నిర్మించడం | కొత్త విభాగాలు/జాబితాలు సృష్టించేటప్పుడు | ✅ ఘనమైన భద్రత |
| `innerHTML` | HTML కంటెంట్ సెట్ చేయటం | ⚠️ దీనిని సాధ్యమైన మేరకు ఉపయోగించవద్దు | ❌ ప్రమాదకరమైన వ్యాపారం |
#### టెక్స్ట్ సురక్షితంగా చూపించడానికి textContent
[`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) ప్రాపర్టీ వినియోగదారు డేటాను ప్రదర్శించే సమయంలో మీ మంచి స్నేహితుడిలా ఉంటుంది. ఇది మీ వెబ్ పేజీకి బౌన్సర్ లాగా ఉంటుంది - ఏ హానికరమైనది వేయజేయదు:
```javascript
// టెక్స్ట్‌ను నవీకరించడానికి రక్షితమైన, నమ్మకమైన విధానం
const balanceElement = document.getElementById('balance');
balanceElement.textContent = account.balance;
```
**textContent వాడకం లాభాలు:**
- అన్నింటినీ సాధారణ టెక్స్ట్‌గా పరిగణిస్తుంది (స్క్రిప్ట్ అమలు ఉండదు)
- ఇప్పటికే ఉన్న కంటెంట్‌ను ఆటోమేటిగ్గా క్లియర్ చేస్తుంది
- సరళమైన టెక్స్ట్ నవీకరణలకు సమర్థవంతం
- దుష్టమైన కంటెంట్ నుండి సహజ భద్రతని అందిస్తుంది
#### డైనమిక్ HTML ఎలిమెంట్లు సృష్టించడం
మరింత సంక్లిష్టమైన కంటెంట్ కోసం [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) మరియు [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) పద్ధతులను కలపండి:
```javascript
// కొత్త మూలకాలను సురక్షితంగా సృష్టించడానికి మార్గం
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);
```
**ఈ పద్ధతిని అర్థం చేసుకోవడం:**
- **కొత్త** DOM ఎలిమెంట్లను ప్రోగ్రామేటిగ్గా సృష్టిస్తుంది
- ఎలిమెంట్ల గుణాలు మరియు కంటెంట్ మీద పూర్తి నియంత్రణను **పరిరక్షిస్తుంది**
- సంక్లిష్టమైన, ఇనుపుటిన ఎలిమెంట్ నిర్మాణాలను **అనుమతిస్తుంది**
- నిర్మాణం మరియు కంటెంట్‌ను వేరుచేసి **భద్రతను రক্ষা చేస్తుంది**
> ⚠️ **భద్రత పక్కా గమనిక**: అనేక ట్యుటోరియల్స్ లో [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) కనిపిస్తుంది, ఇది లోపల ఉన్న స్క్రిప్టులను అమలు చేయగలదు. CERN లోని భద్రతా ప్రోటోకాల్స్ తిరుగులాంటి, అనధికార కోడ్ అమలును నిరోధించే విధంగా, `textContent` మరియు `createElement` సురక్షిత ఎంపికలను అందిస్తాయి.
>
**innerHTML ప్రమాదాలు:**
- వినియోగదారు డేటాలో `<script>` ట్యాగ్లను అమలు చేస్తుంది
- కోడ్ ఇంజెక్షన్ దాడులకు సామర్థ్యం ఉంది
- భద్రతా దోపిడీలకు దారి తీస్తుంది
- మనం వాడుతున్న సురక్షిత ప్రత్యామ్నాయాలు సమాన కార్యాచరణ ఇవ్వగలవు
### పొరపాట్లను వినియోగదారులకు సులభంగా చేయడం
ప్రస్తుతానికి, లాగిన్ పొరపాట్లు బ్రౌజర్ కాన్సోల్ లో మాత్రమే కనిపిస్తాయి, ఇది వినియోగదారులకు కనబడదు. ఇది ఒక పైలెట్ అంతర్గత డయాగ్నొస్టిక్స్ మరియు ప్రయాణికులు సమాచార వ్యవస్థ మధ్య తేడా లాంటిది, మేము ముఖ్య సమాచారం సరైన ఛానెల్ ద్వారా తెలియచేయాలి.
ప్రదర్శనీయమైన పొరపాటు సందేశాలు అమలు చేయడం ద్వారా వినియోగదారులకు ఏమి తప్పు జరిగిందో మరియు ఎలా ముందుకు పోవాలని వెంటనే తెలియజేయడం సాధ్యం అవుతుంది.
#### దశ 1: పొరపాటు సందేశాల కోసం స్థానం జోడించడం
మొదట, మీ HTML లో పొరపాటు సందేశాలకి స్థలాన్ని ఇవ్వండి. మీ లాగిన్ బటన్ ముందు ఇది జోడించండి ఇలాంటి విధంగా:
```html
<!-- This is where error messages will appear -->
<div id="loginError" role="alert"></div>
<button>Login</button>
```
**ఇక్కడ ఏమి జరుగుతుంది:**
- అవసరమైనప్పటి వరకు కనిపించని ఖాళీ కంటెయినర్ సృష్టిస్తున్నాం
- ఇది వినియోగదారులు "Login" క్లిక్ చేసిన తర్వాత సహజంగా చూడగల స్థలంలో ఉంచబడింది
- `role="alert"` స్క్రీన్ రీడర్‌లకు ఒక మంచి సంకేతం - ఇది సహాయ సాంకేతికతలకు "ఇది ముఖ్యమైనది" అంటుంది!
- యुनिक్కు `id` మన JavaScript కి సులభంగా లక్ష్యంగా ఉంటుంది
#### దశ 2: సాయపడే ఒక చిన్న ఫంక్షన్ సృష్టించడం
ఏ ఎలిమెంట్ యొక్క టెక్స్ట్‌ను నవీకరించే చిన్న సాధనం రూపొందించుకుందాం. ఇది "ఒకసారి వ్రాసి, ఎక్కడైనా ఉపయోగించు" విధానం:
```javascript
function updateElement(id, text) {
const element = document.getElementById(id);
element.textContent = text;
}
```
**ఫంక్షన్ ప్రయోజనాలు:**
- ఎలిమెంట్ ID మరియు టెక్స్ట్ కంటెంట్ మాత్రమే అవసరం
- DOM ఎలిమెంట్లను సురక్షితంగా కనుగొని నవీకరిస్తుంది
- కోడ్ డూప్లికేషన్ తగ్గించే పునర్వినియోగ నమూనా
- అప్లికేషన్ అంతటా సुसंगతగా నవీకరణ ప్రవర్తనను నిలిపిస్తుంది
#### దశ 3: వినియోగదారులు చూడగలిగే చోట పొరపాట్లను చూపించడం
ఇప్పుడు ఆ దాచిన కాన్సోల్ సందేశం స్థానంలో వినియోగదారులు సూటిగా చూడగలిగే విధంగా దాన్ని మార్చండి. మీ లాగిన్ ఫంక్షన్ ని నవీకరించండి:
```javascript
// కన్సోల్ లో మాత్రమే లాగ్ చేయడం కాకుండా, వినియోగదారుడికి ఏమి తప్పు ఉందో చూపించండి
if (data.error) {
return updateElement('loginError', data.error);
}
```
**ఈ చిన్న చేంజ్ గొప్ప మార్పు చేస్తుంది:**
- పొరపాటు సందేశాలు వినియోగదారులు చూస్తున్న చోటే కనపడతాయి
- మరిన్ని రహస్యమైన మౌన వైఫల్యాలు ఉండవు
- వినియోగదారులు వెంటనే, కార్యాచరణ చేయదగిన ఫీడ్‌బ్యాక్ పొందుతారు
- మీ యాప్ ప్రొఫెషనల్ మరియు ఆలోచనాత్మకంగా అనిపిస్తుంది
ఇప్పుడు చెల్లని ఖాతాతో పరీక్షిస్తే, మీరు పేజీ మీద సహాయకరమైన పొరపాటు సందేశం చూస్తారు!
![లాగిన్ సమయంలో పొరపాటు సందేశం ప్రదర్శిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/login-error.416fe019b36a6327.te.png)
#### దశ 4: ఆక్సెస్‌బిలిటీలో సాకారాత్మకంగా ఉండటం
ముందులాగా జోడిద్దాం `role="alert"` గురించి కొన్ని మంచి విషయాలు - ఇది కేవలం అలంకారం మాత్రమే కాదు! ఈ చిన్న గుణం [లైవ్ రీజియన్](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ను సృష్టిస్తుంది, ఇది స్క్రీన్ రీడర్‌లకు మార్పులను వెంటనే ప్రకటిస్తుంది:
```html
<div id="loginError" role="alert"></div>
```
**ఇది ఎందుకు ముఖ్యమో:**
- స్క్రీన్ రీడర్ వినియోగదారులు పొరపాటు సందేశాన్ని వెంటనే వినిపిస్తారు
- ఎవరిలోనైనా సరే, వారు ఎలా నావిగేట్ అయినా, ముఖ్య సమాచారం అందుతుంది
- మీ యాప్ మరిన్ని మందికి రీచ్ అవాలనే సరళమైన మార్గం
- మీరు సమగ్ర అనుభవాలు సృష్టించడంలో శ్రద్ధ వహిస్తున్నారా అన్న సందేశం ఇస్తుంది
ఇలాంటి చిన్న బిందువ్లు మంచి డెవలపర్లను అద్భుత డెవలపర్ల నుండి వేరు చేస్తాయి!
### 🎯 బోధనాత్మక పరిశీలన: ధృవీకరణ నమూనాలు
**ఆగండి మరియు ఆలోచించండి**: మీరు ఈ నెలలా పూర్తీ ధృవీకరణ ప్రవాహాన్ని అమలు చేసారు. ఇది వెబ్ డెవలప్‌మెంట్‌లో ప్రాథమిక నమూనా.
**తక్షణ స్వీయ-అంటోమవి:**
- API కాల్స్ కోసం async/await ఎందుకు వాడుతున్నామో వివరిస్తారా?
- `encodeURIComponent()` ఫంక్షన్ మర్చిపోయినట్లైతే ఏమవుతుంది?
- మన పొరపాటు నిర్వహణ వినియోగదారుల అనుభవాన్ని ఎలా మెరుగుపరుస్తుంది?
**వాస్తవ ప్రపంచ అనుసంధానం**: మీరు ఇక్కడ నేర్చుకున్న నమూనాలు (అసింక్ డేటా ఫెచింగ్, పొరపాటు నిర్వహణ, వినియోగదారుల ఫీడ్బ్యాక్) ప్రతి ప్రధాన వెబ్ అప్లికేషన్‌లో ఉపయోగిస్తారు - సోషల్ మీడియా నుంచి ఈ-కామర్స్ వరకు. మీరు ప్రొడక్షన్ స్థాయి నైపుణ్యాలు కాంపైల్ చేస్తున్నట్లే!
**సవాలు ప్రశ్న**: మీరు ఈ ధృవీకరణ వ్యవస్థను ఎలా మార్చి వేర్వేరు వినియోగదారు పాత్రలను (కస్టమర్, అడ్మిన్, టెల్లర్) నిర్వహించగలుగుతారు? డేటా నిర్మాణం మరియు UI మార్పులను ఆలోచించండి.
#### దశ 5: నమోదు లో కూడా అదే నమూనా వర్తింపజేయండి
సరళత కోసం, మీ నమోదు ఫారమ్‌లో ఇదే పొరపాటు నిర్వహణను అమలు చేయండి:
1. **జోడించండి** ఒక పొరపాటు ప్రదర్శన ఎలిమెంట్ నమోదు HTML కి:
```html
<div id="registerError" role="alert"></div>
```
2. **నవీకరించండి** మీ register ఫంక్షన్ లో అదే పొరపాటు ప్రదర్శన నమూనాను ఉపయోగిస్తూ:
```javascript
if (data.error) {
return updateElement('registerError', data.error);
}
```
**స్థిరమైన పొరపాటు నిర్వహణ లాభాలు:**
- అన్ని ఫారమ్‌లలో సారూప్య వినియోగదారు అనుభవాన్ని అందిస్తుంది
- పరిచయమైన నమూనాలు వాడడం వల్ల మానసిక భారాన్ని తగ్గిస్తుంది
- పునర్వినియోగక్రమంతో నిర్వహణ సులభం
- యాప్ అంతటా ఆక్సెస్‌బిలిటీ ప్రమాణాలు కలిగి ఉండటం నిర్ధారిస్తుంది
## మీ డైనమిక్ డ్యాష్‌బోర్డ్ని సృష్టించడం
ఇప్పుడు మీ స్థిర డ్యాష్‌బోర్డ్ని నిజమైన ఖాతా డేటాతో ఆటోమేటిగ్గా నవీకరించే డైనమిక్ ఇంటర్‌ఫేస్‌గా మారుస్తాం. ప్రింట్ చేసిన విమాన షెడ్యూల్ మరియు ఎయిర్‌పోర్టులు వద్ద లైవ్ డిపెర్చర్ బోర్డుల మధ్య తేడా లాంటిది, మేము నిలకడైన సమాచారానుంచి రియల్-టైమ్, సెన్సిటివ్ ప్రదర్శన వైపు కదలనుండాం.
ఈ DOM మానిప్యులేషన్ సాంకేతికత ఉపయోగించి, నేటి ఖాతా సమాచారం తో ఆటోమేటిగ్గా నవీకరించే డ్యాష్‌బోర్డ్ని సృష్టిస్తాము.
### మీ డేటాను పరిచయం చేసుకోండి
సృష్టించడానికి ముందుగా, సర్వర్ మీకు పంపే డేటా ఎలా ఉండొచ్చో చూద్దాం. ఎవరైనా విజయవంతంగా లాగిన్ అయినప్పుడు, అందించే సమాచారం వల వెంట:
```json
{
"user": "test",
"currency": "$",
"description": "Test account",
"balance": 75,
"transactions": [
{ "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
{ "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
{ "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
]
}
```
**ఈ డాటా నిర్మాణం అందిస్తుంది:**
- **`user`**: అనుభవాన్ని వ్యక్తిగతీకరించడానికి ("సహర్షంగా తిరిగి స్వాగతం, సారా!")
- **`currency`**: జమాకు సరైన పొద్దు రూపంలో డబ్బు చూపుతుందని నిర్ధారిస్తుంది
- **`description`**: ఖాతాపై స్నేహపూర్వక పేరు
- **`balance`**: అత్యంత ముఖ్యమైన ప్రస్తుత బ్యాలెన్స్
- **`transactions`**: అన్ని వివరాలతో పూర్తి లావాదేవీ చరిత్ర
మీరు ప్రొఫెషనల్ లెక్కల డ్యాష్‌బోర్డు సృష్టించడానికి అవసరమైన అన్నీ!
```mermaid
flowchart TD
A[వాడుకరి లాగిన్] --> B[ఖాతా డేటాను తీయి]
B --> C{డేటా చెల్లుబాటు అవుతుందా?}
C -->|అవును| D[గ్లోబల్ వేరియబుల్‌లో నిల్వచేయి]
C -->|కాదు| E[లోప సందేశం చూపించు]
D --> F[డాష్‌బోర్డ్‌కు నావిగేట్ చేయి]
F --> G[UI అంశాలు నవీకరించు]
G --> H[బ్యాలెన్సు చూపించు]
G --> I[వివరణ చూపించు]
G --> J[లావాదేవీలను ప్రదర్శించు]
J --> K[పట్టిక వరుసలు సృష్టించు]
K --> L[కరెన్సీని ఆకృతి చేయి]
L --> M[వాడుకరి లైవ్ డేటాను చూస్తాడు]
```
> 💡 **ప్రొ టిప్**: మీ డ్యాష్‌బోర్డు వెంటనే చూడాలనుకుంటే? లాగిన్ చేయడానికి `test` అనే యూజర్‌నేమ్ వాడండి - ఇది నమూనా డేటాతో ముందుగానే నింపబడింది కాబట్టి మీరు లావాదేవీలు మొదలు పెట్టకుండానే ప్రతిపాదన చూడగలుగుతారు.
>
**కానుక, ఈ టెస్ట్ ఖాతా ఎందుకు సులభతరం:**
- వాస్తవిక నమూనా డేటా ఇప్పటికే లభిస్తుంది
- లావాదేవీలు ఎలా ప్రదర్శించబడుతాయో చూడటానికి అనుకూలం
- మీ డ్యాష్‌బోర్డు ఫీచర్లను పరీక్షించడానికి ఉత్తమం
- డ్రమ్మీ డేటాను స్వయంచాలకంగా సృష్టించాల్సిన కష్టాన్ని తగ్గిస్తుంది
### డ్యాష్‌బోర్డు ప్రదర్శన ఎలిమెంట్లను సృష్టించడం
మీ డ్యాష్‌బోర్డు ఇంటర్‌ఫేస్‌ని దశల వారీగా నిర్మిద్దాం, మొదట ఖాతా సారాంశ సమాచారంతో మొదలై, తరువాత లావాదేవీ జాబితాల వంటి సంక్లిష్ట ఫీచర్ల వైపు కదిలి:
#### దశ 1: మీ HTML నిర్మాణం నవీకరించండి
మొదట, స్థిరమైన "బ్యాలెన్స్" విభాగాన్ని డైనమిక్ ప్లేస్‌హోల్డర్ ఎలిమెంట్లతో మార్చండి, వాటిని మీ JavaScript నింపగలుతుంది:
```html
<section>
Balance: <span id="balance"></span><span id="currency"></span>
</section>
```
తర్వాత, ఖాతా వివరణ కోసం ఒక సెక్షన్ జోడించండి. ఇది డ్యాష్‌బోర్డు కంటెంట్ కు శీర్షికగా పనిచేస్తోంది కాబట్టి, సెమాంటిక్ HTML వాడండి:
```html
<h2 id="description"></h2>
```
**HTML నిర్మాణం అర్థం చేసుకోవడం:**
- బ్యాలెన్స్ మరియు కరెన్సీ కోసం వేరువేరుగా `<span>` ఎలిమెంట్లు ఉపయోగించి వ్యక్తిగత నియంత్రణ
- ప్రతి ఎలిమెంట్ కి విభిన్న IDs అప్లై చేసి, JavaScript టార్గెటింగ్ సులభం చేసింది
- ఖాతా వివరణకు `<h2>` వాడి సెమాంటిక్ HTML పాటించడం
- స్క్రీన్ రీడర్‌లు మరియు SEO కోసం తార్కిక హైరార్కీ సృష్టించడం
> ✅ **ఆక్సెస్‌బిలిటీ అవగాహన**: ఖాతా వివరణ డ్యాష్‌బోర్డు కంటెంట్ శీర్షికగా పని చేస్తుంది, కాబట్టి హెడ్డింగ్‌గా సెమాంటిక్ గా చూపించబడింది. [heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) ఆక్సెస్‌బిలిటీలో ఎలా ప్రభావవంతమో తెలుసుకోండి. మీ పేజీలో ఇంకేమె గుర్తువైన ఎలిమెంట్లు హెడ్డింగ్ ట్యాగ్లతో మెరుగుపరచవచ్చు అనేదానిపై ఆలోచించండి.
#### దశ 2: డ్యాష్‌బోర్డు నవీకరణ ఫంక్షన్ సృష్టించడం
ఇప్పుడు, మీ డ్యాష్‌బోర్డును నిజమైన ఖాతా డేటాతో నింపుటకు ఫంక్షన్ సృష్టించండి:
```javascript
function updateDashboard() {
if (!account) {
return navigate('/login');
}
updateElement('description', account.description);
updateElement('balance', account.balance.toFixed(2));
updateElement('currency', account.currency);
}
```
**దశల వారీగా, ఈ ఫంక్షన్ చేస్తున్నది:**
- ఖాతా డేటా ఉంది అని ధృవీకరిస్తుంది
- ధృవీకరణ లేని వినియోగదారులను లాగిన్ పేజీకి తిరిగి షిఫ్ట్ చేస్తుంది
- పునర్వినియోగమైన `updateElement` ఫంక్షన్ ఉపయోగించి ఖాతా వివరణను నవీకరిస్తుంది
- బ్యాలెన్స్‌ ను ఎప్పుడూ రెండు దశాంశ స్థానాలతో చూపిస్తుంది
- సరైన కరెన్సీ చిహ్నాన్ని ప్రదర్శిస్తుంది
> 💰 **డబ్బు ఫార్మాటింగ్**: ఆ [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) పద్ధతీ నిజమైన డబ్బుల ప్రకారం బ్యాలెన్స్ చూడమంటుంది - "75" కాకుండా "75.00" గా! వినియోగదారులకు చర్చిత కరెన్సీ ఫార్మాట్ కనిపిస్తే వారు సంతోషిస్తారు.
#### దశ 3: మీ డ్యాష్‌బోర్డు నవీకరించడం నిర్ధారించు
ప్రతి సారి ఎవరు వచ్చేశారో డ్యాష్‌బోర్డు తాజా డేటాతో నవీకరిస్తాయని నిర్ధారించేందుకు, మీ నావిగేషన్ వ్యవస్థలో హుక్ చేయాలి. మీరు [పాఠం 1 అసైన్మెంట్](../1-template-route/assignment.md) పూర్తి చేస్తే ఇది పరిచితం. లేకపోయినా, మీకు అవసరం:
మీ `updateRoute()` ఫంక్షన్ చివర ఈ కోడ్ జోడించండి:
```javascript
if (typeof route.init === 'function') {
route.init();
}
```
అంతేకాకుండా, డ్యాష్‌బోర్డు ప్రారంభాన్ని పాఠ్య రూట్లలో చేర్చండి:
```javascript
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard', init: updateDashboard }
};
```
**ఈ చక్కటి సెటప్ చేస్తున్నది:**
- రూట్‌లో ప్రత్యేక ప్రారంభ కోడ్ ఉన్నదాన్ని తనిఖీ చేస్తుంది
- ఆ కోడ్ ఆ రూట్ లోడ్ అవుతుండగానే ఆటోమేటిగ్గా నడిపిస్తుంది
- మీ డ్యాష్‌బోర్డు ఎప్పుడూ తాజా, ప్రస్తుత డేటా ప్రదర్శిస్తుందని నిర్ధారిస్తుంది
- రూటింగ్ లాజిక్‌ను శుభ్రముగా మరియు క్రమబద్ధంగా ఉంచుతుంది
#### మీ డ్యాష్‌బోర్డు పరీక్షించండి
ఈ మార్పులు అమలు చేసిన తర్వాత, డ్యాష్‌బోర్డు ఈ విధంగా పరీక్షించండి:
1. **లాగిన్ అవ్వండి** టెస్ట్ ఖాతాతో
2. **తిరిగి వచ్చి** మీరు డ్యాష్‌బోర్డుకు వెళ్లిపోయారో ధృవీకరించండి
3. **ఖాతా వివరణ, బ్యాలెన్స్, కరెన్సీ** సరిగ్గా ప్రదర్శించబడుతున్నాయనే తనిఖీ చేయండి
4. **లాగ్ అవుట్ కావడం మరియు మళ్లీ లాగిన్ కావడం** ద్వారా డేటా సరిగా రిఫ్రెష్ అవుతుందా అనేదాన్ని పరీక్షించండి
మీ డ్యాష్‌బోర్డు ఇప్పుడు లాగిన్ అయి ఉన్న వినియోగదారుల డేటా ఆధారంగా డైనమిక్ ఖాతా సమాచారాన్ని ప్రదర్శిస్తుంది!
## టెంప్లేట్లతో స్మార్ట్ ట్రాన్సాక్షన్ లిస్టులు నిర్మించడం
ప్రతి ట్రాన్సాక్షన్ కోసం మాన్యువల్ గా HTML సృష్టించడం బదులు, సర్వసాధారణ ఆకృతీకరణ కోసం టెంప్లేట్లను ఉపయోగిస్తాము. అంతరిక్ష నౌకల తయారీకి వాడే ప్రమాణీకృత భాగల లాంటి టెంప్లేట్లు ప్రతి ట్రాన్సాక్షన్ పంక్తి ఒకే నిర్మాణం, కనిపింపు పాటించడంలో సహాయపడతాయి.
ఈ సాంకేతికత కొన్ని ట్రాన్సాక్షన్‌ల నుండి వేలల‌కు స్కేల్ అవుతుంది, నిరంతర ప్రదర్శన మరియు పనితీరును నిలుపుకునేలా చేయుతుంది.
```mermaid
graph LR
A[HTML టెంప్లేట్] --> B[జావాస్క్రిప్ట్ క్లోన్]
B --> C[డేటాతో పూరించండి]
C --> D[ఫ్రాగ్మెంట్‌కి జోడించండి]
D --> E[DOMకి బ్యాచ్ ఇన్‌సర్ట్]
subgraph "పనితీరు లాభాలు"
F[ఒక్కడే DOM నవీకరణ]
G[నియమిత ఫార్మాటింగ్]
H[మళ్ళీ వాడదగిన నమూనా]
end
E --> F
E --> G
E --> H
```
```mermaid
flowchart LR
A[వివరణల డేటా] --> B[HTML టెంప్లేట్]
B --> C[టెంప్లేట్ క్లోన్]
C --> D[డేటాతో నింపు]
D --> E[DOM లో చేర్చు]
E --> F[ప్రతి లావాదేవీకి పునరావృతం]
```
### దశ 1: ట్రాన్సాక్షన్ టెంప్లెట్ సృష్టించడం
మొదట, మీ HTML `<body>` లో ట్రాన్సాక్షన్ పంక్తుల కోసం పునర్వినియోగ టెంప్లెట్ జోడించండి:
```html
<template id="transaction">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</template>
```
**HTML టెంప్లేట్లు అర్థం చేసుకోవడం:**
- ఒకే టేబుల్ పంక్తి నిర్మాణాన్ని నిర్వచిస్తాయి
- JavaScript ద్వారా క్లోన్ చేసి నింపబడ్డప్పుడల్లా కనపడతాయి
- తారీఖు, వివరణ, మొత్తం కోసం మూడు సెల్స్ ఉన్నాయి
- నిరంతర ఆకృతీకరణకు పునర్వినియోగ నమూనాగా ఉంది
### దశ 2: డైనమిక్ కంటెంట్ కోసం మీ టేబుల్ తయారుచేయండి
తర్వాత, టేబుల్ బాడీకి ఒక `id` జతచేయండి, ఇది JavaScript సులభంగా లభ్యమౌతుంది:
```html
<tbody id="transactions"></tbody>
```
**ఇది సాధించేది:**
- ట్రాన్సాక్షన్ పంక్తులు చేర్చడానికి స్పష్టమైన లక్ష్యం సృష్టిస్తుంది
- టేబుల్ నిర్మాణాన్ని డైనమిక్ కంటెంట్ నుండి వేరుచేస్తుంది
- డేటాను సులభంగా క్లియర్ చేసి మళ్ళీ నింపడం సాధ్యం
### దశ 3: ట్రాన్సాక్షన్ పంక్తి ఫ్యాక్టరీ ఫంక్షన్ తయారుచేయండి
ఇప్పుడు లావాదేవీ డేటాను HTML ఎలిమెంట్లుగా మార్చే ఫంక్షన్ సృష్టించండి:
```javascript
function createTransactionRow(transaction) {
const template = document.getElementById('transaction');
const transactionRow = template.content.cloneNode(true);
const tr = transactionRow.querySelector('tr');
tr.children[0].textContent = transaction.date;
tr.children[1].textContent = transaction.object;
tr.children[2].textContent = transaction.amount.toFixed(2);
return transactionRow;
}
```
**ఈ ఫ్యాక్టరీ ఫంక్షన్ పునఃవిభజన:**
- ID ద్వారా టెంప్లెట్ ఎలిమెంట్ తెచ్చుకుంటుంది
- సురక్షితంగా ముడిచేర్పు కోసం టెంప్లెట్ కంటెంట్‌ను క్లోన్ చేస్తుంది
- క్లోన్ చేసిన కంటెంట్‌లో టేబుల్ పంక్తిని ఎంపిక చేస్తుంది
- ప్రతి సెల్ ను లావాదేవీ డేటాతో నింపుతుంది
- మొత్తాన్ని సరైన దశాంశ స్థానాలతో ఫార్మాట్ చేస్తుంది
- చొప్పించడానికి సిద్ధంగా ఉన్న పూర్తి పంక్తిని తిరిగిస్తుంది
### దశ 4: బహుళ లావాదేవీ పంక్తులని సమర్థవంతంగా సృష్టించండి
ఇది మీ `updateDashboard()` ఫంక్షన్‌లో జోడించండి, అన్ని లావాదేవీలను ప్రదర్శించడానికి:
```javascript
const transactionsRows = document.createDocumentFragment();
for (const transaction of account.transactions) {
const transactionRow = createTransactionRow(transaction);
transactionsRows.appendChild(transactionRow);
}
updateElement('transactions', transactionsRows);
```
**ఈ సమర్థవంతమైన విధానం అర్థం చేసుకోవడం:**
- DOM ఆపరేషన్లను బ్యాచ్ చేయడానికి డాక్యుమెంట్ ఫ్రాగ్మెంట్ సృష్టిస్తుంది
- ఖాతా డేటాలోని ప్రతి లావాదేవీని పునర్వృష్టి చేస్తుంది
- ఫ్యాక్టరీ ఫంక్షన్ ద్వారా ప్రతి లావాదేవీకి పంక్తి సృష్టిస్తుంది
- అన్ని పంక్తులను ఫ్రాగ్మెంట్‌లో కూడదీసి DOM లో జతచేస్తుంది
- మూలకాల మిళిత చేర్చద్దాం బదులు ఒకేసారి DOM నవీకరణ చేస్తుంది
> ⚡ **సమర్థత ఆప్టిమైజేషన్**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) బోయింగ్‌లో అసెంబ్లీ ప్రక్రియలా పనిచేస్తుంది - భాగాలను ప్రధాన లైన్ వెలుపల సిద్ధం చేస్తారు, ఆ తర్వాత పూర్తి యూనిట్‌గా ఇన్స్టాల్ చేస్తారు. ఈ బ్యాచింగ్ విధానం అనేక వ్యక్తిగత ఆపరేషన్ల స్థానంలో ఒకే సారి ఇన్‌సెర్షన్ చేస్తూ DOM రీఫ్లోలను కనిష్టం చేస్తుంది.
### దశ 5: మిక్స్ కంటెంట్ కోసం అప్డేట్ ఫంక్షన్‌ను మెరుగుపర్చండి
మీ `updateElement()` ఫంక్షన్ ప్రస్తుతం కేవలం టెక్స్ట్ కంటెంట్‌ను మాత్రమే నిర్వహిస్తుంది. దాన్ని టెక్స్ట్ మరియు DOM నోడ్లు రెండింటితో పని చేయడానికి నవీకరించండి:
```javascript
function updateElement(id, textOrNode) {
const element = document.getElementById(id);
element.textContent = ''; // అన్ని పిల్లలను తీసివేస్తుంది
element.append(textOrNode);
}
```
**ఈ అప్డేట్‌లో ముఖ్యమైన మెరుగుదలలు:**
- కొత్త కాంటెంట్‌ను జోడించే ముందు ఉన్న కంటెంట్ **తొలగిస్తుంది**
- పారామితులుగా టెక్స్ట్ స్ట్రింగ్స్ లేదా DOM నోడ్ల ఏదైనా **అంగీకరిస్తుంది**
- **నమ్రత కోసం** [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) విధానాన్ని ఉపయోగిస్తుంది
- ఇప్పటికే ఉన్న టెక్స్ట్ ఆధారిత వినియోగంతో సంబంధం కలిగించే **పూర్వ అనుకూలతను** ఉంచుతుంది
### మీ డాష్‌బోర్డు‌ను టెస్ట్ డ్రైవ్ చేయడం
నిజం తెలిపే సమయం వచ్చింది! మీ డైనమిక్ డాష్‌బోర్డును కార్యాచరణలో చూద్దాం:
1. `test` అకౌంట్‌తో లాగిన్ అవ్వండి (ఇందులో నమూనా డేటా సిద్ధంగా ఉంది)
2. మీ డాష్‌బోర్డుకు వెళ్లండి
3. లావాదేవీ వరుసలు సరైన ఫార్మాటింగ్ తో కనబడుతున్నాయో చూసుకోండి
4. తేదీలు, వివరణలు, మరియు మొత్తం సక్రమంగా ఉన్నాయో ధృవీకరించుకోండి
అన్నీ సరిగ్గా ఉంటే, మీ డాష్‌బోర్డు మీద పూర్తిగా పనిచేసే లావాదేవీ జాబితా కనిపిస్తుందని చూడగలరు! 🎉
**మీరు సాధించినవి:**
- ఏ కొలతలోనైనా డేటాతో పెరిగే డాష్‌బోర్డు నిర్మించారు
- నిరంతర ఫార్మాటింగ్ కోసం పునరుపయోగించదగిన టెంప్లేట్లు సృష్టించారు
- సమర్థవంతమైన DOM మానిప్యులేషన్ సాంకేతికతలను అమలు చేయించారు
- ఉత్పాదక బ్యాంకింగ్ అప్లికేషన్‌లకు తగిన కార్యాచరణను అభివృద్ధి చేశారు
మీరు ఒక స్థిరమైన వెబ్ పేజీని డైనమిక్ వెబ్ అప్లికేషన్‌గా విజయవంతంగా మార్చారు.
### 🎯 పాఠ్యసంబంధమైన తనిఖీ: డైనమిక్ కంటెంట్ రూపొందింపు
**ఆర్కిటెక్చర్ అవగాహన**: మీరు React, Vue, మరియు Angular వంటి ఫ్రేమ్‌వర్క్‌లలో ఉపయోగించే నమూనాలను అనుకరించే సTITLE sophisticated డేటా-టు-UI పైప్లైన్‌ను అమలు చేశారు.
**ముఖ్యమైన భావాలు అందుకున్నారు:**
- **టెంప్లేట్ ఆధారిత రენდరింగ్**: పునరుపయోగించే UI భాగాలు రూపొందించడం
- **డాక్యుమెంట్ ఫ్రాగ్మెంట్లు**: DOM సమర్థతను పెంచడం
- **సురక్షిత DOM మానిప్యులేషన్**: భద్రతా కలతలు నివారించడం
- **డేటా అనువాదం**: సర్వర్ డేటాను వినియోగదారు ఇంటర్ఫేస్‌కి మార్చడం
**ఇండస్ట్రీ సంబంధం**: ఈ సాంకేతికతలు ఆధునిక ఫ్రంట్‌ఎండ్ ఫ్రేమ్‌వర్క్‌లకు ఆదారం. React యొక్క వర్చువల్ DOM, Vue టెంప్లేట్ వ్యవస్థ, మరియు Angular భాగాల నిర్మాణం ఈ ప్రాథమిక సూత్రాలపై ఆధారపడినవి.
**ఛింతన ప్రశ్న**: కొత్త లావాదేవీలు ఆటోమేటిక్‌గా కనపడేవలె రియల్-టైమ్ అప్డేట్లను ఈ సిస్టమ్ ఎలా నిర్వహిస్తుంది? WebSockets లేదా Server-Sent Events ఉపయోగించాలా?
---
## 📈 మీ డేటా నిర్వహణ నైపుణ్యం సమయరేఖ
```mermaid
timeline
title డేటా-డ్రైవెన్ అభివృద్ధి ప్రయాణం
section ఫౌండేషన్ బిల్డింగ్
API సెటప్ & టెస్టింగ్
: క్లయింట్-సర్వర్ కమ్యూనికేషన్ ను అర్థం చేసుకోండి
: HTTP రిక్వెస్ట్/రెస్పాన్స్ సైకిల్ లో ప్రావీణ్యం పొందండి
: డీబగ్గింగ్ సాంకేతికతలు నేర్చుకోండి
section ప్రామాణీకరణ నైపుణ్యం
అసింక్ ఫంక్షన్ ప్యాటర్న్స్
: క్లین్గా అసింక్/అవైట్ కోడ్ రాయండి
: ప్రమిసెస్‌ను సమర్థవంతంగా నిర్వహించండి
: ఎర్రర్ బౌండరీస్ అమలు చేయండి
యూజర్ సెషన్ నిర్వహణ
: గ్లోబల్ స్టేట్ ప్యాటర్న్స్ సృష్టించండి
: నావిగేషన్ గార్డులను నిర్మించండి
: యూజర్ ఫీడ్బ్యాక్ సిస్టమ్స్ డిజైన్ చేయండి
section డైనమిక్ UI అభివృద్ధి
సేఫ్ DOM మానిప్యులేషన్
: XSS రిస్కులను నివారించండి
: innerHTML పై textContent ఉపయోగించండి
: యాక్సెసిబిలిటీ-ఫ్రెండ్లీ ఇంటర్ఫేస్‌లు సృష్టించండి
టెంప్లేట్ సిస్టమ్స్
: పునర్వినియోగం అయ్యే UI కంపోనెంట్స్ నిర్మించండి
: ఫ్రాగ్మెంట్స్‌తో ప్రదర్శనను ఉత్కృష్టంగా చేయండి
: పెద్ద డేటాసెట్‌లను నిర్వహించేలా స్కేల్ చేయండి
section ప్రొఫెషనల్ ప్యాటర్న్స్
ప్రొడక్షన్-రెడీ కోడ్
: సమగ్ర ఎర్రర్ హ్యాండ్లింగ్ అమలు చేయండి
: భద్రత మెరుగైన ఆచారాలను అనుసరించండి
: నిర్వహణ సులభమైన నిర్మాణాలను సృష్టించండి
ఆధునిక వెబ్ ప్రమాణాలు
: Fetch API ప్యాటర్న్స్ లో ప్రావీణ్యం పొందండి
: CORS కాన్ఫిగరేషన్లు అర్థం చేసుకోండి
: స్పందనశీల, యాక్సెసిబుల్ UIలను నిర్మించండి
```
**🎓 పట్టాభిషేక మైలురాయి**: మీరు ఆధునిక JavaScript నమూనాలను ఉపయోగిస్తూ పూర్తి డేటా-ఆధారిత వెబ్ అప్లికేషన్‌ను విజయవంతంగా నిర్మించారు. ఈ నైపుణ్యాలు React, Vue లేదా Angular వంటి ఫ్రేమ్‌వర్క్‌లతో పని చేయడాన్ని నేరుగా అనువదిస్తాయి.
**🔄 తదుపరి స్థాయి సామర్థ్యాలు:**
- ఈ భావాలపై నిర్మింపబడిన ఫ్రంట్‌ఎండ్ ఫ్రేమ్‌వర్క్‌లను కన్వీ మరింత తెలుసుకోవడానికి సన్నద్ధం
- WebSockets తో రియల్-టైమ్ ఫీచర్లను అమలు చేయడానికి సిద్ధంగా ఉంది
- ఆఫ్లైన్ సామర్థ్యాలతో ప్రోగ్రెస్‌వ్ వెబ్ యాప్స్ నిర్మించేందుకు సన్నద్ధం
- ఆధునిక స్థితి నిర్వహణ నమూనాలు నేర్చుకోవడానికి మౌలికమైన పునాదులు
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఈ క్రింది ఛాలెంజ్‌ను పూర్తి చేయడానికి ఏజెంట్ మోడ్‌ని ఉపయోగించండి:
**వివరణ:** బ్యాంకింగ్ యాప్‌ను అభివృద్ధి చేసి, యూజర్లు ప్రత్యేకమైన లావాదేవీలను తేదీ పరిధి, మొత్తం లేదా వివరణ ద్వారా వెతికి ఫిల్టర్ చేయగలిగే లావాదేవీ శోధన మరియు ఫిల్టర్ ఫీచర్‌ను అమలు చేయండి.
**ప్రాంప్ట్:** బ్యాంకింగ్ యాప్ కోసం శోధన ఫంక్షనాలిటీని సృష్టించండి, ఇందులో: 1) తేదీ పరిధి(మొదటి/చివరి), కనిష్ట/గరిష్ట మొత్తం, మరియు లావాదేవీ వివరణ కీవర్డ్‌లు కోసం ఇన్పుట్ ఫీల్డ్స్ గల శోధన ఫారమ్ 2) search criteria ఆధారంగా account.transactions శ్రేణిని ఫిల్టర్ చేసే `filterTransactions()` ఫంక్షన్ 3) ఫిల్టర్ చేసిన ఫలితాలను చూపేందుకు `updateDashboard()` ఫంక్షన్ నవీకరించడం 4) వీక్షణను రీసెట్ చేసే "క్లియర్ ఫిల్టర్స్" బటన్ జోడించడం. `filter()` వంటి ఆధునిక JavaScript శ్రేణి పద్ధతులను ఉపయోగించి ఖాళీ శోధన ప్రమాణాలకు హ్యాండిల్ చేయండి.
ఇంకా తెలుసుకోండి [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) గురించి.
## 🚀 ఛాలెంజ్
మీ బ్యాంకింగ్ యాప్‌ను తదుపరి స్థాయికి తీసుకెళ్లడానికి సిద్ధమా? దీన్ని మీరు నిజంగా ఉపయోగించదలచినట్లుగా చూడమని మరియు అనుభూతి చెందడానికి కొన్ని ఆలోచనలు:
**అందంగా చేయండి**: మీ కార్యాచరణాత్మక డాష్బోర్డును దృశ్యముగా ఆకర్షణీయంగా మార్చేందుకు CSS స్టైలింగ్ జోడించండి. పరిశుభ్రమైన లైన్లు, మంచి ఖాళీలు, మరియు కొన్ని సున్నితమైన యానిమేషన్లు కూడా ఆలోచించండి.
**ప్రతిస్పందనీయంగా చేయండి**: [మీడియా క్వేరీల](https://developer.mozilla.org/docs/Web/CSS/Media_Queries)ను ఉపయోగించి ఫోన్లు, టాబ్లెట్లు, మరియు డెస్క్టాప్‌లపై బాగా పనిచేసే [ప్రతిస్పందనీయ డిజైన్](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks)ను సృష్టించండి. మీ వినియోగదారులు ఖచ్చితంగా ధన్యవాదాలు తెలుపుతారు!
**కొంచెం ప్రత్యేకత జోడించండి**: లావాదేవీలను రంగుతో గుర్తించండి (ఆదాయానికి ఆకుపచ్చ, ఖర్చులకు ఎరుపు), ఐకాన్లను జోడించండి, లేదా ఇంటర్ఫేస్‌ను ఇంటరాక్టివ్‌గా మార్చే హోవర్ ఎఫెక్ట్స్ సృష్టించండి.
అందుబాటులో ఒక మెరుగైన డాష్‌బోర్డు ఎలా కనిపించొచ్చో ఇక్కడ చూడండి:
![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14a.te.png)
దీనిని ఖచ్చితంగా అనుకరించాల్సిన అవసరం లేదు - ఇది ప్రేరణగా ఉపయోగించుకుని మీది మార్చుకోండి!
## పాఠ్యోత్సవం క్విజ్
[పాఠ్యోత్సవం క్విజ్](https://ff-quizzes.netlify.app/web/quiz/46)
## అసైన్‌మెంట్
[మీ కోడ్‌ను రిఫ్యాక్టర్ చేసి వ్యాఖ్యానించండి](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**మార్గదర్శక సూచన**:
ఈ డాక్యుమెంట్ [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవను ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటికీ, సొంతంగా చేసిన అనువాదాల్లో తప్పులు లేదా అసత్యతలు ఉండొచ్చు. ఈ డాక్యుమెంట్ యొక్క అసలు భాషలో ఉన్న పాఠ్యాన్ని అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాద సేవలను ఉపయోగించడం మంచిది. ఈ అనువాదాన్ని ఉపయోగించడంవలన కలిగే ఏవైనా భావాల పొరపాట్లకైనా మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

144
translations/te/7-bank-project/3-data/assignment.md
Unescape View File

@ -0,0 +1,144 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "d0a02cb117e91a5b5f24178080068a3d",
"translation_date": "2026-01-08T17:29:16+00:00",
"source_file": "7-bank-project/3-data/assignment.md",
"language_code": "te"
}
-->
# కోడ్ రిఫ్యాక్టరింగ్ మరియు డాక్యుమెంటేషన్ అసైన్‌మెంట్
## అభ్యాస లక్ష్యాలు
ఈ అసైన్‌మెంట్ పూర్తి చేసుకోవడం ద్వారా, మీరు వృత్తిపరమైన డెవలపర్లు రోజువారీగా ఉపయోగించే అవసరమైన సాఫ్ట్‌వేర్ అభివృద్ధి నైపుణ్యాలను అభ్యసిస్తారు. మీరు కోడ్‌ను నిర్వహణసాధ్యంగా వేసుకోవడం, అభిసరణ ద్వారా ప్రతులు తగ్గించడం, మరియు భవిష్యత్తు డెవలపర్ల (మీతో సహా!) కోసం మీ పని డాక్యుమెంట్ చేయడం నేర్పుకోగలుగుతారు.
స్వచ్ఛ, బాగా డాక్యుమెంట్ చేయబడిన కోడ్ అనేది నిజ జీవిత వెబ్ అభివృద్ధి ప్రాజెక్టుల కోసం చాలా కీలకమై ఉంటుంది, అక్కడ అనేక డెవలపర్లు కలిసి పని చేస్తారు మరియు కోడ్‌బేస్‌లు కాలక్రమేణా అభివృద్ధి చెందుతుంటాయి.
## అసైన్‌మెంట్ అవలోకనం
మీ బ్యాంకింగ్ యాప్ యొక్క `app.js` ఫైలు లాగిన్, రిజిస్ట్రేషన్, మరియు డ్యాష్‌బోర్డ్ ఫంక్షనాలిటీతో గణనీయంగా పెరిగిపోయింది. ఈ కోడ్‌ను వృత్తిపరమైన అభివృద్ధి ఆచరణలను ఉపయోగించి రీడబిలిటీ, నిర్వహణయోగ్యత మెరుగుపర్చడానికి మరియు ప్రతులు తగ్గించడానికి రిఫ్యాక్టర్ చేయాల్సిన సమయం వచ్చింది.
## సూచనలు
మీ ప్రస్తుత `app.js` కోడ్‌ను ఈ మూడు ప్రాథమిక రిఫ్యాక్టరింగ్ సాంకేతికాలను అమలు చేసి మార్చండి:
### 1. కాన్ఫిగరేషన్ కానిస్టెంట్లను తీసివేయండి
**టాస్క్**: మీ ఫైల్ టాప్‌లో ఉపయోగించదగిన కానిస్టెంట్లతో కాన్ఫిగరేషన్ విభాగాన్ని సృష్టించండి.
**అమలు మార్గదర్శకం:**
- సర్వర్ API బేస్ URLని (ఇప్పటికి బహుళ చోట్ల హార్డ్కోడ్ అయినది) తీసివేయండి
- బహుళ ఫంక్షన్లలో కనిపించే లోప సందేశాల కోసం కానిస్టెంట్లు సృష్టించండి
- మళ్లీ మళ్లీ ఉపయోగించే రూట్ పాథులు మరియు ఎలిమెంట్ IDలను కూడా తీసివేయాలని పరిశీలించండి
**ఉదాహరణ నిర్మాణం:**
```javascript
// కాన్ఫిగరేషన్ స్థిరాంకాలు
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
LOGIN: '/login',
DASHBOARD: '/dashboard'
};
```
### 2. ఏకీకృత రిక్వెస్ట్ ఫంక్షన్ సృష్టించండి
**టాస్క్**: `createAccount()` మరియు `getAccount()` మధ్య ప్రతిలిపి కోడ్ తొలగించే పునర్వినియోగించదగిన `sendRequest()` ఫంక్షన్‌ను నిర్మించండి.
**అవసరాలు:**
- GET మరియు POST రెండు రిక్వెస్ట్‌లను నిర్వహించండి
- సరైన లోప నిర్వహణను చేర్చండి
- వేర్వేరు URL ఎండ్‌పాయింట్లకు మద్దతు ఇవ్వండి
- ఐచ్చిక రిక్వెస్ట్ బాడీ డేటాను అంగీకరించండి
**ఫంక్షన్ సంతకం మార్గదర్శకం:**
```javascript
async function sendRequest(endpoint, method = 'GET', data = null) {
// మీ ఇంప్లిమెంటేషన్ ఇక్కడ
}
```
### 3. వృత్తిపరమైన కోడ్ డాక్యుమెంటేషన్ జోడించండి
**టాస్క్**: మీ منطقمన "ఎందుకు" అనే విషయాన్ని స్పష్టంగా మరియు సహాయక కామెంట్లతో వివరించే కోడ్ డాక్యుమెంటేషన్ జోడించండి.
**డాక్యుమెంటేషన్ ప్రమాణాలు:**
- ఫంక్షన్ గుణాత్మకత, పారామితులు మరియు రిటర్న్ విలువలను వివరించే డాక్యుమెంటేషన్ జోడించండి
- క్లిష్టమైన లాజిక్ లేదా వ్యాపార నిబంధనలకు ఇంటర్నల్ కామెంట్లను చేర్చండి
- సంబంధిత ఫంక్షన్లను సెక్షన్ హెడ్డర్లతో కలిపి గ్రూప్ చేయండి
- స్పష్టంగా లేని కోడ్ నమూనాలు లేదా బ్రౌజర్-స్పెసిఫిక్ పనితీరు పరిష్కారాలను వివరించండి
**ఉదాహరణ డాక్యుమెంటేషన్ శైలి:**
```javascript
/**
* Authenticates user and redirects to dashboard
* @param {Event} event - Form submission event
* @returns {Promise<void>} - Resolves when login process completes
*/
async function login(event) {
// డిఫాల్ట్ ఫారం సమర్పణ ఆపి జావాస్క్రిప్ట్‌తో పరిచర్య చేయండి
event.preventDefault();
// మీ అమలు...
}
```
## విజయ క్రీటీరియా
మీ రిఫ్యాక్టర్డ్ కోడ్ ఈ వృత్తిపరమైన అభివృద్ధి ఆచరణలను ప్రదర్శించాలి:
### ఆదర్శవంతమైన అమలు
- ✅ **కానిస్టెంట్లు**: అన్ని మ్యాజిక్ స్ట్రింగ్లు మరియు URLలను స్పష్టంగా పేరుమీద ఉన్న కానిస్టెంట్లుగా తీసివేశారు
- ✅ **DRY సూత్రం**: సాధారణ రిక్వెస్ట్ లాజిక్ పునర్వినియోగించదగిన `sendRequest()` ఫంక్షన్‌లో సమ్మిళితం చేయబడింది
- ✅ **డాక్యుమెంటేషన్**: ఫంక్షన్ల వద్ద స్పష్టమైన JSDoc కామెంట్లు ఉన్నాయి, వాటి ఉద్దేశ్యం మరియు పారామితులు వివరించబడ్డాయి
- ✅ **సంఘటన**: కోడ్ లాజికల్‌గా సెక్షన్ హెడ్డర్లు మరియు సुस్పష్ట ఫార్మాటింగ్‌తో గ్రూప్ చేయబడింది
- ✅ **లోప నిర్వహణ**: కొత్త రిక్వెస్ట్ ఫంక్షన్ ద్వారా మెరుగైన లోప నిర్వహణ
### సరిపడిన అమలు
- ✅ **కానిస్టెంట్లు**: ఎక్కువగా పునరావృత విలువలు తీసివేయబడ్డాయి, కొన్నిక డబ్బు గడచిన విలువలు మిగిలినవి
- ✅ **ఫాక్టరైజేషన్**: ప్రాథమిక `sendRequest()` ఫంక్షన్ సృష్టించబడింది కానీ అన్ని క్లిష్ట పరిస్థితులను తగిలించకపోవచ్చు
- ✅ **కామెంట్లు**: కీలక ఫంక్షన్లు డాక్యుమెంట్ చేయబడ్డాయి, అయినప్పటికీ కొన్ని వివరణలు మరింత పూర్తి కావచ్చు
- ✅ **రీడబిలిటీ**: కోడ్ సాధారణంగా బాగా అమర్చబడి ఉంటే కొన్నిస్దలువల్ల మెరుగుదల అవసరం
### మెరుగుదల అవసరం
- ❌ **కానిస్టెంట్లు**: చాలా మ్యాజిక్ స్ట్రింగ్లు మరియు URLలు ఫైల్ అంతటా హార్డ్కోడ్‌గా ఉన్నన్ని విధంగా ఉన్నాయి
- ❌ **ప్రతులు**: సమానమైన ఫంక్షన్ల మధ్య గణనీయమైన కోడ్ ప్రతులు ఇంకా ఉన్నాయి
- ❌ **డాక్యుమెంటేషన్**: కోడ్ యొక్క ఉద్దేశాన్ని వివరించని కాని లేదా తగినట్లుగా లేని కామెంట్లు
- ❌ **ఆర్గనైజేషన్**: కోడ్ స్పష్టమైన నిర్మాణం మరియు లాజికల్ గ్రూపింగ్ లేదు
## మీ రిఫ్యాక్టర్డ్ కోడ్‌ను పరీక్షించడం
రిఫ్యాక్టరింగ్ తర్వాత, మీ బ్యాంకింగ్ యాప్ సరిగ్గా పనిచేస్తుందా అని నిర్ధారించండి:
1. **అన్ని యూజర్ ఫ్లోలను పరీక్షించండి**: రిజిస్ట్రేషన్, లాగిన్, డ్యాష్‌బోర్డ్ ప్రదర్శన, మరియు లోప నిర్వహణ
2. **API కాల్స్‌ను ధృవీకరించండి**: `sendRequest()` ఫంక్షన్ ఖాతా సృష్టి మరియు పొందిక కోసం పనిచేస్తుందా అనేది నిర్ధారించండి
3. **లోప పరిస్థితులను పరిశీలించండి**: చెల్లని సాక్ష్యపత్రాలతో మరియు నెట్‌వర్క్ లోపాలతో పరీక్షించండి
4. **కాన్సోల్ అవుట్పుట్‌ను సమీక్షించండి**: రిఫ్యాక్టరింగ్ సమయంలో కొత్త లోపాలు పరిచయమయ్యాయని లేదు అనేది చూసుకోండి
## సమర్పణ మార్గదర్శకాలు
మీ రిఫ్యాక్టర్డ్ `app.js` ఫైల్‌ను క్రింద తెలిపిన విధంగా సమర్పించండి:
- వివిధ ఫంక్షనాలిటీలను క్రమబద్ధీకరించడానికి స్పష్టమైన సెక్షన్ హెడ్డర్లు
- ఒకే రకమైన కోడ్ ఫార్మాటింగ్ మరియు ఇన్డెంటేషన్
- అన్ని ఫంక్షన్లకు పూర్తి JSDoc డాక్యుమెంటేషన్
- మీ రిఫ్యాక్టరింగ్ దృక్కోణాన్ని వివరించే సంక్షిప్త కామెంట్ టాప్‌లో
**బోనస్ ఛాలెంజ్**: మీ యాప్ యొక్క ఆర్కిటెక్చర్ మరియు వివిధ ఫంక్షన్లు ఎలా కలిసి పనిచేస్తాయో వివరించే సాధారణ కోడ్ డాక్యుమెంటేషన్ ఫైలు (`CODE_STRUCTURE.md`) సృష్టించండి.
## నిజ జీవిత సంబంధం
ఈ అసైన్‌మెంట్ ప్రొఫెషనల్ డెవలపర్లు సాధారణంగా నిర్వహించే కోడ్ నిర్వహణ పనితనాన్ని ప్రతిబింబిస్తుంది. పరిశ్రమ పరిస్థితుల్లో:
- **కోడ్ సమీక్షలు** ఈ అసైన్‌మెంట్ లాంటి రీడబిలిటీ మరియు నిర్వహణసాధ్యతను అంచనా వేస్తాయి
- **టెక్నికల్ డెట్** కోడ్ రెగ్యులర్‌గా రిఫ్యాక్టర్ చేయబడని, డాక్యుమెంట్ చేయబడని సంబంధం వల్ల పెరుగుతుంది
- **టీమ్ సహకారం** స్పష్టమైన, బాగా డాక్యుమెంట్ చేయబడిన కోడ్‌పై ఆధారపడి ఉంటుంది, కొత్త టీమ్ సభ్యులు అర్థం చేసుకోవాలంటే
- **బగ్ ఫిక్స్‌లు** సరైన అభిసరణలతో, బాగా అమర్చబడ్డ కోడ్‌బేస్‌లలో చాలా సులభం
మీరు ఇక్కడ అభ్యసిస్తున్న నైపుణ్యాలు - కానిస్టెంట్లు తీసివేయడం, ప్రతులను తొలగించడం మరియు స్పష్టమైన డాక్యుమెంటేషన్ రాయడం - వృత్తిపరమైన సాఫ్ట్‌వేర్ అభివృద్ధి కోసం మౌలికమైనవి.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ముందస్తు తెలియజేయడం**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము నిశితమైన అనువాదానికి ప్రయత్నించినప్పటికీ, ఆటోమేటిక్ అనువాదాల్లో తప్పులు లేదా పొరపాట్లు ఉండవచ్చు అని దయచేసి గమనించండి. అసలు డాక్యుమెంట్ దాని స్థానిక భాషలోనే అధికారిక మూలంగా పరిగణించబడాలి. ముఖ్యమైన సమాచారానికి, నిపుణుల మానవ అనువాదం చేయించుకోవడం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వాడకం కారణంగా ఏర్పడిన ఏమైనా తప్పుదారితీసుకోవడాలు లేదా తప్పుగా అర్థం చేసుకోవడాలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

810
translations/te/7-bank-project/4-state-management/README.md
Unescape View File

@ -0,0 +1,810 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b807b09df716dc48a2b750835bf8e933",
"translation_date": "2026-01-08T17:35:55+00:00",
"source_file": "7-bank-project/4-state-management/README.md",
"language_code": "te"
}
-->
# బ్యాంకింగ్ యాప్ భాగం 4: స్టేట్ నిర్వహణ సిద్ధాంతాలు
## ⚡ తర్వాత 5 నిమిషాల్లో మీరు ఏమి చేయగలరో
**బిజీ డెవలపర్ల కోసం త్వరిత ప్రారంభ మార్గం**
```mermaid
flowchart LR
A[⚡ 5 నిమిషాలు] --> B[స్థితి సమస్యలను నిర్ధారించండి]
B --> C[మధ్యస్థితి ఆబ్జెక్ట్ సృష్టించండి]
C --> D[అప్‌డేట్ స్టేట్ ఫంక్షన్ చేర్చండి]
D --> E[తక్షణ మెరుగుదలలు చూడండి]
```
- **1వ నిమిషం**: ప్రస్తుత స్టేట్ సమస్యను పరీక్షించండి - లాగిన్ అవ్వండి, పేజీ రిఫ్రెష్ చేయండి, లాగ్అవుట్ అయ్యేలా గమనించండి
- **2వ నిమిషం**: `let account = null` ని `let state = { account: null }` తో మార్చండి
- **3వ నిమిషం**: నియంత్రిత అప్డేట్ల కోసం ఒక సాధారణ `updateState()` ఫంక్షన్ సృష్టించండి
- **4వ నిమిషం**: ఒక ఫంక్షన్ ని కొత్త నమూనా ఉపయోగించి అప్డేట్ చేయండి
- **5వ నిమిషం**: మెరుగైన అంచనా సామర్థ్యం మరియు డీబగ్గింగ్ సామర్థ్యాన్ని పరీక్షించండి
**తక్షణ పరీక్ష**:
```javascript
// ముందు: విస్తరించిన స్థితి
let account = null; // రీఫ్రెష్ చేసినప్పుడు పోతుంది!
// తర్వాత: కేంద్రీకృత స్థితి
let state = Object.freeze({ account: null }); // నియంత్రించబడినది మరియు ట్రాకింగ్ చేయగలిగేది!
```
**ఇది ఎందుకు ముఖ్యం**: 5 నిమిషాల్లో, మీరు గందరగోళమైన స్టేట్ నిర్వహణ నుండి అంచనా వేసుకోవచ్చునని, డీబగ్గింగ్ చేయగలిగే నమూనాల్లోకి మార్పును అనుభవించబోతున్నారు. ఇది సంక్లిష్ట అనువర్తనాలను నిర్వహించగల ఒక ప్రాథమికమైన మౌలిక సూత్రం.
## 🗺️ స్టేట్ నిర్వహణ నైపుణ్యంలో మీ విద్యా ప్రయాణం
```mermaid
journey
title విడిపోయిన రాష్ట్రం నుండి వృత్తిపరమైన వాస్తుకళ వరకు
section సమస్యలను నిర్ధారించడం
రాష్ట్ర నష్టం సమస్యలను గుర్తించడం: 3: You
విడిపోయిన నవీకరణలను అర్థం చేసుకోండి: 4: You
వాస్తుకళ అవసరాలను గుర్తించడం: 6: You
section నియంత్రణ ని కేంద్రీకరించడం
ఏకీకృత రాష్ట్ర ఆబ్జెక్ట్ సృష్టించండి: 5: You
నియంత్రిత నవీకరణలను అమలు చేయండి: 7: You
మార్పును ఆపే నమూనాలు జోడించండి: 8: You
section పట్టుదలని జోడించడం
localStorage ని అమలు చేయండి: 6: You
సీరియలైజేషన్ ను నిర్వహించండి: 7: You
సెషన్ అనుసంధానం సృష్టించండి: 9: You
section తాజాదనం సమతుల్యం చేయడం
డేటా పాతదైనతను పరిష్కరించండి: 5: You
రిఫ్రెష్ వ్యవస్థలను నిర్మించండి: 8: You
ఆదర్శ సమతుల్యాన్ని సాధించండి: 9: You
```
**మీ ప్రయాణ గమ్యం**: ఈ పాఠం చివరికి, మీరు పునఃప్రాప్తి, డేటా తాజీకరణ, అంచనా వేసుకునే అప్డేట్లను నిర్వహించే ప్రొఫెషనల్-గ్రేడ్ స్టేట్ నిర్వహణ వ్యవస్థను నిర్మించబోతున్నారు - ఇది ఉత్పత్తి అనువర్తనాల్లో ఉపయోగించే అదే నమూనాలు.
## పాఠానికి ముందు క్విజ్
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/47)
## పరిచయం
స్టేట్ నిర్వహణ అనేది వోయేజర్ జహాజు నావిగేషన్ వ్యవస్థ లాగానే ఉంటుంది – ప్రతిదీ సాఫీగా పని చేస్తే, మీరు దాని గురించి గమనించరు. కానీ సమస్యలు సంభవిస్తే, ఇది అంతరిక్ష ప్రయాణాన్ని సాధించడంలో వేరుబడిపోవడాన్ని మరియు ఖాళీ అంతరిక్షంలో తుమ్మడం మధ్య తేడాను సృష్టిస్తుంది. వెబ్ డెవలప్మెంట్ లో, స్టేట్ అనేది మీ అనువర్తనం గుర్తుంచుకోవాల్సిన ప్రతి విషయం: వినియోగదారు లాగిన్ స్థితి, ఫారం డేటా, నావిగేషన్ చరిత్ర, తాత్కాళిక ఇంటర్ఫేస్ స్టేట్స్.
మీ బ్యాంకింగ్ యాప్ సాదారణ లాగిన్ ఫారమ్ నుండి అధునాతన అనువర్తనంగా అభివృద్ధి చెందడంలో, మీరు సాధారణ సమస్యలను ఎదుర్కొంటూనే ఉంటారు. పేజీని రిఫ్రెష్ చేసినప్పుడు యూజర్లు అనుకున్నట్టు కాకుండా లాగ్ అవుట్ కావడం. బ్రౌజర్ ను మూసేసిన తర్వాత అన్ని పురోగతులు మాయం కావడం. ఒక సమస్యను డీబగ్ చేయాలంటే, మీరు అనేక ఫంక్షన్స్ ను త్రవ్వి చూడవలసి రావడం, అవి ఒకే డేటాను వివిధ విధాలుగా మార్చడం.
ఇవి చెడు కోడింగ్ సంకేతాలు కాదని గుర్తుంచుకోండి – ఇవి అప్లికేషన్లు ఒక నిర్దిష్ట సంక్లిష్టత స్థాయికి చేరుకున్నప్పుడు సహజంగా తలెత్తే పెరుగుదల పీడలే. ప్రతి డెవలపర్, వారి యాప్స్ "ప్రూవ్ ఆఫ్ కాన్సెప్ట్" నుండి "ఉత్పత్తి సిద్ధం" దశకి మారిపోతున్నప్పుడు ఈ సవాళ్ళను ఎదుర్కుంటారు.
ఈ పాఠంలో, మీ బ్యాంకింగ్ యాప్‌ను ఒక విశ్వసనీయం, ప్రొఫెషనల్ అనువర్తనంగా మారుస్తున్న కేంద్రిత స్టేట్ నిర్వహణ వ్యవస్థను అమలు చేస్తాము. మీరు డేటా ప్రవాహాలను అంచనా వేసుకునే విధంగా నిర్వహించడం, వినియోగదారి సెషన్లను తగిన విధంగా నిలుపుకోవడం మరియు ఆధునిక వెబ్ అనువర్తనాలకు కావలసిన సాఫీ వినియోగదార అనుభవాన్ని సృష్టించడం నేర్చుకుంటారు.
## ముందస్తు అవసరాలు
స్టేట్ నిర్వహణ సిద్ధాంతాలకు ముందుగా, మీరు మీ డెవలప్‌మెంట్ వాతావరణాన్ని సరిగ్గా అమర్చుకున్నారని మరియు మీ బ్యాంకింగ్ యాప్ ప్రాతిపదిక సిద్ధమైనదిగా నిర్ధారించుకోవాలి. ఈ పాఠం ఈ సిరీస్ గత భాగాలలోని భావనలకు మరియు కోడ్‌కు నేరుగా ఆధారపడి ఉంటుంది.
తదుపరి చర్యలకు ముందు మీ వద్ద ఈ క్రింది భాగాలు సిద్ధంగా ఉన్నాయని నిర్ధారించుకోండి:
**అవసరమైన సెటప్:**
- [డేటా ఫెచింగ్ పాఠం](../3-data/README.md) పూర్తిచేయండి - మీ యాప్ ఖాతా డేటాను విజయవంతంగా లోడ్ చేసి ప్రదర్శించగలగాలి
- సర్వర్ API నడిపించేందుకు మీ సిస్టమ్‌లో [Node.js](https://nodejs.org) ను ఇన్‌స్టాల్ చేయండి
- ఖాతా డేటా కార్యకలాపాలను నిర్వహించేందుకు స్థానికంగా [సర్వర్ API](../api/README.md) ను ప్రారంభించండి
**మీ వాతావరణాన్ని పరీక్షించండి:**
ఈ కింది కమాండ్ ను టెర్మినల్లో అమలు చేయడం ద్వారా మీ API సర్వర్ సరిగా నడుస్తుందో లేదో సరిచూడండి:
```sh
curl http://localhost:5000/api
# -> ఫలితంగా "Bank API v1.0.0" ను తిరిగి ఇవ్వాలి
```
**ఈ కమాండ్ చేయేది:**
- మీ స్థానిక API సర్వర్ కు GET అభ్యర్థన పంపుతుంది
- కనెక్షన్ ను పరీక్షించి సర్వర్ స్పందిస్తున్నదని నిర్ధారిస్తుంది
- అన్ని సరిగా ఉండితే API వెర్షన్ సమాచారాన్ని తిరిగి అందిస్తుంది
## 🧠 స్టేట్ నిర్వహణ వాస్తవ రూపకల్పన సమీక్ష
```mermaid
mindmap
root((రాష్ట్ర నిర్వహణ))
ప్రస్తుత సమస్యలు
సెషన్ నష్టం
పేజీ రిఫ్రెష్ సమస్యలు
బ్రౌజర్ మూసివేత ప్రభావం
వేరియబుల్ రీసెట్ సమస్యలు
విస్తరించిన నవీకరణలు
బహుళ మార్పు బింధువులు
డీబగ్గింగ్ కష్టాలు
అప్రతిష్టిత ప్రవర్తన
అపూర్తి శుభ్రపరిచటం
లాగౌట్ రాష్ట్ర సమస్యలు
మెమొరి లీక్స్
భద్రతా ఆందోళనలు
కేంద్రీకృత పరిష్కారాలు
సమగ్ర రాష్ట్ర ఆబ్జెక్ట్
సింగిల్ స్రోస్ ఆఫ్ ట్రూత్
నిర్ణీత నిర్మాణం
విస్తరించదగిన పునాది
నియంత్రిత నవీకరణలు
అమార్చలేని నమూనాలు
ఆబ్జెక్ట్.freeze వినియోగం
ఫంక్షన్-ఆధారిత మార్పులు
రాష్ట్ర ట్రాకింగ్
చరిత్ర నిర్వహణ
డీబగ్ కనిపించడం
మార్పు ఆడిటింగ్
నిలుపుదల వ్యూహాలు
localStorage ఏకత్రికరణ
సెషన్ జీవనాధార్యత
JSON సీరియలైజేషన్
స్వయంచాలక సమకాలీకరణ
డేటా తాజాదనం
సర్వర్ రిఫ్రెష్
పాత డేటా నిర్వహణ
సమతుల్య ఆప్టిమైజేషన్
నిల్వ ఆప్టిమైజేషన్
కనిష్ట డేటా
ప్రదర్శన కేంద్రీకరణ
భద్రతా పరిగణనలు
```
**ప్రధాన సూత్రం**: ప్రొఫెషనల్ స్టేట్ నిర్వహణ అంచనా, నిలుపుదల మరియు పనితీరు మధ్య సమతౌల్యం సాధించి భరోసాయుత వినియోగదార అనుభవాలను తయారుచేస్తుంది, ఇవి సాపేక్ష చర్యల నుండి సంక్లిష్ట అనువర్తన పని ప్రవాహాలకి వర్తిస్తాయి.
---
## ప్రస్తుత స్టేట్ సమస్యల నిర్ధారణ
షెర్లాక్ హోమ్స్ ఇటువంటి అనుమాన స్థలాన్ని పరిశీలిస్తూనే ఉన్నట్టుగా, మేము ప్రస్తుత అమలులో ఏమి జరుగుతోందో పూర్తిగా అర్థం చేసుకోవాలి, అప్పుడే వినియోగదార సెషన్లు పోవడంవంటి రహస్యం పరిష్కరించగలము.
బేసి పరీక్ష ఒక సరళ ప్రయోగం చేస్తాము, ఇది ప్రాథమిక స్టేట్ నిర్వహణ సవాళ్ళను వెలుగులోకి తేవడం:
**🧪 ఈ పరీక్షను ప్రయత్నించండి:**
1. మీ బ్యాంకింగ్ యాప్‌లో లాగిన్ అవ్వండి మరియు డ్యాష్‌బోర్డు కి వెళ్లండి
2. బ్రౌజర్ పేజీని రిఫ్రెష్ చేయండి
3. మీరు లాగిన్ స్థితి పై ఏమి జరుగుతుందో గమనించండి
మీరు తిరిగి లాగిన్ స్క్రీన్ కి రీడైరెక్ట్ చేయబడితే, మీరు క్లాసిక్ స్టేట్ నిలుపుదల సమస్యను కనుగొన్నారు. ఈ ప్రవర్తన ప్రస్తుత అమలు యూజర్ డేటాను జావాస్క్రిప్ట్ వేరియబుల్స్‌లో నిల్వ చేశేతీ, అవి ప్రతి పేజీ లోడ్ లో రీసెట్ అవుతుంది.
**ప్రస్తుత అమలు సమస్యలు:**
మునుపటి పాఠంలో (../3-data/README.md) ఉన్న సరళ `account` వేరియబుల్ మూడు ప్రధాన సమస్యలను సృష్టిస్తుంది, అవి వినియోగదార అనుభవం మరియు కోడ్ నిర్వహణ రెండింటినిస్థూలంగా ప్రభావితం చేస్తాయి:
| సమస్య | సాంకేతిక కారణం | వినియోగదార ప్రభావం |
|---------|---------------|-------------------|
| **ಸೆషన్ ನష్టం** | పేజీ రిఫ్రెష్ తనతో పాటు జావాస్క్రిప్ట్ వేరియబుల్స్ తొలగిస్తుంది | వినియోగదారులు తరచూ మళ్లీ లాగిన్ కావాలి |
| **ఆపసంలో అప్డేట్లు** | అనేక ఫంక్షన్లు ప్రత్యక్షంగా స్టేట్ ని మార్చతాయి | డీబగ్గింగ్ కష్టం అవుతుంది |
| **పూర్తిగా క్లియర్ కాదు** | లాగ్అవుట్ అన్నింటినీ క్లియర్ చేయదు | భద్రత మరియు గోప్యత సమస్యలు ఉంటాయి |
**వాస్తవ రూపకల్పన సవాలు:**
టైటానిక్ అనేక కంపార్ట్మెంట్లు నీటిలోకి చేర్యాకన పెడిన మూలక రూపకల్పన లాగా, ఈ సమస్యలను విడివిడిగా పరిష్కరించడం వాస్తవ రూపకల్పన సమస్యను పరిష్కరించదు. మాకు సమగ్ర స్టేట్ నిర్వహణ పరిష్కారం అవసరం.
> 💡 **మేము నిజానికి ఏమి సాధించాలనుకుంటున్నాం?**
[స్టేట్ నిర్వహణ](https://en.wikipedia.org/wiki/State_management) నిజానికి రెండు మూల సమస్యలను పరిష్కరిస్తుంది:
1. **నా డేటా ఎక్కడ ఉంది?**: ఏ సమాచారం మనకు ఉంది, అది ఎక్కడ నుండో ట్రాక్ చేయడం
2. **అందరూ అక్కడే ఉన్నారా?**: వినియోగదారులు చూస్తున్నదే నిజంగా జరుగుతుందా అని నిర్ధారించడం
**మా ప్రణాళిక:**
మేము తకృణాల్ని వెంటాడకుండా, ఒక **కేంద్రిత స్టేట్ నిర్వహణ** వ్యవస్థను సృష్టించబోతున్నాం. ఇది ఒక అన్ని ముఖ్యమైన విషయాలను జాగ్రత్తగా చూసుకునే వ్యక్తి లాంటి వ్యవస్థ:
![HTML, యూజర్ చర్యలు మరియు స్టేట్ మధ్య డేటా ప్రవాహాలను చూపిస్తూ స్కీమా](../../../../translated_images/data-flow.fa2354e0908fecc8.te.png)
```mermaid
flowchart TD
A[వినియోగదారు చర్య] --> B[ఈవెంట్ హ్యాండ్లర్]
B --> C[updateState ఫังก్షన్]
C --> D{ స్థితి ధ్రువపత్రం }
D -->|చెల్లుబాటు అయ్యే| E[కొత్త స్థితిని సృష్టించండి]
D -->|చెల్లుబాటు కానివి| F[లోపాన్ని నడిపించడం]
E --> G[Object.freeze]
G --> H[స్థానిక నిల్వను నవీకరించండి]
H --> I[UI నవీకరణను ప్రారంభించండి]
I --> J[వినియోగదారు మార్పులను చూస్తున్నాడు]
F --> K[వినియోగదారు లోపాన్ని చూస్తున్నాడు]
subgraph "స్థితి నిర్వహణ పొర"
C
E
G
end
subgraph "రికార్డులు పొర"
H
L[స్థానిక నిల్వ]
H -.-> L
end
```
**ఈ డేటా ప్రవాహాన్ని అర్థం చేసుకోవటం:**
- అన్ని అనువర్తన స్టేట్ ఒకే చోట కేంద్రితం చేయబడతాయి
- అన్ని స్టేట్ మార్పులు నియంత్రిత ఫంక్షన్ల ద్వారా నడిచుతాయి
- UI ప్రస్తుత స్టేట్ తో సమకాలీనంగా ఉంటుంది
- డేటా నిర్వహణకి స్పష్టమైన, అంచనా వేయగల నమూనాను అందిస్తుంది
> 💡 **ప్రొఫెషనల్ అవగాహన**: ఈ పాఠం ప్రాథమిక భావాలపై దృష్టి సారిస్తుంది. సంక్లిష్ట అనువర్తనాలకు, [Redux](https://redux.js.org) వంటి లైబ్రరీలు మరింత అభివృద్ధి చెందిన స్టేట్ నిర్వహణ లక్షణాలను అందిస్తాయి. ఈ మౌలిక సూత్రాలను అర్థం చేసుకోవడం ఏదైనా స్టేట్ లైబ్రరీను సమర్థంగా ఉపయోగించడంలో మీరు నైపుణ్యం గలిగేందుకు సహాయపడుతుంది.
> ⚠️ **అధునాతన అంశం**: స్టేట్ మార్పుల వల్ల ఆటోమేటిక్ UI అప్డేట్స్ అవసరం అయినా, అది [రిఐక్టివ్ ప్రోగ్రామింగ్](https://en.wikipedia.org/wiki/Reactive_programming) సిద్ధాంతాలు ఉండడం వల్ల ఇక్కడ చర్చించబడదు. ఇది మీ తదుపరి మంచి అభ్యాసంలొక అద్భుతమైన దశ!
### టాస్క్: స్టేట్ నిర్మాణం కేంద్రీకరించడం
పక్షపాతమైన స్టేట్ నిర్వహణని ఒక కేంద్రిత వ్యవస్థగా మార్చడం ప్రారంభిద్దాం. మొదటి దశ అన్ని మెరుగుదలలకు బేస్‌ను ఏర్పరుస్తుంది.
**దశ 1: ఒక కేంద్ర స్టేట్ ఆబ్జెక్ట్ సృష్టించండి**
సాదారణ `account` విధానాన్ని బదులు:
```js
let account = null;
```
కింద సుధారించబడిన మోసముతో:
```js
let state = {
account: null
};
```
**ఈ మార్పు ఎందుకు ముఖ్యం:**
- అన్ని అప్లికేషన్ డేటా ఒకే చోట కేంద్రీకృతమవుతుంది
- ఎక్కువ స్టేట్ ప్రాపర్టీలను జోడించడానికి నిర్మాణాన్ని సిద్ధం చేస్తుంది
- స్టేట్ మరియు ఇతర వేరియబుల్స్ మధ్య స్పష్టమైన సరిహద్దు సృష్టిస్తుంది
- యాప్ పెరిగేకొద్దీ పెద్ద తరహా పద్ధతులను ఏర్పరుస్తుంది
**దశ 2: స్టేట్ యాక్సెస్ నమూనాను అప్డేట్ చేయండి**
మీ ఫంక్షన్లను కొత్త స్టేట్ నిర్మాణం ఉపయోగించి అప్డేట్ చేయండి:
**`register()` మరియు `login()` ఫంక్షన్లలో**, ఇది:
```js
account = ...
```
దీని స్థలంలో:
```js
state.account = ...
```
**`updateDashboard()` ఫంక్షన్ లో**, ఎక్కడైనా మొదటి లైన్లో ఈ లైన్ జోడించండి:
```js
const account = state.account;
```
**ఈ అప్డేట్ల ఫలితాలు:**
- ఉండే విధానాన్ని ఉంచుతూ నిర్మాణాన్ని మెరుగుపరుస్తుంది
- మీ కోడ్ ని మరింత స్పష్టమైన స్టేట్ నిర్వహణకి సిద్ధం చేస్తుంది
- స్టేట్ డేటాను యాక్సెస్ చేసుకునే అందరికీ అనుకూల నమూనాలు సృష్టిస్తుంది
- కేంద్ర స్టేట్ అప్డేట్ల মৌలిక నిర్మాణాన్ని నెలకొల్పుతుంది
> 💡 **గమనిక**: ఈ మార్పు మా సమస్యలను తక్షణమే పరిష్కరించదు, కానీ శక్తివంతమైన మెరుగుదలలకు అవసరమైన పునాది ఇది!
### 🎯 పాఠశాల తనిఖీ: కేంద్రీకరణ సూత్రాలు
**ఆయా ఆలోచనకు విరామం ఇవ్వండి**: మీరు ఇప్పుడు కేంద్రిత స్టేట్ నిర్వహణ పునాది పెట్టారు. ఇది కీలకమైన ఆర్కిటెక్చరల్ నిర్ణయము.
**తక్షణ ఆత్మ-పరీక్ష:**
- ఒకే ఆబ్జెక్టులో స్టేట్ కేంద్రీకరించడం వేరే వేరయిన వేరియబుల్స్ కంటే ఎందుకు మంచిది?
- మీరు ఒక ఫంక్షన్ లో `state.account` ఉపయోగించడం మరవులేదా? అది ఎలాంటి ప్రభావం చూపుతుంది?
- ఈ నమూనా మీ కోడ్‌ను అధునాతన లక్షణాలకు ఎలా సిద్ధం చేస్తుంది?
**వాస్తవ ప్రపంచ సంబంధం**: మీరు నేర్చుకున్న కేంద్రీకరణ నమూనా ఆధునిక ఫ్రేమ్‌వర్క్స్ Redux, Vuex, React Context లోని మూల ఆర్కిటెక్చర్. మీరు ప్రధాన అప్లికేషన్లలోనే ఉపయోగించే ఆలోచనను నిర్మిస్తున్నారు.
**సవాలు ప్రశ్న**: మీరు యూజర్ అభిరుచులు (థీమ్, భాష) యాప్ లో జోడించాలనుకుంటే, మీరు స్టేట్ నిర్మాణంలో ఎక్కడ వాటిని చేర్చతారు? మరియు ఇది ఎలా పెరుగుతుందో వివరించండి.
## నియంత్రిత స్టేట్ అప్డేట్లు అమలు చేయడం
మా స్టేట్ కేంద్రీకృతంగా ఉన్నప్పుడు, తదుపరి దశ డేటా మార్పుల కోసం నియంత్రిత విధానాలను నెలకొల్పడమే. ఇది అంచనా వేయగలిగే స్టేట్ మార్పులను మరియు సులభమైన డీబగ్గింగ్‌ను నిర్ధారిస్తుంది.
ఈ ప్రాథమిక సూత్రం విమాన ట్రాఫిక్ కంట్రోల్ లాగా – అనేక ఫంక్షన్లు స్వతంత్రంగా స్టేట్ ను మార్చకుండా, అన్ని మార్పులు ఒకే నియంత్రిత ఫంక్షన్ ద్వారా ఉంటాయి. ఈ నమూనా ఎప్పుడు మరియు ఎలా డేటా మారుతున్నదో స్పష్టమైన అన్వయం కలిగి ఉంటుంది.
**అమాయకరహిత స్టేట్ నిర్వహణ:**
మేము `state` ఆబ్జెక్టును [*అమాయకరహిత*](https://en.wikipedia.org/wiki/Immutable_object)గా తీసుకుంటాము, అంటే దీని మీద ప్రత్యక్ష మార్పులు చేయం. ప్రతీ మార్పు కొత్త స్టేట్ ఆబ్జెక్టుని సృష్టిస్తుంది.
ఈ విధానం ప్రత్యక్ష మార్పులతో పోల్చితే మొదట్లో కాస్త అప్రమేయంగా అనిపించవచ్చు, కానీ డీబగ్గింగ్, పరీక్ష మరియు అప్లికేషన్ అంచనా సామర్థ్యాన్ని కాపాడటానికి ఇది చాలా ఉపయోగకరం.
**అమాయకరహిత స్టేట్ నిర్వహణ ప్రయోజనాలు:**
| ప్రయోజనం | వివరణ | పరిణామం |
|---------|-------|---------|
| **అంచనా సామర్థ్యం** | మార్పులు నియంత్రిత ఫంక్షన్ల ద్వారా మాత్రమే జరుగును | డీబగ్గింగ్ మరియు పరీక్ష సులభం |
| **చరిత్ర ట్రాకింగ్** | ప్రతి స్టేట్ మార్పు కొత్త ఆబ్జెక్టును సృష్టిస్తుంది | అన్‌డూ/రెడూ ఫీచర్లను సామర్థ్యం కలదు |
| **పైప్రభావాలు నివారణ** | ఎలాంటి అనుకోని మార్పులు లేవు | రహస్య బగ్స్ నివారిస్తాయి |
| **నిర్వహణ వేగవంతం** | స్టేట్ నిజంగా మారిన సమయంలో ఇది సులభంగా గుర్తించబడుతుంది | UI ను సమర్థవంతంగా అప్డేట్ చేయగలుగుతుంది |
**`Object.freeze()` తో జావాస్క్రిప్ట్ అమాయకత:**
జావాస్క్రిప్ట్ [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) ని ఆబ్జెక్టుల మార్పులను నివారించడానికి అందిస్తుంది:
```js
const immutableState = Object.freeze({ account: userData });
// immutableState ని మార్చడానికి ఏ ప్రయత్నం చేసినా పొరపాటు వస్తుంది
```
**ఇక్కడ ఏమి జరుగుతుందో విశ్లేషణ:**
- ప్రత్యక్ష స్థితి మార్చే ప్రయత్నాలు అడ్డుకుంటుంది
- మార్పు ప్రయత్నాలపై తప్పిదాలను ప్రదర్శిస్తుంది
- స్టేట్ మార్పులు అనవసరంగా నియంత్రిత ఫంక్షన్ల ద్వారా మాత్రమే జరగాలని నిర్ధారిస్తుంది
- స్టేట్ అప్డేట్లకు స్పష్టమైన ఒప్పందాన్ని సృష్టిస్తుంది
> 💡 **గొప్ప అవగాహన**: [MDN డాక్యుమెంటేషన్](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze)లో *తక్కువ* మరియు *డీప్* అమాయకకత (immutable) ఆబ్జెక్టుల మధ్య తేడా గురించి తెలుసుకోండి. సంక్లిష్ట స్టేట్ నిర్మాణాలకు ఇది చాలా కీలకం.
```mermaid
stateDiagram-v2
[*] --> StateV1: ప్రారంభ స్థితి
StateV1 --> StateV2: updateState('account', newData)
StateV2 --> StateV3: updateState('account', anotherUpdate)
StateV3 --> StateV4: updateState('preferences', userSettings)
note right of StateV1
Object.freeze()
మార్చలేని
డీబగ్ చేయదగినది
end note
note right of StateV2
కొత్త వస్తువు తయారైంది
మునుపటి స్థితి నిల్వ చేయబడింది
ఊహించదగిన మార్పులు
end note
```
### టాస్క్
కొత్త `updateState()` ఫంక్షన్ సృష్టిద్దాం:
```js
function updateState(property, newData) {
state = Object.freeze({
...state,
[property]: newData
});
}
```
ఈ ఫంక్షన్ లో మేము కొత్త స్టేట్ ఆబ్జెక్టును సృష్టించి, గత స్టేట్ నుండి పంపిణీ ఆపరేటర్ ([*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals)) గాను డేటాను కాపీ చేస్తాము. తరువాత, ఒక నిర్దిష్ట స్టేట్ ప్రాపర్టీని [బ్రాకెట్ నోటేషన్](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` గాను అప్‌డేట్ చేస్తాము. చివరగా, ఆ ఆబ్జెక్టును దుర్బుద్ధి మార్పుల నుండి రక్షించడానికి `Object.freeze()` ను అమలుపరుస్తాము. ప్రస్తుతానికి స్టేట్ లో `account` మాత్రమే ఉంది, కానీ మీరు అవసరమైనంత ప్రాపర్టీలను జోడించవచ్చు.
మేము కూడా ప్రారంభ స్టేట్ నిలిపివేత (ఫ్రీజ్) కోసం `state` ప్రారంభakaranను అప్డేట్ చేస్తాము:
```js
let state = Object.freeze({
account: null
});
```
తరువాత, `register` ఫంక్షన్ లో `state.account = result;` ని ఈ క్రింది విధంగా మార్చండి:
```js
updateState('account', result);
```
అలాగే, `login` ఫంక్షన్ లో `state.account = data;` ని:
```js
updateState('account', data);
```
ఇప్పుడు వినియోగదారులు *లాగ్ అవుట్* పై క్లిక్ చేసినప్పుడు ఖాతా డేటా తీసివేయకపోవడం సమస్యను సరి చేయాలని సమయం.
కొత్త `logout()` ఫంక్షన్ సృష్టించండి:
```js
function logout() {
updateState('account', null);
navigate('/login');
}
```
`updateDashboard()` లో మునుపటి రీడైరెక్షన్ `return navigate('/login');` ని `return logout();` తో మార్చండి;
కొత్త ఖాతా రిజిస్టర్డ్ చేసి, లాగ్ అవుట్ అయి, మళ్ళీ లాగిన్ అయ్యి సర్వం సరిగా పనిచేస్తుందో పరీక్షించండి.
> సూచన: మీరు స్టేట్ మార్పులన్నిటినీ చూసేందుకు `updateState()` దిగువ భాగంలో `console.log(state)` ను జోడించి బ్రౌజర్ డెవలపర్ టూల్స్ లో కన్సోల్ తెరవండి.
## డేటా నిలుపుదల అమలు
ముందుగా గుర్తించిన సెషన్ పోయే సమస్యకు యూజర్ స్టేట్‌ను బ్రౌజర్ సెషన్లలో నిలుపుకునే నిలుపుదల పరిష్కారం అవసరం. ఇది మా అనువర్తనాన్ని తాత్కాలిక అనుభవంలా కాకుండా విశ్వసనీయం, ప్రొఫెషనల్ టూల్ గా చేస్తుంది.
అటామిక్ గడియారాలు విద్యుత్ తుడిచిపోగానే కూడా ఖచ్చితమైన సమయాన్ని నిలుపుకోవడం కోసం వాటి అవసరమైన స్టేట్ ను నిలువజేస్తాయి. అదే విధంగా, వెబ్ అనువర్తనాలకు బ్రౌజర్ సెషన్లకు మరియు పేజీ రిఫ్రెష్ లకు యూజర్ ముఖ్యమైన డేటాను నిలుపుకునే నిలుపుదల గమనాహారాలు కావాలి.
**డేటా నిలుపుదలకి వ్యూహాత్మక ప్రశ్నలు:**
నిలుపుదల అమలు చేయకముందు ఈ కీలక విషయాలను పరిగణించండి:
| ప్రశ్న | బ్యాంకింగ్ యాప్ సందర్భం | నిర్ణయ ప్రభావం |
|----------|----------------|----------------|
| **డేటా సున్నితమా?** | ఖాతా బ్యాలెన్స్, లావాదేవీ చరిత్ర | భద్రత కలిగిన నిల్వ పద్ధతులను ఎంచుకోండి |
| **ఎంతకాలం నిలబడాలి?** | లాగిన్ స్టేట్ vs. తాత్కాలిక UI ప్రాధాన్యతలు | సరిపోయే నిల్వ వ్యవధిని ఎంచుకోండి |
| **సర్వర్‌కు ఇది అవసరమా?** | ప్రామాణీకరణ టోకెన్లు vs. UI సెట్టింగులు | షేరింగ్ అవసరాలను నిర్ణయించండి |
**బ్రౌజర్ స్టోరేజ్ ఎంపికలు:**
ఆధునిక బ్రౌజర్లు వివిధ ఉపయోగాల కోసం రూపొందించిన పలు నిల్వ విధానాలను అందిస్తాయి:
**ప్రాధమిక నిల్వ APIs:**
1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: శాశ్వతమైన [కీ/విలువు నిల్వ](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
- బ్రౌజర్ సెషన్ల మధ్య **డేటా నిలిచిపోతుంది**
- బ్రౌజర్ రీస్టార్ట్‌లు మరియు కంప్యూటర్ రీబూట్‌లు కూడా **బుజ్జలాకుండా నిలుస్తాయి**
- నిర్దిష్ట వెబ్‌సైట్ డొమైన్‌కు **సీమితం**
- యూజర్ ప్రాధాన్యతలు మరియు లాగిన్ స్థితుల కోసం **సరైనది**
2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: తాత్కాలిక సెషన్ నిల్వ
- సక్రియ సెషన్‌లలో localStorage లాగా **పని చేస్తుంది**
- బ్రౌజర్ ట్యాబ్ మూసేటప్పుడు **ఆటోమేటిక్ గా తొలగించబడుతుంది**
- నిలవకూడని తాత్కాలిక డేటాకు **సరైనది**
3. **[HTTP కుకీస్](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: సర్వర్-షేర్ చేయబడే నిల్వ
- ప్రతి సర్వర్ అభ్యర్థనతో **ఆటోమేటిగానే పంపబడతాయి**
- [ప్రామాణీకరణ](https://en.wikipedia.org/wiki/Authentication) టోకెన్లకు **సరైనది**
- పరిమిత పరిమాణం కలిగి, పనితీరుపై ప్రభావం చూపవచ్చు
**డేటా సీరియలైజేషన్ అవసరం:**
`localStorage` మరియు `sessionStorage` రెండూ కేవలం [స్ట్రింగ్స్](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)తోనే నిల్వ చేస్తాయి:
```js
// నిల్వ కోసం ఆబ్జెక్టులను JSON స్ట్రింగులుగా మార్చండి
const accountData = { user: 'john', balance: 150 };
localStorage.setItem('account', JSON.stringify(accountData));
// తిరిగి పొందుతున్నప్పుడు JSON స్ట్రింగులను ఆబ్జెక్టులుగా_PARSE_ చేయండి
const savedAccount = JSON.parse(localStorage.getItem('account'));
```
**సీరియలైజేషన్ అర్థం చేసుకోవడం:**
- జావాస్క్రిప్ట్ ఆబ్జెక్ట్లను JSON స్ట్రింగ్స్ గా మార్చడానికి [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) ఉపయోగించబడుతుంది
- JSON నుండి తిరిగి ఆబ్జెక్టులను పునఃసృష్టించడానికి [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) ఉపయోగించబడుతుంది
- క్లిష్టమైన ముడిగిన ఆబ్జెక్టులు మరియు అరేలను ఆటోమేటిగానే నిర్వహిస్తుంది
- ఫంక్షన్లు, నిర్వచించని విలువలు మరియు సర్క్యులర్ రిఫరెన్సులపై విఫలమవుతుంది
> 💡 **అత్యున్నత ఎంపిక**: భారీ డేటాసెట్ ఉన్న క్లిష్ట ఆఫ్‌లైన్ అనువర్తనాలకు [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) ను పరిగణించండి. ఇది పూర్తి క్లయింట్-సైడ్ డేటాబేస్ను అందిస్తుంది కానీ మరింత క్లిష్ట అమలు అవసరం.
```mermaid
quadrantChart
title బ్రౌజర్ నిల్వ ఎంపికలు
x-axis తక్కువ సంక్లిష్టత --> అధిక సంక్లిష్టత
y-axis క్షణిక అవధి --> దీర్ఘ అవధి
quadrant-1 వృత్తిపరమైన సరికొక్కలు
quadrant-2 సులభమైన స్థిరత్వం
quadrant-3 తాత్కాలిక నిల్వ
quadrant-4 ఆధునిక పద్ధతులు
localStorage: [0.3, 0.8]
sessionStorage: [0.2, 0.2]
HTTP Cookies: [0.6, 0.7]
IndexedDB: [0.9, 0.9]
Memory Variables: [0.1, 0.1]
```
### టాస్క్: localStorage నిల్వను అమలు చేయండి
వినియోగదారులు స్పష్టంగా లాగ్ అవుట్ అయ్యేదాకా లాగిన్‌గా ఉండేందుకు శాశ్వత నిల్వను అమలు చేద్దాం. బ్రౌజర్ సెషన్లలో అకౌంట్ డేటాను నిల్వ చేయడానికి `localStorage` ఉపయోగిస్తాము.
**దశ 1: నిల్వ కాన్ఫిగరేషన్ నిర్వచించండి**
```js
const storageKey = 'savedAccount';
```
**ఈ స్థిరాంకం అందించేది:**
- నిల్వ డేటాకు ఒక సుస్థిర గుర్తింపు సృష్టిస్తుంది
- నిల్వ కీ యాడ్రెస్‌లలో టైపోలను నివారిస్తుంది
- అవసరమైతే నిల్వ కీని సులభంగా మార్చగలుగుతుంది
- నిర్వహించే కోడ్‌కు ఉత్తమ పద్ధతులను అనుసరిస్తుంది
**దశ 2: ఆటోమేటిక్ నిల్వ జోడించండి**
`updateState()` ఫంక్షన్ చివర ఈ లైన్‌ను జోడించండి:
```js
localStorage.setItem(storageKey, JSON.stringify(state.account));
```
**ఇక్కడ ఏమి జరుగుతుందో విభజించి చూడండి:**
- అకౌంట్ ఆబ్జెక్టును నిల్వ కోసం JSON స్ట్రింగుగా మార్చడం
- మా సుసంగత నిల్వ కీతో డేటాను సేవ్ చేయడం
- స్టేట్ మారినపుడల్లా ఆటోమేటిగానే అమలు కావడం
- నిల్వ డేటా ఎప్పుడూ ప్రస్తుత స్థితితో సమకాలికంగా ఉండేలా చూడడం
> 💡 **ఆర్కిటెక్చర్ ప్రయోజనం**: అన్ని స్టేట్ అప్‌డేట్లను మధ్యవర్తిగా `updateState()` ద్వారా నిర్వహించడం వల్ల, నిల్వ జోడించడం కోడ్‌లో ఒక్క లైన్ మాత్రమే అవసరం. ఇది మంచి ఆర్కిటెక్చర్ నిర్ణయాల శక్తిని సూచిస్తుంది!
**దశ 3: యాప్ లోడ్ అయినప్పుడు స్టేట్‌ను పునఃస్థాపించండి**
సేవ్ చేసిన డేటాను పునఃప్రాప్తి చేసేందుకు ఇనిషియలైజేషన్ ఫంక్షన్ తయారుచేయండి:
```js
function init() {
const savedAccount = localStorage.getItem(storageKey);
if (savedAccount) {
updateState('account', JSON.parse(savedAccount));
}
// మా ముందు ఆరంభీకరణ కోడ్
window.onpopstate = () => updateRoute();
updateRoute();
}
init();
```
**ఇనిషియలైజేషన్ ప్రక్రియ అర్థం చేసుకోవడం:**
- ముందుగా `localStorage` నుండి ఏదైనా సేవ్ అయిన అకౌంట్ డేటాను తీసుకోవడం
- JSON స్ట్రింగును తిరిగి జావాస్క్రిప్ట్ ఆబ్జెక్టుగా పాస్ చేయడం
- మా నియంత్రిత అప్‌డేట్ ఫంక్షన్ ఉపయోగించి స్టేట్‌ను అప్‌డేట్ చేయడం
- పేజీ లోడ్ సమయంలో యూజర్ సెషన్ ఆటోమేటిగానే పునఃస్థాపించబడుతుంది
- రూట్ అప్‌డేట్లకు ముందే అమలు అవుతుంది
**దశ 4: డీఫాల్ట్ రూట్‌ను ఆప్టిమైజ్ చేయండి**
నిల్వ వ్యవస్థ వాడుక కోసం డీఫాల్ట్ రూట్‌ను మార్చండి:
`updateRoute()` లోని తాత్కాలిక కోడ్ ను ఇలా మార్చండి:
```js
// మార్చండి: return navigate('/login');
return navigate('/dashboard');
```
**ఈ మార్పు ఎందుకు సరైనది:**
- మా కొత్త నిల్వ వ్యవస్థను సద్వినియోగం చేసుకోవడం
- డాష్‌బోర్డు ప్రామాణీకరణను తనిఖీ చేయగలదు
- సేవ్ అయిన సెషన్ లేకపోతే ఆటోమేటిగానే లాగిన్ కి దారి తీస్తుంది
- యూజర్ అనుభవం మరింత స్నిగ్ధంగా ఉంటుంది
**మీ అమలును పరీక్షించండి:**
1. మీ బ్యాంకింగ్ యాప్‌లో లాగిన్ అవ్వండి
2. బ్రౌజర్ పేజీని రిఫ్రెష్ చేయండి
3. మీరు ఇంకా డాష్‌బోర్డు పై ఉన్నారని ధృవీకరించండి
4. బ్రౌజర్‌ను మూసి మళ్లీ ఓపెన్ చేయండి
5. మీ యాప్‌లోకి తిరిగి వెళ్ళి మీరు ఇంకా లాగిన్‌గా ఉన్నారా చూడండి
🎉 **అదృష్టవశాత్తూ సాధించారు**: మీరు శాశ్వత స్థితి నిర్వహణను విజయవంతంగా అమలు చేశారు! మీ యాప్ ఇప్పుడు ప్రొఫెషనల్ వెబ్ అనువర్తనం లాంటిది.
### 🎯 పాఠ్యశాల ని పరిశీలన: నిల్వ ఆర్కిటెక్చర్
**ఆర్కిటెక్చర్ అవగాహన**: మీరు వినియోగదారు అనుభవం మరియు డేటా నిర్వహణ క్లిష్టతను సరిజేయగల ఒక సాంకేతిక నిల్వ లేయర్‌ను అమలు చేశారు.
**ప్రధాన సూత్రాలు:**
- **JSON సీరియలైజేషన్**: క్లిష్టమైన ఆబ్జెక్టులను నిల్వ అవగాహనకరమైన స్ట్రింగ్స్ గా మార్చడం
- **ఆటోమేటిక్ సమకాలీకరణ**: స్టేట్ మార్పులు నిల్వను ట్రిగ్గర్ చేస్తాయి
- **సెషన్ పునరుద్ధరణ**: విరామాల తర్వాత యాప్‌లు వినియోగదారుల పరిస్థితిని పునఃస్థాపిస్తాయి
- **కేంద్రికృత నిల్వ**: ఒకే అప్‌డేట్ ఫంక్షన్ అన్ని నిల్వల్ని నిర్వహిస్తుంది
**సెక్టార్ అనుసంధానం**: ఈ నిల్వ నమూనా ప్రముఖ ప్రోగ్రెసివ్ వెబ్ అప్లికేషన్‌లు, ఆఫ్‌లైన్-ఫస్ట్ అనువర్తనాలు, ఆధునిక మొబైల్ వెబ్ అనుభవాలకు మూలధనం. మీరు ప్రొడక్షన్-స్థాయి సామర్థ్యాలను నిర్మిస్తున్నారు.
**పరీక్ష ప్రశ్న**: ఒకే పరికరం పై బహుళ యూజర్ ఖాతాలను ఎలా నిర్వహించేది? గోప్యత మరియు భద్రతా ప్రభావాలను పరిగణించండి.
## నిల్వ స్థితి మరియు డేటా తాజా మధ్య సమతౌల్యం
మన నిల్వ వ్యవస్థ యూజర్ సెషన్లను విజయవంతంగా నిర్వహిస్తుంది, కానీ ఒక కొత్త సవాలును సృష్టిస్తుంది: డేటా పాతడికపడుట. ఒకే సర్వర్ డేటాను బహుళ యూజర్లు లేదా అనువర్తనాలు సవరించినప్పుడు స్థానిక క్యాచ్ చేసిన సమాచారం పాతబడి ఉంటుంది.
ఈ పరిస్థితి వికింగ్ నావిగేటర్లను పోలిస్తోంది, వారు నిల్వ చేసిన నక్షత్ర పట్టికలు మరియు ప్రస్తుత ఖగోళ గమనాల రెండింటినీ ఆధారంగా చేసుకున్నారు. పట్టికలు స్థిరత్వాన్ని ఇచ్చాయి, కానీ మార్పులు జరిగే వాతావరణాల కోసం తాజాగా పరిశీలనలు అవసరమయ్యాయి. ఇలాగే, మన అనువర్తనం శాశ్వత వినియోగదారు స్థితిని మరియు ప్రస్తుత సర్వర్ డేటాను రెండింటినీ అవసరం పడుతుంది.
**🧪 డేటా తాజా సమస్యను కనుగొనడం:**
1. `test` అకౌంట్ తో డాష్‌బోర్డుకు లాగిన్ అవ్వండి
2. మరొక మూలం నుండి ట్రాన్సాక్షన్‌ను అనుకరించేందుకు ఈ కమాండ్‌ను టెర్మినల్లో నడపండి:
```sh
curl --request POST \
--header "Content-Type: application/json" \
--data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
http://localhost:5000/api/accounts/test/transactions
```
3. బ్రౌజర్‌లో మీ డాష్‌బోర్డు పేజీని రిఫ్రెష్ చేయండి
4. మీరు కొత్త ట్రాన్సాక్షన్ చూస్తున్నారా గమనించండి
**ఈ పరీక్ష ఏమి చూపిస్తుంది:**
- స్థానిక నిల్వ పాతబడిపోవచ్చనిపిస్తుంది
- మన యాప్ వెలుపల డేటా మార్పుల వాస్తవ పరిస్థితులను సిమ్యులేట్ చేస్తుంది
- నిల్వ స్థితి మరియు డేటా తాజా మధ్య ఉద్వేగాన్ని చూపిస్తుంది
**డేటా పాతడికపడటంతో సంబంధించిన సవాలులు:**
| సమస్య | కారణం | యూజర్ ప్రభావం |
|---------|-------|-------------|
| **పాత డేటా** | localStorage ఆటోమేటిగ కాకుండా ఎప్పటికీ గడువు లేదు | యూజర్లు పాత సమాచారం చూస్తారు |
| **సర్వర్ మార్పులు** | ఇతర యాప్‌లు/యూజర్లు అదే డేటాను మార్చటం | వివిధ ప్లాట్‌ఫారమ్‌లలో అసంయమనమైన దృశ్యాలు |
| **క్యాచ్ vs. వాస్తవం** | స్థానిక క్యాచ్ సర్వర్ స్థితితో సరిపోలడం లేదు | చెడు యూజర్ అనుభవం మరియు గందరగోళం |
**పరిష్కారం విధానం:**
"లోడ్ సమయంలో తాజా/రిఫ్రెష్" ప్యాటర్న్ అమలు చేస్తాము, ఇది నిల్వ ప్రయోజనాలతో పాటు తాజా డేటా అవసరాన్ని సమతౌల్యం చేస్తుంది. ఈ విధానం సునిశితమైన యూజర్ అనుభవాన్ని మరియు డేటా ఖచ్చితత్వాన్ని కాపాడుతుంది.
```mermaid
sequenceDiagram
participant U as వాడుకొనేవారు
participant A as యాప్
participant L as లోకల్ స్టోరేజ్
participant S as సర్వర్
U->>A: యాప్ తెరువు
A->>L: సేవ్ చేసిన స్థితిని లోడ్ చేయి
L-->>A: క్యాచ్డ్ డేటా తిరిగి ఇవ్వి
A->>U: UI ను తక్షణం చూపించు
A->>S: తాజా డేటా తెచ్చుకో
S-->>A: ప్రస్తుత డేటా తిరిగి ఇవ్వి
A->>L: క్యాశ్ ను నవీకరించు
A->>U: తాజా డేటాతో UI ను నవీకరించు
```
### టాస్క్: డేటా రిఫ్రెష్ సిస్టమ్ అమలు
వ్యవస్థాత్మకంగా సర్వర్ నుండి తాజా డేటాను తీసుకునే, అలాగే శాశ్వత స్థితి నిర్వహణ ప్రయోజనాలను ఉంచుకునే సిస్టమ్‌ను సృష్టిద్దాం.
**దశ 1: అకౌంట్ డేటా అప్‌డేటర్ సృష్టించండి**
```js
async function updateAccountData() {
const account = state.account;
if (!account) {
return logout();
}
const data = await getAccount(account.user);
if (data.error) {
return logout();
}
updateState('account', data);
}
```
**ఈ ఫంక్షన్ లాజిక్ అర్థం చేసుకోండి:**
- ఒక యూజర్ ప్రస్తుతం లాగిన్ అయినాడో లేదో (state.account ఉన్నదో లేదో) చక్రవ njëci
- సరైన సెషన్ లేనప్పుడు లాగ్ అవుట్‌కు రీడైరెక్ట్ చేయబడుతుంది
- ఉన్న `getAccount()` ఫంక్షన్ ద్వారా సర్వర్ నుండి తాజా అకౌంట్ డేటాను పొందుతుంది
- సర్వర్ లోపాలను శాంతిగా నిర్వహించి చెడైన సెషన్‌లపై లాగ్ అవుట్ చేస్తుంది
- నియంత్రిత అప్‌డేట్ సిస్టమ్ ద్వారా స్టేట్ అప్‌డేట్ చేస్తుంది
- `updateState()` ద్వారా ఆటోమేటిక్ localStorage నిల్వ ప్రయోగాన్ని ట్రిగ్గర్ చేస్తుంది
**దశ 2: డాష్‌బోర్డు రిఫ్రెష్ హ్యాండ్లర్ సృష్టించండి**
```js
async function refresh() {
await updateAccountData();
updateDashboard();
}
```
**ఈ రిఫ్రెష్ ఫంక్షన్ చేసిన పని:**
- డేటా రిఫ్రెష్ మరియు UI అప్‌డేట్ ప్రక్రియను సమన్వయ చేస్తుంది
- తాజా డేటా లోడ్ అయ్యే వరకు ప్రదర్శన అప్‌డేట్ చేయడంలో వేచి ఉంటుంది
- డాష్‌బోర్డు గరిష్ట తాజా సమాచారాన్ని చూపిస్తుంది
- డేటా నిర్వహణ మరియు UI అప్‌డేట్ల మధ్య కొందరు స్పష్టమైన విభజన కలిగి ఉంటుంది
**దశ 3: రూట్ సిస్టమ్‌తో అనుసంధానం**
రూట్ కాన్ఫిగరేషన్‌లో మార్పులు చేసి రిఫ్రెష్‌ను ఆటోమేటిగ ట్రిగ్గర్ చేయండి:
```js
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard', init: refresh }
};
```
**ఈ అనుసంధానం ఎలా పనిచేస్తుంది:**
- ప్రతి సారి డాష్‌బోర్డు రూట్ లోడ్ అయినపుడు రిఫ్రెష్ ఫంక్షన్ అమలవుతుంది
- యూజర్లు డాష్‌బోర్డుకు వెళ్లినప్పుడు ఎప్పుడూ తాజా డేటా ప్రదర్శించబడుతుంది
- ముందే ఉన్న రూట్ నిర్మాణాన్ని కాపాడుకుంటూ డేటా తాజాకరణను జోడిస్తుంది
- రూట్-ప్రత్యేక ప్రారంభీకరణ కోసం సुसంపన్నమైన నమూనాను అందిస్తుంది
**మీ డేటా రిఫ్రెష్ సిస్టమ్‌ను పరీక్షించండి:**
1. మీ బ్యాంకింగ్ యాప్‌లో లాగిన్ అవ్వండి
2. ముందు పేర్కొన్న curl కమాండ్‌ను నడపండి కొత్త ట్రాన్సాక్షన్ సృష్టించడానికి
3. డాష్‌బోర్డు పేజీని రిఫ్రెష్ చేయండి లేదా వెళ్ళి తిరిగి వచ్చేటప్పుడు
4. కొత్త ట్రాన్సాక్షన్ వెంటనే కనిపిస్తుందా అని ధృవీకరించండి
🎉 **సరైన సమతౌల్యం సాధించబడింది**: మీ యాప్ ఇప్పుడు శాశ్వత స్థితి సున్నితత్వాన్ని ప్రొఫెషనల్ సర్వర్ డేటా ఖచ్చితత్వంతో సమన్వయపరుస్తుంది!
## 📈 మీ స్టేట్ మేనేజ్మెంట్ నైపుణ్యాల కాలరేఖ
```mermaid
timeline
title వృత్తి మెయినేజ్‌మెంట్ ప్రయాణం
section సమస్య గుర్తింపు
State Issues Diagnosis
: సెషన్ లాస్ సమస్యలను గుర్తించండి
: పిడుగులుగా ఉన్న నవీకరణ సమస్యలను అర్థం చేసుకోండి
: ఆర్చిటెక్చరల్ అవసరాలను గుర్తించండి
section ఆర్కిటెక్చర్ పునాది
Centralized State Design
: ఏకీకృత స్టేట్ ఆబ్జెక్టులను సృష్టించండి
: నియంత్రిత నవీకరణ నమూనాలను అమలు చేయండి
: అమర్చుకోలేని సూత్రాలను స్థాపించండి
Predictable Updates
: Object.freeze() ఉపయోగాన్ని నైపుణ్యం సంపాదించండి
: డిబగ్‌కు అనుకూలమైన వ్యవస్థలను నిర్మించండి
: స్కేలబుల్ నమూనాలను సృష్టించండి
section నిలుపుదల దాటి
localStorage Integration
: JSON సీరియలైజేషన్ నిర్వహించండి
: ఆత్మచాలిత సమకాలీకరణ అమలు చేయండి
: సెషన్ కొనసాగింపును సృష్టించండి
Data Freshness Balance
: పాడుమనస్థితి సమస్యలను పరిష్కరించండి
: రిఫ్రెష్ మెకానిజంలను నిర్మించండి
: పనితీరు మరియు ఖచ్చితత్వాన్ని మెరుగుపరచండి
section వృత్తి నమూనాలు
Production-Ready Systems
: లోప నిర్వహణను అమలు చేయండి
: నిర్వహించదగిన ఆర్కిటెక్చర్లను సృష్టించండి
: పరిశ్రమ ఉత్తమ ఆచారాలకు అనుసరించండి
Advanced Capabilities
: ఫ్రేమ్‌వర్క్ ఏకీకరణకు సిద్ధంగా ఉండు
: కాంప్లెక్స్ స్టేట్ అవసరాలకు సిద్ధంగా ఉండు
: రియల్ టైమ్ ఫీచర్ల పునాది
```
**🎓 గ్రాడ్యుయేషన్ మైలురాయి**: మీరు Redux, Vuex ఇతర ప్రొఫెషనల్ స్టేట్ లైబ్రరీల వంటి సిద్ధాంతాలను ఉపయోగించి సంపూర్ణ స్టేట్ మేనేజ్మెంట్ సిస్టమ్‌ను విజయవంతంగా నిర్మించారు. ఈ నమూనాలు సులభమైన యాప్‌ల నుండి ఎంటర్ప్రైజ్ అప్లికేషన్స్ వరకు విస్తరించవచ్చు.
**🔄 తదుపరి స్థాయి సామర్థ్యాలు:**
- స్టేట్ మేనేజ్మెంట్ ఫ్రేమ్‌వర్క్లను (Redux, Zustand, Pinia) నేర్చుకోవడానికి సిద్ధంగా ఉన్నారు
- WebSockets తో రియల్-టైమ్ ఫీచర్ల అమలుకు సిద్ధంగా ఉన్నారు
- ఆఫ్‌లైన్-ఫస్ట్ ప్రోగ్రెసివ్ వెబ్ అప్లికేషన్‌లు నిర్మించడానికి సామర్థ్యవంతులు
- స్టేట్ మెషీన్లు మరియు ఆబ్జర్వర్స్ లాంటి పరిణత నమూనాల కోసం పునాది ఏర్పాట్లు చేశారు
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఏజెంట్ మోడ్ ను ఉపయోగించి ఈ కింద ఉన్న ఛాలెంజ్‌ను పూర్తిచేయండి:
**వివరణ:** బ్యాంకింగ్ యాప్ కోసం అంతంగా Undo/Redo ఫంక్షనాలిటీతో కూడిన పూర్తి స్టేట్ మేనేజ్మెంట్ సిస్టమ్‌ను రూపొందించండి. ఈ ఛాలెంజ్‌లో స్టేట్ హిస్టరీ ట్రాకింగ్, ఇమ్యూటబుల్ అప్‌డేట్లు, యూజర్ ఇంటర్‌ఫేస్ సమకాలీకరణ వంటి అధునాతన స్టేట్ మేనేజ్మెంట్ సిద్ధాంతాలు సాధించడం సాయపడుతుంది.
**ప్రాంప్ట్:** ఈ క్రింది అంశాలతో అభివృద్ధి చేసిన స్టేట్ మేనేజ్మెంట్ సిస్టమ్‌ను సృష్టించండి: 1) గత అన్ని స్టేట్లను ట్రాక్ చేసే స్టేట్ హిస్టరీ అర్రే, 2) Undo మరియు redo ఫంక్షన్లు గత స్థితులకు తిరిగి వెళ్ళగలిగే విధంగా, 3) డాష్‌బోర్డు పై undo/redo ఆపరేషన్లకు UI బటన్లు, 4) మెమంది సమస్యలు తలెత్తకుండా గరిష్టంగా 10 స్టేట్ల హిస్టరీ పరిమితి, 5) యూజర్ లాగ్ అవుట్ అయ్యే సమయంలో అభిజ్ఞడ్డంగా హిస్టరీ క్లీనప్. Undo/redo ఫంక్షనాలిటీ అకౌంట్ బ్యాలన్స్ మార్పులతో పని చేయాలి మరియు బ్రౌజర్ రిఫ్రెష్‌లపై నిలువుగా ఉండాలి.
[agent mode గురించి మరిన్ని వివరాలు](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ఇక్కడ తెలుసుకోండి.
## 🚀 ఛాలెంజ్: నిల్వ ఆప్టిమైజేషన్
మీ అమలు ఇప్పుడు యూజర్ సెషన్లు, డేటా రిఫ్రెష్ మరియు స్టేట్ మేనేజ్మెంట్‌ను సమర్థవంతంగా నిర్వహిస్తుంది. అయితే, మన ప్రస్తుత పద్ధతి నిల్వ సామర్ధ్యం మరియు కార్యాచరణ మధ్య సరైన సమతౌల్యం ఉన్నదా అనేదానిపై దృష్టి పెట్టండి.
చతురాయిన వజ్రాల మాస్టర్లు ముఖ్యమైన తుకములను మరియు వృథా పావన‌ల‌ను వేరుచేసినట్లే, సమర్థవంతమైన స్టేట్ మేనేజ్మెంట్ స్థిరంగా నిలవాల్సిన డేటా మరియు ఎప్పటికప్పుడు సర్వర్ నుంచి తాజా కావలసిన డేటాను గుర్తించాలి.
**ఆప్టిమైజేషన్ విశ్లేషణ:**
మీ ప్రస్తుత `localStorage` అమలును పరిశీలించి ఈ వ్యూహాత్మక ప్రశ్నలను పరిగణనలోకి తీసుకోండి:
- యూజర్ ఆథెంటికేషన్ నిర్వహించడానికి కనీసం ఏ సమాచారం అవసరమవుతుంది?
- ఏ డేటా తరచుగా మారుతుంది, కాబట్టి స్థానిక క్యాషింగ్ తక్కువగా ప్రయోజనం అందిస్తుంది?
- నిల్వ ఆప్టిమైజేషన్ ప్రార్థనలు పెరిగిన పనితీరును ఎలా మెరుగుపరుస్తుంది, కానీ యూజర్ అనుభవం తగ్గకుండా?
ఈ రకమైన ఆర్కిటెక్చర్ విశ్లేషణ ఫంక్షన్ మరియు సామర్థ్యాలపై దృష్టి పెట్టి పరిష్కారాలను ప్రేక్షకించిన అనుభవజ్ఞుల్ని వేరు చేస్తుంది.
**అమలు వ్యూహం:**
- నిలవవలసిన అత్యవసర డేటాను గుర్తించడం (బహుశా యూజర్ గుర్తింపు మాత్రమే)
- మీరు చేసిన `localStorage` అమలును విమర్శించి ఆ కేవలం కీలక సెషన్ డేటాను నిల్వ చేయడం
- డాష్‌బోర్డు సందర్శనల సమయంలో ఎల్లప్పుడూ తాజా డేటాను సర్వర్ నుండి లోడ్ చేయడం
- అనుకూలీకరించిన పద్ధతి అదే యూజర్ అనుభవాన్ని కాపాడుతున్నదన్నది పరీక్షించడం
**అత్యున్నత పరిశీలన:**
- పూర్తి అకౌంట్ డేటా నిల్వ చేయడం మరియు కేవలం ఆథెంటికేషన్ టోకెన్లు నిల్వ చేయడం మధ్య వ్యత్యాసాలకు సమీక్ష
- మీ నిర్ణయాలు మరియు కారణాలను მომავალ టీమ్ సభ్యులకు డాక్యుమెంటేషన్ చేయడం
ఈ ఛాలెంజ్ ద్వారా మీరు యూజర్ అనుభవం మరియు అప్లికేషన్ సామర్ధ్యం రెండింటినీ పరిగణించే ప్రొఫెషనల్ డెవలపర్‌ల మాదిరిగా ఆలోచించడం నేర్చుకుంటారు. వివిధ పద్ధతులతో ప్రయోగించడానికి సమయం తీసుకోండి!
## పోస్ట్-లెక్చర్ క్విజ్
[పోస్ట్-లెక్చర్ క్విజ్](https://ff-quizzes.netlify.app/web/quiz/48)
## అసైన్‌మెంట్
[“Add transaction” డైలాగ్ అమలు చేయండి](assignment.md)
అసైన్‌మెంట్ పూర్తి చేసిన తర్వాత ఉదాహరణ ఫలితం ఇలా ఉంటుంది:
![ఒక ఉదాహరణ “Add transaction” డైలాగ్ చూపిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/dialog.93bba104afeb79f1.te.png)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టం**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ద్వారా అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తమే అయినప్పటికీ, స్వయంచాలక అనువాదాలలో లోపాలు లేదా తప్పులున్న ఉండవచ్చు. మూల పత్రాన్ని దాని స్థానిక భాషలో అధికారం ఉన్న మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, వృత్తి నిపుణుల చేత అనువాదాన్ని సంప్రదించటం మేలు. ఈ అనువాదం వాడకంతో సంభవించే ఏ వైముఖ్యం లేదా తప్పుతరగతులకు మేము బాధ్యులు కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

164
translations/te/7-bank-project/4-state-management/assignment.md
Unescape View File

@ -0,0 +1,164 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "50a7783473b39a2e0f133e271a102231",
"translation_date": "2026-01-08T17:54:06+00:00",
"source_file": "7-bank-project/4-state-management/assignment.md",
"language_code": "te"
}
-->
# "ట్రాన్సాక్షన్ చేర్పు" డైలాగ్ అమలు చేయండి
## అవలోకనం
మీ బ్యాంకింగ్ యాప్ ఇప్పుడు స్థిరమైన స్టేట్ మేనేజ్‌మెంట్ మరియు డేటా నిల్వను కలిగి ఉంది, కానీ ఇది నిజమైన బ్యాంకింగ్ యాప్స్‌కు అవసరమైన ఒక ముఖ్యమైన ఫీచర్ లేకుండా ఉంది: ఉపయోగదారులు తమ స్వంత ట్రాన్సాక్షన్లు చేర్చగల సామర్ధ్యం. ఈ అసైన్‌మెంట్‌లో, మీరు ఇప్పటికే ఉన్న స్టేట్ మేనేజ్‌మెంట్ సిస్టంలో సజావుగా ఏర్పడే పూర్తి "ట్రాన్సాక్షన్ చేర్పు" డైలాగ్‌ను అమలు చేస్తారు.
ఈ అసైన్‌మెంట్ మీరు నాలుగు బ్యాంకింగ్ పాఠాల్లో నేను విషయాలను సామరస్యంగా తీసుకొస్తుంది: HTML టెంప్లేటింగ్, ఫారం హ్యాండ్లింగ్, API ఇంటిగ్రేషన్, మరియు స్టేట్ మేనేజ్‌మెంట్.
## అభ్యాస లక్ష్యాలు
ఈ అసైన్‌మెంట్ పూర్తి చేసిన తర్వాత మీరు:
- **సృష్టించండి** డేటా ఎంట్రీ కోసం వినియోగదారుకు అనుకూలమైన డైలాగ్ ఇంటర్‌ఫేస్
- **అమలు చేయండి** కీబోర్డ్ మరియు స్క్రీన్ రీడర్ మద్దతుతో సులభంగా ప్రాప్తించగల ఫారం డిజైన్
- **ఇన్టిగ్రేట్ చేయండి** మీ ఇప్పటికే ఉన్న స్టేట్ మేనేజ్‌మెంట్ సిస్టంలో కొత్త ఫీచర్లను
- **ప్రాక్టీస్ చేయండి** API కమ్యూనికేషన్ మరియు ఎర్రర్ హ్యాండ్లింగ్‌లో
- **వినియోగించండి** ఆధునిక వెబ్ డెవలప్‌మెంట్ నమూనాలను వాస్తవ ప్రపంచ ఫీచర్‌కు
## సూచనలు
### దశ 1: ట్రాన్సాక్షన్ చేర్పు బటన్
మీ డాష్‌బోర్డ్ పేజీలో ఒక "ట్రాన్సాక్షన్ చేర్పు" బటన్ **సృష్టించండి**, ఇది వినియోగదారులు సులభంగా కనుగొని ప్రాప్తించగలగాలి.
**అవసరాలు:**
- బటన్‌ను డాష్‌బోర్డ్లో తగిన లాజికల్ ప్రాంతంలో **స్థాపించండి**
- స్పష్టమైన, చర్య-ఆధారిత బటన్ టెక్స్ట్ **ఉపయోగించండి**
- మీ ఇప్పటికే ఉన్న UI డిజైన్‌తో బటన్ **స్టైల్ చేయండి**
- బటన్ కీబోర్డ్ ద్వారా సులభంగా ప్రాప్తించదగినదిగా ఉండాలని **ఖచ్చితంగా చూసుకోండి**
### దశ 2: డైలాగ్ అమలు
మీ డైలాగ్ అమలుకు ఈ రెండు మార్గాల్లో ఏదైనా ఒకదాన్ని ఎంచుకోండి:
**ఎంపిక A: విడిగా పేజీ**
- ట్రాన్సాక్షన్ ఫారం కోసం ఒక కొత్త HTML టెంప్లేట్ **సృష్టించండి**
- మీ రూటింగ్ సిస్టంలో ఒక కొత్త రూట్ **చేర్చండి**
- ఫారం పేజీకి మరియు బయటకు **నావిగేషన్ అమలు చేయండి**
**ఎంపిక B: మోడల్ డైలాగ్ (సిఫార్సు చేయబడింది)**
- డాష్‌బోర్డ్ నుండి తప్పకుండా వెళ్లకుండా జావాస్క్రిప్ట్ ద్వారా డైలాగ్‌ను చూపించి/దాచండి
- [`hidden` ప్రాపర్టీ](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) లేదా CSS తరగతులను ఉపయోగించి అమలు చేయండి
- సరైన ఫోకస్ మేనేజ్‌మెంట్‌తో సాఫీగా వినియోగదారుని అనుభవం సృష్టించండి
### దశ 3: సులభత్వ అమలు
మీ డైలాగ్ [మోడల్ డైలాగ్ సులభత్వ ప్రమాణాలు](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)ను తీరుగా అందించినదిగా ఉండాలని **ఖచ్చితంగా జాగ్రత్త వహించండి**:
**కీబోర్డ్ నావిగేషన్:**
- డైలాగ్‌ను మూసేయడానికి ఎస్కేప్ కీ మద్దతు ఇవ్వండి
- డైలాగ్ తెరిచినపుడు ఫోకస్‌ను అంతర్కొనబెట్టండి
- డైలాగ్ మూసినపుడు ట్రిగ్గర్ బటన్‌కు ఫోకస్ తిరిగి ఇవ్వండి
**స్క్రీన్ రీడ‌ర్ మద్ద‌తు:**
- తగిన ARIA లేబుల్స్ మరియు పాత్రలు జోడించండి
- డైలాగ్ తెరుచు/మూసే సంఘటనలను స్క్రీన్ రీడ‌ర్‌లకు ప్రకటించండి
- క్లియర్ ఫామ్ ఫీల్డ్ లేబుల్స్ మరియు ఎర్రర్ సందేశాలు అందించండి
### దశ 4: ఫారం సృష్టి
ట్రాన్సాక్షన్ డేటాను సేకరించే HTML ఫారం **డిజైన్ చేయండి**:
**అవసరమైన ఫీల్డ్స్:**
- **తేదీ**: ట్రాన్సాక్షన్ జరిగిన తేదీ
- **వివరణ**: ట్రాన్సాక్షన్ ఏ కోసం ఉంది
- **మొత్తం**: ట్రాన్సాక్షన్ విలువ (ఆదాయం కోసం ধనాత్మక, ఖర్చుల కోసం ঋణాత్మక)
**ఫారమ్ ఫీచర్లు:**
- సమర్పించే ముందు వినియోగదారుని ఇన్‌పుట్‌ని **సరిచూసుకోండి**
- తప్పు డేటాకి స్పష్టమైన ఎర్రర్ సందేశాలు **అందించండి**
- సహాయక ప్లేస్‌హోల్డర్ టెక్స్ట్ మరియు లేబుల్స్ **జోడించండి**
- మీ ఇప్పటికే ఉన్న డిజైన్‌తో సమంజసం **ఉండేలా స్టైల్ చేయండి**
### దశ 5: API ఇంటిగ్రేషన్
మీ ఫారమ్‌ను బ్యాక్‌ఎండ్ API తో **కనెక్ట్ చేయండి**:
**అమలు దశలు:**
- [సర్వర్ API స్పెసిఫికేషన్లు](../api/README.md) పరిశీలించండి సరైన ఎండ్పాయింట్ మరియు డేటా ఫార్మాట్ కోసం
- మీ ఫారమ్ ఇన్‌పుట్‌ల నుండి JSON డేటా **సృష్టించండి**
- ఉచిత ఎర్రర్ హ్యాండ్లింగ్‌తో API కు డేటా పంపండి
- విజయవంతమవడం / విఫలమవడం సందేశాలను వినియోగదారుకు **ప్రదర్శించండి**
- నెట్‌వర్క్ సమస్యలను సరైన పద్ధతిలో **నిర్వహించండి**
### దశ 6: స్టేట్ మేనేజ్‌మెంట్ ఇంటిగ్రేషన్
కొత్త ట్రాన్సాక్షన్‌తో మీ డాష్‌బోర్డ్‌ను **అప్డేట్ చేయండి**:
**ఇంటిగ్రేషన్ అవసరాలు:**
- విజయవంతమైన ట్రాన్సాక్షన్ చేర్పు తర్వాత ఖాతా డేటాను **రీఫ్రెష్ చేయండి**
- పేజీ రీలోడ్ అవసరం లేకుండా డాష్‌బోర్డ్ ప్రదర్శనను **అప్డేట్ చేయండి**
- కొత్త ట్రాన్సాక్షన్ వెంటనే కనిపించేందుకు **ఖచ్చితత్వం వహించండి**
- మొత్తం ప్రాసెస్‌లో సరైన స్టేట్ అనుసరణ **కాలం నడవండి**
## సాంకేతిక స్పెసిఫికేషన్లు
**API ఎండ్పాయింట్ వివరాలు:**
[సర్వర్ API డాక్యుమెంటేషన్](../api/README.md) లో దొరుకుతుంది:
- ట్రాన్సాక్షన్ డేటా కోసం అవసరమైన JSON ఫార్మాట్
- HTTP పద్ధతి మరియు ఎండ్పాయింట్ URL
- సమాధానం సూచించబడిన ఫార్మాట్
- లోపం స్పందన నిర్వహణ
**అంచనా ఫలితం:**
ఈ అసైన్‌మెంట్ పూర్తి చేసిన తరువాత, మీ బ్యాంకింగ్ యాప్ పూర్తి ఉపయోగకరమైన "ట్రాన్సాక్షన్ చేర్పు" ఫీచర్‌ను కలిగి ఉండాలి, ఇది ప్రొఫెషనల్ రూపం మరియు ప్రవర్తన కలిగి ఉంటుంది:
![ఉదాహరణ "ట్రాన్సాక్షన్ చేర్పు" డైలాగ్ ను చూపిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/dialog.93bba104afeb79f1.te.png)
## మీ అమలు పరీక్షించడం
**ప్రాయోగిక పరీక్ష:**
1. "ట్రాన్సాక్షన్ చేర్పు" బటన్ స్పష్టంగా కనపడుతుందా మరియు సులభంగా ప్రాప్తించగలదా **నిర్ధారించండి**
2. డైలాగ్ సరిగ్గా తెరవబడుతుందా మరియు మూసబడుతుందా **పరీక్షించండి**
3. అన్ని అవసరమైన ఫీల్డ్స్ కోసం ఫారమ్ వాలిడేషన్ పని చేస్తున్నదా **ధృవీకరించండి**
4. విజయవంతమైన ట్రాన్సాక్షన్లు వెంటనే డాష్‌బోర్డ్‌లో కనిపిస్తున్నాయా **పరిశీలించండి**
5. తప్పు డేటా మరియు నెట్‌వర్క్ సమస్యల కోసం ఎర్రర్ హ్యాండ్లింగ్ పనిచేస్తుందా **ఖాళీ చేయండి**
**సులభత్వ పరీక్ష:**
1. మొత్తం ఫ్లోలో కేవలం కీబోర్డ్ ఉపయోగిస్తూ నావిగేట్ చేయండి
2. స్క్రీన్ రీడర్‌తో పరీక్షించి సరైన ప్రకటనలు వస్తున్నాయని చూడు
3. ఫోకస్ మేనేజ్‌మెంట్ సరిగ్గా పని చేస్తుందా తనిఖీ చేయండి
4. అన్ని ఫారమ్ వస్తువులకు తగిన లేబుల్స్ ఉన్నాయా నిర్ధారించండి
## అంచనా ప్రమాణాలు
| ప్రమాణం | ఉదాత్తమైనది | సరిపోతుంది | మెరుగుదల అవసరం |
| -------- | --------- | -------- | ----------------- |
| **ఫంక్షనాలిటీ** | ట్రాన్సాక్షన్ చేర్పు ఫీచర్ అద్భుతమైన వినియోగదార అనుభవంతో సజావుగా పని చేస్తుంది మరియు పాఠాల నుండి ఉత్తమ ఆచారాలని పాటిస్తుంది | ట్రాన్సాక్షన్ చేర్పు ఫీచర్ సరిగ్గా పని చేస్తుంది కానీ కొన్ని ఉత్తమ ఆచారాలను పాటించకపోవచ్చు లేదా చిన్న వినియోగ సౌలభ్య సమస్యలు ఉండవచ్చు | ట్రాన్సాక్షన్ చేర్పు ఫీచర్ భాగస్వామ్యంగా పనిచేస్తుంది లేదా గణనీయమైన వినియోగ సమస్యలు కలిగి ఉంటుంది |
| **కోడ్ నాణ్యత** | కోడ్ బాగా వాడుకలో ఉన్న నమూనాలను అనుసరిస్తుంది, సరైన ఎర్రర్ హ్యాండ్లింగ్ కలిగి ఉంది, మరియు ఇప్పటికే ఉన్న స్టేట్ మేనేజ్‌మెంట్‌తో సజావుగా ఇంటిగ్రేట్ అవుతుంది | కోడ్ పనిచేస్తుంది కానీ संगठनలో కొన్ని సమస్యలు ఉండవచ్చు లేదా ఇప్పటికే ఉన్న కోడ్‌బేస్‌తో అసంపూర్ణ ప్యాటర్న్లు ఉండవచ్చు | కోడ్‌లో ప్రధాన నిర్మాణ సమస్యలు ఉన్నాయి లేదా ఇప్పటికే ఉన్న నమూనాలతో బాగు అనుసంధానం లేదు |
| **సులభత్వం** | పూర్తి కీబోర్డ్ నావిగేషన్ మద్దతు, స్క్రీన్ రీడర్ మాతృకత, మరియు WCAG మార్గదర్శకాలు పాటించి చాలా మంచి ఫోకస్ నిర్వహణతో | ప్రాథమిక సులభత్వ లక్షణాలు అమలు అయి ఉండవచ్చు కానీ కొంత కీబోర్డ్ నావిగేషన్ లేదా స్క్రీన్ రీడర్ మద్దతు లేకపోవచ్చు | ఎలాంటి లేదా చాలా తక్కువ సులభత్వ పరిగణనలు అమలులో ఉన్నాయి |
| **వినియోగదార అనుభవం** | సహజమైన, శ్రుష్టించబడిన ఇంటర్‌ఫేస్ స్పష్టమైన ఫీడ్‌బ్యాక్, సాఫీ ఇంటరాక్షన్లు మరియు ప్రొఫెషనల్ రూపాన్ని కలిగి ఉంది | మంచి వినియోగ అనుభవం కానీ ఫీడ్‌బ్యాక్ లేదా విజువల్ డిజైన్‌లో కొన్ని మెరుగుదలకు స్థలాలు ఉన్నాయి | అర్ధం వచ్చే విధంగా కాని ఇంటర్‌ఫేస్ లేదా వినియోగదారుని ఫీడ్‌బ్యాక్ లేకుండా ప్రారంబమైన అనుభవం |
## అదనపు సవాళ్లు (ఐచ్ఛికం)
మూలभૂત అవసరాలను పూర్తి చేసిన తర్వాత, ఈ మెరుగుదలలను పరిగణించండి:
**మెరుగైన ఫీచర్లు:**
- ట్రాన్సాక్షన్ విభాగాలను (భోజనం, రవాణా, వినోదం, మరియు այլն) **జోడించండి**
- రియల్‌టైం ఫీడ్‌బ్యాక్‌తో ఇన్‌పుట్ ధృవీకరణ **అమలు చేయండి**
- పవర్ యూజర్ల కోసం కీబోర్డ్ షార్ట్‌కట్స్ **సృష్టించండి**
- ట్రాన్సాక్షన్ సవరించడం మరియు తీసివేత సామర్ధ్యాలు **చేర్చండి**
**అధునాతన ఇంటిగ్రేషన్:**
- ఇటీవల చేర్చిన ట్రాన్సాక్షన్లు కోసం undo కార్యాచరణను **అమలు చేయండి**
- CSV ఫైళ్ల నుండి బల్క్ ట్రాన్సాక్షన్ దిగుమతిని **చేర్చండి**
- ట్రాన్సాక్షన్ శోధన మరియు వడపోత సామర్ధ్యాలను **సృష్టించండి**
- డేటా ఎగుమతి కార్యాచరణను **అమలు చేయండి**
ఇవే ఐచ్ఛిక ఫీచర్లు మీకు అధిక స్థాయి వెబ్ డెవలప్‌మెంట్ కాన్సెప్ట్‌లలో ప్రాక్టీస్ చేయడానికీ, మరింత పూర్తి బ్యాంకింగ్ అప్లికేషన్ సృష్టించడానికి సహాయపడతాయి!
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**నిరాకరణ**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ఉపయోగపడేందుకు ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాల్లో తప్పులు లేదా లోపాలు ఉండవచ్చు. మూల డాక్యుమెంట్ దాని స్థానిక భాషలో అధికారికమైన మూలంగా భావించబడాలి. కీలక సమాచారం కోసం, నిపుణుల మానవ అనువాదాన్ని సూచిస్తాము. ఈ అనువాదం వలన ఏర్పడే ఏవైనా అపార్థాలు లేదా తప్పుదిద్దుబాట్లకు మేము బాధ్యులేము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

37
translations/te/7-bank-project/README.md
Unescape View File

@ -0,0 +1,37 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "830359535306594b448db6575ce5cdee",
"translation_date": "2026-01-08T11:30:21+00:00",
"source_file": "7-bank-project/README.md",
"language_code": "te"
}
-->
# :dollar: బ్యాంక్‌ను నిర్మించండి
ఈ ప్రాజెక్టులో, మీరు ఒక కల్పిత బ్యాంక్‌ను ఎలా నిర్మించాలో నేర్చుకుంటారు. ఈ పాఠాలు వెబ్ యాప్‌ను ఎలా అమర్చాలి, రూట్లు అందించాలి, ఫారమ్‌లు నిర్మించాలి, స్థితిని నిర్వహించాలి, మరియు బ్యాంక్ డేటాను పొందగల API నుండి డేటాను ఎలా పొందాలి అనే సూచనలు కలిగి ఉన్నాయి.
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.te.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.te.png) |
|--------------------------------|--------------------------------|
## పాఠాలు
1. [వెబ్ యాప్‌లో HTML టెంప్లేట్లు మరియు రూట్లు](1-template-route/README.md)
2. [లాగిన్ మరియు రిజిస్ట్రేషన్ ఫారమ్ నిర్మాణం](2-forms/README.md)
3. [డేటాను పొందడం మరియు ఉపయోగించే విధానాలు](3-data/README.md)
4. [స్థితి నిర్వహణా సిధ్ధాంతాలు](4-state-management/README.md)
### క్రెడిట్స్
ఈ పాఠాలు :hearts: తో [యోహాన్ లాసోర్సా](https://twitter.com/sinedied) రాశారు.
మీకు ఈ పాఠాల్లో ఉపయోగించిన [సర్వర్ API](/7-bank-project/api/README.md) ఎలా నిర్మించాలో నేర్చుకోవాలనుకుంటే, మీరు [ఈ వీడియోల సిరీస్](https://aka.ms/NodeBeginner) (ప్రత్యేకంగా 17 నుండి 21 వరకు వీడియోలు) ను అనుసరించవచ్చు.
మీరు [ఈ ఇంటరాక్టివ్ లెర్న్ ట్యుటోరియల్](https://aka.ms/learn/express-api) ను కూడా చూడవచ్చు.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అంగీకారం**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరిగ్గా అనువదించేందుకు ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా అస్థిరతలు থাকতে అవకాశం ఉంది. స్వదేశీ భాషలో ఉన్న అసలు పత్రాన్ని ప్రామాణిక మూలంగా పరిగణించాలి. కీలక సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదం అవసరం. ఈ అనువాదం ఉపయోగంలో ఏర్పడే ఎటువంటి అపార్థాలు లేదా తప్పు అర్ధాల కోసం మేము బాధ్యులు కారు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

50
translations/te/7-bank-project/api/README.md
Unescape View File

@ -0,0 +1,50 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9884f8c8a61cf56214450f8b16a094ce",
"translation_date": "2026-01-08T16:39:16+00:00",
"source_file": "7-bank-project/api/README.md",
"language_code": "te"
}
-->
# బ్యాంక్ ఏపీఐ
> [Node.js](https://nodejs.org) + [Express](https://expressjs.com/)తో నిర్మించబడిన బ్యాంక్ ఏపీఐ.
ఈ ఏపీఐ ఇప్పటికే మీ కోసం నిర్మించబడింది మరియు వ్యాయామ భాగం కాదు.
కానీ, మీరు ఇలాంటి ఏపీఐని ఎలా నిర్మించాలో తెలుసుకోవాలనుకుంటే మీరు ఈ వీడియోల సిరీస్‌ను అనుసరించవచ్చు: https://aka.ms/NodeBeginner (వీడియోలు 17 నుండి 21 ఈ ఏపీఐని నేరుగా కవర్ చేస్తాయి).
మీరు ఈ ఇంటరాక్టివ్ ట్యూటోరియల్‌ను కూడా చూడవచ్చు: https://aka.ms/learn/express-api
## సర్వర్ నడుపుట
మీ దగ్గర [Node.js](https://nodejs.org) ఇన్స్టాల్ అయి ఉన్నదని నిర్ధారించుకోండి.
1. ఈ రెపోను గిట్ క్లోన్ చేసుకోండి [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
2. మీ టెర్మినల్ ఓపెన్ చేసి `Web-Dev-For-Beginners/7-bank-project/api` ఫోల్డర్ వద్దకి వెళ్లండి
2. `npm install` రన్ చేసి ప్యాకేజీలు ఇన్స్టాల్ అయ్యేందుకు వేచి ఉండండి(మీ ఇంటర్నెట్ కనెక్షన్ గుణాత్మకతపై ఆధారపడి కొంత సమయం పట్టవచ్చు).
3. ఇన్స్టలేషన్ పూర్తయిన తర్వాత, `npm start` రన్ చేయండి మరియు మీరు సిద్ధంగా ఉన్నారు.
సర్వర్ పోర్ట్ `5000` మీద వినిపించటాన్ని ప్రారంభిస్తుంది.
*ఈ సర్వర్ ప్రధాన బ్యాంక్ యాప్ సర్వర్ టెర్మినల్ పోర్ట్ `3000`తో పాటు నడుస్తుంది, దానిని మూసివేయవద్దు.*
> గమనిక: అన్ని ఎంట్రీలు మెమరీలోనే నిల్వ ఉంటాయి మరియు నిల్వ చేయబడవు, కాబట్టి సర్వర్ ఆపినప్పుడు అన్ని డేటా పోతుంది.
## ఏపీఐ వివరాలు
రూట్ | వివరణ
---------------------------------------------|------------------------------------
GET /api/ | సర్వర్ సమాచారం పొందండి
POST /api/accounts/ | ఖాతా సృష్టించండి, ఉదా: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
GET /api/accounts/:user | పేర్కొన్న ఖాతా కోసం అన్ని డేటాను పొందండి
DELETE /api/accounts/:user | పేర్కొన్న ఖాతాను తొలగించండి
POST /api/accounts/:user/transactions | ట్రాన్సాక్షన్ జోడించండి, ఉదా: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
DELETE /api/accounts/:user/transactions/:id | పేర్కొన్న ట్రాన్సాక్షన్‌ను తొలగించండి
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**హచ్చకములు**:
ఈ పత్రం AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వం కోసం ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా అనిశ్చితులు ఉండవచ్చు. అసలు పత్రం దాని స్వదేశీ భాషలో ఉన్నదే అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారానికి, నిపుణుల మానవ అనువాదాన్ని సూచిస్తున్నాము. ఈ అనువాదం వాడడంతో కలిగే ఏవైనా అపార్థాలు లేదా తప్పుదోషాల పట్ల మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

29
translations/te/7-bank-project/solution/README.md
Unescape View File

@ -0,0 +1,29 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
"translation_date": "2026-01-08T18:06:46+00:00",
"source_file": "7-bank-project/solution/README.md",
"language_code": "te"
}
-->
# బ్యాంక్ యాప్
> బ్యాంక్ యాప్ ప్రాజెక్ట్‌కు ఉదాహరణ పరిష్కారం, వనిల్లా HTML5, CSS మరియు JavaScript‌తో నిర్మించబడింది (ఏ ఫ్రేమ్‌వర్క్‌లు లేదా లైబ్రరీలు ఉపయోగించలేదు).
## యాప్ నడిపించడం
మొదట మీరు [API సర్వర్](../api/README.md) నడుస్తున్నదని నిర్ధారించుకోండి.
ఏ వబ్ సర్వర్ అయినా యాప్ నడపడానికి ఉపయోగించవచ్చు, కానీ మీరు API నడిపించడానికి [Node.js](https://nodejs.org) ఇన్స్టాల్ చేసుకున్నట్లు ఉండాలి, అందువల్ల మీరు:
1. ఈ రిపోను Git clone చేయండి.
2. ఒక టర్మినల్ తెరవండి, ఈ డైరెక్టరీకి వెళ్లండి, తర్వాత `npx lite-server .` ఆజ్ఞను నడిపించండి. ఇది పోర్ట్ `3000` పై డెవలప్‌మెంట్ వెబ్ సర్వర్ నడిపిస్తుంది.
3. యాప్ నడపడానికి బ్రౌజర్‌లో `http://localhost:3000` ను తెరవండి.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**నిరాకరణ**:
ఈ పత్రికను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరిగా అనువదించడంలో ప్రయత్నిస్తున్నా, ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా పొరపాట్లు ఉండవచ్చు. మూల పత్రికను దాని స్వదేశీ భాషలోనే అధికారిక మూలం గా పరిగణించాలి. కీలకమైన సమాచారం కోసం ప్రొఫెషనల్ మానవ అనువాదాన్ని సిఫార్సు చేస్తున్నాము. ఈ అనువాదం వలన ఏవైనా అపార్థాలు లేదా తప్పుదోవలకు మేము బాధ్యులం కాదము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

639
translations/te/8-code-editor/1-using-a-code-editor/README.md
Unescape View File

@ -0,0 +1,639 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
"translation_date": "2026-01-08T13:13:15+00:00",
"source_file": "8-code-editor/1-using-a-code-editor/README.md",
"language_code": "te"
}
-->
# కోడ్ ఎడిటర్ ఉపయోగించడం: VSCode.dev లో నైపుణ్యం పొందడం
*ది మ్యాట్రిక్స్* లో నీఓ డిజిటల్ ప్రపంచాన్ని యాక్సెస్ చేసేందుకు భారీ కంప్యూటర్ టర్మినల్ లోకి చేరాల్సి వచ్చినప్పుడు గుర్తుందా? ఈరోజు వెబ్ డెవలప్మెంట్ టూల్స్ విరుచుకొన్న కథాజల్లకే – ఎప్పుడైనా ఎక్కడైనా పొందగల శక్తివంతమైన సామర్థ్యాలు. VSCode.dev అనేది బ్రౌజర్-ఆధారిత కోడ్ ఎడిటర్, ఇది ఇంటర్నెట్ కనెక్షన్ ఉన్న ఏ డివైస్ కి అయినా ప్రొఫెషనల్ డెవలప్మెంట్ టూల్స్ తెస్తుంది.
ప్రింటింగ్ ప్రెస్ పుస్తకాలను ప్రతి ఒక్కరి వద్దకు చేరువ చేస్తుందని మठాలు లో ఉండేవారికే కాదు, అలా VSCode.dev కోడింగ్ ను ప్రజాస్వామ్యంగా చేస్తుంది. మీరు లైబ్రరీ కంప్యూటర్, పాఠశాల ప్రయోగశాల లేదా మీరు బ్రౌజర్ యాక్సెస్ ఉన్న ఎక్కడైనా ప్రాజెక్టులపై పని చేయవచ్చు. ఇన్‌స్టాలేషన్లు అవసరం లేదు, "నా ప్రత్యేక సెటప్ కావాలి" అనే పరిమితులు లేవు.
ఈ పాఠం చివరికి, మీరు VSCode.dev ను ఎలా నావిగేట్ చేయాలో, GitHub రిపోజిటరీలను మీ బ్రౌజర్ లోనే నేరుగా తెరవడం ఎలా చేయాలో, మరియు వెర్షన్ కంట్రోల్ కోసం Git ను ఉపయోగించడం ఎలా చేయాలో అర్ధం చేసుకుంటారు – ఇవి ప్రతిరోజూ ప్రొఫెషనల్ డెవలపర్ల యాదృచ్ఛిక నైపుణ్యాలు.
## ⚡ మీకు వచ్చే 5 నిమిషాల్లో చేయగల పని
**వ్యస్త డెవలపర్ల కోసం క్విక్ స్టార్ట్ మార్గం**
```mermaid
flowchart LR
A[⚡ 5 నిమిషాలు] --> B[విజిట్ చేయండి vscode.dev]
B --> C[GitHub ఖాతాను కనెక్ట్ చేయండి]
C --> D[ఏదైనా రిపోజిటరీని తెరవండి]
D --> E[తక్షణమే ఎడిటింగ్ ప్రారంభించండి]
```
- **మినట్ 1**: [vscode.dev](https://vscode.dev) కి వెళ్లండి - ఇన్‌స్టాలేషన్ అవసరం లేదు
- **మినట్ 2**: GitHub తో సైన్ ఇన్ అయి మీ రిపోజిటరీలను కనెక్ట్ చేసుకోండి
- **మినట్ 3**: URL ట్రిక్కు ప్రయత్నించండి: ఏ రిపో URL లోనైనా `github.com` ని `vscode.dev/github` గా మార్చండి
- **మినట్ 4**: కొత్త ఫైల్ సృష్టించండి మరియు సింటాక్స్ హైలైటింగ్ ఆటోమేటిగ్గా ఎలా పని చేస్తుందో చూడండి
- **మినట్ 5**: ఒక మార్పు చేసి దాన్ని సోర్స్ కంట్రోల్ ప్యానెల్ ద్వారా కమిట్ చేయండి
**క్విక్ టెస్ట్ URL**:
```
# Transform this:
github.com/microsoft/Web-Dev-For-Beginners
# Into this:
vscode.dev/github/microsoft/Web-Dev-For-Beginners
```
**ఇది ఎందుకు ముఖ్యమో**: 5 నిమిషాల్లో, మీరు ఎక్కడైనా ప్రొఫెషనల్ టూల్స్ తో కోడింగ్ స్వేచ్ఛను అనుభవిస్తారు. ఇది డెవలప్మెంట్ భవిష్యత్తు – అందుబాటులో ఉన్నది, శక్తివంతమైనది మరియు తక్షణమే ప్రారంభించగలిగేది.
## 🗺️ క్లౌడ్-ఆధారిత డెవలప్మెంట్ ద్వారా మీ అభ్యాస ప్రయాణం
```mermaid
journey
title స్థానిక సెట్‌అప్ నుండి క్లౌడ్ డెవలప్మెంట్ నైపుణ్యం
section ప్లాట్‌ఫాం అర్థం చేసుకోవడం
వెబ్ ఆధారిత ఎడిటింగ్ కనుగొనండి: 4: You
GitHub పరోక్షంలో కనెక్ట్ అవ్వండి: 6: You
ఇంటర్‌ఫేస్ నావిగేషన్‌ లో నైపుణ్యం పొందండి: 7: You
section ఫైల్ నిర్వహణ నైపుణ్యాలు
ఫైళ్లను సృష్టించండి మరియు ఏర్పాటు చేయండి: 5: You
సింటాక్స్ హైలైటింగ్‌తో సవరించండి: 7: You
ప్రాజెక్ట్ నిర్మాణాల్లో నావిగేట్ చేయండి: 8: You
section వెర్షన్ నియంత్రణ నైపుణ్యం
Git ఇంటిగ్రేషన్ అర్థం చేసుకోండి: 6: You
కమిట్ వర్క్‌ఫ్లోలను అనుభవించండి: 8: You
సహకార నమూనాల్లో నైపుణ్యం పొందండి: 9: You
section వృత్తిపరమైన అనుకూలీకరణ
శక్తివంతమైన ఎక్స్‌టెన్షన్లను సంస్థాపించండి: 7: You
అభివృద్ధి వాతావరణాన్ని కాన్ఫిగర్ చేయండి: 8: You
వ్యక్తిగత వర్క్‌ఫ్లోలను నిర్మించండి: 9: You
```
**మీ ప్రయాణ గమ్యం**: ఈ పాఠం చివరికి, మీరు ఏ డివైస్ నుండైనా పని చేసే ప్రొఫెషనల్ క్లౌడ్ డెవలప్మెంట్ ఎన్‌విరాన్‌మెంట్ లో నైపుణ్యం పొందుతారు, ఇది ప్రముఖ టెక్ కంపెనీల డెవలపర్లు ఉపయోగించే అదే టూల్స్‌తో కోడింగ్ చేయడానికి అనుమతిస్తుంది.
## మీరు నేర్చుకునే అంశాలు
మనము కలసి ఈ మార్గాన్ని వెళ్తే, మీరు చేయగలిగేది:
- VSCode.dev ని మీ రెండవ ఇంటిలా నావిగేట్ చేయడం – ఎటూ తప్పకుండా కోరుకున్నారు క్షేత్రాలన్నింటిని కనుగొనడం
- ఏ GitHub రిపాజిటరిని మీ బ్రౌజర్ లో తెరవడం మరియు వెంటనే ఎడిట్ చేయడం (ఇది మాయాజాలంలా ఉంటుంది!)
- Git ను ఉపయోగించి మీ మార్పులను ట్రాక్ చేయడం మరియు ఒక ప్రొఫెషనల్ లాగా ప్రగతిని సురక్షితం చేయడం
- కోడింగ్ వేగంగా మరియు మజాగా మారుస్తున్న ఎక్స్టెన్షన్లతో మీ ఎడిటర్ ని శక్తివంతం చేయడం
- ప్రాజెక్ట్ ఫైళ్ళను సృష్టించి, ఆర్గనైజ్ చేయడం
## మీకు అవసరమయ్యేది
అవసరాలు సూటిగా ఉన్నాయి:
- ఒక ఉచిత [GitHub ఖాతా](https://github.com) (తయారు లేకపోతే మేము సాయపడతాము)
- వెబ్ బ్రౌజర్లపై ప్రాథమిక పరిజ్ఞానం
- GitHub బేసిక్స్ పాఠం ఉపయోగకరమైన నేపథ్యం ఇస్తుంది, కానీ తప్పనిసరి కాదు
> 💡 **GitHub కొత్తవారా?** ఖాతా సృష్టించడం ఉచితం మరియు కొన్ని నిమిషాల్లో పూర్తి అవుతుంది. ఎలా లైబ్రరీ కార్డు ప్రపంచవ్యాప్తంగా పుస్తకాల యాక్సెస్ ఇస్తుందో, GitHub ఖాతా ఇంటర్నెట్ లోని కోడ్ రిపాజిటరీలకు దారులు తెరుస్తుంది.
## 🧠 క్లౌడ్ డెవలప్మెంట్ ఈకోసిస్టమ్ సమీక్ష
```mermaid
mindmap
root((VSCode.dev మాస్టరీ))
Platform Benefits
Accessibility
డివైస్ స్వతంత్రత
ఇన్‌స్టాలేషన్ అవసరం లేదు
తక్షణ నవీకరణలు
సార్వత్రిక ప్రాప్యత
Integration
GitHub కనెక్షన్
రిపాజిటరీ సింక్
సెట్టింగ్స్ స్థిరత్వం
సహకారం సిద్ధంగా ఉన్నది
Development Workflow
ఫైల్ నిర్వహణ
ప్రాజెక్ట్ నిర్మాణం
సింటాక్స్ హైలైటింగ్
బహుళ-ట్యాబ్ ఎడిటింగ్
ఆటో-సేవ్ ఫీచర్లు
వెర్షన్ కంట్రోల్
Git ఇంటిగ్రేషన్
కమిట్ వర్క్‌ఫ్లోలు
బ్రాంచి నిర్వహణ
మార్పుల ట్రాకింగ్
Customization Power
ఎక్స్‌టెన్షన్స్ ఎకోసిస్టమ్
ఉత్పాదకత సాధనాలు
భాషా మద్దతు
థీమ్ ఎంపికలు
అనుకూల షార్ట్‌కట్స్
Environment Setup
వ్యక్తిగత ప్రాధాన్యతలు
వర్క్‌స్పేస్ కాన్ఫిగరేషన్
సాధన సమ్మేళనం
వర్క్‌ఫ్లో మెరుగుదల
Professional Skills
పరిశ్రమా ప్రమాణాలు
వెర్షన్ కంట్రోల్
కోడ్ నాణ్యత
సహకారం
డాక్యుమెంటేషన్
Career Readiness
రిమోట్ పని
క్లౌడ్ డెవలప్మెంట్
బృంద ప్రాజెక్టులు
ఓపెన్ సోర్స్
```
**ముఖ్య సూత్రం**: క్లౌడ్-ఆధారిత డెవలప్మెంట్ ఎన్‌విరాన్‌మెంట్‌లు కోడింగ్ యొక్క భవిష్యత్తును సూచిస్తాయి – ప్రొఫెషనల్ గ్రేడ్ టూల్స్ అందుబాటులో ఉండటం, సహకారాత్మకంగా ఉండటం, మరియు ప్లాట్‌ఫారమ్-స్వతంత్రంగా ఉండటం.
## వెబ్-ఆధారిత కోడ్ ఎడిటర్ల ప్రాముఖ్యత
ఇంటర్నెట్ ముందు, వివిధ విశ్వవిద్యాలయాలలో శాస్త్రవేత్తలు సులభంగా పరిశోధన పత్రాలను పంచుకునేందుకు వీలు ఉండేది కాదు. ఆ తరువాత 1960లలో ARPANET వచ్చింది, ఇది కొంప్యూటర్లను దూరాలుగా కనెక్ట్ చేసింది. వెబ్-ఆధారిత కోడ్ ఎడిటర్లు అదే సూత్రం అనుసరిస్తాయి – మీ భౌతిక స్థలమేమీ, ఏ డివైస్ వాడుతున్నా శక్తివంతమైన టూల్స్ అందుబాటులో చేయడం.
కోడ్ ఎడిటర్ మీ అభివృద్ధి వర్క్‌స్పేస్ గా పనిచేస్తుంది, అక్కడ మీరు కోడ్ ఫైళ్లను రాయడం, సరిచూడడం మరియు ఆర్గనైజ్ చేయడం చేస్తారు. సాదా టెక్స్ట్ ఎడిటర్ల కన్నా వేరుగా, ప్రొఫెషనల్ కోడ్ ఎడిటర్లు సింటాక్స్ హైలైటింగ్, దోష గుర్తింపు మరియు ప్రాజెక్ట్ నిర్వహణ ఫీచర్‌లు అందిస్తాయి.
VSCode.dev ఈ సామర్థ్యాలను మీ బ్రౌజర్ కి వస్తుంది:
**వెబ్-ఆధారిత ఎడిటింగ్ లాభాలు:**
| ఫీచర్ | వివరణ | ఆచరణాత్మక లాభం |
|---------|-------------|----------|
| **ప్లాట్‌ఫారమ్ స్వతంత్రత** | ఏ బ్రౌజర్ ఉన్న ఏ డివైస్ పై వాడవచ్చు | విభిన్న కంప్యూటర్లతో సజావుగా పనిచేయచ్చు |
| **ఇన్‌స్టాలేషన్ అవసరం లేదు** | వెబ్ URL ద్వారా యాక్సెస్ | సాఫ్ట్‌వేర్ ఇన్‌స్టాలేషన్ పరిమితులను అధిగమించండి |
| **ఆటోమేటిక్ అప్‌డేట్లు** | ఎప్పుడూ తాజా వెర్షన్ పని చేస్తుంది | కొత్త ఫీచర్లను మాన్యువల్ అప్‌డేట్ లేని పొందండి |
| **రిపాజిటరి ఇంటిగ్రేషన్** | GitHub కి నేరుగా కనెక్షన్ | స్థానిక ఫైల్ నిర్వహణ లేకుండా కోడ్ ఎడిట్ చేయండి |
**ప్రాక్టికల్ ప్రభావాలు:**
- వేరువేరు యావత్తు వాతావరణాలలో పని కొనసాగింపు
- ఆపరేటింగ్ సిస్టమ్ పై సంబంధం లేకుండా సరికొత్త ఇంటర్ఫేస్
- తక్షణ సహకారం
- స్థానిక నిల్వ అవసరాలు తగ్గాయి
## VSCode.dev ని అన్వేషించడం
మేరీ క్యూనీ యొక్క ప్రయోగశాల సరళమైన స్థలంలో అధిక శక్తివంతమైన పరికరాలు ఉన్నట్టు, VSCode.dev కూడా ప్రొఫెషనల్ డెవలప్మెంట్ టూల్స్ ని బ్రౌజర్ ఇంటర్ఫేస్‌లో సంక్రమిస్తుంది. ఈ వెబ్ అప్లికేషన్ డెస్క్‌టాప్ కోడ్ ఎడిటర్లు లాంటి ముఖ్యమైన ఫంక్షనాలిటీ ఇస్తుంది.
ప్రారంభించే ముందు, మీ బ్రౌజర్‌లో [vscode.dev](https://vscode.dev) ని తెరవండి. ఈ ఇంటర్ఫేస్ డౌన్‌లోడ్లు లేదా సిస్టమ్ ఇన్‌స్టాలేషన్లు అవసరం లేకుండా లోడ్ అవుతుంది – క్లౌడ్ కంప్యూటింగ్ సూత్రాల ప్రత్యక్ష అన్వయము.
### మీ GitHub ఖాతాను కనెక్ట్ చేసుకోవడం
అలెగ్జాండర్ గ్రాహం బెల్ టెలిఫోన్ దూర ప్రాంతాలను కనెక్ట్ చేసినట్టు, మీ GitHub ఖాతాను లింక్ చేయడం VSCode.dev మరియు మీ కోడ్ రిపాజిటరీల మధ్య సంధి స్థాపిస్తుంది. GitHub తో సైన్ ఇన్ చేయమని అడిగినప్పుడు ఈ కనెక్షన్ ని అంగీకరించడం మంచిది.
**GitHub ఇంటిగ్రేషన్ ఇస్తుంది:**
- ఎడిటర్‌లోని మీ రిపాజిటరీలకు నేరుగా యాక్సెస్
- పరికరాల మధ్య సమకాలీకృత సెట్టింగ్లు మరియు ఎక్స్టెన్షన్లు
- GitHub కి సులభతర సేవ్ వర్క్‌ఫ్లో
- వ్యక్తిగత అభివృద్ధి వాతావరణం
### మీ కొత్త వర్క్‌స్పేస్ ను తెలుసుకోవడం
అన్ని లోడ్ అయ్యాక, మీరు ఒక అందమైన, శుభ్రంగా ఉన్న వర్క్‌స్పేస్ ను చూడగలుగుతారు, ఇది మీ కోడ్ మీదే దృష్టి పెట్టే రీతిలో రూపొందించబడింది!
![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.te.png)
**ఇది మీ పరిసరాల టూర్:**
- **యాక్టివిటీ బార్** (ఎడమవైపు అక్కడ గల స్ట్రిప్): మీ ప్రధాన నావిగేషన్, ఇందులో Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, Settings ⚙️ ఉన్నాయి
- **సైడ్బార్** (దాని పక్కన ఉన్న ప్యానెల్): మీరు ఎంచుకున్న అంశాల ఆధారంగా సంబంధిత సమాచారాన్ని చూపిస్తుంది
- **ఎడిటర్ ఏరియా** (మధ్యలో ఉన్న పెద్ద స్థలం): ఇదే మీ ప్రధాన కోడింగ్ ఏరియా, ఇక్కడ మ్యాజిక్ జరుగుతుంది
**కొద్దిగా సమయం తీసుకుని అన్వేషించండి:**
- ఆ యాక్టివిటీ బార్ ఐకాన్లను క్లిక్ చేసి వాటి పనితీరును చూడండి
- సైడ్బార్ ఎలా వివిధ సమాచారం చూపుతుందో గమనించండి – చాలా బాగుంది కదా?
- Explorer దృష్టి (📁) మీ ఎక్కువ సమయం గడుపే ప్రదేశం కావచ్చు, అలాగైతే ఇందులో సర్దుబాటు అవ్వండి
```mermaid
flowchart TB
subgraph "VSCode.dev ఇంటర్ఫేస్ నిర్మాణం"
A[సక్రియత పట్టీ] --> B[ఎక్స్‌ప్లోరర్ 📁]
A --> C[శోధన 🔍]
A --> D[సోర్స్ కంట్రోల్ 🌿]
A --> E[ఎక్స్‌టెన్షన్లు 🧩]
A --> F[సెట్టింగ్స్ ⚙️]
B --> G[ఫైల్ ట్రీ]
C --> H[కనుగొనండి & మార్చండి]
D --> I[గీట్ స్థితి]
E --> J[ఎక్స్‌టెన్షన్ మార్కెట్‌ప్లేస్]
F --> K[కన్ఫిగరేషన్]
L[సైడ్ బార్] --> M[సందర్భ ప్యానెల్]
N[ఎడిటర్ ప్రాంతం] --> O[కోడ్ ఫైళ్ళు]
P[టెర్మినల్/ఫలితము] --> Q[కమాండ్ లైన్]
end
```
## GitHub రిపాజిటరీలను తెరవడం
ఇంటర్నెట్ ముందు, పరిశోధకులు పుస్తకాలయాలకు దస్త్రాలు పొందేందుకు ప్రయాణం చేయాల్సి వచ్చేది. GitHub రిపాజిటరీలు ఇలాంటి కోడ్ సమాహారాలు, అవి దూరంగా నిల్వ ఉంటాయి. VSCode.dev స్థానిక మెషీన్ లో డౌన్‌లోడ్ చేసుకోకుండా డైరెక్ట్ గా ఏ పబ్లిక్ రిపాజిటరీ ను వీక్షించడానికి, ఎడిట్ చేయడానికి లేదా సహకరించడానికి వీలు కలిపిస్తుంది.
రిపాజిటరీలను తెరవడానికి రెండు విధానాలు ఉన్నాయి:
### పద్ధతి 1: పాయింట్-అండ్-క్లిక్ విధానం
మీరు VSCode.dev లో కొత్తగా మొదలవుతున్నప్పుడు నిర్దిష్ట రిపాజిటరీ ను తెరవడానికి ఇది సరిగ్గా సరిపోతుంది. ఇది సింపుల్ మరియు మొదటి సారి వాడగలిగేది:
**ఇహా ఎలా చేయాలి:**
1. మీరు ఇప్పటికే అక్కడ లేరని అయితే [vscode.dev](https://vscode.dev) కి వెళ్లండి
2. వేదిలు స్క్రీన్ పై "Open Remote Repository" బటన్ కోసం చూడండి, దాన్ని క్లిక్ చేయండి
![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.te.png)
3. ఏ GitHub రిపాజిటరీ URL ను పేస్ట్ చేయండి (ఈ URL ప్రయత్నించండి: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. ఎంటర్ నొక్కండి మరియు మ్యాజిక్ జరుగుతున్నది చూడండి!
**ప్రొ టిప్ - కమాండ్ ప్యాలెట్ షార్ట్‌కట్:**
మీరు కోడింగ్ విజార్డ్ లాంటి అనుభూతి కోరుకుంటే, Ctrl+Shift+P (లేదా Mac మీద Cmd+Shift+P) ని ఉపయోగించి కమాండ్ ప్యాలెట్ తెరవండి:
![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.te.png)
**కమాండ్ ప్యాలెట్ అనేది మీరు చేయగల సినిమాల కోసం ఒక సెర్చ్ ఇంజిన్ లాంటిది:**
- "open remote" టైప్ చేయండి, అది మీకు రిపాజిటరీ ఓపెనర్ కనుగొంటుంది
- ఇది మీరు ఇటీవల తెరిచిన రిపాజిటరీలను గుర్తుంచుకుంటుంది (చాలా ఉపయోగకరం!)
- మీరు దీనికి అలవాటు అవ్వగానే, మీరు అలాంటి వేగంతో కోడింగ్ చేస్తున్నట్టు అనిపిస్తుంది
- ఇది వాస్తవానికి VSCode.dev లో "హే సిరి, కానీ కోడింగ్ కొరకు"
### పద్ధతి 2: URL మార్పు సాంకేతికత
HTTP మరియు HTTPS వేర్వేరు ప్రోటోకాల్స్ వాడండి మరియు అదే డొమైన్ స్ట్రక్చర్ నిలిపి ఉంచడం లాంటిది, VSCode.dev కూడా GitHub అడ్రెసింగ్ సిస్ట్‌మ్ ని అనుసరించే URL నమూనాను వాడుతుంది. ఏ GitHub రిపాజిటరీ URL ను కూడా VSCode.dev లో నేరుగా తెరవడానికి మార్చవచ్చు.
**URL మార్పిడినిః**
| రిపాజిటరీ రకం | GitHub URL | VSCode.dev URL |
|----------------|---------------------|----------------|
| **పబ్లిక్ రిపాజిటరీ** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
| **వ్యక్తిగత ప్రాజెక్ట్** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
| **ఏ యాక్సెసిబుల్ రిపో** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
**అమలు:**
- `github.com` ని `vscode.dev/github` తో మార్చండి
- ఇతర అన్ని URL భాగాలను మార్చకండి
- ఏ పబ్లిక్‌గా యాక్సెసబుల్ రిపాజిటరీకి వర్క్సులు
- తక్షణ ఎడిటింగ్ యాక్సెస్ ఇస్తుంది
> 💡 **జీవితం మార్చే చిట్కా**: మీ ఇష్టమైన రిపాజిటరీల యొక్క VSCode.dev సంస్కరణలకు బుక్‌మార్క్ చేయండి. నాకు "Edit My Portfolio" మరియు "Fix Documentation" వంటి బుక్‌మార్కులు ఉన్నాయి, ఇవి నేరుగా ఎడిటింగ్ మోడ్ కి తీసుకెళతాయి!
**ఏ పద్ధతిని ఉపయోగించాలి?**
- **ఇంటర్ఫేస్ విధానం**: మీరు అన్వేషిస్తుంటే లేదా ఖచ్చితమైన రిపాజిటరీ పేర్లు గుర్తు లేకపోతే బాగా సరిపోతుంది
- **URL ట్రిక్**: మీరు ఎక్కడికి వెళ్తున్నారో తెలియనివ్వగా వేగంగా యాక్సెస్ కావడానికి పరిపూర్ణం
### 🎯 పాఠ్య ప్రమాణం: క్లౌడ్ డెవలప్మెంట్ యాక్సెస్
**ఒక్కడిగా ఆలోచించండి**: మీరు వెబ్ బ్రౌజర్ ద్వారా కోడ్ రిపాజిటరీలను యాక్సెస్ చేసేందుకు రెండు పద్ధతులు నేర్చుకున్నారు. ఇది డెవలప్మెంట్ విధానంలో ఒక ప్రాథమిక మార్పును సూచిస్తుంది.
**త్వరిత స్వయం-అంచనా:**
- వెబ్-ఆధారిత ఎడిటింగ్ సాధారణ "డెవలప్మెంట్ వాతావరణ సెటప్"లను తొలగించడంలో ఎట్లాంటి కీలక పాత్ర వహిస్తుంది?
- URL మార్పు సాంకేతికత స్థానిక git క్లోనింగ్ కంటే ఎలాంటి ప్రయోజనాలు కలిగి ఉంది?
- ఈ విధానం మీరు ఓపెన్ సోర్స్ ప్రాజెక్టులకు సహకరించే విధానాన్ని ఎలా మార్చుతుంది?
**ప్రాక్టికల్ అనుసంధానం**: GitHub, GitLab, మరియు Replit వంటి ప్రధాన కంపెనీలు తమ అభివృద్ధి వేదికలను ఈ క్లౌడ్-ఫస్ట్ సూత్రాల చుట్టూ నిర్మించాయి. మీరు ప్రొఫెషనల్ అభివృద్ధి బృందాలు ఉపయోగించే అదే వర్క్‌ఫ్లోలను నేర్చుకుంటున్నారు.
**సవాలు ప్రశ్న**: క్లౌడ్-ఆధారిత డెవలప్మెంట్ స్కూల్‌ల్లో కోడింగ్ నేర్పించే విధానాన్ని ఎలా మార్చగలదు? డివైస్ అవసరాలు, సాఫ్ట్‌వేర్ నిర్వహణ, మరియు సహకార అవకాశాలను పరిగణించండి.
## ఫైళ్ళతో మరియు ప్రాజెక్టుల‌తో పని చేయడం
ఇప్పుడు మీరు రిపాజిటరీ ఓపెన్ చేసుకున్నారని, ఇప్పుడీ నిర్మాణం ప్రారంభిద్దాం! VSCode.dev మీకు కోడ్ ఫైళ్ళను సృష్టించడానికి, సవరించడానికి మరియు క్రమపద్దతిలో పెట్టడానికి కావాల్సిన ప్రతిదీ ఇస్తుంది. దీన్ని మీ డిజిటల్ వర్క్‌షాప్ లాగా ఆలోచించండి – ప్రతి టూల్ మీరు కావాల్సిన చోటే ఉంటుంది.
మనం రోజువారీ పనులలోకి జారుద్దాం, ఇవి మీ కోడింగ్ వర్క్‌ఫ్లోలో ఎక్కువ భాగాన్ని కదుల్తాయి.
### కొత్త ఫైళ్ళను సృష్టించడం
ఒక అర్కిటెక్ట్ స్థలంలో బ్లూప్రింట్లను క్రమంలో పెట్టడం లాగా, VSCode.dev లో ఫైల్ సృష్టి ఒక నిర్మాణపూర్వక ప్రక్రియను అనుసరిస్తుంది. సిస్టమ్ అన్ని ప్రామాణిక వెబ్ డెవలప్మెంట్ ఫైల్ రకాల్ని సరైనంత మద్దతు ఇస్తుంది.
**ఫైల్ సృష్టి ప్రాసెస్:**
1. ఎక్స్‌ప్లోరర్ సైడ్బార్ లో లక్ష్య ఫోల్డర్ కి వెళ్లండి
2. ఫోల్డర్ పేరుపై హోవర్ చేసి "న్యూ ఫైల్" ఐకాన్ (📄+) కనిపెడండి
3. ఫైల్ పేరు, సరైన ఎక్స్‌టెన్షన్ తో నమోదు చేయండి (`style.css`, `script.js`, `index.html`)
4. ఫైల్ సృష్టించేందుకు Enter నొక్కండి
![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb.te.png)
**పేర్కొన్న నియమాలు:**
- ఫైల్ ఉద్దేశ్యాన్ని తెలియజేసే వివరణాత్మక పేర్లను ఉపయోగించండి
- సరైన సింటాక్స్ హైలైటింగ్ కోసం ఫైల్ ఎక్స్‌టెన్షన్లు ఇవ్వండి
- ప్రాజెక్టుల నిడివిలో నిరంతరమైన పేరు పద్ధతులను అనుసరించండి
- ఖాళీల స్థానంలో చిన్న అక్షరాలు మరియు హైఫెన్లు ఉపయోగించండి
### ఫైళ్లను ఎడిట్ చేసి సేవ్ చేయడం
ఇది అసలు మజా మొదలయ్యే స్థలం! VSCode.dev ఎడిటర్ చాలా ఉపయోగకరమైన ఫీచర్లతో నిండి ఉంటుంది, ఇవి కోడింగ్ సాఫిగా మరియు సహజంగా అనిపించేలా చేస్తాయి. ఇదే ఒక తెలివైన రచనా సహాయకుడు వంటిదే, కోడ్ కొరకు.
**మీ ఎడిట్ వర్క్‌ఫ్లో:**
1. ఎక్స్‌ప్లోరర్ లో ఏ ఫైల్ ఉన్నా క్లిక్ చేయండి, అది ప్రధాన భాగంలో తెరుస్తుంది
2. టైప్ చేయడం ప్రారంభించారు కాబట్టి, VSCode.dev రంగులు, సూచనలు, దోషాల గుర్తింపు తో సహాయపడుతుంది
3. Ctrl+S (Windows/Linux) లేదా Cmd+S (Mac) తో సేవ్ చేయండి – అయినా ఇది ఆటోమేటిగ్గా సేవ్ వర్క్ చేస్తుంది!
![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.te.png)
**మీరు కోడ్ చేస్తున్నప్పుడు జరిగే చల్లగా ఫీచర్లు:**
- మీ కోడ్ అందంగా రంగుల కోడ్ తో చూపబడుతుంది, చదవడమనే సులభం అవుతుంది
- VSCode.dev టైప్ చేస్తున్నపుడు పూర్తి సూచనలు ఇస్తుంది (ఆటోకరెక్ట్ లాగా, కాని చాలా తెలివిగా)
- మీరు సేవ్ చేయక ముందే తప్పుల్ని పట్టుకుంటుంది
- బ్రౌజర్ లాగా, పలు ఫైళ్ళను టాబ్స్ లో ఓపెన్ చేయవచ్చు
- అన్ని పనులు బ్యాక్గ్రౌండ్ లో ఆటోమేటిగ్గా సేవ్ అవుతాయి
> ⚠️ **త్వరిత చిట్కా**: ఆటో-సేవ్ ఉన్నప్పటికీ, Ctrl+S లేదా Cmd+S నొక్కడం మంచిది. ఇది వెంటనే సేవ్ చేస్తుంది మరియు దోష నిర్ధారణ వంటి అదనపు ఫీచర్లను సక్రియం చేస్తుంది.
### Git తో వెర్షన్ కంట్రోల్
ప్రాచీనత శాస్త్రవేత్తలు తవ్వక పొరల వివరమైన రికార్డులు సృష్టించడం లాగా, Git మీ కోడ్ లో మార్పులను గడచిన కాలంలో ట్రాక్ చేస్తుంది. ఈ సిస్టమ్ ప్రాజెక్టు చరిత్రను కాపాడుతుంది, అవసరం అయితే మీరు పూర్వపు వెర్షన్లకు తిరిగి వెళ్ళవచ్చు. VSCode.dev అంతర్గత Git ఫంక్షనాలిటీని కలిగి ఉంది.
**సోర్స్ కంట్రోల్ ఇంటర్ఫేస్:**
1. యాక్టివిటీ బార్ లోని 🌿 ఐకాన్ ద్వారా సోర్స్ కంట్రోల్ ప్యానెల్ ని యాక్సెస్ చేయండి
2. మారిన ఫైళ్ళు "Changes" విభాగంలో కనిపిస్తాయి
3. మార్పులను సూచించడానికి రంగు కోడింగ్ ఉంటుంది: చేనీయుని గ్రీన్, తొలగింపులకి రెడ్
![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.te.png)
**మీ పని సేవ్ చేయడం (కమిట్ వర్క్‌ఫ్లో):**
```mermaid
flowchart TD
A[ఫైల్స్‌లో మార్పులు చేయండి] --> B[సోర్స్ కంట్రోల్‌లో మార్పులు వీక్షించు]
B --> C[+ పై క్లిక్ చేసి మార్పులను స్టేజ్ చేయండి]
C --> D[వివరణాత్మక కమీట్ సందేశాన్ని రాయండి]
D --> E[కమీట్ చేయడానికి చెక్‌మార్క్ పై క్లిక్ చేయండి]
E --> F[మార్పులు GitHubకు పుష్ చేయబడ్డాయి]
```
```mermaid
stateDiagram-v2
[*] --> Modified: ఫైల్స్ సవరించండి
Modified --> Staged: దశలో ఉంచడానికి + క్లిక్ చేయండి
Staged --> Modified: దశలో నుండి తీసేయడానికి - క్లిక్ చేయండి
Staged --> Committed: సందేశాన్ని జోడించి కమిట్ చేయండి
Committed --> [*]: GitHub కి సమకాలీకరించండి
state Committed {
[*] --> LocalCommit
LocalCommit --> RemotePush: ఆటో-సంకలనం
}
```
**మీ స్టెప్-బై-స్టెప్ ప్రక్రియ ఇలా ఉంటుంది:**
- సేవ్ చేయదలచిన ఫైళ్ళ పక్కన ఉన్న "+" ఐకాన్ క్లిక్ చేయండి (ఇది వాటిని "స్టేజ్" చేస్తుంది)
- మీరు స్టేజ్డ్ చేసిన అన్ని మార్పులతో సంతృప్తిగా ఉన్నారని ద్విగుణంగా తనిఖీ చేయండి
- మీరు చేసినది ఏమిటి అనే విషయంలో చిన్న గమనిక రాయండి (ఇది మీ "కమిట్ సందేశం")
- అన్ని సంగతులను GitHub కు సేవ్ చేయడానికి చెక్మార్క్ బటన్ క్లిక్ చేయండి
- మీరు ఏదైనా విషయంలో ఆలోచన మార్చుకుంటే, అన్‌డూ చిహ్నం మార్పులను వదిలి వేయడానికి సహాయపడుతుంది
**మంచి కమిట్ సందేశాలు రాయడం (ఇది మీరు భావించేదానికంటే సులభం!):**
- మీరు చేసినది సాదా మాటల్లో వర్ణించండి, ఉదా: "కాంటాక్ట్ ఫారమ్ జోడించు" లేదా "తొగిన నావిగేషన్ సరి చెయ్యి"
- దీన్ని చిన్నది మరియు సరళంగా ఉంచండి – ట్వీట్ పొలిమితి లాగా, వ్యాసం కాదు
- "Add", "Fix", "Update", లేదా "Remove" వంటి క్రియాపదాలతో మొదలుపెట్టండి
- **మంచి ఉదాహరణలు**: "Add responsive navigation menu", "Fix mobile layout issues", "Update colors for better accessibility"
> 💡 **త్వరిత నావిగేషన్ సూచన**: మీ GitHub రిపాజిటరీ దగ్గరకు తిరిగి వెళ్లడానికి మరియు మీ కమిట్ చేసిన మార్పులను ఆన్‌లైన్‌లో చూడడానికి ఎడమ పైన ఉన్న హాంబర్గర్ మెను (☰) ఉపయోగించండి. ఇది మీ ఎడిటింగ్ వాతావరణం మరియు GitHub లో మీ ప్రాజెక్ట్ హోమ్ మధ్యలోని ద్వారంలా ఉంటుంది!
## విస్తరణలతో ఫంక్షనాలిటీ పెంపు
ఒక కార్మికుడి కార్యాలయం వివిధ పనులకు ప్రత్యేకమైన పరికరాలు కలిగి ఉండేలా, VSCode.dev ప్రత్యేక సామర్థ్యాలు జోడించే విస్తరణలతో అనుకూలీకరించవచ్చు. ఈ సామాజికంగా అభివృద్ధి అయిన ప్లగిన్లు కోడ్ ఫార్మాటింగ్, ప్రత్యక్ష ప్రివ్యూ మరియు మెరుగైన Git అనుసంధానం వంటి సాధారణ అభివృద్ధి అవసరాలను పరిష్కరిస్తాయి.
విస్తరణ మార్కెట్‌ప్లేస్ ప్రపంచవ్యాప్తంగా డెవలపర్స్ తయారుచేసిన వేలల ఆఫర్‌ల ఉచిత పరికరాలను కలిగిఉంటుంది. ప్రతీ విస్తరణ workflow లోని ప్రత్యేక సమస్యలను పరిష్కరిస్తూ మీ వ్యక్తిగత అభిరుచి మరియు అవసరాలకు తగిన అభివృద్ధి వాతావరణాన్ని నిర్మించడానికి అవకాశం ఇస్తుంది.
```mermaid
mindmap
root((విస్తరణ ప్రమాణం))
Essential Categories
Productivity
Live Server
Auto Rename Tag
Bracket Pair Colorizer
GitLens
Code Quality
Prettier
ESLint
Spell Checker
Error Lens
Language Support
HTML CSS Support
JavaScript ES6
Python Extension
Markdown Preview
Themes & UI
Dark+ Modern
Material Icon Theme
Peacock
Rainbow Brackets
Discovery Methods
Popular Rankings
డౌన్‌లోడ్ లెక్కలు
వినియోగదారు రేటింగ్‌లు
తాజా నవీకరణలు
కమ్యూనిటీ సమీక్షలు
Recommendations
వర్క్‌స్పేస్ సూచనలు
భాష ఆధారిత
పని ప్రవాహానికి ప్రత్యేకమైన
జట్టు ప్రమాణాలు
```
### మీకు సరిపోయే విస్తరణలను కనుగొనడం
విస్తరణ మార్కెట్‌ప్లేస్ చాలా బాగా అమర్చబడి ఉంటుంది, కావలసినదాన్ని కనుగొనటంలో మీరు తప్పిపోవట్లేదు. ఇది మీరు కాదు తెలుసుకున్న భిన్నమైన సాధనాలు మరియు చల్లగా ఉన్న వాటిని కనుగొనడంలో సహాయపడటానికి రూపుదిద్దబడింది!
**మార్కెట్‌ప్లేస్‌కు చేరుకోవడం:**
1. Activity Bar లో గల విస్తరణలు చిహ్నం (🧩) నొక్కండి
2. చుట్టూ వీక్షించండి లేదా ఏదైనా ప్రత్యేకమైనది కోసం శోధించండి
3. ఆసక్తికరంగా కనిపించే దానిపై క్లిక్ చేసి మరిన్ని వివరాలు తెలుసుకోండి
![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.te.png)
**అక్కడ మీరు చూచేది:**
| విభాగం | లో ఉన్నది | ఎందుకు ఉపయోగకరం |
|----------|---------|----------|
| **ఇన్‌స్టాల్ చేసుకున్నవి** | మీరు ఇప్పటికే జోడించిన విస్తరణలు | మీ వ్యక్తిగత కోడింగ్ కిట్ |
| **ప్రాచుర్యం** | ఎక్కువ మందికి ఇష్టమైనవి | అత్యధిక డెవలపర్లు నమ్మే వాటి |
| **సిఫార్సులు** | మీ ప్రాజెక్టుకు స్మార్ట్ సలహాలు | VSCode.dev యొక్క సహాయ సూచనలు |
**బ్రౌజింగ్ సులభతరం చేసే అంశాలు:**
- ప్రతి విస్తరణ రేటింగ్లు, డౌన్‌లోడ్ సంఖ్యలు, నిజమైన వినియోగదారు సమీక్షలతో చూపబడుతుంది
- అవి ఎప్పుడూ స్క్రీన్షాట్లు మరియు స్పష్టమైన వివరణలను అందిస్తాయి
- అన్ని స్పష్టంగా అనుకూలత సమాచారంతో గుర్తింపు పొందుతాయి
- సమానమైన విస్తరణలు సూచిస్తారు కాబట్టి మీరు ఎంపికలు సరిపోల్చుకోవచ్చు
### విస్తరణలను ఇన్‌స్టాల్ చేయడం (ఇది చాలా సులభం!)
మీ ఎడిటర్‌కు కొత్త శక్తులను జోడించడం ఒక బటన్ నొక్కడమే. విస్తరణలు సెకన్లలో ఇన్‌స్టాల్ అవుతాయి మరియు వెంటనే పని ప్రారంభిస్తాయి – రీస్టార్ట్ అవసరం లేదు, వేచి ఉండాల్సిన అవసరం లేదు.
**మీకు కావలసినది ఇక్కడ ఉంది:**
1. మీరు కావలసినది కోసం శోధించండి (ఉదా: "live server" లేదా "prettier" అని శోధించండి)
2. మంచి అనిపించే దానిపై క్లిక్ చేసి మరిన్ని వివరాలు తెలుసుకోండి
3. అది ఏమి చేస్తుందో చదివి రేటింగ్లను చూడండి
4. ఆ నీలం "Install" బటన్‌ను నొక్కండి, అంతే!
![Installing extensions](../../../../8-code-editor/images/install-extension.gif)
**వెనకన జరుగేది:**
- విస్తరణ స్వయంచాలకంగా డౌన్‌లోడ్ చేసుకుని సెటప్ అవుతుంది
- మీ ఇంటర్ఫేస్‌లో కొత్త ఫీచర్లు వెంటనే కనిపిస్తాయి
- అన్నీ వెంటనే పని ప్రారంభిస్తాయి (గేగించకుండా, నిజంగానే ఇది అంత వేగంగా!)
- మీరు సైన్ ఇన్ అయితే, విస్తరణ మీ అన్ని పరికరాలు మధ్య సమకాలీకరించబడుతుంది
**కొన్ని నేను సిఫారసు చేసే విస్తరణలు:**
- **Live Server**: కోడ్ చేసే సమయానికే మీ వెబ్‌సైట్ అప్‌డేట్ అయ్యి చూపిస్తుంది (ఇది చక్రవ్యూహం!)
- **Prettier**: మీ కోడ్‌ను స్వయంచాలకంగా శుభ్రంగా మరియు ప్రొఫెషనల్‌గా మార్చుతుంది
- **Auto Rename Tag**: ఒక HTML ట్యాగ్ మార్చగానే దాని భాగస్వామి కూడా మార్చబడుతుంది
- **Bracket Pair Colorizer**: మీ బ్రాకెట్లకు వేరు రంగులు ఇస్తుంది కాబట్టి మీరు ఎటిది ఎటిదో తప్పకుండా అర్థం చేసుకుంటారు
- **GitLens**: Git లక్షణాలను మీకు చాలా సహాయపడే సమాచారంతో మెరపెడుతుంది
### మీ విస్తరణలను అనుకూలీకరించడం
చాలా విస్తరణలకు సొంత సెట్టింగ్స్ ఉంటాయి, మీరు వాటిని సర్దుబాటు చేసి మీకు కావలసిన విధంగా చేసుకోవచ్చు. ఇది కారు సీటు మరియు దర్పణాలను సర్దుకునేలా – ప్రతీ వ్యక్తికి తనంగానే ప్రాధాన్యతలు ఉంటాయి!
**విస్తరణ సెట్టింగ్స్ సర్దుబాటు చేయడం:**
1. విస్తరణలు ప్యానెల్లో మీ ఇన్‌స్టాల్ చేసిన విస్తరణను కనుగొనండి
2. దాని పేరుకు పట్టం విరిగిన చిన్న గేర్ చిహ్నం (⚙️) కనిపిస్తే నొక్కండి
3. డ్రాప్‌డౌన్ నుంచి "Extension Settings" ఎంచుకోండి
4. మీ workflow కి సరిగ్గా సరిపడేలా అన్ని విషయాలు సరిచూడండి
![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.te.png)
**మీరు సర్దుకోవచ్చు అనుకుంటే ఉన్న సాధారణ విషయాలు:**
- మీ కోడ్ ఎలా ఫార్మాట్ అవుతుందో (టాబ్‌లు లేదా స్పేసులు, లైన్ పొడవు, మొదలయినవి)
- వివిధ చర్యలకు ఏ కీబోర్డ్ షార్ట్‌కట్‌లు పనిచేస్తాయో
- ఏ ఫైల్ టైప్‌లతో విస్తరణ పని చేయాలో
- కొన్ని ఫీచర్లను ఆన్ లేదా ఆఫ్ చేయడం, క్లోన్ స్ధితిని ఉంచేందుకు
### మీ విస్తరణలను సంస్థాపితం చేయడం
మీకు కొత్త చల్లని విస్తరణలు కనపడుతున్నప్పుడు, వాటిని శ్రేణిగా మరియు సజావుగా నిర్వహించుకునేందుకు ఇష్టం ఉంటుంది. VSCode.dev దీన్ని చాలా సులభతరంగా చేస్తుంది.
**మీ విస్తరణ నిర్వహణ ఎంపికలు:**
| మీరు ఏమి చేయవచ్చు | ఎప్పుడు ఉపయోగపడుతుంది | ఉపయోగకరమైన సూచన |
|--------|---------|----------|
| **డిసేబుల్ చేయండి** | ఒక విస్తరణ సమస్యలు సృష్టిస్తున్నా లేదో పరీక్షించడానికీ | అవసరం అయితే తిరిగి దిగి వచ్చేందుకు అన్‌ఇన్‌స్టాల్ కంటే మెరుగైనది |
| **అన్‌ఇన్‌స్టాల్ చేయండి** | మీరు అవసరం లేని విస్తరణలను పూర్తిగా తీసివేయడం | మీ వాతావరణాన్ని శుభ్రంగా మరియు వేగంగా ఉంచుతుంది |
| **అప్‌డేట్ చేయండి** | తాజా ఫీచర్లు మరియు బగ్ పరిష్కారాల కోసం | సాధారణంగా ఆటోమేటిక్‌గా జరుగుతుంది కానీ პერიოდికంగా తనిఖీ చేయండి |
**నేను విస్తరణలను ఎలా నిర్వహిస్తాను:**
- ప్రతి కొన్ని నెలలకొక మూడు-నాలుగు సార్లు నేను డౌన్‌లోడ్ చేసినవి చూసి ఉపయోగం లేని వాటిని తొలగిస్తాను
- నేను విస్తరణలను ఎప్పుడూ అప్‌డేట్ చేస్తాను అందువల్ల తాజా మెరుగుదలలు మరియు భద్రతా పరిష్కారాలు పొందుతాను
- ఏదైనా నెమ్మదిగా ఉంటే, కొంతకాలం కొన్నింటిని డిసేబుల్ చేసి కారణాన్ని వేరు చేసుకుంటాను
- విస్తరణలకు పెద్ద అప్‌డేట్ వచ్చినప్పుడు వాటి నోట్లను చదువుతాను – కొన్నిసార్లు అద్భుతమైన కొత్త ఫీచర్లు ఉంటాయి!
> ⚠️ **పనితీరు సూచన**: విస్తరణలు అద్భుతమైనవి, కాని ఎక్కువ గలిగితే పనితనం నెమ్మదవుతుంది. నిజంగా మీ జీవితాన్ని సులభతరం చేసే వాటిపై దృష్టి పెట్టండి మరియు ఉపయోగం లేని వాటిని తొలగించడాన్ని భయపడకండి.
### 🎯 విద్యా పరిశీలన: అభివృద్ధి వాతావరణ అనుకూలీకరణ
**సాంకేతిక నిర్మాణం అర్థం చేసుకోవడం**: మీరు సామాజికంగా రూపొందించిన విస్తరణలను ఉపయోగించి ప్రొఫెషనల్ అభివృద్ధి వాతావరణాన్ని అనుకూలీకరించడాన్ని నేర్చుకున్నారు. ఇది సంస్థ అభివృద్ధి బృందాలు సాంద్రత కలిగిన టూల్‌చెయిన్‌లను ఎలా నిర్మిస్తాయో ప్రతిబింబిస్తుంది.
**ప్రధాన భావనలను మాస్టరింగ్:**
- **విస్తరణ కనుగొనడం**: ప్రత్యేక అభివృద్ధి సవాళ్లను పరిష్కరించే సాధనాలను కనుగొనడం
- **వాతావరణాన్ని రూపకల్పన చేయటం**: వ్యక్తిగత లేదా బృంద ఆరాధనలకు సరిపోయేలా సాధనాలను అనుకూలీకరించడం
- **పనితీరు మెరుగుదల**: కార్యాచరణను మరియు వ్యవస్థ పనితీరును సమతుల్యం చేయడం
- **సామాజిక సహకారం**: గ్లోబల్ డెవలపర్ కమ్యూనిటీ తయారుచేసిన సాధనాలను ఉపయోగించడం
**గొప్ప పరిశ్రమ సంబంధం**: విస్తరణ వ్యవస్థలు VS Code, Chrome DevTools, ఆధునిక IDEల వంటి ప్రధాన అభివృద్ధి వేదికలకు శక్తి ఇస్తాయి. విస్తరణలను ఎలా మోడలింగ్ చేయాలో, ఇన్‌స్టాల్ చేసుకోవాలో మరియు కన్ఫిగర్ చేసుకోవాలో అర్థం చేసుకోవడం ప్రొఫెషనల్ అభివృద్ధి వర్క్‌ఫ్లోలకు అత్యవసరం.
**పైగా ఆలోచించదగ్గ ప్రశ్న**: మీరు 10 డెవలపర్ల బృందానికి ఒక సాంద్రత కలిగిన అభివృద్ధి వాతావరణాన్ని ఎలా ఏర్పాటు చేస్తారు? సాంటరుక్యం, పనితీరు, మరియు వ్యక్తిగత అభిరుచులను పరిగణనలోకి తీసుకోండి.
## 📈 మీ క్లౌడ్ అభివృద్ధి నైపుణ్యం కాలక్రమం
```mermaid
timeline
title ప్రొఫెషనల్ క్లౌడ్ అభివృద్ధి ప్రయాణం
section ప్లాట్‌ఫామ్ ఫౌండేషన్స్
క్లౌడ్ అభివృద్ధి అవగాహన
: వెబ్ ఆధారిత ఎడిటింగ్ భావనలను నేర్చుకోండి
: GitHub సమీకరణ నమూనాలను కలపండి
: ప్రొఫెషనల్ ఇంటర్‌ఫేస్‌ల మధ్య నావిగేట్ చేయండి
section వర్క్ఫ్లో మాస్‌టరీ
ఫైలు & ప్రాజెక్ట్ నిర్వహణ
: క్రమబద్ధీకృత ప్రాజెక్ట్ నిర్మాణాలను సృష్టించండి
: సింటాక్స్ హైలైటింగ్ లాభాలను నేర్చుకోండి
: బహుఫైల్ ఎడిటింగ్ వర్క్ఫ్లోలను నిర్వహించండి
వెర్షన్ కంట్రోల్ సమీకరణ
: Git విజువలైజేషన్‌ను అర్థం చేసుకోండి
: కమిట్ సందేశాల ప్రమాణాలను అభ్యసించండి
: మార్పుల ట్రాకింగ్ వర్క్ఫ్లోలను మాస్ట‌ర్ చేయండి
section ఎన్విరాన్‌మెంట్ అనుకూలీకరణ
విస్తరణ పరిసర వ్యవస్థ
: ఉత్పాదకత విస్తరణలను కనుగొనండి
: అభివృద్ధి ప్రాధాన్యతలను ఆకృతీకరించండి
: పనితీరు మరియు ఫంక్షనాలిటీని ఆప్టిమైజ్ చేయండి
ప్రొఫెషనల్ సెట్‌అప్
: సుసంగత వర్క్ఫ్లోలను రూపొందించండి
: పునర్వినియోగయోగ్య కాన్ఫిగరేషన్లను సృష్టించండి
: టీమ్ ప్రమాణాలను స్థాపించండి
section పరిశ్రమ సిద్ధత
క్లౌడ్-ఫస్ట్ అభివృద్ధి
: రిమోట్ అభివృద్ధి సాధనాల్లో నైపుణ్యం సాధించండి
: సహకార వర్క్ఫ్లోలను అర్థం చేసుకోండి
: ప్లాట్‌ఫామ్ స్వతంత్ర నైపుణ్యాలను నిర్మించండి
ప్రొఫెషనల్ ప్రాక్టీసెస్
: పరిశ్రమ ప్రమాణాలను అనుసరించండి
: నిర్వహించదగిన వర్క్ఫ్లోలను సృష్టించండి
: టీమ్ వాతావరణాలకు సిద్ధమవ్వండి
```
**🎓 పట్టభద్రుల ఆరంభం**: మీరు ప్రముఖ సాంకేతిక కంపెనీలలో వృత్తిపరులైన డెవలపర్లు ఉపయోగించే అదే సాధనాలు మరియు workflow ని ఉపయోగించి క్లౌడ్ ఆధారిత అభివృద్ధిని విజయవంతంగా నేర్చుకున్నారు. ఈ నైపుణ్యాలు సాఫ్ట్‌వేర్ అభివృద్ధి భవిష్యత్తును సూచిస్తాయి.
**🔄 తదుపరి స్థాయి సామర్థ్యాలు**:
- ఆధునిక క్లౌడ్ అభివృద్ధి వేదికలు (Codespaces, GitPod) ను కసరత్తు చేయడానికి సిద్ధంగా
- విస్తృత అభివృద్ధి బృందాల్లో పని చేయడానికి సన్నద్ధం
- ప్రపంచవ్యాప్తంగా ఓపెన్ సోర్స్ ప్రాజెక్టులకు సహకరించడానికి సామర్థ్యం
- ఆధునిక DevOps మరియు నిరంతర ఏకీకరణ పద్ధతులకు పునాది
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
NASA అంతరిక్ష మిషన్లకు ఉపయోగించే క్రమబద్ధీకరించిన విధానంలా, ఈ ఛాలెంజ్ VSCode.dev నైపుణ్యాలను పూర్తిపరిణామ వర్క్‌ఫ్లో సన్నివేశంలో అన్వయించడాన్ని కోరి ఉంటుంది.
**లక్ష్యం:** VSCode.dev ఉపయోగం ద్వారా సమగ్ర వెబ్ అభివృద్ధి వర్క్‌ఫ్లోని స్థాపించడంలో నైపుణ్యం ప్రదర్శించండి.
**ప్రాజెక్ట్ అవసరాలు:** ఏజెంట్ మోడ్ సహాయంతో ఈ పనులను పూర్తి చేయండి:
1. ఒక ఉన్న రిపాజిటరీని ఫోర్క్ చేయండి లేదా కొత్తది సృష్టించండి
2. HTML, CSS, మరియు జావాస్క్రిప్ట్ ఫైళ్ళతో పని చేసే ప్రాజెక్టు నిర్మాణాన్ని ఏర్పాటు చేయండి
3. అభివృద్ధిని మెరుగుపరచే మూడు విస్తరణలను ఇన్‌స్టాల్ చేసి కాన్ఫిగర్ చేయండి
4. వివరణాత్మక కమిట్ సందేశాలతో వర్షన్ కంట్రోల్ ప్రాక్టీస్ చేయండి
5. ప్రత్యేక ఫీచర్ బ్రాంచ్ సృష్టి మరియు మార్చుట వ్యాయామం చేయండి
6. README.md ఫైల్లో ప్రక్రియ మరియు నేర్చుకున్న విషయాలను డాక్యుమెంట్ చేయండి
ఈ వ్యాయామం VSCode.dev భావనలన్నిటిని భవిష్యత్తు అభివృద్ధి ప్రాజెక్టులకు వర్తించదగిన ప్రాయోగిక workflow గా సంకలనం చేస్తుంది.
[Agent mode గురించి తెలుసుకోండి](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
## అసైన్‌మెంట్
ఈ నైపుణ్యాలను నిజమైన పరీక్ష కోసం సమయం వచ్చేసింది! నేను మీకు ఒక హ్యాండ్స్-ఆన్ ప్రాజెక్ట్ ఇచ్చాను ఇది మీరు నేర్చుకున్న ప్రతీదాన్ని ప్రాక్టీస్ చేసుకోవడానికి అవకాశం ఇస్తుంది: [VSCode.dev ఉపయోగించి రిజ్యూమ్ వెబ్‌సైట్ సృష్టించండి](./assignment.md)
ఈ అసైన్మెంట్ మీకు బ్రౌజర్‌లోనే పూర్తిగా ప్రొఫెషనల్ రిజ్యూమ్ వెబ్‌సైట్ తయారు చేయడం నేర్పుతుంది. మీరు VSCode.dev యొక్క అన్ని ఫీచర్లను ఉపయోగిస్తారు, చివరికి మీరు మంచి లుక్ ఉన్న వెబ్‌సైట్ తో పాటు మీ కొత్త workflow పై బలం ఉన్న ఆత్మవిశ్వాసాన్ని పొందుతారు.
## ఇంకా అన్వేషించండి మరియు మీ నైపుణ్యాలను పెంచుకోండి
మీకు మంచి పట్టు ఏర్పడింది, కానీ ఇంకా చాలా అద్భుతమైన విషయాలు ఉన్నాయి! మీ VSCode.dev నైపుణ్యాలను తదుపరి స్థాయికి తీసుకెళ్లడానికి కొన్ని వనరులు మరియు ఆలోచనలు ఇక్కడ ఉన్నాయి:
**అధికారిక డాక్యుమెంట్లు జాబితా:**
- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – బ్రౌజర్-ఆధారిత ఎడిటింగ్ పూర్తి గైడ్
- [GitHub Codespaces](https://docs.github.com/en/codespaces) – క్లౌడ్లో మరింత శక్తి కావాలంటే
**తరువాత ప్రయోగించవలసిన చల్లని ఫీచర్లు:**
- **కీబోర్డ్ షార్ట్‌కట్‌లు**: మీకు కోడింగ్ నింజలా అనిపించే కీస్ మిశ్రమాలను నేర్చుకోండి
- **వర్క్‌స్పేస్ సెట్టింగ్స్**: వివిధ రకాల ప్రాజెక్టులకు వేర్వేరు వాతావరణాలను సెట్ చేయండి
- **మల్టీ-రూట్ వర్క్‌స్పేస్‌లు**: ఒకేసారి అనేక రిపాజిటరీలపై పని చేయండి (అత్యంత ఉపయోగకరం!)
- **టెర్మినల్ ఇంటిగ్రేషన్**: మీ బ్రౌజర్‌లోనే కమాండ్-లైన్ టూల్స్‌కి యాక్సెస్ పొందండి
**అభ్యాసానికి ఆలోచనలు:**
- కొన్ని ఓపెన్ సోర్స్ ప్రాజెక్టుల్లో ప్రవేశించి VSCode.dev తో సహకరించండి – ఇది తిరిగి ఇచ్చే గొప్ప మార్గం!
- వివిధ విస్తరణలను ప్రయత్నించి మీకు సరిపోయేటటువంటి సెటప్ కనుగొనండి
- మీరు తరచుగా నిర్మించే సైట్ల కోసం ప్రాజెక్ట్ టెంప్లేట్స్ సృష్టించండి
- బ్రాంచింగ్ మరియు మర్జింగ్ వంటి Git workflowలను ప్రాక్టీస్ చేయండి – ఇవి బృంద ప్రాజెక్టుల్లో విలువైన నైపుణ్యాలు
---
**మీరు బ్రౌజర్ ఆధారిత అభివృద్ధిలో నైపుణ్యం సాధించారు!** 🎉 పోర్టబుల్ పరికరాల ఆవిష్కరణవలన శాస్త్రవేత్తలు సుదూర ప్రాంతాల్లో పరిశోధనలు చేయగలిగినట్టుగా, VSCode.dev తో మీరు ఏదైనా ఇంటర్నెట్ కనెక్ట్ అయిన పరికరంతో ప్రొఫెషనల్ కోడింగ్ చేయగలుగుతారు.
ఈ నైపుణ్యాలు ఆధునిక పరిశ్రమ ఆచార్యాలను ప్రతిబింబిస్తాయి – చాలా వృత్తిపరులైన డెవలపర్లు తమ సౌలభ్యం మరియు ప్రాప్యత కోసం క్లౌడ్ ఆధారిత అభివృద్ధి వాతావరణాలను ఉపయోగిస్తారు. మీరు ఒక వ్యక్తిగత ప్రాజెక్టు నుంచి పెద్ద బృంద సహకారాల వరకు విస్తరించే workflow నేర్చుకున్నారు.
ఈ పద్ధతులను మీ తదుపరి అభివృద్ధి ప్రాజెక్టుకు వర్తింపజేయండి! 🚀
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ముఖాముఖి**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా లోపాలు ఉండవచ్చు. మౌలిక భాషలో ఉన్న అసలు డాక్యుమెంట్‌ను అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం వలన కలిగే ఏమీ అయోమయాలు లేదా తప్పు అర్థం చేసుకున్నందులకు మేము బాధ్యులు కాదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

591
translations/te/8-code-editor/1-using-a-code-editor/assignment.md
Unescape View File

@ -0,0 +1,591 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "effe56ba51c38d7bdfad1ea38288666b",
"translation_date": "2026-01-08T13:21:30+00:00",
"source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
"language_code": "te"
}
-->
# VSCode.dev ఉపయోగించి రిజ్యూమ్ వెబ్‌సైట్ రూపొందించండి
మీ నైపుణ్యాలు మరియు అనుభవాన్ని ఒక ఇంటరాక్టివ్, ఆధునిక ఫార్మాట్‌లో ప్రదర్శించే ఒక ప్రొఫెషనల్ రిజ్యూమ్ వెబ్‌సైట్‌ని నిర్మించడం ద్వారా మీ కెరీర్ అవకాశాలను మార్చుకోండి. సంప్రదాయ PDFల పంపటానికి బదులుగా, రిక్రూటర్లకు మీ అర్హతలు మరియు వెబ్ డెవలప్‌మెంట్ సామర్థ్యాలను చూపించే ఒక అందమైన, ప్రతిస్పందించే వెబ్‌సైట్ అందించడాన్ని ఊహించండి.
ఈ హ్యాండ్స్-ఆన్ అసైన్‌మెంట్ మీ అన్ని VSCode.dev నైపుణ్యాలను వాస్తవ ప్రాజెక్టుగా ఉపయోగించి, మీ కెరీర్ కోసం నిజంగా ఉపయోగకరమైనది సృష్టించడాన్ని కలిగి ఉంటుంది. మీరు బ్రౌజర్‌లోనే రిపోజిటరీ సృష్టి నుంచి డిప్లాయ్‌మెంట్ వరకు పూర్తి వెబ్ డెవలప్‌మెంట్ వర్క్‌ఫ్లోని అనుభవిస్తారు.
ఈ ప్రాజెక్టును పూర్తి చేసిన తర్వాత, మీకు ప్రొఫెషనల్ ఆన్‌లైన్ ప్రొజెన్స్ ఉంటుంది, ఇది సులభంగా ప‍ోటెన్షియల్ ఎంప్లాయర్స్‌తో పంచుకోగలదు, మీరు నైపుణ్యాలు అభివృద్ధి చెందుతున్నందున నవీకరించుకోవచ్చు, మరియు వ్యక్తిగత బ్రాండ్‌కు తగినట్టు అనుకూలీకరించవచ్చు. ఈ విధమైన ప్రాక్టికల్ ప్రాజెక్టు వాస్తవ ప్రపంచ వెబ్ డెవలప్‌మెంట్ నైపుణ్యాలను చూపుతుంది.
## నేర్చుకునే లక్ష్యాలు
ఈ అసైన్‌మెంట్ పూర్తిచేసిన తరువాత, మీరు ఇలాగే చేయగలిగేరు:
- **సృష్టించగలరు** మరియు VSCode.dev ఉపయోగించి పూర్తి వెబ్ డెవలప్‌మెంట్ ప్రాజెక్టును నిర్వహించగలరు
- **రూపకల్పన చేసుకోగలరు** ఒక ప్రొఫెషనల్ వెబ్‌సైట్‌ను సెమాంటిక్ HTML అంశాలతో
- **స్టైలింగ్ చేయగలరు** ఆధునిక CSS సాంకేతికతలతో రెస్పాన్సివ్ లేఅవుట్లను
- **ఇంప్లిమెంట్ చేయగలరు** ప్రాథమిక వెబ్ టెక్నాలజీల సాయంతో ఇంటరాక్టివ్ ఫీచర్స్
- **డిప్లాయ్ చేయగలరు** షేర్ చేయగల URLతో ప్రత్యక్ష వెబ్‌సైట్‌ను
- **డెమోనస్ట్రేట్ చేయగలరు** వెర్షన్ కంట్రోల్ ఉత్తమ ప్రాక్టీసెస్‌ను పూరా డెవలప్‌మెంట్ ప్రాసెస్‌లో
## ముందస్తు అవసరాలు
ఈ అసైన్‌మెంట్ ప్రారంభించేముందు, మీరు ఇవి కలిగి ఉండాలి:
- GitHub ఖాతా ([github.com](https://github.com/) వద్ద సృష్టించుకోవచ్చు)
- VSCode.dev పాఠంపై ఇంటర్‌ఫేస్ నావిగేషన్ మరియు ప్రాథమిక ఆపరేషన్ల పూర్తి అవగాహన
- HTML నిర్మాణం మరియు CSS స్టైలింగ్ యొక్క ప్రాథమిక అవగాహన
## ప్రాజెక్ట్ సెట్ అప్ మరియు రిపోజిటరీ సృష్టి
మీ ప్రాజెక్టు పునాది సెట్ చేయడంపై ప్రారంభిద్దాం. ఈ ప్రక్రియ వాస్తవ ప్రపంచ డెవలప్‌మెంట్ వర్క్‌ఫ్లోలను ప్రతిబింబిస్తుంది, ఇక్కడ ప్రాజెక్టులు సరైన రిపోజిటరీ ప్రారంభం మరియు నిర్మాణం ప్లానింగ్‌తో మొదలవుతాయి.
### దశ 1: మీ GitHub రిపోజిటరీని సృష్టించండి
మూల్యమైన రిపోజిటరీ సెట్ అప్ మీ ప్రాజెక్టును సరైన రీతిలో ఆర్గనైజ్ చేసి వెర్షన్ కంట్రోల్‌ను ప్రారంభించడానికి హెల్ప్ చేస్తుంది.
1. [GitHub.com](https://github.com) ప్రామాణీకృతంగా ప్రముఖీకరించండి మరియు మీ ఖాతాలో లాగిన్ అవ్వండి
2. ఎడమపై ఉన్న ఆకుపచ్చ "New" బటన్ లేదా అగ్రభాగంలో "+" ఐకాన్‌ను క్లిక్ చేయండి
3. మీ రిపోజిటరీకి పేరు `my-resume` (లేదా వ్యక్తిగతీకరించిన పేరును, ఉదా: `john-smith-resume`) ఇవ్వండి
4. చిన్న వివరణ జోడించండి: "HTML మరియు CSSతో నిర్మించిన ప్రొఫెషనల్ రిజ్యూమ్ వెబ్‌సైట్"
5. "Public"ని ఎంచుకోండి, తద్వారా మీ రిజ్యూమ్ సంభావ్య ఎంప్లాయర్లకి అందుబాటులో ఉంటుంది
6. "Add a README file" ను చెక్ చేయండి, ఇది ప్రాథమిక ప్రాజెక్టు వివరణగా పనిచేస్తుంది
7. "Create repository" బటన్‌ను క్లిక్ చేసి సెట్ అప్ పూర్తి చేయండి
> 💡 **రిపోజిటరీ పేరు ఎంపిక సూచన:** ప్రాజెక్టు ఉద్దేశాన్ని స్పష్టంగా సూచించే వివరమైన, ప్రొఫెషనల్ పేర్లను ఉపయోగించండి. ఇది ఎంప్లాయర్లకు లేదా పోర్ట్‌ఫోలియో సమీక్షల సమయంలో సహాయపడుతుంది.
### దశ 2: ప్రాజెక్టు నిర్మాణాన్ని ప్రారంభించండి
VSCode.dev లో రిపోజిటరీ ఓపెన్ చేయడానికి కనీసం ఒక ఫైల్ అవసరం కనుక, మేము GitHubపై నేరుగా మా ప్రధాన HTML ఫైల్‌ను రూపొందిస్తాము, తర్వాత వెబ్ ఎడిటర్‌కు మారతాము.
1. మీ రిపోజిటరీలో "creating a new file" లింక్‌పై క్లిక్ చేయండి
2. ఫైల్ పేరు గా `index.html` టైప్ చేయండి
3. ఈ మొదటి HTML నిర్మాణం జోడించండి:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Professional Resume</title>
</head>
<body>
<h1>Your Name</h1>
<p>Professional Resume Website</p>
</body>
</html>
```
4. "Add initial HTML structure" అనే కమిట్ మెసేజ్ రాయండి
5. "Commit new file" క్లిక్ చేసి మీ మార్పులను సురక్షితం చేయండి
![Creating initial file on GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.te.png)
**ఈ ప్రారంభ సెటప్ ఏమి అందిస్తుంది:**
- సెమాంటిక్ అంశాలతో సరైన HTML5 డాక్యుమెంట్ నిర్మాణం ఏర్పాటు
- ప్రతిస్పందించే డిజైన్ కు viewport మెటా ట్యాగ్‌ను కలుపుతుంది
- బ్రౌజర్ టాబ్స్‌లో కనిపించే వివరణాత్మక పేజీ శీర్షిక సెటప్ చేస్తుంది
- ప్రొఫెషనల్ కంటెంట్ ఆర్గనైజేషన్ కోసం పునాది ఏర్పాటుచేస్తుంది
## VSCode.dev లో పని చేయడం
ఇప్పుడు మీ రిపోజిటరీ పునాది ఏర్పాటయినందున, మీరు ప్రధాన డెవలప్‌మెంట్ పనుల కోసం VSCode.devకి మారతాం. ఈ వెబ్ ఆధారిత ఎడిటర్ ప్రొఫెషనల్ వెబ్ డెవలప్‌మెంట్ కోసం అవసరమైన అన్ని టూల్స్‌ను అందిస్తుంది.
### దశ 3: VSCode.dev లో మీ ప్రాజెక్టును తెరవండి
1. కొత్త బ్రౌజర్ టాబ్‌లో [vscode.dev](https://vscode.dev) కు వెళ్లండి
2. స్వాగత స్క్రీన్‌లో "Open Remote Repository" పై క్లిక్ చేయండి
3. GitHub నుండి మీ రిపోజిటరీ URLను కాపీ చేసి ఇవ్వబడిన ఇన్‌పుట్ ఫీల్డ్‌లో పేస్ట్ చేయండి
ఫార్మాట్: `https://github.com/your-username/my-resume`
*`your-username` స్థానంలో మీ GitHub యూజర్‌నేమ్ వాడండి*
4. ఎంటర్ నొక్కండి, ప్రాజెక్ట్ లోడ్ అవుతుంది
✅ **సక్సెస్ సూచిక**: ఎక్స్ప్లోరర్ సైడ్‌బార్‌లో మీ ప్రాజెక్ట్ ఫైళ్లు కనిపించాలి మరియు `index.html` ఎడిట్ చేయడానికి అందుబాటులో ఉండాలి.
![Project loaded in VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.te.png)
**ఇంటర్‌ఫేస్‌లో మీరు చూడగలిగేది:**
- **ఎక్స్ప్లోరర్ సైడ్‌బార్**: మీ రిపోజిటరీ ఫైళ్లను మరియు ఫోల్డర్ నిర్మాణాన్ని ప్రదర్శిస్తుంది
- **ఎడిటర్ ఏరియా**: ఎంచుకున్న ఫైళ్ల కంటెంట్‌ను ఎడిట్ చేయడానికి చూపిస్తుంది
- **యాక్టివిటీ బార్**: సోర్స్ కంట్రోల్ మరియు ఎక్స్‌టెన్షన్స్ వంటి ఫీచర్‌లను యాక్సెస్ అందిస్తుంది
- **స్టేటస్ బార్**: కనెక్షన్ స్థితి మరియు ప్రస్తుత బ్రాంచ్ సమాచారం చూపిస్తుంది
### దశ 4: మీ రిజ్యూమ్ కంటెంట్‌ను నిర్మించండి
`index.html` లో ఉన్న ప్లేస్‌హోల్డర్ కంటెంట్‌ను మీ ఫుల్ రిజ్యూమ్ నిర్మాణంతో భర్తీ చేయండి. ఈ HTML మీ అర్హతల ప్రొఫెషనల్ ప్రదర్శనకు పునాది ఈవుతుంది.
<details>
<summary><b>పూర్తి HTML రిజ్యూమ్ నిర్మాణం</b></summary>
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Your Name - Professional Resume</title>
</head>
<body>
<header id="header">
<h1>Your Full Name</h1>
<hr>
<p class="role">Your Professional Title</p>
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>CONTACT</h2>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:your.email@domain.com">your.email@domain.com</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="https://github.com/your-username">github.com/your-username</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="https://linkedin.com/in/your-profile">linkedin.com/in/your-profile</a>
</p>
</section>
<section>
<h2>SKILLS</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript (ES6+)</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
<li>Problem Solving</li>
</ul>
</section>
<section>
<h2>EDUCATION</h2>
<h3>Your Degree or Certification</h3>
<p>Institution Name</p>
<p>Start Date - End Date</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>ABOUT</h2>
<p>Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.</p>
</section>
<section>
<h2>WORK EXPERIENCE</h2>
<div class="job">
<h3>Job Title</h3>
<p class="company">Company Name | Start Date – End Date</p>
<ul>
<li>Describe a key accomplishment or responsibility</li>
<li>Highlight specific skills or technologies used</li>
<li>Quantify impact where possible (e.g., "Improved efficiency by 25%")</li>
</ul>
</div>
<div class="job">
<h3>Previous Job Title</h3>
<p class="company">Previous Company | Start Date – End Date</p>
<ul>
<li>Focus on transferable skills and achievements</li>
<li>Demonstrate growth and learning progression</li>
<li>Include any leadership or collaboration experiences</li>
</ul>
</div>
</section>
<section>
<h2>PROJECTS</h2>
<div class="project">
<h3>Project Name</h3>
<p>Brief description of what the project accomplishes and technologies used.</p>
<a href="#" target="_blank">View Project</a>
</div>
</section>
</article>
</main>
</body>
</html>
```
</details>
**అనుకూలీకరణ గైడ్‌లైన్స్:**
- అన్ని ప్లేస్‌హోల్డర్ టెక్ట్స్‌ను మీ నిజమైన సమాచారంతో మార్చండి
- మీ అనుభవం స్థాయి మరియు కెరీర్ దృష్టికి అనుగుణంగా విభాగాలను సవరిస్తూ ఉండండి
- కావలసిన ప‍రిస్థితుల్లో విభాగాల జోడింపు లేదా తొలగింపులు చేయండి (ఉదా: సర్టిఫికేషన్స్, వాలంటీర్ వర్క్, భాషలు)
- మీ నిజమైన ప్రొఫైళ్లు మరియు ప్రాజెక్టులకు లింకులు జోడించండి
### దశ 5: మద్దతు ఫైళ్లు సృష్టించండి
ప్రొఫెషనల్ వెబ్‌సైట్‌లు సుసంస్థిత ఫైల్ నిర్మాణాలు అవసరం. పూర్తి ప్రాజెక్టు కోసం CSS స్టైల్షీట్ మరియు కాన్ఫిగరేషన్ ఫైళ్లను సృష్టించండి.
1. ఎక్స్ప్లోరర్ సైడ్‌బార్ లో మీ ప్రాజెక్ట్ ఫోల్డర్ పేరు పై హోవర్ చేయండి
2. కనిపించే "New File" (📄+) ఐకాన్ పై క్లిక్ చేయండి
3. ఈ ఫైళ్లను ఒక్కోదానిగా సృష్టించండి:
- `style.css` (స్టైలింగ్ మరియు లేఅవుట్ కోసం)
- `codeswing.json` (ప్రివ్యూ ఎక్స్‌టెన్షన్ కాన్ఫిగరేషన్ కోసం)
**CSS ఫైల్ (`style.css`) సృష్టించుట:**
<details>
<summary><b>ప్రొఫెషనల్ CSS స్టైలింగ్</b></summary>
```css
/* Modern Resume Styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
max-width: 960px;
margin: 0 auto;
padding: 20px;
color: #333;
background-color: #f9f9f9;
}
/* Header Styling */
header {
text-align: center;
margin-bottom: 3em;
padding: 2em;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 3em;
letter-spacing: 0.1em;
margin-bottom: 0.2em;
font-weight: 300;
}
.role {
font-size: 1.3em;
font-weight: 300;
margin: 1em 0;
}
/* Main Content Layout */
main {
display: grid;
grid-template-columns: 35% 65%;
gap: 3em;
margin-top: 3em;
background: white;
padding: 2em;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Typography */
h2 {
font-size: 1.4em;
font-weight: 600;
margin-bottom: 1em;
color: #667eea;
border-bottom: 2px solid #667eea;
padding-bottom: 0.3em;
}
h3 {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 0.5em;
color: #444;
}
/* Section Styling */
section {
margin-bottom: 2.5em;
}
#mainLeft {
border-right: 1px solid #e0e0e0;
padding-right: 2em;
}
/* Contact Links */
section a {
color: #667eea;
text-decoration: none;
transition: color 0.3s ease;
}
section a:hover {
color: #764ba2;
text-decoration: underline;
}
/* Icons */
i {
margin-right: 0.8em;
width: 20px;
text-align: center;
color: #667eea;
}
/* Lists */
ul {
list-style: none;
padding-left: 0;
}
li {
margin: 0.5em 0;
padding: 0.3em 0;
position: relative;
}
li:before {
content: "▸";
color: #667eea;
margin-right: 0.5em;
}
/* Work Experience */
.job, .project {
margin-bottom: 2em;
padding-bottom: 1.5em;
border-bottom: 1px solid #f0f0f0;
}
.company {
font-style: italic;
color: #666;
margin-bottom: 0.5em;
}
/* Responsive Design */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
gap: 2em;
}
#mainLeft {
border-right: none;
border-bottom: 1px solid #e0e0e0;
padding-right: 0;
padding-bottom: 2em;
}
h1 {
font-size: 2.2em;
}
body {
padding: 10px;
}
}
/* Print Styles */
@media print {
body {
background: white;
color: black;
font-size: 12pt;
}
header {
background: none;
color: black;
box-shadow: none;
}
main {
box-shadow: none;
}
}
```
</details>
**కాన్ఫిగరేషన్ ఫైల్ (`codeswing.json`) సృష్టించటం:**
```json
{
"scripts": [],
"styles": []
}
```
**CSS ముఖ్యమైన ఫీచర్ల అవగాహన:**
- CSS Grid ఉపయోగించి రెస్పాన్సివ్, ప్రొఫెషనల్ లేఅవుట్ నిర్మాణం
- ఆధునిక రంగుల స్కీమ్స్ తో గ్రేడియంట్ హెడర్స్ అమలు
- హోవర్ ఎఫెక్ట్స్ మరియు స్మూత్ ట్రాన్సిషన్స్ ఇంటరాక్టివిటీకి
- అన్ని డివైస్ పరిమాణాల్లో పనిచేసే రెస్పాన్సివ్ డిజైన్
- PDF జనరేషన్ కోసం ప్రింట్-ఫ్రెండ్లీ స్టైల్స్ కూడా ఉన్నాయి
### దశ 6: ఎక్స్‌టెన్షన్లు ఇన్‌స్టాల్ చేసి కాన్ఫిగర్ చేయండి
ఎక్స్‌టెన్షన్లు మీ డెవలప్‌మెంట్ అనుభవాన్ని మెరుగుపరుస్తాయి, ప్రత్యక్ష ప్రివ్యూ సామర్ధ్యం మరియు మెరుగైన వర్క్‌ఫ్లో కల్పిస్తూ. CodeSwing ఎక్స్‌టెన్షన్ వెబ్ డెవలప్‌మెంట్ ప్రాజెక్టులకి చాలా ఉపయోగకరంగా ఉంటుంది.
**CodeSwing ఎక్స్‌టెన్షన్ ఇన్‌స్టాల్ చేయటం:**
1. యాక్టివిటీ బార్‌లో ఎక్స్‌టెన్షన్స్ ఐకాన్ (🧩) పై క్లిక్ చేయండి
2. మార్కెట్ప్లేస్ సర్చ్ బాక్స్ లో "CodeSwing" సర్చ్ చేయండి
3. ఫలితాల నుండి CodeSwing ఎక్స్‌టెన్షన్‌ని ఎంచుకోండి
4. నీలి "Install" బటన్ పై క్లిక్ చేయండి
![Installing the CodeSwing extension](../../../../8-code-editor/images/install-extension.gif)
**CodeSwing అందించే సౌలభ్యాలు:**
- ఎడిట్ చేస్తున్నప్పుడు మీ వెబ్‌సైట్ ప్రత్యక్ష ప్రివ్యూ కొనసాగుతుంది
- మానువల్ రిఫ్రెష్ లేకుండా మార్పులు తక్షణమే కనిపిస్తాయి
- HTML, CSS మరియు JavaScript లాంటి బహుళ ఫైల్ రకాల మద్దతు
- ఇంటిగ్రేటెడ్ డెవలప్‌మెంట్ ఎన్విరాన్‌మెంట్ అనుభవం
**ఇన్‌స్టాలేషన్ తర్వాత తక్షణ ఫలితాలు:**
CodeSwing ఇన్‌స్టాల్ అయిన వెంటనే, మీరు మీ రిజ్యూమ్ వెబ్‌సైట్ ప్రత్యక్ష ప్రివ్యూకు ఎడిటర్‌లో కనిపిస్తుంది. ఇది మార్పులు చేసినపుడు మీ సైట్ ఎలా కనిపిస్తోంది అనేది స్పష్టంగా చూసుకోవడానికీ సహాయపడుతుంది.
![CodeSwing extension showing live preview](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.te.png)
**మెరుగైన ఇంటర్‌ఫేస్ అవగాహన:**
- **స్ప్లిట్ వ్యూస్**: ఒకవైపు కోడ్, మరొకవైపు ప్రత్యక్ష ప్రివ్యూ చూపిస్తుంది
- **రియల్ టైమ్ అప్‌డేట్స్**: మీరు టైప్ చేస్తున్నప్పుడే మార్పులు ప్రతిబింబిస్తాయి
- **ఇంటరాక్టివ్ ప్రివ్యూ**: లింకులు, ఇంటరాక్షన్‌లను పరీక్షించవచ్చు
- **మొబైల్ సిములేషన్**: రెస్పాన్సివ్ డిజైన్ పరీక్ష సామర్థ్యం అందిస్తుంది
### దశ 7: వెర్షన్ కంట్రోల్ మరియు ప్రచురణ
ఇప్పుడు మీ రిజ్యూమ్ వెబ్‌సైట్ పూర్తి అయినందున, Gitను ఉపయోగించి మీ పని సేవ్ చేసి ఆన్‌లైన్లో అందుబాటులో ఉంచండి.
**మార్పులను కమిట్ చేయడం:**
1. యాక్టివిటీ బార్‌లో సోర్స్ కంట్రోల్ ఐకాన్ (🌿) పై క్లిక్ చేయండి
2. "Changes" సెక్షన్‌లో మీరు సృష్టించిన మరియు మార్చిన ఫైళ్లు ని సమీక్షించండి
3. ప్రతి ఫైల్ పక్షం ఉన్న "+" ఐకాన్ మీద క్లిక్ చేసి వేర్పరి స్టేజింగ్ చేయండి
4. వివరణాత్మక కమిట్ మెసేజ్ వ్రాయండి, ఉదా:
- "Add complete resume website with responsive design"
- "Implement professional styling and content structure"
5. మార్పుల కమిట్ మరియు పుష్ చేయడానికి చెక్ మార్క్ (✓) పై క్లిక్ చేయండి
**ప్రభావవంతమైన కమిట్ మెసేజ్ ఉదాహరణలు:**
- "Add professional resume content and styling"
- "Implement responsive design for mobile compatibility"
- "Update contact information and project links"
> 💡 **ప్రొఫెషనల్ సూచన**: మంచి కమిట్ మెసేజ్‌లు మీ ప్రాజెక్ట్ అభివృద్ధి ట్రాక్ చేయడంలో మరియు ఎంప్లాయర్లు గౌరవించే వివరాలపై దృష్టి ఉంచడంలో సహాయపడతాయి.
**మీ ప్రచురించిన సైట్ యాక్సెస్ చేయడం:**
కమిట్ చేసిన తర్వాత, మీరు GitHub రిపోజిటరీకి తిరిగి వెళ్ళడానికి ఎడమ-పైన ఉన్న హాంబర్గర్ మెనూ (☰) ఉపయోగించవచ్చు. ఇప్పుడు మీ రిజ్యూమ్ వెబ్‌సైట్ వెర్షన్ కంట్రోల్డ్ కలిగి, డిప్లాయ్‌మెంట్ లేదా షేరింగ్‌కు సిద్ధంగా ఉంది.
## ఫలితాలు మరియు తదుపరి దశలు
**అభినందనలు! 🎉** మీరు VSCode.dev ఉపయోగించి ప్రొఫెషనల్ రిజ్యూమ్ వెబ్‌సైట్ సఫలంగా తయారుచేసారు. మీ ప్రాజెక్ట్ ఈ కింది వాటిని చూపిస్తుంది:
**సాంకేతిక నైపుణ్యాలు:**
- **రిపోజిటరీ నిర్వహణ**: పూర్తి ప్రాజెక్టు నిర్మాణం సృష్టించి ఆర్గనైజ్ చేసినది
- **వెబ్ డెవలప్‌మెంట్**: ఆధునిక HTML5 మరియు CSS3తో రెస్పాన్సివ్ వెబ్‌సైట్ నిర్మాణం
- **వర్షన్ కంట్రోల్**: అర్థవంతమైన కమిట్లతో సరైన Git వర్క్‌ఫ్లో అమలు
- **టూల్ ప్రావీణ్యం**: VSCode.dev ఇంటర్‌ఫేస్ మరియు ఎక్స్‌టెన్షన్ సిస్టమ్‌ను సమర్థవంతంగా ఉపయోగించడం
**ప్రొఫెషనల్ ఫలితాలు:**
- **ఆన్‌లైన్ ప్రొజెన్స్**: మీ అర్హతలను ప్రదర్శించే షేర్ చేయగల URL
- **ఆధునిక ఫార్మాట్**: సంప్రదాయ PDF రిజ్యూమ్‌కు ప్రత్యామ్నాయంగా ఇంటరాక్టివ్ వెబ్‌సైట్
- **నైపుణ్యాల నిరూపణ**: మీ వెబ్ డెవలప్‌మెంట్ సామర్థ్యాల కొరకు స్పష్టమైన సాక్ష్యం
- **ఈజీ అప్‌డేట్స్**: మీరు సాఫీగా మెరుగులు చేసి, అనుకూలీకరించుకోవచ్చును
### డిప్లాయ్‌మెంట్ ఎంపికలు
మీ రిజ్యూమ్‌ను ఎంప్లాయర్లకు అందుబాటులో ఉంచడానికి ఈ హోస్టింగ్ ఎంపికలను పరిగణనలోకి తీసుకోండి:
**GitHub Pages (సిఫార్సు చేసినది):**
1. GitHubలో మీ రిపోజిటరీ సెట్టింగ్స్ కు వెళ్ళండి
2. "Pages" సెక్షన్‌కు స్క్రోల్ చేయండి
3. "Deploy from a branch" ఎంచుకుని "main" బ్రాంచ్‌ను సెలెక్ట్ చేయండి
4. మీ సైట్ ఈ URL వద్ద అందుబాటులో ఉంటుంది `https://your-username.github.io/my-resume`
**విభిన్న ప్లాట్‌ఫారమ్‌లు:**
- **Netlify**: కస్టమ్ డొమెయిన్‌లతో ఆటోమేటిక్ డిప్లాయ్‌మెంట్
- **Vercel**: ఆధునిక హోస్టింగ్ వసతులు మరియు వేగవంతమైన డిప్లాయ్‌మెంట్
- **GitHub Codespaces**: బిల్ట్-ఇన్ ప్రివ్యూ ఉన్న డెవలప్‌మెంట్ ఎన్విరాన్‌మెంట్
### అభివృద్ధి సూచనలు
మీ నైపుణ్యాలను అభివృద్ధి చేయటానికి ఈ ఫీచర్స్ జోడించండి:
**సాంకేతిక మెరుగుదలలు:**
- **JavaScript ఇంటరాక్టివిటీ**: స్మూత్ స్క్రోలింగ్ లేదా ఇంటరాక్టివ్ అంశాలు జోడించండి
- **డార్క్ మోడ్ టోగుల్**: యూజర్ ఇష్టానుసారం థీమ్ స్విచింగ్ అమలు చేయండి
- **కాంటాక్ట్ ఫారమ్**: సంభావ్య ఎంప్లాయర్ల నుండి నేరుగా సంప్రదింపు కోసం ఫారమ్ వాడుకోండి
- **SEO ఆప్టిమైజేషన్**: మెటా ట్యాగ్స్, స్ట్రక్చర్డ్ డేటా మరియు పనితీరు మెరుగుదల జోడించండి
**కంటెంట్ మెరుగుదలలు:**
- **ప్రాజెక్ట్ పోర్ట్‌ఫోలియో**: GitHub రిపోజిటరీలు మరియు ప్రత్యక్ష ప్రదర్శనలకు లింకులు
- **నైపుణ్యాల దృశ్యీకరణ**: ప్రోగ్రెస్ బార్లు లేదా నైపుణ్య రేటింగ్ సిస్టమ్స్ సృష్టించండి
- **టెస్టిమోనియల్స్ విభాగం**: సహకారులు లేదా ఇన్స్ట్రక్టర్ల నుండి రికమెండేషన్లు చేర్చండి
- **బ్లాగ్ ఇంటిగ్రేషన్**: నేర్చుకునే ప్రయాణం చూపించే బ్లాగ్ సెక్షన్ జోడించండి
## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀
ఏజెంట్ మోడ్ ఉపయోగించి ఈ కింది సవాలు పూర్తి చేయండి:
**వివరణ:** మీ రిజ్యూమ్ వెబ్‌సైట్‌ను ప్రొఫెషనల్ వెబ్ డెవలప్‌మెంట్ సామర్ధ్యాలు మరియు ఆధునిక డిజైన్ ప్రిన్సిపుల్స్‌ను చూపించే అభివృద్ధి ఫీచర్స్‌తో నెమ్మదిగా పంచుకోండి.
**ప్రాంప్ట్:** మీరు ఇప్పటికే ఉన్న రిజ్యూమ్ వెబ్‌సైట్‌పై ఆధారపడుతూ, ఈ అభివృద్ధి ఫీచర్లను ఇంప్లిమెంట్ చేయండి:
1. స్మూత్ ట్రాన్సిషన్లతో డార్క్/లైట్ థీమ్ టోగుల్ జోడించండి
2. యానిమేటెడ్ ప్రోగ్రెస్ బార్లతో ఇంటరాక్టివ్ స్కిల్స్ సెక్షన్ సృష్టించండి
3. ఫారమ్ వాలిడేషన్‌తో కాంటాక్ట్ ఫారం అమలు చేయండి
4. హోవర్ ఎఫెక్ట్స్ మరియు మోడల్ పాప్-అప్స్‌తో ప్రాజెక్టులు పోర్ట్‌ఫోలియో సెక్షన్ జోడించండి
5. కనీసం 3 ఉదాహరణ పోస్టులతో మీ నేర్చుకునే ప్రయాణాన్ని బ్లాగ్ సెక్షన్‌లో చేర్చండి
6. SEO కోసం సరైన మెటా ట్యాగ్స్, స్ట్రక్చర్డ్ డేటా, మరియు పనితీరు ఆప్టిమైజేషన్ చేయండి
7. అభివృద్ధి చేసిన సైట్‌ను GitHub Pages లేదా Netlify ద్వారా డిప్లాయ్ చేయండి
8. README.md లో అన్ని కొత్త ఫీచర్లను స్క్రీన్‌షాట్లుతో డాక్యుమెంట్ చేయండి
మీ అభివృద్ధి వెబ్‌సైట్ ఆధునిక వెబ్ డెవలప్‌మెంట్ అభ్యాసాలను ఉపయోక్తరైతుగా, ప్రతిస్పందించే డిజైన్, JavaScript ఇంటరాక్టివిటీ, మరియు ప్రొఫెషనల్ డిప్లాయ్‌మెంట్ వర్క్‌ఫ్లోలను చూపించాలి.
## ఛాలెంజ్ విస్తరణ
మీ నైపుణ్యాలను మరింత మెరుగుపర్చడానికి, ఈ అభివృద్ధి సవాళ్ళను ప్రయత్నించండి:
**📱 మొబైల్-ఫస్ట్ రీడిజైన్:** CSS Grid మరియు Flexbox ఉపయోగించి మొబైల్-ఫస్ట్ విధానం ద్వారా మీ సైట్‌ను పూర్తిగా పునర్నిర్మాణం చేయండి
**🔍 SEO ఆప్టిమైజేషన్:** మెటా ట్యాగ్స్, స్ట్రక్చర్డ్ డేటా, మరియు పనితీరు ఆప్టిమైజేషన్లతో సమగ్రమైన SEO అమలు చేయండి
**🌐 బహుభాషా మద్దతు:** బహుభాషలను మద్దతు చూపే ఇంటర్నేషనలైజేషన్ ఫీచర్‌లను చేర్చండి
**📊 అనలిటిక్స్ ఇంటిగ్రేషన్:** గూగుల్ అనలిటిక్స్‌ను జోడించి సందర్శకుల ఎంగేజ్‌మెంట్‌ని ట్రాక్ చేయండి మరియు కంటెంట్‌ను ఆప్టిమైజ్ చేయండి
**🚀 పనితీరు ఆప్టిమైజేషన్:** అన్ని విభాగాలలో పార్ఫెక్ట్ లైట్లౌస్ స్కోర్లు సాధించండి
## సమీక్ష & స్వీయ అధ్యయనం
ఈ వనరులతో మీ జ్ఞానాన్ని విస్తరించుకోండి:
**అధునాతన VSCode.dev ఫీచర్స్:**
- [VSCode.dev డాక్యుమెంటేషన్](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - వెబ్ ఆధారిత ఎడిటింగ్ సంపూర్ణ గైడ్
- [GitHub Codespaces](https://docs.github.com/en/codespaces) - క్లౌడ్ డెవలప్‌మెంట్ వాతావరణాలు
**వెబ్ డెవలప్‌మెంట్ ఉత్తమ అభ్యాసాలు:**
- **రెస్పాన్సివ్ డిజైన్**: ఆధునిక లేఅవుట్‌ల కోసం CSS Grid మరియు Flexbox అధ్యయనం చేయండి
- **అభివృద్ధి సౌలభ్యం**: సమగ్ర వెబ్ డిజైన్ కోసం WCAG మార్గదర్శకాలను నేర్చుకోండి
- ** పనితీరు**: ఉత్తమీకరణ కోసం Lighthouse వంటి టూల్స్‌ను తెలివిగా ఉపయోగించండి
- **SEO**: సెర్చ్ ఇంజಿನ್ ఆప్టిమైజేషన్ ప్రాథమికాంశాలను అర్థం చేసుకోండి
**వృత్తిపరమైన అభివృద్ధి:**
- **పోర్ట్‌ఫోలియో నిర్మాణం**: వివిధ నైపుణ్యాలను ప్రదర్శించడానికి అదనపు ప్రాజెక్టులు సృష్టించండి
- **ఓపెన్ సోర్స్**: సహకార అనుభవం పొందటానికి ఉన్న ప్రాజెక్టులకు సేవ చేయండి
- **నెట్‌వర్కింగ్**: అభిప్రాయం కోసం డెవలపర్ కమ్యూనిటీల్లో మీ రిజ్యూమ్ వెబ్‌సైట్‌ను పంచుకోండి
- **నిరంతర అభ్యాసం**: వెబ్ అభివృద్ధి ధోరణులు మరియు సాంకేతికతలతో నవీకరించుకోండి
---
**మీ తదుపరి పల్లకిలా:** స్నేహితులు, కుటుంబసభ్యులు లేదా మెంటార్లతో మీ రిజ్యూమ్ వెబ్‌సైట్‌ను పంచుకొని అభిప్రాయం పొందండి. వారి సూచనలను ఉపయోగించి మీ డిజైన్‌ను మెరుగుపరుచుకోండి. గమనించండి, ఈ ప్రాజెక్ట్ కేవలం ఒక రిజ్యూమ్ కాదు – ఇది ఒక వెబ్ డెవలపర్‌గా మీ పెరుగుదల యొక్క ప్రదర్శన!
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**నిరాకరణ**:
ఈ డాక్యుమెంట్ [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవను ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తూనే ఉన్నా, స్వయం తప్పులేని అనువాదాల్లో పొరపాట్లు లేదా తప్పులు ఉండొచ్చు. మూల డాక్యుమెంట్ దాని స్థానిక భాషలో అధికారిక మూలమైనట్లు పరిగణించబడాలి. ముఖ్య సమాచారం కోసం, నిపుణుల ద్వారా మానవ అనువాదం పొందడానికి సిఫార్సు చేస్తున్నాము. ఈ అనువాదం వలన సహజమవుతున్న ఏమైనా అవగాహన లోటు లేదా తప్పుదిద్దుబాట్లకు మేము బాధ్యులు కాదని నోట్లిచ్చుకుంటున్నాము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

2383
translations/te/9-chat-project/README.md
View File

File diff suppressed because it is too large Load Diff

20
translations/te/9-chat-project/solution/README.md
Unescape View File

@ -0,0 +1,20 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2026-01-08T20:38:26+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "te"
}
-->
# Run solution
1. ప్రారంభించండి [backend](./backend/README.md)
1. ఇప్పుడు ప్రారంభించండి [fronten](./frontend/README.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**విమర్శన**:
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించాం. మనం సరిగ్గా ఉండేందుకు ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పులు లేదా లోపాలు ఉండవచ్చు. అసలు పత్రం దాని మూల భాషలోనే అధికారిక మూలంగా భావించాలి. కీలక సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదం చేయించుకోవాలని సూచన. ఈ అనువాదం ఉపయోగంపై తలెత్తిన ఎలాంటి అపార్థాలు మరియు మూల్యాంకనాలకు మేము బాధ్యులు కావము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

19
translations/te/9-chat-project/solution/backend/README.md
Unescape View File

@ -0,0 +1,19 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2026-01-08T20:44:30+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "te"
}
-->
మీ రన్‌టైమ్‌ని ఎంచుకోండి
- [Python](./python/README.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్వీకరణ**:
ఈ దస్త్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వం కోసం ప్రయత్నిస్తూనే ఉన్నప్పటికీ, స్వయంచాలక అనువాదాలలో లోపాలు లేదా తప్పులు ఉండవచ్చు. అసలైన దస్త్రం మూల భాషలోని దానే ఆధికారం కలిగిన మూలం. ముఖ్య సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదాన్ని పరిగణించమని సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వలన కలిగే ఏవైనా అపార్థాలు లేదా తప్పుగా అర్థం చేసుకోవడంపై మేము బాధ్యత తీసుకోము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

64
translations/te/9-chat-project/solution/backend/python/README.md
Unescape View File

@ -0,0 +1,64 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "0aaa930f076f2d83cc872ad157f8ffd3",
"translation_date": "2026-01-08T20:45:19+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "te"
}
-->
# కోడ్ నడపండి
## సెటప్
వర్చువల్ ఎన్విరాన్‌మెంట్ సృష్టించండి
```sh
python -m venv venv
source ./venv/bin/activate
```
## డిపెండెన్సీలను ఇన్‌స్టాల్ చేయండి
```sh
pip install openai fastapi uvicorn python-dotenv
```
## API నడపండి
```sh
# విధానం 1: నేరుగా అమలు చేయడం
python api.py
# విధానం 2: uvicorn ఉపయోగించడం
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
```
## APIని పరీక్షించండి
ఇంటరాక్టివ్ API డాక్యుమెంటేషన్ ని సందర్శించండి: `http://localhost:5000/docs`
## ఫ్రంట్‌ఎండ్ నడపండి
మీరు ఫ్రంట్‌ఎండ్ ఫోల్డర్ లో ఉంటున్నారని నిర్ధారించుకోండి
*app.js* ని కనుగొని, `BASE_URL` ను మీ బ్యాక్‌ఎండ్ URL కి మార్చండి
అది నడపండి
```
npx http-server -p 8000
```
చాట్ లో సందేశం టైప్ చేయడానికి ప్రయత్నించండి, మీకు స్పందన కనిపించాలి (మీరు దీన్ని కోడ్స్పేస్ లో నడుపుతుంటే లేదా యాక్సెస్ టోకెన్ సెటప్ చేసుకున్నట్లయితే).
## యాక్సెస్ టోకెన్ సెటప్ (మీరు దీన్ని కోడ్స్పేస్ లో నడపకపోతే)
[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) చూడండి
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ పత్రాన్ని AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువాదం చేయబడింది. మేము సరిగా ఉండేందుకు శ్రమిస్తూన్నాం గానీ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా అసత్యాలు ఉండవచ్చు. అసలు పత్రం దీని స్థానిక భాషలోనే అధికారిక మూలసూచనగా పరిగణించాలి. ముఖ్యమైన సమాచారానికై, నిపుణుల మానవ అనువాదాన్ని సూచిస్తున్నాము. ఈ అనువాదాన్ని ఉపయోగించడంవలన జరిగే ఏమైనా అపార్థాలు లేదా తప్పుగా అర్థం చేసుకోవడాలపై మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

23
translations/te/9-chat-project/solution/frontend/README.md
Unescape View File

@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2026-01-08T20:39:12+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "te"
}
-->
# కోడ్ ని కొనసాగించండి
```sh
npx http-server -p 3000
```
`app.js` లో `BASE_URL` ని కనుగొని దాన్ని వెనుకన ఉన్న బ్యాక్‌ఎండ్ URL కి సరిపోలేటట్టు మార్చండి.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**దరఖాస్తు**:
ఈ దస్త్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము శుద్ధత కోసం ప్రయత్నించిపోతున్నప్పటికీ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా తప్పులు ఉండే అవకాశం ఉండవచ్చు. మౌలిక భాషలో ఉన్న అసలు దస్త్రాన్ని అధికారిక మూలంగా పరిగణించాల్సివుందిది. ముఖ్యమైన సమాచారం కోసం, నిపుణుల చేతి అనువాదాన్ని సూచిస్తాము. ఈ అనువాదం ఉపయోగించడంలో ఏర్పడిన ఏవైనా అపార్థాలు లేదా తప్పుప్రాప్తులకి మేము బాధ్యత తీసుకోము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

417
translations/te/AGENTS.md
Unescape View File

@ -0,0 +1,417 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-01-08T10:23:14+00:00",
"source_file": "AGENTS.md",
"language_code": "te"
}
-->
# AGENTS.md
## Project Overview
ఇది ఆరంభకులకు వెబ్ అభివృద్ధి ప్రాథమికాలను బోధించడానికి ఒక విద్యా పాఠ్యక్రమ సంచయ కోశం. ఈ పాఠ్యపథకం మైక్రోసాఫ్ట్ క్లౌడ్ ఆక్టివ్‌లు అభివృద్ధి చేసిన 12-వారాల సమగ్ర కోర్సు, జావాస్క్రిప్ట్, CSS, మరియు HTML ను కవర్ చేసే 24 ప్రాయోగిక పాఠాలు కలిగి ఉంటుంది.
### Key Components
- **శిక్షణా విషయాలు**: ప్రాజెక్ట్-ఆధారిత మాడ్యూల్స్ లో 24 క్రమబద్ధీకరించిన పాఠాలు
- **ప్రాయోగిక ప్రాజెక్టులు**: టెరరియం, టైపింగ్ ఆట, బ్రౌజర్ ఎక్స్‌టెన్షన్, స్పేస్ ఆట, బాంకింగ్ ఆప్, కోడ్ ఎడిటర్, మరియు AI చాట్ అసిస్టెంట్
- **ఆకట్టుకునే క్విజ్‌లు**: ప్రతి పాఠానికి 3 ప్రశ్నలతో కలిపి 48 క్విజ్‌లు (పూర్వ / అనంతర-పాఠ పరీక్షలు)
- **బహుభాషా మద్దతు**: GitHub Actions ద్వారా 50+ భాషలకి స్వయంచాలక అనువాదాలు
- **సాంకేతికతలు**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI ప్రాజెక్టులకు)
### Architecture
- పాఠాల ఆధారంగా నిర్మించిన విద్యా కోశం
- ప్రతి పాఠం ఫోల్డర్ README, కోడ్ ఉదాహరణలు, పరిష్కారాలు కలిగి ఉంటుంది
- స్వతంత్ర ప్రాజెక్టులు వేరే డైరెక్టరీలలో (quiz-app, వివిధ పాఠ ప్రాజెక్టులు)
- GitHub Actions (co-op-translator) ఉపయోగించి అనువాద వ్యవస్థ
- Docsify ద్వారా డాక్యుమెంటేషన్ అందించబడుతుంది మరియు PDF లో కూడా అందుబాటులో ఉంది
## Setup Commands
ఈ సంచయ కోశం ఎక్కువగా విద్యా విషయాలను వినియోగించుకోవడానికి. ప్రత్యేక ప్రాజెక్టులతో పని చేయడానికి:
### Main Repository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # డెవలప్‌మెంట్ సర్వర్‌ను ప్రారంభించండి
npm run build # ఉత్పత్తి కోసం నిర్మించండి
npm run lint # ESLint నడపండి
```
### Bank Project API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # API సర్వర్‌ను ప్రారంభించండి
npm run lint # ESLint ని నడపండి
npm run format # Prettier తో ఫార్మాట్ చేయండి
```
### Browser Extension Projects
```bash
cd 5-browser-extension/solution
npm install
# బ్రౌజర్-ప్రత్యేక ఎక్స్‌టెన్షన్ లోడ్ చేయడం సంబంధిత సూచనలను అనుసరించండి
```
### Space Game Projects
```bash
cd 6-space-game/solution
npm install
# బ్రౌజర్‌లో index.html ని తెరవండి లేదా Live Server వినియోగించండి
```
### Chat Project (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# GITHUB_TOKEN పరిసర వేరియబుల్ సెట్చేయండి
python api.py
```
## Development Workflow
### For Content Contributors
1. **రిపాజిటరీని ఫోర్క్ చేయండి** మీ GitHub ఖాతాకు
2. **మీ fork ని స్థానికంగా క్లోన్ చేయండి**
3. మీ మార్పులకు **కొత్త బ్రాంచ్ సృష్టించండి**
4. పాఠ విషయాలు లేదా కోడ్ ఉదాహరణలలో మార్పులు చేయండి
5. సంబంధిత ప్రాజెక్ట్ డైరెక్టరీలలో కోడ్ మార్పులను పరీక్షించండి
6. సహకార మార్గదర్శకాలను అనుసరించి పుల్ రిక్వెస్ట్‌లు పంపండి
### For Learners
1. రిపాజిటరీని ఫోర్క్ లేదా క్లోన్ చేయండి
2. పాఠాల డైరెక్టరీలలో వరుసగా navigation చేయండి
3. ప్రతి పాఠం README ఫైళ్ళను చదవండి
4. pre-lesson క్విజ్‌లు పూర్తి చేయండి https://ff-quizzes.netlify.app/web/
5. పాఠం ఫోల్డర్లలోని కోడ్ ఉదాహరణలపై పని చేయండి
6. అసైన్‌మెంట్‌లు మరియు సవాళ్లను పూర్తి చేయండి
7. post-lesson క్విజ్‌లు పూర్తి చేయండి
### Live Development
- **డాక్యుమెంటేషన్**: రూట్ లో `docsify serve` నడపండి (పోర్ట్ 3000)
- **క్విజ్ ఆప్**: quiz-app డైరెక్టరీలో `npm run dev` నడపండి
- **ప్రాజెక్టులు**: HTML ప్రాజెక్టులకు VS Code Live Server ఎక్స్‌టెన్షన్ ఉపయోగించండి
- **API ప్రాజెక్టులు**: సంబంధిత API డైరెక్టరీలలో `npm start` నడపండి
## Testing Instructions
### Quiz App Testing
```bash
cd quiz-app
npm run lint # కోడ్ శైలి సమస్యలు తనిఖీ చేయండి
npm run build # నిర్మాణం విజయవంతమవుతుందో నిర్ధారించుకోండి
```
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # కోడ్ స్టైల్ సమస్యలను తనిఖీ చేయండి
node server.js # సర్వర్ లో తప్పులు లేకుండా ప్రారంభమవుతుందో ధృవీకరించండి
```
### General Testing Approach
- ఇది పూర్తిస్థాయి ఆటోమెటిక్ పరీక్షలలేని విద్యా రిపాజిటరీ
- మాన్యువల్ టెస్టింగ్ కింది అంశాలపై ఫోకస్ చేస్తుంది:
- కోడ్ ఉదాహరణలు ఎర్రర్ లేకుండా నడుస్తున్నాయా
- డాక్యుమెంటేషన్ లో లింకులు బాగా పనిచేస్తున్నాయా
- ప్రాజెక్ట్ బిల్డింగ్ విజయవంతమయింది
- ఉదాహరణలు ఉత్తమ అభ్యాసాలకు అనుగుణంగా ఉన్నాయా
### Pre-submission Checks
- package.json ఉన్న డైరెక్టరీలలో `npm run lint` నడపండి
- మార్క్డౌన్ లింకులు సరైనవా అని ధృవీకరించండి
- బ్రౌజర్ లేదా Node.js లో కోడ్ ఉదాహరణలను పరీక్షించండి
- అనువాదాలు సరైన నిర్మాణాన్ని కలిగి ఉన్నాయా అని పరిశీలించండి
## Code Style Guidelines
### JavaScript
- ఆధునిక ES6+ వాక్యరచన ఉపయోగించండి
- ప్రాజెక్టుల్లో కలిగిన ESLint నియమాలను అనుసరించండి
- విద్యార్థుల స్పష్టతకు అర్థమయ్యే వేరియబుల్ మరియు ఫంక్షన్ పేర్లను వాడండి
- కాంప్లెక్స్ కాన్సెప్ట్‌ల వివరణకు వ్యాఖ్యలు జోడించండి
- Prettier ద్వారా ఫార్మాటింగ్ చేయండి (అక్కడ అమర్చబడిన ఉంటే)
### HTML/CSS
- సేమాంటిక్ HTML5 ఎలిమెంట్స్ ఉపయోగించండి
- రెస్పాన్సివ్ డిజైన్ సూత్రాలు పాటించండి
- క్లియర్ క్లాస్ నేమింగ్ కన్వెన్షన్స్
- CSS సాంకేతికతలను అవగాహన కోసం వ్యాఖ్యలతో వివరించండి
### Python
- PEP 8 శైలీ మార్గదర్శకాలు
- సరళమైన, విద్యా కోడ్ ఉదాహరణలు
- నేర్చుకునే వారికి ఉపయోగపడే టైప్ హింట్స్
### Markdown Documentation
- స్పష్టమైన శీర్షిక హియరార్కీ
- భాష స్పష్టీకరణతో కోడ్ బ్లాక్స్
- అదనపు వనరులకు లింకులు
- `images/` డైరెక్టరీలలో స్క్రీన్‌షాట్లు మరియు చిత్రాలు
- అందుబాటుని పెంచేందుకు చిత్రాలకు ఆల్ట్ టెక్స్ట్
### File Organization
- పాఠాలు వరుస సంఖ్యలతో (1-getting-started-lessons, 2-js-basics, మొదలైనవి)
- ప్రతి ప్రాజెక్ట్ కి `solution/`, తరచుగా `start/` లేదా `your-work/` ఫోల్డర్లు ఉంటాయి
- చిత్రాలు పాఠానికి చెందిన `images/` ఫోల్డర్‌లలో భద్రపరచబడతాయి
- అనువాదాలు `translations/{language-code}/` నిర్మాణంలో
## Build and Deployment
### Quiz App Deployment (Azure Static Web Apps)
quiz-app Azure Static Web Appsకి కాన్ఫిగర్ చేయబడింది:
```bash
cd quiz-app
npm run build # dist/ ఫోల్డర్‌ను సృష్టిస్తుంది
# మెయిన్‌కు పుష్ చేసినప్పుడు GitHub Actions వర్క్‌ఫ్లో ద్వారా డిప్లాయ్ చేస్తుంది
```
Azure Static Web Apps కాన్ఫిగరేషన్:
- **యాప్ స్థానం**: `/quiz-app`
- **అవుట్‌పుట్ స్థానం**: `dist`
- **వర్క్ఫ్లో**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Documentation PDF Generation
```bash
npm install # docsify-to-pdf ని ఇన్‌స్టాల్ చేయండి
npm run convert # డాక్స్ నుండి PDF సృష్టించండి
```
### Docsify Documentation
```bash
npm install -g docsify-cli # Docsify ను గ్లోబల్గా ఇన్స్టాల్ చేయండి
docsify serve # localhost:3000 పై సర్వ్ చేయండి
```
### Project-specific Builds
ప్రతి ప్రాజెక్ట్ డైరెక్టరీకి తన స్వంత బిల్డ్ ప్రక్రియ ఉండవచ్చు:
- Vue ప్రాజెక్టులకు: `npm run build` ప్రొడక్షన్ బండిల్స్ సృష్టిస్తుంది
- స్థిర ప్రాజెక్టులు: బిల్డ్ స్టెప్ అవసరం లేదు, ఫైళ్ళను నేరుగా సేవ్ చేయండి
## Pull Request Guidelines
### Title Format
మార్పు ప్రాంతాన్ని స్పష్టంగా సూచించే టైటిల్స్ వాడండి:
- `[Quiz-app] పాఠం X కోసం కొత్త క్విజ్ జోడించండి`
- `[Lesson-3] టెరరియం ప్రాజెక్ట్ లో టైపో సరిచేయండి`
- `[Translation] పాఠం 5 కి స్పానిష్ అనువాదం జోడించండి`
- `[Docs] సెటప్ సూచనలు నవీకరించండి`
### Required Checks
PR సమర్పించే ముందు:
1. **కోడ్ నాణ్యత**:
- ప్రభావిత ప్రాజెక్ట్ డైరెక్టరీలలో `npm run lint` నడపండి
- అన్ని లింట్ లోపాలు, హెచ్చరికలు సరి చేయండి
2. **బిల్డ్ ధృవీకరణ**:
- అవసరమైతే `npm run build` నడపండి
- ఎలాంటి బిల్డ్ లోపాలు లేవన్నారు తేల్చుకోండి
3. **లింక్ చెల్లింపుదనం**:
- అన్ని మార్క్‌డౌన్ లింకులను పరీక్షించండి
- చిత్ర సూచనలు పనిచేస్తున్నాయా పరిశీలించండి
4. **విషయ సమీక్ష**:
- స్పెల్లింగ్, వ్యాకరణ పొరపాట్ల కోసం పృథ్వీశుద్ధి చేయండి
- కోడ్ ఉదాహరణలు సరైనవి మరియు విద్యా పరంగానూ సరైనవి
- అనువాదాలు మూల అర్థాన్ని కాపాడుతున్నాయా చూసుకోండి
### Contribution Requirements
- Microsoft CLAని అంగీకరించాలి (మొదటి PRపై ఆటోమెటిక్ చెక్)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)ని అనుసరించాలి
- పూర్తి మార్గదర్శకాలకు [CONTRIBUTING.md](./CONTRIBUTING.md) చూడండి
- అవసరమైతే PR వివరణలో ఇష్యూ నంబర్లు సూచించండి
### Review Process
- PRలను నిర్వహకులు మరియు కమ్యూనిటీ సమీక్షిస్తారు
- విద్యా స్పష్టత ప్రాధాన్యం కలదు
- కోడ్ ఉదాహరణలు ప్రస్తుత ఉత్తమ అభ్యాసాలకు అనుగుణంగా ఉండాలి
- అనువాదాలు ఖచ్చితత్వం మరియు సాంస్కృతిక అనుకూలత కోసం పరిశీలించబడతాయి
## Translation System
### Automated Translation
- GitHub Actions లో co-op-translator వర్క్‌ఫ్లో ఉపయోగిస్తుంది
- 50+ భాషలకు ఆటోమేటిక్ అనువాదాలు చేస్తుంది
- మూల ఫైళ్లు ప్రధాన డైరెక్టరీస్‌లో ఉంటాయి
- అనువాద ఫైళ్లు `translations/{language-code}/`లో ఉంటాయి
### Adding Manual Translation Improvements
1. `translations/{language-code}/`లో ఫైల్ కనుగొనండి
2. నిర్మాణాన్ని కాపాడుతూ మెరుగులు చేయండి
3. కోడ్ ఉదాహరణలు ప్రావృత్తి రీతిలో పనిచేస్తున్నాయో చూడండి
4. స్థానికృత క్విజ్ కంటెంట్ ను పరీక్షించండి
### Translation Metadata
అనువదించిన ఫైళ్ళలో మెటాడేటా హెడ్డర్ ఉంటుంది:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "...",
"translation_date": "...",
"source_file": "...",
"language_code": "..."
}
-->
```
## Debugging and Troubleshooting
### Common Issues
**క్విజ్ యాప్ ప్రారంభం కావడం లేదు**:
- Node.js వెర్షన్ తనిఖీ చేయండి (v14+ సిఫారసు)
- `node_modules` మరియు `package-lock.json` తొలగించి `npm install` మళ్లీ నడపండి
- పోర్ట్ ది. కేంద్రితంగా ఆపరేట్ అయితే తనిఖీ చేయండి (డిఫాల్ట్: Vite పోర్ట్ 5173)
**API సర్వర్ ప్రారంభం కావడం లేదు**:
- Node.js కనీస వెర్షన్ (node >=10) తనిఖీ చేయండి
- పోర్ట్ ఇప్పటికే వాడుకలో ఉందా శోధించండి
- అన్ని డిపెండెన్సీలను `npm install` చేయండి
**బ్రౌజర్ ఎక్స్‌టెన్షన్ లోడ్ అవడం లేదు**:
- manifest.json సరైన ఫార్మాట్ లో ఉందో చూసుకోండి
- బ్రౌజర్ కన్సోల్ లో పొరపాట్లు ఉన్నాయా తనిఖీ చేయండి
- బ్రౌజర్-ప్రత్యేక ఎక్స్‌టెన్షన్ ఇన్‌స్టాలేషన్ సూచనలు అనుసరించండి
**Python చాట్ ప్రాజెక్ట్ సమస్యలు**:
- OpenAI ప్యాకేజీ ఇన్స్టాల్ చేసినట్టయితే చూసుకోండి: `pip install openai`
- GITHUB_TOKEN_ENVIRONMENT వేరియబుల్ సెట్ అయినదని ధృవీకరించండి
- GitHub Models యాక్సెస్ అనుమతులు తనిఖీ చేయండి
**Docsify డాక్స్ అందుబాటులో లేకపోవడం**:
- docsify-cli గ్లోబల్ గా ఇన్స్టాల్ చేయండి: `npm install -g docsify-cli`
- రిపాజిటరీ రూట్ నుండి నడపండి
- `docs/_sidebar.md` ఉందో చూసుకోండి
### Development Environment Tips
- HTML ప్రాజెక్టులకు VS Code లో Live Server ఎక్స్‌టెన్షన్ ఉపయోగించండి
- ESLint, Prettier ఎక్స్‌టెన్షన్‌లను ఇన్స్టాల్ చేసి నిరంతర ఫార్మాటింగ్ కోసం వాడండి
- JavaScript డీబగ్గింగ్ కోసం బ్రౌజర్ DevTools ఉపయోగించండి
- Vue ప్రాజెక్టులకు Vue DevTools బ్రౌజర్ ఎక్స్‌టెన్షన్ ఉపయోగించండి
### Performance Considerations
- అనువాద ఫైళ్ళ సంఖ్య ఎక్కువ (50+ భాషలు) కావున పూర్తి క్లోన్‌లు పెద్దవి
- కంటెంట్ మీద మాత్రమే పని చేస్తే డెఫాల్ట్ క్లోన్ తొలగించి షాలో క్లోన్ వాడండి: `git clone --depth 1`
- ఇంగ్లీష్ కంటెంట్ మీద పని చేసే సమయంలో అనువాదాలను సెర్చ్ నుండి తొలగించండి
- మొదటి సారి npm install మరియు Vite build స్పష్టంగా నడవడానికి బిల్డ్ ప్రక్రియలు కొంచెం ఆలస్యంగా ఉండొచ్చు
## Security Considerations
### Environment Variables
- API కీలు రిపాజిటరీలో ఎప్పుడూ కమిట్ చెయ్యకూడదు
- `.env` ఫైల్స్ వాడండి (ఇవి `.gitignore`లో ఉన్నాయి)
- అవసరమయిన ఎన్‌విరాన్‌మెంట్ వేరియబుల్స్ ప్రాజెక్ట్ README లలో వర్ణించండి
### Python Projects
- వర్చువల్ ఎన్విరాన్మెంట్లు ఉపయోగించండి: `python -m venv venv`
- డిపెండెన్సీలను తాజా గా ఉంచండి
- GitHub టోకెన్లు తక్కువ అనుమతులు కలిగి ఉండాలి
### GitHub Models Access
- GitHub Models కు Personal Access Tokens (PAT) అవసరం
- టోకెన్లు ఎన్‌విరాన్‌మెంట్ వేరియబుల్స్ గా భద్రపరచండి
- టోకెన్లు లేదా క్రెడెన్షియల్స్ ఎప్పుడూ కమిట్ చేయవద్దు
## Additional Notes
### Target Audience
- వెబ్ అభివృద్ధిలో పూర్తి కొత్త వారు
- విద్యార్థులు మరియు స్వీయాధ్యయనకర్తలు
- తరగతి గదుల్లో పాఠ్యక్రమాన్ని ఉపయోగించే ఉపాధ్యాయులు
- కంటెంట్ ఆక్సెసిబిలిటీ మరియు మాటిమీద నెమ్మదిగా నైపుణ్యాలు పెంపొందించేందుకు రూపొద్దు
### Educational Philosophy
- ప్రాజెక్ట్-ఆధారిత నేర్చుకునే విధానం
- తరచుగా నాలెడ్జ్ చెక్స్ (క్విజ్‌లు)
- అమలు చేయగలిగే కోడింగ్ వ్యాయామాలు
- వాస్తవ ప్రపంచ అనువర్తన ఉదాహరణలు
- ఫ్రేమ్‌వర్క్‌ల ముందు ప్రాథమికాంశాలపై దృష్టి
### Repository Maintenance
- సజీవ కమ్యూనిటీ విద్యార్థులు మరియు సహకారకులతో
- ఆపరేషన్లు మరియు కంటెంట్ సాధారణంగా నవీకరణలు
- నిర్వహకులు ఇష్యూలు మరియు చర్చలను పర్యవేక్షిస్తారు
- అనువాద నవీకరణలు GitHub Actions ద్వారా స్వయంచాలకమే
### Related Resources
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) నేర్చుకునే వారికి సిఫారసు
- అదనపు కోర్సులు: జనరేటివ్ AI, డేటా సైన్స్, ML, IoT పాఠ్యక్రమాలు అందుబాటులో
### Working with Specific Projects
ప్రత్యేక ప్రాజెక్టుల వివరాలకు README ఫైళ్ళను చూడండి:
- `quiz-app/README.md` - Vue 3 క్విజ్ అనువర్తనం
- `7-bank-project/README.md` - బాంకింగ్ అనువర్తనం మరియు ధృవీకరణతో
- `5-browser-extension/README.md` - బ్రౌజర్ ఎక్స్‌టెన్షన్ అభివృద్ధి
- `6-space-game/README.md` - కేన్వాస్ ఆధారిత ఆట అభివృద్ధి
- `9-chat-project/README.md` - AI చాట్ అసిస్టెంట్ ప్రాజెక్ట్
### Monorepo Structure
ఇది సంప్రదాయ మోనోరిపో కానప్పటికీ, ఈ సంకలనం అనేక స్వతంత్ర ప్రాజెక్టులను కలిగి ఉంది:
- ప్రతి పాఠం స్వతంత్రంగా ఉంటుంది
- ప్రాజెక్టులు ఒకరితో ఒకరు డిపెండెన్సీలు పంచుకోరువు
- ఇతరులపై ప్రభావం లేకుండా వ్యక్తిగత ప్రాజెక్టులపై పని చేయండి
- మొత్తం పాఠ్యక్రమ అనుభవం కోసం మొత్తం రిపాజిటరీ ని క్లోన్ చేయండి
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**గుర్తింపు**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వం కోసం ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా తప్పిదాలు ఉండవచ్చు అని దయచేసి గమనించండి. మూల పత్రం దాని స్వదేశీ భాషలోనే అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదాన్ని సిఫార్సు చేస్తాము. ఈ అనువాదం వలన సాధ్యమైన ఏవైనా అపార్థాలు లేదా తప్పుల బాధ్యత మేము వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

25
translations/te/CODE_OF_CONDUCT.md
Unescape View File

@ -0,0 +1,25 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b0a9b4cccd918195f58224d5793da1a6",
"translation_date": "2026-01-08T10:34:19+00:00",
"source_file": "CODE_OF_CONDUCT.md",
"language_code": "te"
}
-->
# మైక్రోసాఫ్ట్ ఓపెన్ సోర్స్ ఆచరణ కోడ్
ఈ ప్రాజెక్టు [మైక్రోసాఫ్ట్ ఓపెన్ సోర్స్ ఆచరణ కోడ్](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)ను స్వీకరించింది.
స్రోతాలు:
- [మైక్రోసాఫ్ట్ ఓపెన్ సోర్స్ ఆచరణ కోడ్](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
- [మైక్రోసాఫ్ట్ ఆచరణ కోడ్ FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
- ప్రశ్నలు లేదా ఆందోళనలకు [opencode@microsoft.com](mailto:opencode@microsoft.com) ను సంప్రదించండి.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:
ఈ డాక్యుమెంట్ [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవ ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాలలో తప్పులు లేదా అసత్యతలు ఉండవచ్చు. అసలు డాక్యుమెంట్ లోని స్థానిక భాషలో ఉన్నది అధికారిక మూలం గా పరిగణించవలెను. కీలక సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదాన్ని సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వలన కలిగే ఏవైనా అపార్థాలు లేదా తప్పుగా అర్థం చేసుకోవడాల కోసం మేము బాధ్యులు కావు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

28
translations/te/CONTRIBUTING.md
Unescape View File

@ -0,0 +1,28 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "777400e9f0336c7ee2f9a1200a88478f",
"translation_date": "2026-01-08T10:14:14+00:00",
"source_file": "CONTRIBUTING.md",
"language_code": "te"
}
-->
# కానిక్షణ
ఈ ప్రాజెక్ట్ దానం మరియు సూచనలను స్వాగతిస్తుంది. అత్యధిక దానాలకు మీరు
కాంట్రిబ్యూటర్ లైసెన్స్ అగ్రిమెంట్ (CLA)కు ఒక ఒప్పందం మీద అనుమతి ఇవ్వాలి, ఇది మీరు
మీ దానాన్ని ఉపయోగించేందుకు హక్కు కలిగి ఉన్నారని మరియు ఆ హక్కును మాకు ఇచ్చినట్లు ప్రకటిస్తుంది. మరింత సమాచారం కోసం సందర్శించండి
[https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
మీరు ఒక పుల్ రిక్వెస్ట్ సమర్పించినప్పుడు, CLA-బాట్ స్వయంగా మీరు CLAని అందించాల్సిన అవసరం ఉన్నదో లేదో నిర్ణయిస్తుంది మరియు PRకి సరైన గుర్తింపును కల్పిస్తుంది (ఉదాహరణకి, లేబుల్, వ్యాఖ్య). బాట్ ఇచ్చిన సూచనలను పాటించండి. మా CLA ఉపయోగించే అన్ని రిపాజిటరీలను దాటి మీరు ఈ ప్రక్రియను ఒకసారి మాత్రమే చేయాలి. ఈ మార్పు ఎందుకు చేసినారో మాకు చెప్పడానికి కూడా ప్రయత్నించండి దాంతో మీ అభ్యర్థనను బాగా అర్థం చేసుకోగలుగుతాం.
ఈ ప్రాజెక్ట్ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) ను దత్తత పొందింది.
ఇంకా సమాచారం కోసం, చూడండి [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
లేదా [opencode@microsoft.com](mailto:opencode@microsoft.com) కు మరిన్ని ప్రశ్నలు లేదా వ్యాఖ్యలను పంపండి.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**పర్యవసానం**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ అయిన [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము సరిచేసేందుకు కృషి చేస్తున్నప్పటికీ, స్వయంచాలక అనువాదాలలో లోపాలు లేదా అసమర్థతలు ఉండే అవకాశం ఉందని దయచేసి గమనించండి. అసలు డాక్యుమెంట్ దాని స్థానిక భాషలోని అధికారిక మూలంగా పరిగణించబడాలి. ముఖ్య సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం చేయించుకోవటం ఉత్తమం. ఈ అనువాదం వలన కలిగే ఏమైనా అపార్థాలు లేదా వ్యత్యాసాలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

145
translations/te/Git-Basics/README.md
Unescape View File

@ -0,0 +1,145 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5cf5e1ed51455fefed4895fcc4d6ba2a",
"translation_date": "2026-01-08T10:46:50+00:00",
"source_file": "Git-Basics/README.md",
"language_code": "te"
}
-->
## వెబ్-డెవ్ కొత్తవారికి GIT ప్రాథమికాలు👶
## `Git` అంటే ఏమిటి?
1. Git అనేది పంపిణీచేయబడిన వెర్షన్ కంట్రోల్ సిస్టమ్.
2. ప్రతి డెవలపర్ యొక్క కంప్యూటర్‌లో మొత్తం కోడ్‌బేస్ మరియు చరిత్ర అందుబాటులో ఉంటుంది,
ఇది సులభంగా బ్రాంచింగ్ మరియు విలీనం చేసుకోవడానికి అనుమతిస్తుంది.
3. ఇది కంప్యూటర్ ఫైళ్లలో మార్పులను ట్రాక్ చేయడానికి వెర్షన్ కంట్రోల్ సిస్టమ్ (VCS)గా ఉపయోగిస్తారు.
* పంపిణీ వెర్షన్ కంట్రోల్
* బహుళ డెవలపర్ల మధ్య పని సమన్వయం
* ఎవరు ఏ మార్పులు చేసారు మరియు ఎప్పుడు చేసారు
* ఏ సమయంలోనైనా తిరిగి పడగొట్టగలం
* స్థానిక మరియు రిమోట్ రిపోజిటరీలు
## GIT యొక్క సూత్రాలు
* కోడ్ చరిత్రను ట్రాక్ చేస్తుంది
* మీ ఫైళ్ల "స్నాప్త్‌షాట్లు" తీసుకొంటుంది
* "కమిట్" చేయడం ద్వారా మీరు ఎప్పుడు స్నాప్త్‌షాట్ తీసుకోవాలనుకుంటారో నిర్ణయించుకుంటారు
* మీరు ఏ సమయంలోనైనా ఏ స్నాప్త్‌షాట్ ను సందర్శించవచ్చు
* కమిట్ చేసేముందు ఫైళ్లను స్టేజ్ చేయవచ్చు
### Git & GitHub మధ్య తేడా
| Git | GitHub |
| ------- | ----------- |
| Git ఒక సాఫ్ట్‌వేర్ | GitHub ఒక క్లౌడ్ సేవ |
| Git స్థానికంగా వ్యవస్థలో ఇన్‌స్టాల్ చేయబడుతుంది | GitHub వెబ్‌లో హోస్ట్ చేయబడింది |
| ఇది కమాండ్‌లైన్ టూల్ | ఇది గ్రాఫికల్ యూజర్ ఇంటర్ఫేస్ |
| Git ను Linux నిర్వాహిస్తాయి | GitHub ను Microsoft నిర్వహిస్తుంది |
| ఇది వెర్షన్ కంట్రోల్ మరియు కోడ్ షేరింగ్ పై ఫోకస్ చేస్తుంది | ఇది కేంద్రీకృత మూల కోడ్ హోస్టింగ్ పై ఫోకస్ చేస్తుంది |
| Git ఓపెన్-సోర్స్ లైసెన్స్ కలిగి ఉంది | GitHub లో ఉచిత, మరియు చెల్లింపు tiers ఉన్నాయి |
| Git 2005 లో విడుదలైంది | GitHub 2008 లో విడుదలైంది |
## GIT ఇన్‌స్టాలేషన్
* Linux(Debian)
`$sudo apt-get install git`
* Linux(Fedora)
`$sudo yum install git`
* [Download](http://git-scm.com/download/mac) Mac కోసం
* [Download](http://git-scm.com/download/win) Windows కోసం
### ఇన్‌స్టాలేషన్ ప్రక్రియ దశలు:
1. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190359823-e421b976-515a-4565-990d-2f2e4e62977a.png"/>
2. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360530-a7bfa681-47f4-4859-9b8a-4120e0cad348.png"/>
3. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360760-30db7768-19e0-4848-a99d-a6c955e041e2.png"/>
4. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360896-473e1e54-f083-4b5c-a5f0-539f70469142.png"/>
5. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361144-bc670a2b-b776-4867-9785-7b509d416fbb.png"/>
6. అప్పుడు కొనసాగించండి Next > Next > Next > <b>Install</b>
7. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361548-4b700d85-c7d5-4d26-90e7-e5cc3ce24311.png"/>
### ఇన్‌స్టాలేషన్ తర్వాత git బాష్ ఉపయోగించి git ను కాన్ఫిగర్ చేయాలి
1. `git config --global user.name 'YourName'`
2. `git config --global user.email 'YourEmail'`
___
## Git ఆదేశాలు
___
### ప్రాజెక్టులను పొందడం & సృష్టించడం
| ఆజ్ఞ | వివరణ |
| ------- | ----------- |
| `git init` | స్థానిక Git రిపోజిటరీని ప్రారంభించండి |
| `git clone ssh://git@github.com/[username]/[repository-name].git` | రిమోట్ రిపోజిటరీ యొక్క స్థానిక కాపీ సృష్టించండి |
### ప్రాథమిక స్నాప్త్‌షాటింగ్
| ఆజ్ఞ | వివరణ |
| ------- | ----------- |
| `git status` | స్థితిని తనిఖీ చేయండి |
| `git add [file-name.txt]` | ఫైల్‌ను స్టేజింగ్ ప్రాంతానికి జోడించండి |
| `git add -A` | అన్ని కొత్త మరియు మారిన ఫైళ్లు స్టేజింగ్‌కు జోడించండి |
| `git commit -m "[commit message]"` | మార్పులను కమిట్ చేయండి |
| `git rm -r [file-name.txt]` | ఫైల్ (లేదా ఫోల్డర్) తొలగించండి |
| `git push` | రిమోట్ రిపోజిటరీకి ప్రెస్కించండి |
| `git pull` | రిమోట్ రిపోజిటరీ నుండి తాజా మార్పులు తీసుకోండి |
### బ్రాంచింగ్ & విలీనం
| ఆజ్ఞ | వివరణ |
| ------- | ----------- |
| `git branch` | బ్రాంచ్‌లను జాబితా చేయు(ప్రస్తుత బ్రాంచ్ కి asterisk ఉంటుంది) |
| `git branch -a` | అన్ని బ్రాంచ్‌ల జాబితా (స్థానిక మరియు రిమోట్) |
| `git branch [branch name]` | కొత్త బ్రాంచ్ సృష్టించండి |
| `git branch -D [branch name]` | ఒక బ్రాంచ్ తొలగించండి |
| `git push origin --delete [branch name]` | రిమోట్ బ్రాంచ్ తొలగించండి |
| `git checkout -b [branch name]` | కొత్త బ్రాంచ్ సృష్టించి దానికి మారండి |
| `git checkout -b [branch name] origin/[branch name]` | రిమోట్ బ్రాంచ్‌ను క్లోన్ చేసి దానితో మారండి |
| `git branch -m [old branch name] [new branch name]` | స్థానిక బ్రాంచ్ పేరు మార్చండి |
| `git checkout [branch name]` | బ్రాంచ్‌కు మారండి |
| `git checkout -` | గతంలో ఉన్న బ్రాంచ్‌కు మారండి |
| `git checkout -- [file-name.txt]` | ఫైల్‌లో మార్పులు తిరస్కరించండి |
| `git merge [branch name]` | బ్రాంచ్‌ను ప్రస్తుత బ్రాంచ్‌తో విలీనం చేయండి |
| `git merge [source branch] [target branch]` | సోర్స్ బ్రాంచ్‌ను టార్గెట్ బ్రాంచ్‌తో విలీనం చేయండి |
| `git stash` | పనిలో ఉన్న మార్పులను తాత్కాలికంగా నిల్వచేయండి |
| `git stash clear` | అన్ని నిల్వచేయబడిన మార్పులను తొలగించండి |
### ప్రాజెక్టులను పంచుకోవడం & నవీకరించడం
| ఆజ్ఞ | వివరణ |
| ------- | ----------- |
| `git push origin [branch name]` | బ్రాంచ్‌ను రిమోట్ రిపోజిటరీకి ప్రెస్కించండి |
| `git push -u origin [branch name]` | రిమోట్ రిపోజిటరీకి మార్పులను ప్రెస్కించండి (బ్రాంచ్‌ను స్మరించు) |
| `git push` | రిమోట్ రిపోజిటరీకి మార్పులను ప్రెస్కించు (యాదృచ్ఛిక బ్రాంచ్) |
| `git push origin --delete [branch name]` | రిమోట్ బ్రాంచ్ తొలగించండి |
| `git pull` | స్థానిక రిపోజిటరీని తాజా కమిట్‌తో నవీకరించండి |
| `git pull origin [branch name]` | రిమోట్ రిపోజిటరీ నుండి మార్పులు తీసుకోండి |
| `git remote add origin ssh://git@github.com/[username]/[repository-name].git` | ఒక రిమోట్ రిపోజిటరీని జోడించండి |
| `git remote set-url origin ssh://git@github.com/[username]/[repository-name].git` | రిపోజిటరీ యొక్క origin బ్రాంచ్‌ను SSH కు సెట్ చేయండి |
### తనిఖీ & తులన
| ఆజ్ఞ | వివరణ |
| ------- | ----------- |
| `git log` | మార్పులను వీక్షించండి |
| `git log --summary` | మార్పులను (వివరంగా) వీక్షించండి |
| `git log --oneline` | మార్పులను (సంక్షిప్తంగా) వీక్షించండి |
| `git diff [source branch] [target branch]` | విలీనం చేసేముందు మార్పులను ముందస్తుగా చూడండి |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**గమనిక**:
ఈ డాక్యుమెంట్‌ను AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వం కోసం ప్రయత్నిస్తున్నప్పటికీ, స్వయంచాలక అనువాదాల్లో పొరపాట్లు లేదా అవిశ్వసనీయతలు ఉండవచ్చు అని గమనించగలరు. సహజ భాషలో ఉన్న అసలైన డాక్యుమెంట్‌ను అధికారిక మూలం గా పరిగణించాలి. ముఖ్యమైన సమాచారానికి, నిపుణుల మానవ అనువాదం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వాడకంవల్ల ఏర్పడే ఏదైనా అపార్థాలు లేదా తతంగ దోషాలకు మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save