Scala.js DOM

https://scala-js.github.io/scala-js-dom/
Admin
Scala.js DOM provides a statically typed Scala interface to the Document Object Model (DOM) and...
Tokens:2,251
Snippets:17
Trust Score:9.7
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Persist input value with dom.window.localStorage

Source: https://scala-js.github.io/scala-js-dom

Loads a value from localStorage on startup and saves the input value on each keyup event, displaying a confirmation message. The example is from the dom.localStorage section.

```scala
def main(in: html.Input, box: html.Div) = {
  val key = "my-key"

  in.value =
    dom.window.localStorage.getItem(key)

  in.onkeyup = { (e: dom.Event) =>
    dom.window.localStorage.setItem(
      key, in.value
    )
    box.textContent =
      "Saved! " + in.value
  }
}
```

--------------------------------

### Encode input value with dom.window.btoa

Source: https://scala-js.github.io/scala-js-dom

Encodes the input value as base64 using dom.window.btoa and displays the result in a div whenever the input's keyup event fires. The example is from the dom.btoa section.

```scala
def main(in: html.Input,
         out: html.Div) = {
  in.onkeyup = { (e: dom.Event) =>
    out.textContent =
      dom.window.btoa(in.value)
  }
}
```

--------------------------------

### Append a child element with Node.appendChild

Source: https://scala-js.github.io/scala-js-dom

Creates a new div element, sets its text content, and appends it to the provided div. The example is from the Node.appendChild section of the Scala.js DOM documentation.

```scala
def main(div: html.Div) = {
  val child = dom.document.createElement("div")
  child.textContent = "Hi from Scala-js-dom"
  div.appendChild(child)
}
```

--------------------------------

### Draw on canvas with dom.HTMLCanvasElement

Source: https://scala-js.github.io/scala-js-dom

Draws a red shape on a canvas using the 2D rendering context, setting stroke style, line width, and drawing lines and an arc. The example is from the dom.HTMLCanvasElement section.

```scala
def main(c: html.Canvas) = {
  type Ctx2D =
    dom.CanvasRenderingContext2D
  val ctx = c.getContext("2d")
             .asInstanceOf[Ctx2D]
  val w = 300
  c.width = w
  c.height = w

  ctx.strokeStyle = "red"
  ctx.lineWidth = 3
  ctx.beginPath()
  ctx.moveTo(w/3, 0)
  ctx.lineTo(w/3, w/3)
  ctx.moveTo(w*2/3, 0)
  ctx.lineTo(w*2/3, w/3)
  ctx.moveTo(w, w/2)
  ctx.arc(w/2, w/2, w/2, 0, 3.14)

  ctx.stroke()
}
```

--------------------------------

### Handle mousemove events and display coordinates

Source: https://scala-js.github.io/scala-js-dom

Sets an onmousemove handler on a pre element that displays mouse coordinates (clientX, clientY, pageX, pageY, screenX, screenY) using a multiline string with stripMargin. The example is from the Node.onmousemove section.

```scala
def main(pre: html.Pre) = {
  pre.onmousemove = {
    (e: dom.MouseEvent) =>
      pre.textContent =
        s"""e.clientX ${e.clientX}
           |e.clientY ${e.clientY}
           |e.pageX   ${e.pageX}
           |e.pageY   ${e.pageY}
           |e.screenX ${e.screenX}
           |e.screenY ${e.screenY}
         """.stripMargin
  }
}
```

--------------------------------

### WebSocket echo client with dom.WebSocket

Source: https://scala-js.github.io/scala-js-dom

Creates a WebSocket connection to the echo server and sends input text on keyup, displaying echoed messages in a pre element. Demonstrates onmessage and onopen event handlers.

```scala
def main(in: html.Input,
         pre: html.Pre) = {
  val echo = "wss://echo.websocket.org"
  val socket = new dom.WebSocket(echo)
  socket.onmessage = {
    (e: dom.MessageEvent) =>
      pre.textContent +=
        e.data.toString
  }
  socket.onopen = { (e: dom.Event) =>
    in.onkeyup = { (e: dom.Event) =>
      socket.send(in.value)
    }
  }
}
```

--------------------------------

### Fetch API with dom.fetch

Source: https://scala-js.github.io/scala-js-dom

Uses dom.fetch to retrieve a random activity from the Bored API and displays the response text in a pre element. Requires implicit ExecutionContext and js.Thenable.Implicits for the for-comprehension.

```scala
def main(pre: html.Pre) = {
  import scala.concurrent
              .ExecutionContext
              .Implicits
              .global
  import js.Thenable.Implicits._
  val url =
    "https://www.boredapi.com/api/activity"
  val responseText = for {
    response <- dom.fetch(url)
    text <- response.text()
  } yield {
    text
  }
  for (text <- responseText)
    pre.textContent = text
}
```

--------------------------------

### Call JavaScript alert from Scala with scala-js-dom

Source: https://scala-js.github.io/scala-js-dom

Shows how to call a JavaScript global function from Scala code using the statically typed interface provided by scala-js-dom. Importing org.scalajs.dom and calling dom.window.alert will cause a JavaScript alert box with the message 'Hi from Scala-js-dom' to appear.

```scala
def main() = {
  import org.scalajs.dom
  dom.window.alert("Hi from Scala-js-dom")
}
```

--------------------------------

### Random color with Element.style

Source: https://scala-js.github.io/scala-js-dom

Randomly sets the text color of a div element to one of three colors using the style property. Uses util.Random to pick an index.

```scala
def main(div: html.Div) = {
  val colors = Seq(
    "red", "green", "blue"
  )

  val index =
    util.Random.nextInt(colors.length)

  div.style.color = colors(index)
}
```

--------------------------------

### Add scalajs-dom 2.2.0 dependency to sbt build

Source: https://scala-js.github.io/scala-js-dom

Adds the scalajs-dom 2.2.0 dependency to an sbt build definition. This version is built and published for Scala.js 1.5+ with Scala 2.11, 2.12, 2.13, and 3.0+.

```sbt
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.2.0"
```
Tokens:
Raw