Javascript for Artists

From Digipool-Wiki
Revision as of 17:03, 15 July 2013 by WikiSysop (Talk | contribs) (Android Programmierung mit Processing)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Javascript for Artists

Javascript-Tutorial mit kreativer Zielsetzung.


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


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



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


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