This post is also available in: English العربية (Arabic)
वेब डेवलपमेंट के लिए जावास्क्रिप्ट सबसे व्यापक रूप से उपयोग की जाने वाली प्रोग्रामिंग भाषा है। यह वर्षों में विकसित हुआ है और अब इसे वेबसाइटों से लेकर रोबोटिक्स तक के वातावरण में लागू किया जा रहा है। जावास्क्रिप्ट सीखने से बच्चों को वेब डेवलपमेंट की व्यापक तस्वीर देखने में मदद मिलेगी।
बच्चों के लिए जावास्क्रिप्ट प्रोजेक्ट
बच्चे अपने कौशल का उपयोग जावास्क्रिप्ट का उपयोग करके कुछ अच्छे एप्लिकेशन बनाने में कर सकते हैं। यहां कुछ ऐसे प्रोजेक्ट दिए गए हैं, जिन पर बच्चे हाथ आजमा सकते हैं।
1. डिजिटल घड़ी
यदि उचित तरीके से उपयोग किया जाए तो घड़ियाँ किसी भी UI के लिए उपयोगी तत्व हैं। घड़ियों का उपयोग उन साइटों में किया जा सकता है जहां समय मुख्य चिंता का विषय है जैसे कुछ बुकिंग साइट या कुछ ऐप जो ट्रेनों, बसों, उड़ानों आदि के आने का समय दिखाते हैं। हम एक डिजिटल घड़ी बनाने की प्रक्रिया पर नज़र डालते हैं।
इसके लिए प्रत्येक सेकेंड पर समय प्राप्त करने के लिए दिनांक ऑब्जेक्ट का उपयोग करना है और फिर ब्राउज़र पर समय प्रदर्शित करना है जो हमें प्रत्येक सेकेंड में एक ही फ़ंक्शन को कॉल करके प्राप्त हुआ है।
<html><head><style>body { background: black;}.clock { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: blue; font-size: 60px; font-family: Orbitron; letter-spacing: 7px;}</style></head><body><div id=”MyClockDisplay” onload=”showTime()”></div><script>function showTime(){ var date = new Date(); var h = date.getHours(); // 0 – 23 var m = date.getMinutes(); // 0 – 59 var s = date.getSeconds(); // 0 – 59 var session = “AM”; if(h == 0){ h = 12; } if(h > 12){ h = h – 12; session = “PM”; } h = (h < 10) ? “0” + h : h; m = (m < 10) ? “0” + m : m; s = (s < 10) ? “0” + s : s; var time = h + “:” + m + “:” + s + ” ” + session; document.getElementById(“MyClockDisplay”).innerText = time; document.getElementById(“MyClockDisplay”).textContent = time; setTimeout(showTime, 1000); }showTime();</script></body></html>
2. स्टॉप वॉच
स्टॉपवॉच कई प्रोजेक्ट्स जैसे क्विज़, गेम्स आदि में अपना स्थान बनाती है। वे बीते हुए समय को दर्शाने के लिए उपयोगी तत्व हैं।
इसे बनाने का दृष्टिकोण दो चरों का उपयोग करना है – एक दूसरे के लिए और दूसरा दूसरे के सौवें भाग के लिए। प्रारंभ में, दो चर को 0 से प्रारंभ किया जाता है। सेकंड के सौवें भाग में 99 गिनती पूरी होने के बाद, दूसरा चर एक से बढ़ जाता है।
<html><head><style>/* Variables */ $orange: #ffa600;$grey:#f3f3f3;$white: #fff;$base-color:$orange ;/* Mixin’s */ @mixin transition {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}@mixin corners ($radius) {-moz-border-radius: $radius;-webkit-border-radius: $radius;border-radius: $radius; -khtml-border-radius: $radius; }body {background:$base-color;font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif; height:100%;}.wrapper {width: 800px;margin: 30px auto;color:$white;text-align:center;}h1, h2, h3 { font-family: ‘Roboto’, sans-serif; font-weight: 100; font-size: 2.6em; text-transform: uppercase;}#seconds, #tens{ font-size:2em;}button{@include corners (5px);background:$base-color;color:$white;border: solid 1px $white;text-decoration:none;cursor:pointer;font-size:1.2em;padding:18px 10px;width:180px;margin: 10px; outline: none; &:hover{@include transition;background:$white;border: solid 1px $white;color:$base-color;}}</style></head><body><div><h1>Stopwatch</h1><p><span id=”seconds”>00</span>:<span id=”tens”>00</span></p><button id=”button-start”>Start</button><button id=”button-stop”>Stop</button><button id=”button-reset”>Reset</button></div> <script>window.onload = function () { var seconds = 00; var tens = 00; var appendTens = document.getElementById(“tens”) var appendSeconds = document.getElementById(“seconds”) var buttonStart = document.getElementById(‘button-start’); var buttonStop = document.getElementById(‘button-stop’); var buttonReset = document.getElementById(‘button-reset’); var Interval; buttonStart.onclick = function() { clearInterval(Interval); Interval = setInterval(startTimer, 10); } buttonStop.onclick = function() { clearInterval(Interval); } buttonReset.onclick = function() { clearInterval(Interval); tens = “00”; seconds = “00”; appendTens.innerHTML = tens; appendSeconds.innerHTML = seconds; } function startTimer () { tens++; if(tens <= 9){ appendTens.innerHTML = “0” + tens; } if (tens > 9){ appendTens.innerHTML = tens; } if (tens > 99) { console.log(“seconds”); seconds++; appendSeconds.innerHTML = “0” + seconds; tens = 0; appendTens.innerHTML = “0” + 0; } if (seconds > 9){ appendSeconds.innerHTML = seconds; } }}</script></body></html>
3. एनालॉग घड़ी
एक एनालॉग घड़ी वह होती है जिसमें एक घंटा, मिनट और सेकंड हैंड होते हैं। इसे बनाने का दृष्टिकोण प्रत्येक सेकंड पर समय प्राप्त करने के लिए दिनांक वस्तु का उपयोग करना है और फिर संबंधित हाथ की स्थिति के संदर्भ में दूसरे, मिनट और घंटे के मानों को परिवर्तित करके ब्राउज़र पर समय प्रदर्शित करना है।
हम जानते हैं कि एक वृत्त में कोण 360 डिग्री होता है और घंटे की सुई 12 डिवीजनों को कवर करती है, मिनट और सेकंड हैंड 360 डिग्री घूमते हुए 60 डिवीजनों को कवर करती है। इसका मतलब है कि सेकेंड हैंड हर सेकंड (360/60) = 6 डिग्री से चलता है और इसी तरह सेकेंड हैंड एक बार पूरा चक्कर लगाने के बाद मिनट हैंड 6 डिग्री आगे बढ़ता है। एक घंटे की सुई एक कोण से घूमती है (360/12) = 30 डिग्री एक मिनट में एक बार हाथ एक चक्कर पूरा करता है।
फ़ंक्शन Math.PI का उपयोग हाथों की कोणीय पारी की गणना के लिए किया गया है। Math.PI PI का मान देता है जो 180 डिग्री है।
<html><body><canvas id=”canvas” width=”400″ height=”400″style=”background-color:#333″></canvas><script>var canvas = document.getElementById(“canvas”);var ctx = canvas.getContext(“2d”);var radius = canvas.height / 2;ctx.translate(radius, radius);radius = radius * 0.90setInterval(drawClock, 1000);function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius);}function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = ‘white’; ctx.fill(); grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, ‘#333’); grad.addColorStop(0.5, ‘white’); grad.addColorStop(1, ‘#333’); ctx.strokeStyle = grad; ctx.lineWidth = radius*0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fillStyle = ‘#333’; ctx.fill();}function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius*0.15 + “px arial”; ctx.textBaseline=”middle”; ctx.textAlign=”center”; for(num = 1; num < 13; num++){ ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); }}function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hour*Math.PI/6)+ (minute*Math.PI/(6*60))+ (second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second=(second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02);}function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = “round”; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos);}</script></body></html>
4. कैलकुलेटर
डिजिटल कैलकुलेटर गणितीय गणना करने के लिए एक उपकरण है। इसमें मूल रूप से दो भाग होते हैं – डिस्प्ले भाग और बटन। बटन फिर से दो उप-ब्लॉकों – संख्या (0 से 9) और ऑपरेटरों (+, -, ×, और =) में विभाजित हैं। ऑपरेटर कैलकुलेटर पर क्लिक करता है और वांछित ऑपरेशन करता है, जो तब डिस्प्ले भाग पर प्रदर्शित होता है।
<html><head><style>body { width: 500px; margin: 4% auto; font-family: ‘Source Sans Pro’, sans-serif; letter-spacing: 5px; font-size: 1.8rem; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}.calculator { padding: 20px; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-radius: 1px;background-color: rgba(197, 227, 84, 0.3);}.input { border: 1px solid #ddd; border-radius: 1px; height: 60px; padding-right: 15px; padding-top: 10px; text-align: right; margin-right: 6px; font-size: 2.5rem; overflow-x: auto; transition: all .2s ease-in-out;}.input:hover { border: 1px solid #bbb; -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);}.buttons {}.operators {}.operators div { display: inline-block; border: 1px solid #bbb; border-radius: 1px; width: 80px; text-align: center; padding: 10px; margin: 20px 4px 10px 0; cursor: pointer; background-color: #ddd; transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;}.operators div:hover { background-color: #ddd; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #aaa;}.operators div:active { font-weight: bold;}.leftPanel { display: inline-block;}.numbers div { display: inline-block; border: 1px solid #ddd; border-radius: 1px; width: 80px; text-align: center; padding: 10px; margin: 10px 4px 10px 0; cursor: pointer; background-color: #f9f9f9; transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;}.numbers div:hover { background-color: #f1f1f1; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #bbb;}.numbers div:active { font-weight: bold;}div.equal { display: inline-block; border: 1px solid #3079ED; border-radius: 1px; width: 16%;text-align: center; padding: 127px 10px; margin: 10px 6px 10px 0; vertical-align: top; cursor: pointer; color: #FFF; background-color: #4d90fe; transition: all .2s ease-in-out;}div.equal:hover { background-color: #307CF9; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #1857BB;}div.equal:active { font-weight: bold;}</style></head><body><div> <div id=”input”></div> <div> <div> <div>+</div> <div>-</div> <div>×</div> <div>÷</div> </div> <div> <div> <div>7</div> <div>8</div> <div>9</div> </div> <div> <div>4</div> <div>5</div> <div>6</div> </div> <div> <div>1</div> <div>2</div> <div>3</div> </div> <div> <div>0</div> <div>.</div> <div id=”clear”>C</div> </div> </div> <div id=”result”>=</div> </div></div><script>”use strict”;var input = document.getElementById(‘input’), // input/output button number = document.querySelectorAll(‘.numbers div’), // number buttons operator = document.querySelectorAll(‘.operators div’), // operator buttons result = document.getElementById(‘result’), // equal button clear = document.getElementById(‘clear’), // clear button resultDisplayed = false; // flag to keep an eye on what output is displayed// adding click handlers to number buttonsfor (var i = 0; i < number.length; i++) { number[i].addEventListener(“click”, function(e) { // storing current input string and its last character in variables – used later var currentString = input.innerHTML; var lastChar = currentString[currentString.length – 1]; // if result is not displayed, just keep adding if (resultDisplayed === false) { input.innerHTML += e.target.innerHTML; } else if (resultDisplayed === true && lastChar === “+” || lastChar === “-” || lastChar === “×” || lastChar === “÷”) { // if result is currently displayed and user pressed an operator // we need to keep on adding to the string for next operation resultDisplayed = false; input.innerHTML += e.target.innerHTML; } else { // if result is currently displayed and user pressed a number // we need clear the input string and add the new input to start the new operation resultDisplayed = false; input.innerHTML = “”; input.innerHTML += e.target.innerHTML; } });}// adding click handlers to number buttonsfor (var i = 0; i < operator.length; i++) { operator[i].addEventListener(“click”, function(e) { // storing current input string and its last character in variables – used later var currentString = input.innerHTML; var lastChar = currentString[currentString.length – 1]; // if last character entered is an operator, replace it with the currently pressed one if (lastChar === “+” || lastChar === “-” || lastChar === “×” || lastChar === “÷”) { var newString = currentString.substring(0, currentString.length – 1) + e.target.innerHTML; input.innerHTML = newString; } else if (currentString.length == 0) { // if first key pressed is an operator, don’t do anything console.log(“enter a number first”); } else { // else just add the operator pressed to the input input.innerHTML += e.target.innerHTML; } });}// on click of ‘equal’ buttonresult.addEventListener(“click”, function() { // this is the string that we will be processing eg. -10+26+33-56*34/23 var inputString = input.innerHTML; // forming an array of numbers. eg for above string it will be: numbers = [“10”, “26”, “33”, “56”, “34”, “23”] var numbers = inputString.split(/+|-|×|÷/g); // forming an array of operators. for above string it will be: operators = [“+”, “+”, “-“, “*”, “/”] // first we replace all the numbers and dot with empty string and then split var operators = inputString.replace(/[0-9]|./g, “”).split(“”); console.log(inputString); console.log(operators); console.log(numbers); console.log(“—————————-“); // now we are looping through the array and doing one operation at a time. // first divide, then multiply, then subtraction and then addition // as we move we are altering the original numbers and operators array // the final element remaining in the array will be the output var divide = operators.indexOf(“÷”); while (divide != -1) { numbers.splice(divide, 2, numbers[divide] / numbers[divide + 1]); operators.splice(divide, 1); divide = operators.indexOf(“÷”); } var multiply = operators.indexOf(“×”); while (multiply != -1) { numbers.splice(multiply, 2, numbers[multiply] * numbers[multiply + 1]); operators.splice(multiply, 1); multiply = operators.indexOf(“×”); } var subtract = operators.indexOf(“-“); while (subtract != -1) { numbers.splice(subtract, 2, numbers[subtract] – numbers[subtract + 1]); operators.splice(subtract, 1); subtract = operators.indexOf(“-“); } var add = operators.indexOf(“+”); while (add != -1) { // using parseFloat is necessary, otherwise it will result in string concatenation 🙂 numbers.splice(add, 2, parseFloat(numbers[add]) + parseFloat(numbers[add + 1])); operators.splice(add, 1); add = operators.indexOf(“+”); } input.innerHTML = numbers[0]; // displaying the output resultDisplayed = true; // turning flag if result is displayed});// clearing the input on press of clearclear.addEventListener(“click”, function() { input.innerHTML = “”;})</script></body></html>
5. क्विज बिल्डर
क्विज़ किसी भी UI के लिए उपयोगी तत्व हैं जहाँ आप उपयोगकर्ताओं को ऑनलाइन परीक्षा देने के लिए कह रहे हैं। इसमें प्रश्नों का एक समूह होता है जिसमें प्रत्येक में कई विकल्प होते हैं (जिनमें से एक सही है)। उपयोगकर्ता सबसे उपयुक्त विकल्प का चयन करता है और सिस्टम पहले से संग्रहीत सही उत्तर के साथ उपयोगकर्ता के इनपुट की तुलना करता है।
इसे बनाने का दृष्टिकोण प्रश्नों, उपलब्ध विकल्पों और सही उत्तरों का एक संग्रह बनाना है और एक लूप के माध्यम से प्रश्नों को एक-एक करके प्रदर्शित करना है और प्रत्येक प्रतिक्रिया के लिए सही उत्तर की तुलना करना है।
<html><head><style>body{font-size: 20px;font-family: sans-serif;color: #333;}.question{font-weight: 600;}.answers { margin-bottom: 20px;}.answers label{ display: block;}#submit{font-family: sans-serif;font-size: 20px;background-color: #279;color: #fff;border: 0px;border-radius: 3px;padding: 20px;cursor: pointer;margin-bottom: 20px;}#submit:hover{background-color: #38a;}</style></head><body><div id=”quiz”></div><button id=”submit”>Submit Quiz</button><div id=”results”></div><script>(function(){ function buildQuiz(){ // variable to store the HTML output const output = []; // for each question… myQuestions.forEach( (currentQuestion, questionNumber) => { // variable to store the list of possible answers const answers = []; // and for each available answer… for(letter in currentQuestion.answers){ // …add an HTML radio button answers.push( `<label> <input type=”radio” name=”question${questionNumber}” value=”${letter}”> ${letter} : ${currentQuestion.answers[letter]} </label>` ); } // add this question and its answers to the output output.push( `<div> ${currentQuestion.question} </div> <div> ${answers.join(”)} </div>` ); } ); // finally combine our output list into one string of HTML and put it on the page quizContainer.innerHTML = output.join(”); } function showResults(){ // gather answer containers from our quiz const answerContainers = quizContainer.querySelectorAll(‘.answers’); // keep track of user’s answers let numCorrect = 0; // for each question… myQuestions.forEach( (currentQuestion, questionNumber) => { // find selected answer const answerContainer = answerContainers[questionNumber]; const selector = `input[name=question${questionNumber}]:checked`; const userAnswer = (answerContainer.querySelector(selector) || {}).value; // if answer is correct if(userAnswer === currentQuestion.correctAnswer){ // add to the number of correct answers numCorrect++; // color the answers green answerContainers[questionNumber].style.color = ‘lightgreen’; } // if answer is wrong or blank else{ // color the answers red answerContainers[questionNumber].style.color = ‘red’; } }); // show number of correct answers out of total resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`; } const quizContainer = document.getElementById(‘quiz’); const resultsContainer = document.getElementById(‘results’); const submitButton = document.getElementById(‘submit’); const myQuestions = [ { question: “Who invented JavaScript?”, answers: { a: “Douglas Crockford”, b: “Sheryl Sandberg”, c: “Brendan Eich” }, correctAnswer: “c” }, { question: “Which one of these is a JavaScript package manager?”, answers: { a: “Node.js”, b: “TypeScript”, c: “npm” }, correctAnswer: “c” }, { question: “Which tool can you use to ensure code quality?”, answers: { a: “Angular”, b: “jQuery”, c: “RequireJS”, d: “ESLint” }, correctAnswer: “d” } ]; // Kick things off buildQuiz(); // Event listeners submitButton.addEventListener(‘click’, showResults);})();</script></body></html>
क्या आपको प्रोजेक्ट्स पसंद आए? इन ऍप्लिकेशन्स को बनाने का प्रयास करें। इन ऍप्लिकेशन्स का परीक्षण करने के लिए, कोड को नोटपैड में कॉपी करें और इसे एक HTML फ़ाइल के रूप में सहेजें और फिर इसे ब्राउज़र पर चलाएं। यदि आप जावास्क्रिप्ट में कोई अन्य एप्लिकेशन विकसित करना चाहते हैं, तो हमें कमेंट बॉक्स में बताएं।
