مدخل إلى لغة JavaScript

مدخل إلى لغة JavaScript

إن لغة JavaScript من أبرز لغات البرمجة في عالم تطوير الويب، فهي اللغة الأساسية التي تضيف التفاعل والحيوية للمواقع الإلكترونية. بفضل مرونتها وسهولة تعلمها، أصبحت JavaScript خيارًا شائعًا بين المبرمجين المبتدئين والمحترفين على حد سواء… تستخدم JavaScript لإنشاء عناصر ديناميكية على صفحات الويب مثل القوائم التفاعلية، النماذج، الرسوم المتحركة، وأكثر من ذلك بكثير…

تعرفنا في مقال مقدمة الى JavaScript على اللغة وخصائصها وبيئة العمل معها.. ونكمل في هذا المقال، سنأخذ جولة تمهيدية لفهم بعض الأساسيات التعامل مع لغة JavaScript، سنقوم باستكشاف أساسيات JavaScript مثل :

• كتابة التعليقات (Comments).
• طباعة البيانات (Outputs).
• إدخال البيانات (Inputs).

لنبدأ ….

تُستخدم التعليقات في JavaScript كما في لغات البرمجة الاخرى لكتابة ملاحظات داخل الكود لا يتم تنفيذها أثناء تشغيل البرنامج، وهي مفيدة لتوضيح منطق الكود للمبرمج أو للآخرين الذين قد يقرؤون الكود لاحقًا، كما تُستخدم أيضًا لتعطيل جزء من الكود مؤقتًا أثناء التجربة أو التصحيح، في JavaScript هناك نوعان من التعليقات:

1.تعليق لسطر واحد: ويكون باستخدام // قبل نص التعليق المراد. على سبيل المثال :

//for one line comment 

2. تعليق لعدة أسطر: لكتابة تعليق من عدة أسطر نكتب التعليق بين /* و */. على سبيل المثال:

/*   Here we can write many lines of comments  */ 

تكمن أهمية استخدام التعليقات في الكود البرمجي أنها تعزز من قابلية قراءة الكود وصيانته.

طباعة البيانات (Outputs) في جافا سكريبت (JavaScript)

في البرمجة تُستخدم طباعة البيانات لعرض القيم أو النتائج أثناء تشغيل البرنامج (Outputs) . وهي فعالة لفهم ما يحدث في الكود أو لاختبار مخرجات معينة. لهذا تعتبر طباعة البيانات تُعد من الخطوات الأساسية لفهم طريقة عمل البرنامج، حيث تُستخدم لعرض النصوص أو القيم على الشاشة أو في أدوات المطور.

وتوفر جافا سكريبت (JavaScript) طرق متنوعة لطباعة البيانات منها ما يلي :

1- استخدام عناصر الـ Window Object

في مستند HTML، عندما تفتح صفحة ويب في المتصفح، يقوم المتصفح بإنشاء كائن رئيسي (أعلى مستوى) يُسمى window. هذا الكائن يُمثّل نافذة المتصفح نفسه، ويحتوي على كل ما يظهر في الصفحة، بالإضافة إلى خصائص ووظائف تتيح لك التفاعل مع الصفحة والمستخدم عبر JavaScript، ببساطة window هو الجذر الأساسي لكل كائن في صفحة الويب، وعندما استخدام JavaScript في صفحة HTML فأننا تتعامل دائمًا (سواء بشكل مباشر أو غير مباشر) مع هذا الكائن:

أهم عناصر Window Object المستخدمة في طباعة المخرجات هي:

alert()

و تُستخدم عرض محتوى في نافذة منبثقة على سبيل المثال رسالة ترحيبية أو للتنبيه.. ويوضح المثال التالي طريقة الاستخدام :

 // alert function
window.alert("Hello World");
/* Same too
alert("Hello World");        
 */

console.log()

تُستخدم لعرض البيانات في وحدة التحكم (Console) الخاصة بالمطور في المتصفح. ويتم عرض البيانات في وحدة التحكم لأغراض عدة منها تصحيح الأخطاء.لأغراض تعلم اللغة و تستخدم بشكل أساسي كدالة طباعة في برمجة Backend .. وتتضح طريقة استخدامها في المثال التالي:

window.console.log("Hello World");
/* Same too        
console.log("Hello World");         
*/

ستجد في الأمثلة السابقة في تعليقات كتابة أخرى للكود أننا لا تحتاج دائمًا إلى كتابة window.، وهذا لأنه ضمن السياق العام (Global Scope).

2- استخدام عناصر HTML DOM

DOM هو اختصار لـ Document Object Model، أي "نموذج كائن المستند".وهو هيكل شجري (Tree Structure) يمثّل محتوى صفحة HTML عند تحميلها في المتصفح. فعندما يتم تحميل صفحة HTML يقوم المتصفح بتحويلها إلى كائنات قابلة للتعامل معها باستخدام JavaScript، ويكون الكائن الرئيسي الذي يمثل الصفحة هو (document)..
بإختصار باستخدام HTML DOM يُمكن لجافا سكريبت الوصول إلى جميع عناصر مستند HTML وتغييرها.أي لعناصر DOM العمل مع JavaScript في طباعة المخرجات مثلاً:

1-الطباعة على مستند HTML

document.write()

وتُستخدم لكتابة النص مباشرة داخل صفحة HTML (لا يُنصح باستخدامها في المشاريع الحديثة).

// document.write 
document.write("Hello World");
/* Same too   
window.document.write("Hello World");  
*/

توجد اشكالية لدى البعض في الفرق بين window و document الفرق بينهما بسيط فـ window تمثل نافذة المتصفح كاملة بينما document يمثل صفحة HTML الحالية داخل النافذة، لاحظ المثال أعلاه document هي جزء من window .

2- الطباعة داخل عنصر HTML:

يوفر DOM العديد من الطرق للوصول الى عناصر صفحة الـ HTML منها يصل الى العنصر عن طريق اسمة أو مُعرف العنصر Id أو حتى نوعة على سبيل المثال نستخدم في الأمثلة التالية الدالة getElementById() للوصل للعنصر بواسطة الـ Id … بعد الوصل للعنصر نعيين القيمة المراد طباعتها بواسطة الدوال:

innerText()

و تستخدم عندما نريد عرض أو قراءة النص فقط، بدون تنسيقات HTML، أي نريد تجاهل أي وسوم داخل العنصر.المثال التالي يوضح هذا…

// innerText
document.getElementById("box").innerText = "Hello World!";
document.getElementById("box0").innerText = "<strong>Hello World!</strong>"; 
/* Try this   
window.document.getElementById("box").innerText = "Hello World!";   
*/

لتكون نتيجة المثال كتالي :

innerHTML()

و تستخدم عندما نريد إضافة وسوم HTML داخل عنصر (مثل <b>, <ul>, <br>...) تحتاج لتنسيق أو إنشاء عناصر ديناميكيًا. لا حظ الفرق بين نتيجة المثال السابق وهذا المثال عند استخدام innerHTML …

// innerHTML   
document.getElementById("box").innerHTML = "Hello World!";  
document.getElementById("box0").innerHTML = "<strong>Hello World!</strong>";          
/* Try this
window.document.getElementById("box").innerHTML = "Hello World!";     
*/

نتيجة المثال:

تُستخدم هذه الدوال لأغراض مختلفة مثل التحقق من القيم، عرض النتائج، أو تجربة التعليمات البرمجية. فيما يلي أهم الفروق بين innerText ,innerHTML

أوجه المقارنة	innerHTML	innerText
الوظيفة	تعرض أو تغيّر المحتوى الكامل للعنصر، بما في ذلك وسوم HTML	تعرض أو تغيّر النص فقط الموجود داخل العنصر بدون أي وسوم HTML
تقرأ/تكتب HTML؟	نعم	لا
تقرأ/تكتب نص فقط؟	ممكن، لكن يتضمن أيضًا الوسوم	نعم، فقط النص الواضح
تستخدم في؟	إدراج عناصر HTML جديدة أو قراءة محتوى HTML	قراءة النص المعروض للمستخدم فقط

جميع الأمثلة على هذا الجزء متوفرة بالكامل هنا.

إدخال البيانات في JavaScript

لجعل البرامج تفاعلية، نحتاج أحيانًا إلى أخذ مدخلات من المستخدم، و JavaScript تتيح ذلك بسهولة باستخدام أحد الطرق التالية حسب حاجة البرنامج :

1.prompt()

وهي دالة التي تُظهر نافذة تطلب من المستخدم إدخال نص، تعتبر مناسبة للاستخدامات السريعة والبسيطة.. لاحظ طريقة الاستخدام في المثال التالي:

let name = prompt("Enter your name please! ");
console.log("Hi " + name);

في المثال السابق قمنا بإسناد القيمة المرجعة من prompt بواسطة المستخدم الى المتغير name (تستخدم let للإعلان عن متغير ) ومن ثم طباعة القيمة بواسطة console.log. و إذا اختار المستخدم "إلغاء"، سترجع null. لا يُنصح استخدام prompt في واجهات المستخدم الحديثة لأنها تقطع تفاعل الصفحة مؤقتًا.

2.confirm()

وهي دالة تستخدم للإدخال موافقة أو رفض (نعم / لا) من المستخدم، و ترجع قيمة منطقية (true/false).. ويوضح المثال التالي طريقة الاستخدام..

let isSure = confirm("Are you sure you for delete it?"); 
if (isSure) 
	{console.log("Delete is done");}
else 
	{console.log("Canceled");}

في المثال تم إسناد القيمة المنطقية المرجعة من confirm إلى المتغير "isSure" , ومن ثم اختيار الرسالة بواسطة الشرط if اعتماد على قيمة المتغير "isSure" .

3. استخدام عناصر الـ HTML

مثل (<input>, <textarea>, <select>) وتعتبر الطريقة الأكثر احترافية لإدخال بيانات من خلال صفحة HTML . وللمزيد عن عناصر الإدخال في HTML يمكن الاطلاع على مقال عن بناء النماذج Form في HTML … لا حظ طريق الاستخدام في المثال التالي:

...........
<input type="text" id="username" placeholder="اEnter your name please!">
<button onclick="getName()">Send</button> 
<!--JavaScript code-->  
<script>        
	function getName() {
    	let name = document.getElementById("username").value;
        alert("Hi " + name); }
</script>
...........

في هذا المثال قمنا بإرسال القيمة المرجعة من المستخدم إلى الدالة "getName" التي بدورها ستظهر بواسطة alert.

إن طريقة الإدخال بواسطة عناصر HTML الأكثر استخداماً في التطبيقات الحديثة أما عن التطبيقات التفاعلية الكبيرة تعتمد استخدام مكتبات خارجية أو الـ DOM للإدخال متقدم باستخدام أحدث Event و DOM حسب تصميم الصفحة. أما prompt و confirm فهي مفيدة في لأغراض التعلم أو التأكيد السريع.

يمكن تلخيص طُرق إدخال البيانات في جافا سكريبت كالتالي:

الطريقة	prompt	confirm	عناصر الـ HTML
نوع البيانات	نص (String)	منطقي (Boolean)	حسب النوع المختار
مرونة في التصميم	لا	لا	نعم
واجهة مستخدم احترافية؟	بسيطة وتقليدية	بسيطة	قابلة للتخصيص
الاستخدام الأفضل	للاختبارات أو التعليم	التأكيد السريع	التطبيقات الحديثة

جميع الأمثلة على هذا الجزء متوفرة بالكامل هنا.

تعتبر كيفية كتابة التعليقات (Comments) وطُرق طباعة البيانات (Outputs) بالإضافة إلى طُرق إدخال البيانات (Inputs) المفاتيح الرئيسية لقراءة الكود، وتتبع التنفيذ، والتفاعل مع المستخدم. هذه هي أساسيات التعامل الكود البرمجي قمنا في هذا المقال شرحها في لغة JavaScript. وبعد إتقان هذه الاساسيات ستكون مستعدًا للانتقال إلى مفاهيم أعمق مثل الشروط، الحلقات، الدوال، والتعامل مع عناصر صفحة الويب.