JAVASCRIPT DERSLERİ ANASAYFA ÖNCEKİ DERS SIRADAKİ DERS
Konu başlığına tıklayarak detayları görebilirsiniz!!!
Math objesini javascript ile daha gelişmiş matematik işlemleri yapmak için kullanıyoruz. Javascript içerisinde hazır bulunan bu komutları kullanarak bir kaç örnek ile kullanımlarını göreceğiz.
Örneğimize bir array (liste) oluşturarak başlıyoruz ve listemize üç eleman ekliyoruz ondalıklı sayı olarak. İlk olarak Math.round yani yuvarlama işlemini yapacağız. Math.round kullandığımız rakamı 0.50 den büyükse yukarıya doğru küçükse aşağıya doğru yuvarlar. Yani örneğimizde 1.80 olan rakamı 2'ye, 1.20 olan rakamı 1'e yuvarlayacaktır. Math.floor ile sayımızın ondalık kısmındaki rakam ne olursa olsun aşağıya yuvarlamasını sağlıyoruz. Bu şekilde sadece aşağıya doğru yuvarlama yapar yukarıya doğru yapmaz. Son olarak da listemizi ekrana yazdırmak için daha önce öğrendiğimiz şekilde bir for döngüsü oluşturuyoruz. document.write ile ekrana yazdırmayı tamamlıyoruz. "<br/>" ekleyerek alt alta yazmasını sağlıyoruz düzgün bir görüntü için.
<html>
<head>
<script type="text/javascript">
var matListesi = new Array ();
matListesi[0] = Math.round(1.80);
matListesi[1] = Math.round(1.20);
matListesi[2] = Math.floor(1.99);
for (var i = 0; i < matListesi.length; i++) {
document.write(matListesi[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Math.PI ile program direk matematikten aşina olduğumuz pi (3.14 - 22/7) sayısını direk ekrana yazdırır. Math.E ile program direk E (2.71) sayısını yazar. İstatisksel verilerde kullanılan bir rakamdır genelde.
<html>
<head>
<script type="text/javascript">
var matListesi = new Array ();
matListesi[0] = Math.PI;
matListesi[1] = Math.E;
for (var i = 0; i < matListesi.length; i++) {
document.write(matListesi[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Bir sayının karekökünü (square root) almak için Math.sqrt kullanıyoruz. Bu size parantez içerisinde yazdığınız sayının kareköknü döndürecektir. Math.random kullanarak 0 ile bir arasında rastlantısal bir rakam döndürmesini sağlıyoruz rakamın. Bize hiçbir zaman 0'dan küçük 1'den büyük bir rakam döndürmeyecektir.
<html>
<head>
<script type="text/javascript">
var matListesi = new Array ();
matListesi[0] = Math.sqrt(444);
matListesi[1] = Math.random();
for (var i = 0; i < matListesi.length; i++) {
document.write(matListesi[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Parantez içerisinde belirttiğimiz rakamların en büyüğünü almak için Math.max, en küçüğünü almak için Math.min kullanıyoruz.
<html>
<head>
<script type="text/javascript">
var matListesi = new Array ();
matListesi[0] = Math.max(150, 360, 2189731, 10);
matListesi[1] = Math.min(150, 360, 2189731, 10);
for (var i = 0; i < matListesi.length; i++) {
document.write(matListesi[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Date objesini de Math objesi gibi Javascript içerisinde hazır bulunan kütüphaneler aracalığı ile tarih ve saat işlemlerinde bize yardımcı olması için Javascript geliştiricileri tarafından bize sunulan hazır bir hizmet gibi düşünebilirsiniz.
İlk olarak bulunduğumuz tarihi ekrana yazırmak için tarih adında bir değişken oluşturup ardından yeni bir Date objesi oluşturmasını sağlıyoruz. Sonrasında da klasik socument.write ile tarih değişkenimizle mevcut bulunduğumuz tarihi ekrana yazdırmasını sağlıyoruz.
<html>
<head>
<script type="text/javascript">
var tarih = new Date();
document.write(tarih);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Diyelim ki biz tüm tarihi değil de sadece saati öğrenmek istiyoruz. O zaman da aşğaıdaki şekilde yeni bir saat değişkeni oluşturup tarih değişkenim içerisinden getHours() komutunu kullanarak sadece saati yazıdrmasını söylüyorum. Yine aynı şekilde dakikayı almak için getMinutes() ve getSeconds() metodlarını kullanabiliriz. Değişken isimlerini değiştirmeyi unutmuyoruz her seferinde.
<html>
<head>
<script type="text/javascript">
var tarih = new Date();
document.write(tarih);
document.write("<br/>");
var saat = tarih.getHours();
document.write(saat);
document.write("<br/>");
var dakika = tarih.getMinutes();
document.write(dakika);
document.write("<br/>");
var saniye = tarih.getSeconds();
document.write(saniye);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Eğer sistemden gelen tarih verilerini kullanıp sadece belli kısmını değiştirmek istiyorsak bu sefer get değil set metodunu kullanıyoruz. Diyelim ki sistemden gelen tarih verisinden sadece saati değiştirmek istiyoruz, bu durumda setHours() diyerek bu işlemi gerçekleştirebiliriz aşağıdaki şekilde. Yine dakika, saniye vs. değiştirmek isterseniz setMinutes(), setSeconds ifadelerini kullanabiliriz.
<html>
<head>
<script type="text/javascript">
var tarih = new Date();
document.write(tarih);
document.write("<br/>");
tarih.setHours(20);
document.write(tarih);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Eğer tarihi sistemden almasını değil de kendi belirlediğimiz şekilde olmasını istiyorsak aşağıdaki şekilde herhangi bir alanına müdahale ediyoruz. Bu aşamada dikkat etmemiz gereken bir kaç nokta var. Parantez içerisinde ilk olarak yıl bilgisini giriyoruz. Sonrasında ay kısmında ise array (liste) konusunda öğrendiğimiz üzere Ocak ayının 0'dan başladığını bilmemiz gerekiyor. Biz örneğimizde 5 numaralı ayı belirttiğimizde bize Haziran ayını ekrana yazdıracaktır. 3. sırada da gün bilgisini yazıyoruz. Sonrasında da sırasıyla Saat, Dakika, Saniye, Milisaniye bilgilerini girmiş oluyoruz örneğimizde. Son olarak da yine her zaman yaptığımız gibi document.write kullanarak degisikTarih değişkenimizi ekrana yazdırıyoruz.
<html>
<head>
<script type="text/javascript">
var degisikTarih = new Date(2050, 5, 15, 17, 25, 48, 0);
document.write(degisikTarih);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Tarih üzerinde çeşitli fonksiyonlar kullanarak da işlem yapabiliriz. Mesela sitemize girişte bir yaş sınırı olduğunu varsayarak yaşı tutanların siteye girmesini sağlayacak bir fonksiyon oluşturup mevcut tarih üzerinden bir hesaplama yapabiliriz.
İlk olarak yasHesapla() adında bir fonksiyon oluşturup kullanıcımızın bilgi girişi sağlaması için prompt ile doğum yılını girmesini sağlıyoruz. Sistemden mevcut tarihi alması için mevcutTarih adında bir Date() objesi oluşturuyoruz. Kullanıcının yaşının tutup tutmadığını hesaplamak amacıyla yasSiniri adında bir değişken oluşturup getFullYear kullanarak sadece mevcut tarih içerisinden yıl kısmını almasını sağlıyoruz. 18 yaşından büyük olup olmadığını denetlemek amacıyla mevcut tarih ile kullanıcının girdiği tarih arasında 18 farkının oluşup oluşmadığını kontrol ediyoruz. Kontrol işlemi tamamlandıktan sonra if/else kullanarak 18 yaşından küçükse nasıl bir dönüş yapmasını, büyükse nasıl bir dönüş yapmasını istediğimizi belirtiyoruz. Bunu da ekranda bir alert (uyarı) şeklinde göstermesini istiyoruz. Kullanıcının girdiği yıl bilgisine göre alert (uyarı) ekranında dönüş olacaktır.
<html>
<head>
<script type="text/javascript">
function yasHesapla() {
var dogumTarihi = prompt ("Doğum Tarihinizi Giriniz!", "");
var mevcutTarih = new Date();
var yasSiniri = mevcutTarih.getFullYear() - 18;
if (dogumTarihi > yasSiniri) {
alert("Yaşınız içeriği görmeye yeterliği değil!");
}
else {
alert("Sitemize Hoşgeldiniz!");
}
}
yasHesapla();
</script>
</head>
<body>
</body>
</html>
Ekran resimlerinde gördüğünüz gibi yaş tuttuğu için 'Sitemize Hoşgeldiniz' ibaresi bizi karşılıyor. Eğer yaş tutmayan bir yıl girmiş olsaydık 'Yaşınız içeriği görmeye yeterli değil!' yazacaktı. Bunu kendiniz deneyerek görebilirsiniz.
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Şimdi daha önce öğrendiğimiz Math ve Date classlarını kullanarak bir kronometre yaratmaya çalışacağız.
Kronomometre yaratırken saniyemizin kaçtan başlamasını istediğimizi belirteceğimiz global bir saniyeler değişkeni oluşturuyoruz. Bunu kendi isteğinize göre belirleyebilirsiniz ama örneğimizde 0'dan başlamasını istediğimiz için bu şekilde belirtiyoruz.
Ardından kronometremizin çalışma şeklini belirlemek için bir kronometre fonksiyonu oluşturuyoruz. Burada saniyeler değişkenimizi kullanarak hesaplamasını istediğimiz dakikalar(60 saniye 1 dakika) ve saat(3600 saniye 1 saat) şeklinde değişkenlerimizi oluşturuyoruz. Oluşabilecek küsüratları atmak için Math.floor ifadesini başına ekledik.
Dakika ve saniyeden kalan değeri saniye veya dakikaya ataması için %(mod) matematik operaötürün kullandım. Ekrana yazacağı dakika ve saniye ifadelerinin düzgün şekilde görüntülenip, belirlediğimiz 60'lık her kısım dolduğunda bunu dakikayı arrtırması için. Sonrasında da ekrana saat, dakika ve saniyeyi yazdırması için document.write kullanıp aralarına iki nokta koyuyuruz. her seferinde alt alta yazması için de "<br/>" kullanıyoruz.
<html>
<head>
<script type="text/javascript">
var saniyeler = 0;
function kronometre () {
var dakikalar = Math.floor(saniyeler/60);
var saat = Math.floor(saniyeler/3600);
var dakika = dakikalar%60;
var saniye = saniyeler%60;
document.write(saat + " : " + dakika + " : " + saniye);
document.write("<br/>");
saniyeler++;
}
setInterval("kronometre()", 1000);
</script>
</head>
<body>
</body>
</html>
Son olarak da setInterval ile kronometre fonksiyonumu çağırıyorum. Burada dikkat edilmesi gereken setInterval kullandığımızda 2 adet parametre alması gerektiğidir. İlk kısımda belirli zaman aralığında ne yapmak istediğimizi yani fonksiyonumuzu yazıyoruz ama bu sefer klasik fonksiyon şeklinde değil tırnak içerisinde belirtiyoruz. İkinci kısımda ise ne kadar bir zaman aralığında yapmasını istediğimizi belirtiyoruz. Biz saniyeyi arttırmak istediğimiz için 1000 yazıyoruz. Buradaki 1000 milisaniyeyi temsil ediyor 1000 mili saniye de 1 saniyeye tekabül ediyor. html sayfamızı çalıştırdığımızda kronometremizin çalıştığını göreceksiniz. 60 saniye dolduğunda dakikanın, 60 dakika dolduğunda saatin arttığını göreceksiniz bekleyecek vaktiniz varsa. Ya da 0 olan saniyeler başlangıç değerini yükselterek de görme şansınız olabilir.
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
