비즈니스 로직
비즈니스 및 사용자 인터페이스 로직
술어
비즈니스 로직: 데이터 평가 및 조작을 담당하는 코드. 사용자 인터페이스가 필요하지 않습니다.
사용자 인터페이스 논리: 사용자와 응용 프로그램 간의 상호 작용을 담당하는 코드. 이벤트 수신, 사용자 입력 양식, DOM 조작, 표시 및 스타일 지정과 같은 작업을 처리합니다. 우리는 아직 이에 대한 실제 코드를 작성하는 방법을 다루지 않았습니다. 괜찮아요!
요약
완전히 별개의 일을 담당하기 때문에 비즈니스 로직과 사용자 인터페이스 로직을 위한 코드는 항상 분리되어야 합니다. 둘 다 사용하는 애플리케이션은 아직 작성하지 않았습니다. 그러나 다음 수업에서 jQuery를 탐색할 때 항상 이 규칙을 염두에 두십시오.
예시
다음 코드는 사용자에게 두 개의 숫자를 입력하라는 메시지를 표시하고 포함된 add() 함수를 사용하여 이 두 숫자를 더한 다음 경고 상자에서 사용자에게 합계를 제공합니다.
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));
술어
다음 코드는 사용자에게 두 개의 숫자를 입력하라는 메시지를 표시하고 포함된
add() 함수를 사용하여 이 두 숫자를 더한 다음 경고 상자에서 사용자에게 합계를 제공합니다.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));
술어
이벤트 핸들러: 이벤트 핸들러는 연결된 요소를 '수신'하고 특정 이벤트가 트리거될 때 응답합니다.
.click() 클릭 리스너는 연결된 요소를 클릭할 때 응답하는 이벤트 핸들러 유형입니다. 콜백: 다른 함수에 인수로 전달된 함수입니다. 콜백 함수는 즉시 실행되지 않습니다. 콜백 함수의 한 가지 용도는 나중에 실행될 이벤트 핸들러로 전달된다는 것입니다.
자원
Download jQuery here. - 압축되지 않은 최신 개발 버전을 다운로드해야 합니다.
예
jQuery를 사용하는 스크립트 전에 jQuery를 연결하십시오.
<head>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/scripts.js"></script>
</head>
태그를 선택하고 이벤트 핸들러를 바인딩합니다.
$("h1").click(function() {
alert("This is a header.");
});
function() { alert("This is a header."); } 부분은 메소드.click()에 인수로 전달되기 때문에 콜백으로 간주됩니다.
페이지가 로드된 후 실행되도록 $(document).ready()에 전달된 콜백에서 모든 jQuery 코드를 래핑합니다.
$(document).ready(function() {
$("h1").click(function() {
alert("This is a header.");
});
});
이벤트 핸들러가 제대로 연결되었는지 확인하려면 확인하려는 요소를 마우스 오른쪽 버튼으로 클릭하고 검사한 다음 이벤트 리스너를 클릭합니다.
양식
예시
양식 제출 시 입력 캡처:
HTML 양식:
<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:
$("form#some-form").submit(function(event) {
const someInput = $("input#some-input").val();
event.preventDefault();
});
jQuery를 사용하여 HTML 요소의 텍스트 바꾸기:
$(".some-class").text("New text");
팁
<head>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/scripts.js"></script>
</head>
$("h1").click(function() {
alert("This is a header.");
});
$(document).ready(function() {
$("h1").click(function() {
alert("This is a header.");
});
});
예시
양식 제출 시 입력 캡처:
HTML 양식:
<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:
$("form#some-form").submit(function(event) {
const someInput = $("input#some-input").val();
event.preventDefault();
});
jQuery를 사용하여 HTML 요소의 텍스트 바꾸기:
$(".some-class").text("New text");
팁
<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>
$("form#some-form").submit(function(event) {
const someInput = $("input#some-input").val();
event.preventDefault();
});
$(".some-class").text("New text");
?가 있는 경우 event.preventDefault();를 넣는 것을 잊었거나 이벤트 리스너를 잘못된 양식에 연결한 것입니다. Reference
이 문제에 관하여(비즈니스 로직), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/saoud/business-logic-5f66텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
