طرق عرض البيانات في جافا سكريبت

How to Display Data in JavaScript: Methods and Examples

مقدمة إلى عرض البيانات في JavaScript
في عالم تطوير الويب، يلعب JavaScript دورًا حيويًا في تفاعل المستخدم مع صفحات الويب. أحد أهم جوانب استخدام JavaScript هو القدرة على عرض البيانات بطرق مختلفة على واجهة المستخدم. يمكننا استخدام مجموعة من الأساليب لتحديث وعرض المعلومات بشكل ديناميكي، مما يسهم في جعل تجربة المستخدم أكثر تفاعلية.

هذا الدرس يستكشف عدة أساليب شائعة لعرض البيانات في JavaScript، بدءًا من استخدام ()document.write وصولاً إلى استخدام ()createElement و ()appendChild لإنشاء وتحديث عناصر HTML ديناميكية. سنتعلم كيفية استخدام innerHTML لتحديث محتوى العناصر واستخدام ()console.log لتسجيل البيانات في وحدة تحكم المتصفح.

من خلال فهم هذه الأساليب والتدرب عليها، ستكتسب المهارات اللازمة لجعل صفحات الويب الخاصة بك أكثر ديناميكية وجاذبية للمستخدمين.

في لغة البرمجة JavaScript، هناك عدة طرق لعرض البيانات على واجهة المستخدم. يمكن استخدام مجموعة متنوعة من الأساليب والأمثلة لتحقيق ذلك. فيما يلي شرح لبعض الأساليب الشائعة وأمثلة على كيفية عرض البيانات في JavaScript:

1. استخدام :()document.write

يمكن استخدام () document.write لكتابة نص مباشرة إلى الصفحة HTML:

document.write("مرحبًا بك في موقعنا!");

2. استخدام innerHTML

يمكنك استخدام innerHTML لتحديث محتوى العنصر في صفحة HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عرض البيانات</title>
</head>
<body>
<div id="myElement"></div>
<script>
var data = "مرحبًا بك في موقعنا!";
document.getElementById("myElement").innerHTML = data;
</script>
</body>
</html>

3. استخدام ()console.log

يمكنك استخدام ()console.log لطباعة البيانات في وحدة تحكم المتصفح:

var data = "مرحبًا بك في موقعنا!";
console.log(data);

4. استخدام ()alert

يمكنك استخدام ()alert لعرض نافذة تنبيه تحمل البيانات:

var data = "مرحبًا بك في موقعنا!";
alert(data);

5. استخدام ()document.createElement و ()appendChild

يمكنك استخدام هذه الطريقة لإنشاء عناصر HTML ديناميكية وإضافتها إلى الصفحة:

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عرض البيانات</title>
</head>
<body>
<div id="container"></div>
<script>
var data = "مرحبًا بك في موقعنا!";
// إنشاء عنصر فقري (p)
var paragraph = document.createElement("p");
// تعيين نص العنصر
paragraph.textContent = data;
// إضافة العنصر إلى العنصر الأب (container)
document.getElementById("container").appendChild(paragraph);
</script>
</body>
</html>

هذه هي بعض الأساليب الشائعة لعرض البيانات في JavaScript. يمكنك اختيار الأسلوب الذي يتناسب أكثر مع متطلبات مشروعك ونوع البيانات التي تريد عرضها.

مثال شامل كل الطرق

ها هو مثال يشمل استخدام جميع الطرق المذكورة لعرض البيانات في JavaScript:

<!DOCTYPE html>

< dir=rtl html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عرض البيانات</title>
</head>
<body>
<!-- Method 1: document.write() -->
<script>
document.write("<p>مرحبًا بك في موقعنا! (Method 1)</p>");
</script>
<!-- Method 2: innerHTML -->
<div id="method2"></div>
<script>
var data2 = "مرحبًا بك في موقعنا! (Method 2)";
document.getElementById("method2").innerHTML = data2;
</script>
<!-- Method 3: console.log() -->
<script>
var data3 = "مرحبًا بك في موقعنا! (Method 3)";
console.log(data3);
</script>

<!-- Method 4: alert() -->
<script>
var data4 = "مرحبًا بك في موقعنا! (Method 4)";
alert(data4);
</script>
<!-- Method 5: createElement() and appendChild() -->
<div id="container"></div>
<script>
var data5 = "مرحبًا بك في موقعنا! (Method 5)";
// إنشاء عنصر فقري (p)
var paragraph = document.createElement("p");
// تعيين نص العنصر
paragraph.textContent = data5;
// إضافة العنصر إلى العنصر الأب (container)
document.getElementById("container").appendChild(paragraph);
</script>
</body>
</html>

يقوم هذا المثال بتوضيح كل طريقة من الطرق المذكورة لعرض البيانات في JavaScript على صفحة ويب. يمكنك استخدام هذا المثال كنقطة انطلاق لتفعيل أسلوب معين حسب احتياجات مشروعك.

اختبار اختيار من متعدد حول درس عرض البيانات في JavaScript:

السؤال 1:

أي من الأساليب التالية يستخدم لكتابة نص مباشرة إلى الصفحة HTML في JavaScript؟

innerHTML
()log
()createElement
()write

السؤال 2:

كيف يمكن استخدام innerHTML لتحديث محتوى عنصر في صفحة HTML؟

; “النص الجديد”=innerHTML
;(“النص الجديد”)write
;(“النص الجديد”)log
;(“النص الجديد”)alert

السؤال 3:

ما هي الوظيفة الرئيسية لـ console.log() في JavaScript؟

عرض نافذة تنبيه.
طباعة البيانات في وحدة تحكم المتصفح.
تحديث محتوى عنصر HTML.
إنشاء عناصر HTML ديناميكية.

السؤال 4:

كيف يمكن استخدام alert() لعرض بيانات في JavaScript؟

;(“النص الجديد”)alert
;(“النص الجديد”)alert
;(“النص الجديد”)log
;(“النص الجديد”)write
السؤال 5:

ما هو الطريقة الصحيحة لإنشاء عنصر HTML ديناميكي باستخدام JavaScript؟

()write
innerHTML
()log
()createElement
الإجابات:

1-d

2-a

3-b

4-a

5-d

السؤال 6:

كيف يمكنك استخدام console.log() لطباعة قيمة متغير في وحدة تحكم المتصفح؟

;(“المتغير”)log
;log(variable)
;log(“variable”)
;log(print(variable))

السؤال 7:

أي من الطرق التالية تعرض نافذة تنبيه في المتصفح؟

()log
()createElement
()alert
innerHTML

السؤال 8:

كيف يمكنك إضافة عنصر HTML ديناميكي إلى الصفحة باستخدام createElement() و appendChild()؟

createElement(“p”) و (“النص الجديد”)appendChild
createElement(“p”).textContent = “النص الجديد” و (“النص الجديد”)appendChild
createElement(“p”).textContent = “النص الجديد” و (العنصر)appendChild
createElement(“p”) و (النص الجديد)appendChild

السؤال 9:

أي من الأساليب التالية يستخدم لتحديث محتوى عنصر HTML باستخدام متغير؟

;write(variable)
;innerHTML = variable
;createElement(variable)
;log(variable)

السؤال 10:

كيف يمكنك استخدام document.write() لكتابة جملة HTML مع نص وصورة؟

;(“<p>نص</p><img src=’صورة.jpg’>”)write
;(“نص” + “<img src=’صورة.jpg’>”)write
;(“<p>نص” + “<img src=’صورة.jpg’></p>”)write
;(“نص”, “<img src=’صورة.jpg’>”)write

الإجابات:

6-b

7-c

8-c

9-b

10-a

السؤال 11:

ما هي وظيفة textContent في عناصر HTML عند استخدام createElement() و appendChild()؟

لتحديد نوع العنصر.
لتحديد هوية العنصر.
لتحديد نص العنصر.
لتحديد لون العنصر.

السؤال 12:

كيف يمكنك استخدام alert() لعرض قيمة متغير في نافذة تنبيه؟

;alert(variable)
;alert(“variable”)
;alert(console.log(variable))
;alert(print(variable))

السؤال 13:

ما هو الطريقة الصحيحة لتحديث محتوى عنصر HTML باستخدام innerHTML؟

innerHTML = “النص الجديد”;
;(“النص الجديد”)write
;(“النص الجديد”)log
;(“النص الجديد”)alert

السؤال 14:

أي من الأساليب التالية يعتبر أفضل لعرض البيانات في تطبيقات الويب الحديثة؟

()write
innerHTML
()log
()createElement و ()appendChild

السؤال 15:

كيف يمكنك تعريف متغير يحمل قيمة نص وعرضه باستخدام console.log()؟

var text = “النص الجديد”; log(“text”);
log(“var text = ‘النص الجديد'”);
var text = “النص الجديد”; log(text);
log(var text = “النص الجديد”);

الإجابات:

11-c

12-a

13-a

14-d

15-c

جافا سكريبت

Curriculum