[인프런] Javascript 입문

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런] Javascript 입문 - if 조건문 본문

프로그래밍/Javascript 자바스크립트

[인프런] Javascript 입문 - if 조건문

비비 bibi 2020. 10. 6. 15:17

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

<if 조건문>

조건문

슈퍼에서 개발자 남편이 아내의 전화를 받았다. 우유 사와. 계란 있으면 6개 사와.

남편의 선택은 뭘까요?
-> 우유를 6개 사 온다.

왜 그랬을까? 조건문을 배우면 알게 된다.

실습 준비

hello.html 을 작성하고 브라우저를 통해 엽니다.

<!DOCTYPE html> 
<html>
<body> 
<h2>자바스크립트 연습장</h2> 
<p id="demo"></p> 
</body> 
<script> 
console.log("hello");
</script>
</html>

if 기본 문법

if (조건식) { //조건식이 참일 경우 실행될 구문 }
{} 안의 구문은 조건식이 참일때만 실행된다.

if (조건식) { 조건식이 참일 경우 실행될 구문 }

{}는 생략할 수 있지만 꼭 쓰는 게 좋다.
indent(들여쓰기)를 예쁘게 해야 한다. (필수!)

if + else

if (조건식) { //조건식이 참일 경우 실행 } else { //조건식이 거짓일 경우 실행 }

if (조건식) { 
  조건식이 참일 경우 실행
} else { 
  조건식이 거짓일 경우 실행 
}

if + else if + else

if (조건식1) { //조건식이 참일 경우 실행 } else if(조건식2) { //조건식1은 거짓이고 2는 참일 경우 } else { //거짓일 경우 실행 }

예제

입력받은 숫자가 홀수인지 짝수인지를 알려주는 프로그램을 작성해 봅시다.
입력받은 문자가 대문자로 되어 있으면 '대문자 문장입니다.' 소문자로 되어 있으면 '소문자 문장입니다.' 그 외에는 '보통 문장입니다.' 라고 출력하는 프로그램을 작성해 보세요.

나의 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>if조건문 예제1-홀수, 짝수 구분</h2>
<script>
    var str = prompt('숫자를 입력하세요');
    var n = Number(str);
    if (n%2 === 0) {
        console.log('이 숫자는 짝수입니다')
    } else if (n%2 === 1) {
        console.log('이 숫자는 홀수입니다')
    };
</script>
</body>
</html>

이건 .toUpperCase() 와 .toLowerCase() 를 사용해야 할 것 같다는 생각은 들었지만
어떻게 조건문을 만들어야 하는지 감이 안 와서 구글링의 도움을 받았다. (키워드 : 자바스크립트 대소문자 구분)
참고 : qastack.kr/programming/1027224/how-can-i-test-if-a-letter-in-a-string-is-uppercase-or-lowercase-using-javascrip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>if 조건문 예제2 - 대소문자 구분 </h2>
<script>
    var str = prompt('영어 문장을 입력하세요');
    if (str === str.toLowerCase()) {
        console.log('소문자 문장입니다');
    } else if (str === str.toUpperCase()) {
        console.log('대문자 문장입니다');
    } else {
        console.log('보통 문장입니다');
    }
</script>
</body>
</html>

예제 풀이

https://gist.github.com/honux77/d78e4e412bf89dad06bb0e49ff06d847

IF 예제

IF 예제. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

내 코드와 다른점 정리

/*
var s = prompt("숫자를 입력해 주세요");
var n = Number(s);
*/
var n = Number(prompt("숫자를 입력해 주세요."));
// 평소 쓰던 코드 대신 한 줄로 줄여서 작성.

 if (n % 2 == 0) {
   console.log( n + "은(는) 짝수입니다.");
   } else {
   console.log( n + "은(는) 홀수입니다.");            
   }
// else if 문 대신 else 사용.

var str = prompt("영어 문장 입력해 주세요.");
var ustr = str.toUpperCase();
var lstr = str.toLowerCase();
// 영어문장을 입력받고, 받은 문장을 대문자/소문자로 변환해 각각 변수로 담음

if (str === ustr) {
console.log("대문자 문장입니다.");
} else if (str === lstr) {
console.log("소문자 문장입니다.");
} else {
console.log("일반 문장입니다.");
}
// 조건문에서는 변수만 사용해 간결하게 작성

저작자표시 비영리 변경금지

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

[인프런] Javascript입문 - 연습문제2(소수 판별 프로그램) (0)	2020.10.07
[인프런] Javascript 입문 - 반복문1 (0)	2020.10.06
[인프런] Javascript입문 - 연습문제1 (0)	2020.10.04
[인프런] Javascript입문 - 변수, 연산자 및 기타 (0)	2020.10.02
[인프런] Javascript 입문 - 개발 환경 구축, 자바스크립트는 무엇을 할 수 있나?, 자료형 (0)	2020.10.01

'프로그래밍/Javascript 자바스크립트' Related Articles