From 5bea47a094ec49e7d055216abdc9cd99d25482d9 Mon Sep 17 00:00:00 2001 From: Tom Ball Date: Sat, 2 Jul 2016 10:18:39 -0400 Subject: [PATCH] more on js --- docs/javascript.md | 82 ++++++--------------------------------------- docs/js/call.md | 31 ++++------------- docs/js/lang.md | 75 +++++++++++++++++++++++++++++++++++++++++ docs/js/seqeunce.md | 23 +++++++++++++ 4 files changed, 116 insertions(+), 95 deletions(-) create mode 100644 docs/js/lang.md create mode 100644 docs/js/seqeunce.md diff --git a/docs/javascript.md b/docs/javascript.md index ca3815f0..34e3ee9e 100644 --- a/docs/javascript.md +++ b/docs/javascript.md @@ -1,75 +1,15 @@ # JavaScript -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: +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: -```typescript -class Greeter { - greeting: string; - constructor(message: string) { - this.greeting = message; - } - greet() { - return "Hello, " + this.greeting; - } +```codecard +[{ + "name": "Calling Functions", + "url":"/js/call.md" +},{ + "name": "Sequencing Commands", + "url":"/js/sequence.md" } - -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). \ No newline at end of file +] +``` \ No newline at end of file diff --git a/docs/js/call.md b/docs/js/call.md index e1f09800..cbab635f 100644 --- a/docs/js/call.md +++ b/docs/js/call.md @@ -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, 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 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 the available parameters for each function. - -```typescript -basic.showString("Hello!") -basic.showLeds(` - . # . # . - . . . . . - . . # . . - # . . . # - . # # # . - `) -basic.pause(1000) -basic.clearScreen() -basic.showString("Goodbye!") -basic.showLeds(` - . # . # . - . . . . . - . . . . . - . # # # . - # . . . # - `) -basic.pause(1000) -basic.clearScreen() -``` \ No newline at end of file +### ~button /js/sequence +NEXT: Sequencing Commands +### ~ diff --git a/docs/js/lang.md b/docs/js/lang.md new file mode 100644 index 00000000..eea36563 --- /dev/null +++ b/docs/js/lang.md @@ -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). \ No newline at end of file diff --git a/docs/js/seqeunce.md b/docs/js/seqeunce.md new file mode 100644 index 00000000..2a8d0bdc --- /dev/null +++ b/docs/js/seqeunce.md @@ -0,0 +1,23 @@ +## Sequencing commands + +By calling one function after another, you can create an animation: + +```typescript +basic.showLeds(` + . # . # . + . . . . . + . . # . . + # . . . # + . # # # . + `) +basic.showLeds(` + . # . # . + . . . . . + . . . . . + . # # # . + # . . . # + `) +``` + +## The Semicolon +