Difference between revisions of "Internet 2 Workshop"

From Digipool-Wiki
Jump to: navigation, search
(→‎Javascript for Artists)
 
Line 11: Line 11:
 
* Processing ist DIE Einsteiger Software für das Programmieren-Lernen. Mit [http://processingjs.org Processing.js] kann man Processing-Code auch JavaScript verwenden. [http://processing.org www.processing.org]
 
* Processing ist DIE Einsteiger Software für das Programmieren-Lernen. Mit [http://processingjs.org Processing.js] kann man Processing-Code auch JavaScript verwenden. [http://processing.org www.processing.org]
 
* Eine Webseite auf die das iPhone als Webbrowser simuliert wird [http://www.testiphone.com www.testiphone.com]
 
* Eine Webseite auf die das iPhone als Webbrowser simuliert wird [http://www.testiphone.com www.testiphone.com]
−
 
−
<br>
 
−
 
−
== Examples ==
 
−
 
−
=== Getting started ===
 
−
 
−
HTML-Datei: example001.htm
 
−
<source lang="html4strict">
 
−
<head>
 
−
  <title>Test</title>
 
−
    <script language="JavaScript" src="meinscript.js" type="text/javascript">
 
−
  </script>
 
−
</head>
 
−
 
−
<body>
 
−
</body>
 
−
</source>
 
−
 
−
JavaScript-Datei: meinscript.js
 
−
<source lang="javascript">
 
−
// show a pop-up
 
−
alert("Hi!");
 
−
 
−
/*
 
−
  write "done." to the webpage
 
−
*/
 
−
document.write("done.");
 
−
</source>
 
−
 
−
Online-Test: [http://www.digipool.info/tutorials/js001/example001.htm example001.htm]
 
−
 
−
<br>
 
−
 
−
 
−
=== Graphic 1 ===
 
−
 
−
HTML-Datei: example002.htm
 
−
<source lang="html4strict">
 
−
<head>
 
−
  <title>Test2</title>
 
−
  <script type="text/javascript" src="http://www.walterzorn.de/en/scripts/wz_jsgraphics.js"></script>
 
−
 
−
</head>
 
−
 
−
<body>
 
−
<script language="JavaScript" src="graphic001.js" type="text/javascript"></script>
 
−
</body>
 
−
</source>
 
−
 
−
JavaScript-Datei: graphic001.js
 
−
<source lang="javascript">
 
−
var e1 = new jsGraphics(); // paint graphic-layer directly to the screen
 
−
// "e1" is a variable that can be named by you
 
−
 
−
e1.setColor("#000000"); // black
 
−
e1.drawEllipse(50, 50, 40, 40); // x, y, height, width
 
−
e1.paint(); // paint the object "e1" directly to the screen
 
−
</source>
 
−
 
−
Online-Test: [http://www.digipool.info/tutorials/js001/example002.htm example002.htm]
 
−
 
−
<br>
 
−
 
−
=== Processing 1 ===
 
−
 
−
HTML-Datei: processing001.htm
 
−
<source lang="html4strict">
 
−
<head>
 
−
  <title>ProcessingTest1</title>
 
−
      <script src="processing-1.1.0.min.js"></script> 
 
−
      <canvas data-processing-sources="processing001.pde"></canvas>
 
−
</head>
 
−
 
−
<body>
 
−
</body>
 
−
</source>
 
−
 
−
 
−
Processing-Datei: processing001.pde
 
−
<source lang="java">
 
−
void setup() {
 
−
  size(320,365);
 
−
  background(80);
 
−
}
 
−
 
−
void draw() { 
 
−
  stroke(200);
 
−
  smooth();
 
−
  line(0, 0, width, height);
 
−
}
 
−
</source>
 
−
 
−
Uploade die Datei "[http://processingjs.org/content/download/processing-js-1.1.0/processing-1.1.0.min.js processing-1.1.0.min.js]" auf dem Web-Server neben die HTML-Datei und die Processing-Datei in den gleichen Ordner! <br>
 
−
<br>
 
−
Online-Test: [http://www.digipool.info/tutorials/js001/processing001.htm processing001.htm]
 
−
 
−
<br>
 
−
 
−
Online-Test: [http://www.digipool.info/tutorials/js001/processing002.htm processing002.htm]
 
  
 
<br>
 
<br>

Latest revision as of 13:55, 3 June 2012

Javascript for Artists

Javascript-Tutorial mit kreativer Zielsetzung: Javascript for Artists


Tools

  • Textbearbeitungsprogramm zum Schreiben des Codes TextWrangler
  • FTP-Programm zum Hochladen des Codes auf den WWW-Sever Cyberduck
  • Processing ist DIE Einsteiger Software für das Programmieren-Lernen. Mit Processing.js kann man Processing-Code auch JavaScript verwenden. www.processing.org
  • Eine Webseite auf die das iPhone als Webbrowser simuliert wird www.testiphone.com


Javascript Tutorials


Retrieved from "http://www.digipool.info/m/index.php?title=Internet_2_Workshop&oldid=2111"