Javascript Ders Örnekleri -2. Tarayıcı Görüntüsü

Transkript

1 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

2 Ö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

3 Örnek 6 : Web sitesi ziyaret edildiğinde bilgisayarın saatine göre saatleri arasında Günaydın, saatleri arasında İyi Öğlenler, saatleri arasında İyi Akşamlar, 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

4 Ö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

5 Ö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

6 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

7 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

8 Ö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

9 Ö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

10 Ö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

11 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

12 Ö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