دليل المعهد | طريقة الدراسة| التأصيل العلمي| فريق العمل

العودة   معهد آفاق التيسير للتعليم عن بعد > الأقسام العامة > المنتديات > المنتدى التقني > دورة أسس (html)

موضوع مغلق
 
أدوات الموضوع إبحث في الموضوع انواع عرض الموضوع
  #1  
قديم 19 محرم 1434هـ/2-12-2012م, 06:43 AM
سامية السلفية سامية السلفية غير متواجد حالياً
برنامج الإعداد العلمي - المتابعة الذاتية
 
تاريخ التسجيل: Apr 2011
المشاركات: 2,007
Lightbulb JavaScript - تطبيق (2) : شرح كود بالغداة والعشي

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

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

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


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

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

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


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

الملفات المرفقة
نوع الملف: txt بالغداة والعشي.txt‏ (2.8 كيلوبايت, المشاهدات 18)
  #2  
قديم 20 محرم 1434هـ/3-12-2012م, 06:55 AM
سامية السلفية سامية السلفية غير متواجد حالياً
برنامج الإعداد العلمي - المتابعة الذاتية
 
تاريخ التسجيل: Apr 2011
المشاركات: 2,007
افتراضي كود : هجري-مكة

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

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


هجري-مكة:
_______

(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



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

الملفات المرفقة
نوع الملف: txt هجري-مكة.txt‏ (7.0 كيلوبايت, المشاهدات 14)

موضوع مغلق

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
تطبيق, javascript

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

البحث المتقدم
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع


الساعة الآن 12:53 PM


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