DEV Community

loading...
Cover image for jQuery and Javascript - Business and User Interface Logic
Terminology

jQuery and Javascript - Business and User Interface Logic Terminology

saoud profile image Saoud Updated on ・2 min read

Business and User Interface Logic

Terminology


  • Business logic: The code responsible for handling the evaluation and manipulation of data; does not require any user interface.
  • User interface logic: The code responsible for the interaction between the user and the application; handles tasks such as event listening, user input forms, DOM manipulation, display and styling. We have not covered how to write the actual code for this yet; don't worry!

Summary


Because they are responsible for entirely separate things, code for business logic and user interface logic should always be separated. We have not yet written any applications that use both; but as we explore jQuery in the upcoming lessons, always keep this rule in mind.

Example


The following code prompts the user for two numbers, uses the included add() function to add these two numbers together, and provides the sum to the user in an alert box:

function add(number1, number2) {
  return number1 + number2;
}

const number1 = parseInt(prompt("Enter a number:"));
const number2 = parseInt(prompt("Enter another number:"));

alert(add(number1, number2));
Enter fullscreen mode Exit fullscreen mode

Terminology


  • Event handler: an event handler "listens" to the element(s) to which it's attached and responds when a certain event is triggered. .click() is a click listener, which is a type of event handler that responds when an element to which it's attached is clicked.
  • Callback: a function passed as an argument to another function. A callback function is not executed immediately; One use of callback functions is that they are passed into event handlers to be executed at a future time.

Resources


Examples


Link jQuery before your scripts that use it:

<head>
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/scripts.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

Select a tag and bind an event handler to it:

$("h1").click(function() {
  alert("This is a header.");
});
Enter fullscreen mode Exit fullscreen mode

The part function() { alert("This is a header."); } is considered the callback because it is being passed as an argument into the method .click().

Wrap all your jQuery code in callback passed to $(document).ready() so that it is run after the page loads:

$(document).ready(function() {
  $("h1").click(function() {
    alert("This is a header.");
  });
});
Enter fullscreen mode Exit fullscreen mode

To check if an event handler is attached properly, right-click the element you want to check, Inspect, and click Event Listeners.

Discussion (5)

pic
Editor guide
Collapse
lexlohr profile image
Alex Lohr • Edited

You can avoid to use ready if you bind your handlers directly to document and use event.target to check if it suffices:

document.addEventListener('click', (ev) => {
  if (ev.target.nodeName === 'H1') {
    alert('This is a header.')
  }
})
Enter fullscreen mode Exit fullscreen mode

To do that, you even don't need jQuery.

Collapse
saoud profile image
Saoud Author

Awesome thanks! I bet that is something that is an upcoming lesson as well. :)

Collapse
prem874 profile image
Collapse
fallenstedt profile image
Alex Fallenstedt

Hey,

I graduated from epicodus aroind 2015. Glad to see a fellow student here!

Collapse
saoud profile image
Saoud Author

I am really enjoying it so far!