انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 44
دورة جافا سكريبت

النطاق في لغة جافا سكريبتJavaScript Scope

ستتعلم في هذا الدرس أستخدام النطاقات JavaScript Scope مع المتغيرات ,وسوف تتعلم الفرق بين أنواع النطاقات Function Scope ,Block Scope,Global Scope عند الأعلان عن أي متغير,ايضاً سنتعلم الكُتل البرمجية block statement وعلاقتها بالمتغيرات والفرق بين المتغيرات المُعلن عنها بكلمة var,let,const keword داخل الكُتل البرمجية في لغة جافا سكريبت.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
9
الأمثلة
13
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,884
محتوى الدرس
في هذا الدرس 9تصفّح المواضيع

JavaScript Scope النطاق في لغة جافا سكريبت

في لغة جافا سكريبت يكون للمتغيرات Variables ثلاث نطاقات Scopes ، من خلال النطاقات يمكن الوصول أو قراءة المتغيرات Variables بعد عملية الإعلان عنها Variable Declaration وبناءً علي نوع النطاق نُحدد إذا كان المتغير محلي Local  أو عام Global أو يبدأ بكلمة var Keywordأو بكلمة let Keyword. 


يجب في البداية التعرف علي الثلاث نطاقات Scopes للمتغيرات Variables لكي نُحدد متي نُعلن عن المتغيرات  Variables من النوع:

  • متغيرات محلية Local Variables.
  • متغيرات عامة Global Variables.
  • المتغيرات التي تُعرف بكلمة var Keyword.
  • المتغيرات التي تُعرف بكلمة let Keyword.


أنواع النِطاقات Scopes في لغة جافا سكريبت:

  • Global Scope
  • Block Scope
  • Function Scope

JavaScript Global Scope النطاق العامة في لغة جافا سكريبت

في بيئات البرمجة النِطاق العام Global Scope هوا نَطاق مرئي لجميع النِطاقات الأخري ، في لغة جافا سكريبت النِطاق العام Global Scope هوا المتغيرات  Variables المُعلن عنها في صفحة الويب خارج الدوال وخارج الاقواس المجعدة Curly braces { }.

  • النِطاق العام Global Scope هوا تعريف المتغير Variable أعلي وخارج الدالة Function. 
  • المتغير Variable الذي يَكونُ من النوع النِطاقات العامة Global Scope نستطيع قراءته من أي مكان داخل صفحة الويب في لغة جافا سكريبت.
  • يتم الإعلان عن المتغيرات Variables في لغة جافا سكريبت بثلاث كلمات Keywords ، وهم var , let , const ، وهم متشابهين تماماً في حالة النِطاق العام Global Scope.   

Global Scope

يمكن قراءة المتغيرات من النوع Global Scope من أي مكان داخل صفحة الويب سواء كان تعريفة بكلمة var أو let أو const.

HTML 
var username= "Ahmed";
function welcome(){
  document.write("Welcome " + username);
}
if(username == "Ahmed"){
   welcome();
}
else
{
  document.write(username + "Wrong Username" );
}
جرّب بنفسك

JavaScript Function Scope المتغيرات التي تعرف بداخل الدوال في لغة جافا سكريبت

المُتغيرات Variables التي تُعرف بداخل الدوال Function Scope في بيئات البرمجة هوا نِطاق غير مرئي للنِطاقات الأخري ، في لغة جافا سكريبت المُتغيرات Variables المُعلن عنها داخل الدالة Function لن يتم قرائتها خارج هذه الدالة Function ، لأن كل دالة Function تَقوم بإنشاء نِطاق خاص بها New Scope.  

  • نِطاق داخل الدالة Function Scope هو الأعلان عن المتغير Variable بداخل أقواس الدالة Function المجعدة Curly braces { }.
  • المتغير Variable داخل الدالة Function Scope نستطيع قراءته داخل الدالة Function المُحددة فقط ولايَمكن قرائته من أي مكان داخل صفحة الويب في لغة جافا سكريبت.
  • يتم الإعلان عن المتغيرات Variables في لغة جافا سكريبت بثلاث كلمات Keywords ، وهم var , let , const ، وهم متشابهين تماماً في حالة النِطاق داخل الدالة Function Scope.   

Function Scope

لا يمكن قراءة المتغيرات من النوع Function Scope من أي مكان داخل صفحة الويب سواء كان تعريفة بكلمة var أو let أو const يقرأ بداخل الدالة التي تم العلان بداخلها عن المتغيرات فقط.

HTML 
var username= "Ahmed";
function welcome(){
  document.write("Welcome " + username);
}
if(username == "Ahmed"){
   welcome();
}
else
{
  document.write(username + "Wrong Username" );
}
جرّب بنفسك

JavaScript local Scope المتغيرات المحلية في لغة جافا سكريبت

المتغيرات المحلية Local variable هي المتغيرات التي يتم الأعلان عنها بداخل الدوال Function Scope وهي غير مرئية خارج نطاق الدالة لا يمكن استخدامها خارج حدود هذا النطاق.

  • المتغيرات المحلية Local variable هي ذات نطاق Local Scope.
  • النطاق Local Scope هو نطاق الدالة Function Scope.
  • لا يمكن استخدام المتغيرات المحلية Local variable خارج النطاق  Local Scope.

Local Scope

يمكن قراءة المتغيرات من النوع Global Scope من أي مكان داخل صفحة الويب سواء كان تعريفة بكلمة var أو let أو const.

HTML 
function welcome(){
  var username= "Ahmed";
  /* local variable can access here only */
  document.write("Welcome " + username);
}
welcome();
/* local variable can't access here */
/* can't user username here */
جرّب بنفسك

JavaScript Block scope with curly braces المتغيرات التي تعرف بداخل الاقواس المجعدة

تختلف المُتغيرات Variables التي تُعرف بداخل الكتل البرمجية Block Scope في بيئات البرمجة علي حسب الكلمة keywords تختلف var عن let عن const ، في لغة جافا سكريبت المُتغيرات Variables المُعلن عنها داخل Block Scope يتم قرائتها خارج Block Scope ولكن باختلاف بسيط.


الاختلاف بين المتغيرات المعلن عنها داخل وخارج الكتل البرمجية Block Scope؟

  • المتغيرات المعلن عنها بكلمة var keyword ليس لها كتلة برمجية block scope.

اي أن المتغيرات المعلن عنها بكلمة var keyword اعلي وخارج الكتل block scope عندما يتم اعادة الأعلان عنها أسفل وداخل block scope سوف تتبدل قيمتها بالقيمة الجديدة.

  • المتغيرات المعلن عنها بكلمات const,let keyword لها كتلة برمجية block scope.

    اي أن المتغيرات المعلن عنها بكلمات const,let keyword اعلي وخارج الكتل block scope عندما يتم اعادة الأعلان عنها أسفل وداخل block scope فأنها تعد متغير جديد مرئي فقط داخل block scope وخارجه متغير مختلف.

    var keyword

    المتغيرات المعلن عنها بكلمة var keyword هي اعادة اعلان بداخل الكتل البرمجية block scope.

    HTML 
    var x = 10;
{
  var x = 3;
}
/* x here equal 3 */
document.write(x);
    جرّب بنفسك

    let keyword

    المتغيرات المعلن عنها بكلمة let keyword هي متغير مختلف عن المعلن عنه خارج الكتل البرمجية block scope.

    HTML 
    let x = 10;
{
  let x = 3;
  /* x here equal 3 */
  document.write("inside block scope " + x + "<br>");
}
/* x here equal 10 */
document.write("outside block scope " + x );
    جرّب بنفسك

    let keyword global scope

    المتغيرات المعلن عنها بكلمة let keyword لها global scope اي أن المتغير المُعلن عنه خارج الكتل البرمجية block scope يكون له نطاق عام.

    HTML 
    let x = 10;
{
  /* x here equal 10 */
  document.write("inside block scope " + x + "<br>");
}
/* x here equal 10 */
document.write("outside block scope " + x );
    جرّب بنفسك

    const keyword

    المتغيرات المعلن عنها بكلمة const keyword هي متغير مختلف عن المعلن عنه خارج الكتل البرمجية block scope.

    HTML 
    const X = 10;
{
  const X = 3;
  /* x here equal 3 */
  document.write("inside block scope " + X + "<br>");
}
/* x here equal 10 */
document.write("outside block scope " + X );
    جرّب بنفسك

    JavaScript Automatically Global scope المتغيرات بدون كلمة var في لغة جافا سكريبت هي من النطاق العام

    المتغيرات التي أًعلن عنها بدون كلمة var أو كلمة let أو كلمة const داخل نطاق الدالة Function Scope أصبحت تلقائياً من النواع Global variables لحظة الأعلان عنها لأن المتغيرات بدون keyword هي من النوع var.

    Automatically Global scope

    المتغيرات التي أًعلن عنها بدون كلمة var أو كلمة let أو كلمة const داخل نطاق الدالة Function Scope أصبحت تلقائياً من النواع Global variables.

    HTML 
    function welcome(){
   username= "Ahmed";
  /* username now is global */
  /*Global variable can access here */
  document.write("Welcome inside " + username + "<br>");
}
welcome();
/*Global variable can access here */
/* username can access here */
document.write("Welcome outside " + username);
    جرّب بنفسك

    JavaScript Strict Mode with var in scope المتغيرات بكلمة var في لغة جافا سكريبت مع الوضع الصارم

    مع الوضع الصارم "Strict Mode" مع المتغيرات التي تُعرف بدون كلمة var keyword لن تكون من النوع Global scope في لغة جافا سكريبت.

    • لن يتم استخدام المتغيرات مع الوضع الصارم "Strict Mode" بدون تعريف decleare سواء داخل النطاق العام global scope أو النطاق المحلي local scope.

    not Automatically Global scope

    لن يتم استخدام المتغيرات مع الوضع الصارم "Strict Mode" بدون تعريف decleare سواء داخل النطاق العام global scope أو النطاق المحلي local scope.

    HTML 
    function welcome(){
   'use strict';
   username= "Ahmed";
   /* username is undeclared variable */
  /* undeclared variable can't access */
  /* username can't access here without declaration */

}
welcome();
/* username can,t access here in 'use strict' */
    جرّب بنفسك

    JavaScript window object Variables scope المتغيرات مع كائن window في لغة جافا سكريبت

    أي متغير يتم الأعلان عنه بكلمة var keyword هو تابع إلي كائن window في لغة جافا سكريبت ويمكن الوصول إليه عن طريق إسم الكائن متبوع بأسم المتغير.

    • المتغير المُعلن عنه بكلمة var keyword هو تابع إلي كائن window.
    • المتغير المُعلن عنه بكلمة let keyword لا يتبع كائن window.
    • المتغيرات العامة Global Variables هي تابعة لكائن window.

    Window Scope

    لن يتم استخدام المتغيرات مع الوضع الصارم "Strict Mode" بدون تعريف decleare سواء داخل النطاق العام global scope أو النطاق المحلي local scope.

    HTML 
    var username= "Ahmed";
document.write(window.username);
    جرّب بنفسك

    not Window Scope

    لن يتم استخدام المتغيرات مع الوضع الصارم "Strict Mode" بدون تعريف decleare سواء داخل النطاق العام global scope أو النطاق المحلي local scope.

    HTML 
    let username= "Ahmed";
document.write(window.username);
    جرّب بنفسك

    The Lifetime of JavaScript Variables حياة المتغيرات في لغة جافا سكريبت

    • حياة المتغير يبدأ عندما يتم الأعلان عنه declare مباشرة.
    • المتغيرات variables من النوع المحلي local scope أو function scope يتم حذفة بعد انتهاء تنفيذ الدالة function.
    • المتغيرات variables من النوع global scope يتم حذفها عندما يتم اغلاق صفحة الويب من المتصفح.
    • المتغيرات variables من النوع global scope يتم اعادة الأعلان عنها عندما يتم فتح صفحة الويب مرة اخري علي المتصفح.
    • المتغيرات variables من النوع global scope يتم استخدامها من داخل ملف جافا سكريبت اخر اذا تم أستدعاء الملف الذي يحمل المتغير أعلي الملف الذي يستدعي منه شاهد المثالي التالي.

    use variables in another js file

    يمكن استدعاء أي متغير من النوع النطاق العام global variable تم الأعلان عنه في ملف من أي ملف جافا سكربت اخر بشرط الاستدعاء اسفل الملف.

    HTML 
    <!DOCTYPE html>
<html>
<body>
  <h1>JavaScript Global Scope</h1>
  <script src="https://www.closetag.com/examples/global.js"></script>
  <script>
  /* 
  x is decleared in another file
  x is decleared here -> https://www.closetag.com/examples/global.js
  use x here 
  use x below file.js contain x
 */
  document.write("This variable is declared in external js file we will use it in this file : " + x);

  </script>
</body>
</html>
    جرّب بنفسك

    use variables above another js file

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

    HTML 
    <!DOCTYPE html>
<html>
<body>
  <h1>JavaScript Global Scope</h1>
  <script>
  /* x is undefind if use above js file */
  document.write("This variable is declared in external js file we will use it in this file : ");
  document.write(x);
  </script>
  <script src="https://www.closetag.com/examples/global.js"></script>
</body>
</html>
    جرّب بنفسك

    مشاركة

    هل كان هذا الدرس مفيدًا؟

    جارٍ تحميل الآراء…