Zukunftstag 28.04.2016

HTML, die Sprache der Webseiten
CSS, ihr Make-Up
Javascript, ihr Motor
jQuery, coole Moves
Das Spiel

HTML

Die Sprache des Internets

Alle Seiten im Internet sind in HTML geschrieben.
HTML ist eine Auszeichnungssprache.
Ein Text besteht aus verschiedenen Bestandteilen wie z.B.
- Seitenkopf
- Seitenkörper, z.B. mit
  - Titel
  - Paragraph mit Text
  - Bild

Das HTML Grundgerüst

<!DOCTYPE html><html lang=de> <head> <title> Hier kommt Admin-Kram hin: Seitentitel, Scripte, CSS </title> </head> <body> Hier kommt das Zeug hin was man später auf der Webseite sieht </body>

Das HTML für unser Spiel

<!DOCTYPE html><html lang=de> <head> <meta charset="utf-8"> <title>Mein erstes sebstgeschriebenes Spiel</title> <script src="jquery.min.js">  </script> <style>  </style> </head> <body> <img id="vader" src="vader.png"> </body></html>

Ein paar Tags zum Rumspielen

<p> Eigener TextText für den Abschnitt (Paragraphen) <p><ul> <li>Listenelement 1 <li>Listenelement 2 </ul><img src="bildname.jpg">

CSS

Das Make-Up des Internets

HTML ist nur eine Auszeichnungssprache, das heißt es erzählt dem Browser nur "das ist eine Überschrift", und "das ist ein Text". Aber es sagt nicht wie diese Elemente auszusehen haben.

Diesen Part übernimmt CSS.

Mit CSS kann man sich die HTML-Tags schnappen und ändern

z.B. den Hintergrund der Seite einfärben:

body {
  background-color: lightblue;
}

Oder den Hintergrund des divs mit der id="vader"

#vader {
  background-color: red; 
}

Wo schreibt man das CSS hin?

CSS kann zum Beispiel auf der Webseite stehen, eingeschlossen in die <style>-Tags:

<style>

body {

  background-color: lightblue;

}

#vader {


  background-color: palegreen;

}
</style>

Etwas CSS zum rumspielen

// Alle p-Tags
p {
  background-color: red;
  font-style: italic;
  font-weight: bold;
}
// das p-Tag mit der ID "besonders" (<p id="besonders">Besonderer Text</p>)
#besonders {
  font-size: 70%;
  color: blue;
}

JavaScript

Der Motor des Internets

Mit JavaScript können sich die (Web)Seiten verändern während man sie anschaut.

JavaScript schreibt man innerhalb des<script></script> Tags.

Funktionen einbinden

Meist benutzt man eine sogenannte Library - eine Sammlung von Funktionen in einer Datei. Wenn man diese Datei in die eigene Webseite einbindet kann man deren Funktionen nutzen.

jQuery Einbinden

jQuery ist eine der populärsten JavaScript-Libraries. Nachdem man die jQuery-Datei aus dem Internet heruntergeladen hat kann man sie im Header seiner Webseite einbinden.<script src="jquery.min.js "></script>

Das Wichtigste beim Programmieren

Computer sind total pingelig!!! Leerzeichen an der falschen Stelle oder ein Groß- statt eines Kleinbuchstaben kann das Programm kaputt machen.

Ein guter Teil der Zeit beim Programmieren geht mit Debugging drauf.

Debugging bei der Webprogrammierung

Im Firefox-Menü unter "Entwicklerwerkzeuge" "Webkonsole" aufrufen.

Dann erscheint ein Fenster unter der Webseite in der man mit der Webseite interagiern (sprechen) kann.

Das Handwerkzeugs von jQuery (und den meisten anderen Sprachen)

Werte können in Variablen gespeichert und verändert werden
Mit Schleifen können Aktionen mehrfach ausgeführt werden
Es können entweder/oder Abfragen gemacht werden
Es gibt vordefinierte Funktionen
Mehrere verschiedene Aktionen können in Funktionen zusammengefasst werden

Vordefinierte Funktionen

(zum Ausprobieren )

alert("Hallo Welt");

1+3;

Variable (zum Ausprobieren)

var ergebnis = 3;alert(ergebnis); ergebnis = 5;alert(ergebnis);

Schleife (zum Ausprobieren)

for (var i = 0; i < 3; i++) { alert("Hallo, ich mache alles mehrfach");}

Abfrage (zum Ausprobieren)

var ergebnis = 1;if (ergebnis == 1) { alert("Stimmt!");} else { alert("Stimmt nicht!");}

Funktion (zum Ausprobieren)

var sagsMir = function () { var ergebnis = 1+3; alert("Ich sage"); alert(ergebnis);} sagsMir();

jQuery

Stellt eine ganze Reihe nützlicher Funktionen zur Verfügung

Vor allem zum Verändern von Seitenelementen

Spezielle jQuery Funktionen

$("p").css("background-color","blue");
$("p").html("hallo Leute");
$("p").append("
Und hier kommt noch mehr Text
");

Ausführen nachdem alle Elemente geladen sind

$(document).ready(function() {
// Das hier wird getan nachdem die Seite geladen ist
});

Beschreibung des Spiels

Darth Vader erscheint irgendwo auf dem Bildschirm.
Wenn er mit dem Lichtschwert in einer bestimmten Zeit geschlagen wird erscheint woanders wieder und das Spiel geht weiter
Wenn es nicht rechtzeitig geschlagen wird, gewinnt er und wird riesig
Zum Beispiel so:

Was brauchen wir? Die Basis

Das Bild von Darth Vader
Das Bild vom Lichtschwert als Cursor
Darth Vader an einer bestimmten Position

Das Bild (mit HTML):

<img src="vader.png" id="vader">

Der Cursor, Hintergund und Schriftfarbe (mit CSS)

body {
background-color: Midnightblue;
cursor: url("lightsaber.png"),auto;
color: white;
}

Die Position von Vader mit jQuery setzen

$("#vader").css({
  "top":"100px", 
  "left":"100px"
});

Halt! Es soll ja ein zufälliger Ort auf dem Bildschirm sein!

x-Wert: Math.random()*window.innerWidth/2
y-Wert: Math.random()*window.innerHeight/2

und jetzt mit jQuery an zufälligen Ort setzen:

$("#vader").css({
  "left": Math.random()*window.innerWidth/2,
  "top": Math.random()*window.innerHeight/2
});

Vader nach einer bestimmten Zeit woanders hinsetzen

	      
		var spiele = function() {
		
		  // Vader versetzen
		  $("#vader").css({
		    "left": Math.random()*window.innerWidth/2,
		    "top": Math.random()*window.innerHeight/2
		  });
		  
		  // Funktion nach 1000 Millisekunden wieder aufrufen
		  setTimeout( function() {
		    spiele();
		  }, 1000);

		};

Aber wir wollen Vader ja nur versetzen, wenn wir weniger als 1 Sekunde gebraucht haben um ihn zu schlagen!

Also brauchen wir eine Stopuhr

Die Stopuhr zählt runter. Wenn Vader angeklickt wird wird sie neu gestartet und Vader versetzt, ansonsten wird das Spiel beendet.

	      
		var stopuhr;
		var spiele = function() {
		  // Versetze Vader und starte Stopuhr neu
		}
		var beendeSpiel = function() {
		  // Beende das Spiel
		}

Funktion zum Spielen

	      
		var stopuhr;

		var spiele = function() {

		  // Beende die alte Stopuhr (falls vorhanden)
		  clearTimeout( stopuhr );

		  // Versetze Vader
  		  $("#vader").css({
		    "left": Math.random()*window.innerWidth/2,
		    "top": Math.random()*window.innerHeight/2
		  });      
		  // Starte Stopuhr neu
		  stopuhr = setTimeout( function() { beendeSpiel }, 1000 );
		}

Funktion zum Beenden des Spiels

	      
		var beendeSpiel = function() {

		  // lasse Vader verschwinden
		  $("#vader").css({
		    "visibility": "hidden"
		  });

		  // schreibe Meldung
		  $("body").html("Du hast verloren!");
		}

Spiel erst starten, wenn Vader das erste Mal angeklickt wird

	      
		$("#vader").click( function() {
		  spiele();
		});

Viel Spaß beim Programmieren!

Zukunftstag 28.04.2016 – HTML – Die Sprache des Internets

subugoe-zukunftstag