أنشئ تطبيق الويب الأول الخاص بك: ملاحظات + عداد سهل وسريع 📝⚡
قد يبدو البدء في البرمجة أمرًا مرهقًا، مع وجود العديد من اللغات والأطر والمنهجيات التي يجب مراعاتها. في بعض الأحيان قد يبدو من الأسهل تفويض كل شيء إلى الذكاء الاصطناعي. لا تقلق! يمكن أن تكون برمجة الويب بسيطة وممتعة، والأفضل من ذلك كله، مجانية تمامًا! 🌐✨
ما الذي ستبنيه
من خلال اتباع هذا البرنامج التعليمي، ستتمكن من إنشاء تطبيق ويب بسيط لتخزين ملاحظات نصية وحساب الأحرف والكلمات.
سيحتفظ التطبيق بالبيانات، وبالتالي سيتذكر النص عند إعادة تحميل الصفحة أو إعادة فتحها. هذا يعني أنه سيكون لديك طريقة ملائمة لحفظ أي نص تريد الرجوع إليه لاحقًا، مثل العناوين وعناوين URL وما إلى ذلك. 📄🔗
ويقوم أيضًا بحساب الأحرف والكلمات، وهو ما يعد مقدمة جيدة للتعامل مع النصوص (السلاسل). بالطبع، التطبيق بسيط جدًا: هذا هو الهدف! ولكن مع هذا البرنامج التعليمي، سوف تتعلم أساسيات تطوير تطبيقات الويب، وبعد ذلك سيكون العالم بين يديك. 🦪💻
كيف ستقوم ببنائه؟
على الرغم من أن تطبيقات الويب متنوعة للغاية، إلا أنها تتضمن عادةً ثلاث تقنيات رئيسية: HTML وCSS وJavaScript. من الضروري أن تفهم أدوارهم قبل أن تبدأ. 📚
- HTML: لغة ترميز النص التشعبي تسمح لك بتحديد بنية المحتوى الخاص بك. بواسطته يمكنك وضع علامة على النص حسب معناه، والإشارة إلى ما إذا كان فقرة، أو عنوان، أو عنصر في قائمة، على سبيل المثال.
- CSS: تتيح لك أوراق الأنماط المتتالية تصميم المحتوى الخاص بك. باستخدام هذه اللغة، يمكنك تلوين فقرة باللون الأخضر، أو جعل جميع الروابط الخاصة بك مكتوبة بخط غامق، أو وضع شريط جانبي بجوار مقالتك الرئيسية. 🎨
- JavaScript: باستخدام لغة البرمجة هذه، يمكنك إضافة وظائف إلى موقع الويب الخاص بك. يمكنك أن تجعل الأزرار تظهر أو تخفي أجزاء من مستندك عند النقر عليها، أو تنفيذ معالج نصوص كامل أو لعبة فيديو. 🎮
هو موقع الويب.dev (كتبه أعضاء فريق Chrome) و MDN، شبكة مطوري Mozilla، وهما مصدران ممتازان للمعلومات حول تقنيات الويب الأساسية.
هيكل التطبيق
سيتكون التطبيق الذي ستقوم ببنائه من ثلاثة ملفات بسيطة: index.html، وstyles.css، وscript.js. 🗂️
لا توجد متطلبات خاصة لتشغيل التطبيق، كل ما تحتاجه هو متصفح ويب. لا توجد وظيفة خلفية، لذا لا تحتاج إلى لغة برمجة مثل PHP أو خادم ويب محلي. بمجرد الانتهاء، يمكنك فتح ملف index.html مباشرة في متصفحك وسوف يصبح كل شيء على ما يرام. 😊
من المهم ملاحظة أن هذا التطبيق يحفظ النص الخاص بك دون كتابته في ملف محدد على القرص، حيث لا يمكن لـ JavaScript الوصول إلى نظام الملفات. يستخدم Web Storage API، وهو بديل قوي لملفات تعريف الارتباط. 🍪💾
كيفية بناء مسجل الملاحظات
قم بإنشاء الملفات الثلاثة التالية في نفس الدليل ثم افتح index.html في متصفح الويب. بدلا من ذلك، يمكنك تنزيل الملفات من مستودع GitHub هذا. 📥
بناء الهيكل باستخدام HTML
يقوم ملف index.html بتحديد بنية محتوى التطبيق الخاص بك في HTML. قم بتضمين المراجع إلى الملفين الآخرين حتى يتمكن المتصفح من دمجهما للحصول على المنتج النهائي.
كما هو الحال مع جميع مستندات HTML، يتضمن الهيكل العلوي قسمًا رئيسيًا يحتوي على البيانات الوصفية وقسمًا نصيًا يحتوي على المحتوى الفعلي الذي سيظهر على الصفحة:
HTML>
<HTML>
<رأس>
...
رأس><جسم>
…
جسم>
HTML>
البيانات الوصفية الموجودة في الرأس مختصرة للغاية، حيث تحتوي فقط على عنوان الصفحة (الذي يظهر في شريط عنوان المتصفح الخاص بك) ومرجع إلى ملف styles.css:
<عنوان>نصعنوان>
<وصلة علاقة="ورقة الأنماط" هريف="styles.css" />
الجسم أكثر تعقيدًا، ولكن هناك أجزاء قليلة مهمة فقط:
<قسم بطاقة تعريف="عداد">
كلمات: <فترة بطاقة تعريف="كلمات">0فترة>
/ الشخصيات: <فترة بطاقة تعريف="أحرف">0فترة>
قسم><منطقة النص بطاقة تعريف="نص" التركيز التلقائي=«1»>منطقة النص>
<نص المصدر=«script.js»>نص>
يحتوي عنصر div على عدد الكلمات والأحرف في التطبيق. سيتم وضعه في الجزء العلوي من تطبيق الويب وسيتم تحديثه في كل مرة يتغير فيها النص.
لاحظ سمات المعرف، والتي تعتبر حيوية للعملية. يجب أن تكون قيمة المعرف فريدة، حتى يتمكن التطبيق من استخدامها لتحديد عنصر معين. يمكن أن يساعدنا القيام بذلك في تصميم هذه العناصر واستهدافها أيضًا عند إضافة وظائف.
منطقة النص عبارة عن عنصر نموذج مدمج يسمح لك بكتابة نص بسيط في المتصفح. بفضل خاصية التركيز التلقائي، ستكون جاهزًا للكتابة بمجرد تحميل الصفحة. وأخيرًا، تشير الصفحة إلى ملف javascript، script.js.
في هذه المرحلة، يمكنك فتح ملف index.html في المتصفح. لن يؤدي ذلك إلى أي شيء في الوقت الحالي، ولن يبدو جيدًا حتى، ولكن من المفيد اختبار تطبيقك في كل مرحلة للتأكد من أن الأساسيات تعمل كما تتوقع.
جعلها تبدو جيدة باستخدام CSS
يتيح لك CSS تصميم أجزاء من صفحتك على الويب من خلال استهداف تلك الأجزاء وتحديد قيم للخصائص مثل حجم الخط ولون الخلفية. لا يحتاج هذا التطبيق النموذجي إلى تصميم معقد للغاية لأن واجهته أساسية للغاية. ومع ذلك، يمكننا أن نزيل الحواف الخشنة بلمسة من الأناقة. 🎨✨
أولاً، قم بتصميم الجسم لتحديد التصميم العام:
جسم {
هامِش: 0;
حشوة: 0;
عرض: شبكة;
الحد الأدنى للارتفاع: 100في اتش;
صفوف قالب الشبكة: الحد الأدنى للمحتوى 1الفرنسية;
}
يستخدم هذا CSS تخطيط الشبكة لتحديد موضع عدد الكلمات والأحرف في صف ضيق أعلى منطقة النص. تحدد خاصية grid-template-rows أن صف العد يجب أن يكون قصيرًا قدر الإمكان (min-content) ويجب أن تملأ منطقة النص المساحة المتبقية (1fr).
يتمتع الصف المضاد بأسلوب أساسي لتمييزه عن بقية النص، وذلك بشكل أساسي من خلال خلفيته:
#counter {
عائلة الخطوط: بدون تشعبات;
لون الخلفية: #f7f7f7;
محاذاة النص: مركز;
عرض: 100%;
حشوة: 0.5 إم 0;
}
وأخيرًا، تم تصميم منطقة النص لعرض نص واضح مع وجود مساحة كافية للتنفس. الخط الذي يفصل بين الأرقام والنص هو في الواقع الحد العلوي لمنطقة النص هذه.
منطقة النص {
عرض: 100%;
ارتفاع: 100%;
حجم الخط: 16نقطة;
حشوة: 1في;
تحديد حجم الصندوق: صندوق الحدود;
مخطط تفصيلي: 0;
حدود: لا أحد;
أعلى الحدود: 1بكسل صلب #999;
}
إضافة وظائف باستخدام JavaScript
مع وجود الهيكل والأسلوب في مكانهما، فأنت جاهز لإضافة وظيفة: الكود الذي يجعل هذا التطبيق البسيط يقوم بشيء ما بالفعل. 🛠️
قبل أن تبدأ في كتابة حتى أبسط التعليمات البرمجية، فمن الجيد أن تفهم ما تريد أن تفعله. في هذه الحالة، هناك فقط زوج من المتطلبات العامة:
- احفظ النص المدخل وأعد تحميله عندما يكون ذلك ضروريًا.
- قم بتحديث عدد الأحرف والكلمات لتوفير إحصائيات في الوقت الفعلي. 📊
يتضمن كلا المتطلبين تحديث العناصر الموجودة في المستند. لذلك يبدأ البرنامج النصي بالحصول على مراجع لهذه العقد باستخدام طريقة getElementById:
ثابت كلمات = وثيقة.الحصول على العنصر حسب المعرف("كلمات");
ثابت الأحرف = وثيقة.الحصول على العنصر حسب المعرف("أحرف");
ثابت منطقة النص = وثيقة.الحصول على العنصر حسب المعرف("نص");
لاحظ أن الكلمات والأحرف والنصوص هي معرفات للعناصر الخاصة بها في المستند، ويتم تعيينها في ملف HTML باستخدام سمة id.
بعد ذلك، نحتاج إلى أن يتفاعل التطبيق عند تغيير النص:
textarea.addEventListener("مدخل", وظيفة(إيف) { localStorage.setItem("نص"، ev.target.value); تحديث_العدد(ev.target.value); });
مستمع الحدث هو عبارة عن وظيفة يقوم JavaScript بتنفيذها تلقائيًا عند حدوث حدث معين. في هذه الحالة، نقوم بربط مستمع بعقدة منطقة النص، والذي يتم تنفيذه عند حدوث حدث "الإدخال". وهذا هو، عندما يتفاعل شخص ما مع منطقة النص.
بعد ذلك، نستخدم واجهة برمجة تطبيقات تخزين الويب لحفظ المحتويات الحالية لمنطقة النص، والتي تأتي من ev.target.value. في هذا الهيكل، ev هو كائن يمثل الحدث الذي أدى إلى تشغيل المستمع، وev.target هي العقدة التي تلقت الحدث، وev.target.value هو نص منطقة النص هذه.
تأخذ طريقة setItem معامِلَين: اسم المفتاح لربطه بالبيانات والبيانات الفعلية لتخزينها.
بعد ذلك، نستدعي update_counts()، ونمرر نفس النص. سوف نشرح هذه الميزة بعد قليل.
الآن بعد أن قمنا بحفظ النص، سترغب في تحميله مرة أخرى عند فتح التطبيق أو إعادة تحميله. يمكننا الاهتمام بذلك باستخدام مستمع آخر:
نافذة.addEventListener("حمولة", وظيفة(إيف) {
فار النص = localStorage.getItem("نص"); textarea.value = نص؛ تحديث_العدد(النص); });
يتولى هذا المستمع معالجة حدث التحميل الذي يحدث على كائن النافذة، وهو تمثيل على المستوى الأعلى لنافذة المتصفح. عند تحميل النافذة، تقوم استدعاء getItem() بإرجاع قيمة النص المخزنة من التخزين المحلي. يقوم هذا الكود بعد ذلك بتعيين قيمة منطقة النص إلى النص المحمل، ومثل المستمع أعلاه، يستدعي update_counts() مع هذا النص.
يتم تنفيذ العمل المتبقي في دالة update_counts() والتي تبدو بهذا الشكل:
وظيفة عدد التحديثات(نص) {chars.innerHTML = text.length؛ الكلمات.innerHTML = text.split(' ').طول؛ }
على عكس منطقة النص، لا يحتوي النص العادي على خاصية قيمة، لذا قمنا بتعيين خاصية innerHTML بدلاً من ذلك. إن خاصية طول السلسلة هي خاصية بسيطة للقراءة فقط والتي تعطينا عدد الأحرف.
يقوم text.split(' ') بتقسيم السلسلة عند أحرف المسافة، مما يؤدي إلى إرجاع النتيجة كمجموعة من السلاسل. مثل السلاسل، تحتوي المصفوفات على خاصية طول تعطينا عدد العناصر في المصفوفة.
ومع ذلك، إذا قمت باختبار هذا الكود، فقد تلاحظ وجود بعض الأخطاء:
- لن يتم حساب الكلمة بمفردها على السطر بشكل صحيح، حيث لا توجد مسافة حولها.
- في حالة عدم وجود أي نص على الإطلاق، سيتم الإبلاغ عن كلمة واحدة فقط بسبب طريقة عمل التقسيم.
لحل المشكلة الأولى، يمكنك التقسيم على تعبير عادي (\s يعني "حرف فارغ") بدلاً من المسافة. لحل المشكلة الثانية، قم بتصفية السلاسل الفارغة من النتيجة:
الكلمات.innerHTML = text.split(/\س/).فلتر(وظيفة(ن) { يعود ن != ''؛ }).طول؛
إذا كنت لا تفهم هذا السطر بشكل كامل، فراجع صفحات MDN لمعرفة المزيد. ينقسم و فلتر.
بإمكانك إنشاء العديد من تطبيقات الويب المفيدة باستخدام عدد قليل من الملفات فقط. يمكنك أيضًا توسيع تطبيق الملاحظات البسيط هذا لإضافة المزيد من الوظائف. على سبيل المثال، يمكنك استخدام خاصية window.location لاسترداد عنوان URL الحالي ودعم الملاحظات المتعددة عن طريق تغيير الاسم الذي تمررها إلى localStorage.setItem. 🗒️🌍
