Übungsaufgaben „Ein Ratespiel mit JavaScript und jQuery“

Aufgabe 1

Erstellen Sie ein neues HTML-Dokument mit dem folgenden Inhalt:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Ein Zahlenratespiel mit JavaScript und jQuery</title>
		<link type="text/css" rel="stylesheet" media="screen" href="css/style.css" />
	</head>
	
	<body>
		<div id="block1"></div>
		<div id="block2"></div>
		<div id="block3"></div>
		
		<div id="steuern_rot">Roten Block verstecken</div>
		<div id="steuern_gruen">Grünen Block langsam ausblenden</div>
		<div id="steuern_blau">Blauen Block anzeigen</div>
	
		<div id="ratespiel">
		
			Raten Sie eine Zahl zwischen 1 und 100: <input id="eingegebeneZahl" type="number" name="ratezahl">
			<div id="absenden">Absenden</div>
			
			<div id="ausgabe"></div>
		
		</div>

		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="js/underscore-min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
	</body>
</html>

Aufgabe 2

Erstellen Sie das Stylesheet style.css und die JavaScript-Datei behaviour.js. Laden Sie anschließend die Produktivversion der JavaScript-Bibliothek underscore.js (underscorejs.org) und die derzeit aktuelle Version 2.1.4 („compressed, production“) der Bibliothek jQuery (http://jquery.com/) herunter und kopieren Sie die Dateien in Ihren Arbeitsordner.

Achten Sie darauf, dass sich alle Dateien in den richtigen Ordnern (vgl. sowohl den Kopfbereich als auch den unteren Bereich der HTML-Seite) befinden.

Aufgabe 3

Ergänzen Sie Ihre (leere) JavaScript-Datei app.js um den folgenden Code:

$(document).ready(function() { 

alert("Es funktioniert!");

});

Wenn Ihre Seite nach Aufruf im Browser ein Popup mit einer Erfolgsmeldung zeigt, funktioniert alles, wie es soll und die Vorbereitungen sind abgeschlossen (entfernen Sie bitte das alert() aus Ihrem Quelltext).

Aufgabe 4

Bearbeiten Sie Ihr Stylesheet, um die folgende Darstellung Ihrer HTML-Seite zu generieren:

uebung_jquery-screen01

Jeder Block wurde absolut positioniert, mit einer festen Breite, Höhe und Hintergrundfarbe ausgestattet. Befindet sich der Mousezeiger über den Blöcken steuern_rot, steuern_gruen oder steuern_blau, soll sich die Hintergrundfarbe entsprechend ändern und der Mousezeiger (cursor) als pointer dargestellt werden:

uebung_jquery-screen02

Aufgabe 5

Realisieren Sie das Verhalten Ihrer Webanwendung. Ergänzen Sie Ihre JavaScript-Datei app.js um die folgende Funktionalität:

  • Wird auf den Div-Container mit der ID steuern_rot mit der linken Mousetaste geklickt, so wird der Div-Container mit der ID block1 versteckt (hide).
  • Wird der Div-Container mit der ID steuern_gruen mit der linken Mousetaste angeklickt, wird der Div-Container mit der ID block2 langsam ausgeblendet (fadeOut).
  • Bei Linksklick auf den Div-Container mit der ID steuern_blau, wird der Div-Container mit der ID block3 angezeigt (show).

Aufgabe 6

Implementieren Sie ein Zahlenratespiel, um die Besucher Ihrer Website zu verzücken. Das Spiel funktioniert wie folgend:
In dem Eingabefeld (http://www.w3schools.com/html/html_forms.asp) lässt sich eine Zahl angeben, die nach einem Klick auf den Button „Absenden“ mit einem ganzzahligen Wert verglichen wird, den Sie fest in einer Variable gespeichert haben. Ist die eingegebene Zahl gleich der gesuchten Zahl, dann lassen Sie eine Erfolgsmeldung ausgeben. Ist die eingegebene Zahl größer oder kleiner als die gesuchte Zahl, so geben Sie eine entsprechende Meldung aus.

Verwenden Sie die JavaScript-Funktion parseInt(), um sicherzustellen, dass die eingegebene Zahl als ganzzahliger Wert – und nicht als Zeichenkette – betrachtet und verarbeitet wird!
Tools und Tipps: <input>, if, else if, else, $.text(), $.val()

Aufgabe 7

Verwenden Sie die JavaScript-Bibliothek underscore.js, um Ihre gesuchte Zahl zufallsgenerieren zu lassen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.