The role of JavaScript, HTML5 and WebKit

App Studio is built on top of JavaScript, HTML5 and Webkit, using features of HTML5. While it is perfectly reasonable to develop apps using purely App Studio, we allow you to deal directly with these underlying technologies. While this adds considerable power to the language, this Tech Note assumes you already have knowledge of them.

App Studio runs within a browser session. Depending on the platform you are running on, it may not be evident that this is the case: for example, an App Studio app on an iPhone looks like a normal app in the launcher and when run.

JavaScript

If you haven't been paying attention to JavaScript, it has come a long way in recent years. Originally developed as a language to do scripting on web pages, recent work by Google and Apple have made it more powerful than many pure programming languages. They have also worked on its speed: For example, Google's V8 JavaScript engine ran one test 2.8 times faster than the same code in Microsoft's .NET, Microsoft's main development and runtime environment.

App Studio works by translating your BASIC code into native JavaScript at compile time on a line by line basis. The result is that the speed of App Studio is close to (or identical) to the same code in JavaScript. It is by far the fastest implementation of BASIC we have ever done.

For more documentation, see this introduction to JavaScript and this reference listing.

HTML5

A lot of the cool stuff App Studio can do is made possible by HTML5. It's an evolving standard. Not all browsers have implemented all the features yet, but they are making steady progress. There is a nice chart showing where the various mobile browsers are at this time.

WebKit

WebKit is a layout engine designed to allow browsers to render html pages. Since App Studio runs within a browser session, it can make full use of WebKit. WebKit is developed by individuals from Apple, KDE, Nokia, Google, Bitstream, Torch Mobile and others, so it is widely available.

App Studio's IDE exposes a reasonable subset of WebKit's features. Much of the full feature set is available, but we chose to keep things simple, but allow advanced users to still get at the additional features.

Variables, Scope and Functions

Variables are all standard JavaScript types, using the same scoping rules. JavaScript's object functions for types will all work. For example, JavaScript's array concat function works like this:

Dim A, B, C
A = [1,2,3]
B = [4,5,6]
Print A.concat(B)

Output is

1,2,3,4,5,6

One thing to keep in mind: the App Studio string functions treat strings as 1 based, while the JavaScript functions are zero based. Here's an example:

DIM A
A = "ABCEDFG"
Print A.substr(1,3)  '.substr is inherited from JavaScript's string types
Print Mid(A,1,3)

Output is

BCE
ABC

JavaScript variables are case sensitive. NS Basic's code editor forces all variable names to conform to their definitions. If you change the case of a variable in your App Studio code, you will need to change it in your JavaScript code as well.

The JavaScript...End JavaScript Statement

You can put pure JavaScript code in the middle of an App Studio Program. Simply enclose it in JavaScript... End JavaScript statements.

Suppose you need a function to capitalize just the first letter of a word. It would be easy to write in App Studio, but you have already found one on the net:

REM JAVASCRIPT/END JAVASCRIPT sample
Dim s
s = "knuTH"
JAVASCRIPT
  function UCFirst(str){
    // split string
    firstChar = str.substring(0,1);
    remainChar = str.substring(1);

    // convert case
    firstChar = firstChar.toUpperCase(); 
    remainChar = remainChar.toLowerCase();

    return firstChar + remainChar
  }
END JAVASCRIPT
Print UCFirst(s)

Output is

Knuth

This powerful feature will let you include many existing JavaScript functions and libraries in your App Studio programs. Remember that JavaScript variables are case sensitive, while App Studio is not.

The HTML...End HTML statement

You can embed HTML inside a JAVASCRIPT block. Any valid HTML is okay: you can even create HTML objects which can be used by your program.

HTML
  <button onmousedown="button1()">Button 1
  <div id="box">Box</div>
End HTML

Function button1()
  box.innerHTML= event.screenX & ", " & event.screenY
End Function

Output is button labelled Button 1 and the word "Box". Click on the button, and "Box" is replaced by the x,y position where you clicked. Here's another one. This time, we're reading a file in and using it in our App Studio program:

HTML
  <iframe src="http://www.nsbasic.com/testdata.txt" id="container" width=0 height=0></iframe>
End HTML

Print "The contents of container are " & parent.document.getElementById("container").src

Output is

The contents of the container are "(contents of the file)"

The Print statement can also be used to add HTML elements to your app. The output of Print is given to the brower: if it is HTML, it is rendered as such.

'Geolocation - this sample gets the current locationand displays a map of it

Function handler(location)
  Dim s
  Print "Longitude: " + location.coords.longitude 
  Print "Latitude: " + location.coords.latitude 
  Print "Accuracy: " + location.coords.accuracy
  s = "<img src='http://maps.google.com/maps/api/staticmap?center=" & _
  location.coords.latitude & "," & location.coords.longitude & _
  "&zoom=14&size=300x200&maptype=roadmap&sensor=false'>"
  Print s
End Function

navigator.geolocation.getCurrentPosition(handler);

In this example, the variable s is given an image tag, which references an image on Google's website with a map of the current location. Doing Print s writes the contents of s to the browser, which then interprets the HTML and displays the image.

Execute and Eval

The Execute and Eval statements allow you to create a string of JavaScript code dynamically in your program, then execute it in the current context. Since these functions can actually change variable and code space in your program, they should be used with care.

Special care needs to be taken to make sure that input from end users is never allowed into the argument of these functions. This could be used inject code into your program, a major security risk.

Here's a sample of these functions side by side. For more information, see the Language Reference.

REM EVAL and EXECUTE
Dim A, code
A = 100
code = "A*5"
Print EVAL("code")
Print EVAL(code)

code="function multiply(a,b){return a*b}"
EXECUTE code

Print multiply(3,4)

Output is

A*5
500
12