صفحة البيت | מס טלפון 04 – 6046227 | מס' פקס 04 – 8303539

جافا سكريبت - JavaScript

موقع كتابة الكود repl.it | تحميل Brackets| تحميل Notebad++

(2) الطباعة في صفحة الويب

أمر الطباعة - document.write( )

أمر الطباعة document.write()

الأمر alert() ساعدنا في طباعة رسائل بنوافذ منبثقة.

ولكن ماذا لو أردنا طباعة رسائل على صفحة الويب نفسها؟

من أجل ذلك يوجد الآمر document.write()

يعتبر هذا الكود أسهل طريقة لإظهار الرسائل على صفحة الويب.

مثال:

سنطلب من المتصفح كتابة “مرحباً بكم في مدرسة قفطان حلبي” على صفحة الويب.

<html>

<body>

<script>

document.write("مرحباً بكم في مدرسة قفطان حلبي");

</script>

</h1>

</body>

</html>

مثال:

في المثال التالي سيتم كتابة نتيجة التمرين 2 + 3:

المخرج:

<html>

<body>

<script>

document.write("<h1>",2+3,"</h1>")

</script>

</body>

</html>

لأضافة مميزات، يمكن استبدال سطر الطباعة بالسطر التالي:

document.write("<h1 style='color: green;'>",2+3,"</h1>")

مثال:

في المثال التالي سيتم كتابة عنوان كبير مع فقرتين:

الناتج:

welcome to js

هذه فقرة

هذه فقرة أخرى

<script>

document.write("<h1>welcome to js </h1>");

document.write("<p> هذه فقرة </p>");

document.write("<p>هذه فقرة أخرى </p>");

</script>

· مُتَبع إضافة فاصلة منقوطة ( ; ) في نهاية كل أمر برمجي، (مُحبذ ولكن غير الزامي).

· الأوامر البرمجية يتم تنفيذها بشكل تسلسلي كما تمت كتابتها.

مثال:

<body>

<h1>مرحبا أصدقائي الأعزاء </h1>

<script>

document.write("<h2> I learn js </h2>");

document.write("<h2>" + "I learn js" + "</h2>");

</script>

</body>

النتيجة:

مرحبا أصدقائي الأعزاء

I learn js

مثال:

في هذا المثال نرى انه يمكن استدعاء السكربن عدة مرات.

<html>

<body>

<script>

document.write("<h1>hey</h1>")

</script>

<h2>hello</h2>

<script>

document.write("<h1>bye</h1>");

</script>

</body>

</html>

تعليقات وملاحظات في JavaScript

يمكن استخدام التعليقات في لغة الجافا سكربت لجعل الكود أكثر قراءة ووضوحاً.

· تعليقات الجافا سكربت بسطر واحد:

إذا كان التعليق ضمن السطر الواحد يمكن استخدام // في البداية

· تعليقات الجافا سكربت في أكثر من سطر:

تبدأ التعليقات متعددة الأسطر بفاصل مائل ونجمة */

ثم تنتهي بنجمة ثم فاصل مائل /*

مثال:

المخرج:

مرحبا أصدقائي الأعزاء

I learn js

<script>

// إنشاء العنوان

document.write(<h1> هذا عنوان كبير </h1>);

// إنشاء فقرتين

document.write(<p> هذه فقرة </p>);

document.write(<p> هذه فقرة أخرى </p>);

</script>

المخرج:

مرحبا أصدقائي الأعزاء

I learn js

<script>

/ *

سيتم إنشاء عنوان كبير

وفقرتين في هذا الكود

document.write(<h1> هذا عنوان كبير </h1>);

document.write(<p> هذه فقرة </p>);

document.write(<p> هذه فقرة أخرى </p>);

</script>

تمارين

تمرين 1:

انسخوا إلى المحرر واجيبوا عن الأسئلة التالية:

<body>

<script>

document.write("Hello World <br/>");

document.write("Hi <br/> JavaScript");

</script>

عند تنفيذ هذا البرنامج على كم سطر طباعة نحصل في صفحة الـ HTML (أحط الإجالة):

أ. 2 أسطر ب. 3 أسطر ج. 4 أسطر. الحل: ب 3 أسطر

1. ماذا يُطبع نتيجة لأمر الطباعة الأول: Hello World

2. ماذا يُطبع نتيجة لأمر الطباعة الثاني: Hi وبعدها JavaScript

3. ما هي وظيفة الوسم "<br/>" الذي في الأمرين: الوسم <br/>" ينقل قلم الكتابة إلى سطر جديد.

تمرين 2:

انسخوا إلى المحرر واجيبوا على الأسئلة التالية:

<body>

<script>

document.write ("3+5 <br/>");

document.write (3+5+"<br/>");

document.write ("2*4=" + (2 * 4) + "<br/>");

</script>

أ) عند تنفيذ هذا البرنامج نرى على صفحة الـ HTML أسطر "الطباعة" التالية:

1. في السطر 1 يُطبع: 3 + 5

2. في السطر 2 يُطبع: _8_

3. في السطر 3 يُطبع: 8 = 4 * 2

ب) اشرحوا وظيفة الوسم الذي في الأمر الثالث:

document.write ("2*4=" + (2 * 4) + "<br/>");

هو وسم HTML، وظيفته نقل مؤشر الكتابة إلى سطر جديد. انتبه لإشارة + المرافقة للوسم.

ج) اكتبوا التعبير 3 = 7 / 21 مستخدما الأمر document.write مرة واحدة فقط.

document.write ("21 / 7 =" + (21/7) + "<br/>");

تمرين 3:

اكتبوا برنامج يطبع أيام الأسبوع في أسطر منفردة، استخدام الأمر document.write

مرة واحدة فقط.

<body>

<script>

document.write ("Sun <br/> Mon <br/> Tues <br/> Wednes <br/> Thurs <br/> Friday <br/> Satur <br/>");

</script>

ينتج:

ملاحظة:

يمكن الحل بطريقة أخرى:

document.write("Sun"+"<br/>"+"Mon"+"<br/>"+"Tues"+"<br/>")

مدرسة قفطان حلبي الإعدادية – دالية الكرمل - Copywrite – 2019