Let's start with a syntax overview of all SmallJS language elements.
Don't worry, we'll get into more detail further on in the tutorial.
Here's an example SmallJS class declaration using all syntax features:



Explanation of the syntax elements used in the image above:

These uppercase keywords indicate the class and method properties.
They are specific for file-based SmallJS, and not part of standard Smalltalk.

- CLASS - Is followed by the class name.
- EXTENDS - Indicates the base class. Object is the root class.
- MODULE - The JS module this class should be put in.
- CLASSVARS - Variables of the class itself (not its instances).
  Like JS static class variables.
- VARS - Instance variables of objects created from the class.
  Like JS class instance variables.
- CLASSMETHODS - Methods following this will be added to the (meta)class.
  Like JS static class methods.
- METHODS - Methods following this will be added to class **instances**.
  Like JS regular class methods.
  This is the default method type if no method type is specified.
- INLINE - Inline JS code, not transpiled.
  ST variables can be accessed in inline JS, using the same names.
- "This is a comment." - ST comments are put in double quotes.
  (Strings always use single quotes.)

Method types, ordered from highest to lowest evaluation precedence:

- method1 - Unary method, has no arguments.
- ++ var - Binary (operator) method, has one argument.
- method2Arg1: aVar1 arg2: aVar2 - Keyword method, has one or more arguments.

Other method elements:

- | locVar lv2 lv3 | - Local variables declaration.
- var1 := 3 - Variable assignment.
  Note: var1 = 3 Tests for equality.
- ! - End of method indicator.

Constants and their ST class names:

- 'aaa' - String: Always use single quotes.
- $c - Character: Single character, not a string.
- 123 - Integer: Whole number.
- 3.14 - Float: Floating point number.
- ( 1 / 3 ) - Fraction: Exact fractional number.
- true, false - Boolean: Boolean values.
- nil - Nil: Singelton instance, like JS 'undefined' or 'null'.
- #( 'aaa' $c 123 3.14 ( 1 / 3 ) true nil ) - Array: Containing all previous values.

- [ 1 + 2 ] - Conditional code block, like JS lambda functions.
- [ :n | n squared ] - Block with 1 argument returning squared number.
- [ :a :b | a + b ] - Block with 2 arguments returning sum.
  Note: Blocks may also have more than 2 arguments.
- ^ 42 - Return a value from the current method, even when within a block.

Control flow statements in ST use methods with blocks:

- 1 + 2 = 3 ifTrue: [ 'Checks out' ]
  Like JS: if( 1 + 2 == 3 ) { ... }
- a > 0 ifTrue: [ 'Positive' ] ifFalse: [ 'Zero or negative' ]
  Like JS: if( a > 0 ) { ... } else { ... }
- 1 to: 10 do: [ :n | self log: n ]
  Like JS: for( n = 1; n <= 10; ++n ) { ... }
- [ a > 0 ] whileTrue: [ self log: a. a decrement ]
  Like JS: while( a > 0 ) { ... }
- [ self log: a. a decrement ] doWhile: [ a > 0 ]
  Like JS: do { ... } while( a > 0 )

You can add methods to other (system) classes in separate source files.
Then your additions will not be overwritten when the original (system) class is updated.
To do this, on the first line of a *.st file put the keyword CLASSEXTENSION
followed by the name of the class that is being extended.
Then add class and instance methods as described above.