23 Eylül 2019 Pazartesi

Array flatMap metodu

Giriş
Array içindeki array'lere düzleştirerek erişim sağlar.

Örnek
Şöyle yaparız.
var array = [['1st', '1595', '8886'], ['2nd', '1112']],
result = array.flatMap(([_, ...a]) => a);

console.log(result);
Çıktı olarak şunu alırız [ "1595", "8886", "1112"]
Örnek
Şöyle yaparızz
const jsObjects = [
   {a: 1, b: 2}, 
   {a: 3, b: 4, c: 66}, 
   {a: 5, b: 6, c: 55, d: 66}, 
   {a: 7, b: 8, c: 12, e: 15}
];

const keys = [...new Set(jsObjects.flatMap(Object.keys))];
console.log(keys);
Çıktı olarak şunu alırız ["a","b","c","d","e"]

Örnek
Elimizde şöyle bir veri olsun
{
 ...,
 "tx_responses": [
   {
     ...
     "logs" : [
       {
         ...,
         "events": [
             {
                 "type": "coin_received",
                 "attributes": [
                     {
                         "key": "receiver",
                         "value": "somesome"
                     },
                     {
                         "key": "amount",
                         "value": "somesome"
                     }
                 ]
             },
             ...
             {
                 "type": "transfer",
                 "attributes": [
                     {
                         "key": "recipient",
                         "value": "somesome"
                     },
                     {
                         "key": "sender",
                         "value": "somesome"
                     },
                     {
                         "key": "amount",
                         "value": "somesome"
                     }
                 ]
             },
             {
                 "type": "withdraw_rewards",
                 "attributes": [
                     {
                         "key": "amount",
                         "value": "somesomesomehere"
                     },
                     {
                         "key": "validator",
                         "value": "somesome"
                     }
                 ]
             },
             ...
         ]
     }
 ],
...
En dipteki attributes key alanı "amount" olanları attribute nesnelerini almak için şöyle yaparız
return res.data.tx_responses
  .flatMap(txr => txr.logs)
  .flatMap(log => log.events)
  .filter(evnt => evnt.type === "withdraw_rewards")
  .flatMap(evnt => evnt.attributes)
  .filter(attr => attr.key === "amount");




19 Eylül 2019 Perşembe

HTML Form Tag

action alanı
action alanı form'un hangi adrese gönderileceğini belirtir. Her form için sadece bir action olabilir. Eğer "#" kullanılıyorsa açıklaması şöyle
'#' submits form action url to itself(your page url where the form resides). Mostly used for dummy purposes and same page form submissions, although there are better techniques out there.
Örnek
Şöyle yaparız.
<form action="mailto:someone@example.com">
  Email Adress:<br>
  <input type="email" name="email_address" value="" maxlength="100" />
  <br>
  <input type="submit" value="Submit" />
</form>
enc Alanı
Örnek - file upload
Şöyle yaparız
<form method="post" action="fileuploadservlet" enctype="multipart/form-data">
  <input type="file" name="file1" />
<input type="file" name="file2" />
<input type="file" name="file3" />
  <input type="submit" value="Upload" />
</form>
Bunun yerine HTML 5 + Ajax kullanmak istersek şöyle yaparız. Burada AJAX kütüphanesi olarak tarayıcıda yerleşik bulunan window.fetch kullanılıyor
<!-- HTML5 Input Form Elements -->
<input id="fileupload" type="file" name="fileupload" /> 
<button id="upload-button" onclick="uploadFile()"> Upload </button>

<!-- Ajax JavaScript File Upload Logic -->
<script>
  async function uploadFile() {
    let formData = new FormData(); 
    formData.append("file", fileupload.files[0]);
    await fetch('/fileuploadservlet', {
      method: "POST", 
      body: formData
    }); 
    alert('The file has been uploaded successfully.');
  }
</script>
Örnek - single file upload vs multiple files
Şöyle yaparız. Tek <input> var ancak birisinde multiple yazıyor
<form class="mt-3" action="upload/file/single" method="post" enctype="multipart/form-data">
<div class="form-group"> <label>User</label> <input type="text" name="user-name"><br/><br/> <label >Single</label> <input type="file" name="fileToUpload" id="fileToUpload1"> </div> <div class="form-group mt-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> <form class="mt-3" action="upload/file/multi" method="post" enctype="multipart/form-data"> <div class="form-group"> <label>Multi</label> <input type="file" name="files" id="files" multiple> </div> <div class="form-group mt-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>
method Alanı
Açıklaması şöyle. action alanı ile belirtilen adrese GET, POST Http verb'lerinden hangisini kullanarak erişmek istediğimizi belirtiriz. Varsayılan yöntem olarak POST kullanılır
<form></form> html element can only have method POST or GET:
Örnek
PUT için şöyle yaparız.
<form method="POST" ...>
  <input type="hidden" name="_method" value="PUT" />
</form>
submit Event
submit event'ine kendi kodumuzu takabiliriz.

Örnek
Şöyle yaparız
const form = document.querySelector("#your-form")
const url = "https://jsonplaceholder.typicode.com/posts"

form.addEventListener('submit', e => {
  e.preventDefault()

  const data = new FormData(e.target)
 
  fetch(url, {
    method: 'POST',
    body: new URLSearchParams(data)
  })
})
onReset metodu
Örnek
Şöyle yaparız
<form id="form" onreset="resetForm()">
  <label>Enter Text: <input type="text"></label>
  <button type="reset">Reset form</button>
</form>

function resetForm() {
  const display = document.getElementById('display');
  display.textContent = `Form Got Reset on: ${(new Date())}`;
}
onSubmit metodu
submit düğmesine tıklanınca çalıştırılacak kodu belirtir.
Örnek
Şöyle yaparız.
<form action="ac.php" onsubmit="onSubmitAction(this)">
  <input type="text" id="test">
  <input type="submit">
</form>
Form submit düğmesine tıklanınca kod şöyle çalıştırılır
function onSubmitAction(elem) {
  var test = document.getElementById('test');
  if (test.value === 'aaa') {
    elem.setAttribute('action', 'bc.php');
  }
}
Örnek
Elimizde şöyle bir HTML olsun
<form onSubmit="check(event)">
  <input id="name" class="btn" type="file" name="pic" multiple>
  <button class="btn btn-primary" type="submit" id="submit" name="submit">UPLOAD</button>
</form>
Sayfanın tekrar yüklenmemesi için event.preventDefault() çağrısı kullanılır. Şöyle yaparız
function check(event) {
  event.preventDefault();
  console.log("stopped form submit");
}
target Alanı
Açıklaması şöyle
_blank : The response is displayed in a new browser window or tab.
_self : The response is displayed in the current window. This is the default value of the Target attribute.
_parent : The response is displayed in the parent frame
_top : The response is displayed in the full body of the window
Örnek
Şöyle yaparız
<form action="/testpage.php" target="_blank">
<form action="/testpage.php" target="_self">
<form action="/testpage.php" target="_parent">
<form action="/testpage.php" target="_top">

16 Eylül 2019 Pazartesi

ES6 Destructuring

Giriş
ES6 ile geliyor. Açıklaması şöyle.
Destructuring assignment should reside inside a function where a variable should be available:
Örnek
Şöyle yaparız.
function UpdateUserProps(user, updatedUser) {
    const { email, status } = updatedUser;
    user.email = email;
    user.status = status;
    return user;
}
Örnek
Şöyle yaparız.
function example(obj, ...rest) {
    let number, str;
    if (rest.length === 2) {
        [number, str] = rest; // This is called "destructuring assignment"
    } else {
        [str] = rest;
    }
    if (typeof number === "string") {
        // Caller provided a string, not anumber, as the second
        // argument; move things around
        str = number;
        number = undefined;
    }
    console.log("obj", obj);
    console.log("number", number);
    console.log("str", str);
}
console.log('Calling example({}, 42, "forty-two");');
example({}, 42, "forty-two");
console.log('Calling example({}, "no number given");');
example({}, "no number given");