سلسلة جافا سيكريبت و DOM: الدرس 1

() translation by (you can also view the original English article)

مرحبًا بكم في الجزء الأول مما نأمل أن يكون سلسلة واسعة النطاق تغطي الجوانب الأساسية للغة برمجة جافا سكريبت و DOM API.

في حين أن الأطر مثل jQuery، و Prototype و MooTools هي طرق رائعة لقمع أخطاء المتصفح وتسريع التطوير، فإن من المهم معرفة وفهم التقنيات الأساسية. تعتزم هذه السلسلة إخبارك بما تحتاج إلى معرفته حول JavaScript ونموذج كائن المستند (DOM). حتى لو وثقت بمكتبة معينة، فسيظل هذا مفيدًا لك - إن معرفة كيف يعمل شيء ما في الداخل أمر جيد!

مقدمات

جافا سكريبت

جافا سكريبت هي لغة برمجة ديناميكية، مكتوبة بطريقة فضفاضة، تستخدم في العديد من البيئات المختلفة. بالإضافة إلى كونها لغة البرمجة السائدة من جانب العميل، فإنها تستخدم أيضًا لكتابة الإضافات الخاصة بـ IDEs، في ملفات PDF وكأساس لمنصات أخرى ولأفكار تجريدية أعلى.

يعتمد JavaScript على معيار (ECMAScript (ECMA-262 وتم إنشاؤه بواسطة Brendan Eich من Netscape. كان يُطلق عليه في البداية اسم LiveScript ولكنه تمت تسميته لاحقًا إلى JavaScript، وربما كان الهدف الوحيد هوأنه يسبب في حدوث ارتباك.

فيما يلي بعض ميزاته بتفاصيل أكثر:

لغات برمجة ديناميكية يتم تنفيذها في وقت التشغيل؛ لم يتم تجميعها. ولهذا السبب، تعتبر جافا سكريبت في بعض الأحيان لغة برمجة ملف بدلاً من لغة برمجة حقيقية (من الواضح أنها فكرة خاطئة). عندما يكون لديك JavaScript في مستند HTML سيتم تحليله أثناء تحميل الصفحة داخل المتصفح، ومن ثم في "وقت التشغيل".
اللغات المكتوبة بشكل فضفاض لا تصر على أي نظام كتابة قوي. إذا قمت ببرمجة في لغة C أو Java (ليست هي نفسها لغة JavaScript) فستعلم أنه عند تعيين متغيرعليك تحديد نوع مثل 'int' (عدد صحيح). جافا سكريبت مختلفة في ذلك لا تحتاج إلى تحديد النوع.
لتنفيذ الوراثة داخل JavaScript يجب عليك استخدام شيء ما يسمى النماذج الأولية. جافا سكريبت لا يدعم الفئات.
JavaScript أيضًا لغة وظيفية. يعامل الوظائف ككائنات من الدرجة الأولى؛ هذه هي الفكرة وراء لامدا.

إن فهم النقاط الواردة أعلاه ليس مهمًا في تعلم جافا سكريبت. إنها مجرد أفكار قليلة لابد من توصيلها إلى دماغك، ويجب أن تساعدك على تمييز JavaScript عن لغات البرمجة الأخرى التي قد تكون لديك خبرة بها.

طراز كائن المستند

طراز كائن المستند، عادة ما يتم اختصاره إلى DOM، هو واجهة برمجة التطبيقات التي تتفاعل من خلالها جافا سكريبت مع المحتوى داخل موقع الويب. غالبًا ما يُنظر إلى جافا سكريبت و DOM ككيان واحد لأن جافا سكريبت الأكثر استخدامًا لهذا الغرض (التفاعل مع المحتوى على الويب). يتم استخدام DOM API للوصول إلى مستندات HTML و XML وعبورها ومعالجتها.

مخطط أساسي لتسلسل DOM النموذجي (المبسط)

إليك بعض الأشياء الجديرة بالذكر حول DOM:

يخدم كائن النافذة ككائن عمومي، يمكنك الوصول إليه بمجرد كتابة "نافذة". من داخل هذا الكائن، يتم تنفيذ جميع شيفرة جافا سكريبت الخاصة بك. مثل جميع الكائنات لديه خصائص وطرق.
- الخاصية هي متغير مخزّن تحت كائن. جميع المتغيرات التي تم إنشاؤها على صفحة الويب بشكل تلقائي تصبح خصائص كائن النافذة.
- الطريقة هي وظيفة مخزنة تحت كائن. بما أن جميع الوظائف مخزنة تحت (على الأقل) كائن النافذة، فيمكن الإشارة إليها جميعًا باسم "الطرق".
ينشئ DOM تسلسلاً مطابقًا لهيكل كل مستند ويب. يتكون هذا التسلسل الهرمي من العقد. هناك عدة أنواع مختلفة من عقد DOM، أهمها "العنصر" و "النص" و "المستند".
- تمثل عقدة "العنصر"عنصرًا داخل الصفحة. إذا كان لديك عنصر فقرة ('')، فيمكن الوصول إليه من خلال DOM كعقدة.
- تمثل عقدة "النص" جميع النصوص (داخل العناصر) داخل الصفحة. لذا إذا كانت فقرتك تحتوي على جزء من النص فيمكن الوصول إليها مباشرة من خلال DOM.
- تمثل عقدة "المستند" الوثيقة بأكملها. (إنها عقدة الجذر في التسلسل الهرمي لـ DOM / الشجرة).
- لاحظ أيضًا أن سمات العنصر هي عقد DOM نفسها.
يحتوي كل محرك تخطيط على تنفيذ مختلف قليلاً لمعيار DOM. على سبيل المثال، فإن متصفح الويب فايرفوكس، الذي يستخدم محرك تخطيط Gecko، لديه تطبيق جيد (على الرغم من أنه لا يتوافق تمامًا مع مواصفات W3C) إلا أن Internet Explorer، الذي يستخدم محرك تخطيط Trident، يشتهر بتطبيقه ذو العيوب وغير المكتمل؛ مما يسبب الكثير من الألم داخل مجتمع تطوير الويب!

تنزيل Firebug

إذا كنت تستخدم Firefox ولم يكن لديك بالفعل Firebug addon، فأنا أوصي بتنزيله وتثبيته الآن. إنه أداة مفيدة جدًا للحصول على صورة لائقة عن هيكل المستند بأكمله.

JavaScript على الويب

عنصر النص

عندما تريد استخدام JavaScript على موقع الويب يجب تضمينه في عنصر نصي:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>JavaScript!</title>
    </head>
    <body>
    
        <script type="text/javascript">
        // <![CDATA[
       
        // ]]>
        </script>
    
    </body>
</html>

كما ترى لدينا عنصر نصي في أسفل المستند. يجب تعيين سمة النوع بشكل صارم على "application / javascript"، ولكن دون لا تتفاجئ في أنها لا تعمل في Internet Explorer، لذا فإننا نتعامل إما مع "text / javascript" أو لا توجد سمة نوع على الإطلاق. إذا كنت مهتمًا بالتحقق من الصحة، فربما يكون الاقتراح السابق مناسبًا لك.

تذكر أن تحدد البرامج النصية الخاصة بك كما CDATA!

ستلاحظ أيضًا أنه ضمن عنصر النص البرمجي هذا لدينا سطرين من خطوط التعليق. هذه تبلغ المتصفحات التي تدعم XHTML أن محتوى عنصر SCRIPT هو "بيانات حروف" ويجب ألا يتم تفسيره على أنه ترميز XHTML. هذا ضروري فقط إذا كنت تخطط لاستخدام الأحرف "<" أو ">" في شفرة جافا سكريبت الخاصة بك. من الواضح أنه يمكنك نسيان كل هذا إذا كنت تستخدم HTML عادي.

سمة التأجيل

سيتم تشغيل أي JavaScript يتم تضمينه داخل عنصر SCRIPT هذا عند تحميل الصفحة. الاستثناء الوحيد هو عندما يكون لعنصر SCRIPT سمة "تأجيل". بشكل افتراضي، عندما يستوفي أحد المستعرضات عنصر SCRIPT، فإنه يتوقف عن تشغيل الشيفرة، ثم يستمر في تحليل المستند. تقوم السمة تأجيل بإعلام المستعرض بأن الشيفرة لا تحتوي على أي كود يغير الوثيقة، وبالتالي يمكن تشغيله لاحقًا. المشكلة الوحيدة في هذا أنها تعمل فقط في IE، لذا من الأفضل تجنب هذه الخاصية.

ربط النصوص الخارجية

إذا كنت تريد الارتباط بملف برنامج نصي خارجي، فقم ببساطة بإضافة سمة SRC إلى عنصر SCRIPT تتوافق مع موقعه. من الأفضل عادةً أن يكون لديك ملفات نصية منفصلة بدلاً من كتابة التعليمات البرمجية المضمنة لأنه يعني أن المستعرض يمكنه تخزين الملف مؤقتًا. بالإضافة إلى أنك لا داعي للقلق بشأن أي من هراء CDATA:

1
2	<script type="text/javascript" src="my-script.js"></script>

أساسيات JavaScript

قبل أن نستمر في DOM من المستحسن أن يكون لديك فهم أساسي لبعض أساسيات JavaScript. إذا واجهتك مشكلة في فهم بعض هذه الأشياء، فلا داعي للقلق - ستلتقطها في النهاية!

في JavaScript يمكن أن يكون لديك أنواع مختلفة من القيم. هناك أرقام، سلاسل، قيم منطقية، كائنات، غير محددة وأصفار:

تتم كتابة التعليقات ذات السطر الواحد باستخدام الشريطتين المائلتين (//)، ويفترض أن يكون كل النص المتبقي على هذا السطر بمثابة تعليق بواسطة المحلل اللغوي. يتم تدوين التعليقات متعددة الأسطر باستخدام "/ *" و "* /" لإنهاء التعليق.

الأعداد

في JavaScript يتم تمثيل جميع الأرقام كقيم عائمة. عند تحديد متغير الأرقام تذكر أن لا تغطيه بأي علامات اقتباس.


// Note: ALWAYS use 'var' to declare a variable:
var leftSide = 100;
var topSide = 50;
var areaOfRectangle = leftSide * topSide; // = 5000

السلاسل

يتم أخذ أي سلسلة تحددها حرفيًا، ولن تعالجها جافا سكريبت. السلسلة عبارة عن سلسلة من أحرف موحدة التشفير ويجب تغليفها في زوج متطابق من علامات الاقتباس الفردية أو المزدوجة.


var firstPart = 'Hello';
var secondPart = 'World!';
var allOfIt = firstPart + ' ' + secondPart; // Hello World!
// The + sign is used as the string-concatenation operator
// (it's also used for numerical addition)

القيم المنطقية

تعتبر الأنواع المنطقية مفيدة عندما تريد تقييم حالة - لمعرفة ما إذا كانت تفي بمعايير محددة. لا يوجد سوى قيمتين منطقيتين محتملتين: حقيقي و مزيف. أي مقارنة، باستخدام عوامل تشغيل منطقية، ستؤدي إلى قيمة منطقية.


5 === (3 + 2); // = true 
// You can assign Boolean values to variables:
var veryTired = true;
// You can test for it like this:
if (veryTired) {
  // Sleep
}

إن '===' التي تراها أعلاه هي مشغل مقارنة، سنقوم بتغطيتها لاحقًا.

الدالات

الدالة هي كائن متخصص:


// Using the function operator to create a new function:
function myFunctionName(arg1, arg2) {
	// Function code goes here.
}
    
// If you omit the function's name then
// you're creating an "anonymous function":
function(arg1, arg2) {
	// Function code goes here.
}
        
// Running a function is simply a case of referencing it
// and then adding a parenthesis (with arguments):
myFunctionName(); // No arguments
myFunctionName('foo', 'bar'); // with arguments
    
// You can also run a function without assinging
// it to a variable:
    
(function(){
    // This is known as a self-invoking anonymous function
})();

المصفوفات

المصفوفة هو أيضاً كائن متخصص ويمكن أن يحتوي على أي عدد من قيم البيانات. للوصول إلى قيم البيانات داخل مصفوفة، يجب استخدام رقم ، يُشار إليه باسم "دليل" العنصر الذي تحاول استرداده:


// 2 different ways of declaring a new array,
    
// Literal:
var fruit = ['apple', 'lemon', 'banana'];
    
// Using the Array constructor:
var fruit = new Array('apple', 'lemon', 'banana');
    
fruit[0]; // Access the 1st item of the array (apple)
fruit[1]; // Access the 2nd item of the array (lemon)
fruit[2]; // Access the 3rd item of the array (banana)

الكائنات

الكائن عبارة عن مجموعة من القيم المسماة (أزواج المفتاح - القيمة). تشبه المصفوفة، الاختلاف الوحيد هو أنه يمكنك تحديد اسم لكل قيمة بيانات.


// 2 different ways of declaring a new Object,
    
// Literal (curly braces):
var profile = {
	name: 'Bob',
    age: 99,
    job: 'Freelance Hitman'
};
    
// Using the Object constructor:
var profile = new Object();
profile.name = 'Bob';
profile.age = 99;
profile.job = 'Freelance Hitman';

عبارة If/else

واحدة من أكثر التركيبات شيوعًا في JavaScript هي عبارة 'IF' / 'ELSE'. إنه شيء مثل هذا:


var legalDrinkingAge = 21; 
var yourAge = 29;
    
if ( yourAge >= legalDrinkingAge ) {
	// We can use 'alert' to notify the user:
    alert('You can drink.');
} else {
	alert('Sorry, you cannot drink.');
}

مشغلات جافا سكريبت:

بدلاً من إدراجهم جميعًا هنا أقترح عليك زيارة مقالة MDC حول المشغلات. إنها تشرحها بكثير من التفاصيل. لقد قمت بإعداد بعض الأمثلة لإعطائك فكرة عن كيفية استخدام بعض المشغلات أدناه:


// additioa/substraction/multiply/divide
var someMaths = 2 + 3 + 4 - 10 * 100 / 2;
    
// Equality
if ( 2 == (5 - 3 ) { /* Do stuff */ } // == checks for eqaulity
    
// Inequality
if ( 2 != (5 - 3 ) { /* Do stuff */ } 
    
// Strict Equality operators:
// (I suggest using these)
2 === 2 // Instead of 2 == 2
2 !== 3 // Instead of 2 != 3
    
// Assignment:
var numberOfFruit = 9;
numberOfFruit -= 2; // Same as "numberOfFruit = numberOfFruit - 2"
numberOfFruit += 2; // Same as "numberOfFruit = numberOfFruit + 2"

الحلقات

التكرارمفيد عندما تحتاج إلى المرور عبر كافة العناصر في مصفوفة أو كافة أعضاء الكائن. الطريقة الأكثر شيوعًا للتكرار في JavaScript هي استخدام عبارة FOR أو WHILE.


var envatoTutSites = ['NETTUTS','PSDTUTS','AUDIOTUTS','AETUTS','VECTORTUTS'];
    
// WHILE loop
var counter = 0;
var lengthOfArray = envatoTutSites.length;
while (counter < lengthOfArray) {
    alert(envatoTutSites[counter]);
    counter++; // Same as counter += 1;
}
    
// FOR loop
// (The i stands for "iterator" - you could name it anything)
for (var i = 0, length = envatoTutSites.length; i < length; i++) {
    alert(envatoTutSites[i]);
}

حلقات FOR هي الحلقات الأكثر شعبية من خلال المصفوفات.

العودة إلى DOM

الوصول إلى عقد DOM

لنفترض أن لدينا مستند XHTML أساسي يحتوي على فقرة وقائمة غير مرتبة:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>JavaScript!</title>
    </head>
    <body>
     
        <p id="intro">My first paragraph...</p>
    
        <ul>
            <li>List item 1</li>
            <li>List item 1</li>
            <li>List item 1</li>
            <li>List item 1</li>
            <li>List item 1</li>
        </ul>
    
        <script type="text/javascript">
        // <![CDATA[
       
        // ]]>
        </script>
    
    </body>
</html>

في هذا المثال الأول سنقوم بالوصول إلى فقرتنا باستخدام طريقة DOM "getElementById":

(يدخل هذا الرمز داخل عنصر SCRIPT في النموذج أعلاه).

1
2	var introParagraph = document.getElementById('intro');
3	// We now have a reference to the DOM node. This DOM
4	// node represents the intro paragraph.

يعد المتغير 'introParagraph' الآن مرجعًا لعقدة DOM. يمكننا القيام بعدد من الأشياء باستخدام هذه العقدة ، - يمكننا الاستعلام عن محتواها وسماتها،ويمكننا التلاعب بأي جانب من جوانبها. يمكننا إزالته أو استنساخه أو نقله إلى أجزاء أخرى من شجرة DOM.

أي شيء موجود داخل مستند يمكننا الوصول إليه باستخدام JavaScript و DOM API. لذا، قد نرغب في الوصول إلى القائمة غير المرتبة بطريقة مماثلة، والمشكلة الوحيدة هي أنه ليس لديها معرف. يمكنك تقديم معرف له ثم استخدام نفس الطريقة المذكورة أعلاه أو يمكننا الوصول إليه باستخدام" الحصول على العناصر بواسطة أسم الوسم ":

1
2	var allUnorderedLists = document.getElementsByTagName('ul');
3	// 'getElementsByTagName' returns a live node collection/list
4	// - It's very similar to an array with a few slight differences.

الحصول على العناصر بواسطة أسم الوسم

ترجع طريقة 'الحصول على العناصر بواسطة أسم الوسم 'إلى قائمة / مجموعة العقدة مباشرة. إنها مشابهة للمصفوفة في أنها تحتوي على خاصية الطول. من المهم ملاحظة أن هذه المجموعات "نشطة" - إذا أضفت عنصرًا جديدًا إلى DOM، فستقوم المجموعة بتحديث نفسها. نظرًا لأنها كائن يشبه المصفوفة، يمكننا الوصول إلى كل عقدة عبر دليل، من 0 إلى إجمالي طول المجموعة (ناقص 1):


// Access single unordered list: [0] index
var unorderedList = document.getElementsByTagName('ul')[0];
    
// Create Node list of all list items within the UL:
var allListItems = unorderedList.getElementsByTagName('li');
   
// Now, we can loop through each list item using a FOR loop:
for (var i = 0, length = allListItems.length; i < length; i++) {
    // Extract text node within and alert its content:
    alert( allListItems[i].firstChild.data );
}

Accessing nodes and attributes within the DOM

الوصول إلى العقد والسمات داخل DOM

عبور DOM

يستخدم مصطلح "العبور" لوصف عمل الانتقال عبر DOM، والعثورعلى العقد. تقدم لنا واجهة برمجة التطبيقات (API) الكثير من خصائص العقدة التي يمكننا استخدامها للتحرك لأعلى ولأسفل من خلال جميع العقد داخل الوثيقة.

هذه الخصائص مضمنة في جميع العقد وتمكنك من الوصول إلى العقد ذات الصلة / المغلقة:

Node.childNodes: يمكنك استخدام هذا للوصول إلى كافة العقد التابعة المباشرة لعنصر واحد. ستكون كائنًا شبيهًا بالمصفوفة، والذي يمكنك التكرار من خلاله. تتضمن العقد داخل هذا المصفوفة جميع أنواع العقدة المختلفة بما في ذلك العقد النصية وعقد العناصر الأخرى.
Node.firstChild: هذا هو نفس الوصول إلى العنصر الأول في مصفوفة "childNode" ('Element.childNodes [0]'). انها مجرد اختصار.
Node.lastChild: هذا هو نفس الوصول إلى العنصر الأخير في المصفوفة'childNode' ('Element.childNodes [Element.childNodes.length-1]'). انها مجرد اختصار.
Node.parentNode: يتيح لك هذا الوصول إلى العقدة الأب للعقدة الحالية لديك. لن يكون هناك سوى عقدة أب واحدة. من أجل الوصول إلى الأجداد، يمكنك ببساطة استخدام "Node.parentNode.parentNode" وما إلى ذلك.
Node.nextSibling: يتيح لك هذا الوصول إلى العقدة التالية على نفس المستوى داخل شجرة DOM.
Node.previousSibling: يتيح لك هذا الوصول إلى العقدة الأخيرة على نفس المستوى داخل شجرة DOM.

عبور مستند (مبسطة - يرجى قراءة أدناه)

لذا، وكما ترى، فإن عبور DOM أمر سهل للغاية، إنه مجرد حالة معرفة أسماء الخاصية.

شيء واحد يجب ملاحظته حول الرسم أعلاه: يمكن استرداد عناصر القائمة بهذه الطريقة فقط إذا لم يكن هناك مسافة بيضاء بينهما. نظرًا لأنه يمكن أن يكون لديك عقد نصية وعقد عناصر في مستند، فإن المسافة بين '' وأول '' يتم احتسابها بالفعل كعقدة في حد ذاتها. وبالمثل فإن القائمة غير المرتبة ليست في الواقع الشقيقة التالية للفقرة - بما أنه يوجد في سطر جديد فراغ بين العنصرين - وبالتالي، عقدة أخرى! عادة، ما ستفعله في هذا الموقف هو الحلقة خلال مصفوفة "childNode" واختبار "نمط العقدة". نمط العقدة" 1 تعني أنه عنصر، 2 تعني أنه سمة، 3 تعني أنه عقدة نصية. يمكنك الاطلاع على القائمة الكاملة هنا: https://developer.mozilla.org/En/DOM/Node.nodeType.

هذا كل ما هو!

هذه هي الطريقة التي تعمل بها جميع مكتبات جافا سكريبت الرئيسية وراء الكواليس؛ باستخدام أساليب وخصائص DOM الأصلية لتمنحك الوصول إلى هذه العناصر من خلال تجريد مصقول لطيف. ما يفصلك عن إطار العمل هو أن لديك الآن فكرة عن كيفية البقاء دون إطار (إذا لم تكن قد فعلت)!

والى اللقاء التالي

`حسنا، هذا هو الجزء الأول. آمل أن تكون قد تعلمت شيئًا عن جميع هذه الامور المشتتة. في الجزء التالي من السلسلة، نأمل أن نركز على بعض الأمثلة الأكثر قابلية للتطبيق ؛ من المحتمل أن نغطي نموذج حدث المتصفح أيضًا.

`في الوقت الحالي وإذا لم تكن قد قمت بالفعل بالتحقق من هذه المحادثات من قبل دوج كروكفورد (موقع ياهو!):

شكرا للقراءة!

اشترك في NETTUTS RSS Feed لمزيد من المقتنيات اليومية لتطوير الويب والمقالات.