JavaScript Tab

JavaScript is a scripting language that allows the user to interact with the elements of a web page, define logic for web content, and dynamically modify/update the contents of the web page.

Examples:

JavaScript code

Action

const Paragraph = document.querySelector("p");

Selects a text paragraph and stores an instance of it on the Paragraph variable

function updateName() { const name = prompt("Enter a new name"); para.textContent = Player 1: ${name}; }

Defines a function block that can be invoked by calling updateName()

Paragraph.addEventListener("click", updateName);

Attaches an event listener to the Paragraph instance such that when the paragraph is clicked, the updateName function gets executed

const para = document.getElementById("player");

Gets a reference to the element with ID "player" from the DOM

Advanced example #1:

Let's assume the following requirement:

Creating a paragraph element that displays the message "PLAYER 1: name", where name is a value set by the user upon clicking on the paragraph element.

This can be accomplished using the following HTML + CSS + JavaScript recipe:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      /* set the font family, size, and style */
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      /* set the border, background, color, and box shadow */
      border: 2px solid rgba(0, 0, 200, 0.6);
      background: rgba(0, 0, 200, 0.6);
      color: rgba(255, 255, 255, 1);
      box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
      /* set the border radius and padding */
      border-radius: 10px;
      padding: 3px 10px;
      /* set the display to inline-block and cursor to pointer */
      display: inline-block;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- add an ID attribute to the <p> element -->
  <p id="player-name">Player 1: Chris</p>
  <script>
    // get a reference to the <p> element using its ID
    const para = document.getElementById("player-name");

    // add a click event listener to the <p> element
    para.addEventListener("click", updateName);

    function updateName() {
      // prompt the user to enter a new name
      const name = prompt("Enter a new name");

      // update the text content of the <p> element
      para.textContent = `Player 1: ${name}`;
    };
  </script>
</body>
</html>

The same can be reproduced on Ubidots by using the HTML Canvas Widget in the following way:

Use the following HTML code on the widget's HTML code editor tab:

<!-- add an ID attribute to the <p> element -->
<p id="player-name">Player 1: Chris</p>

Now, add the style to the paragraph on the widget's CSS tab:

p {
      /* set the font family, size, and style */
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      /* set the border, background, color, and box shadow */
      border: 2px solid rgba(0, 0, 200, 0.6);
      background: rgba(0, 0, 200, 0.6);
      color: rgba(255, 255, 255, 1);
      box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
      /* set the border radius and padding */
      border-radius: 10px;
      padding: 3px 10px;
      /* set the display to inline-block and cursor to pointer */
      display: inline-block;
      cursor: pointer;
}

Lastly, add the following code to the widget's JavaScript tab:

// get a reference to the <p> element using its ID
const para = document.getElementById("player-name");

// add a click event listener to the <p> element
para.addEventListener("click", updateName);

function updateName() 
{
    // prompt the user to enter a new name
    const name = prompt("Enter a new name");

    // update the text content of the <p> element
    para.textContent = `Player 1: ${name}`;
};

The following is the result on a Ubidots Dashboard:

PreviousCSS Tab NextCustom UI

Last updated 1 year ago

<!DOCTYPE html> <html> <head> <style> p { /* set the font family, size, and style */ font-family: "Helvetica Neue", Helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; /* set the border, background, color, and box shadow */ border: 2px solid rgba(0, 0, 200, 0.6); background: rgba(0, 0, 200, 0.6); color: rgba(255, 255, 255, 1); box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4); /* set the border radius and padding */ border-radius: 10px; padding: 3px 10px; /* set the display to inline-block and cursor to pointer */ display: inline-block; cursor: pointer; } </style> </head> <body>  <p id="player-name">Player 1: Chris</p> <script> // get a reference to the <p> element using its ID const para = document.getElementById("player-name"); // add a click event listener to the <p> element para.addEventListener("click", updateName); function updateName() { // prompt the user to enter a new name const name = prompt("Enter a new name"); // update the text content of the <p> element para.textContent = `Player 1: ${name}`; }; </script> </body> </html>

p { /* set the font family, size, and style */ font-family: "Helvetica Neue", Helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; /* set the border, background, color, and box shadow */ border: 2px solid rgba(0, 0, 200, 0.6); background: rgba(0, 0, 200, 0.6); color: rgba(255, 255, 255, 1); box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4); /* set the border radius and padding */ border-radius: 10px; padding: 3px 10px; /* set the display to inline-block and cursor to pointer */ display: inline-block; cursor: pointer; }

// get a reference to the <p> element using its ID const para = document.getElementById("player-name"); // add a click event listener to the <p> element para.addEventListener("click", updateName); function updateName() { // prompt the user to enter a new name const name = prompt("Enter a new name"); // update the text content of the <p> element para.textContent = `Player 1: ${name}`; };