Articles
مقدمة إلى JavaScript
JavaScript و HTML

JavaScript و HTML

هذه المقالة تشرح JavaScript و HTML۔

YouTube Video

كائن window في JavaScript

كائن window في JavaScript هو الكائن العام في بيئة المتصفح، ويوفر وظائف ومعلومات متعلقة بصفحة الويب ونافذة المتصفح۔ نظرًا لأن window هو النطاق العام للمتصفح، فإن كل كود JavaScript يتم تشغيله في المتصفح يصبح جزءًا من كائن window۔ يلعب كائن window دورًا مهمًا في تشغيل JavaScript في بيئة المتصفح، حيث يوفر العديد من واجهات البرمجة (APIs) والخصائص۔

الميزات الأساسية لكائن window

الخصائص 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: للوصول إلى مستند HTML الحالي۔
  • window.location: لإدارة عنوان URL الحالي والتنقل في المتصفح۔
  • window.history: للوصول إلى معلومات تاريخ التصفح والسماح بالتنقل للأمام والخلف۔
  • window.navigator: يقدم معلومات عن المتصفح والجهاز۔
  • window.innerWidth / window.innerHeight: للحصول على عرض وارتفاع نافذة العرض۔

الطرق 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert(): يعرض مربع حوار تنبيه۔
  • window.confirm(): يعرض مربع حوار يطلب تأكيد المستخدم ويرجع نتيجة موافق أو إلغاء۔
  • window.prompt(): يعرض مربع حوار يطلب إدخال المستخدم ويسترد القيمة المدخلة۔
  • window.open(): يفتح نافذة أو تبويبة جديدة۔
  • window.setTimeout() / window.setInterval(): يضبط مؤقتًا لتشغيل وظيفة بعد وقت محدد أو على فترات منتظمة۔

التعامل مع الأحداث 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload: حدث يتم تنفيذه عند اكتمال تحميل الصفحة بالكامل۔
  • window.onresize: حدث يتم تنفيذه عند تغيّر حجم النافذة۔
  • window.onscroll: حدث يتم تنفيذه عند تمرير المستخدم للصفحة۔

الدور كمتغير عالمي 

1var myVar = 10;
2console.log(window.myVar); // 10
  • كائن window يحتفظ بالمتغيرات العالمية والوظائف۔ بمعنى آخر، المتغيرات والوظائف المعلنة تصبح تلقائيًا خصائص لـ window۔

التعامل مع DOM في JavaScript

يُستخدم التعامل مع DOM (نموذج كائن المستند) في JavaScript للتفاعل ديناميكيًا مع العناصر في صفحة الويب۔ يمثل DOM بنية مستند HTML كشجرة، والتي يمكن تغييرها باستخدام JavaScript لتعديل البنية والتحكم في عرض الصفحة۔

أساسيات DOM

يتعامل DOM مع HTML الخاص بصفحة ويب ككائنات، مما يسمح بالوصول إلى العناصر والسمات وتعديلها۔ استخدم كائن document للوصول إلى مستند HTML۔

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

استرجاع عناصر DOM

JavaScript يحتوي على عدد من الطرق للوصول إلى العناصر في DOM۔

  • document.getElementById(): الحصول على عنصر بواسطة خاصية id
  • document.getElementsByClassName(): الحصول على العناصر بواسطة اسم الفئة (HTMLCollection)
  • document.getElementsByTagName(): الحصول على العناصر بواسطة اسم العلامة (HTMLCollection)
  • document.querySelector(): الحصول على أول عنصر مطابق باستخدام محدد CSS
  • document.querySelectorAll(): الحصول على جميع العناصر المطابقة باستخدام محدد CSS (NodeList)

مثال: getElementById وquerySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

التعامل مع DOM

يمكن تنفيذ عمليات متنوعة على العناصر التي تم الحصول عليها۔

تغيير النص

لتغيير نص عنصر ما، استخدم textContent أو innerHTML۔

  • textContent: الحصول على محتوى النص أو تغييره لعنصر۔ لا يتم تفسير علامات HTML۔
  • innerHTML: الحصول على محتوى HTML أو تغييره لعنصر۔ يتم معالجة النصوص التي تحتوي على علامات HTML أيضًا۔
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

تغيير السمات

استخدم setAttribute() وgetAttribute() لتغيير سمات العنصر۔

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

تغيير نمط CSS

استخدم خاصية style لتغيير أنماط CSS۔

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

التعامل مع الفئات (Classes)

استخدم classList لإضافة أو إزالة الفئات من العنصر۔

  • add(): إضافة فئة
  • remove(): إزالة فئة
  • toggle(): إضافة أو إزالة فئة بناءً على وجودها
  • contains(): التحقق إذا كانت الفئة موجودة
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

إنشاء وحذف عناصر DOM

إنشاء عناصر جديدة

استخدم document.createElement() لإنشاء عنصر جديد وإضافته إلى DOM۔

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

حذف العناصر

استخدم طريقة remove() لحذف عنصر۔

1newDiv.remove();  // Remove the created element

إضافة الأحداث

كجزء من التعامل مع DOM، يمكنك إضافة معالجات أحداث تستجيب لتفاعلات المستخدم۔ استخدم addEventListener() للتعامل مع الأحداث مثل النقرات وتفاعلات لوحة المفاتيح۔

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

في هذا المثال، يؤدي النقر على الزر إلى تغيير نص العنصر #content۔

التنقل في شجرة DOM

يمكنك التنقل في DOM للوصول إلى العناصر الأصلية أو الشقيقة۔

  • parentNode: الوصول إلى العقدة الأصلية
  • childNodes: الوصول إلى العقد الفرعية (من جميع الأنواع)
  • firstChild / lastChild: العنصر الفرعي الأول/الأخير
  • nextSibling / previousSibling: العنصر الشقيق التالي/السابق
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

مثال: إضافة عنصر جديد إلى قائمة

إليك مثال على إضافة عنصر جديد إلى قائمة۔

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

في هذا الكود، يؤدي النقر على زر "إضافة عنصر" إلى إضافة عنصر <li> جديد إلى القائمة۔

الملخص

  • تتيح لك عمليات التلاعب بـ DOM في JavaScript الحصول على العناصر وتغييرها وإنشائها وحذفها داخل مستند HTML۔
  • يمكنك الحصول على العناصر باستخدام طرق مثل getElementById() وquerySelector()۔
  • استخدم textContent أو innerHTML لتغيير النصوص أو شيفرة HTML، واستخدم setAttribute() للتلاعب بالسمات۔
  • استخدم createElement() لإنشاء عناصر جديدة وremove() لحذفها۔
  • يمكنك إنشاء صفحات ويب تفاعلية تستجيب لإجراءات المستخدم من خلال التعامل مع الأحداث۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

دوال المولدات في JavaScript