تُعد لغة البرمجة جافا سكريبت من أكثر اللغات شعبية واستخدامًا في تطوير تطبيقات الويب. إذا كنت تتطلع إلى تحسين مهاراتك في جافا سكريبت، فإن العمل على مشاريع جافا سكريبت بسيطة يمكن أن يكون خطوة ممتازة. هذه المشاريع العملية ليست فقط وسيلة فعالة لتطبيق المفاهيم النظرية، بل توفر أيضًا تجربة تعلم تفاعلية تساعدك على مواجهة تحديات البرمجة الواقعية. في هذا المقال، سنستعرض خمسة مشاريع جافا سكريبت بسيطة يمكنك تنفيذها لتطوير مهاراتك واحتراف جافا سكريبت بشكل أفضل.

اليك 5 مشاريع جافا سكريبت بسيطة مع الكود

مشروع 1: آلة حاسبة بسيطة

مشاريع جافا سكريبت
مشاريع جافا سكريبت – Javascript Projects

وصف المشروع

في هذا المشروع، سنقوم بإنشاء آلة حاسبة بسيطة باستخدام جافا سكريبت. ستتمكن هذه الآلة الحاسبة من إجراء العمليات الحسابية الأساسية مثل الجمع والطرح والضرب والقسمة. يُعد هذا المشروع نقطة انطلاق رائعة للمبتدئين في مشاريع جافا سكريبت، حيث يُساعد في فهم كيفية التعامل مع الأحداث والتفاعل مع عناصر HTML.

الكود الأساسي

إليك الكود الأساسي لإنشاء آلة حاسبة بسيطة باستخدام جافا سكريبت وHTML وCSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>آلة حاسبة بسيطة</title>
    <style>
        .calculator {
            width: 200px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            text-align: center;
        }
        .calculator input {
            width: 180px;
            margin-bottom: 10px;
        }
        .calculator button {
            width: 40px;
            height: 40px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" readonly>
        <br>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="setOperation('+')">+</button>
        <br>
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="setOperation('-')">-</button>
        <br>
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="setOperation('*')">*</button>
        <br>
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendNumber('0')">0</button>
        <button onclick="calculateResult()">=</button>
        <button onclick="setOperation('/')">/</button>
    </div>
    <script>
        let display = document.getElementById('display');
        let operation = '';
        let previousValue = '';

        function appendNumber(number) {
            display.value += number;
        }

        function setOperation(op) {
            previousValue = display.value;
            operation = op;
            display.value = '';
        }

        function calculateResult() {
            let currentValue = display.value;
            let result;
            switch (operation) {
                case '+':
                    result = parseFloat(previousValue) + parseFloat(currentValue);
                    break;
                case '-':
                    result = parseFloat(previousValue) - parseFloat(currentValue);
                    break;
                case '*':
                    result = parseFloat(previousValue) * parseFloat(currentValue);
                    break;
                case '/':
                    result = parseFloat(previousValue) / parseFloat(currentValue);
                    break;
            }
            display.value = result;
        }

        function clearDisplay() {
            display.value = '';
            previousValue = '';
            operation = '';
        }
    </script>
</body>
</html>

كيفية تحسين المشروع

يمكنك تحسين آلة الحاسبة البسيطة هذه من خلال إضافة ميزات متقدمة مثل:

  • دعم العمليات الحسابية المركبة.
  • تحسين الواجهة البصرية باستخدام CSS.
  • إضافة مفاتيح خاصة مثل النسبة المئوية والجذر التربيعي.

من خلال العمل على هذا المشروع، ستكتسب فهمًا أعمق لكيفية التعامل مع عناصر HTML باستخدام جافا سكريبت وكيفية تنفيذ مشاريع جافا سكريبت مفيدة وعملية.

مشروع 2: ساعة رقمية

مشاريع جافا سكريبت 1
مشاريع جافا سكريبت – Javascript Projects

وصف المشروع

في هذا المشروع، سنقوم بإنشاء ساعة رقمية باستخدام JavaScript. ستعرض هذه الساعة الوقت الحالي للمستخدم بشكل محدث كل ثانية. يُعد هذا المشروع من مشاريع جافا سكريبت البسيطة والممتعة التي تساعد في فهم كيفية التعامل مع الوقت وتحديث المحتوى بشكل ديناميكي.

الكود الأساسي

إليك الكود الأساسي لإنشاء ساعة رقمية باستخدام جافا سكريبت وHTML وCSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ساعة رقمية</title>
    <style>
        .clock {
            font-size: 48px;
            text-align: center;
            margin-top: 20%;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="clock" id="clock"></div>
    <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            const timeString = `${hours}:${minutes}:${seconds}`;
            document.getElementById('clock').textContent = timeString;
        }

        setInterval(updateClock, 1000);
        updateClock();  // Run initially to avoid delay
    </script>
</body>
</html>

كيفية تحسين المشروع

يمكنك تحسين الساعة الرقمية هذه من خلال إضافة ميزات متقدمة مثل:

  • عرض التاريخ بجانب الوقت.
  • تغيير الألوان أو الأنماط باستخدام CSS.
  • إضافة تنبيهات أو تذكيرات عندما يصل الوقت إلى وقت معين.

هذا المشروع يساعدك على فهم كيفية التعامل مع JavaScript لتحديث العناصر بشكل ديناميكي، ويُعد خطوة رائعة لتحسين مهاراتك في تطوير مشاريع جافا سكريبت متقدمة ومفيدة.

مشروع 3: لعبة تخمين الرقم

مشاريع جافا سكريبت 2
مشاريع جافا سكريبت – Javascript Projects

وصف المشروع

في هذا المشروع، سنقوم بإنشاء لعبة تخمين الرقم باستخدام جافا سكريبت. الهدف من اللعبة هو تخمين رقم عشوائي بين 1 و 100 في أقل عدد من المحاولات. هذا المشروع ممتع ويساعد في تحسين مهاراتك في البرمجة التفاعلية باستخدام JavaScript، وهو من بين أفضل مشاريع جافا سكريبت لتعلم المنطق البرمجي.

الكود الأساسي

إليك الكود الأساسي لإنشاء لعبة تخمين الرقم باستخدام جافا سكريبت وHTML وCSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لعبة تخمين الرقم</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .game {
            text-align: center;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 10px;
            background-color: #fff;
        }
        .game input {
            width: 50px;
            font-size: 16px;
            text-align: center;
        }
        .game button {
            font-size: 16px;
            padding: 5px 10px;
            margin-top: 10px;
        }
        .game p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="game">
        <h1>لعبة تخمين الرقم</h1>
        <p>خمن رقمًا بين 1 و 100:</p>
        <input type="number" id="guessInput" min="1" max="100">
        <button onclick="checkGuess()">تحقق</button>
        <p id="resultMessage"></p>
    </div>
    <script>
        const randomNumber = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;

        function checkGuess() {
            const userGuess = Number(document.getElementById('guessInput').value);
            attempts++;
            let message = '';

            if (userGuess === randomNumber) {
                message = `مبروك! لقد خمنت الرقم الصحيح ${randomNumber} في ${attempts} محاولات.`;
            } else if (userGuess > randomNumber) {
                message = 'الرقم الذي خمنته أكبر من الرقم الصحيح.';
            } else {
                message = 'الرقم الذي خمنته أصغر من الرقم الصحيح.';
            }

            document.getElementById('resultMessage').textContent = message;
        }
    </script>
</body>
</html>

كيفية تحسين المشروع

يمكنك تحسين لعبة تخمين الرقم هذه من خلال إضافة ميزات متقدمة مثل:

  • إضافة عداد زمني يحسب الوقت المستغرق لإيجاد الرقم الصحيح.
  • تحسين واجهة المستخدم باستخدام CSS لجعل اللعبة أكثر جاذبية.
  • إضافة مستويات صعوبة مختلفة بحيث يمكنك تحديد نطاق الأرقام.

من خلال العمل على هذا المشروع، ستتمكن من تطوير مهاراتك في البرمجة التفاعلية واستخدام JavaScript في إنشاء مشاريع جافا سكريبت تفاعلية وممتعة.

مشروع 4: قائمة مهام (To-Do List)

مشاريع جافا سكريبت 3
مشاريع جافا سكريبت – Javascript Projects

وصف المشروع

في هذا المشروع، سنقوم بإنشاء قائمة مهام باستخدام جافا سكريبت. يتيح لك هذا التطبيق إضافة المهام اليومية وإدارتها بسهولة. يُعد هذا المشروع من مشاريع جافا سكريبت البسيطة والمفيدة، حيث يُمكنك من تعلم كيفية التعامل مع البيانات الديناميكية والتفاعل مع عناصر HTML.

الكود الأساسي

إليك الكود الأساسي لإنشاء قائمة مهام باستخدام جافا سكريبت وHTML وCSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>قائمة مهام</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .todo-container {
            width: 300px;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .todo-container h1 {
            text-align: center;
        }
        .todo-container input {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .todo-container ul {
            list-style-type: none;
            padding: 0;
        }
        .todo-container ul li {
            background-color: #f9f9f9;
            margin-bottom: 5px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .todo-container ul li button {
            background-color: red;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="todo-container">
        <h1>قائمة مهام</h1>
        <input type="text" id="taskInput" placeholder="أضف مهمة جديدة">
        <button onclick="addTask()">أضف</button>
        <ul id="taskList"></ul>
    </div>
    <script>
        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const taskList = document.getElementById('taskList');

            if (taskInput.value.trim() !== '') {
                const newTask = document.createElement('li');
                newTask.textContent = taskInput.value;

                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'حذف';
                deleteButton.onclick = function() {
                    taskList.removeChild(newTask);
                };

                newTask.appendChild(deleteButton);
                taskList.appendChild(newTask);

                taskInput.value = '';
            }
        }
    </script>
</body>
</html>

كيفية تحسين المشروع

يمكنك تحسين قائمة المهام هذه من خلال إضافة ميزات متقدمة مثل:

  • إمكانية تحرير المهام بعد إضافتها.
  • إضافة فلاتر لعرض المهام المكتملة وغير المكتملة.
  • تخزين المهام في الذاكرة المحلية للمتصفح بحيث تبقى المهام حتى بعد إغلاق الصفحة.

هذا المشروع يساعدك على تطوير مهاراتك في التعامل مع DOM باستخدام JavaScript، وإنشاء مشاريع جافا سكريبت ديناميكية وتفاعلية.

مشروع 5: مغير الألوان العشوائي

مشاريع جافا سكريبت 4
مشاريع جافا سكريبت – Javascript Projects

وصف المشروع

في هذا المشروع، سنقوم بإنشاء مغير الألوان العشوائي باستخدام جافا سكريبت. عند النقر على زر، سيتم تغيير لون خلفية الصفحة بشكل عشوائي. يُعد هذا المشروع من مشاريع جافا سكريبت البسيطة والممتعة، ويُساعد في فهم كيفية التعامل مع أحداث النقر وتغيير الأنماط بشكل ديناميكي.

الكود الأساسي

إليك الكود الأساسي لإنشاء مغير الألوان العشوائي باستخدام جافا سكريبت وHTML وCSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مغير الألوان العشوائي</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .container {
            text-align: center;
        }
        .container button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>مغير الألوان العشوائي</h1>
        <button onclick="changeColor()">تغيير اللون</button>
    </div>
    <script>
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function changeColor() {
            document.body.style.backgroundColor = getRandomColor();
        }
    </script>
</body>
</html>

كيفية تحسين المشروع

يمكنك تحسين مغير الألوان العشوائي هذا من خلال إضافة ميزات متقدمة مثل:

  • عرض رمز اللون الحالي على الشاشة.
  • إضافة إمكانية نسخ رمز اللون إلى الحافظة.
  • حفظ الألوان المستخدمة في قائمة بحيث يمكن العودة إلى أحدها لاحقًا.

هذا المشروع يُساعدك على تطوير مهاراتك في التعامل مع DOM والأحداث في JavaScript، ويُعد إضافة رائعة لمجموعتك من مشاريع جافا سكريبت التفاعلية والممتعة.

الخاتمة

مشاريع جافا سكريبت 5

تعد المشاريع البسيطة طريقة رائعة لتعلم البرمجة وتحسين مهاراتك في JavaScript. من خلال هذه المشاريع الخمسة: آلة حاسبة بسيطة، ساعة رقمية، لعبة تخمين الرقم، قائمة مهام، ومغير الألوان العشوائي، يمكنك تطبيق المفاهيم النظرية بشكل عملي وممتع.

كل مشروع من هذه مشاريع JavaScript يوفر فرصة فريدة لفهم كيفية التعامل مع العناصر المختلفة في صفحة الويب، وتحسين التفاعل بين المستخدم والواجهة. ستساعدك هذه المشاريع على بناء أساس قوي يمكنك من خلاله تطوير مشاريع أكبر وأكثر تعقيدًا في المستقبل.

لا تتردد في تجربة هذه المشاريع ومشاركتها مع الآخرين. العمل على مشاريع JavaScript بسيطة هو خطوة أولى نحو تحقيق إتقان هذه اللغة البرمجية المهمة. استمر في التعلم والتجربة، وستجد نفسك تتحسن يومًا بعد يوم. حظًا موفقًا في رحلتك لتعلم جافا سكريبت!

مقالات ذات صلة:

أصعب لغات البرمجة : اليك 6 لغات برمجة صعبة

أشهر 5 لغات برمجة لسنة 2024

تعلم البرمجة من الصفر: 11 نصيحة تجعلك مبرمج محترف

15 مشروع بايثون بسيط مع الكود – Python Projects

المصادر:

wikipedia.org

stackoverflow.com

شارك:

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *