यहाँ हम JavaScript को सरल हिंदी में समझाने की कोसिस कर रहें हैं, तो चलिए सुरु करते हैं टॉपिक JavaScript in Hindi – जावास्क्रिप्ट हिंदी में सीखें :-
JavaScript आज के समय में सबसे लोकप्रिय programming language है। वास्तव में यह एक वेब programming language है।
JavaScript सीखना बहुत ही आसान है क्यों की यह HTML के साथ integrated होती है। जिसको HTML थोड़ी- बहुत भी आती है, वह आसानी से JavaScript सीख सकता है। यह एक cross – platform programming language है। यह एक client side scripting language है, जिसका मतलब है की JavaScript में लिखा गया code , client के browser पर रन होता है।
JavaScript के source code को process करने के लिए server side की कोई जरुरत नहीं होती। उदाहरण के लिए, यदि कोई वेब फॉर्म JavaScript में बनाया गया है तथा client side पर उसे भरा जा रहा है तो अगर उसमे कोई field खली छोड़ दिया जाये तो वही client side के browser पर ही एक error message आ जाता है।
JavaScript का HTML के साथ प्रयोग-
JavaScript , HTML के content को चेंज कर सकती है। कैसे ? चलिए देखते है।
JavaScript ,के बहुत से methods में से एक है getElementById(). चलिए देखते है यह किस तरह से काम करता है। निम्न उदाहरण HTML का एक element खोजता है जिसकी id है – “test” इसके बाद यह इस “test” id से सम्बंधित HTML content को बदल कर “This is JavaScript using getElementById().” कर देता है।
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Use of JavaScript with HTML?</h2>
<p id="test">How JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("test").innerHTML = "This is JavaScript using getElementById().!"'>Click Me!</button>
</body>
</html>
Output-
”Click Me!” बटन पर click करने के बाद निम्न output आता है –
JavaScript , HTML के attributes को भी बदल सकती है, चलिए देखते है कैसे?
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>How JavaScript can change HTML attributes?</h2>
<p>JavaScript can modify the value of HTML attributes easily.</p>
<p>In this example you can see that JavaScript can change the value of the src (source) attribute of an image(bulb).</p>
<button onclick="document.getElementById('myImage').src='red_square.jpg'">Red Square </button>
<img id="myImage" src="red_square.jpg" style="width:100px">
<button onclick="document.getElementById('myImage').src='green_square.jpg'">Green Square</button>
</body>
</html>
इस JavaScript program को रन करने के लिए आपको दो images की जरुरत पड़ेगी, आपको बस इन images को उसी folder में paste कर देना है जिस फोल्डर में आप अपने इस प्रोग्राम को रखोगे।
उक्त program को run करने पर निम्न output प्राप्त होता है-
Green बटन पर click करने के बाद निम्न output आता है –
आप रेड स्क्वायर और ग्रीन स्क्वायर के जगह कुछ और इमेज का भी उपयोग कर सकते हैं
JavaScript का C SS के साथ प्रयोग –
JavaScript HTML Styles अर्थार्थ CSS को भी change कर सकती है। इसे आप निम्न उदाहरण से समझ सकते हैं।
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>How JavaScript can change CSS? </h2>
<p id="demo">Using JavaScript we can change HTML Style easily </p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click</button>
</body>
</html>
उक्त program को run करने पर निम्न output प्राप्त होता है-
Click बटन पर click करने के बाद निम्न output आता है –
JavaScript से कैसे HTML element को हाईड कर सकते हैं ?चलिए देखते हैं –
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>See the Magic of JavaScript.</h2>
<p id="demo">How JavaScript can hide HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
उक्त program को run करने पर निम्न output प्राप्त होता है-
“Click Me!” बटन पर click करने के बाद निम्न output आता है –
JavaScript से कैसे HTML element को show कर सकते हैं ? चलिए देखते हैं –
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>See the magic of JavaScript</h2>
<p>How JavaScript can show an HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
उक्त program को run करने पर निम्न output प्राप्त होता है-
“Click Me!” बटन पर click करने के बाद निम्न output आता है –
इस पोस्ट के पहले मैंने और भी कई पोस्ट लिखी हैं, जैसे की HTML , Microsoft Excel , Gmail , JavaScript आदि, आप अपने इच्छा के अनुसार इन्हे देख सकते है।