|
1 | | -# Browser environment, specs |
| 1 | +# Brauzer mühiti, texniki xüsusiyyətlər |
2 | 2 |
|
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. |
4 | 4 |
|
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. |
6 | 6 |
|
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. |
8 | 8 |
|
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: |
10 | 10 |
|
11 | 11 |  |
12 | 12 |
|
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: |
14 | 14 |
|
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. |
17 | 17 |
|
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: |
19 | 19 |
|
20 | 20 | ```js run |
21 | 21 | function sayHi() { |
22 | | - alert("Hello"); |
| 22 | + alert("Salam"); |
23 | 23 | } |
24 | 24 |
|
25 | 25 | // global functions are methods of the global object: |
26 | 26 | window.sayHi(); |
27 | 27 | ``` |
28 | 28 |
|
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: |
30 | 30 |
|
31 | 31 | ```js run |
32 | 32 | alert(window.innerHeight); // inner window height |
33 | 33 | ``` |
34 | 34 |
|
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. |
36 | 36 |
|
37 | 37 | ## DOM (Document Object Model) |
38 | 38 |
|
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. |
40 | 40 |
|
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. |
42 | 42 |
|
43 | | -For instance: |
| 43 | +Məsələn: |
44 | 44 | ```js run |
45 | | -// change the background color to red |
| 45 | +// arxa fon rəngini qırmızıya çevir |
46 | 46 | document.body.style.background = "red"; |
47 | 47 |
|
48 | | -// change it back after 1 second |
| 48 | +// 1 saniyədən sonra onu yenidən dəyişdir |
49 | 49 | setTimeout(() => document.body.style.background = "", 1000); |
50 | 50 | ``` |
51 | 51 |
|
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: |
53 | 53 |
|
54 | | -- **DOM Living Standard** at <https://dom.spec.whatwg.org> |
| 54 | +- **DOM yaşayış standartı** at <https://dom.spec.whatwg.org> |
55 | 55 |
|
56 | 56 | ```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. |
58 | 58 |
|
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. |
60 | 60 | ``` |
61 | 61 |
|
62 | 62 | ```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. |
64 | 64 |
|
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. |
66 | 66 | ``` |
67 | 67 |
|
68 | 68 | ## BOM (Browser Object Model) |
69 | 69 |
|
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. |
71 | 71 |
|
72 | | -For instance: |
| 72 | +Məsələn: |
73 | 73 |
|
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. |
76 | 76 |
|
77 | | -Here's how we can use the `location` object: |
| 77 | +`location` obyektindən necə istifadə edə bilərik: |
78 | 78 |
|
79 | 79 | ```js run |
80 | | -alert(location.href); // shows current URL |
| 80 | +alert(location.href); // cari URL-ni göstərir |
81 | 81 | 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 |
83 | 83 | } |
84 | 84 | ``` |
85 | 85 |
|
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. |
87 | 87 |
|
88 | 88 | ```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. |
90 | 90 |
|
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. |
92 | 92 | ``` |
93 | 93 |
|
94 | | -## Summary |
| 94 | +## Xülasə olaraq |
95 | 95 |
|
96 | | -Talking about standards, we have: |
| 96 | +Standartlar haqqında danışarkən bizdə: |
97 | 97 |
|
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>. |
100 | 100 |
|
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/>. |
103 | 103 |
|
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. |
106 | 106 |
|
107 | | -Additionally, some classes are described separately at <https://spec.whatwg.org/>. |
108 | 107 |
|
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. |
110 | 109 |
|
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. |
112 | 111 |
|
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. |
114 | 113 |
|
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