JavaScript ट्यूटोरियल
जावास्क्रिप्ट के साथ शुरू हो रही है

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions
खोज…


टिप्पणियों

जावास्क्रिप्ट ( जावा से भ्रमित नहीं होना) क्लाइंट-साइड के साथ-साथ सर्वर-साइड स्क्रिप्टिंग के लिए उपयोग की जाने वाली एक गतिशील, कमजोर-टाइप भाषा है।

जावास्क्रिप्ट एक केस-संवेदी भाषा है। इसका मतलब यह है कि भाषा बड़े अक्षरों को उनके लोअरकेस समकक्षों से अलग मानती है। जावास्क्रिप्ट में कीवर्ड सभी लोअरकेस हैं।

जावास्क्रिप्ट ईसीएमएस्क्रिप्ट मानक का सामान्य रूप से संदर्भित कार्यान्वयन है।

इस टैग के विषय अक्सर ब्राउज़र के भीतर जावास्क्रिप्ट के उपयोग को संदर्भित करते हैं, जब तक कि अन्यथा कहा न जाए। अकेले जावास्क्रिप्ट फ़ाइलें सीधे ब्राउज़र द्वारा नहीं चलाई जा सकतीं; उन्हें HTML दस्तावेज़ में एम्बेड करना आवश्यक है। यदि आपके पास कुछ जावास्क्रिप्ट कोड हैं जिन्हें आप आज़माना चाहते हैं, तो आप इसे इस तरह से कुछ प्लेसहोल्डर सामग्री में एम्बेड कर सकते हैं, और परिणाम को example.html रूप में सहेज सकते हैं: 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

संस्करण

संस्करण रिलीज़ की तारीख
1 1997/06/01
2 1998/06/01
3 1998/12/01
E4X 2004-06-01
5 2009-12-01
5.1 2011-06-01
6 2015/06/01
7 2016/06/14
8 2017/06/27

DOM API का उपयोग करना

DOM का उद्देश्य D ocument O bject M odel है। यह XML और HTML जैसे संरचित दस्तावेजों का एक वस्तु-उन्मुख प्रतिनिधित्व है।

एक Element के textContent संपत्ति की स्थापना एक वेब पेज पर पाठ का उत्पादन करने का एक तरीका है।

उदाहरण के लिए, निम्न HTML टैग पर विचार करें: 

<p id="paragraph"></p>

अपनी textContent संपत्ति को बदलने के लिए, हम निम्नलिखित जावास्क्रिप्ट चला सकते हैं: 

document.getElementById("paragraph").textContent = "Hello, World";

यह उस तत्व का चयन करेगा जो आईडी paragraph और "हैलो, वर्ल्ड" के लिए अपनी पाठ सामग्री सेट करता है: 

<p id="paragraph">Hello, World</p>

(यह डेमो भी देखें)

आप प्रोग्रामेटिक रूप से एक नया HTML एलिमेंट बनाने के लिए जावास्क्रिप्ट का भी उपयोग कर सकते हैं। उदाहरण के लिए, निम्नलिखित शरीर के साथ एक HTML दस्तावेज़ पर विचार करें: 

<body>
   <h1>Adding an element</h1>
</body>

हमारे जावास्क्रिप्ट में, हम एक नया <p> टैग textContent हैं, जिसमें एक textContent संपत्ति है और इसे html बॉडी के अंत में जोड़ें: 

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM

यह आपके HTML शरीर को निम्न में बदल देगा: 

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>

ध्यान दें कि जावास्क्रिप्ट का उपयोग करते हुए DOM में तत्वों को हेरफेर करने के लिए, दस्तावेज़ में संबंधित तत्व बनाए जाने के बाद जावास्क्रिप्ट कोड चलना चाहिए। यह आपके अन्य <body> सामग्री के बाद जावास्क्रिप्ट <script> टैग लगाकर प्राप्त किया जा सकता है। वैकल्पिक रूप से, आप उदाहरण के लिए सुनने के लिए एक इवेंट श्रोता का भी उपयोग कर सकते हैं। window का onload ईवेंट , आपके कोड को उस ईवेंट श्रोता में जोड़ने से आपके कोड को तब तक चलने में देरी होगी जब तक कि आपके पेज पर पूरी सामग्री लोड नहीं हो जाती।

एक तीसरा तरीका यह सुनिश्चित करने के लिए कि आपके सभी DOM लोड किए गए हैं, 0 मिनट के टाइमआउट फ़ंक्शन के साथ DOM हेरफेर कोड को लपेटना है । इस तरह, यह जावास्क्रिप्ट कोड निष्पादन कतार के अंत में फिर से कतारबद्ध हो जाता है, जो ब्राउज़र को कुछ गैर-जावास्क्रिप्ट चीजें करने का मौका देता है जो जावास्क्रिप्ट के इस नए टुकड़े में शामिल होने से पहले खत्म होने का इंतजार कर रहे हैं।

कंसोल.लॉग () का उपयोग करना

परिचय

सभी आधुनिक वेब ब्राउज़र, NodeJs और साथ ही लगभग हर दूसरे जावास्क्रिप्ट वातावरण लॉगिंग विधियों के एक सूट का उपयोग करके कंसोल को संदेश लिखने का समर्थन करते हैं। इन विधियों में से सबसे सामान्य console.log() । console.log() ।

ब्राउज़र वातावरण में, console.log() फ़ंक्शन मुख्य रूप से डीबगिंग उद्देश्यों के लिए उपयोग किया जाता है।

शुरू करना

खोलें , आपके ब्राउज़र में JavaScript कंसोल निम्नलिखित टाइप करें, और प्रेस दर्ज करें: 

console.log("Hello, World!");

यह कंसोल को निम्न लॉग करेगा:

Google Chrome में कंसोल लॉग आउटपुट

ऊपर दिए गए उदाहरण में, console.log() फंक्शन प्रिंट्स Hello, World! कंसोल और undefined रिटर्न (कंसोल आउटपुट विंडो में ऊपर दिखाया गया है)। ऐसा इसलिए है क्योंकि console.log() का कोई स्पष्ट वापसी मूल्य नहीं है ।

लॉगिंग वैरिएबल

console.log() का उपयोग किसी भी प्रकार के चर को लॉग करने के लिए किया जा सकता है; न केवल तार। उस चर में पास करें जिसे आप कंसोल में प्रदर्शित करना चाहते हैं, उदाहरण के लिए: 

var foo = "bar";
console.log(foo);

यह कंसोल को निम्न लॉग करेगा:

Comfort.log () का उपयोग चर के साथ किया जा सकता है

यदि आप दो या अधिक मानों को लॉग इन करना चाहते हैं, तो बस उन्हें अल्पविराम से अलग करें। स्थान परिवर्तन के दौरान प्रत्येक तर्क के बीच स्वतः जोड़ दिया जाएगा: 

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar);
यह कंसोल को निम्न लॉग करेगा:

कंसोल कॉनैट

प्लेसहोल्डर

आप प्लेसहोल्डर्स के साथ संयोजन में console.log() उपयोग कर सकते हैं: 

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);

यह कंसोल को निम्न लॉग करेगा:

यहाँ छवि विवरण दर्ज करें

वस्तुओं में प्रवेश करना

नीचे हम एक वस्तु को लॉग करने का परिणाम देखते हैं। यह अक्सर एपीआई कॉल से JSON प्रतिक्रियाओं को लॉग करने के लिए उपयोगी होता है। 

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
});

यह कंसोल को निम्न लॉग करेगा:

कंसोल में ऑब्जेक्ट लॉग किया

HTML तत्वों को लॉग करना

आपके पास DOM के भीतर मौजूद किसी भी तत्व को लॉग करने की क्षमता है। इस मामले में हम शरीर तत्व को लॉग करते हैं: 

console.log(document.body);

यह कंसोल को निम्न लॉग करेगा:

यहाँ छवि विवरण दर्ज करें

नोट समाप्त करें

कंसोल की क्षमताओं के बारे में अधिक जानकारी के लिए, कंसोल विषय देखें।

Window.alert () का उपयोग करना

alert विधि स्क्रीन पर एक दृश्य चेतावनी बॉक्स प्रदर्शित करती है। सादे पाठ में उपयोगकर्ता को चेतावनी विधि पैरामीटर प्रदर्शित किया जाता है: 

window.alert(message);

क्योंकि window वैश्विक वस्तु है, आप कॉल भी कर सकते हैं निम्नलिखित शॉर्टहैंड का उपयोग करें: 

alert(message);

तो window.alert() क्या करता है? ठीक है, चलो निम्नलिखित उदाहरण लेते हैं: 

alert('hello, world');

क्रोम में, जो इस तरह एक पॉप-अप का उत्पादन करेगा: चेतावनी

टिप्पणियाँ

alert विधि तकनीकी रूप से की संपत्ति है window वस्तु है, लेकिन बाद से सभी window गुण स्वचालित रूप से वैश्विक चर हैं, हम उपयोग कर सकते हैं alert एक वैश्विक चर के रूप में के बजाय की एक संपत्ति के रूप में window - यानी कि सीधे उपयोग कर सकते हैं alert() के बजाय window.alert() ।

console.log का उपयोग करने के विपरीत, alert एक मोडल प्रॉम्प्ट के रूप में कार्य करता है जिसका अर्थ है कि कॉल कॉलिंग alert तब तक रोक देगा जब तक कि शीघ्र उत्तर न दिया जाए। परंपरागत रूप से इसका मतलब है कि अलर्ट खारिज होने तक कोई अन्य जावास्क्रिप्ट कोड निष्पादित नहीं होगा : 

alert('Pause!');
console.log('Alert was dismissed');

हालाँकि विनिर्देश वास्तव में अन्य इवेंट-ट्रिगर कोड को निष्पादित करने के लिए जारी रखने की अनुमति देता है, भले ही एक मोडल संवाद अभी भी दिखाया जा रहा हो। इस तरह के कार्यान्वयन में, अन्य कोड को चलाना संभव है जबकि मोडल संवाद दिखाया जा रहा है।

alert तरीकों के उपयोग के बारे में अधिक जानकारी मोडल प्रॉम्प्ट विषय में पाई जा सकती है।

अलर्ट का उपयोग आमतौर पर अन्य तरीकों के पक्ष में हतोत्साहित किया जाता है जो उपयोगकर्ताओं को पृष्ठ के साथ बातचीत करने से रोकते नहीं हैं - ताकि बेहतर उपयोगकर्ता अनुभव बनाया जा सके। फिर भी, यह डिबगिंग के लिए उपयोगी हो सकता है।

Chrome 46.0 से शुरू होकर, window.alert() एक <iframe> अंदर अवरुद्ध हो जाता है, जब तक कि उसके सैंडबॉक्स विशेषता के पास मूल्य-मोडल न हो ।

Window.prompt () का उपयोग करना

prompt() विधि का उपयोग करके उपयोगकर्ता से इनपुट प्राप्त करने का एक आसान तरीका है।

वाक्य - विन्यास 

prompt(text, [default]);
  • टेक्स्ट : टेक्स्ट को प्रॉम्प्ट बॉक्स में प्रदर्शित किया जाता है।
  • डिफ़ॉल्ट : इनपुट फ़ील्ड के लिए एक डिफ़ॉल्ट मान (वैकल्पिक)।

उदाहरण 

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

शीघ्र बॉक्स

यदि उपयोगकर्ता OK बटन पर क्लिक करता है, तो इनपुट मान वापस आ जाता है। अन्यथा, विधि null ।

prompt का वापसी मूल्य हमेशा एक स्ट्रिंग होता है, जब तक कि उपयोगकर्ता रद्द नहीं करता है, उस स्थिति में यह null । सफारी एक अपवाद है कि जब उपयोगकर्ता रद्द करता है, तो फ़ंक्शन एक खाली स्ट्रिंग देता है। वहां से, आप रिटर्न मान को दूसरे प्रकार में बदल सकते हैं, जैसे कि पूर्णांक ।

टिप्पणियाँ

  • प्रांप्ट बॉक्स प्रदर्शित होने के दौरान, उपयोगकर्ता को पृष्ठ के अन्य भागों तक पहुंचने से रोका जाता है, क्योंकि संवाद बॉक्स मोडल विंडो होते हैं।
  • Chrome 46.0 से शुरू होने पर यह विधि <iframe> अंदर अवरुद्ध हो जाती है, जब तक कि उसके सैंडबॉक्स विशेषता में मान अनुमति-मोडल न हो।

DOM API का उपयोग करना (चित्रमय पाठ के साथ: कैनवस, एसवीजी, या छवि फ़ाइल)

कैनवास तत्वों का उपयोग करना

HTML रास्टर-आधारित छवियों के निर्माण के लिए कैनवास तत्व प्रदान करता है।

छवि पिक्सेल जानकारी रखने के लिए पहले एक कैनवास का निर्माण करें। 

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;

फिर कैनवास के लिए एक संदर्भ का चयन करें, इस मामले में दो आयामी: 

var ctx = canvas.getContext('2d');

फिर पाठ से संबंधित गुण सेट करें: 

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);

फिर प्रभाव डालने के लिए पृष्ठ में canvas तत्व डालें: 

document.body.appendChild(canvas);

एसवीजी का उपयोग करना

एसवीजी स्केलेबल वेक्टर-आधारित ग्राफिक्स के निर्माण के लिए है और इसका उपयोग एचटीएमएल के भीतर किया जा सकता है।

पहले आयामों के साथ एक एसवीजी तत्व कंटेनर बनाएं: 

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;

फिर वांछित स्थिति और फ़ॉन्ट विशेषताओं के साथ एक text तत्व बनाएँ: 

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';

फिर text तत्व में प्रदर्शित करने के लिए वास्तविक पाठ जोड़ें: 

text.textContent = 'Hello world!';

अंत में हमारे svg कंटेनर में text एलिमेंट जोड़ें और HTML डॉक्यूमेंट में svg कंटेनर एलिमेंट जोड़ें: 

svg.appendChild(text);
document.body.appendChild(svg);

छवि फ़ाइल

यदि आपके पास पहले से ही वांछित पाठ वाली एक छवि फ़ाइल है और इसे सर्वर पर रखा गया है, तो आप छवि का URL जोड़ सकते हैं और फिर चित्र को दस्तावेज़ में निम्नानुसार जोड़ सकते हैं: 

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);

Window.confirm () का उपयोग करना

window.confirm() विधि एक वैकल्पिक संदेश और दो बटन, ओके और रद्द के साथ एक मोडल संवाद प्रदर्शित करती है।

अब, निम्नलिखित उदाहरण लेते हैं: 

result = window.confirm(message);

यहां, संदेश संवाद में प्रदर्शित होने वाला वैकल्पिक स्ट्रिंग है और परिणाम एक बूलियन मूल्य है जो यह दर्शाता है कि ठीक है या रद्द किया गया था (सही अर्थ है ठीक है)।

window.confirm() का उपयोग आमतौर पर एक कंट्रोल पैनल में कुछ हटाने जैसे खतरनाक ऑपरेशन करने से पहले उपयोगकर्ता की पुष्टि के लिए किया जाता है: 

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}

उस कोड का आउटपुट ब्राउज़र में इस तरह दिखेगा:

पुष्टिकरण संवाद बहुत सरल है: संदेश, ठीक है, रद्द करें

यदि आपको इसे बाद में उपयोग करने की आवश्यकता है, तो आप उपयोगकर्ता के इंटरैक्शन के परिणाम को एक चर में स्टोर कर सकते हैं: 

var deleteConfirm = window.confirm("Are you sure you want to delete this?");

टिप्पणियाँ

  • तर्क वैकल्पिक है और विनिर्देश द्वारा आवश्यक नहीं है।
  • डायलॉग बॉक्स मोडल विंडो हैं - वे उपयोगकर्ता को प्रोग्राम के बाकी इंटरफ़ेस तक पहुंचने से रोकते हैं जब तक संवाद बॉक्स बंद नहीं हो जाता। इस कारण से, आपको किसी भी फ़ंक्शन का उपयोग नहीं करना चाहिए जो एक संवाद बॉक्स (या मोडल विंडो) बनाता है। और इसकी परवाह किए बिना, पुष्टि के लिए संवाद बॉक्स का उपयोग करने से बचने के बहुत अच्छे कारण हैं।
  • Chrome 46.0 से शुरू होने पर यह विधि <iframe> अंदर अवरुद्ध हो जाती है, जब तक कि उसके सैंडबॉक्स विशेषता में मान अनुमति-मोडल न हो।
  • यह आमतौर पर विंडो नोटेशन के साथ पुष्टिकरण विधि को हटाने के लिए स्वीकार किया जाता है क्योंकि विंडो ऑब्जेक्ट हमेशा निहित होता है। हालाँकि, विंडो ऑब्जेक्ट को स्पष्ट रूप से परिभाषित करने की अनुशंसा की जाती है क्योंकि समान रूप से नामित विधियों के साथ निम्न गुंजाइश स्तर पर कार्यान्वयन के कारण अपेक्षित व्यवहार बदल सकता है।


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow