أحداث النافذة في جافاسكريبت JavaScript Window Events
JavaScript Window Events
استكشاف أحداث النافذة في JavaScript: تحسين تفاعلات صفحات الويب وتجربة المستخدم
مقدمة إلى أحداث النافذة في JavaScript
أحداث النافذة في لغة JavaScript توفر وسيلة قوية لتفاعل الصفحات وتطبيقات الويب مع الأحداث التي تحدث داخل النافذة أو المتصفح. تسمح هذه الأحداث بتنفيذ السلوك المعين عند حدوث أحداث محددة، مما يتيح للمطورين إضافة تفاعلات ديناميكية وتحسين تجربة المستخدم.
في هذا الدرس، سنستكشف مجموعة من أحداث النافذة الأساسية في JavaScript ونتعلم كيفية استخدامها بشكل فعّال في تطوير تطبيقات الويب. سنتناول الأحداث الشائعة مثل onload، onresize، onscroll، وغيرها، وسنتعرف على دور كل منها وكيفية تنفيذ السلوك المطلوب في كل حالة.
سنتعلم أيضًا كيفية استخدام هذه الأحداث لتحسين تجربة المستخدم، مثل تحميل المزيد من المحتوى عند التمرير لأسفل الصفحة، أو إظهار رسالة ترحيبية عند تحميل الصفحة بالكامل.
عندما ننهي هذا الدرس، ستكون قادرًا على فهم أساسيات أحداث النافذة في JavaScript وكيفية استخدامها بشكل فعّال لتطوير تطبيقات الويب التفاعلية والديناميكية.
ما المقصود الأحداث المرتبطة بالنوافذ في لغة جافاسكريبت؟
تُعنى أحداث نافذة JavaScript بالأحداث التي تحدث داخل نافذة المتصفح نتيجة تفاعل المستخدم مع النافذة كأن ينقر عليها او على جزء من النافذة او على ذر في النافذة او على شريط التمرير.
تشمل هذه الأحداث مجموعة من الفعاليات التي يمكن أن تحدث أثناء تفاعل المستخدم مع صفحة الويب.
من بين الأحداث الشائعة في هذا السياق:
تحميل الصفحة: يتم تنشيط هذا الحدث عندما يتم تحميل صفحة الويب بشكل كامل.
تحميل الصور: يتم تنشيط هذا الحدث عندما يتم تحميل جميع الصور على الصفحة.
النقر: يتم تنشيط هذا الحدث عندما يقوم المستخدم بالنقر على عنصر في الصفحة.
التحريك: يتم تنشيط هذا الحدث عندما يقوم المستخدم بالتحريك داخل الصفحة.
تغيير حجم النافذة: يتم تنشيط هذا الحدث عندما يقوم المستخدم بتغيير حجم نافذة المتصفح.
وهكذا، تُساعد أحداث نافذة JavaScript على تفاعل الصفحة مع المستخدم وتمكين تنفيذ السكربتات والأوامر بناءً على تفاعلاته.
إليك مجمل لبعض الأحداث المرتبط بالنافذة في جافا سكريبت:
:JavaScript Window Events
هناك عدة أحداث مهمة تتعلق بنافذة JavaScript، وهي كالتالي:
onload: يتم تنشيط هذا الحدث عندما يتم تحميل الصفحة بشكل كامل، بما في ذلك جميع المرفقات المتعلقة بها مثل الصور والأنماط السابقة.
onunload: يتم تنشيط هذا الحدث عندما يتم تفريغ الصفحة من الذاكرة، على سبيل المثال عندما يتم إغلاق النافذة أو تحديث الصفحة.
onbeforeunload: يتم تنشيط هذا الحدث قبل تفريغ الصفحة، مما يتيح للمستخدم فرصة لإلغاء الإجراء المقرر للتفريغ.
onresize: يتم تنشيط هذا الحدث عندما يتم تغيير حجم نافذة المتصفح.
onfocus: يتم تنشيط هذا الحدث عندما تكون النافذة مركز التركيز ومستعدة لتلقي إدخال المستخدم.
onblur: يتم تنشيط هذا الحدث عندما تفقد النافذة التركيز، مثل عندما ينتقل المستخدم إلى نافذة أخرى.
onscroll: يتم تنشيط هذا الحدث عندما يتم التمرير داخل نافذة المتصفح.
onerror: يتم تنشيط هذا الحدث عندما يحدث خطأ أثناء تحميل الملفات المرتبطة بالصفحة.
onmessage: يتم تنشيط هذا الحدث عند استلام النافذة رسالة من شبكة أخرى أو إطار آخر.
هذه بعض الأحداث الرئيسية المتعلقة بنافذة JavaScript، ويمكن استخدامها لتنفيذ سلوك مخصص بناءً على تفاعلات المستخدم مع الصفحة.
خطوة بخطوة كيف نستخدم أحداث النافذة JavaScript Window Events
إليك خطوات بسيطة لشرح كيفية استخدام أحداث نافذة JavaScript:
تحديد العناصر المستهدفة: قبل كل شيء، يجب عليك تحديد العناصر في صفحتك التي ترغب في ربطها بأحداث نافذة JavaScript. يمكن أن تكون هذه العناصر هي النافذة بأكملها أو عناصر داخل النافذة مثل الصور أو الروابط أو الأزرار.
إضافة معالج الحدث: بمجرد تحديد العناصر، يجب عليك إضافة معالج الحدث الذي يقوم بالاستجابة لهذه الأحداث. يتم ذلك عادةً باستخدام الوظائف أو المعالجات الخاصة بالحدث.
ربط الحدث بالعنصر: بعد ذلك، يجب عليك ربط الحدث بالعنصر المستهدف باستخدام مثلثة الأحداث أو مخطط الحدث في JavaScript.
تنفيذ السلوك المطلوب: بمجرد تنشيط الحدث، يتم تنفيذ السلوك المطلوب بواسطة دالة الحدث المحددة.
على سبيل المثال، إذا أردت تنفيذ سلوك عندما يتم تحميل صفحتك بشكل كامل، يمكنك استخدام حدث onload كما يلي:
window.onload = function() {
// السلوك المطلوب عند تحميل الصفحة بشكل كامل
alert('تم تحميل الصفحة بشكل كامل!');
};
وهكذا، يمكنك استخدام أحداث النافذة في JavaScript لتحقيق تفاعلات مختلفة مع مستخدمي موقع الويب الخاص بك.
تطبيق 1 شامل خطوة بخطوة عن JavaScript Window Events
هذا تطبيق شامل خطوة بخطوة لاستخدام أحداث النافذة في JavaScript.
سننشئ تطبيقًا بسيطًا يعرض رسالة ترحيبية عند تحميل الصفحة بشكل كامل.
1. إعداد ملف HTML:
نبدأ بإنشاء ملف HTML ونقمبتسميته index.html، وأضف الشيفرة التالية:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Window Events Example</title> </head> <body> <h1>Welcome to my website</h1> <script src="script.js"></script> </body> </html>
2. إعداد ملف JavaScript:
ثم، نقم بإنشاء ملف JavaScript وسمّه script.js. سنضيف الكود الخاص بالتفاعل مع حدث تحميل الصفحة.
window.onload = function() {
// عندما يتم تحميل الصفحة بشكل كامل، نقمبعرض رسالة ترحيبية
alert('Welcome! This page has been fully loaded.');
};
3. تجربة التطبيق:
نقم بفتح ملف index.html في متصفح الويب الخاص بك، وسنرى عندما تتم تحميل الصفحة بشكل كامل أن رسالة ترحيبية ستظهر.
تطبيق 2 شامل عن استخدام احداث النافذة مع الشرح
سنقوم بإنشاء تطبيق بسيط يستخدم أحداث النافذة في JavaScript.
سنقوم بعرض رسالة ترحيبية عندما يتم تحميل الصفحة بشكل كامل، ونضيف بعض السمات التفاعلية مثل تغيير لون الخلفية عند التمرير داخل الصفحة.
1. إعداد ملف HTML:
نقم بإنشاء ملف HTML وسمّه index.html وأضف الكود التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Events Example</title>
<style>
body {
transition: background-color 0.5s ease;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Scroll down to see the magic!</p>
<script src="script.js"></script>
</body>
</html>
2. إعداد ملف JavaScript:
ثم، نقم بإنشاء ملف JavaScript وسمّه script.js وأضف الكود التالي:
window.onload = function() {
// عند تحميل الصفحة بشكل كامل، عرض رسالة ترحيبية
alert('Welcome! This page has been fully loaded.');
};
window.onscroll = function() {
// عند التمرير داخل الصفحة، نقمبتغيير لون الخلفية
document.body.style.backgroundColor = getRandomColor();
};
// دالة لإنشاء ألوان عشوائية
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
شرح التطبيق:
عندما تتم تحميل الصفحة بشكل كامل، ستظهر رسالة ترحيبية.
عند التمرير داخل الصفحة، سيتغير لون الخلفية بشكل عشوائي.
تجربة التطبيق:
نفتح ملف index.html في متصفح الويب الخاص بنا ونحاول التمرير داخل الصفحة.
سترى أن الخلفية تتغير بشكل عشوائي عندما تقوم بذلك. كما ستظهر رسالة ترحيبية عندما يتم تحميل الصفحة بشكل كامل.
بهذا، يتم استخدام أحداث النافذة في JavaScript لتنفيذ سلوك مخصص بناءً على تفاعلات المستخدم مع الصفحة.
تطبيق 3:إظهار رسالة عندما يحاول المستخدم مغادرة الصفحة، ونسجل عندما يتم تغيير حجم النافذة.
في هذا التطبيق، سنستخدم أحداث النافذة في JavaScript لتطبيق ميزات إضافية.
سنقوم بإظهار رسالة عندما يحاول المستخدم مغادرة الصفحة، ونسجل عندما يتم تغيير حجم النافذة.
1. إعداد ملف HTML:
نبدأ بإنشاء ملف HTML ونسمّه index.html، ثم نضف الشيفرة التالية:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Events Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Try resizing the window or leaving the page to see the events in action!</p>
<script src="script.js"></script>
</body>
</html>
2. إعداد ملف JavaScript:
ثم، نقم بإنشاء ملف JavaScript ونسمّه script.js ونضف الكود التالي:
window.onload = function() {
// عند تحميل الصفحة بشكل كامل، عرض رسالة ترحيبية
alert('Welcome! This page has been fully loaded.');
// ربط حدث تغيير حجم النافذة
window.onresize = function() {
alert('Window resized!');
};
};
window.onbeforeunload = function(event) {
// عند محاولة المستخدم مغادرة الصفحة، عرض رسالة تأكيد
var message = 'Are you sure you want to leave?';
event.returnValue = message; // لدعم متصفحات قديمة
return message;
};
شرح التطبيق:
عندما يتم تحميل الصفحة بشكل كامل، ستظهر رسالة ترحيبية.
عندما يتم تغيير حجم النافذة، ستظهر رسالة تعليمية.
عندما يحاول المستخدم مغادرة الصفحة، سيظهر مربع حوار يطلب منه التأكيد على المغادرة.
تجربة التطبيق:
نفتح ملف index.html في متصفح الويب الخاص بنا ونحاول تغيير حجم النافذة أو محاولة مغادرة الصفحة.
ستظهر رسائل التأكيد والتعليمات وفقًا للأحداث المناسبة.
هذا المثال يظهر كيف يمكن استخدام أحداث النافذة في JavaScript لتحسين تجربة المستخدم وإضافة سلوك تفاعلي إلى صفحة الويب.
تطبيق 4 :عرض رسالة ترحيبية عند تحميل الصفحة وتغيير لون الخلفية عند التمرير داخل الصفحة، ونسجل الوقت عند تغيير حجم النافذة.
في هذا التطبيق، سنقوم بإنشاء صفحة تتفاعل مع المستخدم باستخدام أحداث النافذة في JavaScript. سنقوم بعرض رسالة ترحيبية عند تحميل الصفحة، وسنقوم بتغيير لون الخلفية عند التمرير داخل الصفحة، ونسجل الوقت عند تغيير حجم النافذة.
1. إعداد ملف HTML:
نقم بإنشاء ملف HTML وسمّه index.html، وأضف الشيفرة التالية:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comprehensive Window Events Example</title>
<style>
body {
font-family: Arial, sans-serif;
transition: background-color 0.5s ease;
}
.container {
height: 2000px; /* لتمكين التمرير */
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Website</h1>
<p>Scroll down to see the background color change!</p>
</div>
<script src="script.js"></script>
</body>
</html>
2. إعداد ملف JavaScript:
ثم، نقم بإنشاء ملف JavaScript ونسمّه script.js ونضف الكود التالي:
window.onload = function() {
// عند تحميل الصفحة بشكل كامل، عرض رسالة ترحيبية
alert('Welcome! This page has been fully loaded.');
// ربط حدث التمرير داخل الصفحة
window.onscroll = function() {
// تغيير لون الخلفية عند التمرير
document.body.style.backgroundColor = getRandomColor();
};
// ربط حدث تغيير حجم النافذة
window.onresize = function() {
// تسجيل الوقت الحالي عند تغيير حجم النافذة
var currentTime = new Date().toLocaleTimeString();
console.log('Window resized at: ' + currentTime);
};
};
// دالة لإنشاء ألوان عشوائية
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
شرح التطبيق:
عندما تتم تحميل الصفحة بشكل كامل، ستظهر رسالة ترحيبية.
عند التمرير داخل الصفحة، سيتغير لون الخلفية بشكل عشوائي.
عند تغيير حجم النافذة، سيتم تسجيل الوقت الحالي في وحدة التحكم.
تجربة التطبيق:
افتح ملف index.html في متصفح الويب الخاص بك وحاول التمرير داخل الصفحة، ستظهر الخلفية تتغير بشكل عشوائي. كما يمكنك تغيير حجم النافذة ومراقبة تسجيل الوقت في وحدة التحكم.
هذا التطبيق يوضح كيف يمكن استخدام أحداث النافذة في JavaScript لتفعيل سلوك مختلف يتفاعل مع تفاعلات المستخدم مع الصفحة.
تطبيق 5:سنقوم بإنشاء صفحة ويب تتفاعل بشكل ديناميكي مع المستخدم باستخدام أحداث النافذة في JavaScript
في هذا التطبيق المتقدم، سنقوم بإنشاء صفحة ويب تتفاعل بشكل ديناميكي مع المستخدم باستخدام أحداث النافذة في JavaScript. سنقوم بإنشاء محرك بحث بسيط يتيح للمستخدم البحث عن الصور باستخدام واجهة برمجة التطبيقات (API) لـ Unsplash، وسنقوم بتحديث النتائج بناءً على تفاعلات المستخدم مع الصفحة.
1. إعداد ملف HTML:
نقم بإنشاء ملف HTML وسمّه index.html، وأضف الشيفرة التالية:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Window Events Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
#search-container {
text-align: center;
margin-top: 20px;
}
#search-input {
padding: 10px;
width: 300px;
font-size: 16px;
}
#search-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#results-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.result-item {
margin: 10px;
}
.result-item img {
max-width: 300px;
max-height: 200px;
}
</style>
</head>
<body>
<div id="search-container">
<input type="text" id="search-input" placeholder="Search for images...">
<button id="search-button">Search</button>
</div>
<div id="results-container"></div>
<script src="script.js"></script>
</body>
</html>
2. إعداد ملف JavaScript:
ثم، نقم بإنشاء ملف JavaScript وسمّه script.js وأضف الكود التالي:
window.onload = function() {
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const resultsContainer = document.getElementById('results-container');
// عند النقر على زر البحث
searchButton.onclick = function() {
const query = searchInput.value.trim();
if (query !== '') {
searchImages(query);
}
};
// البحث عن الصور باستخدام واجهة برمجة التطبيقات (API) لـ Unsplash
function searchImages(query) {
const apiKey = 'YOUR_UNSPLASH_API_KEY';
const apiUrl = `https://api.unsplash.com/search/photos?query=${query}&client_id=${apiKey}`;
// استدعاء API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
displayResults(data.results);
})
.catch(error => console.log(error));
}
// عرض نتائج البحث
function displayResults(images) {
resultsContainer.innerHTML = ''; // مسح النتائج السابقة
images.forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image.urls.small;
imgElement.alt = image.alt_description;
const itemDiv = document.createElement('div');
itemDiv.classList.add('result-item');
itemDiv.appendChild(imgElement);
resultsContainer.appendChild(itemDiv);
});
}
};
شرح التطبيق:
المستخدم يدخل كلمة البحث في مربع البحث وينقر على زر “Search”.
يتم إجراء طلب لواجهة برمجة التطبيقات (API) لـ Unsplash باستخدام كلمة البحث المدخلة.
تُعرض الصور النتيجة في الصفحة بناءً على البيانات التي تم استردادها من API.
التجربة:
نقم بتحديد كلمة بحث، على سبيل المثال “nature”، ثم اضغط على زر البحث.
ستظهر الصور المتعلقة بالطبيعة في الصفحة.
هذا التطبيق يظهر كيفية استخدام أحداث النافذة في JavaScript لتفعيل تفاعلات متقدمة مع المستخدم، مثل البحث عبر الواجهة البرمجية لـ Unsplash لعرض الصور. يمكنك استبدال “YOUR_UNSPLASH_API_KEY” بمفتاح API الخاص بك من Unsplash للحصول على الوصول إلى البيانات.
تطبيق 6 عن JavaScript Window Events:سنقوم بتحديد حالة تحميل الصفحة وتغيير لون الخلفية عندما يتم التمرير داخل الصفحة.
في هذا التطبيق، سنقوم بإنشاء صفحة ويب بسيطة تستجيب لبعض أحداث نافذة JavaScript.
سنقوم بتحديد حالة تحميل الصفحة وتغيير لون الخلفية عندما يتم التمرير داخل الصفحة.
1. إعداد ملف HTML:
نقم بإنشاء ملف HTML وسمّه index.html، وأضف الشيفرة التالية:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Window Events Example</title>
<style>
body {
font-family: Arial, sans-serif;
transition: background-color 0.5s ease;
}
#content {
height: 1500px; /* لتمكين التمرير */
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<div id="content">
<!-- هذا العنصر يتيح لنا التمرير -->
</div>
<script src="script.js"></script>
</body>
</html>
2. إعداد ملف JavaScript:
ثم، نقم بإنشاء ملف JavaScript وسمّه script.js وأضف الكود التالي:
window.onload = function() {
// عرض رسالة ترحيبية عند تحميل الصفحة
alert('Welcome! This page has been fully loaded.');
// تغيير لون الخلفية عند التمرير داخل الصفحة
window.onscroll = function() {
document.body.style.backgroundColor = getRandomColor();
};
};
// دالة لإنشاء ألوان عشوائية
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
شرح التطبيق:
عندما يتم تحميل الصفحة بشكل كامل، ستظهر رسالة ترحيبية للمستخدم.
عند التمرير داخل الصفحة، سيتغير لون الخلفية بشكل عشوائي.
التجربة:
نقم بفتح ملف index.html في متصفح الويب الخاص بك.
انتقل لأسفل الصفحة باستخدام شريط التمرير.
ستلاحظ أن لون الخلفية يتغير بشكل عشوائي أثناء التمرير.
هذا التطبيق يوضح كيف يمكن استخدام أحداث نافذة JavaScript لإضافة تفاعلات مثيرة للاهتمام إلى صفحات الويب.
مشروع شامل مع الشرح عن استخدام:JavaScript Window Events
لنقم بإنشاء مشروع شامل يستخدم أحداث نافذة JavaScript بالإضافة إلى استخدام بعض العناصر الأخرى مثل HTML وCSS.
سنقوم بإنشاء صفحة ويب بسيطة تحتوي على نص وصورة، وسنضيف تفاعلات باستخدام أحداث النافذة.
1. إعداد ملف HTML:
نقم بإنشاء ملف HTML وسمّه index.html، وأضف الشيفرة التالية:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Window Events Project</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Welcome to My Website</h1> <p>This is a simple webpage with JavaScript window events.</p> <img src="placeholder.jpg" alt="Placeholder Image" id="main-image"> </div> <script src="script.js"></script> </body> </html>
2. إعداد ملف CSS:
نقم بإنشاء ملف CSS وسمّه styles.css، وأضف الشيفرة التالية لتنسيق الصفحة:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
img {
max-width: 100%;
height: auto;
margin-top: 20px;
}
3. إعداد ملف JavaScript:
ثم، نقم بإنشاء ملف JavaScript وسمّه script.js، وأضف الشيفرة التالية:
window.onload = function() {
// عرض رسالة ترحيبية عند تحميل الصفحة بشكل كامل
alert('Welcome! This page has been fully loaded.');
// تغيير لون خلفية الصفحة عند التمرير
window.onscroll = function() {
document.body.style.backgroundColor = getRandomColor();
};
};
// دالة لإنشاء ألوان عشوائية
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
شرح التطبيق:
تحتوي صفحتنا على عنصر div بفئة .container يحتوي على عناصر h1 و p لعرض نص ترحيبي.
يتم استخدام عنصر img لعرض صورة مؤقتة.
في ملف الـ CSS، قمنا بتنسيق الصفحة لجعلها تبدو جيدة.
عند تحميل الصفحة بشكل كامل، ستظهر رسالة ترحيبية.
عند التمرير داخل الصفحة، سيتغير لون خلفية الصفحة بشكل عشوائي.
التجربة:
نقم بفتح ملف index.html في متصفح الويب.
نقم بالتمرير داخل الصفحة لأسفل.
ستلاحظ تغيير لون خلفية الصفحة بشكل عشوائي أثناء التمرير.
بهذا، يتم توضيح كيفية استخدام أحداث النافذة في JavaScript لتحسين تجربة المستخدم وتوفير تفاعلات مثيرة للاهتمام على صفحات الويب.
مشروع أخر شامل مع الشرح خطوة بخطوة عن JavaScript Window Events
إنشاء مشروع شامل يستخدم أحداث نافذة JavaScript، فلننقم بذلك بخطوات متسلسلة وشرح لكل خطوة:
1. الخطوة الأولى: إعداد ملف HTML
أولاً، سنقوم بإنشاء ملف HTML لتحديد هيكل الصفحة وتضمين ملفات CSS و JavaScript. نقمبفتح محرر النصوص المفضل لديك وأنشئ ملفًا جديدًا بالاسم index.html. ثم نقمبإضافة الكود التالي:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Window Events Project</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Welcome to My Website</h1> <p>This is a simple webpage with JavaScript window events.</p> <img src="placeholder.jpg" alt="Placeholder Image" id="main-image"> </div> <script src="script.js"></script> </body> </html>
2. الخطوة الثانية: إعداد ملف CSS
الآن، سنقوم بإنشاء ملف CSS لتنسيق صفحتنا. نقمبإنشاء ملف جديد بالاسم styles.css وأضف الشكل الذي تفضله. هذا هو مثال بسيط:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
img {
max-width: 100%;
height: auto;
margin-top: 20px;
}
3. الخطوة الثالثة: إعداد ملف JavaScript
الآن، سنقوم بإنشاء ملف JavaScript لإضافة تفاعلات إلى صفحتنا. نقمبإنشاء ملف جديد بالاسم script.js وأضف الكود التالي:
window.onload = function() {
// عرض رسالة ترحيبية عند تحميل الصفحة بشكل كامل
alert('Welcome! This page has been fully loaded.');
// تغيير لون خلفية الصفحة عند التمرير
window.onscroll = function() {
document.body.style.backgroundColor = getRandomColor();
};
};
// دالة لإنشاء ألوان عشوائية
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
4. الخطوة الرابعة: الملفات المرفقة
تأكد من وجود ملفات placeholder.jpg، و styles.css و script.js في نفس المجلد مع ملف HTML.
يجب أن يكون لديك صورة بالاسم placeholder.jpg ليتم عرضها في الصفحة.
شرح التطبيق:
عند تحميل الصفحة بشكل كامل، ستظهر رسالة ترحيبية للمستخدم.
عند التمرير داخل الصفحة، سيتغير لون خلفية الصفحة بشكل عشوائي.
التجربة:
نقم بفتح ملف index.html في متصفح الويب الخاص بك.
نقم بالتمرير داخل الصفحة لأسفل.
ستلاحظ تغيير لون خلفية الصفحة بشكل عشوائي أثناء التمرير.
هذا هو مشروعك الشامل الذي يستخدم أحداث نافذة JavaScript لتوفير تفاعلات بسيطة ولكن مثيرة للاهتمام على صفحة الويب الخاصة بك. يمكنك دائمًا تطويره بمزيد من التفاعلات أو التصميم حسب احتياجاتك.
مشروع متقدم مع الشرح عن :JavaScript Window Events
في هذا المشروع المتقدم، سنقوم بإنشاء موقع ويب يتفاعل بشكل ديناميكي مع أحداث النافذة في JavaScript.
سنقوم بإنشاء محرك بحث يتيح للمستخدمين البحث عن الصور وعرضها، كما سنستخدم أحداث النافذة لتحسين تجربة المستخدم.
الخطوة 1: إعداد ملف HTML
نقم بإنشاء ملف HTML وسمّه index.html. في هذا الملف، سنقوم بتحديد هيكل الصفحة وتضمين ملفات CSS و JavaScript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Advanced Window Events Project</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Welcome to My Image Search Engine</h1> <input type="text" id="search-input" placeholder="Search for images..."> <button id="search-button">Search</button> <div id="results-container"></div> </div> <script src="script.js"></script> </body> </html>
الخطوة 2: إعداد ملف CSS
نقمبإنشاء ملف CSS وسمّه styles.css لتنسيق صفحتك.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
margin-right: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
}
#results-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.result-item {
margin: 10px;
}
.result-item img {
max-width: 300px;
max-height: 200px;
}
الخطوة 3: إعداد ملف JavaScript
نقم بإنشاء ملف JavaScript وسمّه script.js وأضف الكود التالي.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
margin-right: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
}
#results-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.result-item {
margin: 10px;
}
.result-item img {
max-width: 300px;
max-height: 200px;
}
شرح المشروع:
المستخدمون يستطيعون البحث عن الصور باستخدام مربع البحث والضغط على زر “Search”.
يتم البحث عن الصور باستخدام واجهة برمجة التطبيقات (API) لـ Unsplash.
يتم عرض الصور المتعلقة بكلمة البحث في الصفحة.
التجربة:
نقم بفتح ملف index.html في متصفح الويب الخاص بك.
أدخل كلمة بحث في مربع البحث واضغط على زر “Search”.
ستظهر الصور المتعلقة بكلمة البحث في الصفحة.
هذا المشروع يستخدم أحداث نافذة JavaScript لتحسين تجربة المستخدم وتوفير واجهة بحث بسيطة وفعالة. نقمبتعديل المشروع حسب احتياجاتك، مثل إضافة تأثيرات أو تحسينات تصميمية.
هنا بعض التحسينات التي يمكنك إضافتها للمشروع
تحسين واجهة المستخدم:
نقم بتحسين تصميم وتنسيق الموقع باستخدام CSS لجعله أكثر جاذبية وسهولة استخدام.
أضف تأثيرات تحويلية CSS مثل التحويلات والتظليل لتحسين تجربة المستخدم.
تحسين البحث:
إضافة تنبيهات أو رسائل خطأ عندما يتم ترك مربع البحث فارغًا قبل البحث.
تحسين عملية البحث عن طريق إضافة ميزة الضغط على مفتاح Enter لبدء البحث.
تحسين الأداء:
استخدم تقنيات التحميل الكسلي (Lazy Loading) لتحميل الصور تدريجياً بدلاً من تحميلها جميعًا دفعة واحدة.
نقمبتخزين الصور المسترجعة مؤقتًا في الذاكرة المخبأة (Cache) لتقليل عدد الطلبات إلى واجهة برمجة التطبيقات (API).
إضافة ميزات جديدة:
أضف إمكانية عرض المزيد من النتائج عند التمرير لأسفل (Infinite Scrolling).
إضافة خيارات تصفية للنتائج مثل حجم الصور أو تاريخ التحديث.
توفير خيار لحفظ الصور المفضلة أو مشاركتها عبر وسائل التواصل الاجتماعي.
تحسينات تقنية:
استخدام مكتبة JavaScript مثل Vue.js أو React.js لتطوير التطبيق بشكل أكثر تنظيمًا وسهولة إدارة.
استخدم مفهوم التكوين (Webpack) لتجميع وتحسين ملفات CSS و JavaScript.
تحسين أداء الواجهة الخلفية للموقع عن طريق تقليل حجم الصور أو تخزينها بتنسيقات مضغوطة مثل WebP.
إضافة ميزات أمان:
نقمبتطبيق مراقبة إدخال المستخدم والتحقق من صحة البيانات المدخلة لتجنب الثغرات الأمنية مثل حقن الشفرة (Code Injection).
استخدم بروتوكول HTTPS لتشفير الاتصال بين المتصفح والخادم وتحسين أمان البيانات.
استكشاف ميزات جديدة:
نقم بإضافة ميزات جديدة مثل البحث باللغة الطبيعية (Natural Language Search) أو تعريف الصور (Image Recognition) باستخدام خدمات AI.
استكشاف تقنيات جديدة مثل Progressive Web Apps (PWA) لتحسين تجربة المستخدم على الأجهزة المحمولة.
باختيار التحسينات التي تناسب مشروعك واحتياجات مستخدميك، يمكنك تطوير المشروع ليصبح تجربة متميزة وشاملة للمستخدمين.
أكواد المشروع:
حسنًا، سأقدم لك الكود الكامل لمشروع محرك البحث عن الصور باستخدام JavaScript و Unsplash API مع بعض التحسينات. قبل البدء، تأكد من الحصول على مفتاح API الخاص بك من موقع Unsplash.
1. ملف HTML (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Search Engine</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Welcome to My Image Search Engine</h1> <input type="text" id="search-input" placeholder="Search for images..."> <button id="search-button">Search</button> <div id="results-container"></div> </div> <script src="script.js"></script> </body> </html>
2. ملف CSS (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
margin-right: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
}
#results-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.result-item {
margin: 10px;
}
.result-item img {
max-width: 300px;
max-height: 200px;
}
3. ملف JavaScript (script.js):
window.onload = function() {
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const resultsContainer = document.getElementById('results-container');
let page = 1;
searchButton.onclick = function() {
const query = searchInput.value.trim();
if (query !== '') {
searchImages(query);
}
};
// إضافة تحسين: البحث عن الصور عند الضغط على مفتاح Enter
searchInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
const query = searchInput.value.trim();
if (query !== '') {
searchImages(query);
}
}
});
function searchImages(query) {
const apiKey = 'YOUR_UNSPLASH_API_KEY';
const apiUrl = `https://api.unsplash.com/search/photos?query=${query}&client_id=${apiKey}&page=${page}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
displayResults(data.results);
page++;
})
.catch(error => console.log(error));
}
function displayResults(images) {
images.forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image.urls.small;
imgElement.alt = image.alt_description;
const itemDiv = document.createElement('div');
itemDiv.classList.add('result-item');
itemDiv.appendChild(imgElement);
resultsContainer.appendChild(itemDiv);
});
}
// إضافة تحسين: التمرير لأسفل الصفحة لتحميل المزيد من الصور
window.onscroll = function() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
const query = searchInput.value.trim();
if (query !== '') {
searchImages(query);
}
}
};
};
يرجى استبدال YOUR_UNSPLASH_API_KEY بمفتاح API الخاص بك من Unsplash.
هذا الكود يتضمن تحسينات مثل البحث عن الصور عند الضغط على مفتاح Enter وتحميل المزيد من الصور عند التمرير لأسفل الصفحة. يمكنك تحسين المشروع بمزيد من التحسينات وفقًا لاحتياجاتك ومتطلبات مشروعك.
اختبار حول الأحداث المرتبطة بالنافذة في جافاسكريبت مع الشرح
إليك بعض الأسئلة التي يمكن أن تشملها الاختبار لاختبار مفهومك لأحداث نافذة JavaScript:
السؤال 1:
ما هي أحداث النافذة في JavaScript؟ وأعطِ مثالًا على كل حدث.
السؤال 2:
ما الذي يقوم به حدث onload في JavaScript؟ ومتى يتم تنشيطه؟
السؤال 3:
ما هو دور حدث onresize في JavaScript؟ ومتى يتم تنشيطه؟
السؤال 4:
ما هو الاختلاف بين حدث onscroll وحدث onresize في JavaScript؟
السؤال 5:
متى يتم تنشيط حدث onunload في JavaScript؟ وما هو دوره؟
السؤال 6:
ما هي أهمية استخدام أحداث النافذة في تطبيقات الويب؟
السؤال 7:
ما الذي يفعله الكود التالي؟
window.onload = function() {
alert('Welcome to my website!');
};
السؤال 8:
كيف يمكن استخدام حدث onscroll لتحسين تجربة المستخدم في صفحة الويب؟
السؤال 9:
ما هي الميزة من استخدام حدث onbeforeunload في JavaScript؟ ومتى يتم تنشيطه؟
السؤال 10:
ما هي أهمية تطبيق تقنيات التحميل الكسلي (Lazy Loading) باستخدام أحداث النافذة في صفحات الويب؟
السؤال 11:
متى يكون مناسبًا استخدام حدث onerror في JavaScript؟ وما هي وظيفته؟