-
[Javascript] 배열과 반복문Web/Javascript 2020. 5. 16. 04:04
반복문 예고
night 버튼을 클릭하면 <a> 태그에 style 속성이 추가되며 'powderblue' 라는 색상이 적용됨. day 버튼을 클릭하면 'blue' 색상이 적용됨. 이렇게 하기 위한 코드가 바로 다음 코드인데, 이 코드의 대략적인 내용은 이 웹 페이지의 모든 <a> 태그를 가져온 다음, <a> 태그 하나하나에 대해 반복적으로 powderblue 색상을 적용하는 것.
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color='powderblue';
console.log(alist[i]);
i=i+1;
}
배열
배열: 데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘 수 없기 때문에 데이터 중에서 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납상자
문자열은 따옴표로 시작해서 따옴표로 끝나고, 배열은 대괄호로 시작해서 대괄호로 끝남. 그리고 대괄호 안에 값들을 적는데, 여러 개의 값을 적을 수 있음.
["egoing", "leezche"] 로 둘 수 있으며 값과 값 사이는 콤마로 구분 가능.
var coworkers =["egoing", "leezche"];
coworkers 라는 변수에 배열이라는 새로운 데이터 타입이 담긴 것.
1. ex6.html 파일을 생성한 후 배열 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>배열</title>
</head>
<body>
<h1>Array</h1>
<h2>Syntax</h2>
<script>
var coworkers = ["egoing","leezche"];
</script>
</body>
</html>
2. 배열에서 데이터 꺼내기
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
첫 번째 자리에 있는 값은 0번째라는 뜻, 이를 인덱스라 함. 인덱스 0번은 egoing, 1번은 leezche라는 데이터를 가리킴.
3. 배열에서 들어 있는 값이 몇 개인지 확인
<h2>count</h2>
<script>
document.write(coworkers.length):
</script>
배열 항목의 개수인 2가 출력됨.
4. 배열에 데이터 추가
<h2>add</h2>
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>
'duru'와 'taeho'가 추가되어 coworkers.lengh의 값으로 4가 출력.
push는 배열의 끝에 데이터를 추가하는 역할을 함. 앞쪽이나 중간에 넣고 싶다면 pop, shift 등을 사용하면 됨.
반복문
1. ex7.html 파일 생성
2,3번쨰 코드를 3번 반복하고자 할 때
반복문의 기본 문법
while이라는 것이 반복문의 키워드, 그 밖에 for문도 있긴 함
while 괄호 안에는 불리언 데이터 타입이 들어옴. 따라서 true나 false 중 하나가 들어갈 수 있음. 이때 while 괄호 안의 내용이 true인 동안에는 while문 안의 코드가 반복적으로 실행됨. 즉, while 괄호 안의 내용이 false가 될 때까지 실행됨.
while 문이 실행되면 맨 먼저 자바스크립트는 while문의 true/false 상태를 보고 , true면 중괄호 안에 있는 코드를 한 줄씩실행하고 마지막까지 가면 다시 while 조건의 값이 true인지 false인지 확인함. 즉, 반복문이라는 것은 if문과 함께 순서대로 실행되는 프로그램의 흐름을 제어하는 제어문.
<script>
document.write('<li>1</li>')'
var i = 0;
while(i<3) {
document.write('<li>2</li>')
document.write('<li>3</li>')
i = i+1;
}
document.write('<li>4</li>')
</script>
배열과 반복문
1. ex8.html 파일 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>배열과 반복문</title>
</head>
<body>
<h1>아~관~파~천~</h1>
<ul>
<li>박예림</li>
<li>김한얼</li>
<li>정인아</li>
<li>최정탁</li>
<li>장시진</li>
<li>홍정우</li>
<li>김진주</li>
</ul>
</body>
</html>
그런데 만약 <li>태그 대신 목록이 아주 복잡한 태그이고 이것에 대한 수정이 빈번하게 일어난다면 배열에 담긴 데이터를 순차적으로 꺼내서 <li>라는 태그를 반복문으로 만들어야 함.
2. 배열 만들기
<script>
var 아관파천 = ['박예림','김한얼','정인아','최정탁','장시진','홍정우','김진주'];
</script>
배열 안의 각 항목들을 원소라고 함. 그러면 아관파천이라는 변수가 가리키는 이 배열에 담긴 데이터를 하나하나 꺼내서 <li> 태그를 만들면 됨. 즉, document.write('<li></li>');와 같은 형태의 데이터로 만들어서 넣으면 됨, 이를 위해서는 7번의 document.write()를 실행해야 함.
3. 코드 실행을 7번 반복하는 코드 작성
<h1>아~관~파~천~</h1>
<script>
var 아관파천 = ['박예림','김한얼','정인아','최정탁','장시진','홍정우','김진주'];
var i = 0;
while (i < 7) {
document.write('<li></li>');
i = i + 1;
}
</script>
우선 카운트를 정해야 함. 0부터 시작해서 while 문의 중괄호 안의 코드가 실행될 때마다 i의 값을 1씩 증가하게 함. 그리고 조건으로 'i가 4보다 작은 동안 반복한다'로 지정.
그럼 이제 아관파천이라는 변수에 할당된 배열에서 반복문이 실행될 때마다 원소값을 하나하나 가져와 <li> 태그 안에 배치하기만 하면 됨. 그런데 여기서는 i라는 변수를 사용하며, i는 0부터 1씩 증가해 6까지 증가.
그러면 <li> 안에서는 coworkers 배열에서 데이터를 가져와서 넣으면 되는데, 배열의 데이터를 가져올 때는 대괄호 안에 가져오고 싶은 데이터의 인덱스 값을 넣으면 되고, 이때 i 값이 인덱스와 일치한다는 특성을 활용할 수 있음.
<h1>아~관~파~천~</h1>
<script>
var 아관파천 = ['박예림','김한얼','정인아','최정탁','장시진','홍정우','김진주'];
var i = 0;
while (i < 7) {
document.write('<li>'+아관파천[i]+'</li>');
i = i + 1;
}
</script>
그러나 이 코드에서 새 멤버를 추가하면 페이지를 새로고침했을 때 결과가 바뀌지 않음. 그리고 만약 한 명이 줄어든다면, 값이 없다는 뜻에서 undefined가 출력.
아관파천의 배열에 담긴 원소의 개수가 조건에 올 수 있다면 직접 개수를 입력하지 않더라도 탄력적으로 로직이 변할 것. 따라서 5 대신 coworkers.length를 넣고 실행해 보기.
4. 배열에 담긴 원소의 개수만큼 반복하도록 수정
<h1>아~관~파~천~</h1>
<script>
var 아관파천 = ['박예림','김한얼','정인아','최정탁','장시진','홍정우','김진주'];
var i = 0;
while (i < 아관파천.length) {
document.write('<li>+아관파천[i]+</li>');
i = i + 1;
}
</script>
5. <li> 태그에 링크 추가
<h1>아~관~파~천~</h1>
<script>
var 아관파천 = ['박예림','김한얼','정인아','최정탁','장시진','홍정우','김진주'];
var i = 0;
while (i < 아관파천.length) {
document.write('<li><a href="a.com/'+ 아관파천[i] + '">'
'+아관파천[i]+'</a></li>'>);
i = i + 1;
}
</script>
배열과 반복문의 활용
야간 모드일 때는 링크들이 밝게 표시되고, 주간 모드일 대는 다소 어두운 계열로 링크가 표시되게 만들기
1. 웹 페이지에 있는 첫번째 <a> 태그 가져오기
document.querySelector('a');
2. 웹 페이지에 있는 모든 <a> 태그 가져오기
document.querySelectorAll('a');
콘솔 결과값에 나오는 대괄호를 배열이라 생각하고 이 결과를 alist라는 변수에 넣는다.
3. 모든 <a> 태그를 가져와서 alist 변수에 넣고 출력하기
var alist= document.querySelectorAll('a')
console.log(alist[0]);
console.log(alist[1]);
console.log(alist.length);
반복문을 이용해 alist라는 변수에 담긴 태그를 하나하나 꺼내서 그것의 style 속성을 지정 가능.
4. 반복문으로 모든 링크 출력하기
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
console.log(alist[i]);
i = i+1;
}
5. 반복문에서 링크의 글자색 변경
var alist= document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color="#BEF3E8";
i = i+1;
}
6. 야간 모드에서는 하늘색, 주간 모드에서는 회색으로 링크 색 변경
<input type="button" value="야간 모드" onclick="
var target= document.querySelector('body')
var yaong= document.querySelector('.yaong')
if (this.value ==='야간 모드') {
target.style.backgroundColor='#736D71';
target.style.color='white';
document.querySelector('h1').style.color='yellow';
yaong.style.color='white';
this.value='주간 모드'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color='#BEF3E8';
i = i + 1;
}
}
else {
target.style.backgroundColor='white';
target.style.color='black';
document.querySelector('h1').style.color='purple';
yaong.style.color='black';
this.value='야간 모드'
var i = 0;
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color='gray';
i = i + 1;
}
}
">
작은따옴표와 큰따옴표를 주의할 것
www.evernote.com/l/AlfSCzBYesZDTrhVxFasEHwxCB1qthEZtaU/
'Web > Javascript' 카테고리의 다른 글
[Javascript] 객체 예고 (0) 2020.05.16 [Javascript] 함수 (0) 2020.05.16 [Javascript] 제어할 태그 선택하기, 비교 연산자와 불리언, 조건문, 리팩터링 (0) 2020.05.16 [Javascript] 데이터 타입- 문자열과 숫자, 변수와 대입 연산자, 웹브라우저 제어 (0) 2020.05.16 [Javascript] 야간 모드, <script> 태그, 이벤트, 콘솔 (0) 2020.05.16