بناء جافاسكريبت

Q: camelCase أم snake_case — أيهما أفضل؟

في عالم JS، camelCase ( firstName ) هو المعيار. snake_case ( first_name ) أكثر شيوعًا في Python وحقول قواعد البيانات. عندما تكون في روما، تصرف كرومان — استخدم camelCase في JS.

البناء هو قواعد اللغة — إتقان قواعد بناء JS يضمن أن المتصفح يفهم الكود الخاص بك بشكل صحيح.

الجمل والنقاط الفاصلة

يتكون كود JS من جمل، كل منها ينفذ عملية. تُشير النقطة الفاصلة ; إلى نهاية الجملة.

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

كتل الكود

جمل متعددة ملفوفة بأقواس مقوسة {} تشكل كتلة كود، تُرى عادة في أجسام الدوال، والجمل الشرطية، والحلقات:

HTML

<script>
if (score > 60) {
  result = "ناجح";
  color = "أخضر";
}
</script>

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

حساسية حالة الأحرف

JS حساسة لحالة الأحرف بشكل صارم: myVar، myvar، وMYVAR هي ثلاثة متغيرات مختلفة تمامًا. المبتدئون يتعثرون هنا غالبًا — المنطق يبدو صحيحًا، لكن تحدث أخطاء بسبب حالة أحرف خاطئة.

الكلمات المحجوزة والكلمات الممنوعة

تحجز JS كلمات معينة ككلمات مفتاحية (مثل var، let، const، function، if، else، إلخ) ولا يمكنك استخدامها كأسماء متغيرات. القائمة الكاملة للكلمات المحجوزة طويلة؛ فقط تذكر الشائعة منها — تمييز البناء في محررك سيساعد في تحديدها.

مثال: الجمل، النقاط الفاصلة، وكتل الكود

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>بناء JS - الجمل وكتل الكود</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; }
    #output { min-height: 40px; padding: 16px; background: #f5f5f5; border-radius: 8px; margin-top: 16px; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #2196F3; margin-top: 8px; }
    button:hover { background: #1976D2; }
    input { padding: 8px; font-size: 16px; border: 2px solid #ddd; border-radius: 4px; width: 100px; }
  </style>
</head>
<body>
  <h2>الجمل وكتل الكود</h2>
  <p>أدخل درجة للتحقق مما إذا كانت ناجحة:</p>
  <input type="number" id="scoreInput" placeholder="الدرجة" value="75">
  <button id="checkBtn">تحقق</button>
  <div id="output"></div>
  <script>
    document.getElementById("checkBtn").onclick = function() {
      var score = parseInt(document.getElementById("scoreInput").value);
      var result = "";
      var color = "";
      if (score >= 60) {
        result = "ناجح! الدرجة: " + score;
        color = "#4CAF50";
      } else {
        result = "راسب. الدرجة: " + score;
        color = "#f44336";
      }
      var outputEl = document.getElementById("output");
      outputEl.textContent = result;
      outputEl.style.color = color;
    };
  </script>
</body>
</html>

▶ جرّب الكود

مثال: استخدام التعليقات

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>بناء JS - التعليقات</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; }
    .code-box { background: #263238; color: #aed581; padding: 20px; border-radius: 8px; font-family: Consolas, monospace; font-size: 14px; line-height: 1.8; white-space: pre; overflow-x: auto; }
    .comment { color: #78909c; }
    button { margin-top: 16px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #4CAF50; }
    #result { margin-top: 12px; font-size: 18px; }
  </style>
</head>
<body>
  <h2>تعليقات JS</h2>
  <div class="code-box"><span class="comment">// تعليق سطر واحد: حساب مساحة الدائرة</span>
var r = 5;
var area = 3.14 * r * r;
<span class="comment">/* تعليق multi-line:
   تقريب إلى خانتين عشريتين */</span>
area = area.toFixed(2);</div>
  <button id="runBtn">تشغيل هذا الكود</button>
  <p id="result"></p>
  <script>
    document.getElementById("runBtn").onclick = function() {
      var r = 5;
      var area = 3.14 * r * r;
      area = area.toFixed(2);
      document.getElementById("result").textContent = "مساحة الدائرة بنصف قطر 5 = " + area;
      document.getElementById("result").style.color = "#4CAF50";
    };
  </script>
</body>
</html>

▶ جرّب الكود

مثال: عرض حساسية حالة الأحرف

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>بناء JS - حساسية حالة الأحرف</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; text-align: center; }
    .card { display: inline-block; padding: 20px; border: 2px solid #ddd; border-radius: 12px; margin: 8px; min-width: 120px; }
    .card h3 { margin: 0 0 8px; }
    .card p { margin: 0; font-family: Consolas, monospace; font-size: 18px; }
    #myVar { border-color: #4CAF50; }
    #myvar { border-color: #FF9800; }
    #MYVAR { border-color: #9C27B0; }
    button { margin-top: 20px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #e91e63; }
  </style>
</head>
<body>
  <h2>حساسية حالة الأحرف في JS</h2>
  <p>أسماء المتغيرات الثلاثة هذه كلها مختلفة:</p>
  <div class="card" id="myVar"><h3>myVar</h3><p>---</p></div>
  <div class="card" id="myvar"><h3>myvar</h3><p>---</p></div>
  <div class="card" id="MYVAR"><h3>MYVAR</h3><p>---</p></div>
  <br>
  <button id="showBtn">تعيين وعرض</button>
  <script>
    document.getElementById("showBtn").onclick = function() {
      var myVar = "أخضر";
      var myvar = "برتقالي";
      var MYVAR = "بنفسجي";
      document.querySelector("#myVar p").textContent = myVar;
      document.querySelector("#myvar p").textContent = myvar;
      document.querySelector("#MYVAR p").textContent = MYVAR;
    };
  </script>
</body>
</html>

▶ جرّب الكود

مثال: قواعد التسمية في الممارسة العملية

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>بناء JS - قواعد التسمية</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 550px; margin: 60px auto; }
    .rule { padding: 12px 16px; border-left: 4px solid #2196F3; background: #e3f2fd; margin: 8px 0; border-radius: 0 8px 8px 0; }
    .bad { border-left-color: #f44336; background: #ffebee; }
    .good { border-left-color: #4CAF50; background: #e8f5e9; }
    code { background: #eceff1; padding: 2px 6px; border-radius: 3px; font-size: 14px; }
  </style>
</head>
<body>
  <h2>قواعد تسمية المتغيرات</h2>
  <div class="rule">✅ مسموح: أحرف، أرقام، شرطة سفلية <code>_</code>، علامة الدولار <code>$</code></div>
  <div class="rule">✅ لا يمكن أن يبدأ برقم</div>
  <div class="rule">✅ لا يمكن استخدام كلمات مفتاحية (مثل <code>var</code> <code>let</code> <code>function</code>)</div>
  <div class="rule good">✅ موصى به: camelCase — <code>myFirstName</code> <code>totalScore</code></div>
  <div class="rule bad">❌ غير موصى به: <code>my_first_name</code> (أسلوب الشرطة السفلية غير شائع في JS)</div>
  <div class="rule bad">❌ غير صالح: <code>2ndPlace</code> (يبدأ برقم) <code>my-var</code> (يحتوي على شرطة)</div>
  <hr style="margin: 24px 0;">
  <h3>أمثلة camelCase</h3>
  <div id="demo" style="font-size: 18px; line-height: 2;"></div>
  <script>
    var firstName = "أحمد";
    var lastName = "محمد";
    var ageInYears = 25;
    var isStudent = true;
    var favoriteLanguage = "جافاسكريبت";
    var demoEl = document.getElementById("demo");
    demoEl.innerHTML = "firstName = \"" + firstName + "\"<br>" +
      "lastName = \"" + lastName + "\"<br>" +
      "ageInYears = " + ageInYears + "<br>" +
      "isStudent = " + isStudent + "<br>" +
      "favoriteLanguage = \"" + favoriteLanguage + "\"";
  </script>
</body>
</html>

▶ جرّب الكود

📖 ملخص

جمل JS تنتهي بنقاط فاصلة — أضفها دائمًا يدويًا؛ لا تعتمد على إدخال النقطة الفاصلة التلقائي
كتل الكود تستخدم {} — حتى للجمل المفردة، لا تحذف الأقواس أبدًا
تعليقات سطر واحد تستخدم //، تعليقات multi-line تستخدم /* */ — التعليقات يجب أن تشرح "لماذا"، وليست "ماذا"
JS حساسة لحالة الأحرف بشكل صارم — myVar ≠ myvar هو الخطأ الأكثر شيوعًا للمبتدئين
أسماء المتغيرات لا يمكن أن تبدأ بأرقام، ولا يمكن استخدام كلمات مفتاحية أو محجوزة
camelCase هي اتفاقية التسمية الموصى بها: firstName، totalScore

❓ أسئلة شائعة

س هل يمكن أن يسبب حذف النقاط الفاصلة أخطاء فعلًا؟

ج في معظم الأوقات لا، لكن حالات خاصة موجودة. على سبيل المثال، سطر جديد بعد return يسبب إدخال JS لنقطة فاصلة تلقائيًا، مما يُرجع undefined بدلاً من القيمة المقصودة. هذه الأخطاء شيطانية للغاية — قد تصحيح لساعات فقط لتكتشف نقطة فاصلة مفقودة. لماذا تخاطر؟

س هل يجب إضافة أقواس للجمل المفردة؟

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

س camelCase أم snake_case — أيهما أفضل؟

ج في عالم JS، camelCase (firstName) هو المعيار. snake_case (first_name) أكثر شيوعًا في Python وحقول قواعد البيانات. عندما تكون في روما، تصرف كرومان — استخدم camelCase في JS.

📝 تمارين

أساسي: اكتب كود JS يعلن متغيرين studentName وstudentAge، يعيّن قيمًا لهما، ويطبعهما بـ console.log(). تأكد أن جميع الجمل بها نقاط فاصلة وأسماء المتغيرات تستخدم camelCase.
متوسط: أنشئ صفحة بها حقل إدخال وزر. عندما يدخل المستخدم عمرًا، حدد ما إذا كان بالغًا (≥18) باستخدام كتلة كود if/else، واعرض النتيجة على الصفحة.
تحدي: أنشئ صفحة "فاحص التسمية" حيث يدخل المستخدم اسم متغير. يتحقق JS مما إذا كان صالحًا (لا يبدأ بأرقام، بدون مسافات أو شرطات، ليس كلمة مفتاحية) ويعرض "صالح" أو "غير صالح" مع السبب.

404 Not Found

بناء جافاسكريبت

الجمل والنقاط الفاصلة

كتل الكود

التعليقات

حساسية حالة الأحرف

الكلمات المحجوزة والكلمات الممنوعة

مثال: الجمل، النقاط الفاصلة، وكتل الكود

مثال: استخدام التعليقات

مثال: عرض حساسية حالة الأحرف

مثال: قواعد التسمية في الممارسة العملية

📖 ملخص

❓ أسئلة شائعة

📝 تمارين