معهد آفاق التيسير للتعليم عن بعد - JavaScript - تطبيق (3) : شرح كود بطاقة تهنئة

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله

كود "تهنئة"

وهو تطوير لكود كتبه أحد الأشخاص .

- دالة نافذة التنبيه (الإفتراضية) في جافا سكريبت :

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

كود:



<!DOCTYPE html>

<html>

<head>

<script>

 function myFunction()

 {

 alert("السلام عليكم ورحمة الله وبركاته!");

 }

</script>

</head>

<body>



<input type="button" onclick="myFunction()" value="نافذة التنبيه" />



</body>

</html>

http://www.afaqattaiseer.com/vb/uplo...1346939751.png

أولا: قسم الرأس head

إنشاء فئات classes لتطبيق أنماط css على نافذة التنبيه alert

1- زر الإرسال (OK)
2- عنوان النافذة
3- مضمون رسالة التنبيه (النص في داخل الصندوق)
4- شكل نافذة التنبيه (الصندوق)

كود:

 <style type="text/css">



.okbutton {



 background-color: #ba55d3;



 font-color: #000000;



 font-size: 9pt;



 font-family: arial;



 font-weight: bold;



 width: 70px;



 height: 20px;



 }



 .alerttitle {



 background-color: #3c56ff;



 font-family: arial;



 font-size: 9pt;



 color: #ffffff;



 font-weight: bold;



 text-align: right;



 }



.alertmessage {



 font-family: arial;



 font-size: 10pt;



 color: #9400d3 ;



 font-weight: bold;



 }



.alertboxstyle {



 cursor: default;



 filter: alpha(opacity=90);



 background-color: #ffb6c1;



 position: absolute;



 top: 200px;



 left: 200px;



 width: 100px;



 height: 50px;



 visibility:hidden; z-index: 999;



 border-style: groove;



 border-width: 2px;



 border-color: darkviolet;



 text-align: center;



 }



 </style>

وبهذا ينتهي قسم الرأس .

ثانيا قسم المتن body
- الجزء الأول :
دالة (صندوق نافذة التنبيه)

كود:



<body>

 <div id="alertlayer" class=alertboxstyle>



 </div>



 <script type = "text/javascript">



 var alertbox = document.getelementbyid("alertlayer").style



//تغيير عنوان الموقع إلى عنوان موقعك



 //دالة وظيفتها إعادة توجيه الزائر إلى صفحة معينة



 function redirect(){



 window.location="http://elm-2.blogspot.com";}

 "

هذا مثال يوضح ،إن شاء الله وظيفة كلا من getElementById و innerhtml في دالة (صندوق نافذة التنبيه)

كود:

<body>

<script>



function myFunction()

{

var xtext = document.getElementById("my-id")

xtext.innerHTML="الحمدلله والصلاة والسلام على رسول الله";

};



</script>

  

 <p id="my-id">بسم الله الرحمن الرحيم</p>



 <button onclick="myFunction()">نبدأ إن شاء الله</button>



</body>

إذن ، نلاحظ أن:
المتغير xtext يستخدم كمرجع للعنصر الذي هويته هي my-id
بينما xtext.innerHTML : خاصية تستخدم لتغيير نص (قيمة) العناصر
حيث document.getElementById : خاصية لاستخراج عنصر من المستند باستخدام الهوي id
و document.getElementBytagname : بواسطة اسم الوسم مثلا : <p> : p
و document.getElementByname : بواسطة خاصية الاسم : name

ورأينا في اكود السؤال العشوائي ما يشبهها وهو : document.QuestForm.QuestBox.value
حيث استخدمنا نموذج form

ملاحظة: نستخدم
document.getElementById("alertLayer").innerHTML أو alertlayer.innerHTML

هذا الكود يوضح المطلوب الأول () :

كود بلغة HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//AR" "http://www.w3.org/TR/html4/loose.dtd">



 <html dir="rtl">



 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

 <title>aTitle</title>

 </head>



 <body>

 <table border=1 bordercolor=#003300 width=100% height=100%>

 <tr height=5><td colspan=4 class=alertTitle>

 aTitle

 </td>

 </tr>

 <tr height=5>

 <td width=5>

 </td>

 </tr>

 <tr>

 <td width=5>

 </td>

 <td width=20 align=left><img src='http://data.whicdn.com/avatars/2488657/beautiful_flowers_thumb.png?1333744892'>

 </td>

 <td align=center class=alertMessage>

 aMessage

 <BR>

 </td>

 <td width=5>

 </td>

 </tr>

 <tr height=5>

 <td width=5>

 </td>

 </tr>

 <tr>

 <td width=5>

 </td>

 <td colspan=2 align=center>

 <input type=button onClick='redirect()' value='آمـيـن' class=okButton>

 <BR>

 </td>

 <td width=5>

 </td>

 </tr>

 <tr height=5>

 <td width=5>

 </td>

 </tr>

 </table>



 </body>



 </html>

كود:

function Alert(aTitle,aMessage){



document.getElementById("alertLayer").innerHTML = "<table border=0 width=100% height=100%>" +

"<tr height=5><td colspan=4 class=alertTitle>" + " " + aTitle + "</td></tr>" +

"<tr height=5><td width=5></td></tr>" +

"<tr><td width=5></td><td width=20   align=left><img   src='http://data.whicdn.com/avatars/2488657/beautiful_flowers_thumb.png?1333744892'></td><td   align=center class=alertMessage>" + aMessage +   "<BR></td><td width=5></td></tr>" +

"<tr height=5><td width=5></td></tr>" +

"<tr><td width=5></td><td colspan=2   align=center><input type=button onClick='redirect()'   value='آمـيـن' class=okButton><BR></td><td   width=5></td></tr>" +

"<tr height=5><td width=5></td></tr></table>";



thisText = aMessage.length;

if (aTitle.length > aMessage.length){ thisText = aTitle.length; }



aWidth = (thisText * 5) + 80;

aHeight = 100;

if (aWidth < 150){ aWidth = 200; }

if (aWidth > 350){ aWidth = 350; }

if (thisText > 60){ aHeight = 110; }

if (thisText > 120){ aHeight = 130; }

if (thisText > 180){ aHeight = 150; }

if (thisText > 240){ aHeight = 170; }

if (thisText > 300){ aHeight = 190; }

if (thisText > 360){ aHeight = 210; }

if (thisText > 420){ aHeight = 230; }

if (thisText > 490){ aHeight = 250; }

if (thisText > 550){ aHeight = 270; }

if (thisText > 610){ aHeight = 290; }



alertBox.width = aWidth;

alertBox.height = aHeight;

alertBox.left = (document.body.clientWidth - aWidth)/2;

alertBox.top = (document.body.clientHeight - aHeight)/2;



alertBox.visibility="visible";



}

جمل الشرط (conditional statements)
جملة الشرط if :-
تعرفنا على كيفية استخدامها في (كود بالغداة والعشي)

الجزء الأخير من الدالة:
- الطول والعرض ، يتم تعديله ليتناسب مع النص المدخل

كود:

thisText = aMessage.length;

if (aTitle.length > aMessage.length){ thisText = aTitle.length; }



aWidth = (thisText * 5) + 80;

aHeight = 100;

if (aWidth < 150){ aWidth = 200; }

if (aWidth > 350){ aWidth = 350; }

if (thisText > 60){ aHeight = 110; }

if (thisText > 120){ aHeight = 130; }

if (thisText > 180){ aHeight = 150; }

if (thisText > 240){ aHeight = 170; }

if (thisText > 300){ aHeight = 190; }

if (thisText > 360){ aHeight = 210; }

if (thisText > 420){ aHeight = 230; }

if (thisText > 490){ aHeight = 250; }

if (thisText > 550){ aHeight = 270; }

if (thisText > 610){ aHeight = 290; }



alertBox.width = aWidth;

alertBox.height = aHeight;

alertBox.left = (document.body.clientWidth - aWidth)/2;

alertBox.top = (document.body.clientHeight - aHeight)/2;



alertBox.visibility = "visible";

}

// NB the image .alert.gif is required.

</script>

كود:

//النص في نافذة التنبيه

//Alert('العنوان','السطر الأول<br>السطر الثاني')

Alert('عــيــد فــطــر مــبــارك','تقبل الله منا ومنكم<br>اللهم اجعله مباركا لنا ولجميع إخواننا المسلمين')



</script>

الحمدلله
وصلى الله وسلم على نبينا محمد وعلى آله وصحبه وسلم تسليما كثيرا

المرفقات:
- الكود الأصلي ، وجدت ما يشبه هذا الكود في عدد من المواقع ، ولا أذكر الموقع الذي أخذت منه هذا الكود.
- كود بطاقة تهنئة كاملا.

تنبيه:
** لفتح الملف المرفق في المتصفح ، يجب تغيير الامتداد من txt إلى html أو htm