more migration to common docs (#370)
* more migration to common docs * refactoring js * removed duplicate docs * migrating more docs * more refactoring * migrated browsers page * updated summary
This commit is contained in:
Peli de Halleux
GitHub
parent
1acad5195e
commit
fb5bb396e1
@ -1,15 +1,17 @@
|
||||
# Summary
|
||||
# @extends
|
||||
|
||||
## #support
|
||||
|
||||
* [Support](https://support.microbit.org/)
|
||||
|
||||
### Projects
|
||||
## #projects
|
||||
|
||||
* [Projects](/docs)
|
||||
* [Make](/projects)
|
||||
* [Flashing heart](/projects/flashing-heart)
|
||||
* [Smiley buttons](/projects/smiley-buttons)
|
||||
* [Love meter](/projects/love-meter)
|
||||
* [Rock raper scissors](/projects/rock-paper-scissors)
|
||||
* [Rock paper scissors](/projects/rock-paper-scissors)
|
||||
* [Magic button trick](/projects/magic-button-trick)
|
||||
* [Hack your headphones](/projects/hack-your-headphones)
|
||||
* [Banana keyboard](/projects/banana-keyboard)
|
||||
@ -29,7 +31,7 @@
|
||||
* [Plot light level](/examples/plot-light-level)
|
||||
* [Plot analog pin](/examples/plot-analog-pin)
|
||||
|
||||
### Reference
|
||||
## #reference
|
||||
|
||||
* [Reference](/reference)
|
||||
* [Basic](/reference/basic)
|
||||
@ -85,36 +87,6 @@
|
||||
* [set transmit serial number](/reference/radio/set-transmit-serial-number)
|
||||
* [write received packet to serial](/reference/radio/write-received-packet-to-serial)
|
||||
|
||||
### Blocks
|
||||
|
||||
* [Blocks](/blocks)
|
||||
* [Loops](/blocks/loops)
|
||||
* [for](/blocks/loops/for)
|
||||
* [while](/blocks/loops/while)
|
||||
* [Logic](/blocks/logic)
|
||||
* [if](/blocks/logic/if)
|
||||
* [Boolean](/blocks/logic/boolean)
|
||||
* [Variables](/blocks/variables)
|
||||
* [assign](/blocks/variables/assign)
|
||||
* [change var](/blocks/variables/change-var)
|
||||
* [var](/blocks/variables/var)
|
||||
|
||||
### JavaScript
|
||||
|
||||
* [JavaScript](/javascript)
|
||||
* [Calling](/javascript/call)
|
||||
* [Sequencing](/javascript/sequence)
|
||||
* [Variables](/javascript/variables)
|
||||
* [Operators](/javascript/operators)
|
||||
* [Statements](/javascript/statements)
|
||||
* [Functions](/javascript/functions)
|
||||
* [Types](/javascript/types)
|
||||
* [Classes](/javascript/classes)
|
||||
|
||||
### Other
|
||||
## #other
|
||||
|
||||
* [Hardware](/device)
|
||||
|
||||
* [FAQ](/faq)
|
||||
* [Help Translate](/translate)
|
||||
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
# Blocks language
|
||||
|
||||
### @description Language constructs for the Block editor.
|
||||
|
||||
Blocks snap into each other to define the program that your @boardname@ will run.
|
||||
Blocks can be event (buttons, shake, ...) or need to be snapped into an event to run.
|
||||
The [on-start](/blocks/on-start) event runs first.
|
||||
|
||||
```namespaces
|
||||
for (let i = 0;i<5;++i) {}
|
||||
if (true){}
|
||||
let x = 0;
|
||||
Math.random(5);
|
||||
```
|
||||
|
||||
## See Also
|
||||
|
||||
[logic](/blocks/logic), [loops](/blocks/loops), [math](/blocks/math), [variables](/blocks/variables), [on-start](/blocks/on-start), [javascript blocks](/blocks/javascript-blocks)
|
||||
@ -1,65 +0,0 @@
|
||||
# JavaScript Block
|
||||
|
||||
JavaScript is a very powerful language; so powerful that some concepts in
|
||||
JavaScript can't be shown using blocks. When PXT encounters a piece of code
|
||||
that can't be converted into blocks, it instead creates a grey JavaScript block
|
||||
to preserve it. These blocks get converted right back into the original
|
||||
JavaScript when you switch back to the text editor.
|
||||
|
||||
```blocks
|
||||
for (let index = 0; index <= 5; index++) {
|
||||
basic.showNumber(fibonacci(index))
|
||||
}
|
||||
|
||||
function fibonacci(n: number): number {
|
||||
if (n === 0 || n === 1) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return fibonacci(n - 1) + fibonacci(n - 2);
|
||||
}
|
||||
```
|
||||
|
||||
The code in JavaScript blocks cannot be edited, but the blocks
|
||||
themselves can be moved, copied, pasted, and deleted just like any
|
||||
other block.
|
||||
|
||||
|
||||
## How do I get my JavaScript code to convert without any grey blocks?
|
||||
|
||||
The easiest way to write code that will convert cleanly back to blocks
|
||||
is to write the code using blocks and convert it to JavaScript. Many blocks
|
||||
have a very specifc structure to their JavaScript that must be
|
||||
followed in order to have them convert properly. If you have a
|
||||
piece of your code that does not convert, try looking at the block
|
||||
you were expecting and the JavaScript it produces.
|
||||
|
||||
For example, a for-loop must have this structure to convert to a block:
|
||||
|
||||
```typescript
|
||||
for (let x = 0; x <= 5; x++) {
|
||||
}
|
||||
```
|
||||
|
||||
The following examples can't be represented by the blocks:
|
||||
|
||||
```typescript
|
||||
// Condition must be either < or <= with a variable on the left side
|
||||
for (let x = 0; x > -1; x++) {
|
||||
}
|
||||
|
||||
// The variable in the condition and incrementor must be the declared variable
|
||||
for (let x = 0; x <= 5; y++) {
|
||||
}
|
||||
|
||||
// The declared variable must be initialized to 0
|
||||
for (let x = 2; x <= 5; x++) {
|
||||
}
|
||||
|
||||
// All three parts of the for-loop must be present
|
||||
for (;;) {
|
||||
}
|
||||
```
|
||||
|
||||
Try to match the JavaScript of the desired block as closely as
|
||||
possible.
|
||||
@ -1,9 +0,0 @@
|
||||
# Logic
|
||||
|
||||
```cards
|
||||
if(true) {}
|
||||
true;
|
||||
true && false;
|
||||
!true;
|
||||
1 != 0;
|
||||
```
|
||||
@ -1,77 +1,8 @@
|
||||
# Boolean
|
||||
# @extends
|
||||
|
||||
true or false.
|
||||
## #examples
|
||||
|
||||
A Boolean has one of two possible values: `true`; `false`. Boolean (logical) operators (*and*, *or*, *not*) take Boolean inputs and yields a Boolean value. Comparison operators on other types ([numbers](/reference/types/number), [strings](/reference/types/string) yields a Boolean value.
|
||||
|
||||
The following blocks represent the true and false Boolean values, which can be plugged in anywhere a Boolean value is expected:
|
||||
|
||||
```blocks
|
||||
true;
|
||||
false;
|
||||
```
|
||||
|
||||
The next three blocks represent the three Boolean (logic) operators:
|
||||
|
||||
```blocks
|
||||
true && false;
|
||||
true || false;
|
||||
!true;
|
||||
```
|
||||
|
||||
The next six blocks represent comparison operators that yield a Boolean value. Most comparisons you will do involve [numbers](/reference/types/number):
|
||||
|
||||
```blocks
|
||||
42 == 0;
|
||||
42 != 0;
|
||||
42 < 0;
|
||||
42 > 0;
|
||||
42 <= 0;
|
||||
42 >= 0;
|
||||
```
|
||||
|
||||
Boolean values and operators are often used with an [if](/blocks/logic/if) or [while](/blocks/loops/while) statement to determine which code will execute next. For example:
|
||||
|
||||
### Functions that return a Boolean
|
||||
|
||||
Some functions return a Boolean value, which you can store in a Boolean variable. For example, the following code gets the on/off state of `point (1, 2)` and stores this in the Boolean variable named `on`. Then the code clears the screen if `on` is `true`:
|
||||
|
||||
### Boolean operators
|
||||
|
||||
Boolean operators take Boolean inputs and evaluate to a Boolean output:
|
||||
|
||||
### Conjunction: `A and B`
|
||||
|
||||
`A and B` evaluates to `true` if-and-only-if both A and B are true:
|
||||
|
||||
```blocks
|
||||
false && false == false;
|
||||
false && true == false;
|
||||
true && false == false;
|
||||
true && true == true;
|
||||
```
|
||||
|
||||
### Disjunction: `A or B`
|
||||
|
||||
`A or B` evaluates to `true` if-and-only-if either A is true or B is true:
|
||||
|
||||
```blocks
|
||||
false || false == false;
|
||||
false || true == true;
|
||||
true || false == true;
|
||||
true || true == true;
|
||||
```
|
||||
|
||||
### Negation: `not A`
|
||||
|
||||
`not A` evaluates to the opposite (negation) of A:
|
||||
|
||||
```blocks
|
||||
!false == true;
|
||||
!true == false;
|
||||
```
|
||||
|
||||
### Example
|
||||
### Example: ``AND`` operator
|
||||
|
||||
This example turns on LED `3 , 3`, if LEDs `1 , 1` and `2 , 2` are both on:
|
||||
|
||||
@ -81,7 +12,7 @@ if (led.point(1,1) && led.point(2,2)) {
|
||||
}
|
||||
```
|
||||
|
||||
### Comparisons of numbers and strings
|
||||
### Example: Comparisons of numbers and strings
|
||||
|
||||
When you compare two Numbers, you get a Boolean value, such as the comparison `x < 5` in the code below:
|
||||
|
||||
@ -97,8 +28,3 @@ input.onButtonPressed(Button.A, () => {
|
||||
```
|
||||
|
||||
See the documentation on [Numbers](/reference/types/number) for more information on comparing two Numbers. You can also [compare strings](/reference/types/string-functions) using the `equals` function.
|
||||
|
||||
### See also
|
||||
|
||||
[if](/blocks/logic/if), [while](/blocks/loops/while), [number](/reference/types/number)
|
||||
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
# If
|
||||
# @extends
|
||||
|
||||
### @parent blocks/language
|
||||
|
||||
|
||||
Conditionally run code depending on whether a [Boolean](/blocks/logic/boolean) condition is true or false.
|
||||
|
||||
```blocks
|
||||
if(true) {
|
||||
}
|
||||
```
|
||||
|
||||
Click on the dark blue gear icon (see above) to add an *else* or *if* to the current block.
|
||||
## #examples
|
||||
|
||||
### Example: adjusting screen brightness
|
||||
|
||||
@ -23,8 +13,3 @@ input.onButtonPressed(Button.A, () => {
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[while loop](/blocks/loops/while), [for](/blocks/loops/for), [boolean](/blocks/logic/boolean)
|
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
# Loops
|
||||
|
||||
```cards
|
||||
for(let i = 0;i<5;i++) {}
|
||||
while(true) {}
|
||||
basic.forever(() => {});
|
||||
```
|
||||
@ -1,13 +1,6 @@
|
||||
# For
|
||||
# @extends
|
||||
|
||||
### @parent blocks/language
|
||||
|
||||
Run part of the program the number of times you say.
|
||||
|
||||
```block
|
||||
for(let i = 0; i <= 4; ++i) {
|
||||
}
|
||||
```
|
||||
## #examples
|
||||
|
||||
### Example: Count to 4
|
||||
|
||||
@ -20,8 +13,3 @@ input.onButtonPressed(Button.A, () => {
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[repeat](/blocks/loops/repeat), [while](/blocks/loops/while), [if](/blocks/logic/if), [show number](/reference/basic/show-number)
|
||||
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
# Repeat
|
||||
|
||||
Run part of the program the number of times you say.
|
||||
|
||||
### Block Editor
|
||||
|
||||
|
||||
|
||||
### See also
|
||||
|
||||
[for](/blocks/loops/for), [while](/blocks/loops/while), [if](/blocks/logic/if), [show number](/reference/basic/show-number)
|
||||
|
||||
@ -1,15 +1,6 @@
|
||||
# While
|
||||
# @extends
|
||||
|
||||
Repeat code while a [Boolean](/blocks/logic/boolean) `condition` is true.
|
||||
|
||||
```block
|
||||
while(true) {
|
||||
}
|
||||
```
|
||||
|
||||
The while loop has a *condition* that evaluates to a [Boolean](/blocks/logic/boolean) value. After the `do` keyword, add the code that you want to run while the `condition` is `true`. The while loop concludes with `end while`.
|
||||
|
||||
The condition is tested before any code runs. Which means that if the condition is false, the code inside the loop doesn't execute.
|
||||
## #examples
|
||||
|
||||
### Example: diagonal line
|
||||
|
||||
@ -24,8 +15,3 @@ input.onButtonPressed(Button.A, () => {
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[on button pressed](/reference/input/on-button-pressed), [for](/blocks/loops/for), [if](/blocks/logic/if), [forever](/reference/basic/forever)
|
||||
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
# Math
|
||||
|
||||
### [Numeric](/reference/types/number) values: 0, 1, 2, ...
|
||||
|
||||
```block
|
||||
0;
|
||||
1;
|
||||
2;
|
||||
```
|
||||
|
||||
### Arithmetic binary operation (+, -, *, /)
|
||||
|
||||
```block
|
||||
0+1;
|
||||
0-1;
|
||||
1*2;
|
||||
3/4;
|
||||
```
|
||||
|
||||
### Absolute value
|
||||
|
||||
```block
|
||||
Math.abs(-5);
|
||||
```
|
||||
|
||||
### Minimum/maximum of two values
|
||||
|
||||
```block
|
||||
Math.min(0, 1);
|
||||
```
|
||||
|
||||
### Random value
|
||||
|
||||
```block
|
||||
Math.random(5);
|
||||
```
|
||||
@ -1,11 +1,6 @@
|
||||
# On Start
|
||||
# @extends
|
||||
|
||||
An event that runs when the program starts.
|
||||
|
||||
The ``on start`` is a special event that runs when the program starts, before any other event.
|
||||
Use this event to initialize your program.
|
||||
|
||||
## Example
|
||||
## #exstart
|
||||
|
||||
In this example, ``on start`` sets a dimmer brightness on the screen and the button handler shows a string.
|
||||
|
||||
@ -15,14 +10,3 @@ input.onButtonPressed(Button.A, () => {
|
||||
})
|
||||
led.setBrightness(50)
|
||||
```
|
||||
|
||||
## What about JavaScript?
|
||||
|
||||
``on-start`` only exists in the block editor. In JavaScript, all code executes sequentially from the first line.
|
||||
|
||||
## Hey, my events moved!
|
||||
|
||||
When we transform the blocks into JavaScript, we always place all the event registrations (buttons, shake, ...)
|
||||
before launching the ``on start`` code.
|
||||
|
||||
If a block from ``on start`` pauses, other registered events will have the opportunity to run as well.
|
||||
@ -1,21 +0,0 @@
|
||||
# Variables
|
||||
|
||||
[Assign](/blocks/variables/assign) (set) a variable's value
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
```
|
||||
|
||||
Get a variable's value
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
x;
|
||||
```
|
||||
|
||||
[Change](/blocks/variables/change-var) a variable's value
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
x+=1;
|
||||
```
|
||||
@ -1,40 +0,0 @@
|
||||
# Change Value
|
||||
|
||||
Set the value for local and global variables.
|
||||
|
||||
### @parent blocks/change-value
|
||||
|
||||
Change the value of a variable
|
||||
|
||||
```blocks
|
||||
let x = 0
|
||||
x += 1
|
||||
```
|
||||
|
||||
### Declare a variable
|
||||
|
||||
Use the assignment operator to set the value of a [variable](/blocks/variables/var). Change the value of a variable from 0 to 1 using the change item block. Like this:
|
||||
|
||||
```blocks
|
||||
let x = 0
|
||||
x += 1
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
Use the assignment operator to set the value of a [variable](/blocks/variables/var). Change the value of a variable from 0 to 1 using the change item block. Then display the new value of the variable on the LED screen. Like this:
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
x += 1;
|
||||
basic.showNumber(x);
|
||||
```
|
||||
|
||||
### Notes
|
||||
|
||||
* You can use the assignment operator with variables of each of the supported [types](/reference/types).
|
||||
|
||||
### See also
|
||||
|
||||
[variable](/blocks/variables/var), [types](/reference/types)
|
||||
|
||||
13
docs/blocks/variables/change.md
Normal file
13
docs/blocks/variables/change.md
Normal file
@ -0,0 +1,13 @@
|
||||
# @extends
|
||||
|
||||
## #examples
|
||||
|
||||
### Example: show the value of a variable
|
||||
|
||||
Use the assignment operator to set the value of a [variable](/blocks/variables/var). Change the value of a variable from 0 to 1 using the change item block. Then display the new value of the variable on the LED screen. Like this:
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
x += 1;
|
||||
basic.showNumber(x);
|
||||
```
|
||||
103
docs/browsers.md
103
docs/browsers.md
@ -1,103 +0,0 @@
|
||||
# Unsupported configuration
|
||||
|
||||
Your browser is currently not supported. The following configurations are supported:
|
||||
|
||||
## Windows
|
||||
|
||||
You need one of these browsers running on Windows 7, Windows 8, Windows 8.1, or
|
||||
Windows 10:
|
||||
|
||||
* Internet Explorer 11
|
||||
* Microsoft Edge
|
||||
* Google Chrome
|
||||
* Mozilla Firefox
|
||||
|
||||
## Mac
|
||||
|
||||
You need one of these browsers running on OS X 10.9 Mavericks, OS X 10.10
|
||||
Yosemite, OS X 10.11 El Capitan, or macOS 10.12 Sierra:
|
||||
|
||||
* Safari
|
||||
* Google Chrome
|
||||
* Mozilla Firefox
|
||||
|
||||
## Linux
|
||||
|
||||
If you're using a Raspberry Pi, please see [the documentation
|
||||
here](/raspberry-pi).
|
||||
|
||||
You need to be running a Linux distribution recent enough to run the most recent
|
||||
version of one of the following:
|
||||
|
||||
* Google Chrome, or Chromium
|
||||
* Mozilla Firefox, Iceweasel, or Seamonkey
|
||||
|
||||
## How to check your OS or browser
|
||||
|
||||
### Windows
|
||||
|
||||
* Click on the Start menu
|
||||
* Type 'System'
|
||||
* Click on the app called 'System'
|
||||
* The version of Windows you are using will be displayed:
|
||||
|
||||
|
||||
|
||||
### Mac
|
||||
|
||||
* Click on the Apple icon in the top left
|
||||
* Click on 'About this Mac'
|
||||
* This window will be displayed:
|
||||
|
||||
|
||||
|
||||
### Internet Explorer
|
||||
|
||||
* Click on the Settings icon in the top right
|
||||
* Click 'About Internet Explorer'
|
||||
* This window will be displayed:
|
||||
|
||||
|
||||
|
||||
### Edge
|
||||
|
||||
Edge automatically updates, so you should always be using the latest version
|
||||
|
||||
* Click on the menu icon in the top right (three dots)
|
||||
* Scroll to the bottom
|
||||
* Information similar to the following will be displayed:
|
||||
|
||||
|
||||
|
||||
### Google Chrome
|
||||
|
||||
Google Chrome automatically updates, so you should always be using the latest version
|
||||
|
||||
* Click on the menu icon in the top right (three dots)
|
||||
* Click Help, and About Google Chrome
|
||||
* Information similar to the following will be displayed:
|
||||
|
||||
|
||||
|
||||
### Firefox
|
||||
|
||||
Firefox automatically updates, so you should always be using the latest version
|
||||
|
||||
* Click on the menu icon in the top right (three horizontal lines)
|
||||
* Click the question mark icon (help button)
|
||||
* Click 'About Firefox'
|
||||
|
||||
|
||||
|
||||
### Safari
|
||||
|
||||
Safari updates when your operating system updates, so if you are using the
|
||||
latest version of OS X then you'll be using the latest version of Safari.
|
||||
|
||||
* Click on the Safari menu in the top left
|
||||
* Click 'About Safari'
|
||||
|
||||
|
||||
|
||||
IT administrators should check which browser versions are supported
|
||||
[here](/browsers/technical).
|
||||
@ -1,16 +0,0 @@
|
||||
# Recommended browser for Linux
|
||||
|
||||
As you are using Linux, it is recommended that you use [Mozilla
|
||||
Firefox][firefox] or [Google Chrome][chrome].
|
||||
|
||||
Please see [here][technical] for technical information on which browsers are
|
||||
supported, or [here][versions] to check which version you are using.
|
||||
|
||||
[edge]: https://www.microsoft.com/en-us/windows/microsoft-edge
|
||||
[ie]: https://www.microsoft.com/en-us/download/internet-explorer.aspx
|
||||
[firefox]: https://www.mozilla.org/en-US/firefox/new/
|
||||
[chrome]: https://www.google.com/chrome/
|
||||
[opera]: https://www.opera.com
|
||||
[safari]: http://www.apple.com/safari/
|
||||
[technical]: /browsers/technical
|
||||
[versions]: /browsers
|
||||
@ -1,16 +0,0 @@
|
||||
# Recommended browser for Mac
|
||||
|
||||
As you are using a Mac, it is recommended that you use [Safari][]. Alternatively,
|
||||
[Google Chrome][chrome] and [Mozilla Firefox][firefox] are also supported.
|
||||
|
||||
Please see [here][technical] for technical information on which browsers are
|
||||
supported, or [here][versions] to check which version you are using.
|
||||
|
||||
[edge]: https://www.microsoft.com/en-us/windows/microsoft-edge
|
||||
[ie]: https://www.microsoft.com/en-us/download/internet-explorer.aspx
|
||||
[firefox]: https://www.mozilla.org/en-US/firefox/new/
|
||||
[chrome]: https://www.google.com/chrome/
|
||||
[opera]: https://www.opera.com
|
||||
[safari]: http://www.apple.com/safari/
|
||||
[technical]: /browsers/technical
|
||||
[versions]: /browsers
|
||||
@ -1,36 +0,0 @@
|
||||
# Technical information about browser support
|
||||
|
||||
[pxt.microbit.org][] requires that you use a recent version of a modern
|
||||
browser, such as Microsoft Edge, Google Chrome, Mozilla Firefox, Safari, Opera,
|
||||
or IE11. This is because the editor uses modern web technologies such as [web
|
||||
workers][] to enable compiling [TypeScript][] in the browser, or the using the
|
||||
same [Monaco][] editor that powers [Visual Studio Code][].
|
||||
|
||||
[pxt.microbit.org]: https://pxt.microbit.org
|
||||
[web workers]: http://www.w3.org/TR/workers/
|
||||
[typescript]: http://www.typescriptlang.org
|
||||
[monaco]: https://microsoft.github.io/monaco-editor/
|
||||
[visual studio code]: http://code.visualstudio.com
|
||||
|
||||
Most modern browsers automatically update themselves, but in some environments
|
||||
such as schools these automatic updates are disabled for security. **We
|
||||
strongly recommend that you use the most recent version of any of these
|
||||
browsers**, but if you can't then you must use at least:
|
||||
|
||||
| Browser | Minimum version | Release date | Windows | Mac |
|
||||
| ----------------- | --------------- | -------------- | ----------- | ---------- |
|
||||
| Edge | 12 | March 2015 | Windows 10+ | N/A |
|
||||
| Internet Explorer | 11 | October 2013 | Windows 7+ | N/A |
|
||||
| Mozilla Firefox | 31 ESR | July 2014 | Windows XP+ | OS X 10.6+ |
|
||||
| Google Chrome | 38 | October 2014 | Windows XP+ | OS X 10.6+ |
|
||||
| Safari | 9 | September 2015 | N/A | OS X 10.9+ |
|
||||
| Opera | 21 | May 2014 | Windows 7+ | OS X 10.9+ |
|
||||
|
||||
|
||||
Please see our information for which browsers are recommended for [Windows][],
|
||||
[Mac][], [Linux][], or [Raspberry Pi][].
|
||||
|
||||
[Windows]: /browsers/windows
|
||||
[Mac]: /browsers/mac
|
||||
[Linux]: /browsers/linux
|
||||
[Raspberry Pi]: /raspberry-pi
|
||||
@ -1,18 +0,0 @@
|
||||
# Recommended browser for Windows
|
||||
|
||||
We recommend [Microsoft Edge][edge] if you are running Windows 10, but users on
|
||||
Windows 7 or higher can use [Internet Explorer 11][ie] or recent versions of
|
||||
[Mozilla Firefox][firefox], [Google Chrome][chrome], or [Opera][opera].
|
||||
|
||||
|
||||
Please see [here][technical] for technical information on which browsers are
|
||||
supported, or [here][versions] to check which version you are using.
|
||||
|
||||
[edge]: https://www.microsoft.com/en-us/windows/microsoft-edge
|
||||
[ie]: https://www.microsoft.com/en-us/download/internet-explorer.aspx
|
||||
[firefox]: https://www.mozilla.org/en-US/firefox/new/
|
||||
[chrome]: https://www.google.com/chrome/
|
||||
[opera]: https://www.opera.com
|
||||
[safari]: http://www.apple.com/safari/
|
||||
[technical]: /browsers/technical
|
||||
[versions]: /browsers
|
||||
17
docs/cli.md
17
docs/cli.md
@ -1,17 +0,0 @@
|
||||
# Command Line Interface
|
||||
|
||||
```sim
|
||||
basic.forever(() => {
|
||||
basic.showString("CLI<3")
|
||||
})
|
||||
```
|
||||
|
||||
It is possible to use the tools from a command line interface (CLI). The PXT CLI allows to
|
||||
* edit, compile or deploy JavaScript programs
|
||||
* can easily be integrated in most IDEs. It comes with built-in support for [Visual Studio Code](/code)!
|
||||
* run a local web server for the web editor
|
||||
* author packages using JavaScript and/or C++
|
||||
|
||||
Using the CLI assumes that you have some experience with programming and will require to install tools on your machine as well.
|
||||
|
||||
* **[LET'S GET STARTED](https://pxt.io/cli)**
|
||||
16
docs/code.md
16
docs/code.md
@ -1,16 +0,0 @@
|
||||
# Visual Studio Code
|
||||
|
||||
[Visual Studio Code](https://code.visualstudio.com) is a Free Open Source code editor that you can use to edit your programs.
|
||||
|
||||
Working from Visual Studio code allows you to benefit from all the features
|
||||
of a professional IDE while working with PXT: working with files,
|
||||
git integration (or source control of your choice), hundreds of extensions.
|
||||
|
||||
* background compilation
|
||||
* auto-completion
|
||||
* pxt command line integration
|
||||
|
||||
**Follow [these instructions](https://pxt.io/cli)** to setup your machine and edit your programs in Visual Studio Code.
|
||||
|
||||
|
||||
|
||||
14
docs/faq.md
14
docs/faq.md
@ -1,14 +0,0 @@
|
||||
# Frequently Asked Questions
|
||||
|
||||
### @description Frequently asked questions and answers from our users.
|
||||
|
||||
## Which web sites do I need to unblock for pxt.microbit.org?
|
||||
|
||||
This is the list of domains that need to be unblocked to allow the web editor to load:
|
||||
|
||||
* https://pxt.microbit.org
|
||||
* https://www.pxt.io
|
||||
* https://trg-microbit.userpxt.io
|
||||
* https://pxt.azureedge.net
|
||||
|
||||
Can't find your question? Please search for solutions or open a ticket at [support.microbit.org](https://support.microbit.org)!
|
||||
@ -1,69 +0,0 @@
|
||||
# JavaScript
|
||||
|
||||
We support a "static" subset of TypeScript
|
||||
(itself a superset of JavaScript):
|
||||
|
||||
|
||||
* [Calling](/javascript/call)
|
||||
* [Sequencing](/javascript/sequence)
|
||||
* [Variables](/javascript/variables)
|
||||
* [Operators](/javascript/operators)
|
||||
* [Statements](/javascript/statements)
|
||||
* [Functions](/javascript/functions)
|
||||
* [Types](/javascript/types)
|
||||
* [Classes](/javascript/classes)
|
||||
|
||||
|
||||
## Supported language features
|
||||
|
||||
* variables with `let` and `const`
|
||||
* functions with lexical scoping and recursion
|
||||
* top-level code in the file; hello world really is `console.log("Hello world")`
|
||||
* `if ... else if ... else` statements
|
||||
* `while` and `do ... while` loops
|
||||
* `for(;;)` loops and for ... of
|
||||
* `break/continue`; also with labeled loops
|
||||
* `switch` statement (on numbers only)
|
||||
* conditional operator `? :`; lazy boolean operators
|
||||
* namespaces (a form of modules)
|
||||
* all arithmetic operators (including bitwise operators); note that in microcontroller targets
|
||||
all arithmetic is performed on integers, also when simulating in the browser
|
||||
* strings (with a few common methods)
|
||||
* [string templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) (`` `x is ${x}` ``)
|
||||
* arrow functions `() => ...`
|
||||
* classes with fields, methods and constructors; `new` keyword
|
||||
* array literals [1, 2, 3]
|
||||
* enums
|
||||
* class inheritance
|
||||
|
||||
## Unsupported language features
|
||||
|
||||
We generally stay away from the more dynamic parts of JavaScript.
|
||||
Things you may miss and we may implement:
|
||||
|
||||
* exceptions (`throw`, `try ... catch`, `try ... finally`)
|
||||
* `for ... in` statements
|
||||
* object literals `{ foo: 1, bar: "two" }`
|
||||
* method-like properties (get/set accessors)
|
||||
* `debugger` statement for breakpoints
|
||||
|
||||
For JS-only targets we may implement the following:
|
||||
|
||||
* regular expressions
|
||||
* classes implementing interfaces
|
||||
|
||||
Things that we are not very likely to implement:
|
||||
|
||||
* file-based modules (`import * from ...`, `module.exports` etc); we do support namespaces
|
||||
* spread operator
|
||||
* `yield` expression and ``function*``
|
||||
* `await` expression and `async function`
|
||||
* `typeof` expression
|
||||
* tagged templates ``tag `text ${expression} more text` ``; regular templates are supported
|
||||
* binding with arrays or objects: `let [a, b] = ...; let { x, y } = ...`
|
||||
* `with` statement
|
||||
* `eval`
|
||||
* `delete` statement
|
||||
* `for ... in` statements
|
||||
* JSX (HTML as part of JavaScript)
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
# Call a function
|
||||
|
||||
The simplest way to get started in JavaScript with your @boardname@ is to
|
||||
call one of the @boardname@'s built-in JavaScript functions. Just like Blocks
|
||||
are organized into categories/drawers, the @boardname@ functions are organized by
|
||||
namespaces, with names corresponding to the drawer names. The `basic` namespace
|
||||
contains a number of helpful functions, such as:
|
||||
|
||||
```typescript
|
||||
basic.showString("Hello!")
|
||||
```
|
||||
|
||||
If you want to see all functions available in the `basic` namespace, simply type `basic`
|
||||
followed by `.` and a list of all the functions will appear.
|
||||
|
||||
|
||||
|
||||
This feature is known as "Intellisense". Continue typing to select one of the functions,
|
||||
or click on one of the functions to select. You also narrow down the set of functions by typing, as below:
|
||||
|
||||
|
||||
|
||||
You can type anything to see what Intellisense will find for you. Here's an example
|
||||
of what happens when you type the word `for`:
|
||||
|
||||
|
||||
## Function parameter values
|
||||
|
||||
You might have noticed that the call `showString` above takes one parameter value,
|
||||
the string to be scrolled on the LED screen. There is a second (optional)
|
||||
parameter that controls the speed of the scroll. Try this:
|
||||
|
||||
```typescript
|
||||
basic.showString("Hello!",50)
|
||||
```
|
||||
|
||||
Intellisense shows all the available parameters for a function.
|
||||
|
||||
## Left and right parentheses, please!
|
||||
|
||||
Whenever you want to call a function, you give the name of the function
|
||||
followed by `(` and ending with `)`. Inbetween the left and right
|
||||
parentheses go the function arguments. If a function has zero arguments, you still
|
||||
need the parentheses in order to call the function. For example
|
||||
|
||||
```typescript
|
||||
basic.clearScreen()
|
||||
```
|
||||
|
||||
It's a syntax error to have a left parenthesis without the "closing" right parenthesis:
|
||||
|
||||
```
|
||||
basic.clearScreen(
|
||||
```
|
||||
|
||||
### ~button /javascript/sequence
|
||||
NEXT: Sequencing Commands
|
||||
### ~
|
||||
@ -1,263 +0,0 @@
|
||||
# Classes
|
||||
|
||||
Traditional JavaScript focuses on functions and prototype-based inheritance as the basic means of building up reusable components,
|
||||
but this may feel a bit awkward to programmers more comfortable with an object-oriented approach, where classes inherit functionality
|
||||
and objects are built from these classes.
|
||||
|
||||
Starting with ECMAScript 2015, also known as ECMAScript 6, JavaScript programmers will be able to build their applications using
|
||||
this object-oriented class-based approach. TypeScript, allows you to use these techniques.
|
||||
|
||||
Let's take a look at a simple class-based example:
|
||||
|
||||
```typescript
|
||||
class Greeter {
|
||||
greeting: string;
|
||||
constructor(message: string) {
|
||||
this.greeting = message;
|
||||
}
|
||||
greet() {
|
||||
return "Hello, " + this.greeting;
|
||||
}
|
||||
}
|
||||
|
||||
let greeter = new Greeter("world");
|
||||
```
|
||||
|
||||
We declare a new class `Greeter`. This class has three members: a property called `greeting`, a constructor, and a method `greet`.
|
||||
|
||||
You'll notice that in the class when we refer to one of the members of the class we prepend `this.`.
|
||||
This denotes that it's a member access.
|
||||
|
||||
In the last line we construct an instance of the `Greeter` class using `new`.
|
||||
This calls into the constructor we defined earlier, creating a new object with the `Greeter` shape, and running the constructor to initialize it.
|
||||
|
||||
# Inheritance
|
||||
|
||||
In TypeScript, we can use common object-oriented patterns.
|
||||
Of course, one of the most fundamental patterns in class-based programming is being able to extend existing classes to create new ones using inheritance.
|
||||
|
||||
Let's take a look at an example:
|
||||
|
||||
```typescript-ignore
|
||||
class Animal {
|
||||
name: string;
|
||||
constructor(theName: string) { this.name = theName; }
|
||||
move(distanceInMeters: number = 0) {
|
||||
console.log(`${this.name} moved ${distanceInMeters}m.`);
|
||||
}
|
||||
}
|
||||
|
||||
class Snake extends Animal {
|
||||
constructor(name: string) { super(name); }
|
||||
move(distanceInMeters = 5) {
|
||||
console.log("Slithering...");
|
||||
super.move(distanceInMeters);
|
||||
}
|
||||
}
|
||||
|
||||
class Horse extends Animal {
|
||||
constructor(name: string) { super(name); }
|
||||
move(distanceInMeters = 45) {
|
||||
console.log("Galloping...");
|
||||
super.move(distanceInMeters);
|
||||
}
|
||||
}
|
||||
|
||||
let sam = new Snake("Sammy the Python");
|
||||
let tom: Animal = new Horse("Tommy the Palomino");
|
||||
|
||||
sam.move();
|
||||
tom.move(34);
|
||||
```
|
||||
|
||||
This example covers quite a few of the inheritance features in TypeScript that are common to other languages.
|
||||
Here we see the `extends` keywords used to create a subclass.
|
||||
You can see this where `Horse` and `Snake` subclass the base class `Animal` and gain access to its features.
|
||||
|
||||
Derived classes that contain constructor functions must call `super()` which will execute the constructor function on the base class.
|
||||
|
||||
The example also shows how to override methods in the base class with methods that are specialized for the subclass.
|
||||
Here both `Snake` and `Horse` create a `move` method that overrides the `move` from `Animal`, giving it functionality specific to each class.
|
||||
Note that even though `tom` is declared as an `Animal`, since its value is a `Horse`, when `tom.move(34)` calls the overriding method in `Horse`:
|
||||
|
||||
```Text
|
||||
Slithering...
|
||||
Sammy the Python moved 5m.
|
||||
Galloping...
|
||||
Tommy the Palomino moved 34m.
|
||||
```
|
||||
|
||||
# Public, private, and protected modifiers
|
||||
|
||||
## Public by default
|
||||
|
||||
In our examples, we've been able to freely access the members that we declared throughout our programs.
|
||||
If you're familiar with classes in other languages, you may have noticed in the above examples
|
||||
we haven't had to use the word `public` to accomplish this; for instance,
|
||||
C# requires that each member be explicitly labeled `public` to be visible.
|
||||
In TypeScript, each member is `public` by default.
|
||||
|
||||
You may still mark a member `public` explicitly.
|
||||
We could have written the `Animal` class from the previous section in the following way:
|
||||
|
||||
```typescript-ignore
|
||||
class Animal {
|
||||
public name: string;
|
||||
public constructor(theName: string) { this.name = theName; }
|
||||
public move(distanceInMeters: number) {
|
||||
console.log(`${this.name} moved ${distanceInMeters}m.`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Understanding `private`
|
||||
|
||||
When a member is marked `private`, it cannot be accessed from outside of its containing class. For example:
|
||||
|
||||
```typescript-ignore
|
||||
class Animal {
|
||||
private name: string;
|
||||
constructor(theName: string) { this.name = theName; }
|
||||
}
|
||||
|
||||
new Animal("Cat").name; // Error: 'name' is private;
|
||||
```
|
||||
|
||||
TypeScript is a structural type system.
|
||||
When we compare two different types, regardless of where they came from, if the types of all members are compatible, then we say the types themselves are compatible.
|
||||
|
||||
However, when comparing types that have `private` and `protected` members, we treat these types differently.
|
||||
For two types to be considered compatible, if one of them has a `private` member,
|
||||
then the other must have a `private` member that originated in the same declaration.
|
||||
The same applies to `protected` members.
|
||||
|
||||
Let's look at an example to better see how this plays out in practice:
|
||||
|
||||
```typescript-ignore
|
||||
class Animal {
|
||||
private name: string;
|
||||
constructor(theName: string) { this.name = theName; }
|
||||
}
|
||||
|
||||
class Rhino extends Animal {
|
||||
constructor() { super("Rhino"); }
|
||||
}
|
||||
|
||||
class Employee {
|
||||
private name: string;
|
||||
constructor(theName: string) { this.name = theName; }
|
||||
}
|
||||
|
||||
let animal = new Animal("Goat");
|
||||
let rhino = new Rhino();
|
||||
let employee = new Employee("Bob");
|
||||
|
||||
animal = rhino;
|
||||
animal = employee; // Error: 'Animal' and 'Employee' are not compatible
|
||||
```
|
||||
|
||||
In this example, we have an `Animal` and a `Rhino`, with `Rhino` being a subclass of `Animal`.
|
||||
We also have a new class `Employee` that looks identical to `Animal` in terms of shape.
|
||||
We create some instances of these classes and then try to assign them to each other to see what will happen.
|
||||
Because `Animal` and `Rhino` share the `private` side of their shape from the same declaration of
|
||||
`private name: string` in `Animal`, they are compatible. However, this is not the case for `Employee`.
|
||||
When we try to assign from an `Employee` to `Animal` we get an error that these types are not compatible.
|
||||
Even though `Employee` also has a `private` member called `name`, it's not the one we declared in `Animal`.
|
||||
|
||||
## Understanding `protected`
|
||||
|
||||
The `protected` modifier acts much like the `private` modifier with the exception that members
|
||||
declared `protected` can also be accessed by instances of deriving classes. For example,
|
||||
|
||||
```typescript-ignore
|
||||
class Person {
|
||||
protected name: string;
|
||||
constructor(name: string) { this.name = name; }
|
||||
}
|
||||
|
||||
class Employee extends Person {
|
||||
private department: string;
|
||||
|
||||
constructor(name: string, department: string) {
|
||||
super(name);
|
||||
this.department = department;
|
||||
}
|
||||
|
||||
public getElevatorPitch() {
|
||||
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
|
||||
}
|
||||
}
|
||||
|
||||
let howard = new Employee("Howard", "Sales");
|
||||
console.log(howard.getElevatorPitch());
|
||||
console.log(howard.name); // error
|
||||
```
|
||||
|
||||
Notice that while we can't use `name` from outside of `Person`,
|
||||
we can still use it from within an instance method of `Employee` because `Employee` derives from `Person`.
|
||||
|
||||
A constructor may also be marked `protected`.
|
||||
This means that the class cannot be instantiated outside of its containing class, but can be extended. For example,
|
||||
|
||||
```typescript-ignore
|
||||
class Person {
|
||||
protected name: string;
|
||||
protected constructor(theName: string) { this.name = theName; }
|
||||
}
|
||||
|
||||
// Employee can extend Person
|
||||
class Employee extends Person {
|
||||
private department: string;
|
||||
|
||||
constructor(name: string, department: string) {
|
||||
super(name);
|
||||
this.department = department;
|
||||
}
|
||||
|
||||
public getElevatorPitch() {
|
||||
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
|
||||
}
|
||||
}
|
||||
|
||||
let howard = new Employee("Howard", "Sales");
|
||||
let john = new Person("John"); // Error: The 'Person' constructor is protected
|
||||
```
|
||||
|
||||
# Readonly modifier
|
||||
|
||||
You can make properties readonly by using the `readonly` keyword.
|
||||
Readonly properties must be initialized at their declaration or in the constructor.
|
||||
|
||||
```typescript-ignore
|
||||
class Octopus {
|
||||
readonly name: string;
|
||||
readonly numberOfLegs: number = 8;
|
||||
constructor (theName: string) {
|
||||
this.name = theName;
|
||||
}
|
||||
}
|
||||
let dad = new Octopus("Man with the 8 strong legs");
|
||||
dad.name = "Man with the 3-piece suit"; // error! name is readonly.
|
||||
```
|
||||
|
||||
## Parameter properties
|
||||
|
||||
In our last example, we had to declare a readonly member `name` and a constructor parameter `theName` in the `Octopus` class, and we then immediately set `name` to `theName`.
|
||||
This turns out to be a very common practice.
|
||||
*Parameter properties* let you create and initialize a member in one place.
|
||||
Here's a further revision of the previous `Octopus` class using a parameter property:
|
||||
|
||||
```typescript-ignore
|
||||
class Octopus {
|
||||
readonly numberOfLegs: number = 8;
|
||||
constructor(readonly name: string) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Notice how we dropped `theName` altogether and just use the shortened `readonly name: string` parameter on the constructor to create and initialize the `name` member.
|
||||
We've consolidated the declarations and assignment into one location.
|
||||
|
||||
Parameter properties are declared by prefixing a constructor parameter with an accessibility modifier or `readonly`, or both.
|
||||
Using `private` for a parameter property declares and initializes a private member; likewise, the same is done for `public`, `protected`, and `readonly`.
|
||||
|
||||
@ -1,172 +0,0 @@
|
||||
# Functions
|
||||
|
||||
Functions are the fundamental building block of programs. Here is the simplest
|
||||
way to make a function that adds two numbers:
|
||||
|
||||
```typescript
|
||||
// Named function
|
||||
function add(x : number, y : number) {
|
||||
return x + y;
|
||||
}
|
||||
|
||||
basic.showNumber(add(1, 2))
|
||||
```
|
||||
|
||||
### ~ hint
|
||||
For the @boardname@, you must specify a [type](/javascript/types) for each function parameter.
|
||||
### ~
|
||||
|
||||
Functions can refer to variables outside of the function body.
|
||||
When they do so, they're said to `capture` these variables.
|
||||
|
||||
```typescript
|
||||
let z = 100;
|
||||
|
||||
function addToZ(x: number, y: number) {
|
||||
return x + y + z;
|
||||
}
|
||||
|
||||
basic.showNumber(addToZ(1, 2))
|
||||
```
|
||||
|
||||
Let's add a return type to our add function:
|
||||
|
||||
```typescript
|
||||
function add(x: number, y: number): number {
|
||||
return x + y;
|
||||
}
|
||||
```
|
||||
|
||||
TypeScript can figure the return type out by looking at the return statements, so you can optionally leave this off in many cases.
|
||||
|
||||
# Arrow Functions
|
||||
|
||||
Arrow functions (also known as "lamba" functions) are used extensively to provide event handlers for
|
||||
many APIs. For example:
|
||||
|
||||
```typescript
|
||||
input.onButtonPressed(Button.A, () => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
[Read more about arrow functions...](http://devdocs.io/javascript/functions/arrow_functions)
|
||||
|
||||
# Optional and Default Parameters
|
||||
|
||||
In TypeScript, the number of arguments given to a function has to match the number of parameters the function expects.
|
||||
|
||||
```typescript-ignore
|
||||
function buildName(firstName: string, lastName: string) {
|
||||
return firstName + " " + lastName;
|
||||
}
|
||||
|
||||
let result1 = buildName("Bob"); // error, too few parameters
|
||||
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
|
||||
let result3 = buildName("Bob", "Adams"); // ah, just right
|
||||
```
|
||||
|
||||
In JavaScript, every parameter is optional, and users may leave them off as they see fit.
|
||||
When they do, their value is `undefined`.
|
||||
We can get this functionality in TypeScript by adding a `?` to the end of parameters we want to be optional.
|
||||
For example, let's say we want the last name parameter from above to be optional:
|
||||
|
||||
```typescript-ignore
|
||||
function buildName(firstName: string, lastName?: string) {
|
||||
if (lastName)
|
||||
return firstName + " " + lastName;
|
||||
else
|
||||
return firstName;
|
||||
}
|
||||
|
||||
let result1 = buildName("Bob"); // works correctly now
|
||||
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
|
||||
let result3 = buildName("Bob", "Adams"); // ah, just right
|
||||
```
|
||||
|
||||
Any optional parameters must follow required parameters.
|
||||
Had we wanted to make the first name optional rather than the last name, we would need to change the order of parameters in the function, putting the first name last in the list.
|
||||
|
||||
In TypeScript, we can also set a value that a parameter will be assigned if the user does not provide one, or if the user passes `undefined` in its place.
|
||||
These are called default-initialized parameters.
|
||||
Let's take the previous example and default the last name to `"Smith"`.
|
||||
|
||||
```typescript-ignore
|
||||
function buildName(firstName: string, lastName = "Smith") {
|
||||
return firstName + " " + lastName;
|
||||
}
|
||||
|
||||
let result1 = buildName("Bob"); // works correctly now, returns "Bob Smith"
|
||||
let result2 = buildName("Bob", undefined); // still works, also returns "Bob Smith"
|
||||
let result3 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
|
||||
let result4 = buildName("Bob", "Adams"); // ah, just right
|
||||
```
|
||||
|
||||
Default-initialized parameters that come after all required parameters are treated as optional, and just like optional parameters, can be omitted when calling their respective function.
|
||||
This means optional parameters and trailing default parameters will share commonality in their types, so both
|
||||
|
||||
```typescript
|
||||
function buildName(firstName: string, lastName?: string) {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
and
|
||||
|
||||
```typescript
|
||||
function buildName(firstName: string, lastName = "Smith") {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
share the same type `(firstName: string, lastName?: string) => string`.
|
||||
The default value of `lastName` disappears in the type, only leaving behind the fact that the parameter is optional.
|
||||
|
||||
Unlike plain optional parameters, default-initialized parameters don't *need* to occur after required parameters.
|
||||
If a default-initialized parameter comes before a required parameter, users need to explicitly pass `undefined` to get the default initialized value.
|
||||
For example, we could write our last example with only a default initializer on `firstName`:
|
||||
|
||||
```typescript-ignore
|
||||
function buildName(firstName = "Will", lastName: string) {
|
||||
return firstName + " " + lastName;
|
||||
}
|
||||
|
||||
let result1 = buildName("Bob"); // error, too few parameters
|
||||
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
|
||||
let result3 = buildName("Bob", "Adams"); // okay and returns "Bob Adams"
|
||||
let result4 = buildName(undefined, "Adams"); // okay and returns "Will Adams"
|
||||
```
|
||||
|
||||
# Rest Parameters
|
||||
|
||||
Required, optional, and default parameters all have one thing in common: they talk about one parameter at a time.
|
||||
Sometimes, you want to work with multiple parameters as a group, or you may not know how many parameters a function will ultimately take.
|
||||
In JavaScript, you can work with the arguments directly using the `arguments` variable that is visible inside every function body.
|
||||
|
||||
In TypeScript, you can gather these arguments together into a variable:
|
||||
|
||||
```typescript-ignore
|
||||
function buildName(firstName: string, ...restOfName: string[]) {
|
||||
return firstName + " " + restOfName.join(" ");
|
||||
}
|
||||
|
||||
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
|
||||
```
|
||||
|
||||
*Rest parameters* are treated as a boundless number of optional parameters.
|
||||
When passing arguments for a rest parameter, you can use as many as you want; you can even pass none.
|
||||
The compiler will build an array of the arguments passed in with the name given after the ellipsis (`...`), allowing you to use it in your function.
|
||||
|
||||
The ellipsis is also used in the type of the function with rest parameters:
|
||||
|
||||
```typescript-ignore
|
||||
function buildName(firstName: string, ...restOfName: string[]) {
|
||||
return firstName + " " + restOfName.join(" ");
|
||||
}
|
||||
|
||||
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;
|
||||
```
|
||||
|
||||
### ~button /javascript/types
|
||||
NEXT: Types
|
||||
### ~
|
||||
@ -1,23 +0,0 @@
|
||||
## Operators
|
||||
|
||||
The following JavaScript operators are supported for the @boardname@.
|
||||
|
||||
### ~hint
|
||||
Note that for the @boardname@ all arithmetic is performed on integers, rather than floating point.
|
||||
This also is true when simulating in the browser.
|
||||
### ~
|
||||
|
||||
# Assignment, arithmetic and bitwise
|
||||
|
||||
* assignment operators - [read more](http://devdocs.io/javascript/operators/assignment_operators)
|
||||
* arithmetic operators - [read more](http://devdocs.io/javascript/operators/arithmetic_operators)
|
||||
* bitwise operators - [read more](http://devdocs.io/javascript/operators/bitwise_operators)
|
||||
|
||||
# Comparision and conditional
|
||||
|
||||
* comparison operators - [read more](http://devdocs.io/javascript/operators/comparison_operators)
|
||||
* conditional operator - [read more](http://devdocs.io/javascript/operators/conditional_operator)
|
||||
|
||||
### ~button /javascript/statements
|
||||
NEXT: Statements
|
||||
### ~
|
||||
@ -57,7 +57,3 @@ basic.showNumber(1);
|
||||
### ~
|
||||
|
||||
[Read more](http://inimino.org/~inimino/blog/javascript_semicolons) about semicolons in JavaScript.
|
||||
|
||||
### ~button /javascript/variables
|
||||
NEXT: Variable Declarations
|
||||
### ~
|
||||
@ -1,32 +0,0 @@
|
||||
# Statements
|
||||
|
||||
The following JavaScript statements are supported for the @boardname@:
|
||||
|
||||
## Variable declarations
|
||||
* `const` statement - [read more](http://devdocs.io/javascript/statements/const)
|
||||
* `let` statement - [read more](http://devdocs.io/javascript/statements/let)
|
||||
|
||||
## Block-structured statements
|
||||
|
||||
* `{ }` block statement - [read more](http://devdocs.io/javascript/statements/block)
|
||||
* `if-else` conditional statement - [read more](http://devdocs.io/javascript/statements/if...else)
|
||||
* `while` loop - [read more](http://devdocs.io/javascript/statements/do...while)
|
||||
* `do-while` loop - [read more](http://devdocs.io/javascript/statements/do...while)
|
||||
* `for(;;)` loop - [read more](http://devdocs.io/javascript/statements/for)
|
||||
* `switch` statement (on numbers only) - [read more](http://devdocs.io/javascript/statements/switch)
|
||||
|
||||
## Control-flow commands
|
||||
|
||||
* `break` statement - [read more](http://devdocs.io/javascript/statements/break)
|
||||
* `continue` statement - [read more](http://devdocs.io/javascript/statements/continue)
|
||||
* `return` statement - [read more](http://devdocs.io/javascript/statements/return)
|
||||
* `debugger` statement for breakpoints - [read more](http://devdocs.io/javascript/statements/debugger)
|
||||
|
||||
## Labelling statements
|
||||
|
||||
* labelled statement - [read more](http://devdocs.io/javascript/statements/label)
|
||||
* `default` statement - [read more](http://devdocs.io/javascript/statements/default)
|
||||
|
||||
### ~button /javascript/functions
|
||||
NEXT: Functions
|
||||
### ~
|
||||
@ -1,141 +0,0 @@
|
||||
# Types
|
||||
|
||||
For programs to be useful, we need to be able to work with some of the simplest units of data:
|
||||
numbers, strings, structures, boolean values, and the like.
|
||||
|
||||
# Type Inference
|
||||
|
||||
In TypeScript, there are several places where type inference is used to provide type information when there is
|
||||
no explicit type annotation. For example, in this code
|
||||
|
||||
```typescript
|
||||
let x = 3;
|
||||
let y = x + 3
|
||||
```
|
||||
|
||||
The type of the `x` variable is inferred to be `number`. Similarly, the type of `y` variable also is inferred to be `number`.
|
||||
This kind of inference takes place when initializing variables and members,
|
||||
setting parameter default values, and determining function return types.
|
||||
|
||||
All the examples below give an example type annotation, but will work just the same without the annotation.
|
||||
|
||||
# Boolean
|
||||
|
||||
The most basic datatype is the simple true/false value, which is called a `boolean` value.
|
||||
|
||||
```typescript
|
||||
let isDone: boolean = false;
|
||||
```
|
||||
|
||||
# Number
|
||||
|
||||
### ~ hint
|
||||
In JavaScript, `numbers` are floating point values.
|
||||
However, for the @boardname@, `numbers` are integer values.
|
||||
### ~
|
||||
|
||||
Integer values can be specified via decimal, hexadecimal and octal notation:
|
||||
|
||||
```typescript
|
||||
let decimal: number = 42;
|
||||
let hex: number = 0xf00d;
|
||||
let binary: number = 0b1010;
|
||||
let octal: number = 0o744;
|
||||
```
|
||||
|
||||
# String
|
||||
|
||||
As in other languages, we use the type `string` to refer to textual data.
|
||||
Use double quotes (`"`) or single quotes (`'`) to surround string data.
|
||||
|
||||
```typescript
|
||||
let color: string = "blue";
|
||||
color = 'red';
|
||||
```
|
||||
|
||||
You can also use *template strings*, which can span multiple lines and have embedded expressions.
|
||||
These strings are surrounded by the backtick/backquote (`` ` ``) character, and embedded expressions are of the form `${ expr }`.
|
||||
|
||||
```typescript
|
||||
let fullName: string = `Bob Bobbington`;
|
||||
let age: number = 37;
|
||||
let sentence: string = `Hello, my name is ${ fullName }.
|
||||
|
||||
I'll be ${ age + 1 } years old next month.`
|
||||
```
|
||||
|
||||
This is equivalent to declaring `sentence` like so:
|
||||
|
||||
```typescript
|
||||
let fullName: string = `Bob Bobbington`;
|
||||
let age: number = 37;
|
||||
let sentence: string = "Hello, my name is " + fullName + ".\n\n" +
|
||||
"I'll be " + (age + 1) + " years old next month."
|
||||
```
|
||||
|
||||
# Array
|
||||
|
||||
Arrays allow you to work with an expandable sequence of values, addressed by an integer-valued index.
|
||||
Array types can be written in one of two ways.
|
||||
In the first, you use the type of the elements followed by `[]` to denote an array of that element type:
|
||||
|
||||
```typescript
|
||||
let list: number[] = [1, 2, 3];
|
||||
```
|
||||
|
||||
The second way uses a generic array type, `Array<elemType>`:
|
||||
|
||||
```typescript
|
||||
let list: Array<number> = [1, 2, 3];
|
||||
```
|
||||
|
||||
### ~hint
|
||||
For the @boardname@, all elements of an array must have the same type.
|
||||
### ~
|
||||
|
||||
# Enum
|
||||
|
||||
A helpful addition to the standard set of datatypes from JavaScript is the `enum`.
|
||||
As in languages like C#, an enum is a way of giving more friendly names to sets of numeric values.
|
||||
|
||||
```typescript
|
||||
enum Color {Red, Green, Blue}
|
||||
let c: Color = Color.Green;
|
||||
```
|
||||
|
||||
By default, enums begin numbering their members starting at `0`.
|
||||
You can change this by manually setting the value of one of its members.
|
||||
For example, we can start the previous example at `1` instead of `0`:
|
||||
|
||||
```typescript
|
||||
enum Color {Red = 1, Green, Blue}
|
||||
let c: Color = Color.Green;
|
||||
```
|
||||
|
||||
Or, even manually set all the values in the enum:
|
||||
|
||||
```typescript
|
||||
enum Color {Red = 1, Green = 2, Blue = 4}
|
||||
let c: Color = Color.Green;
|
||||
```
|
||||
|
||||
# Any
|
||||
|
||||
The TypeScript type `any` is not supported in the @boardname@.
|
||||
|
||||
# Void
|
||||
|
||||
`void` is the absence of having any type at all.
|
||||
You may commonly see this as the return type of functions that do not return a value:
|
||||
|
||||
```typescript
|
||||
function warnUser(): void {
|
||||
basic.showString("This is my warning message");
|
||||
}
|
||||
```
|
||||
|
||||
Declaring variables of type `void` is not useful.
|
||||
|
||||
### ~button /javascript/classes
|
||||
NEXT: Classes
|
||||
### ~
|
||||
@ -1,133 +0,0 @@
|
||||
# Variable Declarations
|
||||
|
||||
Declaring a variable should be done using the ``let`` keyword:
|
||||
|
||||
```typescript
|
||||
let a = 10;
|
||||
```
|
||||
|
||||
## ``var`` vs ``let``
|
||||
|
||||
Declaring a variable in JavaScript has always traditionally been done with the `var` keyword.
|
||||
|
||||
```typescript-ignore
|
||||
var a = 10;
|
||||
```
|
||||
|
||||
The `var` construct has some [problems](http://www.typescriptlang.org/docs/handbook/variable-declarations.html),
|
||||
which is why `let` statements were introduced. Apart from the keyword used, `let` statements are written
|
||||
the same way `var` statements are.
|
||||
|
||||
```typescript
|
||||
let a = 10;
|
||||
```
|
||||
|
||||
The key difference is not in the syntax, but in the semantics, which we'll now dive into.
|
||||
|
||||
### ~hint
|
||||
### Use `let` instead of `var` to introduce a new variable.
|
||||
### ~
|
||||
|
||||
## Block-scoping
|
||||
|
||||
When a variable is declared using `let`, it uses what some call *lexical-scoping* or *block-scoping*.
|
||||
Unlike variables declared with `var` whose scopes leak out to their containing function,
|
||||
block-scoped variables are not visible outside of their nearest containing block or `for`-loop.
|
||||
|
||||
```typescript
|
||||
function f(input: boolean) {
|
||||
let a = 100;
|
||||
|
||||
if (input) {
|
||||
// Still okay to reference 'a'
|
||||
let b = a + 1;
|
||||
return b;
|
||||
}
|
||||
|
||||
// Error: 'b' doesn't exist here
|
||||
return b;
|
||||
}
|
||||
```
|
||||
|
||||
Here, we have two local variables `a` and `b`.
|
||||
`a`'s scope is limited to the body of `f` while `b`'s scope is limited to the containing `if` statement's block.
|
||||
|
||||
Another property of block-scoped variables is that they can't be read or written to before they're actually declared.
|
||||
While these variables are "present" throughout their scope, all points up until their declaration are part of their *temporal dead zone*.
|
||||
This is just a sophisticated way of saying you can't access them before the `let` statement, and luckily TypeScript will let you know that.
|
||||
|
||||
```typescript-ignore
|
||||
a++; // illegal to use 'a' before it's declared;
|
||||
let a;
|
||||
```
|
||||
|
||||
## Re-declarations
|
||||
|
||||
With `var` declarations, it doesn't matter how many times you declare your variables, you just get one:
|
||||
|
||||
```typescript
|
||||
var x = 10;
|
||||
var x = 20;
|
||||
```
|
||||
|
||||
In the above example, all declarations of `x` actually refer to the *same* `x`, and this is perfectly valid.
|
||||
This often ends up being a source of bugs. Thankfully, `let` declarations are not as forgiving.
|
||||
|
||||
```typescript
|
||||
let x = 10;
|
||||
let x = 20; // error: can't re-declare 'x' in the same scope
|
||||
```
|
||||
|
||||
## Shadowing
|
||||
|
||||
The act of introducing a new name in a more deeply nested scope is called *shadowing*.
|
||||
It is a bit of a double-edged sword in that it can introduce certain bugs on its own in the
|
||||
event of accidental shadowing, while also preventing certain bugs.
|
||||
For instance, imagine a `sumMatrix` function using `let` variables.
|
||||
|
||||
```typescript
|
||||
function sumMatrix(matrix: number[][]) {
|
||||
let sum = 0;
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
var currentRow = matrix[i];
|
||||
for (let i = 0; i < currentRow.length; i++) {
|
||||
sum += currentRow[i];
|
||||
}
|
||||
}
|
||||
|
||||
return sum;
|
||||
}
|
||||
```
|
||||
|
||||
This version of the loop will actually perform the summation correctly because the inner loop's `i` shadows `i` from the outer loop.
|
||||
Shadowing should *usually* be avoided in the interest of write clearer code, such as
|
||||
|
||||
```typescript
|
||||
function sumMatrix(matrix: number[][]) {
|
||||
let sum = 0;
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
var currentRow = matrix[i];
|
||||
for (let j = 0; j < currentRow.length; j++) {
|
||||
sum += currentRow[j];
|
||||
}
|
||||
}
|
||||
|
||||
return sum;
|
||||
}
|
||||
```
|
||||
While there are some scenarios where it may be fitting to take advantage of it, you should use your best judgement.
|
||||
|
||||
# `const` declarations
|
||||
|
||||
`const` declarations are another way of declaring variables.
|
||||
|
||||
```typescript
|
||||
const numLivesForCat = 9;
|
||||
```
|
||||
|
||||
They are like `let` declarations but, as their name implies, their value cannot be changed once they are bound.
|
||||
In other words, they have the same scoping rules as `let`, but you can't re-assign to them.
|
||||
|
||||
### ~button /javascript/operators
|
||||
NEXT: Operators
|
||||
### ~
|
||||
@ -1,18 +0,0 @@
|
||||
# Offline editing
|
||||
|
||||
## Web application
|
||||
|
||||
**@homeurl@ is an HTML5 web application** that automatically gets cached locally by your browser.
|
||||
Once the web app is loaded and you have compiled at least once, you will have all the code needed to work without an internet connection.
|
||||
|
||||
## Command line interface
|
||||
|
||||
For more experience users, you can download the entire toolchain and use the [command line interface](/cli) (CLI) to compile
|
||||
and deploy your scripts locally. PXT provides a great out-of-the-box experience using [Visual Studio Code](/code),
|
||||
a lightweight cross-platform code editor.
|
||||
|
||||
|
||||
|
||||
## Native clients
|
||||
|
||||
There are no native clients available yet.
|
||||
@ -1,20 +0,0 @@
|
||||
# Raspberry Pi and Raspbian
|
||||
|
||||
It is possible to run the web editor or [command line interface](/cli) from Raspbian on Raspberry Pi 2 or 3
|
||||
with [Raspbian Jessie with Pixel](https://www.raspberrypi.org/downloads/raspbian/).
|
||||
|
||||
## Web editor
|
||||
|
||||
Starting with **Raspbian Pixel**, Raspbian comes with Chromium. Simply open @homeurl@.
|
||||
|
||||
## Command line
|
||||
|
||||
The PXT command line also works on Raspbian and allows to run a local server and/or edit programs from any text editor.
|
||||
|
||||
* Node.JS 6.0 needs installed
|
||||
|
||||
To install all the tools,
|
||||
|
||||
```
|
||||
curl -s https://raw.githubusercontent.com/Microsoft/pxt-rpi/master/install.sh | sh -
|
||||
```
|
||||
@ -1,88 +0,0 @@
|
||||
# Sharing your project
|
||||
|
||||
Once you've made your project, you can save it the cloud, share it, or embed it on another website.
|
||||
|
||||
* Click **More...**, then **Embed Project**:
|
||||
|
||||
|
||||
|
||||
* Click **Publish project**. This will make the project publicly available
|
||||
* You will then see this information:
|
||||
|
||||
|
||||
|
||||
## Sharing the URL
|
||||
|
||||
You can share the URL for the project ([https://pxt.microbit.org/httuftrbtg](https://pxt.microbit.org/httuftrbtg) above) with other people, and they will be able to visit that page to see your project, download it, or edit it:
|
||||
|
||||
|
||||
|
||||
## Embedding into a blog or web site
|
||||
|
||||
Rather than just sharing the link, you can also embed the project so that your visitors can use the simulator, edit blocks or code, or download the project without having to leave your site.
|
||||
|
||||
### General instructions
|
||||
|
||||
Select the kind of embedding you would like.
|
||||
|
||||
* **Screenshot** - a lightweight screenshot of the blocks that links to the snippet
|
||||
* **Editor** - embedded editor with minimal UI
|
||||
* **Simulator** - embedded simulator only
|
||||
* **Command line** - specific instructions to unpack the project using the [command line](/cli) tools
|
||||
|
||||
Copy the HTML for embedding the page from the publish dialog. It will look like the following:
|
||||
|
||||
Open the HTML editor for your blog or website and paste it with your content
|
||||
|
||||
### Wordpress
|
||||
|
||||
[wordpress.com][] blogs do not support embedding content from most websites, so you will need to link to your project instead. Alternatively, if you have a Wordpress VIP account you can follow [these instructions][wordpress-vip] to embed an `iframe` into your blog. The URL that you need to add is like `https://pxt.microbit.org/?sandbox=1#pub:httuftrbtg`, but replace `httuftrbtg` with your project's unique identifier.
|
||||
|
||||
If you self host a Wordpress blog you can install the [iframe-plugin][] and then write the following in your blog-post (again, replacing the `httuftrbtg` with your project's identifier):
|
||||
|
||||
```
|
||||
[iframe src="https://pxt.microbit.org/?sandbox=1#pub:httuftrbtg"]
|
||||
```
|
||||
|
||||
### Blogger
|
||||
|
||||
* Create a new post
|
||||
* Click the 'HTML' button next to 'Compose' and paste in the HTML
|
||||
|
||||
|
||||
|
||||
### Squarespace
|
||||
|
||||
[Squarespace][] allows you to embed HTML code inside a blog post or page. In the editor, click to add a new block:
|
||||
|
||||
|
||||
|
||||
Scroll to **More** and select **Code**. Paste the embed HTML and click **Apply**:
|
||||
|
||||
|
||||
|
||||
### Google Sites
|
||||
|
||||
Google Sites doesn't currently [support iframes in custom HTML][google-sites-iframes], so you'll have to insert a link to your project's URL instead.
|
||||
|
||||
### Office Sway
|
||||
|
||||
[Microsoft Office Sway][sway] only allows iframes from [certain websites][sway-restricted], so you'll need to insert a link to your project instead.
|
||||
### Embedding in Markdown documents
|
||||
|
||||
[Markdown][] is a popular text format supported by many blog editors. As Markdown supports embedded HTML, you should be able to paste the HTML into the document, although some sites may prevent you from doing this.
|
||||
|
||||
### ~hint
|
||||
|
||||
**Developers:** This page supports OEmbed as well
|
||||
|
||||
### ~
|
||||
|
||||
[wordpress.com]: https://wordpress.com
|
||||
[wordpress-vip]: https://vip.wordpress.com/documentation/embedding-rich-media-from-around-the-web-with-protected-embeds/#scripts-iframes-and-objects
|
||||
[iframe-plugin]: https://wordpress.org/plugins/iframe/
|
||||
[squarespace]: https://squarespace.com
|
||||
[google-sites-iframes]: https://support.google.com/sites/answer/2500646?hl=en
|
||||
[sway]: https://sway.com/my
|
||||
[sway-restricted]: https://support.office.com/en-us/article/Embed-content-in-your-Sway-1e1ab12a-f961-4a26-8afc-77a15f892b1d
|
||||
[Markdown]: https://daringfireball.net/projects/markdown/
|
||||
BIN
docs/static/configurations/chrome-version.png
vendored
BIN
docs/static/configurations/chrome-version.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
BIN
docs/static/configurations/edge-version.png
vendored
BIN
docs/static/configurations/edge-version.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
BIN
docs/static/configurations/firefox-version.png
vendored
BIN
docs/static/configurations/firefox-version.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
BIN
docs/static/configurations/ie-version.png
vendored
BIN
docs/static/configurations/ie-version.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
BIN
docs/static/configurations/osx-version.png
vendored
BIN
docs/static/configurations/osx-version.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
BIN
docs/static/configurations/safari-version.png
vendored
BIN
docs/static/configurations/safari-version.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
BIN
docs/static/configurations/windows-version.png
vendored
BIN
docs/static/configurations/windows-version.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
BIN
docs/static/embed/blogger.png
vendored
BIN
docs/static/embed/blogger.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
BIN
docs/static/embed/embed-info.png
vendored
BIN
docs/static/embed/embed-info.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
BIN
docs/static/embed/project-page.png
vendored
BIN
docs/static/embed/project-page.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
BIN
docs/static/embed/publish.png
vendored
BIN
docs/static/embed/publish.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
BIN
docs/static/embed/squarespace-code.png
vendored
BIN
docs/static/embed/squarespace-code.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
BIN
docs/static/embed/squarespace-insert.png
vendored
BIN
docs/static/embed/squarespace-insert.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
@ -1,9 +1,4 @@
|
||||
# Support
|
||||
# @extends
|
||||
|
||||
## #support
|
||||
Use the Microbit Foundation [support web site](https://support.microbit.org)!
|
||||
|
||||
You can also read the [Frequently Asked Questions](/faq).
|
||||
|
||||
## Developers
|
||||
|
||||
You can also use our [GitHub issue tracker](https://github.com/microsoft/pxt-microbit) to report bugs.
|
||||
@ -1,6 +0,0 @@
|
||||
# Help translate
|
||||
|
||||
Our translations are managed via Crowdin, a translation management platform. It is free to join
|
||||
and you can volunteer to translate parts of the web site.
|
||||
|
||||
See the [PXT translation](https://pxt.io/translate) page for more information.
|
||||
Loading…
Reference in New Issue
Block a user