Students frequently turn to Computer Class 12 GSEB Solutions and GSEB Computer Textbook Solutions Class 12 Chapter 2 કેસ્કેટિંગ સ્ટાઇલશીટ અને જાવાસ્ક્રિપ્ટ for practice and self-assessment.
GSEB Computer Textbook Solutions Class 12 Chapter 2 કેસ્કેટિંગ સ્ટાઇલશીટ અને જાવાસ્ક્રિપ્ટ
પ્રશ્ન 1.
કેસ્કેટિંગ સ્ટાઇલશીટનો ઉદ્દેશ જણાવો.
ઉત્તરઃ
કેસ્કેટિંગ સ્ટાઇલશીટ (CSS) પરિચય (Introduction to CSS)
કેસ્કેટિંગ સ્ટાઇલશીટનો ઉદ્દેશ
- કેસ્કેડિંગ સ્ટાઇલશીટ (Cascading StyleSheet – CSS) વેબ સાઇટમાં આવેલા દર્શનીય ઘટકોની શૈલી (Style) સ્પષ્ટ કરવા માટેની સુવિધા પૂરી પાડે છે.
- કેસ્કેન્ડિંગ સ્ટાઇલશીટ દસ્તાવેજની માહિતીને તેને દર્શાવવાની વિગતોથી અલગ રાખવામાં મદદરૂપ થાય છે.
- દસ્તાવેજને કેવી રીતે દર્શાવવો તેની વિગતોને સ્ટાઇલ તરીકે ઓળખવામાં આવે છે. સ્ટાઇલ જે-તે ઘટકનો દેખાવ સ્ક્રીન પર નક્કી કરે છે.
- વેબ પેજમાં શૈલી (Style) અને તેમાં આવેલ વિગતોને અલગ રાખવાના મુખ્ય લાભ નીચે મુજબ છે :
- શૈલીને અલગ રાખવાથી કોડિંગમાં નકલ (Duplication) ટાળી શકાય છે.
- એક જ વિગત માટે જુદા જુદા ઉદ્દેશોને અનુલક્ષીને જુદી જુદી સ્ટાઇલ(શૈલી)નો ઉપયોગ કરી શકાય છે.
- કોડની સરળ જાળવણી કરી શકાય છે.
- CSS દસ્તાવેજમાં ઘટકોની શૈલીનું વર્ણન કરે છે, તેની વિગતોનું નહીં. વેબ સાઇટમાં CSSનો ઉપયોગ કરી ફૉન્ટના પ્રકાર, ફૉન્ટ અને ઘટકોના રંગ, આજુબાજુની જગ્યા (PadSpace), હાંસિયા અને ઘટકોની સ્થિતિનું નિયંત્રણ કરી શકાય છે.
પ્રશ્ન 2.
વેબ પેજમાં શૈલી અને તેમાં આવેલ વિગતોને શા માટે અલગ રાખવી જોઈએ?
ઉત્તરઃ
કેસ્કેટિંગ સ્ટાઇલશીટ (CSS) પરિચય (Introduction to CSS)
કેસ્કેટિંગ સ્ટાઇલશીટનો ઉદ્દેશ
- કેસ્કેડિંગ સ્ટાઇલશીટ (Cascading StyleSheet – CSS) વેબ સાઇટમાં આવેલા દર્શનીય ઘટકોની શૈલી (Style) સ્પષ્ટ કરવા માટેની સુવિધા પૂરી પાડે છે.
- કેસ્કેન્ડિંગ સ્ટાઇલશીટ દસ્તાવેજની માહિતીને તેને દર્શાવવાની વિગતોથી અલગ રાખવામાં મદદરૂપ થાય છે.
- દસ્તાવેજને કેવી રીતે દર્શાવવો તેની વિગતોને સ્ટાઇલ તરીકે ઓળખવામાં આવે છે. સ્ટાઇલ જે-તે ઘટકનો દેખાવ સ્ક્રીન પર નક્કી કરે છે.
- વેબ પેજમાં શૈલી (Style) અને તેમાં આવેલ વિગતોને અલગ રાખવાના મુખ્ય લાભ નીચે મુજબ છે :
- શૈલીને અલગ રાખવાથી કોડિંગમાં નકલ (Duplication) ટાળી શકાય છે.
- એક જ વિગત માટે જુદા જુદા ઉદ્દેશોને અનુલક્ષીને જુદી જુદી સ્ટાઇલ(શૈલી)નો ઉપયોગ કરી શકાય છે.
- કોડની સરળ જાળવણી કરી શકાય છે.
- CSS દસ્તાવેજમાં ઘટકોની શૈલીનું વર્ણન કરે છે, તેની વિગતોનું નહીં. વેબ સાઇટમાં CSSનો ઉપયોગ કરી ફૉન્ટના પ્રકાર, ફૉન્ટ અને ઘટકોના રંગ, આજુબાજુની જગ્યા (PadSpace), હાંસિયા અને ઘટકોની સ્થિતિનું નિયંત્રણ કરી શકાય છે.
પ્રશ્ન 3.
CSSની વાક્યરચના સમજાવો.
ઉત્તરઃ
CSSની વાક્યરચના (Syntax of CSS)
- CSSની વાક્યરચનામાં rules નામના વિશિષ્ટ ચિહ્નનો ઉપયોગ થાય છે. CSS rulesના મુખ્ય બે વિભાગ હોય છે :
- પસંદગીકાર (Selector) અને
- એક કે વધુ ઘોષણાઓ (Declarations).
CSSની સામાન્ય વાક્યરચના નીચે મુજબ છે :
Selector {property : value}
- અહીં સિલેક્ટર એ HTML ઘટક છે, જેના ઉપર આપણે સ્ટાઇલ લાગુ કરવા માગીએ છીએ.
- સિલેક્ટર તરીકે ઉપયોગમાં લેવામાં આવેલ HTML ઘટક સાથે સંકળાયેલ ગુણધર્મ અને તેને અનુરૂપ કિંમતોનો સમાવેશ ડિક્લેરેશન વિભાગમાં કરવામાં આવે છે.
દા. ત.,
પ્રયોગ 1
હેતુ : કમ્પોઝરનો ઉપયોગ કરી Heading1 (H1) ઘટક ઉપર નીચે આપેલ શૈલીને અનુસરે તેવી CSSની રચના
- Font : Times New Roman
- Case : Upper case
- Alignment : Center Aligned
- Background Color: Light Blue
- Border: Dotted Border
નોંધ : પ્રયોગ શરૂ કરતા પહેલાં કમ્પોઝર પૂર્વનિર્ધારિત રીતે CSSનો ઉપયોગ કરે છે, તેની ખાતરી કરવા Edit → Preferences અથવા Tools → Options વિકલ્પ પસંદ કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબનું ડાયલૉગ બૉક્સ ખૂલશે. અહીં ડાબી બાજુથી General વર્ગ પસંદ કરો. તેમાં “Use CSS styles instead of HTML elements and attributes” ચેક બૉક્સ પસંદ કરેલ ન હોય, તો તેને પસંદ કરો.
હવે, નીચે મુજબ પગલાં અનુસરો :
પગલું 1 : કમ્પોઝરમાં નવી ફાઈલ ખોલો. તેને યોગ્ય શીર્ષક આપી યોગ્ય સ્થાન પર સેવ કરો.
પગલું 2 : કમ્પોઝિશન ટૂલબાર પર Cascade બટન 
પર ક્લિક કરો. આમ કરવાથી આકૃતિ માં દર્શાવ્યા મુજબનું ડાયલૉગ બૉક્સ ખૂલશે. અહીં પ્રથમ રેડિયો બટન 
Style applied to all elements of type પર ક્લિક કરો.
જેના માટે શૈલીના નિયમો (Style rules) વ્યાખ્યાયિત કરવાના હોય તે ઘટકને ડ્રૉપડાઉન મેનૂમાંથી પસંદ કરો. અહીં આપણે Heading1 માટે શૈલીની રચના કરવાની હોવાથી ડ્રૉપડાઉન મેનૂમાંથી h1 ઘટક પસંદ કરો.
પગલું 3 : હવે Create Style rule બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબ CSS StyleSheets ડાયલૉગ બૉક્સ ખુલ્લું રહેશે. પરંતુ તેમાં વિકલ્પો બદલાઈ જશે.
પગલું 4 : ડાયલૉગ બૉક્સની ડાબી બાજુના વિભાગમાં આપેલ h1 ઘટકને પસંદ કરો. ત્યારબાદ Text ટૅબ પસંદ કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબ Font family, Font size, Line height, Color, Case, Alignment જેવા વિવિધ વિકલ્પો દર્શાવવામાં આવશે.
પગલું 5 : અહીં h1 માટે જરૂરી શૈલી માટેના વિકલ્પો નીચે દર્શાવ્યા મુજબ પસંદ કરો :
- Font familyમાં Predefined રેડિયો બટન પસંદ કરી ડ્રૉપડાઉન મેનુમાંથી “Times New Roman” વિકલ્પ પસંદ કરો.
- Case મેનૂમાંથી “Upper case” અને Alignment મેનૂમાંથી “Center” વિકલ્પ પસંદ કરો.
પગલું 6 : બૅકગ્રાઉન્ડ રંગ પસંદ કરવા Background ટૅબ પસંદ કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબ વિકલ્પો ખૂલશે.
અહીં Color વિકલ્પમાં આવેલ Color Palette બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબ Block Background Color ડાયલૉગ બૉક્સ ખૂલશે. તેમાંથી તમારી પસંદ મુજબનો રંગ પસંદ કરો અને OK બટન પર ક્લિક કરો.
નોંધ : જો બૅકગ્રાઉન્ડ તરીકે ચિત્રનો ઉપયોગ કરવો હોય, તો Image વિકલ્પમાં “Choose file” પર ક્લિક કરી બૅકગ્રાઉન્ડ માટેની ફાઈલ પસંદ કરવી.
પગલું 7 : હવે સીમારેખા (Border) ઉમેરવા માટે Border ટૅબ પસંદ કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબના વિકલ્પો દર્શાવાશે.
- જો ચારે બાજુ પર એકસમાન બૉર્ડર દર્શાવવી હોય, તો
All four sides use same border style s બૉક્સ પસંદ કરો. - હવે Style ડ્રૉપડાઉન મેનૂમાંથી Dotted વિકલ્પ પસંદ કરો તથા જરૂરિયાત મુજબ Width તથા Color પસંદ કરો. અને OK બટન પર ક્લિક કરો.
પગલું 8 : હવે General વિભાગ પર ક્લિક કરવાથી આકૃતિ માં દર્શાવ્યા મુજબ શૈલી નક્કી કર્યા મુજબના CSS કોડ દર્શાવાશે.
પગલું 9 : હવે h1 ટૅગ પર રચવામાં આવેલ CSSનો ઉપયોગ કરવા વેબ પેજમાં શીર્ષક ઉમેરવાFormat Toolbar1માંથી Heading 1 વિકલ્પ પસંદ કરો. આ વિકલ્પ પસંદ કરવામાં આવે ત્યારે કર્સર આપોઆપ વેબ પેજની મધ્યમાં ગોઠવાઈ જશે. અહીં થોડું લખાણ ઉમેરો લખાણ આપોઆપ Upper caseમાં તથા Times New Roman ફૉન્ટ સાથે ઉમેરાશે કે જેમાં બૅકગ્રાઉન્ડ કલર તથા ડોટેડ બૉર્ડર પણ હશે. (જુઓ આકૃતિ.)
CSS Stylesheet કોડ જોવા માટે નીચેના ભાગમાં આવેલ Source વિભાગ પસંદ કરો, જેથી આકૃતિ મુજબ સોર્સ કોડ દર્શાવાશે.
પ્રશ્ન 4.
CSSના ફાયદાઓ જણાવો.
ઉત્તરઃ
CSSના ફાયદા
CSSના ફાયદા નીચે મુજબ છે :
- CSS તેની નીચે આવેલા સ્તરમાં ફેરફાર કર્યા વગર વેબ સાઇટની સંરચના કરવાની સુવિધા પૂરી પાડે છે.
- CSSનો ઉપયોગ કરવાથી વેબ સાઇટમાં ફેરફાર કરતી વખતે તેમાં આવેલી વિગતોમાં અકસ્માતે ફેરફાર થવાનો ભય રહેતો નથી.
- ઇચ્છિત ઘટકની શૈલીમાં સુધારો કરવા માટે પ્રોગ્રામરે માત્ર CSS ફાઈલમાં ફેરફાર કરવાનો રહે છે, જે સરળ છે.
- HTMLની સરખામણીએ CSSમાં ઓછા કોડ ઉમેરવા પડે છે. જેથી વેબ પેજની ઝડપ વધે છે.
- CSSનો ઉપયોગ વેબ સાઇટની રચનાને ઝડપી અને કાર્યક્ષમ બનાવે છે.
પ્રશ્ન 5.
CSSના ગેરફાયદાઓ જણાવો.
ઉત્તરઃ
CSSના ગેરફાયદા
CSSના ગેરફાયદા નીચે મુજબ છે :
- જુદા જુદા બ્રાઉઝર માટે CSSની સુસંગતતા બદલાતી રહે છે.
- CSSની કેટલીક સુવિધાઓને દરેક બ્રાઉઝર સમર્થન આપતું નથી અને ઉપયોગકર્તાની અપેક્ષા અનુસાર તે શૈલીને દર્શાવી શકતું નથી.
પ્રશ્ન 6.
HTML પાનામાં જાવાસ્ક્રિપ્ટનો ઉપયોગ શા માટે કરવામાં આવે છે?
ઉત્તરઃ
જાવાસ્ક્રિપ્ટ (JavaScript)
HTML પાનામાં જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવા માટેનાં કારણો :
- મૂળભૂત રીતે વેબ પેજમાં દેખાવ(Appearance)નું નિયંત્રણ કરવા માટે HTMLનો ઉપયોગ કરવામાં આવે છે. પરંતુ HTMLમાં બનાવવામાં આવેલ વેબ પેજ સ્થિત (Static) હોય છે. પરંતુ ઇન્ટરનેટના વિકાસ સાથે વેબ પેજમાં વધુ સંવાદન(Interactivity)ની જરૂર ઊભી થઈ. તેથી નેટસ્કેપે જાવાસ્ક્રિપ્ટનો વિકાસ કર્યો. જાવાસ્ક્રિપ્ટ એ વેબ પેજમાં પ્રોગ્રામિંગનું પાસું ઉમેરવાની સુવિધા આપતી સ્ક્રિન્ટિંગ ભાષા છે.
- વેબ સાઇટના આલેખનમાં સુધારો કરવા તથા ફૉર્મની યથાર્થતા ચકાસવા માટે વેબ પેજમાં જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવામાં આવે છે.
- જાવાસ્ક્રિપ્ટ HTML પાનામાં સંવાદન ઉમેરે છે. એટલે કે જાવાસ્ક્રિપ્ટના ઉપયોગ પછી વેબ પેજ અપરિવર્તનશીલ રહેતું નથી, પરંતુ ઉપયોગકર્તા સાથેના સંવાદન, બ્રાઉઝરનું નિયંત્રણ અને HTML વિગતોની ગતિશીલ (Dynamic) રજૂઆત માટેના કોડનો સમાવેશ કરી શકે છે.
- જાવાસ્ક્રિપ્ટના સૌથી સામાન્ય વિનિયોગ ક્લાયન્ટ બાજુની સ્ક્રિપ્ટ છે, જે વેબ બ્રાઉઝરમાં ચલાવવામાં આવે છે. HTML ફૉર્મમાં ઉમેરેલી વિગતોને સર્વર તરફ મોકલવામાં આવે તે પહેલાં ક્લાયન્ટ બાજુ તેની યથાર્થતા ચકાસવા માટે જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવામાં આવે છે.
પ્રશ્ન 7.
HTML પાનામાં જાવાસ્ક્રિપ્ટને કેવી રીતે ઓળખી શકાય છે? ઉદાહરણ આપો.
ઉત્તરઃ
જાવાસ્ક્રિપ્ટ કોડ લખવાની રીત
- HTML પાનામાં <script> … </script> ટૅગનો ઉપયોગ કરી જાવાસ્ક્રિપ્ટનો કોડ ઉમેરવામાં આવે છે.
- જાવાસ્ક્રિપ્ટ એ ‘કેસ-સેન્સિટિવ’ ભાષા છે.
- જાવાસ્ક્રિપ્ટને HTMLના <body> અથવા <head> વિભાગમાં સમાવવામાં આવે છે.
- હવે આપણે કમ્પોઝરના સોર્સ વ્યૂનો ઉપયોગ કરી એક સરળ જાવાસ્ક્રિપ્ટ કોડ લખીએ. આકૃતિ જાવાસ્ક્રિપ્ટ સાથેનો સોર્સ વ્યૂ દર્શાવે છે. ફાઈલનો સંગ્રહ કરી તેને વેબ બ્રાઉઝરમાં ખોલો.
અહીં <script> ટૅગમાં માત્ર એક વિધાન document.write(“HELLO STUDENTS”) લખવામાં આવ્યું છે.
- અહીં write એક પ્રક્રિયા (Method) છે, જે document ઑબ્જેક્ટનો એક ભાગ છે. જે લખાણ દર્શાવવાનું હોય, તેને document.write( ) પ્રક્રિયાના ચલ તરીકે આપવામાં આવે છે.
- આકૃતિ માં વિધાનના અંતમાં આપવામાં આવેલું અધવરાચિહ્ન (Semicolon) જાવાસ્ક્રિપ્ટમાં વૈકલ્પિક છે. અર્ધવિરામચિહ્નનો ઉપયોગ સમાપ્તિ(Termination)ને બદલે અલગતા (Seperation) માટે થાય છે.
- આકૃતિ માં કોડના પરિણામને બ્રાઉઝરમાં દર્શાવ્યું છે.
નોંધ : જાવાસ્ક્રિપ્ટ વિધાનોને બ્લૉક સ્વરૂપે એકત્રિત કરી શકાય છે. બ્લૉકની શરૂઆત અને અંત છગડિયા કોંસ “{ }” દ્વારા કરવામાં આવે છે.
પ્રયોગ 2
હેતુ : Name અને Submit button ઘટકો સાથેનું ફૉર્મ બનાવવું તથા તેમાં જાવાસ્ક્રિપ્ટનો ઉપયોગ કરી Name ફિલ્ડ ખાલી ન રહે તે માટેની યથાર્થતા ઉમેરવી :
પગલું 1 : કમ્પોઝરમાં નવી ફાઈલ બનાવો અને તેને js1.html નામ આપી સંગ્રહ કરો.
પગલું 2 : Insert → Form → Define Form વિકલ્પનો ઉપયોગ કરી નવા ફૉર્મની રચના કરો. ફૉર્મને નામ આપો. (js1) આકૃતિ માં દર્શાવ્યા મુજબ નામ માટેનું એક લેબલ અને એક ઇનપુટ ટેક્સ્ટ ફિલ્ડ ઉમેરો અને એક સમિટ બટન ઉમેરો.
પગલું 3 : Insert › Form → Define Form પસંદ કરો, જેથી આકૃતિ માં દર્શાવવામાં આવેલ Form Properties ડાયલૉગ બૉક્સ ખૂલશે.
પગલું 4 : અહીં Advanced Edit બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવેલ Advanced Property Editor ડાયલૉગ બૉક્સ ખૂલશે. હવે JavaScript Events વિભાગ પસંદ કરો, તેમાં Attribute વિકલ્પમાં “onsubmit” વિકલ્પ પસંદ કરો અને Valueમાં “return validateForm )” લખો અને OK બટન પર ક્લિક કરો.
પગલું 5 : હવે, સોર્સ વ્યૂ ખોલો અને આકૃતિ માં દર્શાવ્યા મુજબ <head> ટૅગની અંદર જાવાસ્ક્રિપ્ટ ઉમેરો.
પગલું 6 : હવે ફાઈલને વેબ બ્રાઉઝરમાં ખોલો. પરિણામ આકૃતિ મુજબ જોવા મળશે.
પગલું 7 : અહીં Name ફિલ્ડને ખાલી રાખી Submit બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા પ્રમાણે એક ઍલર્ટ સંદેશ રજૂ કરવામાં આવશે.
આ ઍલર્ટ સંદેશ એ સોર્સ વ્યૂમાં લખવામાં આવેલ સ્ક્રિપ્ટનું પરિણામ છે.
નોંધ : ઇન્ટરનેટ પર ફૉર્મ ભરતી વખતે તમે કેટલાક ફિલ્ડને લાલ રંગની ફૂદડી “*” સાથે દર્શાવેલા જોયા હશે, જે ઉપયોગકર્તાને નિર્દેશ કરે છે કે આ ફિલ્ડ ફરજિયાત છે.
હવે, આપણે આકૃતિ માં દર્શાવેલ જાવાસ્ક્રિપ્ટના અગત્યના ઘટકો વિશે સમજીએ.
Computer Class 12 GSEB Notes Chapter 2 કેસ્કેટિંગ સ્ટાઇલશીટ અને જાવાસ્ક્રિપ્ટ
જાવાસ્ક્રિપ્ટ (JavaScript)
ValidateForm વિધેય (Function ValidateForm( ))
વિધેય : નિશ્ચિત કાર્યને પાર પાડતા પુનઃ ઉપયોગમાં લઈ શકાય તેવા કોડના બ્લૉકને વિધેય અથવા રૂટિન કહે છે. વિધેયને function કી-વર્ડ વડે વ્યાખ્યાયિત કરવામાં આવે છે અને કોડના બ્લૉકને છડિયા કૌંસ “{ }”માં લખવામાં આવે છે.
- અહીં validateForm( ) એક વિધેય છે. જાવાસ્ક્રિપ્ટ alert( ) જેવાં કેટલાંક આંતરપ્રસ્થાપિત વિધેય પૂરાં પાડે છે.
- alert( ) લખાણ સ્વીકારે છે અને તેને ઍલર્ટ બૉક્સમાં દર્શાવે છે.
દા. ત.,
ઉપરના ઉદાહરણમાં દર્શાવેલ hello( ) ને જ્યારે બોલાવવામાં આવે ત્યારે Hello Students સંદેશ સાથેનું ઍલર્ટ બૉક્સ દર્શાવવામાં આવશે.
વિધેયની મુખ્ય લાક્ષણિકતાઓ :
-
- વિધેયનો અમલ કોઈ ઘટના દ્વારા અથવા સોર્સ કોડમાંથી બોલાવવામાં આવે ત્યારે કરવામાં આવે છે.
- વિધેયને સોર્સ કોડમાં કોઈ પણ સ્થાનેથી બોલાવી શકાય છે.
- HTML કોડના head કે body વિભાગમાં વિધેયને વ્યાખ્યાયિત કરી શકાય છે.
- વિધેયને તેના નામથી બોલાવવામાં આવે છે.
- વિધેય કિંમત પરત કરે, તેવું જો આપણે ઇચ્છતા હોઈએ તો return વિધાનની મદદથી આ શક્ય બને છે. returnવિધાનનો ઉપયોગ વિધેયનો અમલ અટકાવી કોઈ નિશ્ચિત કિંમત પરત કરે છે.
- આપણા ઉદાહરણમાં validateForm( )ને સબમિટ બટન પર ક્લિક આપવાથી ઉદ્ભવતી ઘટના દ્વારા બોલાવવામાં આવે છે.
- જ્યારે ઉપયોગકર્તા સમિટ બટન પર ક્લિક કરે તેને ઘટના (Event) તરીકે ઓળખવામાં આવે છે.
ઘટના (Events)
- ઉપયોગકર્તા અને વેબ પેજ વચ્ચેના સંવાદન દ્વારા ઘટના (Event) ઉત્પન્ન થાય છે અને સંવાદિત વેબ પેજની રચના કરવા માટે જાવાસ્ક્રિપ્ટનો ઉપયોગ થાય છે.
- ઉપયોગકર્તા જ્યારે કોઈ પણ કાર્ય કરે, ત્યારે ઘટના ઉદ્ભવે છે. કોષ્ટક 2.1માં જાવાસ્ક્રિપ્ટ ઘટનાઓની યાદી આપવામાં આવી છે.
કોષ્ટક : જાવાસ્ક્રિપ્ટ ઘટનાઓ
| ઘટના | સમજૂતી |
| abort | ચિત્ર દર્શાવવાનું ૨દ કરવામાં આવે ત્યારે |
| blur | રેડિયો બટન જેવું કોઈ ઘટક નિષ્ક્રિય બને ત્યારે |
| click | ઉપયોગકર્તા ફૉર્મના કોઈ ઘટક પર ક્લિક કરે ત્યારે |
| change | ઉપયોગકર્તા દ્વારા ફૉર્મના ફિલ્ડની કિંમત બદલવામાં આવે ત્યારે |
| error | દસ્તાવેજ કે ચિત્ર દર્શાવતી વખતે ક્ષતિ ઉદ્ભવે ત્યારે |
| focus | બટન જેવો કોઈ ઘટક સક્રિય બને ત્યારે |
| load | દસ્તાવેજ કે ચિત્ર દર્શાવવામાં આવે ત્યારે |
| MouseOut | માઉસનું પૉઇન્ટર ઘટક પરથી દૂર કરવામાં આવે ત્યારે |
| MouseOver | માઉસનું પૉઇન્ટર ઘટક પર લાવવામાં આવે ત્યારે |
| reset | ફૉર્મના ફિલ્ડને પૂર્વનિર્ધારિત કિંમતો સાથે રીસેટ કરવામાં આવે ત્યારે |
| select | ઉપયોગકર્તા ફૉર્મનું ફિલ્ડ પસંદ કરે ત્યારે |
| submit | ઉપયોગકર્તા ફૉર્મ સબમિટ કરે ત્યારે |
| unload | ઉપયોગકર્તા પાનું છોડી દે ત્યારે |
- જ્યારે કોઈ ઘટના ઉદ્ભવે છે, ત્યારે આપેલ સ્થિતિ અનુસાર એક નિશ્ચિત જાવાસ્ક્રિપ્ટ કોડનો અમલ કરવામાં આવે છે. આ જાવાસ્ક્રિપ્ટ કોડને ઘટના-સંચાલક (Event handler) કહે છે.
- આકૃતિ માં દર્શાવેલ ફૉર્મમાં ઉપયોગકર્તા જ્યારે સબમિટ બટન પર ક્લિક કરે ત્યારે onsubmit( ) ઘટના ઉદ્ભવે છે અને onsubmit( ) ઇવેન્ટ હૅન્ડલર validateForm વિધેયને બોલાવે છે. તથા ‘Name’ ફિલ્ડમાં કોઈ કિંમત હશે તો True અને કોઈ કિંમત નહિ હોય (ખાલી કે null હશે) ત્યારે False પરત કરશે.
ચલ (Variable)
- આકૃતિ માં દર્શાવેલ ફૉર્મમાં validateForm() વિધેયમાં નીચેનું વિધાન લખ્યું છે :
var x = document.jsl.name.value - અહીં આપણે x નામનો ચલ ઘોષિત કરેલ છે.
- ચલ એ વિગતોનો સંગ્રહ કરતો સંગ્રાહક છે કે જે જાવાસ્ક્રિપ્ટમાં કેસ-સેન્સિટિવ છે.
- ચલ “x” અને “X” જાવાસ્ક્રિપ્ટમાં સમાન નથી.
- ચલમાં અંકો, સ્ટ્રિંગ કે લખાણનો સંગ્રહ કરી શકાય છે.
- જાવાસ્ક્રિપ્ટમાં var કી-વર્ડનો ઉપયોગ કરી ચલની ઘોષણા કરી શકાય છે.
If વિધાન (If Statement)
- પ્રોગ્રામનો પ્રવાહ બદલવા માટે શરતી વિધાન ifનો ઉપયોગ કરવામાં આવે છે.
- કોઈ નિશ્ચિત શરતની યથાર્થતા તપાસવા માટે if વિધાન પદાવલિનું મૂલ્યાંકન કરે છે. જો શરત સાચી હોય, તો પ્રોગ્રામ if વિધાનના બ્લૉકમાં પ્રવેશી તેમાં આવેલા વિધાનોનો અમલ કરે છે.
- આકૃતિ માં દર્શાવેલ ફૉર્મમાં x ચલની કિંમત ખાલી (Null) છે કે નહીં તે ચકાસવા માટે if વિધાનનો ઉપયોગ કર્યો છે. જો ચલ xની કિંમત ખાલી (Null) હશે, તો if બ્લૉકનો અમલ કરવામાં આવશે.
ડૉક્યુમેન્ટ ઑબ્જેક્ટ મૉડેલ (Document Object Model) – document.js1.name.value
- વેબ બ્રાઉઝરની વિન્ડો કે વેબ પેજના નિયંત્રણ માટે બ્રાઉઝર ઑબ્જેક્ટ મૉડેલ(Browser Object Model)નો ઉપયોગ કરવામાં આવે છે.
- તમામ બ્રાઉઝરને જુદા જુદા વિભાગો અથવા ઘટકોમાં વિભાજિત કરવામાં આવે છે, જેને જાવાસ્ક્રિપ્ટ દ્વારા ઉપયોગમાં લઈ શકાય છે. આ વિભાગોને બ્રાઉઝર ઑબ્જેક્ટ મૉડેલ અથવા BOM તરીકે ઓળખવામાં આવે છે. આકૃતિ માં દર્શાવ્યા મુજબ આ બ્રાઉઝરના પદાનુક્રમ હોય છે.
વિન્ડો (window) ઑબ્જેક્ટ :
- બ્રાઉઝર ઑબ્જેક્ટના પદાનુક્રમમાં સૌથી ઉપર વિન્ડો (Window) ઑબ્જેક્ટ હોય છે.
- વિન્ડો ઑબ્જેક્ટ બ્રાઉઝરની વિન્ડો અથવા તેમાં આવેલી સ્વતંત્ર ફ્રેમને રજૂ કરે છે. તેની રચના બ્રાઉઝર દ્વારા આપોઆપ કરવામાં આવે છે.
- Window ઑબ્જેક્ટ વૈશ્વિક (Global) ઑબ્જેક્ટ ગણાય છે, કારણ કે મૉડેલના અન્ય તમામ બ્રાઉઝર ઑબ્જેક્ટનો તેની અંદર સમાવેશ કરવામાં આવે છે.
- Window ઑબ્જેક્ટની પદ્ધતિઓ (Methods) અને ગુણધર્મો (Properties) દ્વારા વેબ બ્રાઉઝરની વિન્ડોને નિયંત્રિત કરવામાં આવે છે.
- document ઑબ્જેક્ટની પદ્ધતિઓ (Methods) અને ગુણધર્મો (Properties) દ્વારા વેબ પેજને નિયંત્રિત કરવામાં આવે છે.
ડૉક્યુમેન્ટ (Document) ઑબ્જેક્ટ :
- બ્રાઉઝર ઑબ્જેક્ટ મૉડેલમાં સૌથી અગત્યનો ઑબ્જેક્ટ document ઑબ્જેક્ટ છે. બ્રાઉઝરમાં વેબ પેજ રજૂ કરવા માટે document ઑબ્જેક્ટનો ઉપયોગ થાય છે.
- વેબ પેજના અન્ય તમામ ઘટકો જેવા કે, ફૉર્મ, ચિત્રો, લિંક અને અન્ય ઘટકો document ઑબ્જેક્ટની અંદર જ સમાવવામાં આવે છે.
Focus પદ્ધતિ (Focus Method)
- સ્ક્રિપ્ટમાં focus નામની પદ્ધતિનો ઉપયોગ કરવામાં આવે છે. ફૉર્મના નિશ્ચિત ઘટક પર નિયંત્રણ લઈ જવા માટે focus પદ્ધતિનો ઉપયોગ થાય છે.
- ઉપયોગકર્તા ઍલર્ટ સંદેશ મેળવે પછી, focus પદ્ધતિની મદદથી ઘટકની અંદર કર્સર ગોઠવવામાં આવે છે અને તે નિશ્ચિત ઘટક પ્રકાશિત (Highlighted) બને છે.
- પ્રયોગ 2 માં દર્શાવેલ ફૉર્મમાં focus પદ્ધતિ દ્વારા નિયંત્રણને name ઘટક પર લઈ જવામાં આવ્યું છે.
પ્રયોગ 3
હેતુ : પ્રયોગ 2માં બનાવેલ ફૉર્મમાં Pincode નામનું ફિલ્ડ ઉમેરવું તથા તેમાં નીચે દર્શાવેલ યથાર્થતા ઉમેરવી :
- ઉપયોગકર્તા Pincode ફિલ્ડને ખાલી છોડી શકશે નહીં.
- Pincode ફિલ્ડમાં માત્ર અંક માન્ય હશે.
- Pincode છ અંકનો જ હોવો જોઈએ.
પગલું 1 : પ્રયોગ 2માં તૈયાર કરેલ ફૉર્મમાં Pincode માટેનું એક લેબલ અને ઇનપુટ ફિલ્ડ ઉમેરો.
પગલું 2 : આકૃતિ માં દર્શાવેલ સ્ક્રિપ્ટ સોર્સ વ્યૂમાં ઉમેરો.
પગલું 3 : બ્રાઉઝરમાં ફાઈલ ખોલો. આકૃતિ માં દર્શાવ્યા મુજબનું પિરણામ જોવા મળશે.
- અહીં Name ફિલ્ડમાં નામ ઉમેરો અને Pincode ફિલ્ડને ખાલી રાખી, Submit બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબનો ઍલર્ટ સંદેશ દર્શાવવામાં આવશે.
- હવે Pincode ફિલ્ડમાં થોડા અક્ષર કે છ અંકોથી વધુ કોઈ આંકડાકીય સંખ્યા ઉમેરો. આમ કરવાથી પણ આકૃતિ જેવો જ સંદેશ દર્શાવવામાં આવશે.
પગલું 4 : જો યથાર્થતા પ્રમાણે યોગ્ય ઍલર્ટ સંદેશ દર્શાવવો હોય, તો આકૃતિ માં દર્શાવ્યા મુજબ સ્ક્રિપ્ટમાં સુધારા કરો.
<script>
function validateForm()
{
var x = document.js1.name.value;
var x = document.js1.pincode.value;
if ( x= = null || x = ="")
{
alert("Please enter the Name'');
document.js1.name.focus();
return false;
}
if (y = ="")
{
alert("Please enter the pincode properly'');
document.js1.pincode.focus();
return false;
}
if (isNaN(y))
{
alert(''Please enter numbers only'');
document.js1.pincode.focus();
return false;
}
if (y.length=6 || y.length<6)
{
alert(''Enter 6 digits only");
document.js1.pincode.focus();
return false;
}
}
</script>
[આકૃતિ : યોગ્ય સંદેશ દર્શાવવા માટેનો જાવાસ્ક્રિપ્ટ કોડ]
પગલું 5 : બ્રાઉઝરમાં ફાઈલ ખોલો. Pincode ફિલ્ડમાં કેટલાક અક્ષરો ઉમેરો અને Submit બટન પર ક્લિક કરો, જેથી આકૃતિ મુજબ ઍલર્ટ સંદેશ રજૂ કરવામાં આવશે.
પગલું 6 : Pincode ફિલ્ડમાં 6 અંકોથી નાની સંખ્યા અથવા મોટી સંખ્યા ઉમેરો અને Submit બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબનો ઍલર્ટ સંદેશ રજૂ કરવામાં આવશે.
isNaN( ) વિધેય (isNaN( ) Function)
- isNaN( ) એ સામાન્ય રીતે સૌથી વધુ ઉપયોગમાં લેવાતું આંકડાકીય વિધેય છે.
- NaN એટલે “Not a Number” આપેલ કિંમત આંકડાકીય પ્રકારની ન હોય, તો તે true કિંમત પરત કરે છે તથા કિંમત આંકડાકીય હોય, તો તે false કિંમત પરત કરે છે.
દા. ત., isNaN(123) – false કિંમત પરત કરશે અને isNaN(“hello”) – true કિંમત પરત કરશે.
પ્રયોગ 4
હેતુ : પ્રકરણ 1માં તૈયાર કરેલ નોંધણી ફૉર્મ(Registration Form)માં નીચે દર્શાવેલ યથાર્થતા માટેની જાવાસ્ક્રિપ્ટ
ઉમેરવી :
- First Name, Middle Name, Last Nameમાંથી કોઈ પણ ફિલ્ડ ખાલી ન રહેવું જોઈએ.
- Gender તથા Hobby ફિલ્ડ પસંદ થયેલ હોવા જોઈએ.
- City ફિલ્ડમાં શહેરના નામની પસંદગી કરેલ હોવી જોઈએ.
પગલું 1 : ઉપર મુજબની યથાર્થતા લાગુ પાડવા માટે ફૉર્મમાં નીચેની યાદીમાં જણાવેલ સ૨ળ ફેરફાર કરો :
- Gender અને Hobby ફિલ્ડ શરૂઆતમાં પસંદ થયેલાં નહીં હોય.
- Address ફિલ્ડમાં શરૂઆતની કોઈ કિંમત નહીં હોય.
- City ફિલ્ડમાં “Choose the City” વિકલ્પ હશે, જેની કિંમત -1 છે. અન્ય તમામ શહેરો, જેવાં કે Ahmedabad, Rajkot અને Suratને અનુક્રમે 1, 2 અને 3 કિંમત હશે.
ઉપર્યુક્ત ફેરફાર કરવા માટે ફૉર્મ ખોલી, તેમાં સંબંધિત ફિલ્ડ પસંદ કરો અને Form → Form Field વિકલ્પ પસંદ કરો. આમ કરવાથી જે-તે ફિલ્ડમાં ફેરફાર કરવા માટે તેના ગુણધર્મ દર્શાવવામાં આવશે. ફેરફાર કર્યા બાદ ફૉર્મ આકૃતિ માં દર્શાવ્યા મુજબ દેખાશે.
પગલું 2 : Form → Define Form વિકલ્પ પસંદ કરો, જેથી આકૃતિ માં દર્શાવેલ Form Properties ડાયલૉગ બૉક્સ ખૂલશે.
પગલું 3 : અહીં Advanced Edit બટન પર ક્લિક કરો, જેથી આકૃતિ માં આપેલ Advanced Property Editor ડાયલૉગ બૉક્સ ખૂલશે. અહીં JavaScript Events વિભાગ પસંદ કરો. Attribute વિકલ્પમાં “onsubmit” અને value વિકલ્પમાં “return validateForm( )” ઉમેરો અને OK બટન પર ક્લિક કરો.
પગલું 4 : ફૉર્મનો સોર્સ વ્યૂ ખોલો. તેમાં HTMLના <head> વિભાગમાં આકૃતિ માં દર્શાવેલ સ્ક્રિપ્ટ ઉમેરો.
<script>
function validateForm()
{
var x = document.form1.firstname.value;
var y = document.form1.middlename.value;
var z = document.form1.lastname.value;
var r = document.form1.address.value;
if(x = = null || x = ="")
{
alert("Please enter the first name properly");
document.form1.firstname.focus();
return false;
}
if(y = =" " || y = = null)
{
alert("Please enter the middle name properly");
document.form1.middlename.focus();
return false;
}
if(z = = " " || Z = = null)
{
alert("Please enter the last name properly");
document.form1. lastname.focus();
return false;
}
if(r = = " ")
{
alert("Please enter address");
document.form1.address.focus();
return false;
}
if((document.form1.gender[0].checked == false)) &&
(document.form1.gender[1].checked = = false)
{
alert("Please choose your gender:Male or Female");
document.form1.gender[0].focus();
return false;
}
if((document.form1.hobby[0].checked = = false) &&
(document.form1.hobby[1]. checked = = false) &&
(document.form1.hobby[2]. checked = = false))
{
alert("Please choose a hobby");
document.form1.hobby[0].focus();
return false;
}
if(document.form1.city.value = = "-1")
{
alert("Please provide your city!");
document.form1.city.focus();
return false;
}
}
</script>
[આકૃતિ : જાવાસ્ક્રિપ્ટની યથાર્થતા]
પગલું 5 : ફૉર્મને બ્રાઉઝરમાં ખોલો. આ ફૉર્મમાં અલગ અલગ ફિલ્ડ ખાલી છોડવામાં આવશે અથવા યોગ્ય પસંદગી કરવામાં નહીં આવે, તો તેનાથી મળતા કેટલાક ઍલર્ટ સંદેશાઓ આકૃતિ તથા માં દર્શાવેલ છે.
તમામ ફિલ્ડની વિગતો ઉમેર્યા પછી ફૉર્મનો અંતિમ દેખાવ આકૃતિ માં દર્શાવ્યો છે.
