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

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

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

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

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

مفمار 2016

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

أ. فيما يلي أمر كُتب في صفحة page1.html

<a href="red.html"><img src="mySchool.jpg"></a>

المَلَفّان page1.html وَ mySchool.jpg محفوظان في نفس المُجَلَّد.

أيّ صورة تُعرَض عند تطبيق هذا الأمر؟

1. الصورة mySchool.jpg ذات إطار بلون red

2. الصورة red.html التي تُوجِّه إلى الصورة mySchool.jpg

3. الصورة mySchool.jpg التي تُوجِّه إلى صفحة الإنترنت red.html

4. الصورة mySchool.jpg التي تُوجِّه إلى الصورة red.html

الحل: ( 3 )

ب. أمامكم جدول وبعده مقطع غير كامل من كود مصدر هذا الجدول.

أكمِلوا بناء الجدول بواسطة كود HTML .

==> تُعرض الصورة cyber.jpg

الموجودة في نفس المُجَلَّد

لكود HTML.

بطولة السايبر الإسرائيليّة

رابط لموقع البطولة

www.cyber-edu.gov.il

<html>

<body dir="rtl">

<table>

<tr><td> אליפות הסייבר הישראלית </td></tr>

<tr><td> <img src="cyber.jpg"> </td></tr>

<tr><td> <a href="http://www.cyber-edu.gov.il>

אליפות הסייבר הישראלית </a></td></tr>

</table>

</body></html>

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

أمامكم عدد من مقاطع الكود (scripts) التي لا توجد بينها أيّ علاقة.

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

الكود

أ.

المُخْرَج: 15 , 3

15 , 3

هدف الكود:

هدف الكود: تبديل (החלפה) لقيم المتغيرات a, b

<html><body><script>

var a = 15;

var b = 3;

document.write(a + "," + b +"<br/>");

a = a + b;

b = a - b;

a = a - b;

document.write(a + "," + b +"<br/>");

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

ب.

المخرج: count = 6

هدف الكود:

النتيجة الصحيحة لقسمة x بـ y

<html><body><script>

var x = 24;

var y = 4;

var count = 0;

while (x >= y) {

x = x - y;

count = count + 1;

}

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

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

ج.

المخرج:

secret3 = 73

هدف الكود:

عكس العدد.

<html><body><script>

var num = 37;

var secret1 = num % 10;

var secret2 = parseInt(num / 10);

var secret3 = secret1*10 + secret2;

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

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

د.

المخرج: 2,4,6,8,10

هدف الكود:

طباعة جميع الاعداد الزوجية حتى 10 (يشمل).

<html><body><script>

var k, num = 1,

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

document.write(k*2+",");

}

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

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

في نهاية السنة، على مربّية الصفّ أن تكتب في شهادة تقييم التلميذ إحدى الملاحظات التالية:

"تلميذ مُتَفَوِّق"، "تلميذ جيِّد" أو "بحاجة إلى تحسين".

الملاحظة "تلميذ مُتَفَوِّق" تُكتَب لكلّ تلميذ توفَّرت فيه الشروط الثلاثة التالية:

• حضَّر التلميذ فعاليّة إثراء واحدة على الأقلّ؛

• مُعَدَّل علامات التلميذ هو 80 وما فوق؛

• لم يتغيَّب التلميذ أكثر من ثلاث مرّات.

للتلميذ الذي يتوفَّر فيه واحد من هذه الشروط تُكتَب الملاحظة "تلميذ جيّد".

للتلميذ الذي لم يتوفَّر فيه أيّ واحد من هذه الشروط تُكتَب الملاحظة "بحاجة إلى تحسين".

مُعطاة صفحة HTML تحتوي على أربع خانات نصوص:

id="education "	عدد فعاليّات الإثراء
id="absence"	عدد الغيابات
id="avg"	مُعَدَّل العلامات
id="result"	النتيجة: الملاحظة المُلائمة لكلّ تلميذ بعد الضغط على الزرّ "احسب"

أمامكم كود جزئيّ بِـــ JAVASCRIPT، يستقبل المعطيات ويطبع الملاحظة الملائمة لشهادة التقييم. أكملوا الناقص في هذا الكود:

<html><head><script>

function calculate() {

var education = parseInt(

document.getElementById("education").value);

var absence=parseInt(document.getElementById("absence").value);

var avg = parseInt(document.getElementById("avg").value);

if (education>=1 && avg>=80 && absence<=3) {

document.getElementById("result").value="تلميذ مُتَفَوِّق";

}

else if (!(education>=1 || avg>=80 || absence<=3)) {

document.getElementById("result").value= "بحاجة إلى تحسين";

}

else document.getElementById("result").value="تلميذ جيّد";

}</script></head>

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

أمامكم مجموعة علامات: 85 , 95 , 87 , 90 , 72

الكود التالي يستقبل العلامات الواحدة تلو الأخرى إلى المُتَغَيِّر grade.

<html><body><script>

var k, grade, secret = 0 ;

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

grade = parseInt(prompt("أدخل علامة"));

if (grade > secret) {

secret = grade;

}

document.write ("secret="+ secret + "<br>");

}

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

اكتبوا، في المستطيل الفارغ، المُخْرَج الذي تحصلون عليه من مقطع هذا الكود، بحسب مجموعة العلامات من اليسار إلى اليمين (المُدْخَل الأوّل هو 72).

الحل: نقترح استخدام جدول متابعة، أكملوه:

k	grade	If	Secret	المخرج
			0
1	72	72>0 , True	72	secret = 72
2	90	90>70 , True	90	secret = 90
3	87	87>90 , False	90	secret = 90
4	95	95>95 , True	95	secret = 95
5	85	85>90 , False	95	secret = 95

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

أمامكم مقطع كود (script). اكتبوا في المستطيل الفارغ المَخْرَج الذي تحصلون عليه من مقطع الكود هذا.

<html><body><script>

var k, x, min = 5, max = 8;

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

for (x = min; x <= max; x++) {

document.write (min + " ");

}

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

}

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

الحل: نقترح استخدام جدول متابعة، أكملوه

المخرج	x	k	min	max
5 5 5 5	5 6 7 8	1	5	8
5 5 5 5	5 6 7 8	2
5 5 5 5	5 6 7 8	3

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

· اشترك تلاميذ المرحلة الإعداديّة في بطولة السايبر الإسرائيليّة CodeMonkey وجمعوا النقاط.

· أعلنت مديرة المدرسة عن تخصيص يوم "ترفيه" للصفّ الذي ينجح في جَمْع 8,000 نقطة أو أكثر.

· الانتقال إلى المرحلة القطريّة للبطولة مشروط بجمع 20,000 نقطة أو أكثر.

في قسم الحاسوب في المدرسة كتبوا كودًا يستقبل عدد النقاط التي يجمعها كلّ واحد من تلاميذ الصفّ الذين يبلغ عددهم 30 .

فيما يلي المعطيات لكتابة الكود:

• عدد النقاط التي جمعها جميع تلاميذ الصفّ معًا؛

• رسالة ملائمة إنْ كان التلاميذ سيحصلون على يوم ترفيه من المدرسة؛

• رسالة ملائمة إنْ كان الصفّ سينتقل إلى المرحلة القطريّة.

يحتوي الكود على المُتَغَيِّرات التالية:

sumAll - لحساب عدد النقاط التي جمعها تلاميذ الصفّ معًا.

stars - لاستقبال عدد النقاط التي جمعها كلّ تلميذ.

أمامكم مقطع من الكود الذي كتبه قسم الحاسوب في المدرسة. أكمِلوا الأوامر الناقصة في هذا الكود.

<script>

var k, stars, sumAll = 0 ;

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

stars = parseInt(prompt("كم نقطة جمعت") ;

sumAll = sumAll + stars ;

}

document.write(sumAll + "عدد النقاط التي جمعها جميع تلاميذ الصفّ معًا+<br>");

if (sumAll > = 8000)

document.write ("يحقّ للصفّ الحصول على يوم ترفيه من المدرسة + <br>");

else {document. write ("لا يحقّ للصفّ الحصول على يوم ترفيه+</br>")};

if (sumAll > = 20000) {

document.write ("ينتقل الصفّ إلى المرحلة القطريّة +<br/>")

}

else {

document.write("في هذه السنة لا تنتقلون إلى المرحلة القطريّة. جَرِّبوا في السنة القادمة")

} /script>

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

أمامكم صفحة HTML تحتوي على الوسم canvas:

<html><head></head><body>

<canvas id="canvasFrame" width="400" height="400"

style="backgroundcolor: yellow"> </canvas>

<script>

var canvasObj = document.getElementById("canvasFrame");

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

var x = 0, y = 0;

var k;

ctx.fillStyle = "blue";

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

ctx.rect ( x , y , 100 , 100);

ctx.fill ( );

x = x + 100;

y = y + 100;

}

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

ارسموا على لائحة المُرَبَّعات التالية حدود ال canvas والرسم الذي تحصلون عليه من تشغيل الصفحة. لستم مُلْزَمين باستعمال الألوان. يمكنكم كتابة أسماء الألوان (بالكلمات).

مساحة كلّ مُرَبَّع هي 50x50.

الحل:

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

״باك-مان״ ( PAC–MAN ) هي شخصيّة شَكْلُها دائرة صفراء ممتلئة داخل إطار أسود.

قرّر تلاميذ صفّ معيّن إعداد لعبة باك-مان على canvas بلون أسود.

الضغط على المفتاحَيْن "سهم إلى اليمين" وَ "سهم إلى اليسار" يُحَرِّك الباك-مان على محور X إلى اليمين وإلى اليسار، على الترتيب.

فيما يلي كود جزئيّ هدفه رَسْم باك-مان ومعالجة حدث (event) مفاتيح الأسهم.

أكملوا الكود بحيث يُؤَدِّي الضغط على المفتاح "سهم إلى اليمين" (39) أو الضغط على المفتاح "سهم إلى اليسار" (37) إلى تَحَرُّك الباك-مان 10 بيكسلات.

لا حاجة إلى التطرُّق إلى الحالة التي يخرج فيها الباك-مان عن حدود الــ canvas.

ascii code لمفاتيح لوحة المفاتيح:

39 - سهم إلى اليمين

37 - سهم إلى اليسار

xP - مكان الباك-مان على المحور

yP - مكان الباك-مان على المحور

R - نصف قطر الباك-مان

<canvas id="canvasFrame" width="400" height="400"

style="background-color:black"> </canvas>

<script>

var xP = 50;

var yP = 50;

var R = 20;

var WIDTH = 400;

var HEIGHT = 400;

canvasObj = document.getElementById("canvasFrame");

ctx = canvasObj.getContext("2d");

drawPacman(xP, yP);

document.onkeyup = "PacmanMoving";

function PacmanMoving() {

var e = event.keyCode;

if (e == 37)

PacmanMoving;

if (e == 39)

xP == xP - 10;

ctx.fillStyle = "black";

ctx.rect(0, 0, width, height);

drawPacman(xP, yP);

}

function drawPacman(xP, yP) {

ctx.beginPath();

ctx.fillStyle = "yellow";

ctx.strokeStyle = "black";

ctx.lineWidth = 3;

ctx.arc(xP, yP, 20, 0, Math.PI * 2, true);

ctx.fill();

}

</SCRIPT></body></html>

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