Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial copy of js-beginners-day1

  • Loading branch information...
commit 7c030fde30837eeb358946ca2df991061b27713a 0 parents
@xMartin xMartin authored
Showing with 8,383 additions and 0 deletions.
  1. +16 −0 examples/basic.html
  2. +17 −0 examples/basic_de.html
  3. +212 −0 examples/countries.js
  4. +10 −0 examples/data.html
  5. +9 −0 examples/drawing.html
  6. +40 −0 examples/drawing.js
  7. +61 −0 examples/drawing_animate.js
  8. +63 −0 examples/drawing_animate_de.js
  9. +111 −0 examples/drawing_code.js
  10. +42 −0 examples/drawing_de.js
  11. +46 −0 examples/drawing_function.js
  12. +48 −0 examples/drawing_function_de.js
  13. +41 −0 examples/drawing_if.js
  14. +43 −0 examples/drawing_if_de.js
  15. +37 −0 examples/drawing_loop.js
  16. +39 −0 examples/drawing_loop_de.js
  17. +63 −0 examples/drawing_tree.js
  18. +65 −0 examples/drawing_tree_de.js
  19. +53 −0 examples/event_code.js
  20. +10 −0 examples/interact.html
  21. +203 −0 examples/invaders.js
  22. +208 −0 examples/invaders_de.js
  23. +48 −0 examples/life_expectancy.js
  24. +50 −0 examples/life_expectancy_de.js
  25. +15 −0 examples/rainbow.js
  26. +28 −0 examples/transform.js
  27. BIN  footprint.png
  28. +82 −0 index.html
  29. +82 −0 index_de.html
  30. +5 −0 lib/README
  31. +23 −0 lib/codemirror2/LICENSE
  32. +169 −0 lib/codemirror2/lib/codemirror.css
  33. +3,215 −0 lib/codemirror2/lib/codemirror.js
  34. +124 −0 lib/codemirror2/mode/css/css.js
  35. +85 −0 lib/codemirror2/mode/htmlmixed/htmlmixed.js
  36. +361 −0 lib/codemirror2/mode/javascript/javascript.js
  37. +326 −0 lib/codemirror2/mode/xml/xml.js
  38. +232 −0 page1.html
  39. +249 −0 page1_de.html
  40. +290 −0 page2.html
  41. +326 −0 page2_de.html
  42. +337 −0 page3.html
  43. +362 −0 page3_de.html
  44. +126 −0 page4.html
  45. +125 −0 page4_de.html
  46. +67 −0 sandbox/index.html
  47. +167 −0 sandbox/sandbox.js
  48. +52 −0 style.css
16 examples/basic.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<head>
+ <title>Our example page</title>
+</head>
+
+<script>
+ var myMessage = "Hello world!";
+ console.log(myMessage);
+</script>
+
+<p>This is a document. The text in angle brackets (tags) provides meta
+information about its structure. P stands for paragraph, for example.
+When preceded by a slash, the it ends the tag.</p>
+
+<p>Here is a button that runs some JavaScript when
+clicked: <button onclick="alert(myMessage);">Click me</button></p>
17 examples/basic_de.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<head>
+ <title>Unsere Beispielseite</title>
+</head>
+
+<script>
+ var myMessage = "Hallo Welt!";
+ console.log(myMessage);
+</script>
+
+<p>Dies ist ein Dokument. Der Text in den spitzen Klammern („Tags“) beschreibt
+die Struktur des Dokuments. „p“ z.B. steht für einen Absatz (englisch
+„paragraph“). Wenn ein Schrägstrich vorangestellt ist, bedeutet das, dass
+der Tag hier endet, also geschlossen wird.</p>
+
+<p>Hier ist ein Button, der etwas JavaScript ausführt, wenn man ihn klickt:
+<button onclick="alert(myMessage);">klick mich</button></p>
212 examples/countries.js
212 additions, 0 deletions not shown
10 examples/data.html
@@ -0,0 +1,10 @@
+<!doctype html>
+
+<head>
+ <title>Graphics sandbox</title>
+ <style>body, html { margin: 0; padding: 0; height: 100%; }</style>
+ <script src="../examples/drawing_code.js"></script>
+ <script src="../examples/countries.js"></script>
+</head>
+
+<canvas id="mycanvas"></canvas>
9 examples/drawing.html
@@ -0,0 +1,9 @@
+<!doctype html>
+
+<head>
+ <title>Graphics sandbox</title>
+ <style>body, html { margin: 0; padding: 0; height: 100%; }</style>
+ <script src="../examples/drawing_code.js"></script>
+</head>
+
+<canvas id="mycanvas"></canvas>
40 examples/drawing.js
@@ -0,0 +1,40 @@
+// use_html: drawing.html
+// Below is a definition of a drawing.
+
+function drawing() {
+ color("yellow");
+ circle(0, 0, 50);
+ color("black");
+ circle(-20, 10, 7);
+ circle(20, 10, 7);
+ lineWidth(3);
+ path("g -20 -10 q 20 -10 0 -50 c");
+}
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
61 examples/drawing_animate.js
@@ -0,0 +1,61 @@
+// use_html: drawing.html
+// The old smiley function from the previous step
+function smiley(x, y) {
+ moveTo(x, y);
+ color("yellow");
+ circle(0, 0, 50);
+ color("black");
+ circle(-20, 10, 7);
+ circle(20, 10, 7);
+ lineWidth(3);
+ path("g -20 -10 q 20 -10 0 -50 c");
+ goBack();
+}
+
+function drawing() {
+ // The angle variable stores the current rotation
+ var angle = 0;
+ // Draw twenty frames per second (20 * 50 = 1000 milliseconds)
+ setInterval(frame, 50);
+ function frame() {
+ // Clear the screen
+ clear();
+ // Update the angle
+ angle = angle - 2;
+ // Rotate what we are about to draw
+ rotate(angle);
+ // A stick...
+ color("black");
+ box(-5, 100, 10, 150);
+ // with a smiley on top
+ smiley(0, 100);
+ }
+}
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
63 examples/drawing_animate_de.js
@@ -0,0 +1,63 @@
+// use_html: drawing.html
+// Die Smiley-Funktion vom vorherigen Schritt
+function smiley(x, y) {
+ moveTo(x, y);
+ color("yellow");
+ circle(0, 0, 50);
+ color("black");
+ circle(-20, 10, 7);
+ circle(20, 10, 7);
+ lineWidth(3);
+ path("g -20 -10 q 20 -10 0 -50 c");
+ goBack();
+}
+
+function drawing() {
+ // The angle variable stores the current rotation
+ var angle = 0;
+ // Draw twenty frames per second (20 * 50 = 1000 milliseconds)
+ setInterval(frame, 50);
+ function frame() {
+ // Clear the screen
+ clear();
+ // Update the angle
+ angle = angle - 2;
+ // Rotate what we are about to draw
+ rotate(angle);
+ // A stick...
+ color("black");
+ box(-5, 100, 10, 150);
+ // with a smiley on top
+ smiley(0, 100);
+ }
+}
+
+// Folgende Funktionen stehen zur Verfügung:
+//
+// color(string) - setzt die Farbe
+// lineWidth(number) - setzt die Dicke der Linie
+// box(x, y, width, height) - zeichnet einen Kasten
+// circle(x, y, radius) - zeichnet einen Kreis
+// line(x1, y1, x2, y2) - zeichnet eine Linie
+// text(x, y, string) - zeichnet einen Text
+// clear() - leert den Bildschirm
+// path(string) - zeichnet eine komplexe Linie (Pfad)
+// Für einen Pfad kann man folgende Anweisungen geben:
+// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
+// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
+// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
+// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
+// „Kontrollpunkt“ zur Definition der Rundung dient
+//
+// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
+// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
+// Positive x-Werte bewegen sich nach links, positive y-Werte bewegen sich nach
+// oben.
+// Folgende Operationen können dieses Koordinatensystem verändern:
+//
+// moveTo(x, y) - bewegt den Ursprung nach x,y
+// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
+// um die angegebene Gradzahl
+// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
+// (größer/kleiner)
+// goBack() - macht eine Transformation rückgängig
111 examples/drawing_code.js
@@ -0,0 +1,111 @@
+var _canvas, _ctx;
+
+window.onload = function() {
+ setTimeout(function() {
+ _canvas = document.getElementById("mycanvas");
+ _ctx = _canvas.getContext("2d");
+ clear();
+ drawing();
+ }, 20);
+};
+
+function color(col) {
+ _ctx.strokeStyle = _ctx.fillStyle = col;
+}
+
+function lineWidth(n) {
+ _ctx.lineWidth = n;
+}
+
+var _pushDepth = 0, _centerX, _centerY;
+
+function clear() {
+ for (var i = 0; i < _pushDepth; ++i)
+ _ctx.restore();
+ var w = document.body.clientWidth - 5, h = document.body.clientHeight - 5;
+ _canvas.width = w;
+ _canvas.height = h;
+ _ctx.clearRect(0, 0, w, h);
+ _ctx.translate(_centerX = Math.round(w / 2), _centerY = Math.round(h / 2));
+ _ctx.scale(1, -1);
+ _pushDepth = 2;
+}
+
+function box(x, y, w, h) {
+ _ctx.fillRect(x, y - h, w, h);
+}
+
+function circle(x, y, r) {
+ _ctx.beginPath();
+ _ctx.arc(x, y, r, 0, 2 * Math.PI);
+ _ctx.fill();
+}
+
+function line(x1, y1, x2, y2) {
+ _ctx.beginPath();
+ _ctx.moveTo(x1, y1);
+ _ctx.lineTo(x2, y2);
+ _ctx.stroke();
+}
+
+function path(spec) {
+ _ctx.beginPath();
+ var parsed = spec.split(/\s+/g);
+ function arg() {
+ if (i == parsed.length) throw new Error("Expected number, found end of command.");
+ var val = Number(parsed[++i]);
+ if (isNaN(val)) throw new Error("Expected number, found '" + parsed[i] + "'");
+ return val;
+ }
+ try {
+ for (var i = 0; i < parsed.length; ++i) {
+ var cmd = parsed[i];
+ if (cmd == "c") {
+ _ctx.closePath();
+ } else if (cmd == "g") {
+ _ctx.moveTo(arg(), arg());
+ } else if (cmd == "l") {
+ _ctx.lineTo(arg(), arg());
+ } else if (cmd == "q") {
+ var x = arg(), y = arg();
+ _ctx.quadraticCurveTo(arg(), arg(), x, y);
+ } else {
+ throw new Error("Unrecognized path command: '" + cmd + "'");
+ }
+ }
+ _ctx.stroke();
+ } catch(e) {
+ console.log("Bad path: " + e.message);
+ }
+}
+
+function text(x, y, string) {
+ _ctx.save();
+ _ctx.scale(1, -1);
+ _ctx.font = "16px sans-serif";
+ _ctx.fillText(string, x, -y);
+ _ctx.restore();
+}
+
+function rotate(angle) {
+ _ctx.save();
+ ++_pushDepth;
+ _ctx.rotate(angle * Math.PI / 180);
+}
+
+function moveTo(x, y) {
+ _ctx.save();
+ ++_pushDepth;
+ _ctx.translate(x, y);
+}
+
+function scale(factor) {
+ _ctx.save();
+ ++_pushDepth;
+ _ctx.scale(factor, factor);
+}
+
+function goBack() {
+ _ctx.restore();
+ --_pushDepth;
+}
42 examples/drawing_de.js
@@ -0,0 +1,42 @@
+// use_html: drawing.html
+// Dies ist die Definition einer Zeichnung:
+
+function drawing() {
+ color("yellow");
+ circle(0, 0, 50);
+ color("black");
+ circle(-20, 10, 7);
+ circle(20, 10, 7);
+ lineWidth(3);
+ path("g -20 -10 q 20 -10 0 -50 c");
+}
+
+// Folgende Funktionen stehen zur Verfügung:
+//
+// color(string) - setzt die Farbe
+// lineWidth(number) - setzt die Dicke der Linie
+// box(x, y, width, height) - zeichnet einen Kasten
+// circle(x, y, radius) - zeichnet einen Kreis
+// line(x1, y1, x2, y2) - zeichnet eine Linie
+// text(x, y, string) - zeichnet einen Text
+// clear() - leert den Bildschirm
+// path(string) - zeichnet eine komplexe Linie (Pfad)
+// Für einen Pfad kann man folgende Anweisungen geben:
+// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
+// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
+// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
+// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
+// „Kontrollpunkt“ zur Definition der Rundung dient
+//
+// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
+// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
+// Positive x-Werte bewegen sich nach links, positive y-Werte bewegen sich nach
+// oben.
+// Folgende Operationen können dieses Koordinatensystem verändern:
+//
+// moveTo(x, y) - bewegt den Ursprung nach x,y
+// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
+// um die angegebene Gradzahl
+// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
+// (größer/kleiner)
+// goBack() - macht eine Transformation rückgängig
46 examples/drawing_function.js
@@ -0,0 +1,46 @@
+// use_html: drawing.html
+function smiley(x, y) {
+ moveTo(x, y);
+ color("yellow");
+ circle(0, 0, 50);
+ color("black");
+ circle(-20, 10, 7);
+ circle(20, 10, 7);
+ lineWidth(3);
+ path("g -20 -10 q 20 -10 0 -50 c");
+ goBack();
+}
+
+function drawing() {
+ smiley(0, 0);
+ smiley(-100, 20);
+ smiley(100, 50);
+}
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
48 examples/drawing_function_de.js
@@ -0,0 +1,48 @@
+// use_html: drawing.html
+function smiley(x, y) {
+ moveTo(x, y);
+ color("yellow");
+ circle(0, 0, 50);
+ color("black");
+ circle(-20, 10, 7);
+ circle(20, 10, 7);
+ lineWidth(3);
+ path("g -20 -10 q 20 -10 0 -50 c");
+ goBack();
+}
+
+function drawing() {
+ smiley(0, 0);
+ smiley(-100, 20);
+ smiley(100, 50);
+}
+
+// Folgende Funktionen stehen zur Verfügung:
+//
+// color(string) - setzt die Farbe
+// lineWidth(number) - setzt die Dicke der Linie
+// box(x, y, width, height) - zeichnet einen Kasten
+// circle(x, y, radius) - zeichnet einen Kreis
+// line(x1, y1, x2, y2) - zeichnet eine Linie
+// text(x, y, string) - zeichnet einen Text
+// clear() - leert den Bildschirm
+// path(string) - zeichnet eine komplexe Linie (Pfad)
+// Für einen Pfad kann man folgende Anweisungen geben:
+// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
+// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
+// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
+// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
+// „Kontrollpunkt“ zur Definition der Rundung dient
+//
+// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
+// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
+// Positive x-Werte bewegen sich nach links, positive y-Werte bewegen sich nach
+// oben.
+// Folgende Operationen können dieses Koordinatensystem verändern:
+//
+// moveTo(x, y) - bewegt den Ursprung nach x,y
+// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
+// um die angegebene Gradzahl
+// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
+// (größer/kleiner)
+// goBack() - macht eine Transformation rückgängig
41 examples/drawing_if.js
@@ -0,0 +1,41 @@
+// use_html: drawing.html
+function drawing() {
+ var count = 0;
+ while (count < 20) {
+ if (count % 2 == 0) {
+ color("black");
+ } else {
+ color("gray");
+ }
+ circle(count * 10, 0, 4);
+ count = count + 1;
+ }
+}
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
43 examples/drawing_if_de.js
@@ -0,0 +1,43 @@
+// use_html: drawing.html
+function drawing() {
+ var count = 0;
+ while (count < 20) {
+ if (count % 2 == 0) {
+ color("black");
+ } else {
+ color("gray");
+ }
+ circle(count * 10, 0, 4);
+ count = count + 1;
+ }
+}
+
+// Folgende Funktionen stehen zur Verfügung:
+//
+// color(string) - setzt die Farbe
+// lineWidth(number) - setzt die Dicke der Linie
+// box(x, y, width, height) - zeichnet einen Kasten
+// circle(x, y, radius) - zeichnet einen Kreis
+// line(x1, y1, x2, y2) - zeichnet eine Linie
+// text(x, y, string) - zeichnet einen Text
+// clear() - leert den Bildschirm
+// path(string) - zeichnet eine komplexe Linie (Pfad)
+// Für einen Pfad kann man folgende Anweisungen geben:
+// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
+// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
+// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
+// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
+// „Kontrollpunkt“ zur Definition der Rundung dient
+//
+// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
+// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
+// Positive x-Werte bewegen sich nach links, positive y-Werte bewegen sich nach
+// oben.
+// Folgende Operationen können dieses Koordinatensystem verändern:
+//
+// moveTo(x, y) - bewegt den Ursprung nach x,y
+// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
+// um die angegebene Gradzahl
+// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
+// (größer/kleiner)
+// goBack() - macht eine Transformation rückgängig
37 examples/drawing_loop.js
@@ -0,0 +1,37 @@
+// use_html: drawing.html
+function drawing() {
+ color("red");
+ var count = 0;
+ while (count < 20) {
+ circle(count * 10, 0, 4);
+ count = count + 1;
+ }
+}
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
39 examples/drawing_loop_de.js
@@ -0,0 +1,39 @@
+// use_html: drawing.html
+function drawing() {
+ color("red");
+ var count = 0;
+ while (count < 20) {
+ circle(count * 10, 0, 4);
+ count = count + 1;
+ }
+}
+
+// Folgende Funktionen stehen zur Verfügung:
+//
+// color(string) - setzt die Farbe
+// lineWidth(number) - setzt die Dicke der Linie
+// box(x, y, width, height) - zeichnet einen Kasten
+// circle(x, y, radius) - zeichnet einen Kreis
+// line(x1, y1, x2, y2) - zeichnet eine Linie
+// text(x, y, string) - zeichnet einen Text
+// clear() - leert den Bildschirm
+// path(string) - zeichnet eine komplexe Linie (Pfad)
+// Für einen Pfad kann man folgende Anweisungen geben:
+// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
+// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
+// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
+// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
+// „Kontrollpunkt“ zur Definition der Rundung dient
+//
+// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
+// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
+// Positive x-Werte bewegen sich nach links, positive y-Werte bewegen sich nach
+// oben.
+// Folgende Operationen können dieses Koordinatensystem verändern:
+//
+// moveTo(x, y) - bewegt den Ursprung nach x,y
+// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
+// um die angegebene Gradzahl
+// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
+// (größer/kleiner)
+// goBack() - macht eine Transformation rückgängig
63 examples/drawing_tree.js
@@ -0,0 +1,63 @@
+// use_html: drawing.html
+function branch(thickness) {
+ // Give the branches individuality by randomizing their length
+ // (between 2 and 5 times their thickness)
+ var height = thickness * (2 + Math.random() * 3);
+ // Draw this branch
+ color("black");
+ box(-thickness / 2, height, thickness, height);
+
+ // Go to the end of this branch
+ moveTo(0, height);
+ if (thickness < 2) {
+ // Draw a leaf, and nothing more, if this branch is very thin
+ color("purple");
+ circle(0, 0, 5);
+ } else {
+ // Draw two branches springing from this branch, rotated at
+ // 30-degree angles
+ rotate(-30);
+ branch(thickness * 0.8);
+ goBack();
+ rotate(30);
+ branch(thickness * 0.8);
+ goBack();
+ }
+ // Clears the moveTo above
+ goBack();
+}
+
+function drawing() {
+ // Move down to make room for tree crown
+ moveTo(0, -200);
+ // Draw the trunk, which in turn draws branches, and so on.
+ branch(16);
+}
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
65 examples/drawing_tree_de.js
@@ -0,0 +1,65 @@
+// use_html: drawing.html
+function branch(thickness) {
+ // Give the branches individuality by randomizing their length
+ // (between 2 and 5 times their thickness)
+ var height = thickness * (2 + Math.random() * 3);
+ // Draw this branch
+ color("black");
+ box(-thickness / 2, height, thickness, height);
+
+ // Go to the end of this branch
+ moveTo(0, height);
+ if (thickness < 2) {
+ // Draw a leaf, and nothing more, if this branch is very thin
+ color("purple");
+ circle(0, 0, 5);
+ } else {
+ // Draw two branches springing from this branch, rotated at
+ // 30-degree angles
+ rotate(-30);
+ branch(thickness * 0.8);
+ goBack();
+ rotate(30);
+ branch(thickness * 0.8);
+ goBack();
+ }
+ // Clears the moveTo above
+ goBack();
+}
+
+function drawing() {
+ // Move down to make room for tree crown
+ moveTo(0, -200);
+ // Draw the trunk, which in turn draws branches, and so on.
+ branch(16);
+}
+
+// Folgende Funktionen stehen zur Verfügung:
+//
+// color(string) - setzt die Farbe
+// lineWidth(number) - setzt die Dicke der Linie
+// box(x, y, width, height) - zeichnet einen Kasten
+// circle(x, y, radius) - zeichnet einen Kreis
+// line(x1, y1, x2, y2) - zeichnet eine Linie
+// text(x, y, string) - zeichnet einen Text
+// clear() - leert den Bildschirm
+// path(string) - zeichnet eine komplexe Linie (Pfad)
+// Für einen Pfad kann man folgende Anweisungen geben:
+// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
+// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
+// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
+// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
+// „Kontrollpunkt“ zur Definition der Rundung dient
+//
+// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
+// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
+// Positive x-Werte bewegen sich nach links, positive y-Werte bewegen sich nach
+// oben.
+// Folgende Operationen können dieses Koordinatensystem verändern:
+//
+// moveTo(x, y) - bewegt den Ursprung nach x,y
+// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
+// um die angegebene Gradzahl
+// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
+// (größer/kleiner)
+// goBack() - macht eine Transformation rückgängig
53 examples/event_code.js
@@ -0,0 +1,53 @@
+var _handlers = {}, mouseX = 0, mouseY = 0;
+
+function setHandler(which, press, release) {
+ _handlers[which] = {press: press, release: release};
+}
+
+var _keyName = function() {
+ var names = {3: "Enter", 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Ctrl", 18: "Alt",
+ 19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Space", 33: "PageUp", 34: "PageDown", 35: "End",
+ 36: "Home", 37: "Left", 38: "Up", 39: "Right", 40: "Down", 44: "PrintScrn", 45: "Insert",
+ 46: "Delete", 59: ";", 91: "Mod", 92: "Mod", 93: "Mod", 109: "-", 107: "=", 127: "Delete",
+ 186: ";", 187: "=", 188: ",", 189: "-", 190: ".", 191: "/", 192: "`", 219: "[", 220: "\\",
+ 221: "]", 222: "'", 63276: "PageUp", 63277: "PageDown", 63275: "End", 63273: "Home",
+ 63234: "Left", 63232: "Up", 63235: "Right", 63233: "Down", 63302: "Insert", 63272: "Delete"};
+ (function() {
+ // Number keys
+ for (var i = 0; i < 10; i++) names[i + 48] = String(i);
+ // Alphabetic keys
+ for (var i = 65; i <= 90; i++) names[i] = String.fromCharCode(i);
+ // Function keys
+ for (var i = 1; i <= 12; i++) names[i + 111] = names[i + 63235] = "F" + i;
+ })();
+ return function(e) { return names[e.keyCode] || "Unknown"; };
+}();
+
+function _buttonName(e) {
+ var which = e.which;
+ if (!which) {
+ if (e.button & 1) which = 1;
+ else if (e.button & 2) which = 3;
+ else if (e.button & 4) which = 2;
+ }
+ if (which == 1 && e.ctrlKey && /Mac/.test(navigator.platform)) which = 3;
+ return "Mouse-" + (which == 1 ? "Left" : which == 2 ? "Middle" : "Right");
+}
+
+function _doHandle(name, down) {
+ var handler = _handlers[name];
+ if (!handler) return;
+ if (down && handler.state) return;
+ handler.state = down;
+ var func = handler[down ? "press" : "release"];
+ if (func) func();
+}
+
+window.addEventListener("keydown", function(e) {_doHandle(_keyName(e), true);}, false);
+window.addEventListener("keyup", function(e) {_doHandle(_keyName(e), false);}, false);
+window.addEventListener("mousedown", function(e) {_doHandle(_buttonName(e), true);}, false);
+window.addEventListener("mouseup", function(e) {_doHandle(_buttonName(e), false);}, false);
+
+window.addEventListener("mousemove", function(e) {
+ mouseX = e.pageX - _centerX; mouseY = _centerY - e.pageY;
+}, false);
10 examples/interact.html
@@ -0,0 +1,10 @@
+<!doctype html>
+
+<head>
+ <title>Graphics sandbox</title>
+ <style>body, html { margin: 0; padding: 0; height: 100%; }</style>
+ <script src="../examples/drawing_code.js"></script>
+ <script src="../examples/event_code.js"></script>
+</head>
+
+<canvas id="mycanvas"></canvas>
203 examples/invaders.js
@@ -0,0 +1,203 @@
+// use_html: interact.html
+// ******************************************
+// INVADERS.JS
+// A very simple Space Invaders knock-off
+// ******************************************
+
+// The width and height of the game area
+var width = 600, height = 300;
+// An array containing the currently attacking invaders
+var invaders = [];
+// Array containing bullets that are currently flying
+var bullets = [];
+// Set to true when an invader reaches the bottom of the screen
+var gameOver = false;
+
+// The player's position is based on the mouse position. Because we
+// move the viewport, we have to 'move' mouse coordinates into our own
+// coordinate system before we can use them. 'mouseX' is provided by
+// the helper code for this example (described near the bottom of the
+// program).
+function playerX() {
+ return mouseX + width / 2;
+}
+
+// Add a bullet object at the player's current position.
+function fireBullet() {
+ bullets.push({x: playerX(), y: 10, alive: true});
+}
+
+// Call fireBullet every time the left mouse button is pressed.
+// 'setHandler' is also described near the bottom of the program.
+setHandler("Mouse-Left", fireBullet);
+
+// Add a new space invader object at a random position along the top
+// of the screen.
+function newInvader() {
+ invaders.push({x: Math.random() * width, y: height, alive: true});
+}
+
+// Calculate the distance between two objects. Both objects must have
+// x and y properties. Uses a textbook Pythagoras formula. Needed to
+// be able to tell when an invader and a bullet collide.
+function distance(obj1, obj2) {
+ var dx = obj1.x - obj2.x, dy = obj1.y - obj2.y;
+ return Math.sqrt(dx * dx + dy * dy);
+}
+
+// This will
+// - Move each bullet up a little
+// - Draw each bullet
+// - Mark bullets that leave the game area as no longer alive
+// - Check whether a bullet hits an invader.
+// - If it does, mark both it and the invader as dead
+function processBullets() {
+ for (var b = 0; b < bullets.length; b = b + 1) {
+ var bullet = bullets[b];
+ bullet.y = bullet.y + 12;
+ drawBullet(bullet);
+ if (bullet.y > height)
+ bullet.alive = false;
+ for (var i = 0; i < invaders.length; i = i + 1) {
+ var invader = invaders[i];
+ if (distance(bullet, invader) < 17) {
+ invader.alive = false;
+ bullet.alive = false;
+ }
+ }
+ }
+}
+
+// Move each invader down a little. Draw them. When one hits the
+// bottom of the game area, set gameOver to true and mark the invader
+// as dead.
+function processInvaders() {
+ for (var i = 0; i < invaders.length; i = i + 1) {
+ var invader = invaders[i];
+ invader.y = invader.y - 2;
+ drawInvader(invader);
+ if (invader.y < 0) {
+ gameOver = true;
+ invader.alive = false;
+ }
+ }
+}
+
+// Used to remove dead bullets and invaders at the end of every turn.
+function removeDeadObjects(array) {
+ var live = [];
+ for (var i = 0; i < array.length; ++i) {
+ if (array[i].alive)
+ live.push(array[i]);
+ }
+ return live;
+}
+
+// Process a single step of the game (done twenty times per second).
+function frame() {
+ // There is a 5% chance per turn, as long as the game is not over,
+ // that a new invader is added.
+ // The ! operator means 'not', the && operator means 'and'.
+ // So this says 'if not gameOver and Math.random() is less than 0.05'
+ if (!gameOver && Math.random() < 0.05)
+ newInvader();
+
+ // Clear the view.
+ clear();
+ // Make 0,0 the bottom left of the game area
+ moveTo(-width / 2, -height / 2);
+ // Draw a line at ground level.
+ color("silver");
+ line(0, 0, width, 0);
+
+ processBullets();
+ processInvaders();
+ // Discard dead objects.
+ bullets = removeDeadObjects(bullets);
+ invaders = removeDeadObjects(invaders);
+
+ drawPlayer(playerX(), 0);
+ if (gameOver) {
+ color("red");
+ text(playerX() - 40, -25, "GAME OVER");
+ }
+}
+
+function drawing() {
+ setInterval(frame, 50);
+}
+
+// Functions for drawing the various elements in the game.
+
+function drawInvader(invader) {
+ moveTo(invader.x, invader.y);
+ if (invader.alive)
+ color("lightgreen");
+ else
+ color("orange");
+ circle(0, 0, 14);
+ color("green");
+ circle(-12, 8, 8);
+ circle(12, 8, 8);
+ color("black");
+ circle(-12, 8, 4);
+ circle(12, 8, 4);
+ goBack();
+}
+
+function drawPlayer(x, y) {
+ moveTo(x, y);
+ color("steelblue");
+ box(-20, 5, 40, 10);
+ color("black");
+ box(-6, 15, 4, 14);
+ box(2, 15, 4, 14);
+ goBack();
+}
+
+function drawBullet(bullet) {
+ moveTo(bullet.x, bullet.y);
+ color("red");
+ lineWidth(3);
+ line(-4, -4, -4, 4);
+ line(4, -4, 4, 4);
+ goBack();
+}
+
+// Use the setHandler function to respond to key or mouse input.
+// setHandler("Left", goLeft) - to call the goLeft function whenever
+// the left arrow is pressed
+// setHandler("U", startAccelerate, stopAccelerate) - a second
+// function can be given, which will be called when the key is
+// released again. Letter keys are named by uppercase letters.
+// Use the names "Mouse-Left", "Mouse-Right", and "Mouse-Middle" for
+// the mouse buttons. The variables mouseX and mouseY provide the
+// current mouse coordinates.
+
+// These are the old drawing functions:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
208 examples/invaders_de.js
@@ -0,0 +1,208 @@
+// use_html: interact.html
+// ******************************************
+// INVADERS.JS
+// Ein einfacher Space Invaders-Abklatsch
+// ******************************************
+
+// Breite (width) und Höhe (height) der Spielfläche
+var width = 600, height = 300;
+// ein Array (Liste), dass die gerade attackierenden Invaders beinhaltet
+var invaders = [];
+// ein Array mit den Kugeln, die gerade umherfliegen
+var bullets = [];
+// soll auf "true" (wahr) gesetzt werden, wenn ein Invader den Boden erreicht
+var gameOver = false;
+
+// Die Position des Spieler orientiert sich an der Position des Mauszeigers.
+// Weil wir den angezeigten Ausschnitt (viewport) bewegen, müssen wir die
+// Maus-Koordinaten in unser eigenes Koordinatensystem überführen, bevor
+// wir sie benutzen können. Der 'mouseX'-Wert wird von dem Helfer-Code dieses
+// Beispiels zur Verfügung gestellt (Beschreibung am unteren Ende des Programms).
+function playerX() {
+ return mouseX + width / 2;
+}
+
+// Fügt eine Kugel (bullet) ein an der aktuellen Position des Spielers.
+function fireBullet() {
+ bullets.push({x: playerX(), y: 10, alive: true});
+}
+
+// Die Funktion 'fireBullet' wird jedes Mal aufgerufen, wenn die linke Maustaste
+// gedrückt wird. 'setHandler' wird auch am unteren Ende des Programms erklärt.
+setHandler("Mouse-Left", fireBullet);
+
+// Fügt einen neuen Invader an einer zufälligen Position des oberen
+// Bildschirmrands ein.
+function newInvader() {
+ invaders.push({x: Math.random() * width, y: height, alive: true});
+}
+
+// Berechnet die Distanz zwischen zwei Objekten. Beide Objekte müssen die
+// Eigenschaften x und y haben. Es wird einfach der Satz des Pythagoras
+// verwendet. Die Funktion wird benötigt um festzustellen, wann ein Invader
+// von einer Kugel getroffen wird.
+function distance(obj1, obj2) {
+ var dx = obj1.x - obj2.x, dy = obj1.y - obj2.y;
+ return Math.sqrt(dx * dx + dy * dy);
+}
+
+// Die Funktion
+// - bewegt jede Kugel ein Stück nach oben
+// - zeichnet jede einzelne Kugel
+// - markiert Kugeln, die außerhalb der Spielfläche sind als inaktiv
+// - prüft, ob eine Kugel einen Invader trifft
+// - wenn ja, markiert Invader und Kugel als inaktiv (tot)
+function processBullets() {
+ for (var b = 0; b < bullets.length; b = b + 1) {
+ var bullet = bullets[b];
+ bullet.y = bullet.y + 12;
+ drawBullet(bullet);
+ if (bullet.y > height)
+ bullet.alive = false;
+ for (var i = 0; i < invaders.length; i = i + 1) {
+ var invader = invaders[i];
+ if (distance(bullet, invader) < 17) {
+ invader.alive = false;
+ bullet.alive = false;
+ }
+ }
+ }
+}
+
+// Bewegt die Invaders ein Stück nach unten und zeichnet sie.
+// Wenn einer den Boden erreicht wird 'gameOver' auf "true" (wahr) gesetzt
+// und der Invader als tot markiert.
+function processInvaders() {
+ for (var i = 0; i < invaders.length; i = i + 1) {
+ var invader = invaders[i];
+ invader.y = invader.y - 2;
+ drawInvader(invader);
+ if (invader.y < 0) {
+ gameOver = true;
+ invader.alive = false;
+ }
+ }
+}
+
+// Hier werden nach jeder Runde alle inaktiven bzw. toten Kugel und Invaders
+// gelöscht.
+function removeDeadObjects(array) {
+ var live = [];
+ for (var i = 0; i < array.length; ++i) {
+ if (array[i].alive)
+ live.push(array[i]);
+ }
+ return live;
+}
+
+// Ein einzelner Schritt des Spiels wird abgearbeitet.
+// Das passiert zwanzig Mal in der Sekunde.
+function frame() {
+ // Pro Schritt gibt es eine 5%ige Chance, dass ein neuer Invader hinzukommt.
+ // Der !-Operator bedeutet 'nicht', der &&-Operator bedeutet 'und'.
+ // Also 'wenn nicht gameOver und Math.random() kleiner als 0.05'.
+ if (!gameOver && Math.random() < 0.05)
+ newInvader();
+
+ // Clear the view.
+ clear();
+ // Make 0,0 the bottom left of the game area
+ moveTo(-width / 2, -height / 2);
+ // Draw a line at ground level.
+ color("silver");
+ line(0, 0, width, 0);
+
+ processBullets();
+ processInvaders();
+ // Discard dead objects.
+ bullets = removeDeadObjects(bullets);
+ invaders = removeDeadObjects(invaders);
+
+ drawPlayer(playerX(), 0);
+ if (gameOver) {
+ color("red");
+ text(playerX() - 40, -25, "GAME OVER");
+ }
+}
+
+function drawing() {
+ setInterval(frame, 50);
+}
+
+// Functions for drawing the various elements in the game.
+
+function drawInvader(invader) {
+ moveTo(invader.x, invader.y);
+ if (invader.alive)
+ color("lightgreen");
+ else
+ color("orange");
+ circle(0, 0, 14);
+ color("green");
+ circle(-12, 8, 8);
+ circle(12, 8, 8);
+ color("black");
+ circle(-12, 8, 4);
+ circle(12, 8, 4);
+ goBack();
+}
+
+function drawPlayer(x, y) {
+ moveTo(x, y);
+ color("steelblue");
+ box(-20, 5, 40, 10);
+ color("black");
+ box(-6, 15, 4, 14);
+ box(2, 15, 4, 14);
+ goBack();
+}
+
+function drawBullet(bullet) {
+ moveTo(bullet.x, bullet.y);
+ color("red");
+ lineWidth(3);
+ line(-4, -4, -4, 4);
+ line(4, -4, 4, 4);
+ goBack();
+}
+
+// Benutze die 'setHandler'-Funktion um auf Tasten- oder Mauseingaben zu
+// reagieren.
+// setHandler("Left", goLeft) - ruft die 'goLeft'-Funktion auf, wenn die linke
+// Pfeiltaste gedrückt wird.
+// setHandler("U", startAccelerate, stopAccelerate) - Eine zweite Funktion
+// kann übergeben werden, die aufgerufen wird, wenn die Taste losgelassen
+// wird. Buchstabentasten werden mit Großbuchstaben benannt.
+// Die Namen "Mouse-Left", "Mouse-Right" und "Mouse-Middle" werden für die
+// Maustasten vwerwendet. Die Variablen 'mouseX' und 'mouseY' enthalten die
+// aktuelle Mausposition.
+
+// Folgende Funktionen stehen zur Verfügung:
+//
+// color(string) - setzt die Farbe
+// lineWidth(number) - setzt die Dicke der Linie
+// box(x, y, width, height) - zeichnet einen Kasten
+// circle(x, y, radius) - zeichnet einen Kreis
+// line(x1, y1, x2, y2) - zeichnet eine Linie
+// text(x, y, string) - zeichnet einen Text
+// clear() - leert den Bildschirm
+// path(string) - zeichnet eine komplexe Linie (Pfad)
+// Für einen Pfad kann man folgende Anweisungen geben:
+// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
+// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
+// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
+// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
+// „Kontrollpunkt“ zur Definition der Rundung dient
+//
+// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
+// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
+// Positive x-Werte bewegen sich nach links, positive y-Werte bewegen sich nach
+// oben.
+// Folgende Operationen können dieses Koordinatensystem verändern:
+//
+// moveTo(x, y) - bewegt den Ursprung nach x,y
+// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
+// um die angegebene Gradzahl
+// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
+// (größer/kleiner)
+// goBack() - macht eine Transformation rückgängig
48 examples/life_expectancy.js
@@ -0,0 +1,48 @@
+// use_html: data.html
+var width = 600, height = 300;
+
+function showCountry(country) {
+ var step = width / country.life_expectancy.length;
+ for (var pos = 0; pos < country.life_expectancy.length; pos = pos + 1) {
+ var le = country.life_expectancy[pos];
+ circle(step * pos, le * 3, 2);
+ }
+}
+
+function drawing() {
+ moveTo(-width / 2, -height / 2);
+ color("red");
+ showCountry(countryData[66]); // Germany
+ color("green");
+ showCountry(countryData[81]); // India
+ color("blue");
+ showCountry(countryData[150]); // Russian Federation
+}
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
50 examples/life_expectancy_de.js
@@ -0,0 +1,50 @@
+// use_html: data.html
+var width = 600, height = 300;
+
+function showCountry(country) {
+ var step = width / country.life_expectancy.length;
+ for (var pos = 0; pos < country.life_expectancy.length; pos = pos + 1) {
+ var le = country.life_expectancy[pos];
+ circle(step * pos, le * 3, 2);
+ }
+}
+
+function drawing() {
+ moveTo(-width / 2, -height / 2);
+ color("red");
+ showCountry(countryData[66]); // Germany
+ color("green");
+ showCountry(countryData[81]); // India
+ color("blue");
+ showCountry(countryData[150]); // Russian Federation
+}
+
+// Folgende Funktionen stehen zur Verfügung:
+//
+// color(string) - setzt die Farbe
+// lineWidth(number) - setzt die Dicke der Linie
+// box(x, y, width, height) - zeichnet einen Kasten
+// circle(x, y, radius) - zeichnet einen Kreis
+// line(x1, y1, x2, y2) - zeichnet eine Linie
+// text(x, y, string) - zeichnet einen Text
+// clear() - leert den Bildschirm
+// path(string) - zeichnet eine komplexe Linie (Pfad)
+// Für einen Pfad kann man folgende Anweisungen geben:
+// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
+// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
+// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
+// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
+// „Kontrollpunkt“ zur Definition der Rundung dient
+//
+// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
+// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
+// Positive x-Werte bewegen sich nach links, positive y-Werte bewegen sich nach
+// oben.
+// Folgende Operationen können dieses Koordinatensystem verändern:
+//
+// moveTo(x, y) - bewegt den Ursprung nach x,y
+// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
+// um die angegebene Gradzahl
+// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
+// (größer/kleiner)
+// goBack() - macht eine Transformation rückgängig
15 examples/rainbow.js
@@ -0,0 +1,15 @@
+// use_html: drawing.html
+function rainbow(x, y) {
+ var colors = ["red", "orange", "yellow", "green", "cyan", "purple", "white"];
+ var count = 0;
+ while (count < colors.length) {
+ color(colors[count]);
+ circle(x, y, 150 - 5 * count);
+ count = count + 1;
+ }
+}
+
+function drawing() {
+ rainbow(-130, 40);
+ rainbow(130, -30);
+}
28 examples/transform.js
@@ -0,0 +1,28 @@
+// use_html: data.html
+var width = 600, height = 300;
+
+function visualizeHistory(array, vscale) {
+ var hscale = width / array.length;
+ for (var pos = 0; pos < array.length; pos = pos + 1) {
+ circle(hscale * pos, array[pos] * vscale, 2);
+ }
+}
+
+function showWorldPopulation() {
+ var populationPerYear = []
+ var maxPopulation = 6000000000; // Not quite correct!
+
+ // Your code here.
+
+ var verticalScale = height / maxPopulation;
+ visualizeHistory(populationPerYear, verticalScale);
+}
+
+function drawing() {
+ moveTo(-width / 2, -height / 2);
+ color("silver");
+ line(0, 0, width, 0);
+ line(0, 0, 0, height);
+ color("blue");
+ showWorldPopulation();
+}
BIN  footprint.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 index.html
@@ -0,0 +1,82 @@
+<!doctype html>
+
+<head>
+ <title>Curriculum — JS for absolute beginners</title>
+ <link rel=stylesheet href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
+ <link rel=stylesheet href=style.css>
+ <meta http-equiv=Content-Type content="text/html; charset=utf-8">
+</head>
+
+<h1>Curriculum: first day</h1>
+
+<p><a href="index_de.html">Auf Deutsch »</a></p>
+
+<p>On the first day, our goal is to learn enough JavaScript to be
+dangerous, and to get a good feel for the natural habitat (web,
+browser, HTML) of JavaScript programs.</p>
+
+<h2>Tools</h2>
+
+<p>We will be using the Google Chrome browser as our development
+environment for the course, because of the excellent developer tools
+it provides. If you have a strong, passionate affinity for some other
+browser (please let it not be Internet Explorer), you are also free to
+try and use that—most modern browsers have decent developer tools—but
+the text on these pages will describe the Chrome functionality.</p>
+
+<p>If you don't already have Chrome installed, get it here:</p>
+
+<ul>
+ <li><a href="https://www.google.com/intl/en/chrome/browser/" target=_blank>English</a></li>
+ <li><a href="https://www.google.com/chrome/?hl=de" target=_blank>Deutsch</a></li>
+</ul>
+
+<p>Beyond a browser, no desktop software will be necessary. We will be
+writing and trying out JavaScript programs directly inside of the
+browser.</p>
+
+<h2>Process</h2>
+
+<p>Over the course of the day, we will write a simple game. The first
+few hours will be spent working with depressingly trivial pieces of
+programs, in order to get a feel for the language. Despair not, for
+these are simply a gateway to bigger, greater things.</p>
+
+<p>This document will provide you with step-by-step guidance for
+exploring the browser and its JavaScript environment, and for writing
+your first few programs.</p>
+
+<p>Each step will be marked with a goal (why are we doing this), a
+precise, dry, guideline on what to do, and an explanation of how and
+why the thing you are doing works. For example:</p>
+
+<div class=box>
+ <h2 class=step>Example step</h2>
+ <h3 class=goal>Goal</h3>
+ <p>See what a step looks like.</p>
+ <h3 class=inst>Instructions</h3>
+ <p>Read this text carefully.</p>
+ <h3 class=ex>Explanation</h3>
+ <p>The goal always comes first. Without goal, there is no action.
+ The instructions are written in a way that is unambiguous and plain,
+ but don't provide background. They are followed by an explanation
+ that, hopefully, makes it clear how and why they work.</p>
+</div>
+
+<h2>Resources</h2>
+
+<p>It is a good idea to keep
+this <a href="http://marijnhaverbeke.nl/js-cheatsheet.html"
+target=_blank>cheat sheet</a> open in a tab in your browser, and use
+it to look up the precise notation for something whenever you forget.
+Don't worry about it looking like gibberish for now. It is only
+intended to look up things <em>after</em> they have been explained by
+the course material.</p>
+
+<p>Our coaches are also always happy to answer questions. If at any
+point you feel confused or stuck, get our attention, and we will do
+our very best to un-confuse you.</p>
+
+<h2>Let's go</h2>
+
+<p><a href="page1.html">→ To the first page</a>.</p>
82 index_de.html
@@ -0,0 +1,82 @@
+<!doctype html>
+
+<head>
+ <title>Kursmaterial — JS für absolute Beginner</title>
+ <link rel=stylesheet href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
+ <link rel=stylesheet href=style.css>
+ <meta http-equiv=Content-Type content="text/html; charset=utf-8">
+</head>
+
+<h1>Kursmaterial: Erster Tag</h1>
+
+<p>Unser Ziel für den ersten Tag ist es, genug JavaScript zu lernen
+um gefährlich zu sein und nebenbei ein Gefühl für JavaScripts natürlichen
+Lebensraum (Web, Browser, HTML) zu bekommen.</p>
+
+<h2>Was Du brauchst</h2>
+
+<p>Als Entwicklungsumgebung für den Kurs werden wir Google Chrome verwenden,
+weil es ein Browser ist, der ausgezeichnete Tools für Entwickler bereithält.
+Falls Du eine ausgeprägte persönliche Vorliebe für einen anderen Browser haben
+solltest (bitte lass es nicht Internet Explorer sein), kannst du auch gerne
+probieren diesen zu verwenden—die meisten modernen Browser haben ganz ordentliche
+Tools für Entwickler—aber dieses Tutorial wird die Funktionalitäten von Chrome
+beschreiben.
+</p>
+
+<p>Wenn Du Chrome noch nicht installiert hast, kannst Du ihn hier herunterladen:</p>
+
+<ul>
+ <li><a href="https://www.google.com/chrome/?hl=de" target=_blank>Chrome</a></li>
+</ul>
+
+<p>Abgesehen von einem Browser brauchst Du keine weitere Software.
+Wir werden unsere JavaScript-Programme direkt im Browser schreiben und
+ausprobieren.</p>
+
+<h2>Ablauf</h2>
+
+<p>Im Verlauf des Tages werden wir ein einfaches Spiel schreiben.
+Die ersten paar Stunden werden wir mit erbärmlich banalen Programm-Schnipseln
+verbringen, um ein Gefühl für die Sprache zu bekommen. Gib nicht auf,
+denn diese Vorübungen erlauben Dir Zugang zu einer Welt größerer,
+interessanterer Dinge.</p>
+
+<p>Dieses Dokument ist eine Schritt-für-Schritt Anleitung, mit der Du
+den Browser und seine JavaScript-Umgebung erkunden kannst und lernst,
+Deine ersten eigenen Programme zu schreiben.</p>
+
+<p>Jeder Schritt wird ein Ziel haben (es beschreibt das Warum),
+Anweisungen was genau zu tun ist, und eine Erklärung, die
+Dir sagt wie und warum das funktioniert was Du da tust. Zum Beispiel:</p>
+
+<div class=box>
+ <h2 class=step>Beispiel für einen Schritt</h2>
+ <h3 class=goal>Ziel</h3>
+ <p>Sehen wie ein Schritt aussieht.</p>
+ <h3 class=inst>Anweisungen</h3>
+ <p>Lies diesen Text aufmerksam.</p>
+ <h3 class=ex>Erklärung</h3>
+ <p>Das Ziel kommt immer zuerst. Ohne Ziel, keine Aktion.
+Die Anweisungen sind schlicht und eindeutig gehalten und enthalten
+keine Hintergrund-Informationen. Danach kommt eine Erklärung, die
+(hoffentlich) klarmacht, wie und warum alles funktioniert.</p>
+</div>
+
+<h2>Informationsquellen</h2>
+
+<p>Eine gute Idee ist es, diesen <a href="http://marijnhaverbeke.nl/js-cheatsheet.html"
+target=_blank>Spickzettel</a> in einem Browser-Tab geöffnet zu halten,
+damit Du dort schnell nachschauen kannst, wie genau etwas zu schreiben
+oder zu lesen ist. Mach Dir keine Sorgen, wenn Dir dieser Zettel jetzt
+erstmal gar nichts sagt. Er ist dafür gedacht, Dinge nachzuschlagen
+<em>nachdem</em> sie Dir erklärt wurden.</p>
+
+<p>Darüber hinaus sind unsere Coaches auch immer gerne bereit Fragen
+zu beantworten. Falls Du irgendwann zwischendurch das Gefühl hast,
+dass Du verwirrt bist oder nicht weiterkommst, mach Dich bemerkbar
+und wir werden unser Bestes tun Dich zu "entwirren".</p>
+
+<h2>Los geht's</h2>
+
+<p><a href="page1_de.html">→ Zur ersten Seite</a>.</p>
5 lib/README
@@ -0,0 +1,5 @@
+Do a
+
+ git clone http://marijnhaverbeke.nl/git/codemirror2
+
+in this directory to fetch the dependency.
23 lib/codemirror2/LICENSE
@@ -0,0 +1,23 @@
+Copyright (C) 2012 by Marijn Haverbeke <marijnh@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+Please note that some subdirectories of the CodeMirror distribution
+include their own LICENSE files, and are released under different
+licences.
169 lib/codemirror2/lib/codemirror.css
@@ -0,0 +1,169 @@
+.CodeMirror {
+ line-height: 1em;
+ font-family: monospace;
+
+ /* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */
+ position: relative;
+ /* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */
+ overflow: hidden;
+}
+
+.CodeMirror-scroll {
+ overflow-x: auto;
+ overflow-y: hidden;
+ height: 300px;
+ /* This is needed to prevent an IE[67] bug where the scrolled content
+ is visible outside of the scrolling box. */
+ position: relative;
+ outline: none;
+}
+
+/* Vertical scrollbar */
+.CodeMirror-scrollbar {
+ float: right;
+ overflow-x: hidden;
+ overflow-y: scroll;
+
+ /* This corrects for the 1px gap introduced to the left of the scrollbar
+ by the rule for .CodeMirror-scrollbar-inner. */
+ margin-left: -1px;
+}
+.CodeMirror-scrollbar-inner {
+ /* This needs to have a nonzero width in order for the scrollbar to appear
+ in Firefox and IE9. */
+ width: 1px;
+}
+.CodeMirror-scrollbar.cm-sb-overlap {
+ /* Ensure that the scrollbar appears in Lion, and that it overlaps the content
+ rather than sitting to the right of it. */
+ position: absolute;
+ z-index: 1;
+ float: none;
+ right: 0;
+ min-width: 12px;
+}
+.CodeMirror-scrollbar.cm-sb-nonoverlap {
+ min-width: 12px;
+}
+.CodeMirror-scrollbar.cm-sb-ie7 {
+ min-width: 18px;
+}
+
+.CodeMirror-gutter {
+ position: absolute; left: 0; top: 0;
+ z-index: 10;
+ background-color: #f7f7f7;
+ border-right: 1px solid #eee;
+ min-width: 2em;
+ height: 100%;
+}
+.CodeMirror-gutter-text {
+ color: #aaa;
+ text-align: right;
+ padding: .4em .2em .4em .4em;
+ white-space: pre !important;
+ cursor: default;
+}
+.CodeMirror-lines {
+ padding: .4em;
+ white-space: pre;
+ cursor: text;
+}
+.CodeMirror-lines * {
+ /* Necessary for throw-scrolling to decelerate properly on Safari. */
+ pointer-events: none;
+}
+
+.CodeMirror pre {
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ -o-border-radius: 0;
+ border-radius: 0;
+ border-width: 0; margin: 0; padding: 0; background: transparent;
+ font-family: inherit;
+ font-size: inherit;
+ padding: 0; margin: 0;
+ white-space: pre;
+ word-wrap: normal;
+ line-height: inherit;
+ color: inherit;
+}
+
+.CodeMirror-wrap pre {
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ word-break: normal;
+}
+.CodeMirror-wrap .CodeMirror-scroll {
+ overflow-x: hidden;
+}
+
+.CodeMirror textarea {
+ outline: none !important;
+}
+
+.CodeMirror pre.CodeMirror-cursor {
+ z-index: 10;
+ position: absolute;
+ visibility: hidden;
+ border-left: 1px solid black;
+ border-right: none;
+ width: 0;
+}
+.cm-keymap-fat-cursor pre.CodeMirror-cursor {
+ width: auto;
+ border: 0;
+ background: transparent;
+ background: rgba(0, 200, 0, .4);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
+}
+/* Kludge to turn off filter in ie9+, which also accepts rgba */
+.cm-keymap-fat-cursor pre.CodeMirror-cursor:not(#nonsense_id) {
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
+.CodeMirror-focused pre.CodeMirror-cursor {
+ visibility: visible;
+}
+
+div.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
+
+.CodeMirror-searching {
+ background: #ffa;
+ background: rgba(255, 255, 0, .4);
+}
+
+/* Default theme */
+
+.cm-s-default span.cm-keyword {color: #708;}
+.cm-s-default span.cm-atom {color: #219;}
+.cm-s-default span.cm-number {color: #164;}
+.cm-s-default span.cm-def {color: #00f;}
+.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable-2 {color: #05a;}
+.cm-s-default span.cm-variable-3 {color: #085;}
+.cm-s-default span.cm-property {color: black;}
+.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-comment {color: #a50;}
+.cm-s-default span.cm-string {color: #a11;}
+.cm-s-default span.cm-string-2 {color: #f50;}
+.cm-s-default span.cm-meta {color: #555;}
+.cm-s-default span.cm-error {color: #f00;}
+.cm-s-default span.cm-qualifier {color: #555;}
+.cm-s-default span.cm-builtin {color: #30a;}
+.cm-s-default span.cm-bracket {color: #cc7;}
+.cm-s-default span.cm-tag {color: #170;}
+.cm-s-default span.cm-attribute {color: #00c;}
+.cm-s-default span.cm-header {color: blue;}
+.cm-s-default span.cm-quote {color: #090;}
+.cm-s-default span.cm-hr {color: #999;}
+.cm-s-default span.cm-link {color: #00c;}
+
+span.cm-header, span.cm-strong {font-weight: bold;}
+span.cm-em {font-style: italic;}
+span.cm-emstrong {font-style: italic; font-weight: bold;}
+span.cm-link {text-decoration: underline;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
3,215 lib/codemirror2/lib/codemirror.js
3,215 additions, 0 deletions not shown
124 lib/codemirror2/mode/css/css.js
@@ -0,0 +1,124 @@
+CodeMirror.defineMode("css", function(config) {
+ var indentUnit = config.indentUnit, type;
+ function ret(style, tp) {type = tp; return style;}
+
+ function tokenBase(stream, state) {
+ var ch = stream.next();
+ if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("meta", stream.current());}
+ else if (ch == "/" && stream.eat("*")) {
+ state.tokenize = tokenCComment;
+ return tokenCComment(stream, state);
+ }
+ else if (ch == "<" && stream.eat("!")) {
+ state.tokenize = tokenSGMLComment;
+ return tokenSGMLComment(stream, state);
+ }
+ else if (ch == "=") ret(null, "compare");
+ else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare");
+ else if (ch == "\"" || ch == "'") {
+ state.tokenize = tokenString(ch);
+ return state.tokenize(stream, state);
+ }
+ else if (ch == "#") {
+ stream.eatWhile(/[\w\\\-]/);
+ return ret("atom", "hash");
+ }
+ else if (ch == "!") {
+ stream.match(/^\s*\w*/);
+ return ret("keyword", "important");
+ }
+ else if (/\d/.test(ch)) {
+ stream.eatWhile(/[\w.%]/);
+ return ret("number", "unit");
+ }
+ else if (/[,.+>*\/]/.test(ch)) {
+ return ret(null, "select-op");
+ }
+ else if (/[;{}:\[\]]/.test(ch)) {
+ return ret(null, ch);
+ }
+ else {
+ stream.eatWhile(/[\w\\\-]/);
+ return ret("variable", "variable");
+ }
+ }
+
+ function tokenCComment(stream, state) {
+ var maybeEnd = false, ch;
+ while ((ch = stream.next()) != null) {
+ if (maybeEnd && ch == "/") {
+ state.tokenize = tokenBase;
+ break;
+ }
+ maybeEnd = (ch == "*");
+ }
+ return ret("comment", "comment");
+ }
+
+ function tokenSGMLComment(stream, state) {
+ var dashes = 0, ch;
+ while ((ch = stream.next()) != null) {
+ if (dashes >= 2 && ch == ">") {
+ state.tokenize = tokenBase;
+ break;
+ }
+ dashes = (ch == "-") ? dashes + 1 : 0;
+ }
+ return ret("comment", "comment");
+ }
+
+ function tokenString(quote) {
+ return function(stream, state) {
+ var escaped = false, ch;
+ while ((ch = stream.next()) != null) {
+ if (ch == quote && !escaped)
+ break;
+ escaped = !escaped && ch == "\\";
+ }
+ if (!escaped) state.tokenize = tokenBase;
+ return ret("string", "string");
+ };
+ }
+
+ return {
+ startState: function(base) {
+ return {tokenize: tokenBase,
+ baseIndent: base || 0,
+ stack: []};
+ },
+
+ token: function(stream, state) {
+ if (stream.eatSpace()) return null;
+ var style = state.tokenize(stream, state);
+
+ var context = state.stack[state.stack.length-1];
+ if (type == "hash" && context != "rule") style = "string-2";
+ else if (style == "variable") {
+ if (context == "rule") style = "number";
+ else if (!context || context == "@media{") style = "tag";
+ }
+
+ if (context == "rule" && /^[\{\};]$/.test(type))
+ state.stack.pop();
+ if (type == "{") {
+ if (context == "@media") state.stack[state.stack.length-1] = "@media{";
+ else state.stack.push("{");
+ }
+ else if (type == "}") state.stack.pop();
+ else if (type == "@media") state.stack.push("@media");
+ else if (context == "{" && type != "comment") state.stack.push("rule");
+ return style;
+ },
+
+ indent: function(state, textAfter) {
+ var n = state.stack.length;
+ if (/^\}/.test(textAfter))
+ n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1;
+ return state.baseIndent + n * indentUnit;
+ },
+
+ electricChars: "}"
+ };
+});
+
+CodeMirror.defineMIME("text/css", "css");
85 lib/codemirror2/mode/htmlmixed/htmlmixed.js
@@ -0,0 +1,85 @@
+CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
+ var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+ var jsMode = CodeMirror.getMode(config, "javascript");
+ var cssMode = CodeMirror.getMode(config, "css");
+
+ function html(stream, state) {
+ var style = htmlMode.token(stream, state.htmlState);
+ if (style == "tag" && stream.current() == ">" && state.htmlState.context) {
+ if (/^script$/i.test(state.htmlState.context.tagName)) {
+ state.token = javascript;
+ state.localState = jsMode.startState(htmlMode.indent(state.htmlState, ""));
+ state.mode = "javascript";
+ }
+ else if (/^style$/i.test(state.htmlState.context.tagName)) {
+ state.token = css;
+ state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+ state.mode = "css";
+ }
+ }
+ return style;
+ }
+ function maybeBackup(stream, pat, style) {
+ var cur = stream.current();
+ var close = cur.search(pat);
+ if (close > -1) stream.backUp(cur.length - close);
+ return style;
+ }
+ function javascript(stream, state) {
+ if (stream.match(/^<\/\s*script\s*>/i, false)) {
+ state.token = html;
+ state.localState = null;
+ state.mode = "html";
+ return html(stream, state);
+ }
+ return maybeBackup(stream, /<\/\s*script\s*>/,
+ jsMode.token(stream, state.localState));
+ }
+ function css(stream, state) {
+ if (stream.match(/^<\/\s*style\s*>/i, false)) {
+ state.token = html;
+ state.localState = null;
+ state.mode = "html";
+ return html(stream, state);
+ }
+ return maybeBackup(stream, /<\/\s*style\s*>/,
+ cssMode.token(stream, state.localState));
+ }
+
+ return {
+ startState: function() {
+ var state = htmlMode.startState();
+ return {token: html, localState: null, mode: "html", htmlState: state};
+ },
+
+ copyState: function(state) {
+ if (state.localState)
+ var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState);
+ return {token: state.token, localState: local, mode: state.mode,
+ htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+ },
+
+ token: function(stream, state) {
+ return state.token(stream, state);
+ },
+
+ indent: function(state, textAfter) {
+ if (state.token == html || /^\s*<\//.test(textAfter))
+ return htmlMode.indent(state.htmlState, textAfter);
+ else if (state.token == javascript)
+ return jsMode.indent(state.localState, textAfter);
+ else
+ return cssMode.indent(state.localState, textAfter);
+ },
+
+ compareStates: function(a, b) {
+ if (a.mode != b.mode) return false;
+ if (a.localState) return CodeMirror.Pass;
+ return htmlMode.compareStates(a.htmlState, b.htmlState);
+ },
+
+ electricChars: "/{}:"
+ }
+}, "xml", "javascript", "css");
+
+CodeMirror.defineMIME("text/html", "htmlmixed");
361 lib/codemirror2/mode/javascript/javascript.js
@@ -0,0 +1,361 @@
+CodeMirror.defineMode("javascript", function(config, parserConfig) {
+ var indentUnit = config.indentUnit;
+ var jsonMode = parserConfig.json;
+
+ // Tokenizer
+
+ var keywords = function(){
+ function kw(type) {return {type: type, style: "keyword"};}
+ var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
+ var operator = kw("operator"), atom = {type: "atom", style: "atom"};
+ return {
+ "if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
+ "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
+ "var": kw("var"), "const": kw("var"), "let": kw("var"),
+ "function": kw("function"), "catch": kw("catch"),
+ "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
+ "in": operator, "typeof": operator, "instanceof": operator,
+ "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom
+ };
+ }();
+
+ var isOperatorChar = /[+\-*&%=<>!?|]/;
+
+ function chain(stream, state, f) {
+ state.tokenize = f;
+ return f(stream, state);
+ }
+
+ function nextUntilUnescaped(stream, end) {
+ var escaped = false, next;
+ while ((next = stream.next()) != null) {
+ if (next == end && !escaped)
+ return false;
+ escaped = !escaped && next == "\\";
+ }
+ return escaped;
+ }
+
+ // Used as scratch variables to communicate multiple values without
+ // consing up tons of objects.
+ var type, content;
+ function ret(tp, style, cont) {
+ type = tp; content = cont;
+ return style;
+ }
+
+ function jsTokenBase(stream, state) {
+ var ch = stream.next();
+ if (ch == '"' || ch == "'")
+ return chain(stream, state, jsTokenString(ch));
+ else if (/[\[\]{}\(\),;\:\.]/.test(ch))
+ return ret(ch);
+ else if (ch == "0" && stream.eat(/x/i)) {
+ stream.eatWhile(/[\da-f]/i);
+ return ret("number", "number");
+ }
+ else if (/\d/.test(ch) || ch == "-" && stream.eat(/\d/)) {
+ stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
+ return ret("number", "number");
+ }
+ else if (ch == "/") {
+ if (stream.eat("*")) {
+ return chain(stream, state, jsTokenComment);
+ }
+ else if (stream.eat("/")) {
+ stream.skipToEnd();
+ return ret("comment", "comment");
+ }
+ else if (state.reAllowed) {
+ nextUntilUnescaped(stream, "/");
+ stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
+ return ret("regexp", "string-2");
+ }
+ else {
+ stream.eatWhile(isOperatorChar);
+ return ret("operator", null, stream.current());
+ }
+ }
+ else if (ch == "#") {
+ stream.skipToEnd();
+ return ret("error", "error");
+ }
+ else if (isOperatorChar.test(ch)) {
+ stream.eatWhile(isOperatorChar);
+ return ret("operator", null, stream.current());
+ }
+ else {
+ stream.eatWhile(/[\w\$_]/);
+ var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
+ return (known && state.kwAllowed) ? ret(known.type, known.style, word) :
+ ret("variable", "variable", word);
+ }
+ }
+
+ function jsTokenString(quote) {
+ return function(stream, state) {
+ if (!nextUntilUnescaped(stream, quote))
+ state.tokenize = jsTokenBase;
+ return ret("string", "string");
+ };
+ }
+
+ function jsTokenComment(stream, state) {
+ var maybeEnd = false, ch;
+ while (ch = stream.next()) {
+ if (ch == "/" && maybeEnd) {
+ state.tokenize = jsTokenBase;
+ break;
+ }
+ maybeEnd = (ch == "*");
+ }
+ return ret("comment", "comment");
+ }
+
+ // Parser
+
+ var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true};
+
+ function JSLexical(indented, column, type, align, prev, info) {
+ this.indented = indented;
+ this.column = column;
+ this.type = type;
+ this.prev = prev;
+ this.info = info;
+ if (align != null) this.align = align;
+ }
+
+ function inScope(state, varname) {
+ for (var v = state.localVars; v; v = v.next)
+ if (v.name == varname) return true;
+ }
+
+ function parseJS(state, style, type, content, stream) {
+ var cc = state.cc;
+ // Communicate our context to the combinators.
+ // (Less wasteful than consing up a hundred closures on every call.)
+ cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc;
+
+ if (!state.lexical.hasOwnProperty("align"))
+ state.lexical.align = true;
+
+ while(true) {
+ var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
+ if (combinator(type, content)) {
+ while(cc.length && cc[cc.length - 1].lex)
+ cc.pop()();
+ if (cx.marked) return cx.marked;
+ if (type == "variable" && inScope(state, content)) return "variable-2";
+ return style;
+ }
+ }
+ }
+
+ // Combinator utils
+
+ var cx = {state: null, column: null, marked: null, cc: null};
+ function pass() {
+ for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
+ }
+ function cont() {
+ pass.apply(null, arguments);
+ return true;
+ }
+ function register(varname) {
+ var state = cx.state;
+ if (state.context) {
+ cx.marked = "def";
+ for (var v = state.localVars; v; v = v.next)
+ if (v.name == varname) return;
+ state.localVars = {name: varname, next: state.localVars};
+ }
+ }
+
+ // Combinators
+
+ var defaultVars = {name: "this", next: {name: "arguments"}};
+ function pushcontext() {
+ if (!cx.state.context) cx.state.localVars = defaultVars;
+ cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
+ }
+ function popcontext() {
+ cx.state.localVars = cx.state.context.vars;
+ cx.state.context = cx.state.context.prev;
+ }
+ function pushlex(type, info) {
+ var result = function() {
+ var state = cx.state;
+ state.lexical = new JSLexical(state.indented, cx.stream.column(), type, null, state.lexical, info)
+ };
+ result.lex = true;
+ return result;
+ }
+ function poplex() {
+ var state = cx.state;
+ if (state.lexical.prev) {
+ if (state.lexical.type == ")")
+ state.indented = state.lexical.indented;
+ state.lexical = state.lexical.prev;
+ }
+ }
+ poplex.lex = true;
+
+ function expect(wanted) {
+ return function expecting(type) {
+ if (type == wanted) return cont();
+ else if (wanted == ";") return pass();
+ else return cont(arguments.callee);
+ };
+ }
+
+ function statement(type) {
+ if (type == "var") return cont(pushlex("vardef"), vardef1, expect(";"), poplex);
+ if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
+ if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
+ if (type == "{") return cont(pushlex("}"), block, poplex);
+ if (type == ";") return cont();
+ if (type == "function") return cont(functiondef);
+ if (type == "for") return cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"),
+ poplex, statement, poplex);
+ if (type == "variable") return cont(pushlex("stat"), maybelabel);
+ if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
+ block, poplex, poplex);
+ if (type == "case") return cont(expression, expect(":"));
+ if (type == "default") return cont(expect(":"));
+ if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
+ statement, poplex, popcontext);
+ return pass(pushlex("stat"), expression, expect(";"), poplex);
+ }
+ function expression(type) {
+ if (atomicTypes.hasOwnProperty(type)) return cont(maybeoperator);
+ if (type == "function") return cont(functiondef);
+ if (type == "keyword c") return cont(maybeexpression);
+ if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeoperator);
+ if (type == "operator") return cont(expression);
+ if (type == "[") return cont(pushlex("]"), commasep(expression, "]"), poplex, maybeoperator);
+ if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeoperator);
+ return cont();
+ }
+ function maybeexpression(type) {
+ if (type.match(/[;\}\)\],]/)) return pass();
+ return pass(expression);
+ }
+
+ function maybeoperator(type, value) {
+ if (type == "operator" && /\+\+|--/.test(value)) return cont(maybeoperator);
+ if (type == "operator" || type == ":") return cont(expression);