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
Yaparak javascript dosyanızı html'ye iletin. Ctrl-s yaparak kayıt etmeyi unutmayın.
İ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](https://r.resimlink.com/JapEhXxgBn.png)
![AE5bcIfSqRMt.png](https://r.resimlink.com/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](https://r.resimlink.com/uPw5ymNV.png)
![KkenING51.png](https://r.resimlink.com/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](https://r.resimlink.com/cUhgP.png)
![tGk4-2M.png](https://r.resimlink.com/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](https://r.resimlink.com/T9_uvWB.png)
![Q9ej35g.png](https://r.resimlink.com/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](https://r.resimlink.com/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](https://r.resimlink.com/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](https://r.resimlink.com/9XzVnmE.png)
![fBN3kq8s-x_.png](https://r.resimlink.com/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](https://r.resimlink.com/8Ha_MDA5.png)
![LFaB74.png](https://r.resimlink.com/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ı direkt en çok olan versiyonunu yazdırır (sayımız 5.6 ama 6 olarak konsola döndü)
Round = Ondaklı sayıyı direkt 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](https://r.resimlink.com/fn8L9PwpW4.png)
![C6ZEvGoOJ1wW.png](https://r.resimlink.com/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](https://r.resimlink.com/5NoKvOsby_.png)
![dcN8Jlsyw.png](https://r.resimlink.com/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](https://r.resimlink.com/ko7OALtq.png)
![Y1BgDlIMks2.png](https://r.resimlink.com/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](https://r.resimlink.com/rAnbPKUuc0Y-.png)
![IxThuVj.png](https://r.resimlink.com/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](https://r.resimlink.com/HemGdF.png)
![08hZUBOcdNpb.png](https://r.resimlink.com/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.
String içerisindeki karakterlerin sayısını belirtir. Boşluklar dahildir.
Kod:
let yazi = "türk hack team"
console.log(yazi.length)
![r9PF2HvJ.png](https://r.resimlink.com/r9PF2HvJ.png)
![uwemlN6LXOk.png](https://r.resimlink.com/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](https://r.resimlink.com/lr_iG-e4m.png)
![gF6nmb.png](https://r.resimlink.com/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](https://r.resimlink.com/1Yjuid_A9FBL.png)
![HMXK1Ec.png](https://r.resimlink.com/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](https://r.resimlink.com/mJGfO_.png)
![M_8-z3dh.png](https://r.resimlink.com/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](https://r.resimlink.com/jWvwkt.png)
![KYazl2QpHPr.png](https://r.resimlink.com/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](https://r.resimlink.com/bz_sQyIh0BJ.png)
![n40CN78.png](https://r.resimlink.com/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](https://r.resimlink.com/vQsVJg2x.png)
![xYXf9.png](https://r.resimlink.com/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](https://r.resimlink.com/dy9CYlmrb7v.png)
![Jli3Wn.png](https://r.resimlink.com/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](https://r.resimlink.com/U4sEG.png)
![EPMLpH8S362.png](https://r.resimlink.com/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](https://r.resimlink.com/yoP3tjw.png)
![JNYZxWX_5pi-.png](https://r.resimlink.com/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](https://r.resimlink.com/tOAiJr.png)
![1ZYRC.png](https://r.resimlink.com/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](https://r.resimlink.com/ikWxEM.png)
![52E3n4.png](https://r.resimlink.com/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](https://r.resimlink.com/oAuC-5NPgxHB.png)
![AuGOELv0aMp.png](https://r.resimlink.com/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](https://r.resimlink.com/6xsMbRc50A.png)
![7PlEaIvQtZjr.png](https://r.resimlink.com/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](https://r.resimlink.com/LIH8ik2Ma.png)
![grYzR.png](https://r.resimlink.com/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](https://r.resimlink.com/g9mDYfi5.png)
![HwrQmKbi.png](https://r.resimlink.com/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](https://r.resimlink.com/m6ivcSj_g.png)
![dZoNP-YR.png](https://r.resimlink.com/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](https://r.resimlink.com/eZxFf_9qTuH6.png)
![n6z_ty.png](https://r.resimlink.com/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](https://r.resimlink.com/q0x4NKEQ.png)
![IB3Y26.png](https://r.resimlink.com/IB3Y26.png)
Stringten float değerine çevirdik
Kod:
let float = 10.4943939392
let int = parseInt(float)
console.log(int)
![NuxivjGV6h.png](https://r.resimlink.com/NuxivjGV6h.png)
![faq2RL.png](https://resmim.net/cdn/2024/06/14/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