Permalink
Browse files

Create a pyjaco example that utilizes jQuery.

This example uses the pyjs.py script to compile a single javascript file.
  • Loading branch information...
Dusty Phillips
Dusty Phillips committed Dec 27, 2011
1 parent 1c4af8c commit 6971a5808b090de1dd749653441e0b9e370360e3
Showing with 44 additions and 0 deletions.
  1. +16 −0 examples/jquery/README
  2. +16 −0 examples/jquery/clicker.py
  3. +12 −0 examples/jquery/index.html
View
@@ -0,0 +1,16 @@
+An example of using pyjaco to build a stand-alone javascript file that can be
+included with HTML. I like this method as it allows separating javascript from
+HTML and can therefore be used with a variety of backend setups.
+
+First run the following command in the main pyjaco directory:
+
+# python generate_library.py
+
+This will create the py-builtins.js that is included in the index.html file
+
+Next, generate the clicker.js javascript from clicker.py:
+
+python pyjs.py -N --output clicker.js
+
+Now you can load index.html in a browser and click the heading for a simple
+jQuery interaction.
View
@@ -0,0 +1,16 @@
+@JSVar("jQuery")
+def ready():
+ jQuery('h1').click(on_click)
+
+@JSVar("jQuery", "Math.random", "Math.floor")
+def on_click():
+ if jQuery('#when_clicked').html():
+ r = Math.floor(Math.random() * 255)
+ g = Math.floor(Math.random() * 255)
+ b = Math.floor(Math.random() * 255)
+ color = "rgb(%d, %d, %d)" %(r,g,b)
+ jQuery('#when_clicked').attr('style', 'background-color: ' + color)
+ else:
+ jQuery('#when_clicked').html("you clicked it!")
+
+jQuery(ready)
View
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="../../py-builtins.js"></script>
+ <script type="text/javascript" src="clicker.js"></script>
+ </head>
+<body>
+ <h1>Click me</h1>
+ <p id="when_clicked"></p>
+</body>
+</html>

0 comments on commit 6971a58

Please sign in to comment.