सोपे जावास्क्रिप्ट पेमेंट फॉर्म समाविष्ट करणे. JavaScript मध्ये फॉर्म प्रमाणीकरण. अधिक जटिल फॉर्म

इतर मॉडेल 10.05.2019

इतर मॉडेल

मी आजकाल विद्वत्तेवर आहे
मी माझ्या सेवेद्वारे तुमचा विश्वास जिंकेन,
तू मला एक प्रॉमिसरी नोट लिहा,
जेणेकरुन मला पेमेंटबद्दल शंका नाही.

मेफिस्टोफेल्स, गोएथेच्या फॉस्टमध्ये

HTTP वर वापरकर्त्याने प्रविष्ट केलेली माहिती प्रसारित करण्याचा एक मार्ग म्हणून मागील प्रकरणामध्ये फॉर्म थोडक्यात सादर केले गेले. ते JavaScript च्या आगमनापूर्वी वेबवर विकसित केले गेले होते, या अपेक्षेने की सर्व्हरशी परस्परसंवाद दुसऱ्या पृष्ठावर जाताना होतो.

परंतु त्यांचे घटक DOM चा भाग आहेत, बाकीच्या पृष्ठाप्रमाणे, आणि DOM घटक जे फॉर्म फील्डचे प्रतिनिधित्व करतात ते अनेक गुणधर्म आणि कार्यक्रमांना समर्थन देतात जे इतर घटक करत नाहीत. हे JavaScript प्रोग्राममधील इनपुट फील्ड पाहणे आणि हाताळणे आणि क्लासिक फॉर्ममध्ये कार्यक्षमता जोडणे किंवा अनुप्रयोग तयार करण्यासाठी आधार म्हणून फॉर्म आणि फील्ड वापरणे शक्य करते.

फील्ड

वेब फॉर्ममध्ये टॅगने वेढलेले कितीही इनपुट फील्ड असतात. HTML साध्या चालू/बंद चेकबॉक्सपासून ड्रॉप-डाउन सूची आणि मजकूर इनपुट फील्डपर्यंत अनेक भिन्न फील्ड ऑफर करते. हे पुस्तक सर्व प्रकारच्या फील्डवर तपशीलवार चर्चा करणार नाही, परंतु आम्ही त्यांचे थोडक्यात विहंगावलोकन देऊ.

अनेक प्रकारचे इनपुट फील्ड वापरतात. फील्डची शैली निवडण्यासाठी त्याची प्रकार विशेषता वापरली जाते. येथे काही सामान्य प्रकार आहेत:

मजकूर एक-ओळ मजकूर फील्ड संकेतशब्द मजकूर सारखाच असतो, परंतु इनपुट चेकबॉक्स ऑन/ऑफ स्विच रेडिओ भाग एकाधिक निवडी फाइलसह लपवतो वापरकर्त्याला त्याच्या संगणकावर फाइल निवडण्याची परवानगी देतो

फॉर्म फील्ड a मध्ये दिसणे आवश्यक नाही. ते पृष्ठावर कुठेही ठेवता येतात. अशा फील्डमधील माहिती सर्व्हरवर पास केली जाऊ शकत नाही (हे फक्त संपूर्ण फॉर्मसाठी शक्य आहे), परंतु जेव्हा आम्ही JavaScript प्रक्रिया करते असे फील्ड बनवतो, तेव्हा आम्हाला सहसा फील्डमधून सबमिट द्वारे माहिती पास करण्याची आवश्यकता नसते.

(मजकूर) (पासवर्ड) (चेकबॉक्स) (रेडिओ) (फाइल)

अशा घटकांसाठी JavaScript इंटरफेस प्रकारानुसार बदलतो. आम्ही त्या प्रत्येकाकडे थोड्या वेळाने पाहू.

मल्टी-लाइन टेक्स्ट फील्डचा स्वतःचा टॅग असतो. टॅगमध्ये क्लोजिंग टॅग असणे आवश्यक आहे आणि व्हॅल्यू विशेषता वापरण्याऐवजी त्या टॅगमधील मजकूर वापरणे आवश्यक आहे.

एक दोन तीन

आणि टॅगचा वापर फील्ड तयार करण्यासाठी केला जातो जो वापरकर्त्याला दिलेल्या पर्यायांपैकी एक निवडण्याची परवानगी देतो.

पॅनकेक्स कॅसरोल आइस्क्रीम

जेव्हा फील्डचे मूल्य बदलते, तेव्हा "बदल" इव्हेंट काढला जातो.

लक्ष केंद्रित करा

बहुतेक HTML दस्तऐवज घटकांच्या विपरीत, फॉर्म फील्ड कीबोर्ड फोकस प्राप्त करू शकतात. जेव्हा तुम्ही त्यांना क्लिक करता किंवा अन्यथा निवडता तेव्हा ते सक्रिय होतात, उदा. कीबोर्ड इनपुटचे मुख्य रिसीव्हर्स.

दस्तऐवजात मजकूर फील्ड असल्यास, फील्डमध्ये इनपुट फोकस असेल तरच तुम्ही टाइप केलेला मजकूर त्यात दिसून येईल. इतर फील्ड कीबोर्डला वेगळ्या पद्धतीने प्रतिसाद देतात. उदाहरणार्थ, वापरकर्त्याने प्रविष्ट केलेला मजकूर असलेल्या पर्यायावर जाण्याचा प्रयत्न करतो आणि पर्याय निवड वर आणि खाली हलवून बाण की ला प्रतिसाद देखील देतो.

तुम्ही फोकस आणि ब्लर पद्धती वापरून JavaScript वरून फोकस नियंत्रित करू शकता. पहिला फोकस DOM घटकाकडे हलवतो ज्यावरून तो कॉल केला जातो आणि दुसरा फोकस काढून टाकतो. document.activeElement चे मूल्य सध्याच्या फोकस प्राप्त करणाऱ्या घटकाशी संबंधित आहे.

दस्तऐवज .querySelector("इनपुट" .focus(); कन्सोल .लॉग(दस्तऐवज .activeElement.tagName); // → INPUT दस्तऐवज .querySelector("इनपुट" .blur(); कन्सोल .लॉग(दस्तऐवज .activeElement.tagName); // → मुख्य भाग

काही पृष्ठांसाठी वापरकर्त्याने फॉर्म फील्डपैकी एकावर त्वरित कार्य करणे आवश्यक आहे. JavaScript वापरून, दस्तऐवज लोड केल्यावर आम्ही या फील्डवर फोकस देऊ शकतो, परंतु HTML मध्ये देखील एक ऑटोफोकस विशेषता आहे जी समान परिणाम प्राप्त करते, परंतु ब्राउझरला आमचे हेतू काय आहेत ते सांगते. या प्रकरणात, ब्राउझर योग्य प्रकरणांमध्ये हे वर्तन ओव्हरराइड करू शकतो, जसे की जेव्हा वापरकर्त्याने इतरत्र फोकस हलवला असेल.

ब्राउझर पारंपारिकपणे वापरकर्त्याला टॅब की वापरून फोकस हलवण्याची परवानगी देतात. आम्ही tabindex विशेषता द्वारे नेव्हिगेशन ऑर्डरवर प्रभाव टाकू शकतो. उदाहरणामध्ये, दस्तऐवज मजकूर फील्डमधून ओके बटणावर फोकस हलवेल, आधी मदत लिंकमधून जाण्याऐवजी.

(मदत) ठीक आहे

डीफॉल्टनुसार, बहुतांश HTML घटक प्रकारांना फोकस मिळत नाही. परंतु घटकामध्ये टॅबइंडेक्स जोडल्याने फोकस प्राप्त करणे शक्य होते.

अक्षम फील्ड

सर्व फील्ड अक्षम केलेल्या विशेषतासह अक्षम केली जाऊ शकतात, जी DOM ऑब्जेक्ट घटकाची मालमत्ता म्हणून देखील अस्तित्वात आहे.

मी ठीक आहे, मी उत्तीर्ण झालो आहे

अक्षम फील्ड फोकस किंवा बदल स्वीकारत नाहीत आणि सक्रिय फील्डच्या विपरीत, ते सहसा राखाडी आणि फिकट दिसतात.

जेव्हा एखादा प्रोग्राम बटणावर किंवा इतर घटकांवर क्लिक करण्याच्या प्रक्रियेत असतो, ज्यासाठी सर्व्हरशी संवाद आवश्यक असू शकतो आणि बराच वेळ लागतो, तेव्हा क्रिया पूर्ण होईपर्यंत घटक अक्षम करणे चांगली कल्पना आहे. या प्रकरणात, जेव्हा वापरकर्ता संयम गमावतो आणि घटकावर पुन्हा क्लिक करतो, तेव्हा कृतीची पुनरावृत्ती होणार नाही.

एकूणच आकार

जेव्हा फील्ड घटकामध्ये समाविष्ट असते, तेव्हा त्याच्या DOM घटकामध्ये एक फॉर्म गुणधर्म असतो जो फॉर्मचा संदर्भ देतो. घटकामध्ये, या बदल्यात, एक घटक गुणधर्म असतो ज्यामध्ये फील्डचा ॲरे-सारखा संग्रह असतो.

फील्डचे नाव गुणधर्म सर्व्हरला पाठवल्यावर या फील्डचे मूल्य कसे निर्धारित केले जाईल हे निर्दिष्ट करते. फॉर्मच्या घटक गुणधर्मांमध्ये प्रवेश करताना ते गुणधर्म नाव म्हणून देखील वापरले जाऊ शकते, जे ॲरे सारखी ऑब्जेक्ट (संख्येद्वारे ऍक्सेस केलेले) आणि नकाशा (नावाद्वारे ऍक्सेस केलेले) दोन्ही म्हणून कार्य करते.

नाव: पासवर्ड: लॉगिन var फॉर्म = दस्तऐवज .querySelector("फॉर्म"); कन्सोल .log(form.elements.type); // → पासवर्ड कन्सोल .log(form.elements.password.type); // → पासवर्ड कन्सोल .log(form.elements.name.form == form); // → खरे

सबमिट करण्यासाठी समान प्रकार गुणधर्म असलेले बटण क्लिक केल्यावर फॉर्म सबमिट करते. फॉर्म फील्डमध्ये एंटर दाबल्याने समान परिणाम होतो.

फॉर्म सबमिट करणे म्हणजे सामान्यत: ब्राउझर GET किंवा POST विनंती वापरून, फॉर्मच्या क्रिया विशेषतामध्ये नियुक्त केलेल्या पृष्ठावर नेव्हिगेट करतो. परंतु त्यापूर्वी, "सबमिट" मालमत्ता काढून टाकली जाते. हे जावास्क्रिप्टमध्ये हाताळले जाऊ शकते आणि हँडलर ऑब्जेक्टवर इव्हेंट प्रिव्हेंट डीफॉल्ट कॉल करून डीफॉल्ट वर्तन रोखू शकतो.

मूल्य: सेव्ह var फॉर्म = दस्तऐवज .querySelector("फॉर्म"); form.addEventListener("सबमिट" , फंक्शन (इव्हेंट) ( कन्सोल .लॉग("सेव्हिंग व्हॅल्यू" , form.elements.value.value); event.preventDefault(); ));

"सबमिट" इव्हेंट्समध्ये अडथळा आणणे अनेक प्रकरणांमध्ये उपयुक्त आहे. आम्ही कोड लिहू शकतो जो प्रविष्ट केलेल्या मूल्यांची वैधता तपासतो आणि फॉर्म डेटा पास करण्याऐवजी त्वरित त्रुटी दर्शवतो. किंवा आम्ही डीफॉल्ट फॉर्म सबमिशन अक्षम करू शकतो आणि प्रोग्रामला इनपुट स्वतः हाताळू देऊ शकतो, उदाहरणार्थ पृष्ठ रीलोड न करता सर्व्हरवर डेटा पाठवण्यासाठी XMLHttpRequest वापरणे.

मजकूर फील्ड

टॅग्ज आणि टाईप मजकूर आणि पासवर्ड, तसेच टॅगसह फील्ड, एक सामान्य इंटरफेस आहे. त्यांच्या DOM घटकांमध्ये एक मूल्य गुणधर्म आहे ज्यामध्ये त्यांची वर्तमान सामग्री मजकूराची स्ट्रिंग म्हणून आहे. हे गुणधर्म मूल्यावर सेट केल्याने फील्डमधील सामग्री बदलते.

SelectStart आणि SelectEnd मजकूर फील्ड गुणधर्मांमध्ये कर्सरची स्थिती आणि मजकूर निवड याविषयी माहिती असते. जेव्हा काहीही निवडले जात नाही, तेव्हा त्यांचे मूल्य समान असते आणि कर्सरच्या स्थानाप्रमाणे असते. उदाहरणार्थ, 0 मजकूराची सुरूवात दर्शविते, 10 सूचित करते की कर्सर 10 व्या वर्णावर आहे. जेव्हा फील्डचा भाग निवडला जातो, तेव्हा गुणधर्मांना भिन्न मूल्ये असतात, म्हणजे निवडलेल्या मजकूराची सुरुवात आणि शेवट. तुम्ही या फील्डमध्ये मूल्य देखील प्रविष्ट करू शकता.

उदाहरणार्थ, कल्पना करा की तुम्ही खसेखेमवीबद्दल एक लेख लिहित आहात, परंतु तुम्हाला त्याचे नाव अचूकपणे लिहिण्यात समस्या येत आहे. खालील कोड टॅगला इव्हेंट हँडलर नियुक्त करतो जो, जेव्हा F2 दाबला जातो, तेव्हा “खासेखेमवी” स्ट्रिंग घालतो.

var textarea = दस्तऐवज .querySelector("textarea"); textarea.addEventListener("keydown" , function (event ) ( // F2 साठी की कोड 113 असेल तर (event.keyCode == 113 ) ( बदली निवड (textarea, "Khasekhemwy"); event.preventDefault(); ) )); फंक्शन रिप्लेस सिलेक्शन (फील्ड, शब्द) ( var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0 , from ) + word + field.value.slice(to); // पुट field.selectionStart = field.selectionEnd = from + word.length या शब्दानंतरचा कर्सर );

रिप्लेस सिलेक्शन फंक्शन सध्या निवडलेल्या मजकुराला निर्दिष्ट शब्दाने बदलते आणि कर्सरला त्या शब्दाच्या नंतरच्या स्थानावर हलवते जेणेकरून तुम्ही टाइप करणे सुरू ठेवू शकता.

मजकूर फील्डसाठी "बदल" इव्हेंट प्रत्येक वेळी एकल वर्ण प्रविष्ट केल्यावर सक्रिय होत नाही. फील्ड फोकस गमावल्यानंतर आणि त्याचे मूल्य बदलल्यानंतर ते पेटते. मजकूर फील्डमधील बदलांना त्वरित प्रतिसाद देण्यासाठी, तुम्हाला "इनपुट" इव्हेंटची नोंदणी करणे आवश्यक आहे, जो प्रत्येक वेळी जेव्हा तुम्ही एखादे वर्ण प्रविष्ट करता, मजकूर हटवता किंवा फील्डमधील सामग्री हाताळता तेव्हा सक्रिय होते.

खालील उदाहरणामध्ये आपण मजकूर फील्ड आणि प्रविष्ट केलेल्या मजकुराची वर्तमान लांबी दर्शविणारा काउंटर पाहतो.

लांबी: 0 var मजकूर = दस्तऐवज .querySelector("इनपुट"); var आउटपुट = दस्तऐवज .querySelector("#length"); text.addEventListener("इनपुट" , फंक्शन () ( output.textContent = text.value.length; )); चेकमार्क आणि रेडिओ बटणे

चेकबॉक्स एक साधा बायनरी स्विच आहे. चेक केलेल्या मालमत्तेद्वारे त्याचे मूल्य पुनर्प्राप्त किंवा बदलले जाऊ शकते, ज्यामध्ये बुलियन मूल्य आहे.

पृष्ठ जांभळा var चेकबॉक्स = दस्तऐवज .querySelector("#purple" ); checkbox.addEventListener("बदल" , फंक्शन () (दस्तऐवज .body.style.background = checkbox.checked ? "mediumpurple" : "" ;));

इनपुट फील्डसह मजकूराचा तुकडा जोडण्यासाठी टॅग वापरला जातो. साठी विशेषता फील्डच्या आयडीशी जुळली पाहिजे. लेबलवर क्लिक केल्याने इनपुट फील्ड सक्षम होते, ते फोकस प्राप्त करते आणि मूल्य बदलते - जर ते चेक मार्क किंवा रेडिओ बटण असेल.

रेडिओ बटण हे चेक मार्कसारखेच असते, परंतु ते त्याच नावाच्या इतर रेडिओ बटणांशी जोडलेले असते, त्यामुळे त्यापैकी फक्त एक निवडता येतो.

रंग: जांभळा हिरवा निळा var बटणे = दस्तऐवज .getElementsByName("color"); (var i = 0 ; i< buttons.length; i++) buttons[i].addEventListener("change" , setColor);

document.getElementsByName पद्धत दिलेल्या नाव विशेषतासह सर्व घटक परत करते. उदाहरण त्यांच्याद्वारे पुनरावृत्ती होते (नियमित फॉर लूपद्वारे, forEach नाही, कारण परत आलेला संग्रह वास्तविक ॲरे नाही) आणि प्रत्येक घटकासाठी इव्हेंट हँडलरची नोंदणी करते. लक्षात ठेवा की इव्हेंट ऑब्जेक्ट्समध्ये लक्ष्य गुणधर्म आहे जे इव्हेंट फायर केलेल्या घटकाचा संदर्भ देते. इव्हेंट हँडलर तयार करण्यासाठी हे उपयुक्त आहे - आमच्या हँडलरला वेगवेगळ्या घटकांद्वारे कॉल केले जाऊ शकते आणि त्यास कॉल केलेल्या वर्तमान घटकामध्ये प्रवेश करण्याचा मार्ग असणे आवश्यक आहे.

फील्ड निवडा

सिलेक्ट फील्ड हे रेडिओ बटणासारखेच असतात—ते तुम्हाला अनेक पर्यायांमधून निवडण्याची परवानगी देतात. परंतु जर रेडिओ बटणे आम्हाला पर्यायांचे लेआउट नियंत्रित करण्याची परवानगी देतात, तर फील्डचा प्रकार ब्राउझरद्वारे निर्धारित केला जातो.

सिलेक्ट फील्डमध्ये रेडिओ बटणांपेक्षा चेकबॉक्सच्या सूचीसारखा दिसणारा पर्याय असतो. एकाधिक विशेषता उपस्थित असल्यास, टॅग तुम्हाला फक्त एक ऐवजी कितीही पर्याय निवडण्याची परवानगी देईल.

पॅनकेक्स कॅसरोल आइस्क्रीम

बहुतेक ब्राउझरमध्ये, फील्डचे स्वरूप एकल-निवड फील्डपेक्षा वेगळे असेल, जे सहसा ड्रॉप-डाउन मेनूसारखे दिसते.

टॅगचा आकार गुणधर्म एकाच वेळी दृश्यमान असलेल्या पर्यायांची संख्या सेट करण्यासाठी वापरला जातो - अशा प्रकारे तुम्ही ड्रॉपआउटच्या स्वरूपावर प्रभाव टाकू शकता. उदाहरणार्थ, आकार 3 नियुक्त करून, तुम्हाला एकाच वेळी तीन ओळी दिसतील, एकाधिक पर्याय उपस्थित असला तरीही.

प्रत्येक टॅगचा एक अर्थ असतो. हे व्हॅल्यू विशेषता द्वारे परिभाषित केले जाऊ शकते, परंतु ते निर्दिष्ट केले नसल्यास, टॅगचे मूल्य .. टॅगमधील मजकूराद्वारे निर्धारित केले जाते. घटकाचे मूल्य गुणधर्म सध्या निवडलेला पर्याय प्रतिबिंबित करते. अनेक पर्याय निवडण्याची क्षमता असलेल्या फील्डसाठी, या गुणधर्माची विशेषतः आवश्यकता नाही, कारण त्यात अनेक निवडक पर्यायांपैकी फक्त एक असेल.

फील्ड टॅग ऑप्शन्स प्रॉपर्टीद्वारे ॲरे सारखी ऑब्जेक्ट म्हणून ऍक्सेस केला जाऊ शकतो. प्रत्येक पर्यायामध्ये निवडलेला गुणधर्म असतो जो सध्या पर्याय निवडला आहे की नाही हे दर्शवितो. पर्याय निवडलेला किंवा न निवडलेला करण्यासाठी मालमत्ता देखील बदलली जाऊ शकते.

खालील उदाहरण निवडलेल्या फील्डमधून निवडलेली मूल्ये काढते आणि बिट्समधून बायनरी संख्या तयार करण्यासाठी त्यांचा वापर करते. एकाच वेळी अनेक मूल्ये निवडण्यासाठी Ctrl (किंवा Mac वर कमांड) दाबा.

0001 0010 0100 1000 = 0 var select = दस्तऐवज .querySelector("select" ); var आउटपुट = दस्तऐवज .querySelector("#output"); select.addEventListener("बदल" , फंक्शन () ( var क्रमांक = 0 ; साठी (var i = 0 ; i< select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number (option.value); } output.textContent = number; }); फाइल फील्ड

फाइल फील्ड मूळत: फॉर्मद्वारे संगणकावरून फाइल्स अपलोड करण्याच्या हेतूने होते. आधुनिक ब्राउझरमध्ये ते तुम्हाला JavaScript वरून फाइल्स वाचण्याची परवानगी देतात. फील्ड फाइल्ससाठी रक्षक म्हणून काम करते. स्क्रिप्ट वापरकर्त्याच्या संगणकावरून फाईल सहजपणे हस्तगत करू शकत नाही आणि उघडू शकत नाही, परंतु वापरकर्त्याने या फील्डमध्ये फाइल निवडल्यास, ब्राउझर स्क्रिप्टला फाइल वाचण्यास प्रारंभ करू देतो.

फाइल फील्ड सहसा "फाइल निवडा" असे लेबल केलेल्या बटणासारखे दिसते, ज्याच्या पुढे निवडलेल्या फाइलबद्दल माहिती असते.

फंक्शन () ( जर (input.files.length > 0 ) ( var file = input.files; console .log("आपण निवडले" , file.name); if (file.type) कन्सोल .log("यात प्रकार आहे " , दस्तावेजाचा प्रकार); ) ));

एलिमेंटची फाइल्स प्रॉपर्टी ही ॲरेसारखी ऑब्जेक्ट आहे (वास्तविक ॲरे नाही) ज्यामध्ये निवडलेल्या फाइल्सची सूची असते. सुरुवातीला ते रिकामे असते. घटकामध्ये साधी फाइल गुणधर्म नसतात कारण एकाधिक विशेषता सक्षम असल्यास वापरकर्ता एकाच वेळी एकाधिक फायली निवडू शकतो.

फाइल्स प्रॉपर्टीमधील ऑब्जेक्ट्समध्ये गुणधर्म नाव (फाइलचे नाव), आकार (बाइट्समध्ये फाइल आकार) आणि प्रकार (फाइल प्रकार मीडिया प्रकार - मजकूर/साधा किंवा प्रतिमा/जेपीईजी) असतात.

त्याच्याकडे नसलेली मालमत्ता म्हणजे फाइलमधील सामग्री असलेली मालमत्ता. सामग्री मिळविण्यासाठी आपल्याला खूप प्रयत्न करावे लागतील. डिस्कवरून फाइल वाचण्यास बराच वेळ लागत असल्याने, इंटरफेस असिंक्रोनस असणे आवश्यक आहे जेणेकरून दस्तऐवज गोठणार नाही. तुम्ही फाइलरीडर कन्स्ट्रक्टरचा XMLHttpRequest कन्स्ट्रक्टर म्हणून विचार करू शकता, परंतु फाइल्ससाठी.

var इनपुट = दस्तऐवज .querySelector("इनपुट"); input.addEventListener("change" , function () ( Array .prototype.forEach.call(input.files, function (file ) function () ( console .log("File" , file.name, "with starts" , reader .result.slice(0 , 20 )); reader.readAsText(फाइल)); ));

फाईल वाचणे हे FileReader ऑब्जेक्ट तयार करून, त्यासाठी “लोड” इव्हेंटची नोंदणी करून आणि त्याची readAsText पद्धत कॉल करून, फाइलला व्हॉल्यूममध्ये पास करून होते. डाउनलोड पूर्ण झाल्यावर, फाइलची सामग्री परिणाम गुणधर्मामध्ये संग्रहित केली जाते.

उदाहरण ॲरेद्वारे पुनरावृत्ती करण्यासाठी Array.prototype.forEach वापरते, कारण सामान्य लूपमध्ये इव्हेंट हँडलरकडून आवश्यक फाइल आणि रीडर ऑब्जेक्ट्स प्राप्त करणे गैरसोयीचे असते. व्हेरिएबल्स लूपच्या सर्व पुनरावृत्तीसाठी सामान्य असतील.

फाइल वाचताना अयशस्वी झाल्यास फाइलरीडर्समध्ये "एरर" इव्हेंट देखील असतो. एरर ऑब्जेक्ट एरर प्रॉपर्टीमध्ये संग्रहित केला जाईल. जर तुम्हाला अजून एका अस्ताव्यस्त असिंक्रोनस योजनेबद्दल काळजी करायची नसेल, तर तुम्ही ती वचनात गुंडाळू शकता (धडा 17 पहा):

फंक्शन readFile (फाइल) ( नवीन वचन परत करा (फंक्शन (यशस्वी, अयशस्वी) ("एरर" , फंक्शन () ( fail(reader.error); ) reader.readAsText(file)); क्लायंट-साइड डेटा स्टोरेज

JavaScript च्या जोडणीसह साधी HTML पृष्ठे मिनी-ॲप्लिकेशन्ससाठी उत्कृष्ट आधार असू शकतात - लहान सहाय्यक प्रोग्राम्स जे दैनंदिन कार्ये स्वयंचलित करतात. फील्ड तयार करण्यासाठी इव्हेंट हँडलर संलग्न करून, तुम्ही फारेनहाइट सेल्सिअसमध्ये रूपांतरित करण्यापासून ते मुख्य पासवर्ड आणि वेबसाइटच्या नावावरून पासवर्ड तयार करण्यापर्यंत सर्व काही करू शकता.

जेव्हा अशा ऍप्लिकेशनला सेशन्स दरम्यान माहिती जतन करण्याची आवश्यकता असते, तेव्हा JavaScript व्हेरिएबल्स वापरले जाऊ शकत नाहीत - प्रत्येक वेळी पृष्ठ बंद केल्यावर त्यांची मूल्ये फेकली जातात. तुम्ही सर्व्हर सेट करू शकता, ते इंटरनेटशी कनेक्ट करू शकता आणि त्यानंतर ॲप्लिकेशन तुमचा डेटा तिथे संग्रहित करेल. आम्ही हे प्रकरण 20 मध्ये पाहू. परंतु ते तुमच्यासाठी काम आणि गुंतागुंत वाढवते. कधीकधी आपल्या ब्राउझरमध्ये डेटा संचयित करणे पुरेसे असते. पण कसे?

तुम्ही स्ट्रिंग डेटा संचयित करू शकता जेणेकरून ते पृष्ठ रीलोड होण्यामध्ये टिकेल - हे करण्यासाठी, तुम्हाला ते लोकल स्टोरेज ऑब्जेक्टमध्ये ठेवणे आवश्यक आहे. हे स्ट्रिंग डेटा नावांखाली संग्रहित करण्याची परवानगी देते (जे स्ट्रिंग देखील आहेत), जसे की या उदाहरणात:

LocalStorage.setItem("वापरकर्तानाव" , "marijn"); कन्सोल .log(localStorage.getItem("वापरकर्तानाव" )); // → marijn localStorage.removeItem("वापरकर्तानाव" );

व्हेरिएबल ओव्हरराईट होईपर्यंत, रिमूव्ह आयटम वापरून हटवले जाईपर्यंत किंवा वापरकर्ता स्थानिक स्टोरेज साफ करेपर्यंत लोकल स्टोरेजमध्ये संग्रहित केले जाते.

या स्टोरेजमध्ये वेगवेगळ्या डोमेनवरील साइटचे वेगवेगळे विभाग आहेत. म्हणजेच, लोकल स्टोरेजमधील वेबसाइटवरून सेव्ह केलेला डेटा फक्त त्याच साइटवरील स्क्रिप्टद्वारे वाचला किंवा ओव्हरराईट केला जाऊ शकतो.

ब्राउझर ते संचयित करू शकणाऱ्या डेटाची मर्यादा देखील मर्यादित करतात, सहसा काही मेगाबाइट्स. ही मर्यादा, लोकांच्या हार्ड ड्राइव्हस् बंद करणे फायदेशीर नाही या वस्तुस्थितीसह, डिस्क स्पेस खाण्यापासून प्रतिबंधित करते.

खालील कोड एक साधा नोट-टेकिंग प्रोग्राम लागू करतो. हे सामग्रीसह शीर्षलेख संबद्ध करून, वस्तू म्हणून नोट्स संग्रहित करते. हे JSON मध्ये एन्कोड केलेले आहे आणि लोकल स्टोरेजमध्ये संग्रहित आहे. वापरकर्ता फील्डद्वारे एक टीप निवडू शकतो आणि त्याचा मजकूर मध्ये बदलू शकतो. बटणावर क्लिक करून एंट्री जोडली जाते.

टिपा: नवीन var सूची = दस्तऐवज .querySelector("#list"); फंक्शन addToList (नाव) ( var पर्याय = दस्तऐवज .createElement("option"); option.textContent = name; list.appendChild(option); ) // स्थानिक स्टोरेज var notes = JSON .parse(localStorage.getItem) वरून यादी मिळवा ("नोट्स")) || ("काय खरेदी करायचे" : ""); साठी (नोट्समधील var नाव) जर (notes.hasOwnProperty(name)) addToList(नाव); फंक्शन saveToStorage () ( localStorage.setItem("notes" , JSON .stringify(notes)); ) var current = document .querySelector("#currentnote"); current.value = नोट्स; list.addEventListener("बदल" , फंक्शन () ( current.value = नोट्स; )); current.addEventListener("बदल" , फंक्शन () ( नोट्स = current.value; saveToStorage(); )); फंक्शन addNote () ( var name = प्रॉम्प्ट("रेकॉर्ड नाव" , ""); जर (!नाव) परत येईल; जर (!notes.hasOwnProperty(नाव)) (नोट्स = ""; addToList(नाव); saveToStorage() ;) list.value = name; current.value = नोट्स)

स्क्रिप्ट लोकल स्टोरेजमधील मूल्यासह नोट्स व्हेरिएबल सुरू करते आणि जर ते नसेल तर, "काय खरेदी करायचे" या एका नोंदीसह साध्या ऑब्जेक्टसह. लोकलस्टोरेजमधून गहाळ फील्ड वाचण्याचा प्रयत्न शून्य होईल. JSON.parse ला null पास केल्याने, आम्हाला शून्य परत मिळेल. म्हणून, तुम्ही डीफॉल्ट मूल्यासाठी || ऑपरेटर वापरू शकता.

जेव्हा नोटमधील डेटा बदलतो (एक नवीन रेकॉर्ड जोडला जातो किंवा वर्तमान बदलतो), तेव्हा संचयित फील्ड अद्यतनित करण्यासाठी saveToStorage फंक्शन कॉल केले जाते. जर आम्हाला अपेक्षा असेल की आम्ही हजारो रेकॉर्ड संग्रहित करू, तर ते खूप महाग असेल आणि आम्हाला अधिक जटिल स्टोरेज प्रक्रिया आणावी लागेल - उदाहरणार्थ, प्रत्येक रेकॉर्डसाठी स्वतंत्र फील्ड.

जेव्हा वापरकर्ता रेकॉर्ड जोडतो, तेव्हा फील्डमध्ये "बदल" हँडलर असला तरीही, कोडने मजकूर फील्ड अपडेट करणे आवश्यक आहे. हे आवश्यक आहे कारण जेव्हा वापरकर्ता फील्डचे मूल्य बदलतो तेव्हाच "बदल" घटना घडते, स्क्रिप्ट करते तेव्हा नाही.

लोकल स्टोरेज प्रमाणेच आणखी एक ऑब्जेक्ट आहे ज्याला sessionStorage म्हणतात. त्यांच्यातील फरक असा आहे की सत्राच्या शेवटी सत्र स्टोरेजची सामग्री विसरली जाते, ज्याचा अर्थ बहुतेक ब्राउझरसाठी बंद होण्याचा क्षण असतो.

तळ ओळ

HTML विविध प्रकारचे फॉर्म फील्ड प्रदान करते - मजकूर, चेकबॉक्सेस, एकाधिक निवड, फाइल निवड.

तुम्ही मूल्य मिळवू शकता आणि JavaScript वरून ही फील्ड हाताळू शकता. बदल केल्यावर ते "बदल" इव्हेंट ट्रिगर करतात, कीबोर्ड इनपुटवर - "इनपुट", आणि बरेच भिन्न कीबोर्ड इव्हेंट. जेव्हा वापरकर्ता इनपुट फील्डशी संवाद साधतो तेव्हा ते क्षण पकडण्यात आम्हाला मदत करतात. फील्डमधील मजकूर वाचण्यासाठी आणि लिहिण्यासाठी मूल्य (मजकूर फील्ड आणि निवडीसाठी) किंवा चेक केलेले (चेकबॉक्स आणि रेडिओ बटणांसाठी) यासारखे गुणधर्म वापरले जातात.

फॉर्म सबमिट करताना, "सबमिट" घटना घडते. JavaScript हँडलर नंतर डेटा हस्तांतरित करणे थांबवण्यासाठी या इव्हेंटवर प्रतिबंधित डीफॉल्ट कॉल करू शकतो. फॉर्म घटकांमध्ये संलग्न करणे आवश्यक नाही.

जेव्हा वापरकर्त्याने फाइल निवड फील्डद्वारे हार्ड ड्राइव्हमधून फाइल निवडली असेल, तेव्हा फाइलरीडर इंटरफेस आम्हाला JavaScript प्रोग्राममधून फाइलमधील सामग्रीमध्ये प्रवेश करण्यास अनुमती देईल.

लोकल स्टोरेज आणि सेशनस्टोरेज ऑब्जेक्ट्सचा वापर माहिती संग्रहित करण्यासाठी अशा प्रकारे केला जाऊ शकतो जो पृष्ठ रीलोडमध्ये टिकेल. पहिला डेटा कायमचा जतन करतो (किंवा वापरकर्त्याने तो हटवला नाही तोपर्यंत), आणि दुसरा - ब्राउझर बंद होईपर्यंत.

व्यायाम जावास्क्रिप्ट वर्कबेंच

एक इंटरफेस बनवा जो तुम्हाला JavaScript कोडचे तुकडे लिहू आणि कार्यान्वित करू देतो.

च्या पुढे एक बटण बनवा, जे दाबल्यावर फंक्शन कन्स्ट्रक्टरला धडा 10 मधील फंक्शनमध्ये एंटर केलेला मजकूर गुंडाळून कॉल करेल. फंक्शनचे रिटर्न व्हॅल्यू किंवा त्यातील कोणतीही त्रुटी एका स्ट्रिंगमध्ये रूपांतरित करा आणि मजकूर फील्डनंतर मुद्रित करा.

"हाय" परत करा; चला जाऊया // तुमचा कोड. स्वयंपूर्णता

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

// ग्लोबल व्हेरिएबल नावांची ॲरे तयार करते, // जसे की "सूचना", "दस्तऐवज", आणि "scrollTo" var संज्ञा = ; साठी (विंडोमध्ये var नाव) terms.push(नाव); // तुमचा कोड. Conway's Game of Life

हे आयताकृती ग्रिडवर जीवनाचे एक साधे अनुकरण आहे, त्यातील प्रत्येक घटक जिवंत आहे किंवा नाही. प्रत्येक पिढी (गेम स्टेप) खालील नियम लागू होतात:

- प्रत्येक जिवंत पेशी, ज्याच्या शेजाऱ्यांची संख्या दोन पेक्षा कमी किंवा तीनपेक्षा जास्त आहे, मरतो - प्रत्येक जिवंत पेशी, ज्याला दोन ते तीन शेजारी असतात, पुढच्या वळणापर्यंत जगतात - प्रत्येक मृत पेशी, ज्याचे अगदी तीन शेजारी असतात, जीवनात येते

सेलचे शेजारी क्षैतिज, अनुलंब आणि तिरपे, एकूण 8 त्याच्या शेजारी असलेल्या सर्व पेशी आहेत.

कृपया लक्षात घ्या की नियम एकाच वेळी संपूर्ण ग्रिडवर लागू होतात आणि प्रत्येक सेलला लागू होत नाहीत. म्हणजेच, शेजाऱ्यांच्या संख्येची मोजणी पुढील चरणापूर्वी एका क्षणी होते आणि शेजारच्या पेशींवर होणारे बदल सेलच्या नवीन स्थितीवर परिणाम करत नाहीत.

कोणत्याही योग्य संरचना वापरून खेळ लागू करा. यादृच्छिक प्रारंभिक लोकसंख्या तयार करण्यासाठी Math.random वापरा. “पुढील चरणावर जा” बटणासह फील्ड चेकमार्कच्या ग्रिडच्या रूपात प्रदर्शित करा. जेव्हा वापरकर्ता चेकबॉक्सेस चालू किंवा बंद करतो, तेव्हा पुढील पिढीची गणना करताना हे बदल विचारात घेतले पाहिजेत.

पुढची पिढी // तुमचा कोड.

HTML फॉर्म जटिल इंटरफेस घटक आहेत. त्यामध्ये विविध कार्यात्मक घटक समाविष्ट आहेत: इनपुट फील्ड, सूची, टूलटिप इ. सर्व फॉर्म कोड मध्ये समाविष्ट आहे.

बहुतेक वेब फॉर्म माहिती वापरून पोचवली जाते. मजकूराची एक ओळ प्रविष्ट करण्यासाठी, अनेक ओळींसाठी घटक वापरला जातो; घटक ड्रॉपडाउन सूची तयार करतो.

घटक फॉर्म फील्डसाठी लेबले तयार करतो. लेबले आणि फील्ड गट करण्याचे दोन मार्ग आहेत. फील्ड एखाद्या घटकाच्या आत असल्यास, साठी विशेषता निर्दिष्ट करण्याची आवश्यकता नाही.

आडनाव आडनाव आडनाव

घटक वापरून फॉर्म फील्ड लॉजिकल ब्लॉक्समध्ये विभागली जाऊ शकतात. घटक वापरून प्रत्येक विभागाला नाव दिले जाऊ शकते.

संपर्क माहिती नाव ईमेल
तांदूळ. 1. फॉर्म फील्ड गटबद्ध करणे

वापरकर्त्यांना फॉर्म अधिक समजण्यायोग्य बनवण्यासाठी, इनपुट डेटाचे उदाहरण देण्यासाठी फॉर्म फील्डमध्ये मजकूर जोडला जातो. या प्रकारच्या मजकूराला वाइल्डकार्ड मजकूर म्हणतात आणि प्लेसहोल्डर विशेषता वापरून तयार केला जातो.

आवश्यक फील्ड देखील हायलाइट करणे आवश्यक आहे. HTML5 पूर्वी, फील्डच्या नावापुढे तारांकित * चिन्ह वापरले जात असे. नवीन स्पेसिफिकेशन एक विशेष आवश्यक विशेषता सादर करते, जे तुम्हाला मार्कअप स्तरावर आवश्यक फील्ड चिन्हांकित करण्यास अनुमती देते. ही विशेषता ब्राउझरला निर्देश देते (हे गृहीत धरून की ते HTML5 ला सपोर्ट करते) वापरकर्ता क्लिक केल्यानंतर सबमिट केल्यानंतर निर्दिष्ट फील्ड पूर्ण होईपर्यंत डेटा पाठवू नये.

फोकस प्राप्त करताना मजकूर फील्डचे स्वरूप बदलण्यासाठी, फोकस स्यूडो-क्लास वापरा. उदाहरणार्थ, तुम्ही सध्याच्या फील्डची पार्श्वभूमी अधिक गडद करू शकता किंवा बाकीच्यांपेक्षा वेगळी बनवण्यासाठी रंगीत सीमा जोडू शकता:

इनपुट:फोकस (पार्श्वभूमी: #eaeaea;)

आणखी एक उपयुक्त HTML5 विशेषता म्हणजे ऑटोफोकस विशेषता. हे तुम्हाला घटकांसाठी आणि (प्रत्येक फॉर्मचा फक्त एक घटक) इच्छित प्रारंभिक फील्डवर स्वयंचलितपणे फोकस सेट करण्याची परवानगी देते.

नोंदणी फॉर्म तयार करण्याचे उदाहरण

HTML मार्कअप

नोंदणी नाव लिंग पुरुष महिला ई-मेल देश राहण्याचा देश निवडा रशिया युक्रेन बेलारूस पाठवा

नोंद
action="form.php" - फॉर्म हँडलर फाइलशी दुवा. UTF-8 एन्कोडिंगमध्ये फाइल तयार करा, ती सर्व्हरवर अपलोड करा आणि action="form.php" ला तुमच्या सर्व्हरवरील फाईलचा मार्ग बदला.

तांदूळ. 2. डीफॉल्ट फॉर्म देखावा

जसे आपण आकृतीवरून पाहू शकता, प्रत्येक फॉर्म घटकामध्ये डीफॉल्ट ब्राउझर शैली आहेत. चला शैली साफ करू आणि फॉर्म घटकांची शैली करू.

फॉर्म-रॅप (रुंदी: 550px; पार्श्वभूमी: #ffd500; सीमा-त्रिज्या: 20px; ) .फॉर्म-रॅप *(संक्रमण: .1s रेखीय) .प्रोफाइल (रुंदी: 240px; फ्लोट: डावीकडे; मजकूर-संरेखित: केंद्र; पॅडिंग : 30px; ) फॉर्म (पार्श्वभूमी: पांढरा; फ्लोट: डावीकडे; रुंदी: कॅल्क (100% - 240px); पॅडिंग: 30px; सीमा-त्रिज्या: 0 20px 20px 0; रंग: #7b7b7b; ) .फॉर्म-रॅप: नंतर, फॉर्म div: नंतर (सामग्री: ""; डिस्प्ले: टेबल; स्पष्ट: दोन्ही;) फॉर्म div ( समास-तळाशी: 15px; स्थान: सापेक्ष; ) h1 ( फॉन्ट-आकार: 24px; फॉन्ट-वजन: 400; स्थान: सापेक्ष ; मार्जिन-टॉप: ५०px; %); ) /***************** फॉर्म घटकांची शैली ********************* / लेबल, स्पॅन (प्रदर्शन: ब्लॉक; फॉन्ट-आकार: 14px; समास-तळाशी: 8px; ) इनपुट, इनपुट (सीमा-रुंदी: 0; बाह्यरेखा: काहीही नाही; समास: 0; रुंदी: 100%; पॅडिंग: 10px 15px; पार्श्वभूमी: #e6e6e6; ) input:focus, input:focus ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .रेडिओ लेबल ( स्थिती: सापेक्ष; पॅडिंग-डावीकडे: 50px; कर्सर: पॉइंटर; रुंदी: 50%; फ्लोट: डावीकडे; लाइन-उंची: 40px; ) .रेडिओ इनपुट (स्थिती: परिपूर्ण; अपारदर्शकता: 0; ) .रेडिओ -नियंत्रण (स्थिती: निरपेक्ष; शीर्ष: 0; डावीकडे: 0; उंची: 40px; रुंदी: 40px; पार्श्वभूमी: #e6e6e6; सीमा-त्रिज्या: 50%; मजकूर-संरेखित: केंद्र; ) .male:before ( सामग्री: " \f222"; फॉन्ट-कुटुंब: FontAwesome; फॉन्ट-वजन: ठळक; ) .female:before ( सामग्री: "\f221"; फॉन्ट-फॅमिली: FontAwesome; फॉन्ट-वजन: ठळक; ) .रेडिओ लेबल: होव्हर इनपुट ~ . रेडिओ-कंट्रोल, .रेडिओल इनपुट:फोकस ~ .रेडिओ-कंट्रोल (बॉक्स-शॅडो: इनसेट 0 0 0 2px rgba(0,0,0,.2); ) .रेडिओ इनपुट:चेक केलेले ~ .रेडिओ-कंट्रोल ( रंग: लाल; . शीर्ष: 38px; उजवीकडे: 15px; रुंदी: 0; उंची: 0; पॉइंटर-इव्हेंट्स: काहीही नाही; /*जेव्हा तुम्ही बाणावर क्लिक करता तेव्हा सूचीचे प्रदर्शन सक्रिय करा*/ बॉर्डर-शैली: सॉलिड; सीमा-रुंदी: 8px 5px 0 5px; बॉर्डर-रंग: #7b7b7b पारदर्शक पारदर्शक पारदर्शक; ) बटण ( पॅडिंग: 10px 0; सीमा-रुंदी: 0; डिस्प्ले: ब्लॉक; रुंदी: 120px; समास: 25px ऑटो 0; पार्श्वभूमी: #60e6c5; रंग: पांढरा; फॉन्ट-आकार: 14px; बाह्यरेखा: काहीही नाही; मजकूर-ट्रान्सफॉर्म : अप्परकेस; ) /******************** फॉर्ममध्ये अनुकूलता जोडा ****************** ** **/ @media (कमाल-रुंदी: 600px) ( .फॉर्म-रॅप (मार्जिन: 20px ऑटो; कमाल-रुंदी: 550px; रुंदी: 100%;) .प्रोफाइल, फॉर्म (फ्लोट: काहीही नाही; रुंदी: 100% ;) h1 (मार्जिन-टॉप: ऑटो; पॅडिंग-बॉटम: 50px;) फॉर्म (बॉर्डर-त्रिज्या: 0 0 20px 20px;) )

Form.php फाइल

नोंद
$subject व्हेरिएबलमध्ये, अक्षराचे शीर्षक म्हणून प्रदर्शित होणारा मजकूर निर्दिष्ट करा;
तुमचे_नाव - येथे तुम्ही नाव निर्दिष्ट करू शकता जे "पत्र कोणाचे आहे" फील्डमध्ये प्रदर्शित केले जाईल;
नोंदणी फॉर्मसह साइटच्या पत्त्यासह your_site_url बदला;
your_email ला तुमच्या ईमेल पत्त्याने बदला;
$headers. = "Bcc: your_email". "\r\n"; तुमच्या ईमेल पत्त्यावर BCC पाठवते.

मेफिस्टोफेल्स, गोएथेच्या फॉस्टमध्ये

फील्ड्स वेब फॉर्ममध्ये टॅगने वेढलेले कितीही इनपुट फील्ड असतात. HTML साध्या चालू/बंद चेकबॉक्सपासून ड्रॉप-डाउन सूची आणि मजकूर इनपुट फील्डपर्यंत अनेक भिन्न फील्ड ऑफर करते. हे पुस्तक सर्व प्रकारच्या फील्डवर तपशीलवार चर्चा करणार नाही, परंतु आम्ही त्यांचे थोडक्यात विहंगावलोकन देऊ.

अनेक प्रकारचे इनपुट फील्ड टॅग वापरतात. फील्डची शैली निवडण्यासाठी त्याची प्रकार विशेषता वापरली जाते. येथे काही सामान्य प्रकार आहेत:

एका ओळीवर मजकूर मजकूर फील्ड
पासवर्ड मजकूर सारखाच आहे, परंतु इनपुट लपवतो
चेकबॉक्स चालू/बंद करा
अनेक पर्यायांमधून निवडण्याच्या क्षमतेसह फील्डचा रेडिओ भाग
फाइल वापरकर्त्याला त्यांच्या संगणकावर फाइल निवडण्याची परवानगी देते

फॉर्म फील्ड टॅगमध्ये दिसण्याची गरज नाही. ते पृष्ठावर कुठेही ठेवता येतात. अशा फील्डमधील माहिती सर्व्हरवर पास केली जाऊ शकत नाही (हे फक्त संपूर्ण फॉर्मसाठी शक्य आहे), परंतु जेव्हा आम्ही JavaScript प्रक्रिया करते असे फील्ड बनवतो, तेव्हा आम्हाला सहसा फील्डमधून सबमिट द्वारे माहिती पास करण्याची आवश्यकता नसते.

(मजकूर)

(पासवर्ड)

(चेकबॉक्स)

(रेडिओ)

(फाइल)

एक दोन तीन

आणि टॅगचा वापर फील्ड तयार करण्यासाठी केला जातो जो वापरकर्त्याला दिलेल्या पर्यायांपैकी एक निवडण्याची परवानगी देतो.
पॅनकेक्स कॅसरोल आइस्क्रीम

जेव्हा फील्डचे मूल्य बदलते, तेव्हा "बदल" इव्हेंट काढला जातो.

फोकस बहुतेक HTML दस्तऐवज घटकांच्या विपरीत, फॉर्म फील्ड्स कीबोर्ड फोकस प्राप्त करू शकतात. जेव्हा तुम्ही त्यांना क्लिक करता किंवा अन्यथा निवडता तेव्हा ते सक्रिय होतात, उदा. कीबोर्ड इनपुटचे मुख्य रिसीव्हर्स.

document.querySelector("इनपुट").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("इनपुट").blur(); console.log(document.activeElement.tagName); // → मुख्य भाग

(मदत) ठीक आहे

अक्षम फील्ड सर्व फील्ड अक्षम केलेल्या विशेषतासह अक्षम केली जाऊ शकतात, जी DOM ऑब्जेक्ट घटकाची गुणधर्म म्हणून देखील अस्तित्वात आहे.

मी ठीक आहे, मी उत्तीर्ण झालो आहे

संपूर्ण फॉर्म जेव्हा एखादे फील्ड घटकामध्ये समाविष्ट असते, तेव्हा त्याच्या DOM घटकामध्ये एक फॉर्म गुणधर्म असतो जो फॉर्मचा संदर्भ देतो. घटकामध्ये, या बदल्यात, एक घटक गुणधर्म असतो ज्यामध्ये फील्डचा ॲरे-सारखा संग्रह असतो.

नाव:
पासवर्ड:
लॉगिन var फॉर्म = document.querySelector("फॉर्म"); console.log(form.elements.type); // → पासवर्ड console.log(form.elements.password.type); // → पासवर्ड console.log(form.elements.name.form == form); // → खरे

मूल्य: सेव्ह var फॉर्म = document.querySelector("फॉर्म"); form.addEventListener("सबमिट", फंक्शन(इव्हेंट) ( console.log("सेव्हिंग व्हॅल्यू", form.elements.value.value); event.preventDefault(); ));

मजकूर फील्ड टॅग आणि प्रकार मजकूर आणि पासवर्ड, तसेच टॅगसह फील्ड, एक सामान्य इंटरफेस आहे. त्यांच्या DOM घटकांमध्ये एक मूल्य गुणधर्म आहे ज्यामध्ये त्यांची वर्तमान सामग्री मजकूराची स्ट्रिंग म्हणून आहे. हे गुणधर्म मूल्यावर सेट केल्याने फील्डमधील सामग्री बदलते.

var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) ( // F2 साठी की कोड 113 असेल तर (event.keyCode == 113) ( बदली निवड (textarea, "Khasekhemwy"); event.preventDefault(); ) )); फंक्शन रिप्लेस सिलेक्शन(फील्ड, शब्द) ( var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // पुट field.selectionStart = field.selectionEnd = from + word.length या शब्दानंतरचा कर्सर );

लांबी: 0 var मजकूर = document.querySelector("इनपुट"); var आउटपुट = document.querySelector("#length"); text.addEventListener("इनपुट", function() ( output.textContent = text.value.length; ));

चेकबॉक्सेस आणि रेडिओ बटणे चेकबॉक्स एक साधे बायनरी रेडिओ बटण आहे. चेक केलेल्या मालमत्तेद्वारे त्याचे मूल्य पुनर्प्राप्त किंवा बदलले जाऊ शकते, ज्यामध्ये बुलियन मूल्य आहे.

पृष्ठ जांभळा करा var checkbox = document.querySelector("#purple"); checkbox.addEventListener("बदल", function() ( document.body.style.background = checkbox.checked ? "mediumpurple" : ""; ));

रंग: जांभळा हिरवा निळा var बटणे = document.getElementsByName("color"); फंक्शन setColor(event) ( document.body.style.background = event.target.value; ) साठी (var i = 0; i< buttons.length; i++) buttons[i].addEventListener("change", setColor);

फील्ड निवडा सिलेक्ट फील्ड हे रेडिओ बटणांसारखेच असतात—ते तुम्हाला एकाधिक पर्यायांमधून निवडण्याची परवानगी देतात. परंतु जर रेडिओ बटणे आम्हाला पर्यायांचे लेआउट नियंत्रित करण्याची परवानगी देतात, तर फील्डचा प्रकार ब्राउझरद्वारे निर्धारित केला जातो.

पॅनकेक्स कॅसरोल आइस्क्रीम

टॅगचा आकार गुणधर्म एकाच वेळी दृश्यमान असलेल्या पर्यायांची संख्या सेट करण्यासाठी वापरला जातो - अशा प्रकारे आपण ड्रॉपआउटच्या स्वरूपावर प्रभाव टाकू शकता. उदाहरणार्थ, आकार 3 नियुक्त करून, तुम्हाला एकाच वेळी तीन ओळी दिसतील, एकाधिक पर्याय उपस्थित असला तरीही.

प्रत्येक टॅगचा एक अर्थ असतो. हे मूल्य गुणधर्माद्वारे परिभाषित केले जाऊ शकते, परंतु ते निर्दिष्ट केले नसल्यास, टॅगचे मूल्य टॅगच्या आत असलेला मजकूर निर्धारित करते ... घटकाचे मूल्य गुणधर्म सध्या निवडलेला पर्याय प्रतिबिंबित करते. अनेक पर्याय निवडण्याची क्षमता असलेल्या फील्डसाठी, या गुणधर्माची विशेषतः आवश्यकता नाही, कारण त्यात अनेक निवडक पर्यायांपैकी फक्त एक असेल.

0001 0010 0100 1000 = 0 var select = document.querySelector("select"); var आउटपुट = document.querySelector("#output"); select.addEventListener("बदल", फंक्शन() ( var क्रमांक = 0; साठी (var i = 0; i< select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; });

फाइल फील्ड फाइल फील्ड मूळतः फॉर्मद्वारे संगणकावरून फाइल्स अपलोड करण्याच्या हेतूने होते. आधुनिक ब्राउझरमध्ये ते तुम्हाला JavaScript वरून फाइल्स वाचण्याची परवानगी देतात. फील्ड फाइल्ससाठी रक्षक म्हणून काम करते. स्क्रिप्ट वापरकर्त्याच्या संगणकावरून फाईल सहजपणे हस्तगत करू शकत नाही आणि उघडू शकत नाही, परंतु वापरकर्त्याने या फील्डमध्ये फाइल निवडल्यास, ब्राउझर स्क्रिप्टला फाइल वाचण्यास प्रारंभ करू देतो.

var इनपुट = document.querySelector("इनपुट"); input.addEventListener("बदल", function() ( if (input.files.length > 0) ( var file = input.files; console.log("तुम्ही निवडले", file.name); जर (file.type) console.log("यात प्रकार आहे", file.type);

var इनपुट = document.querySelector("इनपुट"); input.addEventListener("बदल", function() ( Array.prototype.forEach.call(input.files, function(file) ( var reader = new FileReader(); reader.addEventListener("load", function() ( कन्सोल .log("फाइल", फाइल.नाव, "याने सुरू होते", reader.result.slice(0, 20));

फंक्शन रीडफाइल(फाइल) ( नवीन वचन परत करा(फंक्शन(यशस्वी, अयशस्वी) ("त्रुटी", कार्य() ( fail(reader.error); ) reader.readAsText(file));

क्लायंटच्या बाजूने डेटा संचयित करणे JavaScript च्या जोडणीसह साधी HTML पृष्ठे मिनी-ॲप्लिकेशन्ससाठी उत्कृष्ट आधार असू शकतात - लहान सहाय्यक प्रोग्राम्स जे दैनंदिन कार्ये स्वयंचलित करतात. फील्ड तयार करण्यासाठी इव्हेंट हँडलर संलग्न करून, तुम्ही फारेनहाइट सेल्सिअसमध्ये रूपांतरित करण्यापासून ते मुख्य पासवर्ड आणि वेबसाइटच्या नावावरून पासवर्ड तयार करण्यापर्यंत सर्व काही करू शकता.

तुम्ही स्ट्रिंग डेटा संचयित करू शकता जेणेकरून ते पृष्ठ रीलोडमध्ये टिकेल - हे करण्यासाठी, तुम्हाला ते लोकल स्टोरेज ऑब्जेक्टमध्ये ठेवणे आवश्यक आहे. हे स्ट्रिंग डेटा नावांखाली संग्रहित करण्याची परवानगी देते (जे स्ट्रिंग देखील आहेत), जसे की या उदाहरणात:

LocalStorage.setItem("वापरकर्तानाव", "marijn"); console.log(localStorage.getItem("वापरकर्तानाव")); // → marijn localStorage.removeItem("वापरकर्तानाव");

खालील कोड एक साधा नोट-टेकिंग प्रोग्राम लागू करतो. हे सामग्रीसह शीर्षलेख संबद्ध करून, वस्तू म्हणून नोट्स संग्रहित करते. हे JSON मध्ये एन्कोड केलेले आहे आणि लोकल स्टोरेजमध्ये संग्रहित आहे. वापरकर्ता फील्डद्वारे एक टीप निवडू शकतो आणि त्यातील मजकूर बदलू शकतो. बटणावर क्लिक करून एंट्री जोडली जाते.

नोट्स: नवीन
var सूची = document.querySelector("#list"); फंक्शन addToList(नाव) ( var पर्याय = document.createElement("option"); option.textContent = name; list.appendChild(option); ) // स्थानिक स्टोरेज var notes = JSON.parse(localStorage.getItem) वरून यादी घ्या ("नोट्स")) || ("काय खरेदी करायचे": ""); साठी (नोट्समधील var नाव) जर (notes.hasOwnProperty(name)) addToList(नाव); फंक्शन saveToStorage() ( localStorage.setItem("notes", JSON.stringify(notes)); ) var current = document.querySelector("#currentnote"); current.value = नोट्स; list.addEventListener("बदल", फंक्शन() ( current.value = नोट्स; )); current.addEventListener("बदल", फंक्शन() ( नोट्स = current.value; saveToStorage(); )); फंक्शन addNote() ( var name = प्रॉम्प्ट("नोट नाव", ""); जर (!नाव) परत करा; जर (!notes.hasOwnProperty(नाव)) (नोट्स = ""; addToList(नाव); saveToStorage() ;) list.value = name; current.value = नोट्स)

सारांश HTML अनेक प्रकारचे फॉर्म फील्ड प्रदान करते - मजकूर, चेकबॉक्सेस, एकाधिक निवड, फाइल निवड.

फॉर्म सबमिट करताना, "सबमिट" घटना घडते. JavaScript हँडलर नंतर डेटा हस्तांतरित करणे थांबवण्यासाठी या इव्हेंटवर प्रतिबंधित डीफॉल्ट कॉल करू शकतो. फॉर्म घटक टॅगमध्ये संलग्न करणे आवश्यक नाही.

जावास्क्रिप्ट वर्कबेंच व्यायाम करा एक इंटरफेस बनवा जो तुम्हाला JavaScript कोडचे तुकडे लिहू आणि कार्यान्वित करू देतो.

त्यापुढील एक बटण बनवा, क्लिक केल्यावर, धडा 10 मधील फंक्शन कन्स्ट्रक्टर फंक्शनमध्ये प्रविष्ट केलेला मजकूर गुंडाळून कॉल करेल. फंक्शनचे रिटर्न व्हॅल्यू किंवा त्यातील कोणतीही त्रुटी एका स्ट्रिंगमध्ये रूपांतरित करा आणि मजकूर फील्डनंतर मुद्रित करा.

"हाय" परत करा; चला जाऊया // तुमचा कोड.

स्वयंपूर्ण मजकूर फील्ड पूर्ण करा जेणेकरुन तुम्ही मजकूर टाईप करता तेव्हा त्याच्या खाली पर्यायांची सूची दिसेल. तुमच्याकडे संभाव्य पर्यायांचा ॲरे आहे आणि तुम्हाला ते एंटर केलेल्या मजकुरापासून सुरू होणारे दर्शविणे आवश्यक आहे. जेव्हा वापरकर्ता सुचविलेल्या पर्यायावर क्लिक करतो तेव्हा ते फील्डमधील सामग्री त्या पर्यायामध्ये बदलते.

// ग्लोबल व्हेरिएबल नावांची ॲरे तयार करते, // जसे की "सूचना", "दस्तऐवज", आणि "scrollTo" var संज्ञा = ; साठी (विंडोमध्ये var नाव) terms.push(नाव); // तुमचा कोड.

Conway's Game of Life हे आयताकृती ग्रिडवरील जीवनाचे एक साधे अनुकरण आहे, त्यातील प्रत्येक घटक जिवंत आहे किंवा नाही. प्रत्येक पिढी (गेम स्टेप) खालील नियम लागू होतात:

प्रत्येक जिवंत पेशी ज्यांच्या शेजाऱ्यांची संख्या दोन पेक्षा कमी किंवा तीनपेक्षा जास्त आहे ती मरते
- प्रत्येक जिवंत पेशी ज्याचे दोन ते तीन शेजारी असतात ते पुढील हालचालीपर्यंत जगतात
- तीन शेजारी असलेल्या प्रत्येक मृत पेशी जिवंत होतात

पुढची पिढी // तुमचा कोड.

हे ट्यूटोरियल JavaScript फॉर्म कसा तयार करायचा याचे वर्णन करते जे सर्व्हरला डेटा पाठवण्यापूर्वी अभ्यागताने फील्ड योग्यरित्या भरले आहेत हे तपासते. फॉर्म प्रमाणीकरण हे एक उपयुक्त तंत्र का आहे हे आम्ही प्रथम स्पष्ट करू आणि नंतर ते कसे कार्य करते हे स्पष्ट करण्यासाठी आम्ही एक साधे उदाहरण तयार करू.

मला फॉर्म पूर्ण झाल्याचे तपासण्याची आवश्यकता का आहे?

फॉर्म प्रमाणीकरण ही एक प्रक्रिया आहे ज्यामध्ये प्रक्रिया करण्यापूर्वी फॉर्म डेटा सत्यापित केला जातो. उदाहरणार्थ, जर तुमच्या फॉर्ममध्ये एखादे फील्ड असेल ज्यामध्ये वापरकर्त्याने ईमेल ॲड्रेस एंटर करणे आवश्यक आहे, तर तुम्ही फॉर्मवर पुढील प्रक्रिया करण्यापूर्वी फील्ड पूर्ण झाले आहे हे तपासू शकता.

फॉर्मची पूर्तता तपासण्यासाठी दोन मुख्य पद्धती आहेत: सर्व्हरच्या बाजूने (CGI स्क्रिप्ट्स, ASP, इ. वापरून) आणि क्लायंटच्या बाजूने (सहसा JavaScript वापरून). सर्व्हर-साइड प्रमाणीकरण अधिक सुरक्षित आहे, परंतु बहुतेक प्रकरणांमध्ये अधिक जटिल कोड आवश्यक आहे, तर क्लायंट-साइड प्रमाणीकरण सोपे आणि जलद आहे (फॉर्म प्रमाणित करण्यासाठी ब्राउझरला सर्व्हरशी कनेक्ट करण्याची आवश्यकता नाही, म्हणून वापरकर्त्यास त्वरित प्रतिसाद प्राप्त होतो जर गहाळ फील्ड जे भरणे आवश्यक आहे).

क्लायंट-साइड फॉर्म प्रमाणीकरण. सामान्यत: एम्बेडेड JavaScript स्क्रिप्ट वापरून केले जाते.

सर्व्हर-साइड फॉर्म प्रमाणीकरण. सामान्यत: CGI किंवा ASP स्क्रिप्ट वापरून केले जाते.

या ट्युटोरियलमध्ये आपण JavaScript वापरून क्लायंट-साइड व्हॅलिडेशनसह एक साधा फॉर्म तयार करू. त्यानंतर तुम्ही तुमच्या गरजेनुसार ते जुळवून घेऊ शकता.

पडताळणीसह एक साधा फॉर्म.

स्क्रिप्ट वापरून फिल चेकिंगसह एक साधा फॉर्म बनवू. या फॉर्ममध्ये एक मजकूर फील्ड "तुमचे नाव" आणि डेटा सबमिट करण्यासाठी एक बटण आहे. आमची स्क्रिप्ट सर्व्हरला डेटा पाठवण्यापूर्वी वापरकर्त्याने त्यांचे नाव प्रविष्ट केले आहे का ते तपासते.

फॉर्म उघडा आणि कृतीत पहा. "तुमचे नाव" फील्डमध्ये काहीही न टाकता "डेटा सबमिट करा" बटणावर क्लिक करण्याचा प्रयत्न करा.

पृष्ठामध्ये validate_form() नावाचे JavaScript फंक्शन आहे. ते फॉर्म पूर्ण आहे की नाही हे तपासते. प्रथम आकार पाहू.

फॉर्म

फॉर्मचा पहिला भाग फॉर्म टॅग आहे

फॉर्मला contact_form असे नाव आहे. त्याच्या मदतीने, आम्ही JavaScript प्रमाणीकरण फंक्शनमधून फॉर्ममध्ये प्रवेश करू.

स्टब एचटीएम फाइलवर डेटा पाठवण्यासाठी फॉर्म पोस्टमेथड वापरते, जे फक्त संदेश प्रदर्शित करते. खरं तर, तुम्ही तुमच्या CGI स्क्रिप्ट, ASP पेज इ. वर डेटा पाठवू शकता. (उदाहरणार्थ मेल पाठवणे).

सबमिट डेटा बटण क्लिक केल्यावर JavaScript प्रमाणीकरण फंक्शन validate_form() कॉल करण्यासाठी फॉर्म टॅगमध्ये एक onsubmit विशेषता देखील असते. फंक्शन बुलियन व्हॅल्यू मिळवते, ज्यासाठी खरे म्हणजे "चेक यशस्वी झाले" आणि असत्य म्हणजे "डेटा होल्डवर आहे." अशा प्रकारे वापरकर्त्याने फॉर्म डेटा योग्यरित्या भरला नसल्यास सबमिट होण्यापासून आम्ही प्रतिबंधित करू शकतो.

उर्वरित फॉर्म कोड contact_name इनपुट फील्ड आणि "डेटा सबमिट करा" बटण जोडतो:

कृपया आपले नाव प्रविष्ट करा.

तुमचे नाव:

validate_form() फंक्शन

फॉर्म व्हॅलिडेशन फंक्शन validate_form() हे पृष्ठाच्या सुरुवातीला हेड विभागात तयार केले आहे:

पहिली ओळ () ब्राउझरला सांगते की खालील काय आहे JavaScript कोड, आणि HTML टिप्पणी ( तुमचे नाव प्रविष्ट करा:

तुमचा इमेल पत्ता लिहा:

चला प्रथम बॉडी विभागात HTML कोड पाहू. येथे आपण फक्त दोन मजकूर इनपुट घटक आणि दोन बटणे तयार करत आहोत. बटणे test1(...) किंवा test2(...) फंक्शन्सना कॉल करतात, कोणते दाबले गेले यावर अवलंबून. या फंक्शन्सचा युक्तिवाद म्हणून आम्ही संयोजन पास करतो हा.फॉर्म, जे नंतर आपल्याला फंक्शनमध्ये आपल्याला आवश्यक असलेल्या घटकांना संबोधित करण्यास अनुमती देईल.
test1(फॉर्म) फंक्शन दिलेली स्ट्रिंग रिकामी आहे की नाही हे तपासते. द्वारे केले जाते जर (form.text1.value == "").... येथे "फॉर्म" एक व्हेरिएबल आहे जिथे "this.form" वरून फंक्शन कॉल केल्यावर प्राप्त व्हॅल्यू संग्रहित केली जाते. जर विचाराधीन घटकामध्ये प्रविष्ट केलेली स्ट्रिंग आपण पुनर्प्राप्त करू शकतो form.text1चला "मूल्य" नियुक्त करू. स्ट्रिंग रिक्त नसल्याचे सुनिश्चित करण्यासाठी, आम्ही त्याची तुलना "" शी करतो. जर असे दिसून आले की प्रविष्ट केलेली स्ट्रिंग "" जुळत आहे, तर याचा अर्थ असा की प्रत्यक्षात काहीही प्रविष्ट केले गेले नाही. आणि आमच्या वापरकर्त्याला एक त्रुटी संदेश प्राप्त होईल. काहीतरी योग्यरित्या प्रविष्ट केले असल्यास, वापरकर्त्यास पुष्टीकरण प्राप्त होईल - ठीक आहे.
पुढील समस्या अशी आहे की वापरकर्ता फॉर्म फील्डमध्ये फक्त स्पेस प्रविष्ट करू शकतो. आणि ही योग्यरित्या प्रविष्ट केलेली माहिती म्हणून स्वीकारली जाईल! तुमची इच्छा असल्यास, तुम्ही नक्कीच या शक्यतेसाठी चेक जोडू शकता आणि ते वगळू शकता. मला विश्वास आहे की येथे सादर केलेल्या माहितीच्या आधारे हे करणे सोपे होईल.
आता फंक्शनचा विचार करू चाचणी2(फॉर्म). येथे पुन्हा एंटर केलेल्या स्ट्रिंगची तुलना रिकाम्या स्ट्रिंगशी केली जाते - "" (वाचकाने खरोखर काहीतरी प्रविष्ट केले आहे याची खात्री करण्यासाठी). तथापि, आम्ही if कमांडमध्ये आणखी काही जोडले आहे. वर्ण संयोजन || OR ऑपरेटर म्हणतात. परिचयाच्या सहाव्या भागात तुमची त्याच्याशी आधीच ओळख झाली आहे.
if स्टेटमेंट पहिली किंवा दुसरी तुलना संपते की नाही हे तपासते. त्यांपैकी किमान एक कार्यान्वित झाल्यास, संपूर्णपणे if कमांड खरी ठरते आणि म्हणून पुढील स्क्रिप्ट कमांड कार्यान्वित केली जाईल. थोडक्यात, तुम्ही दिलेली स्ट्रिंग रिक्त असल्यास किंवा @ चिन्ह गहाळ असल्यास तुम्हाला एक त्रुटी संदेश प्राप्त होईल. (if कमांडमधील दुसरे विधान हे सुनिश्चित करते की प्रविष्ट केलेल्या स्ट्रिंगमध्ये @ आहे.)

विशिष्ट वर्णांची उपस्थिती तपासत आहे

काही प्रकरणांमध्ये, आपल्याला फॉर्ममध्ये प्रविष्ट केलेली माहिती केवळ वर्ण किंवा संख्यांच्या विशिष्ट संचापर्यंत मर्यादित करण्याची आवश्यकता असेल. दूरध्वनी क्रमांकांबद्दल लक्षात ठेवणे पुरेसे आहे - सादर केलेल्या माहितीमध्ये फक्त संख्या असणे आवश्यक आहे (असे गृहीत धरले जाते की टेलिफोन नंबरमध्ये कोणतेही वर्ण नाहीत). प्रविष्ट केलेला डेटा क्रमांक आहे का ते तपासणे आवश्यक आहे. परिस्थितीची जटिलता अशी आहे की बहुतेक लोक फोन नंबरमध्ये भिन्न चिन्हे देखील घालतात - उदाहरणार्थ: 01234-56789, 01234/56789 किंवा 01234 56789 (आत स्पेस कॅरेक्टरसह). वापरकर्त्याला टेलिफोन नंबरमध्ये अशा वर्णांना नकार देण्याची सक्ती केली जाऊ नये. म्हणून, आम्ही आमच्या स्क्रिप्टला संख्या आणि काही चिन्हे तपासण्याच्या प्रक्रियेसह पूरक केले पाहिजे. समस्येचे निराकरण खालील उदाहरणात दर्शविले आहे:

दूरध्वनी:

या स्क्रिप्टसाठी स्त्रोत कोड:

टेलिफोन: test() फंक्शन एंटर केलेल्या वर्णांपैकी कोणते वर्ण वैध मानले जातात हे निर्धारित करते.

फॉर्ममध्ये प्रविष्ट केलेली माहिती प्रदान करणे

फॉर्मवर प्रविष्ट केलेली माहिती संप्रेषण करण्यासाठी कोणते पर्याय आहेत? ईमेलद्वारे फॉर्म डेटा पाठवणे हा सर्वात सोपा मार्ग आहे (आम्ही ही पद्धत अधिक तपशीलवार पाहू).
फॉर्ममध्ये प्रविष्ट केलेल्या डेटाचे सर्व्हरद्वारे परीक्षण केले जावे असे तुम्हाला वाटत असल्यास, तुम्ही CGI (कॉमन गेटवे इंटरफेस) इंटरफेस वापरणे आवश्यक आहे. नंतरचे आपल्याला डेटावर स्वयंचलितपणे प्रक्रिया करण्याची परवानगी देते. उदाहरणार्थ, सर्व्हर माहितीचा डेटाबेस तयार करू शकतो जो काही क्लायंटसाठी प्रवेशयोग्य आहे. दुसरे उदाहरण म्हणजे शोध पृष्ठे जसे की Yahoo. ते सहसा एक फॉर्म प्रदान करतात जे तुम्हाला तुमचा स्वतःचा डेटाबेस शोधण्यासाठी क्वेरी तयार करण्यास अनुमती देतात. परिणामी, वापरकर्त्याला संबंधित बटणावर क्लिक केल्यानंतर लगेच प्रतिसाद प्राप्त होतो. या सर्व्हरची देखरेख करण्यासाठी जबाबदार असलेले लोक त्याने निर्दिष्ट केलेला डेटा वाचून आवश्यक माहिती मिळेपर्यंत त्याला प्रतीक्षा करावी लागणार नाही. हे सर्व सर्व्हरद्वारे आपोआप केले जाते. JavaScript तुम्हाला अशा गोष्टी करण्याची परवानगी देत नाही.
तुम्ही JavaScript वापरून वाचकांच्या पुनरावलोकनांचे पुस्तक तयार करू शकणार नाही, कारण JavaScript सर्व्हरवरील कोणत्याही फाइलवर डेटा लिहू शकत नाही. तुम्ही हे फक्त CGI इंटरफेसद्वारे करू शकता. अर्थात, आपण एक पुनरावलोकन पुस्तक तयार करू शकता ज्यासाठी वापरकर्ते ईमेलद्वारे माहिती पाठवतात. तथापि, या प्रकरणात आपण व्यक्तिचलितपणे पुनरावलोकने प्रविष्ट करणे आवश्यक आहे. आपण दररोज 1000 पुनरावलोकने प्राप्त करण्याची अपेक्षा करत नसल्यास हे केले जाऊ शकते.
संबंधित स्क्रिप्ट साधा HTML मजकूर असेल. आणि येथे जावास्क्रिप्ट प्रोग्रामिंगची अजिबात गरज नाही! अर्थात, जर तुम्हाला फॉर्ममध्ये एंटर केलेला डेटा पाठवण्यापूर्वी तपासण्याची आवश्यकता असेल तर केस वगळता - आणि येथे तुम्हाला खरोखर JavaScript आवश्यक आहे. मी फक्त जोडले पाहिजे की मेलटो कमांड सर्वत्र कार्य करत नाही - उदाहरणार्थ, मायक्रोसॉफ्ट इंटरनेट एक्सप्लोरर 3.0 मध्ये यासाठी कोणतेही समर्थन नाही.

तुम्हाला हे पेज आवडते का? अजिबात नाही.
वेळेचा अपव्यय.
वेबवरील सर्वात वाईट साइट.
पॅरामीटर enctype="text/plain"कोणत्याही एन्कोड केलेल्या भागांशिवाय फक्त साधा मजकूर पाठवण्यासाठी वापरला जातो. यामुळे असे मेल वाचणे खूप सोपे होते.

नेटवर्कवर सबमिट करण्यापूर्वी तुम्हाला एखादा फॉर्म प्रमाणित करायचा असल्यास, तुम्ही हे करण्यासाठी onSubmit इव्हेंट हँडलर वापरू शकता. आपण या प्रोग्रामला कॉल टॅगमध्ये ठेवणे आवश्यक आहे. उदाहरणार्थ:

फंक्शन व्हॅलिडेट() ( // इनपुट ठीक आहे का ते तपासा // ... जर (इनपुटओके) खरे दिले तर खोटे परत करा; ) ... ... चुकीच्या नोंदी असल्यास अशा प्रकारे संकलित केलेला फॉर्म इंटरनेटवर पाठविला जाणार नाही. डेटा तयार केला.

विशिष्ट फॉर्म घटक निवडणे

फोकस() पद्धतीचा वापर करून तुम्ही तुमचा फॉर्म अधिक वापरकर्ता-अनुकूल बनवू शकता. म्हणून, कोणता घटक प्रथम हायलाइट केला जाईल हे तुम्ही निवडू शकता. किंवा तुम्ही ब्राउझरला चुकीचा डेटा एंटर केलेला फॉर्म हायलाइट करण्यास सांगू शकता. म्हणजेच, ब्राउझर स्वतः आपण निर्दिष्ट केलेल्या फॉर्म घटकावर कर्सर ठेवेल, जेणेकरून वापरकर्त्याला तेथे काहीही प्रविष्ट करण्यापूर्वी फॉर्मवर क्लिक करावे लागणार नाही. तुम्ही खालील स्क्रिप्टचा तुकडा वापरून हे करू शकता:

फंक्शन सेटफोकस() ( document.first.text1.focus(); )

आम्ही वाचण्याची शिफारस करतो

व्हायरस आणि मालवेअर काढून टाकण्यासाठी सर्वोत्तम उपयुक्तता

मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...

कार्यक्रमांची चाचणी कशी झाली

कोणत्याही स्टोरेज मीडियावरून डेटा रिकव्हरीसाठी सर्वोत्तम प्रोग्राम....

CPU लोड कसे कमी करावे: समस्येचे निराकरण करण्यासाठी सोप्या परंतु प्रभावी पद्धती

हॅलो का सर्वात सामान्य कारणांपैकी एक...

सोपे जावास्क्रिप्ट पेमेंट फॉर्म समाविष्ट करणे. JavaScript मध्ये फॉर्म प्रमाणीकरण. अधिक जटिल फॉर्म

आम्ही वाचण्याची शिफारस करतो

साइट शोध