Web Programlama

Transkript

Web Programlama
Web Programlama
JavaScript (1)
JavaScript Programlama Dili
• Web’in nesneye yönelik programlama dili
• Pek çok modern web sitesi JavaScript kullanır
• Tüm modern web tarayıcıları (masaüstü, tablet, cep telefonu vs.) JavaScript
komutlarını çalıştıran bir işleyiciye (interpreter) sahiptir
• JavaScript, web geliştiricilerin öğrenmesi gereken üç temel
teknolojiden biridir:
• HTML: web sayfalarının içeriğini ve genel yapısını belirler
• CSS: web sayfalarının görünümünü belirler
• JavaScript: web sayfalarının davranışını belirler
JavaScript ve Java İlişkisi
• Java ve JavaScript yakın zamanlarda ortaya çıkmış, birbirleriyle direk
ilişkisi olmayan iki programlama dilidir
• Nestscape, Java’yı tamamlayan ve profesyonel olmayan geliştiricilere
yönelik bir dil ortaya çıkarmak istemiştir
• JavaScript bazı özellikleri açısından Java’dan etkilenmiştir
• Web tarayıcısı içerisinde korumalı olarak çalıştırılır (sandboxed)
• Java’nın yazım kuralları ve standart kütüphanesi göz önüne alınarak
tasarlanmıştır
• Java anahtar kelimeleri JavaScript için ayrılmış kelimelerdir
• JavaScript standart kütüphanesi, Java kütüphanesinin isimlendirme kurallarını kullanır
• JavaScript’in Math ve Date sınıfları, Java 1.0 daki sınıflardan türetilmiştir
JavaScript Tarihçesi (1/2)
• JavaScript, Brendan Eich tarafından, 1995 yılında, Netscape de
çalışırken 10 günde geliştirilmiştir
• Netscape o dönemde Microsoft ile web teknolojileri konusunda
yarışmakta
• Firefox web tarayıcısını geliştiren Mozilla Netscape tarafından oluşturulan ve
desteklenen bir organizasyon
• Mocha –> LiveScript –> JavaScript (Sun’dan tescil lisansı alınmasıyla)
• 1996 yılında JavaScript’in standartlaştırılması için ECMA’ya başvuruldu
• ECMA, C# programlama dilini de standartlaştırmıştır
JavaScript Tarihçesi (2/2)
• ECMAScript 4 çalışmalarına Waldemar Horwat
önderliğinde 2000 yılında başlanmıştır
• Microsoft da bazı önerileri kendi JScript.net
dilinde gerçekleştirerek katkı sağlayacak gibi
gözükmüştür
• Zamanla Microsoft’un uzlaşmaya ve JavaScript
standardını düzgün bir şekilde
gerçekleştirmeyeceği ortaya çıkmıştır
• 2003 yılında ECMAScript 4 çalışmaları rafa
kaldırılmıştır
Versiyon
Yıl
ECMAScript 1
1997
ECMAScript 2
1998
ECMAScript 3
1999
ECMAScript 4
-
ECMAScript 5
2009
ECMAScript 5.1
2011
Unicode ve Kod Yorumları
• Otomatik çöp toplama (garbage collection)
• Büyük-küçük harf ayrımı önemli
• Unicode kaçış karakterleri
• Bazı donanım veya yazılımlar unicode karakterlerin tamamını gösteremez
• Bu ortamlarda, istenen unicode karakter kaçış karakteri aracılığıyla
kullanılabilir
Veri Tipleri ve Değerleri
• İlkel (primitive) tipler veya değerler
•
•
•
•
•
Sayılar
Karakter katarı (string)
İkili değer (boolean)
null
undefined
• Bazı ilkel değerler nesne gibi davranabilirler ve metotları çağırılabilir
• Nesne tipleri – sıralı olmayan isimlendirilmiş değerler kümesi
• array: Özel bir nesne türü. Sıralı sayısal değerler kümesi
• function: Başka bir özel nesne türü. İlişkili çalıştırılabilir koda sahip nesneler
Önemli Bazı Sınıflar
• Array
• Function
• Date
• RegExp
• Error
Sayılar
• JavaScript tam sayılar ve ondalıklı sayılar arasında ayırım yapmaz
• Tüm sayılar 64-bit ondalıklı sayı olarak ifade edilir
• IEEE 754 standardı – Tüm modern dillerde (Java, C++ vs.)double tipi için
kullanılan format
• Dizi indeksi olarak 32-bit tamsayılar kullanılır
• 0x ile başlayan sayıların 16’lık tabanda (hexadecimal) verildiği
varsayılır: 0xCAFE912 gibi
• Ondalıklı sayılar için kullanılan notasyonlar: 3.4, 6.02e23, 1.47e-32
veya 1.47E-32
Aritmetik İşlemler (1/3)
Aritmetik İşlemler (2/3)
Aritmetik İşlemler (3/3)
Gün ve Zaman (1/3)
• Gün ve zamanla ilişkili işlemler yapmak için Date nesneleri kullanılır
• Date nesneleri Date() yapıcısı kullanılarak oluşturulabilir
• Aşağıda Date nesnesinin bazı kullanımları gösterilmiştir
Gün ve Zaman (2/3)
Gün ve Zaman (3/3)
String
• UTF-16 karakterden oluşan sıralı karakter kümeleridir
• Oluşturulduktan sonra içeriği değiştirilemez
• Tanımlamada string’e ait karakterler tek veya çift tırnak karakterleri
arasına yazılır
• Çift tırnak karakterleri içerisinde tanımlanırsa, string içerisinde tek
tırnak işareti direk olarak kullanılabilir
• Tek tırnak karakterleri içerisinde tanımlanırsa, string içerisinde çift
tırnak işareti direk olarak kullanılabilir
String Tanımlama Örnekleri
Birden Fazla Satıra Dağılan String İfadeleri
• ECMAScript 3’te string ifadeleri tek satırda tanımlanmalıdır
• ECMAScript 5 ile birlikte, yeni satıra geçmeden önce \ karakteri
kullanılması şartıyla, string ifade birden fazla satırda tanımlanabilir
JavaScript ve HTML’de String İfadeleri
• İstemci tarafı programlarda, JavaScript kodu içerisinde HTML kodu
veya HTML kodu içerisinde JavaScript kodu olabilir
• JavaScript de olduğu gibi, HTML de string ifadeleri tanımlamak için
hem tek hem de çift tırnak kullanmaya izin verir
• Bu nedenle, JavaScript ve HTML kodları birarada kullanıldığında
bunlardan birinde, string ifade tanımlamak için tek tırnağı kullanırken,
diğerinde çift tırnak kullanmak mantıklı olacaktır
• Aşağıda HTML için çift tırnak kullanılırken, JavaScript için tek tırnak
kullanılmıştır:
Kaçış Karakteri
JavaScript’te kaçış
karakteri olarak
olarak \ karakteri
kullanılır
String İfadelerin Birleştirilmesi
• + operatörü string ifadelerin birleştirilmesinde kullanılır
alert("Thanks, " + userName + "! ") ;
• + operatörü, string ve sayısal değerlerin birleştirilmesi durumunda
otomatik olarak sayısal değeri string ifadeye dönüştürür ve iki string
ifadeyi birleştirir
alert("2 plus 2 equals " + 2 + 2);
// 2 plus 2 equals 22
Uyarı Pencereleri
• Uyarı pencerleri, kullanıcıya bir mesaj vermek için ortaya çıkan
kutulardır
• Uyarı pencerleri, window nesnesinin alert metodu kullanılarak
oluşturulur
• Window nesnesi web tarayıcıları için global nesnedir ve
fonksiyonlarına erişmek için fonksiyon çağırımlarında yazılması
gerekmez
Uyarı Penceresi Örneği
Aşağıdaki JavaScript satırlarının her ikiside ekrana "Thanks for your
input" yazan bir kutu gösterecektir
window.alert("Thanks for your input");
alert("Thanks for your input");
Formlar ve Uyarı Penceresi
Aşağıda, bir form ve bu forma ait submit butonuna tıklanıldığında bir
uyarı penceresi gösteren HTML kodu verilmiştir
<form name=myform>
<input type=button value="Try it now"
onClick="alert('Hello from JavaScript!')">
</form>
Değişken Tanımlama (1/4)
• Değişkenler (variable) "var" anahtar kelimesi kullanılarak tanımlanırlar
• Aynı "var" anahtar kelimesi, değişkenler arasında virgül lullanılarak
birden fazla değişkenin tanımlanmasında kullanılabilir
• Değişken tanımlamayı, değişkenlere ilk değer atamayla aynı anda
gerçekleştirilebilir
var name;
var name = "Mark";
var weight = 150;
var name, weight;
Değişken Tanımlama (2/4)
• Değişken isimleri boşluk karakteri içeremez
• Büyük/küçük harfler, sayılar, alt çizgi karakteri veya dolar işareti
içerebilir
• Büyük/küçük harf ayrımı vardır. Örnek: count, Count ve couNt
• İsimler bir rakamla başlayamazlar
Değişken Tanımlama (3/4)
• Bir değişken için ilk değer belirtilmemişse, ilk değeri "undefined"
olarak atanır
• Değişken tanımlama "for" veya "for/in" döngüleri için de aşağıdaki
gibi kullanılabilir:
for(var i = 0; i < 10; i++) console.log(i);
for(var i = 0, j=10; i < 10; i++,j--) console.log(i*j);
for(var p in o) console.log(p);
Değişken Tanımlama (4/4)
• Değişken tanımlarken var kelimesinin yazılması zorunlu değildir. Ancak
bu doğru değildir.
• Aynı değişken için, kod içerisinde, tekrar "var" kullanılarak yeniden
aynı değişken tanımlanabilir
• JavaScript, C veya Java gibi statik tipli bir dil olmadığından değişkenler
tip bilgisine sahip değildir ve değişkenin tuttuğu değer tipi kod
içerisinde sonradan değiştirilebilir:
var i = 10;
i = "ten";
Prompt (1/2)
• Prompt kullanıcıdan bilgi almak için kullanılan bir penceredir
• Kullanıcıya bir soru sorulur ve kullanıcının soruya olan cevabını bir
metin kutusuna girerek "Tamam" butonuna tıklaması beklenir
• Window nesnesinin prompt metodu çağırılarak gerşekleştirilir
• Prompt metodundan dönen değer bir değişkene alınmalı ve program
içerisinde kullanılmalıdır
var numberOfCats = prompt("How many cats?") ;
Prompt (2/2)
• Kullanıcıya varsayılan bir cevap gösterilmek istenirse, bu cevap
prompt metodunun ikinci parametresi olarak gönderilmelidir
var spec = prompt("Your species?", "human");
• Prompt metodundan dönen değer her zaman string ifadedir
var numberOfCats = prompt("How many cats?") ;
var tooManyCats = numberOfCats + 1;
// tooManyCats="31"
If Cümleleri
• Eşitlik ve eşitsizlik karşılaştırmalarında sırasıyla === ve !== operatörleri
kullanılır
• Karşılaştırma amaçlı >, <, >= ve <= operatörleri kullanılabilir
• If cümlelerinde { ve } karakterleri kullanımı zorunlu değildir
var x = prompt("Where does the Pope live?") ;
if (x === "Vatican") {
alert("Correct! ") ;
}
If-else ve else-if Cümleleri
var correctAnswer = "Vatican";
if (x === correctAnswer) {
alert("Correct! ") ;
}
else if (x === "Rome") {
alert("Incorrect but close") ;
}
else {
alert("Incorrect") ;
}
Birden Fazla Şartın Test Edilmesi
Birden fazla şartın aynı anda test edilmesi için && (VE) ve || (VEYA)
operatörleri kullanılabilir
if ((age > 65 | | age < 21) && res === "U. S. ") {
Diziler
• Birden fazla veriyi tutmak için ve bu verilere kolayca erişmek için
diziler kullanılabilir
var cities = ["Atlanta", "Baltimore", "Chicago", "Denver];
• Dizi elemanları için indeks sıfırdan başlar: cities[0] ... cities[3]
• Dizi elemanları farklı tipte olabilir
var mixedArray = [1, "Bob", "Now is", true] ;
Dizilere Sonradan Eleman Eklemek
• Başlangıçta boş olarak tanımlanan diziye sonradan eleman eklemek
mümkündür
• Dahası eleman ekleme arada bazı elemanları belirtmeksizin de
yapılabilir
var pets = [] ;
...
pets[0] = "dog";
pets[1] = "cat";
pets[4] = "bird";
// pets[2] = undefined; pets[3] = undefined;
Diziler Üzerinde Pop ve Push İşlemleri
Pop işlemi dizinin son elemanını silerken, push işlemi diziye bir veya
daha fazla eleman eklemeyi sağlar
pets.pop() ;
pets.push("elephant");
pets.push("fish", "ferret");
Diziler Üzerinde Shift ve Unshift İşlemleri
• Shift işlemi dizinin başından bir eleman silmek için kullanılır
• Unshift işlemi ise dizinin başına bir veya daha fazla eleman eklemek
için kullanılır
pets.shift() ;
pets.unshift("elephant");
pets.unshift("fish", "ferret");
Diziler Üzerinde Splice İşlemi
• Dizinin herhangi bir yerine bir veya daha fazla eleman eklemek için
kullanılır
• Opsiyonel olarak ekleme yapılan pozisyondan itibaren bazı
elemanların silinmesi sağlanabilir
• Metodun ilk parametresi eklemeye başlanılacak pozisyonu belirtir
• Metodun ikinci parametresi ise, birinci paramtredeki poisyondan
başlayarak kaç tane elemanın silineceğini belirtir
• Daha sonra gelen parametreler ise, diziye eklenecek eleman(lar)dır
Diziler Üzerinde Splice İşlemi Örneği
• "pets" dizisi "dog", "cat", "fly", "bug" ve "ox" elemanlarını içersin
• Aşağıdaki splice işlemi, "cat" elemanından sonra gelen "fly" ve "bug"
elemanlarını siler ve "pig", "duck" ve "emu" elemanlarını ekler
pets. splice(2, 2, "pig", "duck", "emu");
• Dizi elemanlarını silmeden sadece ekleme yapmak yada yeni eleman
eklemeden dizi elemanlarını silmek mümkündür
pets. splice(2, 0, "pig", "duck", "emu") ;
pets. splice(2, 2) ;
Diziler Üzerinde Slice İşlemi
• Slice işlemi, bir dizide, belirli bir pozisyondan başlayan ve birbirini
takip eden bir veya daha fazla elemanı başka bir diziye kopyalamakta
kullanılır
• "pets" dizisi "dog", "cat", "fly", "bug" ve "ox" elemanlarını içersin
• Aşağıdaki slice işlemi, "fly" ve "bug" elemanlarını "noPets" adlı yeni
diziye kopyalar ve "pets" dizisini olduğu gibi bırakır
var noPets = pets.slice(2, 4);
For Döngüsü
var cleanestCities = ["Santa Fe", "Tucson", "Honolulu"];
var cityToCheck = prompt("City?");
for (var i = 0; i <= 2; i++) {
if (cityToCheck === cleanestCities[i] ) {
alert("It' s one of the cleanest cities") ;
}
}
Dizi Uzunluğu ve Döngüyü Bölme (1/2)
var numElements = cleanestCities. length;
var matchFound = false;
for (var i = 0; i < numElements; i++) ;
if (cityToCheck === cleanestCities[i] ) {
matchFound = true;
alert("It' s one of the cleanest cities") ;
break;
}}
Dizi Uzunluğu ve Döngüyü Bölme (2/2)
if (matchFound === false) {
alert("It' s not on the list") ;
}
Büyük/Küçük Harf Dönüşümü
• String nesnesinin toLowerCase() ve toUpperCase() metotları, string
değişkenlerinde tutulan karakterleri sırasıyla küçük ve büyük harfe
çevirmekte kullanılabilir
• Bu metotların çağırılabilmesi için string temel veri tipi arka planda
otomatik olarak String wrapper nesnesine çevirilecektir
• Orijinal string ifade değiştirilmez, metotların dönüş değeri
kullanılmalıdır
cityToCheck = cityToCheck.toLowerCase();
cityToCheck = cityToCheck.toUpperCase();
Büyük/Küçük Harf Dönüşümü Örneği
var cityToCheck = prompt("Enter your city") ;
cityToCheck = cityToCheck. toLowerCase() ;
var cleanestCities = ["santa fe", "tucson", "great falls"] ;
for (var i = 0; i <= 4; i++) {
if (cityToCheck === cleanestCities[i] ) {
alert("It' s one of the cleanest cities") ;
}
}
String İfadeyi Parçalara Bölmek (1/3)
• String ifadeler diziler indekslidirler
• String ifade indeksleri (dizilerdeki gibi) sıfırdan başlar
• Bir String ifadenin belli bir kısmını kopyalamak için slice metodu
kullanılır
• Öncelikle string ifadenin hangi karakteri aralıktaki karakterlerinin
kopyalanacağı belirlenmelidir
• Daha sonra bu karakterlere ait indeksler slice metoduna parametre
olarak verilirler
String İfadeyi Parçalara Bölmek (2/3)
var firstChar = cityToCheck. slice(0, 1);
• Eğer cityToCheck "Boston" ise metod "B" değerini döndürür
• İlk parametre kopyalanacak kısmın ilk karakterinin indeksidir
• İkinci parametre ise, kopyalanacak son karakterden sonra gelen
karakterin indeksidir
String İfadeyi Parçalara Bölmek (3/3)
var someChars = cityToCheck. slice(2, 5);
• someChars "sto" değerini içerecektir
• Metod, ikinci parametrenin belirtilmemesi durumunda, belirtilen
başlangıç indeksinden string ifadenin sonuna kadar kopyalama yapar
var someChars = cityToCheck. slice(2);
// "ston"
String İfadelerin Uzunlukları (1/2)
• String ifadelerin uzunluklarını elde etmek için, dizilerde olduğu gibi
"length" özelliği kullanılır
• Kullanıcıdan bir ay değeri almak isteyelim
• Eğer ay değeri üç karakterden fazla karakter içeriyorsa (örn: November)
ilk üç karakterini elde etmek istersek
var month = prompt("Enter a month") ;
var charsInMonth = month. length;
if (charsInMonth > 3) {
monthAbbrev = month. slice(0, 3) ;
}
String İfadelerin Uzunlukları (2/2)
• Kullanıcıdan alınan bir String ifade içerisinde çift boşluk olup olmadığını
tespit etmek istediğimizi varsayalım
var str = prompt("Enter some text") ;
var numChars = str. length;
for (var i = 0; i < numChars; i++) {
if (str. slice(i, i + 2) === " ") {
alert("No double spaces! ") ;
break;
}}
String İfadelerde Arama (1/4)
• Bir derginin "World War II" ifadesine izin vermediğini, bu terim yerine
"the Second World War" ifadesinin kullanılmasını istediğini varsayalım
• Dergiye gelen makalelerde "World War II" ifadesi geçiyorsa bunu
otomatik olarak "the Second World War" ifadesine çevirecek programı
şu ana kadarki bilgimizi kullanarak aşağıdaki gibi yazabilir
for (var i = 0; i < text. length; i++) {
if (text. slice(i, i + 12) === "World War II") {
text = text. slice(0, i) + "the Second World War" +
text. slice(i + 12);
}}
String İfadelerde Arama (2/4)
• Ancak bu çözüm döngü kullandığından verimli bir çözüm değildir
• Döngü kullanmak yerine aramayı aşağıdaki gibi indexOf metodu
kullanarak gerçekleştirebiliriz
var firstChar = text. indexOf("World War II") ;
• indexOf metodu aranacak String ifadeyi parametre olarak alır
• Eğer aranan ifade bulunamazsa, metod -1 döndürür, bulunursa
bulunduğu pozisyonun indeksi geriye döner
String İfadelerde Arama (4/4)
• Döngülü çözümün, indexOf metodunu kullanacak şekilde değiştirilmiş
şekli aşağıdadır
var firstChar = text. indexOf("World War II");
if (firstChar ! == -1) {
text = text. slice(0, firstChar) + "the Second World War"
+ text. slice(firstChar + 12);
}
String İfadelerde Arama (4/4)
• Aranan String ifade, aramanın yapıldığı ifade içerisinde birden fazla
geçiyor ise arama döngü içerisinde yapılabilir
• Bununla ilgili örnek kod yazınız
• indexOf metodu arama yaparken String ifadenin başından başlayıp
sonuna doğru gitmektedir
• Sondan başa doğru arama yapmak için lastIndexOf metodu
kullanılabilir
var text = "To be or not to be. ";
var segIndex = text. lastIndexOf("be");
// 16
charAt Metodu (1/2)
• Bir String ifadede belli bir karakteri elde etmek için aşağıda gösterildiği
gibi "slice" metodu kullanılabilir
var firstChar = firstName. slice(0, 1);
• Daha basit alternatif bir yöntem ise charAt metodunu kullanmaktır
var firstChar = firstName. charAt(0);
• Parametre olarak istenilen karakerin indeksi verilmektedir
charAt Metodu (2/2)
• charAt metodu özellikle belli bir karakterin aranması için kolayca
kullanılabilir
• Aşaşıdaki kod parçası kullanıcının girdiği String ifade içerisinde "!"
karakterini aramakta ve bulduğunda kullanıcıyı uyarmaktadır
for (var i = 0; i < text. length; i++) {
if (text. charAt(i) === "!") {
alert("Exclamation point found!");
break;
}}
replace Metodu (1/2)
• replace metodu bir String ifade kaynağında belirli bir String ifadeyi
aratıp onu değiştirmeyi sağlar
• Metodun ilk parametresi aranacak String ifade iken, ikinci parametre
aranan String ifade eğer bulunursa, bu ifadenin yerini alacak yeni
ifadedir
• Metodun dönüş değeri, değiştirilmiş String ifadedir
• Orijinal string ifadenin değiştirilmesi isteniyorsa, metodun sonucunun
orijinal string ifadeye atanması gerektiği unutulmamalıdır
text = text. replace("World War II", "the Second World War") ;
replace Metodu (2/2)
• Bir önceki çağırım metinde sadece bir değişim gerçekleştirir
• Metinde aranan ifade birden fazla kez geçiyorsa, bu ifadelerin tümünü
değiştirmek için global değişim yapılmalıdır
• Global değişim yapmak için aranacak ifade "çift tırnak" yerine "/"
karakterleri arasına yazılmalı ve ardından "g" karakteri yazılmalıdır
var text = text. replace(/World War II/g, "the Second World War");
Sayıların Yuvarlanması (1/2)
• Ondalıklı sayıları tamsayılara yuvarlamak için Math sınıfındaki
metotlar kullanılır
• round metodu kendisine parametre olarak verilen ondalıklı sayıyı en
yakın tamsayıya yuvarlayarak döndürür
• .5 ve üstü değerler daha büyük tam sayıya yuvarlanırken, daha düşük
değerler daha küçük tam sayıya yuvarlanır
scoreAvg = Math. round(1.1); // 1
scoreAvg = Math. round(1.5); // 2
scoreAvg = Math. round(-1.5); // -1
Sayıların Yuvarlanması (2/2)
• ceil metodu kendisine parametre olarak verilen ondalıklı sayıyı
kendisinden büyük en yakın tamsayıya yuvarlayarak döndürür
var scoreAvg = Math. ceil(.000001);
// 1
• floor metodu ise kendisine parametre olarak verilen ondalıklı sayıyı
kendisinden küçük en yakın tamsayıya yuvarlayarak döndürür
var scoreAvg = Math. floor(. 999999); // 0
Rastgele Sayılar Üretmek (1/2)
• Math sınıfının random metodu 0 ile 1 (dahil değil) arasında rastgele
bir sayı üretir
• Sayının ondalıklı kısmı 16 basamaktır
• 0.0000000000000000 - 0.9999999999999999
var randomNumber = Math. random() ;
• 1 ile 6 arasında rastgle bir tamsayı üretmek için aşağıdaki kod parçası
kullanılabilir
Rastgele Sayılar Üretmek (2/2)
1 ile 6 arasında rastgle bir tamsayı üretmek için aşağıdaki kod parçası
kullanılabilir
var bigDecimal = Math. random() ;
var improvedNum = (bigDecimal * 6) + 1;
var numberOfStars = Math. floor(improvedNum) ;
String İfadelerin Sayıya Dönüştürülmesi (1/8)
• Aşağıdaki satırla kullanıcıdan alınan yaş, değişkene String olarak
aktarılır (örn: "20")
var age = prompt("Enter your age. ");
• Buna rağmen bu değişkeni aritmetik işlemlerde tam sayı olarak
aşağıdaki gibi kullanabilirsiniz
var yearsEligibleToVote = age - 18;
• Bu durumda JavaScript aritmetik bir işlem yapmak isteiğinizi algılar ve
age değişkenini otomatik olarak sayıya çevirir
String İfadelerin Sayıya Dönüştürülmesi (2/8)
• JavaScript aşağıdaki işlem için de her iki değeri otomatik olarak sayıya
çevirir ve çıkarma sonucunu doğru şekilde elde eder
var profit = "200" - "150";
// 50
• Bu otomatik çevrimin başarılı bir şekilde gerçekleşmesi için String
ifadenin bir sayı olması gerekir
• Böyle olmadığı durumlarda aritmetik işlemin sonucu NaN (Not a
Number) olur. Örnek:
var profit = "200" - "duck";
String İfadelerin Sayıya Dönüştürülmesi (3/8)
• Ancak bu tür işlemlerde + operatörü kullanılırken dikkar edilmelidir
• Daha önce + operatörü ile String ifadelerle sayısal ifadeleri
birleştirerek, String ifadeler elde etmiştik. Örnek:
var result = "abc" + 150;
// abc150
• Bu sonuc aşağıdaki ifade için de geçerlidir
var result = "200" + "150";
// 200150
String İfadelerin Sayıya Dönüştürülmesi (4/8)
• Başka bir problemli durum aşağıda verilmiştir
var currentAge = prompt("Enter your age. ");
var qualifyingAge = currentAge + 1;
• Bu durumda da, kullanıcı 52 değerini girerse, işlem sonucunda
qualifyingAge "521" değerine sahip olur
String İfadelerin Sayıya Dönüştürülmesi (5/8)
• Bu gibi durumlara engel olmak için, String ifade parseInt metodu ile
tamsayıya çevrilmelidir
• Aşağıdaki kod beklendiği gibi çalışacaktır
var currentAge = prompt("Enter your age. ");
var qualifyingAge = parseInt(currentAge) + 1;
• parseInt kendisine parametre olarak gelen ondalıklı sayıları da
tamsayıya çevirebilmektedir
var myInteger = parseInt("1. 9999");
// 1
String İfadelerin Sayıya Dönüştürülmesi (6/8)
• Ondalık sayının değerini korumak için parseFloat metodu kullanılabilir
var myFractional = parseFloat("1. 9999") ;
// 1. 9999
• String ifadelerin sayıya dönüştürülmesi gerektiğinde, hataya neden
olmamak için bu iki metod kullanılarak elle dönüştürmek tercih
edilmelidir
String İfadelerin Sayıya Dönüştürülmesi (7/8)
• parseInt ve parseFloat metotları dışında, Number sınıfı da String
ifadelerin sayıya dönüştürülmesinde kullanılabilir
• Farklı olarak Number sınıfı kullanıldığında, String ifadede ondalıklı
kısım varsa, String ifade ondalıklı sayıya, ondalıklı kısım yoksa da tam
sayıya dönüştürülür
var integerString = "24"
var num = Number(integerString);
// 24
var floatingNumString = "24. 9876";
var num = Number(floatingNumString);
// 24. 9876
String İfadelerin Sayıya Dönüştürülmesi (8/8)
• Bazı durumlarda ise, sayıları String ifadeye dönüştürmek gerekebilir
• Örneğin, aritmetik işlemler sonunda elde edilen büyük bir sayının,
kullanıcıya gösterilmeden önce daha rahat okunması için, virgül
kullanarak yeniden şekillendirilmesi
• Bir sayıyı String ifadeye dönüştürmek için toString() metodu kullanılır
var numberAsNumber = 1234;
var numberAsString = numberAsNumber. toString();
// "1234"
Ondalıklı Sayıların Uzunluğu (1/3)
• Bir ürünün fiyatı $9.95 olsun (price)
• Ürün fiyatı üzerinden %6.5 vergi alınsın (taxrate)
• Toplam fiyatı bulmak için aşağıdaki işlemi yapmamız gerekir:
var total = price + (price * taxRate);
• Bu durumda total değişkeni 10.59675 değerine sahip olacaktır
Ondalıklı Sayıların Uzunluğu (2/3)
• Müşteriden bu miktarı ($10.59675) istemek pratik olmayacaktır
• Noktadan sonra iki basamağa kadar yuvarlayarak $10.60 istemek
gerekir
• toFixed metodu bu amaçla aşağıdaki gibi kullanılabilir
var prettyTotal = total. toFixed(2);
// 10.60
• toFixed metodunun parametresi ondalıklı sayının noktadan sonra kaç
basamağa yuvarlanacağını belirler

Benzer belgeler