Theory
પાનાએ પૂછવું અને કહેવું પડે છે
FestConnect ને student ને કહેવું છે 'Email ખૂટે છે', પૂછવું છે '2 events માટે નોંધણી, ખાતરી છે?', અને માંગવું છે 'તમારો coupon નો code લખો'. ત્રણ જુદી વાતચીત: સૂચના, હા/ના, અને લખાણની માંગણી.
JavaScript પાસે દરેક માટે જડેલી popup છે: alert, confirm, અને prompt. એ વાપરવામાં ઝડપી છે, પણ મહત્ત્વની વાત એ છે કે દરેક શું પાછું આપે છે, કારણ કે એ પાછું આપેલું મૂલ્ય જ તમારા code ને કહે છે કે વાપરનારે શું કર્યું.
Theory
સૂચના, ઘંટડી, મુલાકાતીપોથી
દુકાન મુલાકાતી સાથે વાત કરવાની ત્રણ રીત. દીવાલ પરની સૂચના ફક્ત જાણ કરે છે ('રવિવારે બંધ'): એ છે alert. હા/ના વાળી ઘંટડી ('એમને અંદર આવવા દઉં?'): એ છે confirm, જે true કે false લઈને પાછી આવે છે. મુલાકાતીપોથી જ્યાં એ પોતાનું નામ લખે છે: એ છે prompt, જે એમણે લખ્યું હોય એ લઈને પાછું આવે છે, કે એ ચાલ્યા જાય તો કશું નહીં.
Theory
ત્રણ પેટીઓ અને એમનાં પાછાં આપેલાં મૂલ્યો
- `alert(msg)`: સંદેશો અને OK નું બટન દેખાડે છે. કશું પાછું આપતું નથી (
undefined). સૂચનાઓ અને ભૂલો માટે. - `confirm(question)`: OK અને Cancel દેખાડે છે. `true` (OK) કે `false` (Cancel) પાછું આપે છે. એને
ifમાં કસો. - `prompt(question, default)`: લખાણનું ખાનું દેખાડે છે. લખાયેલી string પાછી આપે છે, કે વાપરનાર રદ કરે તો `null`.
ત્રણેય વાપરનાર જવાબ ન આપે ત્યાં સુધી પાનું અટકાવે છે. પાછું આપેલું મૂલ્ય જ બધું છે: એ તમારા code ને કહે છે કે શું થયું.
Practical
FestConnect પૂછે છે અને કહે છે
// alert: just inform (no return used)
alert("Email is missing an @");
// confirm: returns true/false
let sure = confirm("Register for 2 events?");
if (sure) {
console.log("proceeding...");
} else {
console.log("cancelled");
}
// prompt: returns the string, or null if cancelled
let code = prompt("Enter coupon code (optional):", "");
if (code === null) {
console.log("no coupon entered");
} else {
console.log("coupon: " + code);
}This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
શું પાછું આવે છે?
દરેક માટે પાછું આપેલું મૂલ્ય કહો: (a) વાપરનાર confirm પર Cancel દબાવે; (b) વાપરનાર prompt પર Cancel દબાવે; (c) વાપરનાર alert પર OK દબાવે. પછી કહો કે prompt ના પરિણામને ફક્ત if (code) થી કસવું કેમ જોખમી હોઈ શકે.
Show the answer
(a) confirm નું Cancel એ false પાછું આપે છે. (b) prompt નું Cancel એ null પાછું આપે છે. (c) alert એ undefined પાછું આપે છે (એને કોઈ ખરેખરું પરિણામ નથી). if (code) થી કસવું જોખમી છે કારણ કે જો વાપરનાર ખાનું ખાલી કરીને OK દબાવે, તો prompt ખાલી string "" પાછી આપે છે, જે ખોટા જેવી ગણાય છે, એટલે જાણી જોઈને 'coupon નહીં' કહેવું અને રદ કરવું બંને સરખાં દેખાય છે. એમને અલગ પાડવા ખાસ કરીને code === null તપાસો.
Quiz
તમે `if (confirm("Delete registration?")) deleteIt();` લખો છો. deleteIt() ક્યારે ચાલે છે?
- ફક્ત જ્યારે વાપરનાર OK દબાવે, કારણ કે ત્યારે confirm true પાછું આપે છે
- દર વખતે, કારણ કે confirm હંમેશા true પાછું આપે છે
- ફક્ત જ્યારે વાપરનાર Cancel દબાવે
- ક્યારેય નહીં, કારણ કે confirm ને if માં વાપરી શકાતું નથી
Show the answer
ફક્ત જ્યારે વાપરનાર OK દબાવે, કારણ કે ત્યારે confirm true પાછું આપે છે
confirm એ OK માટે true અને Cancel માટે false પાછું આપે છે, એટલે if (confirm(...)) એ deleteIt() ને ફક્ત OK પર ચલાવે છે (A). એ હંમેશા true પાછું આપતું નથી (B), અને Cancel એ false આપે છે જે ટુકડો છોડી દે છે (C). confirm બરાબર if માં વાપરવા માટે જ બનેલું છે (D ખોટું છે). OK/Cancel નું true/false સાથેનું આ મેળવવું જ કારણ છે કે નાશક ક્રિયા પહેલાં confirm એ પ્રમાણભૂત 'ખાતરી છે?' નો ચોકીદાર છે.
Watch out
Dialog ના ફાંદા
1. confirm boolean પાછું આપે છે, prompt string કે null. Prompt ના પરિણામને સાચું/ખોટું ન ગણો, અને એને વાપરતાં પહેલાં હંમેશા === null તપાસો.
2. prompt નો આંકડો પણ લખાણ જ છે: prompt('Age?') એ "20" આપે છે, એટલે કે string. ગણિત કરતાં પહેલાં Number(...) થી ફેરવો.
3. એ પાનું અટકાવે છે: જવાબ ન અપાય ત્યાં સુધી બધું અટકે છે, એટલે loops માં એમને ટાળો. ખરેખરાં ઉત્પાદનો પોતાનાં modals વાપરે છે, પણ પરીક્ષાઓ આ ત્રણ પૂછે છે.
Theory
આ validation નાં પરિણામ જણાવે છે
હવે પછીના બે પાઠમાં, જ્યારે FestConnect નું validation ખાલી ખાનું કે ખરાબ email શોધશે, ત્યારે એ alert થી ચોક્કસ સમસ્યા કહેશે, અને છેલ્લા submit પહેલાં કદાચ confirm કરશે. તમે શીખો છો ત્યાં સુધી validation નો સંદેશો દેખાડવાની સૌથી સાદી રીત dialogs છે. અહીં તમે પાકાં કરેલાં પાછાં આપેલાં મૂલ્યો (true/false, string/null) જ એ રીત છે જેનાથી બોલાવનારો code વાપરનારની પસંદગીને પ્રતિભાવ આપે છે.
Summary
Key takeaways
- alert(msg) સૂચના દેખાડે છે અને કશું પાછું આપતું નથી (undefined).
- confirm(question) OK/Cancel દેખાડે છે અને true કે false પાછું આપે છે: એને if માં કસો.
- prompt(question, default) લખાણનું ખાનું દેખાડે છે અને લખાયેલી string પાછી આપે છે, કે રદ કરાય તો null.
- ખાલી કરેલું prompt "" પાછું આપે છે (ખોટા જેવું), એટલે ખાસ રદ કરવાનું પકડવા === null તપાસો.
- prompt નાં મૂલ્યો strings છે; આંકડા Number() થી ફેરવો. ત્રણેય પાનું અટકાવે છે.
- Memory hook: સૂચના (alert), હા/ના વાળી ઘંટડી (confirm), મુલાકાતીપોથી (prompt).