소셜 미디어 Switch 문을 사용하여 JavaScript로 HTML을 프로그래밍 할 경우 - 인서트

Switch 문을 사용하여 JavaScript로 HTML을 프로그래밍 할 경우 - 인서트

차례:

비디오: JavaScript - 조건문4 - switch 문 2024

비디오: JavaScript - 조건문4 - switch 문 2024
Anonim

if 문은 일반적으로 JavaScript의 단순한 선택에 사용되지만 switch 문은 여러 선택 항목을 처리하는 데 사용됩니다. 스위치는 변수 데이터를 처리하는 우아한 방법을 제공합니다. switch 문에는 두 가지 형식이 있습니다.

첫 번째 옵션은 사전 정의 된 선택 범위로 작업하는 방법을 제공하고 두 번째 옵션은 예기치 않은 정보가 포함될 수있는 데이터로 작업하는 방법을 제공합니다. 이 두 번째 형식은 사용자가 예측할 수 없기 때문에 switch 문을 특히 유용하게 만듭니다.이 두 번째 형식은 이러한 사용자를 고려할 수 있습니다.

JavaScript에서 기본 스위치를 만드는 방법

많은 개발자가 switch 문을 이해하기 쉽기 때문에 switch 문을 중첩 if 문보다 선호합니다. switch 문은 동일한 결과를 얻기 위해 더 적은 타이핑을 요구합니다.

function CheckChoice (option) {// 입력이 숫자인지 확인합니다. if (typeof (option)! = "number") {// 오류 대화 상자를 표시합니다. 알림 ("숫자 입력을 제공해주세요!"); // 더 이상 아무것도하지 않고 돌아옵니다. return;} // option이 실제로 정수인지 확인하십시오. var Select = Math. 라운드 (옵션); // 입력이 범위 내에 있는지 확인합니다. if ((Select 3)) {// 오류 대화 상자를 표시합니다. 경고 ("제공된 값이 범위를 벗어났습니다!"); // 더 이상 아무것도하지 않고 돌아옵니다. return;} // 선택합니다. 스위치 (선택) {사례 1: 문서. getElementById ("결과"). innerHTML = "아이템 A를 선택했습니다."; 단절; 사례 2: 문서. getElementById ("결과"). innerHTML = "아이템 B를 선택하셨습니다."; 단절; 사례 3: 문서. getElementById ("결과"). innerHTML = "아이템 C를 선택하셨습니다."; switch 문이나 중첩 된 if 문 중 어느 것을 사용하든간에 입력이 올바른지 논리를 제공해야합니다. 그렇지 않으면 응용 프로그램이 실패 할 가능성이 큽니다. 이 경우 실패는 응용 프로그램이 전혀 수행하지 않는 것과 동일하지만 실패의 개념은 같습니다. 정확한 값을 위해 입력 내용을 항상 확인하십시오.

일부 사람들은 switch 문에서 진리 값의 위치를 ​​이해하는 데 어려움을 겪습니다. switch 문에는 변수 (이 경우 Select)가 필요합니다. 각 case 절은 변수에 대해 비교를 수행합니다. 결과적으로 첫 번째 case 절이 case == 1로 표시되는 것을 볼 수 있습니다.

switch 문을 사용하여 작업 할 때는 각 처리 세그먼트의 끝에 break 문도 포함해야합니다. break 문은 사건이 평가되고 처리되었다고 간단히 말합니다.

break 문을 그대로두면 코드는 다음 실행 문으로 계속 실행됩니다.이 조건은

폴스 스루 (fall-through), 로 알려져 있으며 일부 개발자는이를 작업을 결합하고 필요한 코드의 양을 줄이는 프로그래밍 기술로 사용합니다. 이 기술을 사용하는 것은 위험합니다. 왜냐하면 다른 개발자가 fall-through가 필요하다는 것을 깨닫지 못하기 때문에 break 문을 추가 할 수 있기 때문입니다. JavaScript의 기본 옵션을 사용하는 방법

switch 문은 다른 절인 기본 절을 포함합니다. default 절은 if 문의 else 절과 같습니다. case 절이 하나도 true가 아닌 경우 코드는 default 절에서 코드를 실행합니다. 다음 예제에서는 default 절을 사용하여 예제가 작동하는 방식을 수정합니다.

function MakeAChoice () {// 사용자에게 입력을 요구합니다. var Selection = prompt ("메뉴 옵션을 입력하십시오."); // 문자열을 숫자로 변환합니다. var IntSelect = parseInt (선택); // 사용자가 숫자를 제공했는지 확인합니다. if (isNaN (IntSelect)) {// 오류 대화 상자를 표시합니다. 알림 ("숫자 입력을 제공해주세요!"); // 더 이상 아무것도하지 않고 돌아옵니다. return;} // 선택 함수를 호출하십시오. CheckChoice (IntSelect);}

무수한 버튼을 제공하는 대신이 예제에서는 프롬프트 () 대화 상자를 사용하여 사용자로부터 입력을받습니다. 결과는 더 깔끔한 인터페이스입니다. 사용자가 메뉴 항목 선택을 클릭하면 응용 프로그램에 사용자가 값을 입력 할 수있는 프롬프트 () 대화 상자가 표시됩니다.

이것은 재앙의 처방이라고 생각할 수도 있지만, 응용 프로그램은 이전과 마찬가지로 입력 유효성에 대해 동일한 검사를 수행하지만 다른 기법을 사용합니다.

이 경우 응용 프로그램은 partInt ()를 사용하여 입력이 숫자인지 확인하고 숫자를 정수 값으로 변환합니다. 입력 값이 정확하지 않으면 IntSelect는 숫자가 아님 (NaN)으로 설정됩니다. 이 예제는 isNaN () 함수를 사용하여이 문제를 감지합니다. 사용자가 숫자 입력을 제공하면 응용 프로그램은 CheckChoice ()를 호출합니다.이 코드는

function CheckChoice (option) {// 선택합니다. 스위치 (옵션) {사례 1: 문서. getElementById ("결과"). innerHTML = "아이템 A를 선택했습니다."; 단절; 사례 2: 문서. getElementById ("결과"). innerHTML = "아이템 B를 선택하셨습니다."; 단절; 사례 3: 문서. getElementById ("결과"). innerHTML = "아이템 C를 선택하셨습니다."; 단절; default: // 오류 대화 상자를 표시합니다. 경고 ("제공된 값이 범위를 벗어났습니다!"); break;}}

나머지 코드는 어디 있는지 궁금 할 지 모르지만 이것이 전부입니다. switch 문은 1, 2 또는 3 값을 확인합니다. 값이 해당 범위를 벗어나면 코드는 범위를 벗어난 오류 메시지가 포함 된 default 절을 사용합니다. 보시다시피이 두 함수는 개발자와 사용자 모두에게 메뉴 작업을 훨씬 간단하게 만듭니다.
Switch 문을 사용하여 JavaScript로 HTML을 프로그래밍 할 경우 - 인서트

편집자의 선택

Photoshop Elements 10의 기본 공유 Photoshop Elements 10의 기본 사항 공유

Photoshop Elements 10의 기본 공유 Photoshop Elements 10의 기본 사항 공유

화면 이미지뿐만 아니라 공유, 특히 온라인 공유 서비스에 대한 사용 가능한 옵션을 잘 알고 있어야합니다. 또한 온라인 호스트에 대해 수용 할 수있는 표준에 익숙해 져야하며, 최종적으로 작품을 보내고 자하는 곳이 필요합니다.

Photoshop Elements - 번짐 도구에서 번짐 도구로 번지기

Photoshop Elements - 번짐 도구에서 번짐 도구로 번지기

번짐 도구는 선을 그릴 때 커서 아래에있는 색상을 사용하여 마치 젖은 페인트로 구성된 것처럼 주위로 픽셀을 밀고 있습니다. 그러나 Smudge 도구는 코믹한 효과 만 생성하는 간단한 왜곡 도구로 보지 마십시오. 작은 조각에도 사용할 수 있습니다 ...

Photoshop Elements 10의 도형 옵션 지정 도형 - 더미

Photoshop Elements 10의 도형 옵션 지정 도형 - 더미

지오메트리 옵션은 Photoshop Elements 모양이 10 개. 옵션 막대에서 아래쪽 화살표를 클릭하여 기하학 옵션에 액세스하십시오. 사각형 및 둥근 사각형, 타원, 다각형, 선 및 사용자 정의 모양 기하학 옵션 중에서 선택할 수 있습니다. 직사각형 및 둥근 사각형 형상 옵션 직사각형의 형상 옵션은 다음과 같습니다.

편집자의 선택

부동산 면허 시험을 위해 투자를 통해 돈을 버는 법 - 더미

부동산 면허 시험을 위해 투자를 통해 돈을 버는 법 - 더미

부동산 면허 시험은 부동산 투자를 통해 자본 이득, 임대 및 자본 확충과 같은 여러 가지 방법으로 돈을 벌 수 있다는 것을 알기를 기대합니다. 대리인 (그리고 응시자)으로서, 돈을 버는 방법과 적절한 용어에 대해 잘 알고 있어야합니다. ...

부동산 면허 시험에 대한 균등화 율 사용 방법 - 인형

부동산 면허 시험에 대한 균등화 율 사용 방법 - 인형

있음 카운티 재산세 (도시, 마을 또는 마을 재산세와는 대조적으로)를 알아 내기 위해 균등 화율 (때로는 균등화 계수라고 함)을 사용하여 부동산 면허 시험에서 문제를 해결하려면 준비가되어 있는지 확인하십시오. 간단한 상황에서 한 카운티 내의 여러 마을, 도시 및 마을 모두가 ...

편집자의 선택

웹 마케팅 : Netvibes 홈페이지에 콘텐츠를 추가하는 방법 - 인형

웹 마케팅 : Netvibes 홈페이지에 콘텐츠를 추가하는 방법 - 인형

Netvibes 소셜 미디어 웹 사이트를 추적하는 웹 마케팅 담당자에게 유용 할 수 있습니다. Netvibes에 수동으로 콘텐츠를 추가하려면 다음 단계를 따르십시오 : 구독하려는 사이트, 블로그 검색 또는 기타 페이지로 이동하십시오. RSS 또는 RSS 구독 링크를 마우스 오른쪽 단추로 클릭하십시오. 나타나는 바로 가기 메뉴에서 링크 위치 복사 ...

소셜 미디어 측정 항목 : 인형에 집중할 수있는 모바일 분석

소셜 미디어 측정 항목 : 인형에 집중할 수있는 모바일 분석

사람들이 모바일 웹 사이트를 사용하는 방법 휴대 전화 및 태블릿의 앱은 웹 사이트 사용 방식과 매우 다르며 소셜 미디어 측정 항목도이를 고려해야합니다. 모바일 분석이 일반적인 플랫폼 유형, 플랫폼 버전, 화면 크기, 사용 방식과 다른 여러 측정 항목에 집중하기를 원합니다.