자바스크립트 제어 메소드 호출

JavaScript는 다양한 멋진 대화형 효과를 얻을 수 있는 널리 사용되는 스크립팅 언어입니다. JavaScript에서는 다양한 메서드(함수)를 사용하여 다양한 작업을 수행할 수 있습니다. 그러나 때로는 특정 상황에서 이러한 메서드 호출을 제어해야 하며, 이를 위해서는 메서드 호출을 제어하기 위한 몇 가지 기술을 사용해야 합니다.

이 문서에서는 조건문, 루프 문, 이벤트 바인딩 및 기타 메서드를 포함하여 메서드 호출을 제어하기 위해 JavaScript에서 일반적으로 사용되는 기술을 소개합니다. 독자들이 JavaScript에서 메서드 호출을 제어하는 ​​방법을 더 잘 이해할 수 있도록 이러한 기술을 하나씩 소개하겠습니다.

1. 조건문

조건문은 메서드 호출을 제어하는 ​​데 일반적으로 사용되는 기술로, 다양한 조건에 따라 다양한 코드 블록을 실행할 수 있습니다. JavaScript에서 일반적인 조건문에는 if 문과 switch 문이 포함됩니다.

1. if 문

if 문은 조건에 따라 다양한 코드 블록을 실행하는 데 사용됩니다. 구문 구조는 다음과 같습니다.

if (条件表达式) {
    // 如果条件表达式为 true，则执行这里的代码块。
}

다음은 간단한 if 문의 예입니다.

var age = 18;
if (age >= 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}

위 예에서 age가 18보다 크거나 같으면 "adult"가 출력되고, 그렇지 않으면 "minor"가 출력됩니다. 출력됩니다.

2. switch 문

switch 문은 여러 조건에 따라 다양한 코드 블록을 실행하는 데 사용됩니다. 구문 구조는 다음과 같습니다.

switch (表达式) {
  case 值1:
    // 执行代码块 1
    break;
  case 值2:
    // 执行代码块 2
    break;
  default:
    // 执行默认代码块
}

다음은 간단한 스위치 문의 예입니다.

var day = 2;
switch (day) {
  case 1:
    console.log("星期一");
    break;
  case 2:
    console.log("星期二");
    break;
  case 3:
    console.log("星期三");
    break;
  default:
    console.log("其他");
}

위 예에서 day가 1이면 "Monday"가 출력되고 day가 2이면 " 화요일"이 출력되고, 일자가 3이면 "수요일"이 출력되고, 그렇지 않으면 "기타"가 출력됩니다.

2. 루프 문

루프 문은 메서드 호출을 제어하는 ​​데 일반적으로 사용되는 또 다른 기술로 특정 조건에 도달할 때까지 코드를 반복적으로 실행할 수 있습니다. JavaScript에서 일반적인 루프 문에는 for 루프, while 루프 및 do-while 루프가 포함됩니다.

1. for 루프

for 루프는 지정된 조건에 따라 코드 블록을 실행할 수 있는 일반적으로 사용되는 루프 문입니다. 구문 구조는 다음과 같습니다.

for (初始化语句; 条件表达式; 增量表达式) {
  // 执行代码块
}

다음은 간단한 for 루프 예입니다.

for (var i = 0; i < 10; i++) {
    console.log(i);
}

위 예에서 변수 i의 초기 값은 0이고 코드 블록이 루프에서 실행되어 1씩 증가합니다. 매번 i 값이 10보다 커질 때까지.

2. while 루프

while 루프도 일반적으로 사용되는 루프 문으로, 지정된 조건이 충족되면 코드 조각을 반복적으로 실행할 수 있습니다. 구문 구조는 다음과 같습니다.

while (条件表达式) {
  // 执行代码块
}

다음은 간단한 while 루프 예제입니다.

var i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

위 예제에서는 변수 i의 초기 값이 0이고, 이후 i< 10, i의 값이 10 이상이 될 때까지 매번 1씩 증가합니다.

3. do-while 루프

do-while 루프는 while 루프와 유사하지만 유일한 차이점은 코드 블록을 한 번 실행한 다음 조건이 충족되는지 확인한다는 것입니다. 구문 구조는 다음과 같습니다.

do {
  // 执行代码块
} while (条件表达式);

다음은 간단한 do-while 루프 예입니다.

var i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);

위 예에서 변수 i의 초기 값은 0이고 이후 코드 블록이 한 번 실행되고 조건은 다음과 같습니다. i<10이 충족되면 i의 값이 10 이상이 될 때까지 코드 블록이 1씩 증가하면서 반복적으로 실행됩니다.

3. 이벤트 바인딩

이벤트 바인딩은 특정 이벤트가 발생할 때 지정된 코드를 실행할 수 있는 메서드 호출을 제어하는 ​​데 일반적으로 사용되는 기술이기도 합니다. JavaScript에서 일반적인 이벤트에는 마우스 이벤트, 키보드 이벤트, 양식 이벤트 등이 포함됩니다.

이벤트를 바인딩하는 방법에는 직접 바인딩, 이벤트 위임 사용, 타사 라이브러리 사용 등이 있습니다.

1. 직접 바인딩

직접 바인딩은 가장 일반적인 이벤트 바인딩 방법으로 HTML 요소나 JavaScript를 통해 구현할 수 있습니다. 구문 구조는 다음과 같습니다.

element.addEventListener(event, function, useCapture);

다음은 간단한 이벤트 바인딩 예입니다.

var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
    alert("Hello world!");
});

위 예에서 사용자가 ID가 btn인 요소를 클릭하면 "Hello world"를 표시하는 프롬프트 상자가 나타납니다. !".

2. 이벤트 위임

이벤트 위임은 이벤트를 각 하위 요소 대신 컨테이너 요소에 바인딩할 수 있는 효율적인 이벤트 바인딩 방법입니다. 하위 요소가 이벤트를 시작하면 해당 이벤트가 컨테이너 요소까지 버블링되어 해당 코드를 실행합니다. 구문 구조는 다음과 같습니다.

container.addEventListener(eventType, function(event) {
  if (event.target.matches(selector)) {
    // 执行代码块
  }
});

다음은 간단한 이벤트 위임 예입니다.

var list = document.getElementById("list");
list.addEventListener("click", function(event) {
    if (event.target.nodeName === "LI") {
        alert(event.target.innerHTML);
    }
});

위 예에서 사용자가 목록의 ID를 가진 컨테이너 요소를 클릭하면 클릭된 대상 요소가 있는지 판단됩니다. 가 li 요소인 경우 해당 텍스트 내용을 표시하는 프롬프트 상자가 나타납니다.

4. 요약

JavaScript의 제어 메서드 호출 기술에는 조건문, 루프 문, 이벤트 바인딩 및 기타 메서드가 포함됩니다. 다양한 요구에 따라 메서드 호출을 제어하는 ​​적절한 방법을 선택할 수 있으므로 더욱 흥미로운 대화형 효과를 얻을 수 있습니다.

실제 개발에서는 특정 상황에 따라 적절한 기술을 선택하고 다양한 방법을 유연하게 사용하여 필요한 기능을 구현해야 합니다. 동시에 웹 페이지 성능과 사용자 경험에 영향을 주지 않도록 메서드 호출의 수와 빈도를 제어하는 ​​데에도 주의를 기울여야 합니다.

위 내용은 자바스크립트 제어 메소드 호출의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!