Hakan YALÇINKAYA'dan JavaScript Notları

Javascript'te başlangıç seviye için alışılmışın dışındaki bilgileri, yazı olarak daha hızlı bulabilmek için paylaşıyorum.

---

Derslerle alakalı paylaşılan içerikler:
https://github.com/hakanyalcinkaya/kodluyoruz-frontend-101-egitimi
1) https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
2) Düzenleme editörü: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
3) Eklenti: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServerEklenti
4) Yol haritası: https://roadmap.sh/frontend
5) Node.js https://nodejs.org/en/

---

var eski tip tanımlama biçimidir, let yeni bir özelliktir. var ile değişken tanımlandığında, derleyici o değişkene ait bir hata aldığında satır belirleyemez. let ile tanımlama yapıldığında, hata konumu tespit edilebilir. const ile yapılan tanımlamalar ise tanımlama satırında hemen değer almalıdır, aksi halde hata meydana gelir. const ile tanımlanmış veri değiştirilemez. Dolayısıyla const ile yapılan tanımlama, değişken sayılmaz.

JavaScript'te bölme işleminden kalan, yüzde, yani % işareti ile alınır. console.log(5 % 2) işleminin ekran çıktısı 1'dir.

Bir sayının üssünü almak iki yıldız ile yapılır. 2'nin 4'üncü kuvvetini almak için, console.log(2 ** 4) şeklinde yazım uygulanır, sonuç 16'dır.

---

// ********** let ve const ile Degisken Tanimlama ********** 

// var ile degisken tanimlamak:
// var serverName = "api.kodluyoruz.org"
// console.log(serverName)

// let ile degiskeni bos tanimlamak:
let serverName;
console.log(serverName)

// let ile degiskene bilgi atamak:
serverName = "https://kodluyoruz.org"
console.log(serverName)

// let ile degiskene bilgi atayarak tanimlamak:
let password = "1234";
console.log(password)

// degisken atamasi yapmadan once kullanmaya calismak:

/* HATALI KULLANIM:  
console.log(fullName)
let fullName = "Hakan Yalcinkaya";
*/
let fullName = "Hakan Yalcinkaya";

// let ile tanimlanan degiskenin icindeki bilgiyi degistirmek:

fullName = "Lorem Ipsum Dolor"
console.log(fullName)

// birlestirme veya ekleme islemi
fullName + "Yeni Eklenen Bilgi" // acaba eklendimi ??
console.log(fullName + " Test Bilgisi") // Ekle ve Goster ama Degiskene Eklemedik

fullName = fullName + " Yeni Bilgi"
fullName =  "2: Bilgi : " + fullName

fullName = "Sifirlandi"
fullName += " ve Yeni Bilgi Eklendi"
console.log(fullName)

// const ile degiskeni bos tanimlamaya calismak :( :
// const serverPassword; // sadece degisken tanimlandi ama ici bos ??

// const ile degisken tanimlamak:
const SERVER_PASSWORD = "oisjefo9jwes221"
console.log(SERVER_PASSWORD)

// SERVER_PASSWORD = "1234"
// console.log(SERVER_PASSWORD)

Kaynak: https://youtu.be/E739Sr5n2Hw

---

// ********** Degisken Tanimlama Kurallari  ********** 
// https://www.w3schools.com/js/js_conventions.asp
// https://google.github.io/styleguide/jsguide.html#features-local-variable-declarations
// https://www.robinwieruch.de/javascript-naming-conventions

// ### Degisken Genel Tanimlama Kurallari:
// camelCase Kullanimi:
let fullname  = "" // bu dogru kullanim degil :(
let kodluyoruzserverinfo = "" // bu dogru kullanim degil :(
let kodluyoruz_server_info = "" // bu dogru kullanim degil :(
let fullName = ""
let kodluyoruzServerInfo = "" // bu dogru :)
let kodluyoruzSERverInfo = "" // bu dogru kullanim degil :(

// let firstName = "Hakan", lastName = "Yalcinkaya"
let firstName = "Hakan"
let lastName = "Yalcinkaya"
console.log(firstName, lastName)

// UPPER_CASE Kullanimi:
const password = "1234" // bu dogru kullanim degil :(
const PASSWORD = "1234" // dogru kullanim
const SERVER_PASSWORD = "1234"

// degiskenlerde turkce ve diger dillerin kullanimi:
let türkçeBilgi = 'Türkçe Bilgi Yazdırılıyor..' // bu dogru kullanim degil :(
// let turkceBilgi // olmazzz :( 
let info = 'Türkçe Bilgi Yazdırılıyor..'
console.log(info)

// anlamsiz degisken adlari kullanmayin!
// https://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered
//When I wrote this, only God and I understood what I was doing
//Now, God only knows
let x = 1;  // bu dogru kullanim degil :(
// x, y, z, k, i, e, gibi anlamsiz degisken isimlerini kullanmayin!


// ### Ek Bilgi:
// 1: boolean tanimlarken is/has kullanimi:
let isActive = true
let hasPassword = false

// 2: Line Length < 80

Kaynak: https://youtu.be/oGrfwY_Duz0

---

// ********** Number Veri Turu ile Calismak ********** 
// number veri turu tanimlamak:
let price = 100
let tax = 0.18
let priceTax = price * tax
let total = price + priceTax
console.log(
    "Fiyat:", price, 
    "KDV Orani:", tax, 
    "KDV Tutari:", priceTax, 
    "Fiyat: ", total 
)

let stringNumber = "11"
console.log(stringNumber)
let newNumber = Number(stringNumber)
console.log(newNumber)
console.log("Number Constructor icine bilgi gonderildi:", Number("111"))

// arttirma ve azaltma islemleri:
let counter = 320
counter = counter + 1 // uzun yontem
counter += 1;
counter ++;
console.log(counter)

counter --;
counter -= 1;
console.log(counter)

counter *= 10;
console.log(counter)

counter /= 2;
console.log(counter)

// islem onceligi:
// https://tr.wikipedia.org/wiki/%C4%B0%C5%9Flem_s%C4%B1ras%C4%B1
console.log( 2 + 3 * 10) // 50 ???????????
console.log( (2 + 3) * 10) // 50 ???????????

// mod(kalan) alma %:
// sayi tek mi cift mi ???
console.log( 17 % 2) // 0 ise cift, 1 ise tek

// 8 urun alan koliye tum urunler sigiyor mu ?
console.log("Koli Kalan Urun Ornegi: ", 18 % 8)

// us alma **:
console.log(2 * 2 * 2 * 2)
console.log(2 ** 4)

// asagi yuvarlama islemi -> Math.floor:
console.log("Asagi Yuvarlama:", Math.floor(1.9) )  // -> 1

// yukari yuvarlama islemi -> Math.ceil :
console.log("Yukari Yuvarlama:", Math.ceil(1.9) ) // -> 2

// yakina yuvarlama islemi -> Math.round :
console.log("Yakina Yuvarlama: ", Math.round(1.5) ) // 1.4 ->1, 1.5 ->

Kaynak: https://youtu.be/QwEISRm7OxY

---

// ********** Boolean Veri Turu ile Calismak ********** 

// 0 ve 1'i Anlamak ->
let isActive = false // 0
isActive = true // 1
console.log(isActive)


let userName;
let isUserName = Boolean(userName)
console.log(isUserName)

Boolean("11") // true
Boolean("0") // true
Boolean("") // false

userName = "user"

console.log("User Name:", Boolean(userName))

// 0 ,-0, null, false, NaN, undefined, ("") ->
Boolean(0) //  false
Boolean(-0) // false
Boolean(-0.1) // true
Boolean(0 === 0) // true

// Not: Karar Yapilari Kisminda Tekrar Anlatilacak
Boolean(userName.length > 0) // true

Kaynak: https://youtu.be/JQist2dAI80

---

// ********** Veri Turunu Ogrenmek ve Veri Turu Donusumleri ********** 

// veri turunu ogrenmek typeof:
let price = 111
let stringPrice = "111"
let hasPassword = true

console.log(
    "price: ",
    typeof(price)
)

console.log(
    "stringPrice: ",
    typeof(stringPrice)
)

console.log(
    "hasPassword: ",
    typeof(hasPassword)
)

// string(metinsel) bilgileri int ve float'a donusturmek
let number1 = "11"
number1 = parseInt(number1)
console.log("number1: ", number1, typeof(number1) )

let number2 = "11px"
number2 = parseInt(number2)
console.log("number2: ", number2, typeof(number2) )

let number3 = "11.1"
number3 = Number(number3)
console.log("number3: ", number3, typeof(number3) )

let number4 = "11.4px"
number4 = parseFloat(number4)
console.log("number4: ", number4, typeof(number4) )

// number veri tipinden string'e donusturmek:
let number5 = 55
number5 = number5.toString()
console.log(number5, typeof(number5))

Kaynak: https://youtu.be/T-VYmfC3gB0

---

// ********** Template Literals Kullanimi ********** 
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

let username = "hakan"
const DOMAIN = "kodluyoruz.org"

let email = username + "@" + DOMAIN

// console.log("Merhaba", username, "sitemize hosgeldin", "mail adresin:", email)

let info = `
Merhaba ${username} sitemize hosgeldin.. 
mail adresin: ${email}

mail adresinin uzunlugu: ${email.length}
borcunuz: ${(2 + 3) * 10} TL
gunun saat bilgisi : ${new Date().getHours()}

kisa isminiz: ${username[0]}.
`

console.log(info)

Kaynak: https://youtu.be/snHmVqVKpqE

---

// ********** String Veri Turu Islemleri ********** 
// https://www.w3schools.com/jsref/jsref_obj_string.asp

let email = "hakanyalcinkaya@gmail.com"
let firstName = "hakan"
let lastName = "YALCINKAYA"

// string karakter sayisi -> length
console.log( email.length )

// Ilk Karakteri Bulmak -> [0]:
console.log(firstName[0])
console.log(firstName.charAt(0))

// buyuk harf / kucuk harf :
firstName = firstName.toUpperCase()
console.log(firstName)

firstName = firstName.toLowerCase()
console.log(firstName)
// String Icinde Istedigimiz Bilgiyi Aramak ve Yerini Bulmak -> search:
console.log(email.search("@"))
console.log( email[15] )

email.search('olmayan') // -1

// belli bir yere kadar al -> slice :  (domain bilgisi)
let DOMAIN = email.slice( email.search("@") + 1)
console.log(DOMAIN)

console.log(
    DOMAIN.slice(0, DOMAIN.indexOf('.') )  // sadece gmail kismini aldik
)

// bilgiyi degistir -> replace :
email = email.replace('gmail.com', 'kodluyoruz.org')
console.log(email)

// istedigim bilgi var mi ? -> includes :
email.includes('dkfhsd') // false
email.includes('@') // true

// istedigim bilgiyle basladi mi ? bitti mi -> startsWidth, endsWidth :
console.log(
    email.endsWith('kodluyoruz.org')
)

// Ilk Harflerini Buyuk Yapmak
firstName = "FIRST"
lastName = "LAST"
let fullName = `${firstName[0].toUpperCase()}${firstName.slice(1).toLowerCase()} ${lastName[0].toUpperCase()}${lastName.slice(1).toLowerCase()}`

Kaynak: https://youtu.be/mXbLdT-XfzU

---

---

.... https://youtu.be/_OzyMdVDV3g?list=PLGrTHqyRDvx6PqKkqSPwph57HNN4RWgR2