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) والعوامل (، – ، × ، ÷ و =). يقوم المشغل بالنقر فوق الآلة الحاسبة وإجراء العملية المطلوبة ، والتي يتم عرضها بعد ذلك على جزء العرض.
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 ، فأخبرنا بذلك في مربع التعليقات.
