Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

İnternet Programlama-I JAVASCRİPT -TARİH İŞLEMLERİ-

Benzer bir sunumlar


... konulu sunumlar: "İnternet Programlama-I JAVASCRİPT -TARİH İŞLEMLERİ-"— Sunum transkripti:

1 İnternet Programlama-I JAVASCRİPT -TARİH İŞLEMLERİ-

2 Tarih Nesnesi JavaScript programlarında tarih işlemlerine sık sık yer verilir. Tarih işlemleri ise tarih nesnesi yardımıyla yerine getirilir. Bir javaScript programında yeni bir tarih nesnesinin yaratılması söz konusu olduğunda new Date() deyimlerinden yararlanılır

3 Tarih Nesnesi tarih = new Date() tarih = new Date(tarih ifadesi) tarih = new Date (yil, ay, gün[, saat, dakika, saniye.ms1]) Date tarih nesnesi UTC (Universal Coordinated Time) adı verilen standart tarih gösterim biçimlerini de destekler. Bu yöntemler Greenwich Mean Time (GMT) olarak da bilinir. Normal olarak JavaScript’in, tarayıcının çalıştırıldığı bilgisayarın tarih bilgisini, yani yerel tarihi kullandığı unutulmamalıdır.

4 Tarih Nesnesi Şu andaki tarih bilgisini, yani tarayıcıyı çalıştırdığımız bilgisayarın tarih bilgisini gösterelim... tarih = new Date ( ) document.write("Şu andaki tarih = " + tarih);

5 Tarih Dönüşümleri Tarayıcı doğal olarak bilgisayarımızın sahip olduğu tarih verisini kullanır. Bu tarih verisi normal olarak UTC düzenindedir. Yani dünya üzerinde standart olarak kabul edilen tarih gösterim biçimidir. Ancak bu görünümü kendi yerel tarih tanımı ile değiştirebiliriz. Bunun için Date nesnesinin toLocaleString() yönteminden yararlanılır.

6 Tarih Dönüşümleri tarih.toLocaleString() biçiminde tanımlanmaktadır. Eğer Greenwich gösterim biçimine dönüştürmek söz konusu ise, tarih.toGMTString() tanımından yararlanılır. Eğer UTC gösterim biçimine dönüştürmek gerekiyorsa, bu kez, tarih.toUTCString() tanımı kullanılır.

7 Tarih Dönüşümleri Tarayıcımızın sahip olduğu tarih bilgisini önce UTC düzeninde, ardından Greenwich ve daha sonra yerel tarih gösterim biçimiyle listeleyelim… tarih = new Date(); document.write("Standart Tarih Biçimi= " + tarih + " "); document.write("Greenwich Tarih Biçimi= " + tarih.toGMTString() + " "); document.write("Yerel Tarih Biçimi= " + tarih.toLocaleString() + " ");

8 Yılın Bulunması Bir tarih bilgisi verildiğinde, bu bilgi içinden yıl bilgisini elde etmek mümkündür. Bu amaçla Date nesnesinin birçok yönteminden yararlanılabilir. Aşağıda bu yöntemleri tanımlıyoruz: tarih.getYear() tarih.getFullYear() tarih.getUTCFullYear()

9 Yılın Bulunması Birinci tanımda yer alan getYear () yöntemi 1900 ve 1999 yılları arasındaki tarihler için, son iki rakamını verir. Buna karşılık getFullYear () yöntemi tüm tarih verilerinden dört rakamlı yıl bilgisini verir. Örneğin 1999 için getYear () yöntemi 99 değerini üretir. Söz konusu aralık dışındaki tarihler için dört rakamlı yıl bilgisi üretir. Örneğin 2001 yılındaki bir tarih verisinden yıl ola rak yine 2001 değeri elde edilir. Bu açıdan bakıldığında, 2000 yılından sonraki tüm tarih bilgilerinden getYear() ve getFullYear() yöntemleri aynı sonucu verecektir.

10 Yılın Bulunması Aslında getYear() yöntemi JavaScript’in eski sürümleriyle uyumu sağlamak için kullanılmaktadır. Bunun yerine getFullYear() yönteminin tercih edilmesinde yarar vardır. Eğer UTC, yani standart tarih gösterim biçimi söz konusu ise getUTCFullYear () yöntemine başvurulur.

11 Yılın Bulunması Günün tarih bilgileri kullanılarak, bu tarih bilgisi içinden yıl bilgisini elde etmek istiyoruz. Böyle bir amaç için getYear() ve getFullYear() yöntemlerini ayrı ayrı kullanalım… tarih = new Date() ; x = tarih.getYear(); y = tarih.getFullYear(); document.write("Şu andaki tarih =" + tarih + " "); document.write("Yıl = " + x + " "); document.write("Yıl =" + y);

12 Ayın Bulunması Bir tarih bilgisi içinden ay bilgisini elde etmek için getMonth() ve getUTCMonth() yöntemlerine başvurulur. Sözü edilen yöntemler şu şekilde tanımlanmaktadır: tarih.getMonth() tarih.getUTCMonth() Bu yöntemlerden getMonth() yerel tarihi, yani tarayıcının çalıştırıldığı bilgisayarın tarihini göz önüne alır. Diğeri ise, yani getUTCMonth () yöntemi ise UTC tarihini göz önüne alır.

13 Ayın Bulunması Günün tarihi içinden ay bilgisini elde edelim… // Tarih nesnesinin tanımlanması.. tarih = new Date(); t = tarih.getMonth(); // Sonucun görüntülenmesi.. document.write("Şu andaki tarih =" + tarih + " "); document.write("Ay =" + t + " ");

14 Ayın Günü Verilen tarih bilgisi içinden, hangi aya ilişkin olduğunu yukarıda gösterildiği biçimde belirleyebiliyoruz. Eğer ayın hangi günü olduğunu bulmak söz konusu ise daha farklı bir yöntem kullanılır. Ayın gününü belirlemek üzere aşağıdaki yöntemler kullanılır: tarih. getDate() tarih.getUTCDate() Bunlardan getDate() yöntemi yerel tarih bilgisini, getUTCDate() ise genel UTC tarih verilerini kullanır.

15 Ayın Günü Bilgisayarın tarih bilgisini kullanarak, ayın kaçıncı gününe karşılık geldiğini öğrenelim… // Tarih nesnesinin tanımlanması.. tarih = new Date(); t = tarih.getDate(); // Sonucun görüntülenmesi.. document.write("Şu andaki tarih =" + tarih + " "); document.write("Ayın günü =" + t + " ");

16 Haftanın Günü Bir tarih verisini kullanarak, bu tarihte yer alan haftanın gününü belirlemek üzere Date nesnesinin getDay() yöntemi kullanılır. Eğer genel tarih tanımı söz konusu ise getUTCDay() yöntemine başvurulur. tarih. getDay() tarih.getUTCDay()

17 Haftanın Günü Bilgisayarın sahip olduğu tarih bilgisi kullanarak, bu tarihin haftanın kaçıncı gününe ait olduğunu bulalım.. // Tarih nesnesinin tanımlanması.. tarih = new Date(); t = tarih.getDay(); // Sonucun görüntülenmesi.. document.write("Şu andaki tarih =" + tarih + " "); document.write("Haftanın günü =" + t + " ");

18 Saatin Öğrenilmesi Tarih bilgisi içinden saat bilgisini seçerek öğrenmek üzere JavaScript’in getHours() veya getUTCHours() yöntemlerinden biri kullanılabilir. Bu yöntemler, tarih.getHours() tarih.getUTCHours() biçiminde tanımlanır.

19 Saatin Öğrenilmesi İçinde bulunduğumuz tarih verisinden saat bilgisini öğrenelim… // Tarih nesnesinin tanımlanması.. tarih = new Date(); saat = tarih. getHours(); // Sonucun görüntülenmesi.. document.write("Şu andaki tarih =" + tarih + " "); document.write("Saat =" + saat + " ");

20 Dakikanın Öğrenilmesi Saat bilgisini nasıl elde edilebileceğim gördük. Benzer biçimde tarih bilgisi içinden dakika bilgisini seçerek öğrenebiliriz. Bu amaçla Javascript’in getMinutes( ) veya getUTCMinutes( ) yöntemlerinden biri kullanılabilir. tarih.getMinutes() tarih.getUTCMinutes()

21 Dakikanın Öğrenilmesi Tarih bilgisi içinden dakika bilgisini elde ederek görüntüleyelim… // Tarih nesnesinin tanımlanması.. tarih = new Date(); dakika = tarih.getMinutes(); // Sonucun görüntülenmesi.. document.write("Şu andaki tarih =" + tarih + " "); document.write("Dakika =" + dakika + " ");

22 Saniyenin Öğrenilmesi Bu kez tarih bilgisi içinden dakika bilgisini seçerek öğrenmek istiyoruz. Böyle bir sonuca ulaşmak için JavaScript’in getSeconds() veya getUTCSeconds ( ) yöntemlerinden biri kullanılabilir. tarih.getSeconds() tarih.getUTCSeconds()

23 Saniyenin Öğrenilmesi Bilgisayarın sistem tarihini kullanarak, bu bilgi içinden saniye bilgisini elde edelim… // Tarih nesnesinin tanımlanması.. tarih = new Date(); saniye = tarih.getSeconds(); // Sonucun görüntülenmesi.. document.write("Şu andaki tarih =" + tarih + " "); document.write("Saniye = " + saniye + " ");

24 Tarih ve Zaman Bilgilerini Değiştirmek Date nesnesi ile tarih nesnesini tanımlayabildiğimizi biliyoruz. Bu nesne sadece tarih değil, zaman bilgilerini de içermektedir. Bir tarih nesnesi, new Date() yöntemi ile tanımlandıktan sonra, gerektiğinde gün, ay ve yıl bilgileri yanı sıra zaman bilgileri de değiştirilebilir. Aşağıda ele alarak inceleyeceğimiz yöntemlerle, bu tür tarih ve zaman değişikliklerinin nasıl yapılabileceğini göreceğiz.

25 Günü Değiştirmek Tarih nesnesinin sahip olduğu veriler içinden gün bilgisini değiştirmek mümkündür. Bu tür bir değişiklik için setDate() veya setUTCDate() yöntemi kullanılır. Bu yöntemler aşağıda gösterildiği biçimde tanımlanır: setDate(gün) setUTCDate(gün) Not: gün Ayın kaçıncı günü olduğunu belirten tamsayı. 1 ile 31 arasında olabilir.

26 Günü Değiştirmek Programımızda tarih nesnesini “2/12/2012” tarihinin atandığını varsayalım. Programın sonraki satırlarında bu tarihi değiştireceğiz. Örneğin günün 15 değerine sahip olmasını istiyoruz. eski_tarih = "2/12/2012"; tarih = new Date(eski_tarih); tarih.setDate(15); document.write("Önceki tarih = " + eski_tarih + " "); document.write("Yeni tarih = " + tarih.toLocaleString() + " ");

27 Ayı Değiştirmek Tarih nesnesinin sahip olduğu ay bilgisini değiştirmek söz konusu olduğunda, setMonth() veya UTC için setUTCMonth() yöntemi kullanılır. Bu yöntemler aşağıda gösterildiği biçimde ta­nımlanır: setMonth(ay) setUTCmonth(ay) Not: Ay Yılın kaçıncı ayı olduğunu belirten tamsayı. 0 ile 11 arasında olabilir

28 Ayı Değiştirmek Tarih nesnesinin “2/12/2012” tarihine sahip olduğunu varsayarak ay bilgisini değiştirmek istiyoruz. Örneğin ayı “şubat” olarak değiştirelim… eski_tarih = "2/12/2012"; tarih = new Date(eski_tarih); tarih.setMonth(1); document.write("Önceki tarih =" + eski_tarih + " "); document.write("Yeni tarih =" + tarih.toLocaleString() + " ");

29 Yılı Değiştirmek Gün ve ay bilgisinin değiştirilmesi yanı sıra, gerektiğinde yıl bilgisini de değiştirmek mümkündür. Yıl bilgisini değiştirmek için aşağıda yer alan yöntemlerden biri kullanılabilir: setYear(yıl) setFullYear(yıl) setUTCFullYear (yıl)

30 Yılı Değiştirmek Örnek: “9/8/2012” tarih bilgisi içinde yer alan yıl bilgisini “2013” olarak değiştirelim... eski_tarih = "9/8/2012"; tarih = new Date(eski_tarih); tarih.setFullYear(2013); document.write("Önceki tarih =" + eski_tarih + " "); document.write("Yeni tarih =" + tarih.toLocaleString() + " ");

31 Zaman Bilgisini Değiştirmek Bir tarih nesnesinin sahip olduğu tarih ve zamanı bir diğer Date nesnesine atamak için setTime() yönteminden yararlanılır. Bu yöntem aşağıda gösterildiği biçimde kullanılır: setTime(zaman)

32 Zaman Bilgisini Değiştirmek Örnek: Tarihi ve zamanı “May 25, :15:20” olarak atayalım… yeni_tarih = new Date("May 25, :15:20"); tarih = new Date(); tarih. setTime (yeni_tarih); document.write("Yeni tarih = " + tarih.toLocaleString() + " ");

33 Saati Değiştirmek Date nesnesinin sahip olduğu saat bilgisini değiştirmek mümkündür. Bu amaçla setHours() yöntemi kullanılır. Bu yöntem aşağıda gösterildiği biçimde tanımlanır: tarih.setHours(saat [, dakika, saniye, ms]) tarih.setUTCHours(saat [, dakika, saniye, ms])

34 Saati Değiştirmek Örnek: Bilgisayarın zaman bilgisini 20:12:30 biçiminde değiştirelim… // Tarih nesnelerinin tanımlanması.. tarih = new Date(); // Zaman bilgisi değiştiriliyor.. tarih.setHours(20,12,30); // Sonucun görüntülenmesi.. document.write("Yeni tarih = " + tarih.toLocaleString() + " ");

35 Dakikayı Değiştirmek Saat bilgisinin setHours() yöntemi ile nasıl değiştirilebildiğini gördük. Benzer biçimde dakika bilgisini de değiştirebiliriz. Bunun için Date nesnesinin setMinutes() veya setUTCMinutes yöntemi kullanılabilir. Bu yöntem aşağıda gösterildiği biçimde tanımlanır: tarih.setMinutes(dakika [, saniye. ms]) tarih.setUTCMinutes(dakika [, saniye, ms])

36 Dakikayı Değiştirmek Örnek: Zaman bilgisi içinde yer alan dakika bilgisini 30 olarak değiştirelim… // Tarih nesnelerinin tanımlanması.. tarih = new Date(); // Zaman bilgisi değiştiriliyor.. tarih.setMinutes(30); // Sonucun görüntülenmesi.. document.write("Yeni tarih = " + tarih.toLocaleString() + " ");

37 Saniyeyi ve Milisaniyeyi Değiştirmek Saat bilgisi içinde yer alan saniye bilgisini değiştirmek için setSeconds() veya setUTCSeconds() yöntemi kullanılır. Bu yöntemler aşağıda gösterildiği biçimde tanımlanır: tarih.setSeconds(saniye [, ms]) tarih.setUTCSeconds(saniye [, ms]) Yukarıda tanımlanan yöntemler saniye bilgisinin değiştirilmesi için kullanılır. Eğer milisaniye bilgisinin değiştirilmesi söz konusu olsaydı, bu kez setMilliseconds() veya setUTCMilliseconds() yöntemlerinden biri kullanılacaktı. tarih.setMilliseconds (ms) tarih.setUTCMilliseconds (ms])

38 Saniyeyi ve Milisaniyeyi Değiştirmek Örnek: Zaman bilgisi içinde yer alan saniye 11 olarak değiştirelim… // Tarih nesnelerinin tanımlanması.. tarih = new Date(); // Zaman bilgisi değiştiriliyor.. tarih.setSeconds(11); // Sonucun görüntülenmesi.. document.write("Yeni tarih = " + tarih.toLocaleString() + " ");

39 Dizgi Nesnesi JavaScript’in bir diğer önemli nesnesi dizgi (string) veya bir başka deyişle katar olarak bilinir. Dizgiler, karakterlerden oluşur. Bu karakterler alfabetik olabileceği gibi, sayısal karakterlerden veya her ikisinin karışımından oluşabilir. Bir dizgiyi programa tanıtmak, daha doğrusu yaratmak için aşağıda belirtilen tanımlardan yararlanılır. dizgi = new String() dizgi = new String(“karakterler”) dizgi:Yeni dizgi nesnesinin adı karakterler: Dizgiyi oluşturan karakterler

40 Dizgi Nesnesi Dizgi nesnesini new deyimi ile yaratabileceğimiz gibi, bir değişkene doğrudan doğruya bir dizgi ifadeyi atayarak da yaratabiliriz. Ancak bu durumda söz konusu değişken genel String nesnesini paylaşarak kullanır. Böyle bir durumda, bu nesneye bir özellik eklendiğinde, diğer tüm dizgi nesnelere de aynı özelliğin eklendiği kabul edilir. Örneğin, pazartesi ve salı gibi iki değişkene farklı ifadelerin atandığını varsayalım. var dizi1, dizi2; pazartesi = “Bugün hava güneşli”; sali = “Bugün hava bulutlu”;

41 Dizgi Nesnesi Bu dizgilerden birincisine hava sıcaklığı ile ilgili olarak, aşağıda görüldüğü biçimde 25 değerinin özellik olarak eklendiğini varsayalım. pazartesi.sıcaklik = 25; Böyle bir tanım yapıldığında, sıcaklık ile belirtilen özellik sadece pazartesi için değil diğer dizgiler için, yani sali dizgisi için de tanımlanmış olur. Diğer yolu deneyerek, iki dizgi nesnesini yaratmak için şöyle bir yol izlenir: pazartesi = new String(“Bugün hava güneşli”); sali = new String(“Bugün hava bulutlu”); pazartesi.sıcaklik = 25; Bu durumda, pazartesi nesnesi için yapılan özellik tanımı sadece bu nesne için geçerli olacaktır. Gerekiyorsa, diğer nesneler için de ayrı ayrı özellik tanımları yapılabilir.

42 Dizgi Nesnesi Örnek: Üç ayrı dizgi nesnesi yaratmak ve daha sonra bu nesnelerin içerdiği değerleri listeleyelim… firma = new String("Proje Yazılım"); adres = new String("ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"); document.write(firma + " "); document.write(adres);

43 Font Renklerini Değiştirmek HTML kodları kullanıldığında, bir dizginin renkleri etiketi içinde COLOR niteliği ile tanımlanabiliyordu. Aynı amaca JavaScript yöntemleriyle de ulaşabiliriz. Bir dizgi karakterlerinin rengini belirlemek için fontcolor() yönteminden yararlanılır.

44 Font Renklerini Değiştirmek var str = "Merhaba LMYO"; document.write(str.fontcolor("blue"));

45 Font Boyutlarını Ayarlamak HTML ‘de fontların büyüklüklerini ayarlamak üzere etiketi ve SİZE niteliği birlikte kullanılır. JavaScript’de ise aynı işlemi yerine getirmek amacıyla fontSize() yönteminden yararlanılır. dizgi.fontSize(tamsayı) dizgi: Dizgi nesnesinin tanımlandığı değişken tamsayı: Karakterin büyüklüğünü belirten bir tamsayı değer

46 Font Boyutlarını Ayarlamak var firma = "Proje Yazılım"; var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; document.write(firma.fontsize(7) + " "); document.write(adres.fontsize(4));

47 Büyük ve Küçük Fontlar Fontların belirlenen oranlarda fontSize() yöntemi ile nasıl büyütülebildiğini ya da küçültülebileceğini biliyoruz. Benzer biçimde HTML ‘in etiketine karşılık olmak üzere, JavaScript’de big() yöntemi kullanılır. Bu yöntem şu şekilde tanımlanır: dizgi. big() Eğer daha küçük fontların elde edilmesi söz konusu ise, bu kez small() yöntemine başvurulur. Bu yöntem şu şekilde tanımlanmaktadır: dizgi. small()

48 Büyük ve Küçük Fontlar var firma = "BULUT Yazılım"; var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; document.write(firma.big() + " "); document.write(adres.small());

49 İtalik Karakterler Dizgi karakterlerini gerektiğinde yana yatık (italik) biçime dönüştürebiliriz. Bunun için dizgi nesnesinin italics() yönteminden yararlanılır. Bu yöntem aşağıda gösterildiği biçimde tanımlanır: dizgi.italics()

50 İtalik Karakterler Örnek: Hem firma isimlerini hem de adres bilgilerini italik olarak yazdıracağız. Bunun yanı sıra, firma isminin font boyutunu 7, adres bilgilerinin font boyutunu 2 olarak tanımlayalım… var firma = "EKEN Yazılım"; var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; document.write(firma.fontsize(7).italics() + " "); document.write(adres.fontsize(4).italics());

51 Koyu Karakterler Dizgi karakterlerini görüntülerken, koyu olması isteniliyorsa bold() yönteminden yararlanılır. Bu yöntemin HTML’deki karşılığı etiketi olarak bilinir. Sözü edilen bold() yöntemini şu şe­kilde kullanabiliriz: dizgi.bold()

52 Koyu Karakterler Örnek: Firma adını ve adresini içeren dizgi karakterlerini koyu olarak görüntülemek istiyoruz. Bunun için aşağıda yer alan javaScript programını düzenleyelim… var firma = "ASLAN Yazılım"; var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; document.write(firma.fontsize(7).bold() + " "); document.write(adres.fontsize(4).bold());

53 Yanıp Sönen Karakterler JavaScript programı çalıştığında, tarayıcı penceresinde görüntülenen bazı dizgilerin yanıp sönmesi istenilebilir. HTML’de bu işlem etiketi ile gerçekleştirilir. Ancak bu etiket Microsoft Internet Explorer tarafından desteklenmez. Yanıp sönen karakterler JavaScript programlarında blink( ) yöntemi ile yerine getirilir. dizgi.blink() Not: IE, Chrome,Safari de çalışmaz…

54 Yanıp Sönen Karakterler Örnek: Firma isminin yanıp sönen karakterlerle görüntüleyelim… var firma = "LMYO Yazılım"; var adres = "ABC Yolu, ABC Plaza, Kat.4 - Lüleburgaz"; document.write(firma.blink() + " "); document.write(adres);

55 Üst ve Alt Simgeler HTML de etiketi yardımıyla dizgi karakterlerinin bir miktar küçültülmesi ile alt indisler, benzer biçimde etiketi ile üst indisler elde ediliyordu. Aynı amaca ulaşmak için JavaScript’in aşağıdaki yöntemleri kullanılır. Alt indisleri elde etmek için, dizgi.sub() üst indisleri elde etmek için, dizgi.sup() kullanılır.

56 Üst ve Alt Simgeler Örnek: Alt ve üst indisler özellikle matematiksel ifadelerin gösteriminde kullanılabilir. Örneğin X 2 ve X 2 ifadesini tarayıcı penceresinde görüntüleyelim… ifade ="X" + "2".sup(); ifade2 ="X" + "2".sub(); document.write(ifade +" "); document.write(ifade2);

57 Üst ve Alt Simgeler Benzer biçimde, bu kez x 11 + x x 3 13 ifadesini tarayıcı penceresinde görüntülemek istiyoruz. JavaScript programı şu şekilde düzenlenebilir: ifade = "x" + "11".sub(); ifade += " + x" + "2".sup() + "12".sub() ifade += " + x" + "3".sup() + "13".sub() document.write(ifade);

58 Eş Aralıklı Yazı Tipi HTML’de tanımlanan yazılar tarayıcı penceresinde iki farklı biçimde yerleşecektir. Bunlardan birincisi, karakterlerin düzenli ve orantılı olarak yerleşmesidir. İkincisi ise, daktilo karakterleri gibi eş aralıklı olarak yer almasıdır. Eş aralıklı karakterleri HTML ‘de yaratmak için etiketinden yararlanılır. JavaScript’de ise fixed () yöntemine başvurulur. Bu yöntem şu şekilde tanımlanıyor: dizgi.fixed()

59 Eş Aralıklı Yazı Tipi Örnek : Firma adını normal biçimde yani varsayıldığı biçimde, adresi ise eş aralıklı olarak görüntüleyelim… firma = new String("Proje Yazılım"); adres = new String("ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"); adres = adres.fixed(); document.write(firma + " "); document.write(adres);

60 Bağlantıların Tanımlanması HTML de bir sayfadan diğer bir sayfaya bağlantı yapabilmek için etiketi ile birlikte HREF özniteliği kullanılır. HREF özniteliği hangi sayfaya bağlanılacağını belirler. Aynı işlemi javaScript programlarında da yapabiliriz. Bunun için dizgilerin link() yöntemi kullanılabilir. Bu yöntem şu şekilde tanımlanmaktadır: dizgi.link(bağlantı ifadesi)

61 Bağlantıların Tanımlanması Örnek: Firma adını bir bağlantı noktası olarak tanımlamak istiyoruz. Bu alan tıklatıldığında “http://luleburgazmyo.kirklareli.edu.tr” adresine yönelelim… firma = new String("LMYO Yazılım"); adres = new String("ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"); firma = firma.link("http://luleburgazmyo.kirklareli.edu.tr/"); document.write(firma + " "); document.write(adres);

62 Dizginin Üzerine Çizgi Çizmek HTML ‘de bir dizginin üzerine çizgi çizmek için etiketi kullanılmaktadır. JavaScript’de ise aynı sonucu elde etmek için strike() yönteminden yararlanılır. Bu yöntem aşağıda görüldüğü biçimde tanımlanmaktadır: dizgi.strike()

63 Dizginin Üzerine Çizgi Çizmek Örnek: Adres bilgisinin üzeri çizili olarak görüntüleyelim… firma = new String("Proje Yazılım"); adres = new String("ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"); adres = adres.strike(); document.write(firma + " "); document.write(adres);

64 Büyük ve Küçük Harflere Dönüşüm Dizgi karakterleri büyük ya da küçük harflerle yazılmış olabilir. Gerektiğinde, dizginin tüm karakterlerini büyük harfe veya küçük harfe dönüştürmek mümkündür. Bunun için iki farklı yöntemden yararlanılır. Dizgi karakterlerini küçük harfe dönüştürmek için, dizgi.Lowercase() büyük harfe dönüştürmek için, dizgi.Uppercase() yöntemlerinden yararlanılır.

65 Büyük ve Küçük Harflere Dönüşüm Örnek: Firma bilgilerinin büyük harflerden, adres bilgilerinin ise küçük harflerden oluşturalım… var firma = "Proje Yazılım"; var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; document.write(firma.toUpperCase() + " "); document.write(adres.toLowerCase());

66 Dizgilerin Birleştirilmesi İki ya da daha fazla sayıda dizgiyi birleştirerek yeni bir dizgi elde edilebilir. Bu amaçla concat () yönteminden yararlanılabilir. Söz konusu yöntem şu şekilde tanımlanmaktadır: dizgi1.concat(diğer dizgiler) Bu yöntemi kullanmadan da dizgileri birleştirebileceğimizi biliyoruz. Örneğin a,b ve c dizgilerini birleştirerek d dizgisi içine yerleştirmek için, d = a + b + c biçiminde bir tanım yapmak yeterlidir.

67 Dizgilerin Birleştirilmesi Örnek: Firma adı ve adresi farklı iki dizgi ile tanımlanmıştır. Bu iki dizgiyi birleştirerek tek bir dizgi içine yerleştirmek ve sonucu görüntüleyelim… var firma = "ASLAN Yazılım"; var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; firma_adresi = firma.concat("-",adres); document.write(firma_adresi);

68 Dizgi İçinde Belirli Konumdaki Karakterlere Erişim Bu bölümde dizgilerle birlikte çalıştırılabilecek oldukça kullanışlı bir yöntem üzerinde duracağız. Söz konusu yöntem, dizinin belirli karakterlerine bir indeks yardımıyla erişimi sağlamaktadır. Özellikle karakterlerin kontrol edilmesinde bu yöntemden yararlanılabilir. Sözünü ettiğimiz yöntem charAt() olarak bilinmektedir. Bu yöntemi şu şekilde tanımlıyoruz: dizgi.charAt(indeks)

69 Dizgi İçinde Belirli Konumdaki Karakterlere Erişim Örnek: Firma isminden oluşan bir dizginin içinde kaç tane “ı” harfi bulunduğunu hesaplayalım… var sayi = 0; var firma = "Proje Yazılım"; for (i = 0; i < firma.length + 1; i++) { if (firma.charAt(i) == "ı") { sayi++; } document.write(firma + " dizisinde " + "(ı) harfinden " + sayi + " adet bulunmaktadır.");

70 Dizgi İçinde Belirli Konumdaki Karakterlere Erişim Örnek: Uygulamada girilen bir verinin alfabetik karakterlerden ibaret olup olmadığının denetlenmesi sık sık istenir. Örneğin, girilen personel adı içinde doğal olarak herhangi bir işaret ya da rakamın yer almaması istenir. Bu durumu kontrol etmek üzere aşağıdaki programı yazalım…

71 Dizgi İçinde Belirli Konumdaki Karakterlere Erişim var personel_adı = prompt("Adınızı giriniz : "); var alfabe = "ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ " personel_adı = personel_adı.toUpperCase(); for (i = 0; i < personel_adı.length ; i++) { var durum = 0; for (j = 0; j < alfabe.length ; j++) { if (personel_adı.charAt(i) == alfabe.charAt(j)) {

72 Dizgi İçinde Belirli Konumdaki Karakterlere Erişim durum += 1; break; } if (durum == 0) { alert("Sadece alfabetik karakterler girebilirsiniz.."); break; }

73 Bir Dizginin Diğer Dizgi İçinde Aranması ve İlk Bulunduğu Yerin Belirlenmesi Bir dizgi içinde bir başka dizginin aranılması ve konumunun yani indeksinin ortaya konulması amacıyla indexOf() yöntemi kullanılır. Bu yöntem dizginin en baştaki karakterinin sıfır numaralı indeks olduğunu kabul ederek saga doğru birer birer artırmak suretiyle numaralandığını varsayar. Söz konusu yöntem şu şekilde tanımlanmaktadır: indexOf(dizgi) indexOf(dizgi, başlama)

74 Bir Dizginin Diğer Dizgi İçinde Aranması ve İlk Bulunduğu Yerin Belirlenmesi Bir dizginin bir başka dizgi içinde arama işlemi normal olarak birinci karakterden, yani sıfırına indeksten başlar Ancak bir başlama konumu belirtilerek, o konumdan itibaren de arama işlemi yapılabilir. Tüm arama işlemlerinde başarılı olunursa, yani aranılan dizgi diğer dizgi içinde bulunursa o dizginin konumu görüntülenir. Eğer bulunamaz ise -1 değeri görüntülenir. Örnek: Adres bilgisi içinde “P” harfinin hangi konumda yer aldığını bulmak istiyoruz. Bunun için aşağıdaki javaScript programını düzenliyoruz.

75 Bir Dizginin Diğer Dizgi İçinde Aranması ve İlk Bulunduğu Yerin Belirlenmesi var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; konum = adres.indexOf("P") document.write(konum);

76 Bir Dizginin Diğer Dizgi İçinde Aranması ve İlk Bulunduğu Yerin Belirlenmesi Bu dizgi yerine “Kat” dizgisinin konumunun aranması söz konusu olsaydı, program şu şekilde düzenlenecekti: var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; konum = adres.indexOf("Kat") document.write(konum);

77 Bir Dizginin Diğer Dizgi İçinde Aranması ve İlk Bulunduğu Yerin Belirlenmesi Eğer aranılan dizgi olarak “ABC” dizgisini kullanacak olursak 0 değerinin elde edildiği görülür. Çünkü bu dizgi adres dizgisinin ilk karakterinden başlamaktadır. Ancak adres dizgisi içinde bir başka “ABC” dizgisi daha bulunmaktadır. Bu dizginin konumunu bulmak için, indexOf () yöntemi farklı biçimde kullanılır. Bu kez ilk “ABC” dizgisini içine almayacak biçimde bir noktadan aramaya başlatılır. Örneğin 1 veya daha büyük bir konumdan başlatılabilir.

78 Bir Dizginin Diğer Dizgi İçinde Aranması ve İlk Bulunduğu Yerin Belirlenmesi var adres = "ABC Yolu, ABC Plaza, Kat:4 - İstinye"; konum = adres.indexOf("ABC",1) document.write(konum);

79 Bir İfade Yardımıyla Yapılan Karşılaştırmalar Dizgi içinde belirli bir kalıbı aramak gerekebilir. Bu gibi durumlarda düzenli ifade (regular expression) nesnelerinden yararlanılır. Bu tür nesneler, değisken = /kalıp/[işaret] biçiminde tanımlanabilir. Yukarıdaki tanım yerine, değisken = new RegExp("kalıp") değisken = new RegExp ("kalıp"), "işaret") Biçimindede tanımlanabilir.

80 Bir İfade Yardımıyla Yapılan Karşılaştırmalar Burada görüldüğü gibi, söz konusu nesneyi tanımlamak için bir kalıp ve gerektiğinde bir işaret kullanmaktadır. Kalıp, ifadeyi simgeleyen terimlerden oluşur. İşaret ise, arama işlemlerinin nasıl yapılacağını belirleyen bir karakterdir. Söz konusu karakter aşağıdakilerden biri olabilir: g :Kalıbın dizginin tümünde aranmasını sağlar i :Büyük-küçük harf ayrımının yapılmadığı durum m :Çoklu satır arama işlemi

81 Bir İfade Yardımıyla Yapılan Karşılaştırmalar İfade kalıpları bir nesne biçiminde tanımlandıktan sonra, bu kalıplar karşılaştırma işlemlerinde kullanılabilir. Bu tür karşılaştırma işlemlerini yerine getirmek amacıyla match() yönteminden yararlanılır. dizgi.match(ifade) ifade: İfade kalıbını içeren nesne

82 Bir İfade Yardımıyla Yapılan Karşılaştırmalar Örnek: Adres bilgisi içinde “A” harfini arayalım… var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; dizi = adres.match(/A/g); document.write(dizi);

83 Bir İfade Yardımıyla Yapılan Karşılaştırmalar Bu kez büyük- küçük harf ayrımına bakılmaksızın karşılaştırma işlemini yapalım… var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; dizi = adres.match(/A/ig); document.write(dizi);

84 Karşılaştırma Sonucunda Bulunan Dizginin Konumu Yukarıda ele alarak incelediğimiz match() yöntemi, bir kalıp ile belirlenen ifadenin bir dizgi içinde aranmasını sağlıyordu. Sonuç olarak karşılaştırmaya uyan sonuçlar görüntüleniyordu. Eğer karşılaştırma sonucunda bulunan dizginin konumunu öğrenmek gerekiyorsa search() yöntemi kullanılır. Bu yöntem şu şekilde tanımlanmaktadır: dizgi.search(ifade)

85 Karşılaştırma Sonucunda Bulunan Dizginin Konumu Örnek: Adres bilgisi içinde “kat” dizgisini aramak istiyoruz. Bu dizginin adres dizgisi içinde hangi konumda yer aldığını bulalım… var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; var a = /kat/ig; b = adres.search(a); document.write(b);

86 Belirli Konumdan Başlayan Belirli Sayıdaki Karakterin Elde Edilmesi Bir dizgi içinde, belirli bir konumdan başlamak üzere belirlenen sayıda karakteri alarak, bir başka dizi içine yerleştirmek üzere substr() yönteminden yararlanılır. Bu yöntem şu şekilde tanımlanmaktadır: dizgi.substr(başlama) dizgi.substr(başlama, uzunluk) başlama:Dizginin başlama konumu uzunluk: Dizginin uzunluğu

87 Belirli Konumdan Başlayan Belirli Sayıdaki Karakterin Elde Edilmesi Adres dizgisinin 10. Konumundan itibaren 9 karakteri alarak bir dizgi içine yerleştirmek ve sonucu görüntüleyelim… var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; var adres_1 = adres.substr(10, 9); document.write(adres_1 ) ;

88 Belirli Konumda Başlayan ve Belirli Konumda Biten Karakterlerin Elde Edilmesi Bir dizgiye substr() yöntemini uygulayarak, bir konumdan itibaren belirli sayıda karakteri alabiliyorduk. Bunun yerine başlangıç ve bitiş konumlarını belirleyerek karakterleri seçebiliriz. Böyle bir amaca ulaşmak için substring() yöntemi kullanılır. Bu yöntem aşağıda belirlenen biçimde kullanılabilir: dizgi.substring(başlangıç,bitiş) başlangıç: Dizgi içindeki başlama konumu bitiş: Dizgi içindeki bitiş konumu

89 Belirli Konumda Başlayan ve Belirli Konumda Biten Karakterlerin Elde Edilmesi Örnek: Yukarıdaki aynı sonuca bu kez substring() yöntemini kullanarak erişmek istiyoruz. Dizginin içinde 10 ile 19. konum arasındaki karakterleri elde edelim… var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; var adres_1 = adres.substring(10,19); document.write(adres_1);

90 Bir Dizgiyi Başka Dizgiyle Değiştirmek Bir dizgi içinde yer alan karakterleri belirlediğimiz başka karakterlerle yer değiştirebiliriz. Bunun için dizgi nesnesinin replace() yönteminden yararlanılabilir. Bu yöntem şu şekilde tanımlanıyor: dizgi. replace(dizgi1, dizgi2) dizgi1: Belirlenen dizginin değiştirilecek elemanları dizgi2: dizgi1 ile yer değiştirecek yeni dizgi

91 Bir Dizgiyi Başka Dizgiyle Değiştirmek Örnek: Adres bilgileri içinde yer alan “Yolu” dizgisi yerine “Caddesi” dizgisini yerleştirelim… var adres = "ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"; re = /yolu/gi; var yeni = adres.replace(re,"Caddesi"); document.write(yeni);

92 Dizginin bir Dilimi Gerek duyulduğunda, bir dizginin belirli bir bölümü, ya da bir başka deyişle dilimi seçilerek kullanılabilir. Bir dizginin belirlenen bir dilimini tanımlamak için slice() yöntemi kullanılabilir. dizgi.slice(baslangıç) dizgi.slice(başlangıç, son) başlangıç: Dilimin başlangıç konumu. Dizgilerin ilk konumunun O indeksi ile tanımlandığı unutulmamalıdır son: Dilimin son konumu

93 Dizginin bir Dilimi Örnek: adres dizgisinin ilk karakterinden başlayarak 8. karakterine kadar olan bölümünü ayırarak görüntüleyelim… firma = new String("Proje Yazılım"); adres = new String("ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"); adres = adres.slice(0,8); document.write(firma + " "); document.write(adres);

94 Dizgi Elemanlarını Dizi İçine Yerleştirmek Bir dizginin sahip olduğu elemanları tek tek ayırarak bir dizi içine yerleştirmek mümkündür. Bunun için split() yöntemine başvurulur. dizgi.split(ayıraç) dizgi.split(ayırac, sayısı) ayıraç: İşlem esnasında kullanılacak olan ve dizgi içinde yer alan ayıraç sayısı: En fazla kaç elemanın seçileceğini belirler Bu yöntemi kullanabilmek için dizgi içinde yer alan bir ayıraçtan yararlanılır. Örneğin boşluklar birer ayıraç olarak kullanılabilir. Boşluk ayıracı olarak “ “ biçiminde bir tanım yapılabilir.

95 Dizgi Elemanlarını Dizi İçine Yerleştirmek Örnek: Adres bilgisi birbirlerinden virgüllerle ayrılmış elemanlardan oluşmaktadır. Bu elemanları seçerek bir dizi içine yerleştirmek ve daha sonra dizinin her bir elemanını tek tek yazdıralım… adres = new String("ABC Yolu, ABC Plaza, Kat:4 - Lüleburgaz"); a = adres.split (","); for (i = 0; i<3; i++) { document.write(a[i] + " "); }


"İnternet Programlama-I JAVASCRİPT -TARİH İŞLEMLERİ-" indir ppt

Benzer bir sunumlar


Google Reklamları