أحداث الفأرة في لغة جافاسكريبت JavaScript Mouse Events
استكشاف أحداث الماوس في JavaScript: تعلم كيفية تتبع وتتفاعل مع حركة الماوس على صفحات الويب
مقدمة عن أحداث الفأرة في JavaScript:
أحداث الماوس تُمثل جزءًا أساسيًا من تطوير واجهات المستخدم في تطبيقات الويب. تُستخدم أحداث الماوس لتتبع تفاعل المستخدم مع الصفحة والعناصر المختلفة، وتتيح لنا إضافة تفاعلات ممتعة وفعالة إلى صفحات الويب التي ننشئها.
في درس أحداث الماوس في JavaScript، سنتعرف على مجموعة من الأحداث التي يمكن أن تحدث عند تفاعل المستخدم مع الماوس، وسنتعلم كيفية استخدامها بشكل صحيح لتحسين تجربة المستخدم.
سنغطي الأحداث الأساسية مثل click و mousedown و mouseup، بالإضافة إلى أحداث أكثر تقدمًا مثل mousemove و mouseover و mouseout.
من خلال هذا الدرس، ستكتسب المهارات الضرورية لتعقب حركة الماوس، والتعامل مع النقرات والضغطات، وتطبيق التفاعلات المختلفة مثل تغيير الأنماط أو الألوان، أو تنفيذ إجراءات معينة عند وقوع حدث معين. كما ستكتسب فهمًا أعمق لكيفية تحكم JavaScript في السلوك المتعلق بالماوس في صفحات الويب.
تُستخدم أحداث الماوس في لغة JavaScript لتتبع تفاعلات المستخدم مع الماوس على صفحة الويب.
تشمل هذه الأحداث مجموعة متنوعة من العمليات التي يمكن تنفيذها عندما يتفاعل المستخدم بتحريك الماوس أو النقر عليه.
ما هي أهم الأحداث المرتعلقة بالفأرة في جافاسكريبت ؟
الحدث click: يتم تشغيل هذا الحدث عندما ينقر المستخدم على عنصر HTML.
الحدث mouseover: يحدث هذا الحدث عندما يمر المؤشر فوق عنصر HTML.
الحدث mouseout: يتم تشغيل هذا الحدث عندما يترك المؤشر عنصر HTML بعد أن كان فوقه.
الحدث mousemove: يحدث هذا الحدث عندما يتحرك المؤشر داخل نطاق عنصر HTML.
الحدث mousedown: يتم تشغيل هذا الحدث عندما يضغط المستخدم على زر الماوس.
الحدث mouseup: يحدث هذا الحدث عندما يتم إطلاق زر الماوس بعد الضغط عليه.
يمكن استخدام هذه الأحداث لتحقيق تفاعلات متنوعة في صفحة الويب، مثل تغيير أسلوب CSS أو تنفيذ أوامر JavaScript معينة عند حدوث تفاعلات الماوس.
خطوة بخطوة كيف نستخدم JavaScript Mouse Events
لنقم بشرح كيفية استخدام أحداث الماوس في JavaScript خطوة بخطوة:
إضافة الأحداث إلى العناصر HTML:
يجب أولاً تحديد العناصر HTML التي ترغب في تعقب تفاعلات الماوس معها وإضافة الأحداث إليها. يمكن القيام بذلك باستخدام الوسم <script> في صفحة HTML الخاصة بك أو من خلال ملف JavaScript خارجي.
مثال:
<button id="myButton">Click Me</button>
تحديد العنصر وإضافة معالج الحدث:
بعد تحديد العنصر الذي ترغب في إضافة الحدث إليه، يمكنك استخدام JavaScript للوصول إليه وإضافة معالج للحدث المناسب.
مثال:
// احصل على العنصر
var button = document.getElementById('myButton');
// أضف معالج حدث click
button.addEventListener('click', function() {
alert('You clicked the button!');
});
تنفيذ الإجراءات المطلوبة عند حدوث الحدث:
يمكنك تحديد الإجراءات التي تريد تنفيذها عند حدوث الحدث، مثل تغيير النص أو الألوان أو تنفيذ وظائف JavaScript مخصصة.
مثال:
// تغيير لون الخلفية عند تحريك الماوس فوق الزر
button.addEventListener('mouseover', function() {
button.style.backgroundColor = 'red';
});
// إعادة لون الخلفية إلى اللون الأصلي عند مغادرة الماوس
button.addEventListener('mouseout', function() {
button.style.backgroundColor = '';
});
باستخدام هذه الخطوات، يمكنك تعقب تفاعلات الماوس وتنفيذ الإجراءات المناسبة على صفحة الويب الخاصة بك.
تطبيق شامل مع الشرح خطوة بخطوة عن JavaScript Mouse Events
على كيفية استخدام أحداث الماوس في JavaScript. في هذا المثال، سنقوم بإنشاء زر يتغير لونه عندما يتم تحريك الماوس فوقه ويرجع إلى لونه الأصلي عندما يترك الماوس من فوقه.
الخطوة 1: إنشاء عنصر HTML:
قم بإنشاء عنصر HTML، مثل زر (<button>)، وقم بتعيين معرف فريد له.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
<style>
#myButton {
background-color: blue;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="myButton">Click Me</button>
<script src="script.js"></script>
</body>
</html>
الخطوة 2: إضافة السلوك باستخدام JavaScript:
في ملف JavaScript، قم بالتقاط العنصر HTML المراد تعقبه وإضافة المعالجات لأحداث الماوس.
// script.js
// احصل على الزر من عناصر الصفحة
var button = document.getElementById('myButton');
// إضافة معالج لحدث mouseover (تحريك الماوس فوق الزر)
button.addEventListener('mouseover', function() {
// تغيير لون خلفية الزر إلى أحمر
button.style.backgroundColor = 'red';
});
// إضافة معالج لحدث mouseout (مغادرة الماوس من فوق الزر)
button.addEventListener('mouseout', function() {
// إعادة لون خلفية الزر إلى الأزرق الأصلي
button.style.backgroundColor = 'blue';
});
الخطوة 3: اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك وحاول تحريك الماوس فوق الزر ومغادرته لرؤية التأثير.
هذا مثال بسيط يظهر كيفية استخدام أحداث الماوس في JavaScript لإضافة سلوك تفاعلي إلى صفحة الويب الخاصة بك. يمكنك توسيع هذا المثال لتنفيذ تفاعلات ماوس معقدة أو لتنفيذ إجراءات أخرى متعلقة بأحداث الماوس.
تطبيق 2:باستخدام JavaScript Mouse Events
انشاء مربع يتغير لونه عند نقرة الماوس عليه ويعود للون الأصلي عند فصل الماوس عنه.
باستخدام أحداث الماوس في JavaScript. في هذا المثال، سنقوم بإنشاء مربع يتغير لونه عند نقرة الماوس عليه ويعود للون الأصلي عند فصل الماوس عنه.
الخطوة 1: إنشاء عنصر HTML:
قم بإنشاء عنصر div في صفحة HTML وقم بتعيين له معرفًا فريدًا.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script src="script.js"></script>
</body>
</html>
الخطوة 2: إضافة السلوك باستخدام JavaScript:
في ملف JavaScript، قم بالتقاط العنصر HTML وإضافة المعالجات لأحداث الماوس.
// script.js
// احصل على العنصر div من عناصر الصفحة
var myDiv = document.getElementById('myDiv');
// إضافة معالج لحدث mouseover (تحريك الماوس فوق العنصر)
myDiv.addEventListener('mouseover', function() {
// تغيير لون خلفية العنصر إلى أخضر
myDiv.style.backgroundColor = 'green';
});
// إضافة معالج لحدث mouseout (مغادرة الماوس من فوق العنصر)
myDiv.addEventListener('mouseout', function() {
// إعادة لون خلفية العنصر إلى الأزرق الأصلي
myDiv.style.backgroundColor = 'blue';
});
الخطوة 3: اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك وقم بتحريك الماوس فوق العنصر ومغادرته لرؤية التأثير.
هذا المثال يظهر كيفية استخدام أحداث الماوس في JavaScript لتنفيذ تغييرات على العناصر في صفحة الويب استنادًا إلى تفاعلات المستخدم مع الماوس. يمكنك تعديل وتوسيع هذا المثال لتنفيذ سلوك مختلف أو تطبيقات متعددة باستخدام أحداث الماوس.
تطبيق 3:تحريك عنصر دائري في صفحة الويب باستخدام أحداث الماوس JavaScript Mouse Events
سنقوم بإنشاء تطبيق بسيط يقوم بتحريك عنصر دائري في صفحة الويب باستخدام أحداث الماوس في JavaScript. عند تحريك الماوس، سيتبع الدائرة موقع الماوس وسنظهر الإحداثيات (x و y) في الزاوية العلوية اليسرى.
الخطوة 1: إنشاء عنصر HTML:
قم بإنشاء عنصر div في صفحة HTML وقم بتعيين له معرفًا فريدًا.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
<style>
#container {
position: relative;
width: 400px;
height: 400px;
background-color: #f0f0f0;
}
#circle {
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
border-radius: 50%;
}
#coordinates {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="circle"></div>
</div>
<div id="coordinates"></div>
<script src="script.js"></script>
</body>
</html>
الخطوة 2: إضافة السلوك باستخدام JavaScript:
في ملف JavaScript، سنقوم بتحديد حركة الماوس داخل عنصر الدائرة وتحديث موقعها وعرض إحداثيات الماوس.
// script.js
// احصل على عناصر الصفحة
var container = document.getElementById('container');
var circle = document.getElementById('circle');
var coordinates = document.getElementById('coordinates');
// أضف معالج الحدث لتحريك الماوس داخل الحاوية
container.addEventListener('mousemove', function(event) {
// تحديث موقع الدائرة ليتبع موقع الماوس
var x = event.clientX - container.offsetLeft;
var y = event.clientY - container.offsetTop;
circle.style.left = x + 'px';
circle.style.top = y + 'px';
// عرض إحداثيات الماوس
coordinates.innerHTML = 'Mouse Coordinates: (' + x + ', ' + y + ')';
});
الخطوة 3: اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك وقم بتحريك الماوس داخل عنصر الحاوية لرؤية تحرك الدائرة وعرض إحداثيات الماوس.
هذا المثال يظهر كيفية استخدام أحداث الماوس في JavaScript لتحريك عنصر دائري داخل صفحة الويب باستجابة لتحرك الماوس. يمكنك تطوير هذا التطبيق بإضافة المزيد من السمات والتفاصيل لتحسين تجربة المستخدم.
تطبيق 4: اظهار رسالة نصية عند نقرة الماوس على عنصر محدد.
فلنقم بإنشاء تطبيق آخر يستخدم أحداث الماوس في JavaScript لإظهار رسالة نصية عند نقرة الماوس على عنصر محدد. سنقوم بإنشاء قائمة تحتوي على عناصر قائمة، وعندما يتم نقر الماوس على أي عنصر في القائمة، ستظهر رسالة تعرض نص العنصر المنقر.
الخطوة 1: إنشاء عناصر HTML:
قم بإنشاء قائمة (<ul>) في صفحة HTML وقم بتعيين لكل عنصر (<li>) نصًا فريدًا.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mouse Events Example</title> </head> <body> <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script src="script.js"></script> </body> </html>
الخطوة 2: إضافة السلوك باستخدام JavaScript:
في ملف JavaScript، سنقوم بإضافة معالج لحدث النقر (click) على كل عنصر في القائمة، وعند النقر، سنقوم بعرض نص العنصر.
// script.js
// احصل على قائمة العناصر
var list = document.getElementById('myList');
// احصل على جميع عناصر القائمة
var listItems = list.getElementsByTagName('li');
// أضف معالج الحدث لكل عنصر في القائمة
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', function() {
// عند النقر على العنصر، عرض نص العنصر
alert('You clicked: ' + this.innerText);
});
}
الخطوة 3: اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك وقم بالنقر على أي عنصر في القائمة لرؤية رسالة تعرض نص العنصر المنقر.
هذا المثال يظهر كيفية استخدام أحداث الماوس في JavaScript لتنفيذ سلوك مختلف بناءً على تفاعلات المستخدم مع الصفحة. يمكنك تطوير هذا التطبيق عن طريق إضافة المزيد من العناصر والتفاصيل أو تحسين تجربة المستخدم بأساليب أخرى.
تطبيق 5: إنشاء مربع يتحرك باستجابة لحركة الماوس الشرح خطوة بخطوة عن :JavaScript Mouse Events
في هذا التطبيق، سنقوم بإنشاء مربع يتحرك باستجابة لحركة الماوس. عند تحريك الماوس داخل صفحة الويب، سيتبع المربع موقع الماوس وسنعرض إحداثيات الماوس داخل المربع.
الخطوة 1: إنشاء عناصر HTML:
سنقوم بإنشاء مربع داخل صفحة HTML حيث سنقوم بتتبع حركة الماوس.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="script.js"></script>
</body>
</html>
الخطوة 2: إضافة السلوك باستخدام JavaScript:
في ملف JavaScript، سنقوم بتحديث موقع المربع باستجابة لحركة الماوس وعرض إحداثيات الماوس داخل المربع.
// script.js
// احصل على العنصر المربع
var box = document.getElementById('box');
// أضف معالج الحدث لتحريك الماوس داخل الصفحة
document.addEventListener('mousemove', function(event) {
// حساب إحداثيات الماوس داخل المربع
var x = event.clientX - box.offsetWidth / 2;
var y = event.clientY - box.offsetHeight / 2;
// تحديث موقع المربع
box.style.left = x + 'px';
box.style.top = y + 'px';
// عرض إحداثيات الماوس داخل المربع
box.innerText = 'Mouse Coordinates: (' + x + ', ' + y + ')';
});
الخطوة 3: اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك وقم بتحريك الماوس داخل الصفحة لرؤية تحرك المربع وعرض إحداثيات الماوس داخل المربع.
هذا المثال يظهر كيفية استخدام أحداث الماوس في JavaScript لتحديث موقع العنصر وعرض الإحداثيات الماوسية. يمكنك تطوير هذا التطبيق عن طريق إضافة المزيد من العناصر أو تحسين التفاصيل وتجربة المستخدم.
مشروع شامل مع الشرح عن :JavaScript Mouse Events
طبيعة المشروع الشامل تتطلب تطبيقًا يمكن أن يستغل بالكامل أحداث الماوس في JavaScript.
سنقوم بإنشاء لوحة رسم بسيطة تتفاعل مع حركة الماوس، حيث يمكن للمستخدم أن يرسم على الشاشة باستخدام الفأرة.
الخطوات:
1. إنشاء هيكل HTML:
نحتاج إلى عنصر canvas حيث سيتم رسم الرسومات.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Drawing</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="drawingCanvas" width="800" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
2. تنفيذ JavaScript:
في ملف JavaScript، سنحتاج إلى التقاط حركة الماوس داخل canvas ورسم الرسمة بالتالي.
// script.js
// احصل على العنصر canvas
var canvas = document.getElementById('drawingCanvas');
var ctx = canvas.getContext('2d');
// متغير لتحديد ما إذا كان المستخدم يرسم حاليًا أم لا
var isDrawing = false;
// تحديد موقع بداية الرسمة
canvas.addEventListener('mousedown', function(event) {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
});
// رسم الخط بناءً على حركة الماوس
canvas.addEventListener('mousemove', function(event) {
if (isDrawing) {
ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
ctx.stroke();
}
});
// إيقاف الرسم عندما يتوقف المستخدم عن النقر
canvas.addEventListener('mouseup', function() {
isDrawing = false;
});
// إيقاف الرسم عندما يغادر الماوس حدود الكانفاس
canvas.addEventListener('mouseleave', function() {
isDrawing = false;
});
3. الشرح:
نقوم بالتقاط حركة الماوس داخل canvas باستخدام أحداث الماوس.
عندما ينقر المستخدم ويبدأ بالرسم، نقوم بتحديد نقطة بداية الرسم.
عندما يحرك المستخدم الماوس، نقوم برسم خط بين نقاط البداية والنقطة الحالية.
عندما يتوقف المستخدم عن النقر، نتوقف عن الرسم.
نقوم برسم الخط فقط عندما يكون المستخدم يسحب الماوس وليس مجرد النقر.
4. اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك وجرب الرسم باستخدام حركة الماوس داخل canvas.
هذا المشروع يوضح كيفية استخدام أحداث الماوس في JavaScript لتفاعل المستخدم وإنشاء تطبيق مفيد. يمكنك تطوير هذا المشروع عن طريق إضافة ميزات إضافية مثل اختيار لون الرسم، ومسح الرسمة، والمزيد.
مشروع شامل: إنشاء لعبة بسيطة تسمى “Catch the Mouse”
في هذا المشروع الشامل، سنقوم بإنشاء لعبة بسيطة تسمى “Catch the Mouse”، حيث يجب على المستخدم اصطياد الماوس بالنقر عليه عندما يظهر في الشاشة. سنستخدم أحداث الماوس في JavaScript لتحديد موقع الماوس والتفاعل مع نقر المستخدم.
الخطوات:
1. إنشاء هيكل HTML:
سنقوم بإنشاء عنصر div يمثل الماوس في اللعبة.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch the Mouse Game</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#mouse {
width: 50px;
height: 50px;
background-color: gray;
position: absolute;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="mouse"></div>
<script src="script.js"></script>
</body>
</html>
2. تنفيذ JavaScript:
في ملف JavaScript، سنقوم بتوليد موقع عشوائي للماوس في كل مرة يتم فيها تحميل الصفحة واستجابة لنقر المستخدم عليه.
// script.js
// احصل على عنصر الماوس
var mouse = document.getElementById('mouse');
// حساب عرض وارتفاع الشاشة
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
// توليد موقع عشوائي للماوس
function generateRandomPosition() {
var randomX = Math.random() * (screenWidth - 50); // 50 هو عرض الماوس
var randomY = Math.random() * (screenHeight - 50); // 50 هو ارتفاع الماوس
return { x: randomX, y: randomY };
}
// تحديث موقع الماوس
function updateMousePosition() {
var position = generateRandomPosition();
mouse.style.left = position.x + 'px';
mouse.style.top = position.y + 'px';
}
// عند النقر على الماوس
mouse.addEventListener('click', function() {
alert('You caught the mouse!');
updateMousePosition(); // تحديث موقع الماوس بعد اصطياده
});
// تحديث موقع الماوس عند تحميل الصفحة
updateMousePosition();
3. الشرح:
نقوم بتوليد موقع عشوائي للماوس في كل مرة يتم فيها تحميل الصفحة باستخدام الدالة generateRandomPosition()، والتي تحسب موقعًا عشوائيًا داخل الشاشة.
عند نقر المستخدم على الماوس، سيظهر تنبيه يخبره بأنه أصطاد الماوس، ثم يتم تحديث موقع الماوس بوضع عشوائي جديد باستخدام updateMousePosition().
4. اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك وحاول اصطياد الماوس بنقرة الماوس عليه.
هذا المشروع يوضح كيفية استخدام أحداث الماوس في JavaScript لتفاعل المستخدم مع الصفحة. يمكنك تطوير هذا المشروع بإضافة ميزات إضافية مثل عداد لعدد مرات اصطياد الماوس أو تصميمات أخرى للعنصر المطارد.
مشروع 2 :JavaScript Mouse Events
إنشاء لوحة تحكم لرسم الرسومات باستخدام الماوس
لنقم بإنشاء مشروع شامل آخر يستخدم أحداث الماوس في JavaScript. سنقوم بإنشاء لوحة تحكم لرسم الرسومات باستخدام الماوس، حيث يمكن للمستخدم اختيار لون وحجم الفرشاة والرسم على الشاشة.
الخطوات:
1. إنشاء هيكل HTML:
سنقوم بإنشاء عنصر canvas حيث سيتم رسم الرسومات، وعنصر input لتحديد لون الفرشاة وحجمها.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mouse Events Drawing Board</title> </head> <body> <canvas id="drawingCanvas" width="800" height="400" style="border: 1px solid black;"></canvas> <br> Color: <input type="color" id="colorPicker"> Brush Size: <input type="range" id="brushSize" min="1" max="20" value="5"> <script src="script.js"></script> </body> </html>
2. تنفيذ JavaScript:
في ملف JavaScript، سنستخدم أحداث الماوس لرسم الرسومات على اللوحة باستخدام لون وحجم الفرشاة المحددين.
3. الشرح:
نقوم بتحديد موقع بداية الرسمة عندما ينقر المستخدم على اللوحة، ونقوم برسم الخطوط عند تحريك الماوس.
نستخدم لون الفرشاة وحجمها المحددين من عناصر التحكم لتعيين الخصائص اللازمة للرسم.
نستخدم أحداث الماوس مثل mousedown و mousemove و mouseup للتحكم في تفاعل المستخدم مع اللوحة.
4. اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك، قم بتحديد لون الفرشاة وحجمها، ثم قم برسم الرسومات عن طريق نقر وسحب الماوس على اللوحة.
هذا المشروع يظهر كيفية استخدام أحداث الماوس في JavaScript لإنشاء تطبيق متكامل يسمح للمستخدم برسم الرسومات على الشاشة بسهولة. يمكنك تحسين هذا المشروع عن طريق إضافة ميزات إضافية مثل حفظ الرسومات أو مشاركتها عبر الإنترنت.
مشروع إنشاء تطبيق لوحة مفاتيح موسيقية باستخدام HTML، CSS، و JavaScript
سنقوم بإنشاء تطبيق لوحة مفاتيح موسيقية باستخدام HTML، CSS، و JavaScript. سيتيح للمستخدم تشغيل الأصوات الموسيقية باستخدام الماوس عن طريق تفاعل مع الأزرار المختلفة على الشاشة.
الخطوات:
1. إنشاء هيكل HTML:
سنقوم بإنشاء عناصر div لكل زر موسيقي، وسنقوم بتعيين الصوت المرتبط به كبيانات مخصصة (attribute).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Virtual Piano</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="key" data-note="C"></div> <div class="key" data-note="D"></div> <div class="key" data-note="E"></div> <div class="key" data-note="F"></div> <div class="key" data-note="G"></div> <div class="key" data-note="A"></div> <div class="key" data-note="B"></div> </div> <audio data-note="C" src="notes/C.wav"></audio> <audio data-note="D" src="notes/D.wav"></audio> <audio data-note="E" src="notes/E.wav"></audio> <audio data-note="F" src="notes/F.wav"></audio> <audio data-note="G" src="notes/G.wav"></audio> <audio data-note="A" src="notes/A.wav"></audio> <audio data-note="B" src="notes/B.wav"></audio> <script src="script.js"></script> </body> </html>
2. تنفيذ JavaScript:
في ملف JavaScript، سنقوم بربط أحداث الماوس بأصوات البيانو.
// script.js
// احصل على جميع الأزرار
var keys = document.querySelectorAll('.key');
// لكل زر، أضف معالج الحدث لتشغيل الصوت المناسب
keys.forEach(function(key) {
key.addEventListener('mousedown', function() {
var note = this.getAttribute('data-note');
var audio = document.querySelector('audio[data-note="' + note + '"]');
audio.currentTime = 0; // للعب الصوت مرة أخرى في حالة الضغط المتكرر
audio.play();
});
});
3. الشرح:
نقوم بتعريف عناصر div لكل زر على اللوحة الموسيقية، ونقوم بتعيين بيانات مخصصة (data-note) لكل زر لتحديد الصوت المرتبط به.
نقوم بتضمين عناصر audio لكل صوت موسيقي ونعين بيانات مخصصة لها أيضًا.
في JavaScript، نقوم بتحديد جميع الأزرار ونضيف معالج الحدث لكل زر يقوم بتشغيل الصوت المرتبط به عند النقر عليه.
4. اختبار التطبيق:
افتح صفحة HTML في متصفح الويب الخاص بك وحاول النقر على الأزرار على اللوحة الموسيقية لسماع الأصوات المختلفة.
هذا المشروع يظهر كيفية استخدام أحداث الماوس في JavaScript لإنشاء تطبيق موسيقي بسيط. يمكنك تطوير هذا المشروع عن طريق إضافة مزيد من الأصوات أو تحسين تجربة المستخدم بإضافة تأثيرات بصرية أو ميزات إضافية مثل تسجيل وتشغيل المقاطع الموسيقية.
اختبار عن احداث الفأرة في جافاسكريبت :JavaScript Mouse Events
سنقوم بإنشاء اختبارا بسيطا حول أحداث الماوس في JavaScript. الهدف من هذا الكويز هو اختبار فهمك لكيفية استخدام أحداث الماوس للتفاعل مع المستخدم في صفحة الويب.
السؤال:
ما هي الأحداث الماوسية التي يمكنك استخدامها في JavaScript؟
click
mousedown
mousemove
mouseover
mouseout
الإجابة الصحيحة: جميع الإجابات السابقة.
الشرح:
click: تحدث عندما يتم النقر على العنصر.
mousedown: تحدث عندما يتم الضغط على زر الماوس.
mousemove: تحدث عندما يتحرك الماوس على العنصر.
mouseover: تحدث عندما يتم تحريك الماوس فوق العنصر.
mouseout: تحدث عندما يتم تحريك الماوس خارج العنصر.
باستخدام هذه الأحداث، يمكنك تحديد تفاعلات المستخدم مع صفحة الويب وتنفيذ السلوك المناسب وفقًا لذلك.
السؤال 1:
ما هو الحدث الماوسي الذي يحدث عندما يتوقف المستخدم عن النقر على عنصر HTML؟
click
mouseup
mouseover
mouseout
الإجابة الصحيحة: mouseup
الشرح:
mouseup: يحدث عندما يتوقف المستخدم عن الضغط على زر الماوس.
السؤال 2:
ما هو الحدث الماوسي الذي يحدث عندما يتم تحريك الماوس فوق عنصر HTML؟
mousemove
mouseover
mousedown
mouseup
الإجابة الصحيحة: mouseover
الشرح:
mouseover: يحدث عندما يتم تحريك الماوس فوق العنصر.
السؤال 3:
ما هو الحدث الماوسي الذي يحدث عندما يتم تحريك الماوس خارج حدود عنصر HTML؟
mouseout
mouseleave
mousemove
mouseover
الإجابة الصحيحة: mouseout
الشرح:mouseout: يحدث عندما يتم تحريك الماوس خارج حدود العنصر.
السؤال 4:
ما هو الحدث الماوسي الذي يحدث عندما يتم تحريك الماوس داخل عنصر HTML؟
mousemove
mouseover
mouseenter
mousedown
الإجابة الصحيحة: mousemove
الشرح:
mousemove: يحدث عندما يتم تحريك الماوس داخل حدود العنصر.
السؤال 5:
ما هي الخاصية التي تحدد موقع الماوس الأفقي داخل نافذة المستعرض؟
clientX
pageX
screenX
offsetX
الإجابة الصحيحة: clientX
الشرح:
clientX: تُستخدم لتحديد موقع الماوس الأفقي داخل نافذة المستعرض.
السؤال 6:
ما هي الخاصية التي تحدد موقع الماوس الرأسي داخل نافذة المستعرض؟
clientY
pageY
screenY
offsetY
الإجابة الصحيحة: clientY
الشرح:
clientY: تُستخدم لتحديد موقع الماوس الرأسي داخل نافذة المستعرض.
السؤال 7:
ما هي الخاصية التي تحدد موقع الماوس الأفقي داخل صفحة الويب؟
clientX
pageX
screenX
offsetX
الإجابة الصحيحة: pageX
الشرح:
pageX: تُستخدم لتحديد موقع الماوس الأفقي داخل صفحة الويب.
السؤال 8:
ما هي الخاصية التي تحدد موقع الماوس الرأسي داخل صفحة الويب؟
clientY
pageY
screenY
offsetY
الإجابة الصحيحة: pageY
الشرح:
pageY: تُستخدم لتحديد موقع الماوس الرأسي داخل صفحة الويب..