JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


JavaScript Switch


switch명령문은 다른 조건에 따라 다른 작업을 수행하는 데 사용됩니다 .


JavaScript Switch 문

명령문을 사용하여 switch실행할 많은 코드 블록 중 하나를 선택하십시오.

통사론

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

작동 방식은 다음과 같습니다.

  • 스위치 표현식은 한 번 평가됩니다.
  • 표현식의 값은 각 경우의 값과 비교됩니다.
  • 일치하는 항목이 있으면 연결된 코드 블록이 실행됩니다.
  • 일치하는 항목이 없으면 기본 코드 블록이 실행됩니다.

예시

getDay()메서드는 0에서 6 사이의 숫자로 요일을 반환합니다.

(일요일=0, 월요일=1, 화요일=2 ..)

이 예에서는 요일 번호를 사용하여 요일 이름을 계산합니다.

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

하루의 결과는 다음과 같습니다.

Saturday


휴식 키워드

JavaScript가 break 키워드에 도달하면 스위치 블록에서 나옵니다.

이렇게 하면 스위치 블록 내에서 실행이 중지됩니다.

스위치 블록에서 마지막 대소문자를 구분할 필요는 없습니다. 어쨌든 블록은 거기서 끊깁니다.

참고: break 문을 생략하면 평가가 케이스와 일치하지 않아도 다음 케이스가 실행됩니다.


기본 키워드

키워드 는 default대소문자 일치가 없는 경우 실행할 코드를 지정합니다.

예시

getDay()메서드는 0에서 6 사이의 숫자로 요일을 반환합니다.

오늘이 토요일(6)도 일요일(0)도 아닌 경우 기본 메시지를 작성합니다.

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}

텍스트 결과는 다음과 같습니다.

Today is Saturday

케이스가 스위치 블록 의 default마지막 케이스일 필요는 없습니다.

예시

switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}

가 switch 블록의 마지막 케이스가 아닌 경우 default기본 케이스를 중단으로 끝내는 것을 잊지 마십시오.


공통 코드 블록

때로는 다른 스위치 케이스가 동일한 코드를 사용하기를 원할 것입니다.

이 예제의 경우 4와 5는 동일한 코드 블록을 공유하고 0과 6은 다른 코드 블록을 공유합니다.

예시

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

스위칭 세부 사항

여러 케이스가 케이스 값과 일치하는 경우 첫 번째 케이스가 선택됩니다.

일치하는 케이스가 없으면 프로그램은 기본 레이블을 계속 사용합니다.

기본 레이블이 없으면 프로그램은 switch 뒤의 명령문으로 계속 진행합니다 .


엄격한 비교

스위치 케이스는 엄격한 비교(===)를 사용합니다.

값은 일치하는 동일한 유형이어야 합니다.

엄격한 비교는 피연산자가 같은 유형인 경우에만 참이 될 수 있습니다.

이 예에서는 x에 대해 일치하는 항목이 없습니다.

예시

let x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}

연습으로 자신을 테스트하십시오

연습:

switch가 "banana" 이면 "Hello" 를, "apple" fruits이면 "Welcome"이라고 경고 하는 문을 만듭니다 .fruits

(fruits) {
  "Banana":
    alert("Hello")
    break;
  "Apple":
    alert("Welcome")
    break;    
}