JavaScript: INTRODUCTION:

मित्रों इस lesson मे आप JavaScript प्रोग्रामिंग लैंग्वेज और उनसे से जुड़े कुछ examples से अवगत होन्गे। जैसा की हम HTML lessons में बता चुके हैं की आप हमारे वेबसाइट पर online code editor की सहायता से कोड को edit कर सकते हैं ठीक उसी तरह JavaScript से जुड़े lessons में भी कर सकते हैं।
Lessons में आपको बहुत आसान examples मिलेंगे ताकी समझने में कठिनाई ना हो। तत्पस्चात ऐडवांस्ड लेवल की तरफ बढेंगे।

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.
</button>
<p id="demo"></p> 

कोशिश करें

कुछ जरुरी बातें:

JavaScript का सम्बन्ध Java लैंग्वेज से बिल्कुल भी नही है दोनो पूरी तरह से अलग है।
JS, Brendan Eich के द्वारा 1995 में invent किया गया और 1997 में ECMA स्टैंडर्ड बन गया।
JS client साइड प्रोग्रामिंग लैंग्वेज है यानी ये आपके browser में execute होता है। लेकिन किसी और लैंग्वेज की बात करें जैसे की php तो ये सर्वर साइड लैंग्वेज है यानी ये सर्वर में processed होने के बाद जो परिणाम आता है वो browser में दिखाई देता है।
Lesson:
JavaScript HTML कंटेंट को बदल सकता है.
getElementById() एक method है जिसके द्वारा element के कंटेंट को बदला जा जाता है.
Example:

document.getElementById("demo").innerHTML = "Hello JavaScript";

कोशिश करें

JavaScript में दोनों तरह के quotations double quote और single quote (“ और ‘) प्रयोग कर सकते हैं.

Example

document.getElementById('demo').innerHTML = 'Hello JavaScript';

कोशिश करें

JavaScript से हम HTML एलिमेंट के attributes को भी बदल सकते हैं:

Example:
नीचे दिए गए उदहारण में JS की मदद से एलिमेंट का src attribute बदल रहा है जिससे picture में टेक्स्ट लिखकर आ रहा है.

यहाँ  src attributes के value को बदलने से लोगो बदल जाता है लेकिन हमें लग रहा है की लोगो पर लिख रहें हैं और मिटा रहे हैं.

<button onclick="document.getElementById('myImage').src='https://www.originclasses.com/wp-content/uploads/2018/02/20180222_140541.png'">
नाम और टैग लाइन लिखें
</button>
<img id="myImage" src="https://www.originclasses.com/wp-content/uploads/2018/02/20180222_140805.png" style="width:100px">
<button onclick="document.getElementById('myImage').src='https://www.originclasses.com/wp-content/uploads/2018/02/20180222_140805.png'">
नाम और टैग लाइन मिटायें
</button>

कोशिश करें

यहाँ पे हम लोगो में टेक्स्ट नहीं लिख रहे हैं बल्कि src attribute की मदद से JavaScript द्वारा इमेज को ही बदल रहे हैं.

JavaScrpit की मदद से font-size को भी बदल सकते हैं:

उदहारण:

document.getElementById("demo").style.fontSize = "35px";

कोशिश करें

इस उदहारण में HTML एलिमेंट के attribute को बदल कर style css style को बदला जा रहा है:

JavaScript की मदद से एलिमेंट को गायब कर सकते हैं और गायब एलिमेंट दिखा भी सकते हैं. इस काम को करने के लिए हम डिस्प्ले स्टाइल को बदलकर कर सकते हैं.
उदाहरण:

document.getElementById('demo').style.display = 'none';

कोशिश करें

Example:

document.getElementById('demo').style.display = 'block';

कोशिश करें

आज के lesson में आपने JavaScript के बारे में जाना और प्रैक्टिस भी किया. इसके आगे हमलोग दुसरे पोस्ट में प्रैक्टिस करेंगे. आपलोग टुटोरिअल के बारे में अपनी राय जरुर दें. राय देने से खामियां पता चलती है और उसे सुधारने का मौका भी मिलता है.

आप इस वेबसाइट पर उपलब्ध किसी भी पोस्ट को शेयर कर सकते हैं. Origin Classes पर आने के लिए धन्यवाद आपका दिन शुभ हो.

-प्रदीप कर्ण

 

Leave a Reply

Your email address will not be published. Required fields are marked *