more on js

This commit is contained in:
Tom Ball 2016-07-02 10:18:39 -04:00
parent 835a4b5cf0
commit 5bea47a094
4 changed files with 116 additions and 95 deletions

View File

@ -1,75 +1,15 @@
# JavaScript # JavaScript
You can write micro:bit programs in a subset of [TypeScript](https://www.typescriptlang.org), a superset of JavaScript. If you already know some JavaScript, you might be interested in [the JavaScript and TypeScript languages](/js/lang).
Many micro:bit programs, especially at the beginner's level, are just plain JavaScript. TypeScript introduces class-based Otherwise, visit the cards below to starting programming JavaScript with the micro:bit:
object-oriented programming, such as:
```typescript ```codecard
class Greeter { [{
greeting: string; "name": "Calling Functions",
constructor(message: string) { "url":"/js/call.md"
this.greeting = message; },{
"name": "Sequencing Commands",
"url":"/js/sequence.md"
} }
greet() { ]
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
basic.showString(greeter.greet())
``` ```
This site is meant for teaching programming first, and JavaScript second. For this
reason, we have stayed away from concepts that are specific to JavaScript (for
example, prototype inheritance), and instead focused on ones common to most
modern programming languages (for example, loops, lexically scoped variables,
functions, classes, lambdas).
We leverage TypeScript's [type inference](http://www.typescriptlang.org/docs/handbook/type-inference.html) so that
students need not specify types when clear from context.
## Supported language features
* top-level code in the file: "Hello world!" really is just `basic.showString("Hello world!")`
* [basic types](http://www.typescriptlang.org/docs/handbook/basic-types.html)
* [variable declarations](http://www.typescriptlang.org/docs/handbook/variable-declarations.html): `let`, `const`, and `var`
* [functions](http://www.typescriptlang.org/docs/handbook/functions.html) with lexical scoping and recursion
### User-defined types and modules
* [classes](http://www.typescriptlang.org/docs/handbook/classes.html) with fields, methods and constructors; `new` keyword
* [enums](http://www.typescriptlang.org/docs/handbook/enums.html)
* [namespaces](http://www.typescriptlang.org/docs/handbook/namespaces.html) (a form of modules)
### Control-flow constructs
* `if ... else if ... else` statements
* `while` and `do ... while` loops
* `for(;;)` loops (see below about `for ... in/of`)
* `break/continue`; also with labeled loops
* `switch` statement (on numbers only)
* `debugger` statement for breakpoints
### Expressions
* conditional operator `? :`; lazy boolean operators
* 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 `() => ...`
* array literals `[1, 2, 3]`
## 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 ... of` statements
* object literals `{ foo: 1, bar: "two" }`
* method-like properties (get/set accessors)
* class inheritance
If there is something you'd like to see, please file an issue at [GitHub](http://github.com/microsoft/pxt/issues).

View File

@ -24,35 +24,18 @@ to select. You also narrow down the set of functions by typing, as below:
You might have noticed that the call `showString` above takes one value, You might have noticed that the call `showString` above takes one value,
the string to be scrolled on the LED screen. There is a second (optional) the string to be scrolled on the LED screen. There is a second (optional)
parameter that controls the speed of the the scroll. Try this: parameter that controls the speed of the scroll. Try this:
```typescript ```typescript
basic.showString("Hello!",50) basic.showString("Hello!",50)
``` ```
If you don't give a value for an optional parameter, where does its value
come from? TBD.
You might have noticed that the function list above shows all You might have noticed that the function list above shows all
the available parameters for each function. the available parameters for each function.
### ~button /js/sequence
```typescript NEXT: Sequencing Commands
basic.showString("Hello!") ### ~
basic.showLeds(`
. # . # .
. . . . .
. . # . .
# . . . #
. # # # .
`)
basic.pause(1000)
basic.clearScreen()
basic.showString("Goodbye!")
basic.showLeds(`
. # . # .
. . . . .
. . . . .
. # # # .
# . . . #
`)
basic.pause(1000)
basic.clearScreen()
```

75
docs/js/lang.md Normal file
View File

@ -0,0 +1,75 @@
# JavaScript and TypeScript
You can write micro:bit programs in a subset of [TypeScript](https://www.typescriptlang.org), a superset of JavaScript.
Many micro:bit programs, especially at the beginner's level, are just plain JavaScript. TypeScript introduces class-based
object-oriented programming, such as:
```typescript
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
basic.showString(greeter.greet())
```
This site is meant for teaching programming first, and JavaScript second. For this
reason, we have stayed away from concepts that are specific to JavaScript (for
example, prototype inheritance), and instead focused on ones common to most
modern programming languages (for example, loops, lexically scoped variables,
functions, classes, lambdas).
We leverage TypeScript's [type inference](http://www.typescriptlang.org/docs/handbook/type-inference.html) so that
students need not specify types when clear from context.
## Supported language features
* top-level code in the file: "Hello world!" really is just `basic.showString("Hello world!")`
* [basic types](http://www.typescriptlang.org/docs/handbook/basic-types.html)
* [variable declarations](http://www.typescriptlang.org/docs/handbook/variable-declarations.html): `let`, `const`, and `var`
* [functions](http://www.typescriptlang.org/docs/handbook/functions.html) with lexical scoping and recursion
### User-defined types and modules
* [classes](http://www.typescriptlang.org/docs/handbook/classes.html) with fields, methods and constructors; `new` keyword
* [enums](http://www.typescriptlang.org/docs/handbook/enums.html)
* [namespaces](http://www.typescriptlang.org/docs/handbook/namespaces.html) (a form of modules)
### Control-flow constructs
* `if ... else if ... else` statements
* `while` and `do ... while` loops
* `for(;;)` loops (see below about `for ... in/of`)
* `break/continue`; also with labeled loops
* `switch` statement (on numbers only)
* `debugger` statement for breakpoints
### Expressions
* conditional operator `? :`; lazy boolean operators
* 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 `() => ...`
* array literals `[1, 2, 3]`
## 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 ... of` statements
* object literals `{ foo: 1, bar: "two" }`
* method-like properties (get/set accessors)
* class inheritance
If there is something you'd like to see, please file an issue at [GitHub](http://github.com/microsoft/pxt/issues).

23
docs/js/seqeunce.md Normal file
View File

@ -0,0 +1,23 @@
## Sequencing commands
By calling one function after another, you can create an animation:
```typescript
basic.showLeds(`
. # . # .
. . . . .
. . # . .
# . . . #
. # # # .
`)
basic.showLeds(`
. # . # .
. . . . .
. . . . .
. # # # .
# . . . #
`)
```
## The Semicolon