JavaScript Ka Taaruf, ye ek client side programming language hai, aur server par bhi kam karti hai.
JavaScript aur Java dono mukamil mukhtalif languages hain, un ke concept aur design alag alag hain.
JavaScript ko Brendan Eich ne 1995 main ejaad kiya tha aur ye 1997 main ECMA Standard bani.
ECMA-262 Standard ka official naam hai.
JavaScript dunya ki buhut bari mashahoor programming language hai. Ye sari maaloomat hum ne W3Schools ki website se li hai.
JavaScript web ke liye programming language hai.
JavaScript seekhne main asaan hai.
Ye tutorial aap ko JavaScript bunyad se lekar maharat ki level tak sikhaega.
Humko JavaScript kyoon seekhni chahye?
JavaScript un 3 languages main se ek hai jo har web developer ko zaroor seekhni chahiyen, agar aap is ko ache se seekhna chahte hain to aap ko JavaScript Introduction mukamal parhna hoga:
1. HTML jo ke web page ke mawaad ko zahir karti hai
2. CSS jo web pages ki banawat ki wazahat karti hai aur make up ka kaam karti hai
3. JavaScript jo ke web pages ke salook ke program main madad deti hai, jesa ke buttons rakh ke un se kaam lena wagherah.
Aam pooche jaane waale sawalat
- Main JavaScript ko kese istaimaal kar sakta hun?
- Main kahan se JavaScript ko download karoon?
- Kiya JavaScript Free hai?
Aap ko JavaScript ko istaimaal karne ke liye kaheen se isko hasil karne ki zaroorat nahi paregi.
JavaScript pehle se hi aap ke computer, tablet ya smart-phone ke browser main chal rahi hoti hai.
JavaScript ko istaimaal karna sab ke liye free hai.
JavaScript HTML ke mawaad ko tabdeel kar sakti hai
JavaScript HTML ke kafi tareeqon main se ek getElementById() hai.
Neeche di gae misaal, "talash karegi" ek HTML ka ansar (id="demo" ke zariye se), aur ansar ke mawaad ko tabdeel kar dega (innerHTML) se "Hello JavaScript" likh dega.
Is misaal main hum ne ek sada sa HTML file banaya hai. Us main hum ne <h2>heading main "What Can JavaScript Do?" print karwaya hai.
Us ke baad hum ne <p> tag ke andar demo naam ki id banai hai, aur kuch mawaad likha hai, "JavaScript can change HTML content".
Us ke baad hum ne ek button banaya hai usko onclick event main hum ne hukum diya hai ke jab button click ho to document ke andar jao wahan pe jo <p> paragraph ke andar attribute id demo naam ki banae hai usko pakro aur us main pehle text likha hua tha us ki jaga pe innerHTML ke zariye se Hello JavaScript! likh do.
Is ke liye aap neeche di gae programming ko dekhen aur is program ko banane ki koshish karen jo main is JavaScript Introduction main de raha hun.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>JavaScript HTML Attribute ke Values ko tabdeel kar sakti hai:-
Is misaal main JavaScript <img> tag ke src (source) attribute ki value ko tabdeel karega, is ke liye aap neeche di gae tasveer ka mutaliya karen.
Oopar wali tasveer main hum ne sab se pehle <h2> heading main "What Can JavaScript Do?" print karwaya hai.
Uske baad hum ne ek <p> paragraph tag main likha hai "JavaScript can change HTML attribute values."
Phir hum ne ek aur paragraph likha hai us main hum ne likha hai "In this case JavaScript changes the value of the src (source) attribute of an image".
Uske baad hum ne ek button banaya hai jiska naam hume ne "Turn on the light" rakha hai jo baaen taraf dikh raha hai, us button pe onclick event main bullb on wali picture call karwai hai.
Matlab ke jab user is button pe click karega to bulb on wali picture zahir ho jaege.
Us ke baad hum ne <img> tag ke zariye se bulb off wali picture call karwa di hai, jo aap ko dono buttons ke beech main dikhae de rahi hai.
Aakhir main hum ne ek aur button banaya hai jiska naam hum ne "Turn off the light" rakha hai jo ke daaen taraf dikh raha hai, us button pe onclick event main bulb off wali picture call karwai hai.
Matlab ke jab user is button pe click karega to bulb off wali picture zahir ho jaege.
Ab aap is misaal ko type karke is ka rasult dekhen aur practice karen to aap ko samajh main ajaega coding neeche de rahe hain.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
JavaScript HTML ke Styles (CSS) ko tabdeel kar sakti hai.
HTML ansar ke andaaz ko tabdeel karna, HTML ki wasf ko tabdeel karne ka ek qisam hai. Us ke liye aap neeche di gae misaal ko samjhen.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html> Oopar wali misaal main hum ne pehle to ek <h2> main "What Can JavaScript Do?" print karwaya hai.
Us ke baad hum ne ek <p> paragraph tag banaya hai, us ke andar hum ne uska attribute banaya hai id="demo" ke naam se, us paragraph tag ke andar hum ne "JavaScript can hide HTML elements" message print karwaya hai.
Us ke baad hum ne ek <button> banaya hai us main onclick event main hum ne "demo" id ko target kiya hai ke jab button click ho to demo id ko dhoondo aur usko style do jis main uska display none kardo matlab ke usko ghaaib kardo.
Ab hum jese hi button pe click karenge to paragraph tag main likha sara mawaad ghaaib ho jaega.
JavaScript Chupe hue HTML Elements ko zahir kar sakta hai
Chupe hue HTML elements ko hum zahir kawa sakte hain, us ke liye hum ko display style ko istaimaal karna hoga. Ab aap neeche di gae misaal ko samjhen.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden 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> Oopar wali missal main he sab se pehle ek <h2> heading tag ke andar "What Can JavaScript Do?" show karwaya hai.
Us ke baad hum ne ek <p> paragraph tag ke andar ek message "JavaScript can show hidden HTML elements." print karwaya hai.
us ke baad hum ne ek aur <p> paragraph Hello JavaScript! print karwaya hai, magar uske liye hum ne ek demo naam ki id banai hai jis main us id ko style main uska display none rakh diya hai, taake koi paragraph zahir na ho jab hamara document pehli bar run hoga.
Us ke baad hum ne ek <button> banaya hai us ke onclick event main hum ne usi demo wali id ko target kiya hai, is baar hum ne is id ko style diya hai ke jab button click ho to us paragraph ka display block ban jae jo pehle none rakha gaya tha.
Ab jese button click hoga to block zahir hoga aur hamara message Hello JavaScript! zahir ho jaega.
To ye choti si kuch misaalen main ne aap ko samjhane ki koshish ki hai, aap agar in pe practice karte hain tab hi jaa ke aap ko ye samajh aenge warna koi faida nahi hoga.
Agar aap ne abhi tak HTML ka course nahi kiya to hamari is series main se HTML ka Taaruf parhen.