diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md index 4cdf231b0..6914bfbca 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md @@ -1,10 +1,10 @@ -importance: 5 +درجة الأهمية: 5 --- -# Get the attribute +# الخصول على الخاصية -Write the code to select the element with `data-widget-name` attribute from the document and to read its value. +اكتب الرمز لتحديد العنصر الذي يحتوي على السمة `data-widget-name` من المستند وقراءة قيمته. ```html run @@ -19,3 +19,4 @@ Write the code to select the element with `data-widget-name` attribute from the ``` + diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md index 726be4c8f..6bd0ee1d5 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md @@ -1,9 +1,8 @@ +أولاً ، نحن بحاجة إلى العثور على جميع المراجع الخارجية. -First, we need to find all external references. +هناك طريقتان. -There are two ways. - -The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need: +الأول هو العثور على جميع الروابط باستخدام `document.querySelectorAll ('a')` ثم تصفية ما نحتاج إليه: ```js let links = document.querySelectorAll('a'); @@ -22,9 +21,9 @@ for (let link of links) { } ``` -Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML. +يرجى ملاحظة ما يلي: نستخدم `link.getAttribute ('href')`. ليس `link.href` ، لأننا نحتاج إلى القيمة من HTML. -...Another, simpler way would be to add the checks to CSS selector: +... طريقة أخرى أبسط هي إضافة الشيكات إلى محدد CSS: ```js // look for all links that have :// in href @@ -34,3 +33,4 @@ let links = document.querySelectorAll(selector); links.forEach(link => link.style.color = 'orange'); ``` + diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md index b0a8ab7b1..a64a283bb 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md @@ -1,12 +1,12 @@ -importance: 3 +درجة الأهمية: 3 --- -# Make external links orange +# اجعل الروابط الخارجية برتقالية -Make all external links orange by altering their `style` property. +اجعل جميع الروابط الخارجية برتقالية من خلال تعديل خاصية `النمط 'الخاصة بها. -A link is external if: +الرابط يعتبر خارجيا إذا: - Its `href` has `://` in it - But doesn't start with `http://internal.com`. @@ -30,6 +30,7 @@ Example: ``` -The result should be: +النتيجة يجيب أن تكون: [iframe border=1 height=180 src="solution"] + diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md index bcbf074ce..ef8ce6c93 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/article.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md @@ -1,18 +1,18 @@ -# Attributes and properties +# الصفات والخصائص -When the browser loads the page, it "reads" (another word: "parses") the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects. +عندما يقوم المتصفح بتحميل الصفحة ، فإنه "يقرأ" (كلمة أخرى: "يحلل ") HTML ويولد كائنات DOM منه. بالنسبة لعقد العناصر ، تصبح معظم سمات HTML القياسية تلقائيًا خصائص لكائنات DOM. -For instance, if the tag is ``, then the DOM object has `body.id="page"`. +على سبيل المثال ، إذا كانت العلامة `` ، فإن كائن DOM يحتوي على `body.id =" page "`. -But the attribute-property mapping is not one-to-one! In this chapter we'll pay attention to separate these two notions, to see how to work with them, when they are the same, and when they are different. +لكن تعيين خاصية السمة ليس واحد لواحد! في هذا الفصل ، سننتبه لفصل هذين المفهومين ، لمعرفة كيفية العمل معهم ، ومتى يكونان متماثلين ، ومتى يكونا مختلفين. -## DOM properties +## خصائص DOM -We've already seen built-in DOM properties. There are a lot. But technically no one limits us, and if there aren't enough, we can add our own. +لقد رأينا بالفعل خصائص DOM مضمنة. هناك الكثير. ولكن من الناحية الفنية ، لا أحد يحدنا ، وإذا لم يكن هناك ما يكفي ، فيمكننا إضافة الخاصة بنا. -DOM nodes are regular JavaScript objects. We can alter them. +عقد DOM هي كائنات JavaScript عادية. يمكننا تغييرها. -For instance, let's create a new property in `document.body`: +على سبيل المثال ، فلننشئ خاصية جديدة في `document.body`: ```js run document.body.myData = { @@ -23,7 +23,7 @@ document.body.myData = { alert(document.body.myData.title); // Imperator ``` -We can add a method as well: +كما يمكننا إضافة طريقة أو دالة أيضا: ```js run document.body.sayTagName = function() { @@ -33,7 +33,7 @@ document.body.sayTagName = function() { document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) ``` -We can also modify built-in prototypes like `Element.prototype` and add new methods to all elements: +يمكننا أيضًا تعديل النماذج الأولية المضمنة مثل `Element.prototype` وإضافة طرق جديدة لجميع العناصر: ```js run Element.prototype.sayHi = function() { @@ -44,18 +44,18 @@ document.documentElement.sayHi(); // Hello, I'm HTML document.body.sayHi(); // Hello, I'm BODY ``` -So, DOM properties and methods behave just like those of regular JavaScript objects: +لذا ، تتصرف خصائص وأساليب DOM تمامًا مثل تلك الخاصة بكائنات JavaScript العادية: -- They can have any value. -- They are case-sensitive (write `elem.nodeType`, not `elem.NoDeTyPe`). +- يمكن أن يكون لها أي قيمة. +- أنها حساسة لحالة الأحرف (اكتب `elem.nodeType` ، وليس` elem.NoDeTyPe`). -## HTML attributes +## سمات HTML -In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them. +في HTML ، قد تحتوي العلامات على سمات. عندما يقوم المتصفح بتحليل HTML لإنشاء كائنات DOM للعلامات ، فإنه يتعرف على السمات * القياسية * وينشئ خصائص DOM منها. -So when an element has `id` or another *standard* attribute, the corresponding property gets created. But that doesn't happen if the attribute is non-standard. +لذلك ، عندما يكون للعنصر `id` أو سمة * standard * أخرى ، يتم إنشاء الخاصية المقابلة. ولكن هذا لا يحدث إذا كانت السمة غير قياسية. -For instance: +على سبيل المثال: ```html run ``` -But there are exclusions, for instance `input.value` synchronizes only from attribute -> to property, but not back: +ولكن هناك استثناءات ، على سبيل المثال ، تتم مزامنة `input.value` فقط من السمة -> إلى الخاصية ، ولكن ليس مرة أخرى: ```html run @@ -182,15 +182,15 @@ But there are exclusions, for instance `input.value` synchronizes only from attr ``` -In the example above: -- Changing the attribute `value` updates the property. -- But the property change does not affect the attribute. +في المثال أعلاه: +- يؤدي تغيير السمة `القيمة` إلى تحديث العقار. +- لكن تغيير الخاصية لا يؤثر على السمة. -That "feature" may actually come in handy, because the user actions may lead to `value` changes, and then after them, if we want to recover the "original" value from HTML, it's in the attribute. +قد تكون هذه "الميزة" مفيدة حقًا ، لأن إجراءات المستخدم قد تؤدي إلى تغييرات `القيمة` ، وبعدها ، إذا أردنا استعادة القيمة" الأصلية "من HTML ، فهي في السمة. -## DOM properties are typed +## خصائص DOM مكتوبة -DOM properties are not always strings. For instance, the `input.checked` property (for checkboxes) is a boolean: +خصائص DOM ليست دائمًا سلاسل. على سبيل المثال ، تعد الخاصية `input.checked` (لمربعات الاختيار) منطقيةBoolean: ```html run checkbox @@ -201,7 +201,7 @@ DOM properties are not always strings. For instance, the `input.checked` propert ``` -There are other examples. The `style` attribute is a string, but the `style` property is an object: +هناك أمثلة أخرى. سمة `style` عبارة عن سلسلة ، لكن خاصية` style` كائن Object: ```html run
Hello
@@ -216,11 +216,11 @@ There are other examples. The `style` attribute is a string, but the `style` pro ``` -Most properties are strings though. +معظم الخصائص عبارة عن سلاسل. -Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the `href` DOM property is always a *full* URL, even if the attribute contains a relative URL or just a `#hash`. +نادرًا جدًا ، حتى إذا كان نوع خاصية DOM عبارة عن سلسلة ، فقد يختلف عن السمة. على سبيل المثال ، تكون خاصية `href` DOM دائمًا عنوان URL * كامل * ، حتى إذا كانت السمة تحتوي على عنوان URL نسبي أو فقط` # علامة تجزئة '. -Here's an example: +إليك مثال: ```html height=30 run link @@ -233,16 +233,16 @@ Here's an example: ``` -If we need the value of `href` or any other attribute exactly as written in the HTML, we can use `getAttribute`. +إذا كنا بحاجة إلى قيمة `href` أو أي سمة أخرى كما هو مكتوب تمامًا في HTML ، فيمكننا استخدام` getAttribute`. -## Non-standard attributes, dataset +## سمات غير قياسية ، مجموعة البيانات -When writing HTML, we use a lot of standard attributes. But what about non-standard, custom ones? First, let's see whether they are useful or not? What for? +عند كتابة HTML ، نستخدم الكثير من السمات القياسية. ولكن ماذا عن تلك المخصصة وغير القياسية؟ أولاً ، دعنا نرى ما إذا كانت مفيدة أم لا؟ لماذا؟ -Sometimes non-standard attributes are used to pass custom data from HTML to JavaScript, or to "mark" HTML-elements for JavaScript. +في بعض الأحيان يتم استخدام السمات غير القياسية لتمرير البيانات المخصصة من HTML إلى JavaScript ، أو "وضع علامة" على عناصر HTML لـ JavaScript. -Like this: +مثله: ```html run @@ -265,9 +265,9 @@ Like this: ``` -Also they can be used to style an element. +كما يمكن استخدامها لتصميم نمط عنصر. -For instance, here for the order state the attribute `order-state` is used: +على سبيل المثال ، بالنسبة لحالة الطلب ، يتم استخدام السمة `order-state`: ```html run