JavaScript Çorbası

25 Haziran 2021 Cuma

Loose Equality Comparison - 2 Tane Eşittir

Giriş

Açıklaması şöyle. Farklı tiplerdeki nesnelerin eşitliğini kontrol etmek için kullanılır

The JavaScript operator == means equal after type juggling.

Nasıl Çalışır
Mantıksal olarak şuna benzer. Her iki nesneyi de string'e çevirip karşılaştırmak gibidir.

static boolean compareData(Object v1, Object v2)
{
  if(v1 != null && v2 != null)
    return (v1.getClass() == v2.getClass() && (v1.toString().equals(v2.toString())));
  else
  {
    return (v1 == null ? v2 == null : v1.equals(v2));
  }
}

Açıklaması şöyle. Eğer her iki tip de aynı ise == yavaş değildir.

== is exactly as fast as === when both operands have the same type, and there's nothing wrong with using it when you know that both operands have the same type. You only got a problem when you don't know what types the operands have.

Örnek

Şu kod true döner

'0e111' == 0

Örnek - Number ve BigInt Karşılaştırma

Şöyle yaparızz

42 == 42n  // true!

18 Haziran 2021 Cuma

Typescript Record Tipi

Giriş

Tanımı şöyle. K olarak verilen tipini - örneğin bir enum olsun - tüm değerlerinin kullanılmasını mecburi yapar.

type Record<K extends string, T> = {
    [P in K]: T;
}

Örnek

Şöyle yaparız

const SERVICES: Record<string, string> = { 
    doorToDoor: "delivery at door",
    airDelivery: "flying in",
    specialDelivery: "special delivery",
    inStore: "in-store pickup",
};

Örnek

Şöyle yaparız

type CatNames = "miffy" | "boris" | "mordred";

type CatList = Record<CatNames, {age: number}>

const cats:CatList = {
  miffy: { age:99 },
  boris: { age:16 },
  mordred: { age:600 }
}

14 Haziran 2021 Pazartesi

EventSource Sınıfı

Giriş

Tarayıcı tarafında EventSource nesnesi kullanılır. constructor(), close(), onopen (), onerror(), onmessage(), addEventListener() metodları vardır

addEventListener metodu

Örnek
Şöyle yaparız

// Handler for events of type 'eventType' only
eventSource.addEventListener('eventType', (e) => {
   // Do something - event data will be in e.data,
   // message will be of type 'eventType'
});

onerror metodu

Örnek

Şöyle yaparız

this.eventSource = new EventSource(...);

this.eventSource.onerror = (error) => {
  console.info("SSE : Connection Lost", error);
  ...
};

onmessage metodu

Örnek
Şöyle yaparız

// Declare an EventSource
const eventSource = new EventSource('http://some.url');

// Handler for events without an event type specified
eventSource.onmessage = (e) => {
   // Do something - event data etc will be in e.data
};

Örnek

Şöyle yaparız

<body>
  <script type="application/javascript">
    var subscribeEvents = function() {
      var key = $("#key").val();
      var eventSource = new EventSource('/sse/receive');
      eventSource.onmessage = function(e) {
        var notification = JSON.parse(e.data);
        if(key == notification.key){
          ...
        }
      };
    }
    window.onload = subscribeEvents;
    window.onbeforeunload = function() {
      eventSource.close();
    }
  </script>
</body>

onopen metodu

Örnek

Şöyle yaparız

this.eventSource = new EventSource(...);

this.eventSource.onopen = () => {
  console.info("SSE : Connection OPEN");
  ...
};

this.eventSource.onerror = (error) => {
  console.info("SSE : Connection Lost", error);
  ...
};

27 Nisan 2021 Salı

HTML Iframe Tag

Giriş

Açıklaması şöyle

iFrame provides “sandboxing” to isolate content of the embedded frame from the parent web page, thus ensuring that information is not accessible or cannot be manipulated through various exploits by malicious individuals.

iframe içindeki Bağlantı

Açıklaması şöyle. Yani iframe kendi bağlantısını yapar

While it may seem natural to think that if one page visually envelops another, there may be something similar happening with the underlying connections, this is not the case.

Your browser creates distinct HTTPS connections to host1 and host2, and both in (more-or-less) the same manner.

Örnek

Şöyle yaparız

<iframe width="420" height="315" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
</iframe>

28 Mart 2021 Pazar

Açıklaması şöyle. Burada NaN kullanımı diğer programlama dillerinden farklılaşıyor. Sadece bit eşitliğine bakılıyor. IEEE 754 - Nan - Matematiksel Olarak Hesaplanamayan Bir Durumda Ortaya Çıkar yazısına bakabilirsiniz. Normalde aritmetik bir işlemin sağ veya sol tarafında NaN varsa sonucun da NaN çıkması gerekir

Same-value-zero equality similar to same-value equality, but +0 and −0 are considered equal.

Örnek
Şöyle yaparız
> [NaN].includes(NaN) true
Örnek

Şöyle yaparız

const x = NaN, y = NaN;
console.log(x == y); // false                -> using ‘loose’ equality
console.log(x === y); // false               -> using ‘strict’ equality
console.log([x].indexOf(y)); // -1 (false)   -> using ‘strict’ equality
console.log(Object.is(x, y)); // true        -> using ‘Same-value’ equality
console.log([x].includes(y)); // true        -> using ‘Same-value-zero’ equality

15 Şubat 2021 Pazartesi

WebSocket Sınıfı

constructor

Şöyle yaparız

// Create a new WebSocket
let socketConnection = new WebSocket('ws://websocket.mysite.com');

constructor - subprotocol

Şöyle yaparız

// Create a new WebSocket with subprotocols
let socketConnection = new WebSocket('ws://websocket.mysite.com', ['soap', 'xmpp']);

onX metodu

Şöyle yaparız

// When the connection is open, some data is sent to the server
socketConnection.onopen = function () {
  connection.send('Hello, the socket connection is open!'); // Send a message to the server
};

// Log errors
socketConnection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

// Log messages from the server
socketConnection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};

22 Aralık 2020 Salı

Hoisting

Giriş

Hoisting kaldırma/yükseltme anlamına gelir. Javascript diline mahsus bir kavram, C++,Java gibi dillerde bulunmaz. Kısaca değişkenlerin ve metodların kodda bulunduğu yerden en üst satıra Javascript engine tarafından taşınması gibi düşünülebilir.

Bir açıklama şöyle.

... variables and functions in JavaScript are hoisted or moved to the top by the JavaScript engine, as if they were moved physically, up to the top so that they work no matter where you put them.

Örnek

Şöyle yaparız

console.log(x);  // undefined
var x = 5;