JavaScript는 두 가지 조건이 충족되면 메시지를 표시합니다. 조건문

프로그래밍이 항상 선형적이었다면 아마도 존재하지 않았을 것입니다. 결국 거의 모든 프로그램에는 특정 외부 또는 내부 요인에 따라 다양한 결과가 발생합니다. 다음은 다음을 사용하여 생성된 분기입니다. 조건문, 이 기사에서 이에 대해 설명하겠습니다.

일반 형태 JavaScript의 조건문그런:

If (조건) (
//연산자 블록
}
또 다른(
//연산자 블록
}

키워드가 먼저 나옵니다 만약에, 조건문이 다음에 올 것임을 브라우저에 알려줍니다. 괄호 안에는 그에 따라 다음을 반환하는 조건이 있습니다. 진실또는 거짓. 괄호 안의 표현이 다음과 같다면 진실 (진실), 조건이 충족되면 첫 번째 명령문 블록이 실행됩니다. 거짓 (거짓), 그러면 명령문 블록이 다음에서 실행됩니다. 또 다른. 또한 차단 또 다른필수 사항은 아니며 아래에 예를 들어 보겠습니다.

이제 실제로 연습해 보겠습니다. 이 문제를 해결해 보겠습니다. 사용자가 숫자를 입력하면 메시지가 표시됩니다. 5 .


만약(x< 5) alert ("Введённое число меньше пяти");

이 예를 살펴보겠습니다. 첫 번째 줄에서 우리는 함수를 호출합니다 즉각적인, 숫자를 입력하라는 창이 표시됩니다. 다음으로 사용자는 변수에 기록된 숫자를 입력합니다. 엑스. 그리고 다음과 같이 번역되는 조건이 나옵니다. x가 5보다 작으면 "입력한 숫자가 5보다 작습니다"라는 메시지를 표시하고, 그렇지 않으면 "입력한 숫자가 5보다 큽니다"라는 메시지를 표시합니다.. 표현 엑스< 5 다음 중 하나를 반환합니다. 진실 ( < 5 ) 또는 거짓 (x >= 5). 또한 중괄호를 사용하지 않는다는 점에 유의하세요. 왜? 우리는 하나의 연산자(함수)만을 사용하기 때문에 알리다()). 원칙적으로 설치할 수 있으며 아무것도 변경되지 않지만 여기서는 불필요합니다.

그러나 우리 작업에는 심각한 오류가 포함되어 있습니다. 사용자가 " 5 ", 그러면 "라는 메시지가 표시됩니다. 입력한 숫자가 5보다 큽니다.", 그러나 이것은 완전히 정확하지 않습니다. 따라서 조건을 다음과 같이 변환해 보겠습니다.

만약(x< 5) alert ("Введённое число меньше пяти");
또 다른
if (x == 5) Alert ("5개를 입력하셨습니다");
else Alert("입력한 숫자가 5보다 큽니다.");

보시다시피 블록은 또 다른첫 번째 조건에서 변형되었습니다. 블록에서 또 다른 x와 5가 같은지 확인합니다. 그렇다면 해당 메시지가 표시되고, 그렇지 않으면 숫자가 5보다 크다고 표시됩니다. 즉, 조건 내의 조건은 완전히 정상입니다. 또한 저는 여전히 중괄호를 넣지 않았습니다. 다른 경우라면이것은 한 운영자입니다. 그리고 연산자가 하나만 있는 경우에는 괄호가 필요하지 않습니다.

또 다른 예를 살펴보겠습니다. 변수를 만들어 보겠습니다. 진실, 입력한 숫자가 양수인 경우 거짓, 숫자가 음수인 경우.

Var x = 프롬프트("숫자를 입력하세요");
var 양수 = true;
만약(x< 0) positive = false;
경계(긍정);

이 예에서는 일부 변수를 가져와 기본값을 할당하는 전형적인 예를 사용합니다. 그리고 필요한 경우 변경합니다. 이 경우 숫자가 음수이면 기본값을 변경합니다. 그러나 이 예는 훨씬 더 아름답게 작성될 수 있습니다.

Var x = 프롬프트("숫자를 입력하세요");
var 양수 = x< 0;

즉, 우리는 가변적이다. 긍정적인비교 결과를 즉시 할당 엑스그리고 제로.

이제 소위 말하는 것에 대해 이야기합시다. 어려운 상황. 위의 예에서는 단순한 조건만 고려했지만, 여러 조건으로 구성된 다른 조건도 있습니다. 여기에는 두 가지 작업이 사용됩니다. && - 논리 AND그리고 || - 논리적 OR. 이 조건을 작성해 보겠습니다.

만약((x<= 5) && (x >= 0)) (//연산자 블록)

이 조건(복잡한 조건)은 다음을 제공합니다. 진실, 만약에 그리고 만약에 엑스<= 5 И x >= 0 . 그렇지 않으면 다시 돌아올 것입니다. 거짓.

복잡한 조건을 생각해 봅시다. 논리적 OR.

만약((x<= 5) || (x == 6)) {//блок операторов}

이는 다음과 같이 번역될 수 있습니다. 엑스<= 5 ИЛИ x == 6 , 그런 다음 반환 진실, 그렇지 않으면 거짓.

마지막으로 말씀드리고 싶은 것은 다음과 같은 조건이 있다는 것입니다. 여러 논리 AND 및 OR, 때로는 이 상태를 이해하기 위해 머리를 정말 긴장시켜야 할 때도 있습니다.

그게 내가 말하고 싶었던 전부야 JavaScript의 조건문. 그리고 필요한 것은 연습뿐입니다. 아아, 연습 없이는 이 연산자를 사용하는 방법을 결코 배울 수 없으며, 이에 대한 지식 없이는 계속 진행하는 것이 의미가 없습니다. 따라서 (위에서 해결한 것과 같은) 몇 가지 간단한 문제를 생각해내고 해결하세요.

우리 토끼로 돌아가자

지난 장에서 산토끼와 마자이에 관한 과제를 기억해 봅시다.
조건을 사용하지 않고 수행된(또는 수행되지 않은) 작업
조건에 따라 마지막에 토끼의 수를 센다.
보트는 쉽지 않을 것입니다.

lastBoatRabbits 함수에 분기를 추가해 보겠습니다.

var lastBoatRabbits = 함수(totalRabbits)( if (totalRabbits === 0 ) ( // 0을 반환 ; ) else ( var RestRabbits = totalRabbits % 6 ; if (restRabbits === 0 ) ( // 6을 반환 ; ) else ( return RestRabbits; ) ) );

따라서 강에 산토끼가 없으면 마지막 보트는 누구도 데려 오지 않을 것입니다 (사실 할아버지는 강에 산토끼가 없다는 것을 확실히 알기 때문에 거의 즉시 돌아올 것입니다).

그리고 강의 산토끼 수가 6의 배수이면 마지막 보트에는 산토끼가 가득 찼습니다.

이 프로그램에서 또 어떤 점을 개선할 수 있나요? 별도의 변수를 사용하겠습니다.
감사할 경우를 대비하여 보트에 들어갈 수 있는 토끼 수를 저장합니다.
토끼는 Mazai에게 더 큰 배를 줄 것입니다. 갑자기 무슨 일이 일어날지 전혀 알 수 없습니다.

함수(totalRabbits)( if (totalRabbits === 0 ) ( 0 반환 ; ) else ( var RestRabbits = totalRabbits % boatCapacity; if (restRabbits === 0 ) ( boatCapacity 반환; ) else ( return RestRabbits; ) ) );

분기 구문

브랜치에는 조건이 거짓일 경우 실행되는 부분이 있을 수 있으며,
또는 없을 수도 있습니다:

// 두 개의 분기가 있는 옵션: if (rainIsFalling) ( stayHome(); // rainIsFalling == true인 경우 이 부분이 실행됩니다.) else ( walkInAPark(); // 그렇지 않으면 이 부분이 실행됩니다. } // 하나의 분기가 있는 옵션: if (musicIsPlaying) ( 댄스(); ) // musicIsPlaying == false이면 프로그램 실행이 계속됩니다.

정황

if의 조건은 두 숫자나 문자열을 비교하는 표현식일 수 있습니다.
== , > 작업을 사용하여< , >= , <= , != и === , любая переменная, которой
논리값과 단순히 연산의 결과로 나타나는 임의의 값이 할당되었습니다.
if는 부울 값으로 캐스팅됩니다.

비교 예:

10 > 5 // => 참 11< 6 // =>false 5 >= 5 // => true 3 != 3 // => false "abc" == "abc" // => true "abc" === "abc" // => true

조건으로 사용되는 변수:

var 조건 = 10 > 5 ; if (조건) ( console .log("10 > 5" ); //실행될 예정 }

조건에 따른 논리 연산

부울(또는 부울로 강제 변환 가능) 값을 반환하는 여러 표현식
논리 연산을 사용하여 결합할 수 있습니다. 이러한 작업을 다음과 같이 부릅니다.
논리 AND && , 논리 OR || 그리고 논리적 부정! .

진짜 진짜 ; // => 참 거짓 || 거짓 ; // => 거짓 !false; // => 사실

논리 AND는 양쪽이 모두 true인 경우에만 true를 반환합니다.
논리적 OR은 양쪽 모두 false인 경우에만 false를 반환합니다.
부정은 true인 경우 false를 반환하고, 반대로 false인 경우 true를 반환합니다.

Javascript 규칙에 따라 0, null 및 undefine 값은 false로 캐스팅됩니다.
그러나 결과 &&를 얻으면 감소되지 않은 첫 번째 값을 얻습니다.
false 로 캐스팅되고 결과 결과는 || - 첫 번째 감소되지 않은 값,
이는 true로 평가됩니다.

0 && 참 ; // => 0 6 || 7 || 거짓 ; // => 6 !0 ; // => 사실

따라서 마지막 보트에 있는 토끼 수를 반환하는 함수는 다음과 같이 다시 작성될 수 있습니다.

var boatCapacity = 6 ; var lastBoatRabbits = 함수(totalRabbits)( return totalRabbits && (totalRabbits % boatCapacity || boatCapacity); );

작업

  1. 숫자 매개변수를 사용하는 fizzbuzz 함수를 작성하고 다음을 수행하세요.
    • 3의 배수인 숫자의 경우 "Fizz"를 반환합니다.
    • 5의 배수인 경우 "Buzz"를 반환합니다.
    • 15의 배수(3과 5 모두)인 숫자의 경우 "FizzBuzz"를 반환합니다.
    • 그렇지 않으면 원래 숫자를 반환합니다.
  2. 숫자 매개변수를 취하고 우리에게 전달된 숫자가 적절한지 여부를 결정하는 iGoToNorth 함수를 작성하세요. 10보다 크고 30보다 작으며 7의 배수이면 적합한 숫자입니다.

레슨 #5
JavaScript의 if 문 분기

지점 운영자조건이 참인지 거짓인지에 따라 프로그램이 하나 또는 다른 코드 블록을 실행할 수 있도록 설계되었습니다.

지점 운영자에는 다섯 가지 유형이 있습니다. 이번 강의에서는 그 중 두 가지를 살펴보겠습니다.
— 지점 연산자인 경우
— 다른 경우 지점 운영자

조건이 true 를 반환하면 코드를 실행합니다.

분기 연산자의 조건은 일반적으로 비교 연산 또는 논리 연산입니다.

if 분기 문 다이어그램은 다음과 같습니다.

If(조건)(조건이 true를 반환하면 코드가 실행됩니다.)

다음과 같은 경우 분기 연산자를 사용하여 예를 들어 보겠습니다.

// 두 개의 변수를 생성합니다. var numOne; var num2; // 변수에 값을 할당 numOne = 5; numTwo = 3; if (numOne > numTwo) ( Alert("조건이 true를 반환했습니다."); )

스크립트에서는 numOne과 numTwo라는 두 개의 변수를 생성하고 여기에 숫자 값 5와 3을 할당했습니다.

다음으로 두 변수의 값을 비교하는 if 분기 연산자를 만들었습니다. 비교 작업이 true를 반환하면 중괄호 사이에 있는 코드가 실행됩니다. 우리의 경우 조건이 true로 반환되었습니다라는 메시지가 표시된 창이 나타납니다. 비교 작업이 false 를 반환하면 아무 일도 일어나지 않습니다.

이중 슬래시 문자 //는 주석입니다. 이중 슬래시 뒤에는 어떤 텍스트라도 쓸 수 있으며 JavaScript 인터프리터는 이를 주석으로 인식하고 처리하지 않습니다. 우리가 기억하는 것처럼 언어로 댓글을 작성할 수도 있습니다.

다른 경우 분기 문는 조건이 반환하는 값(true 또는 false)에 따라 특정 코드 블록을 실행하도록 설계되었습니다.

if else 분기 연산자 다이어그램은 다음과 같습니다.

If(조건)(조건이 true를 반환하면 코드가 실행됨) else(조건이 false를 반환하면 코드가 실행됨)

if else 분기 연산자를 사용하여 예를 들어 보겠습니다.

바넘원; var num2; 숫자1 = 5; numTwo = 3; if (numOne > numTwo) ( Alert("조건이 true를 반환했습니다."); ) else ( Alert("조건이 false를 반환했습니다."); )

5보다 큰 숫자(예: 7)인 numTwo 변수를 할당하면 조건이 false를 반환하고 조건이 false를 반환했습니다라는 메시지가 표시된 창이 나타납니다.

JavaScript - 7과. 프로그램 분기 - if 문

어떤 조건에 따라 어떤 조치를 수행해야 하는 상황이 자주 발생합니다. 예를 들어 온라인 의류 매장이 있습니다. 우리는 사용자에게 자신이 누구인지(남성 또는 여성) 물어보고 답변에 따라 관련 상품 목록(남성 또는 여성)을 표시합니다. 그러한 프로그램을 작성할 때 사용됩니다. 조건문 if 문. 구문은 다음과 같습니다.

B(S1)인 경우
그렇지 않으면 (S2)

어디 - 논리적 유형의 표현, 그리고 S1그리고 S2- 운영자.

다음과 같이 작동합니다. 표현식의 값이 계산됩니다. , 그것이 참이면 명령문이 실행됩니다. S1, 거짓이면 명령문이 실행됩니다. S2. 끈 그렇지 않으면 (S2)생략 가능합니다.

예를 들어보면 더 명확해질 것 같아요. 사용자가 3개의 값을 입력하는 폼을 만들어 보겠습니다. 입력된 숫자의 최대값을 결정하는 스크립트를 작성해 보겠습니다.

먼저 HTML 페이지에 양식 코드를 작성해 보겠습니다.

자바스크립트의 경우

이제 script.js 페이지에 함수 코드를 작성해 보겠습니다.

함수 maxZnach(obj)( var a=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; var m=a; if (b>m) m=b; if (c>m) m=c;

따라서 우리 함수는 형식에서 최대 세 가지 값을 취합니다( ) 우리는 그 가치를 받아들입니다 . 그런 다음 비교합니다. 값이 최대값보다 큼(예: ), 그러면 최대값은 다음과 같습니다. 그렇지 않으면 최대값이 유지됩니다. (괄호 안의 표현은 참이 아니기 때문입니다) 다음으로, 마찬가지로 다음 값을 비교해 보세요. 최대로. 답변은 결과 필드( 입술).

일반적으로 이러한 스크립트는 다음 방법을 사용하여 작성할 수 있습니다. 최대물체 수학지난 강의에서 논의했으므로 코드는 더 짧아질 것입니다.

함수 maxZnach(obj)( var a=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; obj.res.value=Math.max(Math .max(a,b),c);

내 말은 프로그래밍은 여전히 ​​창의적인 과정이고 한 가지 문제는 다양한 방식으로 해결될 수 있다는 것입니다. 프로그래머의 임무는 가장 최적의 옵션을 찾는 것입니다. 그러나 이것은 서정적 여담입니다. 조건문 if 문으로 돌아가서 더 흥미로운 예를 살펴보겠습니다. 이미지 위에 마우스 커서를 올리면 이미지가 증가하여 확대 효과가 나타나는 스크립트를 작성해 보겠습니다.

기억하시겠지만 HTML에서는 삽입된 이미지의 크기를 설정할 수 있습니다. 지정된 치수가 원본보다 크거나 작은 경우 브라우저는 원본을 해당 치수에 맞게 자동으로 조정합니다. 이것이 우리가 사용할 것입니다. 이 사진을 보자:

원래 너비는 302픽셀입니다. 우리는 페이지의 이미지 너비가 102픽셀이기를 원하며, 커서를 가리키면 너비가 302픽셀로 늘어납니다. HTML 페이지를 보면 모든 것이 명확해집니다.

자바스크립트의 경우

그리고 우리 함수에서는 조건 연산자 외에 표준 자바스크립트 함수도 사용할 것입니다. setTimeout, 주어진 시간 간격으로 사용자 정의 함수를 호출합니다.

함수 bigPict())( var w=document.tigr.width; if (w 따라서 이 함수는 그림의 너비를 확인합니다( 너비), 302픽셀보다 작으면 이 너비를 10픽셀씩 늘립니다. 기능 setTimeout우리의 함수를 호출합니다 빅픽트매 0.5초마다 이미지 크기가 조건에 도달할 때까지 증가합니다. w는 거짓이 되지 않습니다.

근사치를 시각적으로 더 부드럽게 만들려면 너비를 늘리는 단계와 함수 호출에 걸리는 시간을 줄여보세요. 이 숫자를 가지고 놀면서 가장 적합한 숫자를 찾으십시오.

오늘은 그게 전부입니다. 숙제로 마우스 커서가 종료될 때의 그림이 원래 값(예: 102픽셀)을 갖도록 스크립트를 완성하세요. 그래도 안되면 다운로드 받으세요



 

다음 내용을 읽어보는 것이 도움이 될 수 있습니다.