­čôť Javascript

D├╝nyan─▒n en pop├╝ler dilleri aras─▒ndan olan h─▒zl─▒ bir dil

├ľ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);
}

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);

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);
}

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ÔÇő

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