JavaScript Nedir?Nerelerde ve Niçin Kullanılır?

JavaScript web sayfalarını etkileşimli kılan bir tür  programlama dilidir. Fakat  tam bir programlama dilidir denilemez. Kendi başına  JavaScript ile program yazılamaz. JavaScript uygulamaları  NotePad dosyalarına yazılmış kodlardır ve HTML belgelerine yerleştirilirler. Yazılan JavaScript uygulamaları mutlaka bir browsera ihtiyaç duyar.  Bir browser bu kodları yorumlamaya başladıktan sonra JavaScript kodları browserı  yönlendirmeye  başlar.

JavaScript yerine HTML kullanılabir mi?

Hayır. HTML ve JavaScript tamamen farklı şeylerdir. HTML  durağan web sitesi içeriğini tanımlamak için tasarlanmış bir  biçimlendirme dilidir. JavaScript ise dinamik görevleri sergileyen bir dil olarak tasarlanmıştır. Sadece JavaScript kodları dosyaya HTML olarak  yerleştirilir ve bu biraz kafa karıştırıcıdır.

JavaScript ile Java arasındaki fark nedir ?

JavaScript ve Java iki farklı programlama dilidir. Sadece isim benzerliği vardır. Netscape firması Aralık 1995’te JavaScript’i piyasaya sürerken o dönemde Java dili sayesinde  popüler olan Java kelimesini kullandı. Bu sayede hala ikisi beraber anılıp karıştırılabiliyor.

JavaScript öğrenerek neler yapabiliriz?

• JavaScript genel olarak web tasarımında kullanılır.
• JavaScript ile kullanıcı girdisini işleyen ya da özel nesneler, dosyalar ve ilişkisel veritabanlarını kullanarak sürekliliği olan verileri yöneten dinamik HTML sayfaları oluşturulabilir.
• JavaScript kodları eventlere yani olayalara erişip onları kontrol edebilir. Bir sayfanın yüklenmeye başlaması ve yüklemenin bitmesi, kullanıcının bir yere tıklamasıyla gelişen eventi kontrol edebilir.
• Önceden sadece istemci tarafından kullanılsa da artık sunucu tarafından da kullanılmaktadır.
• Unity oyun motorunda da JavaScript kodları ile bazı kodlamalar yapılabilir.
• JavaScript HTML bileşenlerini okuyabilir ve yazabilir. JavaScriptler aynı zamanda okudukları HTML bileşenlerini değiştiredebilirler.

8.DERS-JavaScript’te Olaylar(EVENTS)

JavaScript nesne tabanlı bir dildir ve bu yüzden bir çok şey nesneler ile çalışır.Örneğin bir butona tıklandığında bir işlemin yerine gelmesi gibi.Şimdi JavaScript’te hazır olan bir kaç olayı nasıl kullanacağımıza bakalım:

onload Olayı:

Bu olay, sayfa yüklendikten sonra çalıştırılacak olan işlemlerin yapılması için kullanılır .

Örneğin burada baslarken isimli bir fonksiyon oluşturup içerisine sayfa yüklendiğinde çalıştırmasını istediğimiz kod bloklarını yazdık ve body kısmında bir script oluşturup onload olayının içerisinde baslarken fonksiyonunu çağırdık.Bu da sayfa yüklendiği zaman baslarken fonksiyonunun işlemlerini yap anlamına gelmektedir.

onclick Olayı:

Onclick , bir butona veya herhangi bir nesneye tıklandığında bir işlemin gerçekleştirilmesi için kullanılır.

Örnek:

Örneğin bu uygulamada yazdığımız kodların <form></form> kısımları arasında olmasını ve yazdığımız şeylerin ne olduğunu anlamamış olabilirsiniz.Ancak o kısım çok da önemli değildir ben burada kısaca bir form oluşturdum ve onayla butonuna tıkladığımda öalıştırıcak olan kodları onayla isimli bir fonksiyonda gösterdim.Daha sonra

<button onclick=”onayla()”>Onaylıyorum.</button>  yazdığımız yerde aslnda bir buton oluşturup butona tıklandığında çalışmasını istediğimiz fonksiyonu “onayla()” şeklinde çağırdık ve butonun üzerine de ‘Onaylıyorum.’ yazdırdık.Dikkat ederseniz butonun üzerine yazdığımız şey tırnak içerisinde belirtilmedi.

Bu iki olay en çok kullanılan olaylardır.Bunların yanı sıra onfocus, onblur, onerror, onchange ,onmouseover, onmouseout, onkeydown gibi bir çok olay vardır.Belki ilerleyen zamanlarda bu olayları da açıkça gösteren örnekler yapabilirim.

İzlemek isterseniz Youtube’daki olaylar ile ilgili  şu videoyu izleyebilirsiniz.

7.DERS-JavaScript’te Sık Kullanılan Hazır Metodlar

String Metodları

• Length özelliği

Yazdığınız string türünden bir değerin karakter uzunluğunu bulmak için kullanılır.Her bir boşluk bir karakter olarak sayılır.

 

Örneğin bu uygulamada arada bir boşluk olduğu için toplam 22 karakter vardır.

• indexOf() metodu

String türdeki bir değişkende aradığımız bir kelimenin kaçıncı indeksten başladığını gösterir.

Bu örnekte de indeksler 0 dan başladığı için aradığımız Script kelimesindeki s harfi 4.indekse karşılık geldiği için sonuç 4 çıkacaktır.

• search() metodu

indexOf ile aynı işlemi görmektedir.

• Slice metodu()

Slice metodu stringin iki sınırı arasındaki parçayı seçip alır. Seçilen parça başlangıç ve bitiş indekslerinin arasıdır.Seçilen parçayı yeni stringe döndürür. Bu örnekte slice 7 den 14’e kadar olan parçayı seçer.

Eğer seçilen parçanın başlangıç ve bitiş değerleri negatif sayılarsa, stringin sonundan başlarız. Bu örnekte slice -15 ile -7 arasıdır.

Eğer sadece bir sayı değerini seçersek, bize ondan sonraki parçaları verir. Bu örnekte 7 yi seçtiğimizde 7’den sonraki parça olan Şeftali,Karpuz  görünecektir.

Eğer seçtiğimiz sayı negatif bir sayı ise, tersten başlar ve bize önceki parçayı verir. Bu örnekte -7 yi seçtiğimizde -7 den önceki parçayı verir Karpuz görünecektir.

• Substring() Methodu

Bu metod slice metoda benzer. Yalnızca negatif değerleri kabul etmez.

• substr() Metodu

Bu metod da slice metoda benzer. Ancak bu metoda göre ilk sınır nereden sonrasını seçeceğini, ikinci kısım da ilk parçadan seçilecek olan lengthi belirler. Bu örnekte (9,9) seçtik ve karşımıza ftali, Ka çıktı.

• replace() methodu

Replace metodu stringin içindeki değerin yerine belirli başka bir değeri koyar.

Replace metodu stringin ismini değiştirmez, yeni bir stringe döner.

• toUpperCase() metodu

Bu metodla küçük harflerin yerini büyük harfler alır.

• toLowerCase() metodu

Bu metodla büyük harflerin yerini küçük harfler alır.

 

•  Concat() Metodu

Concat metodu ile iki ya da daha fazla stringi birbirine bağlayabiliriz. Toplama yerine de kullanılabilir.

Stringlerin kendisi değişmez sadece yeri değişir.

• charAt() Metodu

Bu metod ile stringin istenilen harfine ulaşabiliriz.

• charCodeAt() Metodu

Bu metod ile stringin belli harfinin evrensel kod değerine ulaşabiliriz.

• split() metod

  Sıralı harflerden istenilenin sırasını gösterir.

Eğer ayırıcı atlanırsa dönen dizinin bütün stringi [0] içinde tutar.

Eğer ayırıcı “” ise, dönen dizi tek karakterlerden oluşur.

 

JavaScript Number Metodları

 

• toString() Metodu

toString sayıları stringe dönüştürür.

• toExponential() Metodu

 

• toFixed() Metodu

Virgülden sonra kaç basamak olacağını belirler.

• toPrecision() Metodu

Basamak sayısını belirler.

• valueOf() Metodu

Sayıyı sayıya dönüştürür.

• Number() Metodu

 

•  parseInt() Metodu

Sadece ilk sayıyı döndürür.

• parseFloat() Metodu

Sadece ilk sayıyı reel sayıya döndürür.

JavaScript Date Metodları

• getTime() Metodu

1 Ocak 1970 den sonraki tarihleri milisaniyeye çevirir.

• getFullYear() Metodu

Bulunduğumuz yılı gösterir.

• getDay() Metodu

Bu metodla haftanın kaçıncı gününde olduğumuzu bulabiliriz.

Haftanın gününün adını da görebiliriz.

• setFullYear() Metodu

Tam tarihi ve bulunulan konuma göre saati verir.

• setDate() Metodu

Bulunulan aya göre tarih ayarı yapar.

• Date.parse() metodu

1 Ocak  1970 ve bugün arasındaki zamanı milisaniyeye döndürür.

JavaScript Array Methodları

toString() metodu

Bu metodla stringleri virgül ile sıralayabiliriz.

join() metodu

Bu metod tostring metosu gibi davranır ama ayırıcıyı siz seçebilirsiniz.

 

pop() metodu

Bu metod ile bir dizideki son eleman gözden kaybolur.

push() metodu

Bu metod ile bir dizinin sonuna bir eleman eklenebilir.

shift() metodu

Bu metod ile dizideki ilk eleman gözden kaybolur.

unshift() metodu

Bu metod ile dizinin başına istenilen eleman eklenebilir.

splice() metodu

Bu metod ile dizinin içine istediğimiz elemanları istediğimiz yere yerleştirebiliriz.Sınır ölçülerinden birincisi yeni elemanların kaçıncı sıraya yerleşeceğini gösterir. Sınır ölçülerinden ikincisi ise kaç elemanın kaldırılacağını gösterir.

sort() metodu

Sort metodu ile dizinin elemanları alfabetik olarak sıralanır.

reverse() metodu

Reverse metodu ile dizi tam tersi yönde sıralanır.

sort(function(a, b){return a-b}) metodu

function(a, b){return a-b} karşılaştırma fonksiyonudur. Sonuç sıfırdan küçük, sıfıra eşit ya da sıfırdan büyük olabilir.

En büyük değer

Büyükten küçüğe sıralamada kaçıncı sıradaki elemanı istiyorsak  [] içine o sayıyı yazıyoruz.

En küçük değer

Küçükten büyüğe sıralamada kaçıncı sıradaki elemanı istiyorsak [] içine o sayıyı yazıyoruz.

Arrayleri bireştirme

concat() metodu

Arraylerin sırasına göre array1.concat(array2,array3,..arrayn) şeklinde yazılabilir.

slice metodu

(a,b) şeklinde yazdığımızda birinci sıradaki dahil ikinci sıradaki dahil değildir.

valueOf() metodu

 

6.DERS-JavaScript’te Diziler

Öncelikle dizi nedir onu merak ediyor olabilirsiniz.Dizi, birden çok değeri bir arada bulundurmak için kullanılır.Örnek vermek gerekirse diyelim ki bazı meyveleri kullanmak istiyorsunuz ve meyve1 , meyve2 , meyve3… gibi değişkenler tanımlayıp onların her birine elma,erik,kiraz… gibi değerler vermek yerine meyve isimli bir dizi oluşturup meyve isimlerini dizinin elemanları olarak ekleyebiliriz.Dizinin içindeki her bir veriye eleman denir.Bu elemanların indeks numaraları vardır ve dizi indeksleri 0 dan başlar.Dizinin kaç boyutlu olduğu dizinin son indeksinin bir fazlasıdır.Örneğin 5 elemanlı bir dizimiz olsun bu dizinin son elemanının indeksi 4 tür.

Şimdi bir dizi nasıl tanımlanır onu inceleyelim 🙂

Yukarıda açıklamada da görüldüğü gibi dizi tanımlarken [] de kullanılabilir.Burada 4 elemanlı bir dizi oluşturduk ve bu dizinin elemanlarını yazdırdık.Ve çıktı aşağıdaki gibi olacaktır.

Şimdi de dizinin her bir indeksine eleman eklemeye bakalım.

Burada diziyi oluştururken boyutunu girmedik ve dizinin indeks indeks içerisine elemanlar eklemiş olduk ve dizinin elemanlarını yazdırdık.Programın çıktısı aşağıdaki gibi olacaktır.

Length Özelliği

Length özelliği dizinin kaç elemanlı olduğunu öğrenmemizde yardımcıdır.Yani dizinin uzunluğunu verir.Şimdi yukarıda oluşturduğumuz dizilerin uzunluğunu bulan uygulamayı yapalım.

length özelliğinin kullanımı yukarıda da görüldüğü gibi  diziismi.length;  şeklindedir.Ve bu uygulamanın çıktısı aşağıdaki gibidir.

Diziye Eleman Ekleme

• Dizinin sonuna bir veya birkaç eleman eklemek istersek push() metodunu kullanabiliriz.

Aşağıdaki örnekte daha ayrıntılı görebilirsiniz.

Push fonksiyonunu kullandığımız zaman eklediğimiz elemanlar dizinin sonuna eklenir.

• Dizinin başına eleman eklemek istersek eğer unshift() metodunu kullanmamız gerekir.Örneğin;

Burada da görüldüğü gibi eklediğimiz ayva ve kiraz meyveleri dizinin başına eklenmiş oldu.

NOT: Dizinin sonuna bir eleman eklemenin bir başka yolu da şu olabilir.

Bu örnekteki çalışma mantığı şu şekildedir:Burada meyveler.length komutunun sonucu 4 olduğundan dolayı meyveler dizisinin 4. indeksine bir değer yüklüyor.Yani dizinin uzunluğu ekleyeceğimiz elemanın indeksine eşit olacaktır. Çıktımız aşağıdaki gibi olacaktır.

Diziden Eleman Silme

• Dizide herhangi bir indeksten itibaren kaç elaman silmek istediğimiz zaman splice() metodu kullanılır.Parantez içerisinde kaçıncı indeksten başlamak istiyorsak önce onu yazıp virgül koyduktan sonra kaç eleman silmek istediğimizi yazarız.
• Dizinin son elemanını silmek istediğimiz zaman pop() metodu kullanılır.
• Dizinin ilk elemanını silmek için shift() metodu kullanılır.

Şimdi bu metotların bir arada bulunduğu bir örneğe bakalım:

Bu uygulamanın çıktısı aşağıdaki gibi olacaktır.

İki veya Daha Fazla  Diziyi Birleştirme

İki veya birden fazla diziyi birleştirmek için concat() metodu kullanılır.Kullanım şekli şu şekildedir: hangidiziye.concat(hangidiziyi1,hangidiziyi2,..);

Yukarıdaki örnekte kullanım şekli açıkça belirtilmiştir.

Dizilerin Sıralanması

• Dizinin elemanlarını A’dan Z ye veya küçükten büyüge doğru sıralamak için sort() metodu kullanılır.
• Elemanları Z’den A’ya veya büyükten küçüğe sıralamak için ise reverse() metodu kullanılır.

Şimdi aşağıdaki örnekle sıralama nasıl yapılır inceleyelim 🙂

Dizinin Herhangi Bir Elemanını Aramak

Diyelim ki dizinin içerisinde bir elemanın kaçıncı indekste olduğuna  bakacaksınız  bunun için indexOf() metodu kullanılır.

Örnek:

Bu örnekte 3 sayısının kaçıncı indekste olduğunu sorgulatıyoruz ve 1 ,dizinin ilk elemanı olduğu için onun indeksi 0 dır ve 3 ün indeksi ise 1 dir.

Dizideki Elemanın Türünü Öğrenme

Diyelim i uzunca bir diziniz var ve dizinizdeki bir elemanın türünün ne olduğunu öğrenmek istiyorsunuz buna kolayca ulaşmanı bir yolu var: typeof() metodu.Ancak bu elemanı aratırkan arattığımız elemanın indeks numarasına bakmalıyız.

Örnek:

Örneğin çıktısı aşağıdaki gibidir.

NOT:

Diyelim ki dizinin elemanlarını yazdırırken aradaki ayırma işaretlerinin farklı olmasını istiyorsunuz bunun için join() metodunu kullanmalısınız.İstediğiniz işareti parantez içerisinde tırnak işaretleri arasında  belirtmelisiniz.

 

 

 

5.DERS-JavaScript’te Fonksiyonlar

Program yazarken bir işlemi bir kaç farklı yerde kullanma ihtiyacı duyabiliriz ve bu yaptırdığımız işlemler uzun kod bloklarından oluşabilir. Böyle bir durumda uzun uzun yazmak yerine yaptırmak istediğimiz işlemleri fonksiyon olarak oluşturup kullanmamız gerektiği yerde fonksiyonu çağırarak işlemi kısa yolla yaptırabiliriz.

Parametresiz Fonksiyonlar

Herhangi bir parametre gerektirmeden yapılan fonksiyonlardır.

Örneğin; bu uygulamada head kısmının içerisinde  toplama isminde bir fonksiyon oluşturduk ve bu fonksiyon içerisinde kullanıcıdan aldığımız iki sayıyı toplattırdık. Burada parseInt komutu dikkatinizi çekecektir. Prompt komutu ile kullanıcıdan sayı aldığımız zaman bu string türde bir değer olacaktır. Ve bu yüzden alınan değerleri number türüne dönüştürmemiz gerekecektir. parseInt komutu string türde bir değeri number türüne dönüştürmeye yarar. Fonksiyonu oluşturduktan sonra body kısmında toplama fonksiyonumuzu toplama() şeklinde çağırdık.Ancak dikkat ederseniz fonksiyonu çağırırken komutu <script> arasına yazmalıyız.

Parametreli Fonksiyonlar

Parametreli fonksiyonlar, herhangi bir parametreye ihtiyaç duyulduğunda kullanılır.Parametre kullandığımız zaman oluşturduğumuz fonksiyonda parantez içerisinde kullanacağımız parametreyi belirtmemiz gerekir.Şimdi yukarıdaki toplama fonksiyonunu bir de parametre kullanarak yapalım.

Örneğin burada fonksiyonu oluştururken kullandığımız parametreler sayi1 ve sayi2 dir ve bu parametreleri fonksiyon içindeki işlemleri yaparken kullanmalıyız.Ve body kısmında fonksiyonu çağırırken kullandığımız toplama(a,b) komutunda a fonksiyondaki sayi1 parametresine , b ise sayi2 parametresine karşılık gelmektedir.

Return Deyimi

Return deyimine gelindiği zaman fonksiyon çalışmayı durduracaktır. Returndan sonra bir satırlık herhangi bir işlem de yapılabilir.

Bu programda fonksiyon toplama işlemini yapar ve return çıkan sonucu döndürür ve fonksiyon durur.Daha sonra body kısmında sonucu yazdırırken fonksiyonu çağırdığımızda toplam ı döndürdüğü için ekrana toplamı yazar.Program çalıştırıldığında karşımıza aşağıdaki pencereler  çıkacaktır.

4.DERS-JavaScript’te Koşullar ve Döngüler

KOŞULLAR

IF-ELSE Koşulu

Eğer bir şart doğru ise if kısmı çalışır.Eğer yanlış ise else kısmı çalışır.

Bu örnekte 25  50 den küçük olduğu için if kısmı çalışacaktır.Bu yüzden çıktı aşağıdaki gibi olacaktır.

ELSE IF KOŞULU

Örneğin bu uygulamada önce if kısmı çalışır ancak 100 sayısı 50 den küçük olmadığı için else if koşuluna bakar fakat tekrar 100 sayısı 50 ye eşit değildir bu sefer diğer else if koşuluna bakar ve koşul sağlandığı için çıktı aşağıdaki gibi olacaktır.

SWITCH KOŞULU

Bu koşul else if koşuluna benzemektedir. Ancak uzun uzun yazmak yerine switch kullanmak daha kısa olacaktır.

Bu örnekte kullanıcıdan haftanın gününü sayı karşılığında girmesi isteniyor. Daha sonra girdiği sayının hangi güne denk geldiğini sistem kullanıcıya yansıtıyor. Ve kullanım şekli yukarıdaki gibidir.

Burada kullanıcı 5 sayısını girdiği için switch koşulunda case “5” kısmı çalışacaktır ve bu yüzden ekrana aşağıdaki gibi bir pencere çıkacaktır.

Ancak aşağıdaki örnekte kullanıcı anlamsızca 🙂 8 sayısını girer halbuki haftanın 7 günü olduğunu bilmesi gerekirdi 🙂 fakat switch koşulunda uygun bir case olmadığı için varsayılan yani default kısmı çalışacaktır.

Ve çıktı aşağıdaki gibi olacaktır.

DÖNGÜLER

Döngüler programlamanın olmazsa olmazlarından biridir ve programları kısaltmamızda oldukça faydalıdır. Örneğin; 1’den 1000’e kadar olan sayıları tek tek  ekrana yazdırmak oldukça zahmetli ve uzun olacaktır. Fakat işte tam burada döngüler devreye giriyor. Şimdi aşağıdaki örnekte daha iyi anlayacağınızı düşünüyorum.

FOR DÖNGÜSÜ

‘for(var i=1; i<=sayi1;i++)’  bu kısmın aslında anlamı döngü 1’den başlayıp kullanıcının girdiği sayıya kadar döngüyü birer birer artırarak döngüyü çalıştır demektir. Ve döngü her döndüğünde ekrana i’yi yazdırırız.

WHILE DÖNGÜSÜ

While döngüsü, for ile aynı işlemleri yapmaktadır. Sadece yazılış şekilleri farklıdır. Aşağıdaki örnek while’ın kullanımını açıkça belirtmektedir.

Burada döngünün kaçtan başlayacağını değişkeni tanımlarken ilk başta belirtiyoruz ve döngünün nereye kadar döneceğini while’ın yanında belirtiyoruz. For’dan farklı olarak döngünün değerini artırma işlemini bütün işlemler yapıldıktan sonra yapıyoruz.

DO WHILE DÖNGÜSÜ

Do while, diğer döngülerle mantık olarak aynı olsa bile bazı farklılıkları vardır. Mesela; while’dan farkı koşula döngünün sonunda bakmasıdır. Yani koşulum sağlamasa bile bu döngüyü en az bir defa çalıştırır.

Örneğin; burada kullanıcı 4 sayısını girmektedir ancak do while döngüsü çalışırken döngü 5’ten başlıyor ve döngü bir defa çalışıp ekrana 5 yazdırıyor. Bundan sonra koşula bakıyor ve koşul sağlamadığı için döngüyü çalıştırmaya devam ettirmiyor.

 

Bu örnek ise döngünün koşulu sağladığı bir örnektir.

 

 

3.DERS-JavaScript’te Operatörler

Operatörler bir değişkene değer atamaya,bir değer üzerinde matematiksel veya mantıksal işlemler yapmaya,belirli koşulları yerine getirebilmeye yardım eden karakterlerdir.

ATAMA OPERATÖRÜ

Bir değişkene değer atama yaparken kullandığımız operatör   ” = ” operatörüdür.

Örneğin aşağıdaki örnekte isim adlı değişkenimize ” = ” operatörünü kullanarak string bir değer atadık.

Bu uygulamanın çıktısı aşağıdaki gibi olacaktır.

+=  operatörü

Sayısal bir değişkenin değerine ekleme yapmak için kullanılır. x+=y ifadesinin aslında açılımı x=x+y şeklindedir.

-=  operatörü

Sayısal bir değişkenin değerinden çıkarma yapmak için kullanılır. x-=y ifadesinin aslında açılımı x=x-y şeklindedir.

*=  operatörü

Çarpma işlemi için kullanılır. x*=y ifadesinin aslında açılımı x=x*y şeklindedir.

/=  operatörü

Bölme işlemi için kullanılır. x/=y ifadesinin aslında açılımı x=x/y şeklindedir.

%=  operatörü

Mod işlemi için kullanılır. x%=y ifadesinin aslında açılımı x=x%y şeklindedir.

Aşağıda bu operatörler ile ilgili örneklerin olduğu uygulamayı görebilirsiniz.

Bu uygulamanın çıktısı aşağıdaki gibi olacaktır.

ARİTMETİK OPERATÖRLER

• ‘ + ‘ — Toplama işleminde kullanılır.
• ‘ – ‘ — Çıkarma işleminde kullanılır.
• ‘ * ‘ — Çarpma işleminde kullanılır.
• ‘ / ‘ — Bölme işleminde kullanılır.
• ‘ % ‘ — Bölümden kalanı bulma(mod alma) ‘da kullanılır.
• ‘ ++ ‘ — Artırma işleminde kullanılır.Yani sayıyı bir artırır.
• ‘ – – ‘ — Azaltma işleminde kullanılır.Sayıyı bir azaltır.

Şimdi bu operatörlerin kullanıldığı aşağıdaki uygulamaya bakalım.

Bu uygulamanın çıktısı aşağıdaki gibi olacaktır.

 

EK BİLGİ:

İki string veriyi eklerken de ‘+’ operatörü kullanılır.Aşağıdaki örnekte daha iyi anlayacağınızı düşünüyorum.

Örneğin bu uygulamada Kader ve Göksel metinlerini yan yana ekliyor ve ayrıca 15 değeri ise sayısal olmasına rağmen stringler ile birleştirdiğimiz için 15 stringmiş gibi davranıyor ve Gökselin yanına ekliyor.

KARŞILAŞTIRMA OPERATÖRÜ

‘ = = ‘ Operatörü: İki değişkenin eşit olup olmadığına bakar ancak değişkenin türüne dikkat etmez.

Bu örneğe bakarsak, burada sayi değişkeni string türünden 15 dir ve sayi1 de number üründen 15 dir ama 15 15 e eşi olduğu içi bu operatör değişken türünü dikkate almaz ve bu iki değişken eşittir sonucunu ekrana çıkartır.Çıktısını aşağıda görebilirsiniz.

‘ = = =’ Operatörü:  Kesin eşittir anlamındadır.Bu operatör kullanıldığında karşılaştırılan iki değerin değişken türü de dikkate alınır.

Burada iki değişkenin türü aynı olmadığından else kısmı çalışacaktır.

‘ != ‘ Operatörü: Eşit değildir anlamındar. Örneğin 13 != 5 sonucu doğrudur. 13 != 13 ve

13 != “13” sonucu yanlıştır.Değişkenin türüne yine dikkat edilmiyor.

‘ !== ‘ Operatörü: Kesin eşit değildir anlamındadır.Örneğin 21 !==”21″ sonucu doğrudur.

‘ < ‘ Operatörü: Küçüktür anlamındadır. Örnek 5<3 ifadesi doğrudur.

‘ > ‘ Operatörü:Büyüktür anlamındadır.

‘ <= ‘ Operatörü:Küçük eşittir anlamındadır.

‘ >= ‘ Operatörü:Büyük eşittir anlamındadır.

MANTIKSAL OPERATÖRLER

‘ && ‘ Operatörü: Ve anlamındadır.Şartın doğru olabilmesi için tüm koşulların doğru olması gerekir koşullardan biri yanlış ise sonuç yanlış çıkacaktır.

Bu  uygulamanın çıktısı aşağıdaki gibi olacaktır.Çünkü 17 sayısının üçe bölümünden kalan 2 dir bu yüzden sayi1 % 3 işleminin sonucu yanlış olacağından dolayı işlemin sonucu yanlış çıkacaktır.

‘ || ‘ Operatörü: Veya anlamındadır.İşlemin doğru çıkabilmesi için şartlardan en az birinin doğru olması yeterlidir.

Bu örnekte sayının beşe bölümünden kalan sıfırdır ama ona bölümünden kalan sıfır değildir.Fakat bu işlemin sonucu doğru çıkacaktır çünkü şartlardan biri doğrudur.

2.DERS-JavaScript’te Değişkenler ve Veri Türleri

DEĞİŞKENLER

Bir programlama dilinin temelini aslında değişkenler oluşturuyor diyebiliriz.Değişkenler verilerin saklandığı birimlerdir ve biz yeri geldiğinde bu değişkenleri çağırarak işlemler gerçekleştiririz. JavaScript’te değişken tanımlarken var komutu kullanılır.

Aşağıdaki örneğe birlikte bakalım.

Öncelikle bu örnekte var komutu ile sayi1,sayi2 ve toplami isimlerinde değişkenler tanımladık ve ” =” operatörü ile değişkenlerimize  bir değer atama işlemi gerçekleştirdik.Daha sonra document.write komutu ile ekrana sonucumuzu yazdırdık.Bu örneğin çıktısı aşağıdaki gibi olacaktır.

VERİ TÜRLERİ

STRING: Metinsel veri türüdür.Tırnak içindeki değerler değişkenin türünün string olduğu gösterir.

NUMBER: Sayısal veri türüdür.JavaScript’de tamsayı , ondalıklı sayı,8 ve 16’lı tabanda olmak üzere 4 farklı sayısal veri türü vardır.”=” ifadesinden sonra sayısal değer girilirse bu değişken türünün number olduğu anlaşılır.

BOOLEAN:  Mantıksal veri türüdür.Bu değişken türünün sonucu ya 0 yada 1 yani ya true yada false olmak zorundadır.

ARRAY(DİZİ):  Grup halinde saklanan verilerin bulunduğu veri türüdür.

UNDEFINED/NULL:  Değikenin içeriği henüz tanımlanmamış ise bu  undefined bir değişkendir ancak değişkenin içi  boş ise bu değişken null bir değişkendir.

Aşağıdaki örnekte tüm değişken türüne örnek verilmiştir.

 

1.DERS-JavaScript’te Ekrana Yazı Yazdırma ve Kullanıcıdan Değer Alma

JavaScript ile Ekrana Yazı Yazdırma

JavaScript de ekrana herhangi bir şey yazdırmak için bir kaç komut vardır.Aşağıda bir kaç komut ile ekrana nasıl çıktı verilir örnek yaparak göstereceğim.

• document.write() komutu ile yazdırma:

Aslında biz bu komutlar ile yazdırmak istediğimiz tırnak içindeki mesajı web sayfasına yaz demek istiyoruz .Bu komut daha çok test etme deneme işlemlerinde kullanılır.Bu blogda çoğu yazdırma işlemini bu komutu kullanarak yapacağız.  Bu komutu yazdığımız zaman karşımıza aşağıdaki gibi bir sayfa çıkacaktır.

• innerHTML ile yazdırma:

Ekrana yazdırmada kullanılan bu komut HTML de en sık kullanılan komuttur.Burada JavaScript HTML elementine erişmek  için document.getElementById(id) komutunu kullanır. id ,bizim HTML içerisinde tanımlamış olduğumuz bir elementdir. innerHTML ise bu HTML in içeriğini tanımlar.Bu örneğin çıktısı aşağıdaki resimdeki gibi olacaktır.

Yani toplam diye bir id oluşturduk ve HTML içeriğin ise “toplam:” şeklinde tanımladık.Dolayısıyla ekrana bu içeriği yazdırmış olduk.

• window.alert() komutu ile yazdırma:

Örneğin böyle bir komut yazdığımız zaman karşımıza bir uyarı penceresi çıkacaktır.Burada ekrana yazdırmak istediğimiz mesaj web sayfasına yazılmaz,uyarı penceresi ile kullanıcıya yansıtılır.Bu yazdırma komutunu kullanıcıya herhangi bir uyarı vermek istediğimizde kullanabiliriz.

JavaScript ile Kullanıcıdan Bir Değer Alma

Bir websitesi oluştururken kullanıcıdan bilgi alışverişi yapmaya ihtiyaç duyarız.Bu nedenle kullanıcıdan bilgi almak için prompt() metodu kullanılır. Prompt metodunun almış olduğu bilgi her zaman string türden bir veridir.

*Resimlere tıklayarak daha net bir şekilde görebilirsiniz.