Sıfırdan İleriye Javascript #8 4-7 Konularının Örnekleri

DarkS0LDIER

Deneyimli Moderatör
5 Ara 2019
1,795
434
Sydney
Yeni bir sıfırdan Javascript konusuna hoş geldiniz. Bu konuda öğrendiğimiz son 3 konuyu örneklerle tekrar edeceğiz. Direkt kodlara bakmadan önce kendiniz yapmaya çalışın. Yapamıyorsanız bakarak yapın daha sonra tekrar deneyin. Böyle böyle geliştiğinizin farkına varacaksınız. İyi okumalar

cxun73h.png


1) Ülkeler dizisinde Türkiyeyi arayın. Eğer Türkiye varsa tüm ülke adlarını büyük harf yazdırın eğer yoksa diziye Türkiyeyi ekleyip büyük harf yapın ve elemanların ilk üç harfini alarak konsola yazdırın

İlk önce dizileri tanımlayalım
JavaScript:
const countries = [
  'Albania',
  'Bolivia',
  'Canada',
  'Denmark',
  'Ethiopia',
  'Finland',
  'Germany',
  'Hungary',
  'Ireland',
  'Japan',
  'Kenya'
]

Görüldüğü üzere Türkiye yok. Bunu biz biliyoruz peki bilgisayar biliyor mu ?
Hayır. Şimdi bilgisayarın bu dizide Türkiye olup olmadığını kontrol edelim


JavaScript:
if(countries.includes("turkiye"))
  {
    for(let i = 0; i<countries.length;i++)
      {
        
        console.log(countries.toString().toUpperCase())
      }
  }

Burada dizilerde Türkiyenin olup olmadığını eğer varsa konsola direkt countries dizisini string yapıp büyük harflerle yazdırmasını istiyoruz ama bu koşul geçersiz olacaktır. Çünkü Türkiye yok.
JavaScript:
else {
    countries.push("Turkiye")
   for(let i = 0; i<countries.length;i++)
    {
      console.log( countries[i].slice(0,3).toString().toUpperCase())
    }
  }

Bu önermede dizide Türkiyenin yokluğu varsayılır ve eğer öylesyse önce countries dizisine Türkiyeyi ekle daha sonra countries dizisinin uzunluğu kadar dönecek bir for döngüsü yaptırırız ki her elemanı büyük ve ilk 3 harfini alalım. Döngü içinde konsola ülkelerin her elemanının ilk 3 harfini al, stringe çevir ve büyük harf yap diyerek sorumuzu bitiririz
JavaScript:
const countries = [
  'Albania',
  'Bolivia',
  'Canada',
  'Denmark',
  'Ethiopia',
  'Finland',
  'Germany',
  'Hungary',
  'Ireland',
  'Japan',
  'Kenya'
]


if(countries.includes("turkiye"))
  {
    for(let i = 0; i<countries.length;i++)
      {
        
        console.log(countries.toString().toUpperCase())
      }
  }
  else {
    countries.push("Turkiye")
   for(let i = 0; i<countries.length;i++)
    {
      console.log( countries[i].slice(0,3).toString().toUpperCase())
    }
  }

WMpWWT.png


WMpDVo.png


cxun73h.png



2) Frontend ile backend dizisini tek bir dizide toplayıp konsola yazdırın

JavaScript:
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
const backEnd = ['Node','Express', 'MongoDB']


const full = []


full.push(frontEnd.toString(),backEnd.toString())
console.log(full)

WMpj4K.png


WMpH03.png




Öncelikle frontend ve backend dizilerini tanımlıyoruz. Daha sonra full adlı boş bir dizi tanımladık. Full adlı boş diziye frontend ve backend dizilerini string yapıp push metodu ile full'e aktardık

cxun73h.png



3) 1-10'a kadar basit bir çarpım tablosunu konsola yazdırın
JavaScript:
for(let i  = 0; i<=10; i++)
  {
    let carpim = i
    for(let j = 0; j<=i;j++)
      {
        let carpan = j;
        let sonuc = carpim*carpan
        console.log(`${carpim} x ${carpan} =  ${sonuc}`)
      }
  }

WMpdJq.png


WMp3YH.png


WMpgVc.png


İlk döngümüz carpim değerini tanımlarken ikinci döngümüzde çarpan değerini taşıyor ve ikinci döngüde iki değer birbirleriyle çarpılıp konsola yazılıyor

cxun73h.png


4) RandomId adlı bir fonksiyon tanımlayınız. Bu fonksiyon kullanıcıdan iki değer alsın. 1.değer kullanıcıdan kaç tane random id istediğini, 2.değer ise kullanıcının kaç haneli bir şifre istediğini alsın. Bu alınan değerler doğrultusunda kullanıcının istediği sayıda ve karakterde randomId üretilip konsola yazılsın.

Yazmaya başlamadan önce Javascript öğrenirken bu soruya çok kafa patlatmıştım. Defalarca baka baka yapmışlığım var. Bu soru çok kaliteli bir soru önce siz yapmaya çalışın yapamazsanız bakarak yapın. Kaliteli soru ve yeni başlayan biri elbet bir yerde takılacak çok normal. Şimdi koda geçelim.

Tane tane başlayalım o halde önce basit bir şekilde kullanıcıdan değerlerimizi alalı ve fonksiyonumuzu tanımlayalım
JavaScript:
function randomID()
{
let kullaniciSifreAl = parseInt((prompt("Kaç tane şifre istiyorsunuz ? ")))
let kullaniciSifreUzunluk = parseInt((prompt("Şifre uzunluğu ne kadar olsun ?")))
}

Değerlerimizi aldık bu değerlerle bir döngü yapmamız lazım. Çünkü istediği şifre kadar üretmemiz lazım.
JavaScript:
for(let i = 0; i<kullaniciSifreAl;i++)
  {
    let sifreEleman = "asdfghjklqwertyuopzxmcnbv1234567890"
    let randomID = ""
}

Burada i eğer istenen şifreden küçükse her işlem sonunda tekrarla diyoruz. Böylece kişi 5 tane şifre isterse 5 tane şifre üretecek. Döngünün içinde sifreEleman değeri var. Bu değişkenler bizim şifrelerimizin harfleridir. Bunları az sonra karıştırıp random id üreteceğiz.
En sonda ise boş bir string değerli değişkenimiz var. Bu üretilen random id değerimizi bu değişkene tanımlayıp konsola yazdıracağız.
JavaScript:
for(let j = 0; j<kullaniciSifreUzunluk; j++)
      {
        let random = Math.floor(Math.random()*sifreEleman.length)
        randomID+=sifreEleman[random]
        
      }

Bir for döngüsü daha açarak bu sefer aldığımız şifre uzunluğunu boyunca çalışmasını istiyoruz. Böylece aşağıda yapacağımız işlemlerimiz tüm şifreEleman değerlerini kapsayacaktır.

random değişkendi math.floor ile değerlerin float olmasını engelledikten sonra math.random*sifreEleman.length değerinde sifreEleman değerlerinin uzunluğunu math.random değeriyle çarp (bir nevi karıştır ) random değişkenine ata diyoruz. Böylece bu işlemde sifreEleman değerleri hepsi karışıp şifre uzunluğu kadar eleman alıp id oluşturacaktır.

En sonda ise randomId değerini boş string olarak tanımlamıştık bu değeri sifreEleman değerinin random indexi kadar yani sifreEleman değerindeki harfleri karıştırılanlar kadar alıp random değerine ekliyoruz. Artık random bir id değerimiz mevcut olmuş olacak.

Tabi bu işlem kullanıcının girdiği değer kadar tekrarlanacağını hatırlamamız gerek.

En sonda ise ikinci for döngüsünün dışına console.log yazarak oluşturulan random id'leri consola yazdırıp fonksiyonu çağırma işlemini gerçekleştiriyoruz.
JavaScript:
function randomID()
{
let kullaniciSifreAl = parseInt((prompt("Kaç tane şifre istiyorsunuz ? ")))
let kullaniciSifreUzunluk = parseInt((prompt("Şifre uzunluğu ne kadar olsun ?")))


for(let i = 0; i<kullaniciSifreAl;i++)
  {
    let sifreEleman = "asdfghjklqwertyuopzxmcnbv1234567890"
    let randomID = ""
    
      for(let j = 0; j<kullaniciSifreUzunluk; j++)
        {
          let random = Math.floor(Math.random()*sifreEleman.length)
          randomID+=sifreEleman[random]
          
        }
      console.log(randomID)
  
  }
}


randomID()

WMpyLb.png


WMpbcy.png


WMpR68.png


WMp77k.png


cxun73h.png


5) Herhangi bir sayıda hexa veya rgb rengi üretebilen renkler fonksiyonunu yazın .

Aslında bu örnekte 4. örneğe biraz benziyor. Haydi başlayalım.
JavaScript:
function renkler(tur, sayi) {
  if (tur === 'rgb') {
    for (let i = 0; i < sayi; i++) {
      let renk1 = Math.floor(Math.random() * 256);
      let renk2 = Math.floor(Math.random() * 256);
      let renk3 = Math.floor(Math.random() * 256);


      let rgb = `rgb(${renk1}, ${renk2}, ${renk3})`;
      console.log(rgb);
    }

ilk olarak renkler diye fonksiyon tanımlayıp bu fonksiyona iki adet parametrelere ekliyoruz. Bu parametreler fonksiyonu çalıştırırken işimize yarayacak.

Bir alt satırda eğer tur parametresi rgb olarak girilirse bu kod bloğu altında çalışacak olan kodlar var.

İlk olarak sayi parametresi kadar renk kodu üreteceğimizi bildiğimiz için i, sayi değerinden küçük olduğu sürece +1 yap diyoruz.

Sırayla rgb renk değerlerini 0 ile 255 arasında random olacak şekilde değişkenlere tanımlıyoruz.

Bu tanımlanan değerleri son olarak rgb değerinde rgb değeri formatında yazdırıp konsola yazdırıyoruz. Böyle fonksiyonumuzun %50'si bitti bile.
JavaScript:
else if (tur === 'hexa') {
    for (let i = 0; i < sayi; i++) {
      let hex = "1234567890ABCDEF";
      let resultHex = "";


      for (let j = 0; j < 6; j++) {
        let hexRandom = Math.floor(Math.random() * hex.length);
        resultHex += hex[hexRandom];
      }


      let hexa = `#${resultHex}`;
      console.log(hexa);
    }
  }
}

Eğer fonksiyona yazılan değer rgb değilse buradaki kodlara ancak hexa değeri girildiği taktirde çalışacaktır.

Tekrar oluşturulacak renk kodu kadar döngü kullanıyoruz.

hexa 16'lık sayı birimidir. 0-9 ve A-F aralığında olduğu için tüm hexa değerlerini hex değişkinine string olarak tanımlıyoruz.

resultHex ile boş string tanımlayarak oluşacak random hexa değerini buraya aktaracağız.

Döngü içinde bir döngü daha oluşturarak hexanın kaç haneden oluşacağına karar veriyoruz. Hexa kodları 6 haneden oluştuğu için bizde döngümüzü 6'ya kadar tanımlıyoruz.

İkinci döngünün içine random hexa değerlerini alabilmek için math.floor ile float değerleri tam değer yapıp hex değişkenin uzunluğunu random olarak çarpıyoruz. Bunun sonunda hexRandom değerine 1 hanelik random gelecektir. Bu 6 kez tekrar edeceği için 6 hanelik random harf hayırlı olsun değişkenimize.

İlk döngüde oluşturduğumuz boş string değerini hex'in random değerlerini aktarıyoruz. Artık hexa değerimiz hazır durumda.

hexa değişkeni ile aldığımız resultHex değerini artık hexa formatına çeviriyoruz ve konsola yazdırıyoruz.

Temel olarak artık işlemimiz bitti sadece geriye fonksiyonu çağırıp gerekli parametreleri yazmak kaldı.
JavaScript:
function renkler(tur, sayi) {
  if (tur === 'rgb') {
    for (let i = 0; i < sayi; i++) {
      let renk1 = Math.floor(Math.random() * 256);
      let renk2 = Math.floor(Math.random() * 256);
      let renk3 = Math.floor(Math.random() * 256);


      let rgb = `rgb(${renk1}, ${renk2}, ${renk3})`;
      console.log(rgb);
    }
  }
  else if (tur === 'hexa') {
    for (let i = 0; i < sayi; i++) {
      let hex = "1234567890ABCDEF";
      let resultHex = "";


      for (let j = 0; j < 6; j++) {
        let hexRandom = Math.floor(Math.random() * hex.length);
        resultHex += hex[hexRandom];
      }


      let hexa = `#${resultHex}`;
      console.log(hexa);
    }
  }
}


renkler('hexa', 3);
renkler('rgb', 3);


WMphbT.png


WMpL3W.png


cxun73h.png
 
Ü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.