إليك بعض الأمثلة البسيطة لاستخدام JavaScript داخل صفحات HTML :
1. الطريقة البسيطة لطباعة نص على واجهة المستخدم:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>JavaScript Example</h1>
<p id="output"></p>
<script>
// تحديد عنصر HTML بواسطة id وطباعة النص
document.getElementById("output").innerHTML = "Hello, JavaScript!";
</script>
</body>
</html>
2. حساب العمر باستخدام تاريخ الميلاد:
<!DOCTYPE html>
<html>
<head>
<title>Calculate Age</title>
</head>
<body>
<h1>Calculate Age</h1>
<input type="date" id="birthdate">
<button onclick="calculateAge()">Calculate</button>
<p id="age"></p>
<script>
function calculateAge() {
var birthdate = document.getElementById("birthdate").value,
today = new Date(),
age = today.getFullYear() - new Date(birthdate).getFullYear();
document.getElementById("age").innerHTML = "Your age is: " + age;
}
</script>
</body>
</html>
3. إظهار نافذة تاكيد عند النقر علي زر:
<!DOCTYPE html>
<html>
<head>
<title>Confirmation Box</title>
</head>
<body>
<h1>Confirmation Box</h1>
<button onclick="showConfirmation()">Click me</button>
<script>
function showConfirmation() {
var result = confirm("Are you sure?");
if (result) {
alert("You clicked OK!");
} else {
alert("You clicked Cancel!");
}
}
</script>
</body>
</html>
يمكنك تجربة هذه الأمثلة عبر تشغيلها في محرر HTML أو المتصفح مثل google chrome. إليك مزيدًا من الأمثلة على استخدام JavaScript :
4. إنشاء قائمة ديناميكية:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic List</title>
</head>
<body>
<h1>Dynamic List</h1>
<ul id="list"></ul>
<script>
// البيانات
var fruits = ["Apple", "Orange", "Banana", "Grapes"];
// عرض البيانات كقائمة
var list = document.getElementById("list");
fruits.forEach(function(fruit) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(fruit));
list.appendChild(li);
});
</script>
</body>
</html>
5. عرض الوقت الحالي في الوقت الفعلي:
<!DOCTYPE html>
<html>
<head>
<title>Real-time Clock</title>
</head>
<body>
<h1>Real-time Clock</h1>
<p id="clock"></p>
<script>
function updateTime() {
var now = new Date();
var time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
document.getElementById("clock").innerHTML = "Current time: " + time;
}
// تحديث الوقت كل ثانية
setInterval(updateTime, 1000);
</script>
</body>
</html>
6. تغيير لون الخلفية باستخدام أزرار
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
</head>
<body>
<h1>Change Background Color</h1>
<button onclick="changeColor('red')">Red</button>
<button onclick="changeColor('green')">Green</button>
<button onclick="changeColor('blue')">Blue</button>
<script>
function changeColor(color) {
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>
جرّب تشغيل هذه الأمثلة باستخدام visual studio code لتفهم كيف يمكن استخدام JavaScript لتحسين وظائف صفحات الويب.
ملحوظة : يمكنك تغيير العلامات double”” بالعلامات single ” في حاله اي من الامثلة لا تعمل معك
امثلة متقدمة JavaScript
Promises و Async/Await:
- تستخدام لإدارة العمليات الغير متزامنة بشكل فعّال، مما يسمح بتنظيم الشفرة وتجنب الرموز المتشعبة (Callback Hell).
function getDataWithPromise() {
return new Promise((resolve, reject) => {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok.');
}
return response.json();
})
.then(data => {
resolve(data);
})
.catch(error => {
reject(error);
});
});
}
// استخدام الوعد
getDataWithPromise()
.then(data => {
console.log('البيانات:', data);
})
.catch(error => {
console.error('حدث خطأ:', error);
});
ES6 Destructuring:
- استخدام تفكيك الكائنات والمصفوفات لتعيين القيم بشكل مباشر، مما يجعل الشفرة أكثر قراءة وفعالية.
// Destructuring objects
const { firstName, lastName } = person;
// Destructuring arrays
const [first, second, , fourth] = myArray;
Higher Order Functions:
- استخدام الدوال العليا لتمريرها كمعلمة أو إرجاعها من أخرى، مما يُمكّن التعامل معها بشكل ديناميكي.
function higherOrderFunction(callback) {
// Perform some operations
callback();
}
function myCallback() {
console.log('This is a callback function');
}
higherOrderFunction(myCallback);
التعامل مع DOM بشكل ديناميكي:
- استخدام JavaScript لتحكم في العناصر والمحتوى داخل صفحة الويب بشكل ديناميكي.
const element = document.getElementById('myElement');
element.style.color = 'red';
function createNewElement() {
const newElement = document.createElement('div');
newElement.textContent = 'New content';
document.body.appendChild(newElement);
}
Generators:
- تستخدام لإنشاء دوال قابلة للإيقاف وإنتاج قيم على مراحل. مثال:
function* generator() {
yield 1;
yield 2;
yield 3;
}
const gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
Proxy Objects:
- تستخدام لإضافة سلوك مخصص عند الوصول إلى الخصائص أو التعامل مع الكائنات او يمكنك الرجوع الي JavaScript مثـــــــــــــال :
const handler = {
get: function(target, prop) {
return prop in target ? target[prop] : 'Property does not exist';
}
};
const proxyObj = new Proxy({ name: 'John' }, handler);
console.log(proxyObj.name); // John
console.log(proxyObj.age); // Property does not exist
Asynchronous Iteration:
- تستخدام لتمثيل العناصر بشكل متسلسل عبر الوقت. مثال:
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const asyncIterable = {
async *[Symbol.asyncIterator]() {
for (let i = 1; i <= 5; i++) {
await delay(1000);
yield i;
}
}
};
(async () => {
for await (const num of asyncIterable) {
console.log(num);
}
})();
WebSockets:
- تستخدام لإنشاء اتصال ثنائي الاتجاه بين العميل والخادم لتبادل البيانات في الوقت الفعلي.
const socket = new WebSocket('wss://example.com');
socket.addEventListener('open', () => {
console.log('Connected to server');
});
socket.addEventListener('message', event => {
console.log('Received message:', event.data);
});
socket.send('Hello Server');
هذه أمثلة متقدمة في JavaScript تُظهر الاستخدام الفعّال والقوي لبعض الميزات المتقدمة في اللغة. تلك الأدوات والمفاهيم تساعد على كتابة شفرة أكثر تنظيمًا وفعالية وديناميكية في تطوير تطبيقات الويب.
Sharing to
Facebook
Twitter
LinkedIn
