JavaScript Çorbası: Nisan 2019

11 Nisan 2019 Perşembe

Math Sınıfı

floor metodu
Örnek
Şöyle yaparız.

randomIndex = Math.floor(Math.random() * myarray.length);

max metodu
Elimizde şöyle bir kod olsun. Üç nokta ile Spread Syntax kullanılıyor.

var adventurers = [
  {time : 100},
  {time : 120},
  {time : 160},
  {time : 90},
  {time : 200},
]

Şöyle yaparız.

const maxVal = Math.max(...adventurers.map(o => o.time))

min metodu
Şöyle yaparız. Çıktı olarak 4 alırız.

const arr = {lst1: 300, lst2: 381, lst3: 4, lst4: 4, lst5: 49};
const lowestValue = Math.min(...Object.entries(arr)
  .map(o => o[1]));

random metodu
[0 - 1] aralığında sayı döner.
Örnek
Diziyi rastgele sıralamak için şöyle yaparız.

var as = ["max","jack","sam"];  
var s = as.sort(func);  

function func(a, b) {  
  return Math.random();
}  

console.log(s);

8 Nisan 2019 Pazartesi

for..of Döngüsü - ES6 İle Geliyor, Array, String İçin Kullanılır Elemanlar Üzerinde Yürür

Giriş
Object'in alanlarını yürümek için kullanılamaz. Array veya String elemanları üzerinde yürümek içindir.

for..of ve for..in farklı şeylerdir.

Java'da dizinin elemanları üzerinde yürümek için for..in kullanılıyor. Yani mantık tam tersi :)

Örnek
Elimizde şöyle bir dizi olsun.

var functArray = [
  function() {
    console.log("function1 executed");
  },
   function() {
    console.log("function2 executed");
  },
    function() {
    console.log("function3 executed");
  },
    function() {
    console.log("function4 executed");
  }];

Şöyle yaparız.

for (const fn of funcArray) {
    fn();
}

Örnek

Şöyle yaparız

let offsets = [
    { offset: 80, value: 4 },
    { offset: 60, value: 2 },
    { offset: 40, value: 1 },
    { offset: 20, value: 0.5 },
  ];

for (const { offset, value } of offsets) {
  ...
}

in operator

Giriş
Açıklaması şöyle.

in checks for either properties in objects or indices in an array. So it is probably returning true only when the number you are checking happens to be an index in the array.

Element Sınıfı

appendChild metodu
Şöyle yaparız.

var ul = document.getElementById("showingDeck");
var li = document.createElement("li");
li.innerHTML = ...;
li.className = 'card';
document.getElementById("showingDeck").appendChild(li);

classList Alanı
CSS ayarları için Element sınıfına class özelliği eklenir veya çıkarılır.

Örnek
Şöyle yaparız

document.getElementById('fos').addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("edit-icon")) {
    console.log(tgt.value);
  }
})

innerHTML Alanı
Ekranda gösderilen HTML'i belirtir.
Örnek
Elimizde şöyle bir kod olsun

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

p tag'i ile belirtilen nesneyi değiştirmek için şöyle yaparız.

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>

</body>
</html>

querySelector metodu
Açıklaması şöyle.

What querySelector does is it finds an element somewhere in the document that matches the CSS selector passed, and then checks that the found element is a descendant of the element you called querySelector on. It doesn't start at the element it was called on and search downwards - rather, it always starts at the document level, looks for elements that match the selector, and checks that the element is also a descendant of the calling context element. It's a bit unintuitive.

Örnek
Şöyle yaparız

const rootDiv = document.getElementById('test');
console.log(rootDiv.querySelector('div').innerHTML);