1. if문
- 조건에 따라 다른 작업을 수행하려고 할 때 작성하는 구문이다.
1) 기본 if문
- 조건이 맞을때의 결과만 표현해주는 구문이다.
📌 문법
<script>
if(조건식){
//조건식이 참일때 표현식
}
</script>-
기본 문법을 가지고 한가지 문제와 그 예시를 들어보겠다.
-
문제 : 사용자에게 점수를 입력받아 80점 이상이면 [합격]이라는 경고창을 띄워주세요.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 조건문</title>
<script>
var score = prompt('점수를 입력하세요','0~100사이의 정수');
if(score >= 80){
alert('합격');
}
</script>
</head>
<body>
</body>
</html>- prompt 함수는 사용자에게 문자열을 입력받은 함수이다.
- score라는 변수에 사용자가 입력한 점수를 담는다. (사용자가 입력할 때마다 값이 변하기 때문!)
🖥️ 결과
- 90점과 80점을 입력했을 때는 [합격]이라는 문구가 반환되지만, 70점과 60점을 입력했을때는 아무런 결과도 반환되지 않는다. (조건에 해당X)
2) if else문
- 조건이 맞을때와 틀릴때의 2가지 경우에 대한 코드를 작성하는 구문이다.
📌 문법
<script>
if(조건식){
//조건식이 참일때 표현식
}else{
//조건식이 거짓일때 표현식
}
</script>-
위에서 했던 문제에 한가지 문항을 추가해보겠다.
-
문제 : 사용자에게 점수를 입력받아 80점 이상이면 [합격], 그렇지 않으면 [불합격]이라는 경고창을 띄워주세요.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 조건문</title>
<script>
var score = prompt('점수를 입력하세요','0~100사이의 정수');
if(score >= 80){
alert('합격');
}else{
alert('불합격');
}
</script>
</head>
<body>
</body>
</html>- if문으로 만일 score에 작성된 숫자가 80보다 크거나 같으면 경고창에 [합격], 그렇지 않다면(80점 미만이라면) [불합격]이라는 문구를 반환하는 코드이다.
🖥️ 결과
- 90점을 입력했을 때는 [합격]이라는 문구가 반환되고, 60점을 입력했을때는 [불합격] 문구가 반환된다.
3) if else if문
- 세상에는 앞의 문제들처럼 결과가 두개인것만 있지 않다.
- 결과가 여러가지인 경우, if else if문을 사용해야 한다.
📌 문법
<script>
if(조건식1){
//조건식1이 참일 때 표현식
}else if(조건식2){
//조건식2가 참일 때 표현식
}else{
//조건식1과 조건식2가 모두 거짓일 때 표현식
}
</script>- 위의 코드는 3가지 결과만 작성했지만, 조건식은 else if()를 계속 추가할 수 있다.
- "신입사원의 입사점수가 90점이상이면 [기획팀], 80점이상이면 [총무팀], 나머지는 [영업팀]을 경고창으로 반환하시오." 라는 문제로 예시를 들어보자면 아래와 같다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 조건문</title>
<script>
var score = prompt('점수를 입력하세요','0~100사이의 정수');
if(score >= 90){
alert('기획팀');
}else if(score >= 80){
alert('총무팀');
}else{
alert('영업팀');
}
</script>
</head>
<body>
</body>
</html>- prompt 함수로 점수를 입력받아 score 변수에 담아준다.
- score의 수치가 90이상이면 [기획팀], 80점이상이면 [총무팀], 나머지는 [영업팀]으로 처리되도록 코드를 작성했다.
🖥️ 결과
2. 중첩 if문
- 중첩 if문이란 말 그대로 if문 안에 if문을 또 다시 작성하는 것을 의미한다.
📌 문법
<script>
if(조건식){
if(조건식){
}
}
</script>💡 사실 위쪽에 작성한 if else문에는 한가지 문제가 있었다.
0~100사이의 정수가 아닌 숫자를 입력해도 80점 이상이기만 하면 합격이라고 결과가 반환되는 것이다.
"사용자에게 점수를 입력받아 80점이상이면 [합격], 그렇지 않으면 [불합격]이라는 경고창 띄워주세요."뿐만 아니라
단, 점수는 0~100점사이를 받고 잘못입력시 [0~100사이의 정수로 입력하세요.]라는 경고창을 띄워주세요."라는 문구도 포함되어야 한다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 조건문</title>
<script>
var score = prompt('점수입력','0~100사이 정수입력');
if(score >= 0 && score <= 100){
if(score >= 80){
alert('합격');
}else{
alert('불합격');
}
}else{
alert('0~100사이의 정수로 입력하세요.');
}
</script>
</head>
<body>
</body>
</html>- 이런식으로 if문 내부에 또 한번 if문을 작성하여야 한다.
- 첫번째 if문은 0~100사이를 조건으로 걸기 위해서 논리곱연산자를 사용하였다.
- 이렇게 되면 0~100사이일때만 [합격],[불합격] 처리되고, 그외의 숫자는 다시 입력하라는 경고창이 뜨게 된다.
3. 논리연산자와 if문
- 논리연산자를 사용하면 결과값이 true 와 false로 처리되기 때문에 조건식을 여러개두는 if문과 함께 사용이 가능하다. (위의 중첩 if문 예시처럼!!)
1) 논리곱연산자 if문 - &&
📌 문법
<script>
if(조건식1 && 조건식2){
//조건식1과 조건식2가 모두 참일때 표현식
}else{
//조건 중 하나라도 거짓일때 표현식
}
</script>2) 논리합연산자 if문 - ||
📌 문법
<script>
if(조건식1|| 조건식2){
//조건식1과 조건식2가 둘중 하나라도 참일때 표현식
}else{
//조건들이 모두 거짓일때 표현식
}
</script>3) 부정연산자 if문 - !
📌 문법
<script>
confirm('질문텍스트');
</script>- 부정연산자는 확인 버튼을 누르면 [true]를 반환, 취소버튼을 누르면 [false]를 반환하는 함수이다.
- 앞의 다른 것들과는 조금 다른 방식으로 작성되며, if문과 함께 사용할 때는 대부분 false의 결과만 반환하고자 할 때이다.
- confirm함수는 결과 자체가 불표현식이기 때문에 비교연산자를 사용하지 않으며, 조건식의 결과가 true일때의 명령이 없다보니 조건 앞에 !를 붙여 코드의 수를 줄일 수 있다.
중국어랑 코딩하기 (❛ ֊ ❛„)