Synonyms - Go and JavaScript

Inspired by [4], This post provides synonyms of Golang and JavaScript in frontend programming, and served as references for developers who already have basic understanding of JavaScript and GopherJS/godom.

Table of Content

import packages

JavaScript: no need to import any packages

GopherJS

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

GopherJS + godom

import (
      . "github.com/siongui/godom"
)

window object

JavaScript

window

GopherJS

js.Global

GopherJS + godom

Window

alert() method

JavaScript

alert("Hello World");

GopherJS

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

GopherJS + godom

Window.Alert("Hello World")

setTimeout() method

JavaScript

setTimeout(function() {
  console.log("3 seconds timeout");
}, 3000);

Go (or GopherJS)

import "time"

time.AfterFunc(3*time.Second, func() {
      println("3 seconds timeout")
})

Run Code on GopherJS Playground

JavaScript new Keyword

JavaScript

var d = new Date();
console.log(d);

GopherJS

d := js.Global.Get("Date").New()
println(d)

GopherJS + godom

d := Window.Get("Date").New()
println(d)

new with Chain Dots

JavaScript

var x = new joint.dia.Graph;

GopherJS

x := js.Global.Get("joint").Get("dia").Get("Graph").New()

GopherJS + godom

x := Window.Get("joint").Get("dia").Get("Graph").New()

new with option

JavaScript

const ke = new KeyboardEvent("keyup", {keyCode: 13});
document.body.dispatchEvent(ke);

GopherJS

option := js.Global.Get("Object").New()
option.Set("keyCode", 13)
ke := js.Global.Get("KeyboardEvent").New("keyup", option)
js.Global.Get("document").Get("body").Call("dispatchEvent", ke)

GopherJS + godom

option := Window.Get("Object").New()
option.Set("keyCode", 13)
ke := Window.Get("KeyboardEvent").New("keyup", option)
Document.Get("body").Call("dispatchEvent", ke)

querySelector

JavaScript

var elm = document.querySelector("#foo");

GopherJS

elm := js.Global.Get("document").Call("querySelector", "#foo")

GopherJS + godom

elm := Document.QuerySelector("#foo")

querySelectorAll

JavaScript

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

GopherJS

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
}

GopherJS + godom

nodeList := Document.QuerySelectorAll("div")
for _, elm := range nodeList {
      // do something with the element
}

getElementById

JavaScript

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

GopherJS

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

GopherJS + godom

element := Document.GetElementById("foo")

innerHTML

JavaScript

// set innerHTML
element.innerHTML = "<strong>Hello World</strong>";

// get innerHTML
console.log(element.innerHTML);

GopherJS

// set innerHTML
element.Set("innerHTML", "<strong>Hello World</strong>")

// get innerHTML
println(element.Get("innerHTML").String())

GopherJS + godom

// set innerHTML
element.SetInnerHTML("<strong>Hello World</strong>")

// get innerHTML
println(element.InnerHTML())

textContent

JavaScript

// set textContent
element.textContent = "Hello World";

// get textContent
console.log(element.textContent);

GopherJS

// set textContent
element.Set("textContent", "Hello World")

// get textContent
println(element.Get("textContent").String())

GopherJS + godom

// set textContent
element.SetTextContent("Hello World")

// get textContent
println(element.TextContent())

addEventListener

JavaScript

element.addEventListener("click", function(e) {
  // do something here
});

GopherJS

element.Call("addEventListener", "click", func(event *js.Object) {
      // do something here
})

GopherJS + godom

element.AddEventListener("click", func(e Event) {
      // do something here
})

createElement

JavaScript

document.createElement("span");

GopherJS

js.Global.Get("document").Call("createElement", "span")

GopherJS + godom

Document.CreateElement("span")

createTextNode

JavaScript

document.createTextNode("Hello World");

GopherJS

js.Global.Get("document").Call("createTextNode", "Hello World")

GopherJS + godom

Document.CreateTextNode("Hello World")

appendChild

JavaScript

parentElement.appendChild(childElement);

GopherJS

parentElement.Call("appendChild", childElement)

GopherJS + godom

parentElement.AppendChild(childElement)

HTML data-* Attribute

HTML

<div id="foo" data-demo-value="hello world"></div>

JavaScript

var f = document.querySelector("#foo");

// get value
console.log(f.dataset.demoValue);

// set value
f.dataset.demoValue = "world hello";

GopherJS

f := js.Global.Get("document").Call("querySelector", "#foo")

// get value
println(f.Get("dataset").Get("demoValue").String())

// set value
f.Get("dataset").Set("demoValue", "world hello")

GopherJS + godom

f := Document.QuerySelector("#foo")

// get value
println(f.Dataset().Get("demoValue").String())

// set value
f.Dataset().Set("demoValue", "world hello")

Inline style Property

JavaScript

// set the color of element
elm.style.color = "red";

// get the color of element
console.log(elm.style.color);

GopherJS

// set the color of element
elm.Get("style").Set("color", "red")

// get the color of element
println(elm.Get("style").Get("color").String())

GopherJS + godom

// set the color of element
elm.Style().SetColor("red")

// get the color of element
println(elm.Style().Color())

classList Property

JavaScript

// add class to element
element.classList.add("invisible");

// check if specified class value exists in class attribute of the element
element.classList.contains("invisible");

GopherJS

// add class to element
element.Get("classList").Call("add", "invisible")

// check if specified class value exists in class attribute of the element
element.Get("classList").Call("contains", "invisible").Bool()

GopherJS + godom

// add class to element
element.ClassList().Add("invisible")

// check if specified class value exists in class attribute of the element
element.ClassList().Contains("invisible")

Navigator Language API

JavaScript

// preferred language of the user, string type
console.log(navigator.language);

// languages known to the user, array type
console.log(navigator.languages);

GopherJS

// preferred language of the user, cast as string
println(js.Global.Get("navigator").Get("language").String())

// languages known to the user, also cast as string
println(js.Global.Get("navigator").Get("languages").String())

GopherJS + godom

// preferred language of the user, string type
println(Window.Navigator().Language())

// languages known to the user, string type
println(Window.Navigator().Languages())

null Check

JavaScript

if (value === null) {
    // do something
}

GopherJS

if value == nil {
      // do something
}

Run Code on GopherJS Playground

undefined Check

JavaScript

if (something === undefined) {
    // do something
}

GopherJS

if something == js.Undefined {
      // do something
}

Run Code on GopherJS Playground

References:

[1]	GopherJS - A compiler from Go to JavaScript (GitHub, GopherJS Playground, )

[2]	Bindings · gopherjs/gopherjs Wiki · GitHub

[3]	GitHub - siongui/godom: Make DOM manipulation in Go as similar to JavaScript as possible. (via GopherJS)

[4]	Synonyms - Dart, JavaScript, C#, Python \| Dart

[5]	[Golang] GopherJS Synonyms with JavaScript