معهد آفاق التيسير للتعليم عن بعد

معهد آفاق التيسير للتعليم عن بعد (http://afaqattaiseer.net/vb/index.php)
-   دورة أسس (html) (http://afaqattaiseer.net/vb/forumdisplay.php?f=652)
-   -   JavaScript - تطبيق (2) : شرح كود بالغداة والعشي (http://afaqattaiseer.net/vb/showthread.php?t=19557)

سامية السلفية 19 محرم 1434هـ/2-12-2012م 06:43 AM
JavaScript - تطبيق (2) : شرح كود بالغداة والعشي
 
1 مرفق
بسم الله الرحمن الرحيم

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

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

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

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

سامية السلفية 20 محرم 1434هـ/3-12-2012م 06:55 AM
كود : هجري-مكة
 
1 مرفق
بسم الله الرحمن الرحيم

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


هجري-مكة:
_______

(1) التاريخ الهجري / والميلادي
(2) اليوم من الأسبوع
(3) الساعة حسب توقيت مكة شرفها الله


كود بلغة HTML:
<html dir="rtl">

<head>

<title>هجري/مكة</title>


<script type="text/javascript">

var plyAdo = new Date();

function inpart(floatNum){

if (floatNum< -0.0000001){
return Math.ceil(floatNum-0.0000001);
}

return Math.floor(floatNum+0.0000001);
}

 // == إعادة تعريف رقم الشهر بحيث يكون العنصر (0) هو شهر 1 أو يناير

      var mnth=new Array();

      mnth[0]=01;
      mnth[1]=02;
      mnth[2]=03;
      mnth[3]=04;
      mnth[4]=05;
      mnth[5]=06;
      mnth[6]=07;
      mnth[7]=08;
      mnth[8]=09;
      mnth[9]=10;
      mnth[10]=11;
      mnth[11]=12;

      var mnthnum = mnth[plyAdo.getUTCMonth()];


  d=plyAdo.getUTCDate();
  year=plyAdo.getUTCFullYear();

  if (year < 1000 ) {
  year+=1900;
  } 
  //year = 1900+hjri.getYear()
  var month = plyAdo.getUTCMonth() + 1 //getUTCMonth() returns 0-11
  var day = plyAdo.getUTCDate()
  var hour = plyAdo.getUTCHours()
  var min = plyAdo.getUTCMinutes()
  var sec = plyAdo.getUTCSeconds()
  var univTime = hour+(min/60)+(sec/3600)
  if ((100*year+month-190002.5) >= 0) {
  var sign = 1;
  }
      else {
      var sign = -1;
      }
      var part1 = 367 * year;
      var part2 = Math.floor((7*(year+Math.floor((month+9)/12)))/4);
      var part3 = day+Math.floor((275*month)/9);
      var part4 = 1721013.5+(univTime/24);
      var part5 = 0.5*sign;
      var jd = part1-part2+part3+part4-part5+0.5+0.625; //0.625 = 3 hours  add + 3 hours to get makkah time

// julian to hijri:
   
      var l=jd-1948440+10632;
      var n=inpart((l-1)/10631);
      var l=l-10631*n+354;
      var j=(inpart((10985-l)/5316))*(inpart((50*l)/17719))+(inpart(l/5670))*(inpart((43*l)/15238));
      var l=l-(inpart((30-j)/15))*(inpart((17719*j)/50))-(inpart(j/16))*(inpart((15238*j)/43))+29;
      var m=inpart((24*l)/709);
      var d=Math.floor(l-inpart((709*m)/24));
      var yhjri=30*n+j-30;
     
   
// remember that; we add 3 hours(0.625 in julian) when we calculate jdk inorder to get time in makkah:
// julian to gregorian with time hh:mm:ss
     
      var X = jd;
      var Z = Math.floor(X);
      var F = X - Z;
      var Y = Math.floor((Z-1867216.25)/36524.25);
      var A = Z+1+Y-Math.floor(Y/4);
      var B = A+1524;
      var C = Math.floor((B-122.1)/365.25);
      var D = Math.floor(365.25*C);
      var G = Math.floor((B-D)/30.6001);
      month = (G<13.5) ? (G-1) : (G-13);
      year = (month<2.5) ? (C-4715) : (C-4716);
      month -= 1; // month in JavaScript is from 0 to 11
      UT = B-D-Math.floor(30.6001*G)+F;
      day = Math.floor(UT);
      UT -= Math.floor(UT);
      UT *= 24;
      hour = Math.floor(UT);
      UT -= Math.floor(UT);
      UT *= 60;
      minute = Math.floor(UT);
      UT -= Math.floor(UT);
      UT *= 60;
      second = Math.round(UT);
     
      var wstMnth=new Array();

      wstMnth[0]="يناير";
      wstMnth[1]="فبراير";
      wstMnth[2]="مارس";
      wstMnth[3]="ابريل";
      wstMnth[4]="مايو";
      wstMnth[5]="يناير";
      wstMnth[6]="يوليو";
      wstMnth[7]="اغسطس";
      wstMnth[8]="سبتمبر";
      wstMnth[9]="اكتوبر";
      wstMnth[10]="نوفمبر";
      wstMnth[11]="ديسمبر";
     
      var Hjrnam= new Array();

      Hjrnam[1]="محرم";
      Hjrnam[2]="صفر";
      Hjrnam[3]="ربيع الأول";
      Hjrnam[4]="ربيع الثاني";
      Hjrnam[5]="جمادى الأولى";
      Hjrnam[6]="جمادى الآخره";
      Hjrnam[7]="رجب";
      Hjrnam[8]="شعبان";
      Hjrnam[9]="رمضان";
      Hjrnam[10]="شوال";
      Hjrnam[11]="ذي القعدة";
      Hjrnam[12]="ذي الحجة";   
     
// == أيام الأسبوع
// plyAdo.getDay() >> by default : 0=sun,1=mon,2=tues,3=wed,4=thr,5=fri,6=sat

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

    var monthVal= new Array();
    monthVal[0]=0;            // January
    monthVal[1]=3;            // Febreuary
    monthVal[2]=10;
    monthVal[3]=6;
    monthVal[4]=1;
    monthVal[5]=4;
    monthVal[6]=6;
    monthVal[7]=2;
    monthVal[8]=5;
    monthVal[9]=7;
    monthVal[10]=10;
    monthVal[11]=5;          // December
   
    var mnthCode=monthVal[month];    // month code/value from monthVal 
    var Leap=0;                    // default no leap year
    var g=(year%100);                // last two digits of year
    var k=g%4;                    // remainder of last two digits of year divided by four
    var h=(g-k)/4;                    // last two digits of year divided by four dropping the fraction
    var c=((year-g)/100)%4;                // remainder of century divided by four
    var p=year%100;                    // if year is divisible by 100 answer is 0
    var q=year%400;                    // if year is divisible by 400 answer is 0
    if (mnthCode==0 && k==0) {Leap=1};
    if (mnthCode==3 && k==0) {Leap=1};    // m=3 >> month value febreuary
    if (mnthCode==0 && p==0) {Leap=0};
    if (mnthCode==3 && p==0) {Leap=0};
    if (mnthCode==0 && q==0) {Leap=1};
    if (mnthCode==3 && q==0) {Leap=1};
   
    var dywkF =day+mnthCode+g+h+6-2*c-Leap;  // Day of week formula
        var dayN = dywkF%7;                      // dayN = index of day of week  -- رقم اليوم من الأسبوع، يبدأمن الأحد : 0 1 2 3 4 5 6

     
    var Gdate = day + "-" + mnth[month]+"-"+year;    // calendar date  -- الميلادي
 

//============================================================

        function nowDate(){
        var oNowTime=new Date();
        var iMonth=m;
        var iDate=d;
        var iYear=yhjri;
        var iMinutes=oNowTime.getMinutes();
        var iSeconds=oNowTime.getSeconds();
        var iMilliSeconds=oNowTime.getMilliseconds();
       
      //24 Hours//var iHH;
        if (oNowTime.getUTCHours() <= 20) {var iHH=oNowTime.getUTCHours()+3; }   
        if (oNowTime.getUTCHours() > 20) {var iHH=(oNowTime.getUTCHours()-24)+3; }   

        //12 Hours//iHours 
        if (oNowTime.getUTCHours() <= 20) {
            if (oNowTime.getUTCHours() <= 9) {
                var iHours=oNowTime.getUTCHours()+3;
                var iTime= iHours+":"+iMinutes+":"+iSeconds + " صباحًا ";
            }
            if (oNowTime.getUTCHours() > 9) {
                var iHours=(oNowTime.getUTCHours()+3)-12;
                var iTime= iHours+":"+iMinutes+":"+iSeconds + " مساءًا ";
            }               
        }   
        if (oNowTime.getUTCHours() > 20) {
            var iHours=(oNowTime.getUTCHours()-24)+3;
            var iTime= iHours+":"+iMinutes+":"+iSeconds + " صباحًا ";
 
        }   
       

        var NowTime=iYear+"-"+iMonth+"-"+iDate + " | " +Gdate +"<br>"+"الساعة الآن في مكة شرفها الله"+"&nbsp;"+iTime+"<p>";  // time in makkah

        return NowTime
       
        }


        function ShowMeTime(){
        var mkId=document.getElementById("mkdate");
        mkId.innerHTML=nowDate();
        setTimeout("ShowMeTime()",1000);
        }

</script>

</head>

<body onload="ShowMeTime()">

<center>

<span>
<div id="mkdate">*****</div>
</span>

</body>

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


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


الساعة الآن 02:06 AM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir