jQuery Archive - */lehre

1. Februar 2016 by Jan 0 comments

Starthilfen zum Memory-Spiel

Ein Array erstellen:

var karten = [];

1	var karten = [];

Elemente an das Array anfügen:

karten.push(...);

1	karten.push(...);

Elemente des Arrays mit Underscore.js zufällig anordnen:

karten = _.shuffle();

1	karten = _.shuffle();

Angeklicktes Element zwischenspeichern:

var angeklickt = $(this).children('img');

1	var angeklickt = $(this).children('img');

18. Januar 2016 by Jan 0 comments

jQuery Mobile: Sicherheitsprobleme in Chrome & Co. umgehen

Wird eine mit jQuery Mobile erstellte Webanwendung in Chrome geöffnet, verbietet Chrome mitunter die Ausführung wichtiger JavaScript-Anweisungen und bricht die Verarbeitung mit folgender Fehlermeldung ab: Uncaught SecurityError: Failed to execute ‚replaceState‘ on ‚History‘: A history state object with URL ‚[…]‘ cannot be created in a document with origin ’null‘ and URL ‚[…]‘. Um Chrome –…

5. Januar 2016 by Jan 0 comments

Meilenstein II – JavaScript und jQuery

Erstellen Sie in Ihrem eine weitere Website auf Grundlage Ihres Meilenstein-Layouts, auf der Sie die folgenden Aufgaben bearbeiten: Aufgabe 1 – Theorie um JavaScript Bitte beantworten Sie die folgenden Fragen auf Ihrer Website: 1. Wer interpretiert Ihre JavaScript-Skripten? Das Betriebssystem des Client-Rechners oder Der Web-Server oder Der Web-Browser oder alle Drei 2. Wie lassen sich…

14. Dezember 2015 by Jan 0 comments

Ein Adventskalender mit HTML, CSS, JavaScript und jQuery

Für einen basalen Adventskalender braucht’s ein wenig Markup, ein paar Stildefinitionen – und ein paar Zeilen Code: index.htm

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Weihnachtskalender</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>

    <div id="kalender"></div>
    <script src="js/jquery.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<head>

<title>Weihnachtskalender</title>

</head>

<body>

</body>

</html>

style.css

#kalender {

    width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    text-align: center;
}

body {

    padding: 0;
    margin: 0;
}

.tuerchen {

    float: left;
    margin: 15px;
    width: 200px;
    height: 200px;
    background-color: lightblue;
    cursor: pointer;

    /* CSS 3 Animation */
    transition: box-shadow 1s ease;
}

.tuerchen:hover {

    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.75);
}

.tuerchen img {

    width: 200px;
    height: 200px;
    display: none;
}

.number {

    font-size: 21px;
    font-weight: bold;
    margin-top: 85px;
    font-family: helvetica;
    color: #555;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

#kalender {

width: 1400px;

margin-left: auto;

margin-right: auto;

margin-top: 50px;

text-align: center;

}

body {

padding: 0;

margin: 0;

}

.tuerchen {

float: left;

margin: 15px;

width: 200px;

height: 200px;

background-color: lightblue;

cursor: pointer;

/* CSS 3 Animation */

transition: box-shadow 1s ease;

}

.tuerchen:hover {

box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.75);

}

.tuerchen img {

width: 200px;

height: 200px;

display: none;

}

.number {

font-size: 21px;

font-weight: bold;

margin-top: 85px;

font-family: helvetica;

color: #555;

}

app.js

/*
 Blaupause für Türchen:
 <div class="tuerchen">
    <img src="img/2.jpg">
 </div>
*/

// ToDo: 24 Türchen dynamisch generieren, d.h.
// an #kalender anfügen

// for-Schleife -> Kontrollstruktur
// Führe etwas so lange aus, wie etwas der Fall ist
/*
    for (Initialisierung; Bedingung; Inkrementierung) {
        Schleifenrumpf -> Was soll gemacht werden?
    }
*/
for (var i = 1; i <= 24; i++) {

    // i++ (Inkrement), ist dasselbe wie i = i + 1
    console.log(i);

    /* Vorlage:
     <div class="tuerchen">
        <img src="img/*.jpg">
     </div>
     */
    $('#kalender').append(
        '<div class="tuerchen">' +
        '<div class="number">' + i + '</div>' +
        '<img src="img/' + i + '.jpg">' +
        '</div>'
    );
}

// Jedes Türchen mit dem Klick-Ereignis ausstatten
$('.tuerchen').bind('click', function() {

    // this -> das angeklickte Seitenelement
    // children() -> gehe eine Ebene tiefer
    $(this).children().show();
    $(this).children('.number').hide();
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

/*

Blaupause für Türchen:

</div>

*/

// ToDo: 24 Türchen dynamisch generieren, d.h.

// an #kalender anfügen

// for-Schleife -> Kontrollstruktur

// Führe etwas so lange aus, wie etwas der Fall ist

/*

for (Initialisierung; Bedingung; Inkrementierung) {

Schleifenrumpf -> Was soll gemacht werden?

}

*/

for (var i = 1; i <= 24; i++) {

// i++ (Inkrement), ist dasselbe wie i = i + 1

console.log(i);

/* Vorlage:

</div>

*/

$('#kalender').append(

'<div class="tuerchen">' +

'<div class="number">' + i + '</div>' +

'<img src="img/' + i + '.jpg">' +

'</div>'

);

}

// Jedes Türchen mit dem Klick-Ereignis ausstatten

$('.tuerchen').bind('click', function() {

// this -> das angeklickte Seitenelement

// children() -> gehe eine Ebene tiefer

$(this).children().show();

$(this).children('.number').hide();

});

9. Dezember 2015 by Jan 0 comments

Vervollständigung des Zahlenratespiels

Die vollständige Funktionalität unseres Ratespieles wird durch den folgenden JavaScript-Code implementiert:

// Eine eigene Funktion
// Intention: Eine Zahl mit 5 multiplizieren

/*
	funktionsname(parameter, argumente) {
		
		// Funktionsrumpf --> Was soll die Funktion leisten?
	}
*/
function multipliziere(eingabeWert) {
	
	// Eine Variable deklarieren
	var multiplikator;
	// Variable initialisieren
	multiplikator = 5;
	var ergebnis = 0;
	ergebnis = eingabeWert * multiplikator;
	return ergebnis;
}

// ToDo I: Zwei beliebige Zahlen dividieren
// ToDo II: Funktionsrumpf auf eine Zeile / Anweisung reduzieren
function dividiere(zahl, dividend) {
	
	return (zahl / dividend);
}

//alert( multipliziere(42) );
//alert( dividiere(23, 3) );


$(document).ready(function() { 
	
	// Div-Container mit der ID "block3" auswählen
	$("#block3").hide();
	
	// Block anklickbar gestalten
	$("#steuern_rot").click(function() {
		
		// Wenn angeklickt, dann...
		$("#block1").hide();
		// # -> ID
		// . -> Klassen / class
	});
	
	$("#steuern_blau").click(function() {
		
		$("#block3").show();
	});
	
	$("#steuern_gruen").click(function() {
		
		$("#block2").fadeOut(3000);
	});
	
	// Ratezahl zufallsgenerieren
	var rateZahl = _.random(1, 100);
	
	// *** Ratespiel ***
	$("#absenden").click(function() {
		
		var eingabeZahl;
		eingabeZahl = $("#eingegebeneZahl").val();
				
		eingabeZahl = parseInt(eingabeZahl);
		
		// Kontrollstruktur: if-Abfrage
		// == -> logischer Vergleich
		// === -> strikter logischer Vergleich
		if (rateZahl === eingabeZahl) {
			$("#ausgabe").text("Glückwunsch!");
		} else if (rateZahl > eingabeZahl) {
			$("#ausgabe").text("Die eingegebene Zahl ist kleiner.");
		} else {
			$("#ausgabe").text("Die eingegebene Zahl ist größer.");
		}
		
	});
	
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

// Eine eigene Funktion

// Intention: Eine Zahl mit 5 multiplizieren

/*

funktionsname(parameter, argumente) {

// Funktionsrumpf --> Was soll die Funktion leisten?

}

*/

function multipliziere(eingabeWert) {

// Eine Variable deklarieren

var multiplikator;

// Variable initialisieren

multiplikator = 5;

var ergebnis = 0;

ergebnis = eingabeWert * multiplikator;

return ergebnis;

}

// ToDo I: Zwei beliebige Zahlen dividieren

// ToDo II: Funktionsrumpf auf eine Zeile / Anweisung reduzieren

function dividiere(zahl, dividend) {

return (zahl / dividend);

}

//alert( multipliziere(42) );

//alert( dividiere(23, 3) );

$(document).ready(function() {

// Div-Container mit der ID "block3" auswählen

$("#block3").hide();

// Block anklickbar gestalten

$("#steuern_rot").click(function() {

// Wenn angeklickt, dann...

$("#block1").hide();

// # -> ID

// . -> Klassen / class

});

$("#steuern_blau").click(function() {

$("#block3").show();

});

$("#steuern_gruen").click(function() {

$("#block2").fadeOut(3000);

});

// Ratezahl zufallsgenerieren

var rateZahl = _.random(1, 100);

// *** Ratespiel ***

$("#absenden").click(function() {

var eingabeZahl;

eingabeZahl = $("#eingegebeneZahl").val();

eingabeZahl = parseInt(eingabeZahl);

// Kontrollstruktur: if-Abfrage

// == -> logischer Vergleich

// === -> strikter logischer Vergleich

if (rateZahl === eingabeZahl) {

$("#ausgabe").text("Glückwunsch!");

} else if (rateZahl > eingabeZahl) {

$("#ausgabe").text("Die eingegebene Zahl ist kleiner.");

} else {

$("#ausgabe").text("Die eingegebene Zahl ist größer.");

}

});

2. Dezember 2015 by Jan 0 comments

Stand der Dinge am Ende der Sitzung: Vorbereitung des Ratespiels

Das vorbereitete Zahlenratespiel findet sich im folgenden Zip-Archiv: 2015-11-30_awb_ratespiel. app.js

/* Funktionalität unserer Webanwendung */

// Objekt: document
// Funktion: write
// document.write("Hallo Welt!");
// Funktionen: Funktionsname(Argument/e|Parameter);
// alert("Ich bin ein wunderschönes Popup!");

// Wähle mit der JavaScript-Bibliothek jQuery
// das document-Objekt aus und stelle sicher,
// dass unsere Seite vollständig geladen wurde.
$(document).ready(function() { 

	// Hier notieren wir unsere JavaScript-Anweisungen
	// alert("Es funktioniert!");
	
	// $(), alternativ: jQuery()
	// Was möchten wir ansteuern?
	
	// Verstecke den blauen Block
	// CSS: display: none;
	$("#block3").hide();
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

/* Funktionalität unserer Webanwendung */

// Objekt: document

// Funktion: write

// document.write("Hallo Welt!");

// Funktionen: Funktionsname(Argument/e|Parameter);

// alert("Ich bin ein wunderschönes Popup!");

// Wähle mit der JavaScript-Bibliothek jQuery

// das document-Objekt aus und stelle sicher,

// dass unsere Seite vollständig geladen wurde.

$(document).ready(function() {

// Hier notieren wir unsere JavaScript-Anweisungen

// alert("Es funktioniert!");

// $(), alternativ: jQuery()

// Was möchten wir ansteuern?

// Verstecke den blauen Block

// CSS: display: none;

$("#block3").hide();

});

style.css

/* Unsere Stildefinitionen */

body {
	font-family: Arial;
	font-size: 12px;
}

#block1 {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 250px;
	height: 75px;
	background-color: red;
}

#block2 {
	position: absolute;
	left: 280px;
	top: 15px;
	width: 250px;
	height: 75px;
	background-color: green;
}

#block3 {
	position: absolute;
	left: 545px;
	top: 15px;
	width: 250px;
	height: 75px;
	background-color: blue;
}

#steuern_rot, #steuern_gruen, #steuern_blau {
	position: absolute;
	top: 115px;
	left: 15px;
	padding: 25px;
	width: 75px;
	height: 50px;
	background-color: #ccc;
	cursor: pointer;
}

#steuern_rot:hover {
	background-color: red;
}

#steuern_gruen {
	left: 280px;
}

#steuern_gruen:hover {
	background-color: green;
}

#steuern_blau {
	left: 545px;
}

#steuern_blau:hover {
	background-color: blue;
}

#ratespiel {
	position: absolute;
	top: 300px;
	left: 15px;
	height: 75px;
	width: 610px;
	padding: 25px;
	background-color: #cec;
}

#absenden {
	background-color: #ccc;
	border: 1px solid #333;
	width: 55px;
	padding: 3px;
	display: inline;
	cursor: pointer;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

/* Unsere Stildefinitionen */

body {

font-family: Arial;

font-size: 12px;

}

#block1 {

position: absolute;

left: 15px;

top: 15px;

width: 250px;

height: 75px;

background-color: red;

}

#block2 {

position: absolute;

left: 280px;

top: 15px;

width: 250px;

height: 75px;

background-color: green;

}

#block3 {

position: absolute;

left: 545px;

top: 15px;

width: 250px;

height: 75px;

background-color: blue;

}

#steuern_rot, #steuern_gruen, #steuern_blau {

position: absolute;

top: 115px;

left: 15px;

padding: 25px;

width: 75px;

height: 50px;

background-color: #ccc;

cursor: pointer;

}

#steuern_rot:hover {

background-color: red;

}

#steuern_gruen {

left: 280px;

}

#steuern_gruen:hover {

background-color: green;

}

#steuern_blau {

left: 545px;

}

#steuern_blau:hover {

background-color: blue;

}

#ratespiel {

position: absolute;

top: 300px;

left: 15px;

height: 75px;

width: 610px;

padding: 25px;

background-color: #cec;

}

#absenden {

background-color: #ccc;

border: 1px solid #333;

width: 55px;

padding: 3px;

display: inline;

cursor: pointer;

}

index.htm

<!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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!doctype html>

<html>

<head>

<title>Ein Zahlenratespiel mit JavaScript und jQuery</title>

</head>

<body>

<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>

Raten Sie eine Zahl zwischen 1 und 100: <input id="eingegebeneZahl" type="number" name="ratezahl">

<div id="absenden">Absenden</div>

</div>

</body>

</html>

26. November 2015 by Jan 0 comments

jQuery, ein kleiner Überblick

Ein kurzer Überblick über jQuery (PDF)

26. November 2015 by Jan 0 comments

Ü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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!doctype html>

<html>

<head>

<title>Ein Zahlenratespiel mit JavaScript und jQuery</title>

</head>

<body>

<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>

Raten Sie eine Zahl zwischen 1 und 100: <input id="eingegebeneZahl" type="number" name="ratezahl">

<div id="absenden">Absenden</div>

</div>

</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…

2. November 2015 by Jan 0 comments

Lösungen zur Sitzung „Auffrischung: HTML, CSS, JavaScript, jQuery“

Unsere Beispielseite rund um HTML, CSS, JavaScript und jQuery findet sich hier: 2015-11-02_tools-dh.zip.