Skip to content

Commit 306caf2

Browse files
authored
update dom introduction
1 parent fbc53fb commit 306caf2

File tree

1 file changed

+47
-46
lines changed

1 file changed

+47
-46
lines changed
Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,116 @@
1-
# Browser environment, specs
1+
# Brauzer mühiti, texniki xüsusiyyətlər
22

3-
The JavaScript language was initially created for web browsers. Since then it has evolved and become a language with many uses and platforms.
3+
JavaScript dili əvvəlcə veb brauzerlər üçün yaradılmışdır. O vaxtdan bəri inkişaf etdi və bir çox istifadəsi və platforması olan bir dilə çevrildi.
44

5-
A platform may be a browser, or a web-server or another *host*, even a coffee machine. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
5+
Platforma brauzer, veb-server və ya başqa bir *host*, hətta qəhvə maşını ola bilər. Onların hər biri platformaya xas funksiyaları təmin edir. JavaScript spesifikasiyası bunu *host mühiti* adlandırır.
66

7-
A host environment provides own objects and functions additional to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on.
7+
Host mühiti dil nüvəsinə əlavə olaraq öz obyektlərini və funksiyalarını təmin edir. Veb brauzerləri veb səhifələrini idarə etmək üçün bir vasitədir. Node.js server tərəfi xüsusiyyətlərini və s. təmin edir.
88

9-
Here's a bird's-eye view of what we have when JavaScript runs in a web-browser:
9+
JavaScript veb-brauzerdə işlədiyi zaman əldə etdiyimiz şeyə quşbaxışı nəzər salaq:
1010

1111
![](windowObjects.svg)
1212

13-
There's a "root" object called `window`. It has two roles:
13+
"window" adında bir "root" obyekt var. Onun iki rolu vardır:
1414

15-
1. First, it is a global object for JavaScript code, as described in the chapter <info:global-object>.
16-
2. Second, it represents the "browser window" and provides methods to control it.
15+
1. Birincisi, bu fəsildə təsvir olunduğu kimi JavaScript kodu üçün qlobal obyektdir <info:global-object>.
16+
2. İkincisi, o, "brauzer pəncərəsini" təmsil edir və onu idarə etmək üçün üsullar təqdim edir.
1717

18-
For instance, here we use it as a global object:
18+
Məsələn, biz onu qlobal obyekt olaraq aşağıdakı kimi istifadə edirik:
1919

2020
```js run
2121
function sayHi() {
22-
alert("Hello");
22+
alert("Salam");
2323
}
2424

2525
// global functions are methods of the global object:
2626
window.sayHi();
2727
```
2828

29-
And here we use it as a browser window, to see the window height:
29+
Və burada pəncərənin hündürlüyünü görmək üçün onu brauzer pəncərəsi kimi istifadə edirik:
3030

3131
```js run
3232
alert(window.innerHeight); // inner window height
3333
```
3434

35-
There are more window-specific methods and properties, we'll cover them later.
35+
Pəncərəyə(window) xas olan daha çox üsul və xüsusiyyətlər var, biz onları daha sonra nəzərdən keçirəcəyik.
3636

3737
## DOM (Document Object Model)
3838

39-
Document Object Model, or DOM for short, represents all page content as objects that can be modified.
39+
Sənəd Obyekt Modeli və ya qısaca SOM, özünü bütün səhifə məzmununu dəyişdirə bilən obyektlər kimi təmsil edir.
4040

41-
The `document` object is the main "entry point" to the page. We can change or create anything on the page using it.
41+
`document` obyekti səhifənin əsas "giriş nöqtəsidir". Bundan istifadə edərək səhifədə hər hansı bir şeyi dəyişdirə və yaxudda yeni bir şey yarada bilərik.
4242

43-
For instance:
43+
Məsələn:
4444
```js run
45-
// change the background color to red
45+
// arxa fon rəngini qırmızıya çevir
4646
document.body.style.background = "red";
4747

48-
// change it back after 1 second
48+
// 1 saniyədən sonra onu yenidən dəyişdir
4949
setTimeout(() => document.body.style.background = "", 1000);
5050
```
5151

52-
Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification:
52+
Burada biz `document.body.style`, istifadə etdik, lakin daha çox şey var. Xüsusiyyətlər və üsullar spesifikasiyada təsvir edilmişdir:
5353

54-
- **DOM Living Standard** at <https://dom.spec.whatwg.org>
54+
- **DOM yaşayış standartı** at <https://dom.spec.whatwg.org>
5555

5656
```smart header="DOM is not only for browsers"
57-
The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use DOM too.
57+
DOM spesifikasiyası sənədin strukturunu izah edir və onu idarə etmək üçün obyektlər təqdim edir. DOM-dan istifadə edən və brauzer olmayan alətlər də var.
5858
59-
For instance, server-side scripts that download HTML pages and process them can also use DOM. They may support only a part of the specification though.
59+
Məsələn, HTML səhifələrini yükləyən və onları emal edən server tərəfi skriptləri də DOM-dan istifadə edə bilər. Onlar spesifikasiyanın yalnız bir hissəsini dəstəkləyə bilər.
6060
```
6161

6262
```smart header="CSSOM for styling"
63-
CSS rules and stylesheets are structured in a different way than HTML. There's a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/), that explains how they are represented as objects, and how to read and write them.
63+
CSS qaydaları və üslub cədvəlləri HTML-dən fərqli bir şəkildə qurulmuşdur. Ayrı bir spesifikasiya var, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/), bu, onların obyekt kimi necə təmsil olunduğunu və necə oxunub yazılacağını izah edir.
6464
65-
CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, but that's also possible.
65+
Sənəd üçün üslub qaydalarına dəyişiklik etdikdə CSSOM DOM ilə birlikdə istifadə olunur. Təcrübədə CSSOM nadir hallarda tələb olunur, çünki adətən CSS qaydaları statik olur. Bizə nadir hallarda JavaScript-dən CSS qaydalarını əlavə etmək/çıxarmaq lazımdır, lakin bu da mümkündür.
6666
```
6767

6868
## BOM (Browser Object Model)
6969

70-
The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document.
70+
Brauzer Obyekt Modeli (BOM) sənəddən başqa hər şeylə işləmək üçün brauzer (host mühiti) tərəfindən təmin edilən əlavə obyektləri təmsil edir.
7171

72-
For instance:
72+
Məsələn:
7373

74-
- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc).
75-
- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one.
74+
- [navigator](mdn:api/Window/navigator) obyekti brauzer və əməliyyat sistemi haqqında məlumat verir. Bir çox xüsusiyyəti var, lakin ən çox tanınan iki xüsusiyyəti bunlardır: `navigator.userAgent` -- cari brauzer haqqında və `navigator.platform` -- platforma haqqında (Windows/Linux/Mac və s. arasında fərq qoymağa kömək edə bilər).
75+
- [location](mdn:api/Window/location) obyekti bizə cari URL-ni oxumağa imkan verə və brauzeri yenisinə yönləndirə bilər.
7676

77-
Here's how we can use the `location` object:
77+
`location` obyektindən necə istifadə edə bilərik:
7878

7979
```js run
80-
alert(location.href); // shows current URL
80+
alert(location.href); // cari URL-ni göstərir
8181
if (confirm("Go to Wikipedia?")) {
82-
location.href = "https://wikipedia.org"; // redirect the browser to another URL
82+
location.href = "https://wikipedia.org"; // brauzeri başqa URL-ə yönləndir
8383
}
8484
```
8585

86-
Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
86+
`alert/confirm/prompt` funksiyaları da BOM-un bir hissəsidir: onlar birbaşa sənədlə əlaqəli deyil, lakin istifadəçi ilə ünsiyyət qurmağın təmiz brauzer üsullarını təmsil edirlər.
8787

8888
```smart header="Specifications"
89-
BOM is the part of the general [HTML specification](https://html.spec.whatwg.org).
89+
BOM ümumi [HTML specification](https://html.spec.whatwg.org)-in bir hissəsidir.
9090
91-
Yes, you heard that right. The HTML spec at <https://html.spec.whatwg.org> is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at <https://spec.whatwg.org>.
91+
Bəli, düz eşitdiniz. <https://html.spec.whatwg.org> ünvanındakı HTML spesifikasiyası təkcə "HTML dili" (teqlər, atributlar) haqqında deyil, həm də bir sıra obyektləri, metodları və brauzerə məxsus DOM uzantılarını əhatə edir. Bu, "geniş mənada HTML"dir. Həmçinin, bəzi hissələrin <https://spec.whatwg.org> ünvanında sadalanan əlavə xüsusiyyətləri də vardır.
9292
```
9393

94-
## Summary
94+
## Xülasə olaraq
9595

96-
Talking about standards, we have:
96+
Standartlar haqqında danışarkən bizdə:
9797

98-
DOM specification
99-
: Describes the document structure, manipulations and events, see <https://dom.spec.whatwg.org>.
98+
DOM spesifikasiyası
99+
: Sənəd strukturunu, manipulyasiyaları və hadisələri təsvir edir, bura baxa bilərsiniz <https://dom.spec.whatwg.org>.
100100

101-
CSSOM specification
102-
: Describes stylesheets and style rules, manipulations with them and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
101+
CSSOM spesifikasiyası
102+
: Üslub cədvəllərini və üslub qaydalarını, onlarla manipulyasiyaları və onların sənədlərə bind olmasını təsvir edir, bura baxa bilərsiniz <https://www.w3.org/TR/cssom-1/>.
103103

104-
HTML specification
105-
: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see <https://html.spec.whatwg.org>. It takes the DOM specification and extends it with many additional properties and methods.
104+
HTML spesifikasiyası
105+
: HTML dilini (məsələn, teqlər) və həmçinin BOM (brauzer obyekt modeli) -- müxtəlif brauzer funksiyalarını təsvir edir: `setTimeout`, `alert`, `location` və s., baxın <https://html.spec.whatwg .org>. DOM spesifikasiyasını götürür və onu bir çox əlavə xüsusiyyətlər və üsullarla genişləndirir.
106106

107-
Additionally, some classes are described separately at <https://spec.whatwg.org/>.
108107

109-
Please note these links, as there's so much stuff to learn it's impossible to cover and remember everything.
108+
Bundan əlavə, bəzi dərslər <https://spec.whatwg.org/> saytında ayrıca təsvir edilmişdir.
110109

111-
When you'd like to read about a property or a method, the Mozilla manual at <https://developer.mozilla.org/en-US/search> is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete.
110+
Zəhmət olmasa bu linklərə diqqət yetirin, çünki öyrənmək üçün o qədər şey var ki, hər şeyi əhatə etmək və yadda saxlamaq mümkün deyil.
112111

113-
To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
112+
Özəllik və ya metod haqqında oxumaq istədiyiniz zaman, <https://developer.mozilla.org/en-US/search>-da Mozilla təlimatı da gözəl mənbədir, lakin müvafiq spesifikasiya daha yaxşı ola bilər: o, daha mürəkkəb və oxunması daha uzun müddətdir, lakin fundamental biliklərinizi sağlamlaşdıracaq və tamamlayacaq.
114113

115-
Now we'll get down to learning DOM, because the document plays the central role in the UI.
114+
Nəyisə tapmaq üçün "WHATWG [term]" və ya "MDN [term]" internet axtarışından istifadə etmək çox vaxt rahatdır, məsələn, <https://google.com?q=whatwg+localstorage>, <https://google. com?q=mdn+localstorage>.
115+
116+
İndi DOM-u öyrənməyə başlayacağıq, çünki DOM UI-də çox əsas bir rol oynayır.

0 commit comments

Comments
 (0)