- 13 Ocak 2018
- 3,227
- 29
[A'dan Z'ye] JavaScript Öğreniyoruz #1
Merhabalar,
A'dan Z'ye Javascript eğitimi 1. part ile karşınızdayım. Bu eğitim ile javascript programlama dilini kavramanızı sağlayacak ve uygulamalı olarak sizlere aktaracağım. Eğitimimiz 3 parttan oluşmaktadır. İlk partımızda javascripttin temellerini verecek ve böylece girişimizi yapmış olacağız. Ayrıca eğitim tamamınca "Visual Studio Code" editörünü kullanacağım. Siz dilediğiniz editörü kullanabilirsiniz. Visual Studio Code kullananlar için işinizi kolaylaştıracak birkaç eklentiyi kurarak eğitimimize başlayalım.
KODLAMA İÇİN GEREKLİ ORTAMIN HAZIRLANMASI
İlk olarak Visual Studio Code editörünü aşağıdaki resmi sitesinden indirip kurabilirsiniz.
İndirip kurduktan sonra eklentilerimizi kurmaya başlayalım. Eklentiler sayfasına gitmek için editörün sol taraftaki panelinde bulunan "Extensions" simgesine tıklıyoruz,
Ardından arama kısmına "javascript Code Snippets" yazarak çıkan eklentiyi kuruyoruz. Bu eklenti önceden tanımlanmış kod parçalarını içerisinde bulundurduğu için kod yazımımızı hızlandıracak ve kolaylaştıracaktır.
Şimdi arama kısmına "Live Server" yazarak çıkan eklentiyi kuruyoruz. Bu sayede kodlarla yaptığımız değişiklikleri anlık olarak görüntüleyebileceğiz.
Eklentilerimizi de kurduğumuza göre artık başlayabiliriz.
JAVASCRİPT DOSYASINI HTML DOSYASINA DAHİL ETME
Masaüstüme "javascript" adında bir klasör oluşturdum. Editörüm ile bu klasörü açıyorum. Bu andan itibaren işlemlerime bu klasör ile devam edeceğim. Editör üzerinde klasörümüzün içerisine "index.html" adından bir dosya oluşturuyorum. Ardından aynı klasör içerisine "app.js" adında javascript dosyası oluşturuyorum. Şimdi Js dosyamızı index.html dosyamıza dahil edelim. Bu sayede app.js dosyasına yazdığımız javascript kodları web sitemizde çalıştırılmış olacak. Bunun için html dosyamızda <body></body> tagleri arasına aşağıdaki kodu yazıyoruz;
Bu sayede Js dosyamız html dosyamıza dahil edilmiş oldu.
WEB GELİŞTİRİCİ ARACI VE CONSOLE
Bu araç tarayıcılar üzerinde kodları denemek için kullanılan araçlara web geliştirici aracı adını veriyoruz. Web geliştirici aracına klavye üzerinde "F12" tuşuna basarak erişebiliriz. (Aslında hepimizin bildiği 'Öğeyi Denetle' olayı )
Aracımızın "Console" kısmına gelerek kodlarımızı burada denemeye çalışalım ve aşağıdaki kodu yazalım, (Yazdığımız kodları console satırında görüntülemek için console.log(); kodunu kullanıyoruz. )
Kodumuzu yazdıktan sonra aşağıdaki resimde de gördüğünüz üzere yazdığımız kodun değeri karşımıza aynı ekranda çıktı
Web geliştirici aracı üzerinde yaptığımız bu işlemlerin tamamını editörümüz üzerinde de yaparak "console" üzerinde görüntüleyebiliriz. Bu sayede kodlarımızın değerini "console" üzerinde görmüş ve denemiş olduk.
JAVASCRİPT DEĞİŞKEN OLUŞTURMA
VAR ANAHTARI
Bu değişken, belirlediğimiz değişkenlere değer atamamızı sağlar. Aşağıdaki kodlar ile a, b ve c değişkenlerine değer atadım. Javascriptte yazdığımız ifadeleri çalıştırmak ve aynı satırda birden fazla ifade bulundurmak için her ifadenin sonuna noktalı virgül ( ; ) ekliyoruz. Örnek kullanımına bakabilirsiniz,
Şimdi bu değerleri console'a yansıtacak olan kodu giriyorum,
Yukarıdaki kod a, b ve c değişkenlerini aşağıdaki gibi tarayıcımızın console kısmına yazdırdı;
PRİMİTİVE VERİ TİPLERİ
NUMBER VERİ TİPİ
Değişkene atadığımız sayı değerinin konsol üzerinde sayı olarak görüntülendiği veri tipidir. Örneğin;
"Peki değişkenlerin veri tiplerini nasıl öğrenebiliriz?" Diyecek olursanız da bunun için aşağıdaki kodu yazdığımızı ve değişkenimizi oluşturduğumuzu farz edelim.
Bu değişkenimizin veri tipini öğrenebilmek için aşağıdaki kodu yazıyoruz,
Bu kodu yazdıktan sonra "console" kısmına baktığımızda değişkenimizin veri tipini öğrenebiliriz. Gördüğünüz gibi "Number" veri tipinde olduğunu öğrendik,
STRİNG VERİ TİPİ
Değişkene atadığımız yazı değerinin console üzerinde de yazı olarak görüntülendiği veri tipidir. Bu veri tipini kullanırken değişkenimize ait değeri tırnak (") içerisine almamız gerekiyor. Örneğin "a" isimli değişkenimizin değeri "javascript" olsun. "javascript" değerini kod üzerinde tırnak içerisinde göstermemiz gerekiyor. Şimdi bir örnek yapalım,
Bunu aşağıdaki kodla console üzerine yazdırdığımızda,
Console üzerinde aşağıdaki gibi görüntülenecek.
Şimdi bu değişkenimizin veri tipini öğrenelim. Aşağıdaki kodu editörümüz üzerinde yazıyoruz,
Ve gördüğünüz gibi değişkenimizin veri tipinin "String" olduğunu gördük
BOOLEAN VERİ TİPİ
Bu veri tipine ait değişkenler yalnızca "true" ya da "false" değerini alabilirler. Koşul durumunda kullanılan veri tipidir. Örnek kullanımı aşağıdaki gibidir;
Şimdi bu değişkenimizin veri tipini öğrenelim;
Aşağıda da gördüğünüz gibi değişkenimizin veri tipi boolean,
NULL VERİ TİPİ
Değer olarak atandığı değişkeni boş değerli olarak gösteren veri tipidir. Değer kısmına yalnızca "Null" değeri alır. Örnek kullanımını aşağıda görebilirsiniz;
Yukarıda a değişkenime null değerini atadım ve alttaki kod ile console üzerine yazdırdım. Ve console üzerinde aşağıdaki gibi göründü;
UNDEFİNED VERİ TİPİ
Değer verilmeyen değişkenlerin veri tipidir. Örneğin "a" değişkenimizi atadık ancak değerini vermedik. Bu durumda değişkenimizin veri tipi "Undefined" olacaktır.
Üstteki kodu girdikten sonra aşağıdaki kod ile console ekranı üzerine yazdırmak istediğimizde
Tarayıcımızın console kısmında aşağıdaki gibi görünecektir,
REFERENCE VERİ TİPLERİ
ARRAY
Birden fazla değerleri belirtmek için kullanılan veri tipidir. Örneğin, "a" değişkenimize "1, 2, 3, 4" değerlerini aynı anda atayalım. Bunun için aşağıdaki kodu yazıyoruz,
Şimdi bu değerleri aşağıdaki kodlarla console üzerine yansıtalım,
Tarayıcımızın console kısmına baktığımızda aşağıdaki gibi göründüğünü öğrendik,
Şimdi bu veri tipimizin ne olduğuna bakalım. Aşağıdaki kodu yazıyoruz,
Tarayıcımızın console kısmına tekrar baktığımızda yazdığımız modern kodların birer obje olması sebebiyle veri tipinin yazması gereken yerde "Object" yazdığını gördük.
DEĞİŞKEN TANIMLAMA
ES6 Standartı sayesinde Javascript değişkenleri "var" anahtar kelimesine ek "let" ve "const" anahtar kelimeleriyle de tanımlanabilmektedir. "var" anahtar kelimesini önceki başlıklarımızda bahsettiğimiz için bu başlıkta değinmeyeceğim.
LET İLE DEĞİŞKEN TANIMLAMA
let anahtar kelimesini var anahtar kelimesinden ayıran temel özellik let ile tanımlanan değişkenin tekrar tanımlanamamasıdır. Örneğin "a" değişkenini "10" değeri ile tanımladık. Bu değişkeni ikinci kez farklı bir değer ile tanımlamaya çalıştığımızda hata verecektir. Örneğin, kodumuzu aşağıdaki gibi oluşturduğumuzu varsayalım.
Yukarıdaki kodu kaydedip tarayıcımızdan console kısmına baktığımızda aşağıdaki gibi bir uyarıyla karşılacağız,
CONST İLE DEĞİŞKEN TANIMLAMA
Bu anahtar kelimeyle oluşturulmuş değişkenin değeri tanımlandıktan sonra başka bir kod öbeği içerisinde değiştirilemez. Örneğin aşağıdaki kod ile "a" isimli değişkenimizi tanımlayıp konsola yazdıralım,
Bu kodumuz çalışacak ve tanımladığımız değer console üzerinde görünecektir. Lakin farklı bir kod öbeği içerisinde "a" değerini tekrar tanımlamak istediğimizde bunu başaramadığımızı göreceğiz. Örneğin "a" değişkenimizi "10" değeri ile tanımlayalım. Ardından farklı bir kod öbeğinde "a" değişkenimizi "20" olarak tanımlayalım. Bakalım ne olacak,
Kodu kaydedip console'a baktığımızda aşağıdaki gibi "typeerror" hatasıyla karşılaştık;
Şimdi bu durumu bir de arraylerde ele alalım. const ile tanımladığımız değişkeni tekrar tanımlamak istediğimizde tıpkı yukarıdaki gibi bir hatayla karşılaşacağız. Örneğin "a" değişkenimizin değeri array olarak "1,2,3,4,5" olsun. Biz bu değeri farklı bir öbekte "1,2,3,4,5,6" olarak değiştirdiğimizde yine aynı hatayı alacağız. Yani aşağıdaki gibi bir kod yazdığımızda aynı hata karşımıza tekrar gelecek.
Ancak biz "a" değerinin referans gösterdiği yeri değiştirmek yerine referans gösterdiği yerin değerini değiştirdiğimizde bu hatayla karşılaşmayacağız. Örneğin kodumuzu aşağıdaki şekilde oluşturalım.
Bu kodu oluşturduktan sonra "a.push();" kodu ile referans gösterilen yerin değerine ekleme yapalım. Diyelim ki "a" değişkenimizin değerine ek olarak "6" değerini de ekledik. Bunun için kodumuzu aşağıdaki şekilde yazıyoruz.
Yani kod öbeğimiz şu şekilde oluşuyor;
Bunu da console üzerinde yazdırdığımızda hata vermediğini ve "6" değerini değişkenimize tanımladığını göreceğiz.
VERİ TİPLERİNİ BİRBİRLERİNE DÖNÜŞTÜRME
Bu başlığımızda veri tiplerini birbirine dönüştürme işlemlerini anlatacağım. Örneğin string veri tipinde bir değişkeni number veri tipine dönüştürme ya da number veri tipindeki bir değişkeni string veri tipine dönüştürme işlemlerini yapacağız.
VERİ TİPLERİNİ STRİNG VERİ TİPİNE DÖNÜŞTÜRME
İlk olarak let ile "value" isminde bir değişken oluşturuyorum ve buna "10" değerini tanımlıyorum,
Ardından bu kod öbeğime aşağıdaki kodu da ekleyerek ekranıma yazdırıyorum,
Totalde aşağıdaki gibi bir kod öbeğim oluşmuş oldu,
Daha önceki bilgilerimizden faydalanarak "value" isimli değişkenimizin number veri tipinde olduğunu görebiliyoruz. Şimdi bu değişkenimizi string veri tipine dönüştürelim. Bunu "10" olarak tanımladığımız değeri parantez () içine alarak ve başına "String" yazarak gerçekleştirebiliriz. Bunu koda dökecek olursak aşağıdaki gibi bir kod yazmamız gerekir,
Yukarıdaki kodu yazdıktan sonra console üzerinde oluşan değer değişmeyecek ancak veri tipimizin değiştiğini göreceğiz. Bunu daha önceden de öğrendiğimiz gibi aşağıdaki kod ile kontrol edebiliriz,
Konsolumuza baktığımızda veri tipinin string veri tipine değişmiş olduğunu gördük,
Boolean veri tipini de yine aşağıdaki gibi string veri tipine dönüştürebilmemiz mümkün,
Değişkenin veri tipini kontrol etmek için kod öbeğimize aşağıdaki kodu da ekledikten sonra console üzerinde veri tipinin string veri tipi olduğunu göreceğiz,
Aynı şekilde örneğin, "10" değeri ile tanımlanmış number veri tipine sahip value değişkenimizi string veri tipine çevirmek istediğimizde aşağıdaki gibi bir kod yazabiliriz,
Üstteki kodu editörümüze yazıp altına aşağıdaki kodu yazdıktan sonra console kısmına baktığımızda veri tipimizin string veri tipine dönüşmüş olduğunu göreceğiz
VERİ TİPLERİNİ NUMBER VERİ TİPİNE ÇEVİRME
Farklı veri tiplerine ait değerler Number parantezi içerisine alınarak number veri tipine çevrilebilir. Örneğin "value" isimli değişkenimizin "10" string değerine sahip olduğunu varsayalım ve bunu koda dökelim. Kodumuz aşağıdaki gibi olacaktır.
Biz bu string veri tipine sahip değişkenimizi number veri tipine çevirmek için değerimizi tıpkı string parantezine aldığımız gibi number parantezi içerisine alacağız. yani kodumuz aşağıdaki gibi olacak;
Biz bunu console üzerine yazdırdığımızda aşağıdaki gibi number veri tipine sahip olarak görünecek
Null veri tipi için de aynı işlemleri yaptığımızda yine number veri tipine dönüştüğünü göreceğiz. Ancak undefined veri tipinin değeri tanımsız olduğu için number veri tipine çevrilmeye çalışıldığında NaN (Not a Number) şeklinde bir cevap çıkacak ve number veri tipine çeviremeyecektir. Aynı şekilde parantez içerisine "Ahmet", "Ali" gibi textler girdiğimizde ya da array oluşurduğumuzda belli bir sayı değeri olmadığı için console üzerinde NaN şeklinde bir cevap dönecektir.
Number parantezi ile gerek ondalık sayı olsun gerek tam sayı olsun her türlü stringi number veri tipine dönüştürebiliriz. Ayrıca ondalık sayılar için ayrı tam sayılar için ayrı kodlar kullanarak da dönüşüm işlemini gerçekleştirebiliriz. Ondalık sayılar için olanla başlayalım. Burada "value" değişkenini tanımlayan sayımız "1.15" ve veri tipimiz string olsun. Bu değişkenin veri tipini number veri tipine dönüştürmek için aşağıdaki kodu kullanacağız;
Bu kod ile ondalık sayıları içeren stringimizi number'a çevirmiş olduk. Şimdi tam sayıları içeren stringimizi ona özel kodla number'a çevirelim. Değişken ismimiz yine "value" ve değişkenimizi tanımlayan tam sayımız "1" ve veri tipimiz string olsun. Bu değişkeni number'a çevirmek için aşağıdaki kodu kullanabiliriz,
Bu kodu console üzerine yazdırdığımızda number veri tipine dönüşmüş olduğunu görebiliriz.
Şimdi veri tipi dönüştürme işlemini otomatik olarak nasıl yapabileceğimize bakalım. Aşağıdaki gibi bir kod girelim. Bu kodda "a" değişkenine 2 değer atadım. javascript bu veri tipinin dönüşüm işlemini otomatik olarak yapacak,
Yukarıdaki koduma aşağıdaki kodu ekleyerek veri tipine bakmak istiyorum,
Totalde kod öbeğim aşağıdaki gibi olacak,
Aşağıda da gördüğünüz gibi 2 değer atadım ve javascript bunları birleştirerek string olarak görünmesini sağladı.
ARİTMETİK OPERATÖRLER
Aritmetik operatörler başlığı altında JS üzerinde Toplama, çıkarma, bölme, çarpma operatörlerini işleyeceğiz. Bunun için ilk olarak 2 değişken oluşturuyoruz ardından bu değişkenlere değer atıyoruz.
Yukarıda gördüğünüz üzere 2 farklı değişken oluşturdum. Şimdi bu değişkenlerimizi toplama operatörümüzü kullanarak toplayalım. Bunun için yukarıdaki kodların altına aşağıdaki gibi bir kod yazıyoruz,
Üstteki kodu yazıp kaydettikten sonra tarayıcı üzerinde console kısmını kontrol ettiğimizde aşağıdaki gibi "value1" ve "value2" değerlerini topladığını ve sonucu console üzerinde gösterdiğini görüyoruz,
Şimdi değişkenlerimizi ve değerlerini değiştirmeden aynı kodlar üzerinde çıkarma işlemi yapalım. Kodumuz aşağıdaki gibi olacaktır,
Kodu kaydedip konsolu görüntülediğimizde işlemi yaptığını ve sonucu console üzerine yazdırdığını görebiliyoruz,
Değişkenleri ve değerlerini değiştirmeden şimdi de çarpma işlemini yapalım çarpma işlemi için simgemiz "*" budur. Çarpma işlemi kodumuzu yazalım,
Şimdi console kısmına bakalım ve çarpma işlemimizin sonucu ekranda görelim
Yine değişken ve değer değişimi yapmadan bölme işlemini gerçekleştirelim. Bu işlem için "/" operatörünü kullanacağız. Kodumuz aşağıdaki gibidir,
Console kısmına baktığımızda aşağıdaki gibi bölme işleminin gerçekleştiğini ve sonucun ekrana yazdırıldığını görüyoruz;
Şimdi ise iki değişkenin bölümünden kalanı görebilmek için aşağıdaki kodu yazacağız. Burada kullanacağımız operatör "%" operatörü,
Gördüğünüz gibi bölme işleminden kalanı console üzerinde görebildik,
MATH OBJESİ VE METODLARI
İçerisinde birçok matematik fonksiyonu ve özelliği barındıran bir objedir.
Şimdi bu objeyi tanıyalım. Örneğin javascript üzerinde "Pi sayısı" değerine ulaşmak istiyoruz. Bunun için aşağıdaki kodu kod satırımıza girmemiz ve console üzerine yazdırmamız yeterli, (console.log(); kodunu kafa karıştırmaması için bu başlık altında anlatımıma eklemiyorum. Lakin console üzerinde sonuçları görebilmeniz için bu kodu yazdığımız kodların sonuna eklemelisiniz. Bunu zaten önceki başlıklarımızda öğrenmiştik)
Şimdi javascript math objesi ile ondalık sayıyı en yakın tam sayıya yuvarlayalım. İlk olarak yuvarlamak istediğimiz sayıyı belirtelim. Ben "3.4" sayısını belirliyorum ve aşağıdaki kodu yazıyorum,
Bu kodu console üzerine yazdırdığımızda aşağıdaki gibi en yakın tam sayıya yani "3"e yuvarlanmış oldu.
Şimdi ise bütün ondalık sayıları bir üstündeki tam sayıya yuvarlayan metoda bakalım. "Math.ceil" metodunu kullanacağız kodumuzu yazarken. Örneğin sayımız yine "3.4" olsun. Bizim bu sayımızın bir üstündeki tam sayı "4" olduğundan javascript sayımızı "4"e yuvarlayacaktır. Kodumuz aşağıdaki gibi,
Aşağıda da gördüğünüz üzere sayımız "4"e yuvarlandı
Tam tersi olarak verilen ondalık sayıyı bir altındaki tam sayıya yuvarlayan bir metodumuz da mevcut. Bu operatörümüz "math.floor" metodu. Bu sefer sayımız "3.8" olsun. javascript bunu "3" sayısına dönüştürecektir. Bakalım öyle mi olacak
Tahmin ettiğimiz gibi sayımız "3" e yuvarlandı.
Bir de karekök alma metodumuz mevcut. Bu metodumuz "Math.sqrt" metodu. Karekökünü alacağımız sayı "36" olsun. Kodumuzu aşağıdaki şekilde yazıyoruz,
Aşağıda da gördüğünüz gibi "36" sayısının karekökünü alarak bize "6" sayısını verdi.
Şimdi mutlak değer alma metodumuzu kullanalım. Metodumuz "Math.abs" metodu. Mutlak değerini almak istediğimiz sayı ise "-36" olsun. Kodumuzu aşağıdaki gibi yazıyoruz,
Aşağıda gördüğünüz gibi "-36" sayısının mutlak değerini alarak bize "36" sayısını verdi
Şimdi üs alma metodunu kullanalım. Metodumuzun adı "Math.pow" metodu. Üssünü almak istediğimiz sayı ise "10" olsun ve "10" sayısının 4. kuvvetini almak isteyelim. Kodumuzu aşağıdaki gibi yazıyoruz,
Aşağıda gördüğünüz gibi "10" sayısının 4. kuvvetini aldı ve console üzerine yazdırdı.
Şimdi max metodunu kullanarak belirtilen sayılar arasında en büyük sayıyı console üzerine yazdıracağız. Bunun için "1", "10", "-100" ve "50" sayılarını belirliyorum ve kodumu aşağıdaki gibi yazıyorum,
Aşağıda da gördüğünüz gibi bu sayılar içinden en büyük sayımızı bulduk,
Şimdi belirtilen sayılar arasından en küçük sayıyı bulup ekrana yazdıracağız. Bunun için "Math.min" metodunu kullanacağız. Yine "1", "10", "-100" ve "50" sayılarını belirliyorum ve kodumu aşağıdaki gibi yazıyorum,
Gördüğünüz gibi en küçük sayımız -100 olarak karşımıza çıktı,
Şimdi 0 ile 1 arasında rastgele sayı üretme metodumuzu kullanalım. Metodumuzun adı "Math.random" Kodumuzu aşağıdaki gibi girdiğimizde sayfayı her yenilediğimizde javascript bize 0 ile 1 arasında rastgele olarak farklı sayılar verecek,
Biz 0 ile 50 arasında rastgele bir sayı üretmesini istersek kodumuza "*50" şekline bir ekleme yapıyoruz. Yani kodumuz aşağıdaki gibi oluyor,
Diyelim ki 0 ile 50 arasında rastgele tam sayılar üretmek istedik. Bunun için de daha önceden öğrendiğimiz "Math.floor" metodunu "Math.random" metodu ile birleştireceğiz. Kodumuz aşağıdaki gibi olacak,
STRİNG METODLARI
Bu başlığımızda javascriptte stringleri biraz daha tanıyacak ve metodlarını öğreneceğiz. İlk olarak stringleri uç uça ekleme metodumuzu görelim. Bunun için iki farklı değişken oluşturalım. Öncesinde "value" isimli değişkenimizi oluşturalım. Bu değişkene değer vermeyeceğiz. Çünkü birazdan oluşturacağımız 2 değişkenin tanımı niteliğinde olacak. Aşağıdaki kodu yazarak value isimli değişkenimizi oluşturuyoruz,
Ardından "value1" ve "value2" adında 2 farklı değişken oluşturuyorum. "value1" değişkenimin değeri "java", "value2" isimli değişkenimin değeri "script" olsun. Bunu aşağıdaki gibi koda döküyorum,
Bu değişkenlerimizi oluşturduk. Şimdi sırada bu iki değişkenin değerini yani stringi uç uça ekleme işlemi var. Bunun için değişkenlerimizi daha önce oluşturduğumuz "value" değişkenine tanımlayıp "value1" ve "value2" değişkenlerinin değerleri arasına "+" operatörünü koyalım. Yani kodumuz aşağıdaki gibi olacak,
Bu kodu da yazdıktan sonra şimdi yazdığımız kodları console üzerinde görüntüleyelim. Önceki başlıklarımızda da yaptığımız gibi kodlarımızın altına aşağıdaki kodu ekliyoruz,
Yani toplamda kodlarımız aşağıdaki gibi olacak,
Sonuçta console'daki görüntü aşağıdaki gibi görünecek;
Stringleri uç uça eklerken arada boşluk olmasını istiyorsak bu sefer de "value" değişkenine tanımladığımız kod öbeğini aşağıdaki gibi değiştireceğiz.
Bu sayede javascript boşluk bıraktığımız kısmın değer olduğunu varsayacak ve iki değişken arasına boşluk koymuş olacak. Totalde kodlarımız aşağıdaki gibidir,
Aşağıda da gördüğünüz üzere araya boşluk bıraktı.
Şimdi değer atanan ve "value" ile eşitlenen değişkenlerimize ekleme yapmak istediğimizi varsayalım. Yani konsolda "javascript" yazmasını değil "javascriptders" yazmasını isteyelim. Bunun için yeni bir değişken oluşturmamıza gerek yok. değişkenlerimizin sonuna "+ "ders"" eklediğimiz zaman konsolda karşımıza "Javascriptders" olarak çıkacak. Zaten "value" değişkenimizi "value1 + value2" şeklinde tanımlamıştık. Bu yüzden bu iki değişkeni tekrar yazmadan aşağıdaki gibi bir kod yazabiliriz,
Buna alternatif olarak aşağıdaki kod kullanılabilir.
Yukarıdaki kodu diğer kodlarımız arasına eklediğimizde toplamda aşağıdaki gibi bir kod öbeğine sahip olacağız,
kodları kaydedip console üzerine baktığımızda aşağıdaki gibi göründüğünü görmüş olacağız,
Şimdi string içerisindeki karakter sayısını bulmayı görelim. Bunun için kullanacağımız metodu "degiskenadi.length;" (degiskenadi yazan yere değişkenimizin adını yazıyoruz) Örnek kullanımı aşağıdaki gibi olacak,
Toplamda aşağıdaki kod öbeğine sahip olacağız,
Gördüğünüz gibi value1 değişkenine ait string değerinin karakter sayısını bize gösterdi,
Şimdi varolan değişkenimize uç uça string ekleme metodumuza bakalım. Kullanacağımız metod "degiskenadi.concat()". Burada parantez içerisine virgülle ayrımak kaydıyla istediğimiz kadar string girebiliriz. Örneğin "value1" stringini ilk olarak "value2" stringiyle ardından değişkene tanımlanmamış "ders" stringiyle birleştirelim. Kodumuz aşağıdaki gibi olmalı,
Toplamda aşağıdaki kod öbeğine sahip olacağız,
Şimdi var olan stringimizdeki bütün karakterlerin küçük harfle yazılması için "degiskenadi.toLowerCase()" metodunu kullanacağız. Örnek kullanımı aşağıdaki gibidir,
Sahip olduğumuz toplam kod öbeği aşağıdaki gibi olacak,
String içerisindeki bütün harfleri büyük yazmak istediğimizde "degiskenadi.toUpperCase()" metodunu kullanıyoruz. Örnek kullanımı aşağıdaki gibidir,
Toplam kod öbeğimiz aşağıdaki gibi olacak,
Şimdi string içerisinde indexlerden bahsedelim. Javascriptte stringlerde bulunan her bir karakter bir index'e karşılık gelir ve bu indexler sırasıyla 0'dan balayarak 0,1,2,3,4... şeklinde isimlendirilirler. Biz javascript üzerinde herhangi bir indexi çağırdığımızda o index hangi karaktere karşılık geliyorsa ekrana o karakter yazdırılır. Örneğin "java" stringimizde 0. index "J" karakteridir. Aynı şekilde 1. index "a" karakteri, 2. index "v" karakteridir gibi. Şimdi bu metodumuzu gösterelim. daha önceden oluşturduğumuz "value1" değişkeninin 3. indexini çağırmak isteyelim. Bunun için aşağıdaki kodu yazıyoruz,
Kodumuzu kaydettikten sonra konsola bakalım. Gördüğünüz gibi Java kelimesinin 3. indexini yani "a" karakterini ekranımıza yazdırdı,
Aynı şekilde bu metod yerine ".charAt()" metodunu da kullanabiliriz. Burada parantez içerisine indexi yazarak konsolda hangi karaktere karşılık geldiği görülebilir. Bu metodun koda dökümü şu şekildedir.
Toplamda kod öbeği aşağıdaki şekilde olmalıdır.
Şimdi stringin boyutunu bilmediğimiz durumlarda hangi index olduğunu da bilemeyeceğimiz için bu seferde uzunluk metodunu kullanacağız. Bunun için stringde istediğimiz karakterin sondan kaçıncı karakter olduğunu belirteceğiz. Örneğin "Java" stringinin sondan 2. karakterini görmek isteyelim. Bunun için aşağıdaki kodu yazıyoruz,
Toplamda kod öbeğimiz şu şekilde olacak,
Aşağıda da gördüğünüz gibi stringimizin sondan 2. karakteri ekranımıza yazdırıldı
Şimdi istediğimiz karakterin kaçıncı indexte olduğunu gösteren indexof metodunu kullanalım. "Java" stringimizin "v" karakterinin kaçıncı indexte olduğunu görmek istediğimizi varsayalım. Bunun için aşağıdaki kodu yazıyoruz,
Toplamda kod öbeğimiz aşağıdaki gibi olmalıdır,
Aşağıda da gördüğünüz gibi "v" karakterinin kaçıncı indexte olduğunu gösterdi.
Şimdi split metodunu işleyelim. Virgüllerle ayrılmış elemanları tek tek almak istediğimizde split metodunu kullanıyoruz. Örneğin "dil" isimli değişkenimize "ingilizce","almanca","fransızca" olmak üzere 3 eleman ekledik ve bunları aşağıdaki gibi virgüllerle ayırdık,
Virgüllerle ayrılmış bu elemanları konsol üzerinde ayırmak istediğimizde kodumuzu aşağıdaki gibi yazıyoruz. Burada kodun sonuna "," ekleyerek elemanların hangi karaktere göre ayrılacağını belirtiyoruz. Yukarıdaki kodda elemanları virgül ile ayırdığımız için burada "," işaretini kullanıyoruz,
Toplam kod öbeğimiz aşağıdaki gibi olmalıdır,
Konsolu görüntülediğimizde elemanlarımızın aşağıdaki gibi arraylere ayrıldığını görüyoruz,
Şimdi yukarıda verdiğimiz "dil" değişkeni elemanlarından "almanca" elemanının yerine "Turkce" koymak istediğimizi varsayalım. Bunun için replace metodunu kullanacağız. Öncelikle "dil" isimli değişkenimizin değerlerine tekrar bakalım,
Burada "almanca" yerine "Turkce" yazmak istediğimizde aşağıdaki gibi bir kod yazıyoruz,
Toplamda kodlarımız aşağıdaki gibi olmalı,
Konsolumuzu görüntülediğimizde istediğimiz gibi olduğunu göreceğiz
Şimdi stringimiz içerisinde istediğimiz elemanın varlığını kontrol edelim.Bunun için includes metodunu kullanacağız. Örneğin ben "dil" değişkenimin içerisinde "fransızca" elemanının varlığını kontrol etmek istiyorum. Eğer stringimizin içerisinde böyle bir eleman varsa konsol üzerinde "true" yazdığını, yoksa "false" yazdığını göreceğiz. Kodumuzu aşağıdaki şekilde yazıyoruz,
Toplamda kodlarımız şu şekilde olmalı,
Konsolumuzu görüntülediğimizde stringimizin içerisinde "fransızca" elemanı olduğu için "true" şeklinde bir dönüt aldık.
TEMPLATE LİTERAL ÖZELLİĞİ
Bu özellik stringleri kolay bir şekilde biçimlendirmemizi sağlıyor. Şimdi bu özelliği kullanarak stringlerimizi oluşturalım. 3 adet değişken oluşturup değerlerini tanımlayacağız. Ben const ile aşağıdaki gibi 3 farklı değişken ve değer oluşturdum,
Şimdi bu değerlerimizi bir stringde birleştirmek istediğimizi varsayalım. Bunu normal şartlar altında aşağıdaki gibi yapacaktık,
Bu kodu konsolumuza yazdırdığımızda aşağıdaki gibi görünecek,
Biz bu kodları yazarak yukarıdaki gibi bir görüntü elde edebildik. Ancak bu kadar uğraşmadan daha kolay bir şekilde yine aynı görüntüyü elde edebiliriz. Burada "template literal" özelliği devreye girecek. Daha önceden oluşturduğumuz aşağıdaki değişkenleri yine editörümüze yazıyoruz,
Birazdan yazacağımız kodlarda " `` " işaretini kullanacağız. Bu işareti oluşturmak için " Alt Gr + noktalı virgül ( ; ) " kombinasyonunu kullanabilirsiniz. Şimdi ilk olarak name değişkenimizden başlayalım. Bu özelliği kullanırken değişkenimizi " ${} " içerisine alarak yazıyoruz. Yani name değişkeninden hareketle ismimizi tanımlayacağımız için kodumuzu şu şekilde yazmamız gerekiyor; " `İsim:${name}\n` " Buradaki " \n " bir sonraki tanımı yeni satıra yazmayı sağlayacak. Biz bu kodumuzu rastgele oluşturduğumuz "a" değişkenine tanımlarsak aşağıdaki gibi bir kod oluşacak,
Aynı şekilde "department" ve "salary" değişkenlerini de bu özellikle yazıp uç uça eklediğimizde "a" değişkenine tanımlanan kodlarımız aşağıdaki gibi olacak,
Bu sayede yukarıdaki uzun kodu kısaltarak vakitten tasarruf edebildik.
ARRAYLERİN ÖZELLİKLERİ
Bu başlığımızda önceki başlıklarımızda da bahsettiğimiz Arrayleri ayrıntılı olarak inceleyecek ve özelliklerine göz atacağız. Bu başlık altında değindiğim metodlar en sık kullanılan metodlardır. Diğer tüm metodlara internet üzerinden erişim sağlayabilirsiniz. Ben örnek olması açısından en sık kullanılan metodlardan bahsedeceğim. İlk olarak arrayleri nasıl oluşturabildiğimize bir bakalım. "1,2,3,4,5,6" rakamlarından oluşan arrayimi aşağıdaki gibi yazabilirim,
Aynı zamanda bir arrayi bu şekilde oluşturabildiğimiz gibi aşağıdaki gibi new Array metoduyla da oluşturabilmemiz mümkün,
Şimdi "numbers" değişkenimizin uzunluğunu "degiskenadi.length" metodu ile görelim. Bu metodu kullandığımızda "numbers" değişkenine ait arrayin kaç elemanlı olduğunu görebiliriz. Kodumuzu aşağıdaki gibi yazıyoruz,
Bu kodu "console.log(value);" kodu ile konsola yazdırdığımızda arrayimizin 6 elemanlı olduğunu görebiliyoruz.
Aynı zamanda stringlerde olduğu gibi arraylerde de elemanımızın kaçıncı indexde olduğunu ya da kaçıncı indexte hangi elemanımızın olduğunu görebilme imkanımız var. Şimdi değişkenimizi ve arrayimizi değiştirmeden 0. indexte hangi elemanımızın olduğuna bakalım aşağıdaki kodu yazıyoruz
Kodumuzu konsola yazdırdığımızda konsol üzerinde "1" elemanımızı görebiliyoruz.
Şimdi herhangi bir indexteki değeri değiştirmeye çalışalım. "numbers" değişkenimizde "4" elemanının yerine "10" yazmak istediğimiz düşünelim. Baktığımızda "4" elemanının 3. indexte olduğunu görüyoruz. Bu nedenle kodumuzu aşağıdaki gibi yazdığımızda "4" elemanının yerine "10" yazılmış olacaktır,
Şimdi istediğimiz elemanın kaçıncı indexte olduğunu "indexOf" metoduyla görelim. Ben "6" elemanımın kaçıncı indexte olduğunu bilmek istiyorum. Bu nedenle kodumu aşağıdaki gibi yazıyorum ve "6" elemanının kaçıncı indexte olduğunu konsolda görebiliyorum,
Şimdi Arrayimizin sonuna "push" metodu ile eleman ekleyelim. Ben arrayime "7" elemanını eklemek istiyorum. Bu nedenle aşağıdaki kodu yazıyorum,
Bu şekilde arrayimin sonuna "7" elemanını eklemiş oldum. Şimdi arrayimizin başına eleman ekleyelim. Bunun için "unshift" metodunu kullanacağız. Ben arrayimin başına "0" elemanını eklemek istiyorum. Bunun için aşağıdaki kodu yazabilirim,
Şimdi arrayimizn sonundan değer çıkartalım. Bunun için "pop" metodunu kullanacağız. Aşağıdaki kodu yazdığımızda arrayimizin en sonundaki kod çıkartılmış olacak,
Aynı zamanda arrayimizin başından "shift" metoduyla eleman çıkartabiliriz. Bunun için aşağıdaki kodu yazıyoruz,
Şimdi belirli indexler arasındaki elemanları çıkartmaya çalışalım. Bunu gerçekleştirebilmek için "splice" metodunu kullanacağız. ben 0. indexten 4. indexe kadar bütün elemanları çıkartmak istiyorum. bu nedenle aşağıdaki kodu yazarak bu isteğimi gerçekleştirebilirim,
Şimdi arrayimizdeki elemanları ters çevirelim. Bunun için "reverse" metodunu kullanacağız. Aşağıdaki kodu yazdığımızda elemanlarımızın sıraı tersine çevrilecektir,
Şimdi elemanlarımızı ilk karakterlerine göre küçükten büyüğe sıralayalım. Bunun için "sort" metodunu kullancağız. Aşağıdaki kodu girdiğimiz zaman javascript elemanalarımızı yalnızca ilk rakamına bakarak küçükten büyüğe doğru sıralayacak,
OBJE OLUŞTURMA
Bu başlığımızda javascript üzerinde obje oluşturacak ve bu objelerin özelliklerini ve işlevlerini tanımlayacağız. İlk olarak bir örnekle başlamak istiyorum. Bir programmer objesi oluşturacağım ve bu programmer'ın yani objemin özelliklerini belirleyeceğim. Aşağıdaki gibi bir kod yazıyorum. Gördüğünüz gibi kodu yazarken süslü parantez " {} " kullandık. Bu süslü parantezimin içerisine birazdan objemizin özelliklerini gireceğiz.
Şablonumuzu oluşturduk şimdi objemize özellik atayalım. Ben bu objemin yani programmer'ımın ismini, yaşını, mail adresini özellik olarak belirteceğim. Aşağıdaki gibi özellikleri süslü parantezin içerisine yazararak ve her özelliğin sonuna virgül (,) ekleyerek objemi tanımlıyorum,
Aynı zamanda aşağıdaki gibi iç içe obje de kullanabiliriz. Mesela "Adres" adında bir obje oluşturup bu objemi "programmer" objemle iç içe yazabilirim. Aşağıdaki gibi bir kod yazabiliriz.
Şimdi konsol üzerinde bu objemizi ve özelliklerini görüntüleyelim. Ben aşağıdaki kodu üstteki kodalrın sonuna ekleyerek yazdığım kodların konsolda görüntülenmesini sağlıyorum,
Şimdi objemizi arraylerden oluşturalım. Bu sefer objemizin adı "programmer2" olsun. Bu sefer en dışta köşeli parantez kullanacağız. Objemize özellik verirken yine süslü parantezimizi kullanacağız. Arrayimi aşağıdaki gibi oluşturuyorum,
Bu kodu konsola yazdırdığımızda konsolumuzda aşağıdaki gibi bir görüntü oluştuğunu görüyoruz,
ZAMAN OBJESİ VE METODLARI
Bu başlığımızda zaman objesi oluşturacak ve metodları ele alacağız. Başlangıç olarak şu anki zamanı görüntüleyeceğimiz kodumuzu yazalım,
bu kodu yazdıktan sonra konsola yazdırdığımızda aşağıdaki gibi şu anki zamanı bize verecek,
Şimdi doğum tarihimizi javascript zaman objesi ile yazmaya çalışalım. Ben Mustafa Kemal Atatürk'ün doğum tarihini ay/gün/yıl şeklinde yazdıracağım. Objeme "birthday" adını veriyorum ve aşağıdaki kodu yazıyorum,
Bu kodu " console.log(birthday); " kodu ile konsolumuza yazdırdığımızda aşağıda gördüğünüz gibi Atatürk'ün doğum tarihini görebildik.
Şimdi "birthday" objemizin üzerinde çeşitli metodları deneyelim. İlk olarak "birthday" metodu üzerinde belirttiğimiz ayın yılın hangi ayı olduğunu "getMonth" metodu ile görelim. Aaşğıkdai kodu "birthday" objemize ait kodların altına yazıyoruz.
kodumuzu konsol üzerine yansıttığımızda Mayıs ayı yılın 5. ayı olduğu halde aşağıdaki gibi "4" sonucu elde ettik. Bunun sebebi javascriptin saymaya "0" sayısından başlamasıdır. Bu durumda Ocak 0. ay olacak dolayısıyla mayıs ayı da 4. ay olmuş olacak.
Şimdi getDate metodunu kullanarak "birthday" objesinde günün ayın hangi günü olduğunu tespit edeceğiz. Kodumuzu aşağıdaki gibi yazıyoruz,
getDay metodunu kullanarak günümüzün haftanın kaçıncı günü olduğunu öğreneceğiz. Yine saymaya 0 saysıından başlanacak yani pazartesi haftanın 0. günü olmuş olacak. Aşağıdaki kodu yazıyoruz,
getHours metodu ile objemizin saat bilgisini elde edeceğiz. Kodumuz aşağıdaki gibi olacak,
getMinutes metodu ile objemizin dakika bilgisini elde edeceğiz. Kodumuz aşağıdaki gibidir,
getSeconds metodu ile objemize ait saniye bilgisini görebileceğiz. Kodumuzu aşağıdaki gibi yazıyoruz,
Şimdi objemizde tanımladığımız zaman bilgilerini değiştirmeyi görelim. İlk olarak ay bilgisini değiştirelim. Ben yukarıda tanımladığım ay bilgisini Ağustos ayıyla değiştirmek istiyorum. Ağustos ayı yılın 8. ayı olmasına rağmen javascriptte 7. ay olacağı için kodumuzu aşağıdaki gibi yazıyoruz,
Aynı zamanda aşağıdaki kodla gün bilgisini değiştirebiliriz. Ben ayın 10. günü olmasını istiyorum. Aşağıdaki kodu giriyoruz,
Şimdi doğum yılını değiştirelim ben doğum yılını 2020 olarak tekrar ayarlamak istediğimde aşağıdaki kodu yazıyorum,
Saat bilgisini değiştirmek için aşağıdaki gibi bir kod yazıyoruz. Ben saat bilgisinin 4 ile değiştirilmesini istiyorum,
Dakika bilgisini değiştirmek için aşağıdaki kodu yazıyoruz. Ben dakika bilgisinin "0" ile değiştirilmesini istiyorum,
Aynı şekilde saniye bilgisini değiştirmek için aşağıdaki metodu kullanıyoruz. ben saniye bilgisini "0" ile değiştirmek istiyorum
Merhabalar,
A'dan Z'ye Javascript eğitimi 1. part ile karşınızdayım. Bu eğitim ile javascript programlama dilini kavramanızı sağlayacak ve uygulamalı olarak sizlere aktaracağım. Eğitimimiz 3 parttan oluşmaktadır. İlk partımızda javascripttin temellerini verecek ve böylece girişimizi yapmış olacağız. Ayrıca eğitim tamamınca "Visual Studio Code" editörünü kullanacağım. Siz dilediğiniz editörü kullanabilirsiniz. Visual Studio Code kullananlar için işinizi kolaylaştıracak birkaç eklentiyi kurarak eğitimimize başlayalım.
KODLAMA İÇİN GEREKLİ ORTAMIN HAZIRLANMASI
İlk olarak Visual Studio Code editörünü aşağıdaki resmi sitesinden indirip kurabilirsiniz.
Kod:
https://tik.lat/0V9gT
İndirip kurduktan sonra eklentilerimizi kurmaya başlayalım. Eklentiler sayfasına gitmek için editörün sol taraftaki panelinde bulunan "Extensions" simgesine tıklıyoruz,
Ardından arama kısmına "javascript Code Snippets" yazarak çıkan eklentiyi kuruyoruz. Bu eklenti önceden tanımlanmış kod parçalarını içerisinde bulundurduğu için kod yazımımızı hızlandıracak ve kolaylaştıracaktır.
Şimdi arama kısmına "Live Server" yazarak çıkan eklentiyi kuruyoruz. Bu sayede kodlarla yaptığımız değişiklikleri anlık olarak görüntüleyebileceğiz.
Eklentilerimizi de kurduğumuza göre artık başlayabiliriz.
JAVASCRİPT DOSYASINI HTML DOSYASINA DAHİL ETME
Masaüstüme "javascript" adında bir klasör oluşturdum. Editörüm ile bu klasörü açıyorum. Bu andan itibaren işlemlerime bu klasör ile devam edeceğim. Editör üzerinde klasörümüzün içerisine "index.html" adından bir dosya oluşturuyorum. Ardından aynı klasör içerisine "app.js" adında javascript dosyası oluşturuyorum. Şimdi Js dosyamızı index.html dosyamıza dahil edelim. Bu sayede app.js dosyasına yazdığımız javascript kodları web sitemizde çalıştırılmış olacak. Bunun için html dosyamızda <body></body> tagleri arasına aşağıdaki kodu yazıyoruz;
Kod:
<script src="app.js"></script>
Bu sayede Js dosyamız html dosyamıza dahil edilmiş oldu.
WEB GELİŞTİRİCİ ARACI VE CONSOLE
Bu araç tarayıcılar üzerinde kodları denemek için kullanılan araçlara web geliştirici aracı adını veriyoruz. Web geliştirici aracına klavye üzerinde "F12" tuşuna basarak erişebiliriz. (Aslında hepimizin bildiği 'Öğeyi Denetle' olayı )
Aracımızın "Console" kısmına gelerek kodlarımızı burada denemeye çalışalım ve aşağıdaki kodu yazalım, (Yazdığımız kodları console satırında görüntülemek için console.log(); kodunu kullanıyoruz. )
Kod:
console.log("Merhaba Dünya");
Kodumuzu yazdıktan sonra aşağıdaki resimde de gördüğünüz üzere yazdığımız kodun değeri karşımıza aynı ekranda çıktı
Web geliştirici aracı üzerinde yaptığımız bu işlemlerin tamamını editörümüz üzerinde de yaparak "console" üzerinde görüntüleyebiliriz. Bu sayede kodlarımızın değerini "console" üzerinde görmüş ve denemiş olduk.
JAVASCRİPT DEĞİŞKEN OLUŞTURMA
VAR ANAHTARI
Bu değişken, belirlediğimiz değişkenlere değer atamamızı sağlar. Aşağıdaki kodlar ile a, b ve c değişkenlerine değer atadım. Javascriptte yazdığımız ifadeleri çalıştırmak ve aynı satırda birden fazla ifade bulundurmak için her ifadenin sonuna noktalı virgül ( ; ) ekliyoruz. Örnek kullanımına bakabilirsiniz,
Kod:
var a = 10;
var b = 20;
var c = 30;
Şimdi bu değerleri console'a yansıtacak olan kodu giriyorum,
Kod:
console.log(a,b,c);
Yukarıdaki kod a, b ve c değişkenlerini aşağıdaki gibi tarayıcımızın console kısmına yazdırdı;
PRİMİTİVE VERİ TİPLERİ
NUMBER VERİ TİPİ
Değişkene atadığımız sayı değerinin konsol üzerinde sayı olarak görüntülendiği veri tipidir. Örneğin;
Kod:
var a = 10;
console.log(a);
"Peki değişkenlerin veri tiplerini nasıl öğrenebiliriz?" Diyecek olursanız da bunun için aşağıdaki kodu yazdığımızı ve değişkenimizi oluşturduğumuzu farz edelim.
Kod:
var a = 10;
Bu değişkenimizin veri tipini öğrenebilmek için aşağıdaki kodu yazıyoruz,
Kod:
console.log(typeof a);
Bu kodu yazdıktan sonra "console" kısmına baktığımızda değişkenimizin veri tipini öğrenebiliriz. Gördüğünüz gibi "Number" veri tipinde olduğunu öğrendik,
STRİNG VERİ TİPİ
Değişkene atadığımız yazı değerinin console üzerinde de yazı olarak görüntülendiği veri tipidir. Bu veri tipini kullanırken değişkenimize ait değeri tırnak (") içerisine almamız gerekiyor. Örneğin "a" isimli değişkenimizin değeri "javascript" olsun. "javascript" değerini kod üzerinde tırnak içerisinde göstermemiz gerekiyor. Şimdi bir örnek yapalım,
Kod:
var a = "javascript";
Bunu aşağıdaki kodla console üzerine yazdırdığımızda,
Kod:
console.log(a);
Console üzerinde aşağıdaki gibi görüntülenecek.
Şimdi bu değişkenimizin veri tipini öğrenelim. Aşağıdaki kodu editörümüz üzerinde yazıyoruz,
Kod:
console.log(typeof a);
Ve gördüğünüz gibi değişkenimizin veri tipinin "String" olduğunu gördük
BOOLEAN VERİ TİPİ
Bu veri tipine ait değişkenler yalnızca "true" ya da "false" değerini alabilirler. Koşul durumunda kullanılan veri tipidir. Örnek kullanımı aşağıdaki gibidir;
Kod:
var a = true;
Şimdi bu değişkenimizin veri tipini öğrenelim;
Kod:
console.log(typeof a);
Aşağıda da gördüğünüz gibi değişkenimizin veri tipi boolean,
NULL VERİ TİPİ
Değer olarak atandığı değişkeni boş değerli olarak gösteren veri tipidir. Değer kısmına yalnızca "Null" değeri alır. Örnek kullanımını aşağıda görebilirsiniz;
Kod:
var a = null;
console.log(a);
Yukarıda a değişkenime null değerini atadım ve alttaki kod ile console üzerine yazdırdım. Ve console üzerinde aşağıdaki gibi göründü;
UNDEFİNED VERİ TİPİ
Değer verilmeyen değişkenlerin veri tipidir. Örneğin "a" değişkenimizi atadık ancak değerini vermedik. Bu durumda değişkenimizin veri tipi "Undefined" olacaktır.
Kod:
var a;
Üstteki kodu girdikten sonra aşağıdaki kod ile console ekranı üzerine yazdırmak istediğimizde
Kod:
console.log(a);
Tarayıcımızın console kısmında aşağıdaki gibi görünecektir,
REFERENCE VERİ TİPLERİ
ARRAY
Birden fazla değerleri belirtmek için kullanılan veri tipidir. Örneğin, "a" değişkenimize "1, 2, 3, 4" değerlerini aynı anda atayalım. Bunun için aşağıdaki kodu yazıyoruz,
Kod:
var a = [1,2,3,4];
Şimdi bu değerleri aşağıdaki kodlarla console üzerine yansıtalım,
Kod:
console.log(a);
Tarayıcımızın console kısmına baktığımızda aşağıdaki gibi göründüğünü öğrendik,
Şimdi bu veri tipimizin ne olduğuna bakalım. Aşağıdaki kodu yazıyoruz,
Kod:
console.log(typeof a);
Tarayıcımızın console kısmına tekrar baktığımızda yazdığımız modern kodların birer obje olması sebebiyle veri tipinin yazması gereken yerde "Object" yazdığını gördük.
DEĞİŞKEN TANIMLAMA
ES6 Standartı sayesinde Javascript değişkenleri "var" anahtar kelimesine ek "let" ve "const" anahtar kelimeleriyle de tanımlanabilmektedir. "var" anahtar kelimesini önceki başlıklarımızda bahsettiğimiz için bu başlıkta değinmeyeceğim.
LET İLE DEĞİŞKEN TANIMLAMA
let anahtar kelimesini var anahtar kelimesinden ayıran temel özellik let ile tanımlanan değişkenin tekrar tanımlanamamasıdır. Örneğin "a" değişkenini "10" değeri ile tanımladık. Bu değişkeni ikinci kez farklı bir değer ile tanımlamaya çalıştığımızda hata verecektir. Örneğin, kodumuzu aşağıdaki gibi oluşturduğumuzu varsayalım.
Kod:
let a = 10;
let a= 20;
console.log(a);
Yukarıdaki kodu kaydedip tarayıcımızdan console kısmına baktığımızda aşağıdaki gibi bir uyarıyla karşılacağız,
CONST İLE DEĞİŞKEN TANIMLAMA
Bu anahtar kelimeyle oluşturulmuş değişkenin değeri tanımlandıktan sonra başka bir kod öbeği içerisinde değiştirilemez. Örneğin aşağıdaki kod ile "a" isimli değişkenimizi tanımlayıp konsola yazdıralım,
Kod:
const a = 10;
console.log(a);
Bu kodumuz çalışacak ve tanımladığımız değer console üzerinde görünecektir. Lakin farklı bir kod öbeği içerisinde "a" değerini tekrar tanımlamak istediğimizde bunu başaramadığımızı göreceğiz. Örneğin "a" değişkenimizi "10" değeri ile tanımlayalım. Ardından farklı bir kod öbeğinde "a" değişkenimizi "20" olarak tanımlayalım. Bakalım ne olacak,
Kod:
const a = 10;
console.log(a);
a = 20;
console.log(a);
Kodu kaydedip console'a baktığımızda aşağıdaki gibi "typeerror" hatasıyla karşılaştık;
Şimdi bu durumu bir de arraylerde ele alalım. const ile tanımladığımız değişkeni tekrar tanımlamak istediğimizde tıpkı yukarıdaki gibi bir hatayla karşılaşacağız. Örneğin "a" değişkenimizin değeri array olarak "1,2,3,4,5" olsun. Biz bu değeri farklı bir öbekte "1,2,3,4,5,6" olarak değiştirdiğimizde yine aynı hatayı alacağız. Yani aşağıdaki gibi bir kod yazdığımızda aynı hata karşımıza tekrar gelecek.
Kod:
const a = [1,2,3,4,5];
a = [1,2,3,4,5,6];
console.log(a);
Ancak biz "a" değerinin referans gösterdiği yeri değiştirmek yerine referans gösterdiği yerin değerini değiştirdiğimizde bu hatayla karşılaşmayacağız. Örneğin kodumuzu aşağıdaki şekilde oluşturalım.
Kod:
const a = [1,2,3,4,5];
Bu kodu oluşturduktan sonra "a.push();" kodu ile referans gösterilen yerin değerine ekleme yapalım. Diyelim ki "a" değişkenimizin değerine ek olarak "6" değerini de ekledik. Bunun için kodumuzu aşağıdaki şekilde yazıyoruz.
Kod:
a.push(6);
Yani kod öbeğimiz şu şekilde oluşuyor;
Kod:
const a = [1,2,3,4,5];
a.push(6);
Bunu da console üzerinde yazdırdığımızda hata vermediğini ve "6" değerini değişkenimize tanımladığını göreceğiz.
VERİ TİPLERİNİ BİRBİRLERİNE DÖNÜŞTÜRME
Bu başlığımızda veri tiplerini birbirine dönüştürme işlemlerini anlatacağım. Örneğin string veri tipinde bir değişkeni number veri tipine dönüştürme ya da number veri tipindeki bir değişkeni string veri tipine dönüştürme işlemlerini yapacağız.
VERİ TİPLERİNİ STRİNG VERİ TİPİNE DÖNÜŞTÜRME
İlk olarak let ile "value" isminde bir değişken oluşturuyorum ve buna "10" değerini tanımlıyorum,
Kod:
let value ();
value = 10;
Ardından bu kod öbeğime aşağıdaki kodu da ekleyerek ekranıma yazdırıyorum,
Kod:
console.log(value);
Totalde aşağıdaki gibi bir kod öbeğim oluşmuş oldu,
Kod:
let value;
value = 10;
console.log(value);
Daha önceki bilgilerimizden faydalanarak "value" isimli değişkenimizin number veri tipinde olduğunu görebiliyoruz. Şimdi bu değişkenimizi string veri tipine dönüştürelim. Bunu "10" olarak tanımladığımız değeri parantez () içine alarak ve başına "String" yazarak gerçekleştirebiliriz. Bunu koda dökecek olursak aşağıdaki gibi bir kod yazmamız gerekir,
Kod:
let value;
value = String(10);
console.log(value);
Yukarıdaki kodu yazdıktan sonra console üzerinde oluşan değer değişmeyecek ancak veri tipimizin değiştiğini göreceğiz. Bunu daha önceden de öğrendiğimiz gibi aşağıdaki kod ile kontrol edebiliriz,
Kod:
console.log(typeof value);
Konsolumuza baktığımızda veri tipinin string veri tipine değişmiş olduğunu gördük,
Boolean veri tipini de yine aşağıdaki gibi string veri tipine dönüştürebilmemiz mümkün,
Kod:
let value;
value = String(true);
Değişkenin veri tipini kontrol etmek için kod öbeğimize aşağıdaki kodu da ekledikten sonra console üzerinde veri tipinin string veri tipi olduğunu göreceğiz,
Kod:
console.log(typeof value);
Aynı şekilde örneğin, "10" değeri ile tanımlanmış number veri tipine sahip value değişkenimizi string veri tipine çevirmek istediğimizde aşağıdaki gibi bir kod yazabiliriz,
Kod:
let value;
value = (10).toString();
Üstteki kodu editörümüze yazıp altına aşağıdaki kodu yazdıktan sonra console kısmına baktığımızda veri tipimizin string veri tipine dönüşmüş olduğunu göreceğiz
Kod:
console.log(value);
VERİ TİPLERİNİ NUMBER VERİ TİPİNE ÇEVİRME
Farklı veri tiplerine ait değerler Number parantezi içerisine alınarak number veri tipine çevrilebilir. Örneğin "value" isimli değişkenimizin "10" string değerine sahip olduğunu varsayalım ve bunu koda dökelim. Kodumuz aşağıdaki gibi olacaktır.
Kod:
let value = ("10");
Biz bu string veri tipine sahip değişkenimizi number veri tipine çevirmek için değerimizi tıpkı string parantezine aldığımız gibi number parantezi içerisine alacağız. yani kodumuz aşağıdaki gibi olacak;
Kod:
let value = Number("10");
Biz bunu console üzerine yazdırdığımızda aşağıdaki gibi number veri tipine sahip olarak görünecek
Null veri tipi için de aynı işlemleri yaptığımızda yine number veri tipine dönüştüğünü göreceğiz. Ancak undefined veri tipinin değeri tanımsız olduğu için number veri tipine çevrilmeye çalışıldığında NaN (Not a Number) şeklinde bir cevap çıkacak ve number veri tipine çeviremeyecektir. Aynı şekilde parantez içerisine "Ahmet", "Ali" gibi textler girdiğimizde ya da array oluşurduğumuzda belli bir sayı değeri olmadığı için console üzerinde NaN şeklinde bir cevap dönecektir.
Number parantezi ile gerek ondalık sayı olsun gerek tam sayı olsun her türlü stringi number veri tipine dönüştürebiliriz. Ayrıca ondalık sayılar için ayrı tam sayılar için ayrı kodlar kullanarak da dönüşüm işlemini gerçekleştirebiliriz. Ondalık sayılar için olanla başlayalım. Burada "value" değişkenini tanımlayan sayımız "1.15" ve veri tipimiz string olsun. Bu değişkenin veri tipini number veri tipine dönüştürmek için aşağıdaki kodu kullanacağız;
Kod:
let value;
value = parseFloat("1.15");
Bu kod ile ondalık sayıları içeren stringimizi number'a çevirmiş olduk. Şimdi tam sayıları içeren stringimizi ona özel kodla number'a çevirelim. Değişken ismimiz yine "value" ve değişkenimizi tanımlayan tam sayımız "1" ve veri tipimiz string olsun. Bu değişkeni number'a çevirmek için aşağıdaki kodu kullanabiliriz,
Kod:
let value;
value = parseInt("1");
Bu kodu console üzerine yazdırdığımızda number veri tipine dönüşmüş olduğunu görebiliriz.
Şimdi veri tipi dönüştürme işlemini otomatik olarak nasıl yapabileceğimize bakalım. Aşağıdaki gibi bir kod girelim. Bu kodda "a" değişkenine 2 değer atadım. javascript bu veri tipinin dönüşüm işlemini otomatik olarak yapacak,
Kod:
const a = "hello" + "10";
Yukarıdaki koduma aşağıdaki kodu ekleyerek veri tipine bakmak istiyorum,
Kod:
console.log(typeof a);
Totalde kod öbeğim aşağıdaki gibi olacak,
Kod:
const a = "hello" + "10";
console.log(typeof a);
Aşağıda da gördüğünüz gibi 2 değer atadım ve javascript bunları birleştirerek string olarak görünmesini sağladı.
ARİTMETİK OPERATÖRLER
Aritmetik operatörler başlığı altında JS üzerinde Toplama, çıkarma, bölme, çarpma operatörlerini işleyeceğiz. Bunun için ilk olarak 2 değişken oluşturuyoruz ardından bu değişkenlere değer atıyoruz.
Kod:
let value;
const value1 = 10;
const value2 = 20;
Yukarıda gördüğünüz üzere 2 farklı değişken oluşturdum. Şimdi bu değişkenlerimizi toplama operatörümüzü kullanarak toplayalım. Bunun için yukarıdaki kodların altına aşağıdaki gibi bir kod yazıyoruz,
Kod:
console.log(value1 + value2);
Üstteki kodu yazıp kaydettikten sonra tarayıcı üzerinde console kısmını kontrol ettiğimizde aşağıdaki gibi "value1" ve "value2" değerlerini topladığını ve sonucu console üzerinde gösterdiğini görüyoruz,
Şimdi değişkenlerimizi ve değerlerini değiştirmeden aynı kodlar üzerinde çıkarma işlemi yapalım. Kodumuz aşağıdaki gibi olacaktır,
Kod:
let value;
const value1 = 10;
const value2 = 20;
console.log(value1 - value2);
Kodu kaydedip konsolu görüntülediğimizde işlemi yaptığını ve sonucu console üzerine yazdırdığını görebiliyoruz,
Değişkenleri ve değerlerini değiştirmeden şimdi de çarpma işlemini yapalım çarpma işlemi için simgemiz "*" budur. Çarpma işlemi kodumuzu yazalım,
Kod:
let value;
const value1 = 10;
const value2 = 20;
console.log(value1 * value2);
Şimdi console kısmına bakalım ve çarpma işlemimizin sonucu ekranda görelim
Yine değişken ve değer değişimi yapmadan bölme işlemini gerçekleştirelim. Bu işlem için "/" operatörünü kullanacağız. Kodumuz aşağıdaki gibidir,
Kod:
let value;
const value1 = 10;
const value2 = 20;
console.log(value1 / value2);
Console kısmına baktığımızda aşağıdaki gibi bölme işleminin gerçekleştiğini ve sonucun ekrana yazdırıldığını görüyoruz;
Şimdi ise iki değişkenin bölümünden kalanı görebilmek için aşağıdaki kodu yazacağız. Burada kullanacağımız operatör "%" operatörü,
Kod:
let value;
const value1 = 10;
const value2 = 20;
console.log(value1 % value2);
Gördüğünüz gibi bölme işleminden kalanı console üzerinde görebildik,
MATH OBJESİ VE METODLARI
İçerisinde birçok matematik fonksiyonu ve özelliği barındıran bir objedir.
Şimdi bu objeyi tanıyalım. Örneğin javascript üzerinde "Pi sayısı" değerine ulaşmak istiyoruz. Bunun için aşağıdaki kodu kod satırımıza girmemiz ve console üzerine yazdırmamız yeterli, (console.log(); kodunu kafa karıştırmaması için bu başlık altında anlatımıma eklemiyorum. Lakin console üzerinde sonuçları görebilmeniz için bu kodu yazdığımız kodların sonuna eklemelisiniz. Bunu zaten önceki başlıklarımızda öğrenmiştik)
Kod:
let value;
value = Math.PI
Şimdi javascript math objesi ile ondalık sayıyı en yakın tam sayıya yuvarlayalım. İlk olarak yuvarlamak istediğimiz sayıyı belirtelim. Ben "3.4" sayısını belirliyorum ve aşağıdaki kodu yazıyorum,
Kod:
let value;
value = Math.round(3.4);
Bu kodu console üzerine yazdırdığımızda aşağıdaki gibi en yakın tam sayıya yani "3"e yuvarlanmış oldu.
Şimdi ise bütün ondalık sayıları bir üstündeki tam sayıya yuvarlayan metoda bakalım. "Math.ceil" metodunu kullanacağız kodumuzu yazarken. Örneğin sayımız yine "3.4" olsun. Bizim bu sayımızın bir üstündeki tam sayı "4" olduğundan javascript sayımızı "4"e yuvarlayacaktır. Kodumuz aşağıdaki gibi,
Kod:
let value;
value = Math.ceil(3.4);
Aşağıda da gördüğünüz üzere sayımız "4"e yuvarlandı
Tam tersi olarak verilen ondalık sayıyı bir altındaki tam sayıya yuvarlayan bir metodumuz da mevcut. Bu operatörümüz "math.floor" metodu. Bu sefer sayımız "3.8" olsun. javascript bunu "3" sayısına dönüştürecektir. Bakalım öyle mi olacak
Kod:
let value;
value = Math.floor(3.8);
Tahmin ettiğimiz gibi sayımız "3" e yuvarlandı.
Bir de karekök alma metodumuz mevcut. Bu metodumuz "Math.sqrt" metodu. Karekökünü alacağımız sayı "36" olsun. Kodumuzu aşağıdaki şekilde yazıyoruz,
Kod:
let value;
value = Math.sqrt(36);
Aşağıda da gördüğünüz gibi "36" sayısının karekökünü alarak bize "6" sayısını verdi.
Şimdi mutlak değer alma metodumuzu kullanalım. Metodumuz "Math.abs" metodu. Mutlak değerini almak istediğimiz sayı ise "-36" olsun. Kodumuzu aşağıdaki gibi yazıyoruz,
Kod:
let value;
value = Math.abs(-36);
Aşağıda gördüğünüz gibi "-36" sayısının mutlak değerini alarak bize "36" sayısını verdi
Şimdi üs alma metodunu kullanalım. Metodumuzun adı "Math.pow" metodu. Üssünü almak istediğimiz sayı ise "10" olsun ve "10" sayısının 4. kuvvetini almak isteyelim. Kodumuzu aşağıdaki gibi yazıyoruz,
Kod:
let value;
value = Math.pow(10,4);
Aşağıda gördüğünüz gibi "10" sayısının 4. kuvvetini aldı ve console üzerine yazdırdı.
Şimdi max metodunu kullanarak belirtilen sayılar arasında en büyük sayıyı console üzerine yazdıracağız. Bunun için "1", "10", "-100" ve "50" sayılarını belirliyorum ve kodumu aşağıdaki gibi yazıyorum,
Kod:
let value;
value = Math.max(1,10,-100,50);
Aşağıda da gördüğünüz gibi bu sayılar içinden en büyük sayımızı bulduk,
Şimdi belirtilen sayılar arasından en küçük sayıyı bulup ekrana yazdıracağız. Bunun için "Math.min" metodunu kullanacağız. Yine "1", "10", "-100" ve "50" sayılarını belirliyorum ve kodumu aşağıdaki gibi yazıyorum,
Kod:
let value;
value = Math.min(1,10,-100,50);
Gördüğünüz gibi en küçük sayımız -100 olarak karşımıza çıktı,
Şimdi 0 ile 1 arasında rastgele sayı üretme metodumuzu kullanalım. Metodumuzun adı "Math.random" Kodumuzu aşağıdaki gibi girdiğimizde sayfayı her yenilediğimizde javascript bize 0 ile 1 arasında rastgele olarak farklı sayılar verecek,
Kod:
let value;
value = Math.random();
Biz 0 ile 50 arasında rastgele bir sayı üretmesini istersek kodumuza "*50" şekline bir ekleme yapıyoruz. Yani kodumuz aşağıdaki gibi oluyor,
Kod:
let value;
value = Math.random() *50;
Diyelim ki 0 ile 50 arasında rastgele tam sayılar üretmek istedik. Bunun için de daha önceden öğrendiğimiz "Math.floor" metodunu "Math.random" metodu ile birleştireceğiz. Kodumuz aşağıdaki gibi olacak,
Kod:
let value;
value = Math.floor(Math.random() *50);
STRİNG METODLARI
Bu başlığımızda javascriptte stringleri biraz daha tanıyacak ve metodlarını öğreneceğiz. İlk olarak stringleri uç uça ekleme metodumuzu görelim. Bunun için iki farklı değişken oluşturalım. Öncesinde "value" isimli değişkenimizi oluşturalım. Bu değişkene değer vermeyeceğiz. Çünkü birazdan oluşturacağımız 2 değişkenin tanımı niteliğinde olacak. Aşağıdaki kodu yazarak value isimli değişkenimizi oluşturuyoruz,
Kod:
let value;
Ardından "value1" ve "value2" adında 2 farklı değişken oluşturuyorum. "value1" değişkenimin değeri "java", "value2" isimli değişkenimin değeri "script" olsun. Bunu aşağıdaki gibi koda döküyorum,
Kod:
const value1 = "Java";
const value2 = "script";
Bu değişkenlerimizi oluşturduk. Şimdi sırada bu iki değişkenin değerini yani stringi uç uça ekleme işlemi var. Bunun için değişkenlerimizi daha önce oluşturduğumuz "value" değişkenine tanımlayıp "value1" ve "value2" değişkenlerinin değerleri arasına "+" operatörünü koyalım. Yani kodumuz aşağıdaki gibi olacak,
Kod:
value = value1 + value2;
Bu kodu da yazdıktan sonra şimdi yazdığımız kodları console üzerinde görüntüleyelim. Önceki başlıklarımızda da yaptığımız gibi kodlarımızın altına aşağıdaki kodu ekliyoruz,
Kod:
console.log(value);
Yani toplamda kodlarımız aşağıdaki gibi olacak,
Kod:
let value;
const value1 = "Java";
const value2 = "script";
value = value1 + value2;
console.log(value);
Sonuçta console'daki görüntü aşağıdaki gibi görünecek;
Stringleri uç uça eklerken arada boşluk olmasını istiyorsak bu sefer de "value" değişkenine tanımladığımız kod öbeğini aşağıdaki gibi değiştireceğiz.
Kod:
value = value1 + " " + value2;
Bu sayede javascript boşluk bıraktığımız kısmın değer olduğunu varsayacak ve iki değişken arasına boşluk koymuş olacak. Totalde kodlarımız aşağıdaki gibidir,
Kod:
let value;
const value1 = "Java";
const value2 = "script";
value = value1 + " " + value2;
console.log(value);
Aşağıda da gördüğünüz üzere araya boşluk bıraktı.
Şimdi değer atanan ve "value" ile eşitlenen değişkenlerimize ekleme yapmak istediğimizi varsayalım. Yani konsolda "javascript" yazmasını değil "javascriptders" yazmasını isteyelim. Bunun için yeni bir değişken oluşturmamıza gerek yok. değişkenlerimizin sonuna "+ "ders"" eklediğimiz zaman konsolda karşımıza "Javascriptders" olarak çıkacak. Zaten "value" değişkenimizi "value1 + value2" şeklinde tanımlamıştık. Bu yüzden bu iki değişkeni tekrar yazmadan aşağıdaki gibi bir kod yazabiliriz,
Kod:
value = value + "ders";
Buna alternatif olarak aşağıdaki kod kullanılabilir.
Kod:
value += "ders";
Yukarıdaki kodu diğer kodlarımız arasına eklediğimizde toplamda aşağıdaki gibi bir kod öbeğine sahip olacağız,
Kod:
let value;
const value1 = "Java";
const value2 = "script";
value = value1 + value2;
value = value + "ders";
console.log(value);
kodları kaydedip console üzerine baktığımızda aşağıdaki gibi göründüğünü görmüş olacağız,
Şimdi string içerisindeki karakter sayısını bulmayı görelim. Bunun için kullanacağımız metodu "degiskenadi.length;" (degiskenadi yazan yere değişkenimizin adını yazıyoruz) Örnek kullanımı aşağıdaki gibi olacak,
Kod:
value = value1.length;
Toplamda aşağıdaki kod öbeğine sahip olacağız,
Kod:
let value;
const value1 = "Java";
const value2 = "script";
value = value1.length;
console.log(value);
Gördüğünüz gibi value1 değişkenine ait string değerinin karakter sayısını bize gösterdi,
Şimdi varolan değişkenimize uç uça string ekleme metodumuza bakalım. Kullanacağımız metod "degiskenadi.concat()". Burada parantez içerisine virgülle ayrımak kaydıyla istediğimiz kadar string girebiliriz. Örneğin "value1" stringini ilk olarak "value2" stringiyle ardından değişkene tanımlanmamış "ders" stringiyle birleştirelim. Kodumuz aşağıdaki gibi olmalı,
Kod:
value = value1.concat(value2,"ders");
Toplamda aşağıdaki kod öbeğine sahip olacağız,
Kod:
let value;
const value1 = "Java";
const value2 = "script";
value = value1.concat(value2,"ders");
console.log(value);
Şimdi var olan stringimizdeki bütün karakterlerin küçük harfle yazılması için "degiskenadi.toLowerCase()" metodunu kullanacağız. Örnek kullanımı aşağıdaki gibidir,
Kod:
value = value1.toLowerCase();
Sahip olduğumuz toplam kod öbeği aşağıdaki gibi olacak,
Kod:
let value;
const value1 = "Java";
value = value1.toLowerCase();
console.log(value);
String içerisindeki bütün harfleri büyük yazmak istediğimizde "degiskenadi.toUpperCase()" metodunu kullanıyoruz. Örnek kullanımı aşağıdaki gibidir,
Kod:
value = value1.toUpperCase();
Toplam kod öbeğimiz aşağıdaki gibi olacak,
Kod:
let value;
const value1 = "Java";
value = value1.toUpperCase();
console.log(value);
Şimdi string içerisinde indexlerden bahsedelim. Javascriptte stringlerde bulunan her bir karakter bir index'e karşılık gelir ve bu indexler sırasıyla 0'dan balayarak 0,1,2,3,4... şeklinde isimlendirilirler. Biz javascript üzerinde herhangi bir indexi çağırdığımızda o index hangi karaktere karşılık geliyorsa ekrana o karakter yazdırılır. Örneğin "java" stringimizde 0. index "J" karakteridir. Aynı şekilde 1. index "a" karakteri, 2. index "v" karakteridir gibi. Şimdi bu metodumuzu gösterelim. daha önceden oluşturduğumuz "value1" değişkeninin 3. indexini çağırmak isteyelim. Bunun için aşağıdaki kodu yazıyoruz,
Kod:
let value;
value1 = "java";
value = value1[3];
console.log(value);
Kodumuzu kaydettikten sonra konsola bakalım. Gördüğünüz gibi Java kelimesinin 3. indexini yani "a" karakterini ekranımıza yazdırdı,
Aynı şekilde bu metod yerine ".charAt()" metodunu da kullanabiliriz. Burada parantez içerisine indexi yazarak konsolda hangi karaktere karşılık geldiği görülebilir. Bu metodun koda dökümü şu şekildedir.
Kod:
value = value1.charAt(1);
Toplamda kod öbeği aşağıdaki şekilde olmalıdır.
Kod:
let value;
value1 = "java";
value = value1.charAt(1);
console.log(value);
Şimdi stringin boyutunu bilmediğimiz durumlarda hangi index olduğunu da bilemeyeceğimiz için bu seferde uzunluk metodunu kullanacağız. Bunun için stringde istediğimiz karakterin sondan kaçıncı karakter olduğunu belirteceğiz. Örneğin "Java" stringinin sondan 2. karakterini görmek isteyelim. Bunun için aşağıdaki kodu yazıyoruz,
Kod:
value = value1[value1.length -2];
Toplamda kod öbeğimiz şu şekilde olacak,
Kod:
let value;
value1 = "java";
value = value1[value1.length -2];
console.log(value);
Aşağıda da gördüğünüz gibi stringimizin sondan 2. karakteri ekranımıza yazdırıldı
Şimdi istediğimiz karakterin kaçıncı indexte olduğunu gösteren indexof metodunu kullanalım. "Java" stringimizin "v" karakterinin kaçıncı indexte olduğunu görmek istediğimizi varsayalım. Bunun için aşağıdaki kodu yazıyoruz,
Kod:
value = value1.indexOf("v");
Toplamda kod öbeğimiz aşağıdaki gibi olmalıdır,
Kod:
let value;
value1 = "java";
value = value1.indexOf("v");
console.log(value);
Aşağıda da gördüğünüz gibi "v" karakterinin kaçıncı indexte olduğunu gösterdi.
Şimdi split metodunu işleyelim. Virgüllerle ayrılmış elemanları tek tek almak istediğimizde split metodunu kullanıyoruz. Örneğin "dil" isimli değişkenimize "ingilizce","almanca","fransızca" olmak üzere 3 eleman ekledik ve bunları aşağıdaki gibi virgüllerle ayırdık,
Kod:
let value;
const dil = "ingilizce,almanca,fransızca";
Virgüllerle ayrılmış bu elemanları konsol üzerinde ayırmak istediğimizde kodumuzu aşağıdaki gibi yazıyoruz. Burada kodun sonuna "," ekleyerek elemanların hangi karaktere göre ayrılacağını belirtiyoruz. Yukarıdaki kodda elemanları virgül ile ayırdığımız için burada "," işaretini kullanıyoruz,
Kod:
value = dil.split(",");
Toplam kod öbeğimiz aşağıdaki gibi olmalıdır,
Kod:
let value;
const dil = "ingilizce,almanca,fransızca";
value = dil.split(",");
console.log(value);
Konsolu görüntülediğimizde elemanlarımızın aşağıdaki gibi arraylere ayrıldığını görüyoruz,
Şimdi yukarıda verdiğimiz "dil" değişkeni elemanlarından "almanca" elemanının yerine "Turkce" koymak istediğimizi varsayalım. Bunun için replace metodunu kullanacağız. Öncelikle "dil" isimli değişkenimizin değerlerine tekrar bakalım,
Kod:
let value;
const dil = "ingilizce,almanca,fransızca";
Burada "almanca" yerine "Turkce" yazmak istediğimizde aşağıdaki gibi bir kod yazıyoruz,
Kod:
value = dil.replace("almanca","Turkce");
Toplamda kodlarımız aşağıdaki gibi olmalı,
Kod:
let value;
const dil = "ingilizce,almanca,fransızca";
value = dil.split(",");
value = dil.replace("almanca","Turkce");
console.log(value);
Konsolumuzu görüntülediğimizde istediğimiz gibi olduğunu göreceğiz
Şimdi stringimiz içerisinde istediğimiz elemanın varlığını kontrol edelim.Bunun için includes metodunu kullanacağız. Örneğin ben "dil" değişkenimin içerisinde "fransızca" elemanının varlığını kontrol etmek istiyorum. Eğer stringimizin içerisinde böyle bir eleman varsa konsol üzerinde "true" yazdığını, yoksa "false" yazdığını göreceğiz. Kodumuzu aşağıdaki şekilde yazıyoruz,
Kod:
value = dil.includes("fransızca");
Toplamda kodlarımız şu şekilde olmalı,
Kod:
let value;
const dil = "ingilizce,almanca,fransızca";
value = dil.split(",");
value = dil.includes("fransızca");
console.log(value);
Konsolumuzu görüntülediğimizde stringimizin içerisinde "fransızca" elemanı olduğu için "true" şeklinde bir dönüt aldık.
TEMPLATE LİTERAL ÖZELLİĞİ
Bu özellik stringleri kolay bir şekilde biçimlendirmemizi sağlıyor. Şimdi bu özelliği kullanarak stringlerimizi oluşturalım. 3 adet değişken oluşturup değerlerini tanımlayacağız. Ben const ile aşağıdaki gibi 3 farklı değişken ve değer oluşturdum,
Kod:
const name = "black";
const department = "bilgi";
const salary = 4000;
Şimdi bu değerlerimizi bir stringde birleştirmek istediğimizi varsayalım. Bunu normal şartlar altında aşağıdaki gibi yapacaktık,
Kod:
const a = "İsim: " + name + "\n" + "Departman: " + department + "\n" + "Maaş: " + salary;
Bu kodu konsolumuza yazdırdığımızda aşağıdaki gibi görünecek,
Biz bu kodları yazarak yukarıdaki gibi bir görüntü elde edebildik. Ancak bu kadar uğraşmadan daha kolay bir şekilde yine aynı görüntüyü elde edebiliriz. Burada "template literal" özelliği devreye girecek. Daha önceden oluşturduğumuz aşağıdaki değişkenleri yine editörümüze yazıyoruz,
Kod:
const name = "black";
const department = "bilgi";
const salary = 4000;
Birazdan yazacağımız kodlarda " `` " işaretini kullanacağız. Bu işareti oluşturmak için " Alt Gr + noktalı virgül ( ; ) " kombinasyonunu kullanabilirsiniz. Şimdi ilk olarak name değişkenimizden başlayalım. Bu özelliği kullanırken değişkenimizi " ${} " içerisine alarak yazıyoruz. Yani name değişkeninden hareketle ismimizi tanımlayacağımız için kodumuzu şu şekilde yazmamız gerekiyor; " `İsim:${name}\n` " Buradaki " \n " bir sonraki tanımı yeni satıra yazmayı sağlayacak. Biz bu kodumuzu rastgele oluşturduğumuz "a" değişkenine tanımlarsak aşağıdaki gibi bir kod oluşacak,
Kod:
const a = `İsim:${name}\n`;
Aynı şekilde "department" ve "salary" değişkenlerini de bu özellikle yazıp uç uça eklediğimizde "a" değişkenine tanımlanan kodlarımız aşağıdaki gibi olacak,
Kod:
const a = `İsim:${name}\nDepartman:${department}\nMaaş:${salary}\n`;
Bu sayede yukarıdaki uzun kodu kısaltarak vakitten tasarruf edebildik.
ARRAYLERİN ÖZELLİKLERİ
Bu başlığımızda önceki başlıklarımızda da bahsettiğimiz Arrayleri ayrıntılı olarak inceleyecek ve özelliklerine göz atacağız. Bu başlık altında değindiğim metodlar en sık kullanılan metodlardır. Diğer tüm metodlara internet üzerinden erişim sağlayabilirsiniz. Ben örnek olması açısından en sık kullanılan metodlardan bahsedeceğim. İlk olarak arrayleri nasıl oluşturabildiğimize bir bakalım. "1,2,3,4,5,6" rakamlarından oluşan arrayimi aşağıdaki gibi yazabilirim,
Kod:
let value;
const numbers = [1,2,3,4,5,6];
Aynı zamanda bir arrayi bu şekilde oluşturabildiğimiz gibi aşağıdaki gibi new Array metoduyla da oluşturabilmemiz mümkün,
Kod:
let value;
const numbers = new Array(1,2,3,4,5,6);
Şimdi "numbers" değişkenimizin uzunluğunu "degiskenadi.length" metodu ile görelim. Bu metodu kullandığımızda "numbers" değişkenine ait arrayin kaç elemanlı olduğunu görebiliriz. Kodumuzu aşağıdaki gibi yazıyoruz,
Kod:
let value;
const numbers = [1,2,3,4,5,6];
value = numbers.length;
Bu kodu "console.log(value);" kodu ile konsola yazdırdığımızda arrayimizin 6 elemanlı olduğunu görebiliyoruz.
Aynı zamanda stringlerde olduğu gibi arraylerde de elemanımızın kaçıncı indexde olduğunu ya da kaçıncı indexte hangi elemanımızın olduğunu görebilme imkanımız var. Şimdi değişkenimizi ve arrayimizi değiştirmeden 0. indexte hangi elemanımızın olduğuna bakalım aşağıdaki kodu yazıyoruz
Kod:
value = numbers[0];
Kodumuzu konsola yazdırdığımızda konsol üzerinde "1" elemanımızı görebiliyoruz.
Şimdi herhangi bir indexteki değeri değiştirmeye çalışalım. "numbers" değişkenimizde "4" elemanının yerine "10" yazmak istediğimiz düşünelim. Baktığımızda "4" elemanının 3. indexte olduğunu görüyoruz. Bu nedenle kodumuzu aşağıdaki gibi yazdığımızda "4" elemanının yerine "10" yazılmış olacaktır,
Kod:
numbers[3] = 10;
Şimdi istediğimiz elemanın kaçıncı indexte olduğunu "indexOf" metoduyla görelim. Ben "6" elemanımın kaçıncı indexte olduğunu bilmek istiyorum. Bu nedenle kodumu aşağıdaki gibi yazıyorum ve "6" elemanının kaçıncı indexte olduğunu konsolda görebiliyorum,
Kod:
value = numbers.indexOf(6);
Şimdi Arrayimizin sonuna "push" metodu ile eleman ekleyelim. Ben arrayime "7" elemanını eklemek istiyorum. Bu nedenle aşağıdaki kodu yazıyorum,
Kod:
numbers.push(7);
Bu şekilde arrayimin sonuna "7" elemanını eklemiş oldum. Şimdi arrayimizin başına eleman ekleyelim. Bunun için "unshift" metodunu kullanacağız. Ben arrayimin başına "0" elemanını eklemek istiyorum. Bunun için aşağıdaki kodu yazabilirim,
Kod:
numbers.unshift(0);
Şimdi arrayimizn sonundan değer çıkartalım. Bunun için "pop" metodunu kullanacağız. Aşağıdaki kodu yazdığımızda arrayimizin en sonundaki kod çıkartılmış olacak,
Kod:
numbers.pop()
Aynı zamanda arrayimizin başından "shift" metoduyla eleman çıkartabiliriz. Bunun için aşağıdaki kodu yazıyoruz,
Kod:
numbers.shift()
Şimdi belirli indexler arasındaki elemanları çıkartmaya çalışalım. Bunu gerçekleştirebilmek için "splice" metodunu kullanacağız. ben 0. indexten 4. indexe kadar bütün elemanları çıkartmak istiyorum. bu nedenle aşağıdaki kodu yazarak bu isteğimi gerçekleştirebilirim,
Kod:
numbers.splice(0,4);
Şimdi arrayimizdeki elemanları ters çevirelim. Bunun için "reverse" metodunu kullanacağız. Aşağıdaki kodu yazdığımızda elemanlarımızın sıraı tersine çevrilecektir,
Kod:
numbers.reverse();
Şimdi elemanlarımızı ilk karakterlerine göre küçükten büyüğe sıralayalım. Bunun için "sort" metodunu kullancağız. Aşağıdaki kodu girdiğimiz zaman javascript elemanalarımızı yalnızca ilk rakamına bakarak küçükten büyüğe doğru sıralayacak,
Kod:
value = numbers.sort();
OBJE OLUŞTURMA
Bu başlığımızda javascript üzerinde obje oluşturacak ve bu objelerin özelliklerini ve işlevlerini tanımlayacağız. İlk olarak bir örnekle başlamak istiyorum. Bir programmer objesi oluşturacağım ve bu programmer'ın yani objemin özelliklerini belirleyeceğim. Aşağıdaki gibi bir kod yazıyorum. Gördüğünüz gibi kodu yazarken süslü parantez " {} " kullandık. Bu süslü parantezimin içerisine birazdan objemizin özelliklerini gireceğiz.
Kod:
const programmer {};
Şablonumuzu oluşturduk şimdi objemize özellik atayalım. Ben bu objemin yani programmer'ımın ismini, yaşını, mail adresini özellik olarak belirteceğim. Aşağıdaki gibi özellikleri süslü parantezin içerisine yazararak ve her özelliğin sonuna virgül (,) ekleyerek objemi tanımlıyorum,
Kod:
const programmer = {
name : "Black",
Age : 30,
Mail : "[email protected]",
};
Aynı zamanda aşağıdaki gibi iç içe obje de kullanabiliriz. Mesela "Adres" adında bir obje oluşturup bu objemi "programmer" objemle iç içe yazabilirim. Aşağıdaki gibi bir kod yazabiliriz.
Kod:
const programmer = {
Name : "black",
Age : 30,
mail : "[email protected]",
address : {
city : "antalya",
street : "Atatürk",
},
}
Şimdi konsol üzerinde bu objemizi ve özelliklerini görüntüleyelim. Ben aşağıdaki kodu üstteki kodalrın sonuna ekleyerek yazdığım kodların konsolda görüntülenmesini sağlıyorum,
Kod:
console.log(programmer);
Şimdi objemizi arraylerden oluşturalım. Bu sefer objemizin adı "programmer2" olsun. Bu sefer en dışta köşeli parantez kullanacağız. Objemize özellik verirken yine süslü parantezimizi kullanacağız. Arrayimi aşağıdaki gibi oluşturuyorum,
Kod:
const programmer2 = [
{name : "Black", Age : 30},
]
Bu kodu konsola yazdırdığımızda konsolumuzda aşağıdaki gibi bir görüntü oluştuğunu görüyoruz,
ZAMAN OBJESİ VE METODLARI
Bu başlığımızda zaman objesi oluşturacak ve metodları ele alacağız. Başlangıç olarak şu anki zamanı görüntüleyeceğimiz kodumuzu yazalım,
Kod:
const date = new Date();
bu kodu yazdıktan sonra konsola yazdırdığımızda aşağıdaki gibi şu anki zamanı bize verecek,
Şimdi doğum tarihimizi javascript zaman objesi ile yazmaya çalışalım. Ben Mustafa Kemal Atatürk'ün doğum tarihini ay/gün/yıl şeklinde yazdıracağım. Objeme "birthday" adını veriyorum ve aşağıdaki kodu yazıyorum,
Kod:
const birthday = new Date(5/19/1881);
Bu kodu " console.log(birthday); " kodu ile konsolumuza yazdırdığımızda aşağıda gördüğünüz gibi Atatürk'ün doğum tarihini görebildik.
Şimdi "birthday" objemizin üzerinde çeşitli metodları deneyelim. İlk olarak "birthday" metodu üzerinde belirttiğimiz ayın yılın hangi ayı olduğunu "getMonth" metodu ile görelim. Aaşğıkdai kodu "birthday" objemize ait kodların altına yazıyoruz.
Kod:
value = birthday;
value = birthday.getMonth();
kodumuzu konsol üzerine yansıttığımızda Mayıs ayı yılın 5. ayı olduğu halde aşağıdaki gibi "4" sonucu elde ettik. Bunun sebebi javascriptin saymaya "0" sayısından başlamasıdır. Bu durumda Ocak 0. ay olacak dolayısıyla mayıs ayı da 4. ay olmuş olacak.
Şimdi getDate metodunu kullanarak "birthday" objesinde günün ayın hangi günü olduğunu tespit edeceğiz. Kodumuzu aşağıdaki gibi yazıyoruz,
Kod:
value = birthday.getDate();
getDay metodunu kullanarak günümüzün haftanın kaçıncı günü olduğunu öğreneceğiz. Yine saymaya 0 saysıından başlanacak yani pazartesi haftanın 0. günü olmuş olacak. Aşağıdaki kodu yazıyoruz,
Kod:
value = birthday.getDay();
getHours metodu ile objemizin saat bilgisini elde edeceğiz. Kodumuz aşağıdaki gibi olacak,
Kod:
value = birthday.getHours();
getMinutes metodu ile objemizin dakika bilgisini elde edeceğiz. Kodumuz aşağıdaki gibidir,
Kod:
value = birthday.getMinutes();
getSeconds metodu ile objemize ait saniye bilgisini görebileceğiz. Kodumuzu aşağıdaki gibi yazıyoruz,
Kod:
value = birthday.getSeconds();
Şimdi objemizde tanımladığımız zaman bilgilerini değiştirmeyi görelim. İlk olarak ay bilgisini değiştirelim. Ben yukarıda tanımladığım ay bilgisini Ağustos ayıyla değiştirmek istiyorum. Ağustos ayı yılın 8. ayı olmasına rağmen javascriptte 7. ay olacağı için kodumuzu aşağıdaki gibi yazıyoruz,
Kod:
value = birthday.setMonth(7);
Aynı zamanda aşağıdaki kodla gün bilgisini değiştirebiliriz. Ben ayın 10. günü olmasını istiyorum. Aşağıdaki kodu giriyoruz,
Kod:
value = birthday.setDate(10);
Şimdi doğum yılını değiştirelim ben doğum yılını 2020 olarak tekrar ayarlamak istediğimde aşağıdaki kodu yazıyorum,
Kod:
value = birthday.setFullYear(2020);
Saat bilgisini değiştirmek için aşağıdaki gibi bir kod yazıyoruz. Ben saat bilgisinin 4 ile değiştirilmesini istiyorum,
Kod:
value = birthday.setHours(4);
Dakika bilgisini değiştirmek için aşağıdaki kodu yazıyoruz. Ben dakika bilgisinin "0" ile değiştirilmesini istiyorum,
Kod:
value = birthday.setMinutes(0);
Aynı şekilde saniye bilgisini değiştirmek için aşağıdaki metodu kullanıyoruz. ben saniye bilgisini "0" ile değiştirmek istiyorum
Kod:
value = birthday.setSeconds(0);
Son düzenleme: