पुस्तक "एक्सप्रेसिव जावास्क्रिप्ट। आधुनिक वेब प्रोग्रामिंग। तीसरा संस्करण

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

मारेन हावेर्बके - व्यवसायी। अभ्यास और प्रशिक्षण परियोजनाओं के माध्यम से उदाहरणों की एक भीड़ के माध्यम से अनुभव प्राप्त करें और भाषा सीखें। सबसे पहले, आप जावास्क्रिप्ट भाषा की संरचना, प्रबंध संरचनाओं, कार्यों और डेटा संरचनाओं से परिचित होंगे, फिर त्रुटि से निपटने और बग फिक्स, मॉड्यूलरिटी और एसिंक्रोनस प्रोग्रामिंग का अध्ययन करेंगे, और फिर ब्राउज़र प्रोग्रामिंग पर आगे बढ़ेंगे।

इस पुस्तक की समीक्षा करें

यह पुस्तक तीन बड़े भागों में विभाजित है। पहले 12 अध्याय जावास्क्रिप्ट भाषा पर चर्चा करते हैं। अगले सात अध्याय ब्राउज़रों के बारे में हैं और उन्हें प्रोग्राम करने के लिए जावास्क्रिप्ट का उपयोग कैसे किया जाता है। अंत में, दो अध्याय Node.js, एक और जावास्क्रिप्ट प्रोग्रामिंग वातावरण के लिए समर्पित हैं।

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

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

पहली परियोजना के अध्याय के बाद, पुस्तक का भाषा भाग जारी रखा जाएगा - निम्नलिखित अध्याय त्रुटियों का पता लगाने और सही करने के लिए समर्पित हैं, नियमित अभिव्यक्तियाँ (पाठ के साथ काम करने के लिए एक महत्वपूर्ण उपकरण), प्रतिरूपकता (जटिलता के खिलाफ एक और बचाव) और अतुल्यकालिक प्रोग्रामिंग (कुछ के लिए पिछले घटनाओं के साथ काम करना) समय)। पुस्तक का पहला भाग दूसरे मसौदे के अध्याय द्वारा पूरा किया गया है।

दूसरा भाग, अध्याय 19 के माध्यम से 13, उन उपकरणों का वर्णन करता है, जिनके लिए जावास्क्रिप्ट-सक्षम ब्राउज़र का उपयोग होता है। आप सीखेंगे कि स्क्रीन पर तत्वों को कैसे प्रदर्शित किया जाए (अध्याय 14 और 17), उपयोगकर्ता इनपुट पर जवाब दें (अध्याय 15) और उन्हें नेटवर्क पर साझा करें (अध्याय 18)। इस भाग में परियोजनाओं के दो अध्याय भी हैं।

उसके बाद, Node.js का वर्णन अध्याय 20 में किया गया है, और एक छोटी साइट निर्दिष्ट उपकरण का उपयोग करके अध्याय 21 में बनाई गई है।

अंश। घट के साथ योग

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

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

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

function reduce(array, combine, start) { let current = start; for (let element of array) { current = combine(current, element); } return current; } console.log(reduce([1, 2, 3, 4], (a, b) => a + b, 0)); // → 10 

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

 console.log([1, 2, 3, 4].reduce((a, b) => a + b)); // → 10 

सबसे पात्रों के साथ फ़ॉन्ट खोजने के लिए कम (दो बार) का उपयोग करने के लिए, हम इस तरह से कुछ लिख सकते हैं:

 function characterCount(script) { return script.ranges.reduce((count, [from, to]) => { return count + (to — from); }, 0); } console.log(SCRIPTS.reduce((a, b) => { return characterCount(a) < characterCount(b) ? b : a; })); // → {name: "Han", ...} 

CharacterCount फ़ंक्शन अपने आकारों के योग की गणना करके इस फ़ॉन्ट को दी गई सीमाओं को कम कर देता है। कटौती समारोह के मापदंडों की सूची में विनाशकारी के उपयोग पर ध्यान दें। फिर दूसरा कॉल कम करने के लिए पिछले परिणाम का उपयोग करता है सबसे बड़ा फ़ॉन्ट खोजने के लिए, बार-बार दो फोंट की तुलना करना और बड़े को वापस करना।

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

composability

आइए विचार करें: हम उच्च-क्रम के कार्यों के बिना पिछले उदाहरण (सबसे बड़ा फ़ॉन्ट ढूंढें) को फिर से कैसे लिख सकते हैं? निम्नलिखित कोड ज्यादा खराब नहीं है।

 let biggest = null; for (let script of SCRIPTS) { if (biggest == null || characterCount(biggest) < characterCount(script)) { biggest = script; } } console.log(biggest); // → {name: "Han", ...} 

कई अतिरिक्त बाइंडिंग दिखाई दिए, और यह कार्यक्रम चार लाइन लंबा हो गया। लेकिन यह कोड अभी भी बहुत स्पष्ट है।

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

 function average(array) { return array.reduce((a, b) => a + b) / array.length; } console.log(Math.round(average( SCRIPTS.filter(s => s.living).map(s => s.year)))); // → 1188 console.log(Math.round(average( SCRIPTS.filter(s => !s.living).map(s => s.year)))); // → 188 

इस प्रकार, यूनिकोड में मृत भाषाओं की लिपियाँ औसतन जीवित भाषाओं की लिपियों की तुलना में अधिक पुरानी हैं।

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

इस गणना को एक बड़े चक्र के रूप में भी दर्शाया जा सकता है।

 let total = 0, count = 0; for (let script of SCRIPTS) { if (script.living) { total += script.year; count += 1; } } console.log(Math.round(total / count)); // → 1188 

लेकिन इस कोड में यह समझना अधिक कठिन है कि क्या और कैसे गणना की जाती है। और चूंकि मध्यवर्ती परिणाम सुसंगत मूल्यों के रूप में प्रस्तुत नहीं किए जाते हैं, इसलिए औसत से अलग कार्य करने के लिए बहुत अधिक काम करना होगा।

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

तार और चरित्र कोड

डेटा सेट का एक उपयोग यह निर्धारित करना है कि किसी दिए गए पाठ को किस फ़ॉन्ट में टाइप किया गया है। आइए एक कार्यक्रम को देखें जो ऐसा करता है।

याद रखें कि प्रत्येक फ़ॉन्ट के लिए वर्ण कोड पर्वतमाला का एक सरणी है। इसलिए, वर्ण कोड को जानकर, हम संबंधित फ़ंक्शन का उपयोग संबंधित फ़ॉन्ट (यदि कोई हो) खोजने के लिए कर सकते हैं:

 function characterScript(code) { for (let script of SCRIPTS) { if (script.ranges.some(([from, to]) => { return code >= from && code < to; })) { return script; } } return null; } console.log(characterScript(121)); // → {name: "Latin", ...} 

कुछ विधि एक और उच्चतर क्रम फ़ंक्शन है। यह एक परीक्षण फ़ंक्शन लेता है और रिपोर्ट करता है कि क्या यह सरणी के किसी भी तत्व के लिए सही है।

लेकिन स्ट्रिंग के रूप में हमें कैरेक्टर कोड कैसे मिलते हैं?

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

आज यह आमतौर पर स्वीकार किया जाता है कि UTF-16 एक बुरा विचार था। यह त्रुटियों का निर्माण करने के लिए बनाया गया लगता है। आप आसानी से एक प्रोग्राम लिख सकते हैं जिसके लिए कोड इकाइयाँ और अक्षर एक समान हैं। और अगर आपकी मूल भाषा उन वर्णों का उपयोग नहीं करती है जो दो कोड इकाइयों पर कब्जा करते हैं, तो यह कार्यक्रम ठीक काम करेगा। लेकिन, जैसे ही कोई कम आम वर्णमाला के लिए इस तरह के कार्यक्रम का उपयोग करने की कोशिश करता है, उदाहरण के लिए, चीनी पात्रों के लिए, यह तुरंत टूट जाएगा। सौभाग्य से, इमोटिकॉन्स की उपस्थिति के बाद, चरित्र एन्कोडिंग के लिए हर जगह दो कोड इकाइयों का उपयोग किया जाने लगा, और ऐसी समस्याओं को हल करने का बोझ अधिक निष्पक्ष रूप से वितरित किया गया।

दुर्भाग्य से, जावास्क्रिप्ट स्ट्रिंग्स के साथ स्पष्ट संचालन, जैसे कि लंबाई संपत्ति के माध्यम से अपनी लंबाई प्राप्त करना और वर्ग कोष्ठक के साथ अपनी सामग्री तक पहुंचने के लिए, केवल कोड इकाइयों के साथ सौदा करना।



जावास्क्रिप्ट charCodeAt विधि पूर्ण वर्ण कोड, लेकिन एक कोड इकाई नहीं लौटाती है। बाद में दिखाई देने वाला codePointAt पद्धति पूर्ण यूनिकोड वर्ण लौटाती है। इसलिए हम इसे स्ट्रिंग से वर्ण प्राप्त करने के लिए उपयोग कर सकते हैं। लेकिन codePointAt को दिया गया तर्क अभी भी कोड इकाइयों के अनुक्रम में एक सूचकांक है। इस प्रकार, एक स्ट्रिंग में सभी वर्णों पर पुनरावृति करने के लिए, हमें अभी भी इस सवाल को हल करने की आवश्यकता है कि क्या एक या दो कोड इकाइयाँ एक वर्ण पर कब्जा करती हैं।

पिछले अध्याय में, मैंने उल्लेख किया है कि लूप के लिए / स्ट्रिंग के लिए भी इस्तेमाल किया जा सकता है। CodePointAt की तरह, इस प्रकार का लूप उस समय प्रकट हुआ जब प्रोग्रामर को स्पष्ट रूप से UTF-16 की समस्याओं का एहसास हुआ। जब आप इस लूप को एक स्ट्रिंग पर लागू करते हैं, तो यह वास्तविक वर्ण देता है, कोड इकाइयाँ नहीं।



यदि आपके पास एक चरित्र है (जो एक या दो कोड इकाइयों का एक स्ट्रिंग है), तो उसका कोड प्राप्त करने के लिए, आप codePointAt (0) का उपयोग कर सकते हैं।

पाठ मान्यता

हमारे पास एक कैरेक्टरस्क्रिप्ट फ़ंक्शन है और एक लूप में पात्रों को सही ढंग से एन्यूमरेट करने का तरीका है। अगला चरण प्रत्येक फ़ॉन्ट से संबंधित वर्णों की संख्या की गणना करना है। यहाँ हमें एक गिनती अमूर्त की आवश्यकता है:

 function countBy(items, groupName) { let counts = []; for (let item of items) { let name = groupName(item); let known = counts.findIndex(c => c.name == name); if (known == -1) { counts.push({name, count: 1}); } else { counts[known].count++; } } return counts; } console.log(countBy([1, 2, 3, 4, 5], n => n > 2)); // → [{name: false, count: 2}, {name: true, count: 3}] 

काउंटबी फ़ंक्शन एक संग्रह (सब कुछ जो एक लूप के लिए / में सॉर्ट किया जा सकता है) को स्वीकार करता है और एक फ़ंक्शन जो किसी दिए गए तत्व के लिए समूह के नाम की गणना करता है। CountBy फ़ंक्शन ऑब्जेक्ट की एक सरणी देता है, जिनमें से प्रत्येक में समूह का नाम और इसके लिए पाए जाने वाले तत्वों की संख्या होती है।

यह फ़ंक्शन सरणियों के साथ काम करने की एक और विधि का उपयोग करता है - findIndex। यह विधि कुछ हद तक indexOf के समान है, लेकिन एक विशिष्ट मूल्य की खोज करने के बजाय, यह पहला मान पाता है जिसके लिए दिए गए फ़ंक्शन सही है। यदि आइटम नहीं मिला है, तो findIndex, जैसे indexOf, रिटर्न -1।

CountBy का उपयोग करते हुए, हम एक फ़ंक्शन लिख सकते हैं जो बताता है कि पाठ के इस टुकड़े में कौन से फ़ॉन्ट का उपयोग किया गया था।



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

प्रतिशत की गणना करने में सक्षम होने के लिए, हमें सबसे पहले फ़ॉन्ट से संबंधित कुल वर्ण प्राप्त करने की आवश्यकता है जिन्हें हम कम करने की विधि का उपयोग करके गणना कर सकते हैं। यदि ऐसा कोई वर्ण नहीं मिलता है, तो फ़ंक्शन एक विशिष्ट स्ट्रिंग लौटाता है। अन्यथा, यह गिनती के परिणामों को मानचित्र का उपयोग करके पठनीय तारों में परिवर्तित करता है, और फिर उन्हें जोड़कर उपयोग करता है।

सारांश

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

सरणियों के लिए, कई उपयोगी उच्च क्रम विधियाँ हैं। किसी विधि के माध्यम से लूप के लिए forEach विधि का उपयोग किया जा सकता है। फ़िल्टर विधि एक नया सरणी देता है जिसमें केवल ऐसे तत्व होते हैं जो विधेय फ़ंक्शन की स्थिति को संतुष्ट करते हैं। प्रत्येक तत्व के लिए एक फ़ंक्शन निष्पादित करके रूपांतरण रूपांतरण मानचित्र का उपयोग करके किया जाता है। किसी सरणी के सभी तत्वों को एक ही मान में संयोजित करने के लिए, आप कम उपयोग कर सकते हैं। कुछ विधि यह जांचती है कि क्या कोई तत्व किसी दिए गए विधेय कार्य से मेल खाता है या नहीं। अंत में, FindIndex विधि पहले तत्व की स्थिति का पता लगाती है जो विधेय से मेल खाती है।

»पुस्तक की अधिक जानकारी प्रकाशक की वेबसाइट पर पाई जा सकती है
» सामग्री
» अंश

फेरीवालों के लिए कूपन पर 25% की छूट - जावास्क्रिप्ट
पुस्तक के पेपर संस्करण के भुगतान पर, ई-मेल द्वारा एक इलेक्ट्रॉनिक पुस्तक भेजी जाती है।