Strängar
&
Element

ES6

ES6

JavaScript heter ECMAScript

European Computer Manufacturers Association: de som tar hand om språket

ES6 "släpptes" 2009, blev upplockat av webbläsare runt 2015 och har nu börjat få bra stöd

Man brukar prata om ES5/ES6 då det var i den övergången det skedde mest förändringar

ES6 Features

• let/const
• Arrow functions =>
• for...of
• Template literals / Template strings
• Destructuring
• Default + Rest + Spread
• + massa annat

let/const

const a = "I AM CONSTANT";
if(true){
  // Only exists in 'if'
  let a = 5;    
}

let förhåller sig även till block scope

Arrow function

Ett kompaktare sätt att skriva anonyma funktioner

En vanlig funktioner binder om this

Arrow function behåller this

const myArrow = () => {
  console.log("Hello");
}

Den vanligaste typen vi använder

const string = "hello world";
const string = 'hello world';

JavaScript kan konvertera strängar till HTML

JavaScript gör ingen skillnad på " och '

Template literals

const string = `Hello World`;
const name = `Jesper`;
const output = `Hello ${name}`;

När du vill ha ett värde i en sträng: ${}

`backticks` används, var noga med vilket håll de pekar

Underlättar arbetet med DOMen

const output = document
  .getElementById('output');
const name = `Jesper`;
output.innerHTML = `<p>My name is ${name}<p>`;

Kan hantera linebreaks

const output = document
  .getElementById('output');
const name = `Jesper`;
output.innerHTML = `
  <div>
    <p>My name is ${name}<p>
  </div>`;

String methods

• .substr() / .substring()
• .slice()
• .split()
• .includes()
• .repeat()
• .charAt()
• .replace()

Strings är i stort sett en array

Enklaste sättet att manipulera en sträng är att använda de inbyggda funktionerna eller konvertera till en array

const myString = `Hello you`;
myString.split(''); // ["H", "e", "l", "l", "o", " ", "y", "o", "u"];

När du har en array kan du manipulera ytterligare

Array methods

• .split()
• .join()
• .contains()
• .sort()
• .slice() / .splice()
• .find()

HTMLCollection

HTMLCollection är "array-like"

Vilket betyder att array-metoder inte fungerar på en sådan samling

const pTags = document
  .getElementsByTagName('p');
const converted = Array.from(pTags);
converted.pop();

.innerHTML

.innerHTML tar en sträng och konverterar det som kan konverteras till HTML

Bra för större kodblock men ersätter alltid allt i elementet

const output = document
  .getElementById('output');
output.innerHTML = `
  <div>
    <p> Hej </p>
  </div>`;

const data = `
  <div>
    <p> Hej </p>
  </div>`;
output.insertAdjacentHTML('beforeend', data);

Första argumentet är på vilken plats som koden ska läggas in: 'beforebegin, 'afterbegin', 'beforeend', 'afterend'

Så fort vi lägger till något i HTML med så tappas koplingen mellan variabel och DOM.

Lägger vi till något dynamiskt måste vi även binda events till detta element dynamiskt

Ibland är det lättare att ersätta större HTML-block än att försöka lägga in värden på en specifik plats