[HTUN] Chapter 2. JavaScript 기초 (2)

🎐 이전 강의 정리

* JavaScript 문법은 html의 <script> ... </script> 안에 작성한다.

* 출력은 alert, document.write, console.log 함수가 존재한다.

* let 타입은 재선언이 불가능 하고, const 타입은 재선언, 재할당 모두 불가능하다. 반면 var은 모두 가능하다.

* 직접적으로 사용자에게 값을 입력받는 것은 prompt, 예/아니오(true/fase) 는 confirm 함수를 사용한다.

🎐 이번 강의 내용

* 반복문 for, while

* 조건문 if ~ else ~ else if

* 배열과 배열 반복문 foreach

🎐 Step 1. 반복문 for / while

자바스크립트의 반복문은 C언어와 비슷한 점이 매우 많습니다.

기본적으로 for문은 for(선언 및 초기값 부여; 조건식; 증감식) { ... } 의 형식으로 사용됩니다.

for문의 경우, 선언된 변수의 초기값 부터 조건에 맞는 부분까지 증감식을 통해 하나씩 반복합니다.이제 실 사용 예제를 보겠습니다.

결과를 확인 해 보고 직접 코드를 따라 작성 해 보세요!

위와 같이 작성한 뒤 결과를 확인 해 보시면,

좌측 사진과 같이 나옵니다.

for문의 반복 실행 순서는 아래와 같습니다.

1	loop 라는 변수를 선언한 뒤 그 변수의 값을 1로 초기화
2	loop <= 10 (a가 10보다 작거나 같다[이하]) 의 조건이 만족 (true) 할 경우 다음 식을 수행함
3	document.write(`${loop} 번째 반복 <br />`); 을 실행하여 현재 loop 값과 문자를 출력함.
4	loop++ 를 실행하여 loop의 값을 1 만큼 증가시킴 (증감연산자)
...	위 내용을 loop <= 10이 false 일때 까지 반복함.

다음은 While문 입니다.

while 문은 어떤 조건문이 참이기만 하면 문장을 계속해서 수행합니다.

While문의 형식은 while(조건식) { ... } 입니다.

while문은 조건식이 false라면 다음 식을 실행하지 않습니다.

위 코드는 loop는 1로 정의해 두고, loop가 10보다 작으면 실행시키게 하여서

document.write를 실행하고, loop의 값을 1 만큼 키웁니다 (증감연산자)

🎐 Step 2. 조건문 if ~ else if ~ else

Javascript 에서는 무언가 조건을 걸고, 그 조건에 맞게 실행을 분기시킬 수 있습니다.

그를 위해 사용하는 것이 if문 입니다.

if문은 if(조건식) { ... } 로 사용하며,조건식이 참 (True) 일때 { ... } 을 실행합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    	// 실행 결과를 직접 확인하세요 (입력이라 오류가...)
        let a = 20;
        let b = Number(prompt("숫자를 입력하세요"));
        let c = a + b;
        if (c >= 50) {
            alert("true");
        }
    </script>
</body>
</html>

위와 같이 작성하시면 30 이상의 값을 입력했을 때에만 true 라는 안내창이 나오게 됩니다.

조건이 거짓 (false) 일 때, false 를 출력하는 것에 대해서 배워보겠습니다.

사용 방법은 간단합니다. else { ... } 로 사용하시면 됩니다.

else는 if문이 거짓일 때 아래 코드를 실행하는 문법 입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a = 20;
        let b = Number(prompt("숫자를 입력하세요"));
        let c = a + b;
        if (c >= 50) {
            alert("true");
        } else {
            alert("false");
        }
    </script>
</body>
</html>

위 코드를 실행시켜 보면, 30 이상을 입력했을 때에는 true, 그 이하의 값을 입력했을 때에는 false 가 나옵니다.

하하하... 그치만 여러분들이 제일 원하는걸 아직 안 알려드렸습니다. ㅎㅎ

분명히 여러분들은 if문이 아닐 때에, 다른 조건을 부여하고 싶으실 겁니다(?)

네. else if에 대해서 배워보도록 하겠습니다.

else if는 첫 if문의 조건식이 거짓 (false) 일 때, 다시 한번 더 조건을 부여하여

질의하는 문법 입니다.

사용 법은 if문과 비슷한 방법으로, else if (조건식) { ... } 입니다.

사실 순서는 if 문을 쓰고, 거짓일 때 else if를 쓰고, 그것 마저 거짓일 때 else 를 사용합니다.. ;;

잡소리 말고 코드 보여드리겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a = 20;
        let b = Number(prompt("숫자를 입력하세요"));
        let c = a + b;
        if (c >= 50) {
            alert("true, 50 이상");
        } else if (c >= 20) {
            alert("true, 20 이상")
        } else {
            alert("false");
        }
    </script>
</body>
</html>

위 코드를 실행시켜 보면, 20 이상인 숫자를 입력했을 때에, true, 20 이상 이라고 출력됩니다.

후... 이제 몸풀기는 끝났습니다(?)

🎐 Step 3. 배열과 배열 반복문 foreach (와... 너무 어렵다;;)

참고로, 배열을 공부하기 전에 옆에 얼음물을 준비하시기 바랍니다.

머리 뚜껑이 활화산이 되어도 전 책임지지 않을겁니다 ;( ㅋㅋㅋㅋㅋㅋㅋ

~~잡소리는 여기까지 하고, 본격적으로 배열 들어가겠습니다?~~

어느 언어나 마찬가지로, Javascript 에서도 배열이란 것이 존재합니다.파이썬을 하시는 분들을 위해 말씀드리자면, 리스트와 같은 개념입니다.

배열이 뭔지 얘기하기 전에, 잠시 맛보기로 ~~맛있는 걸 들려드리겠습니다(?)~~제 집이 100개가 있다고 칩시다 ~~(와 가지고 싶다;;)~~

저 100개의 집 주소를 모두 값으로 저장해야 한다고 할 때,

배열을 사용한다면 한 배열에 100개의 방(room?) 을 할당하여서 값을 저장할 수 있습니다.

하지만 배열을 사용하지 않는다면... myhome1, myhome2, myhome3 ....... myhome100 으로

각각의 변수 100개를 모두 선언하여 값을 저장해야 할 것 입니다.

매우 비효율적 입니다.

Javascript의 배열은 다른 언어와는 조금 차이점이 있습니다.

변수타입 변수명 = new Array(); 로 선언하거나,

변수타입 변수명 = [원소값]; 으로 선언할 수 있습니다.

배열을 선언하고 난 다음, 배열의 인덱스 값을 이용하여 변수명[인덱스] 의 형태로

사용할 수 있습니다. (아 참고로 배열의 인덱스는 0 부터 시작합니다 ㅎㅎ;;)

하하.... 머리가 폭발하신 분들도 계시겠죠...? 어렵지 않습니다 ㅎㅎ

오우 오우 오우 ~~싸발적이고~~ 아니, 확실히 배열의 인덱스는 0번부터 시작한다는 것을 알 수 있습니다.

그럼 이제 위 코드에서 for문을 이용하여 저 배열의 인덱스를 싸그리(?) 불러보도록 하겠습니다.

~~모두 집합!~~

와 은근 쉽네요? 저렇게 쉽게 한번에 불러올 수 있다니...

~~아깐 저에게 왜 하나씩 출력하게 시킨거죠 ;;~~

이제 사과, 바나나 를 인덱스에 넣었다 치고(?) 자주 사용하는 배열 연산을 배워봅시다.

인덱스 값을 이용하여 배열의 값 가르키기

let first = fruits[0]
// 사과

let last = fruits[fruits.length - 1]
// 바나나

배열의 마지막에 값 하나 추가하기

let newLength = fruits.push('땅콩')
// ["사과", "바나나", "땅콩"]
// 야 근데 땅콩은 과일이 아니잖아;;

배열의 마지막 값 하나 삭제하기

let last = fruits.pop() // 끝에있던 땅콩을 제거
// ["사과", "바나나"]
// 후 편안...

인덱스 값에 해당하는 배열의 값 삭제하기

let removedItem = fruits.splice(pos, 1)
// ["딸기"]
// 하... 나처럼 솔로가 되었네 fruits 배열아..?;;

배열의 길이 가져오기

let len = fruits.length
// 1

이제... 배열의 반복문이라고 할 수 있는 foreach 에 대해서 배우겠습니다.

솔직히 foreach를 잘 쓰는거 같진 않은데... 그래도 알긴 알아야 합니다.

네. 저게 다 입니다. 좀 어렵죠 ㅋㅋㅋ

foreach는 배열의 각각에 대해 아래 코드를 실행하는 문법 입니다.

element 변수에 document.write()를 실행할 때 마다 배열의 값이 하나씩 들어갑니다.

(처음엔 Java가 들어갔다가, 출력하고 나면 C/C++이 들어가는 것)

와 진짜 수고하셨습니다;; 퀴즈 푸세요(?)

🎐 Step 4. 오늘의 마지막 퀴즈!

1. 숫자 하나를 입력 받고, 그 값에 따라 for문으로 인덱스 번호를 출력하세요

2. 값을 두 개 입력받고, 그 값을 서로 뺀 값이 0 이하라면 a를, -5 이하라면 b를, 아니면 c를 출력하세요

3. 배열을 하나 만들고, 입력받은 값을 배열의 마지막에 추가하세요.

오늘 퀴즈의 정답은 다음 강의에서 공개하겠습니다.

수고하셨습니다!

채팅으로 사용자가 원하는 맞춤형 서버 호스팅을

이용 하실수 있습니다.

타 업체 보다 더욱 뛰어난 성능 과 가성비 와

합리적인 가격으로 RTGROUP 디도스 이용 하시길 바랍니다.

rtg.kr

저작자표시

'Web > Node.JS' 카테고리의 다른 글

[HTUN] Chapter 2. JavaScript 기초 (1) (0)	2020.06.24
[HTUN] Chapter 1. 기존 강좌를 개편합니다. (0)	2020.06.24

Yubin Heo

[HTUN] Chapter 2. JavaScript 기초 (2)

🎐 이전 강의 정리

🎐 이번 강의 내용

🎐 Step 1. 반복문 for / while

🎐 Step 2. 조건문 if ~ else if ~ else

🎐 Step 3. 배열과 배열 반복문 foreach (와... 너무 어렵다;;)

배열의 마지막에 값 하나 추가하기

배열의 마지막 값 하나 삭제하기

인덱스 값에 해당하는 배열의 값 삭제하기

배열의 길이 가져오기

🎐 Step 4. 오늘의 마지막 퀴즈!

'Web > Node.JS' 카테고리의 다른 글

댓글

티스토리툴바

[HTUN] Chapter 2. JavaScript 기초 (2)

🎐 이전 강의 정리

🎐 이번 강의 내용

🎐 Step 1. 반복문 for / while

🎐 Step 2. 조건문 if ~ else if ~ else

🎐 Step 3. 배열과 배열 반복문 foreach (와... 너무 어렵다;;)

배열의 마지막에 값 하나 추가하기

배열의 마지막 값 하나 삭제하기

인덱스 값에 해당하는 배열의 값 삭제하기

배열의 길이 가져오기

🎐 Step 4. 오늘의 마지막 퀴즈!

'Web > Node.JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바