Magento2 : Play With Javascript

View Folder Structure

NameSpace/Module

├── View

├── adminhtml

├── layout

├── template

├── ui_component

├── web

├── css

├── js

Create a file inside template => form.phtml

  <script type="text/x-magento-init">
    {
        "*": {
            "NameSpace_Module/js/jsfilename": {
            "ajaxUrl": "<?php echo $this->getAjaxUrl() ?>"
            }
        }
    }          
</script>     

type="text/x-magento-init" means Magento uses these sections after the page loads.

Create file inside js=>jsfilename.js

define
(
    [
        'jquery'
    ],
    function($)
    {
        'use strict';
        return function (config) 
        {
 };
    }
);    

All php variable will catches inside js file with config variable like config.ajaxUrl that is pased from phtml file.

Event capture using ui-component form

<field name="column_name">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">NameSpace\Module\Model\ModuleName\Attribute\Source\FileName</item>
                <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Field Name</item>    
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">number</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="source" xsi:type="string">item</item>
                <item name="dataScope" xsi:type="string">column_name</item>
                <item name="sortOrder" xsi:type="number">1</item>
                <item name="component" xsi:type="string">NameSpace_Module/js/form/JsFileName</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
</field>

File Path 
├── js
         ├── form
                     ├── JsFileName

define([
    'uiComponent',
    'underscore',
    'uiRegistry',
    'jquery',
    'mage/url',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (Component,_, uiRegistry,$,url, select, modal) {
    'use strict';
    return select.extend({
        onUpdate: function (value) {
           // console.log('Selected Value: ' + value);
            var currency = uiRegistry.get('index = column_name');
            var commission = uiRegistry.get('index = upload_supplier_commission');
            var serviceUrl = url.build('');
            console.log(serviceUrl);
                 var param = 'ajax=1';
                 $.ajax({
                     url: serviceUrl,
                     data: param,
                     type: "POST",
                 }).done(function (data) {
                        currency.value(data.field_name);
                 });
        },
    });
}); 

Url will get from .phtml

 <script>
        require([
            'mage/url'
        ], function(url) {
            return url.setBaseUrl('<?php echo $this->getBaseUrl();?>');
        })
 </script>