Skip to content

First steps code structure #3548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 36 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
75bd2a8
Merge pull request #1 from javascript-tutorial/master
mredem96 Nov 7, 2022
fcb6203
intro complete
akhmadali00 Nov 8, 2022
55f2d26
hello-world complete
akhmadali00 Nov 11, 2022
c025c13
strict-mode complete
akhmadali00 Nov 13, 2022
8b3e6e1
variables complete
akhmadali00 Nov 15, 2022
b04a0f8
type-conversions complete
akhmadali00 Nov 19, 2022
214e14c
operators complete
akhmadali00 Nov 20, 2022
682023c
switch complete
akhmadali00 Nov 20, 2022
5ddb074
comparison complete
akhmadali00 Nov 25, 2022
11aac96
ifelse complete
akhmadali00 Dec 1, 2022
be0b85b
logical-operators complete
akhmadali00 Dec 5, 2022
4caa614
nullish-coalescing complete
akhmadali00 Dec 6, 2022
2ea27a7
while/for complete
akhmadali00 Dec 7, 2022
66204d1
arrow-functions complete
akhmadali00 Dec 8, 2022
71aea02
js-specials complete
akhmadali00 Dec 8, 2022
bd7e6c0
getting-started done
akhmadali00 Dec 8, 2022
a7a7856
first-steps changes merged
akhmadali00 Dec 8, 2022
730de95
code-quality changes merged
akhmadali00 Dec 8, 2022
d392edd
object-basics changes merged
akhmadali00 Dec 8, 2022
c342d9d
primitives methods complete
akhmadali00 Dec 15, 2022
ca1a7ae
number complete
akhmadali00 Jan 2, 2023
9fd660c
strings complete
akhmadali00 Jan 3, 2023
93eb858
arrays incomplete
akhmadali00 Jan 5, 2023
616333f
test commit
Jan 5, 2023
73832c6
slice added
Jan 5, 2023
de6836f
map-set done
Jan 27, 2023
347f0c6
WeakMap and WeakSet
Jan 27, 2023
2703353
keys-values-entries done
Jan 28, 2023
e9ac87c
destructuring added
Jan 28, 2023
a86a07e
json added
Feb 3, 2023
8f06ede
section 6 done
Mar 1, 2023
ad90312
section 6 done
Mar 1, 2023
43dd9c1
Merge remote-tracking branch 'ahmad/master' into HEAD
mredem96 Aug 8, 2023
89a2da0
Merge pull request #6 from akhmadali00/fixed
mredem96 Aug 8, 2023
3b4d80c
Merge pull request #3 from BSunnatov135/BoburSunnatov
mredem96 Aug 15, 2023
e930177
code structure translation and review
iroda743 Aug 15, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 98 additions & 51 deletions 1-js/01-getting-started/1-intro/article.md

Large diffs are not rendered by default.

32 changes: 21 additions & 11 deletions 1-js/01-getting-started/2-manuals-specifications/article.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,44 @@

# Manuals and specifications
# Qo'llanma va Ko'rsatmalar

Bu kitob qisqa-o'quv qo'llanma hisoblanadi. Bu kitobning maqsadi sizga tilni asta-sekin o'rgatishdir. Lekin, siz boshlang'ich narsalar bilan tanishib bo'lganingizdan kegin, sizga boshqa manbalar kerak bo'ladi.
## ko'rsatma
[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) Javascript haqida eng chuqur, batafsil va rasmiy ma'lumotlarni o'z ichiga oladi. U tilni yoritib, izohlab beradi.
This book is a *tutorial*. It aims to help you gradually learn the language. But once you're familiar with the basics, you'll need other resources.

## Specification
Ammo u rasmiy bo'lishi bilan bir qatorda, dastlab uni tushunish qiyin. Shuning uchun, agar sizga til tafsilotlari haqida eng ishonchli ma'lumotlar manbasi kerak bo'lsa, bu ko'rsatmalar siz uchun to'g'ri joy.Ammo bu kundalik foydalanishda ishlatilmaydi.

[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contains the most in-depth, detailed and formalized information about JavaScript. It defines the language.

But being that formalized, it's difficult to understand at first. So if you need the most trustworthy source of information about the language details, the specification is the right place. But it's not for everyday use.

Har yili yangi ko’rsatmalar varianti(versiyasi) chiqariladi. Ushbu versiyalarning orasida eng so'nggi qo'llanmani htt <https://tc39.es/ecma262/> dan topsa bo'ladi.
A new specification version is released every year. Between these releases, the latest specification draft is at <https://tc39.es/ecma262/>.

To read about new bleeding-edge features, including those that are "almost standard" (so-called "stage 3"), see proposals at <https://github.com/tc39/proposals>.

Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial.
Eng so'ngi xususiyatlar jumladan "almost standard" "Deyarli standart" ("3-bosqich" deb ataladigan) haqida bilish uchun https://github.com/tc39/proposals>. saytidagi takliflarni ko’rib chiqing.

## Manuals
Bundan tashqari, agar siz brauzer bo'yicha ishlayotkan bo'lsangiz, qo'llanmaning ikkinchi qismida boshqa ko'rsatmalar ham mavjud [second part](info:browser-environment).

- **MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc.
## Yo'riqnoma

- **MDN (Mozilla) JavaScript Reference** misollar va boshqa maʼlumotlarga ega bo'lgan asosiy qoʻllanmadir.Tilning individual funktsiyalari, usullari va boshqalar haqida chuqur ma'lumot olish bu - juda yaxshi.

Buni <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference> sahifasidan topsangiz bo'ladi.
You can find it at <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference>.

Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. <https://google.com/search?q=MDN+parseInt> to search for the `parseInt` function.

## Compatibility tables
Lekin internetdan izlanish ko'pincha eng yaxshisi yo'l hisonblanadi. So'rovda shunchaki "MDN [term]" foydalaning. Masalan, `parseInt` funksiyasini qidirish uchun <https://google.com/search?q=MDN+parseInt> dan foydalaning.
## Salohiyat jadvallari

JavaScript rivojlanayotgan til bo'lib, yangi xususiyatlar muntazam qo'shiladi.

JavaScript is a developing language, new features get added regularly.
Ularning brauzer va boshqa enjinlar(engine) ga asoslangan qo'llovini ko'rish uchun quyidagilarni ko'rib chiqing:

To see their support among browser-based and other engines, see:
- <http://caniuse.com> - har bir xususiyat uchun qo'llab-quvvatlash jadvallari, masalan: Qaysi enjin zamonaviy kriptografiya funktsiyalarini qo'llab-quvvatlashini ko'rish uchun: <http://caniuse.com/#feat=cryptography>.
- <https://kangax.github.io/compat-table> - til xususiyatlariga va ularni qo'llaydigan yoki qo'llamaydigan enjin(engine) larga ega jadval.

Bu resurslarning barchasi real hayotni rivojlantirishda foydali, chunki ular til tafsilotlari, ularni qo'llab-quvvatlash va boshqalar haqida qimmatli ma'lumotlarni o'z ichiga oladi.
Iltimos, sizga biror dastur to'grisida batafsil ma'lumot kerak bo'lip qolishi mumkin bo'lgan vaziyatlar uchun ularni hammasini (yoki shu betni) eslab qoling.
- <https://caniuse.com> - per-feature tables of support, e.g. to see which engines support modern cryptography functions: <https://caniuse.com/#feat=cryptography>.
- <https://kangax.github.io/compat-table> - a table with language features and engines that support those or don't support.

Expand Down
43 changes: 27 additions & 16 deletions 1-js/01-getting-started/3-code-editors/article.md
Original file line number Diff line number Diff line change
@@ -1,46 +1,57 @@
# Code editors
# Kod muharrirlari

A code editor is the place where programmers spend most of their time.
Kod muharrirlari bu - dasturchilar eng ko’p vaqtini o’tqazadigan joy.

There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type.
Kod muharrirlari ikki xil bo’ladi: IDEs va yengil tahrirlovchi. Ko’p odamlar har bir turidagi bittadan vositadan foydalanadi.

## IDE

The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment."
[IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) atamasi odatda “butun loyihada” ishlaydigan ko’p xususiyatli tahrirlash ma’nosini anglatadi. Nomidan ko’rinib turibdiki, bu faqatkina muharrir emas, balki to’liq miqyosdagi “dasturlash muhiti” hamdir.

An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff.

If you haven't selected an IDE yet, consider the following options:
IDE bu loyihalarni yuklaydi ( bular bir nechata fayl bo’lishi mumkin), fayllar o’rtasida yo’nalishni aniqlashga imkon beradi(navigatsiya), butun loyihaga asoslangan holda avtomatik tarzda ma’lumotlarni kiritish bilan ta’minlaydi ( bu faqatkina ochiq fayl emas) va versiyalarni boshqaruv tizimi (masalan [git](https://git-scm.com/)), a sinov muhiti va boshqa “loyiha darajasi” dagi narsalar bilan qo’shilib ishlaydi.

- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, paid).

For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/).

Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
Agar siz hali IDE ni tanlamagan bo’lsangiz quyidagi tanlov(variant)larni ko’rib chiqing:

## Lightweight editors
- [Visual Studio Code](https://code.visualstudio.com/) (dastur bo’ylab, bepul).
- [WebStorm](http://www.jetbrains.com/webstorm/) ( dastur bo’ylab, pullik).

"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple.
● Windowslar uchun yana “visual Studio” ham bor, lekin buni “visual studio Code” bilan adashtirib yubormaslik kerak. “ Visual studio” pullik va kuchli winows muharriri bo’lib, .NET dasturiga juda mos tushadi. U JavaScriptda ham yaxshi ishlaydi. Shuningdek uning bepul versiyasi ham mavjud [Visual Studio Community](https://www.visualstudio.com/vs/community/).

They are mainly used to open and edit a file instantly.
Ko’p IDElar pullik, lekin sinov muddati bor. Ularning narxi dasturchilarning maoshi bilan taqqoslaganda arzimas, shuning uchun o’zingizga eng zo’rini tanlang.

The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file.
## Yengil muharrirlar

In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
“Yengil muharrirlar” IDElardek kuchli emas, lekin ular tez, sodda va oddiy.

Ular asosan fayllarni ochida va darhol tahrir qilishda ishlatiladi.

“yengil tahrirlovchi” va “IDE” o’rtsidagi asosiy farq shundaki, IDE loyiha-darajasida ishlaydi, shuning uchun u ishga tushganda ko’proq ma’lumot yuklaydi,agar kerak bo’lsa, loyiha tuzilishini tahlil qiladi, va hokazo. Agar siz faqat bitta fayl bilan ishlashingiz kerak bo’lsa, yengil tahrirlovchi ancha tez.
There are many options, for instance:

- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware).
- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.

## Let's not argue
Amalda, yengil tahrirlovchi juda ko’p pluginlari (dasturga ko'proq vazifa bajarishi uchun qo'shiladigan qo'shimcha dastur) bo’lishi mumkin, jumladan katalog darajasidagi sintaksis tahlilchilari va avtomatik tarzda ma’lumotlarni to’ldirish dasturlari. Shuning uchun, yengil tahrirlovchi va IDE o’rtasida yaqqol chegara yo’q.
Quyidagi tanlov(variant)lar ko'rib chiqishingizga:

- [Atom](https://atom.io/) (dastur bo'ylab, bepul).
- [Sublime Text](http://www.sublimetext.com) (dastur bo'ylab, sinov versiya).
- [Notepad++](https://notepad-plus-plus.org/) (Windows, bepul).
- ● Agar foydalanishni bilsangiz .[Vim](http://www.vim.org/) va [Emacs](https://www.gnu.org/software/emacs/)lar ham ajoyib.

## Keling tortishmaylik

The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with.
Yuqorida takidlab o’tilgan tahrirlovchilarni o'zini yaxshi dasturchi dep biladigan, men yoki mening do’stlarim uzoq vaqtlardan beri foydalanib kelishmoqda va bundan juda xursandmiz.

There are other great editors in our big world. Please choose the one you like the most.
Bizding bu katta dunyoda boshqa ajoyib tahrirlovchi dasturlar ham bor. Iltimos o’zingizga eng yoqqanini tanlang.

Boshqa jihozlar kabi, tahrirlovchi dasturini tanlash ham shaxsiy hisoblanadi, va sizning proyektingiz, odatingiz va o'z xohishingizga bog’liq.
The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.

The author's personal opinion:
Expand Down
57 changes: 29 additions & 28 deletions 1-js/01-getting-started/4-devtools/article.md
Original file line number Diff line number Diff line change
@@ -1,63 +1,64 @@
# Developer console
# Dasturchi konsoli

Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
Kodlarda xatoliklar ham bo'lish mumkin.Sizning yanglishishingiz ehtimoli ham anchagina. To'g'rirog'i, agr siz [robot] (https://en.wikipedia.org/wiki/Bender_(Futurama)) emas inson bo'lsangiz, albatta xatolar qilasiz.

But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
Lekin brauzerda xatolarni foydalanuvchilar to'gridan to'g'ri ko'rishmnaydi. Shuning uchun scriptda biror narsa yanglish ketsa, biz nima buzilganligini ko'rmaymiz va uni tuzata olmaymiz.

To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers.
Xatoliklarni ko'rish va scriptlar haqida boshqa ma'lumotlar olish uchun brauzerlarga "developer tools" (dasturchi vositalari) o'rnatilgan.

Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific.
Ko'p dasturchilar loyihalash (dasturlash)da Chrome yoki Firefox suyanishadi, chunki ularda eng yaxshi dasturchi vositalari bor.Boshqa brauzerlar ham dasturlash vositasi bilan ta'minlay oladi, xatto ba'zida maxsus xususiyatlari ham mavjud, lekin ular Chrome yoki Firefoxga yeta olmaydi.Xullas, dasturchilarni ko'pining o'z "sevimli" brauzerlari bo'ladi va muammosi brauzeri bilan bog'liq bo'lgan holda boshqasiga o'tib ketadi.

Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
Dasturlash vositalari kuchli ta'sirli bo'lib, ularning xususiyatlari ko'p. Dastlab biz ularni qanday ochishni, xatolarni ko'rib chiqishni hamda JavaScriptda buyruqlarni boshqarishni o'rganib chiqamiz.

## Google Chrome

Open the page [bug.html](bug.html).
[bug.html](bug.html) sahifasini ochasiz.

There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
Bunda JavaScript kodida xatolik mavjud. Oddiy tashrif buyuruvchilar buni ko'rishmaydi, uni ko'rish uchun esa dasturchi vositalarini ochishimiz kerak bo'ladi.

Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
`key:F12` tugmasini bosing, yoki agar Mac da bo'lsangiz, u holda `key:Cmd+Opt+J`.

The developer tools will open on the Console tab by default.
Dasturchi vositalari kamchiliklar oynasini to'g'ridan to'g'ri ochib beradi.

It looks somewhat like this:
Quyidagiga o'xshash narsa paydo bo'ladi:

![chrome](chrome.png)

The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar.
Dasturchi vositalarining aniq ko'rinishi sizdagi Chrome ning versiyasiga bog'iq. U vaqti-vaqti bilan o'zgarib turasa ham,, har safar ular bir-biriga o'xshash bo'ladi.

- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command.
- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred.
- Buyerda biz qizil rangli xato habarni ko'rishimiz mumkin. Ushbu holatda, scriptda noma'lum "lalala" buyrug'i mavjud.
- O'ng tomonda xato mavjud bo'lgan raqamlar qatori bilan `bug.html:12` manbasiga link mavjud.

Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them.
Quyidagi xato habar hisoblanadi, va bu yerda ko'k belgi `>` bor. Bu biz JavaScript buyrug'larini berishimiz mumkin bo'lgan "buyrug'lar chizig'i" (command line)dir. uni ishga tushirish uchun `key:Enter` tugmasini bosing.

Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
Endi xatoliklarni ko'rishimiz mumkin, va bu boshlanishiga yetarli .Biz dasturchi vositalariga yana qaytamiz va <info:debugging-chrome> bo'limida dasturdagi xatoliklarni to'g'irlashni batafsilroq ko'rib chiqamiz.

```smart header="Multi-line input"
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
```smart header="ko'p qatorli kiritilgan ma'lumot" (Multi-line input)
odatda biz bir qator kodlarni komputerga kiritib,`key:Enter` tugmasini bossak, u ishga tushadi.

To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
Ko'p qatorli kodlarni kiritish uchun `key:Shift+Enter` tugmasini bosasiz. Bu yo'l bilan siz JAvaScript kodining uzun bo'lak(fragment)larini ham kirita olasiz.
```

## Firefox, Edge, and others
## Firefox, Edge, va boshqalar

Most other browsers use `key:F12` to open developer tools.
Boshqa ko'plab brauzerlar dasturchi vositalarini topish uchun `key:F12` dan foydalanadi.

The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another.
Ularning ko'rinishi va xarakteristikasi juda o'xshash. Ushbu vositalarning bittasidan foydalanishni o'rganib olganingizdan kegin ( Chrome dan boshlashingiz ham mumkin), boshqasiga osongina o'zgartira olasiz.

## Safari

Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
Safari (Mac brauzer uchun, Windows/Linux da ishlamaydi) bular ichida o'ziga xos. Biz birinchi bo'lib " dastur menyusi" (Develop menu)ni ishga tushurishimiz kerak.

Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom:
Afzalliklarni oching va "yetakchi" (Advanced) oynasiga o'ting. Bu yerda, pastki qismda tanlash oyasi ko'rinadi:

![safari](safari.png)

Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options.
Xozir `key:Cmd+Opt+C` ketma-ketligi komputermni boshqa dasturga o'tkaza oladi. Shuningdek bizda koo'p buyruqli va tanlovli "dastur" (Develop) nomli yangi oyna ham paydo bo'ldi .

## Summary

- Developer tools allow us to see errors, run commands, examine variables, and much more.
- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
-Dasturchi vositalari bizga xatolarni ko'rish, buyruqlarni boshqarish, o'zgarishlarni tekshirish hamda ko'plab boshqa narsalar qilsh imkoniyatini beradi.

Now we have the environment ready. In the next section, we'll get down to JavaScript.
- Windowsdagi ko'p bruzerlarda ular`key:F12` tugmasi bilan ochiladi .Mac dagi Chrome da dastlab `key:Cmd+Opt+J`, Safarida esa: `key:Cmd+Opt+C` bosilishi lozim bo'ladi.

Endi bizda tayyor muhit bor.Keyingi qismda biz JavaScriptni boshlaymiz.
4 changes: 2 additions & 2 deletions 1-js/01-getting-started/index.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# An introduction
# Kirish

About the JavaScript language and the environment to develop with it.
JavaScript tili va u bilan ishlab chiqiladigan muhit haqida.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<body>

<script>
alert( "I'm JavaScript!" );
alert( "Men JavaScriptman!" );
</script>

</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<body>

<script>
alert( "I'm JavaScript!" );
alert( "Men JavaScriptman!" );
</script>

</body>
Expand Down
Loading
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy