Yeni bir sıfırdan ileriye Javascript konusuna hoş geldiniz. Bugün işlenen son 3 konu hakkında örnekler yapacağız. Direkt soruların çözümüne geçmeden önce kendiniz uğraşırsanız daha faydalı olacaktır. İyi okumalar.
1) Aşağıdaki kullanıcı koleksiyonunu bir MongoDB veritabanından aldığınızı düşünün. Kullanıcının sisteme giriş yapması için hesap oluşturma ve koleksiyona ekleme yapmasına izin veren sistem geliştirin.
İlk bakışta karmaşık gelse bile teker teker yapboz parçası gibi ilerleyip puzzeli bitirelim. Önce elimizdeki verilere bakalım.
JavaScript:
const users = [
{
_id: 'ab12ex',
username: 'Alex',
email: '[email protected]',
password: '123123',
createdAt:'08/01/2020 9:00 AM',
isLoggedIn: false
},
{
_id: 'fg12cy',
username: 'Asab',
email: '[email protected]',
password: '123456',
createdAt:'08/01/2020 9:30 AM',
isLoggedIn: true
},
{
_id: 'zwf8md',
username: 'Brook',
email: '[email protected]',
password: '123111',
createdAt:'08/01/2020 9:45 AM',
isLoggedIn: true
},
{
_id: 'eefamr',
username: 'Martha',
email: '[email protected]',
password: '123222',
createdAt:'08/01/2020 9:50 AM',
isLoggedIn: false
},
{
_id: 'ghderc',
username: 'Thomas',
email: '[email protected]',
password: '123333',
createdAt:'08/01/2020 10:00 AM',
isLoggedIn: false
}
];
const products = [
{
_id: 'eedfcf',
name: 'mobile phone',
description: 'Huawei Honor',
price: 200,
},
{
_id: 'aegfal',
name: 'Laptop',
description: 'MacPro: System Darwin',
price: 2500,
},
{
_id: 'hedfcg',
name: 'TV',
description: 'Smart TV:Procaster',
price: 400,
}
]
Her kullanıcı için id,kullanıcı adı,şifre,mail,oluşturulma tarihi ve online durumu belirtilmiş aynı zamanda ürünler içinse id,ad,açıklama ve fiyat değerleri varmış. İlk önce kullanıcı objesini yapalım .
JavaScript:
let kullaniciAd = prompt("Kullanıcı Adınızı Giriniz")
let mail = prompt("E-mailinizi Girin")
let dogruMail = ""
if(!mail.includes("@") && !mail.includes(".com"))
{
alert("Geçerli Bir Mail Adresi Girin")
}
else {
dogruMail = mail;
}
let sifre = prompt("Şifrenizi Yazın")
let durum = parseInt(prompt("Online Olmak İçin 1 \n Offline Olmak için 2 Basın"))
if(durum ==1)
{
durum = "True"
}
else if (durum ==2) {
durum = "False"
}
else{
alert("Geçerli Hamle Yapın")
}
İlk olarak kullanıcı adını kişiden prompt ile aldık. Daha sonra mail adresi aldık ama eğer kişi "@" ve ".com" içermezse mailin hatalı olacağını söyledik. Böylece kişinin zorla geçerli mail girmesini sağlıyoruz. Kişiden şifre değeri aldıktan sonra online durumunu soruyoruz. Eğer kişi söylenilen sayılar harici bir değer girerse geçerli sayı girerse else bloğu çalışacaktır. 1 online, 2 offline olmasını sağlayacaktır.
Temel olarak kullanıcı bilgilerini aldık şimdi gelelim fonksiyonlara hesabın oluşturulduğu tarih ve id için birer fonksiyon oluşturacağım ki gelecekte id değeri özellikle bir kez daha ihtiyacımız olacak tekrardan id oluşturucu yapmayalım.
İlk olarak hesabın oluşturulduğu tarihin fonksiyonunu yapalım.
JavaScript:
function kayıtTarih()
{
let tarih = new Date()
let yil = tarih.getFullYear()
let ay = tarih.getMonth() +1
let gun = tarih.getDate()
let saat = tarih.getHours()
let dakika = tarih.getMinutes()
if (ay < 10) {
ay = '0' + ay;
}
if (gun < 10) {
gun = '0' + gun;
}
if (saat < 10) {
saat = '0' + saat;
}
if (dakika < 10) {
dakika = '0' + dakika;
}
let kullaniciTarih = `${gun}/${ay}/${yil} ${saat} : ${dakika} `
return kullaniciTarih;
}
Tarih değişkenini tarih nesnesi olarak tanımlayıp bunun üzerinden yıl,ay,gün,saat,dakika değerlerini alıyoruz. Özellikle ay değerine +1 ekliyoruz ki günümüz ay ile aynı olsun yoksa 1 ay eksik gösteriyor. (Sebib 0 sayısının Ocak olarak sayılması)
Daha sonra eğer ay,gun,saat ve dakika değerleri 10'dan küçükse başına 0 ekle diyerek 11.7.2024 gibi görünmesini engelliyoruz.
En son olarak yeni bir değişkene tüm oluşturduğumuz değerleri modern tarih sistemi olarak tanımlayıp return ediyoruz. Böylece hesabı açan kişinin kayıt tarihi log olacaktır.
ID için otomatik ıd generator yapalım.
JavaScript:
function idOlustur() {
let harfler = "ABCDEFGHJKZMNCV1234567890";
let id = "";
for (let i = 0; i < 6; i++) {
let random = Math.floor(Math.random() * harfler.length);
id += harfler[random];
}
return id;
}
Harfler değişkenine şifrenin hangi elemanlardan oluşacağını yazıyoruz. İd değikşkeni şimdilik boş olacaktır. Oluşturulan id değerini buraya göndereceğiz. Bir döngü oluşturup 6 haneli id yapacağımız için max 6 kez dönsün diyoruz. 10 elemanlı id isterseniz döngüyü 10 yapın. Random değişkenind önce sayıları tam sayıp yapıp math.random fonksiyonu ile harfler değişkenin uzunluğunu çarpıyoruz böylece rastgele eleman alacağız. En son olarak id değişkenini harfler'in random değeriyle topluyoruz ve return ediyoruz. Bu işlem sonucu 6 haneli rastgele id oluşacaktır.
Oluşturduğumuz değerleri tek bir yerde birleştirme zamanı o yüzden yen bir obje oluşturalım ve yaptığımız işlemleri oraya aktaralım.
JavaScript:
let kayitKullanici = [
{
id : idOlustur(),
username : kullaniciAd,
email : dogruMail,
password : sifre,
createdAt : kayıtTarih(),
isLoggedIn : durum
}
]
Burayı pek açıklamıyorum sadece bir obje oluşturup içini yukarıda oluşturduğumuz değişkenleri atıyoruz.
Kullanıcı ile işimiz bitti şimdi sıra geldi ürün eklemeye mantıken yine aynı şeyleri yapacağız.
JavaScript:
let cihazAd = prompt("Eklenecek Cihazın Adını Girin")
let aciklama = prompt("Eklenecek Ürünün Açıklamasını Girin")
let fiyat = parseInt(prompt("Ürün Fiyatını Girin"))
let urunEkle = [
{
_id: idOlustur(),
name: cihazAd,
description: aciklama,
price: fiyat
}
]
Sırayla kullanıcıdan değer girmesini isteyip objeye atıyoruz. İd için fonksiyon yaptığımız için tek bir komutla bir başka obje içine atadık. Fonksiyon olarak yapmasaydık sıfırdan id oluşturucu yapacaktık. Gereksiz koda ne gerek var değil mi ?
Artık tüm her şeyimiz hazır sadece tek bir şey kaldı. Aldığımız değerleri objeye attık tamam şimdi de bu oluşturduğumuz objeyi ana user ve products objesine atıp programı bitirelim.
JavaScript:
users.push(kayitKullanici)
products.push(urunEkle)
console.log(users)
console.log(products)
kayitKullanıcı ve urunEkle objelerini ana objelere push ile atayıp konsol basıyoruz. Tebrikler program bitti şimdi nasıl çalıştığına bakalım.
JavaScript:
const users = [
{
_id: 'ab12ex',
username: 'Alex',
email: '[email protected]',
password: '123123',
createdAt:'08/01/2020 9:00 AM',
isLoggedIn: false
},
{
_id: 'fg12cy',
username: 'Asab',
email: '[email protected]',
password: '123456',
createdAt:'08/01/2020 9:30 AM',
isLoggedIn: true
},
{
_id: 'zwf8md',
username: 'Brook',
email: '[email protected]',
password: '123111',
createdAt:'08/01/2020 9:45 AM',
isLoggedIn: true
},
{
_id: 'eefamr',
username: 'Martha',
email: '[email protected]',
password: '123222',
createdAt:'08/01/2020 9:50 AM',
isLoggedIn: false
},
{
_id: 'ghderc',
username: 'Thomas',
email: '[email protected]',
password: '123333',
createdAt:'08/01/2020 10:00 AM',
isLoggedIn: false
}
];
const products = [
{
_id: 'eedfcf',
name: 'mobile phone',
description: 'Huawei Honor',
price: 200,
},
{
_id: 'aegfal',
name: 'Laptop',
description: 'MacPro: System Darwin',
price: 2500,
},
{
_id: 'hedfcg',
name: 'TV',
description: 'Smart TV:Procaster',
price: 400,
}
]
let kullaniciAd = prompt("Kullanıcı Adınızı Giriniz")
let mail = prompt("E-mailinizi Girin")
let dogruMail = ""
if(!mail.includes("@") && !mail.includes(".com"))
{
alert("Geçerli Bir Mail Adresi Girin")
}
else {
dogruMail = mail;
}
let sifre = prompt("Şifrenizi Yazın")
let durum = parseInt(prompt("Online Olmak İçin 1 \n Offline Olmak için 2 Basın"))
if(durum ==1)
{
durum = "True"
}
else if (durum ==2) {
durum = "False"
}
else{
alert("Geçerli Hamle Yapın")
}
function idOlustur() {
let harfler = "ABCDEFGHJKZMNCV1234567890";
let id = "";
for (let i = 0; i < 6; i++) {
let random = Math.floor(Math.random() * harfler.length);
id += harfler[random];
}
return id;
}
function kayıtTarih()
{
let tarih = new Date()
let yil = tarih.getFullYear()
let ay = tarih.getMonth() +1
let gun = tarih.getDate()
let saat = tarih.getHours()
let dakika = tarih.getMinutes()
if (ay < 10) {
ay = '0' + ay;
}
if (gun < 10) {
gun = '0' + gun;
}
if (saat < 10) {
saat = '0' + saat;
}
if (dakika < 10) {
dakika = '0' + dakika;
}
let kullaniciTarih = `${gun}/${ay}/${yil} ${saat} : ${dakika} `
return kullaniciTarih;
}
let kayitKullanici = [
{
id : idOlustur(),
username : kullaniciAd,
email : dogruMail,
password : sifre,
createdAt : kayıtTarih(),
isLoggedIn : durum
}
]
let cihazAd = prompt("Eklenecek Cihazın Adını Girin")
let aciklama = prompt("Eklenecek Ürünün Açıklamasını Girin")
let fiyat = parseInt(prompt("Ürün Fiyatını Girin"))
let urunEkle = [
{
_id: idOlustur(),
name: cihazAd,
description: aciklama,
price: fiyat
}
]
users.push(kayitKullanici)
products.push(urunEkle)
console.log(users)
console.log(products)
2) Ülkeler dizisini map kullanarak büyük harfe çevirin.
Gayet basit bir işlem buradaki amaç ok fonksiyonu ve map'i pekiştirmektir.
JavaScript:
const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand']
console.log(countries.map((buyuk)=>buyuk.toUpperCase()))
console.log içinde diziAdı.map diyip içine local bir değişken tanımladık. Bu local değişken dizideki her bir elemandır aslında. Bu local değişkeni toUpperCase ile tüm elemnları büyük harfe çevirdik.
Son 3 konu ile alakalı örnekler bu kadar yeterli diye düşünüyorum. Çünkü konulara baktığımızda çok fazla ihtiyacımız olan konular değil ama bilmek ve nasıl yapıldığını bilmek lazım. Özellikle ilk soru sizi hem döngü,dizi,obje,fonksiyonlar açısından çok katkı sağlayacak bir örnek bozup bozup sıfırdan yapın size çok şey katar ilk soru. Başka bir konuda görüşmek üzere
