c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:Microsoft/pxt-microbit

Browse Source
This commit is contained in:
Michal Moskal 2016-07-26 12:46:24 +01:00
commit a062a85c7f
14 changed files with 831 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/about.md
View File

@ -38,7 +38,9 @@ Learn about the [hardware components](/device) of the micro:bit to make the most
You can program the micro:bit using [Blocks](/blocks) or [JavaScript](/javascript), via the [micro:bit APIs](/reference):
```blocks
basic.showString("Hi!");
input.onButtonPressed(Button.A, () => {
basic.showString("Hi!");
})
```
## Compile and Flash: Your Program!

34
docs/javascript.md
View File

@ -1,15 +1,31 @@
# JavaScript
# JavaScript and TypeScript
If you already know some JavaScript, you might be interested in [the JavaScript and TypeScript languages](/js/lang).
Otherwise, visit the cards below to starting programming JavaScript with the micro:bit:
Visit the cards below to starting programming JavaScript and TypeScript with the micro:bit:
```codecard
[{
"name": "Calling Functions",
"url":"/js/call"
"name": "Calling",
"url": "/js/call"
},{
"name": "Sequencing Commands",
"url":"/js/sequence"
}
]
"name": "Sequencing",
"url": "/js/sequence"
},{
"name": "Variables",
"url": "/js/variables"
},{
"name": "Operators",
"url": "/js/operators"
},{
"name": "Statements",
"url": "/js/statements"
},{
"name": "Functions",
"url": "/js/functions"
},{
"name": "Types",
"url": "/js/types"
},{
"name": "Classes",
"url": "/js/classes"
}]
```

4
docs/js/call.md
View File

@ -3,8 +3,8 @@
The simplest way to get started in JavaScript with your micro:bit is to
call one of the micro:bit's built-in JavaScript functions. Just like Blocks
are organized into categories/drawers, the micro:bit functions are organized by
namespaces, with names corresponding to the drawer names.
The `basic` namespace contains a number of very helpful functions:
namespaces, with names corresponding to the drawer names. The `basic` namespace
contains a number of helpful functions, such as:
```typescript
basic.showString("Hello!")

268
docs/js/classes.md Normal file
View File

@ -0,0 +1,268 @@
# 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 now, compiling them
down to JavaScript that works across all major browsers and platforms, without having to wait for the next version of JavaScript.
Let's take a look at a simple class-based example:
```ts
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
### ~hint
### Inheritance is not supported yet for the micro:bit. Coming soon...
### ~
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:
```ts
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:
```ts
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:
```ts
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:
```ts
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,
```ts
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,
```ts
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.
```ts
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:
```ts
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`.

161
docs/js/functions.md Normal file
View File

@ -0,0 +1,161 @@
# Functions
Functions are the fundamental building block of programs. Here is the simplest
way to make a function that adds two numbers:
```ts
// Named function
function add(x : number, y : number) {
return x + y;
}
basic.showNumber(add(1, 2))
```
### ~ hint
For the micro:bit, you must specify a [type](/js/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.
```ts
let z = 100;
function addToZ(x: number, y: number) {
return x + y + z;
}
basic.showNumber(addToZ(1, 2))
```
## Typing the function
Let's add a return type to our add function:
```ts
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.
# Optional and Default Parameters
In TypeScript, the number of arguments given to a function has to match the number of parameters the function expects.
```ts
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:
```ts
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"`.
```ts
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
```ts
function buildName(firstName: string, lastName?: string) {
// ...
}
```
and
```ts
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`:
```ts
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:
```ts
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:
```ts
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;
```
### ~button /js/types
NEXT: Types
### ~

0
docs/js/inference.md Normal file
View File

75
docs/js/lang.md
View File

@ -1,75 +0,0 @@
# 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).

30
docs/js/operators.md Normal file
View File

@ -0,0 +1,30 @@
## Operators
The following JavaScript operators are supported for the micro:bit.
### ~hint
Note that for the micro:bit 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)
## More
* lambda functions `() => { ... }`
* array literals `[1, 2, 3]`
* strings, with a few common methods
* [string templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) (`` `x is ${x}` ``)
### ~button /js/statements
NEXT: Statements
### ~

50
docs/js/sequence.md
View File

@ -1,6 +1,6 @@
# Sequencing commands
# Sequencing
By calling one function after another, you can create an animation:
By calling one function after another, in sequence, you can create an animation:
```typescript
basic.showLeds(`
@ -9,17 +9,55 @@ basic.showLeds(`
. . # . .
# . . . #
. # # # .
`)
`);
basic.showLeds(`
. # . # .
. . . . .
. . . . .
. # # # .
# . . . #
`)
`);
```
## The Semicolon
### The semicolon
Coming soon...
In JavaScript, the semicolon (;) is used to terminate (or end) a statement. However, in most
cases, the semicolon is optional and can be omitted. So both code sequences below are
legal:
```typescript
basic.showNumber(1)
basic.showNumber(2)
```
```typescript
basic.showNumber(1);
basic.showNumber(2);
```
## The empty statement
In JavaScript, there is the concept of an *empty statement*, which is whitespace followed by
a semicolon in the context where a statement is expected.
So, the following code is an infinite loop
followed by a call to `showNumber` that will never execute:
```typescript
while(true) ;
basic.showNumber(1);
```
### ~hint
For the micro:bit, we don't allow a program to contain an empty statement, such as shown above.
If you really want an empty statement, you need to use curly braces to delimit an empty statement block:
```typescript
while(true) { }
basic.showNumber(1);
```
### ~
[Read more](http://inimino.org/~inimino/blog/javascript_semicolons) about semicolons in JavaScript.
### ~button /js/variables
NEXT: Variable Declarations
### ~

33
docs/js/statements.md Normal file
View File

@ -0,0 +1,33 @@
# Statements
The following JavaScript statements are supported for the micro:bit:
## Variable declarations
* `const` statement - [read more](http://devdocs.io/javascript/statements/const)
* `let` statement - [read more](http://devdocs.io/javascript/statements/let)
* `var` statement - [read more](http://devdocs.io/javascript/statements/var)
## 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 /js/functions
NEXT: Functions
### ~

140
docs/js/types.md Normal file
View File

@ -0,0 +1,140 @@
# 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.
# Boolean
The most basic datatype is the simple true/false value, which is called a `boolean` value.
```ts
let isDone: boolean = false;
```
# Number
### ~ hint
In JavaScript, `numbers` are floating point values.
However, for the micro:bit, `numbers` are integer values.
### ~
Integer values can be specified via decimal, hexadecimal and octal notation:
```ts
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.
```ts
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 }`.
```ts
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:
```ts
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:
```ts
let list: number[] = [1, 2, 3];
```
The second way uses a generic array type, `Array<elemType>`:
```ts
let list: Array<number> = [1, 2, 3];
```
### ~hint
For the micro:bit, 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.
```ts
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`:
```ts
enum Color {Red = 1, Green, Blue};
let c: Color = Color.Green;
```
Or, even manually set all the values in the enum:
```ts
enum Color {Red = 1, Green = 2, Blue = 4};
let c: Color = Color.Green;
```
# Any
The TypeScript type `any` is not supported in the micro:bit.
# 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:
```ts
function warnUser(): void {
basic.showString("This is my warning message");
}
```
Declaring variables of type `void` is not useful.
# 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
```ts
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.
### ~button /js/classes
NEXT: Classes
### ~

121
docs/js/variables.md Normal file
View File

@ -0,0 +1,121 @@
# Variable Declarations
Declaring a variable in JavaScript has always traditionally been done with the `var` keyword.
```typescript
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.
## 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
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 /js/operators
NEXT: Operators
### ~

2
docs/projects.md
View File

@ -14,7 +14,7 @@ Here are some cool projects that you can build with your micro:bit!
"imageUrl": "/static/mb/projects/a2-buttons.png"
},{
"name": "Love Meter",
"url":"/projects/lover-meter",
"url":"/projects/love-meter",
"imageUrl":"/static/mb/projects/a3-pins.png"
},{
"name": "Rock Paper Scissors",

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "pxt-microbit",
"version": "0.2.192",
"version": "0.2.186",
"description": "BBC micro:bit target for PXT",
"keywords": [
"JavaScript",
@ -29,6 +29,6 @@
"typescript": "^1.8.7"
},
"dependencies": {
"pxt-core": "0.2.202"
"pxt-core": "0.2.195"
}
}