gis_lösungen.md

GIS Übung

##HTML

1.) Erläutern sie was ihrer Meinung vom Aufruf einer Internet Seite (bspw. http://google.de) bis zum Darstellen der Seite in ihrem Browser, der Browser an Arbeit erledigt?

DNS Resolve (Adresse in IP umwandeln), Webserver generiert HTML Seite, Browser parst Seite, läd alle Resourcen im Head Teil der Seite (JS, CSS Dateien) und führt diese aus, stellt Seite dar und läd sucessive alle anderen Resourcen(Bilder, JS, CSS) und asynchrone JS Datein (<script src="…" async></script>) im Head Teil. __ Deshalb unwichtiges JS und CSS nicht in den HEAD der Seite__

2.) Beschreiben sie den Unterschied zwischen einer GET und POST Anfrage

GET: ganz normaler HTTP Aufruf, Daten können in der URL (?hey=du&ect=1) transportiert werden. POST: Daten werden im Body des Requests transportiert. POST immer für Formulare verwenden! Hat den Vorteil das die übertragenen Daten bspw. nicht in Serverlogs laden weil dort meist nur die URL gelogt werden. Mit HTTPS werden Daten im Body verschlüsselt, können daher nicht ohne weiteres abgegriffen werden, Daten in der URL sind immer Sichtbar! Weitere HTTP Methoden: OPTION, PUT, DELETE Request. (weiterführende Literatur unter dem keyword "HTTP REST")

3.) Sie haben eine einfache Grafik die sie auf einer Website darstellen wollen. Welche Möglichkeiten haben sie dafür?

als : png, jpg, gif als Grafik

4.) Ordnen sie denn verschiedenen Beispielen die geeignete Technologien(HTML, CSS, JS, PHP) zu: - Eine Blog Detail Seite zeigt Artikel die in der Datenbank gespeichert sind. PHP - Der erste Buchstabe jedes Paragraphen des Blog Artikels soll groß geschrieben werden CSS - Teile des Artikels lassen sich dynamisch ein und ausblenden JS - Am Ende des Artikels sollen weitere Artikel in einer Liste dargestellt werden HTML

5.) Erläutern sie in ihren eigenen Worten welchen Zweck die jeweilige Technologie erfüllt und warum eine Trennung bspw zwischen HTML und CSS sinnvoll ist.

Modularität, Wartbarkeit, Wiederverwendbarkeit

6.) Welchen Wert sollte eine Webserver im Header der Antwort zurück senden wenn die angeforderte Seite nicht gefunden wurde?

404 - Not Found

CSS

1.) Schreiben sie das HTML Markup um eine CSS Datei mit dem Namen xxx.css einzubinden

<link rel="stylesheet" href="xxx.css" />

2.) Was ist der Unterschied zwischen Id's und Klassen in CSS?

Id´s müssen einzigartig sein(einmalige Benutzung), mit Klassen kann ich style Regeln mehrmalig benutzen.

3.) Beschreiben sie die CSS Eigenschaft float und wie arbeitet sie?

Keine Lust :D

4.) Beschreiben sie die CSS Eigenschaft z-index und ihr Verhalten?

Mit z-index lassen sich Elemente nicht nur in x und y sondern zusätzlich in Z Richtung (davor und dahinter) anordenen.

5.) Erläutern sie den Unterschied zwischen den CSS Eigenschaften padding und margin

Padding definiert den InnenAbstand zwischen Box und Inhalt, Margin den AußenAbstand von Box zur nächsten Box

6.) Beschreiben sie 3 Wege wie sie Inhalte mit Hilfe von CSS nichtsichtbar machen können.

display:none, opacity:0, visibility:hidden;

7.) Beschreiben sie die CSS Techniken für Responsive Design.

MediaQueries, relative Massangaben(%, rem, em, …)

8.) Beschreiben sie den Unterschied zwischen Relativ, Fixed und Absoluter Positionierung.

Relativ: Positionierung zum Parent Element, Absolut: Positionierung zum Dokument, Fixed: Positionierung zum Browser Fenster

9.) Was ist unter einem vendor prefix zu verstehen und welchen Zweck erfüllen sie?

Browser Hersteller(vendor) benutzen prefixe wenn ihre Implementation (bspw. -webkit-box-shadow) noch nicht dem CSS Standard entsprechen.

JS

1.) Was ist der Unterschied zwischen folgenden JS Zeilen:

a = 1;
var a = 1;

Variable ist im globalen Kontext gültig, Variable ist nur in der aktuellen Funktion(aktuellem Funktion Scope) gültig.

function(){
var a = 1;
console.log(a); //=> 1
}
console.log(a); //=> undefined

jedoch besitzt js kein Block Scoping im vergleich zu java

if(true){
	int i = 1;
}

/* i ist hier nicht definiert */

2.) Definieren sie Funktion die ihre ersten beiden Argumente in einem Array zurück gibt.

js function s(x,y){ return [x,y]; }

3.) Verändern sie die Funktion so das sie ihre erste beiden Argumente in einem Object zurück gibt.

js function s(x,y){ return {x:x,y:y}; } 4.) Geben sie zwei Möglichkeiten an wie sie das folgende Element mithilfer des DOM´s selektieren können

<div class="ach" id="herje"></div>

document.getElementById('herje');
document.getElementsByClassName('ach');
document.querySelector('#herje');
document.querySelectorAll('.ach');

5.) Zeigen sie die aktuelle Uhrzeit im Div der Aufgabe 18 an im Format mm:hhUhr

var e = document.getElementById('herje'),
    now = new Date();
e.innerHTML = now.getHours() +':' +now.getMinutes();
//alternativ
e.innerHTML = [now.getHours(), now.getMinutes].join(':');

6.) Erläutern sie die Aussage "JS ist eine Event Basierte Sprache".

In JS lässt es sich auf User Events hören(click, submit, mousemove) (, JS läuft an sich in einem Event Loop im Vergleich);

7.) Markieren sie im folgenden alle Syntax Fehler mit einem Grünweiß gestreiften Stift:

if (Hans.imGLück() === 1)
	console.log('Klasse Hans")
elseif ( true ){
	var 	a1 = function(){}(),
		1b = "Wenn ich mal groß bin" 
}

var b = 1 + "0";
var c = 1 & 0;
var d = 3 ||||||| 5;

___Lösung:___Anführungszeichen bei 'console.log', 'elseif' wird getrennt geschrieben, 'function(){}()' ist nicht valide, '3 |||||||' 5 ist quatsch

9.) Setzen sie die Funktionalität des folgenden JavaScript Code Schnippsel ohne jQuery um

$('#atzen').css('display', 'block').html('stinken vom Bauch ab');

var e = document.getElementById('#atzen'); 
e.style.display = 'block'; 
e.innerHTML = 'stinken vom Bauch ab';