17.2 A quick introduction to JavaScript

  • The fastest way to interact with JavaScript is from the Developer Tools of your favorite browser
  • For example, enter the following in your Dev Tools Console: var message = "Hello World"; alert(message);

17.2.1 Including JavaScript code in your app

There are three primary ways to include JavaScript code in your app:

  • As an external file
  • Inside a <script>Your Code snippet goes here</script> tag
  • Inline, on a specific tag

The recommended practice is through an external file.

If you are developing with {golem}, there are two primary functions to include JavaScript. They are:

  • golem::add_js_file("name"), this adds a standard JavaScript file. This method is not intended to communicate with R
  • golem::add_js_handler("name"), this is intended to work with R
  • golem::add_js_binding("name"), for advanced, customer interaction for your shiny app

17.2.2 Understanding HTML, class, and id

Think of your Web Page as a tree where the top of the page is your root node.

  • Referenced as the Document Object Model (DOM)
    • You can work on any of these HTML nodes with JavaScript

The following code snippets compare R code to its corresponding HTML output:

library(shiny)
fluidPage(
  titlePanel("Hello Shiny"), 
   textInput("act", "Input")
)

And its corresponding HTML:

<div class="container-fluid">
  <h2>Hello Shiny</h2>
  <div class="form-group shiny-input-container">
    <label class="control-label" for="act">Input</label>
    <input id="act" type="text" class="form-control" value=""/>
  </div>
</div>

We can see we created a div tag with a Bootstrap container, an h2 tag for text, and a text input field with and id and class.

NOTE: id must be unique. This is how the websockets can communicate

Elements can have a class which can apply to multiple elements. This can be used in JavaScript, but it is also very useful for styling elements in CSS.

17.2.3 Querying in Vanilla JavaScript

The term Vanilla JavaScript refers to plain JavaScript, meaning, not external plugins.

// Given
<div id = "first" name="number" class = "widediv">Hey</div>

// Query with the ID
document.querySelector("#first")
document.getElementById("first")

// With the class
document.querySelectorAll(".widediv")
document.getElementsByClassName("widediv") 

// With the name attribute
document.getElementsByName("number") 

// Using the tag name
document.getElementsByTagName("div")

This method comes with a hitch! Not all Browsers are created equal! This brings another angle of development consideration to our software development process. With relation to proprietary frameworks and a host of different Browser vendors (Mozilla Firefox, Google Chrome, Apple Safari, etc…) not all JavaScript versions are recognized.

17.2.4 About DOM Events

Within the Document Object Model, interactions are called events. JavaScript runtime is listening for these events. Better yet, this is were we can control the interaction of our users with our {shiny} apps. The following are examples of events:

  • click / dblclick

  • focus

  • keypress, keydown, keyup

  • mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup

  • scroll

For a full list of these events, please visit this link.

Once you have this list in mind, you can select elements in the DOM, add an addEventListener to them, and define a callback function (which is executed when the event is triggered)

<input type="text" id = "firstinput">
<script> 
  document.getElementById("firstinput").addEventListener(
    "keypress", 
    function(){
      alert("Pressed!")
    }
  )
</script>

Another example is to send an alert when the Shiny Server is connected:

$(document).on('shiny:connected', function(event) {
  alert('Connected to the server'); 
});

The $() is considered jQuery and is a subset, lighter weight, more widely recognized method of running JavaScript.

17.2.5 About jQuery and jQuery selectors

jQuery is native to the {shiny} package. Examples of jQuery include:

  • $("#firstinput") to refer to the element with the id firstinput

  • $(".widediv") to refer to element(s) of class widediv

  • $("button:contains('this')") to refer to the buttons with a text containing 'this'

<a href = "https://thinkr.fr" data-value = "panel2">ThinkR</a>

We can interact with these attributes using jQuery:

  • $("a[href = 'https://thinkr.fr']") refers to link(s) with href being https://thinkr.fr

  • $('a[data-value="panel2"]') refers to link(s) with data-value being "panel2"

NOTE: jQuery has the advantage of simplifying selections and actions and is a cross-platform library