📜
Javascript

Web için en çok kullanılan programlama dili
Ön Bilgilendirme
Python ve Javascript en popüler diller arasındadır.
Javascript kodlarım YScripts repomda tutulmaktadır ✨
Aralarındaki kıyaslama için buraya bakabilirisin.
Değişken Tipleri
Değişken
Açıklama
var
Her şey serbest 🎉
let
Tekrardan tanımlanamaz, değiştirilebilir
const
Tekrardan tanımlanmaz ve değiştirilmez
var temp = 1;
var temp = 2;
let temp2;
temp2 = 4;
const temp3 = 5;
String İşlemleri
İşlem
Açıklama
trim()
Boşluk, satır atlatma gibi özel karakterlerin tekrarını kaldırır
split(<ayrıac>)
Metni ayıraca göre parçalama
<ayırac> Metnin parçalara ayırmak için belirleyici
Örn: ' ' ile boşluklu metinler ayrıştırılıp, yeni bir diziye atanır
Koşul İşlemleri
elems = [] // Herhangi sayılabilir bir obje
for (let i = 0; i < elems.lenght < i++) {
    elem = elems[i]
    // ...
}
Tek Satırlı Koşul İşlemleri (Ternary If)
kosul ? "Doğru" : "Yanlış"; // Koşul sağlanırsa 'Doğru' sağlanmazsa 'Yanlış' döndürür
const sonuc = 1 > 2 ? "Doğru" : "Yanlış"; // sonuc = 'Yanlış'
Dizilerde Koşul İşlemleri
Dahili fonksiyon ile:
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.
Detaylar için buraya bakabilirsin.
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
Id Kimlik verisi
Tag a, div, i, p, input, article ...
Class Css dosyasındaki classları ifade eden alanlar
Name Inputlarda 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"
yemre class'ına sahip olan elemanlar
"[href]"
href özelliği olan elemanlar
"a[target='_blank']"
target'i _blank olan linkler
"p.active"
active class'ı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)
Örnek kullanım:
<div id="secondary" class="widget-area col-md-4" role="complementary"></div>
const div_element = document.getElementById("secondary");
Class, Tag veya Name ile HTML Elemanları Alma
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;
Id Kimlik 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, ...
 Tag içindeki kısımlar (class, href)
document.getElementById("id").getAttribute("attribute"); // Özelliğin değerini döndürür (string)
HTML Elemanının Konumunu Alma
document.getElementById("id").getBoundingClientRect();
Id Kimlik verisi
ID'si Olan Elemanları Alma
elems = article.querySelectorAll("*[id]");
ids = [];
for (let i = 0; i < elems.length; i++) {
  ids.push(elems[i].id);
}
​ID'si olan elemanları alma​
Tüm H Değerlerini Alma
document.querySelectorAll("h1, h2, h3, h4, h5, h6");
Dom Elemanını Temizleme
var elem = document.querySelector("#some-element");
elem.parentNode.removeChild(elem);
​Removing an element from the DOM with vanilla JS​
Dom Elemanın Altındaki Tüm Elemanları Temizleme
var list = document.getElementById("mList");
   while (list.hasChildNodes()) {
      list.removeChild(list.firstChild);
   }
}
var myNode = document.getElementById("foo");
while (myNode.firstChild) {
  myNode.removeChild(myNode.firstChild);
}
​Remove all child elements of a DOM node in JavaScript​
Sayfadaki URL'leri Alma
Code for URL Extraction
// URL'leri ekrana bastırma
urls = $$("a");
for (url in urls) console.log(urls[url].href);
​
// URL ve Anchor text'i renkli alma  (Chrome / Firefox)
var urls = $$("a");
for (url in urls) {
  console.log(
    "%c#" + url + " - %c" + urls[url].innerHTML + " -- %c" + urls[url].href,
    "color:red;",
    "color:green;",
    "color:blue;"
  );
}
​
// URL ve Anchor text'i alma (IE / EDGE)
var urls = $$("a");
for (url in urls) {
  console.log(
    "#" + url + " - " + urls[url].innerHTML + " -- " + urls[url].href
  );
}
​How To Extract URLs From A Website In Chrome? (No Downloads Required)​
Beklemeli İşlemler
İki farklı bekleme şekli vardır:
Bekleme Türü
Açıklama
syncronize
Bekleme anında tüm program durur
asyncronize
Bekleme anında sadece belli bir kod parçası durur
Senkronize Bekleme (Sync)
Senkronize bekleme işlemleri, yani sırayla çalışan bekleme işlemleri alttaki fonksyionlarla sağlanır:
Senkronize beklemelerde, bekleme durumunda hiç bir kod parçası çalışmaz.
setTimeout(metod, ms_gecikme, varsa_parametreler); // Gecikmeli olarak metodu başlatır
intervalID = setInterval(metod, ms_gecikme, varsa_parametreler); // Gecikmeli olarak metodu tekrarlar
clearInterval(intervalID); // Interval'ı sonlandırma
metod Fonksiyon
ms_gecikme Milisaniye türünden gecikme değeri
Örn: 1000 değer 1s'ye denk gelir
varsa_parametreleri Fonksiyonun parametreleri
Sırayla yazılarak verilir
Metod çalıştığında verilen parametreler ile çalıştırılır
Zamanlayıcı (setTimeout)
Kaynak için buraya tıklayabilirsin.
setTimeout(func, delay); // Temel kullanım
setTimeout(function() {
  alert("Hello");
}, 2000); // Fonksiyonu içeride tanımlama
setTimeout(help, 2000); // Fonksiyonu dışarıda tanımlama
setTimeout(function() {
  help(1);
  help(2);
}, 2000); // Paremetreli fonksyion kullanma
​
clearTimeout(); // Zamanlayıcıları temizleme
func Paremetresiz fonksiyon
delay Gecikme süresi (ms)
Asenktron Bekleme (Async)
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
Bu konuda hakkında yazılmış bir medium yazısına buradan erişebilirsin.
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
}
Input İşlemleri
document.getElementById(<input_id>).value = <val>
document.getElementById(<input_id>).value = <val>
document.getElementById(<button_id>).click()
<input_id> Input alanlarının id değerleri
val Girilecek değer metni
<button_id> Giriş butonu id değeri
Dosya İndirme
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
Hepsi için buraya bakabilirsin, sık kullanılanlar aşağıda listelenmiştir.
💌 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);
​Kaynak​
Objedeki Değer ile Anahtarını Bulma
function getKeyByValue(object, value) {
  return Object.keys(object).find(key => object[key] === value);
}
<div role=button> Objelerine tıklama
var e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
$button[0].dispatchEvent(e);
Latex Ayrıştırma
<script
  type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: "none" });
</script>
HTML Elemanının İçeriğini Yazdırma
function print(elem) {
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
​
    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(elem.innerHTML);
    mywindow.document.write('</body></html>');
​
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/
	mywindow.print()
}
​
elem = $("div.page-inner")[0]
print(elem)
​Print content of div​
📋 Panoya İşlemleri
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
‍🧙‍♂ Detaylı bilgi için How do I copy to the clipboard in JavaScript? alanına bakabilirsin.
VsCode Eklentileri
Eklenti
Açıklama
​Quokka.js​
Anlık derleyici ve hata ayıklama (video)
​Prettier - Code formatter​
Kod formatlama ve güzelleştirme
​JavaScript (ES6) code snippets​
Kod kısayolları
​Babel Javascript​
ES6 tipinde yazmayı sağlar
​npm Intellisese​
NPM modüllerini önerir
​jshint​
Javascript imla kontrolcüsü
​Eslint​
JS için imla kontrolcüsü
​Import Cost​
Bellek kullanımını gösterir
VsCode Nodejs için Debug Ayarı
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}\\index.js",
      "outFiles": ["${workspaceRoot}/dist/**/**/*.js"]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Current File",
      "program": "${file}",
      "outFiles": ["${workspaceRoot}/dist/**/**/*.js"]
    }
  ]
}
Harici Kaynaklar
​Wait Function​
İşlem	Seçilen
`"#yemreak"`	ID'si yemreak olan eleman
`".yemre"`	`yemre` class'ına sahip olan elemanlar
`"[href]"`	`href` özelliği olan elemanlar
`"a[target='_blank']"`	`target`'i `_blank` olan linkler
`"p.active"`	`active` class'ına sahip olan tüm p elemanları
`"*"`	Her eleman
`this`	Şuanki eleman
Değişken	Açıklama
`var`	Her şey serbest 🎉
`let`	Tekrardan tanımlanamaz, değiştirilebilir
`const`	Tekrardan tanımlanmaz ve değiştirilmez
İşlem	Açıklama
`trim()`	Boşluk, satır atlatma gibi özel karakterlerin tekrarını kaldırır
`split(<ayrıac>)`	Metni ayıraca göre parçalama
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"`
Bekleme Türü	Açıklama
syncronize	Bekleme anında tüm program durur
asyncronize	Bekleme anında sadece belli bir kod parçası durur
Eklenti	Açıklama
Quokka.js	Anlık derleyici ve hata ayıklama (video)
Prettier - Code formatter	Kod formatlama ve güzelleştirme
JavaScript (ES6) code snippets	Kod kısayolları
Babel Javascript	ES6 tipinde yazmayı sağlar
npm Intellisese	NPM modüllerini önerir
jshint	Javascript imla kontrolcüsü
Eslint	JS için imla kontrolcüsü
Import Cost	Bellek kullanımını gösterir