Appidé: Söka igenom böcker

Många gånger känner man för att söka igenom en bok som man läser. Men boken är i pappersformat så det går inte. Det är irriterande. Men då finns en app. Så man öppnar bara appen scannar av ISBN-koden och sedan söker man efter ett ord i boken.
Appen använder sig då av Google Books API och hittar var ordet finns. Anger sida och så.

JavaScript och Object Oriented Programming

Vad är ett objekt?

Ett objekt i Javascript är som ett objekt i verkligheten. Ett objekt består av properties. Ett fysiskt objekt består också av properties. Till exempel: objektet kopp består av handtag : 1, design: true, vikt : 1 kg. Dessa properties beskriver objektet. Ett annat vanligt exempel är objektet bil. En bil har properties dörr : 4st, motor: 1, färg: grön. Å så vidare.
Ofta pratar man om property och property value.

var myObject = {
name: "Lars", //Name är property och Lars är Property Value
age: 28
}

Hur skapar man ett objekt i Javascript?

Det finns i huvudsak två sätt att skapa ett objekt i javascript: object literal och object constructor.

Object literal ser ut såhär:

var myObject = {
name: "Lars",
age: 28
}

Constructor pattern ser ut såhär:


var Employee = function(){ 
} 

//eller såhär

function Employee(name, profession){
this.name = name;
this.profession = profession;
}

Employee är nu en Constructor-function som kan användas genom att använda keyword new. Så, för att skapa en ny emplyee. Gör du såhär:

var philip = new Employee();
//philip är nu ett nytt objekt som vi skapade från Employee-funktionen.

Hur lägger man till properties i ett objekt?

För att lägga till properties i ett objekt gör man såhär. Om man bygger vidare på exemplet som vi startat med ovan.

philip.ålder = 23;
philip.namn = "Philip";

Methods

Det finns private properties och public properties.
Objekt har sina egna funktioner, dessa kallas methods.

Tekniker för att Centrera saker

Varje

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://css-tricks.com/almanac/properties/a/align-content/
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Centrera saker i flexbox. Du sätter display å justify å sådant. Som jag skrivit nedan i en flexboxcontainer. Då kommer Sakerna som finns i den diven att centreras.

.flexboxcontainer{
width: 400px;
height: 400px;
display: flex;
flex-direction: row; /*Du kan välja mellan row och column */
justify-content: center;
align-items: center;
}

.box-inside-flexboxcontainer {
}

Horizontell centrering

Text-align

Text-align-tekniken är klassisk. Först skapar du en div-container. Denna container behöver ha en specificerad width för att det ska funka. Annars kommer den bara vara så står som innehållet i diven, å då går det ju inte att centrera.

Sedan behöver vi en div som ska centreras. Vi ger den en längd å bredd. Det viktigaste här är att komma ihåg att en div inte är en text, å en div är ett block-element, inte ett inline-element. Därför måste vi förvandla diven till ett inline-blocks-element. Det gör vi med display: inline-block. Då får diven inline-liknande egenskaper samtidigt som den är typ som ett block.

.container {
width: 500px;
text-align: center;
}

.box {
width: 100px;
height: 100px;
display: inline-block;
}

Margin-auto-tekniken

Det går helt enkelt ut på att du sätter marginalen på auto i innerdiven. Då justerar den sig automatiskt och blir därmed centrerad.

.container {
width: 500px;
}

.box {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}

Position-absolute-tekniken

Den här tekniken fungerar genom att sätta position absolute, å sedan sätta den på 50%. Detta innebär alltså att positionen är i mitten. Men eftersom diven i det här exemplet är 100px stor så innebär det att det är den vänstra sidan som är precis 50% in i container-diven. För att den ska bli helt centrerad måste vi därför justera marginalen med -50px (alltså hälften av diven storlek). Då blir den helt centrerad.

.container {
width: 500px;
}

.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}

Vertical centering

Position-absolute-tekniken

Denna teknik är besläktad med tekniken ovan med samma namn. Men det finns några viktiga skillnader. För att innerdiven inte ska flyga iväg åt tjotahejti så måste vi göra .container till position: relative. Annars så flyger innerdiven upp å lägger sig med en margin på -50px från body. Å det vill vi inte.

.container {
width: 500px;
position: relative;
}

.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}