Sıfırdan İleri Seviye Javascript #1 Veri Türleri

DarkS0LDIER

Deneyimli Moderatör
5 Ara 2019
1,788
430
Sydney
Merhaba, bugün yeni bir serimize başlıyoruz. Javascript, web programlamada html,css hemen sonrasından gelen temel bir gereksinimdir. Eğer Javascript bilmiyorsanız web programlamacı olamazsınız. Bu serimizde ister altyapısı olsun ister ilk programlama dili olarak öğrenecekler için bu kaynak eğer gerekli özeni ve pratikleri yaparsanız yeterli olup sizi orta seviye üstüne çıkaracak bir seri olacaktır. Daha fazla böyle sözel konularla zaman kaybetmeyelim ve serimizin ilk konusuna geçiş yapalım.

İlk olarak sizden masaüstünde sağ tak tık yapıp bir klasör ve bu klasörün içine main.html ve uzantısı .js bile bitecek iki dosya oluşturup visual studio code'a atın. Daha sonra html dosyanıza "!" yazarak temel html kodlarını derleyiciye yazdırın. Daha sonra "<body>" etiketi arasına

Kod:
<script src = dosyaadı.js> </script>


Yaparak javascript dosyanızı html'ye iletin. Ctrl-s yaparak kayıt etmeyi unutmayın.

Değişken Türleri


Değişken türleri Javascripte 3 tane çok kullanılır. Hatta bir tanesi çok eski olduğu için genelde iki tane atama operatörü kullanırız. Bunlar :

Let =
Yapısı sonradan değişebilir (örnek olarak toplama işlemi yapıyoruz "let sonuc" ile atama yaparsanız "sonuc" değişkeni sizin topladığınız sayılara göre farklılık gösterecektir.)

Const
Yapısı değişmez (Örnek olarak bir çemberin alanını alan program yapacağız. Çember alanı hesaplamak için Pi (3.18) gerekir. Biz bu değeri daha sonra değiştirmeyeceğiz sonsuza kadar 3.18 kalabilir)

Var = Bunun var olduğunu bilin yeter kendisi oldukça eski bir değişkendir. Uzun kodlarda sorun çıkartabilir

Değişken tanımlarken Türkçe karakterler kullanmamaya, sayılar ile başlamamasına ve özel karakterler alt çizgi (_) hariç kullanılmamalıdır.

Veri Türleri


Veri türleri, her yazılım dilinde olan önemli, basit ve temel bir şeydir. Yazacağınız kodların türünü belirlememize işe yarar diyebiliriz. Javascripte iki tür veri yapısı vardır ilkel veriler ve ilkel olmayanlar.

İlkel Veri Türleri

Number
String
Boolen
Null
Undefined

İlkel Olmayan Veri Türleri

Object (Nesneler)
Arrays (Diziler)

Şimdi sırasıyla bunlar ne anlama geliyormuş öğrenelim.

Öncelikle
"console.log()" ifadesini çok kullanacağız. Bu ifadeyle yazdığımız kodları web konsol bölümünden kontrol edeceğiz.

İlkel Veri Türleri



Kod:
let yazi = "javascript"
console.log(yazi);


JapEhXxgBn.png


AE5bcIfSqRMt.png


Bu örnek bir stringtir. Stringler genelde
tek tırnak (''), çift tırnak (") ile tanımlanabilir. Bu durum size kalmış. Stringler ile matematiksel işlem yapamazsınız.

Kod:
let sayi1 = 3;
let sayi2 = 5;


let toplam = sayi1 + sayi2;


let cikarma = sayi1-sayi2;


let carpma = sayi1*sayi2;


let bolme = sayi1/sayi2;


let mod = sayi1%sayi2 ;


console.log(toplam)
console.log(cikarma)
console.log(carpma)
console.log(bolme)
console.log(mod)

uPw5ymNV.png


KkenING51.png



Number tipleri ile matematiksel işlemler yapabilirsiniz. Aslında işlem operatörlerini burada göstermek tam yeri olur. .

Artı (+) = Number değerlerini toplar
Eksi (-) = Number değerlerini çıkarır
Yıldız (*) = Number değerlerini çarpar
Kayık Çizgi (/) = Number değerlerini böler
Yüzde (%) = Sayıların modunu (Bölme işleminden kalanı alır örnek : 5/2 işlemindne kalan 1'dir)


Ayrıca,
Eşittir (==) = iki eşittir kullanırsanız verilerin eşit olup olmadığın bize söyler.


Kod:
console.log(sayi1==sayi2)

Bize burada false değeri yani bir boolen tipi döndü. Eğer sayılar eşit olsaydı True dönecekti

Eşittir (===) = Üsteki eşittirden farkı ise eğer üç eşittir kullanırsanız girdiğiniz sayılarının yanı sıra veri türünün de kontrol eder yani


Kod:
let sayi1 = "2"
let say2 = 2;


console.log(sayi1 == say2)

cUhgP.png


tGk4-2M.png



Burada bir adet string bir adet number tipi değişkenimiz olduğu halde bize true değeri döndü. Eğer 3 eşittir yaparsanız sayının yanı sıra veri türünün de eşit olup olmadığına bakacaktır.


Kod:
let sayi1 = "2"
let say2 = 2;


console.log(sayi1 === say2)


Büyük ve büyük eşittir (> && >=) Numberın diğer numberden büyük olup olmadığını söyler. Büyük eşittir genellikle döngülerde işimize yarıyor. Şu anlık bilin yeter

Küçük ve küçük eşittir (< && =<)Numberın diğer numberden küçük olup olmadığını söyler. Küçük eşittir genellikle döngülerde işimize yarıyor. Şu anlık bilin yeter


Ve ( &&) = Özellikle if-else gibi yerlerde işimize yarar eğer sayı>=10 && sayı<=15 ise konsola yazdır diyebiliriz. Her iki şart da sağlanmalıdır biri false olursa tüm işlem false olur (temelde bilin buralara da geleceğiz)

Veya (||) = Özellikle if-else gibi yerlerde işimize yarar eğer sayı>=10 || sayı<=15 ise konsola yazdır diyebiliriz. Bir şart da sağlanması true değeri dönmesi için yeterlidir. (temelde bilin buralara da geleceğiz)

İlkel Olmayan Veri Türleri


Kod:
let sayilar = [1,2,3]
let sayi = [1,2,3]
console.log(sayilar==sayi)

T9_uvWB.png


Q9ej35g.png


Diziler içinde birden çok veriyi saklayan veri tipidir. İleride bu konuya değineceğiz temelde bilin şimdilik yeter. İlkel olmayan tiplerde false değeri dönülür. Halbuki içleri aynı olduğu halde

Kod:
let kullanici1 = {
nick: "dark",
forum : "tht",
uyeKodu : 123
}
let kullanici2 = {
    nick: "dark",
    forum : "tht",
    uyeKodu : 123
    }
 console.log(kullanici1==kullanici2)

DlUMT.png


Keza objeler de diziler gibi false değeri döndürüyor. Obejleri de değineceğiz şimdilik temel olarak bilin yeter

Kod:
let sayilar = [1,2,3]
let sayi = sayilar
console.log(sayilar==sayi)

MKOrQY.png


Bu bir istisnai bir durum diyebiliriz. Eğer ilkel olmayan türü başka bir değişkene atayıp onla karşılaştırırsak true değeri dönecektir.

Matematik Nesnesi (Math Objesi)


Matematik nesnesi ile sayı ile alakalı işlerimizde oldukça yardımcı oluyor. Mesela sayı tahmin oyunu ( gerekli şeyleri öğrendikten sonra örnek olarak yapacağız), random Id üreten fonksiyon gibi işlemlerde kullanılabilir. Math objesi tek başına değildir bu yüzden math objesinin özelliklerine bakalım

Kod:
let pi = Math.PI
console.log(pi)


9XzVnmE.png


fBN3kq8s-x_.png


Burada direkt bize Pi sayısını veriyor. Kendimiz yeni bir değişken atamak yerine math.pi kullanarak direkt çemberin alanını hesaplayabiliriz mesela


Kod:
console.log(Math.floor(5,6))
console.log(Math.ceil(5.6))
console.log(Math.round(5.6))

8Ha_MDA5.png


LFaB74.png


Kullanıcıdan bir sayı aldığınızı varsayalım ve kullanıcı sayıyı ondalıklı girdi. Bizim sayıyı tam olarak gösterebilmek için yukarıdaki 3 ifadeyi kullanırız.

Floor = Ondaklı sayıyı direkt
en az olan versiyonunu yazdırır (sayımız 5.6 ama 5 olarak konsola döndü)
Ceil = Ondaklı sayıyı direk
t en çok olan versiyonunu yazdırır (sayımız 5.6 ama 6 olarak konsola döndü)
Round = Ondaklı sayıyı direk
t en yakın olan versiyonunu yazdırır (sayımız 5.6, 6 olarak konsola döndü eğer sayımız 5.4 olsaydı 5 olarak dönecekti)


Kod:
console.log(Math.min(-5, 3, 20, 4, 5, 10))


console.log(Math.max(-5, 3, 20, 4, 5, 10))

fn8L9PwpW4.png


C6ZEvGoOJ1wW.png



İçinde birden fazla olan değerlerin en küçük (min) en büyük (max) değerlerini bulmak için kullanılır.

Kod:
const sayi = Math.random ()
console.log(sayi)

5NoKvOsby_.png



dcN8Jlsyw.png



Math.random ifadesi bize rastgele sayı üretir. Eğer bu kodu çalıştırıp sayfayı yenilerseniz her seferinde yeni sayılar göreceksiniz. Burada bilmeniz gereken şey ise math.random tek başına yeterli değil. Çünkü 0.102329292 tarzı sayılar üretiyor. Ya biz 0-10 arasındaki sayıları istiyorsak ne yapacağız o zaman ?

Kod:
let sayi = Math.floor(Math.random()*11)
console.log(sayi)

ko7OALtq.png



Y1BgDlIMks2.png


Artık sayımız 0-10 arasında sayı üretiyor. Eğer bu sayıyı yükseltmek istiyoranız math.random () * sayiniz yaparsanız o aralıkta sayı verecektir size

String Birleştirme


Birden fazla stringi tek yerde birleştirmemiz gerekebilir bunu yapmak ise oldukça çok kolaydır


Kod:
let bosluk = " "
let nick = "darks0ldier"
let forum = "tht"
let konu  = "veri türleri"


console.log(nick + bosluk + forum  + bosluk + konu)

rAnbPKUuc0Y-.png


IxThuVj.png


Ek olarak paragraflarda
bir alt satıra geçmek için \n ifadesi kullanılır

Bir başka birleştirme işlemi de ki tek tek değişken atamak yerini biz bunu çok kullanırız


Kod:
let a = 2
let b = 3
console.log(` ${a} ve ${b} 'nin toplamı = ${a + b}`)

HemGdF.png



08hZUBOcdNpb.png


Ters tırnak, dolar ve köşeli parantezler ile stringleri kolayca tek yerde birleştirebiliyoruz

String Metotları


String metotlarını gündelik hayatta oldukça fazla kullanırız. Metotlar işimize kolaylaştırırken bir uyarı geçmek istiyorum kodları asla ama asla ezberlemiyorsunuz zaten pratik yaptıkça öğreneceksiniz. Şimdi metotlara geçelim

1-length

String içerisindeki karakterlerin sayısını belirtir. Boşluklar dahildir.



Kod:
let yazi = "türk hack team"
console.log(yazi.length)

r9PF2HvJ.png


uwemlN6LXOk.png

2- String içindeki karaktere ulaşma


Programlama dilinde 0 ilk karaktere eşit mesela forum kelimesinin 0.karakteri "f"'dir. 1.karakter ise "o" olacaktır.

Kod:
let string = 'JavaScript'
let ilk = string[0]
console.log(ilk)

lr_iG-e4m.png


gF6nmb.png




En son harfe ulaşmak için tek tek harfleri saymamıza gerek yoktur.


Kod:
let son = string.length - 1
console.log(son)

1Yjuid_A9FBL.png

HMXK1Ec.png


Artık kelimenin kaç harften oluştuğunu biliyoruz. Geriye hangi harf olduğunu bulmak kaldı üsteki işlemi yaparak hangi harf olduğunu bulabilirsiniz.

3- toUpperCase()


Javascripte büyük harf - küçük harf duyarlılığı vardır. Bu metot ile küçük harflerin tamamını büyük harf yapabilirsiniz.

Kod:
let yazi = "türk hack team"
console.log(yazi.toUpperCase())

mJGfO_.png


M_8-z3dh.png


4- toLowerCase():


Bu metot string verisini küçük harflere dönüştürür.

Kod:
let yazi = "TÜRK HACK TEAM"
console.log(yazi.toUpperCase())

5- substring():


Başlangıç indeksi ve durma indeksi olmak üzere iki argüman almaktadır.

Kod:
let string = 'JavaScript'


console.log(string.substring(0,4))   
console.log(string.substring(4,10))

jWvwkt.png


KYazl2QpHPr.png


6-split():


Bu metot bir stringi belirtilen yerden bölmeye yarar. ( array oluşturuyor )

Kod:
let string = 'Türk Hack Team'
 console.log(string.split())   
 console.log(string.split(' '))

bz_sQyIh0BJ.png


n40CN78.png


7- trim():


String'in başında ve sonundaki boşlukları silmeye yarar.


Kod:
let string = "                        Türk Hack Team             "
console.log(string)
console.log(string.trim())

vQsVJg2x.png


xYXf9.png


8-includes():


Bu metot string içerisinde varlık kontrolü yapmaya yarar. Eğer bulursa true, bulamazsa false döner. ( birebir arama yapar )


Kod:
let yazi = "Türk Hack Team"
console.log(yazi.includes("Türk"));
console.log(yazi.includes("Hava çok sıcak bugün"));

dy9CYlmrb7v.png


Jli3Wn.png

9- replace():


Bu metot string içerisinde değiştirme yapmamızı sağlar. Eski ve Yeni olmak üzere iki argüman alır.

Kod:
let string = "Türk Hack Team,"
 console.log(string)
console.log(string.replace("Hack","Siber Güvenlik"))

U4sEG.png


EPMLpH8S362.png


10- charAt():


Stringdeki indeksi belirttiğinizde o indeksin değerini yazdırır.

Kod:
let yazi = "Türk Hack Team"
console.log(yazi.charAt(3))

yoP3tjw.png



JNYZxWX_5pi-.png

11- indexOf():


Bu metot belirtilen değerin indeksini verir. Değer bulunamazsa -1 sonucunu döndürür. ( Birebir arama yapar örneğe bakın )


Kod:
let yazi = "Türk Hack Team"
console.log(yazi.indexOf("Hack"))
console.log(yazi.indexOf("Hava çok sıcak"))

tOAiJr.png


1ZYRC.png


12 - lastIndexOf():


Bu metot belirtilen değerin son değer indeksini verir. Değer bulunamazsa -1 sonucunu döndürür. ( Birebir arama yapar örneğe bakın )

Kod:
let yazi = "Türk Hack Team Hack Platformu"
console.log(yazi.lastIndexOf("Hack"))


console.log(yazi.indexOf("Hack"))


console.log(yazi.lastIndexOf("Hava çok sıcak"))

ikWxEM.png


52E3n4.png

13 - concat():


Bu metot birleştirme işlemini sağlar, birden fazla değer alabilir

Kod:
let yazi = "Türk"


console.log(yazi.concat(" ","Hack"," ","Team"));

oAuC-5NPgxHB.png


AuGOELv0aMp.png

14- startsWith


String'in belirtilen değer ile başlayıp başlamadığını kontrol eder. true yada false döndürür.


Kod:
let yazi = "Türk Hack Team"
console.log(yazi.startsWith("Türk"))
console.log(yazi.startsWith("Hack"))

6xsMbRc50A.png


7PlEaIvQtZjr.png

15 - endsWith:


String'in belirtilen değer ile bitip bitmediğini kontrol eder. true yada false döndürür.

16 - search:


Argüman olarak bir alt dize alır ve ilk eşleşmenin dizinini döndürür. Arama değeri bir dize veya normal ifade kalıbı olabilir.


Kod:
let yazi = "Türk Hack Team"
console.log(yazi.search("Hack"))
console.log(yazi.search("Team"))


LIH8ik2Ma.png



grYzR.png

17 - repeat():


bağımsız değişken olarak bir sayı alır ve stringi sayı kadar döndürür.


Kod:
let yazi = "Türk Hack Team"
console.log(yazi.repeat(10))

g9mDYfi5.png


HwrQmKbi.png

Veri Türlerini Kontrol Etme


Eğer verinizin türünü merak ediyor iseniz typeof metotu ile verinizin türlerini kontrol edebilirsiniz

Kod:
console.log(typeof 'İsim')


console.log(typeof true)


console.log(typeof 4)


console.log(typeof NaN)

m6ivcSj_g.png



dZoNP-YR.png

Veri Türünü Değiştirme


Javascriptte dilerseniz veri türünü değiştirebilirsiniz şimbi buna bakalım


Kod:
let string = "10"
let sayi = parseInt(string)
console.log(typeof string)
console.log(typeof sayi)

eZxFf_9qTuH6.png


n6z_ty.png


ParseINT kullanımı ile string bir ifadeyi integer olarak çevirdik

Kod:
let string = "10.448283023823"
let sayi = parseFloat(string)
console.log(typeof string)
console.log(typeof sayi)

q0x4NKEQ.png


IB3Y26.png


Stringten float değerine çevirdik


Kod:
let float = 10.4943939392
let int = parseInt(float)
console.log(int)

NuxivjGV6h.png

faq2RL.png


Burada ise float değeri integer yaparak tam sayıyı çevirdik.


Tebrikler ! İlk dersi bitirdin bugün veri yapılarını öğrenerek serüvenin ilk adımını attın. Artık veriler üzerinde çalışmalar yapabilir ve bu verileri kontrol edebilirsin
 
  • Beğen
Tepkiler: RW
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.