more on js
This commit is contained in:
		@@ -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",
 | 
				
			||||||
    greet() {
 | 
					  "url":"/js/sequence.md"
 | 
				
			||||||
        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).
 | 
					 | 
				
			||||||
@@ -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
									
								
							
							
						
						
									
										75
									
								
								docs/js/lang.md
									
									
									
									
									
										Normal 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
									
								
							
							
						
						
									
										23
									
								
								docs/js/seqeunce.md
									
									
									
									
									
										Normal 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
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		Reference in New Issue
	
	Block a user