Adding logic to a page I am new to Drupal, and I am trying to add some behavior to an existing page within Drupal.

Using the admin UI, I created an model with 2 numbers (num1, num2). I then rendered it into a form. 

Now I would like to add a third field, and compute using the client the sum of num1 and num2 into this new field. This needs to be done as you type the numbers.

I wanted to use Javascript to do this, but I really don't know where to start. Is there an example on how to simply add some logic into an exiting screen that is generated by the admin tools?

This is more information. 

Then, I just add these to fields into a page like so:





Again, at this point I would like to just add the sum of both numbers into a 3ed field that is not there yet (of course my project is much more complex, but this is a simple example). So I was going to add field_number3 into my Content type, and I wanted to do some simple Javascript to calculate the field. 

I could really use some step by step examples, to just to know where to place a module, and what code to type in  the module to only add this behavior to my content.

I am very new to Drupal, and I am using Drupal 8.
Attaching custom JS to form

Adding css and javascript to a drupal 8 module

Here's an example of using hook_form_FORM_ID_alter. For this you'll need to make a custom module (conveniently named custommodule in the example below).

Module directory:

custommodule/  
|- js/  
   |-- custommodule.js  
|-- custommodule.info.yml  
|-- custommodule.libraries.yml  
|-- custommodule.module


File contents:


custommodule.info.yml  

type: module
name: Custommodule
description: 'Custom stuff'
package: Custom
core: '8.x'

custommodule.libraries.yml  

custommodule:
  version: 1.x
  js:
    js/custommodule.js: {}
  dependencies:
    - core/jquery

custommodule.module  

&lt;?php

use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_form_FORM_ID_alter().
 */
function custommodule_form_node_article_edit_form_alter(&amp;$form, FormStateInterface $form_state, $form_id) {
  $form['#attached']['library'][] = 'custommodule/custommodule';
}

custommodule.js  

(function($) {

  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {

      var num1 = $("#edit-field-num-1-0-value").value;
      var num2 = $("#edit-field-num-2-0-value").value;
      var result = (Number(num1)+Number(num2));
      $("#edit-field-num-3-0-value").value = result;
    }
  };

})(jQuery);



The example uses the default article node type, with 3 integer fields (field_num_1, field_num_2, field_num_3), and works on the article edit form (form id -> node_article_edit_form). The js part is also very basic so all it does is set the third field value once the page loads. Drupal_add_js is deprecated, so we use the $form['#attached']['library'] array to attach a library (defined in the custommodule.libraries.yml file) that contains the JS file (a single libraries.yml file can define more libraries, which can include more js/css files).