جافا سكريبت : المستوى الأول دورة كاملة للمبتدئين

جافا سكريبت أو JS , وهي لغة برمجة تتعلق ببناء صفحات الويب.

تمنح جافا سكريبت مزيدًا من الفعاليّة في صفحات العميل وتخضع إلى تطويرٍ قائم حتى الآن من قبل شركة موزيلا.

دورة جافا سكريبت تتضمن العديد من الشروحات حول إنشاء صفحات ويب أكثر تفاعلية.

بما في ذلك الوصول إلى أهم خصائص لغة CSS قوالب HTML.

جافا سكريبت وصفحة Hello World

لغة جافا سكريبت تُستخدم في العديد من أفق وسياق تطوير صفحات الويب وغيرها.

لكن بالنسبة للويب هي بدورها لغة تتعلّق بالتنفيذ من جهة العميل أو ما يشار إليه بالإنجليزية Client side.

ما يعني القيام ببعض وظائف المتصفح دون الحاجة إلى تحديث الصفحات.

وبالتالي هي تشتمل على العديد من المزايا كونها واحدة من اللغات سهلة التطبيق إذا ما تمت مقارنتها مع غيرها.

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

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

في المثال التالي برنامج hello world في صفحة HTML وطباعة العبارة الشهيرة Hello World :

<html>
<body>

<script type="text/javascript">
document.write("Hello World!");
</script>

</ body >
</html>

غالبا ما تدل الفكرة السابقة على طريقة استدعاء كود JavaScript.

وكل ما دعت الحاجة إليه هو علامتا HTML متبوعة بعلامتي البرنامج النصي الخاص الذي يتضمن إحدى دوال اللغة .

ما دون ذلك لن يعمل البرنامج لعدم التعرف على صيغة اللغة.

يمكن الإشارة هنا إلى أن بيان document.write إحدى الأدوات الأكثر استخدامًا في جافا سكريبت.

وخاصة أثناء التأثير على صفحات الويب دون تحديث الصفحة من جهة الخادم.

تحميل الصفحات

يمكن كتابة كود جافا سكريبت على صفحة مشتركة مع علامات HTML الأخرى.

وهي طريقة عملية إذا ما دعت الحاجة إلى تنظيم الكود في المشاريع الكبيرة.

تمكن جافا سكريبت من عملية الاتصال بجميع موارد الصفحة دون إحداث خطأ في عملية تحميل الصفحة.

على سبيل المثال تكمن الحاجة إلى فصل كود JavaScript من أجل تنظيم الصفحات جيدًا.

والذي غالباً ما يتم التطرق إليه عند تحميل برنامج JavaScript ودمجها في علامات HTML.

وبالتالي يمكن تضمين ملف JavaScript من خلال إنشاء أي ملف ومن ثم تغيير الإمتداد إلى .js

<!--External JavaScript File are same of javascript script load -->
<script type="text/javascript" src="yourfile.js"></script>

الطريقة السابقة هي واحدة من أكثر الطرق استخدامًا في استدعاء ملفات اللغة وخاصة كلما ازدادت وظائف صفحات الويب .

علامة البرنامج النصي (منطقة جافا سكريبت)

يتم قراءة ملفات اللغة على أنها كتل برمجية مستقلة سواء كانت داخل ملف js أو حتى على صفحات html .

<script>
JavaScript code here...
</script>

إضافة الصفحة الأولى

يمكن تضمين أي لغة تقبل مهام إدارة صفحات الويب

وفي منطقة جافا سكريبت يستطيع المطور العمل مع كافة وظائف اللغة إلى أن يتم الخروج بخاتمة الوسم.

على سبيل المثال وضع التعليقات في علامة noscript لتجنب استخدام // أو / ** / أثناء كتابة التعليقات ، لذا يبدو الأمر كما يلي:

<script type="text/javascript">
    document.write("Hello World!");
</script>
<noscript>
    The color is Green.
</noscript>

تتميز اللغة باحتوائها على جملة document.write باعتبارها جملة print نكتب فيها الرسالة الظاهرة لتصبح على النحو التالي:

<script type="text/javascript">
 document.write("Hello World! in javascript :-) ");
</script>

وبالتالي فإن document.write واحدة من أشهر جمل الطباعة على شاشة النتائج وليس على وحدة الكونسول .

على سبيل المثال تشير الأقواس وعلامات "" إلى وجود سلسلة من نوع string داخل الجملة المطبوعة.

فيما يلي قالب من HTML مع كود JS يظهر في حال ما أراد المطور فرض استخدام اللغة في المنطقة المعروضة بين علامتي script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>First page with script!</title>
</head>
<body>

<h3>Welcome to first HTML page with JS script!</h3>
<script type="text/javascript">
    document.write("Yes , this is me JAVASCRIPT Code! , I am easy to learn!!");
</script>

</ body >
</html>

التعليقات في لغة جافا سكريبت

يحدث ما أن يتم كتابة كود كبير وتبدأ معه صعوبة التحليل ما يؤدي في نهاية المطاف إلى كود غير منظم.

جافا سكريبت حالها كحال اللغات الأخرى حيث أنها تدعم إرفاق التعليقات جنبًا إلى جنب من أجل تيسير عملية التطوير.

يمكن حجز تعليق في سطر واحد أو أكثر كما في المثال التالي

<script>
// I am javascript comment
</script>

يمكن كتابة التعليق بعد تنفيذ وظيفة ما على النحو التالي:

<script>
 document.write("Javascript code here !");// I am javascript comment
</script>

هناك العديد من الطرق التي يستطيع المطور من خلالها تفعيل الكود أو إلغاء تفعيله :

<script>
// document.write("I deactivated this code by considering as a comment!");
</script>

<script>
// document.write("I deactivated this code by considering as a comment!");
</script>

على سبيل المثال هنا نجد طريقة أخرى أكثر تشابهًا مع لغة سي في دمج التعليقات :

/*
You can do this by creating multiple lines of comment
to become like this
and this is very effective way if you want to write paragraph comment
*/

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

تعتبر المتغيرات إحدى الجوانب الهامة كلما ازدادت المعرفة في مدى إدارة ذاكرة المتصفحات.

حيث أن ذلك من شأنه المساعدة بشكل كبير في الانتقال إلى أدوات أخرى أكثر تعقيدًا في اللغة.

يمكن تعيين قيم لمتغير ما ثم البدء في إظهار النتائج على شاشة المتصفح.

من جهة أخرى قد لا تختلف المتغيرات في لغة جافا سكريبت عن غيرها من لغات البرمجة .

وأما في حال الإشارة إلى متغير ما ، فإن أسهل طريقة للقيام بذلك هي كما في الكود التالي:

/*Declaring variable*/
let x = 2;

مع ذلك يمكن استخدام let in JavaScript كونها إحدى الطرق الشائعة في تعريف المتغيرات.

وعادةً ما توفر المتغيرات قيمة ديناميكية يمكن تغييرها في أي وقت ومن أي مكان.

/*Declare variable in short*/
x = 7;

فوائد استخدام المتغيرات في جافا سكريبت

تعتبر منطقة من مناطق حفظ المعلومات.
تخزين أنواع متعددة من البيانات.
استخدام البيانات في المتصفح.

طرق تسمية المتغيرات

هناك طرق محددة تسمح بها جافا سكريبت في تسمية المتغيرات التي يتم المرور بها في المترجم.

في المقابل توجد بعض الطرق التي لا يمكن قبولها لهذا السبب نذكر الطرق المسموح بها.

tajer_sys_654
tajer_sys
tajer2sys
tajersys
_tajersys

أنواع المتغيّرات

الأرقام.
النصوص.
القيم المنطقية.

الأرقام في جافا سكريبت

يمكن تحديد الأرقام باستخدام Let in JavaScript على النحو التالي:

let a = 1;
let b = 20.50;
var c = 0;
var d = 20;

النصوص

في لغة جافا سكريبت ، يمكن تحديد متغير من نوع string ووضع نص أو كلمة أو حتى حرف فيه.

بحيث يصبح كما يلي:

var myJob = "Programmer";
var name = "Violet jack";
var E_W = "Hello World! , JavaScript";

قيمة منطقيّة

يكثر استخدام عوامل التشغيل المنطقية في JavaScript.

var on  = true;

if(on )
{
   on = false;
}

<body>
<script type="text/javascript">
    var is_true=true;
    var nada =null;
    var estimated =15.59;
    var John = "John said this project is amazing!";
    document.write(John);
</script>
</ body >

الدّوال البرمجية

يحتاج المطور إلى استخدام الدوال بكثرة في لغة جافا سكريبت.

يمكن الإشارة إلى أن طرق تعريف الدوال في JavaScript تتشابه إلى حد كبير مع اللغات الأخرى.

ولكن بأسلوب مبسط كما في المثال التالي:

function call ()
{
   //Your code here
}

حيث يتم ذكر اسم الدالة ، متبوعًا بالاسم المراد تعريفه بالذاكرة ومن ثم الأقواس ، مع الكود الذي نريد كتابته.

function print_func()
{
  document.write("I am a function you called!");
}

الاتصال بالدالة

نقوم بتسمية دالة ما باتباع قواعد التسمية على النحو التالي.

<html>
<body>
<script>
    function print_func()
    {
        document.write("I am a function you called!");
    }
</script>
</ body >
</html>

الآن نحقق الإتصال بهذه الدالة داخل علامات البرنامج النصي.

<html>
<body>
<script>
    function print_func()
    {
        document.write("<h2>I am a function you called!</h2>");
    }

    print_func(); // You should call function like that
</script>
</ body >
</html>

تمرير المتغيرات

يمكن تعريف متغير بين قوسين الدّالة ثم نحاول طباعة نفس الجملة السابقة ولكن بتمرير البيانات من أعلى.

تعتبر هذه الطريقة أكثر فعالية إذا ما تعلق الأمر بإنشاء دالة جافا سكريبت لـ الاستخدام المتكرر.

<html>
<body>
<script>

    let a = "<h3>I am a function you called!<h3>";
    function print_func(a)
    {
        document.write(a + "You've Done!");
    }

    print_func(a); // You should call function like that
</script>
</ body >
</html>

المعاملات في لغة جافا سكريبت

تعتمد لغات البرمجة بشكل عام على عوامل الرياضيات مثل الضرب والقسمة والجمع والطرح .

والسبب في ذلك هو تعيين قيمتين منفصلتين للمتغيرات ثم الحاجة إلى استخراج حلول للمعادلات لاحقًا.

وتساعد المعاملات في لغة جافا سكريبت في تنفيذ سلسلة من العمليات البسيطة والمعقدة.

<script>
  var x = 5;
  var y = 3;

  a = x + y;
  m = x * y;
  s = x - y;
  d = x / y; 
</script>

في المثال السابق تحديد لمتغيرات عدة تظهر بداخلها مجموعة من العمليات الحسابية.

let c = 10;
let d = 20;

if(c > d)
{
  console.write("c is bigger!");
}
else
{
  console.write("No , d is bigger!");
}


if(c == 10 || d == 15)
{
  console.write("c = 10 and d != 15");
}

if(c != d)
{
  c = d;
}

<script>

x = 10;

++x;  //prefix value

console.write("X value became: " + x);


--x;

console.write("X value became: " + x);

</script>

<script>

x = 5;
y = 13;

document.write("x Modulus y is :" + x % y);

</script>

استخدام المعاملات في النصوص

يُستخدم عامل الجمع على نطاق واسع في متغيرات السلسلة String.

مع الأخذ بعين الاعتبار إمكانية الجمع والطرح بين متغيرين السلسلة على حد سواء.

<script>
var paragraph1="It's first combination between paragraph1";
var paragraph 2="and paragraph 2"
window.alert(paragraph1+paragraph2);
<script>

الجمل الشرطيّة

غالبًا ما تُستخدم العبارات الشرطية بكثرة في لغات البرمجة.

لأن جافا سكريبت تدعم جوانب عدة من عوامل التشغيل.

بالإضافة إلى ذلك تمكّن العبارات الشرطية من إجراء العمليات المنطقية على الكود.

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

<script>

if(condition)
{
   //Do something
}
else
{
   //return -1 or do an other method
}

</script>

<script>
today = "Sunday";

_sentence1 = "I will go to work!";
_sentence2 = "Today is not sunday! keep at home :)";

if(_today == "Sunday")
{
   document.write(_sentence1 );
}
else
{
  document.write(_sentence2 );
}

</script>

<script>
boolean x = true;
var value= 16;

if(x)
{
  if( value== 16)
{
   document.write("Congratulations! ,you accessed Block Nesting!");
}
}
else{
 //return -1
}
</script>

الأحداث في لغة جافا سكريبت

عند البدء فى إنشاء صفحة HTML نجد في غالب الحال بأن العديد من تنفيذ العمليات يظهر للمستخدم فور استخدام وحدات الإدخال.

على سبيل المثال ، تغيير طفيف في حجم الخط أو لون صندوق العناوين أو حتى تحريك الكائن إلى مكان آخر على الشاشة.

يتم وضع Event Handler في مكان مخصص في الكود ويقوم بإجراء وظيفة كما هو الحال لما أراد به المطور.

في الواقع إن من أقوى مميزات جافا سكريبت هي إدارة الأحداث.

والسبب في ذلك أنها أظهرت جانباً تفاعلياً كبيرًا في صفحات الويب ما عزز من انتشار استخدامها.

وبطبيعة الحال إذا ما نظرنا لمواقع التواصل الإجتماعي وليكن فيسبوك مثلا.

سوف نجد بأن هناك الآلاف من أوامر JavaScript التي عززت من وظائف وجماليات الصفحة.

يتم تحديد معالجات الأحداث داخل علامة HTML وغالبًا ما تكون عنصرًا في المستند.

وخاصة في ظل استخدامها للعمل مع عناصر الويب التي تتكون منها الصفحة.

<body>
<form>
<input type="button" value="Click Me Now!" onclick="clickMe();" />
</form>
</ body >

<script>
function clickMe()
{
  window.alert('Welcome to your first js event handlers !!');
}
</script>

أين تستخدم Event Handler ؟

نجد العديد من مواقع القوالب الشهيرة التي تستخدم معالجات أحداث js مثل WordPress و Wix أو حتى CRM خاص.

بل أن هناك أيضاً إمكانية لاستخدام JS Events بطرق وأسماء مختلفة.

جافا سكريبت تدعم خاصية Hovering

تسمح لنا اللغة بالاتصال مع ملفات CSS إضافية وإجراء التحسينات على الألوان ونمط الخط وإضافات CSS الأخرى.

كما أن لدى JS اتصال افتراضي في نمط CSS ما يضع المطورين أمام خيارين:

استخدام التصميم في CSS.
الاعتماد على JavaScript لعمل بعض التصميمات.

تتطرق الحاجة أحيانًا إلى إضافة عناصر وعلامات لا يمكن تعديلها في CSS نظرا لعدم دعم CSS إدارة الأحداث بشكل فاعل.

لهذا السبب دعت الحاجة لإستخدام التشغيل المؤقت لـ عناصر جافا سكريبت.

والتي غالبًا ما يمكن استخدامها في إدارة الأحداث بكفاءة عالية.

طلب صفحات HTTP

تعمل جافا سكريبت على الاتصال بصفحة الخادم.
فقد وفرت مكتبة Ajax الذهاب إلى صفحات الخادم وإضافة متغيرات وأحرف ونصوص في قواعد البيانات .

تساعد هذه المرحلة في إجراء بعض التعديلات على قواعد بيانات الخادم دون الحاجة إلى تحديث صفحة الويب.

على سبيل المثال فقد حازت دالة HTTP Response على الكثير من الاهتمام كونها إحدى أدوات Realtime في الخادم.

إضافة العناصر الديناميكية في جافا سكريبت

وهي نوع من أنواع إدارة الذاكرة الديناميكية في جافا سكريبت تتيح للمستخدم إضافة عناصر مؤقتة.

أحيانًا نحتاج إلى ذلك لعدم وعي الكمبيوتر بما يخطط له المستخدم وخاصة أثناء استخدام قواعد البيانات في الجلسة.

لتبسيط المسألة قليلاً ، عند القيام بتسجيل الدخول على موقع LinkedIn ثم بدء محادثة مع شخص ما.

تظهر معلومات المحادثة لأول مرة في قواعد البيانات ولا يدرك الخادم ذلك إلا بعد البدء في نصوص المحادثة.

بالتالي فعند استقبال الحدث (المحادثات) تبدأ جافا سكريبت في إضافة صندوق خاص بين المرسل والمستقبل من كلا الجانبين.

إضافة الكائنات في لغة جافا سكريبت

الكود التالي يمثل جزء من مشروع موقع ويب و يحتوي على فكرة بسيطة تتمثل بإضافة علامة HTML بمعرف.

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

<html>

<body>

<div id = "vav_c_home" style="text-align:center; font-size:">Welcome To CSS3</div>
</ body >

<script>
// Apply color while run the HTML page
document.getElementById("vav_c_home").style.color = "#2b2d2d";

 //Apply CSS hover on area If touched by the mouse
        var css = '#vav_c_home:hover{ background-color: #517AA7; }';
        
        //Create Child element by JS then apply new color on
        var style = document.createElement('style');

        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }
        document.getElementsByTagName('head')[0].appendChild(style);
</script>

</html>

يحتوي الكود السابق على وسم بتنسيق HTML ويتضمن معرفًا إليه من جافا سكريبت بعنوان vav_c_home.

مع ذلك ولكي يتم الوصول إلى هذا الوسم لا بد من تعريف كلاس أو id لديه.

بعد ذلك قمنا بالوصول إلى معرف الــ id من خلال جافا سكريبت وأجريت بعض التغييرات عليه.

وبعد ذلك قمنا بتعيين لون آخر عندما لامست تلك المنطقة الفأرة وقام بالفعل بإجراء تغيير عبر التمرير ، الموجود بالفعل في CSS.

بالتالي ، قمنا بدمج CSS بواسطة JavaScript أثناء العمل .

الحلقات التكراريّة

يجب الإلمام بمعنى الحلقات التكرارية في لغات البرمجة أو حتى في علم الخوارزميات قبل الاستمرار في القراءة.

فقد دعت الحاجة إلى استخدام الجمل التكراريّة حينما قرّر المطورون الهروب من التعليمات البرمجية Hard Coding.

يتشابه الأمر في جافا سكريبت مع بقية اللغات الأخرى.

حيث أن الاعتماد على الحلقات التكرارية أمر هام أثناء تمرير القيم وتعديلها .

تعبر الحلقات التكرارية عن عملية روتينية يتم تنفيذها لمجموعة كبيرة من البيانات.

أهمّية الحلقات التكراريّة

تقصير مئات الأسطر من التعليمات البرمجية.
كتابة التعليمات البرمجية مرة واحدة.
كفاءة فى تشغيل البرامج.

حلقات For

بنية For هي الأقرب إلى الجمل الشرطية حيث تتضمّن كلمة For متبوعة بقوسين اثنين ().

بالإضافة إلى مؤشر يعمل على حساب مجموعة من الدورات في سطور الجملة.

وتتم العمليات داخل قوسين مجعدين {} ، بحيث يكون شكل الجملة في JavaScript كما يلي:

<script type="text/javascript">
for(var i = 0; i<=20 ; i++ )
{
  /*Your Code Here*/
}
</script>

جملة While loop

في حين أن طريقة While متشابهة إلى حد كبير مع FOR إلا أن ترتيب الجملة مختلف.

<script type="text/javascript">
var x = 0;
 while(x<=20)
{
  x++;
  document.write("<h2>Hello World</h2>");
}
</script>

جملة Do While

<script type="text/javascript">
c = 0;
do{
  document.write("<h5>Hello Javascript!</h5>");
c++;
}while(c <=5)
</script>

استخدام جافا سكريبت DOM

في طريقة Dynamic CSS JavaScript ، يمكن تبديل خصائص العنصر باستخدام Event Handler.

عادةً ما يستخدم بعض المبرمجين الطرق السريعة للوصول إلى مترجم المتصفح عن طريق الاتصال مباشرة بمعالج الأحداث.

على سبيل المثال طريقة النقر مقابل حدوث شيء ، والتي يتم تعيينها داخل العلامة.

نقوم الآن باستخدام طريقة يمكن من خلالها الوصول إلى العلامة .

و عند ملامسة سطح العلامة بالفأرة سوف يتم إجراء بعض التعديلات على حجم الخط ، مثل الكود التالي:

div_2.onmouseover = function() {
     div_2.style.backgroundColor = "#ffef72";
     div_2.style.borderWidth = "10px";
 };

لكن يبقى شيء واحد ، وهو العودة إلى الوضع السابق.

بالتالي يتعيّن عليك حفظ الإعدادات السّابقة والتمرير فيما بينها باستخدام كائنات DOM:

div_2.onmouseout = function() {
        div_2.style.backgroundColor = "#FFFFFF";
        div_2.style.borderWidth = "1px";
    };

الخلاصة

لغة جافا سكريبت مستخدمة على نطاق واسع في تقنيات الويب.
تعد اللغة أساساً لظهور تقنيات مطوّرة مثل تقنية اجاكس و Node JS.
تسيطر اللغة على صفحات الويب تماماً مثل لغات الخادم ولغات سطح المكتب.

المراجع

1.^ كتاب جافا سكريبت الإصدار الثالث.
2 ^ Take advantage of user-defined variables in JavaScript.
3 ^ What are Loops?.

تمت الكتابة بواسطة : محمد

آخر تحديث : 2023-02-04 17:10:06