تطبيق Notes Simple و Word Counter

تطبيق Notes Simple و Word Counter

بقلم

روابط سريعة

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

ما الذي ستقوم ببنائه

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

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

مثال على تطبيق Web Text البسيط الذي يعرض ملاحظات بما في ذلك إدخال التقويم وقائمة عناوين URL.

كما أنه يعتبر الأحرف والكلمات ، وهي مقدمة مفيدة للعمل مع السلاسل (النص). بالطبع ، التطبيق بسيط للغاية: هذه هي النقطة. ولكن ، مع هذا البرنامج التعليمي ، ستتعلم المفاهيم الأساسية وراء بناء تطبيق ويب ، وسيكون العالم محارك.

كيف ستقوم ببنائه

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

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

  • CSS: تتيح لك أوراق الأناقة المتتالية تصميم المحتوى الخاص بك. استخدام لغة ترميز النص التشعبي اللغة ، يمكنك تلوين فقرة خضراء معينة ، أو جعل جميع روابطك جريئة ، أو ضع الشريط الجانبي بجوار مقالتك الرئيسية.

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

ال موقع web.dev (كتبه أعضاء فريق الكروم) و MDN ، شبكة مطور Mozilla، وهما مصدران ممتازان للمعلومات حول تقنيات الويب الأساسية.

الصفحة الرئيسية لموقع web.dev مع موارد التعلم لـ HTML و CSS و JavaScript.

بنية التطبيق

سيتألف التطبيق الذي ستنشئه من ثلاثة ملفات بسيطة: index.html ، styles.css ، و script.js.

لا توجد متطلبات خاصة لتشغيل التطبيق ، كل ما تحتاجه هو متصفح الويب. لا توجد وظائف خلفية ، لذلك لا تحتاج إلى لغة برمجة مثل PHP أو خادم ويب محلي. بمجرد الانتهاء من ذلك ، يمكنك فتح ملف index.html مباشرة في متصفحك وسيعمل كل شيء.

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

كيفية بناء الملاحظة Taker

قم بإنشاء الملفات الثلاثة التالية في نفس الدليل ، ثم افتح index.html في متصفح الويب. بدلاً من ذلك ، يمكنك تنزيل الملفات من هذا مستودع جيثب.

بناء الهيكل مع HTML

يحدد ملف index.html بنية محتوى التطبيق في HTML. ويشمل إشارات إلى الملفين الآخرين حتى يتمكن المتصفح من الجمع بينهما للمنتج النهائي.

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

        html>
<html>
<head>
    ...
head>
<body>
    ...
body>
html>

البيانات الوصفية في الرأس قصيرة جدًا ، مع مجرد عنوان للصفحة (الذي يظهر في شريط عنوان المتصفح الخاص بك) ومرجع إلى ملف STYLES.CSS:

            <title>Texttitle>
    <link rel="stylesheet" href="styles.css" />

الجسم أكثر تعقيدًا ، ولكن هناك عدد قليل من الأجزاء المهمة:

            <div id="counter">
        words: <span id="words">0span>
        /
        characters: <span id="chars">0span>
    div>
    <textarea id="text" autofocus="1">textarea>
    <script src="script.js">script>

يحتوي عنصر DIV (“التقسيم”) على كلمة التطبيق وتهم الأحرف. سوف يجلس في الجزء العلوي من تطبيق الويب والتحديث كلما تغير النص.

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

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

في هذه المرحلة ، يمكنك فتح ملف index.html في متصفح. لن يفعل أي شيء في الوقت الحالي ، ولن يبدو الأمر صحيحًا ، لكن من المفيد التحقق من تطبيقك في كل مرحلة لضمان أن الأساسيات تعمل كما تتوقع.

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

جعل الأشياء تبدو جيدة مع CSS

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

أولاً ، قم بتصميم الجسم لتحديد التصميم الكلي:

        body {
    margin: 0;
    padding: 0;
    display: grid;
    min-height: 100vh;
    grid-template-rows: min-content 1fr;
}

يستخدم هذا CSS تخطيط الشبكة لوضع الكلمة والشخصية في صف ضيق فوق النص. تحدد خاصية صوف الشبكة-أن صف العد يجب أن يكون قصيرًا قدر الإمكان (MIN-MAINTENT) ويجب أن يملأ Textarea المساحة المتبقية (1FR).

يحتوي الصف المضاد على بعض الأسلوب الأساسي للتمييز بينه عن النص المتبقي ، وذلك بشكل رئيسي عن طريق خلفيته:

        #counter {
    font-family: sans-serif;
    background-color: #f7f7f7;
    text-align: center;
    width: 100%;
    padding: 0.5em 0;
}

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

        textarea {
    width: 100%;
    height: 100%;
    font-size: 16pt;
    padding: 1em;
    box-sizing: border-box;
    outline: 0;
    border: none;
    border-top: 1px solid #999;
}

يُظهر تطبيق تدوين الملاحظات ذات الأنماط المخصصة شريط العداد في الجزء العلوي مع نص كامل الحجم أدناه.

إضافة وظيفة مع JavaScript

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

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

  • احفظ النص الذي تم إدخاله ، وأعيد تحميله عند الحاجة.

  • تحديث الحرف والكلمات التهم لتوفير الإحصاءات الحية.

يتضمن كلا المتطلبات تحديث العناصر في المستند. لذلك يبدأ البرنامج النصي بالحصول على إشارات إلى هذه العقد باستخدام طريقة getElementByID:

        const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");

لاحظ أن الكلمات ، و chars ، والنص هي معرفات عناصرها الخاصة في المستند ، المخصصة في ملف HTML مع سمة المعرف.

بعد ذلك ، نحتاج إلى رد فعل التطبيق عند تغيير النص:

        textarea.addEventListener("input", function(ev) {
    localStorage.setItem("text", ev.target.value);
    update_counts(ev.target.value);
});

مستمع الحدث هو وظيفة سيتم تشغيل JavaScript تلقائيًا عند حدوث حدث معين. في هذه الحالة ، نعلق مستمعًا على عقدة Textarea التي تعمل عند حدوث حدث “الإدخال”. هذا ، بشكل فعال ، عندما يتفاعل شخص ما مع النص.

بعد ذلك ، نستخدم واجهة برمجة تطبيقات تخزين الويب لحفظ المحتويات الحالية للنص ، من ev.target.value. في هذا الهيكل ، EV هو كائن يمثل الحدث الذي أثار المستمع ، EV.Target هو العقدة التي تلقا الحدث ، و ev.target.value هو نص هذا النص.

تأخذ طريقة SetItem معلمتين: اسم رئيسي للربط بالبيانات ، والبيانات الفعلية لتخزينها.

بعد ذلك ، ندعو update_counts () ، ونمر بنفس النص إليه. سنشرح هذه الوظيفة قليلاً.

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

        window.addEventListener("load", function(ev) {
    var text = localStorage.getItem("text");
    textarea.value = text;
    update_counts(text);
});

يتولى هذا الحدث الحمل الذي يحدث على كائن النافذة ، وهو تمثيل المستوى الأعلى لنافذة المتصفح نفسها. عند تحميل النافذة ، تقوم مكالمة لـ GetItem () بإرجاع القيمة المخزنة لنصنا من التخزين المحلي. ثم يقوم هذا الرمز بتعيين قيمة TextArea على النص المحمّل ، ومثل المستمع السابق ، يستدعي update_counts () بهذا النص.

يتم العمل المتبقي في وظيفة update_counts () التي تبدو هكذا:

        function update_counts(text) {
    chars.innerHTML = text.length;
    words.innerHTML = text.split(' ').length;
}

على عكس textarea ، لا يحتوي النص العادي على خاصية قيمة ، لذلك قمنا بتعيين خاصية InnerHTML بدلاً من ذلك. خاصية الطول للسلسلة هي خاصية بسيطة للقراءة فقط تعطينا عدد الأحرف.

Text.split (”) يكسر السلسلة عند أحرف الفضاء ، وإرجاع النتيجة كمجموعة من الأوتار. مثل الأوتار ، تحتوي المصفوفات على خاصية طول تعطينا عدد العناصر الموجودة في صفيف.

إذا جربت هذا الرمز ، فقد تلاحظ بعض الأخطاء:

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

  2. مع عدم وجود نص على الإطلاق ، سوف يبلغ عن كلمة واحدة بسبب كيفية عمل الانقسام.

لإصلاح المشكلة الأولى ، يمكنك الانقسام على تعبير منتظم (تعني “حرف مساحة بيضاء”) بدلاً من المساحة. لإصلاح الثاني ، قم بتصفية السلاسل الفارغة من النتيجة:

            words.innerHTML = text.split(/\s/).filter(function(n) { return n != ''; }).length;

إذا كنت لا تفهم هذا الخط تمامًا ، تحقق من صفحات MDN لـ ينقسم و فلتر.

تطبيق الويب مع نص مثال ، يوضح تعدادات الدقة والكلمات.

يمكنك إنشاء العديد من تطبيقات الويب المفيدة مع عدد قليل من الملفات. يمكنك أيضًا تمديد تطبيق Notes Simple هذا لإضافة المزيد من الوظائف. على سبيل المثال ، يمكنك استخدام خاصية window.location لاسترداد عنوان URL الحالي ودعم ملاحظات متعددة عن طريق تغيير الاسم الذي تنقله إلى LocalStorage.setItem.

(tagstotranslate) البرمجة (T) التطبيقات وتطبيقات الويب

أضف تعليق