İnternet Programlama-I JAVASCRİPT -örnekler-
ÖRNEK UYGULAMALAR 1) SAYI TAHMİN OYUNU (0-100 ARASI) RastGeleSayi=Math.random(); Sayi=parseInt(RastGeleSayi*10); (0-10 ARASI RASTGELE SAYI ÜRETİR) var rastgeleSayi = Math.random() 0 ile 1(0 dahil, 1 hariç) arasında rastgele sayı döndürür.
ÖRNEK UYGULAMALAR <html> <body> <script type="text/javascript"> RastGeleSayi=Math.random(); Sayi=parseInt(RastGeleSayi*100); k=0; do{ Cevap=prompt((++k)+" Tahmininiz için Sayı Giriniz"); if(Cevap!=Sayi){ alert((Cevap<Sayi?"Büyük":"Küçük")+" Giriniz"); } }while(Cevap!=Sayi); alert("Bravo Bildiniz Tutulan Sayı " + Sayi +" "+k+".tahminde buldunuz"); </script> </body> </html>
ÖRNEK UYGULAMALAR 2) Tablo satır numarasına göre hizalama yaptıran program.
ÖRNEK UYGULAMALAR <html> <head> <title>rows dizisi</title> <script language="JavaScript"> function satir() { var y=document.forms.form_satir.hiza.selectedIndex var z=document.forms.form_satir.satir_no.selectedIndex tablo.rows[z].align=document.forms.form_satir.hiza.options[y].text } </script> </head> <body> Aşağıdaki komutları ve bu komutları uygulayacağınız satır numarasını seçin ve düğmeye basın:<br>
ÖRNEK UYGULAMALAR <form name="form_satir"> align: <select name="hiza"> <option>left <option>center <option>right </select> Satır no: <select name="satir_no"> <option>1 <option>2 <option>3 <option>4 <option>5 </select><br><br> <input type="button" value="bas" onclick="satir()"><br> </form>
ÖRNEK UYGULAMALAR <table id="tablo" border="2" cellspacing="3" cellpadding="3" width="500"> <tr><td>satır1 sütun1</td><td>satır1 sütun2</td></tr> <tr><td>satır2 sütun1</td><td>satır2 sütun2</td></tr> <tr><td>satır3 sütun1</td><td>satır3 sütun2</td></tr> <tr><td>satır4 sütun1</td><td>satır4 sütun2</td></tr> <tr><td>satır5 sütun1</td><td>satır5 sütun2</td></tr> </table><br><br> </body> </html>
ÖRNEK UYGULAMALAR İmlecin sayfadaki konumuna göre kod yazmak isteyebiliriz. İmlecin hangi yatay ve düşey koordinatlarda olduğunu belirlemek için clientX, clientY veya offsetX, offsetY veya x, y olay komutlarından yararlanılır.
ÖRNEK UYGULAMALAR 3) Fare konumunu bulma
ÖRNEK UYGULAMALAR <html> <head> <title>Pencere koordinatları</title> <script language="JavaScript"> function imlec() { var a=event.x var b=event.y yazi.innerHTML="Pencere Koordinatları = (" + a + ";" + b + ")" } </script> </head> <body onclick="imlec()"> <h3 id="yazi">Fareyle sayfanın üzerine tıklayınız.</h3> </body> </html>
ÖRNEK UYGULAMALAR 4) Pencere uygulaması
ÖRNEK UYGULAMALAR <html> <head> <body> <script type="text/javascript"> function GoogleGit() { window.open ("http://www.google.com","Google", "width=1024 height=768") } </script> <body> <input type="button" value="Google" onclick="GoogleGit()"/> </body> </head> </html>
ÖRNEK UYGULAMALAR 6) Dijital saat
ÖRNEK UYGULAMALAR <TABLE BORDER=4 BGCOLOR=CYAN> <TR><TD> <FORM NAME="clock_form"> <INPUT TYPE=TEXT NAME="clock" SIZE=20> </FORM> <SCRIPT LANGUAGE="JavaScript"> function clockTick() { currentTime = new Date(); tarih = currentTime.toLocaleString(); document.clock_form.clock.value = " "+tarih; document.clock_form.clock.blur(); setTimeout("clockTick()", 1000);
ÖRNEK UYGULAMALAR } clockTick(); </SCRIPT> </TD></TR> </TABLE>
ÖRNEK UYGULAMALAR 7) Arkaplan değişen renk
ÖRNEK UYGULAMALAR <html> <head> <body bgcolor="#006000" onload="greenizer()"> <script> function MakeArray(n) { //allow new array to be made below... this.length = n for (i = 0;i<n;i++) this[i] = null } green = new MakeArray(10) g = 0 a = true
ÖRNEK UYGULAMALAR green[1] = "#006011" green[2] = "#007022" green[3] = "#008033" green[4] = "#009044" green[5] = "#00A055" green[6] = "#00B066" green[7] = "#00C077" green[8] = "#00D088" green[9] = "#00E099" green[10] = "#00F000"
ÖRNEK UYGULAMALAR function greenizer() { if(a == true) { g++ } if(g==11) { g-- a = false if(g==1) { a = true
ÖRNEK UYGULAMALAR if(a == false) { g-- } document.bgColor = green[g] setTimeout ("greenizer()",100) </script> </body> </head> </html>
ÖRNEK UYGULAMALAR soru-cevap formu
ÖRNEK UYGULAMALAR <html > <head> <title>ornekler</title> <script type="text/javascript" language="javascript"> function sorular(form) { form.cevap.value= form.soru.options[form.soru.selectedIndex].value; } </script> </head> <body> <form name=form> <table border=2 cellspacing=0 cellpadding=10> <tr bgcolor="#CEA78C"> <td align=center><font face="verdana,arial" size="-1" color="#000000">
ÖRNEK UYGULAMALAR <b>Soru Cevap Örnek Form</b></font></td></tr> <tr bgcolor="#E8E3E0"><td><font face="verdana,arial" size="2"><br> <center> Soruların üzerine tıklayarak yanıtlarını görebilirsiniz.</center> <p> <ul><select size=10 name=soru onChange="sorular(this.form);"> <option value="......CEVAPLAR....."> --> ......SORULAR...... <option value="internet prog"> --> Şu anda hangi sayfadayız? <option value="cevap 2"> --> Soru 2 <option value="Cevap 3"> --> Soru 3 <option value="Cevap 4"> --> Soru 4 </select> </ul> <p align="center"> Yanıtlar: <p> <textarea name="cevap" rows=15 cols=50 > </body>
ÖRNEK UYGULAMALAR <p align="center"> Yanıtlar: <p> <textarea name="cevap" rows=15 cols=50 > </body>
ÖRNEK UYGULAMALAR Kayan yazılı buton
ÖRNEK UYGULAMALAR <SCRIPT LANGUAGE="JavaScript"> var message=" Anasayfa ";//Mesajınızı Buraya Yazınız.. function ButtonURL(){ window.location="index.html" } function scroll() { message = message.substring(1,message.length) + message.substring(0,1); document.form.buton.value = message; setTimeout("scroll()",300);
ÖRNEK UYGULAMALAR window.onload=scroll document.write('<style type="text/css">') document.write('.select{background:yellow;border-color:"yellow";color:"white";font-family:Arial,Helvetica,Verdana;font-size:10pt;font-weight: bold;}') document.write('</STYLE>') document.write('<form name=form><INPUT class="select" TYPE="button" NAME="buton" value="" onclick="ButtonURL()"></FORM>') </script>
ÖRNEK UYGULAMALAR Otomatik olarak pencere kapatmak
ÖRNEK UYGULAMALAR <html> <head> <script language="javascript"> var timer = null; function pencerekapat() { pencere.close(); } function pencereac() config="scrollbars=no,width=400,height=250,left=200,top=200"; pencere= window.open("","pencere",config); pencere.document.write("<Html><Body bgcolor='yellow' text='red' ");
ÖRNEK UYGULAMALAR pencere.document.write('<center><h1> Bu pencere 3 sn sonra otomatik olarak kapanır. </h1></center>'); pencere.document.write ("</Body></Html>"); timer=setTimeout("pencerekapat()",3000); /* 3000 = 3 saniye */ } </script> </head> <body> Açılan bir pencerenin otomatik olarak kapatılması.<br> <a href="#" onClick="pencereac()">Pencereyi Aç </a> </body>
ÖRNEK UYGULAMALAR Hareketli menü
ÖRNEK UYGULAMALAR <html> <head> <style type="text/css"> .menulinks {position:relative;} #menucont a{color:#006699; font-weight:bold; text-decoration:none;} #menucont a:hover{color:#ff0000; font-weight:bold; text-decoration:underline overline; text-transform: uppercase;} </style>
ÖRNEK UYGULAMALAR <SCRIPT LANGUAGE="JavaScript"> nSpace=7 // harfler arası max boşluk nSpeed=200 // Animasyonun Hızı timerLSM=null; function LetterSpacingMenu() { if(document.getElementById){ lnks = Math.floor(Math.random()*lnk.length); letterSpacing = Math.floor(Math.random()*nSpace); lnk[lnks].style.letterSpacing = letterSpacing + "px"; timerLSM = setTimeout("LetterSpacingMenu()", nSpeed); }
ÖRNEK UYGULAMALAR function StopMenu() { if(document.getElementById) { clearTimeout(timerLSM); for(i=0;i<lnk.length;i++) lnk[i].style.letterSpacing = 0 + "px"; }
ÖRNEK UYGULAMALAR function LSMenuInit() { if(document.getElementById) { lnk = document.getElementById("menucont").getElementsByTagName("a"); cnt = document.getElementById("menucont"); cnt.style.textAlign= "center"; cnt.onmouseover=StopMenu; cnt.onmouseout=LetterSpacingMenu; LetterSpacingMenu(); } } onload=LSMenuInit; </script></head> <body>
ÖRNEK UYGULAMALAR <div id="menucont"> <a href="http://Anasayfa.html" title="Yeni ipucu siteniz">Anasayfa</a><br> <a href="http://Forumlar.html" id="a2" class="menulinks" title="Forumlar bölümü">Forumlar</a><br> <a href="http://Asp.html" id="a1" class="menulinks" title="Yeni ipucu siteniz">ASP İpuçları</a><br> <a href="http://Php.html" id="a1" class="menulinks" title="Yeni ipucu siteniz">PHP İpuçları</a><br> <a href="http://javascript.html" id="a1" class="menulinks" title="Yeni ipucu siteniz">Javascript İpuçları</a><br>
ÖRNEK UYGULAMALAR <a href="http://Haberler" id="a1" class="menulinks" title="Yeni ipucu siteniz">Haberler</a><br> <a href="http://Yeni.html" id="a1" class="menulinks" title="Yeni ipucu siteniz">Yeni Başlayanlar İçin</a><br> </div> </body> </html>
ÖRNEK UYGULAMALAR Romen Rakamları
ÖRNEK UYGULAMALAR <html> <head> <script LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> function toRoman(f){ if (isNaN(f.input.value)){ alert("Lütfen bir rakam girin.") f.input.value = "" } if (parseInt(f.input.value) > 2500){ alert("Lütfen 1 ile 2500 arasında bir rakam girin")
ÖRNEK UYGULAMALAR var input = document.forms[0].input.value var romDate = "" while (input > 999){ input = input - 1000 romDate = romDate + "M " } if (input >= 900){ input = input - 900 romDate = romDate + "CM " } if (input >= 500){ input = input - 500 romDate = romDate + "D " }
ÖRNEK UYGULAMALAR while (input > 99){ input = input - 100 romDate = romDate + "C " } if (input >= 90){ input = input - 90 romDate = romDate + "XC " } if (input >= 50){ input = input - 50 romDate = romDate + "L " } if (input >= 40){ input = input - 40 romDate = romDate + "XL " }
ÖRNEK UYGULAMALAR while (input > 9){ input = input - 10 romDate = romDate + "X" } if (input == 9){ input = input - 9 romDate = romDate + "IX" } if (input >= 5){ input = input - 5 romDate = romDate + "V" } if (input == 4){ input = input - 4 romDate = romDate + "IV" }
ÖRNEK UYGULAMALAR while (input > 0){ input = input - 1 romDate = romDate + "I" } f.result.value = romDate romDate = "" }// end of function toRom function fromRoman(f){ if (!isNaN(document.forms[1].input.value)){ alert ("Lütfen romen rakamını girin.") document.forms[1].input.value = ""
ÖRNEK UYGULAMALAR var output = 0 var romDate = document.forms[1].input.value.toUpperCase() for (var i = 0; i < f.input.value.length; i++){ if (romDate.charAt(i) == "M"){ output += 1000} if (romDate.charAt(i) == "D"){ output += 500} if (romDate.charAt(i) == "C"){ output += 100} if (romDate.charAt(i) == "L"){ output += 50}
ÖRNEK UYGULAMALAR if (romDate.charAt(i) == "X"){ output += 10} if (romDate.charAt(i) == "V"){ output += 5} if (romDate.charAt(i) == "I"){ output += 1} } if (romDate.indexOf("CM")!= -1){ output -= 200} if (romDate.indexOf("XC")!= -1){ output -= 20}
ÖRNEK UYGULAMALAR if (romDate.indexOf("XL")!= -1){ output -= 20} if (romDate.indexOf("IX")!= -1){ output -= 2} if (romDate.indexOf("IV")!= -1){ if (output == 0){output = ""} f.result.value = output output = 0 } </script>
ÖRNEK UYGULAMALAR <title>Romen Rakamları</title> </head> <h2><small><font face="Verdana">Normal Rakamları Romen Rakamına Çevir</font></small></h2> <form> <p><small><font face="Verdana">SAYI YAZ: <input TYPE="TEXT" NAME="input" SIZE="8"> <input TYPE="BUTTON" VALUE=" Çevir " onClick="toRoman(this.form)"> SONUÇ : <input TYPE="text" NAME="result" SIZE="8"> <input TYPE="reset" VALUE=" Reset "> </font></small></p> </form>
ÖRNEK UYGULAMALAR <h2><small><font face="Verdana">Romen Rakamlarını Normal Rakama Çevir</font></small></h2> <form> <p><small><font face="Verdana">SAYI YAZ: <input TYPE="TEXT" NAME="input" SIZE="8"> <input TYPE="BUTTON" VALUE=" Çevir " onClick="fromRoman(this.form)"> SONUÇ: <input TYPE="text" NAME="result" SIZE="9"> <input TYPE="reset" VALUE=" Reset "> </font></small></p> </form> </body> </html>