JavaScript و HTML
هذه المقالة تشرح JavaScript و HTML۔
YouTube Video
javascript-html-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 2em;
14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15 background-color: #f7f9fc;
16 color: #333;
17 line-height: 1.6;
18 }
19
20 .container {
21 max-width: 800px;
22 margin: 0 auto;
23 padding: 1em;
24 background-color: #ffffff;
25 border: 1px solid #ccc;
26 border-radius: 10px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
28 }
29
30 h1, h2 {
31 font-size: 1.5rem;
32 color: #007bff;
33 margin-top: 0.5em;
34 margin-bottom: 0.5em;
35 border-left: 5px solid #007bff;
36 padding-left: 0.6em;
37 background-color: #e9f2ff;
38 }
39
40 button {
41 display: block;
42 margin: 1em auto;
43 padding: 0.75em 1.5em;
44 font-size: 1rem;
45 background-color: #007bff;
46 color: white;
47 border: none;
48 border-radius: 6px;
49 cursor: pointer;
50 transition: background-color 0.3s ease;
51 }
52
53 button:hover {
54 background-color: #0056b3;
55 }
56
57 #output {
58 margin-top: 1em;
59 background-color: #1e1e1e;
60 color: #0f0;
61 padding: 1em;
62 border-radius: 8px;
63 min-height: 200px;
64 font-family: Consolas, monospace;
65 font-size: 0.95rem;
66 overflow-y: auto;
67 white-space: pre-wrap;
68 }
69
70 .highlight {
71 outline: 3px solid #ffc107; /* yellow border */
72 background-color: #fff8e1; /* soft yellow background */
73 transition: background-color 0.3s ease, outline 0.3s ease;
74 }
75
76 .active {
77 background-color: #28a745; /* green background */
78 color: #fff;
79 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
80 transition: background-color 0.3s ease, box-shadow 0.3s ease;
81 }
82 </style>
83</head>
84<body>
85 <div class="container">
86 <h1>JavaScript Console</h1>
87 <button id="executeBtn">Execute</button>
88 <div id="output"></div>
89 </div>
90
91 <div class="container">
92 <h2>HTML Sample</h2>
93 <div id="content">Hello, World!</div>
94 <button id="changeText">Change Text</button>
95 </div>
96
97 <script>
98 // Override console.log to display messages in the #output element
99 (function () {
100 const originalLog = console.log;
101 console.log = function (...args) {
102 originalLog.apply(console, args);
103 const output = document.getElementById('output');
104 output.textContent += args.map(String).join(' ') + '\n';
105 };
106 })();
107
108 document.getElementById('executeBtn').addEventListener('click', () => {
109 // Prevent multiple loads
110 if (document.getElementById('externalScript')) return;
111
112 const script = document.createElement('script');
113 script.src = 'javascript-html-dom.js';
114 script.id = 'externalScript';
115 //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116 //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117 document.body.appendChild(script);
118 });
119 </script>
120</body>
121</html>كائن window في JavaScript
كائن window في JavaScript هو الكائن العام في بيئة المتصفح، ويوفر وظائف ومعلومات متعلقة بصفحة الويب ونافذة المتصفح۔ نظرًا لأن window هو النطاق العام للمتصفح، فإن كل كود JavaScript يتم تشغيله في المتصفح يصبح جزءًا من كائن window۔ يلعب كائن window دورًا مهمًا في تشغيل JavaScript في بيئة المتصفح، حيث يوفر العديد من واجهات البرمجة (APIs) والخصائص۔
الميزات الأساسية لكائن window
الخصائص
1// Get and display the document's title
2console.log(`Title: ${window.document.title}`);
3
4// Get and display the current URL
5console.log(`URL: ${window.location.href}`);
6
7// Go back to the previous page
8// Note: this will navigate back in history, so be careful when running it
9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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۔
استرجاع عناصر DOM
JavaScript يحتوي على عدد من الطرق للوصول إلى العناصر في DOM۔
document.getElementById(): يسترجع عنصرًا بواسطة خاصية الـidالخاصة به۔document.getElementsByClassName(): يسترجع العناصر باستخدام اسم الصنف (class)۔ يُرجع كائنHTMLCollection۔HTMLCollectionهو تجميع حي يعكس التغييرات في الـ DOM بشكل فوري۔document.getElementsByTagName(): يسترجع العناصر باستخدام اسم الوسم (tag)۔ يُرجع كائنHTMLCollection۔document.querySelector(): يستخدم محدد CSS لاسترجاع أول عنصر يطابق الشرط۔document.querySelectorAll(): يستخدم محدد CSS لاسترجاع جميع العناصر المطابقة۔ يُرجع كائنNodeList۔NodeListهو تجميع ثابت يحتفظ بالحالة وقت الاسترجاع ولا يعكس التغييرات اللاحقة في الـ DOM۔
مثال: getElementById وquerySelector
1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>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"
3console.log(id);تغيير نمط CSS
استخدم خاصية style لتغيير أنماط CSS۔
1content.style.color = 'red'; // Change the text color to red
2content.style.fontSize = '20px'; // Change the font size
التعامل مع الفئات (Classes)
استخدم classList لإضافة أو إزالة الفئات من العنصر۔
add(): يضيف صنفًا (class)۔remove(): يزيل صنفًا (class)۔toggle(): يضيف أو يزيل صنفًا (class) حسب وجوده۔contains(): يتحقق مما إذا كان الصنف (class) موجودًا۔
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: يصل إلى العقد الفرعية۔ يمكنك الوصول إلى جميع أنواع العقد، وليس فقط عقد العناصر مثل وسوم HTML، بل أيضًا عقد النصوص والعقد المخصصة للتعليقات۔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// Get the container element where the HTML will be inserted
2const content = document.getElementById('content');
3
4// Create the <ul> element with id="list"
5const list = document.createElement('ul');
6list.id = 'list';
7
8// Add initial list items
9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28 const newItem = document.createElement('li');
29 newItem.textContent = 'New Item';
30 list.appendChild(newItem);
31});في هذا الكود، يؤدي النقر على زر "إضافة عنصر" إلى إضافة عنصر <li> جديد إلى القائمة۔
الملخص
- تتيح لك عمليات التلاعب بـ DOM في JavaScript الحصول على العناصر وتغييرها وإنشائها وحذفها داخل مستند HTML۔
- يمكنك الحصول على العناصر باستخدام طرق مثل
getElementById()وquerySelector()۔ - استخدم
textContentأوinnerHTMLلتغيير النصوص أو شيفرة HTML، واستخدمsetAttribute()للتلاعب بالسمات۔ - استخدم
createElement()لإنشاء عناصر جديدة وremove()لحذفها۔ - يمكنك إنشاء صفحات ويب تفاعلية تستجيب لإجراءات المستخدم من خلال التعامل مع الأحداث۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔