क्या आप HTML और CSS जानते हैं और स्टैटिक वेब पेजों को सरल (और ऐसा नहीं) बनाने में सक्षम हैं, लेकिन उनमें "अधिक" और अन्तरक्रियाशीलता की साँस लेना चाहेंगे? आपके पास काम (पेंटिंग, तस्वीरें, कविताएं, डाक टिकटों का संग्रह आदि) हैं जिन्हें आप दुनिया के साथ साझा करना चाहते हैं, लेकिन आप एक पोर्टफोलियो साइट या ब्लॉग का निर्माण नहीं कर सकते हैं जहां आप उन्हें पोस्ट कर सकते हैं और बिना अतिरिक्त प्रयास के उन्हें अपडेट कर सकते हैं। ? या क्या आप एक यात्री की डायरी रखने, या असामान्य पाक व्यंजनों को इकट्ठा करने, या अपनी फिटनेस गतिविधि पर नज़र रखने और यह सब अपनी वेबसाइट पर ऑनलाइन करने का सपना देखते हैं? शायद आपके पास एक पसंदीदा पालतू जानवर है, जिसकी देखभाल के लिए विशेष प्रक्रियाओं की आवश्यकता होती है, और उन्हें ट्रैक किया जाना चाहिए और जल्दी से रिकॉर्ड किया जाना चाहिए?

लेकिन जावास्क्रिप्ट का उल्लेख आपको एक आसान (और कभी-कभी ऐसा नहीं है) कांपता है, और आपके विचारों को महसूस करने के लिए प्रौद्योगिकियों और अवधारणाओं की संख्या की आवश्यकता होती है जो आपको भ्रम और निराशा में ले जाती है? परिणामस्वरूप, आप खुद से पूछते हैं: “वेब प्रोग्रामिंग इतनी कठिन क्यों होनी चाहिए? क्या यह आसान बनाने के लिए कुछ के साथ आना असंभव है? "

फिर आप सही जगह पर आए। लेख पढ़ने के बाद, आपको एक उपकरण प्राप्त होगा, जिसकी मदद से, मुझे यकीन है, आप महसूस कर सकते हैं, यदि नहीं, तो आपके कई विचार, ऊपर सूचीबद्ध उन जैसे।

मूल चित्रों के लेखक: मार्ट विर्कस (toggl.com)

कुशल और बुद्धिमान अनुभव फ्रंट-एंड डेवलपर्स, चिल्लाते हुए लेख को बंद करने के लिए जल्दी मत करो कि अब यहां नए लोगों को "रगड़" करने के लिए कुछ होगा और आपको यहां कुछ भी नहीं करना है। मुझे यकीन है कि आप भी अपने लिए कुछ उपयोगी सीख सकते हैं। याद रखने वाली मुख्य बात: यदि शुरुआती लोगों के लिए कुछ सरल हो जाता है, तो यह स्वचालित रूप से सभी के लिए सरल हो जाएगा! तो, कुछ हद तक, यह आपके जीवन को सरल करेगा। यह बुरा नहीं है, सहमत हैं?

तो बात है! यह लेख पूरी तरह से मावो को समर्पित होगा।

जावास्क्रिप्ट कोड लिखने और अपने स्वयं के सर्वर को तैनात करने की आवश्यकता के बिना, केवल HTML और CSS लिखकर इंटरैक्टिव वेब एप्लिकेशन विकसित करने के लिए मावो एक नया दृष्टिकोण है।

मेवो का विकास मैसाचुसेट्स इंस्टीट्यूट ऑफ टेक्नोलॉजी ( MIT CSAIL ) लेबोरेटरी ऑफ कंप्यूटर साइंस एंड आर्टिफिशियल इंटेलिजेंस के लेह वेरू के नेतृत्व में वैज्ञानिकों के हेस्टैक ग्रुप द्वारा किया जा रहा है।

सफेद खरगोश का पालन करें!

थोड़ा और सीखना चाहते हैं कि मावो की नींव क्या विचार थी, इसके पूर्ववर्तियों की क्या विशेषताएं थीं, जिन्हें उन्होंने विकसित किया, और किन लोगों को उन्हें छोड़ना पड़ा और क्यों? तब मैं इन दो प्रकाशनों को पढ़ने की सलाह देता हूं, विशेष रूप से मानव-मशीन इंटरैक्शन के क्षेत्र में नवाचारों के लिए समर्पित वार्षिक मंच के लिए तैयार - उपयोगकर्ता इंटरफ़ेस सॉफ्टवेयर और प्रौद्योगिकी (यूआईएसटी) पर एसीएम संगोष्ठी :

मावो: HTML संलेखन द्वारा इंटरएक्टिव डेटा-प्रेरित वेब अनुप्रयोग बनाना ।
एंड-यूज़र एप्लिकेशन ऑथरिंग के लिए डेटा अपडेट क्रियाओं के साथ एक प्रतिक्रियाशील अभिव्यक्ति भाषा का विस्तार ।

रूस से पाठकों के लिए एक छोटा विषयांतर!

मावो साइट को नेटलिफ़ सर्वरों पर होस्ट किया गया है, जिनके पते टेलीग्राम संदेशवाहक के साथ "युद्ध" के परिणामस्वरूप ब्लैक लिस्टेड हैं। इसका मतलब है कि इन सर्वरों पर होस्ट किए गए संसाधन, साथ ही साथ सभी संबंधित सेवाएं रूस में अवरुद्ध हैं (कम से कम इस लेखन के समय)।

हालाँकि, अच्छी खबर है: ली वेरो और मैं इस समस्या को हल करने के लिए सक्रिय रूप से काम कर रहे हैं। मुझे उम्मीद है कि हम जल्द ही इसे भी सुलझा लेंगे। तब तक, कृपया, उदाहरण के लिए, मावो के साथ काम करने के लिए वीपीएन (यह मावो वेबसाइट तक पहुंचने के दौरान और कोडपेन पर डेमो का अध्ययन करते समय , साथ ही साथ अपने स्वयं के वेब एप्लिकेशन बनाते समय सच है)।

(अद्यतन) जो लोग तैयार नहीं हैं और / या वीपीएन से कनेक्ट नहीं करना चाहते हैं वे स्टैकब्लिट्ज़ पर मावो के साथ खेल सकते हैं या cdnjs के माध्यम से इसे अपनी परियोजना से जोड़ सकते हैं ।

मैं आश्वस्त हूं (और मुझे लगता है कि मैं अकेला नहीं हूं) कि एक नई तकनीक को "महसूस" करने का सबसे अच्छा तरीका है और इसका मूल्यांकन करने में सक्षम है कि इसकी मदद से कुछ उपयोगी बनाना है। बहुत मुश्किल नहीं है, अन्यथा हम सिर्फ पेड़ों के पीछे जंगलों को नहीं देख सकते हैं, लेकिन आवश्यक हैं। यह केवल चुनने के लिए रहता है। ओह! एक विचार है।

मुझे लगता है कि आप में से कई एक विदेशी भाषा सीख रहे हैं (शायद किसी के लिए यह एक प्रोग्रामिंग भाषा है)। और, सबसे अधिक संभावना है, आप इसका अध्ययन करने के लिए किसी प्रकार के एप्लिकेशन का उपयोग करते हैं। इन अनुप्रयोगों में नए शब्द आमतौर पर फ्लैशकार्ड का उपयोग करके सीखे जाते हैं। वैसे, विदेशी भाषा सीखने की यह तकनीक ऑफ़लाइन भी बढ़िया काम करती है। लेकिन अब उस बारे में नहीं है।

तो, क्यों हम एक साथ इस तरह के एक अनुप्रयोग विकसित नहीं करते हैं? चलो इसे कहते हैं ... (ड्रम रोल!) "कार्ड" । यह कार्ड की मदद से विदेशी भाषा सीखने के लिए एक पूर्ण विकसित CRUD एप्लिकेशन होगा, जो अनुमति देगा:

ड्रैग और ड्रॉप का उपयोग करके कार्ड बनाना, हटाना, संशोधित करना और उन्हें व्यवस्थित करना;
फ़ाइल से एप्लिकेशन में कार्ड आयात करें और उन्हें फ़ाइल में निर्यात करें;
ट्रैक प्रगति (स्व-मूल्यांकन समारोह)।

एप्लिकेशन का अंतिम संस्करण कुछ इस तरह दिखाई देगा:

क्या यह अच्छा है? मुझे उम्मीद है। फिर जाओ!

लेख के दौरान, मैं आपको एप्लिकेशन विकास के सभी चरणों के माध्यम से मार्गदर्शन करूंगा। और जैसा कि आप पढ़ते हैं, आप विशेष टैग के साथ चिह्नित टुकड़ों का सामना करेंगे।

सफेद खरगोश का पालन करें!

इस तरह से चिह्नित अंशों में मावो के बारे में महत्वपूर्ण लेकिन अतिरिक्त जानकारी है। पहले पढ़ने पर, मुख्य विचार को याद करने के लिए डर के बिना इन टुकड़ों को छोड़ दिया जा सकता है।

अभ्यास उत्कृष्टता का मार्ग है!

कुछ खंडों के अंत में, मैं आपको छोटे स्वतंत्र अभ्यासों की पेशकश करूँगा, जिनका प्रदर्शन किया जा रहा है, आप मावो की क्षमताओं से थोड़ा बेहतर परिचित हो सकते हैं और साथ ही विकसित किए जा रहे एप्लिकेशन को बेहतर बना सकते हैं। इस तरह के अभ्यास ऐसे टुकड़ों में फिट होंगे।

हाथ से याद करो!

क्या आप तैयार हैं, मेरे एक्सपोज़र के धागे के बाद, व्यवहार में नए ज्ञान को तुरंत लागू करने के लिए? बहुत बढ़िया! आखिरकार, जैसा कि आप जानते हैं, हमें बेहतर याद है कि हमारे हाथ क्या करते हैं । आप शुरू से अंत तक एक लेख पढ़कर धीरे-धीरे अपने आवेदन को विकसित कर सकते हैं, या आप किसी भी चरण से शुरू कर सकते हैं जो आपकी रुचि है।

इस तरह के टुकड़े कोडपेन पर एप्लिकेशन के संबंधित संस्करणों के लिंक प्रदान करेंगे।

अब यह सब है। चलो शुरू हो जाओ!

स्थैतिक वेब पेज

यह बताने के लिए कि मावो HTML की शक्ति कैसे बढ़ाता है, हम एक स्थिर HTML पृष्ठ बनाएंगे, जिसका उपयोग हम मावो को पूरी तरह कार्यात्मक वेब एप्लिकेशन में बदलने के लिए करेंगे।

मान लें कि हमारे पास <body> तत्व के अंदर निम्न HTML है:

<header>  <h1></h1> </header> <main> <article>  <p>  </div>  <p></div> </article> </main>

ऊपर कोड स्निपेट में, <लेख> तत्व एक कार्ड से मेल खाता है।

हम अपने पृष्ठ को भविष्य के अनुप्रयोग की तरह बनाने के लिए कुछ शैलियों को जोड़ेंगे:

स्रोत कोड को पूरी तरह से देखना चाहते हैं? आप इसे यहाँ कर सकते हैं।

हम मावो को जोड़ते हैं

अब तक हमारे पास केवल एक स्टेटिक लेआउट है। यह एक पूर्ण वेब अनुप्रयोग में बदलने का समय है। यह वह जगह है जहाँ मावो खेल में आता है!

मावो का उपयोग करने के लिए, हमें इसकी जावास्क्रिप्ट और सीएसएस फाइलों को अपने पेज से जोड़ना होगा। ऐसा करने के लिए, निम्नलिखित दो पंक्तियों को <head> तत्व में जोड़ें:

 <head> ... <script src="https://get.mavo.io/mavo.min.js"></script> <link rel="stylesheet" href="https://get.mavo.io/mavo.css"> ... </head>

रूस से पाठकों के लिए एक छोटा विषयांतर!

आप मावो रिपॉजिटरी से संबंधित फाइलों को डाउनलोड कर सकते हैं और उन्हें उसी तरह अपने पेज से जोड़ सकते हैं।

(अद्यतन) आप अपने प्रोजेक्ट से cdnjs के माध्यम से मावो को भी जोड़ सकते हैं।

सफेद खरगोश का पालन करें!

शायद आपके एप्लिकेशन को पुराने ब्राउज़रों में सही तरीके से काम करना चाहिए? या क्या आप मावो स्रोत कोड में झांकना चाहते हैं और यह पठनीय होने की उम्मीद करते हैं? सब कुछ आपके हाथ में है। आप ठीक-ठीक धुन बना सकते हैं जो कुछ सरल सवालों के जवाब देकर आप मावो के निर्माण और / या संस्करण के साथ काम करना चाहते हैं ।

मावो से जुड़े होने के बाद, हमें यह निर्दिष्ट करना होगा कि किस पृष्ठ तत्व में हमारा भविष्य का अनुप्रयोग होगा। ऐसा तत्व कोई भी HTML तत्व हो सकता है, यहां तक कि <body> या <html> ! हमें इस तत्व में mv-app विशेषता जोड़ने की आवश्यकता है, और अपने मूल्य के रूप में हमारे आवेदन का नाम निर्दिष्ट करें - पूरे HTML पृष्ठ में एक विशिष्ट पहचानकर्ता। Mv-app विशेषता वाले तत्व को एप्लिकेशन का मूल तत्व कहा जाता है।

सफेद खरगोश का पालन करें!

यदि आप mv-app विशेषता के लिए कोई मान निर्दिष्ट नहीं करते हैं और एक ही तत्व में कोई भी विशेषताएँ नहीं हैं: id या नाम , - Mavo स्वचालित रूप से आवेदन नाम mavo1 , mavo2 , आदि को असाइन करेगा।

हालांकि, मैं दृढ़ता से अनुशंसा करता हूं कि आप आवेदन का नाम स्पष्ट रूप से निर्दिष्ट करें, क्योंकि यह आवेदन में कहीं और (स्पष्ट रूप से और स्पष्ट रूप से) उपयोग किया जाता है।

हाथ से याद करो!

https://codepen.io/dsharabin/pen/PoYxNjN

तो, हमारे मामले में <main> तत्व में भविष्य का अनुप्रयोग होगा। इसमें mv-app विशेषता जोड़ें, और हमारे अनुप्रयोग का नाम निर्दिष्ट करें - इसके मूल्य के रूप में फ्लैशकार्ड :

 <main mv-app="flashcards"> ... </main>

संपत्ति विशेषता

अब यह मावो को बताने का समय है कि आवेदन के कौन से तत्व महत्वपूर्ण हैं , अर्थात्, उन्हें संपादित किया जाएगा और / या बचाया जाएगा, और अभिव्यक्ति में भी इस्तेमाल किया जा सकता है (लेकिन बाद में और अधिक - धैर्य रखें)।

हमारे आवेदन में अब तक दो ऐसे तत्व हैं - ये <p> तत्व हैं। इन तत्वों में संपत्ति विशेषता जोड़ें, मावो को सूचित करते हुए कि इन तत्वों में डेटा है जिसे आपको काम करने की आवश्यकता है। गुण विशेषता वाले तत्वों को गुण कहा जाता है ।

सफेद खरगोश का पालन करें!

संपत्ति विशेषता को किसी भी HTML5 तत्व में जोड़ा जा सकता है - मावो जानता है कि इसे कैसे संपादन योग्य बनाया जा सकता है । उदाहरण के लिए, आप कीबोर्ड का उपयोग करके <span> तत्व की सामग्री को मैन्युअल रूप से संपादित कर सकते हैं, और आप संबंधित विजेट का उपयोग करके <समय> तत्व (दिनांक या समय) का मान सेट कर सकते हैं।

नियमों का सेट जिसके द्वारा मावो तत्वों को संपादन योग्य बनाता है, प्लगइन्स का उपयोग करके आसानी से बढ़ाया जा सकता है । क्या यह आवश्यक है कि उपयोगकर्ता Microsoft® Wordpad या Microsoft® Word जैसे कार्यक्रमों के समान टूलबार का उपयोग करके पाठ को प्रारूपित कर सकता है, अर्थात पाठ के साथ काम कर सकता है, जैसा कि किसी WYSIWYG संपादक में है? या क्या आप उपयोगकर्ता को मार्कडाउन भाषा कमांड का उपयोग करने की अनुमति देना चाहते हैं? कोई प्रतिबंध नहीं हैं। बस उचित प्लगइन्स को सक्रिय करें। कोई उपयुक्त प्लगइन नहीं? समस्या नहीं है। अपना लिखो। मावो बॉक्स के ठीक बाहर इसी कार्यक्षमता का समर्थन करता है।

ध्यान रखें कि संपत्ति विशेषता का मूल्य तत्व के उद्देश्य का वर्णन करना चाहिए, जैसा कि आमतौर पर आईडी या वर्ग विशेषताओं के मूल्यों द्वारा वर्णित किया जाता है।

हमारे <p> तत्वों को गुणों में बदलें:

 ... <p property="source">  </p> <p property="translation"></p> ...

सफेद खरगोश का पालन करें!

यदि किसी तत्व में पहले से ही एक आईडी , वर्ग, या आइटमप्रॉप विशेषता है जो उसके उद्देश्य का सटीक वर्णन करता है, तो आप संपत्ति विशेषता को अपरिवर्तित छोड़ सकते हैं । उदाहरण के लिए, हमारे आवेदन के गुणों में से एक को निम्नानुसार वर्णित किया जा सकता है: <p property class="source"> ।

क्या आपने इसमें गुण जोड़ने के बाद हमारे आवेदन में कोई बदलाव देखा है? मुझे यकीन है कि हाँ एप्लिकेशन के शीर्ष पर, मावो टूलबार ( मावो बार ) एडिट बटन के साथ दिखाई दिया। यह बटन आपको दो एप्लिकेशन मोड के बीच स्विच करने की अनुमति देता है: रीड मोड और एडिट मोड । अब हमारा आवेदन रीड मोड में है। इसका अर्थ है कि हम इसके डेटा को सीधे ब्राउज़र विंडो में संपादित नहीं कर सकते हैं।

सफेद खरगोश का पालन करें!

मावो टूलबार पूरी तरह से अनुकूलन योग्य है (जैसे कि सभी इंटरफ़ेस तत्वों को स्वचालित रूप से मावो द्वारा एप्लिकेशन में जोड़ा जाता है): आप इसकी स्थिति, उपस्थिति बदल सकते हैं, इस पर उपलब्ध बटनों का एक सेट निर्दिष्ट कर सकते हैं, या इसे अपना एचटीएमएल तत्व भी निर्दिष्ट कर सकते हैं।

थोड़ी देर बाद हम मावो टूलबार के ऐसे अनुकूलन के विकल्पों में से एक देखेंगे। इस बीच, यदि आप वर्णित विशेषताओं से थोड़ा अधिक परिचित होना चाहते हैं, तो आधिकारिक वेबसाइट पर प्रलेखन पढ़ें।

खैर, यह मोड को संपादित करने और उसे जानने के लिए स्विच करने का समय है। एडिट बटन पर क्लिक करें।

क्या बदल गया है? बटन का नाम बदल गया है: अब इसका नाम एडिटिंग है । यह हमारे लिए एक दृश्य संकेत है: ध्यान, हम संपादन मोड में हैं। पाठ ("शब्द या वाक्यांश" या "अनुवाद") के साथ किसी भी अनुच्छेद पर मँडरा करने की कोशिश करें। मावो हमें एक पीले रंग की हाइलाइट के साथ बताता है कि आप इस टुकड़े पर क्लिक कर सकते हैं और इसे संपादित कर सकते हैं।

आगे बढ़ो! टेक्स्ट पर क्लिक करें और उसमें बदलाव करें। यह बहुत अच्छा नहीं है ?! हम पृष्ठ की सामग्री को सीधे ब्राउज़र विंडो में संपादित कर सकते हैं!

अभ्यास उत्कृष्टता का मार्ग है!

मान लीजिए कि शब्द (या वाक्यांश) का अध्ययन किया जा रहा है और इसके अनुवाद के अलावा, हम चाहते हैं कि कार्ड में एक वाक्य में इस शब्द (वाक्यांश) के उपयोग का एक उदाहरण शामिल हो। लेकिन हम जानते हैं कि इस तरह से विदेशी शब्दों को सिखाया जाना चाहिए - संदर्भ में, है ना?

मिसिंग तत्व को जोड़कर एप्लिकेशन को सुधारें और इसे एक नाम दें, उदाहरण के लिए, उदाहरण ।

Mv- एकाधिक विशेषता

फिलहाल, हमारे आवेदन में केवल एक कार्ड है। सच कहूँ तो, यह बहुत उपयोगी नहीं है! एक पूर्ण आवेदन के लिए, हमारे पास नए कार्ड जोड़ने, अनावश्यक लोगों को हटाने, साथ ही साथ हमें सूट करने वाले तरीकों को पुनर्व्यवस्थित करने की क्षमता की कमी है। लेकिन हम यह सब कैसे महसूस कर सकते हैं?

हाथ से याद करो!

https://codepen.io/dsharabin/pen/PoYxNmN

एप्लिकेशन डेवलपर्स के रूप में, हम बस इसके HTML कोड में अधिक <लेख> तत्व जोड़कर नए कार्ड जोड़ सकते हैं। लेकिन फिर उपयोगकर्ता अपने आधार पर कार्ड कैसे जोड़ और हटा सकता है?

सौभाग्य से, मावो में ऐसा कुछ है जो हमें एप्लिकेशन को एक या दो बार उचित कार्यक्षमता जोड़ने की अनुमति देगा - एमवी-मल्टीपल विशेषता। इस विशेषता का उपयोग करते हुए, हम मावो को बताते हैं कि एप्लिकेशन के किन तत्वों को प्रचारित किया जा सकता है। एमवी-मल्टीपल विशेषता उस तत्व को बदल देती है, जिसे तत्वों के संग्रह ( संग्रह ) में जोड़ा जाता है। उसी समय, मावो ऐसे संग्रह के तत्वों पर नियंत्रण जोड़ देगा, जिसके साथ आप संग्रह में नए तत्व जोड़ सकते हैं, मौजूदा लोगों को हटा सकते हैं और संग्रह के तत्वों को खींचकर और गिराकर व्यवस्थित कर सकते हैं। और हाँ, इन नियंत्रणों की शैली भी पूरी तरह से अनुकूलन योग्य है!

सफेद खरगोश का पालन करें!

यदि आप गुण विशेषता के बिना किसी तत्व में एमवी-मल्टीपल विशेषता जोड़ते हैं , तो मावो स्वचालित रूप से इस स्थिति को ठीक करेगा: संपत्ति को मूल्य संग्रह (या संग्रह 2 , संग्रह 3 नाम की विशिष्टता को संरक्षित करने के लिए) के साथ जोड़ें।

हालाँकि, एप्लिकेशन नाम के मामले में, मैं सलाह देता हूं कि आप संग्रह के साथ गुण विशेषता का उपयोग करें: यह HTML डेटा में परिवर्तन करते समय एप्लिकेशन डेटा की सुरक्षा की गारंटी देता है।

खैर, आइए एप्लिकेशन के <लेख> तत्व के लिए mv-multiple विशेषता को जोड़कर हमारे लोन फ्लैशकार्ड को कार्ड के पूरी तरह से संपादन योग्य संग्रह में बदल दें (ध्यान दें कि हमने संपत्ति विशेषता भी जोड़ी थी):

 <article property="flashcard" mv-multiple> ... </article>

सफेद खरगोश का पालन करें!

Mavo आपको mv-multiple विशेषता के मान के रूप में संपत्ति का नाम निर्दिष्ट करने की अनुमति देता है। इस प्रकार, हम कार्डों के संग्रह का थोड़ा कम वर्णन कर सकते हैं: <article mv-multiple="flashcard"> ।

ध्यान दें कि एमवी-मल्टीपल विशेषता को प्रचारित किए जा रहे आइटम में जोड़ा जाना चाहिए , न कि उस कंटेनर में जिसमें संग्रह स्थित है। एक बहुत ही सामान्य गलती है जब डेवलपर्स <ul mv-multiple> बजाय <ul mv-multiple> लिखते हैं। और पहली बार में, ऐसी गलती का पता लगाना मुश्किल है। उदाहरण के लिए, आवेदन में उपयोग की जाने वाली शैलियाँ स्पष्ट करती हैं।

अब संपादन मोड पर स्विच करने के लिए स्वतंत्र महसूस करें। ध्यान दें कि कार्ड के नीचे Add flashcard बटन दिखाई दिया? चलो उसके लिए एक परीक्षण ड्राइव की व्यवस्था करें: उसकी मदद से कुछ नए कार्ड जोड़ें। यह सिर्फ कुछ अविश्वसनीय है: हम गतिशील रूप से एप्लिकेशन में नए कार्ड जोड़ सकते हैं, भले ही इसके स्रोत कोड में कोई समान तत्व न हों!

सफेद खरगोश का पालन करें!

ध्यान दें कि संपत्ति विशेषता को <लेख> तत्व में जोड़ने से इसकी सामग्री संपादन योग्य नहीं बन गई? मावो इस तत्व को एक समूह मानता है। यह तब होता है जब गुण विशेषता को एक ऐसे तत्व में जोड़ा जाता है जिसमें स्वयं के अंदर अन्य गुण होते हैं, अर्थात संपत्ति विशेषता वाले तत्व।

लेकिन यह सब नहीं है! किसी भी कार्ड पर होवर करें। आप देखते हैं कि कार्ड के ऊपरी दाएं कोने में, मावो ने तीन नए बटन जोड़े (बाएं से दाएं): कार्ड को हटाने के लिए, एक नया जोड़ें और मौजूदा एक को स्थानांतरित करें। और इनमें से किसी भी बटन पर अपने माउस को मँडराते हुए, आप आसानी से मावो द्वारा उत्पन्न बैकलाइट से अनुमान लगा सकते हैं कि वे किस कार्ड का उल्लेख करते हैं।

सुविधाजनक है, है ना?

सफेद खरगोश का पालन करें!

संग्रह आइटम के साथ काम करने के लिए मावो-जनरेट किए गए बटन पूरी तरह से अनुकूलन योग्य हैं । उदाहरण के लिए, आप संबंधित HTML तत्व में mv-drag-handle क्लास को जोड़कर एक संग्रह आइटम को स्थानांतरित करने के लिए अपना खुद का बटन बना सकते हैं।

यह भी ध्यान रखें कि आप कीबोर्ड का उपयोग करके संग्रह आइटम के साथ काम करने के लिए सभी बटन के साथ बातचीत कर सकते हैं। उदाहरण के लिए, कार्ड के मूव बटन पर इनपुट फ़ोकस रखें और संग्रह के भीतर कार्ड की स्थिति बदलने के लिए कर्सर कुंजियों का उपयोग करें।

एमवी-भंडारण विशेषता

हाथ से याद करो!
https://codepen.io/dsharabin/pen/WNeYwpj

अब जब भविष्य के अनुप्रयोग का मुख्य इंटरफ़ेस विकसित हो गया है, तो मैं निम्नलिखित करने का प्रस्ताव करता हूं:

संपादन मोड पर स्विच करें (यदि आपने पहले ऐसा नहीं किया है)।
उनमें से प्रत्येक पर शब्द और इसके अनुवाद का संकेत देते हुए कुछ कार्ड जोड़ें।
रीडिंग मोड पर लौटें।
और ... पेज को रिफ्रेश करें।

आउच! हमारे द्वारा दर्ज किया गया सारा डेटा कहां गया? क्या मावो उन्हें बचाने वाला नहीं था? क्या गलत हुआ? हम कहां चूक गए?

केवल शांत! वास्तव में, हमने मावो से कभी नहीं कहा कि वह संपादन योग्य डेटा को बचाए। इसके अलावा, हमने यह नहीं बताया कि वास्तव में उन्हें कहाँ बचाना चाहिए।

तो चलिए अब इसे करते हैं। इसके लिए मावो की एक विशेष विशेषता है - एमवी-स्टोरेज । यह केवल यह पता लगाने के लिए रहता है कि यह किन मूल्यों को ले सकता है। और यह पता चला है कि मावो हमें व्यापक संभावनाएं प्रदान करता है। और प्लगइन्स - भी बड़ा खुला!

हमारे एप्लिकेशन को ब्राउज़र के स्थानीय भंडारण में डेटा सहेजने दें - लोकलस्टोरेज । यह मावो में उपलब्ध सबसे आसान विकल्प है और हमारे पहले ऐप के लिए बहुत अच्छा है। हमें बस इतना करना है कि एप्लिकेशन के मूल तत्व के साथ mv- स्टोरेज विशेषता को मूल तत्व में जोड़ें (यह mv-app विशेषता के साथ तत्व का नाम है, याद रखें?)।

 <main mv-app="flashcards" mv-storage="local"> ... </main>

अब मावो टूलबार पर एक नज़र डालें। नया सहेजें बटन नोट किया गया? अपने प्रत्यक्ष उद्देश्य के अलावा - आवेदन में परिवर्तन को बचाने के लिए - इसका एक और उपयोगी कार्य है। डेटा को फिर से संपादित करने का प्रयास करें। ध्यान दें कि सेव बटन अब हाइलाइट हो गया है । अपने माउस और मावो के साथ इस पर होवर करें उस डेटा को उजागर करेंगे जिसे आपने संपादित किया था लेकिन सहेजा नहीं था!

महान, हुह?

सेव बटन पर क्लिक करें और पेज को रिफ्रेश करें (रीडिंग मोड में स्विच करना आवश्यक नहीं है)। अच्छा, अब आपका डेटा बच गया है? बहुत बढ़िया! हम एक पूर्ण वेब अनुप्रयोग के करीब एक कदम हैं।

Mv-autosave विशेषता

अब हमारा एप्लिकेशन काम करता है ताकि उपयोगकर्ता को जब भी एप्लिकेशन में किए गए परिवर्तनों को सहेजने की आवश्यकता हो, तो उसे सहेजें बटन पर क्लिक करना होगा। यह महत्वपूर्ण जानकारी को बचाने के दृष्टिकोण से सही है, लेकिन अक्सर उपयोगकर्ता इसे करना भूल जाते हैं। कैसे हो सकता है? अगर केवल हमारे आवेदन कुछ अंतराल पर स्वचालित रूप से डेटा बचा सकता है! "और क्या, यह वास्तव में मावो की मदद से किया जा सकता है?" - आप पूछें। और मैं खुशी और गर्व के साथ जवाब दूंगा कि हां, यह संभव है!

इसलिए, उपयोगकर्ता को डेटा द्वारा किए गए परिवर्तनों को स्वचालित रूप से सहेजने के लिए एप्लिकेशन को सिखाने के लिए, हम mv-autosave विशेषता का उपयोग कर सकते हैं। आपको इसे एप्लिकेशन के मूल तत्व में जोड़ना होगा। इस विशेषता का मान उस सेकंड की संख्या है जिसे उपयोगकर्ता द्वारा उस समय तक डेटा से परिवर्तन करना होगा जब तक वे एप्लिकेशन द्वारा सहेजे नहीं जाते हैं। हम अपने आवेदन में उचित बदलाव करेंगे:

 <main mv-app="flashcard" mv-storage="local" mv-autosave="3"> ... </main>

सफेद खरगोश का पालन करें!

mv-autosave="3" विशेषता मावो को हर तीन सेकंड में इन आंकड़ों में किए गए परिवर्तनों को सहेजने का निर्देश देती है। सेव के बीच इस तरह की देरी की उपस्थिति मौलिक रूप से महत्वपूर्ण हो जाती है यदि डेटा को बचाने के लिए चुनी गई सेवा (बैकेंड) उनके परिवर्तनों का इतिहास संग्रहीत करती है (उदाहरण के लिए, GitHub और Dropbox )। इस तरह की देरी की अनुपस्थिति परिवर्तनों के इतिहास को बस बेकार कर देगी।

मावो को तुरंत परिवर्तनों को बचाने के लिए मजबूर करने के लिए, आप mv-autosave="0" विशेषता या सिर्फ mv-autosave सेट कर सकते हैं। इसी समय, सेव बटन को हटा दिया जाएगा (अनावश्यक के रूप में) मावो टूलबार से।

एप्लिकेशन में किए गए परिवर्तनों को देखने और उनका मूल्यांकन करने के लिए, एक बार फिर से किसी भी कार्ड पर डेटा को अपडेट करें और सेव बटन पर ध्यान दें। क्या आपने गौर किया है? सबसे पहले इसे हाइलाइट किया गया था, लेकिन तीन सेकंड के बाद यह निकल गया, यह दर्शाता है कि एप्लिकेशन में कोई सहेजा नहीं गया डेटा था। अब सभी परिवर्तन स्वतः सहेजे जाते हैं!

इस प्रकार, हमारे आवेदन का मुख्य भाग अब इस तरह दिखता है:

 <main mv-app="flashcards" mv-storage="local" mv-autosave="3"> <article property="flashcard" mv-multiple>  <p property="source">  </p>  <p property="translation"></p> </article> </main>

अभ्यास उत्कृष्टता का मार्ग है!

हम लगभग हमारे आवेदन के अल्फा संस्करण के साथ कर रहे हैं। राह-राह! अब इसे और बेहतर बनाने की आपकी बारी है। चिंता मत करो! आप उस कार्य को पूरा करने के लिए सभी आवश्यक ज्ञान से लैस हैं जो मैं आपको प्रदान करूंगा।

आवेदन में सुधार करें ताकि एक सामान्य विषय द्वारा एकजुट कार्डों को समूहीकृत किया जा सके। उदाहरण के लिए, एक समूह में कपड़ों से संबंधित सभी शब्द शामिल हैं, दूसरे में - व्यवसायों के नाम, तीसरे में - भोजन के नाम, आदि।

युक्तियां!

समस्या को हल करने के कई तरीके हैं। यह आपको तय करना है कि किस रास्ते को चुनना है और किस रास्ते जाना है। लेकिन मैं चाहता हूं कि आप कुछ सवालों के जवाब के बारे में सोचें जो आपको समाधान खोजने में मदद कर सकते हैं।

HTML एलिमेंट को आप ग्रुपिंग एलिमेंट (समूह) के रूप में उपयोग करेंगे? यह एप्लिकेशन के उपयोगकर्ताओं के लिए सुविधाजनक होगा यदि कार्ड के समूह को एक नाम ( विषय नाम ) दिया जा सकता है, और यह भी कि यदि इस समूह को इसके शीर्षक के लिए आवश्यक हो तो कम से कम किया जा सकता है।
आप चयनित तत्व में कौन सी विशेषता जोड़ेंगे (जब तक कि, निश्चित रूप से, आप कुछ नहीं जोड़ते हैं)। क्या यह आइटम एक संपत्ति या संग्रह होगा ?
क्या एप्लिकेशन के उपयोगकर्ताओं के पास नए कार्ड समूहों को जोड़ने , अनावश्यक लोगों को हटाने , दोनों समूहों को स्वयं स्थानांतरित करने और विभिन्न समूहों के बीच कार्ड बनाने का अवसर होगा?

वैसे, आप यह तय कर सकते हैं कि अलग-अलग तत्वों का उपयोग करके समूहों में कार्ड का संयोजन आपकी विधि नहीं है। और यह सामान्य है। हो सकता है कि आप केवल उन टैग ( हैशटैग ) को जोड़ना चाहते हैं जो कार्ड के विषय के अनुरूप हों। और यह भी एक महान निर्णय होगा!

"इसमें अपना हाथ लाने के लिए" और मावो और इसकी क्षमताओं के बारे में थोड़ा और जानने के लिए, इन दोनों समाधानों को लागू करें।

एमवी-बार विशेषता

हम अपने आवेदन की कार्यक्षमता का विस्तार करना जारी रखेंगे। हमने इसे कॉन्फ़िगर किया है ताकि उपयोगकर्ता डेटा ब्राउज़र के स्थानीय भंडारण में संग्रहीत हो। लेकिन हमारा एप्लिकेशन एकल-उपयोगकर्ता बना हुआ है: उपयोगकर्ता अपने कार्ड अन्य उपयोगकर्ताओं के साथ साझा नहीं कर सकते हैं। और ऐसा अवसर मिलना बहुत अच्छा होगा! और किसी कंपनी में विदेशी भाषा सीखना ज्यादा मजेदार है, है ना?

क्या मावो में एक तरीका है जो उपयोगकर्ताओं को अपने कार्ड को आवेदन से निर्यात करने और किसी और को इसमें आयात करने की अनुमति देता है? हम भाग्यशाली हैं! और यह कार्यक्षमता मावो में समर्थित है, जैसा कि वे कहते हैं, "बॉक्स से बाहर"। बेशक, यह हमारे एप्लिकेशन को शब्द के विहित अर्थ में बहु-उपयोगकर्ता नहीं बना देगा, लेकिन इस तरह की कार्यक्षमता की उपस्थिति पहले से ही इस तरह के एक सरल अनुप्रयोग के लिए बहुत कुछ है, आपको सहमत होना चाहिए।

हाथ से याद करो!

https://codepen.io/dsharabin/pen/ZEzmWBr

ऐसे कार्यों के लिए, मावो में एमवी-बार विशेषता है, जिसके साथ आप यह निर्दिष्ट कर सकते हैं कि मावो टूलबार पर कौन से बटन प्रदर्शित किए गए हैं (यदि किसी भी बटन की आवश्यकता है)। आमतौर पर, इस विशेषता को एप्लिकेशन के मूल तत्व में जोड़ा जाता है। बटन खुद बहुत तार्किक (अंग्रेजी में उनके नाम के संदर्भ में) पहचानकर्ता हैं। यहाँ उनमें से कुछ हैं: संपादित करें, आयात, निर्यात ।

चूंकि हम केवल मावो टूलबार पर पहले से ही सेट में बटन जोड़ना चाहते हैं, इसलिए हम तथाकथित सापेक्ष सिंटैक्स का उपयोग कर सकते हैं। यह सिंटैक्स हमें डिफ़ॉल्ट सेट से बटन जोड़ने और हटाने की अनुमति देता है, जिसमें स्पष्ट रूप से इसमें सभी बटन सूचीबद्ध होते हैं। हमारे मामले में हमारे लिए करने के लिए बस इतना ही काफी है कि कीवर्ड के साथ mv-bar विशेषता का मान शुरू करें, और फिर हमारे द्वारा आवश्यक बटनों के पहचानकर्ताओं को सूचीबद्ध करें (एक स्थान के साथ):

 <main mv-app="flashcards"   mv-storage="local"   mv-autosave="3"   mv-bar="with import export">   ... </main>

अभ्यास उत्कृष्टता का मार्ग है!

आपके द्वारा अभी जोड़े गए कार्यक्षमता के लिए एक टेस्ट ड्राइव की व्यवस्था करें: एप्लिकेशन में कुछ कार्ड जोड़ें और उन्हें एक फ़ाइल में निर्यात करें। एप्लिकेशन से सभी कार्ड निकालें, और फिर इसमें पहले से निर्यात किए गए कार्ड आयात करें।

अभिव्यक्ति। MavoScript

, « », : « ?!» - . ? .

«» , - Mavo.

, (, , ) . , , property . — , .

, , , Mavo ( HTML-). . : [] . . , - , .

सफेद खरगोश का पालन करें!

, Mavo, MavoScript . ( Microsoft® Excel, Apple Numbers Google Sheets) , , . .

Mavo MavoScript , , , : , , , , .

, MavoScript , .

Mavo MavoScript .

हाथ से याद करो!

https://codepen.io/dsharabin/pen/rNBQeMv

. , [source] flashcard . , source translation :

 ... <p property="source">  </p> [source] <p property="translation"></p> ...

? , , source . ? !

. source . , , ? [source] , , source , : , . ?!

, , , — . क्यों? [source] , , — source . - .

[source] flashcard , ? इस तरह:

 ... [source] <article property="flashcard" mv-multiple>  ... </article> ...

? , . , source (!) . , , . ?

. ? , , source ? , , source translation . ? : [source] [flashcard] . :

 ... [flashcard] <article property="flashcard" mv-multiple>  ... </article> ...

, ? , — . ( (!)).

, , ( , , ), , . , Mavo . MavoScript count() , .

सफेद खरगोश का पालन करें!

MavoScript — . , .

— . , .

, , , .
.

, count() . , :

 ... <span>[count(flashcard)] .</span> <article property="flashcard" mv-multiple> ... </article> ...

, , — !

अभ्यास उत्कृष्टता का मार्ग है!

, Mavo … . , , - . , .

, , ( ).

!

, , . where filter() .

, , . : , ? , .

( , ) — .

हाथ से याद करो!

https://codepen.io/dsharabin/pen/WNeYwxR

, : . , ? , :

, , (), — ;
, , (), , , .

« , JavaScript?» — . हां। , Mavo — ?!

, , , :

 ... <article property="flashcard" mv-multiple> ... <section>  <h2> </h2>  <button> </button>  <button> </button> </section> </article> ...

mv-action

Mavo , , — ( custom actions ).

, mv-action . , . , — .

सफेद खरगोश का पालन करें!

mv-action <form> , .

mv-action . , MavoScript , : add(), set(), move() delete() .

, , , , .

: Mavo mv-action . , . , mv-action="" , mv-action="[]" . , , , , .

, . : . move() . , — () . , , 0 .

, : , . . . :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, 0)"> </button> ... </article> ...

, mv-action flashcard . .

, . , , , ?

, : , . , , (). , , , . ?

, . : , — flashcard — . flashcard . - :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, count(flashcard))">      </button> ... </article> ...

! .

?

. <meta>

, , , [count(flashcard)] , flashcard . , flashcard . , !

, [count(flashcard)] flashcard - , . — flashcard . Mavo , , ( computed properties ).

हाथ से याद करो!

https://codepen.io/dsharabin/pen/NWKENNb

, , HTML-. HTML-, <meta> : <meta property="" content="[]"> . : <meta> , .

सफेद खरगोश का पालन करें!

, , , .

flashcardCount . , flashcard ( ):

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple>  ... </article> ...

: , . :

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, flashcardCount)">      </button> </article> ...

! . बधाई!

अभ्यास उत्कृष्टता का मार्ग है!

— $all .

$all , , . , . $all flashcardCount . ? क्यों?

, . , , ( ) . .

निष्कर्ष

, -. JavaScript. , , -. , « ». .

, — , , , . , , , . , HTML- Mavo, :

( <head> ) JavaScript- CSS- Mavo.
mv-app .
, ( / , / ) , property .
mv-multiple , .
Mavo, , mv-storage .
, . , mv-autosave .

, :
Mavo ( Mavo ). mv-bar , , , .
(expressions) ( ) (property) . ( ) , . Mavo , MavoScript .
(custom actions) . mv-action .
(computed properties) — , . , <meta> .

. ? , . . , , , (, ). , . ! . - — ! ? 17 — ( « » )!

, Mavo, — , . Mavo . : Mavo -, .

Mavo . -, . कैसे? :

Mavo, , — Mavo ;
, , , ;
Mavo, , , , — ;
, Mavo Twitter , , , , «» (, Gitter Mavo);
, Mavo — !

Mavo!

.

, ( Lea Verou ), ( ), : , - . , !

( James Moore ). , « JavaScript » Udemy , , «» . !

प्रोग्रामिंग के बिना एक इंटरैक्टिव वेब अनुप्रयोग? आराम से! अपनी बाहों में मावो