Javascript for Artists

From Digipool-Wiki
Jump to: navigation, search

Javascript for Artists

Javascript-Tutorial mit kreativer Zielsetzung.


  • 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.
  • Eine Webseite auf die das iPhone als Webbrowser simuliert wird


Getting started

HTML-Datei: example001.htm <source lang="html4strict"> <head>

    <script language="JavaScript" src="meinscript.js" type="text/javascript">


<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: example001.htm

Graphic 1

HTML-Datei: example002.htm <source lang="html4strict"> <head>

  		<script type="text/javascript" src=""></script>


<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: example002.htm

Processing 1

HTML-Datei: processing001.htm <source lang="html4strict"> <head>

      <script src="processing-1.1.0.min.js"></script>  
      <canvas data-processing-sources="processing001.pde"></canvas> 


<body> </body> </source>

Processing-Datei: processing001.pde <source lang="java"> void setup() {



void draw() {

 line(0, 0, width, height);

} </source>

Uploade die Datei "processing-1.1.0.min.js" auf dem Web-Server neben die HTML-Datei und die Processing-Datei in den gleichen Ordner!

Online-Test: processing001.htm

Online-Test: processing002.htm

Javascript Tutorials

Android Programmierung mit Processing