[부스트코스 서포터즈3기]Javascript제어문 - 배열과 반복문 & 활용

들어가기 전 

______________________________________________

 

안녕하세요!

 

 

오늘은 2강 Javascript 제어문의 마지막 배열과 반복문 그리고 활용에 대해

 

 

이야기해보겠습니다! 

 

 

배열과 반복문 

_____________________________________________

 

살펴보기에 앞서 학습 목표와 핵심 단어에 대해 살펴보겠습니다. 

 

 

이전 시간까지는 배열과 반복문에 대해 살펴보았다면 

 

 

이번 시간에는 배열과 반복문을 한번 결합해보는 시간을 가졌습니다. 

 

 

배열과 반복문을 결합하는 내용은 생각보다 간단하였는데 , 

 

 

예시를 통해 간단하게 살펴보겠습니다! 

 

 

fruits = ["apple" , "banna" , "coconut"]

 

 

이렇게 fruits라는 배열을 만들었을 때 while 문을 통해 배열에 있는 값을 하나씩 꺼내어 

 

 

출력하는 시간을 가졌었습니다. 

 

 

자바스크립트의 경우 다른 언어들과는 다르게 반복문을 쓰기 앞서 사용될 변수를 이전에 

 

 

만들어 두어야 하였습니다. 그점을 고려하여 반복문을 작성할 경우 

 

 

var i = 0; 

 

while (i < 3 ) {

 

    document.write('<li>' + fruits [i] + '</li>');

     i += 1 ;

 

}

 

이렇게 작성할수있습니다. 

 

 

이렇게 작성하게 될시 i가 3 미만까지 반복되며 fruits배열 안에 있는 값을 하나씩 꺼내어

 

 

출력하는 방식으로 이루어집니다. 

 

 

이렇게 사용하게 될시 문제점이 있는데 

 

 

바로 배열안에 값을 추가하게 되더라도 3 미만까지 밖에 출력이 되지 않기 때문에 

 

 

추가한 값이 출력이 될 수 없습니다... 

 

 

그렇기 때문에 while이 반복되는 조건을 배열의 길이로 조정해야 하는데 

 

 

이때 사용하는것이 length입니다.

 

 

length를 이용하게되면 배열의 길이만큼 반복하는 것이기 때문에 

 

 

값을 추가하게 되더라도 추가한 값까지 출력이 가능합니다.

 

 

length를 추가하여 작성하게 될 시 다음과 같습니다. 

 

 

var i = 0;

 

while (i < fruits.length ) {

 

    document.write('<li>' + fruits [i] + '</li>');

     i += 1 ;

 

}

 

배열과 반복문 활용 

_____________________________________________

 

다음으로 배열과 반복문 활용의 학습목표와 핵심단어에 대해 살펴보겠습니다! 

 

해당 부분에서는 처음 강의때부터 강사님이 가지고 계셨던 예제를 이용해

 

 

활용하는 문제를 풀었었습니다. 

 

 

강의를 요약하자면 다음과 같습니다. 

 

 

1. 하이퍼 링크 부분의 색깔이 모드에 따라 색깔이 바뀌도록 하기 위해 querySelectorAll()을 이용하여 a 태그를 전부 가져오셨고

 

 

2. 기존 이전에 설명드렸던 방식과 동일하게 while 문을 이용하여 powderblue 방식으로 변경하셨습니다. 

 

 

www.boostcourse.org/cs124/lecture/194616

자바스크립트의 시작

 

이번 강의는 위에서 설명한 반복문 , 배열을 이용하여 예제를 통해 확인하는 문제였기 때문에 

 

 

위 링크를 통해 직접 들으신다면 도움이될거 같습니다 :) 

 

 

생각해보기 

_____________________________________________

 

이제 생각해보기를 통해 지금까지 배운 내용을 다시 되짚어보겠습니다! 

 

 

 

반복문 , 배열 생각해보기

반복,배열문의 활용 생각해보기

 

배운 내용을 다시 한번 돌아본다면 어려웠던 문제는 아녔습니다! 

 

 

한번 생각해보시고 답해보시기 바랍니다 :) 

 

 

 

..

.

.

.

.

.

.

.

.

.

.

.

.

.

 

.

.

.

배열,반복문 생각해보기 정답

 

배열,반복문 활용 생각해보기 정답

 

 

여러분도 같은 답을 내셨으리라 생각합니다 :) 

 

 

 

 

마치며

___________________________________________________

 

 

배열, 반복문을 마지막으로 Javascript 제어문까지 완료해보았습니다!

 

 

배우면 배울수록 알았던 문법들과 유사하기도하고 동적으로 바뀌는 것이 너무 재미있었습니다 :) 

 

 

얼른 열심히 다 배워 제 홈페이지를 직접 만들어보고 싶다는 욕심도 계속 생기고 있습니다! 얼른완강해야지!

 

 

다음 업로드로는 Javascript 함수 부분에서 함수 예고 , 함수에 대해 업로드하도록 하겠습니다 :) 

 

 

제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다! 

 

 

www.boostcourse.org/cs124

자바스크립트의 시작