عملية Javaأمثلة على البرامج النصية مع المصدر Code

ما ستبنيه في هذه Javaأمثلة على النصوص البرمجية

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

المعرفة الأساسية بـ Javaسيناريو يُفترض وجود بنية نحوية صحيحة. إذا كانت الحلقات لا تزال غير مألوفة، فاقرأ كيفية استخدام الحلقات في Javaسيناريو قبل البدء.

المثال رقم 1: Javaجدول الضرب النصي

أنشئ جدول ضرب بسيط يطلب من المستخدم عدد الصفوف والأعمدة.

حل:

<html>
<head>
  <title>Multiplication Table</title>
  <script type="text/javascript">
    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols);
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
      for(i=1;i<=rows;i++)
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>";
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }
  </script>
</head>
<body>
</body>
</html>

الناتج (3 صفوف و4 أعمدة):

1   2   3   4
2   4   6   8
3   6   9  12

Code تفسير: تقوم حلقة التكرار الخارجية بإنشاء صف واحد في الجدول لكل تكرار، بينما تقوم حلقة التكرار الداخلية بملء هذا الصف بخلية واحدة لكل عمود. العداد j تُعاد القيمة إلى 1 بعد كل صف، وهي الخطوة التي يغفل عنها معظم المبتدئين. بدون هذه الإعادة، سيحتوي الصف الأول فقط على خلايا.

مثال رقم 2: مثال على نماذج جافا سكريبت

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

الحل مع المصدر Code:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    var divs = new Array();
    divs[0] = "errFirst";
    divs[1] = "errLast";
    divs[2] = "errEmail";
    divs[3] = "errUid";
    divs[4] = "errPassword";
    divs[5] = "errConfirm";
    function validate()
	{
      var inputs = new Array();
      inputs[0] = document.getElementById('first').value;
      inputs[1] = document.getElementById('last').value;
      inputs[2] = document.getElementById('email').value;
      inputs[3] = document.getElementById('uid').value;
      inputs[4] = document.getElementById('password').value;
      inputs[5] = document.getElementById('confirm').value;
      var errors = new Array();
      errors[0] = "<span style='color:red'>Please enter your first name!</span>";
      errors[1] = "<span style='color:red'>Please enter your last name!</span>";
      errors[2] = "<span style='color:red'>Please enter your email!</span>";
      errors[3] = "<span style='color:red'>Please enter your user id!</span>";
      errors[4] = "<span style='color:red'>Please enter your password!</span>";
      errors[5] = "<span style='color:red'>Please confirm your password!</span>";
      for (i in inputs)
      {
        var errMessage = errors[i];
        var div = divs[i];
        if (inputs[i] == "")
        	document.getElementById(div).innerHTML = errMessage;
        else if (i==2)
        {
          var atpos=inputs[i].indexOf("@");
          var dotpos=inputs[i].lastIndexOf(".");
          if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
        	document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
          else
        	document.getElementById(div).innerHTML = "OK!";
        }
        else if (i==5)
        {
          var first = document.getElementById('password').value;
          var second = document.getElementById('confirm').value;
          if (second != first)
        	document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
          else
       		document.getElementById(div).innerHTML = "OK!";
        }
        else
        	document.getElementById(div).innerHTML = "OK!";
       }
     }
        function finalValidate()
        {
          var count = 0;
          for(i=0;i<6;i++)
          {
            var div = divs[i];
            if(document.getElementById(div).innerHTML == "OK!")
            count = count + 1;
          }
          if(count == 6)
          	document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
        }
   </script>
</head>
<body>
	<table id="table1">
      <tr>
        <td>First Name:</td>
        <td><input type="text" id="first" onkeyup="validate();" /></td>
        <td><div id="errFirst"></div></td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td><input type="text" id="last" onkeyup="validate();"/></td>
        <td><div id="errLast"></div></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td><input type="text" id="email" onkeyup="validate();"/></td>
        <td><div id="errEmail"></div></td>
      </tr>
      <tr>
        <td>User Id:</td>
        <td><input type="text" id="uid" onkeyup="validate();"/></td>
        <td><div id="errUid"></div></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" id="password" onkeyup="validate();"/></td>
        <td><div id="errPassword"></div></td>
      </tr>
      <tr>
        <td>Confirm Password:</td>
        <td><input type="password" id="confirm" onkeyup="validate();"/></td>
        <td><div id="errConfirm"></div></td>
      </tr>
      <tr>
        <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
        <td><div id="errFinal"></div></td>
      </tr>
	</table>
</body>
</html>

السلوك المتوقع:

Empty first name        -> Please enter your first name!
Email "ann@site"        -> Enter a valid email address!
Email "ann@site.com"    -> OK!
Passwords differ        -> Your passwords don't match!
All six fields valid    -> All the data you entered is correct!!!

Code تفسير: تعمل ثلاث مصفوفات بالتوازي. المدخلات يحتوي على القيم الحالية، أخطاء يحتوي على الرسائل المطابقة، و عناصر div يحتوي هذا المعرّف على اسم الحاوية التي تعرض كل رسالة. وبالتالي، يربط الفهرس بين الحقل ونص الخطأ الخاص به وموقع الإخراج. يقبل فرع البريد الإلكتروني عنوانًا فقط عندما لا يكون رمز @ هو الحرف الأول، وعندما يفصل حرفان على الأقل بين رمز @ والنقطة الأخيرة.

مثال رقم 3: رسالة منبثقة باستخدام حدث

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

حل:

<html>
    <head>
        <title>Event!!!</title>
        <script type="text/javascript">
            function trigger() {
                document.getElementById("hover").addEventListener("mouseover", popup);
                function popup() {
                    alert("Welcome to my WebPage!!!");
                }
            }
        </script>
        <style>
            p{
                font-size: 50px;
                position: fixed;
                left: 550px;
                top: 300px;
            }
        </style>
    </head>
    <body onload="trigger();">
        <p id="hover">Welcome!!!</p>
    </body>
</html>

السلوك المتوقع:

Page loads      -> the text "Welcome!!!" appears in large type
Mouse hovers    -> an alert box shows "Welcome to my WebPage!!!"

Code تفسير: يتم ربط المستمع داخل دالة التشغيل، التي تُنفَّذ عند حدث تحميل الصفحة. يُعد انتظار التحميل أمرًا بالغ الأهمية، لأن الفقرة التي تحمل المعرّف "hover" غير موجودة أثناء تحليل رأس الصفحة. ويمكن تحقيق النتيجة نفسها بطريقة أكثر سلاسة بوضع البرنامج النصي قبل وسم إغلاق الصفحة مباشرةً، أو بإضافة السمة defer.

مثال رقم 4: مباشر Digiساعة تال باستخدام setInterval

اعرض الوقت الحالي على الصفحة وقم بتحديثها مرة كل ثانية. يُعرّف هذا المثال بالمؤقتات ويُظهر البديل الحديث لـ document.write.

<html>
<head>
    <title>Digital Clock</title>
</head>
<body>
    <h2 id="clock">--:--:--</h2>

    <script>
        function showTime() {
            const now = new Date();
            const hh = String(now.getHours()).padStart(2, "0");
            const mm = String(now.getMinutes()).padStart(2, "0");
            const ss = String(now.getSeconds()).padStart(2, "0");

            // textContent is safer than innerHTML for plain text
            document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss;
        }

        showTime();                 // draw immediately
        setInterval(showTime, 1000); // then refresh every second
    </script>
</body>
</html>

السلوك المتوقع:

09:05:07
09:05:08
09:05:09   (the heading updates in place once per second)

يؤدي استدعاء دالة showTime مرة واحدة قبل دالة setInterval إلى تجنب تأخير مرئي لمدة ثانية واحدة عند فتح الصفحة. استخدم دالة clearInterval مع القيمة التي تُرجعها دالة setInterval عندما يحتاج المؤقت إلى التوقف.

ممارسات لكتابة هذه Javaأمثلة على النصوص البرمجية

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

1. استبدل document.write: يؤدي استدعاء هذه الوظيفة بعد تحميل الصفحة إلى مسح المستند بأكمله. بدلاً من ذلك، أنشئ عنصرًا وقم بتعيين محتوى النص أو أضف عقدة.
2. قم بتعريف كل متغير: استخدم let و const بدلاً من الاعتماد على المتغيرات العامة الضمنية مثل العداد. i في الحلقات أعلاه.
3. تفضيل محتوى النص على HTML الداخلي: يؤدي إدراج نص مقدم من المستخدم باستخدام innerHTML إلى فتح ثغرة أمنية تسمح بالبرمجة النصية عبر المواقع.
4. انقل معالجات البيانات خارج الترميز: استبدل سمات onkeyup و onclick بسمة addEventListener، مما يحافظ على فصل السلوك عن البنية.
5. تحويل مدخلات الموجه: قم بتغليف القيم في Number() قبل استخدامها في المقارنات، لأن prompt دائمًا ما يُرجع سلسلة نصية.
6. أعد التحقق من صحة البيانات على الخادم: اعتبر عمليات فحص المتصفح بمثابة طبقة مساعدة فقط.

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

الأسئلة الشائعة