Java Script

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್(Javascript) ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗೆ Interactivityಯನ್ನು ಸೇರಿಸುವ ಪ್ರೋಗ್ರಾಮಿಂಗ್ langaugeಆಗಿದೆ. ಈ ಲೇಖನವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಸಾಧ್ಯವಾದಷ್ಟು ನಿಮ್ಮ ತಿಳುವಳಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

What is Javascript/ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಂದರೇನು?

JavaScript (“JS” for short) ಇದು full-fledged dynamic programming language ಆಗಿದೆ , ಇದು websiteಗೆ interactivityನ್ನು ಕೊಡುತ್ತದೆ. ಇದನ್ನು Brendan Eich (co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation). ಕಂಡುಹಿಡಿದರು.

JavaScript is versatile and beginner-friendly. ಹೆಚ್ಚಿನ ಅನುಭವದೊಂದಿಗೆ, ನೀವು gameಗಳು, ಅನಿಮೇಟೆಡ್ 2 ಡಿ ಮತ್ತು 3 ಡಿ ಗ್ರಾಫಿಕ್ಸ್, ಸಮಗ್ರ ಡೇಟಾಬೇಸ್-ಚಾಲಿತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ!

JavaScript itself is relatively compact, yet very flexible. ಡೆವಲಪರ್‌ಗಳು ಕೋರ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ language ಮೇಲೆ ವಿವಿಧ tools ಗಳನ್ನು ಬರೆದಿದ್ದಾರೆ, minimum effortಇಂದ ಅಪಾರ ಪ್ರಮಾಣದ function ನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತಾರೆ. ಇವುಗಳ ಸಹಿತ:

• ವೆಬ್ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ನಿರ್ಮಿಸಲಾದ ಬ್ರೌಸರ್ ಅಪ್ಲಿಕೇಷನ್ ಪ್ರೊಗ್ರಾಮಿಂಗ್ ಇಂಟರ್ಫೇಸ್‌ಗಳು (API ಗಳು), ಕ್ರಿಯಾತ್ಮಕವಾಗಿ HTML ಅನ್ನು ರಚಿಸುವುದು ಮತ್ತು CSS ಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸುವುದು; ಬಳಕೆದಾರರ/users ವೆಬ್‌ಕ್ಯಾಮ್‌ನಿಂದ ವೀಡಿಯೊ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ಸಂಗ್ರಹಿಸುವುದು ಮತ್ತು ನಿರ್ವಹಿಸುವುದು ಅಥವಾ 3D ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಆಡಿಯೊ ಮಾದರಿಗಳನ್ನು ಉತ್ಪಾದಿಸುವುದು.
• ಟ್ವಿಟರ್ ಅಥವಾ ಫೇಸ್‌ಬುಕ್‌ನಂತಹ ಇತರ ವಿಷಯ ಪೂರೈಕೆದಾರರಿಂದ ಸೈಟ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯವನ್ನು ಸಂಯೋಜಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅನುಮತಿಸುವ ಮೂರನೇ ವ್ಯಕ್ತಿಯ API ಗಳು.
• ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಕೆಲಸವನ್ನು ವೇಗಗೊಳಿಸಲು ನೀವು HTML ಗೆ ಅನ್ವಯಿಸಬಹುದಾದ ಮೂರನೇ ವ್ಯಕ್ತಿಯ Frameworks ಮತ್ತು Libraries.

ಕೆಳಗಿನ ವಿಭಾಗವು ಕೋರ್ ಭಾಷೆಯ ಕೆಲವು ಅಂಶಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ ಮತ್ತು ಕೆಲವು ಬ್ರೌಸರ್ API ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಆಡಲು ಅವಕಾಶವನ್ನು/opportunity ನೀಡುತ್ತದೆ. ಆನಂದಿಸಿ!

ಹಲೋ ವರ್ಲ್ಡ್! ಉದಾಹರಣೆ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಆಧುನಿಕ ವೆಬ್ ತಂತ್ರಜ್ಞಾನಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ! ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೌಶಲ್ಯ/skill ಗಳು ಬೆಳೆದಂತೆ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಶಕ್ತಿ ಮತ್ತು ಸೃಜನಶೀಲತೆಯ ಹೊಸ ಆಯಾಮವನ್ನು ನಮೂದಿಸುತ್ತವೆ.

ಆದಾಗ್ಯೂ, HTML ಮತ್ತು CSS ನೊಂದಿಗೆ ಆರಾಮವಾಗುವುದಕ್ಕಿಂತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಆರಾಮವಾಗಿರುವುದು ಹೆಚ್ಚು ಸವಾಲಾಗಿದೆ. ನೀವು ಸಣ್ಣದನ್ನು ಪ್ರಾರಂಭಿಸಬೇಕಾಗಬಹುದು ಮತ್ತು ಕ್ರಮೇಣ ಪ್ರಗತಿ ಹೊಂದಬಹುದು. ಪ್ರಾರಂಭಿಸಲು, Hello world ರಚಿಸಲು ನಿಮ್ಮ ಪುಟಕ್ಕೆ/pageಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂದು ಪರಿಶೀಲಿಸೋಣ! ಉದಾಹರಣೆ. (ಹಲೋ ವರ್ಲ್ಡ್! greeting ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಉದಾಹರಣೆ.)

1. ನಿಮ್ಮ test ಸೈಟ್‌ಗೆ ಹೋಗಿ ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ಹೆಸರಿನ ಹೊಸ ಫೋಲ್ಡರ್ create ಮಾಡಿ. ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ, main.js ಎಂಬ ಹೊಸ ಫೈಲ್ ಅನ್ನು create ಮಾಡಿ ಮತ್ತು ಅದನ್ನು saveಮಾಡಿ .
2. ನಿಮ್ಮ index.html ಫೈಲ್‌ನಲ್ಲಿ, close ಮಾಡುವ ಮೊದಲು ಈ ಕೋಡ್ ಅನ್ನು ಹೊಸ ಸಾಲಿನಲ್ಲಿ ನಮೂದಿಸಿ </ body> ಟ್ಯಾಗ್

3. ಇದು CSS ಗಾಗಿ ಅಂಶದಂತೆಯೇ ಕೆಲಸ ಮಾಡುತ್ತಿದೆ. ಇದು pageಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಇದು HTMLಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ (CSS ಜೊತೆಗೆ, ಮತ್ತು ಪುಟದಲ್ಲಿ ಬೇರೆ ಯಾವುದಾದರೂ).

const myHeading = document.querySelector(‘h1’); myHeading.textContent = ‘Hello world!’;

4 .Main.js ಫೈಲ್‌ಗೆ ಈ ಕೋಡ್ ಸೇರಿಸಿ:

5 .HTML ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು save ಮಾಡಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನಂತರ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ index.html ಅನ್ನು ಲೋಡ್ ಮಾಡಿ. ನೀವು ಈ ರೀತಿಯದನ್ನು ನೋಡಬೇಕು

ಗಮನಿಸಿ: ಸೂಚನೆಗಳು (ಮೇಲಿನ) HTML ಫೈಲ್‌ನ ಕೆಳಭಾಗದಲ್ಲಿ <ಸ್ಕ್ರಿಪ್ಟ್> ಅಂಶವನ್ನು ಇರಿಸಲು ಕಾರಣ ಬ್ರೌಸರ್ ಫೈಲ್‌ನಲ್ಲಿ ಗೋಚರಿಸುವ ಕ್ರಮದಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಓದುತ್ತದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೊದಲು ಲೋಡ್ ಆಗಿದ್ದರೆ ಮತ್ತು ಅದು ಇನ್ನೂ ಲೋಡ್ ಆಗದ HTML ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬೇಕಾದರೆ, ಸಮಸ್ಯೆಗಳಿರಬಹುದು. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು HTML ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿ ಇಡುವುದು ಈ ಅವಲಂಬನೆಯನ್ನು ಸರಿಹೊಂದಿಸಲು ಒಂದು ಮಾರ್ಗವಾಗಿದೆ.

What happened/ಏನಾಯಿತು?

The heading text changed to Hello world! using JavaScript. ನಿಮ್ಮ text ನ(Heading) ಪಡೆದುಕೊಳ್ಳಲು querySelector () ಎಂಬ function ಬಳಸಿಕೊಂಡು ನೀವು ಇದನ್ನು ಮಾಡಿದ್ದೀರಿ, ತದನಂತರ ಅದನ್ನು myheading ಎಂಬ ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ. ಇದು ನಾವು CSS ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸಿದಂತೆಯೇ ಇರುತ್ತದೆ. ನೀವು ಒಂದು element ಗೆ ಏನನ್ನಾದರೂ ಮಾಡಲು ಬಯಸಿದಾಗ, ನೀವು ಅದನ್ನು ಮೊದಲು select ಮಾಡಬೇಕಾಗುತ್ತದೆ.

ಅದನ್ನು ಅನುಸರಿಸಿ, ಕೋಡ್ myheading ವೇರಿಯೇಬಲ್ನ textContent property ಯನ್ನುಹಲೋ ವರ್ಲ್ಡ್ ಗೆ ಹೊಂದಿಸುತ್ತದೆ!

ಗಮನಿಸಿ: ಈ Exercise ನೀವು ಬಳಸಿದ ಎರಡೂ ವೈಶಿಷ್ಟ್ಯಗಳು Document Object Mode (DOM) API ನ ಭಾಗಗಳಾಗಿವೆ, ಇದು document ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಹೊಂದಿದೆ.

Language basics crash course

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ನಿಮಗೆ ಉತ್ತಮ ತಿಳುವಳಿಕೆಯನ್ನು ನೀಡಲು, ಭಾಷೆಯ ಕೆಲವು ಪ್ರಮುಖ ಲಕ್ಷಣಗಳನ್ನು ವಿವರಿಸೋಣ. ಈ ವೈಶಿಷ್ಟ್ಯಗಳು/features ಎಲ್ಲಾ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಿಗೆ ಸಾಮಾನ್ಯವಾಗಿದೆ ಎಂಬುದು ಗಮನಿಸಬೇಕಾದ ಸಂಗತಿ. ಈ ಮೂಲಭೂತ/fundamentals ಅಂಶಗಳನ್ನು ನೀವು ಕರಗತ ಮಾಡಿಕೊಂಡರೆ, ಇತರ ಭಾಷೆಗಳಲ್ಲೂ ಕೋಡಿಂಗ್ ಮಾಡಲು ನೀವು ಪ್ರಾರಂಭಿಸುತ್ತೀರಿ!

ಪ್ರಮುಖ: ಈ ಲೇಖನದಲ್ಲಿ, ಏನಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ನಿಮ್ಮ Javascript console ಗೆ ಉದಾಹರಣೆ ಕೋಡ್ ಸಾಲುಗಳನ್ನು ನಮೂದಿಸಲು ಪ್ರಯತ್ನಿಸಿ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕನ್ಸೋಲ್‌ಗಳ ಕುರಿತು ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ,JavaScript consoles, see Discover browser developer tools.

ವೇರಿಯೇಬಲ್(Variables):

ವೇರಿಯೇಬಲ್ Valueಗಳನ್ನು ಸಂಗ್ರಹಿಸುವ containersಗಳಾಗಿವೆ. ನೀವು ವೇರಿಯೇಬಲ್ ಅನ್ನು var ಎಂದು ಘೋಷಿಸುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸಿ) ಅಥವಾ let ಕೀವರ್ಡ್, ನಂತರ ನೀವು ವೇರಿಯೇಬಲ್ಗೆ ನೀಡುವ ಹೆಸರನ್ನು ಕೊಡಬೇಕು.

let myVariable;

ಗಮನಿಸಿ: ಒಂದು ಸಾಲಿನ ಕೊನೆಯಲ್ಲಿರುವ ಅರ್ಧವಿರಾಮ(semicolon) ಚಿಹ್ನೆಯು ಹೇಳಿಕೆ ಎಲ್ಲಿ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ಸೂಚಿಸುತ್ತದೆ. ನೀವು ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಹೇಳಿಕೆಗಳನ್ನು ಬೇರ್ಪಡಿಸುವ/seperate ಅಗತ್ಯವಿರುವಾಗ ಮಾತ್ರ ಇದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಪ್ರತಿ ಹೇಳಿಕೆಯ ಕೊನೆಯಲ್ಲಿ ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಗಳನ್ನು ಹೊಂದಿರುವುದು ಒಳ್ಳೆಯದು ಎಂದು ಕೆಲವರು ನಂಬುತ್ತಾರೆ. ನೀವು ಯಾವಾಗ ಮತ್ತು ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಗಳನ್ನು ಬಳಸಬಾರದು ಎಂಬುದಕ್ಕೆ ಇತರ ನಿಯಮಗಳಿವೆ. ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ, ನೋಡಿ Your Guide to Semicolons in JavaScript.

ಗಮನಿಸಿ: ನೀವು ವೇರಿಯೇಬಲ್ ಅನ್ನು ಯಾವುದಕ್ಕೂ ಹೆಸರಿಸಬಹುದು, ಆದರೆ ಕೆಲವು ನಿರ್ಬಂಧಗಳಿವೆ. (see this section about naming rules..) ನಿಮಗೆ ಖಚಿತವಿಲ್ಲದಿದ್ದರೆ, ಅದು ಮಾನ್ಯವಾಗಿದೆಯೇ ಎಂದು ನೋಡಲು check your variable name ನಲ್ಲಿ ಪರಿಶೀಲಿಸಬಹುದು.

ಗಮನಿಸಿ:JavaScript is case sensitive. This means myVariable is not the same as myvariable. If you have problems in your code, check the case!

ಗಮನಿಸಿ:

Var ಮತ್ತು let ನಡುವಿನ ವ್ಯತ್ಯಾಸದ ಕುರಿತು ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ, ನೋಡಿ

The difference between var and let.

ವೇರಿಯೇಬಲ್ ಅನ್ನು declare ಮಾಡಿದ ನಂತರ, ನೀವು ಅದಕ್ಕೆ ಒಂದು ವ್ಯಾಲ್ಯೂ ನೀಡಬಹುದು:

myVariable = ‘John’;

ಅಲ್ಲದೆ, ನೀವು ಈ ಎರಡೂ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಮಾಡಬಹುದು:

let myVariable = ‘John’;

ವೇರಿಯಬಲ್ ಹೆಸರನ್ನು ಕರೆಯುವ ಮೂಲಕ ನೀವು ವ್ಯಾಲ್ಯೂ(value) ವನ್ನು ಹಿಂಪಡೆಯುತ್ತೀರಿ:

myVariable;

ವ್ಯಾಲ್ಯೂ ವನ್ನು ವೇರಿಯೇಬಲ್‌ಗೆ ನಿಯೋಜಿಸಿದ ನಂತರ, ನೀವು ಅದನ್ನು ನಂತರ ಕೋಡ್‌ನಲ್ಲಿ ಬದಲಾಯಿಸಬಹುದು:

let myVariable = ‘John’;

myVariable = ‘Mathew’;

ವಿಭಿನ್ನ ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ಹೊಂದಿರುವ ವ್ಯಾಲ್ಯೂಗಳನ್ನು ವೇರಿಯೇಬಲ್‌ಗಳು

ಹೊಂದಿರಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ::

ಹಾಗಾದರೆ ನಮಗೆ ವೇರಿಯೇಬಲ್‌ಗಳು ಏಕೆ ಬೇಕು? ಪ್ರೋಗ್ರಾಮಿಂಗ್ನಲ್ಲಿ ಆಸಕ್ತಿದಾಯಕ ಏನನ್ನೂ ಮಾಡಲು variables ಅವಶ್ಯಕ. ವ್ಯಾಲ್ಯೂ ಗಳು ಬದಲಾಗದಿದ್ದರೆ, ಶುಭಾಶಯ ಸಂದೇಶವನ್ನು ವೈಯಕ್ತೀಕರಿಸುವ ಅಥವಾ ಇಮೇಜ್ ಗ್ಯಾಲರಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ ಚಿತ್ರವನ್ನು ಬದಲಾಯಿಸುವಂತಹ ಕ್ರಿಯಾತ್ಮಕ ಏನನ್ನೂ ಮಾಡಲು ನಿಮಗೆ ಸಾಧ್ಯವಿಲ್ಲ.(If values couldn’t change, then you couldn’t do anything dynamic, like personalize a greeting message or change an image displayed in an image gallery).

ಕಾಮೆಂಟ್‌ಗಳು (Comments)

ಕಾಮೆಂಟ್‌ಗಳು(comments) ಪಠ್ಯದ ತುಣುಕುಗಳಾಗಿವೆ(snippets), ಅದನ್ನು ಕೋಡ್‌ನೊಂದಿಗೆ ಸೇರಿಸಬಹುದು. ಕಾಮೆಂಟ್ಗಳಾಗಿ ಗುರುತಿಸಲಾದ ಪಠ್ಯವನ್ನು ಬ್ರೌಸರ್ ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ/neglect ಮಾಡುತ್ತದೆ. CSSಲ್ಲಿ ನೀವು ಸಾಧ್ಯವಾದಷ್ಟು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಕಾಮೆಂಟ್ಗಳನ್ನು ಬರೆಯಬಹುದು:

/*

Everything in between is a comment.

*/

ನಿಮ್ಮ ಕಾಮೆಂಟ್ ಯಾವುದೇ ಸಾಲು ವಿರಾಮಗಳನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಅದನ್ನು ಈ ರೀತಿಯ ಎರಡು ಸ್ಲ್ಯಾಶ್‌ಗಳ (Slash)ಹಿಂದೆ ಇರಿಸುವ ಆಯ್ಕೆಯಾಗಿದೆ:

// This is a comment

ಆಪರೇಟರ್ಸ್(operators)

ಆಪರೇಟರ್ಸ್ ಎನ್ನುವುದು ಗಣಿತದ ಸಂಕೇತವಾಗಿದ್ದು ಅದು ಎರಡು ಮೌಲ್ಯಗಳ (ಅಥವಾ variables) ಆಧಾರದ ಮೇಲೆ ಫಲಿತಾಂಶವನ್ನು ನೀಡುತ್ತದೆ. ಕೆಳಗಿನ tableಲ್ಲಿ ನೀವು Javascript console ನಲ್ಲಿ ಪ್ರಯತ್ನಿಸಲು ಕೆಲವು ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಕೆಲವು ಸರಳ ಆಪರೇಟರ್‌ಗಳನ್ನು ನೋಡಬಹುದು.

ಅನ್ವೇಷಿಸಲು ಇನ್ನೂ ಹೆಚ್ಚಿನ ಆಪರೇಟರ್ಸ್ ಇದ್ದಾರೆ, ಆದರೆ ಇದೀಗ ಇದು ಸಾಕು. ಸಂಪೂರ್ಣ ಪಟ್ಟಿಗಾಗಿ Expressions and operators ನೋಡಿ.

ಗಮನಿಸಿ: ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ಬೆರೆಸುವುದು caluclation ಗಳನ್ನು ನಿರ್ವಹಿಸುವಾಗ ಕೆಲವು ವಿಚಿತ್ರ ಫಲಿತಾಂಶಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ನಿಮ್ಮ variableಗಳನ್ನು ನೀವು ಸರಿಯಾಗಿ ಉಲ್ಲೇಖಿಸುತ್ತಿದ್ದೀರಿ ಮತ್ತು ನೀವು ನಿರೀಕ್ಷಿಸಿದ ಫಲಿತಾಂಶಗಳನ್ನು ಪಡೆಯುತ್ತೀರಿ ಎಂದು ಜಾಗರೂಕರಾಗಿರಿ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಕನ್ಸೋಲ್‌ಗೆ ‘35’ + ‘25’ ಅನ್ನು ನಮೂದಿಸಿ. ನೀವು ನಿರೀಕ್ಷಿಸಿದ ಫಲಿತಾಂಶವನ್ನು ನೀವು ಏಕೆ ಪಡೆಯುವುದಿಲ್ಲ? ಉದ್ಧರಣ/quote ಚಿಹ್ನೆ/marksಗಳು ಸಂಖ್ಯೆಗಳನ್ನು stringsಗಳಾಗಿ ಪರಿವರ್ತಿಸುವ ಕಾರಣ, ಆದ್ದರಿಂದ ನೀವು ಸಂಖ್ಯೆಗಳನ್ನು ಸೇರಿಸುವ ಬದಲು stringsಗಳನ್ನು concatinating ಮಾಡುದನ್ನು ಕೊನೆಗೊಳಿಸಿದ್ದೀರಿ. ನೀವು 35 + 25 ಅನ್ನು ನಮೂದಿಸಿದರೆ ನೀವು ಒಟ್ಟು ಎರಡು ಸಂಖ್ಯೆಗಳನ್ನು ಪಡೆಯುತ್ತೀರಿ.

ಷರತ್ತುಗಳು(conditionals)

ಷರತ್ತುಗಳು (conditionals)ಒಂದು ಅಭಿವ್ಯಕ್ತಿ ನಿಜವಾಗಿದೆಯೆ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಪರೀಕ್ಷಿಸಲು ಬಳಸುವ ಕೋಡ್ ರಚನೆಗಳು. ಷರತ್ತುಗಳ ಸಾಮಾನ್ಯ ರೂಪವೆಂದರೆ if … else ಹೇಳಿಕೆ. ಉದಾಹರಣೆಗೆ:

let iceCream = ‘chocolate’;

if(iceCream === ‘chocolate’) {

alert(‘Yay, I love chocolate ice cream!’);

} else {

alert(‘Awwww, but chocolate is my favorite…’);

}

If (…) ಒಳಗೆ ಅಭಿವ್ಯಕ್ತಿ ಪರೀಕ್ಷೆ. ಐಸ್‌ಕ್ರೀಮ್ ಅನ್ನು ವೇರಿಯಬಲ್ ಐಸ್‌ಕ್ರೀಮ್ ಅನ್ನು ಸ್ಟ್ರಿಂಗ್ ಚಾಕೊಲೇಟ್‌ನೊಂದಿಗೆ ಹೋಲಿಸಲು ಇದು ಎರಡು ಸಮಾನವಾಗಿದೆಯೇ ಎಂದು ನೋಡಲು if(…) identity ಆಪರೇಟರ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಈ ಹೋಲಿಕೆ ನಿಜವಾಗಿದ್ದರೆ, ಕೋಡ್‌ನ ಮೊದಲ ಬ್ಲಾಕ್ ಚಲಿಸುತ್ತದೆ. ಹೋಲಿಕೆ ನಿಜವಲ್ಲದಿದ್ದರೆ, ಕೋಡ್‌ನ ಎರಡನೇ ಬ್ಲಾಕ್ else ಬೇರೆ ಹೇಳಿಕೆಯ ನಂತರ — ಬದಲಿಗೆ ಚಲಿಸುತ್ತದೆ.

ಫುನ್ಕ್ಷನ್ಸ್(Functions):

ಫುನ್ಕ್ಷನ್ಸ್(Functions) ನೀವು ಮರುಬಳಕೆ ಮಾಡಲು ಬಯಸುವ ಪ್ಯಾಕೇಜಿಂಗ್ (packaging)ಕ್ರಿಯಾತ್ಮಕತೆಯ ಒಂದು ಮಾರ್ಗವಾಗಿದೆ. It’s possible to define a body of code as a function that executes when you call the function name in your code. ಒಂದೇ ಕೋಡ್ ಅನ್ನು ಪದೇ ಪದೇ ಬರೆಯಲು(reuse) ಇದು ಉತ್ತಮ ಪರ್ಯಾಯವಾಗಿದೆ. Function ಗಳ ಕೆಲವು ಉಪಯೋಗಗಳನ್ನು ನೀವು ಈಗಾಗಲೇ ನೋಡಿದ್ದೀರಿ. ಉದಾಹರಣೆಗೆ:

1. let myVariable = document.querySelector(‘h1’);
2. alert(‘hello!’);

ಈ ಕಾರ್ಯಗಳು, document.querySelector ()ಮತ್ತು alert ಅನ್ನು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ.

ವೇರಿಯೇಬಲ್ ಹೆಸರಿನಂತೆ ಕಾಣುವ ಯಾವುದನ್ನಾದರೂ ನೀವು ನೋಡಿದರೆ, ಆದರೆ ಅದನ್ನು ಆವರಣದಿಂದ/parantheses ಅನುಸರಿಸಲಾಗುತ್ತದೆ — () — ಇದು ಒಂದು ಕಾರ್ಯವಾಗಿದೆ. functions ಆಗಾಗ್ಗೆ arguments ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ: ಅವರು ತಮ್ಮ ಕೆಲಸವನ್ನು ಮಾಡಬೇಕಾದ ಡೇಟಾದ ಬಿಟ್‌ಗಳು. ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು arguments ಇದ್ದರೆ ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಲಾಗಿರುವ ಆವರಣ ಆವರಣದೊಳಗೆ arguments ಹೋಗುತ್ತವೆ.

ಉದಾಹರಣೆಗೆ, alert() ಕಾರ್ಯವು ಬ್ರೌಸರ್ ವಿಂಡೋದೊಳಗೆ ಪಾಪ್-ಅಪ್ ಬಾಕ್ಸ್ ಗೋಚರಿಸುವಂತೆ ಮಾಡುತ್ತದೆ, ಆದರೆ ಯಾವ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕು ಎಂದು ಕಾರ್ಯಕ್ಕೆ ಹೇಳಲು ನಾವು ಅದನ್ನು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ನೀಡಬೇಕಾಗಿದೆ.

You can also define your own functions. . ಮುಂದಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಸರಳ ಕಾರ್ಯವನ್ನು ರಚಿಸುತ್ತೇವೆ ಎರಡು ಸಂಖ್ಯೆಗಳನ್ನು argument ಗಳಾಗಿ ತೆಗೆದುಕೊಂಡು ಅವುಗಳನ್ನು ಗುಣಿಸುತ್ತದೆ:

function multiply(num1,num2) {

let result = num1 * num2;

return result;

}

ಇದನ್ನು consoleನಲ್ಲಿ run ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ; ನಂತರ ಹಲವಾರು arguments ಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ. ಉದಾಹರಣೆಗೆ:

multiply(4, 7);

multiply(20, 20);

multiply(0.5, 3);

ಗಮನಿಸಿ: return ಸ್ಟೇಟ್‌ಮೆಂಟ್ ಬ್ರೌಸರ್‌ಗೆ ಫಂಕ್ಷನ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಫಂಕ್ಷನ್‌ನಿಂದ ಹಿಂತಿರುಗಿಸಲು ಹೇಳುತ್ತದೆ ಆದ್ದರಿಂದ ಅದು ಬಳಸಲು ಲಭ್ಯವಿದೆ. ಇದು ಅವಶ್ಯಕವಾಗಿದೆ ಏಕೆಂದರೆ functionಗಳ ಒಳಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ variableಗಳು ಆ functionಗಳ ಒಳಗೆ ಮಾತ್ರ ಲಭ್ಯವಿರುತ್ತವೆ. ಇದನ್ನು ವೇರಿಯಬಲ್ scoping. ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. (ವೇರಿಯಬಲ್ scoping. ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ಓದಿ.)

ಇವೆಂಟ್ಸ್ Events:

Real interactivity on a website requires events handlers. . ಇವು ಕೋಡ್ structureಗಳಾಗಿವೆ, ಅದು ಬ್ರೌಸರ್‌ನಲ್ಲಿ eventನ್ನು ಆಲಿಸುತ್ತದೆ/listning ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಕೋಡ್ ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ. ಕ್ಲಿಕ್ ಈವೆಂಟ್/click event ನ handling ಅತ್ಯಂತ clear ಉದಾಹರಣೆಯಾಗಿದೆ, ನಿಮ್ಮ Mouse ಒಂದಿಗೆ ನೀವು ಏನನ್ನಾದರೂ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅದನ್ನು ಬ್ರೌಸರ್‌ನಿಂದ demonstrate ಮಾಡಲಾಗುತ್ತದೆ. ಇದನ್ನು ಪ್ರದರ್ಶಿಸಲು, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ನಿಮ್ಮ ಕನ್ಸೋಲ್‌ಗೆ ನಮೂದಿಸಿ, ನಂತರ ಪ್ರಸ್ತುತ ವೆಬ್‌ಪುಟದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ:

document.querySelector(‘html’).onclick = function()

{

alert(‘Ouch! Stop poking me!’); }

here are many ways to attach an event handler to an elemen. ಇಲ್ಲಿ ನಾವು ಅಂಶವನ್ನು ಆರಿಸುತ್ತೇವೆ, ಅದರ onclick ಹ್ಯಾಂಡ್ಲರ್ ಆಸ್ತಿಯನ್ನು ಅನಾಮಧೇಯ (nameless) ಕಾರ್ಯಕ್ಕೆ ಸಮನಾಗಿ ಹೊಂದಿಸುತ್ತೇವೆ, ಇದರಲ್ಲಿ ನಾವು click event ಅನ್ನು ಚಲಾಯಿಸಲು ಬಯಸುವ ಕೋಡ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ.

document.querySelector(‘html’).onclick = function() {};

is equivalent to

let myHTML = document.querySelector(‘html’);

myHTML.onclick = function() {};

ನಮ್ಮ ಉದಾಹರಣೆ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸೂಪರ್ಚಾರ್ಜ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಗಳ ಈ ವಿಮರ್ಶೆಯು ಪೂರ್ಣಗೊಂಡಿದೆ (ಮೇಲೆ), ನಮ್ಮ ಉದಾಹರಣೆ ಸೈಟ್‌ಗೆ ಕೆಲವು ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸೋಣ.

ಇಮೇಜ್ ಚೇಂಜರ್(image changer) ಅನ್ನು ಸೇರಿಸಲಾಗುತ್ತಿದೆ

ಈ ವಿಭಾಗದಲ್ಲಿ, ಎರಡು ಚಿತ್ರಗಳಲ್ಲಿ ಒಂದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಪರ್ಯಾಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು DOM API ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನೀವು ಕಲಿಯುವಿರಿ. ಬಳಕೆದಾರರು ಪ್ರದರ್ಶಿಸಿದ ಚಿತ್ರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಂತೆ ಈ ಬದಲಾವಣೆ ಸಂಭವಿಸುತ್ತದೆ.

• ನಿಮ್ಮ ಉದಾಹರಣೆ ಸೈಟ್‌ನಲ್ಲಿ ನೀವು ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಲು ಬಯಸುವ ಚಿತ್ರವನ್ನು/image ಆರಿಸಿ. ideally, ಚಿತ್ರವು ನೀವು ಈ ಹಿಂದೆ ಸೇರಿಸಿದ ಚಿತ್ರದಂತೆಯೇ ಇರುತ್ತದೆ ಅಥವಾ ಸಾಧ್ಯವಾದಷ್ಟು ಹತ್ತಿರದಲ್ಲಿರುತ್ತದೆ.
• ಈ ಚಿತ್ರವನ್ನು/image ನಿಮ್ಮ ಚಿತ್ರಗಳ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ save ಮಾಡಿ.
• ಚಿತ್ರಕ್ಕೆ/image ಮರುಹೆಸರಿಸಿ/rename it firefox2.png.
• ನಿಮ್ಮ main.js ಫೈಲ್‌ಗೆ ಕೆಳಗಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸೇರಿಸಿ. (ನಿಮ್ಮ ಹಲೋ ವರ್ಲ್ಡ್ ಅನ್ನು ಸಹ ಅಳಿಸಿ! ಹಿಂದಿನ ವ್ಯಾಯಾಮದಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್.)

let myImage = document.querySelector(‘img’);

myImage.onclick = function() {

let mySrc = myImage.getAttribute(‘src’);

if(mySrc === ‘images/firefox-icon.png’) {

myImage.setAttribute(‘src’,’images/firefox2.png’);

} else {

myImage.setAttribute(‘src’,’images/firefox-icon.png’);

}

}

• ಎಲ್ಲಾ ಫೈಲ್‌ಗಳನ್ನು save ಮಾಡಿ ಮತ್ತು ಬ್ರೌಸರ್‌ನಲ್ಲಿ index.html ಅನ್ನು ಲೋಡ್ ಮಾಡಿ. ಈಗ ನೀವು ಚಿತ್ರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಅದು ಇನ್ನೊಂದಕ್ಕೆ ಬದಲಾಗಬೇಕು.

ಇದು ಸಂಭವಿಸಿತು. myImage ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ನಿಮ್ಮ elementನ ಉಲ್ಲೇಖವನ್ನು ನೀವು ಸಂಗ್ರಹಿಸಿದ್ದೀರಿ. ಮುಂದೆ, ನೀವು ಈ ವೇರಿಯೇಬಲ್ನ onclick ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್(event handler) propperty ಯಾವುದೇ ಹೆಸರಿಲ್ಲದ ಕಾರ್ಯಕ್ಕೆ (“nameless” ಕಾರ್ಯ) ಸಮಾನಗೊಳಿಸಿದ್ದೀರಿ. ಆದ್ದರಿಂದ ಪ್ರತಿ ಬಾರಿ ಈ ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ:

• ಕೋಡ್ ಚಿತ್ರದ src ಗುಣಲಕ್ಷಣದ ಮೌಲ್ಯವನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ.
• src valueವು ಮೂಲ ಚಿತ್ರದ ಹಾದಿಗೆ ಸಮನಾಗಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಕೋಡ್ ಷರತ್ತುಬದ್ಧವಾಗಿದೆ/conditional:
• ಅದು ಇದ್ದರೆ, ಕೋಡ್ src ಮೌಲ್ಯವನ್ನು ಎರಡನೇ ಚಿತ್ರದ ಹಾದಿಗೆ ಬದಲಾಯಿಸುತ್ತದೆ, ಇತರ ಚಿತ್ರವನ್ನು ಅಂಶದೊಳಗೆ ಲೋಡ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುತ್ತದೆ.
• ಅದು ಇಲ್ಲದಿದ್ದರೆ (ಇದರರ್ಥ ಅದು ಈಗಾಗಲೇ ಬದಲಾಗಿರಬೇಕು), src ಮೌಲ್ಯವು ಮೂಲ ಚಿತ್ರದ ಹಾದಿಗೆ, ಮೂಲ ಸ್ಥಿತಿಗೆ ಮರಳುತ್ತದೆ.

Adding a personalized welcome message /ವೈಯಕ್ತಿಕ ಸ್ವಾಗತ ಸಂದೇಶವನ್ನು ಸೇರಿಸಲಾಗುತ್ತಿದೆ

ಮುಂದೆ, ಬಳಕೆದಾರರು/users ಮೊದಲು ಸೈಟ್‌ಗೆ ಭೇಟಿ ನೀಡಿದಾಗ ಪುಟದ ಶೀರ್ಷಿಕೆಯನ್ನು ವೈಯಕ್ತಿಕಗೊಳಿಸಿದ ಸ್ವಾಗತ ಸಂದೇಶಕ್ಕೆ/welcome message ಬದಲಾಯಿಸೋಣ. ಈ ಸ್ವಾಗತ ಸಂದೇಶವು/welcome message ಮುಂದುವರಿಯುತ್ತದೆ. ಬಳಕೆದಾರರು/users ಸೈಟ್ ಅನ್ನು ಬಿಟ್ಟು ನಂತರ ಹಿಂತಿರುಗಬೇಕಾದರೆ, ನಾವು ವೆಬ್ storage API ಬಳಸಿ ಸಂದೇಶವನ್ನು ಉಳಿಸುತ್ತೇವೆ. ಬಳಕೆದಾರರನ್ನು/users ಬದಲಾಯಿಸುವ ಆಯ್ಕೆಯನ್ನು ಸಹ ನಾವು ಸೇರಿಸುತ್ತೇವೆ ಮತ್ತು ಆದ್ದರಿಂದ ಸ್ವಾಗತ ಸಂದೇಶ.

• Index.html ನಲ್ಲಿ,

Change user

• Main.js ನಲ್ಲಿ, ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಫೈಲ್‌ನ ಕೆಳಭಾಗದಲ್ಲಿ ಇರಿಸಿ, ಅದನ್ನು ಬರೆದಂತೆಯೇ. ಇದು ಹೊಸ ಬಟನ್ ಮತ್ತು ಶೀರ್ಷಿಕೆಗೆ ಉಲ್ಲೇಖಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಪ್ರತಿಯೊಂದು ಒಳಗಿನ variablre ಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ:

let myButton = document.querySelector(‘button’);

let myHeading = document.querySelector(‘h1’);

ವೈಯಕ್ತಿಕ ಶುಭಾಶಯವನ್ನು/personalized message ಹೊಂದಿಸಲು ಕೆಳಗಿನ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಿ. ಇದು ಇನ್ನೂ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ, ಆದರೆ ಇದು ಶೀಘ್ರದಲ್ಲೇ ಬದಲಾಗುತ್ತದೆ.

function setUserName() {

let myName = prompt(‘Please enter your name.’);

localStorage.setItem(‘name’, myName);

myHeading.textContent = ‘Mozilla is cool, ‘ + myName;

}

SetUserName () function prompt() fuction ನ್ನು ಒಳಗೊಂಡಿದೆ, ಇದು alert () ಗೆ ಹೋಲುವ dailog boxನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಈ prompt () ಕಾರ್ಯವು alert () ಗಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಮಾಡುತ್ತದೆ, ಬಳಕೆದಾರರನ್ನು/users dataವನ್ನು ನಮೂದಿಸಲು ಕೇಳುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರು/users ಸರಿ ಕ್ಲಿಕ್ ಮಾಡಿದ ನಂತರ ಅದನ್ನು ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಹೆಸರನ್ನು ನಮೂದಿಸಲು ನಾವು ಬಳಕೆದಾರರನ್ನು /users ಕೇಳುತ್ತಿದ್ದೇವೆ. ಮುಂದೆ, ಕೋಡ್ API ಲೋಕಲ್ ಸ್ಟೋರೇಜ್‌ನಲ್ಲಿ call ಮಾಡುತ್ತದೆ, ಇದು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಮತ್ತು ನಂತರ ಅದನ್ನು ಹಿಂಪಡೆಯಲು/call back ಮಾಡಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ‘name’ ಎಂಬ ಡೇಟಾ ಐಟಂ ಅನ್ನು ರಚಿಸಲು ಮತ್ತು ಸಂಗ್ರಹಿಸಲು ನಾವು ಲೋಕಲ್ ಸ್ಟೋರೇಜ್‌ನ setIem () ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತೇವೆ, ಅದರ valueವನ್ನು myName variable ಗೆ ಹೊಂದಿಸಿ, ಅದು ಹೆಸರಿನ ಬಳಕೆದಾರರ ನಮೂದನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಅಂತಿಮವಾಗಿ, ನಾವು ಶೀರ್ಷಿಕೆಯ/heading ನ textcontentನ್ನು string ಗೆ ಹೊಂದಿಸುತ್ತೇವೆ ಮತ್ತು ಬಳಕೆದಾರರ /users ಹೊಸದಾಗಿ ಸಂಗ್ರಹಿಸಲಾದ ಹೆಸರನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ.

• Add if … else block (ಕೆಳಗೆ). ನಾವು ಈ initialization ಕೋಡ್ ಅನ್ನು ಕರೆಯಬಹುದು, ಏಕೆಂದರೆ ಅದು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಮೊದಲು ಲೋಡ್ ಮಾಡುವಾಗ ರಚಿಸುತ್ತದೆ

if(!localStorage.getItem(‘name’)) {

setUserName();

} else {

let storedName = localStorage.getItem(‘name’);

myHeading.textContent = ‘Mozilla is cool, ‘ + storedName;

This first line of this block uses the negation operator (logical NOT, represented by the !) to check whether the name data exists.ಇಲ್ಲದಿದ್ದರೆ, ಅದನ್ನು ರಚಿಸಲು setUserName () function ಚಲಿಸುತ್ತದೆ. ಅದು ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೆ ನಾವು ಸಂಗ್ರಹಿಸಿದ ಹೆಸರನ್ನು getItem () ಬಳಸಿ ಹಿಂಪಡೆಯುತ್ತೇವೆ ಮತ್ತು textContent ಸ್ಟ್ರಿಂಗ್‌ಗೆ ಹೊಂದಿಸುತ್ತೇವೆ, ಜೊತೆಗೆ ಬಳಕೆದಾರರ/users ಹೆಸರನ್ನು ನಾವು setUserName( ).

• ಈ onclick event handler ಅನ್ನು (ಕೆಳಗೆ) ಬಟನ್ ಮೇಲೆ ಇರಿಸಿ. ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, setUserName () ರನ್ ಆಗುತ್ತದೆ. ಗುಂಡಿಯ/button ನ್ನು ಒತ್ತುವ ಮೂಲಕ ಬಳಕೆದಾರರಿ/users ಗೆ ಬೇರೆ ಹೆಸರನ್ನು ನಮೂದಿಸಲು ಇದು ಅನುಮತಿಸುತ್ತದೆ.

myButton.onclick = function() {

setUserName();

}

A username of Null?

ನೀವು ಉದಾಹರಣೆಯನ್ನು run ಮಾಡಿದಾಗ ಮತ್ತು ನಿಮ್ಮ ಬಳಕೆದಾರರ/users ಹೆಸರನ್ನು ನಮೂದಿಸಲು ನಿಮ್ಮನ್ನು ಕೇಳುವ ಸಂವಾದ ಪೆಟ್ಟಿಗೆಯನ್ನು(dailog box) ಪಡೆದಾಗ, ರದ್ದುಮಾಡು(cancel) ಬಟನ್ ಒತ್ತಿ ಪ್ರಯತ್ನಿಸಿ. Mozilla is cool, null ಎಂದು ಓದುವ ಶೀರ್ಷಿಕೆಯೊಂದಿಗೆ ನೀವು ಕೊನೆಗೊಳ್ಳಬೇಕು. ಇದು ಸಂಭವಿಸುತ್ತದೆ/happens ಏಕೆಂದರೆ ನೀವು prompt ಅನ್ನು ರದ್ದುಗೊಳಿಸಿದಾಗ — ಮೌಲ್ಯವನ್ನು null ಎಂದು ಹೊಂದಿಸಲಾಗಿದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ Null ಒಂದು ವಿಶೇಷ ಮೌಲ್ಯವಾಗಿದೆ, ಅದು ಮೌಲ್ಯದ ಅನುಪಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸುತ್ತದೆ.

ಅಲ್ಲದೆ, ಹೆಸರನ್ನು ನಮೂದಿಸದೆ ಸರಿ ಕ್ಲಿಕ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ. ಸಾಕಷ್ಟು ಸ್ಪಷ್ಟವಾದ ಕಾರಣಗಳಿಗಾಗಿ, Mozilla is cool ಎಂದು ಓದುವ ಶೀರ್ಷಿಕೆಯೊಂದಿಗೆ ನೀವು ಕೊನೆಗೊಳ್ಳಬೇಕು.

ಈ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು, ಬಳಕೆದಾರರು ಖಾಲಿ ಹೆಸರನ್ನು ನಮೂದಿಸಿಲ್ಲ ಎಂದು ನೀವು ಪರಿಶೀಲಿಸಬಹುದು. ನಿಮ್ಮ setUserName () ಕಾರ್ಯವನ್ನು ಇದಕ್ಕೆ ನವೀಕರಿಸಿ:

function setUserName() {

let myName = prompt(‘Please enter your name.’);

if(!myName) { setUserName(); }

else { localStorage.setItem(‘name’, myName); myHeading.innerHTML = ‘Mozilla is cool, ‘ + myName; } }

In human language, this means: If myName has no value, run setUserName() again from the start. . ಅದು ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದ್ದರೆ (ಮೇಲಿನ ಹೇಳಿಕೆ ನಿಜವಲ್ಲದಿದ್ದರೆ), ನಂತರ valueವನ್ನು ಸ್ಥಳೀಯ ಸ್ಟೋರೇಜ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ ಮತ್ತು ಅದನ್ನು ಶೀರ್ಷಿಕೆಯ ಪಠ್ಯವಾಗಿ ಹೊಂದಿಸಿ.

ತೀರ್ಮಾನ

ಈ ಲೇಖನದ ಎಲ್ಲಾ ಸೂಚನೆಗಳನ್ನು ನೀವು ಅನುಸರಿಸಿದ್ದರೆ, ಕೆಳಗಿನ ಚಿತ್ರದಂತೆ ಕಾಣುವ ಪುಟದೊಂದಿಗೆ ನೀವು ಕೊನೆಗೊಳ್ಳಬೇಕು. You can also view our version.

ನೀವು ಸಿಲುಕಿಕೊಂಡರೆ, ನಿಮ್ಮ ಕೆಲಸವನ್ನು ನಮ್ಮ ಸಿದ್ಧಪಡಿಸಿದ ಉದಾಹರಣೆ ಕೋಡ್‌ನೊಂದಿಗೆ ಗಿಟ್‌ಹಬ್‌ನಲ್ಲಿ (Github)ಹೋಲಿಸಬಹುದು.

ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಮೇಲ್ಮೈಯನ್ನು ಗೀಚಿದ್ದೇವೆ. ನೀವು ಆಟವಾಡುವುದನ್ನು ಆನಂದಿಸುತ್ತಿದ್ದರೆ ಮತ್ತು ಮುಂದೆ ಹೋಗಲು ಬಯಸಿದರೆ, ಕೆಳಗೆ ಪಟ್ಟಿ ಮಾಡಲಾದ ಸಂಪನ್ಮೂಲಗಳ ಲಾಭವನ್ನು ಪಡೆಯಿರಿ.

Dive into JavaScript in much more detail.

ಡೆವಲಪರ್‌ಗಳಿಗೆ ಇದು ಅತ್ಯುತ್ತಮ ಸಂಪನ್ಮೂಲವಾಗಿದೆ! ಸ್ವಯಂಚಾಲಿತ ಮೌಲ್ಯಮಾಪನದಿಂದ ಮಾರ್ಗದರ್ಶಿಸಲ್ಪಟ್ಟ ಸಣ್ಣ ಪಾಠಗಳು ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಪರೀಕ್ಷೆಗಳೊಂದಿಗೆ ಸಂವಾದಾತ್ಮಕ ಪರಿಸರದಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಲಿಯಿರಿ. ಮೊದಲ 40 ಪಾಠಗಳು ಉಚಿತ. ಒಂದು ಸಣ್ಣ ಪಾವತಿಗಾಗಿ ಸಂಪೂರ್ಣ ಕೋರ್ಸ್ ಲಭ್ಯವಿದೆ.

Article By:Anushree K

MicroDegree is an edtech platform for learning Emerging Technologies such as Full-Stack Development, Data Science, Machine Learning using vernacular at an affordable price. For more details reach out to hello@microdegree.work

🚀 For Course Certification : https://bit.ly/3gt2nY7

👍 Youtube:: https://bit.ly/3ajK4Cz

Website : https://microdegree.work

LinkedIn : https://www.linkedin.com/company/micr…

Facebook : https://www.facebook.com/microdegree

Instagram : https://www.instagram.com/micro.degree