JavaScript - تطبيق (2) : شرح كود بالغداة والعشي

سامية السلفية · #1 19 محرم 1434هـ/2-12-2012م, 06:43 AM

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

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

كود بالغداة والعشي :

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

- تشغيل ملف صوتي أذكار الصباح في ساعات معينة مع نص "أذكار الصباح"
- تشغيل ملف صوتي أذكار المساء في ساعات معينة مع نص "أذكار المساء"

- إظهار نص حديث "أكثروا من الصلاة علي.." مع صورة لكتيب آداب يوم الجمعة ، يوم الجمعة من كل أسبوع
والله الموفق

getFallYear	تعطي قيمة تساوي السنة الحالية (من جهاز الحاسب)	---
getMonth	تعطي قيمة تساوي رقم الشهر الحالي	من 0 إلى 11
getDate	تعطي قيمة تساوي اليوم من الشهر	من 1 إلى آخر يوم في الشهر
getDay	تعطي قيمة تعبر عن رقم اليوم من الأسبوع وتبدأ من الأحد	من 0 إلى 6
getHours	تعطي قيمة تساوي الساعة حاليا	من 0 إلى 23
getMinutes	تعطي قيمة تساوي عدد الدقائق في جهازك الآن	من 0 إلى 59
getSeconds	تعطي قيمة تساوي عدد الثواني	من 0 إلى 59
getMilliseconds	تعطي قيمة تساوي عدد الأجزاء من الثانية	من 0 إلى 999
getUTCDate	تعطي قيمة تساوي اليوم من الشهر حسب التوقيت الدولي	من 1 إلى آخر يوم في الشهر

كود بلغة 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>كود بالغداة والعشي</title>

<!--الساعة 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
 أذكار الصباح http://www.archive.org/download/TvQuran.com__Athkar/TvQuran.com_athkar_05.mp3
المساءhttp://www.archive.org/download/TvQuran.com__Athkar/TvQuran.com_athkar_04.mp3
-->

<style type="text/css"> 

.TxtD { 
color:#006600;
font-size:15pt;
font-weight:bolder;
}

.TxtN { 
color: #003366;
font-size:15pt;
font-weight:bolder;
}

.TxtJ { 
color: #CC00CC;
font-size:15pt;
font-weight:bolder;
}

</style> 

</head>

قسم الرأس head من الكود

فئات classes :

1- فئة TxtD (أذكار الصباح)
2- فئة TxtN (أذكار المساء)
3- فئة TxtJ (آداب يوم الجمعة)

كود:

athkar=new Date();

// بتوقيت مكة المكرمة
//مع ملاحظة أن طريقة إضافة 3 ساعات إلى التوقيت العالمي لا تستخدم دائما
// مثال: إذا كانت الساعة بالتوقيت العالمي = 22 وأضفنا 3 ساعات النتيجة 25 ، فالنتيجة خطأ في البرنامج

كود:

 var mkHrs = athkar.getUTCHours() + 3; 

   if (mkHrs >= 4 && mkHrs <= 6) { 
    document.write("<embed  src=http://www.archive.org/download/TvQuran.com__Athkar/TvQuran.com_athkar_05.mp3  autostart=true volume=30 width=250 height=90>");
    document.write("<p><span class=TxtD> ~*~ أذكار الصباح ~*~ </span>");
}

//أي بنفس الطريقة السابقة ، لكن طبقنا طريقة أخرى كمثال على استخدام الحلقات

كود:

if (mkHrs >= 15 && mkHrs < 19 ) {

 var asrHrs = [15, 16, 17, 18]; 

for (var i = 0; i < 4 ; i++){

// إذا كان توقيت مكة المكرمة مساويا لأحد عناصر المصفوفة "ساعات العشي" > هذا وقت صلاة العصر-تقريبا- خلال العام

كود:

if (mkHrs == asrHrs[i] ) {
    document.write("<embed  src=http://www.archive.org/download/TvQuran.com__Athkar/TvQuran.com_athkar_04.mp3  autostart=true volume=30 width=250 height=90>");
    document.write("<p><span class=TxtN> ~*~ أذكار المساء ~*~ </span>");

}     
}

تعريف متغير
الساعة الحالية = athkar.getUTCHours
الساعة الحالية بتوقيت مكة المكرمة (نعرف نتغير) : نضيف 3 ساعات

كود بلغة HTML:

  var mkHrs = athkar.getUTCHours() + 3;

طريقة بسيطة ؛ لأن الأوامر المطلوب تنفيذها في أوقات معينة صباح/مساء

لكن لا ينصح باستخدام هذها الطريقة دائما، للتوضيح :
لو كان لدينا الساعة 21 بالتوقيت الدولي وأضفنا إليها 3 ساعات للتحويل إلى توقيت مكة
فالنتيجة:
الساعة = 24 خطأ في البرمجة ولن ينفذ الأمر المطلوب، ماذا تعني الساعة 24؟؟؟؟
والساعة 22 = 25
و 23 تصبح 26
و00 تصبح 3 وفي هذه الحالة يبدأ بتنفيذ الأمر وفي الساعات التي تليها إن شاء الله

تأخر تنفيذ الأمر المطلوب 3 ساعات

وأيضا إذا كان هذا في آخر يوم من الشهر أو السنة ، النتيجة خطأ في البرمجة ، لا ينفذ الأمر المطلوب.

** إن شاء الله أضيف كود تحويل التاريخ الهجري إلى الميلادي في هذا الموضوع :
ويتضمن تحويل التاريخ إلى الهجري، والإضافة إلى توقيت مكة شرفها الله واليوم من الأسبوع

لعرض كل من الأذكار (الصباح والمساء) في وقته ، نستخدم جملة شرطية If [ إذا كذا نفذ كذا ]

- في الحالة الأولى (الصباح) استخدمنا جملة شرطية if statement.
- في الحالة الثانية (المساء) أيضا يمكن أن نطبق الجملة الشرطية لكن استخدمنا حلقة for loop (كمثال على كيفية استخدام الحلقة) والله الموفق

تنبيه:
عندما يكون لدينا خياران فقط نعم أو لا يفضل أن نستخدم الجمل الشرطية.

أولا : الجملة الشرطية:

If statement: تركيبها :

كود:

if (شرط أو أكثر) {
نفذ الأمر .....}

==	يساوي
=!	لا يساوي
<=	أكبر من أو يساوي
>=	أصغر من أو يساوي
<	أكبر من
>	أصغر من

- في الكود لم نحدد ساعة معينة (وقت صلاة الفجر أو العصر) لأننا لم نحدد شهر معين فاستخدمنا المدى الموجود في الكود
الفجر: من 4 إلى 6
العصر : من 3 إلى ما قبل 7
وهذا وقت تقريبي لهاتين الصلاتين خلال العام، وحتى نعبر عن هذا المدى استخدمنا شرط مركب في الحالة الأولى (الصباح)

الشرط الأول : أن تكون مساوية لـــ4 أو أن تكون أكبر 5 ، 6 ، 7 ...الخ
&& : و (والمراد أنها بالإضافة للشرط السابق)
الشرط الثاني: أن تكون مساوية لـــ6 أو أقل 5 و 4 الخ

النتيجة : 4 و 5 و 6
في هذه الساعات إن شاء الله- سوف يتم تشغيل ملف صوتي لأذكار الصباح ويظهر نص " أذكار الصباح "

فائدة: الرمز التالي
|| : أو ( يعني إذا لم تجد الشرط الأول انظر إلى الشرط الثاني)

ثانيا:
for loop
تركيبها :
لدينا مصفوفة asrHrs وتتضمن ساعاتت العشي : [15و 16و 17و 18]
4 ساعات والعنصر الأول يعرف بالعنصر رقم (0) في المصفوفة
asrHrs[0]
0 : 15
1: 16
2: 17
3: 18

كود:

for (var i =0; i < 4; i++){

}

++ : زد رقم واحد
-- : انقص رقم واحد
الشرط : أقل من 4 ، أي أن الحلقة سوف تستمر بتنفيذ الأمر المطلوب منها حتى تصل إلى الرقم 3. والله الموفق
0 ...... تنفيذ الأمر
1 ....... تنفيذ الأمر
2 ....... تنفيذ الأمر
3 ....... تنفيذ الأمر

وما هو الأمر المطلوب تنفيذه ؟؟؟
1- مقارنة الساعة الحالية (بتوقيت مكة المكرمة) بالساعات المعينة في المصفوفة
فإذا تطابقت مع إحداها :
- يتم تشغيل ملف صوتي
- يظهر نص "أذكار المساء"
والله الموفق

القسم الأخير من الكود ، وهو "نص حديث وصورة" يظهران بشرط أن يكون اليوم هو الجمعة من الأسبوع:

أول يوم أو العنصر رقم (0) صفر هو يوم الأحد، لذلك إن شاء الله نعيد تعريف أيام الأسبوع بالأسماء

كود:

 nDay =["الأحد", الإثنين", الثلاثاء","الأربعاء", "الخميس","الجمعة","السبت"]

بما أن الشرط هو أن يكون اليوم الجمعة ، استخدمنا الجملة الشرطية:

كود بلغة HTML:

 if (athkar.getUTCDay() == 5) {

والرقم 5 هو رقم يوم الجمعة يُقارن مع رقم اليوم الحالي حسب التوقيت الدولي

5 يقارن مع

كود بلغة HTML:

athkar.getUTCDay()

حالتان:

* إذا كانا متساويان :
- يظهر نص الحديث والصورة لكتيب آداب يوم الجمعة
* إذا كانا مختلفان: لا يتم تنفيذ الأمر السابق
وبالله التوفيق

كود بلغة HTML:

// آداب يوم الجمعة          
// أول يوم أو العنصر رقم (0) صفر هو يوم الأحد
var nDay = new Array();

nDay[0]= "الأحد";     
nDay[1]= "الإثنين";    
nDay[2]= "الثلاثاء";   
nDay[3]= "الأربعاء";    
nDay[4]= "الخميس";  
nDay[5]= "الجمعة";   
nDay[6]= "السبت";   

if (athkar.getUTCDay() == 5) { 

     document.write("<p><span class=TxtJ> ~*~ اليوم " + nDay[5]+" ~*~ </span>");
   document.write("<p><span class=TxtJ> ~*~ عَنْ أَبِي  إِسْحَاقَ عَنْ أَنَسٍ قَالَ : قَالَ رَسُولُ اللَّهِ - صَلَّى اللَّهُ  عَلَيْهِ وَسَلَّمَ : أَكْثِرُوا الصَّلَاةَ عَلَىَّ يَوْمَ الْجُمُعَةِ  وَلَيْلَةَ الْجُمُعَةِ ، فَمَنْ صَلَّى عَلَىَّ صَلَاةً صَلَّى اللَّهُ  عَلَيْهِ عَشْرًا. السنن الكبرى للبيهقي~*~ </span>");
   document.write("<p><a  href=http://www.afaqattaiseer.com/vb/uploaded/2620_11346941426.jpg>"+"<img  src='http://www.afaqattaiseer.com/vb/uploaded/2620_11346941426.jpg'  border=0 height=120 width=160 />"+"</a>");
}        
        

</script> 
</center>

</body> 

</html>

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

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

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)