Adding custom javascript functions to scala-js-example-app from GitHub

Question

This is based on the scala-js-example-app from GitHub.

I have a function that I want to define in Javascript and is not already defined by the Scala.js library.

In my copy of the ScalaJSExample.scala file, I have:

object Mine extends js.Object {
    def foobarfoo():String = ??? //this is just a simple example and I know this can be done completely in Scala, but just go with it.
}

object ScalaJSExample extends js.JSApp {
  def main(): Unit = {
    val paragraph = dom.document.createElement("p")
    paragraph.innerHTML = "<strong>It works!" + Mine.foobarfoo() + ".</strong>"
    dom.document.getElementById("playground").appendChild(paragraph)
  }

  /** Computes the square of an integer.
   *  This demonstrates unit testing.
   */
  def square(x: Int): Int = x*x
}

Now I want to define foobarfoo in Javascipt.

I've tried writing this in a javascript file:

function foobarfoo() { return "Hello, World!"; }

and that didn't work, so I tried a more Scala.js syntax:

var Mine = {
    foobarfoo: function() { return "Hello, World!"; }
}

and many other variations, but none of these worked and I couldn't get "Hello, World!" to appear on the webpage after compilation.

How should I write foobarfoo() so that I get the right result?

The second formulation is correct. The first one can also be correct if you mark `Mine` as extending `js.GlobalScope` on the Scala side. Where do you write the JavaScript snippet, and how do you include it in your HTML page? — sjrd, Jun 28 '14 at 04:49
@sjrd: I wrote the Javascript snippet in a separate file called myscript.js and in the index-fastopt.html file I added: under the two other script tags. — user3025403, Jun 28 '14 at 08:33
"under the two other script tags" -> that's it. It has to be *above* the other two script tags (at least above the second one). Indeed, the second script tag launches the Scala.js app. If your script tag is after that, at the time the Scala.js app runs, your object `Mine` and `foobarfoo` have not been defined yet. — sjrd, Jun 28 '14 at 15:23
Thanks, sjrd! After I moved the script link to be before the other two it worked! And I just realized that I forked this project from your GitHub account. Thanks for that too. — user3025403, Jun 28 '14 at 18:18

score 0 · Accepted Answer · answered Jul 01 '14 at 08:20

Resuming the discussion, the problem was the inclusion order: The OP added the custom JavaScript functions after the Scala.js code:

<script type="text/javascript" src="./target/scala-2.11/example-opt.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-launcher.js"></script>
<script type="text/javascript" src="src/main/scala/example/myscript.js"></script>

Therefore, the requested function couldn't be found. Putting myscript.js to the top solved the issue:

<script type="text/javascript" src="src/main/scala/example/myscript.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-opt.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-launcher.js"></script>

Adding custom javascript functions to scala-js-example-app from GitHub

1 Answers1