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

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

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

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

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

مفمار 2015

سؤال 1

أ‌. بموقع الانترنت التابع لمدرسة "التسامح والتميُّز" قرروا اضافة رابط للموقع:

www.TheOtherIsMe.org.il

إختاروا السطر الملائم لإضافته لكود الاصل لصفحة الموقع.

(أ	<link="https://www.TheOtherIsMe.org.il">TheOtherIsMe </link>
(ب	<ahref="www.TheOtherIsMe.org.il">TheOtherIsMe </ahref>
(ج	<a href="www.TheOtherIsMe.org.il">TheOtherIsMe </a>
(د	<p="www.TheOtherIsMe.org.il"> TheOtherIsMe </p>

الحل: (ج)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ب . مريم وداوود اضافا لكود الاصل لهذه الصفحة وسماً لصورة (وسم=תגית= tag).

< img src="picture.jpg">

ونرغب بان تكون هذه الصورة رابطاً للموقع TheOtherIsMe.org.il .

أكملوا الكود التالي:

<a href="https://www.TheOtherIsMe.org.il">

<img src="picture.jpg">

</a>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ج. تقرر اضافة الجملة "الاخر هو انا" 4 مرات بالوانٍ مختلفة (blue, red, yellow, green).

امامكم جزءٌ من كود الاصل للصفحة. أكملوا الناقص:

<html> <body dir="rtl">

 الاخر هو انا 

 الاخر هو انا 

 الاخر هو انا 

 الاخر هو انا 

</body></html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

د . تقرر إحداث تغيير صغير على الصفحة. اضيفوا زرًا مكتوب عليه "إضغط هنا". وفقط عند النقر على

هذا الزر تظهر صفحة مطبوعٌ عليها، بواسطة حلقة، 4 مرات "الاخر هو انا".

امامكم جزءٌ من كود الاصل للصفحة. أكملوا الناقص:

<html><head><script>

function print () {

var k;

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

document.write("الآخر هو أنا ");

}

</script></head>

<body dir="rtl">

<input type="button" id="calc" value="إضغط هنا"

onclick="print()">

</body></html>

سؤال 2

الملفاتsecret.html, doSomthing.html, ma.html

والصورة 10.jpg موجودة بنفس المُجلد.

أمامكم كود الاصل للصفحة ma.html :

<table border=1>

<form>

<input type="radio" id ="Java" value ="Java"/>

Java

<input type="text" id ="Python" value ="Python"

size="4"/> Python

</form>

</td></tr>

<img src="10.jpg" alt="secret.html" />

</a>

</td></tr>

<a href="secret.html">doSomthing.html</a>

</td></tr>

</table>

أ. كيف ستُعرض الصفحة في المُتصفح؟ اختاروا الإجابة الصحيحة:

أ)

ج)

ب)

د)

الحل: ( أ )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ب. هل من الممكن الوصول من الصفحة ma.html للصفحة doSomthing.html ؟

أ)	نعم، عند النقر على النص doSomthing.html
ب)	نعم، عند النقر على الصورة.
ج)	نعم، عند النقر على الكلمات secret.html
د)	لا يمكن الوصول للصفحة المطلوبة من الصفحة ma.html

الحل: (ب )

تمرين 3

امامكم عدد من مقاطع كود (script). ليست هنالك علاقة بين مقاطع الكود المُختلفة.

سَجِّلوا بجانب كل مقطع المَخرج الذي سنحصل علية:

المَخرج

الكود

أ)

15 16 17 18 19

سلام

<script>

var k;

for (k = 15; k < 20; k++) {

document.write(k+" ");

}

document.write(" ");

document.write("سلام");

</script>

ب)

<script>

var k=5;

var sum=0;

while( sum < 30) {

sum = sum + k;

k = k + 10;

}

document.write(sum + " ");

document.write(k + " ");

</script>

ت)

<script>

var k; var sum=0;

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

if (k % 2 == 0) {

sum = sum + k;

}

document.write(sum);

</script>

ث)

<script>

var number = 35;

var digit1, digit2;

digit1 = parseInt(number % 10);

digit2 = parseInt(number / 10);

document.write(digit1 + digit2);

</script>

تمرين 4

امامكم صورة شاشة وهيكل لكود الاصل لصفحة التي تحسب الفائز بالمكان الاول بمسابقة المواهب

الشابة التي أًقيمت في الصف.

مسابقة المواهب الشابة

أمير ياسمين تامر

احسب_

الرابح

ملاحظة:

يتم ادخال عدد الاصوات لكل مُرشح/ة لخانات النصوص، ومن ثم يتم النقر على الزر "احسب" لكي

نحصل على اسم الفائز. مُعطى انه ليس هنالك تساو بعدد الاصوات.

مقطع الكود يحوي:

- خانات للنصوص لإدخال عدد الاصوات.

أمير id="amir" ، ياسمين id="yasmin" وتامر id="tamer"

- زِر ، عند الضغط عليه يُشغل الدالة التي تحسب وتضع اسم الفائز في خانة النص

id="result"

- خانة نص id="com" ، للملاحظة، "المنافسة هي جزء من رحلة النجاح"

أكملوا هيكل الكود.

<html><head><script>

function calculate() {

var stu1 = parseInt(document.getElementById("amir").value);

var stu2 = parseInt (document.getElementById("yasmin").value);

var stu3 = parseInt (document.getElementById("itamar").value);

if (stu1 > stu2 && stu1 > stu3)

document.getElementById("result").value=" أمير ";

else if (stu2 > stu1 && stu2 > stu3)

document.getElementById("result").value="ياسمين ";

else document.getElementById("result").value="تامر ";

var remark=" المنافسة هي جزء من رحلة النجاح ";

document.getElementById("com").value = remark;

}

</script></head>

تمرين 5

امامك مقطع لكود (script). سَجِّلوا بجانبه المُخرَج الذي سنحصل عليه:

2 3 4
2 3 4
2 3 4

<script>

var k, num;

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

for (num = 2; num <= 4; num++) {

document.write( num + " ");

}

document.write(" ");

}

</script>

تمرين 6

خلال مشروع الحذر في الطرقات، تقرر القيام باستبيان عن طُرق الوصول للمدرسة، يشمل 120 طالبا من طلاب المدرسة، حيث سُئل الطلاب عن كيفية الوصول للمدرسة حسب الامكانيات التالية: 1 ان كانوا يستعملون وسيلة نقل جماعية، 2 ان كانوا يستعملون الدراجة الهوائية و 3 ان كانوا يصلون سير اً.

مَعلومٌ ان زمن الوصول سير اً هو 20 دقيقة، وزمن الوصول بواسطة الدراجة الهوائية 10 دقائق

وبواسطة وسيلة النقل الجماعية 3 دقائق.

اكتبوا كوداً بحيث:

أ‌. يستقبل جوابا من كل طالب اجاب عن سؤال الاستبيان عن كيفية الوصول

للمدرسة (1 ، 2 او 3)، ويحسب ويطبع عدد الطلاب الذين يصولون للمدرسة بواسطة كل واحدة من الطرق.

ب‌. يحسب ويطبع معدل زمن الوصول للمدرسة.

امامكم كود جزئي للحل، أكملوا الناقص.

لحل السؤال عليكم التعامل مع المتغيرات التالية:

count1 - لعدّ الطلاب الذين يصلون بواسطة وسيلة نقل جماعية.

count2 - لعدّ الطلاب الذين يصلون بواسطة الدراجة الهوائية.

count3 - لعدّ الطلاب الذين يصلون سيراً.

choice - لاستقبال طريقة الوصول للمدرسة (1 , 2 او 3)

average - لحساب معدل زمن الوصول للمدرسة.

<script>

var count1=0, count2=0, count3, k, average;

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

choice = parseInt(prompt("1,2,3 ادخل/ي طريقة الوصول للمدرسة"));

if (choice == 1) {count1 = count1+1;}

else if (choice == 2) {count2 = count2+1;}

}

count3 = 120-count1-count2;

document.write(count1+"عدد الطلاب الذين يصلون بواسطة وسيلة نقل جماعية");

document.write(count2+"عدد الطلاب الذين يصلون بواسطة الدراجة الهوائية");

document.write(count3+"عدد الطلاب الذين يصلون سير اً");

average = (count1*5+count2*10+count3*20)/120;

document.write(average + "معدل زمن الوصول للمدرسة");

</script>

تمرين 7

امامكم كود لصفحة HTML التي تشمل الوسم canvas

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

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

<script>

var num = 400;

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

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

ctx.fillStyle = "blue";

ctx.rect (num-300, num-300, 200, 100);

ctx.fill ( );

ctx.beginPath();

ctx.fillStyle = "black";

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

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

ctx.fill();

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

ارسموا على لائحة المربعات المُرفقة حدود الــ canvas والرسم الذي سنحصل عليه من تشغيل

الصفحة. لا حاجة لاستعمال الألوان، يُمكن تسجيل الألوان بالكلمات.

ابعاد كل مُربع 50 50 X

تمرين 8

بإطار اسبوع الحذر على الطرقات في المدرسة، برمج طلاب الطبقة إشارة ضوئية للمشاة المٌركب من دائرتين ومستطيل الذي يحيط بهما. عند تحميل الصفحة يظهر مستطيل اسود فقط.

وفي كل مرة يتم النقر بواسطة الفارة يتغير مكان الدائرة ويتبدل لون الاشارة الضوئية (احمر او اخضر) في كل مرة تظهر دائرة واحدة.

أحمر أخضر

معطيات الدائرة الحمراء:

R – 25 , المكان 100,100

معطيات الدائرة الخضراء:

G – 25 , المكان 100,20

xR - مكان الدائرة الحمراء , البعد من – left

xG مكان الدائرة الخضراء, البعد من –left

yR - مكان الدائرة الحمراء , البعد من – top

yG مكان الدائرة الخضراء, البعد من –top

أكملوا الاوامر الناقصة في الخواريزم:

(ملاحظة: عند التشغيل والضغط يأتي برسال خطأ، - بحاجة لتصحيح)

<html><body>

<canvas id="canvasFrame" width="400" height="400" onclick="quiz()"></canvas>

<script>

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

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

var xR = 100, yR = 100, xG = 100, yG = 150;

var hit=1;

ctx.fillStyle = "black";

ctx.fillRect(75, 50, 50,150);

function redColor() {

ctx.fillStyle = "black";

ctx.fillRect(75, 50, 50,150);

ctx.beginPath();

ctx.fillStyle = "red";

ctx.arc (x1, y1, 25, 0, Math.PI * 2, true);

ctx.fill(); }

function greenColor() {

ctx.fillStyle = "black";

ctx.fillRect(75, 50, 50,150);

ctx.beginPath();

ctx.fillStyle = "green";

ctx.arc(x2, y2, 25, 0, Math.PI * 2, true);

ctx.fill();}

function quiz(event) {

event = event || window.event;

if (hit==-1) redColor(); // Hit==1 / hit==-1

else

greenColor();

hit=hit*(-1); }

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

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