3

[Golang] GopherJS Synonyms with JavaScript

 2 years ago
source link: http://siongui.github.io/2016/01/29/go-gopherjs-synonyms-with-javascript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

[Golang] GopherJS Synonyms with JavaScript

Updated: January 15, 2017

Inspired by [4], Golang/GopherJS (with / without GopherJS bindings for the JavaScript DOM APIs) synonyms with JavaScript.

JavaScript vs GopherJS vs GopherJS with DOM binding

JavaScript GopherJS GopherJS with DOM binding

// no need to import anything

import "github.com/gopherjs/gopherjs/js"

import "honnef.co/go/js/dom"

The window object

window

type Object

js.Global

GetWindow() function

dom.GetWindow()

alert()

alert("Hello World")

js.Global.Call("alert", "Hello World")

dom.GetWindow().Alert("Hello World")

The HTML DOM document Object

document

js.Global.Get("document")

dom.GetWindow().Document()

navigator Object

window.navigator

js.Global.Get("navigator")

dom.GetWindow().Navigator()

NavigatorLanguage API

window.navigator.language
window.navigator.languages

js.Global.Get("navigator").Get("language").String()
js.Global.Get("navigator").Get("languages").String()

// not implemented

getElementById()

element = document.getElementById("foo");

element := js.Global.Get("document").Call("getElementById", "foo")

element := dom.GetWindow().Document().GetElementByID("foo")

HTML DOM innerHTML property

// read
var value = document.getElementById("foo").innerHTML;
// set
document.getElementById("foo").innerHTML = "new value";

element := js.Global.Get("document").Call("getElementById", "foo")
// read
value := element.Get("innerHTML").String()
// set
element.Set("innerHTML", "new value")

element := dom.GetWindow().Document().GetElementByID("foo")
// read
value := element.InnerHTML()
// set
element.SetInnerHTML("new value")

HTML DOM textContent property

// read
var value = document.getElementById("foo").textContent;
// set
document.getElementById("foo").textContent = "new value";

element := js.Global.Get("document").Call("getElementById", "foo")
// read
value := element.Get("textContent").String()
// set
element.Set("textContent", "new value")

element := dom.GetWindow().Document().GetElementByID("foo")
// read
value := element.TextContent()
// set
element.SetTextContent("new value")

Event binding - addEventListener()

var foo = document.getElementById("foo");
// register onclick event
foo.addEventListener("click", function(event) {
  // do something
  event.preventDefault()
}, false);

foo := js.Global.Get("document").Call("getElementById", "foo")
// register onclick event
foo.Call("addEventListener", "click", func(event *js.Object) {
  // do something
  event.Call("preventDefault")
}, false)

foo := dom.GetWindow().Document().GetElementByID("foo")
// register onclick event
foo.AddEventListener("click", false, func(event dom.Event) {
  // do something
  event.PreventDefault()
})

Remove all child nodes of a DOM element

var foo = document.getElementById("foo");

while (foo.hasChildNodes()) {
  foo.removeChild(foo.lastChild);
}

foo := js.Global.Get("document").Call("getElementById", "foo")

for foo.Call("hasChildNodes").Bool() {
  foo.Call("removeChild", foo.Get("lastChild"))
}

foo := dom.GetWindow().Document().GetElementByID("foo")
// assume foo is a div element, type assertion.
f := foo.(*dom.HTMLDivElement)
for f.HasChildNodes() {
  f.RemoveChild(f.LastChild())
}

JavaScript vs GopherJS

JavaScript GopherJS

createElement: create a DOM element

var div = document.createElement("div");

div := js.Global.Get("document").Call("createElement", "div")

createTextNode: create a text node

var text = document.createTextNode("Hello World!");

text := js.Global.Get("document").Call("createTextNode", "Hello World!")

The location object of window object:

// current URL: http://localhost:8000/code/gopherjs/window-location/index.html?a=1

// return - http://localhost:8000/code/gopherjs/window-location/index.html?a=1
window.location.href
// return - /code/gopherjs/window-location/index.html
window.location.pathname
// return - ?a=1
window.location.search

// current URL: http://localhost:8000/code/gopherjs/window-location/index.html?a=1

var location = js.Global.Get("location")
// return - http://localhost:8000/code/gopherjs/window-location/index.html?a=1
location.Get("href").String()
// return - /code/gopherjs/window-location/index.html
location.Get("pathname").String()
// return - ?a=1
location.Get("search").String()

JavaScript vs GopherJS

JavaScript GopherJS

querySelector returns a DOM element

var elm = document.querySelector(".myclass");

d := js.Global.Get("document")
elm := d.Call("querySelector", ".myclass")

querySelectorAll returns a NodeList

var elmList = document.querySelectorAll("div");
for (var i = 0; i < elmList.length; ++i) {
  var elm = elmList[i];
  // do something with the element
}

d := js.Global.Get("document")
nodeList := d.Call("querySelectorAll", "div")
length := nodeList.Get("length").Int()
for i := 0; i < length; i++ {
  elm := nodeList.Call("item", i)
  // do something with the element
}

Test if an element contains a class

if (element.classList.contains("myClassName")) {
  // do something
}

if element.Get("classList").Call("contains", "myClassName").Bool() {
  // do something
}

Tested on:

  • Ubuntu Linux 16.10
  • Go 1.7.4,
  • Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit).

References:

[2]Bindings · gopherjs/gopherjs Wiki · GitHub


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK