친절한효자손 취미생활

[자바스크립트 기초] if, else 태그를 이용하여 BMI 비만도 계산기 프로그램 만들기



오늘은 좀 고급진 방법을 배웠어요^^

바로, 자바스크립트에서 if 문을 이용해서 프로그램을 짜는 방법이죠^^


이것은 무슨소린고...하니,


if 라는 뜻이, 만약~하다면 이라는 뜻이죠?

이것을 이용한 것입니다.





이 방법을 활용하여, BMI (비만테스트) 에 이용을 할 수 있겠는데요,

한번 과정을 알아보도록 하겠습니다^^





우선, 연산기호들을 알아야겠죠??


위에 보시는 것처럼 a,b 라는 변수를 주고,

a는 10, b 는 9 라고 정의하고나서,


참이냐 거짓이냐를 밝혀냅니다.





a>b 라고 했으니, 당연히 10이 9보다 크므로, 이것은 참(true) 이 됩니다.

그래서, 자바스크립트에서도 true 라고 처리를 하게 되죠.





이번엔 b 숫자를 좀 더 크게 해볼까요???





이건 구라가 되므로...보시는 것처럼 거짓(false) 이라고 나옵니다.





이제 if 문을 활용해서, 한번 자바스크립트를 구성해 보도록 합니다.

A가 B 보다 클때, 이것은 참 입니다^^ 라는 문구가 출력되도록 하는 태그입니다.


if 문을 이런식으로 활용을 하며, if도 function 처럼 함수식으로 사용이 되므로

{} 중괄호를 사용하게 되지요.





if 와 else를 동시에 사용하여, 이렇게 스크립트를 구성해 보겠습니다.


a가 b보다 클때, 참 이라는 문구를 출력하고,

그렇지 않을때 (작거나 같을때) 거짓 이라는 문구를 출력하겠다 라는 내용이에요.


그러면, 이렇게 B가 16이라 더 크니까,

거짓이라고 정상출력이 되는걸 보실 수 있어요^^





다음의 연산기호를 참고하시면 되겠습니다^^





이번에는, 변수를 직접 사용자가 입력해서 처리하는 IF 문을 만들어 보겠습니다.


프롬프트 창을 띄우는 태그를 활용하면 되겠지요??

여기서는 변수를 X라고 만들고, X값을 직접 입력하는 스크립트 구성입니다.


사용자가 입력한 숫자가, 0보다 크냐 작냐를 만드는 과정이에요^^





이렇게 정상적으로 창이 떠요.

알맞는 숫자를 넣어야겠죠???





음수를 넣어볼께요. -23이라고 입력했어요.





정상적으로 잘 가려내는군요 후후후~! +_+





이번엔 좀 더 디테일하게, 0과 같을 경우도 넣어봤습니다.

방법은 위와 동일하구요^^






0 이라고 정상적으로 나오네요^^

참으로 재밌는 IF 문 입니다.



신나2


자, 이제 감이 좀 잡히시죠???

본격적으로, 이제부터 BMI 테스트 프로그램을 자바스크립트로 구성해 보도록 하지요~!


 


다음, 두개의 표를 참고하여 만들어 볼께요^^

그냥 숫자만 적당히 넣으면 됩니다.





또한, 여기서는 위와 같은 조건식이 들어갑니다.

이부분은 태그를 보면서 다시 설명해 드리도록 할께요.




if_BMI계산기.html


여기에 미리 자바스크립트를 올려놓을테니, 참고하실 분들은 참고하시면 됩니다.

응용해서 변경하셔도 상관없습니다.





자바스크립트는 이렇게 구성이 되는데요,


&& 은 뭐냐면, 영어로 표현한다면 AND (그리고) 가 되요.

즉, x가 10보다 크고 20보다 작다 라고 표현한다면,


(x>10) && (x<20)


이런식으로 스크립트가 구성이 되지요.




자세한것은 위의 태그 구성에 보시는 그대로를 참고하시면 될 것 같습니다. ㅎㅎㅎ

응용하면 쉬워요^^





자~ 스크립트를 실행해 보세요^^

키를 입력하시구요~!





저는 180이 좀 안되지만, 여튼 180에 가까우니까...ㅎㅎㅎ





몸무게는 80...ㅠ_ㅠ 지못미...





엥??? 네이버에서는 과체중으로 나오던데....허허허허~!

여기서는 정상이네요^^;


기분이 좋으네요~! 정상정상~!


...하지만...샤워할때의 나의 모습을 보면...

아오~! 왜케 살이 찐거냐...ㅠ_ㅠ




이렇게해서, 오늘도 if문을 이용한 자바스크립트 구성!

그중에서도 BMI 테스트를 만들어 보았습니다.


앞으로 더욱 알찬 자바스크립트 시간이 될 수 있도록

같이 노력해 보아요^^







공유하기

facebook twitter kakaoTalk kakaostory naver band