تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: TP: تنسيق صفحة ويب


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

تعليمات لتنفيذ TP


بادئ ذي بدء ، سأريك كيف سيبدو العرض النهائي لهذا المختبر. لذلك ، انظر إلى الشكل التالي.
jQuery web
هذه الصفحة في انتظار كود jQuery الخاص بك
تتكون الصفحة من علامتين <div> . الأولى تحتوي على معلومات نصية وصورة. تحتوي الثانية على نموذج يتكون من عدة قوائم منسدلة ومربع نص واثنين من أزرار الأوامر. عندما يتصرف المستخدم على عناصر التحكم في النموذج ، <div> يجب تحديث محتوى العلامة الأولى وفقًا لذلك.
اطمئن ، سأهديك الكود HTML / CSS . ما أطلبه منك هنا هو إعطاء عناصر النموذج الحياة من خلال تنفيذ الإجراءات اللازمة في jQuery عندما يحدد المستخدم قيمة من قائمة منسدلة أو ينقر فوق زر. يلخص الجدول التالي وظيفة عناصر التحكم المختلفة في النموذج.
سيطرة التأثير في العلامة <div> الأولى
لون الخلفية قم بتغيير لون الخلفية باستخدام القيمة الموجودة في السمة "value" للعلامة <option> المختارة.
نص تعديل سمة كل النص.
الخط تغيير الخط من النص بأكمله.
الخط الجملة الأولى تغيير خط الجملة الأولى.
أول حرف في الجملة تعديل خصائص الحرف الأول من كل جملة.
كلمة باللون الأحمر الكتابة بأحرف حمراء من الكلمة المحددة في الفقرة الأولى. على سبيل المثال ، إذا قام المستخدم بكتابة "10" في مربع النص ، فيجب أن تظهر الكلمة العاشرة من الفقرة الأولى بأحرف حمراء.
حدود الصورة تعيين حد للصور.
إعادة تعيين إعادة تعيين النموذج وتنسيق العلامة <div> الأولى.
إليك رمز HTML / CSS الذي ستعمل عليه:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mise en forme</title>
    <style type="text/css">
      #contenu
      {
        width: 500px;
        height: 450px;
        border: 1px black solid;
        float: left;
        margin-right: 10px;
        overflow-y: auto;
      }
      #controles
      {
        width: 300px;
        height: 450px;
        border: 1px black solid;
        float: left;
      }
      #controles div{
        margin-bottom: 10px;
      padding: 5px;
      }
      label{
        float: left;
        width: 140px;
      }
      #image
      {
        width: 110px;
        height: 110px;
        margin-left: 100px;
      }
      p 
      { 
        padding-left: 5px; 
        padding-right: 5px; 
        font-family: 'Times New Roman';
      }
    </style>
  </head>
  <body>
<div id="contenu">
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
    <div id="image"><img src="img1.jpg"></div>
      <p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </p>
      <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
    </div>
    <div id="controles">
      <div>
        <label for="couleur-fond">لون الخلفية</label>
        <select id="couleur-fond">
          <option value="#FFFFFF">أبيض</option>
          <option value="#9FFEF1">أزرق</option>
          <option value="#9FFECE">أخضر</option>
          <option value="#FAFE9F">أصفر</option>
        </select>
      </div>
    
      <div>
        <label for="texte">النص</label>
          <select id="texte">
            <option value="Normal">عادي</option>
            <option value="Gras">غامق</option>
            <option value="Italique">مائل</option>
            <option value="Souligne">مسطر</option>
          </select>
      </div>
      
      <div>
        <label for="police">الخط</label>
        <select id="police">
          <option value="Times New Roman">Times New Roman</option>
          <option value="Courier New">Courier New</option>
          <option value="Arial">Arial</option>
        </select>
      </div>
      
      <div>
        <label for="police-prem-phrase">خط الفقرة</label>
        <select id="police-prem-phrase">
          <option value="Times New Roman">Times New Roman</option>
          <option value="Courier New">Courier New</option>
          <option value="Arial">Arial</option>
        </select>
      </div>
      
      <div>
        <label for="prem-car-phrases">أول حرف في الجملة</label>
        <select id="prem-car-phrases">
          <option value="Normal">عادي</option>
          <option value="Gras">غامق</option>
        </select>
      </div>

      <div>
        <label for="mot">كلمة بالأحمر</label>
        <input type="text" id="mot" size="2">
        <button id="couleurMot">OK</button>
      </div>

      <div>
        <label for="bordure-images">حدود الصورة</label>
        <select id="bordure-images">
          <option value="Rien">لا شىء</option>
          <option value="Simple">عادي</option>
          <option value="Double">مزدوج</option>
        </select>
      </div>

      <div>
        <button id="raz">إعادة تعيين</button>
      </div>
    </div>

    <script src="jquery.js"></script>
    <script>
      // Entrer les instructions jQuery ici
    </script> 
  </body>
</html>
يمثل الشكل التالي الصورة التي استخدمتها ، لكن من الواضح أنه يمكنك استخدام صورة أخرى (في هذه الحالة كن حذرًا في الأبعاد).
jQuery web
سيتألف عملك من كتابة عدد قليل من (!) الأسطر jQuery في نهاية المستند. لا تتردد في إعادة قراءة أجزاء الدورة التدريبية التي ستساعدك على حل هذه المشكلة. والآن الأمر متروك لك!

الإصلاح


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

$('#couleur-fond').change(function() {
  var cf = $('#couleur-fond option:selected').val();
  $('#contenu').css('background-color', cf);
});
عندما يختار المستخدم إدخالًا من القائمة المنسدلة #couleur-fond :

$('#couleur-fond').change(function() {
... نسترجع القيمة المخزنة في سمة value التحديد:

var cf = $('#couleur-fond option:selected').val();
هذا التعليم ضروري. سيتم استخدامه خلال هذا التصحيح. محدد بشكل خاص في رأيي.
#couleur-fond option:selected يعني "عنصر المعرف #couleur-fondالذي تم تحديد علامة <option> فرعية له" . يشير هذا المحدد البسيط إلى العلامة <option> التي اختارها المستخدم في القائمة المنسدلة. لمعرفة القيمة المعينة للسمة الخاصة بها value، فقط قم بتطبيق الطريقة val() على هذا المحدد!
القيمة التي تم إرجاعها هي لون قابل للاستغلال مباشرة. لذلك فقط قم بتعيينها إلى خاصية background-color العلامة الأولى <div> لتغيير لون الخلفية:

$('#contenu').css('background-color', cf); 
قبل أن أنسى: يجب أن يبدأ رمز jQuery بالعبارة $(function() { للتأكد من توفر DOM . ولكن بالطبع ، فكرت في ذلك.
النص
تعيين سمات غامق ، مائل و مسطر إلى النص الموجود في العلامة الأولى <div> بالكاد أكثر تعقيدًا. كل ما تحتاج إلى معرفته هو خصائص CSS التي يجب استخدامها:
  • font-weight للغامق ؛
  • font-style للمائل.
  • text-decoration للتسطير.
هنا هو الكود المستخدم:

$('#texte').change(function() {
  var te = $('#texte option:selected').val();
  if (te == 'Gras') $('#contenu p').css('font-weight', 'bold');
  if (te == 'Italique') $('#contenu p').css('font-style', 'italic');
  if (te == 'Souligne') $('#contenu p').css('text-decoration', 'underline');
  if (te == 'Normal') {
    $('#contenu p').css('font-weight', 'normal');
    $('#contenu p').css('font-style', 'normal');
    $('#contenu p').css('text-decoration', 'none');
  }
});
عندما تتغير محتويات القائمة المنسدلة #texte :

$('#texte').change(function() {
... يتم تخزين سمة الإدخال valeur الذي حدده المستخدم في المتغير te :

var te = $('#texte option:selected').val();
إذا تم تحديد الإدخال "غامق" ، تتم تهيئة الخاصية font-weight إلى bold :

if (te == 'Gras') $('#contenu p').css('font-weight', 'bold'); 
إذا تم تحديد الإدخال "مائل" ، تتم تهيئة الخاصية font-style إلى italic :

if (te == 'Italique') $('#contenu p').css('font-style', 'italic'); 
إذا تم تحديد إدخال "تسطير" ، تتم تهيئة الخاصية text-decoration إلى underline :

if (te == 'Souligne') $('#contenu p').css('text-decoration', 'underline'); 
وأخيرا، إذا تم تحديد المدخلات "عادي"، يجب إعادة تعيين خصائص font-weight، font-style و text-decoration :

if (te == 'Normal') {
  $('#contenu p').css('font-weight', 'normal');
  $('#contenu p').css('font-style', 'normal');
  $('#contenu p').css('text-decoration', 'none');
}
الخط
إذا كنت قد أكملت الخطوتين السابقتين بنجاح ، فسيكون تغيير الخط المستخدم في العلامة <div> الأولى بمثابة لعب أطفال. بنظرة صغيرة على تعليمات HTML البرمجية يمكنك من ملاحظة أن السمة value لمختلف عناصر <select> تحتوي على اسم الخط المراد استخدامه:

<select id="police">
  <option value="Times New Roman">Times New Roman</option>
  <option value="Courier New">Courier New</option>
  <option value="Arial">Arial</option>
</select>
سيكون كافياً لاستعادة هذا الاسم وتعيينه إلى خاصية font-family العلامة الأولى <div> . فيما يلي الأسطر القليلة من كود jQuery المستخدمة:

$('#police').change(function() {
  var ff = '"' + $('#police option:selected').val() + '"';
  $('#contenu p').css('font-family', ff);
});
عندما يختار المستخدم قيمة من القائمة المنسدلة #police :

$('#police').change(function() {
... يتم تخزين قيمة سمة العلامة <option> المحددة في المتغير ff :

var ff = '"' + $('#police option:selected').val() + '"'; 
لتغيير الخط المستخدم في فقرات العلامة الأولى <div> ، فقط قم بتعيين هذه القيمة على خاصية CSS font- family لجميع العلامات <p> :

$('#contenu p').css('font-family', ff); 
انها أسهل بكثيرمن ذلك!
الجملة الأولى الخط
وأخيرا شيء أكثر صعوبة! على الرغم من ... هنا ، يجب تغيير خط الجملة الأولى فقط. إذا تعثرت في هذه المشكلة ، خذ الوقت الكافي للتفكير فيما يميزها عن المشكلة السابقة ...
وجدتها؟ إنه المحدد الذي سيحدث الفرق. مراقبة الفقرة الأولى. أنه يحتوي على جملة واحدة (واحد فقط). اختيار الجملة الأولى سيعود إلى اختيار الفقرة الأولى! هنا هو الكود المستخدم:

$('#police-prem-phrase').change(function() {
  var ppp = $('#police-prem-phrase option:selected').val();
  $('#contenu p:first').css('font-family', ppp);
});
عند تحديد قيمة في القائمة المنسدلة #police-prem-phrase :

$('#police-prem-phrase').change(function() {
... يتم تخزين قيمة سمة value للعلامة <option> المحددة في المتغير ppp :

var ppp = $('#police-prem-phrase option:selected').val();
يتم تعيين هذه القيمة لخاصية CSS font-familyللفقرة الأولى من العلامة الأولى #contenu :

$('#contenu p:first').css('font-family', ppp); 
الحرف الأول من الجملة
في رأيي ، هذه المشكلة قد أخذت أكثر قليلا من الوقتك. آمل أن تكونوا نجحتم في الاختبار. ما الفكرة ، وضع الحرف الأول من كل جملة بالخط العريض! إذا كنت تتذكر ما قيل حول فصل العناصر الموجودة في السلسلة ، فأنت على الطريق الصحيح. ماذا عن مشاركة محتوى الفقرات على الحروف "." أو بعبارة أخرى ، في نهاية كل جملة؟ أنت تحتاج فقط إلى تطبيق معاملة خاصة على الحرف الأول من القيم المختلفة وبالتالي المعزولة و ... سيكون كل شيء على ما يرام. هنا هو الكود الذي استخدمته:

$('#prem-car-phrases').change(function() {
  var pcp = $('#prem-car-phrases option:selected').val();
  if (pcp == 'Gras') {
    $('p').each(function() {
      var tableau = $(this).text().split('. ');
      if (tableau.length == 0) {}
      else {
        var tableau2 = $.map(tableau, function(el, ind) {
          if (el[0] != null) return '<b>' + (el[0]) + '</b>' + el.substring(1) + '. ';
        });  
        $(this).html(tableau2.join(''));
      }  
    });
  }

  if (pcp == 'Normal') {
    $('p').each(function() {
      var unPar = $(this).html();
      if (unPar.indexOf('<img') == -1)
        $(this).text($(this).text());
    });
  }

});
لا تحكم على عدد التعليمات: سأشرح لك كل شيء!
عندما يختار المستخدم قيمة من القائمة المنسدلة #prem-car-phrases :

$('#prem-car-phrases').change(function() {
... يتم تخزين هذه القيمة في المتغير pcp :

var pcp = $('#prem-car-phrases option:selected').val();
إذا اختار المستخدم القيمة "غامق":

if (pcp == 'Gras') {
... نطبق معاملة على كل فقرة في المستند:

$('p').each(function() {
ستكون الخطوة الأولى من العملية هي تقسيم الجمل في جدول باستخدام الوظيفة split() :

var tableau = $(this).text().split('. '); 
إذا لم تكن هناك جمل في الفقرة ، فلا يوجد شيء في الجدول. طوله لذلك هو 0. في هذه الحالة ، لا ينبغي إجراء أي علاج لأن الفقرة لا تحتوي على جملة:

if (tableau.length == 0) {}
إذا لم يكن الأمر كذلك ، يتم تطبيق الوظيفة map() على الجدول لتمييز الأحرف الأولى بكل جملة بخط عريض. يتم تخزين نتيجة الوظيفة map() في المتغير tableau2 :

else {
  var tableau2 = $.map(tableau, function(el, ind) {
إذا كانت القيمة التي يتم فحصها ليست صفر ، فهي جملة يجب معالجتها. في هذه الحالة، وتحيط الحرف الأول بالسمات <b> و </b> وبقية الجملة ناقص الحرف الأول . أخيرًا ، تتم إضافة نقطة ومسافة في نهاية الجملة ، حيث تمت إزالتها بالطريقة split() في الخطوة السابقة:

if (el[0] != null) return '' + (el[0]) + '' + el.substring(1) + '. '; 
2 يتم بعد ذلك تجميع العناصر الموجودة في المجموعة tableau وتحل سلسلة HTML الناتجة محل الفقرة التي تم تحديدها:

$(this).html(tableau2.join('')); 
هل ما زلت هنا؟ آمل ذلك لأن نصف العلاج فقط قد تم. لا يزال يتعين عليك كتابة بضعة سطور من التعليمات البرمجية للرد على اختيار القيمة "Normal" في القائمة المنسدلة #prem-car-phrases . أطمئنكم على الفور: كود الذي سنكتبه أسهل بكثير من الفهم أسهل بكثيرمن المكتوب للتو.
عند اختيار "عادي" من القائمة المنسدلة:

if (pcp == 'Normal') {
... يتم تطبيق العلاج على جميع فقرات الوثيقة:

$('p').each(function() {
في البداية ، يتم تخزين كود HTML للفقرة في المتغير unPar :

var unPar = $(this).html();
إذا كان هذا الرمز لا يحتوي على علامة <img> :

if (unPar.indexOf('<img') == -1) 
... هذا يعني أنه يحتوي على نص يمكن للمستخدم أن يستخدمه في كتابة الحرف الأول من كل جملة. لذلك يجب تطبيق علاج خاص عليه. سنستخدم خدعة برمجية: عن طريق تعيين الفقرة على نصها (وليس HTML) ، تتم إزالة أي علامات HTML قد تحتوي عليها:

$(this).text($(this).text());
كلمة باللون الأحمر
قد يكون سبب هذا التنسيق أيضًا بعض المشكلات. ومع ذلك ، إذا اتبعت ما قلته للتو ، فسيبدو كل شيء أكثر بساطة. أضعك في الطريق: لفصل كلمات الفقرة الأولى ، split() تبدو الوظيفة مناسبة ...
هنا هو الكود الذي استخدمته:

$('#couleurMot').click(function() {
  var mot = $('#mot').val();
  var tableau = $('p:first').text().split(' ');
  var tableau2 = $.map(tableau, function(el, ind) {
    if (ind+1 == mot) return ('<font color="red">' + el + '</font>')
    else return(el);
    });  
    $('p:first').html(tableau2.join(' '));
});
عند النقر فوق الزر#couleurMot :

$('#couleurMot').click(function() {
... يتم تخزين الرقم المكتوب في مربع النص#mot في المتغير mot :

var mot = $('#mot').val();
يتم فصل الكلمات عن بعضها البعض بمسافات. لذلك فهي مساحة سوف نستخدمها كفاصل في الوظيفة split() . يتم تخزين نتيجة الفصل في المتغير tableau :

var tableau = $('p:first').text().split(' '); 
كل ما تبقى هو تطبيق معاملة خاصة على الكلمة المعينة من قبل المستخدم باستخدام الطريقة map() . يتم تخزين النتيجة في المتغير tableau2 :

var tableau2 = $.map(tableau, function(el, ind) {
عندما يكون فهرس العنصر مساوياً للقيمة التي تم إدخالها في مربع النص #mot (العد من 0) ، تكون الكلمة محاطة بعلامة <font> يتم فيها تهيئة السمة color على " أحمر ":

if (ind+1 == mot) return ('<font color="red">' + el + '</font>') 
إذا كانت كلمة أخرى ، فلن يتم تطبيق أي علاج عليها:

else return(el); 
أخيرًا ، يتم استبدال الفقرة الأولى بمحتويات المتغير tableau2، بعد تجميع عناصره عبر الوظيفة join() :

$('p:first').html(tableau2.join(' ')); 
ترى أنه لا يوجد شيء معقد في هذا العلاج.
حدود الصور
يتم تعريف الحدود من الصور مع خاصية CSS border . اعتمادًا على القيمة المحددة في القائمة المنسدلة #bordure-images، يتم تطبيق حد مفرد أو مزدوج أو لا حدود على الصورة الموجودة في العلامة الأولى <div> . هنا هو الكود المستخدم:

$('#bordure-images').change(function() {
  var bi = $('#bordure-images option:selected').val();
  if (bi == 'Rien') $('img').css('border', '2px solid white');
  if (bi == 'Simple') $('img').css('border', '2px solid red');
  if (bi == 'Double') $('img').css('border', '5px double red');
});
عندما يختار المستخدم قيمة من القائمة المنسدلة #bordure-images :

$('#bordure-images').change(function() {
... يتم تخزين هذه القيمة في المتغير bi :

var bi = $('#bordure-images option:selected').val();
إذا تم تحديد "لا شيء" ، فسيتم عرض حد أبيض بسمك 2 بكسل حول الصورة. إذا كانت موجودة ، يتم مسح الحد السابق لأن الحد الأبيض يظهر على خلفية بيضاء:

if (bi == 'Rien') $('img').css('border', '2px solid white');
المبدأ هو نفسه بالنسبة للقيمتين الأخريين:

if (bi == 'Simple') $('img').css('border', '2px solid red');
if (bi == 'Double') $('img').css('border', '5px double red'); 
إعادة تعيين النموذج
لإعادة ضبط النموذج ، ربما تكون قد كتبت أسطرًا كثيرة من كود jQuery لتحقيق النتيجة الصحيحة ، لكن يمكن كتابة ذلك في سطر واحد! إذا كنت تتساءل عن التعليمات التي يمكنني استخدامها ، يجب أن أعترف أنني استخدمت خدعة: تتم إعادة تعيين كل محتوى المستند إلى صفر إذا قمنا بتحديث الصفحة. لذا ، استخدم مجرد إرشادات تؤدي إلى تحديث الصفحة عند النقر فوق الزر#raz :

$('#raz').click(function() {
  location.reload();
});
كود JQUERY كامل
إليك رمز jQuery بالكامل ، لذا لديك نظرة عامة:

$(function() {
  // Couleur de fond
  $('#couleur-fond').change(function() {
    var cf = $('#couleur-fond option:selected').val();
    $('#contenu').css('background-color', cf);
  }); 

  // Texte
  $('#texte').change(function() {
    var te = $('#texte option:selected').val();
    if (te == 'Normal') {
      $('#contenu p').css('font-weight', 'normal');
      $('#contenu p').css('font-style', 'normal');
      $('#contenu p').css('text-decoration', 'none');
    }    
    if (te == 'Gras') $('#contenu p').css('font-weight', 'bold');
    if (te == 'Italique') $('#contenu p').css('font-style', 'italic');
    if (te == 'Souligne') $('#contenu p').css('text-decoration', 'underline');
  });         
  
  // Police
  $('#police').change(function() {
    var ff = '"' + $('#police option:selected').val() + '"';
    $('#contenu p').css('font-family', ff);
  });         

  // Police 1e phrase
  $('#police-prem-phrase').change(function() {
    var ppp = $('#police-prem-phrase option:selected').val();
    $('#contenu p:first').css('font-family', ppp);
  });         

  // Premier caractère des phrases
  $('#prem-car-phrases').change(function() {
    var pcp = $('#prem-car-phrases option:selected').val();
    
    if (pcp == 'Normal') {
      $('p').each(function() {
        var unPar = $(this).html();
        if (unPar.indexOf('<img') == -1)
          $(this).text($(this).text());
      });
    }
    
    if (pcp == 'Gras') {
      $('p').each(function() {
        var tableau = $(this).text().split('. ');
        if (tableau.length == 1) {}
        else {
          var tableau2 = $.map(tableau, function(el, ind) {
            if (el[0] != null) return '' + (el[0]) + '' + el.substring(1) + '. ';
          });  
        $(this).html(tableau2.join(''));
        }  
      });
    }    
  });         

  // Mot en rouge
  $('#couleurMot').click(function() {
    var mot = $('#mot').val();
    var tableau = $('p:first').text().split(' ');
    var tableau2 = $.map(tableau, function(el, ind) {
      if (el == mot) return ('<font color="red">' + el + '</font>')
      else return(el);
    });  
    $('p:first').html(tableau2.join(' '));
  });         

  // Bordure des images
  $('#bordure-images').change(function() {
    var bi = $('#bordure-images option:selected').val();
    if (bi == 'Rien') $('img').css('border', '2px solid white');
    if (bi == 'Simple') $('img').css('border', '2px solid red');
    if (bi == 'Double') $('img').css('border', '5px double red');
  });         

  // RAZ du formulaire
  $('#raz').click(function() {
     location.reload();
  });
});
جرب الكود