This post is also available in: English (الإنجليزية) हिन्दी (الهندية)
JavaScript هي لغة البرمجة الأكثر استخدامًا لتطوير الويب. لقد تطور على مر السنين ويتم تنفيذه الآن في مجموعة من البيئات من مواقع الويب إلى الروبوتات. سيساعد تعلم JavaScript الأطفال على رؤية الصورة الأوسع لتطوير الويب.
مشاريع جافا سكريبت للأطفال
يمكن للأطفال استخدام مهاراتهم لإنشاء بعض التطبيقات الرائعة باستخدام JavaScript. فيما يلي بعض المشاريع التي يمكن للأطفال تجربتها بأيديهم.
1. ساعة رقمية
تعتبر الساعات عناصر مفيدة لأي واجهة مستخدم إذا تم استخدامها بطريقة مناسبة. يمكن استخدام الساعات في المواقع التي يكون فيها الوقت هو الشاغل الرئيسي مثل بعض مواقع الحجز أو بعض التطبيقات التي تعرض أوقات وصول القطارات والحافلات والرحلات الجوية وما إلى ذلك. سننظر في صنع واحدة رقمية.
تتمثل الطريقة في استخدام كائن التاريخ للحصول على الوقت في كل ثانية ثم عرض الوقت على المتصفح باستخدام الوقت الجديد الذي حصلنا عليه عن طريق استدعاء نفس الوظيفة كل ثانية.
<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. وقف المراقبة
يجد Stopwatch تطبيقات في العديد من المشاريع مثل الاختبارات والألعاب وما إلى ذلك. إنها عناصر مفيدة للدلالة على الوقت المنقضي.
النهج هو استخدام متغيرين – واحد للجزء الثاني والآخر جزء مائة من الثانية. في البداية ، تتم تهيئة المتغيرين إلى 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 قسمًا ، بينما يغطّي عقرب الدقائق والثواني 60 قسمًا بينما يتحرك بمقدار 360 درجة. هذا يعني أن كل ثانية يتحرك اليد الثانية بمقدار (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. Quiz Builder
تعد الاختبارات القصيرة عناصر مفيدة لأي واجهة مستخدم تطلب فيها من المستخدمين إجراء اختبار عبر الإنترنت. يتكون من مجموعة من الأسئلة لكل منها خيارات متعددة (أحدها صحيح). يحدد المستخدم الخيار الأنسب ويقارن النظام مدخلات المستخدم بالإجابة الصحيحة المخزنة بالفعل.
تتمثل الطريقة في إنشاء مجموعة من الأسئلة والخيارات المتاحة والإجابات الصحيحة وعرض الأسئلة واحدة تلو الأخرى من خلال المرور بحلقة ولكل إجابة مقارنة بالإجابة الصحيحة.
<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 ثم قم بتشغيله على متصفح. إذا كنت ترغب في تطوير أي تطبيق آخر في JavaScript ، فأخبرنا بذلك في مربع التعليقات.
