Writing Programs in JavaScript ============================== To write programs using JavaScript instead of VPython, change the first line of the program to "JavaScript X.Y", where "X.Y" is the current version. Equivalent headings are "GlowScript X.Y" and "GlowScript X.Y JavaScript". Here is the relationship between the VPython documentation and what you would write in JavaScript: .. code-block:: b = box(pos=vec(2,1,0, color=color.cyan) # VPython b.axis = vec(1,1,0) let b = box({pos:vec(2,1,0), color:color.cyan}) // JavaScript b.axis = vec(1,1,0) At the moment, the ACE editor used at glowscript.org is an old version that doesn't recognize some (now valid) elements of JavaScript, including in particular async, await, and class, and as a result statements containing these elements are marked as being in error. Evidently glowscript.org needs to upgrade its use of ACE. Using async and await --------------------- An animation loop must contain a rate(), sleep(), scene.pause(), or scene.waitfor() statement; otherwise the browser will lock up, and it is difficult to kill the browser. Moreover, these statements must be preceded by await, which is inserted automatically when VPython programs are transpiled to JavaScript but must be entered explicitly into a JavaScript program. Here is what these JavaScript statements must look like, including the five other VPython functions that take time to complete and therefore also need await: .. code-block:: await rate(30) await sleep(2) await scene.pause() await scene.waitfor('click') await scene.capture(filename) await input() await winput() await get_library(webaddress) await read_local_file(scene.title.anchor) If you write your own function or class method that includes any of these waiting statements, you must prepend async to the function or method declaration, and all calls to these functions or methods must be prepended with await, as with the functions shown above and in the runnable html file shown at the end of this article. Also, just before calling input() or winput(), it's a good idea to insert "sleep(0.1)" in order to make sure that the display is up to date before waiting for input. At glowscript.org your program is wrapped in an async function, which makes it possible to use await outside any of your functions. If you do not use glowscript.org to prepare your JavaScript program, you may need to wrap your program in an async function, as shown in the runnable html file below. It is not possible to use await outside an async function. Operator overloading for vectors -------------------------------- Something that is automatic at glowscript.org for JavaScript programs as well as for VPython programs is the "operator overloading" that permits vector operations such as ``let v = v1+v2``, where ``v1`` and ``v2 ``are vectors. If you do not use glowscript.org to prepare your JavaScript program, you will need to write this statement in the form ``v1.add(v2)``. Similarly, ``v1-v2`` would be written ``v1.sub(v2)``, ``5*v`` would be written ``v.multiply(5)``, and ``v/5`` would be written ``v.divide(5)``. An alternative is to pass your program through glowscript.org and click "Share or export this program" to obtain an operator-overloaded version of your program. New in version 3.0 ------------------ * Linkage of axis and size: Starting with version 3.0, JavaScript programs, like VPython programs, link changes in an object's axis to its size, and changes in its size to its axis. Prior to version 3.0, JavaScript programs did not perform such linkage, and the arrow object had a special attribute ``axis_and_length`` instead of ``axis``. Using ``axis_and_length`` now will cause an error. * Default sphere radius now 1: A related matter is that, for historical reasons, the default radius of a VPython sphere is 1, which is now also the default radius of a JavaScript sphere. Formerly a JavaScript sphere did not have a radius attribute, and its default size was ``vec(1,1,1)``, so the radius was 0.5. JavaScript class constructor method ----------------------------------- .. code-block:: class C { constructor(n) { C.n = n // a class variable this.x = 20 // a class instance variable } async init(y) { this.y = y print("Sleep...") await sleep(2) print(C.n, this.x, this.y) // displays 10 20 30 } } let a = new C(10) await a.init(30) Passing methods as arguments to other functions ----------------------------------------------- Suppose you create a class named C with an instance named c1 and a method c1.m. You might wish to create a reference in the form ``let cm = c1.m`` (no parentheses) and pass it to a function ``f`` in the form ``f(cm)``. In that case, you need to write the assignment to cm like this: ``let cm = c1.m.bind(c1)``. Again, this is done automatically for VPython programs. A runnable html file -------------------- Web VPython programs may be exported to html. The following runnable html file is produced from Javascript. Adjust the version number for the glow library appropriately, then save the following as an .html file and open it in a browser (double-click): .. code-block::