تعلم ASP.NET MVC


الدرس: مقدمة في HTML


الصفحة السابقة
كما يوحي اسمها ، HTML ، أو " HyperText Markup Language " ، هي لغة لكتابة النص التشعبي لعرض صفحات الويب. أي موقع يحتاج HTML لعرضه. عند إنشاء موقع ويب باستخدام ASP.NET MVC ، سنحتاج إلى استخدام HTML . لذلك من الضروري فهم أساسيات هذه اللغة ، وهذا ما سنراه بسرعة في هذا الفصل. إذا كنت ترغب في تعميق هذا الموضوع قليلاً ، فلا تتردد في الانغماس في هذه الدورة التدريبية  http://arabclassroom.com/modules/1   على موقع ArabClassroom .

العلامات


HTML هي لغة منظمة تصف وثيقة تستخدم العلامات ، مثل XML . العلامات هي قيم محاطة بحرفين ، <و> ، والتي تصف المحتوى الدلالي للبيانات. مثلا :

<nom>Nicolas</nom>
العلامة   <nom>هي ما يسمى علامة الافتتاح ، وهذا يعني أن ما بعد (في هذه الحالة سلسلة الأحرف "Nicolas") جزء من هذه العلامة حتى نلتقي مع علامة الإغلاق </nom> الذي تشبه علامة الفتح باستثناء / الذي يسبق اسم العلامة.
HTML هو ملف سهل بالنسبة لنا البشر لقراءته.من السهل إلى حد ما استنتاج أن الملف يحتوي على السلسلة "Nicolas" وأنه يحتوي على اسم (محتوى دلالي).
يمكن أن تحتوي العلامة على سمات تسمح بتقديم معلومات عن البيانات. السمات محاطة بعلامات اقتباس "و" وهي جزء من العلامة. مثلا :

<client nom="Nicolas" age="30"></client>
هنا ، تحتوي علامة العميل على سمة "name" لها القيمة "Nicolas" وسمة "age" لها القيمة "30". مرة أخرى ، من السهل جدًا على الإنسان قراءته.
قد لا يكون للقيمة قيمة ، كما هو الحال في المثال أعلاه. يمكننا بعد ذلك استبدال علامة الفتح وعلامة الإغلاق بهذا المعادل:

<client nom="Nicolas" age="30"/>
أخيرًا ، من المهم ملاحظة أن HTML يمكن أن تتداخل علاماتها ، مما يتيح لنا الحصول على تسلسل هرمي للبيانات. على سبيل المثال ، يمكن أن يكون لدينا:

<listesDesClient>
  <client type="Particulier">
    <nom>Nicolas</nom>
    <age>30</age>
  </client>
  <client type="Professionel">
    <nom>Jeremie</nom>
    <age>40</age>
  </client>
</listesDesClient>
يمكننا أن نرى على الفور أن الملف يصف قائمة من عميلين. لدينا شخص واحد ، يُدعى Nicolas ويبلغ من العمر 30 عامًا والآخر محترف ، يُسمى Jeremie ويبلغ من العمر 40 عامًا.
إلا أننا لا نضع أي شيء في هذه العلامات. لقد اخترعت العلامات <name> ، <client> ، <age> لمجرد جعلك تفهم مبدأ تشغيل العلامة ، ولكن في الواقع تحتوي HTML على سلسلة من العلامات المحددة مسبقًا لوصف بنية هيكل الصفحة . سيتعين علينا تعلم أسماء علامات متعددة من أجل وصف هذا الاسم كما نرغب. على سبيل المثال ، تتطابق العلامة <h1> مع عنوان المستوى 1. وهناك العديد من العلامات الأخرى التي تصف محتوى الصفحة ، مثل علامة لعرض فقرة ( <p>  ) ، فاصل أسطر ( <br/>  ) الخ
أسهل طريقة لفهم HTML هي التدرب عليها. وسوف نستخدم Visual Studio لهذا الغرض. انتقل إلى قائمة "ملف" واختر ملف جديد (أو الاختصار Ctrl+ N ) ، يمكننا إنشاء ملف HTML جديد:
c sharp .net framework
بإنشاء ملف HTML جديد
يتم إنشاء ملف يحتوي على البنية الأساسية لملف HTML :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>
يمكننا أن نرى هنا العديد من العلامات. أقوم طوعًا بتمرير السطر الأول الذي هو doctype والذي يجعل من الممكن الإشارة إلى نوع المستند ، هنا HTML . قد يكون الأمر أكثر تعقيدًا من ذلك ، لكنه هنا لا يهمنا.
لاحظ أن هناك علامة فتح <html>   وعلامة الإغلاق الخاصة بها في أسفل المستند. إنها عقدة الجذر الخاصة بالمستند. يجب أن يكون كل ما هو جزء من المستند داخل هذه العلامات. تحتوي هذه العلامة على اثنين آخرين :  <head>  و <body>  . في العلامة ، <head>   سيتعين علينا وضع كل ما يتعلق برأس الصفحة ، بما في ذلك العنوان بفضل العلامة <title>  . يمكنك على سبيل المثال وضع العنوان التالي:

<title>Ma première page</title>
ملاحظة: تقدم العلامة <meta>   معلومات على الصفحة. هنا لا يهمنا ، إذا كنت ترغب في ذلك ، يمكنك حذفه.
في العلامة ، <body>   يمكننا وضع محتوى الصفحة. لنضع على سبيل المثال عنوان المستوى 1 ، مع:

<body>
    <h1>Hello HTML</h1>
</body>
ملاحظة: هناك عدة مستويات من العناوين التي ستوفر حجمًا أكثر أو أقل أهمية للعرض ، على سبيل المثال سيتم تعريف عنوان المستوى 2 عبر العلامة <h2>  ، وعنوان المستوى 3 بالعلامة <h3> ...
احفظ الملف ( Ctrl+ S) واعطه اسما ، على سبيل المثال "hello.html" . والآن دعونا نعرض صفحة HTML الخاصة بنا في المتصفح. للقيام بذلك ، يمكنك فتح المتصفح الخاص بك والبحث عن ملف HTML المحفوظ أو النقر بزر الماوس الأيمن داخل ملف HTML والاختيار من القائمة المنسدلة: العرض في المتصفح.
نحصل على:
c sharp .net framework
أول صفحة HTML الخاصة بي
نجاح باهر صفحة HTML جميلة!
للتذكير ، من خلال عرض صفحة HTML هذه ، قدمنا ​​طلبًا للحصول على طلب عرض صفحة HTML (انظر الفصل السابق)  . يتم تفسير هذا HTML من قبل المتصفح ويمكننا أن نرى اثنين من العناوين ، ولكن يتم إرجاع HTML . للتحقق من ذلك ، انقر بزر الماوس الأيمن على صفحة HTML وعرض المصدر. ستجد HTML كما كتبناه في Visual Studio .
هناك الكثير من العلامات الأخرى وسنرى العديد من العلامات في هذا الفصل ، ولكن ليس كلها. وإلا فلن يكون الأمر ممتعًا ، لذا افتح القاموس.  نحن هنا لمعرفة ASP.NET MVC .
لكنني أعلم أنك غير صبور لاكتشاف بعض العلامات الجديدة ، لذلك دعونا نقوم بتزيين ملف HTML الخاص بنا بالعلامات التالية:

<body>
    <h1>Hello HTML</h1>
    <p>Le HTML c'est quand même vachement bien. <br /> Nous venons de découvrir les balises : 
    </p>
    <ul>
        <li><p></li>
        <li><br /></li>
        <li><ul> et <li></li>
    </ul>
</body>
هذا سيعطي:
c sharp .net framework
علامات HTML إضافية
دون الخوض في التفاصيل ، العلامة:
  •  <p>  يسمح للإشارة إلى فقرة
  • <br />   دعنا نذهب الى الخط
  • <ul>   بدء قائمة
  • <li>   يسمح لكتابة سطر
لاحظ أن HTML مكونًا من علامات ، لا يمكن ببساطة عرض <أو> ، لأنه قد يعتقد أنها علامات HTML . لعرض هذين الحرفين على الصفحة ، يجب استبدالهما بـ  & lt ; و & gt ; ؛ ويقال إن هذه الشخصيات تكون مشفرة. يجب تشفير الشخصيات الأخرى ، على سبيل المثال الرمز & الذي سيتم كتابته & ؛. 
كما رأينا سابقًا ، من الممكن تحديد السمات في العلامات. هذا يسمح على سبيل المثال لإضافة النمط. على سبيل المثال ، للحصول على عنوان المستوى 2 باللون الأحمر والمركز ، يمكننا كتابة كود HTML التالي:

<h2 style="color:red;text-align:center">Je suis tout rouge et au centre de la page</h2>
والتي سوف تعطي:
c sharp .net framework
HTML أنيق
سنعود إلى الأنماط بعد ذلك بقليل ، لكننا نعلم أيضًا أن السمات ستسمح لنا بتحديد علاماتنا بالاسم أو بمعرف. على سبيل المثال ، سيكون لهذه العلامة المعرف titre1   :

<h1 id="titre1">Hello HTML</h1>
سنرى لاحقًا ما ستفعله هذه المعرفات بالنسبة لنا. ستلاحظ أن قيم السمات محاطة بعلامات اقتباس.

الروابط بين الصفحات


إحدى نقاط القوة الكبيرة في HTML هي أنه يتيح لك التنقل بين صفحات الويب. خذ موقعًا مثل ArabClassroom على سبيل المثال. تصل إلى الصفحة الرئيسية ثم تنقر في القائمة للوصول إلى الدورات التدريبية أو المنتديات ... يمكنك التنقل في الموضوعات المختلفة أو حتى بين الصفحات المختلفة لنفس الموضوع. كل هذا ممكن بفضل علامة ، العلامة <a>  .
لفهم كيفية عمل هذه العلامة ، قم بتعديل صفحة Hello.html مثل هذا:

<body>
    <h1 id="titre1">Hello HTML</h1>
    <a href="page2.html">Aller voir la page 2</a>
</body>
ثم أنشئ صفحة جديدة ستتصل بها ، خمنتها ، page2.html والتي ستحتوي على سبيل المثال:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>Bienvenue sur la page 2...</p>
</body>
</html>
ملاحظة: احفظ الصفحة في نفس المجلد حيث قمت بحفظ hello.html .
إذا عرضت hello.html ، فستتمكن من رؤية رابط نحو الصفحة 2. بالنقر فوق هذا الرابط ، ستصل إلى هذه الصفحة الشهيرة 2:
c sharp .net framework
الروابط بين الصفحات
هذا ممكن بفضل العلامة <a>   وسماتها href   التي تسمح بالإشارة إلى الموقع (نسبيًا أو مطلقًا) لصفحة أخرى. إذا كنت قد قمت بحفظ الصفحة 2 في مجلد فرعي ( sousrepertoire )، فربما كان بإمكانك عرضها بفضل:

<a href="sousrepertoire/page2.html">Aller voir la page 2</a>
لاحظ أنه يمكنك أيضًا إنشاء روابط إلى مواقع ويب أخرى ، على سبيل المثال لإنشاء رابط إلى موقع ArabClassroom يمكنك القيام به:

<a href="https://www.arabclassroom.com/">اكتشف دروس كثيرة ...</a>
تذكر أنه يمكنك أيضًا تمرير المُدخلات إلى عنوان URL ، على سبيل المثال:

<a href="page2.html?page=hello">اذهب الى page 2</a>
هنا ، وضعت المُدخل "page" القيمة "hello" ، والتي سوف تتيح لي على سبيل المثال معرفة أن المستخدم وصل إلى الصفحة 2 من صفحة الترحيب. 
حسنًا ، في الواقع ، لا نعرف كيف نستغل هذه المعايير حتى الآن ... لكنها ستأتي. 
للتذكير ، كل الروابط بين الصفحات الموضحة في هذا الفصل هي روابط تستخدم طريقة GET .

النماذج


تحدثنا بالفعل عن انماذج أعلاه قليلا. تذكر ، نموذج التسجيل على موقع ArabClassroom :
c sharp .net framework
نموذج التسجيل
تحت هذا المصطلح نموذج نعني عدة أشياء:
  • عناصر التحكم التي تشكل جزءًا من النموذج
  • الشكل نفسه
الضوابط هي المناطق المراد شغلها. ترى العديد منهم هنا:
  • مربع نص لاسم المستخدم
  • مربع نص لعنوان البريد الإلكتروني
  • مربعات النص حيث يتم إخفاء الأحرف لكلمات المرور
  • زر للتحقق من صحة النموذج
النموذج غير مرئي ، فهو الذي يرسل المعلومات إلى موقع ArabClassroom لإنشاء حساب جديد.
لذلك ، بشكل ملموس ، النموذج عبارة عن علامة <form>   تحتوي على طريقة لإرسال المُدخلات (طريقة GET أو POST ) وعنوان الكود النصي (أو الإجراء) الذي سيتم استدعاؤه بهذه الُدخلات والذي سيتم إعادة توجيه المستخدم.
الكود النصي عبارة عن جزء من التعليمات البرمجية بلغة ما (على سبيل المثال C# لـ ASP.NET أو لما لا PHP ) يتم تنفيذه بواسطة خادم الويب ، ويقوم بالإجراءات ، ويعيد HTML لتفسيره بواسطة متصفحات الإنترنت. هذا هو أساس المواقع الديناميكية.
هنا هو الكود لإنشاء نموذج:

<form action="page2.html" method="get">
</form>
هنا في العمل ، أضع اسم الصفحة 2 التي أنشأناها أعلاه قليلاً ، ولكن بشكل عام سيكون نصًا ، باستثناء أننا لا نعرف بعد كيفية القيام بذلك.  لاحظ أنني حددت أيضًا طريقة الاستخدام: GET؛ ولكن يمكن أن تكون أيضًا طريقة POST ، مع:

<form action="page2.html" method="post">
</form>
تذكر أن طريقة GET تسمح باستشارة أحد الموارد بينما تكون طريقة POST مناسبة لتعديل أو إرسال المعلومات. بالنسبة للنموذج ، سنستخدم طريقة POST غالبًا لأن الغرض من النموذج هو عمومًا تعديل (أو حتى إنشاء) مورد. ومع ذلك ، يمكن أيضًا استخدام طريقة GET في شكل مناسب تمامًا لمواقف معينة ، مثل البحث على سبيل المثال ، والذي يمكن تكراره إلى ما لا نهاية.
يجب تقديم نموذج ، وإلا فإنه غير مجدي. للقيام بذلك ، سنضيف زرًا يتمثل دوره في رعاية إرسال النموذج إلى الإجراء المشار إليه باستخدام الطريقة المتوفرة. لإنشاء مثل هذا الزر ، نستخدم العلامة <input>   التي سيكون نوعها submit   :

<form action="page2.html" method="get">
    <input type="submit" value="Envoyer le formulaire" />
</form>
يمكنك رؤية زر الإرسال الشهير:
c sharp .net framework
زر تقديم النموذج
لاحظ أنه إذا قمت بالنقر فوقه ، فسيتم إرسالك إلى الصفحة 2 مع قيم النموذج. إلا أنه لا توجد قيمة هنا ، من الطبيعي أننا لم نضع الحقول لملئها. 
لدينا تحت تصرفنا سلسلة كاملة من عناصر تحكم HTML والتي تتيح لنا أن نطلب من المستخدم إنشاء إدخالات. هنا على سبيل المثال HTML للنموذج الكلاسيكي:

<form action="page2.html" method="get">
    <fieldset>
        <legend>Informations</legend>
        <label>Prénom :</label>
        <input id="prenom" type="text" />
            
        <br />
        <label>Sexe :</label>
        <select id="sexe">
            <option value="H">Homme</option>
            <option value="F">Femme</option>
        </select>

        <br />
        <label>Mot de passe :</label>
        <input id="mdp" type="password" />

            <br />
        <label>Avez-vous des enfants :</label>
        <input id="enfants" type="checkbox" />

            <br />
        <label>Dites quelque chose sur vous</label>
        <textarea id="apropos" style="height:50px"></textarea>
    </fieldset>
    <input type="submit" value="Envoyer le formulaire" />
</form>
إذا عرضناه (عن طريق فتح صفحة html المقابلة في متصفح)، فسنحصل على:
c sharp .net framework
نموذج HTML
يمكننا إدخال القيم هناك كما فعلت. لذلك ، لم أوضح جميع عناصر التحكم بحيث لا تكون طويلة جدًا ، ولكن من الأعلى إلى الأسفل لدينا:
  • مربع النص مع العلامة <input>   نوع " text "
  • قائمة منسدلة مع العلامة وعلاماتها <select>  الفرعية <option> 
  • مربع نص به أحرف مخفية ، مع علامة <input>   كتابة " password "
  • مربع الاختيار مع علامة <input>   نوع " checkbox "
  • مربع نص طويل مع علامة <textarea>
  • نجد أيضا تقديم زر مع علامة <input>   نوع " submit "
لاحظ أنه في كل مرة أعطيت معرفًا للعلامات. هذا ضروري حتى يتمكن البرنامج النصي المحتمل من استغلال البيانات المرسلة. فيما عدا ذلك ، هناك صفحة HTML غير قادرة على استغلال هذه المعلومات. نحتاج إلى برنامج نصي يمكنه التدخل من جانب الخادم. سوف نرى كيفية استرداد هذه البيانات باستخدام ASP.NET MVC في وقت لاحق.
بالمناسبة ، يمكنك رؤية بعض العلامات الكلاسيكية الأخرى ، مثل العلامة <legend>   أو العلامة <label>   أو حتى العلامة <fieldset>   المناسبة بشكل خاص لتخطيط النماذج.

قليل من التنسيق مع CSS


النمط هو ما يسمح لنا بتنسيق HTML الخاص بنا. لقد رأينا بعض الشيء أعلاه عندما رسمنا عنوانًا باللون الأحمر:

<h2 style="color:red;text-align:center">Je suis tout rouge et au centre de la page</h2>
نستخدم خاصية النمط للإشارة إلى عناصر نمط العلامة. هناك العديد من عناصر النمط الممكنة. هنا ، أعطي العنوان اللون باللون الأحمر من خلال تعيين " color  " القيمة " red  " . وبالمثل ، لتوسيط النص ، قم ببساطة بتعيين القيمة " center  " لعنصر النمط " text-align  " .
لن أسرد عليك جميع الأنماط الممكنة والتي يمكن تخيلها لأنها ستكون متعبة حقًا وليست مثيرة للاهتمام بالنسبة لنا الذين يريدون تعلم ASP.NET ... ولكن إذا كان الموضوع يهمك ، فلا تتردد في مواصلة قراءاتك.
تكون أنماط الموضع بهذه الطريقة مقيدة بعض الشيء ، خاصةً إذا كنت ترغب في تغيير نمط العديد من عناصر النموذج في نفس الوقت ، مثل الخط النصي. هل ترى نفسك تكتب كل هذا في شكلنا السابق؟

  […]
  <label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Prénom :</label>
  […]
  <label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Sexe :</label>
  […]
  <label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Mot de passe :</label>
  […]
  <label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Avez-vous des enfants :</label>
  […]
  <label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Avez-vous des enfants :</label>
  […]
  
ملاحظة: هنا font-family   يسمح لي بتغيير الخط و font-style   هنا يسمح بالكتابة بالخط المائل.
حتى لو كنت متأكدًا من أنك لست خائفًا من النسخ واللصق ، فإن الأمر سيصبح قليلاً من الألم إذا لم يعد اللون يرضيك في النهاية ، وتريد تغييره مرة أخرى ... بالإضافة إلى ذلك ، يزيد هذا الرمز بشكل كبير HTML ويزيد حجم الصفحة النهائي.
الحل: CSS .
يرمز CSS إلى ورقة الأنماط المتتالية وهي لغة لوصف نمط صفحة HTML . يتم ترجمته إلى العربية باسم "أوراق الأنماط المتتالية".
ماذا لو قلت لك أنه يمكننا استبدال كل ما كتبناه أعلاه بـ:

[…]
<label class="styleformulaire">Prénom :</label>
[…]
<label class="styleformulaire">Sexe :</label>
[…]
<label class="styleformulaire">Mot de passe :</label>
[…]
<label class="styleformulaire">Avez-vous des enfants :</label>
[…]
<label class="styleformulaire">Avez-vous des enfants :</label>
[…]
هو أقل مطول بكثير!
لهذا ، نستخدم لذلك سمة الفصل التي نربطها بأسلوب ما أسميه styleformulaire  . يتم تعريف هذا النمط في علامة <head>   صفحتنا:

<head>
    <title>Ma première page HTML</title>
    <style type="text/css">
        .styleformulaire {
            font-family:'Comic Sans MS';
            font-style:italic;
            color:darkblue;
        }
    </style>
</head>
إنها علامة <style>   الكتابة "text/css"   التي ستتيح لنا إعلان فئة نمط. لذلك سيتم وصف نمط نمط النموذج في مكان واحد ، بخطه الخاص ، مكتوبًا بخط مائل ولون darkblue... وإذا كان يتعين علينا تغيير اللون ، فسيتم القيام به مرة واحدة ، من خلال تغيير البيانات في هذا المكان . الممارسة. 
لاحظ النقطة (.) التي تسبق اسم النمط ، وهذا يسمح بالقول إنه أسلوب قابل للاستخدام في سمة فئة. 
ماذا؟ هل يمكننا أن نجعلها أقصر؟ 
في حالتنا ، نعم! في الواقع ، لقد طبقنا هذا النمط على جميع العلامات <label>  . نظرًا لعدم وجود آخرين ، ما عليك سوى قول صفحة HTML : "قم بتطبيق هذا النمط على جميع
العلامات <label>   " . ويتم ذلك مثل هذا في CSS :

<style type="text/css">
    label {
        font-family:'Comic Sans MS';
        font-style:italic;
        color:darkblue;
    }
</style>
نستخدم اسم العلامة متبوعًا بالأنماط للتطبيق.
وبالتالي ، تصبح تسمياتنا بسيطة جدًا في صفحة HTML :

[…]
<label>Prénom :</label>
[…]
<label>Sexe :</label>
[…]
<label>Mot de passe :</label>
[…]
<label>Avez-vous des enfants :</label>
[…]
<label>Avez-vous des enfants :</label>
[…]
لاحظ أنه يمكنك أيضًا تطبيق نمط على علامة ما بفضل معرفها. تذكر علامة لدينا <textarea> :

<textarea id="apropos" style="height:50px"></textarea>
هنا ، أنا ثابت ارتفاعها مباشرة في السمة style  . لكن كان بإمكاني تحديد هذا الارتفاع في البداية في علامة <style>   النوع text/css   :

<style type="text/css">
    label {
        font-family:'Comic Sans MS';
        font-style:italic;
        color:darkblue;
    }
    #apropos {
        height:50px;
    }
</style>
إنه # الذي يسمح لنا بالإشارة إلى معرف العلامة ووضع نمطها. العلامة <textarea>   تصبح ببساطة:

<textarea id="apropos"></textarea>
ملاحظة: لا يمكن كتابة علامة <textarea> الفارغة كعلامة <textarea id = "apropos" /> واحدة ، ولكن مع علامة فتح وعلامة إغلاق.
وهذا كل شيء لهذه الجولة بسرعة الأنماط. كن على علم بأنه يمكن وضع الأنماط في ملف منفصل أيضًا حتى يمكن إعادة استخدامها بين عدة صفحات. 

جافا سكريبت Javascript


يمكننا أن نقوم بدورة كاملة على جافا سكريبت. لقد تحدثت عن هذا الأمر بسرعة شديدة وعدت بها ، فقط لأخبرك أنها لغة برمجة يتم استخدامها في صفحة HTML ويتم تنفيذها بواسطة المتصفح.
يمكن استخدامها لإضافة التفاعل إلى صفحاتنا. أحد الأمثلة الكلاسيكية هو التحقق من صحة بيانات النموذج قبل إرسالها.
في نموذج التسجيل الخاص بنا ، لا فائدة من إرسال النموذج إلى الخادم إذا كان أحد الحقول الإلزامية مفقودًا. أو تخيل أن هناك حاجة لإدخال بريد إلكتروني ، يمكن استخدام JavaScript للتحقق من أن هذا البريد الإلكتروني له التنسيق الصحيح قبل إرسال النموذج.
لإعلان JavaScript ، نستخدم علامة <script>   و كتابة text/javascript  . يتم تعريف هذا في العلامة <head>  ، كما هو الحال مع أوراق الأنماط. يمكننا إنشاء طرق هناك ( قل " function  " ) ، على سبيل المثال ، سأقوم بإنشاء طريقة بسيطة تسمح لي بالتحقق من إدخال الاسم الأول:

<head>
    <title>Ma première page HTML</title>
    <script type="text/javascript">
        function VerifierFormulaire() {
            if (document.getElementById("prenom").value == "") {
                alert("Veuillez saisir un prénom !");
                return false;
            }
            return true;
        }
    </script>
    …
</head>
يمكنني هنا الوصول إلى قيمة الاسم الأول بفضل الطريقة getElementById   وبفضل خاصية القيمة. إذا كانت القيمة فارغة ، فعندئذ أعرض رسالة صغيرة وأقول أنها غير صالحة.
يمكن استدعاء طريقة جافا سكريبت هذه عندما ينقر الزائر على زر الإرسال:

<input type="submit" value="Envoyer le formulaire" onclick="return VerifierFormulaire()" />
وبالتالي ، إذا لم يحدد اسمه الأول ، فسيتم عرض رسالة ولن يتم إرسال النموذج:
c sharp .net framework
رسالة تنبيه JavaScript
هيا ، أتوقف هناك لجافا سكريبت. يمكننا القيام بالكثير من الأشياء ، لا سيما مع مكتبات الجهات الخارجية مثل jQuery ، لكن الهدف هنا كان ببساطة تقديمه حتى يعرف الجميع ما نتحدث عنه.
في هذه الدورة التدريبية ، سيتيح لنا جافا سكريبت JavaScript التحقق من صحة بيانات النموذج التي يرسلها الزوار (جانب العميل) ، ولكنها ستسمح لنا أيضًا بإجراء AJAX . أجاكس هو كل ما يسمح لك بإعادة تحميل أجزاء من الصفحات دون الحاجة إلى إعادة تحميل الصفحة بأكملها. سوف نرى في نهاية هذه الدورة ما هو عليه. 
تحذير: من الممكن للمستخدم إلغاء تنشيط JavaScript في متصفحه. لذلك في مثالنا السابق ، قد يكون قادرًا على تقديم النموذج ، حتى لو لم يقم بإدخال الاسم الأول. هذا يعني دائمًا التحقق من جانب الخادم من صحة المعلومات المقدمة. سوف نعود إليها.

في الخلاصة


  • HTML هي لغة تستخدم العلامات لوصف بنية صفحة الويب وعرضها.
  • يشتمل HTML على العديد من عناصر التحكم التي يتم استخدامها بشكل خاص لإدخال البيانات في النماذج.
  • بالإضافة إلى HTML ، ستحتوي صفحات الويب التي سننشئها في هذه الدورة على CSS ، وهي لغة تستخدم لتعديل نمط الصفحات ، وجافا سكريبت ، وهي لغة تستخدم لإضافة التفاعل إلى هذه الصفحات.

الاستنتاج العام للجزء


في الجزء الأول من المقدمة. لقد قمنا بمراجعة كيفية عمل مواقع الويب ، وخاصة عن طريق التذكير بمضمون خادم الويب ، وأنماط الطلبات التي يمكن تقديمها بواسطة المتصفح لعرض صفحات HTML ... لقد رأينا أيضًا المنطق والأدوات التي توفر إطار عمل MVC ASP.NET لإنشاء موقع ويب. أخيرًا ، رأينا أساسيات HTML و CSS و JavaScript ، وهي لغات الويب التي ستكون ضرورية بالنسبة لنا خلال هذه الدورة التدريبية على ASP.NET MVC . يتم التعامل مع هذه العناصر بسرعة ، لذلك إذا كنت بحاجة إلى تعميق كل هذا ، فلا تتردد في استشارة دورات أخرى أكثر تقدمًا في هذا الموضوع ، مثل هذه الدورة التدريبية على موقع ArabClassroom  http://arabclassroom.com/modules/1.
الآن وبعد أن قمنا بمراجعة قواعد بيانات الويب الخاصة بنا وتثبيت أدوات التطوير الخاصة بنا ، فقد حان الوقت لتعلم ASP.NET MVC لتصبح خبيرًا في إنشاء المواقع.