JavaScript for Roam (introduction)

console.log(“Hello Roam”)

Roam ❤ JavaScript
Roam ❤ JavaScript
Roam ❤ JavaScript

What should you know before you continue?

Not much, frankly. Basically, I would like to ask you to read this my previous post on the general capabilities of Roam:

What will we learn?

I write “we” for a good reason. I have learnt the basics of JavaScript years ago when I was just a little duckling. Since then I improved a lot but I am still learning and we will learn together on this journey.

  • Where to write our code in Roam — Advantages and disadvantages of different approaches
  • How to select various elements in Roam — One of the crucial things when working with JavaScript
  • How JavaScript interacts with CSS in Roam
  • How JavaScript interacts with HTML elements (:hiccup) in Roam
  • How to run a script on different conditions, e.g., just once on loading the page, every time when the text is changed, on the press of a key, on the press of a button etc.
  • How to use API in Roam (An application programming interface) — both its Roam API as well as how to connect to external APIs from Roam

A couple of words about JavaScript (storytime)

In the beginning was the very first HTML web page created in 1990 by Tim Berners-Lee. Actually, it is still there — check it out!

Image of the very first web page — http://info.cern.ch/hypertext/WWW/TheProject.html .
Image of the very first web page — http://info.cern.ch/hypertext/WWW/TheProject.html .
The very first HTML web page

“But why is it called JavaScript?”

You might ask. Once upon a time —again, in the mid-90s— Java was a new, fancy and really, really cool programming language: developed by James Gosling at then rising Sun Microsystem. One of its main features was the ability to write a code and run it on many different platforms using virtual machines. It was therefore even used on feature phones and early smartphones. And it was cool enough to become also the main programming language for Android.

Relationship between Java and JavaScript is not really easy…

How does the JavaScript code look like?

Let’s look now at a very simple code:

let bestNoteTakingApp = "Roam";alert(bestNoteTakingApp);
If the variable "something" exists then display "Great!".
if (something) {alert("Great!");}

JavaScript in Roam

Now we are finally coming to JavaScript in Roam. If you are interested in its rather wild origins, check my previous summarization. Suffice to say that there are currently following options on how to run JavaScript in Roam:

  • user scripts
https://roamresearch.com/#/app/DATABASENAME?disablejs=true

Our first piece of code

So let’s make it. When I was a duckling, the most common starting code was this one:

alert("Hello Roam");
Creating your first piece of JavaScript in Roam — alert(“Hello Roam”);
Creating your first piece of JavaScript in Roam — alert(“Hello Roam”);
Creating your first piece of JavaScript in Roam
console.log("Hello Roam");
JavaScript — using console.log
JavaScript — using console.log
JavaScript — using console.log

Just a humble Roaman duck.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store