Google Play badge

जाभास्क्रिप्ट


जाभास्क्रिप्ट: वेब विकासको लागि रमाइलो उपकरण

जाभास्क्रिप्ट एउटा विशेष भाषा हो जसले वेब पृष्ठहरूलाई रमाइलो र अन्तरक्रियात्मक बनाउन मद्दत गर्छ। धेरै मानिसहरूले यसलाई रोमाञ्चक वेबसाइटहरू सिर्जना गर्न प्रयोग गर्छन्। वेब विकासमा, जाभास्क्रिप्ट एउटा जादुई उपकरण जस्तै हो जसले वेबसाइटहरूलाई जीवन्त बनाउँछ। यसले पाठ परिवर्तन गर्न, तस्बिरहरू सार्न र तपाईंसँग कुरा गर्न पनि सक्छ!

१. जाभास्क्रिप्ट भनेको के हो?

जाभास्क्रिप्ट एउटा कम्प्युटर भाषा हो। यसले कम्प्युटरलाई वेब पृष्ठमा सरल र रमाइलो काम कसरी गर्ने भनेर बताउँछ। जब तपाईं कुनै बटनमा क्लिक गर्नुहुन्छ वा वेबसाइटमा एनिमेसन देख्नुहुन्छ, जाभास्क्रिप्ट पर्दा पछाडि काम गरिरहेको हुन्छ। यो वेब विकासको मुख्य उपकरणहरू मध्ये एक हो।

कल्पना गर्नुहोस् तपाईंसँग एउटा खेलौना रोबोट छ। तपाईंले रोबोटलाई निर्देशन दिएर के गर्ने भनेर बताउनुहुन्छ। जाभास्क्रिप्टले कम्प्युटरलाई त्यसरी नै निर्देशन दिन्छ।

२. हामी वेबसाइटहरूमा जाभास्क्रिप्ट किन प्रयोग गर्छौं?

वेबसाइटहरू पाठ, छविहरू र रङहरू मिलेर बनेका हुन्छन्। तर जब तिनीहरूले तपाईंलाई प्रतिक्रिया दिन्छन् तब तिनीहरू अझ रमाइलो हुन सक्छन्। जाभास्क्रिप्टले वेबसाइटहरूलाई तपाईंको कुरा सुन्न र अब के गर्ने भनेर निर्णय गर्न मद्दत गर्छ। उदाहरणका लागि, तपाईंले थिच्दा यसले बटनको रङ परिवर्तन गर्छ, वा तपाईंले लिङ्कमा क्लिक गर्दा यसले सन्देश देखाउन सक्छ।

यसले वेबसाइटहरूलाई केवल सुन्दर तस्बिरहरू मात्र नभई जीवन्त ठाउँहरू बनाउँछ जहाँ तपाईं अन्तर्क्रिया गर्न सक्नुहुन्छ। प्रत्येक पटक जब तपाईं वेबसाइटमा खेल खेल्नुहुन्छ वा अन्तरक्रियात्मक कथा अन्वेषण गर्नुहुन्छ, जाभास्क्रिप्टले यसलाई सम्भव बनाउँदछ।

३. जाभास्क्रिप्टमा आधारभूत विचारहरू

जाभास्क्रिप्टमा केही सरल विचारहरू छन् जुन बुझ्न सजिलो छ। यी विचारहरूलाई निर्माण ब्लकको रूपमा सोच्नुहोस्। जब तपाईं तिनीहरूलाई एकसाथ राख्नुहुन्छ, तपाईं वेबमा अद्भुत चीजहरू सिर्जना गर्न सक्नुहुन्छ। यहाँ केही आधारभूत विचारहरू छन्:

यी प्रत्येक विचारहरूले तपाईंलाई अझ जटिल र अन्तरक्रियात्मक वेबपेजहरू निर्माण गर्न मद्दत गर्दछ।

४. चर र डेटा प्रकारहरू

एउटा चर भनेको नाम भएको विशेष बक्स जस्तै हो। तपाईंले बक्स भित्र विभिन्न प्रकारका चीजहरू राख्न सक्नुहुन्छ। कहिलेकाहीँ तपाईंले संख्याहरू भित्र राख्न सक्नुहुन्छ, र कहिलेकाहीँ शब्दहरू। जाभास्क्रिप्टमा, तपाईंले let वा var जस्ता शब्दहरू प्रयोग गरेर चर सिर्जना गर्न सक्नुहुन्छ।

उदाहरणका लागि, यदि तपाईं आफ्नो नाम भण्डारण गर्न चाहनुहुन्छ भने, तपाईं यो कोड लेख्न सक्नुहुन्छ:

 मेरो नाम = "स्याम" दिनुहोस्;
  

यो कोडले "myName" नामक बक्स बनाउँछ र त्यस भित्र "Sam" शब्द राख्छ।

तपाईंले भण्डारण गर्न सक्ने विभिन्न प्रकारका डेटाहरू छन्। केही यस प्रकार छन्:

चरहरूले वेबसाइट चलिरहेको बेला परिवर्तन हुन सक्ने जानकारी राख्न मद्दत गर्छन्।

५. कार्यहरू: कार्यहरू गर्ने साना मेसिनहरू

जाभास्क्रिप्टमा एउटा फंक्शन एउटा सानो मेसिन जस्तै हो जसले एउटा काम गर्छ। तपाईंले मेसिनलाई एउटा नाम दिनुहुन्छ र कुन काम पूरा गर्ने भनेर बताउनुहुन्छ। त्यसपछि, जब तपाईंलाई त्यो काम गर्न आवश्यक हुन्छ, तपाईंले फंक्शनलाई कल गर्नुहुन्छ।

उदाहरणका लागि, यदि तपाईं नमस्ते भन्न चाहनुहुन्छ भने, तपाईं यसरी एउटा प्रकार्य लेख्न सक्नुहुन्छ:

 प्रकार्य sayHello() {
  alert("नमस्ते साथी!");
}
  

जब तपाईंले sayHello() प्रकार्यमा कल गर्नुहुन्छ, एउटा सानो सन्देश देखा पर्दछ जसमा "हेलो, साथी!" लेखिएको हुन्छ। यो एउटा खेलौना जस्तै हो जसले बटन थिच्दा छोटो गीत बजाउँछ।

६. सर्तहरू: निर्णय लिने

कहिलेकाहीँ, कम्प्युटरले अब के गर्ने भनेर छनौट गर्नुपर्ने हुन्छ। यहाँ सशर्त कथनहरू आउँछन्। तिनीहरूले कम्प्युटरलाई केहि सत्य छ कि छैन भनेर जाँच गरेर निर्णय गर्न मद्दत गर्छन्।

यसलाई यसरी सोच्नुहोस्: यदि पानी परिरहेको छ भने, तपाईंले छाता लिने निर्णय गर्न सक्नुहुन्छ। यदि पानी परिरहेको छैन भने, तपाईंलाई छाता चाहिँदैन। जाभास्क्रिप्टमा, तपाईं यसरी साधारण सर्त लेख्न सक्नुहुन्छ:

 यदि (तापमान > ३०) {
  alert("बाहिर गर्मी छ!");
} अरु {
  alert("धेरै तातो छैन!");
}
  

यो कोडले तापक्रम ३० भन्दा बढी छ कि छैन भनेर जाँच गर्छ। यदि छ भने, यसले तपाईंलाई यो तातो छ भनी बताउँछ। अन्यथा, यसले यो धेरै तातो छैन भनी बताउँछ।

७. लूपहरू: दोहोरिने कार्यहरू

लूपहरूले तपाईंलाई निर्देशनहरूको सेट धेरै पटक दोहोर्याउन दिन्छ। तिनीहरू रमाइलो दौडमा घुम्नु जस्तै हुन्। एउटै कोड बारम्बार लेख्नुको सट्टा, लूपले तपाईंको लागि यो गर्छ।

उदाहरणका लागि, यदि तपाईं पाँच पटक "मलाई कोडिङ मन पर्छ!" भन्न चाहनुहुन्छ भने, तपाईं लूप प्रयोग गर्न सक्नुहुन्छ:

 को लागि (मलाई = ०; i < ५; i++ दिनुहोस्) {
  console.log("मलाई कोडिङ मन पर्छ!");
}
  

यो कोडले कम्प्युटरलाई वाक्य पाँच पटक प्रिन्ट गर्न भन्छ। यो एक-एक गरी आफ्ना खेलौनाहरू गन्नु जस्तै हो।

८. घटनाहरू: सुन्ने र प्रतिक्रिया दिने

जाभास्क्रिप्टमा, घटनाहरू भनेको कम्प्युटरलाई केही भएको बताउने संकेतहरू हुन्। यी घटनाहरू माउस क्लिक, कुञ्जी थिच्ने, वा विन्डोको आकारमा परिवर्तन पनि हुन सक्छन्। कम्प्युटरले यी घटनाहरू सुन्छ र त्यसपछि प्रतिक्रिया दिन्छ।

उदाहरणका लागि, जब तपाईं वेबपेजमा बटन क्लिक गर्नुहुन्छ, एउटा घटना हुन्छ। जाभास्क्रिप्टले यो क्लिक पत्ता लगाउन सक्छ र त्यसपछि प्रतिक्रिया दिनको लागि एउटा प्रकार्य चलाउन सक्छ। यहाँ एउटा साधारण उदाहरण छ:

 बटन = document.getElementById("मेरो बटन");
बटन.एडइभेन्टलिस्टनर("क्लिक", फंक्शन() {
  alert("तपाईंले बटन क्लिक गर्नुभयो!");
});
  

यो कोडले "myButton" ID भएको बटन फेला पार्छ र क्लिकको लागि सुन्छ। बटन क्लिक गर्दा, यसले "तपाईंले बटन क्लिक गर्नुभयो!" भन्ने सन्देश देखाउँछ।

९. कागजात वस्तु मोडेल (DOM)

कागजात वस्तु मोडेल, वा DOM , वेब पृष्ठको सबै भागहरू हेर्ने र अन्तर्क्रिया गर्ने तरिका हो। DOM लाई रूखको रूपमा सोच्नुहोस्। रूखमा धेरै शाखाहरू हुन्छन्, र प्रत्येक शाखाले पृष्ठमा एउटा तत्वलाई प्रतिनिधित्व गर्दछ, जस्तै अनुच्छेद, छवि, वा बटन।

जाभास्क्रिप्टले यी शाखाहरू परिवर्तन गर्न सक्छ। यसले नयाँ वस्तुहरू थप्न, पुरानाहरू हटाउन वा परिवर्तन गर्न सक्छ। उदाहरणका लागि, तपाईंले बटन क्लिक गर्दा यसले अनुच्छेद भित्रको पाठ परिवर्तन गर्न सक्छ।

यो महत्त्वपूर्ण छ किनकि यसले अन्तरक्रियात्मक वेबसाइटहरू सिर्जना गर्न मद्दत गर्दछ। DOM प्रयोग गरेर, तपाईंको वेबपेज पुन: लोड नगरीकनै गतिशील रूपमा परिवर्तन हुन सक्छ।

१०. वेब पृष्ठमा सरल जाभास्क्रिप्ट उदाहरण

जाभास्क्रिप्टको कार्यगत उदाहरण हेरौं। कल्पना गर्नुहोस् तपाईंसँग एउटा बटन भएको वेबपेज छ। जब तपाईं बटन क्लिक गर्नुहुन्छ, तपाईं यसलाई नमस्ते भन्न चाहनुहुन्छ। तपाईं कोड यसरी लेख्न सक्नुहुन्छ:

 <!DOCTYPE html>
<html>>
<हेड>>
  <title>सरल जाभास्क्रिप्ट उदाहरण</title>
</head>
<शरीर>>
  <button id="greetButton">मलाई क्लिक गर्नुहोस्!</button>
  <स्क्रिप्ट>
    प्रकार्य स्वागत प्रयोगकर्ता() {
      alert("नमस्ते साथी!");
    }
    बटन दिनुहोस् = document.getElementById("greetButton");
    button.addEventListener("क्लिक गर्नुहोस्", greetUser);
  </स्क्रिप्ट>
</शरीर>
</html>
  

यो कोडले वेबपेजमा एउटा बटन सिर्जना गर्छ। बटन क्लिक गर्दा, greetUser() फंक्शन चल्छ, र "हेलो, साथी!" सन्देश सहितको पपअप देखा पर्दछ।

११. सरल गणनाको लागि जाभास्क्रिप्ट प्रयोग गर्दै

जाभास्क्रिप्टले साधारण गणित पनि गर्न सक्छ। यसले संख्याहरू जोड्न, घटाउन, गुणन गर्न र भाग गर्न सक्छ। यो सुविधा साना अनुप्रयोगहरू वा खेलहरू बनाउनको लागि धेरै उपयोगी छ।

उदाहरणका लागि, यदि तपाईं दुई संख्याहरू थप्न चाहनुहुन्छ भने, तपाईं लेख्न सक्नुहुन्छ:

 मानौं संख्या १ = ५;
मानौं संख्या २ = ३;
मानौं योगफल = संख्या १ + संख्या २;
alert("योगफल हो " +योगफल);
  

यो कोडले दुई संख्याहरू लिन्छ, 53 , तिनीहरूलाई एकसाथ जोड्छ, र त्यसपछि "योगफल 8 हो" भन्ने सन्देश देखाउँछ।

१२. दैनिक वेब विकासमा जाभास्क्रिप्ट

जब तपाईं बटन, एनिमेसन वा खेलहरू भएको वेबसाइटमा जानुहुन्छ, जाभास्क्रिप्ट सम्भवतः काम गरिरहेको हुन्छ। यसले वेबसाइटहरूलाई गतिशील र रमाइलो बनाउँछ। उदाहरणका लागि, जब तपाईं अनलाइन किनमेल गर्नुहुन्छ वा भिडियोहरू हेर्नुहुन्छ, जाभास्क्रिप्टले पर्दा पछाडि महत्त्वपूर्ण भूमिका खेल्छ।

यसले पृष्ठका भागहरू छिटो लोड गर्न, त्रुटिहरू जाँच गर्न, र पृष्ठ पुन: लोड नगरी तपाईंलाई नयाँ जानकारी देखाउन मद्दत गर्दछ। YouTube, Facebook, र अन्य धेरै वेबसाइटहरूले तपाईंको लागि सहज अनुभव सिर्जना गर्न JavaScript प्रयोग गर्छन्।

१३. जाभास्क्रिप्ट सिक्नु भनेको LEGO मार्फत निर्माण गर्नु जस्तै हो

जाभास्क्रिप्ट सिक्नु भनेको रंगीन LEGO ब्लकहरूसँग खेल्नु जस्तै हो। प्रत्येक ब्लक कोडको सानो टुक्रा हो। जब तपाईं धेरै ब्लकहरू संयोजन गर्नुहुन्छ, तपाईं केहि अद्भुत बनाउन सक्नुहुन्छ। सुरुमा, तपाईंले साधारण घर बनाउन केही ब्लकहरू मात्र प्रयोग गर्न सक्नुहुन्छ। पछि, तपाईंले धेरै ब्लकहरू प्रयोग गर्न र ठूलो महल वा अन्तरिक्ष यान पनि बनाउन सिक्नुहुन्छ!

जाभास्क्रिप्ट बुझ्ने सबैभन्दा राम्रो तरिका भनेको साना टुक्राहरू बनाएर तिनीहरूलाई एकसाथ राखेर पूरा वेबपेज सिर्जना गर्नु हो। तपाईंले सिक्नुहुने प्रत्येक नयाँ विचार तपाईंको वेबसाइट परियोजनाहरूको लागि अर्को LEGO ब्लक हो।

१४. महत्त्वपूर्ण जाभास्क्रिप्ट उपकरणहरू र पुस्तकालयहरू

धेरै सहयोगीहरूले जाभास्क्रिप्टलाई अझ शक्तिशाली बनाउँछन्। यी सहयोगीहरूलाई पुस्तकालय र फ्रेमवर्क भनिन्छ। तिनीहरू विशेष आकारमा आउने LEGO ब्लकहरूको अतिरिक्त सेटहरू जस्तै हुन्। केही लोकप्रिय जाभास्क्रिप्ट सहयोगीहरू हुन्:

यी उपकरणहरूले धेरै विकासकर्ताहरूलाई सबै कोड आफैं लेख्नुको सट्टा अद्भुत वेबसाइटहरू सिर्जना गर्न मद्दत गर्छन्। तिनीहरूले देखाउँछन् कि रमाइलोको लागि बनाइएको भाषा पनि वास्तविक संसारमा एक शक्तिशाली उपकरण हुन सक्छ।

१५. जाभास्क्रिप्ट र वेब ब्राउजर

वेब ब्राउजर भनेको तपाईंले वेबसाइटहरू भ्रमण गर्न प्रयोग गर्ने प्रोग्राम हो। लोकप्रिय ब्राउजरहरू क्रोम, फायरफक्स, सफारी र एज हुन्। जाभास्क्रिप्ट यी ब्राउजरहरू भित्र काम गर्दछ। जब तपाईं आफ्नो वेबपेजमा जाभास्क्रिप्ट कोड लेख्नुहुन्छ, ब्राउजरले यसलाई पढ्छ र तपाईंको पृष्ठलाई अन्तरक्रियात्मक बनाउँछ।

ब्राउजरलाई स्टेजको रूपमा र जाभास्क्रिप्टलाई अभिनेताको रूपमा कल्पना गर्नुहोस्। अभिनेताले स्क्रिप्ट (तपाईंको कोड) पछ्याउँछ र कार्यक्रम प्रस्तुत गर्दछ। जाभास्क्रिप्ट बिना, स्टेज खाली हुने थियो, र कार्यक्रम त्यति आकर्षक हुने थिएन।

१६. चरण-दर-चरण: ब्राउजरले जाभास्क्रिप्ट कसरी प्रयोग गर्छ

जब तपाईं वेबपेज खोल्नुहुन्छ, ब्राउजरले निम्न कार्य गर्दछ:

यो प्रक्रियाले जाभास्क्रिप्टले वेबपेजको रूप र अनुभव कसरी पूरा गर्छ भनेर देखाउँछ।

१७. जाभास्क्रिप्टको वास्तविक-विश्व अनुप्रयोगहरू

हाम्रो दैनिक जीवनमा जाभास्क्रिप्ट धेरै रमाइलो र उपयोगी तरिकाले प्रयोग गरिन्छ। यहाँ केही उदाहरणहरू छन्:

यी उदाहरणहरू हेर्दा थाहा हुन्छ कि जाभास्क्रिप्ट केवल स्क्रिनमा कोड मात्र होइन। यो एउटा पुल हो जसले प्रविधिलाई हाम्रा दैनिक गतिविधिहरूसँग जोड्छ।

१८. साधारण परियोजनाहरूसँग जाभास्क्रिप्ट अन्वेषण गर्दै

तपाईं सानै भए पनि, साधारण परियोजनाहरूको बारेमा सोचेर जाभास्क्रिप्ट सिक्न सुरु गर्न सक्नुहुन्छ। तपाईंले बटन थिच्दा पृष्ठभूमिको रङ परिवर्तन हुने वेबपेजबाट सुरु गर्न सक्नुहुन्छ। वा तपाईंले यसको विभिन्न भागहरूमा क्लिक गर्दा परिवर्तन हुने सानो कथा सिर्जना गर्न सक्नुहुन्छ।

हरेक परियोजना, चाहे त्यो जतिसुकै सानो किन नहोस्, वेबसाइटले कसरी काम गर्छ भन्ने बारेमा तपाईंलाई धेरै कुरा सिकाउँछ। प्रत्येक चरणले तपाईंको आत्मविश्वास बढाउँछ, जस्तै पूरा शब्दहरू लेख्नु अघि वर्णमाला सिक्नु।

१९. जाभास्क्रिप्ट र रचनात्मकता

जाभास्क्रिप्ट एउटा यस्तो उपकरण हो जसले तपाईंलाई रचनात्मक हुन अनुमति दिन्छ। यो केवल सिक्न वा गम्भीर वेबसाइटहरू बनाउनको लागि मात्र प्रयोग गरिँदैन; यो तपाईंको रचनात्मकता व्यक्त गर्ने तरिका पनि हो। तपाईं जाभास्क्रिप्टको साथ खेलहरू, अन्तरक्रियात्मक कथाहरू, र एनिमेसनहरू पनि डिजाइन गर्न सक्नुहुन्छ।

जब तपाईं जाभास्क्रिप्टसँग काम गर्नुहुन्छ, तपाईं आफूलाई कोडले चित्र बनाउने कलाकारको रूपमा सोच्न सक्नुहुन्छ। प्रत्येक प्रकार्य र प्रत्येक चरले तपाईंलाई वेबमा सुन्दर तस्वीर सिर्जना गर्न मद्दत गर्दछ।

याद राख्नुहोस्, जाभास्क्रिप्टमा रचनात्मकता भनेको ठूलो सेतो कागजमा चम्किलो क्रेयोनले चित्र कोर्नु जस्तै हो। यसमा कुनै सीमा छैन, र तपाईंको कल्पनाशक्ति तपाईंको मार्गदर्शक हो।

२०. सारांश र मुख्य बुँदाहरू

जाभास्क्रिप्ट वेब विकासमा प्रयोग हुने कम्प्युटर भाषा हो। यसले वेबसाइटहरूलाई अन्तरक्रियात्मक र जीवन्त बनाउन मद्दत गर्छ। जाभास्क्रिप्टको साथ, तपाईंले वेब पृष्ठहरूमा पाठ परिवर्तन गर्ने, क्लिकहरूमा प्रतिक्रिया दिने, र साधारण गणनाहरू गर्ने जस्ता रमाइलो कार्यहरू थप्न सक्नुहुन्छ।

जाभास्क्रिप्टको आधारभूत निर्माण ब्लकहरू समावेश छन्:

जाभास्क्रिप्टले क्लिक र कुञ्जी थिच्ने जस्ता घटनाहरू पनि सुन्छ। यसले वेब पृष्ठमा तपाईंले देख्नुभएको कुरालाई पुन: लोड नगरीकनै परिवर्तन गर्न कागजात वस्तु मोडेल (DOM) सँग काम गर्छ। यसले वेबसाइटहरूलाई गतिशील र रमाइलो बनाउँछ।

धेरै लोकप्रिय वेबसाइटहरू र अनलाइन खेलहरूले जाभास्क्रिप्ट प्रयोग गर्छन्। यो जताततै छ! अभिवादन बटन भएका साधारण वेबसाइटहरूदेखि जटिल अनलाइन अनुप्रयोगहरूसम्म, जाभास्क्रिप्ट सबैको मुटुमा छ।

जाभास्क्रिप्ट सिक्नु भनेको LEGO ब्लकहरू प्रयोग गरेर निर्माण गर्नु जस्तै हो। सानो सुरुवात गर्नुहोस्, एक पटकमा एउटा टुक्रा सिक्नुहोस्, र चाँडै तपाईं उत्कृष्ट परियोजनाहरू सिर्जना गर्न सक्षम हुनुहुनेछ। प्रत्येक नयाँ विचार तपाईंको रचनात्मक उपकरण बक्समा अर्को उपकरण हो।

यस पाठमा, हामीले वेबसाइटहरूलाई जीवन्त बनाउन जाभास्क्रिप्टले HTML र CSS सँग कसरी काम गर्छ भनेर देख्यौं। हामीले चर, प्रकार्य, सर्तहरू, लूपहरू, घटनाहरू र DOM बारे सिक्यौं। यी टुक्राहरू कसरी एकसाथ मिल्छन् भनेर बुझ्न हामीले सरल उदाहरणहरू पनि हेर्यौं।

सम्झनु पर्ने मुख्य बुँदाहरू:

जाभास्क्रिप्टको बारेमा अन्वेषण र सिकिरहनुहोस्। तपाईंले लेख्ने प्रत्येक नयाँ कोडको साथ, तपाईंले वेब विकासमा रचनात्मक सम्भावनाहरूको संसार खोल्नुहुन्छ। आफ्नो यात्राको आनन्द लिनुहोस् र आफ्ना वेबसाइटहरूलाई जीवन्त बनाउन रमाइलो गर्नुहोस्!

Download Primer to continue