How to create a javascript function using Scala.js?

Question

I've created a ScalaJS project using:

http://www.scala-js.org/doc/tutorial.html

Reading the docs at http://www.scala-js.org/doc/faq.html, it does not seem that creating and calling a JavaScript function is described?

How do I create a JavaScript function and invoke it?

I'll manually add d3 to the head element to index.html:

<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

But how do I create the below code using ScalaJS?

$(document).ready(function () {

    var svgContainer = d3.select("body").append("svg")
            .attr("width", 1200)
            .attr("height", 1200)
            .attr("text-align", "center");

    testFunction(svgContainer);
});

<script>
 function testFunction(svgContainer) {
    alert(svgContainer)
}
</script>

Entire index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Example Scala.js application</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>

<h1>Example Scala.js application - full-optimized version</h1>

<p>After having compiled and full-optimized properly the code for the application
(using `sbt fullOptJS`), you should see "It works" herebelow.
See README.md for detailed explanations.</p>

<div id="playground">
</div>

<script type="text/javascript" src="./target/scala-2.10/my-project-fastopt.js"></script>
<script type="text/javascript" src="./target/scala-2.10/my-project-launcher.js"></script>

</body>
</html>

Update:

object ScalaJSExample extends js.JSApp {
  def main(): Unit = {

    jQuery(dom.document).ready { () => {

        val svgContainer = "d3.select(\"body\").append(\"svg\").attr(\"width\", 1200).attr(\"height\", 1200).attr(\"text-align\", \"center\")";
        val function = "callFunction(svgContainer)";
      }
    }
  }

  def callFunction(svgContainer): Unit = {

  }
}

In callFunction should svgContainer be typed, will callFunction be created as a JavaScript function when built using fastOptJS?

Within jQuery(dom.document).ready {, is this the correct method of creating svgContainer and testFunction?

sjrd · Accepted Answer · 2014-12-07 14:56:26Z

In Scala.js, scala.FunctionNs can be converted implicitly to js.FunctionNs and back, so you basically don't need to do anything: just pass in a lambda to the JavaScript call. There is an example of this in Step 5 of the the tutorial, under "Setup UI in Scala.js". For your code, it would look like this:

jQuery(dom.document).ready { () =>
  val svgContainer = ...
}

You can find more information on this in the calling JavaScript guide.

Update:

Here is the translation of your entire JavaScript snippet:

import scala.scalajs.js
import org.scalajs.dom           // see https://github.com/scala-js/scala-js-dom
import org.scalajs.jquery.jQuery // see https://github.com/scala-js/scala-js-jquery

object ScalaJSExample extends js.JSApp {
  val d3 = js.Dynamic.global.d3 // assuming you don't have static types for d3, here

  def main(): Unit = {
    jQuery(dom.document).ready { () =>
      val svgContainer =
        d3.select("body").append("svg")
          .attr("width", 1200)
          .attr("height", 1200)
          .attr("text-align", "center")
      testFunction(svgContainer)
    }
  }

  def testFunction(svgContainer: js.Dynamic): Unit = {
    dom.alert(svgContainer.toString())
  }
}

As you can see:

For libraries that have static types for Scala.js (e.g., DOM and jQuery), it is best to use these static types. Here is use ready(), dom.document and dom.alert in a statically typed fashion.
When you don't have static types, you can use js.Dynamic to manipulate JavaScript values in a dynamically typed way, using the normal syntax (not strings)
You define functions with def. It shouldn't matter to you whether they are compiled as JavaScript functions or not: just write your Scala code without thinking about it, the compiler will do its job.

please see question update, I'm unsure how to pass the svgContainer parameter to function and invoke same function?

Collectives™ on Stack Overflow

How to create a javascript function using Scala.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related