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

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

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

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

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

مفمار 2017

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

أمامكم عَرْض لصفحتَيْ html موجودتَيْن في نفس الملفّ.

myparks.html

telDan.html

سُلطة الطبيعة والحدائق

إلى موقع سُلطة الطبيعة والحدائق

اِضغط هنا

www.parks.org.il

محميّة تلّ دان

ساعات العمل

9:00 – 16:00

صورة dan.jpg

تُستعمل كرابط للصّفحة

myparks.html

أَكمِلوا الكود الأصليّ بِلغة html بالنسبة للصّفحتَيْن التاليتَيْن:

myparks.html

telDan.html

<html>

<head>

</head>

<body dir="rtl">

<h1>רשות הטבע והגנים </h1>

<a href="telDan.html">

<img src="dan.jpg">

</a>

</body>

</html>

<html>

<head>

</head>

<body dir="rtl">

<h1 >שמורת תל דן </h1>

<table border="1">

<tr>

<td>שעות פתיחה </td>

<td>9:00-16:00</td>

</tr>

</table>

<br/>

<a href="parks.html">

חזור לדף הראשי </a>

</body>

</html>

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

أمامكم خمسة مقاطع كود (أ – ه). هدف كلّ مقطع كود هو أن يَستقبِل أربع علامات، أن يَحسب مُعدَّلها وأن يَطبَعه.

في كلّ مقطع كود وَقَع خطأ واحد، بسببه لا يُحَقِّق المقطع هدفه.

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

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

الشرح

الكود البرمجي

( أ )

دهس المدخل الأول (דריסת הקלט הראשון)

<script>

var num = parseInt(prompt("Press a number"));

var count = 1, sum = 0;

while (count < 4) {

num = parseInt(prompt("Press a number"));

sum = sum + num;

count = count + 1;

}

document.write( sum / count );

</script>

(ب)

جعل sum=0 في داخل الحلقة (איפוס sum בתוך לולאה)

<script>

var m, num, sum ;

for (m=1; m <= 4; m++) {

num = parseInt(prompt("Press a number"));

sum = 0;

sum = sum + num;

}

document.write( sum / 4 );

</script>

(ج)

حلقة لا نهائية (לולאה אינסופית).

<script>

var count = 0, sum = 0;

while (count < 4) {

num = parseInt(prompt("Press a number"));

sum = sum + num;

}

document.write( sum / 4 );

</script>

(د)

عدم جمع العدد الأول (אי סכמת המספר הראשון)

<script>

var sum = 0, num = 0, m;

for (m = 1; m <= 4; m++) {

sum = sum + num;

num = parseInt(prompt("Press a number"));

}

document.write( sum / 4 );

</script>

(هــ)

قسمة المعدل بالعدد 5، بدل من 4

<script>

var sum = 0, num = 0, m;

for (m = 1; m <= 4; m++) {

num = parseInt(prompt("Press a number"));

sum = sum + num;

}

document.write( sum / m );

</script>

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

في إطار اللعبة Zokimon-Amat يستطيع اللاعبون جَمْع نقاط بحسب صنف الزوكيمون الذي بِحَوْزَتهم. هناك ثلاثة أصناف (type) من الزوكيمونات:

طائر (flying)، مائيّ (water) ومعدنيّ (steel).

فيما يلي تحديد عدد النقاط بالنسبة لكلّ صنف من الزوكيمونات:

الصنف (type)	النقاط (points)
طائر (flying)	100
مائيّ (water)	50
معدنيّ (steel)	150

أمامكم استمارة تُمَكِّن من حساب عدد النقاط النهائيّ ومستوى اللاعب جامِع الزوكيمونات - مستوى أوّليّ أو مستوى مُتقدِّم.

المستوى الأوّليّ يُحدَّد لِمَن جَمَع حتّى 2000 نقطة (يشمل ال 2000).

المستوى المُتقدِّم يُحدَّد لِمَن جَمَع أكثر من 2000 نقطة وأيضًا معه 6 زوكيمونات، على الأقلّ، من الصنف المعدنيّ (steel).

بعد تعبئة الاستمارة وضَغْط الزرّ "حساب"، تظهر في خانات النصّ المُخرَجات التالية:

- عدد النقاط النهائيّ

- مستوى الجامِع

أمامكم مقطع كود جزئيّ في استمارة. توفِّر الاستمارة عمليّة لِحساب عدد النقاط النهائيّ ومستوى الجامِع.

أَكمِلوا الأجزاء الناقصة في script وفي body.

<html><head><script>

function calculate() {

var pkm_flying= parseInt(document.getElementById("flying").value);

var pkm_water= parseInt(document.getElementById("water").value);

var pkm_steel= parseInt(document.getElementById("steel").value);

total = pkm_flying*100 + pkm_steel*150 + pkm_water*50;

document.getElementById("points").value= total;

if (total > 2000 && pkm_steel > 6) {

document.getElementById("com").value = "مستوى مُتقدِّم";

}

else {document.getElementById("com").value = "مستوى أوّليّ";}

}

</script></head>

<body dir = "rtl">

<h1> جنون الزوكيمون وصل </h1>

كمية زوكيمون طائر <input type="text" id="flying" value ="" size = 4>

كمية زوكيمون مائيّ <input type="text" id="water" value ="" size = 4>

كمية زوكيمون معدنيّ <input type="text" id="steel" value ="" size = 4>

<br/>

<input type="button" id="clac" value="حساب" onclick="calculate()">

<br/>

عدد النقاط النهائيّ <input type="text" id="points" value="" size=4>

مستوى الجامِع <input type="text" id="com" value="">

</body></html>

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

أمامكم مقطع كود JavaScript يَستقبِل خمسة أرقام (9- 0)،

يَحْسب بناءً على الأوامر ويَطبع النتائج:

<html><body>

<script>

var m, digit;

var result1 = 0;

var result2 = 0;

for (m=1 ; m <= 5 ; m++) {

digit = parseInt(prompt("Press a digit"))

if (digit % 2 == 0) {

result1= (result1 * 10) + digit;

}

else {

result2 = result2 + digit;

}

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

document.write("Result #1 is " + result1 + "<br/>")

document.write("Result #2 is " + result2)

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

أ. أمامكم جدول لتتبُّع مقطع الكود.

سَجِّلوا في الجدول ما الذي سَيُعرَض كمُخْرَج بالنسبة إلى المُدْخَلات التالية: 9, 8, 6, 5, 2

(المُدْخَل الأوّل هو 9).

المُخْرَج

digit

result2

result1

Result #1 is 862

و Result #1 is 14

ب. سَجِّلوا خمسة أرقام يُعرَض بالنسبة إليها المُخْرَجان التاليان:

Result # 1 is 646 و Result # 2 is 6

الحل: مثال 64633 , 64615 (توجد 5 أمكانيات مختلفة).

ج. ما هي وظيفة المُتَغَيِّر result2؟ أحيطوا بدائرة الإجابة الصحيحة.

ii.

iii.

iv.

جَمْع كلّ الأرقام

جَمْع الأرقام الزوجيّة

جَمْع الأرقام الفرديّة

جَمْع كلّ الأرقام التي تُقسَم على m من دون باقٍ

الحل: iii. جَمْع الأرقام الفرديّة

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

أمامكم أربعة مقاطع كود (أ – د). هدف كلّ مقطع هو طباعة مستطيل من النجوم مُكوَّن

من 3 أسطر وَ 5 أعمدة، بحسب المثال التالي:

*****

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

المُخرَج/الشرح

المقطع البرمجي

(أ)

يطبع سطر واحد من 15 نجمة ***************

<html><body><script>

var k, m;

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

for (m = 1; m <= 5; m++){

document.write("*");

}

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

(ب)

لا يوجد تداخل للحلقات (קינון של לולאות). يطبع سطر واحد من 8 نجمات.

<html><body><script>

var k, m;

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

document.write("*");

}

for (m = 1; m <= 5; m++){

document.write("*");

}

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

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

(ج)

يطبع مستطيل من 5 أسطر وبكل سطر 3 نجمات

<html><body><script>

var k, m;

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

for (m = 1; m <= 3; m++){

document.write("*");

}

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

}

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

(د)

يطبع 3 أسطر وبكل سطر 3 نجمات (الفرق بين 3 لــ 5 زائد 1)

<html><body><script>

var k, m ;

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

for (m = 3; m <= 5; m++){

document.write("*");

}

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

}

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

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

نَظَّمت سُلطة الطبيعة والحدائق يوم فعّاليّات لِـــ 400 عائلة، تمَّ تخصيص الدخل منه لحماية الطبيعة في الكرمل. تُقْتَرَح في هذا اليوم الفعّاليّتان التاليتان:

- عرض سمعيّ - بصريّ بِسعر 10 شواقل للتّذكرة.

- جَوْلة في عربة الكوابل (רכבל) بِسعر 15 شاقل للتّذكرة.

أمامكم كود جزئيّ هدَفُه استيعاب عدد التذاكر التي اشترتها كلّ واحدة من ال 400 عائلة التي دُعِيَت ليوم الفعّاليّات هذا، لكلّ واحدة من الفعّاليّتَيْن (العرض السمعيّ - البصريّ والجَوْلة في عربة الكوابل).

على الكود أن يَحسب ويَطبع:

- المبلغ الذي ستدفعه كلّ عائلة مقابل شراء التذاكر.

- مجموع النقود الكلّيّ الذي جُمع من جميع الـــــ 400 عائلة.

أَكمِلوا الأجزاء الناقصة في الكود.

<html><body><script>

var pay, m, count1, count2 ;

var total = 0 ;

var m = 1 ;

while (m <= 5){

count1 = parseInt(prompt("إدخال عدد التذاكر للعرض السمعيّ-البصريّ"));

count2 = parseInt(prompt("إدخال عدد التذاكر لِعربة الكوابل"));

pay = count1 * 10 + count2 * 15 ;

total = total + pay ;

document.write(pay +"المبلغ الذي على العائلة أن تدفعه هو");

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

m = m + 1;

}

document.write (total + "مجموع النقود الكلّيّ الذي جُمع هو");

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

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

أمامكم مقطع كود في صفحة html يحتوي على الوَسْم canvas:

<html><body>

<canvas id="canvasFrame" width="400" height="400" style="background-color:blue"> </canvas>

<script>

var elem = document.getElementById('canvasFrame');

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

ctx.arc(200,100,100,0,2 * Math.PI,true);

ctx.fillStyle = "yellow";

ctx.fill();

ctx.beginPath();

ctx.moveTo(50, 150);

ctx.lineTo(200, 400);

ctx.lineTo(350, 150);

ctx.moveTo(50, 150);

ctx.fillStyle = 'orange';

ctx.fill();

ctx.closePath();

</script>

</body></html>

في الرسم التوضيحيّ للسّؤال 7، تُعرَض لائحة خانات وفيها حدود ال canvas . قياسات كلّ خانة هي 50x50 .

اُرسُموا على لائحة الخانات الرسمَ الذي سنحصل عليه بعد تشغيل كود الــ html . لا حاجةَ لاستعمال الألوان، لكن عليكم كتابه أسماء الألوان.

الحل:

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

طَوَّرت رانية تطبيقًا لأخيها الصغير لتعليمه استعمال فأرة الحاسوب.

لهذا الغرض كَتَبَت رانية مقطع كود يَعرض على شاشة الحاسوب مربّعَيْن أسودَيْن على خلفيّة بيضاء، كما هو مُبَيَّن في الرسم التوضيحيّ لهذا السؤال.

طول ضلع كلّ مربّع هو 50 بيكسل.

موقع المربّعَيْن يُدْخَل إلى المُتَغَيِّرات العالميّة (x1,y1), (x2, y2)

الضغط على كلّ مربّع يُخفيه (المنطقة التابعة للمربّع الذي ضُغِط عليه تُلَوَّن بالأبيض).

عند الضغط على كلّ منطقة أخرى تظهر الرسالة:

'You should press inside the square!'

ملاحظة: المربّعان ليسا مُتطابِقَيْن في موقعَيْهما، أيْ إنّهما في مكانَيْن مختلفَيْن على الشاشة.

square_size - طول ضلع كلّ مربّع 50 بيكسل
X1, y1 - موقع المربّع الأوّل	X2, y2 - موقع المربّع الثاني

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

<script>

function quiz(event) {

event = event || window.event;

var ctt = document.getElementById('canvasFrame');

var xM = event.pageX - ctt.offsetLeft;

var yM = event.pageY - ctt.offsetTop;

if (xM >= x1 && (xM <= (x1 + square_size)) &&

(yM >= y1 && yM <= (y1 + square_size)))

{

ctx.fillStyle = "blue";

ctx.fillRect (x1, y1, 50, 50);

}

else if (xM >= x2 && (xM <= (x2 + square_size)) &&

(yM >= y2 && yM <= (y2 + square_size)))

{

ctx.fillStyle = "blue";

ctx.fillRect (x2, y2, 50, 50);

}

else {

alert('You should press inside the square!')

}

</script>

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