::التربوي الإسلامي العربي::دليل لبعض شفرات جافا لعديد من الوظائف

صورة في الخلفية ثابتة		الاسم
<body>		المكان
<script language="JavaScript1.2"> if (document.all) document.body.style.cssText="background:white url(question.gif) no-repeat fixed center center" </script>		الكود
يمكنك وضع صورة تكون ثابتة في خلفية الصفحة ولكنها ليس كخلفية اي انها لا تتضاعف لملئ الصفحة ولكنها ستضل كما هي		توضيح
اضغط هنا		مثال

صور اختيارية للخلفية		الاسم
<head>	<body>	المكان
<style> .bgimages img {cursor:hand} </style>	<script language="JavaScript1.2"> <!-- function tile(){ if (!document.all) return var source=event.srcElement if (source.tagName=="IMG") document.body.style.backgroundImage="url("+source.src+")" } function restore(){ document.body.style.backgroundImage='' } document.body.onclick=restore //--> </script> <span class="bgimages" onClick="tile();event.cancelBubble=true"> <p><img src="1.jpg" width="80" height="80"><img src="2.jpg" width="80" height="80"><br> <img src="3.jpg" width="80" height="80"><img src="4.jpg" width="80" height="80"></span> </p>	الكود
زين موقعك بعدة صور للخلفية يمكن للزائر اختيار هذه الخلفية وذلك بالضغط على الصورة		توضيح
اضغط هنا		مثال

شرح متحرك على رابط		الاسم
<head>	<body>	المكان
<script> if (!document.layers&&!document.all) event="test" function showtip2(current,e,text){ if (document.all&&document.readyState=="complete"){ document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>' document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10 document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10 document.all.tooltip2.style.visibility="visible" } else if (document.layers){ document.tooltip2.document.nstip.document.write('<b>'+text+'</b>') document.tooltip2.document.nstip.document.close() document.tooltip2.document.nstip.left=0 currentscroll=setInterval("scrolltip()",100) document.tooltip2.left=e.pageX+10 document.tooltip2.top=e.pageY+10 document.tooltip2.visibility="show" } } function hidetip2(){ if (document.all) document.all.tooltip2.style.visibility="hidden" else if (document.layers){ clearInterval(currentscroll) document.tooltip2.visibility="hidden" } } function scrolltip(){ if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width) document.tooltip2.document.nstip.left-=5 else document.tooltip2.document.nstip.left=150 } </script>	<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:ffcb10"><layer name="nstip" width="1000px" bgColor="#ffcb10"> </layer> </div> <a href="index.htm" onMouseover="showtip2(this,event,'Click Here If You Would Like to View A Static ToolTip ALthough This looks Better!')" onMouseout="hidetip2()">Main Index</a> <br>	الكود
ضع توضيح متحرك على رابط معين يمكنك ان تشرح لزوارك ما يحنويه هذا الرابط بطريقة رائعة		توضيح
اضغط هنا		مثال

صفحة متحركة من فوق الى تحت		الاسم
<body>		المكان
<script language="JavaScript1.2"> //change 1 to another integer to alter the scroll speed. Greater is faster var speed=1 var currentpos=0,alt=1,curpos1=0,curpos2=-1 function initialize(){ startit() } function scrollwindow(){ if (document.all) temp=document.body.scrollTop else temp=window.pageYOffset if (alt==0) alt=1 else alt=0 if (alt==0) curpos1=temp else curpos2=temp if (curpos1!=curpos2){ if (document.all) currentpos=document.body.scrollTop+speed else currentpos=window.pageYOffset+speed window.scroll(0,currentpos) } else{ currentpos=0 window.scroll(0,currentpos) } } function startit(){ setInterval("scrollwindow()",10) } window.onload=initialize </script>		الكود
هل تريد ان يقرأ الزائر صفحتك بطريقة ممتعة هذه الجافا تعمل على تحريك الصفحة من أعلى الى اسفل		توضيح
اضغط هنا		مثال

الة حاسبة		الاسم
<body>		المكان
<!-- ONE STEP TO INSTALL ADVANCED CALCULATOR: 1. Paste the coding into the BODY of your HTML document --> <!-- STEP ONE: Copy this code into the BODY of your HTML document --> <BODY> <CENTER> <FORM name="Keypad" action=""> <!-- Original: http://www.dummyproof.com/javascripts --> <!--Total Java Scripts 99 - Next Step Software--> <TABLE> <B> <TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5> <TR> <TD colspan=3 align=middle> <input name="ReadOut" type="Text" size=24 value="0" width=100%> </TD> <TD </TD> <TD> <input name="btnClear" type="Button" value=" C " onclick="Clear()"> </TD> <TD><input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()"> </TD> </TR> <TR> <TD> <input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)"> </TD> <TD> <input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)"> </TD> <TD> <input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)"> </TD> <TD> </TD> <TD> <input name="btnNeg" type="Button" value=" +/- " onclick="Neg()"> </TD> <TD> <input name="btnPercent" type="Button" value=" % " onclick="Percent()"> </TD> </TR> <TR> <TD> <input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)"> </TD> <TD> <input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)"> </TD> <TD> <input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)"> </TD> <TD> </TD> <TD align=middle><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')"> </TD> <TD align=middle><input name="btnMinus" type="Button" value=" - " onclick="Operation('-')"> </TD> </TR> <TR> <TD> <input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)"> </TD> <TD> <input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)"> </TD> <TD> <input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)"> </TD> <TD> </TD> <TD align=middle><input name="btnMultiply" type="Button" value=" * " onclick="Operation('')"> </TD> <TD align=middle><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')"> </TD> </TR> <TR> <TD> <input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)"> </TD> <TD> <input name="btnDecimal" type="Button" value=" . " onclick="Decimal()"> </TD> <TD colspan=3> </TD> <TD> <input name="btnEquals" type="Button" value=" = " onclick="Operation('=')"> </TD> </TR> </TABLE> </TABLE> </B> </FORM> </CENTER> <font face="Verdana, Arial, Helvetica" size=2> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var FKeyPad = document.Keypad; var Accum = 0; var FlagNewNum = false; var PendingOp = ""; function NumPressed (Num) { if (FlagNewNum) { FKeyPad.ReadOut.value = Num; FlagNewNum = false; } else { if (FKeyPad.ReadOut.value == "0") FKeyPad.ReadOut.value = Num; else FKeyPad.ReadOut.value += Num; } } function Operation (Op) { var Readout = FKeyPad.ReadOut.value; if (FlagNewNum && PendingOp != "="); else { FlagNewNum = true; if ( '+' == PendingOp ) Accum += parseFloat(Readout); else if ( '-' == PendingOp ) Accum -= parseFloat(Readout); else if ( '/' == PendingOp ) Accum /= parseFloat(Readout); else if ( '' == PendingOp ) Accum = parseFloat(Readout); else Accum = parseFloat(Readout); FKeyPad.ReadOut.value = Accum; PendingOp = Op; } } function Decimal () { var curReadOut = FKeyPad.ReadOut.value; if (FlagNewNum) { curReadOut = "0."; FlagNewNum = false; } else { if (curReadOut.indexOf(".") == -1) curReadOut += "."; } FKeyPad.ReadOut.value = curReadOut; } function ClearEntry () { FKeyPad.ReadOut.value = "0"; FlagNewNum = true; } function Clear () { Accum = 0; PendingOp = ""; ClearEntry(); } function Neg () { FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) -1; } function Percent () { FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum); } // End --> </SCRIPT> <!-- Script Size: 4.05 KB -->		الكود
الة حاسبة ممتعة ومسلية وسهله للغاية كأي آلة أخرى		توضيح
اضغط هنا		مثال

تقويم بالميلادي		الاسم
<body>		المكان
<!-- TWO STEPS TO INSTALL MONTHLY: CURRENT TIME - DAY HIGHLIGHTED: 1. Put the designated code into the BODY of your HTML document --> <!-- STEP ONE: Copy this code into the BODY of your HTML document --> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!--Total Java Scripts 99 - Next Step Software--> <!-- Begin function greeting() { var today = new Date(); var hrs = today.getHours(); document.writeln("<CENTER>"); if ((hrs >=6) && (hrs <=18)) { document.writeln("<IMG SRC=\"blank"); document.write(Math.floor(hrs / 10)); document.write(Math.floor(hrs % 10)); document.write("00.gif\">"); } else document.write(""); document.writeln("<BR>"); document.write("<H1>Good "); if (hrs < 6) document.write("(Early) Morning"); else if (hrs < 12) document.write("Morning"); else if (hrs <= 18) document.write("Afternoon"); else document.write("Evening"); document.writeln("!</H1>"); document.write("You entered this page at "); dayStr = today.toLocaleString(); document.write(dayStr); document.writeln("</CENTER>"); } function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) { this[0] = m0; this[1] = m1; this[2] = m2; this[3] = m3; this[4] = m4; this[5] = m5; this[6] = m6; this[7] = m7; this[8] = m8; this[9] = m9; this[10] = m10; this[11] = m11; } function calendar() { var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec"; var today = new Date(); var thisDay; var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30,31, 30, 31); year = today.getYear() + 1900; thisDay = today.getDate(); if (((year % 4 == 0) && (year % 100 != 0)) \|\| (year % 400 == 0)) monthDays[1] = 29; nDays = monthDays[today.getMonth()]; firstDay = today; firstDay.setDate(1); testMe = firstDay.getDate(); if (testMe == 2) firstDay.setDate(0); startDay = firstDay.getDay(); document.writeln("<CENTER>"); document.write("<TABLE BORDER>"); document.write("<TR><TH COLSPAN=7>"); document.write(monthNames.substring(today.getMonth() * 3, (today.getMonth() + 1) * 3)); document.write(". "); document.write(year); document.write("<TR><TH>Sun<TH>Mon<TH>Tue<TH>Wed<TH>Thu<TH>Fri<TH>Sat"); document.write("<TR>"); column = 0; for (i=0; i<startDay; i++) { document.write("<TD>"); column++; } for (i=1; i<=nDays; i++) { document.write("<TD>"); if (i == thisDay) document.write("<FONT COLOR=\"#FF0000\">") document.write(i); if (i == thisDay) document.write("</FONT>") column++; if (column == 7) { document.write("<TR>"); column = 0; } } document.write("</TABLE>"); document.writeln("</CENTER>"); } greeting(); document.write("</br>"); calendar(); document.write(""); // End --> </SCRIPT> <!-- Script Size: 2.72 KB -->		الكود
تقويم رائع يعرض التقويم الشهري		توضيح
اضغط هنا		مثال

لون للرابط		الاسم
<head>		المكان
<style> <!-- A:link {text-decoration: none; color: لون الوصلة;} A:visited {text-decoration: none; color: الوصلة المزارة;} A:active {text-decoration: none; color:الوصلة عند الضغط عليها; } A:hover {text-decoration: underline; color: الوصلة عند مرور الفأرة عليها;background-color:لون الخلفية ;} //--> </style>		الكود
ضع لون مناسب لخلفية الرابط ... فهي طريقة جميلة لتزيين الروابط		توضيح
اضغط هنا		مثال

عرض شرح في الاطار السفلي من المتصفح Status bar		الاسم
<body>		المكان
<script language="JavaScript"> <!-- var currentmsg = 0 var MsgTime = 2000 var MsgEndTime = 4000 function initArray(n) { this.length = n; for (var i =1; i <= n; i++) { this[i] = ' ' } } msg = new initArray(4) msg[0]="مرحبا بكم في " msg[1]="صفحتي الشخصية" msg[2]="اتمنى ان تنال على اعجابكم" msg[3]="و شكرا على الزياره" function msgrotator() { window.status = msg[currentmsg] if (currentmsg > msg.length - 1) { currentmsg = 0 setTimeout("msgrotator()", MsgEndTime) } else { currentmsg = currentmsg + 1 setTimeout("msgrotator()", MsgTime) } } msgrotator(); //--> </script>		الكود
يمكنك وضع شرح يظهر في اطار المتصفح السفلي ويكون عبارة عن جمل تظهر وتختفي		توضيح
اضغط هنا		مثال

التاريخ باللغة العربية		الاسم
<head>	<body>	المكان
<script LANGUAGE="JavaScript"> <!-- This script and many more are available online from --> <!-- The JavaScript Source!! http://javascriptsource.com --> <!-- Begin var day=""; var month=""; var myweekday=""; var year=""; mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday= mydate.getDate(); weekday= myweekday; myyear= mydate.getYear(); year = myyear if(myday == 0) day = " الأحد, " else if(myday == 1) day = " الأثنين, " else if(myday == 2) day = " الثلاثاء, " else if(myday == 3) day = " الاربعاء, " else if(myday == 4) day = " الخميس, " else if(myday == 5) day = " الجمعة, " else if(myday == 6) day = " السبت, " if(mymonth == 0) { month = "يناير "} else if(mymonth ==1) month = "فبراير " else if(mymonth ==2) month = "مارس " else if(mymonth ==3) month = "ابريل " else if(mymonth ==4) month = "مايو " else if(mymonth ==5) month = "يونيو " else if(mymonth ==6) month = "يوليو " else if(mymonth ==7) month = "اغسطس " else if(mymonth ==8) month = "سبتمبر " else if(mymonth ==9) month = "اكتوبر " else if(mymonth ==10) month = "نوفمبر " else if(mymonth ==11) month = "ديسمبر " // End --> </script>	<script> document.write("<b><font face=Tahoma size=1>" + day +myweekday ); document.write(month + ", " + year + "</font></b>"); </script>	الكود
هذه الجافا تقدم لك التاريخ باللغة العربية		توضيح
اضغط هنا		مثال

ساعة		الاسم
<body>		المكان
<div id=Clock align=center style="font-family: tahoma; font-size: 14; color:لون الساعة"> </div> <script> function tick() { var hours, minutes, seconds, ap; var intHours, intMinutes, intSeconds; var today; today = new Date(); intHours = today.getHours(); intMinutes = today.getMinutes(); intSeconds = today.getSeconds(); if (intHours == 0) { hours = "12:"; ap = "بعد متصف الليل"; } else if (intHours < 12) { hours = intHours+":"; ap = "صباحا"; } else if (intHours == 12) { hours = "12:"; ap = "ظهرا"; } else { intHours = intHours - 12 hours = intHours + ":"; ap = "مساءا"; } if (intMinutes < 10) { minutes = "0"+intMinutes+":"; } else { minutes = intMinutes+":"; } if (intSeconds < 10) { seconds = "0"+intSeconds+" "; } else { seconds = intSeconds+" "; } timeString = hours+minutes+seconds+ap; Clock.innerHTML = timeString; window.setTimeout("tick();", 100); } window.onload = tick; </script>		الكود
ساعة رائعة ضعها اينما تريد في صفحتك		توضيح
اضغط هنا		مثال

رابط متغير الالوان		الاسم
<head>		المكان
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin function initArray() { for (var i = 0; i < initArray.arguments.length; i++) { this[i] = initArray.arguments[i]; } this.length = initArray.arguments.length; } var colors = new initArray( "red", "blue", "green", "purple", "black", "tan", "red"); delay = .5; // seconds link = 0; vlink = 2; function linkDance() { link = (link+1)%colors.length; vlink = (vlink+1)%colors.length; document.linkColor = colors[link]; document.vlinkColor = colors[vlink]; setTimeout("linkDance()",delay*1000); } linkDance(); // End --> </script>		الكود
جميع الروابط بالصفحة تتحول الى روابط متغيرة الالوان		توضيح