I saw some Scala code that appears to generate HTML...
def pagePlay: TypedTag[dom.raw.HTMLElement] = div{
val levels = Array(
(10, "Easy game; you are allowed 10 misses."),
(5, "Medium game; you are allowed 5 misses."),
(3, "Hard game; you are allowed 3 misses.")
)
div(
p("Inspired from ")(a(href:="http://www.yiiframework.com/demos/hangman/", target:="_blank","Yii's demo")),
p("This is the game of Hangman. You must guess a word, a letter at a time.\n" +
"If you make too many mistakes, you lose the game!"),
form(id := "playForm")(
for((level,text) <- levels) yield {
val levelId = s"level_${level}"
div(`class`:="radio")(
input(id:=levelId, `type`:="radio", name:="level", onclick:={ ()=>
Model.level() = level
}, {if(level == Model.level()) checked:="checked"}),
label(`for`:=levelId, style:="padding-left: 5px")(text)
)
}, br,
input(`type`:="button", value:="Play!", `class`:="btn btn-primary", onclick:={ () =>
if(Model.level() > 0) {
Model.start()
goto(pageGuess)
}else{
dom.alert("Please select level!")
}
})
)
)
}
^ Is this ScalaTag code actually generating HTML that can be read by a simple web crawler with no javascript support, or is it generating Javascript that is modifying the DOM to produce divs and paragraphs and what not?
I tried reading the documentation, but for div and p there was none other than "Pattern: div: Tags.this.ConcreteHtmlTag[html.Div]"
It uses both, well at least now it does:
From the docs:
Although Scalatags was originally a HTML-String generation library, it now
ships with an additional backend that runs only on ScalaJS.
Furthermore:
The DOM backend provides an additional method .render on all Scalatags fragments, which converts the fragment into a DOM tree:
val elem = div.render
assert(elem.children.length == 0)
elem.appendChild(p(1, "wtf", "bbq").render)
assert(elem.children.length == 1)
val pElem = elem.children(0).asInstanceOf[Paragraph]
assert(pElem.childNodes.length == 3)
assert(pElem.textContent == "1wtfbbq")
As you can see, you can manipulate DOM elements directly, calling standard DOM APIs like .children, .appendChild, etc.
As you can see, you can manipulate DOM elements directly, calling standard DOM APIs like .children, .appendChild, etc. Which as you know are Javascript!