كيفية إنشاء مولد اقتباس عشوائي باستخدام JavaScript و HTML للمبتدئين تمامًا

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

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

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

  • متصفح الويب
  • محرر نصوص
  • الرغبة في بناء الأشياء

في هذا البرنامج التعليمي ، سأستخدم متصفح الويب Google Chrome ، ومحرر Sublime Text 3 ، وبالطبع ، رغبتي في البناء والتعليم. يمكنك استخدام أي أدوات تشعر بالراحة معها.

هيا بنا نبدأ!

أول شيء سنفعله هو إنشاء المجلد الذي سيحتوي على جميع الملفات التي يتكون منها المشروع. قم بإنشاء مجلد فارغ على سطح المكتب الخاص بك وقم بتسميته "مولد الاقتباس". فتح سبحانه النص و اسحب الملف إلى سامية . الآن يجب أن يكون لدينا المجلد يمكن الوصول إليه من خلال الشريط الجانبي.

تتكون معظم مشاريع الويب من ملف HTML وجافا سكريبت و CSS واحد على الأقل. لنقم بإنشاء هذه الملفات داخل مجلد "منشئ الاقتباس".

في نص سامي ،انقر بزر الماوس الأيمن على مجلد "مولد الاقتباس" على الشريط الجانبي وانقر على إنشاء ملف جديد . سيظهر شريط الإدخال في الجزء السفلي لتسمية الملف. اكتب "index.html" واضغط على Enter. الآن قمت بإنشاء ملف index.html. كرر هذه الخطوة مرتين أخريين ، ولكن أنشئ ملفًا باسم "javascript.js" و "style.css" (بدون علامتي الاقتباس) . من المهم التأكد من أنه عند تسمية ملف ، تكون الأحرف دائمًا صغيرة لمنع حدوث أي تعقيدات.

الآن بعد أن أصبح لدينا جميع إعدادات ملفاتنا ، فلنقم بإنشاء ملف HTML الذي سيعمل كأساس لمشروع الويب الخاص بنا. سنبدأ برمز HTML بسيط داخل ملف index.html قبل أن نتمكن من إضافة أي شيء.

يوجد أدناه ملف HTML الخاص بنا الذي لا يحتوي على أي شيء. يمكنك التفكير في هذا على أنه هيكل HTML الخاص بنا الذي سيحتوي على كل اللحوم (المحتوى) ، والتي سنضيفها لاحقًا.

الآن ، سيتعين علينا ربط ملف JavaScript الخاص بنا بمستند HTML الخاص بنا حتى يتمكن كود JavaScript الخاص بنا من التفاعل مع مستند HTML. سنضيف أيضًا نصًا داخل ملف العلامات ، أضف ملف

عنصر ، قم بإنشاء ملف عنصر باسم معرف "quoteDisplay" ، وأيضًا ملفعنصر بسمة onclick مع تمرير "newQuote ()" إليه.

تقسمها

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

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

أثناء الخطوة الأولى ، نحتاج أيضًا إلى التأكد من ربط ملف javascript.js في أسفل مستند HTML قبل الإغلاق مباشرةً بطاقة شعار.

ثانيًا ، أنشأنا ملف

عنصر مع "مولد اقتباس بسيط" بداخله. سيعمل هذا على عرض عنوان داخل صفحة الويب الخاصة بنا.

ثم أنشأنا ملف عنصر بسمة معرف مضبوطة على "quoteDisplay". أ يعمل العنصر كمقسم لمستندات HTML. تساعد العناصر في تنظيم المحتوى داخل صفحة الويب. و معرف السمة تعمل كمعرف بحيث جافا سكريبت يمكن بسهولة انتزاع والتلاعب به. في هذه الحالة ، سنستخدم JavaScript لجلب العنصر بالمعرف "quoteDisplay" لوضع علامات الاقتباس داخل جزء.

بعد ذلك ، نقوم بإنشاء ملف عنصر بسمة onclick مع تمرير "newQuote ()" كمعامل. الالعنصر كما خمنت ، هو الزر الذي سيفعل شيئًا ما عند النقر فوقه. و عند_النقر يستخدم سمة لتحديد وظيفة الزر، بحيث في كل مرة تنقر على زر، فإنه سيتم تشغيل وظيفة التي تم تمريرها إلىالصورة عند_النقر السمة.

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

أخيرًا ، إليك تحديثًا لعرض الشكل الذي يبدو عليه ملف index.html الكامل حاليًا وما ينتج في متصفح الويب. لفتح المشروع ، استخدم مستعرض ويب لفتح ملف index.html.

التفكير المنطقي باستخدام الكود

حان الوقت أخيرًا لبدء العمل على JavaScript في ملف javascript.js الخاص بنا حتى نتمكن من تطوير وظيفة إنشاء الاقتباس الخاصة بنا.

الآن ، قبل أن نبدأ في البرمجة ، دعنا نفكر بشكل منطقي في كيفية إنشاء آلة لتوليد عروض الأسعار برمز. لا يمكننا بدء البرمجة فقط دون التفكير أولاً.

نحتاج إلى معرفة ما نريد ومتى نريده. لهذا المشروع ، نريد أسعار! متى نريدها؟ نريده الآن! أوه ، erm… أعني أننا نريده كلما ضغط المستخدم على الزر.

الآن وقد حللنا السؤال الأول ، علينا طرح السؤال الثاني. ما هي الاقتباسات؟ أعني حقا ما هم؟

شكرا جادن! نعم! تتكون الاقتباسات من أحرف تشكل الكلمات. في عالم البرمجة ، يتم تصنيف الكلمات على أنها سلاسل ، لذلك يجب أن تكون اقتباساتنا عبارة عن سلاسل !

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

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

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

هذا هو! لقد حللنا كيفية إنشاء مولد اقتباس عشوائي من خلال التفكير المنطقي في الكود! فيما يلي ملخص للمنطق الذي توصلنا إليه لمشروعنا:

  1. الاقتباسات عبارة عن سلاسل متعددة يجب تخزينها في مصفوفة.
  2. في كل مرة يتم الضغط على الزر ، يجب إنشاء عدد صحيح عشوائي.
  3. سيتم استخدام الرقم كتمثيل لرقم فهرس الصفيف لصفيف الاقتباس.
  4. بمجرد استرداد الاقتباس الذي تم اختياره عشوائيًا من المصفوفة باستخدام الرقم الصحيح الذي تم إنشاؤه عشوائيًا ، سنضعه في مستند HTML.

وقت الترميز!

نجاح باهر! لقد وصلنا إلى هذا الحد ولم نبدأ البرمجة بعد! مرحبا بكم في عالم البرمجة!

أنا فقط أمزح.

ليس صحيحا.

ستقضي الكثير من الوقت في الترميز في هذه المهنة (أو الهواية). لكن وجهة نظري هي أنك ستقضي المزيد من الوقت في التفكير في منطق البرمجة وكيفية حل المشكلات. لا تتعلق البرمجة باختراق 100 كلمة في الدقيقة لمدة 20 دقيقة على لوحة المفاتيح. هذا لن يحدث.

الآن بعد أن أصبح المنطق بعيدًا عن الطريق. لنبدأ الترميز. سنعمل الآن داخل ملف javascript.js .

نحتاج إما إلى إنشاء عروض الأسعار الخاصة بنا أو نسخها من مصدر عبر الإنترنت.

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

كما ترى في الصورة أدناه ، لقد حددت متغيرًا يسمى "علامات الاقتباس" وقمت بتعيينه مساويًا لمصفوفة مليئة بالاقتباسات التي اخترتها من الإنترنت.

نحتاج الآن إلى إنشاء وظيفة newQuote () التي ذكرتها سابقًا في قسم HTML من هذا البرنامج التعليمي. بالنسبة لدالة newQuote () الخاصة بنا ، نحتاج إلى إنشاء عدد صحيح عشوائي يتراوح من 0 إلى طول مصفوفة علامات الاقتباس . سأشرح المزيد أدناه.

أولاً ، نسمي الدالة Math.floor (). تأخذ الدالة Math.floor () معلمة وتقرب الرقم إلى أسفل إلى أقرب عدد صحيح. على سبيل المثال ، إذا استدعينا Math.floor (5.7) ، فسيتم إرجاع 5.

ثانيًا ، سنمرر Math.random () كمعامل إلى Math.floor (). ستُنشئ الدالة Math.random () عددًا عشريًا عشوائيًا بين 0 و 1.

لنفترض أن لدينا هذا:

إذا قمنا بالتحكم في تسجيل رقم عشوائي في هذه الحالة ، فسيتم إرجاعه دائمًا 0. وهذا لأن Math.random () سيكون دائمًا رقمًا عشريًا بين 0 و 1 مثل 0.4 ، 0.721 ، 0.98 ، وهكذا. نظرًا لأننا نقوم بتمرير Math.random () إلى Math.floor () كمعامل ، فإن Math.floor () دائمًا ما يتم التقريب إلى أقرب رقم عشري ، وبالتالي فإن كل رقم عشري بين 0 و 1 سيعود دائمًا إلى 0.

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

لنجرب الآن شيئًا كهذا:

إذا قمنا بالتحكم في log randomNumber ، فستكون النتائج في أي مكان بين 1 و 19. الآن يمكنني استخدام هذه الحالة الحالية لـ randomNumber لسحب اقتباس من مصفوفة علامات الاقتباس ، ولكنها لن تعمل إلا إذا كان رقم فهرس الصفيف موجودًا داخل المصفوفة ، وإلا سيتم طرح خطأ.

فمثلا:

لدي حاليًا 10 سلاسل فقط داخل مصفوفة علامات الاقتباس الخاصة بي ، لذا فإن أي رقم أعلى من 9 سيعود بدون تعريف لأنه غير موجود داخل المصفوفة.

لحل هذه المسألة ، نحتاج فقط إلى ضرب Math.random () في طول مصفوفة علامات الاقتباس. من خلال القيام بذلك ، يمكننا إضافة أو إزالة العديد من السلاسل من المصفوفة كما نحب وسيعيد متغير randomNumber دائمًا رقمًا صالحًا لأننا نستخدم طريقة quotes.length للحصول دائمًا على الطول الحالي للمصفوفة.

Now we need a way to use the value of randomNumber to randomly retrieve a quote from the quotes array and place the quote into our HTML document and display it to our users.

Remember how I mentioned that we use HTMLID’s to allow JavaScript to easily grab and manipulate HTML elements? Well, that’s what we’re doing now to the HTML quoteDisplay ID we created earlier.

Using document.getElementById() we can pass in any string and JavaScript will look through our HTML document and retrieve it for use to do whatever we want with it. We will pass in ‘quoteDisplay’ as a parameter to retrieve the HTML element with the id of “quoteDisplay”.

Now we will use the .innerHTML method to pass a randomly retrieved quote from our array as the value that will be added into our HTML quoteDisplay element.

We set innerHTML equal to our quotes array with our randomNumber variable passed as an array index number. Now our newQuote() function is complete!

Mission Accomplished!

If you’ve reached this part of the tutorial, you’ve completed the project! Congratulations! You are practically done building the Random Quote Generator.

Now all you need to do is open the project up in your browser and see if it works! Do this by dragging your index.html file into your browser window.

Press the button, and it should display a random quote to your screen. Press the button as many times as you like. Each time, a new quote should replace current one on screen.

You can add as many quotes as you want into the quotes array.

Take a look at an overview of our entire project files side by side that make up this Random Quote Generator.

What now?

You’ve created a fully functional Random Quote Generator and you’re probably wondering where do you go on from here.

You’re probably thinking that this Random Quote Generator looks very boring, and no one would probably use it. And you’re absolutely right. This project looks quite plain, and it’s up to you to change that.

You can improve upon this project by adding your own functionalities and styling to it.

At the beginning of this tutorial we created a style.css file that we didn’t use. CSS is used to make web pages pretty and colorful. It is up to you to add to the CSS file for styling if you want.

You can search for some CSS tutorials for some additional guidance. Let your imagination run wild, and make this project yours! Do whatever you want! Coding is magic and you’re a wizard, Harry!

إذا كنت مهتمًا بمعرفة مقدار التغيير الذي يمكن لمشروع ما باستخدام CSS وبضعة سطور أخرى من كود JavaScript ، فتحقق من الإصدار الخاص بي من هذا المولِّد العشوائي للاقتباس الذي أطلق عليه "Epiphany Clock"هنا .

إذا كنت قد استمتعت بهذا البرنامج التعليمي ، فالرجاء النقر فوق زر القلب ومشاركته! لا تتردد في ترك أي تعليقات أو أسئلة أو ملاحظات. شكرا لك وترميز سعيد!