pxt-calliope/docs/reference/js/editor.md
2016-04-13 08:27:45 -07:00

113 lines
5.2 KiB
Markdown

# Touch Develop Editor
The Touch Develop editor.
### @parent js/contents
The Touch Develop editor is where you write and test your code. If you're new to Touch Develop, check out the [Touch Develop editor video](/getting-started/touchdevelop-editor).
To create a new Touch Develop script:
1. Go to the micro:bit website and click **Create Code** (along the top).
2. Under the Touch Develop editor heading, click **New project**.
3. Type a name for your script and click **create**.
An empty script with a [function](/js/function) called `main` is created.
## The Editor Menu Bar
The Touch Develop editor has a bar of options above the code area:
![](/static/mb/data-1.jpg)
* `my scripts` takes you back to a list of your scripts (My Scripts). The open script is automatically saved (in the cloud) when you leave the editor.
* `run` executes your script, showing you the results on the on-screen micro:bit device. See [run scripts in the browser](/js/simulator) for more about this.
* `compile` sends your script to an ARM compiler, which creates a file that you can run on your micro:bit. See [run scripts on your micro:bit](/device/usb) for more info.
* `undo` undoes changes that you made to your script.
* `search code...` search for functions in libraries such as the micro:bit library.
* `script` opens script options, where you can do things like publish and preview. See **script options** below.
Many of the above buttons aren't much use until you've written some code, so let's move on to the Code Keyboard.
## Code Keyboard
The Code Keyboard makes it easy to write code on a touch screen device or by using your mouse. You can also type code using your computer keyboard if you know what function or statement you want (see [Touch Develop documentation](/js/contents) for a complete list).
To open the Code Keyboard, click on a line of code:
![](/static/mb/data-2.jpg)
An on-screen keyboard appears, with buttons that vary depending on what's selected.
### Statements
The first row of the Code Keyboard has Touch Develop [statements](/js/statements) that you can insert into your code. These buttons are blue and include things like [var](/reference/variables/var), [if](/reference/logic/if), [for](/reference/loops/for) , and [while](/js/while). Click `more` to see additional statements.
### The BBC micro:bit, math, and code buttons
* `micro:bit`: click to see all the [micro:bit functions](/js/contents); click `more` to scroll left to right. The micro:bit functions are also grouped together behind the following category buttons: `basic`, `control`, `input`, `image`, `led`, and`pins`
* `code`: click to access functions you've written (see [call a function](/js/call) for more info)
* `math`: click to see [math functions](/js/math); such as `abs` and `round`
* `bits`: click to see functions for bit-level manipulation of integers
### Editing code: add, copy, paste, and cut
In the coding area...
* **add**: to add a new line, click on a line and then click a **+** to add a new line above or below the current line
* **copy, paste, cut**: click on a line then click **copy** or **cut**. Then click on a new line, and click **paste**.
### Block editing
To copy, cut, or comment out a block of code (more than one line):
1. Click on a line of code.
2. Press and hold the `Shift` key, and then press the `Up arrow` or `Down arrow` key on your keyboard (this selects multiple lines).
3. Choose a block editing option like copy, cut, or [comment out](/js/comment).
### Script options
Click `script` (in the upper-right corner) to open the script options:
![](/static/mb/data-3.jpg)
Here you'll find options like...
* `script properties`: the script name, description, and whether or not the script is a library (more info below)
* `publish`: share a script with other users by [publishing](/js/publishing) it
* `share`: share a link to a published script (see [publish as script](/js/publishing) for more info)
* `preview`: preview a documentation script
* `+` `add new`: add a new [function](/js/function), [global variable](/js/data), picture, or library to a script
* *code*: the functions in your script; click a function to open it in the editor
* *global vars*: the [global variables](/js/data) in your script; click a variable to go to that variable
* *libraries*: the libraries added to your script
* *art*: picture and video resources added to your script
### Script properties
To edit a script's properties, click `script` (in the upper-right corner), and then click the script name or script properties.
![](/static/mb/data-4.png)
* `name`: the script's name (60 character limit)
* `description`: a description of what your script does along with #hashtags for search (for example, #game or #maker). Hashtags are especially important if you publish your script (200 character limit).
* `this script is a library`: click this check box to turn a script into a library
### Comments
Comments are notes within your scripts. To learn how to insert comments into your scripts, see [Comments](/js/comment). You can format your comments using [markdown syntax](/js/markdown).
### Share your scripts
Share your scripts with other people by publishing them. See [publish a script](/js/publishing) for more info.
### See also
[publish a script](/js/publishing), [Touch Develop documentation](/js/contents)