HTML में कैलकुलेटर प्रोग्रामिंग

लेखक: Tamara Smith
निर्माण की तारीख: 27 जनवरी 2021
डेट अपडेट करें: 1 जुलाई 2024
Anonim
html और css का उपयोग करके कैलकुलेटर कैसे बनाएं
वीडियो: html और css का उपयोग करके कैलकुलेटर कैसे बनाएं

विषय

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

कदम बढ़ाने के लिए

4 का भाग 1: कोड को समझना

  1. जानें कि प्रत्येक HTML फ़ंक्शन क्या करता है। आपके कैलकुलेटर को बनाने के लिए आप जिस कोड का उपयोग कर रहे हैं, उसमें कई अलग-अलग प्रकार के सिंटैक्स होते हैं जो एक साथ एक दस्तावेज़ के विभिन्न तत्वों को परिभाषित करते हैं। इस प्रक्रिया की व्याख्या के लिए यहां क्लिक करें, या कैलकुलेटर बनाने के लिए कोड की प्रत्येक पंक्ति क्या करेगी, इसके बारे में अधिक जानने के लिए पढ़ें।
    • एचटीएमएल: यह सिंटैक्स बिट के बाकी दस्तावेज़ को बताता है कि कोड में किस भाषा का उपयोग किया जाएगा। कोड करने के लिए कई भाषाएँ हैं और इस मामले में html> यह बाकी दस्तावेज़ों को स्पष्ट करता है कि यह किस में है - आपने अनुमान लगाया - html।
    • सिर: दस्तावेज़ को बताता है कि डेटा के बारे में डेटा के बाद सब कुछ, जिसे "मेटाडेटा" भी कहा जाता है। हेड> कमांड आमतौर पर एक दस्तावेज़ के शैलीगत तत्वों को परिभाषित करने के लिए उपयोग किया जाता है, जैसे शीर्षक, शीर्षक आदि। इसे एक छत्र के रूप में सोचें जिसके तहत बाकी कोड परिभाषित किया गया है।
    • शीर्षक: आपके दस्तावेज़ का शीर्षक यहाँ इंगित किया गया है। इस विशेषता का उपयोग दस्तावेज़ के शीर्षक को इंगित करने के लिए किया जाता है जब इसे HTML ब्राउज़र में खोला जाता है।
    • शरीर bgcolor = "#": यह विशेषता HTML पृष्ठ की पृष्ठभूमि और शरीर का रंग निर्धारित करती है। उद्धरण चिह्न स्ट्रिंग के भीतर और # के बाद की संख्या एक विशिष्ट रंग से मेल खाती है।
    • पाठ = "": यह वाक्यविन्यास दस्तावेज़ के पाठ का रंग निर्धारित करता है।
    • फॉर्म का नाम = "": यह विशेषता किसी प्रपत्र का नाम निर्दिष्ट करती है, और इसका उपयोग उस संरचना के निर्माण के लिए किया जाता है, जो इस बात के आधार पर होती है कि जावास्क्रिप्ट किस रूप के नाम का अर्थ जानता है। उदाहरण के लिए, हम जिस फॉर्म नाम का उपयोग करने जा रहे हैं, वह "कैलकुलेटर" है, जिसे हम दस्तावेज़ के लिए एक विशिष्ट संरचना बनाने के लिए उपयोग करने जा रहे हैं।
    • इनपुट प्रकार = "": यह वह जगह है जहाँ कुछ होता है। विशेषता "इनपुट प्रकार" दस्तावेज़ के पार्सर को बताता है कि उद्धरण चिह्नों के बीच मूल्यों में किस तरह का पाठ निहित है। उदाहरण के लिए, यह एक पाठ, एक पासवर्ड, एक बटन (जैसा कि कैलकुलेटर के साथ मामला होगा), आदि हो सकता है।
    • मान = "": यह कमांड दस्तावेज़ के पार्सर को बताता है कि उपरोक्त इनपुट प्रकार में क्या शामिल है। एक कैलकुलेटर के लिए, ये संख्याएं (1-9) और संचालन (+, -, *, /, =) हैं।
    • OnClick = "": यह सिंटैक्स एक घटना का वर्णन करता है, यह दर्शाता है कि बटन क्लिक होने पर कुछ किया जाना चाहिए। एक कैलकुलेटर के लिए, हम चाहते हैं कि प्रत्येक बटन पर पाठ को ऐसे ही पहचाना जाए। इसलिए "6" बटन से पहले, हम उद्धरण चिह्नों के बीच document.calculator.ans.value + = "6" डालते हैं।
    • बीआर: यह टैग दस्तावेज़ में एक नई पंक्ति बनाता है, ताकि पाठ (या कुछ और) उसके बाद किसी दूसरी पंक्ति में रखा जाए।
    • / फॉर्म, / बॉडी और / html: ये कमांड्स पहले से डॉक्यूमेंट में खोले गए कमांड के लिए क्लोजर हैं।

भाग 2 का 4: एक HTML कैलकुलेटर के लिए मानक कोड

  1. नीचे दिए गए कोड को कॉपी करें। नीचे दिए गए बॉक्स में बाईं माउस बटन को दबाकर और बॉक्स के नीचे बाईं तरफ से कर्सर को ऊपर दाईं ओर खींचकर पाठ का चयन करें, ताकि सारा पाठ नीला हो जाए। फिर कोड को क्लिपबोर्ड पर कॉपी करने के लिए एक पीसी पर "कमांड + सी" को मैक या "Ctrl + C" पर दबाएं।

html> सिर> शीर्षक> HTML कैलकुलेटर / शीर्षक> / सिर> शरीर bgcolor = "# 000000" पाठ = "सोना"> फ़ॉर्म नाम = "कैलकुलेटर"> इनपुट प्रकार = "बटन" मूल्य = "1" onClick = "दस्तावेज़। कैलकुलेटर .ans.value + = '1' "> इनपुट प्रकार =" बटन "मान =" 2 "onClick =" document.calculator.ans.value + = '2' "> इनपुट प्रकार =" बटन "मूल्य =" 3 "onClick =" document.calculator.ans.value + = '3' "> इनपुट प्रकार =" बटन "मान =" + "onClick =" document.calculator.ans.value + = '' "" इनपुट प्रकार = "" बटन "मान =" 4 "onClick =" document.calculator.ans.value + = '4' "> इनपुट प्रकार =" बटन "मूल्य =" 5 "onClick =" document.calculator.ans.value + = 5 ' "> इनपुट प्रकार =" बटन "मूल्य =" 6 "onClick =" document.calculator.ans.value + = '6' "> इनपुट प्रकार =" बटन "मूल्य =" - "onClick =" document.calculator .ans value + = '-' '> इनपुट प्रकार = "बटन" value = "7" onClick = "document.calculator.ans.value + =' 7 '"> इनपुट प्रकार = "बटन" मूल्य = "8" onClick = " document.calculator.ans.value + = '8' "> इनपुट प्रकार =" बटन "मान =" 9 "onClick =" document.calculator.ans.value + = '9' "> इनपुट प्रकार =" बटन "मान = " *" onClick = "document.calcul ator.ans.value + = ' *' "> इनपुट प्रकार =" बटन "मान =" / "onClick =" document.calculator.ans.value + = '/' "> इनपुट प्रकार =" बटन "मूल्य =" 0 "onClick =" document.calculator.ans.value + = '0'> इनपुट प्रकार = "रीसेट" मान = "रीसेट"> इनपुट प्रकार = "बटन" मूल्य = "=" onClick = "document.calerator.ans .value = eval (document.calculator.ans.value) "> br> प्रतिक्रिया isinput प्रकार =" textfield "नाम =" ans "value =" "> / form> / body> / html>

भाग 3 का 4: अपना खुद का कैलकुलेटर बनाना

  1. अपने कंप्यूटर पर एक टेक्स्ट एडिटर खोलें। उपयोग करने के लिए कई कार्यक्रम हैं, लेकिन सादगी के लिए हम टेक्स्टएडिट या नोटपैड से चिपके रहेंगे।
    • एक मैक पर, स्पॉटलाइट ग्लास को स्क्रीन के ऊपरी दाएं कोने में स्पॉटलाइट खोलने के लिए क्लिक करें। जब आप वहां पहुंचें, तो TextEdit टाइप करें और TextEdit प्रोग्राम पर क्लिक करें, जिसे अब नीले रंग में चुना जाना चाहिए।
    • एक पीसी पर, स्क्रीन के नीचे बाईं ओर प्रारंभ मेनू खोलें। सर्च बार में, नोटपैड टाइप करें और नोटपैड एप्लिकेशन पर क्लिक करें, जो दाईं ओर सर्च बार में दिखाई देगा।
  2. दस्तावेज़ में एक कैलकुलेटर के लिए HTML कोड पेस्ट करें।
    • एक मैक पर, दस्तावेज़ के शरीर पर क्लिक करें और दबाएं कमांड + वी। फिर पर क्लिक करें प्रारूप स्क्रीन के शीर्ष पर और फिर सादा पाठ करें कोड चिपकाने के बाद।
    • एक पीसी पर, दस्तावेज़ के शरीर पर और फिर पर क्लिक करें Ctrl + V.
  3. फ़ाइल सहेजें। आप विंडो के मुख्य मेनू में "फ़ाइल" के माध्यम से ऐसा करते हैं, और फिर साथ के रूप रक्षित करें... एक पीसी पर या सहेजें... ड्रॉप-डाउन मेनू से मैक पर।
  4. फ़ाइल नाम में HTML एक्सटेंशन जोड़ें। "Save As ..." मेनू में, फ़ाइल नाम टाइप करें, इसके बाद ".html", फिर "सहेजें" पर क्लिक करें। उदाहरण के लिए, यदि आप इस फ़ाइल को "मेरा पहला कैलकुलेटर" नाम देना चाहते हैं, तो फ़ाइल को "मेरा पहला कैलकुलेटर" के रूप में सहेजें।

भाग 4 का 4: अपने कैलकुलेटर का उपयोग करें

  1. आपके द्वारा बनाई गई फ़ाइल का पता लगाएं। ऐसा करने के लिए, पिछले चरण में बताए अनुसार फ़ाइल का नाम स्पॉटलाइट में या स्टार्ट मेनू के सर्च बार में लिखें। "Html" एक्सटेंशन टाइप करना भी आवश्यक नहीं है।
  2. इसे खोलने के लिए अपनी फ़ाइल पर क्लिक करें। आपका डिफ़ॉल्ट ब्राउज़र एक नए वेब पेज में आपके कैलकुलेटर को खोल देगा।
  3. उपयोग करने के लिए कैलकुलेटर पर बटन क्लिक करें। आपके समीकरणों के समाधान अब उत्तर पट्टी में दिखाई देंगे।

टिप्स

  • आप चाहें तो इस कैलकुलेटर को एक वेब पेज में शामिल कर सकते हैं।
  • कैलकुलेटर का लुक बदलने के लिए आप HTML स्टाइल का भी उपयोग कर सकते हैं।