Saoud's Dev Coding Journey Blog

Business and User Interface Logic

Business and User Interface Logic

Saoud's photo
Saoud
·

4 min read

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));

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>

Select a tag and bind an event handler to it:

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

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.");
  });
});

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

Forms

Example

Capture input when a form is submitted:

HTML Form:

<form id="some-form">
  <label for="some-input">Your input:</label>
  <input id="some-input" type="text">

  <button type="submit" class="btn">Submit!</button>
</form>

JavaScript to capture form information when form is submitted:

$("form#some-form").submit(function(event) {
  const someInput = $("input#some-input").val();

  event.preventDefault();
});

Replace text in an HTML element using jQuery:

$(".some-class").text("New text");

Tips

  • If you submit your form and then there's a ? at the end of the URL in your address bar, you forgot to put event.preventDefault();, or you attached your event listener to the wrong form.
JavaScriptlearn codingnewbieWeb Developmentwebdev