# Point

## Construction of a free point

This example shows how to construct a simple, draggable point. It is produced by the following commands:

```
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p = board.create('point',[-3,1]);
</script>
```

The JavaScript code has to be placed AFTER the div element which will contain the construction. From now on, we will only show the JavaScript code.

## Attributes of a point

### User defined name

Several attributes can be given to change the properties of a point, for example a name.

```
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
var p = b2.create('point',[1,1], {name:'X',size:3});
```

This point will be labeled with "X":

### Point faces and sizes

Meanwhile point style is superseded by the attributes *face* and *size*, which allow a better control of the display of points.

```
var b3a = JXG.JSXGraph.initBoard('jxgbox3a', {boundingbox: [-1, 2.5, 14, -2.5]});
b3a.create('point',[1,0], {face:'o'}); // or circle
b3a.create('point',[2,0], {face:'[]'}); // or square
b3a.create('point',[3,0], {face:'x'}); // or cross
b3a.create('point',[4,0], {face:'+'}); // or plus
b3a.create('point',[5,0], {face:'^'}); // or triangleUp
b3a.create('point',[6,0], {face:'v'}); // or triangleDown
b3a.create('point',[7,0], {face:'>'}); // or triangleLeft
b3a.create('point',[8,0], {face:'<'}); // or triangleRight
b3a.create('point',[9,0], {face:'<>'}); // or diamond
```

The size of the points can be controlled independently.

```
var b3b = JXG.JSXGraph.initBoard('jxgbox3b', {boundingbox: [-1, 2.5, 14, -2.5]});
b3b.create('point',[1,0], {face:'o', size:1});
b3b.create('point',[2,0], {face:'o', size:2});
b3b.create('point',[3,0], {face:'o', size:4});
b3b.create('point',[5,0], {face:'o', size:8});
b3b.create('point',[7,0], {face:'o', size:16});
b3b.create('point',[10,0], {face:'o', size:32});
```

### Fixed points

A property of an element may also be set after creating it. In the above example we set the property fixed of the last point, P_12, to true. I.e. the point is no longer draggable.

```
p.setAttribute({fixed:true});
```

### Dependent points

A point can depend on any other geometric object. This dependence can be given by using JavaScript functions or terms in GEONExT syntax for coordinates.

#### GEONExT syntax

Here is an example using GEONExT syntax. The point A is draggable. The point B depends on point A: Its y-coordinate is set to 1 and its x-coordinate is set to the x-coordinate of A.

```
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 2.5, 14, -2.5]});
var free = b.create('point',[0,0], {name:'A', size:3});
var dep = b.create('point',["X(A)",1], {name:'B', face:'[]', size:3});
```

#### JavaScript syntax

Now we do exactly the same with JavaScript syntax.

```
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 2.5, 14, -2.5]});
var free = b.create('point',[0,0], {name:'A', size:3});
var dep = b.create('point',[function(){ return free.X();}, 1], {name:'B', face:'[]', size:3});
```

```
var free = b.create('point',[0,0], {name:'A', size:3});
```

Then we construct the dependent point "dep".

```
var dep = b.create('point',[function(){ return free.X();}, 1], {name:'B', face:'[]', size:3});
```

The first coordinate of "dep" is given as an anonymous function:

```
function(){ return free.X();}
```

This function returns the x-coordinate of the point "free".