이전에 javascript if문과 switch문에 대해 포스팅한 적이 있는데,
문법에 대해 하나하나씩 좀 딥하게 연습해 보려고 한다.
if문은 조건에 따라 쓰는게 살짝씩 다른데
1. 조건이 하나일 때
2. true인 조건 / false인 조건
3. 조건이 두개 이상
4. 중첩 if문
로 쓸 수 있는데 본격적으로 예제를 살펴보도록 하겠다.
방문자의 이름을 입력 받아서 if문으로 화면에 "방문자님 환영합니다." 를 출력시키기
let userName = prompt('방문자의 이름을 입력해주세요.');prompt 는 사용자가 입력하는 칸을 생성해주는 기능으로 prompt('내용');을 적으면
위 사진처럼 입력할 수 있는 칸이 자동으로 생성된다.
if(userName) {
document.write(userName + '님 환영합니다.');
alert(userName + '님 환영합니다.')
}그리고 변수 선언 아래에 if문을 위처럼 작성해준다.
if(변수명)을 넣어주고 {}안에 document.write = document는
웹 페이지 그 자체라고 생각하면 쉽기에 웹 페이지에.적는다(userName + '님 환영합니다.') 인데
여기서 userName은 앞서 prompt로 사용자가 자신의 이름을 적으면 사용자의 이름이
prompt에 저장되면서 userName 또한 사용자의 이름으로 함께 저장된다.
그리고 텍스트를 출력하려면 꼭 '' 또는 ""안에 텍스트를 적어야 한다!
그리고 alert은 사용자한테 알림을 띄워주는 것이며 if(userName)을 받았을 때,
웹 페이지에 prompt로 받은 userName + '님 환영합니다' 를 텍스트로 출력해주고
알림창으로 prompt로 받은 userName + '님 환영합니다' 를 띄워줘 라고 명령을 했다.
나는 prompt 에 heeyoung 을 입력했고 그 결과,
alert 으로 userName + '님 환영합니다.' 를 출력 해주고
동일하게 웹 페이지에서 텍스트가 출력된 것을 볼 수 있다.
입력받은 숫자가 짝수인지 홀수인지 판단해서 알림창으로 보여주기
let inputNum = prompt('좋아하는 숫자를 입력해주세요.');let inputNum 변수에 prompt('좋아하는 숫자를 입력해주세요.)를 먼저 저장해주면
좋아하는 숫자를 입력해주세요. 라는 입력창이 뜬다.
if(inputNum%2 == 0) {
alert('입력한 숫자는 짝수입니다.')
}else {
alert('입력한 숫자는 홀수입니다.')
}그리고 변수 선언 아래에 if문을 위처럼 작성해준다.
if(inputNum%2 == 0)을 살펴보면 % 는 산술연산자인데 산술 연산자에는 5개가 있는데,
+ (덧셈), - (뺄셈), * (곱셈), /(나눗셈), %(나머지) 이며,
if(inputNum%2 == 0)는 inputNum을 2로 나눴을 때 나머지가 0이 정말 맞냐 라는 의미로 해석한다.
그래서 0이 맞다면 alert('입력한 숫자는 짝수입니다.') 를 출력하고
0이 아니라면 alert('입력한 숫자는 홀수입니다.') 를 출력해줘 라고 작성한 것이다.
그래서 prompt 창에 10을 입력하면
위 사진처럼 입력한 숫자는 짝수입니다. 라고 alert 창이 뜨고
prompt 창에 11을 입력해보면
위 사진처럼 입력한 숫자는 홀수입니다. 라고 alert 창이 뜨고
if 는 조건식이 true일 때, else 는 조건식이 false일 때로 생각하면 된다.
userId를 입력 받은 후 heeyoung0인지 비교하고 일치하면 [일치합니다.] 라는 알림창을 띄워주고
다르다면 다시 입력하라는 알림창 띄워주기
let userId = prompt('아이디를 입력해주세요.');먼저 입력 받은 값을 비교 하기 위해 userId = prompt 로 선언해준다.
if (userId == 'heeyoung0') {
alert('아이디가 일치합니다.')
} else {
alert('아이디를 확인해주세요.')
}그리고 변수 선언 아래 위 처럼 if문을 작성해준다.
if (userId가 heeyoung0이 맞으면) 아이디가 일치합니다. 라고 출력해주고
일치하지 않다면 아이디를 확인해주세요. 라고 출력해줘 라고 작성해줬다.
그리고 입력창에 heeyoung0을 작성하면
위 사진처럼 '아이디가 일치합니다' 라고 alert 창이 뜨고 heeyoung0이 아닌 다른 텍스트로 입력하면
위 사진처럼 아이디를 확인해주세요. 라는 alert 창이 뜨는 걸 볼 수 있다.
그러면 이번에는 여러개의 조건을 걸고 if문을 작성해 보도록 하겠다.
1. 나이가 18세 이상이면 오토바이만 운전 가능.
2. 나이가 20세 이상이면 운전 가능.
3. 운전할 수 없는 나이
위 3가지의 조건을 충족시키는 if문을 작성해 보도록 하겠다.
let age = prompt('나이를 입력해주세요.');먼저 age에 prompt('나이를 입력해주세요')를 담아주도록 하겠다.
꼭 prompt 가 아닌 나이를 지정해서 담아줘도 무관하다.
let age = prompt('나이를 입력해주세요.');
if(18 <= age&&age < 20) {
alert('오토바이만 운전 가능합니다.')
}else if (age >=20) {
alert('운전 가능합니다.')
}else {
alert('운전할 수 없는 나이입니다.')
}그리고 변수 선언 아래 위처럼 if문을 작성했다.
if(18 <= age&&age < 20)은 논리 연산자 중 AND 연산자를 사용하여 작성했는데 AND 연산자는 두 조건을 모두 만족해야 참(true)를 반환하기에
age는 18보다 크거나 같고 20보다는 작다 라는 조건을 모두 만족하면 alert('오토바이만 운전 가능합니다.) 를 띄워주고 age 가 20보다 크거나 같으면 alert(운전 가능합니다.)를 띄워주고 모든 조건을 만족하지 않는다면 alert(운전할 수 없는 나이입니다.)를 띄워줘 라고 조건식을 작성했다.
그러면 이제 결과를 확인해 보도록 하겠다.
나이를 19세로 적으면 조건식에 맞게 오토바이만 운전 가능합니다. 라고 출력된다.
나이를 21세로 적으면 조건식에 맞게 운전 가능합니다. 라고 출력된다.
나이를 17세로 적으면 조건식에 맞게 운전할 수 없는 나이입니다. 라고 출력된다.
아직 if문에 대한 예제는 좀 더 남아있고 글이 다소 길어질 것 같아 나눠서 적어보려 한다.
나머지 예제는 다음 글에서 또 다뤄보도록 하겠다.
'javascript' 카테고리의 다른 글
| 자바스크립트 switch문 (1) | 2023.12.03 |
|---|---|
| 자바스크립트 if문(2) (1) | 2023.12.03 |
| Javascript에 대해 (개념) (0) | 2023.12.02 |
| Javascript - for문과 for...in (1) | 2023.11.09 |
| Javascript - if문과 switch문 (0) | 2023.11.07 |