JavaScript

Aufgabe 1 Laden Sie bitte die JavaScript-Bibliothek Modernizr von der Seite http://modernizr.com herunter und legen Sie die Datei in dem Ordner js ab. Verwenden Sie die Produktivversion (Production) mit allen Unterelementen von CSS3, HTML5 und Misc. Aufgabe 2 Erstellen Sie ein neues HTML5-Dokument und binden Sie Modernizr im Kopfbereich Ihres HTML-Dokumentes ein. Fügen Sie anschließend…

Read More Sitzungsaufgaben I – Feature Detection mit Modernizr und Zeichnen mit canvas

Aufgabe 1 Erstellen Sie ein neues HTML-Dokument, das mit Modernizr und jQuery verknüpft ist. Ergänzen Sie den Inhaltsbereich Ihres neu erstellten Dokumentes um einen Div-Container mit der ID „ausgabe“. Aufgabe 2 Binden Sie die folgenden JavaScript-Anweisungen in den Inhaltsbereich Ihres HTML-Dokumentes ein: var startTime = Date.now(), startRange = 0, endRange = 999999999; for (var i…

Read More Sitzungsaufgaben II – High Performance JavaScript: Web Worker

<!DOCTYPE html> <html> <head> <title>Museen in Köln und Umgebung</title> <meta charset=“utf-8″> <link rel=“stylesheet“ href=“http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css“ /> <style> html, body { padding: 0; margin: 0; width: 100%; height: 100%; } #map { width: 100%; height: 100%; } </style> </head> <body> <div id=“map“></div> <script src=“http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js“></script> <script> // Variable / Array zur Speicherung aller Museumsinfos var geodaten = [];…

Read More Beispiellösung zur Kartendarstellung mit Leaflet, PHP, MySQL, JavaScript und Leaflet

Tools zur heutigen Sitzung: Annotator.js (http://annotatorjs.org/) + Plugins (http://annotatorjs.org/plugins/, Offline-Plugin: https://github.com/aron/annotator.offline.js, Download: https://github.com/aron/annotator.offline.js/downloads) Bootstrap (http://getbootstrap.com/) oder Skeleton (http://getskeleton.com/) Aufgabe 1 Die JavaScript-Bibliothek Annotator.js (http://annotatorjs.org/) macht’s mit wenigen Anweisungen möglich, auf einer Website textuelle Information zu annotieren. Laden Sie sich die Bibliothek Annotator.js von der Projekthomepage http://annotatorjs.org/ herunter. Erstellen Sie unter Verwendung von Bootstrap oder Sekelton…

Read More Sitzungsaufgaben zu Annotator.js

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…

Read More Meilenstein II – JavaScript und jQuery

Download als zip-Archiv (316KB) index.html <!DOCTYPE html> <html ng-app=“memoryGame“> <head> <title>Tic Tac Toe mit AngularJS</title> <meta charset=“utf-8″> <meta name=“keywords“ content=“Tic Tac Toe“> <meta name=“author“ content=“Jan Wieners | www.lehre.jan-wieners.de/“> <meta name=“description“ content=“Ein in JavaScript und AngularJS implementiertes Tic Tac Toe Spiel“> <link type=“text/css“ rel=“stylesheet“ media=“screen“ href=“css/style.css“ /> </head> <body ng-controller=“gameCtrl“> <div id=“gameBoard“> <div id=“messages“> {{ message…

Read More Quellcodes „Tic Tac Toe mit AngularJS“

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> style.css #kalender { width: 1400px; margin-left: auto; margin-right: auto; margin-top: 50px; text-align: center; } body…

Read More Ein Adventskalender mit HTML, CSS, JavaScript und jQuery

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

Read More Vervollständigung des Zahlenratespiels

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() {…

Read More Stand der Dinge am Ende der Sitzung: Vorbereitung des Ratespiels