() translation by (you can also view the original English article)
निश्चित रूप से अच्छा है कि आपके मेल बास्केट के बगल में एक पत्र खोलने वाला, आपके लोफ़र्स के बगल में एक शूहॉर्न (shoehorn), और अपने नाइटस्टैंड द्वारा एक फ्लैशलाइट अच्छा है। इसी प्रकार, जब आपको कुछ गणित करने की आवश्यकता होती है तो कैलकुलेटर काम का होता है। यह ट्यूटोरियल और डाउनलोड आपको दिखाता है कि इस को किसी वेबसाइट पर कैसे रखा जाए।
यूजर इंटरफेस विचार
नंबर 1 से 9 के साथ कुछ बटन, कुछ फंक्शन्स, और एक बड़ा "equals" का बटन। यही सब एक कैलक्यूलेटर होता है सही है? यह बहुत आसान होना चाहिए। कोई प्रोग्रामिंग लैंगेज आसानी से इसे संभाल सकती है। बेशक, लेकिन एक कैलकुलेटर जैसी आसान चीजों के लिए भी कुछ बाते होती हैं जिनका हमे तब ध्यान देना होता है जब इसे डिज़ाइन करते हैं की यह वास्तव में कैसे काम करता है।
इस आर्टिकल का स्क्रीनकास्ट ज्यादातर उन चीज़ों पर केंद्रित है, और डाउन-एंड-डर्टी कोडिंग के बारे में कम है। जबकि इस लिखित हिस्से को कोड पर केंद्रित किया जाएगा। फिर भी, यहां कुछ छोटे यूजर इंटरफ़ेस डिटेल्स का क्विक ओवरव्यू है:
- जब कैलक्यूलेटर लोड होता है, तो 0 (शून्य) डिस्प्ले में होता है। नंबर 2 दबाकर नंबर 02 नहीं बनता है, यह सिर्फ 2 है।
- जब आप फ़ंक्शन key दबाते हैं, तो डिस्प्ले में अभी दिखने वाला नंबर कैलकुलेशन के पहले नंबर के रूप में लॉक हो जाता है, लेकिन यह वहीं रहता हैं जहाँ यह अभी है। जब कोई दूसरा नंबर दबाया जाता है, यह नंबर बदल जाता है।
- यदि फ़ंक्शन key को दबाया जाता है, और फिर एक अलग फ़ंक्शन key को दबाया जाता है, तो सबसे अंत में दबाये गए फ़ंक्शन का उपयोग किया जाएगा।
- कैलकुलेशन के बाद, दो संभावित परिदृश्य हैं। A) एक नए नंबर को दबाया जाता है। यह पूरी तरह से कैलकुलेटर को रीसेट करेगा और इस नंबर के साथ ताजा शुरुआत करेगा। B) एक फ़ंक्शन key को दबाया जाता है, जो टोटल को "पहले" नंबर के रूप में लॉक कर देगा, जिससे टोटल पर दूसरी कैलकुलेशन करने की अनुमति मिलती है
- clear बटन को विज्ञापित (advertised) के रूप में व्यवहार करने की आवश्यकता है, और कैलकुलेटर को पूरी तरह रीसेट कर दें
- जब जरूरत हो तो विज़ुअल फीडबैक का उपयोग करने की आवश्यकता है, लेकिन अधिक महत्वपूर्ण बात यह है कि फंक्शनलिटी को दुनिया भर में डेस्कटॉप पर असंख्य कैलकुलेटर द्वारा स्टैण्डर्ड सेट अप करने की आवश्यकता होती है /
लिस्ट आगे भी जा सकती है, लेकिन आपने देखा कि सबसे सरलतम इंटरफेस को भी काफी ध्यान देने कि आवश्यकता होती।
HTML मार्कअप
यहाँ कुछ भी फैंसी नहीं है। हमें कैलकुलेटर के लिए एक कंटेनर चाहिए, हमें एक डिस्प्ले चाहिए, और हमें बटनों का एक गुच्छा चाहिए। <div>, <input>, और <a> इसे अच्छी तरह से करेंगे। जावास्क्रिप्ट यहां सभी काम कर रहा है, वहां कोई "स-सम्मान गिरावट" नहीं चल रही है। यदि जावास्क्रिप्ट डिसेबल्ड है, तो यह कैलक्यूलेटर काम नहीं करेगा, इसलिए हम इसे पूरी तरह छुपाएंगे। तो, हम इसे वास्तविक बनाने वाले नहीं हैं, तो <input> क्यों? इनपुट टेक्स्ट को मैन्युअल रूप से दर्ज करने की अनुमति देते हैं, जिसे हम अनुमति देंगे। वे आसानी से चयन करने की अनुमति देते हैं, और उनके पास "value" एट्रिब्यूट है, जो प्राप्त करने और सेटिंग के लिए आसान है।
यहां पूरी किट और kaboodle है:
1 |
<div id="calculator"> |
2 |
|
3 |
<input type="text" id="display" /> |
4 |
|
5 |
<a class="num-button seven" href="#">7</a> |
6 |
<a class="num-button eight" href="#">8</a> |
7 |
<a class="num-button nine" href="#">9</a> |
8 |
|
9 |
<a class="num-button four" href="#">4</a> |
10 |
<a class="num-button five" href="#">5</a> |
11 |
<a class="num-button six" href="#">6</a> |
12 |
|
13 |
<a class="num-button one" href="#">1</a> |
14 |
<a class="num-button two" href="#">2</a> |
15 |
<a class="num-button three" href="#">3</a> |
16 |
|
17 |
<a class="num-button zero" href="#">0</a> |
18 |
<a class="num-button dot" href="#">.</a> |
19 |
<a class="clear-button clear" href="#">C</a> |
20 |
|
21 |
<a class="function-button add" href="#"> </a> |
22 |
<a class="function-button subtract" href="#">–</a> |
23 |
<a class="function-button multiply" href="#">x</a> |
24 |
<a class="function-button divide" href="#">/</a> |
25 |
|
26 |
<a class="equals-button" href="#">=</a> |
27 |
|
28 |
</div>
|
पूर्ण स्क्रीनकास्ट
इमेजेज को बनाना
हमें केवल कुछ चाहिए। पूरे कैलकुलेटर की बैकग्राउंड, एक "नंबर" स्टाइल बटन, एक "फ़ंक्शन" स्टाइल बटन, और "equals" बटन। प्रत्येक नंबर और फ़ंक्शन को इसकी अपनी इमेज की आवश्यकता नहीं होती है, हम केवल सबसे ऊपर टेक्स्ट डाल देंगे। मुझे लगता है कि "Arial Black" एक अच्छा बोल्ड और कैलकुलेटर-जैसे फ़ॉन्ट बनाता है।
बाद में जब हम कैलकुलेटर को खोलते और बंद कर देते हैं, तो हम "mini" कैलक्यूलेटर ग्राफ़िक और "close" बटन का उपयोग करेंगे।
CSS के साथ स्टाइलिंग
फिर से कुछ भी फैंसी नहीं है। अब्सोल्युट पोजिशनिंग चीजों को बनाने में सबसे अधिक काम करता है और उन्हें वहां डालता है जहां उन्हें होना चाहिए। हम खुद कैलकुलेटर के div में position: relative; सेट करते हैं और फिर हम इसके अंदर अब्सोल्युट पोजीशन करने के लिए स्वतंत्र हैं।
यहां इनमे से बहुत कुछ है:
1 |
* { margin: 0; padding: 0; } |
2 |
body { font: 25px "Arial Black", Arial, Sans-Serif; } |
3 |
|
4 |
#page-wrap { width: 500px; margin: 25px auto; } |
5 |
|
6 |
h1 { font-size: 22px; } |
7 |
p { font: 14px Arial, Sans-Serif; } |
8 |
a { color: black; text-decoration: none; outline: none; } |
9 |
|
10 |
#calculator { width: 266px; height: 400px; background: url(../images/calc-bg.png) no-repeat; |
11 |
position: relative; display: none; } |
12 |
|
13 |
#display { background: none; border: none; position: absolute; |
14 |
top: 15px; left: 15px; width: 197px; text-align: right; |
15 |
font: 35px "Arial Black", Arial, Sans-Serif; } |
16 |
|
17 |
.num-button { width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center; |
18 |
background: url(../images/button-bg.png) no-repeat; |
19 |
position: absolute; display: block; } |
20 |
.clear-button { width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center; |
21 |
background: url(../images/button-bg.png) no-repeat; |
22 |
position: absolute; display: block; } |
23 |
.function-button { width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center; |
24 |
background: url(../images/function-button-bg.png) no-repeat; |
25 |
position: absolute; display: block; } |
26 |
.function-button:active, |
27 |
.pendingFunction { background-position: bottom left; } |
28 |
|
29 |
.seven { top: 86px; left: 15px; } |
30 |
.eight { top: 86px; left: 66px; } |
31 |
.nine { top: 86px; left: 118px; } |
32 |
|
33 |
/* ... the rest of the buttons ... */
|
34 |
|
35 |
.multiply { top: 188px; left: 169px; } |
36 |
.divide { top: 237px; left: 169px; } |
37 |
|
38 |
.equals-button { width: 206px; height: 42px; text-align: center; top: 293px; left: 15px; |
39 |
background: url(../images/equals-bg.png) no-repeat; position: absolute; |
40 |
display: block; } |
JQuery एन्वॉयरन्मेंट की स्थापना
HTML में, हमारे पास अपनी खुद की jQuery जावास्क्रिप्ट लिखना शुरू करने के लिए तैयार होने के लिए कुछ कॉल करने हैं। अर्थात्, jQuery और jQuery UI लाइब्रेरी लोड करना और हमारी जल्द से जल्द मौजूद जावास्क्रिप्ट फ़ाइल को कॉल करना।
1 |
<script src="http://www.google.com/jsapi" type="text/javascript"></script> |
2 |
<script type="text/javascript"> |
3 |
google.load("jquery", "1.3.1"); |
4 |
</script>
|
5 |
<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc6.min.js"></script> |
6 |
<script type="text/javascript" src="js/example.js"></script> |
सेट अप करना
आइए कुछ बेसिक्स को डालें। चीजों को सही करने के लिए हमें क्लासिक "When the DOM is ready" स्टेटमेंट की आवश्यकता होगी। यह सभी जावास्क्रिप्ट के लिए आम है क्योंकि हम सभी एलिमेंट्स के लोड होने से पहले उनके साथ कुछ भी नहीं करना चाहते हैं। फिर हमने कुछ बुनियादी इवेंट्स स्थापित करते हैं जिन्हें हम जानते हैं कि वो होने जा रहे हैं। हमारे पास प्रत्येक प्रकार के बटन के लिए एक क्लिक ईवेंट और फ़ंक्शन होगा। हम अपने कैलकुलेटर को ड्रैगगेबल बनाने के लिए jQuery UI फ़ंक्शन को भी कॉल करेंगे, साथ ही छोटे छोटे फ़ंक्शन को इसकी विजिबिलिटी को टॉगल करने की अनुमति भी होगी।
1 |
$(function(){ |
2 |
|
3 |
$(".num-button").click(function(){ |
4 |
// do stuff
|
5 |
});
|
6 |
|
7 |
$(".clear-button").click(function(){ |
8 |
// do stuff
|
9 |
});
|
10 |
|
11 |
$(".function-button").click(function(){ |
12 |
// do stuff
|
13 |
});
|
14 |
|
15 |
$(".equals-button").click(function(){ |
16 |
// do stuff
|
17 |
});
|
18 |
|
19 |
$("#calculator").draggable(); |
20 |
|
21 |
$("#opener, #closer").click(function(){ |
22 |
$("#opener").toggle(); |
23 |
$("#calculator").toggle(); |
24 |
});
|
25 |
|
26 |
});
|
वेरिएबल्स के लिए .data() का उपयोग करना, ग्लोबल्स नहीं
जावास्क्रिप्ट में वेरिएबल्स उस फ़ंक्शन के लिए लोकल हैं, जिनमे वे बनते हैं। जब आपको एक को दूसरे में पास करने की आवश्यकता होती है, तो आप इसे नए फ़ंक्शन पर कॉल करते समय पैरामीटर के रूप में पास करके ऐसा करते हैं। यह सब ठीक है और अच्छा है, लेकिन हमारे पास उनमें से सात हैं और हमारे अधिकांश फंक्शन्स को किसी न किसी रूप में उन सभी की आवश्यकता होगी। हर समय उन सभी को पास करना थोड़ा मुश्किल कार्य होता है। हमें वास्तव में ग्लोबल वेरिएबल्स की आवश्यकता है, लेकिन जैसा कि मैं इसे समझता हूं यह एक तरह का नो-नो (नेमस्पेस पर उल्लंघन करने वाला कुछ है) है।
वैसे भी, data() फ़ंक्शन को संभालने के लिए jQuery के पास एक बेहतर तरीका है। हम किसी भी jQuery ऑब्जेक्ट के साथ "data" को अटैच कर सकते हैं, और वह डेटा उस ऑब्जेक्ट के साथ ही चलता है जहां कहीं भी वह जाता है। ख़ास तौर पर एक एट्रिब्यूट की तरह, केवल आप इसे वास्तव में DOM में नहीं देख सकते हैं। यह मूल रूप से वो करता है जो ग्लोबल वेरिएबल्स हमारे लिए करेंगे और यह उपयोग करने में उतना ही आसान है। यहां डेटा के वो टुकड़े हैं जिनका हम उपयोग करेंगे:
- ValueOne - समीकरण में पहला नंबर
- ValueOneLocked - क्या वह पहला नंबर जाने के लिए तैयार है?
- ValueTwo - समीकरण में दूसरा नंबर
- ValueTwoLocked - क्या वह दूसरा नंबर जाने के लिए तैयार है?
- IsPendingFunction - क्या कोई फ़ंक्शन चुना गया है?
- thePendingFunction - कौन सा?
- fromPrevious - क्या एक कैलकुलेशन अभी की गयी है?
हम डेटा के इन बिट्स को #display इनपुट में जोड़ने जा रहे हैं, जो हमारे कैलकुलेटर के दिमाग की तरह होगा। थोड़ा समझ में आता है। हमें डेटा के इन सभी बिट्स के लिए डिफ़ॉल्ट वैल्यू सेट अप करने की आवश्यकता होगी, लेकिन चलो एक पल सोचें। हम इसे main फंक्शन में कर सकते हैं, लेकिन चलो स्मार्ट बनो और इसे अलग एक फंक्शन में अब्स्ट्रक्ट करें। ऐसे कई परिदृश्य होंगे जहाँ हमें इन वैल्यूज को रीसेट करने की आवश्यकता होगी, इसलिए आइए इस कार्य करने के लिए resetCalculator नामक एक फ़ंक्शन बनाएं। फिर जब भी हमें इसकी आवश्यकता होगी तो हम इस फंक्शन को कॉल कर सकते हैं। चलिए एक नंबर पैरामीटर को स्वीकार करते हैं, और कैलकुलेटर को उस वैल्यू पर रीसेट करते हैं। जब कैलक्यूलेटर लोड होता है, तो वह शून्य होगा, लेकिन फ़ंक्शन के बाद, हम फिर से रीसेट करेंगे कैलकुलेशन की अंतिम वैल्यू पर रीसेट करें।
1 |
function resetCalculator(curValue) { |
2 |
$("#display").val(curValue); |
3 |
$(".function-button").removeClass("pendingFunction"); |
4 |
$("#display").data("isPendingFunction", false); |
5 |
$("#display").data("thePendingFunction", ""); |
6 |
$("#display").data("valueOneLocked", false); |
7 |
$("#display").data("valueTwoLocked", false); |
8 |
$("#display").data("valueOne", curValue); |
9 |
$("#display").data("valueTwo", 0); |
10 |
$("#display").data("fromPrevious", false); |
11 |
}
|
जब आप किसी नंबर पर क्लिक करते हैं...
जैसा कि यह पता चला है, जब आप किसी नंबर पर क्लिक करते हैं तो कैलकुलेटर क्या करता है, यह पूरी कोड का सबसे जटिल हिस्सा है। कैलकुलेटर में चार "स्टेट्स" हो सकते हैं और जब आप उस स्टेट के आधार पर किसी नंबर पर क्लिक करते हैं तो यह अलग-अलग व्यवहार करेगा। वो हैं:
- A) पूरी तरह से फ्रेश स्टेट में एक नंबर पर क्लिक करना (डिस्प्ले शून्य को दिखाता है), या जब कोई भी नंबर अभी तक लॉक न हो।
- B) फ़ंक्शन बटन के बाद किसी नंबर पर क्लिक करने को सेलेक्ट किया गया है।
- C) फ़ंक्शन बटन के बाद किसी नंबर पर क्लिक करने के लिए सेलेक्ट किया गया है और अतिरिक्त नंबर एंटर किया गया है।
- D) कैलकुलेशन के बाद एक नंबर पर अभी क्लिक किया गया है।
हमारे व्यवहार को निम्नलिखित होना चाहिए:
- A) नए नंबर को पहले से मौजूद में जोड़ दें। यदि यह शून्य है, तो उसे बदलें।
- B) पहले नंबर को लॉक करें, डिस्प्ले को नए नंबर से बदलें।
- C) नए नंबर को पहले से मौजूद में जोड़ें।
- D) उस नंबर नंबर में कैलकुलेटर को रीसेट करें।
और कोड में यह सब कुछ है:
1 |
$(".num-button").click(function(){ |
2 |
|
3 |
if ($("#display").data("fromPrevious") == true) { |
4 |
|
5 |
resetCalculator($(this).text()); |
6 |
|
7 |
} else if (($("#display").data("isPendingFunction") == true) && ($("#display").data("valueOneLocked") == false)) { |
8 |
|
9 |
$("#display").data("valueOne", $("#display").val()); |
10 |
$("#display").data("valueOneLocked", true); |
11 |
|
12 |
$("#display").val($(this).text()); |
13 |
$("#display").data("valueTwo", $("#display").val()); |
14 |
$("#display").data("valueTwoLocked", true); |
15 |
|
16 |
// Clicking a number AGAIN, after first number locked and already value for second number
|
17 |
} else if (($("#display").data("isPendingFunction") == true) && ($("#display").data("valueOneLocked") == true)) { |
18 |
|
19 |
var curValue = $("#display").val(); |
20 |
var toAdd = $(this).text(); |
21 |
|
22 |
var newValue = curValue toAdd; |
23 |
|
24 |
$("#display").val(newValue); |
25 |
|
26 |
$("#display").data("valueTwo", $("#display").val()); |
27 |
$("#display").data("valueTwoLocked", true); |
28 |
|
29 |
// Clicking on a number fresh
|
30 |
} else { |
31 |
|
32 |
var curValue = $("#display").val(); |
33 |
if (curValue == "0") { |
34 |
curValue = ""; |
35 |
}
|
36 |
|
37 |
var toAdd = $(this).text(); |
38 |
|
39 |
var newValue = curValue toAdd; |
40 |
|
41 |
$("#display").val(newValue); |
42 |
|
43 |
}
|
44 |
|
45 |
});
|
फ़ंक्शन बटन से निपटना आसान है। असल में जब आप इसे क्लिक करते हैं, तो यह पहले नंबर को लॉक करता है ताकि नंबर बटन पता हो कि यह दूसरा नंबर शुरू करने का समय है। यद्यपि एक विशेष सोचने लायक बात है, और वह है क्या करना है जब एक कैलकुलेशन के तुरंत बाद फ़ंक्शन बटन दबाया जाता है। उस स्थिति में, पहले नंबर को अंतिम वैल्यू के रूप में लॉक करने की आवश्यकता है और वह पहले नंबर को स्वीकार करने के लिए तैयार हो गया है। यह कैल्श्यूशन के चैन के लिए अनुमति देता है, जो काफी उपयोगी है।
क्लिक करने पर, सभी फ़ंक्शन बटनों को एक विशेष "pendingFunction" क्लास से साफ़ कर दिया जाता है, और उसके बाद उस क्लास को विशिष्ट क्लिक पर लागू किया जाता है। यह हमें बैकग्राउंड की स्थिति को स्थानांतरित करने के लिए CSS कंट्रोल देता है और कुछ विज़ुअल फीडबैक देता है जिस पर वर्तमान में एक्टिव फंक्शन है।
1 |
$(".function-button").click(function(){ |
2 |
|
3 |
if ($("#display").data("fromPrevious") == true) { |
4 |
resetCalculator($("#display").val()); |
5 |
$("#display").data("valueOneLocked", false); |
6 |
$("#display").data("fromPrevious", false) |
7 |
}
|
8 |
|
9 |
// Let it be known that a function has been selected
|
10 |
var pendingFunction = $(this).text(); |
11 |
$("#display").data("isPendingFunction", true); |
12 |
$("#display").data("thePendingFunction", pendingFunction); |
13 |
|
14 |
// Visually represent the current function
|
15 |
$(".function-button").removeClass("pendingFunction"); |
16 |
$(this).addClass("pendingFunction"); |
17 |
});
|
और जवाब है...
equals फंक्शन भी काफी सरल है। पहली बात यह है कि हम जांच करते हैं कि क्या हम वास्तव में कोई कैलकुलेशन करने के लिए तैयार हैं। हम जानते हैं कि दोनों नंबर "लॉक" हैं। यदि वे हैं, तो अंतिम नंबर प्राप्त करने के लिए थोड़ा गणित करें और फिर कैलकुलेटर को "रीसेट करें" जो अंतिम वैल्यू (और "fromPrevious" को true पर सेट करें ताकि हम उस नाज़ुक स्थिति को जानते हों जिसमें हम हैं)।
अगर नंबर्स लॉक नहीं हैं.... कुछ भी नहीं करें।
1 |
$(".equals-button").click(function(){ |
2 |
|
3 |
if (($("#display").data("valueOneLocked") == true) && ($("#display").data("valueTwoLocked") == true)) { |
4 |
|
5 |
if ($("#display").data("thePendingFunction") == " ") { |
6 |
var finalValue = parseFloat($("#display").data("valueOne")) parseFloat($("#display").data("valueTwo")); |
7 |
} else if ($("#display").data("thePendingFunction") == "%u2013") { |
8 |
var finalValue = parseFloat($("#display").data("valueOne")) - parseFloat($("#display").data("valueTwo")); |
9 |
} else if ($("#display").data("thePendingFunction") == "x") { |
10 |
var finalValue = parseFloat($("#display").data("valueOne")) * parseFloat($("#display").data("valueTwo")); |
11 |
} else if ($("#display").data("thePendingFunction") == "/") { |
12 |
var finalValue = parseFloat($("#display").data("valueOne")) / parseFloat($("#display").data("valueTwo")); |
13 |
}
|
14 |
|
15 |
$("#display").val(finalValue); |
16 |
|
17 |
resetCalculator(finalValue); |
18 |
$("#display").data("fromPrevious", true); |
19 |
|
20 |
} else { |
21 |
// both numbers are not locked, do nothing.
|
22 |
}
|
23 |
|
24 |
});
|
स्पष्ट है!
अंतिम लेकिन किसी से कम नहीं, clear बटन उन सभी में से सबसे सरल है। इसे दबाएं, शून्य पर कैलकुलेटर क्लियर करें।
1 |
$(".clear-button").click(function(){ |
2 |
resetCalculator("0"); |
3 |
});
|
और हमने कर लिया
और यह पूरा हो गया दोस्तों। मुझे आशा है कि लाइव उदाहरण, स्क्रीनकास्ट, और यह लिखित ट्यूटोरियल के बीच यह एक मूल्यवान सीखने का सेशन रहा है। इसे बनाने के दौरान मैंने निश्चित रूप से कुछ चीजें सीखीं। यदि आप इसके किसी भी बेहद उपयोगी ऍप्लिकेशन्स के बारे में सोच सकते हैं, तो मुझसे संपर्क करें और मुझे बताएं।
