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

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

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

(5) خصائص الـ JavaScript

النماذج - form

تمرين (دورة استكمال، ריאלי حيفا، تم التغيير كلياً)

· اكتب كود يقوم بأنشاء نموذج يحتوي على حقلان من نوع نص:

- الحقل الأول – لتخزين وعرض الاسم الشخصي،

- الحقل الثاني – لتخزين وعرض اسم العائلة.

· البرنامج يطلب من المستخدم إدخال الاسم الشخصي واسم العائلة،

البيانات تخرن في متغيرات مناسبة.

· القيم المُدخلة تُخرن في حقول النموذج الملائمة:

الاسم الشخصي واسم العائلة يخزن كل واحد منهما في الحقل المخصص لذلك.

مثال:

صناديق الإدخال:

يُطلب من المستخدم إدخال الأسم الشخصي

وبعدها إسم العائلة.

عرض النموذج وحقولة:

يتم تخزين المعطيات المُدخلة في الخقول المناسبة.

الحل:

<html> <body>

<form name="f1">

first name:<br>

<input type="text" name="firstname" value=""> <br><br>

Last name:<br>

<input type="text" name="lastname">

</form>

<script>

var fName = prompt("type first name");

var lName = prompt("type last name");

f1.firstname.value = fName;

f1.lastname.value = lName;

</script>

<p> لاحظ أن النموذج نفسه غير مرئي</p>

<p> الطول الافتراضي للحقل النصي هو 20 حرفًا</p>

</body>

</html>

تمرين:

نبني نموذج به صندوق-نص و- زر. نكتب اسمنا في صندوق النص.

عند الضغط على الزر يقوم البرنامج باستدعاء دالة التي تنسخ المحتوى الموجود في صندوق النص وتظهره في صندوق التنبيهات alert.

الحل:

<html>

<head>

<title> أدوات النموذج </title>

</head>

<body dir=rtl>

<form name="form1">

<input type="text" name="t1">

<input type="button" onclick="copy()" value="copyMe">

</form>

<script>

function copy() {

alert(form1.t1.value)

}

</script>

</body> </html>

جملة التفرع – if

تنفيذ أمر تبعاً لنتيجة اختبار شرط معين.

في الشرط if نضع جملة شرط أو تعبير شرطي لتنفيذ أمر معين.

if (جملة الشرط) {

أوامر لتنفيذ

}

تمرين:

نبني نموذج به حقل إدخال (من نوع نص) وكذلك به زر (button).

في حقل الإدخال نضع علامة الطالب.

عند الضغط على الزر إذا العلامة أكبر من 55 أو تساوي 55 تظهر الرسالة "لقد نجحت".

الحل:

<!doctype html>

<html>

<head>

<title> أدوات النموذج </title>

</head>

<body dir=rtl>

<form name="form1">

<input type="text" name="t1">

<input type="button" onclick="degree()"

value="النتيجة">

</form>

<script>

function degree() {

if (form1.t1.value >= 55) {

alert("أنت ناجح")

}

else {

alert("انت راسب")

}

</script>

</body> </html>

التحقق من صحة البيانات – Data verification

هي عملية التحكم في البيانات التي يتم إدخالها وهي من أهم مظاهر التفاعل داخل صفحات الويب الديناميكية.

نقوم بكتابة دوال تقوم بفحص البيانات المُدخلة لمنع أخطاء بشرية. مثل ترك حقول فارغة او إدخال أحرف بدل من ارقام. أو تحديد عدد الحروف أو الأرقام المُدخلة في كل حقل.

صحة البيانات المدخلة في صفحة الويب

تمرين:

نريد تصميم نموذج به حقل من نوع نص لإدخال أسم الطالب وبجانبه زر submit (إرسال).

عند الضغط على زر الإرسال نريد أن نتحقق أن حقل النص ليس فارغاً.

الحل:

<!doctype html>

<html>

<head>

<title> أدوات النموذج </title>

</head>

<body dir=rtl>

<form name="form1">

أدخل أسم الطالب:

<input type="text" name="text1"> <br><br>

<input type="submit" onclick="f1();"

value="ارسال">

</form>

<script>

function f1() {

if (form1.text1.value =="") {

alert("غير مسموح ترك حقل فارغ");

}

</script>

</body> </html>

تمرين:

طريقة التحكم في طول محتوى الحقل (التحكم في طول البيان المُدخل في الحقل).

نريد أن نتحقق أن طول حقل كلمة السر (password) على الأقل 8 إشارات.

الحل:

<!doctype html>

<html>

<head>

<title> أدوات النموذج </title>

</head>

<body dir=rtl>

<form name="form1">

أدخل كلمة السر:

<input type="password" name="text1"> <br><br>

<input type="submit" onclick="f1();"

value="ارسال">

</form>

<script>

function f1() {

if (form1.text1.value.length < 8) {

alert("كلمة السر لا تقل عن 8 رموز");

}

</script>

</body> </html>

التأكد من صحة البيانات المدخلة في صفحة الويب

مطابقة البيانات المدخلة فى حقلين

تمرين:

لدينا نموذج به حقلين من نوع password.

نريد من المستخدم أن يقوم بإدخال كلمة المرور في الحقل الأول،

وفي الحقل الثاني يقوم بإعادة كتابة كلمة المرور.

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

الحل:

<!doctype html>

<html>

<head>

<title> أدوات النموذج </title>

</head>

<body dir=rtl>

<form name="form1">

أدخل كلمة السر:

<input type="password" name="text1"> <br><br>

أعد إدخال كلمة السر:

<input type="password" name="text2"> <br><br>

<input type="submit" onclick="f1();"

value="ارسال">

</form>

<script>

function f1() {

if (form1.text1.value != form1.text2.value) {

alert("الكلمتين غير متطابقتين");

}

else {

alert("جميل - متطابقتين");

}

</script>

</body> </html>

التأكد من صحة البيانات المدخلة في صفحة الويب

التحكم فى نوع بيان الحقل – منع إدخال نوع من البيانات مخالف لنوع الحقل

لدينا نموذج به حقل نصي (text).

نريد أن نتحقق أن المستخدم أدخل في الحقل بيانات رقمية فقط (قيمة عددية)،
ولا يسمح باستقبال أي نوع آخر.

عند الضغط على زر إرسال إذا أدخل المستخدم قيمة غير عددية،
عندها تظهر الرسالة أدخل قيمة عددية

الحل:

<!doctype html>

<html>

<head> <title> </title> </head>

<body dir=rtl>

<form name="form1">

<input type="password" name="t1"> <br><br>

<input type="submit" onclick="f1();"

value="ارسال">

</form>

<script>

function f1() {

if (isNaN(form1.t1.value)) {

alert("أدخل قيمة عددية");

}

</script>

</body> </html>

getElementById

سؤال (מצגת יום עיון, 2017، تم التعديل)

في إطار عملية التسويق التي يمكن القيام بها على موقع البقالة grocery، هناك 3 أنواع من منتجات الألعاب التي يمكن شراؤها:

· روبوت (robot) بسعر 300 شيكل للقطعة.

· بازل (puzzle) بسعر 50 شيكل للقطعة.

· مكعبات (Lego) بسعر 100 شيكل للقطعة.

إليك نموذج يتيح لك حساب السعر النهائي الذي يتعين دفعه.

بعد ملء النموذج والنقر فوق زر "حساب" سيظهر في صناديق النص: السعر الإجمالي المطلوب دفعه.

(في كل حقل نُدخل عدد القطع التي نريد شائها)

حل بواسطة الخاصية id

<head>

<script>

function calculate() {

var robot, puzzle, lego

robot = parseInt(document.getElementById("robot").value);

puzzle= parseInt(document.getElementById("puzzle").value);

lego = parseInt(document.getElementById("lego").value);

total = robot*300 + puzzle*50 + lego*100;

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

}

</script>

</head>

<body dir="rtl">

<h1> Grocery </h1>

<h3> موقع مبيعات على الانترنت </h3>

<form name='frm'>

robot <input type="text" id="robot" value="" size=4><br>

puzzle <input type="text" id="puzzle" value="" size=4><br>

Lego <input type="text" id="lego" value="" size=4><br>

<br>

<input type="button" id="clac" value="حساب"

onclick="calculate()"> <br><br>

المبلغ الإجمالي للدفع <input type="text" id="sum" value="" size=4>

</form>

</body>

حل بواسطة الخاصية name

<head>

<script>

function calculate() {

var robot, puzzle, lego

robot = parseInt(frm.robot.value);

puzzle = parseInt(frm.puzzle.value);

lego = parseInt(frm.lego.value);

total = robot*300 + puzzle*50 + lego*100;

frm.sum.value = total

}

</script>

</head>

<body dir="rtl">

<h1> Grocery </h1>

<h3> موقع مبيعات على الانترنت </h3>

<form name='frm'>

robot <input type="text" name="robot" value="" size=4>

<br>

Puzzle <input type="text" name="puzzle" value="" size=4> <br>

Lego <input type="text" name="lego" value="" size=4>

<br><br>

<input type="button" name="clac" value="حساب"

onclick="calculate()"> <br><br>

المبلغ الإجمالي للدفع

<input type="text" name="sum" value="" size=4>

</form>

</body>

الاختلاف في استعمال id و- name

في تعريف الــ form في html:

<input type="text" name="robot" value="" size=4>

<input type="text" id="lego" value="" size=4>

-----------------------------------------------------------------------------------------------------------------

في الــ <script> في الدالة function:

مع id

robot = parseInt(document.getElementById("robot").value);

مع name

robot = parseInt(frm.robot.value);

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