2022. 6. 19. 02:10ㆍ22-1학기/웹 기초(WEB BASIC)
생활코딩 Javascript – 22. 배열과 반복문 ~ 29. 객체 예고
실습
22. 배열과 반복문
서로 연관된 데이터들을 담는 자바스크립트의 방법 : 배열
배열에 담겨 있는 데이터를 순차적으로 꺼내서 <li>라는 이 태그로 만들어주는 역할을 하는 것 : 반복문
*배열 형식의 예시 : var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];
배열의 각각의 항목 : 원소(element)
document.write()를 통해서 <li>태그를 만든다
*반복문 형식의 예시 :
var i = 0;
while(i < 4) {
실행문;
i = i + 1;
}
배열에서 어떤 데이터를 가져올 때 대괄호 안에 보고 싶은 데이터의 index 값을 넣어줌
원소가 바뀌면 '값이 없다'라는 뜻의 undefined가 생김
->반복문을 이용하여 직접 수를 변경하지 않아도 자동으로 바꾸는 방법
->링크가 완성이 되고 각각의 링크의 주소는 사람의 닉네임이 들어오게 하는 방법
배열 : 순서대로 서로 연관된 데이터를 잘 정리 정돈하는 것
반복문 : 순서대로 배열에 담긴 데이터를 하나씩 꺼내서 자동화된 처리를 할 수 있는 문법
23. 배열과 반복문의 활용
elements
->a 태그 찾고, alist라는 변수에 담겨있는 태그들을 하나하나 꺼내서 그것의 style 속성을 지정할 수 있음
var alist = document.querySelectorAll('a');
car i = 0;
while(i < alist.length){
console.log(alist[i]);
i = i + 1;
}alist[i]로 하면 반복문이 실행될 때마다 a 태그를 하나하나 가져올 수 있음
var alist = document.querySelectorAll('a');
car i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'powderblue';
i = i + 1;
}반복문이 진행될 때마다 원소에 들어있는 a 태그를 가리키고 style.color를 powderblue로 할 수 있음
-> 반복문을 통해 아주 많은 일을 손쉽게 처리할 수 있음
24. 함수예고
함수는 수남상자임 코드를 잘 정리하는 도구
코드의 양이 많아지면 웹페이지의 크기가 커지고 그만큼 비용, 시간, 노력이 들어간다는 걸 의미한다.
-> 함수를 이용
25. 함수
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>3</li>');
</script>
</ul>위와 같이 반복하는 코드가 무수히 많아지고 연속적이지 않다면 반복으로 처리할 수 없고 함수가 필요해진다.
*함수의 문법 예시 :
function two() {
실행문
}
two();
26. 함수 : 매개변수와 인자
함수는 입력과 출력으로 이루어짐.
-입력 : parameter(매개변수), argument(인자)
-출력 : return
sum(2,3);
sum(3,4);여기서 2,3과 3,4가 argument(인자)이다.
그리고 이 값을 받아서 함수 안으로 매개해주는 변수들을 parameter(매개변수)이다.
27. 함수 (리턴)
출력값에 관한 게 return(리턴)임
-> 숫자의 색을 바꿔서 출력할 수 있음
->숫자의 색과 크기를 바꿔서 출력할 수 있음
28. 함수의 활용
버튼과 관련된 코드를 함수를 이용해서 효율적으로 바꾸는 작업하기
리팩토링의 중요한 수단 중 하나가 함수임
함수는 리팩토링에서 아주 중요한 역할을 함
독립된 함수를 만들면 여기 있는 this는 더 이상 input 버튼이 아니고, 전역객체를 가리킴
여기 있는 input을 가리키게 하기 위해서 nightDayHandler가 실행될 때 this 값을 줌
버튼을 2개 만드는 버전
29. 객체 예고
객체(object)
함수라는 기반 위에 객체가 존재함
프로그래밍을 하다보면 코드가 많아지고, 코드가 많아지면 코드를 잘 정리정돈하기 위해 함수라는 걸 씀. 그리고 그 함수와 연관되어 있는 변수들이 엄청나게 많아지면 복잡도의 한계에 다다른다.
서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구가 객체이다.
의미가 불명확하거나 원래 무슨 뜻이었는지 파악하기 어려울 때는 함수를 통해 그 로직에 이름을 부여하는 것이 좋은 전략임
이름이 겹치기 때문에 Link에 대한 setColor를 LinksSetColor라고 바꿈
실습
<!doctype html>
<html>
<head>
<title>MENU - Welcome</title>
<meta charset="utf-8">
</head>
<hr width = "100%" color = "orange"></hr>
<body>
<h1><a href="home.html">MENU</a></h1>
<p>메뉴 소개</p>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
</body>
</html>->home.html
<!doctype html>
<html>
<head>
<title>MENU - 한식</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<hr width = "98%" color = "orange">
<h2>한식</h2>
<p><img src="han_1.jpg" width="20%">
<img src="han_2.jpg" width="20%">
<img src="han_3.jpg" width="20%">
<img src="han_4.jpg" width="20%">
<img src="han_5.jpg" width="20%">
</p>
</body>
</html>->a.html
<!doctype html>
<html>
<head>
<title>MENU - 양식</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<hr width = "98%" color = "orange">
<h2>양식</h2>
<p>
<img src="us_1.jpg" width="20%">
<img src="us_2.jpg" width="20%">
<img src="us_3.jpg" width="20%">
<img src="us_4.jpg" width="20%">
<img src="us_5.jpg" width="20%">
<img src="us_6.jpg" width="20%">
<img src="us_7.jpg" width="20%">
<img src="us_8.jpg" width="20%">
</p>
</body>
</html>->b.html
<!doctype html>
<html>
<head>
<title>MENU - 중식</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<hr width = "98%" color = "orange">
<h2>중식</h2>
<p>
<img src="ch_1.jpg" width="20%">
<img src="ch_2.jpg" width="20%">
<img src="ch_3.jpg" width="20%">
</p>
</body>
</html>->c.html
<!doctype html>
<html>
<head>
<title>MENU - 일식</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<hr width = "98%" color = "orange">
<h2>일식</h2>
<p>
<img src="ja_1.jpg" width="20%">
<img src="ja_2.jpg" width="20%">
<img src="ja_3.jpg" width="20%">
<img src="ja_4.jpg" width="20%">
<img src="ja_5.jpg" width="20%">
</p>
</body>
</html>->d.html
-설명 : home.html에는 위에 가로선을 넣고, a,b,c,d.html에는 중간에 가로선을 넣어서 사진과 메뉴를 분리함
사진의 크기를 줄여 보기 편리하게 만든다.
-링크 : file:///C:/Users/lin19/Desktop/page/home.html