JavaScript

alert("Hello Isomorphic Go!");

GopherJS

js.Global.Call("alert", "Hello Isomorphic Go!")

DOM Binding

dom.GetWindow().Alert("Hello Isomorphic Go!")

One of the most basic operations we can perform is to show an alert message in a modal dialog. In JavaScript, we can display the alert message using the built-in alert function:

alert("Hello Isomorphic Go!");

This line of code will print out the message Hello Isomorphic Go! in a modal window dialog. The alert function blocks further execution until the user dismisses the alert dialog.

When we make a call to the alert method, we are actually calling it in this manner:

window.alert("Hello Isomorphic Go!");

The window object is a global object, representing an open window in the web browser. The JavaScript implementation allows us to directly call the alert function along with the other built-in functions, without explicitly referencing them as methods of the window object as a means of convenience.

We use the js package to access the JavaScript functionality through Go, using GopherJS. We can import the package into our Go program as follows:

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

The js package provides us with functionality to interact with native JavaScript APIs. Calls to functions in the js package are translated directly to their equivalent JavaScript syntax.

We can display an alert message dialog using Go, with GopherJS, in the following manner:

js.Global.Call("alert", "Hello Isomorphic Go!")

In the preceding code snippet, we used the Call method that is available to the js.Global object. The js.Global object provides us with JavaScript's global object (the window object).

Here's what the Call method signature looks like:

func (o *Object) Call(name string, args ...interface{}) *Object

The Call method will call the global object's method with the provided name. The first parameter provided to the method is the name of the method to call. The second parameter is a list of arguments that are to be passed on to the global object's method. The Call method is known as a variadic function, since it can take in a variable number of parameters of the interface{} type.

Now that we've seen how to display the alert dialog window using the Call method of the js.Global object, let's take a look at the DOM bindings.

The dom package provides us with convenient GopherJS bindings to the JavaScript DOM API. The idea behind using this package, as opposed to performing all operations using the js.Global object, is that the DOM bindings provides us with an idiomatic way to call the common DOM API functionality.

If you are already familiar with the JavaScript APIs used to access and manipulate the DOM, then using the dom package will feel second nature to you. We can access the global window object using the GetWindow function, like this:

dom.GetWindow()

Using the dom package, we can display the alert dialog message with the following code:

dom.GetWindow().Alert("Hello Isomorphic Go!")

A cursory view of this code snippet shows that this feels closer to the JavaScript way of calling the alert dialog:

window.alert("Hello Isomorphic Go!")

Due to this similarity, it's a good idea to be well-versed in the JavaScript DOM APIs, since it will provide you with the ability to be familiar with equivalent function calls, using the dom package.