Create your own constructions/visualizations using JavaScript: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 42: | Line 42: | ||
The complete code: | The complete code: | ||
<source lang="xml"> | <source lang="xml"> | ||
<head> | |||
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script> | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | ||
</head> | |||
<body> | |||
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div> | <div id="box" class="jxgbox" style="width:400px; height:400px;"></div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true}); | var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true}); | ||
</script> | </script> | ||
</body> | |||
</source> | </source> | ||
<html> | <html> | ||
=== Fourth step: [[Creating geometric elements]] === | === Fourth step: [[Creating geometric elements]] === | ||
Revision as of 22:13, 23 June 2009
First step
Link to prototye.js and to jsxgraphcore.js:
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
Second step
Insert a div inside of the document body:
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
Third step
Connect JXG with the div (usually at the end of the document body) and call initBoard():
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
</script>
- Parameter 1: id of the div tag
- Parameter 2: properties of the board. Possible entries are:
- originX
- originY
- unitX
- unitY
- zoomX
- zoomY
More than one boards can be initialised simultaneously in one HTML file. The result:
The complete code:
<head>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</head>
<body>
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
</script>
</body>
<html>
