arr = [1, 2, 3];
arr.every(a => {
return a > 1;
}); // Her biri 1'ten büyük mü? false
arr.some(a => {
return a > 1;
}); // Herhangi biri 1'ten büyük mü? true
Harici fonksiyon ile:
arr = [1, 2, 3];
function checkIndex(index) {
return index > 1;
}
arr.every(checkIndex); // Her biri 1'ten büyük mü? false
arr.some(checkIndex); // Herhangi biri 1'ten büyük mü? true
Tarih İşlemleri
Tarih işlemleri için new Date() kullanılır.
Metod
Açıklama
Ek açıklama
getDate()
Gün verisini alır
Ayın 6'sı
getDay()
Gün ismini sayısal olarak verir
Pazar için 0, Cumartesi için 6
setDate(<date> + <offset>)
Tarihi değiştirme
Bir sonraki veya önceki tarihi alma
toLocaleDateString(<ülke_kodu>)
Verilen ülkeye göre zaman metni verir
TR'ye göre için "06.05.2019"
<date> Tarih objesi
Örn: new Date()
<offset> Değişken sayı
Örn: 1 gün sonrası için 1, 1 gün öncesi için -1
<ülke_kodu> Ülkenin kodu
Örn: Tr için "tr", Amerika için "en-US"
Türkçe Tarih Alma
/**
* Bugüne kıyasla yeni bir gün verisi döndürür
* @param {number} offset Sonrası ya da öncesi (`-1` 1 gün önce)
*/
function getDateTR(offset = 0) {
// Günlerin türkçe karşılığı
day = [
"Pazar",
"Pazartesi",
"Salı",
"Çarşamba",
"Perşembe",
"Cuma",
"Cumartesi"
];
// Değişken tarih oluşturma
date = new Date();
date.setDate(date.getDate() + offset);
dateString = date.toLocaleDateString("tr");
dayName = day[date.getDay()];
return dateString + " " + dayName;
}
HTML Elemanları
HTML Elemanlarını Alma
document.getElementById("id"); // HTML elemanı döndürür (object)
document.getElementsByTagName("tag_name"); // HTML elemanları dizisi döndürür (HTMLCollection)
document.getElementsByClassName("class_name"); // HTML elemanları dizisi döndürür (HTMLCollection)
document.getElementsByName("name"); // HTML elemanları dizisi döndürür (HTMLCollection)
// id'ler için '#' classlar için '.' kullanılır
document.querySelector("#content"); // İlk elemanı alma
document.querySelectorAll("span.style-scope.ytd-playlist-video-renderer"); // Hepsini alma
IdKimlik verisi
Taga, div, i, p, input, article ...
ClassCss dosyasındaki classları ifade eden alanlar
NameInputlarda sıklıkla kullanınlan alanlar
Query Selector ile HTML Elemanı Alma
Tek bir eleman alınmak isteniyorsa querySelector(<işlem>), hepsi alınmak isteniyorsa querySelectorAll(<işlem>) komutu kullanılır
İşlem
Seçilen
"#yemreak"
ID'si yemreak olan eleman
".yemre"
yemreclass'ına sahip olan elemanlar
"[href]"
href özelliği olan elemanlar
"a[target='_blank']"
target'i _blank olan linkler
"p.active"
activeclass'ına sahip olan tüm p elemanları
"*"
Her eleman
this
Şuanki eleman
ID ile HTML Elemanı Alma
ID'ler eşsiz olduğundan 1 tane html elamanı bulunacaktır.
document.getElementById("<id>"); // HTML elemanı döndürür (object)
Class, tag ve name özellikleri birden fazla html elemanında olabileceğinden, HTMLCollection objesi döndürür.
document.getElementsByTagName("tag_name"); // HTML elemanları dizisi döndürür (HTMLCollection)
document.getElementsByClassName("class_name"); // HTML elemanları dizisi döndürür (HTMLCollection)
document.getElementsByName("name"); // HTML elemanları dizisi döndürür (HTMLCollection)
HTML elemanının alt elemanlarını alma
document.getElementById("id").childNodes;
IdKimlik verisi
document.getElementById('id')HTMLElemanı
HTMLCollection'u array'e dönüştürmek
const array = [...htmlCollection]; // array: Array objesidir
array.forEach(element => {
// Arraydeki her bir elemanı işleme
// element.method()
});
HTML Attribute Alma
Tag özellikleri olarak geçer. Örn; src, href, data-thumb-url, ...
Beklemeli işlemlerde await, promise yapısı kullanılır.
await barındıran fonksiyonların async özelliğini taşımaları lazımdır
async özelliği olan fonksiyonlar await func() şeklinde kullanılır
await işlemi bitene kadar bekle anlamı taşımaktadır
await deyimi kullanıldığı için bu deyimi içeren fonksiyon da async özelliği taşımalıdır
Bir fonksiyonda await beklemesi varsa onu kullanan fonksyionlar da o fonksiyonu await ile beklemelidir
Aksi halde asenkron olarak çalışır bekleme gerçekleşmez
Promise Yapısı ile Bekletme
function wait(ms) {
return new Promise((r, j) => setTimeout(r, ms));
}
function method() {
console.log("done");
}
// Promise Yapısı ile çalışma
const prom = wait(2000);
prom.then(metod);
// Await yapısı ile çalışma
await wait(2000);
method();
Promise ile Beklemeli Metod İşleme
function startDelayed(method, ms) {
new Promise((r, j) => setTimeout(r, ms)).then(method);
}
async function startDelayed(method, ms) {
await new Promise((r, j) => setTimeout(r, ms));
return method();
}
async function startDelayed(method, ms, param) {
await new Promise((r, j) => setTimeout(r, ms));
return param ? method(param) : method();
}
async function startAndWait(method, ms, param) {
const result = param ? method(param) : method();
await new Promise((r, j) => setTimeout(r, ms));
return result;
}
`
Sayfa İşlemleri
window.scrollBy(x, y); // Verilen değer kadar kayma
window.scrollTo(x, y); // Verilen değere gitme
window.scrollBy(5, 100); // Örnek kaydırma
window.scrollTo(5, 100); // Örnek atlama
x Yatay konum
y Dikey konum
function pageScroll() {
window.scrollBy(0, 1);
scrolldelay = setTimeout(pageScroll, 10); // 10ms de bir kaydırma
}
Popup blocker gibi eklentiler varsa kapatılması gerekmektedir.
function download(data, filename, mime = 'text/plain') {
if (!data) {
console.error("Veri olmadan indirme işlemi yapılmaz")
return;
}
if (!data.includes("http")) {
if (mime.includes("json") || typeof data === "object") {
mime = "text/json"
data = JSON.stringify(data)
}
data = `data:${mime};charset=utf-8,${encodeURIComponent(data)}`
if (!filename) {
filename = `template.${mime.split('/')[0]}`
}
}
if (!filename) {
filename = data.split('/').pop()
}
const link = document.createElement("a");
link.download = filename;
link.href = data
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
Çoklu Dosya İndirme
function downladUrlArrayWithKey(array, key) {
array.forEach(element => {
const url = element[key];
const fileName = url.split("/").pop();
download(url, fileName);
sleep(100); // Bekleme olmazsa chrome her dosyayı indirmiyor
});
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if (new Date().getTime() - start > milliseconds) {
break;
}
}
}
console.save Metodu Oluşturma
(function(console) {
console.save = function(data, filename) {
if (!data) {
console.error("Console.save: No data");
return;
}
if (!filename) filename = "console.json";
if (typeof data === "object") {
data = JSON.stringify(data, undefined, 4);
}
var blob = new Blob([data], { type: "text/json" }),
e = document.createEvent("MouseEvents"),
a = document.createElement("a");
a.download = filename;
a.href = window.URL.createObjectURL(blob);
a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
e.initMouseEvent(
"click",
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
);
a.dispatchEvent(e);
};
})(console);
// console.save(<url>, <filename>)
MIME - Internet Media Types
💌 HTTP İstekleri
// https://stackoverflow.com/questions/247483/http-get-request-in-javascript
// https://medium.freecodecamp.org/here-is-the-most-popular-ways-to-make-an-http-request-in-javascript-954ce8c95aaa
function httpGet(theUrl) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}
Ses İşlemleri
Tuşa basıldığında ses çalma ```htmlJS Drum Kit A clap S hihat D kick F openhat G boom H ride J snare K tom L tink
function removeTransitionEventListener(e) {
if (e.propertyName !== "transform") return;
this.classList.remove("playing");
}
function keyDownEventListener(e) {
const audioElement = document.querySelector(
`audio[data-key="${e.keyCode}"]`
);
const div = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audioElement || !div) return;
// Oynama efekti ekleme
div.classList.add("playing");
// Playing always from start
audioElement.currentTime = 0;
audioElement.play();
}
// Tuşalara basıldığında listenerı aktif etme
window.addEventListener("keydown", keyDownEventListener);
// Efektleri kaldırma
const keys = document.querySelectorAll(".key");
keys.forEach(key =>
key.addEventListener("transitionend", removeTransitionEventListener)
);
```
Harici Javascript Dosyası Ekleme
async function loadScript(url) {
let response = await fetch(url);
let script = await response.text();
eval(script);
}
let scriptUrl = "<url.js>";
loadScript(scriptUrl);
function copy(text) {
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input);
return result;
}
copy("YEmreAk")
// CTRL V ile yapıştırın
