Üs alma:

2 ** 4

Yuvarlama:

Math.floor(1.7) == 1 // Aşağı yuvarlama

Math.ceil(1.1) == 2 // Yukarı yuvarlama
Math.round(1.5) == 2 // Yuvarlama

String sayıyı sayıya çevirme:

let newNumber = Number(stringNumber)

Boolean("1") // true
Boolean("") // false
Boolean(0) // false
Boolean(-0.1) // true

var a = false;
console.log(Boolean(a)) // false

Değişken Türü Kontrolü

typeof("11") === "string" // true

let number1= "23px"

let x = parseInt(number1); // x = 23
let y = Number(number1); // x = NaN ( Not a Number)

let number5 = 55
number5 = number5.toString() // number5 artık string

// veya “||” operatörü ilk bulduğu true değeri döner

var a= 2 || s || 4 || 5; // 2

https://dorey.github.io/JavaScript-Equality-Table/

let username = "melih"

let info = `Merhaba ${username} sitemize hoş geldin.
Alt satırdayız.
Borcunuz: ${(2 + 5) * 5} TL`

1
Template Literals

const kitap = {
 ad: "Fırtına",
 yazar: "Shakespeare",
 tarih: 1610
}
const bookTable =
     `<table border>
 <tbody>
   <tr>
     <td>Kitap</td>
     <td>${kitap.ad}</td>
   </tr>
 <tr>
     <td>Yazar</td>
     <td>${kitap.yazar}</td>
   </tr>
     <tr>
     <td>Tarih</td>
     <td>${kitap.tarih}</td>
   </tr>
 </tbody>
</table>`
document.body.innerHTML = bookTable

String İşlemleri

firstName.charAt(0)
firstName.toUpperCase()
firstName.search("a")
firstName.slice(0,10) // 0 ile index'li harfleri al
firstName = firstName.replace('melih','mahmut')
firstName.includes("mel") // içinde bu string var mı
email.endsWith('.com') // bu şekilde bitiyor mu

DOM

document.body.style.backgroundColor = "aqua"

function myFunction() {
   var w = window.open();
   w.document.open();
   w.document.write("<h1>Hello World!</h1>");
   w.document.close();
}

2
document.getElementById("domain").innerHTML = "DOM Manipülasyonu yaptık!";

document.getElementById("btnClick").addEventListener("click", clicked);
function clicked(){
       alert("Butona Tıklandı");
       }

document.querySelector("ul#liste>li>a").innerHTML = "x"

prompt("İsminizi giriniz.")

let item = document.querySelector("ul#list>li:last-child")

Callback Fonksiyonları

function printScreen1() {
   console.log("İlk ekran çıktısı");
 }

 function printScreen2(callback1, callback2) {

   setTimeout(function () {
     callback1();
     console.log("İkinci ekran çıktısı")
     callback2();
   }, 3000);
 }

 function printScreen3() {
   console.log("Üçüncü ekran çıktısı");
 }

 printScreen2(printScreen1, printScreen3);

Arrow Fonksiyonlar

let func = (param1, param2, param3) => expression;

const carpim = (sayi1, sayi2) => sayi1 * sayi2;

/*
    // Daha uzun hali ise;
    const carpim = function(sayi1,sayi2){

3
      return sayi1 * sayi2;
    }
  */

console.log(carpim(3, 5));

const karesiniAl = (sayi) => sayi * sayi;

//Hiç parametre olmadığı zaman ise
const helloWorld = () => console.log('Hello World');

let experience = prompt('Kac yillik gelistirici tecrubeniz var', 4);

const developer =
 experience > 5
   ? () => alert('Birçok konuyu biliyorum')
   : () => alert('Hicbir sey bilmiyorum:)');

developer();

// parantezler bize birden fazla statement yazmamızı sağlar.

let toplam = (a, b) => {
  let result = a + b;
  return result;
};

Nested Fonksiyon

function programDetayi(bootcamp, organizasyon) {

    // nested yardımcı fonk

    const tumProgram = () => bootcamp + ' ' + organizasyon;
 
    console.log('Basladi, ' + tumProgram());
    consol.log('Bitti, ' + tumProgram());
  }
tumProgram fonksiyonu dış değişkene ulaşabilir ve gerekli bilgileri return eder. Daha ilginç olarak da bir fonksiyon
nested fonksiyonu da return edebilir. Bir sayaç üzerinde bunu anlayabiliriz.

function sayacartir() {
    let sayac = 0;
 
    return function () {
      return sayac++;
    };
  }
 
  let counter = makeCounter();
 
  console.log(sayacartir()); // 0
  console.log(sayacartir()); // 1

4
  console.log(sayacartir()); // 2

DOM Etkinlikleri
const button = document.querySelector("#button");
//nesneye bir etkinlik atandı.Burada ilk olarak tip ('click')
//ikinci olarak da aşağıda fonksiyon tanımlanır ,fonksiyon ismi parametre olarak girilir.
button.addEventListener('click',btnClicked);
  function btnClicked(){
    alert("Buton Tıklandı!!!")
    }

// Çıktı : Buton Tıklandı!!!

LocalStorage
window.localStorage.setItem("key","value");
window.localStorage.getItem("key");

localStorage.removeItem("key");
localStorage.clear();

Form
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/
bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous">
  </head>
  <body>
    <div id="alert"></div>
    <div class="container mt-5">
        <div class="row">
            <div class="col-sm-8 offset-sm-2">
                <form id="userForm">
                    <div class="mb-3">
                        <label class="form-label" for="username">Kullanıcı Adı</label>
                        <input class="form-control" type="text" name="username"
id="username">
                    </div>
                    <div class="mb-3">
                        <label  class="form-label" for="score">Skor</label>
                        <input class="form-control" type="number" name="skor" id="score">
                    </div>
                    <div class="mb-3">

5
                        <button type="submit" class="btn btn-success">Gönder</button>
                    </div>
                </form>
            </div>
           
<div class="col-sm-8 offset-sm-2 mt-4">
                <ul class="list-group" id="userList">
                    <!-- <li class="list-group-item d-flex justify-content-between align-
items-center">
                      A list item
                      <span class="badge bg-primary rounded-pill">1a4</span>
                    </li> -->
                   
                  </ul>
            </div>
        </div>
    </div>
    <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
    <script src="./form-submit-yonetimi.js"></script>
  </body>
</html>
let userFormDOM = document.querySelector("#userForm")
userFormDOM.addEventListener('submit', formHandler)

const alertDOM = document.querySelector('#alert')

const alertFunction = (title, message, className="warning") => `<div class="alert alert-${className}

alert-dismissible fade show" role="alert">
<strong>${title}</strong> ${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>`

function formHandler(event){
    event.preventDefault() // default işlemi engelledik
    const USER_NAME = document.querySelector('#username')
    const SCORE = scoreInputDOM = document.querySelector('#score')
    if(USER_NAME.value && SCORE.value ){
        addItem(USER_NAME.value, SCORE.value)
        USER_NAME.value = ""
        SCORE.value = ""
    }
    else{
        alertDOM.innerHTML = alertFunction("Hata", "Eksik bilgi girdiniz", "danger");
    }
}
let userListDOM = document.querySelector('#userList')

const addItem = (userName, score) => {

    let liDOM = document.createElement('li')
    liDOM.innerHTML = `${userName}

6
    <span class="badge bg-primary rounded-pill">${score}</span>`
    liDOM.classList.add('list-group-item','d-flex','justify-content-between','align-items-center')
    userListDOM.append(liDOM)
}

Array

let domain = "kodluyoruz"

let isActive = false
let items = [1,2,3, isActive, domain]
console.log(items)

items.push(50) // sona öğe eklemek

items.unshift(5) // başa öğe eklemek

items.pop() // sondaki öğeyi çıkarmak - son öğeyi döndürür

items.shift() // ilk elemanı çıkarmak - ilk öğeyi döndürür

items[items.length - 1] = 1000 // son öğeyi değiştirme

let femaleUsers = ["Gözde", "Pelin", "Sena"]

let maleUsers = ["Fatih", "Efe", "Salih"]

items.unshift(femaleUsers);
items.push(maleUsers)
console.log(items)

let newItems = items.splice(1,5)

console.log(newItems)
console.log(items)

let copyItems = items.slice() // array kopyalama

copyItems = [...items] // array kopyalama başka yöntem

let allUsers = [...femaleUsers, ...maleUsers] // array birleştirme

let allUsersString = allUsers.toString() // arrayi stringe çevirme

allUsersString = allUsers.join(",") // arrayi stringe çevirme ve belli bir stringle ayırma

allUsers.splice(allUsers.length -1, 0, "Melissa") // istenilen index bilgisine öğe eklemek

const alisverisListem = ["elma", "ekmek", "süt"];

const elmaVar = alisverisListem.includes("elma"); // bir öğenin array içerisinde olup
olmadığını kontrol etme

.forEach
const numbers = [65, 44, 12, 4];

7
numbers.forEach(myFunction)

document.getElementById("demo").innerHTML = numbers;

function myFunction(item, index, arr) {

  arr[index] = item * 10;
}
// --------------- Tek parametreli foreach
let sum = 0;

numbers.forEach(myFunction);

document.getElementById("demo").innerHTML = sum;

function myFunction(item) {
  sum += item;
}

.map()

 Map metodu da forEach gibi kendisine verilen fonksiyonu dizinin her elemanı için uygular fakat forEach'ten
farklı olarak sonucu yeni bir dizide tutar. Orijinal dizi olduğu gibi kalır.

const sayilar = [1,2,3];

let sayilarin5kati = sayilar.map(function(sayi) {

    return sayi*5;
});

console.log(sayilarin5kati);
// Çıktı olarak [5,10,15] görmeyi bekleriz.

console.log(sayilar);
// Çıktı olarak [1,2,3] görmeyi bekleriz. Orijinal dizimiz aynı kalır.

.some()
 Array içinde herhangi bir elemanın testi geçip geçmediğini kontrol eder

const numbers = [4, 12, 16, 20];

function checkValue(x) {
  return x > document.getElementById("toCheck").value;
}

function myFunction() {
  document.getElementById("demo").innerHTML = numbers.some(checkValue);
}

.every()

 every metodu belirtilen bir koşulun dizideki tüm elemanlara uyup uymadığını kontrol ederiz.
 some metodunda olduğu gibi, Boolean yani true veya false olarak döner.

8
  True dönebilmesi için dizideki tüm elemanların fonksiyondaki koşula uyması gerekir.

.filter()

 filter metodu bir dizi içerisindeki belirli bir koşulu sağlayan elemanlar ile yeni bir dizi oluşturmamıza
dolayısıyla dizi elemanlarını filtrelememize yarıyor.
 Yeni oluşacak diziyi bir değişkende saklıyoruz.
 Orijinal dizi bozulmuyor.

.find()

 Bu metot belirtilen koşula uyum sağlayan dizi elemanını bulmamızı sağlar.

 Diğer metotların aksine find metodu elemanın kendisini döner.
 Koşulu sağlayan birden fazla eleman varsa, bulduğu ilk elemanı döner.
 Koşulu sağlayan bir eleman bulamazsa undefined döner.

.sort()

 Bu metot, dizi içerisindeki elemanları sıralamaya yarar.

 Orijinal dizi sıralanmış şekilde döner. (Yani dizi mutate eder.)
 Eğer parametre olarak bir fonksiyon verilmezse dizi elemanları string'e çevrilir ve UTF-16 değerlerine göre
sıralanır.
 Artan veya azalan olarak sıralamak için farklı bir yol izlenmelidir.

.reduce()

 Bu metot dizimizi yalnızca bir değere indirger.

 Parantez içerisine parametre olarak bir fonksiyon ve accumulator'ün (toplayıcının) başlangıç değeri girilir.
 Bu metot orijinal diziyi değiştirmez. (Mutate etmez.)
 Tam olarak ne yaptığını anlamak için örnekleri inceleyelim.

Döngüler
const PRODUCTS =  ["Laptop", "Phone", "Speaker", "PC", "Mic"]

PRODUCTS.forEach(product => console.log(product)) // ÖNEMLİ BİR KISA YAZIM, yeni

fonksiyon oluştururken tek parametre kullanılıyor

PRODUCTS.forEach((product, index, array) => console.log(array[index] = product + "111"))

// yeni fonksiyon 3 parametre ile oluşturuluyor

PRODUCTS.forEach((product, index, array) => console.log(array[index] = `$

{product.toUpperCase()}`)) // template literal ile kullanım

const NEW_PRODUCTS = PRODUCTS.filter(item => item.length > 5)

const USERS = ["AYSE", "MehMET", "TuGCe"]

const NEW_USERS = USERS.map(item => ">>> " +item.toLowerCase() + " <<<")  // sadece
return değeri ile kullanım

9
const NEW_USERS_OBJ = USERS.map(item => (
    {userName: item, shortName: `${item[0]}.`, newName: `${item[0].toUpperCase()}$
{item.slice(1).toLowerCase()}`}
)) // sadece return değeri ile obje olarak döndürme

Object

let obje = new Object()

document.write(typeof(obje))

let ornekObje = {
    "2veri": 2,
    mesela: 3,
    isim: "Ali",
    soyisim: "Veli",
    tamIsim: function () { return `${this.isim} ${this.soyisim}`}
}

console.log(ornekObje["2veri"])
ornekObje.mesela = 4
ornekObje.yeniVeri = 3
console.log(ornekObje)

Object.keys(obj) – Key’lerden oluşan bir array döner(return).

Object.values(obj) – Value’lardan oluşan bir array döner.
Object.entries(obj) – [key, value] çiftlerinden oluşan bir array döner.

Object.keys(person) = ["name", "age"]

Object.values(person) = ["Jack", 20]
Object.entries(person) = [ ["name","Jack"], ["age",20] ]

JSON

let stringObject = JSON.stringify(person);

let newPerson = JSON.parse(stringObject);

Constructor ile sınıf üretme

function Insan(isim,yas) {
    this.isim = isim;
    this.yas = yas;
}

class Insan {
    constructor(isim, yas) {
        this.isim = isim
        this.yas = yas

10
    }
}

Insan.prototype.yeniFonksiyon = () => document.write("Sonradan")

let {"2veri":veri, mesela, isim, soyisim, tamIsim} = ornekObje;

document.write(veri)

let {isim, ...digerOzellikler} = ornekObje;

document.write(isim)
document.write(digerOzellikler.soyisim)

let digerOzellikler2 = {...digerOzellikler} // kopyalama (diğer türlü referans gönderir)

let score = [100, 200, 300, 400]

let [score1, score2, ...otherScores] = score
console.log(score1)

let copyOfScore = [...score] // kopyalama

const cikarma = ( { sayi1, sayi2 } ) => {

    // Bu satira dikkat
    �return sayi1 - sayi2;
    }
    const sayilar = {
     sayi2: 3,
     sayi1: 5
    }
    cikarma(sayilar);
    // sonuc 2

Artık fonksiyon içinde devamlı sayilar.sayi1, sayilar.sayi2 diye tekrarlamamamıza gerek yok ama çıkarma
fonksiyonunun parametresine dikkat edin. orada süslü parantezler {} bir objeyi temsil etmez, destructuring
işlemini temsil eder.

const bolme = ( { sayi1, sayi2 = 1} ) => {

    // default deger atadikreturn sayi1 / sayi2;
    }

const toplama = ({ sayi1, sayi2, ...args }) => {

    let sonuc = sayi1 + sayi2;
    for (let sayi in args){
     sonuc += args[sayi];

11
    }
    return sonuc;
   }
   const sayilar = {
    sayi1: 8,
    sayi2: 4,
    sayi3: 7,
    sayi4: 9,
    sayi5: 11
   }
   toplama(sayilar);
   // 39 doner
let [,pronoun,,name]=["Merhaba","benim","adım","Mehmet"];
pronoun: benim, name: Mehmet

FETCH API
fetch("../data/settings.json")
  .then((response) => {
    return response.json();
  })
  .then((responseJson) => {
    console.log(responseJson.userName);
  });
let userListDOM = document.querySelector("#userList");
fetch("https://jsonplaceholder.typicode.com/posts")
  .then((response) => response.json())
  .then((responseJson) => {
    responseJson.forEach(item => {
        let liDOM = document.createElement('li')
        liDOM.innerHTML = item.title
        userListDOM.appendChild(liDOM)
    });
  });

POST
let payload = {
title: "Blog Title",
body: "lorem ipsum",
userId:1
}
fetch('https://jsonplaceholder.typicode.com/posts', {
method: "POST",
body: JSON.stringify(payload),
headers: {"Content-type": "application/json; charset=UTF-8"}
})
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log(err));

12