Javascript Ders Örnekleri -2 Örnek 1 : Aşağıdaki Javascript kodları çalıştığında tarayıcı görüntüsü nasıl olur? JS Kodu var puan=85; if(puan>70) document.write( Notunuz iyi ); else document.write( Notunuz iyi değil ); JS Kodu var puan=65; if(puan>=85) document.write( Notunuz çok iyi ); else if(puan>=70 && puan<85) document.write( Notunuz iyi ); else if(puan>=50 && puan<70) document.write( Notunuz orta ); else document.write( Notunuz zayıf ); JS Kodu var sayi=5; if(sayi<20) document.write( Yenişehir - ); else if(sayi<10) document.write( dicle - ); else document.write( İpekyolu - ); document.write( başak ); 1
Örnek 2 : Kullanıcıdan alınan sayının pozitif, negatif ya da sıfır olup olmadığını ekrana yazan js kodlarını yazınız. var sayi=number(prompt("bir sayı giriniz")); if(sayi>0) document.write("girilen sayı pozitif..."); else if(sayi<0) document.write("girilen sayi negatif..."); else document.write("girilen sayı sıfıra eşit..."); Örnek 3 : Kullanıcıdan alınan iki sayıdan büyük olanını veya eşit olup olmadıklarını alert metodu ile uyarı mesajı şeklinde gösteren js kodlarını yazınız. var x=number(prompt("1.sayıyı gir")); var y=number(prompt("2.sayıyı gir")); if(x>y) alert("1.sayı büyük"); else if(y>x) alert("2.sayı büyük"); else alert("girilen sayilar eşit"); Örnek 4 : Ziyaretçiden alınan sayının tek mi çift mi olduğunu ekrana yazan js kodlarını yazınız.(ternary operatörünü kullanarak yazınız.) var sayi=number(prompt("sayı Giriniz")); (sayi%2==0)?document.write("sayı Çift"):document.write("Sayı Tek"); Örnek 5 : Ziyaretçiden alınan öğrenci notuna göre öğrencinin başarılı olup olmadığını ekrana yazan js kodlarını yazınız.(ternary operatörünü kullanarak yazınız.) var not=number(prompt("notunuzu Giriniz")); (not<50)?document.write("başarısız"):document.write("başarılı"); 2
Örnek 6 : Web sitesi ziyaret edildiğinde bilgisayarın saatine göre 06-11 saatleri arasında Günaydın, 11-19 saatleri arasında İyi Öğlenler, 19-23 saatleri arasında İyi Akşamlar, 23-06 saatleri arasında İyi Geceler mesajını alert metodu ile uyarı mesajı şeklinde gösteren js kodlarını yazınız. var zaman=new Date(); var saat=zaman.gethours(); if(saat>=6&&saat<11) alert("günaydın"); if(saat>=11&&saat<19) alert("iyi Öğlenler"); if(saat>=19&&saat<23) alert("iyi Akşamlar"); if(saat<6) alert("iyi Geceler"); Örnek 7 : Ziyaretçiden alınan mevsim bilgisine göre mevsimdeki ayları ekrana yazan js kodlarını yazınız.(switch-case yapısını kullanarak yapınız) var mevsim=prompt("mevsim Giriniz "); switch(mevsim) case "yaz": document.write("haziran,temmuz,ağustos"); case "kış": document.write("aralık,ocak,şubat"); case "sonbahar": document.write("eylül,ekim,kasım"); case "ilkbahar": document.write("mart,nisan,mayıs"); default: document.write("lütfen mevsim adı giriniz: yaz,kış,sonbahar,ilkbahar"); 3
Örnek 8 : Ziyaretçiden aldığınız mesaj ve renk bilgisine mesajı ekrana yazdıran js kodlarını yazınız. (switch-case yapısını kullanarak yapınız) var yazi=prompt("ifade Giriniz"); var renk=prompt("kırmızı için --->1, Mavi için --->2, Yeşil için ---->3"); switch(renk) case "1": document.write("<font color='#f00'>"+yazi+"</font>"); case "2": document.write("<font color='#00f'>"+yazi+"</font>"); case "3": document.write("<font color='#0f0'>"+yazi+"</font>"); default: document.write("yanlış değer girdiniz"); Örnek 9 : Aşağıdaki js kodlarının tarayıcı görüntülerini bulunuz. for (var i=0; i<5; i++) document.write( JavaScript <br/> ); for (var i=0; i<8; i+=2) document.write( JavaScript <br/> ); Örnek 10 : Prompt komutu ile kullanıcı tarafından girilen sayı kadar kullanıcıdan aldığımız string ifadeyi ekrana yazdıran js kodlarını yazınız.(for yapısı ile yapınız.) var ifade=prompt("metin giriniz"); var sayi=number(prompt("sayı giriniz")); for(var i=0;i<sayi;i++) document.write(ifade+"<br/>"); 4
Örnek 11 : Aşağıdaki js kodlarının tarayıcı görüntülerini bulunuz. var i=2; while(i<5) i++; document.write( JavaScript <br/> ); Örnek 12 : Klavyeden 0 sayısı girilene kadar girilen sayıların toplamını bulan js kodlarını yazınız.(while yapısı ile yapınız..) var sayi,toplam=0,sayac=0; while(sayi!=0) sayac++; sayi=number(prompt(sayac+". sayıyı giriniz [Toplam için 0 giriniz]")); toplam=toplam+sayi; document.write((sayac-1)+" adet sayının toplamı: "+toplam); Örnek 13 : Kullanıcıdan alınan taban uzunluğu ve yükseklik bilgilerine göre üçgenin alanını hesaplayan, kullanıcıya hesaplama işlemine devam etmek isteyip istemediğini soran js kodlarını yazınız.(do while yapısı ile yapınız) do var x=number(prompt("taban kenar uzunluğunu giriniz")); var h=number(prompt("yüksekliği Giriniz")); var alan=(x*h)/2; alert("üçgenin alanı : "+alan); var cvp=prompt("devam mı? Evet:[e] Hayır:[h]"); while(cvp=='e' cvp=='e'); Örnek 14 : Aşağıdaki js kodlarının tarayıcı görüntülerini bulunuz. var sayilar=new Array(3,5,8,6,10); document.write(sayilar[1]); document.write( <br/> ); var x=12; sayilar[1]=x; document.write(sayilar[1]); 5
var denizler=new Array( Marmara, Akdeniz, Ege ); document.write( <br/> ); document.write(denizler.length); var sayilar=new Array(); sayilar[0]=new Array(73,41,34); sayilar[1]=new Array(16,21,47); document.write(sayilar[0][2]); document.write( <br/> ); document.write(sayilar[1][2]); document.write( <br/> ); document.write(sayilar[0][0]); document.write( <br/> ); document.write(sayilar.length); document.write( <br/> ); document.write(sayilar[0].length); var denizler=new Array("Marmara","Akdeniz","Ege"); denizler.push("karadeniz"); denizler.pop(); denizler.pop(); denizler.unshift("karadeniz"); denizler.shift(); delete denizler[1]; 6
var denizler=new Array("Marmara","Akdeniz","Ege"); denizler.splice(0,1); denizler.splice(2,0,"karadeniz"); document.write(denizler.indexof("ege")); document.write(denizler.reverse()); denizler.sort(); Örnek 15: Kullanıcıdan alınan isim bilgisini 20 defa alt alta yazdıran js fonksiyonunu yazınız. JS fonksiyonunu sayfada çağırarak kullanınız. <title>js Fonksiyon Kullanımı</title> function yazdir() var isim=prompt("lütfen adınızı giriniz"); for(var i=0;i<20;i++) document.write((i+1)+" - "+isim); <script>yazdir(); 7
Örnek 16 : Kullanıcının girdiği yaş bilgisine göre kaç gün yaşadığını hesaplayan js fonksiyonunu yazınız. <title>fonksiyona Parametre Verme</title> function gunhesapla(ad,yas) var gun=yas*12*30; document.write("merhaba "+ad+". Toplamda "+gun+" gun yaşamışsınız"); <script> var adiniz=prompt("lütfen adınızı giriniz"); var yasiniz=number(prompt("lütfen yaşınızı giriniz")); gunhesapla(adiniz,yasiniz); Örnek 17 : Girilen sayının karesini hesaplayan ve uygulamaya sayısal değer olarak dâhil eden js fonksiyonunu yazınız. <title>fonksiyondan Değer Alma</title> function karehesapla(x) var karesi=x*x; return karesi; <script> var sayi=number(prompt("karesi alınacak sayıyı giriniz")); var kare=karehesapla(sayi); document.write(sayi+"*"+sayi+"="+kare); 8
Örnek 18 : Aşağıdaki js kodlarının tarayıcı görüntülerini yazınız. document.write(parseint("1915çanakkale")); document.write(parseint("125.98")); document.write(parseint("çanakkale1915")); document.write(parsefloat("19.15")); document.write(parsefloat("19.15çanakkale")); document.write(parsefloat("çanakkale19.15")); var x=14,y=53; var toplam=x+y; document.write("toplam : "+toplam); toplam=string(x)+y; document.write("toplam : "+toplam); var a="18",b=1915; var toplam=a+b; document.write("toplam :"+toplam); toplam=number(a)+b; document.write("toplam :"+toplam); 9
Örnek 19 : Web sayfasına hangi günde olduğumuzu yazdıran js fonksiyonunu switch yapısını kullanarak hazırlayınız. ve HTML Etiketleri <title>js Fonksiyon Örneği</title> function gunyaz(x) switch(x) case 0: document.write("pazar"); case 1: document.write("pazartesi"); case 2: document.write("hoşgeldiniz,bugun Günlerden Salı...:)"); case 3: document.write("çarşamba"); case 4: document.write("perşembe"); case 5: document.write("cuma"); case 6: document.write("cumartesi"); default: document.write("üzgünüz..."); <script> //date nesnesi ve fonksiyonu bize gun bilgisini sayı[0-6] olarak verir var gun=new Date().getDay(); gunyaz(gun); Örnek 20 : Link ile sahneye eklenmiş metin kutusunun içeriğini onclick, onmouseover, onmouseout, onmousedown olayları ile değiştiren uygulamayı yapınız. 10
ve HTML Etiketleri <title>javascript Olaylar - Örnek Uygulama</title> function tiklandivebirakildi() document.getelementbyid('txt_metinkutusu').value="tıklandı ve Bırakıldı"; function ustunde() document.getelementbyid('txt_metinkutusu').value="üstünde"; function ustundedegil() document.getelementbyid('txt_metinkutusu').value="üstünde değil "; function tiklandi() document.getelementbyid('txt_metinkutusu').value="tıklandım"; <input type="text" id="txt_metinkutusu"/><br/> <a href="#" onclick="tiklandivebirakildi()" onmouseover="ustunde()" onmouseout="ustundedegil()" onmousedown="tiklandi()"> EBA </a> Örnek 21 : Aşağıdaki metin kutusunda bir tuşa basıp bırakıldığında basılan karakteri kutunun hemen altındaki div içerisinde gösteren sayfayı js fonksiyonu kullanarak yapınız.. ve HTML Etiketleri <title>javascript Olaylar - Örnek Uygulama</title> function yaz() var mtn=document.getelementbyid("metin").value; document.getelementbyid("etiket").innerhtml=mtn; <input type="text" id="metin" onkeyup="yaz()"/> <div id="etiket"></div> 11
Örnek 22 : Aşağıdaki kod bloğunda göster/gizle yazısının üstüne gelince JavaScript yazan bir div gösterilmektedir. Göster/gizle yazısının üstünden çekilince div gizlenmektedir. Başlangıçta div gizlidir. Boşlukları uygun biçimde doldurunuz. ve HTML Etiketleri <title>javascript Olaylar - Örnek Uygulama</title> function goster() document.getelementbyid("kutu").style.display='block'; function gizle() document.getelementbyid("kutu").style.display=' '; <style type="text/css"> #kutudisplay:none; </style> <div onmouseover=" " ="gizle()">göster/gizle</div> <div id=" ">JavaScript</div> Örnek 23 : Açılır listeden seçilen elemanı H1 başlığına aktaran uygulamayı yapınız. Listede HTML, CSS, JavaScript ve ASP.Net olsun. Ziyaretçi birini seçtiğinde başlığa aktaran sayfayı gerçekleştiriniz. ve HTML Etiketleri <title>javascript Olaylar - Örnek Uygulama</title> function goster() var deger=document.getelementbyid("sehir").value; document.getelementbyid("baslik").innerhtml=deger; <select id="sehir" onclick="goster()"> <option value="">seçiniz</option> <option value="html">html</option> <option value="css">css</option> <option value="javascript">javascript</option> <option value="asp.net">asp.net</option> </select> <h1 id="baslik"></h1> 12