ജാവാസ്ക്രിപ്റ്റിൽ എന്താണ് ആവശ്യപ്പെടുന്നത്. ജാവാസ്ക്രിപ്റ്റിലെ അലേർട്ട്, സ്ഥിരീകരണം, പ്രോംപ്റ്റ് രീതികളുടെ വിവരണം. സ്ഥിരമല്ലാത്ത XSS ആക്രമണത്തിന്റെ ഉദാഹരണം

ഈ ലേഖനത്തിൽ ഞങ്ങൾ ശൈലികൾ പുനഃസജ്ജമാക്കുന്നതിനെക്കുറിച്ച് സംസാരിക്കുകയും അത്തരം ഒരു reset.css ഫയൽ സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം നോക്കുകയും ചെയ്യും.

എറിയുന്ന ശൈലികൾ എന്ന ആശയം ഏകദേശം 10 വർഷം മുമ്പ് പ്രത്യക്ഷപ്പെട്ടു. ഒരു ചെറിയ കൂട്ടം CSS ശൈലികൾ ഉപയോഗിച്ച് എല്ലാ ബ്രൗസറുകളിലും പേജ് ഒരേ പോലെ തോന്നിപ്പിക്കുന്നത് യഥാർത്ഥത്തിൽ ഉൾക്കൊള്ളുന്നു. തീർച്ചയായും, ഇത് എല്ലായ്പ്പോഴും പ്രവർത്തിക്കില്ല, പക്ഷേ ചില കാര്യങ്ങൾ ശരിയാക്കാൻ കഴിയും - ഉദാഹരണത്തിന്, IE-യുടെ ചില പതിപ്പുകളിൽ എവിടെ നിന്നാണ് അതിർത്തി വരുന്നത് എന്ന് വ്യക്തമല്ല. അല്ലെങ്കിൽ വയലുകൾക്ക് സമീപം ഒരു നീല രൂപരേഖ (ഔട്ട്ലൈൻ).

ബ്രൗസറുകൾ വളരെ ശ്രദ്ധാലുക്കളാണെന്നും ഓരോന്നും HTML ഘടകങ്ങൾ അതിന്റേതായ രീതിയിൽ പ്രോസസ്സ് ചെയ്യുകയും അതിന്റേതായ സ്റ്റാൻഡേർഡ് ശൈലികൾ ചേർക്കുകയും ചെയ്യുന്നു എന്നത് ഏതൊരു ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർക്കും രഹസ്യമല്ല.

ഈ ആശയം വളരെക്കാലമായി നിലനിൽക്കുന്നതിനാൽ, സാധാരണയായി reset.css എന്ന് വിളിക്കപ്പെടുന്ന റെഡിമെയ്ഡ് റീസെറ്റ് ഫയലുകൾ ഇതിനകം തന്നെ ഉണ്ടെന്നതിൽ അതിശയിക്കാനില്ല, കൂടാതെ എല്ലാ പ്രോജക്റ്റുകളിലേക്കും ബന്ധിപ്പിച്ചിരിക്കുന്നു.

എന്തുകൊണ്ട് ഒരു പ്രത്യേക ഫയലിൽ? അതെ, പ്രോജക്റ്റിൽ നിന്ന് പ്രോജക്റ്റിലേക്ക് മാറ്റുന്നത് കൂടുതൽ സൗകര്യപ്രദമായതിനാൽ.

2007-ൽ നിന്നുള്ള reset.css-ന്റെ ഒരു ഉദാഹരണം ഇതാ:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 ലൈസൻസ്: ഒന്നുമില്ല (പബ്ലിക് ഡൊമെയ്‌ൻ) */ html, ബോഡി, ഡിവി, സ്പാൻ, ആപ്‌ലെറ്റ്, ഒബ്‌ജക്റ്റ്, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ചുരുക്കെഴുത്ത്, വിലാസം, വലിയ, ഉദ്ധരണി, കോഡ്, del, dfn, em, img, ins, kbd, q, s, samp, ചെറുത്, സ്ട്രൈക്ക്, ശക്തമായ, സബ്, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, ഫീൽഡ്സെറ്റ്, ഫോം, ലേബൽ, ലെജൻഡ്, ടേബിൾ, അടിക്കുറിപ്പ്, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, film, figcaption, footer, header hgroup, മെനു, nav, ഔട്ട്‌പുട്ട്, മാണിക്യം, വിഭാഗം, സംഗ്രഹം, സമയം, അടയാളം, ഓഡിയോ, വീഡിയോ (മാർജിൻ: 0; പാഡിംഗ്: 0; ബോർഡർ: 0; ഫോണ്ട്-സൈസ്: 100%; ഫോണ്ട്: ഇൻഹെറിറ്റ്; ലംബ-അലൈൻ: അടിസ്ഥാനരേഖ ; ) /* പഴയ ബ്രൗസറുകൾക്കായുള്ള HTML5 ഡിസ്പ്ലേ-റോൾ റീസെറ്റ് */ ലേഖനം, മാറ്റിനിർത്തുക, വിശദാംശങ്ങൾ, ഫിഗ്ക്യാപ്ഷൻ, ചിത്രം, അടിക്കുറിപ്പ്, തലക്കെട്ട്, എച്ച്ഗ്രൂപ്പ്, മെനു, നാവ്, വിഭാഗം (പ്രദർശനം: ബ്ലോക്ക്; ) ബോഡി (ലൈൻ-ഉയരം: 1; ) ol, ul (list-style: none; ) blockquote, q ( ഉദ്ധരണികൾ: ഒന്നുമില്ല; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- തകർച്ച: തകർച്ച; ബോർഡർ-സ്പെസിംഗ്: 0; )

വെബ് ഡെവലപ്പർമാരുടെ ഒരു പ്രത്യേക സർക്കിൾ സ്വീകരിച്ച ഈ ഫയലിന്റെ ഒരു സ്റ്റാൻഡേർഡ് മാത്രമാണിത്.

നിങ്ങൾ പരിചയസമ്പന്നനായ ഒരു പ്രോഗ്രാമർ ആണെങ്കിലും അല്ലെങ്കിൽ ആരംഭിക്കുന്നവരായാലും, നിങ്ങളുടെ സ്വന്തം റീസെറ്റ് ഫയൽ വികസിപ്പിക്കാൻ ഞാൻ നിങ്ങളെ ഉപദേശിക്കുന്നു. നിങ്ങൾക്ക് മുകളിൽ വിവരിച്ച സ്റ്റാൻഡേർഡ് ഒരു അടിസ്ഥാനമായി എടുക്കാം, നിങ്ങളുടെ സ്വന്തം സെലക്ടർമാരുമായി ഇത് സപ്ലിമെന്റ് ചെയ്യുക അല്ലെങ്കിൽ നിലവിലുള്ളവ മാറ്റുക. ഞാൻ എനിക്കായി വികസിപ്പിച്ച അത്തരമൊരു ഫയലിന്റെ ഒരു ഉദാഹരണം ഇതാ:

ഇൻപുട്ട്, ടെക്‌സ്‌റ്റേറിയ, എ , ബട്ടൺ, തിരഞ്ഞെടുക്കുക (ഔട്ട്‌ലൈൻ: ഒന്നുമില്ല) img (ബോർഡർ: ഒന്നുമില്ല;) മണിക്കൂർ (വ്യക്തം: രണ്ടും; അതിർത്തി: ഒന്നുമില്ല; പശ്ചാത്തലം: ഒന്നുമില്ല; ) * (പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കരുത്; ) /* HTML5 പഴയ ബ്രൗസറുകൾക്കായുള്ള ഡിസ്പ്ലേ-റോൾ റീസെറ്റ് */ ലേഖനം, മാറ്റിനിർത്തൽ, വിശദാംശങ്ങൾ, ഫിഗ്ക്യാപ്ഷൻ, ഫിഗർ, ഫൂട്ടർ, ഹെഡർ, എച്ച്ഗ്രൂപ്പ്, മെനു, nav, സെക്ഷൻ (ഡിസ്പ്ലേ: ബ്ലോക്ക്; ) ബോഡി (ലൈൻ-ഉയരം: 1; ) ol, ul ( ലിസ്റ്റ് -ശൈലി: ഒന്നുമില്ല; മാർജിൻ: 0; പാഡിംഗ്: 0; ) ബ്ലോക്ക്‌ക്വോട്ട്, q (ഉദ്ധരണികൾ: ഒന്നുമില്ല; ) ബ്ലോക്ക്‌ക്വോട്ട്: മുമ്പ്, ബ്ലോക്ക് ഉദ്ധരണി: ശേഷം, q: മുമ്പ്, q: ശേഷം (ഉള്ളടക്കം: ""; ഉള്ളടക്കം: ഒന്നുമില്ല; ) പട്ടിക (ബോർഡർ-തകർച്ച: തകർച്ച; അതിർത്തി-അകലം: 0; )

വ്യക്തിപരമായ ഉപയോഗത്തിനായി മുകളിലുള്ള ഏതെങ്കിലും കോഡ് നിങ്ങൾക്ക് പകർത്താനാകും, എന്നാൽ നിങ്ങളുടെ ലേഖനങ്ങളിൽ അത് ഉപയോഗിക്കുകയാണെങ്കിൽ, ഉറവിടത്തിലേക്കുള്ള ഒരു ലിങ്ക് നൽകുക.

സ്ഥിരസ്ഥിതിയായി, css-ലെ ചില പ്രോപ്പർട്ടികൾക്കായി ബ്രൗസർ അതിന്റേതായ ക്രമീകരണങ്ങൾ സജ്ജമാക്കുന്നു. എന്നാൽ ഇവിടെ പ്രശ്‌നം എന്തെന്നാൽ, ധാരാളം വെബ് ബ്രൗസറുകൾ ഉണ്ട്, എല്ലാവർക്കും അവരവരുടെ നിയമങ്ങൾ സജ്ജമാക്കാൻ കഴിയും. എന്ത് പരിഹാരം? ഡിഫോൾട്ട് css ക്രമീകരണങ്ങൾ എങ്ങനെ പുനഃസജ്ജമാക്കാമെന്നും അവ നിങ്ങളുടേത് ഉപയോഗിച്ച് പുനരാലേഖനം ചെയ്യാമെന്നും കണ്ടെത്തുക. എന്നാൽ ഇത് എങ്ങനെ ചെയ്യാം എന്നതിനാണ് ഈ ലേഖനം സമർപ്പിക്കുന്നത്.

CSS പുനഃസജ്ജമാക്കുക അല്ലെങ്കിൽ സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങളിലേക്ക് പുനഃസജ്ജമാക്കുക

CSS റീസെറ്റ് എന്നത് സ്ഥിരസ്ഥിതിയായി ബ്രൗസർ സജ്ജമാക്കിയ ചില പാരാമീറ്ററുകൾ പുനഃസജ്ജമാക്കുന്ന ഒരു കൂട്ടം ശൈലികളാണ്. ഓരോ വെബ് ഡെവലപ്പറും തനിക്കായി ഈ ഫയൽ വ്യക്തിഗതമായി എഴുതുന്നു, മറ്റുള്ളവർ ഒരു റെഡിമെയ്ഡ് പരിഹാരം ഉപയോഗിക്കുന്നു. ഇവിടെയാണ് ഞാൻ ആരംഭിക്കാൻ നിർദ്ദേശിക്കുന്നത്. ശൈലികൾ പുനഃസജ്ജമാക്കുന്നതിന് നിരവധി നല്ല ഓപ്ഷനുകൾ ഉണ്ട്, എന്നാൽ എറിക് മേയർ സമാഹരിച്ചതാണ് എന്റെ പ്രിയപ്പെട്ടത്:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
ലൈസൻസ്: ഒന്നുമില്ല (പബ്ലിക് ഡൊമെയ്ൻ)
*/
html, ബോഡി, ഡിവി, സ്പാൻ, ആപ്ലെറ്റ്, ഒബ്ജക്റ്റ്, ഐഫ്രെയിം,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, ചുരുക്കെഴുത്ത്, വിലാസം, വലുത്, ഉദ്ധരണി, കോഡ്,
del, dfn, em, img, ins, kbd, q, s, samp,
ചെറുത്, സ്ട്രൈക്ക്, ശക്തമായ, ഉപ, sup, tt, var,
ബി, യു, ഐ, സെന്റർ,
dl, dt, dd, ol, ul, li,
ഫീൽഡ് സെറ്റ്, ഫോം, ലേബൽ, ലെജൻഡ്,
പട്ടിക, അടിക്കുറിപ്പ്, tbody, tfoot, thead, tr, th, td,
ലേഖനം, മാറ്റിനിർത്തുക, ക്യാൻവാസ്, വിശദാംശങ്ങൾ, ഉൾച്ചേർക്കുക,
ചിത്രം, ഫിഗ്‌ക്യാപ്‌ഷൻ, അടിക്കുറിപ്പ്, തലക്കെട്ട്, എച്ച്ഗ്രൂപ്പ്,
മെനു, നാവ്, ഔട്ട്പുട്ട്, മാണിക്യം, വിഭാഗം, സംഗ്രഹം,
സമയം, അടയാളം, ഓഡിയോ, വീഡിയോ (
മാർജിൻ: 0;
പാഡിംഗ്: 0;
അതിർത്തി: 0;
ഫോണ്ട് വലുപ്പം: 100%;
ഫോണ്ട്: പാരമ്പര്യം;
ലംബ-അലൈൻ: അടിസ്ഥാനരേഖ;
}
/* പഴയ ബ്രൗസറുകൾക്കായി HTML5 ഡിസ്പ്ലേ-റോൾ റീസെറ്റ് */
ലേഖനം, മാറ്റിനിർത്തൽ, വിശദാംശങ്ങൾ, ഫിഗ്ക്യാപ്ഷൻ, ചിത്രം,
അടിക്കുറിപ്പ്, തലക്കെട്ട്, hgroup, മെനു, nav, വിഭാഗം (
ഡിസ്പ്ലേ: ബ്ലോക്ക്;
}
ശരീരം (
ലൈൻ-ഉയരം: 1;
}
ഓൾ, ഉൽ (
ലിസ്റ്റ് ശൈലി: ഒന്നുമില്ല;
}
ബ്ലോക്ക്ക്വോട്ട്,ക്യു(
ഉദ്ധരണികൾ: ഒന്നുമില്ല;
}
ബ്ലോക്ക് ഉദ്ധരണി:മുമ്പ്, ബ്ലോക്ക് ഉദ്ധരണി: ശേഷം,
q: മുമ്പ്, q: ശേഷം (
ഉള്ളടക്കം: "";
ഉള്ളടക്കം: ഒന്നുമില്ല;
}
മേശ (
അതിർത്തി തകർച്ച: തകർച്ച;
ബോർഡർ-സ്പെസിംഗ്: 0;
}

ഞാൻ കോഡിനെക്കുറിച്ച് കുറച്ച് അഭിപ്രായം പറയാം. ഒന്നാമതായി, ആവശ്യമായ എല്ലാ ഘടകങ്ങളുടെയും അകത്തെയും പുറത്തെയും മാർജിനുകൾ ഇവിടെ പുനഃസജ്ജീകരിച്ചിരിക്കുന്നു. രണ്ടാമതായി, HTML5 ഘടകങ്ങൾക്കുള്ള പിന്തുണയുണ്ട്. ചില ബ്രൗസർ പതിപ്പുകളിൽ ശരിയായി പ്രദർശിപ്പിക്കാൻ അനുവദിക്കുന്ന ഒരു റൂൾ സെറ്റ് അവർക്ക് ഉണ്ട്. മൂന്നാമതായി, ടേബിളുകൾക്കൊപ്പം സൗകര്യപ്രദമായ പ്രവർത്തനത്തിനായി സാധാരണ ക്രമീകരണങ്ങൾ സജ്ജീകരിച്ചിരിക്കുന്നു (സെല്ലുകളും ഇരട്ട ബോർഡറുകളും തമ്മിലുള്ള ഇടങ്ങൾ നീക്കംചെയ്യുന്നു). ലിസ്റ്റുകൾക്കായുള്ള സ്റ്റാൻഡേർഡ് ബുള്ളറ്റുകളും ഉദ്ധരണികൾക്കുള്ള ഉദ്ധരണി ചിഹ്നങ്ങളും പുനഃസജ്ജീകരിച്ചു. നിങ്ങൾക്ക് ഡിഫോൾട്ട് സ്റ്റൈലിംഗ് ഉപയോഗിക്കണമെങ്കിൽ കോഡിന്റെ ഈ ഭാഗങ്ങൾ നീക്കം ചെയ്യേണ്ടതാണ്.

css ക്രമീകരണങ്ങൾ സ്വയം എങ്ങനെ പുനഃസജ്ജമാക്കാം

നിങ്ങൾക്ക് CSS-ന്റെ കൂടുതലോ കുറവോ സാധാരണ കമാൻഡ് ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് രണ്ട് നിയമങ്ങൾ സ്വയം എഴുതാൻ ശ്രമിക്കാം. ഉദാഹരണത്തിന്:

*{
മാർജിൻ: 0;
പാഡിംഗ്: 0;
}

ഇത് ഒരുപക്ഷേ ഏറ്റവും ലളിതമായ ആജ്ഞയാണ്. ഈ കേസിലെ നക്ഷത്രചിഹ്നം എല്ലാ സെലക്ടർമാരെയും പ്രതിനിധീകരിക്കുന്നു, അതിനാൽ വെബ് പേജിലെ എല്ലാ ഘടകങ്ങളിലേക്കും ശൈലികൾ പ്രയോഗിക്കും, അവയുടെ പാഡിംഗും പാഡിംഗും പുനഃസജ്ജമാക്കും. നിങ്ങൾ ആശ്ചര്യപ്പെട്ടേക്കാം, എന്നാൽ പല വെബ് ബ്രൗസറുകളിലും ക്രോസ്-ബ്രൗസർ അനുയോജ്യത നൽകാൻ ഈ ലളിതമായ കോഡ് ലൈനുകൾ മതിയാകും. മറ്റെല്ലാ നിയമങ്ങളും നിങ്ങളുടെ സ്വന്തം വിവേചനാധികാരത്തിൽ ചേർക്കാവുന്നതാണ്. എല്ലാ HTML5 ടാഗുകൾക്കുമായി ഡിസ്പ്ലേ: ബ്ലോക്ക് ചേർക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു.

css റീസെറ്റ് നിയമങ്ങൾ എവിടെ സ്ഥാപിക്കണം

മുകളിലുള്ള കോഡ് ഞാൻ നിങ്ങൾക്ക് വാഗ്ദാനം ചെയ്തു, പക്ഷേ അത് എവിടെ ചേർക്കണം? ഇവിടെ രണ്ട് ഓപ്ഷനുകൾ ഉണ്ട്:

നിങ്ങളുടെ സൈറ്റിലെ പ്രധാന സ്റ്റൈൽ ഷീറ്റിന്റെ തുടക്കത്തിൽ തന്നെ ഇത് ചേർക്കുക
സെർവറിൽ ഒരു പുതിയ css ഫയൽ സൃഷ്‌ടിച്ച് അതിൽ കോഡ് സംരക്ഷിക്കുക, തുടർന്ന് അത് സംരക്ഷിച്ച് പ്രധാന style.css ടേബിളിന് മുമ്പായി എല്ലാ പേജുകളിലേക്കും ബന്ധിപ്പിക്കുക.

ഒരു css സ്റ്റൈൽ ഷീറ്റ് html-ലേക്ക് ബന്ധിപ്പിക്കുന്നതിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾക്ക്, കാണുക

എന്റെ അഭിപ്രായത്തിൽ, രണ്ടാമത്തെ ഓപ്ഷൻ മോശമാണ്, കാരണം ഇത് ഡൗൺലോഡിലേക്ക് ഒരു അധിക ഫയൽ ചേർക്കുന്നതിലൂടെ പ്രകടനത്തെ കുറയ്ക്കുന്നു. മറുവശത്ത്, ഈ നിയമങ്ങൾ നിയന്ത്രിക്കുന്നത് ഇത് നിങ്ങൾക്ക് എളുപ്പമാക്കും. എന്നാൽ പ്രകടനത്തിന്, ആദ്യ ഓപ്ഷൻ ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു.

സൈറ്റിന്റെ ക്രോസ്-ബ്രൗസർ അനുയോജ്യത ഉറപ്പാക്കുന്നതിനുള്ള നടപടികളിലൊന്നാണ് ക്രമീകരണങ്ങൾ പുനഃസജ്ജമാക്കുന്നത്, അതായത്, വ്യത്യസ്ത വെബ് ബ്രൗസറുകളിൽ ഒരേ ഡിസ്പ്ലേ. തീർച്ചയായും, ഇവയെല്ലാം ഒരേ രൂപം ഉറപ്പാക്കുന്ന നടപടികളല്ല; ബാക്കിയുള്ളവയെക്കുറിച്ച് ഈ ബ്ലോഗിൽ പിന്നീട് എഴുതാം. താൽപ്പര്യമുണ്ടെങ്കിൽ സബ്സ്ക്രൈബ് ചെയ്യുക.

ഈ ലേഖനത്തിൽ, ഞങ്ങൾ മൂന്ന് രസകരമായ രീതികൾ പഠിക്കും, അതായത് അലേർട്ട് (), സ്ഥിരീകരിക്കുക () കൂടാതെ പ്രോംപ്റ്റ് () രീതികൾ. അവയെല്ലാം ഉപയോക്താവുമായി സംവദിക്കാൻ രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്.

ഈ മൂന്ന് രീതികളും വിൻഡോ ഒബ്‌ജക്റ്റിന്റെ (ബ്രൗസർ വിൻഡോ) വകയാണ്. അവയെ ഇതുപോലെ വിളിക്കാം: window.method_name(); എന്നാൽ ഈ വിൻഡോ ഒബ്‌ജക്‌റ്റ് വ്യക്തമാക്കാൻ JavaScript ഞങ്ങളെ അനുവദിക്കുന്നു, പക്ഷേ രീതിയുടെ പേര് എഴുതാൻ.

ഞങ്ങൾ അലേർട്ട് () രീതി ഉപയോഗിച്ച് ആരംഭിക്കും. ഈ രീതി ഉപയോക്താവിന്റെ ബ്രൗസർ വിൻഡോയിൽ നിർദ്ദിഷ്ട സന്ദേശം പ്രദർശിപ്പിക്കുന്നു. ഈ വിൻഡോ മുഴുവൻ പേജിന്റെ മുകളിൽ ദൃശ്യമാകും, കൂടാതെ ഉപയോക്താവ് ശരി ബട്ടണിൽ ക്ലിക്കുചെയ്യുന്നത് വരെ, അത് അടയ്ക്കില്ല.

പ്രദർശിപ്പിക്കുന്നതിന്, അലേർട്ട്() രീതി ഉപയോഗിച്ച് ഒരു സന്ദേശം പ്രദർശിപ്പിക്കാം.

Var today_is = "തിങ്കൾ"; മുന്നറിയിപ്പ് ("ഇന്ന്" + ഇന്ന്_ഇന്ന്);

മെത്തേഡിനുള്ളിൽ നമുക്ക് html ടാഗുകൾ ഇല്ലാതെ ഏത് സ്ട്രിംഗും വ്യക്തമാക്കാം. അവ ഇവിടെ പ്രോസസ്സ് ചെയ്യപ്പെടുന്നില്ല, പക്ഷേ അതേപടി പ്രദർശിപ്പിക്കുന്നു.

നമ്മൾ സൂചിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന വരി വളരെ ദൈർഘ്യമേറിയതാണെങ്കിൽ, ഞങ്ങൾ ഒരു പുതിയ ലൈൻ സൃഷ്ടിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഇവിടെ html ടാഗ് ഉണ്ട്
പ്രവർത്തിക്കില്ല. ഇവിടെ നിങ്ങൾ "\n" പ്രതീകം ഉപയോഗിക്കേണ്ടതുണ്ട്.

മുന്നറിയിപ്പ്("Loooooooooong \nStringgggggg");

കോഡിലെ പിശകുകൾ കണ്ടെത്താൻ ഈ രീതി പലപ്പോഴും ഉപയോഗിക്കുന്നു.

കോഡ് പ്രോസസ്സിംഗ് പ്രക്രിയ മുകളിൽ നിന്ന് താഴേക്ക് പോകുന്നു, അതിനാൽ ഒരു പിശക് പിടിക്കാൻ, പിശക് സ്ഥിതിചെയ്യുന്ന പ്രതീക്ഷിക്കുന്ന സ്ഥലത്ത് ഞങ്ങൾ അലേർട്ട് () രീതി എഴുതുന്നു. അലേർട്ട്() പ്രവർത്തിച്ചിട്ടുണ്ടെങ്കിൽ, അത് എഴുതിയ വരി വരെ പിശകുകളൊന്നുമില്ല.

അടുത്തതായി, നിങ്ങൾ അത് ഒരു വരിയോ അതിൽ കൂടുതലോ താഴെ നീക്കേണ്ടതുണ്ട്. ഞങ്ങൾ മാറ്റങ്ങൾ സംരക്ഷിക്കുകയും ബ്രൗസറിൽ പേജ് വീണ്ടും പുതുക്കുകയും ചെയ്യുക, അലേർട്ട് () പ്രവർത്തിച്ചിട്ടുണ്ടോ എന്ന് നോക്കുക, അത് സ്ഥിതിചെയ്യുന്ന വരി വരെ പിശകുകളൊന്നുമില്ല, അല്ലെങ്കിൽ, അത് പ്രവർത്തിച്ചില്ലെങ്കിൽ, പിശക് സ്ഥിതി ചെയ്യുന്നത് നിലവിൽ സ്ഥിതിചെയ്യുന്ന വരിയുടെ മുകളിലുള്ള ലൈൻ. ഇങ്ങനെയാണ് നിങ്ങൾക്ക് കോഡിൽ ഒരു പിശക് കണ്ടെത്തുന്നത്.

സ്ഥിരീകരിക്കുക () രീതി

ഒരു ചോദ്യത്തിനുള്ള ഉത്തരം സ്ഥിരീകരിക്കാൻ ഈ രീതി ഉപയോഗിക്കുന്നു. രണ്ട് ഉത്തര ഓപ്ഷനുകൾ മാത്രമേയുള്ളൂ, അതെ (ശരി) അല്ലെങ്കിൽ ഇല്ല (റദ്ദാക്കുക). ഉപയോക്താവ് അതെ എന്ന് ഉത്തരം നൽകിയാൽ, രീതി ശരിയാണെന്ന് നൽകുന്നു, അല്ലാത്തപക്ഷം അത് തെറ്റാണ്.

ഉദാഹരണത്തിന്, ഞങ്ങൾ സ്ഥിരീകരിക്കുന്ന () രീതി ഉപയോഗിച്ച് ഒരു വിൻഡോ പ്രദർശിപ്പിക്കും, അവിടെ ഞങ്ങൾ ഉപയോക്താവിനോട് ചോദിക്കും "നിങ്ങൾക്ക് പേജ് വിടണമെന്ന് തീർച്ചയാണോ?" ഉപയോക്താവ് അതെ എന്ന് ഉത്തരം നൽകിയാൽ, അലേർട്ട് () രീതിയിലൂടെ "ഉപയോക്താവ് പേജ് വിടാൻ ആഗ്രഹിക്കുന്നു" എന്ന സന്ദേശം ഞങ്ങൾ പ്രദർശിപ്പിക്കും, അല്ലാത്തപക്ഷം "ഉപയോക്താവ് പേജ് വിടാൻ ആഗ്രഹിക്കുന്നില്ല" എന്ന മറ്റൊരു സന്ദേശം ഞങ്ങൾ പ്രദർശിപ്പിക്കും.

Var user_answer = സ്ഥിരീകരിക്കുക("നിങ്ങൾക്ക് പേജ് വിടണമെന്ന് തീർച്ചയാണോ?"); if(user_answer) അലേർട്ട് ("ഉപയോക്താവ് പേജ് വിടാൻ ആഗ്രഹിക്കുന്നു"); മറ്റ് മുന്നറിയിപ്പ് ("ഉപയോക്താവിന് \nപേജ് വിടാൻ താൽപ്പര്യമില്ല");

ഇങ്ങനെയാണ് സ്ഥിരീകരണം() രീതി പ്രവർത്തിക്കുന്നത്. ഇത് വ്യത്യസ്ത അവസരങ്ങളിൽ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു സൈറ്റിൽ നിന്ന് എന്തെങ്കിലും നീക്കം ചെയ്യുന്നതിനുമുമ്പ്, ഉപയോക്താവിന് അവന്റെ പ്രവർത്തനങ്ങളിൽ ആത്മവിശ്വാസമുണ്ടോ എന്ന് ചോദിക്കുന്നത് പതിവാണ്. അല്ലെങ്കിൽ, ഫോം അയയ്‌ക്കുന്നതിന് മുമ്പ്, നിങ്ങൾക്ക് ഉപയോക്താവിനോട് “നിങ്ങൾ എല്ലാം ശരിയായി പൂരിപ്പിച്ചോ?” എന്ന് ചോദിക്കാം, അവൻ അതെ എന്ന് ഉത്തരം നൽകിയാൽ, ഫോം അയയ്‌ക്കും, അല്ലാത്തപക്ഷം അത് അയയ്‌ക്കില്ല.

പ്രോംപ്റ്റ് () രീതി

ഞങ്ങൾ പഠിക്കുന്ന അവസാന രീതി പ്രോംപ്റ്റ് () രീതിയാണ്. ഈ രീതി മറ്റ് രണ്ട് രീതികളേക്കാൾ കുറവാണ് ഉപയോഗിക്കുന്നത്. ഉപയോക്താവിൽ നിന്ന് ചില വിവരങ്ങൾ സ്വീകരിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, അത് അവൻ ഒരു ടെക്സ്റ്റ് ഫീൽഡിലേക്ക് നൽകും.

തൽഫലമായി, ഉപയോക്താവ് ശരി ബട്ടണിൽ ക്ലിക്കുചെയ്‌താൽ നൽകിയ സ്‌ട്രിംഗും അല്ലെങ്കിൽ ഉപയോക്താവ് റദ്ദാക്കൽ ബട്ടണിൽ ക്ലിക്കുചെയ്‌താൽ അസാധുവാക്കലും പ്രോംപ്റ്റ്() രീതി നൽകുന്നു.

ഒരു പാരാമീറ്റർ എന്ന നിലയിൽ, അതായത്, ഈ രീതിയുടെ ബ്രാക്കറ്റുകൾക്കുള്ളിൽ, നമുക്ക് ഒരു സൂചനാ വരിയോ ഒരു ചോദ്യമോ എഴുതാം, അതുവഴി എന്ത് വിവരമാണ് നൽകേണ്ടതെന്ന് ഉപയോക്താവിന് അറിയാം.

ഉദാഹരണത്തിന്, "നിങ്ങളുടെ പേരെന്താണ്?" എന്ന ചോദ്യത്തിന് ഉത്തരം നൽകാൻ ഉപയോക്താവിനോട് ആവശ്യപ്പെടാം. അലേർട്ട്() രീതി ഉപയോഗിച്ച് ഉപയോക്താവ് നൽകിയ പേര് സ്ക്രീനിൽ പ്രദർശിപ്പിക്കും.

വാർ നാമം = പ്രോംപ്റ്റ് ("നിങ്ങളുടെ പേര് എന്താണ്?"); മുന്നറിയിപ്പ് ("നിങ്ങളുടെ പേര് " + പേര്);

ബ്രൗസറിൽ പേജ് സംരക്ഷിച്ച് തുറക്കുക.

തീർച്ചയായും, നിങ്ങൾക്ക് പ്രോംപ്റ്റ് () രീതിയിൽ നിന്ന് ടെക്സ്റ്റ് ഫീൽഡിലേക്ക് ഏത് വിവരവും നൽകാം. അക്കങ്ങളോ മറ്റ് പ്രത്യേക പ്രതീകങ്ങളോ ആണെങ്കിൽപ്പോലും, ഈ വിവരങ്ങൾ ഒരു സ്ട്രിംഗായി നൽകും.

ഉദാഹരണത്തിന്, ഉപയോക്താവിനോട് രണ്ട് അക്കങ്ങൾ നൽകാനും തുടർന്ന് അവയെ ഗുണിക്കാനും ആവശ്യപ്പെടാം. സംഖ്യകൾ ഗുണിക്കുന്നതിന് ഒരുതരം കാൽക്കുലേറ്റർ ഉണ്ടാകും.

Var x = പ്രോംപ്റ്റ് ("ആദ്യ നമ്പർ നൽകുക:"); var y = പ്രോംപ്റ്റ് ("രണ്ടാമത്തെ നമ്പർ നൽകുക:"); //നൽകിയ സംഖ്യകളെ ഒരു സ്ട്രിംഗ് തരത്തിൽ നിന്ന് ഒരു സംഖ്യാ തരത്തിലേക്ക് പരിവർത്തനം ചെയ്യുക x = Number(x); y = നമ്പർ(y); document.write(x + " * " + y + " = " + (x * y));

നൽകിയ സംഖ്യകൾ സ്ട്രിംഗുകളാണ്, അതിനാൽ ഗുണനത്തിന്റെ ശരിയായ ഫലത്തിനായി, ഈ സംഖ്യകൾ സ്ട്രിംഗ് തരത്തിൽ നിന്ന് സാധാരണ സംഖ്യകളിലേക്ക് പരിവർത്തനം ചെയ്യുന്ന നമ്പർ() ഫംഗ്ഷനിലൂടെ കടന്നുപോകണം.

ശരി, അത്രമാത്രം. ഇപ്പോൾ നിങ്ങൾക്ക് മൂന്ന് രീതികൾ കൂടി അറിയാം: അലേർട്ട് (), സ്ഥിരീകരിക്കുക () കൂടാതെ പ്രോംപ്റ്റ് (). നിങ്ങൾക്ക് പ്രായോഗികമായി സുരക്ഷിതമായി ഉപയോഗിക്കാൻ കഴിയുന്നത്.

ഈ പാഠത്തിൽ, വിൻഡോ ഒബ്‌ജക്‌റ്റിന്റെ അലേർട്ട്(), പ്രോംപ്‌റ്റ്(), സ്ഥിരീകരണം() രീതികളെക്കുറിച്ച് നമ്മൾ പഠിക്കും.

മുന്നറിയിപ്പ് () രീതി

അലേർട്ട്() രീതി ഉപയോക്താവിന്റെ സ്ക്രീനിൽ നിർദ്ദിഷ്ട സന്ദേശവും "ശരി" ബട്ടണും ഉള്ള ഒരു മുന്നറിയിപ്പ് ഡയലോഗ് ബോക്സും പ്രദർശിപ്പിക്കുന്നതിനാണ് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. പ്രധാന വിവരങ്ങൾ ഉപയോക്താവിന് കൈമാറാൻ ഇത് ഉപയോഗിക്കാം.

window.alert(Parameter_1);

അലേർട്ട്() രീതിക്ക് ആവശ്യമായ ഒരു പാരാമീറ്റർ ഉണ്ട് - ഡയലോഗ് ബോക്സിൽ പ്രദർശിപ്പിക്കുന്ന സന്ദേശത്തിന്റെ വാചകമാണിത്. ഈ രീതി അതിന്റെ നിർവ്വഹണത്തിന്റെ ഫലമായി ഒന്നും തിരികെ നൽകുന്നില്ല.

ഉദാഹരണത്തിന്, ഒരു സൈറ്റ് സന്ദർശകൻ ഒരു ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ അവർക്ക് മുന്നറിയിപ്പ് ഡയലോഗ് ബോക്സ് പ്രദർശിപ്പിക്കാം: വെബ്സൈറ്റിലേക്ക് പോകുക

സ്ഥിരീകരിക്കുക() രീതി വിൻഡോ ഒബ്‌ജക്‌റ്റിന്റെ സ്ഥിരീകരണം() രീതി ഉപയോക്താവിന്റെ സ്‌ക്രീനിൽ നിർദ്ദിഷ്ട സന്ദേശവും ശരി, റദ്ദാക്കൽ ബട്ടണുകളും ഉള്ള ഒരു ഡയലോഗ് ബോക്‌സ് പ്രദർശിപ്പിക്കുന്നതിനാണ് രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നത്. ഒരു പ്രത്യേക പ്രവർത്തനം നടത്താൻ ഉപയോക്താവിനോട് അനുമതി ചോദിക്കാൻ ഒരു സ്ഥിരീകരണ വിൻഡോ ഉപയോഗിക്കാം.

var ഫലം സ്ഥിരീകരിക്കുക = സ്ഥിരീകരിക്കുക(Parameter_1);

ഈ രീതിക്ക് ഒരു പാരാമീറ്റർ ഉണ്ട് - ഇത് ഡയലോഗ് ബോക്സിൽ പ്രദർശിപ്പിക്കുന്ന സന്ദേശത്തിന്റെ വാചകമാണ്.

സ്ഥിരീകരണം () രീതി അതിന്റെ നിർവ്വഹണത്തിന്റെ ഫലമായി രണ്ട് മൂല്യങ്ങളിൽ ഒന്ന് നൽകുന്നു:

ഉപയോക്താവ് "ശരി" ക്ലിക്ക് ചെയ്താൽ ശരി;
ഉപയോക്താവ് റദ്ദാക്കുക ക്ലിക്കുചെയ്യുകയോ അടയ്ക്കുകയോ ചെയ്‌താൽ തെറ്റ്.

ഉദാഹരണത്തിന്, ഡയലോഗ് ബോക്സിലെ "ശരി" ബട്ടണിൽ ഉപയോക്താവ് ക്ലിക്ക് ചെയ്തതിന്റെ ഫലം id="resultConfirm" എന്ന ഘടകത്തിൽ p എന്ന ഘടകത്തിൽ പ്രദർശിപ്പിക്കാം:

var resultActionUser = സ്ഥിരീകരിക്കുക("ഉപയോക്താവേ, ശരി ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക."); if (resultActionUser) (document.getElementById("resultConfirm").innerHTML = "ഉപയോക്താവേ, ശരി ബട്ടൺ ക്ലിക്ക് ചെയ്തതിന് നന്ദി"; ) else (document.getElementById("resultConfirm").innerHTML = "ഉപയോക്താവേ, നിങ്ങളുടെ കാര്യത്തിൽ ഞങ്ങൾ നിരാശരാണ് പ്രതികരണം ";)

പ്രോംപ്റ്റ് () രീതി

ഒരു സന്ദേശം, ഡാറ്റ നൽകുന്നതിനുള്ള ഒരു ടെക്സ്റ്റ് ഫീൽഡ്, "ശരി", "റദ്ദാക്കുക" ബട്ടണുകൾ എന്നിവ ഉപയോഗിച്ച് ഉപയോക്താവിന്റെ സ്ക്രീനിൽ ഒരു ഡയലോഗ് ബോക്സ് പ്രദർശിപ്പിക്കുന്നതിനാണ് പ്രോംപ്റ്റ്() രീതി രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. ഉപയോക്താവിനെ ഡാറ്റയ്ക്കായി ആവശ്യപ്പെടുന്നതിനാണ് ഇത് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്.

var resultPrompt = പ്രോംപ്റ്റ്(Parameter_1, Parameter_2);

ഈ രീതിക്ക് രണ്ട് പാരാമീറ്ററുകൾ ഉണ്ട്:

ഡയലോഗ് ബോക്സിൽ പ്രദർശിപ്പിക്കുന്ന സന്ദേശം. ഈ പരാമീറ്റർ ആവശ്യമാണ് കൂടാതെ ടെക്സ്റ്റ് ഫീൽഡിൽ ഉപയോക്താവ് എന്ത് ഡാറ്റയാണ് നൽകേണ്ടതെന്ന് "പറയുന്ന" ഒരു സന്ദേശം അടങ്ങിയിരിക്കുന്നു;
രണ്ടാമത്തെ പാരാമീറ്റർ ഓപ്ഷണൽ ആണ് കൂടാതെ തുറക്കുമ്പോൾ ഡയലോഗ് ബോക്സിന്റെ ഇൻപുട്ട് ഫീൽഡിൽ പ്രിന്റ് ചെയ്യുന്ന പ്രാരംഭ മൂല്യം വ്യക്തമാക്കാൻ ഇത് ഉപയോഗിക്കാം.

ഉപയോക്താവിന്റെ പ്രവർത്തനങ്ങളെ ആശ്രയിച്ച്, പ്രോംപ്റ്റ്() രീതി ഇനിപ്പറയുന്ന ഡാറ്റ നൽകിയേക്കാം:

ടെക്സ്റ്റ് മൂല്യം - ഇൻപുട്ട് ഫീൽഡിൽ ഡാറ്റ അടങ്ങിയിരിക്കുകയും ഉപയോക്താവ് "ശരി" ക്ലിക്ക് ചെയ്യുകയും ചെയ്താൽ;
ശൂന്യമായ വരി - ഇൻപുട്ട് ഫീൽഡിൽ ഡാറ്റ ഇല്ലെങ്കിൽ ഉപയോക്താവ് "ശരി" ക്ലിക്ക് ചെയ്യുക;
null - ഉപയോക്താവ് "റദ്ദാക്കുക" ക്ലിക്ക് ചെയ്യുകയോ ഈ വിൻഡോ അടയ്ക്കുകയോ ചെയ്താൽ, ടെക്സ്റ്റ് ഫീൽഡിൽ എന്ത് ഡാറ്റയാണ് നൽകിയത് എന്നത് പ്രശ്നമല്ല.

ശ്രദ്ധിക്കുക: അലേർട്ട്() , കൺഫേം() അല്ലെങ്കിൽ പ്രോംപ്റ്റ്() രീതികളിൽ ഒന്ന് എക്സിക്യൂട്ട് ചെയ്തതിന്റെ ഫലമായി ദൃശ്യമാകുന്ന ഡയലോഗ് ബോക്സ് മോഡൽ ആണ്, അതായത്. ഉപയോക്താവ് ഡയലോഗ് ബോക്സ് അടയ്‌ക്കുന്നതുവരെ പാരന്റ് ആപ്ലിക്കേഷനിലേക്കുള്ള (ബ്രൗസർ) ഉപയോക്താവിന്റെ ആക്‌സസ് ഇത് തടയുന്നു.

ഉദാഹരണത്തിന്, നമുക്ക് ഉപയോക്താവിനോട് ഒരു പേര് ചോദിക്കാം, ഫലത്തെ ആശ്രയിച്ച്, id="nameUser" ഉപയോഗിച്ച് എലമെന്റിലെ ടെക്സ്റ്റ് പ്രദർശിപ്പിക്കുക :

var nameUser = പ്രോംപ്റ്റ് ("നിങ്ങളുടെ പേര് നൽകുക?"); എങ്കിൽ (nameUser) (document.getElementById("nameUser").innerHTML = nameUser +", സൈറ്റിലേക്ക് സ്വാഗതം!"; ) else (document.getElementById("nameUser").innerHTML = "അതിഥി, സൈറ്റിലേക്ക് സ്വാഗതം!" ;)