안녕하세요~ 보라해바라기입니다.
저번 시간에 주/야간모드를 구현해보았는데요!
야간모드를 실행시켰을 때, 링크 색이 어두워 잘 안보이는 불상사가 생기더라고요...
물론 링크 색 변경을 통해 해결할 수 있지만!!
오늘은 배열과 반복문을 사용하여 이 문제를 해결해보려 합니다 ㅎㅎ
오늘도 저와 같이 렛츠기릿 하실까요~?
1. 배열
배열이라는 말은 일상생활에서 많이 들어보셨을텐데요!
그렇다면 JS에서 말하는 배열이란 무엇일까요?
배열은 데이터가 많아짐에 따라, 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아두는 일종의 수납상자랍니다~
책을 데이터로, 책장을 배열이라고 생각해볼까요?
여러 종류의 책(인문학, 사회과학, 의학, 종교학 등등)들은 책장의 각 공간에 분리되어서 정리됩니다.
이렇게 말이죠!
연관된 것끼리 묶인 데이터는 코드를 짤 때, 더 효율적이겠죠?
var greeting = ["hello", "bye"];
예시를 살펴보면, 배열은 대괄호를 사용하여 나타냅니다.
대괄호 안에 여러 값을 기술할 수 있죠!
값과 값 사이는 콤마( , )로 구분하게 됩니다 ㅎㅎ
document.write(greeting[0]);
document.write(greeting[1]);
배열에서 값을 끌어다 사용할 때, 0번째부터 시작하게 됩니다.
그래서 hello는 0번째, bye는 1번째가 되는 것이죠.
즉, hello는 greeting[0]을 통해, bye는 greeting[1]을 통해 값을 끌어올 수 있답니다!
greeting.push("how are you?");
greeting.push("Nice to meet you.");
배열에 원소를 추가하고 싶다면 배열 자체에 추가하는 것도 가능하겠지만
변수이름.push를 통해서도 가능하답니다~
document.write(greeting.length);
length를 이용하면 배열의 원소가 몇 개인지도 알 수 있고요!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Array</h1>
<h2>Syntax</h2>
<script>
var greeting = ["hello", "bye"];
/*대괄호 사용. 대괄호 안에 여러 값 기술 가능*/
/*값과 값 사이는 콤마로 구분*/
</script>
<h2>Get</h2>
<script>
document.write(greeting[0]); /*index 0*/
/* 첫번쨰 자리는 0번째임. */
document.write(greeting[1]); /*index 1*/
</script>
<h2>Add</h2>
<script>
greeting.push("how are you?");
greeting.push("Nice to meet you.");
</script>
<h2>Count</h2>
<script>
document.write(greeting.length);
</script>
</body>
</html>
2. 반복문
반복문은 말 그대로 어떤 조건에 만족하면 계속 반복을 하겠다는 이야기랍니다!
var i = 0;
while (i < 3) {
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i+1 ;
}
이번 예시에서는 while을 사용하였는데요?
위 예시를 해석해보자면 i는 0부터 시작해서 i가 3보다 작을 때까지 (3이 되면 실행 X)
목록 '2'와 '3'을 반복해서 출력하고 반복이 한 번 끝날 때 마다 i를 1씩 증가시켜라!는 의미가 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Loop</h1>
<ul>
<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>
</ul>
</body>
</html>
3. 배열과 반복문
앞서 우리가 배열과 반복문을 살펴보았죠?!
배열과 반복문의 케미스트리는.. 이루 말할 수 없을 정도로 엄청나답니다!
배열은 순서대로 서로 연관된 데이터를 잘 정리정돈한다면
반복문은 순서대로 배열에 담긴 데이터를 하나씩 꺼내서 조건에 맞게 자동화된 처리를 하기 때문이죠~
아래 예시에서 배열과 반복문을 활용해 정보를 나타낼 수 있음을 보여줍니다!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Loop & Array</h1>
<script>
var color = ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
</script>
<h2>Color</h2>
<ul>
<script>
var i = 0;
while (i < color.length) {
document.write('<li>'+color[i]+'</li>');
i = i + 1;
}
</script>
</ul>
<!-- 배열: 순서대로 서로 연관된 데이터를 잘 정리 정돈
반복문: 순서대로 배열에 담긴 데이터를 하나씩 꺼내서 자동화된 처리를 할 수 있는 문법-->
</body>
</html>
4. 배열과 반복문의 활용
드디어! 이 글의 서두에서 구현하고자 했던 기능을 배열과 반복문으로 만들어 볼 것이랍니다!
어떤 방식으로 구현할 것인가?
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'violet';
i = i + 1;
야간모드의 코드 중 일부인데요!
일단 alist라고 하는 변수에 a의 모든 태그를 불러오는 선택자를 사용할 것이랍니다.
반복문을 통해 각 배열의 요소의 갯수만큼 색을 바꿔주고 i는 1씩 증가하게 됩니다.
이 때, alist의 색은 야간일 때 violet, 주간일 때 purple로 지정했어요!
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'ivory';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'violet';
i = i + 1;
}
} else {
target.style.backgroundColor = 'ivory';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'purple';
i = i + 1;
}
}
">
짜잔!! 그럴싸하게 구현되었죠?
제가 예전에 배웠던 C언어에도 배열과 반복문에 관한 내용이 있어서
이번 주제는 더 재밌고 익숙했던 것 같아요!
같은 개념의 배열과 반복문이었지만 웹페이지의 편리함을 위해 쓰인다는 점이 좋았어요 ㅎㅎ
C언어와 달리 배열과 반복문이 실용적으로 쓰임을 보여주어서 기뻤답니다!!
오늘은 여기서 글을 마무리 하겠습니다. 감사합니다^_^
'JavaScript' 카테고리의 다른 글
| [JavaScript] 생활코딩 29 ~ 33 _ 객체 (쓰기와 읽기, 반복문, property, method, 활용) (0) | 2021.07.17 |
|---|---|
| [JavaScript] 생활코딩 24~28 _ 함수( basic, parameter, argument, return, 활용) (0) | 2021.07.16 |
| [JavaScript] 생활코딩 12~18 _ 제어 태그 선택, 비교연산자, 불리언, 조건문, 리팩토링 (0) | 2021.07.13 |
| [JavaScript] 생활코딩 6~11 _ 문자열과 숫자, 변수와 대입연산자, 웹브라우저의 제어(CSS) (0) | 2021.07.12 |
| [JavaScript] 생활코딩 1 ~ 5 _ HTML과 JS의 관계 (0) | 2021.07.10 |
댓글