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

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

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

امتحان المُفَتِّش المُرَكِّز في علوم الحاسوب للصفّ الثامن

الوحدة التعليميّة برمجة طرف المُسْتَعْمِل - (מודול בצד לקוח) – java script

مفمار 2019

سؤال 1 (سؤال 1، مفمار 2019)

رنا ويوسف، طالِبا القيادة العلميّة التكنولوجيّة الصفّ الثامن، أقاما موقعًا خاصًّا بموضوع لغات البرمجة.

في الموقع أربع صفحات: الصفحة الرئيسيّة (homepage)، صفحة لموضوع html) HTML)، صفحة لموضوع لغة بايثون (python)، وصفحة لموضوع لغة (js) JavaScript.

أمامك رسم تخطيطيّ لمبنى الموقع، الذي يحتوي صفحات الــ HTML الأربع ومجلّد صُوَر محفوظة فيه صُوَر رموز اللغات.

مُعطى كود الـــ HTML الذي كَتَبَه يوسف ورنا للصفحة الرئيسيّة (homepage):

<html>

<body style="text-align:center">

<h1> لغات البرمجة </h1>

<center>

<table border="1">

<tr>

<td><a href="html.html"> HTML </a> </td>

<td><a href="js.html"> JavaScript </a></td>

<td><a href="python.html"> python </a></td>

</tr>

<tr>

<td><img src="pictures/html.png"> </td>

<td><img src="pictures/JavaScript.jpg"> </td>

<td><img src="pictures/python.png"> </td>

</tr>

</table>

w3schools

</body></html>

أ. كيف يُعرَض الجدول عند تشغيل الـــ HTML ؟ أَحِط بدائرة الإجابة الصحيحة:

(أ) لغات برمجة

(ب) لغات برمجة

(ج) لغات برمجة

(د) لغات برمجة

الحل: ( ج )

ب)

صورة شعار (لوغو) الــ JavaScript غير معروضة في الجدول. اكتب سطر الكود الذي يجب إضافته لكي تُعرَض صورة الــ JavaScript أيضًا.

<img src="pictures/js.png">

ج)

اكتب كود HTML بحيث تُستخدَم الكلمة w3schools رابطًا للموقع www.w3schools.com

<a href="https://www.w3school.com"> w3school </a>

سؤال 2 (سؤال 2، مفمار 2019)

أمامك ثلاثة مقاطع كود لا توجد بينها أيّ صلة. اكتب إلى جانب كلّ كود المُخْرَج الناتج عند تشغيل الكود:

المُخْرَج الناتج

الكود

hello

var num = 25;

var num1 = (num % 10);

var num2 = parseInt(num / 10);

document.write(num2 + num1);

document.write("<br>");

var num3 = num1 * 10 + num2;

document.write(num3);

document.write("<br>");

if (num3 % 2 == 0)

document.write("hello");

else

document.write("world");

for (var k = 1; k < 15; k++) {

if (k % 3 == 0)

document.write (k + "<br>");

}

4735

var num = 5374;

while (num > 0) {

document.write (num % 10);

num = parseInt (num / 10)

}

سؤال 3 (سؤال 3، مفمار 2019)

أمامك ثلاثة مقاطع كود.

هدف كلّ مقطع هو أن يستقبل 17 عددًا، أن يَعُدّ كمّيّة الأعداد المُكوَّنة من رقمَيْن من بينها وأن يطبعها.

على سبيل المثال، بالنسبة لتسلسل الأعداد الــ 10 التالية:

230 ، 555 – ، 76 ، 5 ، 80 ، 100 – ، 77 ، 8 ، 74 ، 90 ، يُطبع 5 .

في كلّ مقطع كود وقع خطأ منطقيّ واحد، ولذلك لا يُحَقِّق مقطع الكود هدفه. اشرح ما هو الخطأ في كلّ مقطع كود، واكتب كيف يجب تصحيحه.

ملاحظة: الخطأ ليس خطأ ترجمة وتجميع برنامج (קומפילציה).

اِفترِض أنّ المُدْخَل سليم ويشمل أعدادًا صحيحة فقط.

المقطع (أ)

ما هو الخطأ؟

القطعة ليست بداخل الحلقة

كيف يجب تصحيحه؟

نقل أمر القراءة كلأول أمر لداخل الحلقة

var count = 0;

var num = parseInt (window.prompt("أَدخِل عددًا"));

for (k = 1; k <= 17; k++)

{

if (num >= 10 && num <= 99)

count = count + 1;

}

document.write ( "count:" + count );

المقطع (ب)

ما هو الخطأ؟

K لا يتقدم بداخل الحلقة

كيف يجب تصحيحه؟

يجب إضافة الأمر k++ في داخل الحلقة

var k = 1, count = 0;

while (k <= 17) {

num = parseInt (window.prompt(("أَدخِل عددًا"));

if (num >= 10 && num < 100)

count = count + 1;

}

document.write ("count:" + count);

المقطع (ج)

ما هو الخطأ؟

أمر الشرط يتعامل مع المتغير num قبل أن تحدث قراءة لداخله

كيف يجب تصحيحه؟

أمر القراءة يجب أن يكون أول أمر بداخل الحلقة

var count = 0;

var num;

for (k = 1; k <= 17; k++) {

if (num > 9 && num <= 99)

count = count + 1;

num = parseInt (window.prompt(("أَدخِل عددًا"));

}

document.write ("count:" + count );

سؤال 4 (سؤال 4، مفمار 2019)

سلوى وأسعد، طالِبا القيادة العلميّة التكنولوجيّة الصفّ الثامن، كتبا كودًا هدفه أن يُحوِّل إلى الشيكل ثمن منتَج محدَّد بعملة أجنبيّة، وأن يقارنه مع ثمن نفس المنتَج في إسرائيل.

لهذا الغرض بَنَيا نموذجًا يحتوي على حقول المُدْخَل الأربعة التالية:

• ثمن المنتَج في إسرائيل - shekels

• اسم العملة - coin

• ثمن المنتَج بالعملة الأجنبيّة (ثمن المنتَج بالعملة المذكورة) - price

• سعر الصرف (قيمة العملة بالشيكل) – exchange

إضافةً إلى ذلك، هناك حقلان للإجابات (حقلان لا يمكن تغييرهما):

• الثمن بعد تحويل العملة إلى الشيكل - exShekels

• رسالة للمستخدِم – compare

بالضغط على زرّ "تحويل ومقارنة" يُعرَض الثمن بعد تحويله إلى الشيكل.

بالإضافة إلى ذلك، تُعرَض رسالة من أين من المفضّل شراء المنتَج.

إذا كان الثمن في إسرائيل أقلّ، تكون الرسالة: "من المفضّل الشراء من إسرائيل".

إذا كان الثمن في إسرائيل أعلى، تُعرَض الرسالة: "من المفضّل الشراء بعملة..." بإضافة اسم العملة.

إذا كان الثّمن مماثلً - تُعرَض الرسالة: "لا يوجد فرق ولكن من المحبّذ الشراء من إسرائيل".

على سبيل المثال: الدفتر الذي ثمنه في إسرائيل 3.5 ش.ج. في الولايات المتّحدة ثمنه 1 دولار. سعر صرف الدولار هو: 1 دولار = 3.69 ش.ج. لذلك الثمن بالشيكل هو 3.69 ، والرسالة المناسبة هي: "من المُفضّل الشراء من إسرائيل" لأنّ: 3.69 > 3.5 .

أمامك صورة الشاشة التي ظهرت في الحالة الموصوفة في المثال أعلاه:

تحويل العملة ومقارنة الأسعار

ثمن المنتج في إسرائيل (ش.ج) 3.50

اسم العملة: دولار _

ثمن المنتَج بالعملة الأجنبيّة 1

سعر الصرف 3.69

أمامك كود الـــ HTML للنموذج والسيناريو (script). أَكمِل الأوامر الناقصة فيه:

<html><head><script>

function exchange() {

var shekels= parseFloat(document.getElementById("shekels").value);

var coin = document.getElementById("coin").value);

var price = parseFloat(document.getElementById("price").value);

var exchange=parseFloat(document.getElementById("exchange").value);

var exShekels= price * exchange ;

document.getElementById("exShekels").value = exShekels;

if (exShekels < shekels );

document.getElementById("compare").value= coin +"من المفضّل الشراء بعملة";

if (exShekels > shekels )

document.getElementById("compare").value="من المفضّل الشراء من إسرائيل";

if (exShekels == shekels )

document.getElementById("compare").value="لا يوجد فرق ولكن من المحبّذ الشراء من إسرائيل ";

}

</script></head> <body dir = "rtl">

<h1> تحويل العملة ومقارنة الأسعار </h1>

<form>

ثمن المنتَج في إسرائيل

<input type="text" id="shekels" value="" size=10> <br>

اسم العملة

<input type="text" id="coin" value="" size=10> <br>

ثمن المنتَج بالعملة الأجنبيّة

<input type="text" id="price" value="" size=10> <br>

سعر الصرف

<input type="text" id="exchange" value="" size=10> <br>

<input type="button" value="המרה והשוואה" onclick="exchange()"> <br>

الثمن بعد تحويل العملة (ش.ج)

<input type="text" id="exShekels" value="" size="10"> disabled

<br>

<input type="text" id="compare" value="" size="30" disabled><br>

</form></body></html>

سؤال 5 (سؤال 5، مفمار 2019)

أمامك سيناريو يرسم على canvas بمقياس 400 × 400 .

ارسم على المربّعات الرسم الذي ينتج عن تشغيل الكود (مقاس كلّ مربّع 50 × 50).

لا حاجة للتلوين ولكن يجب تعبئة الأشكال وذِكْر أسماء الألوان.

<script>

var can = document.getElementById('can');

var ctx = can.getContext('2d');

var x = 0;

var y = 0;

var w = 50;

var h = 400;

var color = "";

for (var k = 1 ; k <= 4 ; k++) {

if (k % 2 == 0)

color = "blue";

else

color = "red";

ctx.fillStyle = color;

ctx.fillRect(x, y, w, h);

x = x + 100;

y = y + 50;

h = h - 50;

}

</script>

سؤال 6 (سؤال 6، مفمار 2019)

في ثانويّة "النجاح" يتعلّم 315 تلميذًا في طبقة صفوف الثوامن. في نهاية الفصل الأوّل، لم تكن الإدارة راضية عن تحصيلهم في موضوع ما، ولذا قرّرت إجراء تغييرات في المنهج التعليميّ.

من أجل فحص نجاعة المنهج، أيْ إذا حصل تحسُّن في التحصيل، قرّروا المقارنة بين علامات التلاميذ في نهاية الفصل الأوّل وبين علامات التلاميذ في نهاية الفصل الثاني.

من أجل ذلك كُتب برنامج يستقبل لكلّ تلميذ علامته في ذلك الموضوع في الفصل الأوّل وعلامته في ذلك الموضوع في الفصل الثاني.

يَعُدّ البرنامج ويَطبع كمّيّة التلاميذ الذين حسّنوا تحصيلهم، ويحسب معدّل علامات التلاميذ في نهاية كلّ فصل ويطبع رسالة إذا نجح المنهج التعليميّ الجديد.

يُعتبَر المنهج ناجحًا إذا كان معدّل علامات الفصل الثاني أكبر من معدّل علامات الفصل الأوّل بـــ 10 درجات على الأقلّ.

أمامك كود جزئيّ للبرنامج. أَكمِل الأوامر الناقصة في الكود:

اِنتبِه إلى المتغيّرات وإلى استعمالها في البرنامج.

* العلامة مُعرَّفة على أنّها عدد صحيح.

<script>

var gradeA, gradeB; // علامة الفصل الأوّل وعلامة الفصل الثاني

var countImprove = 0 ; // يَعُدّ عدد التلاميذ الذين حسّنوا تحصيلهم

var sumGradesA = 0 , sumGradesB = 0 ;

// يجمع علامات الفصل الأوّل وعلامات الفصل الثاني

var avgGradesA, avgGradesB; // معدّل علامات الفصل الأوّل ومعدّل علامات الفصل الثاني

for (var i = 1; i<=315 ; i++) {

gradeA = parseInt(prompt("علامة الفصل الأول")) ;

gradeB = parseInt(prompt("علامة الفصل الثاني")) ;

sumGradesA = sumGradesA + gradeA ;

sumGradesB = sumGradesB + gradeB ;

if (gradeB > gradeA) {

countImprove ++;

}

avgGradesA = sumGradesA / 315;

avgGradesB = sumGradesB / 315;

document.write ( " عدد الطلاب اللذين حسنوا علاماتهم " + countImprove );

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

if (avgGradesB > avgGradesA + 10)

document.write ("نجح المنهج التعليميّ");

</script>

سؤال 7 (سؤال 7، مفمار 2019)

مُعطى المُخْرَج التالي:

أَكمِل الكود التالي من أجل الحصول على المُخْرَج أعلاه:

X O X O

O X O X

X O X O

O X O X

<script>

for (var row = 1; row <= 4; row++){

for (var col = 1; col <= 4; col++){

if (( row + col ) % 2 == 0)

document.write ( "X " );

else

document.write ( "O " );

}

document.write ("<br>");

}

</script>

حل بطريقة أخرى:

var row = 0; row < 4; row++

var col = 0; col < 4; col++

سؤال 8 (سؤال 8، مفمار 2019)

كتبت غادة برنامجًا يرسم مربّعًا واحدًا عندما نضغط بواسطة الفأرة على الصفحة.

مع كلّ ضغطة إضافيّة يرسم البرنامج مربّعًا جديدًا في مكان مختلف وبحجم مختلف عن المربّع الذي قبله، وذلك في دورة مؤلَّفة من أربع ضغطات.

أمامك السيناريو الذي يرسم على canvas بمقياس 400 × 400 .

أ. أَكمِل الكود.

<html><body>

<canvas id ="can" width="400" height="400" onclick="DrawRect()">

<script>

var can = document.getElementById("can");

var ctx = can.getContext("2d");

var click = 0, size = 25;

function ClearCanvas() {

ctx.fillStyle = "white";

ctx.fillRect(0, 0, 400,400);

// ctx.clearRect(0, 0, 400 ,400); الحلّ ممكن بواسطة أمر واحد أيضًا

}

function DrawRect() {

ClearCanvas();

ctx.fillRect(click * 100, click * 100, size, size);

click++;

size = size + 25;

if (click == 4 ) {

click = 0 ;

size = 20 ;

}

</script></body></html/>

ب. ارسم على المربّعات الرسم الذي تحصل عليه بعد الضغطة الثالثة (مقاس كلّ مربّع 50 × 50).

لا حاجة للتلوين ولكن يجب تعبئة الأشكال وذِكْر أسماء الألوان.

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