📜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

• Sayfanın en altına inmek

• Js Date İşlemleri

• Js gün işlemleri

• 10 Js Extension for Vscode

• Js throws