Professional Documents
Culture Documents
Javascript Notları
Javascript Notları
2 ** 4
Yuvarlama:
Boolean("1") // true
Boolean("") // false
Boolean(0) // false
Boolean(-0.1) // true
var a = false;
console.log(Boolean(a)) // false
let number5 = 55
number5 = number5.toString() // number5 artık string
https://dorey.github.io/JavaScript-Equality-Table/
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.")
Callback Fonksiyonları
function printScreen1() {
console.log("İlk ekran çıktısı");
}
function printScreen3() {
console.log("Üçüncü ekran çıktısı");
}
printScreen2(printScreen1, printScreen3);
Arrow Fonksiyonlar
3
return sayi1 * sayi2;
}
*/
console.log(carpim(3, 5));
const developer =
experience > 5
? () => alert('Birçok konuyu biliyorum')
: () => alert('Hicbir sey bilmiyorum:)');
developer();
Nested Fonksiyon
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ı!!!")
}
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)
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')
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
items.unshift(femaleUsers);
items.push(maleUsers)
console.log(items)
console.log(newItems)
console.log(items)
.forEach
const numbers = [65, 44, 12, 4];
7
numbers.forEach(myFunction)
document.getElementById("demo").innerHTML = numbers;
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.
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
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()
.sort()
.reduce()
Döngüler
const PRODUCTS = ["Laptop", "Phone", "Speaker", "PC", "Mic"]
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 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)
JSON
function Insan(isim,yas) {
this.isim = isim;
this.yas = yas;
}
class Insan {
constructor(isim, yas) {
this.isim = isim
this.yas = yas
10
}
}
document.write(isim)
document.write(digerOzellikler.soyisim)
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.
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